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

  /* 优化移动端导航适配，避免布局错乱 */
  @media (max-width: 768px) {
    .nav ul {
      flex-wrap: wrap;
    }
    .nav li::before {
      display: none;
    }
    .nav .logo {
      margin-left: 0;
      margin-bottom: 10px;
    }
  }

/* 全局文字基础样式：统一页面字体、颜色和行高，提升可读性和视觉一致性 */
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: 12px 8px; /* 固定内边距，避免滚动时变化 */
    text-align: center; /* 导航内容水平居中 */
    transition: all 0.3s ease;
	
}

/* 导航列表布局：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 .cpzx {
    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: 12px 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;
}

/* 图片加载过渡效果 */
img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

img.loading {
    opacity: 0.5;
}

/* 产品卡片图片悬停放大效果 */
.product-img-container {
    overflow: hidden;
}

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

.product-img-container:hover img {
    transform: scale(1.05);
}

/* 按钮悬停效果增强 */
.btn-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::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;
}

.btn-primary:hover::after {
    left: 100%;
}

/* 导航链接下划线动画 */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #165DFF;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 卡片阴影层次 */
.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

}

.card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 分类菜单交互效果 */
.category-item {
    position: relative;
    transition: all 0.3s ease;
}

.category-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #165DFF;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.category-item:hover::before {
    transform: scaleY(1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* 移动端产品卡片高度统一 */
    .product-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .product-card .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
/* ========== 页脚模块样式 ========== */
/* 页脚外层容器：深色背景，与主内容区分，突出底部信息 */
.footer {
    background-color: #333; /* 背景色：深灰色（与白色主内容形成对比，突出页脚） */
    color: #fff; /* 文字色：白色（与深色背景对比，确保可读） */
    padding: 15px 0; /* 上下内边距40px：控制页脚高度，避免内容拥挤 */
}

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

/* 页脚LOGO区域：重复展示品牌，强化用户记忆，提升品牌辨识度 */
.footer-logo {
	width: 100%; /* 关键：让LOGO容器占满页脚宽度 */
    text-align: center;
    margin: 10px auto 30px; /* 左右边距设为auto，保持居中 */
    margin-left: 0px; /* 如需微调，使用正边距而非负边距 */
    /* 或 */
    /*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：与品牌英文名分隔 */
	display: inline-block; /* 行内块元素，受text-align影响 */
    margin: 0 auto; /* 双重保障：图片自身居中 */
}

/* 页脚品牌英文名：辅助展示品牌信息，提升品牌国际化形象 */
.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; /* 悬停色：蓝色，与品牌色呼应 */
}