.join-box{
    margin:0 auto;
    max-width:400px;
    padding:10px 15px;
    position: relative;
     padding-top: 32px; 
}
.join-box .logo{
    margin:0 auto;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: bold;
    color:rgb(13, 134, 88);
}

/*.join-box .btn{
    border-radius: 1px;
}*/

.join-box h2 {
    font-size:1.7rem;
    font-weight: bold;
}

.join-box p {
    font-size: 1.1rem;
    font-weight: 200;
    color: #999;
    padding-top:13px;
    padding-bottom:13px;
}

.join-box  a.btn  {
    border-radius: 0;
    padding:12px 10px; 
    padding-bottom: 15px;
    font-size: 1rem; 
    width: 100%;
    margin-top:25px;
}

.join-box  .snsList a:first-child  { 
    margin-top:0;
}


.join-box  a.btn span {
    margin-left: 20px;
}

.join-box .joinEmail i {
    font-size: 1.3rem;
    padding-right: 15px; 
    position: absolute;
    left: 31%;
    font-weight: bold;
    margin-top: 4px; 
}
/* 
.join-box   a.facebook{
    border-color: #304d8a;
    background: #304d8a;
    color: #fff;
} */

    .join-box .agreeAll .checkbox { width: 90%; float: left }

.join-box   a.email{
    border-color: #e3e3e3;
    background: #fff;
    color: rgb(97, 97, 97);
}
.join-box  a.email i{ 
    color: rgb(175, 175, 175);
    font-weight: normal;
    font-size: 1.4rem;
}


.join-box .separator {
    position: relative;
    margin: 16px 0;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
}

.join-box .separator:before {
    position: absolute;
    top: 50%;
    left: 0;
    background: rgba(0,0,0,.06);
    width: 100%;
    height: 1px;
    content: "";
}

.join-box .separator span {
    display: inline-block;
    position: relative;
    background: #fff;
    padding: 0 16px;
    color: rgba(0,0,0,.54);
}

.btn-facebook { color: #fff; background-color: #304d8a; border-color: #304d8a; padding-top: 9px; }
    .btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus, .btn-facebook:active:hover, .btn-facebook:active:focus { color: #fff; background-color: #233c72; border-color: #304d8a; }
 
.btn-naver { color: #fff; background-color: #00c63b; border-color: #9f9f9f; padding-top: 9px; }
    .btn-naver:hover, .btn-naver:active, .btn-naver:focus, .btn-naver:active:hover, .btn-naver:active:focus { color: #fff; background-color: #07802b; border-color: #9f9f9f; }
.btn-kakao { color: #5b5b5b; background-color: #ffeb00; border-color: #ffdc00; padding-top: 8px; }
    .btn-kakao:hover, .btn-kakao:active, .btn-kakao:focus, .btn-kakao:active:hover, .btn-kakao:active:focus { color: #5b5b5b; background-color: #c2a700; border-color: #9f9f9f; }

.join-box a.btn-kakao{
    padding: 5px 10px;
}    

.join-box .bottom-message {
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -1px rgba(0,0,0,.06);
    background: #fff;
    width: 100%;
    height: 56px;
    text-align: center;
    line-height: 56px;
    font-size: 13px;
}
.join-box .bottom-message p{ 
    font-size: 13px;
}

.join-box .bottom-message a {
    margin-left: 16px;
    text-decoration: underline;
    color: #00cca3;
}


.joinForm .checkbox label{
    font-weight: bold; cursor: pointer;
}

.joinForm .checkbox label p{
    font-weight: normal;
    font-size: 13px; 
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 0;
    line-height: 16px;
    word-break: keep-all;
}

p.valid {
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
}

.openRule {
    color: #9d9d9d;
    /*position: absolute;*/
    right: 15px;
    z-index: 5;
    padding: 20px;
    /*top: 32px;*/
    font-size: 20px;
}

.join-box .btn-confirm{
    padding: 10px 10px;
}

.join-box .authEmail { float: right; margin-top: -42px; margin-right: 8px; font-size: 16px; padding: 5px 13px; border-radius: 3px; }

.join-box  .formIcon{
    float: right;
    margin-top: -39px;
    margin-right: 4px;
    padding:5px 15px;
    font-size: 1.4rem;
    color:#999;
}

.join-box i.fa.fa-mobile-phone.formIcon { margin-right: 7px; font-size: 1.5rem; }

.join-box .auth-time-limit { color: #f2870e; position: absolute; right: 112px; bottom: 35px;   font-size: 16px; }

.join-box input::placeholder { color: #999; }

.join-box select,
.join-box input[type="text"], .join-box input[type="email"], .join-box input[type="password"], .join-box input[type="number"], .join-box input[type="tel"] { /*border-radius: 0;*/ padding: 10px 10px; height: 48px; }

    .join-box select:disabled, .join-box input[type="text"]:disabled, .join-box input[type="email"]:disabled, .join-box input[type="password"]:disabled, .join-box input[type="number"]:disabled, .join-box input[type="tel"]:disabled { background-color: rgb(243, 243, 243); }

.join-box .form-control.warning { border-color: #f66 }

#tokenValue:disabled { background-color: rgb(249, 246, 246); }
.mList .checkbox { float: left; margin-left: 40px; }