@charset "UTF-8";
@import url("common.css");

.col1{color: #d48146;}
.col2{color: #c75034;}
.col3{color: #e0aa49;}

/* #wrap{background: url(../img/bg-login.png) no-repeat; width: 100%; height: 100vh; background-size: cover;} */

/*계정 관련 모달*/
.modal_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50rem; 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;}
.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-top: 5.3rem; padding-bottom: 2.4rem; border-bottom: 2px solid #0079C2;}

/* 회원가입 모달*/
.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 #0079C2;}
.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;}
.formBt2{margin: 2rem 0 8rem;}
.formBt2 button{width: 100%; font-size: 1.8rem; padding: 1.3rem 0; text-align: center; border-radius: .3rem; cursor: pointer;}
.formBt2 button:nth-child(n){width: 100%; font-size: 1.8rem; padding: 1.3rem 0; text-align: center; border-radius: .3rem; cursor: pointer; margin-top: 1rem;}
.ok_bt{background-color: #266ed4; color: #ffffff;}

/*modal_table*/
.modal_table{width: 100%; table-layout: fixed; border-collapse: collapse;}
.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;}
.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: #0079C2; border-radius: 0.3rem; font-size: 1.8rem; color: #fff; text-align: center; font-weight: 400;}

/*동의 체크박스*/
.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;}

/*모달창 하단 공지사항*/
.notice{margin-bottom: 5.5rem; margin-top: 0; margin-bottom: 8rem;}
.notice li{color: #555; padding-left: 1rem; line-height: 1.5; font-size: 1.6rem;}
.notice.dot_list li::before{display: inline-block; content: "ㆍ"; margin-left: -1.5rem;}
.notice p{color: #555; line-height: 1.5; font-size: 1.7rem; font-weight: bold;}

@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 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;}
    
    /*모달창 하단 공지사항*/
    .notice li{line-height: 1.85; font-size: 1.3rem;}
    .notice.dot_list li::before{margin-left: -1.2rem;}

    /*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;}
}