:root {
  --text-color: #852D21; /* 红色 */
  --text-light-color: #FFF9F0; /* 白色 */
  --bg-color: #6C3028; /* 背景红色 */
  --bg-light-color: #FFF9F0; /* 白色 */

  --text-size: 1.458333vw; /* 1920 -> 28px */
  --text-mobile-size: 3.125vw; /* 768 -> 24px */

  --stage-title-size: 1.875vw; /* 1920 -> 36px */
  --stage-title-mobile-size: 2.864583vw; /* 768 -> 22px */
  --stage-title-color: #F5DDBF; /* 白色 */

  --animate-duration: 2s;

  line-height: 1.5;
  font-weight: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { box-sizing: border-box; }

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

html, body { -webkit-overflow-scrolling: touch; touch-action: pan-y; }

body { 
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  font-family: "方正美黑_GBK", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg-light-color);
}

body.viewer-open { padding-right: 0px !important; }

a { text-decoration: none; }

ul, ol { list-style: none; }

button { display: block; border: none; outline: none; }

#main {
  width: 100%; min-height: 100vh; min-height: 100dvh;
}

#main > .mobile { display: none; }

#main > :not(.mobile) { display: block; }

.wow { visibility: hidden; }

.flex, .flex-center, .flex-column-center, .flex-end { display: flex; }

.align-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-around { justify-content: space-around; }

.align-end, .flex-end { align-items: flex-end; }

.flex-column, .flex-column-center { flex-direction: column; }

.flex-center, .flex-column-center { justify-content: center; align-items: center; }

/* 背景 */
.roof {
  background-image: url("../images/common/roof.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.wall {
  background-image: url("../images/common/wall.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.mobile.roof { position: relative; z-index: 1; }

.mobile.roof::before, .mobile.roof::after { pointer-events: none; }

.mobile.roof::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url("../images/common/mobile/1.png") no-repeat top center / 100% auto;
}

.mobile.roof::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  background: url("../images/common/mobile/3.png") repeat-y top center / 100% auto;
}

.pointer { cursor: pointer; }

.jump-button {
  width: 8.072917vw; height: 2.864583vw;
  position: absolute; bottom: 13%; left: calc(50% - 4.036458vw);
  border-radius: 99vw; background-color: var(--text-color);
  transition: box-shadow .3s ease-in-out, transform .3s ease-in-out;
}

.jump-button:hover {
  box-shadow: 0px 6px 0px var(--bg-color);
  -webkit-transform: translateY(-6px); transform: translateY(-6px);
}

.jump-button svg {
  width: 1.5625vw; height: 1.5625vw; stroke: var(--text-light-color);
}

.mobile .jump-button {
  width: 150px; height: 55px; bottom: 8%; left: calc(50% - 75px);
}

.mobile .jump-button svg { width: 25px; height: 25px; }

.back-button {
  position: -webkit-sticky; position: sticky; top: 2.34375vw; left: 0px;
  width: 2.604167vw; height: 2.604167vw; z-index: 10;
  border-radius: 50%; background-color: var(--bg-light-color);
  -webkit-transform: translateX(-130%); transform: translateX(-130%);
}

.back-button svg {
  width: 80%; height: 80%; stroke: var(--text-color);
  -webkit-transform: translateX(-5%); transform: translateX(-5%);
}

.mobile .back-button  {
  position: absolute; top: 0; left: 5.208333vw; width: 7.161458vw; height: 7.161458vw;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
}

.food-coupon-collection {
  position: fixed; bottom: 5%; right: 0; width: 6.145833vw; z-index: 10;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .5));
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .5));
}

.food-coupon-collection > img {
  width: 100%;
  -webkit-animation: wobble-hor-top 2s 1s infinite;
	        animation: wobble-hor-top 2s 1s infinite;
}

/* TODO 移动样式 */
.mobile .food-coupon-collection {
  position: fixed; bottom: 10%; right: 0; width: 14.334470vw; z-index: 10;
}

.mobile .food-coupon-collection img { width: 100%; }

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

@media screen and (max-width: 768px) {
  #main > .mobile { display: block; }

  #main > :not(.mobile) { display: none; }  
}

@media screen and (max-width: 576px) {
  :root {
    --text-mobile-size: 4.296875vw;
  }

  .mobile .jump-button {
    width: 120px; height: 45px; bottom: 6%; left: calc(50% - 60px);
  }

  .mobile .jump-button svg { width: 20px; height: 20px; }

  .mobile .back-button  {
    width: 10.416667vw; height: 10.416667vw;
  }
}

/**
 * ----------------------------------------
 * animation zoomIn
 * ----------------------------------------
 */
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% { opacity: 1 }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% { opacity: 1 }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

/**
 * ----------------------------------------
 * animation fadeInUp
 * ----------------------------------------
 */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

/**
 * ----------------------------------------
 * animation fadeInLeft
 * ----------------------------------------
 */
 @-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tl
 * ----------------------------------------
 */
 @-webkit-keyframes tilt-in-fwd-tl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-50%, -100%) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-50%, -100%) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

@keyframes tilt-in-fwd-tl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-50%, -100%) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-50%, -100%) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

.tilt-in-fwd-tl {
  -webkit-animation-name: tilt-in-fwd-tl;
  -webkit-animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  animation-name: tilt-in-fwd-tl;
  animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.tilt-in-fwd-tl.animate__animated {
  -webkit-animation-duration: 1s;
	animation-duration: 1s;
}

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation wobble-hor-top
 * ----------------------------------------
 */
 @-webkit-keyframes wobble-hor-top {
  0%,
  60% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  10% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  20% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  30% {
    -webkit-transform: rotate(3.6deg);
            transform: rotate(3.6deg);
  }
  40% {
    -webkit-transform: rotate(-2.4deg);
            transform: rotate(-2.4deg);
  }
  50% {
    -webkit-transform: rotate(1.2deg);
            transform: rotate(1.2deg);
  }
}
@keyframes wobble-hor-top {
  0%,
  60% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  10% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  20% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  30% {
    -webkit-transform: rotate(3.6deg);
            transform: rotate(3.6deg);
  }
  40% {
    -webkit-transform: rotate(-2.4deg);
            transform: rotate(-2.4deg);
  }
  50% {
    -webkit-transform: rotate(1.2deg);
            transform: rotate(1.2deg);
  }
}

/**
 * ----------------------------------------
 * animation fadeInRight
 * ----------------------------------------
 */
@-webkit-keyframes fadeInRight {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(30%, 0, 0);
      transform: translate3d(30%, 0, 0)
  }

  to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}

@keyframes fadeInRight {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(30%, 0, 0);
      transform: translate3d(30%, 0, 0)
  }

  to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}

.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

/**
 * ----------------------------------------
 * animation fadeInLeft
 * ----------------------------------------
 */
@-webkit-keyframes fadeInLeft {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0)
  }

  to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0)
  }

  to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}

.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}