/* ==========================================================================
   满分一对一 · 站点自定义补充样式
   说明：本文件只做三件事
   1) 修正模板自带的两个显示问题（手风琴加号在浅色底上看不见、问题前圆点用硬编码定位）
   2) 为新增页面组件（课程特色、上课流程、侧栏推荐、咨询引导）提供样式
   3) 补移动端适配
   不改动 assets/css/style.css，便于后续单独升级或回退。
   ========================================================================== */

:root {
	--mf-main: #1ec28e;
	--mf-main-dark: #17a678;
	--mf-accent: #ff853f;
	--mf-ink: #1e1e1e;
	--mf-muted: #616161;
	--mf-soft: #f0fbf8;
	--mf-line: #e6efec;
}


/* ==========================================================================
   一、手风琴（常见问题页 / 课程详情页）
   ========================================================================== */

/* 修正 1：模板里 a:before / a:after 是白色加号，落在白色背景上看不见 */
.faq-area.style-one .accordion li a:before,
.faq-area.style-one .accordion li a:after {
	background: var(--mf-ink);
}

.faq-area.style-one .accordion li a.active:before,
.faq-area.style-one .accordion li a.active:after {
	background: var(--mf-ink);
}

/* 修正 2：模板里问题前的小圆点用 right:-585px 硬编码定位，换宽度就错位 */
.faq-area.style-one .accordion li a span {
	display: inline-block;
	padding-left: 20px;
}

.faq-area.style-one .accordion li a span:before {
	right: auto;
	left: 0;
	top: 4px;
	width: 8px;
	height: 8px;
	background-color: var(--mf-main);
}

/* 问题条外观：给白色条目加上边界，和小圆点配合更容易扫读 */
.faq-area.style-one .accordion li a {
	font-size: 17px;
	line-height: 28px;
	border: 1px solid var(--mf-line);
	box-shadow: 0 6px 18px rgba(30, 194, 142, 0.06);
}

.faq-area.style-one .accordion li a.active {
	border-radius: 10px 10px 0 0;
}

.faq-area.style-one .accordion li p {
	font-size: 15px;
	line-height: 28px;
	color: var(--mf-muted);
	border: 1px solid var(--mf-line);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	padding: 22px 30px 26px 32px;
}

/* 问答分组小标题 */
.faq-group-title {
	margin: 30px 0 8px;
}

.faq-group-title h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--mf-ink);
	font-family: "Outfit", sans-serif;
}

.faq-group-title h3:before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--mf-main);
}

.faq-area.style-one .faq-button a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	background: var(--mf-main);
	padding: 15px 34px;
	border-radius: 50px;
	transition: all 0.3s ease;
}

.faq-area.style-one .faq-button a:hover {
	background: var(--mf-main-dark);
	color: #fff;
}


/* ==========================================================================
   二、课程特色 / 上课流程 / 侧栏（课程详情页）
   ========================================================================== */

.course-highlight-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.single-course-highlight {
	background: var(--mf-soft);
	border: 1px solid var(--mf-line);
	border-left: 3px solid var(--mf-main);
	border-radius: 8px;
	padding: 16px 18px;
}

.single-course-highlight h4 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 6px;
	font-family: "Outfit", sans-serif;
}

.single-course-highlight p {
	font-size: 14px;
	line-height: 24px;
	color: var(--mf-muted);
	margin: 0;
}

.course-flow-list ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.course-flow-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--mf-line);
}

.course-flow-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.course-flow-list .flow-step {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mf-main);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	font-family: "Outfit", sans-serif;
}

.course-flow-list .flow-body h5 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 4px;
	font-family: "Outfit", sans-serif;
}

.course-flow-list .flow-body p {
	font-size: 14px;
	line-height: 24px;
	color: var(--mf-muted);
	margin: 0;
}

/* 侧栏：价格补充说明 */
.course-price-desc p {
	font-size: 13px;
	line-height: 22px;
	color: var(--mf-muted);
	margin: 14px 0 0;
}

/* 侧栏：其他课程 */
.event-sidebar.related-course-sidebar {
	margin-top: 30px;
}

.related-course-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-course-list li {
	border-bottom: 1px dashed var(--mf-line);
}

.related-course-list li:last-child {
	border-bottom: 0;
}

.related-course-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--mf-ink);
	font-family: "Outfit", sans-serif;
	transition: all 0.3s ease;
}

.related-course-list li a:hover {
	color: var(--mf-main);
	padding-left: 4px;
}

.related-course-list .related-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--mf-main);
	white-space: nowrap;
}

/* 课程列表页价格说明 */
.course-price-note {
	margin-top: 34px;
}

.course-price-note p {
	font-size: 14px;
	line-height: 26px;
	color: var(--mf-muted);
	margin: 0;
	padding: 18px 24px;
	background: var(--mf-soft);
	border-radius: 10px;
	text-align-last: left;
}


/* ==========================================================================
   三、联系我们页 · 咨询引导
   ========================================================================== */

.contact-guide-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-guide-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px dashed var(--mf-line);
}

.contact-guide-list li:first-child {
	padding-top: 0;
}

.contact-guide-list .guide-num {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mf-soft);
	color: var(--mf-main);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	font-family: "Outfit", sans-serif;
}

.contact-guide-list .guide-body h5 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 4px;
	font-family: "Outfit", sans-serif;
}

.contact-guide-list .guide-body p {
	font-size: 14px;
	line-height: 24px;
	color: var(--mf-muted);
	margin: 0;
}

.inner_section .contact-form {
	text-align: center;
}

.inner_section .contact-form .contact-guide-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--mf-main);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	padding: 15px 40px;
	border-radius: 50px;
	margin-top: 6px;
	transition: all 0.3s ease;
}

.inner_section .contact-form .contact-guide-btn:hover {
	background: var(--mf-main-dark);
	color: #fff;
	transform: translateY(-2px);
}

.inner_section .contact-guide-note {
	font-size: 13px;
	line-height: 22px;
	color: var(--mf-muted);
	text-align: center;
	margin: 16px 0 0;
}


/* ==========================================================================
   四、移动端适配
   ========================================================================== */

@media (max-width: 991px) {

	.faq-area.style-one .accordion li a {
		font-size: 16px;
		padding-right: 55px;
	}

	.faq-area.style-one .accordion li p {
		padding: 20px 24px 24px;
	}

	.contact-guide-list li {
		gap: 14px;
	}

	.inner_section .contact-form-box.style_two {
		padding: 40px 28px 46px;
		margin-top: 40px;
	}
}

@media (max-width: 767px) {

	.course-highlight-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.course-flow-list li {
		gap: 13px;
	}

	.course-flow-list .flow-step {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.faq-group-title {
		margin: 24px 0 6px;
	}

	.faq-area.style-one .accordion li a {
		font-size: 15px;
		line-height: 25px;
		padding: 16px 52px 18px 20px;
	}

	.faq-area.style-one .accordion li a span {
		padding-left: 16px;
	}

	.course-price-note p {
		padding: 16px 18px;
		text-align: left;
	}
}


/* ==========================================================================
   五、关于我们页 · 分区块排版
   （借鉴同行「先讲事实、再给关键信息表、再讲流程与原则」的层次，
     视觉沿用本站模板的绿色体系，不复用对方站的配色与版式）
   ========================================================================== */

.mf-sec-head .section-sub-title {
	margin-bottom: 14px;
}

.mf-sec-head .section_title h1 {
	font-size: 34px;
	line-height: 46px;
}

.mf-sec-desc {
	padding-top: 46px;
}

.mf-sec-desc p {
	font-size: 15px;
	line-height: 30px;
	color: var(--mf-muted);
	margin: 0;
}

.mf-para {
	margin-top: 22px;
}

.mf-para p {
	font-size: 15px;
	line-height: 31px;
	color: var(--mf-muted);
	margin-bottom: 16px;
}

.mf-para p:last-child {
	margin-bottom: 0;
}


/* ---------- 我们是什么 + 关键信息表 ---------- */

.mf-what-area {
	padding: 90px 0 70px;
}

.mf-fact-card {
	background: var(--mf-soft);
	border: 1px solid var(--mf-line);
	border-radius: 16px;
	padding: 30px 32px 12px;
}

.mf-fact-card h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 8px;
	font-family: "Outfit", sans-serif;
}

.mf-fact-card h3:before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--mf-main);
}

.mf-fact-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mf-fact-card li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px dashed rgba(30, 194, 142, 0.25);
}

.mf-fact-card li:last-child {
	border-bottom: 0;
}

.mf-fact-label {
	flex: 0 0 72px;
	font-size: 14px;
	line-height: 26px;
	font-weight: 600;
	color: var(--mf-ink);
	font-family: "Outfit", sans-serif;
}

.mf-fact-value {
	flex: 1;
	font-size: 14px;
	line-height: 26px;
	color: var(--mf-muted);
}


/* ---------- 数据条 ---------- */

.mf-data-area {
	background: var(--mf-main);
	padding: 60px 0 34px;
}

.mf-data-box {
	text-align: center;
	padding: 6px 0 22px;
}

.mf-data-box h3 {
	font-size: 44px;
	line-height: 52px;
	font-weight: 600;
	color: #fff;
	font-family: "Outfit", sans-serif;
	margin-bottom: 6px;
}

.mf-data-box h3 i {
	font-style: normal;
	font-size: 22px;
	margin-left: 3px;
}

.mf-data-box p {
	font-size: 14px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

.mf-data-note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	color: rgba(255, 255, 255, 0.72);
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}


/* ---------- 服务环节 ---------- */

.mf-step-area {
	padding: 90px 0 80px;
	background: #fff;
}

.mf-step-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}

.mf-step-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--mf-line);
	border-radius: 14px;
	padding: 26px 24px;
	box-shadow: 0 8px 24px rgba(30, 194, 142, 0.05);
}

.mf-step-num {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mf-soft);
	color: var(--mf-main);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	font-family: "Outfit", sans-serif;
}

.mf-step-body h4 {
	font-size: 17px;
	line-height: 26px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 8px;
	font-family: "Outfit", sans-serif;
}

.mf-step-body p {
	font-size: 14px;
	line-height: 25px;
	color: var(--mf-muted);
	margin: 0;
}


/* ---------- 老师匹配维度 ---------- */

.mf-match-area {
	padding: 80px 0;
	background: var(--mf-soft);
}

.mf-match-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mf-match-item {
	background: #fff;
	border: 1px solid var(--mf-line);
	border-left: 3px solid var(--mf-main);
	border-radius: 10px;
	padding: 20px 22px;
}

.mf-match-item h5 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 6px;
	font-family: "Outfit", sans-serif;
}

.mf-match-item p {
	font-size: 14px;
	line-height: 24px;
	color: var(--mf-muted);
	margin: 0;
}


/* ---------- 我们的原则 ---------- */

.mf-principle-area {
	padding: 90px 0 80px;
	background: #fff;
}

.mf-principle-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 46px;
}

.mf-principle-lead {
	max-width: 720px;
	margin: 20px auto 0;
}

.mf-principle-lead p {
	font-size: 15px;
	line-height: 30px;
	color: var(--mf-muted);
	margin: 0;
}

.mf-principle-item {
	background: #fff;
	border: 1px solid var(--mf-line);
	border-radius: 14px;
	padding: 30px 26px;
	text-align: left;
	transition: all 0.3s ease;
}

.mf-principle-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(30, 194, 142, 0.12);
	border-color: rgba(30, 194, 142, 0.4);
}

.mf-principle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--mf-soft);
	color: var(--mf-main);
	font-size: 22px;
	margin-bottom: 18px;
}

.mf-principle-item h4 {
	font-size: 17px;
	line-height: 26px;
	font-weight: 600;
	color: var(--mf-ink);
	margin-bottom: 10px;
	font-family: "Outfit", sans-serif;
}

.mf-principle-item p {
	font-size: 14px;
	line-height: 25px;
	color: var(--mf-muted);
	margin: 0;
}


/* ---------- 价格说明 ---------- */

.mf-price-area {
	padding: 80px 0 90px;
	background: var(--mf-soft);
}

.mf-price-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.mf-price-item {
	background: #fff;
	border: 1px solid var(--mf-line);
	border-radius: 14px;
	padding: 26px 22px;
	text-align: center;
}

.mf-price-stage {
	display: inline-block;
	font-size: 13px;
	line-height: 26px;
	font-weight: 600;
	color: var(--mf-main);
	background: var(--mf-soft);
	border-radius: 20px;
	padding: 0 16px;
	margin-bottom: 14px;
	font-family: "Outfit", sans-serif;
}

.mf-price-item h4 {
	font-size: 26px;
	line-height: 34px;
	font-weight: 600;
	color: var(--mf-ink);
	font-family: "Outfit", sans-serif;
	margin: 0;
}

.mf-price-item h4 span {
	display: block;
	font-size: 13px;
	line-height: 24px;
	font-weight: 400;
	color: var(--mf-muted);
	margin-top: 4px;
}

.mf-price-note {
	font-size: 13px;
	line-height: 24px;
	color: var(--mf-muted);
	margin: 18px 0 0;
}


/* ---------- 关于我们页 · 移动端 ---------- */

@media (max-width: 1199px) {

	.mf-principle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mf-step-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {

	.mf-what-area,
	.mf-step-area,
	.mf-principle-area {
		padding: 60px 0 50px;
	}

	.mf-match-area,
	.mf-price-area {
		padding: 56px 0;
	}

	.mf-sec-desc {
		padding-top: 0;
		margin-top: 16px;
	}

	.mf-fact-card {
		margin-top: 34px;
		padding: 26px 24px 10px;
	}

	.mf-step-grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px;
	}

	.mf-match-grid {
		margin-top: 34px;
	}

	.mf-principle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 32px;
	}

	.mf-data-box h3 {
		font-size: 34px;
		line-height: 42px;
	}

	.mf-data-area {
		padding: 48px 0 26px;
	}
}

@media (max-width: 767px) {

	.mf-match-grid,
	.mf-principle-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mf-price-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mf-sec-head .section_title h1 {
		font-size: 26px;
		line-height: 36px;
	}

	.mf-step-item {
		padding: 22px 20px;
	}

	.mf-data-box h3 {
		font-size: 28px;
		line-height: 36px;
	}

	.mf-data-box p {
		font-size: 13px;
	}

	.mf-data-box {
		padding: 4px 0 16px;
	}

	.mf-fact-card li {
		gap: 12px;
	}

	.mf-fact-label {
		flex: 0 0 66px;
		font-size: 13px;
	}
}


/* ==========================================================================
   六、常见问题页 · 左侧配图吸顶
   问题：问题列表比配图长得多（实测左栏 2323px / 配图 750px），往下翻问题时
        左栏滚走留白，版面发空。
   做法：配图整块 position: sticky，翻问题时停在视口里。
   约束：1) 仅 ≥1200px 生效 —— 低于该宽度 Bootstrap 会把两栏改成上下堆叠
           （col-xl-5 / col-xl-7），堆叠时吸顶会造成压字，必须关掉。
        2) 贴靠方向＝视口【底部】（卢总 2026-09-18 要求）：吸在顶部时配图下沿会被
           截掉，改成底部贴靠后人物下沿对齐屏幕底部，观感更顺。
           注意 sticky 是靠 top 定位的，"贴底"必须写成 top = 视口高 − 元素高；
           直接写 bottom:0 实测**完全吸不住**（元素照样滚走），不要那样写。
        3) 元素高度随栏宽跳变（实测：1200–1399 栏内宽 451 → 高 583；
           ≥1400 栏内宽 526 → 高 680），故用 --mf-h 按档记录；
           视口偏矮时再用 --mf-s 等比缩小，保证整块完整停在导航下方与屏幕底部之间。
        4) 顶部固定导航实测高 101px，故 top 不低于 120px（用 max() 兜底）。
   ========================================================================== */

/* 前置修复（关键，否则 sticky 完全不生效）：
   模板 theme-default.css 写了 body { overflow-x: hidden }。单轴 hidden 会让另一轴
   的计算值变成 auto，于是 <body> 自己成了滚动容器 —— sticky 便以 body 为参照，
   结果只是"跟着页面一起滚走"，看起来像没生效。
   改为 overflow-x: clip：一样能裁掉左右溢出的装饰图形，但 clip 不创建滚动容器；
   overflow-y 用 visible，body 不再是滚动容器，sticky 就能正确停靠视口。
   仅在本页生效（页面内含 .faq-area.style-one），不影响其他页面。 */
body:has(.faq-area.style-one) {
	overflow-x: clip;
	overflow-y: visible;
}

/* 前置修复二：配图原来超出自己的栏宽。
   配图 faq-thumb.png 是 580×750 的自然尺寸且四边满幅不透明；模板里左栏本是 col-xl-6，
   而本站改成了 col-xl-5，栏内宽度只剩 ~526px，配图便向右"溢出"约 54px，
   压到右栏问答卡的左侧约 30px（组标题"课程与内容"的"课"字会被盖住）。
   改为 max-width:100% 让它随栏收缩（1440 下只小约 9%，肉眼几乎无感），
   窄屏也不再溢出。装饰元素的纵向偏移同时换成百分比 —— 原 px 偏移是按 750px 高的
   满尺寸配图调的，配图一缩就会错位；换成百分比后在任何宽度都跟随配图。 */
.faq-area.style-one .faq-thumb img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.faq-area.style-one .faq-dot     { top: 28%; }
.faq-area.style-one .faq-star    { top: 19.2%; }
.faq-area.style-one .faq-qestion { top: 29.1%; }
.faq-area.style-one .faq-suport-box { bottom: 21.6%; }

@media (min-width: 1200px) {

	/* 覆盖模板 .style-one .faq-thumb-wrapper 的 relative / bottom:-20px */
	.faq-area.style-one .mf-faq-sticky {
		position: sticky;
		bottom: auto;
		transform-origin: top left;

		/* 元素布局高度：栏内宽 451 → 高 583（1200–1399），下面 ≥1400 档覆盖为 680 */
		--mf-h: 583px;
		--mf-s: 1;

		/* 底部贴靠 = top 取「视口高 − 元素视觉高 − 20px 呼吸位」
		   max(120px, …) 兜底：视口极矮时不让整块钻到固定导航底下 */
		top: max(120px, calc(100vh - var(--mf-h) * var(--mf-s) - 20px));
	}

}

@media (min-width: 1400px) {
	.faq-area.style-one .mf-faq-sticky { --mf-h: 680px; }
}

/* 视口偏矮：等比缩小（缩的是 --mf-s，上面的 top 公式会自动跟着重算） */
@media (min-width: 1200px) and (max-height: 860px) {
	.faq-area.style-one .mf-faq-sticky { --mf-s: .96; transform: scale(.96); }
}

@media (min-width: 1200px) and (max-height: 800px) {
	.faq-area.style-one .mf-faq-sticky { --mf-s: .90; transform: scale(.90); }
}

@media (min-width: 1200px) and (max-height: 740px) {
	.faq-area.style-one .mf-faq-sticky { --mf-s: .83; transform: scale(.83); }
}

@media (min-width: 1200px) and (max-height: 680px) {
	.faq-area.style-one .mf-faq-sticky { --mf-s: .76; transform: scale(.76); }
}

@media (min-width: 1200px) and (max-height: 620px) {
	.faq-area.style-one .mf-faq-sticky { --mf-s: .70; transform: scale(.70); }
}


/* ==========================================================================
   七、2026-09-18 巡检修正
     ① 导航「当前页面」标识
     ② 模块小标题下的 635px 长横线（模板默认值，会横穿主标题）在本站区块一律去掉
     ③ 关于我们首屏「10年 · 教培行业深耕」徽标可读性
     ④ 「我们的原则」标题与全站其它模块统一左对齐 + 补小标题下间距
   ========================================================================== */

/* ---------- ① 导航当前页高亮 ---------- */
/* 桌面端导航在 .educate-header-area 里；移动端下拉菜单在 .mobile-menu-area 里
   （它自带 sticky 类，模板 .sticky .header-menu ul li a 会把字刷成 #fff，需要压回主色）。
   所以「颜色」用宽选择器同时覆盖两套菜单，「下划线」只加在桌面端 ——
   移动端菜单项是 54px 的整行，bottom:26px 会横穿文字。 */
.header-menu ul li a.mf-active,
/* ⚠️ 移动端下拉开菜单时，meanmenu 会把原 <nav class="header-menu"> 换成
   <nav class="mean-nav">，所以 .header-menu 不再是祖先，必须用 .mean-nav 重新命中；
   meanmenu.min.css 里 .mean-container .mean-nav ul li a 是 (0,2,3)，
   这条 (0,3,3) 权重更高，能压回主色。 */
.mean-container .mean-nav ul li a.mf-active {
	color: var(--mf-main);
	font-weight: 600;
}

/* 桌面端悬停：模板的 a::before 会浮起一整块胶囊（未吸顶=绿底、吸顶=白底）。
   上面那条宽选择器权重高于模板的 :hover，不覆盖就会出现「绿字压绿底」→ 字看不见。 */
.educate-header-area .header-menu ul li a.mf-active:hover {
	color: var(--color-white);
}

/* 桌面端吸顶（底色 #1e1e1e、字白）：当前页仍用主色，对比度约 7:1 */
.educate-header-area.sticky .header-menu ul li a.mf-active {
	color: var(--mf-main);
}

.educate-header-area.sticky .header-menu ul li a.mf-active:hover {
	color: var(--title-color);
}

.educate-header-area .header-menu ul li a.mf-active::after {
	position: absolute;
	content: '';
	left: 20px;
	right: 16px;
	bottom: 26px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--mf-main);
	z-index: 2;
}

/* ---------- ② 去掉模板的 635px 长横线 ---------- */
/* style.css 里 .section-sub-title h6::after 是 width:635px，从标题左端起一路画 635px。
   模板自己的内页区块（.about-area.style-three.inner / .faq-area.style-one /
   .brand-area.style-one.inner）都把 background 设成了 transparent，
   本站自定义的 mf-* 区块没覆盖到 → 横线横穿主标题（老师匹配、我们的原则最明显）。 */
.mf-what-area .section-sub-title h6::after,
.mf-step-area .section-sub-title h6::after,
.mf-match-area .section-sub-title h6::after,
.mf-principle-area .section-sub-title h6::after,
.mf-price-area .section-sub-title h6::after,
.mf-sec-head .section-sub-title h6::after {
	content: none;
	display: none;
}

/* ---------- ③ 关于我们首屏徽标 ---------- */
/* 「10年 教培行业深耕」原本只有数字是主色、说明文字继承全站灰 #616161，
   压在深绿毛衣/橙色文件夹上完全读不出来。给整块加半透明深色托底、文字改白，
   主色数字保持品牌绿 —— 深底上绿字对比约 5:1、白字约 12:1。 */
.about-area.style-three .about-experience-box {
	bottom: 30px;
	left: 66px;
	padding: 14px 22px;
	border-radius: 12px;
	background: rgba(17, 28, 23, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
}

.about-area.style-three .about-experience-desc p {
	color: #ffffff;
	line-height: 26px;
	margin: 0;
}

/* ---------- ④ 我们的原则 ---------- */
/* 该区块是全站唯一把标题居中的模块（.col-lg-12.text-center），
   其余模块（我们是什么 / 服务流程 / 老师匹配 / 价格说明）一律左对齐 → 改为统一左对齐；
   同时补上小标题与主标题的间距（其它模块靠 .mf-sec-head 的 margin-bottom:14px，这块原先没有）。 */
.mf-principle-area .col-lg-12,
.mf-principle-area .section-sub-title,
.mf-principle-area .section_title h1 {
	text-align: left;
}

.mf-principle-area .section-sub-title {
	margin-bottom: 14px;
}

.mf-principle-area .mf-principle-lead {
	max-width: 860px;
	margin: 20px 0 0;
}


/* ==========================================================================
   八、价格口径调整（2026-09-18）
     「按学段分档」原来被当成全站价格口径，但原版英语 / 小学奥数 / KET·PET
     是课程线单独定价，套学段档会和「小学 88-108」自相矛盾
     → 学段档降级为「仅适用于 K12 常规学科」，另起一组课程线价格。
   ========================================================================== */

.mf-price-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	color: var(--mf-ink);
	margin: 0 0 14px;
}

.mf-price-sub::before {
	content: '';
	flex: none;
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--mf-main);
}

/* 第二组（特色课程线）与上一组拉开距离 */
.mf-price-sub.two {
	margin-top: 30px;
}

/* 价格说明紧跟第二组卡片 */
.mf-price-sub.two + .mf-price-grid + .mf-price-note {
	margin-top: 20px;
}


/* ==========================================================================
   九、全站纵向间距收敛（2026-09-18）
   背景：模板 responsive.css 只在 ≤599px 和 ≤479px 两档压过区块间距，
   768–1199（平板）这一整段几乎没有区块级压缩，等于沿用桌面值；
   另有几个内页区块（course-details / contact / about 头图）在任何断点都不压缩。
   本节的取值原则：桌面小幅收（约 -12%），平板中度收（约 -30%），
   手机明显收（约 -50%），但保底不低于 36px，避免"挤"。
   仅改上下内边距，不动左右内边距，也不动任何元素的高度与定位。
   ========================================================================== */

/* ---------- 桌面（≥1200）：小幅收敛 ---------- */

.breadcumb-area {
	padding: 212px 0 128px;
}

section.feature-area.style-one {
	padding: 92px 0 96px;
}

section.about-area.style-one {
	padding: 100px 0 0;
}

section.about-area.style-three {
	padding: 100px 0 92px;
}

.blog-area.style-one.blog {
	padding: 92px 0 84px;
}

.blog-details-area {
	padding-bottom: 96px;
}

.educate-details-course-area.style-inner {
	padding: 92px 0 78px;
}

section.course-details-area.style-inner {
	padding: 92px 0 96px;
}

section.contact_area.inner_section {
	padding: 88px 0 92px;
}

.faq-area.style-one {
	padding: 88px 0 34px;
}

.brand-area.style-one {
	padding: 70px 0;
}

.call-to-action.style-two {
	padding: 50px 0 56px;
}

.case-study-area.style-one {
	padding: 94px 0 80px;
}

.why-choose-area.style-one {
	padding: 92px 0 96px;
}

.mf-what-area {
	padding: 82px 0 64px;
}

.mf-data-area {
	padding: 56px 0 32px;
}

.mf-step-area {
	padding: 82px 0 72px;
}

.mf-match-area {
	padding: 74px 0 72px;
}

.mf-principle-area {
	padding: 82px 0 72px;
}

.mf-price-area {
	padding: 74px 0 80px;
}

.mf-step-grid {
	margin-top: 36px;
}

.mf-principle-grid {
	margin-top: 38px;
}

.mf-fact-card {
	padding: 28px 30px 12px;
}

.mf-sec-desc {
	padding-top: 38px;
}

.mf-price-sub.two {
	margin-top: 26px;
}


/* ---------- 平板（768–1199）：模板缺失的一档，本轮补上 ---------- */

@media (min-width: 768px) and (max-width: 1199px) {

	section.feature-area.style-one {
		padding: 68px 0;
	}

	section.about-area.style-one {
		padding: 68px 0 0;
	}

	section.about-area.style-three {
		padding: 64px 0 60px;
	}

	.blog-area.style-one.blog {
		padding: 64px 0 60px;
	}

	.blog-details-area {
		padding-bottom: 72px;
	}

	.educate-details-course-area.style-inner {
		padding: 64px 0 56px;
	}

	section.course-details-area.style-inner {
		padding: 64px 0 68px;
	}

	section.contact_area.inner_section {
		padding: 60px 0 64px;
	}

	.faq-area.style-one {
		padding: 60px 0 44px;
	}

	.brand-area.style-one {
		padding: 56px 0;
	}

	.call-to-action.style-two {
		padding: 44px 0 48px;
	}

	.case-study-area.style-one {
		padding: 68px 0 64px;
	}

	.why-choose-area.style-one {
		padding: 66px 0 70px;
	}

	.mf-what-area,
	.mf-step-area,
	.mf-principle-area {
		padding: 58px 0 48px;
	}

	.mf-data-area {
		padding: 44px 0 26px;
	}

	.mf-match-area,
	.mf-price-area {
		padding: 52px 0;
	}

	.mf-step-grid {
		margin-top: 32px;
	}

	.mf-principle-grid {
		margin-top: 32px;
	}

	.mf-fact-card {
		padding: 24px 26px 10px;
	}

	.mf-sec-desc {
		padding-top: 0;
		margin-top: 18px;
	}

	.mf-price-sub.two {
		margin-top: 24px;
	}
}


/* 头图区的上内边距必须大于导航高度，否则标题会被压住。
   桌面导航 101px，移动导航 64px —— 所以按下述两档分别给足净空。 */
@media (min-width: 992px) and (max-width: 1199px) {

	.breadcumb-area {
		padding: 186px 0 96px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {

	.breadcumb-area {
		padding: 150px 0 88px;
	}
}


/* ---------- 手机（≤767）：明显收紧，重点补 600–767 这一档 ----------
   注意：模板只在 480–599 / ≤479 两档处理过 feature-area 与 about-area，
   600–767 这段一直是桌面值（110/120），是本次最主要的"手机端空白"。 */

@media (max-width: 767px) {

	.breadcumb-area {
		padding: 138px 0 78px;
	}

	section.hero_area.style-one {
		padding: 120px 0 0;
		height: auto;
	}

	section.feature-area.style-one {
		padding: 50px 0;
	}

	section.about-area.style-one {
		padding: 40px 0 0;
	}

	section.about-area.style-three {
		padding: 54px 0 50px;
	}

	.blog-area.style-one.blog {
		padding: 46px 0;
	}

	.blog-details-area {
		padding-bottom: 52px;
	}

	.educate-details-course-area.style-inner {
		padding: 46px 0;
	}

	section.course-details-area.style-inner {
		padding: 52px 0 60px;
	}

	section.contact_area.inner_section {
		padding: 52px 0 58px;
	}

	.faq-area.style-one {
		padding: 54px 0 40px;
	}

	.brand-area.style-one {
		padding: 46px 0;
	}

	.call-to-action.style-two {
		padding: 38px 0 42px;
	}

	.case-study-area.style-one {
		padding: 50px 0 48px;
	}

	.why-choose-area.style-one {
		padding: 50px 0 !important;
	}

	.mf-what-area,
	.mf-step-area,
	.mf-principle-area {
		padding: 46px 0 40px;
	}

	.mf-data-area {
		padding: 36px 0 22px;
	}

	.mf-match-area,
	.mf-price-area {
		padding: 44px 0;
	}

	.mf-step-grid {
		margin-top: 26px;
	}

	.mf-principle-grid {
		margin-top: 26px;
	}

	.mf-fact-card {
		padding: 22px 20px 8px;
	}

	.mf-price-sub.two {
		margin-top: 22px;
	}
}

/* ==========================================================================
   十、常见问题手风琴 · 两处修正（2026-09-18 卢总反馈）
   问题：①折叠态下左边的绿点比文字高约 6px，不是上下居中
        ②展开后标题变白，落在同样白色的底上看不见
   ========================================================================== */

/* ---- 修正 A：绿点与文字垂直居中 ----
   成因：模板给 span:before 的 top 是 1px，因为模板原本画的是 20px 的大圆点；
   第一节把圆点改成 8px 时只改了尺寸、没同步改 top（还是 4px），
   于是圆点中心落在 8px，而行盒中心在 14px → 视觉上明显偏高。
   正确值 = (行高 − 圆点直径) ÷ 2，所以这里按行高算，不写死像素。   */

.faq-area.style-one {
	/* ⚠️ 必须与下面 .accordion li a 的 line-height 保持一致；
	   改字号/行高时两处一起改（≤767px 的 25px 在第四节里）。 */
	--mf-faq-lh: 28px;
}

.faq-area.style-one .accordion li a span:before {
	top: calc((var(--mf-faq-lh) - 8px) / 2);
}

/* ---- 修正 B：展开态标题不可见 ----
   成因：模板有 .style-one .accordion li a.active span { color: #fff }，
   而展开态的 a 底色仍是 #ffffff（模板没给展开态换底色）→ 白字白底。
   这里把展开态标题改回正文色。                                    */

.faq-area.style-one .accordion li a.active span {
	color: var(--mf-ink);
}

@media (max-width: 767px) {

	.faq-area.style-one {
		--mf-faq-lh: 25px;
	}
}


/* ==========================================================================
   十一、标题层级修正 · 每页唯一 H1（2026-09-18）
   背景：模板把每个区块标题都写成 <h1> —— 首页 10 个 H1、关于我们页 11 个 H1，
         而课程详情页 / 资讯中心 / 文章页一个 H1 都没有。
         搜索引擎和 AI 抓取时判断不出"这一页到底讲什么"，是本站最大的
         页面级 SEO 问题。
   做法：区块标题 h1 → h2；面包屑页标题 h4 → h1；文章标题 h2 → h1。
         每页只留一个 H1，且这个 H1 说明本页主题。
   ⚠️ 下面是模板里所有相关断点规则的逐条镜像（只换标签名，值一字未改），
      保证换标签前后渲染完全一致。以后改字号要连带改这里，别只改 style.css。
   ========================================================================== */

/* ---------- 区块标题 h1 → h2（逐断点镜像模板原值） ---------- */

.section_title h2 {
	font-size: 42px; line-height: 52px; color: var(--title-color); font-weight: 600;
}

.section_title.two h2 {
	font-size: 40px; line-height: 50px; color: var(--title-color); font-weight: 700;
}

.section_title.two h2 span {
	display: inline-block; color: var(--primary-color);
}

.section_title.four h2 {
	font-size: 45px; line-height: 55px; color: #1e1e1e; font-weight: 600; font-family: "Outfit";
}

.section_title.six h2 {
	font-size: 45px; line-height: 55px; color: #1e1e1e; font-weight: 600;
}

.section_title.six h2 span {
	display: inline-block; color: #1ec28e;
}

.section_title.saven h2 {
	font-size: 45px; line-height: 55px; color: #1e1e1e; font-weight: 600;
}

.section_title.saven h2 span {
	display: inline-block; color: #1ec28e;
}

.team-area.style-four .section_title.saven h2 {
	color: #fff;
}

.testimonial-area.style-three .section_title h2 {
	color: var(--color-white);
}

.testimonial-area.style-six .section_title.six h2 {
	font-size: 30px; line-height: 55px; color: #000000; font-weight: 600;
}

.testimonial-area.style-saven .section_title.six h2 {
	font-size: 30px; line-height: 55px; color: #000000; font-weight: 600;
}

.educate-trending-course-area.style-eight .section_title.saven h2 {
	color: #fff;
}

section.contact_area.style-six .section_title.six h2 {
	font-size: 32px; line-height: 42px; color: #1e1e1e; font-weight: 700; font-family: "Open Sans";
}

section.learn-place-area.style-one .section_title.saven h2 {
	color: #fff;
}

.inner_section .contact-section-title h2 {
	font-size: 34px; line-height: 52px; color: #1e1e1e; font-weight: 600; font-family: "Outfit"; text-align: center;
}

@media @media (min-width:1365px) and (max-width: 1399px) {
	section.about-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 40px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 40px; line-height: 52px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

}

@media @media (min-width:1300px) and (max-width: 1364px) {
	section.about-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 40px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 40px; line-height: 52px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

}

@media @media (min-width: 1200px) and (max-width: 1299px) {
	section.about-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 40px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 40px; line-height: 52px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

}

@media @media (min-width: 992px) and (max-width: 1199px) {
	section.feature-area.style-one .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.blog-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.testimonial-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.brand-area.style-one .section_title h2 {
		font-size: 36px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px; margin-bottom: 20px;
	}

	.reason-choose-area.style-two .section_title.two h2 {
		font-size: 35px; line-height: 45px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.testimonial-area.style-two .section_title.two h2 {
		font-size: 32px; line-height: 40px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 40px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-three .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.activitie-kids-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	.testimonial-area.style-four .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

}

@media @media (min-width: 768px) and (max-width: 991px) {
	section.feature-area.style-one .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-one .section_title h2 {
		font-size: 40px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.blog-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.testimonial-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.brand-area.style-one .section_title h2 {
		font-size: 36px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px; margin-bottom: 20px;
	}

	.reason-choose-area.style-two .section_title.two h2 {
		font-size: 35px; line-height: 45px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.testimonial-area.style-two .section_title.two h2 {
		font-size: 32px; line-height: 40px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 40px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-three .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.activitie-kids-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	.testimonial-area.style-four .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

}

@media @media (min-width: 600px) and (max-width: 767px) {
	section.feature-area.style-one .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-one .section_title h2 {
		font-size: 38px; line-height: 50px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.blog-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.testimonial-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.brand-area.style-one .section_title h2 {
		font-size: 36px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 36px; margin-bottom: 20px;
	}

	.reason-choose-area.style-two .section_title.two h2 {
		font-size: 35px; line-height: 45px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.testimonial-area.style-two .section_title.two h2 {
		font-size: 32px; line-height: 40px;
	}

	.course-category-section.style-two .section_title.two h2 {
		font-size: 38px; line-height: 50px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-three .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.addmission-learning-section .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 36px; line-height: 48px;
	}

	.activitie-kids-area.style-one .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	section.about-area.style-four .section_title h2 {
		font-size: 36px;
	}

	.our-course-area.style-four .section_title h2 {
		font-size: 30px; line-height: 40px;
	}

	.our-program-child-area.style-four .section_title h2 {
		font-size: 35px; line-height: 42px;
	}

	.joint-event-area.style-two .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-four .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.pricing-area.style-one .section_title.two h2 {
		font-size: 30px; line-height: 40px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 30px; line-height: 40px;
	}

	section.gym-program-area.style-one .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-six .section_title.six h2 {
		font-size: 42px; line-height: 52px;
	}

	.popular-course-area.style-six .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	.pricing-area.style-two .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 40px;
	}

	.feature-course-area.style-saven .section_title.saven h2 {
		font-size: 42px;
	}

	.course-category-section.style-three .section_title.saven h2 {
		font-size: 42px;
	}

	.educate-trending-course.style-saven .section_title.saven h2 {
		font-size: 42px;
	}

	section.learn-place-area.style-one .section_title.saven h2 {
		font-size: 40px;
	}

	section.about-area.style-eight .section_title.saven h2 {
		font-size: 42px; line-height: 52px;
	}

	.educate-trending-course-area.style-eight .section_title.saven h2 {
		font-size: 42px; line-height: 52px;
	}

	.team-area.style-four .section_title.saven h2 {
		font-size: 38px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

}

@media @media (min-width: 480px) and (max-width: 599px) {
	section.feature-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	section.about-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.why-choose-area.style-one .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.blog-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.brand-area.style-one .section_title h2 {
		font-size: 36px;
	}

	section.about-area.style-two .section_title.two h2 {
		font-size: 35px; line-height: 45px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 32px; margin-bottom: 20px;
	}

	.reason-choose-area.style-two .section_title.two h2 {
		font-size: 35px; line-height: 45px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 36px;
	}

	.testimonial-area.style-two .section_title.two h2 {
		font-size: 32px; line-height: 40px;
	}

	.course-category-section.style-two .section_title.two h2 {
		font-size: 32px; line-height: 42px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.testimonial-area.style-three .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.campus-life-section.style-three .section_title h2 {
		font-size: 38px; line-height: 48px;
	}

	.addmission-learning-section .section_title h2 {
		font-size: 28px; line-height: 38px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 30px; line-height: 40px;
	}

	.activitie-kids-area.style-one .section_title h2 {
		font-size: 30px; line-height: 40px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	section.about-area.style-four .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.our-course-area.style-four .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.our-program-child-area.style-four .section_title h2 {
		font-size: 32px; line-height: 42px;
	}

	.joint-event-area.style-two .section_title h2 {
		font-size: 26px; line-height: 36px;
	}

	.testimonial-area.style-four .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 35px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 35px; line-height: 45px;
	}

	.pricing-area.style-one .section_title.two h2 {
		font-size: 28px; line-height: 40px;
	}

	.testimonial-area.style-five .section_title.two h2 {
		font-size: 35px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 28px; line-height: 40px;
	}

	section.gym-program-area.style-one .section_title.six h2 {
		font-size: 32px; line-height: 42px;
	}

	section.about-area.style-six .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	.popular-course-area.style-six .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	.pricing-area.style-two .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 38px;
	}

	.team-area.style-three .section_title.saven h2 {
		font-size: 36px;
	}

	.feature-course-area.style-saven .section_title.saven h2 {
		font-size: 36px;
	}

	.course-category-section.style-three .section_title.saven h2 {
		font-size: 35px;
	}

	.educate-trending-course.style-saven .section_title.saven h2 {
		font-size: 36px;
	}

	section.learn-place-area.style-one .section_title.saven h2 {
		font-size: 32px;
	}

	section.about-area.style-eight .section_title.saven h2 {
		font-size: 35px; line-height: 45px;
	}

	.educate-trending-course-area.style-eight .section_title.saven h2 {
		font-size: 35px; line-height: 45px;
	}

	.faq-area.style-two .section_title.saven h2 {
		font-size: 35px; line-height: 45px;
	}

	.team-area.style-four .section_title.saven h2 {
		font-size: 32px;
	}

	.team-area.style-four .section_title.saven h2 span {
		font-size: 32px;
	}

	.blog-area.style-eight .section_title.saven h2 {
		font-size: 35px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 36px; line-height: 46px;
	}

	.pricing-area.style-inner .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

}

@media @media (min-width: 320px) and (max-width: 479px) {
	section.feature-area.style-one .section_title h2 {
		font-size: 24px; line-height: 35px;
	}

	section.about-area.style-one .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.case-study-area.style-one .section_title h2 {
		font-size: 21px; line-height: 30px;
	}

	.why-choose-area.style-one .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.team-area.style-one .section_title h2 {
		font-size: 21px; line-height: 32px;
	}

	.blog-area.style-one .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.testimonial-area.style-one .section_title h2 {
		font-size: 23px; line-height: 32px;
	}

	.brand-area.style-one .section_title h2 {
		font-size: 28px;
	}

	section.about-area.style-two .section_title.two h2 {
		font-size: 24px; line-height: 32px;
	}

	.online-course-section.style-two .section_title.two h2 {
		font-size: 22px; margin-bottom: 20px;
	}

	.reason-choose-area.style-two .section_title.two h2 {
		font-size: 25px; line-height: 35px;
	}

	.team-area.style-two .section_title.two h2 {
		font-size: 26px;
	}

	.testimonial-area.style-two .section_title.two h2 {
		font-size: 32px; line-height: 40px;
	}

	.course-category-section.style-two .section_title.two h2 {
		font-size: 22px; line-height: 32px;
	}

	section.about-area.style-three .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.course-program-area.style-three .section_title h2 {
		font-size: 21px; line-height: 32px;
	}

	.testimonial-area.style-three .section_title h2 {
		font-size: 24px; line-height: 35px;
	}

	.campus-life-section.style-three .section_title h2 {
		font-size: 26px; line-height: 36px;
	}

	.addmission-learning-section .section_title h2 {
		font-size: 26px; line-height: 36px;
	}

	.joint-event-area.style-one .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.faq-area.style-one .section_title h2 {
		font-size: 21px; line-height: 32px;
	}

	.activitie-kids-area.style-one .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.section_title h2 {
		font-size: 40px;
	}

	section.about-area.style-four .section_title h2 {
		font-size: 24px; line-height: 35px;
	}

	.our-course-area.style-four .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.our-program-child-area.style-four .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.joint-event-area.style-two .section_title h2 {
		font-size: 24px; line-height: 36px;
	}

	.testimonial-area.style-four .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	section.about-area.style-five .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.online-course-section.style-five .section_title.two h2 {
		font-size: 22px;
	}

	section.about-area.style-five.feature .section_title h2 {
		font-size: 22px; line-height: 32px;
	}

	.pricing-area.style-one .section_title.two h2 {
		font-size: 24px; line-height: 40px;
	}

	.testimonial-area.style-five .section_title.two h2 {
		font-size: 25px; line-height: 35px;
	}

	.subscribe-area.style-five .section_title.two h2 {
		font-size: 28px; line-height: 40px;
	}

	section.gym-program-area.style-one .section_title.six h2 {
		font-size: 32px; line-height: 42px;
	}

	section.about-area.style-six .section_title.six h2 {
		font-size: 22px; line-height: 32px;
	}

	.popular-course-area.style-six .section_title.six h2 {
		font-size: 36px; line-height: 46px;
	}

	.testimonial-area.style-six .section_title.six h2 {
		font-size: 20px; line-height: 30px;
	}

	.pricing-area.style-two .section_title.six h2 {
		font-size: 28px; line-height: 38px;
	}

	section.contact_area.style-six .section_title.six h2 {
		font-size: 20px; line-height: 32px;
	}

	section.about-area.style-saven .section_title.saven h2 {
		font-size: 25px; line-height: 40px;
	}

	.team-area.style-three .section_title.saven h2 {
		font-size: 32px; line-height: 45px;
	}

	.testimonial-area.style-saven .section_title.six h2 {
		font-size: 22px; line-height: 35px;
	}

	.feature-course-area.style-saven .section_title.saven h2 {
		font-size: 35px; line-height: 45px;
	}

	.course-category-section.style-three .section_title.saven h2 {
		font-size: 35px; line-height: 45px;
	}

	.educate-trending-course.style-saven .section_title.saven h2 {
		font-size: 23px;
	}

	section.learn-place-area.style-one .section_title.saven h2 {
		font-size: 30px; line-height: 40px;
	}

	section.about-area.style-eight .section_title.saven h2 {
		font-size: 22px; line-height: 32px;
	}

	.educate-trending-course-area.style-eight .section_title.saven h2 {
		font-size: 30px; line-height: 40px;
	}

	.faq-area.style-two .section_title.saven h2 {
		font-size: 24px; line-height: 35px;
	}

	.team-area.style-four .section_title.saven h2 {
		font-size: 25px; line-height: 35px;
	}

	.team-area.style-four .section_title.saven h2 span {
		font-size: 25px;
	}

	.team-area.style-four .section_title.saven h2 span {
		font-size: 25px;
	}

	.blog-area.style-eight .section_title.saven h2 {
		font-size: 30px; line-height: 40px;
	}

	.testimonial-area.style-inner .section_title h2 {
		font-size: 30px; line-height: 40px;
	}

	.educate-details-course-area.style-inner .section_title h2 {
		font-size: 28px;
	}

	.pricing-area.style-inner .section_title h2 {
		font-size: 25px; line-height: 35px;
	}

	.inner_section .contact-section-title h2 {
		font-size: 24px;
	}

	section.contact_area.inner_section .section_title h2 {
		font-size: 26px; line-height: 36px;
	}

}

/* ---------- 面包屑页标题 h4 → h1 / 文章标题 h2 → h1（逐断点镜像模板原值） ---------- */

.breadcumb-title h1 {
	display: inline-block; font-size: 50px; color: #1e1e1e; font-weight: 600; margin-bottom: 15px;
}

.blog-details-area h1.blog-title {
	margin: 25px 0 20px; font-family: 宋体, Arial, Helvetica, sans-serif;
	font-size: 40px;
}

.blog-details-area .blog-content h1.blog-title a {
	display: inline-block; font-size: 38px; color: #1e1e1e; font-weight: 600; font-family: "Outfit";
}

.blog-details-area h1.blog-title2 a {
	display: inline-block; font-size: 38px; color: #1e1e1e; font-weight: 600; font-family: "Outfit"; margin: 35px 0 13px;
}

@media @media (min-width: 480px) and (max-width: 599px) {
	.blog-details-area .blog-content h1.blog-title a {
		font-size: 30px; line-height: 40px;
	}

}

@media @media (min-width: 320px) and (max-width: 479px) {
	.breadcumb-title h1 {
		font-size: 35px;
	}

	.blog-details-area .blog-content h1.blog-title a {
		font-size: 26px; line-height: 36px;
	}

}


/* ---------- 首页首屏：合并成一个 H1 后的第二行 ----------
   原来是两个 <h1>，靠 bootstrap 的 margin-bottom:.5rem 撑出 8px 行距。
   合并后用一个 block span 换行，补同样的 8px，视觉与改前一致。 */
section.hero_area.style-one .hero_content h1 .mf-h1-l2 {
	display: block;
	margin-top: .5rem;
}


/* ==========================================================================
   十二、文章不存在页 & 通用小按钮（2026-09-18）
   背景：/blog-details/{id} 在文章被删或编号不对时，原来会输出一个
         带 PHP 警告的半截页面。现在改成正规 404 + 这两块的样式。
   ========================================================================== */

.mf-article-missing {
	padding: 72px 0 96px;
	text-align: center;
}

.mf-article-missing p {
	font-size: 16px;
	line-height: 28px;
	color: var(--text-color);
	margin-bottom: 12px;
}

.mf-article-missing .mf-btn {
	display: inline-block;
	margin: 18px 8px 0;
	padding: 13px 30px;
	border-radius: 6px;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s;
}

.mf-article-missing .mf-btn:hover {
	background-color: var(--title-color);
	color: #fff;
}

.mf-article-missing .mf-btn-ghost {
	background-color: transparent;
	color: var(--title-color);
	box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .18);
}

.mf-article-missing .mf-btn-ghost:hover {
	background-color: var(--title-color);
	color: #fff;
}

/* 页脚备案号（拿到备案号后取消 footer.php 里的注释即可生效） */
.footer-bottom-desc .mf-beian {
	font-size: 13px;
	line-height: 22px;
	margin-top: 4px;
	opacity: .75;
}

.footer-bottom-desc .mf-beian a {
	color: #1e1e1e;
}

@media (max-width: 767px) {
	.mf-article-missing {
		padding: 46px 0 60px;
	}
	.mf-article-missing .mf-btn {
		display: block;
		margin: 14px auto 0;
		max-width: 240px;
	}
}

/* 第十三节 · 价格表补位（2026-09-18）
   特色课程线补上「单词带背」后变成 4 项，原来的 repeat(3,1fr) 会排成 3+1 很难看。
   这里让正好 4 项的那组走 2×2，其余分组不受影响（只加 .four 修饰类，不动基础规则）。
   手机端（≤767）已由 base 规则压成单列，无需额外处理。 */
@media (min-width: 768px) {
	.mf-price-grid.four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 第十四节 · 资讯中心右侧栏（2026-09-18）
   背景：右侧栏原来是模板照搬的假数据 —— 搜索框 action="javascript:;"（点了没反应）、
   分类是 5 个写死的词且 href 为空（点了刷新本页）、云标签 5 个 #! 死链。
   改成接口实时数据后，新出现的几个元素要补样式：分类计数、当前分类高亮、
   最新发布列表、搜索提示条、空态、引导卡。
   ⚠️ 一律加 .mf- 前缀或限定在资讯中心自己的容器里，不动模板原有规则。

   ⚠️ 注意：全站原来**没有**通用的 .mf-btn —— 它只作为
   `.mf-article-missing .mf-btn` 存在（第十二节）。侧栏要用就得先定义通用版，
   靠选择器权重让原页面的局部规则继续覆盖（.mf-article-missing .mf-btn 更具体）。 */

.mf-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 6px;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s;
}

.mf-btn:hover {
	background-color: var(--title-color);
	color: #fff;
}

.mf-btn-ghost {
	background-color: transparent;
	color: var(--title-color);
	box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .18);
}

.mf-btn-ghost:hover {
	background-color: var(--title-color);
	color: #fff;
}

/* 分类：名称在左、篇数在右 */
.widget-categories-menu:not(.mf-recent) ul li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	color: var(--title-color);
	transition: color .2s;
}

.widget-categories-menu:not(.mf-recent) ul li a:hover {
	color: var(--primary-color);
}

.mf-cat-num {
	flex: 0 0 auto;
	margin-left: 10px;
	font-size: 13px;
	color: #9aa5a0;
}

.widget-categories-menu ul li.mf-current a,
.widget-categories-menu ul li.mf-current .mf-cat-num {
	color: var(--primary-color);
}

.widget-categories-menu ul li.mf-current a {
	font-weight: 500;
}

/* 最新发布：标题限两行，长标题不把卡片撑歪 */
.mf-recent ul li {
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.mf-recent ul li a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 24px;
	color: var(--title-color);
	transition: color .2s;
}

.mf-recent ul li a:hover {
	color: var(--primary-color);
}

/* 搜索后的提示（侧栏） */
.mf-sidebar-tip {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: #6b7873;
}

.mf-sidebar-tip a {
	color: var(--primary-color);
}

/* 引导卡 */
.mf-sidebar-cta {
	margin-top: 28px;
	padding: 22px 24px 24px;
	border-radius: 16px;
	background-color: #f0fbf8;
}

.mf-sidebar-cta-t {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 26px;
	font-weight: 500;
	color: var(--title-color);
}

.mf-sidebar-cta-d {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 22px;
	color: #6b7873;
}

/* 搜索结果条（列表上方） */
.mf-blog-searchbar {
	margin: 0 0 26px;
	padding: 14px 20px;
	border-radius: 10px;
	background-color: #f0fbf8;
	font-size: 15px;
	line-height: 24px;
	color: var(--title-color);
}

.mf-blog-searchbar strong {
	color: var(--primary-color);
	font-weight: 500;
}

.mf-blog-searchbar a {
	margin-left: 10px;
	color: #6b7873;
	text-decoration: underline;
}

/* 空态（搜索没命中 / 分类下没文章） */
.mf-blog-empty {
	padding: 54px 30px 58px;
	border-radius: 20px;
	background-color: #f7fdfb;
	text-align: center;
}

.mf-blog-empty-t {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 28px;
	font-weight: 500;
	color: var(--title-color);
}

.mf-blog-empty-d {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 24px;
	color: #6b7873;
}

.mf-blog-empty .mf-btn {
	margin: 0 6px;
}

@media (max-width: 767px) {
	.mf-blog-empty {
		padding: 40px 20px 44px;
	}
	.mf-blog-empty .mf-btn {
		display: block;
		margin: 12px auto 0;
		max-width: 240px;
	}
	.mf-sidebar-cta {
		margin-top: 22px;
		padding: 20px;
	}
}



/* =====================================================================
   第十八节 · 手机端底部 Tab 栏（对齐小程序 tabBar）· 2026-10-01
   ---------------------------------------------------------------------
   本轮唯一改动：把小程序底部那条 tab 切换栏搬到官网手机端，别的一律不动。
   参数取自小程序 app.json → tabBar：
     未选中 #8a9691 ｜ 选中 #1ec28e ｜ 底色 #ffffff
   只在 ≤767px（手机端）显示；桌面端（≥1200）与平板端（768–1199）一律
   display:none —— 对桌面/平板版零影响。
   结构在 footer.php 末尾（<nav class="mf-tabbar">），纯 CSS、零 JS。
   ===================================================================== */

/* 默认全部隐藏 —— 这条只管手机端 */
.mf-tabbar {
	display: none;
}

@media (max-width: 767px) {

	.mf-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;                    /* 低于 meanmenu 的 999，展开菜单时在其下层 */
		background: #ffffff;
		border-top: 1px solid #ececec;
		box-shadow: 0 -1px 8px rgba(0, 0, 0, .04);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* 单项：图标在上、文字在下，纵向居中 —— 与小程序 tabBar 排布一致 */
	.mf-tabbar__item {
		flex: 1 1 0;
		min-width: 0;
		height: 54px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		text-decoration: none;
		color: #8a9691;                  /* 未选中 = 小程序 tabBar color */
		-webkit-tap-highlight-color: transparent;
	}

	.mf-tabbar__item.is-on {
		color: #1ec28e;                  /* 选中 = 小程序 tabBar selectedColor */
	}

	.mf-tabbar__ico {
		display: block;
		width: 23px;
		height: 23px;
		object-fit: contain;
	}

	.mf-tabbar__txt {
		font-size: 11px;
		line-height: 1.1;
		font-weight: 500;
		letter-spacing: .2px;
		white-space: nowrap;
	}

	/* 固定条会压住页面最底部的内容 → 给 body 让出等高空间（含 iPhone 安全区） */
	body {
		padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* 「回到顶部」原本 right:26 / bottom:35，会被 Tab 栏挡住 → 抬到栏上方 */
	.prgoress_indicator {
		bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 16px) !important;
	}

	/* -----------------------------------------------------------------
	   去掉顶部右上角的汉堡按钮（2026-10-02）
	   卢总口径：「tab 出现的时候，顶上右边点击就不应该再出现导航了吧」——
	   底部已经是一条完整的 5 项导航，顶部再弹一个同款菜单属于重复入口。

	   手机端顶部实测 DOM（meanmenu 生成）：
	     .mobile-menu-area > .mobile-menu.mean-container
	        └ .mean-bar
	            ├ a.meanmenu-reveal   ← 汉堡按钮（58×58，右上角）+ 3 条 span
	            └ nav.mean-nav
	                ├ .mobile-logo    ← ⚠️ logo 被 meanmenu **搬进了 mean-nav 里面**
	                └ ul              ← 克隆出来的导航列表
	   🔴 踩过的坑：一开始写 `.mean-menu-area nav.mean-nav { display:none }`，
	      logo 是它的子节点 → **整个顶部的品牌 logo 一起消失**（截图对比才发现）。
	   ✅ 正确做法：只挡「汉堡按钮」和「nav 里的 ul」，`.mobile-logo` 保留。
	   说明：用 CSS 隐藏而非删 DOM —— 链接仍留在 HTML 里，爬虫照样抓得到。
	   ----------------------------------------------------------------- */
	.mobile-menu-area .meanmenu-reveal,
	.mobile-menu-area nav.mean-nav ul {
		display: none !important;
	}
}


/* =====================================================================
   第十九节 · 平板端（768–991px）回归 PC 样式 · 2026-10-02
   ---------------------------------------------------------------------
   卢总口径：「只要不出现底下的 tab 导航，就还用 PC 端的样式，导航在顶上横排」。
   即：底部 tab 栏 + 汉堡菜单 = 手机端专属（≤767）；一旦 ≥768，就该长得跟 PC 一样。

   两处根因（都在模板侧）：
   ① desktop 导航用的是 Bootstrap `col-lg-*`，而 `col-*` 只在 ≥992 生效 ——
      768–991 三个 col 各自 100% 宽纵向堆叠，logo 被撑满整行；
   ② `responsive.css` 有一整段 `@media (min-width:768px) and (max-width:991px)`
      （516 条规则）把平板当手机处理：隐藏首屏大图、隐藏文章正文 ul、图片 width:100%……
      —— 已在 responsive.css 里把该段条件改为永不匹配（见那边的注释）。

   本节只做两件事：
   ① 隐藏移动菜单区（`d-lg-none` 在 768–991 仍会显示，需挡住）；
   ② 补齐 col-lg-* 的宽度，让本区间按 lg 断点计算栅格 = 复现 992–1199 的排版。
   手机端（≤767）完全不受影响，仍是「汉堡菜单 + 底部 tab 栏」。
   ===================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

	/* ① ≥768 不再需要移动菜单区（汉堡那一套整体消失） */
	.mobile-menu-area {
		display: none !important;
	}

	/* ② 补齐 lg 栅格 —— 覆盖 Bootstrap「<992 时 .row > * 各自 100% 宽」的默认行为 */
	.row > [class*="col-lg-"] {
		flex: 0 0 auto;
	}

	.row > .col-lg-1  { width: 8.333333%; }
	.row > .col-lg-2  { width: 16.666667%; }
	.row > .col-lg-3  { width: 25%; }
	.row > .col-lg-4  { width: 33.333333%; }
	.row > .col-lg-5  { width: 41.666667%; }
	.row > .col-lg-6  { width: 50%; }
	.row > .col-lg-7  { width: 58.333333%; }
	.row > .col-lg-8  { width: 66.666667%; }
	.row > .col-lg-9  { width: 75%; }
	.row > .col-lg-10 { width: 83.333333%; }
	.row > .col-lg-11 { width: 91.666667%; }
	.row > .col-lg-12 { width: 100%; }
	/* 导航行必须不换行 —— .row 默认 flex-wrap: wrap，三列一超宽就折成三行 */
	.educate-header-area .row.header-wrap {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* ③ 导航压缩：PC 的 3/5/4 比例在本区间只给菜单约 410px，五个栏目刚好换行。
	     这里给菜单让出空间并压缩项距，保证 768–991 下导航排成一行。 */
	.educate-header-area .row.header-wrap > .col-lg-3 {
		flex: 0 0 152px;
		width: 152px;
	}

	.educate-header-area .row.header-wrap > .col-lg-5 {
		flex: 1 1 0%;   /* basis 归零，吃满 logo 与按钮之间的全部剩余宽度 */
		width: auto;
		min-width: 0;  /* flex 项默认 min-width:auto，会被 nowrap 的菜单撑住、把按钮挤出容器 */
	}

	.educate-header-area .row.header-wrap > .col-lg-4 {
		flex: 0 0 auto;
		width: auto;
	}

	/* 模板的 ul.nav_scroll 是 display:inline-block（不是 flex），
	   所以 flex-wrap 对它无效 —— 用 white-space 才能压住 li 的折行。 */
	/* logo 图片原始宽 150px，而这一列的内容区只有约 128px —— 不限制就会溢出，
	   压住右边菜单的第一项。 */
	.educate-header-area .header-logo img {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.educate-header-area .header-menu .nav_scroll {
		display: block;
		white-space: nowrap;
		text-align: center;
	}

	/* 模板给每个 li/a 左右各留了约 18px 内边距，五个栏目光内边距就吃掉 180px，
	   768px 下必然挤出容器。这里清零横向内边距，改用 margin 控制间距。 */
	.educate-header-area .header-menu .nav_scroll > li {
		padding-left: 0;
		padding-right: 0;
		margin: 0;
	}

	.educate-header-area .header-menu .nav_scroll > li + li {
		margin-left: 16px;
	}

	.educate-header-area .header-menu .nav_scroll a {
		font-size: 14px;
		white-space: nowrap;
		padding-left: 0;
		padding-right: 0;
	}

	.educate-header-area .header-btn a {
		padding: 11px 13px;
		font-size: 14px;
		white-space: nowrap;
	}

	/* ⑤ PC 样式在窄屏的少数例外：课程详情页右侧栏在 PC 是绝对定位，
	     768–991 宽度下会跑到屏幕外（实测溢出 164px），这里让它回到文档流。
	     模板原本也把它写在 768–991 段里（position: inherit），此处等价保留。 */
	section.course-details-area.style-inner .event-sidebar-wrapper {
		position: static;
		margin-top: 40px;
	}

	section.course-details-area.style-inner .event-sidebar {
		position: static;
	}

	/* ④ 内容容器：Bootstrap 在 768–991 把 .container 限成 720px（≥992 才是 960px），
	     比 PC 窄一大截，导致首屏文案被挤成多行。这里放宽到「视口 − 两侧 24px」，
	     让本区间的内容宽度与 PC 接近。 */
	.container {
		max-width: none;
	}
}



/* =====================================================================
   第二十节 · 统一字号标尺 · 2026-10-02
   ---------------------------------------------------------------------
   背景：卢总反馈「全站有的字大有的字小，我觉得不统一」。
   实测（桌面 1440，6 个页面）确认了三种混乱：
     ① 标签相同、角色不同 → 同屏内被当成两种东西：
        `h3` 出现 6 种字号（36 / 24 / 22 / 20 / 18 / 17）
        `h4` 出现 3 种（24 / 17 / 16）
        `h5` 出现 2 种（16 / 14）
     ② 正文 `p` 出现 7 种（20 / 17 / 16 / 15 / 14 / 13 / 12）
     ③ 少数孤例：`h2` 除 42 外还有 1 处 34

   口径：**同一个「语义角色」只允许一个字号**；不同角色之间保持清晰层级。
   做法：先在 `:root` 定义设计令牌，≤767 覆盖一套手机令牌，再把各页面
        选择器逐一映射到令牌上（按「选择器」而不是按「标签」定角色 ——
        模板里同一个 h3 在价格卡、FAQ 手风琴、引导区里是三件不同的事）。

   ⚠️ 为什么满屏 `!important`：
      模板对同一元素常有「font-size + line-height 成对」的规则，且散落在
      多个 media 块里、选择器权重不低。要压住它们只能提权。
      **改字号必须同时给 line-height** —— 否则行高会维持原字号的比例，
      小字周围留下大空隙，看起来比原来更乱。
   ⚠️ 节内所有断点判断都写 `min-width:768px` / `max-width:767px`，与
      第十九节（平板回归 PC 样式）的口径一致：≥768 一套，≤767 一套。
   ===================================================================== */

:root {
	--mf-fs-h1:      42px;   /* 页面主标题（面包屑） */
	--mf-fs-h2:      34px;   /* 区块大标题 */
	--mf-fs-cta:     28px;   /* 引导区强标题 */
	--mf-fs-card:    20px;   /* 卡片标题 */
	--mf-fs-cardS:   17px;   /* 小卡片 / 步骤 / 分组标题 */
	--mf-fs-eyebrow: 15px;   /* 眉题（区块上方小标签） */
	--mf-fs-tag:     15px;   /* 标签 */
	--mf-fs-body:    16px;   /* 正文 */
	--mf-fs-sub:     15px;   /* 说明文字 */
	--mf-fs-note:    13px;   /* 脚注 / 注释 */
	--mf-fs-stat:    48px;   /* 统计数字 */
	--mf-fs-hero:    60px;   /* 首屏横幅大标题（仅首页首屏，独立层级） */
	--mf-fs-subtitle:26px;   /* 内文小节标题（课程详情页） */
}

@media (max-width: 767px) {
	:root {
		--mf-fs-h1:      26px;
		--mf-fs-h2:      22px;
		--mf-fs-cta:     18px;
		--mf-fs-card:    16px;
		--mf-fs-cardS:   15px;
		--mf-fs-eyebrow: 12px;
		--mf-fs-tag:     12px;
		--mf-fs-body:    15px;
		--mf-fs-sub:     13px;
		--mf-fs-note:    12px;
		--mf-fs-stat:    28px;
		--mf-fs-hero:    28px;
		--mf-fs-subtitle:18px;
	}
}

/* ① 页面主标题 ------------------------------------------------------- */
.breadcumb-title h1 {
	font-size: var(--mf-fs-h1) !important;
	line-height: 1.32 !important;
}

/* ② 区块大标题 ------------------------------------------------------- */
.section_title h2,
.contact-section-title h2,
.mf-sec-head h2 {
	font-size: var(--mf-fs-h2) !important;
	line-height: 1.34 !important;
}

/* ③ 引导区强标题 ----------------------------------------------------- */
.call-to-title h3 {
	font-size: var(--mf-fs-cta) !important;
	line-height: 1.34 !important;
}

/* ④ 卡片标题 --------------------------------------------------------- */
.course-price h3,
.feature-content h4,
.widget-categories-box h4,
.suport-content h3,
.call_info h3 {
	font-size: var(--mf-fs-card) !important;
	line-height: 1.4 !important;
}

/* ④-b 卡片标题是链接时（模板把标题包在 <a> 里，字号写在 a 上）
       首页课程卡 / 资讯列表 / 课程介绍页三种卡片，实测都是 24px → 收到同一档 */
.case-study-content a,
.blog-title h3,
.blog-title h3 a,
.course-details-content a {
	font-size: var(--mf-fs-card) !important;
	line-height: 1.4 !important;
}

/* ⑤ 小卡片 / 步骤 / 分组标题 ----------------------------------------- */
.mf-fact-card h3,
.mf-step-item h4,
.mf-principle-item h4,
.faq-group-title h3,
.contact-section-title h4,
ul.accordion span {
	font-size: var(--mf-fs-cardS) !important;
	line-height: 1.45 !important;
}

/* ⑥ 眉题 ------------------------------------------------------------- */
.section-sub-title h6 {
	font-size: var(--mf-fs-eyebrow) !important;
	line-height: 1.5 !important;
}

/* ⑦ 标签 ------------------------------------------------------------- */
.case-study-content h5,
.mf-match-item h5,
.guide-body h5,
.mf-fact-label,
.course-meta-top span {
	font-size: var(--mf-fs-tag) !important;
	line-height: 1.5 !important;
}

/* ⑧ 统计数字 --------------------------------------------------------- */
.about-item-count h3,
.about-iteam-count h3,
.about-item-count span,
.about-iteam-count span,
.about-experience-count h3,
.about-experience-count span,
.mf-data-box .counter {
	font-size: var(--mf-fs-stat) !important;
	line-height: 1.1 !important;
}
/* 小卡里的数字另有尺度，不并进统计组（首屏右侧卡片、choose 卡） */
.hero-autor-content h3,
.hero-autor-content span,
.choose-skill-content .counter {
	font-size: var(--mf-fs-cardS) !important;
	line-height: 1.3 !important;
}

/* ⑨ 正文基准 ---------------------------------------------------------
      模板里大量「描述区」是 **外层 div + 内层 p** 两层结构
      （`.section-title-desc > p`、`.about-item-desc > p`、`.blog-details-info > p` …），
      而字号是写在里面的 `p` 上的（style.css 里就有一堆
      `section.xxx-area .section-title-desc p { font-size: … }`）。
      所以基准必须以 `p` 为准 —— 只写外层类名会整片漏掉。
      （踩过一次：只写 .section-title-desc，外层 div 变了、里面的 p 没变。） */
p,
li {
	font-size: var(--mf-fs-body) !important;
	line-height: 1.7 !important;
}

/* ⑨-b 正文里的行内元素（父级不一定是 p，模板各自写了固定字号） */
.hero-rating-des,
.hero-rating-des p,
.hero-rating-icon span,
.about-item-desc,
.about-item-list span {
	font-size: var(--mf-fs-body) !important;
	line-height: 1.7 !important;
}

/* ⑨-c 卡片里的内联元信息（科目数 / 在学人数 / 日期 / 版本）
      这几个 span 模板写死了 16px，不跟断点走 → 手机端会比正文大 1px */
.course-lesson span,
.course-student span,
.course-details-list span,
.hero-rating-num span,
.blog-content span,
.call_info span,
.mf-fact-value {
	font-size: var(--mf-fs-body) !important;
	line-height: 1.6 !important;
}

/* ⑩ 说明文字（覆盖基准）---------------------------------------------
      注：`.case-autor-content h3` 虽然用 h3 写，实际是课程卡里的科目清单，
          属于描述正文而不是标题，所以放在本组。 */
.mf-para,
.mf-sec-desc, .mf-sec-desc p,
.mf-step-body p,
.mf-match-item p,
.mf-principle-item p,
.mf-principle-lead,
.guide-body p,
.suport-content p,
.tab_content p,
ul.accordion p,
.mf-price-grid p,
.mf-price-sub,
.course-price-note,
.mf-sidebar-cta p,
.mf-data-box p,
.case-autor-content h3 {
	font-size: var(--mf-fs-sub) !important;
	line-height: 1.75 !important;
}

/* ⑪ 脚注 / 注释 ------------------------------------------------------ */
.mf-price-note,
.contact-guide-note,
.mf-data-note {
	font-size: var(--mf-fs-note) !important;
	line-height: 1.6 !important;
}

/* ⑫ 面包屑 ----------------------------------------------------------- */
.breadcumb-content li {
	font-size: var(--mf-fs-tag) !important;
	line-height: 1.5 !important;
}

/* ⑬ 底部版权行 ------------------------------------------------------- */
.footer-bottom-desc p,
.footer-bottom-desc p a {
	font-size: var(--mf-fs-note) !important;
	line-height: 1.6 !important;
}

/* =====================================================================
   第二十节 · 追加（2026-10-02 第二轮 · 补漏）
   ---------------------------------------------------------------------
   第一轮（①–⑬）只覆盖了「首页 / 关于我们 / 课程介绍 / 常见问题 /
   联系我们 / 资讯中心」6 个页面。第二轮全站复测（8 页 × 2 档）又抓到：

     ① **课程详情页整类漏网**：同屏出现 32 / 30 / 24 三种标题字号；
        其中「课程概览」32px 的行高只有 30px（比字号还小，模板原病）。
     ② 同一个语义角色跨页不同值：
        · 价格 —— 课程介绍页 20，关于我们页 26；
        · 步骤序号 —— 关于我们 15，联系我们 14，课程详情 15/14；
        · 详情页侧栏键值表 —— 「价格」20 而「课程线」16（同一张表两档）。

   本轮新增两个令牌：
     --mf-fs-hero     首屏横幅大标题（仅首页首屏，独立层级，不并进 h1）
     --mf-fs-subtitle 内文小节标题（课程详情页「课程概览」下的小节）
   ===================================================================== */

/* ⑭ 首屏横幅大标题（仅首页首屏）--------------------------------------
      与内页 h1（42/26）不同档：首屏横幅是「展示型大字」，全站仅此一处。
      写进令牌是为了让它成为**有意的层级**，而不是以后被当成漂移来修。
      行高沿用模板（70px / 38px，本来就与 60 / 28 成比例），只锁字号。 */
.hero_content h1 {
	font-size: var(--mf-fs-hero) !important;
}

/* ⑮ 内文小节标题（课程详情页：这门课适合谁 / 课程特色 / 上课流程）---- */
.course-details-content-title {
	font-size: var(--mf-fs-subtitle) !important;
	line-height: 1.4 !important;
}

/* ⑯ 详情页主块标题 / FAQ 标题 —— 并进「区块大标题」-------------------
      注：`.course-details-title` 模板原本 line-height:30px 而 font-size:32px，
          行高比字号还小，是模板自身的毛病；这里连行高一起收掉。 */
.course-details-title,
.accordion-title h2 {
	font-size: var(--mf-fs-h2) !important;
	line-height: 1.34 !important;
}

/* ⑰ 详情页侧栏模块标题（课程信息 / 其他课程）—— 并进「卡片标题」-----
      原来 24px 配 52px 行高（模板给自己留了条带），收掉后侧栏头部变紧凑。 */
.event-info-title h3 {
	font-size: var(--mf-fs-card) !important;
	line-height: 1.4 !important;
}

/* ⑱ 详情页亮点 / 流程小标题 —— 并进「小卡片」------------------------ */
.single-course-highlight h4,
.flow-body h5 {
	font-size: var(--mf-fs-cardS) !important;
	line-height: 1.45 !important;
}

/* ⑲ 详情页键值表 -----------------------------------------------------
      普通键值（课程线 / 上课时长…）与正文同档；
      「价格」这一格单列 —— 全站「价格」恒为 20/16，三处同档：
        课程介绍页 .course-price h3 ｜ 关于我们页 .mf-price-item h4 ｜ 本页 .value-dollar
      ⚠️ 选择器必须写到 `ul li span.value-dollar`：模板里有
         `.style-inner span.value-dollar { font-size:20px !important }`（权重 0,2,1），
         只写 `.event-info-list .value-dollar`（0,2,0）压不住它。 */
.style-inner .event-info-list ul li span.value,
.event-info-list .value {
	font-size: var(--mf-fs-body) !important;
	line-height: 1.6 !important;
}
.style-inner .event-info-list ul li span.value-dollar {
	font-size: var(--mf-fs-card) !important;
	line-height: 1.4 !important;
}

/* ⑳ 序号 / 关联项 —— 并进「说明」与「注释」--------------------------
      「步骤序号」全站三处同档（关于我们 .mf-step-num / 联系我们 .guide-num /
      课程详情 .flow-step）。原来 .mf-step-num 在 manfen.css 里写成固定 15px
      不跟断点走，手机端就比另两处大 2px。 */
.mf-step-num,
.flow-step,
.contact-guide-list .guide-num,
.related-title {
	font-size: var(--mf-fs-sub) !important;
	line-height: 1.6 !important;
}
.related-price {
	font-size: var(--mf-fs-note) !important;
	line-height: 1.6 !important;
}

/* ㉑ 关于我们页价格 —— 并进「卡片标题」，与课程介绍页 `.course-price h3` 同档 */
.mf-price-item h4 {
	font-size: var(--mf-fs-card) !important;
	line-height: 1.4 !important;
}

/* ㉒ 首页 choose 卡小标题 —— 与其内部 `.counter` 同档 ------------------ */
.choose-skill-content h3 {
	font-size: var(--mf-fs-cardS) !important;
	line-height: 1.3 !important;
}

/* ㉓ 首页滚动条文字：**只收字号，保留 52px 行高** ---------------------
      该条是固定 52px 高的滚动带，行高参与带高计算，改了会把带压扁。 */
.marquee-block h3 {
	font-size: var(--mf-fs-card) !important;
}

/* ㉔ 资讯详情页文章标题 -----------------------------------------------
      ⚠️ 本地渲染不到（正文来自线上 WP，`/blog-details/<id>` 本地返回 404），
         这一条是按源码 `<h1 class="blog-title">` 预先并进「页面主标题」，
         未经本地实测；等 WP 上游可用时再复测一次。 */
.blog-details-area h1.blog-title {
	font-size: var(--mf-fs-h1) !important;
	line-height: 1.32 !important;
}