@charset "utf-8";

.login {
    position:relative;
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.login .login__title {
    font-size:20px;
    text-align:center;
    color:#222;
    font-weight:500;
}
.login .login__content {
    position:relative;
    margin-top:1rem;
}
.login .login__frmbox {
    position:relative;
    width:100%;
}
.login .login__frmbox + .login__frmbox {
    margin-top:0.5rem;
}
.login .login__btnbox {margin-top:0.5rem}
.login .btn {
    width:100%;
    height:2.5rem;
    line-height:2.5rem;
}
.login .login__btnbox__ul {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;    
    align-items:center;
    width:100%;
    margin-top:0.5rem;
}
.login .login__btnbox__ul li {width:50%;}
.login .login__btnbox__ul li:nth-child(1) {padding-right:5px}
.login .login__btnbox__ul li:nth-child(2) {padding-left:5px}

.join {
    position:relative;
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.join .join__frmbox {width:100%;}
.join .join__frmbox + .join__frmbox {margin-top:0.55rem}
.join .join__frmbox .join__label {
    display:block;
    position:relative;
    width:100%;
    font-size:0.65rem;
    color:#000;
    font-weight:500;
    margin-bottom:5px;
}
.join .join__cont.cont--btnbox {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
.join .join__cont + .join__cont {margin-top:0.5rem}
.join .join__cont.cont--btnbox .frminput {
    width:calc(80% - 5px);
    margin-right:5px;
}
.join .join__cont.cont--btnbox .btn {
    width:20%;
    padding-left:0;
    padding-right:0;
}
.join .join__btnbox {
    position:relative;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    margin-top:0.9rem;
}
.join .join__btnbox .btn {width:calc(50% - 5px);}
.join .join__btnbox .btn:last-child {margin-left:auto;}
.join .join__agreebox {    
    position:relative;
    padding-top:1rem;
    margin-top:1rem;
    border-top:1px solid #ddd;
    font-size:0.7rem;
}
.join .agreebox__all {margin-bottom:0.8rem}
.join .agreebox__check {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    width:100%;
    flex-direction:row;
    align-items:center;
}
.join .agreebox__check .md-checkbox {width:80%}
.join .agreebox__check .btn {    
    font-size:0.6rem;
    padding:5px 10px;
    line-height:normal;
    height:auto;
    width:20%;
}
.join .agreebox__check ~ .agreebox__check {margin-top:0.4rem}

.join__frmbox p {font-size:0.7rem; margin-top:0.4rem;}