body { display:block; min-width:1572px; }

.app { position:relative; display:block; margin:0 auto; overflow:hidden }
.app .topbar { position:absolute; top:0px; left:0px; right:0px; z-index:10; display:block; height:88px; background-color:rgba(0,0,0,0.5); }
.app .topbar .game { position:absolute; top:16px; left:260px; display:flex; justify-content:flex-start; align-items:center; gap:24px }
.app .topbar .game .logo { float:left; display:block; width:146px; height:146px; background-repeat:no-repeat; background-size:146px 146px; }
.app .topbar .game .name { float:left; display:block; width:248px; height:152px; background-repeat:no-repeat; background-size:248px 152px; }
.app .main { position:relative; z-index:1; display:block; height:3048px; overflow:hidden; }
.app .main .screens { position:absolute; top:0px; left:0px; right:0px; z-index:1; display:block; height:1208px; overflow:hidden; pointer-events:none; }
.app .main .screens::after { content:""; position:absolute; top:0px; left:0px; z-index:2; width:1920px; height:1208px; pointer-events:none; visibility:hidden; background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0) 100%); animation:screen-mask 24s 0s infinite linear; }
.app .main .screens .screen { position:absolute; top:0px; left:0px; right:0px; height:1208px; background-repeat:no-repeat; background-size:auto 1208px; background-position-x:0px; visibility:hidden; }
.app .main .screens .screen.screen1 { background-image:url("../images/screen1.png?v=1.0.0"); animation:screen-pan1 24s 0s infinite linear; }
.app .main .screens .screen.screen2 { background-image:url("../images/screen2.png?v=1.0.0"); animation:screen-pan2 24s 0s infinite linear; }
.app .main .screens .screen.screen3 { background-image:url("../images/screen3.png?v=1.0.0"); animation:screen-pan3 24s 0s infinite linear; }
.app .main .screens .screen.screen4 { background-image:url("../images/screen4.png?v=1.0.0"); animation:screen-pan4 24s 0s infinite linear; }
.app .main .roles { position:absolute; top:0px; left:0px; right:0px; z-index:1; }
.app .main .roles .role { position:absolute; display:block; width:auto; }
.app .main .roles .role.role1 { top:688px; left:50%; height:190px; transform:translate(-460px,0%); }
.app .main .roles .role.role2 { top:678px; left:50%; height:200px; transform:translate(-264px,0%); }
.app .main .roles .role.role3 { top:700px; left:50%; height:176px; transform:translate(-50%,0%); }
.app .main .roles .role.role4 { top:684px; left:50%; height:220px; transform:translate(70px,0%); }
.app .main .roles .role.role5 { top:700px; left:50%; height:180px; transform:translate(280px,0%); }
.app .main .bgs { position:absolute; top:0px; left:50%; z-index:1; display:block; width:1920px; height:3048px; margin-left:-960px; pointer-events:none; }
.app .main .bgs .bg { display:block; width:100%; height:762px; background-repeat:no-repeat; background-position:50% 0%; }
.app .main .bgs .bg.bg1 { background-image:url("../images/bg1.png?v=1.0.0"); }
.app .main .bgs .bg.bg2 { background-image:url("../images/bg2.png?v=1.0.0"); }
.app .main .bgs .bg.bg3 { background-image:url("../images/bg3.png?v=1.0.0"); }
.app .main .bgs .bg.bg4 { background-image:url("../images/bg4.png?v=1.0.0"); }
.app .main .languages { position:fixed; top:316px; right:32px; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:24px; width:208px; height:390px; background-image:url("../images/languages.png?v=1.0.0"); background-repeat:no-repeat; background-size:208px 390px; padding-top:112px; }
.app .main .languages .language { cursor:pointer; display:block; width:160px; height:42px; background-image:url("../images/language.png?v=1.0.0"); background-repeat:no-repeat; background-size:320px 126px; }
.app .main .languages .language:nth-child(1) { background-position:0px 0px; }
.app .main .languages .language:nth-child(1).active { background-position:-160px 0px; }
.app .main .languages .language:nth-child(2) { background-position:0px -42px; }
.app .main .languages .language:nth-child(2).active { background-position:-160px -42px; }
.app .main .languages .language:nth-child(3) { background-position:0px -84px; }
.app .main .languages .language:nth-child(3).active { background-position:-160px -84px; }
.app .main .btn-video { position:absolute; top:388px; left:50%; z-index:2; display:block; width:198px; height:198px; cursor:pointer; background-image:url("../images/btn-video.png?v=1.0.0"); background-repeat:no-repeat; background-size:198px 198px; transform:translate(-50%,0%); }
.app .main .downloads { position:absolute; top:904px; left:50%; z-index:2; display:flex; justify-content:center; align-items:center; gap:48px; width:720px; transform:translate(-50%,0%); }
.app .main .downloads .download { cursor:pointer; display:block; width:336px; height:104px; background-repeat:no-repeat; background-size:336px 208px; }
.app .main .downloads .download.download-ios { background-position:0px 0px; }
.app .main .downloads .download.download-android { background-position:0px -104px; }
.app .main .intro { position:absolute; top:1300px; left:50%; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; transform:translate(-50%,0%); }
.app .main .intro .title { display:block; background-repeat:no-repeat; }
.app .main .intro .subtitle { display:block; background-repeat:no-repeat; margin-top:24px; }
.app .main .intro .description { display:block; background-repeat:no-repeat; margin-top:-24px; }
.app .main .features { position:absolute; top:1900px; left:50%; z-index:2; display:block; width:586px; height:970px; transform:translate(-50%,0%); }
.app .main .features .features-swiper { position:relative; z-index:1; display:block; width:100%; height:100%; }
.app .main .features .features-swiper .swiper { display:block; width:100%; height:100%; }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide .feature { display:block; width:100%; height:100%; background-image:url("../images/feature.png?v=1.0.0"); background-repeat:no-repeat; background-size:586px 970px; padding:32px 38px; filter:brightness(0.5); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide .feature img { display:block; width:100%; height:100%; }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .feature { filter:brightness(1); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .feature img {  }
.app .main .features .features-swiper .swiper-button-prev,
.app .main .features .features-swiper .swiper-button-next { position:absolute; top:50%; z-index:12; cursor:pointer; width:114px; height:114px; background-image:url("../images/features-navigate.png?v=1.0.0"); background-repeat:no-repeat; background-size:228px 114px; margin-top:-57px; }
.app .main .features .features-swiper .swiper-button-prev { left:-500px; background-position:0 0; }
.app .main .features .features-swiper .swiper-button-next { right:-500px; background-position:-114px 0; }
.app .main .features .features-swiper .swiper-pagination { position:absolute; bottom:-90px; left:50%; display:block; white-space:nowrap; transform:translate(-50%,0%); }
.app .main .features .features-swiper .swiper-pagination .swiper-pagination-bullet { position:relative; display:inline-block; width:38px; height:38px; background-color:transparent; background-image:url("../images/features-pagination.png?v=1.0.0"); background-repeat:no-repeat; background-position:0px 0px; background-size:76px 38px; margin:0 24px; opacity:1; }
.app .main .features .features-swiper .swiper-pagination .swiper-pagination-bullet-active { background-position:-38px 0px; }

.app.lang-zh .topbar .game .logo { background-image:url("../images/zh/logo.png?v=1.0.0"); }
.app.lang-zh .topbar .game .name { background-image:url("../images/zh/name.png?v=1.0.0"); }
.app.lang-zh .main .downloads .download { background-image:url("../images/zh/downloads.png?v=1.0.0"); }
.app.lang-zh .main .intro .title { width:572px; height:176px; background-image:url("../images/zh/title.png?v=1.0.0"); background-size:572px 176px; }
.app.lang-zh .main .intro .subtitle { width:738px; height:124px; background-image:url("../images/zh/subtitle.png?v=1.0.0"); background-size:738px 124px; }
.app.lang-zh .main .intro .description { width:1510px; height:232px; background-image:url("../images/zh/description.png?v=1.0.0"); background-size:1510px 232px; }
.app.lang-zh .main .features { top:1900px; }

.app.lang-en .topbar .game .logo { background-image:url("../images/en/logo.png?v=1.0.0"); }
.app.lang-en .topbar .game .name { background-image:url("../images/en/name.png?v=1.0.0"); }
.app.lang-en .main .downloads .download { background-image:url("../images/en/downloads.png?v=1.0.0"); }
.app.lang-en .main .intro .title { width:502px; height:210px; background-image:url("../images/en/title.png?v=1.0.0"); background-size:502px 210px; }
.app.lang-en .main .intro .subtitle { width:1112px; height:124px; background-image:url("../images/en/subtitle.png?v=1.0.0"); background-size:1112px 124px; }
.app.lang-en .main .intro .description { width:1510px; height:288px; background-image:url("../images/en/description.png?v=1.0.0"); background-size:1510px 288px; }
.app.lang-en .main .features { top:1940px; }

.app.lang-th .topbar .game .logo { background-image:url("../images/th/logo.png?v=1.0.0"); }
.app.lang-th .topbar .game .name { background-image:url("../images/th/name.png?v=1.0.0"); }
.app.lang-th .main .downloads .download { background-image:url("../images/th/downloads.png?v=1.0.0"); }
.app.lang-th .main .intro .title { width:502px; height:210px; background-image:url("../images/th/title.png?v=1.0.0"); background-size:502px 210px; }
.app.lang-th .main .intro .subtitle { width:910px; height:124px; background-image:url("../images/th/subtitle.png?v=1.0.0"); background-size:910px 124px; }
.app.lang-th .main .intro .description { width:1510px; height:232px; background-image:url("../images/th/description.png?v=1.0.0"); background-size:1510px 232px; }
.app.lang-th .main .features { top:1920px; }

/* screen1: 0%~25%, 滑854px */
@keyframes screen-pan1 {
  0% { visibility:visible; background-position-x:0px; }
  25% { visibility:visible; background-position-x:-854px; }
  25.1% { visibility:hidden; background-position-x:0px; }
  100% { visibility:hidden; background-position-x:0px; }
}

/* screen2: 25%~50%, 滑854px */
@keyframes screen-pan2 {
  0%,24.9% { visibility:hidden; background-position-x:0px; }
  25% { visibility:visible; background-position-x:0px; }
  50% { visibility:visible; background-position-x:-854px; }
  50.1% { visibility:hidden; background-position-x:0px; }
  100% { visibility:hidden; background-position-x:0px; }
}

/* screen3: 50%~75%, 滑614px */
@keyframes screen-pan3 {
  0%,49.9% { visibility:hidden; background-position-x:0px; }
  50% { visibility:visible; background-position-x:0px; }
  75% { visibility:visible; background-position-x:-614px; }
  75.1% { visibility:hidden; background-position-x:0px; }
  100% { visibility:hidden; background-position-x:0px; }
}

/* screen4: 75%~100%, 滑632px */
@keyframes screen-pan4 {
  0%,74.9% { visibility:hidden; background-position-x:0px; }
  75% { visibility:visible; background-position-x:0px; }
  99.9% { visibility:visible; background-position-x:-632px; }
  100% { visibility:hidden; background-position-x:0px; }
}

/* 蒙版在切换点划过（各占2%≈0.48s），居中对齐25%/50%/75%/0% */
@keyframes screen-mask {
  0%,1.1%,24%,26.1%,49%,51.1%,74%,76.1%,99% { visibility:hidden; }
  24.1% { visibility:visible; transform:translateX(1920px); }
  26% { visibility:visible; transform:translateX(-1920px); }
  49.1% { visibility:visible; transform:translateX(1920px); }
  51% { visibility:visible; transform:translateX(-1920px); }
  74.1% { visibility:visible; transform:translateX(1920px); }
  76% { visibility:visible; transform:translateX(-1920px); }
  99.1% { visibility:visible; transform:translateX(1920px); }
  100% { visibility:visible; transform:translateX(0px); }
}

.dialog-player { position:relative; display:flex; flex-direction:column; align-items:center; }
.dialog-player .content { display:block; width:960px; height:540px; }
.dialog-player .content video { display:block; width:100%; height:auto; }
.dialog-player .btn-close { position:absolute; bottom:-68px; left:50%; cursor:pointer; display:block; width:48px; height:48px; transform:translate(-50%,0%); }
.dialog-player .btn-close svg { display:block; width:100%; height:100%; }