/**
 * ----------------------------------------
 * animation clip
 * ----------------------------------------
 */
 @-webkit-keyframes clip {
  0% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes clip {
  0% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

/* TODO PC 样式 */
.stage, .stage-mobile {
  position: relative; z-index: 1; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 2.34375vw 5% 4.166667vw;
}

.stage::before, .stage-mobile::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0;
  width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
}

.stage .stage-inner {
  margin-top: -2.604167vw;
  border-radius: 15px; padding-bottom: 4.166667vw;
  background: url("../images/common/10.png") top left;
}

.stage .stage-title {
  position: relative; padding-top: 1.5625vw;
  font-size: var(--stage-title-size); color: var(--stage-title-color);
  -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%);
}

.loaded .stage .stage-title {
  -webkit-animation: clip 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: clip 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}

.stage .stage-title > img { display: block; width: 94%; margin-left: auto; }

.stage .stage-title > .title { position: absolute; top: 46%; right: 12%; opacity: 0; }

.loaded .stage .stage-title > .title {
  -webkit-animation: fadeIn 0.8s 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: fadeIn 0.8s 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}

.stage-one, .stage-two { position: relative; width: 88%; margin: auto; }

.stage .stage-one > img, .stage .stage-two > img { display: block; }

.stage .stage-one > .stage-text { width: 63.489583vw; }

.stage .stage-one .food-coupon {
  position: absolute; top: 10%; right: 0; width: 25.885417vw;
}

.stage .stage-two { margin-top: 6vw; }

.stage .stage-two > .stage-text { width: 63.020833vw; margin-left: auto; }

.stage .stage-two .food-coupon {
  position: absolute; top: 1%; left: 0; width: 31.927083vw;
}

.stage .jump-button {
  position: static; margin: 4.166667vw auto 0px; 
}

/* TODO 移动样式 */
.stage-mobile { padding: 6.510417vw 3.255208vw; }

.stage-mobile .stage-inner {
  position: relative; border-radius: 15px; padding-bottom: 7.8125vw;
  background: url("../images/common/mobile/12.png") top left / cover;
}

.stage-mobile .stage-title {
  position: relative; padding-top: 4.166667vw;
  color: var(--stage-title-color); font-size: var(--stage-title-mobile-size);
  -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%);
}

.loaded .stage-mobile .stage-title {
  -webkit-animation: clip 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: clip 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}

.stage-mobile .stage-title > img { display: block; width: 100%; }

.stage-mobile .stage-title > .title { position: absolute; top: 44%; right: 5%; opacity: 0; }

.loaded .stage-mobile .stage-title > .title {
  -webkit-animation: fadeIn 0.8s 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
  animation: fadeIn 0.8s 0.8s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}

.flicking-viewport .panel { width: 100%; }

.flicking-viewport .panel .desc { width: 85%; margin-left: 6%; }

.flicking-viewport .panel.panel-two .desc { margin-top: 2.604167vw; }

.flicking-viewport .panel.panel-one .food-coupon { width: 60%; margin: -34% 0px 0px 16%; }

.flicking-viewport .panel.panel-two .food-coupon { width: 64%; margin: -40% 0px 0px 20%; }

.flicking-pagination { position: static; margin-top: 1.953125vw; }

.flicking-pagination-bullet {
  display: block; width: 2.604167vw; height: 2.604167vw;
  margin: 0px 1.302083vw; background-color: #FFFFFF;
  -webkit-transform: scale(0.75); transform: scale(0.75);
}

.flicking-pagination-bullet-active {
  background-color: var(--bg-color);
  -webkit-transform: scale(1); transform: scale(1);
}

.stage-mobile .jump-button {
  position: static; margin: 5.208333vw auto 0px;
  -webkit-transform: translateX(0); transform: translateX(0);
}

@media screen and (max-width: 576px) {
  .stage-mobile { padding: 9.114583vw 15px; }

  .stage-mobile .stage-inner { padding-bottom: 13.020833vw; }

  .flicking-pagination-bullet {
    width: 2.864583vw; height: 2.864583vw;
  }

  .stage-mobile .jump-button { margin-top: 6.510417vw; }
}