@charset 'UTF-8';
/* Slider */
.slick-prev{position:absolute; top: 50%; left:-85px; width:60px; height:60px; line-height:60px; border-radius:60px; font-size:40px; text-align:center; background:rgba(0,0,0,0.2); color:#fff; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-prev:hover{background:rgba(232,126,97,1);}
.slick-next{position:absolute; top: 50%; right:-85px; width:60px; height:60px; line-height:60px; border-radius:60px; font-size:40px; text-align:center; background:rgba(0,0,0,0.2); color:#fff; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-next:hover{background:rgba(232,126,97,1);}

@media (max-width:640px){
	.slick-prev{left:10px !important;}
	.slick-next{right:10px !important;}
}

/* Arrows */
.slide-arrow{position:absolute; width:100%; left:0; top:50%; margin-top:-30px; height:60px;}
.slide-arrow button{color:rgba(255,255,255,0.5); font-size:60px; width:60px; height:60px; line-height:60px; cursor:pointer; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease;}
.slide-arrow button:hover{color:rgba(255,255,255,1);}
.slide-arrow .btn-prev{position:absolute; left:0;}
.slide-arrow .btn-next{position:absolute; right:0;}

/* Dots */
.slick-dotted.slick-slider{position:relative;}
.slick-dots{position: absolute; right:120px; bottom: 25px; text-align:right; display:inline-block;}
.slick-dots li{position: relative; display: inline-block;}
.slick-dots li button{font-size:0; line-height:0; display:nline-block; float:left; width:15px; height:15px; margin:4px; background:rgba(255,255,255,1); transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer; border-radius:20px;}
.slick-dots li button:hover, .slick-dots li button:focus{outline: none;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before{}
.slick-dots li.slick-active button{background:rgba(225,142,120,1);}




.slick-prev03{position:absolute; width:50px; height:50px; line-height:50px; background:rgba(255,255,255,0.4); top: 50%; left:0; font-size:24px; color:#fff; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-next03{position:absolute; width:50px; height:50px; line-height:50px; background:rgba(255,255,255,0.4); top: 50%; right:0; font-size:24px; color:#fff; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-prev03:hover{background:rgba(0,0,0,0.3);}
.slick-next03:hover{background:rgba(0,0,0,0.3);}






/* 슬라이드 프로그래스 바 시작 */
.progress-bar{position:absolute; width:100%; height:5px; bottom:0px;  left:0px; padding:0px; margin:0px; background:rgba(255,255,255,.20);}
.progress-bar p{position:absolute; float:left; width:0px; height:5px; background:#00b0ff; left:0px; bottom:0px;}
.slick-active .progress-bar p{width:100%; animation:progress-bar 11s both;}

@-webkit-keyframes progress-bar{from{width:0px;}to{width:100%;}}
@keyframes progress-bar{from{width:0px;}to{width:100%;}}
/* 슬라이드 프로그래스 바 끝 */