@import url(common.css);
@import url("../../font/dingbat_xeicon.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@charset "UTF-8";

*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
html, body {margin: 0; height: 100%; overflow: hidden;}
html {font-size: 20px;}
body{font-family: 'Open Sans', sans-serif; font-size: 0.8rem; background: url("../img/login/bg.gif") no-repeat left top / cover;}
body > form,
.LoginWrap > fieldset {height: 100%;}
#wrapper {position: relative; height: 100%;}
#wrapper h1 {position: absolute; top: 40px; left: 50px;}

.LoginWrap {position: absolute; top: 50%; left: 50%; width: 860px; height: 510px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #f4f5fa;}
.LoginWrap:before {position: absolute; top: 0; left: 0; width: 35%; height: 100%; background-color: #fff; content: "";}
.LogoBox {position: relative; float: left; padding: 80px 50px; width: 35%; height: 100%;}
.LogoBox #UserLogo {position: absolute; bottom: 50px;}
.LoginBox {position: relative; float: left; padding: 100px 80px; width: 65%; height: 100%;}
.LoginBox input[type="text"],
.LoginBox input[type="password"] {padding: 0 10px; width: 100%; height: 35px; line-height: 35px; background-color: transparent; border: none;}
.LoginBox label {font-family: "Myriad Pro"; font-size: 0.8rem;}
.phoneLoginBox {position: relative; float: left; padding: 70px 70px; width: 65%; height: 100%;}
.phoneLoginBox #checkKey {display:inline-block; padding: 15px; width: 80%; height: 60%; line-height: 35px; background-color: transparent; border: none;  border: 2px solid #3b4b83;}
.phoneLoginBox input[type="text"] {padding: 0 15px; width: 24%; height: 40px; line-height: 35px; background-color: transparent; border: none;  border: 2px solid #3b4b83;}
.phoneLoginBox label {font-family: "Myriad Pro"; font-size: 0.8rem;}
.phoneLoginBox span {font-family: "Myriad Pro"; font-size: 0.7rem; font-weight: bold; color: #7d8292;}
.phoneLoginBox span.sub {line-height: 20px; font-size: 0.55rem; }

input[type="checkbox"],
input[type="radio"]{border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
input[type="checkbox"]:focus + label:before,
input[type="checkbox"]:hover + label:before,
input[type="radio"]:focus + label:before,
input[type="radio"]:hover + label:before{/*background-color: #556496;*/ border-color: #556496;}
input[type="checkbox"]:active + label:before,
input[type="radio"]:active + label:before{-webkit-transition-duration: 0; transition-duration: 0; -webkit-filter: brightness(0.2); filter: brightness(0.2);}
input[type="checkbox"] + label,
input[type="radio"] + label{position: relative; padding-left: 50px; vertical-align: middle; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before{position: absolute; top: 50%; left: 14px; margin-top: -11px; width: 22px; height: 22px; text-align: center; color: #556496; border: 2px solid #556496; border-radius: 50%; content: '';}
input[type="checkbox"] + label:after,
input[type="radio"] + label:after{box-sizing: content-box; content: ''; background-color: #556496; position: absolute; top: 50%; left:8px; width:5px; height:5px; margin-top: -3px; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition: -webkit-transform 200ms ease-out; transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;}
input[type="checkbox"] + label:after{background-color: transparent; top: 50%; left: 19px; width: 8px; height: 3px; margin-top: -4px; border-style: solid; border-color: #fff; border-width: 0 0 3px 3px; -webkit-border-image: none; -o-border-image: none; border-image: none; -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); -webkit-transition: none; transition: none;}
input[type="checkbox"]:checked + label:after{content: ''; -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); -webkit-transition: -webkit-transform 200ms ease-out; transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;}
input[type="radio"]:checked + label:before{-webkit-animation: borderscale 300ms ease-in; animation: borderscale 300ms ease-in; background-color: white;}
input[type="radio"]:checked + label:after{-webkit-transform: scale(1); transform: scale(1);}
input[type="radio"] + label:before,
input[type="radio"] + label:after{ border-radius:50%;}
input[type="checkbox"]:checked + label:before{-webkit-animation: borderscale 200ms ease-in; animation: borderscale 200ms ease-in;}
input[type="checkbox"]:checked + label:after{border-color:#3b4b83; -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1);}

.AreaBox {line-height: 3.5rem;}
.AreaBox1 {margin-bottom: 15px;line-height: 2rem;}
.form-group.id,
.form-group.pw {position: relative; padding-left: 50px; height: 3.5rem; border-bottom: 2px solid #3b4b83;}
.form-group.pw {border-bottom: 2px solid #dbdde5;}
.form-group.id i,
.form-group.pw i {position: absolute; top: 0; left: 0; width: 50px; height: 3.5rem; line-height: 3.5rem; text-align: center; font-size: 1.15rem; color: #556496;}
.form-group.phone i {top: 0; left: 0; width: 50px; height: 3.5rem; line-height: 3.5rem; text-align: center; font-size: 1.15rem; color: #556496;}
.form-group.phone {margin-top: 20px; display: flex; align-items: center;}
.btns {margin-top: 10px;}
.btns a {display: block; width: 100%; text-align: center; font-family: "Roboto"; font-size: 0.8rem; color: #fff; background-color: #3b4b83;}
.btns a.phone {margin-bottom: 8%;}

.reBtn {margin-top: 20px;}
.reBtn a {display: block; width: 100%; text-align: center; font-family: "Roboto"; font-size: 0.8rem; color: #fff; background-color: #3b4b83;}
.reBtn a.phone {margin-bottom: 8%;}

.auth {display: block; margin-top: 50px;}
.auth .authBtn {padding: 1px 0px 6.5px; display: inline-block; width: 19%; text-align: center; font-family: "Roboto"; font-size: 0.7rem; color: #fff; background-color: #3b4b83;}



.notice {padding: 1.5rem 0 0; letter-spacing: -1px;}

/* Footer */
#footer {position: absolute; bottom: 4.5rem; left: 0; width: 100%; text-align: center;}
.copyright {margin-top: 1.5rem; color: #7d8292;}
.copyright a {color: inherit;}