/* 
全局样式重置：不同浏览器对元素有默认样式（如margin、padding），统一重置可避免跨浏览器显示差异 
box-sizing: border-box 确保元素宽度=内容宽+内边距+边框，避免padding导致宽度异常
*/
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 彻底禁止横向滚动 */
}
* {
    margin: 0; /* 清除所有元素默认外边距 */
    padding: 0; /* 清除所有元素默认内边距 */
    box-sizing: border-box; /* 盒模型设置为border-box，便于布局计算 */
}

/* 全局文字基础样式：统一页面文字风格，提升可读性和一致性 */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif; /* 优先使用微软雅黑（适配中文），无则 fallback 到Arial */
    color: #333; /* 全局文字颜色：深灰色（比纯黑柔和，降低视觉疲劳） */
    line-height: 1.6; /* 行高：文字行间距为字号的1.6倍，便于阅读长文本 */
}

/* 
导航栏基础样式（默认状态）：
- 通过padding控制初始高度，默认上下内边距25px
- 基础样式确保导航栏在页面顶部正常显示
*/
.nav {
    background: #fff; /* 导航栏背景色：白色（简洁清晰，突出内容） */
    border-bottom: 1px solid #eee; /* 底部边框：1px浅灰色（视觉上分隔导航与下方内容） */
    padding: 8px; /* 初始上下内边距25px（控制导航栏默认高度），左右0 */
    text-align: center; /* 导航内容水平居中 */
    transition: all 0.3s ease; /* 所有样式变化添加过渡动画（0.3秒），确保收放过程平滑 */
}

/* 导航列表布局：通过flex实现水平排列，确保元素垂直居中 */
.nav ul {
    list-style: none; /* 清除列表默认圆点标记 */
    display: flex; /* 启用flex布局，使列表项水平排列 */
    align-items: center; /* 子元素（导航项）垂直居中（关键：确保收放时元素不偏移） */
    justify-content: center; /* 子元素水平居中分布 */
    width: 100%; /* 占满父容器宽度，避免内容偏移 */
}

/* 导航列表项样式：控制项之间的间距，确保布局宽松不拥挤 */
.nav li::before{
	content:"";
    display: inline-block; /* 转为行内块元素，支持水平排列和margin设置 */
    margin: 0 25px; /* 左右margin15px（固定不变，控制导航项间距） */
	color: #0066cc; /* 文字颜色：蓝色（区分当前页） */
    border-bottom: 2px solid #0066cc; /* 底部边框：2px蓝色（强化当前页标识） */
    padding-bottom: 0px; /* 底部内边距5px（避免边框紧贴文字） */
	
}
*.nav li:hover::bofore{
	display:block;
	
}

/* 导航链接基础样式：统一文字大小和颜色，增强可读性 */
.nav a {
    text-decoration: none; /* 清除链接默认下划线 */
    color: #333; /* 链接文字颜色：深灰色（固定不变） */
    font-size: 18px; /* 链接文字大小：18px（固定不变，确保清晰） */
    font-weight: 700; /* 文字加粗（固定不变，突出导航项） */
    transition: color 0.2s; /* 文字颜色过渡动画（hover时变色更平滑） */
}
/* 关于我们（当前页）特殊样式，确保颜色固定 */
.nav .gywm {
    color:#023C7A; 
    /* 可额外添加样式突出当前页，如： */
    /* border-bottom: 2px solid #006CFF; */
}


/* 导航链接hover效果：鼠标悬停时变色，增强交互反馈 */
.nav a:hover {
    color:#023C7A; /* hover时文字变为蓝色，提示可点击 */
}

/* 
LOGO样式：独立设计，确保品牌标识清晰
- 尺寸固定，收放时不缩放（仅导航栏整体高度变化）
- 通过背景图展示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; /* 背景图居中显示 */
    text-indent: -9999px; /* 文字向左缩进9999px（隐藏文字，仅显示背景图） */
    overflow: hidden; /* 防止文字溢出容器 */
    display: inline-block; /* 转为行内块，支持宽高设置 */
    margin-left: -100px; /* 左偏移100px（调整LOGO位置，与其他导航项区分） */
}

/* 当前页导航项样式：通过颜色和边框突出显示当前所在页面 */
/*.nav .activea {
    color: #0066cc; /* 文字颜色：蓝色（区分当前页） */
    /*border-bottom: 2px solid #0066cc; /* 底部边框：2px蓝色（强化当前页标识） */
    /*padding-bottom: 0px; /* 底部内边距5px（避免边框紧贴文字）
  }*/

/* 
导航栏滚动收放样式（核心效果）：
- 滚动时固定在顶部，同时缩小高度（通过减少padding实现）
- 添加阴影增强层次感，确保覆盖下方内容
*/
#mainNav.fixed {
    position: fixed; /* 固定定位：导航栏粘在视口顶部，不随滚动消失 */
    top: 0; /* 距离顶部0px（固定在最上方） */
    left: 0; /* 距离左侧0px */
    right: 0; /* 距离右侧0px（确保宽度占满屏幕） */
    z-index: 999; /* 层级：999（确保在所有内容上方，不被遮挡） */
    padding: 10px 0; /* 核心调整：上下内边距从25px减为10px（总高度缩小30px） */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影（增强与下方内容的层次感） */
    animation: navShrink 0.3s ease; /* 收放动画：0.3秒内从初始状态过渡到收放状态 */
}

/* 导航栏收放动画关键帧：定义从初始状态到收放状态的过渡效果 */
/*@keyframes navShrink {
    from {
        padding: 25px 0; /* 初始状态：原高度 */
        /*opacity: 0.8; /* 初始透明度：80%（略微透明） */
   /* }
    to {
        padding: 10px 0; /* 收放后状态：缩小高度 */
      /*  opacity: 1; /* 结束透明度：100%（完全不透明） */
    /*}
}

/* 
轮播图样式：控制轮播容器、图片和切换圆点的外观
- 固定高度，确保页面布局稳定
- 通过overflow隐藏超出部分，实现图片切换视觉效果
*/
.banner-carousel {
    width: 100%; /* 轮播图宽度占满屏幕 */
    height: 500px; /* 轮播图固定高度（可根据需求调整） */
    overflow: hidden; /* 隐藏超出容器的图片部分（实现轮播裁剪） */
    position: relative; /* 相对定位：作为子元素（圆点）的定位容器 */
	/*display: flex; /* 新增：启用flex布局 */
    /*align-items: center; /* 新增：子元素垂直居中 */
}



/* 
关于我们模块样式：介绍公司信息，增强品牌信任
- 浅灰色背景，与其他模块区分
- 文字与图片左右布局，信息展示更清晰
*/
.about {
	
    padding: 160px 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宽度 */
    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; /* 顶部边框：深灰色（视觉上分隔导航与版权） */
}

/* 版权文字样式：次要信息，尺寸较小 */
.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; /* 悬停时颜色：蓝色 */
}

/* 手机端适配：宽度≤768px */
@media (max-width: 768px) {
    /* 禁止横向滚动 */
    html, body {
        overflow-x: hidden;
    }

    /* 导航栏适配：改为垂直排列 */
    .nav ul {
        flex-direction: column; /* 列表项垂直显示 */
        padding: 10px 0;
    }

    .nav li {
        margin: 10px 0 !important; /* 调整li间距，去掉左右大间距 */
    }

    .nav li::before {
        display: none; /* 隐藏li前的伪元素，避免干扰 */
    }

    .nav .logo {
        margin-left: 0; /* 重置LOGO偏移 */
        margin-bottom: 10px;
    }

    /* 关于我们模块：去掉左侧大间距，适配手机宽度 */
    .about-content {
        padding-left: 0 !important;
        padding: 0 20px; /* 左右留白 */
        flex-direction: column; /* 文字+图片垂直排列 */
    }

    .about-text, .about-img {
        padding: 0;
        margin-bottom: 20px;
    }

    /* 页脚导航：改为两列，避免挤在一起 */
    .footer-nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nav-column {
        min-width: 100%;
        margin-bottom: 20px;
    }

    /* 联系我们信息：适配手机宽度 */
    .contact-info {
        padding: 0 20px;
    }
}