/* 通用重置与布局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Microsoft Yahei", sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}
.container {
    width: 1200px;
    margin: 0 auto;
}

/* 头部样式 */
.header {
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #eee;
}
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .logo img {
    height: 60px;
    vertical-align: middle;
}
.nav ul {
    display: flex;
}
.nav li {
    margin: 0 20px;
}
.nav li.active a {
    color: #f60;
}
.nav a:hover {
    color: #f60;
}


/* 头部容器（保持原布局） */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    position: relative;
}

/* 导航基础样式（1:1还原原样式） */
.main-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px; /* 原导航按钮间距 */
}

.nav-item {
    position: relative; /* 子菜单定位基准 */
}

.nav-link {
    display: inline-block;
    padding: 12px 28px; /* 原按钮内边距 */
    font-size: 18px; /* 原字体大小 */
    color: #333; /* 原文字颜色 */
    text-decoration: none;
    border-radius: 4px; /* 原按钮圆角 */
    transition: all 0.3s ease;
}

/* 激活态样式（完全匹配原蓝色按钮） */
.nav-link.active {
    background-color: #1a4b8c; /* 原蓝色 */
    color: #fff;
}

/*  hover态（和激活态视觉统一） */
.nav-link:hover {
    background-color: #1a4b8c;
    color: #fff;
}

/* 下拉箭头样式 */
.nav-arrow {
    font-size: 12px;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.nav-item:hover .nav-arrow {
    transform: rotate(180deg);
}

/* 二级下拉菜单（视觉匹配原导航） */
.subnav {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 0;
    list-style: none;
    margin: 0;
    display: none; /* 默认隐藏 */
    z-index: 9999;
}

.subnav-item .subnav-link {
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 子菜单激活/hover样式（和主按钮统一） */
.subnav-link.active,
.subnav-link:hover {
    background-color: #1a4b8c;
    color: #fff;
}

/* 鼠标hover显示下拉菜单 */
.nav-item:hover > .subnav {
    display: block;
}

/* 返回顶部样式 */
.back-top {
  width: 45px;
  height: 45px;
  background: #d4a85a;
  color: #fff;
  text-align: center;
  line-height: 45px;
  font-size: 18px;
  position: fixed;
  right: 30px;
  bottom: 50px;
  z-index: 999;
  cursor: pointer;
  border-radius: 3px;
  display: none; /* 默认隐藏 */
  transition: all 0.3s;
}
.back-top:hover {
  background: #b88d45;
}

.tp-banner-container{width:100%;position:relative;z-index:1}
.tp-banner-wrapper{width:100%;height:680px;position:relative;overflow:hidden}
@media(max-width:768px){.tp-banner-wrapper{height:400px}}

.tp-banner-item{width:100%;height:100%;position:absolute;top:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 0.8s ease}
.tp-banner-item.active{opacity:1}

.tp-banner-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:1}

/* 核心：文字居中 + 全屏居中 */
.tp-banner-content{position:relative;height:100%;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center}
.tp-banner-text{max-width:950px;color:#fff;margin:0 auto}
.tp-banner-title{font-size:48px;font-weight:700;line-height:1.3;margin-bottom:20px}
.tp-banner-desc{font-size:18px;line-height:1.8;margin-bottom:30px}

.tp-banner-btn{display:inline-block;padding:14px 35px;background:#d4a85a;color:#fff;font-size:16px;border-radius:3px;text-decoration:none;transition:all 0.3s;border:2px solid #d4a85a}
.tp-banner-btn:hover{background:transparent;color:#d4a85a}

@media(max-width:768px){
  .tp-banner-title{font-size:28px}
  .tp-banner-desc{font-size:15px;margin-bottom: 0}
  .tp-banner-btn{padding:10px 25px;font-size:14px}
}

.tp-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:rgba(212,168,90,0.8);color:#fff;text-align:center;line-height:50px;font-size:20px;cursor:pointer;z-index:10;transition:all 0.3s;border-radius:3px}
.tp-banner-arrow.prev{left:20px}
.tp-banner-arrow.next{right:20px}
.tp-banner-arrow:hover{background:#d4a85a}
@media(max-width:768px){.tp-banner-arrow{width:40px;height:40px;line-height:40px}}

.tp-banner-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.tp-banner-dots span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s}
.tp-banner-dots span.active{background:#d4a85a;width:25px;border-radius:6px}

/* 响应式适配（可选，保留原样式） */
@media (max-width: 768px) {
    .main-nav .nav-list {
        gap: 4px;
    }
    .nav-link {
        padding: 10px 18px;
        font-size: 16px;
    }
}
@import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css");

        



       
        /* 企业实力模块样式 */
        .tech-system {
            background: #1a4b8c; /* 品牌蓝色背景 */
            padding: 60px 0;
            text-align: center;
            color: #fff;
        }

        .tech-grid {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
            gap: 30px;
            flex-wrap: wrap; /* 适配移动端自动换行 */
        }

        .tech-item {
            flex: 1;
            min-width: 260px;
            max-width: 300px;
        }

        /* 图标与文字间距控制 */
        .tech-item i {
            margin-bottom: 24px;
            display: block;
            color: #fff;
        }

        .tech-item h3 {
            font-size: 24px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .tech-item p {
            font-size: 16px;
            line-height: 1.8;
            opacity: 0.95;
        }
                

        /* 发展历程 */
        .timeline{position:relative;max-width:1000px;margin:0 auto;padding:20px 0}
        .timeline::after{content:'';position:absolute;width:6px;background-color:var(--primary);top:0;bottom:0;left:50%;margin-left:-3px;border-radius:5px}
        .timeline-item{padding:10px 40px;position:relative;width:50%;box-sizing:border-box}
        .timeline-item::after{content:'';position:absolute;width:20px;height:20px;background-color:white;border:4px solid var(--secondary);top:15px;border-radius:50%;z-index:1}
        .left{left:0}
        .right{left:50%}
        .left::after{right:-13px}
        .right::after{left:-13px}
        .timeline-content{padding:20px;background-color:white;position:relative;border-radius:8px;box-shadow:0 3px 15px rgba(0,0,0,0.05)}
        .timeline-year{font-size:18px;font-weight:bold;color:var(--primary);margin-bottom:10px}



        

        /* 按钮样式 */
        .btn{display:inline-block;background:var(--secondary);color:#fff;padding:12px 30px;border-radius:5px;font-size:16px;transition:background 0.3s}
        .btn:hover{background:var(--primary)}




/* ====================== 分页条样式（适配深色主题） ====================== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 30px 0;
    background: #f5f7fa; /* 匹配产品列表页背景色 */
    border-top: 1px solid #eee;
}

.page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    transition: all 0.3s ease;
}

/* 激活态（当前页）样式（品牌蓝色，匹配按钮风格） */
.page-item.active {
    background: #1a4b8c;
    color: #fff;
    border-color: #1a4b8c;
}

/* hover态样式 */
.page-item:hover:not(.active) {
    background: #f0f4f8;
    border-color: #1a4b8c;
    color: #1a4b8c;
}

/* 上一页/下一页样式 */
.page-item.prev, .page-item.next {
    min-width: 80px;
}

/* 禁用态（无上下页时）样式 */
.page-item.disabled {
    color: #ccc;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #eee;
}

/* ====================== 产品列表原有样式（保留，确保布局统一） ====================== */
.product-list-section {
    background: #f5f7fa;
    padding: 30px 0;
}

.product-list-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 1200px;
    margin: 0 auto;
}

.product-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
}

.product-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    font-size: 18px;
    color: #1a4b8c;
    margin-bottom: 10px;
}

.product-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-detail {
    background: #1a4b8c;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-detail:hover {
    background: #153e75;
}

/* ====================== 响应式适配 ====================== */
@media (max-width: 768px) {
    .product-list-wrap {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0 15px;
    }

    .pagination-wrap {
        padding: 20px 0;
        gap: 4px;
    }

    .page-item {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 8px;
    }

    .page-item.prev, .page-item.next {
        min-width: 60px;
    }
}


/* ====================== 新闻列表全局样式 ====================== */

         /* 新闻页Banner */
        .news-banner{width:100%;height:300px;background:linear-gradient(rgba(26,75,140,0.85),rgba(26,75,140,0.95)),url(https://picsum.photos/id/1048/1920/600);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}
        .news-banner-content h2{font-size:42px;margin-bottom:15px}
        .news-banner-content p{font-size:18px;max-width:800px;margin:0 auto}

      
        .bg-light{background:var(--light)}
        .section-title{text-align:center;margin-bottom:50px}
        .section-title h2{font-size:32px;color:var(--primary);margin-bottom:10px}
        .section-title p{color:var(--gray);max-width:700px;margin:0 auto}

        /* 新闻项 */
        
        .news-item:last-child{border-bottom:none}
        .news-item-img{width:280px;border-radius:8px;overflow:hidden;flex-shrink:0}
        .news-item-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
        .news-item:hover .news-item-img img{transform:scale(1.05)}
        .news-item-content{flex:1}
        .news-item-tag{display:inline-block;padding:4px 10px;background:var(--light);color:var(--secondary);font-size:12px;border-radius:4px;margin-bottom:10px}
        .news-item-title{font-size:20px;color:var(--primary);margin-bottom:15px;line-height:1.4;transition:color 0.3s}
        .news-item-title:hover{color:var(--secondary)}
        .news-item-desc{color:var(--gray);font-size:14px;margin-bottom:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
        .news-item-meta{display:flex;align-items:center;gap:20px;color:var(--gray);font-size:13px}
        .meta-item{display:flex;align-items:center;gap:5px}

        /* 新闻侧边栏 */
        .news-sidebar{display:flex;flex-direction:column;gap:30px}        

/* ====================== 底部footer全局样式 ====================== */

#contact {
    background-color: #2b2f33; /* 精准匹配你图中的深灰底色 */
    color: #fff;
    padding: 40px 0 20px;
    font-family: "Microsoft Yahei", sans-serif;
}

#contact .container {
    width: 1200px;
    margin: 0 auto;
}

/* ====================== 底部四列布局（等宽对齐） ====================== */
.footer-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid #44494e; /* 细分割线，不突兀 */
    margin-bottom: 20px;
}

.footer-col {
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
}

.footer-col h3 {
   
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1a4b8c; /* 蓝色下划线，完全匹配设计 */
    display: inline-block;
}

/* ====================== 品牌LOGO区（修复slogan重复） ====================== */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    height: 80px;
    width: auto;
    margin-bottom: 8px;
}

.brand-slogan {
    font-size: 14px;
    color: #ccc;
    margin: 0;
    line-height: 1.4;
}

/* ====================== 导航/产品列表样式 ====================== */
.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-list li {
    margin-bottom: 6px;
}

.product-list li a {
   font-size: 14px;
        color: #999;

        white-space: nowrap;
        overflow: hidden;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

.product-list li a:hover {
    color: #1a4b8c;
    padding-left: 4px;
}

/* ====================== 联系我们区（修复空白占位） ====================== */
.contact-info1 {
    margin-bottom: 18px;
}

.contact-item {

        font-size: 14px;
        color: #999;

        white-space: nowrap;
        overflow: hidden;

    line-height: 1.8;

}
.contact-item span{
    margin-left: 10px
}

.wechat-tip {
    font-size: 16px;
    margin-bottom: 8px;
}

.wechat-qrcode {
    width: 110px;
    height: 110px;
    border: 2px solid #fff;
    border-radius: 4px;
}



/* ====================== 响应式适配（768px以下） ====================== */
@media (max-width: 768px) {
    #contact .container {
        width: 100%;
        padding: 0 15px;
    }

    .footer-wrap {
        flex-direction: column;
        padding-bottom: 15px;
    }

    .footer-col {
        padding: 15px 0;
        border-bottom: 1px solid #44494e;
    }

    .footer-col:last-child {
        border-bottom: none;
    }

    .footer-logo {
        height: 80px;
    }

    .wechat-qrcode {
        width: 100px;
        height: 100px;
    }

    .copyright {
        white-space: normal; /* 移动端允许换行 */
        line-height: 1.6;
    }
}

/* 通用工具类 */
@import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css");
/* 回到顶部按钮 - 核心样式（保证显示+定位正确） */
/* 回到顶部按钮 - 修复版 */


/* 回到顶部按钮基础样式（必须） */
.back-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #1a4b8c;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    display: none; /* 初始隐藏，配合fadeIn/fadeOut */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* hover效果 */
.back-top:hover {
    background: #153e75;
    transform: translateY(-2px);
    transition: all 0.3s;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .back-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        right: 20px;
        bottom: 20px;
    }
}