:root {
  --easeCommon: cubic-bezier(0.10, 0.00, 0.23, 1.00);
  --gardenScale: 1.44;
  --eggScale: 1.8;
  --spriteScale: 1.44;
}
/* @font-face {
  font-family: "swiss";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/Swiss911BTCompressed.otf);
}
@font-face {
  font-family: "swiss-ultra";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/Swiss911BTUltraCompressed.otf);
} */
@font-face {
  font-family: "FZLTYJT";
  src: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/font/FZLTYJT.ttf);
}
/* @font-face {
  font-family: "FZCCHJT";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/FZCCHJT.ttf);
} */
@font-face {
  font-family: "MIANFEIZITI";
  src: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/font/MIANFEIZITI.ttf);
}
/* @font-face {
  font-family: "RUNEREGULAR";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/RUNEREGULAR.ttf);
}
@font-face {
  font-family: "SSMOFANGTI";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/SSMOFANGTI.TTF);
}
@font-face {
  font-family: "MFQIHEI";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/SSMOFANGTI.TTF);
}
@font-face {
  font-family: "ROCOBLACK";
  src: url(//game.gtimg.cn/images/rocom/m/m202504/font-origin/RocofontblackRegular.ttf);
} */

/* .font-swiss {
  font-family: "swiss" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.font-swiss-ultra {
  font-family: "swiss-ultra" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
} */
.font-fzltyjt {
  font-family: "FZLTYJT" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
/* .font-fzcchjt {
  font-family: "FZCCHJT" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
} */
.font-mainfeiziti {
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
/* .font-runeregular {
  font-family: "RUNEREGULAR" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.font-ssmofangti {
  font-family: "SSMOFANGTI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.font-mfqihei {
  font-family: "MFQIHEI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.font-rocoblack {
  font-family: "ROCOBLACK" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
} */

.orange-1 {
  color: #df6d19;
}
.orange-2 {
  color: #e57c4d;
}
.orange-3 {
  color: #e36c36;
}
.orange-4 {
  color: #ffb644;
}
.grey-1 {
  color: #929086;
}
.grey-2 {
  color: #9c9890;
}
.grey-3 {
  color: #b5b1a8;
}
.red-1 {
  color: #FD2F2D;
}
.white {
  color: white;
}

i, picture {
  display: block;
}

.d-hide {
  display: none !important;
  font-size: 0; 
  text-indent: -999em;
}

.d-block {
  display: block !important;
}
body {
  margin-bottom: 0 !important;
}

#toolbar,
#bottombar {
  display: none !important;
}


.page-container {
  width: calc(100 * var(--vw));
  height: auto;
  color: #1e1e1e;
  user-select: none;
  position: fixed;
  /* overflow: hidden; */
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 5;
  /* background-color: #e3dbcf; */
  background-color: #e2dace;
}

.picture-inner {
  width: 100%;
  height: 100%;
}
.anim-btn {
  transition: var(--easeCommon) .2s;
}
.anim-btn:active {
  transform: scale(1.02) !important;
}
.channel-qq {
  width: calc(4.17 * var(--originRem));
  height: calc(.54 * var(--originRem));
  position: absolute;
  top: .62rem;
  right: .32rem;
  z-index: 155;
  display: none;
  opacity: 0;
  object-fit: contain;
}
.channel-wechat {
  width: calc(3.08 * var(--originRem));
  height: calc(.71 * var(--originRem));
  position: absolute;
  top: .56rem;
  right: 0;
  z-index: 155;
  display: none;
  opacity: 0;
}
.qq-channel .channel-qq,
.wechat-channel .channel-wechat {
  display: block;
  opacity: 1;
}
.header-area {
  position: absolute;
  top: 1.38rem;
  right: .28rem;
  z-index: 199;
}
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25,.75,1);
    transform: scale3d(1.25,.75,1)
  }

  40% {
    -webkit-transform: scale3d(.75,1.25,1);
    transform: scale3d(.75,1.25,1)
  }

  50% {
    -webkit-transform: scale3d(1.15,.85,1);
    transform: scale3d(1.15,.85,1)
  }

  65% {
    -webkit-transform: scale3d(.95,1.05,1);
    transform: scale3d(.95,1.05,1)
  }

  75% {
    -webkit-transform: scale3d(1.05,.95,1);
    transform: scale3d(1.05,.95,1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25,.75,1);
    transform: scale3d(1.25,.75,1)
  }

  40% {
    -webkit-transform: scale3d(.75,1.25,1);
    transform: scale3d(.75,1.25,1)
  }

  50% {
    -webkit-transform: scale3d(1.15,.85,1);
    transform: scale3d(1.15,.85,1)
  }

  65% {
    -webkit-transform: scale3d(.95,1.05,1);
    transform: scale3d(.95,1.05,1)
  }

  75% {
    -webkit-transform: scale3d(1.05,.95,1);
    transform: scale3d(1.05,.95,1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.header-icon {
  width: .77rem;
  height: .78rem;
  margin: 0 .15rem;
}
.header-icon-shake {
  animation: rubberBand 1s ease-in-out 10 forwards;
}
.header-icon-menu {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/icon-menu.png) 50% 100% / 100% 100% no-repeat;
}
.header-icon-music-on {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/icon-music-on.png) 50% 100% / 100% 100% no-repeat;
}
.header-icon-music-off {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/icon-music-off.png) 50% 100% / 100% 100% no-repeat;
}
.header-menu-box {
  width: 4.1rem;
  padding: .55rem .5rem;
  background-color: #272727;
  position: absolute;
  right:1.2rem;
  top: .98rem;
  z-index: 9;
  overflow: hidden;
  border-radius: 1rem;
}
.header-menu-box::after {
  content: "";
  width: 5.09rem;
  height: 3.94rem;
  
  position: absolute;
  top: .12rem;
  left: .1rem;
  z-index: 1;
}
.support-avif .header-menu-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/menu-bg-star.avif) 50% 100% / 100% 100% no-repeat;
}
.support-webp .header-menu-box::after,
.support-png .header-menu-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/menu-bg-star.png) 50% 100% / 100% 100% no-repeat;
}
.header-menu-box-item {
  width: 3.1rem;
  height: .96rem;
  line-height: .96rem;
  font-size: .42rem;
  text-align: center;
  color: #b7b5aa;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  position: relative;
  z-index: 2;
  margin: .08rem 0;
}

.preload-page {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 100vh;
  left: 100vw;
  z-index: -999;
  pointer-events: none;
  opacity: 0;
}
.preload-page img {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
/* ------------- pc --------------- */
.pc-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999999;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.support-avif .pc-page {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pc-bg.avif) 0 50% / cover no-repeat;
}
.support-webp .pc-page {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pc-bg.wepb) 0 50% / cover no-repeat;
}
.support-png .pc-page {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pc-bg.jpg) 0 50% / cover no-repeat;
}
.pc .pc-page {
  display: block;
  opacity: 1;
  pointer-events: visible;
}
.mobile-qr-code-outter {
  width: 340px;
  height: 340px;
  background-size: contain;
  margin-bottom: 20px;
  background: rgba(66, 66, 66, .7);
  user-select: none;
}
.mobile-qr-code {
  width: 300px;
  height: 300px;
  user-select: none;
}
.pc-page span {
  font-size: 24px;
  color: white;
}
.pc-logo {
  width: 279px;
  user-select: none;
  position: absolute;
  top: 27px;
  left: 25px;
}
/* ------------------ home --------------------- */
.page-home {
  width: 100%;
  height: 100%;
  height: calc(100% + 2rem);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 51;
}
.page-home-bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.page-home-logo {
  width: calc(3.79 * var(--originRem));
  height: calc(1.46 * var(--originRem));
  position: absolute;
  top: .4rem;
  left: .36rem;
  z-index: 5;
}
.page-home-footer {
  width: 100%;
  height: calc(8.08 * var(--originRem));
  position: absolute;
  left: 0;
  bottom: 2rem;
  z-index: 3;
  font-size: .36rem;
  color: #929086;
}
.support-avif .page-home-footer {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/footer.avif) 50% 100% / 100% 100% no-repeat;
}
.support-webp .page-home-footer {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/footer.webp) 50% 100% / 100% 100% no-repeat;
}
.support-png .page-home-footer {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/footer.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-footer span {
  height: calc(.5 * var(--originRem));
  line-height: calc(.5 * var(--originRem));
}
.page-home-icon-qq {
  width: calc(2.61 * var(--originRem));
  height: calc(3.2 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-qq.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-icon-wechat {
  width: calc(2.61 * var(--originRem));
  height: calc(3.2 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-wechat.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-icon-check-box {
  width: calc(.38 * var(--originRem));
  height: calc(.38 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-check-box.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-icon-check-box[data-active="1"] {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-check-box-active.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-avatar-box {
  width: calc(2.3 * var(--originRem));
  height: calc(2.3 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/avatar-box.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-avatar {
  width: calc(2.3 * var(--originRem));
  height: calc(2.3 * var(--originRem));
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  transform: scale(calc(215 / 230));
}
.page-home-user-name {
  max-width: 8rem;
  white-space: nowrap;
  font-size: .4rem;
  line-height: calc(.5 * var(--originRem));
  position: relative;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.qq-channel .page-home-user-name::after {
  content: "";
  width: calc(.39 * var(--originRem));
  height: calc(.45 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-qq-name.png) 50% 100% / 100% 100% no-repeat;
  position: absolute;
  left: -.51rem;
  top: .02rem;
  z-index: 3;
}
.wechat-channel .page-home-user-name::after {
  content: "";
  width: calc(.51 * var(--originRem));
  height: calc(.42 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-wechat-name.png) 50% 100% / 100% 100% no-repeat;
  position: absolute;
  left: -.63rem;
  top: .02rem;
  z-index: 3;
}
.qq-channel .page-home-user-name {
  color: #4fc4fa !important;
}
.wechat-channel .page-home-user-name {
  color: #7ecf36 !important;
}
.page-home-btn-appointment {
  width: calc(6.12 * var(--originRem));
  height: calc(1.36 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/btn-appointment.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-btn-current-account {
  width: calc(6.12 * var(--originRem));
  height: calc(1.36 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/btn-current-account.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-btn-agree {
  width: calc(5.33 * var(--originRem));
  height: calc(1.36 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/btn-agree.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-btn-bind {
  width: calc(5.33 * var(--originRem));
  height: calc(1.36 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/btn-bind.png) 50% 100% / 100% 100% no-repeat;
}
.page-home-btn-current-account {
  width: calc(6.12 * var(--originRem));
  height: calc(1.36 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/btn-current-account.png) 50% 100% / 100% 100% no-repeat;
}

.part-footer {
  width: calc(10.8 * var(--originRem));
  height: 2rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 30;
  background-color: #000;
}
.part-footer-bg {
  width: calc(10.8 * var(--originRem));
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.part-footer-main-area {
  width: calc(10.8 * var(--originRem));
  height: auto;
  position: absolute;
  top: .75rem;
  left: 0;
  z-index: 5;
}
.part-footer-icon-tencent {
  width: 2.14rem;
  height: .38rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250616preview/web/icon-tencent.png) 50% 50% / contain no-repeat;
  margin-right: .6rem;
  display: block;
}
.part-footer-icon-morefun {
  width: 1.65rem;
  height: .42rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250616preview/web/icon-morefun.png) 50% 50% / contain no-repeat;
  transform: translateY(.02rem);
  display: block;
}
#afooter .foot, #afooter a, #afooter span {
  color: #b2b2b2;
  text-align: center;
  font-size: .2rem;
}
/* ------------------ loading --------------------- */
.page-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 52;
}
.page-loading-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.page-loading-bg::before {
  content: "";
  width: 7.35rem;
  height: 2.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 99;
}
.support-png .page-loading-bg::before {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-2.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-loading-bg::before {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-2.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .page-loading-bg::before {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-2.avif) 50% 50% / 100% 100% no-repeat;
}
.page-loading-bg::after {
  content: "";
  width: 4.86rem;
  height: 1.68rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.support-png .page-loading-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-1.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-loading-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-1.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .page-loading-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/paper-1.avif) 50% 50% / 100% 100% no-repeat;
}
.page-loading-logo {
  width: 3.35rem;
  height: 1.03rem;
  position: absolute;
  left: 50%;
  bottom: 2.38rem;
  transform: translateX(-50%);
  z-index: 5;
}
.page-loading-main {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: .5rem;
  color: #272727;
}
.page-loading-owl {
  width: 6.3rem;
}
.page-loading-owl-tip {
  width: 6.2rem;
  height: 2.13rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: .42rem;
  line-height: .6rem;
}
.page-loading-progress-outter {
  width: 8.98rem;
  height: 1.1rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/outter.png) 50% 50% / 100% 100% no-repeat;
}
.page-loading-progress-inner {
  width: 8.57rem;
  height: .78rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/inner.png) 50% 50% / 100% 100% no-repeat;
  position: relative;
}
.page-loading-progress-main {
  width: 8.57rem;
  height: .78rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/main.png) 50% 50% / 100% 100% no-repeat;
  position: relative;
  -webkit-mask-image: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/main.png);
  mask-image: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/main.png);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 8.57rem .78rem;
  mask-size:  8.57rem .78rem;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: .8rem .78rem;
  mask-size: .8rem .78rem;
}
.page-loading-progres-rocket {
  width: 8.57rem;
  height: .78rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: .8rem;
}
.page-loading-progres-rocket::after {
  content: "";
  width: 1.23rem;
  height: 1.08rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/loading/icon-rocket.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.15rem;
  right: -.3rem;
  z-index: 5;
}
/* ------------------ paint --------------------- */
.page-scene,
.page-scene-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 53;
}
.page-scene-mask {
  width: 101%;
}
.page-scene-pixi-canvas {
  width: 100%;
  height: 100%;

  /* opacity: 1 !important;
  z-index: 999;
  position: relative; */
}
.page-scene-video-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  opacity: 0;
}
.page-scene-mask {
  opacity: 0;
  display: none;
  z-index: 65;
}
.page-scene[data-mask="1"] .page-scene-mask {
  opacity: 1;
  display: block;
}
.page-scene-guide-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: fill;
  object-position: center;
  z-index: 22;
}
.page-scene-guide-tip {
  font-size: .5rem;
  line-height: .5rem;
  color: #fff;
  position: absolute;
  top: calc(38% + 1.3 * var(--originRem));
  right: 15%;
  z-index: 26;
}
.page-scene-guide-cursor {
  width: 1.3rem;
  height: .96rem;
  position: absolute;
  top: 38%;
  right: 15%;
  z-index: 26;
}
.page-scene[data-mask="1"] .page-scene-guide-cursor {
  animation: page-scene-guide-cursor-frame 3s linear infinite;
}
@keyframes page-scene-guide-cursor-frame {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(.3rem, -.25rem);
  }
  75% {
    transform: translate(-.3rem, .25rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

.page-scene[data-skip="1"] .page-scene-icon-skip {
  opacity: 1;
  display: block;
}
.page-scene-icon-skip {
  width: 1.2rem;
  opacity: 0;
  display: none;
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 16;
}

.page-scene-touch-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  display: none;
}
.page-scene[data-scene="1"] .page-scene-touch-layer[data-scene="1"],
.page-scene[data-scene="2"] .page-scene-touch-layer[data-scene="2"],
.page-scene[data-scene="3"] .page-scene-touch-layer[data-scene="3"],
.page-scene[data-scene="4"] .page-scene-touch-layer[data-scene="4"] {
  display: block;
  pointer-events: visible;
}

.page-scene-fg-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 13;
  pointer-events: none;
}
.page-scene-fg-layer img {
  object-fit: fill;
}
.page-scene-1-light,
.page-scene-3-child,
.page-scene-3-light,
.page-scene-4-light {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
}
.page-scene-anim-wrapper {
  width: 10.8rem;
  height: 20.74rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
}
.page-scene-anim-wrapper[data-bottom="1"] {
  top: unset;
  bottom: 0;
}
.page-scene-anim-inner {
  height: 100%;
}


.page-scene-2-girl-inner {
  width: 32.4rem;
}

.page-scene-4-poster-inner {
  width: 43.2rem;
}

.page-scene-2-boy-2-inner {
  width: 54rem;
}

.page-scene-1-tape-inner {
  width: 75.6rem;
}
.page-scene-2-boy-4-inner,

.page-scene-4-boy-2-inner {
  width: 86.4rem;
}

.page-scene-3-boy-2-inner {
  width: 97.2rem;
}

.page-scene-3-hand-inner,
.page-scene-4-vine-inner {
  width: 108rem;
}

.page-scene-2-book-inner,
.page-scene-2-hand-inner,
.page-scene-3-boy-1-frame,
.page-scene-3-boy-2-frame,
.page-scene-3-girl-inner {
  width: 129.6rem;
}
.page-scene-1-hand-inner,
.page-scene-1-book-inner,
.page-scene-2-boy-1-inner,
.page-scene-4-boy-2-frame {
  width: 140.4rem; /* 97.5 */
  
}

.page-scene-2-boy-3-frame-2,
.page-scene-4-boy-1-frame,
.page-scene-4-girl-frame {
  width: 151.2rem;
}

.page-scene-2-boy-3-frame-1 {
  width: 162rem;
}

.page-scene-4-hand-inner {
  width: 172.8rem;
}

.page-scene-3-boy-1-inner,
.page-scene-3-boy-2-inner {
  width: 259.2rem;
}

.page-scene-4-boy-2-inner {
  width: 280.8rem;
}

.page-scene-4-boy-1-inner,
.page-scene-4-girl-inner {
  width: 302.4rem;
}

.page-scene-2-boy-3-inner {
  width: 313.2rem;
}


.page-scene-anim {
  width: 100%;
  height: 100%;
}

.page-scene-4-fan-wrapper {
  width: 10.8rem;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
}
.page-scene-4-fan-inner {
  width: 324rem;
  height: 100%;
  position: relative;
}
.page-scene-4-fan-inner[data-anim="1"] {
  animation: page-scene-4-fan-frame 1.25s steps(29, end) infinite forwards;
}
.page-scene-4-fan {
  width: 108rem;
  height: 100%;
}
@keyframes page-scene-4-fan-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-313.2rem);
  }
}

/* ------------------ garden --------------------- */
.page-garden,
.page-garden-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 52;
}
.page-garden-mask {
  opacity: 0;
  display: none;
  z-index: 65;
}
.page-garden[data-mask="1"] .page-garden-mask {
  opacity: 1;
  display: block;
}
.page-garden-bg,
.page-garden-guide-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.super-short-screen .page-garden-bg {
  width: 10.8rem;
  height: 20.85rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.page-garden-guide-light {
  width: 3.91rem;
  height: 4.42rem;
  position: absolute;
  top: calc(25.25 / 5 * var(--gardenScale) * var(--originRem));
  left: calc(15.5 / 5 * var(--gardenScale) * var(--originRem));
  z-index: 6;
}
.page-garden-guide-cursor {
  width: 1.3rem;
  height: .96rem;
  position: absolute;
  top: calc(39.5 / 5 * var(--gardenScale) * var(--originRem));
  left: calc(13.2 / 5 * var(--gardenScale) * var(--originRem));
  z-index: 6;
}
.page-garden[data-mask="1"] .page-garden-guide-cursor {
  animation: page-garden-guide-cursor-frame 3s linear infinite;
}
@keyframes page-garden-guide-cursor-frame {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(.3rem, -.25rem);
  }
  75% {
    transform: translate(-.3rem, .25rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.page-garden-grandma-wrapper {
  width: calc(2.11 * var(--gardenScale) * var(--originRem));
  height: calc(2.99 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: calc(45.26 / 5 * var(--gardenScale) * var(--originRem));
  left: calc(21.2 / 5  * var(--gardenScale)* var(--originRem));
  z-index: 7;
  overflow: hidden;
}
.page-garden-grandma-shadow {
  width: calc(1.54 * var(--gardenScale) * var(--originRem));
  height: calc(.44 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: calc((45.26 / 5 + 2.65) * var(--gardenScale) * var(--originRem));
  left: calc((21.2 / 5 + .35) * var(--gardenScale) * var(--originRem));
  z-index: 5;
}
.page-garden-grandma-inner {
  width: calc(183.57 * var(--gardenScale) * var(--originRem));
  animation: page-garden-grandma-frame 3.63s steps(86, end) infinite forwards;
}
.page-garden[data-anim="0"] .page-garden-grandma-inner {
  animation-play-state: paused;
}
.page-garden-grandma {
  width: calc(37.98 * var(--gardenScale) * var(--originRem));
  height: calc(2.99 * var(--gardenScale) * var(--originRem));
}
.page-garden-grandma-2 {
  width: calc(31.65 * var(--gardenScale) * var(--originRem));
  height: calc(2.99 * var(--gardenScale) * var(--originRem));
}
@keyframes page-garden-grandma-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-86 * 2.11 * var(--gardenScale) * var(--originRem)));
  }
}

.page-garden-talk-wrapper {
  width: calc(1.23 * var(--gardenScale) * var(--originRem));
  height: calc(.54 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: calc(43.6 / 5 * var(--gardenScale) * var(--originRem));
  left: calc(21 / 5 * var(--gardenScale) * var(--originRem));
  z-index: 7;
  overflow: hidden;
}
.page-garden-talk-inner {
  width: calc(102.09 * var(--gardenScale) * var(--originRem));
  animation: page-garden-talk-frame 3.45s steps(82, end) infinite forwards;
}
.page-garden[data-anim="0"] .page-garden-talk-inner {
  animation-play-state: paused;
}
.page-garden-talk {
  width: calc(25.83 * var(--gardenScale) * var(--originRem));
  height: calc(.54 * var(--gardenScale) * var(--originRem));
}
.page-garden-talk-2 {
  width: calc(24.6 * var(--gardenScale) * var(--originRem));
  height: calc(.54 * var(--gardenScale) * var(--originRem));
}
@keyframes page-garden-talk-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-82 * 1.23 * var(--gardenScale) * var(--originRem)));
  }
}

.page-garden-window-wrapper {
  width: calc(1.7 * var(--gardenScale) * var(--originRem));
  height: calc(1.18 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: calc(11.15 / 5 * var(--gardenScale) * var(--originRem));
  /* left: calc(16.5 / 5 * var(--gardenScale) * var(--originRem)); */
  left: 50%;
  transform: translateX(calc(-.45 * var(--gardenScale) * var(--originRem)));
  z-index: 7;
  overflow: hidden;
}
.super-short-screen .page-garden-window-wrapper {
  top: 50%;
  transform: translate(calc(-.45 * var(--gardenScale) * var(--originRem)), calc(-5 * var(--gardenScale) * var(--originRem)));
}
.page-garden-window-inner {
  width: calc(153 * var(--gardenScale) * var(--originRem));
  animation: page-garden-window-frame 3.75s steps(89, end) infinite forwards;
}
.page-garden[data-anim="0"] .page-garden-window-inner {
  animation-play-state: paused;
}
.page-garden-window {
  width: calc(30.6 * var(--gardenScale) * var(--originRem));
  height: calc(1.18 * var(--gardenScale) * var(--originRem));
}
@keyframes page-garden-window-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-89 * 1.7 * var(--gardenScale) * var(--originRem)));
  }
}

.page-garden-flower-wrapper {
  width: calc(3.15 * var(--gardenScale) * var(--originRem));
  height: calc(3.66 * var(--gardenScale) * var(--originRem));
  position: absolute;
  /* top: calc(11.50 / 5 * var(--gardenScale) * var(--originRem)); */
  top: 50%;
  left: 50%;
  transform: translate(calc(-3.75 * var(--gardenScale) * var(--originRem)), calc(-5 * var(--gardenScale) * var(--originRem)));
  /* left: 0; */
  z-index: 7;
  overflow: hidden;
}
.page-garden-flower-inner {
  width: calc(180.12 * var(--gardenScale) * var(--originRem));
  animation: page-garden-flower-frame 2.375s steps(56, end) infinite forwards;
}
.page-garden[data-anim="0"] .page-garden-flower-inner {
  animation-play-state: paused;
}
.page-garden-flower {
  width: calc(60.04 * var(--gardenScale) * var(--originRem));
  height: calc(3.66 * var(--gardenScale) * var(--originRem));
}
@keyframes page-garden-flower-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-56 * 3.16 * var(--gardenScale) * var(--originRem)));
  }
}

.page-garden-door-touch-layer {
  width: calc(3.63 * var(--gardenScale) * var(--originRem));
  height: calc(2.56 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-2.36 * var(--gardenScale) * var(--originRem)), calc(-2.2 * var(--gardenScale) * var(--originRem)));
  z-index: 33;
  overflow: hidden;
}
/* .super-short-screen .page-garden-door-touch-layer  {
  transform: translate(calc(-2.36 * var(--gardenScale) * var(--originRem)), calc(-1.44 * var(--gardenScale) * var(--originRem)))
} */
.page-garden-door-wrapper,
.page-garden-opening-door-wrapper {
  width: calc(3.63 * var(--gardenScale) * var(--originRem));
  height: calc(2.56 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-2.36 * var(--gardenScale) * var(--originRem)), calc(-2.2 * var(--gardenScale) * var(--originRem)));
  z-index: 11;
  overflow: hidden;
}
/* .super-short-screen .page-garden-door-wrapper,
.super-short-screen .page-garden-opening-door-wrapper {
  transform: translate(calc(-2.36 * var(--gardenScale) * var(--originRem)), calc(-1.44 * var(--gardenScale) * var(--originRem)))
} */

.page-garden-opening-door-inner {
  width: calc(326.7 * var(--gardenScale) * var(--originRem));
}
.page-garden-opening-door-wrapper.active .page-garden-opening-door-inner {
  animation: page-garden-opening-door-frame 3.75s steps(89, end) 1 forwards;
}
.page-garden-opening-door-wrapper.active .page-garden-door-inner {
  width: calc(326.7 * var(--gardenScale) * var(--originRem));
  animation: page-garden-opening-door-frame 3.75s steps(89, end) infinite forwards;
}
.page-garden[data-anim="0"] .page-garden-opening-door-wrapper.active .page-garden-opening-door-inner,
.page-garden[data-anim="0"] .page-garden-door-inner {
  animation-play-state: paused;
}
.page-garden-door,
.page-garden-opening-door {
  width: calc(65.34 * var(--gardenScale) * var(--originRem));
  height: calc(2.56 * var(--gardenScale) * var(--originRem));
}
@keyframes page-garden-opening-door-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-89 * 3.63 * var(--gardenScale) * var(--originRem)));
  }
}
/* ------------------ room --------------------- */
.page-room {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 56;
}
.page-room-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.super-short-screen .page-room-bg img {
  object-position: center 70%;
}
.page-room-owl-wrapper,
.page-room-owl-wrapper-frame {
  width: calc(2.86 * var(--gardenScale) * var(--originRem));
  height: calc(3 * var(--gardenScale) * var(--originRem));
  position: absolute;
  top: calc(5.96 * var(--originRem));
  left: calc(.8 * var(--originRem));
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.super-short-screen .page-room-owl-wrapper,
.super-short-screen .page-room-owl-wrapper-frame {
  top: calc(3.56 * var(--originRem));
}
.page-room-owl-inner {
  width: calc(28.6 * 5 * var(--gardenScale) * var(--originRem));
  
}
.page-room[data-anim="1"] .page-room-owl-inner {
  animation: page-room-owl-frame 2.08s steps(49, end) infinite forwards;
}
.page-room-owl {
  width: calc(28.6 * var(--gardenScale) * var(--originRem));
  height: calc(3 * var(--gardenScale) * var(--originRem));
}
@keyframes page-room-owl-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-49 * 2.86 * var(--gardenScale) * var(--originRem)));
  }
}
.page-room-owl-spirte-name {
  display: none;
  opacity: 0;
}
.page-room[data-sprite="1"] .page-room-owl-spirte-name[data-sprite="1"],
.page-room[data-sprite="2"] .page-room-owl-spirte-name[data-sprite="2"],
.page-room[data-sprite="3"] .page-room-owl-spirte-name[data-sprite="3"] {
  opacity: 1;
  display: inline-flex;
}
.page-room-egg-wrapper,
.page-room-egg-wrapper-frame {
  width: calc(7.98 * var(--eggScale) * var(--originRem));
  height: calc(7.79 * var(--eggScale) * var(--originRem));
  position: absolute;
  left: calc(-2.5 * var(--originRem));
  bottom: -2rem;
  z-index: 7;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.page-room-egg-wrapper-frame {
  pointer-events: none;
}
.page-room[data-sprite="0"] .page-room-egg-wrapper,
.page-room[data-sprite="0"] .page-room-egg-wrapper-frame {
  opacity: 1;
  display: block;
}
.super-short-screen .page-room-egg-wrapper,
.super-short-screen .page-room-egg-wrapper-frame {
  bottom: -3.2rem;
}

.page-room-egg-inner {
  width: calc(494.76 * var(--eggScale) * var(--originRem));
}
.page-room[data-anim="1"][data-sprite="0"] .page-room-egg-inner {
  animation: page-room-egg-frame 2.541s steps(61, end) infinite forwards;
}
.page-room-egg {
  width: calc(87.78 * var(--eggScale) * var(--originRem));
  height: calc(7.79 * var(--eggScale) * var(--originRem));
}
.page-room-egg-2 {
  width: calc(55.86 * var(--eggScale) * var(--originRem));
  height: calc(7.79 * var(--eggScale) * var(--originRem));
}
@keyframes page-room-egg-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-61 * 7.98 * var(--eggScale) * var(--originRem)));
  }
}

.page-room-spite-frame-box {
  position: absolute;
  z-index: 7;
  opacity: 0;
  display: none;
  /* right: 50%; */
  /* transform: translateX(-50%); */
  bottom: 1.4rem;
}
.page-room-spite-frame-box[data-sprite="1"] {
  left: calc(2.8728 * var(--originRem));
}
.page-room-spite-frame-box[data-sprite="2"] {
  left: calc(3.7728 * var(--originRem));
}
.page-room-spite-frame-box[data-sprite="3"] {
  width: calc(3.68 * var(--spriteScale) * var(--originRem));
  height: calc(3.92 * var(--spriteScale) * var(--originRem));
  left: calc(2.7504 * var(--originRem));
 }
.page-room[data-sprite="1"] .page-room-spite-frame-box[data-sprite="1"],
.page-room[data-sprite="2"] .page-room-spite-frame-box[data-sprite="2"],
.page-room[data-sprite="3"] .page-room-spite-frame-box[data-sprite="3"] {
  opacity: 1;
  display: block;
}
.page-room-sprite-talk-box {
  width: 5.64rem;
  height: 2.44rem;
  line-height: 2.24rem;
  text-align: center;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/room/sprite-talk-box.png) 50% 50% / 100% 100% no-repeat;
  font-size: .5rem;
  color: #272727;
  position: absolute;
  z-index: 20;
  transform: scale(0);
  transform-origin: .5rem bottom;
}
.page-room-spite-frame-box[data-sprite="1"] .page-room-sprite-talk-box {
  top: -2.5rem;
  right: -2rem;
}
.page-room-spite-frame-box[data-sprite="2"] .page-room-sprite-talk-box {
  top: -2.5rem;
  right: -3rem;
}
.page-room-spite-frame-box[data-sprite="3"] .page-room-sprite-talk-box {
  top: -2.2rem;
  right: -2rem;
}

.page-room-sprite-1-walk-wrapper {
  width: calc(3.51 * var(--spriteScale) * var(--originRem));
  height: calc(4.46 * var(--spriteScale) * var(--originRem));
  position: relative;
  overflow: hidden;
}
.page-room-sprite-1-walk-inner {
  width: calc((3.51 * 100) * var(--spriteScale) * var(--originRem));
  height: calc(4.46 * var(--spriteScale) * var(--originRem));
}
.page-room[data-anim="1"][data-sprite="1"] .page-room-sprite-1-walk-inner {
  animation: page-room-sprite-1-walk-frame 4s steps(99, end) infinite forwards;
}
.page-room-sprite-1-walk {
  width: calc(70.2 * 5 * var(--spriteScale) * var(--originRem));
  height: calc(4.46 * var(--spriteScale) * var(--originRem));
}
@keyframes page-room-sprite-1-walk-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-99 * 3.51 * var(--spriteScale) * var(--originRem)));
  }
}

.page-room-sprite-2-walk-wrapper {
  width: calc(2.26 * var(--spriteScale) * var(--originRem));
  height: calc(4.27 * var(--spriteScale) * var(--originRem));
  position: relative;
  overflow: hidden;
}
.page-room-sprite-2-walk-inner {
  width: calc((2.26 * 69) * var(--spriteScale) * var(--originRem));
  height: calc(4.27 * var(--spriteScale) * var(--originRem));
}
.page-room[data-anim="1"][data-sprite="2"] .page-room-sprite-2-walk-inner {
  animation: page-room-sprite-2-walk-frame 2.83s steps(68, end) infinite forwards;
}
.page-room-sprite-2-walk {
  width: calc(2.26 * 23 * var(--spriteScale) * var(--originRem));
  height: calc(4.27 * var(--spriteScale) * var(--originRem));
}
@keyframes page-room-sprite-2-walk-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-68 * 2.26 * var(--spriteScale) * var(--originRem)));
  }
}

.page-room-spite-frame-box[data-sprite="3"][data-type="stay"] .page-room-sprite-3-stay-wrapper,
.page-room-spite-frame-box[data-sprite="3"][data-type="walk"] .page-room-sprite-3-walk-wrapper {
  opacity: 1;
  display: block;
}
.page-room-sprite-3-frame-wrapper {
  width: calc(3.96 * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
  position: relative;
  z-index: 2;
}
.page-room-sprite-3-walk-wrapper {
  width: calc(3.96 * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
  position: relative;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.page-room-sprite-3-walk-inner {
  width: calc((3.96 * 180) * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
}
.page-room[data-anim="1"][data-sprite="3"] .page-room-sprite-3-walk-inner {
  animation: page-room-sprite-3-walk-frame 7.5s steps(179, end) infinite forwards;
}
.page-room-sprite-3-walk {
  width: calc(3.96* 36 * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
}
@keyframes page-room-sprite-3-walk-frame {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-179 * 3.96 * var(--spriteScale) * var(--originRem)));
  }
}

.page-room-sprite-3-stay-wrapper {
  width: calc(3.96 * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
  position: absolute;
  /* top: calc(.15 * var(--spriteScale) * var(--originRem));
  left: calc(-.05 * var(--spriteScale) * var(--originRem)); */
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.page-room-sprite-3-stay-inner {
  width: calc((3.96 * 100) * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
}
.page-room[data-anim="1"][data-sprite="3"] .page-room-sprite-3-stay-inner {
  animation: page-room-sprite-3-stay-frame 8s steps(99, end) infinite forwards;
}
.page-room-sprite-3-stay {
  width: calc(3.96 * 20 * var(--spriteScale) * var(--originRem));
  height: calc(3.83 * var(--spriteScale) * var(--originRem));
}
@keyframes page-room-sprite-3-stay-frame {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-99 * 3.96 * var(--spriteScale) * var(--originRem)));
  }
  100% {
    transform: translateX(0);
  }
}

.page-room-owl-talk-box {
  opacity: 0;
  /* display: none; */
  transform: scale(0);
  transform-origin: .5rem bottom;
  position: relative;
}
.page-room-owl-talk-box::after {
  content: "";
  width: .37rem;
  height: .35rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/room/owl/talk-star.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 1.43rem;
  right: .42rem;
  z-index: 5;
}
.page-room[data-anim="1"] .page-room-owl-talk-box::after {
  animation: page-room-owl-talk-box-star-frame 1s linear infinite forwards;
}
@keyframes page-room-owl-talk-box-star-frame {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.page-room[data-owltalk="1"] .page-room-owl-talk-box[data-type="1"],
.page-room[data-owltalk="2"] .page-room-owl-talk-box[data-type="2"],
.page-room[data-owltalk="3"] .page-room-owl-talk-box[data-type="3"],
.page-room[data-owltalk="4"] .page-room-owl-talk-box[data-type="4"],
.page-room[data-owltalk="5"] .page-room-owl-talk-box[data-type="5"],
.page-room[data-owltalk="6"] .page-room-owl-talk-box[data-type="6"] {
  opacity: 1;
  transform: scale(1);
  transition: .5s var(--easeCommon);
}
.page-room-owl-talk-box-1 {
  width: calc(8.84 * var(--originRem));
  height: calc(2.44 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/room/owl/talk-box-1.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: calc(3.14 * var(--originRem));
  left: calc(1.23 * var(--originRem));
  font-size: .35rem;
  line-height: .42rem;
  z-index: 8;
}
.page-room-owl-talk-box-2 {
  width: calc(5.64 * var(--originRem));
  height: calc(2.44 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/room/owl/talk-box-2.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: calc(4.85 * var(--originRem));
  left: calc(3 * var(--originRem));
  font-size: .38rem;
  line-height: .57rem;
  z-index: 8;
}
.page-room-owl-talk-content {
  height: calc(2.26 * var(--originRem));
}
.page-room-owl-talk-name {
  max-width: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  /* font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important; */
}
.page-room-white-mask {
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
  display: none;
}
.page-room-mask
.page-room-guide-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 10;
}
.page-room-guide-mask {
  opacity: 0;
  display: none;
}
.page-room[data-mask="1"] .page-room-guide-mask {
  opacity: 1;
  display: block;
}
.page-room-mask-light {
  width: 3.91rem;
  height: 4.42rem;
  position: absolute;
  top: 6.6rem;
  left: .5rem;
  z-index: 15;
  opacity: 0;
  display: none;
}
.page-room[data-masklight="1"] .page-room-mask-light {
  opacity: 1;
  display: block;
}

/* ------------------ data --------------------- */
.page-data-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.page-data-opacity-layer {
  opacity: 0;
}
.page-data-content {
  height: auto;
  position: absolute;
  left: 0;
  top: 10%;
  z-index: 6;
  font-size: .36rem;
  line-height: .66rem !important;
  padding-left: calc(1.1 * var(--originRem));
}
.page-data-icon-skip {
  width: 1.58rem;
  position: absolute;
  bottom: 1rem;
  right: .5rem;
  z-index: 25;
  opacity: 1;
  /* display: none; */
}
.page-data-icon-back {
  width: 1.94rem;
  position: absolute;
  bottom: 1rem;
  left: .5rem;
  z-index: 25;
}
/* .page-data[data-skip="1"] .page-data-icon-skip {
  opacity: 1;
  display: block;
} */
.page-txt-bold {
  color: #e57c4d;
  /* font-size: .6rem;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  background-image: -webkit-linear-gradient(bottom, #F5A520, #FFC65F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 .06rem;
  margin: 0 .2rem;
  position: relative;
  z-index: 5; */
}
/* .page-txt-bold::after {
  content: attr(data-txt);
  width: 100%;
  position: absolute;
  top: -.02rem;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: .12rem transparent;
  background: #000;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 .06rem;
} */
.page-data-txt-spirte-name {
  display: none;
  opacity: 0;
}
.page-data[data-sprite="1"] .page-data-txt-spirte-name[data-sprite="1"],
.page-data[data-sprite="2"] .page-data-txt-spirte-name[data-sprite="2"],
.page-data[data-sprite="3"] .page-data-txt-spirte-name[data-sprite="3"] {
  opacity: 1;
  display: inline-flex;
}
.page-data-click-txt {
  min-width: 2.36rem;
  position: relative;
  text-align: center;
  color: #e57c4d;
  display: inline-block;
}
.page-data-click-txt::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e57c4d;
  position: absolute;
  top: .6rem;
  left: 0;
  z-index: 5
}
.page-data-click-txt .page-txt-bold {
  font-size: .42rem;
  display: inline-block;
}
.page-data-click-txt  .page-txt-bold::after {
  top: -.1rem;
}
.txt-headShake {
  animation: headShake 1s ease-in-out 1 forwards;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.5% {
    -webkit-transform: translateX(-.06rem) rotateY(-9deg);
    transform: translateX(-.06rem) rotateY(-9deg)
  }

  18.5% {
    -webkit-transform: translateX(.05rem) rotateY(7deg);
    transform: translateX(.05rem) rotateY(7deg)
  }

  31.5% {
    -webkit-transform: translateX(-.03rem) rotateY(-5deg);
    transform: translateX(-.03rem) rotateY(-5deg)
  }

  43.5% {
    -webkit-transform: translateX(.02rem) rotateY(3deg);
    transform: translateX(.02rem) rotateY(3deg)
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.5% {
    -webkit-transform: translateX(-.06rem) rotateY(-9deg);
    transform: translateX(-.06rem) rotateY(-9deg)
  }

  18.5% {
    -webkit-transform: translateX(.05rem) rotateY(7deg);
    transform: translateX(.05rem) rotateY(7deg)
  }

  31.5% {
    -webkit-transform: translateX(-.03rem) rotateY(-5deg);
    transform: translateX(-.03rem) rotateY(-5deg)
  }

  43.5% {
    -webkit-transform: translateX(.02rem) rotateY(3deg);
    transform: translateX(.02rem) rotateY(3deg)
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
.record-player-nickname {
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.page-data-map-outter {
  width: 9.21rem;
  height: 5.7rem;
  position: relative;
}
.page-data-map {
  width: 9.21rem;
  position: absolute;
  left: -.6rem;
  bottom: 0;
}
.page-data-icon-arrow {
  width: 1.16rem;
  height: .77rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-arrow.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-icon-1-1,
.page-data-icon-1-2,
.page-data-icon-1-3,
.page-data-icon-2-1,
.page-data-icon-2-2,
.page-data-icon-2-3,
.page-data-icon-3-1,
.page-data-icon-3-2 {
  position: relative;
}
.page-data-icon-1-1::after {
  content: "";
  width: 1.34rem;
  height: .74rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-1-1.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.8rem;
  left: 0;
  z-index: 5;
}
.page-data-icon-1-2::after {
  content: "";
  width: 1.03rem;
  height: .77rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-1-2.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.9rem;
  z-index: 5;
}
.page-data-icon-1-3::after {
  content: "";
  width: .95rem;
  height: .98rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-1-3.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.5rem;
  left: 60%;
  z-index: 5;
}
.page-data-icon-2-1::after {
  content: "";
  width: .42rem;
  height: .45rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-2-1.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.35rem;
  transform: translateX(.15rem);
  z-index: 5;
}
.page-data-icon-2-2::after {
  content: "";
  width: .48rem;
  height: .4rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-2-2.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.4rem;
  transform: translateX(.1rem);
  z-index: 5;
}
.page-data-icon-2-3::after {
  content: "";
  width: 1.2rem;
  height: .88rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-2-3.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.75rem;
  z-index: 5;
}
.page-data-icon-3-1::after {
  content: "";
  width: .65rem;
  height: .56rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-3-1.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 0;
  transform: translateX(2.4rem);
  z-index: 5;
}
.page-data-icon-3-2::after {
  content: "";
  width: .65rem;
  height: .56rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/icon-3-1.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: .15rem;
  transform: translateX(.88rem);
  z-index: 5;
}
.page-data-sprite-1-outter {
  width: 9.18rem;
  height: 4.46rem;
  position: relative;
}
.page-data-sprite-1 {
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: -.5rem;
  z-index: 5;
}
.support-avif .page-data[data-sprite="1"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-1.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="1"] .page-data-sprite-1,
.support-avif .page-data[data-sprite="1"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-1.png) 50% 50% / 100% 100% no-repeat;
}

.support-avif .page-data[data-sprite="2"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-2.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="2"] .page-data-sprite-1,
.support-avif .page-data[data-sprite="2"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-2.png) 50% 50% / 100% 100% no-repeat;
}

.support-avif .page-data[data-sprite="3"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-3.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="3"] .page-data-sprite-1,
.support-avif .page-data[data-sprite="3"] .page-data-sprite-1 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-1-3.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-sprite-2-outter {
  width: 8.51rem;
  height: 4.64rem;
  position: relative;
}
.page-data-sprite-2 {
  width: inherit;
  height: inherit;
  z-index: 5;
}
.support-avif .page-data[data-sprite="1"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-1.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="1"] .page-data-sprite-2,
.support-avif .page-data[data-sprite="1"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-1.png) 50% 50% / 100% 100% no-repeat;
}

.support-avif .page-data[data-sprite="2"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-2.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="2"] .page-data-sprite-2,
.support-avif .page-data[data-sprite="2"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-2.png) 50% 50% / 100% 100% no-repeat;
}

.support-avif .page-data[data-sprite="3"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-3.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-data[data-sprite="3"] .page-data-sprite-2,
.support-avif .page-data[data-sprite="3"] .page-data-sprite-2 {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/sprite-2-3.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-row-center-wrapper {
  width: 100%;
  position: relative;
  /* transform: translateX(calc(-.55 * var(--originRem))); */
}
.page-data-btn-me {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/btn-me.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-btn-confirm {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-btn-confirm-grey {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm-grey.png) 50% 50% / 100% 100% no-repeat;
}
.page-data-btn-sure {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/data/btn-sure.png) 50% 50% / 100% 100% no-repeat;
}

/* ------------------ result --------------------- */
.page-result {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 57;
}
.page-result-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center bottom;
  z-index: 2;
}
.support-avif .page-result[data-sprite="1"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-1.avif) 50% 50% / cover no-repeat;
}
.support-avif .page-result[data-sprite="2"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-2.avif) 50% 50% / cover no-repeat;
}
.support-avif .page-result[data-sprite="3"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-3.avif) 50% 50% / cover no-repeat;
}
.support-webp .page-result[data-sprite="1"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-1.webp) 50% 50% / cover no-repeat;
}
.support-webp .page-result[data-sprite="2"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-2.webp) 50% 50% / cover no-repeat;
}
.support-webp .page-result[data-sprite="3"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-3.webp) 50% 50% / cover no-repeat;
}
.support-png .page-result[data-sprite="1"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-1.jpg) 50% 50% / cover no-repeat;
}
.support-png .page-result[data-sprite="2"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-2.jpg) 50% 50% / cover no-repeat;
}
.support-png .page-result[data-sprite="3"] .page-result-bg {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/bg-3.jpg) 50% 50% / cover no-repeat;
}

.page-result-bg::after {
  content: "";
  width: 100%;
  height: 8.52rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.support-avif .page-result-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/paper-footer.avif) 50% 100% / cover no-repeat;
}
.support-webp .page-result-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/paper-footer.webp) 50% 100% / cover no-repeat;
}
.support-png .page-result-bg::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/paper-footer.png) 50% 100% / cover no-repeat;
}

.page-result-seal {
  width: 2.17rem;
  height: .76rem;
  position: absolute;
  top: 0;
  left: 2.17rem;
  z-index: 5;
}
.page-result[data-sprite="1"] .page-result-seal {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal-1.png) 50% 0 / 100% 100% no-repeat;
}
.page-result[data-sprite="2"] .page-result-seal {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal-2.png) 50% 0 / 100% 100% no-repeat;
}
.page-result[data-sprite="3"] .page-result-seal {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal-3.png) 50% 0 / 100% 100% no-repeat;
}
.page-result-book {
  width: 100%;
  position: absolute;
  top: 35%;
  transform: translateY(-35%);
  left: 0;
  z-index: 7;
}
.page-result-book::after {
  content: "";
  width: .85rem;
  height: .88rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title-star.png) 50% 0 / 100% 100% no-repeat;
  position: absolute;
  top: 3.86rem;
  left: 8.98rem;
  z-index: 6;
}
.page-result-book-img {
  width: inherit;
  object-fit: cover;
  display: none;
  opacity: 0;
}
.page-result[data-sprite="1"] .page-result-book-img[data-sprite="1"],
.page-result[data-sprite="2"] .page-result-book-img[data-sprite="2"],
.page-result[data-sprite="3"] .page-result-book-img[data-sprite="3"] {
  display: block;
  opacity: 1;
}
.page-result-logo {
  width: 2.71rem;
  height: .85rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/logo.png) 50% 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 5;
}
.page-result-logo-1 {
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
}
.page-result-logo-2 {
  top: .3rem;
  left: .3rem;
}
.page-result-regist-area {
  min-width: 4.6rem;
  height: .3rem;
  line-height: .3rem;
  font-size: .35rem;
  color: #3d3d3d;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  position: absolute;
  top: 4.2rem;
  left: 3.8rem; 
  padding: 0 .18rem;
  z-index: 2;
  transform: rotate(2.58deg);
}
.page-result-regist-area::after {
  content: "";
  width: 100%;
  height: .3rem;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  border-radius: .15rem;
  overflow: hidden;
  background-color: #73c2e3;
}
.page-result-info-area {
  position: absolute;
  top: 10.25rem;
  left: 2.45rem;
  z-index: 2;
  color: #e36c36;
  transform: rotate(2.58deg);
}
.page-result-data-box {
  width: 7.06rem;
  height: .69rem;
  line-height: .69rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/data-box.png) 50% 50% / 100% 100% no-repeat;
  position: relative;
  color: #f0e9db;
  font-size: .42rem;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  padding: 0 .3rem 0 .8rem;
  white-space: nowrap;
}
.page-result-data-box[data-row="1"]::after {
  content: "";
  width: .59rem;
  height: .69rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/icon-sand.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.2rem;
  left: .05rem;
}
.page-result-data-box[data-row="2"]::after {
  content: "";
  width: .59rem;
  height: .69rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/icon-roco.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -.11rem;
  left: .1rem;
}
.page-result-txt-spirte-name-box {
  width: 2.8rem;
  white-space: nowrap;
  text-align: right;
  display: flex;
}
.page-result-txt-spirte-name {
  display: none;
  opacity: 0;
}
.page-result[data-sprite="1"] .page-result-txt-spirte-name[data-sprite="1"],
.page-result[data-sprite="2"] .page-result-txt-spirte-name[data-sprite="2"],
.page-result[data-sprite="3"] .page-result-txt-spirte-name[data-sprite="3"] {
  opacity: 1;
  display: inline-flex;
}
.page-result-info-num-txt-outter {
  font-size: 1rem;
  line-height: 1.4rem;
  position: relative;
  z-index: 6;
  padding: 0 .15rem;
}
.page-result-info-num-txt-outter::after {
  content: attr(data-txt);
  width: 100%;
  color: #3b373b;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: .38rem transparent;
  background: #3b373b;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 .2rem;
  transform: scaleX(.95);
}
.page-result-info-num-txt {
  font-size: 1rem;
  line-height: 1rem;
  color:#ffc65f;
  -webkit-text-stroke: .12rem transparent;
  background: #3b373b;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -.05rem;
  padding: 0 .12rem;
  position: relative;
  z-index: 6;
}
.page-result-info-num-txt::after {
  content: attr(data-txt);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: .28rem transparent;
  background: #f5f1e9;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 .12rem;
}
.page-result[data-sprite="1"] .page-result-data-box[data-row="1"] .page-result-info-num-txt {
  color: #e36c36;
}
.page-result[data-sprite="2"] .page-result-data-box[data-row="1"] .page-result-info-num-txt {
  color: #55a7c8;
}
.page-result[data-sprite="3"] .page-result-data-box[data-row="1"] .page-result-info-num-txt {
  color: #63ac8e;
}
/* .page-result-info-num-txt {
  font-size: 1rem;
  line-height: 1rem;
  color:#ffc65f;
  -webkit-text-stroke: .24rem transparent;
  background: #f5f1e9;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -.05rem;
  padding: 0 .15rem;
}
.page-result-info-num-txt::after {
  content: attr(data-txt);
  width: 100%;
  position: absolute;
  top: -.012rem;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: .42rem transparent;
  background: #3b373b;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 .15rem;
} */
.page-result-talk-box {
  width: 6.18rem;
  height: 1.28rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/talk-box.png) 50% 50% / 100% 100% no-repeat;
  margin-top: .38rem;
  position: relative;
  padding-left: 1.08rem;
  font-size: .3rem;
  line-height: .4rem;
  color: #3c383c;
}
.page-result-talk-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 5;
}
.page-result[data-sprite="1"] .page-result-talk-box::after {
  width: 1.62rem;
  height: 1.8rem;
  left: -.81rem;
}
.page-result[data-sprite="2"] .page-result-talk-box::after {
  width: 1.26rem;
  height: 1.86rem;
  left: -.63rem;
}
.page-result[data-sprite="3"] .page-result-talk-box::after {
  width: 1.6rem;
  height: 1.74rem;
  left: -.8rem;
}
.support-avif .page-result[data-sprite="1"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-1.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-result[data-sprite="1"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-1.webp) 50% 50% / 100% 100% no-repeat;
}
.support-png .page-result[data-sprite="1"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-1.png) 50% 50% / 100% 100% no-repeat;
}
.support-avif .page-result[data-sprite="2"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-2.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-result[data-sprite="2"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-2.webp) 50% 50% / 100% 100% no-repeat;
}
.support-png .page-result[data-sprite="2"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-2.png) 50% 50% / 100% 100% no-repeat;
}
.support-avif .page-result[data-sprite="3"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-3.avif) 50% 50% / 100% 100% no-repeat;
}
.support-webp .page-result[data-sprite="3"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-3.webp) 50% 50% / 100% 100% no-repeat;
}
.support-png .page-result[data-sprite="3"] .page-result-talk-box::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/sprite-3.png) 50% 50% / 100% 100% no-repeat;
}
.page-result-txt-name {
  max-width: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-result-txt-underline {
  position: relative;
}
.page-result-txt-underline::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e57c4d;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5
}
.page-result-seal-year-box {
  width: 2.3rem;
  height: 1.633rem;
  position: absolute;
  top: 14.46rem;
  right: .55rem;
  z-index: 6;
  transform: rotate(2.58deg);
  overflow: hidden;
}
.page-result-seal-year {
  /* width: 2.96rem;
  height: 1.89rem; */
  width: 2.553rem;
  height: 1.633rem;
  transform: rotate(-17deg);
  position: absolute;
  top: 0;
  left: 0;
}
.page-result[data-year="1"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/1.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="2"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/2.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="3"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/3.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="4"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/4.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="5"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/5.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="6"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/6.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="7"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/7.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="8"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/8.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="9"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/9.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="10"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/10.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="11"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/11.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="12"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/12.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="13"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/13.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="14"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/14.png) 50% 50% / 100% 100% no-repeat;
}
.page-result[data-year="15"] .page-result-seal-year {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/seal/15.png) 50% 50% / 100% 100% no-repeat;
}
.page-result-title {
  width: 6.95rem;
  height: 1.53rem;
  position: absolute;
  top: 2.4rem;
  left: 6rem;
  transform: translateX(-50%) rotate(2.58deg);
}
.page-result[data-year="10"] .page-result-title,
.page-result[data-year="11"] .page-result-title,
.page-result[data-year="12"] .page-result-title,
.page-result[data-year="13"] .page-result-title,
.page-result[data-year="14"] .page-result-title,
.page-result[data-year="15"] .page-result-title {
  width: 7.15rem;
  height: 1.6rem;
}
.page-result[data-year="1"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/1.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="2"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/2.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="3"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/3.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="4"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/4.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="5"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/5.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="6"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/6.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="7"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/7.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="8"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/8.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="9"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/9.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="10"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/10.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="11"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/11.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="12"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/12.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="13"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/13.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="14"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/14.png) 50% 50% / contain no-repeat;
}
.page-result[data-year="15"] .page-result-title {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/title/15.png) 50% 50% / contain no-repeat;
}

.page-result-book-bottom-area {
  width: 9.16rem;
  position: absolute;
  top: 14.9rem;
  left: 1.14rem;
  z-index: 6;
  transform: rotate(2.58deg);
  font-size: .26rem;
  line-height: .4rem;
  color: #fff;
}
.page-result-book-bottom-area span {
  background: #332b29;
  -webkit-text-stroke: .1rem transparent;
  -webkit-background-clip: text;
  background-clip: text;
  padding: .06rem;
}
.page-result-icon-check {
  width: 1.15rem;
  height: .4rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/icon-check.png) 50% 50% / contain no-repeat;
}
.page-result-icon-share {
  width: 1.16rem;
  height: .4rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/icon-share.png) 50% 50% / contain no-repeat;
}
.page-result-icon-question {
  width: .39rem;
  height: .39rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/icon-question.png) 50% 50% / contain no-repeat;
}
.page-result-btn-share {
  width: 4.31rem;
  height: 1.15rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/btn-share.png) 50% 50% / contain no-repeat;
}
.page-result-btn-receive {
  width: 4.31rem;
  height: 1.15rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/result/btn-receive.png) 50% 50% / contain no-repeat;
}
/* ------------------ award --------------------- */
.page-award {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 58;
}
.page-award-title {
  width: 6.17rem;
  height: 2.42rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/title.png) 50% 50% / contain no-repeat;
}
.page-award-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: .5rem;
  color: #272727;
}
.page-award-item-bg {
  width: 10.02rem;
  height: 2.72rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/item-bg.png) 50% 50% / contain no-repeat;
  padding: 0 .35rem 0 .3rem;
}
.page-award-sub-title-1 {
  width: 3.21rem;
  height: 1.09rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/sub-title-1.png) 50% 50% / contain no-repeat;
}
.page-award-sub-title-2 {
  width: 3.21rem;
  height: 1.09rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/sub-title-2.png) 50% 50% / contain no-repeat;
}
.page-award-item-title {
  height: .64rem;
  line-height: .64rem;
  position: relative;
  color: #3d3d3d;
  font-size: .64rem;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  opacity: 0;
  display: none;
  margin-top: .16rem;
}
.page-award-item-title[data-show="1"] {
  font-size: .52rem;
  white-space: nowrap;
}
.page-award-item-title[data-show="1"],
.page-award[data-sprite="1"][data-old="0"] .page-award-item-title[data-sprite="1"][data-old="0"],
.page-award[data-sprite="2"][data-old="0"] .page-award-item-title[data-sprite="2"][data-old="0"],
.page-award[data-sprite="3"][data-old="0"] .page-award-item-title[data-sprite="3"][data-old="0"],
.page-award[data-sprite="1"][data-old="1"] .page-award-item-title[data-sprite="1"][data-old="1"],
.page-award[data-sprite="2"][data-old="1"] .page-award-item-title[data-sprite="2"][data-old="1"],
.page-award[data-sprite="3"][data-old="1"] .page-award-item-title[data-sprite="3"][data-old="1"] {
  opacity: 1;
  display: block;
}
.page-award-item-title::before {
  content: "";
  width: .49rem;
  height: .73rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-star-left.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 30%;
  left: -.2rem;
  transform: translateY(-50%);
  z-index: 2;
}
.page-award-item-title::after {
  content: "";
  width: .44rem;
  height: .64rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-star-right.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 42%;
  transform: translate(-.2rem, -50%);
  z-index: 2;
}
.page-award-watch {
  width: 4.02rem;
  opacity: 0;
  display: none;
}
.page-award[data-sprite="1"] .page-award-watch[data-sprite="1"],
.page-award[data-sprite="2"] .page-award-watch[data-sprite="2"],
.page-award[data-sprite="3"] .page-award-watch[data-sprite="3"] {
  opacity: 1;
  display: block;
}
.page-award-my-title {
  width: 4.82rem;
  height: 2.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/my-title.png) 50% 50% / contain no-repeat;
}
.page-award-txt-send {
  height: .51rem;
  line-height: .51rem;
  font-size: .36rem;
  color: #3c383c;
  position: relative;
  padding-left: .58rem;
}
.page-award-txt-send::after {
  content: "";
  width: .49rem;
  height: .51rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/icon-point.png) 50% 50% / contain no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.page-award-txt-send span {
  position: relative;
}
.page-award-txt-send span::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #3c383c;
}
.page-award-txt-send .orange-1::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #df6d19;
}
.page-award-avatar-bg {
  width: 10.1rem;
  height: 3.51rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/avatar-bg.png) 50% 50% / contain no-repeat;
}
.page-award-avatar-box {
  width: calc(1.6 * var(--originRem));
  height: calc(1.6 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/avatar-box.png) 50% 100% / 100% 100% no-repeat;
}
.page-award-avatar {
  width: calc(1.6 * var(--originRem));
  height: calc(1.6 * var(--originRem));
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  transform: scale(calc(150 / 160));
}
.page-award-user-name {
  max-width: 8rem;
  white-space: nowrap;
  font-size: .36rem;
  line-height: calc(.5 * var(--originRem));
  position: relative;
}
.qq-channel .page-award-user-name::after {
  content: "";
  width: calc(.39 * var(--originRem));
  height: calc(.45 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-qq-name.png) 50% 100% / 100% 100% no-repeat;
  position: absolute;
  left: -.51rem;
  top: .02rem;
  z-index: 3;
}
.wechat-channel .page-award-user-name::after {
  content: "";
  width: calc(.51 * var(--originRem));
  height: calc(.42 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-wechat-name.png) 50% 100% / 100% 100% no-repeat;
  position: absolute;
  left: -.63rem;
  top: .02rem;
  z-index: 3;
}
.qq-channel .page-award-user-name {
  color: #4fc4fa !important;
}
.wechat-channel .page-award-user-name {
  color: #7ecf36 !important;
}
.page-award-btn-confirm {
  width: 5.36rem;
  height: 1.36rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/btn-confirm.png) 50% 50% / contain no-repeat;
}
.page-award-btn-current-account {
  width: 4.72rem;
  height: 1.36rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/btn-current-account.png) 50% 50% / contain no-repeat;
}
.page-award-btn-other-account {
  width: 4.72rem;
  height: 1.36rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/btn-other-account.png) 50% 50% / contain no-repeat;
}
.page-award-txt-restart {
  position: relative;
  display: block;
}
.page-award-txt-restart::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -.02rem;
  left: 0;
  background-color: #df6d19;
}
/* ------------------ draw-poster --------------------- */
.poster-canvas,
.poster-canvas-rotate {
  width: 10.80rem;
  height: 20.01rem;
  position: absolute;
  top: 100vh;
  left: 200vw;
  z-index: -999;
  opacity: 0;
  display: none;
}
.draw-poster-page {
  width: 1080px;
  height: 2001px;
  position: absolute;
  top: 100vh;
  left: 200vw;
  z-index: -999;
  /* top: 0;
  left: 0;
  z-index: 999;
  transform: scale(.35);
  transform-origin: left top; */
}
.draw-poster-page-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.draw-poster-bg {
  width: 1080px;
  display: none;
  opacity: 0;
}
.draw-poster-page[data-sprite="1"] .draw-poster-bg[data-sprite="1"],
.draw-poster-page[data-sprite="2"] .draw-poster-bg[data-sprite="2"],
.draw-poster-page[data-sprite="3"] .draw-poster-bg[data-sprite="3"],

.draw-poster-page[data-sprite="1"] .draw-poster-seal[data-sprite="1"],
.draw-poster-page[data-sprite="2"] .draw-poster-seal[data-sprite="2"],
.draw-poster-page[data-sprite="3"] .draw-poster-seal[data-sprite="3"],

.draw-poster-page[data-sprite="1"] .draw-poster-book-img[data-sprite="1"],
.draw-poster-page[data-sprite="2"] .draw-poster-book-img[data-sprite="2"],
.draw-poster-page[data-sprite="3"] .draw-poster-book-img[data-sprite="3"],

.draw-poster-page[data-sprite="1"] .draw-poster-sprite-img[data-sprite="1"],
.draw-poster-page[data-sprite="2"] .draw-poster-sprite-img[data-sprite="2"],
.draw-poster-page[data-sprite="3"] .draw-poster-sprite-img[data-sprite="3"] {
  opacity: 1;
  display: block;
}
.draw-poster-seal {
  width: 217px;
  position: absolute;
  top: 0;
  left: 217px;
  z-index: 5;
  display: none;
  opacity: 0;
}
.draw-poster-footer {
  width: 1080px;
  height: 852px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.draw-poster-book {
  width: 1080px;
  position: absolute;
  top: 55px;
  left: 0;
  z-index: 7;
}
.draw-poster-book-img {
  width: inherit;
  object-fit: cover;
  display: none;
  opacity: 0;
}
.draw-poster-title-star {
  width: 85px;
  height: 88px;
  position: absolute;
  top: 386px;
  left: 898px;
  z-index: 6;
}
.draw-poster-regist-area {
  width: 460px;
  height: 30px;
  position: absolute;
  top: 420px;
  left: 380px; 
  z-index: 11;
  color: #3d3d3d;
  transform: rotate(2.58deg);
  font-family: "MIANFEIZITI" !important;
  font-feature-settings: 'tnum';
}
.draw-poster-regist-area span {
  font-size: 35px;
  position: relative;
  top: 0;
  z-index: 3;
}
.draw-poster-regist-area-line {
  width: 460px;
  height: 30px;
  position: absolute;
  top: 15px;
  left: 0; 
  z-index: 1;
  border-radius: 15px;
  overflow: hidden;
  background-color: #73c2e3;
}
.draw-poster-title {
  width: 695px;
  position: absolute;
  top: 240px;
  left: 600px;
  transform: translateX(-50%) rotate(2.58deg);
  opacity: 0;
  /* display: none; */
}
.draw-poster-page[data-year="10"] .draw-poster-title,
.draw-poster-page[data-year="11"] .draw-poster-title,
.draw-poster-page[data-year="12"] .draw-poster-title,
.draw-poster-page[data-year="13"] .draw-poster-title,
.draw-poster-page[data-year="14"] .draw-poster-title,
.draw-poster-page[data-year="15"] .draw-poster-title {
  width: 715px;
  height: 160px;
}
.draw-poster-page[data-year="1"] .draw-poster-title[data-year="1"],
.draw-poster-page[data-year="2"] .draw-poster-title[data-year="2"],
.draw-poster-page[data-year="3"] .draw-poster-title[data-year="3"],
.draw-poster-page[data-year="4"] .draw-poster-title[data-year="4"],
.draw-poster-page[data-year="5"] .draw-poster-title[data-year="5"],
.draw-poster-page[data-year="6"] .draw-poster-title[data-year="6"],
.draw-poster-page[data-year="7"] .draw-poster-title[data-year="7"],
.draw-poster-page[data-year="8"] .draw-poster-title[data-year="8"],
.draw-poster-page[data-year="9"] .draw-poster-title[data-year="9"],
.draw-poster-page[data-year="10"] .draw-poster-title[data-year="10"],
.draw-poster-page[data-year="11"] .draw-poster-title[data-year="11"],
.draw-poster-page[data-year="12"] .draw-poster-title[data-year="12"],
.draw-poster-page[data-year="13"] .draw-poster-title[data-year="13"],
.draw-poster-page[data-year="14"] .draw-poster-title[data-year="14"],
.draw-poster-page[data-year="15"] .draw-poster-title[data-year="15"] {
  opacity: 1;
  display: block;
}
.draw-poster-seal-year-box {
  width: 230px;
  height: 163px;
  position: absolute;
  top: 1470px;
  right: 49px;
  z-index: 6;
  transform: rotate(2.58deg);
  overflow: hidden;
}
.draw-poster-seal-year {
  width: 255px;
  height: 165px;
  transform: rotate(-17deg);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: none;
}
.draw-poster-page[data-year="1"] .draw-poster-seal-year[data-year="1"],
.draw-poster-page[data-year="2"] .draw-poster-seal-year[data-year="2"],
.draw-poster-page[data-year="3"] .draw-poster-seal-year[data-year="3"],
.draw-poster-page[data-year="4"] .draw-poster-seal-year[data-year="4"],
.draw-poster-page[data-year="5"] .draw-poster-seal-year[data-year="5"],
.draw-poster-page[data-year="6"] .draw-poster-seal-year[data-year="6"],
.draw-poster-page[data-year="7"] .draw-poster-seal-year[data-year="7"],
.draw-poster-page[data-year="8"] .draw-poster-seal-year[data-year="8"],
.draw-poster-page[data-year="9"] .draw-poster-seal-year[data-year="9"],
.draw-poster-page[data-year="10"] .draw-poster-seal-year[data-year="10"],
.draw-poster-page[data-year="11"] .draw-poster-seal-year[data-year="11"],
.draw-poster-page[data-year="12"] .draw-poster-seal-year[data-year="12"],
.draw-poster-page[data-year="13"] .draw-poster-seal-year[data-year="13"],
.draw-poster-page[data-year="14"] .draw-poster-seal-year[data-year="14"],
.draw-poster-page[data-year="15"] .draw-poster-seal-year[data-year="15"] {
  opacity: 1;
  display: block;
}
.draw-poster-info-area {
  position: absolute;
  top: 1025px;
  left: 245px;
  z-index: 2;
  color: #e36c36;
  transform: rotate(2.58deg);
}
.draw-poster-data-box {
  width: 706px;
  height: 69px;
  line-height: 69px;
  position: relative;
  
}
.draw-poster-data-box {
  width: 706px;
}
.draw-poster-data-box-content {
  width: 706px;
  height: 69px;
  line-height: 69px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: #f0e9db;
  font-size: 42px;
  font-family: "MIANFEIZITI" !important;
  /* font-family: "FZLTYJT" !important; */
  font-feature-settings: 'tnum';
  padding: 0 30px 0 80px;
  white-space: nowrap;
}
.draw-poster-data-box-icon-sand {
  width: 59px;
  position: absolute;
  top: -20px;
  left: 5px;
  z-index: 8;
}
.draw-poster-data-box-icon-roco {
  width: 59px;
  position: absolute;
  top: -11px;
  left: 10px;
  z-index: 8;
}
.draw-poster-txt-spirte-name-box {
  max-width: 280px;
  white-space: nowrap;
  text-align: right;
  display: flex;
}
.draw-poster-txt-spirte-name {
  display: none;
  opacity: 0;
}
.draw-poster-page[data-sprite="1"] .draw-poster-txt-spirte-name[data-sprite="1"],
.draw-poster-page[data-sprite="2"] .draw-poster-txt-spirte-name[data-sprite="2"],
.draw-poster-page[data-sprite="3"] .draw-poster-txt-spirte-name[data-sprite="3"] {
  opacity: 1;
  display: inline-flex;
}

.draw-poster-info-num-txt {
  font-size: 100px;
  line-height: 100px;
  color:#ffc65f;
  letter-spacing: -5px;
}
.draw-poster-page[data-sprite="1"] .draw-poster-data-box[data-row="1"] .draw-poster-info-num-txt {
  color: #e36c36;
}
.draw-poster-page[data-sprite="2"] .draw-poster-data-box[data-row="1"] .draw-poster-info-num-txt {
  color: #55a7c8;
}
.draw-poster-page[data-sprite="3"] .draw-poster-data-box[data-row="1"] .draw-poster-info-num-txt {
  color: #63ac8e;
}
.draw-poster-num-box {
  width: 63px; 
  height: 98px;
  position: relative;
}
.draw-poster-date-box {
  width: 40px; 
  height: 68.6px;
  position: relative;
}
.draw-poster-num-box[data-num="4"] {
  width: 68px;
}
.draw-poster-date-box[data-num="4"] {
  width: 47.6px;
}
.draw-poster-date-box[data-num="dot"] {
  width: 20px;
}
.draw-poster-num,
.draw-poster-date {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.draw-poster-num-box[data-num="0"] .draw-poster-num,
.draw-poster-num-box[data-num="1"] .draw-poster-num {
  width: 78px;
}
.draw-poster-num-box[data-num="2"] .draw-poster-num,
.draw-poster-num-box[data-num="3"] .draw-poster-num,
.draw-poster-num-box[data-num="5"] .draw-poster-num,
.draw-poster-num-box[data-num="6"] .draw-poster-num,
.draw-poster-num-box[data-num="7"] .draw-poster-num,
.draw-poster-num-box[data-num="8"] .draw-poster-num,
.draw-poster-num-box[data-num="9"] .draw-poster-num {
  width: 79px;
}
.draw-poster-num-box[data-num="4"] .draw-poster-num {
  width: 84px;
}
.draw-poster-date-box[data-num="0"] .draw-poster-date,
.draw-poster-date-box[data-num="1"] .draw-poster-date,
.draw-poster-date-box[data-num="dot"] .draw-poster-date {
  width: 54.6px;
}
.draw-poster-date-box[data-num="2"] .draw-poster-date,
.draw-poster-date-box[data-num="3"] .draw-poster-date,
.draw-poster-date-box[data-num="5"] .draw-poster-date,
.draw-poster-date-box[data-num="6"] .draw-poster-date,
.draw-poster-date-box[data-num="7"] .draw-poster-date,
.draw-poster-date-box[data-num="8"] .draw-poster-date,
.draw-poster-date-box[data-num="9"] .draw-poster-date {
  width: 55.3px;
}
.draw-poster-date-box[data-num="4"] .draw-poster-date {
  width: 58.8px;
}
.draw-poster-date-box[data-num="dot"] .draw-poster-date {
  width: 40px;
  height: 60.6px;
  object-fit: contain;
  object-position: left bottom;
}
.draw-poster-talk-box {
  width: 618px;
  height: 128px;
  margin-top: 38px;
  position: relative;
}
.draw-poster-talk-box-img {
  width: 100%;
  height: 100%;
}
.draw-poster-talk-box-inner {
  width: 618px;
  height: 128px;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 108px;
  font-size: 30px;
  line-height: 40px;
  color: #3c383c;
  z-index: 2;
}
.draw-poster-sprite-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  object-fit: cover;
  display: none;
  opacity: 0;
}
.draw-poster-sprite-img[data-sprite="1"] {
  width: 162px;
  height: 180px;
  left: -81px;
}
.draw-poster-sprite-img[data-sprite="2"] {
  width: 126px;
  height: 186px;
  left: -63px;
}
.draw-poster-sprite-img[data-sprite="3"] {
  width: 160px;
  height: 184px;
  left: -80px;
}
.draw-poster-txt-name {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw-poster-txt-underline {
  position: relative;
}
.draw-poster-txt-underline::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #e57c4d;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5
}
.draw-poster-book-bottom-area {
  width: 916px;
  height: 108px;
  line-height: 108px;
  position: absolute;
  top: 1570px;
  left: 114px;
  z-index: 6;
  transform: rotate(2.58deg);
  font-size: 26px;
  color: #3b373b;
  text-align: center;
}
.draw-poster-qrcode-area {
  width: 1080px;
  height: 172px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.draw-poster-qrcode-bg {
  width: 1080px;
  height: 172px;
}
.draw-poster-qrcode-box {
  width: 195px;
  height: 192px;
  position: absolute;
  bottom: 28px;
  left: 20px;
  z-index: 11;
}
.draw-poster-qrcode-box canvas {
  width: 100%;
  height: 100%;
}
.draw-poster-qrcode {
  width: 148px;
  height: 148px;
  position: absolute;
  bottom: 52px;
  left: 44px;
  z-index: 9;
  /* background-color: rgba(0, 0, 0, .8); */
  z-index: 15;
}
.draw-poster-txt-gift {
  width: 461px;
  position: absolute;
  bottom: 40px;
  left: 222px;
  z-index: 11;
}
.draw-poster-icon-add {
  width: 48px;
  position: absolute;
  top: 80px;
  right: 158px;
  z-index: 11;
}
.draw-poster-icon-award-1,
.draw-poster-icon-award-2,
.draw-poster-icon-award-3 {
  position: absolute;
  top: -15px;
  right: 175px;
  z-index: 11;
  opacity: 0;
  display: none;
}
.draw-poster-icon-award-1,
.draw-poster-icon-award-2 {
  width: 208px;
}
.draw-poster-icon-award-3 {
  width: 206px;
}
.draw-poster-page[data-sprite="1"] .draw-poster-icon-award-1,
.draw-poster-page[data-sprite="2"] .draw-poster-icon-award-2,
.draw-poster-page[data-sprite="3"] .draw-poster-icon-award-3 {
  opacity: 1;
  display: block;
}
.draw-poster-icon-award-4 {
  width: 165px;
  position: absolute;
  top: -15px;
  right: 5px;
  z-index: 11;
}

/* ------------------ pop --------------------- */
.pop-mask {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 997;
}
.pop {
  width: 9.65rem;
  /* min-height: 7.32rem; */
  position: relative;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50%), -50%);
  z-index: 999;
}
.pop::after {
  content: "";
  width: 4.79rem;
  height: 2.86rem;
  position: absolute;
  top: -2.17rem;
  left: 3rem;
}
.support-png .pop::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/owl.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/owl.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop::after {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/owl.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-copy-link {
  width: 9.49rem;
  height: 6.12rem;
}
.pop-copy-link.pop::after {
  background: none;
}
.support-png .pop-copy-link {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-copy.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop-copy-link {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-copy.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop-copy-link {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-copy.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-privacy,
.pop-award,
.pop-final-check,
.pop-visit-award {
  height: 11.81rem;
}
.support-png .pop-privacy,
.support-png .pop-award,
.support-png .pop-final-check,
.support-png .pop-visit-award {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-privacy.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop-privacy,
.support-webp .pop-award,
.support-webp .pop-final-check,
.support-webp .pop-visit-award {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-privacy.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop-privacy,
.support-avif .pop-award,
.support-avif .pop-final-check,
.support-avif .pop-visit-award {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-privacy.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-verify,
.pop-check-account,
.pop-cdkey {
  width: 9.49rem;
  height: 11.02rem;
}
.support-png .pop-verify,
.support-png .pop-check-account,
.support-png .pop-cdkey {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-verify.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop-verify,
.support-webp .pop-check-account,
.support-webp .pop-cdkey {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-verify.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop-verify,
.support-avif .pop-check-account,
.support-avif .pop-cdkey {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-verify.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-account,
.pop-change-account,
.pop-restart,
.pop-receive-awrad,
.pop-common {
  width: 9.49rem;
  height: 8.64rem;
}
.support-png .pop-choose-account,
.support-png .pop-change-account,
.support-png .pop-restart,
.support-png .pop-receive-awrad,
.support-png .pop-common {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-account.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop-choose-account,
.support-webp .pop-change-account,
.support-webp .pop-restart,
.support-webp .pop-receive-awrad,
.support-webp .pop-common {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-account.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop-choose-account,
.support-avif .pop-change-account,
.support-avif .pop-restart,
.support-avif .pop-receive-awrad,
.support-avif .pop-common {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-account.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-word {
  width: calc(100 * var(--vw));
  height: 14.02rem;
  left: 50%;
  top: unset;
  bottom: 0;
  transform: translateX(calc(-50%));
}
.pop-choose-word::after {
  background: none !important;
}
.support-png .pop-choose-word {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-word.png) 50% 50% / 100% 100% no-repeat;
}
.support-webp .pop-choose-word {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-word.webp) 50% 50% / 100% 100% no-repeat;
}
.support-avif .pop-choose-word {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-word.avif) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-close {
  width: .96rem;
  height: .98rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/icon-close.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: -1.3rem;
  right: .1rem;
  z-index: 9;
}
.pop-title {
  width: 7.96rem;
  height: 1.17rem;
  padding-top: .3rem;
  line-height: .86rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/title.png) 50% 50% / contain no-repeat;
  user-select: none;
  color: #f4eee1;
  font-size: .5rem;
  text-align: center;
  font-family: "MIANFEIZITI" !important;
  font-feature-settings: 'tnum';
}
.pop-title-choose-word {
  width: 9.66rem;
  height: 1.26rem;
  padding-top: .36rem;
  line-height: .86rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/title-choose-word.png) 50% 50% / contain no-repeat;
  user-select: none;
  color: #f4eee1;
  font-size: .56rem;
  text-align: center;
  font-family: "MIANFEIZITI" !important;
  font-feature-settings: 'tnum';
}
.pop-content {
  width: 8.1rem;
  height: auto;
  color: #272727;
  font-size: .36rem;
  line-height: .42rem;
  margin: .3rem 0 .7rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.pop-privact-list-bar {
  width: .14rem;
  height: 8.65rem;
  position: absolute;
  right: .4rem;
  z-index: 9;
  bottom: 1rem;
}
.pop-privact-list-bar-inner {
  width: 100%;
  height: 2.8rem;
  border-radius: .07rem;
  background-color: #cdc8be;
}
.pop-privacy-outter {
  width: inherit;
  height: 8.65rem;
  overflow: scroll;
  font-size: .3rem;
}
.pop-privacy-inner {
  width: inherit;
  height: auto;
  position: relative;
}
.pop-privacy-inner span {
  line-height: .46rem;
}
.pop-qrcode-box {
  width: 2.87rem;
  height: 2.87rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/qrcode-box.png) 50% 50% / 100% 100% no-repeat;
  user-select: none;
}
.pop-qrcode {
  width: 90%;
  max-width: 90%;
  height: auto;
}
.pop-input-phone {
  width: 8.05rem;
  height: .92rem;
  line-height: .92rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/input-phone.png) 50% 50% / 100% 100% no-repeat;
  user-select: none;
}
.pop-input-code {
  width: 8.05rem;
  height: .92rem;
  line-height: .92rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/input-code.png) 50% 50% / 100% 100% no-repeat;
  user-select: none;
}
.pop-input-cdkey {
  width: 7.24rem;
  height: .92rem;
  line-height: .92rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/input-cdkey.png) 50% 50% / 100% 100% no-repeat;
  user-select: none;
}
.pop-btn-copy {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-copy.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-copy-link {
  width: 5.2rem;
  height: 1.36rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-copy-link.png) 50% 100% / 100% 100% no-repeat;
}
.pop-input {
  height: .92rem;
  line-height: .92rem;
  border:  1px solid transparent;
  background: transparent;
  outline: none;
  user-select: none;
  padding: 0 .5rem;
  font-size: .38rem;
  color: #272727;
  position: relative;
  caret-color: #b03b3a;
}
.pop-input[data-width="518"] {
  width: 5.18rem;
}
.pop-input[data-width="724"] {
  width: 7.24rem;
}
.pop-input[data-width="805"] {
  width: 8.05rem;
}
.pop-input::placeholder {
  font-family: "FZLTYJT" !important;
}
.pop-phone-code-area {
  width: 2.8rem;
  height: .92rem;
  line-height: .92rem;
  font-size: .38rem;
  color: #272727;
}
.pop-phone-btn-send,
.pop-phone-countdown {
  width: 2.8rem;
  text-align: center;
}
.pop-phone-tip {
  width: 9.9rem;
  line-height: .38rem;
  font-size: .3rem;
  color: #898782;
  text-align: justify;
}
.pop-verify-award-box {
  width: 8.36rem;
  height: 3.05rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/verify-award-box.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-used-play {
  width: 6.23rem;
  height: 1.2rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-used-play.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-btn-confirm-receive {
  width: 4.69rem;
  height: 1.2rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm-receive.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-btn-to-game {
  width: 4.69rem;
  height: 1.2rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-to-game.png) 50% 50% / 100% 100% no-repeat;
}
.pop-verify-award-1 {
  width: 2.9rem;
}
.pop-verify-award-2 {
  width: 2.73rem;
}
.pop-verify-text-underline {
  position: relative;
}
.pop-verify-text-underline::after {
  content: "";
  width: 100%;
  height: .02rem;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #df6d19;
}
.pop-verify-text-underline[data-color="grey"]::after {
  background-color: #929086;
}
.pop-choose-account-box {
  width: 7.84rem;
  height: 2.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/choose-account-box.png) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-account-avatar-box {
  width: calc(1.33 * var(--originRem));
  height: calc(1.33 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/avatar-box.png) 50% 100% / 100% 100% no-repeat;
}
.pop-choose-account-avatar {
  width: calc(1.33 * var(--originRem));
  height: calc(1.33 * var(--originRem));
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  transform: scale(calc(126 / 133));
}
.pop-choose-account-user-name {
  max-width: 8rem;
  white-space: nowrap;
  font-size: .4rem;
  line-height: calc(.5 * var(--originRem));
  position: relative;
  color: #4fc4fa !important;
  padding-left: .3rem;
}
.pop-choose-account-user-name::after {
  content: "";
  width: calc(.39 * var(--originRem));
  height: calc(.45 * var(--originRem));
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-qq-name.png) 50% 100% / 100% 100% no-repeat;
  position: absolute;
  left: -.28rem;
  top: .02rem;
  z-index: 3;
}
.pop-btn-current-account {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-current-account.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-another-account {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-another-account.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-new-user {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-new-user.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-ok {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-ok.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-ok-2 {
  width: 4.69rem;
  height: 1.2rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-ok-2.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-confirm-2 {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm-2.png) 50% 50% / 100% 100% no-repeat;
}
.pop-btn-confirm-3 {
  width: 4.38rem;
  height: 1.369rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm-3.png) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-word-content {
  width: 10.18rem;
  height: 7.27rem;
  position: relative;
  margin-top: .5rem;
  padding: 0 .3rem;
  overflow: hidden;
}
.pop-choose-word-content-mask {
  width: 100%;
  height: 1.65rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/bg-choose-word-mask.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.pop-choose-word-bar {
  width: .14rem;
  height: 6.2rem;
  position: absolute;
  right: .0;
  top: 0;
  z-index: 9;
}
.pop-choose-word-bar-inner {
  width: 100%;
  height: 2.8rem;
  border-radius: .07rem;
  background-color: #cdc8be;
}
.pop-choose-word-bar-inner .bscroll-indicator {
  background-color: rgba(0, 0, 0, .3);
}
.pop-choose-word-content-inner {
  width: 100%;
  height: auto;
  position: relative;
}
.pop-choose-word-content-inner li:nth-last-child(1) {
  padding-bottom: 1rem;
}
.pop-choose-word-item {
  width: 2.99rem;
  height: .98rem;
  line-height: .98rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/choose-word-item-box.png) 50% 50% / 100% 100% no-repeat;
  margin: .1rem 0 .11rem 0;
  font-size: .38rem;
  color: #63625d;
  text-align: center;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* overflow: hidden;
  text-overflow: ellipsis; */
}
.pop-choose-word-item.active {
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/choose-word-item-box-active.png) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-word-item.active span {
  color: #fff;
  background: #997d5f;
  -webkit-text-stroke: .12rem transparent;
  -webkit-background-clip: text;
  background-clip: text;
  padding: .6rem;
}
.pop-btn-confirm {
  width: 5.69rem;
  height: 1.5rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm.png) 50% 50% / 100% 100% no-repeat;
}
.pop-choose-word-unline-txt {
  line-height: .4rem;
  font-size: .3rem;
  color: #3d3d3d;
  text-decoration: underline;
}
.pop-poster::after {
  background: none !important;
}
.pop-poster-img {
  width: 80%;
}
.pop-loading-progress-percent {
  line-height: .5rem;
  font-size: .5rem;
  color: #f4eee0;
}
.pop-award-title-1 {
  width: 7.61rem;
  height: .83rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-title-1.png) 50% 50% / 100% 100% no-repeat;
}
.pop-award-title-2 {
  width: 7.61rem;
  height: .81rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-title-2.png) 50% 50% / 100% 100% no-repeat;
}
.pop-award-item-bg-1 {
  width: 8.58rem;
  height: 2.59rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-item-bg-1.png) 50% 50% / 100% 100% no-repeat;
  margin-top: .22rem;
  padding: .2rem 0 .2rem .58rem;
  position: relative;
}
.pop-award-item-bg-2 {
  width: 8.58rem;
  height: 4.13rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-item-bg-2.png) 50% 50% / 100% 100% no-repeat;
  margin-top: .22rem;
  font-size: .28rem;
  line-height: .4rem;
  white-space: nowrap;
}
.pop-award-item-title {
  height: .58rem;
  line-height: .58rem;
  position: relative;
  color: #df6d19;
  font-size: .58rem;
  font-family: "MIANFEIZITI" !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  transform: translateX(-.22rem);
  opacity: 0;
  display: none;
}
.pop-award-item-title[data-show="1"],
.pop-award[data-sprite="1"][data-old="0"] .pop-award-item-title[data-sprite="1"][data-old="0"],
.pop-award[data-sprite="2"][data-old="0"] .pop-award-item-title[data-sprite="2"][data-old="0"],
.pop-award[data-sprite="3"][data-old="0"] .pop-award-item-title[data-sprite="3"][data-old="0"],
.pop-award[data-sprite="1"][data-old="1"] .pop-award-item-title[data-sprite="1"][data-old="1"],
.pop-award[data-sprite="2"][data-old="1"] .pop-award-item-title[data-sprite="2"][data-old="1"],
.pop-award[data-sprite="3"][data-old="1"] .pop-award-item-title[data-sprite="3"][data-old="1"] {
  opacity: 1;
  display: block;
}
.pop-award-item-title::before {
  content: "";
  width: .45rem;
  height: .67rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-star-left.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 30%;
  left: -.2rem;
  transform: translateY(-50%);
  z-index: 2;
}
.pop-award-item-title::after {
  content: "";
  width: .41rem;
  height: .6rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-star-right.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: 42%;
  transform: translate(-.2rem, -50%);
  z-index: 2;
}
.pop-award-item-1-grey-box {
  width: 1.45rem;
  height: .4rem;
  line-height: .4rem;
  font-size: .28rem;
  text-align: center;
  color: #fbf7ee;
  background-color: #9c9890;
  overflow: hidden;
  border-radius: .16rem;
}
.pop-award-item-tip {
  line-height: .4rem;
  /* margin-top: .1rem; */
  color: #9c9890;
  font-size: .28rem;
}
.pop-award-item-tip span[data-old="1"] {
  opacity: 0;
  display: none;
}
.pop-award[data-old="1"] .pop-award-item-tip span[data-old="1"] {
  opacity: 1;
  display: block;
}
.pop-award-watch {
  width: 2.75rem;
  position: absolute;
  top: .22rem;
  right: .16rem;
  opacity: 0;
  display: none;
}
.pop-award[data-sprite="1"] .pop-award-watch[data-sprite="1"],
.pop-award[data-sprite="2"] .pop-award-watch[data-sprite="2"],
.pop-award[data-sprite="3"] .pop-award-watch[data-sprite="3"] {
  opacity: 1;
  display: block;
}
.pop-award-my-title {
  width: 8.32rem;
  height: 2.05rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/award-my-title.png) 50% 50% / 100% 100% no-repeat;
}
.pop-restart-btn-restart {
  width: 5.12rem;
  height: 1.19rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-restart.png) 50% 50% / 100% 100% no-repeat;
}
.pop-restart-tip {
  color: #3d3d3d;
  font-size: .38rem;
  text-align: justify;
  line-height: .6rem;
}
.pop-common-tip {
  width: 85%;
  min-height: 3.5rem;
  font-size: .38rem;
  color: #3d3d3d;
  text-align: center;
  line-height: .6rem;
}
.pop-common-btn-confirm {
  width: 4.5rem;
  height: 1.2rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/btn-confirm.png) 50% 50% / 100% 100% no-repeat;
}
.pop-final-check-medal {
  height: 2.41rem;
}
.pop-final-check[data-sprite="1"] .pop-final-check-medal,
.pop-visit-award[data-sprite="1"] .pop-final-check-medal {
  width: 2.93rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/medal-1.png) 50% 50% / 100% 100% no-repeat;
}
.pop-final-check[data-sprite="2"] .pop-final-check-medal,
.pop-visit-award[data-sprite="2"] .pop-final-check-medal {
  width: 2.95rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/medal-2.png) 50% 50% / 100% 100% no-repeat;
}
.pop-final-check[data-sprite="3"] .pop-final-check-medal,
.pop-visit-award[data-sprite="3"] .pop-final-check-medal {
  width: 2.41rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/medal-3.png) 50% 50% / 100% 100% no-repeat;
}
.pop-final-check-title {
  width: 2.73rem;
  height: 2.41rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/verify-award-2.png) 50% 50% / 100% 100% no-repeat;
}
.pop-icon-point {
  width: .44rem;
  height: .46rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/award/icon-point.png) 50% 50% / contain no-repeat;
}
.pop-final-check-account-box {
  width: 7.94rem;
  height: 1.72rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/pop/final-check-account-box.png) 50% 50% / contain no-repeat;
}
.pop-final-check-avatar-box {
  width: .95rem;
  height: .95rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/avatar-box.png) 50% 100% / 100% 100% no-repeat;
  position: relative;
  transform: translateY(-.1rem);
}
.pop-final-check-avatar {
  width: .95rem;
  height: .95rem;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  transform: scale(calc(215 / 230));
}
.pop-final-check-user-name {
  max-width: 8rem;
  white-space: nowrap;
  font-size: .36rem;
  line-height: .36rem;
  position: relative;
}
.qq-channel .pop-final-check-user-name::after {
  content: "";
  width: .39rem;
  height: .45rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-qq-name.png) 50% 100% / contain no-repeat;
  position: absolute;
  left: -.51rem;
  top: -.04rem;
  z-index: 3;
}
.wechat-channel .pop-final-check-user-name::after {
  content: "";
  width: .51rem;
  height: .42rem;
  background: url(https://game.gtimg.cn/images/rocom/act/a20250703painting/home/icon-wechat-name.png) 50% 100% / contain no-repeat;
  position: absolute;
  left: -.63rem;
  top: 0;
  z-index: 3;
}
.qq-channel .pop-final-check-user-name {
  color: #4fc4fa !important;
}
.wechat-channel .pop-final-check-user-name {
  color: #7ecf36 !important;
}
/* ------------- toast --------------- */
#toastPage {
  width: 100%;
  height: 100%;
  color: #1e1e1e;
  user-select: none;
  position: fixed;
  overflow: hidden;
  z-index: 10199;
  pointer-events: none;
  opacity: 0;
}
.toast-wrapper {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  transition: .25s all;
  opacity: 0;
}

.toast-content {
  height: .78rem;
  line-height: .78rem;
  padding: 0 .3rem 0 1rem;
  background-color: #000;
  color: #929086 !important;
  font-size: .36rem;
  border-radius: .39rem;
  position: relative;
}
.toast-content::after {
  content: "";
  width: .6rem;
  height: .6rem;
  background: url(//game.gtimg.cn/images/rocom/m/m202504/index/modal/icon-toast.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  top: .11rem;
  left: .1rem;
  user-select: none;
  pointer-events: none;
}

.toast-move {
  animation: toast-move-frame .75s linear 1 forwards;
}

@keyframes toast-move-frame {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  66.6% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}