@charset "UTF-8";


/* 容器样式 */
.container {
    width: 90% !important; /*宽度为90%，并且不会超过1200*/
    max-width: 1600px; /*最大宽度1600*/
    margin: 0 auto; /*上下0，左右自动*/
    padding: 0; /*上下0，左右自动*/
    /*background-color: #333333;*/
}

.list-news {}

/* 单条新闻 */
.list-news > a {
    display: flex;
    align-items: flex-start;   /* 图片与文字顶端对齐 */
    gap: 16px;                 /* 图-文间距 */
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
}
.list-news > a:hover {
    background: rgba(239, 239, 239, 0.44);
}

/* 左侧图片 */
.list-left {
    flex-shrink: 0;
}
.list-left img {
    width: 200px;
    height: 200px;
    object-fit: cover;         /* 裁剪不变形 */
    border-radius: 4px;
}

/* 右侧文字区 */
.list-right {
    flex: 1;
    display: flex;
    flex-direction: column;    /* 标题上、摘要下 */
    justify-content: center;
}
/*更新时间*/
.list-right-update-time {
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: left;
}
/* 标题 */
.list-right-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: left;
}

/* 摘要 */
.list-right-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;     /* 超出三行省略 */
    -webkit-box-orient: vertical;
    text-align: left;
}

/* 分页居中 */
.list-news > div:last-child {
    text-align: center;
    margin-top: 20px;
}

/*分页*/
.list-news .pagination {
    display: flex;
    justify-content: center; /* 主轴水平居中 */
    align-items: center;     /* 交叉轴垂直居中 */
}

.list-news .pagination li {
    font-size: 12px;
    float: left;
    margin-left: 10px;
    list-style: none;
    vertical-align: top;
    display: inline-block;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

.list-news .pagination li a {
    background-color: #b4b4b4;
    color: #FFFFFF;
    padding: 10px 15px;
}
.list-news .pagination li.active {
    background-color: #e3003a;;
    color: #FFFFFF;
}

.list-news .pagination li.active a {
    background-color: #e3003a;;
    color: #FFFFFF;
}

@media (min-width: 1200px) {
    .container {
        /*浏览器很宽时，减内容限制在中间较小区域便于观看*/
        /*width: 50% !important;*/
        max-width: 1600px; /*最大宽度1600*/
        margin: 0 auto; /*上下0，左右自动*/
        padding: 0; /*上下0，左右自动*/
    }
}

/*当屏幕小于767px时，进行如下自适应*/
@media (max-width: 767px) {
    .list-news-row {
        /* 实现图片和文字上下转换的关键点：允许换行 */
        flex-wrap: wrap;
    }
    .list-left {
        flex: 0 0 100%;
    }
    .list-left img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 4px;
    }
    /* 右侧文字区 */
    .list-right {
        flex: 0 0 100%;
        display: flex;
        /* 标题上、摘要下 */
        flex-direction: column;
        justify-content: center;
    }
}