@charset "utf-8";

/* --------------------------------------- login */
/* --------------------- 회원로그인*/
#container.login {
    padding: 120px 0 150px ;
}
#container.login .inner {
    max-width: 460px ;
}

.member_ttl {
    font-size: 36px ;
    font-weight: 500;
    text-align: center;

}
.member .mem_top p {
    font-size:18px ;
    color: #757575 ;
    line-height: 1.44;    
    padding-top: 30px;
    padding-bottom: 40px;
}
.member_tap {
    display: flex;
    padding: 40px 0 30px;
    width: 100%;
}
.member_tap li {
    width: 50%;
    text-align: center;
}
.member_tap li a {
    display: block;
    width: 100%;
    font-size: 16px;
    color: #999999;
    line-height: 45px; 
    text-align: center;
    position: relative;
    border: 1px solid #dbdbdb;
    border-bottom-color: #252525;
    box-sizing: border-box;
}
.member_tap li a.on {
    border-color: #252525;
    color: #252525;
    z-index: 1;
}
.member_tap li a.on::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
}
.login_form .input_box + .input_box {
    margin-top: 30px;
}
.login_form .label {
    display: block;
    font-size:18px ;
    font-weight: 500;
    margin-bottom:10px ;
}
.login_form .input_box input[type="text"] ,
.login_form .input_box input[type="password"] {
    width: 100%;
    height: 50px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 16px;
}
.login_form .input_box input::placeholder {
    color:#999999 ;
}
.login_form .check_box {
    margin-top: 20px;
} 
.login .w100_btn_box {
    margin-top: 40px;
}
.login .w100_btn_box .find_btn,
.login .w100_btn_box .login_btn{
    width: 100%;
    display: block;
    text-align: center;
    font-size:20px ;
    color: #ffffff;
    background: #004892;
    font-weight: 500;
    line-height: 54px ;
    border-radius: 5px;
}
.login .send_btn,
.login .w100_btn_box .join_btn{
    width: 100%;
    display: block;
    text-align: center;
    font-size:20px ;
    color: #004892;
    border: 1px solid #004892;
    background: #ffffff;
    font-weight: 500;
    line-height: 54px ;
    border-radius: 5px;
    margin-top: 40px ;
}
.login .send_btn {
    margin: 10px 0;
}

.login_box .find_member {
    display: flex;
    align-items: center;
    justify-content: center;
    padding:30px 0 44px ;
}
.login_box .find_member li + li {
    margin-left: 10px;
    padding-left: 10px;
    position: relative;
}
.login_box .find_member li + li::after {
    content: '';
    display: block;
    width: 1px; height: 10px ;
    background:#dddddd ;
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
}
.login_box .find_member li a {
    color: #757575;
}
.login_box .find_member li.bold a {
    color: #252525;
}

.login_box .another_login a {
    display: block;
    width: 100%;
}
.login_box .another_login a + a {
    margin-top: 10px ;
}
.login_box .another_login a button {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    justify-content: center;
    height: 56px;
    border-radius: 5px;
}
.login_box .another_login a button i {
    background: no-repeat center;
    display: block;
    margin-right: 8px;
}
.login_box .another_login a button.kakao_login {
    background:#ffdc00 ;
    color: #3d1b1a;
}
.login_box .another_login a button.kakao_login i {
    width: 26px; height: 24px;
    background-image: url(../img/login/login_kakao.png);

}
.login_box .another_login a button.naver_login {
    background:#00c73c ;
    color: #fff;
}
.login_box .another_login a button.naver_login i {
    width: 26px; height: 26px;
    background-image: url(../img/login/login_naver.png);
}
.login_box .another_login a button.google_login i {
    width: 26px; height: 26px;
    background-image: url(../img/login/google_big.png);
    background-size: cover;
}
.login_box .another_login a button.facebook_login i {
    width: 26px; height: 26px;
    background-image: url(../img/login/facebook_big.png);
    background-size: cover;
}


/* --------------------- 비회원 로그인 */
.login .login-box .phon_num {
    display: flex;
    align-items: center;

}
.login .login-box .phon_num span {
    margin: 0 7px;
}
.login .login-box .phon_num select ,
.login .login-box .phon_num input {
    width: calc(33.33% - 12px );
    height: 50px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    font-size: 16px;
}
.login .w100_btn_box  {}


/* --------------------- 아이디, 비밀번호 찾기 */
.login .find_box .desc {
    font-size: 18px;
    color: #757575;
}
.login .find_box .radio_wrap {
    display: flex;
    padding:30px 0 26px ;
} 
.login .radio_box + .radio_box {
    margin-left: 40px;
}
.login .radio_box input {
    display: none;
}
.login .radio_box input+label {
    display: inline-block;
    padding-left: 34px;
    background: no-repeat center left;
    background-image: url(../img/common/radio.png);
    line-height: 26px ;
    font-size: 18px;
    color:#454545 ;
}
.login .radio_box input:checked+label  {
    background-image: url(../img/common/radio_on.png);
}

.login_find .login_form {
    display: none;
}
.login_find .login_form.on {
    display: block;
}

/* --------------------------------------------------  회원가입 */
#container.member_form {
    padding:110px 0 140px ;
}

#container.member_form .inner {
    max-width: 640px;
}
.member_form .mem_form_box {
    padding-top: 46px;
}
.member_form .mem_sub_ttl {
    display: block;
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 30px;
}
    .member_form .mem_sub_ttl span.red{
        color:#ee0505 ;
        font-size: 15px;
        font-weight: 400;
        display: inline-block;
        
    vertical-align: middle;
        margin-top: -6px;

    }

.member_form .mem_item + .mem_item {
    margin-top: 30px ;
}
.member_form .mem_item .label {
    font-size: 18px;
    font-weight: 500;
    display: block;
    padding-bottom: 20px;
}
.member_form .mem_item .caption {
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.3;
}
.member_form .mem_item .caption:first-of-type {
margin-top: 10px;
}
.member_form .mem_item .caption.gray {
    color:#999999 ;
}
.member_form .mem_item .caption.red {
    color:#ee0505 ;
}
.member_form .mem_item .caption.blue {
    color:#0a6ec2 ;
}
.member_form .mem_item .button_row {
    display: flex;
    align-items: center;
    
}
.member_form .mem_item .phon_num select,
.member_form .mem_item .email_select select ,
.member_form .mem_item input[type="text"],
.member_form .mem_item input[type="password"] {
    width: 100%;
    height: 50px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    font-size: 16px;
}
.member_form .mem_item input[type="text"]::placeholder,
.member_form .mem_item input[type="password"]::placeholder {
    color:#999999 ;
}
.member_form .mem_item .button_row input{
    width: calc(100% - 180px);
}
.member_form .mem_item .phon_num,
.member_form .mem_item .email_select {
    display: flex;
    align-items: center;
}
.member_form .mem_item .email_select  input,
.member_form .mem_item .email_select select {
    width: calc(33.333% - 13.333px);
}
.member_form .mem_item .phon_num  input,
.member_form .mem_item .phon_num select {
    width: calc(33.333% - 11.333px);
}
.member_form .mem_item .phon_num span {
    margin: 0 8px;
}
.member_form .mem_item .email_select select  {
    margin-right: 10px;
}
.member_form .mem_item .email_select span {
    margin: 0 6px ;
}
.member_form .mem_item div + div {
    margin-top: 13px ;
}
.member_form .mem_item .button_row button {
    width: 170px;
    margin-left: 10px;
    height: 50px;
    border: 1px solid #252525;
    border-radius: 3px;
    font-size:18px ;
    font-weight: 500;
    flex: 0 0 auto;
}

.member_form .mem_item .selected {
    width: 100%;
    height: 50px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    font-size: 16px;
    line-height: 48px;
    display: flex;
    align-items: center;
    padding:0 10px ;
    /* color:#999999 ; */
    box-sizing: border-box;
}
.member_form .mem_item .active .selected {
    color: #252525
}
.member_form .mem_item .selected .arrow {
    width: 14px; height: 9px;
    display: block;
    background: no-repeat center;
    background-image: url(../img/ico/nav_arrow.png);
    margin-left: auto;
    margin-top: 0;
}
.member_form .mem_item .select_row  {
    position: relative;
}
.member_form .mem_item .select_row ul {
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    background: #fff;
    border-radius: 3px;
    padding: 14px 10px;
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    border-top: none;
    cursor: pointer;
    box-sizing: border-box;
} 
.member_form .mem_item .select_row ul * {
    line-height:1.5 ;

}
.member_form .mem_item .select_row ul .option {
    cursor: pointer;
}
.member_form .mem_item .select_row ul strong {
    font-weight: 500;
}
.member_form .mem_item .select_row ul .dash_line {
    display: block;
    width: 100%; height: 1px;
    border-bottom: 1px dashed #dbdbdb;
    margin: 10px 0;
}
.member_form .mem_item .select_row.active ul {
    display: initial;
    z-index: 10;
}

.member_form .mem_item.agree_check {
    border: 1px solid #dbdbdb;
    border-bottom: none;
    border-radius: 3px;
}
.member_form .mem_item .detail_agree li,
.member_form .mem_item .item_check.all {
    padding:15px 18px ;
    border-bottom: 1px solid #dbdbdb;
}
.member_form .mem_item .detail_agree li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.member_form .mem_item .detail_agree li button {
    color: #999999;
    font-size: 16px;   
}
.member_form .mem_item .item_check input + label {
    font-size: 20px;
    font-weight: 500;
}
.member_form .level_check > li + li {
    margin-top: 20px;
}
.member_form .level_check input[type="radio"]{
    display: none;
}
.member_form .level_check input[type="radio"] + label {
    padding: 0;
    background: none;
    width: 100%;
    position: relative;
    display: block;
}

.member_form .level_check input[type="radio"]:checked + label > div{
    border-color: #252525;
    outline: 1px solid #252525;
} 
/* .member_form .level_check input[type="radio"]:checked + label::after  {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%; height: 100%;
    border-radius: 10px;

} */

.member_form .level_check input + label > div {
    width: 100%;
    border: 1px solid #dbdbdb ;
    border-radius: 10px;
    display: flex;
    min-height: 200px;
}
.member_form .level_check .lv_label {
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.member_form .level_check .lv_label span {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    text-align: center;
    line-height: 46px;
    font-size: 14px;
    font-weight: 500;
}

.member_form .level_check .iv_ico {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 220px ;
    width: 100%;
    margin-top: 0;
}
.member_form .level_check .iv_ico .ico {
    width:81px ; height: 67px;
    display: block;
    background: no-repeat center;
}
.member_form .level_check .silver .ico  {
    background-image: url(../img/ico/member_lv_silver.png);
}
.member_form .level_check .gold .ico  {
    background-image: url(../img/ico/member_lv_gold.png);
}
.member_form .level_check .platinum .ico  {
    background-image: url(../img/ico/member_lv_platinum.png);
}
.member_form .level_check .iv_ico strong {
    display: block;
    text-transform: uppercase;
    font-size: 30px ;
    margin-top: 26px;
}
.member_form .level_check input + label ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 10px 25px 0 ;
    box-sizing: border-box;
}
.member_form .level_check input + label ul li {
    display: flex;
    font-size:18px ;
    line-height: 1.25;
}
.member_form .level_check input + label ul li span {
    color:#757575 ;
    margin-right: 4px;
}
.member_form .level_check input + label ul li  + li {
    margin-top:8px;
}
.member_form .payment_check {
    display: flex;

}
.member_form .payment_check li {
    width: 50%;
    display: flex;
}

.member_form .payment_check input {
    display: none;
}
.member_form .payment_check input+label {
    display: block;
    width: 100%;
    background: #f9f9fa;
    border: 1px solid #eeeeee ;
    text-align: center;
    font-size: 18px ;
    font-weight: 500;
    color: #999999 ;
    line-height: 44px;
}
.member_form .payment_check input:checked+label {
    background: #fff;
    color: #252525;
    border: 1px solid #252525;
    z-index: 10;
}
.member_form .form_send_btn {
    max-width: 460px;
    margin: 60px auto 0;
}
.member_form .form_send_btn .form_btn {
    width: 100%;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 20px ;
    background-color: #004892;
    font-weight: 500;
    display: block;
    text-align: center;
    line-height: 50px;
}
/* 빌링요청 정보 */
.pay_box_show input+input{
    margin-top: 10px;
}
/* 이용약관 */
.trems_tab_menu { box-sizing:border-box; width:100%;  margin:40px 0 15px;  } 
.trems_tab_menu li{float:left;position:relative;box-sizing:border-box; width:25%;z-index:1;border-bottom:2px solid #004892 ;}
.trems_tab_menu li.selected{border-bottom:none;z-index:2;}
.trems_tab_menu li.selected a{height:37px;border:2px solid #004892 ;border-bottom:none;background:#fff;color:#004892 ;}
.trems_tab_menu li a{display:block;height:36px;margin-left:-1px;border:1px solid #ccc;border-bottom:none;background:#f8f8f8;color:#333;text-align:center;font-weight:500;line-height:36px;}

.trems_con {padding:20px;  border:solid 1px #ddd; color:#333 ; width: 100%; font-size:14px; font-weight:400; line-height:1.3;} 

.trems_con img{display: block;margin: 0 auto;}
.trems_con p {
    word-break: break-all;
}
/* 회원가입 선택 */

.member-container.member_new { margin-top:20px;text-align: center;}
.members { width:28%; margin-right:8%; height:180px;}
.members p { display:block; position:absolute; top:50%; left:50%; width:100%; text-align:center; font-size:20px; font-weight:500; line-height:21px; color:#333; transform:translate(-50%,-50%); }
.members.active  p{ color:#fff; }
.members.on  p{ color:#fff; }
.members p .block { display:block; }
.members.members_new { background:none; }
.members.members_new.active { background:#004892; }
.members.members_new.on { background:#004892; }
.members.members_old { background:none; }
.members.members_old.active { background:#004892; }
.members.members_old.on { background:#004892; }
.members.members_facebook { background:none; }
.members.members_facebook.active { background:#004892; }
.members.members_facebook.on { background:#004892; }

.member-container.member_new input[type="radio"]{ width:0; height:0;bottom:-100%; left:-100%;}

.members_new p:before { content:""; display:block; position:absolute; top:-30px; left:50%; text-align:center;  width:39px; height:35px; background:url('../img/member/member_new01.png') center; background-size:cover; transform:translate(-50%,-50%); }
.members_new.active p:before { background:url('../img/member/member_new02.png') center; background-size:cover; }
.members_new.on p:before { background:url('../img/member/member_new02.png') center; background-size:cover; }

.members_old p:before { content:""; display:block; position:absolute; top:-30px; left:50%; text-align:center;  width:55px; height:38px; background:url('../img/member/member_old01.png') center; background-size:cover; transform:translate(-50%,-50%); }
.members_old.active p:before { background:url('../img/member/member_old02.png') center; background-size:cover; }
.members_old.on p:before { background:url('../img/member/member_old02.png') center; background-size:cover; }

.members_facebook p:before { content:""; display:block; position:absolute; top:-30px; left:50%; text-align:center;  width:117px; height:23px; background:url('../img/member/member_facebook01.png') center; background-size:cover; transform:translate(-50%,-50%); }
.members_facebook.active p:before { background:url('../img/member/member_facebook02.png') center; background-size:cover; }
.members_facebook.on p:before { background:url('../img/member/member_facebook02.png') center; background-size:cover; }

.member input[type="button"] { background-color:#004892;}

/* 회원가입 양식 */
.member-container.member-form { margin-top:20px; padding-bottom:20px;}
.form-box2 input[type="radio"] { border: solid 1px #ddd; border-radius: 50%; outline:none;}
.form-box2 table td input[type="text"],
.form-box2 table td input[type="password"],
.form-box2 table td input[type="email"],
.form-box2 table td input[type="tel"],
.form-box2 table td input[type="num"]
 { width:232px;}
.form-box2 table .phone div:last-child input { width:232px; }
   
.form-box2 .terms { width:100%; max-width:100%; margin:40px 0; box-sizing:border-box; text-align: -webkit-auto;}
.member-container.member-form .agree input[type="checkbox"] { margin:-2px 10px 0 0; }