/* 메인 비주얼 이미지 */
#visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .bg02{ background: url("/img/main/visual03.jpg") no-repeat center right 25% / cover; }
#visual .bg03{ background: url("/img/main/visual02.jpg") no-repeat center right 10% / cover; }


/* common */
.ptH{ padding-top: var(--headerH); }


/* title-box */
.title-box{ text-align: center; margin-bottom: 95px; }
.title-box h3{ font-family: var(--engFont); font-size: 7.2rem; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.title-box p{ font-size: 21px; font-weight: 300; color: #222; letter-spacing: -0.03em; margin-top: 15px; }


/* fp-nav */
#fp-nav{ width: 100%; padding: 0 20px; pointer-events: none; opacity: 1; transition: opacity 0.3s; }
#fp-nav.right{ right: 0; }
#fp-nav ul{ max-width: 1780px; width: 100%; display: flex; flex-direction: column; align-items: flex-end; margin: 0 auto; }
#fp-nav ul li,
.fp-slidesNav ul li{ width: auto !important; height: auto !important; margin: 0; pointer-events: auto; }
#fp-nav ul li:not(:last-of-type),
.fp-slidesNav ul li:not(:last-of-type){ margin-bottom: 20px; }
#fp-nav ul li:last-of-type,
.fp-slidesNav ul li:last-of-type{ display: none; }
#fp-nav ul li a, 
.fp-slidesNav ul li a{ width: 30px !important; height: 30px !important; display: flex; justify-content: center; align-items: center; background: transparent; border-radius: 50%; margin: 0 !important; }
#fp-nav ul li a::before, 
.fp-slidesNav ul li a::before{ content: ""; width: 100%; height: 100%; background: transparent; border-radius: 50%; opacity: 1; transition: background 0.3s, opacity 0.3s; }
#fp-nav ul li a span, 
.fp-slidesNav ul li a span{ width: 6px !important; height: 6px !important; background: #FFF; border-radius: 50%; margin: 0 !important; transform: translate(-50%, -50%); transition: background 0.3s; }

#fp-nav ul li a.active::before, 
.fp-slidesNav ul li a.active::before{ background: rgba(255, 255, 255, 0.2); opacity: 0.4; }

/* fp-nav - scroll */
#fp-nav.scroll ul li a span, 
.fp-slidesNav.scroll ul li a span{ background: #444; }
#fp-nav.scroll ul li a.active::before, 
.fp-slidesNav.scroll ul li a.active::before{ background: rgba(var(--mainRGB), 0.2); opacity: 1; }
#fp-nav.scroll ul li a.active span,
.fp-slidesNav.scroll ul li a.active span{ background: var(--mainColor); }

/* fp-nav - opacity */
#fp-nav.opacity, 
.fp-slidesNav.opacity{ opacity: 0; } 
#fp-nav.opacity ul li, 
.fp-slidesNav.opacity ul li{ pointer-events: none; }

@media screen and (max-height: 800px){
	/* common */
	.ptH{ display: none; }
}

@media screen and (max-width: 1700px){
	/* title-box */
	.title-box{ margin-bottom: 70px; }
	.title-box p{ font-size: 19px; }
}

@media screen and (max-width: 1500px){
	/* fp-nav */
	#fp-nav ul li a, 
	.fp-slidesNav ul li a{ width: 20px !important; height: 20px !important; }
}

@media screen and (max-width: 1280px){
	/* title-box */
	.title-box{ margin-bottom: 40px; }
	.title-box p{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	/* common */
	.ptH{ display: none; }
}

@media screen and (max-width: 900px){
	/* title-box */
	.title-box h3{ font-size: 7.5rem; }
}


/* visual */
#visual{ position: relative; }
#visual .visual{ max-height: 100svh; height: var(--vh); overflow: hidden; }
#visual .bg{ height: 100%; }
#visual .text{ position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; }
#visual .text .slick-track{ display: flex; }
#visual .text .txt{ float: unset; height: auto !important; display: flex; flex-direction: column; justify-content: flex-end; }
#visual .text p{ font-family: var(--engFont); font-size: 23px; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-bottom: 40px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#visual .text h2{ font-size: 6.4rem; font-weight: 600; color: #FFF; letter-spacing: -0.02em; line-height: 1.5; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

#visual .bottom{ margin-top: 85px; position: relative; }
#visual .bottom .scrolldown{ display: flex; align-items: flex-start; }
#visual .bottom .scrolldown .bar{ width: 2px; height: 105px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#visual .bottom .scrolldown .bar div{ height: 0; background: #FFF; animation: scrolldown 2.5s infinite; }
#visual .bottom .scrolldown span{ font-family: var(--engFont); font-family: var(--engFont); font-size: 21px; font-weight: 300; color: #FFF; line-height: 1; margin-left: 23px; transform: translateY(-3px); }

#visual .dots{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: auto; }
#visual .slick-dots{ display: flex; }
#visual .slick-dots li{ cursor: pointer; }
#visual .slick-dots li:not(:last-of-type){ margin-right: 10px; }
#visual .slick-dots li span{ display: inline-block; width: 40px; height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 1px; }
#visual .slick-dots li span::before{ content: ""; display: block; width: 0; height: 100%; background: #FFF; border-radius: inherit; transition: width 0.3s; }
#visual .slick-dots li.slick-active span::before{ width: 100%; }


#visual .prev .bg{ animation: bgScale 3s linear both; }
#visual .slick-active .bg{ animation: bgScale 3s linear both; }

#visual .txt.slick-active p{ animation: textClip 0.5s both; }
#visual .txt.slick-active h2{ animation: textClip 1s 0.3s both; }

@media screen and (max-width: 1700px){
	#visual .text p{ font-size: 20px; margin-bottom: 30px; }

	#visual .bottom .scrolldown .bar{ height: 90px; }
	#visual .bottom .scrolldown span{ font-size: 19px; margin-left: 20px; }
}

@media screen and (max-width: 1280px){
	#visual .text p{ font-size: 18px; margin-bottom: 20px; }

	#visual .bottom{ margin-top: 60px; }
	#visual .bottom .scrolldown .bar{ height: 80px; }
	#visual .bottom .scrolldown span{ font-size: 17px; margin-left: 15px; }

	#visual .slick-dots li span{ width: 30px; }
}

@media screen and (max-width: 900px){
	#visual .text h2{ font-size: 6rem; }

	#visual .bottom .scrolldown span{ font-size: 15px; margin-left: 10px; }
}


/* product */
#product .overflow{ overflow: hidden; padding: 15px 0; }
#product .inner{ position: relative; }
#product a{ display: block; }
#product .slick-slider, 
#product .slick-list{ overflow: visible; }
#product .product-wrap{ padding: 0 15px; }
#product .product a{ display: flex; flex-direction: column; padding: 30px 15px; }
#product .product .box{ flex: 1 0 auto; padding: 25px; box-shadow: 0 0 30px rgba(136, 136, 136, 0.2); border-radius: 20px; transform: translateY(0); transition: transform 0.5s; }
#product .product figure{ display: block; background: #F3F3F3; position: relative; padding-bottom: 79%; border-radius: 20px; overflow: hidden; }
#product .product figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s; }

#product .product dl{ margin-top: 35px; padding: 0 10px; }
#product .product dl dt{ font-size: 18px; font-weight: 500; color: #999; letter-spacing: -0.02em; margin-bottom: 20px; }
#product .product dl dt strong{ display: inline-block; font-family: var(--engFont); font-weight: 600; font-size: 28px; color: #222; margin-right: 12px; }
#product .product dl dd{ font-size: 18px; font-weight: 300; color: #222; letter-spacing: -0.02em; line-height: 1.65; }
#product .product dl dd p{ line-height: inherit; margin-bottom: 30px; }
#product .product ul{ display: flex; flex-wrap: wrap; margin: -5px; }
#product .product ul li{ background: #F5F5F5; border-radius: 5px; font-size: 16px; font-weight: 500; color: #888; letter-spacing: -0.08em; padding: 7px 10px; margin: 5px; transition: color 0.5s; }

#product .slide-info{ display: none; align-items: center; }
#product .slide-info .bar{ flex: 1 0 auto; height: 3px; background: #EEE; border-radius: 99px; }
#product .slide-info .bar > div{ width: 0; height: 100%; border-radius: 99px; background: var(--mainColor); }
#product .slide-info .btns{ display: flex; align-items: center; padding-left: 15px; }
#product .slide-info .btns button{ background: none; border: none; padding: 10px; }
#product .slide-info .btns svg{ width: auto; height: 20px; }

@media screen and (hover: hover){
	#product .product .box:hover{ transform: translateY(-15px); }
	#product .product .box:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
	#product .product .box:hover ul li{ color: var(--mainColor); }
}

@media screen and (max-height: 800px){
	#product{ padding: 100px 0; }
}

@media screen and (max-width: 1700px){
	#product .product .box{ padding: 20px; }
	#product .product dl{ margin-top: 25px; padding: 0 5px; }
	#product .product dl dt strong{ display: block; font-size: 26px; margin-right: 0; margin-bottom: 5px; }
	#product .product dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1450px){
	#product .overflow{ position: relative; }
	#product .product dl{ margin-top: 15px; }
}

@media screen and (max-width: 1300px){
	#product .product dl dt{ font-size: 17px; margin-bottom: 10px; }
	#product .product dl dt strong{ font-size: 24px; margin-right: 10px; }
	#product .product dl dd{ font-size: 16px; }
	#product .product dl dd p{ margin-bottom: 25px; }
	#product .product ul li{ font-size: 15px; padding: 5px 10px; }
}

@media screen and (max-width: 1200px){
	#product{ padding: 50px 0; }
	#product .product-wrap{ padding: 0; }
	#product .product-wrap .slick-list{ margin-left: -15px; }
	#product .product{ max-width: 400px; width: 100%; }
	#product .product .box{ transform: translateY(0) !important; }
	#product .product.slick-active figure img, 
	#product .product.slick-now figure img{ transform: translate(-50%, -50%) scale(1.1); }
	#product .product.slick-active ul li, 
	#product .product.slick-now ul li{ color: var(--mainColor); }
	#product .product br{ display: none; }

	#product .slide-info{ display: flex; }
}


/* process */
#process .inner{ position: relative; }
#process .flex-box{ display: flex; }
#process .flex-box > div{ width: 50%; }

#process .text-box{ display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 85px; }
#process .text-box > div{ max-width: 700px; width: 100%; }
#process .text-box span, 
#process .text-box em{ display: block; font-family: var(--engFont); }
#process .text-box span{ font-size: 8rem; font-weight: 700; color: #E8E8E8; letter-spacing: -0.02em; }
#process .text-box em{ font-size: 19px; font-weight: 700; color: var(--mainColor); margin-top: 35px; }
#process .text-box dl dt{ font-family: var(--engFont); font-size: 7rem; font-weight: 700; color: #111; letter-spacing: -0.02em; margin: 5px 0 25px; }
#process .text-box dl dd{ font-size: 19px; font-weight: 300; color: #666; letter-spacing: -0.02em; line-height: 1.7; }

#process .img-box{ position: relative; }
#process .img-box::after{ content: ""; width: 100%; height: 100%; background: #FFF; transform: scaleX(1); transform-origin: left; transition: transform var(--aosT); position: absolute; top: 0; left: 0; }
#process .img-box .img{ z-index: 997 !important; opacity: 1 !important; }
#process .img-box .img figure{ width: 100%; max-height: 100svh; height: var(--resizeVH); overflow: hidden; }
#process .img-box .img figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); transition: transform var(--aosT) 0.3s; }

#process .img-box.aos-animate::after{ transform: scaleX(0); }
#process .img-box .img.prev{ z-index: 998 !important; }
#process .img-box .img.slick-active{ z-index: 999 !important; animation-name: bgClip; animation-fill-mode: both; }
#process .img-box .img.slick-active .bg, 
#process .img-box .img.slick-now .bg{ transform: scale(1); transition: var(--active); }
#process .img-box .img.prev figure img, 
#process .img-box .img.slick-active figure img, 
#process .img-box .img.slick-now figure img{ transform: translate(-50%, -50%) scale(1); }

#process .info{ display: flex; align-items: center; margin-top: 105px; }
#process .info button{ background: none; border: none; padding: 0; }
#process .info button svg{ width: auto; height: auto; }
#process .info button svg path{ transition: stroke 0.3s; }
#process .info ul{ width: 165px; display: flex; justify-content: center; }
#process .info ul li{ font-family: var(--engFont); font-size: 19px; font-weight: 600; color: #BBB; letter-spacing: -0.02em; padding: 0 10px; position: relative; }
#process .info ul li.idx{ color: var(--mainColor); }
#process .info ul li::after{ content: ""; width: 3px; height: 3px; background: #CCC; border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#process .info ul li:last-of-type::after{ display: none; }

#process .dots{ width: 100% !important; background: rgba(0, 0, 0, 0.6); position: absolute; bottom: 0; left: 0; z-index: 1000; }
#process .dots ul{ display: flex; }
#process .dots ul li{ position: relative; }
#process .dots ul li::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor); transform: scaleX(0); transform-origin: left; position: absolute; top: 0; left: 0; }
#process .dots ul li::after{ content: ""; width: 14px; height: 14px; background: url("/img/main/process_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#process .dots ul li:first-of-type::after{ display: none; }
#process .dots .bar div{ width: 0%; height: 90px; background: var(--mainColor); }
#process .dots .tit{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; padding: 0 20px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#process .dots .tit span{ display: inline-block; padding-left: 15px; }

#process .dots ul li.prev::before{ transform: scaleX(1); transition: transform var(--duration); }
#process .dots ul li.active .bar div{ animation-name: barWidth; animation-timing-function: linear; animation-fill-mode: both; }

@media screen and (hover: hover){
	#process .info button:hover svg path{ stroke: var(--mainColor); }
}

@media screen and (max-width: 1700px){
	#process .text-box{ padding: 0 70px; }
	#process .text-box em{ font-size: 18px; } 
	#process .text-box dl dd{ font-size: 18px; }

	#process .info{ margin-top: 80px; }
	#process .info button svg{ height: 22px; }
	#process .info ul{ width: 140px; }
	#process .info ul li{ font-size: 18px; }

	#process .dots .bar div{ height: 75px; }
	#process .dots .tit{ font-size: 18px; }
}

@media screen and (max-width: 1500px){
	#process dl br{ display: none; }
}

@media screen and (max-width: 1280px){
	#process .text-box{ padding: 0 40px; }
	#process .text-box em{ font-size: 17px; margin-top: 10px; } 
	#process .text-box dl dt{ margin: 5px 0 20px; }
	#process .text-box dl dd{ font-size: 17px; }

	#process .info{ margin-top: 50px; }
	#process .info button svg{ height: 20px; }
	#process .info ul{ width: 140px; }
	#process .info ul li{ font-size: 17px; }

	#process .dots .bar div{ height: 60px; }
	#process .dots .tit{ font-size: 16px; }
}

@media screen and (max-width: 1200px){
	#process .flex-box{ flex-direction: column; }
	#process .flex-box > div{ width: 100%; }

	#process .text-box{ padding: 0 20px 30px; }
	#process .text-box > div{ max-width: 100%; }

	#process .img-box .img figure{ height: auto; padding-bottom: 92%; position: relative; }

	#process .info ul{ width: 120px; }
}

@media screen and (max-width: 1000px){
	#process .dots{ overflow: hidden; }
	#process .dots ul{ flex-wrap: wrap; }
	#process .dots ul li{ flex: 1 0 auto; width: calc(100% / 3) !important; }
	#process .dots ul li::after{ width: 12px; height: 12px; }
	#process .dots ul li:nth-of-type(3n) + li::after{ display: none; }
	
	#process .dots .bar::before{ content: ""; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.2); position: absolute; top: -2px; left: 0; z-index: 100; }
	#process .dots .bar div{ height: 60px; }

	#process .dots .tit{ padding: 0 10px; }
	#process .dots .tit img{ height: 20px; }
	#process .dots .tit span{ padding-left: 7px; }

	#process .info ul{ font-size: 15px; }
}

@media screen and (max-width: 900px){
	#process .text-box span{ font-size: 7rem; }

	#process .info{ margin-top: 30px; }
}


/* partner */
#partner{ position: relative; }
#partner::before{ content: ""; width: 100%; height: calc(100% + 30px); background: url("/img/main/partner_bg.jpg") no-repeat center center / cover; position: absolute; top: 0; left: 0; z-index: -1; }
#partner .title-box{ position: relative; z-index: 10; margin-bottom: 60px; }

#partner .content{ position: relative; z-index: 5; }
#partner .txt{ width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; transform: translateY(-50%); z-index: -1; }
#partner .txt .flex{ max-width: max-content; display: flex; }
#partner .txt h6{ font-family: var(--engFont); font-size: 13rem; font-weight: 700; color: rgba(255, 255, 255, 0.4); white-space: nowrap; padding-right: 20px; }
#partner .txt h6.origin{ animation: 40s linear 0s infinite normal forwards running origin_left; }
#partner .txt h6.clone{ animation: 40s linear 0s infinite normal none running clone_left; }

#partner ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
#partner ul li{ width: calc((100% - 150px) / 6); }
#partner ul li figure{ width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; padding: 10px; text-align: center;}
#partner ul li figure img{ max-height: 100%; }

@media screen and (max-height: 800px){
	#partner{ padding: 100px 0; }
}

@media screen and (max-width: 1700px){
	#partner .title-box{ margin-bottom: 40px; }

	#partner ul{ gap: 50px 25px; }
	#partner ul li{ width: calc((100% - 125px) / 6); }
	#partner ul li figure{ height: 90px; }
}

@media screen and (max-width: 1280px){
	#partner .title-box{ margin-bottom: 20px; }
	#partner ul{ gap: 30px 20px; }
	#partner ul li{ width: calc((100% - 100px) / 6); }
	#partner ul li figure{ height: 80px; }
}

@media screen and (max-width: 1200px){
	#partner{ padding: 60px 0 100px; }
	#partner ul li{ width: calc((100% - 80px) / 5); }
}

@media screen and (max-width: 1000px){
	#partner ul{ gap: 7px 20px; }
	#partner ul li{ width: calc((100% - 60px) / 4); margin: 0 !important; }
	#partner ul li figure{ padding: 7px; }
}

@media screen and (max-width: 1000px){
	#partner ul li{ width: calc((100% - 40px) / 3); }
}

@media screen and (max-width: 650px){
	#partner ul li{ width: calc((100% - 20px) / 2); }
}