@charset "UTF-8";
/* CSS Document */

* {margin: 0; padding: 0;}

*:focus {outline: none;}
html {position: relative;}
body {font: 12px/1.5 Microsoft YaHei, "PingFang SC", arial, "\5B8B\4F53", sans-serif;}
img {border: 0 none; max-width: 100%;}
ul, li {display: block; list-style: none;}
a {text-decoration: none; cursor: pointer;}
textarea {resize: none;}


.page-login {min-height: 100vh; background: url("../images/body.jpg") no-repeat center / cover;}

.header {display: flex; justify-content: space-between; align-items: center; padding: 30px;}
.header .logo {display: flex; align-items: center;}
.header .logo .img {font-size: 0; margin-right: 20px;}
.header .logo .img img {height: 80px;}
.header .logo .txt {font-size: 24px; font-weight: bold; color: #333;}
.header .button {display: flex; align-items: center;}
.header .button .item {margin-right: 20px;}
.header .button .item:last-child {margin-right: 0;}
.header .button .item a {display: flex; justify-content: center; align-items: center; text-align: center; min-width: 100px; height: 40px; box-sizing: border-box; border: 1px solid #004DB9; border-radius: 5px; font-size: 15px; color: #004DB9; padding: 0 20px;}
.header .button .item a {transition: all 0.2s;}
.header .button .item a:hover {background: #004DB9; color: #fff;}



.footer {text-align: center; padding: 30px; font-size: 13px; color: #AFBED2; line-height: 1.8;}


.login-wrap {width: 1200px; height: auto; margin: 0 auto; padding: 30px; display: flex; align-items: center; justify-content: space-between;}
.login-img {width: 600px; font-size: 0;}
.login-img img {width: 100%;}
.login-con {width: 480px; background: #fff; border-radius: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); box-sizing: border-box; padding: 40px; position: relative;}
.login-switch {width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: url("../images/login-switch.png") no-repeat center / 100% 100%; border-radius: 0 10px 0 0; position: absolute; right: 0; top: 0;}
.login-switch a {display: block; transform: rotate(45deg) translate(0, -20px); font-size: 16px; color: #004DB9;}
.login-tabs {display: flex; align-items: center;}
.login-tabs .item {margin-right: 30px; font-size: 20px; color: #666666;}
.login-tabs .item a {color: #666;}
.login-tabs .item:last-child {margin-right: 0;}
.login-tabs .item.on {font-weight: bold; color: #004DB9; position: relative;}
.login-tabs .item.on a {color: #004DB9;}
.login-tabs .item.on:after {content: ''; display: block; width: 100%; height: 3px; background: #004DB9; position: absolute; left: 0; top: 100%; margin-top: 5px; border-radius: 2px;}


.login-form {padding: 40px 0;}
.login-form .group {padding-top: 20px;}
.login-form .group:first-child {padding-top: 0;}
.login-form .group .tit-box {font-size: 17px; color: #333;}
.login-form .group .con-box {padding-top: 10px;}
.login-form .group .inp-box {position: relative;}
.login-form .group .inp-box a.obtain {display: block; font-size: 16px; color: #004DB9; line-height: 30px; position: absolute; right: 0; padding: 0 20px; top: 50%; margin-top: -15px;}
.login-form .group .inp-box .verify-img {position: absolute; right: 15px; top: 0; height: 100%; display: flex; align-items: center; font-size: 0;}
.login-form .group .inp-box .verify-img img {width: 90px; height: 40px; background: #ccc; cursor: pointer;}
.login-form .group .inp-box input.inp {width: 100%; height: 54px; background: #F7F8FA; border: 0 none; box-sizing: border-box; border-radius: 5px; padding: 0 20px; font-size: 16px; color: #333;}
.login-form .group .inp-box input.inp:focus {border: 2px solid #004DB9; padding: 0 18px; box-shadow: 0 0 10px rgba(0, 77, 185, 0.1);}
.login-form .group .btn-box input.btn {width: 100%; height: 54px; background: #004DB9; border: 0 none; box-shadow: 0 8px 16px rgba(0, 77, 185, 0.2); border-radius: 5px; font-size: 18px; font-weight: bold; color: #fff; cursor: pointer; transition: all 0.2s;}
.login-form .group .btn-box input.btn:hover {background: #0056CF;}
.login-form .group .btn-box input.btn:active {background: #0046A7;}
.login-form .group .com-box {display: flex; justify-content: space-between; align-items: center;}
.login-form .group .com-box .remember {font-size: 13px; color: #666;}
.login-form .group .com-box .remember label {cursor: pointer; display: flex; align-items: center;}
.login-form .group .com-box .remember label input {margin-right: 5px;}
.login-form .group .com-box .forget {font-size: 13px;}
.login-form .group .com-box .forget a {color: #004DB9;}


.login-form .agreement {text-align: center; font-size: 14px; color: #666;}
.login-form .agreement a {color: #004DB9;}
.login-form .agreement a:hover {text-decoration: underline;}





.page-agreement {width: 80%; margin: 0 auto; padding: 20px 0;}
.page-agreement-title {font-size: 24px; font-weight: bold; color: #333; text-align: center;}
.page-agreement-content {padding-top: 20px; font-size: 16px; line-height: 1.9; color: #333;}
.page-agreement-content p {text-indent: 2em; font-weight: lighter;}



.img-code-dlg {
    position: absolute;
    left: 0;
    top: 60px;
    width: 380px;
    height: 160px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 1px 2px 8px #999;
    padding: 15px;
    box-sizing: border-box;
    z-index: 999;
}
.img-code-dlg.en{
    height: 180px;
}
.img-code-row {
    display: flex;
    flex-flow: row nowrap
}

.img-code-dlg .form-input {
    flex-shrink: 1;
    display: flex;
    flex-flow: row nowrap;
    margin-right: 20px;
}

.img-code-tic {
    flex-shrink: 1;
    width: 70px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #888;
    padding-left: 5px;
}
.img-code-tic.en{
    width: 80px;
}
.img-code-dlg .inp-box {
    flex-shrink: 1;
    width: 120px;
    height: 60px;
    line-height: 60px;
}

.img-code-dlg .img-code {
    flex-grow: 1;
    height: 60px;
    line-height: 60px;
}

.img-code-dlg .img-code img {
    height: 40px;
    vertical-align: -12px;
}

.img-code-dlg .img-code-btn {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 10px;
}

.img-code-dlg .btn-warp1 {
    flex-grow: 1;
    margin-right: 20px
}

.img-code-dlg .btn-warp2 {
    flex-grow: 1;
}

.login-form .group .img-code-dlg .inp-box .imgCode {
    display: inline-block;
    width: 120px;
    height: 40px;
    border: 1px #ccc solid;
}

.login-form .group .inp-box a.obtain.disabled{
    color: #b5b5b5;
}

.login-form .group .img-code-dlg .btn-box .btn{
    height: 40px;
    font-size: 16px;
    font-weight: normal;
}





.dialog-verify {position: fixed; inset: 0; z-index: 999;}
.dialog-verify .mask {width: 100%; height: 100%; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);}
.dialog-verify .wrap {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.dialog-verify .main {width: 300px; padding: 30px 0; background: #fff; position: relative; z-index: 10; border-radius: 8px;}
.dialog-verify .main .close {position: absolute; right: 5px; top: 5px;}
.dialog-verify .main .close a {display: block; width: 24px; height: 24px; transform: rotate(45deg) scale(0.5);}
.dialog-verify .main .close a:before,
.dialog-verify .main .close a:after {content: ''; display: block; background: #666; position: absolute; left: 50%; top: 50%; transition: background 0.2s;}
.dialog-verify .main .close a:before {width: 24px; height: 2px; margin-left: -12px; margin-top: -1px;}
.dialog-verify .main .close a:after {width: 2px; height: 24px; margin-left: -1px; margin-top: -12px;}
.dialog-verify .main .close a:hover:before,
.dialog-verify .main .close a:hover:after {background: #000;}
.dialog-verify .main .title {text-align: center; font-size: 18px; color: #000;}
.dialog-verify .main .content {display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 20px;}
.dialog-verify .main .content .text {font-size: 0;}
.dialog-verify .main .content .text .input {width: 150px; height: 36px; box-sizing: border-box; background: #efefef; border-radius: 6px; border: 0 none; font-size: 14px; color: #000; padding: 0 1em;}
.dialog-verify .main .content .verify {width: 100px; height: 36px; cursor: pointer;}
.dialog-verify .main .content .verify .image {display: block; font-size: 0; width: 100%; height: 100%;}
.dialog-verify .main .content .verify .image img {width: 100%; height: 100%;}
.dialog-verify .main .content .verify .obtain {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; color: #333; transition: border-color 0.2s, color 0.2s;}
.dialog-verify .main .content .verify .obtain:hover {border-color: #004DB9; color: #004DB9;}
.dialog-verify .main .content .verify.show .image {display: none;}
.dialog-verify .main .content .verify.show .obtain {display: none;}
.dialog-verify .main .button {width: 260px; height: 36px; margin: 10px auto 0; display: flex; justify-content: center; align-items: center; background: #004DB9; font-size: 14px; color: #fff; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background 0.2s;}
.dialog-verify .main .button:hover {background: #0056CF;}
.dialog-verify .main .button:active {background: #0046A7;}


.dialog-verify {display: none;}
.dialog-verify .mask {opacity: 0; transition: opacity 0.2s;}
.dialog-verify .main {opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.2s;}
.dialog-verify.show {display: block;}
.dialog-verify.show.anim .mask {opacity: 1;}
.dialog-verify.show.anim .main {opacity: 1; transform: scale(1);}