.modal_wrap {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .2); z-index: 100000;}
.modal_container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.modal_box {min-width: 260px;}
.modal_box .title {font-size: 30px; text-align: center; font-weight: bold; padding-bottom: 20px; color: #fff; word-break: keep-all;}
.modal_box {width: 60vw; padding: 60px; background-color: #032861;}

.modal_btn_box {display: flex; align-items: center; justify-content: center; padding-top: 30px; gap: 10px;}
.modal_btn_box button {font-family: inherit; font-size: 16px; padding: 10px 50px; line-height: 1;}
.modal_btn_box .main {color: #fff; background-color: #1a4aa7;}
.modal_btn_box .sub {background-color: #fff; border: 1px solid #999;}


/* -------- 약관 -------- */
.modal_box.terms {width: 45vw;}
.modal_box.terms .text_box {background-color: #fff; padding: 30px; font-size: 16px; line-height: 1.4; word-break: keep-all; height: 40vh; overflow-y: auto;}
.modal_box.terms .text_box::-webkit-scrollbar {width: 8px;}
.modal_box.terms .text_box::-webkit-scrollbar-thumb {border-radius: 10px; background: linear-gradient(to right bottom, #00156A, #1878C6); height: 30%;}
.modal_box.terms .text_box::-webkit-scrollbar-track {background-color: transparent; background-clip: padding-box; border: 4px solid transparent}


/* -------- alert -------- */
.modal_box.alert {background-color: #fff; width: 30vw; padding: 40px;}
.modal_box.alert .title {font-size: 20px; color: #666; font-weight: normal;}
.modal_box.alert .text_box {font-size: 18px; text-align: center;margin-top: 10px; word-break: keep-all; line-height: 1.3;}



/* -------- 메인 : 팝업 -------- */
.modal_popup {width: 90vw; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; height: 90vh; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px;}
.popup_con {display: flex; flex-direction: column;}
.popup_con .popup_img {aspect-ratio: 1/1; width: 100%;}
.popup_con .popup_img img {width: 100%; height: 100%; display: block; object-fit: cover;}
.popup_con .pop_btn {display: flex; padding: 14px; justify-content: space-between; width: 100%; background-color: #032861;}
.popup_con .pop_btn label, .popup_con .pop_btn input[type="checkbox"]:checked + label  {color: #fff; font-size: 16px;}
.popup_con .pop_btn button {font-size: 16px; color: #fff; padding: 4px; line-height: 1;}


/* -------- 1440px -------- */
@media screen and (max-width: 1440px)  {
    .modal_box.terms {width: 70vw; padding: 50px;}
    .modal_box .title {font-size: 36px;}

    .md_content .md_swiper_btn {width: 125%;}
}


/* -------- 1280px -------- */
@media screen and (max-width: 1280px)  {
    .modal_box.data {width: 90vw; padding: 50px 90px;}
    .md_content .md_swiper_btn {width: 115%;}

}

/* -------- 1080px -------- */
@media screen and (max-width: 1080px) {
    .md_content .md_swiper_btn {width: 120%;}

    .modal_popup {grid-template-columns: 1fr 1fr;}
    .popup_con .pop_btn {padding: 10px;}
    .popup_con .pop_btn label, .popup_con .pop_btn input[type="checkbox"]:checked + label {font-size: 14px; padding-left: 30px;}
    .popup_con .pop_btn button {font-size: 14px;}
    .popup_con .pop_btn input[type="checkbox"] + label::before, .popup_con .pop_btn input[type="radio"] + label::before {width: 20px; height: 20px;}
    .popup_con .pop_btn input[type="checkbox"] + label::after, .popup_con .pop_btn input[type="radio"] + label::after {width: 20px; height: 20px;}
}

/* -------- 950px -------- */
@media screen and (max-width: 950px) {
    .modal_box.terms {width: 90vw;}
    .modal_box .title {font-size: 28px;}


    .modal_box.alert {width: 60vw; padding: 30px;}
    .modal_box.alert .title {font-size: 20px;}
    .modal_btn_box button {font-size: 16px;}

    .md_content .md_swiper_btn div[class*="swiper-button-"] {width: 50px; height: 50px;}
    .modal_box.data {width: 95vw; padding: 50px 70px;}
    .md_content .md_swiper_btn {width: calc(100% + 120px);}


}



/* -------- 650px -------- */
@media screen and (max-width: 650px) {
    .modal_box.alert {width: 90vw; }
    .modal_box .title {font-size: 20px;}
    .modal_btn_box {padding-top: 20px;}

    .modal_box.terms {padding: 40px 30px;}
    .modal_box.terms .text_box {padding: 20px;}


    .modal_box.data {padding: 30px 20px 20px; height: initial;}
    .md_content .md_swiper_btn div[class*="swiper-button-"] {width: 40px; height: 40px;}
    .md_content .md_swiper_btn {width: calc(100% + 40px);}
    .md_content.data {border-radius: 12px; height: initial; padding: 15px;}


    .modal_popup {grid-template-columns: 1fr;}
}