/* modal_popup */
#modal_popup {width: auto; height: auto; position: fixed; z-index: 99999; background-color: #fff; transform: translateY(-50%); border: 1px solid #bbb; max-width: 480px; width: 100%;}
#modal_popup .popup_wrap {display: flex;flex-wrap: wrap; align-content: space-between; height: 100%;}
#modal_popup .popup_wrap .pp_img {width: 100%; object-fit: cover; cursor: pointer;}
#modal_popup .popup_wrap .pp_img img {max-width: 100%; width: 100%;}

.popup_btn_wrap {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px; width: 100%;}
.popup_btn_wrap .check_box {display: flex; align-items: center; cursor: pointer; position: relative;}


.popup_btn_wrap .check_box label::before {content: ''; display: inline-block; width: 14px; height: 14px; background: url(../img/popup-check-img.png) no-repeat 0 0; margin-right: 5px; position: relative; top: 2px;}
.popup_btn_wrap .check_box input[type="checkbox"]:checked+label::before {background-position: -16px 0;}

.popup_btn_wrap .check_box input {position: absolute; left: -3000%;}
.popup_btn_wrap .check_box label {font-size: 14px; line-height: 14px; font-weight: 800; cursor: pointer;}



.popup_btn_wrap .close_btn {display: flex; align-items: center; justify-content: center; border: 1px solid #000; padding: 5px 5px; cursor: pointer;}
.popup_btn_wrap .close_btn p {font-size: 14px; line-height: 14px; font-weight: 800;}
.popup_btn_wrap .close_btn .close_span {width: 20px; height: 20px; position: relative; top: -0.5px;}
.popup_btn_wrap .close_btn .close_span span:first-child {width: 12px; height: 2px; border-radius: 2px; background-color: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.popup_btn_wrap .close_btn .close_span span:last-child {width: 12px; height: 2px; border-radius: 2px; background-color: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);}


/* slider popup */
#slider_popup {position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 99999; transition: .5s ease;}
#slider_popup .popup_sec {width: 520px; overflow: hidden; height: 715px; background-color: rgba(74,81,95,0.9); transition: .5s ease; position: relative;}
#slider_popup .popup_sec .swiper-wrapper .swiper-slide {width: 100%;}
#slider_popup .popup_sec .swiper-wrapper .swiper-slide img {width: 100%; height: 100% ;position: absolute; object-fit: contain;}
#slider_popup .popup_sec .popup_page {bottom: 0; top: 12px; height: 10px;}
.popup_util {position: absolute;right: -50px; top: 15%; transform: translateY(-50%); opacity: 0.5;;}
.popup_util .p_util {cursor: pointer; font-weight: 500; font-size: 12px; width: 50px; padding: 7px 0 6px; color: #fff; border-radius: 0px 5px 5px 0; text-align: center; z-index: 1000000;}
.popup_util .open { background: #5c626f; display: none; }
.popup_util .close { background: #5c626f; } /* #000; */
.popup_util .p_btn {width : 12px; display: block; margin: 0 auto 5px;}
.popup_util .p_btn img {width: 100%;}
.popup_util2{display: none;}

.slider_popup_close {left: -520px !important;}
.slider_popup_close .popup_util .close {display:none !important}
.slider_popup_close .popup_util .open {display: block !important}
.popup_black_bg {background: #00000070; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99998; display: none;}


.popup_sec .swiper-pagination-bullet {background-color: #fff; width: 10px; height: 10px; border: 1px solid #ccc; opacity: 1;}
.popup_sec .swiper-pagination-bullet:last-child {margin-right: 0px;}
.popup_sec .swiper-pagination-bullet-active {background-color: #00a99d; border: 1px solid #00a99d;}

@media(max-width:600px){
/* slider popup */
    #slider_popup {width: 100%; height: 100vw;}
    #slider_popup .popup_sec {width: 100%; height: 100%; object-fit: cover;}
    .popup_util {position: fixed; z-index: 1000000; transform: none; left: 0; display: none; width: 50px; opacity: 0.5;}
    .popup_util2 {display: block;}

    .slider_popup_close {left: -100% !important;}
    /* .slider_popup_close .popup_sec{transform: translateX(-100%) !important;} */
    .popup_util.open_popup .close {display:none !important}
    .popup_util.open_popup .open {display: block !important}

    .popup_black_bg {display: block;}
}