@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;
}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1025px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; height:100vh; 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-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-txt-inner{width: 100%; text-align: center;}
.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{display:block; font-size:15px; font-weight:700; color:#fff; margin-bottom:30px; line-height:1}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:60px; line-height: 1.36; letter-spacing:-0.5px; color:#fff;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.start-item .main-visual-pc-img{
	-webkit-animation: img-active-animation 4s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: img-active-animation 4s cubic-bezier(0.4, 0, 0.2, 1) both; 
}
.main-visual-item.active-item .main-visual-pc-img{
	-webkit-animation: img-active-animation2 4s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: img-active-animation2 4s cubic-bezier(0.4, 0, 0.2, 1) both; 
}
.main-visual-item.start-item .main-visual-txt1,
.main-visual-item.start-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .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.start-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.start-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.8s; animation-delay:0.8s;}
.main-visual-item .main-visual-txt1.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.start-item .main-visual-txt1.splitting .char,
.main-visual-item.active-item .main-visual-txt1.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-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}
@keyframes img-active-animation {
	from {
		-webkit-transform: scale(1.5,1.5);
		transform: scale(1.5,1.5);
	}
	to {
		-webkit-transform: scale(1.0,1.0);
		transform: scale(1.0,1.0);
	}
}
@keyframes img-active-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: scale(1.5,1.5);
		transform: scale(1.5,1.5);
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: scale(1.0,1.0);
		transform: scale(1.0,1.0);
	}
}

/* 메인 비주얼 :: 카운터 */
.main-visual-conuter{position:absolute; bottom:10%; left:0; width:100%; z-index:999; text-align: right;}
.main-visual-conuter button,
.main-visual-conuter span,
.main-visual-conuter .middle{display:inline-block; vertical-align:middle; font-size:11px; color:#fff;}
.main-visual-conuter .middle{margin:0 10px;}
.main-visual-conuter .total-num{color: rgba(255,255,255,0.6);}
/* 메인 비주얼 :: 화살표 */
.main-visual-conuter button i{font-size: 24px;}
.main-visual-prev{margin-right: 20px;}
.main-visual-next{margin-left: 20px; margin-right: 250px;}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:0; width:100%; text-align:right; z-index:11;}
.main-visual-con .slick-dots{position: relative; width:100%; height:4px; background-color: rgba(255,255,255,0.4); display: block;}
.main-visual-con .slick-dots li button{position: absolute; top: 0; left: 0; margin:0px; padding:0px; background:none; vertical-align:top; font-size:0; box-sizing:border-box;}
.main-visual-con .slick-dots li button{position:absolute; content:""; width:0; height:100%; background-color:#0053a1; top:0; left:0;}
.main-visual-con:not(.start-progress) .slick-dots li.slick-active button{animation:dotLoading 9.9s linear both;}
.main-visual-con.start-progress .slick-dots li.slick-active button{animation:dotLoading 7.9s linear both;}

@keyframes dotLoading{	
	from{width:0px;}
	to{width:100%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(business) -------- */
#mainBusinessCon{background-color: #000;}
.main-business-con{height: 100%;}
.main-business-list{width: 100%; height: 100%;}
.main-business-item{float: left; width: 33.33%; height: 100%;}
.main-business-item a{display: block; position: relative; width: 100%; height: 100%; overflow: hidden;}
.main-business-item a:before{position:absolute; content:""; right: 0; width:100%; height:100%; top:0; background-color:#0053a1; transition-property:all; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.8s; z-index:9; opacity:1;}
.main-business-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s; transition: all 0.5s;}
.main-business-txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration:0.8s; transition-timing-function:ease-in-out; pointer-events: none; will-change: transform; will-change: opacity; opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0);}
.main-business-txt .en-tit{font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6);}
.main-business-txt .kr-tit{margin-top: 20px; font-size: 38px; line-height: 1.3; letter-spacing: -0.5px; font-weight: 700; color: #fff;}

/* effect */
#mainBusinessCon.effect-start .main-business-item a:before{width:0; opacity:1;}
#mainBusinessCon.effect-start .main-business-item:nth-child(2) a:before{transition-delay:0.2s;}
#mainBusinessCon.effect-start .main-business-item:nth-child(3) a:before{transition-delay:0.5s;}
#mainBusinessCon.effect-start .main-business-txt{opacity: 1; -webkit-transform: none; transform: none;}
#mainBusinessCon.effect-start .main-business-item:nth-child(1) .main-business-txt{transition-delay:0.6s;}
#mainBusinessCon.effect-start .main-business-item:nth-child(2) .main-business-txt{transition-delay:0.8s;}
#mainBusinessCon.effect-start .main-business-item:nth-child(3) .main-business-txt{transition-delay:1s;}

@media all and ( min-width: 801px ){
	.main-business-item a:hover .main-business-bg{-webkit-transform: scale(1.1) rotate(0.02deg); transform: scale(1.1) rotate(0.02deg);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(IDEOLOGY) -------- */
#mainIdeologyCon{}
.main-ideology-con{padding-top: 110px; position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-ideology-bg{position: absolute; top: 0; left: 0; 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-ideology-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-ideology-box .area-box{width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-ideology-txt{text-align: center;}
.main-ideology-txt .tit{font-size: 56px; line-height: 1.3; letter-spacing: -0.65px; font-weight: 400; color: #fff;}
.main-ideology-txt .txt{margin-top: 30px; font-size: 20px; line-height: 1.5; letter-spacing: -0.55px; color: rgba(255,255,255,0.5);}

.main-ideology-btn,
.main-ideology-btn strong,
.main-ideology-btn i{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-ideology-btn{margin-top: 40px; position:relative; overflow:hidden; display:inline-block; width:175px; height:55px; line-height:51px; border:2px solid #0053a0; text-align:left; background-color:#0053a0; -webkit-border-radius: 55px; border-radius: 55px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-ideology-btn:before{
	display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#fff;
	transform:skew(-20deg); 
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.main-ideology-btn strong{position:relative; left:0px; z-index:1; display:block; color:#fff; text-indent: 35px; font-size:12px; font-weight:400;}
.main-ideology-btn i{position:absolute; top:2px; right:30px; line-height:51px; color:#fff; font-size:16px;}

.main-ideology-wrapper{margin: 65px auto 0; max-width: 1100px;}
.main-ideology-list{margin: 0 -10px;}
.main-ideology-item{position: relative; width: calc(33.33% - 20px); margin: 0 10px; float: left;}
.main-ideology-item:before{position: absolute; top: 5px; left: 50%; margin-left: 5px; width: calc(100% + 10px); height: 3px; content: ''; background-color: rgba(255,255,255,0.2);}
.main-ideology-item:after{position: absolute; top: 5px; left: 50%; margin-left: 5px; width: 0; height: 3px; content: ''; background-color: #fff;}
.main-ideology-list .main-ideology-item.item03:before,
.main-ideology-list .main-ideology-item.item03:after{display: none;}
.main-ideology-item .dot{position: relative; margin: 0 auto; width: 12px; height: 12px; display: block;}
.main-ideology-item .dot:after{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border: 2px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1;}
.main-ideology-item.item03 .dot:after{background-color: #264152;}
.main-ideology-item.item03 .dot > span {opacity: 0; visibility: hidden; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; width: 40px; height: 40px; -webkit-transition: opacity 0.2s, visibility 0.2s; transition: opacity 0.2s, visibility 0.2s;}
.main-ideology-item .txt-group{margin-top: 25px; text-align: center;}
.main-ideology-item .txt-group p{font-size: 16px; line-height: 1.5; letter-spacing: -0.25px; color: rgba(255,255,255,0.5);}
.main-ideology-item .txt-group h5{margin-top: 10px; font-size: 28px; line-height: 1.3; font-weight: 400; letter-spacing: -0.55px; color: #fff;}

/* effect */
#mainIdeologyCon.effect-start .main-ideology-item.item01:after{animation:dotLoading02 1.2s linear both; animation-delay:0.8s;}
#mainIdeologyCon.effect-start .main-ideology-item.item02:after{animation:dotLoading02 1.2s linear both; animation-delay:2s;}
#mainIdeologyCon.effect-start .main-ideology-item.item03 .dot > span{visibility: visible; transition-delay: 2.1s; animation-delay:2.1s;  
-webkit-animation-fill-mode: both; animation-fill-mode: both;  animation: nation-circle 3s cubic-bezier(1, 2, 0.66, 3) infinite;}
#mainIdeologyCon.effect-start .main-ideology-item.item03 .dot > span:nth-child(2) {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s; 
}
#mainIdeologyCon.effect-start .main-ideology-item.item03 .dot > span:nth-child(3) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}
#mainIdeologyCon.effect-start .main-ideology-bg{
	-webkit-animation: img-active-animation 2.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: img-active-animation 2.5s cubic-bezier(0.4, 0, 0.2, 1) both; 
}
@keyframes dotLoading02{	
	from{width:0px;}
	to{width: calc(100% + 10px);}
}
@keyframes nation-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1);
			transform: scale(1);
	opacity: 0; } 
}

@media all and (min-width:801px){
	.main-ideology-btn:hover{background-color:#0053a0; border-color:#0053a0;}
	.main-ideology-btn:hover strong{color:#0053a0; left:5px;}
	.main-ideology-btn:hover i{color:#0053a0}
	.main-ideology-btn:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(KPM TECH) -------- */
#mainTechCon{}
.main-tech-con{position: relative; padding-top: 110px; width: 100%; height: 100%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-tech-bg{position: absolute; top: 0; left: 0; 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-tech-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-tech-box .area-box{width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-tech-txt{text-align: center;}
.main-tech-txt .tit{font-size: 80px; line-height: 1.2; letter-spacing: -0.65px; font-weight: 900; color: #fff;}
.main-tech-txt .txt{margin-top: 25px; font-size: 22px; line-height: 1.3; color: #fff;}
.main-tech-txt .btn{margin-top: 45px;}
.main-tech-txt .btn a{display: inline-block; width: 66px; height: 66px; font-size: 12px; line-height: 66px; text-align: center; color: #fff; background-color: #0053a0; -webkit-border-radius: 100%; border-radius: 100%;}

/* effect */
#mainTechCon.effect-start .main-tech-bg{
	-webkit-animation: img-active-animation 4s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: img-active-animation 4s cubic-bezier(0.4, 0, 0.2, 1) both; 
}

@media all and ( min-width: 801px ){
	.main-tech-txt .btn:hover a{animation: onlineHover 0.5s both;}
}

@keyframes onlineHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.3); 
	}
	100% {
		transform:scale(1); 
	}
}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -3px;
    bottom: 10.7%;
	right:8%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{margin-left: 34px; float: left; width:6px;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; width:100%; height:6px;}
#fp-nav ul li a span{position: relative; display:block; width:4px; height:4px; border: 1px solid rgba(255,255,255,0.5); border-radius:100%;}
#fp-nav ul li a span:before{position: absolute; top: 50%; left: 50%; content: ''; width: 0; height: 0; background-color: #fff; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius:100%; -webkit-transition:all 0.3s; transition:all 0.3s;}
#fp-nav ul li .fp-tooltip{position:absolute; overflow:hidden; right: 160px; top: 50%; width: 60px; text-align: right; margin-top: -10px; opacity:0;filter:Alpha(opacity=0); font-size:11px; line-height:20px; color:#fff; -webkit-transition:all 0.3s; transition:all 0.3s;}
#fp-nav ul li a.active span:before{width: 18px; height: 18px;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-con{position:fixed; bottom:10%; left:8%; z-index: 1;}
.main-scroll-con img{display: inline-block; vertical-align: middle; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-con span{margin-left: 15px; font-size: 11px; color: rgba(255,255,255,0.5); display: inline-block; vertical-align: middle;}
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}