@charset "utf-8";
/* 基础样式 */
/* 全局重置样式 */
* {
    margin: 0;          /* 清除所有元素的外边距 */
    padding: 0;         /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 盒模型计算方式：包含border和padding */
}

/* 基础页面样式 */
body {
    font-family: '微软雅黑', sans-serif; /* 首选微软雅黑，次选无衬线字体 */
    line-height: 1.6;   /* 行高1.6倍 */
    color: #333;        /* 主文字颜色 */
    background-color: #f9f9f9; /* 浅灰色背景 */
}

/* 主容器样式 */
.container {
    width: 100%;       /* 宽度100% */
    max-width: 1200px; /* 最大宽度限制 */
    margin: 0 auto;    /* 水平居中 */
    padding: 0 15px;   /* 左右内边距 */
}

/* 链接基础样式 */
a {
    text-decoration: none; /* 去除下划线 */
    color: inherit;        /* 继承父元素颜色 */
}

/* 列表样式重置 */
ul {
    list-style: none;  /* 去除默认列表样式 */
}

/* 按钮基础样式 */
.btn {
    display: inline-block; /* 行内块显示 */
    padding: 10px 20px;   /* 内边距 */
    background-color: #1e88e5; /* 蓝色背景 */
    color: white;         /* 白色文字 */
    border-radius: 4px;   /* 圆角 */
    transition: all 0.3s ease; /* 过渡动画 */
    border: none;         /* 无边框 */
    cursor: pointer;      /* 手型指针 */
}

/* 按钮悬停状态 */
.btn:hover {
    background-color: #1565c0; /* 深蓝色 */
}

/* 大号按钮 */
.btn-large {
    padding: 12px 30px;  /* 更大的内边距 */
    font-size: 1.1em;    /* 更大的字体 */
}

/* 文字居中类 */
.text-center {
    text-align: center;  /* 文字居中 */
}

/* 区块标题样式 */
.section-title {
    text-align: center;  /* 文字居中 */
    margin-bottom: 30px; /* 底部外边距 */
    font-size: 2em;      /* 大号字体 */
    color: #1e88e5;      /* 蓝色文字 */
    position: relative;  /* 相对定位(用于伪元素) */
    padding-bottom: 15px; /* 底部内边距 */
}

/* 标题下划线效果 */
.section-title::after {
    content: '';         /* 伪元素内容 */
    position: absolute;  /* 绝对定位 */
    bottom: 0;           /* 底部对齐 */
    left: 50%;           /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 80px;         /* 宽度 */
    height: 3px;         /* 高度 */
    background-color: #1e88e5; /* 蓝色 */
}

/* 蓝色主题头部样式 */
.blue-header {
    background-color: #1e88e5; /* 蓝色背景 */
    color: white;         /* 白色文字 */
    padding: 15px 0;      /* 上下内边距 */
    position: fixed;      /* 固定定位 */
    width: 100%;         /* 全宽 */
    top: 0;              /* 顶部对齐 */
    z-index: 1000;       /* 高堆叠顺序 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 头部容器布局 */
.blue-header .container {
    display: flex;       /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

/* Logo文字样式 */
.logo span {
    font-size: 1.8em;    /* 大号字体 */
    font-weight: bold;   /* 加粗 */
}












/* 幻灯片样式 */
/* ++++++++++++++++++++++++++++++++++轮播图容器样式++++++++++++++++++++++++++++++++++++++++++++++ */
.slider {
    position: relative;    /* 相对定位(作为子元素的定位基准) */
    height: 500px;        /* 固定高度 */
    overflow: hidden;     /* 隐藏溢出内容 */
    margin-top: 70px;     /* 顶部外边距 */
}

/* 单个轮播项基础样式 */
.slide {
    position: absolute;   /* 绝对定位(重叠布局) */
    top: 0;               /* 顶部对齐 */
    left: 0;              /* 左侧对齐 */
    width: 100%;          /* 宽度100% */
    height: 100%;         /* 高度100% */
    opacity: 0;           /* 默认透明(隐藏) */
    transition: opacity 1s ease;  /* 透明度过渡动画 */
}

/* 当前活动轮播项 */
.slide.active {
    opacity: 1;           /* 完全不透明(显示) */
}

/* 轮播图片样式 */
.slide img {
    width: 100%;          /* 宽度100% */
    height: 100%;         /* 高度100% */
    object-fit: cover;    /* 保持比例填充容器 */
}

/* 轮播内容区域(文字) */
.slide-content {
    position: absolute;   /* 绝对定位 */
    top: 50%;             /* 垂直居中定位 */
    left: 50%;            /* 水平居中定位 */
    transform: translate(-50%, -50%);  /* 精确居中 */
    text-align: center;   /* 文字居中 */
    color: white;         /* 白色文字 */
    background-color: rgba(30, 136, 229, 0.7);  /* 半透明蓝色背景 */
    padding: 30px;        /* 内边距 */
    border-radius: 5px;   /* 圆角 */
    max-width: 80%;       /* 最大宽度限制 */
}

/* 轮播标题样式 */
.slide-content h2 {
    font-size: 2.5em;     /* 大号字体 */
    margin-bottom: 15px;  /* 底部间距 */
}

/* 轮播描述文字 */
.slide-content p {
    font-size: 1.2em;     /* 稍大字体 */
}

/* 轮播控制按钮容器 */
.slider-controls {
    position: absolute;   /* 绝对定位 */
    top: 50%;             /* 垂直居中 */
    width: 100%;          /* 全宽 */
    display: flex;        /* 弹性布局 */
    justify-content: space-between;  /* 两端对齐 */
    transform: translateY(-50%);  /* 精确垂直居中 */
    padding: 0 20px;      /* 左右内边距 */
}

/* 单个控制按钮样式 */
.slider-controls span {
    color: white;         /* 白色图标 */
    font-size: 2em;       /* 大号字体 */
    cursor: pointer;      /* 手型指针 */
    background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑色背景 */
    width: 50px;          /* 固定宽度 */
    height: 50px;         /* 固定高度 */
    display: flex;        /* 弹性布局(居中图标) */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    border-radius: 50%;   /* 圆形按钮 */
    transition: all 0.3s ease;  /* 过渡动画 */
}

/* 按钮悬停效果 */
.slider-controls span:hover {
    background-color: rgba(0, 0, 0, 0.8);  /* 加深背景色 */
}

/* 轮播指示点容器 */
.slider-dots {
    position: absolute;   /* 绝对定位 */
    bottom: 20px;         /* 底部距离 */
    left: 50%;            /* 水平居中 */
    transform: translateX(-50%);  /* 精确居中 */
    display: flex;        /* 弹性布局 */
}

/* 单个指示点样式 */
.dot {
    width: 12px;          /* 宽度 */
    height: 12px;         /* 高度 */
    border-radius: 50%;   /* 圆形 */
    background-color: rgba(255, 255, 255, 0.5);  /* 半透明白色 */
    margin: 0 5px;        /* 左右间距 */
    cursor: pointer;      /* 手型指针 */
    transition: all 0.3s ease;  /* 过渡动画 */
}

/* 当前活动指示点 */
.dot.active {
    background-color: white;  /* 纯白色 */
}

/* ++++++++++++++++++++++++++++++++++轮播图容器样式END++++++++++++++++++++++++++++++++++++++++++++++ */
























/* +++++++++++++++++++++++++++首页关于我们部分+++++++++++++++++++++++++++++++++++++++ */
/* 关于我们内容布局 */
/* 关于我们版块整体样式 */
.about-section {
  padding: 80px 0; /* 上下内边距 */
  background-color: #f9f9f9; /* 浅灰色背景 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 字体设置 */
  color: #555; /* 文字颜色 */
}

/* 图文内容容器 */
.about-content {
  display: flex; /* 弹性布局 */
  flex-wrap: wrap; /* 允许换行 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 60px; /* 底部外边距 */
  gap: 40px; /* 子元素间距 */
}

/* 图片容器样式 */
.about-image {
  flex: 1; /* 弹性扩展 */
  /*min-width: 300px;*/ /* 最小宽度 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出部分 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 图片样式 */
.about-image img {
  width: 100%; /* 宽度100% */
  height: 300px; /* 高度自适应 */
  display: block; /* 块级显示 */
  transition: transform 0.5s ease; /* 缩放动画 */
}

/* 图片悬停效果 */
.about-image:hover img {
  transform: scale(1.05); /* 放大效果 */
}

/* 文字内容区域 */
.about-text {
  flex: 1; /* 弹性扩展 */
  min-width: 300px; /* 最小宽度 */
}

/* 段落样式 */
.about-text p {
  margin-bottom: 20px; /* 段落间距 */
  line-height: 1.8; /* 行高 */
  font-size: 16px; /* 字体大小 */
}

/* 特色功能区域 */
.features {
  display: flex; /* 弹性布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-around; /* 子元素均匀分布 */
  gap: 30px; /* 子元素间距 */
  margin-top: 40px; /* 顶部外边距 */
}

/* 单个特色功能卡片 */
.feature {
  flex: 1; /* 弹性扩展 */
  min-width: 250px; /* 最小宽度 */
  background: white; /* 白色背景 */
  padding: 30px 20px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  text-align: center; /* 文字居中 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 阴影效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 悬停动画 */
}

/* 卡片悬停效果 */
.feature:hover {
  transform: translateY(-10px); /* 上移效果 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 阴影增强 */
}

/* 功能图标样式 */
.feature-icon {
  font-size: 40px; /* 图标大小 */
  margin-bottom: 20px; /* 底部外边距 */
  color: #3498db; /* 图标颜色 */
}

/* 功能标题 */
.feature h3 {
  font-size: 32px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  margin-bottom: 10px; /* 底部外边距 */
}

/* 功能描述文字 */
.feature p {
  font-size: 16px; /* 字体大小 */
  color: #666; /* 文字颜色 */
  line-height: 1.6; /* 行高 */
}

/* 响应式设计 - 中等屏幕 (992px及以下) */
@media (max-width: 992px) {
    .about-content {
        flex-direction: column; /* 垂直排列 */
    }
    
    .about-image {
        flex: 0 0 auto; /* 取消弹性扩展 */
        width: 80%; /* 宽度80% */
        transform: none; /* 重置变换 */
        margin-bottom: 30px; /* 底部外边距 */
    }
    
    .about-image:hover {
        transform: translateY(-5px); /* 悬停上移效果 */
    }
}

/* 响应式设计 - 小屏幕 (576px及以下) */
@media (max-width: 576px) {
    .about-image {
        width: 100%; /* 宽度100% */
    }
    
    .about-text p {
        text-indent: 1.5em; /* 首行缩进 */
        font-size: 15px; /* 字体缩小 */
    }
}

/* 响应式设计 - 功能卡片 (768px及以下) */
@media (max-width: 768px) {
    .feature {
        min-width: 100%; /* 宽度100% */
        margin-bottom: 20px; /* 底部外边距 */
    }
    
    .feature:hover {
        transform: translateY(-5px); /* 悬停上移效果 */
    }
}

/* +++++++++++++++++++++++++++首页关于我们部分+++++++++++++++++++++++++++++++++++++++ */







/* 产品部分 */
/* 最新产品区域样式 */
.latest-products {
    padding: 80px 0; /* 上下内边距 */
    background-color: #f5f9ff; /* 浅蓝色背景 */
}

/* 产品网格布局 */
.product-grid {
    display: grid; /* 使用CSS网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 响应式列 - 最小300px，等宽 */
    gap: 30px; /* 网格项之间的间距 */
    margin-bottom: 40px; /* 底部外边距 */
}

/* 单个产品卡片样式 */
.product-card {
    background-color: white; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden; /* 确保内容不超出圆角范围 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 微妙的阴影效果 */
    transition: all 0.3s ease; /* 悬停效果的平滑过渡 */
}

/* 产品卡片悬停效果 */
.product-card:hover {
    transform: translateY(-5px); /* 轻微上移效果 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* 悬停时增强阴影 */
}

/* 产品图片样式 */
.product-card img {
	
	display: block; 
	margin: 0 auto; 
	width: 300px;

}

/* 产品标题样式 */
.product-card h3 {
    padding: 15px 20px 0; /* 内边距：上 左右 下 */
    color:#666; /* 蓝色标题 */
	text-align:center;
}

/* 产品描述样式 */
.product-card p {
    padding: 10px 20px; /* 内边距：上下 左右 */
    color: #666; /* 深灰色文字 */
}

/* 按钮样式 */
.product-card .btn {
    margin: 15px 20px 20px; /* 外边距：上 左右 下 */
}


/* 图片右上角显示寸数 */
.brand-badge {
	position: absolute;       /* 绝对定位，相对于最近的定位父元素 */
	top: 10px;               /* 距离顶部10像素 */
	right: 10px;             /* 距离右侧10像素 */
	background-color: #3498db; /* 背景颜色为蓝色 */
	color: white;            /* 文字颜色为白色 */
	padding: 5px 10px;       /* 内边距：上下5px，左右10px */
	border-radius: 4px;      /* 圆角半径为4像素 */
	font-size: 15px;         /* 字体大小15像素 */
	font-weight: bold;       /* 字体加粗 */
	letter-spacing: 1px;     /* 字母间距1像素 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果：x偏移0，y偏移2px，模糊4px，透明度20%的黑色 */
	z-index: 10;            /* 堆叠顺序为10，确保显示在最上层 */
}



/* 页眉样式 */
.page-header {
    /* 尺寸设置 */
    height: 250px; /* 固定为图片原始高度 */
    padding: 0;
    margin-top: 70px;
    
    /* 背景图片设置 */
   /* background-image: url(../images/page-header1.jpg);
    background-repeat: no-repeat;*/
    background-color: #0d47a1; /* 备用背景色 */
    
    /* 智能布局方案 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    
    /* 关键背景显示策略 */
    background-size: 100% 100%; /* 强制拉伸填充 */
    background-position: center;
}

/* 内容容器 */
.page-header .container {
    width: 100%;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}


.header-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    position: absolute;
}

/* 响应式调整 */
@media (max-width: 1920px) {
    .page-header {
        background-size: cover; /* 小于1920px时切换为cover模式 */
        background-position: center top;
    }
}

@media (max-width: 768px) {
    .page-header {
        height: 180px; /* 移动端适当降低高度 */
        background-position: 60% center;
    }
}
.page-header h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
}














/* 产品分类筛选 */
/* 分类筛选器容器样式 */
.category-filter {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* 分类筛选按钮基础样式 */
.category-filter button {
    padding: 8px 20px;
    margin: 5px;
    font-size: 1.0em;
    color:#000;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                inset 0 1px 1px rgba(255, 255, 255, 0.8), 
                inset 0 -1px 1px rgba(0, 0, 0, 0.1); /* 多重阴影创造立体感 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); /* 文字阴影 */
    position: relative; /* 为active状态的动画效果做准备 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 轻微边框 */
}

/* 分类筛选按钮悬停状态 */
.category-filter button:hover {
    background: linear-gradient(to bottom, #d0e4f7, #a5cff1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                inset 0 1px 1px rgba(255, 255, 255, 0.9), 
                inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px); /* 轻微上移效果 */
}

/* 分类筛选按钮激活状态（选中状态） */
.category-filter button.active {
    background: linear-gradient(to bottom, #d0e4f7, #a5cff1);
    color:#000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 
                inset 0 1px 2px rgba(0, 0, 0, 0.2), 
                inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(1px); /* 按下效果 */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); /* 反转文字阴影 */
    border-color: rgba(0, 0, 0, 0.2);
}

/* 添加点击时的动画效果 */
.category-filter button:active {
    transition: all 0.1s ease;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .category-filter {
		 margin-top: 50px;
        justify-content: space-between; /* 在小屏幕上分散对齐 */
        padding: 0 5px; /* 减少内边距 */
    }
    
    .category-filter button {
        flex-grow: 1; /* 允许按钮扩展填满空间 */
        min-width: calc(33% - 10px); /* 每行显示约3个按钮 */
        max-width: calc(50% - 10px); /* 最小情况下每行2个按钮 */
        margin: 5px;
        padding: 8px 10px; /* 调整内边距 */
        font-size: 0.85em; /* 减小字体大小 */
    }
}

/* 更小的手机屏幕适配 */
@media (max-width: 480px) {
    .category-filter button {
        min-width: calc(50% - 10px); /* 每行显示2个按钮 */
        max-width: 100%; /* 允许单个按钮占满整行 */
    }
}














/* +++++++++++++++++++++++++++++++++++++++++++++++页脚样式+++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 蓝色页脚样式 */
.blue-footer {
    margin-top: 30px;       /* 顶部外边距 */
    background-color: #16243e;  /* 深蓝色背景#16243e */
    color: white;          /* 白色文字 */
    padding: 60px 0 20px;  /* 内边距：上60px 左右0 下20px */
}

/* 页脚内容容器 */
.footer-content {
    display: flex;         /* 弹性布局 */
    flex-wrap: wrap;       /* 允许换行 */
    margin-bottom: 40px;   /* 底部外边距 */
}

/* 页脚栏目样式 */
.footer-section {
    flex: 1;              /* 弹性扩展 */
    min-width: 250px;     /* 最小宽度 */
    padding: 0 20px;      /* 左右内边距 */
    margin-bottom: 30px;  /* 底部外边距 */
}

/* 栏目标题样式 */
.footer-section h3 {
    margin-bottom: 20px;  /* 标题下边距 */
    font-size: 1.3em;     /* 字体大小 */
}

/* 栏目列表项样式 */
.footer-section ul li {
    margin-bottom: 10px;  /* 列表项间距 */
}

/* 链接悬停效果 */
.footer-section ul li a:hover {
    text-decoration: underline;  /* 下划线效果 */
}

/* 版权信息区域 */
.copyright {
    text-align: center;   /* 文字居中 */
    padding-top: 20px;    /* 顶部内边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);  /* 半透明上边框 */
}


/* +++++++++++++++++++++++++++++++++++++++++++++++页脚样式END+++++++++++++++++++++++++++++++++++++++++++++++++++ */

































/*++++++++++++++++++++++++++++++++++ 首页新闻分栏样式++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.news-section {
  padding: 30px 0;  /* 上下60px内边距，左右无内边距 */
  background-color: #f8f9fa;  /* 浅灰色背景 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* 优先使用Segoe UI字体 */
}

/* 容器样式 - 限制内容宽度并居中 */
.container {
  max-width: 1200px;  /* 最大宽度1200px */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 15px;  /* 左右15px内边距 */
}

/* 区块标题样式 */
.section-title {
  text-align: center;  /* 文字居中 */
  margin-bottom: 20px;  /* 底部40px外边距 */
  font-size: 32px;  /* 标题字号 */
  color: #2c3e50;  /* 深蓝色文字 */
  font-weight: 600;  /* 半粗体 */
  position: relative;  /* 相对定位，用于装饰线定位 */
  padding-bottom: 15px;  /* 底部内边距，为装饰线留空间 */
}

/* 标题下方的装饰线 */
.section-title:after {
  content: "";  /* 伪元素内容 */
  position: absolute;  /* 绝对定位 */
  bottom: 0;  /* 位于底部 */
  left: 50%;  /* 水平居中 */
  transform: translateX(-50%);  /* 向左移动自身宽度50%实现完美居中 */
  width: 80px;  /* 装饰线宽度 */
  height: 3px;  /* 装饰线高度 */
  background-color: #3498db;  /* 蓝色装饰线 */
}

/* 新闻列容器 - 使用Flex布局 */
.news-columns {
  display: flex;  /* 弹性布局 */
  flex-wrap: wrap;  /* 允许换行 */
  gap: 20px;  /* 列间距30px */
  margin-bottom: 40px;  /* 底部外边距 */
}

/* 单个新闻列样式 */
.news-column {
  flex: 1;  /* 弹性增长，平分空间 */
  min-width: 300px;  /* 最小宽度300px */
  background: white;  /* 白色背景 */
  border-radius: 8px;  /* 圆角8px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* 柔和阴影 */
  padding: 25px;  /* 内边距 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;  /* 悬停动画 */
}

/* 悬停效果 - 上浮和阴影加深 */
.news-column:hover {
  transform: translateY(-5px);  /* 向上移动5px */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);  /* 阴影加深 */
}

/* 单个新闻项样式 */
.news-item {
  padding: 10px 0;  /* 上下内边距 */
  border-bottom: 1px solid #eee;  /* 底部浅灰色分隔线 */
}

/* 最后一个新闻项移除分隔线 */
.news-item:last-child {
  border-bottom: none;
}

/* 新闻日期标签样式 */
.news-date {
  display: inline-block;  /* 行内块显示 */
  background-color: #3498db;  /* 蓝色背景 */
  color: white;  /* 白色文字 */
  padding: 3px 10px;  /* 内边距 */
  border-radius: 4px;  /* 圆角 */
  font-size: 12px;  /* 小字号 */
  margin-bottom: 8px;  /* 底部外边距 */
}

/* 新闻标题样式 */
.news-title {
  margin: 0;  /* 移除外边距 */
  font-size: 18px;  /* 标题字号 */
  line-height: 1.5;  /* 行高 */
}

/* 新闻标题链接样式 */
.news-title a {
  color: #2c3e50;  /* 深蓝色链接 */
  text-decoration: none;  /* 无下划线 */
  transition: color 0.2s ease;  /* 颜色过渡效果 */
}

/* 链接悬停效果 */
.news-title a:hover {
  color: #3498db;  /* 悬停时变为蓝色 */
}

/* 文本居中工具类 */
.text-center {
  text-align: center;  /* 文字居中 */
}

/* 大按钮样式 */
.btn-large {
  display: inline-block;  /* 行内块显示 */
  padding: 12px 30px;  /* 内边距 */
  background-color: #3498db;  /* 蓝色背景 */
  color: white;  /* 白色文字 */
  text-decoration: none;  /* 无下划线 */
  border-radius: 4px;  /* 圆角 */
  font-size: 16px;  /* 字号 */
  font-weight: 500;  /* 中等粗细 */
  transition: background-color 0.3s ease, transform 0.2s ease;  /* 过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
}

/* 按钮悬停效果 */
.btn-large:hover {
  background-color: #2980b9;  /* 深蓝色背景 */
  transform: translateY(-2px);  /* 轻微上浮 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);  /* 阴影加深 */
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
  .news-columns {
    flex-direction: column;  /* 改为垂直布局 */
    gap: 20px;  /* 减小间距 */
  }
  
  .news-column {
    min-width: auto;  /* 移除最小宽度限制 */
  }
  
  .section-title {
    font-size: 28px;  /* 减小标题字号 */
  }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
  .section-title {
    font-size: 24px;  /* 进一步减小标题字号 */
  }
  
  .news-title {
    font-size: 16px;  /* 减小新闻标题字号 */
  }
}




/* +++++++++++++++++++++++++++++++++++++首页新闻分栏样式end++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ *


















/* LOGO样式 - 修复同时显示两个的问题 */
.logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.logo .full-name {
    display: inline;
    white-space: nowrap;
    font-size: 1.6em;
    font-weight: bold;
}

.logo .short-name {
    display: none;
    font-size: 2.0em;
    font-weight: bold;
}

/* 移动端显示短名称 */
@media (max-width: 992px) {
    .logo .full-name {
        display: none;
    }
    .logo .short-name {
        display: inline;
    }
    
    /* 确保LOGO不会挤压菜单按钮 */
    .logo {
        flex: 0 0 60%;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}






















/*-----------------------------------------------------------------------------------*/
/*------------------------分页组件菜单-------------------------------------------------*/
/*------------------------------------------------------------------------------------*/

/* 分页组件容器样式 */
.pagination {
     margin: 80px 0 10px 0;*/
    text-align: center; /* 内容居中对齐 */
    font-family: Arial, sans-serif; /* 使用Arial或无衬线字体 */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 分页链接基础样式 */
.pagination a {
    display: inline-block; /* 行内块显示 */
    padding: 8px 12px; /* 内边距 */
    margin: 0 5px; /* 左右间距2px */
    border: 1px solid #ddd; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角边框 */
    text-decoration: none; /* 去除下划线 */
    color: #005fc9; /* 链接文字颜色改为蓝色 */
    background-color: #fff; /* 白色背景 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 分页链接悬停状态 */
.pagination a:hover {
    background-color: #005fc9; /* 悬停背景改为淡蓝色 */
    border-color: #b3d4ff; /* 悬停边框改为更浅的蓝色*/ 
	color: white; /* 白色文字 */
}

/* 当前页样式 */
.pagination strong {
    display: inline-block; 
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid #005fc9; /* 蓝色边框 */
    border-radius: 4px;
    background-color: #005fc9; /* 蓝色背景 */
    color: white; /* 白色文字 */
    font-weight: normal; /* 正常字体粗细 */
}

/* 省略号样式 */
.pagination .ellipsis {
    padding: 8px 5px;
    margin: 0 2px;
    border: none; /* 无边框 */
    color: #666; /* 灰色文字 */
}

/* 上一页/下一页特殊样式 */
.pagination a[href*="page="]:first-child,
.pagination a[href*="page="]:last-child {
    padding: 8px 15px; /* 更大的左右内边距 */
    font-weight: bold; /* 加粗字体 */
    background-color: #f8f8f8; /* 浅灰色背景 */
}

/* 箭头图标容器 */
.pagination .arrow {
    position: relative; /* 相对定位 */
    padding: 8px 15px; /* 内边距 */
}

/* 上一页箭头图标 */
.pagination .arrow.prev::before {
    content: ""; /* 伪元素内容为空 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #005fc9; /* 蓝色左边框 */
    border-bottom: 2px solid #005fc9; /* 蓝色下边框 */
    transform: rotate(45deg); /* 旋转45度形成箭头 */
    margin-right: 3px; /* 右间距 */
}

/* 下一页箭头图标 */
.pagination .arrow.next::after {
    content: ""; /* 伪元素内容为空 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #005fc9; /* 蓝色右边框 */
    border-top: 2px solid #005fc9; /* 蓝色上边框 */
    transform: rotate(45deg); /* 旋转45度形成箭头 */
    margin-left: 3px; /* 左间距 */
}



/* 上一页/下一页箭头悬停效果 */
.pagination a[href*="page="]:first-child:hover,
.pagination a[href*="page="]:last-child:hover {
    background-color: #005fc9; /* 悬停背景色 */
    color: white; /* 白色文字 */
    border-color: #b3d4ff; /* 悬停边框色 */
}

/* 悬停时箭头颜色变为白色 */
.pagination a[href*="page="]:first-child:hover .arrow.prev::before,
.pagination a[href*="page="]:last-child:hover .arrow.next::after {
    border-left-color: white; /* 白色箭头 */
    border-bottom-color: white; /* 白色箭头 */
    border-right-color: white; /* 白色箭头 */
    border-top-color: white; /* 白色箭头 */
}
/* 响应式设计 - 在小屏幕上减少间距 */
@media (max-width: 600px) {
    .pagination a {
        padding: 6px 8px;
        margin: 0 1px;
    }
}




/*-----------------------------------------------------------------------------------*/
/*------------------------分页组件菜单END-------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/























/* ==================== 首页产品分类-基础布局样式 ==================== */
/* 产品网格容器 - 控制整体产品列表布局 */
.product-yi {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 默认4列布局 */
    gap: 25px; /* 网格间距 */
    padding: 20px; /* 内边距 */
    max-width: 1200px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
}

/* ==================== 产品卡片样式 ==================== */
/* 单个产品卡片容器 */
.product-card1 {
    width: 100%; /* 宽度100%填充网格单元格 */
    padding: 15px; /* 内边距 */
    background: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影效果 */
    transition: all 0.3s ease; /* 过渡动画 */
    text-align: center; /* 文字居中 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    box-sizing: border-box; /* 盒模型计算方式 */
}

/* 图片链接容器 */
.product-card1 > a:first-child {
    display: block; /* 块级元素 */
    width: 100%; /* 宽度100% */
    margin-bottom: 15px; /* 底部间距 */
}

/* ==================== 图片样式 ==================== */
/* 产品图片样式 */
.product-card1 img {
    width: 100%; /* 宽度100% */
    max-width: 230px; /* PC端最大宽度 */
    height: auto; /* 高度自适应 */
    object-fit: contain; /* 保持比例完整显示 */
    transition: all 0.3s ease; /* 过渡动画 */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); /* 图片阴影 */
}

/* ==================== 立体质感蓝色按钮样式 ==================== */
.product-card1 > a:last-child {
    display: inline-block;
    /*margin-top: 12px;*/
    padding: 6px 70px;
    /* 渐变底色+主色，增强立体基底 */
    background: linear-gradient(180deg, #257ef0 0%, #1a73e8 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 17px;
	font-weight: bold;   /* 加粗 */
	font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 设置字体 */
    /*font-weight: 500;*/
    line-height: 1.4;
    /* 立体阴影组合：浅上阴影+深下阴影，模拟凸起 */
    box-shadow: 0 1px 2px rgba(255,255,255,0.3) inset,
                0 3px 6px rgba(10, 80, 180, 0.3),
                0 1px 0 rgba(0,0,0,0.1);
    width: auto;
    border: 0;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    /* 丝滑过渡，适配所有立体效果变化 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    top: 0;
}

/* 悬停：立体凸起+光影强化 */
.product-card1 > a:last-child:hover {
    /* 加深渐变底色，增强层次感 */
    background: linear-gradient(180deg, #1e72e6 0%, #0d62c9 100%);
    top: -3px; /* 上移更多，凸起更明显 */
    /* 阴影放大+加深，强化立体悬浮感 */
    box-shadow: 0 1px 2px rgba(255,255,255,0.2) inset,
                0 6px 12px rgba(10, 80, 180, 0.4),
                0 2px 0 rgba(0,0,0,0.15);
}

/* 点击：按压回弹，立体收缩（真实物理反馈） */
.product-card1 > a:last-child:active {
    top: 0; /* 回归原位，模拟按压 */
    /* 阴影缩小，取消内高光，强化按压凹陷感 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset,
                0 2px 4px rgba(10, 80, 180, 0.2),
                0 1px 0 rgba(0,0,0,0.1);
    /* 点击底色再加深，贴合按压视觉 */
    background: linear-gradient(180deg, #0d62c9 0%, #0b57b7 100%);
}

/* 可选：禁用状态（立体效果归零） */
.product-card1 > a:last-child.disabled {
    background: linear-gradient(180deg, #94bff9 0%, #8ab4f8 100%);
    cursor: not-allowed;
    top: 0 !important;
    box-shadow: none !important;
    opacity: 0.7;
}












/* ==================== 悬停效果 ==================== */
/* 卡片悬停效果 */
.product-card1:hover {
    transform: translateY(-5px); /* 上移5px */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 增大阴影 */
}

/* 图片悬停效果 */
.product-card1:hover img {
    transform: scale(1.05); /* 放大5% */
}






/* ==================== 响应式设计 - 平板设备 ==================== */
@media (max-width: 992px) {
    .product-yi {
        grid-template-columns: repeat(3, 1fr); /* 3列布局 */
        gap: 20px; /* 调整间距 */
        padding: 15px; /* 调整内边距 */
    }
    
    .product-card1 img {
        max-width: 160px; /* 调整图片大小 */
    }
}

/* ==================== 响应式设计 - 大屏手机 ==================== */
@media (max-width: 768px) {
    .product-yi {
        grid-template-columns: repeat(2, 1fr); /* 2列布局 */
        gap: 15px; /* 调整间距 */
    }
    
    .product-card1 img {
        max-width: 140px; /* 调整图片大小 */
    }
    
    /* 调整按钮样式 */
    .product-card1 > a:last-child {
        padding: 7px 12px; /* 调整内边距 */
        font-size: 13px; /* 调整字体大小 */
    }
}

/* ==================== 响应式设计 - 手机端 ==================== */
@media (max-width: 576px) {
    .product-yi {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 25px; /* 增大间距 */
        padding: 15px; /* 调整内边距 */
    }
    
    /* 手机端卡片特殊样式 */
    .product-card1 {
        padding: 0; /* 移除内边距 */
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
        background: none; /* 透明背景 */
    }
    
    /* 图片链接容器调整 */
    .product-card1 > a:first-child {
        width: 100%; /* 全宽 */
        margin: 0; /* 移除外边距 */
        padding: 0; /* 移除内边距 */
    }
    
    /* 手机端全宽图片 */
    .product-card1 img {
        max-width: 100%; /* 最大宽度100% */
        width: 100%; /* 宽度100% */
        border-radius: 0; /* 移除圆角 */
        filter: none; /* 移除滤镜 */
    }
    
    /* 手机端按钮调整 */
    .product-card1 > a:last-child {
        display: block; /* 块级元素 */
        width: 90%; /* 90%宽度 */
        margin: 15px auto; /* 上下间距15px，水平居中 */
        padding: 12px 0; /* 内边距 */
        text-align: center; /* 文字居中 */
        font-size: 16px; /* 增大字体 */
        border-radius: 8px; /* 圆角 */
    }
    
    /* 移除手机端的悬停效果 */
    .product-card1:hover {
        transform: none; /* 取消变换 */
        box-shadow: none; /* 取消阴影 */
    }
    
    .product-card1:hover img {
        transform: none; /* 取消变换 */
    }
}
/* ==================== 首页产品分类-end ====================





/* +++++++++++++++++++++++++++++++四图响应式模板++++++++++++++++++++++++++++++++++++++++++++++ */
/* 图片展示区整体样式 */
.four-image-showcase {
  padding: 60px 0; /* 上下内边距 */
  background-color: #f9f9f9; /* 浅灰色背景 */
  font-family: 'Arial', sans-serif; /* 默认字体 */
}




/* 图片网格布局 */
.image-grid {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 30px; /* 行间距 */
}

/* 图片行样式 */
.image-row {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  gap: 20px; /* 图片间距 */
}

/* 单个图片项样式 */
.image-item {
  flex: 1; /* 等分剩余空间 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 隐藏溢出内容 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: all 0.3s ease; /* 所有属性过渡效果 */
}

/* 悬停效果 */
.image-item:hover {
  transform: translateY(-5px); /* 上浮效果 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
}

/* 图片样式 */
.image-item img {
  width: 100%; /* 宽度100% */
  height: auto; /* 高度自适应 */
  display: block; /* 块级显示 */
  transition: transform 0.5s ease; /* 缩放过渡效果 */
}

/* 图片悬停放大效果 */
.image-item:hover img {
  transform: scale(1.05); /* 放大5% */
}

/* 响应式设计 - 移动设备 */
@media (max-width: 768px) {
  /* 在小屏幕上改为垂直排列 */
  .image-row {
    flex-direction: column; /* 垂直排列 */
    gap: 20px; /* 间距 */
  }
  
  /* 图片项宽度100% */
  .image-item {
    width: 100%;
  }
  
  /* 移除br标签的显示（在HTML中） */
  .br {
    display: none;
  }
}

/* 可选：图片描述文字样式 */

.image-item {
  position: relative;
}

.image-item::after {
  content: attr(data-description); /*从data-description属性获取内容*/
  position: absolute; /*绝对定位*/
  bottom: 0; /*定位到底部*/
  left: 0; /*左对齐*/
  right: 0; /*右对齐*/
  background: rgba(0, 0, 0, 0.7); /*半透明黑色背景*/
  color: white; /*白色文字*/
  text-align:center;
  padding: 15px; /*内边距*/
  transform: translateY(100%); /*初始位置在容器外*/
  transition: transform 0.3s ease; /*过渡效果*/
  opacity: 0; /*初始透明*/
}

.image-item:hover::after {
  transform: translateY(0); /*悬停时移入*/
  opacity: 1; /*完全显示*/
}

/* +++++++++++++++++++++++++++++++四图响应式模板end++++++++++++++++++++++++++++++++++++++++++++++*/ 






/* +++++++++++++++++++++++++++++++桌面端菜单样式+++++++++++++++++++++++++++++++++++++++++++++++++ */



/* 主导航栏样式 */
.main-nav ul {
    display: flex; /* 将菜单项排列成水平行 */
}

/* 单个菜单项样式 */
.main-nav li {
    margin-left: 20px; /* 菜单项之间的间距 */
	font-size: 1.2em;
    position: relative; /* 为可能的二级菜单设置相对定位 */
}

/* 导航链接基础样式 */
.main-nav a {
    font-weight: 600; /* 中等粗细字体 */
    padding: 5px 0; /* 只设置上下内边距 */
    transition: all 0.3s ease; /* 所有属性变化添加0.3秒缓动效果 */
}

/* 链接悬停状态 */
.main-nav a:hover {
    opacity: 0.8; /* 悬停时轻微透明效果 */
}

/* 当前活动页面的链接样式 */
.main-nav .active a {
    border-bottom: 1px solid white; /* 白色下划线标识当前页面 */
}

/* 移动端菜单按钮（默认隐藏） */
.mobile-menu-btn {
    display: none; /* 桌面端不显示 */
    font-size: 2.0em; /* 增大字号便于移动端点击 */
    cursor: pointer; /* 悬停时显示手指指针 */
}



/* 主导航栏的无序列表样式 - 使用flexbox实现水平布局 */
.main-nav ul {
    display: flex;          /* 弹性布局使子元素横向排列 */
    gap: 20px;             /* 导航项之间的间距 */
}

/* 导航列表中每个项目的样式 */
.main-nav li {
    position: relative;    /* 为伪元素创建定位上下文 */
}

/* 导航链接的基础样式 */
.main-nav a {
    color: white;          /* 文字颜色 */
    padding: 10px 0;       /* 只设置垂直方向的内边距 */
    position: relative;     /* 为下划线效果提供定位基准 */
}

/* 使用伪元素实现下划线效果 */
.main-nav a::after {
    content: '';           /* 伪元素必需属性 */
    position: absolute;    /* 相对于链接定位 */
    bottom: 0;             /* 对齐链接底部 */
    left: 0;               /* 从左侧开始 */
    width: 0;              /* 初始宽度为0（不可见） */
    height: 2px;           /* 下划线高度 */
    background: white;     /* 下划线颜色 */
    transition: width 0.3s ease, left 0.3s ease; /* 宽度和位置的平滑过渡动画 */
}

/* 悬停状态 - 下划线动画展开至完整宽度 */
.main-nav a:hover::after {
    width: 100%;           /* 扩展到链接的完整宽度 */
    left: 0;               /* 保持从左侧开始 */
}

/* 当前页面指示器 - 显示永久下划线 */
.main-nav .active a::after {
    width: 100%;           /* 完全宽度的下划线 */
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    /* 在移动端移除下划线效果 */
    .main-nav a::after {
        display: none;     /* 隐藏下划线伪元素 */
    }
    
    /* 移动端替代的当前页面指示样式 */
    .main-nav .active a {
        border-left: 3px solid white;  /* 用左边框代替下划线 */
        padding-left: 15px;            /* 为左边框增加内边距 */
    }
}



/* 二级菜单----------主菜单中包含子菜单的菜单项 */
.main-nav .has-submenu {
  position: relative; /* 为子菜单提供定位参考 */
}

/* 子菜单容器样式 */
.main-nav .submenu {
  display: none; /* 默认隐藏子菜单 */
  position: absolute; /* 相对于父菜单项定位 */
  top: 100%; /* 位于父菜单项下方 */
  left: 0; /* 与父菜单项左对齐 */
  background-color:#f5f5f5; /* 白色背景 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影 */
  padding: 0; /* 重置内边距 */
  min-width: 100px; /* 最小宽度 */
  z-index: 100; /* 确保显示在其他内容上方 */
  font-size: 12.5px; /* 整体字体大小调整 */
  white-space: nowrap;/*文字强制不换行*/
}

/* 子菜单项样式 */
.main-nav .submenu li {
  list-style: none; /* 移除列表标记 */
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
}

/* 子菜单链接样式 */
.main-nav .submenu li a {
  display: block; /* 块级显示 */
  padding: 5px ; /* 内边距 */
  text-decoration: none; /* 无下划线 */
  color: #333; /* 文字颜色 */
  transition: background-color 0.3s; /* 背景色过渡效果 */
}

/* 子菜单链接悬停状态 */
.main-nav .submenu li a:hover {
  background-color: #1e88e5; /* 悬停时背景色变化#f5f5f5 */
  color:#FFFFFF;
}

/* 父菜单项悬停时显示子菜单 */
.main-nav .has-submenu:hover .submenu {
  display: block; /* 显示子菜单 */
}

/* +++++++++++++++++++++++++++++++桌面端菜单样式end+++++++++++++++++++++++++++++++++++++++++++++++++ */

















/* ==================== 联系我们 ==================== */


/* 基础样式重置 */
.yizhi-contact-card {
    font-family: '微软雅黑';
	
    max-width: 900px;
    margin: 20px auto;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background: #f4f4f4;
    transition: all 0.3s ease;
    border: 1px solid #e0e5ed;
}

/* 鼠标悬停效果 */
.yizhi-contact-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* 公司名称样式 */
.yizhi-contact-card h3 {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #3498db;
    display: flex;
    align-items: center;
}

/* 图标样式（可根据需要添加图标字体或图片） */
.yizhi-contact-card h3::before {
    /*content: "FFIBU";*/ /* 工厂图标，可替换为实际图标 */
    margin-right: 10px;
    color: #3498db;
}

/* 联系信息分组样式 */
.yizhi-contact-card .contact-group {
    margin-bottom: 18px;
    position: relative;
    padding-left: 35px;
}

/* 联系信息图标前缀 */
.yizhi-contact-card .contact-group::before {
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    font-size: 1.1rem;
    color: #3498db;
}

/* 不同类型联系信息的图标 */
.yizhi-contact-card .address::before { content: "📍"; } /* 地址图标 */
.yizhi-contact-card .phone::before { content: "📞"; } /* 电话图标 */
.yizhi-contact-card .mobile::before { content: "📱"; } /* 手机图标 */
.yizhi-contact-card .qq::before { content: "💬"; } /* QQ图标 */
.yizhi-contact-card .email::before { content: "📧"; } /* 邮箱图标 */
.yizhi-contact-card .website::before { content: "🌐"; } /* 网址图标 */

/* 联系信息文本样式 */
.yizhi-contact-card p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 5px 0;
}

/* 强调关键信息（如电话、手机） */
.yizhi-contact-card .phone p, 
.yizhi-contact-card .mobile p {
    font-weight: 500;
    color: #2c3e50;
}

/* 微信同号提示样式 */
.yizhi-contact-card .wechat-note {
    font-size: 0.9rem;
    color: #7f8c8d;
    font-style: italic;
    margin-top: 3px;
}

/* 网址链接样式 */
.yizhi-contact-card .website a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.yizhi-contact-card .website a:hover {
    color: #2980b9;
    text-decoration: underline;
}
/* ==================== 响应式设计 ==================== */
/* 小屏幕设备适配 (最大宽度768px) */
@media (max-width: 768px) {
    .yizhi-contact-card {
	padding-top:1000px;
    max-width: 400px;
   padding: 5px;
    }
    

}

/* ==================== 联系我们end ==================== */





/*关于我们图片*/
.carousel {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
	padding-top:30px;
 
}
.yizhi-about-card {
    font-family: '微软雅黑';
	
    max-width: 1200px;
    margin: 20px auto;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background: #f4f4f4;
    transition: all 0.3s ease;
    border: 1px solid #e0e5ed;
}


/* 小屏幕设备适配 (最大宽度768px) */
@media (max-width: 768px) {
    .yizhi-about-card {
    max-width: 360px;
   padding: 5px;
    }
    

}




/*查看新闻*/
.yizhi-news-card {
    font-family: '微软雅黑';
    max-width: 1200px;
    margin: 20px auto;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background:#FFFFFF;
    transition: all 0.3s ease;
    border: 1px solid #e0e5ed;
    /* 新增：自动换行，防止内容溢出 */
    word-break: break-word;  /* 允许单词内换行（适合中文+英文混合） */
    overflow-wrap: break-word; /* 更智能的换行方式，优先在空格处换行 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 小屏幕设备适配 (最大宽度768px) */
@media (max-width: 768px) {
    .yizhi-news-card {
        max-width: 360px;
        padding: 5px;
    }
}










/* ++++++++++++++++++++++++++++news.asp新闻页+++++++++++++++++++++++++++++++++++++ */
.list-container-fb {
    width: 100%;
    max-width: 1200px;
    margin: 10px auto;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* 列表样式 */
.styled-list-fb {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styled-list-fb li {
    padding: 16px 25px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.styled-list-fb li:last-child {
    border-bottom: none;
}

.styled-list-fb li:hover {
    background-color: #f9f9f9;
    transform: translateX(5px);
}

.styled-list-fb li a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    flex-grow: 1;
    transition: color 0.2s;
    position: relative;
    padding-left: 15px;
}

.styled-list-fb li a:before {
    content: "•";
    color: #3498db;
    position: absolute;
    left: 0;
    top: 0;
}

.styled-list-fb li a:hover {
    color: #3498db;
}

.styled-list-fb li time {
    color: #7f8c8d;
    font-size: 14px;
    min-width: 90px;
    text-align: right;
}

/* 调整分页按钮尺寸 */
.pagination-fb {
    margin: 30px 0 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px; /* 使用gap替代margin控制间距 */
}

.pagination-fb a, 
.pagination-fb span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; /* 缩小宽度 */
    height: 32px; /* 缩小高度 */
    padding: 0 8px; /* 缩小内边距 */
    font-size: 14px; /* 调小字体 */
    font-weight: 500;
    text-decoration: none;
    color: #34495e;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* 调小圆角 */
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0; /* 移除额外margin */
}

.pagination-fb a:hover {
    background-color: #f8f9fa;
    border-color: #d0d0d0;
    transform: none; /* 移除上浮效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pagination-fb span {
    color: #95a5a6;
    background-color: #f8f9fa;
    border-color: transparent;
}

.pagination-fb a.active {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
    box-shadow: 0 1px 3px rgba(52, 152, 219, 0.3);
}

/* 调整首尾页按钮 */
.pagination-fb a:first-child,
.pagination-fb a:last-child {
    min-width: 60px; /* 缩小宽度 */
    padding: 0 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .pagination-fb {
        gap: 3px;
    }
    
    .pagination-fb a, 
    .pagination-fb span {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .pagination-fb a:first-child,
    .pagination-fb a:last-child {
        min-width: 50px;
        padding: 0 8px;
    }
}

/* ++++++++++++++++++++++++++++news.asp新闻页end+++++++++++++++++++++++++++++++++++++ */












/* 产品参数表格容器 */
.pro{
    width: 100%; /* 宽度100% */
    overflow-x: auto; /* 允许横向滚动 */
	margin-left:10px;
	margin-right:10px;
}

/* 参数表格样式 */
.pro table {
    border-collapse: collapse; /* 边框合并 */
    width: 90% !important; /* 固定宽度 */
	/*table-layout: auto;*//*列宽度由单元格内容设定*/
    font-family: Arial, sans-serif; /* 字体设置 */
    margin: 20px auto; /* 外边距 */
    border-radius: 5px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
	text-align:center !important;
}

/* 表头单元格 */
.pro th {
    background-color: #f2f2f2; /* 浅灰背景 */
    font-weight: bold; /* 加粗文字 */
}

/* 普通单元格 */
.pro td {
    border: 1px solid #ccc; /* 边框样式 */
    padding: 8px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-overflow: ellipsis; /* 文字溢出显示省略号 */
}

/* 表格隔行变色 */
.pro tr:nth-child(even) {
    background-color: #f9f9f9; /* 浅色背景 */
}