/* ==========================
   全局重置：消除所有默认空白
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 禁止横向滚动条 */
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  background: #f7f9f8;
}

/* 推荐写法 */
.site-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}

/* 推荐：只控制 container 的间距 */
.container {
    width: 100%
    max-width: 1200px;      /* 设两个宽度：既能大屏最大满屏，小屏可以全屏设配 */
    margin: 0 auto;
    padding: 0 20px;        /* logo图片和导航条 距离 屏幕边框的间距。上下0px, 左右间距20px，数值可调整 */
}

.header-row {
  display: flex;
  align-items: center;      /* 垂直居中 */
  /* justify-content: space-between; */
  /* justify-content: center; */
  /* gap: 40px; */
  justify-content: flex-start; /* logo在左 */
  flex-wrap: wrap;         /* 允许换行（手机模式） */
}

/* ==========================
   导航栏 Logo 自适应
========================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  /* background: #fff; */
  position: relative;
  z-index: 999;
}

.navbar_my {
  display: flex;
  gap: clamp(10px, 3vw, 30px);      /* 响应式间距 */
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto; /* 导航自动居中 */
  margin-right: auto;
}

/* 导航条 成员 的 字体配置 */
.navbar_my a {
      display: inline-block;
      /* padding: 10px 10px; */
       /* 适当的点击区域 */
      padding: clamp(4px, 1vw, 8px) 0;
      font-weight: bold;      /* 始终加粗 */
      /* font-size: 18px; */        /* 始终大字 */
      /* 最小12px，理想值4vw（视口宽度的4%），最大18px */
      font-size: clamp(12px, 4vw, 18px);
      line-height: 1.2;        /* 行高为字体的1.2倍 */

      /* line-height: clamp(14px, 5vw, 28px); */  /* 行高同步缩小 */
      color: #333;
      /* background-color: #f0f0f0; */
      text-decoration: none;
      /* transition: all 0.3s; */
      transition: color 0.3s;
      white-space: nowrap;               /* 防止换行 */
    }

     /* 鼠标悬停 - 变蓝 */
    .navbar_my a:hover {
      background-color: #0066cc;
      color: white;
    }
    /* 点击瞬间 - 缩小 */
    .navbar_my a:active {
      transform: scale(0.95);
    }
     /* 当前页面 - 绿色高亮 */
    .navbar_my a.active {
      background-color: #00aa55;
      color: white;
      font-weight: 800;       /* 当前页面更粗 */
    }

.logo-image {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* ==========================
   全屏轮播：绝对无空白
========================== */
/* 全屏轮播图 */
.carousel-section {
  width: 100vw;
  height: 100dvh;  /* dynamic viewport height，动态视口高度 */
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;  /* 防止内容溢出 */
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 图片铺满不变形 */
  display: block;

  transition: transform 0.6s ease 0.1s; /* 0.1s 延迟后再放大，更自然 */
  transform: scale(1); /* 默认不放大 */
  transform-origin: center center; /* 从中心放大 */
}

/* 激活时：图片放大 */
.carousel-item.active img {
  transform: scale(1.05); /* 放大 1.05 倍，轻微不突兀 */
}
/* 轮播文字：垂直居中 + 水平偏右（你要的效果） */
.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1400px;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.6);
  z-index: 10;
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
}

/* ==========================
   页面内容区域（自适应）
========================== */
.section {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 22px;
}

.section h2 {
  font-size: 28px;
  margin-bottom: 24px;
  color: #222;
}

/* ==========================
   卡片网格（自适应布局）
========================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.card {
  /* background: #fff; */  /* #ffffff的简写，白色 */
  background: #f0f0f0; /* 2026/4/14 改为浅灰色 */
  border-radius: 12px;
  padding: 22px;
  border: 1px solid #d8e5df;
  transition: transform 0.2s;
  /* 你原来的样式保留，只加下面这一行 */
  overflow: hidden; /* 👈 禁止任何内容超出卡片 */
}

.card:hover {
  transform: translateY(-4px);
}

.card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222;
}

.card .meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.card p {
  color: #444;
  line-height: 1.6;
}

/* 关于flash的类*/
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.flash.success { background: #e9f8ef; color: #1f7a3f; }
.flash.warning { background: #fff4df; color: #8d6200; }
.flash.danger { background: #ffe9e8; color: #9d2118; }
.flash.info { background: #ebf4ff; color: #184f8f; }


/* ===================== 开始： 分页面 顶部大图的定义 ===================== */
/* 全屏图片容器：不破坏布局，只让图片视觉满屏 */
.banner_subpage {
  position: relative;
  width: 100%;  /* 宽度满屏 */
  height: 60vh; /* 高度 60% */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 图片真正全屏，不影响父容器布局 */
.banner_subpage_img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;      /* 图片全屏 */
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ===================== 分页面 顶部大图的定义 结束！===================== */

/* ==========================
   手机端自适应优化
========================== */
@media (max-width: 768px) {
  .carousel-section {
    height: 60vh;
  }

  .section {
    margin: 24px auto;
    padding: 0 16px;
  }

  .section h2 {
    font-size: 24px;
  }

  .navbar_my {
    white-space: normal;             /* 允许换行 */
    text-align: center;
    /* padding: 10px 16px; */
  }
}

/* ----- Footer 核心样式 26/4/4 增加----- */
        .footer {
            background-color: #0b2b3b;      /* 深蓝绿色背景，稳重专业 */
            color: #e6edf2;
            font-size: 14px;
            line-height: 1.5;
        }

        /* 主区域：logo/简介 + 多列导航 */
        .footer-main {
            max-width: 1280px;
            margin: 0 auto;
            padding: 48px 32px 32px 32px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px; /* 原来40 */
        }

        /* 左侧公司品牌区域 */
        .footer-brand {
            flex: 1;
            min-width: 220px;
        }

        .footer-logo {
            font-size: 1.7rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 18px;
            color: white;
            display: inline-block;
            border-left: 4px solid #3b9eff;
            padding-left: 14px;
        }

        .company-address, .company-phone, .company-email {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 0.85rem;
            color: #cddfe7;
            transition: color 0.2s;
        }

        .company-address:hover, .company-phone:hover, .company-email:hover {
            color: white;
        }

        .footer-brand .icon {
            width: 20px;
            text-align: center;
            font-weight: 400;
            opacity: 0.8;
        }

        /* 链接列公用 */
        .footer-links {
            flex: 1;
            /* 基础最小宽度，保证文字不挤 */
            min-width: 110px; /* 原来140 */
            /* 限制最大宽度，避免在大屏上列太宽 */
             max-width: 180px;
            /* 可选：给文字增加换行容错 */
            word-break: break-word;
        }

        .footer-links h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: white;
            position: relative;
            display: inline-block;
        }

        .footer-links ul {
            list-style: none;
            margin-top: 8px;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #cddfe7;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-block;
            font-size: 0.9rem;
        }

        .footer-links a:hover {
            color: #6bb5ff;
            transform: translateX(3px);
        }

        /* 底部版权栏 */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            max-width: 1280px;
            margin: 0 auto;
            padding: 20px 32px 28px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            font-size: 0.8rem;
            color: #a0becb;
        }

        .copyright {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            row-gap: 6px;
        }

        .legal-links {
            display: flex;
            gap: 24px;
        }

        .legal-links a {
            color: #a0becb;
            text-decoration: none;
            transition: color 0.2s;
            font-size: 0.8rem;
        }

        .legal-links a:hover {
            color: #ffffff;
            text-decoration: underline;
        }

        .icp {
            letter-spacing: 0.5px;
        }

        /* 26/4/4 响应式布局; 添加footer的风格设定，满足各种手机屏*/
        /* 不要替换，而是追加到您的 style.css 文件末尾
        保持您原有的 768px 断点不变
        添加 Footer 的响应式样式（可调整断点以匹配）
        两者互不干扰，共同工作 */
        @media (max-width: 900px) {
            .footer-main {
                flex-wrap: wrap;
                gap: 32px;
                padding: 40px 24px 24px;
            }
            .footer-brand {
                flex-basis: 100%;
            }
            .footer-links {
                flex-basis: calc(33% - 20px);
            }
        }

        @media (max-width: 600px) {
            .footer-main {
                flex-direction: column;
                gap: 28px;
            }
            .footer-links {
                width: 100%;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 12px;
            }
            .legal-links {
                justify-content: center;
            }
        }

        /* 简单模拟图标占位 (实际可替换字体图标或svg) */
        .icon-placeholder {
            display: inline-block;
            width: 20px;
            font-weight: 400;
        }

        /* 保持链接无下划线默认样式 */
        a {
            text-decoration: none;
        }
/* 导航下拉菜单 鼠标悬浮显示 */
.nav_dropdown {
  position: relative;
  display: inline-block;
}

.nav_submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
}

.nav_submenu a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.nav_submenu a:hover {
  background-color: #0066cc;
  color: #fff;
}

/* 鼠标悬浮时显示菜单 */
.nav_dropdown:hover .nav_submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========== 2026/4/11 START 产品展示页面 =========== */
/* ==========================
   产品展示卡片样式（含悬停效果）
========================== */
.product-section {
  padding: 60px 0;
  background: #f5f5f5;
}

.container_for_product {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
}

.section-title {
  font-size: 38px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
  text-align: left;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 产品卡片基础样式 */
.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease; /* 平滑过渡动画 */
  cursor: pointer;
  border-bottom: 3px solid #0056b3;
}

/* 核心：鼠标悬停效果（变深+上浮） */
.product-card:hover {
  transform: translateY(-8px); /* 卡片向上浮动8px，产生晃动/提升感 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 阴影加深，视觉上变深 */
  background: #f8f9fa; /* 背景轻微变深 */
}

/* 产品图片容器 */
.product-img-box {
  position: relative;
  width: 100%;
  height: 280px;
  background: #fff;
  overflow: hidden;
  border-bottom: 3px solid #ed2633;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
}

/* 标签样式（{{ _('全系产品 实物拍摄') }}） */
.tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #0056b3;
  color: #fff;
  padding: 6px 16px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 10;
}

/* 产品图片 */
.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* 悬停时图片轻微放大，增强视觉效果 */
.product-card:hover .product-img-box img {
  transform: scale(1.05);
}

/* 产品名称 */
.product-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  padding: 10px 10px 10px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

/* 按钮区域 */
.product-buttons {
  display: flex;
  padding: 10px;
  gap: 1px;
}

.btn-more, .btn-contact {
  flex: 1;
  padding: 0px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  border-right: 1px solid #eee;
}

.btn-contact {
  border-right: none;
}

/* 按钮悬停效果 */
.btn-more:hover, .btn-contact:hover {
  color: #0056b3;
  background: #f0f7ff;
}

/* ==========================
   移动端适配
========================== */
@media (max-width: 768px) {
  .section-title {
    font-size: 32px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }

  .product-img-box {
    height: 240px;
  }

  .product-name {
    font-size: 20px;
  }
}
/* =========== 2026/4/11 END 产品展示页面 =========== */

/* 子菜单分割线 */
.nav_split {
  height: 1px;
  background: #ccc;
  margin: 5px 20px;
}

 /* =============2026/4/11 START 顶图文字格式 ===================== */

/* 文字正常居中，不变 */
.about-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 10;
  width: 90%;
  max-width: 800px;
}

/* 第一行文字大小（完全不变） */
.about-text h1 {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 16px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 第二行文字大小（完全不变） */
.about-text p {
    font-size: 32px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* =============2026/4/11 END 顶图文字格式 ===================== */

/* =============2026/4/11 END 产品服务-点击子项目-定位到界面的对应位置 ===================== */

/* 建议给所有的内容容器加一个统一的类名，比如 class="content-wrapper" */
.content-wrapper img {
    /* 核心规则：最大宽度等于父容器宽度 */
    max-width: 100%;
    /* 高度自动自适应，保持比例 */
    height: auto;
    /* 可选：给图片加点底部外边距，文字不要贴太近 */
    display: block; /* 转为块级元素，底部留白更自然 */
    margin: 20px auto;
}

/* 2026/4/14 点击小图后可以放大 */
/* 小图样式 */
.zoom-img {
  /* width: 200px; */      /* 小图宽度 */
  height: auto;
  cursor: pointer;
  transition: 0.2s;
}
.zoom-img:hover {
  opacity: 0.9;
}

/* 遮罩全屏层 */
.img-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* 放大后的图 */
.modal-img {
  max-width: 90%;
  max-height: 90%;
  border: 2px solid #fff;
}

/* 让标题里的链接继承 h4 的大小，不会变小. footer链接用到2026/4/14 */
h4 a {
  font-size: inherit !important;
  color: #333;
  text-decoration: none;
}
h4 a:hover {
  color: #0047ab; /* 鼠标悬浮变色 */
  text-decoration: underline;
}

.card-img {
  width: 100%;
  height: auto;    /* 👈 必须改成 auto，不能 100% */
  max-height: 300px; /* 👈 限制最大高度，防止太高 */
  object-fit: cover;
  display: block;
  margin-top: 32px; /* 图片和文字之间留一点间距 */
  border-radius: 6px;
}


/* .card-img { */
/*  max-width: 100%; */ /* 宽度不超过容器 */
/*  max-height: 260px; */ /* 高度不超过限制 */
/*  width: auto; */  /* 禁止强制宽度 */
/*  height: auto;*/ /* 禁止强制高度 */
/*  display: block;*/ /* 消除图片下方默认间隙 */
/*  object-fit: contain; */ /* 完整显示图片，保持比例，空白区域留白 */
/* } */