@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;}
.main-wrap{overflow: visible !important; background: #000 url("../images/main/main_wrap_bg.png") center bottom contain no-repeat;}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	.main-wrap{background-image: image-set(url("../images/main/main_wrap_bg.webp") type("image/webp"), url("../images/main/main_wrap_bg.png")  type("image/png")); background-color:#000; background-size:contain; background-position: center bottom; background-repeat: no-repeat;}
}

@media all and (max-width:1279px){ 
	
}
@media all and (max-width:800px){ 
	.main-wrap{background-size: 200%; background-position: center 97%;}
	@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
		.main-wrap{background-size: 200%; background-position: center 97%;}
	}
}

/* ********* MAIN Start ********* */
.main-wrap .nav-open-btn-wrap,
.main-wrap #headerInnerWrap{transform: translateY(-100%);}
.main-start.main-wrap .nav-open-btn-wrap,
.main-start.main-wrap #headerInnerWrap{transform: translateY(0);}
.main-start.main-wrap .main-visual-dots{transform: translateY(0); opacity: 1;}
.main-start.main-wrap .main-scroll-wrap .inner{transform: translateX(0); opacity: 1;}


/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:100vh; position:relative; background-color:#000; overflow:hidden;}
.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{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.2);
	transition: all 1.5s cubic-bezier(0.7, 0, 0.3, 1);
	opacity:0.8;filter:Alpha(opacity=80);
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 동영상(유툽) */
.main-visual-item .background-video-wrapper,
.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-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; height:100%; display: block;
	z-index:2;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
	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{font-size:5.8rem; line-height: 1.2; letter-spacing: -0.03em; font-weight:400; color:#fff; font-family: var(--font-family2);}
.main-visual-txt-box .main-visual-txt2{margin-top: 4rem; font-size:2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; color: rgba(255,255,255,0.6);}

/* 메인 비주얼 :: active효과 */
.active-item.main-visual-item .main-visual-img{transform: scale(1.0);}
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	opacity: 1;
}
.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: text-active-animation 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.7s;}
.active-item .main-visual-txt-box .main-visual-txt2.cm-word-split-JS.splitting .char{animation-delay:0.9s;}

@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);
	}
}

/* 메인 비주얼 :: 컨트롤영역 */
.main-visual-custom-box{position: absolute; left:0; bottom: 4rem; width:100%; z-index:9;}
.main-visual-custom-box .area {position: relative;}
.main-visual-dots {padding: 0 1rem; width: 100%; box-sizing: border-box; transform: translateY(5rem); opacity: 0; transition: var(--transition-custom2); }
.main-visual-dots .slick-dots {gap: 1rem; margin: 0; padding: 0; list-style: none; display: flex; align-items: flex-start; width: 100%;}
.main-visual-dots .slick-dots li {margin: 0; padding: 0; flex: 1; position: relative;}
/* dot */
.main-visual-dots .slick-dots li::before {position: absolute; left: -0.5rem; top: 0.1rem; transform: translate(-50%, -50%); width: 1rem; height: 1rem; border-radius: 50%; background: rgba(255,255,255,0.3); content: ""; z-index: 1; transition: background 0.3s;}
.main-visual-dots .slick-dots li:last-child::after {position: absolute; right: -0.5rem; top: 0.1rem; transform: translate(50%, -50%); width: 1rem; height: 1rem; border-radius: 50%; background: rgba(255,255,255,0.3); content: ""; z-index: 1; transition: background 0.3s;}
.main-visual-dots .slick-dots li.slick-active::before,
.main-visual-dots .slick-dots li.slick-active ~ li::before {background: rgba(255,255,255,0.3);}
.main-visual-dots .slick-dots li:has(~ li.slick-active)::before,
.main-visual-dots .slick-dots li.slick-active::before {background: #fff;}
/* process bar */
.main-visual-dots .process-dots {position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0; background: none; border: 0; cursor: pointer; width: 100%; box-sizing: border-box;}
.main-visual-dots .process-dots::before {display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.3); content: "";}
.main-visual-dots .process-dots::after {position: absolute; left: 0; top: 0; width: var(--progress, 0%); height: 2px; background: #fff; content: ""; transition: width .08s linear;}
/* title */
.main-visual-dots .process-dots .process-title {padding-top: 3.5rem; display: block; width: 100%; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: rgba(255,255,255,0.5); white-space: nowrap; text-align: center; transition: color 0.3s;}
.main-visual-dots .slick-active .process-dots .process-title {color: rgba(255,255,255,1);}

/* 메인 비주얼 :: 스크롤아이콘 */ 
.main-scroll-wrap {position: absolute; top: 50%; right: 3.07%; text-align:center; width: 100%; z-index: 1; transform: translateY(-50%);}
.main-scroll-wrap .inner{position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0; transform: translateX(5rem); opacity: 0; transition:var(--transition-custom2);}
.main-scroll-txt{margin-bottom: 1.6rem; writing-mode: vertical-rl; font-size: 10px; letter-spacing: -0.03em; font-weight: 400; color: #fff;}
.main-scroll-icon-cover {position: relative; width: 0.7rem; height: 4rem; background: rgba(255,255,255,0.2); border-radius: 5rem; overflow: hidden;}
.scroll-dot {position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--main-color); animation: scroll-dot-move 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;}

@keyframes scroll-dot-move {
    0% {
        top: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@media all and (max-width:1279px){ 
	
}
@media all and (max-width:800px){ 
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box {padding-top: calc(var(--header-height) + 10rem) !important; align-items: flex-start;}
	.main-visual-txt-box .main-visual-txt1{font-size:4.2rem; line-height: 1.2;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 3.5rem; font-size:1.8rem; line-height: 1.3;}
	/* 메인 비주얼 :: 컨트롤영역 */
	.main-visual-custom-box{bottom: 10rem;}
	.main-visual-dots {padding: 0 1rem;}
	/* dot */
	.main-visual-dots .slick-dots li::before {left: -0.5rem; top: 0.1rem; width: 1rem; height: 1rem;}
	.main-visual-dots .slick-dots li:last-child::after {right: -0.5rem; top: 0.1rem; width: 1rem; height: 1rem;}
	/* process bar */
	.main-visual-dots .process-dots {}
	/* title */
	.main-visual-dots .process-dots .process-title {padding-top: 0rem; position: absolute; top: 3.8rem; width: calc(100vw - (var(--area-padding) * 2)); opacity: 0;}
	.main-visual-dots .slick-dots li:nth-child(1) .process-dots .process-title{left: -1rem;}
	.main-visual-dots .slick-dots li:nth-child(2) .process-dots .process-title{left: calc(-1 * (33.33vw - var(--area-padding) + 1.5rem));}
	.main-visual-dots .slick-dots li:nth-child(3) .process-dots .process-title{left: calc(-1 * (66.66vw - var(--area-padding) - 1rem));}
	.main-visual-dots .slick-active .process-dots .process-title {opacity: 1;}

	/* 메인 비주얼 :: 스크롤아이콘 */ 
	.main-scroll-wrap {display: none;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align: center;}
.main-tit-box .main-tit{font-size:2.2rem; line-height: 1.26; font-weight:600; letter-spacing: -0.03em; color: var(--main-color);}
.main-tit-box .main-sub-tit{display:block; margin-top: 3.4rem; font-size:4.8rem; letter-spacing:-0.02em; font-weight:400; line-height:1.26; color: #fff;}
.main-tit-box .main-sub-tit b{font-weight: inherit; color: var(--main-color);}
.main-tit-box .main-btn{margin-top: 5rem; font-size: 2.6rem; line-height: 1.26; color: #fff; display: inline-block;}
.main-tit-box .main-btn i{opacity: 0.5; transition:var(--transition-custom); transition-property:opacity;}
.main-tit-box .main-btn:hover i{opacity: 1;}
.main-txt-effect svg,
.main-txt-effect.splitting .char{
	opacity:0; position: relative;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* 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);
}

.animated .main-txt-effect svg,
.animated .main-txt-effect.splitting .char{opacity:1.0;transform:translateY(0);}

.main-effect-wrap{overflow:hidden;}
.main-effect-wrap .main-effect-item{ transform:translateY(50%); opacity:0; transition:var(--transition-custom2);}

.animated .main-effect-wrap .main-effect-item{opacity:1; transform:translateY(0);}

@media all and (max-width:1279px){ 
	
}
@media all and (max-width:800px){ 
	.main-tit-box{text-align: center;}
	.main-tit-box .main-tit{font-size:2rem; line-height: 1.26;}
	.main-tit-box .main-sub-tit{margin-top: 3rem; font-size:3.8rem; line-height:1.26;}
	.main-tit-box .main-btn{margin-top: 4rem; font-size: 2.6rem; line-height: 1.26;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(회사소개) -------- */
#mainCompanyCon{height: 400vh; /* padding-top: 33.6rem; padding-bottom: 58.8rem; */ background: #000; position: relative;}

.main-company-pin-wrap {position: sticky; top: 0; width: 100%; height: 100vh; background: #000;}
.main-company-grass {position: absolute; bottom: -26rem; left: 0; width: 100%; height: 66.6rem; background: #000 url("../images/main/main_company_bg.png") center bottom / contain no-repeat; pointer-events: none; z-index: 1;}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	.main-company-grass {background-image: image-set(url("../images/main/main_company_bg.webp") type("image/webp"), url("../images/main/main_company_bg.png")  type("image/png")); background-color:#000; background-size: contain; background-position: center bottom; background-repeat: no-repeat;}
}

#mainCompanyCon .area{position: relative; height: 100vh; padding-top: 16rem; z-index: 2; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}

#mainCompanyCon .main-tit-box{text-align: left;}
#mainCompanyCon .main-tit-box .main-sub-tit{margin-top: 4rem; font-size:4.6rem; letter-spacing:-0.03em; font-weight:500;}

.main-company-txt{padding-top: 3.2rem; width: 50rem;}
.main-company-txt .symbol{height: 10.3rem; display: block;}
.main-company-txt .symbol svg{height: 100%;}
.main-company-txt .txt01{margin-top: 10rem; font-size: 2.2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: #fff;}
.main-company-txt .txt01 b{font-weight: inherit; color: var(--main-color);}
.main-company-txt .txt02{margin-top: 5.4rem; font-size: 2rem; line-height: 1.6; letter-spacing: -0.05em; color: rgba(255,255,255,0.7);}

#mainCompanyCon .main-tit-box {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#mainCompanyCon .main-tit-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#mainCompanyCon .main-tit-box.is-visible .main-effect-wrap .main-effect-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.main-company-txt {
  padding-top: 3.2rem;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-company-txt.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.main-company-txt .symbol .cm-logo-svg path {
  fill: transparent;
  stroke-width: 0.5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1),
    fill 0.4s ease;
}
.main-company-txt.is-visible .symbol .cm-logo-svg path {
  stroke-dashoffset: 0;
}

@media all and (max-width:1279px){ 
	
}
@media all and (max-width:800px){ 
	#mainCompanyCon{height: 400vh;}

	.main-company-pin-wrap {height: 100vh;}
	.main-company-grass {bottom: -14rem; height: 23rem; height: 35rem; background-size: cover; background-position-x: 2%;}
	@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
		.main-company-grass {background-size: cover; background-position-x: 2%;}
	}

	#mainCompanyCon .area{position: relative; height: auto; padding-top: 16rem; display: block;}

	#mainCompanyCon .main-tit-box{text-align: center; width: 100%;}
	#mainCompanyCon .main-tit-box .main-sub-tit{margin-top: 3rem; font-size:3.8rem;}

	.main-company-txt{padding-top: 4rem; width: 100%; text-align: center;}
	.main-company-txt .symbol{height: 5rem;}
	.main-company-txt .txt01{margin-top: 5rem; font-size: 2rem; line-height: 1.3;}
	.main-company-txt .txt02{margin-top: 3rem; font-size: 1.6rem; line-height: 1.6;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2, 3 영역 구분 -------- */
#mainBusinessProductContainer{background: #000 url("../images/main/main_business_bg.png") center bottom contain no-repeat;         background-blend-mode: luminosity;}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	/* #mainBusinessProductContainer{background-image: image-set(url("../images/main/main_business_bg.webp") type("image/webp"), url("../images/main/main_business_bg.png")  type("image/png")); background-color:#000; background-blend-mode: luminosity; background-size:contain; background-position: center bottom; background-repeat: no-repeat;} */
	#mainBusinessProductContainer{background-image: image-set(url("../images/main/main_business_bg.png")  type("image/png")); background-color:#000; background-blend-mode: luminosity; background-size:contain; background-position: center bottom; background-repeat: no-repeat;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(사업영역) -------- */
#mainBusinessCon{padding: 36rem 0 11rem;}

#mainBusinessPinArea {margin-top: 8rem; height: 500vh;}
#mainBusinessSticky {position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;  align-items: flex-start; justify-content: flex-start;/* justify-content: center; align-items: center; */}

.main-business-list {display: flex; flex-direction: column; gap: 1rem; width: 100%; height: calc(60rem + 8rem * 4 + 1rem * 4 - 2rem); padding: 0 4rem; box-sizing: border-box;}
	
.main-business-item {/* width: 130rem; */ width: 86.66%; height: 8rem; margin: 0 auto; position: relative; flex-shrink: 0; transition: width 0.65s cubic-bezier(0.4,0,0.2,1);}
.main-business-bg {position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 1.7rem; overflow: hidden; transition: filter 0.5s ease;}

.main-business-item.is-active {width: 100%;}
.main-business-item.is-active .main-business-bg { filter: brightness(0.8); }
.main-business-item.is-inactive .main-business-bg { filter: brightness(0.4) saturate(0.4); }

.main-business-inner {padding: 0 10rem; position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; overflow: hidden;}
.main-business-item.is-active .main-business-inner {padding-top: 8rem; padding-bottom: 8rem; justify-content: flex-start;}

.main-business-cate {margin-bottom: 14rem; font-size: 1.8rem; font-weight: 600; color: var(--main-color); font-family: var(--font-family2); opacity: 0; transform: translateY(8px);}
.main-business-tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; line-height: 1.2; font-weight: 600; color: rgba(255, 255, 255, 0.6); text-align: center; font-family: var(--font-family2); transition: font-size 0.6s cubic-bezier(0.4,0,0.2,1), color 0.5s ease, top 0.5s ease;}
.main-business-item.is-active .main-business-tit {position: relative; top: 0; left: 0; transform: translate(0, 0); font-size: 6.4rem; font-weight: 400; color: #fff; text-align: left;}
.main-business-txt {margin-top: 4rem; font-size: 1.8rem; line-height: 1.66; color: rgba(255, 255, 255, 0.6); opacity: 0; transform: translateY(10px);}
.main-business-btn {margin-top: 4rem; display: inline-block;  font-size: 2.6rem; font-weight: 400; opacity: 0; transform: translateY(10px);}
.main-business-btn i{color: rgba(255, 255, 255, 0.6); transition:var(--transition-custom); transition-property:color, transform;}
.main-business-btn:hover i{transform: translateX(1rem); color: var(--main-color);}

@media all and (min-width:1280px) and (max-height:750px){ 
	.main-business-cate {margin-bottom: 7rem;}
	.main-business-item{max-height: calc(100% - 46rem);} 
}
@media all and (max-width:1279px){ 
	#mainBusinessSticky {top: var(--header-height);}
	
	.main-business-list{height: calc(48rem + 6rem * 4 + 1rem * 4 - 2rem); padding: 0;}
	.main-business-item {width: 100%; height: 6rem;}
	.main-business-inner {padding: 0 6rem;}
	.main-business-item.is-active .main-business-inner {padding-top: 6rem; padding-bottom: 5rem;}
	
	.main-business-cate {margin-bottom: 7rem;}
	.main-business-item.is-active .main-business-tit {font-size: 5.1rem;}
	.main-business-txt {margin-top: 2rem;}
}
@media all and (max-width:800px){ 
	#mainBusinessCon{padding: 22rem 0 11rem;}

	#mainBusinessPinArea {margin-top: 5rem; margin-top: 0;  height: 500vh;}
	#mainBusinessSticky {top: 0; align-items: center; justify-content: center; height: 100vh;}

	.main-business-list {gap: 1rem; height: calc(34rem + 5rem * 4 + 1rem * 4 - 2rem); padding: 0;}
		
	.main-business-item {width: 100%; height: 5rem;}
	.main-business-bg {border-radius: 1.5rem;}

	.main-business-inner {padding: 0 3rem;}
	.main-business-item.is-active .main-business-inner {padding-top: 3rem; padding-bottom: 3rem;}

	.main-business-cate {margin-bottom: 7rem; font-size: 1.4rem;}
	.main-business-tit {font-size: 1.6rem; line-height: 1.2;}
	.main-business-item.is-active .main-business-tit {font-size: 3rem;}
	.main-business-txt {margin-top: 2.5rem; font-size: 1.4rem; line-height: 1.66;}
	.main-business-btn {margin-top: 2.5rem; font-size: 2rem; line-height: 2.6rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(제품소개) -------- */
#mainProductCon{padding: 11rem 0 5.5rem;}
.cm-uneekor-svg{position: relative; top: -0.4rem; margin-left: 0.5rem; margin-right: 0.5rem; height: 4.2rem;}

.main-product-box{margin-top: 8rem; margin-left: auto; margin-right: auto; position: relative; width: 100%; border-radius: 0; overflow: hidden; aspect-ratio: 1920 / 960;/* height: 0; padding-top: 50%; */}
.main-product-box:before{position: absolute; inset: 0; width: 100%; height: 100%; content: ''; opacity: 0; transition:var(--transition-custom); transition-property: opacity; z-index: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.85+0,0.15+100 */
background: linear-gradient(170deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.85) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-product-box:after{position: absolute; inset: 0; width: 100%; height: 100%; content: ''; opacity: 0; transition:var(--transition-custom); transition-property: opacity;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.85+0,0.15+100 */
background: linear-gradient(150deg,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-product-box.top-active:before{opacity: 1;}
.main-product-box.bottom-active:after{opacity: 1;}

.main-product-link-m{display: none;}

/* 이미지 */
.main-product-bg{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none;}
.main-product-hover-cover{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: transparent;}

/* 빛 SVG */
.main-product-light-svg {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;}

/* dot */
.main-product-dot-anchor {position: absolute; width: 0; height: 0; width: 5rem; height: 5rem; cursor: pointer; transition: opacity 0.35s ease; z-index: 30; transform: translate(-2.5rem, -2.5rem);}
.main-product-dot-anchor .dot {position: absolute; top: 50%; left: 50%; width: 1.4rem; height: 1.4rem; background: var(--main-color); border-radius: 50%; transform: translate(-50%, -50%); z-index: 10;}
.main-product-dot-anchor .main-product-dot-pulse {position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid rgba(255,218,0,1); transform: translate(-50%, -50%); box-sizing: border-box; animation: pulse 2s ease-out infinite; pointer-events: none;}
.main-product-dot-anchor .main-product-dot-pulse + .main-product-dot-pulse {animation-delay:0.6s;}

@keyframes pulse {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.2); opacity: 0; }
}

.main-product-label-group {position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.35s ease 0.3s; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; white-space: nowrap; z-index: 40;}
.main-product-label-group.visible { opacity: 1; }
.label-type {font-size: 3.6rem; font-weight: 600; line-height: 1; color: #fff; font-family: var(--font-family2);}
.label-badge {padding: 0 2.2rem; min-width: 18rem; height: 5rem; background: var(--main-color); border-radius: 5rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; line-height: 1.3; color: #222; font-family: var(--font-family2); text-align: center;}
.main-product-connector {position: absolute; width: 1px; background: rgba(245,200,0,0.7); pointer-events: none; opacity: 0; transition: opacity 0.25s ease 0.3s; z-index: 40;}
.main-product-connector.visible { opacity: 1; }

.main-product-dot-anchor1{left: 37.9%; top: 14.5%;}
.main-product-dot-anchor2{left: 42.2%; top: 22.8%;}
.main-product-dot-anchor3{left: 61.3%; top: 19.8%;}
.main-product-dot-anchor4{left: 64.1%; top: 62.7%;}
.main-product-dot-anchor5{left: 56.2%; top: 70.2%;}
.main-product-dot-anchor6{left: 50.9%; top: 77%;}

.main-product-label-group1{left: 12.5rem; bottom: 0rem;}
.main-product-label-group2{left: 12.5rem; bottom: 0rem;}
.main-product-label-group3{right: 12.5rem; bottom: 0rem;}
.main-product-label-group4{right: 9.5rem; bottom: 7.5rem;}
.main-product-label-group5{right: 9.5rem; bottom: 7.5rem;}
.main-product-label-group6{right: 9.5rem; bottom: 7.5rem;}

.main-product-connector1{left: 2.5rem; bottom: 50%; width: 10rem; height:1px;}
.main-product-connector2{left:2.5rem; bottom: 50%; width: 10rem; height:1px;}
.main-product-connector3{right: 2.5rem; bottom: 50%; width: 10rem; height:1px;}
.main-product-connector4{right: 1.5rem; bottom: 6.5rem; width: 10rem; height:1px; transform: rotate(-135deg);}
.main-product-connector5{right: 1.5rem; bottom: 6.5rem; width: 10rem; height:1px; transform: rotate(-135deg);}
.main-product-connector6{right: 1.5rem; bottom: 6.5rem; width: 10rem; height:1px; transform: rotate(-135deg);}

/* hover */
.main-product-box.dot-hovered .main-product-dot-anchor {
  opacity: 0;
  pointer-events: none;
}
.main-product-box.dot-hovered .main-product-dot-anchor.is-active {
  opacity: 1;
  pointer-events: auto;
}

@media all and (max-width:1279px){ 
	.main-product-link-m{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; display: block;}
}
@media all and (max-width:800px){ 
	#mainProductCon{padding: 11rem 0 5.5rem; padding-top: 0;}
	.cm-uneekor-svg{position: relative; top: -0.4rem; margin-left: 0.5rem; margin-right: 0.5rem; height: 4.2rem;}

	.main-product-box{margin-top: 8rem; aspect-ratio: 412 / 390; clip-path: none !important;}
	.main-product-box.top-active:before{opacity: 1;}
	.main-product-box.bottom-active:after{opacity: 1;}

	/* 이미지 */
	.main-product-bg{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none;}
	.main-product-hover-cover{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: transparent;}

	/* 빛 SVG */
	.main-product-light-svg {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;}

	/* dot */
	.main-product-dot-anchor {width: 2.5rem; height: 2.5rem; transform: translate(-1.25rem, -1.25rem);}
	.main-product-dot-anchor .dot {width: 0.7rem; height: 0.7rem;}
	.main-product-dot-anchor .main-product-dot-pulse {width: 2.5rem; height: 2.5rem;}

	.main-product-label-group {gap: 1rem; z-index: 41;}
	.label-type {font-size: 2.4rem;}
	.label-badge {padding: 0 1.5rem; min-width: 11rem; height: 3.5rem; border-radius: 3.5rem; font-size: 1.8rem; line-height: 1.3;}
	
	.main-product-dot-anchor1{left: 26.9%; top: 14.5%;}
	.main-product-dot-anchor2{left: 35.2%; top: 22.8%;}
	.main-product-dot-anchor3{left: 71.3%; top: 19.8%;}
	.main-product-dot-anchor4{left: 76.1%; top: 62.7%;}
	.main-product-dot-anchor5{left: 62%; top: 70.2%;}
	.main-product-dot-anchor6{left: 51.7%; top: 77%;}

	.main-product-label-group1{left: 8.5rem; bottom: -1rem;}
	.main-product-label-group2{left: 8.5rem; bottom: -1rem;}
	.main-product-label-group3{right: 8.5rem; bottom: -1rem;}
	.main-product-label-group4{right: 5.5rem; bottom: 3.5rem;}
	.main-product-label-group5{right: 5.5rem; bottom: 3.5rem;}
	.main-product-label-group6{right: 5.5rem; bottom: 3.5rem;}

	.main-product-connector1{left: 2.5rem; bottom: 50%; width: 6rem; height:1px;}
	.main-product-connector2{left:2.5rem; bottom: 50%; width: 6rem; height:1px;}
	.main-product-connector3{right: 2.5rem; bottom: 50%; width: 6rem; height:1px;}
	.main-product-connector4{right: 1.5rem; bottom: 4rem; width: 6rem; height:1px; transform: rotate(-135deg);}
	.main-product-connector5{right: 1.5rem; bottom: 4rem; width: 6rem; height:1px; transform: rotate(-135deg);}
	.main-product-connector6{right: 1.5rem; bottom: 4rem; width: 6rem; height:1px; transform: rotate(-135deg);}
}



/* -------- 메인 컨텐츠 :: 컨텐츠4(뉴스룸) -------- */
#mainCustomerCon{padding: 12.5rem 0 11rem;}

.main-customer-con{margin-top: 8rem; display: flex; flex-wrap:wrap; justify-content: space-between;}
.main-customer-title{}
.main-customer-title .category{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: var(--main-color); display: block;}
.main-customer-title .tit{margin-top: 2rem; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-customer-title.has-btn{position: relative; padding-right: 16rem;}
.main-customer-title.has-btn .btn{position: absolute; bottom: 0; right: 0; padding: 0 1.5rem 0 2rem; width: 15rem; height: 4.5rem; background-color: #1C1C1C; border-radius: 4.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-customer-title.has-btn .btn span{font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; color: #fff; display: flex; align-items: center; opacity: 0.6; transition:var(--transition-custom); transition-property: color, opacity;}
.main-customer-title.has-btn .btn span i{margin-right: 0.5rem; position: relative; top: -0.1rem; font-weight: 400;}
.main-customer-title.has-btn .btn > i{font-size: 1.8rem; color: #fff; opacity: 0.6; transition:var(--transition-custom); transition-property: color, opacity;}
.main-customer-title.has-btn .btn:hover span,
.main-customer-title.has-btn .btn:hover > i{color: #000; opacity: 1;}
.main-customer-title.has-btn .btn{transition: all 1s; background: #1C1C1C; background: linear-gradient(-400deg,rgba(28,28,28,1) 0%, rgba(28,28,28,1) 25%, rgba(255,218,0,1) 45%, rgba(255,218,0,1) 100%); background-size: 500% 500%; background-position: 100% 100%;}
.main-customer-title.has-btn .btn span,
.main-customer-title.has-btn .btn > i{position: relative; z-index: 1;}

@media all and (min-width:801px){
    .main-customer-title.has-btn .btn:hover{background-position: 0% 25%;}
}


/* 영상 영역 */
.main-video-box{width: 46.15%;}
.main-background-video-wrapper{position:relative; overflow:hidden; height:0; width:100%; height: 0; padding-top: 56.66%; background-color:#000; border-radius: 1.5rem; overflow: hidden;}
.main-background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-background-video-thum{position:absolute; top:0; left:0px; width:100%; height:100%; opacity:1;filter:Alpha(opacity=100); transition: opacity 3s 0.2s}
.main-background-video iframe{width: 100%; height: calc(100% + 300px); 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-background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}
.main-background-video.start .main-background-video-thum{opacity:0;filter:Alpha(opacity=0);}
.main-video-box .main-customer-title{margin-top: 2.5rem;}

/* 뉴스 영역 */
.main-news-box{width: 46.15%;}
.main-news-list{width: 100%;}
.main-news-item{width: 100%; border-bottom: 1px solid rgba(255,255,255,0.15);}
.main-news-item a{padding: 3.5rem 0; width: 100%; display: flex; flex-wrap:wrap; }
.main-news-txt{width: 100%; display: flex; flex-wrap:wrap; align-items: center;}
.main-news-txt .date{width: 11rem; padding-right: 1rem; font-size: 1.4rem; letter-spacing: -0.03em; font-weight: 500; color: rgba(255,255,255,0.5); box-sizing: border-box; transition:var(--transition-custom); transition-property:color;}
.main-news-txt .tit{width: calc(100% - 11rem); font-size: 1.5rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:var(--transition-custom); transition-property:color;}
.main-news-item.has-img a{padding: 3rem 0; align-items: center; justify-content: space-between;}
.main-news-item.has-img .main-news-img{width: 41.66%;}
.main-news-item.has-img .main-news-img span{width: 100%; height: 0; padding-top: 60%; position: relative; border-radius: 1.5rem; overflow: hidden; display: block;}
.main-news-item.has-img .main-news-img span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition:var(--transition-custom); transition-property:transform;}
.main-news-item.has-img .main-news-txt{padding-left: 6.66%; width: 58.34%; box-sizing: border-box; flex-direction: column;}
.main-news-item.has-img .main-news-txt .date{width: 100%; padding-right: 0;}
.main-news-item.has-img .main-news-txt .tit{margin-top: 2.5rem; width: 100%; height: 3.2em; font-size: 2rem; line-height: 1.6; color: #fff;     white-space: normal; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-item.new .main-news-txt .date:after{margin-left: 0.5rem; font-size: 1.6rem; font-weight: 400; color: var(--main-color); content: "\e9a8"; font-family: xeicon;}
.main-news-item a:hover .main-news-txt .date,
.main-news-item a:hover .main-news-txt .tit{color: #fff;}
.main-news-item.has-img a:hover .main-news-img span img{transform: scale(1.1) rotate(0.002deg);}

@media all and (max-width:1279px){ 
	
}
@media all and (max-width:800px){ 
	#mainCustomerCon{padding: 10rem 0 8rem;}

	.main-customer-con{margin-top: 5rem; display: block;}
	.main-customer-title{margin-top: 3rem; text-align: center;}
	.main-customer-title .category{font-size: 1.8rem; line-height: 1.3;}
	.main-customer-title .tit{margin-top: 2rem; font-size: 2.4rem; line-height: 1.3;}
	.main-customer-title.has-btn{padding-right: 0;}
	.main-customer-title.has-btn .btn{margin-top: 4rem; position: static; padding: 0 1.5rem 0 2rem; width: 15rem; height: 4.5rem; display: inline-flex; background: #1C1C1C;}
	.main-customer-title.has-btn .btn span{font-size: 1.5rem;}
	.main-customer-title.has-btn .btn span i{margin-right: 0.5rem; top: -0.1rem;}
	.main-customer-title.has-btn .btn > i{font-size: 1.8rem;}

	/* 영상 영역 */
	.main-video-box{width: 100%;}
	.main-video-box .main-customer-title{margin-top: 2.5rem;}

	/* 뉴스 영역 */
	.main-news-box{margin-top: 6rem; width: 100%;}
	.main-news-item a{padding: 2.5rem 0; width: 100%;}
	.main-news-txt{width: 100%;}
	.main-news-txt .date{width: 11rem; padding-right: 1rem; font-size: 1.4rem;}
	.main-news-txt .tit{width: calc(100% - 11rem); font-size: 1.5rem; line-height: 1.3;}
	.main-news-item.has-img a{padding: 2.5rem 0; display: block;}
	.main-news-item.has-img .main-news-img{width: 100%;}
	.main-news-item.has-img .main-news-txt{margin-top: 2.5rem; padding-left: 0; width: 100%;}
	.main-news-item.has-img .main-news-txt .date{width: 100%; padding-right: 0;}
	.main-news-item.has-img .main-news-txt .tit{margin-top: 2.5rem; width: 100%; height: 3.2em; font-size: 2rem; line-height: 1.6; color: #fff;     white-space: normal; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main-news-item.new .main-news-txt .date:after{margin-left: 0.5rem; font-size: 1.6rem; font-weight: 400; color: var(--main-color); content: "\e9a8"; font-family: xeicon;}
}


/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}
.mouse-pointer-txt{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}	
.is-mobile .mouse-pointer{visibility: hidden; opacity: 0;}
.is-mobile .mouse-pointer-txt{visibility: hidden; opacity: 0;}
/* circle */
.mouse-pointer .pointer-circle{position:absolute; top: calc(50% - 1.2rem); left: calc(50% - 1.2rem); width:10rem; height:10rem; transform:translate(-50%,-50%) scale(0); opacity:0; transition:var(--transition-custom); border-radius:50%; border:1px solid rgba(255,255,255,0.2);}
.mouse-pointer.more .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity: 1; backdrop-filter: blur(5px);}
/* text */
.mouse-pointer-txt .pointer-more{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:100%; height:100%; transition:var(--transition-custom);  transform:translate(-50%,-50%); }
.mouse-pointer-txt p{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:var(--transition-custom); opacity:0; visibility: hidden; font-size: 1.8rem; color:#fff; font-weight:500; letter-spacing: -0.01em;}
.mouse-pointer-txt .hover-inner{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:var(--transition-custom); opacity:0; visibility: hidden;}

.mouse-pointer-txt .hover-inner .dot {position: absolute; width: 0; height: 0; width: 5rem; height: 5rem; cursor: pointer; transition: opacity 0.35s ease; transform: translate(-50%, -50%);}
.mouse-pointer-txt .hover-inner .dot i {position: absolute; top: 50%; left: 50%; font-size: 1.6rem; color: var(--main-color); transform: translate(-50%, -50%);}
.mouse-pointer-txt .hover-inner .dot span {position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid rgba(255,218,0,1); transform: translate(-50%, -50%); box-sizing: border-box; animation: pulse 2s ease-out infinite; pointer-events: none;}
.mouse-pointer-txt .hover-inner .dot span + span {animation-delay:0.6s;}
.mouse-pointer-txt .hover-inner svg{position: relative; height: 2.4rem;}

.mouse-pointer-txt.hover .hover-inner,
.mouse-pointer-txt.hover .hover-txt{visibility: visible; opacity: 1;}

@media all and (max-width:1279px){ 
	.mouse-pointer{visibility: hidden; opacity: 0;}
	.mouse-pointer-txt{visibility: hidden; opacity: 0;}
}