@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2025-11-16
******************************************************** */

/* ****************** loading ********************** */
@media all and (min-width:1179px){
	.main-wrap #header{transform:translateY(calc(-1 * (var(--header-height) + var(--header-top)))); transition:var(--transition-custom2);}
	.main-scroll-icon{opacity: 0; transform:translate(-100px,-50%); transition:var(--transition-custom2);}
	.main-visual-contact-btn{opacity: 0; transform:translateX(100%); transition:var(--transition-custom2);}
	
	.main-wrap.index-active #header{transform:translateY(0);}
	.main-wrap.index-active #header.top-fixed.scroll-down{transform:translateY(-100%);}
	.main-wrap.index-active .main-scroll-icon{opacity: 1; transform:translate(0,-50%);}
	.main-wrap.index-active .main-visual-contact-btn{opacity: 1; transform:translateX(0);}
}
@media all and (max-width:1179px){
	.main-wrap .nav-open-btn,
	.main-wrap #headerInnerWrap{transform:translateY(calc(-1 * (var(--header-height) + var(--header-top)))); transition:var(--transition-custom2);}
	.main-scroll-icon{opacity: 0; transform:translate(-100px,-50%); transition:var(--transition-custom2);}
	.main-visual-contact-btn{opacity: 0; transform:translateX(100%); transition:var(--transition-custom2);}
	
	.main-wrap.index-active .nav-open-btn,
	.main-wrap.index-active #headerInnerWrap{transform:translateY(0);}
	.main-wrap.index-active .main-scroll-icon{opacity: 1; transform:translateX(0);}
	.main-wrap.index-active .main-visual-contact-btn{opacity: 1; transform:translateX(0);}
}
.ms-preloader {width: 100%; height: 100%;position: fixed;z-index: 9999999; top: 0;left: 0; opacity: 1; visibility: visible; background-color: #000;}


/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:0; padding-top: 55.72%; position:relative; background-color:#000; overflow:hidden;}
.main-visual-line{position: absolute; height: 0; width: 1px; background-color: rgba(255,255,255,0.07); display: block; z-index: 2; transition: height 2.4s ease-in-out;}
.main-visual-line01{top: 0; left: 25%;}
.main-visual-line02{bottom: 0; left: 50%;}
.main-visual-line03{top: 0; left: 75%;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con.slick-slide[aria-hidden="true"] * {
  pointer-events: none;
}
.main-visual-con{position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; z-index:1;}
.main-visual-item{position:relative;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1);
	opacity:1;filter:Alpha(opacity=100);
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 동영상(유툽) */
.main-visual-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.main-visual-item .background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 동영상(다이렉트영상) */
.main-visual-item .background-video video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* 메인 비주얼 :: 각 제품 이미지 */
.main-visual-prd-img{position:absolute; left:50%; top:50%; max-width: 161px; aspect-ratio: 1 / 1; width: min(8.38%, 161px); height: auto; display: block; z-index: 2; opacity: 0; transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 320ms ease-out; will-change: transform, opacity;}
/*01*/
.main-visual01-prd-img01{margin-top: -18.35%; margin-left: -31.66%; transform: translate(20%,25%) scale(0.72);}
.main-visual01-prd-img02{margin-top: -5.21%; margin-left: -20.05%; transform: translate(-15%,25%) scale(0.72);}
.main-visual01-prd-img03{margin-top: -7.77%; margin-left: -0.78%; transform: translate(5%,25%) scale(0.72);}
.main-visual01-prd-img04{margin-top: -16.21%; margin-left: 27.29%; transform: translate(-15%,-25%) scale(0.72);}
/*02*/
.main-visual02-prd-img01{margin-top: -20.78%; margin-left: -33.54%; transform: translate(-15%,-25%) scale(0.72);}
.main-visual02-prd-img02{margin-top: -4.73%; margin-left: -32.13%; transform: translate(-15%,25%) scale(0.72);}
.main-visual02-prd-img03{margin-top: -17%; margin-left: 18.43%; transform: translate(20%,-25%) scale(0.72);}
/*03*/
.main-visual03-prd-img01{margin-top: -8.73%; margin-left: -0.78%; transform: translate(20%,-25%) scale(0.72);}
/*04*/
.main-visual04-prd-img01{margin-top: -6.14%; margin-left: -32.08%; transform: translate(-15%,25%) scale(0.72);}
.main-visual04-prd-img02{margin-top: -9.2%; margin-left: -16.14%; transform: translate(0,25%) scale(0.72);}
.main-visual04-prd-img03{margin-top: -8.1%; margin-left: 1.56%; transform: translate(0,25%) scale(0.72);}
.main-visual04-prd-img04{margin-top: -17.37%; margin-left: 18.33%;  transform: translate(-15%,25%) scale(0.72);}
.main-visual04-prd-img05{margin-top: -2.63%; margin-left: 23.43%; transform: translate(-15%,25%) scale(0.72);}
.main-visual-prd-img .img{position: relative; width: 100%; height: 0; padding-top: calc(100% - 1rem); border-radius: 50%; display: block; background-color: #e6e6e6; border: 0.5rem solid #e6e6e6; box-shadow: 1.1rem 1.1rem 9.5rem -0.5rem rgba(0,0,0,0.21); box-sizing: border-box; overflow: hidden;}
.main-visual-prd-img .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.main-visual-prd-img > .cir{position:absolute; inset:0; border-radius:50%; margin:0; border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 0 0.9rem rgba(255,255,255,0.15); opacity:0; z-index: 1; pointer-events:none; animation: visual-ripple 2.4s ease-out infinite; will-change: transform, opacity;}
.main-visual-prd-img > .cir:nth-child(2){ animation-delay: 0.0s; }
.main-visual-prd-img > .cir:nth-child(3){ animation-delay: 0.7s; }
.main-visual-prd-img > .cir:nth-child(4){ animation-delay: 1.4s; }
.main-visual-prd-img > .cir:nth-child(5){ animation-delay: 2.1s; }
.main-visual-prd-img > .cir:nth-child(6){ animation-delay: 2.8s; }

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .main-visual-prd-img > .cir{ animation: none; opacity: 0.25; transform: scale(1.25); }
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; height:100%; display: block;
	z-index:2;
}
.main-visual-txt-con.blank{}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end;
	padding-bottom: 22.5rem !important;
	height:100%;
	box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; transform: translateY(100%); transition: var(--transition-custom2);
}
.main-visual-txt-box .main-visual-txt1{margin-top: 1.5rem; font-size:7.2rem; line-height: 1; letter-spacing: -0.01em; font-weight:800; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 1rem; font-size:1.6rem; line-height: 1.3; font-weight: 500; color:rgba(255,255,255,0.49);}

/* 메인 비주얼 :: custom-box */
.main-visual-custom-box{position: absolute; left:0; bottom: 13.5rem; width:100%; z-index:9;}

/* dot 내용 */
.main-visual-dots .mv-dots{display:flex;align-items:flex-start;justify-content:space-between;margin:0;padding:0;list-style:none;}
.main-visual-dots .mv-dot-item{flex:1;margin:0;padding:0;position:relative;}
.main-visual-dots .mv-dot-item:after{position:absolute;top:4px;left:0;width:11px;height:11px;border:2px solid #aeaeae;background:#000;box-sizing:border-box;border-radius:11px;content:'';cursor:pointer; transition:var(--transition-custom); transition-property: border-color, background-color;}
.main-visual-dots .mv-dot-btn{width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;}
.main-visual-dots .mv-dot{display:flex;flex-direction:column;gap:2.5rem;}
.main-visual-dots .mv-dot-bar{position:relative;width:100%;height:2px;background:rgba(255,255,255,0.25);overflow:hidden;}
.main-visual-dots .mv-dot-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:rgba(255,255,255,0.9);transition:width .15s linear;}
.main-visual-dots .mv-dot-title{font-size:1.65rem;line-height:1.2;font-weight:500;color:rgba(255,255,255,0.4);white-space:nowrap; transition:var(--transition-custom); transition-property: color;}
.main-visual-dots .mv-dot-item.is-active:after{border-color:#fff;background:#fff;}
.main-visual-dots .mv-dot-item.is-active .mv-dot-title{color:rgba(255,255,255,1);}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; z-index:9; bottom: 55%; left:50%; margin-left: -847px;}
.main-scroll-icon i{font-size: 20.5px; display: block; color: #fff; text-align: center; opacity: 0.2;}
.main-scroll-icon i.down-02,
.main-scroll-icon i.down-03,
.main-scroll-icon i.down-04{margin-top: -13px;}
.main-scroll-icon i.down-01{animation: ani_arrowfade 1.6s ease infinite;}
.main-scroll-icon i.down-02{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.2s;}
.main-scroll-icon i.down-03{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.3s;}
.main-scroll-icon i.down-04{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.4s;}

/* 메인 비주얼 :: 문의하기 버튼 */
.main-visual-contact-btn{position: absolute; left: 50%; margin-left: 710px; bottom: 26rem; width: 13.8rem; z-index: 2;}
.main-visual-contact-btn a{padding: 0 2rem 0 1.5rem; width: 100%; height: 4.5rem; font-size: 1.35rem; font-weight: 500; color: #fff; border: 2px solid #ddd; border-radius: 4.5rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; transition:var(--transition-custom); transition-property: border-color, background-color, color;}
.main-visual-contact-btn a i{font-size: 2.1rem;}
.main-visual-contact-btn a:hover{border-color: #000; background-color: #000; color: #fff;}


/* 메인 비주얼 :: active효과 */
.active-item .main-visual-txt1{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt-box .main-visual-txt2{
	opacity:1.0;
	transform:translateY(0);
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt-box .main-visual-txt2{transition-delay:0.6s;}
.mainbotton-effectvisual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

.active-item .main-visual-prd-img{opacity: 1; transform: translate(0) scale(1);}
.active-item .main-visual-prd-img.delay01{transition-delay:0.2s;}
.active-item .main-visual-prd-img.delay02{transition-delay:0.5s;}
.active-item .main-visual-prd-img.delay03{transition-delay:0.8s;}
.active-item .main-visual-prd-img.delay04{transition-delay:1.1s;}
.active-item .main-visual-prd-img.delay05{transition-delay:1.5s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}
@keyframes ani_arrowfade {
	10% {opacity: 0.2;}
	20% {opacity: 0.5;}
	30% {opacity: 1;}
}
@keyframes visual-ripple{
  0%{
    transform: scale(1.00);
    opacity: 0.0;
  }
  10%{
    opacity: 0.75;
  }
  60%{
    opacity: 0.35;
  }
  100%{
    transform: scale(1.4);
    opacity: 0.0;
  }
}

/* 메인 비주얼 :: load */
.visual-start .main-visual-line{height: 100%;}


/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1279px ){
	.main-visual-txt-box{padding-bottom: 18rem !important;}
	.main-visual-txt-box .main-visual-txt1{margin-top: 1.5rem; font-size:5rem;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 2rem; font-size:1.45rem;}
	/* 메인 비주얼 :: custom-box */
	.main-visual-custom-box{bottom: 9.5rem;}
	/* 메인 인트로 :: 스크롤아이콘 */
	.main-visual-contact-btn{bottom: 18rem;}
}
@media all and ( max-width: 800px ){
	
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box .cm-word-split-JS.splitting{margin-block-end: 0; margin-block-start: 0;}
.main-tit-box .cm-word-split-JS.splitting .word {line-height: 1;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* 메인 등장 효과 */
.main-effect-box{overflow:hidden;}
.main-effect-box .effect-item{display: block; transform:translateY(100%); opacity:0; transition:all 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
.main-effect-box .effect-item.delay01{transition-delay:0.1s;}
.main-effect-box .effect-item.delay02{transition-delay:0.2s;}
.main-effect-box .effect-item.delay03{transition-delay:0.3s;}
.main-effect-box .effect-item.delay04{transition-delay:0.4s;}
.main-effect-box .effect-item.delay05{transition-delay:0.5s;}
.main-effect-box .effect-item.delay06{transition-delay:0.6s;}
.main-effect-box .effect-item.delay07{transition-delay:0.7s;}
.main-effect-box .effect-item.delay10{transition-delay:1s;}
.main-effect-box .effect-item.delay15{transition-delay:1.5s;}

/* .active:not(#mainVisual) .main-effect-box .effect-item, */
.active-section .main-effect-box .effect-item,
.animated .main-effect-box .effect-item{
	opacity:1.0;
	transform:translateY(0);
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
#mainProductCon{padding: 27rem 0 40rem; padding-bottom: 27rem; position: relative; overflow: hidden;}
#mainProductCon .flow-wrap{position: absolute; top:73%; left:0; transform:translate(0,-50%); width:100%; display: flex; align-items:center; pointer-events:none; overflow:hidden;}
#mainProductCon .flow-wrap .flow-list{
  display:flex;
  align-items:center;
  width:max-content;
  will-change: transform;
  animation: partner-flow-left 45s linear infinite;
}
#mainProductCon .flow-wrap .flow-list .flow-item{font-size:31rem; line-height:1; letter-spacing:0; font-weight:900; color: rgba(0,0,0,0.04); white-space: nowrap; padding-right: 2rem;}

/* 오→왼 */
@keyframes partner-flow-left{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* 왼→오 */
@keyframes partner-flow-right{
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(0,0,0); }
}

#mainProductCon .area{position: relative; z-index: 1;}
#mainProductCon .main-tit-box{padding-left: 26.5rem; width: 48rem;}
#mainProductCon .main-tit-box .main-tit{font-size:9.8rem; line-height: 0.5; letter-spacing: -0.05em; font-weight:800; color:#000;}
#mainProductCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:2.4rem; line-height: 1.33; font-weight:600; color: #000;}

.main-product-img-list{}
.main-product-img-item{position: absolute; top: 1.2rem; width: 41.1rem; opacity: 0; will-change: transform, opacity;}
.main-product-img-item01{left: -26.5rem;}
.main-product-img-item02{left: 86.5rem;}
.main-product-img-item03{left: 133rem;}
.main-product-img-item img{width: 100%;}

.flow-clone-JS.flow-prep .flow-list { opacity: 0; }
.flow-clone-JS.flow-ready .flow-list { opacity: 1; }
.flow-list{
  display: flex;
  width: max-content; 
  will-change: transform;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flow-list > *{ flex: 0 0 auto; }
.flow-list img{ display:block; }

@media all and (min-width:801px){
	/* 섹션이 inview 되면 등장 */
	#mainProductCon.is-inview .main-product-img-item{
	  opacity: 1;
	  transform: translate3d(0, 0, 0) scale(1);
	  transition:
		transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 420ms ease-out;
	}

	/* 딜레이 */
	#mainProductCon.is-inview .main-product-img-item01{ transition-delay: 0.05s; }
	#mainProductCon.is-inview .main-product-img-item02{ transition-delay: 0.18s; }
	#mainProductCon.is-inview .main-product-img-item03{ transition-delay: 0.32s; }
}

@media (prefers-reduced-motion: reduce){
  .main-product-img-item{ transition: none !important; }
}

@media all and (max-width:1179px){
	#mainProductCon{padding: 21rem 0 32rem; padding-bottom: 21rem;}
	#mainProductCon .flow-wrap{top:68%;}
	#mainProductCon .flow-wrap .flow-list .flow-item{font-size:21rem;}
}
@media all and (max-width:800px){
	#mainProductCon{padding: 10rem 0;}
	#mainProductCon .flow-wrap{top: auto; bottom: -15rem;}
	#mainProductCon .flow-wrap .flow-list .flow-item{font-size:22rem; line-height:1; padding-right: 2rem;}

	#mainProductCon .main-tit-box{padding-left: 0; width: 100%;}
	#mainProductCon .main-tit-box .main-tit{font-size:7.8rem; line-height: 0.5;}
	#mainProductCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:2rem; line-height: 1.33;}

	.main-product-img-list{margin: 5rem 0 0; /* max-width: 411px; */ display: flex; align-items: center;  gap: 1rem;}
	.main-product-img-item{position: static; top: 1.2rem; width: 100%;}
	/* .main-product-img-item01{}
	.main-product-img-item02,
	.main-product-img-item03{margin-top: 2rem;} */
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Product List) -------- */
#mainProductListCon{position: relative; height: 100vh; overflow: hidden;}
.main-productList-cover{position: absolute; inset: 0; z-index: 30; background: transparent; opacity: 1; visibility: visible; pointer-events: none; transition: opacity 0.45s ease, visibility 0.45s ease;}
#mainProductListCon.is-pinned .main-productList-cover{opacity: 0 !important; visibility: hidden !important;}

.main-productList-container{width: 100%; height: 100vh; overflow: hidden;}
.main-productList-list{width: 100%; height: 100%;}
.main-productList-item{position: relative; width: 100%; height: 100%; display: flex; align-items: center;}
.main-productList-inner{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.main-productList-txt-img-box{width: 100%; display: flex; flex-wrap: wrap;}
.main-productList-txt{padding: 10.5rem 5.725% 8.5rem 11.45%; width: 46.46%; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; position: relative;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8f8f8+0,ffffff+54,ecebe9+99 */
background: linear-gradient(135deg,  rgba(248,248,248,1) 0%,rgba(255,255,255,1) 54%,rgba(236,235,233,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-productList-txt-top{font-size: 6.7rem; line-height: 1; letter-spacing: -0.025em; font-weight: 800; color: #000;}
.main-productList-txt-bottom{margin-top: 5rem;}
.main-productList-txt-bottom h5{font-size: 3.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #000;}
.main-productList-txt-bottom p{margin-top: 2.5rem; font-size: 1.7rem; line-height: 1.6; letter-spacing: -0.052em; font-weight: 600; color: #464646;}
.main-productList-txt-bottom a{margin-top: 4.5rem; padding: 0 2rem 0 1.5rem; width: 16.3rem; height: 4.8rem; font-size: 1.35rem; letter-spacing: -0.01em; font-weight: 600; color: #000; background-color: #fff; border: 2px solid #ddd; border-radius: 4.8rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; box-shadow: 0.5rem 0.5rem 0.8rem -0.2rem rgba(103,103,103,0.08); transition:var(--transition-custom);}
.main-productList-txt-bottom a .txt{font-weight: inherit; color: inherit; position: relative; z-index: 1;}
.main-productList-txt-bottom a i{font-size: 2rem; position: relative; z-index: 1;}
.main-productList-img{width: 53.54%; display: flex; flex-wrap:wrap;}
.main-productList-img .bg-img{width: 6rem; height: 100%;}
.main-productList-img .img{width: calc(100% - 6rem); height: 100%; position: relative;}
.main-productList-img .img img{width: 100%; height: 100%; object-fit: cover;}
.main-productList-img .img p{position: absolute; left: 8.79%; bottom: 9.76%; font-size: 1.5rem; letter-spacing: -0.01em; color: rgba(255,255,255,0.5);}
.main-productList-img .img p b{margin-right: 2rem; font-size: 1.55rem; font-weight: 700; letter-spacing: 0; color: #fff;}
.main-productList-txt-scroll{position: absolute; bottom: 10.38%; right: 3.64%;}
.main-productList-txt-scroll i{font-size: 20.5px; display: block; color: #000; text-align: center; opacity: 0.2;}
.main-productList-txt-scroll i.down-02,
.main-productList-txt-scroll i.down-03,
.main-productList-txt-scroll i.down-04,
.main-productList-txt-scroll i.down-05{margin-top: -14px;}
.main-productList-txt-scroll i.down-01{animation: ani_arrowfade 1.6s ease infinite;}
.main-productList-txt-scroll i.down-02{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.2s;}
.main-productList-txt-scroll i.down-03{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.3s;}
.main-productList-txt-scroll i.down-04{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.4s;}
.main-productList-txt-scroll i.down-05{animation: ani_arrowfade 1.6s ease infinite; animation-delay:0.5s;}

.main-productList-txt-bottom a:hover{border-color: #000; color: #fff;}

/* 추가css */
.main-productList-container {
  overscroll-behavior: contain;
}
.main-productList-container,
.main-productList-list,
.main-productList-item{
	height: 100%;
}
.main-productList-item .main-productList-txt,
.main-productList-item .main-productList-img{
	opacity: 0;
	transition: none;
	will-change: transform, opacity;
}

.main-productList-item .main-productList-txt{
	transform: translate3d(0, -60px, 0);
}

.main-productList-item .main-productList-img{
	transform: translate3d(0, 60px, 0);
}

@media all and (max-width:1179px){
	.main-productList-txt{padding: 7.5rem 5.725% 6rem;}
	.main-productList-txt-top{font-size: 5.7rem;}
	.main-productList-txt-bottom{margin-top: 5rem;}
	.main-productList-txt-bottom h5{font-size: 3rem;}
}
@media all and (max-width:800px){
	#mainProductListCon{height: auto !important; overflow: visible;}
	#mainProductListCon .main-productList-cover{display: none !important;}
	.main-productList-container{overflow: visible !important;}
	.main-productList-list{transform: none !important; flex-wrap: wrap;}
	.main-productList-item{width: 100%; height: auto; position: relative !important; opacity: 1 !important;}
	.main-productList-inner{width: 100%;}
	.main-productList-txt{padding: 8rem var(--area-padding) 6rem; width: 100%;}
	.main-productList-txt-top{font-size: 4.6rem; line-height: 1;}
	.main-productList-txt-bottom{}
	.main-productList-txt-bottom h5{font-size: 3rem; line-height: 1.3;}
	.main-productList-txt-bottom p{margin-top: 2.5rem; font-size: 1.7rem; line-height: 1.6;}
	.main-productList-txt-bottom a{margin-top: 4.5rem; padding: 0 2rem 0 1.5rem; width: 16.3rem; height: 4.8rem; font-size: 1.35rem;}
	.main-productList-txt-bottom a i{font-size: 2rem;}
	.main-productList-img{padding-top: 6rem; width: 100%; position: relative;}
	.main-productList-img .bg-img{position: absolute; top: 0; left: 0; width: 100%; height: 6rem;}
	.main-productList-item:nth-child(1) .main-productList-img .bg-img{background: url('../images/main/main_productList_bg01_m.jpg') center/cover no-repeat !important;}
	.main-productList-item:nth-child(2) .main-productList-img .bg-img{background: url('../images/main/main_productList_bg02_m.jpg') center/cover no-repeat !important;}
	.main-productList-item:nth-child(3) .main-productList-img .bg-img{background: url('../images/main/main_productList_bg03_m.jpg') center/cover no-repeat !important;}
	.main-productList-item:nth-child(4) .main-productList-img .bg-img{background: url('../images/main/main_productList_bg04_m.jpg') center/cover no-repeat !important;}
	.main-productList-img .img{width: 100%;}
	.main-productList-img .img p{left: var(--area-padding); bottom: 9.76%; font-size: 1.5rem;}
	.main-productList-img .img p b{margin-right: 2rem; font-size: 1.55rem;}
	.main-productList-txt-scroll{bottom: 10.38%; right: 3.64%;}
	.main-productList-txt-scroll i{font-size: 20.5px;}
	
	.main-productList-container,
	.main-productList-list,
	.main-productList-item,
	.main-productList-inner,
	.main-productList-txt,
	.main-productList-img{
		height: auto !important;
		min-height: 0 !important;
	}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(PR) -------- */
#mainPrCon{position: relative; height: 75rem; display: flex; align-items: center; justify-content: center;}
#mainPrCon:before{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background-color: #f1f1f1; content: '';}
#mainPrCon .area{width: 100%; position: relative; box-sizing: border-box;}
#mainPrCon .main-tit-box{width: 32.5rem; padding-bottom: 17rem;}
#mainPrCon .main-tit-box .main-tit{font-size:9.8rem; line-height: 0.5; letter-spacing: -0.05em; font-weight:800; color:#000;}
#mainPrCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:2.4rem; line-height: 1.33; font-weight:600; color: #000;}
#mainPrCon .main-tit-box .cm-word-split-JS.splitting .word{overflow: visible; line-height: 1.1;}
.main-pr-controls {margin-top: 3rem; display:flex; align-items:center;}
.main-pr-controls .arrow-prev,
.main-pr-controls .arrow-next{width: 7.5rem; height: 7.5rem; font-size: 1.8rem; color: #000; background-color: #fff; border: 2px solid #ededed; border-radius: 100%; box-sizing: border-box; transition:var(--transition-custom); transition-property:background-color, border-color, color;}
.main-pr-controls .arrow-next{margin-left: 1.5rem;}
.main-pr-controls .arrow-prev i,
.main-pr-controls .arrow-next i{transition:var(--transition-custom); transition-property: transform;}
.main-pr-controls .arrow-prev{}
.main-pr-controls .arrow-prev i{transform: rotate(180deg);}
.main-pr-controls .arrow-next:hover,
.main-pr-controls .arrow-prev:hover{background-color: #000; border-color: #000; color: #fff;}
.main-pr-controls .arrow-prev:hover i{transform: translateX(-5px) rotate(180deg);}
.main-pr-controls .arrow-next:hover i{transform: translateX(5px);}

.main-pr-con{position: absolute; top: 50%; left: 50%; margin-left: calc(-1 * (var(--area-width)/2) + 32.5rem); transform: translateY(-50%); width: calc(50% + 32.5rem + 10rem); z-index: 1;}
.main-pr-container{padding: 6rem 0 !important;}
.main-pr-list{display: flex;}
.main-pr-item{width: 50%; height: -webkit-fill-available !important; background-color: #fff; border-radius: 1.5rem;}
.main-pr-item a{padding: 3.5rem 6rem 4rem; display: block; width: 100%; height: 100%; border-radius: 1rem; border: 1px solid #ededed; overflow: hidden; box-sizing: border-box; transition:var(--transition-custom); transition-property:border-color, box-shadow;}
.main-pr-item .category{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.045em; font-weight: 700; color: #000; display: flex; align-items: center;}
.main-pr-item .category span + span{margin-left: 1.6rem; position: relative;}
.main-pr-item .category span + span:before{position: absolute; top: 0; left: -1rem; color: #bfbfbf; content: '/';}
.main-pr-item .tit{height: 2.76em; margin-top: 4rem; font-size: 2.6rem; line-height: 1.38; letter-spacing: -0.055em; font-weight: 700; color: #000; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-pr-item .txt{height: 4.86em; margin-top: 2.5rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.055em; font-weight: 500; color: #737373; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.main-pr-item .date{margin-top: 7rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.045em; font-weight: 500; color: #000; display: block;}

.main-pr-item.swiper-slide-active,
.main-pr-item.swiper-slide-active + .main-pr-item,
.main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item,
.main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item + .main-pr-item{opacity: 0; transform: translateY(5rem); position: relative;  transition-property: transform, opacity; transition:var(--transition-custom2);}
/* 효과 */
.animated .main-pr-item.swiper-slide-active,
.animated .main-pr-item.swiper-slide-active + .main-pr-item,
.animated .main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item,
.animated .main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item + .main-pr-item{opacity: 1; transform: translateY(0)}
.animated .main-pr-item.swiper-slide-active{transition-delay:0.3s;}
.animated .main-pr-item.swiper-slide-active + .main-pr-item{transition-delay:0.45s;}
.animated .main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item{transition-delay:0.6s;}
.animated .main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item + .main-pr-item{transition-delay:0.75s;}

@media all and ( min-width: 801px ){
	/* .swiper-slide-active.main-pr-item a{border-color: #545454; box-shadow: 2.9rem 2.9rem 3.5rem -1.5rem rgba(81,81,81,0.15);} */
	.main-pr-item a:hover{border-color: #545454; box-shadow: 2.9rem 2.9rem 3.5rem -1.5rem rgba(81,81,81,0.15);}
}

@media all and (max-width:1545px){
	.main-pr-con{margin-left: 0; left: calc(var(--area-padding) + 32.5rem);}
}
@media all and (max-width:800px){
	#mainPrCon{padding: 10rem 0 4rem; display: block; height: auto;}
	#mainPrCon .main-tit-box{width: 100%; padding-bottom: 0;}
	#mainPrCon .main-tit-box .main-tit{font-size:7.8rem; line-height: 0.5;}
	#mainPrCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:2rem; line-height: 1.33;}
	.main-pr-controls {margin-top: 3rem;}
	.main-pr-controls .arrow-prev,
	.main-pr-controls .arrow-next{width: 7.5rem; height: 7.5rem; font-size: 1.8rem;}
	.main-pr-controls .arrow-next{margin-left: 1.5rem;}
	
	.main-pr-controls {margin-top: 3rem; display:flex; align-items:center;}
	.main-pr-controls .arrow-prev,
	.main-pr-controls .arrow-next{width: 7.5rem; height: 7.5rem; font-size: 1.8rem;}
	.main-pr-controls .arrow-next{margin-left: 1.5rem;}
	
	.main-pr-con{margin-top: 1rem; position: relative; top: 0; left: var(--area-padding); transform: none; width: calc(100% - var(--area-padding));}
	.main-pr-container{padding: 6rem 0 !important;}
	.main-pr-item{width: 50%;}
	.main-pr-item a{padding: 3.5rem 3rem 4rem; border-radius: 1rem;}
	.main-pr-item .category{font-size: 1.8rem; line-height: 1.3;}
	.main-pr-item .category span + span{margin-left: 1.6rem;}
	.main-pr-item .category span + span:before{left: -1rem; content: '/';}
	.main-pr-item .tit{height: 2.76em; margin-top: 4rem; font-size: 2.6rem; line-height: 1.38;}
	.main-pr-item .txt{height: 4.86em; margin-top: 2.5rem; font-size: 1.6rem; line-height: 1.62;}
	.main-pr-item .date{margin-top: 7rem; font-size: 1.4rem; line-height: 1.3;}
	
	.swiper-slide-active.main-pr-item a{border-color: #545454; box-shadow: 2.9rem 2.9rem 3.5rem -1.5rem rgba(81,81,81,0.15);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Online inquiry) -------- */
#mainOnlineCon{position: relative; width: 100%; height: 66.2rem; display:flex; align-items:center;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; }
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

#mainOnlineCon .area{position: relative; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}
#mainOnlineCon .main-tit-box{width: 50%;}
#mainOnlineCon .main-tit-box .category{font-size: 3rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #fff;}
#mainOnlineCon .main-tit-box .main-tit{margin-top: 3rem; font-size:8rem; line-height: 1; letter-spacing: -0.025em; font-weight:700; color:#fff;}
#mainOnlineCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:1.65rem; line-height: 1.6; font-weight:500; color: #fff;}
#mainOnlineCon .main-tit-box .cm-word-split-JS.splitting .word{overflow: visible; line-height: 1.1;}

.main-online-con{width: 50%; max-width: 610px;}
.main-online-info-item{width: 100%;}
.main-online-info-item + .main-online-info-item{margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,0.15);}
.main-online-info-item h5{margin-bottom: 1.5rem; font-size: 2.6rem; line-height: 1.38; letter-spacing: -0.055em; font-weight: 700; color: #fff;}
.main-online-info-item dl{display: flex; flex-wrap:wrap;}
.main-online-info-item dt,
.main-online-info-item dd{font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.055em; font-weight: 400; color: #fff;}
.main-online-info-item dt{width: 10rem; font-weight: 600;}
.main-online-info-item dd{width: calc(100% - 10rem);}

/* 주석처리한 폼 */
.main-online-list{margin: -0.5rem -1.7rem; display: flex; flex-wrap:wrap;}
.main-online-item{margin: 0.5rem 1.7rem; width: calc(100% - 3.4rem);}
.main-online-item.col2{width: calc(50% - 3.4rem);}
.main-online-form{width:100%; position:relative; }
.main-online-form .input-css{position:relative; width:100%; box-sizing:border-box; height: calc(4.5rem + 2px); font-size:1.5rem; font-weight: 500; color: #fff; border:0; transition:all 0.3s; background-color:transparent; appearance: none; border-radius: 0; box-sizing: border-box;}
.main-online-form .textarea-css{padding: 1rem 0; position:relative; width:100%; box-sizing:border-box; height: calc(10rem + 2px); font-size:1.5rem; font-weight: 500; color: #fff; border:0; transition:all 0.3s; background-color:transparent; resize: none; appearance: none; border-radius: 0; box-sizing: border-box;}
.main-online-form .textarea-css::placeholder,
.main-online-form .input-css::placeholder{color:rgba(255,255,255,0.4);}
.main-online-form .label-css{position: absolute; top: 1.5rem; left: 0; font-size: 1.45rem; line-height: 2rem; font-weight: 500; color: rgba(255,255,255,0.4); pointer-events: none;}
.main-online-form .label-css em{color: #c18f5f;}
.main-online-form .line-css{position:absolute; bottom:0px; left:0; width:100%; height:2px; background-color:#fff;}
.main-online-form .line-css:after{position:absolute; bottom:0px; left:0px; width:100%; height:2px; content:""; background-color:#c18f5f; transition:transform 0.4s; transform:scaleX(0); transform-origin:0 0;}
.main-online-form .textarea-css:focus,
.main-online-form .input-css:focus{outline:none; border-bottom-color:#c18f5f;}
.main-online-form .textarea-css:focus + .label-css,
.main-online-form .input-css:focus + .label-css{clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.main-online-form .textarea-css:focus + .label-css +.line-css:after,
.main-online-form .input-css:focus + .label-css +.line-css:after{transform:scaleX(1)}
.main-online-btn{margin-top: 2.6rem; display: flex; justify-content: flex-end;}
.main-online-btn button{width: 14rem; height: 4.5rem; font-size: 1.35rem; font-weight: 500; color: #fff; border-radius: 4.5rem; border: 1px solid #fff; box-sizing: border-box; transition:var(--transition-custom); transition-property: background-color, color;}
.main-online-btn button:hover{background-color: #fff; color: #000; font-weight: 600;}

@media all and (max-width:1179px){
	#mainOnlineCon .main-tit-box .category{font-size: 2.6rem;}
	#mainOnlineCon .main-tit-box .main-tit{font-size: 7rem;}
}
@media all and (max-width:800px){
	#mainOnlineCon{padding: 10rem 0; height: auto;}
	#mainOnlineCon .area{width: 100%;}
	#mainOnlineCon .main-tit-box{width: 100%;}
	#mainOnlineCon .main-tit-box .category{font-size: 2.6rem; line-height: 1.3;}
	#mainOnlineCon .main-tit-box .main-tit{margin-top: 3rem; font-size:5.6rem; line-height: 1;}
	#mainOnlineCon .main-tit-box .main-sub-tit{margin-top:1rem; font-size:1.65rem; line-height: 1.6;}

	.main-online-con{margin-top: 5rem; width: 100%; max-width: none;}
	.main-online-info-item + .main-online-info-item{margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,0.15);}
	.main-online-info-item h5{margin-bottom: 1.5rem; font-size: 2.6rem; line-height: 1.38;}
	.main-online-info-item dt,
	.main-online-info-item dd{font-size: 1.6rem; line-height: 1.62;}
	.main-online-info-item dt{width: 10rem;}
	.main-online-info-item dd{width: calc(100% - 10rem);}
	
	/* 주석처리한 폼 */
	.main-online-list{margin: -0.5rem -1.7rem;}
	.main-online-item{margin: 0.5rem 1.7rem; width: calc(100% - 3.4rem);}
	.main-online-item.col2{width: calc(50% - 3.4rem);}
	.main-online-form{width:100%;}
	.main-online-form .input-css{height: calc(4.5rem + 2px); font-size:1.5rem;}
	.main-online-form .textarea-css{padding: 1rem 0; height: calc(10rem + 2px); font-size:1.5rem;}
	.main-online-form .label-css{top: 1.5rem; left: 0; font-size: 1.45rem; line-height: 2rem;}
	.main-online-form .line-css{height:2px;}
	.main-online-form .line-css:after{height:2px;}
	.main-online-btn{margin-top: 2.6rem;}
	.main-online-btn button{width: 14rem; height: 4.5rem; font-size: 1.35rem;}
}