html {
  box-sizing: border-box;
  -webkit-scroll-behavior: smooth;
  -moz-scroll-behavior: smooth;
  -ms-scroll-behavior: smooth;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

p {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  padding: 0;
  background-color: #160700;
  background-image:
    radial-gradient(circle at 50% 9%, rgba(255, 219, 126, 0.95) 0, rgba(255, 184, 56, 0.44) 14%, rgba(255, 184, 56, 0) 33%),
    linear-gradient(180deg, #311205 0%, #1a0800 42%, #261003 76%, #140600 100%);
  font-family: "Microsoft YaHei";
  background-repeat: no-repeat;
}

.container {
  position: relative;
  max-width: 750px;
  min-width: 300px;
  height: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  background: transparent;
}

.container .piece-column {
  --stage-width: min(100vw, 750px);
  --stage-height: 100dvh;
  --poster-width: min(var(--stage-width), calc(var(--stage-height) * 720 / 1600));
  --poster-height: calc(var(--poster-width) * 1600 / 720);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  line-height: 0;
  font-size: 0;
  text-align: center;
  overflow: hidden;
  padding: 0 0 clamp(24px, 7vh, 80px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.container .download {
  z-index: 2;
  display: block;
}

.container .download img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  animation: download-pulse 2s ease-in-out infinite;
}

.container .nav-btn {
  top: 0;
  right: 0;
  left: 0;
}

.container .down-btn03 {
  top: 28%;
}

.container .down-btn04 {
  width: min(75.3889%, 456px);
}

@keyframes download-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.06);
  }

  70% {
    transform: scale(0.97);
  }
}

@media (min-width: 750px) {
  .container .piece-column {
    display: block;
    padding-bottom: 0;
    background-position: center center;
    background-size: var(--poster-width) var(--poster-height);
  }

  .container .down-btn04 {
    position: absolute;
    left: 50%;
    width: calc(var(--poster-width) * 586 / 720);
    bottom: calc((var(--stage-height) - var(--poster-height)) / 2 + var(--poster-height) * 160 / 1600);
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .container .download img {
    animation: none;
  }
}