@charset "utf-8";

/* 모달 */
.modal_bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
}
.modalbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: hidden;
    width: calc(100% - 30px);
    max-width: 500px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    z-index: 100;
    background-color: #fff;
}

.modalbox .modal_box .tt h3 {
    font-size: 25px;
    font-weight: 600;
    background-color: #383838;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}
.modalbox .close {
    position: absolute;
    top: 15px;
    right: 15px;
}
.modal_box .close.wh {
    color: #fff;
}

.idcheck {
    display: none;
}
.idcheck.available {
    display: block;
}
.idcheck.unavailable {
    display: block;
}

/*로그인*/
.login_modal {
    max-width: 975px;
}
.login_modal_wrap {display:flex; justify-content: space-between;}
.login_modal_left{flex-basis:50%; max-width:50%;}
.login_modal_right{flex-basis:42%; max-width:42%; padding:10px 0; display: flex; justify-content: center;}
.login_rignt_wrap{width:90%;}
.login_tt{font-size:23px; font-weight:500; margin-bottom:20px; color:#373737;}
.login_input div:first-child{margin-bottom:12px;}
.login_input div input{border: 1px solid #E5E5E5; border-radius: 3px; padding: 15px; width: 100%;
    font-weight: 400; font-size: 14px;}
.required, textarea.required{background-image: url(../main_imgs/require.png) !important; background-repeat: no-repeat; background-position: right top !important;}
.frm_input{height:40px;}
.login_condition{display: flex; align-items: center; justify-content: space-between; margin: 15px 0 25px;}
.login_keep_box label {display:flex; align-items: center; gap:8px;}
.login_keep_box label span{cursor: pointer; font-size:14px; color:#373737; line-height:12px; letter-spacing: -0.48px; font-family: 'Noto Sans KR', sans-serif !important;}
.find_idpw{text-align: center;}
.login_btn_box{border:0; background:var(--main-color); color:#fff; border-radius:5px; width:100%; padding:15px 0; font-size:15px; font-weight:500; margin-top:15px;}
.sns_login_wrap{text-align:center; border-bottom:1px solid #E5E5E5; margin-bottom:20px; padding-bottom:20px;}
.sns_login_tt{margin-bottom:20px; font-weight:500; font-size:14px; color:#373737;}
.sns_login_img a{display:inline-block; margin-right:15px;}
.find_idpw a{font-size:14px; color:#373737;}
.join_ms_btn{border:1px solid var(--main-color); border-radius:3px;}
.join_ms_btn a{font-size:14px; color:var(--main-color); font-weight:500; padding:15px; display:block; width:100%; text-align:center; font-family: 'Noto Sans KR', sans-serif !important;}


/* 회원가입 모달 */

.join_modal .close{position:absolute; top:15px; right:15px;}
.modal_logo_box{text-align:center; background-color:#fff; padding:15px 0; border-bottom:1px solid #efefef;}
.modal_logo_box > .tt > img{max-width:100%;}
.close > a > span{font-size:20px;}
.modal_top{text-align:center; line-height:1.8; padding-bottom:20px; border-bottom:1px solid #efefef; margin-bottom:20px;}
.modal_top_tt{font-size:18px; font-weight:500; color:#373737; margin-bottom:3px;}
.modal_top_tt_sub{color:#858585; font-size:14px;}
.sns_login_wrap2{padding-top:20px;}
.sns_login_box{border-radius:5px; height:50px; max-width:350px; margin:0 auto 10px; text-align:center;}
.naver_join{background:#1EC803;}
.naver_join a span{vertical-align: 0; color:#fff;}
.kakao_join{background:#F8DF00;}
.kakao_join span{color:#3D1B1A; font-weight:500;}
.sns_login_box a{display:flex; width:100%; line-height:50px; font-size:13px; justify-content: center; align-items: center; gap:5px;}
.sns_login_box img{margin-right:2px;}
.sns_login_box a span b{margin-right:5px;}
.google_join{background:#fff; border:1px solid #888;}
.google_join span{color:#666;}
.sns_login_box:last-child{margin-bottom:0;}
.ms_join{background:var(--main-color);}
.ms_join a span{vertical-align: 0; color:#fff;}

.join_agree_wrap {
    border: 1px solid #eee;
    padding: 10px;
}
.join_chk_all {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.join_arrow_box i {
    /* vertical-align: -2px; */
    color: #fff;
}
.join_chk_all .join_arrow_box {
    /*padding: 0px 0px 1px 3px;*/padding-top:1px; width:25px; height:25px; display: inline-block; line-height:25px; text-align: center; vertical-align: middle;
}
.join_chk_all .join_arrow_box i {
	font-size:15px;
    font-weight: 600;
	/* padding:1px 0px 2px 3px; */
}
.join_chk_sub .join_arrow_box {
    /*padding: 0px 0px 1px 3px;*/padding-top:1px; width:18px; height:18px; display: inline-block; line-height:18px; text-align: center; vertical-align: middle;
}
.join_chk_sub_box {
    margin-bottom: 5px;
}
.join_agree_wrap .join_arrow_box {
    margin-right: 5px;
    background: #CDCDCD;
    border-radius: 50%;
}
.join_chk_sub_box label span {
    color: #858585;
    font-size: 12px;
    font-weight: 350;
}
.join_chk_sub_box label span a {
    color: #858585;
    border-bottom: 1px solid #858585;
    font-size: 12px;
    font-weight: 350;
}
.join_chk_sub_box label span b {
    color: var(--main-color);
    font-weight: 400;
}
.join_chk_all label span:last-child {
    font-weight: 500;
    font-size: 12px;
	color: #373737;
}
.join_btn2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-top: 30px;
}
.join_btn2 > div:first-child {
    background: #D1D1D1;
    border-radius: 3px;
    width: 100%;
    margin-right: 8px;
}
.join_btn2_next.on {
    background: #7E8F2D !important;
}
.join_btn2_next.on a {
    color: #fff;
}
.join_btn2 > div:last-child {
    border-radius: 3px;
    width: 100%;
    background: #D1D1D1;
}
.join_btn2 > div > a {
    padding: 10px 0;
    display: block;
    width: 100%;
}
.join_agree_wrap input:checked + label .join_arrow_box {
    background-color: var(--main-color);
}
.join_radio_next {
    background-color: var(--main-color) !important;
}
.join_radio_next a {
    color: #fff !important;
}

/* 정보수정 */
.myform_box_tt {
	font-weight: 500;
    font-size: 14px;
    flex-basis: 20%;
    max-width: 20%;
    color: #373737;
}
.myform_input {
	width: 100%;
    color: inherit;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 10px 8px;
    font-weight: 400;
    font-size: 11px;
}

.my_page .correct_txt {
	font-size: 12px;
}
.my_page .next_box > div:last-child button {
	width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    background-color: transparent;
}

/* 아이디 찾기 */

.find_top_wrap{display:flex; justify-content: space-around; background:#f7f7f7; margin-bottom:20px; text-align:cener;}
.find_top_wrap > div{padding:10px 0; cursor:pointer; color:#9f9f9f; font-weight:500; width:100%; font-size:13px;}
.find_detail_txt{border:1px solid var(--main-color); background-color:#fff;
color: var(--main-color) !important;}
.find_top_wrap > div{padding:10px 0; cursor: pointer; text-align: center; color:#9f9f9f; font-weight:500; width:100%; font-size:14px;}
.find_top_tt{text-align: center; border-bottom:1px solid #eee; margin-bottom:20px; padding-bottom:20px;}
.find_top_tt > p:first-child{font-size: 18px; font-weight: 500; color:#373737;}
.find_top_tt > p:last-child{color: #858585; font-weight: 350; font-size:14px;}
.joinform_box{margin-bottom:10px; display:flex; justify-content: flex-start; align-items: baseline; flex-wrap:wrap;}
.joinform_box_tt{font-weight:500; font-size:13px; flex-basis:20%; max-width:20%; font-size:12px; font-weight:500; color:#373737;}
.joinform_box_tt > div > span{color:#4D7CFF; margin-left:3px;}
.joinform_box_form{flex-basis:80%; max-width:80%;}
.joinform_box::after{content:""; display: block; clear:both;}

.joinform_input{width:100%; color:#9F9F9F; border:1px solid #eee; border-radius:3px; padding:10px 8px; font-weight:400; font-size: 11px;}
.joinform_box_form_top{margin-bottom:4px;}
.joinform_box_form_top::after{content:""; display: block; clear: both;}

.next_box{display:flex; justify-content: space-between; text-align: center;}
.next_box > div:first-child{margin-right:4px;}
.next_box > div{background:#D1D1D1; border-radius:3px; width:100%;}
.next_box > div > a{display:block; width:100%; padding:10px; font-weight:400; cursor: pointer; font-size:14px; font-family: 'Noto Sans KR', sans-serif !important;}
.next_box > div:last-child{margin-left:4px;}
.find_next_btn{background-color: var(--main-color) !important;}
.find_next_btn > a{color:#fff;}