/* 1. 确保只引用 Poppins，移除任何关于 Montserrat 的引用 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

      :root {
        --catl-blue: #0028aa; 
        --text-dark: #111111;
        --text-muted: #555555;
        --bg-news: #f8fafc; 
      }
      
      body {
        font-family: "Poppins", "Microsoft YaHei", -apple-system, sans-serif;
        margin: 0; padding: 0;
        background-color: #ffffff;
      }

      /* ================= 1. 顶部导航栏基础（PC与手机差异化架构） ================= */
      .custom-navbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1050;
        transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      }

      /* 💻 仅在 PC 端大屏时（>=992px）默认布局 */
      @media (min-width: 992px) {
        .custom-navbar {
          padding: 0 3rem;
          background-color: rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        /* 初始透明状态下的文字颜色为白色 */
        .custom-navbar .nav-link,
        .custom-navbar .nav-link-right {
          color: #ffffff !important;
          transition: color 0.25s ease;
        }

        /* 当导航栏处于：1.被滚动(scrolled) 2.鼠标悬浮(hover) 3.二级菜单打开(has-active-panel) 时变白底黑字 */
        .custom-navbar.scrolled,
        .custom-navbar:hover,
        .custom-navbar.has-active-panel {
          background-color: #ffffff !important;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
          border-bottom: 1px solid #eeeeee;
          padding: 0 3rem;
        }
        
        /* 变白底状态下的文字变色规则 */
        .custom-navbar.scrolled .nav-link,
        .custom-navbar:hover .nav-link,
        .custom-navbar.has-active-panel .nav-link,
        .custom-navbar.scrolled .nav-link-right,
        .custom-navbar:hover .nav-link-right,
        .custom-navbar.has-active-panel .nav-link-right {
          color: var(--text-dark) !important;
        }
        
        /* 悬停高亮蓝色 */
        .custom-navbar .nav-link:hover, 
        .custom-navbar .nav-link-right:hover {
          color: var(--catl-blue) !important;
        }
      }

      /* 📱 手机移动端（<992px）：强制白底黑字 */
      @media (max-width: 991.98px) {
        .custom-navbar {
          background-color: #ffffff !important;
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
          border-bottom: 1px solid #eeeeee;
        }
        .custom-navbar .mobile-action-btn {
          color: var(--text-dark) !important;
          background: none; border: none; padding: 0.5rem;
        }
        .custom-navbar .nav-link {
          color: var(--text-dark) !important;
        }
      }

      .custom-navbar .nav-link {
        font-size: 19px;
        font-weight: 400;
        padding: 1.2rem 1.5rem !important;
        position: relative;
        cursor: pointer;
      }

      .nav-right {
        display: flex;
        align-items: center;
        gap: 2rem;
      }
      .nav-link-right {
        text-decoration: none; font-size: 15px;
        cursor: pointer; display: inline-flex; align-items: center;
        padding: 1.5rem 0 !important; 
        position: relative;
      }

      /* ================= ⚡ LOGO 核心修复：完全抛弃 filter 滤镜，采用物理双图干净切换 ================= */
      .navbar-brand img {
        height: 60px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
      }

      @media (min-width: 992px) {
        /* 默认最顶端透明状态：只显示高亮白字图 logo-h.png，隐藏标准图 */
        .custom-navbar .logo-default { display: inline-block !important; }
        .custom-navbar .logo-active { display: none !important; }

        /* 当滚动、悬浮或激活面板时：隐藏白字图，完美显示彩色/深色标准图 logo.png */
        .custom-navbar.scrolled .logo-default,
        .custom-navbar:hover .logo-default,
        .custom-navbar.has-active-panel .logo-default {
          display: none !important;
        }
        .custom-navbar.scrolled .logo-active,
        .custom-navbar:hover .logo-active,
        .custom-navbar.has-active-panel .logo-active {
          display: inline-block !important;
        }
      }

      /* 手机端默认直接显示彩色标准图 */
      @media (max-width: 991.98px) {
        .custom-navbar .logo-default { display: none !important; }
        .custom-navbar .logo-active { display: inline-block !important; }
      }


      /* ================= ⚡ 下拉菜单核心修复：取消窄 li 定位，实现全屏完美等宽通栏 ================= */
      @media (min-width: 992px) {
        /* 核心修复：移除原有 position: relative !important，防止把下拉大面板锁死在窄列里 */
        .has-mega-menu {
          position: static !important; 
        }

        /* 核心修复：基于最外层全宽导航栏进行定位，left:0; width:100% 确保全屏百分之百铺满 */
        .mega-dropdown-panel {
          position: absolute;
          top: 100%; 
          left: 0;
          width: 100%; 
          height: 58px;               
          background-color: #ffffff;
          border-bottom: 1px solid #eeeeee;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
          display: none; 
          z-index: 1000; 
          opacity: 0;
          transition: opacity 0.25s ease;
        }
        
        /* 联动展开 */
        .has-mega-menu:hover .mega-dropdown-panel {
          display: block; opacity: 1;
        }

        /* 内部文字链接容器：在全宽面板内居中对齐 */
       .mega-links-container {
          position: absolute;
          left: 50%; transform: translateX(-50%);
          top: 0; height: 100%; display: flex; align-items: center;
          gap: 2.2rem; white-space: nowrap; padding: 0 1rem;
        }

        .txt-align {
          left: auto !important;
          transform: none !important;
          right: 6.5rem !important;
        }

        .mega-sub-item {
          color: #444444 !important; font-size: 15px; font-weight: 400;
          text-decoration: none; transition: color 0.2s ease;
        }
        .mega-sub-item:hover { color: var(--catl-blue) !important; }

        /* 旋转小箭头 */
        .arrow-icon-pc {
          font-size: 10px; margin-left: 6px; display: inline-block;
          transition: transform 0.25s ease; opacity: 0.7;
        }
        .has-mega-menu:hover .arrow-icon-pc {
          transform: rotate(-180deg); color: var(--catl-blue) !important;
        }

        /* 激活态底部对齐蓝线 */
        .has-mega-menu:hover > .nav-link::after {
          content: ""; position: absolute; bottom: -12px; 
          left: 1.2rem; right: 1.2rem; height: 3px; background-color: var(--catl-blue);
        }
        .has-mega-menu:hover > .nav-link-right::after {
          content: ""; position: absolute; bottom: -12px; 
          left: 0; right: 0; height: 3px; background-color: var(--catl-blue);
        }
        .has-mega-menu:hover > .nav-link,
        .has-mega-menu:hover > .nav-link-right { color: var(--catl-blue) !important; }
      }

      /* ================= 🔍 搜索面板 ================= */
      .search-mega-panel {
        position: absolute;
        top: 100%; left: 0; width: 100%;
        background-color: #ffffff;
        border-bottom: 1px solid #eeeeee;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
        display: none; z-index: 1010; padding: 1.2rem 0; opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }
      .search-mega-panel.show { 
        display: block; opacity: 1; 
      }
      .search-box-inner { max-width: 600px; margin: 0 auto; position: relative; padding: 0 1.5rem; }
      .search-box-inner input { border-radius: 50px; padding: 0.6rem 3.5rem 0.6rem 1.5rem; border: 1px solid #cccccc; font-size: 15px; width: 100%; }
      .search-close-icon { cursor: pointer; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); }

      /* ================= 📱 手机端：侧边抽屉菜单 ================= */
      .offcanvas-mobile-menu { width: 100% !important; }
      .mobile-menu-body { display: flex; flex-direction: column; height: 100%; background-color: #ffffff; }
      .mobile-link-row { border-bottom: 1px solid #f5f5f5; }
      .mobile-main-link { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 2rem; color: var(--text-dark); font-size: 18px; text-decoration: none; font-weight: 500; }
      .mobile-main-link.active-home { color: var(--catl-blue) !important; }
      .mobile-main-link .arrow-icon { font-size: 14px; color: #b5b5b5; transition: transform 0.3s ease; }
      .mobile-main-link:not(.collapsed) .arrow-icon { transform: rotate(-180deg); color: var(--catl-blue); }
      .mobile-sub-box { background-color: #f9fbff; }
      .mobile-sub-box a { display: block; padding: 1rem 3.5rem; color: #666666; font-size: 16px; text-decoration: none; border-bottom: 1px solid #f0f4f8; }

      /* ================= 页面其他基础版面样式 ================= */

    /* ================= 1. Banner 核心样式重构 ================= */
        .banner-section { 
            position: relative; 
            height: 550px; /* 桌面端黄金比例高度 */
            width: 100%;
            overflow: hidden;
        } 

        /* 让图片化身为真正的绝对定位背景底图 */
        .banner-section img { 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            z-index: 1;
        }

        /* 文本内容蒙层：确保遮罩与排版容器一致 */
        .banner-content-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            /* 如下视需要可加入微弱的渐变暗影确保在浅色图片下文字依然清晰 */
            background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 60%);
        }

        /* 主标题与副标题样式调优 */
        .banner-title {
            font-size: 42px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 12px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        }

        /* 面包屑位置约束 */
        .banner-breadcrumb {
            position: absolute;
            left: 0;
            bottom: 25px;
            width: 100%;
            z-index: 3;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }
        .banner-breadcrumb a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.2s;
        }
        .banner-breadcrumb a:hover {
            color: #ffffff;
        }


        /* ================= 2. 下方子分类导航（响应式） ================= */
        .sub-category-nav {
            background-color: #ffffff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border-bottom: 1px solid #eef1f6;
        }

        /* 移动端无缝横向滑轨 */
        .nav-scroll-wrapper {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* 针对 iOS 的滑动惯性优化 */
            padding: 0 5px;
        }

        /* 隐藏各家浏览器的原生硬核滚动条 */
        .nav-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }
        .nav-scroll-wrapper {
            -ms-overflow-style: none;  /* IE/Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* 导航单项 */
        .sub-nav-item {
            display: inline-block;
            white-space: nowrap; /* 强行防止手机端文字换行破形 */
            padding: 16px 24px;
            font-size: 16px;
            font-weight: 500;
            color: #555555;
            text-decoration: none;
            position: relative;
            transition: all 0.2s ease;
        }

        /* 悬浮与激活态的科技感下划线 */
        .sub-nav-item:hover, .sub-nav-item.active {
            color: #0c3574; /* 宁德品牌深蓝 */
        }

        .sub-nav-item::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background-color: #0c3574;
            transition: width 0.2s ease;
        }

        .sub-nav-item:hover::after, .sub-nav-item.active::after {
            width: 100%; /* 展开下划线 */
        }


        /* ================= 3. 响应式媒体断点适配 ================= */
        @media (max-width: 991.98px) {
            .banner-section { height: 360px; }
            .banner-title { font-size: 34px; }
            .banner-subtitle { font-size: 18px; }
        }

        @media (max-width: 767.98px) {
            .banner-section { height: 260px; } /* 缩小手机端无谓的留白 */
            .banner-title { font-size: 26px; margin-bottom: 6px; }
            .banner-breadcrumb { bottom: 15px; font-size: 12px; }
            .sub-nav-item { padding: 12px 16px; font-size: 14px; } /* 缩小点击区域紧凑排布 */
        }
       .section-title {
            font-size: 38px;
            font-weight: bold;
            color: #333;
            text-align: center;
            margin: 6rem 0;
        }

      .hero-section { position: relative; height: 100vh; min-height: 600px; } 
      .hero-section img { width: 100%; height: 100%; object-fit: cover; }
      .news-section { padding: 5rem 0; background-color: var(--bg-news); }
      .news-title {
        font-size: 38px;
        font-weight: 700;
        color: var(--text-dark);
      }
      .news-card-wrapper { background-color: transparent; padding: 2.5rem 2rem; display: flex; flex-direction: column; height: 100%; border-bottom: 2px solid transparent; transition: all 0.3s ease; border-radius: 4px; }
      .blog-list a{text-decoration:none}
      .news-date { color: #0056b3; font-size: 15px; font-weight: 600;}
      .news-card-title { font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--text-dark); text-decoration: none; margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 66px; }
      .news-card-wrapper .btn-learn-more { background-color: #002c94; color: #ffffff; border: 1px solid #002c94; padding: 0.55rem 2.2rem; font-size: 15px; border-radius: 50px; font-weight: 500; transition: all 0.25s ease; }
      .news-img-wrapper { border-radius: 4px; overflow: hidden; margin-top: auto; aspect-ratio: 16 / 9; }
      .news-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
      .news-card-wrapper:hover { background-color: #ffffff; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); border-bottom: 2px solid #002c94; transform: translateY(-4px); }
      .news-card-wrapper:hover .btn-learn-more { background-color: #ffffff !important; color: #002c94 !important; border: 1px solid #002c94 !important; }
      
      .main-footer { background-color: #ffffff; padding: 4rem 0 10rem; border-top: 1px solid #eeeeee; }
      .footer-logo-area img { height: 60px; margin-bottom: 1.5rem; }
      .footer-social-icons a { color: #999999; font-size: 20px; margin-left: 1.2rem; transition: color 0.25s; }
      .footer-social-icons a:hover { color: #003399; }
      .footer-column h6, .footer-direct-links h6 { font-size: 18px; font-weight: 700; color: #111111; margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
      .footer-column a, .footer-direct-links a { display: block; color: #555555; text-decoration: none; font-size: 16px; margin-bottom: 0.8rem; transition: color 0.2s; }
      .footer-column a:hover, .footer-direct-links a:hover { color: #003399; }
      @media (max-width: 991.98px) {
        .footer-column { border-bottom: 1px solid #f5f5f5; padding-bottom: 0.5rem; }
        .footer-column h6 { margin-bottom: 0; padding: 1rem 0; cursor: pointer; }
        .footer-column h6::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: #999999; transition: transform 0.3s ease; }
        .footer-column h6:not(.collapsed)::after { transform: rotate(-180deg); color: #003399; }
        .mobile-collapse-body { padding-bottom: 1rem; padding-left: 0.5rem; }
        .footer-direct-links a { padding: 0.5rem 0; border-bottom: 1px solid #f9f9f9; margin-bottom: 0; }
      }
      .footer-bottom { background-color: var(--catl-blue);padding: 2.0rem 0; font-size: 13px; color: #fff; border-top: 1px solid #eeeeee; }
      .footer-bottom a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
      @media (min-width: 1600px) {
  .container-fluid {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

/*翻页*/
#to_page {
  text-align: center;
  margin: 35px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 核心统一：去掉所有 a 标签的默认下划线 */
#to_page a {
  text-decoration: none !important;
  outline: none;
}

/* 统一所有分页按钮的尺寸，使其成为规整的正方形 */
#to_page .page_button,
#to_page .page_item,
#to_page .page_item_current {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 30px; /* 减去 2px 的边框高度，确保文字垂直完美居中 */
  text-align: center;
  box-sizing: border-box;
  margin: 0 4px;
  font-size: 14px;
  vertical-align: middle;
  transition: all 0.2s ease; /* 增加平滑的过渡动画 */
}

/* 普通按钮与箭头按钮的基础样式 */
#to_page .page_button,
#to_page .page_item {
  background: #f8f9fa;
  border: 1px solid #dcdcdc;
  color: #666;
}

/* 引入不带文字的背景图箭头 */
#to_page .prev {
  background-image: url(/assets/images/page_left.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#to_page .next {
  background-image: url(/assets/images/page_right.png);
  background-repeat: no-repeat;
  background-position: center center;
}

/* 当前选中的高亮状态（红色） */
#to_page .page_item_current {
  background: #e60515;
  border: 1px solid #e60515;
  color: #fff;
  font-weight: bold;
}

/* 悬浮交互效果：鼠标放上去时边框和背景略微加深，更具现代感 */
#to_page a.page_button:hover,
#to_page a.page_item:hover {
  background-color: #e9ecef; /* 只修改背景颜色，保留箭头图片 */
  border-color: #adadad;
  color: #333;
}
/* 悬浮小盒子样式 */
.cookie-box {
    position: fixed;
    bottom: 24px;
    right: 24px; /* 放在右下角更符合现代习惯，也可以改 left: 50% + transform */
    width: 360px; /* 限制宽度，形成小盒子感 */
    background: #ffffff;
    
    /* 核心：浮边框效果 */
    border: 1px solid rgba(0, 0, 0, 0.08); 
    border-radius: 14px;
    padding: 16px 20px;
    
    /* 核心：高阶阴影 (Apple Style) */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    
    z-index: 10000;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* 激活显示 */
.cookie-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-container {
    display: flex;
    flex-direction: column; /* 垂直排列更有“盒子”感 */
    gap: 12px;
}

.cookie-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #424245; /* 次要文字色 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cookie-text a {
    color: #0071e3; /* Apple Blue */
    text-decoration: none;
    font-weight: 500;
}

.cookie-text a:hover {
    text-decoration: underline;
}

.cookie-btns {
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    padding: 6px 18px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.btn-primary:hover {
    background: #000000;
}

.btn-primary:active {
    transform: scale(0.96); /* 点击时的微交互 */
}

/* 移动端适配：居中显示 */
@media (max-width: 480px) {
    .cookie-box {
        left: 15px;
        right: 15px;
        width: auto;
        bottom: 15px;
    }
}