* {
  margin: 0;
  padding: 0;
}
:root {
  --rate: 1;
}
@media screen and (max-width: 960px) {
  :root {
    --rate: 2;
  }
}
.spirit_into-1,
.spirit_into-2,
.spirit_into-3,
.spirit_into-4 {
  width: calc(26.0417vw / 2 * var(--rate));
  height: calc(24.2188vw / 2 * var(--rate));
  background-size: calc(52.0833vw / 2 * var(--rate)) calc(48.4375vw / 2 * var(--rate));
  background-image: url("https://lengyibai.github.io/wzry-material/image/white_logo.png");
}
.spirit_into-1 {
  background-position: 0 0;
}
.spirit_into-2 {
  background-position: calc(-26.0417vw / 2 * var(--rate)) 0;
}
.spirit_into-3 {
  background-position: 0 calc(-24.2188vw / 2 * var(--rate));
}
.spirit_into-4 {
  background-position: calc(-26.0417vw / 2 * var(--rate)) calc(-24.2188vw / 2 * var(--rate));
}
.body {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  user-select: none;
}
.body .loading {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 960px) {
  .body .loading {
    flex-direction: column;
  }
}
.body .loading .box {
  animation:
    into-scale 3s forwards ease-out,
    into-opacity 2s forwards;
}
@keyframes into-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes into-scale {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.body .loading .box .logo {
  width: calc(26.0417vw / 2 * var(--rate));
  height: calc(24.2188vw / 2 * var(--rate));
}
@media screen and (max-width: 960px) {
  .body .loading .box .logo {
    --rate: 2.5;
  }
}
.body .loading .box .logo .a,
.body .loading .box .logo .b,
.body .loading .box .logo .c,
.body .loading .box .logo .d {
  position: absolute;
}
.body .loading .box .logo .inside-box {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: inside-box 6s 3s infinite linear;
}
@keyframes inside-box {
  100% {
    transform: rotate(-360deg);
  }
}
.body .loading .box .logo .inside-box .inside {
  width: 100%;
  height: 100%;
  animation: inside-rotate 3s forwards linear;
}
@keyframes inside-rotate {
  100% {
    transform: rotate(-360deg);
  }
}
.body .loading .box .logo .inside-box .inside .a {
  animation: into-a 3s forwards ease-out;
}
@keyframes into-a {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.body .loading .box .logo .inside-box .inside .b {
  animation: into-b 3s forwards ease-out;
}
@keyframes into-b {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.body .loading .box .logo .outside-box {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: outside-box 3s 3s infinite linear;
}
@keyframes outside-box {
  100% {
    transform: rotate(360deg);
  }
}
.body .loading .box .logo .outside-box .outside {
  width: 100%;
  height: 100%;
  animation: outside-rotate 3s forwards linear;
}
@keyframes outside-rotate {
  100% {
    transform: rotate(360deg);
  }
}
.body .loading .box .logo .outside-box .outside .c {
  animation: into-c 3s forwards ease-out;
}
@keyframes into-c {
  0% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.body .loading .box .logo .outside-box .outside .d {
  animation: into-d 3s forwards ease-out;
}
@keyframes into-d {
  0% {
    transform: translate(100%, 100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.body .loading .text-box {
  position: relative;
  overflow: hidden;
  width: 0;
  height: calc(13.8021vw * var(--rate));
  animation: into-move 0.5s 2.9s forwards;
}
@keyframes into-move {
  100% {
    margin-left: 2.6042vw;
    width: calc(37.0833vw * var(--rate));
  }
}
.body .loading .text-box .text {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #fff, #fff) no-repeat right center / 100% 100%;
  animation: leave-bg 0.5s 3.25s forwards;
}
@keyframes leave-bg {
  100% {
    background-size: 0 100%;
  }
}
@media screen and (max-width: 960px) {
  .body .loading .text-box {
    height: 0;
  }
  @keyframes into-move {
    100% {
      margin-left: 0;
      margin-top: 5vw;
      width: calc(37.0833vw * var(--rate));
      height: calc(13.8021vw * var(--rate));
    }
  }
}
.body .into {
  position: absolute;
  bottom: 1em;
  right: 3em;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: calc(2.5vw * var(--rate));
  transform: translateX(-50%);
  opacity: 0;
  animation: into 0.75s 3s forwards;
}
@keyframes into {
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.body .into .text {
  margin-right: 1em;
  font-size: inherit;
  font-weight: bold;
}
.body .into .arrows {
  position: relative;
  display: flex;
  align-items: center;
}
.body .into .arrows .arrow {
  position: absolute;
  font-size: inherit;
  color: #fff;
  left: calc(var(--i) * -1vw * var(--rate));
  animation: move 1.75s calc(var(--i) * 0.3s) linear infinite;
}
@keyframes move {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(3vw * var(--rate)));
    opacity: 0;
  }
}