html, body { width:100%; height:100%; overflow:hidden; } 
body { font-family:Arial,Helvetica,Tahoma,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei"; }
body { background:linear-gradient(to top,#0085E8 5%,#bddaef 30%,#6eb7ed 50%,#bddaef 70%,#0085E8 95%); }

.l{ float:left; } .r{ float:right; } .c{ clear:both; }
.tl{ text-align:left; } .tr{ text-align:right; } .tc{ text-align:center; }
.gr3, a.gr3{ color:#333; } .gr6, a.gr6{ color:#666; } .gr9, a.gr9{ color:#999; } .grc, a.grc{ color:#CCC; }
.help, .hand{ cursor:pointer; }
.small{ font-size:small; }

.login-container { width:100%;height:100%; overflow:hidden; }
.login-background { min-width:250px; width:820px;height:420px; position:absolute;left:50%;top:35%; margin-left:-410px; margin-top:-100px;}
.login-col2 { display:flex; box-sizing:border-box; height:420px; background-color:#fff; border:1px solid #fff; border-radius:0.5rem; box-shadow:0 0 8px #eeeeee; }
.login-col2 .okey{ text-align:center; margin:1rem auto; }
.login-col2 .okey i{ font-size:6rem; color:#17935d; }
.login-cpics, .login-cform {display:flex; flex-direction:column; box-sizing: border-box; }
.login-cpics { width:480px; padding:1px; border-radius:0.5rem; background:linear-gradient(33deg,#0071bc 5%,#7ec7fd 25%,#EEE 43%,#bdddf4 80%,#FFF 100%); }
.login-cpics h1{ width:100%; font-size:24px;text-align:center; margin:2rem auto; }
.login-cpics img{ max-width:180px; margin:1rem auto; }
.login-cpics .foot{ position:absolute; left:1rem; bottom:0.5rem; color:#999; }
.login-cpics .utype{ text-align:center; font-size:16px; margin:-1rem 0 1rem 0 }
.login-cform { width:360px; padding:1rem; margin-top:4rem; border-radius:0.5rem; background:linear-gradient(168deg,#FFF 0%,#FFF 80%,#CDF 90%); }
.login-cform h3{ padding:1rem 0; }
.login-cform a{ display:inline-block; }
.login-cform .msg1{ position:absolute; width:320px; top:1rem; color:#F00; background:linear-gradient(to bottom,#FFF 20%,#EEE 100%); padding:0.5rem 0; }
.login-cform .bar1{ position:absolute; width:320px; bottom:0.5rem; color:#999; }
@media only screen and (max-width:1150px){
    .login-background { width:640px; margin-left:-320px; }
    .login-cform .msg1{ width:250px; }
    .login-cform .bar1{ width:250px; }
}
@media only screen and (max-width:750px){
    .login-background { width:100%; max-width:320px; left:0;right:0; margin:-100px auto auto auto; }
    .login-col2 { display:block; width:98%;height:auto; margin:auto; }
    .login-cpics, .login-cform { width:100%;display:block; float:none;clear:both; margin:auto; }
    .login-cpics { background:none; }
    .login-cpics h1{ margin:1rem auto; }
    .login-cpics .utype{ margin:-0.5rem auto 0.2rem auto; }
    .login-cpics .foot, .login-cpics img, .login-col2 .minihid{ display:none; }
    .login-cform { width:100%; padding:1px 1rem 1rem 1rem; }
    .login-cform .msg1{ position:static; width:100%; background:none; }
    .login-cform .bar1{ position:static; width:100%; }
}
@media only screen and (max-height:550px){
    html, body { overflow-y:scroll; } 
}
.layui-form-item { position:relative; }
.layui-form-item input{ padding-left:1.5rem; }
.layui-input-prefix { position:absolute; left:5px;top:10px; }