*,*::before,*::after { box-sizing: border-box }
      html,body {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        background: #F2F4F3;
      }
      body { min-height: 100vh }
      p { margin: 0 }
      #page-shell {
        position: relative;
        width: 100%;
        min-height: 100vh;
        overflow: clip;
      }
      #page-root {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1920px;
        height: 10125px;
        background: #F2F4F3;
        transform-origin: top center;
      }

.tx-0001 { width: 1921px; height: 783px; flex: none; position: absolute; left: 0px; top: 0px }

.tx-0002 { flex: none; position: absolute; left: 0px; top: 0px; width: 1920px; height: 748px; object-fit: cover }

.tx-0003 {
  width: 1920px;
  height: 147px;
  flex: none;
  position: absolute;
  left: 1px;
  top: 650px;
  z-index: 5;
  background: url("https://wanmei-edu-public.cdn.bcebos.com/pixseedschool.com/img/yingyou20260427/banner1_down.png") center center / 100% 100% no-repeat;
}

.tx-0004 { width: 1920px; height: 147px; flex: none; position: absolute; left: 0px; top: 0px }

.tx-0005 { width: 752px; height: 29px; display: flex; justify-content: center; align-items: center; gap: 40px; position: absolute; left: calc(100% - 1920px + 518px); top: 50px; z-index: 1 }

.tx-0006 { display: flex; justify-content: center; align-items: center; gap: 6px }

.tx-0007 { width: 24px; height: 24px }

.tx-0008 { color: #000000; font-size: 20px; font-family: Source Han Sans; font-weight: bold; line-height: 29px }

.tx-0009 { width: 1px; height: 13px; flex: none; background: #FFFFFF; opacity: 0.2 }

.tx-0010 { width: 1066px; height: 29px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 150px; white-space: nowrap; position: absolute; left: calc(100% - 1921px + 427px); top: 26px }



.tx-0012 { flex-shrink: 0; color: #DBFFFF; font-size: 20px; font-family: Source Han Sans; line-height: 1.13; white-space: nowrap }







.tx-0016 {
  flex: none;
  position: absolute;
  left: calc(100% - 1921px + 240px);
  top: -55px;
  /* width: 90px; */
  height: 850px;
  object-fit: cover;
  transform-origin: center center;
  will-change: filter;
  animation: tx-play-icon-glow 2.4s ease-in-out infinite alternate;
}

@keyframes tx-play-icon-glow {
  from { filter: drop-shadow(0 8px 14px rgba(27,223,223,0.16)) brightness(1) }
  to { filter: drop-shadow(0 14px 24px rgba(27,223,223,0.36)) brightness(1.08) }
}

.tx-0017 { width: 1920px; height: 752px; flex: none; position: absolute; left: 0px; top: 800px }

.tx-0018 { position: absolute; left: 0px; top: 0px }
.tx-0057-bg { position: absolute; left: 50%; top: 243px; width: calc(100% - 200px); transform: translateX(-50%); }


.tx-00172 { width: 1920px; height: 752px; flex: none; position: absolute; left: 0px; top: 1500px }
.title-00172{
    width: 608px;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    left: calc(100% - 1416px + 178px);
    top: 56px;
}
.tx-0057-title{
    width: 633px;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    left: calc(100% - 1416px + 100px);
    top: 56px;
}

.tx-00182 { position: absolute; left: 0px; top: 220px; width: 1920px; isolation: isolate }

.tx-00182-video-wrap { position: absolute; left: 0px; right: 0px; top: 50%; height: calc(100% - 10px); transform: translateY(-50%); overflow: hidden; pointer-events: none; z-index: 0 }

.tx-00182-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000000; pointer-events: none; transform: translateY(-80px) }

.tx-00182-content { position: absolute; left: 420px; top: 234px; width: 38%; display: block; z-index: 0.5; pointer-events: none }

.tx-00182-image { width: 100%; display: block; position: relative; z-index: 1; transform: scaleY(0.9175682648); transform-origin: top center; }



















.tx-0028 { position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0% }



















.tx-0037-title-image { width: 100%; height: 100%;}





























.tx-0052 { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px }

.tx-0053 { display: block; width: 100%; height: 100% }

.tx-cta-button {
  display: block;
  color: inherit;
  text-decoration: none;
  transform: var(--tx-cta-base-transform, translateX(0)) scale(1);
  transform-origin: center center;
  transition: transform 0.28s ease;
  z-index: 4;
  cursor: pointer !important;
  pointer-events: auto;
}

.tx-cta-button,
.tx-cta-button * {
  cursor: pointer !important;
}

.tx-cta-button-bg { position: absolute; inset: 0 }

.tx-cta-button-shape { display: block; width: 100%; height: 100% }

.tx-cta-button-label { color: #181E25; font-size: 20px; font-family: Source Han Sans; text-align: center; font-weight: 900; line-height: 29px; letter-spacing: 2px; white-space: nowrap; -webkit-text-stroke: 0.45px currentColor; paint-order: stroke fill; text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor; user-select: none; -webkit-user-select: none;padding-top:10px; }

@media (hover: hover) {
  .tx-cta-button:hover {
    transform: var(--tx-cta-base-transform, translateX(0)) scale(1.06);
  }
}

.tx-0054 { position: absolute; left: 15.15%; right: 21.15%; top: 18.27%; bottom: 28.79% }





.tx-0057 { width: 1920px; height: 764px; flex: none; position: absolute; left: 0px; top: 2607px }









.tx-0061.is-dragging { cursor: grabbing }

.tx-0061-track {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  will-change: transform;
}





























.tx-0076 { width: 535px; height: 66px; flex: none; position: absolute; left: calc(100% - 1920px + 692px); top: calc(100% - 764px + 644px) }

.tx-00763 { width: 535px; height: 66px; flex: none; position: absolute; left: 420px; top: calc(100% + 244px); }

.tx-00764 { width: 535px; height: 66px; flex: none; position: absolute; left: 703px; top: calc(100% - 20px); }
.tx-0077 { position: absolute; left: 50px; right: 50px; top: 50%; transform: translateY(-50%) }
















.tx-0085 { display: inline-block; background-image: linear-gradient(180deg, #EAEAEA 0%, rgba(225,225,225,0) 100%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; font-size: 96px; font-family: ITC Avant Garde Gothic; font-weight: 500; line-height: 1.1811 }

.tx-0086 { display: inline-block; background-image: linear-gradient(180deg, #EAEAEA 0%, rgba(225,225,225,0) 100%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; font-size: 64px; font-family: ITC Avant Garde Gothic; font-weight: 500; line-height: 1.1811 }



.kcdg-card { display: none }

.kcdg-card[data="1"],
.kcdg-card.is-active { display: block }

.kcdg-card.is-hidden { display: none }









































.tx-0089-prev .tx-0089-arrow { transform: rotate(-135deg) translate(-1px, 1px) }

.tx-0089-next .tx-0089-arrow { transform: rotate(45deg) translate(-1px, 1px) }













































.tx-image-preview {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

.tx-image-preview.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tx-image-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background:
    radial-gradient(circle at top, rgba(27,223,223,0.22) 0%, rgba(27,223,223,0) 35%),
    rgba(4,6,5,0.8);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.tx-image-preview-dialog {
  position: relative;
  z-index: 1;
  width: min(78vw, 1080px);
  max-width: 1080px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  transform: translateY(28px) scale(0.94);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.36s ease;
}

.tx-image-preview.is-open .tx-image-preview-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.tx-image-preview-dismiss {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #DDFBFB 100%);
  color: #181E25;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 16px 32px rgba(24,30,37,0.18);
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.tx-image-preview-dismiss:hover,
.tx-image-preview-dismiss:focus-visible {
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 20px 36px rgba(24,30,37,0.22);
  outline: none;
}

.tx-image-preview-frame {
  width: 100%;
  padding: 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(229,245,245,0.92) 100%);
  box-shadow: 0 28px 72px rgba(0,0,0,0.22);
}

.tx-image-preview-image {
  width: 100%;
  max-height: calc(100vh - 210px);
  display: block;
  border-radius: 20px;
  object-fit: contain;
  background: #FFFFFF;
}

.tx-image-preview-caption {
  margin: 0;
  color: #DBFFFF;
  font-size: 18px;
  font-family: Source Han Sans;
  line-height: 26px;
  text-align: center;
  text-shadow: 0 4px 24px rgba(0,0,0,0.28);
}











.tx-0110 { position: relative; z-index: 1 }

.tx-0111 { --tx-0111-portfolio-gap: 36px; --tx-0111-portfolio-img-width: 616px; --tx-0111-portfolio-img-height: 382px; --tx-0111-portfolio-top: 395px; --tx-0111-button-top: 819px; --tx-0111-button-height: 66px; width: 1920px; height: max(calc(var(--tx-0111-portfolio-top) + var(--tx-0111-portfolio-img-height) + 28px), calc(var(--tx-0111-button-top) + var(--tx-0111-button-height) + 28px)); flex: none; position: absolute; left: 0px; top: 4380px; overflow: hidden }

.tx-0111-bg { position: absolute; inset: 0;  }

.tx-0111-bg-image { position: absolute; inset: 0; opacity: 0.15; }

.tx-0111-portfolio { position: absolute; left: 0px; top: var(--tx-0111-portfolio-top); width: 1920px; height: var(--tx-0111-portfolio-img-height); display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; gap: var(--tx-0111-portfolio-gap); z-index: 2 }

.tx-0111-portfolio-row { position: relative; width: 100%; height: var(--tx-0111-portfolio-img-height); overflow: hidden }

.tx-0111-portfolio-track { display: flex; align-items: center; width: max-content; will-change: transform }

.tx-0111-portfolio-track-top { gap: var(--tx-0111-portfolio-gap); animation: tx-0111-portfolio-top-scroll 20s linear infinite }



.tx-0111-portfolio-set { display: flex; align-items: center }

.tx-0111-portfolio-set-top { gap: var(--tx-0111-portfolio-gap) }



.tx-0111-portfolio-img { width: var(--tx-0111-portfolio-img-width); height: var(--tx-0111-portfolio-img-height); display: block; flex: none; object-fit: cover }

@keyframes tx-0111-portfolio-top-scroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-3260px) }
}



.tx-0112 { width: max-content; height: var(--tx-0111-button-height); display: flex; justify-content: center; align-items: center; padding-left: 50px; padding-right: 50px; flex: none; position: absolute; left: 960px; top: var(--tx-0111-button-top); --tx-cta-base-transform: translateX(-50%); z-index: 3 }

.tx-0113 { width: 964px; height: 95px; flex: none; position: absolute; left: calc(100% - 1920px + 478px); top: 131px; z-index: 3 }



.tx-0115 { width: 800px;  display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; position: absolute; left: calc(100% - 964px + 63px);}





.tx-0118 { width: 1920px; height: 1294px; flex: none; position: absolute; left: 0px; top: 5366px; background: #FFFFFF; overflow: hidden }

.tx-brand-stage { position: relative; width: 100%; height: 100% }



.tx-brand-header { width: 800px;  display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; position: absolute; left: 612px; top: -26px; z-index: 2 }











.tx-brand-copy { width: 461px; height: 299px; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 18px; position: absolute; left: 410px; top: 250px; z-index: 2 }

.tx-brand-copy-title { margin: 0; color: #181E25; font-size: 24px; font-family: Source Han Sans; font-weight: 700; line-height: 30px; white-space: nowrap }

.tx-brand-copy-rule { width: 24px; height: 1px; background: #181E25 }

.tx-brand-copy-text { width: 461px; margin: 0; color: #4C4C4C; font-size: 18px; font-family: Source Han Sans; line-height: 26px }



.tx-brand-sigil { position: absolute; left: 478px; top: 555px; width: 108px; height: 108px; opacity: 0.1; background: url("../img/e1b987fc58d943a03cd4bb1a0ff4688e.png") center center / 100% 100% no-repeat; transform: rotate(180deg); transform-origin: center center; z-index: 0 }

.tx-brand-visual { position: absolute; left: 906px; top: 150px; width: 604px; height: 452px; z-index: 1; isolation: isolate }

.tx-brand-visual-frame { position: absolute; left: -14px; top: -16px; width: 618px; height: 485px; z-index: 2; background: url("../img/13037dd2058eeb2da7adcb287c6f6543.png") center center / 100% 100% no-repeat }

.tx-brand-visual-photo { position: absolute; left: 0px; top: 99.71px; width: 604px; height: 352.2941px; z-index: 1; background: url("../img/577e267f6141b6625736e186e2e4040b.jpeg") center center / 100% 100% no-repeat }

.tx-brand-media { width: 1100px; height: 489px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 24px; position: absolute; left: 410px; top: 668px; z-index: 2 }

.tx-brand-media-group { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 6px }

.tx-brand-media-group-games { width: 1100px; height: 210px }

.tx-brand-media-group-film { width: 1099px; height: 255px }

.tx-brand-media-heading { margin: 0; color: #181E25; font-size: 24px; font-family: Source Han Sans; font-weight: 700; line-height: 27px; white-space: nowrap }

.tx-brand-media-heading-film { width: 466px }

.tx-brand-games { width: 1100px; height: 169px; display: flex; justify-content: center; align-items: center }

.tx-brand-game-card { height: 169px; flex-shrink: 0; position: relative; background-repeat: no-repeat; background-position: center; background-size: 100% 100% }

.tx-brand-game-card-01 { width: 270px; background-image: url("../img/8b151067351ed68756d150a22c7c42f7.png") }

.tx-brand-game-card-02 { width: 280px; background-image: url("../img/74ab9bc021ea0df8451b0035ddf6d559.png") }

.tx-brand-game-card-03 { width: 278px; background-image: url("../img/35ca9fd55a58b83471bd5f08e963d58d.png") }

.tx-brand-game-card-04 { width: 272px; background-image: url("../img/412bf0ea80ce3fe68ec51bbd40dacbd1.png") }

.tx-brand-game-logo { position: absolute; background-repeat: no-repeat; background-position: center; background-size: 100% 100% }

.tx-brand-game-logo-01 { left: 8px; top: 62px; width: 161px; height: 61px; background-image: url("../img/ad9a4e60df22270bcf362066e2cc9e15.png") }

.tx-brand-game-logo-02 { left: 17px; top: 10px; width: 57px; height: 37px; background-image: url("../img/e62b41b9c650ca3df6d44ba05ce178a9.png") }

.tx-brand-films { width: 1099px; height: 214px; display: flex; justify-content: center; align-items: center }

.tx-brand-film-card { width: 157px; height: 214px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100% }

.tx-brand-film-card-01 { background-image: url("../img/3d046446798ad48878f94a580ab576ca.png") }

.tx-brand-film-card-02 { background-image: url("../img/a682cfe95826552b8673e4af661bb70f.png") }

.tx-brand-film-card-03 { background-image: url("../img/5ea3334a29e05dcfbf860ea66e386eb8.png") }

.tx-brand-film-card-04 { background-image: url("../img/67735ae7572039b5739a901a10f47fe3.png") }

.tx-brand-film-card-05 { background-image: url("../img/ce09bc12092fc861e62841456de67866.png") }

.tx-brand-film-card-06 { background-image: url("../img/6c677ef6aee8defda75c78a1cf063de2.png") }

.tx-brand-film-card-07 { background-image: url("../img/05842aaf3c6193a728becd3f26888996.png") }

.tx-0119 { width: 1920px; height: 2318px; flex: none; background: #FFFFFF; position: absolute; right: 0px; top: 7195px; transition: height 0.6s ease }

.tx-0120 { width: 1920px; height: 716px; flex: none; position: absolute; left: 0px; top: 6632px }

.tx-0121 { position: absolute; left: calc(100% - 1920px + 0px); top: -155px }

.tx-0122 { width: 964px; height: 95px; flex: none; position: absolute; left: calc(100% - 1920px + 478px); top: 64px }



.tx-0124 { width: 800px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; position: absolute; left: calc(100% - 964px + 62px); top: -135px }



.tx-0126 { width: 1099px; height: 435px; display: flex; justify-content: flex-start; align-items: center; gap: 8px; position: absolute; left: calc(100% - 1920px + 410px); top: 191px }

.tx-0127 { width: 361px; height: 435px; flex: none; position: relative }

.tx-0128 { width: 361px; height: 435px; flex: none; position: absolute; left: 0px; top: 0px }

.tx-0129 { flex: none; position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%; width: 361px; height: 435px; object-fit: cover }

.tx-0130 { width: 361px; height: 435px; flex: none; background: linear-gradient(180deg, rgba(0,11,5,0) 51%, #000B05 100%); position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0% }

.tx-0131 { width: 308px; height: 86px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 4px; position: absolute; left: calc(100% - 361px + 27px); top: 299px }

.tx-0132 { color: #FFFFFF; font-size: 28px; font-family: Source Han Sans; font-weight: 700; line-height: 1.18 }

.tx-0133 { width: 308px; flex: none; color: #FFFFFF; font-size: 16px; font-family: Source Han Sans; line-height: 24px }

.tx-0134 { width: 361px; height: 435px; flex: none; background: linear-gradient(180deg, rgba(26,14,1,0) 51%, #1A0E01 100%); position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0% }

.tx-0135 { width: 308px; height: 62px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 4px; position: absolute; left: calc(100% - 361px + 27px); top: 299px }

.tx-0136 { width: 361px; height: 435px; flex: none; background: linear-gradient(180deg, rgba(17,6,0,0) 51%, #110600 100%); position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0% }

.tx-0137 { width: 308px; height: 110px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: 4px; position: absolute; left: calc(100% - 361px + 27px); top: 299px }

.tx-0138 { width: 500px; height: 66px; flex: none; position: absolute; left: calc(100% - 1920px + 810px); top: calc(100% - 716px + 650px) }

.tx-0139 { position: absolute; left: calc(100% - 450px); top: 18.27%; bottom: 28.79% }

.tx-0140 { width: 1100px; height: 562px; flex: none; position: absolute; left: calc(100% - 1920px + 410px); top: 7520px; overflow: visible }

.tx-0141 { width: 964px; height: 95px; flex: none; position: absolute; left: calc(100% - 1100px + 68px); top: 0px }



.tx-0143 { width: 800px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; position: absolute; left: calc(100% - 949px); top: -114px }

.tx-0144 { width: 1920px; height: 480px; display: flex; justify-content: center; align-items: stretch; flex-direction: column; gap: 8px; position: absolute; left: -410px; top: 127px }

.tx-0145 { position: relative; width: 100%; height: 236px; overflow: hidden }

.tx-0145-track { display: flex; align-items: center; width: max-content; will-change: transform }

.tx-0145-track-top { gap: 8px; animation: tx-0145-top-scroll 20s linear infinite }

.tx-0145-track-bottom { gap: 8px; animation: tx-0145-bottom-scroll 20s linear infinite }

.tx-0145-set { display: flex; align-items: center }

.tx-0145-set-top { gap: 8px }

.tx-0145-set-bottom { gap: 8px }

.tx-0147 { width: 361px; height: 236px; flex: none; object-fit: cover }

@keyframes tx-0145-top-scroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-738px) }
}

@keyframes tx-0145-bottom-scroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-1107px) }
}

.tx-0148 { width: 1100px; flex: none; position: absolute; left: calc(100% - 1920px + 410px); top: 8213px; padding-top: 113px; transition: height 0.6s ease }



.tx-0150 { width: 800px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; position: absolute; left: calc(100% - 964px + 12px); top: -115px }

.tx-0150 .tx-0125 { white-space: nowrap }

.tx-0151 { width: 1100px; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; gap: 20px; padding-bottom: 24px }

.tx-logo-wall { width: 1100px; height: 670px; overflow: hidden; transition: height 0.6s ease }

.tx-logo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 220px) }

.tx-logo-item { width: 220px; height: 134px; display: flex; justify-content: center; align-items: center }

.tx-logo-item img { display: block; max-width: 100%; max-height: 100% }

.tx-logo-more { display: block; width: 100px; border: none; padding: 0; margin: 0 auto; background: transparent; color: #3688F7; font-size: 24px; font-family: Source Han Sans; line-height: 34px; text-align: center; cursor: pointer }

.tx-logo-more:hover { color: #2B74D9 }

.tx-0152 { width: 1920px; height: 532px; position: absolute; left: 0px; top: 9513px; overflow: hidden; transition: top 0.6s ease }

.pt11-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none }

.pt11-bg video { display: block; width: 100%; height: 100%; object-fit: cover }

.pt11-text { position: absolute; left: calc(50% - 230px);; top: 92px; width: 465.516px; transform: translateX(-50%); z-index: 1 }

.pt11-text img { display: block; width: 100%; height: auto }



.yjst { width: 460px; height: 66px; flex: none; position: absolute; left: calc(100% - 1920px + 499px); top: calc(100% - 716px + 455px); z-index: 2 }











.pt5-container{
  --pt5-stage-card-width: 1100px;
  --pt5-stage-card-height: 660px;
  --pt5-stage-card-top: 327px;
  --pt5-stage-arrow-height: 70px;
  --pt5-stage-text-top-from-bottom: calc((var(--pt5-stage-card-height) / 2) - (var(--pt5-stage-arrow-height) / 2) + 20px);
  width: 1920px;
    height: 1864px;
    flex: none;
    position: absolute;
    left: 0px;
    top: 3507px;
}

.pt5-title {
  width: 900px;
  position: absolute;
  left: 403px;
  top: -14px;
}

.stage-container {
  position: absolute;
  left: 50%;
  top: 250px;
  width: 1100px;
  transform: translateX(-50%);
}

.stage-container ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
}


.stage-container li {
  flex: 1;
  position: relative;
  padding-bottom: 18px;
  color: rgba(227,255,251,0.34);
  font-size: 24px;
  font-family: Source Han Sans;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.6px;
}

.stage-container li::before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 6px;
  background: url(https://wanmei-edu-public.cdn.bcebos.com/pixseedschool.com/img/yingyou20260427/pt5_st_un.svg) center center / 100% 100% no-repeat;
  opacity: 1;
}


.stage-container li.active {
  color: #FFFFFF;
  text-shadow: 0 0 18px rgba(255,255,255,0.22);
}
.stage-container li.active::before {    
  height: 20px;
  top: 35px;
  background-image: url(https://wanmei-edu-public.cdn.bcebos.com/pixseedschool.com/img/yingyou20260427/pt5_st_sel.svg);
}

.stage-container li:first-child:before {
  height: 10px;
  top: 36px;
  background: url(https://wanmei-edu-public.cdn.bcebos.com/pixseedschool.com/img/yingyou20260427/pt5_st1.svg) center center / 100% 100% no-repeat;
}

.stage-container li:first-child.active::before {    
  height: 20px;
  top: 35px;
  background-image: url(https://wanmei-edu-public.cdn.bcebos.com/pixseedschool.com/img/yingyou20260427/pt5_st_sel.svg);
}

.stage-cards {
  position: absolute;
  left: 50%;
  top: var(--pt5-stage-card-top);
  width: var(--pt5-stage-card-width);
  height: var(--pt5-stage-card-height);
  transform: translateX(-50%);
}

.stage-card {
  position: relative;
  width: 100%;
  height: var(--pt5-stage-card-height);
  overflow: hidden;
}

.stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stage-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.stage-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  bottom: -42px;
}

.stage-mask img {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-text {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--pt5-stage-text-top-from-bottom));
  z-index: 2;
  width: calc(100% - 160px);
  transform: translateX(-50%);
}

.stage-text img {
  display: block;
  width: 100%;
  height: auto;
}

.left-arrow,
.right-arrow {
  position: absolute;
  top: calc(var(--pt5-stage-card-top) + (var(--pt5-stage-card-height) / 2));
  z-index: 2;
  transform: translateY(-50%);
}

.left-arrow {
  left: calc(50% - (var(--pt5-stage-card-width) / 2) + 10px);
}

.right-arrow {
  right: calc(50% - (var(--pt5-stage-card-width) / 2) + 10px);
}

.left-arrow a,
.right-arrow a {
  display: block;
  cursor: pointer;
}

.left-arrow img,
.right-arrow img {
  display: block;
  width: 26.67px;
  height: auto;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.left-arrow a:hover img,
.right-arrow a:hover img {
  transform: scale(1.15);
}