/* 공통 */
#contents {background: var(--background-grey);padding-bottom:26.2rem;}
.member_container {display: flex;align-items: center;justify-content: center;height: 100%;min-height: calc(100vh - var(--header-height) - var(--space-bottom));max-width:498px;margin:0 auto;}
.member_container .member_wrapper {width:100%;}
.member_container .title_area {margin-bottom:3.8rem;}
.member_container .title_area h2 {font-size:2.4rem;line-height:3rem;font-weight:700;text-align: center;}
.member_container .login_help {font-size: 1.4rem;line-height: 2.4rem;color:#959595;}
.member_container .login_help > span {color:var(--main-blue-1);}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container {max-width:100%;padding:0 var(--side-padding);display:block;min-height: auto;}
    .member_container .title_area {height:10rem;margin-bottom:2.4rem;}
    .member_container .title_area h2 {line-height:10rem;font-size:3.4rem;}
    .member_container .login_help {font-size:2.6rem;line-height:3.4rem;text-align: left;}
}


/* 공통 버튼 */
.member_container .btn_area {margin-top:1.4rem;}
.member_container .btn_area a,
.member_container .btn_area button {display:block;height: 5.8rem;border-radius: 1rem;width:100%;margin-bottom:1.4rem;line-height: 5.5rem;text-align: center;}
.member_container .btn_area .btn_blue {background:var(--main-blue-1);color:var(--font-white);}
.member_container .btn_area .btn_white {background:var(--white);border:.1rem solid var(--main-blue-1);color:var(--main-blue-1);}
.member_container .btn_area .btn_grey {background:#C0C9DB;color:var(--font-white);}
.member_container .btn_area.flex_area {display:flex;gap:1rem;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container .btn_area {margin-top:2.4rem;}
    .member_container .btn_area a,
    .member_container .btn_area button {font-size:3rem;height: 10rem;line-height: 10rem;margin-bottom:2.4rem;}
    .member_container .btn_area .btn_white {border:.2rem solid var(--main-blue-1);}
}


/* 로그인 */
.member_container {}
.member_container .form_field {position:relative;margin-bottom:1.4rem;}
.member_container .form_field > span {font-size:1.5rem;line-height:2.4rem;color:#959595;}
.member_container .form_field .toggle_password {position: absolute;right: 2.4rem;top: 50%;transform: translateY(-50%);cursor: pointer;user-select: none;}
.member_container .form_field .toggle_password img {width:2rem;}
.member_container .form_field.email,
.member_container .form_field.phone {display:flex;gap:.5rem;align-items: center;}
.member_container .form_field.email input {width:50%;}
.member_container .form_field.email .email_domain_wrapper {position:relative;width:50%;}
.member_container .form_field.email .email_domain_wrapper input {width:100%;cursor:pointer;padding-right:4rem;text-align:left;}
.member_container .form_field.email .email_domain_wrapper .dropdown_arrow {position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);pointer-events:none;}
.member_container .form_field.email .email_domain_wrapper .email_domain_list {position:absolute;top:calc(100% + 0.5rem);left:0;right:0;background:var(--white);border:.1rem solid #ddd;border-radius:1rem;max-height:20rem;overflow-y:auto;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.member_container .form_field.email .email_domain_wrapper .email_domain_list li {padding:1.2rem 2rem;cursor:pointer;font-size:1.5rem;line-height:2.4rem;color:var(--font-black);}
.member_container .form_field.email .email_domain_wrapper .email_domain_list li:hover {background:#F1F5FE;}
.member_container .form_field.email .email_domain_wrapper input[readonly] {background:var(--white);color:var(--font-black);cursor:pointer;}
.member_container .form_field.email .email_domain_wrapper input::placeholder {color:#959595;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container .form_field {margin-bottom:2.4rem;}
    .member_container .form_field > span {font-size:3rem;line-height:4rem;}
    .member_container .form_field .toggle_password {right: 3rem;}
    .member_container .form_field .toggle_password img {width:3.7rem;}
}

.member_container input[type="text"],
.member_container input[type="password"] {width:100%;height: 5.6rem;border-radius: 1rem;border:.1rem solid #ddd;padding:1.6rem 2rem;background:var(--white);font-size: 1.5rem;line-height: 2.4rem;}
.member_container input[type="text"]::placeholder,
.member_container input[type="password"]::placeholder {font-size: 1.5rem;line-height: 2.4rem;color:#959595;}
.member_container select {width:50%;height: 5.6rem;border-radius: 1rem;border:1px solid #ddd;padding:1.6rem 2rem;background:var(--white);font-size: 1.5rem;line-height: 2.4rem;}
.member_container .form_field .error_text {margin-top:.6rem;font-size:1.3rem;line-height:1.9rem;color:var(--btncolor-5);display:none;}
.login_input_area .form_field .error_text {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);margin-top:0;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container input[type="text"],
    .member_container input[type="password"] {font-size: 3rem;height: 9.2rem;padding: 0 3rem;border:.2rem solid #ddd;}
    .member_container input[type="text"]::placeholder,
    .member_container input[type="password"]::placeholder {font-size: 3rem;}
    .member_container select {font-size: 3rem;height: 9.2rem;padding: 0 3rem;border:.2rem solid #ddd}
    .member_container .form_field.email .email_domain_wrapper input {padding-right:7rem;}
    .member_container .form_field.email .email_domain_wrapper .dropdown_arrow {right:3rem;}
    .member_container .form_field.email .email_domain_wrapper .dropdown_arrow svg {width:2rem;height:auto;}
    .member_container .form_field.email .email_domain_wrapper .email_domain_list {border:.2rem solid #ddd;max-height:30rem;}
    .member_container .form_field.email .email_domain_wrapper .email_domain_list li {padding:2rem 3rem;font-size:3rem;line-height:4rem;}
    .member_container .form_field.email .email_domain_wrapper input[readonly] {background:var(--white);color:var(--font-black);}
    .member_container .form_field.email .email_domain_wrapper input::placeholder {color:#959595;}
}


/* 로그인 페이지 */
.login_input_area input.error {border:.1rem solid var(--btncolor-5);}
.login_input_area .form_field {margin-bottom:2.8rem;}
.login_input_area .form_field .valid_check {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);}
.login_input_area .form_field .valid_check span {color:#959595;display:inline-flex;gap:.3rem;padding-right:.7rem;align-items: center;font-size:1.2rem;line-height:2.4rem;}
.login_input_area .form_field .valid_check span svg {width:1rem;height:auto;}
.login_input_area .form_field .valid_check span.valid {color: var(--main-blue-1);}
.login_input_area .form_field .valid_check span.valid svg path {stroke: var(--main-blue-1);}
.login_input_area .form_field .valid_check span.error {color: var(--btncolor-5);}
.login_input_area .form_field .valid_check span.error svg path {stroke: var(--btncolor-5);}

.login_input_area .login_option {display:flex;justify-content: space-between;align-items: center;padding-bottom:1.6rem;}
.login_input_area .login_option .form_field {display:flex;align-items: center;gap:.6rem;margin:0;}
.login_input_area .login_option label {font-size: 1.5rem;line-height: 2.4rem;color:var(--medium-grey);}
.login_input_area .login_option a {font-size: 1.5rem;line-height: 2.4rem;color:var(--medium-grey);padding-left:2rem;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .login_input_area input.error {border:.2rem solid var(--btncolor-5);}
    .login_input_area .form_field {margin-bottom:5.8rem;}
    .login_input_area .form_field .valid_check {font-size:2.6rem;line-height:3rem;bottom:-3.5rem;}
    .login_input_area .form_field .valid_check span {gap:.7rem;padding-right:1rem;font-size:2.6rem;line-height:3rem;}
    .login_input_area .form_field .valid_check span svg {width:1.2rem;}
    .login_input_area .form_field .error_text {font-size:2.6rem;line-height:3rem;bottom:-3.5rem;}

    .login_input_area .login_option {}
    .login_input_area .login_option label {font-size: 3rem;line-height: 4rem;}
    .login_input_area .login_option a {font-size: 2.8rem;line-height: 4rem;height: 9.2rem;}
}


/* 아이디 찾기 */
.findid_wrapper input.error {border:.1rem solid var(--btncolor-5);}
.findid_wrapper .form_field {margin-bottom:2.8rem;}
.findid_wrapper .form_field .valid_check {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);font-weight:normal;}
.findid_wrapper .form_field .valid_check.domain_check {font-weight:normal;}
.findid_wrapper .form_field .valid_check.error {font-weight:normal;}
.findid_wrapper .form_field .valid_check.domain_check.error {font-weight:normal;}
.findid_wrapper .form_field .valid_check span {color:#959595;display:inline-flex;gap:.3rem;padding-right:.7rem;align-items: center;font-size:1.2rem;line-height:2.4rem;}
.findid_wrapper .btn_area {margin-top:5rem;}

.find_pw_wrap .form_field {margin-bottom:2.8rem;}
.find_pw_wrap .form_field .valid_check {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);}
.find_pw_wrap .form_field .valid_check span {color:#959595;display:inline-flex;gap:.3rem;padding-right:.7rem;align-items: center;font-size:1.2rem;line-height:2.4rem;}

@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .findid_wrapper input.error {border:.2rem solid var(--btncolor-5);}
    .findid_wrapper .form_field {margin-bottom:5.8rem;}
    .findid_wrapper .form_field .valid_check {font-size:2.6rem;line-height:3rem;bottom:-3.5rem;font-weight:normal;}
    .findid_wrapper .form_field .valid_check.error {font-weight:normal;}
    .findid_wrapper .form_field .valid_check.domain_check.error {font-weight:normal;}
    .findid_wrapper > .form_field.last {margin-bottom:2rem;}
    .findid_wrapper .btn_area {margin-top:8.6rem;}
    
    .find_pw_wrap .form_field {margin-bottom:5.8rem;}
    .find_pw_wrap .form_field .valid_check {font-size:2.6rem;line-height:3rem;bottom:-3.5rem;}
}


/* 아이디 찾기 결과 */
.login_result_area {background:var(--white);padding:2rem 0;border-radius:1rem;text-align: center;}
.login_result_area p {font-weight: 700;font-size: 1.5rem;line-height: 2.4rem;margin-bottom:1.2rem;}
.login_result_area > div {margin-bottom:.4rem;}
.login_result_area > div span {font-weight: 400;font-size: 1.5rem;line-height: 2.4rem;display:inline-block;}
.login_result_area > div span.label {color:#959595;padding-right:1.3rem;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .login_result_area {padding:4.4rem 0 5.6rem 0;}
    .login_result_area p {font-size: 3rem;line-height: 4rem;margin-bottom:3.4rem;}
    .login_result_area > div span {font-size: 3rem;line-height: 4rem;}
    .login_result_area > div span.label {padding-right:2.8rem;}
}

/* 아이디 찾기 - 커스텀 셀렉트 */
.member_container .login_input_area .custom-label {display: block;font-size:1.4rem;line-height:3rem;margin-bottom: .6rem;font-weight: 700;}
.member_container .login_input_area .custom-select {width:50%;}
.member_container .login_input_area .custom-select input {width:100%;border: 0;background: transparent;color:var(--black);}
.member_container .login_input_area .custom-select input.error {border:.1rem solid var(--btncolor-5);}
.login_input_area .custom-select__trigger {height:5.6rem;border:1px solid #ddd;color:#959595;padding:0;border-radius:1rem;z-index:11;}
.member_container .login_input_area .custom-select__trigger.error {border-width:.2rem;border-color: #85BAFF;outline: none;}
.member_container .login_input_area .custom-select__label {color:#959595;font-size: 1.5rem;}
.member_container .login_input_area .custom-select__label.selected {color:var(--black);}
.member_container .login_input_area .custom-select__options {bottom:unset;top: calc(100% - 2rem);padding-top:1.9rem;z-index:10;border:1px solid #ddd;border-radius:0 0 1rem 1rem;max-height:unset;overflow-y:unset;overflow-x:unset;}
.member_container .login_input_area .custom-select__option:hover{background-color:var(--sub-color-blue);} 
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container .login_input_area .custom-label {font-size:2.8rem;line-height:4rem;margin-bottom:1.6rem;}
    .member_container .login_input_area .custom-select input.error {border:.2rem solid var(--btncolor-5);}
    .member_container .login_input_area .custom-select__trigger {height:9.2rem;border:.2rem solid #ddd;}
    .member_container .login_input_area .custom-select__label {font-size: 3rem;line-height:3rem;}
    .member_container .login_input_area .custom-select__trigger::after {right:4.2rem;}
    .member_container .login_input_area .custom-select__option {font-size:3rem;line-height:3rem;padding:3.2rem 3rem;color:#444;}
    .member_container .login_input_area .custom-select__option:focus,
    .member_container .login_input_area .custom-select__option:active {background:var(--sub-color-blue);}
    .member_container .login_input_area .custom-select__options {padding:2rem 0 0 0;border:.2rem solid #ddd;max-height:40rem;overflow-y:auto;overflow-x:auto;}
}


/* 비밀번호 찾기 */
.pw_result_area {background:var(--white);padding:2.5rem 0 3.9rem 0;border-radius:1rem;text-align: center;}
.pw_result_area img {width:4rem;height:auto;margin:0 auto 1rem;}
.pw_result_area p {font-size: 1.5rem;line-height: 2.4rem;}
.pw_result_area p > span {font-weight:700;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .pw_result_area {padding:4.5rem 0 7.3rem 0;}
    .pw_result_area img {width:8rem;height:auto;margin:0 auto 3.2rem;}
    .pw_result_area p {font-size: 3rem;line-height: 4rem;}
    .find_pw_wrap .btn_area {margin-top:6.4rem;}
}


/* 비밀번호 변경 */
.member_container .change_pw_area {}
.member_container .change_pw_area .form_field {margin-bottom:2.8rem;position:relative;}
.member_container .change_pw_area .form_field input.error {border:.1rem solid var(--btncolor-5);}
.member_container .change_pw_wrap .btn_area {margin-top:5rem;}
.member_container .change_pw_area .form_field .valid_check {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);}
.member_container .change_pw_area .form_field .error_text {position:absolute;bottom:-2.3rem;left:2rem;font-size:1.2rem;line-height:2.4rem;color:var(--btncolor-5);}
.member_container .change_pw_area .form_field .valid_check span {color:#959595;display:inline-flex;gap:.3rem;padding-right:.7rem;align-items: center;font-size:1.2rem;line-height:2.4rem;}
.member_container .change_pw_area .form_field .valid_check span svg {width:1rem;height:auto;}
.member_container .change_pw_area .form_field .valid_check span.valid { /* 조건 충족 시 */color: var(--main-blue-1); }
.member_container .change_pw_area .form_field .valid_check span.valid svg path { /* 조건 충족 시 */stroke: var(--main-blue-1); }
.member_container .change_pw_area .form_field .valid_check span.error { /* 조건 미충족 시 (변경 버튼 클릭 시) */color: var(--btncolor-5); }
.member_container .change_pw_area .form_field .valid_check span.error svg path { /* 조건 미충족 시 (변경 버튼 클릭 시) */stroke: var(--btncolor-5); }
.member_container .change_pw_area .form_field .valid_check.error { /* 조건 미충족 시 */color: var(--btncolor-5);}
.member_container .change_pw_area .form_field .valid_check.success {color: var(--main-blue-1);}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .member_container .change_pw_area .form_field {margin-bottom:5.8rem;}
    .member_container .change_pw_area .form_field input.error {border:.2rem solid var(--btncolor-5);}
    .member_container .change_pw_area .form_field .valid_check {font-size:2.5rem;line-height:3rem;bottom:-3.5rem;}
    .member_container .change_pw_area .form_field .valid_check span {gap:.7rem;padding-right:1rem;font-size:2.5rem;line-height:3rem;}
    .member_container .change_pw_area .form_field .valid_check span svg {width:1.20rem;}
    .member_container .change_pw_area .form_field .error_text {font-size:2.5rem;line-height:3rem;bottom:-3.5rem;}
    .member_container .change_pw_wrap .btn_area {margin-top:8.6rem;}
}


/* 회원가입 상단 영역 */
.join_top_area {margin:4.5rem 0;position:relative;}
.join_top_area ul {display:flex;justify-content: space-between;}
.join_top_area ul li {color:#919FBC;text-align: center;flex:1;}
.join_top_area ul:before {display:block;content:"";width:calc(100% - 12.5rem);height:.2rem;background:#C0C9DB;position:absolute;top:1rem;left: 50%;transform: translate(-50%, 0);}
.join_top_area ul li.past {color:var(--main-blue-1);}
.join_top_area ul li.active {color:var(--main-blue-1);}
.join_top_area ul li > span {display:inline-block;background:#C0C9DB;border-radius:50%;width:1.6rem;height:1.6rem;position:relative;}
.join_top_area ul li.active > span:after {display:block;content:"";background-image:url('/assets/img/join_check.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;width: 2.4rem;height: 2.4rem;left: -.4rem;top: -.4rem;}
.join_top_area ul li.past > span:after {display:block;content:"";background-image:url('/assets/img/join_past.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;width: 1.6rem;height: 1.6rem;left: 0;top: 0;}
.join_top_area ul li > p {margin-top:1.1rem;font-size:1.3rem;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .join_top_area {margin:2.4rem 0 1rem 0;}
    .join_top_area ul:before {top:1.2rem;width:calc(100% - 16.5rem);height:.4rem;}
    .join_top_area ul li > span {width:2.8rem;height:2.8rem;}
    .join_top_area ul li.active > span:after {width: 4rem;height: 4rem;left: -.6rem;top: -.6rem;}
    .join_top_area ul li.past > span:after {width: 2.8rem;height: 2.8rem;}
    .join_top_area ul li > p {font-size:2.4rem;}
}


/* 회원가입 */
.join_container {display:block;min-height: 100%;}

.agreement_cont {}
.agreement_cont .join_agree_box {margin-bottom:2.8rem;}
.agreement_cont .join_agree_box h4 {font-weight: 700;font-size: 1.5rem;line-height: 2.4rem;margin-bottom:.6rem;}
.agreement_cont .join_agree_box .agree_content {background:var(--white);padding:1.6rem .8rem 1.6rem 2rem;border-radius:1rem;border:1px solid #ddd;}
.agreement_cont .join_agree_box .agree_content .scroll_area {height:23.2rem;overflow:auto;padding-right:1.2rem;}
.agreement_cont .join_agree_box .agree_content .scroll_area::-webkit-scrollbar {width:.2rem;background:transparent;}
.agreement_cont .join_agree_box .agree_content .scroll_area::-webkit-scrollbar-thumb {width:5px;background:#D9D9D9;border-radius:5rem;}
.agreement_cont .join_agree_box .agree_content p {font-size:1.5rem;line-height:2.4rem;}
.agreement_cont .join_agree_box .form_field {margin-top:.8rem;display:flex;align-items: center;gap:.6rem;}
.agreement_cont .join_agree_box .form_field label {font-size:1.5rem;line-height:2rem;color:var(--medium-grey);}

.agreement_cont .all_agreement {background:var(--white);padding:1.6rem 2rem;border-radius:1rem;border:1px solid #ddd;margin-top:5.6rem;}
.agreement_cont .all_agreement .form_field {margin:0;display:flex;align-items: center;gap:.6rem;}
.agreement_cont .all_agreement .form_field label {font-size:1.5rem;line-height:100%;color:var(--medium-grey);}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .agreement_cont .join_agree_box h4 {font-size:3rem;line-height:4rem;margin-bottom:1.4rem;}
    .agreement_cont .join_agree_box .agree_content .scroll_area {padding-right:1rem;}
    .agreement_cont .join_agree_box .agree_content .scroll_area::-webkit-scrollbar {width:.6rem;}
    .agreement_cont .join_agree_box .agree_content {padding:3em 2rem 4.2rem 3rem;}
    .agreement_cont .join_agree_box .agree_content p {font-size:3rem;line-height:4rem;}
    .agreement_cont .join_agree_box .form_field {margin-bottom:3.8rem;gap:1rem;margin-top:1.4rem;}
    .agreement_cont .join_agree_box .form_field label {font-size:2.8rem;line-height:4rem;}
    .agreement_cont .all_agreement {padding:2.6rem 3rem 2.7rem 3rem;}
    .agreement_cont .all_agreement .form_field {gap:1rem;}
    .agreement_cont .all_agreement .form_field label {font-size:2.8rem;line-height:100%;margin-bottom: .4rem;}
}


/* 회원가입 완료 */
.join_result_area {background:var(--white);padding:2rem 0;border-radius:1rem;text-align: center;}
.join_result_area p {font-size: 1.5rem;line-height: 2.4rem;}
.join_result_area img {width:4rem;height:auto;margin:0 auto 1rem;}
.join_result_area > div {margin-bottom:.4rem;}
.join_result_area > div span {font-weight: 400;font-size: 1.5rem;line-height: 2.4rem;display:inline-block;}
.join_result_area > div span.label {color:#959595;padding-right:1.3rem;}
@media screen and (max-width:1023px) { /* Mobile, Tablet */
    .join_result_area {padding:4.4rem 3rem 5.6rem 3rem;}
    .join_result_area p {font-size: 3rem;line-height: 4rem;}
    .join_result_area img {width:8rem;height:auto;margin:0 auto 3.2rem;}
    .join_result_area > div span {font-size: 3rem;line-height: 4rem;}
    .join_result_area > div span.label {padding-right:2.8rem;}
}