/* ==========================================================================
   TNSG Homepage stylesheet
   Rebuilt clean from scratch. No CMS / third-party code.
   Visual replica of the original cochecarservicing template.
   Theme: blue/orange per TNSG logo — themeColor1:#172A88  orange:#F8B62C  themeColor2:#101D5F  footer:#101B4D
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'KumbhSans';
  font-display: swap;
  src: url('../fonts/KumbhSans-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'LeagueGothic';
  font-display: swap;
  src: url('../fonts/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype');
}
@font-face {
  font-family: 'NotoSans';
  font-display: swap;
  src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
}
/* 图标统一使用内联 SVG（class="jc-icon"），由 jc_icon() 输出，零外部依赖、无版权问题 */
.jc-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  font-size: 1.6rem;
  line-height: 1;
}

/* ---------- Variables ---------- */
:root {
  --themeColor1: #172A88;
--themeColorOrange: #F8B62C;      /* primary blue */
  --themeColor2: #101D5F;      /* navy */
  --themeColor3: #ffffff;
  --themeColor4: #999999;
  --themeColor5: #F7F8FA;      /* light grey */
  --themeColor6: #ffffff;
  --footer-bg: #2F343A;
  --about-bg: #131F66;         /* about section deep blue */
  --text-dark: #333333;
  --text-muted: #666666;
  --border: #D8D8D8;
  --max-width: 1680px;
  --pad: 24px;
  --font-head: 'KumbhSans', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'NotoSans', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-gothic: 'LeagueGothic', 'KumbhSans', Arial, sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; } /* 1rem = 10px */
body {
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--themeColor3);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; }
input, textarea { border: 0; font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: bold; }
#document { position: relative; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section { padding: 4% 0; }
.section-head { margin-bottom: 4rem; }
.section-head.center { text-align: center; }
.section-eyebrow {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--themeColorOrange);
  margin-bottom: 0.5rem;
}
.section-title {
  font-size: 5rem;
  font-weight: bold;
  text-transform: capitalize;
  color: #101B4D;
  line-height: 1.2;
}
.section-sub {
  font-size: 1.7rem;
  line-height: 1.7;
  color: var(--themeColor2);
  margin-top: 0.6rem;
}
@media (max-width: 960px) {
  .section-title { font-size: 3.2rem; }
}

/* ---------- Buttons ---------- */
.btn-main {
  position: relative;
  display: inline-block;
  background: var(--themeColor1);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 0;
}
.btn-main:hover { color: #fff; }
/* 从左到右颜色扫过动画：::before 宽度 0→100%（继承 transition） */
.btn-main::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.btn-main:hover::before { width: 100%; }
.btn-fill::before { background: var(--themeColor2); }
.btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
  border-radius: 4px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.btn-ghost:hover { background: var(--themeColor1); border-color: var(--themeColor1); }
/* 浅色底上的描边按钮（404 页 / 搜索结果无结果态用） */
.btn-outline {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--themeColor1);
  color: var(--themeColor1);
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-outline:hover { background: var(--themeColor1); color: #fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
#SITE_HEADER {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.32);
  transition: background-color 0.3s ease;
}
#SITE_HEADER.scrolled { background: rgba(0,0,0,0.55); }
.header-bar {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.logo { flex-shrink: 0; }
.logo img { max-height: 72px; width: auto; }

.nav { flex: 1; }
.mainNav { display: flex; justify-content: center; gap: 0; }
.mainNavLi { position: relative; }
.mainNavLiA {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 2.8rem 2.6rem;
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: #fff;
  transition: color 0.3s;
}
.mainNavLiA:hover,
.mainNavLiA.selected { color: var(--themeColor1); }
.mainNavLiA .jc-icon { font-size: 1.2rem; }

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 25rem;
  background: #C5CAD3;
  padding: 0.8rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 100;
}
.mainNavLi:hover .nav-submenu,
.mainNavLi:focus-within .nav-submenu { opacity: 1; visibility: visible; }
.nav-submenuA {
  display: block;
  padding: 1rem 1.8rem;
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: #333;
  transition: background 0.3s, color 0.3s;
}
.nav-submenuA:hover { background: var(--themeColor1); color: #fff; }

.header-actions { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
/* desktop: WhatsApp icon is mobile-only; Resources nav item is mobile-only */
.header-wa { display: none; }
.nav-resources { display: none; }
.search-btn { color: #fff; padding: 0.2rem; line-height: 1; display: flex; align-items: center; }
.search-btn .jc-icon { display: block; line-height: 1; font-size: 3.2rem; }
.search-btn:hover { color: var(--themeColorOrange); }
.btn-contact {
  background: var(--themeColor1);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.4rem;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border-radius: 4px;
  transition: background 0.3s;
  white-space: nowrap;
}
.btn-contact:hover { background: var(--themeColor2); }

.lang-switch { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  font-size: 1.5rem;
  /* framed pill so flag + arrow read as one complete button */
  padding: 0.7rem 1.1rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  line-height: 1;
}
.lang-btn img { width: 28px; height: 19px; object-fit: cover; border-radius: 2px; }
.lang-btn .jc-icon { font-size: 1.4rem; }
.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 16rem;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 100;
}
.lang-switch:hover .lang-dropdown { opacity: 1; visibility: visible; }
.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.6rem;
  font-size: 1.5rem;
  color: #333;
  transition: background 0.3s;
}
.lang-dropdown a:hover, .lang-dropdown a.selected { background: #f0f2f5; }
.lang-dropdown img { width: 24px; height: 16px; object-fit: cover; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--themeColor2);
}
.hero-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}
/* hero 视频媒体（hero_N_video_url 嵌入 / hero_N_video_file 本地文件，2026-09-06）
   展示规则：按轮播区域 cover 填充——超出容器的部分裁剪掉，以容器中心为基准；
   与图片底同样的 0.7 暗化，保证文字可读。 */
.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.7;
}
/* 本地视频文件：object-fit:cover 原生支持，直接按容器 cover 填充 */
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 嵌入视频（iframe 无法用 object-fit，由 main.js 按容器比例放大居中实现裁剪） */
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  max-width: none;
  max-height: none;
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10%;
  color: #fff;
  z-index: 2;
}
.hero-content-center { align-items: center; text-align: center; }
.hero-content-right { align-items: flex-end; text-align: right; }
.hero-company {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}
.hero-title {
  font-family: var(--font-head);
  font-size: 5.8rem;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 2rem;
  white-space: nowrap;
}
.hero-desc {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  opacity: 0.95;
  white-space: nowrap;
}
.hero-btns { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: flex-start; }
.hero-content-center .hero-btns { justify-content: center; }
.hero-content-right .hero-btns { justify-content: flex-end; }

/* entrance animation: text slides in from left and fades in on active slide */
.hero-slide .hero-company,
.hero-slide .hero-title,
.hero-slide .hero-desc,
.hero-slide .hero-btns {
  opacity: 0;
  transform: translateX(-4rem);
}
.hero-slide-active .hero-company { animation: heroIn 0.7s ease 0.15s both; }
.hero-slide-active .hero-title  { animation: heroIn 0.7s ease 0.3s both; }
.hero-slide-active .hero-desc   { animation: heroIn 0.7s ease 0.45s both; }
.hero-slide-active .hero-btns   { animation: heroIn 0.7s ease 0.6s both; }
@keyframes heroIn {
  /* explicit from: implicit start = current computed style, which after the
     .hero-ready fallback is opacity:1 鈥?making every replay a visual no-op */
  from { opacity: 0; transform: translateX(-4rem); }
  to { opacity: 1; transform: translateX(0); }
}
/* fallback: after 1.2s force text visible (covers frozen/unsupported animation) */
body.hero-ready .hero-slide .hero-company,
body.hero-ready .hero-slide .hero-title,
body.hero-ready .hero-slide .hero-desc,
body.hero-ready .hero-slide .hero-btns {
  opacity: 1;
}
body.hero-ready .hero-slide-active .hero-company,
body.hero-ready .hero-slide-active .hero-title,
body.hero-ready .hero-slide-active .hero-desc,
body.hero-ready .hero-slide-active .hero-btns {
  transform: translateX(0);
}

/* products head: left-aligned title + right-aligned Learn More button on one row */
.products-head .products-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.products-head .ph-more { flex-shrink: 0; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 5;
  transition: background 0.3s;
}
.hero-arrow:hover { background: var(--themeColor1); }
.hero-prev { left: 2rem; }
.hero-next { right: 2rem; }
.hero-dots {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 5;
}
.hero-dots .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s;
}
.hero-dots .dot.active { background: var(--themeColor1); }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.products { background: #fff; }
.proList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.listBox {
  background: #fff;
  border: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
.listBox:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.listBoxHref { display: block; }
.ImghidCont { overflow: hidden; padding: 2rem; }
.imgHoverAn {
  overflow: hidden;
  border-radius: 4px;
}
.imgHoverAn img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.listBox:hover .imgHoverAn img { transform: scale(1.1); }
.listTxt { text-align: center; padding: 0.6rem 1.2rem; }
.listTxt .textLineP {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-dark);
  line-height: 1.4;
}
.listBox .listTxt:last-child { padding-bottom: 2rem; }
.listBox .listTxt:last-child .textLineP {
  font-size: 1.4rem;
  color: var(--themeColor1);
  text-transform: uppercase;
}
/* product 卡片 Learn More：蓝色背景按钮 + 从左到右扫过动画 */
.card-more {
  display: inline-block;
  position: relative;
  margin: 0.5rem auto;
  padding: 0.8rem 2.4rem;
  background: var(--themeColor1);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.4rem;
  text-transform: uppercase;
  border-radius: 3px;
  overflow: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 0;
}
.card-more::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--themeColor2);
  z-index: -1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.card-more:hover::before { width: 100%; }
.listBox:hover .card-more { color: #fff; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  position: relative;
  background-color: var(--about-bg);
  padding: 4% 0;
  overflow: hidden;
}
.about-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right top;
  opacity: 0.4;
}
.about .container { position: relative; z-index: 2; }
.about-text {
  width: 50%;
  margin-left: auto;
}
.about-company {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  margin: 0 4% 1rem 0;
  line-height: 1.7;
}
.about-text > p:not(.about-company) {
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.7;
  margin-bottom: 1.4rem;
}
.about-text > p:last-of-type:not(.about-company) { margin-bottom: 0; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.stat-card {
  border-radius: 5px;
  padding: 3rem 2rem;
  text-align: center;
}
.stat-card-light { background: #fff; }
.stat-card-blue { background: var(--themeColor1); }
.stat-icon { color: var(--themeColor1); display: inline-block; margin-bottom: 1rem; }
.stat-icon .jc-icon { width: 6rem; height: 6rem; font-size: 6rem; }
.stat-card-blue .stat-icon { color: #fff; }
.stat-num {
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: bold;
  color: var(--themeColor1);
  line-height: 1;
}
.stat-card-blue .stat-num { color: #fff; }
.stat-label {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--themeColor1);
  margin-top: 1.2rem;
  text-transform: uppercase;
}
.stat-card-blue .stat-label { color: #fff; }
.btn-about {
  margin-top: 3.6rem;
  display: inline-block;
}

/* ==========================================================================
   CERTIFICATES
   ========================================================================== */
.certificates { background: #fff; }
.cert-slider {
  position: relative;
  overflow: hidden;
}
.cert-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease;
}
.cert-item {
  flex: 0 0 calc(25% - 1.5rem);
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.5rem;
}
.cert-item img {
  width: 100%;
  aspect-ratio: 1 / 1.24;
  object-fit: contain;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 5;
  transition: background 0.3s;
}
.slider-arrow:hover { background: var(--themeColor1); }
.cert-prev { left: -1rem; }
.cert-next { right: -1rem; }

/* ==========================================================================
   APPLICATION
   ========================================================================== */
.application { padding-top: 1%; background: #fff; }
.application .section-head { text-align: center; padding: 2% 12% 0; }
.application .section-title { text-transform: uppercase; }
.application .section-head .section-sub {
  font-size: 1.7rem;
  line-height: 1.7;
  color: var(--themeColor2);
  text-align: center;
  margin-top: 0.6rem;
}
.app-slider {
  position: relative;
  overflow: hidden;
}
.app-track {
  display: flex;
  height: 780px;
  transition: transform 0.6s ease;
}
.app-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.app-slider .container {
  /* labels live INSIDE the bg: anchor the container to the slider's bottom edge
     with a fixed band of background below the labels */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.8rem;
  z-index: 10;
  max-width: none;
  padding: 0 10%;
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem;
  margin-top: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.industry-item {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: background 0.4s ease;
}
.industry-link {
  display: block;
  padding: 2.8rem 2rem 2.4rem 2rem;
  text-align: left;
  cursor: pointer;
}
.industry-item:hover,
.industry-item.active { background: var(--themeColor1); }
.industry-icon {
  width: 44px;
  height: 44px;
  position: relative;
  margin-bottom: 2.2rem;
}
.industry-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.industry-icon .icon-white { display: none; }
.industry-item:hover .icon-normal,
.industry-item.active .icon-normal { display: none; }
.industry-item:hover .icon-white,
.industry-item.active .icon-white { display: block; }
.industry-item p {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.7;
  color: #3F3F3F;
  min-height: 6rem;
  text-align: left;
  transition: color 0.3s;
}
.industry-item:hover p,
.industry-item.active p { color: #fff; }
.app-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.app-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,23,70,0.65) 0%, rgba(5,23,70,0.1) 60%, rgba(0,0,0,0.15) 100%);
}
.app-content {
  position: absolute;
  left: 10%;
  top: 22%;
  max-width: 52rem;
  color: #fff;
  z-index: 2;
}
.app-content h3 {
  font-family: var(--font-head);
  font-size: 4.8rem;
  font-weight: bold;
  margin-bottom: 1.6rem;
  white-space: nowrap;
}
.app-content p {
  font-size: 1.7rem;
  line-height: 1.7;
  margin-bottom: 2.4rem;
}
.btn-app {
  display: inline-block;
  background: var(--themeColor1);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  padding: 1.4rem 2.8rem;
  border-radius: 4px;
  transition: background 0.3s;
}
.btn-app:hover { background: var(--themeColor2); }

/* ==========================================================================
   NEWS
   ========================================================================== */
.news { background: #fff; }
.newsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.newsBox {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.newsBox:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.newsBox a { display: block; }
.newsImg { overflow: hidden; }
.newsImg img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.newsBox:hover .newsImg img { transform: translateY(-10px); }
.newsDate {
  display: inline-block;
  background: var(--themeColorOrange);
  color: #172A88;
  font-size: 1.3rem;
  padding: 0.6rem 1.6rem;
  border-radius: 0 0 5px 5px;
  margin: 0 0 1.6rem 2rem;
}
.newsBox h3 {
  font-family: var(--font-head);
  font-size: 1.9rem;
  color: #0D0D0D;
  /* single line, overflow hidden (line-clamp elements must carry no vertical
     padding; spacing goes to margin, height pinned to 1 x line-height) */
  line-height: 2.7rem;
  max-height: 2.7rem;
  padding: 0 2rem;
  margin: 0 0 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsDesc {
  font-size: 1.6rem;
  color: #666;
  line-height: 2.56rem;
  max-height: 5.12rem;   /* 固定2行：2.56 × 2 */
  min-height: 5.12rem;   /* 保证至少占2行位置，避免文本短只剩1行 */
  padding: 0 2rem;
  margin: 0 0 1.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsMore {
  position: relative;
  display: inline-block;
  margin: 0 2rem 2rem;
  padding: 0.8rem 2rem;
  border: 1px solid var(--themeColor1);
  color: var(--themeColor1);
  font-family: var(--font-head);
  font-size: 1.6rem;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 0;
}
.newsBox:hover .newsMore { color: #fff; }
/* news 扫过动画：蓝色从左往右扫过（color 变化区别于 btn-fill） */
.newsMore::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--themeColor1);
  z-index: -1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.newsBox:hover .newsMore::before { width: 100%; }

/* ==========================================================================
   SERVICE
   ========================================================================== */
.service { background: var(--themeColor5); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7.2rem 4.8rem;
  align-items: start;
  margin-top: 2.4rem;
  /* padding (not margin) so it cannot collapse with .section-head's margin-bottom;
     guarantees the staggered row-2 cards never cover the subtitle */
  padding-top: 3.2rem;
}
.service-card {
  position: relative;
  background: #fff;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 10px 3px rgba(204,204,204,0.48);
  padding: 4rem 3rem;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(204,204,204,0.6); }
/* middle column cards sit higher (original: 48px offset) */
.service-card:nth-child(3n+2) {
  margin-top: -4.8rem;
}
.service-icon {
  width: 60px;
  height: 60px;
  background: var(--themeColor1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.service-icon .jc-icon { font-size: 3rem; color: #fff; }
.service-card h3 {
  font-family: var(--font-gothic);
  font-size: 3.5rem;
  font-weight: normal;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 1.6rem;
}
.service-card p {
  font-size: 1.6rem;
  color: var(--text-dark);
  line-height: 2;
  flex: 1;
}
.service-more {
  font-size: 1.6rem;
  color: var(--themeColor1);
  margin-top: 2rem;
  display: inline-block;
  transition: color 0.3s, transform 0.3s;
}
.service-more:hover { color: var(--themeColor2); transform: translateX(4px); }

.service-card-cta {
  background-color: #131F66;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.service-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}
.service-card-cta .service-cta-text {
  position: relative;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 2.4rem;
  z-index: 2;
  flex: none;
}
.service-card-cta .btn-main {
  position: relative;
  z-index: 2;
  border-radius: 100px;
  margin: 0 auto;
  flex: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#SITE_FOOTER { background: var(--footer-bg); }
.footer-top {
  padding-top: 4%;
  padding-bottom: 1%;
}
.footer-logo { text-align: center; margin-bottom: 1.2rem; }
.footer-logo img { max-height: 80px; width: auto; margin: 0 auto; }
.footer-slogan {
  text-align: center;
  font-size: 1.6rem;
  color: #C5CAD3;
  max-width: 60rem;
  margin: 0 auto 4rem;
}
.footer-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
.footer-contact {
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 4px;
  padding: 2rem;
  /* flex + small gap keeps the icon hugging the info text (21% grid column
     used to leave a huge hole between icon and text) */
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.footer-contact:hover { border-color: #fff; }
.footer-contact .jc-icon {
  font-size: 3rem;
  color: #fff;
  line-height: 1;
}
.footer-contact-info { flex: 1; min-width: 0; }
.footer-contact span {
  display: block;
  font-size: 2rem;
  line-height: 1.7;
  color: #fff;
  text-transform: capitalize;
}
.footer-contact a {
  font-size: 1.6rem;
  line-height: 1.7;
  color: #fff;
  transition: color 0.3s;
  word-break: break-all;
}
/* hover: independent — hovering the icon turns only the icon blue,
   hovering the link turns only the link blue (no card-level coupling) */
.footer-contact .jc-icon:hover,
.footer-contact a:hover { color: var(--themeColor1); }

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 4rem;
  padding-bottom: 4rem;
}
.footer-col h4 {
  font-size: 2.6rem;
  color: #fff;
  margin-bottom: 2rem;
}
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col ul a {
  font-size: 1.6rem;
  color: #C5CAD3;
  transition: color 0.3s;
}
.footer-col ul a:hover { color: var(--themeColor1); }

.footer-contact-form form { display: flex; flex-direction: column; gap: 1.2rem; }
.footer-contact-form input,
.footer-contact-form textarea {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  color: #fff;
  font-size: 1.4rem;
  padding: 1.2rem 1.4rem;
  outline: none;
  transition: border-color 0.3s;
}
.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder { color: rgba(255,255,255,0.7); }
.footer-contact-form input:focus,
.footer-contact-form textarea:focus { border-color: var(--themeColor1); }
.btn-submit {
  display: block;
  margin: 0 auto;
  background: var(--themeColor1);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 1.4rem 2.4rem;
  border-radius: 100px;
  max-width: 17rem;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-submit:hover { background: var(--themeColor2); }
.btn-submit-light { background: #fff; color: var(--themeColor1); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.6rem 0;
  background: var(--footer-bg);
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 1.6rem; color: #fff; }
.privacy-link {
  font-size: 1.6rem;
  color: #fff;
  transition: color 0.3s;
}
.privacy-link:hover { color: var(--themeColor1); }

/* ==========================================================================
   SIDE BAR
   ========================================================================== */
.sideBar {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: rgba(255,255,255,1);
  box-shadow: 0 0 13px rgba(0,0,0,0.22);
}
.sideBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: #fff;
  transition: background 0.3s;
}
.sideBtn .jc-icon { font-size: 2.1rem; color: #7F7F7F; transition: color 0.3s; }
.sideBtn span {
  font-size: 1.3rem;
  color: #7F7F7F;
  margin-top: 0.4rem;
  transition: color 0.3s;
}
.sideBtn:hover { background: var(--themeColor1); }
.sideBtn:hover .jc-icon,
.sideBtn:hover span { color: #fff; }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.43);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 4000;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 3rem;
  max-width: 90%;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}
.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-size: 2.6rem;
  color: #999;
  transition: color 0.3s;
}
.modal-close:hover { color: var(--themeColor1); }

.search-modal { max-width: 46%; padding: 2rem; }
/* 搜索弹窗的关闭按钮：位于弹窗内右上角，不向外偏移，避免撑出容器导致横向滚动 */
.search-modal .modal-close {
  top: 0.6rem;
  right: 0.6rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
}
.search-modal .modal-close:hover { background: var(--themeColor2); color: #fff; }
.search-form { display: flex; gap: 1rem; }
.search-form input {
  flex: 1;
  border: 2px solid var(--themeColor1);
  border-radius: 5px;
  font-size: 1.6rem;
  padding: 1.2rem 1.4rem;
  outline: none;
}

.contact-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  max-width: 60%;
  overflow: hidden;
  border-radius: 6px;
}
.contact-modal-left {
  background: var(--themeColor1);
  color: #fff;
  padding: 4rem;
}
.contact-modal-left h3 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 2.4rem;
}
.contact-modal-left form { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-modal-left input,
.contact-modal-left textarea {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 1.4rem;
  padding: 1.2rem 1.4rem;
  outline: none;
  color: #333;
}
.contact-modal-left input:focus,
.contact-modal-left textarea:focus { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.contact-modal-left input::placeholder,
.contact-modal-left textarea::placeholder { color: #999; }
/* 兼容 Fluent Forms 表单在蓝底上的显示 */
.contact-modal-left .ff-el-input--content input,
.contact-modal-left .ff-el-input--content textarea,
.contact-modal-left .ff-el-form-control {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 1.4rem;
  padding: 1.2rem 1.4rem;
  color: #333;
}
.contact-modal-left .ff-el-group { margin-bottom: 1.2rem; }
.contact-modal-left .ff-btn-submit {
  background: #fff !important;
  color: var(--themeColor1) !important;
  border-radius: 100px !important;
  padding: 1.2rem 3rem !important;
  font-size: 1.6rem !important;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
.contact-modal-left .ff-btn-submit:hover { background: var(--themeColor2) !important; color: #fff !important; }
.contact-modal-left .ff-el-input--label label,
.contact-modal-left .ff-el-input--label { color: #fff; }

/* Fluent Forms 提交成功提示：默认无背景/文字色，会跟蓝底/深底撞色，这里统一白底深字清晰显示 */
.contact-modal-left .ff-message-success {
  color: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  border-radius: 4px;
  padding: 15px !important;
}
.footer-contact-form .ff-message-success {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  border-radius: 4px;
  padding: 15px !important;
}
/* 错误提示也一并统一，避免同样的撞色问题 */
.contact-modal-left .ff-message-error,
.footer-contact-form .ff-message-error {
  background: #fff !important;
  color: #c0392b !important;
  border: 1px solid #e74c3c !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  border-radius: 4px;
  padding: 15px !important;
}
.contact-modal-left .btn-submit,
.contact-modal-left button[type="submit"] {
  background: #fff;
  color: var(--themeColor1);
  border: none;
  border-radius: 100px;
  padding: 1.2rem 3rem;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  align-self: flex-start;
}
.contact-modal-left .btn-submit:hover,
.contact-modal-left button[type="submit"]:hover { background: var(--themeColor2); color: #fff; }
.contact-modal-right {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  justify-content: center;
}
.contact-modal-company {
  font-size: 2.6rem;
  font-weight: bold;
  color: #666;
  line-height: 1.4;
  margin-bottom: 2rem;
}
.contact-modal-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.7rem;
  color: #333;
  transition: color 0.3s;
  line-height: 1.4;
}
.contact-modal-link .jc-icon { width: 2.2rem; height: 2.2rem; flex: none; }
.contact-modal-link:hover { color: var(--themeColor1); }
/* 圆形关闭按钮（仿原站：白底蓝字圆钮带阴影） */
.contact-modal .modal-close {
  top: 1.2rem;
  right: 1.2rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--themeColor1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  box-shadow: 0 0 4px rgba(204,204,204,1);
  z-index: 5;
}
.contact-modal .modal-close:hover { background: var(--themeColor1); color: #fff; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.section-head, .listBox, .stat-card, .newsBox, .service-card, .industry-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section-head, .listBox, .stat-card, .newsBox, .service-card, .industry-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .proList { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; transform: none; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  html { font-size: 62.5%; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1100;
    overflow-y: auto;
    padding: 8rem 2rem 2rem;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .nav.open { transform: translateX(0); }
  .mainNav { flex-direction: column; gap: 0; }
  .mainNavLiA { color: #333; padding: 1.6rem 0; border-bottom: 1px solid #eee; }
  .mainNavLiA:hover, .mainNavLiA.selected { color: var(--themeColor1); }
  .nav-submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: #f5f6f8;
    min-width: 0;
    padding: 0;
  }
  .header-actions { gap: 0.8rem; }
  .btn-contact { display: none; }
  .lang-dropdown { position: fixed; right: 1.6rem; top: 6rem; }

  .hero-slider { height: 520px; }
  .hero-title { font-size: 3.4rem; white-space: normal; }
  .hero-btns { justify-content: center; }
  .hero-desc { font-size: 1.6rem; }
  .hero-arrow { display: none; }

  .proList { grid-template-columns: repeat(2, 1fr); }
  .about-text { width: 100%; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .stat-num { font-size: 3.4rem; }
  .cert-item { flex: 0 0 calc(50% - 1rem); }
  .app-track { height: 480px; }
  .app-content { left: 8%; bottom: 10%; top: auto; max-width: 80%; }
  .app-slider .container { padding: 0 8%; position: static; }
  .app-content h3 { font-size: 3rem; white-space: normal; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.6rem; transform: none; }
  .newsList { grid-template-columns: 1fr; }
  .footer-contacts { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; }
  .contact-modal { grid-template-columns: 1fr; max-width: 92%; }
  .search-modal { max-width: 92%; }
}

@media (max-width: 600px) {
  .proList { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; margin-top: 1.6rem; transform: none; }
  .cert-item { flex: 0 0 100%; }
}


/* ==========================================================================
   MOBILE ADAPTATION (2026-08-31) 鈥?overrides above
   ========================================================================== */
@media (max-width: 960px) {
  /* ---- 1. fixed white header: hamburger | logo | whatsapp ---- */
  #SITE_HEADER,
  #SITE_HEADER.scrolled {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  .header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.2rem;
    gap: 0;
    min-height: 60px;
  }
  /* center logo absolutely; left hamburger & right whatsapp flow in flex */
  .header-bar .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }
  .logo img { max-height: 44px; filter: none; content: url('../images/logo-1.png'); }
  .nav-toggle { display: flex; order: 0; }
  .nav-toggle span { background: #172A88; }
  .header-bar .nav { flex: 0 0 auto; }
  /* keep actions row: hide all except whatsapp icon */
  .header-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
  .header-actions .search-btn,
  .header-actions .btn-contact,
  .header-actions .lang-switch { display: none; }
  /* mobile: WhatsApp icon and Resources item appear */
  .nav-resources { display: block; }
  .header-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #25D366;
  }
  .header-wa .jc-icon { font-size: 2.6rem; }

  /* slide-out menu */
  .nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1100;
    overflow-y: auto;
    padding: 2.4rem 2rem 4rem;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .nav.open { transform: translateX(0); }
  .mainNav { flex-direction: column; gap: 0; }
  .mainNavLiA {
    color: #333;
    padding: 1.6rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
  }
  .mainNavLiA:hover, .mainNavLiA.selected { color: var(--themeColor1); }
  /* 5. product submenu collapsed by default, expands via JS .expanded */
  .nav-submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: #f5f6f8;
    min-width: 0;
    padding: 0;
    box-shadow: none;
  }
  .has-submenu.expanded .nav-submenu { display: block; }
  .nav-submenuA { padding: 1.2rem 0 1.2rem 1.6rem; color: #555; }
  .has-submenu > .mainNavLiA .jc-icon {
    margin-left: auto;
    transition: transform 0.3s;
  }
  .has-submenu.expanded > .mainNavLiA .jc-icon { transform: rotate(180deg); }

  /* ---- 4. hero ~240px (override desktop min-height too) ---- */
  .hero-slider { height: 240px; min-height: 0; }
  .hero-title { font-size: 2.2rem; white-space: normal; }
  /* products head: keep centered, no button (PC-only feature) */
  .products-head { text-align: center; }
  .products-head .products-head-row { justify-content: center; }
  .products-head .ph-more { display: none; }
  /* application labels: normal flow, no transform pull on mobile */
  .industry-grid { margin-top: 1.6rem; transform: none; }
  .hero-company,
  .hero-desc { display: none; }
  .hero-btns .btn-ghost { display: none; }
  .hero-arrow { display: none; }
  .hero-dots { bottom: 1rem; }

  /* ---- 6. products: 2 per row, full-bleed image, uniform blue button ---- */
  .proList { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .listBox { display: flex; }
  .listBoxHref { flex: 1; display: flex; flex-direction: column; }
  .ImghidCont { padding: 0; }
  .imgHoverAn { border-radius: 0; }
  .listTxt { text-align: left; padding: 1rem 1.2rem 0.6rem; }
  .listTxt .textLineP {
    font-size: 1.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* title area stretches, button pinned to bottom via auto margin, fixed height */
  .listBox .listTxt:last-child {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.4rem;
    margin-top: auto;
    padding: 0;
    background: var(--themeColor1);
  }
  .listBox .listTxt:last-child .textLineP {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
  }

  /* ---- 7. about compact: ~380px, first paragraph 7 lines, one Learn More ---- */
  .about { padding: 3.2rem 0; }
  .about-text { width: 100%; margin-left: 0; }
  .about-company { font-size: 2.2rem; margin-bottom: 1.2rem; }
  .about-text > p:not(.about-company):nth-of-type(n+3) { display: none; }
  .about-text > p:not(.about-company):nth-of-type(2) {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .about-stats { display: none; }
  .btn-about { margin-top: 1.6rem; display: inline-block; }

  /* ---- 8. certificates: 2 per screen, no frame, image fills slot ---- */
  .cert-item {
    flex: 0 0 calc(50% - 1rem);
    padding: 0;
    border: none;
    background: transparent;
  }

  /* ---- 3. application: tabs become carousel grid (2 per row x 3 rows) ---- */
  .app-track { height: 240px; }
  .app-content {
    left: 6%; right: 6%;
    max-width: none;
    top: auto; bottom: 12%;
  }
  .app-content h3 { font-size: 2.4rem; margin-bottom: 0.8rem; }
  .app-content p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .app-content .btn-app { display: none; }
  .app-slider .container { padding: 0 4%; position: static; }
  /* hard clip any horizontal overflow on mobile (protect fixed bars from viewport widening) */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.6rem;
    gap: 1.2rem;
  }
  .industry-item:nth-child(5) { grid-column: 1 / -1; }
  .industry-link { padding: 1.6rem 1.4rem; }
  .industry-icon { width: 36px; height: 36px; margin-bottom: 1rem; }
  .industry-icon img { width: 36px; height: 36px; }
  .industry-item p { font-size: 1.5rem; min-height: 0; }

  /* ---- 9. news: 2 per row, compact text, no button ---- */
  .newsList { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .newsBox:nth-child(n+3) { display: none; }
  .newsImg img { border-radius: 8px; }
  /* date badge sits ON the image bottom-left corner: bottom edge flush with the
     image bottom, left corners rounded 8px to nest into the image's rounded corner.
     position:relative keeps it painted above the image (block bg would paint under). */
  .newsDate {
    position: relative;
    z-index: 2;
    display: block;
    width: max-content;
    box-sizing: border-box;
    height: 2.8rem;
    line-height: 2rem;
    padding: 0 1.2rem;
    margin: -2.8rem 0 1rem 0;
    border-radius: 8px 0 0 8px;
    font-size: 1.2rem;
  }
  /* NOTE: clamped elements must have NO vertical padding 鈥?bottom padding lets the
     next line peek out inside the padding area (the "third line sliver" bug).
     Spacing uses margin instead; max-height = 2 x line-height as hard clip. */
  .newsBox h3 {
    font-size: 1.4rem;
    color: var(--themeColor1);
    line-height: 2.1rem;
    min-height: 0;
    max-height: 4.2rem;
    padding: 0 1.2rem;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .newsDesc {
    font-size: 1.4rem;
    line-height: 2.1rem;
    max-height: 4.2rem;
    min-height: 4.2rem;  /* 保证至少2行 */
    padding: 0 1.2rem;
    margin: 0 0 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .newsMore { display: none; }

  /* ---- 10. service: one per row, CTA is 4th ---- */
  .service-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .service-card {
    min-height: 0;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
  }
  .service-card:nth-child(3n+2) { margin-top: 0; }
  .service-card .service-more { margin-top: auto; align-self: flex-start; }
  .service-card-cta { justify-content: center; }
  .service-card-cta .btn-main { margin: 0 auto; }
  .service-icon { width: 44px; height: 44px; margin-bottom: 1rem; }
  .service-icon .jc-icon { font-size: 2.2rem; }
  .service-card h3 { font-size: 2rem; margin-bottom: 0.8rem; }
  .service-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  .service-more { margin-top: 1rem; font-size: 1.4rem; }
  .service-card-cta .service-cta-text { font-size: 1.8rem; }

  /* ---- 11. footer: only copyright + privacy ---- */
  .footer-top { display: none; }
  .footer-bottom .container {
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
  }

  /* ---- 12. right float: 3 icon buttons, above bottom bar ---- */
  .sideBar { bottom: 64px; }
  .sideBar #backTop { display: none; }

  .contact-modal { grid-template-columns: 1fr; max-width: 92%; }
  .contact-modal-right { display: none; }   /* 移动端弹窗只留表单，隐藏公司标题+联系方式（2026-09-06 用户要求，全站生效） */
  .search-modal { max-width: 92%; }
}

/* 2. mobile bottom bar (fixed) */
.mobile-bottom-bar { display: none; }
@media (max-width: 960px) {
  .mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    display: flex;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
    z-index: 1000;
  }
  .mobile-bottom-bar .mb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    color: #333;
    font-size: 1.2rem;
  }
  .mobile-bottom-bar .mb-btn .jc-icon { font-size: 2.2rem; }
  .mobile-bottom-bar .mb-btn:active { color: var(--themeColor1); }
  body { padding-bottom: 56px; }
}

@media (max-width: 480px) {
  .section-title { font-size: 2.4rem; }
  .section-eyebrow { font-size: 1.4rem; }
  .section-sub { font-size: 1.4rem; }
  .hero-title { font-size: 2.2rem; }
  .footer-bottom p { font-size: 1.3rem; }
  .footer-bottom .privacy-link { font-size: 1.3rem; }
}

/* ---------- Mobile drawer close button (2026-09-01) ---------- */
.nav-close { display: none; }
@media (max-width: 960px) {
  .nav-close {
    display: flex;
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 4.4rem;
    height: 4.4rem;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 5;
    flex-direction: row;
  }
  .nav-close span {
    position: absolute;
    width: 2.6rem;
    height: 0.3rem;
    background: #172A88;
    border-radius: 2px;
  }
  .nav-close span:nth-child(1) { transform: rotate(45deg); }
  .nav-close span:nth-child(2) { transform: rotate(-45deg); }
  .nav-close:active { opacity: 0.6; }

  /* banner: add top clearance so fixed header never covers it */
  .hero-slider { margin-top: 6rem; }
}

/* ---------- Mobile polish round 2 (2026-09-01) ---------- */
@media (max-width: 960px) {
  /* certificate arrows: keep inside viewport, no clipping (slider has overflow:hidden) */
  .cert-prev { left: 0.6rem; }
  .cert-next { right: 0.6rem; }

  /* more breathing room between sections */
  .products,
  .certificates,
  .news,
  .service { padding-top: 5.6rem; padding-bottom: 5.6rem; }
  .application { padding-top: 5.6rem; padding-bottom: 2rem; }
  .about { padding-top: 4.8rem; padding-bottom: 4.8rem; }
  .section-head { margin-bottom: 3.2rem; }
  .hero-slider { margin-bottom: 0; }
}

/* ==========================================================================
   内容页公共布局（2026-09-03 提升自 news/product 详情页）
   说明：banner / 左右分栏 / 侧栏 / 左栏表单 是多个内容页（产品详情、文章详情、
   未来的产品列表、About 等）共用的布局，提升到公共 style.css，single 页面共用。
   产品详情页 product-single.css 中保留的同名副本值一致，不冲突、不影响。
   ========================================================================== */

/* ---------- Page banner（内容页公共横幅：图 + 标题 + 面包屑） ---------- */
.page-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 13rem 0 12rem;
  text-align: center;
  color: var(--themeColor3);
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 50, 113, 0.55);
}
.page-banner-inner { position: relative; z-index: 2; padding: 0 var(--pad); }
.page-banner-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 5rem;
  line-height: 1.7;
  color: var(--themeColor3);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.breadcrumb {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.4rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a { color: rgba(255, 255, 255, 0.92); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--themeColorOrange); }
.breadcrumb span { color: var(--themeColorOrange); }

/* ---------- 编辑器正文排版（全局 reset 抹掉了列表符号，正文容器内恢复） ---------- */
.article-content ul,
.article-content ol,
.table-parent ul,
.table-parent ol {
  margin: 0 0 1.6rem;
  padding-left: 1.6rem;
}
.article-content ul,
.table-parent ul { list-style-type: disc; }
.article-content ol,
.table-parent ol { list-style-type: decimal; }
.article-content ul ul,
.article-content ol ul,
.table-parent ul ul,
.table-parent ol ul { list-style-type: circle; }
.article-content ul ul ul,
.article-content ol ul ul,
.table-parent ul ul ul,
.table-parent ol ul ul { list-style-type: square; }
.article-content ol ol,
.article-content ul ol,
.table-parent ol ol,
.table-parent ul ol { list-style-type: lower-alpha; }
.article-content ol ol ol,
.article-content ul ol ol,
.table-parent ol ol ol,
.table-parent ul ol ol { list-style-type: lower-roman; }
.article-content li,
.table-parent li { margin-bottom: 0.6rem; }

/* ---------- Page layout: sidebar + main ---------- */
.page-wrap {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  /* 注意：横向必须保留 var(--pad)，切忌写成 padding: 4.5rem 0 5rem（覆盖 .container 横向留白） */
  padding: 4.5rem var(--pad) 5rem;
}
.page-sidebar { flex: 0 0 30rem; min-width: 0; }
.page-main { flex: 1 1 auto; min-width: 0; }

/* ---------- Sidebar box（与原站观感一致） ---------- */
.side-box {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(216, 216, 216, 0.6);
  padding: 2.6rem 2.4rem 3rem;
}
.side-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.7;
  color: #000;
  margin: 0 0 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* ---------- Sidebar form（左栏询盘表单，[fluentform id="3"]） ---------- */
.side-form-box { margin-top: 1.8rem; }
.side-form-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.7;
  color: #000;
  margin-bottom: 1rem;
}
.side-form input,
.side-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 1.4rem;
  color: #333;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.3s;
}
.side-form input:focus,
.side-form textarea:focus { border-color: var(--themeColor1); }

/* 内容页公共布局：响应式（与 product-single.css 的移动端规则一致） */
@media (max-width: 1200px) {
  .page-sidebar { flex-basis: 26rem; }
}
@media (max-width: 960px) {
  .page-wrap { flex-direction: column; gap: 3rem; padding: 4.5rem var(--pad) 5rem; }
  .page-sidebar { display: none; }
  .page-main { flex: 1 1 auto; width: 100%; max-width: 100%; }
}
@media (max-width: 560px) {
  .breadcrumb {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.3rem;
    white-space: normal; overflow: visible; line-height: 1.8;
  }
  .page-wrap { padding-bottom: 6rem; }
  .page-banner { padding: 9rem 0 8rem; }
  .page-banner-title { font-size: 4rem; }
}

/* ==========================================================================
   TAKE A TOUR — 车间实景轮播（front-page 板块）
   静态版搬入 + 适配 WP 960px 断点体系；track 由 JS 负 translateX 移动，RTL 下需保持 LTR
   ========================================================================== */
.tour { background: var(--themeColor5); }
.tour .section-head { padding-inline: 12%; }
.tour .section-title { color: #101B4D; }
.tour .section-sub { color: var(--text-muted); }
.tour-slider {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(8, 18, 48, 0.14);
}
.tour-track {
  display: flex;
  transition: transform 0.7s ease;
}
.tour-slide {
  flex: 0 0 100%;
  position: relative;
  min-height: 50rem;
  display: flex;
  align-items: flex-end;
}
.tour-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.tour-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,18,48,0.88) 0%, rgba(8,18,48,0.3) 50%, rgba(8,18,48,0.05) 100%);
}
.tour-slide-cap {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--font-head);
  font-size: 2.6rem;
  padding: 3rem 5%;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.tour-slide-cap span {
  font-size: 1.4rem;
  color: var(--themeColorOrange);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  width: 4.6rem;
  height: 4.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tour-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.tour-arrow:hover { background: var(--themeColor1); border-color: var(--themeColor1); }
.tour-prev { inset-inline-start: 2rem; }
.tour-next { inset-inline-end: 2rem; }
.tour-dots {
  position: absolute;
  bottom: 2rem;
  inset-inline-end: 5%;
  z-index: 5;
  display: flex;
  gap: 0.8rem;
}
.tour-dots button {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.tour-dots button.is-active { background: var(--themeColorOrange); border-color: var(--themeColorOrange); }

/* ==========================================================================
   OUR FACILITIES — 横向图片手风琴（front-page 板块）
   Flexbox + flex-grow 实现，hover 展开，JS 仅切 active 状态
   ========================================================================== */
.facility { background: var(--themeColor5); padding-bottom: 6rem; }
.facility-accordion {
  display: flex;
  gap: 1.2rem;
  width: 100%;
  height: 60rem;
  padding: 0;
}
.facility-item {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  transition: flex 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.facility-item.is-active {
  flex: 4;
}
.facility-item-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.facility-item:hover .facility-item-bg,
.facility-item.is-active .facility-item-bg {
  transform: scale(1.05);
}
.facility-item-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,18,48,0.88) 0%, rgba(8,18,48,0.35) 55%, rgba(8,18,48,0.08) 100%);
}
.facility-item-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2.4rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.facility-item-title {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 2rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facility-item-desc {
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.facility-item-btn {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  background: var(--themeColorOrange);
  color: #101B4D;
}

.facility-item.is-active .facility-item-title {
  font-weight: 700;
}
.facility-item.is-active .facility-item-desc {
  opacity: 1;
  transform: translateY(0);
}
.facility-item.is-active .facility-item-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   CUSTOMERS — 客户 Logo 墙（首页 + About 页共用）
   PC：5 列 × 2 行 = 每页最多 10 个
   Mobile：3 列 × 4 行 = 每页最多 12 个
   ========================================================================== */

.customers {
  background: #fff;
}

.customers-slider {
  position: relative;
}

.customers-viewport {
  width: 100%;
  overflow: hidden;
}

.customers-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}

.customers-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  align-self: flex-start;
  align-content: start;
}

.customers-grid img.cus-logo {
  height: auto;
  object-fit: contain;
}

.customers-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.customers-grid img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.cus-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--themeColor2);
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.2rem;
  text-align: center;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.cus-logo:hover {
  border-color: var(--themeColor1);
  box-shadow: 0 4px 14px rgba(23, 42, 136, 0.12);
}

/* ---------- Customers navigation ---------- */

.customers-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.customers-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 4.4rem;
  height: 4.4rem;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: #fff;
  color: var(--themeColor1);

  box-shadow: 0 4px 14px rgba(8, 18, 48, 0.12);

  cursor: pointer;
  pointer-events: auto;

  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    opacity 0.3s;
}

.customers-arrow .jc-icon {
  width: 2rem;
  height: 2rem;
}

.customers-arrow:hover:not(:disabled) {
  background: var(--themeColor1);
  border-color: var(--themeColor1);
  color: #fff;
}

.customers-arrow:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: none;
}

.customers-prev {
  left: -2.2rem;
}

.customers-next {
  right: -2.2rem;
}

/* ==========================================================================
   三新板块移动端适配 — 仅 max-width:960px 生效（并入 WP 主断点体系），不影响 PC
   ========================================================================== */
@media (max-width: 960px) {
  /* ---------- Take a Tour：图片变横向宽图、标题落到图片下方 ---------- */
  .tour { padding-top: 4.8rem; padding-bottom: 8rem; }
  .tour .section-head { padding-inline: 0; margin-bottom: 3.2rem; }
  .tour-slider {
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }
  .tour-slide {
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  }
  .tour-slide-bg {
    position: relative;
    height: 26rem;
  }
  .tour-slide-bg::after {
    background: linear-gradient(to top, rgba(8,18,48,0.5) 0%, rgba(8,18,48,0.08) 60%, transparent 100%);
  }
  .tour-slide-cap {
    position: relative;
    color: var(--themeColor2);
    font-size: 1.8rem;
    padding: 1.5rem 2rem;
    gap: 1.1rem;
  }
  .tour-slide-cap span {
    color: var(--themeColor1);
    border-color: var(--themeColor1);
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.2rem;
  }
  .tour-arrow {
    top: 12rem;
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
  .tour-dots {
    position: static;
    inset-inline-start: auto;
    inset-inline-end: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    padding: 1.6rem 0 0;
  }
  .tour-dots button {
    border-color: rgba(16, 27, 77, 0.35);
  }
  .tour-dots button.is-active { background: var(--themeColorOrange); border-color: var(--themeColorOrange); }

  /* ---------- Customers：3 列 × 最多 4 行 / 页 ---------- */

.customers {
  padding-top: 3.2rem;
}

.customers .section-head {
  margin-bottom: 2.8rem;
}

.customers-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.cus-logo {
  min-height: 6rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机端箭头放在 Logo 区域下方 */

.customers-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.8rem;
  pointer-events: auto;
}

.customers-arrow {
  position: static;
  transform: none;

  width: 4rem;
  height: 4rem;
}

.customers-prev,
.customers-next {
  left: auto;
  right: auto;
}

  /* ---------- Our Facilities：白底标题区 + 与上方拉开间距 ---------- */
  .facility { background: #fff; padding-top: 3.2rem; padding-bottom: 5rem; }
  .facility .section-head { margin-bottom: 2.8rem; }
  .facility-accordion {
    flex-direction: column;
    height: auto;
    gap: 1.6rem;
    padding: 0 1.6rem;
  }
  .facility-item,
  .facility-item.is-active {
    flex: none;
    height: 26rem;
  }
  .facility-item-desc { white-space: normal; overflow: visible; max-width: 100%; }
  .facility-item-desc,
  .facility-item-btn { max-height: 20rem; opacity: 1; transform: none; margin-bottom: 0.6rem; }
  .facility-item-btn { margin-top: 1rem; }
  .facility-item-title,
  .facility-item.is-active .facility-item-title { font-size: 2rem; white-space: normal; }
}