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

/* Arrows */
.slick-prev{position:absolute; top: 50%; left:150px; opacity:0.5; 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{opacity:1; left:145px;}
.slick-next{position:absolute; top: 50%; right:150px; opacity:0.5; 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{opacity:1; right:145px;}

.top-slider .slick-arrow{width:25px; height:25px; border-radius:25px; position:absolute; top: 50%; transform: translate(0, -50%); z-index:2; background-color:#ddd; background-repeat:no-repeat; background-position:center center; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-prev02{background-image:url(/assets/img/common/theme/btn_prev_small.png); left:-14px;}
.slick-next02{background-image:url(/assets/img/common/theme/btn_next_small.png); right:-14px;}
.top-slider .slick-arrow:hover{background-color:#0091d5;}

.slick-prev03{position:absolute; padding:30px 20px; background:rgba(255,255,255,0.4); top: 50%; left:0; 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; padding:30px 20px; background:rgba(255,255,255,0.4); top: 50%; right:0; 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);}


.slick-prev04{position:absolute; padding:10px 5px; background:rgba(255,255,255,0.4); top: 50%; left:10px; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-next04{position:absolute; padding:10px 5px; background:rgba(255,255,255,0.4); top: 50%; right:10px; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-prev04 img,
.slick-next04 img{width:10px;}
.slick-prev04:hover{background:rgba(0,0,0,0.3);}
.slick-next04:hover{background:rgba(0,0,0,0.3);}


.slick-prev05{position:absolute; top: 50%; left:0; opacity:0.5; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}
.slick-next05{position:absolute; top: 50%; right:0; opacity:0.5; transform: translate(0, -50%); z-index:2; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; cursor: pointer;}

/* Dots */
.slick-dotted.slick-slider{position:relative; }
.slick-dots{position: absolute; width:1200px; margin:0 auto; bottom: 250px; left:50%; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0);}
.slick-dots::before{display:inline-block; width:250px; height:1px; background:rgba(255,255,255,0.5); left:0; bottom:10px; }
.slick-dots li{position: relative; display: inline-block;}
.slick-dots li button{font-size:0; line-height:0; display:nline-block; float:left; width:20px; height:20px; border-radius:20px; margin-right:25px; margin-left:10px; background:rgba(255,255,255,0.5); cursor: pointer; transition: all .2s ease; -webkit-transition: all .2s ease; -ms-transition: all .2s ease; 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{width:40px; background:#fff;}

.slick-dots02{position: absolute; width:100%; max-width:640px; margin:0 auto; bottom: 17.5%; left:50%; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0);}
.slick-dots02::before{display:inline-block; width:200px; height:1px; background:rgba(255,255,255,0.5); left:10px; bottom:8px; }
.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-left:25px; background:rgba(255,255,255,0.5); cursor: pointer; transition: all .2s ease; -webkit-transition: all .2s ease; -ms-transition: all .2s ease; 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{width:40px; background:#fff;}



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