*{margin: 0;padding: 0}
html{color:#333; font-family: \5FAE\8F6F\96C5\9ED1; height:100%; font-size:14px; }
input{font-family: \5FAE\8F6F\96C5\9ED1}
input[type="submit"]{border:none}
li{ list-style:none}
h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:18px; }
a{ text-decoration:none; cursor:pointer}
i,s,b,em,tt,a{ display:inline-block;* display:inline;zoom:1;text-decoration: none}
body{  width:100%; height:100%;position: relative;background:url(../images/cloudbg.jpg) no-repeat;background-size: 100% 100%;background-position: right bottom;color: #00eaff;}

.left{position: absolute;left: 0;bottom: 0;height: 100%}
.left img{height: 100%;width: auto}
.right{position: absolute;right: 0;bottom: 0;height: 100%}
.right img{height: 100%;width: 100%}
#example{width: 100%;height: 100%;z-index: 0}

header{height: 86px;position: fixed;z-index: 1;width: 100%;left: 0;top:0}
header .logo{  height: 44px;margin-top: 25px;padding-right: 20px;margin-right: 20px;display:inline-block;* display:inline;zoom:1;margin-left: 30px}
header .logo img{height: 100%}
header p{display:inline-block;* display:inline;zoom:1 ;color: #fff;font-size: 22px}

.login{position:absolute; left:59%; top:50%; margin-top: -303px;  box-sizing: border-box ;width: 566px;height: 606px;background: #fff;box-shadow: 0 0px 18px 6px rgba(81,78,125,.2);cursor: pointer;border-radius: 10px;overflow: hidden}
.title img{width: 100%;height: auto}
ul{  padding:0;position: relative;box-sizing: border-box;width: 450px;margin: 20px auto 0}
ul li{ position:relative;overflow: hidden;cursor: auto;}
ul li s{font-size: 30px!important;color: #318ff0;position: absolute;top: -5px;left: 0px;line-height: 60px;}
s .ll{ width:100%; height:52px;line-height: 52px; color: #318ff0;font-size: 30px}
ul li input{ width: 100%; line-height:56px; height:56px; text-indent:60px; font-size:17px;padding: 0; box-sizing: border-box;margin: 0 auto 24px;border:none;color: #484848;border-bottom: 2px solid #318ff0}
ul li input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {/* WebKit browsers */color: #484848;}     
ul li input:-moz-placeholder, textarea:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #484848;}
ul li input::-moz-placeholder, textarea::-moz-placeholder {/* Mozilla Firefox 19+ */color: #484848;}
ul li input:-ms-input-placeholder, textarea:-ms-input-placeholder {/* Internet Explorer 10+ */color: #484848;} 
ul li input:focus::-webkit-input-placeholder {color: transparent;}
ul .inp4{ width:200px}
.ll{ width:16px; height:16px; margin-top:5px; color: #a8b1ba;font-size: 20px;}
.layui-form-checked[lay-skin=primary] i{background-color: #1d8b88;border-color: #1d8b88}
.layui-form-checkbox[lay-skin=primary]:hover i{border-color: #1d8b88}
.layui-form-checkbox[lay-skin=primary] span{color:#a9a9a9}
.fr{ float:right}
.but-l:hover{ -webkit-opacity: 0.8;-moz-opacity: 0.8;opacity: .8;filter:alpha(opacity=80);color: #fff;}
.but-l{width:100%; height:56px;line-height: 56px; text-align:center; color: #fff;font-size:17px;border: none;cursor: pointer;margin: 38px auto 0;display: block;font-weight: 500;background: linear-gradient(to bottom right, #4e90ff , #36bbfe );box-shadow: 3px 3px 5px 2px #a5daff;border-radius: 10px}
.lg-in{min-width: 1562px}
.cbl{color: #a9a9a9;float: right}
.layui-form-checkbox[lay-skin=primary] i{border-color: #737373}
.layui-form-checked[lay-skin=primary] i{background-color: #318ff0;border-color: #318ff0}
.layui-form-checkbox[lay-skin=primary]:hover i{border-color: #318ff0}
.layui-form-checkbox[lay-skin=primary] span{color:#318ff0}
.ask{color: #308ff0;text-align: right;margin-top: 10px;font-size: 18px;display: block}
.banquan{position: absolute;width: 100%;right: 0;bottom: 10px;text-align: center;color: #9a9a9a}

@media only screen and (max-width: 1790px){
    .login{top:50%;transform:scale(0.8);transform-origin:left}
    .cir{transform:scale(0.8);transform-origin:right}
}
@media only screen and (max-width: 1528px){
    .login{top:50%;transform:scale(0.7);transform-origin:left}
    .cir{transform:scale(0.7);transform-origin:right}
}
@media only screen and (max-width: 1280px){
    html{min-width: 1280px;overflow: auto;min-height: 723px}
}

@media only screen and (max-height:799px){
    .login{top:50%;transform:scale(0.8);transform-origin:left}
    .cir{top:50%;transform:scale(0.8);transform-origin:right}
}

@media only screen and (max-height:724px){
    .logo{transform:scale(0.8);transform-origin:top}
    .login{top:50%;transform:scale(0.7);transform-origin:left}
    .cir{top:50%;transform:scale(0.7);transform-origin:right;}
}