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

/* 메인 비주얼 :: 처음들어왔을때 검은화면 */
.main-bk-bg {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}

/* ******************  메인 load ********************** */
.main-visual-conuter{bottom: calc(9.18% - 10rem); opacity: 0; transition: bottom 1.5s, opacity 1.5s;}
.main-page.active-page .main-visual-conuter{bottom:9.18%; opacity: 1;}

.main-scroll-icon{bottom: calc(11.2% - 10rem); opacity: 0; transition: bottom 1.5s, opacity 1.5s;}
.main-page.active-page .main-scroll-icon{bottom:11.2%; opacity: 1;}

@media all and ( min-width: 1281px ){
	.main-page #header{top:calc(-1 * var(--header-height)); transition:top 1.5s;}
	/* .main-page.active-page.header-off #header{top:calc(-1 * var(--header-height));} */
	.main-page #headerInnerWrap{background:transparent;}
	.main-page.active-page .nav-open-btn,
	.main-page.active-page #header{top:0;}

	.white-ver #header .logo .color{opacity: 0; visibility: hidden;}
	.white-ver #header .logo .white{opacity: 1; visibility: visible;}
	.white-ver #gnb > ul > li > a{color: #fff;}
	.white-ver #gnb.open > ul > li > a{color: #282828;}
	.white-ver #gnb > ul > li > a:hover,
	.white-ver #gnb > ul > li > a:focus,
	.white-ver #gnb > ul > li.selected > a{color:var(--main-color2);}
	.white-ver .header-lang .lang-open-btn{color: rgba(255,255,255,0.4);}
	.white-ver .sitemap-line-btn .line.line2{background-color: #fff;}
	/* gnb-open */
	.white-ver #header.gnb-open .logo .color{opacity: 1; visibility: visible;}
	.white-ver #header.gnb-open .logo .white{opacity: 0; visibility: hidden;}
	.white-ver .gnb-open .header-lang .lang-open-btn{color:#666;}
	.white-ver .gnb-open .sitemap-line-btn .line.line2{background-color:#666;}
}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage {background: url("/images/main/main_bg.jpg") no-repeat 50% 20% / cover;}
#fullpage #mainVisual{height:100vh}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#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-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{
	display:flex;
	align-items:flex-end;
	height:100%; padding-bottom: 5.1% !important; box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:2.4rem; line-height: 1.3; font-weight:500; letter-spacing:-0.05em; color:rgba(255,255,255,0.8);}
.main-visual-txt-box .main-visual-txt2{margin-top: 2.5rem; font-size:8rem; line-height: 1.05; font-weight: 700; letter-spacing:-0.04em; color:#fff;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.3s;}
.active-item .main-visual-txt2{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(-50px); 
		transform: translateY(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-active-animation2 {
	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-conuter{position:absolute; /* bottom:9.18%; */ left:0; width:100%; z-index:11;}
.main-visual-conuter .area-box{display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-end;}
.main-visual-conuter .num{font-size:1.2rem; color:#fff; opacity: 0.2;}
.main-visual-conuter .num.cur-num{opacity: 1; font-weight: 700;}
.main-visual-conuter .progress-bar{margin:0 1rem; width: 14rem; height: 2px; background-color: rgba(255,255,255,0.3); position: relative;}
.main-visual-conuter .progress-bar span{position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #fff; display: block;}

/* 메인 비주얼 :: pause,play */
.main-visual-conuter .slick-control-btns{margin: 0 1rem;}
.main-visual-conuter .slick-control-btns button{color:#fff;}
.main-visual-conuter .slick-control-btns button i{font-size:1.6rem; opacity: 0.3; transition:var(--transition-custom); transition-property: opacity;}
.main-visual-conuter .slick-control-btns .slick-play-btn{display:none;}

/* 메인 비주얼 :: 화살표 */
.main-visual-conuter .main-visual-btn{font-size:2rem; color:#fff; opacity: 0.3; transition:var(--transition-custom); transition-property: opacity;}
.main-visual-conuter .main-visual-prev{margin-left: 2rem;}
.main-visual-conuter .main-visual-next{}

.main-visual-conuter .slick-control-btns button:hover i,
.main-visual-conuter .main-visual-btn:hover{opacity: 1;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:fixed; left:50%; margin-left: 86rem; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:block; font-size: 10px; letter-spacing:0.05em; font-weight:700; color: #fff; transform: rotate(90deg); white-space: nowrap;}
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section#mainVisual,
	#fullpage .fp-section#mainVisual .fp-tableCell{height:98rem !important;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:7rem; line-height: 1.11; font-weight:700; color: #fff;}
.main-tit-box .main-tit span{margin-left: 1rem; font-size: 2rem; letter-spacing: -0.05em; font-weight: 500;}
.main-tit-box .main-sub-tit{margin-top: 3.5rem; font-size: 1.8rem; line-height: 1.66; letter-spacing: -0.025em; color: rgba(255,255,255,0.7);}
.main-tit-box.has-btn{position: relative; padding-right: 4rem;}
.main-tit-box.has-btn .main-btn{position: absolute; top: 2.6rem; right: 0; font-size: 2.4rem; color: #fff; display: block;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Company) -------- */
#mainCompanyCon{position: relative; z-index: 1;}
.main-company-con{position: relative; width: 100%; height: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.2,1.2); transition:all 2s linear;}

.main-company-inner{position: relative; width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-company-inner .txt{font-size: 9rem; font-weight: 700; letter-spacing: -0.035em; color: #fff; opacity:0;}
.main-company-inner .line{position: relative; width: 60rem; width: 38.96%; height: 2px; background-color: rgba(255,255,255,0.5); display: block; /* opacity:0; */}
.main-company-inner .line em{position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #fff; display: block; transition: width 1.5s;}
.main-company-inner .img{height: 13rem; opacity:0;}
.main-company-inner .img img{max-height: 100%;}

/* animated */
.main-company-con.animated .main-section-bg .main-section-bg-inner{transform:scale(1.0,1.0);}
.main-company-con.animated .main-company-inner .txt{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;}
/* .main-company-con.animated .main-company-inner .line{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.8s;} */
@media all and ( min-width: 1281px ){
	.main-company-con.animated .main-company-inner .line em{animation: progressAnim 3.5s 1.5s cubic-bezier(0.4, 0, 0.2, 1) both infinite; animation-delay:0.6s;}
}
.main-company-con.animated .main-company-inner .img{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:1.9s;}

@keyframes progressAnim{	
	0{width:0%; opacity: 1;}
	50%{width:100%;}
	80%{width:100%; opacity: 1;}
	90%{width:100%; opacity: 0;}
	100%{width:100%; opacity: 0;}
}
@keyframes progressAnimM{	
	0{height:0%; opacity: 1;}
	50%{height:100%;}
	80%{height:100%; opacity: 1;}
	90%{height:100%; opacity: 0;}
	100%{height:100%; opacity: 0;}
}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section#mainCompanyCon,
	#fullpage .fp-section#mainCompanyCon .fp-tableCell{height:98rem !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Product) -------- */
#mainProductCon{position: relative; overflow: hidden;}
#mainProductCon:before{position: absolute; top: -16rem; left: 50%; margin-left: 39rem; width: 100rem; height: 100rem; content: ''; background: url("/images/main/main_product_cir_bg.png") no-repeat 50% 50% / cover; animation: spin 30s infinite linear;}
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
#mainProductCon .main-product-img:before{display: none;}

.main-product-con{position: relative; z-index: 1;}
.main-product-list{}
.main-product-list .slick-list{overflow: visible;}
.main-product-item{}
.main-product-inner{display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-product-txt{width: 50%; padding-right: 7.79%; box-sizing: border-box;}
.main-product-txt .sub-tit{font-size: 2.4rem; line-height: 1.3; font-weight: 700; color: #93e038; /* var(--main-color) */display: block;}
.main-product-txt .tit{margin-top: 2.5rem; font-size: 8rem; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: #fff;}
.main-product-txt .txt{margin-top: 4rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.03em; color: rgba(255,255,255,0.7);}
.main-product-txt .txt b{font-weight: 700;}
.main-product-txt .btn{margin-top: 3rem; width: 14.8rem; height: 6rem; display: flex; align-items: center; color: #fff; opacity: 0.3; position: relative; transition:var(--transition-custom); transition-property: opacity;}
.main-product-txt .btn:before{position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; /* border: 1px solid rgba(255,255,255,0.6); */ background-color: var(--main-color2); z-index: -50;  border-radius: 100%; box-sizing: border-box; content: ''; opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.main-product-txt .btn span{font-size: 1.7rem; font-weight: 700;}
.main-product-txt .btn i{margin-left: 1.2rem; font-size: 2rem;}
.main-product-img{position: relative; width: 45.45%; max-width: 70rem;}
.main-product-img:before{position: absolute; top: -0.5rem; left: 9rem; width: 3rem; height: 3rem; background-color: var(--main-color2); border-radius: 100%; content: ''; transition:var(--transition-custom); transition-property: top;}
.main-product-img .small-img{position: absolute; left: -7rem; bottom: 1.5rem; width: 20rem; transition:var(--transition-custom2); transition-property: bottom;}
.main-product-img .large-img,
.main-product-img .small-img span{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 100%; display: block; overflow: hidden;}
.main-product-img .small-img span{box-shadow: 0.4rem 0.4rem 4rem -0.2rem rgba(0,0,0,0.2);}
.main-product-img .large-img img,
.main-product-img .small-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.main-product-dot{position: absolute; top: 50%; left: 0; margin-top: 24rem; width: 100%;}
.main-product-dot .area{width: 100%; display: flex; box-sizing: border-box;}
.main-product-dot .slick-dots{width: 50%; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;}
.main-product-dot .slick-dots li{margin-right: 1.6rem;}
.main-product-dot .slick-dots li button{font-size: 0; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; background-color: #fff; opacity: 0.3; transition:var(--transition-custom); transition-property: width, opacity;}
.main-product-dot .slick-dots li.slick-active button{width: 2.5rem; opacity: 1;}

.main-product-txt .btn:hover,
.main-product-txt .btn:hover:before{opacity: 1;}

/* animated */
.main-product-txt .sub-tit,
.main-product-img .large-img,
.main-product-txt .tit,
.main-product-txt .txt,
.main-product-txt .btn,
.main-product-dot,
.main-product-img:before,
.main-product-img .small-img{opacity: 0;}
.active-item .main-product-txt .sub-tit,
.animated .main-product-txt .sub-tit{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.5s;}
.active-item .main-product-txt .tit,
.animated .main-product-txt .tit{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.6s;}
.active-item .main-product-img .large-img,
.animated .main-product-img .large-img{animation: text-active-animation2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.9s;}
.active-item .main-product-txt .txt,
.active-item .main-product-txt .btn,
.active-item .main-product-img:before,
.active-item .main-product-img .small-img,
.animated .main-product-txt .txt,
.animated .main-product-txt .btn,
.animated .main-product-img:before,
.animated .main-product-img .small-img{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:1.3s;}
.active-item .main-product-dot,
.animated .main-product-dot{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:1.7s;}
/* prev */
.prev-con .main-product-img:before{top: -60rem;}
.prev-con .main-product-img .small-img{bottom: 30rem;}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section#mainProductCon,
	#fullpage .fp-section#mainProductCon .fp-tableCell{overflow: visible; height:98rem !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(technology) -------- */
#mainTechnologyCon{position: relative; overflow: hidden;}
#mainTechnologyCon:before{position: absolute; top: 15.5rem; left: 50%; margin-left: -130rem; width: 100rem; height: 100rem; content: ''; background: url("/images/main/main_product_cir_bg.png") no-repeat 50% 50% / cover; animation: spin 30s infinite linear; z-index: 1;}

.main-technology-con .main-product-inner{flex-direction: row-reverse;}
.main-technology-con .main-product-txt{padding-right: 0; padding-left: 7.79%;}
.main-technology-con .main-product-img:before{background-color: var(--main-color);}
.main-technology-con .main-product-dot .area{justify-content: flex-end;}
.main-technology-con .main-product-dot .slick-dots{padding-left: 7.79%;}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section#mainTechnologyCon,
	#fullpage .fp-section#mainTechnologyCon .fp-tableCell{overflow: visible; height:98rem !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(global) -------- */
#mainGlobalCon{}
.global-map-con{position:relative; width: 100%; height: 100vh; z-index: 1;}
.global-map-con > img{position: absolute; top: 50%; left: 50%; margin-top: -46rem; margin-left: -96rem; max-width: 192rem; display: block; z-index: 1; transition: opacity 1.2s ease-in-out;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: 2;}

.nation-circle{position:absolute; left:50%; top:50%; display:inline-block; width:8rem; height:8rem;}
.nation-circle .wave-group{transition: opacity 1.2s ease-in-out;}
.nation-circle .wave-group > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle .wave-group > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle .wave-group > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle .wave-group > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle .wave-group > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle .wave-group > span {
	border:1rem solid rgba(118,183, 41, 0.05) ;
	border-radius: 50%;
	animation-fill-mode: both;
	position: absolute;
	left: 0; top: 0px;
	opacity: 0; margin: 0;
	width: 100%; height: 100%;
	box-sizing: border-box;
	box-shadow: 0.5rem 0.5rem 2rem -0.25rem rgba(0,0,0,0.2);
	animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
}
.nation-circle i{display:block; position:absolute; top:50%; left:50%; margin:-0.35rem 0 0 -0.35rem; width:0.7rem; height:0.7rem; background-color:#fff; transform: rotate(45deg);}
.nation-circle p{position:absolute; top:50%; left:50%; padding: 0 1rem; width:16rem; height:4.5rem; font-size: 1.6rem; line-height: 1.3; font-weight: 700; color: #555; background-color: #fff; border-radius: 4.5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: 0.5rem 0.5rem 2rem -0.25rem rgba(0,0,0,0.2);}
/* 01 */
.nation-circle.nation-circle1{margin-left: -33.1rem; margin-top: 2.5rem;}
.nation-circle.nation-circle1 i{background-color: var(--main-color);}
.nation-circle.nation-circle1 p{margin-top: -7rem; margin-left: -8rem; transition:var(--transition-custom2); transition-property: background-color, color;}
/* 02 */
.nation-circle.nation-circle2{margin-left: -44.1rem; margin-top: 13.1rem;}
.nation-circle.nation-circle2 p{margin-top: -2.25rem; margin-left: -19rem;}
/* 03 */
.nation-circle.nation-circle3{margin-left: -25.1rem; margin-top: 3.1rem;}
.nation-circle.nation-circle3 p{margin-top: -2.25rem; margin-left: 2rem;}
/* 04 */
.nation-circle.nation-circle4{margin-left: 62.9rem; margin-top: 11.1rem;}
.nation-circle.nation-circle4 p{margin-top: -7rem; margin-left: -8rem;}

@keyframes nation-circle {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(10);
		transform: scale(10);
		opacity: 0; 
	}
}

.main-global-txt-con{position: absolute; top: 50%; left: 0; width: 100%; z-index: 3;}
.main-global-txt-con .area{width: 100%; display: flex; justify-content: flex-end; box-sizing: border-box;}
.main-global-txt-con .main-tit-box{padding: 0 7.792%; width: 50%; box-sizing: border-box;/* width: 65rem; */}

/* animated */
.global-map-con > img,
.nation-circle.nation-circle1,
.nation-circle.nation-circle2,
.nation-circle.nation-circle3,
.nation-circle.nation-circle4,
.main-global-txt-con,
.nation-circle.nation-circle1 .wave-group{opacity: 0;}
.animated.global-map-con > .img{opacity: 1; transition-delay:0.1s;}
.animated .nation-circle.nation-circle1{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.4s;}
.animated .nation-circle.nation-circle2,
.animated .nation-circle.nation-circle3,
.animated .nation-circle.nation-circle4,
.animated.main-global-txt-con{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.8s;}
.animated .nation-circle.nation-circle1 p{background-color: var(--main-color); color: #fff; transition-delay:1.2s;}
.animated .nation-circle.nation-circle1 .wave-group{opacity: 1; transition-delay:1.2s;}

@media all and ( min-width: 1281px ){
	#mainGlobalCon.anim-start{overflow: hidden;}
}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section#mainGlobalCon,
	#fullpage .fp-section#mainGlobalCon .fp-tableCell{overflow: visible; height:126.3rem !important;}
	.global-map-con{height: 100%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Customer) -------- */
#mainCustomerCon{position: relative;}
.main-customer-con{position: relative; z-index: 1; display: flex; flex-wrap:wrap; justify-content: space-between;}

/* 왼쪽 영역 */
.main-customer-left{width: 47%; max-width: 65rem;}
.main-customer-list{margin-top: 7rem; border-top: 1px solid #fff;}
.main-customer-item{width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3);}
.main-customer-item a{position: relative; padding: 3rem 5.5rem 3rem 4.61%; width: 100%; box-sizing: border-box; display: block;}
.main-customer-item a:after{position: absolute; top: 50%; margin-top: -1.6rem; right: 1.5rem; font-size: 3.2rem; color: #fff; content: "\e914"; font-family:xeicon !important; opacity: 0.3; transition:var(--transition-custom); transition-property: opacity;}
.main-customer-item .tit{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity: 0.7; transition:var(--transition-custom); transition-property: opacity, font-weight;}
.main-customer-item .txt{margin-top: 1.5rem; height: 3.14em; font-size: 1.4rem; line-height: 1.57; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-customer-item .date{margin-top: 1.7rem; font-size: 1.4rem; line-height: 2rem; color: rgba(255,255,255,0.3); display: inline-block;}
.main-customer-item.new .date{position: relative; padding-right: 2.5rem;}
.main-customer-item.new .date:before{position: absolute; top: 0; right: 0; font-size: 1.6rem; color: #71bf44; content: "\e9a8"; font-family:xeicon !important;}
/* thum */
.main-customer-item.has-thum a{display: flex; flex-wrap:wrap; align-items: center;}
.main-customer-thum{width: 40.7%;}
.main-customer-thum span{display: block; position: relative; width: 100%; height: 0; padding-top: 65.21%;}
.main-customer-txt{width: 59.3%; padding-left: 7%; box-sizing: border-box;}
/* hover */
.main-customer-item a:hover .tit{opacity: 1; font-weight: 700;}
.main-customer-item a:hover:after{opacity: 1;}

/* 오른쪽 영역 */
.main-customer-right{width: 47%; max-width: 68rem; margin-right: -3rem;}
.main-customer-form-txt{margin-top: 7rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #ccc; text-align: right;}
.main-customer-form-txt em{color: var(--main-color);}
.main-customer-form{margin: 1rem -1rem -0.5rem; display: flex; flex-wrap:wrap;}
.main-customer-form-item{margin: 0.5rem 1rem; width: calc(50% - 2rem); display: flex; flex-wrap:wrap; align-items: center;}
.main-customer-form-item.flex-start {width: calc(100% - 2rem); align-items: flex-start;}
.main-customer-form-item.flex-start .tit{padding-top: 1.5rem;}
.main-customer-form-item .tit{width: 11rem; padding-right: 1rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; color: #fff; box-sizing: border-box;}
.main-customer-form-item:not(.flex-start):nth-child(even) .tit{width: 8rem;}
.main-customer-form-item .tit br{display: none;}
.main-customer-form-item .tit em{color: var(--main-color);padding-left: 3px;}
.main-customer-form-item .form{width: calc(100% - 11rem);}
.main-customer-form-item:not(.flex-start):nth-child(even) .form{width: calc(100% - 8rem);}
.main-customer-form-item .form input,
.main-customer-form-item .form textarea{text-indent: 1.5rem; width: 100%; height:5rem; font-size:1.4rem; color: #fff; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.03); box-sizing: border-box; border-radius: 1rem; transition:var(--transition-custom); transition-property: border-color;}
.main-customer-form-item .form textarea{padding: 1.5rem; line-height: 1.5; height: 18rem; text-indent: 0; resize: none;}
.main-customer-form-item .form input:focus,
.main-customer-form-item .form textarea:focus{outline:none; border-color: #fff;}

#mainCustomerCon .ps-txt {margin : 0.8rem 0; padding-left: 11rem;}

.fakeform-selectbox{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: 1.5rem; width: 100% !important; text-align: left; vertical-align: middle; border:0; line-height: 5rem; font-size:1.4rem; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.03) url("../images/icon/select_arrow.png") no-repeat 92% 50%; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:1rem;  transition:var(--transition-custom); transition-property: border-color;}
.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; background-image: url("../images/icon/select_arrow2.png");}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}
.select-option {border: 1px solid #333; background: #fff; overflow: auto;}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: 1.1em; font-size: 13px; font-weight: normal; color: #777; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; text-decoration: none; padding: 4px 5px 7px; display: block; overflow: hidden; cursor: default;}
.select-option strong {font-weight: bold; color: #000; border-top: 1px solid #eee; border-bottom: 1px solid #ccc;}
.select-option li li span {padding-left: 10px;}
.select-option span:hover,
.select-option span.selected {color: #000; background: #eee;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none;}

.main-datetimepicker-fieldset{position: relative;}
.main-datetimepicker-fieldset i{position: absolute; top: 50%; margin-top: -1.1rem; right: 1.5rem; z-index: -1; font-size: 2.4rem; color: #fff;}
.main-phone-fieldset,
.main-email-fieldset{display: flex; flex-wrap:wrap; align-items: center;}
.main-phone-fieldset .hypen,
.main-email-fieldset .hypen{width:2.4rem; font-size: 1.6rem; color: #ccc; text-align:center;}
.main-email-fieldset .hypen{width: 3rem;}
.main-phone-fieldset input{width:calc(33.33% - 1.6rem) !important;}
.main-email-fieldset input{width:calc(33.33% - 2rem) !important;}
.main-email-fieldset .hypen + input{width:calc(33.33% - 1.3rem) !important;}
.main-email-fieldset .fakeform-selectbox{margin-left: 1.3rem; width:calc(33.33% - 1rem) !important;}

.main-customer-agree{margin-top: 2rem; padding-left: 11rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-customer-agree .agree-txt input{display:none;}
.main-customer-agree .agree-txt label{position:relative; padding-left:2.4rem; font-size: 1.8rem; font-weight: 400; line-height: 1.5em; letter-spacing: -0.025em; color: #ccc; display: block;}
.main-customer-agree .agree-txt label i{position:absolute; top: 0.2rem; left:0; font-size:2rem; color:#ccc;}
.main-customer-agree .agree-txt label a{display: inline-block; color: #fff; text-decoration: underline;}
.main-customer-agree .agree-txt input:checked + label i{color:var(--main-color);}
.main-customer-agree .submit-btn{width: 15rem; height: 4rem; font-size: 1.8rem; font-weight: 700; color: #fff; text-align: center; border-radius: 4rem; background-color: var(--main-color);}

@media all and ( min-width: 1281px ){
	#mainCustomerCon:before{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--main-color2); background-color: #0659a7; content: ''; z-index: 1; opacity: 0; transition:var(--transition-custom);}
	#mainCustomerCon.anim-start:before{opacity: 1; transition:var(--transition-custom2);}
}

/* ******************  메인 커서 이펙트 ********************** */
#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; display: flex; align-items: center; justify-content: center;}
#cmMainCursorTxt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: spin 10s infinite linear;}
#cmMainCursorTxt i{font-size: 2.1rem; color: #fff;}