@charset "UTF-8";
body:has(#popup.popup-open) { overflow: hidden; }
#popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; visibility: hidden; opacity: 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: 4.1rem; }
#popup .popup-container .popup-title strong { color: #FFF; font-family: "Montserrat"; font-size: 4rem; font-weight: 700; letter-spacing: -0.2rem; }
#popup .popup-container .popup-content { width: 100%; max-width: 1400px; margin: 0 auto; padding:0 2rem; }
#popup .popup-container .popup-content .popup-slide-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 8rem; }
#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: .8rem; max-width: 1160px; width: 100%; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-count span { color: #FFF; font-size: 1.6rem; 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: 2.4rem; gap: .8rem; }
#popup .popup-container .popup-content .popup-slide-wrap .popup-pagination span { width: .9rem; height: .9rem; 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: 4rem; height: 4rem; background: #222; display: flex; align-items: center; justify-content: center; padding:0; border:0; border-radius: 0; }  
#popup .popup-container .popup-content .popup-slide-wrap .popup-slide-control .btn i { color: #fff; font-size: 2.4rem; }
#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: 1.6rem; margin-top: 4.8rem; }
#popup .popup-container .popup-content .popup-btn .btn { padding: 0 2.6rem; height: 5.6rem; border-radius: 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; }
#popup .popup-container .popup-content .popup-btn .btn span { color: #fff; }
#popup .popup-container .popup-content .popup-btn .btn i { color: #fff; font-size: 1.5rem; transform: translateY(.1rem); }
#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-today i { opacity: .5; }
#popup .popup-container .popup-content .popup-btn .btn.btn-close { background: linear-gradient(112deg, #2F9F49 0%, #00C8FF 120.03%), #E13911; border: 1px solid rgba(255, 255, 255, 0.15); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(5rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(-5rem); } to { opacity: 1; transform: translateX(0); } }
#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; }
@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; } 
}