html,
body {
  min-height: 100%;
  background: #071326;
}

body {
  color: #f7e7c3;
  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
}

.main {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: .48rem .42rem .7rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(65, 123, 163, .34), transparent 28%),
    radial-gradient(circle at 18% 40%, rgba(197, 150, 75, .2), transparent 22%),
    linear-gradient(160deg, rgba(8, 22, 43, .96), rgba(4, 12, 26, .99)),
    url(../images/login/bg.png) center top / cover no-repeat;
}

.main::before,
.main::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.main::before {
  inset: 0;
  opacity: .3;
  background:
    repeating-linear-gradient(105deg, rgba(95, 157, 204, .18) 0, rgba(95, 157, 204, .18) 1px, transparent 1px, transparent 18px),
    radial-gradient(ellipse at 0 0, transparent 0 42%, rgba(210, 165, 91, .36) 43%, transparent 44%);
}

.main::after {
  right: -.9rem;
  bottom: 1.2rem;
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid rgba(91, 148, 193, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 0 .24rem rgba(91, 148, 193, .04);
}

.register-main {
  min-height: 16.43rem;
}

.title,
.form {
  position: relative;
  z-index: 1;
}

.logoo[data-v-07f8bd43] {
  width: 100%;
  padding: 0;
}

.logoo .r[data-v-07f8bd43] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
}

.logoo .r img[data-v-07f8bd43] {
  width: .86rem;
  height: .86rem;
  object-fit: contain;
  border-radius: .18rem;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 .1rem .26rem rgba(0, 0, 0, .28);
}

.logoo .r .s[data-v-07f8bd43] {
  min-width: 1.9rem;
  height: .64rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .22rem;
  border: 1px solid rgba(222, 179, 107, .48);
  border-radius: .12rem;
  background: linear-gradient(135deg, rgba(210, 166, 90, .96), rgba(121, 92, 50, .92));
  box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .24);
}

.logoo .r .s p[data-v-07f8bd43] {
  margin: 0;
  font-size: .32rem;
  font-weight: 700;
  color: #fff3d9;
}

.logoo .ms[data-v-07f8bd43] {
  width: 100%;
  margin-top: .18rem;
  text-align: center;
  font-size: .28rem;
  color: rgba(247, 231, 195, .82);
}

.login-hero {
  box-sizing: border-box;
  min-height: 3rem;
  margin-top: .58rem;
  padding: .34rem;
  display: flex;
  align-items: center;
  border: 1px solid rgba(213, 166, 91, .72);
  border-radius: .18rem;
  background:
    linear-gradient(115deg, rgba(15, 31, 54, .94), rgba(30, 51, 76, .72)),
    radial-gradient(circle at 82% 36%, rgba(86, 176, 210, .35), transparent 34%);
  box-shadow: inset 0 0 .42rem rgba(255, 255, 255, .06), 0 .2rem .52rem rgba(0, 0, 0, .26);
}

.login-hero span {
  display: inline-flex;
  align-items: center;
  height: .48rem;
  padding: 0 .18rem;
  border-radius: .08rem;
  color: #ffe4ae;
  font-size: .24rem;
  background: linear-gradient(135deg, rgba(205, 160, 84, .8), rgba(92, 70, 41, .78));
}

.login-hero strong {
  display: block;
  margin-top: .28rem;
  font-size: .52rem;
  line-height: 1.12;
  letter-spacing: 0;
  color: #f6c873;
  text-shadow: 0 .06rem .18rem rgba(0, 0, 0, .36);
}

.login-hero p {
  margin-top: .16rem;
  font-size: .25rem;
  line-height: .38rem;
  color: rgba(255, 241, 209, .78);
}

.form {
  box-sizing: border-box;
  margin-top: .52rem;
  padding: .48rem .36rem .46rem;
  border: 1px solid rgba(205, 160, 88, .42);
  border-radius: .18rem;
  background: linear-gradient(145deg, rgba(37, 48, 66, .94), rgba(13, 23, 41, .96));
  box-shadow:
    inset 0 0 .38rem rgba(255, 255, 255, .08),
    0 0 .08rem rgba(255, 226, 172, .48),
    0 .28rem .7rem rgba(0, 0, 0, .34);
}

.form-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  margin-bottom: .08rem;
}

.form-title span {
  width: .7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 203, 126, .85));
}

.form-title span:last-child {
  background: linear-gradient(90deg, rgba(244, 203, 126, .85), transparent);
}

.form-title strong {
  font-size: .42rem;
  font-weight: 700;
  color: #f4ca78;
}

.form .formItem {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: .92rem;
  margin-top: .32rem;
  padding: 0 .24rem;
  border: 1px solid rgba(218, 178, 108, .34);
  border-radius: .12rem;
  background: linear-gradient(180deg, rgba(8, 18, 34, .82), rgba(21, 33, 52, .86));
  box-shadow: inset 0 .04rem .14rem rgba(0, 0, 0, .28);
}

.form .formItem .field-icon {
  flex: 0 0 .5rem;
  width: .5rem;
  height: .5rem;
  margin-right: .18rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .formItem img {
  width: .36rem;
  height: .36rem;
  object-fit: contain;
  filter: sepia(1) saturate(1.6) hue-rotate(352deg) brightness(1.22);
}

.form .formItem > img {
  flex: 0 0 .5rem;
  width: .5rem;
  height: .36rem;
  margin-right: .18rem;
}

.form .formItem input {
  width: 100%;
  height: 100%;
  color: #fff3d8;
  font-size: .28rem;
  background-color: transparent;
}

.form .formItem input::placeholder {
  color: rgba(255, 238, 202, .46);
}

.form .formItem .value {
  flex: 1;
  height: 100%;
  min-width: 0;
}

.form .formItem .value input {
  width: 100%;
}

.form .formItem .Code {
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: .64rem;
  margin-left: .18rem;
  padding: .04rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(218, 178, 108, .42);
  border-radius: .08rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 0 .12rem rgba(255, 255, 255, .06);
}

.form .formItem .Code img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: .05rem;
  object-fit: fill;
  filter: none;
}

.form .submit {
  width: 100%;
  height: .86rem;
  margin-top: .48rem;
  border-radius: .46rem;
  font-size: .32rem;
  font-weight: 700;
  color: #19130b;
  background: linear-gradient(180deg, #f7d58c 0%, #c49a50 52%, #a87932 100%);
  box-shadow: 0 .16rem .34rem rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .24rem;
  padding-top: .38rem;
  font-size: .28rem;
  font-weight: 500;
  line-height: .4rem;
}

.tip a {
  color: #f1c879;
}

.tip i {
  width: 1px;
  height: .26rem;
  background: rgba(241, 200, 121, .45);
}

.more {
  position: absolute;
  bottom: .45rem;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

.more .moretit,
.rel .moretit {
  display: flex;
  align-items: center;
  justify-content: center;
}

.more .moretit i:nth-child(1),
.rel .moretit i:nth-child(1) {
  width: 2.08rem;
  height: .04rem;
  background: linear-gradient(225deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.more .moretit h3,
.rel .moretit h3 {
  white-space: nowrap;
  padding: 0 .44rem;
  font-size: .32rem;
  line-height: .44rem;
  color: #ffffff;
}

.more .moretit i:last-child,
.rel .moretit i:last-child {
  width: 2.08rem;
  height: .04rem;
  background: linear-gradient(150deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.more .morelist,
.rel .morelist {
  display: flex;
  justify-content: space-around;
  margin-top: .3rem;
}

.more .morelist .moreitem,
.rel .morelist .moreitem {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.more .morelist .moreitem img,
.rel .morelist .moreitem img {
  width: .92rem;
  height: .92rem;
}

.more .morelist .moreitem span,
.rel .morelist .moreitem span {
  padding-top: .2rem;
  font-size: .26rem;
  font-weight: 500;
  line-height: .36rem;
  color: #ffffff;
}

.xieyi {
  display: flex;
  align-items: center;
  margin-top: .3rem;
}

.xieyi .checkbox {
  width: .28rem;
  height: .28rem;
  margin-right: .05rem;
}

.xieyi span {
  font-size: .26rem;
  color: #fff1d1;
}

.rel {
  margin-top: .66rem;
}

.login-main {
  min-height: 100vh;
  padding: .72rem .52rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 11, 22, .18), rgba(3, 10, 21, .32)),
    url(/static/new/beijing.png) center center / 100% 100% no-repeat;
}

.login-main::before {
  display: none;
}

.login-main::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 16%, rgba(121, 181, 227, .2), transparent 28%);
  box-shadow: none;
}

.login-main .title {
  z-index: 3;
  margin-bottom: -.58rem;
}

.login-main .logoo[data-v-07f8bd43] {
  position: relative;
  padding: 0;
}

.login-main .logoo .r[data-v-07f8bd43] {
  position: relative;
  min-height: 1.42rem;
  justify-content: center;
  gap: 0;
}

.login-main .logoo .r img[data-v-07f8bd43] {
  position: relative;
  z-index: 2;
  width: 1.42rem;
  height: 1.42rem;
  padding: .13rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .2rem rgba(255, 255, 255, .82), 0 .12rem .3rem rgba(0, 0, 0, .42);
}

.login-main .logoo .r .s[data-v-07f8bd43] {
  min-width: 2.36rem;
  height: .76rem;
  margin-left: -.24rem;
  padding: 0 .3rem 0 .48rem;
  border: 1px solid rgba(174, 224, 255, .8);
  border-radius: .12rem;
  background: linear-gradient(100deg, rgba(78, 142, 196, .86), rgba(132, 213, 255, .94));
  box-shadow: inset 0 .02rem .16rem rgba(255, 255, 255, .32), 0 .12rem .28rem rgba(10, 33, 59, .42);
}

.login-main .logoo .r .s p[data-v-07f8bd43] {
  font-size: .36rem;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 .03rem .08rem rgba(0, 0, 0, .26);
}

.login-main .logoo .ms[data-v-07f8bd43] {
  display: none;
}

.login-main .form {
  z-index: 2;
  margin-top: 0;
  padding: 1.68rem .52rem .68rem;
  min-height: 8.18rem;
  border: 1px solid rgba(185, 212, 235, .22);
  border-radius: .22rem;
  background:
    linear-gradient(180deg, rgba(45, 59, 78, .5), rgba(11, 20, 35, .74)),
    rgba(12, 22, 38, .54);
  box-shadow:
    inset 0 0 .56rem rgba(210, 226, 243, .11),
    inset 0 0 .08rem rgba(255, 255, 255, .25),
    0 .2rem .56rem rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
}

.login-main .form-title {
  display: block;
  margin-bottom: .68rem;
  text-align: center;
}

.login-main .form-title strong {
  display: block;
  font-family: STSong, SimSun, Songti SC, serif;
  font-size: .56rem;
  line-height: .72rem;
  font-weight: 700;
  color: #e7c58c;
  text-shadow: 0 .04rem .1rem rgba(0, 0, 0, .58), 0 0 .04rem rgba(255, 238, 190, .28);
}

.login-main .form .formItem {
  height: .88rem;
  margin-top: .34rem;
  padding: 0 .3rem;
  border: 2px solid rgba(203, 159, 105, .92);
  border-radius: .42rem;
  background: rgba(9, 22, 39, .56);
  box-shadow: inset 0 0 .18rem rgba(255, 255, 255, .04), 0 .04rem .12rem rgba(0, 0, 0, .2);
}

.login-main .form .formItem .field-icon {
  flex-basis: .5rem;
  width: .5rem;
  height: .56rem;
  margin-right: .24rem;
}

.login-main .form .formItem img {
  width: .4rem;
  height: .4rem;
  filter: sepia(1) saturate(1.15) hue-rotate(351deg) brightness(1.1);
}

.login-main .form .formItem input {
  font-size: .34rem;
  color: #dfbd88;
}

.login-main .form .formItem input::placeholder {
  color: rgba(223, 189, 136, .82);
}

.login-main .form .submit {
  height: .9rem;
  margin-top: .72rem;
  border-radius: .5rem;
  font-size: .38rem;
  font-weight: 700;
  color: #fff0d2;
  background: linear-gradient(180deg, #176fae 0%, #07518d 58%, #043465 100%);
  border: 1px solid rgba(203, 159, 105, .82);
  box-shadow:
    0 .1rem 0 #b49259,
    0 .18rem .26rem rgba(0, 0, 0, .42),
    inset 0 .03rem .18rem rgba(168, 221, 255, .44);
  text-shadow: 0 .03rem .1rem rgba(0, 0, 0, .45);
}

.register-main {
  justify-content: flex-start;
  padding-top: .52rem;
  padding-bottom: .48rem;
  overflow-y: auto;
}

.register-main .title {
  margin-bottom: -.5rem;
}

.register-main .logoo .r[data-v-07f8bd43] {
  min-height: 1.26rem;
}

.register-main .logoo .r img[data-v-07f8bd43] {
  width: 1.26rem;
  height: 1.26rem;
}

.register-main .logoo .r .s[data-v-07f8bd43] {
  min-width: 2.16rem;
  height: .68rem;
}

.register-main .logoo .r .s p[data-v-07f8bd43] {
  font-size: .32rem;
}

.register-main .form {
  padding-top: 1.42rem;
  padding-bottom: .5rem;
  min-height: auto;
}

.register-main .form-title {
  margin-bottom: .36rem;
}

.register-main .form-title strong {
  font-size: .48rem;
  line-height: .62rem;
}

.register-main .form .formItem {
  height: .78rem;
  margin-top: .24rem;
  border-width: 1px;
}

.register-main .form .formItem input {
  font-size: .28rem;
}

.register-main .form .formItem input::placeholder {
  color: rgba(223, 189, 136, .72);
}

.register-main .form .formItem .Code {
  flex-basis: 2.08rem;
  width: 2.08rem;
  height: .58rem;
  padding: 0;
  border-color: rgba(203, 159, 105, .82);
  background: rgba(255, 255, 255, .96);
}

.register-main .form .formItem .Code img {
  width: 100%;
  height: 100%;
  border-radius: .05rem;
  object-fit: fill;
  filter: none;
}

.register-main .xieyi {
  margin-top: .26rem;
  color: #e7c58c;
}

.register-main .xieyi .checkbox {
  accent-color: #0f6da8;
}

.register-main .xieyi span {
  color: #e7c58c;
}

.register-main .form .submit {
  height: .82rem;
  margin-top: .38rem;
  font-size: .34rem;
}

.register-main .tip {
  padding-top: .36rem;
  color: #e7c58c;
}

.login-main .tip {
  gap: .3rem;
  padding-top: .66rem;
  font-size: .3rem;
  line-height: .46rem;
}

.login-main .tip a {
  color: #e7c58c;
}

.login-main .tip i {
  width: 1px;
  height: .34rem;
  background: rgba(231, 197, 140, .85);
}

@media (max-width: 360px) {
  .login-main {
    padding-left: .36rem;
    padding-right: .36rem;
  }

  .login-main .form {
    padding-left: .38rem;
    padding-right: .38rem;
  }

  .login-main .form-title strong {
    font-size: .5rem;
  }

  .login-main .logoo .r img[data-v-07f8bd43] {
    width: 1.3rem;
    height: 1.3rem;
  }

  .login-main .logoo .r .s[data-v-07f8bd43] {
    min-width: 2.08rem;
    height: .68rem;
  }

  .login-main .logoo .r .s p[data-v-07f8bd43] {
    font-size: .32rem;
  }
}