@charset "UTF-8";

/* 팝업 */
.fixed-pop {position: fixed; left: -9999999px; top: 0; z-index: 110; width: 100%; height: 100%; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .75s;}
.fixed-pop.on {left: 0; opacity: 1;}
.flex-pop {display: flex; justify-content: center; width: 100%; height: 100%;}
.wrap-pop .container {text-align: center;}
.wrap-pop {width: 100%; margin-top: 190px;}
.wrap-pop .container {max-width: 1720px;}
.wrap-pop .today {text-align: right;}
.wrap-pop .today input,
.wrap-pop .today label,
.wrap-pop .today .btn-close-pop button {display: inline-block; margin: 0; vertical-align: middle;}
.wrap-pop .today label {font-family: 'Dream ExtraLight'; font-size: 15px; color: #fff; margin-right: 15px;}
.wrap-pop .today label .chkbox {display:inline-block; vertical-align:middle; margin-right:10px; width:20px; height:20px; border:1px solid #CFCFCF; background:#fff;}
.wrap-pop .today label #dontShow {opacity:0; position: absolute; cursor: pointer; }
.wrap-pop .today label #dontShow:checked ~ .chkbox {background:#fff url('../images/checked.png') no-repeat center;}
.wrap-pop .today .btn-close-pop button {position: relative; width: 20px; height: 20px; text-indent: -999999px;}
.wrap-pop .today .btn-close-pop button::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/btn-close-x.png') no-repeat center; transform: rotate(180deg); transition: .5s;}
.wrap-pop .today .btn-close-pop button:hover::after {transform:rotate(360deg);}
.wrap-pop .today .btn-close-pop {display: inline-block;}
.wrap-pop .pop-header {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end;}
.wrap-pop .title { position: relative; padding-right:115px; margin-bottom: 5px; display: none;}
.wrap-pop .title strong {display: block; font-family: 'Play Regular'; font-size: 40px; color: #fff; line-height: 1;}
.wrap-pop .title strong em {font-family: 'Play Bold';}

.wrap-pop .slider-container {text-align: center;max-width:1300px; margin:0 auto; width:100%;}
.wrap-pop .list {margin-top: 25px; position: relative;}
.wrap-pop .slider li {float: left; width: 33.333%; max-height:380px; border-radius:10px; overflow:hidden;}
.wrap-pop .slider li img {width: 100%;}
.wrap-pop .slider .slick-slide {margin: 0 20px;}
.wrap-pop .slider .slick-list {margin: 0 -20px; text-align: center;}
.wrap-pop .slider .slick-track {display: inline-block;}
.wrap-pop .slick-dots{text-align:center;font-size:0}
.wrap-pop .slick-dots li {display: inline-block; margin:0 5px; width:auto;}
.wrap-pop .slick-dots li button{width:10px;height:10px;background:#DDD;border-radius:30px; text-indent:-9999px; font-size: 0;}
.wrap-pop .slick-dots li.slick-active button{width:30px;background:#E6378D;}
.wrap-pop .slick-dots li button:hover {background:#666;}


.wrap-pop .prevnext {margin-top: 20px;}
.wrap-pop .prevnext > button {display: inline-block; text-indent: -9999px; position: absolute; top:50%; margin-top:-25px;background: url('../images/arrow_5_w.png') no-repeat center; opacity:0.75; transition:opacity .3s;}
.wrap-pop .prevnext > button:hover {opacity:1;}
.wrap-pop .prevnext .prev {display:block; width: 50px; height: 50px; left:-55px; transform:rotate(180deg);}
.wrap-pop .prevnext .next {display:block; width: 50px; height: 50px; right:-55px;}
.wrap-pop .util {display: inline-block; font-size: 0; vertical-align: middle;}
.wrap-pop .util .paging {display: inline-block;}
.wrap-pop .util .state{display: inline-block; vertical-align: middle;}
.wrap-pop .util .state span {margin: 0 1px; font-family: 'Play Regular'; font-size: 20px; color: #fff;}

.wrap-pop .control {display: block; height:30px; text-align: center;}
.wrap-pop .control button {text-indent: -999999px; margin:0 auto;}
.wrap-pop .control .stop,
.wrap-pop .control .play {display: none;}
.wrap-pop .control .stop.on,
.wrap-pop .control .play.on {display: block;}
.wrap-pop .control .stop {width: 30px; height: 30px; background: url('../images/ic-pop-stop.png') no-repeat center;}
.wrap-pop .control .play {width: 30px; height: 30px; background: url('../images/ic-pop-play.png') no-repeat center;}
@media (max-width:1500px) {
  .wrap-pop .list {padding:0 50px;}
  .wrap-pop .prevnext .prev {left:0;}
  .wrap-pop .prevnext .next {right:0;}
}
@media all and (max-width: 1360px) {
  .wrap-pop .slider .slick-slide {margin: 0 20px;}
  .wrap-pop .slider .slick-list {margin: 0 -20px;}
}

@media all and (max-width: 1200px) {
  .wrap-pop {margin-top: 90px;}
  .wrap-pop .title strong {font-size: 30px;}
}
@media (max-width:1024px) {
  .wrap-pop .slider li {max-height:unset;}
}
@media all and (max-width: 1060px) {
  .wrap-pop .slider .slick-slide {margin: 0 10px;}
  .wrap-pop .slider .slick-list {margin: 0 -10px;}
}

@media all and (max-width: 600px) {
  .wrap-pop .today .util {top: unset; bottom:4px;}
  .wrap-pop .today .control .prev {width:25px;height:25px;}
  .wrap-pop .today .control .stop {width: 25px; height: 25px;}
  .wrap-pop .today .control .play {width: 25px; height: 25px;}
  .wrap-pop .today .control .next {width: 25px; height: 25px;}
}
