[data-theme="dark"] #loader .loading-bg {
  background-color: rgba(37, 37, 37, 0.9);
}

[data-theme="dark"] #loader .spinner-box .loading-word {
  color: var(--red-1, #ff5252);
}

#loader .loading-bg {
  position: fixed;
  z-index: 1000;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.8s;
}

#loader .loading-right-bg {
  right: 0;
}

#loader .spinner-box {
  position: fixed;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  opacity: 1;
  transition: 0.5s;
}

#loader .spinner-box .loading-taichi {
  opacity: 0.8;
}

#loader .spinner-box .rotate {
  animation: rotate-all 2s linear infinite;
}

#loader .spinner-box .loading-word {
  position: absolute;
  color: var(--red-1, #ff5252);
  top: calc(50% + 110px);
  left: 50%;
  transform: translate(-50%, -50%);
  font: 700 1.2rem "Mulish", "Noto Serif SC", "Mulish", "Noto Serif SC", "-apple-system", "PingFang SC", "Microsoft YaHei", "sans-serif";
}

#loader.loading .loading-left-bg {
  transform: translateX(-100%);
}

#loader.loading .loading-right-bg {
  transform: translateX(100%);
}

#loader.loading .spinner-box {
  opacity: 0;
  visibility: hidden;
}

@keyframes rotate-all {
  to {
    transform: rotate(360deg);
  }
}