@charset "utf-8";
/* CSS Document */
* {word-wrap:break-word;word-break:break-all;box-sizing:border-box;}
html,body {
    font-size: 14px;
    font-family: "微软雅黑", Helvetica, Tahoma, Arial, sans-serif;
    color: #000;

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /*background:#3e3e3e url(../Images/app-bg.jpg) no-repeat center bottom;
    background:#3e3e3e url(../Images/loginbg1.jpg) no-repeat center bottom;*/
    background-color: #3e3e3e;
    background-size: cover;
    overflow: hidden;
}
img,p,form {margin:0px;padding:0px;border:0px;}
ul,li{list-style:none;padding:0px;margin:0px;}
H1,H2,H3 {margin:5px 0px;padding:0px;}
input,textarea { font-size:1em;font-family: "微软雅黑","宋体","Times New Roman", Times, serif,Arial, Helvetica, sans-serif;color:#333;}
.pointer { cursor:pointer; }
.l {float:left;}
.r {float:right;}
.clear {clear:both;font-size:0; line-height:0; height:0; visibility:hidden;}
.hide{display: none;}

.login-wrap{
position: fixed;width: 400px;height:540px;z-index: 10;
left:50%;top:50%;margin-top: -270px;margin-left: -200px;
border-radius:10px;overflow: hidden;
}
.login-wrap .login-wrap-top{
float: left;width: 400px;height: 480px;background: #ffffff;padding:50px;
position:relative;overflow: hidden;
}
.login-wrap .login-wrap-top .login-wrap-top-switch{position: absolute;z-index:1;top:0;right:0;width:60px;height: 60px;padding:5px;overflow: hidden;}
.login-wrap .login-wrap-top .login-wrap-top-switch .ico{float: left;width: 50px;height:50px;cursor:pointer;overflow: hidden;}
.login-wrap .login-wrap-top .login-wrap-top-switch .qrcode{background: url(../images/qrcode-3.png) no-repeat right top;background-size: contain;}
.login-wrap .login-wrap-top .login-wrap-top-switch .pc{background: url(../images/pc-3.png) no-repeat right top;background-size: contain;}
.login-wrap .login-wrap-top h1{float: left;font-weight:bold;width: 100%;text-align: center;color: #333;font-size: 20px;line-height: 28px;overflow:hidden;}

.login-wrap .login-wrap-top .login-form{float:left;width: 100%;overflow: hidden;}
.login-wrap .login-wrap-top .login-form ul{float: left;width: 100%;padding-top:20px;}
.login-wrap .login-wrap-top .login-form .li{float: left;margin-top:20px;width: 100%;padding:5px;border:1px solid #efefef;display: flex;flex-flow: row nowrap;background-color: #fbfbfb;overflow: hidden;}
.login-wrap .login-wrap-top .login-form .li i{flex: none;font-size:20px;width: 40px;height: 40px;line-height: 40px;color:#999999;text-align: center;overflow: hidden;}
.login-wrap .login-wrap-top .login-form .li .ipt{flex:auto;width:40%;border:0;outline: none;background-color: #fbfbfb;}
.login-wrap .login-wrap-top .login-form .li img{flex: auto;width:60%;height: 40px;cursor:pointer;}
.login-wrap .login-wrap-top .login-form .ipt-btn{background-color: #ea644a;height: 50px;line-height: 50px;text-align: center;float: left;margin-top:20px;width: 100%;border:0px solid #efefef;font-size:18px;outline: none;overflow: hidden;}
.login-wrap .login-wrap-top .login-form .li-tips{color: #999999;width: 100%;padding-top:10px;text-align: center;font-size:12px;}

.login-wrap .login-wrap-top .login-qrcode{display:none;float:left;width: 100%;overflow: hidden;}
.login-wrap .login-wrap-top .login-qrcode .qrcode{float: left;width: 100%;padding:40px;margin-top: 0;position:relative;overflow: hidden;}
.login-wrap .login-wrap-top .login-qrcode .qrcode .imgbox{float: left;width: 100%;position:relative;background: url('../images/loading4.gif') no-repeat center center;overflow: hidden;}
.login-wrap .login-wrap-top .login-qrcode .qrcode .imgbox img{float: left;width: 220px;height: 220px;}


.login-wrap .login-wrap-top .login-qrcode .qrcode-status{
position: absolute;z-index:1;float: left;
top:30px;right:30px;bottom:30px;left:30px;background-color: rgba(255,255,255,.8);
display: flex;flex-flow: row nowrap;text-align: center;
justify-content: space-between;align-items: center;align-content: stretch;
overflow: hidden;}
.login-wrap .login-wrap-top .login-qrcode .qrcode-status .qrcode-expire{float: left;width: 100%;display: none;}
.login-wrap .login-wrap-top .login-qrcode .qrcode-status .qrcode-scanned{float: left;width: 100%;overflow: hidden;display: none;}
.login-wrap .login-wrap-top .login-qrcode .qrcode-status .qrcode-scanned i{
float: left;width: 100%;color:#07c160;
text-align: center;font-size:100px;padding:10px;overflow: hidden;}
.login-wrap .login-wrap-top .login-qrcode .qrcode-status .qrcode-scanned b{float: left;width: 100%;text-align: center;overflow: hidden;}


.login-wrap .login-wrap-top .login-qrcode .qrcode-tips{float: left;width: 100%;text-align: center;color: #ea644a;overflow: hidden;}

.login-wrap .login-wrap-bottom{float: left;width: 400px;height: 60px;line-height:60px;text-align:center;background: #22a7f0;color:#ffffff;overflow: hidden;}
.login-wrap .login-wrap-bottom a{color: #ffffff;}
.login-wrap .login-wrap-bottom a:hover{color: #1984bf;}

.loginbox{position: fixed;width: 800px;height:460px;z-index: 10;
left:50%;top:50%;margin-top: -230px;margin-left: -400px;
border-radius:10px;overflow: hidden;}
.loginboxl {float: left;width: 400px;height: 460px;background: #ffffff;border-right:0px solid #1898de;padding:20px 50px;overflow: hidden;}
.loginboxr {float: left;position:relative;border-left:0px solid #3ab3f6;width: 400px;height: 460px;background: #22a7f0;color:#ffffff;padding-top:130px;overflow: hidden;}
.loginboxr p{float: left;width: 100%;text-align: center;font-size:18px;padding:10px;line-height:30px;overflow: hidden;}
.loginboxr h1{float: left;width: 100%;font-size:30px;text-align: center;overflow: hidden;}
.loginboxr .powerby{float:left;position: absolute;left:0px;bottom:55px;line-height:50px;width: 100%;text-align: center;color:#0d79b4;overflow: hidden;}
.loginboxr .powerby a{color:#0d79b4;text-decoration: none;}

.loginbox .loginavatar{float: left;width: 100%;background: #ffffff;background:rgba(255,255,255,.9);height:140px;line-height: 100px;padding:20px;
color:#ea644a;font-size:100px;text-align: center;overflow: hidden;}
.loginboxl .loginboxtitle{float: left;width: 100%;padding:5px;font-size:30px;text-align:center;color:#353d47;overflow: hidden;}
.loginboxl .loginboxico{float: left;width: 100%;padding:5px 0px;text-align:center;overflow: hidden;}
.loginboxico i {margin:0px 5px;width: 30px;height: 30px;text-align:center;line-height:30px;background: #22a7f0;color:#ffffff;border-radius: 50%;overflow: hidden;}
.loginboxico i:hover{background: #ea644a;}
.loginboxl .loginform{float: left;width: 100%;text-align: center;overflow: hidden;}
.loginboxl .loginform ul li {float: left;width: 100%;padding-top:15px;overflow: hidden;}
.loginipt{float: left;height:45px;line-height: 45px;background: #fafafa;border:1px solid #eeeeee;padding:0px 10px;outline:none;overflow: hidden; }
.loginipt:focus{border:1px solid #22a7f0;}

.uname{width: 100%;}
.yzipt{width:60% }
.yzpic{float: right;width: 40%;height: 45px;border: 0px;cursor: pointer;}
.loginbtn{display:inline;width:160px;height: 50px;border-radius:25px;border:0px;font-size:18px;text-align:center;outline:none;cursor:pointer;overflow: hidden;}
.btnred{background: #ea644a;color:#ffffff;}
.btnred:hover{border:0px solid #d9563c;background: #22a7f0;}

.reloadverify{color:#69C3FF;}
img.verifyimg{border: 0px solid #ececec;cursor: pointer;}

@media screen and (min-width:320px) and (max-width:640px){
.loginbox{position: fixed;width: 400px;height:440px;left:50%;top:50%;margin-top: -220px;margin-left: -200px;background:rgba(255,255,255,.8);border-radius:10px;overflow: hidden;}
.loginboxr{display: none;}
.loginboxl{border-right:0px;}
}