/* modal_popup */
#modal_popup{width: auto; height: auto; position: fixed; z-index: 9999; background-color: #fff; left: 10%; top: 10%; border: 1px solid #bbb; max-width: 450px;}
#modal_popup .popup_wrap{display: flex;flex-wrap: wrap; align-content: space-between; height: 100%;}
#modal_popup .popup_wrap .pp_img{width: 100%; 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: 500; 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: 500;}
.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: 10000; transition: .5s ease;}
#slider_popup .popup_sec{width: 520px; overflow: hidden; height: 715px; background-color: rgba(74,81,95,0.9); transition: .5s ease;}
#slider_popup .popup_sec .swiper-wrapper{}
#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;}
#slider_popup .popup_sec .popup_page{bottom: 0; top: 20px;}
.popup_util{position: absolute;right: -50px; top: 50%; transform: translateY(-50%);}
.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;}
.popup_util .open{ background: #5c626f; display: none; }
.popup_util .close{ background: #5c626f; } /* #000; */
.popup_util .p_btn{width : 12px; display: block; margin: 0 auto -4px;}
.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; z-index: 9999; display: none;}

@media(max-width:600px){
/* slider popup */
    #slider_popup{width: 100%; height: 100vw;}
    #slider_popup .popup_sec{width: 100%; height: 100%;}
    .popup_util{position: fixed; z-index: 10000; transform: none; left: 0; display: none; width: 50px;}
    .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;}
}