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

/* ******************  비디오 영역 ********************** */ 
#mainContainer {background:#000;}
#mainVideoCon {position:relative; height:100vh; background:#000;}
#visualVideo {width:100%;background:#000;}
.background-video-wrapper{position:absolute; left:0; top:0; overflow:hidden; height:100%; width:100%;background:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%;background:#000;/* transform:scale(0.9); */}
.background-video:after {content:""; position:absolute; width:100%; height:100%; background-color:#000; z-index:99;}
.background-video.start:after{opacity:0;filter:Alpha(opacity=0); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; }

.background-video iframe{
	width: 100vw;
	height: 200vh; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: 100vh;
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	background:#000;
	transform: translate(-50%, -50%);
	pointer-events:none;
}
/* 비디오 영역 :: 로딩circle */
.main-video-play {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999;}
.video-circle-box {display:inline-block; }
.video-circle-box .circle-box {position:relative; margin:auto; width:60px; height:60px; text-align:center; border:2px solid #fff; border-color:rgba(255, 255, 255, 0.2); border-radius: 50%; z-index:11; box-sizing:border-box; cursor:pointer;}
.video-circle-box .circle-box svg{
	overflow: visible; 
	position:absolute;
	top:2px;
	left:-2px;
	width:54px;
	height:54px;
	fill:none; 
	stroke:#fff;
	transform:rotate(-90deg);
}
.video-circle-box .circle-box svg circle { transform-origin: center; stroke: #fff; stroke-dasharray: 360; stroke-dashoffset: 360; stroke-width: 4px; }
.video-circle-box .circle-box i {line-height:54px; font-size:24px; color:#fff; }
.video-circle-box .circle-box i.play:before {content:"\ea3e";}

@media all and (max-width:1024px){
	/*#mainVideoCon {height:56.25vw;}	*/
	.background-video iframe {height:100%; min-height:100%;}
	.video-circle-box .circle-box {width:43px; height:43px;}
	.video-circle-box .circle-box svg {width:38px; height:38px; }
	.video-circle-box .circle-box i {font-size:18px; line-height:38px;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual {overflow:hidden; width:100%; height:800px; position:relative; /* padding-top:100px;  */background-color: #000;}	/* 비주얼높이값 이미지에맞게 수정 */ 
#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{
	position:absolute; 
	width:100%;
	height:100%; top:0; left:0;
	background-size:cover !important;
	transition:transform 1s cubic-bezier(0.01, 0.31, 0.25, 0.68); 
	transform:translateX(7%);
	transform-origin: 0 50%;
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-pc-img {transform-origin: 100% 50%;}
.main-visual-item .overlay{position:absolute; left:0px; top:0px; width:100%; height:100%; background: rgba(0,0,0,0.8);}

.main-visual-con{
		position:relative;
		width:100%;
		height:100%;
}
.main-visual-con .visual-item{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-visual-con .visual-item:first-child{z-index:10}
/*.main-visual-con .visual-item:first-child .visual-img{ transform:translateX(0)} */
.main-visual-con .visual-item .visual-img{
	position:absolute; top:0px; left:0px; 
	width:100%; height:100%; 
	background-size:cover !important;
	transition:transform 1s cubic-bezier(0.01, 0.31, 0.25, 0.68); 
	transform:translateX(7%);
	transform-origin: 0 50%;
}
.main-visual-con .visual-item .visual-img a {display:block; width:100%; height:100%;}
.main-visual-con .visual-item .overlay{position:absolute; left:0px; top:0px; width:100%; height:100%; background: rgba(0,0,0,0.8);}
.main-visual-con .visual-item .visual-inner{overflow:hidden; position: absolute; width: 100%; height: 100%;  left:0; right:auto; }
.main-visual-con .visual-item.active .visual-img{transform-origin: 100% 50%; }
.main-visual-con .visual-item.next-active{z-index:2}
.main-visual-con .visual-m{display:none;}
/* 초기화 */
.main-visual-con .visual-item.first .visual-inner {width:100%;}
.main-visual-con .visual-item.first .overlay {display:none;}
.main-visual-con .visual-item.first .visual-img {transform:translateX(0);}

/* 메인 비주얼 :: 텍스트영역 */
.main-txt-con{position:absolute; top:0px; bottom:0px;left:0px; right:0px; z-index:99; }
.main-txt-con .visual-txt-item{position:absolute; left:0; right:0; width:100%; height:100%;}
.main-txt-con .visual-txt-item .main-visual-txt-con {
	position:relative; position:absolute; top:0; left:0; bottom:0px; right:0px;
	opacity:0;filter:Alpha(opacity=0);
}
.main-txt-con .visual-txt-item .main-visual-txt-inner  {
	position:absolute; right:0;
	top:50%;
	transform:translateY(-50%);
}
.main-txt-con .visual-txt-item.active{z-index:2;}
.main-txt-con .visual-txt-item.active .main-visual-txt-con{animation:fadeInUp 0.8s both 0.5s; opacity:1.0;filter:Alpha(opacity=100);}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0)
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        -ms-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }
}
.main-visual-txt-con .main-visual-txt1{display:block; font-size:18px; font-weight:400; letter-spacing:-0.35px; color:#aaa; margin-bottom:35px; font-weight:300;}
.main-visual-txt-con .main-visual-txt2 {font-size:60px; letter-spacing:-0.5px; color:#fff; line-height:1.2em;  font-weight:700; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s; }
.main-visual-txt-con .main-visual-txt-big{font-size:80px; letter-spacing:-0.35px; color:#fff; line-height:1.25em; font-weight:700; white-space:nowrap; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
.main-visual-txt-con .main-visual-txt-big .glow-text{line-height:1.25; margin-right:-10px; width:100vw;}
.main-visual-txt-con .main-visual-txt-sub{font-size:20px; letter-spacing:-0.25px; line-height:1.2em; color:rgba(255,255,255,0.5); font-weight:600; margin-top:20px;}

/* 메인 비주얼 :: 텍스트영역 :: 검정 */
.main-visual-txt-con.black .main-visual-txt-big{color:#1f1f1f;}
.main-visual-txt-con.black .main-visual-txt-sub{color:rgba(5,5,5,0.5);}

/* 메인 비주얼 :: 텍스트영역 :: 버튼 */
.main-visual-link{display:flex; align-items:center; justify-content:space-between; padding:0 30px; width:220px; height:54px; box-sizing:border-box; margin-top:60px; background:#0098a2;
background: 
linear-gradient(135deg, transparent 10px, #0098a2 0) top left,
linear-gradient(-135deg, transparent 0px, #0098a2 0) top right,
linear-gradient(-45deg, transparent 10px, #0098a2 0) bottom right,
linear-gradient(45deg, transparent 0px, #0098a2 0) bottom left;
 background-size: 50% 51%; background-repeat: no-repeat;}
.main-visual-link span{font-size:16px; letter-spacing:-0.025em; font-weight:600; color:#fff;}
.main-visual-link i{font-size:16px; color:#fff;}

/* 메인 비주얼 :: 텍스트영역 :: 좌측 */
.main-txt-con{}
.main-txt-con.left-con .visual-txt-item .main-visual-txt-inner{right:auto; left:0; padding-left:9.5%;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con {
	position:absolute; 
	top:50%; left:0px; 
	width:100%; word-break:keep-all;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-txt-con .main-visual-txt-inner {width:50%; float:right; padding-left: 13.37%; padding-bottom: 40px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.main-visual-txt-con .main-visual-txt1{display:block; font-size:18px; font-weight:400; letter-spacing:-0.35px; color:#aaa; margin-bottom:35px; font-weight:300;}
.main-visual-txt-con .glow-text-wrapper {margin-bottom:35px;}
.main-visual-txt-con .main-visual-txt2 {font-size:60px; letter-spacing:-0.5px; color:#fff; line-height:1.2em;  font-weight:700; white-space:nowrap; }
.main-visual-txt-con .main-visual-txt3 {font-size:15px; letter-spacing:-0.75px; color:#aaa; line-height:2em; margin-bottom:45px; word-break:keep-all;}
.visual-txt-item.item01 .main-visual-txt-con .main-visual-txt-img {margin-bottom:35px;}
.visual-txt-item.item01 .main-visual-txt-con .main-visual-txt-img img {max-width:100%;}
.visual-txt-item.item01 .main-visual-txt-con .glow-text-wrapper {margin-bottom:15px;}
.visual-txt-item.item03 .main-visual-txt-con .main-visual-txt1 {color:#000;}
.visual-txt-item.item03 .main-visual-txt-con .main-visual-txt2 {color:#000;}
.visual-txt-item.item03 .main-visual-txt-con .main-visual-txt3 {color:#000;}
.visual-txt-item.item05 .main-visual-txt-con .main-visual-txt-img {margin-bottom:35px;}
.visual-txt-item.item05 .main-visual-txt-inner{padding-top:40px;}
.visual-txt-item.item06 .main-visual-txt-con .main-visual-txt-img {margin-bottom:35px;}
.visual-txt-item.item06 .main-visual-txt-inner{padding-top:40px;}
.visual-txt-item.item07 .main-visual-txt-inner{padding-bottom:80px;}

#mainVideoCon .visual-txt-item.item01 .main-visual-txt-con .main-visual-txt1 {color:#000;}
#mainVideoCon .visual-txt-item.item01 .main-visual-txt-con .main-visual-txt2 {color:#000;}
#mainVideoCon .visual-txt-item.item01 .main-visual-txt-con .main-visual-txt3 {color:#000;}

.main-visual-txt-con .main-visual-txt2.inline {display:inline-block;}
.main-visual-txt-con .main-visual-txt2.inline.ml10 {margin-left:10px;}

/* ****************** 글자효과 ********************** */
.glow-text {overflow:hidden; line-height: 1;}
.glow-text span {display:inline-block;  white-space: pre;}
.visual-txt-item .glow-text span { display: inline-block; -webkit-font-smoothing: antialiased; transform: translateY(100%) ; transition:all 1s cubic-bezier(0.39, -0.46, 1, 1);}
.visual-txt-item.active .glow-text span { transform: translateY(0px);}
/* 익스에서 글자효과 지우기 */
.ie-browser .visual-txt-item .glow-text span {transform:none !important;}

/* 메인 비주얼 :: Util  */
.main-util-con {position:absolute; bottom:16%; right:0; width:50%; z-index:100; padding-left:13.37%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-util-con .inner {position:relative;}
.main-util-con .inner .arrow-dots-box {position:relative; margin-top: 40px;}

.main-util-con.left-con{right:auto; left:0; padding-left:9.5%;}

.arrow-dots-box.black .visual-arrow{color:#000;}
.arrow-dots-box.black .main-dots li button{background-color:rgba(0,0,0,0.25);}
.arrow-dots-box.black .main-dots li.active button{background-color:#000}


/* 메인 비주얼 :: Dots */
.main-util-con .main-dots-list {position:relative; z-index:9; padding-left:60px;  }
.main-util-con .main-dots li {float:left; display:block; margin-left:25px;  font-size:0;}
.main-util-con .main-dots li button {font-size:0; cursor:pointer; width:5px; height:5px; background-color: rgba(255,255,255,0.25); border-radius:50%;}
.main-util-con .main-dots li.active button {background-color: #fff;}

/* 메인 비주얼 :: 화살표 */
.main-util-con .visual-arrow {position:absolute; width:24px; height:24px; top:50%; margin-top:-12px; border:0; cursor:pointer; z-index:9; font-size:24px; color:#fff; }
.main-util-con .visual-arrow.prev{left:0;}
.main-util-con .visual-arrow.next{left:40px;}

@media all and ( max-width: 1280px ){
	.main-visual-txt-con .main-visual-txt-big{font-size:60px}
}
@media all and ( max-width: 1024px ){
	#mainVisual {padding-top:0;}
	.visual-txt-item .main-visual-txt-inner {padding-left:5%;}
	.main-util-con {padding-left:5%;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-con .visual-m{display:block;}
	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con  {top:0; 
	-webkit-transform: none;
	transform: none; }
	.main-txt-con .visual-txt-item .main-visual-txt-inner {width:100%; padding-left: 15px; transform:none; top:80px; margin-top:8.5%;}
	.main-visual-txt-con .main-visual-txt1{font-size:15px; margin-bottom:20px;}
	.main-visual-txt-con .main-visual-txt2{font-size:40px; }
	.main-visual-txt-con .main-visual-txt3{ font-size:13px; margin-bottom:0; }
	.main-visual-txt-con .main-visual-txt-big{font-size:40px; white-space: normal;}
	.main-visual-txt-con .main-visual-txt-sub{font-size:15px;}
	.main-visual-txt-con .glow-text-wrapper {margin-bottom:20px;} 
	.visual-txt-item.item01 .main-visual-txt-con .main-visual-txt-img img {height: 20px;}
	.visual-txt-item.item05 .main-visual-txt-con .main-visual-txt-img{margin-bottom:20px;}
	.visual-txt-item.item05 .main-visual-txt-con .main-visual-txt-img img {height: 20px;}
	.visual-txt-item.item05 .main-visual-txt-inner{padding-top:0px;}
	.visual-txt-item.item06 .main-visual-txt-con .main-visual-txt-img{margin-bottom:20px;}
	.visual-txt-item.item06 .main-visual-txt-con .main-visual-txt-img img {height: 20px;}
	.visual-txt-item.item06 .main-visual-txt-inner{padding-top:0px;}
	.visual-txt-item.item07 .main-visual-txt-inner{padding-bottom:40px;}
	
	.main-txt-con.left-con .visual-txt-item .main-visual-txt-inner{padding-left:15px;}
	
	.main-visual-link{width:180px; height:50px; margin-top:30px; padding:0 15px;}

	/* 메인 비주얼 :: Util  */
	.main-util-con {right:auto; bottom:7.5%; padding-left:15px; width:100%;}
	/* 메인 비주얼 :: Dots + 화살표 */
	.arrow-dots-box.black.m-white .visual-arrow{color:#fff;}
	.arrow-dots-box.black.m-white .main-dots li button{background-color:rgba(255,255,255,0.25);}
	.arrow-dots-box.black.m-white .main-dots li.active button{background-color:#fff}
}
@media all and (max-width:480px){
	#mainVisual {padding-top:0;}
	.main-txt-con .visual-txt-item .main-visual-txt-inner {top:60px;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
#mainContent {background-color: #000;}
/* 공통 :: 타이틀 */
.main-tit-box{letter-spacing:-0.75px; text-align:center; }
.main-tit-box .main-tit{color:#fff; font-size:40px;}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:26px;}

}
/* -------- 메인 컨텐츠 :: Product -------- */
#mainProductCon { height:100vh; background-color: #1f1f1f;}
#mainProductCon .area-box {height:100%;}
.main-product-con {display:table; width:100%; height:100%; }
.main-product-con .main-product-list-box {padding:0 10.46%;}
.main-product-con .main-product-list  {margin:0 -1.42%;}
.main-product-con .main-product-list li {float:left; width: 30.42%; margin:0 1.42%;}
.main-product-con .main-product-list a {display:block; position:relative; padding-top:176.05%; overflow:hidden; background-color: #fff; transition:all 0.4s;}
.main-product-con .main-product-list a .item-bg {position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; }
.main-product-con .main-product-list a img.m-img {display:none;}
.main-product-con .main-product-list .item-tit {position:absolute; bottom:0; width:100%; text-align:center; padding-bottom:60px; z-index:9; }
.main-product-con .main-product-list .item-tit .tit {font-size: 24px; letter-spacing:-0.65px; color:#000; transition:all 0.4s;}
.main-product-con .main-product-list .item-tit .txt {font-size: 18px; line-height:1.66em; letter-spacing:-0.65px; color:#555; margin-top:10px; transition:all 0.4s;}
.main-product-con .main-product-list a:before  {content:""; width:100%; height:100%; position:absolute; left:0; top:0;  z-index:1; opacity:0; transition:all 0.4s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#308696+0,071828+100 */
background: #308696; /* Old browsers */
background: -moz-linear-gradient(top,  #308696 0%, #071828 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #308696 0%,#071828 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #308696 0%,#071828 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#308696', endColorstr='#071828',GradientType=0 ); /* IE6-9 */

}
.main-product-con .main-product-list a:hover:before {opacity:0.8;filter:Alpha(opacity=80);}
.main-product-con .main-product-list a:hover .tit {color :#fff; }
.main-product-con .main-product-list a:hover .txt {color: rgba(255,255,255,0.5); }

@media all and (max-width:1024px){
	.main-product-con .main-product-list-box {padding:0 5%;}
}
@media all and (max-width:800px){
	 #mainProductCon {height:auto; padding: 10% 0;} 
	.main-product-con {}
/* 	.main-product-con {display:block;}
	.main-product-con .inner-box {display:block;} */
	.main-product-con .main-product-list-box {padding:0;}
	.main-product-con .main-product-list  {margin:0;}
	.main-product-con .main-product-list li {float:none; width: 100%; margin:15px 0;}
	.main-product-con .main-product-list a {padding-top:48.64%;}
	.main-product-con .main-product-list a img.m-img {display:block;}
	.main-product-con .main-product-list a img.pc-img {display:none;} 
	.main-product-con .main-product-list .item-tit {bottom:auto; padding-bottom:0; top:50%; transform:translateY(-50%); width:50%; text-align:left; padding-left: 40px;  }
	.main-product-con .main-product-list .item-tit .tit {font-size: 22px; }
	.main-product-con .main-product-list .item-tit .txt {font-size: 15px; }
}
@media all and (max-width:480px){
	/* #mainProductCon {padding-top:60px;} */
	.main-product-con {}
	.main-product-con .main-product-list .item-tit {padding-left:20px;}
}

/* -------- 메인 컨텐츠 :: Board -------- */
.main-board-con-box {background-color: #17273d;  }
.main-board-con-box.col-3-1 .main-news-con {width:70.78%;}
.main-board-con-box.col-3-1 .main-event-con {width:29.22%;}
.main-board-con {float:left; width:50%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-board-con .main-tit-box {position:relative; text-align:left;}
.main-board-con .main-tit-box .slick-arrow {position:absolute; right:0; font-size:24px; color:#fff; top:0; height: 40px; }
.main-board-con .main-tit-box .slick-arrow i {vertical-align:top;}
.main-board-con .main-tit-box .slick-arrow.slick-prev {margin-right: 40px;}
.main-board-con .main-tit-box .slick-arrow.slick-disabled {color: rgba(255,255,255,0.25); cursor:default;}
.main-board-con .main-board-slide-box {margin: 40px 0 47px; }
.main-board-con .main-board-slide {margin:0 -20px;}
.main-board-con .main-board-slide li {margin:0 20px; width:360px;}
.main-board-con .main-board-slide li .img-wrap {position:relative; padding-top: 70%; background-color:#fff;}
.main-board-con .main-board-slide li .img-wrap .icon:before {content:""; position:absolute; width:0; height:0; right:0; top:0;border-top: 50px solid #17273d; border-left: 50px solid transparent; }
.main-board-con .main-board-slide li .img-wrap .icon i {position:absolute; right:0; top:0; font-size: 24px; color: #fff; }
.main-board-con .main-board-slide li .txt-box .tit {display:block; font-size: 20px;line-height: 1.2; letter-spacing:-0.75px; color: #fff; font-weight:500; overflow:hidden; white-space:nowrap; margin-top: 40px; text-overflow:ellipsis; }
.main-board-con .main-board-slide li .txt-box .txt {font-size: 16px; color: rgba(255,255,255,0.4); font-weight:300; line-height:1.62em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top: 20px; }
.main-board-con .main-board-slide li .txt-box .date {font-size: 14px; color: rgba(255,255,255,0.2); font-weight:500; display:block; margin-top: 20px; }

.main-news-con { padding:100px 5.25%;}
.main-event-con {background-color: #000;  padding:100px 5.25%;}
.main-event-con .main-board-slide li .img-wrap .icon:before {border-top-color: #000;}

@media all and (max-width:1024px){
	.main-board-con-box.col-3-1 .main-board-con{ width:50%; padding: 50px 30px;}
	.main-board-con .main-board-slide {margin:0 -15px; padding-right:8.75%;  overflow:hidden;}
	.main-board-con .main-board-slide li {margin:0 15px;}
	.main-board-con .main-board-slide .slick-list {overflow:visible;}
}
@media all and (max-width:800px){
	.main-board-con-box .main-board-con{ width:100% !important; padding:50px 15px !important; }
	.main-board-con .main-board-slide-box {margin: 35px 0 0;}
	.main-board-con .main-board-slide li {width:320px;}
	.main-board-con .main-board-slide li .txt-box .tit {font-size:16px; margin-top:20px;}
	.main-board-con .main-board-slide li .txt-box .txt {font-size: 14px; margin-top:10px;}
	.main-board-con .main-board-slide li .txt-box .date {font-size: 12px; margin-top:15px;}
}

/* -------- 메인 컨텐츠 :: Slogan -------- */
#mainSloganCon {/* padding:95px 0; */ height:300px; background:url("/images/main/main_slogan_bg.jpg") center no-repeat; background-size:cover; }
#mainSloganCon .inner {height:100%;}
.main-slogan-txt {font-size: 16px; letter-spacing:-0.25px; color: rgba(255,255,255,0.35); line-height:1.75em; margin-top:20px;}
@media all and (max-width:800px){
	.main-slogan-txt {font-size: 15px; }
}
/* -------- 메인 컨텐츠 :: Map -------- */
#mainMapCon {padding:98px 0 44px; background-color:#000;}
#mainMapCon .area-box {position:relative; text-align:center;}
.global-map-con{position:relative; text-align:center; height:768px; background:url("/images/main/main_map_img.png") center no-repeat;}
.global-map-con-m{display:none;}
.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(1);
			transform: scale(1);
	opacity: 0; } 
}
.nation-circle{position:absolute; left:50%; top:0; display:inline-block; width:80px; height:80px;}
.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(255, 255, 255, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	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:-5px 0 0 -5px; width:10px; height:10px; background-color:#5175a6; 
	-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:0; margin-top:-25px; width:100%; text-align:center; font-size:12px; color:#5175a6; font-weight:600; }
.nation-circle.white i {background-color:#fff; }
.nation-circle.white p {color:#fff; left:50%;  margin:-5px 0 0 10px; }

/* 카운팅 */
.global-counting-box {position:absolute; bottom:85px; left:0; width:100%;}
.global-counting-list li {width:33.33%; float:left;}
.global-counting-list .num {font-size: 80px; color: #fff; letter-spacing:-0.5px; font-weight:600; }
.global-counting-list .num.percent:after {content:"%"; font-size:50px;}
.global-counting-list .txt01 {font-size: 18px; color: #aaa; margin-top:35px; }
.global-counting-list .txt02 {font-size: 30px; color: #fff; font-weight:700; margin-top:20px;}

@media all and (max-width:1740px){
	.global-map-con {width:1559px; left:50%; margin-left:-779.5px; transform:scale(0.7);}
}
@media all and ( max-width: 1024px ){
	.global-map-con{display:none;}
	.global-map-con-m{display:block;}
	.global-map-con-m img{width:100%;}
	.global-counting-box{position:static;}
}
@media all and (max-width:800px){
	#mainMapCon {padding:70px 0 20px; }
	.global-counting-list li {float:none; width:100%; text-align:left; border-top: 1px solid rgba(255,255,255,0.15); padding:40px 0; }
	.global-counting-list li:first-child {border-top:0;}
	.global-counting-list li dl {display:table; width:100%; height:100%;}
	.global-counting-list li dl dt {display:table-cell; vertical-align:middle;}
	.global-counting-list li dl dd {display:table-cell; vertical-align:middle; text-align: right;}
	/* 카운팅 */
	.global-counting-box .area {margin:0 -15px;}
	.global-counting-list .num {font-size: 50px;}
	.global-counting-list .num.percent:after {font-size:30px;}
	.global-counting-list .txt01 {font-size: 13px; margin-top:0; }
	.global-counting-list .txt02 {font-size: 20px; margin-top:10px;}

}

/* -------- 메인 컨텐츠 :: Banner -------- */
#mainBannerCon { position:relative; background:url("/images/main/main_iljin_bg.jpg")  center no-repeat; background-size:cover;}
#mainBannerCon .inner-box {height:342px;  position:relative;}
#mainBannerCon .inner-box:before {content:""; width:100%; height: 4px; background-color: #fff; position:absolute; left:0; top:50%; margin-top:-2px;}
.main-banner-con { float:left; width:50%; height:100%; }
.main-banner-con .logo-box {display:table; width:100%; height:50%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-banner-con .logo-box .img-wrap {display:table-cell; vertical-align:middle;}
.main-banner-con .txt-box {display:table; width:100%; height:50%;}
.main-banner-con .txt {display:table-cell; vertical-align:middle; font-size: 26px; letter-spacing:-0.75px; line-height:1.46em; font-weight:300; color:#fff; }
.main-banner-con .txt b{font-weight:500;}

@media all and (min-width:1025px){
	.main-banner-right {text-align:right; }
	.main-banner-right .logo-box {padding-top:171px;  height:100%; }
	.ie-browser .main-banner-right .logo-box {height:50%;  }
	.main-banner-right .txt-box {display:block; position:absolute; top:0; right:0; }
	.main-banner-right .txt-box .txt-inner {display:table;width:100%; height:100%;}
}

@media all and (max-width:1024px){
	#mainBannerCon {background:none; margin:0 -15px;}
	#mainBannerCon .inner-box {height:auto;}
	#mainBannerCon .inner-box:before {display:none;}
	.main-banner-con {float:none; width:100%; height:125px; display:table; padding:0 15px; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; }
	.main-banner-con .logo-box {width:160px; height:auto; display:table-cell; vertical-align:middle; }
	.main-banner-con .logo-box .img-wrap {display:block;}
	.main-banner-con .txt-box { width:auto; height:auto; display:table-cell; vertical-align:middle; padding:0 15px;}
	.main-banner-con .txt {display:block; font-size:16px;}
	.main-banner-left {background:url("/images/main/main_banner_bg.jpg") no-repeat; background-size:cover;}
	.main-banner-left .logo-box img {height:25px;}
	.main-banner-right .logo-box img {height:53px;}
	.main-banner-right {text-align:left; background-color: #004375; }
	.main-banner-right .logo-box {padding-top:0; }
}
@media all and (max-width:480px){
	.main-banner-con .logo-box {width:40%; text-align:center;}
	.main-banner-con .txt-box {width:60%;}
}



/* **** 메인 컨텐츠 :: 펼침효과 **** */
@media all and (min-width:1300px){
	#mainSloganCon {width:1280px; margin:auto;}
	#mainBannerCon {width:1280px; margin:auto; }
	#mainBannerCon .area-box {padding:0 30px;}
	[data-aos='main-slogan'].aos-animate#mainSloganCon {width:100%; transition:width 1s cubic-bezier(0.550, 0.055, 0.675, 0.190); }
	[data-aos='main-banner'].aos-animate#mainBannerCon  {width:100%; transition:width 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); }
}