@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{max-width: 146rem; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%;}
.popup-swiper-box > button{display: block; width: 3rem; height: 5rem; text-indent: -9999rem;}
.popup-swiper-box > button.popup-prev{background: url(../images/ic-popup-prev.png) no-repeat center center / cover; margin-right: 5rem;}
.popup-swiper-box > button.popup-next{background: url(../images/ic-popup-next.png) no-repeat center center / cover; margin-left: 5rem;}
.popup-swiper-box .swiper-container{width: calc(100% - 16rem);}
.popup-swiper-box .swiper-container img{width: 100%;} 
.popup-info{margin-top: 3rem;}
.popup-info .popup-info-box,
.popup-info{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.popup-info .popup-state {background-color: #0065d7; border-radius: 2.5rem; color: white; font-size: 1.5rem; padding: 1.1rem 3.9rem; margin-right: 3.3rem;} 
.popup-info .popup-state span{font-family: "dreaml";}
.popup-info .popup-state span em{color: #72bdda;}
.popup-info .pop-close{margin-right: 4rem;}
.popup-info .pop-close button{width: 100%; height: 100%; color: white; background: #222526 url(../images/ic-popup-close.png) no-repeat right 2.9rem center; border-radius: 2.5rem; font-size: 1.5rem; font-family: "dreaml"; padding: 1.2rem 5.6rem 1.2rem 3.6rem;}
.popup-info .pop-today button {font-size: 1.5rem; font-family: "dreaml"; color: #fff; background: #373b3d url(../images/ic-popup-close.png) no-repeat right 2.5rem center; border-radius: 2.5rem; padding: 1.2rem 6rem 1.2rem 3.2rem;}
.popup-info .pop-today span {width: 0;height: 0;overflow: hidden;display: inline-block;}

@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 .popup-state{padding: 1.1rem 3.4rem;}
    .popup-info .pop-close{margin-right: 0;}
    .popup-info .pop-today{margin-top: 3.5rem;}
}