html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: "Helvetica Neue", "Microsoft Yahei", "SimHei", sans-serif;
}
#userlogin {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#userlogin .hide {
    display: none !important;
}
#userlogin .button, #userlogin .checkstate {
    cursor: pointer;
}
#userlogin .background {
    width: 100%;
    height: 100%;
    background: #2D4374; /* Old browsers */
    background: #328eb4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAPICAIAAABrbS31AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGOTUxREJGOUZBNjZFMzExQjI3REY1MUYwQkI2NEUxOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDMUQ0MDY2NjVGRUUxMUUzODkyOEFFRjc2NzFENzU2MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDMUQ0MDY2NTVGRUUxMUUzODkyOEFFRjc2NzFENzU2MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCNzgwRUI5MzNEMUZFRDc4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY5NTFEQkY5RkE2NkUzMTFCMjdERjUxRjBCQjY0RTE4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qWRlpAAAAURJREFUeNrsnEEOwjAMBGPEH7jzFf7/Jz5QIyGI411Pr714Nm6lcdrE4/laV9dtJZfYjfuKsAbsGvuKbD08AEMq9k/PB737a4ikS4hkVfKy/GNWLg1HJERCJPlLpoK8aSTu5EcBId9JnhtkmAO2HaQACGDnsUgKKLZQ9sNMFqqXVA9oOI9xNBxHHhyXsboYh8tcVIyjYpAipsguRg/HVbdLlas10qPcXhxF0kCXINUNykWRKZe5j1q69pZKuTudE9WnXAzSx88pF1FEFEd7LT5IuaLl7t/nrPi4Xmw7k91X9XLZo6dLRhkkfg7H9HJ7Oqf93zVYqgjH0efD5WcHOOYZPXMfW6lmoZoJ1lhxBxDA7tOPMAfkQJB55IOP9whOv9CWOCIhktKsxD6u54AWsiJEDhj+Ivam2wNB7NzYsh4Wsb8FGACnagrMe361aQAAAABJRU5ErkJggg==) 0 0 repeat-x;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
#userlogin .main {
    height: 100%;
    line-height: 100%;
    position: relative;
    z-index: 6;
}
#userlogin form {
    height: 380px;
    width: 380px;
    margin: auto;
    position: relative;
    top: 50%;
    margin-top: -176px;
    background: #fff;
    padding-top: 20px;
    box-sizing: border-box;
    border-radius: 60px;
}
#userlogin input {
    outline: none;
    height: 24px;
    width: 298px;
    line-height: 24px;
    font-size: 18px;
    border: 0;
    background: none;
    padding: 12px 0;
    margin: 0 40px;
    color: #333;
    border-bottom: 1px solid #e7e7e9;
    font-family: "Helvetica Neue", "Microsoft Yahei", "SimHei", sans-serif;
    position: relative;
    z-index: 8;
}
#userlogin input[type=password]{
    height: 49px;
    padding-right: 45px;
    box-sizing: border-box;
}
#userlogin input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#userlogin .describe>div {
    width: auto;
    height: 30px;
    line-height: 30px;
    margin: auto;
    text-align: center;
    color: #a9a9a9;
    font-size: 27px;
}
#userlogin .describe {
    margin-bottom: 32px;
}
#userlogin .describe .icon {
    height: 138px;
    line-height: 134px;
}
#userlogin .describe .icon img {
    height: 82px;
    vertical-align: middle;
}
#userlogin .login {
    width: 30px;
    height: 30px;
    overflow: hidden;
    display: inline-block;
    position: absolute;
    bottom: 72px;
    right: 42px;
    z-index:24;
}
#userlogin #forget .login {
    bottom: 120px;
}
#userlogin #forget .errtips {
    display: inline-block;
    height: 23px;
    position: absolute;
    top: 275px;
    margin: auto;
    left: 40px;
    /* right: 40px;
    */
}
#userlogin .btn-return {
    text-align: center;
    color: #a9a9a9;
    margin-top: 45px;
    cursor: pointer;
}
#userlogin .errtips .arrow {
    position: relative;
    font-size: 0;
    left: 45%;
    border-radius: 169px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    top: -22px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: 3px;
}
#userlogin .errtips .arrow, #userlogin .errtips {
    background-color: #F9E5A0;
    border: 1px solid rgb(221, 210, 209);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.11), -2px -2px 6px rgba(0, 0, 0, 0.1);
}
#userlogin .errtips .adjustarrow {
    width: 100%;
    background: #f9e5a0;
    height: 22px;
    position: relative;
    top: -33px;
}
#userlogin .errtips {
    margin: auto;
    height: 46px;
    line-height: 23px;
    padding: 10px;
    position: relative;
    top: 6px;
    margin: 0 5px;
    border-radius: 4px;
    z-index: 1;
}
#userlogin .errtips div {
    position: relative;
    top: -45px;
}
#userlogin .cloud-icon-user-login, #userlogin .cloud-icon-ui-loading-gray {
    width: 100%;
    height: 100%;
    display: inline-block;
    cursor: default;
}
#userlogin .cloud-icon-user-login {
    cursor: pointer;
    background-image: url('./enter.png');
    background-size: cover;
    background-position: -30px 0;
}
#userlogin .cloud-icon-user-login.disabled {
    background-position: 0 0;
    cursor: default;
}
#userlogin .warn {
    border-bottom-color: red;
}
#userlogin .enable {
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
}
#userlogin .enable span {
    line-height: 25px;
}
#userlogin .checkstate {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid gray;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    margin-top: -5px;
}

/* Color */
#userlogin .discribe, #userlogin .enable span {
    color: rgb(73, 115, 161);
}
::-webkit-input-placeholder {
    color: #a8a8a8
}
::-moz-placeholder {
    color: #a8a8a8;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #a8a8a8;
}
.copyright {
    position: absolute;
    bottom: 60px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    z-index: 99;
    font-size: 13px;
}
input:required {
    box-shadow: none;
}
input:invalid {
    box-shadow: none;
}
#userlogin i.icon-ok, #userlogin i.icon-err {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url('../../img/tips.png');
    background-size: 200%;
    float: left;
    margin-left: 40px;
    margin-right: 10px;
    margin-top: 3px;
}
#userlogin i.icon-err {
    background-position: top right;
}
#userlogin .sendresult {
    padding-top: 10px;
    line-height: 23px;
    font-size: 14px;
    color: #666;
}
#userlogin .sendresult b {
    font-size: 18px;
    color: #333;
    font-weight: normal;
}
#userlogin .sendresult.loading {
    width: 40px;
    height: 40px;
    margin: auto;
    margin-top: 20px;
}
#userlogin .sendresult.final {
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-top: 30px;
}
#userlogin .inputresult {
    margin-left: 40px;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #e7e7e9;
    margin-right: 40px;
    color: #a9a9a9;
    font-size: 18px;
}
#userlogin #reset .errtips {
    width: auto;
    display: inline-block;
    height: 23px;
    margin-left: 40px;
}
#userlogin #reset .errtips.top {
    top: -44px;
}
#userlogin #reset .sendresult, #userlogin #expires .sendresult,#userlogin #invitelose .sendresult {
    text-align: center;
}
#userlogin #reset .sendresult i, #userlogin #expires .sendresult i,#userlogin #invitelose .sendresult i {
    margin-left: -50px;
}
#userlogin #reset .sendresult .ok, #userlogin #expires .sendresult .err,#userlogin #invitelose .sendresult .err {
    display: inline-block;
    text-align: left;
    padding-left: 50px;
    margin-top: 25px;
}
#userlogin #expires .btn-return {
    color: #007aff;
}
#userlogin #login .errtips>div:last-child {
    position: relative;
    top: -30px;
}
#userlogin #login .errtips a {
    float: right;
    border: 1px solid #c6b47e;
    width: 84px;
    height: 35px;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #333;
    font-weight: bold;
    margin-top: -10px;
    position: relative;
    z-index: 1;
}
#userlogin #login .errtips b {
    top: -15px;
    position: relative;
    font-size: 16px;
    color: #503e30;
    margin-right: 100px;
}
#userlogin #login .errtips div.floatleft {
    top: -13px;
    font-size: 14px;
    color: #503e30;
}
#userlogin .main>form{
    position: absolute;
    margin-left: -190px;
    left: 50%;
    z-index:7;
}
#userlogin #forget .errtips .arrow{
    left: 10%;
}

#userlogin #login{
    z-index: 999;
    text-align: center;
}
#userlogin #login>div{
    z-index: 999;
    text-align: left;
}
#userlogin #login .errtips.inviteuser{
    width: auto;
    display: inline-block;
    margin: auto;
    height: auto;
    padding: 10px 20px;
}

#secondAuthwechat .wxlogin-title,
#wechatlogin .wxlogin-title {
    text-align: center;
    font-size: 20px;
    margin-top: 15px;
    line-height: 20px;
}
#secondAuthwechat #wxsecondauth iframe,
#wechatlogin #wxlogin iframe {
    width: 380px;
    height: 320px;
}

.qrcode-blur {
    -webkit-filter: blur(2px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

#secondAuthwechat .wxlogin-tips {
    height: 260px;
    width: 260px;
    position: absolute;
    top: 70px;
    left: 60px;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}
#secondAuthwechat .wxlogin-tips .relogin,
#secondAuthwechat .wxlogin-tips .applybind {
    width: 100%;
    height: 100%;
}


#secondAuthwechat .wxlogin-tips .wxlogin-tips-notice {
    display: inherit;
    margin: 0 auto;
    margin-top: 100px;
}
#secondAuthwechat .wxlogin-tips .wxlogin-tips-action {
    font-size: 16px;
    line-height: 30px;
    border-bottom: 1px solid;
    cursor: pointer;
}
#secondAuthwechat .wxlogin-tips .wxlogin-tips-sendemailsucc span {
    display: inherit;
}
#secondAuthwechat .wxlogin-tips .wxlogin-tips-sendemailsucc span:first-child {
    margin-top: 90px;
}
#secondAuthwechat .wxlogin-tips .wxlogin-tips-sendemailsucc .wxlogin-tips-email {
    line-height: 20px;
    text-decoration: underline;
    display: block;
    margin: 10px auto;

}


#userlogin #notbind .describe,
#userlogin #secondAuthemail .describe {
    margin-bottom: 27px;
}
#userlogin #notbind .describe span,
#userlogin #secondAuthemail .describe span {
    text-align: center;
    display: block;
    font-weight: 100;
}
#userlogin #notbind .icon + div,
#userlogin #secondAuthemail .icon + div {
    font-size: 18px;
    margin-top: -15px;
    margin-bottom: 5px;
}

#userlogin #secondAuthwechat .cancellogin,
#userlogin #notbind .cancellogin,
#userlogin #secondAuthemail .cancellogin {
    color: #666666;
    position: absolute;
    text-align: center;
    bottom: 15px;
    font-weight: 100;
    cursor: pointer;
    height: 14px;
    line-height:14px;
    font-size: 14px;
    left: 162px;
}

#userlogin #notbind .errtips {
    display: inline-block;
    position: relative;
    left: 20%;
    min-width: 180px;
    height: 20px;
}
#userlogin #notbind .errtips .errtips-msg {
    text-align: center;
    font-weight: lighter;
}

#userlogin #secondAuthemail .errtips.normal,
#userlogin #login .errtips.normal{
    text-align: center;
    height: 20px;
}
#userlogin #secondAuthemail .errtips.normal .errtips-msg,
#userlogin #login .errtips.normal .errtips-msg {
    top: -45px;
}
#userlogin #secondAuthemail .errtips a {
    float: right;
    border: 1px solid #c6b47e;
    width: 84px;
    height: 35px;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #333;
    font-weight: bold;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}
#userlogin #secondAuthemail .errtips b {
    position: relative;
    font-size: 16px;
    color: #503e30;
    margin-right: 100px;
}

#userlogin #secondAuthemail .errtips div.floatleft {
    top: 0;
    font-size: 14px;
    color: #503e30;
}

#userlogin .qrcode-default {
    background-image: url('./qr_default.png');
    width: 200px;
    height: 200px;
    position: absolute;
    left: 89px;
    top: 80px;
    border: 1px solid #ddd;
}

#secondAuthwechat .wxlogin-tips .wxlogin-tips-applybind > div {
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 55px;
}
#secondAuthwechat .wxlogin-tips .wxlogin-tips-applybind > div span.cloud-icon-ui-loading-gray {
    position: absolute;
    width: 30px;
    height: 30px;
    margin-left: 20px;
}

#userlogin .qrcode-switch {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 70px;
    height: 70px;
    border-top-right-radius: 10px;
    overflow: hidden;
    background-image: url('./qr_switch.jpg');
}
#userlogin .qrcode-switch:after {
    content: '';
    display: block;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top: 70px solid rgba(255, 255, 255, 0);
    border-left: 70px solid #FFF;
    width: 0;
    height: 0;
}

#userlogin #wechatlogin .qrcode-switch {
    background-position: 70px 0;
}
#userlogin .qrcode-switch-mask {
    height: 50px;
    width: 98px;
    background-color: #fff;
    position: absolute;
    top: 28px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    right: 3px;
}