@charset "utf-8";

/* 헤더 */
header.hd-scroll {position: fixed; background: #fff;}

.hd-reverse {position: fixed;}
.hd-reverse h1 a {background-image: url("../img/logo/horiz_wt.png");}
.hd-reverse .lang-btn {color: #fff}
.hd-reverse .lang-btn::after {background-image: url("../img/arrow_wt_b.svg");}
.hd-reverse nav .depth1 > li > a {color: #fff;}
.hd-reverse nav .depth1 > li > a span::before {background: #fff;}

.hd-reverse .btn-snb .icon-burger,
.hd-reverse .btn-snb .icon-burger:before,
.hd-reverse .btn-snb .icon-burger:after {background: #fff;}


/*============================================================*/
/* 메인 타이틀 */
/*============================================================*/
.mainPage h3 {font-size: 5.8rem; font-weight: 800; line-height: 1.5;}
@media (max-width: 992px) {
    .mainPage h3 {font-size: 3.8rem;}
}
@media (max-width: 768px) {
    .mainPage h3 {font-size: 2.8rem;}
}


/*============================================================*/
/* 섹션 1 = 비주얼 */
/*============================================================*/
.main-slide {position: relative; height: 100dvh;}
.main-slide .swiper-slide {background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-slide .slide01 {background-image: url("../img/main/visual01.png");}
.main-slide .slide02 {background-image: url("../img/main/visual02.png");}

/* 텍스트 */
.main-visual .swiper-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color: #fff; z-index: 1;}
.main-visual .swiper-txt h2 {font-size: 8rem; font-weight: 300;}
.main-visual .swiper-txt h2 br {display: none;}
.main-visual .swiper-txt p {margin-top: 2rem; font-size: 2.6rem; line-height: 1.5;}

/* 페이지네이션 */
.main-slide .swiper-control {position: absolute; bottom: 7rem; left: 50%; transform: translateX(-50%); width: 14rem; height: 1rem; z-index: 1;}
.main-slide .swiper-pagination {top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); width: auto;}
.main-slide .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 5px; background: transparent; border: 1px solid #fff; opacity: 1;}
.main-slide .swiper-pagination .swiper-pagination-bullet-active {width: 22px; background: #fff; border-radius: 5px;}

/* 네비게이션 */
.main-slide .swiper-button-next,
.main-slide .swiper-button-prev {top: 50%; transform: translateY(-50%); width: 2.2rem; height: 3.6rem; margin: 0; background: url("../img/arrow_slide_wt.svg") center/auto no-repeat;}
.main-slide .swiper-button-prev {left: 0; transform: translateY(-50%) rotate(180deg);}
.main-slide .swiper-button-next {right: 0;}
.main-slide .swiper-button-next:after,
.main-slide .swiper-button-prev:after {display: none;}

/* scroll down */
.scroll-down {position: absolute; bottom: 14rem; left: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4rem; height: 20px; z-index: 1; animation: move 2s infinite;}
.scroll-down p {margin-bottom: 0.4rem; font-size: 1.8rem; color: #fff;}
.scroll-down .arrow {width: 1.6rem; aspect-ratio: 14/21; background: url("../img/scroll_down_wt.svg") center/auto no-repeat; }
@keyframes move {
    0% {transform: translateX(-50%) translateY(0px);}
    50% {transform: translateX(-50%) translateY(10px);}
    100% {transform: translateX(-50%) translateY(0px);}
}

@media (max-width: 1320px) {
    .main-visual .swiper-txt h2 br {display: block;}
}
@media (max-width: 992px) {
    .main-visual .swiper-txt h2 {font-size: 6rem;}
}
@media (max-width: 768px) {
    .main-visual .swiper-txt h2 {font-size: 3.6rem;}
    .main-visual .swiper-txt p {font-size: 1.8rem;}
}


/*============================================================*/
/* 섹션 2 = 회사 개요 */
/*============================================================*/
.main-company {padding: 12rem 0; background: #F8F8F8;}
.main-company h3 {margin-bottom: 6.2rem;}
.main-company .content {display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;}

.main-company .title {flex: 0 0 auto;}
.main-company .title p {max-width: 300px; font-size: 2rem; font-weight: 700;}
.main-company a {position: relative; display: inline-flex; align-items: center; gap: 2.8rem; margin-top: 4.3rem; color: #444; font-size: 1.5rem; font-weight: 700; transition: var(--trans-25);}
.main-company a::before {content: ""; position: absolute; bottom: -0.7rem; left: 0; width: 0; height: 1px; background: var(--col-theme); transition: var(--trans-25);}
.main-company .content > p {flex: 1 0 auto; max-width: 30%; font-size: 1.8rem; line-height: 1.5;}
.main-company .img {flex: 0 0 31%; position: relative;}
.main-company .img::after {content: ""; display: inline-block; width: 100%; aspect-ratio: 481/180; background: url("../img/main/company_item.png") center/cover no-repeat; border-radius: 8.8rem; overflow: hidden;}

@media (hover: hover) and (pointer: fine) {
    .main-company a:hover {color: var(--col-theme);}
    .main-company a:hover::before {width: 100%;}
    .main-company a:hover .svg-stroke {stroke: var(--col-theme);}
}

@media (max-width: 1200px) {
    .main-company .content {flex-wrap: wrap; align-items: flex-start; gap: 5rem 3rem;}
    .main-company .content > p {max-width: calc(100% - 300px - 3rem);}
    .main-company .img {flex: 1 0 100%; text-align: center;}
    .main-company .img::after {max-width: 48rem;}
}
@media (max-width: 768px) {
    .main-company .title {display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; width: 100%;}
    .main-company a {flex: 0 0 auto; margin-top: 0.3rem;}
    .main-company .content > p {max-width: 100%;}
}



/*============================================================*/
/* 섹션 3 = 브랜드 */
/*============================================================*/
.main-brand {padding: 12rem 0;}
.main-brand .title-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 7rem;}
.main-brand .title-wrap a {display: flex; align-items: center; gap: 1.2rem;}
.main-brand .title-wrap a p {font-size: 1.4rem; font-weight: 600;}
.main-brand .title-wrap a span {display: flex; justify-content: center; align-items: center; width: 6rem; aspect-ratio: 1; border: 1px solid var(--col-theme); border-radius: 50%; overflow: hidden; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .main-brand .title-wrap a:hover span {background: var(--col-theme);}
    .main-brand .title-wrap a:hover .svg-stroke {stroke: #fff;}
}

.main-brand .content {display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 2.8rem; font-size: 2.2rem; font-weight: 300; line-height: 1.5;}
.main-brand .content h4 {font-size: 136%; font-weight: 700;}
.main-brand .content h5 {font-size: 128%; font-weight: 700;}

.main-brand .content div {display: flex; flex-direction: column; justify-content: flex-end; gap: 1.6rem; height: 51rem; padding: 3rem 3.2rem; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; overflow: hidden;}
.main-brand .content div:nth-of-type(1) {background-image: url("../img/main/brand01.png");}
.main-brand .content div:nth-of-type(2) {background-image: url("../img/main/brand02.png");}
.main-brand .content div:nth-of-type(3) {grid-column: 1 / 3; background-image: url("../img/main/brand03.png"); border-radius: 0 0 10rem 0;}
.main-brand .content div:nth-of-type(3) p {max-width: 54rem;}

@media (max-width: 1200px) {
    .main-brand .content {grid-template-columns: repeat(2, 1fr); gap: 5rem 2.8rem;}
    .main-brand .content h4 {grid-column: 1 / 4; grid-row: auto;}
}
@media (max-width: 992px) {
    .main-brand .content {font-size: 1.8rem;}
    .main-brand .content div {height: 30rem;}
}
@media (max-width: 768px) {
    .main-brand .content {display: flex; flex-direction: column; align-items: flex-start;}
    .main-brand .content div {width: 100%;}
    .main-brand .content div:nth-of-type(3) {border-radius: 0 0 5rem 0;}
}
@media (max-width: 576px) {
    .main-brand .title-wrap a p {display: none;}
}



/*============================================================*/
/* 섹션 4 = 상품 소개 */
/*============================================================*/
.main-product {padding: 9rem 0; background: #F8F8F8;}
.main-product .title-wrap {margin-bottom: 22rem; text-align: center;}
.main-product .title-wrap > span {display: block; margin-bottom: 3.5rem; font-size: 2rem; font-weight: 600;}
.main-product .title-wrap p {margin: 3.6rem auto 0; max-width: 41rem; color: #888; font-size: 1.8rem; line-height: 1.65;}

.main-product ul {display: flex; gap: 1rem;}
.main-product ul li {flex: 1 0 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4rem; height: 68rem; padding: 6rem 3.6rem; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 1rem; color: #fff; font-size: 1.5rem; line-height: 1.5; overflow: hidden;}
.main-product ul li:nth-child(odd) {margin-top: -9.3rem;}
.main-product ul li:nth-child(1) {background-image: url("../img/main/business01.png"); border-radius: 10rem 1rem 1rem 1rem;}
.main-product ul li:nth-child(2) {background-image: url("../img/main/business02.png");}
.main-product ul li:nth-child(3) {background-image: url("../img/main/business03.png");}
.main-product ul li:nth-child(4) {background-image: url("../img/main/business04.png"); border-radius: 1rem 1rem 10rem 1rem;}

.main-product ul li h5 {font-size: 186%; font-weight: 700;}

@media (max-width: 1400px) {
    .main-product h3 br {display: none;}
}
@media (max-width: 1200px) {
    .main-product ul {flex-wrap: wrap;}
    .main-product ul li {flex: 1 0 auto; width: calc(50% - 1rem); height: 45rem;}
}
@media (max-width: 768px) {
    .main-product ul li {height: 35rem;}
    .main-product ul li h5 {font-size: 146%;}
}
@media (max-width: 576px) {
    .main-product .title-wrap {margin-bottom: 10rem;}
    .main-product ul li {gap: 1rem; width: 100%; height: 28rem;}
    .main-product ul li h5 {font-size: 146%;}
    .main-product ul li:nth-child(odd) {margin-top: 0;}
    .main-product ul li:nth-child(1) {border-radius: 6rem 1rem 1rem 1rem;}
    .main-product ul li:nth-child(3) {border-radius: 1rem 1rem 6rem 1rem;}
}



/*============================================================*/
/* 섹션 5 = 공지사항 */
/*============================================================*/
.main-notice {padding: 7rem 0;}
.main-notice .title-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 7rem;}
.main-notice .title-wrap a {display: flex; align-items: center; gap: 1.2rem;}
.main-notice .title-wrap a p {font-size: 1.4rem; font-weight: 600;}
.main-notice .title-wrap a span {display: flex; justify-content: center; align-items: center; width: 6rem; aspect-ratio: 1; border: 1px solid var(--col-theme); border-radius: 50%; overflow: hidden; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .main-notice .title-wrap a:hover span {background: var(--col-theme);}
    .main-notice .title-wrap a:hover .svg-stroke {stroke: #fff;}
}

.main-notice ul {display: flex; gap: 2rem;}
.main-notice ul li {flex: 1 0 0; background: #F9F9F9;}
.main-notice ul li a {display: flex; flex-direction: column; gap: 1.8rem; width: 100%; height: 100%; padding: 3.6rem; border: 1px solid transparent; transition: var(--trans-25);}
.main-notice ul li h5 {min-height: 4.5rem; font-size: 1.8rem; font-weight: 700}
.main-notice ul li p {min-height: 4rem; line-height: 1.5;}
@media (hover: hover) and (pointer: fine) {
    .main-notice ul li a:hover {border-color: var(--col-theme);}
}
@media (max-width: 1200px) {
    .main-notice ul li a {padding: 2rem;}
}
@media (max-width: 992px) {
    .main-notice ul {flex-wrap: wrap;}
    .main-notice ul li {flex: 1 0 auto; width: calc(50% - 1rem);}
}
@media (max-width: 576px) {
    .main-notice ul li {width: 100%;}
    .main-notice .title-wrap a p {display: none;}
}