@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2026-01-09
******************************************************** */
.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

@media all and (min-width:1281px){
	.index-wrap #header{transition:all 0.8s}
	#header.main-scroll{transform:translateY(-100vh);}
}
@media all and (min-width:801px){
	.index-wrap #headerInner{left: 50%; transform: translateX(-50%); width: 28.6rem; margin:0; padding:0; opacity: 0; transition: left 0.8s ease-in-out, transform 0.8s, width 0.8s ease-in-out, padding 0.8s ease-in-out, opacity 0.4s ease-in-out;}
	.index-wrap #headerInner .logo{left: 0; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: left 0.4s ease-in-out, transform 0.8s ease-in-out, opacity 0.4s ease-in-out;}
	.index-wrap #headerInner .header-lang{opacity:0; transition:all 0.8s ease-in-out;}
	.index-wrap .sitemap-line-btn,
	.index-wrap #gnb{opacity:0; transition:all 0.8s ease-in-out;}
	
	.index-wrap.index-front-active #headerInner{opacity: 1;}
	.index-wrap.index-front-active #headerInner .logo{opacity: 1;}
	
	.index-wrap.index-active #headerInner{width:100%; left: 0; transform: translateX(0); padding:0 var(--area-padding);}
	.index-wrap.index-active #headerInner .logo{left: var(--area-padding); transform: translate(0, -50%);}
	.index-wrap.index-active #gnb{opacity:1; transition-delay:0.3s;}
	.index-wrap.index-active #headerInner .header-lang,
	.index-wrap.index-active .sitemap-line-btn{opacity:1; transition-delay:0.6s;}
}


/* @media all and (max-width:1280px){
	.index-wrap #header{position: absolute !important;}
} */

/* ******************  메인 인트로 ********************** */
#mainIntro{overflow:hidden; width:100%; height:100vh; position:absolute; top: 0; left: 0; background-color:#fff;}
/*#mainIntro:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+75 
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ }*/
#mainIntro .flow-wrap{position: absolute; top:50%; left:0; transform:translate(0,-50%); width:100%; display: flex; align-items:center; pointer-events:none;}
#mainIntro .flow-wrap .flow-list{display: flex; align-items:center; transform:translateX(-100%); /* animation:partner-flow 45s linear infinite; */}
#mainIntro .flow-wrap .flow-list .flow-item{font-size:12rem; line-height:1; letter-spacing:0; font-weight:700; color:rgba(0,0,0,0.1);/* color: var(--main-color); */ white-space: nowrap;}
/* #mainIntro .flow-wrap .flow-list .cm-word-split-JS.splitting .char {animation: partner-flow-txt 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;} */

@keyframes partner-flow {
	from { transform:translate3d(-100%, 0, 0); }
	to { transform:translate3d(0, 0, 0); }
}
@keyframes partner-flow-reverse {
	from { transform:translate3d(100%, 0, 0); }
	to { transform:translate3d(0, 0, 0); }
}
@keyframes partner-flow-txt{
	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);
	}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual.intro-lock .main-visual-con,
#mainVisual.intro-lock .main-visual-control{pointer-events: none;}
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000; z-index: 20; will-change: clip-path; /* clip-path: circle(0% at 50% 50%); */}
.circle-guide {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 5px; height: 5px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	z-index: 15;
}
.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{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.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex; align-items:center; justify-content: center; text-align: center;
	height:100%;
}
.main-visual-txt-inner {width: 100%;}
.main-visual-txt-box .main-visual-txt1{font-size:6.4rem; font-weight:700; letter-spacing:-0.02em; color:#fff; white-space: nowrap; will-change: letter-spacing, filter, opacity;}
.main-visual-txt-box .main-visual-txt2{margin-top: 3.6rem; font-size:2.5rem; letter-spacing:-0.02em; color:#fff; will-change:opacity;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
/* .main-visual-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: visual-text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .main-visual-txt2 {animation: visual-text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.8s;}

/* intro 동안 메인비주얼 내부 전부 숨김 */
#mainVisual.intro-lock .main-visual-txt-con,
#mainVisual.intro-lock .main-visual-control {
  opacity: 0;
  visibility: hidden;
}


/* 등장 애니메이션 준비 */
.main-visual-txt-con,
.main-visual-control {
  opacity: 0;
  transform: translateY(30px);
}

#mainVisual:not(.intro-lock) .active-item .main-visual-txt-con.show,
#mainVisual:not(.intro-lock) .main-visual-control.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
/* @keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(100%); 
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
} */

@keyframes visual-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-active-animation {
	from {
		    opacity: 0;
			filter: Alpha(opacity=0);
			-webkit-transform: translateX(100px);
			transform: translateX(100px);
	}
	to {
		opacity: 1.0;
		filter: Alpha(opacity=100);
		-webkit-transform: translateX(0);
		transform: translateX(0); 
	}
}
	
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots + 화살표 */
.main-visual-control{position:absolute; left:0; bottom:23.97%; width:100%; text-align:center; z-index:11;}
.main-visual-control .area-box{display: flex; align-items: center; justify-content: center;}

/* 메인 비주얼 :: Dots */
.main-visual-control .main-visual-dot{margin: 0 2rem;}
.main-visual-dot ul{display: flex;}
.main-visual-dot ul li + li{margin-left:2rem;}
.main-visual-dot ul li span{width:20px !important; height: auto !important; background: none !important; opacity: 1 !important; display: block !important; position: relative; cursor:pointer;}
.main-visual-dot ul li span button{position:relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:20px; height:20px; font-size:0; border-radius:50%; box-sizing:border-box;}
.main-visual-dot ul li span:after{position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background-color:#fff; content:""; border-radius:50%; opacity: 1; transition:var(--transition-custom);}
.main-visual-dot ul li span button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--transition-custom);}
.main-visual-dot ul li span button svg circle{fill:transparent; stroke:#fff; stroke-width: 10px; stroke-linecap:round; transition: none !important;}
.main-visual-dot ul li.slick-active span button svg{transform:scale(1) rotate(-90deg);}

/* 메인 비주얼 :: 화살표 */
.main-visual-control .main-visual-prev,
.main-visual-control .main-visual-next{height: 4rem; font-size: 2.4rem; color: #fff; opacity: 0.5;}
.main-visual-control .main-visual-next{opacity: 1;}
.main-visual-control .main-visual-prev i,
.main-visual-control .main-visual-next i{position: relative; top: 0.2rem;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:left;/* text-align:center; */}
.main-tit-box.center {text-align:center;}
.main-tit-box .main-tit{color:#000; font-size:10rem; font-weight:700; /* animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.15s; */ opacity: 0;}
.main-tit-box .main-tit strong{font-weight:600;}
.main-tit-box .main-sub-tit{display:block; margin-top: 4rem;/* margin-top:15px; */ color:#222; font-size:4rem; letter-spacing:-0.025em; font-weight:700; line-height:1.1; /* animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s; */ opacity: 0;}
.main-tit-box .main-txt {font-size:1.8rem; font-weight: 500; line-height:1.667; color: rgba(0,0,0,0.5); margin-top: 3rem; 
/* animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.45s; */ opacity: 0;}
.main-tit-box.wt .main-tit, .main-tit-box.wt .main-sub-tit, .main-tit-box.wt .main-txt {color: #fff;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
/* animated */
.main-tit-box.animated .main-tit {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.15s;}
.main-tit-box.animated .main-sub-tit {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s;}
.main-tit-box.animated .main-txt {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.45s;}

 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* 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);
}

/* ************************** mainContent1 ************************** */
#mainContent1 {padding-top: 14rem; position: relative; z-index: 10;}
#mainContent1:after {display: block;
content: "";
position: absolute;
bottom: 0;
height: 11.5rem;
background: #f2f2f2;
width: 100%;
z-index: -1;}
#mainContent1 .main-tit-box .main-sub-tit {margin-top: 6rem;}
.pd-container {position: relative;/* display:flex; justify-content: space-between; */}
.pd-total-menu {display:flex; margin: 3.9rem -0.5rem 0; opacity: 0; /* animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.6s; */}
.animated .pd-total-menu {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.6s;}
.pd-total-menu li {width: 12.5rem; height: 12.5rem; margin: 0 0.5rem;}
.pd-total-menu li:last-of-type {margin-bottom: 0;}
.pd-total-menu li a {display:flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; 
box-sizing:border-box; background: var(--main-color); border-radius:10px; padding: 2rem; transition:var(--transition-custom);}
.pd-total-menu li a:hover {background: #000;}
.pd-total-menu li em {color: #fff; font-size:1.6rem; font-weight: 700;  line-height:1.285em;}
.pd-total-menu li i {color: #fff; font-size:1.8rem; text-align: right;}

.mainProductCon {display:flex; align-items: center; }
.main-product-info {position: absolute; left: 0; top: 0; z-index: 1;}
.main-product-info .tit {color: #222; font-size: 4rem; letter-spacing: -0.025em; font-weight: 700; line-height: 1.1;}
.main-product-info .txt {font-size: 1.8rem; font-weight: 500; line-height: 1.667; color: rgba(0, 0, 0, 0.5); margin-top: 3rem;}
/* 제품 이미지 */
.mainProductlist {width: 100%; align-self: flex-end; /* width: 41.3rem; */ transform:translateX(15%); opacity: 0; transition:all 1s ease-in-out; transition-delay:0.75s;}
.mainProductlist.animated  {transform:translateX(0); opacity: 1;}
.mainProductlist .img-box {position: relative; width: 27.632%; margin: 0 auto; /* width: 100%; */ height: 0; padding-top: 41%;/* padding-top: 52.28%; */}
.mainProductlist .img-box span {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 0;}
/* 제품 카테고리 */
.mainProductcategory {width: 34rem; margin-left: 21.4rem; position: absolute !important;
    right: 0;
    top: 0;}
.mainProductcategory .pd-category {font-size:2rem; letter-spacing:-0.025em; color: #222; font-weight: 700; text-align:right;}
.mainProductcategory li {position: relative; border:0 !important; width: 100%;}
.mainProductcategory li .inner-box {display:flex !important; align-items:center; justify-content: flex-end; padding:1rem 0; 
border: 2px solid transparent !important; border-bottom:1px solid rgba(0,0,0,0.1) !important; cursor:pointer; border-radius:5px; backdrop-filter: blur(5px);
position: relative; left: -40px; opacity: 0; transition: left 0.8s ease, opacity 0.8s ease; will-change: transform, opacity; /* height: 9.1rem; */ box-sizing: border-box;} 
.mainProductcategory li .inner-box:before {display: block;
position: absolute;
top: -0.2rem;
right: 0;    
width: 100%;
height: calc(100% + 0.2rem);
border: 2px solid var(--main-color);
box-sizing: border-box;
content: "";
border-radius: 5px; opacity: 0; transition: var(--transition-custom);}
.mainProductcategory.animated li .inner-box {left:0; opacity: 1;}
.mainProductcategory.animated li:nth-child(1) .inner-box { transition-delay: 0.1s; }
.mainProductcategory.animated li:nth-child(2) .inner-box { transition-delay: 0.2s; }
.mainProductcategory.animated li:nth-child(3) .inner-box { transition-delay: 0.3s; }
.mainProductcategory.animated li:nth-child(4) .inner-box { transition-delay: 0.4s; }
.mainProductcategory.animated li:nth-child(5) .inner-box { transition-delay: 0.5s; }
.mainProductcategory.animated li:nth-child(6) .inner-box { transition-delay: 0.6s; }
.mainProductcategory.animated li:nth-child(7) .inner-box { transition-delay: 0.7s; }
.mainProductcategory.animated li:nth-child(8) .inner-box { transition-delay: 0.8s; }
.mainProductcategory.animated li:nth-child(9) .inner-box { transition-delay: 0.9s; }
.mainProductcategory.animated li:nth-child(10) .inner-box { transition-delay: 1s; }
.mainProductcategory li.slick-current .inner-box:before {opacity: 1;}
.mainProductcategory li.slick-current .pd-category {color: var(--main-color);}
.mainProductcategory li:last-child {border-bottom:0;}
.mainProductcategory li .img-box {width: 6rem; margin-left: 3rem;}
.mainProductcategory li .img-box span {position: relative; width: 100%; height: 0; padding-top: 100%; display: block;}
.product-flow-txt {position: absolute; bottom: 8.1rem; z-index: -1; display:flex; white-space:nowrap;}
.product-flow-txt p {color: rgba(0, 0, 0, 0.05);
font-weight: 700;
font-size: 24rem;
font-family: var(--font-family2);
white-space: nowrap;     animation: 20s 0s flowLoop infinite linear; padding: 0 3rem;}

@keyframes flowLoop {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(-200%);}
}

@media all and (max-width:1280px){
	.pd-container .main-tit-box {position:static;}
	.mainProductlist li {display: flex !important; flex-direction: column-reverse;}
	.main-product-info {position:static; min-height: 28.4rem;}
}

@media all and (max-width:800px){
	.product-flow-txt {bottom: 6.5rem;}
	#mainContent1:after {height: 8rem;}
	.mainProductlist .img-box {width: 70%;/* width: 100%;  *//* margin-top: -2rem; */ padding-top: 100%;}
	.main-product-info {min-height:33.4rem;}
}

/* ************************** mainContent2 ************************** */
#mainContent2 {background: #f2f2f2; padding: 14rem 0 15rem;}
.main-product-container{margin: 0 auto; position: relative; height: 80rem; border-radius: 5rem; overflow: hidden; background-color: #000; transform-origin: center; backface-visibility: hidden; /* transform-style: preserve-3d; */ transform:none;}
.main-product-container.is-animating {
  transform-style: preserve-3d;
}
/* .main-product-bg{position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 183rem; height: 90rem; opacity: 0;}
.main-product-bg img {position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 183rem; height: 90rem; will-change: transform, opacity; image-rendering: auto;}
.main-product-bg.active{opacity: 1; z-index: 1;} */

.main-product-item:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(6px);
	background-color: rgba(0, 0, 0, 0.6);
	transition: var(--transition-custom);
}
.main-product-item.active:before {opacity: 0;}
.main-product-item:nth-child(1) {background: url('/images/main/main_product_img01.jpg') center/cover no-repeat;}
.main-product-item:nth-child(2) {background: url('/images/main/main_product_img02.jpg') center/cover no-repeat;}
.main-product-item:nth-child(3) {background: url('/images/main/main_product_img03.jpg') center/cover no-repeat;}

.main-product-wrapper {position: relative; width: 100%; height: 100%; display: table; table-layout: fixed; z-index: 1;}
.main-product-item {position: relative; display: table-cell; vertical-align: middle; width: 14.739%; height: 100%; box-sizing: border-box; /* background-color: rgba(0,0,0,0.6); backdrop-filter: blur(4.2rem); */ cursor: pointer; transition: width 0.6s ease-in-out, background-color 0.6s ease-in-out;}
.main-product-inner{padding: 0 1rem; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform-origin: center; position: relative; transition: opacity 0.3s ease-in-out;}
.main-product-item:nth-child(1) .pc-br{display: none;}
.main-product-item:nth-child(1) .txt{padding: 0 5rem;}
.main-product-item + .main-product-item{border-left: 3px solid rgba(255,255,255,1);}
.main-product-bg-m{display: none;}
.main-product-txt{position: relative; transition: padding-bottom 0.6s ease-in-out;}
.main-product-item .num{font-size: 2rem; line-height: 1.3; font-weight: 600; color: #fff;}
.main-product-item .tit{margin-top: 1.5rem; font-size: 3.8rem; line-height: 1.3; font-weight: 500; color: #fff;}
.main-product-item .sub-tit{margin-top: 1rem; font-size: 1.5rem; line-height: 1.5; font-weight: 500; color: #fff; display: inline-flex;}
.main-product-item .sub-tit.splitting > span{line-height: 1.5; border-bottom: 2px solid rgba(255,255,255,0); vertical-align: middle;}
.main-product-item .sub-tit.splitting .whitespace{width: 0.3rem;}
.main-product-item .btn{position: absolute; bottom: -10rem; left: 50%; margin-left: -3.8rem; width: 6rem; height: 6rem; font-size: 2.4rem; color: #fff; 
border-radius:100%; display: flex; align-items: center; justify-content: center; /* transition: bottom 0.6s ease-in-out , opacity 0.3s ease-in-out; */}

@keyframes wave {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.main-product-item .btn .line1,
.main-product-item .btn .line2 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.main-product-item .btn .line1 {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: wave 2s linear infinite;
}

.main-product-item .btn .line2 {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: wave 2s linear infinite;
  animation-delay: 1s; 
}

.main-product-cover{position: absolute; bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center; padding: 3rem 1.5rem; border-radius: 2rem; box-sizing: border-box; 
display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; 
transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;}
.main-product-item.active .main-product-cover{opacity: 1; visibility: visible; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;}
.main-product-cover-inner{padding: 0 1rem; overflow-x: hidden; overflow-y: auto;}
@keyframes pulse-arrow {
  0%   {transform: translateY(0) rotate(90deg); opacity:1;}
  50%  {transform: translateY(0.25em) rotate(90deg);opacity:1;}
  75% {transform: translateY(0.25em) rotate(90deg);opacity:0;}
  100% {transform: translateY(0) rotate(90deg);opacity:0;}
}
@keyframes hand-move {
  0%   {transform: translateY(0.5em);}
  50%  {transform: translateY(1em);}
  100% {transform: translateY(0.5em);}
}
.main-product-cover .num{font-size: 2.2rem; font-weight: 700; color: #fff;}
.main-product-cover .tit{font-size:6rem; font-weight: 700; color: #fff; margin-top: 0;}
.main-product-cover .sub-tit{margin-top: 1rem; font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,0.5);}
.main-product-item .num.splitting .char,
.main-product-item .tit.splitting .char,
.main-product-item .sub-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	will-change: opacity, transform;
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
.main-product-item .txt{opacity: 0;}
.main-product-inner.animated .num.splitting .char,
.main-product-inner.animated .tit.splitting .char,
.main-product-inner.animated .sub-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
.main-product-inner.animated .sub-tit.splitting > span{border-bottom-color: rgba(255,255,255,0.5)}
.main-product-inner.animated .num.splitting .char{animation-delay:0.2s;}
.main-product-inner.animated .tit.splitting .char{animation-delay:0.6s;}
.main-product-inner.animated .sub-tit.splitting .char{animation-delay:0.8s;}
/* active */
.main-product-item.active{width: 49.13%; background-color: rgba(0,0,0,0); backdrop-filter:none;}
.main-product-item.active .main-product-inner {opacity: 0;}
.main-product-item.active .main-product-txt{padding-bottom: 11.2rem;}
.main-product-item.active .btn{bottom: 0; opacity: 0;}



/* since */
@keyframes text-active-animation2 {
	from {
		    opacity: 0;
			filter: Alpha(opacity=0);
			-webkit-transform: translateY(30px);
			transform: translateY(30px);
	}
	to {
		opacity: 1.0;
		filter: Alpha(opacity=100);
		-webkit-transform: translateY(0);
		transform: translateY(0); 
	}
}

.mainContent2-since-con {display:flex; align-items: center; max-width:130.2rem; margin: 15rem auto 0;}
.mainContent2-since-con .logo-box {width: 38.4rem; height: 38.4rem; transform: scale(0.5); transition: var(--transition-custom2); transition-delay: 0.3s; opacity: 0;}
.mainContent2-since-con.animated .logo-box {transform: scale(1); opacity: 1;}
.mainContent2-since-con .tit-box {width: calc(100% - (38.4rem + 9.2rem)); margin-left: 9.2rem;}
.mainContent2-since-con .sub-tit {display:inline-block; font-size:3rem; font-weight: 400; letter-spacing:-0.02em; color: #CD1719; font-family:var(--font-family2); opacity: 0; }
.mainContent2-since-con .tit {display: block; font-size:5rem; letter-spacing:-0.045em; color: #000; font-weight: 700; line-height:1.36em; margin-top: 3rem; opacity: 0; }
.mainContent2-since-con .txt {font-size:1.6rem; letter-spacing:-0.04em; color: rgba(0,0,0,0.5); font-weight: 500; line-height:1.625em; margin-top: 2rem; opacity: 0; }	
.mainContent2-since-con.animated .sub-tit { animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.15s;}
.mainContent2-since-con.animated .tit { animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s;}
.mainContent2-since-con.animated .txt { animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.75s;}
.since-icon {width: 100%; height: 100%; overflow:visible;}
.since-icon .orbit { transform-origin: 192px 192px; /* 큰 원 중심 */}

.orbit1 { animation: orbit-rotate 8s linear infinite; }
.orbit2 { animation: orbit-rotate 12s linear infinite reverse; }
.orbit3 { animation: orbit-rotate 10s linear infinite; }
.orbit4 { animation: orbit-rotate 14s linear infinite reverse; }
.orbit5 { animation: orbit-rotate 9s linear infinite; }

@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}





/* ************************** mainContent3 ************************** */
#mainContent3 {margin-top: 15rem;}
#mainContent3 .main-tit-box.animated .main-tit {animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.15s;}
.main-notice-list {position: relative; z-index: 10;}
.main-notice-list li {position: relative;}
.main-notice-list li .inner-box a {transform:translateX(20%); opacity: 0; transition:all 1.4s ease-in-out;}
.main-notice-list li:nth-child(1) .inner-box a {border-top:1px solid rgba(0,0,0,0.1);}
.main-notice-list li:nth-child(2) .inner-box a {transition-delay:0.2s;}
.main-notice-list li:nth-child(3) .inner-box a {transition-delay:0.3s;}
.main-notice-list li:nth-child(4) .inner-box a {transition-delay:0.4s;}
.main-notice-list li:nth-child(5) .inner-box a {transition-delay:0.5s;}
.main-notice-list li a {display: block; position: relative; border-bottom:2px solid rgba(0,0,0,0.1); padding: 3.45rem 4.8rem;}
.main-notice-list li a:after {display: block; content: ""; position: absolute; left: 0; background: var(--main-color); height: 4px; width: 0; bottom: -2px; transition:var(--transition-custom);}
.main-notice-list li .title-box {display: flex; justify-content: space-between; align-items: center; }
.main-notice-list li .tit-box {display: flex; align-items: center; width: 93%;}
.main-notice-list .date {width: 10rem; font-size:1.6rem; font-weight: 500; color: #888; margin-right: 4.5rem;}
.main-notice-list .category {width: 5.5rem; height: 3rem; border-radius:32.5px; border:1px solid #fff; font-size:1.4rem; letter-spacing:-0.01em; 
line-height: 3rem; color: #fff; text-align: center; margin-right: 2rem; transition:var(--transition-custom); background: #000;}
.main-notice-list .category + .title {width: calc(100% - 22.2rem)}
.main-notice-list .title {width: calc(100% - 14.5rem); font-size:2.4rem; /* letter-spacing:-0.065em;  */color: #000; font-weight: 700; line-height:1.5em; transition:var(--transition-custom); display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.main-notice-list li i {font-size:2.6rem; color: rgba(0,0,0,0.2); transition:var(--transition-custom);}
.main-notice-list .inner-img {width: 28rem; position:absolute; left: 0; top: 0; /* transform: translate(-50%, -50%);  */z-index: 10; pointer-events: none;}
.main-notice-list .inner-img span {display: block; width: 100%; position: relative; height: 0; padding-top: 100%;}
.main-notice-list .inner-img img {border-radius:100%; opacity: 0; width:100%; object-fit:cover; transition: opacity 0.4s ease;}
.main-notice-list .inner-img img.m-ver {display:none;}
.main-notice-list li a:hover:after {width: 100%;}
.main-notice-list li a:hover .title {color: var(--main-color);}
.main-notice-list li a:hover .category {background: var(--main-color); color: #fff; border-color:var(--main-color);}
.main-notice-list li:hover .inner-img img {opacity: 1;}
.main-notice-list li:hover i {color: var(--main-color);}
.notice-more-btn-wrap {margin-top: 6rem;}
.notice-more-btn {display: flex; align-items: center; justify-content: space-between; background: #000; border-radius:32.5px; background:var(--main-color); width: 22rem; height: 6rem; margin: 0 auto; line-height: 6rem; padding: 0 3rem; box-sizing:border-box; transition:var(--transition-custom);}
.notice-more-btn em {color: #fff; font-size:1.8rem;}
.notice-more-btn i {color: #fff; font-size:1.9rem;}
.notice-more-btn:hover {background: #000;}
.main-notice-list.animated li .inner-box a {transform:translateX(0); opacity: 1;}



/* ************************** mainContent4 ************************** */
#mainContent4 {position: relative; max-width: 1760px; margin: 15rem auto 11.5rem;}
#mainContent4 .bg {
	position: absolute;
top: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
left: 50%;
background: url(/images/main/main_customer_bg.jpg) no-repeat;
background-position: 50% 50%;
background-size: cover;
transition: all 1.2s;
transition-delay: 0.2s;
transform: scale(1.05);
border-radius: 20px;
}
#mainContent4.animated .bg {width: 100%; left: 0; transform:scale(1);}
#mainContent4 .main-tit-box {margin-bottom: 0; width: calc(100% - 48.027%);}
#mainContent4 .main-tit-box .main-tit {font-weight: 400; font-size:9rem; letter-spacing:-0.04em;}
#mainContent4 .main-tit-box .main-sub-tit {font-size:2.4rem; letter-spacing:-0.04em; line-height:; font-weight: 700;}
#mainContent4 .main-tit-box .main-txt {font-size:1.6rem; letter-spacing:-0.04em; line-height:1.625; font-weight: 500;}

#mainContent4 .main-tit-box.animated .main-tit {animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.15s;}
#mainContent4 .main-tit-box.animated .main-sub-tit {animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s;}
#mainContent4 .main-tit-box.animated .main-txt {animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.45s;}

.main-customer-con {display:flex; align-items:center; padding: 10.5rem 0;}
.main-customer-list {width: 48.027%; background: rgba(0,0,0,0.25); backdrop-filter:blur(30px); padding: 10.5rem 9.5rem; border-radius:20px; box-sizing: border-box;}
.main-customer-list li { border-bottom:1px solid rgba(255,255,255,0.1);}
.main-customer-list li:last-of-type {margin-bottom: 0; border-bottom:0;}
.main-customer-list li a {position: relative; z-index: 10; display:flex; align-items:center; justify-content:space-between; justify-content:space-between; padding: 5rem 0;}
.main-customer-list li:first-of-type a {padding-top: 0;}
.main-customer-list li:last-of-type a {padding-bottom:0;}
.main-customer-list li .tit {font-size:3.4rem; letter-spacing:-0.04em; font-weight: 700; color: #fff; transition:var(--transition-custom);}
.main-customer-list li .txt {font-size:1.6rem; letter-spacing:-0.04em; font-weight: 500; color: rgba(255,255,255,0.6); line-height:1.625; margin-top: 1.5rem; transition:var(--transition-custom);}
.main-customer-list .icon-box {width: 6.6rem;}
.main-customer-list .icon-box span {display: block; position: relative; height: 0; width: 100%; padding-top: 104.55%;}
.main-customer-list .icon-box .customer-svg {    position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%;}
.main-customer-list li:hover .tit, .main-customer-list li:hover .txt {color: #E41719;}
.customer-svg path {transition:var(--transition-custom);}
.main-customer-list li:hover .customer-svg path {stroke:#E41719;}