.grey {
	background: #f5f5f5;
}
.top-banner {
	height:  0;
	padding-top:  calc(9 / 16 * 100%);
	position: relative;
}
.top-banner img {
	display: block;
	position: absolute;
	top:  0;
	left:  0;
	width:  100%;
	height:  100%;
	object-fit: cover;
	object-position: center;
}
.top-banner .info {
	position: absolute;
	bottom:  0;
	left:  0;
	width:  100%;
	height:  auto;
	padding:  2.1429rem;
	display: block;
	background: rgba(0, 0, 0, 0.4);
}
.top-banner .info .tit {
	font-size:  1.4286rem;
	line-height:  1.1;
	margin-bottom:  1.0714rem;
	color: #fff;
}
.top-banner .info .p {
	font-size:  1rem;
	color: #fff;
	line-height:  1.5;
}
@media (max-width: 768px) {
	.top-banner .info {
		padding: 10px;
	}
	.top-banner .info .tit {
		margin-bottom:  0;
	}
	.top-banner .info .p {
		display: none;
	}
}
.info-mobile {
	display: none;
	padding:  1.0714rem;
	background-color: #fff;
	margin:  2.1429rem 0 0 0;
	line-height:  1.7143rem;
	height:  auto;
}
@media (max-width: 768px) {
	.info-mobile {
		display: block;
	}
}
.articles-list {
	margin-top:  2.1429rem;
	display: block;
	height:  auto;
}
.articles-list .item {
	background: #fff;
	justify-content: flex-start;
	padding:  1.4286rem;
}
.articles-list .item:not(:last-child) {
	margin-bottom:  1.4286rem;
}
@media (max-width: 768px) {
	.articles-list .item {
		padding: 15px;
		flex-wrap: wrap;
	}
}
.articles-list .item .mobile-tit {
	display: none;
}
@media (max-width: 768px) {
	.articles-list .item .mobile-tit {
		display: block;
		flex: 0 0 100%;
		width: 100%;
		font-size: 16px;
		line-height: 22px;
		color: #787878;
		margin-bottom: 15px;
	}
}
.articles-list .item .left {
	flex: 0 0 360px;
	width:  25.7143rem;
}
.articles-list .item .left .img-box {
	display: block;
	width:  100%;
	padding-top:  calc(14 / 25 * 100%);
	position: relative;
}
.articles-list .item .left .img-box img {
	display: block;
	position: absolute;
	top:  0;
	left:  0;
	width:  100%;
	height:  100%;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 768px) {
	.articles-list .item .left {
		flex: 0 0 50%;
		width: 50%;
	}
}
.articles-list .item .right {
	flex: 0 0 calc(100% - 400px);
	width:  calc(100% - 28.5714rem);
	padding-left:  2.1429rem;
	flex-direction: column;
	justify-content: space-between;
	height:  auto;
}
.articles-list .item .right a.top {
	display: block;
	width:  100%;
}
.articles-list .item .right a.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;
}
.articles-list .item .right a.top .tit:hover {
	color: #1a82ff;
}
.articles-list .item .right a.top .p {
	margin-top:  1rem;
	font-size:  1.0714rem;
	line-height:  1.5714rem;
	color: #878787;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.articles-list .item .right .bottom {
	height:  auto;
	align-items: center;
}
.articles-list .item .right .bottom span,
.articles-list .item .right .bottom a {
	font-size:  1rem;
	font-weight: 400;
	line-height:  1.5714rem;
	color: #878787;
	transition: all 0.3s ease;
}
.articles-list .item .right .bottom .tags .tag:not(:last-child) {
	margin-left:  0.1429rem;
}
.articles-list .item .right .bottom .author {
	margin-left:  1.7857rem;
}
.articles-list .item .right .bottom .time {
	margin-left:  auto;
	color: #c2c2c2;
}
.articles-list .item .right .bottom a:hover {
	color: #1a82ff;
}
@media (max-width: 768px) {
	.articles-list .item .right {
		flex: 0 0 50%;
		width: 50%;
		padding-left: 12px;
	}
	.articles-list .item .right a.top .tit {
		display: none;
	}
	.articles-list .item .right a.top .p {
		font-size:  0.8571rem;
		line-height:  2;
		margin-top:  0.5714rem;
	}
	.articles-list .item .right .bottom span,
	.articles-list .item .right .bottom a {
		font-size:  0.8571rem;
	}
	.articles-list .item .right .bottom .tags {
		display: none;
	}
	.articles-list .item .right .bottom .author {
		margin-left:  0;
	}
}
.articles-list .view-more {
	display: flex;
	justify-content: center;
	align-items: center;
	height:  2.2857rem;
	line-height:  2.2857rem;
	width:  10.7143rem;
	margin:  0.7143rem auto 1.4286rem;
	border: 1px solid #808080;
	font-size:  1rem;
	color: #000;
	transition: all 0.3s ease;
	box-sizing: border-box;
}
.articles-list .view-more:hover {
	background: #808080;
	color: #fff;
}
.rec-articles {
	display: block;
	height:  auto;
	padding-bottom:  2.1429rem;
}
.rec-articles .title {
	font-size:  1.2857rem;
	line-height:  1;
	padding-left:  0.7143rem;
	border-left:  #1a82ff 0.3571rem solid;
	margin-bottom:  1.4286rem;
}
.rec-articles .list {
	background-color: #fff;
	padding:  2.1429rem;
	height:  auto;
}
.rec-articles .list .item-wrap {
	box-sizing: border-box;
	display: block;
	flex: 0 0 33.3%;
	width:  33.3%;
	padding:  0.3571rem;
}
.rec-articles .list .item-wrap .item {
	box-sizing: border-box;
	display: block;
	width:  calc(100% - 2.1429rem);
	margin:  0 1.0714rem;
	box-shadow: 1px 1px 10px rgba(153, 153, 153, 0.35);
	border-radius: 5px;
	overflow: hidden;
	transition: all 0.3s ease;
}
.rec-articles .list .item-wrap .item .img-box {
	display: block;
	width:  100%;
	height:  auto;
	padding-top:  calc(9 / 16 * 100%);
	position: relative;
}
.rec-articles .list .item-wrap .item .img-box img {
	display: block;
	position: absolute;
	left:  0;
	top:  0;
	width:  100%;
	height:  100%;
	object-fit: cover;
	object-position: center;
}
.rec-articles .list .item-wrap .item .info {
	display: block;
	height:  auto;
	padding:  1.0714rem 0.8571rem;
}
.rec-articles .list .item-wrap .item .info .tit {
	color: #5b5b5b;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:  1.1429rem;
	line-height:  1.5;
	height:  3.4286rem;
	transition: all 0.3s ease;
}

/* 分页样式 */
.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 (min-width: 768px) {
	.rec-articles .list .item-wrap .item:hover {
		transform: translateY(-2px);
	}
	.rec-articles .list .item-wrap .item:hover .info .tit {
		color: #1a82ff;
	}
}
@media (max-width: 768px) {
	.rec-articles .list {
		padding: 0;
		background: transparent;
		flex-wrap: wrap;
		margin-left: -15px;
		margin-right: -15px;
		width: auto;
	}
	.rec-articles .list .item-wrap {
		flex: 0 0 100%;
		width:  100%;
		padding:  0;
		margin-bottom:  1.0714rem;
	}
	.rec-articles .list .item-wrap .item {
		width:  calc(100% - 1.1429rem);
		margin:  0 0.5714rem;
		display: flex;
	}
	.rec-articles .list .item-wrap .item .img-box,
	.rec-articles .list .item-wrap .item .info {
		width:  50%;
	}
	.rec-articles .list .item-wrap .item .img-box {
		padding-top:  calc(9 / 16 * 50%);
	}
	.rec-articles .list .item-wrap .item .info .tit {
		font-size:  1.0714rem;
		-webkit-line-clamp: 3;
		height:  4.8214rem;
	}
	    /* 移动端分页样式：只显示上一页和下一页按钮 */
    .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;
    }
}