.container_1_index {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0; /* 上下边距10px，左右边距0 */
        }

        .left_1_index {
            font-size: 1.2em;
            font-weight: bold;
            padding-left: 5px; /* 左侧留出5px间距 */
        }

        .right_1_index a {
            color: #004080;
            text-decoration: none;
            font-weight: bold;
            padding-right: 5px; /* 右侧留出5px间距 */
        }

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

        /* 文章容器样式 */
        .articles-container_index {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 默认三列布局 */
            gap: 10px; /* 列间距 */
            padding: 0; /* 屏幕边距0 */
        }

        /* 文章块样式 */
        .article_index {
            display: flex;
            flex-direction: column;
           border-bottom: 1px solid #eee; /* 添加边框 */
            overflow: hidden;
            background-color: transparent; /* 移除背景色 */
        }

        /* 缩略图样式 */
        .thumbnail_index img {
            width: 100%;
    height: auto; /* 图片高度填充容器 */
    object-fit: cover; /* 保持图片比例，填充容器 */
    /*border-radius: 8px; /* 图片左侧圆角 */
        }

        /* 文章内容样式 */
        .content_index {
            padding: 10px;
        }

        .content_index h3 {
            font-size: 1.1em;
            margin: 0 0 5px 0;
        }

        .content_index h3 a {
            color: #333;
            text-decoration: none;
        }

        .content_index h3 a:hover {
            color: #004080;
            text-decoration: underline;
        }

        .content_index .date_index {
            font-size: 0.9em;
            color: #666;
            margin: 0;
        }

        .content_index .excerpt_index {
            font-size: 0.9em;
            color: #444;
            margin: 5px 0 0 0;
        }

        /* 电脑屏幕样式 */
        @media (min-width: 769px) {
            /* LIMIT 1 文章单独一行显示 */
            .article_index.featured_index {
                grid-column: 1 / -1; /* 占据整行 */
                flex-direction: row; /* 图片在左，内容在右 */
                align-items: flex-start; /* 顶部对齐 */
            }

            .article_index.featured_index .thumbnail_index {
                flex: 0 0 40%; /* 图片宽度占40% */
            }

            .article_index.featured_index .thumbnail_index img {
               /* border-radius: 8px; /* 图片左侧圆角 */
            }

            .article_index.featured_index .content_index {
                flex: 1; /* 内容宽度占剩余空间 */
                padding: 10px; /* 增加内边距 */
            }
        }

        /* 手机屏幕样式 */
        @media (max-width: 768px) {
            /* 小屏幕下切换为一列布局 */
            .articles-container_index {
                grid-template-columns: 1fr; /* 一列布局 */
            }

            /* LIMIT 1 文章图片在上，内容在下 */
            .article_index.featured_index {
                flex-direction: column; /* 图片在上，内容在下 */
            }

            .article_index.featured_index .thumbnail_index img {
                /*border-radius: 8px; /* 图片顶部圆角 */
            }

            .article_index.featured_index .content_index {
                padding: 10px; /* 1调整内边距 */
            }

            /* LIMIT 2-6 文章图片居左，内容居右 */
            .article_index:not(.featured_index) {
                flex-direction: row; /* 图片居左，内容居右 */
                align-items: flex-start; /* 顶部对齐 */
                gap: 10px; /* 图片和内容之间的间距 */
            }

            .article_index:not(.featured_index) .thumbnail_index {
                flex: 0 0 40%; /* 图片宽度占40% */
            }

            .article_index:not(.featured_index) .thumbnail_index img {
               /* border-radius: 8px; /* 图片左侧圆角 */
            }

            .article_index:not(.featured_index) .content_index {
                flex: 1; /* 内容宽度占剩余空间 */
                padding: 0; /* 移除内容的内边距 */
            }
        }
        
        
        .container_1_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; /* 上下边距10px，左右边距0 */
}

.left_1_t {
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 5px; /* 左侧留出5px间距 */
}

.right_1_t a {
    color: #339AF0;
    text-decoration: none;
    font-weight: bold;
    padding-right: 5px; /* 右侧留出5px间距 */
}

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

/* 文章容器样式 */
.articles-container_t {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 默认三列布局 */
    gap: 10px; /* 列间距 */
    padding: 0; /* 屏幕边距0 */
}

/* 文章块样式 */
.article_t {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee; /* 添加边框 */
   
    overflow: hidden;
    background-color: transparent; /* 移除背景色 */
}

/* 缩略图样式 */
.thumbnail_t img {
    width: 100%;
    height:auto;
   /* border-radius: 8px; /* 图片顶部圆角 */
}

/* 文章内容样式 */
.content_t {
    padding: 10px;
}

.content_t h3 {
    font-size: 1.1em;
    margin: 0 0 5px 0;
}

.content_t h3 a {
    color: #333;
    text-decoration: none;
}

.content_t h3 a:hover {
    color: #004080;
    text-decoration: underline;
}

.content_t .date_t {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

.content_t .excerpt_t {
    font-size: 0.9em;
    color: #444;
    margin: 5px 0 0 0;
}

/* 电脑屏幕样式 */
@media (min-width: 769px) {
    /* 所有文章都按照第一篇的样式显示 */
    .article_t.featured_article_t {
        grid-column: 1 / -1; /* 占据整行 */
        flex-direction: row; /* 图片在左，内容在右 */
        align-items: flex-start; /* 顶部对齐 */
    }

    .article_t.featured_article_t .thumbnail_t {
        flex: 0 0 40%; /* 图片宽度占40% */
    }

    .article_t.featured_article_t .thumbnail_t img {
        /*border-radius: 8px;  图片左侧圆角 */
    }

    .article_t.featured_article_t .content_t {
        flex: 1; /* 内容宽度占剩余空间 */
        padding: 0 10px; /* 增加内边距 */
    }
}

/* 手机屏幕样式 */
@media (max-width: 768px) {
    /* 小屏幕下切换为一列布局 */
    .articles-container_t {
        grid-template-columns: 1fr; /* 一列布局 */
    }

    /* 所有文章图片在上，内容在下 */
    .article_t.featured_article_t {
        flex-direction: column; /* 图片在上，内容在下 */
    }

    .article_t.featured_article_t .thumbnail_t img {
        /*border-radius: 8px;  图片顶部圆角 */
    }

    .article_t.featured_article_t .content_t {
        padding: 10px; /* 调整内边距 */
    }
}





.articles_h {
            display: flex;
            flex-direction: column;
            gap: 5px; /* 减少文章之间的间距 */
            /*padding: 10px; /* 减少与屏幕的距离 */
        }

        /* 文章容器 */
        .article_h {
            display: flex;
            align-items: flex-start;
            gap: 5px; /* 减少图片和内容之间的间距 */
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px; /* 减少文章底部间距 */
        }

        /* 图片容器 */
        .article-thumbnail {
            position: relative;
            width: 100px; /* 正方形宽度 */
            height: 100px; /* 正方形高度 */
            flex-shrink: 0; /* 防止图片被压缩 */
        }

        /* 图片样式 */
        .article-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片填充为正方形 */
            border-radius: 0; /* 移除圆角 */
        }

        /* 排行榜序号（圆形，左上角） */
        .rank-badge {
            position: absolute;
            top: 5px; /* 调整到顶部 */
            left: 5px; /* 调整到左侧 */
            width: 30px; /* 圆形直径 */
            height: 30px; /* 圆形直径 */
            background-color: rgba(10, 56, 91, 0.7); /* 透明红色 */
            color: white;
            font-size: 16px; /* 字体大小 */
            font-weight: bold;
            font-style: italic; /* 斜体 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%; /* 圆形 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
        }

        /* 访问量样式（右下角） */
        .views-badge {
            position: absolute;
            bottom: 5px; /* 调整到底部 */
            left: 5px; /* 调整到右侧 */
            background-color: rgba(10, 56, 91, 0.7); /* 透明红色 */
            color: white;
            font-size: 12px; /* 字体大小 */
            font-weight: bold;
            padding: 4px 8px; /* 内边距 */
            border-radius: 12px; /* 圆角 */
        }

        /* 内容区域 */
        .article-content {
            flex: 1; /* 内容区域占据剩余空间 */
        }

        .article-content h3 {
            margin: 0 0 8px 0; /* 减少标题与日期的间距 */
            font-size: 18px;
        }

        .article-content .date {
            margin: 4px 0; /* 减少日期与阅读量的间距 */
            font-size: 14px;
            color: #666;
        }