@charset "utf-8";

html,body{margin:0px;padding:0px;width:100%;height:100%;background-color: #f6f8f9;font-size:13px;font-family: "Microsoft YaHei",Helvitica,Verdana,Tohoma,Arial,san-serif; overflow:hidden;}
.logincontainer{width:100%;height:100%;  position:absolute;}
.loginbox{position: relative;margin:0 auto;-webkit-box-shadow: 0 20px 80px 0 rgba(0,0,0,.3);box-shadow: 0 20px 80px 0 rgba(0,0,0,.3);width:1000px;height:600px; top: 50%;margin-top:-300px;}
.loginbox .left,.loginbox .right{float:left;width:500px;height:600px; overflow:hidden;box-sizing: border-box; position:relative;}
.loginbox .left{background: #3887e5;}
.loginbox .right{background: #fff;}
.loginbox .right center{font-size: 24px; font-fam3ily:"微软雅黑"; font-weight:400;margin-top: 20px;margin-bottom: 30px;color: #40485b;}

.horizontal{background-color: #dcdfe6;position: relative;display: block;height: 1px;margin: 24px 0; tex4t-align:center;}
.horizontal span{position: absolute; trans4form: translateX(-50%) translateY(-50%);line-height:20px;
background-color: #fff;padding: 0 20px;ma3rgin:-10px 20px;margin-top:-10px;left:50%;width:90px; text-align:center;margin-left:-60px;color:#303133;}

a{color:#66b1ff; text-decoration:none;}
a.btn{margin-top:30px;margin-bottom:30px;display:inline-block;display:block;wid3th: 100%;color: #fff;background-color: #409eff;border-color: #409eff;border-radius: 20px;padding: 12px 23px;text-align:center;cursor:pointer;letter-spacing:3px;}
input.btn{border:none;margin-top:30px;margin-bottom:30px;display:block;width: 100%;color: #fff;background-color: #409eff;border-color: #409eff;border-radius: 20px;padding: 12px 23px;text-align:center;cursor:pointer;letter-spacing:3px}
.loginbox .left h1{color:#fff;margin:50px 0px 0px 30px;}
.loginbox .left p{color: hsla(0,0%,100%,.6);color:#AFCFF5; margin-left:30px;}
.loginbox .left img{ position:absolute;left:-120px;bottom:-160px;width:560px;}

.loginbox .right .body{margin:30px 50px 30px 50px; backgr3ound-color:#CCCC33}
.rowitem{margin:20px 0px 25px 0px; backg3round-color:#33CCFF}
.rowitem a{display:inline-block;margin-left:20px; color:#66b1ff;}
input.user,input.pass,input.code{padding-left:36px;-webkit-appearance: none;background-color: #fff;border-radius: 4px;border: 1px solid #dcdfe6;-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;width:100%;height: 40px;line-height: 40px;outline:none;}


input.user{ background:url(images/user.png) no-repeat 8px center; background-size:24px 24px;}
input.pass{ background:url(images/pass.png) no-repeat 6px center; background-size:28px 28px;}
input.code{ background:url(images/code.png) no-repeat 8px center; background-size:20px 20px;}

input.user:focus,input.pass:focus,input.code:focus{border:1px solid #409EFF;}
.rowitem img.code{cursor:pointer;display:inline-block;margin-left:8px; vertical-align:middle;}


.tool{ text-align:center;}
.tool a{display:inline-block;margin:0px 18px 0px 18px;border-radius: 50%;width:40px;height:40px;}
.tool a img{border:0px;}
a.wechat{background:url(images/icon1.png) no-repeat center center; background-size:40px 40px;}
a.qq{background:url(images/icon2.png) no-repeat center center; background-size:40px 40px;}
a.wxwork{background:url(images/icon3.png) no-repeat center center; background-size:40px 40px;}
.gray {
    filter: grayscale(100%);
    filter: grayscale(1);
    FILTER: gray;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
/*display: flex;flex-flow: column;  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/