@charset "utf-8";
 /* -----------------------内页主图------------------------ */
        .in_banner {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 30%; /* 16:10的宽高比 */
            overflow: hidden;
            border-radius: 0px;
            margin: 0 auto;
        }

        .in_banner_image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .in_banner:hover .in_banner_image {
            transform: scale(1.0);
        }

        .in_banner_text {
            position: absolute;
            top: 50%;
            left: 8%;
            transform: translateY(-50%);
            width: 84%;
            padding: 20px;
            z-index: 10;
        }

        .in_banner_title {
            color: #fff;
            font-size: 4vw; /* 响应式字体大小 */
            font-weight: 500;
            line-height: 1.2;
            text-shadow-: 0 2px 10px rgba(0,0,0,0.5);
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .in_banner_subtitle {
            color: #fff;
            font-size: 1.5vw; /* 响应式字体大小 */
            font-weight: 400;
            text-shadow-: 0 1px 5px rgba(0,0,0,0.5);
            max-width: 80%;
            line-height: 1.4;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {            
            .in_banner_title {
                font-size: 6vw;
            }            
            .in_banner_subtitle {
                font-size: 2vw;
            }
        }
        @media (max-width: 600px) {

            .in_banner {
                padding-bottom: 50%; /* 移动设备上更高的横幅 */
            }
            
            .in_banner_title {
                font-size: 8vw;
            }
            
            .in_banner_subtitle {
                font-size: 2.7vw;
                max-width: 90%;
            }
            
            .in_banner_text {
                left: 5%;
                width: 90%;
            }
        }

        @media (max-width: 400px) {
            .in_banner_title {
                font-size: 9vw;
            }
            
            .in_banner_subtitle {
                font-size: 3vw;
            }
        }

        /* 浏览器兼容性调整 */
        @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
            header, .description, .features, .demo-area, .browser-compatibility {
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
            }
        }
 
  /* -----------------------内页左右------------------------ */
        .about-container {
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.03);
            padding: 20px 0;
        }
        /* ---------- 左侧边栏 ---------- */
        .about-sidebar {
            width: 250px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            margin-right: 25px;
            border-radius: 4px;
            overflow: hidden;
        }
        /* 蓝色标题条：文字居中 */
        .about-sidebar-title {
            background-color: #015bac;
            color: white;
            padding: 14px 10px;
            font-size: 24px;
            font-weight-: bold;
            text-align: center;
            letter-spacing: 0px;
            border-bottom: 0px solid #004094;
        }
        /* 一级导航菜单 */
        .about-sidebar-menu {
            list-style: none;
            margin: 2px 0;
            padding: 0;
        }
        .about-sidebar-menu li {
            padding: 0;               /* 移除内边距，交给链接 */
            border-bottom: 1px solid #eee;
            background-color: #f5f5f5;
            transition: background-color 0.15s;
        }
        /* 菜单链接：整行可点，块级显示 */
        .about-sidebar-menu li a {
            display: block;
            padding: 15px 18px;
            text-decoration: none;
            color: #333;
            font-size: 15px;
            background-color: transparent;
            transition: background-color 0.15s, color 0.15s;
            width: 100%;
            height: 100%;
        }
        /* 鼠标悬停：整行背景蓝色，文字白色 */
        .about-sidebar-menu li a:hover {
            background-color: #015bac;
            color: white;
        }
        /* 当前高亮效果（与悬停状态一致）：
           使用 .active 类在 <li> 或 <a> 上均可，这里放在 <a> 上更稳妥 */
        .about-sidebar-menu li a.active {
            background-color: #015bac;
            color: white;
        }
        /* 保证高亮时鼠标悬停不变（保持蓝底白字） */
        .about-sidebar-menu li a.active:hover {
            background-color: #015bac;
            color: white;
        }

        /* 二维码区域居中 */
        .about-qr-section {
            margin: 20px 0 15px;
            text-align: center;
        }
        .about-qr-code {
            width: 160px;
            height: 160px;
            margin-bottom: 8px;
            border: 1px solid #ccc;
            background: #fff;
            object-fit: cover;
        }
        .about-qr-text {
            font-size: 14px;
            color: #555;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        /* 联系方式区块 (图标+电话垂直居中+水平居中) */
        .about-contact {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 10px 15px 20px 15px;
            padding: 12px 10px;
            background-color: #e9ecef;
            border-radius: 40px;
            border: 1px solid #d0d7de;
        }
        .about-contact-icon {
            font-size: 22px;
            color: #015bac;
            line-height: 1;
        }
        .about-contact-number {
            font-size: 18px;
            color: #015bac;
            font-weight: bold;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* 响应式：移动端隐藏整个左侧边栏 */
        @media (max-width: 768px) {
            .about-sidebar {
                display: none;
            }
            .about-main {
                width: 100%;
                flex: 0 0 100%;
            }
            .about-container {
                padding: 15px;
            }
        }

        /* 主内容区 */
        .about-main {
            flex: 1;
            min-width: 260px;
        }
        .about-breadcrumb {
            margin-bottom: 18px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #bbb;
            font-size: 14px;
            color: #4a4a4a;
        }
        .about-breadcrumb i {
            margin-right: 6px;
            color: #015bac;
        }
        .about-content {
            line-height: 1.85;
            font-size: 15px;
            color: #222;
            background: #fff;
            padding: 5px 5px 15px 5px;
            text-align: justify;
        }

        img.about-qr-code {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        /* 去除最后一个li的下边框（可选） */
        .about-sidebar-menu li:last-child {
            border-bottom: none;
        }
    </styl
/* -----------------------内页产品列表------------------------ */
        .productlist-container {
            width: 100%;
            margin: 0px auto;
            padding: 0 0px;
        }

        /* ---------- 网格系统：PC端2行4列，移动端强制2列 ---------- */
        .productlist-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);  /* PC 默认4列 */
            gap: 22px;
        }

        /* 每一个卡片：同时包裹图片和文字，作为相对定位容器 */
        .productlist-item {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border: 1px solid #dddfe2;
            border-radius: 0px;
            overflow: hidden;        /* 圆角裁剪，但图片放大可溢出？需要结合transform处理，图片容器独立控制 */
            transition: box-shadow 0.25s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
            text-decoration: none;    /* 整个卡片作为链接时使用，但内部需要两个链接分开？需求：每部分都有链接 —— 图片和文字分属不同链接 */
            /* 注意：要求图片和文字都有链接，且可分别点击，因此卡片本身不作为链接，内部放两个a标签 */
        }

        .productlist-item:hover {
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        /* 图片链接区域 —— 保持块状，溢出可见，让放大的图片不被裁剪 */
        .productlist-img-link {
            display: block;
            width: 100%;
            background-color: #fafafa;
            overflow: hidden;        /* 隐藏溢出是为了防止图片放大时撑破边界，但要求“图片变大一点点”且不被裁剪？一般用scale配合隐藏溢出才能平滑。我们让容器overflow:hidden，图片scale放大，视觉上变大但不改变布局。完全符合“图片变大一点点” */
            border-bottom: 1px solid #eee;
            aspect-ratio: 1 / 1;      /* 1:1 尺寸容器，保证图片区域严格1:1 */
        }

        /* 图片本身 */
        .productlist-item-img {
            width: 100%;
            height: 100%;
            object-fit: contain;      /* 保持比例，留白自然，原代码有padding，为了1:1不变形，改用contain背景色 */
            display: block;
            background-color: #ffffff;
            transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1); /* 平滑放大 */
            padding: 12px;            /* 保留一点内边距，避免图片太满，视觉更好 (不影响1:1) */
            box-sizing: border-box;
        }

        /* 鼠标经过图片链接时，图片放大 */
        .productlist-img-link:hover .productlist-item-img {
            transform: scale(1.08);   /* 变大一点点 */
        }

        /* 文字标签区域：作为独立链接，背景灰色，文字深色，相对定位用于动画伪元素 */
        .productlist-item-label {
            display: block;           /* 使链接块状填充 */
            padding: 16px 12px;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: #1e2a3a;
            background-color: #f1f3f6;  /* 原灰 #f5f5f5 微调 */
            border-top: 1px solid #d0d4d9;
            text-decoration: none;
            position: relative;
            isolation: isolate;       /* 创建层叠上下文，避免伪元素覆盖文字 */
            transition: color 0.3s ease;  /* 文字颜色变化过渡 */
            z-index: 1;
            /* 添加溢出隐藏，让伪元素动画局限于标签内，实现“向两边变长”的效果 */
            overflow: hidden;
        }

        /* 伪元素作为蓝色流动背景：初始水平scale为0，中心在中间，灰色背景可见 */
        .productlist-item-label::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #015bac;  /* 明亮蓝色 */
            z-index: -1;                /* 放在文字下方 */
            transform: scaleX(0);         /* 初始宽度为0 */
            transform-origin: center;     /* 从中心向两边变长 */
            transition: transform 0.4s cubic-bezier(0.22, 0.88, 0.36, 1);  /* 平滑伸展 */
        }

        /* 鼠标悬停在文字标签时，文字变白，且伪元素伸展到全宽 */
        .productlist-item-label:hover {
            color: #ffffff;               /* 文字白色 */
        }

        .productlist-item-label:hover::before {
            transform: scaleX(1);          /* 水平方向伸满，从中间向左右扩展 */
        }

        /* ---------- 移动端强制2列 (宽度小于768px时) ---------- */
        @media screen and (max-width: 767px) {
            .productlist-grid {
                grid-template-columns: repeat(2, 1fr);  /* 强制2列 */
                gap: 15px;
            }

            .productlist-item-img {
                padding: 8px;               /* 小屏稍减小边距 */
            }

            .productlist-item-label {
                padding: 14px 8px;
                font-size: 15px;
            }
        }

        /* 针对更小屏 (小于380px) 保持2列，字体微调 */
        @media screen and (max-width: 420px) {
            .productlist-item-label {
                font-size: 14px;
                padding: 12px 5px;
            }
        }

        /* 保留原 fallback flex 需求? 但grid已经完美支持，不冲突。为兼容老旧浏览器增加flex降级，但现代已够 */
        @supports not (display: grid) {
            .productlist-grid {
                display: flex;
                flex-wrap: wrap;
            }
            .productlist-item {
                flex: 1 1 280px;
                margin: 10px;
            }
        }

        /* 图片替代文字（若图片缺失显示alt样式） */
        .productlist-item-img {
            font-size: 14px;
            color: #999;
        }

        /* 交互指引：手指/鼠标 */
        .productlist-img-link, .productlist-item-label {
            cursor: pointer;
        }
	
  /* -----------------------内页新闻列表------------------------ */
  
.news-container {
  width: 100%;
  margin: 0 auto;
    padding: 10px 0  0px 0 ;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 新闻链接整体 */
.news-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

/* 新闻条目 */
.news-item {
  overflow: hidden; /* 清除浮动兼容老浏览器 */
  margin-bottom: 25px;
  padding: 15px;
  border: 1px solid #f0f0f0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.news-link:hover .news-item {
  border-color: #015bac;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 左侧图片区 */
.news-item-img {
  float: left;
  width: 250px;
  margin-right: 30px;
  overflow: hidden;
}
.news-item-img img {
  width: 100%;
  height:180px;
  object-fit: cover;
  display: block; /* 消除图片底部空白 */
  transition: transform 0.3s ease;
}
.news-link:hover .news-item-img img {
  transform: scale(1.05);
}

/* 右侧内容区 */
.news-item-content {
  overflow: hidden; /* 自动填充剩余宽度 */
}
.news-item-title {
  font-size: 20px;
  margin: 0 0 10px 0;
  color: #333;
  font-weight0: bold;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.news-link:hover .news-item-title {
  color: #015bac;
}

.news-item-date {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.news-item-date:before {
  content: "📅";
  margin-right: 5px;
  font-size: 12px;
}

.news-item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}
.news-link:hover .news-item-desc {
  color: #555;
}

.news-item-btn {
  display: inline-block;
  padding: 6px 16px;
  background-color: #015bac;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 3px;
  font-weight-: bold;
  transition: all 0.3s ease;
}
.news-link:hover .news-item-btn {
  background-color: #c62828;
  transform: translateX(5px);
}

/* 响应式适配小屏（兼容老浏览器媒体查询） */
@media screen and (max-width: 768px) {
  .news-item-img {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .news-item-img img {
    height: 200px;
  }
  
  .news-item {
    padding: 12px;
  }
  
  .news-item-title {
    font-size: 16px;
  }
}

/* 响应式适配更小屏幕 */
@media screen and (max-width: 480px) {
  .news-container {
    padding: 0 10px;
  }
  
  .news-item {
    margin-bottom: 20px;
    padding: 10px;
  }
  
  .news-item-img img {
    height: 200px;
  }
  
  .news-item-desc {
    font-size: 13px;
    line-height: 1.5;
  }
  
  .news-item-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}
  
  
  /* -----------------------内页新闻内容------------------------ */

        .newsviews-container {
            margin: 0 auto;
            padding: 20px 0;
            *zoom: 1; /* 兼容IE6/7浮动清除 */
            box-sizing: border-box;
        }
        /* 标题样式 */
        .newsviews-title {
            font-size: 24px;
            color: #333333;
            text-align: center;
            margin: 10px 0 10px;
            font-weight: bold;
        }
        /* 元信息栏：时间+下载链接 */
        .newsviews-meta {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 30px;

        }
        .newsviews-meta .newsviews-date {
            margin-right: 15px;
			padding-bottom: 20px;
        }
        .newsviews-meta .newsviews-download {
            color: #015bac;
			font-size: 22px;
			font-weight:700;
            text-decoration: none;
        }
        .newsviews-meta .newsviews-download:hover {
            text-decoration: underline;
        }
        /* 正文内容区 */
        .newsviews-content {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 40px;
        }
        .newsviews-content p {
            margin-bottom: 15px;
            text-indent: 2em; /* 首行缩进，兼容全浏览器 */
        }
        /* 底部导航 */
        .newsviews-nav {
            border-top: 1px solid #eee;
            padding-top: 15px;
            font-size: 14px;
            color: #666;
        }
        .newsviews-nav p {
            margin: 5px 0;
        }
        /* 小屏幕自适应降级（兼容IE9+） */
        @media screen and (max-width: 768px) {
            .newsviews-title {
                font-size: 20px;
            }
            .newsviews-container {
                padding: 0 10px;
            }
        }