/* common */
/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .container {width:100vw;}
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  
    .container {width:100vw;}
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    .container {width:1280px;}
 }



@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body {
    overflow-x:hidden;
    overflow-y:hidden;
    font-family: 'Pretendard-Regular';
    background-color: rgba(255,255,255,0);
}
a {
    color:#444444;
}

a:hover, a:visited, a:link, a:active {
    color:#444444;
    text-decoration: none;
}

.aui-input{padding: 0 0 8px !important; height: unset; line-height: unset; font-weight: 300; border-radius: 0;}
.aui-form{width: 450px;}
.form-tip{display: block; margin: 6px 0 0 !important; color: #ed2727 !important; letter-spacing: -.25px;}
.form-tip::before{content: '' !important; margin: 0 !important;}

.bold {
    font-weight: bold;
}

.container {
    height:auto;
    margin:0 auto;
    padding:0px;
    float:none;
}

.float-right {
    float:right;
}

.font-size-40 {
    font-size: 40px;
}

.font-size-30 {
    font-size: 30px;
}
.font-size-34 {
    font-size:34px;
}
.font-size-16 {
    font-size:16px;
}
.font-size-20 {
    font-size:20px;
}

.pt-30 {
    padding-top:30px;
}

.pt-50 {
    padding-top:50px;
}

.pt-100 {
    padding-top:100px;
}

/* frame */
.login-stage {
    width:100%;
    margin:0px;
}
.back-img {
    width:40%;
    height:100vh;
    background-color: #111111;
    float:left;
    display:flex;
    justify-content: center;
    position:relative;
}
.login {
    width:60%;
    height: 100vh;
    background-color: #ffffff;
    float:left;
    display:flex;
    justify-content: center;
    position:relative;
}
.logo {
    padding:0px;
}
.back-img .title {
    margin-bottom:0px;
}
.logo img {
    width:100%;
    filter: invert(100%);
}

/* background-section */
.back-img .title {
    color:#ffffff;
    font-size:14px;
    letter-spacing: -0.04em;
}
.back-img .logo {
    font-family: 'Rotos';
    color:#ffffff;
    font-size: 30px;
}
.center {
    top:50%;
    transform:translateY(-50%);
    position:absolute;
    width:290px;
}


/* login-section */
.login .title {
    font-size:26px;
    margin-bottom:40px;
    letter-spacing: -0.04em;
}
.choice-stage {
    display: flex;
    justify-content: center;
    margin-right:0px;
    margin-left:0px;
    letter-spacing: -0.04em;
}
.choice-stage div {
    width:230px;
    padding-right:5px;
    padding-left:5px;    
}
.choice-stage input {
    border:none !important;
}
.join-form input{
    border:none;
    border-bottom:1px solid #BBBBBB;
    margin-top:30px;
    padding-bottom:10px;
    width:25em;
    font-size:18px;
}
.join-form input:focus{
    border-bottom:1px solid #000000;
    transition: 0.3s;
    
}
.sub-chk-box {
    text-align: center;
    padding:0px !important;
}
.sub-chk-box p {
    font-size:14px;
}
.trial-chk-box {
    text-align: center;
    padding:0px !important;
}
.trial-chk-box p {
    font-size:14px;
}
input:focus {
    outline:none;
}
input[id="subs"], input[id="trial"] {
    display: none;
}
input[id="subs"] + label {
    padding-top:15px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
input[id="trial"] + label {
    padding-top:15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

input[id="subs"] + label, input[id="trial"] + label {
    background-color: #EEEEEE;
    display: block;
    height:50px;    

}
input[id="subs"]:checked + label, input[id="trial"]:checked + label {
    background-color: #222222;
    display: block;
    padding-top:15px;
    color:#ffffff;

}
input[name=inputId] {
    margin-top:50px;
}

.submit-btn {
    background-color:#222222;
    color:#ffffff;
    border-radius: 0.5em;
    padding: 14px !important;
    margin: 40px 0 20px !important;
}
.join-form p {
    padding-bottom:10px;
}
.join-form .saveId {
    float:left;
    width:auto;
}
.miss-info p {
    display: inline-block;
}
.join-text {
    padding-left:0px;
    padding-right:0px;
}
.login .center {
    width:auto;
}

/* 미디어쿼리 */
/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 575px) {  
    body {
        overflow-y: auto;
    }
    .back-img {
        width:100vw;
        height:70px;
        
    }
    .back-img .center {
        margin-top: -3px;
        padding-top:0px;
        width:90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .back-img .title {
        padding-top:10px;
        font-size:12px;
    }
    .back-img .logo {
        font-size:20px;
    }
    .logo img {
        width:80%;
    }



    
    .login {
        width:100vw;
        height: 100vh;
    }
    .login .center {
        all:unset;
        margin-top: 30px;
        width:90%;
    }
    .login .title {
        width:90vw;
    }
    .aui-form{
        width: 100%;
    }
    .join-form input {
        width:90vw;
    }
    .join-form .choice-stage {
        margin-right:0px;
        margin-left:0px;
    }
    .miss-info {
        font-size: 10px;
        letter-spacing: -0.05em;
        padding-top:4px;
    }
    .join-text {
        margin-top: -20px;
        font-size: 12px;
    }

}