body {
  color: #333333;
  position: relative;
  font-family: 'Nanum Gothic', sans-serif;
}
.inner {
  width: 1100px;
  margin: 0 auto;
}

.page {
  display: flex;
  flex-direction: column;
}

/* 제목 공통 */
h3.title__text {
  font-size: 21px;
  font-weight: 700;
}

/* 아이템 공통 텍스트 */
.item__text__subinfo {
  position: relative;
  color: rgb(88, 88, 88);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  margin: 5px;
}
.item__text__subinfo .__keyword {
  margin: 0 3px 0 0;
}
.item__text__subinfo .__keyword:hover {
  text-decoration: underline;
}
.item__text__subinfo .__company{
  margin-right: 2px;
}
.item__text__subinfo .__company:hover {
  text-decoration: underline;
}
.item__text__subinfo .__company::before {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  position: absolute;
  top: 1px;
  margin-left: -2px;
  background-color: rgb(88, 88, 88);
}

.item__text .__title {
  font-weight: 600;
  line-height: 1.2;
}
.item__text__percentage {
  margin: 7px 0;
  font-weight: 800;
  font-size: 14px;
  color: orangered;
}


/* 버튼 공통 */
.btn {
  width: fit-content;
  padding: 15px 40px;
  background-color: #fff;
  border-radius: 40px;
  border: 1px solid #afafaf;
  color: #333333;
}
a {
  text-decoration: none;
  color: #333333;
}

a .lookAll{

}
a .banner{
  display: block;
  width: 1050px;
}

/* 호버시 이미지확대 */
.hover-effect {
  overflow: hidden;
}
.hover-effect:hover img {
  transform: scale(1.08);
  transition: all .1s;
}

/* SWIPER좌우버튼 */
.swiper-button-next,
.swiper-button-prev {
  width: 32px;
  height: 32px;
  border: 1px solid #000000;
  border-radius: 50%;
  background-color: #000000;
  color: #fff;
  opacity: .6;
}

.main__banner .swiper-button-next {
  position: absolute;
  top: 250px;
  right: 15px;
}
.main__banner .swiper-button-prev {
  position: absolute;
  top: 250px;
  left: 665px;
}
.swiper-button-next .material-symbols-outlined,
.swiper-button-prev .material-symbols-outlined{
  transform: scale(1.3);
}


.swiper-button-next::after,
.swiper-button-prev::after {
  content: none;
}



header .inner {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.header__left {

}
.header__right {
  font-size: 13px;
  font-weight: 700;
  display: flex;
}
.header__right .upload {
  padding: 15px;
  border-radius: 10px;
  margin: 0 5px;
}
.header__right .login {
  padding: 15px;
  border-radius: 10px;
}
.main-menu {
  position: sticky;
  top: 0px;
  width: 1100px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  /* padding: 10px 0; */
}
.main-menu__list {
  display: flex;
  align-items: center;
}
.main-menu .main-menu__list__text{
  font-weight: 700;
}
.main-menu__list li {
  padding: 10px 20px 10px 0;
}
.main-menu__list li .__category{
}

.main-menu__list__category {
  display: flex;
}

.main-menu__list .__category .category__item {
  position: absolute;
  top: 50px;
  width: 1100px;
  height: 200px;
  background-color: #fff;
  padding-top: 20px;
  display: none;
}
.category__item .category__item__container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(5, 1fr);
  align-content: space-evenly;
}

/* 서브메뉴 호버 */
.__category:hover .category__item {
  display: block;

}
.category__item .__item{
  display: flex;
  width: 200px;
  height: 50px;
  align-items: center;
}
.category__item .__item img{
  width: 38px;
  height: 38px;
}
.category__item .__item p{
  
}
.main-menu__list__category .material-symbols-outlined{
  font-size: 30px;
}
.main-menu__list__category .main-menu__list__text{
  margin: 7px 0 0;
}
.main-menu__list__text {

}


.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search input {
  border-radius: 6px;
  border-style: none;
  background-color: #eeeeee;
  height: 30px;
  margin-right: 3px;
  outline: none;
}
.search .material-symbols-outlined {
  position: absolute;
  top: 12px;
  right: 3px;
}

/* 메인시작 */
.front-page{
  position: relative;
  display: flex;
  padding-top: 40px;
}
.front-page .main{

}

.main__banner{
  position: relative;
  width: 766px;
  height: 280px;
}
.main__banner .swiper-slide{
  font-size: 40px;
}
.main .main__banner img {
  width: 100%; 
}


/* 주목할 만한 프로젝트 */
.main__attracting-project {

}
.main__attracting-project h3 {
  margin: 30px 0 15px;
}
.main__attracting-project__container {
  display: grid;
  height: 530px;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(2, 260px);
  align-content: space-evenly;
}
.main__attracting-project__item {
  width: 195px;
  height: 250px;
}
.main__attracting-project__item .item__image{
  width: 186px;
}
.main__attracting-project__item .item__text {

}
.main__attracting-project__item .item__text__keyword {

}
.main__attracting-project__item .item__text__company {

}
.main__attracting-project__item .item__text__percentage {

}

/* POPULAR-PROJECT */
.popular-project {

}
.popular-project__title {
  display: flex;
  justify-content: space-between;
}
.popular-project__current-time {
  font-size: 13px;
  margin: 10px 0;
}
.popular-project__container {
}
.popular-project__item {
  width: 290px;
  height: 110px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin: 5px;
  /* box-sizing: border-box; */
}
.popular-project__item .item__image {
  width: 105px;
  height: auto;
}
.popular-project__item .rank {
  font-weight: 700;
  color: rgb(241, 8, 0);
  margin: 5px 15px 0;
}
.popular-project__item .item__text {
  display: flex;
  flex-direction: column;
}
.popular-project__item .item__text__keyword {

}
.popular-project__item .item__text__company {

}
.popular-project__item .item__text__percentage {
  padding-top: 12px;
}
.popular-project .btn {
  margin-top: 10px;
  margin-left: 28px;
}


/* BANNER */
.banner {
  width: 1100px;
}
.banner img {
  width: 100%;
}

/* 에디터의 PICK */
.editor-pick {
  
}
.editor-pick h3 {
  margin: 40px 0 20px;
}
.swiper {

}
.swiper-slide {

}
.editor-pick__item {
 width: 220px;
}
.editor-pick__item img {
 width: 100%;
}

/* THEME-PROJECT */
.theme-project {
}
.theme-project__container {
  margin: 60px 0;
  display: flex;
  gap: 25px;
  padding: 60px 0;
  border-top: 1px solid #dadada;
}
.theme-project__container .__introduce {
  display: flex;
  flex-direction: column;
}
.theme-project__container .__introduce__image {
  width: 280px;
}
.theme-project__container .__introduce__image img {
  width: 100%;
}
.theme-project__container .__introduce__text {
  display: flex;
  flex-direction: column;
}
.theme-project__container .__introduce__text .__introduce__text__title {
  margin: 20px 0;
}
.theme-project__container .__introduce__text .__introduce__text__detail {
  width: 280px;
  line-height: 1.6;
}
.theme-project .btn {
}

.theme-project .__list {
  width: 764px;
  height: 470px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.theme-project .__item {
  width: 190px;
  padding: 0 10px 0 0;
  margin-bottom: 50px;
}
.theme-project img {
  width: 100%;
}


/* FOOTER */
.footer-list {
  width: 1100px;
  border-top: 1px solid #dadada;
  padding-top: 20px;
  display: flex;
  line-height: 2.5;
  justify-content: space-between;
}
.footer-list__company {
  width: 600px;
  display: flex;
  justify-content: space-between;
}

.footer-list ul li:first-child {
  font-weight: 800;
}

footer button {
  width: 130px;
  padding: 8px;
  border-radius: 5px;
  border: 0;
}