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

/* ****************** 
 * loading 
 ********************** */
.index-wrap .nav-open-btn{margin-top: calc( -1 * (var(--header-height) + var(--header-top))); transition: var(--transition-custom2); transition-property:margin-top;}
.index-wrap .nav-open-btn-box.effect-start .nav-open-btn{margin-top: 0;}
/* 메인비주얼 :: Background */
.main-cover{width: 100%; height: 100%; position: absolute; z-index: 9999; top: 0; left: 0; opacity: 1;  background-color: #000; transition:all 0.8s 0.1s;}

@media all and (min-width:1281px){
	.index-wrap #headerInnerWrap{transform: translateY(calc(-1 * (var(--header-height) + var(--header-top)))); transition: var(--transition-custom2); transition-property:transform;}
	.index-wrap #headerInnerWrap.active{transform: translateY(0);}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual {position:relative; width:100%; height:100vh; overflow:hidden; z-index:1; /* background-color:#000; */}   /* 비주얼높이값 이미지에맞게 수정 */
.main-visual-top-cover{position: absolute; top: 0; left: 0; width: 100%; height: 20%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.26+0,0.08+32,0+78,0+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.4) 30%,rgba(0,0,0,0.12) 65%, rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ z-index: 2;}
.main-visual-bottom-cover{position: absolute; bottom: 0; left: 0; width: 100%; height: 20%; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.26+0,0.08+32,0+78,0+100 */
background: linear-gradient(to top,  rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.4) 30%,rgba(0,0,0,0.12) 62%, rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ z-index: 2;}
.main-visual-container{width:100%; height:100%;}
.main-visual-swiper{height:100%;}
.main-visual-con{z-index:1; height:100%;}
.main-visual-item{position:relative; height:100%; overflow:hidden;}
/* 메인 비주얼 :: 이미지 */
..main-visual-container,
.main-visual-container .main-visual-wrapper{position:relative;  z-index:auto; height:100%}
.main-visual-container .swiper-slide {
	overflow: hidden;
	background-color:#333;
}
.main-visual-container .slide-inner {
	width: 100%;
	height: 100%;
	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-container .slide-inner.video:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: 1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+82,0.8+100 */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:100%;
    background-size:cover !important;
	opacity: 0.86;
}
.main-visual-img.display-m-img{display: none;}
.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-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content: space-between;
	padding-right: 8rem !important; padding-bottom: 5rem !important;
	width: 100%; height:100%;
	box-sizing: border-box;
}
.main-visual-txt-inner{max-width: 53rem; width: calc(100% - 67rem);}
.main-visual-txt-inner .main-visual-txt1,
.main-visual-txt-inner .main-visual-txt2,
.main-visual-prd-inner{
	opacity:0; 
}
.main-visual-txt-inner .main-visual-txt1{font-size:9rem; line-height: 0.8; font-weight:600; color:#fff;}
.main-visual-txt-inner .main-visual-txt2{margin-top: 2rem; font-size:2rem; line-height: 1.3; font-weight: 300; color:#fff;}

.main-visual-prd-inner{width: 65rem; height: 60%; height: 73%; max-height: 63rem; position: relative;}
.main-visual-prd-inner .prd-img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;     transform-origin: bottom; transform: rotate(36deg); opacity: 0;}
.main-visual-prd-inner .prd-info{position: absolute; bottom: 3rem; right: 0; width: 18.4rem; z-index: 4;}
.main-visual-prd-inner .prd-info h5{font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: #fff;}
.main-visual-prd-inner .prd-info p{margin-top: 1rem; font-size: 1.4rem; line-height: 1.71; letter-spacing: -0.01em; font-weight: 300; color: rgba(255,255,255,0.6);}

/* 메인 비주얼 :: 프로세스바 */
.main-visual-pagination-box{position: absolute; width:100%; left:0; bottom:9%; bottom: 3%; z-index:999;}
.main-visual-pagination-box .area-wide{position: relative; display: flex; flex-wrap:wrap;}
.main-visual-container .main-visual-pagination.swiper-pagination{position: relative; width: calc(100% - 20rem); text-align: left; display: flex;}
.main-visual-container .main-visual-pagination button.swiper-pagination-bullet {margin-left: 5rem; width: auto; height: auto; padding-bottom: 1.5rem; margin-bottom: 3rem; font-size: 1.8rem; line-height: 1.3; font-weight: 500; color: rgba(255,255,255,0.2); text-align: left; background-color: transparent !important; transform: none !important; /* border-bottom: 2px solid rgba(255,255,255,0.1); */ cursor: pointer; position: relative; border-radius: 0; opacity: 1;}
.main-visual-container .main-visual-pagination button:first-child {margin-left:0;}
.main-visual-container .main-visual-pagination .title {display:block; font-size: 1.8rem; line-height: 1.3; font-weight: 500; color: rgba(255,255,255,0.2); word-break: break-word; transition:var(--transition-custom); transition-property: color;}
.main-visual-container .main-visual-pagination .progress-bar {display:block; position:absolute; left:0; bottom:-2px;  width:0; height:2px; background-color: #fff; visibility: hidden;}
.main-visual-container .main-visual-pagination button.swiper-pagination-bullet-active .title {color: #fff;}

/* 메인 비주얼 :: 화살표 */
.main-visual-arrow{display: none;}
.main-visual-arrow button{width: 4rem; height: 4rem;}
.main-visual-arrow button + button{margin-left: 2rem;}
.main-visual-arrow button i{font-size: 3.2rem; color: #fff;}

.main-visual-pagination-box #rightBar{position: absolute; bottom: 0; right: 0; z-index: 11;}
#rightBar{}
#rightBar > ul{width: 100%; text-align: right;}
#rightBar > ul > li{position: relative;}
#rightBar > ul > li + li{margin-top: 2rem;}
#rightBar > ul > li > a{position: relative; padding: 0 1.5rem; min-width: 6rem; height: 6rem; font-size: 2.4rem; line-height: 6rem; text-align: center; color: #000; background-color: #fff; border-radius: 6rem; white-space: nowrap; display: inline-block; transition:var(--transition-custom); overflow: hidden; box-sizing: border-box;}
#rightBar > ul > li + li > a{background-color: var(--main-color); color: #fff;}
#rightBar > ul > li > a i{position: relative; top: 0.2rem;}
#rightBar > ul > li > a em{position: absolute; left: 3rem; font-size: 1.8rem; display: inline-block; vertical-align: middle; opacity: 0; transition:var(--transition-custom);}
.rightbar-newsletter-box{position: absolute; bottom: 0; right: 0; padding: 3rem; width: 30rem; height: 40rem; height: auto; background-color: #C5151C; border-radius: 2rem; box-sizing: border-box; display: none;}
.rightbar-newsletter-tit{display: flex; align-items: center; justify-content: space-between;}
.rightbar-newsletter-tit em{font-size: 1.8rem; line-height: 1.3; color: #fff;}
.rightbar-newsletter-tit i{font-size: 2.4rem; color: #fff;}
.rightbar-newsletter-close-btn{font-size: 2.4rem; color: #fff;}
.rightbar-newsletter-form{margin-top: 2.5rem;}
.rightbar-newsletter-form-list{margin: -0.5rem 0; display: flex; flex-wrap:wrap;}
.rightbar-newsletter-form-item{margin: 0.5rem 0; width: 100%; border-radius: 0.5rem; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;  position: relative;}
.rightbar-newsletter-form-item:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; content: ''; background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border-radius: 0.5rem; display: none;}
.main-now-tit{width: 12rem;}
.rightbar-newsletter-form-item input{padding: 0 2rem; padding-left: 8rem !important; width: 100%; height: 5rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff; border: 0; background-color: rgba(255,255,255,0.07); box-sizing: border-box; border-radius: 5rem !important; outline:1px solid transparent; transition:var(--transition-custom); transition-property: outline-color;}
.rightbar-newsletter-form-item input::placeholder{color: rgba(255,255,255,0.3);}
.rightbar-newsletter-form-item.focus input{outline-color: #fff;}
.rightbar-newsletter-form-item .form-label{position: absolute; top: 1.5rem; left: 2rem; font-size: 1.4rem; line-height: 2rem; letter-spacing: -0.02em; color: #fff; pointer-events: none;}
/* 수정css */
.add-css.rightbar-newsletter-box{width: 34rem;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form{margin-top: 4rem;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-list{margin: -1.5rem 0;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-item{margin: 1.5rem 0;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-item .form-label{top: -2.5rem; left: 0;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-item input {padding-left: 2rem !important; padding-right: 2rem !important;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-item.security-code .security-code-box input {padding-right: 9.5rem !important;}
.add-css.rightbar-newsletter-box .rightbar-newsletter-form-item.security-code .security-code-box .security-code {right: 2rem; width: 7.5rem; font-size: 1.3rem; line-height: 5rem;}
#visual .add-css.rightbar-newsletter-box{transform: translateY(140px);}
@media all and (max-width: 1280px) {
	#visual .add-css.rightbar-newsletter-box{transform: translateY(100px);}
}
@media all and (max-width: 800px) {
	#visual .add-css.rightbar-newsletter-box{transform: translateY(80px);}
}
/* // */
.rightbar-newsletter-btn{margin-top: 2rem;}
.rightbar-newsletter-btn .btn{width: 100%; height: 5rem; font-size: 1.8rem; color: #fff; background-color: #000; border-radius: 5rem;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.swiper-slide-active .main-visual-txt1,
.swiper-slide-active .main-visual-txt2{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.swiper-slide-active .main-visual-prd-inner{animation: img-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.swiper-slide-active .main-visual-txt1{animation-delay:0.1s;}
.swiper-slide-active .main-visual-txt2{animation-delay:0.8s;}
.swiper-slide-active .main-visual-prd-inner{animation-delay:0.5s;}
.swiper-slide-active .main-visual-prd-inner .prd-img.img1{animation: image-rorate-change1 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.2s;}
.swiper-slide-active .main-visual-prd-inner .prd-img.img2{animation: image-rorate-change2 1.2s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.2s;}
.swiper-slide-active .main-visual-prd-inner .prd-img.img3{animation: image-rorate-change3 1.6s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.2s;}
.swiper-slide-active .main-visual-prd-inner .prd-img.img4{animation: image-rorate-change4 2.4s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.2s;}
.main-visual-txt-inner .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.swiper-slide-active .main-visual-txt-inner .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-rorate-change1 {
	from {
		transform: rotate(36deg); opacity: 0;
	}
	to {
		transform: rotate(24deg); opacity: 0.04;
	}
}
@keyframes image-rorate-change2 {
	from {
		transform: rotate(36deg); opacity: 0;
	}
	to {
		transform: rotate(15deg); opacity: 0.05;
	}
}
@keyframes image-rorate-change3 {
	from {
		transform: rotate(36deg); opacity: 0;
	}
	to {
		transform: rotate(8deg); opacity: 0.12;
	}
}
@keyframes image-rorate-change4 {
	from {
		transform: rotate(36deg); opacity: 0;
	}
	to {
		transform: rotate(0); opacity: 1;
	}
}

@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 img-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(50px); 
		transform: translateX(50px); 
	}
	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);
	}
}

@media all and (min-width:801px){
	#rightBar > ul > li > a:hover{padding: 0 3rem 0 15rem;}
	#rightBar > ul > li > a:hover em{opacity: 1;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .main-tit{font-size: 2rem; line-height: 1.3; font-weight: 600; color: var(--main-color);}
.main-tit-box .main-sub-tit{display:block; margin-top:1.5rem; font-size: 6rem; line-height: 1.33; letter-spacing: -0.02em; color: #fff;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}

 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(What we do) -------- */
#mainWhatCon{position: relative; width: 100%; height: 100vh;}

.main-what-list-con{display:table; width:100%; height:100%; table-layout:fixed;}
.main-what-list-con-mobile{display:none;}
.main-what-item{display:table-cell; position:relative; width:12.5%; height:100%; vertical-align: top; box-sizing: border-box;}
.main-what-item:before{position: absolute; top: 0; left: 0; width: 1px; height: 0; background-color: rgba(255,255,255,0.12); content: ''; transition: height 1.6s ease-in-out;}
.main-what-item:first-child:before{display: none;}
.main-what-item:nth-child(odd):before{top: auto; bottom: 0;}
.main-what-item > a{position: relative; display: block; width: 100%; height:100%;}
.main-what-inner{padding-bottom: 36.5%; padding-bottom: 24%; display:flex; flex-direction: column; align-items:center; justify-content: flex-end; text-align: center; width: 100%; height:100%; box-sizing: border-box; opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; transition: var(--transition-custom2); pointer-events: none; will-change: transform; will-change: opacity;}
.main-what-inner .tit{width: 100%; height: 2.6em; font-size: 2.4rem; line-height: 1.41; letter-spacing: -0.01em; font-weight: 600; color:rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2rem); transition:var(--transition-custom);}
/* animated */
#mainWhatCon.animated .main-what-item:before{height: 100%;}
#mainWhatCon.animated .main-what-item .main-what-inner{opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto;}
#mainWhatCon.animated .main-what-item01 .main-what-inner{transition-delay: 0.1s;}
#mainWhatCon.animated .main-what-item02 .main-what-inner{transition-delay: 0.3s;}
#mainWhatCon.animated .main-what-item03 .main-what-inner{transition-delay: 0.5s;}
#mainWhatCon.animated .main-what-item04 .main-what-inner{transition-delay: 0.7s;}
#mainWhatCon.animated .main-what-item05 .main-what-inner{transition-delay: 0.9s;}
#mainWhatCon.animated .main-what-item06 .main-what-inner{transition-delay: 1.1s;}
#mainWhatCon.animated .main-what-item07 .main-what-inner{transition-delay: 1.3s;}

#mainWhatCon .main-what-bg-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
#mainWhatCon .main-what-bg-part {position: absolute;top: 0; left: 0; width: 100%; height: 100%; display: flex;}
#mainWhatCon .main-what-bg-part span {position: relative; display: block; width: 16.66%; height: 100%; overflow: hidden;}
#mainWhatCon .main-what-bg-part span:before {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: #000; transition: all 1.4s ease-in-out;}
#mainWhatCon .main-what-bg-part span:after {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; transform: translateY(100%);  transition: all 2.6s ease-in-out;}
#mainWhatCon .main-what-bg-part span:nth-child(1):before { transform: translateY(-90%);}
#mainWhatCon .main-what-bg-part span:nth-child(2):before { transform: translateY(-84%);}
#mainWhatCon .main-what-bg-part span:nth-child(3):before { transform: translateY(-78%);}
#mainWhatCon .main-what-bg-part span:nth-child(4):before { transform: translateY(-72%);}
#mainWhatCon .main-what-bg-part span:nth-child(5):before { transform: translateY(-66%);}
#mainWhatCon .main-what-bg-part span:nth-child(6):before { transform: translateY(-60%);}
#mainWhatCon .main-what-bg-part span:nth-child(7):before { transform: translateY(-54%);}
#mainWhatCon .main-what-bg-part span:nth-child(8):before { transform: translateY(-48%);}

#mainWhatCon .main-what-bg-part span:nth-child(1):after {transform: translateY(116%); transition-delay:0.16s;}
#mainWhatCon .main-what-bg-part span:nth-child(2):after {transform: translateY(113%); transition-delay:0.13s;}
#mainWhatCon .main-what-bg-part span:nth-child(3):after {transform: translateY(110%); transition-delay:0.10s;}
#mainWhatCon .main-what-bg-part span:nth-child(4):after {transform: translateY(108%); transition-delay:0.08s;}
#mainWhatCon .main-what-bg-part span:nth-child(5):after {transform: translateY(106%); transition-delay:0.06s;}
#mainWhatCon .main-what-bg-part span:nth-child(6):after {transform: translateY(104%); transition-delay:0.04s;}
#mainWhatCon .main-what-bg-part span:nth-child(7):after {transform: translateY(102%); transition-delay:0.02s;}
#mainWhatCon .main-what-bg-part span:nth-child(8):after {}

#mainWhatCon .bg-item{position: absolute; top: 8%; left: 0; width: 100%; height: 100%; opacity: 0.8; transition: all 1.2s ease-in-out;}
#mainWhatCon .bg-item div{
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility:hidden;
	/* transition:var(--transition-custom); */
	background-size: cover !important;
}

#mainWhatCon.animated .bg-item {top: 0;}
#mainWhatCon.animated .main-what-bg-part span:before {transform: translateY(-100%); }
#mainWhatCon.down .main-what-bg-part span:after {transform: translateY(-100%); }

/* 고정 텍스트 */
.main-what-fixed-txt{
	position:absolute; 
	left:0px; top: calc(var(--header-height) + 8.7%); top: 16%;
	width:100%;
	z-index:1;
}
.main-what-fixed-txt{text-align: center;}
.main-what-tit-group,
.main-what-txt-group{position: relative; width: 100%;}
.main-what-tit-group{height: 2.6rem;}
.main-what-txt-group{margin-top:2rem;}
.main-what-tit-group .main-tit{line-height: 1.33;}
.main-what-txt-group .main-sub-tit{margin-top: 0; line-height: 1.33; font-weight: 600;}
.main-what-txt-group .main-sub-tit br{display: none;}
.main-what-tit-group li,
.main-what-txt-group li{position: absolute; top: 0; left: 0; opacity: 0; width: 100%; transition:var(--transition-custom); transition-property: opacity;}

@media all and ( min-width: 801px ){
	/* Over시 */
	.main-what-item.item-active .main-what-inner .tit{color: #fff;}
	
	#mainWhatCon .bg-item.bg-active div{
		visibility:visible;
		opacity:1.0;filter:Alpha(opacity=100);
	}

	.main-what-tit-group li.tit-active,
	.main-what-txt-group li.tit-active{opacity: 1;}
}
@media all and ( max-width: 800px ){
	/* Over시 */
	.main-what-item.active .main-what-inner .tit{color: #fff;}
	
	#mainWhatCon .bg-item div{transition:var(--transition-custom); transition-property: visibility, opacity;}
	#mainWhatCon .bg-item.active div{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}

	.main-what-tit-group li.active,
	.main-what-txt-group li.active{opacity: 1;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(News Room) -------- */
#mainNewsCon{position: relative; padding: 18rem 0; background: rgba(0,0,0,0.6) url("../images/main/main_news_bg.png") center/cover no-repeat; background-size: cover;}
#mainNewsCon:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/main/main_news_cover.png") center/cover no-repeat; content: ''; z-index: -1;}

.main-news-con{position: relative;}
.main-news-bottom{margin-top: 10rem; position: relative;}
.main-news-btn{position: absolute; top: 50%; margin-top: -6.6rem; width: 7.2rem; height: 7.2rem; font-size: 7.2rem; color: #fff; z-index: 11; transition: color 0.3s;}
.main-news-btn.swiper-button-disabled {color: rgba(255, 255, 255, 0.25); cursor: auto;}
.main-news-prev{left: -12rem;}
.main-news-next{right: -12rem;}
.main-news-container{position: relative;}
.main-news-list{display: flex;}
.main-news-item{width: 33.33%;}
.main-news-item a{display: block; width: 100%; overflow: hidden;}
.main-news-inner{width: 100%; transform: translateY(101%); position: relative; transition:var(--transition-custom2); transition-property: transform; backdrop-filter: blur(2rem); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,111111+100&0.03+0,0.03+100 */
background: linear-gradient(to bottom,  rgba(17,17,17,0.03) 0%,rgba(255,255,255,0.03) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-news-img{position: relative; z-index: 1; width: 100%; height: 0; padding-top: 60%; overflow: hidden;}
.main-news-img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:var(--transition-custom);}
.main-news-txt{padding: 4rem; /* background-color: rgba(17,17,17,0.03); */}
.main-news-txt .category{font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 500; line-height: 1.3; color: var(--main-color); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position: relative;}
.main-news-txt .tit{margin-top: 2rem; height: 3.16em; font-size: 2.4rem; line-height: 1.58; letter-spacing: -0.02em; font-weight: 500; color: #fff; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: relative; transition:var(--transition-custom); transition-property: color;}
.main-news-txt .date{margin-top: 3.5rem; font-size: 1.4rem; line-height: 1.3; color: rgba(255,255,255,0.5); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position: relative; transition:var(--transition-custom); transition-property: color;}

/* Controls */
.main-news-controls {display:flex; justify-content:space-between; align-items:center;}
.main-news-controls .main-news-pagination,
.main-news-controls .swiper-scrollbar {position:relative; width:100%; height:2px; background-color:rgba(255,255,255,0.1); margin-right:0; margin-top:8rem;}
.main-news-controls .main-news-pagination .swiper-pagination-progressbar-fill,
.main-news-controls .swiper-scrollbar-drag {height:2px; background-color:#fff; margin-top:0; cursor:pointer;}


.main-news-container.animated .main-news-inner{transform: translateY(0);}
.main-news-container.animated .main-news-item:nth-child(1) .main-news-inner{transition-delay:0.1s;}
.main-news-container.animated .main-news-item:nth-child(2) .main-news-inner{transition-delay:0.3s;}
.main-news-container.animated .main-news-item:nth-child(3) .main-news-inner{transition-delay:0.5s;}

@media all and ( min-width: 801px ){
	.main-news-inner:hover .main-news-img span{transform: scale(1.1) rotate(0.002deg);}
	.main-news-inner:hover .main-news-txt .tit{color: #000;}
	.main-news-inner:hover .main-news-txt .date{color: rgba(0,0,0,0.5);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Now we are) -------- */
#mainNowCon{padding-bottom: 15rem; background-color: #000;}
.main-now-outer{position: relative; padding: 8rem 0 3rem; background: url("../images/main/main_now_bg.jpg") center/cover no-repeat;}
.main-now-outer:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../images/main/main_now_cover.png") center/cover no-repeat;}

.main-now-con{display: flex; flex-wrap:wrap; justify-content: space-between; position: relative;}

#mainNowCon .main-now-left{width: calc(100% - 64rem); max-width: 46rem; padding-right: 2rem; box-sizing: border-box; text-align: left;}
.main-now-left-inner{padding-top: 10rem;}
#mainNowCon .main-now-left .main-tit-box {text-align: left;}
.main-tech-support-btn{margin-top: 6rem; width: 24rem; height: 6rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff; border-radius: 6rem; border-radius: 6rem; display: block; background-color: var(--main-color); border: 2px solid var(--main-color); box-sizing: border-box;}
.main-tech-support-btn .txt{width: 100%; height: 100%; padding: 0 2.5rem 0 3rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
.main-tech-support-btn .txt i{font-size: 2.4rem;}
.main-tech-support-txt{margin-top: 3rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff;}
.main-tech-support-txt em{font-size: 2rem; margin-right: 0.5rem; color: var(--main-color);}
.main-tech-support-txt.pc-none,
.main-tech-support-btn.pc-none{display: none;}

.main-now-right{width: 64rem; padding-top: 10rem;}
.main-now-container{}
.main-now-info-txt{margin-bottom: 1.5rem; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0.02em; color: #fff; text-align: right;}
.main-now-info-txt em{font-size: 2rem; margin-right: 0.5rem; color: var(--main-color);}
.main-now-list{margin: -1rem 0; display: flex; flex-wrap:wrap;}
.main-now-item{margin: 1rem 0; width: 100%; border-radius: 0.5rem; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;  position: relative;}
.main-now-item:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; content: ''; background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border-radius: 0.5rem; display: none;}
.main-now-tit{width: 12rem;}
.main-now-item input,
.main-now-item textarea{padding: 0 2rem; padding-left: 12rem !important; width: 100%; font-size: 1.55rem; line-height: 1.3; letter-spacing: -0.05em; color: #fff; border: 0; background-color: rgba(255,255,255,0.06); backdrop-filter: blur(20px); box-sizing: border-box; border-radius: 0.5rem !important; outline:1px solid transparent; transition:var(--transition-custom); transition-property: outline-color;}
.main-now-item input{height: 6rem;}
.main-now-item textarea{padding: 2rem; height: 14rem; resize: none;}
.main-now-item input::placeholder,
.main-now-item textarea::placeholder{color: rgba(255,255,255,0.5);}
.main-now-item.focus input,
.main-now-item.focus textarea{outline-color: #fff;}
.main-now-item.error input,
.main-now-item.error textarea{outline-color: var(--main-color);}
.main-now-item .form-label{position: absolute; top: 2rem; left: 3rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; color: #fff; font-weight:600; pointer-events: none;}
.main-now-item .form-label em{position: absolute; top: -1rem; left: -2rem; font-size: 2rem; color: var(--main-color);}
/* 연락처 */
.phone-form-box{padding-left: 12rem !important; padding-right: 0; width: 100%; display: flex; flex-wrap:wrap; align-items: center; border: 0; background-color: rgba(255,255,255,0.06); backdrop-filter: blur(20px); box-sizing: border-box; border-radius: 0.5rem !important; outline:1px solid transparent; transition:var(--transition-custom); transition-property: outline-color;}
.phone-form-box .fakeform-selectbox{width: 13rem;}
.phone-form-box .fakeform-selectbox .select-title{text-indent: 3rem; background: none; backdrop-filter:none;}
.phone-form-box .fakeform-selectbox .select-title.active {border-color: transparent;}
.phone-form-box input{padding-left: 0 !important; padding-right: 0 !important; width: calc(25% - 1rem); text-align: center; background: none; backdrop-filter:none; outline: none;}
.phone-form-box .hypen{font-size: 2rem; color: #fff; width: 1rem; text-align: center;}
.main-now-item.focus .phone-form-box{outline-color: #fff;}
.main-now-item.focus .phone-form-box input{outline: none;}
.main-now-item.error .phone-form-box{outline-color: var(--main-color);}
.main-now-item.error .phone-form-box .fakeform-selectbox .select-title.active,
.main-now-item.error .phone-form-box .fakeform-selectbox .select-title{border-color: transparent;}
/* 보안코드 */
.security-code-box{position: relative; width: 100%; border: 0; box-sizing: border-box;}
.security-code-box .write-input{padding-left: 12rem !important; padding-right: 13rem; width: 100%; height: 6rem;}
.security-code-box .security-code{position: absolute; top: 0; right: 3rem; width: 10rem; font-size: 1.6rem; line-height: 6rem; letter-spacing: -0.015em; color: #fff; text-align: right;}


/* ***********************
	*	페이크폼 스타일 추가css 
*********************** */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {text-indent: 12rem; width: 100% !important; height: 6rem; text-align: left; vertical-align: middle; border:0; line-height: 6rem; font-size:1.5rem; color: #fff; border: 1px solid transparent; background-color: rgba(255,255,255,0.06); backdrop-filter: blur(20px); display: block; box-sizing: border-box; cursor: pointer; border-radius:0.5rem;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:1.5rem; transform:translateY(-50%); content: "\e942"; font-size:2rem; color: #fff; text-indent: 0;}
.fakeform-selectbox .select-title strong {width: 100%; font-weight: 400; word-break: break-all; display: block; overflow: hidden;}
.fakeform-selectbox .select-title.active{border-color: #fff; border-radius: 0.5rem 0.5rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e945";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}
.fakeform-selectbox.gray-ver .select-title{color: #000;}
.fakeform-selectbox.gray-ver .select-title.active{border-color: #000;}
.main-now-item.error .fakeform-selectbox .select-title,
.main-now-item.error .fakeform-selectbox .select-title.active{border-color: var(--main-color);}
/* 옵션창 */
.select-option {border: 1px solid #ddd; border-top: 0; background: #fff; max-height: 200px; overflow: auto; z-index: 999 !important; border-radius: 0 0 0.5rem 0.5rem; margin-top: 0;}
.select-option.gray-ver {background: #EEEEEE; border-color: #000;}
html:not(.is-mobile) .select-option::-webkit-scrollbar {
	width: 7px;
}
html:not(.is-mobile) .select-option::-webkit-scrollbar-track {
	background-color: #f2f2f2;
}
html:not(.is-mobile) .select-option::-webkit-scrollbar-thumb {
	background-color: #333;
	border-radius:7px;
	transition:all 0.5s;
}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.5rem; line-height: 1.5; color: #666; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; padding: 1.5rem 3rem; display: block; overflow: hidden; cursor: pointer;}
.select-option span:hover {background: #f2f2f2;}
.select-option span.selected {color: #000; font-weight: 600;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}

.main-now-agree{margin-top: 4rem;}
.main-now-agree .agree-txt{padding-left: 2rem; font-size:1.5rem; letter-spacing:-0.02em; color:#fff;}
.main-now-agree .agree-txt input{display:none;}
.main-now-agree .agree-txt label{position:relative; padding-left:3.4rem;}
.main-now-agree .agree-txt label:before {position: absolute; top: -0.1rem; left: 0; font-size: 2.4rem; content: "\e92c"; font-family: xeicon;}
.main-now-agree .agree-txt input:checked + label:before {color: #fff; content: "\e92b";}
.main-now-agree .agree-txt input:checked + label i{color:#fff;}
.main-now-agree ul{}
.main-now-agree ul li{margin-top: 2.5rem; padding-left: 2rem; position: relative; padding-right: 7rem;}
.main-now-agree ul li + li{margin-top: 2.5rem;}
.main-now-agree ul li .agree-txt label{color: rgba(255,255,255,0.5); max-width: calc(100% - 5rem);  display: inline-block;}
.main-now-agree ul li .agree-txt input:checked label{color:#fff;}
.main-now-agree ul li a{position: absolute; top: 0; right: 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); transition:var(--transition-custom); transition-property: color, border-color;}
.main-now-btn{margin-top:6rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-end;}
.main-now-btn .btn{width: 24rem; height: 6rem; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 600; color: #000; background-color: #fff; border: 2px solid #fff; border-radius: 6rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}

@media all and ( min-width: 801px ){
	.main-now-agree ul li a:hover{color: #fff; border-color: #fff;}
}
@media (hover: hover) and (min-width:801px) {
	.main-tech-support-btn.cm-fill-ani-JS:hover{background-color: transparent; border-color: #fff;}
	.main-tech-support-btn.cm-fill-ani-JS:hover .txt{color: #fff;}
	.main-now-btn .btn.cm-fill-ani-JS:hover{background-color: transparent;}
	.main-now-btn .btn.cm-fill-ani-JS:hover .txt{color: #fff;}
}