@charset "UTF-8";

.wrap {padding: 120px 0;}
.join_wrap {position: relative; width: 100%; max-width: 600px; margin: 0 auto;}

.join_wrap .box {padding: 30px 26px 14px; background: #F9F9F9; border: var(--border-solid);}
.join_wrap .box h1 {width: 100%; height: 30px; margin-bottom: 14px; font-weight: 500; font-size: 1.125em; color: #555555; display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
.join_wrap .box h1 .logo {width: 100%; max-width: fit-content; height: 100%;}
.join_wrap .box h1 .logo img {width: 100%; height: 100%;}

.input_label {display: inline-block; width: 100px; font-size: 1em; flex-shrink: 0;}
.ul-register .item {display: -webkit-flex; display: flex; justify-content: start; align-items: center; margin-bottom: 10px;}
.btn_view {width: 100px; height: 54px; border-radius: 6px; background: var(--highlight); color: var(--white); flex-shrink: 0; margin-left: 10px;}

.input-email, .select {width: calc((100% - 110px)/2);}
.input-email {margin-right: 10px;}

.agree_area {margin-top: 32px;}
.agree_area .tit {font-size: 1.125em; font-weight: 700; color: #252525; margin-bottom: 17px;}
.agree_area .agree_form li {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;  color: #252525; margin-bottom: 22px;}
.agree_area .agree_form li .txt {width: 100%; padding-left: 26px; color: #767676;}
.agree_area .agree_form input[type=checkbox] + label {font-size: 1em;}
.agree_area .agree_form input[type=checkbox] + label::before {top: 2px; transform: translateY(0);}

.btn_area {width: 100%; padding: 16px 0; text-align: center; margin-top: 40px;}
.btn_area button {width: 100%; max-width: 190px; height: 52px; color: var(--white); cursor: pointer; font-size: 1.125em; font-weight: 700; border-radius: 6px;}
.btn_area #submit_btn {background: var(--highlight);}

/* 팝업 */
.popup {position: relative; display: none;}
.cont_box {overflow: auto; min-width: 300px; min-height: 320px; background: var(--white); padding: 30px; color: #444;}
.board_table .cont_box strong {display: block; font-weight: 700;}
.board_table .cont_box p {color: #666;}
.popup .close {position: absolute; top: 12px; right: 30px; width: 20px; height: 20px;}
.popup .close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 27px; background: #c1c1c1;}
.popup .close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 1px; height: 27px; background: #c1c1c1;}





@media screen and (min-width:993px){

}

@media screen and (max-width:992px){
    .wrap {padding: 120px 50px;}
}

@media screen and (max-width:768px){
    .ul-register .item {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .input_label {width: 100%; margin-bottom: 10px;}
    .ul-register .td_id .input_id {width: calc(100% - 110px);}
    .ul-register .td_email .input-email, .ul-register .td_email .select {width: calc((100% - 10px)/2);}
}

@media screen and (max-width:480px){
    .wrap {padding: 0;}
    .popup .close {right: 15px;}

    .join_wrap .box {padding: 30px 16px 14px; border: 0;}
    .ul-register .item input {padding: 0 16px;}
    .ul-register .td_email .select {padding: 0 16px;}
    .ul-register .td_email .input-email, .ul-register .td_email .select {width: 100%;}
    .input-email {margin-right: 0; margin-bottom: 10px;}
}