/* 모달-개인정보처리방침 */
.modal_wrap {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 99999;}
.modal_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 2rem; border-radius: 20px;}

.modal_con {display: flex; flex-direction: column; align-items: center; gap: 30px;}
.modal_con h1 {font-size: 2rem; color: black; font-family: 'Pretendard'; font-weight: 600;}
.terms_con {width: 35vw; background-color: #f1f3f4; padding: 1.2rem; height: 45vh;}
.terms_con p {color: #333; font-size: 1.1rem; line-height: 1.4; overflow-y: auto; height: 100%;}
.btn_terms span {display: inline-block; padding: 10px 50px; border-radius: 40px; background-color: #ffb1a9; color: #fff; font-size: 1.2rem; font-weight: 300;}


/* 모달-강의할인혜택 */
.modal_sign {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; border-radius: 10px; overflow: hidden;}
.modal_sign { text-align: center;}
.modal_sign .sign_header {display: flex; padding: 0.5em; flex-direction: row-reverse; font-size: 1.4em; color:white; width: 100%;}
.modal_sign .sign_header i {font-size: 30px;}
.modal_sign .sign_top {background-color: #ffb1a9; display: flex; flex-direction: column; align-items: center; width: 35vw; padding-bottom: 2em;}
.modal_sign .sign_top .top_con {padding: 0 3em 0em 3em;display: flex; flex-direction: column; align-items: center; }
.modal_sign .sign_top h2 {font-size: 2em; color: white; font-weight: bold; margin-bottom: 5px;}

.modal_sign  .donate_con {width: 90%; background-color: #f8f8f8; padding: 20px;  border: 3px solid palevioletred;}
.modal_sign .donate_con p {font-size: 1.2em;  color: black; margin-bottom: 22px; display: flex; text-align: left; align-items: center;}
.modal_sign .donate_con p span i {display: inline-block; width: 35px; height: 35px; border-radius: 50%; background-color: #ffb1a9; display: flex; justify-content: center; align-items: center; margin-right: 10px; color: white;}
.modal_sign  .donate_con .donate_img {width: 30%; margin: 0 auto 15px auto;}

.modal_sign .sign_top button {padding: 12px 34px; border-radius: 10px; background-color: white; margin-top: 15px;}
.modal_sign .sign_top button span {font-size: 18px; color: #ffb1a9;}



/* 모달-아이디 비밀번호 찾기 */

.modal_find {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; border-radius: 10px; overflow: hidden;}
.modal_find { text-align: center;}
.modal_wrap .modal_find .find_header {display: flex; padding: 1em; background-color: #ffb1a9; align-items: center; justify-content: space-between; color: white; font-size: 18px;}
.modal_wrap .modal_find .find_header i {cursor: pointer;}
.modal_wrap .modal_find .find_con {padding: 1em 1.5em;}
.modal_wrap .modal_find .find_con input {background-color: #f1f1f1; padding: 10px 22px 10px 15px; margin-top: 20px;}
.modal_wrap .modal_find .find_con p {line-height: 1.8; color: #444;}
.modal_wrap .modal_find .find_confirm {padding-bottom: 1em;}
.modal_wrap .modal_find .find_confirm button {padding: 9px 34px; background-color: #ffb1a9; color: white; border-radius: 52px; font-size: 16px; border: 2px solid #ffb1a9; transition: all 0.3s;}
.modal_wrap .modal_find .find_confirm button:hover {background-color: white; color: #ffb1a9;}


/* 연락처 확인하기 모달 */

.modal_contact {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white;}
.modal_contact {width: 400px; border-radius: 20px; overflow: hidden;}
.modal_contact .modal_contact_header {display: flex; align-items: center; justify-content: space-between; padding: 1em; background-color: #ffb1a9; color: #fff;}
.modal_contact .modal_contact_header h1 {font-size: 1.3rem; font-weight: 600;}
.modal_contact .modal_contact_header button i {font-size: 1.6rem; color: white;}
.modal_contact .number_box {padding: 3em; text-align: center;}
.modal_contact .number_box .contact {text-align: left;}
.modal_contact .number_box span {font-size: 1.2rem; display: inline-block; margin-bottom: 10px; font-weight: 400; color: #444;}
.modal_contact .number_box .point {font-size: 1.5rem; width: 40%; font-weight: bold; color: black;}


/* 언어 선택 모달 */

.modal_wrap select {background: url(https://pomesoft-s3.s3.ap-northeast-2.amazonaws.com/pomesoft/_uploads/HADDY/publishing/167692951275946.png) no-repeat 95% 50% !important; background-size: 12px 8px !important; background-color: #f1f1f1 !important; padding: 13px 50px; border: none; border-radius: 20px;}
select::-ms-expand{display:none;}

.modal_lang {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; border-radius: 10px; overflow: hidden;}
.modal_wrap .modal_lang .lang_header {display: flex; padding: 1em; background-color: #ffb1a9; align-items: center; justify-content: space-between; color: white; font-size: 18px; gap: 50px;}
.modal_wrap .modal_lang .lang_con {padding: 2em 3em; display: flex; display: flex; flex-direction: column; align-items: center; gap: 30px;}
.modal_wrap .modal_lang .lang_con .lang_select {display: flex; gap: 30px; align-items: center;}
.modal_wrap .modal_lang button {padding: 9px 34px; background-color: #ffb1a9; color: white; border-radius: 52px; font-size: 16px; border: 2px solid #ffb1a9; transition: all 0.3s;}


.modal_wrap .btn_terms .cancel_btn {background-color: white; border: 2px solid #f1f1f1; color: black;}


@media screen and (max-width: 1250px) {
    .modal_con h1 {font-size: 1.5em;}
    .terms_con {width: 50vw; height: 40vh;}
    
    .modal_sign .sign_top {width: 50vw;}
    .modal_sign .sign_top h2 {font-size: 2.5em;}
    .modal_sign .sign_top p {font-size: 1.1em;}

}

@media screen and (max-width: 1050px) {

    .modal_sign .sign_top .top_con {font-size: 14px;}
    .modal_sign .sign_bottom {font-size: 14px;}
    .modal_sign .sign_bottom button {margin-top: 18px;}

    .modal_contact {width: 350px;}
    .modal_contact .modal_contact_header h1 {font-size: 1.2em;}
    .modal_contact .number_box {padding: 2em;}
}

@media screen and (max-width: 870px) {

    .modal_sign .sign_top .top_con {font-size: 13px; padding: 0 2em 2em 2em; padding: 0;}
    
    .modal_sign .sign_top {width: 60vw;}
    .modal_sign .sign_top h2 {font-size: 2em;}
    .modal_sign .sign_top p {font-size: 1em;}
    .modal_sign .donate_con p span i {width: 30px; height: 30px;}
    .modal_sign .sign_top button span {font-size: 16px;}
}

@media screen and (max-width: 600px) {
    .modal_con h1 {font-size: 1.2em;}
    .terms_con p {font-size: .9rem;}
    .btn_terms span {font-size: .9rem;}
    .modal_box {padding: 2rem;}
    .terms_con {width: 65vw;}

    .modal_sign .donate_con {padding: 10px;}
    .modal_sign .sign_top p {font-size: 15px;}
    .modal_sign .sign_top {width: 70vw;} 
    .modal_sign .sign_header {padding: 0.5em;}

    .modal_contact {width: 90vw;}
    
}

@media screen and (max-width: 450px) {
    .modal_con {gap: 20px; padding: 1rem;}
    .modal_sign .sign_top {width: 90vw;}


    .modal_contact .number_box {padding: 1em;}

    .modal_box {padding: 0;}
    .modal_box {width: 80vw;}
}

@media screen and (max-width: 320px) {
    .modal_con h1 {font-size: 1em;}
    .modal_box {padding: .5rem;}
    .modal_sign .sign_top {min-width: 320px;}
    .modal_sign .sign_bottom .bottom_con .sale_txt p {font-size: 1em}
    
}