html { -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; height: 100%;font: inherit;overflow-x: hidden;}
body{ background: none;}
a { background: transparent;outline: none; }
a:active,a:hover { outline: 0;}
img { border: 0;max-width:100%;height:auto;width:auto\9;-ms-interpolation-mode: bicubic;}
img.inherit { max-width:  inherit; *width: auto;}
button,input,optgroup,select,textarea { color: inherit;font: inherit;margin: 0;}
button { overflow: visible;}
button,select { text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button;cursor: pointer;}
button::-moz-focus-inner,input::-moz-focus-inner { border: 0;padding: 0;}
input { line-height: normal;}
*:before,*:after,.sizing { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.cover-bg{ position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
.cover-bg .bg{ position: absolute;left: 0;width: 52%;top: 0;height: 100%;background:url("https://cdn.jsdelivr.net/gh/yaoGrace/CdnStatics/cdnImgs/phpgrace/login-bg.svg") no-repeat 100%;background-size: auto 100%;}
.container{ position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;z-index: 99;}
.login-left{ position: absolute;left: 15%;top: 50%;width: 35%;margin-top: -142px;}
.login-left .thumb{ width: 75%;max-width: 300px;}
.login-left h2{ color: #fff; font-weight: 500;margin-top:8%;font-size: 28px;height: 40px;line-height: 40px;}
.login-left h4{ color: rgba(255,255,255,0.75);font-size: 16px;font-style: italic;height: 30px;line-height: 30px;margin-top:3%;}

.login-right{ position: absolute;right: 15%;top: 50%;width: 30%;max-width:400px;margin-top: -165px;}
.login-right .word{ font-size: 30px;font-weight: 600;line-height: 34px;margin-bottom: 20px;}
.login-right .title{ font-size: 25px;font-weight: 600;line-height: 34px;text-align: center;color: #0960bd;display: none;}
.login-right .en-title{ font-size: 16px;font-style: italic;font-weight: 600;line-height: 20px;margin: 15px 0 16px;text-align: center;color: rgba(9,96,189,0.75);display: none;}
.login-right .form-item{ position: relative;height: 38px;border: 1px solid #eee;margin-bottom:26px;border-radius:2px;padding-left: 35px;}
.login-right .form-item label{ position: absolute;left: 10px;top: 0;height: 38px;line-height: 38px;}
.login-right .form-item input{ height: 38px;line-height: 20px;padding: 9px 10px 9px 0;border: 0;width: 100%;font-size: 14px;}
.login-right .form-item .vimg{ position: absolute;right: 0;top: 0;width: 110px;height: 38px;cursor: pointer;}
.login-right .form-item .vimg img{ width: 100%;height: 100%;display: block;border-radius:0 2px 2px 0;}
.login-right .form-item .error-tip{ position: absolute;left: 0;top: 40px;color: #ed6f6f;height: 26px;line-height: 26px;display: none;}
.login-right .form-item.focus{ border-color: #0960bd;outline:3px solid rgba(9,96,189, 0.2);}
#loginSubmit{ width: 100%;text-align: center;background: #0960bd;color: #fff;font-size: 16px;letter-spacing: 10px;height: 40px;line-height: 40px;border-radius: 2px;border: 0;}
#loginSubmit:active{ position: relative;top: -1px;left: -1px}
.login-right .form-item.error{ border-color: #ed6f6f;}
.login-right .form-item.error .error-tip{ display: block;}
.login-right .form-item.focus.error{ outline:3px solid rgba(237,111,111, 0.2);}
.login-right .copy{ margin-top: 20px;height: 20px;line-height: 20px;font-size: 14px;}
.login-right .copy a{ color:#c2c2c2;}
.login-right .copy a:hover{  color:rgba(9,96,189,0.6);}
.ready .b{ transform: translate(-100px,0);opacity: 0;}
.ready .s{ transform: translate(150px,0);opacity: 0;}
.b,.s{ transition: transform .5s ease-in-out, opacity .8s ease-in-out;opacity:1;}
.b.b2{ transition-delay: 100ms;}
.b.b3{ transition-delay: 200ms;}
.s.s2{ transition-delay: 100ms;}
.s.s3{ transition-delay: 150ms;}
.s.s4{ transition-delay: 200ms;}
.s.s5{ transition-delay: 250ms;}
.s.s6{ transition-delay: 300ms;}

@media screen and (max-width: 1200px) {
    .cover-bg .bg{ background:rgba(41,49,70,1);width: 100%;}
    .login-left{ display: none;}
    .login-right{ overflow: hidden; left: 50%;width: 460px;max-width: inherit; margin-left: -230px;margin-top: -210px; background: #fff;padding: 30px;border-radius: 5px;}
    .login-right .word{ display: none;}
    .login-right .title{ display: block;}
    .login-right .en-title{ display: block;}
    .login-right .copy{ text-align: center;}
}
@media screen and (max-width: 600px) {
    .login-right{ width: 90%;left: 5%;margin-left: 0;}
}