@charset "UTF-8";

/* ==========================================
   1. 全局与布局基准设置 (核心修复防抖动)
   ========================================== */
:root { 
  --primary: #0284c7; 
  --sky-blue: #38bdf8; 
  --dark: #0f172a; 
  --bg: #f8fafc; 
}

/* 防抖动关键配置：强行为所有页面固定预留垂直滚动条槽位 */
html { 
  overflow-y: scroll; 
  scrollbar-gutter: stable; 
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  background: var(--bg); 
  color: #334155; 
}

/* ==========================================
   2. 顶部 Header 导航栏
   ========================================== */
header { 
  background: var(--dark); 
  color: #fff; 
  padding: 0 4%; 
  min-height: 75px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
  border-bottom: 4px solid var(--sky-blue); /* 天蓝色下边框 */
}

.logo-wrapper { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  flex-shrink: 0; 
  padding: 10px 0; 
}

.logo { 
  font-size: 22px; 
  font-weight: 800; 
  color: var(--sky-blue); 
  text-decoration: none; 
  letter-spacing: -0.5px; 
  line-height: 1.1; 
}

.sub-site-url { 
  font-size: 11px; 
  color: #94a3b8; 
  text-decoration: none; 
  font-weight: 500; 
  margin-top: 3px; 
  transition: color 0.2s ease; 
}

.sub-site-url:hover { 
  color: var(--sky-blue); 
  text-decoration: underline; 
}

.header-right { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
}

.top-contact-info { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  font-size: 13px; 
  border-right: 1px solid #334155; 
  padding-right: 20px; 
}

.top-contact-info a { 
  color: #cbd5e1; 
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  font-weight: 500; 
  transition: color 0.2s; 
}

.top-contact-info a:hover { 
  color: var(--sky-blue); 
}

.top-contact-info i { 
  color: var(--sky-blue); 
}

.nav-menu { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  list-style: none; 
}

.nav-menu a { 
  color: #e2e8f0; 
  text-decoration: none; 
  font-size: 17px; /* 导航大字号 */
  font-weight: 600; 
  transition: all 0.2s; 
}

.nav-menu a:hover, 
.nav-menu a.active { 
  color: var(--sky-blue); 
}

.lang-dropdown { 
  position: relative; 
}

.lang-btn { 
  background: #1e293b; 
  color: #e2e8f0; 
  border: 1px solid #334155; 
  padding: 6px 12px; 
  border-radius: 6px; 
  cursor: pointer; 
  font-size: 13px; 
  font-weight: 600; 
}

.lang-menu { 
  display: none; 
  position: absolute; 
  right: 0; 
  top: 100%; 
  background: #fff; 
  border-radius: 6px; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
  min-width: 120px; 
  overflow: hidden; 
  padding: 5px 0; 
  z-index: 100; 
}

.lang-menu a { 
  color: #334155; 
  padding: 8px 16px; 
  display: block; 
  font-size: 13px; 
  text-decoration: none; 
}

.lang-menu a:hover { 
  background: #f1f5f9; 
  color: var(--primary); 
}

.lang-dropdown:hover .lang-menu { 
  display: block; 
}

/* ==========================================
   3. Banner
   ========================================== */
.hero-banner { 
  width: 100%; 
  height: 320px; 
  background: linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.75)), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1600&auto=format&fit=crop') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

.hero-banner-text h1 { 
  font-size: 36px; 
  font-weight: 800; 
  margin-bottom: 10px; 
  letter-spacing: -0.5px; 
}

.hero-banner-text p { 
  font-size: 15px; 
  color: #cbd5e1; 
  max-width: 700px; 
  margin: 0 auto; 
}

/* ==========================================
   4. 主体版心宽度 (1240px 标准)
   ========================================== */
.main-wrapper { 
  max-width: 1240px; 
  margin: 35px auto; 
  padding: 0 20px; 
  display: flex; 
  gap: 25px; 
  align-items: flex-start;
}

.sidebar-narrow-container {
  width: 185px; 
  flex-shrink: 0; 
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-box { 
  background: #fff; 
  border-radius: 6px; 
  border: 1px solid #e2e8f0; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.03); 
  overflow: hidden;
}

.sidebar-box h3 { 
  background: var(--dark); 
  color: #fff; 
  padding: 10px 12px; 
  font-size: 11.5px; 
  font-weight: 800; 
  letter-spacing: 0.8px; 
  text-transform: uppercase; 
  border-bottom: 2px solid var(--primary);
}

.sidebar-box ul { 
  list-style: none; 
}

.sidebar-box ul li a { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 10px 12px; 
  color: #334155; 
  text-decoration: none; 
  font-size: 12.5px; 
  border-bottom: 1px solid #f1f5f9; 
  font-weight: 600; 
  cursor: pointer;
  transition: all 0.2s; 
}

.sidebar-box ul li a:hover, 
.sidebar-box ul li a.active { 
  background: #f0f9ff; 
  color: var(--primary); 
  padding-left: 15px; 
}

.advantage-item { 
  padding: 10px 12px; 
  border-bottom: 1px solid #f1f5f9; 
}

.advantage-item h4 { 
  font-size: 12px; 
  color: #0284c7; 
  font-weight: 700; 
  margin-bottom: 3px; 
}

.advantage-item p { 
  font-size: 11px; 
  color: #64748b; 
  line-height: 1.4; 
}

.sidebar-contact { 
  padding: 12px; 
  background: #f8fafc; 
  text-align: center; 
}

.sidebar-contact p { 
  font-size: 11px; 
  color: #475569; 
  margin-bottom: 8px; 
  line-height: 1.4; 
}

.sidebar-contact a.btn-quote { 
  display: block; 
  background: var(--primary); 
  color: #fff; 
  text-decoration: none; 
  font-size: 11.5px; 
  font-weight: 700; 
  padding: 7px 0; 
  border-radius: 4px; 
  transition: background 0.2s; 
  margin-bottom: 10px;
}

.sidebar-contact a.btn-quote:hover { 
  background: #0369a1; 
}

.sidebar-social { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  margin-top: 5px; 
}

.sidebar-social a { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 6px; 
  padding: 6px 0; 
  border-radius: 4px; 
  color: #fff; 
  font-size: 11.5px; 
  font-weight: 600; 
  text-decoration: none;
  transition: opacity 0.2s;
}

.sidebar-social a:hover { 
  opacity: 0.9; 
}

.social-facebook { background: #1877f2; }
.social-whatsapp { background: #25d366; }

.content-area { 
  flex: 1; 
  min-width: 0; 
}

.section-header { 
  margin-bottom: 15px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.section-header h2 { 
  font-size: 18px; 
  font-weight: 800; 
  color: var(--dark); 
  border-left: 4px solid var(--primary); 
  padding-left: 10px; 
}

.section-header a.more-link { 
  font-size: 13px; 
  color: var(--primary); 
  text-decoration: none; 
  font-weight: 600; 
}

.section-header a.more-link:hover { 
  text-decoration: underline; 
}

.news-section-box {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.news-vertical-list { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
}

.news-vertical-list li { 
  border-bottom: 1px dashed #e2e8f0; 
  padding: 9px 0; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}

.news-vertical-list li:last-child { 
  border-bottom: none; 
}

.news-vertical-list a { 
  color: #334155; 
  text-decoration: none; 
  font-size: 14px; 
  font-weight: 500; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  padding-right: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-vertical-list a::before { 
  content: "•"; 
  color: var(--sky-blue); 
  font-size: 18px; 
  line-height: 0; 
}

.news-vertical-list a:hover { 
  color: var(--primary); 
}

.news-vertical-list .news-date { 
  font-size: 12px; 
  color: #94a3b8; 
  flex-shrink: 0; 
}

/* ==========================================
   5. 产品列表网格与 1:1 正方形卡片
   ========================================== */
.product-grid-9 { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 18px; 
  transition: opacity 0.2s ease; 
  min-height: 300px; 
}

.product-card { 
  background: #fff; 
  border-radius: 8px; 
  border: 1px solid #e2e8f0; 
  overflow: hidden; 
  text-decoration: none; 
  color: inherit; 
  transition: all 0.3s; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
  display: flex;
  flex-direction: column;
}

.product-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.08); 
}

/* 正方形图片容器 */
.product-card .img-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  background: #f1f5f9;
  overflow: hidden;
}

/* 填满容器并实现居中裁剪 */
.product-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product-card:hover .img-wrapper img {
  transform: scale(1.05);
}

.product-card .info { 
  padding: 12px; 
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-card h4 { 
  font-size: 14px; 
  font-weight: 700; 
  color: var(--dark); 
  margin-bottom: 6px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.product-card .cat { 
  font-size: 11px; 
  color: #0284c7; 
  background: #e0f2fe; 
  padding: 2px 7px; 
  border-radius: 4px; 
  display: inline-block; 
  font-weight: 600; 
  align-self: flex-start;
}

/* --- 产品详情页图片 1:1 正方形 --- */
.detail-box img {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px;
  display: block;
}

/* ==========================================
   6. 页脚 Footer
   ========================================== */
footer { 
  background: var(--dark); 
  color: #94a3b8; 
  padding: 45px 20px 25px 20px; 
  margin-top: 60px; 
  font-size: 14px; 
  border-top: 1px solid #1e293b; 
}

.footer-content {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.footer-social-links { 
  display: flex; 
  justify-content: center; 
  gap: 25px; 
  margin-bottom: 5px; 
}

.footer-social-links a { 
  color: #cbd5e1; 
  font-size: 24px; 
  transition: all 0.2s ease; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #1e293b;
}

.footer-social-links a:hover { 
  color: var(--sky-blue); 
  background: #334155;
  transform: translateY(-3px);
}

.footer-contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 35px;
  font-size: 13.5px;
  color: #cbd5e1;
}

.footer-contact-details .item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-details i {
  color: var(--sky-blue);
  font-size: 15px;
}

.footer-contact-details a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact-details a:hover {
  color: var(--sky-blue);
}

.footer-copyright {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #1e293b;
  width: 100%;
  font-size: 13px;
  color: #64748b;
}

/* ==========================================
   7. 深度重构：全站移动端响应式布局自适应
   ========================================== */

/* 7.1 平板与手机端通用布局约束 (< 992px) */
@media screen and (max-width: 992px) {
  header {
    flex-direction: column;
    padding: 12px 15px;
    height: auto;
    text-align: center;
  }
  .header-right {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
  }
  .top-contact-info {
    border-right: none;
    padding-right: 0;
    justify-content: center;
  }
  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .nav-menu a {
    font-size: 15px;
  }
  
  /* 侧边栏与主内容自动转为单栏上下排列 */
  .main-wrapper {
    flex-direction: column !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sidebar-narrow-container {
    width: 100% !important;
  }
  .content-area, .content-area-full {
    width: 100% !important;
  }
  
  /* 移动端产品网格统一 */
  .product-grid-9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* 7.2 手机端卡片、文字与图片对齐强效对齐规则 (< 600px) */
@media screen and (max-width: 600px) {
  /* Banner 尺寸调小 */
  .hero-banner {
    height: 200px;
  }
  .hero-banner-text h1 {
    font-size: 22px;
  }
  .hero-banner-text p {
    font-size: 13px;
  }

  /* 通用产品网格在手机端固定为单列（或双列，确保宽高统一） */
  .product-grid-9,
  .product-grid,
  .products-list,
  div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 15px !important;
    width: 100% !important;
  }

  /* 强行规范所有产品卡片（包含通用卡片类） */
  .product-card,
  .product-item,
  a.product-card-link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* 图片处理：顶部 100% 宽度充满容器，统一比例防止防撑破 */
  .product-card .img-wrapper,
  .product-card img,
  .product-item img,
  .product-card-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* 文字容器处理：给统一左右内边距，确保与图片上下完全垂直切齐 */
  .product-card .info,
  .product-card-info,
  .product-item > div:not(:first-child) {
    padding: 12px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 解决长标题无限撑高卡片：限制最多展示 2 行并截断显示省略号 */
  .product-card h4,
  .product-card h3,
  .product-item h3,
  .product-card-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: var(--dark) !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
    
    /* 核心多行截断规则 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
  }

  /* 产品分类标签对齐 */
  .product-card .cat {
    margin-top: 4px;
    align-self: flex-start;
  }

  /* 新闻列表手机端防超宽 */
  .news-vertical-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .news-vertical-list a {
    padding-right: 0;
    white-space: normal;
    word-break: break-word;
  }

  /* 页脚在手机端自动居中 */
  .footer-contact-details {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* 避免表格撑破屏幕 */
  table, .spec-grid {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  }
}