html,body{
  color: rgba(255,255,255);
  overflow: hidden;
  height: 100%;
}

p {
  position: absolute;
  top: 680px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font-size: 11px;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1a1a;
    z-index: 9999;
}

#container {
  position: relative;
  height: 100vh;
  background: #9a0000;
  overflow: hidden;
}

#bg {
  animation: slideDown 2s forwards; /* 应用动画 */
}

@keyframes slideDown {
  from {
    top: -500px; /* 开始位置 */
  }
  to {
    top: 0px; /* 结束位置 */
  }
}

#logo {
  position: absolute;
  z-index: 1;
  left: 32px;
  animation: slideDown2 1s forwards; /* 应用动画 */
}

@keyframes slideDown2 {
  from {
    top: -100px; /* 开始位置 */
  }
  to {
    top: 31px; /* 结束位置 */
  }
}

#music {
  position: absolute;
  border: 0 none;
  top: 31px;
  z-index: 20;
  right: 31px;
}

.music-on {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rightToCenter {
  animation: rightToCenter 2s forwards; /* 应用动画 */
}

@keyframes rightToCenter {
  from {
    right: -100px; /* 开始位置 */
  }
  to {
    right: 0px; /* 结束位置 */
  }
}

.leftToCenter {
  animation: leftToCenter 2s forwards; /* 应用动画 */
}

@keyframes leftToCenter {
  from {
    left: -100px; /* 开始位置 */
  }
  to {
    left: 0px; /* 结束位置 */
  }
}

.title {
  position: absolute;
  z-index: 2;
  top: 99px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.title-s {
  position: absolute;
  z-index: 1;
  top: 132px;
  left: -50px;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  animation: fadeIn 1s ease 1.3s forwards;
}

.tagline {
  position: absolute;
  z-index: 2;
  top: 610px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tagline-s {
  position: absolute;
  z-index: 1;
  top: 643px;
  left: -37px;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  animation: fadeIn 1s ease 1.3s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#rotate {
  position: absolute; 
  top: 184.2px; 
  left: -50%;
  right: -50%;
  width: 405px; 
  height: 405px; 
  background: transparent url(/views/assets/base/img/moon.png) no-repeat bottom center;
  background-size: cover; 
  transition: transform 0s;
  margin: 0 auto;
  z-index: 1;
}

#circle {
  position: absolute;
  width: 279.4px;
  height: 279.4px;
  top: 244px;
  left: -50%;
  right: -50%;
  margin: 0 auto;
  background: transparent url(/views/assets/base/img/circle-1.png) no-repeat center center;
  background-size: cover;
  transition: opacity 1s;
  z-index: 1;
}

#indicator {
  position: absolute;
  top: 220px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#finger {
  position: absolute;
  top: 220px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#redirect {
  position: absolute;
  top: 610px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.grow {
  animation: grow 2s forwards; /* 应用动画，持续2秒，结束后保持最终状态 */
}

@keyframes grow {
  from {
    transform: scale(0); /* 开始时元素大小 */
  }
  to {
    transform: scale(1); /* 结束时元素大小 */
  }
}

#m1 {
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#m2 {
  position: absolute;
  top: 114px;
  left: -2px;
}

#m3 {
  position: absolute;
  top: 323px;
  left: 65px;
}

#m4 {
  position: absolute;
  top: 323px;
  right: 65px;
}

#m5 {
  position: absolute;
  top: 114px;
  right: -2px;
}