@charset "UTF-8";

._fnctWrap {line-height:1.5;}

.main-popup-bg {position: relative; background: url("../images/main_popup_bg1.png") no-repeat 5% bottom; overflow: hidden;}
.main-popup-bg::after {content: ""; position: absolute; width: 100px; height: 100px; background: url("../images/main_popup_bg2.png") no-repeat; right: 0; bottom: 70px; z-index: 91;}
.main-popup {position:relative; z-index:90; width: 65%; max-width: 545px; float: right; margin-right: 10%;}
.main-popup .slider {}
.main-popup .slider li img {width:100%;}

.popup-title {position: absolute; left: 0; bottom: 0; margin-top: 20px; width: 100%;}
.popup-title p {float: left; font-size: 60px; font-family: "TitilliumWeb-Light"; letter-spacing: -0.25px; color: #000000;}
.popup-title p strong {font-family: "TitilliumWeb-Bold";}

.popup-control {float: right;}

.main-popup {position: relative; padding-bottom: 105px;}
.popup-control {margin-top: 30px;}
.main-popup .control {text-align:center;}
.main-popup .control .paging {display:inline-block;}
.main-popup .control .paging ul {display:inline-block;}
.main-popup .control .paging li {float:left; margin:0 2px;}
.main-popup .control .paging li.slick-active button {width:22px; background:url('../images/pop-dot-on.png') no-repeat center center; position:relative;}
.main-popup .control .paging li button {width:12px; height:22px; background:url('../images/pop-dot-off.png') no-repeat center center; text-indent:-9999px;}
.main-popup .control .playstop {display:inline-block; position:relative; top:-5px; margin:0 0 0 4px;}
.main-popup .control .playstop button {display:none; text-indent:-9999px;}
.main-popup .control .playstop button.on {display:inline-block;}
.main-popup .control .play {width:22px; height:22px; background:url('../images/pop-play.png') no-repeat center center;}
.main-popup .control .stop {width:22px; height:22px; background:url('../images/pop-stop.png') no-repeat center center;}

.main-popup .popup-num {float: left; margin: 0 20px;}
.main-popup .popup-num span {display: inline-block; vertical-align: middle; font-family: "Noto Thin"; font-size: 26px; color: #212121;}
.main-popup .popup-num span.slash {width: 11px; height: 26px; background: url("../images/ic_popup_slash.png") no-repeat; margin: 0 5px;}

.main-popup .prevnext {}
.main-popup .prevnext .container {position: relative;}
.main-popup .prevnext button {display: inline-block; width:20px; height:39px; text-indent: -9999px;}
.main-popup .prevnext .prev {float: left; background: url("../images/btn_popup_prev.png") no-repeat center;}
.main-popup .prevnext .next {float: left; background: url("../images/btn_popup_next.png") no-repeat center;}

@media all and (max-width: 1500px){
  .main-popup {padding-bottom: 140px;}
  .popup-title p {line-height: 60px;}
}

@media all and (max-width: 1200px){
  .main-popup {max-width: 100%;}
}

@media all and (max-width:1023px) {
  .main-popup-bg {background: none;}
  .main-popup {width: 100%; margin-right: 0; padding-bottom: 0;}
  .popup-title {position: static; margin-top: 0; margin-bottom: 20px; margin-top: 50px;}

  .main-popup-bg::after {display: none;}
  .popup-title p {font-size: 48px; line-height: 58px;}

  .popup-control {margin-top: 10px;}
}

@media all and (max-width:768px) {
  .popup-title p {font-size: 40px;}
}
