@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-09-07
******************************************************** */
/* ******************  메인 레이아웃 ********************** */
@media all and ( min-width: 1221px ){
	#fullpage .section{overflow:hidden; height:950px; padding-top:120px;}
	#fullpage .fp-tableCell{height:100% !important;}
}
@media all and ( min-width: 1221px ) and (max-height: 800px ){
	#mainProductCon,
	#mainNewsCon{padding-bottom:120px}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}
.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-txt-con{
	position:absolute; 
	top:50%; 	left:120px; right:120px;
	z-index:11;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size:24px;
	color:#111; 
	transition:color 0.5s;
}
.main-visual-txt-con.white{color:#fff;}
.main-visual-txt-con .main-visual-txt1{opacity:0; transition:opacity 0.3s}
.main-visual-txt-con .main-visual-txt1 strong{display:inline-block; vertical-align:middle; font-size:3.7em; font-weight:700; letter-spacing:-0.75px; line-height:1.05; font-family: 'Josefin Sans', sans-serif; }
.main-visual-txt-con .main-visual-txt1 strong:first-child{margin-right:0.2em}
.main-visual-txt-con .main-visual-txt1 em{opacity:0; display:inline-block; vertical-align:middle; font-family:inherit; font-weight:inherit; font-size:inherit}
.main-visual-txt-con .main-visual-txt2{opacity:0; font-size:1em; letter-spacing:-0.5px; font-weight:600; line-height:1.5; margin-top:1.66em}

/* 메인 비주얼 :: 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);
}
.active-item .main-visual-txt-con .main-visual-txt1{
	opacity:1.0;
}
.active-item .main-visual-txt-con .main-visual-txt1 em {
  -webkit-animation: letter-glow 0.5s 0.5s ease both;
          animation: letter-glow 0.5s 0.5s ease both;
}
.active-item .main-visual-txt2{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1s;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both  1s;
}
.active-item .main-visual-download-con{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1.5s;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both  1.5s;
}
@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.1);
	transform: translateY(30px);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	transform: translateY(0px);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
	transform: translateY(0px);
  }
}
@-webkit-keyframes text-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-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); 
	}
}
/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{	position:absolute; width:120px; height:120px; bottom:0px; right:0px; background-color:#fff; border:0; cursor:pointer; z-index:9; font-size:50px; color:#fff; border-top:1px solid #c7d5dd; border-left:1px solid #c7d5dd;}
.main-visual-con .slick-arrow:after{width:22px; height:12px; display:block; content:""; margin:0px auto; transition:all 0.3s}
.main-visual-con .slick-arrow.slick-prev{margin-right:120px;}
.main-visual-con .slick-arrow.slick-prev:after{ background:#fff url(/images/button/main_visual_prev_btn.png) no-repeat 50% 50%}
.main-visual-con .slick-arrow.slick-next:after{ background:#fff url(/images/button/main_visual_next_btn.png) no-repeat 50% 50%}
.main-visual-con .slick-arrow.slick-prev:hover:after{transform:translateX(-5px)}
.main-visual-con .slick-arrow.slick-next:hover:after{transform:translateX(5px)}
/* 메인 비주얼 :: 다운로드 */
.main-visual-download-con{opacity:0; position:absolute; bottom:0px; left:0px; z-index:11; width:600px; background-color:#1d65a6;}
.main-visual-download-con dl {position:relative;}
.main-visual-download-con dl dt,
.main-visual-download-con dl dd{float:left; width:50%; height:120px; text-align:center; color:#fff; font-size:19px; line-height:120px; }
.main-visual-download-con dl dt{font-weight:700; background-color:#004282; }
.main-visual-download-con dl dd a{position:relative; display:block; height:100%; color:#fff; font-weight:600;}
.main-visual-download-con dl dd a:before{position:absolute; top:0px; left:0px; width:0; height:100%; content:""; background-color:#004282; transition:width 0.5s}
.main-visual-download-con dl dd a span{position:relative;}
.main-visual-download-con dl dd a i{margin-left:18px; position:relative; top:1px;}
.main-visual-download-con dl dd a:hover:before{width:100%;}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-cm-tit-box{color:#222; font-size:24px; }
.main-cm-tit-box .main-cm-tit{font-size:3.75em; letter-spacing:-0.5px; font-weight:700; color:#222; font-family: 'Josefin Sans', sans-serif; }
.main-cm-tit-box .main-cm-txt {line-height:1.375}

/* ****************** 메인 컨텐츠 :: CLIENT ********************** */
/* -------- Client -------- */
#mainClientCon .fp-tableCell{position:relative; background:url(/images/main/main_client_bg.jpg) no-repeat 100% 0%}
/* Client :: 타이틀 */
.client-tit-wrapper{position:absolute; top:0px; bottom:0; left:0; /* right:120px; */ right:0px; padding-bottom:25% }
.client-tit-wrapper .client-tit-box{display:table-cell; vertical-align:middle;}
.client-tit-wrapper .client-tit-box .main-cm-txt{margin-top:36px; font-weight:600;}
/* Client :: 리스트 */
.client-list-wrapper{position:absolute; bottom:0px; left:0px; right:120px;}
.client-list-con{margin:1px -6px 0 0}
.client-list-con .client-item{float:left; width:20%; margin:-1px 0 0 -1px; background-color:#fff;}
.client-list-con .client-item .client-logo-inner{border:1px solid #c7d5dd; text-align:center;}

/* ****************** 메인 컨텐츠 :: Product ********************** */
#mainProductCon .fp-tableCell:before{position:absolute; bottom:0px; left:0px; width:0; top:50%; top:calc(50% + 120px); background-color:#f0f3f5; content:""; transition:width 0.7s}
#mainProductCon[data-aos="product-in"].aos-animate .fp-tableCell:before{width:100%;}
/* Product :: 타이틀 */
.main-prd-tit-box{margin-bottom:30px;}
.main-prd-tit-box .main-cm-tit{float:left;}
.main-prd-tit-box .main-cm-txt{float:right; padding-top:3px; font-weight:600;}
/* Product :: 리스트 */
.main-prd-list-con{position:relative; z-index:1; margin:0 -0.9%}
.main-prd-list-con .main-prd-item{float:left; width:31.53%; margin:0 0.9%;}
.main-prd-list-con .main-prd-item .main-prd-thumb{display:block; height:0; padding-top:71.11%; /* padding-top:124.54% */ position:relative;}
.main-prd-list-con .main-prd-item .main-prd-thumb:after{position:absolute; top:0px; width:100%; height:100%; background-color:#f0f3f5; content:""; transition:height 0.85s cubic-bezier(0.22, 0.16, 0, 0.91) 0.75s; z-index:1;}
.main-prd-list-con .main-prd-item .main-prd-info-box{color:#222; font-size:19px;}
.main-prd-list-con .main-prd-item .main-prd-info-box dt{font-size:1.68em; margin-top:1em; letter-spacing:-0.25px; font-weight:700; font-family: 'Josefin Sans', sans-serif;}
.main-prd-list-con .main-prd-item .main-prd-info-box dd{font-size:1em; line-height:1.31; margin-top:0.9em;}
#mainProductCon[data-aos="product-in"].aos-animate  .main-prd-item .main-prd-thumb:after{height:0;}

/* ****************** 메인 컨텐츠 :: Global ********************** */
.main-global-container{height:100%; position:relative;}
/* -------- Global :: map -------- */
#mainGlobalCon.canvas .main-global-container{background:url(/images/main/global_bg_ling.jpg) no-repeat}
#mainGlobalCon:not(.canvas) .main-global-container:before{
	position:absolute; 
	top:0px; left:0px; right:0px; bottom:0px;
	content:"";
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e3e3e3+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e3e3e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#e3e3e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */

}
#myCanvas {
	position:absolute; 
	top:0px; left:50%; bottom:0px; margin-left:-960px;
	 z-index: 0;
	opacity:0.5;filter:Alpha(opacity=50);
}
.main-global-wrapper{position:absolute; top:80px; left:0; right:0; z-index:2;}
.main-global-wrapper .global-logo{margin-bottom:50px; text-align:center;}
.main-global-numbers{text-align:center;}
.main-global-numbers .main-global-num-item {display:inline-block; margin:0 50px}
.main-global-numbers .main-global-num-item .icon{display:inline-block; vertical-align:middle; margin-right:25px;}
.main-global-numbers .main-global-num-item .global-num-info{display:inline-block; vertical-align:middle; font-family: 'Josefin Sans', sans-serif; letter-spacing:-0.25px; font-size:30px; text-align:left;}
.main-global-numbers .main-global-num-item .global-num-info dt{color:#2f2f2f; font-size:1em;  font-weight:600; margin-bottom:5px;}
.main-global-numbers .main-global-num-item .global-num-info dd{color:#004282; font-size:1.83em; letter-spacing:-0.25px; font-weight:700;}
.main-global-numbers .main-global-num-item .global-num-info dd em{font-weight:inherit}
.main-global-numbers .main-global-num-item .global-num-info dd span{color:#2f2f2f; font-size:0.4em; margin-left:5px;}

/* 글로벌 :: 맵 아이콘 */
.main-global-inner-box{position:absolute; bottom:0px; left:50%; z-index:1; height:637px; width:1400px; margin-left:-700px; background:url(/images/main/global_map_bg.png) no-repeat 0 0}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
@keyframes nation-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(0.6);
			transform: scale(0.6);
	opacity: 0; } 
}
.nation-circle{position:absolute; display:inline-block; width:50px; height:50px;}
.incell-circle{width:150px; height:150px;}
.nation-circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle > span {
	border:1px solid rgba(13, 43, 66, 0.4) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity:0;filter:Alpha(opacity=0);
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.nation-circle i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:#0d2b42; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
	opacity:0.7;filter:Alpha(opacity=70);
}
.nation-circle p{position:absolute; top:50%; left:50%; margin:0px 0 0 20px; color:#393d40; font-size:16px; letter-spacing:-0.3px; font-weight:600;}

/* -------- Global :: Partners -------- */
.main-partners-wrapper{position:absolute; left:0; right:120px; bottom:0px; height:240px; z-index:2; padding-left:600px; border-top:1px solid #c7d5dd; border-bottom:1px solid #c7d5dd; background-color:#fff; }
.main-partners-tit-box{position:absolute; top:0px; left:0; width:600px; bottom:-1px; background-color:#004282; text-align:center; color:#fff;}
.main-partners-tit-box .main-partners-tit{font-size:50px; letter-spacing:-0.5px; margin-bottom:20px;}
.main-partners-tit-box .main-partners-more-btn{color:#fff; font-size:19px; opacity:0.95; font-weight:600;}
.main-partners-tit-box .main-partners-more-btn i{margin-left:17px; position:relative; top:2px; transition:all 0.3s}
.main-partners-tit-box .main-partners-more-btn:hover i{transform:translateX(3px)}
.main-partners-list-box{padding:75px 85px;}
.main-partners-list-box .partners-slide {width:auto;}
.main-partners-list-box .partners-slide img{max-height:87px}

/* ****************** 메인 컨텐츠 :: Cross Solution ********************** */
#mainCrossCon .fp-tableCell{background:url(/images/main/main_cross_bg.jpg) no-repeat 50% 50%}
.main-cross-solution-wrapper{position:relative; height:100%;}
.cross-tit-wrapper{height:100%;}
.cross-tit-wrapper .main-cm-tit-box{display:table-cell; vertical-align:middle;}
.cross-tit-wrapper .main-cm-tit .stroke{position:relative; top:-10px;}
.cross-tit-wrapper .main-cm-txt{margin-top:45px; font-weight:600;}
/* Solution 리스트 */
.main-solution-list-wrapper{position:absolute; top:0px; right:120px; bottom:-3px; left:50%; }
.main-solution-list-wrapper > ul{height:100%; margin-right:-4px;}
.main-solution-item{float:left; overflow:hidden; width:33.33%; height:50%; margin:-1px 0 0 -1px}
.main-solution-item a{display:block; position:relative;}
.main-solution-item .main-solution-inner{display:block; height:100%; border:1px solid #c7d5dd; box-sizing:border-box; text-align:center; }
.main-solution-item .main-solution-info {position:relative; top:50%; transform:translateY(-50%)}
.main-solution-item .main-solution-info .main-solution-tit{display:block; padding-top:27px; color:#222; font-size:30px; font-size:1.56vw; font-weight:900;}
.main-solution-item .main-solution-txt-con{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; background-color:#004282; transition:all 0.5s; transform:translateY(100%)}
.main-solution-item .main-solution-txt-con .over-txt{position:relative; color:#fff; font-size:22px; font-size:1.1vw; line-height:1.2; padding:0 35px; padding-top:37px; font-family: 'Josefin Sans', sans-serif;}
.main-solution-item .main-solution-txt-con .over-txt:before{position:absolute; top:-38px; left:50%; font-size:80px; transform:translateX(-50%); content:"ㅡ"; line-height:1; font-family: 'Nunito Sans', sans-serif;}
@media all and ( min-width: 1025px ){
	.main-solution-item a:hover .main-solution-txt-con{transform:translateY(0%)}
}

/* ****************** 메인 컨텐츠 :: News ********************** */
#mainNewsCon{position:relative; background-color:#1d65a6}
#mainNewsCon:before{position:absolute; bottom:0px; right:120px; top:120px; left:0; background:url(/images/main/main_news_bg.png) no-repeat 100% 100%; background-size:contain; content:"";}
/* News :: 타이틀 */
.main-news-wrapper{overflow:hidden; position:relative;}
.main-news-wrapper .main-cm-tit-box{margin-bottom:35px;}
.main-news-wrapper .main-cm-tit{text-align:center; color:#fff;}
/* News :: 컨트롤바 */
.main-news-controls button{position:absolute; top:0px;  width:100px; height:100px; border:1px solid rgba(255,255,255,0.4); transition:all 0.2s}
.main-news-controls button i{font-size:30px; color:#fff; opacity:0.9; transition:all 0.2s}
.main-news-controls button.slick-hidden{display:block; cursor:default; }
.main-news-controls .main-news-prev-btn{left:0;}
.main-news-controls .main-news-prev-btn i{transform:rotate(-180deg)}
.main-news-controls .main-news-next-btn{right:0;}
.main-news-controls button:not(.slick-hidden):hover{background-color:#fff;}
.main-news-controls button:not(.slick-hidden):hover i{color:#222;}
/* News :: 리스트 */
.main-news-list-container{margin:0 -10px}
.main-news-rolling-item{float:left; margin:0 10px}
.main-news-item{/* float:left; width:48.6%; margin:0.7%; */ margin-top:20px;}
.main-news-item:first-child{margin-top:0}
.main-news-item a{display:block; padding:25px; background-color:rgba(255,255,255,1); transition:background-color 0.3s}
.main-news-item a .main-news-thumb{float:left; position:relative; width:250px; height:200px;}
.main-news-item a .main-news-info-box{float:left; padding:0 40px; width:calc(100% - 330px); font-size:19px; color:#222; transition:color 0.3s}
.main-news-item a .main-news-info-box .main-news-tit-box{border-bottom:1px solid #d7dde3; padding-bottom:0.7em; margin-bottom:0.7em; }
.main-news-item a .main-news-info-box .main-news-tit{height:3.5em; font-size:1.26em; line-height:1.2; font-family: 'Josefin Sans', sans-serif;}
.main-news-item a .main-news-info-box .main-news-txt{height:2.72em; font-size:1em; opacity:0.7; line-height:1.36; margin-bottom:10px;}
.main-news-item a .main-news-info-box .main-news-date{font-size:0.84em; opacity:0.4}
.main-news-item a:hover{background:none; /* background-color:rgba(29,101,166,0.5) */}
.main-news-item a:hover .main-news-info-box{color:#fff}
/* 서브페이지 News */
.sub-news-list-con .main-news-rolling-item{float:none; margin:0 -0.7%}
.sub-news-list-con .main-news-item{float:left; width:48.6%; margin:0 0.7% 1.4%; }
.sub-news-list-con .main-news-item a{border:1px solid #cfdbe2}
.sub-news-list-con .main-news-item a:hover{background-color:rgba(29,101,166,1)}

/* ****************** 메인 컨텐츠 ::  다운로드 ********************** */
#mainDownloadCon{background:url(/images/main/main_download_bg.jpg) no-repeat 50% 50%; background-size:cover;}
.main-download-wrapper .main-cm-tit-box{text-align:center; }
.main-download-wrapper .main-cm-tit {color:#fff;}
.main-download-wrapper .main-cm-tit span{display:inline-block; vertical-align:middle;}
.main-download-wrapper .main-cm-tit .orange{display:inline-block; vertical-align:middle; color:#ee6d31; margin-left:15px;}
.main-download-wrapper .main-cm-tit em{opacity:0; font-weight:inherit; font-family:inherit;}
.main-download-wrapper .line{display:block; position:relative; width:3px; height:50px; background-color:#fff; background-color:rgba(255,255,255,0.9); margin:30px auto;}
.main-download-wrapper .line:after{position:absolute; bottom:0px; left:0px; right:0px; height:15px; background-color:#ee6a2d; content:"";}
.main-download-wrapper .main-cm-txt{color:#c6c6c6; margin-bottom:40px;}
.main-download-wrapper .main-down-btn{display:block; width:220px; height:80px; line-height:76px; margin:0px auto; padding:0 30px; text-align:left; }
.main-download-wrapper .main-down-btn span{float:left; font-size:19px;}
.main-download-wrapper .main-down-btn i{float:right; font-size:24px; line-height:74px;}
[data-aos="text-glow"].aos-animate em {
  -webkit-animation: letter-glow 0.5s ease both;
          animation: letter-glow 0.5s  ease both;
}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position:fixed; 
	top:120px; 
	bottom:120px; 
	width:120px; 
	right:0; 
	z-index:99; 
	box-sizing:border-box; 
	border-left:1px solid #c7d5dd;
	transition:background-color 0.5s, border-color 0.5s;
	background-color:#fff;
}
#fp-nav.first{bottom:0px;}
#fp-nav ul{
	position:fixed;
	top:50%;
	right:0;
	width:120px;
	transform:translateY(-50%);
}
#fp-nav ul li{position:relative; width:6px; margin:15px auto;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; }
#fp-nav ul li a span{display:block; width:6px; height:6px; background-color:#222; border-radius:6px; transition:height 0.3s }
#fp-nav ul li .fp-tooltip{display:none;}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{height:59px;}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}
@media all and ( min-width: 1221px ){
	#fp-nav.transparent-style{background-color:transparent; }
	#fp-nav.white-style {background-color:transparent; border-color:rgba(255,255,255,0.2);}
	#fp-nav.white-style ul li a span{background-color:#fff;}
}