@charset "utf-8";

/* ============================================================
   JCAFM-W 白色标准型滤料 产品页样式
   ============================================================ */

/* ================= 页面局部变量（仅本页专属色） ================= */
:root {
  --jw-primary-light: #e8f3fa;   /* 浅蓝底（标签、徽标底色） */
  --jw-border: #e4e9ef;          /* 卡片描边 */
  --jw-text-3: #7b8794;          /* 辅助说明文字 */
  --jw-teal: #1287a8;            /* Hero 渐变端点色（主蓝→青的过渡色） */
}

/* ================= 页面骨架 ================= */
.jw-page {
  color: var(--text-dark);
  line-height: 1.75;
  background: var(--bg-light-gray);
}
.jw-sec { padding: 2.75rem 0; background: var(--bg-light-gray); }
.jw-sec--white { background: #fff; }

/* 模块标题：英文眉题 + 中文标题 + 描述 */
.jw-sec-head { text-align: center; margin-bottom: 1.875rem; }
.jw-sec-head .en {
  font-size: 0.75rem;
  letter-spacing: 0.1875rem;
  color: var(--primary-green);
  text-transform: uppercase;
  font-weight: 600;
}
.jw-sec-head h2 { font-size: 1.5625rem; margin-top: 0.375rem; }
.jw-sec-head .desc { color: var(--text-gray); font-size: 0.875rem; margin-top: 0.5rem; }

/* ================= Hero 横幅（居中排版 + 大指标卡） ================= */
.jw-hero {
  background: linear-gradient(135deg, var(--primary-blue-deep) 0%, var(--primary-blue) 55%, var(--jw-teal) 100%);
  color: #fff;
  padding: 3.75rem 0 3.5rem;
  text-align: center;
}
.jw-hero .jw-tag {
  display: inline-block;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.8125rem;
  letter-spacing: 0.0625rem;
  margin-bottom: 1rem;
}
.jw-hero h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: 0.0625rem; }
.jw-hero .jw-sub { font-size: 1.0625rem; opacity: .92; margin-top: 0.5rem; }
.jw-hero .jw-slogan {
  margin: 1.125rem auto 0;
  font-size: 0.9375rem;
  opacity: .85;
  max-width: 45rem;
}
.jw-hero-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.25rem; }
.jw-stat {
  flex: 1;
  min-width: 11.25rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 0.875rem;
  padding: 1.375rem 1.5rem;
}
.jw-stat .num { font-size: 2.125rem; font-weight: 700; }
.jw-stat .label { font-size: 0.875rem; opacity: .85; margin-top: 0.375rem; }

/* ================= 产品简介 ================= */
.jw-intro p { color: var(--text-gray); font-size: 0.9375rem; margin-bottom: 0.875rem; }
.jw-intro strong { color: var(--text-dark); }

/* ---- 产品图廊（通栏） ---- */
.jw-gallery {
  width: 100vw;
  margin: 1.875rem 0;
  margin-left: calc(50% - 50vw);   /* 破出 container 限制，撑满视口 */
  margin-right: calc(50% - 50vw);
}
.jw-gallery-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 桌面一行 6 张 */
  gap: 0.75rem;
}
.jw-gallery-item {
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.jw-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: var(--transition-base);
}
.jw-gallery-item:hover img { transform: scale(1.06); }
.jw-gallery-item { cursor: zoom-in; }  /* 可点击查看大图 */

/* ---- 图片灯箱（点击看大图） ---- */
.jw-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.jw-lightbox.open { display: flex; }

/* 大图（优先 data-large 高清图，无则用缩略图原图） */
.jw-lightbox-img {
  max-width: 86%;
  max-height: 82%;
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 3rem rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

/* 关闭按钮 */
.jw-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.75rem;
  text-align: center;
  font-size: 1.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-base);
}
.jw-lightbox-close:hover { background: rgba(255, 255, 255, 0.35); }

@media (max-width: 768px) {
  .jw-lightbox-img { max-width: 92%; max-height: 78%; }
  .jw-lightbox-close { top: 0.75rem; right: 0.75rem; }
}

@media (max-width: 992px) {
  .jw-gallery-inner { grid-template-columns: repeat(3, 1fr); }  /* 平板 3 列 */
}
@media (max-width: 768px) {
  .jw-gallery-inner { grid-template-columns: repeat(2, 1fr); padding: 0 1rem; }  /* 手机 2 列 */
}

.jw-feature-list { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.jw-feature-list li {
  background: var(--jw-primary-light);
  border-left: 0.1875rem solid var(--primary-blue);
  border-radius: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.90625rem;
  color: var(--text-gray);
}


/* ================= 通用卡片网格 ================= */
.jw-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1.125rem; }
.jw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.jw-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.125rem; }

/* 六大核心优势 */
.jw-adv-card {
  background: #fff;
  border: 1px solid var(--jw-border);
  border-radius: 0.75rem;
  padding: 1.375rem;
  transition: box-shadow 0.2s ease;
}
.jw-adv-card:hover { box-shadow: 0 0.375rem 1.5rem rgba(22, 107, 179, .10); }
.jw-adv-card .jw-icon { font-size: 1.75rem; }
.jw-adv-card h3 { font-size: 1.0625rem; margin: 0.625rem 0 0.5rem; color: var(--primary-blue-deep); }
.jw-adv-card p { font-size: 0.875rem; color: var(--text-gray); }

/* ================= 规格表 / 选型表 ================= */
.jw-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--jw-border);
  border-radius: 0.75rem;
}
.jw-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 34rem; }
.jw-table-wrap thead { background: var(--primary-blue); color: #fff; }
.jw-table-wrap th { padding: 0.75rem 0.875rem; text-align: left; font-weight: 600; white-space: nowrap; }
.jw-table-wrap td {
  padding: 0.75rem 0.875rem;
  border-top: 1px solid var(--jw-border);
  color: var(--text-gray);
  vertical-align: top;
}
.jw-table-wrap tbody tr:nth-child(even) { background: #fafcfe; }
.jw-table-wrap td.jw-model { font-weight: 700; color: var(--primary-blue); white-space: nowrap; }

.jw-table-note { font-size: 0.78125rem; color: var(--jw-text-3); margin-top: 0.625rem; }

/* ================= 技术特性（一行 2 个） ================= */
.jw-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
.jw-tech-card {
  background: #fff;
  border: 1px solid var(--jw-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
}
.jw-tech-num {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.625rem;
  background: var(--jw-primary-light);
  color: var(--primary-blue);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jw-tech-card h3 { font-size: 1.0625rem; color: var(--primary-blue-deep); margin-bottom: 0.375rem; }
.jw-tech-card p { font-size: 0.875rem; color: var(--text-gray); }
.jw-tech-card ul { margin-top: 0.625rem; }
.jw-tech-card li {
  font-size: 0.84375rem;
  color: var(--text-gray);
  padding-left: 1.125rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.jw-tech-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-green);
  font-weight: 700;
}

/* ================= 应用场景 ================= */
.jw-app-card {
  background: #fff;
  border: 1px solid var(--jw-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.jw-app-card .jw-icon { font-size: 1.875rem; }
.jw-app-card h3 { font-size: 1.125rem; margin: 0.625rem 0 0.5rem; color: var(--primary-blue-deep); }
.jw-app-card p { font-size: 0.875rem; color: var(--text-gray); }
.jw-app-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.jw-app-tags span {
  background: var(--jw-primary-light);
  color: var(--primary-blue-deep);
  font-size: 0.78125rem;
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
  font-weight: 600;
}

/* ================= 包装与供货 / 服务承诺 ================= */
.jw-pack-card,
.jw-svc-card {
  background: #fff;
  border: 1px solid var(--jw-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}
.jw-pack-card .jw-icon,
.jw-svc-card .jw-icon { font-size: 1.875rem; }
.jw-pack-card h3,
.jw-svc-card h3 { font-size: 1rem; margin: 0.625rem 0 0.375rem; color: var(--primary-blue-deep); }
.jw-pack-card .jw-big { font-size: 1.25rem; font-weight: 700; color: var(--primary-green); }
.jw-pack-card p,
.jw-svc-card p { font-size: 0.84375rem; color: var(--text-gray); margin-top: 0.375rem; }

/* ================= 获取报价 CTA ================= */
.jw-cta {
  background: linear-gradient(135deg, var(--primary-blue-deep), var(--jw-teal));
  color: #fff;
  text-align: center;
  padding: 3rem 1.25rem;
  border-radius: 0.875rem;
}
.jw-cta h2 { font-size: 1.5rem; margin-bottom: 0.625rem; }
.jw-cta p { opacity: .9; font-size: 0.9375rem; }
.jw-cta-btn {
  display: inline-block;
  margin-top: 1.25rem;
  background: #fff;
  color: var(--primary-blue-deep);
  font-size: 1.0625rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.75rem 2.125rem;
  transition: var(--transition-base);
}
.jw-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .15);
}

/* ================= 响应式 ================= */
@media (max-width: 992px) {
  .jw-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .jw-tech-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .jw-hero h1 { font-size: 1.625rem; }
  .jw-tech-card { flex-direction: column; gap: 0.75rem; }
  .jw-grid-3 { grid-template-columns: 1fr; }
  .jw-feature-list { grid-template-columns: 1fr; }
  .jw-stat { padding: 1.125rem 1rem; }
  .jw-stat .num { font-size: 1.75rem; }
}