@keyframes formIn {
    0% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}

html,
body {
    height : 100%;
    width  : 100%;
}

html {
    font-family : system-ui;
}

body {
    background-color : #0a0a0a;
    margin           : 0;
}

button:focus,
input:focus {
    outline-style : none;
}

.login-wrap {
    height   : 100%;
    overflow : hidden;
    position : relative;
    width    : 100%;
    z-index  : 0;
}

.login-bg {
    align-items     : center;
    display         : flex;
    height          : 100%;
    justify-content : center;
    overflow        : hidden;
    pointer-events  : none;
    position        : absolute;
    user-select     : none;
    width           : 100%;
    z-index         : -1;
}

.login-bg video {
    min-height     : 100%;
    min-width      : 100%;
    object-fit     : cover;
    pointer-events : none;
    position       : absolute;
    user-select    : none;
}

.login-fg {
    align-items     : center;
    display         : flex;
    height          : 100%;
    justify-content : flex-end;
    overflow        : auto;
    user-select     : none;
}

.login-container {
    flex-grow    : 0;
    flex-shrink  : 0;
    margin-right : 2%;
    width        : 280px;
}

.login-main {
    background-color : rgba(255, 255, 255, .12);
    border-radius    : 2px;
    box-shadow       : 0 5px 50px rgba(0, 0, 0, .2);
    overflow         : hidden;
    position         : relative;
}

.login-type {
    background-color : rgba(255, 255, 255);
    box-shadow       : 0 2px 20px rgba(0, 0, 0, .12);
    cursor           : pointer;
    height           : 80px;
    margin           : -40px -40px 0 0;
    position         : absolute;
    right            : 0;
    top              : 0;
    transform        : rotate(45deg);
    width            : 80px;
    z-index          : 1;
}

.login-type-icon {
    bottom    : 0;
    height    : 16px;
    left      : 0;
    margin    : 0 auto 8px;
    position  : absolute;
    right     : 0;
    transform : rotate(-45deg);
    width     : 16px;
}

.login-type-icon-wx,
.type-form .login-type-icon-form {
    display : none;
}

.type-form .login-type-icon-wx {
    display : block;
}

.login-type-icon svg {
    fill : #555;
}

.login-header {
    color         : #fff;
    flex-shrink   : 0;
    margin-bottom : 20px;
    padding       : 20px;
}

.login-logo {
    font-size      : 12px;
    letter-spacing : .1em;
    text-transform : uppercase;
}

.login-title {
    margin-top  : 20px;
    text-align  : center;
    text-shadow : 0 1px 15px rgba(0, 0, 0, .4);
}

.login-title-t {
    font-size      : 26px;
    letter-spacing : .25em;
    text-indent    : .25em;
}

.login-title-s {
    font-size      : 12px;
    letter-spacing : .1em;
    text-indent    : .1em;
    text-transform : uppercase;
}

.login-form {
    animation  : formIn 1s cubic-bezier(0, 0, .2, 1) forwards;
    box-sizing : border-box;
    flex-basis : 100%;
    height     : 400px;
}

.login-type-wx + .login-type-form,
.type-form .login-type-wx {
    display : none;
}

.login-type-wx {
    display         : flex;
    justify-content : center;
}

.login-type-wx iframe {
    height         : 400px;
    pointer-events : none;
    position       : absolute;
    transform      : scale(.8);
    user-select    : none;
    width          : 300px;
}

.login-type-form:only-child,
.type-form .login-type-wx + .login-type-form {
    display : flex;
}

.login-type-form {
    flex-direction : column;
    padding        : 0 20px 20px;
}

.login-message {
    background-color : #ef5735;
    border-radius    : 2px;
    color            : #fff;
    font-size        : 14px;
    padding          : 10px;
    text-align       : center;
}

.login-form-controls {
    flex-grow : 1;
}

.login-form-control {
    cursor      : text;
    display     : block;
    margin      : 20px 0;
    padding-top : 30px;
    position    : relative;
    z-index     : 0;
}

.login-input {
    background-color : transparent;
    border-style     : none;
    box-sizing       : border-box;
    color            : #222;
    flex-basis       : 100%;
    font-size        : 16px;
    height           : 32px;
    padding          : 0 10px;
    width            : 100%;
}

.login-label {
    background-color : rgba(255, 255, 255, .5);
    border           : 1px solid rgba(255, 255, 255, .4);
    border-radius    : 2px;
    bottom           : 0;
    box-sizing       : border-box;
    color            : #4279af;
    font-size        : 12px;
    font-weight      : bold;
    left             : 0;
    padding          : 10px;
    position         : absolute;
    right            : 0;
    top              : 0;
    transition       : background-color .225s cubic-bezier(.4, 0, .2, 1);
    z-index          : -1;
}

.login-input:focus + .login-label {
    background-color : rgba(255, 255, 255, 1);
}

.login-action {
    background-color : rgba(255, 255, 255);
    border-style     : none;
    border-radius    : 2px;
    box-shadow       : 0 2px 20px rgba(0, 0, 0, .2);
    box-sizing       : border-box;
    color            : #2f5978;
    cursor           : pointer;
    font-size        : 14px;
    height           : 40px;
    letter-spacing   : .4em;
    text-indent      : .4em;
    transition       : box-shadow .225s cubic-bezier(.4, 0, .2, 1);
    width            : 100%;
}

.login-action:hover {
    box-shadow : 0 3px 25px rgba(0, 0, 0, .4);
}

.login-action:disabled {
    background-color : rgb(250, 250, 250);
}

.footer-info {
    animation  : formIn .4s cubic-bezier(0, 0, .2, 1) forwards;
    color      : rgba(255, 255, 255, .25);
    font-size  : 12px;
    margin     : 40px 20px;
    text-align : center;
    transform  : scale(.8);
}


.login-bind {
    margin-bottom : 30px;
}

.login-bind-account {
    align-items     : center;
    display         : flex;
    justify-content : center;
}

.login-bind-avatar {
    border-radius : 50%;
    font-size     : 0;
    margin-right  : 10px;
    overflow      : hidden;
}

.login-bind-avatar img {
    height : 80px;
    width  : 80px;
}

.login-bind-name {
    color     : #333;
    flex-grow : 1;
    font-size : 16px;
}

.login-bind-name::before {
    content : attr(value);
}






.loginBg {
    width: 100%;
    height: auto;
}

#inputLogin {
    position: absolute;
    width: 100%;
    height: 150px;
    top: 365px;
    text-align: center;
}

.username-wrap, .pwd-wrap {
    width: 280px;
    height: 45px;
    display: flex;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    margin: 0 auto;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.usernameInput, .passwordInput {
    width: 264px;
    color: rgb(255, 255, 255);
    padding: 5px;
    box-sizing: border-box;
}

.usernameBorder, .pwdBorder {
    width: 0;
    background-image: linear-gradient(90deg,
    #215aeb 0%,
    #3689e6 24%,
    #22b7ea 50%,
    #11dcee 100%);
}

.notice {
    position: absolute;
    top: 415px;
    margin-top: 50px;
    right: 154px;
    color: rgba(250, 250, 250, 0.5);
    font-size: 12px;
    display: none;
}
.icon-yonghuming,.icon-lock{color: #ddd}
.loginBtn-wrap{
    width: 280px;
    height: 45px;
    top: 457px;
    right: 154px;
    text-align: center;
    margin: 50px auto 0 auto;
}
.loginBtn{
    width:100%;
    height:100%;
    border: solid 1px #ffffff;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    color:#fff;
}
.loginBtn:hover{
    width:100%;
    border-radius: 5px;
    border: 0;
    padding: 8px;
    cursor: pointer;
    background-image: linear-gradient(90deg,
    #215aeb 0%,
    #3689e6 39%,
    #11dcee 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.active{
    color: #3689e6
}
.removeBorder{
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.focus{
    transition:all .8s;width:280px;height:2px;
}

/* dingTalk */
.login-tab {
    text-align: center;
    margin-top: 317px;
    font-size: 18px;
}

.login-tab button {
    width: 25%;
    border: 0;
    height: 35px;
}

.login-tab button:hover {
    border: #11dcee solid 1px;
    border-radius: 5px;
    cursor: pointer;
}

.login-tab span {
    color: yellow;
}

#login_container {
    height: 400px;
}

.ding-talk-wrap {
    display: none;
}

.timingLogin {
    display: none;
}

.login .avatar {
    width: 65px;
    height: 65px;
    border-radius: 100%;
    margin-top: 14px;
}

.avatar#avatar-bind {
    position: absolute;
    margin-left: -230px;
}

.avatar#avatar-show {
    margin-top: 30px;
}

.wechat-name input{
    text-align: center;
    margin: 30px auto 0 auto;
    height: 30px;
    color: white;
    font-size: 125%;
}

.invisible {
    display: none;
}