/* 样式 */
html, body, .app { display:block; width:100%; height:100%; overflow:hidden; }

.app-header { position:relative; top:0rem; left:0rem; right:0rem; z-index:2; display:block; width:100%; height:0rem; }
.app-header .logo { position:absolute; top:0.36rem; left:0.36rem; display:block; width:2.30rem; height:1.10rem; }
.app-header .logo a,
.app-header .logo img { display:block; width:100%; height:100%; }
.app-header .nav-list { position:absolute; top:0.36rem; left:50%; display:flex; justify-content:center; align-items:center; gap:0.24rem; height:0.52rem; border-radius:0.52rem;; background-color:rgba(0,0,0,0.15); padding:0rem 0.12rem; transform:translate(-50%,0%); }
.app-header .nav { position:relative; display:block; width:1.50rem; height:0.52rem; color:#fff; font-size:0.20rem; font-weight:700; text-align:center; line-height:0.52rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-header .nav::before { content:""; position:absolute; top:0rem; left:0rem; z-index:-1; display:block; width:100%; height:100%; background:url("../images/nav.png?v=20250528") no-repeat 50% 50%; background-size:1.50rem 0.52rem; opacity:0; transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-header .nav::after { content:""; position:absolute; top:0.14rem; right:-0.12rem; display:block; width:1px; height:0.24rem; background-image:linear-gradient(transparent, #fff, transparent); }
.app-header .nav .contact-qrcode-list-wrapper { position:absolute; top:0.52rem; right:-0.76rem; cursor:default; display:block; padding-top:0.12rem; visibility:hidden; opacity:0; transform:translateY(0.08rem); transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-header .nav .contact-qrcode-list { position:relative; display:flex; justify-content:flex-start; align-items:center; gap:0.20rem; border-radius:0.24rem; background-color:rgba(255,255,255,0.90); padding:0.20rem; }
.app-header .nav .contact-qrcode-list::before { content:""; position:absolute; top:-0.12rem; right:1.40rem; display:block; width:0rem; height:0rem; border-width:0rem 0.12rem 0.12rem 0.12rem; border-style:solid; border-color:transparent transparent rgba(255,255,255,0.90) transparent; }
.app-header .nav .contact-qrcode { display:block; }
.app-header .nav .contact-qrcode .contact-qrcode-body { display:block; width:122px; height:114px; }
.app-header .nav .contact-qrcode .contact-qrcode-body img { display:block; width:100%; height:100%; }
.app-header .nav .contact-qrcode .contact-qrcode-footer { display:block; margin-top:8px; color:#333; font-size:16px; text-align:center; line-height:1; }
.app-header .nav:last-child {  }
.app-header .nav:last-child::before {  }
.app-header .nav:last-child::after { content:none; }
.app-header .nav:last-child .contact-qrcode-list-wrapper {  }
.app-header .nav:last-child .contact-qrcode-list {  }
.app-header .nav:last-child .contact-qrcode-list::before {  }
.app-header .nav:last-child .contact-qrcode {  }
.app-header .nav:last-child .contact-qrcode .contact-qrcode-body {  }
.app-header .nav:last-child .contact-qrcode .contact-qrcode-body img {  }
.app-header .nav:last-child .contact-qrcode .contact-qrcode-footer {  }
.app-header .nav:hover { color:#d56d00; }
.app-header .nav:hover::before { opacity:1; }
.app-header .nav:hover::after {  }
.app-header .nav:hover .contact-qrcode-list-wrapper { visibility:visible; opacity:1; transform:translateY(0rem); }
.app-header .nav:hover .contact-qrcode-list {  }
.app-header .nav:hover .contact-qrcode-list::before {  }
.app-header .nav:hover .contact-qrcode {  }
.app-header .nav:hover .contact-qrcode .contact-qrcode-body {  }
.app-header .nav:hover .contact-qrcode .contact-qrcode-body img {  }
.app-header .nav:hover .contact-qrcode .contact-qrcode-footer {  }
.app-header .nav.active { color:#d56d00; }
.app-header .nav.active::before { opacity:1; }
.app-header .nav.active::after {  }
.app-header .nav.active .contact-qrcode-list-wrapper {  }
.app-header .nav.active .contact-qrcode-list {  }
.app-header .nav.active .contact-qrcode-list::before {  }
.app-header .nav.active .contact-qrcode {  }
.app-header .nav.active .contact-qrcode .contact-qrcode-body {  }
.app-header .nav.active .contact-qrcode .contact-qrcode-body img {  }
.app-header .nav.active .contact-qrcode .contact-qrcode-footer {  }

.app-body { position:relative; z-index:1; display:block; width:100%; height:100%; }
.app-body .swiper { display:block; width:100%; height:100%; }
.app-body .scroll-tips { position:absolute; bottom:0.30rem; left:50%; z-index:2; display:block; width:1.22rem; height:0.58rem; background:url("../images/scroll-tips.png?v=20250528") no-repeat 50% 50%; background-size:1.22rem 0.58rem; margin-left:-0.61rem; color:transparent; font-size:0rem; text-align:center; line-height:0.58rem; animation:floating 2s linear infinite; }
.app-body .page { position:relative; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }
.app-body .page.page1 { background-image:url("../images/bg1.jpg?v=20250528"); }
.app-body .page.page1 .slogan { position:absolute; top:4.40rem; left:50%; display:block; width:8.46rem; height:3.32rem; background:url("../images/slogan.png?v=20250528") no-repeat 50% 50%; background-size:8.46rem 3.32rem; margin-left:-4.23rem; }
.app-body .page.page1 .btn-movie { position:absolute; top:4.78rem; left:50%; z-index:2; display:block; width:1.22rem; height:1.22rem; border-radius:50%; background-image:url("../images/icon-play-movie.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:1.22rem 1.22rem; margin-left:-0.66rem; animation:breathing 2s linear infinite; }
.app-body .page.page1 .download { position:absolute; top:8.36rem; left:50%; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0.02rem; margin-left:-3.25rem; }
.app-body .page.page1 .download .qrcode { display:block; width:1.42rem; height:1.20rem; background-image:url("../images/download-qrcode.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:1.42rem 1.20rem; padding:0.08rem 0.08rem 0.08rem 0.30rem; }
.app-body .page.page1 .download .qrcode img { display:block; width:100%; height:100%; }
.app-body .page.page1 .download .btn-list { display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; width:5.06rem; height:1.20rem; gap:0.02rem; }
.app-body .page.page1 .download .btn { position:relative; display:block; width:1.66rem; height:0.58rem; background-image:url("../images/download-btns.png?v=20250528"); background-repeat:no-repeat; background-size:5.06rem 1.20rem; overflow:hidden; color:transparent; font-size:0rem; text-align:center; line-height:0.58rem; }
.app-body .page.page1 .download .btn::after { content:""; position:absolute; top:0rem; left:-100%; width:100%; height:100%; background-image:linear-gradient(-45deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 80%); }
.app-body .page.page1 .download .btn:hover {  }
.app-body .page.page1 .download .btn:hover::after { left:100%; transition:left 2s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page1 .download .btn.btn-ios { background-position:0rem 0rem; }
.app-body .page.page1 .download .btn.btn-taptap { background-position:-1.70rem 0rem; }
.app-body .page.page1 .download .btn.btn-ps { background-position:-3.40rem 0rem; }
.app-body .page.page1 .download .btn.btn-android { background-position:0rem -0.62rem; }
.app-body .page.page1 .download .btn.btn-wegame { background-position:-1.70rem -0.62rem; }
.app-body .page.page1 .download .btn.btn-ns { background-position:-3.40rem -0.62rem; }
.app-body .page.page2 { background-image:url("../images/bg2.jpg?v=20250528"); }
.app-body .page.page2 .content { position:absolute; top:50%; left:50%; display:block; width:15.22rem; height:7.68rem; background:url("../images/page-content2.png?v=20250528") no-repeat 0rem 0rem; background-size:6.50rem 7.68rem; margin-left:-7.61rem; margin-top:-3.84rem; padding-left:5.90rem; }
.app-body .page.page2 .top-news-list { display:flex; justify-content:flex-start; align-items:flex-start; gap:0.22rem; width:auto; height:3.26rem; }
.app-body .page.page2 .top-news-list .empty { display:flex; justify-content:center; align-items:center; width:100%; height:100%; border-radius:0.36rem; background-color:#fff; box-shadow:0rem 0.03rem 0rem 0rem rgba(255,255,255,0.45); padding:0.16rem; color:#bfbfbf; font-size:0.16rem; text-align:center; line-height:0.24rem; }
.app-body .page.page2 .top-news { display:block; width:2.96rem; border-radius:0.36rem; background-color:#fff; box-shadow:0rem 0.03rem 0rem 0rem rgba(255,255,255,0.45); padding:0.16rem; overflow:hidden; }
.app-body .page.page2 .top-news .top-news-header { display:block; width:auto; height:1.94rem; border-radius:0.24rem; overflow:hidden; }
.app-body .page.page2 .top-news .top-news-header img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.0); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .top-news .top-news-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; height:0.48rem; margin-top:0.16rem; padding:0rem 0.08rem; overflow:hidden; color:#333; font-size:0.16rem; text-overflow:ellipsis; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .top-news .top-news-footer { display:flex; justify-content:space-between; align-items:center; margin-top:0.16rem; padding:0rem 0.08rem; color:#666; font-size:0.14rem; line-height:0.20rem; }
.app-body .page.page2 .top-news .top-news-footer::after { content:""; display:block; width:0.12rem; height:0.12rem; border-width:0.03rem 0.03rem 0rem 0rem; border-style:solid; border-color:#666; transform:rotate(45deg); }
.app-body .page.page2 .top-news:hover {  }
.app-body .page.page2 .top-news:hover .top-news-header {  }
.app-body .page.page2 .top-news:hover .top-news-header img { transform:scale(1.1); }
.app-body .page.page2 .top-news:hover .top-news-body { color:#9d3e1e; }
.app-body .page.page2 .top-news:hover .top-news-footer {  }
.app-body .page.page2 .top-news:hover .top-news-footer .when {  }
.app-body .page.page2 .top-news:hover .top-news-footer .arrow {  }
.app-body .page.page2 .news-tabs { display:block; border-radius:0.36rem; background-color:#fff; box-shadow:0rem 0.03rem 0rem 0rem rgba(255,255,255,0.45); margin-top:0.40rem; padding:0.16rem; overflow:hidden; }
.app-body .page.page2 .news-tabs-header { display:flex; justify-content:flex-start; align-items:center; width:auto; height:0.60rem; border-radius:0.24rem; background-color:#ffcf26; padding:0rem 0.24rem; }
.app-body .page.page2 .news-tabs-header-scroller { flex:1; display:flex; justify-content:flex-start; align-items:center; }
.app-body .page.page2 .news-tabs-header-links { display:flex; justify-content:flex-end; align-items:center; margin-left:0.24rem; }
.app-body .page.page2 .news-tabs-header-links a { display:block; height:0.60rem; color:#333; font-size:0.16rem; font-weight:700; text-align:center; line-height:0.60rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news-tabs-header-links a:hover { color:#9d3e1e; }
.app-body .page.page2 .news-tabs-body {  }
.app-body .page.page2 .news-tabs-tab { position:relative; display:flex; justify-content:center; align-items:center; width:1.52rem; height:0.60rem; background-image:url("../images/news-tabs-tab-texture.png?v=20250528"); background-repeat:no-repeat; background-position:50% -0.44rem; background-size:0.76rem 0.44rem; overflow:hidden; transition:background-position 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news-tabs-tab .icon { display:block; width:0rem; height:0.36rem; background-image:url("../images/news-tabs-tab-icons.png?v=20250528"); background-repeat:no-repeat; background-position:0rem 0rem; background-size:1.44rem 0.36rem; margin-right:0rem; transition:width 0.8s cubic-bezier(0.23,1,0.32,1), margin-right 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news-tabs-tab .icon.icon-new { background-position:0rem 0rem; }
.app-body .page.page2 .news-tabs-tab .icon.icon-notice { background-position:-0.36rem 0rem; }
.app-body .page.page2 .news-tabs-tab .icon.icon-news { background-position:-0.72rem 0rem; }
.app-body .page.page2 .news-tabs-tab .icon.icon-strategy { background-position:-1.08rem 0rem; }
.app-body .page.page2 .news-tabs-tab span { display:block; color:#333; font-size:0.20rem; font-weight:700; text-align:center; line-height:1; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news-tabs-tab::after { content:""; position:absolute; top:50%; right:0rem; display:block; width:1px; height:0.24rem; background-image:linear-gradient(transparent, #f2a91c, transparent); margin-top:-0.12rem; }
.app-body .page.page2 .news-tabs-tab:last-child {  }
.app-body .page.page2 .news-tabs-tab:last-child .icon {  }
.app-body .page.page2 .news-tabs-tab:last-child .icon.icon-new {  }
.app-body .page.page2 .news-tabs-tab:last-child .icon.icon-notice {  }
.app-body .page.page2 .news-tabs-tab:last-child .icon.icon-news {  }
.app-body .page.page2 .news-tabs-tab:last-child .icon.icon-strategy {  }
.app-body .page.page2 .news-tabs-tab:last-child span {  }
.app-body .page.page2 .news-tabs-tab:last-child::after { content:none; }
.app-body .page.page2 .news-tabs-tab:hover { background-position:50% 0rem; }
.app-body .page.page2 .news-tabs-tab:hover .icon { width:0.36rem; margin-right:0.04rem; }
.app-body .page.page2 .news-tabs-tab:hover .icon.icon-new {  }
.app-body .page.page2 .news-tabs-tab:hover .icon.icon-notice {  }
.app-body .page.page2 .news-tabs-tab:hover .icon.icon-news {  }
.app-body .page.page2 .news-tabs-tab:hover .icon.icon-strategy {  }
.app-body .page.page2 .news-tabs-tab:hover span { color:#9d3e1e; }
.app-body .page.page2 .news-tabs-tab:hover::after {  }
.app-body .page.page2 .news-tabs-tab.active { background-position:50% 0rem; }
.app-body .page.page2 .news-tabs-tab.active .icon { width:0.36rem; margin-right:0.04rem; }
.app-body .page.page2 .news-tabs-tab.active .icon.icon-new {  }
.app-body .page.page2 .news-tabs-tab.active .icon.icon-notice {  }
.app-body .page.page2 .news-tabs-tab.active .icon.icon-news {  }
.app-body .page.page2 .news-tabs-tab.active .icon.icon-strategy {  }
.app-body .page.page2 .news-tabs-tab.active span { color:#9d3e1e; }
.app-body .page.page2 .news-tabs-tab.active::after {  }
.app-body .page.page2 .news-list { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0.16rem; width:auto; height:2.88rem; margin-top:0.16rem; }
.app-body .page.page2 .news-list .empty { display:flex; justify-content:center; align-items:center; width:100%; height:100%; color:#bfbfbf; font-size:0.16rem; text-align:center; line-height:0.24rem; }
.app-body .page.page2 .news { display:flex; justify-content:flex-start; align-items:center; width:auto; height:0.60rem; border-radius:0.24rem; background-color:#ecf0f3; padding:0rem 0.24rem; }
.app-body .page.page2 .news .news-header { position:relative; display:block; margin-right:0.16rem; padding-right:0.16rem; color:#333; font-size:0.16rem; font-weight:700; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news .news-header::after { content:""; position:absolute; top:50%; right:0rem; display:block; width:1px; height:0.24rem; background-image:linear-gradient(transparent, #c3c4c5, transparent); margin-top:-0.12rem; }
.app-body .page.page2 .news .news-body { flex:1; display:block; overflow:hidden; color:#333; font-size:0.16rem; white-space:nowrap; text-overflow:ellipsis; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news .news-footer { display:block; margin-left:0.16rem; color:#666; font-size:0.16rem; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page2 .news:hover {  }
.app-body .page.page2 .news:hover .news-header { color:#9d3e1e; }
.app-body .page.page2 .news:hover .news-header::after {  }
.app-body .page.page2 .news:hover .news-body { color:#9d3e1e; }
.app-body .page.page2 .news:hover .news-footer {  }
.app-body .page.page3 { background-image:url("../images/bg3.jpg?v=20250528"); }
.app-body .page.page3 .content { position:absolute; top:50%; left:50%; display:block; width:16.60rem; height:8.20rem; background:url("../images/page-content3.png?v=20250528") no-repeat 100% 0rem; background-size:9.00rem 8.20rem; margin-left:-8.30rem; margin-top:-4.10rem; padding-right:7.32rem; }
.app-body .page.page3 .gameplay-tabs { display:block; }
.app-body .page.page3 .gameplay-tabs-header { display:flex; justify-content:flex-start; align-items:center; gap:0.64rem; width:100%; height:0.40rem; padding:0rem 0.16rem; }
.app-body .page.page3 .gameplay-tabs-header-scroller { flex:1; display:flex; justify-content:flex-start; align-items:center; gap:0.64rem; overflow:hidden; }
.app-body .page.page3 .gameplay-tabs-body { display:block; margin-top:0.16rem; }
.app-body .page.page3 .gameplay-tabs-tab { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; width:1.36rem; height:0.40rem; color:#fff; font-size:0.20rem; font-weight:700; text-align:center; line-height:0.40rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .gameplay-tabs-tab::before { content:""; position:absolute; top:0rem; left:0rem; z-index:-1; display:block; width:100%; height:100%; background-image:url("../images/gameplay-tabs-tab.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:1.36rem 0.40rem; opacity:0; transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .gameplay-tabs-tab::after { content:""; position:absolute; top:50%; right:-0.32rem; display:block; width:1px; height:0.24rem; background-image:linear-gradient(transparent, #fff, transparent); margin-top:-0.12rem; }
.app-body .page.page3 .gameplay-tabs-tab:last-child {  }
.app-body .page.page3 .gameplay-tabs-tab:last-child::before {  }
.app-body .page.page3 .gameplay-tabs-tab:last-child::after { content:none; }
.app-body .page.page3 .gameplay-tabs-tab:hover {  }
.app-body .page.page3 .gameplay-tabs-tab:hover::before { opacity:1; }
.app-body .page.page3 .gameplay-tabs-tab:hover::after {  }
.app-body .page.page3 .gameplay-tabs-tab.active {  }
.app-body .page.page3 .gameplay-tabs-tab.active::before { opacity:1; }
.app-body .page.page3 .gameplay-tabs-tab.active::after {  }
.app-body .page.page3 .gameplay-sub-tabs { display:block; border-radius:0.36rem; background-color:#fff; box-shadow:0rem 0.03rem 0rem 0rem rgba(255,255,255,0.45); padding:0.16rem; }
.app-body .page.page3 .gameplay-sub-tabs-header { display:flex; justify-content:flex-start; align-items:center; gap:0.10rem; width:100%; height:0.40rem; }
.app-body .page.page3 .gameplay-sub-tabs-header-scroller { flex:1; display:flex; justify-content:flex-start; align-items:center; gap:0.06rem; overflow:hidden; }
.app-body .page.page3 .gameplay-sub-tabs-header-scroller .empty { flex:1; display:block; width:100%; height:0.40rem; border-radius:0.12rem; background-color:#e3e4eb; padding:0rem 0.16rem; overflow:hidden; color:#bfbfbf; font-size:0.16rem; white-space:nowrap; text-align:center; text-overflow:ellipsis; line-height:0.40rem; }
.app-body .page.page3 .gameplay-sub-tabs-body { display:block; margin-top:0.16rem }
.app-body .page.page3 .gameplay-sub-tabs-body .empty { display:flex; justify-content:center; align-items:center; width:100%; height:4.60rem; color:#bfbfbf; font-size:0.16rem; text-align:center; line-height:0.24rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-prev,
.app-body .page.page3 .gameplay-sub-tabs-btn-next { display:block; width:0.24rem; height:0.30rem; background-image:url("../images/gameplay-sub-tabs-btns.png?v=20250528"); background-repeat:no-repeat; background-size:0.48rem 0.60rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-prev { background-position:0rem 0rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-prev:hover { background-position:0rem -0.30rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-prev.disabled,
.app-body .page.page3 .gameplay-sub-tabs-btn-prev.disabled:hover { cursor:not-allowed; background-position:0rem 0rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-next { background-position:-0.24rem 0rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-next:hover { background-position:-0.24rem -0.30rem; }
.app-body .page.page3 .gameplay-sub-tabs-btn-next.disabled,
.app-body .page.page3 .gameplay-sub-tabs-btn-next.disabled:hover { cursor:not-allowed; background-position:0rem 0rem; }
.app-body .page.page3 .gameplay-sub-tabs-tab { flex:0 0 auto; position:relative; display:flex; justify-content:center; align-items:center; width:1.64rem; height:0.40rem; border-radius:0.12rem; background-color:#e3e4eb; background-image:url("../images/gameplay-sub-tabs-tab.png?v=20250528"); background-repeat:no-repeat; background-position:100% -0.34rem; background-size:0.72rem 0.34rem; color:#333; font-size:0.18rem; font-weight:700; text-align:center; line-height:0.40rem; transition:background-color 0.8s cubic-bezier(0.23,1,0.32,1), background-position 0.8s cubic-bezier(0.23,1,0.32,1), color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .gameplay-sub-tabs-tab:hover { background-color:#ffcf26; background-position:100% 0rem; color:#9d3e1e; }
.app-body .page.page3 .gameplay-sub-tabs-tab.active { background-color:#ffcf26; background-position:100% 0rem; color:#9d3e1e; }
.app-body .page.page3 .top-gameplay { display:block; }
.app-body .page.page3 .top-gameplay .top-gameplay-body { position:relative; display:block; height:4.28rem; border-radius:0.24rem; overflow:hidden; }
.app-body .page.page3 .top-gameplay .top-gameplay-body img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.0); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .top-gameplay .top-gameplay-body::after { content:""; position:absolute; top:0rem; bottom:0rem; left:0rem; right:0rem; display:block; background-color:rgba(0,0,0,0.45); background-image:url("../images/icon-play-big.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:1.22rem 1.22rem; }
.app-body .page.page3 .top-gameplay .top-gameplay-footer { display:block; margin-top:0.08rem; overflow:hidden; color:#333; font-size:0.16rem; white-space:nowrap; text-align:center; text-overflow:ellipsis; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .top-gameplay:hover {  }
.app-body .page.page3 .top-gameplay:hover .top-gameplay-body {  }
.app-body .page.page3 .top-gameplay:hover .top-gameplay-body img { transform:scale(1.1); }
.app-body .page.page3 .top-gameplay:hover .top-gameplay-body::after {  }
.app-body .page.page3 .top-gameplay:hover .top-gameplay-footer { color:#9d3e1e; }
.app-body .page.page3 .gameplay-list { display:flex; justify-content:flex-start; align-items:center; gap:0.16rem; border-radius:0.36rem; background-color:#fff; box-shadow:0rem 0.03rem 0rem 0rem rgba(255,255,255,0.45); margin-top:0.32rem; padding:0.16rem; }
.app-body .page.page3 .gameplay-list .empty { display:flex; justify-content:center; align-items:center; width:100%; height:1.40rem; color:#bfbfbf; font-size:0.16rem; text-align:center; line-height:0.24rem; }
.app-body .page.page3 .gameplay { display:block; width:2.12rem; }
.app-body .page.page3 .gameplay .gameplay-body { position:relative; display:block; width:100%; height:1.08rem; border-radius:0.24rem; overflow:hidden; }
.app-body .page.page3 .gameplay .gameplay-body img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.0); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .gameplay .gameplay-body::after { content:""; position:absolute; top:0rem; bottom:0rem; left:0rem; right:0rem; display:block; background-color:rgba(0,0,0,0.45); background-image:url("../images/icon-play-small.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:0.52rem 0.52rem; }
.app-body .page.page3 .gameplay .gameplay-footer { display:block; margin-top:0.08rem; overflow:hidden; color:#333; font-size:0.16rem; white-space:nowrap; text-align:center; text-overflow:ellipsis; line-height:0.24rem; transition:color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page3 .gameplay:hover {  }
.app-body .page.page3 .gameplay:hover .gameplay-body {  }
.app-body .page.page3 .gameplay:hover .gameplay-body img { transform:scale(1.1); }
.app-body .page.page3 .gameplay:hover .gameplay-body::after {  }
.app-body .page.page3 .gameplay:hover .gameplay-footer { color:#9d3e1e; }
.app-body .page.page4 { background-image:url("../images/bg4.jpg?v=20250528"); }
.app-body .page.page4 .content { position:absolute; top:1.06rem; left:50%; display:block; width:13.72rem; height:9.74rem; margin-left:-6.86rem; }
.app-body .page.page4 .hero-swiper { display:block; width:100%; height:100%; }
.app-body .page.page4 .hero-swiper .swiper { display:block; width:100%; height:100%; }
.app-body .page.page4 .hero-swiper .swiper .swiper-button-prev,
.app-body .page.page4 .hero-swiper .swiper .swiper-button-next { position:absolute; top:3.20rem; width:0.68rem; height:1.00rem; background-image:url("../images/hero-swiper-button.png?v=20250528"); background-repeat:no-repeat; background-size:1.36rem 1.00rem; margin:0rem; color:transparent; }
.app-body .page.page4 .hero-swiper .swiper .swiper-button-prev { left:0.42rem; background-position:0rem 0rem; }
.app-body .page.page4 .hero-swiper .swiper .swiper-button-next { right:4.80rem; background-position:-0.68rem 0rem; }
.app-body .page.page4 .hero-avatar-swiper { position:absolute; top:6.70rem; left:0.57rem; display:block; width:8.20rem; height:1.74rem; }
.app-body .page.page4 .hero-avatar-swiper .swiper { display:block; width:100%; height:100%; }
.app-body .page.page4 .hero-avatar-swiper .swiper .swiper-wrapper .swiper-slide { position:relative; display:flex; justify-content:center; align-items:center; width:1.64rem; height:1.74rem; }
.app-body .page.page4 .hero-avatar-swiper .swiper .swiper-wrapper .swiper-slide img { cursor:pointer; display:block; width:1.24rem; height:1.32rem; transition:width 0.8s cubic-bezier(0.23,1,0.32,1), height 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page4 .hero-avatar-swiper .swiper .swiper-wrapper .swiper-slide-active {  }
.app-body .page.page4 .hero-avatar-swiper .swiper .swiper-wrapper .swiper-slide-active img { width:1.64rem; height:1.74rem; }
.app-body .page.page4 .hero { position:relative; display:block; width:13.72rem; height:9.74rem; }
.app-body .page.page4 .hero .hero-image { position:absolute; top:0rem; left:0rem; display:block; width:9.34rem; height:9.74rem; }
.app-body .page.page4 .hero .hero-image img { display:block; width:100%; height:100%; }
.app-body .page.page4 .hero .hero-info { position:absolute; top:0rem; right:0rem; display:block; width:4.12rem; height:9.74rem; padding-top:1.80rem; }
.app-body .page.page4 .hero .hero-info .name { display:block; }
.app-body .page.page4 .hero .hero-info .name img { display:block; width:3.78rem; height:1.74rem; }
.app-body .page.page4 .hero .hero-info .career { display:block; margin-top:0.30rem; }
.app-body .page.page4 .hero .hero-info .career img { display:block; width:3.14rem; height:0.58rem; }
.app-body .page.page4 .hero .hero-info .skill-list { display:flex; justify-content:flex-start; align-items:center; gap:0.20rem; margin-top:0.60rem; }
.app-body .page.page4 .hero .hero-info .skill { position:relative; cursor:pointer; display:flex; justify-content:center; align-items:center; width:1.24rem; height:1.24rem; border:0.08rem solid #fff; border-radius:50%; background-color:#088bc1; transition:border-color 0.8s cubic-bezier(0.23,1,0.32,1), background-color 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page4 .hero .hero-info .skill .skill-icon { display:flex; justify-content:center; align-items:center; width:0.88rem; height:0.88rem; transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page4 .hero .hero-info .skill .skill-icon img { display:block; width:100%; height:100%; }
.app-body .page.page4 .hero .hero-info .skill .skill-description { position:absolute; top:1.36rem; display:block; width:4.12rem; border-radius:0.24rem; background-color:rgba(0,0,0,0.15); padding:0.20rem 0.24rem; color:#fff; font-size:0.16rem; text-align:left; line-height:0.24rem; visibility:hidden; opacity:0; transform:translateY(0.08rem); transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-body .page.page4 .hero .hero-info .skill .skill-description::before { content:""; position:absolute; top:-0.12rem; display:block; width:0rem; height:0rem; border-width:0rem 0.12rem 0.12rem 0.12rem; border-style:solid; border-color:transparent transparent rgba(0,0,0,0.15) transparent; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(1) {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(1) .skill-icon {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(1) .skill-icon img {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(1) .skill-description { left:-0.08rem; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(1) .skill-description::before { left:0.50rem; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(2) {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(2) .skill-icon {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(2) .skill-icon img {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(2) .skill-description { left:-1.52rem; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(2) .skill-description::before { left:1.94rem; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(3) {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(3) .skill-icon {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(3) .skill-icon img {  }
.app-body .page.page4 .hero .hero-info .skill:nth-child(3) .skill-description { left:-2.96rem; }
.app-body .page.page4 .hero .hero-info .skill:nth-child(3) .skill-description::before { left:3.38rem; }
.app-body .page.page4 .hero .hero-info .skill:hover { border-color:#ffcf26; background-image:linear-gradient(150deg, #ff6e02, #fbc33c); }
.app-body .page.page4 .hero .hero-info .skill:hover .skill-icon { transform:scale(1.1); }
.app-body .page.page4 .hero .hero-info .skill:hover .skill-icon img {  }
.app-body .page.page4 .hero .hero-info .skill:hover .skill-description {  }
.app-body .page.page4 .hero .hero-info .skill:hover .skill-description::before {  }
.app-body .page.page4 .hero .hero-info .skill.active { border-color:#ffcf26; background-image:linear-gradient(150deg, #ff6e02, #fbc33c); }
.app-body .page.page4 .hero .hero-info .skill.active .skill-icon { transform:scale(1.1); }
.app-body .page.page4 .hero .hero-info .skill.active .skill-icon img {  }
.app-body .page.page4 .hero .hero-info .skill.active .skill-description { visibility:visible; opacity:1; transform:translateY(0rem); }
.app-body .page.page4 .hero .hero-info .skill.active .skill-description::before {  }

.app-footer { position:absolute; bottom:-100%; left:0rem; right:0rem; z-index:2; display:block; width:100%; background-color:#141414; padding:0.50rem 0rem; transition:bottom 0.8s cubic-bezier(0.23,1,0.32,1); }
.app-footer .content { display:flex; justify-content:flex-start; align-items:center; width:12.00rem; margin:0 auto; }
.app-footer .content .logo {  }
.app-footer .content .logo img { display:block; width:2.14rem; height:0.58rem; }
.app-footer .content .copyright { position:relative; display:block; margin-left:0.32rem; padding-left:0.32rem; }
.app-footer .content .copyright p { display:block; color:#fff; font-size:0.14rem; line-height:0.20rem; }
.app-footer .content .copyright::before { content:""; position:absolute; top:0rem; bottom:0rem; left:0rem; display:block; width:1px; background-image:linear-gradient(transparent, #434343, transparent); }
.app-footer.active { bottom:0rem; }
.app-footer.active .content {  }
.app-footer.active .content .logo {  }
.app-footer.active .content .logo img {  }
.app-footer.active .content .copyright {  }
.app-footer.active .content .copyright p {  }
.app-footer.active .content .copyright::before {  }

.download-side { position:fixed; top:3.32rem; right:-1.78rem; z-index:3; transition:right 0.8s cubic-bezier(0.23,1,0.32,1); }
.download-side .trigger { position:absolute; top:0.96rem; right:1.78rem; z-index:2; display:block; width:0.56rem; height:0.72rem; background:url("../images/download-side-trigger.png?v=20250528") no-repeat 0rem 0rem; background-size:1.12rem 0.72rem; }
.download-side .content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0.08rem; width:1.78rem; height:3.28rem; border-radius:0.32rem 0rem 0rem 0.32rem; background-color:#fff; filter:drop-shadow(-0.04rem 0.08rem 0.04rem rgba(0,0,0,0)); transition:filter 0.8s cubic-bezier(0.23,1,0.32,1); }
.download-side .content::before { content:""; position:absolute; top:0rem; left:0rem; z-index:1; display:block; width:120%; height:100%; border-radius:0.32rem 0rem 0rem 0.32rem; background-color:#86cce6; transform:rotate(0deg); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.download-side .content::after { content:""; position:absolute; top:0rem; left:0rem; z-index:1; display:block; width:120%; height:100%; border-radius:0.32rem 0rem 0rem 0.32rem; background-color:#fff; background-image:linear-gradient(#fff, #e5fafe); transform:rotate(0deg); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.download-side .content .qrcode { position:relative; z-index:2; display:block; width:1.48rem; height:1.74rem; background-image:url("../images/download-side-qrcode.png?v=20250528"); background-repeat:no-repeat; background-position:50% 50%; background-size:1.48rem 1.74rem; padding:0.10rem 0.10rem 0.36rem 0.10rem; }
.download-side .content .qrcode img { display:block; width:100%; height:100%; }
.download-side .content .btn-list { position:relative; z-index:2; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; width:1.50rem; height:1.04rem; gap:0.02rem; }
.download-side .content .btn { position:relative; display:block; width:1.50rem; height:0.48rem; background-image:url("../images/download-side-btns.png?v=20250528"); background-repeat:no-repeat; background-size:1.50rem 1.04rem; overflow:hidden; color:transparent; font-size:0rem; text-align:center; line-height:0.58rem; }
.download-side .content .btn::after { content:""; position:absolute; top:0rem; left:-100%; width:100%; height:100%; background-image:linear-gradient(-45deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 80%); }
.download-side .content .btn:hover {  }
.download-side .content .btn:hover::after { left:100%; transition:left 2s cubic-bezier(0.23,1,0.32,1); }
.download-side .content .btn.btn-ios { background-position:0rem 0rem; }
.download-side .content .btn.btn-android { background-position:0rem -0.56rem; }
.download-side.active { right:0rem; }
.download-side.active .trigger { background-position:-0.56rem 0rem; }
.download-side.active .content { filter:drop-shadow(-0.04rem 0.08rem 0.04rem rgba(0,0,0,0.10)); }
.download-side.active .content::before { transform:rotate(5deg); }
.download-side.active .content::after { transform:rotate(0deg); }
.download-side.active .content .qrcode {  }
.download-side.active .content .qrcode img {  }
.download-side.active .content .btn-list {  }
.download-side.active .content .btn {  }
.download-side.active .content .btn.btn-ios {  }
.download-side.active .content .btn.btn-android {  }

.btn-cadpa { position:absolute; bottom:0.64rem; left:0.36rem; z-index:3; display:block; width:1.14rem; height:1.46rem; background:url("../images/btn-cadpa.png?v=20250528") no-repeat 50% 50%; background-size:1.14rem 1.46rem; color:transparent; font-size:0rem; text-align:center; line-height:1.46rem; }

.btn-subscribe-float { position:absolute; bottom:1.40rem; right:0.36rem; z-index:3; display:block; width:2.56rem; height:3.12rem; background:url("../images/btn-subscribe-float.png?v=20250528") no-repeat 50% 50%; background-size:2.56rem 3.12rem; color:transparent; font-size:0rem; text-align:center; line-height:3.12rem; }

.btn-copyright { position:absolute; bottom:0.64rem; right:1.20rem; z-index:3; display:block; width:0.96rem; height:0.40rem; background:url("../images/btn-copyright.png?v=20250528") no-repeat 0rem 0rem; background-size:0.96rem 0.80rem; color:transparent; font-size:0rem; text-align:center; line-height:0.40rem; }
.btn-copyright.active { background-position:0rem -0.40rem; }

/* 适龄提示 */
.dialog-cadpa { position:relative; display:block; width:10.54rem; height:6.46rem; background:url("../images/dialog-cadpa.png?v=20250528") no-repeat 50% 0%; background-size:10.54rem 6.46rem; padding:0.64rem 0.60rem 0.60rem 0.60rem; }
.dialog-cadpa .title { display:block; color:#eb832d; font-size:0.36rem; font-weight:700; text-align:center; line-height:1; }
.dialog-cadpa .content { display:block; margin-top:0.65rem; }
.dialog-cadpa .content p { display:block; color:#47586e; font-size:0.20rem; text-align:left; line-height:0.32rem; }
.dialog-cadpa .content p + p { margin-top:0.20rem; }
.dialog-cadpa .btn-close { position:absolute; top:0.08rem; right:-0.72rem; display:block; width:0.80rem; height:0.80rem; background:url("../images/dialog-btn-close.png?v=20250528") no-repeat 50% 50%; background-size:0.80rem 0.80rem; }

/* 视频播放 */
.dialog-player { position:relative; display:block; width:9.90rem; height:5.86rem; background:url("../images/dialog-player.png?v=20250528") no-repeat 50% 0%; background-size:9.90rem 5.86rem; padding:0.27rem 0.23rem 0.27rem 0.23rem; }
.dialog-player .content { display:block; width:100%; height:100%; }
.dialog-player .content video { display:block; width:100%; height:100%; border-radius:0.40rem; border:none; background-color:#000; overflow:hidden; }
.dialog-player .content iframe { display:block; width:100%; height:100%; border-radius:0.40rem; border:none; background-color:#000; overflow:hidden; }
.dialog-player .btn-close { position:absolute; top:-0.50rem; right:-0.70rem; display:block; width:0.80rem; height:0.80rem; background:url("../images/dialog-btn-close.png?v=20250528") no-repeat 50% 50%; background-size:0.80rem 0.80rem; }

/* 动画 */
@keyframes breathing {
  0% { opacity:1; transform:scale(1); }
  50% { opacity:0.65; transform:scale(0.95); }
  100% { opacity:1; transform:scale(1); }
}

@keyframes floating {
  0% { transform:translateY(0rem); opacity:1; }
  50% { transform:translateY(0.08rem); opacity:0.5; }
  100% { transform:translateY(0rem); opacity:1; }
}