@charset "UTF-8";
html:has(#popup.popup-open) { overflow: hidden; }
#popup { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; display: flex; flex-direction: column; visibility: hidden; opacity: 0; overflow-y: auto; padding:2rem 0; } 
#popup.popup-open { visibility: visible; opacity: 1; }
#popup .popup-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); }
#popup .popup-container { width:100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; margin:auto; }
#popup .popup-container .popup-title strong { color: #FFF; font-family: "Montserrat"; font-size: 2rem; font-weight: 700; letter-spacing: -0.1rem; }
#popup .popup-container .popup-content { width: 100%; max-width: 1400px; margin: 0 auto; padding:0 1rem; }
#popup .popup-container .popup-content .popup-slide-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 2.4rem; }
#popup .popup-container .popup-content .popup-slide-wrap:has(.swiper-button-lock) { padding:0; }
#popup .popup-container .popup-content .popup-slide-wrap .swiper .swiper-wrapper .swiper-slide img { width: 100%; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-count { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; max-width: 1160px; width: 100%; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-count span { color: #FFF; font-size: 0.8rem; font-weight: 500; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-count span b { font-weight: 700; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-slide { width: 100%; max-width: 1160px; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-pagination { display: flex; justify-content: center; margin-top: 1.2rem; gap: 0.4rem; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-pagination span { width: 0.45rem; height: 0.45rem; background: #fff; opacity: .4; border-radius: 50%; margin: 0; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-pagination span.swiper-pagination-bullet-active { opacity: 1; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-slide-control { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: space-between; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-slide-control .btn { width: 2rem; height: 2rem; background: #222; display: flex; align-items: center; justify-content: center; padding:0; border:0; border-radius: 0; border: 1px solid #fff;}  
#popup .popup-container .popup-content .popup-slide-wrap .popup-slide-control .btn i { color: #fff; font-size: 1rem; }
#popup .popup-slide { width: 100%; overflow: hidden; }
#popup .popup-slide .swiper-wrapper { display: flex; }
#popup .popup-slide .swiper-slide { width: auto; flex-shrink: 0; }
#popup .popup-container .popup-content .popup-btn { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2rem; }
#popup .popup-container .popup-content .popup-btn .btn { padding: 0 1.3rem; height: 2.8rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
#popup .popup-container .popup-content .popup-btn .btn span { color: #fff; }
#popup .popup-container .popup-content .popup-btn .btn i { color: #fff; font-size: 0.75rem; transform: translateY(0.05rem); }
#popup .popup-container .popup-content .popup-btn .btn.btn-today { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(20px); }
#popup .popup-container .popup-content .popup-btn .btn.btn-close { background: #222; border:1px solid #222; }
#popup .popup-title, #popup .popup-count, #popup .popup-slide, #popup .popup-pagination, #popup .popup-btn, #popup .popup-slide-control .btn { opacity: 0; }
#popup.popup-open .popup-title { animation: fadeInDown 0.5s ease-out 0.3s forwards; }
#popup.popup-open .popup-count { animation: fadeInDown 0.5s ease-out 0.5s forwards; }
#popup.popup-open .popup-slide { animation: fadeInDown 0.5s ease-out 0.7s forwards; }
#popup.popup-open .popup-slide-control .btn-prev { animation: fadeInLeft 0.5s ease-out 0.7s forwards; }
#popup.popup-open .popup-slide-control .btn-next { animation: fadeInRight 0.5s ease-out 0.7s forwards; }
#popup.popup-open .popup-pagination { animation: fadeInDown 0.5s ease-out 0.9s forwards; }
#popup.popup-open .popup-btn { animation: fadeInDown 0.5s ease-out 1.1s forwards; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-2.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: translateX(0); } }
@media (min-width:1024px){
    #popup .popup-container .popup-content .popup-slide-wrap .popup-slide .swiper-wrapper:not(:has(.swiper-slide:nth-of-type(3))) { justify-content: center; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(4))) .popup-slide-control { display: none; }   
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(3))) .swiper-slide:nth-of-type(2) { margin:0 !important; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(2))) .swiper-slide { margin:0 !important; } 
}  
@media (min-width:640px) and (max-width:1024px){
    #popup .popup-container .popup-content .popup-slide-wrap .popup-slide .swiper-wrapper:not(:has(.swiper-slide:nth-of-type(2))) { justify-content: center; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(3))) .popup-slide-control { display: none; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(2))) .swiper-slide { margin:0 !important; }    
}   
@media (min-width:320px) and (max-width:640px){
    #popup .popup-container .popup-content .popup-slide-wrap .popup-slide .swiper-wrapper:not(:has(.swiper-slide:nth-of-type(2))) { justify-content: center; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(2))) .popup-slide-control { display: none; }
    #popup .popup-container .popup-content .popup-slide-wrap:not(:has(.swiper-slide:nth-of-type(2))) .swiper-slide { margin:0 !important; } 
    #popup .popup-container .popup-content .popup-slide-wrap .popup-slide-control .btn { width:1.8rem; height: 1.8rem; }
}