.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;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: clamp(1rem, 3vw, 1.5rem);
    gap: clamp(1rem, 2vw, 1.5rem); /* 使用gap统一控制间距 */
}

/* 左侧文章内容区域样式 */
.left-content {
    flex: 1 1 100%; /* 默认占满宽度 */
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background-color: #fff;
}

/* 右侧图文列表区域样式 */
.right-list {
    flex: 1 1 100%; /* 默认占满宽度 */
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background-color: #fff;
    margin-left: 0; /* 移除固定margin */
}

/* 大尺寸屏幕 - 桌面设备 */
@media (min-width: 1024px) {
    .left-content {
        flex: 2; /* 左侧占2/3宽度 */
    }
    
    .right-list {
        flex: 1; /* 右侧占1/3宽度 */
        margin-left: clamp(1rem, 2vw, 1.5rem); /* 仅在大尺寸下应用左侧间距 */
    }
}    
   /* 文章标题样式 - 居中显示 */
   .left-content h1 {
      margin-bottom: 15px;
      text-align: center; /* 新增：标题居中 */
      font-size: clamp(1.5rem, 3vw, 2.5rem);
    }
   
    /* 文章信息区域样式 */
   .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 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;
 }
 }