/* 메인 컨텐츠 - 메인 비주얼 */
.main-visual{font-size: 0;position: relative;}
.main-visual .swiper{position: relative; transition: height 0.6s ease-in-out;}
.main-visual .swiper .swiper-wrapper{}
.main-visual .swiper .swiper-wrapper .swiper-slide{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.main-visual .swiper .swiper-wrapper .swiper-slide img{width: 100%;}
.main-visual .swiper .swiper-wrapper .swiper-slide > a > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; scale: 1.14; } 
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content{width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);text-align: center;color: #fff;}
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content::after{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #0000007d;}
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div{width: 900rem;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 10;position: relative;margin-inline: auto;}
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::after{content: "";width: 100rem;height: 330rem;background: url(../images/common/visual_ic.svg) no-repeat center center / contain;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::before{content: "";width: 100rem;height: 330rem;background: url(../images/common/visual_ic.svg) no-repeat center center / contain;position: absolute;top: 50%;right: 0; transform: translateY(-50%) rotate(180deg);}
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div h2 { font-size: 54rem; line-height: 1.2; font-weight: 500; margin-bottom: 20rem; } 
.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div p { font-size: 20rem; line-height: 1.4; } 

.main-visual .swiper .swiper-wrapper .swiper-slide .text-content > * { opacity: 0; visibility: hidden; transform: translateY(10rem); transition: all 0.6s ease; } 
.main-visual .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .text-content > * { opacity: 1; visibility: visible; transform: translateY(0); } 

.main-visual .swiper .swiper-buttons { width: 1600rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: none; } 
.main-visual .swiper .swiper-buttons > div::after { border-color: var(--color-neutral-1); width: 25rem; height: 25rem; } 

.main-visual .visual-side{position: absolute;right: 50rem;bottom: 100rem;z-index: 1;}
.main-visual .visual-side > ul{display: flex;flex-direction: column;gap: 10rem;}
.main-visual .visual-side > ul > li{}
.main-visual .visual-side > ul > li > a{width: 100rem;height: 100rem; display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 5rem;background: rgba(204, 204, 204, 0.1);box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.15);border-radius: 10rem;}
.main-visual .visual-side > ul > li > a > figure{display: flex;align-items: center;justify-content: center;width: 40rem;height: 40rem;}
.main-visual .visual-side > ul > li > a > figure > img{display: block;width: 100%;}
.main-visual .visual-side > ul > li > a > span{display: block;text-align: center;font-size: 16rem;line-height: 1.4;color: #fff;}

.main-visual .scroll{position: absolute;bottom: 40rem;left: 50%;transform: translateX(-50%);z-index: 1;display: flex;flex-direction: column;align-items: center;cursor: pointer;}
.main-visual .scroll svg{display: block;width: 30rem; height: auto; animation: jumpSquash 2s infinite;}
.main-visual .scroll span{display: block;text-align: center;font-size: 10rem;line-height: 1.4;color: #fff;font-weight: 300;line-height: 1.4;margin-top: 2rem;}

@keyframes jumpSquash {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    45% { transform: translateY(-17rem) scale(1, 1); animation-timing-function: ease-in; }
    60% { transform: translateY(0) scale(1, 1); }
    65% { transform: translateY(3rem) scale(1.05, 0.95); }
    75% { transform: translateY(0) scale(1, 1); }
}

@media all and (max-width: 1440px){
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div{width: 700rem;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div h2{ font-size: 40rem; } 
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div p{font-size: 16rem;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::after,
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::before{width: 80rem;}

    .main-visual .visual-side{right: 30rem;bottom: 50rem;}
    .main-visual .visual-side > ul > li > a{width: 75rem;height: 75rem;}
    .main-visual .visual-side > ul > li > a > span{font-size: 12rem;}
    .main-visual .visual-side > ul > li > a > figure{width: 30rem;height: 30rem;}
}

@media all and (max-width:1023px) {
    .main-visual .swiper .swiper-wrapper .swiper-slide > a > iframe{scale: 1.18;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div{width: 500rem;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div h2{ font-size: 30rem; margin-bottom: 10rem; } 
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div p{font-size: 14rem;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::after,
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::before{width: 60rem;}

    .main-visual .visual-side{right: 20rem;bottom: 20rem;}
    .main-visual .visual-side > ul > li > a{width: 60rem;height: 60rem;}
    .main-visual .visual-side > ul > li > a > figure{width: 20rem;height: 20rem;}
    .main-visual .visual-side > ul > li > a > span{}
    .main-visual .scroll{bottom: 25rem;}
    .main-visual .scroll svg{width: 25rem;}
}

@media all and (max-width:660px) {
    .main-visual .swiper .swiper-wrapper .swiper-slide{padding-bottom: 177.777%;}
    .main-visual .swiper .swiper-wrapper .swiper-slide > a > iframe{scale: 1;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div{width: calc(100% - 40rem);}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div h2{ font-size: 34rem; margin-bottom: 15rem; } 
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div p{font-size: 17rem;}
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::after,
    .main-visual .swiper .swiper-wrapper .swiper-slide .text-content > div::before{width: 100rem;}

    .main-visual .visual-side{right: 15rem;bottom: 15rem;}
    .main-visual .visual-side > ul > li > a{width: 45rem;height: 45rem;}
    .main-visual .visual-side > ul > li > a > span{display: none;}
    .main-visual .scroll svg{width: 30rem;}
}



/* 메인 컨텐츠 - 공통 */
.main__content-header { position: relative; margin-bottom: 60rem; } 
.main__content-header h3 { font-size: 48rem; font-weight: 600; margin-bottom: 15rem;background: linear-gradient(270.43deg, #2E3192 0.15%, #5856D6 49.99%, #00AEEF 99.82%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;display: inline-block;} 
.main__content-header p { font-size: 18rem; line-height: 1.4;color: var(--color-primary);} 
.main__content-header div {margin-top: 70rem;} 
.main__content-header div a {display: inline-flex;align-items: center;justify-content: center;width: 140rem;height: 45rem;color: var(--color-neutral-5);border: 1px solid var(--color-neutral-3);border-radius: 25rem;font-size: 14rem;text-transform: uppercase;} 

@media all and (max-width:1440px) {
    .main__content-header h3{font-size: 38rem;}
    .main__content-header div{margin-top: 40rem;}
}

@media all and (max-width:1023px) {
    .main__content-header{text-align: center;}
}

@media all and (max-width:660px) {
    .main__content-header{margin-bottom: 40rem;}
    .main__content-header h3{font-size: 32rem;margin-bottom: 10rem;}
    .main__content-header p{font-size: 16rem;}
    .main__content-header div a {width: 110rem;height: 40rem;font-size: 12rem;}
}



/* 메인 컨텐츠 - 메인 카테고리 */
.main-category{padding: 150rem 0;}
.main-category .main__content-header{text-align: center;}
.main-category .category-list{}
.main-category .category-list > ul{}
.main-category .category-list > ul > li{border-radius: 15rem;overflow: hidden;}
.main-category .category-list > ul > li > a{display: block;position: relative;}
.main-category .category-list > ul > li > a::after{content: "";width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));position: absolute;top: 0;left: 0;}
.main-category .category-list > ul > li > a > img{display: block;width: 100%;}
.main-category .category-list > ul > li > a > span{display: block;width: 100%;text-align: center;color: #fff;font-weight: 500;font-size: 24rem;line-height: 1.4;position: absolute;bottom: 50rem;left: 50%;transform: translateX(-50%);z-index: 1;padding: 0 10rem;}

@media all and (max-width:1440px) {
    .main-category .category-list > ul > li > a > span{font-size: 22rem;bottom: 40rem;}
}

@media all and (max-width:660px) {
    .main-category{padding: 100rem 0;}
    .main-category .category-list > ul.ms-pc{display: none;}
    .main-category .category-list > ul{display: grid;grid-template-columns: repeat(2, 1fr);gap: 10rem;}
    .main-category .category-list > ul > li{border-radius: 10rem;}
    .main-category .category-list > ul > li > a > span{font-size: 16rem;bottom: 20rem;}
}



/* 메인 컨텐츠 - 메인 제품 */
.main-prd{background: url(../images/main/main_prd.jpg) no-repeat center center / cover;padding: 120rem 0;}
.main-prd > div{display: grid;grid-template-columns: 40.48% 59.52%;align-items: center;}
.main-prd .main__content-header{margin: 0 auto;}
.main-prd .main__content-header h3{background: inherit;color: #fff;-webkit-text-fill-color: inherit;}
.main-prd .main__content-header p{color: #fff;}
.main-prd .main__content-header > div{margin: 0;}
.main-prd .main__content-header div a{border-color: var(--color-neutral-2);color: var(--color-neutral-1);}
.main-prd .prd-wr{width: -webkit-fill-available;width: inherit;}
.main-prd .prd-wr > ul{display: flex;gap: 0;}
.main-prd .prd-wr > ul > li{}
.main-prd .prd-wr > ul > li > a{display: block;position: relative;}
.main-prd .prd-wr > ul > li > a > img{display: block;width: 100%;border-radius: 15rem;overflow: hidden;}
.main-prd .prd-wr > ul > li > a > span{display: block;width: 100%;text-align: center;color: #fff;font-size: 18rem;line-height: 1.4;margin-top: 20rem;}
.main-prd .prd-wr .swiper-buttons{display: flex;align-items: center;justify-content: space-between;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 98%;height: 0; z-index: 10;}
.main-prd .prd-wr .swiper-buttons > div{position: static;width: 40rem;height: 40rem;}
.main-prd .prd-wr .swiper-buttons > div svg{fill: var(--color-neutral-1);}
.main-prd .prd-wr .swiper-buttons > div.swiper-button-prev{rotate: 180deg;}
.main-prd .prd-wr .swiper-buttons > div::after { display: none; } 
.main-prd .prd-wr .swiper-pagination{position: static;margin-top: 10rem;}
.main-prd .prd-wr .swiper-pagination > span{margin: 0 3rem;}
.main-prd .prd-wr .swiper-pagination > span.swiper-pagination-bullet-active{width: 12rem;}

@media all and (max-width:1440px) {
    .main-prd > div{grid-template-columns: 33.33% 66.67%;}
    .main-prd .prd-wr .swiper-buttons > div{width: 30rem;height: 30rem;}
}

@media all and (max-width:1300px) {
    .main-prd .main__content-header{margin: 0;}
    .main-prd .prd-wr > ul > li > a > span{font-size: 14rem;}
}

@media all and (max-width:1023px) {
    .main-prd{position: relative;padding-bottom: 165rem;}
    .main-prd > div{display: block;}
    .main-prd .main__content-header{position: static;}
    .main-prd .main__content-header > div{margin-bottom: 40rem;}
    .main-prd .main__content-header > div > div{position: absolute;bottom: 85rem;left: 50%;transform: translateX(-50%);}
}

@media all and (max-width:660px) {
    .main-prd{padding: 75rem 0 140rem;}
    .main-prd > div{padding-inline: 0;}
    .main-prd .main__content-header > div > div{bottom: 65rem;}
    .main-prd .prd-wr .swiper-buttons{display: none;}
    .main-prd .prd-wr > ul{display: flex;gap: 0;}
    .main-prd .prd-wr > ul > li > a > span{font-size: 16rem;margin-top: 15rem;}
}


/* 메인 컨텐츠 - 메인 브랜드 */
.main-brand{padding: 175rem 0;}
.main-brand > div{display: grid;grid-template-columns: 750rem calc(100% - 750rem);}
.main-brand .video{border-radius: 15rem;overflow: hidden;position: relative;padding-bottom: 56.25%;height: 0;}
.main-brand .video img{display: block;width: 100%;height: 100%; object-fit: cover;}
.main-brand .video iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.main-brand .main__content-header{padding-left: 65rem;padding-top: 50rem;margin-bottom: 0;}
.main-brand .main__content-header h3{margin-bottom: 20rem;}

@media all and (max-width:1440px) {
    .main-brand > div{grid-template-columns: 1.2fr 1fr;}   
}

@media all and (max-width:1023px) {
    .main-brand > div{display: block;}
    .main-brand .main__content-header{text-align: center;padding-left: 0;padding-top: 40rem;}
}

@media all and (max-width:660px) {
    .main-brand{padding: 80rem 0;}
}