@charset "utf-8";

/* ******************  메인 비주얼 ********************** */
.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}
#mainContainer{margin-bottom:5%;}
#mainVisual{ width:100%; height:100%; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:100%;}
.mainVisualWrap .slick-track,
.mainVisualWrap .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.mainVisualWrap, 
.mainVisualWrap .slick-list,  
.mainVisualWrap .slick-track, 
.mainVisualItem{
	height:100%;
	/*height:100vh !important;*/
}
.mainVisualWrap{z-index:1;}

/* 메인 비주얼 :: 이미지 */
.mainVisualItem{position:relative;}
.mainVisualItem .mainVisualImg-pc,
.mainVisualItem .mainVisualImg-m{
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition:transform 6000ms ease-in-out ;
	-moz-transition:transform 6000ms ease-in-out ;
	-o-transition:transform 6000ms ease-in-out ;
	-ms-transition:transform 6000ms ease-in-out ;
    transition:transform 6000ms ease-in-out ;	
	/*-webkit-transition:transform 7000ms cubic-bezier(0.1, 0.4, 0.4, 0.2) ;
	-moz-transition:transform 7000ms cubic-bezier(0.1, 0.4, 0.4, 0.2) ;
	-o-transition:transform 7000ms cubic-bezier(0.1, 0.4, 0.4, 0.2) ;
	-ms-transition:transform 7000ms cubic-bezier(0.1, 0.4, 0.4, 0.2) ;
    transition:transform 7000ms cubic-bezier(0.1, 0.4, 0.4, 0.2) ;	*/
	-ms-transform: scale(1.15,1.15);
    -o-transform: scale(1.15,1.15);
    -moz-transform: scale(1.15,1.15);
    -webkit-transform: scale(1.15,1.15);
     transform: scale(1.15,1.15);
}
.mainVisualItem .mainVisualImg-m{display:none;}

/* 메인 비주얼 :: 텍스트 */
.mainVisualItem .mainVisualTxt{
	position:absolute; top:50%; left:0px; width:100%;
	-ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%); 
     transform: translateY(-50%);
}
.mainVisualItem .mainVisualTxt .mainVisualTxt-tit,
.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{
	opacity:0;filter:Alpha(opacity=0);
	/*-ms-transform: translateX(-30px); 
    -o-transform: translateX(-30px); 
    -moz-transform: translateX(-30px);
    -webkit-transform: translateX(-30px); 
     transform: translateX(-30px);*/
	-webkit-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-moz-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-o-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-ms-transition:opacity 1.0s, transform 1.0s 0s;
	transition:opacity 1.0s 0s, transform 1.0s 0s;
}
.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{display:block; font-size:50px; font-weight:600; line-height:1.1; color:#001848; margin-top:-100px; margin-bottom:70px; }
.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:21px; font-weight:400; line-height:1.5; color:#001848;}

/* 메인 비주얼 :: active효과 */
/* .mainVisualItem.active-item .mainVisualImg-pc{
	-ms-transform: scale(1.08,1.08);
    -o-transform: scale(1.08,1.08);
    -moz-transform: scale(1.08,1.08);
    -webkit-transform: scale(1.08,1.08);
     transform: scale(1.08,1.08);
}*/
.mainVisualItem.active-item .mainVisualImg-pc{
	-ms-transform: scale(1.0,1.0);
    -o-transform: scale(1.0,1.0);
    -moz-transform: scale(1.0,1.0);
    -webkit-transform: scale(1.0,1.0);
     transform: scale(1.0,1.0);
}
.mainVisualItem.active-item .mainVisualImg-m{
	-ms-transform: scale(1.0,1.0);
    -o-transform: scale(1.0,1.0);
    -moz-transform: scale(1.0,1.0);
    -webkit-transform: scale(1.0,1.0);
     transform: scale(1.0,1.0);
}
.mainVisualItem.active-item .mainVisualTxt-tit,
.mainVisualItem.active-item .mainVisualTxt-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px); 
     transform: translateX(0px);
}

/* 메인비주얼  :: 컨트롤영역 */
/*.main-visual-controls{position:absolute; bottom:68px; left:100px; width:350px;text-align:center; z-index:11; } 
.main-visual-controls > div{display:inline-block; vertical-align:middle;}
.main-visual-controls .arrow-controls button{vertical-align:middle; display:inline-block;}
.main-visual-controls .arrow-controls .prev-visual-btn{margin-right:25px}
.main-visual-controls .arrow-controls i{font-size:24px; letter-spacing:-0.25px; color:#fff;}
.main-visual-controls .arrow-controls .next-visual-btn i{position:relative; top:-1px;}
.main-visual-controls .paging-controls{text-align:center; margin:0 26px 0 35px; color:#fff; font-weight:700}
.main-visual-controls .paging-controls em{margin:0 7px}
.main-visual-controls .stop-pause-controls{position:relative;}
.main-visual-controls .play-visual-btn{display:none;}
.main-visual-controls .stop-pause-controls i{color:#fff; font-size:24px;} */

/* 메인비주얼 :: paging 영역 */
.mainVisualWrap .slick-dots{position:absolute; right:20vw; left:20vw; text-align:center; bottom:80px; z-index:11;}
.mainVisualWrap .slick-dots li{float:left; width:32%; margin:0 0.5%; cursor:pointer;}
.mainVisualWrap .slick-dots li a{display:block; width:100%;}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit{color:#fff;font-size:16px; line-height:1.3; letter-spacing:0px; text-align:left; padding-top:17px;}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit strong{font-size:16px; font-weight:300; margin-right:9px}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit span{opacity:0.8;filter:Alpha(opacity=80);}
.mainVisualWrap .slick-dots li .loading-bar-line{display:block; position:relative; height:2px; width:100%; background-color:#fff; background-color:rgba(255,255,255,0.8);}
.mainVisualWrap .slick-dots li .loading-bar-line:after{position:absolute; top:0px; left:0px; height:2px; background-color:#001848; width:0; content:""; z-index:1}
.mainVisualWrap .slick-dots li.active-item .loading-bar-line:after{width:100%; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 4s }

/* 메인비주얼 :: 버튼 */
.btn{height:60px; line-height:60px;}
.btnStyle01{position:relative; overflow:hidden; display:block; border:2px solid #001848; text-align:left; background-color:#001848; width:200px;}
.btnStyle01:before{
    display:block; position:absolute; left:-125%; bottom:0; content:""; width:120%; height:150%; background:#fff; opacity:0;filter:Alpha(opacity=0);
    transform:skew(-10deg); 
    -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.btnStyle01 strong{position:relative; left:0px; z-index:1; display:block; color:#fff; font-size:20px; font-weight:500; letter-spacing:-0.5px; text-align:center; }
.btnStyle01:hover{background-color:#fff;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.btnStyle01:hover strong{color:#001848;}
.btnStyle01:hover:before{left:-5%; opacity:1.0;filter:Alpha(opacity=100);}
@media all and ( max-width: 480px ){
.btn{height:40px; line-height:40px;}
}

/* 메인 비주얼 :: 애니메이션 */
.mainVisualTxt .move-up {
  display: block;
  padding-bottom: 0.1em;
  overflow-y: hidden;
}
.mainVisualTxt .move-up span {
  position: relative;
  display: inline-block;
}
.active-item .mainVisualTxt .move-up span {
  animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay:0.3s;
}
.active-item .mainVisualTxt .move-up.mainVisualTxt-btn span {
  animation-delay: 0.8s;
}
@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}


/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1850px ){
	.mainVisualItem .mainVisualTxt .mainVisualTxt-inner{margin:0 100px;}
}
@media all and ( max-width: 1630px ){
    .mainVisualWrap .slick-dots{left:10vw; right:10vw;}
}
@media all and ( max-width: 1430px ){
	.mainVisualItem .mainVisualTxt .mainVisualTxt-inner{margin:0 30px}
	/*.main-visual-controls{left:30px; bottom:25px;text-align:left; width:250px}*/
	.mainVisualWrap .slick-dots{left:30px; right:30px; bottom:35px;}
	.mainVisualWrap .slick-dots li .loading-bar-paging-tit strong{display:block; font-size:15px; padding-bottom:5px;}
	.mainVisualWrap .slick-dots li .loading-bar-paging-tit{font-size:11px; padding-bottom:10px;}
}
@media all and ( max-width: 991px ){
	/* 메인 비주얼 :: 이미지 */
	.mainVisualItem .mainVisualImg-pc{display:none}
	.mainVisualItem .mainVisualImg-m{display:block;}
	/* 메인비주얼  :: 컨트롤영역 
	.main-visual-controls{left:15px; bottom:60px;}*/
	/* 메인비주얼 :: paging 영역 */
	.mainVisualWrap .slick-dots{bottom:25px; left:15px; right:15px;}
	.mainVisualWrap .slick-dots li .loading-bar-paging-tit{display:none;}
	.mainVisualWrap .slick-dots li .loading-bar-line,
	.mainVisualWrap .slick-dots li .loading-bar-line:after{height:4px}
	/* 메인 비주얼 :: 텍스트 */
	.mainVisualItem .mainVisualTxt{top:auto; bottom:100px;margin-top:0;
	-ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0); 
     transform: translateY(0);
	}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-inner{margin:0}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{color:#fff; font-size:40px; margin-bottom:30px}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{color:#fff; font-size:21px;}
}
@media all and ( max-width: 575px ){
	/* 메인비주얼  :: 컨트롤영역 
	.main-visual-controls{bottom:55px;}
	.main-visual-controls .arrow-controls .prev-visual-btn{margin-right:15px}
	.main-visual-controls .arrow-controls i{font-size:18px}
	.main-visual-controls .paging-controls{font-size:12px}
	.main-visual-controls .stop-pause-controls i{font-size:18px; position:relative; top:2px;}*/
	/* 메인비주얼 :: paging 영역 */
	.mainVisualWrap .slick-dots li .loading-bar-line,
	.mainVisualWrap .slick-dots li .loading-bar-line:after{height:3px}
	/* 메인 비주얼 :: 텍스트 */
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{font-size:30px;font-weight:600;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:18px;font-weight:300;}
}




/* ******************  메인컨텐츠 :: & 게시판 카드 영역 ********************* */
.mainContentsBlock{padding:3% 0 5%;}
.mainSectionTit{text-align:center;font-size:45px;font-weight:600;padding-top:5%;padding-bottom:6%;}
.maincontentsTit{font-size:31px;font-weight:500;line-height:1.3;margin-bottom:30px;}
.maincontentsTitBig{display:inline-block;font-size:35px;font-weight:600;margin-bottom:10px;color:#1e8ab1;}

/* Button 스타일 */
.button01{cursor:pointer;display:inline-block;margin-top:80px;padding:10px 0 10px;border:0;background:transparent;font-size:100%;font-weight:500;color:#001848;}
.button01:hover{color:#1e8ab1;}


@media all and (max-width:1430px){
	.button01{margin-top:50px;}
}
@media all and (max-width:1024px){
    .mainSectionTit{font-size:36px;}
	.maincontentsTit{font-size:22px;}
	.maincontentsTitBig{font-size:25px;}
	.button01{margin-top:30px;}
}
@media all and (max-width:991px){
    .mainSectionTit{font-size:33px;}
	.maincontentsTit{margin-bottom:20px;}
}
@media all and (max-width:767px){
	.mainSectionTit{font-size:30px;padding-top:10%;padding-bottom:8%;}
	.maincontentsTit{font-size:22px;}
	.maincontentsTitBig{font-size:25px;}
}
@media all and (max-width:575px){
    .mainSectionTit{font-size:25px;}
	.maincontentsTit{font-size:17px;font-weight:500;}
	.maincontentsTitBig{font-size:19px;}
	.button01{margin-top:20px;}
}



/* ******************  메인컨텐츠 커러셀 ********************* */
.mainBanner{position:relative;width:100%;max-width:1240px;height:100%;margin:0 auto;}
.mainBanner .slick-slider,
.mainBanner .slick-list,
.mainBanner .slick-track{height:100%; z-index:2;}
.mainBanner .slick-slide img {display:block;width:100%;max-width:420px;padding-left:20px;padding-right:20px;}
/* Prev & Next */
.mainBanner .slick-prev{position:absolute; left:-100px; bottom:calc(50% - 40px); width:80px; height:80px; z-index:3; background:rgba(255,255,255,0);}
.mainBanner .slick-next{position:absolute; right:-100px; bottom:calc(50% - 40px); width:80px; height:80px; z-index:3; background:rgba(255,255,255,0);}
.mainBanner .slick-prev i{font-size:70px; font-weight:400; color:#1e8ab1; vertical-align:middle;}
.mainBanner .slick-next i{font-size:70px; font-weight:400; color:#1e8ab1; vertical-align:middle;}
/* Dots */
.mainBanner .slick-dots{display:none !important;}

.bannerTxtImg{width:100%; max-width:1063px; height: auto; margin-top:2%; margin-bottom:8%;}

@media all and (max-width: 1439px){
.mainBanner .slick-slide img {display:block;width:100%;max-width:100%;padding-left:15px;padding-right:15px;}
/* Prev & Next */
.mainBanner .slick-prev {display:none !important;}
.mainBanner .slick-next {display:none !important;}
/* Dots */
.mainBanner .slick-dots {display: block !important; position: absolute; bottom:-50px; list-style: none;  text-align: center; padding: 0px; width: 100%; z-index:11; }
.mainBanner .slick-dots li {position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer;}
.mainBanner .slick-dots li button {border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; }
.mainBanner .slick-dots li button:focus {outline: none; }
.mainBanner .slick-dots li button:before {position: absolute; top: 0; left: 0; content: '\2022'; width: 20px; height: 20px; font-family:'Poppins'; font-size:60px; line-height: 20px; text-align: center; color: #0090c5; opacity: 0.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mainBanner .slick-dots li.slick-active button:before {opacity: 1.0; }

.bannerTxtImg{margin:5% auto 8%;}
}
@media all and (max-width: 768px){
.mainBanner .slick-dots {bottom:-40px;}
.bannerTxtImg{margin:8% auto 8%;}
}