@charset "utf-8";

#mainContainer{margin-bottom:0;}
/* ******************  메인 비주얼 ********************** */
.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}
#mainVisual{position:relative;width:100%;height:100vh;margin-top:0px;}	/* 비주얼높이값 이미지에 맞게 수정 */

.mainVisualWrap .slick-track,
.mainVisualWrap .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.mainVisualWrap, 
.mainVisualWrap .slick-list,  
.mainVisualWrap .slick-track, 
.mainVisualItem{
	height:100%;
}
.mainVisualWrap{z-index:1;}

/* 메인 비주얼 :: 이미지 */
.mainVisualItem{position:relative;}
.mainVisualItem .mainVisualImg-pc,
.mainVisualItem .mainVisualImg-m{
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition:transform 4000ms ease-in-out ;
	-moz-transition:transform 4000ms ease-in-out ;
	-o-transition:transform 4000ms ease-in-out ;
	-ms-transition:transform 4000ms ease-in-out ;
    transition:transform 4000ms ease-in-out ;	
	-ms-transform: scale(1.0,1.0);
    -o-transform: scale(1.05,1.0);
    -moz-transform: scale(1.0,1.0);
    -webkit-transform: scale(1.0,1.0);
     transform: scale(1.0,1.0);
}
.mainVisualItem .mainVisualImg-pc{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-inner{width:100%;padding:0 30px;text-align:left;}
.mainVisualItem .mainVisualTxt .mainVisualTxt-logo,
.mainVisualItem .mainVisualTxt .mainVisualTxt-tit,
.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit,
.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:25px; font-weight:400; line-height:1.2;letter-spacing:-1px; color:#fff; margin-top:30px; margin-bottom:30px; }
.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:16px; font-weight:400; line-height:1.3; color:#fff; margin-bottom:50px;}
.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:15px; font-weight:400; line-height:1.5; color:#fff;}

.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-pc{display:none;}

/* 메인 비주얼 :: active효과 */
.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-logo,
.mainVisualItem.active-item .mainVisualTxt-tit,
.mainVisualItem.active-item .mainVisualTxt-subtit,
.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);
}

/* 메인비주얼 :: paging 영역 */
.mainVisualWrap .slick-dots{position:absolute; right:30px; left:30px; text-align:center; bottom:30px; max-width:1280px; margin:0 auto; z-index:11;}
.mainVisualWrap .slick-dots li{float:left; width:24%; 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:13px; line-height:1.3; letter-spacing:-0.25px; text-align:left; padding-top:17px;display:none;}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit strong{font-size:18px; font-weight:400; margin-right:9px}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit span{letter-spacing:0.25px; opacity:1;filter:Alpha(opacity=1);}
.mainVisualWrap .slick-dots li .loading-bar-line{display:block; position:relative; height:2px; width:100%; background-color:rgba(255,255,255,1.0);}
.mainVisualWrap .slick-dots li .loading-bar-line:after{position:absolute; top:0px; left:0px; height:2px; background-color:#000; 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 }


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

/* ******************  메인 비주얼 반응형********************** */
@media (min-width: 576px) {
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{font-size:28px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:18px;margin-bottom:90px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:16px;}
}
@media (min-width: 768px) {
    .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 50px !important;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{font-size:40px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:20px;margin-bottom:150px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:18px;}
	.mainVisualWrap .slick-dots{right:50px; left:50px; bottom:50px;}
	.mainVisualWrap .slick-dots li .loading-bar-paging-tit{display:block;}
}
@media (min-width: 992px) {
    #mainVisual{height:648px;margin-top:80px;}
	.mainVisualItem .mainVisualImg-pc{display:block;}
	.mainVisualItem .mainVisualImg-m{display:none;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-pc{display:block;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-m{display:none;}
}
@media (min-width: 1025px) {
    #mainVisual{height:calc(100vh - 100px);margin-top:100px;}
    .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 100px !important;}
	.mainVisualWrap .slick-dots{right:100px; left:100px; bottom:50px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{font-size:50px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:24px;}
}
@media (min-width: 1310px){
    .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 0px !important;}
}


/* ******************  메인컨텐츠 레이아웃 & 텍스트 ********************* */
#mainService{position:relative;padding:13% 0 5%;}
#mainMidBanner{position:relative;padding:13% 0 0;background:#2f2a61 url(/imgs/main/bannerBg.jpg) no-repeat 50% 50%;background-size:cover;}
#mainContact{position:relative;padding:13% 0 5%;}
.mainSectionTit{font-size:2.3rem;font-weight:600;line-height:1.0;margin-bottom:0px;text-align:center;color:#000;}
.maincontentsTit{font-size:1.6rem;font-weight:700;line-height:1.3;margin-bottom:5px;color:#000;}

/*  min SM  */
@media (min-width: 576px) {
#mainService{padding:10% 0 5%;}
}
/*  min MD  */
@media (min-width: 768px) {
#mainMidBanner{padding:5% 0 0;}
.mainSectionTit{font-size:3rem;line-height:1.5;}
.maincontentsTit{font-size:1.6rem;}
}
/*  min LG  */
@media (min-width: 992px) {
#mainService{padding:7% 0 5%;}
#mainContact{padding:7% 0 5%;}
.mainSectionTit{font-size:3.3rem;}
.maincontentsTit{font-size:1.8rem;}
}
@media (min-width: 1200px) {
.no-pl{padding-left:0 !important;}
}


/* ****************** 메인 :: 버튼 ********************* */
.btnStyle01{
	position:relative; overflow:hidden; display:inline-block; 
	width:280px; height:70px; line-height:70px; margin:10px 10px; 
	border:1px solid #000; background-color:#fff; color:#000; font-size:140%; font-weight:600; text-align:center; 
}
.btnStyle01:hover{background-color:#efefef;-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 i{display:inline-block;margin-left:20px;}

.btnStyle02{
	position:relative; overflow:hidden; display:block; 
	width:100%; height:50px; line-height:50px; margin-top:10px; 
	border:1px solid #cfcfcf; background-color:#fff; color:#000; font-size:1.1rem; font-weight:600; text-align:center;
}
.btnStyle02:hover{background-color:#efefef;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.btnStyle02 i{display:inline-block;margin-left:20px;}

@media (min-width: 576px) {
	.btnStyle02{width:80%;} 
}


/* ******************  메인컨텐츠 커러셀 ********************* */
.mainBanner{position:relative;width:100%;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%;}
/* 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:686px; height: auto;}

@media all and (max-width: 1360px){
/* 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-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;}
}





/* ******************  메인컨텐츠 Box ********************* */
.overlayContainer {
  width:100%;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 15px;
  padding:0px 15px;
}
.overlayBox{
  position: relative;
  border:4px solid #f2f2f2;
  padding:0px 0px; text-align:center;
	word-break:break-all;
}
.overlayBox .overlay {
  opacity: 0.95;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #313131;
  overflow: hidden;
  width: 100%;
  height:0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  margin:0 auto;
}
.overlayBox:hover .overlay {
  height: 100%;
}
.overlayContents{padding:30px 15px;}
.overlayContents p{margin-bottom:20px;}

.overlayTxt {
  width:100%;
  color: #fff;
  letter-spacing:0px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlayTxt p{color:#fff;font-size:1.2rem;font-weight:500;line-height:1.3em;padding-left:20px;padding-right:20px;margin-bottom:25px;}
.overlayTxt .btn_go{width:60%;border:1px solid #fff;background:transparent;font-size:1rem;color:#fff;padding-top:10px;padding-bottom:10px;margin:20px auto 0px;text-align:center;}
.overlayTxt .btn_go:hover, focus{border:1px solid #fff;background-color:#fff;color:#000;transition: 0.5s;}


@media (min-width: 576px) {
	.overlayContainer {grid-template-columns: auto auto;} 
}
@media (min-width: 768px) {
}
@media (min-width: 1025px) {
  .overlayContainer {grid-template-columns: auto auto auto auto; grid-gap:20px;}
	.overlayBox p{margin-bottom:30px;}
}