@import url(./font/iconfont.css);
html,body,div,span,font,h1,h2,h3,h4,h5,h6,p,a,i,b,em,img,ul,li,ol,form,label,button {margin:0;padding:0;}
html {height: 100%;}
body {height: 100%; background: #3B95C8; position:relative; min-width: 1000px; overflow: hidden;}
body,a,input,button {color:#fff; font-size:14px; font-family: 微软雅黑, 'Microsoft YaHei', Arial, 宋体, Lucida Grande, Tahoma, sans-serif}
*,:after,:before {box-sizing:border-box}
b,strong {font-weight:bolder}
ul {list-style-type: none}
a {color: #fff}
a:link, a:visited {text-decoration: none}
a:hover {color:#fff; text-decoration: none; opacity: 0.8;}
a:active {color: #fff; text-decoration: none}

body {background:#3B95C8 url(../images/login-bg.jpg) no-repeat; background-size: cover;}

.button {margin-top: 30px; font-size:18px; color:#fff; outline:none; border:none; border-radius:22px; background:#53BED4; width:100%; height:44px; cursor:pointer; -webkit-appearance:none; /*text-indent: 1em; letter-spacing: 1em; */}
.button:hover {background: #ffb745; transition:1s all; -webkit-transition:1s all; -moz-transition:1s all; -o-transition:1s all}

.login-container {height: 100%; overflow: auto;}
.login-form {margin: 0 auto; width: 400px;}

.login-top {margin-top: 150px; margin-bottom: 60px; text-align: center;}
.login-top .logo {display:inline-block; width:180px;}
.login-top .logo img {width:100%;}

.login-footer {text-align:center; line-height: 2; margin-top: 150px; margin-bottom: 20px;}
.login-footer h3 {font-size: 16px;}
.login-footer h5 {font-size: 16px; margin-bottom: 20px;}
.login-footer p {color: #999;}


.login-type {margin-top:25px; margin-bottom: 40px; height:48px; display: flex; flex-direction:row; justify-content:center; align-items:center;}
.login-type li {flex:1; text-align:center;}
.login-type li a {display: inline-block; padding: 0 5px; height:48px; line-height:48px; font-size: 16px;}

.login-title {text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 30px;}

.login-tab {display:none;}

.inputs {position:relative; height:44px; margin-bottom: 30px; border-radius:22px; background-color: #444;}
.inputs input {width:100%; padding-left:50px; background-color:transparent; color: #fff; border: none; border-radius:22px; outline: none; font-size: 16px; height:44px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.inputs input:hover {border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.inputs i {position:absolute; left:15px; top: 50%; transform: translateY(-50%); font-size:24px;}
.inputs button {position:absolute; top:0; right:0; width:120px; height:44px; border-radius: 0 22px 22px 0;}

.checks {height: 40px; padding-top: 10px; padding-left: 18px;}
.checks a {text-decoration: underline;}
.inputs-tips {margin-bottom: 15px; padding-left: 18px;}

.login-message {text-align:center; color:#ef5350; margin: 20px 0; height: 20px;}
.login-bottom {text-align: center; font-size: 16px;}
.login-bottom a {font-size: 16px;}
.login-bottom span {padding: 0 15px;}


.qrcode-box {width:200px; height:200px; margin: 0 auto; text-align:center; position:relative;}
.qrcode-box img {width:100%; height:100%;}
.qrcode-box .loading {line-height: 200px; color: #fff;}
.qrcode-box .result {position:absolute; left:0; top:0; right:0; bottom:0; background: rgba(255, 255, 255, 0.95); color: #666; line-height:24px; display: flex; justify-content:center; align-items:center;}
.qrcode-box .result p {font-size:14px;}
.qrcode-box .result h5 {font-size:15px;}
.qrcode-tip {padding-top:20px; text-align:center; font-size:14px;}

.wxcode-box {width:300px; height:260px; margin: 0 auto;}
.wxcode-box iframe {margin-top: -16px;}

button {display:inline-block; background-color:#53BED4; color:#fff; font-size:14px; text-align:center; border: none; border-radius:0; -webkit-appearance: none; white-space: nowrap; cursor: pointer; outline: 0; -webkit-transition:border-color .3s cubic-bezier(.65,.05,.35,.5); transition:border-color .3s cubic-bezier(.65,.05,.35,.5);}

.btn_dis, .btn_dis:hover {opacity:.8; filter:alpha(opacity=80); cursor: auto; cursor:not-allowed;}

.register-boxs .inputs {margin-bottom: 20px;}

/* 模拟复选框 */
.uu-checkbox {display:inline-block}
.uu-checkbox span {display:inline-block; width: 18px; height: 18px; position: relative; vertical-align:middle}
.uu-checkbox span i {width: 18px; height: 18px; position: absolute; top: 0; left: 0; border:1px solid #d5d5d5; background-color: #fff;}
.uu-checkbox:hover span i {border:2px solid #ffb122}
.uu-checkbox span i:after {content: ''; width: 10px; height: 6px; position: absolute; top: 2px; left: 2px; border: 2px solid #fff; border-top: none; border-right: none; background: transparent; opacity: 0; -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
.uu-checkbox span input[type="checkbox"]:checked + i {border:2px solid #ffb122; background-color: #ffb122}
.uu-checkbox span input[type="checkbox"]:checked + i:after {opacity: 1}
.uu-checkbox span input[type="checkbox"] {opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor:pointer}
.uu-checkbox label {display:inline-block; padding: 0 8px; cursor:pointer; color: #fff;}

/* 动画效果 */
.hvr-underline-from-center {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden;}
.hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #57B9C8; height: 3px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out}
.hvr-underline-from-center.selected:before {left: 0; right: 0}

/* input placeholder 颜色 */
input::-webkit-input-placeholder {color: #999}
input:-moz-placeholder {color: #999}
input::-moz-placeholder {color: #999}
input:-ms-input-placeholder {color: #999}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none}


.verify-wrap {height:44px; margin-bottom: 25px; background-color:#f9f9f9; border-radius:22px; position:relative; overflow: hidden; color: #333;}
.verify-wrap .drag-btn {position:absolute; left:0; top:0; width:60px; height:44px; line-height: 44px; text-align:center; z-index:2; cursor:move; border-radius:22px; color: #fff; background-color: #53BED4;}
.verify-wrap .drag-btn i {font-size: 18px;}
.verify-wrap .suc-drag-btn {color: #fff;}
.verify-wrap .suc-drag-btn i {font-size: 22px;}
.verify-wrap .drag-progress {position:absolute;left:0;top:0;height:44px;width:0;background-color: rgba(83,190,212,0.5);color:#fff;font-size:18px;text-align:center;line-height:44px}
.verify-wrap .fix-tips, .verify-msg {width:100%; position:absolute; right:0;left:0;height:100%; z-index:1;line-height:44px;font-size:12px;text-align:center}
.verify-wrap .verify-msg {background-color:rgba(83,190,212, 1); color:#fff; display:none}