﻿.blind {overflow: hidden; position: absolute; width: 1px; height: 1px;  margin: -1px; clip: rect(0, 0, 0, 0);}
#popup { position:fixed; inset:0; z-index: 9999; display:flex;align-items:center; justify-content:center; overflow:hidden;}
#popup .popupDim {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);}
#popup .group {position: relative; width: 90%; max-height: calc(100vh - 40px);  margin: auto; outline: none; display: flex; flex-direction: column;}
#popup .popupTop {position: absolute; top: -20px; right: 50%; display: flex;  justify-content: flex-end; gap: 12px; margin-right: -430px;}
#popup .popupTop .control {height: 52px; padding: 10px 20px; border: 0; border-radius: 12px; background: #0e5db8; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; gap: 10px;}
#popup .popupTop .control .oneday {width: 20px; height: 20px;}
#popup .popupTop .control .close {width: 14px; height: 14px;}
#popup .popupTop .oneday {background: #fff; color: #0e5db8; border: 2px solid #0e5db8;}
#popup .popup-slider {margin: 0; padding: 0; list-style: none;}
#popup .popup-slider li {list-style: none;}
#popup .popup-slider li a {display: block; border-radius: 24px; overflow: hidden;}
#popup .popup-slider li img {display: block; width: 100%; height: auto;  max-height: calc(100vh - 220px); margin: 0 auto; border-radius: 30px; object-fit: contain;}
#popup .popupArrow {position: absolute; top: 50%; width: 58px; height: 58px;  margin-top: -29px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; z-index: 10;}
#popup .popupPrev {left: 0;}
#popup .popupNext {right: 0;}
#popup .popupPrev::before, #popup .popupNext::before {content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 2px solid #222; border-right: 2px solid #222;}
#popup .popupPrev::before {transform: translate(-35%, -50%) rotate(-135deg);}
#popup .popupNext::before {transform: translate(-65%, -50%) rotate(45deg);}
#popup .popupPager {margin-top: 40px; text-align: center; display: flex;justify-content: center;}
#popup .popupPager .bx-pager {display: flex; background: #000; padding:12px 20px; border-radius: 50px;}
#popup .popupPager a {display: inline-block; width: 12px; height: 12px; margin: 0 6px; border-radius: 50%; background: #fff; opacity: 0.5; text-indent: -9999px; overflow: hidden; vertical-align: top;}
#popup .popupPager a.active {opacity: 1; background: #0e5db8;}
#popup .popupArrow:focus, #popup .popupTop .control:focus, #popup .popupPager a:focus, #popup .popup-slider a:focus {outline: 3px solid #ffcc00;   outline-offset: 3px;}
#popup .bx-controls-direction a { position: absolute; top: 50%; width: 70px;  height: 70px; margin-top: -29px; border-radius: 50%; background: #fff; text-indent: -9999px; overflow: hidden; z-index: 10;}
#popup .bx-prev {left: -100px;}
#popup .bx-next {right: -100px;}
#popup .bx-prev::before, #popup .bx-next::before {content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 2px solid #222; border-right: 2px solid #555;}
#popup .bx-prev::before {transform: translate(-35%, -50%) rotate(-135deg);}
#popup .bx-next::before {transform: translate(-65%, -50%) rotate(45deg);}

#popup .bx-pager-item {display: flex;}
#popup .popupSliderWrap {position: relative; margin-top: 0; padding: 0 56px; flex: 1 1 auto; min-height: 0;}

@media all and (max-width:1040px) {  

    #popup .popupTop {margin-right: -172px;}
    #popup .bx-controls-direction a {width: 50px; height: 50px;}
    #popup .bx-prev {left: -50px;}
    #popup .bx-next {right: -50px;}
    #popup .bx-prev::before, #popup .bx-next::before {width: 10px; height: 10px;}
    
    #popup {overflow: hidden;}

}

@media all and (max-width:768px) {  

    #popup .popupTop {margin-right: -127px;}
    #popup .popupSliderWrap{max-height:80vh; }
    
    #popup .group {width: 92%;}
    #popup .popupSliderWrap {padding: 0 46px;}
    #popup .popupArrow {width: 46px; height: 46px; margin-top: -23px;}
    #popup .popupTop {gap: 8px; margin-bottom: 12px;}
    #popup .popupTop .control {min-width: auto; padding: 0 14px; height: 40px; font-size: 15px; border-radius: 10px;}
}

