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

/* ******************  메인 레이아웃 ********************** */
.main-page #header{position: fixed; transition:var(--transition-custom2);}
.main-page #header:before{position: absolute; content:''; width:100%; height:var(--header-height); background:rgba(0, 0, 0, 0.35); backdrop-filter: blur(3rem); top:calc(-1 * (var(--header-height) + var(--header-top))); left:0; transition:var(--transition-custom2);}
.main-page #header.top-fixed{top:0;}
.main-page.main-active #header.top-fixed:before{top:0;}

@media all and (min-width:1281px){
	.main-page #header #headerInner{transform:translateY(-50px); opacity:0; transition:var(--transition-custom2); transition-delay:0.2s;}
	.main-page #header #gnb{transform:translate(-50%, -50px); opacity:0; transition:var(--transition-custom2); transition-delay:0.2s;}

	.main-page.main-start #header #headerInner{transform:translateY(0); opacity:1;}
	.main-page.main-active #header #gnb{transform:translate(-50%, 0); opacity:1;}

	.main-page.main-active #header.main-scroll-down{transform:translateY(-100%);}
}


.main-page #footer{background:transparent; border-top:1px solid #fff;}

/* ******************  메인 인트로 ********************** */
#mainIntro{position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:98; background:#000;}
#mainIntro .main-intro-bg{position: absolute; top:50%; left:50%; transform:Translate(-50%, -50%); width: 100vw; height: 100vh; pointer-events:none; transition:all 2s cubic-bezier(0.4, 0, 0.2, 1)}
#mainIntro .main-intro-bg img{width:100%; height:100%; object-fit:cover;}
#mainIntro .main-intro-circle{position: absolute; top:50%; left:50%; transform:Translate(-50%, -50%); pointer-events:none; opacity:0;}
#mainIntro .main-intro-circle img{width:100%; height:100%;}
#mainIntro .main-intro-circle.circle-txt{width:54.4rem; height:54.4rem;}
#mainIntro .main-intro-circle.circle-img{width:42.8rem; height:42.8rem;}
#mainIntro .main-intro-txt{position: absolute; top:50%; left:50%; transform:Translate(-50%, -50%) scale(1.2); opacity:0;}
#mainIntro .main-intro-txt svg{display: block; position: relative; width:auto; height:7rem; overflow:visible;}
#mainIntro .main-intro-txt svg *{fill:#fff; transition:all 2s cubic-bezier(0.4, 0, 0.2, 1)}
/* main-start */
.main-start #mainIntro .main-intro-circle.circle-txt{animation: introCircleBefore 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-start #mainIntro .main-intro-circle.circle-img{animation: introCircleBefore2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-start #mainIntro .main-intro-txt{animation: introSvgAni 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
/* main-start - after */
.main-start #mainIntro.after-effect .main-intro-bg{transform:Translate(-50%, -50%) scale(1.1); }
.main-start #mainIntro.after-effect .main-intro-circle.circle-txt{animation: introCircleAfter 1.8s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-start #mainIntro.after-effect .circle-img.circle-img{animation: introCircleAfter2 1.8s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-start #mainIntro.after-effect .main-intro-txt{animation: introSvgAniAfter 2.3s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls01{transform:translateX(-70rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls02{transform:translateX(-50rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls03{transform:translateX(-30rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls04{transform:translateX(-14rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls05{transform:translateX(1.5rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls06{transform:translateX(12rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls07{transform:translateX(30rem)}
.main-start #mainIntro.after-effect .main-intro-txt svg .intro-cls08{transform:translateX(45rem)}

@keyframes introCircleBefore {
	from { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) rotate(0deg); }
	to { opacity:1.0;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) rotate(60deg); }
}
@keyframes introCircleAfter {
	from { opacity:1.0;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) rotate(60deg); }
	to { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) rotate(-90deg) scale(2); }
}
@keyframes introCircleBefore2 {
	from { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) rotate(0deg); }
	to { opacity:1.0;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) rotate(-90deg); }
}
@keyframes introCircleAfter2 {
	from { opacity:1.0;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) rotate(-90deg); }
	to { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) rotate(90deg) scale(2); }
}
@keyframes introSvgAni {
	0% { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) scale(1.5); }
	100% { opacity:1;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) scale(0.9); }
}
@keyframes introSvgAniAfter {
	0% { opacity:1;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) scale(0.9); }
	100% { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) scale(1.5); }
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); 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-item{position:relative;}
/* 메인 비주얼 :: 동영상 */
.main-visual-item .main-visual-video-con{position: relative; width:100%; height:100%;}
.main-visual-item .main-visual-video-con 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-item .main-visual-video-con .progress-bar{position: absolute; bottom:0; left:0; width:102%; height:1rem; background:rgba(32,43,55,0.5); backdrop-filter: blur(20px); z-index:9;}
.main-visual-item .main-visual-video-con .progress-bar .progress-fill{position: absolute; bottom:0; left:0; height:100%; background:var(--main-color); transition:width 0.2s;}
/* 메인 비주얼 :: 이미지 */
.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.area-box{
	display:flex;
	align-items: flex-end;
	height:100%;
	padding-bottom:13rem;
	box-sizing:border-box;
}
/* .main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
} */
.main-visual-txt-box .main-visual-txt1{font-size:7.8rem; font-weight:300; letter-spacing:-0.015em; color:#fff; margin-bottom:2.5rem; transition-delay:0s;}
.main-visual-txt-box .main-visual-txt2{font-size:2rem; letter-spacing:-0.015em; font-weight:500; color:#fff; transition-delay:0s;}
.cm-main-effect .main-visual-txt1.cm-effect{transition:all 0.8s 0s ease-in-out;}
.cm-main-effect .main-visual-txt2.cm-effect{transition:all 0.8s 0s ease-in-out;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.main-active .active-item .cm-main-effect .main-visual-txt1.cm-effect{transform:translateY(0%); opacity:1; transition-delay:0.1s;}
.main-active .active-item .cm-main-effect .main-visual-txt2.cm-effect{transform:translateY(0%); opacity:1; transition-delay:0.2s;}


/* 메인 비주얼 :: 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(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-fixed-inner{display: flex ; justify-content: flex-end; align-items: flex-end; width: 100%;}
/* 메인 비주얼 :: 화살표 */
.main-visual-arrows{display: flex; align-items:center; }
.main-visual-arrows .slick-arrow{position: relative; z-index:9; font-size:4rem; color:#fff; opacity:0.3; transition:var(--transition-custom2); transition-delay:0.4s; transform:translateX(50px); opacity:0;}
.main-visual-arrows .slick-arrow.slick-prev{margin-right:1rem;}
.main-visual-arrows .slick-arrow.slick-next{}
.main-visual-arrows .slick-arrow:hover{opacity:1;}

.main-active .main-visual-arrows .slick-arrow{transform:translateX(0); opacity:1;}
/* 메인 비주얼 :: 수상 */
.main-visual-awards{display: flex; flex-direction:column; margin-left:4rem;}
.main-visual-awards span{display: block; margin:0.6rem 0; transition:var(--transition-custom2); transition-delay:0.4s; transform:translateX(50px); opacity:0;}

.main-active .main-visual-awards span{transform:translateX(0); opacity:1;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:center;}
.main-tit-box .main-tit{color:#040404; font-size:40px; font-weight:300; }
.main-tit-box .main-tit strong{font-weight:600;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#aaa; font-size:15px; letter-spacing:-0.75px; font-weight:300; line-height:1.5; }
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	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);
}

.cm-btn{display: flex !important; justify-content:space-between; align-items:center; padding:1.5rem 2rem 1.5rem 3rem; box-sizing:border-box; background:var(--main-color); border-radius:3px; width:24rem; height:5.8rem; transition:var(--transition-custom); color:#fff;}
.cm-btn .btn-txt{font-size:1.8rem; line-height:1.44; letter-spacing:-0.015em; font-weight:500;}
.cm-btn i{font-size:2.2rem; }

.cm-btn:hover{background:#fff; color:var(--main-color);}

/* 메인 배경 */
#mainContent{background:no-repeat center; background-size:cover; background-color:#000a0c; background-image:url('/images/main/main_bg_wrap.jpg');}

/* 메인 효과 */
.cm-main-effect{overflow:hidden; position: relative;}
.cm-main-effect .cm-effect{display: block; transform:translateY(100px); opacity:0; transition:all 1.2s ease-in-out;}
.animated .cm-main-effect .cm-effect{transform:translateY(0%); opacity:1;}
.animated .cm-main-effect .cm-effect.delay04{transition-delay:0.4s;}

.cm-main-effect2{white-space:nowrap; letter-spacing:0.25em !important; opacity:0; transition:all 1.2s ease-in-out;}
.animated .cm-main-effect2{white-space:nowrap; letter-spacing:-0.015em !important; opacity:1;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(About) -------- */
#mainContent1{position: relative; height:120rem;}
#mainContent1 .bg{position: absolute; top:50%; left:50%; transform:Translate(-50%, -50%); width:100%; height:100%;}
#mainContent1 .bg img{height:100%; transform:translateX(0px); transition:all 6s ease-in-out;}
#mainContent1 .area{position: relative; height:100%; z-index:1;}
.main-about-tit-box{display: flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; height:100%;}
.main-about-tit-box .tit-en{display: block; font-size:2.1rem; line-height:1.5; /* letter-spacing:-0.015em; */ color:var(--main-color); font-weight:400; margin-bottom:2rem; transition-delay:0s}
.main-about-tit-box .tit{font-size:9.2rem; line-height:1.04; /* letter-spacing:-0.015em; */ color:#fff; font-weight:300; margin-bottom:3rem; transition-delay:0.2s}
.main-about-tit-box .txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.05em; color:#fff; font-weight:500; margin-bottom:7rem;}
.main-about-tit-box .txt .cm-effect{transition-delay:0.2s}
.main-about-tit-box .btn-effect{transition-delay:0.4s}

/* animated */
#mainContent1 .bg.animated img{transform:TranslateX(-50px);}



/* -------- 메인 컨텐츠 :: 컨텐츠2(Solution) -------- */
#mainContent2{position: relative; height:45.833vw; min-height:80rem;}
.main-solution-wrap{display: flex; width:100%; height:100%; justify-content:space-between;}
/* Solution :: 탭 드롭다운 */
.main-solution-wrap .main-drop-open-btn-style{display: none;}

/* Solution :: 좌측컨텐츠 */
.main-solution-wrap .left-box{position: relative; width:calc(66.66% - 1rem);}
/* Solution :: 좌측컨텐츠 :: 배경 */
.main-solution-wrap .left-box .bg{position: absolute; top:0; left:0; width:100%; height:100%;}
.main-solution-wrap .left-box .bg .bg-list{position: relative; width:100%; height:100%;}
.main-solution-wrap .left-box .bg .bg-list .list-item{position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:var(--transition-custom);}
.main-solution-wrap .left-box .bg .bg-list .list-item img{width:100%; height:100%; object-fit:cover;}
/* active */
.main-solution-wrap .left-box .bg .bg-list .list-item.active{opacity:1;}

/* Solution :: 좌측컨텐츠 :: 텍스트 */
.solution-area-box{max-width:910px; margin:auto; padding:8.33vw 0;}
.solution-tit-box{position: relative;}
.solution-tit-box .tit{font-size:11.2rem; line-height:1; letter-spacing:-0.015em; color:#fff; font-weight:300;}

.solution-tit-box .solution-left-txt-JS{position: relative; height:8rem;}
.solution-tit-box .solution-left-txt-JS .txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.05em; color:#fff; font-weight:500; margin-top:2rem; position: absolute; opacity:0; transition:all 1.2s 0.2s ease-in-out, opacity 0.4s 0s ease-in-out;}
/* active */
.solution-tit-box .solution-left-txt-JS .txt.active{opacity:1;}

/* Solution :: 우측컨텐츠 */
.main-solution-wrap .right-box{position: relative; width:33.33%; background:#eaeaea;}
.main-solution-wrap .right-box:before{position: absolute; content:''; top:50%; left:0; transform:translate(-50%, -50%); width:18rem; height:18rem; border-radius:50%; background:#eaeaea;}
.main-solution-wrap .right-box:after{position: absolute; content:''; top:50%; left:0; transform:translate(-50%, -50%); width:15.6rem; height:15.6rem; border-radius:50%; background:var(--main-color);}
.main-solution-wrap .right-box .right-item{position: absolute; width:100%; height:100%; top:0; left:0; opacity:0; transition:var(--transition-custom); pointer-events:none; z-index:1;}
.main-solution-wrap .right-box .right-item .cm-tab-container-JS,
.main-solution-wrap .right-box .right-item .cm-tab-container-JS .sub-tab-content-style{height:100%;}
.main-solution-wrap .right-box .right-item.active{opacity:1; pointer-events:auto;}


.main-solution-wrap.animated .right-box .right-item .solution-tab-con .cm-main-effect .cm-effect{transform:translateY(100px); opacity:0;}
.main-solution-wrap.animated .right-box .right-item.active .solution-tab-con.on .cm-main-effect .cm-effect{transform:translateY(0%); opacity:1;}


/* Solution :: 우측컨텐츠 :: 탭 */
.main-solution-tab-style{position: absolute; z-index:9; inset:auto 5rem 5rem; width:calc(100% - 10rem);}
.main-solution-tab-style .main-tab-list-style{background:#fff; border-radius:3px; padding:0.7rem 10px; box-sizing:border-box;}
.main-solution-tab-style .main-tab-list-style ul{position: relative; display: flex;}
.main-solution-tab-style .main-tab-list-style ul li{width:100%;}
.main-solution-tab-style .main-tab-list-style ul li a{display: flex; align-items:center; justify-content:center; border-radius:3px; height:4.4rem; font-size:1.8rem; letter-spacing:-0.005em; color:#000; transition:var(--transition-custom); text-align:center;}
.main-solution-tab-style .main-tab-list-style ul li a em{transition:var(--transition-custom);}

.item04 .main-solution-tab-style .main-tab-list-style ul li a{font-size:1.6rem;}
.item04 .main-solution-tab-style .main-tab-list-style ul li.small a{font-size:1.4rem;}

/* 탭 효과 추가 */
.move-line-wrap{max-width:none;}
.move-line-wrap .main-move-line span{height:4.4rem;}
.move-line-wrap.list02 .main-move-line span{width:50%;}
.move-line-wrap.list03 .main-move-line span{width:33.33%;}
.move-line-wrap.list04 .main-move-line span{width:25%;}
.move-line-wrap.list05 .main-move-line span{width:20%;}

.move-line-wrap{position: absolute; max-width: var(--area-width); width: calc(100% - 2rem); margin: 0 auto; top: 0; left: 0;}
.move-line-wrap .main-move-line{position: absolute; width: 100%; margin: 0 auto; top: 0rem; left: 0rem;}
.move-line-wrap .main-move-line span{height: 4.4rem; position: absolute; top: 0.7rem; left: 1rem; text-align: center; /* transition: left 0.2s linear; */ background:var(--main-color); border-radius:3px;}

/* Solution :: 우측컨텐츠 :: 컨텐츠 */
.solution-tab-con{position: absolute; width:100%; height:100%; top:0; left:0; padding:6rem 6rem 15rem; box-sizing:border-box; display: flex ; justify-content: center; align-items: flex-end;}
.solution-tab-con .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.solution-tab-con .bg span{position: relative; display: block; width:100%; height:0; padding-top:137.5%; overflow: hidden;}
.solution-tab-con .bg img{position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; transition:transform 0s 0.8s ease-in-out, opacity 0.8s ease-in-out;}
.solution-tab-con .txt-box{position: relative; z-index:8; text-align:center;}
.solution-tab-con .txt-box .category{font-size:1.4rem; line-height:1.5; letter-spacing:-0.005em; color:#000;  font-weight:400;}
.solution-tab-con .txt-box .tit{font-size:6rem; line-height:1.2; letter-spacing:-0.005em; color:#000; font-weight:400;}
.solution-tab-con .txt-box .tit.small{font-size:5rem;}
.solution-tab-con .txt-box .txt{font-size:1.8rem; line-height:1.88; letter-spacing:-0.05em; color:rgba(0,0,0,0.5); font-weight:500;}
.solution-tab-con .tab-link{position: absolute; content:''; top:50%; left:0; transform:translate(-50%, -50%); width:15.6rem; height:15.6rem; }
.solution-tab-con .tab-link .icon-box .bg{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:50%; background:var(--main-color); transition:var(--transition-custom);}
.solution-tab-con .tab-link .icon-box .dots{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; background:#fff; border-radius:50%;}
.solution-tab-con .tab-link svg{fill:#fff; position: absolute; height: auto; width: 100%; top:50%; left:50%; transform:translate(-50%, -50%); animation: visual_circle_rotate 12s linear infinite; transition:var(--transition-custom);}

.right-item.active .solution-tab-con.on .bg img{transition:transform 0.8s ease-in-out, opacity 0.8s ease-in-out;}

@keyframes visual_circle_rotate {
	0% {
		transform:translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform:translate(-50%, -50%) rotate(360deg);
	}
}

.solution-tab-con .tab-link:hover .icon-box .bg{transform:translate(-50%, -50%) scale(1.17);}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Industry) -------- */
/* -------- Industry 타이틀 -------- */
.main-industry-tit-box{text-align:center; padding:25rem 0 10rem;}
.main-industry-tit-box .tit{font-size:11.2rem; line-height:1; letter-spacing:-0.015em; color:#fff; font-weight:300;}
.main-industry-tit-box .txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.05em; color:#fff; font-weight:500; margin-top:2.8rem;}
/* -------- Industry 아코디언 -------- */
.product-overview-list {display: flex; width: 100%; height:100vh;}
.product-overview-list .overview-item {position: relative; transform:translateY(100px); opacity:0; transition:var(--transition-custom2);}
.product-overview-list .overview-item .overview-inner {display: block; width: 100%; height: 100%;}
.product-overview-list .overview-item .overview-img-box {position: relative; height: 100vh; margin: 0; overflow: hidden; background:#000}
.product-overview-list .overview-item .overview-img-box img {position: absolute; height: 98rem; min-width:100%; object-fit:cover; left: 50%; transform: translateX(-50%); opacity:0.3; transition:var(--transition-custom2);}
.product-overview-list .overview-item:first-child .overview-img-box img{left:0; transform:translateX(0);}
.product-overview-list .overview-item:last-child .overview-img-box img{left:auto; right:0; transform:translateX(0);}
/* 기본 */
.product-overview-list .overview-item .overview-tit-box{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; z-index:9; transition:var(--transition-custom); transition-delay:0.2s;}
.product-overview-list .overview-item .overview-tit-box .tit{font-size:3rem; line-height:1.5; letter-spacing:-0.005em; color:#fff; font-weight:400;}
.product-overview-list .overview-item .overview-tit-box .txt{font-size:1.8rem; line-height:1.77; letter-spacing:-0.05em; color:rgba(255,255,255,0.3); font-weight:500;}
.product-overview-list .overview-item .overview-tit-box .prd-overview-btn-m{display: none;}
/* 오버시 */
.product-overview-list .overview-item .overview-thumb-box{position: absolute; top:0; left:0; width:100%; height:100%; padding:10rem 7.5rem; box-sizing:border-box; z-index:9; /* opacity:0; */ transition:var(--transition-custom); }
.product-overview-list .overview-item .overview-thumb-box .tit-box{margin-bottom:1.5rem;}
.product-overview-list .overview-item .overview-thumb-box .tit-box .tit{font-size:6rem; line-height:1.2; letter-spacing:-0.005em; color:#fff; font-weight:400; margin-bottom:1rem; white-space:nowrap;}
.product-overview-list .overview-item .overview-thumb-box .tit-box .tit .br-1640{display: none;}
.product-overview-list .overview-item .overview-thumb-box .tit-box .txt{font-size:1.6rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:500; white-space:nowrap;}
.product-overview-list .overview-item .overview-thumb-box .check-list{margin-bottom:4rem;}
.product-overview-list .overview-item .overview-thumb-box .check-list p{position: relative; padding-left:2rem; box-sizing:border-box; font-size:1.6rem; line-height:2; letter-spacing:-0.05em; color:#fff; font-weight:500; white-space:nowrap;}
.product-overview-list .overview-item .overview-thumb-box .check-list p:before{position: absolute; content:'\e929'; font-family:'xeicon'; color:#fff; font-size:1.6rem; left:0; top:0;}
/* animated */
.product-overview-list.animated .overview-item{transform:translateY(0px); opacity:1;}
.product-overview-list.animated .overview-item:nth-child(1){transition-delay:0s;}
.product-overview-list.animated .overview-item:nth-child(2){transition-delay:0.2s;}
.product-overview-list.animated .overview-item:nth-child(3){transition-delay:0.4s;}
.product-overview-list.animated .overview-item:nth-child(4){transition-delay:0.6s;}
.product-overview-list.animated .overview-item:nth-child(5){transition-delay:0.8s;}


/* active */
.product-overview-list .overview-item .overview-img-box.active img{opacity: 1;}
.product-overview-list .overview-item .overview-img-box.active + .overview-tit-box{opacity: 0; transition-delay:0s;}

.product-overview-list .overview-item .overview-img-box + .overview-tit-box + .overview-thumb-box .cm-main-effect .cm-effect{transform:translateY(100px); opacity:0; transition: transform 1.2s ease-in-out, opacity 0.4s ease-in-out;}
.product-overview-list.animated .overview-item .overview-img-box.active + .overview-tit-box + .overview-thumb-box .cm-main-effect .cm-effect{transform:translateY(0%); opacity:1; transition: all 1.2s ease-in-out;}



/* -------- 메인 컨텐츠 :: 컨텐츠4(News) -------- */
#mainContent4{margin-top:30rem;}
.news-top-wrap{display: flex; align-items:flex-end; justify-content:space-between; margin-bottom:6rem;}
.main-news-tit-box{display: flex; align-items:flex-end;}
.main-news-tit-box .tit{font-size:11.6rem; line-height:1; letter-spacing:-0.015em; color:#fff; font-weight:300;}
.main-news-tit-box .txt{font-size:1.8rem; line-height:1.55; letter-spacing:-0.05em; color:#fff; font-weight:500; margin-left:3.7rem;}

.news-arrows-box{}
.news-arrows-box .slick-arrow{font-size:4rem; color:rgba(255,255,255,0.4); transition:var(--transition-custom); margin-left:1rem;}
.news-arrows-box .slick-arrow:hover{color:#fff;}

.main-news-list{display: flex;}
.main-news-list .slick-list{overflow:visible;}
.main-news-list .list-item{transform:scaleX(1.02) translateX(-10rem); transition:var(--transition-custom2); opacity:0; box-sizing:border-box;}
.main-news-list .list-item a{position: relative; display: block; padding:3.5rem 3.8rem; box-sizing:border-box; transition:var(--transition-custom); border:1px solid rgba(255,255,255,0.17); border-right:0;}
.main-news-list .list-item:nth-child(1) a{border-left:0;}
.main-news-list .list-item .img-box{width:100%; max-width:390px; transition:var(--transition-custom);}
.main-news-list .list-item .img-box span{position: relative; display: block; width:100%; height:0; padding-top:64.105%;}
.main-news-list .list-item .img-box span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; object-fit:cover; width:100%; height:100%;}
.main-news-list .list-item .txt-box{margin-top:4.5rem; transition:var(--transition-custom);}
.main-news-list .list-item .txt-box .news-tit{font-size:2.6rem; line-height:1.46; letter-spacing:-0.05em; color:#fff; font-weight:700; transition:var(--transition-custom); height:7.6rem;}
.main-news-list .list-item .txt-box .news-txt{font-size:1.6rem; line-height:1.75; letter-spacing:-0.05em; color:rgba(255,255,255,0.25); margin-top:2.5rem; transition:var(--transition-custom); height:5.6rem;}
.main-news-list .list-item .txt-box .bottom-box{display: flex; align-items:center; justify-content:space-between; margin-top:4.5rem;}
.main-news-list .list-item .txt-box .bottom-box .date{font-size:1.3rem; line-height:1.5; letter-spacing:-0.015em; color:rgba(255,255,255,0.15); transition:var(--transition-custom);}
.main-news-list .list-item .txt-box .bottom-box .more-btn{display: flex; align-items:center; justify-content:center; width:14rem; height:4.5rem; background:rgba(42,63,78,0.5); font-size:1.6rem; line-height:1.5; letter-spacing:-0.015em; color:rgba(255,255,255,0.2); transition:var(--transition-custom);}
/* hover */
.main-news-list .list-item a:hover{background:#fff;}
.main-news-list .list-item a:hover .txt-box .news-tit{color:#000;}
.main-news-list .list-item a:hover .txt-box .news-txt{color:rgba(0,0,0,0.6)}
.main-news-list .list-item a:hover .txt-box .bottom-box .date{color:rgba(0,0,0,0.3)}
.main-news-list .list-item a:hover .txt-box .bottom-box .more-btn{color:#fff; background:var(--main-color);}
/* active */
.main-news-list .list-item.slick-active + .list-item:not(.slick-active) {pointer-events: none;}
.main-news-list .list-item.slick-active + .list-item:not(.slick-active) a > * {opacity: 0.1;}
.main-news-list .list-item.over:not(.slick-active) {pointer-events: none;}
.main-news-list .list-item.over:not(.slick-active) a > * {opacity: 0.1;}

.main-news-list .list-item.on:not(.over) {pointer-events: auto !important;}
.main-news-list .list-item.on:not(.over) a > * {opacity: 1 !important;}
/* animated */
.main-news-list.animated .list-item{transform:scaleX(1) translateX(0rem); opacity:1;}
.main-news-list .list-item:nth-child(1){transition-delay:0.2s;}
.main-news-list .list-item:nth-child(2){transition-delay:0.3s;}
.main-news-list .list-item:nth-child(3){transition-delay:0.4s;}
.main-news-list .list-item:nth-child(4){transition-delay:0.5s;}
.main-news-list .list-item:nth-child(5){transition-delay:0.6s;}
.main-news-list .list-item:nth-child(6){transition-delay:0.7s;}
.main-news-list .list-item:nth-child(7){transition-delay:0.8s;}
.main-news-list .list-item:nth-child(8){transition-delay:0.9s;}
.main-news-list .list-item:nth-child(9){transition-delay:1s;}



/* -------- 메인 컨텐츠 :: 컨텐츠5(FlowTxt) -------- */
#mainContent5{margin-top:21rem; padding-bottom:6rem;}
.main-flow-txt-box{display: flex;}
.main-flow-txt-box .flow-txt{ display: inline-block; width: auto; padding: 0 2rem; font-size: 16rem; font-weight: 300; color:#fff; line-height: 1; white-space: nowrap; margin-left: 0; animation: 25s textLoop infinite linear}
.main-flow-txt-box .flow-txt b{font-weight:600;}

@keyframes textLoop {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}


/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }

/* more */
.mouse-pointer .pointer-more{position:absolute; left:50%; top:50%; display: block; width: 15.6rem; height: 15.6rem; transform: translate(-50%,-50%) scale(0); opacity:0; visibility: hidden; transition:var(--transition-custom); display: flex; align-items:center; justify-content:center; background:rgba(10,75,195,0.8); backdrop-filter:blur(10px); border-radius:50%;}
.mouse-pointer .pointer-more .inner-circle{position: relative; display: block; width:15.6rem; height:15.6rem; }
.mouse-pointer .pointer-more .inner-circle:before{position: absolute; content:''; width:8px; height:8px; background:#fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%);}
.mouse-pointer .pointer-more svg{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);  width:100%; height:100%;}
.mouse-pointer .pointer-more svg *{fill:rgba(255,255,255,0.5); width:100%; height:100%;}

.mouse-pointer.more:not(.non-more) .pointer-more{transform: translate(-50%,-50%) scale(1.0); visibility: visible; opacity: 1;}
.mouse-pointer.more:not(.non-more) .pointer-more svg{animation: textRotate 10s linear infinite;}

@keyframes textRotate {
	0% {
		transform: translate(-50%,-50%) rotate(0);
	}
	100% {
		transform: translate(-50%,-50%) rotate(360deg);
	}
}

.is-mobile .mouse-pointer,
.is-mobile .pointer-circle,
.is-mobile .pointer-txt,
.is-mobile .pointer-arrow{visibility: hidden; opacity: 0;}