:root {
    /* 网站主题色变量 */
    --primary: #005500;      /* 主色调 - 深绿色 */
    --secondary: #8a9a5b;    /* 次要色 - 橄榄绿 */
    --accent: #d4c06f;       /* 强调色 - 金色 */
    --light: #f8f4e9;        /* 浅色背景 */
    --dark: #4d3a1f;         /* 深色背景 */
    --text: #5d4a2d;         /* 主要文本颜色 */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保元素的宽度和高度包括内边距和边框 */
}
html, body {
  height: 100%;
}
body {
    font-family: 'Noto Serif SC', serif; /* 设置全局字体为 Noto Serif SC */
    color: var(--text);                  /* 使用定义的文本颜色变量 */
    background: var(--light);            /* 设置背景浅色 */
    line-height: 1.6;                    /* 设置行高 */
}
/* 顶部品牌区域样式 */
.brand-top {
    background: var(--primary);          /* 使用主色调作为背景色 */
    color: white;                        /* 设置文字颜色为白色 */
    justify-content: center;             /* 水平居中对齐内容 */
    align-items: center;                 /* 垂直居中对齐内容 */
    position: relative;                  /* 相对定位 */
    z-index: 1000;                       /* 设置堆叠顺序 */
}

.brand-info {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.brand-logo {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15;                              /* 子元素间距 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-info {
    display: flex;                        /* 使用 flex 布局 */
    gap: 20px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.contact-item {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 8px;                             /* 子元素间距 */
    font-size: 14px;                      /* 设置联系信息字体大小 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 10px;                  /* 下边距 */
}
.contact-fbt {
    display: flex;                        /* 使用 flex 布局 */
    gap: 50px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
	margin-top: 0px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-fbt2 {
    align-items: center;                  /* 垂直居中对齐内容 */
    font-size: 16px;                      /* 设置自然之味健康之礼字体大小 */
}
nav {
  background: var(--light);                             /* 使用CSS变量设置浅色背景 */
  padding: 5px 30px;                                      /* 左右内边距30px，上下为0 */
  border-bottom: 1px solid rgba(139, 115, 75, 0.1);     /* 底部半透明边框 */
  position: sticky;                                     /* 粘性定位 */
  top: 0;   /* 距离视口顶部0px时固定 */
  z-index: 999; /* 确保导航栏在最顶层 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 底部轻微阴影 */
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 100%; /* 确保宽度不超过视口 */
  margin: 0 auto; /* 水平居中 */
}

/* 导航内容容器布局 */
.nav-container {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 添加左右内边距（可选） */
}

/* 主导航链接列表样式 */
.main-nav {
  display: flex; /* 启用Flex布局 */
  list-style: none; /* 移除列表默认样式 */
}
/* 单个导航项样式 */
.nav-item {
  position: relative; /* 相对定位（用于伪元素定位） */
  padding: 10px 30px; /* 内边距 */
  font-weight: 600; /* 粗体 */
  font-size: 16px; /* 字体大小 */
  color: var(--dark); /* 文字颜色使用CSS变量 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性过渡效果 */
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 垂直居中 */
}

/* 导航项底部指示条（伪元素） */
.nav-item::after {
  content: ''; /* 必须内容属性 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 定位到底部 */
  left: 50%; /* 从左侧50%位置开始 */
  width: 0; /* 初始宽度为0 */
  height: 3px; /* 高度 */
  background: var(--secondary); /* 使用CSS变量设置颜色 */
  transform: translateX(-50%); /* 水平居中 */
  transition: width 0.3s ease; /* 宽度过渡动画 */
}

/* 悬停/激活状态下的指示条效果 */
.nav-item:hover::after, 
.nav-item.active::after {
  width: 80%; /* 展开至80%宽度 */
}

/* 悬停/激活状态文字效果 */
.nav-item:hover, 
.nav-item.active {
  color: var(--primary); /* 使用CSS变量改变文字颜色 */
}

/* 导航项内图标样式 */
.nav-item i {
  margin-right: 8px; /* 图标右侧间距 */
  font-size: 18px; /* 图标大小 */
  color: var(--secondary); /* 使用CSS变量设置颜色 */
}
/* 导航链接样式 */
.nav-item a {
    text-decoration: none;             /* 去掉文本装饰（如下划线） */
    color: inherit;                    /* 继承父元素的颜色属性 */
}

/* 企业证件展示样式 */
.certificate-section {
    padding: 40px 5%;
    background: var(--light);
}

.certificate-container {
    max-width: 1200px;
    margin: 0 auto;
}

.certificate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-items: center;
    margin-top: 30px;
}

.certificate-item {
    text-align: center;
    width: 100%;
    max-width: 350px;
}

/* 特殊处理：让第二排的两个元素居中显示 */
.certificate-item:nth-child(4),
.certificate-item:nth-child(5) {
    grid-column: span 1.5;
}

.certificate-image {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.certificate-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.certificate-image img {
    width: 100%;
    height: auto;
    display: block;
}

.certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 18px;
    font-weight: bold;
}

.certificate-image:hover .certificate-overlay {
    opacity: 1;
}

.certificate-name {
    margin-top: 15px;
    font-size: 16px;
    color: var(--text);
    font-weight: 500;
}

/* 弹窗样式 */
.certificate-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.modal-content img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

.modal-title {
    color: white;
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 35px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--accent);
}

/* 响应式设计 */
@media screen and (max-width: 992px) {
    .certificate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .certificate-item:nth-child(4),
    .certificate-item:nth-child(5) {
        grid-column: span 1;
    }
}

@media screen and (max-width: 768px) {
    .certificate-grid {
        grid-template-columns: 1fr;
    }
}
        /* 欢迎区域 */
        .welcome-section {
            padding: 100px 40px 60px; /* 设置内边距：上100px，左右40px，下60px */
            text-align: center; /* 文本居中对齐 */
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url('../img/tp.jpg'); /* 设置背景为半透明黑色渐变叠加图片 */
            background-size: cover; /* 背景图片覆盖整个容器 */
            background-position: center; /* 背景图片居中显示 */
            color: white; /* 设置文本颜色为白色 */
            position: relative; /* 相对定位，为子元素的绝对定位提供参考 */
        }
        
        /* 欢迎区域标题样式 */
        .section-title {
            font-size: 3.5rem; /* 设置字体大小为3.5倍根元素字体大小 */
            color: white; /* 设置标题颜色为白色 */
            margin-bottom: 20px; /* 设置标题下边距为20px */
            font-family: 'Ma Shan Zheng', cursive; /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
            position: relative; /* 相对定位，为伪元素定位提供参考 */
            display: inline-block; /* 以行内块级元素显示 */
        }
        
        /* 欢迎区域副标题样式 */
        .section-subtitle {
            font-size: 1.5rem; /* 设置字体大小为1.5倍根元素字体大小 */
            max-width: 800px; /* 设置最大宽度为800px，防止文本过宽 */
            margin: 0 auto; /* 水平居中 */
            color: rgba(255,255,255,0.9); /* 设置文本颜色为白色，透明度为0.9 */
        }
        /* 企业介绍部分 */
        .about-section {
            padding: 40px 5%;
            background: transparent; /* 背景 */ 
            position: relative; /* 相对定位，为子元素的绝对定位提供参考 */
        }
        
        .about-container {
            max-width: 1200px; /* 设置最大宽度 */
            margin: 0 auto; /* 水平居中 */
            display: grid; /* 使用网格布局 */
            grid-template-columns: 1fr 1fr; /* 定义两列，每列宽度相等 */
            gap: 60px; /* 设置网格项间距 */
            align-items: center; /* 垂直居中对齐网格项 */
        }
        
        .about-image {
            border-radius: 12px; /* 设置圆角边框 */
            overflow: hidden; /* 隐藏溢出内容 */
            box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* 添加阴影效果 */
            height: 600px; /* 设置高度 */
        }
        
        .about-image img {
            width: 100%; /* 宽度占满父容器 */
            height: 100%; /* 高度占满父容器 */
            object-fit: cover; /* 保持宽高比填充容器 */
            transition: transform 0.5s ease; /* 添加变换过渡效果 */
        }
        
        .about-image:hover img {
            transform: scale(1.05); /* 鼠标悬停时图片放大 */
        }
        
        .about-content h2 {
            font-size: 2.5rem; /* 设置字体大小 */
            color: var(--primary); /* 设置文字颜色 */
            margin-bottom: 30px; /* 设置下边距 */
            font-family: 'Ma Shan Zheng', cursive; /* 设置字体 */
            position: relative; /* 相对定位，为伪元素定位提供参考 */
        }
        
        .about-content h2::after {
            content: ''; /* 伪元素内容为空 */
            position: absolute; /* 绝对定位 */
            bottom: -10px; /* 距离底部10px */
            left: 0; /* 距离左侧0px */
            width: 80px; /* 设置宽度 */
            height: 4px; /* 设置高度 */
            background: var(--accent); /* 设置背景颜色 */
        }
        
        .about-content p {
            font-size: 1.1rem; /* 设置字体大小 */
            line-height: 1.8; /* 设置行高 */
            margin-bottom: 25px; /* 设置下边距 */
            color: var(--text); /* 设置文字颜色 */
        }
        
        .about-stats {
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(3, 1fr); /* 定义三列，每列宽度相等 */
            gap: 20px; /* 设置网格项间距 */
            margin-top: 40px; /* 设置上边距 */
        }
        
        .stat-item {
            text-align: center; /* 文本居中对齐 */
            padding: 25px 15px; /* 设置内边距 */
            background: white; /* 设置背景颜色 */
            border-radius: 10px; /* 设置圆角边框 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 添加阴影效果 */
        }
        
        .stat-value {
            font-size: 2.5rem; /* 设置字体大小 */
            font-weight: 700; /* 设置字体粗细 */
            color: var(--primary); /* 设置文字颜色 */
            margin-bottom: 10px; /* 设置下边距 */
        }
        
        .stat-label {
            font-size: 1.1rem; /* 设置字体大小 */
            color: var(--text); /* 设置文字颜色 */
        }
        /* 公益轮播图 - 优化 */
        .public-welfare-section {
            padding: 40px 5%;                /* 设置上下内边距40px，左右内边距5% */
            background: var(--light); /* 原代码使用未定义的 --light-beige，改为使用已定义的 --light 变量 */ 
        }
        .slide-title1 {
            font-size: 3.5rem; /* 设置字体大小为3.5倍根元素字体大小 */
            color: white; /* 设置标题颜色为白色 */
            margin-bottom: 20px; /* 设置标题下边距为20px */
            font-family: 'Ma Shan Zheng', cursive; /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
            position: relative; /* 相对定位，为伪元素定位提供参考 */
            display: inline-block; /* 以行内块级元素显示 */
        }
.slide-title1::after {
    content: ''; /* 生成一个空内容的伪元素 */
    position: absolute; /* 绝对定位，相对于父元素定位 */
    bottom: -10px; /* 距离底部10像素 */
    left: 50%; /* 距离左边50% */
    transform: translateX(-50%); /* 水平平移自身宽度的50%，实现居中效果 */
    width: 100px; /* 宽度设置为100像素 */
    height: 4px; /* 高度设置为4像素 */
    background: var(--accent); /* 背景颜色使用自定义属性 --accent */
}
        .slide-header {
            text-align: center;  /* 文本居中对齐 */
            max-width: 800px;    /* 最大宽度设置为800px */
            margin: 0 auto 30px; /* 水平居中，底部外边距30px */
        }
        
        .slide-header h2 {
            font-size: 2.8rem;                 /* 设置字体大小为2.8倍根元素字体大小 */
            color: var(--primary);       /* 使用变量 --primary 设置文字颜色 */
            margin-bottom: 20px;               /* 底部外边距20px */
            font-family: 'Ma Shan Zheng', cursive; /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
        }
        
        .slide-header p {
            font-size: 1.2rem;   /* 设置字体大小为1.2倍根元素字体大小 */
            color: var(--text);  /* 使用变量 --text 设置文字颜色 */
            line-height: 1.7;    /* 设置行高为1.7 */
        }
        
        .carousel-container {
            max-width: 1200px;                    /* 设置最大宽度为1200px */
            margin: 0 auto;                       /* 水平居中 */
            position: relative;                   /* 相对定位，为子元素绝对定位提供参考 */
            overflow: hidden;                     /* 隐藏溢出内容 */
            border-radius: 15px;                  /* 设置圆角边框 */
            box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* 原代码 0px 可能是笔误，改为 20px 增强阴影效果 */
            height: 500px;                        /* 设置高度为500px */
        }
        .carousel-slides {
            display: flex;                        /* 使用flex布局 */
            height: 100%;                         /* 高度占满父容器 */
            transition: transform 0.8s ease;      /* 添加变换过渡效果，持续0.8秒 */
        }
        
        .carousel-slide {
            min-width: 100%;                      /* 最小宽度为100% */
            position: relative;                   /* 相对定位 */
            height: 100%;                         /* 高度占满父容器 */
        }
        
        .carousel-slide img {
            width: 100%;                          /* 宽度占满父容器 */
            height: 100%;                         /* 高度占满父容器 */
            object-fit: cover;                    /* 保持宽高比填充容器 */
        }
        
        .slide-content {
            position: absolute;                   /* 绝对定位 */
            bottom: 0;                            /* 定位到底部 */
            left: 0;                              /* 定位到左侧 */
            right: 0;                             /* 定位到右侧 */
            background: rgba(0,0,0,0.7);          /* 设置半透明黑色背景 */
            color: white;                         /* 设置文字颜色为白色 */
            padding: 20px;                        /* 原内边距 10px 可能过小，改为 20px 提升内容间距 */
            backdrop-filter: blur(5px);           /* 添加背景模糊效果 */
        }

        .slide-title {
            font-size: 2rem;                      /* 设置字体大小为2倍根元素字体大小 */
            margin-bottom: 10px;                   /* 原下边距 2px 可能过小，改为 10px 提升间距 */
            color: var(--accent);                 /* 使用强调色变量设置文字颜色 */
            font-family: 'Ma Shan Zheng', cursive; /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
        }
        
        
        .slide-description {
            font-size: 1.1rem;                    /* 设置字体大小为1.1倍根元素字体大小 */
            max-width: 1200px;                    /* 设置最大宽度为1200px */
            margin: 0 auto;                       /* 水平居中 */
            line-height: 1.7;                     /* 设置行高为1.7 */
        }
        
        .carousel-nav {
            position: absolute;                   /* 绝对定位 */
            top: 50%;                             /* 定位到垂直居中位置 */
            transform: translateY(-50%);          /* 微调垂直居中 */
            width: 100%;                          /* 宽度占满父容器 */
            display: flex;                        /* 使用flex布局 */
            justify-content: space-between;       /* 子元素两端对齐 */
            padding: 0 20px;                      /* 设置左右内边距为20px */
            z-index: 10;                          /* 设置堆叠顺序 */
        }
        
        .carousel-btn {
            background: rgba(255,255,255,0.3);    /* 设置半透明白色背景 */
            color: white;                         /* 设置文字颜色为白色 */
            border: none;                         /* 移除边框 */
            width: 50px;                          /* 设置宽度为50px */
            height: 50px;                         /* 设置高度为50px */
            border-radius: 50%;                   /* 设置为圆形 */
            display: flex;                        /* 使用flex布局 */
            align-items: center;                  /* 垂直居中对齐 */
            justify-content: center;              /* 水平居中对齐 */
            cursor: pointer;                      /* 设置鼠标指针为手型 */
            font-size: 1.5rem;                    /* 设置字体大小为1.5倍根元素字体大小 */
            transition: all 0.3s ease;            /* 添加所有属性过渡效果，持续0.3秒 */
            backdrop-filter: blur(5px);           /* 添加背景模糊效果 */
        }
        
        .carousel-btn:hover {
            background: var(--primary);    /* 鼠标悬停时背景透明度变化 */
            transform: scale(1.1);                /* 鼠标悬停时放大1.1倍 */
        }
        
        .carousel-indicators {
            position: absolute;                   /* 绝对定位 */
            bottom: 20px;                         /* 距离底部20px */
            left: 50%;                            /* 定位到水平居中位置 */
            transform: translateX(-50%);          /* 微调水平居中 */
            display: flex;                        /* 使用flex布局 */
            gap: 10px;                            /* 设置子元素间距为10px */
            z-index: 10;                          /* 设置堆叠顺序 */
        }
        
        .indicator {
            width: 12px;                          /* 设置宽度为12px */
            height: 12px;                         /* 设置高度为12px */
            border-radius: 50%;                   /* 设置为圆形 */
            background: rgba(255,255,255,0.5);    /* 设置半透明白色背景 */
            cursor: pointer;                      /* 设置鼠标指针为手型 */
            transition: all 0.3s ease;            /* 添加所有属性过渡效果，持续0.3秒 */
        }
        
        .indicator.active {
            background: var(--accent);            /* 激活状态使用强调色变量设置背景颜色 */
            transform: scale(1.2);                /* 激活状态放大1.2倍 */
        }
        /* 发展历程 */
        .history-section {
            padding: 40px 5%;  /* 设置上下内边距40px，左右内边距5% */
            background: var(--light-beige); /* 背景 */ 
            position: relative;  /* 相对定位，为子元素的绝对定位提供参考 */
        }
        
        .section-header {
            text-align: center;  /* 文本居中对齐 */
            max-width: 800px;  /* 设置最大宽度为800px */
            margin: 0 auto 30px;  /* 水平居中，底部外边距30px */
        }
        
        .section-header h2 {
            font-size: 2.8rem;  /* 设置字体大小为2.8倍根元素字体大小 */
            color: var(--primary);  /* 使用 --primary-green 变量设置文字颜色 */
            margin-bottom: 20px;  /* 设置底部外边距20px */
            font-family: 'Ma Shan Zheng', cursive;  /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
        }
        
        .section-header p {
            font-size: 1.2rem;  /* 设置字体大小为1.2倍根元素字体大小 */
            color: var(--text);  /* 使用 --text 变量设置文字颜色 */
            line-height: 1.7;  /* 设置行高为1.7 */
        }
        
        .timeline {
            position: relative;  /* 相对定位，为子元素的绝对定位提供参考 */
            max-width: 1000px;  /* 设置最大宽度为1000px */
            margin: 0 auto;  /* 水平居中 */
        }
        
        .timeline::before {
            content: '';  /* 生成一个空内容的伪元素 */
            position: absolute;  /* 绝对定位 */
            top: 0;  /* 距离顶部0像素 */
            bottom: 0;  /* 距离底部0像素 */
            width: 4px;  /* 设置宽度为4像素 */
            background: var(--accent);  /* 使用 --tea-green 变量设置背景颜色 */
            left: 50%;  /* 距离左边50% */
            transform: translateX(-50%);  /* 水平平移自身宽度的50%，实现居中效果 */
        }
        
        .timeline-item {
            position: relative;  /* 相对定位 */
            width: 50%;  /* 设置宽度为50% */
            padding: 20px;  /* 设置内边距为20px */
            box-sizing: border-box;  /* 确保元素的宽度和高度包括内边距和边框 */
        }
        
        .timeline-item:nth-child(odd) {
            left: 0;  /* 距离左边0像素 */
            padding-right: 70px;  /* 设置右侧内边距为70px */
            text-align: right;  /* 文本右对齐 */
        }
        
        .timeline-item:nth-child(even) {
            left: 50%;  /* 距离左边50% */
            padding-left: 70px;  /* 设置左侧内边距为70px */
        }
        
        .timeline-content {
            background: white;  /* 设置背景颜色为白色 */
            padding: 30px;  /* 设置内边距为30px */
            border-radius: 12px;  /* 设置圆角边框为12px */
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);  /* 添加阴影效果 */
            position: relative;  /* 相对定位，为子元素的绝对定位提供参考 */
        }
        
        .timeline-content::before {
            content: '';  /* 生成一个空内容的伪元素 */
            position: absolute;  /* 绝对定位 */
            width: 20px;  /* 设置宽度为20像素 */
            height: 20px;  /* 设置高度为20像素 */
            background: var(--primary);  /* 使用 --primary-green 变量设置背景颜色 */
            border-radius: 50%;  /* 设置为圆形 */
            top: 40px;  /* 距离顶部40像素 */
        }
        
        .timeline-item:nth-child(odd) .timeline-content::before {
            right: -60px;  /* 距离右侧-60像素 */
        }
        
        .timeline-item:nth-child(even) .timeline-content::before {
            left: -60px;  /* 距离左侧-60像素 */
        }
        
        .timeline-year {
            font-size: 1.8rem;  /* 设置字体大小为1.8倍根元素字体大小 */
            color: var(--primary);  /* 使用 --primary-green 变量设置文字颜色 */
            font-weight: 700;  /* 设置字体粗细为700 */
            margin-bottom: 15px;  /* 设置底部外边距为15px */
        }
        
        .timeline-title {
            font-size: 1.5rem;  /* 设置字体大小为1.5倍根元素字体大小 */
            color: var(--text);  /* 使用 --dark 变量设置文字颜色 */
            margin-bottom: 15px;  /* 设置底部外边距为15px */
        }

       /* 奖牌展示区 */
        .awards-section {
            padding: 40px 5%;  /* 设置上下内边距40px，左右内边距5% */
            background: var(--light-beige); /* 背景 */ 
        }
        
        .awards-container {
            max-width: 800px;  /* 设置最大宽度为1200px */
            margin: 0 auto;  /* 水平居中 */
            text-align: center;  /* 文本居中对齐 */
            position: relative;  /* 相对定位，为子元素绝对定位提供参考 */
        }
        
        .award-display {
            display: flex;  /* 使用flex布局 */
            flex-direction: column;  /* 子元素垂直排列 */
            align-items: center;  /* 子元素垂直居中对齐 */
            gap: 30px;  /* 设置子元素间距为30px */
            margin-top: 40px;  /* 设置上边距为40px */
            padding: 50px;  /* 设置内边距为50px */
            background: white;  /* 设置背景颜色为白色 */
            border-radius: 15px;  /* 设置圆角边框为15px */
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);  /* 添加阴影效果 */
            position: relative;  /* 相对定位 */
            overflow: hidden;  /* 隐藏溢出内容 */
        }
        
        .award-image {
            width: 100%;  /* 宽度占满父容器 */
            max-width: 800px;  /* 设置最大宽度为1200px */
            height: 500px;  /* 设置高度为800px */
            border-radius: 12px;  /* 设置圆角边框为12px */
            overflow: hidden;  /* 隐藏溢出内容 */
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);  /* 添加阴影效果 */
            position: relative;  /* 相对定位 */
        }
        
        .award-image img {
            width: 100%;  /* 宽度占满父容器 */
            height: 100%;  /* 高度占满父容器 */
            object-fit: cover;  /* 保持宽高比填充容器 */
            transition: transform 0.5s ease;  /* 添加变换过渡效果，持续0.5秒 */
        }
        
        .award-image:hover img {
            transform: scale(1.05);  /* 鼠标悬停时图片放大1.05倍 */
        }
        
        .award-badge {
            position: absolute;  /* 绝对定位 */
            top: 20px;  /* 距离顶部20px */
            right: 20px;  /* 距离右侧20px */
            background: var(--accent);  /* 使用强调色变量设置背景颜色 */
            color: var(--dark);  /* 使用深色变量设置文字颜色 */
            font-weight: bold;  /* 设置字体加粗 */
            padding: 10px 20px;  /* 设置内边距：左右20px，上下10px */
            border-radius: 30px;  /* 设置圆角边框为30px */
            transform: rotate(5deg);  /* 旋转5度 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);  /* 添加阴影效果 */
            z-index: 10;  /* 设置堆叠顺序 */
        }
        
        .award-content {
            max-width: 800px;  /* 设置最大宽度为800px */
            text-align: center;  /* 文本居中对齐 */
        }
        
        .award-title {
            font-size: 2.2rem;  /* 设置字体大小为2.2倍根元素字体大小 */
            color: var(--primary-green);  /* 使用主色调变量设置文字颜色 */
            margin-bottom: 20px;  /* 设置下边距为20px */
            font-family: 'Ma Shan Zheng', cursive;  /* 设置字体为 'Ma Shan Zheng'，若不可用则使用手写体 */
            position: relative;  /* 相对定位 */
            display: inline-block;  /* 以行内块级元素显示 */
        }
        
        .award-title:after {
            content: '';  /* 生成一个空内容的伪元素 */
            position: absolute;  /* 绝对定位 */
            bottom: -10px;  /* 距离底部10px */
            left: 50%;  /* 距离左侧50% */
            transform: translateX(-50%);  /* 水平平移自身宽度的50%，实现居中效果 */
            width: 80px;  /* 设置宽度为80px */
            height: 4px;  /* 设置高度为4px */
            background: var(--accent);  /* 使用强调色变量设置背景颜色 */
        }
        
        .award-description {
            font-size: 1.1rem;  /* 设置字体大小为1.1倍根元素字体大小 */
            line-height: 1.8;  /* 设置行高为1.8 */
            color: var(--text);  /* 使用 --dark 变量设置文字颜色 */
            margin-bottom: 25px;  /* 设置下边距为25px */
        }
        /* 新增：媒体报道板块样式 */
                .media-section {
                    padding: 10px 5%;       /* 设置上下内边距为10px，左右内边距为5% */
                    background: var(--light-beige); /* 背景 */
                }
                
                .media-container {
                    max-width: 1200px;      /* 设置最大宽度为1200px */
                    margin: 0 auto;         /* 水平居中 */
                }
                
                .media-grid {
                    display: grid;          /* 使用网格布局 */
                    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自动填充列，每列最小宽度350px，最大宽度为1fr */
                    gap: 30px;              /* 设置网格项间距为30px */
                    margin-top: 50px;       /* 设置上边距为50px */
                }
                
                .media-card {
                    background: white;      /* 设置背景颜色为白色 */
                    border-radius: 12px;    /* 设置圆角边框为12px */
                    overflow: hidden;       /* 隐藏溢出内容 */
                    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 添加阴影效果 */
                    transition: all 0.4s ease; /* 添加所有属性过渡效果，持续0.4秒 */
                    height: 100%;           /* 高度占满父容器 */
                    display: flex;          /* 使用flex布局 */
                    flex-direction: column; /* 子元素垂直排列 */
                }
                
                .media-card:hover {
                    transform: translateY(-10px); /* 鼠标悬停时向上移动10px */
                    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* 鼠标悬停时增强阴影效果 */
                }
                
                .media-image {
                    height: 200px;          /* 设置高度为200px */
                    overflow: hidden;       /* 隐藏溢出内容 */
                }
                
                .media-image img {
                    width: 100%;            /* 宽度占满父容器 */
                    height: 100%;           /* 高度占满父容器 */
                    object-fit: cover;      /* 保持宽高比填充容器 */
                    transition: transform 0.5s ease; /* 添加变换过渡效果，持续0.5秒 */
                }
                
                .media-card:hover .media-image img {
                    transform: scale(1.05); /* 鼠标悬停时图片放大1.05倍 */
                }
                
                .media-content {
                    padding: 25px;          /* 设置内边距为25px */
                    flex-grow: 1;           /* 允许该元素在剩余空间中扩展 */
                    display: flex;          /* 使用flex布局 */
                    flex-direction: column; /* 子元素垂直排列 */
                }
                
                .media-logo-container {
                    display: flex;          /* 使用flex布局 */
                    align-items: center;    /* 垂直居中对齐内容 */
                    margin-bottom: 15px;    /* 设置下边距为15px */
                }
                
                .media-logo {
                    height: 40px;           /* 设置高度为40px */
                    margin-right: 15px;     /* 设置右侧外边距为15px */
                }
                
                .media-source {
                    font-weight: 700;       /* 设置字体粗细为700 */
                    color: var(--primary-green); /* 使用 --primary-green 变量设置文字颜色 */
                    font-size: 1.1rem;      /* 设置字体大小为1.1倍根元素字体大小 */
                }
                
                .media-date {
                    color: #888;            /* 设置文字颜色为灰色 */
                    font-size: 0.9rem;      /* 设置字体大小为0.9倍根元素字体大小 */
                    margin-left: auto;      /* 左外边距自动，实现右对齐 */
                }
                
                .media-title {
                    font-size: 1.4rem;      /* 设置字体大小为1.4倍根元素字体大小 */
                    color: var(--primary);     /* 使用 --dark 变量设置文字颜色 */
                    margin-bottom: 15px;    /* 设置下边距为15px */
                    line-height: 1.4;       /* 设置行高为1.4 */
                }
                
                .media-excerpt {
                    color: var(--text);            /* 设置文字颜色为深灰色 */
                    line-height: 1.7;       /* 设置行高为1.7 */
                    margin-bottom: 20px;    /* 设置下边距为20px */
                    flex-grow: 1;           /* 允许该元素在剩余空间中扩展 */
                }
                
                .read-more {
                    display: inline-flex;   /* 使用行内flex布局 */
                    align-items: center;    /* 垂直居中对齐内容 */
                    color: var(--primary); /* 使用 --primary-green 变量设置文字颜色 */
                    font-weight: 600;       /* 设置字体粗细为600 */
                    text-decoration: none;  /* 去掉文本装饰（如下划线） */
                    transition: all 0.3s ease; /* 添加所有属性过渡效果，持续0.3秒 */
                }
                
                .read-more i {
                    margin-left: 8px;       /* 设置左侧外边距为8px */
                    transition: transform 0.3s ease; /* 添加变换过渡效果，持续0.3秒 */
                }
                
                .read-more:hover {
                    color: var(--secondary); /* 鼠标悬停时文字颜色变为 --secondary 变量的值 */
                }
                
                .read-more:hover i {
                    transform: translateX(5px); /* 鼠标悬停时图标向右移动5px */
                 }

        /* 企业价值观 */
        .values-section {
            padding: 40px 5%; /* 设置上下内边距40px，左右内边距5% */
            background: linear-gradient(to bottom, #f8f5f0, #e8e4dc); /* 设置从上到下的渐变背景 */
        }
        
        .values-grid {
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自动填充列，每列最小300px，最大等宽 */
            gap: 30px; /* 设置网格项间距为30px */
            max-width: 1200px; /* 设置最大宽度为1200px */
            margin: 0 auto; /* 水平居中 */
        }
        
        .value-card {
            background: white; /* 设置卡片背景为白色 */
            border-radius: 12px; /* 设置圆角边框 */
            padding: 40px 30px; /* 设置内边距：上下40px，左右30px */
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 添加阴影效果 */
            text-align: center; /* 文本居中对齐 */
            transition: all 0.3s ease; /* 添加所有属性过渡效果，持续0.3秒 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 隐藏溢出内容 */
        }
        
        .value-card:hover {
            transform: translateY(-8px); /* 鼠标悬停时卡片上移8px */
            box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* 鼠标悬停时增强阴影效果 */
        }
        
        .value-icon {
            width: 80px; /* 设置宽度为80px */
            height: 80px; /* 设置高度为80px */
            background: var(--primary); /* 使用变量设置背景颜色 */
            border-radius: 50%; /* 设置为圆形 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: center; /* 水平居中对齐 */
            margin: 0 auto 25px; /* 水平居中，底部外边距25px */
            font-size: 2rem; /* 设置字体大小为2倍根元素字体大小 */
            color: rgb(252, 250, 250); /* 设置文字颜色为白色 */
        }
        
        .value-card h3 {
            font-family: 'Noto Serif SC', serif; /* 设置字体 */
            color: var(--primary); /* 使用变量设置文字颜色 */
            font-size: 1.6rem; /* 设置字体大小为1.6倍根元素字体大小 */
            margin-bottom: 15px; /* 设置下边距为15px */
        }
        
        .value-card p {
            color: var(--text); /* 设置文字颜色 */
            line-height: 1.7; /* 设置行高为1.7 */
        }






/* 底部区域样式 */
footer {
    background: var(--dark); /* 设置背景颜色为变量 --dark 的值 */
    color: rgba(255,255,255,0.8); /* 设置文字颜色为白色，透明度为0.8 */
    padding: 30px 20px 20px; /* 设置内边距：上60px，左右40px，下30px */
}
.footer-container {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* 每行四个列，每列最小宽度300像素，最大宽度为可用空间的一份 */
    gap: 10px; /* 设置列间距为40px */
    max-width: 1200px; /* 设置最大宽度为1200px */
    margin: 0 auto; /* 居中对齐 */
}
.footer-col h3 {
    color: white; /* 设置标题颜色为白色 */
    font-size: 1.5rem; /* 设置字体大小为1.5倍根元素字体大小 */
    margin-bottom: 10px; /* 设置下边距为25px */
    position: relative; /* 设置定位为相对定位 */
    padding-bottom: 10px; /* 设置下边距填充为10px */
}
.footer-col h3::after {
    content: ''; /* 生成伪元素内容为空 */
    position: absolute; /* 设置绝对定位 */
    bottom: 0; /* 定位到元素的底部 */
    left: 0; /* 定位到元素的左边 */
    width: 50px; /* 设置宽度为50px */
    height: 2px; /* 设置高度为2px */
    background: var(--accent); /* 设置背景颜色为变量 --accent 的值 */
}
	
.footer-links {
    list-style: none; /* 移除默认的列表符号 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 将子元素排列成列方向 */
}

.footer-links li {
    margin-bottom: 10px; /* 设置每个列表项的下边距为15px */
}
.footer-links a {
    color: rgba(255,255,255,0.7); /* 设置链接颜色为白色，透明度为0.7 */
    text-decoration: none; /* 移除文本装饰 */
    transition: color 0.3s ease; /* 设置颜色过渡效果，持续时间0.3秒 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置子元素之间的间距为10px */
}
.footer-links a:hover {
    color: white; /* 鼠标悬停时，链接颜色变为白色 */
}
.copyright {
    text-align: center; /* 设置文本居中对齐 */
    padding-top: 20px; /* 设置上边距填充为20px */
    margin-top: 20px; /* 设置上边距为20px */
    border-top: 1px solid rgba(255,255,255,0.1); /* 设置顶部边框为1px实线，颜色为白色，透明度为0.1 */
}
@viewport {
  width: device-width;
  zoom: 1.0;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 1200px; /* 强制保持桌面版宽度 */
    overflow-x: auto; /* 允许横向滚动 */
  }
  .brand-top, .nav-container {
    min-width: 1200px;
  }
}
/* 防止移动端文字自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 为所有文本元素设置固定大小 */
body, p, h1, h2, h3, h4, h5, h6, 
.nav-item, .contact-item, .slide-content {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}