@media screen {
	html,body{
	width:100%;
	}
	body{
		width:100%;
		min-width:1080px;
	}
	.archive-info{
		position: relative;
	}
	.gray-content{
		padding: 0px 50px !important;
		width: 1080px;
	}
	.image-content {
		width:40%;
	}
	
}
@media screen and (min-width:1081px){
	.gray-content{
		width: 100vw;
	}
}
	
@media screen and (min-width:1320px){
	html,body{
		width:100%;
	}
	body{
		width:100%;
		min-width:1320px;
	}
	.archive-info{
		padding: 0 60px;
		position: relative;
	}
	.gray-content{
		padding: 0px 150px !important;
	}
	.image-content {
		width:50%;
	}
}

@media screen and (min-width:1698px){
	html,body{
		width:100%;
	}
	body{
		width:100%;
		min-width:1698px;
	}
	.archive-info{
		padding: 0 250px;
		position: relative;
	}
	.gray-content{
		padding: 0px 360px !important;
	}
	.image-content {
		width:50%;
	}
}

@media screen and (min-width:1920px){
	html,body{
		width:100%;
	}
	body{
		width:100%;
		min-width:1920px;
	}
	.archive-info{
		padding: 0 360px;
		position: relative;
	}
	.gray-content{
		padding: 0px 300px !important;
	}
	.image-content {
		width:50%;
	}
}
.news-info{
	overflow: hidden;
}
.gray-content { 
	position: relative; 
	z-index: 1; 
	background: rgba(235, 237, 242, 1);
	height:600px;
	object-fit: cover;
	left: 50%;
    transform: translateX(-50%);
}

.flex-content {
    display: flex;
    flex-direction: row;
    width:1060px;
}
.gray-text{
	display: flex; 
    flex-direction: column; 
    justify-content: center;
    width:50%;
    height:600px;
}
.gray-titile{
	font-family: Microsoft YaHei;
	font-weight: 700;
	font-size: 40px;
	line-height: 140%;
	color:rgba(22, 48, 105, 1);
	text-align: left;
	width:100%;
	overflow-wrap: break-word;
}
.gray-desc{
	margin-top:30px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 16px;
	line-height: 200%;
	color: rgba(88, 88, 88, 1);
	text-align: left;
	width:100%;
	overflow-wrap: break-word;
}
.image-content{
	display:flex;
	justify-content: center; 
	align-items: center;
}
.image-content img{
	width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.banner-content {
    display: flex;
    flex-direction: row;
    width:1080px;
    height:480px;
    margin:auto;
    gap:20px;
}
.left-carousel{
	width:70%;
}
/*
轮播图
*/

.carousel-container {
	margin:50px auto 0px;
    height: 380px;
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel-item {
    width: 85%;
    left: 7.5%;
}


.carousel-item {
    position: absolute;
    width: 520px;
    height: 300px;
    top: 7.5%;
    left: 15%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), 
                opacity 0.8s ease, 
                z-index 0.8s ease;
    cursor: pointer;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* 当前活动项 */
.carousel-item.active {
    z-index: 10;
    transform: translateZ(0);
}

/* 左右相邻项 */
.carousel-item.prev {
    z-index: 5;
    transform: translateX(-30%) translateZ(-100px) scale(0.7);
    opacity: 0.8;
}

.carousel-item.next {
    z-index: 5;
    transform: translateX(30%) translateZ(-100px) scale(0.7);
    opacity: 0.8;
}


.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(22, 48, 105, 0.7);
    transition: all 0.3s ease;
}

.dot.active {
    background: rgba(14, 50, 131, 1);
}

.right-content{
	width:300px;
	display: flex; 
    flex-direction: column; 
    justify-content: center;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(62, 107, 201, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	width: 70px;
 	height: 70px;
 	z-index:100;
}

.play-triangle {
	width: 0;
	height: 0;
	border-left: 20px solid white;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	margin-left: 2px;
}


.right-titile{
	font-family: Microsoft YaHei;
	font-weight: 700;
	font-size: 28px;
	line-height: 140%;
	color: rgba(22, 48, 105, 1);
}
.right-desc{
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 16px;
	line-height: 200%;
	color: rgba(88, 88, 88, 1);
	margin-top:20px;
}

.archive-background{
	height:700px;
	width:100vw;
    padding-top:100px;
    position: relative;
    background: rgba(248, 248, 248, 1);
    left: 50%;
    transform: translateX(-50%);
}
.archive-content{
	display: grid;
    grid-template-columns: repeat(2, 500px);
    gap: 40px;
    justify-content: center;
}

.archive-card {
    background: white;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 510px;
}

.archive-image {
    height: 270px;
    width:100%;
}

.archive-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-value {
    height: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.archive-title {
    margin-bottom: 25px;
    font-family: Microsoft YaHei;
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: rgba(22, 48, 105, 1);
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 28px;
}

.archive-subtitle {
    margin-bottom: 15px;
    flex-grow: 1;
    font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
    color: rgba(88, 88, 88, 1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 78px;
}

.card-button {
    display: inline-block;
    background: rgba(32, 68, 147, 1);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 130px;
    color: white;
    text-decoration: none;
    text-align: center;
    font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
    margin-bottom:10px;
    
}

.card-button:hover {
    background: #000382;
    color: white;
}