* { padding: 0; margin: 0; box-sizing: border-box; } :root { --ui-scale: 1; --faq-pc-scale: 1; --order-pc-scale: 1; } html { width: 100%; height: 100%; overflow: auto; } body { margin: 0; /* 清除浏览器默认的外边距 */ width: 100%; min-height: 100%; overflow: auto; font-family: Arial, sans-serif; background: #000; color: #fff; position: relative; font-family: "SourceHanSansCN", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; transition: font-size 0.2s ease-in-out; } @font-face { font-family: 'XiQueguzidian'; src: url('https://media.game-tree.com/media/pictures/gametree/sultan/assets/fonts/XiQueguzidian.subset.20260616.woff2') format('woff2'); font-display: swap; } @media (min-width: 769px) { ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } ::-webkit-scrollbar-corner { background: transparent; } } .span_bottom span { display: inline-block; vertical-align: bottom; line-height: 1; } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6, strong { font-weight: normal; } img { border: 0; } ol, ul { list-style: none; } a { text-decoration: none; outline: none; border: none; color: #fff; -webkit-tap-highlight-color: #fff; -webkit-tap-highlight-color: transparent; } input, textarea { border: none; outline: none; background: none; padding: 0; appearance: none; } #fullpage { width: 100%; max-width: 1920px; /* 2. 限制内容区最大宽度为 1920px */ margin: 0 auto; position: relative; } .pages { width: 100%; } /* 整屏 */ .screen { width: 100%; height: 100vh; position: relative; overflow: hidden; } .nav_pop { position: fixed; inset: 0; } /* footer */ .footer { width: 100%; height: 95px; background: #161616; display: flex; align-items: center; justify-content: center; color: #aeaeae; font-size: 14px; gap: 55px; } .footer .logo { width: 90px; } .footer .footer_agreement_row { margin-bottom: 5px; display: flex; align-items: center; font-size: 18px; gap: 30px; } .footer .footer_agreement_row .line { width: 1px; height: 18px; background-color: #aeaeae; } .footer .reg { border-top: 1px solid #adadad; padding-top: 5px; } /* footer 移动端适配 */ @media screen and (max-width: 767px) { .footer { height: 1rem; padding: 0.3rem 0.2rem; gap: 0.2rem; } .footer .logo { width: 0.9rem; } .footer .footer_agreement_row { margin-bottom: 0.1rem; font-size: 0.16rem; gap: 0.2rem; } .footer .footer_agreement_row .line { width: 1px; height: 0.16rem; } .footer .reg { padding-top: 0.1rem; font-size: 0.12rem; } } @media (max-width: 768px) { /* 移动端隐藏滚动条 */ * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; } /* 移动端自然滚动 */ #fullpage { overflow: auto; } .pages { transform: none !important; transition: none; } .screen { height: auto; } .title { font-size: 42px; } .desc { font-size: 16px; } .cards { flex-direction: column; top: auto; bottom: 40px; transform: translateX(-50%); } } .btn_hover { will-change: filter, top; transform-style: preserve-3d; position: relative; top: 0; transition: top 0.3s ease, filter 0.3s ease, opacity 0.3s ease; } .btn_hover:hover { filter: brightness(1.08) drop-shadow(0 0 12px rgba(227, 223, 130, 0.25)); top: -2px; } /* ============================================================ * 首屏加载动画（loader + 背景图入场 + UI 元素错时上浮） * ------------------------------------------------------------ * 状态机（由 loader.js 切换 的 class）： * is-loading → 显示 loader，隐藏首屏 .bg 与 UI 元素 * is-bg-ready → loader 淡出，.bg 淡入并轻微缩放归位 * is-ui-ready → 各 UI 区块按 stagger-delay 依次淡入上浮 * * 兜底：loader.js 内有 4s 强制进入；JS 完全失败时， * 下方 fallback @keyframes 会在 ~20s 后强制把 UI 显示出来 * ============================================================ */ /* ---------- loader 本体 ---------- */ .page-loader { position: fixed; inset: 0; z-index: 99999; background: #0a0805; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s ease, visibility 0s linear 0.6s; } html.is-loading .page-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; } .page-loader__spinner { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(240, 207, 118, 0.18); border-top-color: #f0cf76; animation: page-loader-spin 1s linear infinite; } .page-loader__text { color: #f0cf76; font-size: 13px; letter-spacing: 3px; opacity: 0.75; text-transform: uppercase; } @keyframes page-loader-spin { to { transform: rotate(360deg); } } /* ---------- 首屏背景图：初始隐藏 + 轻微放大，ready 后归位 ---------- */ /* section1.less / section1.mobile.less 中 .bg 已定义 transition， * 这里只覆盖初始态，让原有 transition 自然接管入场动画。 */ html.is-loading .section1 .pc_wrap .bg, html.is-loading .section1 .mb_wrap .bg { opacity: 0; transform: scale(1.06); } /* ---------- 首屏 UI 元素：默认隐藏（防 JS 异常时露馅） ---------- * 选 .pc_wrap 与 .mb_wrap 的直接子区块，整块同步进出，省去逐元素调参。 * * !!! 重要：这里只能用 opacity，不能用 transform !!! * 原因 1：transform 会让元素成为后代 absolute 的 containing block， * .left / .right 内部的 .logo / .go_store_wrap 等 absolute 子元素会错位。 * 原因 2：.center_bottom / .bottom_wrap 自身已经有 transform 做定位（居中 / 偏移）， * 覆盖会丢失原始定位。 * 想要"上浮"质感请配合 stagger-delay + 略长 ease-out，靠时序感弥补。 */ .section1 .pc_wrap > .left, .section1 .pc_wrap > .center_bottom, .section1 .pc_wrap > .right, .section1 .mb_wrap > .logo, .section1 .mb_wrap > .get_more_wrap, .section1 .mb_wrap > .login_status_wrap, .section1 .mb_wrap > .switch_lang_wrap, .section1 .mb_wrap > .bottom_wrap { opacity: 0; transition: opacity 0.9s ease-out; will-change: opacity; } /* ui-ready：所有 UI 元素回归 */ html.is-ui-ready .section1 .pc_wrap > .left, html.is-ui-ready .section1 .pc_wrap > .center_bottom, html.is-ui-ready .section1 .pc_wrap > .right, html.is-ui-ready .section1 .mb_wrap > .logo, html.is-ui-ready .section1 .mb_wrap > .get_more_wrap, html.is-ui-ready .section1 .mb_wrap > .login_status_wrap, html.is-ui-ready .section1 .mb_wrap > .switch_lang_wrap, html.is-ui-ready .section1 .mb_wrap > .bottom_wrap { opacity: 1; } /* ---------- stagger delay：PC ---------- */ .section1 .pc_wrap > .left { transition-delay: 0.05s; } .section1 .pc_wrap > .right { transition-delay: 0.15s; } .section1 .pc_wrap > .center_bottom { transition-delay: 0.28s; } /* ---------- stagger delay：Mobile ---------- */ .section1 .mb_wrap > .logo { transition-delay: 0.05s; } .section1 .mb_wrap > .get_more_wrap { transition-delay: 0.12s; } .section1 .mb_wrap > .login_status_wrap { transition-delay: 0.18s; } .section1 .mb_wrap > .switch_lang_wrap { transition-delay: 0.24s; } .section1 .mb_wrap > .bottom_wrap { transition-delay: 0.32s; } /* ---------- 兜底 fallback：JS 完全失效时，20s 后强制显示 UI ---------- * 仅作为安全网，正常路径下 transition 已经先于此动画把元素显示出来。 */ @keyframes page-loader-ui-fallback { to { opacity: 1; } } .section1 .pc_wrap > .left, .section1 .pc_wrap > .center_bottom, .section1 .pc_wrap > .right, .section1 .mb_wrap > .logo, .section1 .mb_wrap > .get_more_wrap, .section1 .mb_wrap > .login_status_wrap, .section1 .mb_wrap > .switch_lang_wrap, .section1 .mb_wrap > .bottom_wrap { animation: page-loader-ui-fallback 0s linear 20s forwards; } /* ui-ready 时取消 fallback，避免与 transition 重复 */ html.is-ui-ready .section1 .pc_wrap > .left, html.is-ui-ready .section1 .pc_wrap > .center_bottom, html.is-ui-ready .section1 .pc_wrap > .right, html.is-ui-ready .section1 .mb_wrap > .logo, html.is-ui-ready .section1 .mb_wrap > .get_more_wrap, html.is-ui-ready .section1 .mb_wrap > .login_status_wrap, html.is-ui-ready .section1 .mb_wrap > .switch_lang_wrap, html.is-ui-ready .section1 .mb_wrap > .bottom_wrap { animation: none; }