@charset "UTF-8";

.main-top-popup{position:fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,.7); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: all .5s; padding: 0 2rem;}
.main-top-popup.active{visibility: visible; opacity: 1;}
.popup-swiper-box{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 146rem; width: 100%; margin: 0 auto; }
.popup-swiper-box > button{display: block; width: 3rem; height: 5rem; text-indent: -9999rem;}
.popup-swiper-box > button.popup-prev{ margin-right: 5rem; background: url(../images/ic-popup-prev.png) no-repeat center center / cover;}
.popup-swiper-box > button.popup-next{ margin-left: 5rem; background: url(../images/ic-popup-next.png) no-repeat center center / cover;}
.popup-swiper-box .swiper-container{width: calc(100% - 16rem);}
.popup-swiper-box .swiper-container img{width: 100%;} 
.popup-info{margin-top: 4rem;}
.popup-info .popup-info-box,
.popup-info{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.popup-info .popup-state { margin-right: 3.3rem; background-color: #0065d7; border-radius: 2.5rem; font-size: 1.6rem; padding: 1.1rem 3.9rem; color: white; } 
.popup-info .popup-state span{font-family: pr;}
.popup-info .popup-state span em{color: #72bdda;}
.popup-info .pop-close{margin-right: 4rem;}
.popup-info .pop-close button{width: 100%; height: 100%; padding: 1.2rem 5.6rem 1.2rem 3.6rem; background: #101213 url(../images/ic-popup-close.png) no-repeat right 2.9rem center; border-radius: 2.5rem; font-size: 1.6rem; font-family: pr;color: white; }
.popup-info .pop-today button { padding: 1.2rem 6rem 1.2rem 3.2rem; background: #060606 url(../images/ic-popup-close.png) no-repeat right 2.5rem center; border-radius: 2.5rem; font-size: 1.6rem; font-family: pr; color: #fff; }
.popup-info .pop-today span {overflow: hidden;display: inline-block;width: 0;height: 0;}

/* paging */
.main-top-popup .control-box{display: flex; justify-content: center; align-items :center; margin-top: 4rem;}
.main-top-popup .paging {position: relative; text-align: center; margin-right: 1rem;}
.main-top-popup .paging .swiper-pagination-bullet {width:0.9rem; height:0.8rem; margin-right:0.3rem; background:#9E9E9E; border-radius:1rem; transition:.3s; transition-property: width, background; opacity:1;}
.main-top-popup .paging .swiper-pagination-bullet:last-child {margin-right: 0;}
.main-top-popup .paging .swiper-pagination-bullet-active {width: 2.1rem; background:#61b1ff;}
.main-top-popup .playstop button{display: none; width: .6rem; height: .7rem; text-indent: -9999rem}
.main-top-popup .playstop button.on{display: block;}
.main-top-popup .playstop button.stop{background: url(../images/btn-stop.png) no-repeat center center / cover;}
.main-top-popup .playstop button.play{background: url(../images/btn-play.png) no-repeat center center / cover;}

@media screen and (max-width: 768px) {
    .popup-swiper-box > button.popup-prev{margin-right: .8rem}
    .popup-swiper-box .swiper-container{width: calc(100% - 7.6rem)}
    .popup-swiper-box .swiper-container img{width: 100%;}
    .popup-swiper-box > button.popup-next{margin-left: .8rem}
    .popup-info {flex-direction: column;}
    .popup-info .popup-state{padding: 1.1rem 3.4rem;}
    .popup-info .pop-close{margin-right: 0;}
    .popup-info .pop-today{margin-top: 3.5rem;}
}