/* ==============================================
   全局基础样式
   作用：定义页面整体的基础样式，如字体、颜色、盒模型等
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一盒模型计算方式 */
}

body {
    font-family: "Microsoft YaHei", sans-serif; /* 主体字体，兼容中文 */
    color: #333; /* 主文本颜色 */
    line-height: 1.6; /* 行高，提升可读性 */
}

a {
    text-decoration: none; /* 去掉链接下划线 */
    color: #333; /* 链接默认颜色 */
    transition: all 0.3s ease; /* 所有交互效果过渡动画 */
}

a:hover {
    color: #0066cc; /* 链接hover时的高亮颜色 */
}

/* ==============================================
   导航栏样式
   作用：定义顶部导航栏的样式，包含PC端和移动端适配
   ============================================== */
.navbar {
    background-color: #fff; /* 导航栏背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 导航栏阴影，提升层次感 */
    padding: 15px 0; /* 上下内边距 */
    position: sticky; /* 粘性定位，滚动时固定在顶部 */
    top: 0; /* 固定在顶部 */
    z-index: 999; /* 提高层级，避免被其他元素遮挡 */
}

.navbar-brand img {
    height: 50px; /* LOGO高度 */
}

.nav-link {
    font-size: 16px; /* 导航文字大小 */
    font-weight: 500; /* 导航文字加粗 */
    margin: 0 15px; /* 导航项之间的间距 */
}

.nav-link.active {
    color: #0066cc !important; /* 选中状态的导航文字颜色（强制覆盖Bootstrap默认样式） */
}

/* ==============================================
   轮播图样式
   作用：定义首页轮播图的尺寸、内容排版等
   ============================================== */
.carousel-item {
    height: 600px; /* 轮播图整体高度 */
}

.carousel-item img {
    height: 100%; /* 图片高度铺满轮播容器 */
    object-fit: cover; /* 图片等比例缩放，裁剪多余部分 */
}

.carousel-caption {
    bottom: 150px; /* 文字内容距离底部的距离 */
    background: rgba(0,0,0,0.5); /* 半透明背景，提升文字可读性 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
}

.carousel-caption h5 {
    font-size: 36px; /* 轮播标题大小 */
    margin-bottom: 15px; /* 标题与描述的间距 */
}

.carousel-caption p {
    font-size: 18px; /* 轮播描述文字大小 */
}

/* ==============================================
   通用模块标题样式
   作用：统一所有模块（品牌、产品、新闻等）的标题样式
   ============================================== */
.section-title {
    text-align: center; /* 标题居中 */
    margin: 60px 0 40px; /* 上下外边距，控制模块间距 */
    position: relative; /* 为伪元素定位做准备 */
}

.section-title h2 {
    font-size: 32px; /* 模块标题大小 */
    font-weight: 700; /* 标题加粗 */
    color: #333; /* 标题颜色 */
}

/* 标题下方的装饰线 */
.section-title::after {
    content: ""; /* 伪元素必须有content */
    display: block; /* 转为块级元素 */
    width: 80px; /* 装饰线宽度 */
    height: 3px; /* 装饰线高度 */
    background-color: #0066cc; /* 装饰线颜色 */
    margin: 15px auto; /* 居中显示 */
}

/* ==============================================
   品牌中心模块 - 多品牌展示
   作用：定义品牌中心的整体布局和多品牌卡片样式
   ============================================== */
.brand-section {
    background-color: #f8f9fa; /* 品牌模块背景色 */
    padding: 80px 0; /* 上下内边距 */
    margin: 40px 0; /* 上下外边距 */
}

/* 品牌整体理念区域 */
.brand-vision {
    text-align: center; /* 文字居中 */
    max-width: 800px; /* 最大宽度，避免文字过长 */
    margin: 0 auto 60px; /* 居中，底部外边距 */
    padding: 0 20px; /* 左右内边距，适配移动端 */
}

.brand-vision h3 {
    font-size: 24px; /* 理念标题大小 */
    font-weight: 700; /* 加粗 */
    margin-bottom: 20px; /* 与描述的间距 */
    color: #0066cc; /* 标题颜色 */
}

.brand-vision p {
    font-size: 16px; /* 理念描述大小 */
    line-height: 1.8; /* 行高，提升可读性 */
    color: #666; /* 描述文字颜色 */
}

/* 多品牌卡片基础样式 */
.brand-card {
    background-color: #fff; /* 卡片背景色 */
    border-radius: 8px; /* 卡片圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 卡片阴影 */
    overflow: hidden; /* 隐藏溢出内容（如圆角处的图片） */
    margin-bottom: 30px; /* 卡片底部间距 */
    transition: all 0.3s ease; /* 交互过渡动画 */
}

/* 卡片hover效果：悬浮上移+阴影加深 */
.brand-card:hover {
    transform: translateY(-8px); /* 向上偏移8px */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* 加深阴影 */
}

/* 品牌LOGO区域 */
.brand-card .brand-logo {
    background-color: #f5f8fc; /* LOGO区背景色 */
    padding: 30px 20px; /* 内边距 */
    text-align: center; /* LOGO和名称居中 */
}

.brand-card .brand-logo img {
    height: 80px; /* LOGO高度 */
    margin-bottom: 15px; /* LOGO与名称的间距 */
}

.brand-card .brand-logo h4 {
    font-size: 22px; /* 品牌名称大小 */
    font-weight: 600; /* 加粗 */
    color: #333; /* 名称颜色 */
}

/* 品牌信息区域 */
.brand-card .brand-info {
    padding: 25px; /* 内边距 */
}

.brand-card .brand-info p {
    font-size: 15px; /* 品牌简介大小 */
    color: #666; /* 简介颜色 */
    line-height: 1.7; /* 行高 */
    margin-bottom: 15px; /* 与优势的间距 */
}

/* 品牌核心优势项 */
.brand-card .brand-advantage {
    display: flex; /* 图标+文字横向排列 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 8px; /* 优势项之间的间距 */
}

.brand-card .brand-advantage i {
    color: #0066cc; /* 图标颜色 */
    font-size: 16px; /* 图标大小 */
    margin-right: 8px; /* 图标与文字的间距 */
}

.brand-card .brand-advantage span {
    font-size: 14px; /* 优势文字大小 */
    color: #555; /* 优势文字颜色 */
}

/* 品牌详情按钮 */
.brand-card .btn-brand {
    margin-top: 15px; /* 与优势项的间距 */
    color: #0066cc; /* 按钮文字颜色 */
    border: 1px solid #0066cc; /* 按钮边框 */
    padding: 8px 20px; /* 按钮内边距 */
    border-radius: 4px; /* 按钮圆角 */
    font-size: 14px; /* 按钮文字大小 */
    display: inline-block; /* 保证padding生效 */
}

.brand-card .btn-brand:hover {
    background-color: #0066cc; /* hover时背景色 */
    color: #fff; /* hover时文字颜色 */
}

/* 品牌核心价值（全局） */
.brand-values {
    max-width: 1000px; /* 最大宽度 */
    margin: 60px auto 0; /* 居中，顶部外边距 */
    padding: 0 20px; /* 左右内边距 */
}

.brand-values h3 {
    text-align: center; /* 标题居中 */
    font-size: 24px; /* 标题大小 */
    font-weight: 700; /* 加粗 */
    margin-bottom: 30px; /* 与内容的间距 */
}

.brand-values .value-item {
    text-align: center; /* 内容居中 */
    padding: 20px; /* 内边距 */
}

.brand-values .value-item i {
    font-size: 40px; /* 图标大小 */
    color: #0066cc; /* 图标颜色 */
    margin-bottom: 15px; /* 图标与标题的间距 */
}

.brand-values .value-item h4 {
    font-size: 20px; /* 价值项标题大小 */
    font-weight: 600; /* 加粗 */
    margin-bottom: 10px; /* 与描述的间距 */
}

/* ==============================================
   产品中心模块
   作用：定义产品卡片的样式和交互效果
   ============================================== */
.product-card {
    border: none; /* 去掉默认边框 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 卡片阴影 */
    border-radius: 8px; /* 卡片圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-bottom: 30px; /* 卡片底部间距 */
    transition: transform 0.3s ease; /* 悬浮过渡动画 */
}

/* 产品卡片hover效果：向上偏移 */
.product-card:hover {
    transform: translateY(-10px); /* 向上偏移10px */
}

.product-card img {
    width: 100%; /* 图片宽度铺满卡片 */
    height: 250px; /* 图片高度 */
    object-fit: cover; /* 图片等比例缩放 */
}

.product-card .card-body {
    padding: 25px; /* 卡片内容内边距 */
}

.product-card h3 {
    font-size: 22px; /* 产品名称大小 */
    margin-bottom: 15px; /* 与描述的间距 */
    font-weight: 600; /* 加粗 */
}

.product-card p {
    color: #666; /* 产品描述颜色 */
    font-size: 15px; /* 描述文字大小 */
    line-height: 1.7; /* 行高 */
}

.product-card .btn-outline-primary {
    margin-top: 10px; /* 按钮与描述的间距 */
    color: #0066cc; /* 按钮文字颜色 */
    border-color: #0066cc; /* 按钮边框颜色 */
}

.product-card .btn-outline-primary:hover {
    background-color: #0066cc; /* hover背景色 */
    color: #fff; /* hover文字颜色 */
}

/* ==============================================
   新闻中心模块
   作用：定义新闻卡片的样式和交互效果
   ============================================== */
.news-card {
    border: 1px solid #eee; /* 新闻卡片边框 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-bottom: 30px; /* 底部间距 */
    transition: box-shadow 0.3s ease; /* 阴影过渡动画 */
}

/* 新闻卡片hover效果：添加阴影 */
.news-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 悬浮阴影 */
}

.news-card img {
    width: 100%; /* 图片宽度铺满 */
    height: 200px; /* 图片高度 */
    object-fit: cover; /* 等比例缩放 */
}

.news-card .card-body {
    padding: 20px; /* 内容内边距 */
}

.news-card .card-title {
    font-size: 18px; /* 新闻标题大小 */
    font-weight: 600; /* 加粗 */
    margin-bottom: 10px; /* 与描述的间距 */
}

.news-card .card-text {
    color: #666; /* 新闻描述颜色 */
    font-size: 14px; /* 描述大小 */
    margin-bottom: 15px; /* 与日期的间距 */
}

.news-card .date {
    color: #999; /* 日期颜色 */
    font-size: 12px; /* 日期大小 */
}

/* ==============================================
   联系方式模块
   作用：定义联系我们模块的布局和表单样式
   ============================================== */
.contact-section {
    background-color: #f8f9fa; /* 背景色 */
    padding: 80px 0; /* 上下内边距 */
}

.contact-info {
    margin-bottom: 30px; /* 信息项底部间距 */
}

.contact-info h4 {
    font-size: 20px; /* 信息标题大小 */
    font-weight: 600; /* 加粗 */
    margin-bottom: 15px; /* 与内容的间距 */
}

.contact-info p {
    margin-bottom: 10px; /* 信息行间距 */
    font-size: 16px; /* 信息文字大小 */
}

.contact-info i {
    color: #0066cc; /* 图标颜色 */
    margin-right: 10px; /* 图标与文字间距 */
}

.form-control {
    margin-bottom: 20px; /* 表单元素底部间距 */
    border-radius: 6px; /* 表单圆角 */
}

.btn-primary {
    background-color: #0066cc; /* 提交按钮背景色 */
    border-color: #0066cc; /* 按钮边框色 */
    padding: 10px 30px; /* 按钮内边距 */
    font-size: 16px; /* 按钮文字大小 */
    border-radius: 6px; /* 按钮圆角 */
}

.btn-primary:hover {
    background-color: #0052a3; /* hover背景色（略深） */
    border-color: #0052a3; /* hover边框色 */
}

/* ==============================================
   页脚样式
   作用：定义页面底部的布局和样式
   ============================================== */
footer {
    background-color: #333; /* 页脚背景色 */
    color: #fff; /* 页脚文字颜色 */
    padding: 50px 0 20px; /* 上下内边距 */
}

.footer-logo img {
    height: 60px; /* 页脚LOGO高度 */
    margin-bottom: 20px; /* LOGO与描述的间距 */
}

.footer-links h5 {
    font-size: 18px; /* 链接标题大小 */
    margin-bottom: 20px; /* 与链接列表的间距 */
    position: relative; /* 为伪元素定位 */
    padding-bottom: 10px; /* 底部内边距，给装饰线留空间 */
}

/* 链接标题下方的装饰线 */
.footer-links h5::after {
    content: ""; /* 伪元素内容 */
    display: block; /* 块级元素 */
    width: 40px; /* 装饰线宽度 */
    height: 2px; /* 装饰线高度 */
    background-color: #0066cc; /* 装饰线颜色 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 靠底部 */
    left: 0; /* 靠左侧 */
}

.footer-links ul {
    list-style: none; /* 去掉列表默认样式 */
    padding: 0; /* 去掉默认内边距 */
}

.footer-links ul li {
    margin-bottom: 10px; /* 列表项间距 */
}

.footer-links ul li a {
    color: #ccc; /* 链接默认颜色 */
}

.footer-links ul li a:hover {
    color: #fff; /* hover时文字变白 */
}

.copyright {
    text-align: center; /* 版权信息居中 */
    padding-top: 30px; /* 顶部内边距 */
    margin-top: 30px; /* 顶部外边距 */
    border-top: 1px solid #444; /* 顶部分隔线 */
    color: #999; /* 版权文字颜色 */
    font-size: 14px; /* 版权文字大小 */
}

/* ==============================================
   响应式适配样式
   作用：适配768px以下的移动端设备
   ============================================== */
@media (max-width: 768px) {
    /* 轮播图适配 */
    .carousel-item {
        height: 300px; /* 移动端轮播图高度降低 */
    }
    .carousel-caption {
        bottom: 50px; /* 文字距离底部更近 */
        padding: 10px; /* 减少内边距 */
    }
    .carousel-caption h5 {
        font-size: 20px; /* 标题字号缩小 */
    }
    .carousel-caption p {
        font-size: 14px; /* 描述字号缩小 */
    }

    /* 模块标题适配 */
    .section-title h2 {
        font-size: 24px; /* 标题字号缩小 */
    }

    /* 品牌卡片适配 */
    .brand-card .brand-logo img {
        height: 60px; /* LOGO高度降低 */
    }

    /* 产品卡片适配 */
    .product-card img {
        height: 200px; /* 产品图片高度降低 */
    }

    /* 品牌价值项适配 */
    .brand-values .value-item {
        margin-bottom: 20px; /* 增加底部间距，避免拥挤 */
    }
}