/* Consolidated stylesheet generated from html/style/*.css. */

/* ===== common.css ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

p,
li,
.content-desc,
.other-solution-desc {
    word-break: auto-phrase;
    overflow-wrap: normal;
}

@supports not (word-break: auto-phrase) {
    p,
    li,
    .content-desc,
    .other-solution-desc {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

/* --- 1. Display & Layout (显示与布局) --- */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.overflow-hidden { overflow: hidden; }

/* --- 2. Flexbox (弹性盒子) --- */
/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Justify Content (主轴对齐) */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Align Items (交叉轴对齐) */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Flex Properties */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1 { flex-grow: 1; }

/* Gap */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-60 { gap: 60px; }

/* --- 3. Positioning (定位) --- */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }


.z-10 { z-index: 10; }
.z-20 { z-index: 20; }

.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

.w-100 { width: 100%; }
.w-auto { width: auto; }
.vw-100 { width: 100vw; }

.h-100 { height: 100%; }
.h-auto { height: auto; }
.vh-100 { height: 100vh; }

/* --- 5. Spacing (间距: Margin & Padding) --- */
/* Margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.m-4 { margin: 4px; }
.mt-4 { margin-top: 4px; }
.mb-4 { margin-bottom: 4px; }
.ml-4 { margin-left: 4px; }
.mr-4 { margin-right: 4px; }

.m-8 { margin: 8px; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.ml-8 { margin-left: 8px; }
.mr-8 { margin-right: 8px; }

.m-10 { margin: 10px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }

.m-12 { margin: 12px; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.ml-12 { margin-left: 12px; }
.mr-12 { margin-right: 12px; }

.m-16 { margin: 16px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.ml-16 { margin-left: 16px; }
.mr-16 { margin-right: 16px; }

.m-20 { margin: 20px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px; }
.mr-20 { margin-right: 20px; }

.m-24 { margin: 24px; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }
.ml-24 { margin-left: 24px; }
.mr-24 { margin-right: 24px; }

.m-32 { margin: 32px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }
.ml-32 { margin-left: 32px; }
.mr-32 { margin-right: 32px; }

.m-40 { margin: 40px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }
.ml-40 { margin-left: 40px; }
.mr-40 { margin-right: 40px; }

.m-48 { margin: 48px; }
.mt-48 { margin-top: 48px; }
.mb-48 { margin-bottom: 48px; }
.ml-48 { margin-left: 48px; }
.mr-48 { margin-right: 48px; }

.m-60 { margin: 60px; }
.mt-60 { margin-top: 60px; }
.mb-60 { margin-bottom: 60px; }
.ml-60 { margin-left: 60px; }
.mr-60 { margin-right: 60px; }

.m-64 { margin: 64px; }
.mt-64 { margin-top: 64px; }
.mb-64 { margin-bottom: 64px; }
.ml-64 { margin-left: 64px; }
.mr-64 { margin-right: 64px; }

.m-80 { margin: 80px; }
.mt-80 { margin-top: 80px; }
.mb-80 { margin-bottom: 80px; }
.ml-80 { margin-left: 80px; }
.mr-80 { margin-right: 80px; }

.mt-n84 { margin-top: -84px; }


/* Padding */
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

.p-4 { padding: 4px; }
.pt-4 { padding-top: 4px; }
.pb-4 { padding-bottom: 4px; }
.pl-4 { padding-left: 4px; }
.pr-4 { padding-right: 4px; }

.p-8 { padding: 8px; }
.pt-8 { padding-top: 8px; }
.pb-8 { padding-bottom: 8px; }
.pl-8 { padding-left: 8px; }
.pr-8 { padding-right: 8px; }

.p-12 { padding: 12px; }
.pt-12 { padding-top: 12px; }
.pb-12 { padding-bottom: 12px; }
.pl-12 { padding-left: 12px; }
.pr-12 { padding-right: 12px; }

.p-16 { padding: 16px; }
.pt-16 { padding-top: 16px; }
.pb-16 { padding-bottom: 16px; }
.pl-16 { padding-left: 16px; }
.pr-16 { padding-right: 16px; }

.p-20 { padding: 20px; }
.pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; }
.pl-20 { padding-left: 20px; }
.pr-20 { padding-right: 20px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

.p-24 { padding: 24px; }
.pt-24 { padding-top: 24px; }
.pb-24 { padding-bottom: 24px; }
.pl-24 { padding-left: 24px; }
.pr-24 { padding-right: 24px; }

.p-30 { padding: 30px; }
.pt-30 { padding-top: 30px; }
.pb-30 { padding-bottom: 30px; }
.pl-30 { padding-left: 30px; }
.pr-30 { padding-right: 30px; }

.p-32 { padding: 32px; }
.pt-32 { padding-top: 32px; }
.pb-32 { padding-bottom: 32px; }
.pl-32 { padding-left: 32px; }
.pr-32 { padding-right: 32px; }

.p-40 { padding: 40px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }
.pl-40 { padding-left: 40px; }
.pr-40 { padding-right: 40px; }

.p-48 { padding: 48px; }
.pt-48 { padding-top: 48px; }
.pb-48 { padding-bottom: 48px; }
.pl-48 { padding-left: 48px; }
.pr-48 { padding-right: 48px; }

.p-60 { padding: 60px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }
.pl-60 { padding-left: 60px; }
.pr-60 { padding-right: 60px; }

.p-64 { padding: 64px; }
.pt-64 { padding-top: 64px; }
.pb-64 { padding-bottom: 64px; }
.pl-64 { padding-left: 64px; }
.pr-64 { padding-right: 64px; }

.p-68 { padding: 68px; }
.pt-68 { padding-top: 68px; }
.pb-68 { padding-bottom: 68px; }
.pl-68 { padding-left: 68px; }
.pr-68 { padding-right: 68px; }

.p-80 { padding: 80px; }
.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }
.pl-80 { padding-left: 80px; }
.pr-80 { padding-right: 80px; }
.px-80 { padding-left: 80px; padding-right: 80px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }

.pb-96 { padding-bottom: 96px; }
.pt-124 { padding-top: 124px; }
.pb-132 { padding-bottom: 132px; }

/* --- 6. Typography (排版与字体) --- */
/* Text Align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font Weight */
.font-normal { font-weight: normal; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-bold { font-weight: bold; }

/* Font Size */
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-24 { font-size: 24px; }
.font-28 { font-size: 28px; }
.font-32 { font-size: 32px; }
.font-36 { font-size: 36px; }
.font-40 { font-size: 40px; }
.font-48 { font-size: 48px; }
.font-56 { font-size: 56px; }
.font-60 { font-size: 60px; }

/* Line Height */
.line-height-1 { line-height: 1; }
.line-height-12 { line-height: 1.2; }
.line-height-14 { line-height: 1.4; }
.line-height-15 { line-height: 1.5; }
.line-height-16 { line-height: 1.6; }
.line-height-18 { line-height: 1.8; }
.line-height-2 { line-height: 2; }
.line-height-24 { line-height: 24px; }
.line-height-28 { line-height: 28px; }
.line-height-32 { line-height: 32px; }
.line-height-40 { line-height: 40px; }
.line-height-48 { line-height: 48px; }

/* --- 7. Colors (颜色 & 背景) --- */
/* Text Colors */
.color-white { color: #FFFFFF; }
.color-black { color: #000000; }
.color-ffffff { color: #ffffff; }
.color-000000 { color: #000000; }
.color-0032D6 { color: #0032D6; }
.color-051243 { color: #051243; }
.color-0A6CCB { color: #0A6CCB; }
.color-666666 { color: #666666; }
.color-4A4D56 { color: #4A4D56; }

.color-gradient-blue {
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Background Colors */
.bg-white { background-color: #FFFFFF; }
.bg-ffffff { background-color: #ffffff; }
.bg-f2f7fb { background-color: #f2f7fb; }
.bg-dddddd { background-color: #dddddd; }
.bg-transparent { background-color: transparent; }

/* --- 8. Others (其他工具) --- */
.cursor-pointer { cursor: pointer; }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.text-decoration-none { text-decoration: none; }

/* =========================================
   Project Specific Utilities (项目专用)
   ========================================= */
.section-max {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

/* ===== header.css ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* 引入本地 Roboto 字体 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* Global Typography & Language Support */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 中文版字体栈 */
body.lang-zh,
[lang="zh-CN"] body {
  font-family: "Roboto", "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 日本語版字体栈 */
/* 为了保证中日文英文字体一致，将 Roboto 移到最前面 */
body.lang-jp,
[lang="ja"] body {
  font-family: "Roboto", "FrutigerNeueLTW10-Regul", "FrutigerNeueW01-Regular", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "PingFang SC", "Microsoft Yahei", sans-serif;
}

/* 英語版字体栈 */
body.lang-en,
[lang="en"] body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background-color: rgba(255, 255, 255, 0.90); /* 初始即为 0.90 不透明 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);    /* 始终保持阴影或根据需要调整 */
  transition: box-shadow 0.3s ease;
}


.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  width: 100%;
  position: relative;
  z-index: 99;
}


.logo img {
  width: 93px;
  height: auto;
  max-height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}


.nav-container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between; /* 右侧内容保持靠右 */
  width: 100%;
}


.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  border-radius: 2px;
  padding: 12px 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 48px; /* 核心：距离logo右侧48px */
}
.nav-lang {
  display: flex;
  align-items: center;
  margin-left: auto; /* 自动推到最右侧 */
}

.nav a {
  color: #051243;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav a:hover,
.nav a.active {
  color: #0032D6;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}


.nav .line {
  width: 1px;
  height: 20px;
  opacity: 0.4;
  background: #4A4A4A;
  flex-shrink: 0;
}


.nav .web {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nav-lang .web-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav .web-dropdown-icon {
  width: 12px;
  height: 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.nav .web-dropdown-icon.active {
  transform: rotate(180deg);
}


.nav-container .mail,
.header-right .mail {
  width: 72px;
  height: 48px;
  border-radius: 2px;
  background: #0068B6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-container .mail img,
.header-right .mail img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav-container .mail .mail-text,
.header-right .mail .mail-text {
  display: none;
}

.nav .lang-text {
  display: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav-item.has-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}


.dropdown-icon {
  width: 12px;
  height: 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.dropdown-icon.active {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 200%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  border: none;
}
.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
}
.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
  text-decoration: none;
  color: #051243;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.dropdown-menu a:hover {
  background:  #F2F7FB;
}

.web-lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.web-lang:hover .lang-menu {
  opacity: 1;
  visibility: visible;
}

.web-lang:hover .web-dropdown-icon {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: 190%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 80px;
  background: #fff;
  padding: 8px 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
}

.lang-menu.show {
  opacity: 1;
  visibility: visible;
}

.lang-menu a {
  display: block;
  padding: 6px 16px;
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.lang-menu a:hover {
  background: #F2F7FB;
}

.mobile-nav-top {
  display: none;
}

/* Hamburger Toggle (Hidden on Desktop) */
.hamburger {
  display: none;
  position: relative;
  width: 24px;
  height: 20px;
  cursor: pointer;
  z-index: 101;
}

.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #051243;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0px; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

/* Mobile responsive menu */
@media (max-width: 768px) {
  .site-header {
    padding: 12px 24px;
  }
  
  .logo img {
    max-width: 80px;
    max-height: 28px;
  }

  /* Show Hamburger */
  .hamburger {
    display: block;
  }

  /* Hamburger active state */
  .hamburger.active span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
  }

  .nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 24px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 99; /* Below hamburger z-index 101 */
  }

  .nav-container.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-top {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    flex-shrink: 0; /* Keep top logo always at top */
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }

  .mobile-nav-top .logo img {
    max-width: 80px;
    max-height: 28px;
  }

  .nav {
    flex-direction: column;
    background: transparent;
    padding: 10px 0 0;
    gap: 16px;
    width: 100%;
    align-items: flex-start !important;
    margin-left: 0px;
  }

  .nav-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .nav-lang .web-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    margin-left: 20px;
  }

  .nav-lang .web-dropdown-icon {
    width: 12px;
    height: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
  }

  .nav-lang .lang-text {
    display: inline;
    color: #051243;
    font-size: 14px;
    font-weight: 400;
  }

  .nav-item {
    flex-direction: column;
    width: 100%;
    align-items: flex-start !important;
  }

  .nav a {
    font-size: 16px;
    padding: 12px 0;
    text-align: left;
    display: block;
    width: 100%;
  }

  .nav a::after {
    display: none; /* Disable underline effect on mobile */
  }

  .nav .line {
    width: 100%;
    height: 1px;
    margin: 8px 0;
  }

  /* Mobile Dropdown styles: Stacked accordion style */
  .nav-item.has-dropdown {
    position: relative;
    cursor: pointer;
    width: 100%;
  }
  
  .nav-item.has-dropdown > a.nav-link {
    margin-right: 0;
  }
  
  .dropdown-icon, .web-dropdown-icon {
    position: absolute;
    right: 0; /* Push to the right edge */
    top: 12px; /* Set to match the link padding */
    width: 24px;
    height: 24px;
    padding: 5px; /* Increase clickable area */
    transform: none; /* Removed translateY since top padding sets vertical center */
  }

  /* Override active transform */
  .dropdown-icon.active, .nav .web-dropdown-icon.active {
    transform: rotate(180deg) !important;
  }

  /* 移动端取消鼠标移入导致的小图标旋转，依靠点击产生的 active 类即可 */
  .nav-item.has-dropdown:hover .dropdown-icon,
  .web-lang:hover .web-dropdown-icon {
    transform: none;
  }
  
  .web-lang {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 0;
    position: relative;
  }

  .nav .lang-text {
    display: none;
  }

  .header-right .nav-lang {
    display: none;
  }

  .web-lang .web-dropdown-icon {
    right: 0;
    position: absolute;
    top: 5px; /* Manually positioning to match icon level */
    width: 24px;
    height: 24px;
    padding: 5px;
    margin-left: 0;
    transform: none; /* Removed transform to avoid offset */
  }

  .web-lang .web-dropdown-icon.active {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: #f8f9fa;
    width: 100%;
    padding: 8px 16px; /* Left indent child links */
    opacity: 0;
    display: none;
    visibility: visible;
    transform: none;
    text-align: left;
  }

  .dropdown-menu.show {
    opacity: 1;
    display: block;
  }

  .dropdown-menu a {
    padding: 10px 16px;
    font-size: 14px;
  }

  .lang-menu {
    position: static;
    margin-top: 12px;
    width: 100%;
  }

  .nav-container .mail {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 24px;
    border-radius: 4px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
    flex-shrink: 0;
  }
  
  .nav-container .mail .mail-text {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
  
  .nav-container .mail img {
    width: 24px;
    height: 24px;
  }
}

/* Cookie Consent Popup */
.cookie-consent-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  transform: translateY(20px);
  background-color: #fff;
  width: 50%;
  max-width: 580px;
  background-image: url('/images/img-cookie-bg.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 78px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-consent-popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cookie-btn-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.2s;
}

.cookie-btn-close:hover {
  opacity: 0.7;
}

.cookie-content {
  position: relative;
  z-index: 1;
}

.cookie-title {
  font-size: 32px;
  color: #051243;
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 44px;
}

.cookie-desc {
  font-size: 18px;
  color: #051243;
  line-height: 32px;
  margin-bottom: 40px;
  max-width: 540px;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.cookie-btn-accept {
  background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s;
  font-weight: 400;
}

.cookie-btn-accept:hover {
  opacity: 0.9;
}

.cookie-btn-arrow {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.cookie-btn-more {
  color: #051243;
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid #051243;
  transition: opacity 0.2s;
}

.cookie-btn-more:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .cookie-consent-popup {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(20px);
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 50px 20px 30px;
    background-size: cover;
  }
  .cookie-consent-popup.show {
    transform: translateY(0);
  }
  .cookie-btn-close {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
  }
  .cookie-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }
  .cookie-desc {
    font-size: 14px;
    line-height: 24px;
    max-width: 100%;
    margin-bottom: 24px;
  }
  .cookie-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cookie-btn-accept {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 24px;
    width: 100%;
    justify-content: center;
  }
  .cookie-btn-accept span {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: normal;
  }
  .cookie-btn-more {
    font-size: 14px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-left: none;
    border-bottom: 1px solid #051243;
    padding-left: 0;
    letter-spacing: normal;
    margin-bottom: 0;
    align-self: center;
  }
}


@media (max-width: 768px) { 
  /* cookie */
  .cookie-consent-popup{
    width: 100%;
  }
}

/* ===== footer.css ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 定义变量 */
:root {
  --footer-white: #FFF;
}

/* 页脚容器 */
.site-footer {
  width: 100%;
  position: relative;
  /* 关键：必须 visible，让悬浮模块能露出来 */
  overflow: visible;
  background-image: url('/images/footer/img-footer-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.float-module {
  position: absolute;
  left: 0;
  right: 0;
  top: -60px; 
  z-index: 99; 
}

.float-container {
  margin: 0 120px;
  background: #fff;
  border-radius: 80px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  box-shadow: 0 0 20px rgba(83, 85, 86, 0.1);
}

.float-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.float-left img {
  height: 48px;
  object-fit: contain;
}

.float-right {
  width: 80px;
  height: 48px;
  background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.float-right img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}


.footer-content {
  display: flex;
  flex-direction: column;
  padding: clamp(50px, 5.56vw, 80px) clamp(20px, 2.78vw, 40px) clamp(25px, 2.78vw, 40px);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  min-height: 500px;
}


.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  padding-top: 55px;
}


.footer-logo {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.footer-logo img {
  width: 132px;
  height: 40px;
  object-fit: contain;
}


.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 47px;
  white-space: nowrap;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 0.8;
}

.link-arrow {
  width: 14px;
  height: 14px;
  object-fit: contain;
}


.footer-middle {
  display: flex;
  justify-content: center;
  padding: 20px 0 20px 0;
}

.footer-custom-box {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: transparent;
}

.custom-qrcode {
  width: 90.911px;
  height: 90.626px;
  background: url('/images/footer/img-wechat-qrcode.png') lightgray 50% / cover no-repeat;
  border: 5px solid var(--footer-white);
  object-fit: contain;
  display: block;
}


.custom-info {
  display: flex;
  flex-direction: column;
  border: 0.481px solid var(--footer-white);
  pointer-events: none;
  user-select: none;
}


.info-top {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  margin-top: 8px;
  margin-left: 52px;
}
.info-top img {
  width: 23.579px;
  height: 23.579px;
  object-fit: contain;
}


.info-bottom {
  width: 211.887px;
  height: 26.947px;
  border-radius: 2.916px;
  background: var(--footer-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 15px 14px 16px 12px;
  pointer-events: none;
  cursor: default;
}
.info-bottom img {
  width: 15.444px;
  height: 15.443px;
  object-fit: contain;
}
.info-bottom span {
  color: #051243;
  font-size: 13.474px;
  font-weight: 400;
  line-height: 16.842px;
}


.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: clamp(10px, 1.39vw, 15px) clamp(20px, 4.17vw, 60px);
  text-align: center;
  margin-top: clamp(40px, 5.56vw, 80px);
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}


@media (max-width: 1200px) {
  .float-container {
    margin: 0 60px;
    padding: 0 40px;
  }
}

@media (max-width: 992px) {
  .float-container {
    margin: 0 40px;
    padding: 0 30px;
    height: 100px;
    border-radius: 60px;
  }

  .float-left img {
    height: 40px;
  }

  .float-right {
    width: 70px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .float-module {
    top: -40px;
  }

  .float-container {
    margin: 0 20px;
    padding: 0 20px;
    height: 80px;
    border-radius: 50px;
  }

  .float-left img {
    height: 22px;
    max-width: 180px;
  }

  .float-right {
    width: 60px;
    height: 36px;
    border-radius: 20px;
  }

  .float-right img {
    width: 14px;
    height: 14px;
  }

  .footer-content {
    padding: 100px 20px 40px 20px;
    min-height: auto;
  }

  .footer-top {
    padding-bottom: 20px;
  }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .footer-logo {
    margin-bottom: 20px;
  }

  .footer-logo img {
    width: 110px;
    height: auto;
  }

  .footer-middle {
    padding: 20px 0;
  }

  .footer-custom-box {
    flex-direction: column;
    gap: 15px;
  }

  .custom-qrcode {
    width: 80px;
    height: 80px;
  }

  .info-top {
    margin-left: 30px;
  }

  .info-top img {
    width: 20px;
    height: 20px;
  }

  .info-bottom {
    width: 180px;
    height: 24px;
    margin: 10px 10px 12px 10px;
  }

  .info-bottom img {
    width: 13px;
    height: 13px;
  }

  .info-bottom span {
    font-size: 11px;
  }

  .footer-bottom {
    padding: 15px 20px;
  }

  .footer-bottom p {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .float-module {
    top: -30px;
  }

  .float-container {
    margin: 0 15px;
    padding: 0 15px;
    height: 70px;
    border-radius: 40px;
  }

  .float-left img {
    height: 18px;
    max-width: 150px;
  }

  .float-right {
    width: 50px;
    height: 32px;
    border-radius: 18px;
  }

  .float-right img {
    width: 12px;
    height: 12px;
  }

  .footer-content {
    padding: 80px 15px 30px 15px;
  }

  .footer-logo img {
    width: 100px;
    height: auto;
  }

  .footer-link {
    font-size: 13px;
  }

  .link-arrow {
    width: 12px;
    height: 12px;
  }

  .custom-qrcode {
    width: 70px;
    height: 70px;
  }

  .info-top {
    font-size: 12px;
    margin-left: 20px;
  }

  .info-bottom {
    width: 160px;
    height: 22px;
  }

  .info-bottom span {
    font-size: 10px;
  }

  .footer-bottom p {
    font-size: 10px;
  }
}

/* ===== swiper-bundle.min.css ===== */
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}

/* ===== index.css scoped to body.page-home ===== */
:where(body.page-home) * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:where(body.page-home) #hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  background:  #051243;
  mix-blend-mode: screen;
  overflow: hidden;
}

:where(body.page-home) .news-section-left, :where(body.page-home) .news-section-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
  border: none;
  background: none;
  cursor: pointer;
  z-index: 100;
  isolation: isolate;
  opacity: 0.8;
}

:where(body.page-home) .news-section-left {
  left: clamp(16px, 3vw, 48px);
}

:where(body.page-home) .news-section-right {
  right: clamp(16px, 3vw, 48px);
}

:where(body.page-home) .news-section-left img, :where(body.page-home) .news-section-right img {
  width: 100%;
  height: 100%;
}


:where(body.page-home) .hero-text {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}
:where(body.page-home) .text-line1 {
  color: #FFF;
  text-align: center;
  text-shadow: 0 0 48px rgba(7, 14, 39, 0.4);
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color:  #FFF;
  font-size: clamp(14px, 2.5vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

:where(body.page-home) .text-line2 {
  color: #FFF;
  text-align: center;
  font-size: clamp(28px, 5vw, 68px);
  font-weight: 600;
  line-height: 72px;
}

:where(body.page-home) .hero-icons {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  width: 90%;
  max-width: 1200px;
  padding: 35px 48px;
  gap: 20px;
  background: radial-gradient(58.66% 175.16% at 50% 100%, rgba(10, 108, 203, 0.70) 0%, rgba(5, 18, 67, 0.70) 100%);
}

:where(body.page-home) .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

:where(body.page-home) .icon-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

:where(body.page-home) .icon-item span {
  color: #FFF;
  font-size: clamp(10px, 1.2vw, 16px);
  text-align: center;
  max-width: clamp(70px, 10vw, 145px);
  font-weight: 400;
}
:where(body.page-home) .icon-item-line{
  width: 1px;
  height: 40px;
  flex-shrink: 0;
  background-color: #FFF;
  opacity: 0.6;
}

:where(body.page-home) .carousel-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

:where(body.page-home) .carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

:where(body.page-home) .carousel-item:nth-child(1) {
  background-image: url('/images/index/img-hero-bg.png');
}



:where(body.page-home) .carousel-item:nth-child(2){
  background-image: url('/images/index/img-hero-bg2.png');
}
:where(body.page-home) .carousel-item:nth-child(3){
  background-image: url('/images/index/img-hero-bg3.png');
}
:where(body.page-home) .carousel-item:nth-child(4) {
  background-image: url('/images/index/img-hero-bg4.png');
}

:where(body.page-home) .carousel-item.active {
  display: block;
}


:where(body.page-home) .carousel-dots {
  position: absolute;
  bottom: clamp(15px, 3vw, 20px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(6px, 1.5vw, 10px);
  z-index: 10;
}

:where(body.page-home) .dot {
  width: clamp(24px, 4vw, 40px);
  height: clamp(6px, 1vw, 8px);
  background:  #FFF;
  opacity: 0.4;
  transition: all 0.4s ease;
  cursor: pointer;
}

:where(body.page-home) .dot.active {
  width: clamp(48px, 8vw, 80px);
  opacity: 1;
}
:where(body.page-home) .scroll-text {
  position: absolute;
  left: clamp(20px, 4vw, 43px);
  bottom: clamp(80px, 15vw, 125px);
  z-index: 60;
  color: #FFF;
  font-size: clamp(12px, 1.5vw, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  transform: rotate(-90deg);
  transform-origin: left center;
}

:where(body.page-home) .scroll-line {
  position: absolute;
  left: clamp(30px, 6vw, 62px);
  bottom: 0;
  z-index: 60;
  width: 1px;
  height: clamp(100px, 20vw, 180px);
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}

:where(body.page-home) .scroll-line::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff; 
  position: absolute;
  top: 0;
  left: 0;
  animation: eyecatch-scroll 2.1s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s infinite;
  -webkit-animation: eyecatch-scroll 2.1s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s infinite;
}

@keyframes eyecatch-scroll {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@-webkit-keyframes eyecatch-scroll {
  0% {
    -webkit-transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
  }
}

:where(body.page-home) #banner-section {
  width: 100%;
  padding: clamp(40px, 8vw, 100px) clamp(30px, 5vw, 50px) clamp(60px, 10vw, 120px);
  min-height: 400px;
  background-image: url('/images/index/img-banner.png');
  background-size: cover;
}

:where(body.page-home) #banner-section.visible {
  opacity: 1;
  transform: translateY(0);
}

:where(body.page-home) .news-section {
  width: 100%;
  padding: clamp(80px, 12vw, 150px) 0;
  background: #F2F7FB;
}

:where(body.page-home) .news-title {
  color: #0068B6;
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
  font-weight: 900;
  line-height: clamp(50px, 6vw, 80px);
  opacity: 0.1;
}

:where(body.page-home) .news-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

:where(body.page-home) .news-middle-left {
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

:where(body.page-home) .news-middle-left:hover {
  opacity: 0.8;
}

:where(body.page-home) .news-middle-left:hover .news-arrow {
  transform: translateX(6px);
}

:where(body.page-home) .news-text {
  color: #051243;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  line-height: clamp(32px, 4vw, 48px);
}

:where(body.page-home) .news-arrow {
  width: clamp(24px, 2.5vw, 40px);
  height: clamp(24px, 2.5vw, 40px);
  object-fit: contain;
  transition: transform 0.3s ease;
}

:where(body.page-home) .news-outer-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(64px, 6vw, 96px);
  overflow: visible; 
}

:where(body.page-home) .news-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
  overflow: hidden; /* This will clip the 4th card at the edge of the 1400px zone */
}

:where(body.page-home) .news-nav-btn {
  position: absolute;
  top: calc(50% + 50px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  object-fit: contain;
  cursor: pointer;
  z-index: 1000;
}

:where(body.page-home) .news-nav-left {
  left: clamp(16px, 3vw, 48px);
}

:where(body.page-home) .news-nav-right {
  right: clamp(16px, 3vw, 48px);
}

:where(body.page-home) .news-nav-btn:hover {
  opacity: 0.7;
}

:where(body.page-home) .news-content .swiper-wrapper {
  display: flex;
  align-items: stretch; /* Force all slides to match the height of the tallest one */
}

:where(body.page-home) .news-content {
  width: 100%;
  overflow: visible !important; 
  padding: 20px 0 60px 0;
}
:where(body.page-home) .news-content .news-arrow {
  width: 24px;
  height: 24px;
}
:where(body.page-home) .news-card {
  height: auto !important; /* Allow flex stretch to take over */
  min-height: 240px; /* Set minimum height as requested */
  align-self: stretch;
  background: #fff;
  border-top: 4px solid;
  border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
  padding: clamp(16px, 2vw, 28px);
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.3s ease;
  gap: 16px;
  box-sizing: border-box;
}

:where(body.page-home) .news-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

:where(body.page-home) .news-card-desc {
  display: block;
  width: 100%;
  color: #051243;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: underline;
  transition: color 0.3s ease;
}

:where(body.page-home) .news-card-desc:hover {
  color: #0032D6;
}

:where(body.page-home) .news-card-date {
  color: #7C8190;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: right;
  margin-top: auto;
}

:where(body.page-home) .news-nav-mobile {
  display: none;
}

:where(body.page-home) .news-bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

:where(body.page-home) .news-more a {

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: linear-gradient(265deg, #1892EE, #0032D6);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
}


:where(body.page-home) .news-more a img {
  width: 20px;
  height: 20px;
}

:where(body.page-home) .news-card .card-more {
  margin-top: 16px;
  text-decoration: none;
  color: #051243;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  transition: color 0.3s ease;
}

:where(body.page-home) .news-card .card-more:hover .more-arrow {
  transform: translateX(3px);
}

:where(body.page-home) .news-card .more-arrow {
  width: clamp(18px, 1.5vw, 24px);
  height: clamp(18px, 1.5vw, 24px);
  object-fit: contain;
  transition: transform 0.3s ease;
}

:where(body.page-home) .news-card .card-more {
  margin-top: 16px;
}

:where(body.page-home) .banner-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

:where(body.page-home) .banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(body.page-home) .banner-left {
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(body.page-home) .banner-office-image {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  margin-right:120px;
}

:where(body.page-home) .banner-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

:where(body.page-home) .banner-title-en {
color:  #0068B6;
font-size: 64px;
font-style: italic;
font-weight: 900;
line-height: 80px;
opacity: 0.1;
}

:where(body.page-home) .banner-title-ja, :where(body.page-home) .banner-subtitle{
color:  #051243;
font-size: 32px;
font-weight: 500;
line-height: 44px; 
}
:where(body.page-home) .banner-title-ja{
  font-weight: 600;
    margin-bottom: -15px;
}

:where(body.page-home) .banner-line {
  width: 60px;
  height: 3px;
  background:  #051243;
  margin: 5px 0;
}


:where(body.page-home) .banner-description {
  color:  #051243;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  margin-top: 25px;
}

:where(body.page-home) .banner-stat-box {
  background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
  padding: 10px 24px 16px 24px;
  margin-top: 10px;
  width: 381px;
}

:where(body.page-home) .banner-stat-text {
  color:  #FFF;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px; 
}

:where(body.page-home) .banner-stat-text .highlight-large {
  color:  #FFF;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}



:where(body.page-home) #about-section {
  width: 100%;
  background-color: #ffffff;
  padding: clamp(50px, 8vw, 150px) 0 clamp(40px, 8vw, 100px) 0;
}

:where(body.page-home) .about-container {
  width: 100%;
  margin: 0 auto;
}

:where(body.page-home) #about-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}

:where(body.page-home) #about-section .title-en {
  color: #0068B6;
  font-size: 64px;
  font-style: italic;
  font-weight: 900;
  line-height: 80px;
  opacity: 0.1;
  text-align: center;
  margin: 0;
}

:where(body.page-home) #about-section .title-ja {
  color: #051243;
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  margin: 0;
}

:where(body.page-home) .about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
}

:where(body.page-home) .about-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

:where(body.page-home) .about-card > img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  display: block;
}

:where(body.page-home) .card-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(50px, 8vw, 72px);
  z-index: 1;
  opacity: 0.9;
}

:where(body.page-home) .about-card:nth-child(1) .card-mask {
  background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
}

:where(body.page-home) .about-card:nth-child(2) .card-mask {
  background: radial-gradient(58.66% 175.16% at 50% 100%, #0A6CCB 0%, #051243 100%);
}

:where(body.page-home) .card-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(50px, 8vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  z-index: 2;
}

:where(body.page-home) .card-text {
  color: #fff;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  white-space: nowrap;
  line-height: 32px;
}

:where(body.page-home) .arrow-icon {
  width: clamp(12px, 1.5vw, 16px);
  height: clamp(12px, 1.5vw, 16px);
  object-fit: contain;
  transition: transform 0.3s ease;
}

:where(body.page-home) .about-card:hover .arrow-icon {
  transform: translateX(10px);
}

:where(body.page-home) #banner-section {
  opacity: 1;
  transform: none;
}

/* --------------------------
Services Section 新版布局
--------------------------- */
:where(body.page-home) #services-section {
  width: 100%;
  padding: clamp(40px, 8vw, 100px) clamp(30px, 5vw, 50px) clamp(60px, 10vw, 120px);
  min-height: 400px;
  background-image: url('/images/index/img-services-right.png');
  background-color: #F2F7FB;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(body.page-home) .services-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

:where(body.page-home) .services-title-en {
  color: #0068B6;
  font-size: 64px;
  font-style: italic;
  font-weight: 900;
  line-height: 80px;
  opacity: 0.1;
}

:where(body.page-home) .services-title-ja {
  color: #051243;
  font-size: 32px;
  font-weight: 500;
  line-height: 44px;
  margin-bottom: 40px;
}

/* 左右布局 */
:where(body.page-home) .services-content-wrapper {
  display: flex;
  gap: 60px; /* 你要的 60px */
  align-items: flex-start;
}

/* 左侧菜单 */
/* 左侧菜单 */
:where(body.page-home) .services-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;  
  max-width: 180px;
  margin-top: 20px;
  margin-bottom: 20px;
}
:where(body.page-home) .service-menu-item {
  padding: 12px 10px;
  font-size: 18px;
  color: #051243;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  line-height: 32px; 
  margin-left: 2px;
  border-left: 2px solid transparent;
  box-sizing: border-box;
}

:where(body.page-home) .service-menu-item:not(.active):hover {
  background: #FFF;
  border-left-color: #0032D6;
}

/* 选中状态样式 */
:where(body.page-home) .service-menu-item.active {
  background: #FFF;
  margin-left: 2px;    /* 左边距 2px */
  border-left-color: #0032D6;
}


/* 右侧卡片容器 - no wrap, evenly distribute */
:where(body.page-home) .services-card-container {
  flex: 1 !important;
  position: relative;
  min-height: 400px;
}
:where(body.page-home) .service-card-group {
  display: none;
  gap: 24px;
  flex-wrap: nowrap;
  width: 100%;
}
:where(body.page-home) .services-card-container {
  width: 100% !important;
  overflow: visible !important;
}
:where(body.page-home) .service-card-group.active {
  display: flex !important;
  flex-wrap: nowrap !important;
  
  padding-bottom: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* card style */
:where(body.page-home) .service-card {
  flex: 1;
  flex-shrink: 0;
  min-width: 0;
  min-height: 400px;
  perspective: 1200px;
  position: relative;
}

/* mobile: wrap */
@media (max-width: 768px) {
  :where(body.page-home) .service-card-group {
    flex-wrap: wrap;
  }
  :where(body.page-home) .service-card {
    flex-shrink: 1;
    min-width: 260px;
  }
}
:where(body.page-home) .card-front, :where(body.page-home) .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.7s ease;
}
:where(body.page-home) .card-back{
  padding: 24px;
}
:where(body.page-home) .card-front {
  display: flex;
  flex-direction: column;
}

:where(body.page-home) .card-front > img {
  width: 100%;
  height: 216px;
  flex-shrink: 0;
}

:where(body.page-home) .card-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;
  text-align: center;
}
:where(body.page-home) .card-title {
  font-size: 24px;
  color: #051243;
  font-weight: 500;
  margin-bottom: 16px;
}
/* 服务卡片正面 Detail：外观同 back-more 按钮 */
:where(body.page-home) .card-bottom > .card-more, :where(body.page-home) .card-bottom > a.card-more {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: max-content;
  flex: 0 0 auto;
  padding: 10px 24px;
  background: linear-gradient(265deg, #1892EE, #0032D6);
  color: #fff;
  font-size: 16px;
  border-radius: 999px;
  box-sizing: border-box;
}

/* 中日：仅展示，不可点击 */
:where(body.page-home) .card-bottom > .card-more {
  cursor: default;
}

/* 英文：链接仅在按钮宽度内可点 */
:where(body.page-home) .card-bottom > a.card-more {
  text-decoration: none;
  cursor: pointer;
}

:where(body.page-home) .card-bottom > .card-more img, :where(body.page-home) .card-bottom > a.card-more img {
  width: 16px;
  height: 16px;
}

/* 反面 */
:where(body.page-home) .card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
:where(body.page-home) .back-title {
  font-size: 22px;
  color: #051243;
  font-weight: 500;
}
:where(body.page-home) .back-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(body.page-home) .back-list a {
  padding: 10px 14px 10px 26px;
  background: #F2F7FB;
  color: #0068B6;
  text-decoration: none;
  position: relative;
  font-size: 15px;
}

:where(body.page-home) .back-list a:hover {
  color: #0032D6;
}

:where(body.page-home) .back-list a::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #0068B6;
  border-radius: 50%;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
:where(body.page-home) .back-list a::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url('/images/index/icon-arrow-blue.png');
  background-size: 100% 100%;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
:where(body.page-home) .back-more {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
:where(body.page-home) .back-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: linear-gradient(265deg, #1892EE, #0032D6);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
}
:where(body.page-home) .back-more a img {
  width: 16px;
  height: 16px;
}
/* 翻转效果 */
:where(body.page-home) .service-card:hover .card-front {
  transform: rotateY(-180deg);
}
:where(body.page-home) .service-card:hover .card-back {
  transform: rotateY(0);
}

/* 只有反面的卡片 */
:where(body.page-home) .service-card.no-front .card-front {
  display: none;
}
:where(body.page-home) .service-card.no-front .card-back {
  transform: rotateY(0);
}

/*  Security / 保守運用 专用左右结构卡片 */
/* 后两个菜单 左右平分结构 */
:where(body.page-home) .card-back-other {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: flex;
  align-items: stretch;
  gap: 40px;
  box-sizing: border-box;
}
:where(body.page-home) .service-card.no-front {
  position: relative;
}

:where(body.page-home) .en-static-service-card {
  perspective: none;
}

:where(body.page-home) .en-static-service-card .card-front {
  position: relative;
  display: flex;
  flex-direction: column;
  transform: none !important;
}
:where(body.page-home) .en-static-service-card.service-card {
  min-height: 0 !important;
}

:where(body.page-home) .service-card-link {
  text-decoration: none;
}

:where(body.page-home) .en-static-service-card:hover .card-front {
  transform: none !important;
}

:where(body.page-home) .en-static-service-card .card-back {
  display: none !important;
}

/* 左侧图片区域 —— 占 50% */
:where(body.page-home) .back-banner-other {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0; /* 关键：固定宽度比例 */
  overflow: hidden;
}
:where(body.page-home) .back-banner-other img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧内容区域 —— 占 50% */
:where(body.page-home) .back-right-other {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 列表样式 */
:where(body.page-home) .back-list-other {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(body.page-home) .back-list-other a {
  padding: 10px 14px 10px 26px;
  background: #F2F7FB;
  color: #0068B6;
  text-decoration: none;
  position: relative;
  font-size: 15px;
}
:where(body.page-home) .back-list-other a::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #0068B6;
  border-radius: 50%;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
:where(body.page-home) .back-list-other a::after { 
  content: '';
  width: 14px;
  height: 14px;
  background-image: url('/images/index/icon-arrow-blue.png');
  background-size: 100% 100%;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
/* MORE 按钮在底部 */
:where(body.page-home) .back-right-other .back-more {
  margin-top: auto;
}

:where(body.page-home) #security .back-list-other {
  gap: 8px;
}

:where(body.page-home) #security .back-list-other a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
}

/* 仅让 card-back 内的 back-list 居中，不改变任何原有结构 */
:where(body.page-home) .card-back {
  position: relative;
}
:where(body.page-home) .card-back .back-list {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
}
@media (max-width: 768px) {
  :where(body.page-home) #banner-section {
    padding: 40px 20px 60px;
    background-position: center;
  }
  :where(body.page-home) .banner-content {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  :where(body.page-home) .banner-left {
    margin: 0 auto;
  }
  :where(body.page-home) .banner-office-image {
    max-width: 90%;
    margin: 0 auto;
  }
  :where(body.page-home) .banner-right {
    align-items: center;
  }
  :where(body.page-home) .banner-title-en {
    font-size: 42px;
    line-height: 1.2;
  }
  :where(body.page-home) .banner-title-ja, :where(body.page-home) .banner-subtitle {
    font-size: 24px;
    line-height: 1.4;
  }
  :where(body.page-home) .banner-description {
    font-size: 16px;
    line-height: 1.6;
    max-width: 100%;
  }
  :where(body.page-home) .banner-stat-box {
    width: 100%;
    max-width: 380px;
    margin: 10px auto 0;
  }
}
/* 仅在手机端隐藏服务板块标题 */
@media (max-width: 768px) {
  :where(body.page-home) #services-section .services-title-en, :where(body.page-home) #services-section .services-title-ja {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
  }
  :where(body.page-home) #services-section {
    padding: 0 20px;
  }
  /* 上下布局 */
  :where(body.page-home) .services-content-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* 菜单横向 */
:where(body.page-home) .services-menu {
  flex-direction: row !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  padding-bottom: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
:where(body.page-home) .services-menu::-webkit-scrollbar {
  display: none !important;
}
:where(body.page-home) .service-menu-item { flex: 0 0 auto !important; }
   :where(body.page-home) .service-menu-item {
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    margin-left: 0 !important;
  }
   :where(body.page-home) .service-menu-item.active, :where(body.page-home) .service-menu-item:not(.active):hover {
    border-left: none !important;
    border-bottom: 2px solid #0032D6 !important;
  }
   :where(body.page-home) .service-menu-item:not(.active):hover {
    background: #FFF !important;
    margin-left: 0 !important;
  }
  :where(body.page-home) .service-card-group.active {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 22px !important;
  }
  :where(body.page-home) #security.service-card-group.active, :where(body.page-home) #operation.service-card-group.active {
    justify-content: center !important;
  }

  :where(body.page-home) .service-card {
    flex: 0 0 65% !important;
    min-width: 250px !important;
    max-width: 300px !important;
  }
  :where(body.page-home) .service-card .card-front {
    display: none !important;
  }

  /* 普通卡片背面：强制显示 */
  :where(body.page-home) .service-card .card-back {
  transform: rotateY(0) !important;
  backface-visibility: visible !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  height: 100% !important;
  }

  :where(body.page-home) .service-card .card-back::before {
  content: '';
  display: block;
  width: 100%;
  height: 144px;
  background-size: cover;
  background-position: center;
}
  /* 禁用翻转动画 */
  :where(body.page-home) .service-card:hover .card-front {
    transform: none !important;
  }
  :where(body.page-home) .service-card:hover .card-back {
    transform: none !important;
  }

  /* 特殊卡片（security / 保守運用）也统一显示 */
  :where(body.page-home) .service-card.no-front .card-back-other {
    display: flex !important;
    position: relative !important;
     gap: 0 !important;
  }
  /* 手机端：服务卡片只显示背面 + 上下结构（上图片 + 下内容） */
/* 手机端：服务卡片只显示背面 + 上下结构（上图片 + 下内容） */
:where(body.page-home) .service-card .card-front {
  display: none !important;
}


/* 自动匹配每个卡片的图片 */
:where(body.page-home) #ai-dx .service-card:nth-child(1) .card-back::before { background-image: url(/images/index/icon-service-aicard1.png); }
:where(body.page-home) #ai-dx .service-card:nth-child(2) .card-back::before { background-image: url(/images/index/icon-service-aicard2.png); }
:where(body.page-home) #ai-dx .service-card:nth-child(3) .card-back::before { background-image: url(/images/index/icon-service-aicard3.png); }
:where(body.page-home) #dc-cloud .service-card:nth-child(1) .card-back::before { background-image: url(/images/index/icon-service-dccard1.png); }
:where(body.page-home) #dc-cloud .service-card:nth-child(2) .card-back::before { background-image: url(/images/index/icon-service-dccard2.png); }
:where(body.page-home) #dc-cloud .service-card:nth-child(3) .card-back::before { background-image: url(/images/index/icon-service-dccard3.png); }
:where(body.page-home) #network .service-card:nth-child(1) .card-back::before { background-image: url(/images/index/icon-service-netcard1.png); }
:where(body.page-home) #network .service-card:nth-child(2) .card-back::before { background-image: url(/images/index/icon-service-netcard2.png); }

/* 内容正常排版：标题 + 列表 + 底部按钮 */
:where(body.page-home) .service-card .card-back {
  padding: 24px !important;
  gap: 20px !important;
  
}
:where(body.page-home) .service-card .card-back .back-title {
  display: block !important;
  font-size: 22px !important;
  margin-bottom: 0 !important;
}
:where(body.page-home) .service-card .card-back .back-list {
  position: static !important;
  transform: none !important;
  padding: 0 !important;
}
:where(body.page-home) .service-card .card-back .back-more {
  margin-top: auto !important;
}

/* 禁止翻转 */
:where(body.page-home) .service-card:hover .card-front, :where(body.page-home) .service-card:hover .card-back {
  transform: none !important;
}
  :where(body.page-home) .en-static-service-card .card-front {
    display: flex !important;
    position: relative !important;
  }
  :where(body.page-home) .en-static-service-card .card-front > img {
    height: 144px;
  }
  :where(body.page-home) .en-static-service-card .card-back {
    display: none !important;
  }
/* 修复 Security / 保守運用 小屏上图下文（无标题，不占位） */
:where(body.page-home) .service-card.no-front .card-back-other {
  flex-direction: column !important;
  padding: 0 !important;
  height: 100% !important;
}
:where(body.page-home) .service-card.no-front .card-back-other::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 144px !important;
  background-size: cover !important;
  background-position: center !important;
}
:where(body.page-home) #security .service-card.no-front .card-back-other::before {
  background-image: url(/images/index/icon-service-ss1.png) !important;
}
:where(body.page-home) #operation .service-card.no-front .card-back-other::before {
  background-image: url(/images/index/icon-service-ss2.png) !important;
}
:where(body.page-home) .service-card.no-front .back-banner-other {
  display: none !important;
}
:where(body.page-home) .service-card.no-front .back-right-other {
  padding: 24px !important;
  flex: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
:where(body.page-home) .service-card.no-front .back-list-other {
  padding: 0 !important;
  gap: 10px !important;
  margin-top: 0 !important;
}
:where(body.page-home) .service-card.no-front .back-more {
  margin-top: auto !important;
}
 :where(body.page-home) .back-list-other a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
:where(body.page-home) #security .back-list-other {
  gap: 8px !important;
}
:where(body.page-home) #security .back-list-other a {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 20px !important;
}
/* 前3组卡片图片：顶格满宽，不受 padding 影响（和后两组保持一致） */
:where(body.page-home) #ai-dx .service-card .card-back::before, :where(body.page-home) #dc-cloud .service-card .card-back::before, :where(body.page-home) #network .service-card .card-back::before {
  margin-left: -24px !important;
  margin-right: -24px !important;
  margin-top: -24px !important;
  width: calc(100% + 48px) !important;
}
  :where(body.page-home) .service-card .back-list-other, :where(body.page-home) .service-card .back-list {
    height: 206px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  :where(body.page-home) .service-card .back-list{
    height: 160px !important;
  }
}

/* Hero Carousel 移动端布局调整 */
@media (max-width: 768px) {
  /* 隐藏 scroll 提示与左右切换箭头 */
  :where(body.page-home) .scroll-text, :where(body.page-home) .scroll-line, :where(body.page-home) #hero-carousel .news-section-left, :where(body.page-home) #hero-carousel .news-section-right {
    display: none !important;
  }

  /* Dot 区域在最下方，恢复正常文档流 */
  :where(body.page-home) .carousel-dots {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 40px !important;
    background: #FFF !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* Dot 颜色变更为指定颜色 */
  :where(body.page-home) .dot {
    background: #F2F7FB !important;
    opacity: 1 !important;
    height: 6px !important; 
  }
  :where(body.page-home) .dot.active {
    background: #0032D6 !important;
  }

  /* 取消全屏 100vh，高度由内容和图片撑开 */
  :where(body.page-home) #hero-carousel {
    height: auto !important;
    min-height: auto !important;
  }
  :where(body.page-home) .carousel-wrapper {
    height: auto !important;
  }

  /* Carousel Item 使用 padding-top 撑开对应图片的比例高度 */
  :where(body.page-home) .carousel-item {
    position: relative !important;
    height: auto !important;
    padding-top: 120% !important; /* 假设移动端图片比例，可根据实际图片调整 (如 100% 为正方形) */
    background-size: 100% auto !important;
    background-position: top center !important;
  }

  /* 替换移动端专属 Banner 图片 */
  :where(body.page-home) .carousel-item:nth-child(1) {
    background-image: url('/images/index/img-hero-bg-mobile.png') !important;
  }
  :where(body.page-home) .carousel-item:nth-child(2) {
    background-image: url('/images/index/img-hero-bg2-mobile.png') !important;
  }
  :where(body.page-home) .carousel-item:nth-child(3) {
    background-image: url('/images/index/img-hero-bg3-mobile.png') !important;
  }
  :where(body.page-home) .carousel-item:nth-child(4) {
    background-image: url('/images/index/img-hero-bg4-mobile.png') !important;
  }

  /* 文案相对父级定位，位于四宫格上方 40px */
  :where(body.page-home) .hero-text {
    top: auto !important;
    bottom: 232px !important; /* 192px(四宫格高度) + 40px(距四宫格间距) */
    transform: translateX(-50%) !important;
    width: 90% !important;
    gap: 12px !important; /* title和文案间距 12 */
  }

  /* 介绍分成 2x2 四宫格，恢复正常文档流 */
  :where(body.page-home) .hero-icons {
    position: relative !important;
    bottom: auto !important; /* 取消绝对定位下的 bottom */
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 192px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #F2F7FB !important; /* 背景色 */
  }

  /* 用伪元素画十字交叉线 */
  :where(body.page-home) .hero-icons::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: #051243 !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
  }
  :where(body.page-home) .hero-icons::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 1px !important;
    height: 100% !important;
    background: #051243 !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
  }

  /* 图标项内容对齐与层级调整 */
  :where(body.page-home) .icon-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 6px !important;
    z-index: 2 !important; /* 在线条之上 */
  }

  /* 图标转为深蓝色 #051243 (由于原图为白色) */
  :where(body.page-home) .icon-item img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(53%) saturate(2187%) hue-rotate(211deg) brightness(98%) contrast(109%) !important;
  }

  /* 隐藏桌面端的竖向分割线 */
  :where(body.page-home) .icon-item-line {
    display: none !important;
  }

  /* 图标文字改为深色，取消宽度限制 */
  :where(body.page-home) .icon-item span {
    max-width: 100% !important;
    color: #051243 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* 调整标题文本字号适应移动端 */
  :where(body.page-home) .text-line2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
  }
  :where(body.page-home) .text-line1 {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* News 板块移动端优化 */
  :where(body.page-home) .news-section {
    padding: 60px 0 !important;
  }
  :where(body.page-home) .news-outer-wrapper {
    padding: 0 20px !important;
  }
  :where(body.page-home) .news-container {
    padding: 0 !important;
  }
  :where(body.page-home) .news-title {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }
  :where(body.page-home) .news-middle {
    margin-bottom: 24px !important;
  }
  :where(body.page-home) .news-text {
    font-size: 18px !important;
  }
  :where(body.page-home) .news-nav-btn {
    display: none !important;
  }
  :where(body.page-home) .news-nav-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    gap: 16px;
    margin: 8px 0 8px;
    padding: 0;
    box-sizing: border-box;
  }
  :where(body.page-home) .news-prev, :where(body.page-home) .news-next {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
  }
  :where(body.page-home) .news-prev img, :where(body.page-home) .news-next img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
  }
  :where(body.page-home) .news-scrollbar {
    flex: 1 1 auto;
    min-width: 0;
    height: 4px !important;
    background: rgba(5, 18, 67, 0.14) !important;
    position: relative !important;
    margin: 0;
    display: block !important;
  }
  :where(body.page-home) .news-scrollbar .swiper-scrollbar-drag {
    background: linear-gradient(265deg, #1892ee 5.11%, #0032d6 93.64%) !important;
    height: 4px !important;
  }
  :where(body.page-home) .news-scrollbar.swiper-scrollbar-lock, :where(body.page-home) .news-next.swiper-button-lock, :where(body.page-home) .news-prev.swiper-button-lock {
    display: flex !important;
  }
  :where(body.page-home) .news-scrollbar.swiper-scrollbar-lock {
    display: block !important;
  }
  :where(body.page-home) .news-prev.swiper-button-disabled, :where(body.page-home) .news-next.swiper-button-disabled {
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.4 !important;
  }
  :where(body.page-home) .news-content {
    padding-bottom: 20px !important;
  }
  :where(body.page-home) .news-card {
    padding: 20px !important;
  }
  :where(body.page-home) .news-card-desc {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  :where(body.page-home) .news-bottom {
    margin-top: 20px !important;
  }
  :where(body.page-home) .news-more a {
    padding: 10px 30px !important;
    font-size: 14px !important;
  }

  /* About Us 板块移动端优化 */
  :where(body.page-home) #about-section {
    padding: 60px 0 !important;
  }
  :where(body.page-home) #about-section .section-header {
    margin-bottom: 32px !important;
    padding: 0 16px !important;
  }
  :where(body.page-home) #about-section .title-en {
    font-size: 42px !important;
    line-height: 1.2 !important;
  }
  :where(body.page-home) #about-section .title-ja {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-top: -8px !important;
  }
  :where(body.page-home) .about-grid {
    grid-template-columns: 1fr !important; /* 单列布局 */
  }
  :where(body.page-home) .about-card > img {
    height: 240px !important;
  }
}


/* ===== about/index.css scoped to body.page-about ===== */
:where(body.page-about) section[id] {
    scroll-margin-top: calc(var(--header-height, 80px) + 56px);
}

/* Scroll Animation Utilities */
:where(body.page-about) .fade-up-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

:where(body.page-about) .fade-up-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Reset and Base Styles */
/* Hero Banner Section */
:where(body.page-about) .business-hero {
    height: 480px;
    width: 100%;
    background: url('/images/about/img-banner.png') no-repeat center center;
    background-size: cover;
    position: relative;
}


/* Page Sub Nav */
:where(body.page-about) .business-nav {
    width: 100%;
    height: 56px;
    background: radial-gradient(circle at 50% 100%, #0a6ccb 0%, #051243 100%);
    box-shadow: 0px 0px 20px 0px rgba(83, 85, 86, 0.1);
    display: flex;
    justify-content: center;
    position: sticky;
    top: var(--header-height, 80px);
    z-index: 1000;
}

:where(body.page-about) .business-nav a.nav-link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: row; /* 显式设置为横向布局 */
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative;
    gap: 8px;
    flex-wrap: nowrap; /* 禁止换行 */
}

:where(body.page-about) .nav-text {
    display: block;
    white-space: nowrap;
}

:where(body.page-about) .nav-icon {
    display: none; /* 未选中时完全不占据空间 */
    width: 10px;   /* 轻度调大一点，匹配设计稿比例 */
    height: auto;
    flex-shrink: 0; /* 防止图标被压缩 */
}

:where(body.page-about) .business-nav a.nav-link.active .nav-icon {
    display: block; /* 选中时参与 Flex 居中计算 */
}

/* NTT Group About Section */
:where(body.page-about) .business-divider {
    width: 1px;
    height: 40px;
    background: #051243;
    opacity: 0.4;
}

:where(body.page-about) .overview-stats, :where(body.page-about) .strengths-stats {
    text-align: center;
}

:where(body.page-about) .overview-stats > .d-flex.flex-column, :where(body.page-about) .strengths-stats > .d-flex.flex-column {
    align-items: center;
}

:where(body.page-about) .stats-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    text-align: center;
}

:where(body.page-about) .stats-list-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding-left: 0;
    color: #051243;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

:where(body.page-about) .stats-list-item::before {
    content: none;
}

:where(body.page-about) .stats-list-item + .stats-list-item {
    border-left: 1px solid rgba(5, 18, 67, 0.28);
    padding-left: 48px;
}

:where(body.page-about) .stats-list .stats-label {
    font-weight: 400;
    width: 100%;
}

:where(body.page-about) .stats-list .stats-value {
    width: 100%;
    font-weight: 600;
}

:where(body.page-about) .stats-list .counter-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 2px;
}

:where(body.page-about) .stats-list .stats-note {
    width: 100%;
    margin-left: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

:where(body.page-about) .business-cards-item  {
    width: 327px;
    height: 168px;
}

:where(body.page-about) .cards-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* hover态和选中态遮罩显示 */
:where(body.page-about) .business-cards-item:hover .cards-overlay, :where(body.page-about) .business-cards-item.active .cards-overlay {
    opacity: 0.8;
}

/* 卡片底部标签层 */
:where(body.page-about) .cards-label {
    z-index: 2;
    transition: all 0.3s ease;
}

:where(body.page-about) .cards-subtitle {
    display: none;
    font-size: 14px;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.9;
}

/* hover态和选中态显示副标题 */
:where(body.page-about) .business-cards-item:hover .cards-subtitle, :where(body.page-about) .business-cards-item.active .cards-subtitle {
    display: block;
}

/* 箭头图标 */
:where(body.page-about) .cards-arrow {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: rotate(0deg); /* 默认：右箭头 */
    transition: transform 0.3s;
}

/* 仅选中态箭头变为向下，hover不改变箭头方向 */
:where(body.page-about) .business-cards-item.active .cards-arrow {
    transform: rotate(90deg); /* 选中：下箭头 */
}

/* 全球评価 - 一排三个卡片 */
:where(body.page-about) .evaluation-card {
    padding: 24px;
}

:where(body.page-about) .evaluation-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

:where(body.page-about) .business-area-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
}



/* Business Areas Grid - 使用 Grid 实现标准的 2x2 布局 */
:where(body.page-about) .business-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}



/* ==============================================
   Custom History Timeline Graphic
   ============================================== */
:where(body.page-about) .history-timeline-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(body.page-about) .history-timeline-graphic {
    padding: 76px 19px 126px 13px;
}

:where(body.page-about) .history-timeline-line {
    position: absolute;
    left: 40px;
    right: 40px;
    height: 1px;
    border-top: 1px dashed #61A1D2;
    z-index: 1;

}

:where(body.page-about) .timeline-node {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

:where(body.page-about) .node-circle {
    background: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 12px solid #C0D8EB;
    width: 144px;
    height: 144px;
}
:where(body.page-about) .node-sm .node-circle {
   border: 6px solid #C0D8EB;
   width: 64px;
   height: 64px;
}
:where(body.page-about) .node-lg .node-circle {
   border: 18px solid #C0D8EB;
   width: 218px;
   height: 218px;
}

:where(body.page-about) .timeline-node .node-circle::before {
    content: '';
    position: absolute;
    top: -24px; left: -24px; right: -24px; bottom: -24px;
    border: 1px dashed #61A1D2;
    border-radius: 50%;
    pointer-events: none;
    background: #f2f7fb;
    z-index: -1;
}

:where(body.page-about) .timeline-node.node-sm .node-circle::before {
    top: -12px; left: -12px; right: -12px; bottom: -12px;
}


:where(body.page-about) .timeline-node.node-lg .node-circle::before {
    top: -36px; left: -36px; right: -36px; bottom: -36px;
}

:where(body.page-about) .timeline-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

:where(body.page-about) .timeline-label.top {
    bottom: calc(100% + 12px);
}

:where(body.page-about) .timeline-label.bottom {
    top: calc(100% + 12px);
}
:where(body.page-about) .timeline-node.node-sm .timeline-label.top {
    bottom: calc(100% + 6px);
}


:where(body.page-about) .timeline-label .line {
    width: 1px;
    border-left: 1px dotted #61A1D2;
}

:where(body.page-about) .timeline-label.top .line {
    height: 38px;
}

:where(body.page-about) .timeline-label.bottom .line {
    height: 38px;
}

:where(body.page-about) .timeline-node.node-sm .timeline-label.top .line {
    height: 82px;
}


:where(body.page-about) .timeline-label .dot-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

:where(body.page-about) .timeline-label .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
}

:where(body.page-about) .timeline-label .text {
    position: absolute;
    left: calc(100% + 12px);
    top: -8px; /* 通过计算：行高 28px 的一半 = 14px，圆点 12px 的一半 = 6px，14 - 6 = 8px */
    transform: none; /* 去除 translateY 使得圆点对齐文本第一行 */
    white-space: nowrap;
    color: #051243;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

/* Strengths & CEO Section Shared Background */
:where(body.page-about) .business-strengths {
    padding-top: 80px;
    padding-bottom: 204px;
    background: linear-gradient(265deg, rgba(24, 146, 238, 0.1) 5.11%, rgba(0, 50, 214, 0.1) 93.64%);
}

:where(body.page-about) .strengths-tab-list {
    width: 480px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
}

:where(body.page-about) .tab-item {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 48px;
    color: #051243;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px; 
    background: #fff;
    border-bottom: none;
    box-shadow: inset 0 -4px 0 #e5f0f8;
    box-sizing: border-box;
    cursor: pointer;
}

:where(body.page-about) .tab-item:last-child {
    box-shadow: none;
}

:where(body.page-about) .tab-item:hover, :where(body.page-about) .tab-item.active {
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
    color: #FFF;
    box-shadow: none;
}

:where(body.page-about) .strengths-tabs-container {
    width: min(100%, 1024px);
    height: 320px;
    margin: 0 auto;
}

:where(body.page-about) .strengths-tab-content {
    width: 544px;
    flex: none;
    height: 100%;
    overflow: hidden;
}

:where(body.page-about) .content-item {
    display: none;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* 强制 jQuery 显示时使用 flex 布局 */
:where(body.page-about) .content-item[style*="display: block"], :where(body.page-about) .content-item[style*="display: inline-block"] {
    display: flex !important;
}

:where(body.page-about) .img-strength {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

:where(body.page-about) .content-item > div.bg-f2f7fb {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(242, 247, 251, 0.95);
}


/* CEO Message Section */
:where(body.page-about) .business-ceo {
    background: #fff;
    border-radius: 120px;
    border: 1px solid #0032D6;
    box-shadow: 0 0 20px 0 rgba(83, 85, 86, 0.10);
    padding: 80px 80px 40px;
    background-image: 
        linear-gradient(rgba(0, 104, 182, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 104, 182, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}


:where(body.page-about) .ceo-quote-icon {
    position: absolute;
    top: 0;
    right: 0px;
    width: 168px;

}

:where(body.page-about) .ceo-text-content p {
    color:  #051243;
    font-size: 18px;
    line-height: 28px;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
}

:where(body.page-about) .ceo-sign-img {
    width: 127px;
    height: 82px;
    object-fit: contain;
}






/* Custom Bullet List */
:where(body.page-about) .dot-radius {
    position: relative;
    padding-left: 15px;
}

:where(body.page-about) .dot-radius::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: #051243;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* Specific Dot for Stats Row (Vertical Centering) */
:where(body.page-about) .dot-stats {
    position: relative;
    display: grid !important;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 4px;
    padding-left: 0;
    text-align: left;
}

:where(body.page-about) .dot-stats::before {
    content: none;
}

:where(body.page-about) .dot-stats + .dot-stats {
    border-left: 1px solid rgba(5, 18, 67, 0.28);
    margin-left: 48px;
    padding-left: 48px;
}

:where(body.page-about) .dot-stats > span:first-child {
    grid-column: 1 / -1;
}

:where(body.page-about) .dot-stats .counter-value {
    margin-left: 0 !important;
}

:where(body.page-about) .strengths-intro {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

:where(body.page-about) .strengths-intro > :last-child {
    flex: none;
    min-width: 0;
    max-width: 760px;
}

:where(body.page-about) .strengths-intro [style*="height: 1px"] {
    display: none;
}

:where(body.page-about) .strengths-intro .d-flex.align-center.flex-wrap {
    justify-content: center;
    gap: 0 !important;
    margin-top: 24px;
}

:where(body.page-about) .business-strengths h3 {
    text-align: center;
    margin-top: 40px !important;
    margin-bottom: 18px !important;
}


:where(body.page-about) .business-history {
    margin-top: -600px;
    padding-top: 300px;
    background: url('/images/about/img-history-bg.png') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow-x: hidden;
    z-index: 1;
}

:where(body.page-about) .business-history-card{
    padding-top: 186px;
    padding-bottom: 96px;
}
:where(body.page-about) .history-swiper {
    padding-bottom: 20px;
}

:where(body.page-about) .timeline-item {
    height: auto !important;
}

:where(body.page-about) .timeline-year {
    height: 64px;
    color: #FFF;
    font-size: 28px; /* 略微调小字号，确保 7 列布局下长年份不溢出 */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Chevron shape: fixed 30px length for consistency */
    clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%, 30px 50%);
    margin-bottom: 40px;
    padding: 0 10px 0 24px; /* 压缩内边距，为文字腾出空间 */
    transition: background-color 0.3s;
}

/* First item has straight left edge */
:where(body.page-about) .timeline-item:first-child .timeline-year {
    clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
    padding-left: 10px;
}

/* 渐变色效果 - 反转顺序并增加透明度 (0.85) */
:where(body.page-about) .timeline-item:nth-child(1) .timeline-year { background: rgba(0, 50, 214, 0.8); z-index: 7; }
:where(body.page-about) .timeline-item:nth-child(2) .timeline-year { background: rgba(4, 66, 218, 0.8); z-index: 6; }
:where(body.page-about) .timeline-item:nth-child(3) .timeline-year { background: rgba(8, 82, 222, 0.8); z-index: 5; }
:where(body.page-about) .timeline-item:nth-child(4) .timeline-year { background: rgba(12, 98, 226, 0.8); z-index: 4; }
:where(body.page-about) .timeline-item:nth-child(5) .timeline-year { background: rgba(16, 114, 230, 0.8); z-index: 3; }
:where(body.page-about) .timeline-item:nth-child(6) .timeline-year { background: rgba(20, 130, 234, 0.8); z-index: 2; }
:where(body.page-about) .timeline-item:nth-child(7) .timeline-year { background: rgba(24, 146, 238, 0.8); z-index: 1; }

/* Last item has straight right edge to close the bar */
:where(body.page-about) .timeline-item:last-child .timeline-year {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 30px 50%);
    padding-right: 20px;
}


:where(body.page-about) .timeline-content {
    border-right: 2px solid #fff;
    padding: 24px 16px 0 48px;
    min-height: 200px;
    margin-top: 10px;
    width: 0;
    min-width: 100%;
    word-break: break-all;
}

/* 最后一项没有右边框 */
:where(body.page-about) .timeline-item:last-child .timeline-content {
    border-right: none;
}

:where(body.page-about) .timeline-content p {
    line-height: 24px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 12px;
    white-space: normal; /* 确保内容可以换行 */
}
:where(body.page-about) .timeline-content p span {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}


:where(body.page-about) .timeline-nav-container {
    max-width: 1040px; /* 适当增加一点以容纳 48px 按钮 */
    margin: 88px auto 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

:where(body.page-about) .swiper-button-prev-custom, :where(body.page-about) .swiper-button-next-custom {
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.8;
}

:where(body.page-about) .swiper-button-prev-custom img, :where(body.page-about) .swiper-button-next-custom img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

:where(body.page-about) .rotate-180 {
    transform: rotate(180deg);
}



:where(body.page-about) .history-scrollbar {
    flex: 1;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    position: relative !important;
    margin: 0 40px; /* 通过左右间距控制进度条与按钮的距离 */
    display: block !important; /* 强制显示，防止 Swiper 锁定隐藏 */
}

/* 即使没有滚动内容，也保持按钮可见（变淡） */
:where(body.page-about) .swiper-button-disabled {
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.4 !important;
}

/* 强制即使没有滚动内容，也将控件锁定为可见状态（此时滑块为100%宽度） */
:where(body.page-about) .history-scrollbar.swiper-scrollbar-lock, :where(body.page-about) .history-next.swiper-button-lock, :where(body.page-about) .history-prev.swiper-button-lock {
    display: flex !important;
}

/* 进度条特殊显示逻辑 */
:where(body.page-about) .history-scrollbar.swiper-scrollbar-lock {
    display: block !important;
}

:where(body.page-about) .history-scrollbar .swiper-scrollbar-drag {
    background: #FFF !important;
    height: 4px !important;
}

/* ========== 拠点情報 Map Section ========== */
:where(body.page-about) .business-map {
    padding: 52px 0 20px;
    background: url('/images/about/img-map-bg.png') no-repeat center center;
    background-size: cover;
}

:where(body.page-about) .business-map h2 {
    margin-top: 0 !important;
}

:where(body.page-about) .map-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* 左侧详情面板 */
:where(body.page-about) .map-detail-panel {
    width: 360px;
    flex-shrink: 0;
    background: #fff;
    position: absolute;
    left: 10px;
    top: 30%;
    z-index: 10;
    padding-top: 4px;
    overflow: hidden;
}

:where(body.page-about) .map-detail-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
    z-index: 2;
}

:where(body.page-about) .map-detail-image {
    width: 100%;
    height: 120px;
    overflow: hidden;
}

:where(body.page-about) .map-detail-info {
    padding: 32px 24px 48px;
}

:where(body.page-about) .map-detail-pin {
    width: 57px;
}

/* 地图容器 */
:where(body.page-about) .map-container {
    flex: 1;
    margin-left: 40px;
}

:where(body.page-about) .map-image {
    display: block;
}

/* 城市标注 */
:where(body.page-about) .map-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 5;
    transform: translate(-50%, -50%);
}

/* 标签在图标左侧 */
:where(body.page-about) .map-marker.label-left {
    flex-direction: row-reverse;
}

:where(body.page-about) .marker-icon {
    width: 28px;
    height: 36px;
    flex-shrink: 0;
    background: url('/images/about/icon-position.png') no-repeat center center;
    background-size: contain;
    transition: transform 0.3s, background-color 0.3s;
}

:where(body.page-about) .marker-label {
    color: #051243;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    padding: 8px 12px;
    background: #FFF;
    border-radius: 12px;
    white-space: nowrap;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* hover / active 态 - 图标放大 + 换图 */
:where(body.page-about) .map-marker:hover .marker-icon, :where(body.page-about) .map-marker.active .marker-icon {
    transform: scale(1.1);
    background-image: url('/images/about/icon-position-active.png');
}

:where(body.page-about) .map-marker:hover .marker-label, :where(body.page-about) .map-marker.active .marker-label {
    box-shadow: 0 0 1px 1px #0032D6, 0 0 15px 0 #0032D6;
    background-color: #051243;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

/* ========== 社外からの評価 Evaluation Carousel ========== */
:where(body.page-about) .business-evaluation {
    padding-top: 80px;
    padding-bottom: 204px;
}

:where(body.page-about) .evaluation-nav {
    flex-shrink: 0;
}

:where(body.page-about) .eval-nav-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: opacity 0.3s;
}

:where(body.page-about) .eval-nav-icon:hover {
    opacity: 0.8;
}

:where(body.page-about) .rotate-180-y {
    transform: scaleX(-1);
}

/* Swiper 轮播容器 */
:where(body.page-about) .eval-swiper {
    margin-top: clamp(20px, 5vw, 80px);
}

:where(body.page-about) .eval-carousel-item {
    display: flex;
    align-items: flex-start;
}

/* 叶子 - 正常流，顶部对齐 */
:where(body.page-about) .eval-leaf-left, :where(body.page-about) .eval-leaf-right {
    flex-shrink: 0;
    width: 70px;
    height: 150px;
}

:where(body.page-about) .eval-leaf-right {
    transform: scaleX(-1);
}

:where(body.page-about) .eval-leaf-left .leaf-img, :where(body.page-about) .eval-leaf-right .leaf-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 中间内容区域 */
:where(body.page-about) .eval-item-inner {
    flex: 1;
    min-width: 0;
}

/* 年份水印背景 */
:where(body.page-about) .eval-year-bg {
    position: absolute;
    top: 0;
    right: 0;
    color: #0068B6;
    font-size: 48px;
    font-weight: 600;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}

/* 内容层 - 在装饰之上 */
:where(body.page-about) .eval-item-content {
    position: relative;
    z-index: 1;
}


/* ==============================================
   Responsive - Tablet (max-width: 1200px)
   ============================================== */
@media (max-width: 1200px) {
    :where(body.page-about) .section-max {
        padding-left: 24px;
        padding-right: 24px;
    }
    /* Nav - horizontal scroll */
    :where(body.page-about) .business-nav .section-max {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }

    :where(body.page-about) .business-nav a.nav-link {
        white-space: nowrap;
        padding: 0 12px;
    }

    /* Business About */
    :where(body.page-about) .business-about h2 {
        font-size: 28px !important;
        line-height: 40px !important;
    }

    /* Business Cards - Maintain 3 in a row on tablets */
    :where(body.page-about) .business-cards {
        gap: 16px;
        flex-wrap: wrap; /* 允许必要时换行，但通过宽度控制一行三个 */
        justify-content: space-between;
    }

    :where(body.page-about) .business-cards-item {
        width: calc(33.33% - 11px); 
        flex: none;
        height: 160px;
    }

    /* Strengths Tabs */
    :where(body.page-about) .strengths-tab-list {
        width: 420px;
    }

    :where(body.page-about) .strengths-tab-content {
        flex: 1;
        width: auto;
    }

    :where(body.page-about) .tab-item {
        padding: 0 36px;
        font-size: 16px;
        height: 80px;
        line-height: 28px;
    }

    :where(body.page-about) .strengths-tabs-container {
        width: min(100%, 900px);
        height: 320px;
    }

    :where(body.page-about) .strengths-tab-content {
        width: auto;
        flex: 1;
    }

    /* CEO */
    :where(body.page-about) .business-ceo {
        border-radius: 80px;
    }

    /* Map */
    :where(body.page-about) .map-detail-panel {
        width: 280px;
    }

    :where(body.page-about) .map-container {
        margin-left: 20px;
    }

    :where(body.page-about) .marker-label {
        font-size: 12px;
        padding: 5px 8px;
    }

    :where(body.page-about) .marker-icon {
        width: 22px;
        height: 28px;
    }
}


/* ==============================================
   Responsive - Mobile (max-width: 768px)
   ============================================== */
@media (max-width: 768px) {
    :where(body.page-about) .font-32 {
        font-size: 24px !important;
    }
    :where(body.page-about) .font-24 {
        font-size: 18px !important;
    }
    :where(body.page-about) .section-max {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hero */
    :where(body.page-about) .business-hero {
        height: clamp(200px, 50vw, 320px);
    }

    :where(body.page-about) .business-hero h1 {
        font-size: 32px !important;
    }

    :where(body.page-about) .business-nav {
        height: 48px;
    }

    :where(body.page-about) .business-nav .section-max {
        padding-left: 10px;
        padding-right: 10px;
        gap: 0;
    }

    :where(body.page-about) .business-nav a.nav-link {
        font-size: 12px;
        padding: 0 8px;
    }

    :where(body.page-about) .nav-icon {
        width: 8px;
    }

    :where(body.page-about) .business-about h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    :where(body.page-about) .business-about p {
        font-size: 14px !important;
        margin-top: 16px !important;
        line-height: 24px !important;
    }

    /* 统计项保持居中 */
    :where(body.page-about) .business-about .d-flex.justify-center {
        flex-direction: column;
        align-items: center !important; 
        gap: 20px;
    }
    
    :where(body.page-about) .business-about .flex-column:not(.cards-label *) {
        align-items: center;
    }

    /* 卡片内部文字左对齐 */
    :where(body.page-about) .cards-label .flex-column {
        align-items: flex-start !important;
    }

    /* 时间轴缩略显示，防止节点重叠 */
    :where(body.page-about) .history-timeline-graphic {
        min-width: 1100px;
        zoom: 0.6;
        padding-bottom: 240px; 
    }

    :where(body.page-about) .business-divider {
        display: none;
    }

    /* Business Cards - Switch to 1 per row on mobile */
    :where(body.page-about) .business-cards {
        flex-direction: column; /* 手机端一排一个 */
        gap: 16px;
        margin-top: 32px;
        overflow-x: hidden; /* 防止内容撑开页面 */
    }

    :where(body.page-about) .business-cards-item {
        width: 100% !important; /* 占满整行 */
        height: 160px;
        flex: none;
    }

    /* Details Panel & Evaluation Cards */
    :where(body.page-about) .details-panel {
        padding-top: 40px;
        padding-bottom: 40px !important;
    }

    /* Mobile specific style when panel is moved into card list */
    :where(body.page-about) .details-panel.is-mobile-active {
        background-color: #f2f7fb;
        padding-left: 16px;
        padding-right: 16px;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* 自身不滚动，让内部 wrapper 滚动 */
    }
    
    :where(body.page-about) .details-panel.is-mobile-active .history-timeline-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        min-width: 0;
    }

    :where(body.page-about) .details-panel p {
        font-size: 14px !important;
        padding: 0 10px;
    }

    :where(body.page-about) .business-areas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    :where(body.page-about) .business-area-card {
        padding: 20px !important;
    }

    :where(body.page-about) .evaluation-cards {
        flex-direction: column !important; /* 强制手机端一排一个 */
        gap: 16px !important;
        overflow-x: visible;
        padding-bottom: 0;
    }

    :where(body.page-about) .evaluation-card {
        width: 100% !important;
        flex: none;
        padding: 24px !important;
        box-sizing: border-box;
    }

    :where(body.page-about) .evaluation-icon {
        width: 64px;
        height: 64px;
    }

    /* Strengths Section - Title on new line */
    :where(body.page-about) .business-strengths {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    :where(body.page-about) .business-strengths .strengths-intro {
        flex-direction: column; /* 标题另起一行 */
        gap: 20px;
    }

    :where(body.page-about) .about-title-split > span {
        display: block;
    }

    :where(body.page-about) .overview-stats {
        flex-direction: column;
        gap: 24px;
        margin-top: 28px !important;
        text-align: center;
    }

    :where(body.page-about) .overview-stats > .d-flex.flex-column {
        align-items: center;
        width: 100%;
    }

    :where(body.page-about) .overview-stats .business-divider {
        display: none;
    }

    :where(body.page-about) .overview-stats .font-14 {
        font-size: 14px !important;
        line-height: 24px !important;
    }

    :where(body.page-about) .overview-stats .font-16 {
        font-size: 16px !important;
        line-height: 34px !important;
    }

    :where(body.page-about) .overview-stats .counter-value {
        display: inline-block;
        font-size: 24px !important;
        line-height: 32px !important;
        margin-right: 4px !important;
    }

    :where(body.page-about) .stats-list {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    :where(body.page-about) .stats-list-item {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding-left: 0;
        font-size: 16px;
        line-height: 26px;
    }

    :where(body.page-about) .stats-list-item::before {
        content: none;
    }

    :where(body.page-about) .stats-list-item + .stats-list-item {
        border-left: 0;
        padding-left: 18px;
    }

    :where(body.page-about) .stats-list .stats-label, :where(body.page-about) .stats-list .stats-value, :where(body.page-about) .stats-list .stats-note {
        width: auto;
    }

    :where(body.page-about) .stats-list .stats-note {
        flex-basis: 100%;
        text-align: center;
    }

    :where(body.page-about) .stats-list .counter-value {
        font-size: 24px;
        line-height: 30px;
    }

    :where(body.page-about) .dot-stats {
        margin-bottom: 12px;
    }

    :where(body.page-about) .strengths-tabs-container {
        flex-direction: column;
        height: auto;
    }

   
    /* Mobile Accordion Styles */
    :where(body.page-about) .strengths-accordion {
        margin-top: 24px;
        display: block !important;
    }
    :where(body.page-about) .strengths-tabs-container {
        display: none !important;
    }

    :where(body.page-about) .accordion-item {
        background: #fff;
        margin-bottom: 4px; /* 减小标题块之间的间距 */
        border-radius: 0;   /* 严格参考设计图：无圆角 */
        overflow: hidden;
        box-shadow: none;   /* 严格参考设计图：无阴影 */
    }

    :where(body.page-about) .accordion-header {
        padding: 12px; /* 参考图：上下 12px，左右 30px */
        cursor: pointer;
        background: #fff;
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
    }

    :where(body.page-about) .accordion-item.active .accordion-header {
        background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
        border-bottom: none;
    }

    :where(body.page-about) .accordion-header .header-text {
        font-size: 18px;    /* 参考图：18px */
        font-weight: 500;   /* 参考图：500 */
        line-height: 32px;  /* 参考图：32px */
        color: #051243;
    }

    :where(body.page-about) .accordion-item.active .accordion-header .header-text {
        color: #fff;
    }

    :where(body.page-about) .accordion-icon {
        width: 8px;
        height: auto;
        transition: transform 0.3s ease;
        filter: brightness(0.2);
        transform: rotate(-90deg); /* 默认折叠状态：箭头指向右侧 */
    }

    :where(body.page-about) .accordion-item.active .accordion-icon {
        transform: rotate(0deg); /* 展开状态：箭头指向下方 */
        filter: brightness(0) invert(1);
    }

    :where(body.page-about) .accordion-content {
        background: #fff;
        position: relative;
        overflow: hidden;
        /* 移除固定 height: 216px !important，否则 slideDown 无法计算高度导致动画丢失 */
        display: none; 
    }

    /* 确保图片撑起容器高度，且不压缩变形 */
    :where(body.page-about) .accordion-content img {
        display: block;
        width: 100%;
        height: 216px !important; /* 参考：固定高度 216px */
        object-fit: cover;        /* 裁剪填充，保持宽高比 */
        object-position: top;     /* 严格参考：从上往下裁剪，优先保留顶部内容 */
    }

    :where(body.page-about) .content-text {
        position: absolute; /* 核心：盖在图片上 */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        padding: 16px 20px !important;
        background: rgba(242, 247, 251, 0.84); /* 浅蓝色半透明背景，确保文字看清 */
        font-size: 14px;
        color: #051243;
        line-height: 1.6;
        backdrop-filter: blur(4px); /* 磨砂玻璃效果，增加高级感 */
    }

    /* CEO Section */
    :where(body.page-about) .business-ceo {
        margin-top: 40px;   /* 添加顶部间距 */  
        padding: 20px 12px;
        border-radius: 60px;
    }

    :where(body.page-about) .business-ceo h2 {
        margin-bottom: 24px !important;
    }

    :where(body.page-about) .ceo-signature {
        margin-top: 32px !important;
    }

    :where(body.page-about) .ceo-text-content p {
        font-size: 14px;
        line-height: 24px;
    }

    :where(body.page-about) .ceo-quote-icon { width: 80px; }

    /* History */
    :where(body.page-about) .business-history {
        margin-top: 0;
        padding-top: 0;
        background: url('/images/about/img-history-bg.png') no-repeat center center;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
        z-index: 1;
    }

    :where(body.page-about) .timeline-year {
        font-size: 16px;
        height: 40px;
        padding: 0 8px 0 16px;
        margin-bottom: 20px;
        clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%);
    }

    :where(body.page-about) .timeline-item:first-child .timeline-year {
        padding-left: 8px;
    }

    :where(body.page-about) .timeline-content { min-height: 120px; }

    /* Map Section - stacked layout */
    :where(body.page-about) .business-map {
        padding: 32px 0 72px;
    }

    :where(body.page-about) .business-map h2 {
        font-size: 24px !important;
        margin-bottom: 16px;
    }

    :where(body.page-about) .map-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    :where(body.page-about) .map-detail-panel {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        order: 2;
    }

    :where(body.page-about) .map-detail-image {
        width: 140px;
        height: auto;
        flex-shrink: 0;
    }

    :where(body.page-about) .map-detail-info {
        padding: 16px;
        flex: 1;
    }

    :where(body.page-about) .map-detail-info h3 {
        font-size: 18px !important;
    }

    :where(body.page-about) .map-detail-info p {
        font-size: 14px !important;
    }

    :where(body.page-about) .map-detail-pin {
        width: 40px;
    }

    :where(body.page-about) .map-container {
        margin-left: 0;
        order: 1;
    }

    :where(body.page-about) .marker-label {
        font-size: 11px;
        padding: 4px 6px;
        border-radius: 8px;
    }

    :where(body.page-about) .marker-icon {
        width: 18px;
        height: 24px;
    }

    :where(body.page-about) .map-marker {
        gap: 3px;
    }

    /* Evaluation Carousel - Mobile */
    :where(body.page-about) .business-evaluation {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    :where(body.page-about) .business-evaluation .section-max .d-flex.justify-between.align-end {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    /* Remove navigation buttons on mobile */
    :where(body.page-about) .evaluation-nav {
        display: none !important;
    }

    /* Show all items one by one in a column */
    :where(body.page-about) .eval-swiper {
        margin-top: 40px !important;
        padding: 0 16px !important;
        overflow: visible; /* Allow content to flow naturally */
    }

    :where(body.page-about) .eval-swiper .swiper-wrapper {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        gap: 40px;
    }

    :where(body.page-about) .eval-swiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }


    :where(body.page-about) .eval-year-bg {
        font-size: 36px;
    }
}


/* ===== about/contact.css scoped to body.page-about-contact ===== */
:where(body.page-about-contact) .form-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #051243;
  padding-bottom: 20px;
}

:where(body.page-about-contact) .form-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

:where(body.page-about-contact) .form-hero-bg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

:where(body.page-about-contact) .form-content-max {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

:where(body.page-about-contact) .form-title {
  padding: clamp(100px, 13.89vw, 200px) clamp(20px, 8.33vw, 120px) clamp(40px, 5.56vw, 80px) 20px;
  color: #FFF;
  font-size: clamp(28px, 4.17vw, 60px);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

:where(body.page-about-contact) .contact-form {
  position: relative;
  margin: 0 20px 0;
  background: #FFF;
  border-radius: clamp(24px, 4vw, 48px);
  box-shadow: 0 0 20px 0 rgba(83, 85, 86, 0.10);
  overflow: hidden;
  z-index: 1;
}


:where(body.page-about-contact) #footer {
  position: relative;
  z-index: 1;
  margin-top: 0;
}


:where(body.page-about-contact) .form-main {
  padding: clamp(24px, 3.33vw, 48px);
}

:where(body.page-about-contact) .main-title {
  padding-bottom: clamp(20px, 2.78vw, 40px);
  color: #051243;
  font-size: clamp(16px, 1.67vw, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.33;
}

/* Section 样式 */
:where(body.page-about-contact) .form-section {
  margin-bottom: clamp(20px, 4vw, 40px);
}

:where(body.page-about-contact) .section-title {
  color: #0068B6;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 500;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #F2F7FB;
}

:where(body.page-about-contact) .section-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #0068B6;
  border-radius: 50%;
  margin-right: 8px;
}

:where(body.page-about-contact) .section-title span {
  display: none;
}

/* Radio Group 样式 */
:where(body.page-about-contact) .radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

:where(body.page-about-contact) .radio-group.vertical {
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

:where(body.page-about-contact) .radio-group.vertical .radio-label {
  width: auto;
  max-width: 100%;
}

:where(body.page-about-contact) .radio-group.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 在大屏幕下，为了让2列的宽度与4列的2个格子宽度一致，我们使用计算。
   假设总宽度是 100%，四列的每个格子宽度是 (100% - 3*16px) / 4。
   2个格子加上中间的gap宽度就是：2 * ((100% - 48px) / 4) + 16px = 50% - 8px。
   我们可以通过设置 grid-template-columns 为固定的 calc(50% - 8px) 来实现对齐。 */
:where(body.page-about-contact) .radio-group.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 8px));
  gap: 16px;
}

:where(body.page-about-contact) .radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #051243;
  margin-bottom: 0;
  line-height: 1.5;
  padding: 12px 16px;
  border: 1px solid #E5F0F8;
  border-radius: 2px;
  background-color: #FFF;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

:where(body.page-about-contact) .radio-label.active, :where(body.page-about-contact) .radio-label:has(input[type="radio"]:checked), :where(body.page-about-contact) .radio-label:has(input[type="checkbox"]:checked) {
  background-color: #F2F7FB;
  border-color: #F2F7FB;
}

:where(body.page-about-contact) .radio-label input[type="radio"], :where(body.page-about-contact) .radio-label input[type="checkbox"] {
  display: none;
}

:where(body.page-about-contact) .radio-custom {
  width: 24px;
  height: 24px;
  background-image: url('/images/about/icon-check.png');
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 12px;
  display: inline-block;
  flex-shrink: 0;
}

:where(body.page-about-contact) .radio-label.active .radio-custom, :where(body.page-about-contact) .radio-label input[type="radio"]:checked + .radio-custom, :where(body.page-about-contact) .radio-label input[type="checkbox"]:checked + .radio-custom {
  background-image: url('/images/about/icon-checked.png');
}

:where(body.page-about-contact) .radio-group.error {
  border: 1px solid #d32f2f;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(211, 47, 47, 0.05);
}

:where(body.page-about-contact) .contact-methods {
  display: flex;
  gap: 40px;
}



:where(body.page-about-contact) .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(20px, 4vw, 48px);
}


:where(body.page-about-contact) .form-group {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

:where(body.page-about-contact) .form-group.full-width {
  flex: 1 1 100%;
  margin-bottom: 40px;
}

:where(body.page-about-contact) .form-group.full-width textarea {
  height: 80px;
  min-height: 80px;
}


:where(body.page-about-contact) label {
  margin-bottom: 4px;
  color:  #051243;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

:where(body.page-about-contact) label .required {
  color: #C03;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 1.5 */
  margin-left: 4px;
}


:where(body.page-about-contact) input[type="text"], :where(body.page-about-contact) input[type="tel"], :where(body.page-about-contact) input[type="email"], :where(body.page-about-contact) select, :where(body.page-about-contact) textarea {
  padding: 10px;
  border: 1px solid #E5F0F8;
  background:  #FFF;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  width: 100%;
  color: #1A1A1A;
  outline: none;
  box-sizing: border-box;
}

:where(body.page-about-contact) textarea {
  text-align: left;
  text-indent: 0;
  direction: ltr;
  unicode-bidi: plaintext;
  min-height: 80px;
  resize: vertical;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
}

:where(body.page-about-contact) input[type="text"], :where(body.page-about-contact) input[type="tel"], :where(body.page-about-contact) input[type="email"], :where(body.page-about-contact) select {
  height: 48px;
}


:where(body.page-about-contact) input[type="text"]::placeholder, :where(body.page-about-contact) input[type="tel"]::placeholder, :where(body.page-about-contact) input[type="email"]::placeholder, :where(body.page-about-contact) textarea::placeholder {
  color:  #7C8190;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-indent: 0;
  opacity: 1;
}


:where(body.page-about-contact) select {
  color:  #7C8190;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

:where(body.page-about-contact) select option {
  color: #1A1A1A;
}


:where(body.page-about-contact) .contact-column {
  display: flex;
  flex-direction: column;
}

:where(body.page-about-contact) .contact-column .contact-preference {
  margin-top: 12px;
}

:where(body.page-about-contact) .contact-preference {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(body.page-about-contact) .contact-preference input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

:where(body.page-about-contact) .contact-preference label {
  margin-bottom: 0;
  cursor: pointer;
}

:where(body.page-about-contact) .captcha-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

:where(body.page-about-contact) .captcha-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

:where(body.page-about-contact) .captcha-row input[type="text"] {
  flex: 1;
  max-width: 522px;
  min-width: 200px;
  height: 48px;
  box-sizing: border-box;
}

:where(body.page-about-contact) #captchaImage {
  width: 120px;
  height: 48px;
  border: 1px solid #cce5ff;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  background: #fff5f5;
  box-sizing: border-box;
}


:where(body.page-about-contact) .privacy-notice-wrapper {
  background-color: #F2F7FB;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 40px 0 40px 0;
}

:where(body.page-about-contact) .privacy-title {
  color: #051243;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

:where(body.page-about-contact) .privacy-notice {
  font-size: 16px;
  line-height: 24px;
  color:  #051243;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 24px;
}

:where(body.page-about-contact) .privacy-notice a {
  color:  #0032D6;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-underline-position: from-font;
}

:where(body.page-about-contact) .privacy-notice a:hover {
  text-decoration: underline;
}

:where(body.page-about-contact) .agree-checkbox {
  display: flex;
  align-items: center;
  width: auto;
}

:where(body.page-about-contact) .privacy-agree-label {
  padding: 0;
  border: none;
  background-color: transparent !important;
  width: auto;
}

:where(body.page-about-contact) .privacy-agree-label.active, :where(body.page-about-contact) .privacy-agree-label:has(input[type="checkbox"]:checked) {
  background-color: transparent !important;
  border-color: transparent !important;
}

:where(body.page-about-contact) .privacy-agree-label .radio-custom {
  background-color: transparent;
}


:where(body.page-about-contact) button[type="submit"].form-submit {
border-radius: 100px;
background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
width: 175px;
height: 48px;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 12px 16px;
align-items: center;
color:  #FFF;
font-size: 16px;
font-weight: 400;
transition: opacity 0.3s ease;
}

:where(body.page-about-contact) button[type="submit"].form-submit:hover {
  opacity: 0.9;
}

/* 提交状态 */
:where(body.page-about-contact) .forminput {
  display: block;
}

:where(body.page-about-contact) .success {
  display: none;
  padding: 100px 20px;
  text-align: center;
  font-size: 24px;
  color: #051243;
  font-weight: 600;
}

/* 校验标红 */
:where(body.page-about-contact) input.error, :where(body.page-about-contact) select.error, :where(body.page-about-contact) textarea.error {
  border-color: #d32f2f !important;
}

:where(body.page-about-contact) .agree-checkbox.error label {
  color: #d32f2f;
}

:where(body.page-about-contact) button[type="submit"].form-submit img {
  width: 16px;
  height: 16px;
}


body.page-about-contact {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}


@media (max-width: 768px) {
  :where(body.page-about-contact) .form-page::before {
    height: 400px;
  }
  :where(body.page-about-contact) .form-title {
    padding: 80px 20px 30px 20px;
  }
  :where(body.page-about-contact) .form-row {
    flex-direction: column;
    gap: 20px;
  }
  :where(body.page-about-contact) .radio-group.grid-4, :where(body.page-about-contact) .radio-group.grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  :where(body.page-about-contact) .captcha-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  :where(body.page-about-contact) .captcha-row input[type="text"] {
    max-width: none;
    min-width: 0;
  }
  :where(body.page-about-contact) .captcha-img {
    text-align: center;
  }
}

@media (max-width: 480px) {
  :where(body.page-about-contact) .form-page::before {
    height: 300px;
  }
  :where(body.page-about-contact) .form-title {
    font-size: 24px;
    padding: 60px 16px 20px 16px;
  }
  :where(body.page-about-contact) .contact-form {
    margin: 30px 16px 0;
    border-radius: 24px;
  }
  :where(body.page-about-contact) .form-main {
    padding: 16px;
  }
  :where(body.page-about-contact) .radio-group.grid-4, :where(body.page-about-contact) .radio-group.grid-2 {
    grid-template-columns: 1fr;
  }
  :where(body.page-about-contact) .contact-methods {
    flex-direction: column;
    gap: 12px;
  }
  :where(body.page-about-contact) .privacy-notice {
    font-size: 14px;
    line-height: 20px;
  }
  :where(body.page-about-contact) button[type="submit"].form-submit {
    width: 100%;
  }
}

/* ===== about/contact.css scoped to [data-model-page="contact"] for CMS model ===== */
[data-model-page="contact"] .form-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #051243;
  padding-bottom: 20px;
}

[data-model-page="contact"] .form-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

[data-model-page="contact"] .form-hero-bg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

[data-model-page="contact"] .form-content-max {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

[data-model-page="contact"] .form-title {
  padding: clamp(100px, 13.89vw, 200px) clamp(20px, 8.33vw, 120px) clamp(40px, 5.56vw, 80px) 20px;
  color: #FFF;
  font-size: clamp(28px, 4.17vw, 60px);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

[data-model-page="contact"] .contact-form {
  position: relative;
  margin: 0 20px 0;
  background: #FFF;
  border-radius: clamp(24px, 4vw, 48px);
  box-shadow: 0 0 20px 0 rgba(83, 85, 86, 0.10);
  overflow: hidden;
  z-index: 1;
}


[data-model-page="contact"] #footer {
  position: relative;
  z-index: 1;
  margin-top: 0;
}


[data-model-page="contact"] .form-main {
  padding: clamp(24px, 3.33vw, 48px);
}

[data-model-page="contact"] .main-title {
  padding-bottom: clamp(20px, 2.78vw, 40px);
  color: #051243;
  font-size: clamp(16px, 1.67vw, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.33;
}

/* Section 样式 */
[data-model-page="contact"] .form-section {
  margin-bottom: clamp(20px, 4vw, 40px);
}

[data-model-page="contact"] .section-title {
  color: #0068B6;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 500;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #F2F7FB;
}

[data-model-page="contact"] .section-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #0068B6;
  border-radius: 50%;
  margin-right: 8px;
}

/* Radio Group 样式 */
[data-model-page="contact"] .radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

[data-model-page="contact"] .radio-group.vertical {
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

[data-model-page="contact"] .radio-group.vertical .radio-label {
  width: auto;
  max-width: 100%;
}

[data-model-page="contact"] .radio-group.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 在大屏幕下，为了让2列的宽度与4列的2个格子宽度一致，我们使用计算。
   假设总宽度是 100%，四列的每个格子宽度是 (100% - 3*16px) / 4。
   2个格子加上中间的gap宽度就是：2 * ((100% - 48px) / 4) + 16px = 50% - 8px。
   我们可以通过设置 grid-template-columns 为固定的 calc(50% - 8px) 来实现对齐。 */
[data-model-page="contact"] .radio-group.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 8px));
  gap: 16px;
}

[data-model-page="contact"] .radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #051243;
  margin-bottom: 0;
  line-height: 1.5;
  padding: 12px 16px;
  border: 1px solid #E5F0F8;
  border-radius: 2px;
  background-color: #FFF;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

[data-model-page="contact"] .radio-label.active, [data-model-page="contact"] .radio-label:has(input[type="radio"]:checked), [data-model-page="contact"] .radio-label:has(input[type="checkbox"]:checked) {
  background-color: #F2F7FB;
  border-color: #F2F7FB;
}

[data-model-page="contact"] .radio-label input[type="radio"], [data-model-page="contact"] .radio-label input[type="checkbox"] {
  display: none;
}

[data-model-page="contact"] .radio-custom {
  width: 24px;
  height: 24px;
  background-image: url('/images/about/icon-check.png');
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 12px;
  display: inline-block;
  flex-shrink: 0;
}

[data-model-page="contact"] .radio-label.active .radio-custom, [data-model-page="contact"] .radio-label input[type="radio"]:checked + .radio-custom, [data-model-page="contact"] .radio-label input[type="checkbox"]:checked + .radio-custom {
  background-image: url('/images/about/icon-checked.png');
}

[data-model-page="contact"] .radio-group.error {
  border: 1px solid #d32f2f;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(211, 47, 47, 0.05);
}

[data-model-page="contact"] .contact-methods {
  display: flex;
  gap: 40px;
}



[data-model-page="contact"] .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(20px, 4vw, 48px);
}


[data-model-page="contact"] .form-group {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

[data-model-page="contact"] .form-group.full-width {
  flex: 1 1 100%;
  margin-bottom: 40px;
}

[data-model-page="contact"] .form-group.full-width textarea {
  height: 80px;
  min-height: 80px;
}


[data-model-page="contact"] label {
  margin-bottom: 4px;
  color:  #051243;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

[data-model-page="contact"] label .required {
  color: #C03;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 1.5 */
  margin-left: 4px;
}


[data-model-page="contact"] input[type="text"], [data-model-page="contact"] input[type="tel"], [data-model-page="contact"] input[type="email"], [data-model-page="contact"] select, [data-model-page="contact"] textarea {
  padding: 10px;
  border: 1px solid #E5F0F8;
  background:  #FFF;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  width: 100%;
  color: #1A1A1A;
  outline: none;
  box-sizing: border-box;
}

[data-model-page="contact"] textarea {
  text-align: left;
  text-indent: 0;
  direction: ltr;
  unicode-bidi: plaintext;
  min-height: 80px;
  resize: vertical;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
}

[data-model-page="contact"] input[type="text"], [data-model-page="contact"] input[type="tel"], [data-model-page="contact"] input[type="email"], [data-model-page="contact"] select {
  height: 48px;
}


[data-model-page="contact"] input[type="text"]::placeholder, [data-model-page="contact"] input[type="tel"]::placeholder, [data-model-page="contact"] input[type="email"]::placeholder, [data-model-page="contact"] textarea::placeholder {
  color:  #7C8190;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-indent: 0;
  opacity: 1;
}


[data-model-page="contact"] select {
  color:  #7C8190;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

[data-model-page="contact"] select option {
  color: #1A1A1A;
}


[data-model-page="contact"] .contact-column {
  display: flex;
  flex-direction: column;
}

[data-model-page="contact"] .contact-column .contact-preference {
  margin-top: 12px;
}

[data-model-page="contact"] .contact-preference {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-model-page="contact"] .contact-preference input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

[data-model-page="contact"] .contact-preference label {
  margin-bottom: 0;
  cursor: pointer;
}

[data-model-page="contact"] .captcha-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

[data-model-page="contact"] .captcha-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

[data-model-page="contact"] .captcha-row input[type="text"] {
  flex: 1;
  max-width: 522px;
  min-width: 200px;
  height: 48px;
  box-sizing: border-box;
}

[data-model-page="contact"] #captchaImage {
  width: 120px;
  height: 48px;
  border: 1px solid #cce5ff;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  background: #fff5f5;
  box-sizing: border-box;
}


[data-model-page="contact"] .privacy-notice-wrapper {
  background-color: #F2F7FB;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 40px 0 40px 0;
}

[data-model-page="contact"] .privacy-title {
  color: #051243;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

[data-model-page="contact"] .privacy-notice {
  font-size: 16px;
  line-height: 24px;
  color:  #051243;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 24px;
}

[data-model-page="contact"] .privacy-notice a {
  color:  #0032D6;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-underline-position: from-font;
}

[data-model-page="contact"] .privacy-notice a:hover {
  text-decoration: underline;
}

[data-model-page="contact"] .agree-checkbox {
  display: flex;
  align-items: center;
  width: auto;
}

[data-model-page="contact"] .privacy-agree-label {
  padding: 0;
  border: none;
  background-color: transparent !important;
  width: auto;
}

[data-model-page="contact"] .privacy-agree-label.active, [data-model-page="contact"] .privacy-agree-label:has(input[type="checkbox"]:checked) {
  background-color: transparent !important;
  border-color: transparent !important;
}

[data-model-page="contact"] .privacy-agree-label .radio-custom {
  background-color: transparent;
}


[data-model-page="contact"] button[type="submit"].form-submit {
border-radius: 100px;
background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
width: 175px;
height: 48px;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 12px 16px;
align-items: center;
color:  #FFF;
font-size: 16px;
font-weight: 400;
transition: opacity 0.3s ease;
}

[data-model-page="contact"] button[type="submit"].form-submit:hover {
  opacity: 0.9;
}

/* 提交状态 */
[data-model-page="contact"] .forminput {
  display: block;
}

[data-model-page="contact"] .success {
  display: none;
  padding: 100px 20px;
  text-align: center;
  font-size: 24px;
  color: #051243;
  font-weight: 600;
}

/* 校验标红 */
[data-model-page="contact"] input.error, [data-model-page="contact"] select.error, [data-model-page="contact"] textarea.error {
  border-color: #d32f2f !important;
}

[data-model-page="contact"] .agree-checkbox.error label {
  color: #d32f2f;
}

[data-model-page="contact"] button[type="submit"].form-submit img {
  width: 16px;
  height: 16px;
}


[data-model-page="contact"] {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}


@media (max-width: 768px) {
  [data-model-page="contact"] .form-page::before {
    height: 400px;
  }
  [data-model-page="contact"] .form-title {
    padding: 80px 20px 30px 20px;
  }
  [data-model-page="contact"] .form-row {
    flex-direction: column;
    gap: 20px;
  }
  [data-model-page="contact"] .radio-group.grid-4, [data-model-page="contact"] .radio-group.grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-model-page="contact"] .captcha-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  [data-model-page="contact"] .captcha-row input[type="text"] {
    max-width: none;
    min-width: 0;
  }
  [data-model-page="contact"] .captcha-img {
    text-align: center;
  }
}

@media (max-width: 480px) {
  [data-model-page="contact"] .form-page::before {
    height: 300px;
  }
  [data-model-page="contact"] .form-title {
    font-size: 24px;
    padding: 60px 16px 20px 16px;
  }
  [data-model-page="contact"] .contact-form {
    margin: 30px 16px 0;
    border-radius: 24px;
  }
  [data-model-page="contact"] .form-main {
    padding: 16px;
  }
  [data-model-page="contact"] .radio-group.grid-4, [data-model-page="contact"] .radio-group.grid-2 {
    grid-template-columns: 1fr;
  }
  [data-model-page="contact"] .contact-methods {
    flex-direction: column;
    gap: 12px;
  }
  [data-model-page="contact"] .privacy-notice {
    font-size: 14px;
    line-height: 20px;
  }
  [data-model-page="contact"] button[type="submit"].form-submit {
    width: 100%;
  }
}


/* ===== contact CMS model layout overrides ===== */
[data-model-page="contact"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

[data-model-page="contact"] .form-page {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 0 20px 0 !important;
  background-color: #051243 !important;
}

[data-model-page="contact"] .form-hero-bg {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

[data-model-page="contact"] .form-content-max {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

[data-model-page="contact"] .form-title {
  padding: clamp(100px, 13.89vw, 200px) clamp(20px, 8.33vw, 120px) clamp(40px, 5.56vw, 80px) 20px !important;
}

[data-model-page="contact"] .contact-form {
  width: auto !important;
  margin: 0 20px 0 !important;
}

[data-model-page="contact"] .radio-custom {
  display: inline-block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  border: 1px solid #B8D5EA !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
}

[data-model-page="contact"] .radio-label.active .radio-custom,
[data-model-page="contact"] .radio-label input[type="radio"]:checked + .radio-custom,
[data-model-page="contact"] .radio-label input[type="checkbox"]:checked + .radio-custom {
  border-color: #005BEA !important;
  background: #005BEA url('/images/about/icon-checked.png') center / 16px 16px no-repeat !important;
}

[data-model-page="contact"] .privacy-notice a {
  display: block !important;
  width: fit-content !important;
  margin-top: 4px !important;
}

[data-model-page="contact"] .privacy-agree-label .radio-custom {
  display: inline-block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  border: 1px solid #B8D5EA !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin-right: 12px !important;
}

[data-model-page="contact"] .privacy-agree-label.active .radio-custom,
[data-model-page="contact"] .privacy-agree-label input[type="checkbox"]:checked + .radio-custom {
  border-color: #005BEA !important;
  background: #005BEA url('/images/about/icon-checked.png') center / 16px 16px no-repeat !important;
}

/* ===== cookie/index.css scoped to body.page-cookie ===== */
:where(body.page-cookie) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(body.page-cookie) .privacy-page {
    position: relative;
    width: 100%;
}

:where(body.page-cookie) .privacy-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}


:where(body.page-cookie) .privacy-hero {
    position: relative;
    z-index: 1;
    padding: 0 clamp(20px, 8.33vw, 120px);
}

:where(body.page-cookie) .privacy-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(40px, 5.56vw, 60px) 0 clamp(40px, 10vw, 200px);
    z-index: 1;
}

:where(body.page-cookie) .privacy-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 12vw, 150px) 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

:where(body.page-cookie) .breadcrumb-link {
    text-decoration: none;
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

:where(body.page-cookie) .breadcrumb-link:hover {
    opacity: 0.6;
}

:where(body.page-cookie) .breadcrumb-separator {
    background: url('/images/icon-right.png') no-repeat center center;
    width: clamp(12px, 1.5vw, 14px);
    height: clamp(12px, 1.5vw, 14px);
    background-size: contain;
}

:where(body.page-cookie) .breadcrumb-current {
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

:where(body.page-cookie) .privacy-title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    line-height: 1.2;
}

:where(body.page-cookie) .privacy-subtitle {
    margin: 0 0 clamp(8px, 1.5vw, 12px) 0;
    color: #051243;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: clamp(24px, 3vw, 28px);
}

:where(body.page-cookie) .privacy-paragraph {
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: clamp(22px, 2.5vw, 24px);
}


/* =========================================
   Responsive Design (响应式)
   ========================================= */

/* Tablet (max-width: 1200px) */
@media (max-width: 1200px) {
    :where(body.page-cookie) .privacy-hero {
        padding: 0 clamp(16px, 5vw, 80px);
    }
    
    :where(body.page-cookie) .privacy-text {
        padding: clamp(30px, 4vw, 50px) 0;
    }
}

/* Tablet Small (max-width: 968px) */
@media (max-width: 968px) {
    
    :where(body.page-cookie) .privacy-breadcrumb {
        padding: clamp(80px, 10vw, 120px) 0 0;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    :where(body.page-cookie) .privacy-hero {
        padding: 0 16px;
    }
    
    :where(body.page-cookie) .privacy-breadcrumb {
        padding: clamp(60px, 8vw, 100px) 0 0;
        gap: 6px;
    }
    
    :where(body.page-cookie) .breadcrumb-link, :where(body.page-cookie) .breadcrumb-current {
        font-size: 14px;
        line-height: 20px;
    }
    
    :where(body.page-cookie) .breadcrumb-separator {
        width: 12px;
        height: 12px;
    }
    
    :where(body.page-cookie) .privacy-text {
        padding: clamp(24px, 4vw, 40px) 0;
    }
    
    :where(body.page-cookie) .privacy-title {
        font-size: clamp(20px, 5vw, 24px);
        margin-bottom: 24px;
    }
    
    :where(body.page-cookie) .privacy-subtitle {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
    }
    
    :where(body.page-cookie) .privacy-paragraph {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 24px;
    }
    
    :where(body.page-cookie) #footer {
        margin-top: 60px;
    }
}

/* Mobile Small (max-width: 480px) */
@media (max-width: 480px) {
    
    :where(body.page-cookie) .privacy-breadcrumb {
        padding: clamp(50px, 6vw, 80px) 0 0;
        flex-wrap: wrap;
    }
    
    :where(body.page-cookie) .breadcrumb-link, :where(body.page-cookie) .breadcrumb-current {
        font-size: 12px;
        line-height: 18px;
    }
    
    :where(body.page-cookie) .breadcrumb-separator {
        width: 10px;
        height: 10px;
    }
    
    :where(body.page-cookie) .privacy-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    :where(body.page-cookie) .privacy-subtitle {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 6px;
    }
    
    :where(body.page-cookie) .privacy-paragraph {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    
    :where(body.page-cookie) #footer {
        margin-top: 40px;
    }
}
:where(body.page-cookie) .privacy-clause {
    color: #4A4D56;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: clamp(24px, 4vw, 40px);
}

@media (max-width: 768px) {
    :where(body.page-cookie) .privacy-clause {
        font-size: 14px;
        line-height: 22px;
        margin-top: 12px;
        margin-bottom: 24px;
    }
}
@media (max-width: 480px) {
    :where(body.page-cookie) .privacy-clause {
        font-size: 13px;
        line-height: 20px;
        margin-top: 12px;
        margin-bottom: 20px;
    }
}


/* ===== privacy/index.css scoped to body.page-privacy ===== */
:where(body.page-privacy) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(body.page-privacy) .privacy-page {
    position: relative;
    width: 100%;
}

:where(body.page-privacy) .privacy-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}


:where(body.page-privacy) .privacy-hero {
    position: relative;
    z-index: 1;
    padding: 0 clamp(20px, 8.33vw, 120px);
}

:where(body.page-privacy) .privacy-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(40px, 5.56vw, 60px) 0 clamp(40px, 10vw, 200px);
    z-index: 1;
}

:where(body.page-privacy) .privacy-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 12vw, 150px) 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

:where(body.page-privacy) .breadcrumb-link {
    text-decoration: none;
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

:where(body.page-privacy) .breadcrumb-link:hover {
    opacity: 0.6;
}

:where(body.page-privacy) .breadcrumb-separator {
    background: url('/images/icon-right.png') no-repeat center center;
    width: clamp(12px, 1.5vw, 14px);
    height: clamp(12px, 1.5vw, 14px);
    background-size: contain;
}

:where(body.page-privacy) .breadcrumb-current {
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

:where(body.page-privacy) .privacy-title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    line-height: 1.2;
}

:where(body.page-privacy) .privacy-subtitle {
    margin: 0 0 clamp(8px, 1.5vw, 12px) 0;
    color: #051243;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: clamp(24px, 3vw, 28px);
}

:where(body.page-privacy) .privacy-paragraph {
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: clamp(22px, 2.5vw, 24px);
}


/* =========================================
   Responsive Design (响应式)
   ========================================= */

/* Tablet (max-width: 1200px) */
@media (max-width: 1200px) {
    :where(body.page-privacy) .privacy-hero {
        padding: 0 clamp(16px, 5vw, 80px);
    }
    
    :where(body.page-privacy) .privacy-text {
        padding: clamp(30px, 4vw, 50px) 0;
    }
}

/* Tablet Small (max-width: 968px) */
@media (max-width: 968px) {
    
    :where(body.page-privacy) .privacy-breadcrumb {
        padding: clamp(80px, 10vw, 120px) 0 0;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    :where(body.page-privacy) .privacy-hero {
        padding: 0 16px;
    }
    
    :where(body.page-privacy) .privacy-breadcrumb {
        padding: clamp(60px, 8vw, 100px) 0 0;
        gap: 6px;
    }
    
    :where(body.page-privacy) .breadcrumb-link, :where(body.page-privacy) .breadcrumb-current {
        font-size: 14px;
        line-height: 20px;
    }
    
    :where(body.page-privacy) .breadcrumb-separator {
        width: 12px;
        height: 12px;
    }
    
    :where(body.page-privacy) .privacy-text {
        padding: clamp(24px, 4vw, 40px) 0;
    }
    
    :where(body.page-privacy) .privacy-title {
        font-size: clamp(20px, 5vw, 24px);
        margin-bottom: 24px;
    }
    
    :where(body.page-privacy) .privacy-subtitle {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
    }
    
    :where(body.page-privacy) .privacy-paragraph {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 24px;
    }
    
    :where(body.page-privacy) #footer {
        margin-top: 60px;
    }
}

/* Mobile Small (max-width: 480px) */
@media (max-width: 480px) {
    
    :where(body.page-privacy) .privacy-breadcrumb {
        padding: clamp(50px, 6vw, 80px) 0 0;
        flex-wrap: wrap;
    }
    
    :where(body.page-privacy) .breadcrumb-link, :where(body.page-privacy) .breadcrumb-current {
        font-size: 12px;
        line-height: 18px;
    }
    
    :where(body.page-privacy) .breadcrumb-separator {
        width: 10px;
        height: 10px;
    }
    
    :where(body.page-privacy) .privacy-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    :where(body.page-privacy) .privacy-subtitle {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 6px;
    }
    
    :where(body.page-privacy) .privacy-paragraph {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    
    :where(body.page-privacy) #footer {
        margin-top: 40px;
    }
}
:where(body.page-privacy) .privacy-clause {
    color: #4A4D56;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: clamp(24px, 4vw, 40px);
}

@media (max-width: 768px) {
    :where(body.page-privacy) .privacy-clause {
        font-size: 14px;
        line-height: 22px;
        margin-top: 12px;
        margin-bottom: 24px;
    }
}
@media (max-width: 480px) {
    :where(body.page-privacy) .privacy-clause {
        font-size: 13px;
        line-height: 20px;
        margin-top: 12px;
        margin-bottom: 20px;
    }
}


/* ===== news/index.css scoped to body.page-news-list ===== */
/* ニュースルーム (news) CSS */
:where(body.page-news-list) .news-hero {
    height: 480px;
    background-image: url('/images/news/img-news-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(body.page-news-list) .news-hero h1 {
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
}

:where(body.page-news-list) .main {
    background-color: #f2f7fb;
    padding-top: 80px;
    padding-bottom: 132px;
}

:where(body.page-news-list) .news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:where(body.page-news-list) .news-item {
    text-decoration: none;
    padding: 24px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 24px; /* 代替 gap-24 */
}

/* 渐变装饰条 */
:where(body.page-news-list) .news-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 4px;
    background: #ffffff; 
    transition: background 0.3s ease;
}

:where(body.page-news-list) .news-item:hover::before, :where(body.page-news-list) .news-item.active::before {
    background: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%);
}

:where(body.page-news-list) .news-item:hover .news-title {
    color: #0032D6;
}

:where(body.page-news-list) .news-img-box {
    width: 224px;
    aspect-ratio: 16 / 9;
    height: auto;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #E6E8EB;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(body.page-news-list) .news-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(body.page-news-list) .news-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 16px;
}

:where(body.page-news-list) .news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    line-height: 16px;
    font-size: 12px;
    color: #4A4D56;
}

:where(body.page-news-list) .news-date {
    flex-shrink: 0;
    color: inherit;
}

:where(body.page-news-list) .news-title {
    font-size: 18px;
    font-weight: 600;
    color: #051243;
    line-height: 28px;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 56px; /* 强制 2 行高度，防止位置错位 */
}

:where(body.page-news-list) .news-location {
    flex-shrink: 0;
    text-align: right;
    color: inherit;
}

/* Pagination 下方分页组件样式 */
:where(body.page-news-list) .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
    gap: 20px;
}

:where(body.page-news-list) .page-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

:where(body.page-news-list) .page-btn img {
    width: 48px;
    height: 48px;
}

:where(body.page-news-list) .page-btn:hover {
    opacity: 0.8;
}

:where(body.page-news-list) .page-num {
    text-decoration: none;
    transition: all 0.3s ease;
    color: #7C8190;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

:where(body.page-news-list) .page-num:hover, :where(body.page-news-list) .page-num.active {
    color: #0032D6;
}

:where(body.page-news-list) .rotate-180-y {
    transform: scaleX(-1);
}

/* =========================================
   Responsive Design (响应式)
   ========================================= */
@media screen and (max-width: 768px) {
    :where(body.page-news-list) .news-hero {
        height: 200px;
        display: flex;
        align-items: center;
    }

    :where(body.page-news-list) .news-hero h1 {
        font-size: 32px;
        padding: 0 16px;
    }

    :where(body.page-news-list) .main {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    :where(body.page-news-list) .news-list {
        gap: 8px;
    }

    :where(body.page-news-list) .news-item {
        padding: 12px;
        gap: 12px;
    }

    :where(body.page-news-list) .news-img-box {
        width: 120px;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    :where(body.page-news-list) .news-content {
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 16px;
    }

    :where(body.page-news-list) .news-meta {
        font-size: 11px;
        line-height: 16px;
        gap: 8px;
    }

    :where(body.page-news-list) .news-title {
        font-size: 14px;
        line-height: 20px;
        min-height: 40px; /* 手机端 2 行高度 */
    }

    :where(body.page-news-list) .pagination {
        margin-top: 32px;
        gap: 12px;
    }

    :where(body.page-news-list) .page-btn, :where(body.page-news-list) .page-btn img {
        width: 36px;
        height: 36px;
    }

    :where(body.page-news-list) .page-num {
        font-size: 16px;
    }
}


/* ===== news/detail.css scoped to body.page-news-detail ===== */
:where(body.page-news-detail) .detail-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding: 96px 24px 120px 24px;
}

:where(body.page-news-detail) .breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-news-detail) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

:where(body.page-news-detail) .breadcrumb img {
    width: 14px;
}

/* =========================================
   Article Header (Meta & Title)
   ========================================= */

:where(body.page-news-detail) .article-header {
    margin-bottom: 40px;
}

:where(body.page-news-detail) .article-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

:where(body.page-news-detail) .article-date {
    font-size: 16px;
    line-height: 24px;
    color: #4A4D56;
}

:where(body.page-news-detail) .article-company {
    font-size: 16px;
    line-height: 24px;
    color: #4A4D56;
}

:where(body.page-news-detail) .article-title {
    font-size: 24px;
    font-weight: 600;
    color: #051243;
    line-height: 32px;
    margin-top: 24px;
    text-align: center;
}

:where(body.page-news-detail) .article-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #051243;
    line-height: 32px;
    margin-top: 12px;
    text-align: center;
}

/* =========================================
   Article Content Blocks (Templates)
   ========================================= */

/* Common Elements */
:where(body.page-news-detail) .block-text {
    margin-bottom: 24px;
}

:where(body.page-news-detail) .block-title {
    color: #051243;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 8px;
    text-align: center;
}

/* block-desc 后紧跟 block-title（如 detail3 先文后图） */
:where(body.page-news-detail) .block-desc + .block-title {
    margin-top: 24px;
}

:where(body.page-news-detail) .block-text-title {
    background: #0068B6;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 24px;
}

:where(body.page-news-detail) .block-list {
    margin-bottom: 24px;
    padding-left: 20px;
    list-style-type: disc;
}

:where(body.page-news-detail) .block-list li {
    color: #4A4D56;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 8px;
}

:where(body.page-news-detail) .block-list li:last-child {
    margin-bottom: 0;
}

/* 模板5b：<p><span class="block-term-label">标签</span><br>正文</p>（与 .block-list 同源 disc，不用伪元素字符） */
:where(body.page-news-detail) .block-desc p:has(> span.block-term-label:first-child) {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 20px;
    margin-bottom: 16px;
    padding-left: 0;
}

:where(body.page-news-detail) .block-desc p:has(> span.block-term-label:first-child)::marker {
    color: #4A4D56;
}

:where(body.page-news-detail) .block-term-label {
    font-weight: bold;
}

/* 附录、补充说明 (Appendix/Notes) */
:where(body.page-news-detail) .block-notes {
    background: #F2F7FB;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}

:where(body.page-news-detail) .block-notes-title {
    color: #051243;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(body.page-news-detail) .block-notes-title::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #0068B6;
}

:where(body.page-news-detail) .block-notes-content {
    color: #4A4D56;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

:where(body.page-news-detail) .block-notes-content p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 8px;
}

:where(body.page-news-detail) .block-notes-list {
    padding-left: 20px;
    list-style-type: disc;
}

:where(body.page-news-detail) .block-notes-list li {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 8px;
}

:where(body.page-news-detail) .block-notes-list li:last-child {
    margin-bottom: 0;
}

:where(body.page-news-detail) .block-notes-content a {
    color: #0032D6;
    text-decoration: underline;
}

/* 富文本内容区域 (Rich Text / Tables) */
:where(body.page-news-detail) .block-richtext {
    margin-bottom: 40px;
    width: 100%;
    overflow-x: auto;
}

:where(body.page-news-detail) .block-richtext table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

:where(body.page-news-detail) .block-richtext table td, :where(body.page-news-detail) .block-richtext table th {
    padding: 8px 16px;
    font-size: 16px;
    line-height: 24px;
    color: #051243;
}

:where(body.page-news-detail) .block-richtext table td p, :where(body.page-news-detail) .block-richtext table th p {
    margin-bottom: 0;
    font-size: 14px;
}

/* 通用表格样式 */
:where(body.page-news-detail) .table-vertical, :where(body.page-news-detail) .table-horizontal {
    border: 5px solid #0068B6;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

:where(body.page-news-detail) .table-vertical td, :where(body.page-news-detail) .table-horizontal th, :where(body.page-news-detail) .table-horizontal td {
    border: 1px solid #0068B6 !important;
    color: #051243;
}

/* 纵向表格 (table-vertical) */
:where(body.page-news-detail) .table-vertical td {
    padding: 8px 16px;
    text-align: left;
}

:where(body.page-news-detail) .table-vertical td.label {
    background-color: #F2F7FB;
    white-space: nowrap;
    width: 1%; 
}

/* 横向表格 (table-horizontal) */
:where(body.page-news-detail) .table-horizontal th, :where(body.page-news-detail) .table-horizontal td {
    padding: 8px 16px;
}

:where(body.page-news-detail) .table-horizontal th {
    background-color: #F2F7FB;
}


:where(body.page-news-detail) .block-pic {
    width: 100%;
    box-sizing: border-box;
    display: block;
}
:where(body.page-news-detail) .block-desc {
    margin-top: 24px;
}
:where(body.page-news-detail) .block-desc p {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #4A4D56;
    margin-bottom: 24px;
}

:where(body.page-news-detail) .block-desc p:last-child {
    margin-bottom: 0;
}

/* 1. 上图下文 (Image Top, Text Bottom) */
:where(body.page-news-detail) .block-pic-top {
    margin-bottom: 40px;
}
:where(body.page-news-detail) .block-pic-top .block-pic-wrap {
    text-align: center;
}
:where(body.page-news-detail) .block-pic-top .block-pic {
    max-width: 720px;
    margin: 0 auto;
}

/* 2. 上文下图 (Text Top, Image Bottom) */
:where(body.page-news-detail) .block-pic-bottom {
    margin-bottom: 40px;
}
:where(body.page-news-detail) .block-pic-bottom .block-pic-wrap {
    text-align: center;
}
:where(body.page-news-detail) .block-pic-bottom .block-pic {
    max-width: 720px;
    margin: 0 auto;
}

/* 3 & 4 左右图文通用容器 */
:where(body.page-news-detail) .block-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* 3. 左图右文 (Image Left, Text Right) */
:where(body.page-news-detail) .block-pic-left {
    margin-bottom: 40px;
}
:where(body.page-news-detail) .block-pic-left .block-pic-wrap {
    flex-shrink: 0;
    width: 40%;
    max-width: 320px;
}
:where(body.page-news-detail) .block-pic-left .block-desc {
    flex: 1;
    min-width: 0;
}

/* 4. 左文右图 (Text Left, Image Right) */
:where(body.page-news-detail) .block-pic-right {
    margin-bottom: 40px;
}
:where(body.page-news-detail) .block-pic-right .block-pic-wrap {
    flex-shrink: 0;
    width: 40%;
    max-width: 320px;
    order: 2;
}
:where(body.page-news-detail) .block-pic-right .block-desc {
    flex: 1;
    min-width: 0;
    order: 1;
}

/* ========================================= */

@media screen and (max-width: 768px) {
    :where(body.page-news-detail) .detail-main {
        background-size: cover; /* 手机端保证背景图填满 */
        padding: 60px 16px 80px 16px;
    }
    
    :where(body.page-news-detail) .article-title {
        font-size: 20px;
        line-height: 28px;
    }

    :where(body.page-news-detail) .article-subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    :where(body.page-news-detail) .block-title {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 16px;
    }

    :where(body.page-news-detail) .block-desc + .block-title {
        margin-top: 16px;
    }

    :where(body.page-news-detail) .block-text-title {
        font-size: 16px;
        padding: 6px 10px;
        margin-bottom: 16px;
    }

    :where(body.page-news-detail) .block-desc p {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 16px;
    }

    :where(body.page-news-detail) .block-list li {
        font-size: 14px;
        line-height: 24px;
    }

    :where(body.page-news-detail) .block-term-label {
        font-size: 14px;
    }

    :where(body.page-news-detail) .block-pic-top, :where(body.page-news-detail) .block-pic-bottom, :where(body.page-news-detail) .block-pic-left, :where(body.page-news-detail) .block-pic-right, :where(body.page-news-detail) .block-text, :where(body.page-news-detail) .block-notes, :where(body.page-news-detail) .block-richtext {
        margin-bottom: 12px;
    }

    :where(body.page-news-detail) .block-inner {
        flex-direction: column;
        gap: 16px;
    }
    
    :where(body.page-news-detail) .block-pic-left .block-pic-wrap, :where(body.page-news-detail) .block-pic-right .block-pic-wrap {
        width: 100%;
        max-width: 100%;
        order: unset; /* 手机端取消强制左右排序，恢复默认上下顺序 */
    }

    :where(body.page-news-detail) .block-notes {
        padding: 12px 16px;
    }

    :where(body.page-news-detail) .block-notes-title {
        font-size: 14px;
    }

    :where(body.page-news-detail) .block-notes-content p, :where(body.page-news-detail) .block-notes-list li {
        font-size: 14px;
        line-height: 24px;
    }
    :where(body.page-news-detail) .block-richtext table td, :where(body.page-news-detail) .block-richtext table th {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 20px;
    }

    :where(body.page-news-detail) .block-richtext table td p, :where(body.page-news-detail) .block-richtext table th p {
        font-size: 12px;
    }
}

/* =========================================
   8. 轮播图 (Swiper Carousel)
   ========================================= */

:where(body.page-news-detail) .block-swiper {
    margin-bottom: 40px;
    width: 100%;
}

:where(body.page-news-detail) .swiper-container-wrap {
    position: relative;
    max-width: 864px; /* 720px + (48px+24px)*2 */
    margin: 0 auto;
    padding: 0 72px; /* 48px按钮 + 24px间距 */
}

:where(body.page-news-detail) .detail-swiper {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: #FFF;
    overflow: hidden;
    border-radius: 0;
}

:where(body.page-news-detail) .detail-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 导航按钮自定义 */
:where(body.page-news-detail) .swiper-container-wrap .detail-prev, :where(body.page-news-detail) .swiper-container-wrap .detail-next {
    width: 48px !important;
    height: 48px !important;
    margin-top: -24px;
    transition: all 0.3s;
    object-fit: contain;
}

:where(body.page-news-detail) .detail-prev::after, :where(body.page-news-detail) .detail-next::after {
    display: none;
}

:where(body.page-news-detail) .detail-prev {
    left: 0;
}

:where(body.page-news-detail) .detail-next {
    right: 0;
}

:where(body.page-news-detail) .detail-prev:hover, :where(body.page-news-detail) .detail-next:hover {
    opacity: 0.7;
}

/* 分页器自定义 (条形) */
:where(body.page-news-detail) .detail-pagination {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

:where(body.page-news-detail) .detail-pagination .swiper-pagination-bullet {
    width: 40px;
    height: 8px;
    border-radius: 0;
    background: #F2F7FB;
    opacity: 1;
    margin: 0 !important;
    transition: all 0.3s;
}

:where(body.page-news-detail) .detail-pagination .swiper-pagination-bullet-active {
    width: 80px;
    background: #0068B6;
}

@media screen and (max-width: 768px) {
    :where(body.page-news-detail) .swiper-container-wrap {
        padding: 0; /* 手机端按钮移入内部或隐藏 */
    }
    
    :where(body.page-news-detail) .swiper-container-wrap .detail-prev, :where(body.page-news-detail) .swiper-container-wrap .detail-next {
        width: 32px !important;
        height: 32px !important;
        margin-top: -16px;
    }
    
    :where(body.page-news-detail) .detail-pagination {
        margin-top: 16px;
    }
    
    :where(body.page-news-detail) .detail-pagination .swiper-pagination-bullet {
        width: 20px;
        height: 4px;
    }
    
    :where(body.page-news-detail) .detail-pagination .swiper-pagination-bullet-active {
        width: 40px;
    }
}


/* ===== recruit/index.css scoped to body.page-recruit ===== */
/* =========================================
   Recruit Page Styles (採用情報)
   ========================================= */
:where(body.page-recruit) .recruit-hero {
    height: 480px;
    background-image: url('/images/recruit/img-recruit-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

:where(body.page-recruit) .recruit-hero .section-max {
    position: relative;
    z-index: 1;
}

/* ======= We offer (Icons section) ======= */
:where(body.page-recruit) .recruit-benefits-title {
    margin-bottom: 48px;
}

:where(body.page-recruit) .benefit-item {
    flex: 1;
    min-width: 150px;
}

:where(body.page-recruit) .benefit-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(body.page-recruit) .benefit-icon img {
    width: 104px;
    height: 104px;
    object-fit: contain;
}

:where(body.page-recruit) .benefit-text {
    font-size: 16px;
    line-height: 24px;
    color: #051243;
}

/* ======= Job Listings ======= */
:where(body.page-recruit) .job-card {
    padding: 24px;
    margin-bottom: 30px;
    background-color: #ffffff;
}

:where(body.page-recruit) .job-card:last-child {
    margin-bottom: 0;
}

:where(body.page-recruit) .job-desc {
    list-style-position: inside;
    list-style-type: disc;
}

:where(body.page-recruit) .job-desc li {
    margin-bottom: 8px;
    padding-left: 8px;
    text-indent: -12px;
    margin-left: 12px;
}

:where(body.page-recruit) .job-desc li:last-child {
    margin-bottom: 0;
}

:where(body.page-recruit) .job-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
   background-color: rgba(0, 104, 182, 0.1);
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
    border-radius: 2px;
    margin-top: 24px;
}

/* ======= Bottom Join Bar ======= */
:where(body.page-recruit) .recruit-join-bar {
    background: var(---1, linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%));
    padding: 40px 0;
}

:where(body.page-recruit) .join-title {
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
    line-height: 48px;
    text-align: right; 
}

:where(body.page-recruit) .join-divider {
    width: 1px;
    height: 80px;
    background-color: #ffffff;
    margin: 0 120px;
}

:where(body.page-recruit) .email-icon {
    width: 30px;
    height: 30px;
    margin-right: 16px;
}

:where(body.page-recruit) .join-email {
    color: #FFF;
    font-size: 16px;
    line-height: 24px; 
}

:where(body.page-recruit) .join-hint {
    color: #FFF;
    font-size: 12px;
    line-height: 24px;
}

:where(body.page-recruit) .join-arrow {
    width: 24px;
    height: 24px;
    margin-left: 12px;
    transform: rotate(-90deg);
}

/* =========================================
   Responsive Styles
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-recruit) .section-max {
        padding-left: 16px;
        padding-right: 16px;
    }
    :where(body.page-recruit) .recruit-hero {
        height: clamp(200px, 50vw, 320px);
    }

    :where(body.page-recruit) .recruit-benefits-title {
        margin-bottom: 32px;
        font-size: 20px !important;
    }

    :where(body.page-recruit) .benefit-item {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 24px;
    }

    :where(body.page-recruit) .benefit-icon img {
        width: 80px;
        height: 80px;
    }

    :where(body.page-recruit) .recruit-join-wrapper {
        flex-direction: column;
        text-align: center;
    }

    :where(body.page-recruit) .join-title {
        text-align: center;
        font-size: 24px;
        line-height: 36px;
    }

    :where(body.page-recruit) .join-divider {
        width: 80px;
        height: 1px;
        margin: 24px 0;
    }

    :where(body.page-recruit) .join-info {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    :where(body.page-recruit) .email-icon {
        margin-right: 0;
        margin-bottom: 12px;
    }

    :where(body.page-recruit) .join-info .text-left {
        text-align: center !important;
        align-items: center;
    }

    :where(body.page-recruit) .join-arrow {
        margin-left: 0;
        margin-top: 16px;
    }

    /* Override inline padding/margin for mobile */
    :where(body.page-recruit) .pt-80 { padding-top: 40px !important; }
    :where(body.page-recruit) .pb-80 { padding-bottom: 40px !important; }
    :where(body.page-recruit) .py-80 { padding-top: 40px !important; padding-bottom: 40px !important; }
    :where(body.page-recruit) .mb-48 { margin-bottom: 24px !important; }
}


/* ===== service/aidx.css scoped to body.page-service-aidx ===== */
:where(body.page-service-aidx) .service-hero {
    height: 480px;
    background-image: url('/images/service/img-aidx-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(body.page-service-aidx) .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

:where(body.page-service-aidx) .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

:where(body.page-service-aidx) .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-aidx) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

:where(body.page-service-aidx) .breadcrumb img {
    width: 14px;
}

/* =========================================
   布局
   ========================================= */
:where(body.page-service-aidx) .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* =========================================
   侧边栏
   ========================================= */
:where(body.page-service-aidx) .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}

:where(body.page-service-aidx) .sidebar-group {
    margin-bottom: 24px;
}

:where(body.page-service-aidx) .sidebar-group:last-child {
    margin-bottom: 0;
}

:where(body.page-service-aidx) .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}

:where(body.page-service-aidx) .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

:where(body.page-service-aidx) .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

:where(body.page-service-aidx) .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

:where(body.page-service-aidx) .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

:where(body.page-service-aidx) .sidebar-group.active .sidebar-menu {
    display: block;
}

:where(body.page-service-aidx) .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}

:where(body.page-service-aidx) .sidebar-item:last-child {
    margin-bottom: 0;
}

:where(body.page-service-aidx) .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
}

:where(body.page-service-aidx) .sidebar-item:hover, :where(body.page-service-aidx) .sidebar-item.active {
    background: #F2F7FB;
}

:where(body.page-service-aidx) .sidebar-item:hover .sidebar-link, :where(body.page-service-aidx) .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

:where(body.page-service-aidx) .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

:where(body.page-service-aidx) .sidebar-item .item-arrow {
    display: none;
}

:where(body.page-service-aidx) .sidebar-item.active .item-arrow {
    display: inline-block;
    background-image: url('/images/service/icon-arrow-blue.png');
}

/* =========================================
   内容区域
   ========================================= */

:where(body.page-service-aidx) .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

:where(body.page-service-aidx) .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   公共内容样式
   ========================================= */
:where(body.page-service-aidx) .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}

:where(body.page-service-aidx) .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}

:where(body.page-service-aidx) .content-list {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    padding-left: 20px;
}

:where(body.page-service-aidx) .content-list li {
    margin-bottom: 4px;
}

:where(body.page-service-aidx) .content-list li:last-child {
    margin-bottom: 0;
}

:where(body.page-service-aidx) .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}

:where(body.page-service-aidx) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}

/* =========================================
   卡片公共样式
   ========================================= */
:where(body.page-service-aidx) .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 16px 20px;
    min-height: 80px;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    /* justify-content: center; */
    text-align: left;
}

/* 卡片标题 - 蓝色 */
:where(body.page-service-aidx) .benefit-index, :where(body.page-service-aidx) .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
}

:where(body.page-service-aidx) .benefit-index {
    display: block;
}

/* 卡片正文 - 灰色 */
:where(body.page-service-aidx) .benefit-item {
    display: flex;
    align-items: stretch;
}

:where(body.page-service-aidx) .benefit-num {
    width: 48px;
    background: #E5F0F8;
    border: 4px solid #E5F0F8;
    border-right: none;
    border-radius: 200px 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0068B6;
    font-size: 24px;
    font-weight: 600;
    flex-shrink: 0;
    padding-left: 8px; /* 依照设计稿 padding-left: 8px */
}

:where(body.page-service-aidx) .benefit-card {
    flex: 1;
    background: #FFFFFF;
    border: 4px solid #E5F0F8;
    border-left: none;
    padding: 18px 12px;
    display: flex;
    align-items: center;
}

:where(body.page-service-aidx) .benefit-desc, :where(body.page-service-aidx) .other-solution-desc, :where(body.page-service-aidx) .solution-desc, :where(body.page-service-aidx) .card-list {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
}

/* 卡片内列表 */
:where(body.page-service-aidx) .card-list {
    padding-left: 18px;
}

:where(body.page-service-aidx) .card-list li {
    margin-bottom: 4px;
}

:where(body.page-service-aidx) .card-list li:last-child {
    margin-bottom: 0;
}

/* =========================================
   网格布局
   ========================================= */
:where(body.page-service-aidx) .benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

:where(body.page-service-aidx) .other-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

:where(body.page-service-aidx) .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

:where(body.page-service-aidx) .feature-full {
    grid-column: 1 / -1;
}

/* =========================================
   JRISE - 关于卡片
   ========================================= */
:where(body.page-service-aidx) .service-about-card {
    background: #F2F7FB;
    padding: 24px 14px 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    gap: 14px;
}

:where(body.page-service-aidx) .about-title {
    color: #0068B6;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
}

:where(body.page-service-aidx) .about-text {
    color: #051243;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

:where(body.page-service-aidx) .about-visual {
    flex-shrink: 0;
}

:where(body.page-service-aidx) .about-visual img {
    width: 184px;
}

/* =========================================
   生成AIソリューション - 方案项
   ========================================= */
:where(body.page-service-aidx) .solution {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

:where(body.page-service-aidx) .solution-item {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 24px;
}

:where(body.page-service-aidx) .solution-info {
    flex: 1;
}

:where(body.page-service-aidx) .solution-number {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
}

:where(body.page-service-aidx) .solution-number span {
    color: #0032D6;
    padding-right: 12px;
}

:where(body.page-service-aidx) .solution-visual {
    flex-shrink: 0;
    width: 400px;
}

:where(body.page-service-aidx) .solution-visual img {
    width: 100%;
}

/* =========================================
   DX Integration - 图文特長卡片
   ========================================= */
:where(body.page-service-aidx) .dx-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

:where(body.page-service-aidx) .dx-feature-card {
    display: flex;
    align-items: stretch;
    flex-direction: row !important; /* 覆盖 border-card 的 column 布局 */
    padding: 0 !important;
    border: 4px solid #ffffff !important; /* 使用设计图中的细边框 */
    background: #FFFFFF;
    overflow: hidden;
}

:where(body.page-service-aidx) .dx-feature-img {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
}

:where(body.page-service-aidx) .dx-feature-info {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

:where(body.page-service-aidx) .dx-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   响应式设计 (768px 及以下)
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-service-aidx) .service-hero {
        height: 320px;
        display: flex;
        align-items: center;
    }

    :where(body.page-service-aidx) .service-hero .section-max {
        padding: 0 20px;
    }

    :where(body.page-service-aidx) .service-hero h1 {
        font-size: 32px !important;
        line-height: 40px;
    }

    :where(body.page-service-aidx) .breadcrumb {
        padding-left: 12px;
    }

    :where(body.page-service-aidx) .service-container {
        padding-bottom: 100px;
    }
  
    :where(body.page-service-aidx) .service-layout {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    /* 侧边栏转为顶部 Tab */
    :where(body.page-service-aidx) .service-sidebar {
        width: 100%;
        position: sticky;
        top: 52px; /* 对应移动端 Header 高度 */
        z-index: 1001;
        padding: 0;
        background: #FFFFFF;
        border: none;
        margin-bottom: 0;
    }

    :where(body.page-service-aidx) .sidebar-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    :where(body.page-service-aidx) .sidebar-group {
        margin-bottom: 0;
        display: contents; /* 使子元素直接参与 wrapper 的 grid 布局 */
    }

    :where(body.page-service-aidx) .sidebar-group-title {
        grid-row: 1;
        margin-bottom: 0;
        padding: 8px 4px;
        font-size: 14px;
        color: #051243;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        cursor: pointer;
        height: 100%;
        transition: background-color 0.3s;
    }

    :where(body.page-service-aidx) .sidebar-group.active .sidebar-group-title {
        background: #F2F7FB;
        color: #051243; /* 保持与默认颜色一致 */
    }

    /* 二级菜单转为横向 Row */
    :where(body.page-service-aidx) .sidebar-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none; /* 默认隐藏，仅在 active 组下显示 */
        flex-direction: row;
        overflow-x: auto;
        background: #F2F7FB;
        padding: 8px 4px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    :where(body.page-service-aidx) .sidebar-group.active .sidebar-menu {
        display: flex;
    }

    :where(body.page-service-aidx) .sidebar-item {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 6px 12px;
    }

    :where(body.page-service-aidx) .group-arrow {
        width: 10px;
        transform: rotate(0deg) !important;
        transition: all 0.3s ease;
    }

    :where(body.page-service-aidx) .sidebar-group.active .group-arrow {
        opacity: 1;
        transform: rotate(0deg) !important;
    }

    :where(body.page-service-aidx) .sidebar-link {
        padding-left: 0;
        font-size: 16px;
        color: #7C8190;
        font-weight: 400;
        transition: color 0.3s;
    }

    :where(body.page-service-aidx) .sidebar-item.active .sidebar-link {
        color: #0032D6;
    }

    :where(body.page-service-aidx) .item-arrow {
        display: none; /* 移动端 Tab 不需要箭头 */
    }

    /* 内容区域调整 */
    :where(body.page-service-aidx) .service-content {
        width: 100%;
        padding: 16px;
    }

    :where(body.page-service-aidx) .content-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* 网格子元素调整 */
    :where(body.page-service-aidx) .benefit-grid, :where(body.page-service-aidx) .other-solution-grid, :where(body.page-service-aidx) .feature-grid, :where(body.page-service-aidx) .dx-feature-grid {
        grid-template-columns: 1fr;
    }

    :where(body.page-service-aidx) .solution-item {
        flex-direction: column;
    }

    :where(body.page-service-aidx) .dx-feature-card {
        flex-direction: column !important;
    }

    :where(body.page-service-aidx) .dx-feature-img {
        width: 100%;
        height: 200px;
    }

    :where(body.page-service-aidx) .dx-feature-info {
        padding: 16px;
    }

    :where(body.page-service-aidx) .solution-visual {
        width: 100%;
    }

    :where(body.page-service-aidx) .service-about-card {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
    }
}


/* ===== service/cloud.css scoped to body.page-service-cloud ===== */
:where(body.page-service-cloud) .service-hero {
    height: 480px;
    background-image: url('/images/service/img-cloud-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(body.page-service-cloud) .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

:where(body.page-service-cloud) .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

:where(body.page-service-cloud) .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-cloud) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

:where(body.page-service-cloud) .breadcrumb img {
    width: 14px;
}

/* =========================================
   布局
   ========================================= */
:where(body.page-service-cloud) .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* =========================================
   侧边栏
   ========================================= */
:where(body.page-service-cloud) .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}

:where(body.page-service-cloud) .sidebar-group {
    margin-bottom: 24px;
}

:where(body.page-service-cloud) .sidebar-group:last-child {
    margin-bottom: 0;
}

:where(body.page-service-cloud) .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}

:where(body.page-service-cloud) .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

:where(body.page-service-cloud) .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

:where(body.page-service-cloud) .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

:where(body.page-service-cloud) .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

:where(body.page-service-cloud) .sidebar-group.active .sidebar-menu {
    display: block;
}

:where(body.page-service-cloud) .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}

:where(body.page-service-cloud) .sidebar-item:last-child {
    margin-bottom: 0;
}

:where(body.page-service-cloud) .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
}

:where(body.page-service-cloud) .sidebar-item:hover, :where(body.page-service-cloud) .sidebar-item.active {
    background: #F2F7FB;
}

:where(body.page-service-cloud) .sidebar-item:hover .sidebar-link, :where(body.page-service-cloud) .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

:where(body.page-service-cloud) .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

:where(body.page-service-cloud) .sidebar-item.active .item-arrow {
    display: inline-block;
    background-image: url('/images/service/icon-arrow-blue.png');
}

/* =========================================
   内容区域
   ========================================= */

:where(body.page-service-cloud) .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

:where(body.page-service-cloud) .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   公共内容样式
   ========================================= */
:where(body.page-service-cloud) .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}

:where(body.page-service-cloud) .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}

:where(body.page-service-cloud) .content-list {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    padding-left: 20px;
}

:where(body.page-service-cloud) .content-list li {
    margin-bottom: 4px;
}

:where(body.page-service-cloud) .content-list li:last-child {
    margin-bottom: 0;
}

:where(body.page-service-cloud) .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}

:where(body.page-service-cloud) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}

/* =========================================
   卡片公共样式
   ========================================= */
:where(body.page-service-cloud) .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 20px;
}

/* 卡片标题 - 蓝色 */
:where(body.page-service-cloud) .benefit-index, :where(body.page-service-cloud) .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
    text-align: center;
}

:where(body.page-service-cloud) .other-solution-title.text-left {
    text-align: left;
}

:where(body.page-service-cloud) .benefit-index {
    display: block;
}

/* 卡片正文 - 灰色 */
:where(body.page-service-cloud) .benefit-desc, :where(body.page-service-cloud) .other-solution-desc, :where(body.page-service-cloud) .solution-desc, :where(body.page-service-cloud) .card-list {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
}

/* 卡片内列表 */
:where(body.page-service-cloud) .card-list {
    padding-left: 18px;
}

:where(body.page-service-cloud) .card-list li {
    margin-bottom: 4px;
}

:where(body.page-service-cloud) .card-list li:last-child {
    margin-bottom: 0;
}

/* =========================================
   网格布局
   ========================================= */
:where(body.page-service-cloud) .benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

:where(body.page-service-cloud) .other-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

:where(body.page-service-cloud) .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

:where(body.page-service-cloud) .single-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

:where(body.page-service-cloud) .feature-full {
    grid-column: 1 / -1;
}

/* =========================================
   JRISE - 关于卡片
   ========================================= */
:where(body.page-service-cloud) .service-about-card {
    background: #F2F7FB;
    padding: 24px 14px 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    gap: 14px;
}

:where(body.page-service-cloud) .about-title {
    color: #0068B6;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
}

:where(body.page-service-cloud) .about-text {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

:where(body.page-service-cloud) .about-visual {
    flex-shrink: 0;
}

:where(body.page-service-cloud) .about-visual img {
    width: 184px;
}

/* =========================================
   生成AIソリューション - 方案项
   ========================================= */
:where(body.page-service-cloud) .solution {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

:where(body.page-service-cloud) .solution-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

:where(body.page-service-cloud) .solution-info {
    flex: 1;
}

:where(body.page-service-cloud) .solution-number {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

:where(body.page-service-cloud) .solution-number span {
    color: #0032D6;
    padding-right: 12px;
}

:where(body.page-service-cloud) .solution-visual {
    flex-shrink: 0;
    width: 400px;
}

:where(body.page-service-cloud) .solution-visual img {
    width: 100%;
}

/* =========================================
   DX Integration - 图文特長卡片
   ========================================= */
:where(body.page-service-cloud) .dx-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

:where(body.page-service-cloud) .dx-feature-card {
    display: flex;
    align-items: center;
    border-color: #FFFFFF;
    padding: 0;
}

:where(body.page-service-cloud) .dx-feature-card .dx-feature-info {
    padding: 24px;
}

:where(body.page-service-cloud) .dx-feature-img {
    flex-shrink: 0;
    width: 160px;
    height: 120px;
    overflow: hidden;
}

:where(body.page-service-cloud) .dx-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(body.page-service-cloud) .dc-feature-box {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

:where(body.page-service-cloud) .feature-visual {
    width: 256px;
    flex-shrink: 0;
}

:where(body.page-service-cloud) .feature-visual img {
    width: 100%;
    display: block;
}

:where(body.page-service-cloud) .content-image-80 {
    width: 80%;
    margin: 32px auto;
}

:where(body.page-service-cloud) .content-image-80 img {
    width: 100%;
    display: block;
}

:where(body.page-service-cloud) .service-desk-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 24px;
}

:where(body.page-service-cloud) .desk-icon img {
    width: 52px;
}

:where(body.page-service-cloud) .desk-text {
    color:  #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

:where(body.page-service-cloud) .cloud-service-section {
    background: #F2F7FB;
    padding: 24px;
    margin-top: 24px;
}

:where(body.page-service-cloud) .cloud-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* =========================================
   Youfu Tab 特有样式
   ========================================= */

:where(body.page-service-cloud) .youfu-info-list {
    flex: 1;
}

:where(body.page-service-cloud) .info-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(5, 18, 67, 0.1);
    gap: 24px;
}

:where(body.page-service-cloud) .info-item:last-child {
    border-bottom: none;
}

:where(body.page-service-cloud) .info-label {
    width: 144px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #051243;
    flex-shrink: 0;
}

:where(body.page-service-cloud) .info-value {
    flex: 1;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-cloud) .info-value .card-list {
    padding-left: 20px;
    color: #051243;
    font-size: 16px;
}

:where(body.page-service-cloud) .info-value .card-list li {
    margin-bottom: 0;
}

:where(body.page-service-cloud) .cert-icon img {
    object-fit: contain;
}

/* =========================================
   响应式设计 (768px 及以下)
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-service-cloud) .service-hero {
        height: 320px;
        display: flex;
        align-items: center;
    }

    :where(body.page-service-cloud) .service-hero .section-max {
        padding: 0 20px;
    }

    :where(body.page-service-cloud) .service-hero h1 {
        font-size: 32px !important;
        line-height: 40px;
    }

    :where(body.page-service-cloud) .breadcrumb {
        padding-left: 12px;
    }

    :where(body.page-service-cloud) .service-container {
        padding-bottom: 100px;
    }

    :where(body.page-service-cloud) .service-layout {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    /* 侧边栏转为顶部 Tab */
    :where(body.page-service-cloud) .service-sidebar {
        width: 100%;
        position: sticky;
        top: 52px; /* 对应移动端 Header 高度 */
        z-index: 1001;
        padding: 0;
        background: #FFFFFF;
        border: none;
        margin-bottom: 0;
    }

    :where(body.page-service-cloud) .sidebar-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    :where(body.page-service-cloud) .sidebar-group {
        margin-bottom: 0;
        display: contents; /* 使子元素直接参与 wrapper 的 grid 布局 */
    }

    :where(body.page-service-cloud) .sidebar-group-title {
        grid-row: 1;
        margin-bottom: 0;
        padding: 8px 4px;
        font-size: 14px;
        color: #051243;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        cursor: pointer;
        height: 100%;
        transition: background-color 0.3s;
    }
    :where(body.page-service-cloud) .sidebar-group.active .sidebar-group-title {
        background: #F2F7FB;
        color: #051243; /* 保持与默认颜色一致 */
    }

    /* 二级菜单转为横向 Row */
    :where(body.page-service-cloud) .sidebar-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none; /* 默认隐藏，仅在 active 组下显示 */
        flex-direction: row;
        overflow-x: auto;
        background: #F2F7FB;
        padding: 8px 4px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    :where(body.page-service-cloud) .sidebar-group.active .sidebar-menu {
        display: flex;
    }

    :where(body.page-service-cloud) .sidebar-item {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 6px 12px;
    }

    :where(body.page-service-cloud) .sidebar-link {
        padding-left: 0;
        font-size: 16px;
        color: #7C8190;
        font-weight: 400;
        transition: color 0.3s;
    }

    :where(body.page-service-cloud) .sidebar-item.active .sidebar-link {
        color: #0032D6;
    }

    :where(body.page-service-cloud) .group-arrow {
        width: 10px;
        transform: rotate(0deg) !important;
        transition: all 0.3s ease;
    }

    :where(body.page-service-cloud) .sidebar-group.active .group-arrow {
        opacity: 1;
        transform: rotate(0deg) !important;
    }

    :where(body.page-service-cloud) .item-arrow {
        display: none; /* 移动端 Tab 不需要箭头 */
    }

    /* 内容区域调整 */
    :where(body.page-service-cloud) .service-content {
        width: 100%;
        padding: 16px;
    }

    :where(body.page-service-cloud) .content-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* 网格子元素调整 */
    :where(body.page-service-cloud) .benefit-grid, :where(body.page-service-cloud) .other-solution-grid, :where(body.page-service-cloud) .feature-grid, :where(body.page-service-cloud) .dx-feature-grid, :where(body.page-service-cloud) .cloud-service-grid, :where(body.page-service-cloud) .single-column-grid {
        grid-template-columns: 1fr;
    }

    /* 移动端上下布局适配 */
    :where(body.page-service-cloud) .solution-item, :where(body.page-service-cloud) .dx-feature-card, :where(body.page-service-cloud) .info-item, :where(body.page-service-cloud) .dc-feature-box {
        flex-direction: column;
        gap: 16px;
    }

    :where(body.page-service-cloud) .solution-visual, :where(body.page-service-cloud) .dx-feature-img, :where(body.page-service-cloud) .info-label, :where(body.page-service-cloud) .feature-visual {
        width: 100%;
    }

    :where(body.page-service-cloud) .dx-feature-img {
        height: 200px;
    }

    :where(body.page-service-cloud) .info-label {
        padding-bottom: 4px;
    }

    :where(body.page-service-cloud) .service-about-card {
        flex-direction: column;
        padding: 24px 20px;
    }

    :where(body.page-service-cloud) .service-desk-card {
        flex-direction: column;
        gap: 16px;
    }

    :where(body.page-service-cloud) .content-section .border-card.d-flex {
        flex-direction: column;
        gap: 24px;
    }

    :where(body.page-service-cloud) .strength-visual {
        width: 100%;
    }

    :where(body.page-service-cloud) .strength-visual img {
        width: 100% !important;
        margin: 0;
    }
}


/* ===== service/network.css scoped to body.page-service-network ===== */
:where(body.page-service-network) .service-hero {
    height: 480px;
    background-image: url('/images/service/img-network-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(body.page-service-network) .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

:where(body.page-service-network) .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

:where(body.page-service-network) .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-network) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

:where(body.page-service-network) .breadcrumb img {
    width: 14px;
}

/* =========================================
   布局
   ========================================= */
:where(body.page-service-network) .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* =========================================
   侧边栏
   ========================================= */
:where(body.page-service-network) .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}

:where(body.page-service-network) .sidebar-group {
    margin-bottom: 24px;
}

:where(body.page-service-network) .sidebar-group:last-child {
    margin-bottom: 0;
}

:where(body.page-service-network) .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}
:where(body.page-service-network) .sidebar-item:hover, :where(body.page-service-network) .sidebar-item.active {
    background: #F2F7FB;
}
:where(body.page-service-network) .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

:where(body.page-service-network) .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

:where(body.page-service-network) .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

:where(body.page-service-network) .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

:where(body.page-service-network) .sidebar-group.active .sidebar-menu {
    display: block;
}

:where(body.page-service-network) .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}

:where(body.page-service-network) .sidebar-item:last-child {
    margin-bottom: 0;
}

:where(body.page-service-network) .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
}

:where(body.page-service-network) .sidebar-item:hover .sidebar-link, :where(body.page-service-network) .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

:where(body.page-service-network) .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

:where(body.page-service-network) .sidebar-item.active .item-arrow {
    display: inline-block;
}

/* =========================================
   内容区域
   ========================================= */

:where(body.page-service-network) .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

:where(body.page-service-network) .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   公共内容样式
   ========================================= */
:where(body.page-service-network) .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}

:where(body.page-service-network) .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}

:where(body.page-service-network) .content-list {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    padding-left: 20px;
}

:where(body.page-service-network) .content-list li {
    margin-bottom: 4px;
}

:where(body.page-service-network) .content-list li:last-child {
    margin-bottom: 0;
}

:where(body.page-service-network) .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}

:where(body.page-service-network) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}

/* =========================================
   卡片公共样式
   ========================================= */
:where(body.page-service-network) .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 20px;
}

/* 卡片标题 - 蓝色 */
:where(body.page-service-network) .benefit-index, :where(body.page-service-network) .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
}

:where(body.page-service-network) .benefit-index {
    display: block;
}

/* 卡片正文 - 灰色 */
:where(body.page-service-network) .benefit-desc, :where(body.page-service-network) .other-solution-desc, :where(body.page-service-network) .solution-desc, :where(body.page-service-network) .card-list {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
}

/* 卡片内列表 */
:where(body.page-service-network) .card-list {
    padding-left: 18px;
}

:where(body.page-service-network) .card-list li {
    margin-bottom: 4px;
}

:where(body.page-service-network) .card-list li:last-child {
    margin-bottom: 0;
}

/* =========================================
   网格布局
   ========================================= */
:where(body.page-service-network) .benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

:where(body.page-service-network) .other-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

:where(body.page-service-network) .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

:where(body.page-service-network) .feature-full {
    grid-column: 1 / -1;
}

/* =========================================
   JRISE - 关于卡片
   ========================================= */
:where(body.page-service-network) .service-about-card {
    background: #F2F7FB;
    padding: 24px 14px 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    gap: 14px;
}

:where(body.page-service-network) .about-title {
    color: #0068B6;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
}

:where(body.page-service-network) .about-text {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

:where(body.page-service-network) .about-visual {
    flex-shrink: 0;
}

:where(body.page-service-network) .about-visual img {
    width: 184px;
}

/* =========================================
   生成AIソリューション - 方案项
   ========================================= */
:where(body.page-service-network) .solution {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

:where(body.page-service-network) .solution-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

:where(body.page-service-network) .solution-info {
    flex: 1;
}

:where(body.page-service-network) .solution-number {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

:where(body.page-service-network) .solution-number span {
    color: #0032D6;
    padding-right: 12px;
}

:where(body.page-service-network) .solution-visual {
    flex-shrink: 0;
    width: 400px;
}

:where(body.page-service-network) .solution-visual img {
    width: 100%;
}

/* =========================================
   DX Integration - 图文特長卡片
   ========================================= */
:where(body.page-service-network) .dx-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

:where(body.page-service-network) .dx-feature-card {
    display: flex;
    align-items: center;
    border-color: #FFFFFF;
    padding: 0;
}

:where(body.page-service-network) .dx-feature-card .dx-feature-info {
    padding: 24px;
}

:where(body.page-service-network) .dx-feature-img {
    flex-shrink: 0;
    width: 160px;
    height: 120px;
    overflow: hidden;
}

:where(body.page-service-network) .dx-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   响应式设计 (768px 及以下)
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-service-network) .service-hero {
        height: 320px;
        display: flex;
        align-items: center;
    }

    :where(body.page-service-network) .service-hero .section-max {
        padding: 0 20px;
    }

    :where(body.page-service-network) .service-hero h1 {
        font-size: 32px !important;
        line-height: 40px;
    }

    :where(body.page-service-network) .breadcrumb {
        padding-left: 12px;
    }

    :where(body.page-service-network) .service-container {
        padding-bottom: 100px;
    }

    :where(body.page-service-network) .service-layout {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    /* 侧边栏转为顶部 Tab */
    :where(body.page-service-network) .service-sidebar {
        width: 100%;
        position: sticky;
        top: 52px; /* 对应移动端 Header 高度 */
        z-index: 1001;
        padding: 0;
        background: #FFFFFF;
        border: none;
        margin-bottom: 0;
    }

    :where(body.page-service-network) .sidebar-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    :where(body.page-service-network) .sidebar-group {
        margin-bottom: 0;
        display: contents; /* 使子元素直接参与 wrapper 的 grid 布局 */
    }

    :where(body.page-service-network) .sidebar-group-title {
        grid-row: 1;
        margin-bottom: 0;
        padding: 8px 4px;
        font-size: 14px;
        color: #051243;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        cursor: pointer;
        height: 100%;
        transition: background-color 0.3s;
    }
    :where(body.page-service-network) .sidebar-group.active .sidebar-group-title {
        background: #F2F7FB;
        color: #051243; /* 保持与默认颜色一致 */
    }

    /* 二级菜单转为横向 Row */
    :where(body.page-service-network) .sidebar-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none; /* 默认隐藏，仅在 active 组下显示 */
        flex-direction: row;
        overflow-x: auto;
        background: #F2F7FB;
        padding: 8px 4px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    :where(body.page-service-network) .sidebar-group.active .sidebar-menu {
        display: flex;
    }

    :where(body.page-service-network) .sidebar-item {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 6px 12px;
    }

    :where(body.page-service-network) .sidebar-link {
        padding-left: 0;
        font-size: 16px;
        color: #7C8190;
        font-weight: 400;
        transition: color 0.3s;
    }

    :where(body.page-service-network) .sidebar-item.active .sidebar-link {
        color: #0032D6;
    }

    :where(body.page-service-network) .group-arrow {
        width: 10px;
        transform: rotate(0deg) !important;
        transition: all 0.3s ease;
    }

    :where(body.page-service-network) .sidebar-group.active .group-arrow {
        opacity: 1;
        transform: rotate(0deg) !important;
    }

    :where(body.page-service-network) .item-arrow {
        display: none; /* 移动端 Tab 不需要箭头 */
    }

    /* 内容区域调整 */
    :where(body.page-service-network) .service-content {
        width: 100%;
        padding: 16px;
    }

    :where(body.page-service-network) .content-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* 网格子元素调整 */
    :where(body.page-service-network) .benefit-grid, :where(body.page-service-network) .other-solution-grid, :where(body.page-service-network) .feature-grid, :where(body.page-service-network) .dx-feature-grid {
        grid-template-columns: 1fr;
    }

    :where(body.page-service-network) .solution-item {
        flex-direction: column;
    }

    :where(body.page-service-network) .solution-visual {
        width: 100%;
    }

    :where(body.page-service-network) .service-about-card {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
    }

    :where(body.page-service-network) .content-image-box img {
        width: 100% !important;
    }
}


/* ===== service/security.css scoped to body.page-service-security ===== */
:where(body.page-service-security) .service-hero {
    height: 480px;
    background-image: url('/images/service/img-security-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


:where(body.page-service-security) .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
:where(body.page-service-security) .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

:where(body.page-service-security) .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-security) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}
:where(body.page-service-security) .breadcrumb img {
    width: 14px;
}

/* Service Layout */
:where(body.page-service-security) .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* Sidebar Styling */
:where(body.page-service-security) .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}

:where(body.page-service-security) .sidebar-group {
    margin-bottom: 24px;
}

:where(body.page-service-security) .sidebar-group:last-child {
    margin-bottom: 0;
}

:where(body.page-service-security) .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}
:where(body.page-service-security) .sidebar-item:hover, :where(body.page-service-security) .sidebar-item.active {
    background: #F2F7FB;
}
:where(body.page-service-security) .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

:where(body.page-service-security) .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

:where(body.page-service-security) .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

:where(body.page-service-security) .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

:where(body.page-service-security) .sidebar-group.active .sidebar-menu {
    display: block;
}

:where(body.page-service-security) .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}
:where(body.page-service-security) .sidebar-item:last-child {
    margin-bottom: 0;
}
:where(body.page-service-security) .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
}

:where(body.page-service-security) .sidebar-item:hover .sidebar-link, :where(body.page-service-security) .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

:where(body.page-service-security) .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

:where(body.page-service-security) .sidebar-item.active .item-arrow {
    display: inline-block;
}

/* Content Styling */
:where(body.page-service-security) .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

:where(body.page-service-security) .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 監視・運用サービス */
:where(body.page-service-security) .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}
:where(body.page-service-security) .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}
:where(body.page-service-security) .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}
:where(body.page-service-security) .content-image-80 {
    width: 80%;
    margin: 32px auto;
}

:where(body.page-service-security) .content-image-80 img {
    width: 100%;
    display: block;
}

:where(body.page-service-security) .security-image-placeholder {
    width: 100%;
    min-height: 290px;
    margin: 32px 0;
    background: #071345;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

:where(body.page-service-security) .soc-main-image {
    width: 900px;
    max-width: 100%;
    margin: 32px auto 24px;
    background: #071345;
    height: 367px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

:where(body.page-service-security) .soc-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(body.page-service-security) .soc-main-image span {
    display: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 24px;
}

:where(body.page-service-security) .soc-main-image.is-missing span {
    display: block;
}

:where(body.page-service-security) .soc-operation-panel {
    display: flex;
    justify-content: center;
    margin: 24px 0 40px;
}

:where(body.page-service-security) .soc-operation-image {
    width: 676px;
    max-width: 100%;
    text-align: center;
}

:where(body.page-service-security) .soc-operation-image img {
    display: block;
    width: 100%;
    height: auto;
}

:where(body.page-service-security) .soc-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

:where(body.page-service-security) .soc-info-box {
    border: 1px solid #CFE4F4;
    background: #FFFFFF;
    padding: 20px 24px;
}

:where(body.page-service-security) .soc-info-box h4 {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 8px;
}

:where(body.page-service-security) .soc-info-box ul {
    margin: 0;
    padding-left: 20px;
}

:where(body.page-service-security) .soc-info-box li {
    color: #4A4D56;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

:where(body.page-service-security) .content-image-row {
  display: flex;
  align-items: center;
  gap: 0;            
  width: 100%;       
  margin-bottom: 12px;
}

:where(body.page-service-security) .content-image-row img {
  display: block;
  width: 25%;        
  height: auto;      
  object-fit: cover;
}

/* Step Chevron Flow */
:where(body.page-service-security) .step-chevron-container {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 24px;
}

:where(body.page-service-security) .step-chevron-item {
    flex: 1;
    height: 48px;
    background: #F2F7FB;
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Chevron shape: 20px tip length */
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%);
    padding: 0 10px 0 30px;
}

/* First item: straight left edge */
:where(body.page-service-security) .step-chevron-item:first-child {
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
    padding-left: 20px;
}

/* Last item: straight right edge */
:where(body.page-service-security) .step-chevron-item:last-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
    padding-right: 20px;
}

:where(body.page-service-security) .step-chevron-item span {
    margin-right: 12px;
}

:where(body.page-service-security) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
:where(body.page-service-security) .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
:where(body.page-service-security) .solution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:where(body.page-service-security) .other-solution-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

:where(body.page-service-security) .icon-security-1 {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

:where(body.page-service-security) .solution-cta {
    color: #051243;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    margin-top: 8px;
}
:where(body.page-service-security) .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 24px;
}
:where(body.page-service-security) .border-card-pd12{
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 12px;
}
:where(body.page-service-security) .card-list {
  margin: 0;
  padding-left: 20px;
}
:where(body.page-service-security) .card-list li {
  color: #4A4D56;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  list-style: disc;
  margin-bottom: 4px;
}
:where(body.page-service-security) .other-solution-desc {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    flex: 1;
}

:where(body.page-service-security) .other-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
:where(body.page-service-security) .edr-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
:where(body.page-service-security) .edr-overview-grid .other-solution-card {
    text-align: left;
    align-items: flex-start;
}
:where(body.page-service-security) .grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* =========================================
   响应式设计 (768px 及以下)
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-service-security) .service-hero {
        height: 320px;
        display: flex;
        align-items: center;
    }

    :where(body.page-service-security) .service-hero .section-max {
        padding: 0 20px;
    }

    :where(body.page-service-security) .service-hero h1 {
        font-size: 32px !important;
        line-height: 40px;
    }

    :where(body.page-service-security) .security-image-placeholder {
        min-height: 180px;
        margin: 24px 0;
    }

    :where(body.page-service-security) .soc-main-image {
        height: auto;
        aspect-ratio: 900 / 367;
        margin: 24px 0;
        width: 100%;
    }

    :where(body.page-service-security) .soc-operation-panel {
        margin: 24px 0 36px;
    }

    :where(body.page-service-security) .soc-operation-image {
        width: 100%;
    }

    :where(body.page-service-security) .soc-operation-image.overflow-mobile-auto {
        overflow-x: auto;
    }

    :where(body.page-service-security) .soc-operation-image.overflow-mobile-auto img {
        min-width: 345px;
    }

    :where(body.page-service-security) .soc-info-box {
        padding: 16px;
    }

    :where(body.page-service-security) .breadcrumb {
        padding-left: 12px;
    }

    :where(body.page-service-security) .service-container {
        padding-bottom: 100px;
    }

    :where(body.page-service-security) .service-layout {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    /* 侧边栏转为顶部 Tab */
    :where(body.page-service-security) .service-sidebar {
        width: 100%;
        position: sticky;
        top: 52px; /* 对应移动端 Header 高度 */
        z-index: 1001;
        padding: 0;
        background: #FFFFFF;
        border: none;
        margin-bottom: 0;
    }

    :where(body.page-service-security) .sidebar-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    :where(body.page-service-security) .sidebar-group {
        margin-bottom: 0;
        display: contents; /* 使子元素直接参与 wrapper 的 grid 布局 */
    }

    :where(body.page-service-security) .sidebar-group-title {
        grid-row: 1;
        margin-bottom: 0;
        padding: 8px 4px;
        font-size: 14px;
        color: #051243;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        cursor: pointer;
        height: 100%;
        transition: background-color 0.3s;
    }
    :where(body.page-service-security) .sidebar-group.active .sidebar-group-title {
        background: #F2F7FB;
        color: #051243; /* 保持与默认颜色一致 */
    }

    /* 二级菜单转为横向 Row */
    :where(body.page-service-security) .sidebar-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none; /* 默认隐藏，仅在 active 组下显示 */
        flex-direction: row;
        overflow-x: auto;
        background: #F2F7FB;
        padding: 8px 4px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    :where(body.page-service-security) .sidebar-group.active .sidebar-menu {
        display: flex;
    }

    :where(body.page-service-security) .sidebar-item {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 6px 12px;
    }

    :where(body.page-service-security) .sidebar-link {
        padding-left: 0;
        font-size: 16px;
        color: #7C8190;
        font-weight: 400;
        transition: color 0.3s;
    }

    :where(body.page-service-security) .sidebar-item.active .sidebar-link {
        color: #0032D6;
    }

    :where(body.page-service-security) .group-arrow {
        width: 10px;
        transform: rotate(0deg) !important;
        transition: all 0.3s ease;
    }

    :where(body.page-service-security) .sidebar-group.active .group-arrow {
        opacity: 1;
        transform: rotate(0deg) !important;
    }

    :where(body.page-service-security) .item-arrow {
        display: none; /* 移动端 Tab 不需要箭头 */
    }

    /* 内容区域调整 */
    :where(body.page-service-security) .service-content {
        width: 100%;
        padding: 16px;
    }

    :where(body.page-service-security) .content-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* 网格子元素调整 */
    :where(body.page-service-security) .benefit-grid, :where(body.page-service-security) .other-solution-grid, :where(body.page-service-security) .feature-grid, :where(body.page-service-security) .dx-feature-grid {
        grid-template-columns: 1fr;
    }

    :where(body.page-service-security) .solution-item {
        flex-direction: column;
    }

    :where(body.page-service-security) .solution-visual {
        width: 100%;
    }

    :where(body.page-service-security) .service-about-card {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
    }
    :where(body.page-service-security) .content-image-80 {
        width: 100%;
    }
    :where(body.page-service-security) .content-image-80 img {
        width: 100%;
    }
    :where(body.page-service-security) .content-image-80.overflow-mobile-auto {
        width: 100%;
        overflow-x: auto;
    }

    /* Step Chevron Mobile Adjustments */
    :where(body.page-service-security) .step-chevron-container {
        gap: 2px;
        margin-bottom: 16px;
    }

    :where(body.page-service-security) .step-chevron-item {
        height: 32px;
        font-size: 12px;
        padding: 0 4px 0 16px;
        clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%);
    }

    :where(body.page-service-security) .step-chevron-item:first-child {
        clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
        padding-left: 8px;
    }

    :where(body.page-service-security) .step-chevron-item:last-child {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10px 50%);
        padding-right: 8px;
    }

    :where(body.page-service-security) .step-chevron-item span {
        margin-right: 4px;
    }
}


/* ===== service/si.css scoped to body.page-service-si ===== */
:where(body.page-service-si) .service-hero {
    height: 480px;
    background-image: url('/images/service/img-si-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(body.page-service-si) .service-hero h1 span {
    display: block;
}


:where(body.page-service-si) .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
:where(body.page-service-si) .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

/* 统计数据区域背景色 */
:where(body.page-service-si) .stats-section {
    background: #F2F7FB;
    padding: 24px 60px;
    justify-content: flex-start;
}

:where(body.page-service-si) .stats-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    text-align: center;
}

:where(body.page-service-si) .stats-list-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding-left: 0;
    color: #051243;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

:where(body.page-service-si) .stats-list-item::before {
    content: none;
}

:where(body.page-service-si) .stats-list-item + .stats-list-item {
    border-left: 1px solid rgba(5, 18, 67, 0.28);
    padding-left: 48px;
}

:where(body.page-service-si) .stats-list .stats-value {
    width: 100%;
    font-weight: 600;
}

:where(body.page-service-si) .stats-list .stats-label {
    width: 100%;
}

:where(body.page-service-si) .stats-list .counter-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 2px;
}

:where(body.page-service-si) .stats-list .stats-note {
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

:where(body.page-service-si) .business-divider {
    width: 1px;
    height: 40px;
    background: #051243;
    opacity: 0.4;
}
:where(body.page-service-si) .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

:where(body.page-service-si) .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}
:where(body.page-service-si) .breadcrumb img {
    width: 14px;
}

/* Service Layout */
:where(body.page-service-si) .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* Sidebar Styling */
:where(body.page-service-si) .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}


:where(body.page-service-si) .sidebar-group {
    margin-bottom: 24px;
}

:where(body.page-service-si) .sidebar-group:last-child {
    margin-bottom: 0;
}

:where(body.page-service-si) .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}
:where(body.page-service-si) .sidebar-item:hover, :where(body.page-service-si) .sidebar-item.active {
    background: #F2F7FB;
}
:where(body.page-service-si) .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

:where(body.page-service-si) .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

:where(body.page-service-si) .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

:where(body.page-service-si) .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

:where(body.page-service-si) .sidebar-group.active .sidebar-menu {
    display: block;
}

:where(body.page-service-si) .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}
:where(body.page-service-si) .sidebar-item:last-child {
    margin-bottom: 0;
}
:where(body.page-service-si) .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
    text-align: left;
    display: grid !important;
    grid-template-columns: 1fr 14px;
    align-items: center;
    column-gap: 8px;
}

:where(body.page-service-si) .sidebar-link .si-menu-line {
    display: block;
    grid-column: 1;
    line-height: 24px;
    text-align: left;
}

:where(body.page-service-si) .sidebar-link .item-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

:where(body.page-service-si) .sidebar-item:hover .sidebar-link, :where(body.page-service-si) .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

:where(body.page-service-si) .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

:where(body.page-service-si) .sidebar-item.active .item-arrow {
    display: inline-block;
}

:where(body.page-service-si) .sidebar-item .item-arrow {
    display: none;
}

:where(body.page-service-si) .sidebar-item.active .item-arrow {
    display: inline-block;
    background-image: url('/images/service/icon-arrow-blue.png');
}

:where(body.page-service-si) .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

:where(body.page-service-si) .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 内容样式 */
:where(body.page-service-si) .content-section {
    background: linear-gradient(180deg, rgba(0, 161, 220, 0.00) 0%, rgba(0, 104, 182, 0.10) 100%);
    padding: 24px 24px 28px;
}
:where(body.page-service-si) .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}
:where(body.page-service-si) .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}
:where(body.page-service-si) .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}
:where(body.page-service-si) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
:where(body.page-service-si) .feature-cards {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
:where(body.page-service-si) .feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 16px 12px;
  position: relative;
  box-sizing: border-box;
}

:where(body.page-service-si) .w-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

:where(body.page-service-si) .card-title {
  color: #0068B6;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin: 0 0 12px 0;
}

:where(body.page-service-si) .card-list {
  margin: 0;
  padding-left: 20px;
}
:where(body.page-service-si) .card-list li {
  color: #4A4D56;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  list-style: disc;
  margin-bottom: 4px;
}
/* 詳細説明 */
:where(body.page-service-si) .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 20px;
}
:where(body.page-service-si) .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
:where(body.page-service-si) .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
}
:where(body.page-service-si) .other-solution-desc {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
}
:where(body.page-service-si) .solution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
:where(body.page-service-si) .text-list {
    margin: 0;
    padding-left: 20px;
    margin-bottom: 24px;
}
:where(body.page-service-si) .text-list li {
    color:  #051243;
    list-style: disc;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px; 
}

/* =========================================
   响应式设计 (768px 及以下)
   ========================================= */
@media (max-width: 768px) {
    :where(body.page-service-si) .service-hero {
        height: 320px;
        display: flex;
        align-items: center;
    }

    :where(body.page-service-si) .service-hero .section-max {
        padding: 0 20px;
    }

    :where(body.page-service-si) .service-hero h1 {
        font-size: 32px !important;
        line-height: 40px;
    }

    :where(body.page-service-si) .breadcrumb {
        padding-left: 12px;
    }

    :where(body.page-service-si) .service-container {
         padding-bottom: 100px;
    }

    :where(body.page-service-si) .service-layout {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    /* 侧边栏转为顶部 Tab */
    :where(body.page-service-si) .service-sidebar {
        width: 100%;
        position: sticky;
        top: 52px; /* 对应移动端 Header 高度 */
        z-index: 1001;
        padding: 0;
        background: #FFFFFF;
        border: none;
        margin-bottom: 0;
    }

    :where(body.page-service-si) .sidebar-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    :where(body.page-service-si) .sidebar-group {
        margin-bottom: 0;
        display: contents; /* 使子元素直接参与 wrapper 的 grid 布局 */
    }

    :where(body.page-service-si) .sidebar-group-title {
        grid-row: 1;
        margin-bottom: 0;
        padding: 8px 4px;
        font-size: 14px;
        color: #051243;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        cursor: pointer;
        height: 100%;
        transition: background-color 0.3s;
    }
    :where(body.page-service-si) .sidebar-group.active .sidebar-group-title {
        background: #F2F7FB;
        color: #051243; /* 保持与默认颜色一致 */
    }

    /* 二级菜单转为横向 Row */
    :where(body.page-service-si) .sidebar-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none; /* 默认隐藏，仅在 active 组下显示 */
        flex-direction: row;
        overflow-x: auto;
        background: #F2F7FB;
        padding: 8px 4px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    :where(body.page-service-si) .sidebar-group.active .sidebar-menu {
        display: flex;
    }

    :where(body.page-service-si) .sidebar-item {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 6px 12px;
    }

    :where(body.page-service-si) .sidebar-link {
        padding-left: 0;
        font-size: 16px;
        color: #7C8190;
        font-weight: 400;
        transition: color 0.3s;
    }

    :where(body.page-service-si) .sidebar-item.active .sidebar-link {
        color: #0032D6;
    }

    :where(body.page-service-si) .item-arrow {
        display: none; /* 移动端 Tab 不需要箭头 */
    }

    /* 内容区域调整 */
     :where(body.page-service-si) .service-content {
        width: 100%;
        padding: 16px;
    }

    :where(body.page-service-si) .content-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* 网格子元素调整 */
    :where(body.page-service-si) .benefit-grid, :where(body.page-service-si) .other-solution-grid, :where(body.page-service-si) .feature-grid, :where(body.page-service-si) .dx-feature-grid {
        grid-template-columns: 1fr;
    }

    :where(body.page-service-si) .solution-item {
        flex-direction: column;
    }

    :where(body.page-service-si) .solution-visual {
        width: 100%;
    }

    :where(body.page-service-si) .service-about-card {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
    }

    /* Stats Section Mobile Layout */
    :where(body.page-service-si) .stats-section {
        padding: 24px 20px !important;
    }

    :where(body.page-service-si) .stats-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    :where(body.page-service-si) .stats-list-item {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding-left: 18px;
        font-size: 16px;
        line-height: 26px;
    }

    :where(body.page-service-si) .stats-list-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 11px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #051243;
    }

    :where(body.page-service-si) .stats-list-item + .stats-list-item {
        border-left: 0;
        padding-left: 18px;
    }

    :where(body.page-service-si) .stats-list .stats-label, :where(body.page-service-si) .stats-list .stats-value, :where(body.page-service-si) .stats-list .stats-note {
        width: auto;
    }

    :where(body.page-service-si) .stats-list .stats-note {
        flex-basis: 100%;
    }

    :where(body.page-service-si) .stats-list .counter-value {
        font-size: 24px;
        line-height: 30px;
    }

    :where(body.page-service-si) .business-divider {
        display: none !important;
    }
}
/* ===== CMS model page scoped duplicates ===== */
/* ===== CMS model service-cloud duplicated from [data-model-page="service-cloud"] ===== */
[data-model-page="service-cloud"] .service-hero {
    height: 480px;
    background-image: url('/images/service/img-cloud-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

[data-model-page="service-cloud"] .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

[data-model-page="service-cloud"] .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

[data-model-page="service-cloud"] .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="service-cloud"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="service-cloud"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model service-network duplicated from [data-model-page="service-network"] ===== */
[data-model-page="service-network"] .service-hero {
    height: 480px;
    background-image: url('/images/service/img-network-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

[data-model-page="service-network"] .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}

[data-model-page="service-network"] .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

[data-model-page="service-network"] .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="service-network"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="service-network"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model service-security duplicated from [data-model-page="service-security"] ===== */
[data-model-page="service-security"] .service-hero {
    height: 480px;
    background-image: url('/images/service/img-security-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


[data-model-page="service-security"] .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
[data-model-page="service-security"] .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

[data-model-page="service-security"] .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="service-security"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}
[data-model-page="service-security"] .breadcrumb img {
    width: 14px;
}

/* Service Layout */
[data-model-page="service-security"] .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* Sidebar Styling */
[data-model-page="service-security"] .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}

[data-model-page="service-security"] .sidebar-group {
    margin-bottom: 24px;
}

[data-model-page="service-security"] .sidebar-group:last-child {
    margin-bottom: 0;
}

[data-model-page="service-security"] .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}
[data-model-page="service-security"] .sidebar-item:hover, [data-model-page="service-security"] .sidebar-item.active {
    background: #F2F7FB;
}
[data-model-page="service-security"] .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

[data-model-page="service-security"] .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

[data-model-page="service-security"] .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

[data-model-page="service-security"] .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

[data-model-page="service-security"] .sidebar-group.active .sidebar-menu {
    display: block;
}

[data-model-page="service-security"] .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}
[data-model-page="service-security"] .sidebar-item:last-child {
    margin-bottom: 0;
}
[data-model-page="service-security"] .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
}

[data-model-page="service-security"] .sidebar-item:hover .sidebar-link, [data-model-page="service-security"] .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

[data-model-page="service-security"] .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

[data-model-page="service-security"] .sidebar-item.active .item-arrow {
    display: inline-block;
}

/* Content Styling */
[data-model-page="service-security"] .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

[data-model-page="service-security"] .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 監視・運用サービス */
[data-model-page="service-security"] .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}
[data-model-page="service-security"] .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}
[data-model-page="service-security"] .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}
[data-model-page="service-security"] .content-image-80 {
    width: 80%;
    margin: 32px auto;
}

[data-model-page="service-security"] .content-image-80 img {
    width: 100%;
    display: block;
}

[data-model-page="service-security"] .security-image-placeholder {
    width: 100%;
    min-height: 290px;
    margin: 32px 0;
    background: #071345;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

[data-model-page="service-security"] .soc-main-image {
    width: 900px;
    max-width: 100%;
    margin: 32px auto 24px;
    background: #071345;
    height: 367px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-model-page="service-security"] .soc-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-model-page="service-security"] .soc-main-image span {
    display: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 24px;
}

[data-model-page="service-security"] .soc-main-image.is-missing span {
    display: block;
}

[data-model-page="service-security"] .soc-operation-panel {
    display: flex;
    justify-content: center;
    margin: 24px 0 40px;
}

[data-model-page="service-security"] .soc-operation-image {
    width: 676px;
    max-width: 100%;
    text-align: center;
}

[data-model-page="service-security"] .soc-operation-image img {
    display: block;
    width: 100%;
    height: auto;
}

[data-model-page="service-security"] .soc-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

[data-model-page="service-security"] .soc-info-box {
    border: 1px solid #CFE4F4;
    background: #FFFFFF;
    padding: 20px 24px;
}

[data-model-page="service-security"] .soc-info-box h4 {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 8px;
}

[data-model-page="service-security"] .soc-info-box ul {
    margin: 0;
    padding-left: 20px;
}

[data-model-page="service-security"] .soc-info-box li {
    color: #4A4D56;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

[data-model-page="service-security"] .content-image-row {
  display: flex;
  align-items: center;
  gap: 0;            
  width: 100%;       
  margin-bottom: 12px;
}

[data-model-page="service-security"] .content-image-row img {
  display: block;
  width: 25%;        
  height: auto;      
  object-fit: cover;
}

/* Step Chevron Flow */
[data-model-page="service-security"] .step-chevron-container {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 24px;
}

[data-model-page="service-security"] .step-chevron-item {
    flex: 1;
    height: 48px;
    background: #F2F7FB;
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Chevron shape: 20px tip length */
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%);
    padding: 0 10px 0 30px;
}

/* First item: straight left edge */
[data-model-page="service-security"] .step-chevron-item:first-child {
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
    padding-left: 20px;
}

/* Last item: straight right edge */
[data-model-page="service-security"] .step-chevron-item:last-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
    padding-right: 20px;
}

[data-model-page="service-security"] .step-chevron-item span {
    margin-right: 12px;
}

[data-model-page="service-security"] .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
[data-model-page="service-security"] .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
[data-model-page="service-security"] .solution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-model-page="service-security"] .other-solution-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

[data-model-page="service-security"] .icon-security-1 {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

[data-model-page="service-security"] .solution-cta {
    color: #051243;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    margin-top: 8px;
}
[data-model-page="service-security"] .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 24px;
}
[data-model-page="service-security"] .border-card-pd12{
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 12px;
}
[data-model-page="service-security"] .card-list {
  margin: 0;
  padding-left: 20px;
}
[data-model-page="service-security"] .card-list li {
  color: #4A4D56;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  list-style: disc;
  margin-bottom: 4px;
}
[data-model-page="service-security"] .other-solution-desc {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    flex: 1;
}

[data-model-page="service-security"] .other-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
[data-model-page="service-security"] .edr-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
[data-model-page="service-security"] .edr-overview-grid .other-solution-card {
    text-align: left;
    align-items: flex-start;
}
[data-model-page="service-security"] .grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ===== CMS model service-si duplicated from [data-model-page="service-si"] ===== */
[data-model-page="service-si"] .service-hero {
    height: 480px;
    background-image: url('/images/service/img-si-banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

[data-model-page="service-si"] .service-hero h1 span {
    display: block;
}


[data-model-page="service-si"] .service-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
[data-model-page="service-si"] .service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 244px;
}

/* 统计数据区域背景色 */
[data-model-page="service-si"] .stats-section {
    background: #F2F7FB;
    padding: 24px 60px;
    justify-content: flex-start;
}

[data-model-page="service-si"] .stats-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    text-align: center;
}

[data-model-page="service-si"] .stats-list-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding-left: 0;
    color: #051243;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

[data-model-page="service-si"] .stats-list-item::before {
    content: none;
}

[data-model-page="service-si"] .stats-list-item + .stats-list-item {
    border-left: 1px solid rgba(5, 18, 67, 0.28);
    padding-left: 48px;
}

[data-model-page="service-si"] .stats-list .stats-value {
    width: 100%;
    font-weight: 600;
}

[data-model-page="service-si"] .stats-list .stats-label {
    width: 100%;
}

[data-model-page="service-si"] .stats-list .counter-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 2px;
}

[data-model-page="service-si"] .stats-list .stats-note {
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

[data-model-page="service-si"] .business-divider {
    width: 1px;
    height: 40px;
    background: #051243;
    opacity: 0.4;
}
[data-model-page="service-si"] .breadcrumb {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="service-si"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}
[data-model-page="service-si"] .breadcrumb img {
    width: 14px;
}

/* Service Layout */
[data-model-page="service-si"] .service-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 48px;
}

/* Sidebar Styling */
[data-model-page="service-si"] .service-sidebar {
    width: 240px;
    background: #FFFFFF;
    border-top: 4px solid transparent;
    border-width: 4px 0 0 0;
    border-image: linear-gradient(265deg, #1892EE 5.11%, #0032D6 93.64%) 1;
    padding: 24px 20px;
    position: sticky;
    top: 80px;
}


[data-model-page="service-si"] .sidebar-group {
    margin-bottom: 24px;
}

[data-model-page="service-si"] .sidebar-group:last-child {
    margin-bottom: 0;
}

[data-model-page="service-si"] .sidebar-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #051243;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
}
[data-model-page="service-si"] .sidebar-item:hover, [data-model-page="service-si"] .sidebar-item.active {
    background: #F2F7FB;
}
[data-model-page="service-si"] .group-arrow {
    width: 12px;
    transition: transform 0.3s ease;
}

[data-model-page="service-si"] .sidebar-group.active .group-arrow {
    transform: rotate(0deg);
}

[data-model-page="service-si"] .sidebar-group:not(.active) .group-arrow {
    transform: rotate(-90deg);
}

[data-model-page="service-si"] .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

[data-model-page="service-si"] .sidebar-group.active .sidebar-menu {
    display: block;
}

[data-model-page="service-si"] .sidebar-item {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}
[data-model-page="service-si"] .sidebar-item:last-child {
    margin-bottom: 0;
}
[data-model-page="service-si"] .sidebar-link {
    padding: 4px 8px 4px 16px;
    font-size: 14px;
    line-height: 24px;
    color: #7C8190;
    transition: all 0.3s;
    font-weight: 600;
    text-align: left;
    display: grid !important;
    grid-template-columns: 1fr 14px;
    align-items: center;
    column-gap: 8px;
}

[data-model-page="service-si"] .sidebar-link .si-menu-line {
    display: block;
    grid-column: 1;
    line-height: 24px;
    text-align: left;
}

[data-model-page="service-si"] .sidebar-link .item-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

[data-model-page="service-si"] .sidebar-item:hover .sidebar-link, [data-model-page="service-si"] .sidebar-item.active .sidebar-link {
    color: #0032D6;
}

[data-model-page="service-si"] .item-arrow {
    width: 14px;
    height: 14px;
    background-image: url('/images/service/icon-arrow-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
    display: none;
    flex-shrink: 0;
}

[data-model-page="service-si"] .sidebar-item.active .item-arrow {
    display: inline-block;
}

[data-model-page="service-si"] .sidebar-item .item-arrow {
    display: none;
}

[data-model-page="service-si"] .sidebar-item.active .item-arrow {
    display: inline-block;
    background-image: url('/images/service/icon-arrow-blue.png');
}

[data-model-page="service-si"] .tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
    padding-top: 8px;
}

[data-model-page="service-si"] .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 内容样式 */
[data-model-page="service-si"] .content-section {
    background: linear-gradient(180deg, rgba(0, 161, 220, 0.00) 0%, rgba(0, 104, 182, 0.10) 100%);
    padding: 24px 24px 28px;
}
[data-model-page="service-si"] .content-title {
    color: #051243;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 24px;
}
[data-model-page="service-si"] .content-desc {
    color: #051243;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}
[data-model-page="service-si"] .line-hr {
    height: 1px;
    background: rgba(5, 18, 67, 0.1);
    margin: 40px 0;
}
[data-model-page="service-si"] .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
[data-model-page="service-si"] .feature-cards {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
[data-model-page="service-si"] .feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 16px 12px;
  position: relative;
  box-sizing: border-box;
}

[data-model-page="service-si"] .w-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

[data-model-page="service-si"] .card-title {
  color: #0068B6;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin: 0 0 12px 0;
}

[data-model-page="service-si"] .card-list {
  margin: 0;
  padding-left: 20px;
}
[data-model-page="service-si"] .card-list li {
  color: #4A4D56;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  list-style: disc;
  margin-bottom: 4px;
}
/* 詳細説明 */
[data-model-page="service-si"] .border-card {
    border: 4px solid #E5F0F8;
    background: #FFFFFF;
    padding: 20px;
}
[data-model-page="service-si"] .sub-title {
    color: #051243;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 24px;
}
[data-model-page="service-si"] .other-solution-title {
    color: #0068B6;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
}
[data-model-page="service-si"] .other-solution-desc {
    color: #4A4D56;
    font-size: 14px;
    line-height: 24px;
}
[data-model-page="service-si"] .solution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
[data-model-page="service-si"] .text-list {
    margin: 0;
    padding-left: 20px;
    margin-bottom: 24px;
}
[data-model-page="service-si"] .text-list li {
    color:  #051243;
    list-style: disc;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px; 
}

/* ===== CMS model news-article duplicated from [data-model-page="news-article"] ===== */
[data-model-page="news-article"] .detail-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding: 96px 24px 120px 24px;
}

[data-model-page="news-article"] .breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="news-article"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="news-article"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model news-detail1 duplicated from [data-model-page="news-detail1"] ===== */
[data-model-page="news-detail1"] .detail-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding: 96px 24px 120px 24px;
}

[data-model-page="news-detail1"] .breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="news-detail1"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="news-detail1"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model news-detail2 duplicated from [data-model-page="news-detail2"] ===== */
[data-model-page="news-detail2"] .detail-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding: 96px 24px 120px 24px;
}

[data-model-page="news-detail2"] .breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="news-detail2"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="news-detail2"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model news-detail3 duplicated from [data-model-page="news-detail3"] ===== */
[data-model-page="news-detail3"] .detail-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
    padding: 96px 24px 120px 24px;
}

[data-model-page="news-detail3"] .breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    color: #051243;
}

[data-model-page="news-detail3"] .breadcrumb a {
    color: #051243;
    opacity: 0.4;
}

[data-model-page="news-detail3"] .breadcrumb img {
    width: 14px;
}

/* ===== CMS model privacy-index duplicated from [data-model-page="privacy-index"] ===== */
[data-model-page="privacy-index"] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[data-model-page="privacy-index"] .privacy-page {
    position: relative;
    width: 100%;
}

[data-model-page="privacy-index"] .privacy-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}


[data-model-page="privacy-index"] .privacy-hero {
    position: relative;
    z-index: 1;
    padding: 0 clamp(20px, 8.33vw, 120px);
}

[data-model-page="privacy-index"] .privacy-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(40px, 5.56vw, 60px) 0 clamp(40px, 10vw, 200px);
    z-index: 1;
}

[data-model-page="privacy-index"] .privacy-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 12vw, 150px) 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

[data-model-page="privacy-index"] .breadcrumb-link {
    text-decoration: none;
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

[data-model-page="privacy-index"] .breadcrumb-link:hover {
    opacity: 0.6;
}

[data-model-page="privacy-index"] .breadcrumb-separator {
    background: url('/images/icon-right.png') no-repeat center center;
    width: clamp(12px, 1.5vw, 14px);
    height: clamp(12px, 1.5vw, 14px);
    background-size: contain;
}

[data-model-page="privacy-index"] .breadcrumb-current {
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

[data-model-page="privacy-index"] .privacy-title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    line-height: 1.2;
}

[data-model-page="privacy-index"] .privacy-subtitle {
    margin: 0 0 clamp(8px, 1.5vw, 12px) 0;
    color: #051243;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: clamp(24px, 3vw, 28px);
}

[data-model-page="privacy-index"] .privacy-paragraph {
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: clamp(22px, 2.5vw, 24px);
}

/* ===== CMS model cookie-index duplicated from [data-model-page="cookie-index"] ===== */
[data-model-page="cookie-index"] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[data-model-page="cookie-index"] .privacy-page {
    position: relative;
    width: 100%;
}

[data-model-page="cookie-index"] .privacy-main {
    background-image: url('/images/img-page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}


[data-model-page="cookie-index"] .privacy-hero {
    position: relative;
    z-index: 1;
    padding: 0 clamp(20px, 8.33vw, 120px);
}

[data-model-page="cookie-index"] .privacy-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(40px, 5.56vw, 60px) 0 clamp(40px, 10vw, 200px);
    z-index: 1;
}

[data-model-page="cookie-index"] .privacy-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 12vw, 150px) 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

[data-model-page="cookie-index"] .breadcrumb-link {
    text-decoration: none;
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

[data-model-page="cookie-index"] .breadcrumb-link:hover {
    opacity: 0.6;
}

[data-model-page="cookie-index"] .breadcrumb-separator {
    background: url('/images/icon-right.png') no-repeat center center;
    width: clamp(12px, 1.5vw, 14px);
    height: clamp(12px, 1.5vw, 14px);
    background-size: contain;
}

[data-model-page="cookie-index"] .breadcrumb-current {
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

[data-model-page="cookie-index"] .privacy-title {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    line-height: 1.2;
}

[data-model-page="cookie-index"] .privacy-subtitle {
    margin: 0 0 clamp(8px, 1.5vw, 12px) 0;
    color: #051243;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: clamp(24px, 3vw, 28px);
}

[data-model-page="cookie-index"] .privacy-paragraph {
    margin-bottom: clamp(24px, 4vw, 40px);
    color: #051243;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: clamp(22px, 2.5vw, 24px);
}

/* ===== CMS model recruit-index duplicated from [data-model-page="recruit-index"] ===== */