@charset 'UTF-8';
/* Slider */

/* Arrows */
.slick-prev{position:absolute; top: 50%; left:0px; font-size:15px; color:#bbb;  transform: translate(0, -50%); -webkit-transform: translate(0, -50%); z-index:2; cursor: pointer;}
.slick-next{position:absolute; top: 50%; right:0px; font-size:15px; color:#bbb;  transform: translate(0, -50%); -webkit-transform: translate(0, -50%); z-index:2; cursor: pointer;}

.slick-prev02{position:absolute; top: 50%; left:10%; width:90px; height:36px; background:url(/assets/img/web/main/theme/btn_prev.png) no-repeat center center; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); z-index:2; cursor: pointer;}
.slick-next02{position:absolute; top: 50%; right:10%; width:90px; height:36px; background:url(/assets/img/web/main/theme/btn_next.png) no-repeat center center; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); z-index:2; cursor: pointer;}

/* Dots */
.slick-dotted.slick-slider{position:relative;}
.slick-dots{position: absolute; bottom: 45px; left:20%;}
.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; border-radius:15px; margin:3px; background:rgba(255,255,255,0.5); cursor: pointer;}
.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{border:3px solid #fff; background:none;}


.slick-dots02{position: absolute; bottom:-35px; left:50%; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0);}
.slick-dots02 li{position: relative; display: inline-block;}
.slick-dots02 li button{font-size:0; line-height:0; display:nline-block; float:left; width:15px; height:15px; border-radius:15px; margin:3px; background:#bbbbbb; cursor: pointer;}
.slick-dots02 li button:hover, .slick-dots li button:focus{outline: none;}
.slick-dots02 li button:hover:before, .slick-dots li button:focus:before{}
.slick-dots02 li.slick-active button{background:#ff3e62; width:25px;}


/* 슬라이드 프로그래스 바 시작 */
.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 2s both;}

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