/* ==========================================================
   麒麟港生活 - 首页样式
   PC + H5 自适应
   ========================================================== */

:root {
  --navy: #2B2927;          /* 主色：深藏青 */
  --navy-2: #1b2d52;
  --gold: #c6ab74;          /* 金色 */
  --gold-light: #dac79f;    /* 浅金（标题横线） */
  --gold-deep: #9E7835;
  --gold-light2:#FAF8F3;
  --text: #333;
  --text2: #2B2927;
  --text-light: #666;
  --bg-light: #f0f1f3;
  --title-font: "Times New Roman", "Times", "PingFang SC", "PingFang TC", "苹方", "Microsoft YaHei", serif;
  --cn-font: "PingFang SC", "PingFang TC", "苹方", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--cn-font); color: var(--text); background: #fff; font-size: 16px; line-height: 1.7; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
input { font-family: inherit; }

.container { width: 90%; max-width: 1400px; margin: 0 auto; }
.section { padding: 90px 0; }

/* ---------- 通用标题（Times New Roman 居中 + 横线不超过标题宽） ---------- */
.section-head { text-align: center; margin-bottom: 60px; }
.section-title {
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 42px;
  color: #111;
  line-height: 1.35;
  display: inline-block;
}
.section-sub { font-family: var(--title-font); font-size: 26px; color: #111; margin-bottom: 2px; }
.title-line {
  display: block;
  width: 120px;
  max-width: 100%;      /* 横线宽度不超过标题 */
  height: 3px;
  margin: 16px auto 0;
  background: var(--gold-light);
  border-radius: 2px;
}


/* ==========================================================
   板块2：Hero 轮播
   ========================================================== */
.hero { padding-top: 88px; background: var(--navy); }
.slider { position: relative; width: 100%; overflow: hidden; }
.slider-track { display: flex; transition: transform .6s ease; }
.slide { position: relative; min-width: 100%; }
/* 全宽自适应：宽度 100%，高度随图片原始比例自适应，任何显示器都完整显示不裁切 */
.slide img { width: 100%; height: auto; display: block; }
.slide-mask {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(17,36,67,.55), rgba(17,36,67,.15) 45%, rgba(17,36,67,.35));
}
.slide-text {
  position: absolute; top: 18%; left: 55%;
  transform: translate(-50%, -50%);
  text-align: center; color: #fff; width: 90%;
}
.slide-text h2 {
  font-size: 40px; font-weight: 800; font-family: 'Times New Roman', Times, serif;
  letter-spacing: 0px; line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.slide-text p { margin-top: 14px; font-size: 20px; letter-spacing: 8px; opacity: .9; }

/* 轮播圆点：水平居中 + 距底部20px */
.slider-dots {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 5;
}
.slider-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.8);
  cursor: pointer; transition: all .3s;
}
.slider-dots span.on { background: #fff; width: 26px; border-radius: 6px; }

/* 轮播箭头 */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; line-height: 44px; text-align: center;
  color: #fff; font-size: 20px; z-index: 5;
  background: rgba(17,36,67,.35); border-radius: 50%;
  cursor: pointer; user-select: none;
  opacity: 0; transition: opacity .3s, background .3s;
}
.slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(17,36,67,.7); }
.slider-arrow.prev { left: 24px; }
.slider-arrow.next { right: 24px; }

/* ==========================================================
   Banner 下方 Slogan 條（純 CSS，位於輪播之外，不隨 banner 左右滾動）
   ========================================================== */
.hero-slogan {
  position: relative;
  z-index: 6;  /* 壓在 banner 圖下方已有貼圖標語之上 */
  width: 68%; margin: auto; margin-top: -142px;   /* 上提貼合 banner 底部 */
}
.hs-row {
  display: flex;
  align-items: center;
  background: rgba(31, 30, 30, 0.42);          /* 半透明深藏青底 */
  border: 1px solid rgba(255, 255, 255, .45); /* 半透明描邊 */
  border-radius: 20px;
  padding: 10px 8px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hs-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 4px 10px;
}
/* 列與列之間的細分割線 */
.hs-item + .hs-item::before {
  content: "";
  position: absolute;
  left: 0; top: 16%;
  height: 68%;
  width: 1px;
  background: rgba(255, 255, 255, .22);
}
.hs-num {
  display: block;
  font-family:sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1.0;
  letter-spacing: .5px;
}
.hs-num sub { font-size: 16px; vertical-align: baseline; }
.hs-label {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
}

/* ==========================================================
   板块3：About Us
   ========================================================== */
.about { background: #f9f8f3; }
.about-body { display: flex; align-items: center; gap: 60px; }
.about-video { flex: 0 0 44%; }
.video-box {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  /* 背景图：HK 品牌水印图（图内已含品牌文字，无需再叠加 HTML 文字） */
  background: #c0a06a url("../images/videobg.jpg") center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: transform .3s;
}
.play-btn::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #c0a06a;
}
.video-box:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); }
.video-box video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; background: #000;
}
.video-box.playing video { display: block; }
.video-box.playing .play-btn { display: none; }

.about-text { flex: 1; }
.about-text p { margin-bottom: 26px; font-size: 17px; line-height: 2; color: var(--text); text-align: justify; }



/* ======================= P4：The Experts（团队） ======================= */
.id-experts { background: #f8f7f2; padding: 88px 0 96px; }
.exp-title {
  margin-top: 52px; text-align: center;
  font-family: "Times New Roman", "STSong", "SimSun", "NSimSun", var(--cn-font);
  font-size: 30px; font-weight: 600; letter-spacing: 3px;
  color: #9E7835;
}
.exp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px;
  max-width: 1160px; margin: 48px auto 0;
}
/* 图片比例 1:1.05；sbg.png 上下渐变遮罩；hover 人物轻微放大 */
.exp-pic {
  position: relative; aspect-ratio: 1 / 1.05;
  background: #d9d9d9; overflow: hidden; border-radius: 2px; border-radius: 10px;
}
.exp-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.exp-card:hover .exp-pic img { transform: scale(1.06); }
/* sbg.png：不再铺满整图，铺在照片底部——宽度=图片宽，高度按原图比例(928x157)自动 */
.exp-shade {
  position: absolute; left: 0; right: 0; bottom: 0;
  aspect-ratio: 928 / 157; pointer-events: none;
  background: url("../images/sub/identity/sbg.png") bottom center / 100% 100% no-repeat;
}
.exp-name { margin-top: 12px; font-family: var(--title-font); font-size: 25px; letter-spacing: 1px; color: var(--gold-deep); line-height: 1.2;  }
.exp-role { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--navy); }
.exp-panel {
  max-width: 1160px; margin: 72px auto 0; padding: 56px 48px 52px;
  background: #786044; border-radius: 16px; text-align: center;
}
.exp-panel h3 {
  font-family: "Times New Roman", "STSong", "SimSun", "NSimSun", var(--cn-font);
  font-size: 28px; font-weight: 600; letter-spacing: 3px;
  color: #f3e0bb;
}
.exp-panel .ep-desc {
  max-width: 820px; margin: 18px auto 0;
  font-size: 14px; line-height: 2; color: rgba(255,255,255,.78);
}
.exp-cols { display: flex; justify-content: center; gap: 90px; margin-top: 42px; text-align: left; }
.exp-col .ec-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #f3e0bb; }
.exp-col .ec-head svg { width: 20px; height: 20px; fill: none; stroke: #f3e0bb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.exp-col ul { margin-top: 16px; }
.exp-col li { font-size: 14px; line-height: 2.2; color: rgba(255,255,255,.85); }



/* 通用板块标题：英文 Times + 小副标题（与 education .edu-head 同风格） */
.id-head { text-align: center; }
.id-head h2 {
  font-family: var(--title-font);
  font-size: 40px; font-weight: 400; letter-spacing: 1px;
  line-height: 1.4;
  color: var(--navy);
}
.id-head p { margin-top: 2px; font-size: 14px; letter-spacing: 3px; color: #6b7a93; }
.id-head.light h2 { color: #fff; }
.id-head.light p { color: rgba(255,255,255,.72); }




/* ==========================================================
   板块4：核心业务矩阵（悬停遮罩效果）
   ========================================================== */
.matrix { background: #fff; }
.matrix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.m-card { background: transparent; }
.m-pic { position: relative; overflow: hidden; height: 280px; }
.m-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.m-card:hover .m-pic img { transform: scale(1.05); }

/* 悬停遮罩层：#112443 透明度30% 覆盖图片上方 */
.m-card .m-overlay {
  position: absolute; inset: 0;
  background: rgba(17, 36, 67, .3);
  opacity: 0; transition: none;
  z-index: 1;
}

/* 默认标题：图片下方，金色（短横线移到英文标题下方，见 .m-name + p::after） */
.m-name {
  margin: 20px 0 2px;
  color: var(--gold-deep); font-size: 24px; font-weight: 600; letter-spacing: 2px;
  max-height: 80px; overflow: hidden;
  transition: none;
}
/* 悬停时标题移到图片左下角、白色显示 */
.m-name-ovl {
  position: absolute; left: 22px; bottom: 16px; z-index: 2;
  color: #fff; font-size: 26px; font-weight: 600; letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px);
  transition: none;
}

/* 卡片英文副标题（默认态：金色标题下方；悬停态：图内藏青遮罩上方） */
.m-name + p {
  margin: 0;
  font-family: var(--title-font);
  font-size: 14px; letter-spacing: 1px;
  color: var(--gold-deep);
  transition: none;
}
/* 短横线：位于英文标题下方（原在中文标题下方，已按需求下移） */
.m-name + p::after {
  content: ""; display: block;
  width: 46px; height: 3px;
  background: var(--gold); margin-top: 10px;
}
.m-name-ovl + p {
  position: absolute; left: 22px; bottom: 2px; z-index: 2;
  font-family: var(--title-font);
  font-size: 13px; letter-spacing: 1px;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5);
  opacity: 0; transition: none;
}

/* 卡片下半部分：默认为纯白背景 + 深色文字；悬停整体变 #112443 */
.m-detail {
  background: #fff;
  padding: 26px 24px 30px 20px;
  transition: none;
}
.m-detail dl { margin-bottom: 8px; }
.m-detail dt { font-size: 16px; font-weight: 400; color: var(--navy); transition: none; }
.m-detail dt::before { content: "•"; color: var(--gold); margin-right: 6px; }
.m-detail dd { font-size: 14px; color: var(--text-light); line-height: 1.5; padding-left: 0; transition: none; }

/* .m-detail:hover {
  padding: 26px 24px 30px 20px;
} */

/* 了解详情按钮：默认隐藏，悬停时直接显示在底部 */
.m-more {
  display: block; width: fit-content; 
  margin: 34px auto 0; padding: 6px 28px;
  border: 1px solid var(--gold-deep); border-radius: 20px;
  color: var(--gold-deep); font-size: 14px; letter-spacing: 2px;
  opacity: 0; transform: translateY(10px);
  transition: none;
}
.m-more i { font-style: normal; margin-left: 4px; display: inline-block; transition: transform .3s ease; }
.m-more:hover i { transform: translateX(6px); }

/* —— 悬停状态：图片加遮罩 + 标题移到图片左下角 + 文字区变纯背景色、文字变白 —— */
.m-card:hover .m-overlay { opacity: 1; }
/* 悬停时下方金色标题平滑收起，藏青面板紧贴图片（与效果图第二列一致） */
.m-card:hover .m-name { max-height: 0; margin: 0; opacity: 0; }
.m-card:hover .m-name + p { max-height: 0; margin: 0; opacity: 0; overflow: hidden; }
.m-card:hover .m-name-ovl { opacity: 1; transform: translateY(0); }
.m-card:hover .m-name-ovl + p { opacity: 1; }
.m-card:hover .m-detail { background: linear-gradient(to bottom, #e8dcc4, #fdfaf1); }
.m-card:hover .m-detail dd { color: rgba(255,255,255,.78); }
.m-card:hover .m-more { opacity: 1; transform: translateY(0); }
.m-card:hover .m-more:hover { background: rgba(255,255,255,.14); }

/* ==========================================================
   板块5：护航纪实（bg1 背景 + 案例卡）
   ========================================================== */
.journeys {
  background: var(--gold) url("../images/bg1.png") center  / cover no-repeat;
  position: relative; 
}
.journeys::before {
  content: ""; position: absolute; inset: 0;
}
.journeys .container { position: relative; z-index: 2; }
.journeys .section-title { color: #fff; }

.j-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; box-sizing: border-box; }
.j-grid > * { min-width: 0; overflow: hidden; word-break: break-all; }

.j-card {
  background: #fcfbf9; border-radius: 10px;
  padding: 28px 24px 24px;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  transition: transform .35s, box-shadow .35s;
}
.j-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }

/* 卡片标题：一行，超出省略 */
.j-title {
  font-size: 21px;
  font-weight: 700;
  color: #1c2b4a;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 14px;
  width: 100%;          /* 或 max-width: 300px 等具体值 */ max-width: 320px;
  box-sizing: border-box; /* 防止 padding 撑出宽度 */
}

/* 三项指标：续签时长 / 获批周期 / 补件次数 */
.j-stats { display: flex; padding: 10px 0 8px; }
.j-stat { flex: 1; text-align: center; position: relative; }
.j-stat + .j-stat::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: #eee2cc;
}
.j-stat b { display: block; font-size: 30px; font-weight: 700; color: var(--gold-deep); line-height: 1.1; }
.j-stat b i { font-style: normal; font-size: 15px; font-weight: 600; margin-left: 2px; }
.j-stat span { display: block; margin-top: 2px; font-size: 13px; color: #8a8f99; }

/* 文件图片：固定高度 */
.j-pic { margin: 8px 0 14px; border-radius: 8px; overflow: hidden; background: #f6f3ee; height: 170px; position: relative; display: flex; align-items: center; justify-content: center; }
.j-pic a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.j-pic img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
.j-pic em { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; color: #b9b3a6; z-index: 1; }

/* 标签 */
.j-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.j-tags span {
  padding: 2px 10px; font-size: 12.5px; color: var(--gold-deep);
  border: 1px solid #dcc9a4; border-radius: 4px; background: #fdfaf3;
}

/* 客户难点 / 麒麟方案 */
.j-block { margin-bottom: 8px; }
/* 客户难点 / 麒麟方案 标题前均加 2px 左侧小竖线 */
.j-block h4 {
  border-left: 2px solid var(--gold-deep);
  padding-left: 9px;
  font-size: 15px; color: var(--navy); font-weight: 700; margin-bottom: 6px; line-height: 1.2;
}
.j-block p { font-size: 13.5px; color: #6b7078; line-height: 1.5; margin-top: 0; }
.j-more {
  display: block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #eee6d8;
  font-size: 14.5px; font-weight: 600; color: var(--navy);
  transition: color .25s;
}
.j-more i { font-style: normal; margin-left: 4px; transition: transform .25s; display: inline-block; }
.j-more:hover { color: var(--gold-deep); }
.j-more:hover i { transform: translateX(4px); }

/* ==========================================================
   板块6：成功印记（数字滚动）
   ========================================================== */
.proof { background: var(--gold-light2); }
.proof-row { display: flex; justify-content: space-between; flex-wrap: wrap; }
.proof-item { flex: 1; min-width: 220px; text-align: center; padding: 10px 16px; }
.proof-num { font-size: 44px; font-weight: 800; color: #1a1206; line-height: 1.15; }
.proof-num i { font-style: normal; font-size: 24px; font-weight: 700; margin-left: 4px; }
.proof-num .cover { font-size: 24px; font-weight: 700; margin-left: 2px; }
.proof-desc { margin-top: 8px; font-size: 17px; color: #3a3f47; }


/* ==========================================================
   首页：最新資訊 板块（复制自 style.css，保持与首页风格一致）
   ========================================================== */
.hp-news { background: #fff; }
.hp-news .section-head { margin-bottom: 50px; }
.hn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.hn-card {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background: #fff; border: 1px solid #e6d7c0; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hn-card:hover {
  transform: translateY(-4px);
  --tw-shadow: 0 10px 25px -5px rgb(74 67 59 / .1), 0 8px 10px -6px rgb(74 67 59 / .06);
  --tw-shadow-colored: 0 10px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
}
.hn-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.hn-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.hn-card:hover .hn-pic img { transform: scale(1.06); }
.hn-cat {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--gold); color: #49423a; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; padding: 3px 10px; border-radius: 3px;
}
.hn-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.hn-title { font-size: 17px; line-height: 1.5; color: var(--navy); font-weight: 700; margin-bottom: 10px; }
.hn-title a { color: inherit; text-decoration: none; }
.hn-title a:hover { color: var(--gold-deep); }
.hn-desc { font-size: 14px; line-height: 1.65; color: #5d636b; margin-bottom: 16px; flex: 1; }
.hn-more { font-size: 14px; font-weight: 700; color: var(--gold-deep); text-decoration: none; }
.hn-more i { font-style: normal; display: inline-block; margin-left: 4px; transition: transform .3s ease; }
.hn-card:hover .hn-more i { transform: translateX(6px); }
.hn-foot { text-align: center; margin-top: 46px; }
.hn-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--gold); color: var(--navy); background: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
  padding: 12px 30px; border-radius: 4px; text-decoration: none;
  transition: background .25s, color .25s;
}
.hn-more-btn:hover {  color: var(--gold); }
.hn-more-btn i { font-style: normal; display: inline-block; transition: transform .3s ease; }
.hn-more-btn:hover i { transform: translateX(6px); }


/* ==========================================================
   响应式：H5
   ========================================================== */
@media (max-width: 1200px) {
}

@media (max-width: 992px) {
  .section { padding: 64px 0; }
  .section-title { font-size: 32px; }
  .matrix-grid { grid-template-columns: repeat(2, 1fr); }   /* H5 2列 */
  .j-grid { grid-template-columns: repeat(2, 1fr); }        /* H5 2列 */
  .hn-grid { grid-template-columns: repeat(2, 1fr); }       /* H5 2列 */
  .about-body { flex-direction: column; gap: 40px; }
  .about-video { width: 100%; flex: none; }
  .slide-text h2 { font-size: 32px; letter-spacing: 3px; }
  .slide-text p { font-size: 15px; letter-spacing: 4px; }

}

@media (max-width: 640px) {
  .hero { padding-top: 68px; }
  .slide-text h2 { font-size: 24px; }
  .section-title { font-size: 26px; }
  .section-sub { font-size: 20px; }
  .title-line { width: 90px; margin-top: 12px; }

  /* H5 保持 2 列（规格要求），紧凑化排版 */
  .matrix-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .m-pic { height: 130px; }
  .m-name { font-size: 16px; margin: 12px 0 2px; max-height: 60px; }
  .m-name + p { margin-top: 0; font-size: 11px; }
  .m-name + p::after { margin-top: 7px; }
  .m-name-ovl { font-size: 17px; left: 12px; bottom: 10px; }
  .m-name-ovl + p { left: 12px; bottom: 1px; font-size: 11px; }
  .m-detail { padding: 16px 12px 18px; }
  .m-detail dl { margin-bottom: 6px; }
  .m-detail dt { font-size: 13.5px; }
  .m-detail dd { font-size: 12px; line-height: 1.5; }
  .m-more { padding: 7px 22px; font-size: 12px; }

  .j-grid { grid-template-columns: repeat(2, 1fr); gap: 14px;  width: 100%;   }
  .j-card { padding: 16px 12px 14px; border-radius: 8px; }
  .j-title { font-size: 14px; padding-bottom: 8px; }
  .j-stats { padding: 12px 0 8px; }
  .j-stat b { font-size: 17px; }
  .j-stat b i { font-size: 10px; }
  .j-stat span { font-size: 10px; }
  .j-pic { height: 92px; margin: 4px 0 10px; }
  .j-pic em { font-size: 9px; }
  .j-tags { gap: 4px; margin-bottom: 10px; }
  .j-tags span { padding: 2px 7px; font-size: 10px; }
  .j-block { margin-bottom: 6px; }
  .j-block h4 { border-left-width: 2px; padding-left: 7px; font-size: 12px; margin-bottom: 1px; }
  .j-block p { font-size: 11px; }
  .j-more { font-size: 12px; margin-top: 10px; padding-top: 10px; }

  /* H5 最新資訊：保持 2 列，紧凑化 */
  .hn-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hn-pic { aspect-ratio: 16 / 9; }
  .hn-body { padding: 12px 12px 14px; }
  .hn-title { font-size: 13.5px; margin-bottom: 6px; }
  .hn-desc { font-size: 11.5px; line-height: 1.5; margin-bottom: 10px; }
  .hn-more { font-size: 12px; }
  .hn-foot { margin-top: 30px; }
  .hn-more-btn { font-size: 13px; padding: 10px 22px; }

  /* H5 Banner 下方 Slogan 條：2 × 2 網格，去掉豎向分割線 */
  .hero-slogan { margin-top: 30px; width: 100%; }
  .hs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 0;
    padding: 16px 10px;
    border-radius: 12px;
    background: #CFB791 ;
  }
  .hs-item + .hs-item::before { display: none; }
  .hs-num { font-size: 23px; }
  .hs-label { font-size: 12px; margin-top: 4px; }

  .proof-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 8px; }
  .proof-item { min-width: 0; padding: 10px 6px; }
  .proof-num { font-size: 28px; white-space: nowrap; }
  .proof-num i, .proof-num .cover { font-size: 15px; }
  .proof-desc { font-size: 13px; }
  .proof-desc { font-size: 14px; }

}





/* 分页 */

.pager {
  margin: 40px 0;
  /* font-family: "Microsoft YaHei", sans-serif; */
  display: flex;
  justify-content: center;
}

.pager ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.pager ul.pagination li {
  display: inline-block;
}

.pager ul.pagination li a,
.pager ul.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  margin-left: -1px;
  line-height: 1;
  color: #c6ab74;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #d9d8d8;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  min-width: 30px;
  height: 30px; border-radius: 4px; 
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  width: auto;
}

/* .pager ul.pagination li:first-child a,
.pager ul.pagination li:first-child span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
} */

/* .pager ul.pagination li:last-child a,
.pager ul.pagination li:last-child span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
} */

.pager ul.pagination li a:hover {
  z-index: 2;
  color: #c6ab74;
  background-color: #eee;
  border-color: #bfbdbd;
}

.pager ul.pagination li.active span {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #c6ab74;
  border-color: #c6ab74;
}

.pager ul.pagination li.disabled span {
  color: #bfbdbd;
  cursor: not-allowed;
  background-color: #f5f5f5;
  border-color: #ddd;
}