.banner-image::before {
	position:absolute;
	content:"";
	width:100%;
	height:300px;
	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;
       margin: 0px auto;
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
    }

    /* 左侧文章内容区域样式 */
   .left-content {
      flex: 2;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background-color: #fff;
    }

   /* 文章标题样式 - 居中显示 */
   .left-content h1 {
      margin-bottom: 15px;
      text-align: center; /* 新增：标题居中 */
    }

    /* 文章信息区域样式 */
   .newsdetail-info {
      color: #777;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      text-align: center; /* 新增：信息区域居中 */
    }

    /* 文章正文图片样式 - 居中显示 */
   .left-content img {
      max-width: 100%;
      height: auto;
      margin: 20px auto; /* 修改：垂直边距保留，水平边距自动 */
      display: block; /* 新增：将图片转换为块级元素以便居中 */
    }

    /* 上下篇导航区域样式 */
   .prev-next-nav {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
   .prev-next-nav a {
      color: #333;
      text-decoration: none;
    }
    
   .prev-next-nav a:hover {
      color: #0066cc;
      text-decoration: underline;
    }
    
   .prev-article, .next-article {
      margin: 10px 0;
    }
    
   .prev-article i, .next-article i {
      margin-right: 5px;
    }

    /* 右侧图文列表区域样式 */
  .right-list {
      flex: 1;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background-color: #fff;
      margin-left: 20px;
      margin-top: 0px;
    }

    /* 右侧列表标题样式 */
   .right-list h2 {
      margin-bottom: 15px;
      border-bottom: 2px solid #f0f0f0;
      padding-bottom: 10px;
    }

    /* 右侧列表项样式 - 改为浮动布局实现一行两列 */
   .right-list ul {
      list-style: none;
      padding: 0;
      margin: 0 -10px; /* 抵消子元素的左右margin */
      display: flex;
      flex-wrap: wrap;
    }

   .right-list li {
      width: calc(50% - 20px); /* 一行两个，减去间距 */
      margin: 10px;
      overflow: hidden;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease; /* 过渡效果 */
    }

    /* 鼠标悬停效果 */
   .right-list li:hover {
      transform: translateY(-5px); /* 上移5px */
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* 增强阴影 */
    }

    /* 右侧列表项图片样式 */
   .right-list img {
      width: 100%;
      height: 175px;
      object-fit: cover;
      transition: transform 0.5s ease; /* 图片过渡效果 */
    }

    /* 鼠标悬停时图片放大 */
   .right-list li:hover img {
      transform: scale(1.05); /* 放大5% */
    }

    /* 右侧列表项信息区域样式 */
   .news-info {
      padding: 15px;
      background-color: #fff;
    }

    /* 右侧列表项标题样式 */
   .news-info h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    /* 右侧列表项元信息样式 */
   .news-meta {
      color: #999;
      font-size: 12px;
      margin-bottom: 10px;
    }

    /* 右侧列表项描述样式 */
   .news-desc {
      color: #666;
      font-size: 14px;
      margin: 0;
    }

    /* 响应式布局：小屏幕设备下左右区域堆叠显示 */
    @media (max-width: 768px) {
     .left-content,
     .right-list {
        flex: 1 0 100%;
        margin-left: 0;
        margin-top: 10px;
      }
      
      /* 小屏幕下右侧列表恢复为一行一个 */
     .right-list li {
        width: 100%;
        margin: 10px 0;
      }
    }
    /* 文章卡片样式 */
    .article-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      overflow-x: auto;
      scroll-behavior: smooth;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
    
    .article-grid::-webkit-scrollbar {
      display: none;  /* Chrome, Safari, Opera */
    }
    
    @media (min-width: 768px) {
      .article-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (min-width: 1024px) {
      .article-grid {
          padding:20px 10px;
        grid-template-columns: repeat(4, 1fr);
      }
    }
    
    .article-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: all 0.3s;
      flex: 0 0 calc(100% - 24px);
    }
    
    @media (min-width: 768px) {
      .article-card {
        flex: 0 0 calc(50% - 24px);
      }
    }
    
    @media (min-width: 1024px) {
      .article-card {
        flex: 0 0 calc(33.333% - 24px);
      }
    }
    
    .article-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }
    
    .article-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.5s;
    }
    
    .article-image:hover {
      transform: scale(1.05);
    }
    
    .article-content {
      padding: 20px;
      text-align: left;
    }
    
    .article-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .article-date {
      font-size: 16px;
      color: #86909C;
    }
    
    .article-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #1D2129;
      transition: color 0.3s;
    }
    
    .article-title:hover {
      color: #93b3fc;
    }
    
    .article-excerpt {
      font-size: 14px;
      color: #4E5969;
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }