/* 全局初始化：统一浏览器默认样式，设置基础字体和盒模型 */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif}
/* 平滑滚动：点击锚点链接时平滑滚动到目标位置 */
html{scroll-behavior:smooth}
/* 基础样式：设置页面背景色、文字颜色和行高 */
body{background:#f8f9fa;color:#333;line-height:1.8}
/* 链接样式：统一链接颜色，添加过渡动画 */
a{text-decoration:none;color:inherit;transition:.3s}
/* 图片样式：确保图片自适应容器，不超出边界 */
img{max-width:100%;display:block}

/* 顶部导航栏：固定在页面顶部，白色背景，深蓝色文字 */
.navbar{position:fixed;top:0;left:0;right:0;background:#ffffff;color:#030d4e;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.05)}
/* 导航栏容器：限制最大宽度，居中显示，设置内边距 */
.nav-container{max-width:1920px;width:100%;margin:0 auto;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0}
/* Logo图片：设置高度，保持比例 */
.logo-img{height:50px;object-fit:contain}
/* 导航菜单：横向排列，设置间距和字体大小 */
.nav-menu{display:flex;gap:32px;font-size:16px;align-items:center}
/* 导航链接悬停效果：鼠标悬停时变为红色 */
.nav-menu a:hover{color:#ca2d1d}
/* 联系按钮：红色背景，白色文字，圆角设计 */
.contact-btn{background:#ca2d1d;color:#fff;padding:12px 30px;border-radius:6px;font-size:16px;cursor:pointer;border:none;transition:.3s}
/* 联系按钮悬停效果：鼠标悬停时加深红色 */
.contact-btn:hover{background:#b02417;color:#fff}

/* Banner轮播图：设置高度，白色背景，顶部留出导航栏空间 */
.banner{
    width:100%;
    height:380px;
    position:relative;
    overflow:hidden;
    margin-top:95px;
    background:#ffffff;
}
/* 轮播图容器：横向排列，添加过渡动画 */
.banner-slider{display:flex;width:100%;height:100%;transition:transform 0.6s ease;}
/* 轮播图项：占满容器，不收缩 */
.banner-slide{width:100%;height:100%;flex-shrink:0;}
/* 轮播图图片：覆盖容器，居中显示 */
.banner-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* 轮播图指示器：居中显示在底部 */
.banner-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
/* 指示器点：圆形，半透明绿色 */
.banner-dot{width:12px;height:12px;border-radius:50%;background:rgba(0, 167, 92, 0.3);cursor:pointer;transition:.3s}
/* 激活状态指示器：白色，圆角矩形 */
.banner-dot.active{background:#f0f2f5;width:30px;border-radius:6px}

/* 通用板块容器：设置宽度、内边距，修复锚点被导航栏遮挡的问题 */
section{
  width:100%;
  padding:70px 0;
  scroll-margin-top: 100px;
}
/* 内容容器：限制最大宽度，居中显示，设置内边距 */
.container{max-width:1400px;margin:0 auto;padding:0 30px}
/* 板块标题：居中显示，设置字体大小和底部装饰线 */
.section-title{text-align:center;font-size:32px;margin-bottom:50px;position:relative}
/* 标题装饰线：红色横线，居中显示在标题下方 */
.section-title::after{content:"";width:70px;height:3px;background:#ca2d1d;position:absolute;bottom:-12px;left:50%;transform:translateX(-50%)}

/* 企业简介板块：深蓝色背景 */
#about{background:#003153}
/* 企业简介标题：左对齐，金色文字 */
#about .about-title{
    text-align:left;
    color:#f4daa6;
    margin-bottom:20px;
    font-size:32px;
    position:relative;
}
/* 企业简介标题装饰线：红色横线，左对齐 */
#about .about-title::after{
    content:"";
    width:70px;height:3px;
    background:#ca2d1d;
    position:absolute;
    bottom:-12px;
    left:0;
}
/* 企业简介内容：网格布局，图片和文字并排 */
.about-content{
    display:grid;
    grid-template-columns:35% 55%;
    gap:6%;
    align-items:start;
    position:relative;
    justify-content:center; /* 整体内容居中 */
}
/* 企业形象图片：4:3标准比例，圆角设计 */
.about-img-43{
    width:100%;
    height:0;
    padding-bottom:75%; /* 4:3标准比例 */
    background:transparent; /* 去掉底色 */
    border-radius:12px;
    position: relative;
    overflow: hidden;
}
/* 企业形象图片内容：覆盖容器，圆角设计 */
.about-img-43 img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:12px;
    top:0;
    left:0;
}
/* 企业简介内容对齐：垂直和水平居中 */
.about-content{
    align-items: center;
    justify-content: center;
}
/* 企业简介文字内容：设置宽度和顶部内边距 */
.about-text-content{
    width:100%;
    padding-top:5px;
}
/* 企业简介段落：设置字体大小、行高、颜色和间距 */
.about-text-content p{
    font-size:17px;
    line-height:2;
    color:#e0e0e0;
    margin-bottom:20px;
    margin-top:30px;
}
/* 了解更多链接：金色文字，右对齐 */
.read-more{
    display:inline-block;
    color:#f4daa6;
    font-weight:600;
    float:right;
}
/* 核心服务板块：浅灰色背景 */
#services{background:#f2f3f5}
/* 核心服务标题：深蓝色文字 */
#services .section-title{color:#030d4e}
/* 核心服务网格：4列布局，设置间距 */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
/* 服务卡片：渐变背景，边框，圆角，阴影，居中对齐 */
.service-card{background:linear-gradient(145deg,#ffffff,#e8e9eb);border:1px solid #d0d1d3;border-radius:12px;text-align:center;box-shadow:0 4px 12px rgba(0,47,167,.08);transition:.3s;padding:40px 25px}
/* 服务卡片悬停效果：上移，加深阴影，边框变色 */
.service-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,47,167,.25);border-color:#002FA7}
/* 服务图标：大字体，渐变文字效果 */
.service-icon{font-size:48px;margin-bottom:20px;background:linear-gradient(135deg,#002FA7,#030d4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* 服务卡片标题：深蓝色文字，设置间距 */
.service-card h3{margin-bottom:10px;color:#030d4e}
/* 服务卡片描述：灰色文字，设置字体大小 */
.service-card p{color:#666;font-size:15px}

/* 我们的优势板块：深蓝色背景 */
#advantages{background:#003153}
/* 我们的优势标题：金色文字 */
#advantages .section-title{color:#f4daa6}
/* 优势网格：3列布局，设置间距 */
.advantages{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:20px}
/* 优势项：半透明背景，边框，圆角，内边距 */
.advantage-item{background:rgba(255,255,255,.05);border:1px solid rgba(244,218,166,.2);padding:30px;border-radius:10px}
/* 优势项标题：金色文字，设置间距和字体大小 */
.advantage-item h4{color:#f4daa6;margin-bottom:12px;font-size:18px}
/* 优势项描述：浅灰色文字，设置字体大小 */
.advantage-item p{color:#e0e0e0;font-size:15px}

/* 专家团队板块：浅灰色背景 */
#team{background:#f2f3f5}
/* 专家团队标题：深蓝色文字 */
#team .section-title{color:#030d4e}
/* 创始人区域：网格布局，头像和信息并排 */
.founder-section{
    display:grid;
    grid-template-columns:18% 80%;
    gap:5%;
    align-items:center;
    background:#f8f9fa;
    border-radius:12px;
    padding:35px;
    margin-bottom:35px;
    border-bottom:1px solid #e0e0e0;
    padding-bottom:35px;
}
/* 创始人头像：3:4比例，圆角设计，背景图片 */
.founder-avatar{
    width:100%;
    height:0;
    padding-bottom:133.33%;/* 3:4比例不变 */
    position:relative;
    border-radius:8px;
    background:url('assets/images/founder.jpg') center/cover; /* 创始人头像链接 */
}
/* 创始人头像文字：居中显示，有图片时隐藏 */
.founder-avatar span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:48px;font-weight:600; display:none;} /* 有图片时隐藏文字 */
/* 创始人信息：设置左右内边距 */
.founder-info{
    padding: 0 30px; /* 【新增】文字区域左右内边距，避免紧贴边缘 */
}
/* 创始人姓名：深蓝色文字，行内块显示 */
.founder-info h3{font-size:28px;color:#030d4e;display:inline-block}
/* 创始人职位：红色文字，加粗，行内块显示，设置间距 */
.founder-position{color:#ca2d1d;font-weight:600;font-size:18px;display:inline-block;margin-left:15px}
/* 创始人描述：设置字体大小、行高、颜色和间距 */
.founder-desc{font-size:16px;line-height:2;color:#666;margin-top:15px}
/* 专家团队网格：4列布局，设置间距 */
.team-members-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
/* 专家卡片：白色背景，圆角，阴影，居中对齐，内边距 */
.team-card{background:#ffffff;border-radius:10px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.05);transition:.3s;text-align:center;padding:30px 20px}
/* 专家卡片悬停效果：上移，加深阴影 */
.team-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
/* 专家头像：圆形，背景图片，居中显示 */
.team-avatar-round{
    width:120px;height:120px;border-radius:50%;margin:0 auto 20px;
    background:url('assets/images/team-1.jpg') center/cover; /* 专家1头像链接 */
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:600;
}
/* 专家信息标题：深蓝色文字，设置间距和字体大小 */
.team-info h3{color:#030d4e;margin-bottom:5px;font-size:20px}
/* 专家职位：红色文字，加粗，设置间距和字体大小 */
.team-position{color:#ca2d1d;font-weight:600;margin-bottom:12px;font-size:15px}
/* 专家描述：灰色文字，设置字体大小和行高 */
.team-desc{color:#666;font-size:14px;line-height:1.7}

/* 服务流程板块：深蓝色背景 */
#process{background:#003153}
/* 服务流程标题：金色文字 */
#process .section-title{color:#f4daa6}
/* 服务流程容器：横向排列，设置间距和相对定位 */
.process{display:flex;justify-content:space-between;align-items:flex-start;margin-top:30px;position:relative}
/* 服务流程连接线：金色横线，位于流程项中间 */
.process::before{content:"";position:absolute;top:25px;left:10%;right:10%;height:1px;background:#f4daa6;z-index:0}
/* 流程步骤：居中显示，相对定位，设置宽度 */
.process-step{text-align:center;position:relative;z-index:1;width:20%}
/* 步骤数字：圆形，金色背景，深蓝色文字，居中显示 */
.step-num{width:50px;height:50px;background:#f4daa6;color:#003153;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;font-size:20px;font-weight:600}
/* 步骤标题：白色文字，加粗，设置间距 */
.step-title{color:#fff;font-weight:600;margin-bottom:8px}
/* 步骤描述：半透明白色文字，设置字体大小 */
.step-desc{color:rgba(255,255,255,.8);font-size:14px}

/* 案例展示板块：浅灰色背景 */
#cases{background:#f2f3f5}
/* 案例展示标题：深蓝色文字 */
#cases .section-title{color:#030d4e}
/* 案例网格：3列布局，设置间距 */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
/* 案例卡片：白色背景，圆角，阴影 */
.case-card{background:#ffffff;border-radius:10px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.05)}
/* 案例图片：设置高度，背景图片，居中显示 */
.case-img{
    height:200px;
    background:url('assets/images/case-1.jpg') center/cover; /* 案例1图片链接 */
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;
}
/* 案例内容：设置内边距 */
.case-content{padding:25px}
/* 案例标题：深蓝色文字，设置间距 */
.case-content h4{color:#030d4e;margin-bottom:10px}
/* 案例描述：灰色文字，设置字体大小 */
.case-content p{color:#666;font-size:15px}

/* 联系我们板块：深蓝色背景，设置内边距 */
#contact{background:#003153;padding:50px 0}
/* 联系我们标题：金色文字 */
#contact .section-title{color:#f4daa6}
/* 联系我们容器：网格布局，信息和表单并排 */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
/* 联系信息：半透明背景，边框，圆角，内边距，垂直排列 */
.contact-info{
    background:rgba(255,255,255,.08);/* 内框浅底色 */
    border:1px solid rgba(244,218,166,.2);
    padding:30px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
}
/* 位置标题：横向排列，设置间距 */
.location-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}
/* 位置图标：大字体 */
.location-header span{font-size:24px}
/* 位置标题文字：金色，设置字体大小和间距 */
.location-header h3{color:#f4daa6;font-size:20px;margin:0}
/* 地图图片：设置宽度、高度，背景图片，圆角，边框 */
.map-img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:6px;
    background:url('assets/images/map.jpg') center/cover; /* 地图图片链接 */
    border:1px solid rgba(255,255,255,.1);
    position:relative;
}
/* 地图图片文字：有图片时隐藏 */
.map-img::after{display:none;} /* 有地图图片时隐藏文字提示 */
/* 交通方式：设置顶部间距 */
.traffic-info{margin-top:25px}
/* 交通方式标题：金色，设置字体大小和间距 */
.traffic-info h4{color:#f4daa6;font-size:18px;margin-bottom:15px}
/* 交通方式项：设置底部间距 */
.traffic-item{margin-bottom:12px}
/* 交通方式子标题：白色，设置字体大小和间距 */
.traffic-item h5{color:#fff;font-size:16px;margin-bottom:5px}
/* 交通方式描述：浅灰色，设置字体大小和行高 */
.traffic-item p{color:#e0e0e0;font-size:14px;line-height:1.6}
/* 联系表单：白色背景，内边距，圆角 */
.contact-form{background:#ffffff;padding:30px;border-radius:10px}
/* 联系表单标题：深蓝色，设置间距和字体大小 */
.contact-form h3{color:#030d4e;margin-bottom:25px;font-size:22px}
/* 表单组：设置底部间距 */
.form-group{margin-bottom:20px}
/* 表单标签：块级显示，设置间距、颜色和加粗 */
.form-group label{display:block;margin-bottom:8px;color:#030d4e;font-weight:600}
/* 表单输入框和文本域：宽度100%，内边距，边框，圆角，字体大小，白色背景 */
.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;background:#fff}
/* 提交按钮：红色背景，白色文字，无边框，内边距，圆角，字体大小，鼠标指针，右对齐 */
.submit-btn{
    background:#ca2d1d;
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
    margin-left: auto; /* 关键：按钮右对齐 */
    display: block;
}
/* 提交按钮悬停效果：加深红色 */
.submit-btn:hover{background:#b02417}

/* 底部：深蓝色背景，白色文字，设置内边距 */
.footer{width:100%;background:#003153;color:#fff;padding:50px 0 20px}
/* 底部容器：网格布局，多列显示，设置间距和底部间距 */
.footer-container{
    max-width:1400px;
    margin:0 auto;
    padding:0 30px;
    display:grid;
    grid-template-columns:1.8fr 0.7fr 0.7fr 2fr;
    gap:60px;
    margin-bottom:40px;
}
/* 二维码容器：横向排列，设置间距 */
.qr-wrap{display:flex;gap:60px;}
/* 二维码盒子：居中显示 */
.qr-box{text-align:center}
/* 二维码占位符：设置宽高，金色背景，圆角，居中显示，背景图片 */
.qr-placeholder{
    width:120px;height:120px;
    background:#f4daa6;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;color:#030d4e;font-size:14px;margin-bottom:10px;
    background-size:cover;
    background-position:center;
}
/* 公众号二维码：背景图片 */
.qr-placeholder.gzh{ background-image:url('assets/images/qr-gzh.jpg'); } /* 公众号二维码 */
/* 小程序二维码：背景图片 */
.qr-placeholder.xcx{ background-image:url('assets/images/qr-xcx.jpg'); } /* 小程序二维码 */
/* 二维码盒子文字：灰色，小字体 */
.qr-box p{font-size:13px;color:#bbb}
/* 底部列标题：设置间距、字体大小和金色 */
.footer-col h4{margin-bottom:20px;font-size:18px;color:#f4daa6}
/* 底部列文字和链接：灰色，设置字体大小、行高和块级显示 */
.footer-col p,.footer-col a{color:#bbb;font-size:15px;line-height:2;display:block}
/* 底部链接悬停效果：红色 */
.footer-col a:hover{color:#ca2d1d}
/* 版权区域：居中显示，设置内边距、顶部边框、灰色、小字体 */
.copyright{max-width:1400px;margin:0 auto;padding:30px 30px 0;border-top:1px solid #fff;color:#999;font-size:14px;text-align:center;width:100%}
/* 版权链接：行内块显示，设置间距 */
.copyright a{display:inline-block;margin:0 4px}
/* 版权图片：行内块显示，垂直居中 */
.copyright img{display:inline-block;vertical-align:middle}

/* 响应式适配：平板设备 */
@media(max-width:992px){
    /* Banner：调整高度和顶部间距 */
    .banner{height:400px;margin-top:70px;}
    /* 核心服务网格：2列布局 */
    .services-grid{grid-template-columns:repeat(2,1fr)}
    /* 创始人区域：单列布局 */
    .founder-section{grid-template-columns:1fr;gap:3%}
    /* 创始人头像：限制最大宽度，居中显示 */
    .founder-avatar{max-width:200px;margin:0 auto 20px;padding-bottom:133.33%}
    /* 创始人信息：重置内边距 */
    .founder-info{padding:0;} /* 移动端重置内边距 */
    /* 创始人姓名：块级显示，居中 */
    .founder-info h3{display:block;text-align:center}
    /* 创始人职位：块级显示，居中，重置间距 */
    .founder-position{display:block;text-align:center;margin-left:0;margin-bottom:10px}
    /* 专家团队网格：2列布局 */
    .team-members-grid{grid-template-columns:repeat(2,1fr)}
    /* 服务流程：换行 */
    .process{flex-wrap:wrap}
    /* 流程步骤：50%宽度，设置底部间距 */
    .process-step{width:50%;margin-bottom:30px}
    /* 服务流程连接线：隐藏 */
    .process::before{display:none}
    /* 案例网格：2列布局 */
    .cases-grid{grid-template-columns:repeat(2,1fr)}
    /* 联系我们容器：单列布局 */
    .contact-wrap{grid-template-columns:1fr}
    /* 底部容器：2列布局，调整间距 */
    .footer-container{grid-template-columns:1fr 1fr;gap:40px}
    /* 二维码容器：居中显示，调整间距 */
    .qr-wrap{justify-content:center;gap:40px}
    /* 企业形象图片：保持4:3比例 */
    .about-img-43{padding-bottom:75%}
    /* 企业简介内容：单列布局，设置间距 */
    .about-content{grid-template-columns:1fr;margin-bottom:30px;gap:5%}
    /* 企业简介标题：静态定位，左对齐，设置间距 */
    #about .about-title{position:static;text-align:left;margin-bottom:20px}
}
/* 响应式适配：手机设备 */
@media(max-width:768px){
    /* 导航菜单：隐藏 */
    .nav-menu{display:none}
    /* Banner：调整高度和顶部间距 */
    .banner{height:300px;margin-top:65px;}
    /* 核心服务网格：单列布局 */
    .services-grid{grid-template-columns:1fr}
    /* 专家团队网格：单列布局 */
    .team-members-grid{grid-template-columns:1fr}
    /* 优势网格：单列布局 */
    .advantages{grid-template-columns:1fr}
    /* 流程步骤：100%宽度 */
    .process-step{width:100%}
    /* 案例网格：单列布局 */
    .cases-grid{grid-template-columns:1fr}
    /* 底部容器：单列布局，调整间距 */
    .footer-container{grid-template-columns:1fr;gap:30px}
    /* 导航栏容器：调整内边距 */
    .nav-container{padding:18px 20px}
    /* Logo图片：调整高度 */
    .logo-img{height:45px}
    /* 内容容器：调整内边距 */
    .container{padding:0 20px}
    /* 底部容器：调整内边距 */
    .footer-container{padding:0 20px}
    /* 版权区域：调整内边距 */
    .copyright{padding:30px 20px 0}
    /* 通用板块：调整内边距 */
    section{padding:50px 0}
    /* 企业形象图片：设置底部间距 */
    .about-img-43{margin-bottom:30px}
    /* 创始人区域：调整内边距 */
    .founder-section{padding:25px 20px}
    /* 二维码容器：调整间距 */
    .qr-wrap{gap:30px}
}

/* 修复：关于我们标题位置居中 */
#about .section-title {
  text-align: center;
  margin-left: 0;
}
/* 修复：关于我们标题装饰线居中 */
#about .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* 修复：合作伙伴图标样式 */
.partners{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:25px;
    align-items:center;
    justify-items:center;
}
/* 合作伙伴Logo：设置宽高，圆角，浅灰色背景，居中显示，背景图片，添加边框 */
.partner-logo {
  width: 180px;
  height: 80px;
  border-radius: 4px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
  background:url('assets/images/partner-1.jpg') center/cover; /* 合作伙伴1Logo链接 */
  border: 1px solid #e0e0e0; /* 添加边框 */
}
/* 合作伙伴Logo占位符：有图片时隐藏 */
.partner-logo::before {
  content: " ";
  font-size: 32px;
  color: #003153;
  display:none; /* 有图片时隐藏占位符 */
}

/* 创始人板块了解更多链接微调 */
.founder-info .read-more{
    display:inline-block;
    color:#22201c;
    font-weight:600;
    float:right;
    margin-top:10px;
    transition:.3s;
}
.founder-info .read-more:hover{
    color:#ca2d1d;
    text-decoration:underline;
}