/* reset */
html,
body,
div,
p,
ul,
li,
dl,
dt,
dd,
em,
i,
span,
a,
img,
input,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
}
a,
img,
input {
  border: none;
}
body {
  font: 14px/1.75 -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
}
em,
b {
  font-style: normal;
}
ul,
li {
  list-style: none;
}
a,
img {
  -webkit-touch-callout: none;
}
body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}
/* htmlFontSize */
html {
  font-size: 25px;
  font-size: 6.66666667vw;
  --window-width: 100vw;
  --window-height: 100vh;
}
/* common */
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}
.hid {
  font-size: 0;
  line-height: 0;
  text-indent: -999em;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
}
/* font-face */
@font-face {
  font-family: AR;
  src: url(../font/ar.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: AR_Bold;
  src: url(../font/ar-bold.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: HOK-text;
  src: url(../font/hok-text.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: HOK-title;
  src: url(../font/hok-title.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Radikal;
  src: url(../font/radikal-medium.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* main */
.main-wrapper {
  font-family: HOK-text, sans-serif;
  width: var(--window-width);
  height: var(--window-height);
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
html[data-lang='ar'] .main-wrapper,
html[data-lang='ar'] .loading {
  direction: rtl;
}
.pages {
  width: 100%;
  height: 100%;
  position: relative;
}
.page {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: auto var(--window-height);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 移动背景图 */
.page--kv {
  background: url(../video/kv-loop-en.jpg) center / cover no-repeat;
}
html[data-lang='pt'] .page--kv {
  background-image: url(../video/kv-loop-pt.jpg);
}
html[data-lang='ar'] .page--kv {
  background-image: url(../video/kv-loop-ar.jpg);
}
html[data-lang='tr'] .page--kv {
  background-image: url(../video/kv-loop-tr.jpg);
}
html[data-lang='ru'] .page--kv {
  background-image: url(../video/kv-loop-ru.jpg);
}
html[data-lang='ch'] .page--kv {
  background-image: url(../video/kv-loop-ch.jpg);
}
html[data-lang='cht'] .page--kv {
  background-image: url(../video/kv-loop-cht.jpg);
}
html[data-lang='es'] .page--kv {
  background-image: url(../video/kv-loop-es.jpg);
}
html[data-lang='id'] .page--kv {
  background-image: url(../video/kv-loop-id.jpg);
}
html[data-lang='ms'] .page--kv {
  background-image: url(../video/kv-loop-ms.jpg);
}
.page--1 {
  background-image: url(../img/page1-bg.750.jpg);
}
html.webp .page--1 {
  background-image: url(../img/page1-bg.750.webp);
}
.page--2 {
  background-image: url(../img/page2-bg.jpg);
}
html.webp .page--2 {
  background-image: url(../img/page2-bg.webp);
}
.page--3 {
  background-image: url(../img/page3-bg.jpg);
}
html.webp .page--3 {
  background-image: url(../img/page3-bg.webp);
}
.page--4 {
  background-image: url(../img/page4-bg.jpg);
}
html.webp .page--4 {
  background-image: url(../img/page4-bg.webp);
}
.page--5 {
  background-image: url(../img/page5-bg.jpg);
}
html.webp .page--5 {
  background-image: url(../img/page5-bg.webp);
}
.page.show {
  visibility: visible;
  pointer-events: all;
  z-index: 1;
}
.page-animate-box {
  --page-count: 2;
  display: none;
  width: calc(var(--window-width) * var(--page-count) * 2 + var(--window-height));
  height: calc(var(--window-width) * var(--page-count) * 2 + var(--window-height));
  position: absolute;
  z-index: 2;
  right: 100%;
  top: calc(var(--window-width) * -1 * var(--page-count));
  transform-origin: 100% 100%;
  overflow: hidden;
}
.page-animate-front,
.page-animate-back {
  width: var(--window-width);
  height: var(--window-height);
  position: absolute;
  top: calc(var(--window-width) * var(--page-count));
  background: #000;
}
.page-animate-front {
  left: 100%;
  transform-origin: 0 calc(var(--window-width) * var(--page-count) + var(--window-height));
}
.page-animate-back {
  right: 0;
  filter: brightness(0.6);
  box-shadow: 0 0 0.4rem #000;
  transform-origin: 100% calc(var(--window-width) * var(--page-count) + var(--window-height));
}
.page-animate-back .page {
  transform: rotateY(180deg);
}

/* sprite */
.language-text--active::before,
.language-text--active::after,
.spr {
  background: url(../img/sprite.png) 0 0 / 17rem 21rem no-repeat;
}
.spr2 {
  background: url(../img/sprite-p2.png) 0 0 / 14rem 16rem no-repeat;
}
.spr3 {
  background: url(../img/sprite-p3.png) 0 0 / 10rem 13rem no-repeat;
}
.spr5,
.bg-swiper__btn--prev::after,
html[data-lang='ar'] .bg-swiper__btn--next::after,
.menkin1-swiper__btn--prev::after {
  background: url(../img/sprite-p5.png) 0 0 / 34.2rem 23.76rem no-repeat;
}

/* ui */
.ui {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translateZ(0);
}
.ui * {
  pointer-events: all;
}
.ui--home .btn-back,
.ui--home .btn-page {
  display: none;
}
.is-in-game .btn-back {
  display: block;
}
.btn-back,
.btn-music,
.btn-page,
.btn-page,
.btn-language,
.btn-share {
  position: absolute;
}
.btn-back {
  width: 1.89rem;
  height: 0.87rem;
  background-position: -1.95rem -4.68rem;
  left: 0.9rem;
  top: 0.9rem;
}
html[data-lang='ar'] .btn-back {
  left: initial;
  right: 0.9rem;
  transform: rotateY(180deg);
}
.btn-music {
  width: 1.71rem;
  height: 1.73rem;
  background-position: -0.02rem -2.93rem;
  right: 0.9rem;
  top: 0.9rem;
}
html[data-lang='ar'] .btn-music {
  left: 0.9rem;
  right: initial;
}
.btn-music--muted {
  background-position: -1.75rem -2.93rem;
}
.btn-page {
  width: 2.62rem;
  height: 2.1rem;
  background-position: -7.23rem -3.76rem;
  top: 50%;
  margin-top: -1.05rem;
}
.btn-page--prev {
  left: 0.86rem;
}
html[data-lang='ar'] .btn-page--prev {
  transform: rotateY(180deg);
  left: initial;
  right: 0.86rem;
}
.btn-page--next {
  transform: rotateY(180deg);
  right: 0.86rem;
}
html[data-lang='ar'] .btn-page--next {
  left: 0.86rem;
  right: initial;
  transform: rotateY(0deg);
}
.btn-page--next-frozen {
  transform: none;
  background: none;
}
.btn-page--next-frozen::after {
  content: '';
  width: 3.35rem;
  height: 2.88rem;
  background: url(../img/frozen-right.png) 0 0 / 100% 100% no-repeat;
  position: absolute;
  left: -0.48rem;
  top: -0.16rem;
}
html[data-lang='ar'] .btn-page--next-frozen::after {
  transform: rotateY(180deg);
}
.btn-page--next-light::after {
  content: '';
  width: 3.51rem;
  height: 2.99rem;
  background: url(../img/light-left.png) 0 0 / 100% 100% no-repeat;
  position: absolute;
  left: -0.42rem;
  top: -0.44rem;
  animation: light-breath-opacity 1s infinite alternate;
}
html[data-lang='ar'] .btn-page--next-light::after {
  transform: rotateY(0deg);
}
.btn-language {
  width: 1.91rem;
  height: 0.8rem;
  left: 0.9rem;
  bottom: 0.9rem;
}
html[data-lang='en'] .btn-language {
  background-position: -0.02rem -4.68rem;
}
html[data-lang='pt'] .btn-language {
  background-position: -11.17rem -0.02rem;
}
html[data-lang='ar'] .btn-language {
  background-position: -11.17rem -0.84rem;
  left: initial;
  right: 0.9rem;
}
html[data-lang='tr'] .btn-language {
  background-position: -11.17rem -1.66rem;
}
html[data-lang='ru'] .btn-language {
  background-position: -11.17rem -2.48rem;
}
html[data-lang='ch'] .btn-language {
  background-position: -12.38rem -6.58rem;
}
html[data-lang='cht'] .btn-language {
  background-position: -11.17rem -3.3rem;
}
html[data-lang='es'] .btn-language {
  background-position: -11.17rem -4.12rem;
}
html[data-lang='id'] .btn-language {
  background-position: -11.17rem -4.94rem;
}
html[data-lang='ms'] .btn-language {
  background-position: -12.38rem -5.76rem;
}
.language-list {
  width: 2.57rem;
  height: 5.24rem;
  box-sizing: border-box;
  padding: 0.21rem 0.11rem 0;
  background-position: -4.64rem -0.02rem;
  position: absolute;
  left: 0.54rem;
  top: 7.97rem;
}
html[data-lang='ar'] .language-list {
  left: initial;
  right: 0.54rem;
}
.language-scroll {
  height: 4.33rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.language-scroll::-webkit-scrollbar {
  width: 1px;
  height: 1px;
  background: #3a6ae6;
}
.language-scroll::-webkit-scrollbar-thumb {
  width: 1px;
  height: 1px;
  background: #ffdf9f;
}
.language-text {
  color: #fff;
  font-size: 0.48rem;
  line-height: 0.64rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.64rem;
}
.language-text--active {
  color: #ffdf9f;
}
.language-text--active::before,
.language-text--active::after {
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 0.45rem;
  height: 0.17rem;
  margin-top: -0.02rem;
  background-position: -3.48rem -2.93rem;
}
.language-text--active::before {
  margin-right: 0.24rem;
}
.language-text--active::after {
  margin-left: 0.24rem;
  transform: rotateY(180deg);
}
.btn-share {
  display: none;
  width: 1.71rem;
  height: 1.73rem;
  top: 0.9rem;
}
.ui--end .btn-share {
  display: block;
}
.btn-share--ingame {
  background-position: -13.1rem -0.02rem;
  right: 3.38rem;
}
.btn-share--facebook {
  background-position: -13.1rem -1.77rem;
  right: 5.86rem;
}
.btn-share--twitter {
  background-position: -13.1rem -3.52rem;
  right: 3.38rem;
}

/* loading */
.loading {
  color: #fff;
  font-size: 0.58rem;
  font-family: HOK-text, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../img/loading-bg.jpg) center / cover no-repeat;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  --loading-num: 0%;
}
.loading-cont {
  display: flex;
  align-items: center;
}
.loading-bar {
  width: 16.12rem;
  height: 0.56rem;
  margin: 0 0.13rem;
  position: relative;
}
.loading-bar::before,
.loading-bar::after {
  content: '';
  width: 100%;
  height: 100%;
  background: 0 0 / 16.12rem 100% no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
.loading-bar::before {
  width: var(--loading-num);
  background-image: url(../img/loading-full.png);
}
html[data-lang='ar'] .loading-bar::before {
  background-position: 100% 0;
  left: auto;
  right: 0;
}
.loading-bar::after {
  background-image: url(../img/loading-border.png);
}
.loaded-num {
  display: none;
  min-width: 1.44rem;
  margin-top: 0.08rem;
}

/* common 50% */
.slogan,
.words,
.btn-box,
.bg-swiper,
.bg-swiper__btn--shadow,
.bg-swiper__btn--prev,
.bg-swiper__btn--next,
.menkin-swiper,
.menkin1-swiper__btn--prev,
.menkin1-swiper__btn--next,
.menkin2-swiper__btn--prev,
.menkin2-swiper__btn--next,
.menkin3-swiper__btn--prev,
.menkin3-swiper__btn--next,
.page5__foreground,
.page5__hand,
.page5__bubble {
  position: absolute;
  left: 50%;
}

/* kv */
.kv__video,
.kv__video canvas,
.kv__video img,
.page__video,
.page__video canvas,
.page__video img,
.page-animate-wrapper,
.page-animate-wrapper canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center;
}
.words--kv {
  width: 6.58rem;
  height: 2.91rem;
  background: url(../img/kv-menkin.png) 0 0 / 100% 100% no-repeat;
  top: 1.73rem;
  margin-left: 0.61rem;
}
.btn-box {
  display: flex;
  bottom: 0.87rem;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.btn-box.show {
  opacity: 1;
  transition: opacity 0.6s 0.6s;
  pointer-events: all;
}
.btn-start,
.btn-continue {
  color: #fefff0;
  font-size: 0.42rem;
  line-height: 0.46rem;
  font-family: Radikal, sans-serif;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0px 2px 3px rgba(16, 40, 107, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.04rem 0.68rem 0;
  margin: 0 0.7rem;
}
html[data-lang='ar'] .btn-start,
html[data-lang='ar'] .btn-continue {
  font-size: 0.56rem;
  line-height: 0.6rem;
  font-family: AR_Bold, sans-serif;
  padding-top: 0;
}
.btn-start {
  width: 4.6rem;
  height: 1.43rem;
  background-position: -0.02rem -0.02rem;
}
.btn-continue {
  width: 4.6rem;
  height: 1.44rem;
  background-position: -0.02rem -1.47rem;
}

/* page1 */
.light {
  position: absolute;
  left: 50%;
  background: 0 0 / 100% 100% no-repeat;
  opacity: 0;
}
.light-breath {
  animation: light-breath-opacity 1s infinite alternate;
}
@keyframes light-breath-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.light--kv-menkin {
  width: 6.58rem;
  height: 2.91rem;
  background-image: url(../img/kv-menkin-light.png);
  top: 1.73rem;
  margin-left: 0.61rem;
}
.light--page1-gorge {
  width: 29.54rem;
  height: 15rem;
  background-image: url(../img/light-page1-gorge.png);
  bottom: 0;
  margin-left: -16.24rem;
}
.light--page1-twister {
  width: 12.94rem;
  height: 12.97rem;
  background-image: url(../img/light-page1-twister.png);
  top: 0;
  margin-left: -16.18rem;
}
.light--page1-big-beasts {
  width: 5.04rem;
  height: 3.88rem;
  background-image: url(../img/light-page1-big-beasts.png);
  bottom: 0;
  margin-left: -2.1rem;
}
.light--page1-gift {
  width: 32.48rem;
  height: 15rem;
  background-image: url(../img/light-page1-gift.png);
  bottom: 0;
  margin-left: -16.24rem;
}

.frozen-item,
.animate-item {
  position: absolute;
  left: 50%;
}
/* .animate-item.play-once {
  animation: animate-sprite 2s steps(15) 1 normal forwards;
}
.animate-item.play-loop {
  animation: animate-sprite 4s steps(31) infinite normal;
}
@keyframes animate-sprite {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
} */
.animate--page1-menki {
  width: 19.19rem;
  height: 12.67rem;
  background: url(../img/frozen-page1-menki.png) 0 0 / 100% 100% no-repeat;
  /* background: url(../img/sprite-page1-menki.png) 0 0 / 3200% 100% no-repeat; */
  top: -0.04rem;
  margin-left: -10.66rem;
  animation: menkiFloat 2s infinite alternate;
}
@keyframes menkiFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -1%, 0);
  }
}
.animate--page1-snow {
  width: 32.48rem;
  height: 15rem;
  top: 0;
  margin-left: -16.24rem;
  background: url(../img/sprite-page1-snow.png) 0 0 / 3200% 100% no-repeat;
}
.frozen--page1-twister,
.animate--page1-twister {
  width: 12.34rem;
  height: 12.54rem;
  top: 0;
  margin-left: -16.06rem;
  background: url(../img/sprite-page1-twister.png) 0 0 / 1600% 100% no-repeat;
}
.animate--page1-twister.play-loop {
  background: url(../img/sprite-page1-twister-loop.png) 0 0 / 3200% 100% no-repeat;
}
.frozen--page1-gorge,
.animate--page1-gorge {
  width: 22.18rem;
  height: 11.9rem;
  bottom: 0;
  margin-left: -16.24rem;
  background: url(../img/sprite-page1-gorge.png) 0 0 / 1600% 100% no-repeat;
}
.frozen--page1-gift,
.animate--page1-gift {
  width: 32.48rem;
  height: 15rem;
  top: 0;
  margin-left: -16.24rem;
  background: url(../img/sprite-page1-gift.png) 0 0 / 1600% 100% no-repeat;
}
.animate--page1-gift.play-loop {
  background: url(../img/sprite-page1-gift-loop.png) 0 0 / 3200% 100% no-repeat;
}
.frozen--page1-big-beasts,
.animate--page1-big-beasts {
  width: 3.52rem;
  height: 3.08rem;
  bottom: -0.05rem;
  margin-left: -1.32rem;
  background: url(../img/sprite-page1-big-beasts.png) 0 0 / 1600% 100% no-repeat;
}
.animate-stage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.animate-stage canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* page1 */
.words--page1,
.page1__words--menkin .page1__text--before,
.page1__words--menkin .page1__text--after {
  background: url(../img/page1-menkin.png) 0 0 / 29.44rem 36.68rem no-repeat;
}
.words--page1 {
  width: 14.68rem;
  height: 5.19rem;
  background-position: -0.02rem -0.02rem;
  top: 0.19rem;
  margin-left: -1.65rem;
}
.page1__words,
.page1__text--before {
  position: absolute;
}
.page1__words {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page1__text {
  transition: opacity 0.6s;
}
.page1__text--before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page1__text--after {
  opacity: 0;
  flex-shrink: 0;
  position: relative;
}
.page1__words.translate .page1__text--before {
  opacity: 0;
}
.page1__words.translate .page1__text--after {
  opacity: 1;
  transition-delay: 0.3s;
}
.page1__words--menkin {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page1__words--menkin .page1__text--before {
  background-position: -0.02rem -5.26rem;
}
html[data-lang='id'] .page1__words--menkin .page1__text--before {
  background-position: -14.74rem -0.02rem;
}
.page1__words--menkin .page1__text--after {
  width: 100%;
  height: 100%;
  background-position: -0.02rem -15.74rem;
}
html[data-lang='pt'] .page1__words--menkin .page1__text--after {
  background-position: -0.02rem -31.46rem;
}
html[data-lang='ar'] .page1__words--menkin .page1__text--after {
  background-position: -14.74rem -5.26rem;
}
html[data-lang='tr'] .page1__words--menkin .page1__text--after {
  background-position: -14.74rem -26.22rem;
}
html[data-lang='ru'] .page1__words--menkin .page1__text--after {
  background-position: -14.74rem -20.98rem;
}
html[data-lang='ch'] .page1__words--menkin .page1__text--after {
  background-position: -0.02rem -10.5rem;
}
html[data-lang='cht'] .page1__words--menkin .page1__text--after {
  background-position: -14.74rem -10.5rem;
}
html[data-lang='es'] .page1__words--menkin .page1__text--after {
  background-position: -14.74rem -15.74rem;
}
html[data-lang='id'] .page1__words--menkin .page1__text--after {
  background-position: -0.02rem -20.98rem;
}
html[data-lang='ms'] .page1__words--menkin .page1__text--after {
  background-position: -0.02rem -26.22rem;
}
.page1__words--gorge {
  width: 2.68rem;
  height: 0.81rem;
  left: 10.26rem;
  top: 1.15rem;
}
.page1__words--gorge .page1__text--before {
  background-position: -7.23rem -0.02rem;
}
.page1__words--gorge .page1__text--after {
  width: 2.45rem;
  height: 1.56rem;
  background-position: -0.02rem -5.88rem;
  left: -0.18rem;
  top: -0.09rem;
}
html[data-lang='pt'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -7.46rem;
}
html[data-lang='ar'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -9.04rem;
}
html[data-lang='tr'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -10.62rem;
}
html[data-lang='ru'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -12.2rem;
}
html[data-lang='ch'] .page1__words--gorge .page1__text--after {
  background-position: -12.38rem -7.4rem;
}
html[data-lang='cht'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -13.78rem;
}
html[data-lang='es'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -15.36rem;
}
html[data-lang='id'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -16.96rem;
}
html[data-lang='ms'] .page1__words--gorge .page1__text--after {
  background-position: -0.02rem -18.46rem;
}
.page1__words--twister {
  width: 1.96rem;
  height: 0.87rem;
  left: 5.68rem;
  top: 2.4rem;
}
html[data-lang='id'] .page1__words--twister {
  left: 5.88rem;
}
.page1__words--twister .page1__text--before {
  background-position: -7.23rem -0.85rem;
}
.page1__words--twister .page1__text--after {
  width: 2.71rem;
  height: 1.4rem;
  background-position: -2.49rem -5.88rem;
  left: -0.06rem;
  top: 0.02rem;
}
html[data-lang='pt'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -7.46rem;
}
html[data-lang='ar'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -9.04rem;
}
html[data-lang='tr'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -10.62rem;
}
html[data-lang='ru'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -12.2rem;
}
html[data-lang='ch'] .page1__words--twister .page1__text--after {
  background-position: -12.38rem -8.98rem;
}
html[data-lang='cht'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -13.78rem;
}
html[data-lang='es'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -15.36rem;
}
html[data-lang='id'] .page1__words--twister .page1__text--after {
  width: 3.49rem;
  background-position: -2.49rem -16.96rem;
}
html[data-lang='ms'] .page1__words--twister .page1__text--after {
  background-position: -2.49rem -18.46rem;
}
.page1__words--big-beasts {
  width: 3.92rem;
  height: 1.07rem;
  left: 8.47rem;
  top: 2.29rem;
}
html[data-lang='id'] .page1__words--big-beasts {
  left: 8.9rem;
}
.page1__words--big-beasts .page1__text--before {
  background-position: -7.23rem -1.74rem;
}
.page1__words--big-beasts .page1__text--after {
  width: 4.3rem;
  height: 1.48rem;
  background-position: -5.22rem -5.88rem;
  left: -0.14rem;
  top: -0.13rem;
}
html[data-lang='pt'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -7.46rem;
}
html[data-lang='ar'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -9.04rem;
}
html[data-lang='tr'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -10.62rem;
}
html[data-lang='ru'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -12.2rem;
}
html[data-lang='ch'] .page1__words--big-beasts .page1__text--after {
  background-position: -12.38rem -10.4rem;
}
html[data-lang='cht'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -13.78rem;
}
html[data-lang='es'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -15.36rem;
}
html[data-lang='id'] .page1__words--big-beasts .page1__text--after {
  background-position: -6rem -16.96rem;
}
html[data-lang='ms'] .page1__words--big-beasts .page1__text--after {
  background-position: -5.22rem -18.46rem;
}
.page1__words--gift {
  width: 2.72rem;
  height: 0.91rem;
  left: 7.86rem;
  top: 3.62rem;
}
.page1__words--gift .page1__text--before {
  background-position: -7.23rem -2.83rem;
}
.page1__words--gift .page1__text--after {
  width: 2.82rem;
  height: 1.3rem;
  background-position: -9.54rem -5.88rem;
  left: -0.27rem;
  top: 0.08rem;
}
html[data-lang='pt'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -7.46rem;
}
html[data-lang='ar'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -9.04rem;
}
html[data-lang='tr'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -10.62rem;
}
html[data-lang='ru'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -12.2rem;
}
html[data-lang='ch'] .page1__words--gift .page1__text--after {
  background-position: -12.38rem -12.06rem;
}
html[data-lang='cht'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -13.78rem;
}
html[data-lang='es'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -15.36rem;
}
html[data-lang='id'] .page1__words--gift .page1__text--after {
  width: 3.28rem;
  background-position: -10.32rem -16.96rem;
}
html[data-lang='ms'] .page1__words--gift .page1__text--after {
  background-position: -9.54rem -18.46rem;
}
/* page1 */

/* page2 */
.words--page2,
.page2__words--menkin .page2__text--before,
.page2__words--menkin .page2__text--after {
  background: url(../img/page2-menkin.png) 0 0 / 30.4rem 33rem no-repeat;
}
.words--page2 {
  width: 15.16rem;
  height: 5.46rem;
  background-position: -0.02rem -0.02rem;
  top: 0.32rem;
  margin-left: -6rem;
}
.page2__words,
.page2__text--before {
  position: absolute;
}
.page2__words {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page2__text {
  transition: opacity 0.6s;
}
.page2__text--before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page2__text--after {
  opacity: 0;
  flex-shrink: 0;
  position: relative;
}
.page2__words.translate .page2__text--before {
  opacity: 0;
}
.page2__words.translate .page2__text--after {
  opacity: 1;
  transition-delay: 0.3s;
}
.page2__words--menkin {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page2__words--menkin .page2__text--before {
  background-position: -15.22rem -0.02rem;
}
.page2__words--menkin .page2__text--after {
  width: 100%;
  height: 100%;
  background-position: -15.22rem -11.02rem;
}
html[data-lang='pt'] .page2__words--menkin .page2__text--after {
  background-position: -15.22rem -22.02rem;
}
html[data-lang='ar'] .page2__words--menkin .page2__text--after {
  background-position: -0.02rem -5.52rem;
}
html[data-lang='tr'] .page2__words--menkin .page2__text--after {
  background-position: -15.22rem -27.52rem;
}
html[data-lang='ru'] .page2__words--menkin .page2__text--after {
  background-position: -0.02rem -27.52rem;
}
html[data-lang='ch'] .page2__words--menkin .page2__text--after {
  background-position: -15.22rem -5.52rem;
}
html[data-lang='cht'] .page2__words--menkin .page2__text--after {
  background-position: -0.02rem -11.02rem;
}
html[data-lang='es'] .page2__words--menkin .page2__text--after {
  background-position: -0.02rem -16.52rem;
}
html[data-lang='id'] .page2__words--menkin .page2__text--after {
  background-position: -15.22rem -16.52rem;
}
html[data-lang='ms'] .page2__words--menkin .page2__text--after {
  background-position: -0.02rem -22.02rem;
}
.page2__words--new-friends {
  width: 3.66rem;
  height: 0.85rem;
  left: 5.68rem;
  top: 2.08rem;
}
.page2__words--new-friends .page2__text--before {
  background-position: -0.02rem -0.02rem;
}
.page2__words--new-friends .page2__text--after {
  width: 3.84rem;
  height: 1.4rem;
  background-position: -0.02rem -1.02rem;
  left: 0.12rem;
  top: -0.16rem;
}
html[data-lang='pt'] .page2__words--new-friends .page2__text--after {
  width: 3.96rem;
  background-position: -0.02rem -3.86rem;
  left: 0;
}
html[data-lang='ar'] .page2__words--new-friends .page2__text--after {
  background-position: -0.02rem -5.28rem;
}
html[data-lang='tr'] .page2__words--new-friends .page2__text--after {
  width: 4.08rem;
  background-position: -0.02rem -6.7rem;
  left: -0.08rem;
}
html[data-lang='ru'] .page2__words--new-friends .page2__text--after {
  width: 3.96rem;
  background-position: -0.02rem -8.12rem;
  left: 0;
}
html[data-lang='ch'] .page2__words--new-friends .page2__text--after {
  background-position: -0.02rem -2.44rem;
}
html[data-lang='cht'] .page2__words--new-friends .page2__text--after {
  background-position: -0.02rem -9.54rem;
}
html[data-lang='es'] .page2__words--new-friends .page2__text--after {
  width: 4.04rem;
  background-position: -0.02rem -10.96rem;
  left: -0.08rem;
}
html[data-lang='id'] .page2__words--new-friends .page2__text--after {
  background-position: -0.02rem -12.38rem;
}
html[data-lang='ms'] .page2__words--new-friends .page2__text--after {
  width: 3.95rem;
  background-position: -0.02rem -13.8rem;
  left: -0.08rem;
}
.page2__words--new-outfits {
  width: 3.59rem;
  height: 0.61rem;
  left: 9.72rem;
  top: 2.16rem;
}
.page2__words--new-outfits .page2__text--before {
  background-position: -3.7rem -0.02rem;
}
.page2__words--new-outfits .page2__text--after {
  width: 3.64rem;
  height: 1.4rem;
  background-position: -3.88rem -1.02rem;
  left: 0;
  top: -0.08rem;
}
html[data-lang='pt'] .page2__words--new-outfits .page2__text--after {
  width: 3.76rem;
  background-position: -4rem -3.86rem;
}
html[data-lang='ar'] .page2__words--new-outfits .page2__text--after {
  background-position: -3.88rem -5.28rem;
}
html[data-lang='tr'] .page2__words--new-outfits .page2__text--after {
  width: 3.93rem;
  background-position: -4.12rem -6.7rem;
}
html[data-lang='ru'] .page2__words--new-outfits .page2__text--after {
  width: 4.03rem;
  background-position: -4rem -8.12rem;
  left: -0.08rem;
}
html[data-lang='ch'] .page2__words--new-outfits .page2__text--after {
  background-position: -3.88rem -2.44rem;
}
html[data-lang='cht'] .page2__words--new-outfits .page2__text--after {
  background-position: -3.88rem -9.54rem;
}
html[data-lang='es'] .page2__words--new-outfits .page2__text--after {
  width: 3.98rem;
  background-position: -4.08rem -10.96rem;
  left: -0.08rem;
}
html[data-lang='id'] .page2__words--new-outfits .page2__text--after {
  background-position: -3.88rem -12.38rem;
}
html[data-lang='ms'] .page2__words--new-outfits .page2__text--after {
  width: 4.04rem;
  background-position: -3.99rem -13.8rem;
  left: -0.08rem;
}
.page2__words--gorge-vanguard {
  width: 4.17rem;
  height: 0.98rem;
  left: 7rem;
  top: 3.16rem;
}
.page2__words--gorge-vanguard .page2__text--before {
  background-position: -7.31rem -0.02rem;
}
.page2__words--gorge-vanguard .page2__text--after {
  width: 4.25rem;
  height: 1.4rem;
  background-position: -7.54rem -1.02rem;
  left: 0.08rem;
  top: 0;
}
html[data-lang='pt'] .page2__words--gorge-vanguard .page2__text--after {
  width: 4.85rem;
  background-position: -7.78rem -3.86rem;
}
html[data-lang='ar'] .page2__words--gorge-vanguard .page2__text--after {
  background-position: -7.54rem -5.28rem;
}
html[data-lang='tr'] .page2__words--gorge-vanguard .page2__text--after {
  width: 4.11rem;
  background-position: -8.07rem -6.7rem;
}
html[data-lang='ru'] .page2__words--gorge-vanguard .page2__text--after {
  width: 5.24rem;
  background-position: -8.05rem -8.12rem;
}
html[data-lang='ch'] .page2__words--gorge-vanguard .page2__text--after {
  background-position: -7.54rem -2.44rem;
}
html[data-lang='cht'] .page2__words--gorge-vanguard .page2__text--after {
  background-position: -7.54rem -9.54rem;
}
html[data-lang='es'] .page2__words--gorge-vanguard .page2__text--after {
  width: 4.78rem;
  background-position: -8.08rem -10.96rem;
}
html[data-lang='id'] .page2__words--gorge-vanguard .page2__text--after {
  width: 4.45rem;
  background-position: -7.54rem -12.38rem;
}
html[data-lang='ms'] .page2__words--gorge-vanguard .page2__text--after {
  width: 4.61rem;
  background-position: -8.05rem -13.8rem;
}
/* page2 */

/* page3 */
.words--page3,
.page3__words--menkin .page3__text--before,
.page3__words--menkin .page3__text--after {
  background: url(../img/page3-menkin.png) 0 0 / 32.36rem 36.54rem no-repeat;
}
.words--page3 {
  width: 16.14rem;
  height: 5.18rem;
  background-position: -0.02rem -0.02rem;
  top: 0.43rem;
  margin-left: -1.61rem;
}
.page3__words,
.page3__text--before {
  position: absolute;
}
.page3__words {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page3__text {
  transition: opacity 0.6s;
}
.page3__text--before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page3__text--after {
  opacity: 0;
  flex-shrink: 0;
  position: relative;
}
.page3__words.translate .page3__text--before {
  opacity: 0;
}
.page3__words.translate .page3__text--after {
  opacity: 1;
  transition-delay: 0.3s;
}
.page3__words--menkin {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page3__words--menkin .page3__text--before {
  background-position: -16.2rem -5.24rem;
}
html[data-lang='id'] .page3__words--menkin .page3__text--before {
  background-position: -16.2rem -0.02rem;
}
html[data-lang='ms'] .page3__words--menkin .page3__text--before {
  background-position: -0.02rem -5.24rem;
}
.page3__words--menkin .page3__text--after {
  width: 100%;
  height: 100%;
  background-position: -16.2rem -15.68rem;
}
html[data-lang='pt'] .page3__words--menkin .page3__text--after {
  background-position: -0.02rem -31.34rem;
}
html[data-lang='ar'] .page3__words--menkin .page3__text--after {
  background-position: -0.02rem -10.46rem;
}
html[data-lang='tr'] .page3__words--menkin .page3__text--after {
  background-position: -16.2rem -31.34rem;
}
html[data-lang='ru'] .page3__words--menkin .page3__text--after {
  background-position: -16.2rem -26.12rem;
}
html[data-lang='ch'] .page3__words--menkin .page3__text--after {
  background-position: -16.2rem -10.46rem;
}
html[data-lang='cht'] .page3__words--menkin .page3__text--after {
  background-position: -0.02rem -15.68rem;
}
html[data-lang='es'] .page3__words--menkin .page3__text--after {
  background-position: -0.02rem -20.9rem;
}
html[data-lang='id'] .page3__words--menkin .page3__text--after {
  background-position: -16.2rem -20.9rem;
}
html[data-lang='ms'] .page3__words--menkin .page3__text--after {
  background-position: -0.02rem -26.12rem;
}
.page3__words--fairy-tale {
  width: 3.87rem;
  height: 1.2rem;
  left: 5.12rem;
  top: 0.88rem;
}
.page3__words--fairy-tale .page3__text--before {
  background: none;
}
.page3__words--fairy-tale .page3__text--after {
  width: 100%;
  height: 100%;
  background-position: -0.02rem 0;
  left: 0;
  top: 0;
}
html[data-lang='pt'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -2.44rem;
}
html[data-lang='ar'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -3.66rem;
}
html[data-lang='tr'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -4.88rem;
}
html[data-lang='ru'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -6.1rem;
}
html[data-lang='ch'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -1.22rem;
}
html[data-lang='cht'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -7.32rem;
}
html[data-lang='es'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -8.54rem;
}
html[data-lang='id'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -9.76rem;
}
html[data-lang='ms'] .page3__words--fairy-tale .page3__text--after {
  background-position: -0.02rem -10.98rem;
}
.page3__words--gift {
  width: 2.24rem;
  height: 1.2rem;
  left: 10.88rem;
  top: 0.84rem;
}
.page3__words--gift .page3__text--before {
  background: none;
}
.page3__words--gift .page3__text--after {
  width: 100%;
  height: 100%;
  background-position: -3.91rem 0;
  left: 0;
  top: 0;
}
html[data-lang='pt'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -2.44rem;
}
html[data-lang='ar'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -3.66rem;
}
html[data-lang='tr'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -4.88rem;
}
html[data-lang='ru'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -6.1rem;
}
html[data-lang='ch'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -1.22rem;
}
html[data-lang='cht'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -7.32rem;
}
html[data-lang='es'] .page3__words--gift .page3__text--after {
  background-position: -3.91rem -8.54rem;
}
html[data-lang='id'] .page3__words--gift .page3__text--after {
  width: 2.43rem;
  background-position: -3.91rem -9.76rem;
  left: 0.06rem;
  top: 0.08rem;
}
html[data-lang='ms'] .page3__words--gift .page3__text--after {
  width: 2.41rem;
  background-position: -3.91rem -10.98rem;
  left: 0.06rem;
  top: 0.08rem;
}
.page3__words--sleigh {
  width: 2.27rem;
  height: 1.2rem;
  left: 8.36rem;
  top: 2.08rem;
}
.page3__words--sleigh .page3__text--before {
  background: none;
}
.page3__words--sleigh .page3__text--after {
  width: 100%;
  height: 100%;
  background-position: -6.17rem 0;
  left: 0;
  top: 0;
}
html[data-lang='pt'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -2.44rem;
}
html[data-lang='ar'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -3.66rem;
}
html[data-lang='tr'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -4.88rem;
}
html[data-lang='ru'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -6.1rem;
}
html[data-lang='ch'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -1.22rem;
}
html[data-lang='cht'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -7.32rem;
}
html[data-lang='es'] .page3__words--sleigh .page3__text--after {
  background-position: -6.17rem -8.54rem;
}
html[data-lang='id'] .page3__words--sleigh .page3__text--after {
  width: 2.7rem;
  background-position: -6.33rem -9.76rem;
  left: 0.36rem;
}
html[data-lang='ms'] .page3__words--sleigh .page3__text--after {
  width: 3.18rem;
  background-position: -6.31rem -10.98rem;
  left: 0.14rem;
  top: 0.08rem;
}
/* page3 */

/* page4 */
.words--page4,
.page4__text--before,
.page4__text--after {
  background: url(../img/page4-menkin.png) 0 0 / 40.56rem 21.46rem no-repeat;
}
.words--page4 {
  width: 13.48rem;
  height: 4.7rem;
  background-position: -0.02rem -4.76rem;
  top: 9.6rem;
  margin-left: -7.6rem;
}
.page4__words,
.page4__text--before {
  position: absolute;
}
.page4__words {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page4__text {
  transition: opacity 0.6s;
}
.page4__text--before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page4__text--after {
  opacity: 0;
  flex-shrink: 0;
  position: relative;
}
.page4__words.translate .page4__text--before {
  opacity: 0;
}
.page4__words.translate .page4__text--after {
  opacity: 1;
  transition-delay: 0.3s;
}
.page4__words--menkin {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.page4__words--menkin .page4__text--before {
  background-position: -0.02rem -14.24rem;
}
.page4__words--menkin .page4__text--after {
  width: 100%;
  height: 100%;
  background-position: -0.02rem -9.5rem;
}
html[data-lang='pt'] .page4__words--menkin .page4__text--after {
  background-position: -27.06rem -9.5rem;
}
html[data-lang='ar'] .page4__words--menkin .page4__text--after {
  background-position: -0.02rem -0.02rem;
}
html[data-lang='tr'] .page4__words--menkin .page4__text--after {
  background-position: -27.06rem -14.24rem;
}
html[data-lang='ru'] .page4__words--menkin .page4__text--after {
  background-position: -13.54rem -14.24rem;
}
html[data-lang='ch'] .page4__words--menkin .page4__text--after {
  background-position: -13.54rem -0.02rem;
}
html[data-lang='cht'] .page4__words--menkin .page4__text--after {
  background-position: -27.06rem -0.02rem;
}
html[data-lang='es'] .page4__words--menkin .page4__text--after {
  background-position: -13.54rem -4.76rem;
}
html[data-lang='id'] .page4__words--menkin .page4__text--after {
  background-position: -27.06rem -4.76rem;
}
html[data-lang='ms'] .page4__words--menkin .page4__text--after {
  background-position: -13.54rem -9.5rem;
}
.page4__words--kunakuna {
  width: 3.54rem;
  height: 1.06rem;
  left: 0.8rem;
  top: 1.32rem;
}
.page4__words--kunakuna .page4__text--before {
  background-position: -15.96rem -18.98rem;
}
.page4__words--mumu {
  width: 2.24rem;
  height: 0.68rem;
  left: 10.28rem;
  top: 1.32rem;
}
.page4__words--mumu .page4__text--before {
  background-position: -4.4rem -20.36rem;
}
.page4__words--fireworks {
  width: 1.72rem;
  height: 1rem;
  z-index: 1;
  left: 4.76rem;
  top: 1.28rem;
}
.page4__words--fireworks .page4__text--before {
  background-position: -6.68rem -20.36rem;
}
.page4__words--fireworks .page4__text--after {
  width: 2.86rem;
  height: 1.2rem;
  background-position: -36.88rem -18.98rem;
  left: 0.36rem;
  top: -0.2rem;
}
html[data-lang='pt'] .page4__words--fireworks .page4__text--after {
  width: 4.3rem;
  height: 1.34rem;
  background-position: -4.4rem -18.98rem;
  left: 0.36rem;
}
html[data-lang='ar'] .page4__words--fireworks .page4__text--after {
  width: 2.86rem;
  height: 1.28rem;
  background-position: -25.66rem -18.98rem;
  left: 0.64rem;
}
html[data-lang='tr'] .page4__words--fireworks .page4__text--after {
  width: 3.76rem;
  height: 1.16rem;
  background-position: -8.74rem -20.28rem;
  left: 0.64rem;
}
html[data-lang='ru'] .page4__words--fireworks .page4__text--after {
  width: 3.72rem;
  height: 1.26rem;
  background-position: -8.74rem -18.98rem;
  left: 0.08rem;
}
html[data-lang='ch'] .page4__words--fireworks .page4__text--after {
  width: 2.1rem;
  height: 1.26rem;
  background-position: -31.5rem -20.18rem;
  left: 0;
}
html[data-lang='cht'] .page4__words--fireworks .page4__text--after {
  width: 2.1rem;
  height: 1.26rem;
  background-position: -33.64rem -20.18rem;
  left: 0;
}
html[data-lang='es'] .page4__words--fireworks .page4__text--after {
  width: 4.34rem;
  height: 1.38rem;
  background-position: -0.02rem -18.98rem;
  left: 0.32rem;
}
html[data-lang='id'] .page4__words--fireworks .page4__text--after {
  width: 3.42rem;
  height: 1.24rem;
  background-position: -12.5rem -18.98rem;
  left: 0.2rem;
  top: -0.28rem;
}
html[data-lang='ms'] .page4__words--fireworks .page4__text--after {
  width: 2.92rem;
  height: 1.32rem;
  background-position: -22.7rem -18.98rem;
  left: 0.32rem;
  top: -0.28rem;
}
.page4__words--celebration {
  width: 3.22rem;
  height: 0.82rem;
  left: 6.6rem;
  top: 1.28rem;
}
.page4__words--celebration .page4__text--before {
  background-position: -0.02rem -20.4rem;
}
.page4__words--celebration .page4__text--after {
  width: 2.9rem;
  height: 1.18rem;
  background-position: -28.56rem -20.26rem;
  left: 0.64rem;
  top: -0.16rem;
}
html[data-lang='pt'] .page4__words--celebration .page4__text--after {
  width: 2.78rem;
  height: 1.2rem;
  background-position: -16.06rem -20.08rem;
  left: 1.36rem;
}
html[data-lang='ar'] .page4__words--celebration .page4__text--after {
  width: 2.12rem;
  height: 1.2rem;
  background-position: -18.88rem -20.2rem;
  left: 0.8rem;
}
html[data-lang='tr'] .page4__words--celebration .page4__text--after {
  width: 2.4rem;
  height: 1.16rem;
  background-position: -34.44rem -18.98rem;
  left: 1.04rem;
}
html[data-lang='ru'] .page4__words--celebration .page4__text--after {
  width: 3.48rem;
  height: 1.18rem;
  background-position: -12.54rem -20.26rem;
  left: 1rem;
}
html[data-lang='ch'] .page4__words--celebration .page4__text--after {
  width: 1.9rem;
  height: 1.22rem;
  background-position: -35.78rem -20.22rem;
  left: 0.2rem;
}
html[data-lang='cht'] .page4__words--celebration .page4__text--after {
  width: 1.9rem;
  height: 1.22rem;
  background-position: -37.72rem -20.22rem;
  left: 0.2rem;
}
html[data-lang='es'] .page4__words--celebration .page4__text--after {
  width: 2.92rem;
  height: 1.16rem;
  background-position: -31.48rem -18.98rem;
  left: 1.4rem;
  top: -0.12rem;
}
html[data-lang='id'] .page4__words--celebration .page4__text--after {
  width: 3.12rem;
  height: 1.18rem;
  background-position: -19.54rem -18.98rem;
  left: 0.88rem;
  top: -0.16rem;
}
html[data-lang='ms'] .page4__words--celebration .page4__text--after {
  width: 2.88rem;
  height: 1.24rem;
  background-position: -28.56rem -18.98rem;
  left: 0.72rem;
  top: -0.16rem;
}
/* 单独适配 */
html[data-lang='pt'] .page4__words--menkin .page4__text--before,
html[data-lang='pt'] .page4__words--fireworks .page4__text--before,
html[data-lang='pt'] .page4__words--celebration .page4__text--before,
html[data-lang='pt'] .page4__words--kunakuna,
html[data-lang='pt'] .page4__words--mumu {
  transform: scale(0.8);
}
html[data-lang='pt'] .page4__words--kunakuna {
  margin-left: -0.32rem;
}
html[data-lang='pt'] .page4__words--mumu {
  margin-left: 0.52rem;
}
html[data-lang='ru'] .page4__words--menkin .page4__text--before,
html[data-lang='ru'] .page4__words--fireworks .page4__text--before,
html[data-lang='ru'] .page4__words--celebration .page4__text--before,
html[data-lang='ru'] .page4__words--kunakuna,
html[data-lang='ru'] .page4__words--mumu {
  transform: scale(0.9);
}
html[data-lang='ru'] .page4__words--kunakuna {
  margin-left: -0.44rem;
}
html[data-lang='ru'] .page4__words--mumu {
  margin-left: 0.6rem;
}
html[data-lang='es'] .page4__words--menkin .page4__text--before,
html[data-lang='es'] .page4__words--fireworks .page4__text--before,
html[data-lang='es'] .page4__words--celebration .page4__text--before,
html[data-lang='es'] .page4__words--kunakuna,
html[data-lang='es'] .page4__words--mumu {
  transform: scale(0.8);
}
html[data-lang='es'] .page4__words--kunakuna {
  margin-left: -0.32rem;
}
html[data-lang='es'] .page4__words--mumu {
  margin-left: 0.52rem;
}
html[data-lang='id'] .page4__words--menkin .page4__text--before,
html[data-lang='id'] .page4__words--fireworks .page4__text--before,
html[data-lang='id'] .page4__words--celebration .page4__text--before,
html[data-lang='id'] .page4__words--kunakuna,
html[data-lang='id'] .page4__words--mumu {
  transform: scale(0.95);
}
html[data-lang='id'] .page4__words--kunakuna {
  margin-left: -0.24rem;
}
html[data-lang='id'] .page4__words--mumu {
  margin-left: 0.24rem;
}
/* page4 */

.btn-magnifier {
  width: 1.11rem;
  height: 1.12rem;
  background-position: -9.87rem -3.76rem;
  position: absolute;
  left: 50%;
  opacity: 0;
}
.btn-magnifier-breath {
  opacity: 1;
  animation: magnifier-breath-scale 0.6s infinite alternate;
}
@keyframes magnifier-breath-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}
.btn-magnifier--kv-menkin {
  top: 3.7rem;
  margin-left: 4rem;
}
.btn-magnifier--page1-gorge {
  top: 11.03rem;
  margin-left: -11.63rem;
}
.btn-magnifier--page1-twister {
  top: 3.56rem;
  margin-left: -10.41rem;
}
.btn-magnifier--page1-big-beasts {
  top: 12.6rem;
  margin-left: 1.4rem;
}
.btn-magnifier--page1-gift {
  top: 9.69rem;
  margin-left: 7.13rem;
}
.btn-magnifier--page1-menkin {
  top: 3.73rem;
  margin-left: 9.6rem;
}
.btn-magnifier--page2-new-friends {
  top: 8.48rem;
  margin-left: 4.4rem;
}
.btn-magnifier--page2-new-outfits {
  top: 5.6rem;
  margin-left: -1.6rem;
}
.btn-magnifier--page2-gorge-vanguard {
  top: 3.44rem;
  margin-left: 11.84rem;
}
.btn-magnifier--page2-menkin {
  top: 3.2rem;
  margin-left: 7.2rem;
}
.btn-magnifier--page3-fairy-tale {
  top: 10.24rem;
  margin-left: 10.16rem;
}
.btn-magnifier--page3-gift {
  top: 11.52rem;
  margin-left: -1.04rem;
}
.btn-magnifier--page3-sleigh {
  top: 10.32rem;
  margin-left: -7.84rem;
}
.btn-magnifier--page3-menkin {
  top: 3.76rem;
  margin-left: 12.32rem;
}
.btn-magnifier--page4-fireworks {
  top: 2rem;
  margin-left: 3.36rem;
}
.btn-magnifier--page4-celebration {
  top: 10.4rem;
  margin-left: 8.8rem;
}
.btn-magnifier--page4-menkin {
  top: 9.44rem;
  margin-left: -6.72rem;
}

.dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  outline: none;
}
html[data-lang='ar'] .dialog {
  direction: rtl;
}
.dia-tbc-tip-content,
.dia-tbc-tip-close {
  background: url(../img/dia-tbc-tip.png) 0 0 / 39.78rem 18.88rem no-repeat;
}
.dia-tbc-tip-content {
  width: 13.22rem;
  height: 4.68rem;
  margin: -2.335rem 0 0 -6.7rem;
  background-position: -0.02rem -14.18rem;
  position: absolute;
  left: 50%;
  top: 50%;
  outline: none;
}
html[data-lang='pt'] .dia-tbc-tip-content {
  background-position: -26.54rem -4.74rem;
}
html[data-lang='ar'] .dia-tbc-tip-content {
  background-position: -0.02rem -0.02rem;
}
html[data-lang='tr'] .dia-tbc-tip-content {
  background-position: -13.28rem -14.18rem;
}
html[data-lang='ru'] .dia-tbc-tip-content {
  background-position: -13.28rem -9.46rem;
}
html[data-lang='ch'] .dia-tbc-tip-content {
  background-position: -0.02rem -4.74rem;
}
html[data-lang='cht'] .dia-tbc-tip-content {
  background-position: -0.02rem -9.46rem;
}
html[data-lang='es'] .dia-tbc-tip-content {
  background-position: -13.28rem -0.02rem;
}
html[data-lang='id'] .dia-tbc-tip-content {
  background-position: -26.54rem -0.02rem;
}
html[data-lang='ms'] .dia-tbc-tip-content {
  background-position: -13.28rem -4.74rem;
}
.dia-tbc-tip-close {
  width: 0.7rem;
  height: 0.7rem;
  background-position: -26.54rem -9.46rem;
  position: absolute;
  right: -0.19rem;
  top: 0.33rem;
  outline: none;
}
html[data-lang='ar'] .dia-tbc-tip-close {
  left: -0.19rem;
  right: initial;
}

/* 最后一页互动 */
.bg-swiper {
  width: 18.76rem;
  height: 8.68rem;
  margin-left: -7.72rem;
  top: 0.72rem;
  transform: rotate(-2.36deg);
}
.bg-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-slide--0 {
  background-image: url(../img/page5-slide-0.jpg);
}
.bg-slide--1 {
  background-image: url(../img/page5-slide-1.jpg);
}
.bg-slide--2 {
  background-image: url(../img/page5-slide-2.jpg);
}
.bg-slide--3 {
  background-image: url(../img/page5-slide-3.jpg);
}
.bg-slide--4 {
  background-image: url(../img/page5-slide-4.jpg);
}
.bg-swiper__btn--shadow {
  width: 22.08rem;
  height: 3.2rem;
  background-position: -0.02rem -15.06rem;
  margin-left: -9.48rem;
  z-index: 1;
  top: 3.65rem;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.bg-swiper__btn--prev,
html[data-lang='ar'] .bg-swiper__btn--next {
  width: 2.38rem;
  height: 2.32rem;
  background-position: -28.8rem -19.64rem;
  margin-left: -9.49rem;
  z-index: 1;
  top: 4.36rem;
}
.bg-swiper__btn--prev::after,
html[data-lang='ar'] .bg-swiper__btn--next::after {
  content: '';
  width: 3.2rem;
  height: 3.14rem;
  background-position: -28.8rem -16.46rem;
  position: absolute;
  left: -0.44rem;
  top: -0.44rem;
  pointer-events: none;
  animation: light-breath-opacity 1s infinite alternate;
}
html[data-lang='ar'] .bg-swiper__btn--prev::after {
  display: none;
}
.bg-swiper__btn--prev.clicked::after,
html[data-lang='ar'] .bg-swiper__btn--next.clicked::after {
  display: none;
  animation: none;
}
.bg-swiper__btn--next,
html[data-lang='ar'] .bg-swiper__btn--prev {
  width: 2.38rem;
  height: 2.3rem;
  background-position: -31.22rem -19.64rem;
  margin-left: 10.17rem;
  z-index: 1;
  top: 3.57rem;
}

.menkin-swiper {
  width: 3.12rem;
  height: 0.92rem;
  transform: rotate(-2.36deg);
}
.menkin-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menkin1-swiper__btn--prev,
.menkin1-swiper__btn--next,
.menkin2-swiper__btn--prev,
.menkin2-swiper__btn--next,
.menkin3-swiper__btn--prev,
.menkin3-swiper__btn--next {
  width: 1.11rem;
  height: 0.88rem;
}
.menkin1-swiper {
  margin-left: -5.28rem;
  top: 12.24rem;
}
.menkin1-swiper__btn--prev {
  margin-left: -4.4rem;
  top: 11.08rem;
}
.menkin1-swiper__btn--prev::after {
  content: '';
  width: 1.94rem;
  height: 1.72rem;
  background-position: -32.04rem -16.46rem;
  position: absolute;
  left: -0.36rem;
  top: -0.44rem;
  pointer-events: none;
  animation: light-breath-opacity 1s infinite alternate;
}
.menkin1-swiper__btn--prev.clicked::after {
  display: none;
  animation: none;
}
.menkin1-swiper__btn--next {
  margin-left: -4.24rem;
  top: 13.52rem;
}

.menkin2-swiper {
  margin-left: 0.48rem;
  top: 12rem;
}
.menkin2-swiper__btn--prev {
  margin-left: 1.36rem;
  top: 10.8rem;
}
.menkin2-swiper__btn--next {
  margin-left: 1.52rem;
  top: 13.28rem;
}

.menkin3-swiper {
  margin-left: 6.12rem;
  top: 11.76rem;
}
.menkin3-swiper__btn--prev {
  margin-left: 7.08rem;
  top: 10.56rem;
}
.menkin3-swiper__btn--next {
  margin-left: 7.2rem;
  top: 13.04rem;
}

.slide__menkin {
  transform: rotate(2.36deg);
}
.slide__menkin.menkin11 {
  width: 1.04rem;
  height: 0.74rem;
  background-position: -32.86rem -21.98rem;
}
.slide__menkin.menkin12 {
  width: 2.64rem;
  height: 0.78rem;
  background-position: -26.54rem -22.06rem;
}
.slide__menkin.menkin13 {
  width: 1.82rem;
  height: 0.74rem;
  background-position: -29.26rem -22.82rem;
}
.slide__menkin.menkin21 {
  width: 0.9rem;
  height: 0.84rem;
  background-position: -22.14rem -15.06rem;
}
.slide__menkin.menkin22 {
  width: 1.46rem;
  height: 0.78rem;
  background-position: -31.12rem -22.88rem;
}
.slide__menkin.menkin23 {
  width: 1.6rem;
  height: 0.86rem;
  background-position: -31.22rem -21.98rem;
}
.slide__menkin.menkin31 {
  width: 1.78rem;
  height: 0.78rem;
  background-position: -29.22rem -22rem;
}
.slide__menkin.menkin32 {
  width: 1.84rem;
  height: 0.76rem;
  background-position: -32.04rem -18.22rem;
}
.slide__menkin.menkin33 {
  width: 2.68rem;
  height: 0.76rem;
  background-position: -26.54rem -22.88rem;
}

.page5__foreground {
  width: 23.06rem;
  height: 15rem;
  background-position: -0.02rem -0.02rem;
  margin-left: -10.97rem;
  z-index: 1;
  top: 0;
  pointer-events: none;
}
.page5__hand {
  width: 6.54rem;
  height: 5.56rem;
  background-position: -22.22rem -16.46rem;
  margin-left: 9.57rem;
  z-index: 1;
  top: 9.44rem;
}

.page5__bubble {
  width: 11.06rem;
  height: 2.7rem;
  background-position: -0.02rem -21.04rem;
  margin-left: -0.11rem;
  z-index: 1;
  top: 6.56rem;
}
html[data-lang='pt'] .page5__bubble {
  background-position: -11.12rem -18.3rem;
}
html[data-lang='ar'] .page5__bubble {
  background-position: -23.12rem -0.02rem;
}
html[data-lang='tr'] .page5__bubble {
  background-position: -23.12rem -13.72rem;
}
html[data-lang='ru'] .page5__bubble {
  background-position: -11.12rem -21.04rem;
}
html[data-lang='ch'] .page5__bubble {
  background-position: -0.02rem -18.3rem;
}
html[data-lang='cht'] .page5__bubble {
  background-position: -23.12rem -2.76rem;
}
html[data-lang='es'] .page5__bubble {
  background-position: -23.12rem -5.5rem;
}
html[data-lang='id'] .page5__bubble {
  background-position: -23.12rem -8.24rem;
}
html[data-lang='ms'] .page5__bubble {
  background-position: -23.12rem -10.98rem;
}

.page5__btn-build {
  color: #fefff0;
  font-size: 0.42rem;
  line-height: 0.46rem;
  font-family: Radikal, sans-serif;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0rem 0.04rem 0.06rem rgba(16, 40, 107, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.68rem 0.04rem;
  width: 4.28rem;
  height: 1.44rem;
  background-position: -22.22rem -22.06rem;
  position: absolute;
  z-index: 1;
  right: 0.15rem;
  top: 6.85rem;
}
html[data-lang='ar'] .page5__btn-build {
  left: 0.15rem;
  right: initial;
}
html[data-lang='id'] .page5__btn-build {
  font-size: 0.36rem;
  line-height: 0.4rem;
}

/* 明信片弹窗 */
.dia-save-img {
  background: rgba(0, 0, 0, 0.9);
}
.dia-save-img-close {
  width: 0.78rem;
  height: 0.78rem;
  background-position: -14.83rem -0.02rem;
  position: absolute;
  right: -0.4rem;
  top: -0.12rem;
}
html[data-lang='ar'] .dia-save-img-close {
  left: -0.4rem;
  right: initial;
}
.dia-save-img-content {
  width: 25.6rem;
  height: 13.2rem;
  margin: -6.6rem 0 0 -12.8rem;
  position: absolute;
  left: 50%;
  top: 50%;
}
.dia-save-img-show {
  -webkit-touch-callout: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.dia-save-img-show[src=''] {
  opacity: 0;
}
.dia-save-tip {
  color: #59688f;
  font-size: 0.74rem;
  line-height: 1;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: 12.96rem;
}
.dia-save-a {
  color: #88a8f6;
  font-size: 0.6rem;
  line-height: 1;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: -0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dia-save-a i {
  width: 1.18rem;
  height: 1.18rem;
  margin-right: 0.36rem;
  background-position: -14.83rem -0.82rem;
}
html[data-lang='ar'] .dia-save-a i {
  margin-left: 0.36rem;
  margin-right: 0;
}
/* 加载动画 */
.dia-save-loading {
  margin: -10px 0 0 -5px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.dia-save-loading > div {
  position: absolute;
  width: 5px;
  height: 15px;
  background-color: #fff;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.dia-save-loading .item-1 {
  top: 20px;
  left: 0;
  animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
}
.dia-save-loading .item-2 {
  top: 13.64px;
  left: 13.64px;
  transform: rotate(-45deg);
  animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
}
.dia-save-loading .item-3 {
  top: 0;
  left: 20px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
}
.dia-save-loading .item-4 {
  top: -13.64px;
  left: 13.64px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
}
.dia-save-loading .item-5 {
  top: -20px;
  left: 0;
  -webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
}
.dia-save-loading .item-6 {
  top: -13.64px;
  left: -13.64px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
}
.dia-save-loading .item-7 {
  top: 0;
  left: -20px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
}
.dia-save-loading .item-8 {
  top: 13.64px;
  left: -13.64px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
}
@keyframes line-spin-fade-loader {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.build-img {
  position: fixed;
  left: 200%;
  top: 200%;
}