.banner-image::before {
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:-webkit-gradient(linear,left top,left bottom,color-stop(80%,transparent),to(rgba(0,0,0,.5)));
	background:-webkit-linear-gradient(top,transparent 80%,rgba(0,0,0,.8) 100%);
	background:-o-linear-gradient(top,transparent 80%,rgba(0,0,0,.8) 100%);
	background:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.8) 100%);
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-ms-transition:all 0.4s ease;
}
.banner-image img {
	width:100%;
	display:block;
	object-fit:cover;
}
 .container {
      max-width: 1600px;
      width: 100%;
      margin: 0 auto;
    }

 /* 聚焦鸿嘉利标题样式 */
 @media (max-width:767px) {
     .main-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
    color: #333;
	padding:60px 0px 20px;
    }
 }
  @media (min-width:768px) {
    .main-title {
	padding:60px 0px 20px;
	 font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
    color: #333;
    }
}
    /* 头条图文列表样式 */
    .headline-list {
      background-color: white;
      padding: 20px;
      margin: 20px 0;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .headline-item {
      display: flex;
      gap: 20px;
      padding: 20px;
      border-bottom: 1px solid #eee;
      transition: background-color 0.3s ease;
    }

    .headline-item:hover {
      background-color: #f9f9f9;
    }

    .headline-item:last-child {
      border-bottom: none;
    }

    .headline-img {
  flex: 1; /* 保持弹性布局，可与其他元素分配空间 */
  /* 核心适配：最小宽度随屏幕变化，避免小屏溢出 */
  min-width: clamp(280px, 50vw, 400px); /* 小屏最小280px，大屏最大400px，中间按50%屏幕宽自适应 */
  max-width: 500px; /* 大屏上限保持500px，避免图片过大 */
  padding: 0 clamp(0.5rem, 2vw, 1rem); /* 左右预留间距，避免贴边 */
  box-sizing: border-box; /* 确保padding不影响实际宽度计算 */
}

.headline-img img {
  width: 100%;
  height: auto;
  /* 优化显示：保持图片比例，避免拉伸变形 */
  object-fit: cover; 
  /* 圆角适配：小屏圆角小，大屏圆角稍大，更协调 */
  border-radius: clamp(4px, 1vw, 6px); 
  /* 增加轻微阴影，提升图片层次感（可选，根据整体风格调整） */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* 小屏适配（768px以下，避免图片占满屏幕导致拥挤） */
@media (max-width: 768px) {
  .headline-img {
    min-width: 100%; /* 小屏时占满父容器宽度，充分利用空间 */
    max-width: 100%; /* 取消最大宽度限制，避免左右留白 */
    padding: 0 0.5rem; /* 缩减间距，节省空间 */
  }
  .headline-img img {
    border-radius: 4px; /* 小屏圆角更紧凑 */
  }
}

/* 大屏适配（1200px以上，提升显示效果） */
@media (min-width: 1200px) {
  .headline-img {
    max-width: 550px; /* 大屏可适当放宽最大宽度，提升视觉占比 */
  }
}
    .headline-info {
      flex: 3;
    }

    .headline-tag {
      background-color: #93b3fc;
      color: white;
      padding: 3px 8px;
      margin-right: 10px;
      border-radius: 3px;
      font-size: 1.2em;
      display: inline-block;
    }

    .headline-title {
	 font-size: 18px;
    font-weight: 1;
    margin-bottom: 0px;
    color: #636161;
	margin-top:20px
    }

    .headline-desc {
      color: #666;
      line-height: 1.6;
      margin-bottom: 10px;
      font-size: 1.2em;
    }

    .headline-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;
      font-size: 1.2em;
    }

    /* 新闻图文列表样式 */
.news-grid {
  display: grid;
  /* 固定两列：每列平均分配宽度，最小宽度300px（避免小屏过窄） */
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: clamp(15px, 3vw, 25px); /* 列间距响应式调整 */
  padding: 0; /* 左右边距，避免贴边 */
  max-width: 1600px; /* 限制最大宽度，避免大屏两列过宽 */
  margin: 2rem auto; /* 网格居中显示 */
  box-sizing: border-box;
}

/* 小屏适配（768px以下，强制单列，避免两列拥挤） */
@media (max-width: 768px) {
  .news-grid {
    /* 小屏自动变为单列，充分利用屏幕宽度 */
    grid-template-columns: 1fr;
    gap: 15px; /* 小屏间距缩小 */
  }
}

/* 以下为保持原有优化的辅助样式（无需修改） */
.news-card {
  background-color: white;
  border-radius: clamp(6px, 2vw, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* 确保两列卡片高度一致 */
}

/* 新闻标题栏（优化配色与间距） */
.news-card .news-xwheader {
  padding: clamp(12px, 2vw, 15px); /* 响应式内边距 */
  background-color: #f7f8fa; /* 比原#f9f9f9更浅，避免与内容区脱节 */
  border-bottom: 1px solid #f0f0f0; /* 浅色边框，弱化分割线 */
}

.news-card .news-xwheader h3 {
  margin: 0;
  color: #1d2129; /* 深灰主色，比原#93b3fc更适合标题（避免与正文混淆） */
  font-size: clamp(1.1rem, 2.5vw, 1.4rem); /* 响应式字体，小屏不挤 */
  font-weight: 600;
  padding-left: clamp(5px, 1vw, 10px);
  border-left: 3px solid #13943f; /* 左侧主色标识，增强品牌关联 */
}

/* 新闻内容区（优化内边距） */
.news-content {
  padding: clamp(15px, 2vw, 20px); /* 响应式内边距，与标题栏间距协调 */
  box-sizing: border-box;
}

/* 新闻条目（优化布局与间距） */
.news-item {
  display: flex;
  gap: clamp(10px, 2vw, 15px); /* 图片与文字区间距，响应式调整 */
  padding: clamp(12px, 2vw, 15px) 20px; /* 条目内边距，避免拥挤 */
  border-bottom: 1px solid #f0f0f0;
  align-items: center; /* 图片与文字垂直居中，视觉更整齐 */
  box-sizing: border-box;
}

/* 最后一条去除下边框 */
.news-item:last-child {
  border-bottom: none;
}

/* 新闻图片容器（核心适配：比例固定+响应式尺寸） */
.news-img {
  width: clamp(80px, 30%, 180px); /* 小屏80px，大屏180px，中间按30%父容器宽适配 */
  height: clamp(60px, 22vw, 120px); /* 高度与宽度按4:3比例适配（80*60、180*120） */
  flex-shrink: 0; /* 避免小屏被压缩变形 */
  overflow: hidden;
  border-radius: clamp(3px, 1vw, 5px); /* 图片圆角与卡片呼应 */
}

.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪，避免拉伸 */
  transition: transform 0.3s ease; /* 图片悬停效果 */
}

.news-item:hover .news-img img {
  transform: scale(1.05); /* 悬停轻微缩放，增强交互 */
}

/* 新闻文字区（优化阅读体验） */
.news-info {
  flex: 1;
  min-width: 0; /* 解决文字过长导致容器溢出 */
}

/* 新闻标题（控制长度+层级） */
.news-title {
  font-size: clamp(0.9rem, 2vw, 1.1rem); /* 响应式字体，小屏0.9rem不挤 */
  font-weight: 500;
  line-height: 1.4; /* 紧凑行高，减少高度占用 */
  color: #1d2129;
  margin: 0 0 clamp(5px, 1vw, 8px) 0; /* 与描述区间距 */
  /* 标题最多2行，避免过长导致布局失衡 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-title a {
  color: inherit;
  text-decoration: none;
}

.news-title a:hover {
  color: #13943f; /* 悬停用主色，增强交互反馈 */
}

/* 新闻描述（控制显示长度） */
.news-desc {
  font-size: clamp(0.8rem, 1.5vw, 0.9rem); /* 比标题小一号，层次清晰 */
  color: #666;
  line-height: 1.5;
  margin: 0 0 clamp(8px, 1.5vw, 12px) 0; /* 与元信息间距 */
  /* 描述最多2行，小屏1行，避免占用过多高度 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 新闻元信息（时间+阅读量） */
.news-meta {
  display: flex;
  justify-content: space-between; /* 时间与阅读量左右分布 */
  align-items: center;
  font-size: clamp(0.75rem, 1.2vw, 0.85rem); /* 最小字体，不抢焦点 */
  color: #868686; /* 浅灰，弱化次要信息 */
  gap: 10px; /* 避免小屏内容重叠 */
}

.news-meta span {
  white-space: nowrap; /* 防止时间/阅读量折行 */
}

/* 小屏适配（768px以下，手机为主） */
@media (max-width: 768px) {
  .news-item {
    flex-direction: column; /* 小屏图片在上、文字在下，避免左右拥挤 */
    align-items: flex-start; /* 文字左对齐，符合阅读习惯 */
    padding: 15px 0;
  }
  
  .news-img {
    width: 100%; /* 小屏图片占满宽度，提升视觉占比 */
    height: auto
  }
  
  .news-desc {
    -webkit-line-clamp: 1; /* 小屏描述仅显示1行，控制高度 */
  }
  
  .news-meta {
    font-size: 0.75rem;
    margin-top: 5px;
  }
}

/* 大屏适配（1200px以上，桌面端） */
@media (min-width: 1200px) {
  .news-card {
    max-width: 1200px; /* 大屏限制最大宽度，避免内容过宽 */
    margin: 0 auto; /* 卡片居中，视觉更稳 */
  }
}

    /* 按钮样式 */
    .more-btn {
  padding: 12px 24px;
    font-size: 1rem;
    font-weight: 1;
    text-align: center;
    color: #fff;
    background-color: #13943f;
    border: 1px solid #13943f;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 20px;
    }

    .more-btn:hover {
     background-color: #ffffff;
    border: 1px solid #dddddd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: #333;
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
      .xwheader-content {
        flex-direction: column;
      }

      .logopic {
        margin-bottom: 10px;
      }

      .headline-item {
        flex-direction: column;
      }

      .headline-img {
        max-width: 100%;
        margin-bottom: 15px;
      }
    }
    /*充电桩百科  */
  .news-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
  gap: 20px;
}
    .bknews-item {
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      margin-bottom: 1rem;
    }
@media (max-width: 1200px) {
  .news-container {
    grid-template-columns: 1fr;
  }
}
    .bknews-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .news-content {
      padding: 15px;
    }

    .news-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .news-title {
      font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #0a0b0d;
      transition: color 0.3s ease;
    }

    .bknews-item:hover .news-title {
      color: #93b3fc;
    }

    .news-date {
      color: #777;
      font-size: 14px;
    }

    .news-desc {
      margin: 0 0 10px 0;
          font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #545B66;
    }

    .news-more {
      font-size: 14px;
    color: #13943f;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: color 0.3s ease;
    }

    .news-more::after {
      content: '→';
      position: absolute;
      right: 0px;
      left:60px;
      transition: transform 0.3s ease;
      margin-left: 15px;
    }

    .news-more:hover::after {
      transform: translateX(3px);
    }


    /* 响应式布局 */
    @media (max-width: 768px) {
      .news-title {
        font-size: 16px;
      }

      .news-date {
        font-size: 12px;
      }

      .news-desc {
        font-size: 13px;
      }
    }
        /*常见问题  */
        .faq-item {
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      margin-bottom: 15px;
      overflow: hidden;
    }

    .faq-question {
		padding: 15px 15px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
       font-weight: 500;
      line-height: 1.5;
      color: #0a0b0d;
      background-color: #f9f9f9;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .faq-question h4 {
      margin: 0;
     font-size: 18px;
       font-weight: 500;
      line-height: 1.5;
      color: #0a0b0d;
    }

    .faq-question i {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    .faq-answer {
      padding: 15px 15px 15px;
      display: block;
      line-height: 1.6;
      font-size: 14px;
    color: #545B66;
    margin-bottom: 15px;
    display: block;
    }

    .faq-item.active .faq-answer {
      display: block;
      font-size: 18px;
      padding: 15px;
    }

    .faq-item.active .faq-question {
      background-color: #e8f0ff;
    }

    .faq-item.active .faq-question i {
      transform: rotate(180deg);
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
      .faq-question h4 {
        font-size: 16px;
      }
    }