@charset "UTF-8";
body {
  overflow: hidden;
}

#divNumber {
  position: fixed;
  z-index: 10;
  top: 1rem;
  left: 1rem;
  display: flex;
  margin: 0.2rem;
  align-items: center;
}
#divNumber img {
  width: 1.2rem;
  height: 1.2rem;
  -o-object-fit: contain;
     object-fit: contain;
}
#divNumber > div {
  text-align: center;
  width: 1.2rem;
  aspect-ratio: 1/1;
  overflow: hidden;
}
#divNumber > div div {
  transform: translateY(0%);
}
#divNumber > div.ty0 div {
  color: var(--number-color-0);
  transform: translateY(0%);
  animation-name: ty0;
  animation-duration: 0s;
}
#divNumber > div.ty1 div {
  color: var(--number-color-1);
  transform: translateY(-100%);
  animation-name: ty1;
  animation-duration: 0.2s;
}
#divNumber > div.ty2 div {
  color: var(--number-color-2);
  transform: translateY(-200%);
  animation-name: ty2;
  animation-duration: 0.4s;
}
#divNumber > div.ty3 div {
  color: var(--number-color-3);
  transform: translateY(-300%);
  animation-name: ty3;
  animation-duration: 0.6s;
}
#divNumber > div.ty4 div {
  color: var(--number-color-4);
  transform: translateY(-400%);
  animation-name: ty4;
  animation-duration: 0.8s;
}
#divNumber > div.ty5 div {
  color: var(--number-color-5);
  transform: translateY(-500%);
  animation-name: ty5;
  animation-duration: 1s;
}
#divNumber > div.ty6 div {
  color: var(--number-color-6);
  transform: translateY(-600%);
  animation-name: ty6;
  animation-duration: 1.2s;
}
#divNumber > div.ty7 div {
  color: var(--number-color-7);
  transform: translateY(-700%);
  animation-name: ty7;
  animation-duration: 1.4s;
}
#divNumber > div.ty8 div {
  color: var(--number-color-8);
  transform: translateY(-800%);
  animation-name: ty8;
  animation-duration: 1.6s;
}
#divNumber > div.ty9 div {
  color: var(--number-color-9);
  transform: translateY(-900%);
  animation-name: ty9;
  animation-duration: 1.8s;
}

@keyframes ty0 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes ty1 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes ty2 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-200%);
  }
}
@keyframes ty3 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-300%);
  }
}
@keyframes ty4 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-400%);
  }
}
@keyframes ty5 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-500%);
  }
}
@keyframes ty6 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-600%);
  }
}
@keyframes ty7 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-700%);
  }
}
@keyframes ty8 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-800%);
  }
}
@keyframes ty9 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-900%);
  }
}
.mobile audio {
  display: none;
  width: 0px;
  height: 0px;
}

@keyframes music-play {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.start-button {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition: 0.1s;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #ddebf0;
}
.start-button #rightArrow {
  /* background-color: #27c39f; */
  left: -20%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}
.start-button #leftArrow {
  /* background-color: #27c39f; */
  left: 115%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}
.start-button .corner {
  transform: scale(1.25) rotate(45deg);
}

#clip {
  --color: #2761c3;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 5px double var(--color);
  box-shadow: inset 0px 0px 15px #195480;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
  position: absolute;
  transition: 0.2s;
  background-color: #2761c3;
  top: 35%;
  width: 11%;
  height: 30%;
}

#leftArrow {
  left: -13.5%;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
  clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #2761c3;
  box-shadow: inset 1px 1px 8px #2781c3;
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3em;
}

#leftBottom {
  top: 2.1em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

@keyframes changeColor8 {
  from {
    background-color: #2781c3;
  }
  to {
    background-color: #27c39f;
  }
}
@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }
  to {
    box-shadow: 0 0 2px #27c39f;
  }
}
@keyframes greenLight8 {
  to {
    box-shadow: inset 0px 0px 32px #27c39f;
  }
}
@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
.bluelight {
  display: table;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bluelight a {
  display: table-cell;
  font-size: 3em;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  transition: background 1s, border-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), text-shadow 0.5s;
  color: #daf6ff;
  text-shadow: 0 0 20px rgb(10, 175, 230), 0 0 20px rgba(10, 175, 230, 0);
  box-shadow: 0 0 0 rgba(10, 175, 230, 0), inset 0 0 0 rgba(10, 175, 230, 0);
  background-image: radial-gradient(center, ellipse cover, rgba(10, 175, 230, 0) 0%, rgba(10, 175, 230, 0) 90%);
  border: 0 dotted rgba(10, 175, 230, 0);
}
.bluelight a:hover {
  color: #fff;
  text-shadow: 0 0 50px rgb(10, 175, 230), 0 0 50px rgb(10, 175, 230);
  background-image: radial-gradient(center, ellipse cover, rgba(10, 175, 230, 0.3) 0%, rgba(10, 175, 230, 0) 60%);
}

.bluelight:before,
.bluelight:after,
.bluelight a:before,
.bluelight a:after {
  transition: 0.2s ease-in-out;
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 60px dashed transparent;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bluelight:before {
  animation: rotate 20s linear 0s infinite;
  width: 180%;
  height: 180%;
  border: 3px dotted rgba(10, 175, 230, 0);
  z-index: -1;
}

.bluelight:after {
  animation: rotate 10s linear 0s infinite reverse;
  border: 80px dashed rgba(10, 175, 230, 0);
  width: 160%;
  height: 160%;
  z-index: -2;
}

.bluelight a:before {
  animation: rotate 5s ease-in-out 0s infinite alternate;
  width: 120%;
  height: 120%;
  border: 50px dashed rgba(10, 175, 230, 0);
}

.bluelight a:after {
  animation: rotate 5s linear 0s infinite;
  border: 18px dashed rgba(10, 175, 230, 0);
  width: 120%;
  height: 120%;
}

.bluelight:hover:before {
  border-color: rgba(10, 175, 230, 0.3);
}

.bluelight:hover:after {
  border-color: rgba(10, 175, 230, 0.1);
}

.bluelight:hover a:before {
  border-color: rgba(10, 175, 230, 0.3);
}

.bluelight:hover a:after {
  border-color: rgba(10, 175, 230, 0.3);
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
p.caption {
  font-size: 0.7em;
  text-align: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px rgb(10, 175, 230), 0 0 20px rgba(10, 175, 230, 0);
}

.div_beian {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6);
}
.div_beian a {
  color: #fff;
  text-decoration: none;
}
.div_beian a:hover {
  text-decoration: underline;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

main > div > div:first-of-type {
  font-size: 2rem;
  margin: 1rem;
}

.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: inset(-45px);
  box-shadow: -60px 15px, -60px 15px, -60px 15px;
  transform: translateY(-15px);
  animation: l19 1s infinite linear;
}

@keyframes l19 {
  16.67% {
    box-shadow: -60px 15px, -60px 15px, 19px 15px;
  }
  33.33% {
    box-shadow: -60px 15px, 0px 15px, 19px 15px;
  }
  40%, 60% {
    box-shadow: -19px 15px, 0px 15px, 19px 15px;
  }
  66.67% {
    box-shadow: -19px 15px, 0px 15px, 60px 15px;
  }
  83.33% {
    box-shadow: -19px 15px, 60px 15px, 60px 15px;
  }
  100% {
    box-shadow: 60px 15px, 60px 15px, 60px 15px;
  }
}
.btn-mv {
  margin: 0;
  height: auto;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  --border-right: 6px;
  --text-stroke-color: rgba(255, 255, 255, 0.6);
  --animation-color: #37ff8b;
  --fs-size: 2em;
  letter-spacing: 3px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
.btn-mv:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color));
}

.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}

/* 播放按钮 */
.play-box {
  position: fixed;
  z-index: 2;
  right: 1rem;
  top: 1rem;
}
.play-box.mobile img {
  width: 2rem;
  aspect-ratio: 1/1;
}
.play-box.mobile img.active {
  animation: music-play infinite 2s linear;
}