/* faq2.css —— faq2.html（列表页）与 faq-detail.html（详情页）共用样式
   约定：所有选择器以 .f2- / .faq2 / .faq2-detail 前缀限定（.banner 两条除外） */

/* ============ 1. 列表页深色 hero ============ */
/* 说明：.f2-hero 已统一由 ban.html 输出、样式放在 /skin/css/common.css（全站内页共用），
   此处不再重复定义，避免同一选择器两处维护。 */

/* ============ 2. 列表区块 / 段标题 / 分组 ============ */
.faq2 {
	background: #f8f8f8;
	padding: 50px 0 80px;
	width: 100%;
	min-width: 1200px;
}

.f2-tit {
	text-align: center;
	padding: 10px 0 40px;
}

.f2-tit p {
	font-size: 12px;
	color: #999;
	letter-spacing: 3px;
	line-height: 24px;
	margin-bottom: 0;
}

.f2-tit span {
	font-size: 20px;
	color: #004e79;
	position: relative;
	display: inline-block;
	padding: 0 18px;
	background: #f8f8f8;
	z-index: 1;
}

.f2-tit span:before {
	content: "";
	position: absolute;
	top: 13px;
	left: -90px;
	width: 90px;
	height: 1px;
	background: #ccc;
}

.f2-tit span:after {
	content: "";
	position: absolute;
	top: 13px;
	left: 100%;
	width: 90px;
	height: 1px;
	background: #ccc;
}

.f2-group {
	margin-bottom: 36px;
}

.f2-group-tit {
	font-size: 18px;
	color: #004e79;
	font-weight: bold;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e8edf0;
}

.f2-group-idx {
	display: inline-block;
	font-size: 12px;
	color: #fff;
	background: #004e79;
	padding: 2px 10px;
	margin-right: 12px;
	border-radius: 3px;
	letter-spacing: 1px;
	font-weight: normal;
	vertical-align: middle;
	line-height: 1.6;
}

/* ============ 3. 卡片栅格 ============ */
.f2-grid {
	display: -webkit-box;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.f2-card {
	background: #fff;
	border: 1px solid #e8edf0;
	border-radius: 8px;
	overflow: hidden;
	-webkit-transition: -webkit-transform .35s ease, box-shadow .35s ease, border-color .35s ease;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.f2-card a {
	display: block;
	padding: 28px 28px 24px;
	position: relative;
	color: #444;
	height: 100%;
}

.f2-card:hover {
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 78, 121, .10);
	border-color: #bcdcea;
}

.f2-num {
	display: block;
	font-size: 32px;
	color: rgba(0, 78, 121, .15);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 14px;
	letter-spacing: 1px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	-webkit-transition: color .35s ease;
	transition: color .35s ease;
}

.f2-card:hover .f2-num {
	color: rgba(44, 182, 236, .4);
}

.f2-q {
	font-size: 17px;
	color: #222;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 10px;
	padding-right: 30px;
}

.f2-sum {
	font-size: 13px;
	color: #666;
	line-height: 1.8;
	margin: 0 0 16px;
}

.f2-more {
	display: inline-block;
	font-size: 13px;
	color: #004e79;
	font-weight: 500;
	letter-spacing: 1px;
}

.f2-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1px solid #004e79;
	border-bottom: 1px solid #004e79;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-left: 8px;
	vertical-align: middle;
	-webkit-transition: -webkit-transform .35s ease;
	transition: transform .35s ease;
}

.f2-card:hover .f2-arrow {
	-webkit-transform: translateX(4px) rotate(-45deg);
	transform: translateX(4px) rotate(-45deg);
}

/* ============ 4. 详情页 ============ */
.faq2-detail {
	background: #f8f8f8;
	padding: 40px 0 80px;
	width: 100%;
	min-width: 1200px;
}

.f2-crumb {
	font-size: 13px;
	color: #999;
	padding-bottom: 20px;
	border-bottom: 1px solid #e8edf0;
	margin-bottom: 30px;
}

.f2-crumb a {
	color: #999;
	-webkit-transition: color .3s;
	transition: color .3s;
}

.f2-crumb a:hover {
	color: #004e79;
}

.f2-crumb em {
	font-style: normal;
	margin: 0 8px;
	color: #ccc;
}

.f2-crumb span {
	color: #666;
}

.f2-article {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .06);
	padding: 50px 60px 40px;
}

.f2-article-tag {
	display: inline-block;
	font-size: 12px;
	color: #fff;
	background: #2cb6ec;
	padding: 4px 14px;
	border-radius: 3px;
	margin-bottom: 20px;
	letter-spacing: 1px;
}

.f2-article-tit {
	font-size: 28px;
	color: #222;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 0 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid #eef0f2;
}

.f2-article-body p {
	font-size: 15px;
	color: #444;
	line-height: 2;
	margin: 0 0 16px;
}

.f2-back {
	display: inline-block;
	margin-top: 30px;
	padding: 10px 26px;
	background: #004e79;
	color: #fff;
	font-size: 14px;
	border-radius: 4px;
	letter-spacing: 1px;
	-webkit-transition: background .3s;
	transition: background .3s;
}

.f2-back:hover {
	background: #2cb6ec;
	color: #fff;
}

.f2-pager {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	gap: 20px;
	margin-top: 24px;
}

.f2-prev,
.f2-next {
	display: block;
	-webkit-box-flex: 1;
	flex: 1;
	background: #fff;
	border: 1px solid #e8edf0;
	border-radius: 6px;
	padding: 18px 24px;
	color: #666;
	-webkit-transition: border-color .3s, -webkit-transform .3s, color .3s;
	transition: border-color .3s, transform .3s, color .3s;
}

.f2-prev {
	margin-right: auto;
}

.f2-next {
	margin-left: auto;
	text-align: right;
}

.f2-prev span,
.f2-next span {
	display: block;
	font-size: 12px;
	color: #999;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.f2-prev:hover,
.f2-next:hover {
	border-color: #2cb6ec;
	color: #004e79;
}

.f2-prev:hover {
	-webkit-transform: translateX(-4px);
	transform: translateX(-4px);
}

.f2-next:hover {
	-webkit-transform: translateX(4px);
	transform: translateX(4px);
}

.f2-prev.disabled,
.f2-next.disabled {
	color: #ccc;
	cursor: default;
	pointer-events: none;
}

/* ============ 5. 中等屏幕与窄屏适配（750px - 1200px 窗口不再撑出横向滚动条） ============ */
@media only screen and (max-width: 1199px) {

	.banner,
	.faq2,
	.faq2-detail {
		min-width: 100%;
	}

	.faq2 .container,
	.faq2-detail .container {
		width: 100%;
		padding: 0 4%;
		min-width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.banner img {
		width: 100%;
	}

	/* 中等屏幕下单列阅读更稳 */
	.f2-grid {
		grid-template-columns: 1fr;
	}

	.f2-article {
		padding: 40px;
	}

	.f2-pager {
		padding: 0;
	}
}

/* ============ 6. 移动端适配 ============ */
@media only screen and (max-width: 750px) {

	/* 通用 .container 是固定 1200px，common.css 只覆盖了 header / footer 两处，
	   这里对本页各 section 内的 .container 单独改为流式，写法对齐 footer .container */
	.faq2 .container,
	.faq2-detail .container {
		width: 100%;
		padding: 0 4%;
		min-width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.banner {
		min-width: 100%;
	}

	.banner img {
		width: 100%;
	}

	.faq2 {
		padding: .3rem 0 .5rem;
		min-width: 100%;
	}

	.f2-tit {
		padding: 0 0 .24rem;
	}

	.f2-tit p {
		font-size: .12rem;
		letter-spacing: .02rem;
	}

	.f2-tit span {
		font-size: .17rem;
		padding: 0 .12rem;
	}

	.f2-tit span:before {
		width: .36rem;
		top: .09rem;
		left: -.36rem;
	}

	.f2-tit span:after {
		width: .36rem;
		top: .09rem;
		left: 100%;
	}

	.f2-group {
		margin-bottom: .24rem;
	}

	.f2-group-tit {
		font-size: .16rem;
		padding-bottom: .12rem;
		margin-bottom: .14rem;
	}

	.f2-group-idx {
		font-size: .11rem;
		padding: 0 .06rem;
		margin-right: .08rem;
	}

	.f2-grid {
		grid-template-columns: 1fr;
		gap: .14rem;
	}

	.f2-card a {
		padding: .2rem .2rem .18rem;
	}

	.f2-num {
		font-size: .28rem;
		margin-bottom: .1rem;
	}

	.f2-q {
		font-size: .15rem;
		padding-right: .2rem;
		margin-bottom: .08rem;
	}

	.f2-sum {
		font-size: .12rem;
		line-height: 1.7;
		margin-bottom: .12rem;
	}

	.f2-more {
		font-size: .12rem;
	}

	.faq2-detail {
		padding: .24rem 0 .5rem;
		min-width: 100%;
	}

	.f2-crumb {
		font-size: .12rem;
		padding-bottom: .12rem;
		margin-bottom: .18rem;
	}

	.f2-article {
		padding: .24rem .2rem .2rem;
		border-radius: .06rem;
	}

	.f2-article-tag {
		font-size: .11rem;
		padding: 0 .08rem;
		margin-bottom: .12rem;
	}

	.f2-article-tit {
		font-size: .19rem;
		padding-bottom: .16rem;
		margin-bottom: .2rem;
		line-height: 1.5;
	}

	.f2-article-body p {
		font-size: .14rem;
		line-height: 1.9;
		margin-bottom: .12rem;
	}

	.f2-back {
		padding: .08rem .2rem;
		font-size: .13rem;
		margin-top: .2rem;
	}

	.f2-pager {
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		flex-direction: column;
		gap: .12rem;
		margin-top: .16rem;
	}

	.f2-prev,
	.f2-next {
		padding: .14rem .2rem;
	}

	.f2-prev span,
	.f2-next span {
		font-size: .11rem;
		margin-bottom: .04rem;
	}

}