@charset "UTF-8";

/*계정 관련 모달*/
.modal_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 51rem; background: #fff; box-shadow: 0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%); padding-left: 4rem; padding-right: 4rem; border: 1px solid #ddd; border-radius: 1rem;}
.modal_box header{padding: 2rem 0 3rem 0;}
.modal_box header .top{display: flex; justify-content: space-between; align-items: center;}
.modal_box header .top_h{width: 30%; font-size: 3.4rem; font-weight: 600;}
.modal_box header .title{font-size: 3rem; text-align: center; font-weight: 500; padding: 2rem 0; border-bottom: 2px solid #022964;}

/* 회원가입 모달*/
.join_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50.2rem; background: #fff; padding-left: 4rem; padding-right: 4rem; border: 1px solid #ddd; box-shadow: 0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%); max-height: calc(100% - 10rem); overflow-y: auto; }
.join_box header{padding: 2rem 0 3rem 0;}
.join_box header .top{display: flex; justify-content: space-between; align-items: center;}
.join_box header .top_h{font-size: 3.4rem; font-weight: 600;}
.join_box header .title{font-size: 3rem; color: #6d605f; text-align: center; font-weight: 600; padding-top: 2rem; padding-bottom: 3.5rem; border-bottom: 2px solid #022964;}
.join_box .id_box{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.join_box .id_box .input_text{width: calc(60% - .5rem);}
.join_box .id_box .doubleCheck{width: calc(40% - .5rem); padding: 1.4rem 0; text-align: center; border-radius: .3rem; font-size: 1.6rem; background: #6d605f; color: #fff; cursor: pointer;} 


/* 모달 버튼 */
.close_bt{display: block; width: 1.8rem; background: url(../img/ico_close_bt.png) no-repeat 0 0; background-size: 1.8rem;}
.close_bt span{overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
.modal_btn{padding-top: 4rem; padding-bottom: 10rem; text-align: center;}
.modal_btn li{display: inline-block; font-size: 1.6rem; color: #fff;}
.modal_btn li a{display: block; padding: 0.4rem 0;  border-radius: .3rem; width: 10.5rem;}
.modal_btn .re_bt{background: #737373;}
.modal_btn .pass_bt{background: #f57b20; margin-left: 1rem;}
.formBt{margin: 2rem 0 8rem; display: flex; justify-content: space-between; align-items: center;}
.formBt button{width: calc(50% - .5rem); font-size: 1.8rem; padding: 1.3rem 0; text-align: center; border-radius: .3rem; cursor: pointer;}

/*modal_table*/
.modal_table{width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 2rem;}
.modal_table caption{overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
.modal_table th{font-size: 1.8rem; color: #555; text-align: left; font-weight: normal;}
.modal_table th.ver-t{vertical-align: top;}
.modal_table th.ver-t label{padding-top: 1.1rem; display: block;}
.modal_table td{font-size: 1.6rem;}
.modal_table tr:nth-child(n+2) th,
.modal_table tr:nth-child(n+2) td{padding-top: 1.4rem;}
.modal_table td input{color: #333;}
.modal_table td .input_text{border: 1px solid #ccc; border-radius: .3rem; padding: 1.2rem 1.5rem; width: 100%; font-size: 1.6rem; font-weight: 200;}
.modal_table td input::placeholder{color: #ccc;}

.modal_table .mail_box{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.modal_table td .mail_box .input_text{width: calc((100% - 4rem) / 2);}
.modal_table td .mail_box .input_text#join_mail_txt{width: 100%; margin-top: 1.4rem;}
.modal_table td .mail_select{width: calc((100% - 4rem) / 2); border: 1px solid #ccc; border-radius: .3rem; padding: 1.3rem 2rem 1.3rem 1.3rem; color: #333; font-size: 1.6rem; background: #fff url(../img/ico-sel.png) no-repeat right; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.modal_table td .ans_select{width: 100%; border: 1px solid #ccc; border-radius: .3rem; padding: 1.3rem 2rem 1.3rem 1.3rem; color: #333; font-size: 1.6rem; background: #fff url(../img/ico-sel.png) no-repeat right; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}

.modal_table .checkbox_div{text-align: center;padding: 2rem 0 !important;}
.modal_table .checkbox_div input{margin-right: 1rem;}
.modal_table .checkbox_div input+label:not(:last-child){margin-right: 3rem;}

.privacy_box{border: 1px solid #ccc; padding: 1.3rem 1rem 1.3rem 2rem; font-size: 1.6rem; color: #333; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-weight: 400;}
.privacy_box a{display: block; color: #fff; padding: .6rem 2.3rem .5rem 2.3rem; border-radius: .3rem; background: #6d605f; font-size: 1.4rem; font-weight: 200;}

/*인증번호 bt*/
.btn_input{padding: 1.3rem 0; display: block; background: #022964; border-radius: 0.3rem; font-size: 1.8rem; color: #fff; text-align: center; font-weight: 400; width: 100%; cursor: pointer;}
.btn_cancle{background: #808080; margin-top: 2rem; cursor: pointer;}
.btn_revoke{background: #c60000; margin-top: 2rem; cursor: pointer; width: 50%;}
.btn_mini{padding: 0.5rem 0; display: block; background: #022964; border-radius: 0.3rem; font-size: 1.5rem; color: #fff; text-align: center; font-weight: 400; width: 25%; cursor: pointer;}
.btn_flex{display: flex; gap: 1rem;}
/*동의 체크박스*/
.agree_box{margin: 1.6rem 0 1.9rem}
.agree_box input[type="checkbox"]{display: none;}
.agree_box input[type="checkbox"] + label::before{display: inline-block; content: ""; width: 2rem; height: 2rem; background: url(../img/ico_login_un_check.png) no-repeat 0 0; background-size: 2rem; padding-right: .9rem; vertical-align: middle;  margin-top: -0.3rem;}
.agree_box input[type="checkbox"]:checked + label::before{background: url(../img/ico_login_check.png) no-repeat 0 0; background-size: 2rem;}
.agree_box label{font-size: 1.6rem; color: #333; font-weight: 400;}

@media screen and (max-width: 768px){
    /*계정 관련 모달*/
    /* .modal_box{width: 100%; background: #fff; top: 0; transform: translate(-50%, 0);  padding-bottom: 0; max-height: 100vh; overflow-y: auto; border: none; padding-left: 3rem; padding-right: 3rem; box-shadow: none;} */
    .modal_box{width: 100%; background: #fff; top: 0; transform: translate(-50%, 0);  padding-bottom: 0; height: 100vh; overflow-y: auto; border: none; padding-left: 3rem; padding-right: 3rem; box-shadow: none;}
    .modal_box header{padding: 2rem 0 2.5rem 0;}
    .modal_box header .top_h{font-size: 3rem;}
    .modal_box header .title{font-size: 2.4rem; font-weight: 500; padding-top: 3.4rem; padding-bottom: 2.5rem;}
    
    /* 회원가입 모달*/
    .join_box{width: 100%; background: #fff; top: 0; transform: translate(-50%, 0); padding-bottom: 0; max-height: 100vh; overflow-y: auto; border: none; padding-left: 3rem; padding-right: 3rem; box-shadow: none;}
    .join_box header{padding: 2rem 0 2.5rem 0;}
    .join_box header .top_h{font-size: 3rem;}
    .join_box header .title{font-size: 2.4rem; font-weight: 500; padding-top: 3rem; padding-bottom: 3rem;}
    .join_box .id_box .doubleCheck{padding: 1.1rem 0 1.2rem 0; font-size: 1.4rem;}
    .modal_table td .mail_box .input_text{width: calc((100% - 2.2rem) / 2);}

    /*인증번호 bt*/
    .btn_input{padding: 1.1rem 0;font-size: 1.4rem;}
    .btn_mini{font-size: 1.2rem;width: 30%;}
    
    /*modal_table*/
    .modal_table th{font-size: 1.4rem; font-weight: 500;}
    .modal_table td{font-size: 1.2rem;}
    .modal_table td .input_text{font-size: 1.2rem; padding: 1rem 1rem 1.2rem 1rem;}
    .modal_table td .mail_select{font-size: 1.2rem; width: calc((100% - 2.2rem) / 2); padding: 1.2rem 1rem 1.1rem 1rem;}
    .modal_table td .ans_select{font-size: 1.2rem; padding: 1rem 1rem 1.2rem 1rem;}

    /*동의 체크박스*/
    .agree_box{margin: 3.2rem 0 1.7rem;}
    .agree_box input[type="checkbox"] + label::before{width: 1.5rem; height: 1.5rem; background-size: 1.5rem;  padding-right: .5rem;}
    .agree_box input[type="checkbox"]:checked + label::before{background-size: 1.5rem;}
    .agree_box label{font-size: 1.4rem; font-weight: 500;}
    .privacy_box{padding: 1rem 1.5rem; font-size: 1.4rem;}
    .privacy_box a{font-size: 1.2rem; padding: .8rem 2rem;}

    /* 모달 버튼 */
    .modal_btn{padding-top: 2.5rem; padding-bottom: 5.5rem;}
    .modal_btn li{font-size: 1.4rem;}
    .modal_btn li a{padding: 0.9rem 0; width: 10rem;}
}