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


.login-wrap {display: flex; flex-direction: column; box-sizing: border-box; min-height: 100vh; padding: 50px 0; gap: 50px; background: url("../images/body.jpg") no-repeat center / cover;}
.login-head {flex: 1; display: flex; justify-content: center; align-items: center;}
.login-foot {text-align: center; color: #fff; font-size: 14px; opacity: 0.8; padding: 0 20px;}

.login-main {width: 900px; min-height: 500px; display: flex; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.login-img {width: 50%; font-size: 0;}
.login-img img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px 0 0 12px;}

.login-box {width: 50%; background: #fff; border-radius: 0 12px 12px 0; box-sizing: border-box; padding: 30px 50px;}

.login-logo {font-size: 0; text-align: center;}
.login-logo img {width: 90%; max-width: 350px;}
.login-tabs {display: flex; padding-top: 20px; box-shadow: inset 0 -2px 0 0 #eee;}
.login-tabs .item {flex: 1; display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; color: #666; cursor: pointer;}
.login-tabs .item.active {color: #409eff; font-weight: 500; box-shadow: inset 0 -2px 0 0 #409eff;}


.login-title {display: flex; justify-content: center; padding-top: 20px; box-shadow: inset 0 -2px 0 0 #eee;}
.login-title .item {display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; color: #409eff; font-weight: 500; box-shadow: inset 0 -2px 0 0 #409eff;}

.login-cons {padding-top: 20px;}
.login-pane {display: none;}
.login-pane.show {display: block; animation: loginPaneShow 0.2s;}
@keyframes loginPaneShow {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-form {display: grid; grid-gap: 15px;}
.login-form-group {display: grid; grid-gap: 6px;}
.login-form-title {font-size: 14px; color: #666; padding-left: 1em;}
.login-form-box {background: #efefef; border-radius: 6px; display: flex; align-items: center; transition: background 0.2s, box-shadow 0.2s;}
.login-form-box:focus-within {background: #fff; box-shadow: inset 0 0 0 1px #409eff, 0 3px 8px rgba(64, 158, 255, 0.1);}
.login-form-input {flex: 1; height: 36px; background: none; border: 0 none; padding: 0 1em; font-size: 14px; color: #000;}
.login-form-verify-image {width: 70px; height: 26px; margin-right: 5px; cursor: pointer;}
.login-form-button-obtain {font-size: 14px; margin-right: 1em; color: #409eff; font-weight: 500;}
.login-form-button-obtain.disabled {opacity: 0.6; pointer-events: none;}
.login-form-button {width: 100%; height: 40px; box-sizing: border-box; background: #409eff; border-radius: 6px; border: 0 none; font-size: 15px; color: #fff; font-weight: 500; transition: background 0.2s;}
.login-form-button:hover {background: #59abff;}
.login-form-button:active {background: #1c8afc;}
.login-form-button.plain {background: #fff; border: 1px solid #409eff; color: #409eff;}
.login-form-button.plain:hover {background: #e8f3ff;}
.login-form-button.plain:active {background: #daecff;}

.login-form-text {flex: 1; padding: 0.6em 1em; font-size: 14px; color: #000;}
.login-form-mark {flex: 1; font-size: 14px; color: #ff0000;}

.login-form-button-group {display: flex; gap: 20px;}


.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: none; 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: #409eff; color: #409eff;}
.dialog-verify .main .content .verify.show .image {display: block;}
.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: #409eff; font-size: 14px; color: #fff; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background 0.2s;}
.dialog-verify .main .button:hover {background: #59abff;}
.dialog-verify .main .button:active {background: #1c8afc;}

.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);}


@media all and (max-width: 1000px){
    .login-wrap {padding: 30px 0; gap: 30px;}
    .login-main {display: block; width: 450px; max-width: calc(100% - 60px); height: auto;}
    .login-img {display: none;}
    .login-box {width: 100%; border-radius: 12px;}
}
@media all and (max-width: 480px){
    .login-foot {font-size: 13px;}
    .login-box {padding: 30px;}
    .login-tabs {padding-top: 10px;}
}
@media all and (max-width: 400px){
    .login-foot {font-size: 12px;}
    .login-wrap {padding: 20px 0; gap: 20px;}
    .login-main {max-width: calc(100% - 40px);}
    .login-box {padding: 20px;}
    .login-form {display: grid; grid-gap: 12px;}
    .login-form-button-group {display: flex; gap: 15px;}
}