@charset "utf-8";

/* login */
.login_wrap {display: flex;justify-content: center;align-items: center;width: 100%;padding: 50px 0;}
.login_wrap  h1 {padding-bottom: 12px;}
.login_box {position: relative;width: 100%;max-width: 560px;margin: 0 auto;}
.login_box h1.logo {width: 100%;margin-bottom: 50px;padding-bottom: 0;text-align: center;}
.login_box .input_box input {width: 100%;height: 50px;padding: 0 15px;padding-right: 33px;font-size: 16px;line-height: 50px;}
.login_box .input_box > ul > li {position: relative;}
.login_box .input_box > ul > li + li {margin-top: 20px;}
.login_box .input_box label {display: block;margin-bottom: 8px;font-size: 15px;font-weight: 500;color: #404040;}
.login_box .input_box .btn_del {opacity: 0;position: absolute;right: 10px;top: 47px;width: 17px;height: 17px;border: 0;font-size: 0;background: url(../images/icon/i_input_del.png) no-repeat center;z-index: 9;}
.login_box .input_box .btn_del.on {opacity: 1;}
.login_box .chk {margin-top: 20px;}
.login_box .chk > span label {font-size: 15px;line-height: 20px;}
.login_box .chk .cbx label::before {width: 18px;height: 18px;line-height: 16px;}
.login_box .chk .cbx input:checked + label::before {font-size: 13px;}
.login_box .links {margin-top: 20px;text-align: center;}
.login_box .links li {display: inline-block;position: relative;}
.login_box .links li + li {margin-left: 24px;}
.login_box .links li + li::before {content: '';position: absolute;left: -12px;top: 7px;width: 1px;height: 15px;background: #cecece;}
.login_box .links a {display: inline-block;padding: 5px;font-size: 14px;font-weight: 400;}
.login_box .links a:hover {text-decoration: underline;}
.login_box .links a.blue {color: var(--blue);}
.login_box .btn_area {margin-top: 32px;}
.login_wrap .error_txt {margin-top: 6px;line-height: 1.5;color: #e83667;}
.member_sns {margin-top: 40px;}
.member_sns .tit {display: block;position: relative;text-align: center;}
.member_sns .tit::before {content: "";opacity: .84;display: block;position: absolute;left: 0;top: 50%;width: 100%;height: 1px;margin-top: -1px;border: dotted #dadada;border-width: 2px 0 0;z-index: 1;}
.member_sns .tit span {display: inline-block;position: relative;padding: 5px;font-size: 15px;font-weight: 400;color: gray;background: #fff;z-index: 2;}
.member_sns .btn_area {display: flex;justify-content: center;margin: 16px 0;}
/* member.css 수정 */
.member_sns a {display: inline-block;width:60px;height:30px;margin: 0 10px;font-size: 0;vertical-align: top;}
.member_sns .kakao {background: url(../images/icon/kakao_login_small.png) no-repeat center;}
.member_sns .naver {background: url(../images/icon/naver_login_small.png) no-repeat center;}
/* 수정 끝 */
.btn_login {display: block;width: 100%;height: 55px;font-size: 17px;font-weight: 500;line-height: 54px;}
/* id/pw find 추가 */
.login_box.find_box {display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 900px;}
.login_box.find_box .box {width: 50%;max-width: 430px;}
.login_box.find_box .box > b {display: block;margin-bottom: 50px;font-size: 25px;font-weight: 600;line-height: 1.25;color: #202020;letter-spacing: -0.01em;text-align: center;}




/* join 공통 */
.join {width: 100%;max-width: 560px;margin: 0 auto;}
.join .page_tit {display: block;margin-bottom: 50px;font-size: 30px;font-weight: 600;line-height: 1.25;color: #202020;letter-spacing: -0.01em;text-align: center;}
.join .page_tit span {display: block;margin-top: 10px;font-size: 16px;font-weight: 400;color: #606060;}
.btn_join {display: block;width: 100%;height: 55px;font-size: 17px;font-weight: 500;line-height: 54px;}

/* join step */
.step {display:flex; justify-content:center; gap:2rem; width: 100%;height:40px;overflow: hidden; margin-top:20px}
.step a {display:inline-block; position: relative;min-width:275px;height:40px;line-height:40px; text-align:center;color: #444;background: #ddd; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em;}
.step a:hover {background: #abe0ef;}
.step a::after {content: "";position: absolute;right: -1em;top: 50%;width: 2.5em;height: 2.5em;margin-top: -1.25em;z-index: -1;transform: rotate(45deg);border-radius: .4em;background: #ddd;}
.step a:hover::after {background:#abe0ef;}
.step .current,
.step .current:hover {color:#fff;background: #3c9ef7;}
.step .current:hover::after,
.step .current::after {background: #3c9ef7;}

/* 1. 회원가입안내 join.info */
.member_sns {margin-top: 40px;}
.member_sns .tit {display: block;position: relative;text-align: center;}
.member_sns .tit::before {content: "";opacity: .84;display: block;position: absolute;left: 0;top: 50%;width: 100%;height: 1px;margin-top: -1px;border: dotted #dadada;border-width: 2px 0 0;z-index: 1;}
.member_sns .tit span {display: inline-block;position: relative;padding: 5px;font-size: 15px;font-weight: 400;color: gray;background: #fff;z-index: 2;}
.member_sns .btn_area {display: flex;justify-content: center;margin: 16px 0;}
/* member.css 수정 */
.member_sns a {display: inline-block;width:60px;height:30px;margin: 0 10px;font-size: 0;vertical-align: top;}
/* .member_sns .kakao {background: url(../images/icon/img_kakaotalk.png) no-repeat center / 36px;}
.member_sns .naver {background: url(../images/icon/img_naver.png) no-repeat center / 36px;} */
/* 수정 끝 */

/* 2. 본인인증 join.sign */
.join.sign {text-align: center;}
.join.sign .btns {text-align: center;}
.join.sign .btns li {display: inline-block;}
.join.sign .btns li + li {margin-left: 50px;}
.join.sign .btns a {display: block;}
.join.sign .btns a img {overflow: hidden;border-radius: 20px;}
.join.sign .btns a p {margin-top: 7px;font-size: 16px;font-weight: 400;line-height: 1.5;letter-spacing: -0.01em;color: #606060;}
.join.sign .sub_txt {display: inline-block;position: relative;margin-top: 48px;padding-left: 18px;font-size: 14px;font-weight: 400;line-height: 1.5;color: var(--gray);text-align: left;}
.join.sign .sub_txt i {position: absolute;left: 0;top: 4px;}

/* 3. 약관동의 */
.join.agreement .box {padding: 20px 25px;border-radius: 12px;text-align: left;background: #f8f8f8;}
.join.agreement .chk_all .cbx {margin: 0;}
.join.agreement .chk_all .cbx label {font-size: 18px;font-weight: 500;line-height: 20px;}
.join.agreement .chk_all .cbx label::before {width: 18px;height: 18px;line-height: 18px;}
.join.agreement .list {margin-top: 20px;padding-top: 20px;border-top: 2px dotted #dadada;}
.join.agreement .list li + li {margin-top: 15px;}
.join.agreement .list .cbx {margin: 0;}
.join.agreement .list .cbx label {display: block;font-size: 16px;font-weight: 400;line-height: 17px;color: #777;}
.join.agreement .list .cbx label b {margin-right: 3px;font-size: 15px;font-weight: 500;color: var(--blue);}
.join.agreement .list .cbx label b.gray {color: var(--gray);}
.join.agreement .list .cbx label::before {width: 16px;height: 16px;background: #fff;}
.join.agreement .list .cbx input:checked + label::before {content: '\e928';background: var(--chk-bg);}
.join.agreement .list li {position: relative;}
.join.agreement .list li .btn_more,
.join.agreement .list li .btn_more2 {opacity: 0.7;display: block;position: absolute;right: 0;top: 1px;width: 20px;height: 20px;font-size: 0;background: url(../images/icon/i_faq_off.png) no-repeat center / 10px;transform: rotateZ(-90deg);}
.join.agreement .list li .btn_more2 {transform: rotate(0deg);}
.join.agreement .list li .btn_more2.on {transform: rotate(180deg);}
.join.agreement .list li .cont {display: none;margin-top: 5px;padding-left: 20px;font-size: 14px;}
.term_box * {font-size: 15px;line-height: 1.4;}
.term_box strong {display: block;margin-bottom: 5px;font-size: 16px;font-weight: 500;}
.term_box .tit {margin-bottom: 10px;font-size: 18px;font-weight: 600;}
.term_box .tit + ul > li + li {margin-top: 15px !important;}
.term_box > ul > li + li {margin-top: 20px !important;}
.term_box .tdepth {padding-left: 15px;padding-top: 5px;font-size: 14px;}
.term_box p {margin-top: 10px !important;}

/* 4. 정보입력 */
.join.form .form_box > ul > li {display: flex;flex-wrap: wrap;}
.join.form .form_box > ul > li .tit {display: block;width: 100%;margin-bottom: 8px;font-size: 15px;font-weight: 500;color: #404040;}
.join.form .form_box > ul > li .tit.required::after {content: '*';margin-left: 3px;font-size: 14px;font-weight: 400;color: var(--red);}
.join.form .form_box > ul > li + li {margin-top: 22px;}
.join.form .form_box input, .join.form .form_box select {width: 100%;height: 50px;padding: 0 15px;font-size: 16px;line-height: 50px;}
.join.form .form_box [disabled] {opacity: 1;color: var(--dark);background-color: #f6f6f6;}
.join.form .form_box .form_group {display: flex;width: 100%;}
.join.form .form_box .form_group input {width: calc(100% - 110px);}
.join.form .form_box .form_group .btn {width: 100px;height: 50px;margin-left: 10px;font-size: 16px;line-height: 48px;text-align: center;}
.join.form .form_box .form_group.space {justify-content: space-between;align-items: center;}
.join.form .form_box .phone input, .join.form .form_box .phone select, .join.form .form_box .email input, .join.form .form_box .email select {max-width: 31%;}
.join.form .chk.toggle {display: flex;width: 100%;}
.join.form .chk.toggle input {left: 0;}
.join.form .chk.toggle .radio {position: relative;width: 50%;height: 50px;margin: 0;text-align: center;z-index: 999;}
.join.form .chk.toggle .radio label {position: absolute;left: 0;top: 0;width: 100%;height: 50px;border: 1px solid var(--bdr);font-size: 16px;font-weight: 500;line-height: 48px;}
.join.form .chk.toggle .radio label::before, .join.form .chk.toggle .radio label::after {display: none;}
.join.form .chk.toggle .radio:first-of-type label {border-right: 0;border-radius: 8px 0 0 8px;}
.join.form .chk.toggle .radio:last-of-type label {border-left: 0;border-radius: 0 8px 8px 0;}
.join.form .chk.toggle .radio input:checked + label {color: #63a1ff;}
.join.form .chk.toggle .radio input:checked + label, .join.form .chk.toggle .radio input:checked + label:hover {border: 1px solid #63a1ff !important;background: #F8FBFF;}
.join.form .btn_area {margin-top: 60px;}

/* 5. 가입완료 finish */
.join.finish p {position: relative;font-size: 18px;font-weight: 500;line-height: 1.4;color: #202020;letter-spacing: -0.4px;text-align: center;}
.join.finish img {display: block;margin: 0 auto 30px;}
.join.finish .btn_area {margin-top: 50px;margin-bottom: 0;}
.join.finish .btn_area .btn_join {display: inline-block;width: 200px;}