.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; /* 新增：信息区域居中 */
      font-size: 1.2rem;
    }
aside{
    font-size: 1.2rem;
    line-height: 1.8;
}
    /* 文章正文图片样式 - 居中显示 */
   .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;
    }

   /* 文章列表样式 */
 .article-list {
 list-style: none;
 }

 .article-item {
 background-color: #fff;
 border-radius: 8px;
 padding: 20px;
 margin-bottom: 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
 transition: all 0.3s ease;
 }

 /* 鼠标悬停效果 */
 .article-item:hover {
 transform: translateY(-4px);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }

 .article-item:hover .title a {
 color: #93b3fc; /* 鼠标悬停时标题链接颜色变为主色 */
 }

 .article-item:hover {
 background-color: #f5f5f5; /* 鼠标悬停时背景色变为主色附近的浅灰色，增加层次感 */
 }

 .article-content {
 padding: 25px;
 }

 .article-meta {
 margin-bottom: 10px;
 color: #999;
 font-size: 14px;
 }

 .title {
 margin-bottom: 10px;
 }

 .title a {
 color: #333;
 text-decoration: none;
 transition: color 0.3s ease;
 }

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

 /* 响应式设计 */
 @media (max-width: 768px) {
 .container {
 padding: 15px;
 }
 
 .section-title {
 font-size: 20px;
 }
 
 .article-item {
 padding: 15px;
 }
 }