@keyframes logo {
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes text {
  100% {
    opacity: 1;
  }
}
@keyframes let {
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes enter {
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(10deg);
  }
  90% {
    transform: rotate(-10deg);
  }
  95% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.wrap .wrap-in {
  display: flex;
  justify-content: space-between;
}
.wrap .wrap-in .wrap-left {
  width: 700px;
}
.wrap .wrap-in .wrap-right {
  width: 480px;
  padding-top: 80px;
}
.wrap .wrap-in .wrap-right .card-box {
  margin-bottom: 40px;
}
.welcome .logo {
  display: block;
  width: 300px;
  padding-top: 50px;
  margin: 0 auto;
  transform: translateY(-50px);
  animation: 0.6s logo;
  animation-fill-mode: forwards;
  opacity: 0;
}
.welcome .text {
  opacity: 0;
  display: block;
  color: #00bbec;
  font-size: 20px;
  letter-spacing: 3px;
  padding: 9px 4px 14px;
  text-align: center;
  margin: 40px auto;
  width: 350px;
  border: 4px solid #00bbec;
  border-radius: 8px;
  box-sizing: border-box;
  animation: 0.6s 0.5s text;
  animation-fill-mode: forwards;
}
.welcome .text p {
  color: #0099cc;
  text-align: center;
}
.welcome .let {
  opacity: 0;
  transform: translateY(100px);
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
  animation: 0.6s 1s let;
  animation-fill-mode: forwards;
}
.welcome .let1 {
  animation: 0.6s 1.3s let;
  animation-fill-mode: forwards;
}
.welcome .let2 {
  animation: 0.6s 1.6s let;
  animation-fill-mode: forwards;
}
.welcome .let3 {
  animation: 0.6s 1.9s let;
  animation-fill-mode: forwards;
}
.welcome .let4 {
  animation: 0.6s 2.3s let;
  animation-fill-mode: forwards;
}
.welcome .enter {
  display: none;
  transform-origin: center;
  transform: rotate(0deg);
  font-size: 20px;
  text-align: center;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  color: white;
  background: #0099CC;
  margin: 40px auto;
  opacity: 0;
  transform: translateY(50px);
  animation: 1.2s 2.9s enter;
  animation-fill-mode: forwards;
}
.yuyue {
  margin: 50px auto;
  width: 330px;
  padding-top: 20px;
  animation: 0.6s 2.8s let;
  transform: translateY(50px);
  opacity: 0;
  animation-fill-mode: forwards;
}
.yuyue .login-link {
  display: block;
  text-align: center;
  margin-top: 50px;
  cursor: pointer;
}
.yuyue .title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.yuyue .time,
.yuyue .has {
  text-align: center;
  font-size: 15px;
  color: #969696;
}
.yuyue .back {
  text-decoration: none;
  margin-top: 50px;
  display: block;
  text-align: center;
  color: #0099ff;
}
.yuyue .form {
  margin: 20px auto;
  width: 330px;
}
.yuyue input {
  outline: none;
  display: block;
  width: 330px;
  border: none;
  border-bottom: 2px solid #cad2da;
  padding: 15px 10px ;
  font-size: 20px;
  margin-top: 10px;
}
.yuyue input[type="submit"] {
  background: #398bdf;
  border: none;
  width: 330px;
  color: #ffffff;
  letter-spacing: 20px;
}
.yuyue textarea {
  margin-top: 15px;
  padding: 5px;
  width: 330px;
  height: 100px;
  outline: none;
  border: none;
  border-bottom: 2px solid #cad2da;
  resize: none;
  font-size: 20px;
}
.js-content {
  height: 300px;
  overflow: hidden;
}
.js-content img {
  max-width: 100%;
}