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

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}

@media all and (min-width:1280px){
	.main-page #header{transition:var(--transition-custom2); opacity:0; transform: translateY(calc(-1 * (var(--header-height) + var(--header-top))));}
	.main-page .load#header{opacity:1; transform:translateY(0px);}
	.main-page .hide#header{transform: translateY(calc(-1 * (var(--header-height) + var(--header-top))));}

	/* -------- 메인 컨텐츠 :: 스크롤컨텐츠 -------- */
	.fp-tableCell .fullpage-inner-scroll{overflow:scroll; max-height:100vh;}
	.fp-tableCell .fullpage-inner-scroll::-webkit-scrollbar {display: none;}
	.fullpage-inner-scroll-con{position: relative; }
}
@media all and ( max-width: 1279px ) {
	#fullpage .section:not(#mainVisual, #mainFooter){height: auto !important;}
	#fullpage .section .fp-tableCell{height:auto !important;}
	.fullpage-inner-scroll,
	.fullpage-inner-scroll-con{height:auto !important; overflow:visible !important; touch-action: pan-y !important;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000 }
.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-media{opacity:0.9;}
/* 메인 비주얼 :: 이미지 */
.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-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video video{
width: 100vw;
height: calc(56.25vw + 600px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: calc(100vh + 600px);
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;
}
.main-visual-item .background-video iframe{
width: 100vw;
height: calc(56.25vw + 600px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: calc(100vh + 600px);
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 1s;
}
.main-visual-item .background-video.start iframe{opacity:1;filter:Alpha(opacity=100); transition-delay:0s;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box.area-wide{
	display:flex;
	align-items:flex-end;
	height:100%;
	padding-bottom: 4rem !important;
	box-sizing:border-box;
}
/* .main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
} */
.main-visual-txt-box .main-visual-txt1{margin-bottom: 1rem; font-size:4rem; line-height: 1.3; letter-spacing:-0.025em; font-weight:600; color:#fff;}
.main-visual-txt-box .main-visual-txt2{font-size:4.8rem; letter-spacing:-0.02em; font-weight: 600; color:#fff;}
.main-visual-txt-box .main-visual-txt2 + .main-visual-txt2{}

.main-visual-txt-inner{display: flex; flex-direction: column;}
.mv-char{ display:inline-block; will-change: transform, opacity; }
.main-visual-txt1.mv-ml11,
.main-visual-txt2.mv-ml11{
  position: relative;
  display: inline-block;
}

.mv-text-wrapper{
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.mv-line{
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: currentColor;
  transform-origin: 0 50%;
}

.mv-letter{
  display: inline-block;
  line-height: 1em;
}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1.splitting .char,
.active-item .main-visual-txt2.splitting .char{opacity:0; transform:translateY(100%);}
.load .active-item .main-visual-txt1,
.load .active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.load .active-item .main-visual-txt1{animation-delay:0.3s;}
.load .active-item .main-visual-txt2{animation-delay:0.5s;}
.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;}
.main-visual-txt-box .cm-word-split-JS.splitting .word{line-height:1.2;}
.load .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;}

/* 메인 비주얼 :: 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 text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-custom-box{position: absolute; top: 50%; margin-top: -2%; transform: translateY(-50%); right: 50%; margin-right: -865px; width:3px; height: 37%; z-index:99;}
.main-visual-custom-box .main-visual-dots{position: relative; width:100%; height:100%; background:rgba(255,255,255,0.1);}
.main-visual-custom-box .main-visual-dots .slick-dots li{position: absolute; width:100%; height:100%; top:0px; left:0;}
.main-visual-custom-box .main-visual-dots .slick-dots li .bar{display: block; height:100%; background: #fff;}

@media all and (max-width:1860px){
	.main-visual-custom-box{right: var(--area-padding); margin-right: 38px;}
}
@media all and ( max-width: 1279px ){
	.main-visual-txt-box .main-visual-txt2{font-size:5.1rem;}
}
@media all and ( max-width: 800px ){
	.main-visual-txt-box.area-wide{padding-bottom: 15% !important;}
	.main-visual-txt-box .main-visual-txt1{margin-bottom: 1rem; font-size:2.8rem; line-height: 1.3;}
	.main-visual-txt-box .main-visual-txt2{font-size:3.3rem;}
	.main-visual-txt-box .main-visual-txt2 + .main-visual-txt2{}
	
	/* 메인 비주얼 :: Dots */
	.main-visual-custom-box{width:3px; height: 37%; display: none;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .main-category{display: block; color:var(--main-color); font-size:5.6rem; font-weight:700; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); will-change: opacity, transform; filter: blur(1rem);}
.main-tit-box .main-tit{display: block; font-size:3rem; line-height:1.4; letter-spacing:-0.02em; font-weight:700; color:#000; margin-bottom:0; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); will-change: opacity, transform; filter: blur(1rem);}
.main-tit-box .splitting .word{line-height:1.2;}
.main-tit-box .splitting .char{
	opacity:0;
	transform:translateY(100%);
	line-height:1;
	will-change: opacity, transform;
}
/* animated */
.animated:not(.main-bottom-slide) .main-tit-box .main-category{}
.animated:not(.main-bottom-slide) .main-tit-box .main-tit{transition-delay:0.2s;}
.animated:not(.main-bottom-slide) .main-tit-box .cm-word-split-JS.splitting .char{animation: text-active-animation 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated:not(.main-bottom-slide) .main-tit-box .word:not(:first-child){margin-top:-0.2em;}
.animated:not(.main-bottom-slide) .main-tit-box .main-category,
.animated:not(.main-bottom-slide) .main-tit-box .main-tit{
	opacity:1.0;
	transform:translateY(0);
	filter: blur(0px);
}

@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-category{font-size:3.9rem; margin-bottom:2rem;}
	.main-tit-box .main-tit{font-size:2.4rem; line-height:1.4;}
}

/* -------- 메인 컨텐츠 :: Product -------- */
:root{
	--cm-prd-transition: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-product-con{width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-product-wrapper{margin-top: 10rem; margin-top: 3.25%; width: 100%; box-sizing: border-box;}
.main-product-list{margin: 0 -1rem; display: flex; transition: margin var(--cm-prd-transition); pointer-events: none;}
.main-product-item{padding: 0 1rem; flex: 1 1 0; height: 58rem; transition: padding var(--cm-prd-transition), width var(--cm-prd-transition), flex var(--cm-prd-transition); position: relative; box-sizing: border-box; overflow: hidden; border-radius:2rem; pointer-events: auto;}
.main-product-item a{padding-top: 10rem; display: block; width: 100%; height: 100%; border-radius: 2rem; background-size: cover !important; box-sizing: border-box; position: relative; will-change: transform; transform: scaleY(1.3) translateY(100%); transition: transform 1.8s 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top var(--cm-prd-transition);}
.main-product-txt{position: absolute; top: 10rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; transition: all var(--cm-prd-transition); }
.main-product-txt h5{font-size: 3rem; line-height: 1.3; letter-spacing: -0.03em; font-weight: 700; color: #000; white-space: nowrap; transition: font-size var(--cm-prd-transition);}
.main-product-txt p{position: absolute; top: calc(100% + 2rem); font-size: 1.5rem; line-height: 1.6; letter-spacing: -0.05em; font-weight: 500; color: rgba(0,0,0,0.5); white-space: nowrap; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--cm-prd-transition), transform var(--cm-prd-transition), margin var(--cm-prd-transition), font-size var(--cm-prd-transition), visibility 0s linear var(--cm-prd-transition);}
.main-product-txt p.right-txt{left:calc(100% - 8rem); top:50%; transform:translateY(-50%); margin-top: 0; opacity: 0; visibility: hidden; transition: opacity var(--cm-prd-transition), visibility 0s linear var(--cm-prd-transition);}
.main-product-img{position: absolute; bottom: 0; right: 3rem; width: calc(100% - 6rem); transition: width var(--cm-prd-transition);}
.main-product-img span {display: block; position: relative; width: 100%; display: flex; align-items: end; justify-content: end;}
.main-product-img span img{max-width: 54rem; width: 100%; transform: scale(1.0); transform-origin: right bottom; transition: transform var(--cm-prd-transition);}
.main-product-btn{position: absolute; bottom: 8rem; left: 8rem; width: 8rem; height: 8rem; font-size: 2.4rem; background-color: rgba(255,255,255,0.3); backdrop-filter:blur(1rem); border-radius: 1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--cm-prd-transition)}
.main-product-btn i{position: relative; color: #000; transition:var(--transition-custom);}

.main-product-btn.cm-btn-full:hover .cm-fill{width:30rem; height:30rem;}

/* open */
@media all and (min-width: 1280px){
	.main-product-list:hover{margin: 0 -0.5rem;}
	.main-product-list:hover .main-product-item{flex: 0.7 1 0; padding: 0 0.5rem;}
	.main-product-list:hover .main-product-item .main-product-txt p:not(.right-txt){transition-delay: 0s, 0s, 0s, 0s, var(--cm-prd-transition);}
	.main-product-list:hover .main-product-item .main-product-txt p.right-txt{transition: opacity var(--cm-prd-transition) 0.4s;}
	.main-product-list:hover .main-product-item:not(.active) a{padding-top: 6rem;}
	.main-product-list:hover .main-product-item:not(.active) .main-product-txt h5{font-size: 2rem;}
	.main-product-list:hover .main-product-item:not(.active) .main-product-txt p:not(.right-txt){opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--cm-prd-transition), transform var(--cm-prd-transition), visibility 0s linear var(--cm-prd-transition);}
	.main-product-list:hover .main-product-item:not(.active) .main-product-img{width:100%; right:0;}
	.main-product-list:hover .main-product-item.active{flex: 2.2 1 0;}
	.main-product-list:hover .main-product-item.active a{padding-top: 8rem;}
	.main-product-list:hover .main-product-item.active .main-product-txt{padding: 0 8rem; left:0; transform:translateX(0);}
	.main-product-list:hover .main-product-item.active .main-product-txt h5{font-size: 6rem;}
	.main-product-list:not(:hover) .main-product-item .main-product-txt p:not(.right-txt){transition-delay: 120ms, 120ms, 0s, 0s, var(--cm-prd-transition);}
	.main-product-list:hover .main-product-item.active .main-product-txt p:not(.right-txt){opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--cm-prd-transition), transform var(--cm-prd-transition), visibility 0s linear var(--cm-prd-transition);}
	.main-product-list:hover .main-product-item.active .main-product-txt p.right-txt{opacity: 1; visibility: visible; transition-delay: 0.4s, 0s;}
	.main-product-list:hover .main-product-item:nth-child(1).active .main-product-txt h5{font-size: 4rem;}
	.main-product-list:hover .main-product-item:nth-child(2).active .main-product-txt h5{font-size: 5rem;}
	.main-product-list:hover .main-product-item.active .main-product-txt p{margin-left: 4rem; margin-top: 0; font-size: 1.6rem; line-height: 1.75; display: block; white-space: nowrap;}
	.main-product-list:hover .main-product-item.active .main-product-btn{opacity: 1; transition-delay:0.2s;}
}

/* animated */
.animated .main-product-item a{transform: scaleY(1.0) translateY(0); transition-delay:0.1s;}
.animated .main-product-item:nth-child(2) a{transition-delay:0.2s;}
.animated .main-product-item:nth-child(3) a{transition-delay:0.3s;}
.animated .main-product-item:nth-child(4) a{transition-delay:0.4s;}

@media all and ( min-width: 1280px ) and (max-height: 750px) {
	.main-product-item {height: 45rem;}
	.main-product-txt {top: 5rem;}
}
@media all and ( min-width: 1280px ) and (max-height: 800px) {
	.main-product-item {height: 50rem;}
	.main-product-txt {top: 6rem;}
}

@media all and (max-width:1279px){
	.main-product-con{padding: 12rem 0; height: auto;}
	.main-product-wrapper{margin-top: 6rem;}
	.main-product-list{margin: 0 -1rem;}
	.main-product-item{padding: 0 1rem; height: 40rem; border-radius:2rem;}
	.main-product-item a{padding-top: 6rem; border-radius: 2rem;}
	.main-product-txt{top: 6rem; left: 2rem; right: 2rem; transform: translateX(0); text-align: center;}
	.main-product-txt h5{font-size: 3rem; line-height: 1.3; white-space: initial; height: 2.6em; display: flex; align-items: center; justify-content: center;}
	.main-product-txt p{margin-top: 2rem; position: static; font-size: 1.5rem; white-space: initial;}
	.main-product-txt p .m-br{display: block;}
	.main-product-txt p.right-txt{display: none;}
	.main-product-img{bottom: 3rem; right: 3rem; width: calc(100% - 6rem);}
	.main-product-btn{bottom: 8rem; left: 8rem; width: 8rem; height: 8rem; font-size: 2.4rem;}
}
@media all and (max-width:800px){
	.main-product-wrapper{margin-top: 4rem;}
	.main-product-list{margin: -1rem 0; flex-wrap:wrap;}
	.main-product-item{padding: 1rem 0; flex: auto; width: 100%; height: 40rem; border-radius:2rem;}
	.main-product-item {height: 50rem;}
	.main-product-item a{padding-top: 8rem;}
	.main-product-txt{top: 8rem; left: 3rem; right: 3rem;}
	.main-product-txt h5{font-size: 3rem; line-height: 1.3; height: auto;}
	.main-product-txt p{margin-top: 2rem; font-size: 1.5rem; line-height: 1.6;}
	.main-product-img{bottom: 3rem; right: 4rem; width: calc(100% - 8rem);}
	.main-product-img span {justify-content: center;}
	.main-product-img span img{max-width: 390px;}
	.main-product-item:nth-child(2) .main-product-img span img{max-width: 300px;}
 }


/* -------- 메인 컨텐츠 :: Bottom Scroll -------- */
/* animated */
.animated .main-tit-box .main-category{}
.animated .main-tit-box .main-tit{transition-delay:0.2s;}
.animated .main-tit-box .main-txt{transition-delay:0.4s;}
.animated .main-tit-box .main-category,
.animated .main-tit-box .main-tit,
.animated .main-tit-box .main-txt{
	opacity:1.0;
	transform:translateY(0);
}
/* animated */
.animated .cm-btn{transition-delay:0.6s; opacity:1.0;	transform:translateY(0);}


/* -------- 메인 컨텐츠 :: Company -------- */
#mainCompany{background:#F5F5F5; display: flex; align-items: center; justify-content: center;}
#mainCompany .area-box{width: 100%; box-sizing: border-box;}

.main-company-list{padding-top: 8rem;}
.main-company-item{padding: 11rem 0; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; position: relative;}
.main-company-item:before{position: absolute; bottom: 0; width: 0; height: 1px; background-color: #000; content: ''; transition:var(--transition-custom2); transition-property: width;}
.main-company-txt{width: calc(100% - 48rem); opacity:0; transform:translateY(50px); transition:var(--transition-custom2); filter: blur(1rem);}
.main-company-txt strong{position: relative; display: inline-block; font-size: 5.6rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--main-color);}
.main-company-txt strong:before{position: absolute; top: 50%; margin-top: -0.2rem; right: -19.2rem; width: 17.2rem; height: 0.4rem; background-color: var(--main-color); content: '';}
.main-company-txt h5{margin-top: 4rem; font-size: 4rem; line-height: 1.1; letter-spacing: -0.04em; font-weight: 700; color: #000;}
.main-company-txt p{margin-top: 2rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.03em; font-weight: 500; color: rgba(0,0,0,0.5);}
.main-company-video{position: relative; width: 46rem; height: 18rem; border-radius: 9rem; overflow: hidden; pointer-events:none; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-company-video .video-iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 100%; height: 100%; min-height: 27.5rem; min-width: 58.6rem;}
.main-company-video .youtube-player{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events:none; width: 100%; height: calc(100% + 600px); min-height: calc(27.5rem + 600px); min-width: 58.6rem;}
/* even */
.main-company-list .main-company-item:nth-child(even){flex-direction: row-reverse;}
.main-company-list .main-company-item:nth-child(even) .main-company-txt{text-align: right;}
.main-company-list .main-company-item:nth-child(even) .main-company-txt strong:before{right: auto; left: -19.2rem;}

/* animated */
.animated .main-company-item:nth-child(1):before{width: 100%; transition-delay:0.4s;}
.animated .main-company-item:nth-child(2):before{left: auto; right: 0; width: 100%; transition-delay: 0.8s;}
.animated .main-company-item .main-company-txt,
.animated .main-company-item .main-company-video{opacity:1; transform:translateY(0px); filter: blur(0rem);}
.animated .main-company-item:nth-child(1) .main-company-txt,
.animated .main-company-item:nth-child(1) .main-company-video{transition-delay:0.4s;}
.animated .main-company-item:nth-child(2) .main-company-txt,
.animated .main-company-item:nth-child(2) .main-company-video{transition-delay: 0.8s;}

@media all and (max-width:1279px){
	
 }
@media all and (max-width:800px){
	.main-company-list{padding-top: 6rem;}
	.main-company-item{padding: 4rem 0;}
	.main-company-txt{width: 100%;}
	.main-company-txt strong{width: 100%; font-size: 3.9rem; line-height: 1.1;}
	.main-company-txt strong:before{margin-top: -0.2rem; right: 0; width: 17rem; height: 0.4rem;}
	.main-company-txt h5{margin-top: 4rem; font-size: 3.2rem; line-height: 1.25;}
	.main-company-txt p{margin-top: 2.4rem; font-size: 1.8rem; line-height: 1.3;}
	.main-company-video{margin-top: 4rem; width: 100%; height: 18rem; border-radius: 2rem;}
	/* even */
	.main-company-list .main-company-item:nth-child(even) .main-company-txt strong:before{right: auto; left: 0;}
}


/* -------- 메인 컨텐츠 :: Value -------- */
#mainValue{background:#F5F5F5; padding:20rem 0; /* height: 100vh;*/ box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center;}
#mainValue .area-box{width: 100%; box-sizing: border-box;}
#mainValue .main-tit-box .main-category{opacity: 1; filter: none; transform:none;}

.main-value-list{margin-top: 8rem; width: 100%; display: flex; flex-wrap:wrap;}
.main-value-item{width: 25%; /* opacity:0; transform:translateY(50px); transition:var(--transition-custom2); */}
.main-value-cir{position: relative; width: 100%; height: 0; padding-top: 100%;}
.main-value-item:nth-child(1){transform:translateX(150%);}
.main-value-item:nth-child(2){transform:translateX(50%);}
.main-value-item:nth-child(3){transform:translateX(-49%);}
.main-value-item:nth-child(4){transform:translateX(-150%);}

.main-value-item:nth-child(1) .main-value-cir{background: url("../images/main/main_value_bg01.png?ver=251216") center/cover no-repeat;}
.main-value-item:nth-child(2) .main-value-cir{background: url("../images/main/main_value_bg02.png?ver=251216") center/cover no-repeat;}
.main-value-item:nth-child(3) .main-value-cir{background: url("../images/main/main_value_bg03.png?ver=251216") center/cover no-repeat;}
.main-value-item:nth-child(4) .main-value-cir{background: url("../images/main/main_value_bg04.png?ver=251216") center/cover no-repeat;}
.main-value-cir:before {position: absolute; content:''; width:100%; height:100%; border-radius:50%; box-sizing:border-box; top:50%; left:50%; transform:translate(-50%, -50%);  animation: mainValueCir 3s linear infinite;}
.main-value-item:nth-child(1) .main-value-cir:before {border-top:4px solid #fff;}
.main-value-item:nth-child(2) .main-value-cir:before {border-bottom:4px solid #fff;}
.main-value-item:nth-child(3) .main-value-cir:before {border-top:4px solid #fff;}
.main-value-item:nth-child(4) .main-value-cir:before {border-bottom:4px solid #fff;}
@keyframes mainValueCir {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.main-value-cir:after{position: absolute; top: 50%; margin-top: -3rem; left: -3rem; width: 6rem; height: 6rem; font-size: 2.4rem; color: #000; border-radius: 100%; display: flex; align-items: center; justify-content: center; content: "\e913"; font-family: xeicon; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); backdrop-filter: blur(20px);}
.main-value-item:nth-child(1) .main-value-cir:after{display: none;}
.main-value-inner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-value-img{width: 100%; height: 7.7rem; display: flex; align-items: center; justify-content: center;}
.main-value-img img{max-height: 100%;}
.main-value-txt{margin-top: 3rem; text-align: center;}
.main-value-txt h5{height: 2.66em; font-size: 3rem; line-height: 1.33; letter-spacing: -0.04em; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: center;}
.main-value-txt p{margin-top: 2rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.04em; color: rgba(0,0,0,0.5);}

/* animated */
/* .animated .main-value-list{transform:translateY(0);}
.animated .main-value-item{opacity:1; transform:translateY(0px);}
.animated .main-value-item:nth-child(1){transition-delay:0.6s}
.animated .main-value-item:nth-child(2){transition-delay:0.8s}
.animated .main-value-item:nth-child(3){transition-delay:1s}
.animated .main-value-item:nth-child(4){transition-delay:1.2s} */

@media all and (max-width:1279px){
	#mainValue {padding: 16rem 0;}
	.main-value-img{height: 5.5rem;}
	.main-value-txt{margin-top: 2rem;}
	.main-value-txt h5{font-size: 2.4rem;}
	.main-value-txt p{margin-top: 1.5rem; font-size: 1.5rem;}
 }
@media all and (max-width:800px){
	#mainValue{padding:12rem 0;}
	#mainValue .main-tit-box .main-category{/* font-size:2.4rem; margin-bottom:4.5rem; */transform: translateY(0); opacity: 1; filter: none;}

	.main-value-list{margin: 4rem auto 0; max-width: 36rem; width: 100%;}
	.main-value-item{width: 100%;}
	.main-value-cir:after{top: -3rem; margin-top: 0; left: 50%; margin-left: -3rem; width: 6rem; height: 6rem; font-size: 2.4rem;}
	.main-value-img{height: 7.7rem;}
	.main-value-txt{margin-top: 3rem;}
	.main-value-txt h5{height: 2.66em; font-size: 3rem; line-height: 1.33;}
	.main-value-txt p{margin-top: 2rem; font-size: 1.6rem; line-height: 1.3;}
}


/* -------- 메인 컨텐츠 :: ESG -------- */
#mainESG{position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing:border-box; overflow:hidden; background-color: #F5F5F5;}
.esg-bg{position: absolute; top:0; left:0; width:100%; height: 100%; /* transition:var(--transition-custom2); */ opacity: 0;}
.esg-bg:before{position: absolute; content:''; width:100%; height:10rem; background: linear-gradient(to bottom,  rgba(245,245,245,1) 50%,rgba(245,245,245,0) 100%); z-index:9}
.esg-bg iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: calc(56.25vw + 600px); min-height: calc(100vh + 600px); min-width: 177.77vh; pointer-events:none; transition: opacity 3s 0.2s;}

.main-esg-con{width: 100%; box-sizing: border-box; position: relative; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-esg-left{width: 66rem;}
.main-esg-left h5{font-size: 6.4rem; line-height: 1.25; font-weight: 700; color: #fff; }
.main-esg-left h5 b{display: block; white-space:nowrap; margin-top: -2rem;}
.main-esg-left h5 b:nth-child(2){letter-spacing: 1.17em;}
.main-esg-left h5 b:nth-child(3){letter-spacing: 0.2em;}
.main-esg-left p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.87; letter-spacing: -0.05em; color: rgba(255,255,255,0.5); opacity:0; transform:translateX(50px); transition:var(--transition-custom2);}

/* 타이틀 :: active효과 */
.main-esg-left h5 b.splitting .char{opacity:0; transform:translateY(100%);}
.main-esg-left h5.animated b.cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

.main-esg-right{width: 32rem;}
.main-esg-right-list{display: flex; flex-wrap:wrap;}
.main-esg-right-list li{width: 50%; background-color: rgba(255,255,255,0.05); backdrop-filter: blur(3rem); border-radius:50%; overflow:hidden;}
.main-esg-right-list li .circle{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 100%; display: block; box-sizing: border-box;}
.main-esg-right-list li .circle svg{position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: mainEsgCir 5s linear infinite;}
.main-esg-right-list li .circle em{position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 100%; transition:var(--transition-custom); transition-property: background-color, color; z-index:1;}
.main-esg-right-list li.active .circle em{background-color: #fff; backdrop-filter: blur(0); color: #000;}

.main-esg-right-list li:nth-child(1){transform:translate(50%,100%);}
.main-esg-right-list li:nth-child(2){transform:translate(-50%,100%);}
.main-esg-right-list li:nth-child(3){transform:translate(50%,0);}
.main-esg-right-list li:nth-child(4){transform:translate(-50%,0);}
.main-esg-right-list li:nth-child(5){transform:translate(50%,-100%);}
.main-esg-right-list li:nth-child(6){transform:translate(-50%,-100%);}

.main-esg-right-list li .cm-fill{background:#fff;}

@keyframes mainEsgCir {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* hover */
.main-esg-right-list li:hover .circle em{color:#000;}

/* animated */
/* #mainESG.animated .esg-bg {opacity: 1;}
.animated .main-esg-left h5,
.animated .main-esg-left p{opacity:1; transform:translateX(0px);}
.animated .main-esg-right-list li{opacity:1; transform:translateY(0px); transform:translate(0,0);}
.animated .main-esg-right-list li:nth-child(1){transition-delay:0.6s}
.animated .main-esg-right-list li:nth-child(2){transition-delay:0.7s}
.animated .main-esg-right-list li:nth-child(3){transition-delay:0.8s}
.animated .main-esg-right-list li:nth-child(4){transition-delay:0.9s}
.animated .main-esg-right-list li:nth-child(5){transition-delay:1s}
.animated .main-esg-right-list li:nth-child(6){transition-delay:1.1s} */

@media all and (max-width:1279px){
	.main-esg-left{width: 60rem;}
	.main-esg-left h5{font-size: 5.8rem;}
	.main-esg-left p br{display: none;}
 }
@media all and (max-width:800px){
	#mainESG{height: 120rem;}
	.esg-bg:before{height:10rem;}
	.esg-bg iframe{width: calc(155rem + 600px); height: calc(120rem + 600px); min-height: calc(120rem + 600px); min-width: calc(155rem + 600px);}
	
	.main-esg-con{/* padding-top: 18rem !important; padding-bottom: 17rem !important; */}
	.main-esg-left{margin: 0 auto; max-width: 37rem; width: 100%;}
	.main-esg-left h5{font-size: 3.4rem; line-height: 1.47;}
	.main-esg-left h5 b{margin-top: 0;}
	.main-esg-left h5 b:nth-child(2){letter-spacing: 1.17em;}
	.main-esg-left h5 b:nth-child(3){letter-spacing: 0.2em;}
	.main-esg-left p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.87; text-align: center;}
	.main-esg-left p br{display: none;}

	.main-esg-right{margin: 8rem auto 0; max-width: 32rem; width: 100%;}
	.main-esg-right-list li .circle em{font-size: 2rem; line-height: 1.3;}
}


/* -------- 메인 컨텐츠 :: 메인 비주얼 :: 하단 :: 문의버튼 -------- */
.main-visual-inquiry-box{position: fixed; transform:translateY(20rem); right:50%; margin-right: -910px; z-index:9999; transition:var(--transition-custom2);}
.main-visual-inquiry-box a{position: relative; display: block; padding:2rem; box-sizing:border-box; border-radius:5rem; transition:var(--transition-custom); transition-delay:0.2s; background:rgba(255,255,255,0.05); backdrop-filter:blur(3rem);}
.main-visual-inquiry-box a .icon-box{position: relative; z-index:1; display: flex; align-items:center; justify-content:center; width:6rem; height:6rem; border-radius:50%; background:var(--main-color); font-size:2.4rem; color:#fff;}
.main-visual-inquiry-box a .txt-box{position: absolute; top:50%; left:4rem; transform:translateY(-50%); display: inline-block; vertical-align: middle; opacity: 0; z-index:1; transition: var(--transition-custom); transition-delay:0s; white-space:nowrap;}
.main-visual-inquiry-box a .txt-box .tit{font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 500; color: #fff;}
.main-visual-inquiry-box a .txt-box .txt{margin-top: 1.4rem; font-size: 1.4rem; letter-spacing: -0.02em; font-weight: 500; color: rgba(255,255,255,0.3);}

/* black */
.main-visual-inquiry-box.black a{background:rgba(0,0,0,0.05);}
.main-visual-inquiry-box.black a .txt-box .tit{color: #000;}
.main-visual-inquiry-box.black a .txt-box .txt{color: rgba(0,0,0,0.3);}

/* fixed */
.main-visual-inquiry-box.fixed{position: fixed; transform:translateY(0rem);}
.main-visual-inquiry-box:not(.bottom-fixed, .sub-inquiry-box){bottom:6rem;}

.main-visual-inquiry-box:not(.bottom-fixed, .sub-inquiry-box).top-fixed{bottom:40px; margin-right:-910px;}
.main-visual-inquiry-box.bottom-fixed{margin-right:-910px;}

/* sub-page */
.sub-inquiry-box.main-visual-inquiry-box{bottom:calc(100vh - var(--sub-visual-height)); transform:translateY(-50%); transition:var(--transition-custom2)}

.sub-inquiry-box.main-visual-inquiry-box.top-fixed,
.sub-inquiry-box.main-visual-inquiry-box.prd-btn{bottom:1rem;}

@media all and (min-width:1280px){
	/* 메인 비주얼 :: 하단 :: 문의버튼 */
	.main-visual-inquiry-box:not(.top-fixed) a.scroll-on,
	.main-visual-inquiry-box:not(.top-fixed) a:hover{padding-left:29rem; transition-delay:0s;}
	.main-visual-inquiry-box:not(.top-fixed) a.scroll-on .txt-box,
	.main-visual-inquiry-box:not(.top-fixed) a:hover .txt-box{opacity:1; transition-delay:0.2s;}
	/* bottom-fixed */
	.main-visual-inquiry-box.bottom-fixed:not(.fixed){bottom:auto;}
	.main-visual-inquiry-box.fixed.bottom-fixed{position: absolute; transition-duration:0s;}
}

@media all and (max-width:1860px){
	.main-visual-inquiry-box{right: var(--area-padding); margin-right: 0;}
	.main-visual-inquiry-box:not(.bottom-fixed, .sub-inquiry-box).top-fixed {margin-right: 0;}
}
@media all and (max-width:1279px){
	.sub-inquiry-box.main-visual-inquiry-box{right: calc(var(--area-padding) + 14rem); bottom:1.5rem !important; transform:translateY(0) !important;}
	.main-visual-inquiry-box a{padding: 0; background:transparent; backdrop-filter:none;}
	.main-visual-inquiry-box a .txt-box{display: none;}
	
	.main-visual-inquiry-box:not(.sub-inquiry-box){right: calc(var(--area-padding) + 14rem); bottom:1.5rem !important; transform:translateY(0) !important;}
	.main-visual-inquiry-box:not(.sub-inquiry-box){opacity: 0;}
	.main-visual-inquiry-box:not(.sub-inquiry-box).top-fixed{opacity:1.0;}
	.main-page .share-top-btn-group{bottom: 1.5rem !important; transform:translateY(0) !important; opacity: 0 !important; transition: var(--transition-custom2);}
	.main-page .share-top-btn-group.top-fixed{opacity:1.0 !important;}
}