@-webkit-keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#playing {
  position: fixed; top: 2.604167vw; right: 2.083333vw; z-index: 10;
  width: 2.34375vw; height: 2.34375vw;
  border: 3px solid var(--bg-color); border-radius: 50%;
  -webkit-animation-name: rotate; animation-name: rotate;
  -webkit-animation-duration: 10s; animation-duration: 10s;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-play-state: paused; animation-play-state: paused;
}

#playing.playing {
  -webkit-animation-play-state: running; animation-play-state: running;
}

#playing .play { display: none; width: 65%; }

#playing .pause, #playing.playing .play { display: block; }

#playing.playing .pause { display: none; }

#playing svg { width: 70%; fill: var(--bg-color); }

/* TODO PC 样式 */
.theme, .theme-mobile {
  width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
}

.theme .area, .theme-mobile .area {
  width: 100%; background-repeat: no-repeat; background-size: 100% 100%;
}

.theme .area .area-inner, .theme-mobile .area .area-inner { position: relative; width: 100%; height: 100%; }

.theme .theme-top { 
  padding-top: 2.25%; height: 31.797651%; background-image: url("../images/theme/4.png"); opacity: 0;
}

.theme .theme-middle { 
  height: 38.663053%; background-image: url("../images/theme/5.png"); opacity: 0;
}

.theme .theme-bottom {
  height: 29.539295%; background-image: url("../images/theme/6.png"); opacity: 0;
}

.loaded .theme .theme-top { 
  -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme .theme-middle { 
  -webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme .theme-bottom {
  -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.theme .theme-top .theme-title-wrap { position: relative; height: 100%; }

.theme .theme-top .theme-title, .theme .theme-top .theme-sub-title {
  display: block; width: auto; margin: 0 auto; opacity: 0; perspective: 100px;
}

.theme .theme-top .theme-title { height: 55%; }

.theme .theme-top .theme-sub-title { height: 10.5%; margin-top: 1.041667vw; }

.loaded .theme .theme-top .theme-title {
  -webkit-animation: zoomIn 1s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: zoomIn 1s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme .theme-top .theme-sub-title {
  -webkit-animation: zoomIn 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: zoomIn 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.theme .theme-top .theme-left {
  position: absolute; top: 10%; left: -26%; width: auto; height: 80%; opacity: 0;
}

.loaded .theme .theme-top .theme-left {
  -webkit-animation: fadeInLeft 0.8s 2.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: fadeInLeft 0.8s 2.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.theme .theme-bottom .theme-right {
  position: absolute; right: -2.75%; bottom: 4%; width: 31.287247%; opacity: 0;
}

.loaded .theme .theme-bottom .theme-right {
  -webkit-animation: slide-in-right 1s 3.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: slide-in-right 1s 3.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.theme .jump-button {
  position: static; width: 100%; height: 100%;
  font-size: var(--text-size); color: var(--text-light-color);
}

.theme .jump-button svg {
  width: 1.302083vw; height: 1.302083vw; margin-left: .520833vw;
}

.theme .jump-button-wrap {
  opacity: 0; position: absolute; width: 14.583333vw; height: 3.125vw; bottom: 13%; left: calc(50% - 7.291667vw);
}

.loaded .theme .jump-button-wrap {
  -webkit-animation: fadeInUp 0.75s 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: fadeInUp 0.75s 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@media screen and (max-width: 992px) and (orientation: landscape) {
  .theme .jump-button-wrap { bottom: 10%; }
}

/* TODO 移动样式 */
.theme-mobile .theme-top { 
  padding-top: 7.5%; height: 35.303776%; background-image: url("../images/theme/mobile/5.png"); opacity: 0;
}

.theme-mobile .theme-middle { 
  height: 29.105090%; background-image: url("../images/theme/mobile/6.png"); opacity: 0;
}

.theme-mobile .theme-bottom {
  height: 35.673235%; background-image: url("../images/theme/mobile/7.png"); opacity: 0;
}

.loaded .theme-mobile .theme-top { 
  -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme-mobile .theme-middle { 
  -webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme-mobile .theme-bottom {
  -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.theme-mobile .theme-top .theme-left { width: 18%; }

.theme-mobile .theme-top .theme-title {
  width: 65%; margin-top: 5.208333vw;
}

.theme-mobile .theme-top .theme-sub-title {
  width: 65%; margin-top: 2.604167vw;
}

.theme-mobile .theme-top .theme-title, 
.theme-mobile .theme-top .theme-sub-title,
.theme-mobile .theme-top .theme-left,
.theme-mobile .theme-bottom .theme-right,
.theme-mobile .jump-button {
  opacity: 0;
}

.loaded .theme-mobile .theme-top .theme-title {
  -webkit-animation: zoomIn 1s 1.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: zoomIn 1s 1.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme-mobile .theme-top .theme-sub-title {
  -webkit-animation: zoomIn 1s 2.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: zoomIn 1s 2.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.loaded .theme-mobile .theme-top .theme-left {
  -webkit-animation: fadeIn 0.8s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: fadeIn 0.8s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.theme-mobile .theme-bottom .theme-right {
  position: absolute; right: -12%; bottom: 24%; width: auto; height: 73%;
}

.loaded .theme-mobile .theme-bottom .theme-right {
  -webkit-animation: slide-in-right 1s 3.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: slide-in-right 1s 3.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.theme-mobile .jump-button {
  width: 260px; bottom: 4%; left: calc(50% - 130px);
  color: var(--text-light-color); font-size: var(--text-mobile-size);
}

.theme-mobile .jump-button svg {
  margin-left: 1.302083vw;
}

.loaded .theme-mobile .jump-button {
  -webkit-animation: fadeInUp 0.75s 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: fadeInUp 0.75s 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@media screen and (max-width: 768px) {
  #playing {
    position: fixed; top: 5vmax; right: 40px; z-index: 10;
    width: 35px; height: 35px;
    border: 2px solid var(--bg-color); border-radius: 50%;
  }
}

@media screen and (max-width: 576px) {
  #playing {
    position: fixed; top: 5vmax; right: 30px;
    width: 30px; height: 30px;
    border: 2px solid var(--bg-color); border-radius: 50%;
  }

  .theme-mobile .theme-top .theme-left { width: 24%; }

  .theme-mobile .theme-top .theme-title { width: 85%; }

  .theme-mobile .theme-top .theme-sub-title { width: 85%; }

  .theme-mobile .jump-button { width: 210px; left: calc(50% - 105px); }
}