@charset "UTF-8";

._fnctWrap {line-height:1.5;}

.wrap-popup {position:relative; overflow: hidden;}
.remote-box{height: 217px; position: absolute; top:0; left: 0; width: 170px;}
.remote-box.poppoint_01 {background-color:#e59035;}
.remote-box.poppoint_02 {background-color:#4cb9b0;}
.remote-box.poppoint_03 {background-color:#3e8cba;}
.remote-box.poppoint_04 {background-color:#df8797;}

.wrap-popup .remote-box h1{font-size: 20px; position: relative; padding: 25px 20px 0 30px; color: #fff; font-family: 'Noto Medium';}

.wrap-popup .remote-wrap{position: absolute; bottom: 45px; width: auto; height: 32px; border: 1px solid #fff; left: 30px;}

.wrap-popup .slider{margin-left: 170px;}
.wrap-popup .slider li{height: 217px;}
.wrap-popup .slider li a{display:block;width:100%;height:100%;}
.wrap-popup .control {width: 31px; height: 31px; float: left;}
.wrap-popup .control .paging {display:inline-block;}
.wrap-popup .control .paging ul {display:inline-block;}
.wrap-popup .control .paging li {float:left; margin:0 2px;}
.wrap-popup .control .paging li.slick-active button {width:22px; background:url('../images/pop-dot-on.png') no-repeat center center; position:relative;}
.wrap-popup .control .paging li button {width:12px; height:22px; background:url('../images/pop-dot-off.png') no-repeat center center; text-indent:-9999px;}
.wrap-popup .control .playstop {display:inline-block; position:relative;}
.wrap-popup .control .playstop button {display:none; text-indent:-9999px; border-left: 1px solid #fff; transition: all .3s;}
.wrap-popup .control .playstop button:hover{background-color: #333;}
.wrap-popup .control .playstop button.on {display:inline-block;}
.wrap-popup .control .play {width:31px; height:31px; background:url('../images/pop-play.png') no-repeat center center;}
.wrap-popup .control .stop {width:31px; height:31px; background:url('../images/pop-stop.png') no-repeat center center;}
.wrap-popup .prevnext {float: left; width: 62px; height: 31px; z-index: 100;}
.wrap-popup .prevnext .container {position: relative;}
.wrap-popup .prevnext button {width:31px; height:31px; text-indent: -9999px; background: url(../images/popupzone_control.png) no-repeat; display: inline-block; overflow: hidden; border-left: 1px solid #fff; transition: all .3s; float: left;}
.wrap-popup .prevnext button:hover{background-color: #333;}
.wrap-popup .prevnext .prev {left: 0; background-position: 0 0; border-left: 0;}
.wrap-popup .prevnext .next {right: 0; background-position: 0 -31px;}

@media all and (max-width:1023px) {
  .wrap-popup{margin-left: 4%;}
    .wrap-popup .prevnext .container{padding: 0;}
}

@media all and (max-width:768px) {
  .wrap-popup{margin-left: 0;}
  .remote-box.poppoint_01{background: transparent;}
  .wrap-popup .remote-wrap{z-index: 2;}
  .wrap-popup .remote-box h1{display: none;}
  .wrap-popup .slider{margin-left: 0;}
}