*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body{background-color: #bcddea;color: #555;font: 12px/1.5 arial,helvetica;-webkit-font-smoothing: antialiased;}

body{background:#d1e6f9;font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
article,aside,bodyer,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display: block;}

body,code,dd,div,dl,dt,form,html,p,pre,td,th,ul{margin: 0;padding: 0;word-wrap: break-word;}
ul{margin: 0;padding: 0;}
li,ul{list-style: none;}
a{color: #333;text-decoration: none;}
a:hover{text-decoration: none;}

.clearfix:after{clear: both;display: block;visibility: hidden;height: 0;content: "";}
.z{float: left;}
.y{float: right;}
.mgr{margin-right: 15px!important;}
.mgb{margin-bottom: 15px!important;}
.mgb6{margin-bottom: 6px!important;}
.mgb10{margin-bottom: 10px!important;}
.mgb12{margin-bottom: 12px!important;}
.mgr3{margin-right: 3px!important;}
.mgr5{margin-right: 5px!important;}


input[type=checkbox].checkbox {
    margin: -2px 1px 0 0;
}

input[type=checkbox].checkbox, input[type=radio].radio {
    vertical-align: middle;
}



.login-page{margin:auto;padding:8% 0 0;width:98%;max-width:360px}
.form1{position:relative;z-index:1;margin:0 auto 100px;padding:45px;max-width:360px;background:#FFF;box-shadow:0 0 20px 0 rgba(0,0,0,.2),0 5px 5px 0 rgba(0,0,0,.24);text-align:center}

/*---- 三体布局 ----*/
.bodyer .wp{min-height: 470px;display: flex;justify-content: center;align-items: center}



.form{position: relative;padding: 25px 15px;width: 100%;max-width: 320px;background-color: #fff;box-shadow: 0 0 15px 0 rgba(0,0,0,.2),0 3px 5px 0 rgba(0,0,0,.24);}
.form button{padding: 15px;width: 100%;outline: 0;border: 0;background-color: #6aafec;color: #fff;text-transform: uppercase;cursor: pointer;}
@media (min-width:320px){.form{padding-right: 30px;padding-left: 30px;}}

.form1 input{margin:0 0 15px;padding:15px;width:100%;outline:0;border:0;background:#f2f2f2;font-size:14px;font-family:Roboto,sans-serif}
.form button{padding:15px;width:100%;outline:0;border:0;background:#6aafec;color:#FFF;text-transform:uppercase;font-size:14px;font-family:"Microsoft YaHei",Roboto,sans-serif;cursor:pointer;-webkit-transition:all .3 ease;transition:all .3 ease}
.form button:active,.form button:focus,.form button:hover{background:#33a0ff}
.form .message{margin:15px 0 0;color:#b3b3b3;font-size:12px}
.form .message a{color:#4CAF50;text-decoration:none}

.error-msg{margin:0 0 15px;padding:15px;width:100%;outline:0;border:1px solid red;font-size:14px;font-family:Roboto,sans-serif}
.input-code{position:relative;display:table;width:100%;border-collapse:separate;}
.input-code-body{display:table-cell; width:100%;border:1px solid #92e89d;background-color:#fff;background-image:none;color:#555;font-size:12px;line-height:1.42857143;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.input-code-unit{position:absolute;top:1px;right:1px;display:inline-block;width:auto;border:0;border-image:none;color:#999;vertical-align:middle;text-align:center;font-weight:400;font-size:12px;line-height:28px;}
.verifycode{width:100px; height: 48px;}

div.sendemail:hover,div.resending:hover  {color: #33a0ff;}

/****** 登陆 注册 找回密码 ******/
.header-hint{z-index:5;margin: 0 0 16px;height:36px;text-align:center;}
.header-hint>span{display:block;padding:10px 12px;width:100%;border-radius:20px;background-color:#fff;box-shadow:0 0 4px #6aafec;text-align:center;}
.toptitle{color:#33a0ff;text-align:center;font-weight:bolder;font-size:2em;line-height:36px;}

.input-bus{position:relative;display:block;width:100%;}
.input-bus label{position:absolute;top:0;left:0;display:block;width:48px;border:0;background-color:#eee;color:#999;text-align:center;font-size:18px;line-height:38px;}
.input-bus input{display:block;padding:0 8px 0 58px;width:100%;outline:0;border:0;background-color:#f6f6f6;line-height:38px;}
.input-bus input:focus{box-shadow:0 0 4px #6aafec;}
.input-bus label.czmm{cursor: pointer;}

.input-bus .input-tip{position:absolute;top:0;right:0;display:block;padding:0 10px;width:auto;vertical-align:middle;text-align:left;line-height:38px;}
.input-bus .input-tip .qf-check{color:green;}
.green{color:green;}
.orange{color:orange;}
.red{color:#fd5a5a;}
.input-bus .input-control{position:relative;padding:0;}
.input-code{position:relative;display:table;width:100%;border-collapse:separate;}
.input-code-body{display:block;width:100%;height:38px;outline:0;border:0;background-color:#f2f2f2;line-height:38px;}
.input-code-unit{position:absolute;top:0;right:0;display:inline-block;width:auto;border:0;border-image:none;color:#999;vertical-align:middle;text-align:center;font-weight:400;font-size:12px;}


.verifycode{width:auto; max-width: 42%;height:38px;}
span.good{color:green;}
span.err{color:#fd5a5a;}
span.tip{color:orange;}
span.xing{margin-right:3px;color:#fd5a5a;}


.form button{padding:10px 15px;width:100%;outline:0;border:0;background-color:#33a0ff;color:#fff;font-size:12px;cursor:pointer;}

.form button[disabled]{background-color:#acb1b3;}

.form .message{color:#b3b3b3;font-size:12px;}
.form .message a{color:#33a0ff;text-decoration:none;}
.form .dsfdl{color:#33a0ff;font-size:12px;text-align: center;}
.form .dsfdl a{display:inline-block;font-size:12px;color:#33a0ff;text-decoration:none;box-shadow: 0 0 1px #999;margin:0 5px 5px 0;padding: 6px 8px;}

.input-msg{position:absolute;top:-50px;left:0;display:none;padding:10px 12px;width:100%;border-radius:20px;background-color:#fff;box-shadow:0 0 1px #999;text-align:center;}
.super-box{position: relative;}
.super-box-right{position: absolute;right: 0px;top: 0px;line-height: 38px;background-color: #eee;text-align: center;width: 45%;cursor: default;}

.success-box{
  margin: 55px auto;
  text-align: center;
}







/*==== 消息框 ====*/
.msg-group{position:fixed;top:3px;right:10px;left:10px;z-index:99999;padding:7px;-webkit-transition:top .2s cubic-bezier(.175,.885,.32,1);-o-transition:top .2s cubic-bezier(.175,.885,.32,1);transition:top .2s cubic-bezier(.175,.885,.32,1);pointer-events:none;}
.msg{display:table;overflow:hidden;margin:0 auto;padding:10px 0;border-radius:100px;background-color:#92e89d;color:#fff;line-height:20px;pointer-events:auto;transition: ease-in-out .15s}
.msg-head,.msg-body,.msg-foot{display:table-cell;vertical-align:middle;}
.msg-head{width:32px;text-align:right;}
.msg-body{padding:0 20px;text-align:left;}
.msg-foot{width:32px;color:#fff;text-align:left;}
.msg.up{animation:myfirst 5s; -moz-animation:myfirst 5s; -webkit-animation:myfirst 5s; -o-animation:myfirst 5s}
@keyframes myfirst{from{margin-top:0;display:table} to{margin-top:-80px;display:none}}
@-moz-keyframes myfirst{from{margin-top:0;display:table} to{margin-top:-80px;display:none}}
@-webkit-keyframes myfirst{from{margin-top:0;display:table} to{margin-top:-80px;display:none}}
@-o-keyframes myfirst{from{margin-top:0;display:table} to{margin-top:-80px;display:none}}
.msg.hide{display: none;}
.search-box{    width: 100%;position: relative; border-collapse: separate;}
.search-btn{text-align:center;z-index:5;position: absolute;top: 1px;right: 1px;border: 0;border-left: 1px solid #e3e3e3;line-height: 30px;outline: none;cursor: default;background-color:#f5f5f5}
.sendcode{display: block;text-align: center;}



.shake_effect{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
}
p.center{color:#fff;font-family:"Microsoft YaHei"}