.top-banner {
	width:  100%;
	height:  25.7143rem;
	background: #4f4f4f;
	margin-bottom:  1.4286rem;
}
.top-banner > img {
	display: block;
	width:  100%;
	height:  100%;
	object-fit: cover;
	object-position: top center;
}
.content-box {
	display: flex;
	justify-content: flex-start;
	padding-bottom:  2.1429rem;
}
.content-box > .left {
	display: block;
	flex: 0 0 calc(763 / 1200 * 100%);
	width:  calc(763 / 1200 * 100%);
	margin-right:  1.4286rem;
}
.content-box > .left .top-articles {
	margin-bottom:  2.1429rem;
	display: block;
	position: relative;
}
.content-box > .left .top-articles .tag {
	position: absolute;
	top:  0;
	left:  -0.2857rem;
	z-index: 100;
	width:  7.5rem;
	height:  2.8571rem;
	line-height:  2.8571rem;
	background: #d12e2e;
	font-size:  1.4286rem;
	color: #fff;
	text-align: center;
	justify-content: center;
}
.content-box > .left .top-articles #swiper {
	display: block;
}
.content-box > .left .top-articles a.swiper-slide {
	display: block;
	width:  100%;
}
.content-box > .left .top-articles a.swiper-slide .article {
	display: block;
	width:  100%;
	position: relative;
}
.content-box > .left .top-articles a.swiper-slide .article .article-img {
	display: block;
	width:  100%;
	padding-top:  calc(305 / 763 * 100%);
	position: relative;
}
.content-box > .left .top-articles a.swiper-slide .article .article-img img {
	display: block;
	width:  100%;
	height:  100%;
	position: absolute;
	left:  0;
	top:  0;
	object-fit: cover;
}
.content-box > .left .top-articles a.swiper-slide .article .article-info {
	display: block;
	position: absolute;
	left:  0;
	bottom:  0;
	padding:  0 1.4286rem;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.6);
	height:  auto;
}
.content-box
	> .left
	.top-articles
	a.swiper-slide
	.article
	.article-info
	.article-title {
	display: block;
	height:  3.5714rem;
	line-height:  3.5714rem;
	font-size:  1.2857rem;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.content-box > .left .spec-article .tag {
	background: #1a82ff;
	display: block;
	width:  8.7143rem;
	height:  3.5714rem;
	line-height:  3.5714rem;
	font-size:  1.4286rem;
	color: #fff;
	text-align: center;
}
.content-box > .left .spec-article .art-link {
	margin-left:  0.8571rem;
	display: block;
	max-width:  calc(100% - 9.5714rem);
	width:  calc(100% - 9.5714rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:  1.4286rem;
	color: #333333;
	line-height:  3.5714rem;
	transition: all 0.3s ease;
}
.content-box > .left .spec-article .art-link:hover {
	color: #1a82ff;
}
.content-box > .left .latest-article {
	margin-top:  2.1429rem;
	background: #ffffff;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	padding:  1.4286rem;
	display: block;
}
.content-box > .left .latest-article .title-block {
	margin-bottom:  1.0714rem;
	align-items: center;
	justify-content: space-between;
}
.content-box > .left .latest-article .title-block .t {
	font-size:  1.2857rem;
	color: #333333;
	font-weight: bold;
}
.content-box > .left .latest-article .title-block .more-btn {
	display: flex;
	flex-direction: column;
	width:  2.1429rem;
}
.content-box > .left .latest-article .title-block .more-btn span {
	margin:  0.1429rem auto;
	display: inline-block;
	background: #cccccc;
	width:  1.4286rem;
	height:  0.1429rem;
	transition: all 0.3s ease;
}
.content-box > .left .latest-article .title-block .more-btn:hover span {
	background: #1a82ff;
}
.content-box
	> .left
	.latest-article
	.title-block
	.more-btn:hover
	span:nth-child(1) {
	width:  1rem;
	transform:  translateY(0.0714rem) rotate(45deg);
}
.content-box
	> .left
	.latest-article
	.title-block
	.more-btn:hover
	span:nth-child(2) {
	width:  1rem;
	transform:  translateX(-0.5714rem);
}
.content-box
	> .left
	.latest-article
	.title-block
	.more-btn:hover
	span:nth-child(3) {
	width:  1rem;
	transform:  translateY(-0.0714rem) rotate(-45deg);
}
.content-box > .left .latest-article .list {
	display: block;
	height:  auto;
}
.content-box > .left .latest-article .list a.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:  0.3571rem 0;
}
.content-box > .left .latest-article .list a.item .tit {
	max-width:  calc(100% - 5.5714rem);
	font-size:  1rem;
	line-height:  1.1429rem;
	font-weight: 400;
	color: #878787;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.3s ease;
}
.content-box > .left .latest-article .list a.item .tit:hover {
	color: #1a82ff;
}
.content-box > .left .latest-article .list a.item .time {
	flex: 0 0 78px;
	width:  5.5714rem;
	font-size:  1rem;
	line-height:  1.1429rem;
	font-weight: 400;
	color: #c2c2c2;
    text-align: right;
}
.content-box > .left .articles-list {
	margin-top:  2.1429rem;
	display: block;
	height:  auto;
}
.content-box > .left .articles-list .item {
	box-sizing: border-box;
	height:  auto;
	display: flex;
	justify-content: flex-start;
	padding:  1.4286rem;
	background: #fff;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.content-box > .left .articles-list .item:not(:last-child) {
	margin-bottom:  2.1429rem;
}
.content-box > .left .articles-list .item .left {
	flex: 0 0 250px;
	width:  17.8571rem;
}
.content-box > .left .articles-list .item .left .img-box {
	display: block;
	width:  100%;
	padding-top:  calc(140 / 250 * 100%);
	position: relative;
}
.content-box > .left .articles-list .item .left .img-box img {
	display: block;
	width:  100%;
	height:  100%;
	position: absolute;
	left:  0;
	top:  0;
	object-fit: cover;
	object-position: center;
}
.content-box > .left .articles-list .item .left .img-box .category {
	width:  auto;
	height:  1.5714rem;
	padding:  0 0.8571rem;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left:  1.0714rem;
	top:  1.0714rem;
	z-index: 10;
	font-size:  0.8571rem;
	color: #fff;
}
.content-box > .left .articles-list .item .right {
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 calc(100% - 250px);
	max-width:  calc(100% - 17.8571rem);
	padding-left:  1.4286rem;
	box-sizing: border-box;
	height:  auto;
}
.content-box > .left .articles-list .item .right .top {
	display: block;
	width:  100%;
}
.content-box > .left .articles-list .item .right .top .tit {
	height:  3.1429rem;
	font-size:  1.2857rem;
	line-height:  1.5714rem;
	color: #333333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: all 0.3s ease;
}
.content-box > .left .articles-list .item .right .top .tit:hover {
	color: #1a82ff;
}
.content-box > .left .articles-list .item .right .top .p {
	margin-top:  1rem;
	font-size:  1rem;
	line-height:  1.5714rem;
	color: #878787;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.content-box > .left .articles-list .item .right .bottom {
	height:  auto;
	align-items: center;
}
.content-box > .left .articles-list .item .right .bottom span,
.content-box > .left .articles-list .item .right .bottom a {
	font-size:  1rem;
	font-weight: 400;
	line-height:  1.5714rem;
	color: #878787;
	transition: all 0.3s ease;
}
.content-box
	> .left
	.articles-list
	.item
	.right
	.bottom
	.tags
	.tag:not(:last-child) {
	margin-left:  0.1429rem;
}
.content-box > .left .articles-list .item .right .bottom .author {
	margin-left:  1.7857rem;
}
.content-box > .left .articles-list .item .right .bottom .time {
	margin-left:  auto;
	color: #c2c2c2;
}
.content-box > .left .articles-list .item .right .bottom a:hover {
	color: #1a82ff;
}
.content-box > .left .articles-list .item .right .bottom .join-btn {
	width:  7.1429rem;
	height:  2.5714rem;
	line-height:  2.5714rem;
	background: #1a82ff;
	display: block;
	margin-left:  auto;
	font-size:  1.2857rem;
	text-align: center;
	color: #fff;
	transition: all 0.3s ease;
}
.content-box > .left .articles-list .item .right .bottom .join-btn:hover {
	background: rgba(26, 130, 255, 0.8);
	color: #fff;
}
.content-box > .left .view-more {
	display: flex;
	justify-content: center;
	align-items: center;
	height:  2.5714rem;
	width:  100%;
	background: #ffffff;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	font-size:  1rem;
	color: #878787;
	transition: all 0.3s ease;
}
.content-box > .left .view-more:hover {
	color: #1a82ff;
}
.content-box > .right {
	display: block;
	flex: 0 0 calc(417 / 1200 * 100%);
	width:  calc(417 / 1200 * 100%);
}
.content-box > .right .rec-articles {
	display: block;
	padding:  1.4286rem;
	background: #ffffff;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.content-box > .right .rec-articles .title {
	font-size:  1.4286rem;
	line-height:  1;
	font-weight: 500;
	color: #878787;
	margin-bottom:  1rem;
	font-weight: bold;
}
.content-box > .right .rec-articles .list {
	display: block;
}
.content-box > .right .rec-articles .list a.item {
	display: block;
	width:  100%;
	position: relative;
}
.content-box > .right .rec-articles .list a.item:not(:last-child) {
	margin-bottom:  1.4286rem;
}
.content-box > .right .rec-articles .list a.item .img-box {
	display: block;
	width:  100%;
	padding-top:  calc(300 / 377 * 100%);
	position: relative;
	overflow: hidden;
}
.content-box > .right .rec-articles .list a.item .img-box img {
	display: block;
	width:  100%;
	height:  100%;
	position: absolute;
	left:  0;
	top:  0;
	object-fit: cover;
	object-position: top center;
	transition: all 0.3s ease-in-out;
}
.content-box > .right .rec-articles .list a.item .img-box:hover img {
	transform:  scale(1.05);
}
.content-box > .right .rec-articles .list a.item .info {
	display: block;
	width:  100%;
	position: absolute;
	left:  0;
	bottom:  0;
	background: rgba(26, 130, 255, 0.7);
	height:  auto;
	text-align: center;
}
.content-box > .right .rec-articles .list a.item .info .tit {
	display: inline-block;
	height:  3.5714rem;
	line-height:  3.5714rem;
	font-size:  1.2857rem;
	color: #fff;
	font-weight: bold;
	text-align: center;
	max-width:  90%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 分页样式 */
.page-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:  2.1429rem;
    gap:  0.7143rem;
}

.page-item {
    display: inline-block;
    padding:  0.5714rem 1.0714rem;
    min-width:  2.8571rem;
    text-align: center;
    font-size:  1rem;
    color: #878787;
    border: 1px solid #ddd;
    background: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-item:hover {
    color: #1a82ff;
    border-color: #1a82ff;
}

.page-item.active {
    color: #fff;
    background: #1a82ff;
    border-color: #1a82ff;
}

.page-item:first-child,
.page-item:last-child {
    background: #1a82ff;
    color: #fff;
    border-color: #1a82ff;
}

.page-item:first-child:hover,
.page-item:last-child:hover {
    background: rgba(26, 130, 255, 0.8);
    border-color: rgba(26, 130, 255, 0.8);
}

.page-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5 !important;
    color: #ccc !important;
    border-color: #ddd !important;
}

.page-item.disabled:hover {
    background: #f5f5f5 !important;
    color: #ccc !important;
    border-color: #ddd !important;
}

@media (max-width: 1480px) { 
    .content-box > .left {
        flex: 0 0 calc(880 / 1200 * 100%);
        width: calc(880 / 1200 * 100%);
    }
    .content-box > .right {
        flex: 0 0 calc(300 / 1200 * 100%);
        width:  calc(300 / 1200 * 100%);
    }
}

@media (max-width: 1024px) { 
    .content-box {
        flex-direction: column;
    }
    .content-box > .left {
        flex: 0 0 100%;
        width:  100%;
    }
    .content-box > .right {
        margin-top:  2.1429rem;
        flex: 0 0 100%;
        width:  100%;
    }
}

@media (max-width: 768px) {
    .top-banner {
        height: 250px;
    }
    .content-box > .left .top-articles .tag {
        font-size:  1rem;
        width:  5.7143rem;
        height:  2.1429rem;
        line-height:  2.1429rem;
    }
    .content-box > .left .top-articles a.swiper-slide .article .article-img {
        padding-top:  calc(138 / 345 * 100%);
    }
    .content-box > .left .top-articles a.swiper-slide .article .article-info {
        padding:  0 0.5714rem;
    }
    .content-box > .left .top-articles a.swiper-slide .article .article-info .article-title {
        height:  2.8571rem;
        line-height:  2.8571rem;
        font-size:  1.1429rem;
    }
    .content-box > .left .top-articles {
        margin-bottom:  1.4286rem;
    }
    .content-box > .left .top-articles .tag {
        left:  -0.7143rem;
    }
    .content-box > .left .spec-article .tag {
        font-size:  1.1429rem;
        width:  6.8571rem;
        height:  2.5714rem;
        line-height:  2.5714rem;
    }
    .content-box > .left .spec-article .art-link {
        margin-left:  0.5714rem;
        max-width:  calc(100% - 8rem);
        width:  calc(100% - 8rem);
        font-size:  1.1429rem;
        line-height:  2.5714rem;
    }
    .content-box > .left .latest-article {
        margin-top:  1.4286rem;
        padding:  0.7143rem;
    }
    .content-box > .left .latest-article .list a.item {
        align-items: flex-start;
        padding:  0.2143rem 0;
    }
    .content-box > .left .latest-article .list a.item .time {
        flex: 0 0 70px;
        width:  5rem;
        font-size:  0.8571rem;
    }
    .content-box > .left .latest-article .list a.item .tit {
        font-size:  0.9286rem;
        line-height:  1.5;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .content-box > .left .articles-list .item {
        flex-direction: column;
        padding:  0.7143rem 0;
    }
    .content-box > .left .articles-list .item .left {
        flex: 0 0 100%;
        width:  100%;
    }
    .content-box > .left .articles-list .item .right {
        padding:  0.7143rem;
        flex: 0 0 100%;
        max-width:  100%;
    }
    .content-box > .left .articles-list .item .right .top .tit {
        font-size:  1.1429rem;
    }
    .content-box > .left .articles-list .item .right .bottom {
        margin-top:  1.4286rem;
    }
    
    /* 移动端分页样式：只显示上一页和下一页按钮 */
    .page-box {
        margin-top:  1.4286rem;
        gap:  0.3571rem;
    }
    
    .page-item {
        padding:  0.4286rem 0.8571rem;
        min-width:  2.5rem;
        font-size:  0.8571rem;
    }
    
    /* 隐藏中间的页码，只保留上一页和下一页 */
    .page-item:not(:first-child):not(:last-child) {
        display: none;
    }
}