*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; padding:0; margin:0; list-style:none; box-sizing: border-box;}
html{height:100%;}
body{background:url(img/web_login_bg.jpg) no-repeat center; background-size: cover;font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", 微软雅黑, "Lantinghei SC", STXihei, "WenQuanYi Micro Hei", Arial, sans-serif;font-size:13px;}
a{color:#6699cc; text-decoration:none;cursor:pointer;}
a:hover{color:#ff5722;}
.fl{float:left;}
.fr{float:right;}
.login{position: fixed;top: 50%;left: 50%;width: 400px; border-radius: 4px;overflow: hidden;background:hsla(0,0%,100%,.3);box-shadow: 0px 20px 60px rgba(0,0,0,0.4), 0px 0px 150px rgba(0,0,0,0.4);}
.loginbg{background-image: url('img/web_login_bg.jpg');position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;box-sizing: border-box;background-position: center center;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;-webkit-filter: blur(4px) brightness(1.0);filter: blur(4px) brightness(1.0);clip-path: inset(0);}
.loginbox{padding: 40px; background-color: #ffffff; box-sizing: border-box; Opacity:0.9; Filter:alpha(opacity=90);}
.loginbox p{margin: 5px;}
.head{background-color: rgba(255, 255, 255, 0.2);padding: 20px;position: relative;color: #fff;font-size: 35px;width: 100%;text-align:center;}
.head .name{font-size:40px;}
.head .title{font-size: 15px;display: block;}
input[type=text],
input[type=file],
input[type=password],
input[type=email], select{border: 1px solid #DCDEE0; vertical-align: middle; border-radius: 3px; height: 50px; padding: 0px 16px; font-size: 18px; color: #555555; outline:none; width:100%;}
input[type=text]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=email]:focus, select:focus{border: 1px solid #27A9E3;-webkit-box-shadow: 0 0px 5px 0 #d9d9d9;-moz-box-shadow: 0 0px 5px 0 #d9d9d9;box-shadow: 0px 0px 5px 0 #d9d9d9;}
input[type=submit],
input[type=button]{display: inline-block; vertical-align: middle; padding: 12px 24px; margin: 0px; font-size: 18px; line-height: 24px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #6699cc; border-radius: 3px; border: none; -webkit-appearance: none; outline:none; width:100%;}
#chkRemember {vertical-align:-2px;}
.submit:hover{opacity: 0.9;-webkit-box-shadow: 0px 0px 2px 0 #d9d9d9;-moz-box-shadow: 0px 0px 2px 0 #d9d9d9;box-shadow: 0px 0px 2px 0 #d9d9d9;}
hr.hr15{height: 15px; border: none; margin: 0px; padding: 0px; width: 100%;}
hr.hr20{height: 20px; border: none; margin: 0px; padding: 0px; width: 100%;}
.other {text-align:center;}
.hr:after, .hr:before {
    background-color: #ccc;
    content: "";
    width: 25%;
    height: 2px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 12px;
    margin-right: 12px;
}
/*.other a {padding:5px 10px;border:solid 1px #eee;border-radius:3px;}*/
/*.other a:hover {background:#6699cc;color:#fff;border:solid 1px #6699cc;}*/
.back {text-align: center;margin-top: 2px;}
.back a {font-size: 15px;background: #fff;padding: 10px;display: block;opacity: 0.5;}
.back a:hover {opacity: 0.9;}
.bing {position: absolute;margin-left: 5px;bottom: 5px;right:5px;background: #f1f1f1;padding: 5px 10px;border-radius: 5px;opacity: 0.8;color:#999;}
@media (max-width:500px){
    body{background: #fff;}
    .head {background: url(img/web_login_bg.jpg) no-repeat center;background-size: cover;}
    .login {width:100%;position: initial;margin-top: 0!important;margin-left: 0!important;border-radius:0;} 
    .loginbox {padding:40px 20px;}
    .bing,.loginbg{display:none;}
}