@charset "utf-8";
@import "sub.css";


.member {margin-top: 3rem;}
.member .wrapper {max-width: 580px; margin: 0 auto;}
.member .member_txt .tit {font-size: 2.25rem; font-weight: 700; margin: 4rem 0 2rem; text-align: center;}
.member .member_txt p {margin-top: 2rem; color: #555; font-size: 1.125rem; font-weight: 500; text-align: center;}
.member .member_txt .order_list {margin-top: 2rem; display: flex; gap: 20px; justify-content: center; align-items: center;}
.member .member_txt .order_list li {color: #9a9a9a; font-size: 1.125rem; font-weight: 500; text-align: center;}
.member .member_txt .order_list li.on {color: #155EE8; font-weight: 700;}
.member .member_box {display: flex; flex-wrap: wrap; margin: 50px 0;}
.member .desc {text-align: right; margin: 10px 0 0; color: #155EE8; font-size: .9375rem;}


.member_result {margin: 3.125rem 0;}
.member_result .txt_box {margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.member_result .txt_box p {font-size: 1.5rem; font-weight: 600; line-height: 1.5; text-align: center;}
.member_result .txt_box p span {color: #155EE8;}
.member_result .txt_box .sub {color: #555; font-size: 1rem; line-height: 1.5; font-weight: 500; text-align: center; margin: .1rem 0;}
.member_result .txt_box small {width: 100%; padding: 10px 10px 10px 20px; border-radius: 5px; background: #F2F3F5; line-height:1.5; position: relative; font-size: .9375rem;}
.member_result .txt_box small::before {content: "*"; position: absolute; left: 10px; top: 27%;}
.member_result .txt_box small span {color: #eb0017;}


.alert {width: 100%; position: relative; padding: 10px 10px 10px 35px; border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.5;  text-align: left;}
.alert::before {content: ""; width: 16px; height: 16px; background-size: cover; position: absolute; left: 12px; top: 12px;}
.alert.info {background: #EAF4FF; color: #0A66C2;}
.alert.info::before {background-image: url(/images/icon/ico_info.svg);}
.alert.success {background: #E9F7EF; color: #1E7B34;}
.alert.success::before {background-image: url(/images/icon/ico_success.svg);}
.alert.warning {background: #FFF5E0; color: #B26A00;}
.alert.warning::before {background-image: url(/images/icon/ico_warning.svg);}
.alert.error {background: #FFEBEB; color: #EB0017;}
.alert.error::before {background-image: url(/images/icon/ico_error.svg);}


#login-validation {position: relative;}
.login .auth_box {margin-top: 20px;}
.login .auth_box ul {display: flex; align-items: center; justify-content: center; gap: 20px;}
.login .auth_box ul li {position: relative;}
.login .auth_box ul li + li::before {content: ""; width: 1px; height: 12px; background: #bbb; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
.login .auth_box ul li a {font-size: .9375rem; color: #858585;}


.join .join_tit {width: 100%; font-size: 1.5rem; font-weight: 600; position: relative; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 2px solid #222; display: flex; align-items: center; justify-content: space-between;}
.join .join_tit ~ .join_tit {margin-top: 80px;}
.join .join_sub_tit {width: 100%; font-size: 1.125rem; color: #555;}
.join .privacy {width: 100%;}
.join .privacy .term_box {width: 100%; height: 200px; padding: 20px; overflow-Y: scroll; font-size: .875rem; color: #777; line-height: 1.5; word-break: break-word; margin: 10px 0; border-radius: 5px; border: 1px solid #ddd;}
.join .privacy .term_box::-webkit-scrollbar {width: 6px; height: 3px;}
.join .privacy .term_box::-webkit-scrollbar-thumb {background: #bbb; border-radius: 10px;}
.join .privacy .term_box::-webkit-scrollbar-track {background: #dfdfdf;}
.join .privacy .term_box .box {border: 1px solid #ebebeb; padding: 10px;}


.join_form .must {color: #155EE8;}
.join_form .join_tit {display: flex; align-items: flex-end; justify-content: space-between;}
.join_form .join_tit small {font-size: .9375rem; font-weight: 400; color: #555;}


.inp_box2 {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;}
.inp_box2 + .inp_box2 {margin-top: 20px;}
.inp_box2 label {width: 30%; font-size: 1.0625rem; font-weight: 600; padding: 17px 0;}
.inp_box2 input {width: 70%; border: none; border-bottom: 1px solid #ddd; padding: 17px 0; font-size: 1rem;}
.inp_box2 input::placeholder {color: #999;}
.inp_box2 input:focus {border-bottom: 1px solid #155EE8;}

.inp_box2 .error-message {color: #eb0017; font-size: .875rem; margin-left: 30%; padding: .75rem 0 0;}

.inp_box2 .inp_btn {width: 70%; display: flex; align-items: center; gap: 10px;}
.inp_box2 .inp_btn input {width: 100%;}
.inp_box2 .inp_btn .btn_wrap {max-width: 80px;}
.inp_box2 .inp_btn .btn_wrap .btn {width: 100%; cursor: pointer; padding: 15px 10px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: .9375rem; background: #333; border-color: #333;}

.inp_box2 .add_list {width: 70%;}
.inp_box2 .add_list li {width: auto;}

.inp_box2 .tel_list {width: 70%; display: flex; align-items: center; justify-content: space-between; gap: 5px;}
.inp_box2 .tel_list li {width: auto;}
.inp_box2 .tel_list li input {width: 100%; text-align: center;}
.inp_box2 .tel_list li .btn {width: 80px!important;}


.otp_box {border: 1px solid #ebebeb; margin-top: 2rem; padding: 2rem;}
.otp_box .otp_txt {font-size: 1rem; line-height: 1.5; text-align: center;}
.otp_box .otp_txt .blue {color: #155EE8; font-weight: 500;}
.otp_box .member_box {margin-top: 1rem;}


@media (max-width: 767px) {
    .member .member_txt .tit {font-size: 1.85rem; margin: 3rem 0 1.5rem;}


    .login .login_txt .tit {font-size: 1.75rem;}
    .login .login_txt p {font-size: .9375rem;}


    .otp_box {padding: 1.5rem .75rem;}
}