@charset "UTF-8";
body {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

线性背景 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/** begin 气泡背景 ***/
body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #000099;
  overflow: hidden;
}

body span {
  width: 16vmin;
  height: 16vmin;
  border-radius: 16vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 27;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

body span:nth-child(0) {
  color: #f808f4;
  top: 2%;
  left: 88%;
  animation-duration: 68s;
  animation-delay: -76s;
  transform-origin: -24vw 1vh;
  box-shadow: -32vmin 0 4.0255306394vmin currentColor;
}

body span:nth-child(1) {
  color: #9966ff;
  top: 35%;
  left: 45%;
  animation-duration: 234s;
  animation-delay: -34s;
  transform-origin: 5vw -22vh;
  box-shadow: -32vmin 0 4.9075038973vmin currentColor;
}

body span:nth-child(2) {
  color: #583C87;
  top: 99%;
  left: 15%;
  animation-duration: 19s;
  animation-delay: -59s;
  transform-origin: 14vw -20vh;
  box-shadow: -32vmin 0 4.3333647877vmin currentColor;
}

body span:nth-child(3) {
  color: #007bff;
  top: 45%;
  left: 82%;
  animation-duration: 37s;
  animation-delay: -61s;
  transform-origin: -1vw -2vh;
  box-shadow: -32vmin 0 4.7250660301vmin currentColor;
}

body span:nth-child(4) {
  color: #eef51c;
  top: 11%;
  left: 54%;
  animation-duration: 33s;
  animation-delay: -107s;
  transform-origin: -20vw -9vh;
  box-shadow: -32vmin 0 4.8578302276vmin currentColor;
}

body span:nth-child(5) {
  color: #4ebf58;
  top: 22%;
  left: 77%;
  animation-duration: 167s;
  animation-delay: -10s;
  transform-origin: 8vw -14vh;
  box-shadow: -32vmin 0 4.5228544585vmin currentColor;
}

body span:nth-child(6) {
  color: #007bff;
  top: 29%;
  left: 4%;
  animation-duration: 118s;
  animation-delay: -165s;
  transform-origin: -4vw -18vh;
  box-shadow: -32vmin 0 4.6050548401vmin currentColor;
}

body span:nth-child(7) {
  color: #ffffff;
  top: 75%;
  left: 49%;
  animation-duration: 62s;
  animation-delay: -190s;
  transform-origin: -14vw 23vh;
  box-shadow: 32vmin 0 4.9504773871vmin currentColor;
}

body span:nth-child(8) {
  color: #583C87;
  top: 2%;
  left: 46%;
  animation-duration: 158s;
  animation-delay: -152s;
  transform-origin: -13vw 19vh;
  box-shadow: -32vmin 0 4.5213171705vmin currentColor;
}

body span:nth-child(9) {
  color: #28a745;
  top: 1%;
  left: 25%;
  animation-duration: 58s;
  animation-delay: -38s;
  transform-origin: -9vw -13vh;
  box-shadow: -32vmin 0 4.3852562982vmin currentColor;
}

body span:nth-child(10) {
  color: #583C87;
  top: 31%;
  left: 78%;
  animation-duration: 146s;
  animation-delay: -120s;
  transform-origin: -4vw -22vh;
  box-shadow: 32vmin 0 4.2697709991vmin currentColor;
}

body span:nth-child(11) {
  color: #99ffcc;
  top: 97%;
  left: 97%;
  animation-duration: 136s;
  animation-delay: -40s;
  transform-origin: 16vw -23vh;
  box-shadow: 32vmin 0 4.8377461521vmin currentColor;
}

body span:nth-child(12) {
  color: #fd7e14;
  top: 64%;
  left: 5%;
  animation-duration: 150s;
  animation-delay: -103s;
  transform-origin: -23vw -23vh;
  box-shadow: -32vmin 0 4.7315102498vmin currentColor;
}

body span:nth-child(13) {
  color: #28a745;
  top: 1%;
  left: 73%;
  animation-duration: 59s;
  animation-delay: -28s;
  transform-origin: 12vw 25vh;
  box-shadow: -32vmin 0 4.5697439694vmin currentColor;
}

body span:nth-child(14) {
  color: #007bff;
  top: 70%;
  left: 4%;
  animation-duration: 172s;
  animation-delay: -170s;
  transform-origin: 25vw 18vh;
  box-shadow: -32vmin 0 4.8543771492vmin currentColor;
}

body span:nth-child(15) {
  color: #007bff;
  top: 100%;
  left: 61%;
  animation-duration: 18s;
  animation-delay: -180s;
  transform-origin: 0vw -12vh;
  box-shadow: -32vmin 0 4.5484945522vmin currentColor;
}

body span:nth-child(16) {
  color: #28a745;
  top: 53%;
  left: 19%;
  animation-duration: 74s;
  animation-delay: -26s;
  transform-origin: -15vw -9vh;
  box-shadow: -32vmin 0 4.7288622595vmin currentColor;
}

body span:nth-child(17) {
  color: #fd7e14;
  top: 94%;
  left: 53%;
  animation-duration: 162s;
  animation-delay: -123s;
  transform-origin: -5vw 9vh;
  box-shadow: 32vmin 0 4.2744848195vmin currentColor;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
/** end 气泡背景 ***/
img {
  width: 100%;
}

.container {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.3);
  display: flex;
  overflow: hidden;
}

.left .contact {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 100%;
  width: 100%;
  margin: auto;
}

.left .title {
  display: block !important;
  color: #fff;
  font-size: 26px;
  text-align: center;
  margin-bottom: 3rem;
}

.right {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 1rem;
}

.right::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*    background-color: rgba(207, 208, 218, 0.3);*/
}

.right img {
  display: block;
  max-width: 100%;
  height: auto;
}

.right .right-text {
  height: 100%;
  position: relative;
  transform: translate(0%, 45%);
}

.right-text h2 {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 50px;
  font-weight: 500;
}

.right-text h5 {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.right .right-inductor {
  position: absolute;
  width: 70px;
  height: 7px;
  background: rgba(255, 255, 255, 0);
  left: 50%;
  bottom: 70px;
  transform: translate(-50%, 0%);
}

.top_link img {
  width: 28px;
  padding-right: 7px;
  margin-top: -3px;
}

.group {
  position: relative;
  margin-bottom: 2rem;
}

input {
  padding: 0.7rem 1rem 0.7rem 1rem;
  display: block;
  width: 100%;
  border: none;
  border-radius: 3px;
}

input[type=text],
input[type=password],
input:focus {
  outline: #639BFF solid 2px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #FFF;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #1E6FFF;
  outline: #1E6FFF solid 2px;
}

.group input:focus {
  border-bottom: 2px solid #fff;
  animation: border-animation 1s infinite linear;
}

@keyframes border-animation {
  0% {
    border-bottom-color: #fff;
  }
  50% {
    border-bottom-color: #007bff;
  }
  100% {
    border-bottom-color: #fff;
  }
}
input[type=checkbox] {
  color: #fff;
  accent-color: #1E6FFF;
}

.submit {
  width: 100%;
  color: #eee;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 20px;
  line-height: 1.5rem;
  border: none;
  border-radius: 3px;
  display: block;
  margin: auto;
  overflow: hidden;
  background-color: #3EECAC;
  background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
}

.submit:hover,
.submit:focus {
  color: #fff;
}

.submit:hover {
  background-color: #21D4FD;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}

.submit {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}

label.remember {
  color: #eee;
}

ul.msg {
  position: relative;
  top: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#form\:msg li {
  margin: 0;
  display: inline;
}

ul#form\:msg li:not(:last-child)::after {
  content: ",";
}

ul#form\:msg li:not(:first-child)::before {
  content: "";
  margin-left: 0.5rem;
}

li.error {
  color: #ffda7c;
  font-size: 14px;
}

/**
响应式
**/
@media (max-width: 767px) {
  .box {
    width: 300px;
    height: 400px;
    border-radius: 0px;
    border-radius: 8px;
    transform: translate(-50%, -50%);
  }
  .box .left {
    width: 100%;
    height: 100%;
    padding: 25px 25px;
  }
  .box .right {
    width: 0%;
    height: 100%;
  }
  .submit {
    margin-top: 40px;
  }
}
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .box {
    width: 600px;
    height: 400px;
    border-radius: 6px;
  }
  .box .left {
    width: 50%;
    height: 100%;
    padding: 5px 5px;
  }
  .box .right {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .submit {
    margin-top: 60px;
  }
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
  .box {
    width: 600px;
    height: 400px;
    border-radius: 8px;
  }
  .box .left {
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 50%;
    height: 100%;
    padding: 5px 5px;
  }
  .box .right {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .submit {
    margin-top: 60px;
  }
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
  .box {
    width: 600px;
    height: 400px;
    border-radius: 8px;
  }
  .box .left {
    width: 50%;
    height: 100%;
    padding: 25px 25px;
  }
  .box .right {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .submit {
    margin-top: 2rem;
  }
}/*# sourceMappingURL=login.css.map */