*{transition:all .5s;}
html,body{ height: 100%;}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}   
.flex{display: flex;}
.flex-1{flex: 1;}
.layout{height: 100%;background: url(../imgs/bg.jpg) no-repeat center center; background-size: cover; position: relative;}
.layout::before{ position: fixed; left: 0; top: 0; right: 0; bottom: 0;background:rgba(0,0,0,.2); display: block; content: ''; z-index: 1;}
.loginPanel{ position: relative; z-index: 500;}
.logo{padding-top: 30px;}
.m-center{margin: 0 auto;}
.loginBox{width: 700px; background:rgba(255,255,255,.7); min-height:600px;overflow: hidden;}
.loginBox .panel{ display: none;width: 400px;}
.loginBox .panels{width: 400px;}
.loginBox .loginTop{background:rgba(255,255,255,.8);box-shadow: 0 0 20px rgba(0,0,0,.3); display: flex;justify-content: center;}
.loginTop .item{background:url(../imgs/item.png) no-repeat center center;height: 88px; border-radius: 7px;color: #000; font-size: 16px;width: 33.3333%; display: flex; justify-content: center;}
.loginTop a{ display: block; margin-top: 27px; width: 138px;text-align: center; color: #000;}
.loginTop .active a::after{display: block;content: '';bottom: 0; left:5%; width: 90%; position: absolute; height:3px;background-color: #1164fb;border-radius: 2px;}

.shadow{box-shadow:0 10px 20px rgba(0,0,0,.3);}
.loginBox .panel .box{ overflow: hidden;border-radius:8px;}
.loginBox .panel .box .ipx{ width: 100%; height:50px; line-height: 50px; background-color: #fff;border: none;padding: 0 10px;}
/* .loginBox .panel .box .ipx.code{width:80%;}*/
.loginBox .panel #sendCode{color: #999; width: 140px; height:50px; line-height: 50px; padding: 0 10px;} 
.mt30{margin-top:32px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt100{margin-top: 100px;}
.w{width: 100%;}
.btn{padding: 12px 0; text-align: center;border:none; outline: none; cursor: pointer; font-size: 16px;}
.btn:hover{ opacity: .9;}
.btn-primary{background-color:#1164fb; color: #fff;}
.btn-white{background-color: #fff; color: #000000;}
.plr20{padding-left: 20px; padding-right: 20px;}
.other{ display: flex; justify-content:center; align-items: center; color: #cbcbcb;}
.other::after,.other::before{display: block;content: ''; width:32%; height:1px; background: #cbcbcb;}
.qrcode img{width: 284px;}