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

* {margin: 0;padding: 0;}

*:focus {outline: none;}
body {font: 12px/1.5 "PingFang SC", Microsoft YaHei, arial, "\5B8B\4F53", sans-serif; min-width: 1280px;}
html,body {background: #E6F3FF;}

img {border: 0 none; max-width: 100%;}
ul, li {display: block; list-style: none;}
a {text-decoration: none; cursor: pointer;}
textarea {resize: none;}




.background {width: 100vw; height: 100vh; overflow: hidden; position: absolute; left: 0; top: 0;}
.background-box {width: 1920px; height: 1080px; position: absolute; left: 50%; margin-left: -960px; top: 50%; margin-top: -540px;}
.background-box:before,
.background-box:after {content: ''; display: block; width: 1000px; height: 1000px; border-radius: 50%; position: absolute;}

.background-box:before {left: -281px; top: -55px; background: linear-gradient(#D7EBFF, rgba(215, 235, 255, 0));}
.background-box:after {left: 1070px; top: 273px; background: linear-gradient(rgba(215, 235, 255, 0), #D7EBFF);}


.wrapper {width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 40px; position: relative; z-index: 20;}
.wrap-center {width: 1140px; height: auto; background: #fff; border-radius: 20px; padding: 20px; box-sizing: border-box; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);}
.login-wrap {display: flex;}
.login-img {width: 540px; font-size: 0; padding-left: 20px;}
.login-img img {width: 100%; border-radius: 15px;}
.login-con {flex: 1; min-width: 0;}
.login-head {display: flex; justify-content: space-between; align-items: center; padding: 20px;}
.login-head .logo {font-size: 0;}
.login-head .logo a {display: block;}
.login-head .logo img {height: 48px;}
.login-head .link {display: flex; align-items: center; font-size: 14px; color: #999;}
.login-head .link a {color: #999;}
.login-head .link a:hover {color: #333;}
.login-head .link .item {padding-right: 21px; margin-right: 20px; position: relative;}
.login-head .link .item:after {content: ''; display: block; width: 1px; height: 14px; background: #ccc; position: absolute; right: 0; top: 50%; margin-top: -7px;}
.login-head .link .item:last-child {margin-right: 0; padding-right: 0;}
.login-head .link .item:last-child:after {display: none;}


.login-main {min-height: 590px; display: flex; justify-content: center; align-items: center;}
.login-main-center {width: 360px; padding: 20px 0;}
.login-title {font-size: 30px; font-weight: bold; color: #0D1C4A;}


.login-input {display: flex; align-items: center; height: 50px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; background: #fff;}
.login-input.red {border-color: #ff0000;}
.login-input .icon {width: 20px; height: 20px; font-size: 0; padding-left: 14px;}
.login-input .icon img {width: 20px; height: 20px;}
.login-input .text {font-size: 0; flex: 1; min-width: 0; height: 100%; padding: 0 15px;}
.login-input .text input.inp {width: 100%; height: 100%; background: none; border: 0 none; font-size: 15px; color: #333;}
.login-input .forget {padding-right: 15px;}
.login-input .forget a {font-size: 14px; color: #2455F1; font-weight: 500;}
.login-input .obtain {padding-right: 15px;}
.login-input .obtain a {font-size: 14px; color: #2455F1; font-weight: 500;}
.login-input .obtain a.disabled {opacity: 0.5; pointer-events: none;}
.login-input .verify-img {font-size: 0; padding-right: 15px;}
.login-input .verify-img img {width: 80px; height: 30px; cursor: pointer;}
.login-input .picker {font-size: 0; height: 100%; padding: 0 15px; position: relative;}
.login-input .picker:after {content: ''; display: block; width: 1px; height: 16px; background: #ccc; position: absolute; right: 0; top: 50%; margin-top: -8px;}
.login-input .picker select {appearance: none; height: 100%; box-sizing: border-box; border: 0 none; font-size: 15px; color: #333; background: url("../images/login-select.png") no-repeat right center/ 8px 8px; padding-right: 16px;}

.login-input-button {font-size: 0;}
.login-input-button input.btn {border: 0 none; font-size: 17px; font-weight: bold; background: #2455F1; color: #fff; width: 100%; height: 50px; box-sizing: border-box; cursor: pointer; border-radius: 8px;}

.login-link-button {width: auto; height: auto;}
.login-link-button a.btn {display: flex; justify-content: center; align-items: center; font-size: 15px; border: 1px solid #2455F1; color: #2455F1; width: 100%; height: 50px; box-sizing: border-box; border-radius: 8px;}


.login-checkbox {appearance: none; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; margin-right: 8px; cursor: pointer;}
.login-checkbox:checked {background: #2455F1 url("../images/login-checked.png") no-repeat center / 8px 8px; border: 0 none;}


.login-agree {display: flex; align-items: center; font-size: 14px; color: #666;}
.login-agree a {color: #2455F1;}

.login-other {display: flex; justify-content: space-between; align-items: center;}
.login-other a {font-size: 14px; color: #2455F1; font-weight: bold; display: block;}
.login-other .server a {background: url("../images/login-server.png") no-repeat left center / 14px 14px; padding-left: 22px;}
.login-other .register a {background: url("../images/login-arrow.png") no-repeat right center / 7px 12px; padding-right: 15px;}

.login-other-tips {font-size: 14px; color: #ff0000;}

.login-back {text-align: center; font-size: 14px; color: #999;}
.login-back a {color: #2455F1;}


.login-label {height: 50px; display: flex; justify-content: flex-end; align-items: center; text-align: right; font-size: 15px; color: #666; box-sizing: border-box; padding-right: 20px;}
.login-label .require {color: #ff0000; padding-right: 5px;}

.login-tips {height: 50px; display: flex; align-items: center; font-size: 15px; color: #ff0000; box-sizing: border-box; padding-left: 20px;}


.login-tabs {display: flex; justify-content: center; align-items: center; padding-top: 20px;}
.login-tabs .item {padding: 0 20px;}
.login-tabs .item a {display: block; position: relative; font-size: 15px; color: #666;}
.login-tabs .item a.on {color: #2455F1; font-weight: bold; position: relative;}
.login-tabs .item a.on:after {content: ''; display: block; width: 60%; height: 3px; background: #2455F1; border-radius: 2px; position: absolute; left: 20%; top: 100%; margin-top: 7px;}


.login-phone-verify {display: flex; align-items: center;}
.login-phone-verify .login-input {flex: 1; min-width: 0;}
.login-phone-verify .login-link-button {width: 140px; padding-left: 20px;}


.login-form {padding-top: 30px;}
.login-form.register,
.login-form.forget {padding-top:40px; padding-bottom: 20px;}
.login-form .item {padding-top: 20px;}
.login-form .item:first-child {padding-top: 0;}

.login-form .group {padding-top: 20px; display: flex; justify-content: center; align-items: center;}
.login-form .group:first-child {padding-top: 0;}
.login-form .group-center {width: 360px;}
.login-form .group .login-label {width: 300px;}
.login-form .group .login-tips {width: 300px;}




.register-result {padding: 80px 0 200px 0; text-align: center;}
.register-result .icon {font-size: 0;}
.register-result .icon img {width: 60px; height: 60px;}
.register-result .title {font-size: 30px; font-weight: bold; color: #333; padding-top: 30px;}
.register-result .content {font-size: 15px; color: #666; padding-top: 20px;}
.register-result .content span {color: #2455F1;}
.register-result .button {padding-top: 30px;}
.register-result .button a {display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: bold; border: 1px solid #2455F1; color: #2455F1; width: 180px; margin: 0 auto; height: 50px; box-sizing: border-box; border-radius: 8px;}




.login-agreement {min-height: 100vh; background: #fff;}
.login-agreement-center {max-width: 1200px; margin: 0 auto; padding: 50px 20px;}
.login-agreement-title {font-size: 30px; font-weight: bold; color: #000; text-align: center;}
.login-agreement-content {font-size: 16px; color: #333; line-height: 1.9; padding-top: 30px;}




.login-title-tabs {display: flex; align-items: center; gap: 40px;}
.login-title-tabs .item {display: block; position: relative; font-size: 20px; color: #666;}
.login-title-tabs .item.on {color: #2455F1; font-weight: bold; position: relative;}
.login-title-tabs .item.on:after {content: ''; display: block; width: 100%; height: 3px; background: #2455F1; border-radius: 2px; position: absolute; left: 0; top: 100%; margin-top: 7px;}


.con-group {display: none;}
.con-group.show {display: block;}