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

/* ****************** 메인 loading ********************** */
.ms-preloader{width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}
.main-scroll-cover{width: 100%; height: 100vh; position: absolute; z-index: 99999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: transparent;}

.main-wrap .nav-open-btn-box,
.main-wrap #headerInnerWrap {
	/* margin-top: calc(-1 * var(--header-height));  */
	opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.main-wrap .header-lang03-mo{
	/* margin-top: calc(-1 * var(--header-height));  */
	opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#mainVisualControls,
.scroll-down-wrap{margin-bottom: -5rem; opacity: 0; transition: margin-bottom ease-in-out 1.1s, opacity ease-in-out 0.5s;}

.main-wrap.index-active #headerInnerWrap,
.main-wrap.index-active .nav-open-btn-box,
.main-wrap.index-active .header-lang03-mo {margin-top:0; opacity:1;}
.main-wrap.index-active #mainVisualControls,
.main-wrap.index-active .scroll-down-wrap{margin-bottom:0; opacity:1;}

/* .main-fullpage-slider{position: relative; width: 100%; height: 100vh;}
.main-section.swiper-slide {position: relative; overflow: hidden; height: 100%;}
.main-section #mainVisual,
.main-section #mainProductCon{width: 100%; height: 100%;} */

@media all and ( min-width: 801px ){
	.main-wrap #cmProductInquiryBox{transform: translateX(6rem); opacity: 0; transition: transform ease-in-out 1.1s, opacity ease-in-out 0.5s, right 0.8s ease-in-out;}
	.main-wrap.index-active #cmProductInquiryBox{transform: translateX(0); opacity: 1;}
}
@media all and ( min-width: 1281px ){
	/* -------- Header :: fixed -------- */
	#header.hidden{top:0;}
	#header.hidden #headerInnerWrap{top: 0; background-color:#fff; border-bottom:1px solid #eee;}
	#header.hidden .nav-open-btn-box{top: 0;}
	#header.hidden .cm-logo-svg .cls-2{fill:#2f367e;}
	#header.hidden .cm-logo-svg .cls-4{fill:#76a0c7;}
	#header.hidden .cm-logo-svg .cls-5{fill:#2561ae;}
	#header.hidden #gnb > ul > li > a{color: #000; font-weight: 700;}
	#header.hidden #gnb > ul > li.selected > a{color: #fff;}
	#header.hidden .nav-open-btn{top:0;}
	#header.hidden .sitemap-line-btn .line,
	#header.hidden .nav-open-btn .line{background-color:#333}

	/* -------- Header :: hidden -------- */
	#header.hidden.scroll-up .nav-open-btn-box{transform: translateY(0);}
	#header.hidden.scroll-up #headerInnerWrap{transform: translateY(0);}
	#header.hidden.scroll-down .nav-open-btn-box{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
	#header.hidden.scroll-down #headerInnerWrap{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
}

@media all and ( max-width: 1280px ){
	.main-wrap #headerInnerWrap{position: fixed; top: var(--header-top);}
}
@media all and ( max-width: 800px ){
	.main-fullpage-slider{position: relative; width: 100%; height: auto !important;}
	.main-fullpage-slider > .swiper-wrapper{height: auto !important; flex-wrap:wrap; transform: none !important;}
	.main-section.swiper-slide {position: relative; overflow: hidden; height: auto !important;}
	.main-section #mainVisual{height: 100%;}
	.main-section #mainProductCon{height: auto;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000;}
/* .main-visual-container{position:fixed; top:0; left:0; width:100%; height:100%;} */
.main-visual-item{position:relative; height:100vh;}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-container,
.main-visual-swiper{position:relative; z-index:auto; width: 100%; height:100vh !important;}
.main-visual-container .swiper-slide {
	overflow: hidden;
	background-color:#333;
}
.main-visual-container .slide-inner {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover !important;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	background-color: #000;
}
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:100vh;
    background-size:cover !important;
}
.main-visual-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-con #player{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-visual-con iframe{
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ 
min-height: calc(100vh + 340px); 
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;}

/* -------- 메인비주얼 :: 컨트롤러 -------- */
#mainVisualControls{position:absolute; bottom:85px; bottom: 8.67%; left:0; width:100%; z-index:2;}
#mainVisualControls .area-box{}
/* 컨트롤러 :: 진행바 */
#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem; display: inline-block; vertical-align: middle; width:auto; position: static;}
#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {display: inline-block; vertical-align: middle; position:relative; width:70px; height:auto; background:none; margin-left:10px; opacity:1;filter:Alpha(opacity=100); border-radius:0;}
#mainVisualControls .main-visual-pagination button:first-child {margin-left:0;}
#mainVisualControls .main-visual-pagination .progress-bar {display:block;position:absolute; bottom:0; left:0; display:block; width:100%; height:4px; background-color: rgba(255,255,255,0.3); box-sizing: border-box;}
#mainVisualControls .main-visual-pagination .swiper-pagination-bullet-active .progress-bar{background-color: rgba(255,255,255,0.1);}
#mainVisualControls .main-visual-pagination .progress-bar .bar{display:block; position:absolute; left:0; bottom:0; width:0; height:4px; background-color: #fff;}
/* 컨트롤러 :: 이전,다음 */
#mainVisualControls .main-visual-arrow{display: inline-block; vertical-align: middle; position:relative;}
#mainVisualControls .main-visual-arrow > button{margin: 0 3px; display: inline-block; vertical-align: middle; position: static; color:#fff; text-align:center; width: 20px; height: 30px; background: none;}
#mainVisualControls .main-visual-arrow > button:after{display: none;}
#mainVisualControls .main-visual-arrow > button i{font-size: 18px; line-height: 28px;}
#mainVisualControls .main-visual-arrow > button:not(.main-pause-btn) i{font-size: 20px;}
#mainVisualControls .main-visual-arrow .main-prev-btn i{text-indent: -2px;}
#mainVisualControls .main-visual-arrow .main-next-btn i{text-indent: 2px;}
#mainVisualControls .main-visual-arrow .main-play-btn{display: none;}
#mainVisualControls .main-visual-arrow .main-play-btn i{text-indent: 2px;}

/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:5.8rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.05em; color: #fff;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 1.5rem; font-size:3.4rem; line-height: 1.47; font-weight: 400; letter-spacing: -0.065em; color:#fff;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.swiper-slide-active .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.swiper-slide-active .main-visual-txt1,
.main-visual-item.swiper-slide-active .main-visual-txt2{
	-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;
}
.main-visual-item.first.swiper-slide-active .main-visual-txt-con .main-visual-txt1,
.main-visual-item.first.swiper-slide-active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:1s; animation-delay:1s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-5rem); 
		transform: translateX(-5rem); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}


/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
.scroll-down-wrap{position: fixed; bottom: 8%; left: 50%; margin-left: 63rem; width: 14rem; display: flex; align-items: center; justify-content: flex-end; z-index: 1;}
.scroll-down-wrap.index-t-ver{position: absolute;}
.scroll-down-wrap .txt{font-size:10px !important; letter-spacing:0 !important; color:#fff; margin-right:1.5rem; transition:var(--transition-custom);}
.scroll-down-wrap .scroll-icon{position: relative; width:6px; height:6px; background:rgba(255,255,255,0.1); transition:var(--transition-custom); overflow:hidden;}
.scroll-down-wrap .scroll-icon span{
	position: absolute; display: block; width:6px; height:47px; background:#fff; 
	top:0.3rem; left:50%; transform:translateX(-50%); 
	animation: scroll-icon-ani 2s ease-in-out infinite; 
	transition:var(--transition-custom);
	border-radius:5px;
}

.scroll-down-wrap .scroll-txt{display:inline-block; color:#fff; font-weight:700;}
.scroll-down-wrap .scroll-txt em{font-size:10px !important; display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; font-weight:500;}
.scroll-down-wrap .scroll-txt em:nth-child(1){animation-delay:1s;}
.scroll-down-wrap .scroll-txt em:nth-child(2){animation-delay:1.04s;}
.scroll-down-wrap .scroll-txt em:nth-child(3){animation-delay:1.08s;}
.scroll-down-wrap .scroll-txt em:nth-child(4){animation-delay:1.12s;}
.scroll-down-wrap .scroll-txt em:nth-child(5){animation-delay:1.16s;}
.scroll-down-wrap .scroll-txt em:nth-child(6){animation-delay:1.2s;}
.scroll-down-wrap .scroll-txt em:nth-child(7){animation-delay:1.24s;}
.scroll-down-wrap .scroll-txt em:nth-child(8){animation-delay:1.28s;}
.scroll-down-wrap .scroll-txt em:nth-child(9){animation-delay:1.32s;}
.scroll-down-wrap .scroll-txt em:nth-child(10){animation-delay:1.36s;}
.scroll-down-wrap .scroll-txt em:nth-child(11){animation-delay:1.4s;}

@keyframes scroll-icon-ani {
	0% {
		top:-1rem;
		opacity:0;
	}
	10% {
		top:-1rem;
		opacity:1;
	}
	32% {
		top:-1rem;
		opacity:1;
	}
	80% {
		top:4.3rem;
		opacity:1;
	}
	100% {
		top:4.3rem;
		opacity:0;
	}
}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    20%,80% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}

@media all and (max-width:1600px){
	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{right: var(--area-padding); left: auto; margin-left: 0;}
}
@media all and ( max-width: 800px ){
	/* -------- 메인비주얼 :: 컨트롤러 -------- */
	#mainVisualControls{bottom:calc(8.88% + 6rem) ; text-align: center;}
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem;}
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:70px; margin-left:10px;}
	#mainVisualControls .main-visual-pagination .progress-bar {height:4px;}
	#mainVisualControls .main-visual-pagination .progress-bar .bar{height:4px;}
	/* 컨트롤러 :: 이전,다음 */
	#mainVisualControls .main-visual-arrow > button{margin: 0 3px; width: 20px; height: 30px;}
	#mainVisualControls .main-visual-arrow > button i{font-size: 18px; line-height: 28px;}
	#mainVisualControls .main-visual-arrow > button:not(.main-pause-btn) i{font-size: 20px;}
	#mainVisualControls .main-visual-arrow .main-prev-btn i{text-indent: -2px;}
	#mainVisualControls .main-visual-arrow .main-next-btn i{text-indent: 2px;}
	#mainVisualControls .main-visual-arrow .main-play-btn i{text-indent: 2px;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-bottom: 10rem;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:4.8rem; line-height: 1.25;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 2rem; font-size:2rem; line-height: 1.5;}

	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{position: absolute; bottom:8.88%; right:0; width: 100%; display: flex; align-items: center; justify-content: center;}
	.scroll-down-wrap .txt{font-size:1.2rem; margin-right:1.5rem;;}
	.scroll-down-wrap .scroll-icon{width:0.4rem; height:4rem;}
	.scroll-down-wrap .scroll-icon span{width:0.4rem; height:0.4rem; top:0.3rem;}
}
@media all and ( max-width: 480px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:65px; margin-left:8px;}
}
@media all and ( max-width: 359px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:60px;}
}

/* ******************  메인 컨텐츠 ********************** */
#mainContent{position:relative; z-index:11; transform: none !important; background-color: rgba(6,22,49,1);}
#mainContent.index-t-ver{position: relative; z-index: 99;}
.main-top-scroll-cover{position: absolute; top: -100vh; left: 0; width: 100%; height: 100vh; background-color: transparent; visibility: hidden; z-index: 999;}
.main-top-scroll-cover.show{visibility: visible;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:8rem; line-height: 1.1; font-weight:600; letter-spacing: -0.05em; color: #fff;}
.main-tit-box .main-sub-tit{margin-top: 1.5rem; font-size:2.45rem; line-height: 1.34; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.cm-main-btn-style{width: 20rem; height: 6rem; padding: 0 1.5rem; font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; border: 0.4rem solid rgba(255,255,255,0.3); border-radius: 0.5rem; box-sizing: border-box; transition:var(--transition-custom); transition-property: border-color; display: flex; align-items: center; justify-content: center;}
.cm-main-btn-style:hover{border-color: #fff;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

@media all and ( max-width: 800px ){
	#mainContent.index-t-ver{position: relative; z-index: 11;}
	.main-top-scroll-cover{display: none !important;}
	.main-tit-box .main-tit{font-size:5rem; line-height: 1.1;}
	.main-tit-box .main-sub-tit{margin-top: 1.5rem; font-size:2rem; line-height: 1.34;}
	.cm-main-btn-style{width: 20rem; height: 6rem; padding: 0 1.5rem; font-size: 1.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
#mainProductCon{position: relative; width: 100%; height: 100vh; background: url("../images/main/main_product_bg.png") center bottom no-repeat; background-size: cover; overflow: hidden;}
#carousel3d{width: 100%; height: 100vh; position: relative; display: flex; flex-wrap:wrap; max-width: 1920px; margin: 0 auto;}

/* 왼쪽 영역 */
.main-product-left{width: 48rem; padding: 0 7rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--main-color); mix-blend-mode: multiply; box-sizing: border-box; transform: translateX(-100%); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
.main-product-left .main-tit-box{width: 100%;}
/* 탭 */
.main-product-tab{margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap:wrap;}
.main-product-tab li{width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1);}
.main-product-tab li a{padding: 0 5.5rem 0 2.4rem; width: 100%; height: 5.5rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: #fff; box-sizing: border-box; display: flex; align-items: center; position: relative; cursor: pointer !important; transition:var(--transition-custom); transition-property: background-color;}
.main-product-tab li a:before{position: absolute; top: 50%; margin-top: -0.8rem; right: 2rem; font-size: 1.6rem; line-height: 1; font-weight: 400; color: #fff; content: "\e90b"; font-family: xeicon;}
.main-product-tab li.selected a{background-color: rgba(255,255,255,0.1);}
/* 버튼 */
.main-product-btn-group{margin-top: 14rem; display: flex; flex-wrap:wrap; visibility: hidden; opacity: 0;}
.main-product-btn-group button{width: 8rem; height: 8rem; font-size: 2.4rem; color: #fff; border: 0.3rem solid rgba(255,255,255,0.3); border-radius: 0.5rem; transition:var(--transition-custom); transition-property: border-color;}
.main-product-btn-group button + button{margin-left: 0.5rem;}
.main-product-btn-group button:hover{border-color: #fff;}

/* 오른쪽 영역 */
.main-product-right{position: absolute; top: 0; left: 48rem; width: 145rem; height: 100%; display: flex; align-items: center;}
.main-product-img-box{width: 100%; height: 60rem; transform: translateY(-10rem); overflow: hidden; opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity; margin: 0; overflow: visible;}
/* 슬라이드 :: 영역 */
.main-product-img-box .carousel-3d-container{position: static !important; overflow: visible !important; height: 60rem !important;}
.main-product-img-box .carousel-3d-slider{overflow: hidden; width: calc(100% - 0.9rem) !important; height: 60rem !important; pointer-events: none;}
.main-product-img-box .carousel-3d-controls{position: static !important;}
/* 슬라이드 :: 버튼 */
.main-product-img-box .prev, .main-product-img-box .next{top: 50% !important; margin-top: 20.4rem; width: 8rem !important; height: 8rem !important; background-color: transparent; text-align: center !important; line-height: 1 !important; border: 0.3rem solid rgba(255,255,255,0.3); border-radius: 0.5rem; box-sizing: border-box; opacity: 1 !important; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom); transition-property: border-color;}
.main-product-img-box .prev{left: -41rem !important;}
.main-product-img-box .next{left: -32.5rem !important; right: auto !important;}
.main-product-img-box .prev span, .main-product-img-box .next span{display: none;}
.main-product-img-box .prev:after,
.main-product-img-box .next:after{font-size: 2.4rem; color: #fff; font-weight: 400; font-family: xeicon;}
.main-product-img-box .prev:after{content: "\e93c";}
.main-product-img-box .next:after{content: "\e93f";}
.main-product-img-box .next:hover, .main-product-img-box .prev:hover{border-color: #fff;}
/* 슬라이드*/
.main-product-img-list{height:60rem;}
.main-product-img-item{position: relative; width: 28rem !important; height:60rem !important; display: flex !important; align-items: center; border: 0 !important; background-color: transparent !important; overflow: visible !important; opacity: 1 !important;}
.main-product-img-inner{width: 28rem !important; position: relative; display: flex; align-items: center;}
.main-product-img-inner img{max-width: 100%; max-height: 100%; width: auto !important;}
.main-product-img-inner em{position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; font-size: 50px; color: #000;}
/* transition */
.main-product-img-item{}
.main-product-img-item .main-product-img-inner{transition: width 0.8s ease, margin-right 0.8s ease;}
/* 컨텐츠 활성화 */
/* -2 앞 컨텐츠 */
.main-product-img-item{transform: translateX(-60.1rem) translateZ(0) rotateY(-0deg) !important; visibility: visible !important; z-index: 996 !important;}
/* -1 */
.main-product-img-item.left-2{width: 36rem !important; transform: translateX(-60.1rem) translateZ(0) rotateY(-0deg) !important;}
.main-product-img-item.left-2 .main-product-img-inner{width: 36rem !important;}
/* current */
.main-product-img-item.left-1{width: 91.6rem !important; left: 0; transform: translateX(0) rotateY(-0deg) !important;  z-index: 999 !important;}
.main-product-img-item.left-1 .main-product-img-inner{width: 60.6rem !important; margin-right: 31rem;}
/* 2 */
.carousel-3d-slide.main-product-img-item.current{width: 36rem !important; transform: translateX(91.1rem) translateZ(0) rotateY(-0deg) !important;  z-index: 998 !important;}
.carousel-3d-slide.main-product-img-item.current .main-product-img-inner{width: 36rem !important;}
/* 3 */
.main-product-img-item.right-1{width: 32rem !important; transform: translateX(112.1rem) translateZ(0) rotateY(-0deg) !important;  z-index: 997 !important;}
.main-product-img-item.right-1 .main-product-img-inner{width: 32rem !important;}
/* 4 */
.main-product-img-item.right-2{transform: translateX(131.1rem) translateZ(0) rotateY(-0deg) !important;}

/* progress */
.main-product-progress-box {position: absolute; display: block; width: 100%; height: 5px; left: 0; bottom: 0; z-index: 20;}
.main-product-progress {position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 5px; background-color: transparent;}
.main-product-progress span{position: absolute; left: 0; bottom: 0; z-index: 11; width: 0; height: 5px; background-color: var(--main-color); display: block;}
.main-product-progress.start span{animation: dotProgress 3.9s linear both;}

@keyframes dotProgress {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

/* 설명 슬라이드 */
.main-product-txt-box{position: absolute; top: 50%; margin-top: -30rem; left: 67.6rem; width: 27rem; z-index: 999;}
.main-product-txt-list{}
.main-product-txt-item.swiper-slide{opacity: 1 !important; pointer-events: all !important;}
.main-product-txt-inner{position: relative; width: 27rem; height:60rem; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition:var(--transition-custom); transition-property: opacity; box-sizing: border-box;}
.main-product-txt-inner .prd-logo{}
.main-product-txt-inner .prd-logo img{}
.main-product-txt-inner .tit{margin-top: 2rem; font-size: 3.2rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #333;}
.main-product-txt-inner .txt{margin-top: 1rem; font-size: 2.4rem; line-height: 1.16; letter-spacing: -0.05em; font-weight: 600; color: #333;}
.main-product-txt-inner .btn{margin-top: 4.5rem; width: 6rem; height: 6rem; background-color: var(--main-color); border-radius: 0.5rem; display: flex;  align-items: center; justify-content: center; border: 0.4rem solid var(--main-color); box-sizing: border-box; transition:var(--transition-custom); transition-property: background-color;}
.main-product-txt-inner .btn i{font-size: 1.8rem; color: #fff; transition:var(--transition-custom); transition-property: color;}
.main-product-txt-inner .btn:hover{background-color: #fff;}
.main-product-txt-inner .btn:hover i{color: var(--main-color);}
/* 컨텐츠 활성화 */
.main-product-txt-item.active-item{z-index: 99;}
.main-product-txt-item.active-item .main-product-txt-inner{opacity: 1; visibility: visible;}

/* animated */
.main-product-section.swiper-slide-active .main-product-left,
#mainProductCon.animated .main-product-left{transform: translateX(0); opacity: 1;}
.main-product-section.swiper-slide-active .main-product-img-box,
#mainProductCon.animated .main-product-img-box{transform: translateY(0); opacity: 1;}
.main-product-section.swiper-slide-active .main-product-left .main-tit-box {opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto;}

@media all and ( max-width: 1280px ){
	/* 왼쪽 영역 */
	.main-product-left {width: 36rem; padding: 0 4.5rem;}
	.main-product-left .main-tit-box .main-sub-tit br{display: none;}
	/* 오른쪽 영역 */
	.main-product-right{left: 36rem; width: calc(100% - 36rem);}
	/* 슬라이드 :: 영역 */
	.main-product-img-box{height: 50rem;}
	.main-product-img-box .carousel-3d-container{height: 50rem !important;}
	.main-product-img-box .carousel-3d-slider{margin: 0 !important; width: 100% !important; height: 50rem !important;}
	/* 슬라이드 :: 버튼 */
	.main-product-img-box .prev{left: -31.5rem !important;}
	.main-product-img-box .next{left: -23rem !important; right: auto !important;}
	/* 슬라이드*/
	.main-product-img-list{height:50rem;}
	.main-product-img-item{width: 26rem !important; height:50rem !important;}
	.main-product-img-inner{width: 26rem !important;}
	/* 컨텐츠 활성화 */
	/* -2 앞 컨텐츠 */
	.main-product-img-item{width: 23rem !important; transform: translateX(-60.1rem) translateZ(0) rotateY(-0deg) !important;}
	/* -1 */
	.main-product-img-item.left-2{width: 31rem !important; transform: translateX(-58.1rem) translateZ(0) rotateY(-0deg) !important;}
	.main-product-img-item.left-2 .main-product-img-inner{width: 31rem !important;}
	/* current */
	.main-product-img-item.left-1{width: 71.6rem !important; transform: translateX(0) rotateY(-0deg) !important;}
	.main-product-img-item.left-1 .main-product-img-inner{width: 40.6rem !important; margin-right: 31rem;}
	/* 2 */
	.carousel-3d-slide.main-product-img-item.current{width: 31rem !important; transform: translateX(61.1rem) translateZ(0) rotateY(-0deg) !important;}
	.carousel-3d-slide.main-product-img-item.current .main-product-img-inner{width: 31rem !important;}
	/* 3 */
	.main-product-img-item.right-1{width: 27rem !important; transform: translateX(82.1rem) translateZ(0) rotateY(-0deg) !important;}
	.main-product-img-item.right-1 .main-product-img-inner{width: 27rem !important;}
	/* 4 */
	.main-product-img-item.right-2{transform: translateX(119.1rem) translateZ(0) rotateY(-0deg) !important;}

	/* 설명 슬라이드 */
	.main-product-txt-box{margin-top: -25rem; left: 45.6rem; width: 27rem;}
	.main-product-txt-inner{width: 27rem; padding-right: 2rem; height:50rem;}
	.main-product-txt-inner .tit{margin-top: 2rem; font-size: 3.2rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #333;}
	.main-product-txt-inner .txt{margin-top: 1.5rem; font-size: 1.55rem; line-height: 1.8; letter-spacing: -0.05em; font-weight: 500; color: #333;}
	.main-product-txt-inner .btn{margin-top: 2.5rem; width: 6rem; height: 6rem; background-color: var(--main-color); border-radius: 0.5rem; display: flex;  align-items: center; justify-content: center; border: 0.4rem solid var(--main-color); box-sizing: border-box; transition:var(--transition-custom); transition-property: background-color;}
	.main-product-txt-inner .btn i{font-size: 1.8rem; color: #fff; transition:var(--transition-custom); transition-property: color;}
}
@media all and ( max-width: 800px ){
	#mainProductCon{height: auto;}
	#carousel3d{height: auto;}
	/* 왼쪽 영역 */
	.main-product-left{width: 100%; height: auto; /* padding: var(--header-height) 3.64%; */ padding: var(--header-height) var(--area-padding); display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--main-color); mix-blend-mode: multiply; box-sizing: border-box; transform: translateX(0); opacity: 1;}
	/* 탭 */
	.main-product-tab{margin-top: 2.5rem;}
	.main-product-tab li a{padding: 0 5.5rem 0 2rem; width: 100%; height: 5.5rem; font-size: 1.6rem; line-height: 1.3;}
	.main-product-tab li a:before{position: absolute; top: 50%; margin-top: -0.8rem; right: 2rem; font-size: 1.6rem; line-height: 1;}
	/* 버튼 */
	.main-product-btn-group{margin-top: 3rem; display: flex; flex-wrap:wrap;}
	.main-product-btn-group button{width: 8rem; height: 8rem; font-size: 2.4rem;}
	.main-product-btn-group button + button{margin-left: 0.5rem;}

	/* 오른쪽 영역 */
	.main-product-right{padding: 5.5rem 0 0; position: relative; top: auto; left: 0; width: 100%; height: 68rem; display: block; box-sizing: border-box;}
	.main-product-img-box{height: 30rem; transform: translateY(0); opacity: 1;}
	/* 슬라이드 :: 영역 */
	.main-product-img-box .carousel-3d-container{height: 30rem !important; margin: 0 !important;}
	.main-product-img-box .carousel-3d-slider{margin: 0 !important; width: 100% !important; height: 30rem !important;}
	/* 슬라이드 :: 버튼 */
	.main-product-img-box .next, .main-product-img-box .prev{top: calc(-1 * (var(--header-height) + 13rem)) !important; margin-top: 0; width: 8rem !important; height: 8rem !important;}
	.main-product-img-box .prev{left: var(--area-padding) !important;}
	.main-product-img-box .next{left: calc(var(--area-padding) + 8.5rem) !important;}
	/* 슬라이드*/
	.main-product-img-list{margin-left: 0; height:30rem;}
	.main-product-img-item{width: 100% !important; height:30rem !important;}
	.main-product-img-inner{width: 100% !important; height:30rem !important; justify-content: center; padding-right: 18%; box-sizing: border-box;}
	/* 컨텐츠 활성화 */
	/* -2 앞 컨텐츠 */
	.main-product-img-item{transform: translateX(-100%) translateZ(0) rotateY(-0deg) !important; visibility: hidden !important;}
	/* -1 */
	.main-product-img-item.left-2{width: 100% !important; transform: translateX(-100%) translateZ(0) rotateY(-0deg) !important;}
	.main-product-img-item.left-2 .main-product-img-inner{width: 100% !important;}
	/* current */
	.main-product-img-item.left-1{width: 100% !important; transform: translateX(0) rotateY(-0deg) !important; visibility: visible !important;}
	.main-product-img-item.left-1 .main-product-img-inner{width: 100% !important; margin-right: 0;}
	/* 2 */
	.carousel-3d-slide.main-product-img-item.current{width: 100% !important; transform: translateX(100%) translateZ(0) rotateY(-0deg) !important;}
	.carousel-3d-slide.main-product-img-item.current .main-product-img-inner{width: 100% !important;}
	/* 3 */
	.main-product-img-item.right-1{width: 100% !important; transform: translateX(200%) translateZ(0) rotateY(-0deg) !important;}
	.main-product-img-item.right-1 .main-product-img-inner{width: 100% !important;}
	/* 4 */
	.main-product-img-item.right-2{transform: translateX(300%) translateZ(0) rotateY(-0deg) !important;}

	/* progress */
	.main-product-progress-box{bottom: calc(68rem - 5px); height: 6px;}
	.main-product-progress{height: 6px;}
	.main-product-progress span{height: 6px;}
	/* 설명 슬라이드 */
	.main-product-txt-box{margin-top: 4rem; position: relative; top: 0; left: 0; width: 100%; z-index: 999;}
	.main-product-txt-item.swiper-slide{opacity: 1 !important; pointer-events: all !important;}
	.main-product-txt-inner{width: 100%; height:auto; padding: 0 var(--area-padding); box-sizing: border-box; opacity: 0; visibility: hidden;}
	.main-product-txt-inner .prd-logo{display: none;}
	.main-product-txt-inner .tit{margin-top: 2rem; font-size: 3.2rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #333;}
	.main-product-txt-inner .txt{margin-top: 1.5rem; font-size: 1.55rem; font-size: 1.8rem; line-height: 1.8; letter-spacing: -0.025em; font-weight: 600; color: #333;}
	.main-product-txt-inner .btn{margin-top: 2.5rem; width: 6rem; height: 6rem; background-color: var(--main-color); border-radius: 0.5rem; display: flex;  align-items: center; justify-content: center; border: 0.4rem solid var(--main-color); box-sizing: border-box; transition:var(--transition-custom); transition-property: background-color;}
	.main-product-txt-inner .btn i{font-size: 1.8rem; color: #fff; transition:var(--transition-custom); transition-property: color;}
	.main-product-txt-inner br{display: none;}
	/* 컨텐츠 활성화 */
	.main-product-txt-item.active-item .main-product-txt-inner{opacity: 1; visibility: visible;}
}

/* -------- 메인 컨텐츠 :: hiddenArea -------- */
#hiddenArea{position: relative; width: 100%; height: 20.6rem; background-color: rgba(6,22,49,1);}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Technology) -------- */
#mainTechnologyCon{position: relative; z-index: 1; padding: 0 0 47rem; padding-bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#061631+0,000000+100 */
background: linear-gradient(to bottom,  rgba(6,22,49,1) 0%, rgba(6,22,49,1) 50%, rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-technology-bg{position: absolute; top: 76rem; left: 50%; margin-left: -96rem; width: 192rem;}
.main-technology-bg img{width: 100%;}

#mainTechnologyCon,
#mainBusinessCon{position: relative;}
#hiddenArea .line,
#mainTechnologyCon .line,
#mainBusinessCon .line{position: absolute; top: 0; left: 50%; width: 0.1rem; height: 100%; background-color: rgba(255,255,255,0.1); display: block;}
#hiddenArea .line02,
#mainTechnologyCon .line02,
#mainBusinessCon .line02{margin-left: 24rem;}
#hiddenArea .line03,
#mainTechnologyCon .line03,
#mainBusinessCon .line03{margin-left: 48rem;}
#hiddenArea .line04,
#mainTechnologyCon .line04,
#mainBusinessCon .line04{margin-left: 72rem;}

.main-technology-con{position: relative; width: 100%;}
.main-technology-con > .area{position: relative; display: flex; box-sizing: border-box;}

.main-technology-left{width: 50%;}
.main-technology-left-inner{padding-top: 11.5rem;}
.main-technology-left .cm-main-btn-style{margin-top: 6.5rem;}

.main-technology-right{width: calc(50% + 1.5rem); margin-right: -1.5rem;}
.main-technology-list{display: flex; flex-wrap:wrap;}
.main-technology-item{width: 100%; display: flex; flex-wrap:wrap; flex-direction: column; align-items: flex-start; justify-content: center;}
.main-technology-item.item02{align-items: flex-end;}
.main-technology-item + .main-technology-item{margin-top: 39rem;}
.main-technology-item a{width: 48rem; display: block;}
.main-technology-video{position: relative; width: 100%; max-width: 48rem;}
.main-technology-video-inner{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 100%; overflow: hidden;}
.main-technology-video-inner video,
.main-technology-video-inner iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events:none; width:100%; height:100%;
/*width: 36vw; height: 33.25vw; min-height: calc(20vh + 340px); min-width: 72.77vh;*/}
.main-technology-txt{position: relative; margin-top: -11rem; width: 48rem;}
.main-technology-txt .tit{font-size: 15rem; line-height: 1; letter-spacing: -0.05em; font-weight: 600; color: #fff; text-indent: -0.8rem; text-wrap: nowrap;}
.main-technology-txt .txt{margin-top: 3rem; padding-left: 2.3rem; font-size: 1.8rem; line-height: 1.83; letter-spacing: -0.05em; font-weight: 500; color: #fff; position: relative;}
.main-technology-txt .txt p{position: relative;}
.main-technology-txt .txt p:before{position: absolute; top: 1rem; left: -2.4rem; width: 0.4rem; height: 0; background-color: #fff; content: ''; transition:var(--transition-custom2); transition-property: height;}
.main-technology-txt .txt span{margin-top: 1.5rem; display: block; font-size: 1.5rem; line-height: 1.5; letter-spacing: -0.05em; font-weight: 500; color: rgba(255,255,255,0.3);}

.main-technology-video{transform: translateY(10rem); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
.main-technology-txt .tit,
.main-technology-txt .txt,
.main-technology-txt .txt p,
.main-technology-txt .txt span{transform: translateY(100%); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
/* active */
.main-technology-item.active .main-technology-txt .txt p:before{height: calc(100% - 2rem);}
.main-technology-item.active .main-technology-video,
.main-technology-item.active .main-technology-txt .tit,
.main-technology-item.active .main-technology-txt .txt,
.main-technology-item.active .main-technology-txt .txt p,
.main-technology-item.active .main-technology-txt .txt span{transform: translateY(0); opacity: 1;}

@media all and ( max-width: 1280px ){
	.main-technology-txt .txt p .pc-br{display: block;}
}
@media all and ( max-width: 800px ){
	/* -------- 메인 컨텐츠 :: hiddenArea -------- */
	#hiddenArea{height: 19.5rem;}

	/* -------- 메인 컨텐츠 :: 컨텐츠2(Technology) -------- */
	#mainTechnologyCon{padding: 0 0 10rem;}
	.main-technology-bg{position: absolute; top: 76rem; left: 50%; margin-left: -96rem; width: 192rem;}

	#hiddenArea .line,
	#mainTechnologyCon .line,
	#mainBusinessCon .line{display: none !important;}

	.main-technology-con{position: relative; width: 100%;}
	.main-technology-con > .area{position: relative; display: block; box-sizing: border-box;}

	.main-technology-left{width: 100%;}
	.main-technology-left-inner{padding-top: 0;}
	.main-technology-left .cm-main-btn-style{margin-top: 6.5rem;}

	.main-technology-right{margin-top: 10rem; width: 100%; margin-right: 0;}
	.main-technology-list{display: flex; flex-wrap:wrap;}
	.main-technology-item{width: 100%; align-items: flex-start;}
	.main-technology-item.item02{align-items: flex-start;}
	.main-technology-item + .main-technology-item{margin-top: 19rem;}
	.main-technology-item a{width: 100%;}
	.main-technology-video{width: 100%; max-width: 48rem;}
	.main-technology-txt{margin-top: -8rem; width: 100%;}
	.main-technology-txt .tit{font-size: 10rem; line-height: 1;}
	.main-technology-txt .txt{margin-top: 2.5rem; padding-left: 2.3rem; font-size: 1.8rem; line-height: 1.83;}
	.main-technology-txt .txt p{position: relative;}
	.main-technology-txt .txt p:before{position: absolute; top: 1rem; left: -2.4rem; width: 0.4rem; height: 0; background-color: #fff; content: ''; transition:var(--transition-custom2); transition-property: height;}
	.main-technology-txt .txt p .pc-br{display: none;}

	.main-technology-video{transform: translateY(10rem); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
	.main-technology-txt .tit,
	.main-technology-txt .txt,
	.main-technology-txt .txt p,
	.main-technology-txt .txt span{transform: translateY(100%); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
	/* active */
	.main-technology-item.active .main-technology-txt .txt:before{height: calc(100% - 2rem);}
	.main-technology-item.active .main-technology-video,
	.main-technology-item.active .main-technology-txt .tit,
	.main-technology-item.active .main-technology-txt .txt,
	.main-technology-item.active .main-technology-txt .txt p,
	.main-technology-item.active .main-technology-txt .txt span{transform: translateY(0); opacity: 1;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Business) -------- */
#mainBusinessCon{padding: 54rem 0 44.5rem; background: #000 url("../images/main/main_product_bg02.jpg") 50% 100% no-repeat; background-size: cover; position: relative; z-index: 1;}

#mainBusinessCon .area{position: relative; z-index: 1;}

.main-business-container{margin-top: 6.5rem;}
.main-business-list{}
.main-business-item.swiper-slide{}
.main-business-item + .main-business-item{margin-top: 2.5rem;}
.main-business-item a{position: relative; display: block; width: 100%; height: 100%; width: 100%; height: 22rem; background-color: #141726; border-radius: 22rem; overflow: hidden; display: flex; flex-wrap:wrap; flex-direction: row-reverse;}
.main-business-item.swiper-slide.item02 a{flex-direction: row;}
.main-business-img{position: absolute; top: 0; width: 50%; height: 100%; transition:var(--transition-custom); transition-property: width, opacity;}
.item01 .main-business-img,
.item03 .main-business-img{left: 0;}
.item02 .main-business-img{right: 0;}
.main-business-img span{position: relative; width: 100%; height: 100%; border-radius: 22rem; display: block; background-size: cover !important;     background-position-y: 50% !important;}
.main-business-txt{position: relative; padding: 0 5.67%; width: 50%; height: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; box-sizing: border-box;}
.main-business-txt h5{width: 17.5rem; font-size: 3.2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.item02 .main-business-txt h5{width: 19rem;}
.main-business-txt p{width: calc(100% - 17.5rem); font-size: 2rem; line-height: 1.65; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.item02 .main-business-txt p{width: calc(100% - 19rem);}

.main-business-item a:hover .main-business-img{width: 100%; opacity: 0.8;}

/* animated */
.main-business-item:not(.item02){transform: translateX(-5rem); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
 .main-business-item.item02{transform: translateX(5rem); opacity: 0; transition:var(--transition-custom2); transition-property: transform, opacity;}
.main-business-container.animated .main-business-item:not(.item02),
.main-business-container.animated .main-business-item.item02{transform: translateX(0); opacity: 1;}

@media all and ( min-width: 801px ){
	.main-business-list.swiper-wrapper{height: auto; display: flex; flex-wrap: wrap; flex-direction: row; transform: none !important;}
}
@media all and ( max-width: 800px ){
	#mainBusinessCon{padding: 10rem 0 21rem;}

	.main-business-container{margin-top: 5rem; width: 90%; padding-right: 10% !important; overflow: visible !important;}
	.main-business-item.swiper-slide.item02 a,
	.main-business-item a{position: relative; width: 100%; height: 40rem; background-color: #141726; border-radius: 4rem; overflow: hidden; display: flex; flex-wrap:wrap; flex-direction: row-reverse;}
	.main-business-item + .main-business-item{margin-top: 0;}
	.main-business-img{position: absolute; top: 0; width: 100%; height: 100%; opacity: 0.8;}
	.main-business-img span{border-radius: 4rem;}
	.main-business-txt{position: absolute; top: 0; left: 0; padding: 4.5rem 7.69%; width: 100%; height: 100%; display: block;}
	.item02 .main-business-txt h5,
	.main-business-txt h5{width: 100%; font-size: 3.2rem; line-height: 1.3;}
	.item02 .main-business-txt p,
	.main-business-txt p{margin-top: 1.5rem; width: 100%; font-size: 1.8rem; line-height: 1.65;}

	/* animated */
	.main-business-item.item02,
	.main-business-item:not(.item02){transform: translateX(-5rem);}
	.main-business-list.animated .main-business-item:not(.item02),
	.main-business-list.animated .main-business-item.item02{transform: translateX(0);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(News) -------- */
#mainNewsCon{background-color: #fff; padding: 20rem 0; margin-bottom: 10rem; position: relative;}

.main-news-con{position: relative; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-end;}

.main-news-left{width: calc(100% - 74rem);}
.main-news-left-inner{padding-top: 25rem; height: 100vh; position: relative; box-sizing: border-box;}
.main-news-left-inner:before{position: absolute; top: 50%; margin-top: -32.5rem; left: -13.2813vw; width: 0%; height: 65rem; content: ''; background-color: #f2f2f2; border-radius: 0 32.5rem 32.5rem 0; transition: var(--transition-custom2);}
.main-news-left .main-tit-box .main-tit{color: #222;}
.main-news-left .main-tit-box .main-sub-tit{color: #333;}
.main-news-left .cm-main-btn-style{margin-top: 6rem; color: #333; border-color: rgba(113,113,113,0.3);}
.main-news-left .cm-main-btn-style:hover{border-color: #717171;}
/* News :: 진행바 */
.main-news-control{margin-left: 8rem; margin-top: 3rem; position: static; opacity: 0; visibility: hidden;}
.main-news-control .main-control-box-top {margin-bottom: 0; flex-direction: column; align-items: flex-start;}

.main-news-right{width: 74rem; position: relative; z-index: 11; display: flex; flex-wrap:wrap; justify-content: space-between;}
.main-news-box{width: calc(50% - 2rem);}

.main-news-container{}
.main-news-list{width: auto; display: flex; flex-wrap:wrap; flex-direction: row;}
.main-news-item{margin-bottom: 2rem; width: 100%; height: 46rem; height: 50rem;}
.main-news-item.has-img{height: 50rem;}

.main-news-item a{padding: 5.5rem 5rem; width: 100%; height: 100%; background-color: #fff; position: relative; border-radius: 0.5rem; display: flex; flex-wrap:wrap; flex-direction: column; justify-content: space-between; box-sizing: border-box; box-shadow: 2rem 2rem 6rem #0000001A; overflow: hidden; transition-property: background-color;}
.main-news-item.has-img a{padding-bottom: 0; justify-content: initial;}
.main-news-item a .category{font-size: 1.6rem; font-weight: 700; color: #333; display: block;}
.main-news-item a .tit{margin-top: 1rem; max-height: 4.11em; font-size: 2.4rem; line-height: 1.37; letter-spacing: -0.05em; font-weight: 700; color: #1f1f1f; overflow:hidden; word-break: break-word; display:block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.main-news-item a .txt{margin-top: 3rem; max-height: 7.2em; font-size: 1.55rem; line-height: 1.8; letter-spacing: -0.065em; color: #333; opacity: 0.4; overflow:hidden; word-break: break-word; display:block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.main-news-item a .date{margin-top: 3.5rem; font-size: 1.3rem; letter-spacing: -0.025em; font-weight: 500; color: #000; opacity: 0.9; display: block;}
.main-news-item a .img{position: absolute; left: 0; bottom: 0; width: 100%; height: 20rem; overflow: hidden;}
.main-news-item a .img img,
.main-news-item a .img span{position: relative; width: 100%; height: 100%; display: block; transition-property: transform;}

.main-news-item a,
.main-news-item a .category,
.main-news-item a .tit,
.main-news-item a .txt,
.main-news-item a .date,
.main-news-item a .img img,
.main-news-item a .img span{transition:var(--transition-custom);}

.main-news-item a:hover{background-color: var(--main-color);}
.main-news-item a:hover .category{color: var(--main-color); color: #fff;}
.main-news-item a:hover .tit,
.main-news-item a:hover .txt,
.main-news-item a:hover .date{color: #fff;}
.main-news-item a:hover .img img,
.main-news-item a:hover .img span{transform: scale(1.05);}

/* animated */
#mainNewsCon.animated .main-news-left-inner:before{width: 97.3958vw;}

@media all and ( min-width: 801px ){
	.main-news-list{transform: none !important;}
}
@media all and ( max-width: 1280px ){
	.main-news-box.display-pc{display: block;}
	.main-news-box.display-m {display: none;}
}
@media all and ( max-width: 800px ){
	#mainNewsCon{margin: 0; padding: 0; height: auto; position: relative;}
	.main-news-con{padding-top: 8rem !important; padding-bottom: 14rem !important; height: auto; display: block;}

	.main-news-left{position: relative; width: 100%; height: auto;}
	.main-news-left-inner{padding-top: 0 !important; height: auto !important; transform: none !important; width: 100% !important; max-width: none !important; max-height: none !important;}
	.main-news-left-inner:before{top: -8rem; left: calc(-1 * var(--area-padding)); margin-top: 0; width: 0; height: 65rem;}
	.main-news-left .main-tit-box{width: 100%;}
	.main-news-left .cm-main-btn-style{margin-top: 6rem;}

	.main-news-right{padding-top: 8rem; width: 100%; height: auto; opacity: 0; transform: translateX(5rem); transition:var(--transition-custom2); transition-property: opacity, transform;}
	.main-news-box.display-pc{display: none;}
	.main-news-box.display-m {display: block;}
	.main-news-box{width: 100%;}
	.main-news-list{margin: 0; width: 100%;}
	.main-news-item,
	.main-news-item:nth-child(even){transform: none;}
	.main-news-item.has-img {margin-bottom: 0; width: 100%; height: 38rem;}
	.main-news-item {margin-bottom: 0; width: 100%; height: auto;}
	.main-news-item + .main-news-item{margin-top: 2rem;}
	.main-news-item a{padding: 4rem 8.52%; border-radius: 0.5rem; box-shadow: 0.7rem 0.7rem 5.9rem -0.35rem rgba(0,0,0,0.11);}
	.main-news-item.has-img a{padding-bottom: 0;}
	.main-news-item a .category{font-size: 1.6rem;}
	.main-news-item a .tit{max-height: 2.9em; font-size: 2rem; line-height: 1.45;}
	.main-news-item a .txt{display: none;}
	.main-news-item a .date{margin-top: 3.5rem; font-size: 1.4rem;}
	/* .main-news-item a .img{ height: 15rem;} */
	/* animated */
	#mainNewsCon.animated .main-news-left-inner:before{width: 94.39%;}
	#mainNewsCon.animated .main-news-right{opacity: 1; transform: translateX(0);}
}
@media all and ( max-width: 640px ){
	.main-news-item{height: auto;}
	.main-news-item.has-img {margin-bottom: 0; width: 100%; height: 41rem;}
}


/* ******************  메인 커서 이펙트 ********************** */
#cmMainCursor{width: 17.6rem; height: 17.6rem;position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none; mix-blend-mode: difference;}
.cm-cursor-inner {display: block; width: 100%; height: 100%; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.cm-cursor-circle {display: block; width: 0; height: 0; position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; overflow: hidden; opacity: 0; border-radius: 50%; z-index: 1;background: #5cb9f5 no-repeat center center;}
#cmMainCursorTxt{width: 17.6rem; height: 17.6rem; position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;}
#cmMainCursorTxt .cm-cursor-circle{background: transparent;}
#cmMainCursorTxt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: spin 10s infinite linear;}

@media all and (max-width:800px){
	#cmMainCursor, #cmMainCursorTxt{visibility: hidden; opacity: 0;}
}