@charset "utf-8";
/* CSS Document */

/********* 메인 공통 css ********/
.main-wrap {width:100vw; height:100vh; position:relative;}






/******* 메인 슬라이드 *********/
.main-slider-wrap {position:absolute; left:0; top:0; width:100%; height: 100%; z-index:0;}

.main-slider-wrap .slick-slider {width:100%; height:100%;}
.slick-track {height:100vh;}
.slick-slide > div {width:100%; height:100%;}


/*이미지*/
.main-slider-wrap .slick-slider .img-b {width:100%; height:100%; position:absolute; left:0; top:0;}
.main-slider-wrap .slick-slider .img-b img {width:100%; height:100%;}

@media all and (max-width:1000px){	
	.main-slider-wrap .slick-slider .img-b {width:250%; left:-120%;}
}

/*글자*/
.main-slider-wrap .slick-slider .letter-box {position:absolute; left:100px; top:calc(45% - 150px); width:calc(100% - 100px); height:260px; text-align: center; z-index: 1000;}
.main-slider-wrap .slick-slider .letter-box h3 {font-size: 65px; font-weight: bold; color:#fff; text-shadow: -4px 4px 4px rgba(0,0,0,0.2); margin-bottom:22px; letter-spacing: -0.03em;}
.main-slider-wrap .slick-slider .letter-box .txt {font-size: 20px; color:#fff; }
.main-slider-wrap .slick-slider .letter-box .btn-Box {width:100%; text-align: center; position:absolute; left:0; bottom:0;}
.main-slider-wrap .slick-slider .letter-box .btn-Box button {padding: 11px 5px 10px; min-width: 140px; border:2px solid #fff; color:#fff; font-size: 15px; letter-spacing: 0.1em; text-align:center;}
.main-slider-wrap .slick-slider .letter-box .btn-Box button:hover {background-color:rgba(255,255,255,0.2);
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@media all and (max-width:1200px){	
.main-slider-wrap .slick-slider .letter-box h3 {font-size: 40px;}
.main-slider-wrap .slick-slider .letter-box .txt {font-size: 17px;}
}

@media all and (max-width:1000px){	
	.main-slider-wrap .slick-slider .letter-box {left:0; top:30%; width:100%; height:auto; padding:0 50px;}
	.main-slider-wrap .slick-slider .letter-box h3 {font-size: 23px; margin-bottom:15px;}
	.main-slider-wrap .slick-slider .letter-box .txt {font-size: 14px; margin-bottom:30px;}
	.main-slider-wrap .slick-slider .letter-box .btn-Box {width:100%; position:relative;}
	.main-slider-wrap .slick-slider .letter-box .btn-Box button {padding: 5px 5px 4px; min-width: 100px; border:1px solid #fff; font-size: 13px;}
}

/*슬라이드 글자 효과*/
.slick-slider .letter-box h3,
.slick-slider .letter-box .txt,
.slick-slider .letter-box .btn-Box button {
	opacity:0;filter:Alpha(opacity=0);
	
	-ms-transform: translateX(-50px); 
    -o-transform: translateX(-50px); 
    -moz-transform: translateX(-50px);
    -webkit-transform: translateX(-50px); 
     transform: translateX(-50px);
	 
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}

.slick-slider.active .letter-box h3,
.slick-slider.active .letter-box .txt,
.slick-slider.active .letter-box .btn-Box button {
	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);
}

.slick-slider.active .letter-box .txt {
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s
	;-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}

.slick-slider.active .letter-box .btn-Box button {
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s
	;-ms-transition-delay:0.5s;
	transition-delay:0.5s;
}


/*슬라이드 nav (점)*/
.main-slider-wrap .slick-dots{position:absolute; width:100%; padding-left:100px;text-align:center; bottom:37%; left:0; z-index: 100;}
.main-slider-wrap .slick-dots li {display:inline-block; margin:0 1px ; vertical-align: middle; }
.main-slider-wrap .slick-dots li button{
	width:67px; height:6px; background-color:rgba(255,255,255,0.5); font-size: 0;
	-webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}
.main-slider-wrap .slick-dots li.slick-active button{background-color:rgba(255,255,255,1);}

.main-slider-wrap .slick-dots li.slick-play a i {font-size:15px; margin-top:-1px; color:#fff; vertical-align: middle;}
.main-slider-wrap .slick-dots .slick-play.active a i {color:rgba(255,255,255,0.5);}


@media all and (max-width:1000px){	
	.main-slider-wrap .slick-dots{padding-left:0px; bottom:20%;}
	.main-slider-wrap .slick-dots li {}
	.main-slider-wrap .slick-dots li button{width:40px; height:5px; background-color:rgba(255,255,255,0.5); font-size: 0;}

	.main-slider-wrap .slick-dots li.slick-play a i {font-size:14px;}

}