.bg {
  width: 100vw;
}
.bg img {
  width: 100%;
  display: table;
  background: #92C29A;
  margin-top: -1px;
}
.content {
  position: absolute;
  top: 0;
  width: 100vw;
  overflow: hidden;
  height: 648.14vw;
  font-family: '思源宋体 Light';
}
.content img {
  position: absolute;
}

.message {
  background: url('../image/j_bg.jpg') no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  animation: message 1s 0s ease;
}
.message img {
  position: fixed;
}
.action {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  justify-content: center;
  align-items: center;
  font-size: 3.2vw;
  color: white;
  letter-spacing: 0.06em;
  gap: 4.16vw;
  padding-bottom: 7vw;
}
.action img {
  position: relative;
}

.epistle {
  background: url('../image/l_bg.jpg') no-repeat top center;
  background-size: 100% 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100vw;
  display: none;
  animation: message 1s 0s ease;
}
.epistle img { position: fixed; }
.swiper { width: 100vw; height: 100vh; position: fixed; z-index: 10; }
.swiper-slide { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.swiper-slide img { width: 95.09vw; }
.letter { position: fixed; width: 100vw; height: 100vh; z-index: 20; display: none; justify-content: center; align-items: center; flex-direction: column; }
.letter img { position: relative; }
.letter-content { width: 89.35vw; height: 117.31vw; background: url('../image/l_l_b.png'); background-size: 100% 100%; padding: 6vw 8.5vw; box-sizing: border-box; font-size: 3.4vw; color: #a03b06; line-height: 1.7em; font-weight: bold; font-family: '思源宋体 Light'; position: relative; }
.letter-content p { text-indent: 2.0em; margin: 0; }
.letter-content p:first-child { text-indent: 0; }
.intro { position: fixed; width: 100vw; height: 100vh; z-index: 30; display: none; flex-direction: column; justify-content: center; align-items: center; flex-direction: column; }
.intro img { position: relative; }
.intro-content { width: 96.85vw; height: 76.66vw; background: url('../image/l_j_b.png'); background-size: 100% 100%; margin-left: 2vw; padding: 0 5vw 0 4vw; box-sizing: border-box; color: #a03b06; font-size: 3.6vw; line-height: 1.6em; font-family: '思源宋体 Light'; }
.intro-content p { text-indent: 2.0em; margin: 0; font-weight: bold; }
.intro-content img { height: 8.98vw; margin: 4vw auto 2vw auto; display: table; }
.share { width: 100%; position: fixed; height: 100vh; z-index: 40; background: #c4a37f url('../image/share_bg.png'); background-size: 100% 100%; display: none; }
.share-action { position: fixed; bottom: 6vw; flex-direction: column; width: 100%; justify-content: center; align-items: center; display: flex; gap: 4vw; }
.share-action img { width: 41.94vw; position: relative; }
.share-count { font-size: 2.8vw; color: #a03b06; text-align: center; position: absolute; width: 100%; top: 107.42vw; display: none; }
.share-tip { width: 26.38vw; position: fixed; right: 1vw; top: 3vw; z-index: 10; }
#bgm-btn { width: 11vw; position: fixed; top: 4vw; right: 4vw; z-index: 50; }
.statistics {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.statistics .statistics-content {
  width: 88vw;
  max-height: 88vh;
  border: 1px solid #619578;
  border-radius: 2vw;
  background: linear-gradient(-45deg, rgba(210, 229, 204, 1), rgba(149, 195, 155, 1));
  overflow-y: scroll;
  padding: 5vw 0 3vw 0;
  box-sizing: border-box;
}
.statistics h2 {
  font-size: 5.5vw;
  margin: 0;
}
.statistics h3 {
  font-size: 4vw;
  margin: 1vw 0 1vw 0;
}
.statistics h3 span {
  color: #a03b06;
  font-size: 6vw;
}
.statistics canvas {
  width: 100%;
}

@keyframes homeYunOne {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-80vw, 0);
  }
}
@keyframes homeYunTwo {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40vw, 0);
  }
}
@keyframes homeYunThree {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-180vw, 0);
  }
}
@keyframes homeYunFour {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-180vw, 0);
  }
}
@keyframes homeChuan {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: translate(35vw, 0);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes scoll {
  to, from {
    transform: translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: translate(0, 5vw);
    opacity: 0.5;
  }
}
@keyframes liu {
  0% {
    transform: rotate(10deg);
    opacity: 0.7;
  }
  50% {
    transform: rotate(-20deg);
    opacity: 1;
  }
  100% {
    transform: rotate(10deg);
    opacity: 0.7;
  }
}
@keyframes msgYunOne {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40vw, 0);
  }
}
@keyframes msgYunTow {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10vw, 0);
  }
}
@keyframes si {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
    opacity: 1;
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes ltliu {
  0% {
    transform: rotate(-5deg);
    opacity: 0.7;
  }
  50% {
    transform: rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-5deg);
    opacity: 0.7;
  }
}
@keyframes yunOne {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-140vw, 0);
  }
}
@keyframes yunTwo {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(100vw, 0);
  }
}
@keyframes yan {
  to, from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-45vw, -50vw);
  }
}
@keyframes message {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}