body, html {
    height: 100%;
    width: 100%;
    margin:0px;
    border: 0;
}

.none{ display:none}

.bg {
    /* The image used */
    background-image: url("../images/login/back.png");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* logo */
.logo {

}

.logo .big_screen {
    z-index: 6;
    position: absolute;
    width: 100px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-300%);
}

.logo .mobile_screen {
    z-index: 6;
    width: 80px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-285%);
    position: absolute;
}

/* logo end */


@keyframes change_big{
    0%{ transform:scale(0.7);}
    100% {
        transform:scale(1);
    }
}

.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(101, 101, 101, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landscape_msg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}

.landscape_msg_text{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    text-align: center;
    color: white;
}


.box_login{
    position: absolute;
    width: 800px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .box_login{
        width: 600px;
    }
}



.award_text {
    position: absolute;
    width: 300px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -110%);
    text-align: center;
    color: red;
    font-size: 1.8em;
    height: 80px;
}

.info_text {
    position: absolute;
    width: 300px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -0%);
    text-align: left;
    color: white;
    font-size: 1em;
}

.info_box{animation:info_box_show 0.8s linear;}
@keyframes info_box_show {
    0%{ opacity:0;}
    70%{ opacity:0;}
    85%{ opacity:0.5;}
    100%{opacity:1;}
}


.login_btn img{
    position: absolute;
    width: 360px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 250%);
}

@media (max-width: 768px) {
    .login_btn img{
        width: 300px;
        transform: translate(-50%, 250%);
    }
}


.input_style {
    background:url("../images/login/input_back.png") no-repeat left top;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 360px;
    text-align: left;
    height: 60px;
    border: 0;
    border-radius: 5px;
    font-size: 24px;
    color: white;
    padding-left: 10px;
}


.account {
    transform: translate(-48%, -110%);
}

.number {
    transform: translate(-48%, 70%);
}

@font-face {
    font-family: 'YaHei';
    src: url("../fonts/Microsoft-YaHei-Bold.ttf");
}

.login_box .login_box_text{
    font-family: YaHei;
    width: 100px;
    position: absolute;
    color: white;
    font-size: 20px;
    top: 50%;
    left: 50%;
    z-index: 5;
    text-align: left;
}

.account_text{
    transform: translate(-170%, -420%);
}

.number_text{
    transform: translate(-170%, 10%);
}