#login-logo{
    height: 25%;
    width:100%;
    top:3%;
    font-size: 7vmax;
    color: #3493e5;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    position: absolute;
}

#login-logo span{
    font-size: 1vmax;
    color: #074881;
    vertical-align:bottom;
    margin-top:4.5vmax;
}

#login-box{
    height: 50%;
    width:50%;
    top:30%;
    left:25%;
    background: white;
    box-shadow: 0 0 7px 1px #c5c5c5;
    overflow: hidden;
    border-radius: 2vmax;
    position: absolute;
}

#login-box-slider{
    height: 130%;
    width:200%;
    top:0;
    left:0;
    /*right:0;*/
    position: absolute;
}

#login,#register{
    height: 100%;
    width:50%;
    top:0;
    background: #f8f9fe;
    position:absolute;
}

#login{
    left: 0;
}

#register{
    right:0;
}

#login-user-name-box,#login-password-box,#login-captcha-box,
#register-user-name-box,#register-password-box,#register-confirm-password-box,#register-captcha-box{
    height: 13%;
    width:80%;
    left: 10%;
    position: absolute;
}

#login-forget-password{
    height:7%;
    width:30%;
    top:24%;
    right:5%;
    font-size:2vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    position: absolute;
}

#login-forget-password a{
    color:#3b8bcf;
    text-decoration: none;
}

#login-forget-password a:hover{
    color: #554ccd;
}

#login-user-name-box,#register-user-name-box{
    top:9%;
}

#login-password-box,#register-password-box{
    top:24%;
}

#login-captcha-box,#register-confirm-password-box{
    top:39%;
}

#register-captcha-box{
    top:54%;
}

#register-user-agreement-box{
    height:10%;
    width:100%;
    top:70%;
    font-size:2.2vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    position: absolute;
}

#register-user-agreement-checkbox{
    height:2.2vmin;
    width:2.2vmin;
    border-radius: 0.2vmin;
    border:0;
    box-shadow: 0 0 0 1px #00559f;
    margin-right: 0.8vmin;
    background-color: #ddeafc;
    opacity: 0.3;
    cursor:pointer;
}

#register-user-agreement-checkbox:hover{
    box-shadow: 0 0 4px 1px #00559f;
    background-color: #c6dffd;
}

.checked #register-user-agreement-checkbox{
    background-color: #3b8bcf;
    box-shadow: 0 0 0 1px #3689d0;
    background-image:url(../img/checked.svg);
    background-size: contain;
}

.checked #register-user-agreement-checkbox:hover{
    box-shadow: 0 0 4px 1px #0561b1;
}

#register-user-agreement-box a{
    color:#3b8bcf;
    text-decoration: none;
}

#register-user-agreement-box a:hover{
    color: #554ccd;
}

#login-tip,#register-tip{
    height: 6.3%;
    width:45%;
    top:5%;
    left:25%;
    font-size:2vmin;
    color:red;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    position: absolute;
}

.login-switch-button,#login-button,#register-button{
    font-size:2vmin;
    color:white;
    background: #4a9be0;
    box-shadow: 0 0 0 1px #3b8bcf;
    box-shadow: 0 0 4px 1px #c5c5c5;
    overflow: visible;
    white-space:nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor:pointer;
}

.login-switch-button{
    height:6.3%;
    width:15%;
    top:5%;
    right:calc(10% + 2px);
    border-radius: 1vmin;
}

#login-button,#register-button{
    height:7.2%;
    width:60%;
    left:20%;
    border-radius:1.2em;
}

#login-button{
    top:60%;
}

#register-button{
    top:84%;
}

.login-switch-button:hover,#login-button:hover,#register-button:hover{
    background: #67b0ee;
}

.login-switch-button:active,#login-button:active,#register-button:active{
    background: #3f8aca;
    box-shadow: none;
}

.login-input-box,.login-input-box-placeholder{
    height: 50%;
    width: calc(100% - 3.4vmin);
    border-radius:1em;
    border:0;
    padding:0 1.7vmin 0 1.7vmin;
    font-size:2.5vmin;
    outline:none;
}

.login-input-box{
    bottom:0;
    position: absolute;
    box-shadow:0 0 0 1px #808080;
    color:inherit;
    background-color:#ebebeb;
    opacity:0.5;
}

.login-input-box-placeholder{
    bottom:0;
    position: absolute;
    color: gray;
    display: flex;
    align-items: center;
}

.captcha-img{
    height: 50%;
    width:25.3125%;
    bottom:0;
    left:1px;
    box-shadow: 0 0 0 1px #818181;
    background: #bcbcbc;
    position: absolute;
    cursor: pointer;
}

.login-captcha-input-box,.login-captcha-input-box-placeholder{
    width:63%;
    right:0;
}