/* banner */
.top-banner .banner-first {
    background: url('/static/images/news/nb8.png') no-repeat center center / cover;
}

/* 顶部导航 */
.news-nav {
    box-shadow: -6px 0px 4px 0px rgba(4, 0, 0, 0.17);
}

.news-nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.news-nav-wrapper .nav-menu {
    display: flex;
    gap: 90px;
    margin-left: 50px;
    height: 100%;
}

.news-nav-wrapper .nav-menu li {
    height: 100%;
}

.news-nav-wrapper .nav-menu .menu-item {
    font-size: 16px;
    color: var(--content-color);
    text-decoration: none;
    transition: color 0.3s;
    display: block;
    height: 100%;
    line-height: 50px;
    position: relative;
}

.news-nav-wrapper .nav-menu .menu-item:hover,
.news-nav-wrapper .nav-menu .active {
    color: var(--primary-color);
}

.news-nav-wrapper .nav-menu .menu-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0px;
    background: var(--secondary-color);
    height: 2px;
    transition-property: left, right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.news-nav-wrapper .nav-menu .active::before {
    left: 0;
    right: 0;
}

/* 面包屑 */
.common-crumbs {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.common-crumbs img {
    width: 16px;
    height: auto;
    margin-right: 8px;
}

.common-crumbs span.crumbs-arrow {
    margin: 0 8px;
}

.common-crumbs span.active {
    color: var(--primary-color);
}

.common-crumbs span a:hover {
    color: var(--primary-color);
}

/* 新闻列表 */
.news-list {}

.news-list-wrapper {
    max-width: 1200px;
    margin: 0 auto;

    padding: 30px 0;
}

.news-list-wrapper .cards {
    display: none;
}

.news-list-wrapper .cards.show {
    display: block;
}

.news-list-wrapper .card {
    background: #FFFFFF;
    border: 1px solid #E3EAF3;

    display: flex;
    align-items: center;
    padding: 20px;

    margin: 30px 0;
}

.news-list-wrapper .card .news-image {
    width: 279px;
    height: 194px;
    overflow: hidden;
}

.news-list-wrapper .card .news-info {
    width: calc(100% - 279px);
    padding-left: 20px;
}

.news-list-wrapper .card .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list-wrapper .card .title {
    font-weight: 500;
    font-size: 16px;
    color: var(--content-color);

    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-list-wrapper .card:hover {
    background: #FFFFFF;
    box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.11);
    border: 1px solid #E3EAF3;
}

.news-list-wrapper .card:hover .title,
.news-list-wrapper .card:hover .bottom .detail {
    color: var(--primary-color);
}

.news-list-wrapper .card .desc {
    font-weight: 400;
    font-size: 14px;
    color: #999999;

    margin: 20px 0 30px 0;

    display: -webkit-box;
    /* 设置为WebKit内核的弹性盒子模型 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    -webkit-line-clamp: 2;
    /* 限制显示两行 */
    overflow: hidden;
    /* 隐藏超出范围的内容 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}

.news-list-wrapper .card .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-weight: 400;
    font-size: 14px;
    color: #6E7080;
}

.news-list-wrapper .card .bottom .read {
    margin-left: 40px;
}

.news-list-wrapper .card .bottom .read img {
    width: 23px;
    height: auto;
    margin-right: 8px;
}

.news-list-wrapper .card .bottom .detail a {
    color: #999999;
}

.news-list-wrapper .card:hover .bottom .detail a {
    color: var(--primary-color);
}

.news-list-wrapper .card .bottom .detail img {
    width: 20px;
    height: auto;
}

.news-list-wrapper .pages {
    text-align: center;
    font-size: 16px;
}

.news-list-wrapper .pages .total {
    margin-right: -10px;
}

.news-list-wrapper .pages a {
    margin: 0 10px;
}

.news-list-wrapper .pages>b {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: var(--primary-color);
    border-radius: 15px;
    border: 1px solid #CCCCCC;
    font-size: 16px;
    color: #FFFFFF;
}