@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body,div,h4,h3,h2,h1,span,br,p,a{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}
a{
    text-decoration: none;
    color: #999999;
}
input{
    border: none;
    outline: none;
    background-color: #F1FAFE;
}
html{
    font-size: 10px;
    height:100%;
    width:100%;
    overflow: hidden;
}
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 100px #F1FAFE inset;
    -webkit-text-fill-color: #666;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 100px #F1FAFE inset;
    -webkit-text-fill-color: #666;
}

.top{
    display: flex;
    margin-left:10%;
    height: 9%;
    line-height:9%;
    min-height:5.7rem;
}
.top .pic{
    margin-top:0.5rem;
}
.top .log{
    color: #666666;
    font-size: 1.8rem;
    margin-top: 1.7rem;
    line-height:2rem;
    margin-left:1rem;
    letter-spacing: 0.2rem;
}
.top .log .english{
    font-size: 1.2rem;
    letter-spacing: 0rem;
}
.box{
    background-color: #3080f8;
    width: 100%;
    display: flex;
    positon:reletive;
    /* min-height:520px; */
    height: 91%;
}
.box .tu{
    text-align: right;
    margin-left:-4rem;
    flex: 1;
    padding-top:6%;
}
.box .content{
    text-align: center;
    flex: 1;
}
.box .tu .froeasy img{
    width: 62%;
}
.box .tu .pic2 img{
    width: 82%;
}

.box .cen .biaoTi{
    border: none;
    border-radius: 0;
    height: 20px;
    line-height:20px;
    margin-bottom:15px;
    padding-top:60px;
}
.box #loginBox{
    flex: 1;
    text-align:center;
    padding-top: 8.5%;
}
.box #login{
    text-align: center;
    /* padding-top:10rem; */
}
.box #login .r-cen{
    width: 420px;
    height: 444px;
    background-image: url("../image/box.png");
    background-repeat: no-repeat;
    background-size: 100%;
    /*  margin-left:12rem ; */
    text-align:center;
    margin:0 auto;
}
.box #login .cen{
    width: 100%;
    height: 100%;
    background-image: url("../image/box3.png");
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto;
    text-align: left;
}
#loginh3{
    width: 100%;
    color: #868686;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.2rem;
}
.box .cen div{
    margin: 0 auto;
    display: flex;
    width: 70%;
    /*margin-left:5rem;*/
    margin-top:1rem;
    height: 45px;
    line-height:45px;
}
.box .cen .username{
    border: 1px solid #d1d4d5;
    border-radius: 1rem;
}
.box .cen .username .c-use{
    margin-left:0rem;
    margin-top:0rem;
    border: none;
    border-radius: 0;

}
.box .cen .username .c-use .c-c-use{
    margin-left:0rem;
    margin-top:0rem;
    border: none;
    border-radius: 0;
}
.box .cen div .name{
    /*line-height:3.8rem;*/
}
.box .cen div .ico{
    background-color:#FFFFFF;
}
.box .cen div img{
    padding-top:0.8rem;
    padding-left:1rem;
    padding-right:1rem;

}
.box .cen #yanZhengMa .shuaixin img{
    padding-top:0;
    padding-left:0;
    padding-right:0;
    width:100%;
    height:100%;
}
.box .cen #yanZhengMa{
    border: none;
}
.box .cen #yanZhengMa input{
    display: inline-block;
    height: 3rem;
    width: 100%;
}
.box .cen #yanZhengMa .code{
    color: red;
}
.box .cen #yanZhengMa p{
    border: 1px solid #d1d4d5;
    border-radius: 1rem;
    padding-left:1rem;
    flex: 1.4;
}
.box .cen #yanZhengMa .shuaiXin{
    margin-left:1rem;
    padding-left:0rem;
    border-radius: 0rem;
    flex: 1;
}
.box .cen #yanZhengMa .shuaiXin span{
    font-size: 1.2rem;
}
/*记住账号*/
.box .cen .jiZhu{
    position: relative;
    border: none;
    color: #666666;
    font-size: 1.2rem;
    margin-top:0rem;
}
.jiZhu .check{
    position: absolute;
    left: 0;
    top:0.25rem;
    cursor:pointer;
}
.jiZhu .zhangHao{
    position: absolute;
    left:1.5rem;
    cursor:pointer;
}
.jiZhu .passWord{
    position: absolute;
    right:1%;
}
.jiZhu .passWord a{
    color: #999999;
}

/*登录*/
.box .cen .login{
    /*height:3.8rem;*/
    border: none;
    margin-top:0.5rem;
}
.login input{
    width: 100%;
    height:45px;
    line-height:45px;
    background-color: #3080f8;
    border-radius:1rem;
    color: #FFFFFF;
    font-size: 1.8rem;
    letter-spacing:0.3rem;
    text-align: center;
    cursor:pointer;
}
.login input.five {
    -moz-box-shadow:inset 5px 5px 10px #36AEE3;
    -webkit-box-shadow: inset 5px 5px 10px #36AEE3;
    box-shadow: inset 5px 5px 12px #36AEE3;
}
/*没有账号*/
.box .cen .wu{
    border: none;
    border-radius: 0;
    height: 2.8rem;
    margin-top:0rem;
    font-size: 1.2rem;
    color: #999999;
}
.box .cen .wu a{
    font-size: 1.2rem;
    color:#42C2F3;
}
/*foot*/
.foot{
    background-color: #65d7f6;
    height:5%;
    line-height:40px;
    text-align: center;
}
.foot span,.foot a{
    color: #666666;
    font-size: 1.2rem;
}
/*适应不同屏幕*/
/* .center{
     position: absolute;
    right: 10%;
    top:19rem;
    width: 35rem;
    height: 37rem;
    background-image: url("../image/box.png");
    background-size:100%;
    background-repeat: no-repeat;
} */

#role_choose{
    width: 100%;
    height: 100%;
    background-image: url(../image/box3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto;
    text-align: left;
    position: relative;
}
.tanchu{
    /* display: flex; */
    padding-top: 103px;
}
.tanchu .left{
    float: left;
    /*  flex: 1; */
    text-align: center;
    margin-left:72px;
}
.threechoose{
    width: 87%;
    text-align: center;
    margin: 0 auto;
}
.tanchu .role{
    display: inline-block;
    width: 30%;
}
.tanchu img{
    width:85%;
    cursor:pointer;
}
.tanchu .right{
    float: right;
    /*  flex: 1; */
    text-align: center;
    margin-right:72px;
}
.border{
    width: 80%;
    height: 36px;
    line-height:36px;
    margin: 0 auto;
    border-radius: 0.6rem;
    color: #146980;
    font-size: 1.6rem;
    margin-top:60px;
    cursor:pointer;
}
.left .border{
    border: 1px solid #0099ff;
}
.right .border{
    border: 1px solid #069;
}
/* .border:hover{
    background-color: #35CCF3;
    color: #FFFFFF;
} */
#role_choose .fro{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 5.5rem;
    color: #999999;
    font-size: 1.2rem;
}
#codeImg{
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    height: 100%;
    width: 100%;

}

@media only screen and (max-width: 1600px) {
    .box .tu .froeasy img{
        width: 70%;
    }
    .box .tu .pic2{
        overflow:hidden;
    }
    .box .tu .pic2 img{
        width: 78%;
        overflow:hidden;
    }
    .box #loginBox{
        flex: 1;
        text-align:center;
        padding-top:8.5%;
    }
    .box .tu {
        margin-left: -4rem;
    }
}
@media only screen and (max-width: 1400px) {
    .box .tu .froeasy img{
        width: 67%;
    }
    .box .tu .pic2 img{
        width: 96%;
    }
    .box .tu {
        margin-left: -8rem;
    }
    .box #loginBox {
        flex: 1;
        text-align: center;
        padding-top: 8.5%;
    }
}
@media only screen and (max-width: 1366px) {
    .box .tu .froeasy img{
        width: 74%;
    }
    .box .tu .pic2 img{
        width: 92%;
    }
    .box #login{
        padding-top:0rem;
    }
    .top {
        margin-left: 10%;
    }
    .box .tu {
        margin-left: -2rem;
    }
}
@media only screen and (max-width: 1320px) {
    .box .tu .froeasy img{
        width: 74%;
    }
    .box .tu .pic2 img{
        width: 92%;
    }
    .box #login{
        padding-top:0rem;
    }
    .top {
        margin-left: 14%;
    }
    .box .tu {
        margin-left:4%;
    }
}
@media only screen and (max-width: 1280px) {
    .box .tu .pic2 img {
        width: 100%;
    }
    .box .tu .froeasy img{
        width: 85%;
    }
    .box .tu img{
        width: 95%;
    }
    .box #login{
        padding-top:0rem;
    }

    .top {
        margin-left: 7%;
    }
    .box .tu {
        text-align: center;
        margin-left: 4%;
    }
}
@media only screen and (max-width: 1180px) {

    .box .tu .froeasy img{
        width: 90%;
    }
    .box .tu .pic2 img{
        width: 108%;
    }
    .box #login{
        padding-top:0rem;
    }
    .box .tu .pic2{
        margin-left:0%;
    }


}

@media only screen and (max-width: 960px) {
    .box{
        height: 88%;

    }
    .box .tu .froeasy img{
        width: 100%;
    }
    .box .tu .pic2 img{
        width: 109%;
    }
    .box #loginBox{
        margin-top: 2rem;
        padding-top: 70px;
    }
    .top{
        margin-left:2%;
        min-height: 0;
    }
}
@media only screen and (max-width: 860px) {
    .box .tu{
        display: none;
    }
    .foot {
        background-color: #65d7f6;
        height: 5%;
        line-height: 50px;
        text-align: center;
    }
}
@media only screen and (max-width: 414px) {
    .top img{
        width: 90%;
    }
    .box #login .r-cen {
        height: 33rem;
        width: 30rem;
    }
    .box .cen .biaoTi {
        padding-top:4rem;
    }
    .box .cen .biaoTi {
        height: 0rem;
        line-height: 0rem;
    }
    .box .cen div {
        margin: 0 auto;
        display: flex;
        width: 70%;
        margin-top: 2rem;
        height: 3rem;
        line-height: 3rem;
    }
    form input {
        font-size: 1.2rem;
        /*width: 100%;*/
    }
    ::-webkit-input-placeholder { font-size: 1.2rem; }
    ::-moz-placeholder { font-size:1.2rem; } /* firefox 19+ */
    :-ms-input-placeholder { font-size: 1.2rem; } /* Internet Explorer 10+ */
    :-moz-placeholder { font-size: 1.2rem; }
    .box .cen div img {
        padding-top:0.5rem;
        width: 50%;
        padding-right: 2rem;
    }
    .box .cen .jiZhu {
        font-size: 1.2rem;
    }
    .login input {
        height: 2.8rem;
        line-height: 2.8rem;
        font-size: 1.8rem;
    }
    .box .cen .wu {
        margin-top: 0.5rem;
        font-size: 1.2rem;
    }
    .box .cen .wu a {
        margin-top: 2rem;
        font-size: 1.2rem;
    }
    .top .log {
        color: #666666;
        font-size: 1.2rem;
        margin-top: 0.5rem;
        line-height: 1.4rem;
        margin-left: 0rem;
        letter-spacing: 0.2rem;
    }
    .box {
        height: 87%;
    }
    .box .cen .jiZhu {
        margin-top: 0.5rem;
    }
    .foot {
        background-color: #65d7f6;
        height: 5%;
        line-height: 38px;
        text-align: center;
    }
    .foot a{
        display: none;
    }
    .foot span, .foot a {
        color: #666666;
        font-size: 1.2rem;
    }
}
@media only screen and (max-width: 320px) {
    .box {
        height: 86%;
    }
    .box #login .r-cen {
        height: 28rem;
        width: 26rem;
    }
    .box .cen div {
        height: 2.5rem;
        line-height: 2.5rem;
    }
    .box .cen div img {
        padding-right: 1.5rem;
        width: 43%;
    }
    .box .cen div {
        margin-top: 1.3rem;
    }
    .foot {
        line-height:27px;
    }
    .top .log {
        line-height: 1.3rem;
    }

}