/* ========== 全局样式重置 ========== */
/* 清除所有元素默认的margin和padding，避免不同浏览器默认样式差异导致布局错乱 */
* {
    margin: 0; /* 清除所有元素外边距 */
    padding: 0; /* 清除所有元素内边距 */
    box-sizing: border-box; /* 盒模型设置为border-box：元素宽度=内容宽+内边距+边框，避免padding导致宽度溢出 */
}

/* 全局文字基础样式：统一页面字体、颜色和行高，提升可读性和视觉一致性 */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体栈：优先微软雅黑（适配中文显示），无则 fallback 到Arial（英文通用字体） */
    color: #333; /* 文字主色：深灰色（比纯黑柔和，降低视觉疲劳，提升阅读舒适度） */
    line-height: 1.6; /* 行高：1.6倍字号，优化长文本阅读体验，避免文字拥挤 */
}

/* ========== 导航栏样式 ========== */
/* 导航栏默认样式：页面顶部横向导航，白色背景+浅灰边框分隔 */
.nav {
	position: fixed; /* 默认固定在顶部，无需滚动触发 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* 提高层级，避免被遮挡 */
    background: #fff; /* 导航栏背景色：白色（简洁清晰，突出导航内容） */
    border-bottom: 1px solid #eee; /* 底部边框：1px浅灰色，视觉上分隔导航与下方内容 */
	min-height: 70px; /* 固定最小高度，确保logo和导航项垂直居中 */
     padding: 8px 8px; /* 固定内边距，避免滚动时变化 */
    text-align: center; /* 导航内容水平居中 */
    transition: all 0.3s ease;
	width: 100%;
    box-sizing: border-box;
}

/* 导航列表布局：flex实现水平排列，确保导航项均匀分布且垂直居中 */
.nav ul {
    list-style: none; /* 清除列表默认的圆点标记，避免影响布局美观 */
    display: flex; /* 启用flex布局，使列表项（li）水平排列 */
    align-items: center; /* 子元素（导航项a标签）垂直居中对齐，避免高低不一 */
    justify-content: center; /* 子元素水平居中分布，确保导航整体居中 */
    width: 100%; /* 占满父容器宽度，避免内容偏移 */
}

/* 导航列表项分隔线：通过伪元素添加蓝色底部边框，模拟导航项分隔效果 */
.nav li::before {
    content: ""; /* 伪元素必须有content属性（空值也可），否则无法显示 */
    display: inline-block; /* 转为行内块元素，支持margin设置（控制间距） */
    margin: 0 25px; /* 左右间距25px，控制导航项之间的距离，避免拥挤 */
    color: #0066cc; /* 颜色：与导航活跃状态呼应，保持风格统一 */
    border-bottom: 2px solid #0066cc; /* 蓝色底部边框，强化导航项分隔效果 */
    padding-bottom: 0px; /* 底部内边距：避免边框紧贴文字，提升美观度 */
}

/* 导航链接基础样式：统一文字大小、颜色，清除下划线，提升辨识度 */
.nav a {
    text-decoration: none; /* 清除链接默认的下划线，避免视觉干扰 */
    color: #333; /* 链接文字主色：深灰色（固定不变，确保默认状态清晰） */
    font-size: 18px; /* 文字大小：18px，确保导航项清晰可读 */
    font-weight: 700; /* 文字加粗：突出导航项，提升视觉辨识度 */
    transition: color 0.2s; /* 文字颜色过渡动画：hover时变色更平滑，提升交互体验 */
}
/* 网站首页（当前页）特殊样式，确保颜色固定 */
.nav .activea {
    color:#023C7A; 
    /* 可额外添加样式突出当前页，如： */
    /* border-bottom: 2px solid #006CFF; */
}

/* 导航链接hover效果：鼠标悬停时变色，增强交互反馈，提示用户可点击 */
.nav a:hover {
    color: #023C7A; /* 悬停色：蓝色，与品牌色呼应，明确可点击状态 */
}

/* LOGO样式：独立设计，通过背景图展示品牌标识，隐藏文字（SEO友好） */
.nav .logo {
    width: 120px; /* LOGO固定宽度：确保品牌标识大小一致 */
    height: 55px; /* LOGO固定高度：与导航栏高度匹配 */
    background-image: url("imgge/盛元自动化LOGO.png"); /* LOGO图片路径（需替换为实际图片路径） */
    background-size: contain; /* 背景图自适应容器大小，不拉伸变形 */
    background-repeat: no-repeat; /* 背景图不重复显示，避免错乱 */
    background-position: center; /* 背景图居中显示，确保LOGO完整展示 */
    text-indent: -9999px; /* 文字向左缩进9999px，隐藏文字（仅显示背景图，同时保留文字SEO） */
    overflow: hidden; /* 防止文字溢出容器，影响布局 */
    display: inline-block; /* 转为行内块元素，支持宽高设置 */
    margin-left: -100px; /* 左偏移100px：调整LOGO位置，与其他导航项区分，提升布局美观度 */
}

/* 导航栏滚动固定样式：滚动时固定在顶部，缩小高度并添加阴影，增强层次感 */
#mainNav.fixed {
    position: fixed; /* 固定定位：导航栏粘在视口顶部，不随滚动消失 */
    top: 0; /* 距离顶部0px：固定在最上方，不遮挡内容 */
    left: 0; /* 距离左侧0px：确保宽度占满屏幕 */
    right: 0; /* 距离右侧0px：确保宽度占满屏幕 */
    z-index: 999; /* 层级：999（高于其他所有元素，避免被遮挡） */
    padding: 8px 8px; /* 和默认状态一致 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影：增强与下方内容的层次感，避免视觉扁平 */
	width: 100%;
    box-sizing: border-box;
}
/* 基础样式设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


/* ========== 轮播图样式 ========== */
/* 轮播图容器：限制显示区域，隐藏超出部分，作为子元素（图片、圆点）的定位容器 */
.banner-carousel {
    width: 100%; /* 宽度占满屏幕：确保轮播图全屏展示 */
    height: 500px; /* 固定高度：确保页面布局稳定，避免轮播图高度波动 */
    overflow: hidden; /* 隐藏超出容器的图片部分，实现轮播裁剪效果 */
    position: relative; /* 相对定位：为圆点控制器提供绝对定位的基准 */
}

/* 轮播图片容器：flex横向排列所有图片，通过transform位移实现切换效果 */
.banner-slides {
    display: flex; /* 启用flex布局，使所有轮播图水平排列 */
    width: 500%; /* 总宽度=图片数量×100%（5张图=500%，若增减图片需同步修改） */
    transition: transform 0.5s ease-in-out; /* 位移过渡动画：0.5秒平滑切换，提升视觉体验 */
    height: 100%; /* 高度占满父容器，确保图片垂直填满轮播区域 */
    align-items: center; /* 图片垂直居中，避免图片上下偏移 */
}

/* 单个轮播图片样式：控制图片尺寸，确保填满容器且不变形 */
.banner-item {
    width: 20%; /* 单张图片宽度=总宽度/图片数量（5张图=20%，若增减图片需同步修改） */
    height: auto; /* 高度自适应：保持图片原始比例，避免拉伸变形 */
    object-fit: cover; /* 图片缩放规则：覆盖容器，裁剪超出部分（保证图片填满容器且不变形） */
    max-height: 500px; /* 限制最大高度：避免图片超出轮播容器高度 */
    margin: 0 auto; /* 水平居中：优化图片显示效果，避免贴边 */
}

/* 轮播圆点控制器容器：定位在轮播图底部中央，方便用户手动切换 */
.banner-dots {
    position: absolute; /* 绝对定位：基于轮播容器（banner-carousel）定位 */
    bottom: 20px; /* 距离底部20px：避免圆点贴边，提升操作舒适度 */
    left: 50%; /* 水平居中第一步：左边缘在父容器50%位置 */
    transform: translateX(-50%); /* 水平居中第二步：向左偏移自身宽度的50%，实现完全居中 */
    display: flex; /* flex布局：使圆点水平排列 */
    gap: 13px; /* 圆点之间间距13px：避免圆点拥挤，提升辨识度 */
    z-index: 1; /* 层级1：确保圆点在图片上方，可见且可点击 */
}

/* 单个圆点样式：默认状态，提示用户可点击 */
.dot {
    width: 26px; /* 圆点宽度：确保圆点大小适中，便于点击 */
    height: 8px; /* 圆点高度：扁圆形设计，更美观且不遮挡轮播图内容 */
    border-radius: 5px; /* 圆角处理：使圆点形状圆润，提升视觉体验 */
    background: rgba(0, 102, 204, 0.5); /* 背景色：半透明蓝色（不遮挡轮播图内容，同时明确可点击） */
    cursor: pointer; /* 鼠标悬停显示手型光标：提示用户该元素可点击 */
    transition: background 0.3s; /* 背景色过渡动画：切换激活状态时更平滑 */
}

/* 激活状态圆点：指示当前显示的图片，用纯色突出，明确当前状态 */
.dot.active {
    background: #0067F4; /* 激活色：纯蓝色，与默认状态的半透明蓝色形成对比，明确当前显示的图片 */
}

/* ========== 产品展示模块样式（核心：每行3个产品） ========== */
/* 产品卡片图片悬停放大效果 */
.product-item {
    overflow: hidden;
}

.product-item img {
    transition: transform 0.5s ease;
}

.product-item:hover img {
    transform: scale(1.05);
}
/* 按钮悬停效果增强 */
.product-list {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.products::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
}

.products:hover::after {
    left: 100%;
}
/* 产品模块外层容器：控制模块间距和标题对齐，明确区域边界 */
.products {
    padding: 20px 0; /* 上下内边距20px：与上下模块保持距离，避免内容拥挤 */
    text-align: center; /* 模块标题水平居中：提升页面可读性 */
}

/* 产品模块标题：突出主题，与产品列表区分，明确区域功能 */
.products h2 {
    font-size: 30px; /* 标题大小：30px，突出主题，吸引用户注意 */
    margin-bottom: 20px; /* 标题下方间距20px：与产品列表分隔，避免内容粘连 */
}

/* 产品列表容器：flex布局，实现每行3个产品+自动换行，适配不同屏幕尺寸 */
.product-list {
    display: flex; /* 启用flex布局：核心布局方式 */
    justify-content: center; /* 产品卡片整体水平居中：确保布局整齐 */
    flex-wrap: wrap; /* 自动换行：屏幕宽度不足时，产品卡片自动换行，适配移动端 */
    max-width: 1200px; /* 限制最大宽度：避免大屏幕上产品过于分散，保持布局紧凑 */
    margin: 0 auto; /* 容器自身水平居中：确保产品区域在页面中央 */
    padding: 0 15px; /* 左右预留15px间距：避免产品贴边，提升视觉体验 */
}

/* 单个产品卡片：控制宽度和样式，确保每行3个，且样式统一 */
.product-item {
    width: calc(33.333% - 30px); /* 关键宽度计算：1/3宽度 - 左右margin总和（15px×2），确保每行3个不溢出 */
    margin: 15px; /* 卡片间距：上下左右15px，控制卡片之间的距离，避免拥挤 */
    border: 1px solid #eee; /* 卡片边框：1px浅灰色，区分单个产品卡片，提升层次感 */
    border-radius: 30px; /* 卡片圆角：20px，优化外观，更显柔和美观 */
    padding: 20px; /* 卡片内边距：20px，内容与边框保持距离，避免贴边 */
    text-align: left; /* 卡片内文字左对齐：符合中文阅读习惯，提升可读性 */
    min-width: 260px; /* 最小宽度250px：避免小屏幕上卡片过度压缩变形，保证内容完整显示 */
}

/* 产品图片样式：填满卡片宽度，固定高度确保所有卡片对齐 */
.product-item img {
    width: 100%; /* 图片宽度占满卡片：确保图片与卡片宽度一致 */
    height: 228px; /* 固定高度：确保所有产品卡片高度一致，布局整齐 */
    object-fit: cover; /* 图片缩放规则：覆盖容器，裁剪超出部分（保证图片不变形且填满容器） */
    margin-bottom: 8px; /* 图片下方间距8px：与产品名称分隔，避免内容粘连 */
}

/* 产品名称：突出显示，作为卡片核心信息，吸引用户注意 */
.product-item h3 {
    font-size: 17px; /* 名称大小17px：突出产品名，同时不占用过多空间 */
    margin-bottom: 8px; /* 名称下方间距8px：与产品描述分隔 */
}

/* 产品描述：次要信息，样式弱化，避免喧宾夺主，同时传递核心卖点 */
.product-item p {
    font-size: 14px; /* 描述大小14px：小于产品名称，明确主次关系 */
    color: #666; /* 颜色：中灰色，区分主次信息，避免视觉干扰 */
    margin-bottom: 8px; /* 描述下方间距8px：与详情链接分隔 */
}

/* 产品详情链接：引导用户点击了解更多，样式统一且明确 */
.product-item a {
    text-decoration: none; /* 清除下划线：避免视觉干扰 */
    color: #0066cc; /* 链接色：蓝色，与品牌色呼应，明确可点击状态 */
}

/* ========== 关于我们模块样式 ========== */
/* 关于我们外层容器：浅灰色背景，与其他模块区分，突出内容区域 */
.about {
    padding: 60px 0; /* 上下内边距60px：增加模块存在感，避免内容拥挤 */
    background: #f5f5f5; /* 背景色：浅灰色，与白色主内容区分，突出“关于我们”区域 */
    margin: 0 auto; /* 整体居中：确保模块在页面中央 */
}

/* 关于我们内容容器：限制最大宽度，文字与图片左右布局，适配不同屏幕 */
.about-content {
    max-width: 1200px; /* 最大宽度1200px：避免大屏幕下内容过宽，提升阅读体验 */
    margin: 0 auto; /* 容器水平居中：确保内容在页面中央 */
    display: flex; /* flex布局：文字与图片左右排列 */
    flex-wrap: wrap; /* 自动换行：小屏幕下文字与图片垂直排列，适配移动端 */
    align-items: center; /* 文字与图片垂直居中对齐：提升布局整齐度 */
    padding-left: 250px; /* 左侧间距250px：调整整体位置，避免内容贴边 */
}

/* 关于我们文字区域：展示公司简介和优势，传递品牌价值 */
.about-text {
    flex: 1; /* 文字区域占比：自动分配剩余空间，与图片平分宽度 */
    padding: 0 40px; /* 左右内边距40px：与图片保持距离，避免内容粘连 */
}

/* 关于我们标题：突出区域主题，明确内容方向 */
.about-text h2 {
    font-size: 28px; /* 标题大小28px：突出主题，吸引用户注意 */
    margin-bottom: 20px; /* 标题下方间距20px：与正文分隔，避免内容拥挤 */
}

/* 关于我们正文：优化长文本可读性，传递公司核心信息 */
.about-text p {
    font-size: 16px; /* 正文大小16px：便于阅读长文本 */
    line-height: 1.8; /* 行高1.8：提升长文本阅读体验，避免文字拥挤 */
    margin-bottom: 15px; /* 段落之间间距15px：区分不同内容模块，提升可读性 */
}

/* 关于我们图片区域：通过图片直观展示公司实力，增强品牌信任度 */
.about-img {
    flex: 1; /* 图片区域占比：与文字区域平分宽度 */
    display: flex; /* flex布局：图片在区域内居中显示 */
    align-items: center; /* 图片垂直居中 */
    justify-content: center; /* 图片水平居中 */
}

/* 关于我们图片：控制尺寸，确保清晰展示，同时不占用过多空间 */
.about-img img {
    width: 250px; /* 图片固定宽度：确保图片大小适中 */
    max-width: 250px; /* 最大宽度限制：避免图片过大超出区域 */
    height: auto; /* 高度自适应：保持图片原始比例，避免拉伸变形 */
}

/* ========== 联系我们模块样式 ========== */
/* 联系我们外层容器：控制间距和标题对齐，明确区域功能 */
.contact {
    padding: 60px 0; /* 上下内边距60px：增加模块存在感，避免内容拥挤 */
    text-align: center; /* 模块标题居中：提升页面可读性 */
}

/* 联系我们标题：突出主题，明确区域功能，吸引用户注意 */
.contact h2 {
    font-size: 28px; /* 标题大小28px：突出主题 */
    margin-bottom: 40px; /* 标题下方间距40px：与联系方式分隔，避免内容拥挤 */
}

/* 联系方式容器：限制最大宽度，确保信息布局合理，便于阅读 */
.contact-info {
    max-width: 800px; /* 最大宽度800px：避免内容过宽，提升阅读体验 */
    margin: 0 auto; /* 容器居中：确保联系方式在页面中央 */
    text-align: left; /* 联系方式左对齐：符合中文阅读习惯，便于阅读列表式信息 */
}

/* 联系信息项：控制每项信息的间距和大小，确保信息清晰可读 */
.contact-info p {
    font-size: 16px; /* 文字大小16px：确保信息清晰可读 */
    margin-bottom: 15px; /* 每项信息之间间距15px：区分不同联系方式，提升可读性 */
}

/* 联系信息标签（如“公司名称：”）：突出标签，区分标签与内容，提升可读性 */
.contact-info p strong {
    color: #0066cc; /* 标签色：蓝色，与品牌色呼应，明确标签与内容的区分 */
}

/* ========== 页脚模块样式 ========== */
/* 页脚外层容器：深色背景，与主内容区分，突出底部信息 */
.footer {
    background-color: #333; /* 背景色：深灰色（与白色主内容形成对比，突出页脚） */
    color: #fff; /* 文字色：白色（与深色背景对比，确保可读） */
    padding: 10px 0; /* 上下内边距40px：控制页脚高度，避免内容拥挤 */
}

/* 页脚内容容器：限制宽度并居中，确保内容布局合理 */
.footer-container {
    max-width: 1200px; /* 最大宽度1200px：避免内容过宽，提升阅读体验 */
    margin: 0 auto; /* 容器居中：确保页脚内容在页面中央 */
    padding: 0 20px; /* 左右内边距20px：避免内容贴边，提升视觉体验 */
}

/* 页脚LOGO区域：重复展示品牌，强化用户记忆，提升品牌辨识度 */
.footer-logo {
    text-align: center; /* LOGO和文字居中：突出品牌标识 */
    margin-bottom: 30px; /* 下方间距100px：与导航区域分隔，避免内容拥挤 */
    margin-left: 0px; /* 左偏移20px：调整位置，提升布局美观度 */
    margin-top: 15px; /* 上偏移15px：调整位置，提升布局美观度 */
}

/* 页脚LOGO图片：尺寸小于顶部LOGO，符合页脚次要地位，避免喧宾夺主 */
.footer-logo img {
    width: 80px; /* LOGO宽度80px：小于顶部LOGO，符合页脚次要视觉地位 */
    margin-bottom: 0px; /* 图片下方间距20px：与品牌英文名分隔 */
}

/* 页脚品牌英文名：辅助展示品牌信息，提升品牌国际化形象 */
.footer-logo p {
    font-size: 12px; /* 文字大小14px：次要信息，尺寸适中 */
}

/* 页脚多列导航容器：分类展示链接，方便用户快速跳转，提升用户体验 */
.footer-nav {
    display: flex; /* flex布局：多列水平排列 */
    flex-wrap: wrap; /* 自动换行：小屏幕下列垂直排列，适配移动端 */
    justify-content: space-between; /* 列之间均匀分布：确保布局整齐 */
    margin-bottom: 20px; /* 下方间距30px：与版权区域分隔，避免内容拥挤 */
}

/* 页脚导航列：控制每列宽度和间距，确保布局整齐 */
.nav-column {
    flex: 1; /* 每列自动分配宽度：确保列宽均匀 */
    min-width: 150px; /* 最小宽度150px：避免屏幕过窄时列宽过小，影响阅读 */
    margin-bottom: 20px; /* 换行后列之间间距20px：避免拥挤 */
}

/* 导航列标题：突出分类主题，明确列内链接用途 */
.nav-column h4 {
    font-size: 16px; /* 标题大小16px：突出分类，便于识别 */
    margin-bottom: 15px; /* 标题下方间距15px：与链接列表分隔 */
    font-weight: bold; /* 标题加粗：突出分类主题，提升辨识度 */
}

/* 导航列列表：清除默认列表样式，避免影响布局美观 */
.nav-column ul {
    list-style: none; /* 清除列表默认圆点标记 */
}

/* 导航列列表项：控制项之间的间距，确保布局整齐 */
.nav-column ul li {
    margin-bottom: 8px; /* 列表项之间间距8px：避免拥挤，提升可读性 */
}

/* 导航列链接：默认状态，次要信息弱化处理，避免喧宾夺主 */
.nav-column ul li a {
    color: #ccc; /* 链接色：浅灰色（次要信息，与深色背景协调） */
    text-decoration: none; /* 清除下划线：避免视觉干扰 */
    font-size: 14px; /* 文字大小14px：次要信息，尺寸适中 */
    transition: color 0.3s; /* 颜色过渡动画：hover时变色更平滑 */
}

/* 导航列链接hover效果：增强交互反馈，提示用户可点击 */
.nav-column ul li a:hover {
    color: #006CFF; /* 悬停色：蓝色，与品牌色呼应，明确可点击状态 */
}

/* 页脚版权信息区域：声明版权、备案信息，符合网站合规要求，同时提供快速链接 */
.footer-copyright {
    text-align: center; /* 文字居中：提升页面整洁度 */
    padding-top: 20px; /* 顶部内边距20px：与导航区域分隔，同时为边框预留空间 */
    border-top: 1px solid #555; /* 顶部边框：1px深灰色，视觉上分隔导航与版权区域 */
}

/* 版权文字：次要信息，尺寸较小，避免占用过多视觉空间 */
.footer-copyright p {
    font-size: 12px; /* 文字大小12px：版权信息为次要内容，尺寸适中 */
    margin-bottom: 10px; /* 段落之间间距10px：区分不同版权信息 */
    color: #ccc; /* 文字色：浅灰色，与深色背景协调 */
}

/* 页脚快速链接容器：辅助导航，提供额外跳转入口，提升用户体验 */
.footer-links {
    font-size: 12px; /* 链接文字大小12px：次要导航，尺寸适中 */
}

/* 页脚快速链接：默认状态，次要信息弱化处理 */
.footer-links a {
    color: #ccc; /* 链接色：浅灰色 */
    text-decoration: none; /* 清除下划线：避免视觉干扰 */
    margin: 0 5px; /* 链接之间间距5px：避免拥挤，提升可读性 */
}

/* 页脚快速链接hover效果：增强交互反馈，提示用户可点击 */
.footer-links a:hover {
    color: #006CFF; /* 悬停色：蓝色，与品牌色呼应 */
}
/* 移动端导航适配 */
@media (max-width: 768px) {
    .nav ul {
        flex-wrap: wrap; /* 导航项换行 */
        padding: 0 10px;
    }
    .nav li {
        margin: 5px 0;
    }
    .nav li::before {
        display: none; /* 隐藏分隔线 */
    }
    .nav .logo {
        margin-left: 0; /* 重置LOGO偏移 */
        margin-bottom: 10px;
    }
    /* 轮播图高度适配 */
    .banner-carousel {
        height: 200px; /* 移动端轮播图高度减小 */
    }
    /* 产品卡片适配 */
    .product-item {
        width: 100%; /* 移动端产品卡片占满宽度 */
        margin: 10px 0;
    }
    /* 关于我们模块适配 */
    .about-content {
        padding-left: 0; /* 移除左侧间距 */
        flex-direction: column; /* 文字和图片垂直排列 */
    }
    .about-text {
        padding: 0 20px;
    }
}