/* ==================================================================
 * Roco Kingdom Creator Recruitment - PC 页面
 * 设计稿：2560 × 5640（footer 到 6067）
 * rem 适配：JS 中 documentElement.fontSize = viewport / 2560 * 100
 *
 * ★ 布局策略：符合 W3C 语义化标准
 *   - 按 JSON meta.group 划分板块（header / section_1~3 / rules / footer）
 *   - 使用 <header> <main> <section> <footer> <nav> <ul>/<ol> <li> <h2/h3> <p>
 *   - 主体采用文档流 + Flexbox 布局；section 之间用 margin/padding 控制间距
 *   - 仅"装饰性覆盖元素"（羽毛笔、竖装饰线）保留 position:absolute
 *
 * ★ 切图清单（依据 JSON exportName）：
 *   -- 整块 --
 *   · bg.jpg              全页面背景（0~5640）
 *   · header.jpg          Hero 主视觉（-50~2510 * -32~1085）
 *   -- header 组 --
 *   · logo.png            (80,34,274,101)
 *   · btn_tohome.png      (2363,26,137,36)  HOME 按钮背景条（文字由 DOM 提供）
 *   · btn_join.png        Hero JOIN NOW 按钮 (416,701,453,110)
 *   -- 通用板块标题 --
 *   · bg_title.png            板块标题背景（roco kingdom 水墨水印，横向纹理）
 *   · ico_title_left.png      标题左侧四芒星装饰
 *   · ico_title_right.png     标题右侧四芒星装饰
 *   -- section_1 组 --
 *   · title_section_1.png     (废弃：改为 bg_title + DOM 文字)
 *   · benefits1/2/3.png / bennefits4.png  4 张权益卡 (362~364 × 356)
 *   -- section_2 组 --
 *   · title_section_2.png     (废弃：改为 bg_title + DOM 文字)
 *   · bg_want_1/2/3.png   3 张招募卡 (586 × 769)
 *   · ico_line_1.png      want 卡内装饰条（已合并进 bg_want_*）
 *   -- section_3 组 --
 *   · title_section_3.png     (废弃：改为 bg_title + DOM 文字)
 *   · ico_process_1/2/3.png   step 徽章 (201×247)
 *   · bg_process_1/2/3.png    step 长条 (1788×227)
 *   · ico_line.png            step 间竖装饰线 (200×554)
 *   · ico_pen.png             羽毛笔 (392×649)
 *   · btn_join_2.png          Join Now 按钮 (643×137)
 *   -- rules 组 --
 *   · bg_rules_title.png  猫头鹰木牌 (448×126)
 *   -- 悬浮 --
 *   · totop.png
 * ================================================================== */

/* ---------- 字体声明 ----------
 * 字体文件位于 demo2/html/fonts/，CSS 在 demo2/html/css/act.css，故相对路径为 ../fonts/
 *
 * · HYYouYuan_105J              → hyyy105j.ttf         （汉仪雅酷黑 105J，用于英文大标题）
 * · FZLanTingYuanSDB1GB-Regular → fzlt-zhongzu.ttf     （方正兰亭圆 中粗，正文/描述）
 * · FZLANTY_ZHONGCUJW--GB1-0    → fzlt-zhongzu.ttf     （同上，PSD 里的别名）
 */
@font-face {
  font-family: "HYYouYuan_105J";
  src: url("../fonts/hyyy105j.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FZLanTingYuanSDB1GB-Regular";
  src: url("../fonts/fzlt-zhongzu.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FZLANTY_ZHONGCUJW--GB1-0";
  src: url("../fonts/fzlt-zhongzu.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "yuanrou";
  src: url("../fonts/yuanrou.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "yuanzhenHeavy";
  src: url("../fonts/yuanzhenheavy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: #1a0f14;
  color: #3d3d3d;
  font-family: "HYYouYuan_105J", "FZLanTingYuanSDB1GB-Regular",
               "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { font-size: 0.24rem; line-height: 1.5; }
img  { display: block; max-width: 100%; border: 0; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 页面容器 ---------- */
.page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #1a0f14;
  overflow: hidden;
}


/* ==================================================================
 * group = "header"  Hero 头部
 * bounds: y 0 ~ 1085
 * ================================================================== */
.hero {
  position: relative;
  width: 100%;
  /* height: 10.85rem; */
  height: 100vh;
  padding-bottom: 1rem;
  box-sizing: border-box;
  background: url("../img/bg_header.jpg") no-repeat center top;
  background-size: cover;
}
.hero::after{
  content: " ";
  display: block;
  width: 100%;
  height: 1.02rem;
  position: absolute;
  bottom: -.1rem;
  left: 0;
  background: url("../img/header_bottom.png") no-repeat center top;
  background-size: 100% 100%;
}
/* Logo (80,34,274,101) */
.hero-logo {
  position: absolute;
  left: 0.8rem;
  top: 0.24rem;
  width: 2.4rem;
  height: 1.1rem;
  background: url("../img/logo.png") no-repeat center/contain;
  cursor: pointer;
  z-index: 3;
}
.JA .hero-logo{
  height: 1.23rem;
  background: url("../img/logo_ja.png") no-repeat center/contain;
}

/* 顶部右侧导航（玩家信息 + HOME 按钮） */
.hero-nav {
  position: absolute;
  top: 0.26rem;
  right: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  z-index: 4;
}

/* HOME 按钮 (2363,26,137×36) —— 背景条 + DOM 文字
 * JSON:
 *   按钮容器 bounds: 2363,26,137×36
 *   文字     bounds: 2388,36,63×16    content="home" align=center
 *   右侧装饰 bounds: 2462,35,25×18    （按钮内箭头，属背景图一部分）
 * 布局策略：flex 居中 + 右侧留出 25px 装饰位，使文字视觉中心 ≈ x2419.5
 */
.hero-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.37rem;
  height: 0.36rem;
  padding: 0 0.25rem 0 0;       /* 右侧 25px 留给背景条内的箭头装饰 */
  box-sizing: border-box;
  background: url("../img/btn_tohome.png") no-repeat center/100% 100%;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease;
  outline: none;
}
.hero-home:hover { transform: translateY(-1px); }
.hero-home-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-size: 0.19rem;            /* JSON textStyle.fontSize=19 */
  color: rgb(61, 61, 61);        /* JSON: #3d3d3d */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
  box-sizing: border-box;
}
.EN .hero-home-text {
  padding-bottom: 0.01rem;
}


/*banenr*/
.header-banner{
  width: 23.33rem;
  height: 9.77rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 1.85rem 0 0 2.75rem;
  background: url("../img/gugu.png") no-repeat center/contain;
}
.header-banner .slogan{
  width: 9.28rem;
  height: 3.29rem;
  background: url("../img/slogan_en.png") no-repeat center/contain;
}
/* Hero JOIN NOW 按钮 (416,701,453,110) */
.hero-discord {
  width: 4.53rem;
  height: 1.1rem;
  margin-top: .5rem;
  margin-left: .1rem;
  background: url("../img/btn_join.png") no-repeat center/100% 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  transition: transform .15s ease;
}
.hero-discord:hover { transform: translateY(-0.03rem); }
.hero-discord-text {
  /* 文字 (561,732,244,37) → 相对按钮 left 145 top 31 */
  margin: 0;
  padding: 0 0.3rem 0.1rem 1.4rem;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.45rem;            /* JSON textStyle.fontSize=45 */
  color: #313030;
  text-transform: uppercase;
}
/* ==================================================================
 * <main> 主内容区
 * ================================================================== */
.main-content {
  display: block;
  width: 100%;
  background: url("../img/bg.jpg") no-repeat top center;
  background-size: 100% auto;
}

/* 通用 section 基类：居中容器 */
.section {
  position: relative;
  width: 100%;
}

/* section 通用标题 —— bg_title.png 底图（roco kingdom 水印）+ DOM 文字 + 左右星形装饰
 * JSON: 标题图层 bounds (495, x, 1573, 183)
 *       文字 HYYouYuan 71.34 rgb(31,31,31) center
 *       四芒星 (左)（右）左右对称装饰
 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.73rem;              /* 设计稿 1573 */
  height: 1.83rem;
  margin: 0 auto;
  background: url("../img/bg_title.png") no-repeat center/contain;
}

/* 标题文字 */
.section-title-text {
  margin-top: 0.4rem;             /* 视觉微调：与四芒星整体下移 */
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;             /* JSON textStyle.fontSize=92 */
  color: transparent;
  background-image: url("../img/title_mask.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.03rem;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 0.05rem;
}

/* 左右星形装饰 —— 使用 ico_title_left / ico_title_right 切图
 * 尺寸参考文字高度 90 → 星形 ≈ 60~70 px；与文字水平间距 ≈ 30 px */
.section-title-star {
  display: inline-block;
  width: 0.66rem;
  height: 0.66rem;
  margin-top: 0.4rem;             /* 与文字保持同步下移 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 0.66rem;
}
.section-title-star-left {
  margin-right: 0.3rem;
  /* JSON 中命名与位置反向：ico_title_right 实际在左侧 (x=795)，ico_title_left 在右侧 (x=1708) */
  background-image: url("../img/ico_title_right.png");
}
.section-title-star-right {
  margin-left: 0.3rem;
  background-image: url("../img/ico_title_left.png");
}


/* ==================================================================
 * group = "section_1"  Creator Benefits
 * bounds: 1256 ~ 2187（高 931）
 * ================================================================== */
.section-benefits {
  padding-top: 1.36rem;         /* 距 hero 底: 1256-1085 = 171 */
  /* 无 padding-bottom：内容自然结束于卡底 y=1881 (icon 底) */
}

/* section_1 标题下间距：卡顶 1525 - 标题底 1439 = 86 */
.section-benefits .section-title {
  margin-bottom: 0.86rem;
}

/* 4 张权益卡片 — 使用 Flex 布局横向排列 */
.benefit-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: .96rem;                  /* 卡片间距：(866-374-362) = 130 */
  padding: 0 3.74rem;           /* 左右外边距 (374 / 2560-736) */
  width: 100%;
}

.benefit {
  flex: 0 0 3.24rem;
  width: 3.24rem;
  height: 3rem;
  text-align: center;
  position: relative;
}
.benefit:last-child { flex-basis: 3.64rem; width: 3.64rem; }

.benefit-icon {
  width: 100%;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.benefit-icon-1 { background-image: url("../img/benefits1.png"); }
.benefit-icon-2 { background-image: url("../img/benefits2.png"); }
.benefit-icon-3 { background-image: url("../img/benefits3.png"); }
.benefit-icon-4 { background-image: url("../img/benefits4.png"); }

/* 卡片标签文字 - JSON: HYYouYuan 72.92, rgb(245,237,226) 奶油白, center
   文字 top 1823 相对卡顶 1525 = 298，即卡内绝对位置；因为已被 icon 撑满
   使用负 margin 上移至木牌位置 */
.benefit-label {
  width: 100%;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.31rem;
  color: #f5edd2;
  line-height: 1;
  text-shadow: 0 0.02rem 0.02rem rgba(76, 75, 75, 0.4);
  position: absolute;
  bottom: 0.05rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: .66rem;
}

/* ==================================================================
 * group = "section_2"  WE WANT YOU
 * bounds: 2049 ~ 3382（高 1333）
 * 与上板块存在重叠：section-benefits 结束 2187 → section-want 起始 2049 → -138
 * ================================================================== */
.section-want {
  margin-top: 1.5rem;          /* want title 顶 2049 - benefits 卡底 1881 = 168 */
}

/* section_2 标题下间距：卡顶 2307 - 标题底 2232 = 75 */
.section-want .section-title {
  margin-bottom: 0.75rem;
}

/* 3 张招募卡 */
.want-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.59rem;                 /* 987-351-586 = 50 (~0.49rem) */
  padding: 0 3.51rem;           /* 卡 1 左 = 351 */
  width: 100%;
}
.want-card {
  flex: 0 0 5.16rem;
  width: 5.16rem;
  height: 6.65rem;
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 5.16rem 6.65rem;
}
.want-card-1 { background-image: url("../img/bg_want_1.png"); }
.want-card-2 { background-image: url("../img/bg_want_2.png"); }
.want-card-3 { background-image: url("../img/bg_want_3.png"); }

/* 卡内文字使用文档流：padding-top 精确控制到设计稿的 y */
.want-card-title {
  padding-top: 3.1rem;          /* 2697 - 2307 = 390 */
  text-align: center;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.48rem;            /* JSON textStyle.fontSize=53 */
  color: #3d3d3d;
  line-height: 1;  
}
.want-card-desc {
  padding-top: 1.9rem;
  text-align: center;
  font-family: "FZLanTingYuanSDB1GB-Regular", "Microsoft YaHei", sans-serif;
  font-size: 0.3rem;            /* JSON textStyle.fontSize=31 */
  color: #3d3d3d;
  line-height: .4rem;
}


/* 招募说明文案：靠左对齐，起始 x=374（对齐主列表 bounds.left） */
.want-rules {
  width: 100%;
  margin-top: 0.49rem;          /* rules 顶 3125 - 卡底 3076 = 49 */
  margin-left: 4.48rem;         /* 主列表 bounds.left = 374 */
  padding-left: 0.22rem;
  font-family: "FZLanTingYuanSDB1GB-Regular", "Microsoft YaHei", sans-serif;
}
.want-rules-main {
  font-size: 0.32rem;
  color: #62605e;
  line-height: 1.4;
}
.want-rules-main > li {
  position: relative;
  padding-left: 0.24rem;
}
.want-rules-main > li::before {
  content: "";
  position: absolute;
  left: -0.12rem;
  top: 0.16rem;
  width: 0.12rem;
  height: 0.12rem;
  background: #62605e;
  border-radius: 50%;
}
.want-rules-sub {
  margin-top: 0.06rem;
  padding-left: 0.2rem;
  font-size: 0.3rem;
  line-height: 1.4;
}
.want-rules-sub li {
  position: relative;
  padding-left: 0.16rem;
}
.want-rules-sub li::before {
  content: "";
  position: absolute;
  left: -0.03rem;
  top: 0.17rem;
  width: 0.06rem;
  height: 0.06rem;
  background: #62605e;
  border-radius: 50%;
}
.want-rules-sub li span{
  color: #d56c1f;
}
.want-rules-tip {
  margin-top: 0.14rem;
  font-size: 0.26rem;
  color: #787673;
  line-height: 1.4;
}


/* ==================================================================
 * group = "section_3"  HOW TO JOIN
 * bounds: 3549 ~ 4811（高 1262）
 * ================================================================== */
.section-join {
  position: relative;
  margin-top: 1.4rem;          /* join 标题顶 3549 - want 结束 3382 = 167 */
}

/* section_3 标题下间距：step 起 3779 - 标题底 3732 = 47; +徽章上突出 11 ≈ 58 */
.section-join .section-title {
  margin-bottom: 0.58rem;
}

/* 3 个 step - 使用 <ol>
 * 设计稿：徽章 icon left=355，长条 bar 右端 = 431+1788 = 2219
 * 组合总宽 = 2219 - 355 = 1864 (= 18.64rem)
 * 左边距 355 / 右边距 341 → 基本对称，使用 margin:0 auto 视觉居中
 */
.join-steps {
  width: 16.66rem;
  margin: 0 auto;
}
.step {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}
.step:last-child { margin-bottom: 0; }

.step-icon {
  flex: 0 0 2.01rem;
  width: 1.8rem;
  height: 2.22rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 3;
  position: relative;
}
.step-1 .step-icon { background-image: url("../img/ico_process_1.png"); }
.step-2 .step-icon { background-image: url("../img/ico_process_2.png"); }
.step-3 .step-icon { background-image: url("../img/ico_process_3.png"); }

.step-bar {
  /* 徽章右缘 x=560、长条左缘 x=431 → 长条相对徽章右缘 -1.29rem 重叠 */
  flex: 1 1 auto;
  height: 2.04rem;
  margin-left: -1.29rem;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16rem 2.04rem;
  display: flex;
  align-items: center;
  z-index: 2;
}
.step-1 .step-bar,
.step-2 .step-bar,
.step-3 .step-bar { background-image: url("../img/bg_process_1.png"); }

.step-text {
  margin-left: 1.5rem;         /* 文字 x=604 相对 bar 左 431 = 173 */
  margin-top: 0.2rem;           /* 视觉微调：文字整体下移 */
  padding-right: .5rem;          /* 避让右侧羽毛笔 */
  font-family: "FZLanTingYuanSDB1GB-Regular", "Microsoft YaHei", sans-serif;
  font-size: 0.4rem;
  color: #3d3d3d;
  line-height: .58rem;
}

/* Join Now 按钮 (955,4649,643,137) 居中 */
.join-btn {
  display: block;
  width: 5.58rem;
  height: 1.17rem;
  margin: 0.65rem auto 0;       /* step3 底 4564 → 按钮顶 4649 = 85 */
  background: url("../img/btn_join_2.png") no-repeat center/contain;
  position: relative;
  cursor: pointer;
  z-index: 3;
  transition: transform .15s ease;
}
.join-btn:hover { transform: scale(1.03); }
.join-btn-text {           /* y=4692 相对 4649 = 43 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: .8rem;
  padding-bottom: .05rem;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.48rem;            /* JSON textStyle.fontSize=48 */
  color: #292828;
  text-transform: uppercase;
  box-sizing: border-box;
}

/* 装饰元素（保留 absolute） */
.join-line-decoration {
  position: absolute;
  left: 3.6rem;
  top: 4.8rem;
  width: 1.77rem;
  height: 4.87rem;
  background: url("../img/ico_line.png") no-repeat center/contain;
  z-index: 1;
  pointer-events: none;
}
.join-pen {
  position: absolute;
  left: 20rem;
  top: 4.1rem;               /* 3927-3549=378 */
  width: 3.74rem;
  height: 6.17rem;
  background: url("../img/ico_pen.png") no-repeat center/contain;
  z-index: 4;
  pointer-events: none;
}


/* ==================================================================
 * group = "rules" + "ruleslist"  Notes
 * bounds: 4851 ~ 5405（高 554）
 * ================================================================== */
.section-notes {
  margin-top: 0.35rem;          /* notes 木牌顶 4851 - join 按钮底 ≈4816 = 35 */
}

/* notes 内容居中容器
 * 组合宽度：正文右缘 2109 - 木牌左缘 356 = 1753，取 18.66rem 与 join-steps 呼应
 * margin: 0 auto 视觉居中 */
.notes-inner {
  width: 16.6rem;
  margin: 0 auto;
  padding-bottom: 1.3rem;
}

.notes-title {
  position: relative;
  width: 4.48rem;
  height: 1.26rem;
  margin-top: 0.78rem;          /* 木牌 y=4929 相对 section 顶 4851 = 78 */
  background: url("../img/bg_rules_title.png") no-repeat center/contain;
}
.notes-title-text {
  position: absolute;
  left: 2.15rem;                /* 文字 x=571 相对木牌 356 = 215 */
  top: 0.54rem;                 /* y=4983 相对木牌 4929 = 54 */
  width: 1.76rem;
  height: 0.36rem;
  text-align: center;
  font-family: "HYYouYuan_105J", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 0.43rem;            /* JSON textStyle.fontSize=43 */
  color: #f5edd2;
  line-height: 0.36rem;
  text-shadow: 0 0.02rem 0.02rem rgba(76, 75, 75, 0.4);
  text-transform: uppercase;
}

.notes-content {
  width: 100%;                  /* 与父容器 .notes-inner 同宽 */
  height: 3.2rem;
  margin-top: 0.27rem;          /* 正文 y=5082 - 木牌底 5055 = 27 */
}
.notes-content-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-right: 0.32rem;
  font-family: "FZLanTingYuanSDB1GB-Regular", "Microsoft YaHei", sans-serif;
  font-size: 0.36rem;
  color: #3d3d3d;
  line-height: 1.55;
}

/* 自定义整个滚动条：容器宽 19，背景 #fff7e7 */
.notes-content-inner::-webkit-scrollbar {
  width: 0.19rem;
  background-color: #fff7e7;
  border-radius: 0.095rem;
}

/* 自定义滚动条轨道 */
.notes-content-inner::-webkit-scrollbar-track {
  background: none;
  border-radius: 0.095rem;
}

/* 自定义滚动条的滑块（thumb）：13×74 */
.notes-content-inner::-webkit-scrollbar-thumb {
  min-height: 0.74rem;
  background-color: #fbb33c;
  border-radius: 0.065rem;
  /* 滑块比轨道窄 (13 < 19)：透明边框让滑块视觉居中至 13 宽 */
  border: 0.03rem solid #fff7e7;
  background-clip: padding-box;
}

/* 当滑块悬停或活动时的样式 */
.notes-content-inner::-webkit-scrollbar-thumb:hover {
  background-color: #e99f26;
}

.notes-content-inner p { margin: 0.14rem 0; }
.notes-content-inner p:first-child { margin-top: 0; }

.social-icon {
  position: relative;
  display: block;
  width: 0.49rem;
  height: 0.49rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transition: transform .15s ease;
}
.social-icon:hover { transform: scale(1.08); }
.social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1a0f14;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 55% auto;    mask-size: 55% auto;
}
.social-x::before  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 3h3l-7 8 8 10h-6l-5-6-6 6H2l7-8L1 3h6l4 5z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 3h3l-7 8 8 10h-6l-5-6-6 6H2l7-8L1 3h6l4 5z'/></svg>"); }
.social-fb::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1h-3c-3 0-5 2-5 5v4H6v4h3v8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1h-3c-3 0-5 2-5 5v4H6v4h3v8z'/></svg>"); }
.social-ig::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3a1 1 0 100 2 1 1 0 000-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3a1 1 0 100 2 1 1 0 000-2z'/></svg>"); }
.social-yt::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23 7s-.2-1.6-.9-2.3c-.8-.9-1.8-.9-2.2-1C16.8 3.5 12 3.5 12 3.5s-4.8 0-7.9.3c-.4 0-1.4 0-2.2 1C1.2 5.4 1 7 1 7S1 8.8 1 10.7v2.6c0 1.9 0 3.7.2 3.7s.2 1.6.9 2.3c.9 1 2 .9 2.5 1 1.8.2 7.4.3 7.4.3s4.8 0 7.9-.3c.4 0 1.4 0 2.2-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.7v-2.6C23.2 8.8 23 7 23 7zM10 15V9l5 3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23 7s-.2-1.6-.9-2.3c-.8-.9-1.8-.9-2.2-1C16.8 3.5 12 3.5 12 3.5s-4.8 0-7.9.3c-.4 0-1.4 0-2.2 1C1.2 5.4 1 7 1 7S1 8.8 1 10.7v2.6c0 1.9 0 3.7.2 3.7s.2 1.6.9 2.3c.9 1 2 .9 2.5 1 1.8.2 7.4.3 7.4.3s4.8 0 7.9-.3c.4 0 1.4 0 2.2-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.7v-2.6C23.2 8.8 23 7 23 7zM10 15V9l5 3z'/></svg>"); }
.social-tt::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 2c.6 2 1.9 3.5 4 4v3.5c-1.5 0-2.9-.4-4-1v6c0 4-3 7-7 7s-7-3-7-7 3-7 7-7v3.5c-2 0-3.5 1.5-3.5 3.5s1.5 3.5 3.5 3.5S14 15 14 13V2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 2c.6 2 1.9 3.5 4 4v3.5c-1.5 0-2.9-.4-4-1v6c0 4-3 7-7 7s-7-3-7-7 3-7 7-7v3.5c-2 0-3.5 1.5-3.5 3.5s1.5 3.5 3.5 3.5S14 15 14 13V2z'/></svg>"); }
.social-dc::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4.5A18 18 0 0016 3l-.3.4c1.7.4 2.5 1 3.5 1.7A15 15 0 007 5.1c1-.7 1.8-1.3 3.5-1.7L10 3a18 18 0 00-4 1.5C3 8 2 12 2 17c1.4 1.5 3 2.5 4.5 3l1-1.3a10 10 0 01-2.7-1.3l.7-.5c2.5 1.2 5.2 1.6 8 .8 1.4-.4 2.7-.9 3.9-1.6l.7.5a10 10 0 01-2.7 1.3l1 1.3c1.5-.5 3.1-1.5 4.5-3 0-5-1-9-4-12.5zM9 15c-1 0-1.8-.9-1.8-2S8 11 9 11s1.8.9 1.8 2S10 15 9 15zm6 0c-1 0-1.8-.9-1.8-2S14 11 15 11s1.8.9 1.8 2S16 15 15 15z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4.5A18 18 0 0016 3l-.3.4c1.7.4 2.5 1 3.5 1.7A15 15 0 007 5.1c1-.7 1.8-1.3 3.5-1.7L10 3a18 18 0 00-4 1.5C3 8 2 12 2 17c1.4 1.5 3 2.5 4.5 3l1-1.3a10 10 0 01-2.7-1.3l.7-.5c2.5 1.2 5.2 1.6 8 .8 1.4-.4 2.7-.9 3.9-1.6l.7.5a10 10 0 01-2.7 1.3l1 1.3c1.5-.5 3.1-1.5 4.5-3 0-5-1-9-4-12.5zM9 15c-1 0-1.8-.9-1.8-2S8 11 9 11s1.8.9 1.8 2S10 15 9 15zm6 0c-1 0-1.8-.9-1.8-2S14 11 15 11s1.8.9 1.8 2S16 15 15 15z'/></svg>"); }


/* ==================================================================
 * 返回顶部按钮
 * ================================================================== */
.to-top {
  position: fixed;
  right: 0.4rem;
  bottom: 2.3rem;
  width: 0.93rem;
  height: 0.96rem;
  background: url("../img/totop.png") no-repeat center/contain;
  cursor: pointer;
  z-index: 99;
  /* 默认隐藏：滚出 hero 之后由 JS 加 .is-visible 渐变显示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.1rem);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.to-top.is-visible:hover { transform: translateY(-0.04rem); }

/* language-box */
.language-box {z-index:4;width: 1.22rem; height: 3rem; position: absolute; top: 0.1rem; right: .85rem;z-index: 999;display: flex;justify-content: flex-end;align-items: flex-start;}
.language-btn {position: absolute; right: 0; top: 0; min-height: .34rem; display: flex; align-items: center; justify-content: flex-end; /*text-transform: uppercase;*/ color: #f9c150;z-index: 2; cursor: pointer; font-size: 0.26rem; font-weight: bold;}
.language-icon {width: .72rem; height: .72rem; border-radius: 50%; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='68' viewBox='0 0 81 68' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M67.2572 22.4255C66.0511 22.1781 64.4378 21.1367 64.7361 19.794C65.3544 18.234 69.4126 19.2023 70.4381 18.4104C57.595 -14.1881 3.14434 -0.210543 6.52329 34.6817C6.78673 35.3746 7.57486 35.5316 8.11044 35.1637C9.69758 34.1696 44.9806 18.0489 36.4962 28.0501C26.9254 31.863 16.56 34.2449 7.70113 39.7985C4.85341 41.7221 -1.54961 46.4107 0.344521 48.0912C4.5595 49.2811 7.67501 48.3451 9.54083 49.8535C29.1483 82.6866 74.3918 67.6826 75.8831 31.0561C77.3614 29.6747 79.2643 28.7021 80.4704 27.0345C83.8298 22.3653 70.2247 22.5654 67.2572 22.4255ZM19.2705 22.5611C8.25413 21.1861 28.2644 4.62006 37.4433 4.12732C50.8654 3.4065 54.9171 6.75672 56.5086 8.46949C56.7329 8.71048 56.9702 8.93856 57.201 9.17095C58.8338 10.8213 52.912 14.0726 49.3958 11.1204C44.7977 7.31186 40.979 5.94983 39.8599 10.8794C39.2503 13.554 30.287 23.936 19.2705 22.5611ZM54.3968 60.0957C50.3015 61.774 45.0764 62.7982 41.5668 62.398C36.481 61.8192 35.5774 58.3743 43.1191 54.4603C52.0999 49.7975 61.5487 49.9309 62.1344 53.3091C62.5067 55.4501 58.836 58.2753 54.3968 60.0957ZM61.0785 33.6898C59.4826 34.0233 57.754 34.4386 57.0921 36.1062C56.4194 37.5779 55.7836 39.7684 54.5165 40.7689C52.4265 42.5376 50.2841 39.2261 49.3741 37.4811C48.4074 35.7081 47.3689 35.1465 45.3246 34.9722C43.4457 34.7463 40.4434 34.6215 40.3998 32.2804C40.4085 30.1502 42.3049 28.6332 43.5023 26.9936C44.8913 24.7838 43.1387 22.2276 43.278 19.8155C43.241 18.2663 44.7063 16.9559 46.1519 17.3174C47.9981 17.554 49.9314 19.1076 51.8539 19C54.1377 18.5761 55.8903 16.149 58.418 16.4287C61.2875 17.014 60.0639 21.5584 60.2729 23.8177C60.5385 25.8339 62.646 26.7483 63.8064 28.2739C66.4212 31.1378 64.2136 33.1196 61.0785 33.6898Z' fill='%23f9c150'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .38rem .33rem; margin-right: 0; flex: 0 0 auto;}
.language-btn::after { content: " "; display: block; margin-left: .15rem; width: .14rem; height: .14rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='51' viewBox='0 0 64 51' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.60761 4.70412C16.183 -1.97482 45.5721 -1.14764 60.2299 4.70412C74.8934 10.5559 42.8491 51.8312 31.275 50.9872C18.0886 50.0259 -8.38015 10.1143 2.60761 4.70412Z' fill='%23f9c150'/%3E%3C/svg%3E") no-repeat center/contain;}
.language-box ul {width: .54rem; max-height: 100%; overflow: hidden; padding-top: .6rem; margin-right: .2rem;box-sizing: border-box; position: relative; z-index: 1; transition: opacity .3s ease; opacity: 1;}
.language-box li {width: 100%; margin: 0 auto; height: .56rem; box-sizing: border-box;padding-bottom: .04rem; display: flex; text-align: center; align-items: center;justify-content: center; font-size: .26rem; cursor: pointer;color: #f4eee1;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='4' viewBox='0 0 52 4' fill='none'%3E%3Cpath d='M2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0ZM14 0C15.1046 0 16 0.895431 16 2C16 3.10457 15.1046 4 14 4C12.8954 4 12 3.10457 12 2C12 0.895431 12.8954 0 14 0ZM26 0C27.1046 0 28 0.895431 28 2C28 3.10457 27.1046 4 26 4C24.8954 4 24 3.10457 24 2C24 0.895431 24.8954 0 26 0ZM38 0C39.1046 0 40 0.895431 40 2C40 3.10457 39.1046 4 38 4C36.8954 4 36 3.10457 36 2C36 0.895431 36.8954 0 38 0ZM50 0C51.1046 0 52 0.895431 52 2C52 3.10457 51.1046 4 50 4C48.8954 4 48 3.10457 48 2C48 0.895431 48.8954 0 50 0Z' fill='%23F5EFDF' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center bottom/100% .04rem;}
.language-box li.active {color: #f9c150;}
.language-box li:last-child {background: none;}
.language-hidden {position: absolute; width: 2rem; height: 1.8rem; transition: all .3s; overflow: hidden;}
.language-hidden ul {opacity: 0;}
.language-hidden .language-mask{height: 0; overflow: hidden;}

/* ================================================================== 
 * 日语字体覆盖：body.JA class 由 base.js 的 loadLang() 添加
 *   规则：英语环境保持原字体，日语环境替换如下：
 *     · 原 "HYYouYuan_105J"                          → "yuanzhenHeavy"
 *     · 原 "FZLanTingYuanSDB1GB-Regular" / 别名同上   → "yuanrou"
 */

/* [标题/按钮类] 原 HYYouYuan_105J → yuanzhenHeavy */
.JA .hero-home-text,
.JA .nav-btn,
.JA .hero-discord-text,
.JA .section-title-text,
.JA .benefit-label,
.JA .want-card-title,
.JA .join-btn-text,
.JA .notes-title-text {
  font-family: "yuanzhenHeavy", "Microsoft YaHei", sans-serif;
}
/* [正文/描述类] 原 FZLanTingYuanSDB1GB-Regular / FZLANTY_ZHONGCUJW--GB1-0 → yuanrou */
.JA .want-card-desc,
.JA .want-rules,
.JA .step-text,
.JA .notes-content-inner {
  font-family: "yuanrou", "Microsoft YaHei", sans-serif;
}

/* 额外微调：日语文本较宽，benefit-label 缩小以避免溢出 */
.JA .benefit-label {
  font-size: 0.28rem;
  height: 0.66rem;
}
.footer{
  font-family: "FZLanTingYuanSDB1GB-Regular";
}
.JA .footer{
  font-family: "yuanrou";
}
/* 日语 PC 端 want-card-title 字号微调（移动端由下方 @media 覆盖） */
@media (min-width: 1081px) {  
  /* PC 端（>1080px）：hover 展开语言菜单，鼠标离开后 250ms 延迟收起 */
  /* hover 时立即展开：ul 透明度、mask 高度、容器 overflow 都恢复 */
  .language-box:hover.language-hidden { overflow: visible; }
  .language-box:hover.language-hidden ul { opacity: 1; transition-delay: 0s; }
  .language-box:hover.language-hidden .language-mask { height: auto; overflow: visible; }
  /* 未 hover 的收起：延迟 250ms 才开始 opacity 过渡，防止手抖误触 */
  .language-hidden ul { transition-delay: .25s; }
  .JA .benefit-label{
    bottom: 0.03rem;
  }
  /* .JA .hero {
    background-image: url("../img/header_ja.jpg");
  } */
  .JA .header-banner .slogan{
    width: 9.28rem;
    height: 3.29rem;
    background: url("../img/slogan_ja.png") no-repeat center/contain;
  }
  .JA .want-card-title {
    font-size: 0.38rem;
  }
  .JA .want-card-desc {
    font-size: 0.28rem;
    padding-top: 2rem;
  }
  .JA .want-rules-main {
    font-size: 0.28rem;
  }
  .JA .join-btn-text {
    font-size: 0.5rem;
  }  
  .JA #s11_3,.JA #s12_2,.JA #s13_3{
    display: block;
  }
  .footer{
    flex-direction: row!important;
    justify-content: space-between!important;
  }
}
/* 只有两端区间才给固定高度 */

 @media all and (min-width: 1081px) and (max-aspect-ratio: 40/24), 
       all and (min-width: 1081px) and (min-aspect-ratio: 40/15) {
  .hero {
    height: 10.85rem;
  }
}
/* @media  all and (min-width: 1081px) and (max-aspect-ratio: 40/10){  
  .hero{
    display: none;
  }
}
@media  all and (min-width: 1081px) and (min-aspect-ratio: 40/10){  
  .hero{
    display: none;
  }
} */
/* ==================================================================
 * 移动端 —— 设计稿 1080 × 7400
 *
 * 断点：max-width: 1080px
 * rem 基准：JS 中当 viewport ≤ 1080 时，1rem = viewport/1080*100，
 *           因此设计稿 100px = 1rem，CSS 数值仍写成 "设计px/100" rem。
 *
 * 切图目录：images/m/*
 *
 * 与 PC 结构差异：
 *   · Hero 主视觉整块合成 header.png (1080×1635)，含大标题
 *   · 顶部 nav 只显示 tohome 按钮，玩家信息/LOGIN 隐藏（移动端不展示）
 *   · Section 标题：单条横幅 bg_title.png (998×117)，图内已合并 roco kingdom 装饰大字 + 波浪线 + 四芒星，
 *     DOM 侧无需渲染 star 装饰
 *   · Creator Benefits：4 张卡改为 2×2 网格
 *   · WE WANT YOU：3 张卡改为纵向堆叠，卡内左右分栏（图 + 文字）；
 *     卡背景统一用 bg_want_2.png（三卡视觉一致）
 *   · HOW TO JOIN：step 图/长条变更为移动端切图（201/231 高、302 高）
 *   · 底部 Join Now：使用 bg_join_1.png (643×137)
 *   · Notes：结构一致，尺寸重算
 *   · Footer：改为纵向堆叠居中
 *   · ico_pen 在移动端稿中不存在 → 隐藏
 * ================================================================== */
@media (max-width: 1080px) {

  html, body {
    font-size: 0.28rem;
  }

  /* ---------- 页面容器：整页大背景 ---------- */
  .main-content {
    background-image: url("../img/m/bg.jpg");
  }

  /* ==================================================================
   * Hero 头部（设计稿 1080 × 1635）
   * ================================================================== */
  .hero {
    height: 16.15rem;
    background-image: url("../img/m/header.jpg");
    background-size: 10.8rem 16.15rem;
  }
  .header-banner{
    width: 5.46rem;
    height: 1.33rem;
    background: none;
    padding: 0;
    top: auto;
    bottom: 1.48rem;
    transform: translate(-50%, 0);
  }
  .header-banner .slogan{
    display: none;
  }
  .header-banner::after{
    display: none;
  }
  .JA .hero {
    background-image: url("../img/m/header_ja.jpg");
  }

  /* Logo (40,40,215×79) */
  .hero-logo {
    left: 0.34rem;
    top: 0.15rem;
  }

  /* 顶部右侧导航区（移动端）：
   * 玩家信息 / LOGIN 在移动端 hero 视觉里已省略，仅保留 tohome 按钮 */
  .hero-nav {
    top: 0.53rem;
    right: 2.8rem;
    gap: 0;
  }
  .fd-user-info { display: none !important; }

  /* Home 按钮 (856,53,185×50) —— 沿用 PC 端 btn_tohome.png */
  .hero-home {
    width: 1.85rem;
    height: 0.5rem;
    padding: 0 0.3rem 0 0;              /* 右侧留箭头位（视觉在切图内） */
  }
  .hero-home-text {
    font-size: 0.26rem;                 /* JSON: 26px */
  }
  .EN .hero-home-text {
    padding-bottom: 0.02rem;
  }

  /* Hero JOIN NOW 按钮 (267,1334,546×133) —— 沿用 PC 端 btn_join.png */
  .hero-discord {
    /* left: 2.67rem;
    top: 13.34rem; */
    width: 5.46rem;
    height: 1.33rem;
    margin: 0 0 0 0;
  }
  .hero-discord-text {
    /* 文字 (442,1369,294×44) 相对按钮 left=175 top=35 */
    margin: 0;
    padding: 0 0.3rem 0.1rem 1.4rem;
    width: 100%;
    font-size: 0.55rem;                 /* JSON: 55px */
    box-sizing: border-box;
  }


  /* ==================================================================
   * Section 通用标题
   *   最新导出：bg_title.png 尺寸 998×117（父 group bounds 也是 998×117）
   *   图内已合并："roco kingdom" 大字装饰、波浪线、右侧四芒星
   *   → CSS 只需铺上背景图 + 定位 DOM 文字，无需再单独渲染 star 装饰
   * ================================================================== */
  .section-title {
    width: 9.98rem;
    height: 1.17rem;
    background-image: url("../img/m/bg_title.png");
    background-size: 9.98rem 1.17rem;   /* 与图尺寸 1:1 */
    background-position: center center;
  }
  .section-title-text {
    font-size: 0.59rem;                 /* JSON: 59px */
    margin-top: 0.3rem;                 /* 视觉微调：文字整体下移（覆盖 PC 的 0.4rem） */
  }
  /* 四芒星装饰：移动端沿用 PC 端 ico_title_left / ico_title_right 图 */
  .section-title-star {
    width: 0.45rem;
    height: 0.45rem;
    flex-basis: 0.45rem;
    margin-top: 0.3rem;                 /* 与文字同步下移 */
  }
  .section-title-star-left {
    margin-right: 0.2rem;
  }
  .section-title-star-right {
    margin-left: 0.2rem;
  }


  /* ==================================================================
   * section_1  Creator Benefits —— 2×2 网格
   * bounds: y 1695 ~ 2967（含卡片区）
   * ================================================================== */
  .section-benefits {
    padding-top: 0.6rem;                /* 标题顶 1695 - hero 底 1635 = 60 */
  }
  /* 标题下间距：卡顶 1865 - 标题底 1812 = 53 */
  .section-benefits .section-title {
    margin-bottom: 0.53rem;
  }

  .benefit-list {
    display: grid;
    grid-template-columns: repeat(2, 3.62rem);
    justify-content: center;
    column-gap: 1.30rem;                /* 卡2 left=607 - 卡1 right=477 = 130 */
    row-gap: 0.84rem;                   /* 卡3 top=2305 - 卡1 bottom=2221 = 84 */
    padding: 0;
  }
  .benefit, .benefit:last-child {
    flex: initial;
    width: 3.62rem;
    height: 3.35rem;
  }
  .benefit-icon {
    height: 3.35rem;
  }
  .benefit-label {
    font-size: 0.37rem;
    position: absolute;
    left: 0;
    bottom: 0.05rem;
  }
  .JA .benefit-label{
    bottom: 0.08rem;
    font-size: .34rem;
  }


  /* ==================================================================
   * section_2  WE WANT YOU —— 3 张卡纵向堆叠（左右分栏）
   *
   * JSON 校准（layers_m.json，画布 1080×10563）：
   *   · section-want 视觉 y 2794 ~ 4902
   *   · 3 张 want 卡背景切图（997×437，相对画布 left=42~43）：
   *       卡1 bg_want_1  y=2976
   *       卡2 bg_want_2  y=3455
   *       卡3 bg_want_3  y=3935
   *     卡间垂直步长 479~480（= 卡高 437 + gap ≈ 43）
   *   · 卡内布局：**左侧主视觉图 + 底部 title；右侧 desc（上）**
   *     - 主视觉图形 + 平台图标 + 平台徽章文字 均已合并进 bg_want_x.png
   *     - CSS 只需单独定位卡内的 title / desc 两段文字
   *   · title  相对卡内位置：left ≈ 83~93 (统一 85)，top ≈ 336 (三卡一致)
   *   · desc   相对卡内位置：left ≈ 570 (统一 5.7rem)，top ≈ 171~194 (统一 1.71rem)
   * ================================================================== */
  .section-want {
    margin-top: 1.3rem;                 /* WE WANT YOU 标题顶 2794 - benefits 底 2967 视觉重叠；实际留白约 90 */
  }
  .section-want .section-title {
    margin-bottom: 0.64rem;             /* 卡1 顶 2976 - 标题底 2912 = 64 */
  }

  .want-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.43rem;                       /* 卡2 y=3455 - 卡1 y=2976 - 卡高 437 = 42; 卡3 同 */
    padding: 0;
  }
  .want-card,
  .want-card:last-child {
    flex: initial;
    width: 9.97rem;
    height: 3.79rem;
    background-size: 9.97rem 3.79rem;
    background-position: center;
    position: relative;                 /* 供 .want-card-desc 绝对定位 */
  }
  /* 3 张卡各自使用对应背景切图（主视觉、平台图标、平台徽章文字均已合成在图内） */
  .want-card-1 { background-image: url("../img/m/bg_want_1.png"); }
  .want-card-2 { background-image: url("../img/m/bg_want_2.png"); }
  .want-card-3 { background-image: url("../img/m/bg_want_3.png"); }

  /* title 位置：卡内左下（图形下方居中） */
  .want-card-title {
    position: absolute;
    left: 0.26rem;
    top: 2.9rem;                      /* JSON title.top 3312/3791/4271 相对卡顶 = 336 */
    width: 4.8rem;                      /* 覆盖图形区域宽度 */
    padding: 0;
    text-align: center;
    font-size: 0.46rem;                 /* JSON: 46px */
    line-height: 1;
  }
  /* desc 位置：卡内右上（先于 title 出现）*/
  .want-card-desc {
    position: absolute;
    left: 5.7rem;
    top: 1.9rem;
    padding: 0.1rem 0 0 0;
    width: 3.8rem;
    text-align: left;
    font-size: 0.38rem;
    line-height: .48rem;
    color: #3d3d3d;
  }   
  .JA #s11_2,.JA #s11_3,.JA #s12_2,.JA #s13_3{
    display: block;
  }

  /* 招募说明文案（want-rules）：宽度铺满 */
  .want-rules {
    width: 9.85rem;                     /* JSON 主文宽 934，取父组 985 */
    margin-top: 0.53rem;                /* rules 顶 4431 - 卡3 底 4372 = 59 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.2rem;
  }
  .want-rules-main {
    font-size: 0.36rem;                 /* JSON: 36px */
    line-height: 1.4;
  }
  .want-rules-main > li { padding-left: 0.28rem; }
  .want-rules-main > li::before {
    left: -0.12rem;
    top: 0.18rem;
    width: 0.14rem;
    height: 0.14rem;
  }
  .want-rules-sub {
    margin-top: 0.06rem;
    padding-left: 0.42rem;
    font-size: 0.35rem;                 /* JSON: 35px */
  }
  .want-rules-sub li { padding-left: 0.2rem; }
  .want-rules-sub li::before {
    left: -0.03rem;
    top: 0.17rem;
    width: 0.08rem;
    height: 0.08rem;
  }
  .want-rules-tip {
    margin-top: 0.14rem;
    font-size: 0.35rem;                 /* JSON: 35px */
  }


  /* ==================================================================
   * section_3  HOW TO JOIN
   * bounds: y 4989 ~ 6335（含底部 Join Now 按钮）
   * ================================================================== */
  .section-join {
    margin-top: 0.87rem;                /* join title 顶 5034 - want-rules 底 4902 = 132（含视觉留白，取 87） */
  }
  .section-join .section-title {
    margin-bottom: 0.66rem;             /* step1 起 5186 - 标题底 5151 = 35；徽章上突≈12 → 47；视觉再放 66 */
  }

  .join-steps {
    width: 10.6rem;                     /* icon left=42, bar right=1041 → 组合宽 999，居中 */
    margin: 0 auto;
    padding: 0 0.2rem;
  }
  .step {
    min-height: 3.02rem;
    margin-bottom: 0.15rem;             /* step 间距：5515 - 5198 = 317, 徽章高 285 → 剩 32；实际叠加视觉 */
  }
  .step-icon {
    flex: 0 0 2.31rem;
    width: 2.31rem;
    height: 2.85rem;
  }
  .step-bar {
    flex: 0 0 9.1rem;                    /* JSON: bg_process_x 宽 910 → 9.1rem */
    width: 9.1rem;
    height: 3.02rem;
    /* 徽章右缘 273，bar 左缘 131 → bar 相对徽章右重叠 -142 */
    margin-left: -1.42rem;
    background-size: 9.10rem 3.02rem;
  }
  /* 移动端 step 长条背景图统一用移动端第一个背景图（910×302） */
  .step-1 .step-bar,
  .step-2 .step-bar,
  .step-3 .step-bar { background-image: url("../img/m/bg_process_1.png"); }

  /* 移动端 step 徽章图沿用 PC 端图（不再覆盖 .step-x .step-icon 的 background-image） */


  .step-text {
    margin-left: 1.77rem;               /* 文字 x=308 相对 bar 左 131 = 177 */
    padding-top: 0.1rem;
    padding-right: 0.2rem;              /* 移动端无羽毛笔遮挡 */
    font-size: 0.4rem;
    line-height: 1.35;
  }

  /* 底部 Join Now 按钮 (219,6173,643×137) —— 沿用 PC 端 btn_join_2.png */
  .join-btn {
    width: 6.43rem;
    height: 1.37rem;
    margin: 0.63rem auto 0;             /* step3 底 6122 → 按钮顶 6173 = 51；视觉留 63 */
    background: url("../img/btn_join_2.png") no-repeat center/contain;
  }
  .join-btn-text {
    padding-left: 1.3rem;
    padding-right: 0.5rem;
  }

  /* 装饰：竖装饰线用移动端切图，羽毛笔隐藏 */
  .join-line-decoration {
    left: -0.04rem;                     /* JSON: -4 */
    top: 4.66rem;                       /* ico_line y=5476 相对 section_3 顶 4989 + section_title 88 高 → 相对 section 顶 487，此处 66 视觉留白 */
    width: 1.45rem;
    height: 6.38rem;
    background-image: url("../img/m/ico_line.png");
  }
  .join-pen { display: none; }


  /* ==================================================================
   * rules  Notes
   * bounds: y 6346 ~ 6900
   * ================================================================== */
  .section-notes {
    margin-top: 0.24rem;                /* notes 木牌顶 6424 - join 按钮底 6310 = 114；扣去装饰视觉留 24 */
  }
  .notes-inner {
    width: 10rem;                       /* JSON rules 板块宽 ≈1240，屏幕 1080 内取 10rem */
    padding-bottom: 1.8rem;
  }
  /* Notes 标题木牌 (41,6424,448×126) */
  .notes-title {
    width: 4.48rem;
    height: 1.26rem;
    margin-top: 0.98rem;                /* 木牌 y=6424 相对 rules 顶 6346 = 78 */
    margin-left: 0;                     /* 木牌相对 rules 板块 left=41-(-202)=243，此处按内容视觉左对齐 */
    /* 沿用 PC 端 bg_rules_title.png，不再覆盖 */
  }
  .notes-title-text {
    /* 文字 (256,6478,160×36) 相对木牌 left=215 top=54 */
    left: 2.15rem;
    top: 0.54rem;
    width: 2rem;
    height: 0.36rem;
    font-size: 0.43rem;
  }
  .notes-content {
    width: 9.96rem;
    height: 3rem;
    margin-top: 0.28rem;                /* 正文 y=6578 - 木牌底 6550 = 28 */
    margin-left: 0.19rem;               /* 正文 x=60 相对 rules 板块 left ≈ 60-41 ~ 19 */
  }
  .notes-content-inner {
    padding-right: 0.24rem;
    font-size: 0.38rem;                 /* JSON: 38px */
    line-height: 1.55;
  }
  .notes-content-inner::-webkit-scrollbar {
    width: 0.14rem;
    border-radius: 0.07rem;
  }
  .notes-content-inner::-webkit-scrollbar-thumb {
    min-height: 0.6rem;
    border-width: 0.02rem;
    border-radius: 0.05rem;
  }

  /* ==================================================================
   * 返回顶部（悬浮）
   * 移动端切图 113×116
   * ================================================================== */
  .to-top {
    right: 0.28rem;
    bottom: 1.6rem;
    width: 1.13rem;
    height: 1.16rem;
    background-image: url("../img/m/totop.png");
  }

  /* ---------- 语言切换：移动端位置 ---------- */
  .language-box {
    right: .42rem;
    top: .4rem;
    width: 2rem;
    height: 4rem;
  }
  .language-btn {
    font-size: .36rem;
  }
  .language-btn::after {
    margin-left: 0.16rem;
    width: .16rem;
    height: .16rem;
  }
  .language-box ul{
    margin-right: .34rem;
    padding-top: .66rem;
  }
  .language-box li {
    height: 0.9rem;
    font-size: .36rem;
  }
  /* 移动端才显示圆形底 + 更大的地球图标（图标 fill 恢复米白 #f4eee1） */
  .language-icon {
    background-color: #212121;
    background-size: .54rem .48rem;
    margin-right: .26rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='68' viewBox='0 0 81 68' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M67.2572 22.4255C66.0511 22.1781 64.4378 21.1367 64.7361 19.794C65.3544 18.234 69.4126 19.2023 70.4381 18.4104C57.595 -14.1881 3.14434 -0.210543 6.52329 34.6817C6.78673 35.3746 7.57486 35.5316 8.11044 35.1637C9.69758 34.1696 44.9806 18.0489 36.4962 28.0501C26.9254 31.863 16.56 34.2449 7.70113 39.7985C4.85341 41.7221 -1.54961 46.4107 0.344521 48.0912C4.5595 49.2811 7.67501 48.3451 9.54083 49.8535C29.1483 82.6866 74.3918 67.6826 75.8831 31.0561C77.3614 29.6747 79.2643 28.7021 80.4704 27.0345C83.8298 22.3653 70.2247 22.5654 67.2572 22.4255ZM19.2705 22.5611C8.25413 21.1861 28.2644 4.62006 37.4433 4.12732C50.8654 3.4065 54.9171 6.75672 56.5086 8.46949C56.7329 8.71048 56.9702 8.93856 57.201 9.17095C58.8338 10.8213 52.912 14.0726 49.3958 11.1204C44.7977 7.31186 40.979 5.94983 39.8599 10.8794C39.2503 13.554 30.287 23.936 19.2705 22.5611ZM54.3968 60.0957C50.3015 61.774 45.0764 62.7982 41.5668 62.398C36.481 61.8192 35.5774 58.3743 43.1191 54.4603C52.0999 49.7975 61.5487 49.9309 62.1344 53.3091C62.5067 55.4501 58.836 58.2753 54.3968 60.0957ZM61.0785 33.6898C59.4826 34.0233 57.754 34.4386 57.0921 36.1062C56.4194 37.5779 55.7836 39.7684 54.5165 40.7689C52.4265 42.5376 50.2841 39.2261 49.3741 37.4811C48.4074 35.7081 47.3689 35.1465 45.3246 34.9722C43.4457 34.7463 40.4434 34.6215 40.3998 32.2804C40.4085 30.1502 42.3049 28.6332 43.5023 26.9936C44.8913 24.7838 43.1387 22.2276 43.278 19.8155C43.241 18.2663 44.7063 16.9559 46.1519 17.3174C47.9981 17.554 49.9314 19.1076 51.8539 19C54.1377 18.5761 55.8903 16.149 58.418 16.4287C61.2875 17.014 60.0639 21.5584 60.2729 23.8177C60.5385 25.8339 62.646 26.7483 63.8064 28.2739C66.4212 31.1378 64.2136 33.1196 61.0785 33.6898Z' fill='%23f4eee1'/%3E%3C/svg%3E");
  }
  /* 移动端箭头保持米白 #f4eee1 */
  .language-btn::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='51' viewBox='0 0 64 51' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.60761 4.70412C16.183 -1.97482 45.5721 -1.14764 60.2299 4.70412C74.8934 10.5559 42.8491 51.8312 31.275 50.9872C18.0886 50.0259 -8.38015 10.1143 2.60761 4.70412Z' fill='%23f4eee1'/%3E%3C/svg%3E");
  }



  /* ---------- 移动端日语专属微调 ---------- */
  .JA .want-card-title {
    font-size: 0.4rem;
  }

  .footer{
    flex-direction: column!important;
    font-size: .18rem!important;
    flex-direction: column!important;
    width: 100%!important;
    padding: 0 0 0.5rem 0!important;
  }
  #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings{
    font-size: .18rem !important;
  }


}

#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings{
  background: none!important;
  color: #a5a399!important;
  font-size: .155rem!important;
  padding: 0 1em!important;

}