* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root {
	--primary-red: #c81f32;
	--light-red: #f5f0f1;
	--text-dark: #000;
	--text-light: #666;
	--border-color: #ddd;
}
body {
	color: var(--text-dark);
	line-height: 1.6;
	background: #fff;
}

/* 头部横幅 - 响应式高度+背景适配 */
.header-banner {
	width: 100%;
	height: clamp(300px, 80vw, 606px); /* 自适应高度 */
	background: url('szften_apec.png') left top/cover no-repeat;
	color: white;
	padding: clamp(250px, 70vw, 527px) 5% 0 5%;
	position: relative;
}
.gov-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(30px, 8vw, 60px); /* 自适应间距 */
}
.gov-logo .red-squares {
	display: flex;
	flex-direction: column;
}
.gov-logo .red-squares .row {
	display: flex;
	gap: 4px;
}
.gov-logo .red-squares .square {
	width: 16px;
	height: 16px;
	background-color: var(--primary-red);
}
.gov-logo .text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.banner-title {
	font-size: clamp(18px, 5vw, 36px);
	font-weight: bold;
	line-height: 1.1;
}
.banner-title .red {
	color: var(--primary-red);
}
.banner-subtitle {
	font-size: clamp(18px, 3vw, 26px);
	font-weight: 500;
}

/* About APEC - 响应式适配 */
.about-section {
	padding: clamp(20px, 5vw, 40px) 5%;
	max-width: 1400px;
	margin: 0 auto;
}
.section-title {
	font-size: clamp(18px, 3vw, 24px); /* 自适应标题大小 */
	color: var(--primary-red);
	margin-bottom: 20px;
	text-align: left;
	position: relative;
	display: inline-block;
}
.section-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 2px;
	background-color: var(--primary-red);
}
/* WHAT/WHEN/WHERE 按钮 - 移动端堆叠+自适应尺寸 */
.tabs {
	display: flex;
	justify-content: center;
	gap: clamp(8px, 2vw, 15px);
	margin-bottom: 20px;
	flex-wrap: wrap; /* 移动端自动换行 */
}
.tab-btn {
	padding: clamp(8px, 2vw, 12px) clamp(20px, 6vw, 45px); /* 自适应内边距 */
	border: 2px solid var(--primary-red);
	background: white;
	font-size: clamp(14px, 3vw, 24px); /* 自适应按钮文字 */
	font-weight: bold;
	color: var(--primary-red);
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	flex-shrink: 0; /* 防止按钮被压缩 */
}
.tab-btn.active {
	background-color: var(--primary-red);
	color: white;
}
.tab-content {
	border: 1px solid var(--border-color);
	padding: clamp(15px, 4vw, 30px);
	position: relative;
	overflow: hidden;
	min-height: 200px;
	display: flex;
	align-items: center;
	background: url('3w_bg.png') center/cover no-repeat;
	opacity: 0.95;
}
.tab-pane {
	display: none;
	width: 100%;
	font-size: clamp(14px, 2vw, 16px); /* 自适应文字 */
	line-height: 1.8;
}
.tab-pane.active {
	display: block;
}
.handbook-btn {
	display: block;
	text-align: center;
	color: var(--primary-red);
	font-weight: bold;
	text-decoration: underline;
	margin-top: 15px;
	font-size: clamp(16px, 2.5vw, 18px);
}

/* News & Videos - 响应式网格 */
.news-videos-section {
	display: grid;
	grid-template-columns: 1fr; /* 移动端默认单列 */
	gap: clamp(20px, 4vw, 30px);
	padding: 0 5% clamp(20px, 5vw, 40px);
	max-width: 1400px;
	margin: 0 auto;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.more-link {
	color: var(--primary-red);
	text-decoration: none;
	font-size: clamp(12px, 2vw, 14px);
}

/* News - 响应式图片网格 */
.news-section {
	height: auto;
	display: flex;
	flex-direction: column;
}
.news-list {
	flex: 1;
}
.news-grid-img {
	display: grid;
	grid-template-columns: 1fr; /* 移动端单列 */
	gap: clamp(10px, 2vw, 15px);
	margin-bottom: 18px;
}
.news-item-img {
	width: 100%;
	border: 1px solid var(--border-color);
	padding: 5px;
}
.news-img {
	width: 100%;
	height: clamp(100px, 25vw, 155px); /* 自适应图片高度 */
	margin-bottom: 8px;
	cursor: pointer;
}
.news-title img {
	width: 276px;
	height: 155px;
}
.news-title {
	font-size: clamp(12px, 2vw, 14px);
	color: var(--text-dark);
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
	line-height: 1.4;
	transition: color 0.2s;
}
.news-title:hover {
	color: var(--primary-red);
}
.news-date {
	font-size: clamp(10px, 1.8vw, 12px);
	color: var(--text-light);
}
.news-text-list {
	border-top: 1px solid var(--border-color);
}
.news-text-item {
	padding: 11px 0;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap; /* 移动端日期换行 */
	gap: 5px;
}

/* Video - 响应式适配 */
.videos-section {
	height: auto;
	display: flex;
	flex-direction: column;
}
.videos-list {
	flex: 1;
	border-top: 1px solid var(--border-color);
}
.video-item {
	margin-bottom: 0;
	border-bottom: 1px solid var(--border-color);
	border-radius: 0;
	padding: clamp(8px, 2vw, 10px);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap; /* 移动端图标换行 */
	gap: 8px;
}
/* 第一条红底白字 */
.video-item:first-child {
	background-color: var(--primary-red);
	color: white;
}
.video-item:first-child .video-info-title {
	color: white;
	font-weight: bold;
}
.video-item:first-child .video-date {
	color: rgba(255,255,255,0.9);
}
.play-icon {
	width: clamp(20px, 4vw, 28px);
	height: clamp(20px, 4vw, 28px);
	border: 2px solid white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.play-icon::after {
	content: '';
	width: 0;
	height: 0;
	border-top: clamp(5px, 1.5vw, 7px) solid transparent;
	border-bottom: clamp(5px, 1.5vw, 7px) solid transparent;
	border-left: clamp(8px, 2vw, 10px) solid white;
}
/* 悬浮变红底白字 */
.video-item:hover:not(:first-child) {
	background-color: var(--primary-red);
	color: white;
}
.video-item:hover:not(:first-child) .video-info-title {
	color: white;
}
.video-item:hover:not(:first-child) .video-date {
	color: rgba(255,255,255,0.9);
}
.video-info {
	padding: 0;
	background: transparent;
}
.video-info-title {
	font-size: clamp(12px, 2vw, 14px);
	margin-bottom: 0;
	line-height: 1.4;
}

/* Photo - W型排列 响应式适配 */
.photos-section {
	padding: 0 5% clamp(30px, 8vw, 60px);
	max-width: 1400px;
	margin: 0 auto;
}
.photos-grid {
	display: grid;
	grid-template-areas:
		"a b c"
		"d . e";
	grid-template-columns: 1fr 1fr 1fr;
	gap: clamp(10px, 2vw, 15px);
	margin-top: 20px;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.photo-item {
	width: clamp(200px, 80vw, 320px);
	height: clamp(120px, 45vw, 180px);
	border-radius: 18px;
	cursor: pointer;
	position: relative;
	margin: 0 auto;
}
.photo-item img {
	border-radius: 18px;
	width: 320px;
	height: 180px;
}
.photo-item:nth-child(1){grid-area: a; z-index: 1;}
.photo-item:nth-child(2){grid-area: b; z-index: 1;}
.photo-item:nth-child(3){grid-area: c; z-index: 1;}
.photo-item:nth-child(4){grid-area: d; left: clamp(50px, 20vw, 205px); bottom: clamp(20px, 8vw, 50px); z-index: 2;}
.photo-item:nth-child(5){grid-area: e; right: clamp(50px, 20vw, 205px); bottom: clamp(20px, 8vw, 50px); z-index: 2;}

/* 页脚 - 响应式适配 */
.footerBg2{ background:#bd1a2d; }
.footer{color:#fff; max-width:1200px; overflow:hidden; padding:2em 0; margin:0 auto;}
.footerLeft{ width:42%; display:table;}
.footerLeft .textLeft{}
.footerLeft .textLeft h1 { font-size: 24px; margin: 0; max-width: 493px; font-weight: normal; font-family: 微软雅黑, "sans-serif", Arial;}
.footerBg{ background:#7c0917;}
.footerLeft .textLeft span{ display:block; width:30%; height:3px; background:#fff; margin:0.5em auto;}
.footerLeft .textLeft p{ font-size:14px; line-height:1.8; margin:0 0 0.5em 0;}
.footerRight ul{ min-width:40%; float:right;line-height:2.5; border-left:1px solid #fff; padding:0 0 0 2em; margin:1em 0 0 0;}
.footerRight ul li a{ color:#fff;}
.footerRight{ width:48%; padding:1em 0 0 0;}
.footerRight span{ float:left; text-align:center; width:29%; color:#fff; line-height:2;}
.footerRight span.jc{ width:10%;}
.footerRight span img{ max-width:90%; display:block; margin:0 auto;}
.footerBg .bottomBQ{ line-height:1.75; padding:1em; text-align:center; color:#fff; }
.footerBg .bottomBQ span{ padding:0 1em; font-size:14px;}
.footerBg .bottomBQ span a{ font-size:14px; text-decoration: none;}
.footerBg .bottomBQ span.hui{ background:url(futian20200810_214.png) left center no-repeat; padding:0 1em 0 2em; background-size:auto 1.5em; display:inline-block;}

.AllLeftCon{ float:left;}
.AllRightCon{ float:right;}
/* 平板及以上恢复双列 */
@media (min-width: 768px) {
	.news-videos-section {
		grid-template-columns: 1fr 1fr;
	}
}
/* 平板及以上双列 */
@media (min-width: 576px) {
	.news-grid-img {
		grid-template-columns: 1fr 1fr;
	}
}
/* 移动端重构图片排列（取消W型，改为单列/双列） */
@media (max-width: 768px) {
	.footerBg2{ margin:2em 0 0 0; }
	.footer{ margin:0 3%;}
	.footerLeft{ width:100%;}
	.footerLeft .textLeft h5{ background:none; margin:2em 0;}
	.footerRight ul{ float:none; clear:both; border:none; padding:0;}
	.footerLeft .textLeft span{ margin:0.5em 0;}
	.AllLeftCon,.AllRightCon{ float:none; width:auto!important;display:block; height:auto; padding:0; }
	.header-banner {
		background: url('szften_apec.png') left -13vw top/cover no-repeat;
	}
	.news-title img {
		width: 100%;
		height: auto;
	}
	.photos-grid {
		grid-template-areas:
			"a b"
			"c d"
			"e .";
		grid-template-columns: 1fr 1fr;
	}
	.photo-item {
		width: 100%;
		height: clamp(120px, 40vw, 180px);
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 1 !important;
		margin: 0 auto;
	}

}
/* 小屏手机单列 */
@media (max-width: 480px) {
	.photos-grid {
		grid-template-areas:
			"a"
			"b"
			"c"
			"d"
			"e";
		grid-template-columns: 1fr;
	}
}
/* 通用响应式补充 */
@media (min-width: 768px) {
	.footerLeft{ width:42%; display:table; margin-bottom: 0;}
	.footerRight{ width:48%; padding:1em 0 0 0;}
	.footerRight ul{ min-width:40%; float:right; border-left:1px solid #fff; padding:0 0 0 2em; margin:1em 0 0 0;}
	.footerRight span{ float:left; width:29%; margin:0;}
	.footerBg .bottomBQ span{ display: inline-block; margin: 0;}
}