@charset "utf-8";

.member{}
.member.login{margin-top: 20px;}
@media (max-width: 860px){
    .member.login{margin-top: 0;}
}

.member input[type="text"],
.member input[type="password"],
.member input[type="number"]{height: 42px; border-radius: 8px; font-size: 15px;}
.member input::placeholder{color: var(--line); font-weight: 300;}
.member select{font-size: 15px;}

.member .m_box{margin: 0 auto; padding: 72px 83px; filter: var(--shadow_2); border-radius: var(--radius_4); background-color: var(--white);}

.member .m_tab{display: flex;}
.member .m_tab > li{flex: 1;}
.member .m_tab > li + li{margin-left: -1px;}
.member .m_tab > li button{display: block; width: 100%; padding: 16.5px 10px; text-align: center; font-size: 16px; font-weight: var(--fwr); color: var(--sub_dim); border: 1px solid var(--line);}
.member .m_tab > li:first-child button{border-radius: 8px 0 0 0;}
.member .m_tab > li:last-child button{border-radius: 0 8px 0 0;}
.member .m_tab > li button.on{font-weight: var(--fwb); color: var(--main); border-color: var(--main); position: relative; z-index: 1; border-bottom-color: transparent;}
.member .m_tab > li button:not(.on){border-bottom-color: var(--main);}

.member .m_tab_con{padding: 40px 0 0;}
.member .m_tab_con > .con.on{display: block;}

.member .m_box .login .mid{display: flex; flex-wrap: wrap; gap: 18px;}

.member .m_box .login .mid .ips{flex: 1; display: flex; flex-direction: column; gap: 8px;}
.member .m_box .login .mid .ips li{position: relative;}
.member .m_box .login .mid .ips li .ico{position: absolute; top: 50%; transform: translateY(-50%); left: 15px; z-index: 2; width: 24px; height: 24px; display: inline-block; background-repeat: no-repeat; background-size: cover;}
.member .m_box .login .mid .ips li .ico.id{background-image: url("/assets/site/img/common/ip_login_id.svg");}
.member .m_box .login .mid .ips li .ico.pw{background-image: url("/assets/site/img/common/ip_login_pw.svg");}
.member .m_box .login .mid .ips li input{width: 100%; padding-left: 43px;}
.member .m_box .login .mid button{flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; width: 138px; border-radius: 8px; background-color: var(--main); color: #fff; font-size: 1rem;}
.member .m_box .login .mid .option{flex: none; flex-wrap: wrap; row-gap: 5px; column-gap: 10px; width: 100%; display: flex; align-items: center;}
.member .m_box .login .mid .option .chkwrap input[type="checkbox"] + label{font-size: 14px; padding-left: 25px; color: var(--main);}
.member .m_box .login .mid .option .chkwrap input[type="checkbox"] + label .shape{top: -1px;}
.member .m_box .login .mid .option .m_link{margin-left: auto; display: flex;}
.member .m_box .login .mid .option .m_link li+li:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 11px 0; width: 1px; height: 12px; background-color: var(--line);}
.member .m_box .login .mid .option .m_link li a{font-size: 14px; color: var(--sub_bold);}
.member .m_box .login .mid .option .m_link li a.bold{color: var(--main); font-weight: var(--fwb);}

.member .m_box .login .bot{padding: 40px 0 0;}
.member .m_box .login .bot p {position: relative; text-align: center;}
.member .m_box .login .bot p::before{content: ''; display: block; width: 165px; height: 1px; background: var(--line); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.member .m_box .login .bot p::after{content: ''; display: block; width: 165px; height: 1px; background: var(--line); position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.member .m_box .login .bot .sns_login{display: flex; gap: 12px; justify-content: center; margin-top: 20px;}
.member .m_box .login .bot .sns_login li {width: calc((100% - 12px) / 2);}
.member .m_box .login .bot .sns_login li a{display: flex; align-items: center; justify-content: center; font-weight: var(--fwm); width: 100%; height: 48px; border-radius: 8px; background-color: var(--line); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.member .m_box .login .bot .sns_login li.naver a{background-color: #03C75A; color: #fff;}
.member .m_box .login .bot .sns_login li.kakao a{background-color: #FFE300; }

.member .m_box .login .bot .sns_login li a span {display: flex; align-items: center; gap: 10px;}
.member .m_box .login .bot .sns_login li a span::before {content: ''; display: block; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.member .m_box .login .bot .sns_login li.naver a span::before {width: 20px; height: 20px; background-image: url("/assets/site/img/common/login_naver.svg");}
.member .m_box .login .bot .sns_login li.kakao a span::before {width: 20px; height: 20px; background-image: url("/assets/site/img/common/login_kakao.svg");}


.member .m_tab_con .forMtab{display: none;}
.member .m_tab_con .forMtab.on{display: block;}
.member .m_tab_con tr.forMtab.on{display: table-row;}

.member h3 {font-size:20px; font-weight:600; margin:0 0 15px 0 !important; padding:0; text-align:left;}
.member h3 span {display:block; font-weight:normal;}

.member .m_box .find .form_wrap .form_table{border-top: none; font-size: 16px;}
.member .m_box .find .form_wrap .form_table colgroup col:nth-child(1){width: 123px;}
.member .m_box .find .form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 123px);}
.member .m_box .find .form_wrap .form_table tbody tr{border: none;}
.member .m_box .find .form_wrap .form_table tbody tr th{padding: 4px 10px 4px 0; font-size: 1rem;}
.member .m_box .find .form_wrap .form_table tbody tr th label,
.member .m_box .find .form_wrap .form_table tbody tr th span{line-height: 42px;}
.member .m_box .find .form_wrap .form_table tbody tr td{padding: 4px 0 4px 0;}
.member .m_box .find .form_wrap .form_table .cont input{height: 42px; width: 100%; flex: 1.45;}
.member .m_box .find .form_wrap .form_table .cont select{height: 42px; width: 100%; flex: 1.5;}
.member .m_box .find .form_wrap .form_table .email{overflow: hidden; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.member .m_box .find .form_wrap .form_table .email .at{line-height: 1;}
.member .m_box .find .bot .btn_wrap{padding: 40px 0 0;}
.member .m_box .find .bot .btn_wrap .btn{max-width: 182px;}

.member .join_type{display: flex; gap: var(--gap); flex-wrap: wrap; line-height: 130%; font-size: 15px;}
.member .join_type .con{display: block; padding: 48px 30px 66px; flex: 1; filter: var(--shadow_2); border-radius: var(--radius_4); background-color: var(--white); text-align: center;}
.member .join_type .txt{display: block;}
.member .join_type .txt h4{font-size: 24px; font-weight: var(--fwb); padding: 0 0 6px;}
.member .join_type .img{padding: 15px 0 20px; text-align: center;}
.member .join_type .img img{max-width: 173px;}
.member .join_type .bot .sns_login{display: flex; gap: 12px; justify-content: center;}
.member .join_type .bot .sns_login li button{position: relative; z-index: 10; display: block; width: 48px; height: 48px; border-radius: 8px; background-color: var(--line); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.member .join_type .bot .sns_login li.naver button{display: block; width: 48px; height: 48px; border-radius: 8px; background-image: url("/assets/site/img/common/login_naver_box.svg");}
.member .join_type .bot .sns_login li.kakao button{display: block; width: 48px; height: 48px; border-radius: 8px; background-image: url("/assets/site/img/common/login_kakao_box.svg");}
.member .join_type .bot .sns_login li button span{font-size: 0;}
.member .join_type .bot .des{padding: 6px 0 0; font-size: 14px; font-weight: var(--fwl); color: var(--dotted); line-height: 120%;}

.member .agree_bot .chkwrap{text-align: center;}
.member .agree_bot .chkwrap input[type="checkbox"] + label{font-size: 16px; font-weight: var(--fwsb); color: var(--main); line-height: 140%; padding: 0 0 0 42px;}
.member .agree_bot .chkwrap input[type="checkbox"] + label .shape{top: -5px; width: 32px; height: 32px; border-color: var(--line); border-radius: 8px; background-color: #fff;}
.member .agree_bot .chkwrap input[type="checkbox"] + label .shape:before{top: 7px; left: 6px; width: 18px; height: 11px; border-width: 3px; opacity: 1; visibility: visible; border-color: #c1c1c1;}
.member .agree_bot .chkwrap input[type="checkbox"]:checked + label .shape:before{border-color: var(--main);}

.member .agree_bot .btn_wrap{gap: 12px; padding: 4rem 0 0;}
.member .agree_bot .btn_wrap .btn{max-width: 182px;}
@media (max-width: 860px){
    .member .m_box{padding: 70px 50px;}
}
@media (max-width: 640px){
    .member .m_box{padding: 40px 20px;}
    .member .m_tab_con{padding: 30px 0 0;}
    .member .m_box .login .mid button{width: 100%; height: 42px;}
    .member .m_box .login .bot{padding: 20px 0 0; margin-top: 20px;}

    .member .m_box .find .form_wrap .form_table .email{flex-direction: row; flex-wrap: wrap;}
    .member .m_box .find .form_wrap .form_table .email select{flex: 0 0 auto; width: 100%;}

    .member .m_box .find .bot .btn_wrap{padding: 30px 0 0;}

    .member .join_type{flex-direction: column;}
    .member .join_type .con{padding: 30px 20px 30px;}
    .member .join_type .img img{max-width: 80px;}

    .member .m_box .login .bot p::before {width: 30%;}
    .member .m_box .login .bot p::after {width: 30%;}

    .member .m_box .login .bot .sns_login {flex-direction: column;;}
    .member .m_box .login .bot .sns_login li {width: 100%;}

}


/* 개인정보처리방침, 이용약관, 이메일무단수집거부 */
.form_agree.member .con .con_text{--gap_con_text: 10px; font-size: 16px;}
.form_agree.member .con .con_text .top{margin-bottom: calc( var(--gap_con_text) * 2 );}
.form_agree.member .con .con_text ol > li + li{margin-top: calc( var(--gap_con_text) * 2 );}
.form_agree.member .con .con_text ol > li > .tit{display: block; font-size: 18px; font-weight: 700; margin-bottom: var(--gap_con_text); padding: 0;}
.form_agree.member .con .con_text .depth{margin-top: var(--gap_con_text);}
.form_agree.member .con .con_text .depth strong{font-weight: 600;}
.form_agree.member .con .con_text .depth li{margin-top: calc( var(--gap_con_text) * 0.5 ); padding-left: 20px;}
.form_agree.member .con .con_text .depth li > .mark{display: inline-block; margin-left: -20px; margin-right: 0;}
.form_agree.member .con .con_text .depth li > .tit{display: inline;}
.form_agree.member .con .con_text .depth_lim{margin-top: calc( var(--gap_con_text) * 0.5 );}
.form_agree.member .con .con_text .lim li{margin-top: calc( var(--gap_con_text) * 0.5 );}
@media (max-width: 640px){
    .form_agree.member .con .con_text{font-size: 15px;}
    .form_agree.member .con .con_text ol > li > .tit{font-size: 16px;}
    .form_agree.member .con .con_text .depth li{padding-left: 10px;}
    .form_agree.member .con .con_text .depth li > .mark{margin-left: -10px; }
}


/* 결과화면 (아이디 찾기, 회원가입 완료) */
.m_result{text-align: center;}
.m_result .txt{text-align: center;}
.m_result .txt .title{font-size: 24px; font-weight: var(--fwm); line-height: 130%;}
.m_result .txt .des{padding: 20px 0 0; line-height: 150%;}
.m_result .result{margin-top: 20px; display: inline-flex; justify-content: center; align-items: center; background-color: var(--bg); padding: 10px 30px; font-size: 17px; font-weight: var(--fwm);}
.m_result .result dd:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0; width: 1px; height: 10px; background-color: var(--sub_dim); margin: 0 10px;}
.m_result + .btn_wrap{padding: 40px 0 0;}
.m_result + .btn_wrap .btn{max-width: 182px;}
@media (max-width: 640px){
    .m_result + .btn_wrap .btn{line-height: 54px; font-size: 1rem;}
}



/* 비밀번호 변경 안내 화면 */
.pw_reset_box {margin-top: 20px;}
.pw_reset{text-align: center;}
.pw_reset img {width: 100px; margin-bottom: 20px;}
.pw_reset .txt{text-align: center;}
.pw_reset .txt .title{font-size: 24px; font-weight: var(--fwm); line-height: 130%;}
.pw_reset .txt .des{padding: 20px 0 0; line-height: 150%;}
.pw_reset .result{margin-top: 20px; display: inline-flex; justify-content: center; align-items: center; background-color: var(--bg); padding: 10px 30px; font-size: 17px; font-weight: var(--fwm);}
.pw_reset .result dd:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0; width: 1px; height: 10px; background-color: var(--sub_dim); margin: 0 10px;}
.pw_reset + .btn_wrap{padding: 40px 0 0;}
.pw_reset + .btn_wrap .btn{max-width: 182px;}
@media (max-width: 640px){
    .pw_reset img {width: 60px;}
    .pw_reset .txt .des br {display: none;}
    .pw_reset + .btn_wrap .btn{line-height: 54px; font-size: 1rem;}
}