* {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    font-family: "微软雅黑";
    background-color: white;
    overflow: hidden;
}

.pages {
    transform-origin: 0% 0%;
    width: 100%;
    height: 100%;
    background-color: #4592ff;
}


img {
    width: 100%;
}

input {
    border: 0;
    outline: none;
}

    input:focus {
        border: none;
    }

.page {
    font-size: 0;
    width: 70%;
    /* height: 86%; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /*border: 1px solid black;*/
}

.black {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
}

.page > div {
    display: inline-block;
    position: relative;
}

.bg_img {
    width: 64.5%;
    box-shadow: 10px 10px 10px rgba(58, 58, 58, 0.4);
    border-radius: 10px;
    overflow: hidden;
}

.form {
    font-size: 0;
    width: 31.6%;
    vertical-align: top;
    margin-left: 3%;
}

.title {
    position: absolute;
    top: 18%;
    left: 0%;
    width: 100%;
    font-size: 1.15rem;
    text-align: center;
    color: #6278f0;
    text-shadow: 1px 1px 3px rgba(98, 120, 240, 0.4), 2px 2px 6px rgba(98, 120, 240, 0.4);
}

.username {
    top: 33%;
}

.password {
    top: 44%;
}

.verification_code {
    top: 55%;
}

.template1 {
    position: absolute;
    width: 82%;
    height: 6.5%;
    left: 50%;
    background-color: #f7f4fb;
    font-size: 1rem;
    margin: auto;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    border-radius: 23px;
}

    .template1 > div {
        display: inline-block;
    }

.icon {
    position: relative;
    width: 6%;
    margin-left: 13%;
    vertical-align: top;
    height: 100%;
}

    .icon > img {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

.text {
    position: relative;
    height: 100%;
    width: 73%;
    text-indent: 6%;
}

    .text > input {
        position: absolute;
        width: 100%;
        height: 100%;
        background: none;
        font-size: 0.54rem;
    }

.verification_code_text {
    position: relative;
    width: 62%;
    height: 100%;
    vertical-align: top;
}

    .verification_code_text > input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: none;
        text-align: center;
        font-size: 0.54rem;
    }

.verification_code_img {
    cursor: pointer;
    position: relative;
    font-size: 0;
    width: 28%;
    height: 100%;
    vertical-align: top;
}

    .verification_code_img > img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        width: 100%;
    }

.btn {
    cursor: pointer;
    position: absolute;
    width: 82%;
    height: 6.5%;
    top: 66%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    border-radius: 23px;
    
}

    .btn > button {
        outline:0;
        font-size: 0.54rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        color: white;
        font-size: 0.64rem;


        background-color: #397FC4;
        width: 100%;
        border-radius: 10px;
        height: 40px;
        color: #fff;
        border: 0;
        cursor: pointer;
        box-shadow: 0px 10px 10px rgba(103, 135, 240,0.3);
    }

.bottom {
    color: #3963ec;
    font-size: 0;
    position: absolute;
    width: 82%;
    top: 75%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}

.remember_password {
    display: inline-block;
    width: 50%;
    font-size: 0.45rem;
}

.remember_password_icon {
    cursor: pointer;
    font-size: 0;
    width: 8%;
    display: inline-block;
}

.remember_password_text {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}

.forget_password {
    display: inline-block;
    font-size: 0.45rem;
    text-align: right;
    width: 50%;
    vertical-align: top;
}

    .forget_password > span {
        cursor: pointer;
    }

.login_tips {
    text-indent: 10%;
    position: absolute;
    width: 100%;
    font-size: 0.3rem;
    color: red;
    transform: translateY(-120%);
    -webkit-transform: translateY(-120%);
}

.login_tips-succeed {
    position: absolute;
    text-indent: 3px;
    height: 30px;
    line-height: 33px;
    border: 1px solid #5e8800;
    color: #fff;
    background-color: #62b600;
    border-radius: 5px;
    width: 306px;
    margin-top: -35px;
}
.fa-question-circle:before{content:"\f059"}

.reminder2 {
    text-indent: 10%;
    position: absolute;
    width: 100%;
    font-size: 0.3rem;
    color: red;
    transform: translateY(120%);
    -webkit-transform: translateY(120%);
    text-align: right;
    display: none;
}

.statistics {
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px 36px;
}

.page2 {
}

    .page2 > div {
        display: inline-block;
    }

.left {
    width: 69.45%;
}

.right {
    width: 200px;
}

.list {
}

    .list > .list_text {
        display: inline-block;
        width: 24.318%;
        background-color: #ffbf8f;
        border-radius: 10px;
        font-size: 0;
    }

.list_text {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.bottom_text {
    color: #a7a7a7;
    font-size: 0.45rem;
    position: absolute;
    width: 82%;
    top: 90%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
.btnlogin button[disabled] {border: 1px solid #eeecec;background: #eeecec;color: #9f9f9f;text-shadow: 0 1px 0 #fff;cursor: default;}
.btn >.active{background-image: url(../../images/loading1.gif);background-repeat: no-repeat;background-position: center 10px;z-index:10;background-color:#eeecec;box-shadow: 0px 10px 10px rgba(103, 135, 240,0.0);}
.active>span{
    opacity:0;
}