/* 全宽背景容器 */
.top-section-background {
    width: 100%;
    height: 550px;
    background: url('../images/bg_news.png') center/cover no-repeat;
    display: flex;
    flex-direction: column; /* 让子元素垂直排列 */
    align-items: center;
    justify-content: center;
    padding-bottom: 20px; /* 控制底部子容器的距离 */
}

/* 主要子容器 */
.top-section-background-inner {
    width: 50%;
    height: 50px;
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 140px; /* 调整此值来控制与顶部的距离 */
}

/* 底部子容器 */
.top-section-background-bottom {
    width: 80%;
    height: 500px; /* 可调整高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border-radius: 10px;
    margin-top: auto; /* 让它始终靠底部 */
}

/* 推荐新闻容器 */
.recommendation-container {
    cursor: pointer; /* 鼠标经过时变成手形 */
    display: flex;
    justify-content: space-between;  /* 横向排列并且保持等间距 */
    gap: 20px;  /* 子项之间的间距 */
    flex-wrap: wrap;  /* 如果屏幕小，可以换行 */
}

/* 推荐新闻图片容器 */
.recommendation-item {
    width: 350px; /* 固定容器宽度 */
    height: 250px; /* 固定容器高度 */
    overflow: hidden; /* 超出部分隐藏 */
    position: relative; /* 为图片定位提供参考 */
    background-color: #e0d597; /* 背景颜色 */
    border-radius: 12px; /* 添加圆角效果 */
}

/* 推荐新闻图片 */
.recommendation-image {
    width: 97%; /* 图片宽度填满容器 */
    height: 70%; /* 图片高度填满容器 */
    object-fit: cover; /* 按比例裁剪填充 */
    object-position: center; /* 裁剪时以图片中心为基准 */
    display: block; /* 移除底部间隙 */
    border-radius: 8px; /* 保留图片圆角效果 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 添加平滑过渡效果 */
    margin: 5px; /* 添加边距 */
}

/* 鼠标悬停时的动态效果 */
.recommendation-image:hover {
    transform: scale(1.02); /* 放大图片 */
    opacity: 0.9; /* 稍微降低透明度 */
}

/* 推荐新闻信息 */
.recommendation-info {
    padding: 10px;
    color: #1f1818;
}

/* 推荐新闻标题 */
.recommendation-title {
    font-size: 17px;
    font-weight: bold;
    margin: 0;
}

/* 推荐新闻日期 */
.recommendation-date {
    font-size: 14px;
    color: #130a0a;
}



/* 新闻列表容器 */
.list-section-background {
    width: 100%; /* 容器宽度占满父元素 */
    max-width: 100%; /* 限制最大宽度，恢复为固定值以支持居中 */
    margin: 0 auto; /* 居中容器本身 */
    background-image: url('../images/head_bg.png'); /* 默认PNG背景图片 */
    background-image: image-set(
        url('../images/head_bg.webp') type('image/webp'), /* WebP格式优先 */
        url('../images/head_bg.png') type('image/png')   /* PNG格式备选 */
    );
    background-size: cover; /* 背景图片铺满容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 防止背景重复 */
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
}

.list-section-background-top-container {
    width: 100%; /* 宽度占满 */
    height: 60px; /* 默认高度，可调整 */
    margin-top: 0px; /* 调整距离顶部的高度 */
    margin-bottom: 0px; /* 控制与下一个容器的距离，可根据需求调整 */
    display: flex;
    justify-content: center; /* 居中内容 */
    align-items: flex-start; /* 确保内容顶部对齐 */
    
    background-image: image-set(
        url('../images/top_article.webp') type('image/webp'), /* WebP格式优先 */
        url('../images/top_article.png') type('image/png')   /* PNG格式备选 */
    );
    background-size: 100% auto; /* 宽度100%，高度自适应，确保完整显示 */
    background-position: top center; /* 使背景图片的顶部与容器顶部对齐 */
    background-repeat: no-repeat; /* 防止背景重复 */
    overflow: hidden; /* 防止溢出 */
}

.list-section-background-sub-container {
    position: absolute;
    right: 0; /* 靠近父容器右侧 */
    top: 550px; /* 靠近父容器顶部 */
    
    width: 150px; /* 适当调整宽度 */
    height: 120px; /* 默认高度，可调整 */
    
    background-image: url('../images/bevel_a75098cc.png');
    background-size: contain; /* 让背景图片完整显示，不拉伸 */
    background-repeat: no-repeat;
    background-position: top right; /* 确保背景图片的右上角对齐 */
    z-index: 10; /* 确保它不会被其他元素遮挡 */
}



/* 单个新闻项 */
.list-section-background .list-section-news-item {
    display: flex; /* 使用flex布局实现左右排列 */
    align-items: center; /* 垂直居中对齐 */
    width: 76%; /* 新闻项宽度占父容器的70% */
    height: 210px; /* 固定高度与图片一致 */
    margin-bottom: 20px; /* 新闻项之间的间距 */
    padding: 20px; /* 内边距 */
    overflow: hidden; /* 防止内容溢出 */
    border-top: 1px solid #9b5f12a1; /* 上边框，1px实线，深灰色 */
    border-bottom: 1px solid #9b5f12a1; /* 下边框，1px实线，深灰色 */
    cursor: pointer; /* 鼠标变为手形 */
    background-color: transparent; /* 默认背景色 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停效果 */
.list-section-background .list-section-news-item:hover {
    background-color: #3b313113; /* 悬停时背景颜色变为浅灰色 */
    transform: translateX(10px); /* 内容整体向右移动10px */
}

/* 左侧新闻图片 */
.list-section-background .list-section-news-image {
    width: 300px; /* 固定宽度 */
    height: 180px; /* 固定高度 */
    object-fit: cover; /* 按比例裁剪填充 */
    object-position: center; /* 裁剪以中心为基准 */
    display: block;
}

/* 右侧新闻内容 */
.list-section-background .list-section-news-content {
    flex: 1; /* 占据剩余空间 */
    padding: 15px; /* 内边距 */
    display: flex;
    flex-direction: column; /* 垂直排列标题、简介、日期 */
    justify-content: center; /* 垂直居中 */
}

/* 新闻标题 */
.list-section-background .list-section-news-title {
    font-size:  20px; /* 标题字体大小 */
    font-weight: bold;
    margin: 0 0 5px 0; /* 下边距 */
    line-height: 1.2; /* 行高 */
    color: #333; /* 颜色，可调整 */
}

/* 新闻简介 */
.list-section-background .list-section-news-summary {
    font-size: 15px; /* 简介字体大小 */
    margin: 0 0 5px 0; /* 下边距 */
    line-height: 1.4;
    color: #666; /* 颜色，可调整 */
}

/* 新闻发布日期 */
.list-section-background .list-section-news-date {
    font-size: 12px; /* 日期字体大小 */
    color: #999; /* 颜色，可调整 */
    margin: 0;
}




/* 翻页容器 */
.list-news-pagination {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-top: 20px; /* 与新闻列表的间距 */
    gap: 10px; /* 页码之间的间距 */
}

/* 翻页链接 */
.list-news-page-link {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 默认文字颜色 */
    background-color: #fff; /* 默认背景色 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px; /* 圆角 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

/* 鼠标悬停效果 */
.list-news-page-link:hover {
    background-color: #e0d597; /* 悬停背景色 */
    color: #fff; /* 悬停文字颜色 */
}

/* 当前页高亮 */
.list-news-page-link.list-news-active {
    background-color: #333232; /* 当前页背景色 */
    color: #fff; /* 当前页文字颜色 */
    border-color: #333232; /* 当前页边框颜色 */
}



/* 新闻详情页-标题 + 作者 + 发布时间的背景 */
.news-header {
    width: 1200px;
    margin: 0 auto;
    padding-top: 220px; /* 让文字稍微往下 */
    padding-left: 20px; /* 让标题和作者信息靠左 */
    padding-bottom: 20px; /* 增加底部间距，避免太靠背景底部 */
    color: white;
}

/* 新闻标题 */
.news-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 发布作者 & 发布时间 */
.news-meta {
    font-size: 15px;
    color: #dbb538;
}

/* 背景图片 (只给标题区域用) */
.news-header-background {
    width: 100%;
    height: 450px;
    background-image: url('../images/bg_news.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* 让标题文字落在背景底部 */
}

/* 新闻详情的背景 */
.news-detail-background {
    width: 100%;
    background-image: url('../images/bg_news_list.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    padding-top: 20px;
    padding-bottom: 60px;
}

/* 新闻详情容器 */
.news-detail-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 20px;
    color: rgb(185, 177, 97);
    border-radius: 8px;
}

/* 详细内容 */
.news-detail-content {
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
}

/* 控制容器内图片宽度 */
.news-detail-content img {
    max-width: 100%;
    height: auto;
    display: block;        /* 可选：使图片成为块级元素 */
    margin: 0 auto;        /* 可选：图片居中显示 */
    padding: 10px 0;       /* 可选：上下添加间距 */
}