/*
공통
*/
.login_sign_wrap{
    min-height:100vh; padding-top:60px;
    display:flex; align-items:center; justify-content:center;
}
.login_container{
    max-width:330px; width:90%;
    padding:50px 0;
}
.CheckFrom>div:not(:last-of-type){ margin-bottom:20px; }

/*title/article*/
.login_title{
    display:block; text-align:center;
    font-size:28px; font-weight:600;
}
.login_wrap h2,
.sign_wrap2 h2,
.sign_wrap2_2 h2{ margin-bottom:40px; }
.sign_article{ font-size:14px; font-weight:400; margin-top:10px; }
.sign_wrap>h2+p{
    text-align:center; margin-bottom:40px;
    font-size:14px; font-weight:400;
}

.CheckFrom div>label:not(.genderCheck label){
    display:block; margin-bottom:10px;
    font-size:16px; font-weight:600;
}
.CheckFrom div input{
    height:50px; padding:0 10px;
    border-radius:5px;
} 

/*CheckFrom*/
.CheckFrom .CheckText1{ width:70%; }
.CheckFrom .CheckText2{ width:100%; }
.CheckFrom .CheckBtn{
    width:28%; height:50px; background-color:#F7F7F7;
    float:right; margin-left:2%;
    border-radius:5px;
    font-size:14px; font-weight:500;
}

/*챕터*/
.sign_wrap .chapter{
    display:flex; justify-content:center;
    margin-bottom:30px;
}
.sign_wrap .chapter li{ position:relative; }
.sign_wrap .chapter li span{
    z-index:10;
    display:block; width:30px; height:30px;
    background-color:#DEDEDE; border-radius:9999px;
    text-align:center;

    background-image:url('../../images/chapter_ico.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
}
.sign_wrap .chapter li:not(:first-of-type){ margin-left:50px; }
.sign_wrap .chapter li:not(:last-of-type)::after{
    content:''; display:inline-block;
    position:absolute; left:30px; top:50%;
    transform:translateY(-50%);
    width:50px; height:5px;
}

/*-----------------------------!!!!!!!!!!
챕터 색 구분

'active, on'class -> 색상
*/
.sign_wrap .chapter li:first-of-type::after{ background-color:#DEDEDE; }
.sign_wrap .chapter li:nth-of-type(2)::after{ background-color:#DEDEDE; }
.sign_wrap .chapter li.active span{
    background-image:url('../../images/chapter_wh_ico.png');
    background-color:#ff176b;
}
.sign_wrap .chapter li.on::after{ background-color:#ff176b; }

/*page_btns*/
.page_btns{ margin-top:50px; }
.page_btns button{
    display:inline-block; width:49%; height:50px;
    border-radius:5px;
    font-size:16px; font-weight:500;
}
.page_btns button:last-of-type{ margin-left:2%; float:right; }





/*----------------------------------------------------------------------
login_wrap
*/
.body_wrap .login_wrap{ margin:150px auto; }
.loginTabs{ display:flex; margin-bottom:15px; }
.loginTabs button{
    display:block; width:50%;
    text-align:center; padding-bottom:7px;
    border-bottom:2px solid #E8EAED;
    font-size:16px; font-weight:600;
}
.loginTabs button.active{ border-bottom:2px solid #ff176b; }

/*로그인*/
.login_wrap form{ margin-bottom:10px; }
.login_wrap form input:not(.autoLogin input[type="checkbox"]){
    width:100%; border-radius:5px;
    font-size:16px;
}
.autoLogin input, .autoLogin+input:focus{ outline:none; }
.login1{ position:relative; }
.login1 input{
    padding:24px 12px 8px 12px; margin-bottom:10px;
    font-weight:400;
}
.login1 input:focus{ padding:24px 12px 9px 12px; }
.login1 label{
    position:absolute; left:10px; top:19px;
    transition:all .2s;
    font-size:14px; font-weight:400;
}
.login1 input:focus~label, .login1 input:valid~label{ font-size:12px; top:8px; }

.autoLogin{ margin-bottom:10px; }
.autoLogin input[type='checkbox']{ accent-color:#000; vertical-align:middle; }
.autoLogin label{ font-size:14px; font-weight:400; }

.login_wrap input[type='button']{
    border:none; cursor:pointer;
    height:50px; color:#FFF;
    font-weight:500;
}

.loginFind{ margin-bottom:50px; }
.loginFind a{ display:inline-block; }
.loginFind a{ font-size:14px; }
.loginFind a:first-of-type{ font-weight:600; }
.loginFind a:first-of-type::after{
    content:''; display:inline-block;
    width:1px; height:10px; background-color:#000;
    margin:0 5px;
}

/*간편 로그인*/
.fastLogin{
    display:flex; justify-content:space-around;
    position:relative; padding:20px;
    font-size:14px; border-radius:5px;
}
.fastLogin span{
    position:absolute; left:50%; top:-15%;
    transform:translateX(-50%);
    background-color:#FFF;
}
.fastLogin a img{ width:35px; }

/*----------------------------------------------------------------------
sign_wrap

login_sign1
*/
.sign_wrap1>img{ margin:0 auto 70px auto; }
.sign_wrap1 h2{ margin-bottom:5px; }

.sign_wrap a{
    display:flex; align-items:center;
    padding:15px; border-radius:5px;
    transition:all .2s;
}
.sign_wrap a:hover{ background-color:#F7F7F7; }
.sign_wrap a:first-of-type{ margin-bottom:10px; }
.sign_wrap1 a div strong{
    font-size:16px; font-weight:600;
}
.sign_wrap1 a div p{ font-size:14px; font-weight:400; }
.sign_wrap1 a span{
    position:relative; margin-left:auto;
    width:30px; height:30px; background-color:#DEDEDE;
    border-radius:9999px;
    transition:all .2s;
}
.sign_wrap1 a:hover span{ background-color:#FF176B; }
.sign_wrap1 a span img{
    width:12px; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%) rotate(-90deg);
    vertical-align:middle; min-height:auto;
}

/*----------------------------------------------------------------------
login_sign2
login_sign2_1
login_sign2_2
*/
.sign_wrap2 ul{ margin-bottom:20px; }
.sign_wrap2 ul li a{ font-size:16px; font-weight:500; }
.sign_wrap2 ul li a img{ width:40px; margin-right:15px; }
.sign_wrap2 p span{ text-decoration:underline; }

.sign_wrap2_1 h2{ margin-bottom:5px; }

/*----------------------------------------------------------------------
login_sign2_3
*/
.sign_wrap2_3 h2{ margin-bottom:5px; }
.sign_wrap2_3 .CheckFrom div:nth-of-type(2)::after{
    content:''; display:block;
    clear:both;
}
.genderCheck{
    position:relative;
    width:48.5%; float:left;
}
.genderCheck:last-of-type{ margin-left:2%; }
.genderCheck input[type='radio']{
    appearance: none;
    cursor: pointer;
}
.genderCheck label{
    display:block; width:100%; line-height:50px;
    position:absolute; left:0; top:0;
    border:1px solid #E8EAED; border-radius:5px;
    font-size:14px; font-weight:500;
    text-align:center;
}
.genderCheck input[type='radio']:checked{ outline:none; }
.genderCheck input[type='radio']:checked+label{ border-color:#ff176b; }

.sign_wrap2_3 div:nth-of-type(3)::after{
    content:''; display:block;
    clear:both;
}
.sign_wrap2_3 div:nth-of-type(3) select{
    width:15%; height:50px;
    border-radius:5px; float:left;
}
.sign_wrap2_3 div:nth-of-type(3) input{
    width:53%; margin-left:2%;
    float:left;
}

/*----------------------------------------------------------------------
login_sign3
*/
.payment_result strong{ margin-bottom:30px !important; }
.payment_result button{
    width:150px; height:50px; border-radius:8px;
    font-size:16px; font-weight:500;
}





/*----------------------------------------------------------------------
기본 pc 스타일
*/
@media screen and (max-width:850px){
    .login_sign_wrap{ padding-top:120px; }
    .body_wrap .login_wrap{ margin:200px auto 150px auto; }
    .sign_wrap{ top:54%; }
    .sign_wrap .chapter li:not(:first-of-type){ margin-left:45px; }
    .sign_wrap .chapter li span{
        width:27px; height:27px;
        background-size:10px;
    }
    .sign_wrap .chapter{ margin-bottom:25px; }
    .sign_wrap .chapter li:not(:last-of-type)::after{ left:27px; }
}
/*모바일 스타일*/
@media screen and (max-width:767px){
    .body_wrap .login_wrap{ margin:180px auto 100px auto; }
    .payment_result button{ width:140px; }
}
@media screen and (max-width:500px){
    .CheckFrom>div:not(:last-of-type){ margin-bottom:15px; }
    .payment_result button{ width:130px; }
}
@media screen and (max-width:400px){
    .login_title{ font-size:22px; margin-bottom:30px; }
    .loginTabs button, .page_btns button,
    .login_wrap form input:not(.autoLogin input[type="checkbox"]){ font-size:14px; }
    .login1 input{ padding:15px 12px 8px 12px; }
    .login1 label{ font-size:13px; }
    .login1 label{ top:14px; }
    .sign_wrap1 a div strong,
    .sign_wrap2 ul li a{ font-size:15px; }
    .sign_wrap .chapter{ margin-bottom:20px; }
    .sign_wrap .chapter li:not(:first-of-type){ margin-left:35px; }
    .sign_wrap .chapter li:not(:last-of-type)::after{ left:27px; width:40px; }
}