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

.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; height:100vh; background-color: #000; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.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-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.2,1.2);
     transform: scale(1.2,1.2);
	-webkit-transition:transform 8000ms  ease-in-out ;
    transition:transform 8000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index: 99;
}
.main-visual-txt-box{display:flex; align-items:center; justify-content: center; width: 66.66%; height:100%; text-align: center;}
.main-visual-txt-inner{padding-bottom: 80px;}
.main-visual-txt-con .main-visual-txt1{opacity: 0;}
.main-visual-txt-con .main-visual-txt2{opacity:1;}
.main-visual-txt-con .main-visual-txt1{display:block; font-size:90px; font-weight:700; color:#fff; line-height: 0.8; margin-bottom:20px;}
.main-visual-txt-con .main-visual-txt1.cm-word-split-JS.splitting .word{line-height: 1.3;}
.main-visual-txt-con .main-visual-txt2{font-size:29px; line-height: 0.8; font-weight: 700; color:#fff;}
.main-visual-txt-con .main-visual-txt2.cm-word-split-JS.splitting .word{line-height: 1.3;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .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.txt-ani .main-visual-txt1{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.main-visual-item.first .main-visual-txt2{
	-webkit-animation: text-active-animation2 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation2 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.txt-ani .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.7s; animation-delay:0.7s;}
.main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.main-visual-txt2.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.txt-ani .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.main-visual-item.active-item .main-visual-txt2.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@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(30px); 
		transform: translateY(30px); 
	}
	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);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-dot{position: absolute; bottom: 10.5%; left: 50%; margin-left: -31.5px;}
.main-visual-dot .dot-cover{position: relative; width: 63px; height: 63px; z-index: 10; -webkit-transform: rotate(135deg); transform: rotate(45deg); transform-origin: center; border: 3px solid rgba(255,255,255,0.2); -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-visual-dot .dot-cover svg {
	position: absolute; top: -3px; left: -3px;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	stroke: #ffffff;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.main-visual-dot .dot-cover svg.m-ver{display: none;}

/* 메인 비주얼 :: pause,play */
.main-visual-dot .slick-control-btns{position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; display:inline-block; vertical-align:top; z-index: 99;}
.main-visual-dot .slick-control-btns button{color:#fff; vertical-align:top;}
.main-visual-dot .slick-control-btns button i{vertical-align:top; font-size:20px;}
.main-visual-dot .slick-control-btns .slick-play-btn{display:none;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:6.1%; right: -30px; opacity:0; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite; transition:right ease-out 0.9s 0.7s, opacity ease-out 0.5s 0.7s; width:10px}
.field-sub-sec .scroll-con{position:absolute; bottom:10%; right:0; z-index:9}
.main-scroll-icon .txt{display:block; width:0.8rem; height:8.7rem; background:url("../images/main/scroll_txt.png") no-repeat; background-size:contain; margin:0 auto 2rem}
.main-scroll-icon .icon{position:relative; display:block; width:7px; height:20px; background-color: #fff; background-size:contain; overflow:hidden; -webkit-border-radius: 20px; border-radius: 20px;}
.main-scroll-icon .icon:after{position:absolute; content:""; width:3px; height:3px; background-color:#272a22; border-radius:50%; top:-20%; left:2px;  animation: scrollUpdown 1.1s ease-in-out infinite;}
@keyframes scrollUpdown {
	0% {
		top:-20%; opacity:1
	}
	100% {
		top:80%; opacity:0.2
	}
}


/* ******************  메인 컨텐츠 ********************** */
#mainContent{background: #ffffff;}
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-transform: uppercase;}
.main-tit-box .main-sub-tit{margin-bottom: 30px; display:block; font-size:24px; font-weight: 600; letter-spacing:-0.015em; line-height:1.25em; color: rgba(255, 255, 255, 0.5); opacity: 0;}
.main-tit-box .main-tit{font-size:70px; line-height: 1em; font-weight: bold; color:#fff;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
}
 /* animation일때 */ 
.active-section .main-tit-box .main-tit.splitting .char,
.animated .main-tit.splitting .char,
.active-section .main-tit-box .main-sub-tit,
.animated.main-tit-box .main-sub-tit{
	-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;
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(회사소개) -------- */
#mainCompanyCon{padding:75px 0 180px;}
.main-company-top{position: relative; width: 100%; height: 0; padding-top: 46.51%; overflow: hidden;}
.main-company-bg{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.2,1.2); 
     transform: scale(1.2,1.2);
	-webkit-transition: all 2s;
    transition: all 2s;}
#mainCompanyCon.animated .main-company-bg{
	-webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}

.main-company-top .main-tit-box{position: absolute; top: 18.75%; left: 6%;}
.main-company-top .main-tit-box .main-tit{margin-top: 10px;}
.main-company-bottom{width: 88%; position: relative; margin-top: -150px; display: flex; flex-wrap:wrap;}
/* 왼쪽 - R&D */
.main-company-left{width: 44.5%; overflow: hidden;}
.main-company-left-inner{padding: 55px 6.7% 50px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; transition: background-color 0.3s, color 0.3s, top 1.2s 0.4s; position: relative; top: 100%; background-color: var(--main-color); display: flex; flex-direction: column; justify-content: space-between;}
.main-company-left-inner .top{display: flex; align-items: center; position: relative; padding-right: 125px;}
.main-company-left-inner .top p{font-size: 43px; font-weight: bold; letter-spacing: -0.25px; color: #fff;}
.main-company-left-inner .top span{position: absolute; right: 0; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.main-company-left-inner .top span:before{position: absolute; top: 50%; margin-top: -1px; right: 80px; content: ''; width: 20px; height: 1px; background-color: rgba(255,255,255,0.2); -webkit-transition: width 0.2s; transition: width 0.2s;}
.main-company-left-inner .middle{margin-top: 25px;}
.main-company-left-inner .middle p {font-size: 18px; line-height: 1.7em; color: #ffffff;}
/* 오른쪽 - 퀵메뉴 */
.main-company-right {width: 55.5%; display: flex; flex-wrap:wrap;}
.main-company-item{width: 33.33%; height: 100%; overflow: hidden;}
.main-company-inner {display: block; padding: 60px 12% 45px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; transition: top 1.2s 0.4s; position: relative; top: 100%; background-color: #fff;}
.main-company-right .main-company-item:nth-child(2) .main-company-inner{background-color: #f2f2f2;}
.main-company-inner .top{margin-bottom: 2rem;}
.main-company-inner .top img{-webkit-transition: transform 0.2s; transition: transform 0.2s;}
.main-company-inner .bottom span{font-size: 20px; font-weight:600 !important; color:var(--main-color); line-height: 1.5em;}
.main-company-inner .bottom p{font-size: 15px; line-height: 1.5em; color: #55585b; margin-top: 1rem;}

.main-company-left.animated .main-company-left-inner,
.main-company-item.animated .main-company-inner{top:0;}
.main-company-left.animated .main-company-left-inner{transition-delay: 0.2s;}
.main-company-item:nth-child(1).animated .main-company-inner{transition-delay: 0.4s;}
.main-company-item:nth-child(2).animated .main-company-inner{transition-delay: 0.6s;}
.main-company-item:nth-child(3).animated .main-company-inner{transition-delay: 0.8s;}

@media all and (min-width:801px){	
	.main-company-left-inner:hover .top span:before{width: 30px;}
	.main-company-inner:hover .top img{transform: translateY(-10px);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(퀵메뉴) -------- */
#mainQuickCon{padding: 70px 0 265px; position: relative; z-index: 1; background: url('/images/main/main_business_txt.png') 50% 0 no-repeat; background-size: contain;}

.main-quick-con{}
/* 오른쪽 텍스트 영역 */
.main-quick-right{float: right; margin-top: 245px; width: 500px;}
.main-quick-right .main-quick-tit-box{}
.main-quick-right .main-quick-tit-box .tit{font-size: 90px; font-weight: 700; line-height: 0.8; letter-spacing: -0.025em; color: var(--main-color);}
.main-quick-right .main-quick-tit-box .tit.cm-word-split-JS.splitting .word{line-height: 1;}
.main-quick-right .main-quick-tit-box .tit b{display: inline-block; color: var(--main-color); font-weight: 700;}
.main-quick-right .main-quick-tit-box .txt01 {margin-top: 45px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; color: #083250;}
.main-quick-right .main-quick-tit-box .txt02 {margin-top: 25px; font-size: 17.5px; line-height: 1.8; color: #55585b;}

.main-quick-tit-box .txt01,
.main-quick-tit-box .txt02{opacity: 0;}
.main-quick-tit-box .tit.splitting .char{opacity:0;}
.animated .main-quick-tit-box .tit.splitting .char,
.animated .main-quick-tit-box .txt01,
.animated .main-quick-tit-box .txt02{
	-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;
}
.animated .main-quick-tit-box .txt01{animation-delay: 0.2s;}
.animated .main-quick-tit-box .txt02{animation-delay: 0.4s;}

/* 왼쪽 이미지 영역 */
.main-quick-left{max-width: 834px; width: calc(100% - 500px); float: left;}
.main-quick-wrapper{position: relative;}
.main-quick-list{width: 46.76%;}
.main-quick-list.list01{float: left;}
.main-quick-list.list02{margin-top: 155px; float: right;}
.main-quick-item{position: relative;}
.main-quick-list.list02 .main-quick-item {box-shadow: 38px 40px 150px 0px rgba(0, 0, 0, 0.26);}
.main-quick-item .quick-item-inner {display: block; position: relative; width: 100%; height: 0; padding-top: 147.16%; -webkit-box-shadow: 55px 55px 150px -75px rgba(0,0,0,0.26); box-shadow: 55px 55px 150px -75px rgba(0,0,0,0.26); overflow: hidden;}
.main-quick-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.7s; transition: all 0.7s;}
.main-quick-txt{position: absolute; left: 10%; padding-right: 10%; bottom: 7%;}
/* 내부 텍스트 영역 */
.main-quick-txt p{font-size: 22px; font-weight: 500; line-height: 1.5em; color: #fff;}
.quick-txt-bottom {margin-top: 30px; display: flex; align-items: center; justify-content: space-between;}
.main-quick-list.list02 .quick-txt-bottom{margin-top: 10px;}
.quick-txt-bottom p{font-size: 16px; font-weight: bold; line-height: 2.8em; letter-spacing: -0.025em; color: rgba(255, 255, 255,0.55);}
.quick-txt-bottom span{display: inline-block; position: relative; font-size: 12px; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.quick-txt-bottom span:before{position: absolute; top: 50%; margin-top: -1px; right: 80px; content: ''; width: 20px; height: 1px; background-color: rgba(255,255,255,0.2); -webkit-transition: width 0.2s; transition: width 0.2s;}

@media all and (min-width:801px){	
	.main-quick-item a:hover .main-quick-bg{-webkit-transform: scale(1.2); transform: scale(1.2);}
	.main-quick-item a:hover .quick-txt-bottom span:before{width: 30px;}
}

/* 왼쪽 이미지 영역 23-06-01 수정 */
.quick-txt-bottom span {left: 2.3rem;}
.main-quick-list.list02 .quick-txt-bottom {margin-top: 30px;}
.main-quick-txt .quick-link {display: block; margin-bottom: 0.6rem;}
.main-quick-txt .quick-link:last-of-type {margin-bottom: 0;}
.main-quick-item .quick-link:hover ~ .quick-txt-bottom span:before {width: 30px;}
.main-quick-item .quick-link:hover .main-quick-bg{-webkit-transform: scale(1.2); transform: scale(1.2);}

/* -------- 메인 컨텐츠 :: 컨텐츠3(공지사항) -------- */
#mainCustomerCon{position: relative; padding-bottom: 160px; background-color: #111;}
.main-customer-con{position: relative; width: 100%; height: 0; padding-top: 52.64%; overflow: hidden;}
.main-customer-bg{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.2,1.2); 
     transform: scale(1.2,1.2);
	-webkit-transition: all 2s;
    transition: all 2s;}

#mainCustomerCon.animated .main-customer-bg{
	-webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}

.main-customer-title{position: absolute; bottom: 130px; bottom: 12.6%; left: 0; width: 100%;}
.main-customer-title .main-sub-tit {font-weight: 400; color: #fff; letter-spacing: 0; text-transform: initial;}
.main-control-box{margin-top: 110px;}
.main-control-box button{display: inline-block; vertical-align: middle; width: 90px; height: 90px; background-color: #fff; -webkit-border-radius: 100%; border-radius: 100%;}
.main-control-box button + button{margin-left: 10px;}
.main-control-box button i{position: relative; top: 2px; font-size: 24px; color: #000;}
.main-control-box .main-customer-next {background-color: var(--main-color);}
.main-control-box .main-customer-next i {color: #fff;}
.main-customer-progress{margin-left: 30px; position: relative; width: 280px; width: 16.3%; height: 3px; background-color: #fff; display: inline-block; vertical-align: middle;}
.main-customer-progress span{position: absolute; top: 0; left: 0; display: block; width: 0; height: 100%; background-color: var(--main-color);}

.main-customer-wrapper{position: absolute; bottom: 0; right: 0; width: 63.02%;}
.main-customer-list{margin: 0 -15px;}
.main-customer-item{float: left; width: calc(33.33% - 30px); height: 380px !important; margin: 0 15px; overflow: hidden;}
.main-customer-item a{width: 100%; height: 380px; display: block; position:relative; display: block;}
.main-customer-item.first a{top: 100%; transition: top 1.2s 0.4s;}
.main-customer-item a:before{position: absolute; bottom: 12%; left: 12%; font-size: 24px; color: #333; content: "\eb45"; font-family:xeicon !important;}
.main-customer-inner{padding: 12% 12% 0; height: 100%; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-customer-top{padding-bottom: 35px; letter-spacing: -0.35px; color: #333;}
.main-customer-top .category{margin-right: 15px; font-size: 18px; font-weight: 700; display: inline-block;}
.main-customer-top .date{font-size: 13px; opacity: 0.3; display: inline-block;}
.main-customer-bottom .tit{font-size: 22px; line-height: 1.5; height: 3em; letter-spacing: -0.65px; font-weight: 700; color: #333;}
.main-customer-bottom .txt{margin-top: 30px; font-size: 17px; line-height: 1.5; height: 3em; letter-spacing: -0.75px; color: #666;}

#mainCustomerCon .slick-arrow.slick-hidden{display: inline-block;}
.main-customer-wrapper.animated .main-customer-item.first a{top:0;}
.main-customer-wrapper.animated .main-customer-item.first a{transition-delay: 0.2s;}
.main-customer-wrapper.animated .main-customer-item.first + .first a{transition-delay: 0.4s;}
.main-customer-wrapper.animated .main-customer-item.first + .first + .first a{transition-delay: 0.6s;}

.main-control-box button i,
.main-customer-item a:before,
.main-customer-inner,
.main-customer-top,
.main-customer-bottom .tit,
.main-customer-bottom .txt{-webkit-transition: all 0.3s; transition: all 0.3s;}

@media all and (min-width:801px){	
	.main-customer-prev:hover i{-webkit-transform: translateX(-5px); transform: translateX(-5px);}
	.main-customer-next:hover i{-webkit-transform: translateX(5px); transform: translateX(5px);}
	.main-customer-item a:hover:before{color: #fff; -webkit-transform: translateX(10px); transform: translateX(10px);}
	.main-customer-item a:hover .main-customer-inner{background-color: var(--main-color);}
	.main-customer-item a:hover .main-customer-top,
	.main-customer-item a:hover .main-customer-bottom .tit,
	.main-customer-item a:hover .main-customer-bottom .txt{color: #fff;}
}


/* ******************  메인 비주얼 :: 처음들어왔을 때 효과 ********************** */
.active-page #header{top:0; opacity:1}
.active-page .main-visual-control{bottom:0; opacity:1}
.active-page .main-scroll-icon{opacity:1; right:4.16%;}
.main-visual-item.first .main-visual-pc-img{transform: scale(1.3,1.3); transition:transform 4000ms ease-in-out;}
.active-page .main-visual-item.first .main-visual-pc-img{transform: scale(1.0,1.0);}

@media all and ( min-width: 801px ) and (max-height: 840px) {
	#mainVisual{min-height: 840px !important;}
}