/*
Theme Name: SZCBE Child
Theme URI: https://szcbea.org/
Description: Custom presentation and content templates for Shenzhen Cross-Border E-Commerce Association.
Author: SZCBE
Template: generatepress
Version: 1.0.8
Text Domain: szcbe-child
*/


/* =========================================================
   全局变量
   ========================================================= */

:root {
	--szcbe-blue: #0756e8;
	--szcbe-deep: #061b55;
	--szcbe-ink: #172b59;
	--szcbe-sky: #eaf4ff;
	--szcbe-line: #d9e8ff;
}


body {
	color: var(--szcbe-ink);
}


/*
 * 隐藏 GeneratePress 默认 Header
 * 使用我们自己的 szcbe-site-header
 */
.site-header {
	display: none;
}



/* =========================================================
   SZCBE 自定义页眉
   ========================================================= */

.szcbe-site-header {
	background: rgba(255, 255, 255, .98);

	border-top: 1px solid #0d1733;

	box-shadow:
		0 4px 18px
		rgba(4, 25, 70, .08);

	position: sticky;

	top: 0;

	z-index: 999;
}


body.admin-bar .szcbe-site-header {
	top: 32px;
}


@media (max-width: 782px) {
	body.admin-bar .szcbe-site-header {
		top: 46px;
	}
}


.szcbe-site-header__inner {
	align-items: center;

	box-sizing: border-box;

	display: flex;

	gap: clamp(18px, 2vw, 34px);

	height: 88px;

	margin: 0 auto;

	max-width: 1440px;

	padding:
		0
		34px;

	width: 100%;
}



/* =========================================================
   Logo
   ========================================================= */

.szcbe-brand {
	align-items: center;

	display: flex;

	flex: 0 0 auto;

	min-width: 0;

	text-decoration: none;
}


.szcbe-brand__logo {
	display: block;

	height: 52px;

	max-width: 250px;

	object-fit: contain;

	width: auto;
}



/* =========================================================
   主导航
   ========================================================= */

.szcbe-nav {
	flex: 1;

	min-width: 0;
}


.szcbe-nav__list {
	align-items: stretch;

	display: flex;

	gap: clamp(14px, 1.6vw, 34px);

	justify-content: space-between;

	list-style: none;

	margin: 0;

	padding: 0;
}


.szcbe-nav__item {
	position: relative;
}



/* =========================================================
   一级导航
   ========================================================= */

/*
 * 普通一级菜单：
 *
 * 首页
 * 会员中心
 * 标准委员会
 * 联系我们
 *
 * 使用 <a>
 *
 *
 * 有下拉菜单：
 *
 * 关于协会
 * 服务体系
 * 协会活动
 * 产业带供应链
 *
 * 使用 <button class="szcbe-nav__parent">
 *
 * 两种元素必须保持完全一样的视觉样式。
 */

.szcbe-nav__item > a,
.szcbe-nav__parent {
	background: transparent;

	border: 0;

	box-sizing: border-box;

	color: #071b48;

	cursor: pointer;

	display: block;

	font-family: inherit;

	font-size: 16px;

	font-weight: 600;

	line-height: 88px;

	margin: 0;

	padding: 0;

	position: relative;

	text-decoration: none;

	transition: color .18s ease;

	white-space: nowrap;
}



/*
 * 一级菜单 Hover / 当前页面状态
 */

.szcbe-nav__item:hover > a,
.szcbe-nav__item.is-active > a,
.szcbe-nav__item:hover > .szcbe-nav__parent,
.szcbe-nav__item.is-active > .szcbe-nav__parent {
	background: transparent;

	color: #1469e8;
}



/*
 * 一级菜单底部蓝色横线
 */

.szcbe-nav__item > a::after,
.szcbe-nav__parent::after {
	background: #1469e8;

	border-radius: 999px;

	bottom: 18px;

	content: '';

	height: 2px;

	left: 50%;

	opacity: 0;

	position: absolute;

	transform: translateX(-50%) scaleX(0);

	transform-origin: center;

	transition:
		opacity .18s ease,
		transform .18s ease;

	width: 32px;
}


.szcbe-nav__item.is-active > a::after,
.szcbe-nav__item:hover > a::after,
.szcbe-nav__item.is-active > .szcbe-nav__parent::after,
.szcbe-nav__item:hover > .szcbe-nav__parent::after {
	opacity: 1;

	transform: translateX(-50%) scaleX(1);
}



/*
 * 清除 button 在浏览器里的默认样式
 */

.szcbe-nav__parent {
	appearance: none;

	-webkit-appearance: none;

	outline: none;
}


.szcbe-nav__parent:focus,
.szcbe-nav__parent:active {
	background: transparent;

	color: #071b48;
}


.szcbe-nav__parent:focus-visible {
	background: transparent;

	color: #1469e8;

	outline:
		2px solid
		#1469e8;

	outline-offset: 4px;
}



/* =========================================================
   二级下拉菜单
   ========================================================= */

.szcbe-nav__submenu {
	background: #ffffff;

	border:
		1px solid
		#e4eaf7;

	border-radius:
		0
		0
		8px
		8px;

	box-shadow:
		0 12px 28px
		rgba(5, 31, 89, .10);

	display: block;

	left: 50%;

	list-style: none;

	margin: 0;

	min-width: 168px;

	opacity: 0;

	padding:
		9px
		0;

	pointer-events: none;

	position: absolute;

	top: 82px;

	transform: translate(-50%, 6px);

	transition:
		opacity .18s ease,
		transform .18s ease,
		visibility 0s linear .18s;

	visibility: hidden;

	z-index: 1000;
}



/*
 * 桌面端：
 * 鼠标放到父级菜单以后显示二级菜单。
 *
 * focus-within 保证键盘操作也可以正常使用。
 */

.szcbe-nav__item--has-children:hover > .szcbe-nav__submenu,
.szcbe-nav__parent:focus-visible + .szcbe-nav__submenu,
.szcbe-nav__submenu:focus-within {
	opacity: 1;

	pointer-events: auto;

	transform: translate(-50%, 0);

	transition-delay: 0s;

	visibility: visible;
}



/*
 * 二级菜单链接
 */

.szcbe-nav__submenu a {
	color: #183362;

	display: block;

	font-size: 14px;

	padding:
		10px
		18px;

	text-decoration: none;

	transition:
		background-color .18s ease,
		color .18s ease;

	white-space: nowrap;
}


.szcbe-nav__submenu a:hover,
.szcbe-nav__submenu a:focus {
	background: #f3f7ff;

	color: #1469e8;
}



/* =========================================================
   会员中心图标
   ========================================================= */

.szcbe-account-link {
	align-items: center;

	background: transparent;

	border-radius: 50%;

	color: #9aa8bd;

	display: flex;

	flex: 0 0 36px;

	height: 36px;

	justify-content: center;

	text-decoration: none;

	transition:
		background-color .18s ease,
		color .18s ease;

	width: 36px;
}


.szcbe-account-link svg {
	fill: currentColor;

	height: 27px;

	transition:
		color .2s ease;

	width: 27px;
}


.szcbe-account-link:hover {
	background: #f3f7ff;

	color: #1469e8;
}



/* =========================================================
   汉堡菜单按钮
   桌面端默认隐藏
   ========================================================= */

.szcbe-menu-toggle {
	appearance: none;

	-webkit-appearance: none;

	background: transparent;

	border: 0;

	border-radius: 6px;

	cursor: pointer;

	display: none;

	height: 42px;

	margin: 0;

	padding: 9px;

	width: 42px;
}


.szcbe-menu-toggle span {
	background: #071b48;

	border-radius: 2px;

	display: block;

	height: 2px;

	margin:
		5px
		auto;

	transition:
		transform .25s ease,
		opacity .25s ease;

	width: 24px;
}



/*
 * 菜单打开以后
 * 三条线变为 X
 */

.szcbe-menu-toggle.is-open span:nth-child(1) {
	transform:
		translateY(7px)
		rotate(45deg);
}


.szcbe-menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
}


.szcbe-menu-toggle.is-open span:nth-child(3) {
	transform:
		translateY(-7px)
		rotate(-45deg);
}



/* =========================================================
   页面通用样式
   ========================================================= */

.szcbe-shell {
	max-width: 1280px;

	margin: 0 auto;

	padding:
		0
		24px;
}


.szcbe-eyebrow {
	color: var(--szcbe-blue);

	font-size: 14px;

	font-weight: 700;

	letter-spacing: .08em;

	text-transform: uppercase;
}


.szcbe-section-title {
	color: var(--szcbe-deep);

	font-size:
		clamp(
			30px,
			4vw,
			48px
		);

	font-weight: 800;

	line-height: 1.15;

	margin:
		12px
		0
		24px;
}


.szcbe-card-grid {
	display: grid;

	gap: 24px;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
}


.szcbe-card {
	background: #fff;

	border:
		1px solid
		var(--szcbe-line);

	border-radius: 14px;

	box-shadow:
		0 10px 28px
		rgba(16, 82, 175, .08);

	overflow: hidden;
}


.szcbe-card__body {
	padding: 22px;
}


.szcbe-card__meta {
	color: #6682b7;

	font-size: 14px;
}


.szcbe-card__title {
	color: var(--szcbe-deep);

	font-size: 20px;

	line-height: 1.45;

	margin:
		10px
		0;
}


.szcbe-card__link {
	color: var(--szcbe-blue);

	font-weight: 700;

	text-decoration: none;
}


.szcbe-article {
	max-width: 900px;

	margin: 0 auto;

	padding:
		64px
		24px;
}


.szcbe-article__header {
	border-bottom:
		1px solid
		var(--szcbe-line);

	margin-bottom: 36px;

	padding-bottom: 28px;
}


.szcbe-article__title {
	color: var(--szcbe-deep);

	font-size:
		clamp(
			32px,
			5vw,
			54px
		);

	line-height: 1.2;

	margin:
		14px
		0;
}


.szcbe-article__content {
	font-size: 17px;

	line-height: 1.9;
}


.szcbe-article__header + div:not(.szcbe-article__content) {
	display: none;
}


.szcbe-article__content img {
	border-radius: 12px;

	display: block;

	height: auto;

	margin-left: auto;

	margin-right: auto;

	max-width: 100%;

	object-fit: contain;

	width: 942px;
}



/* =========================================================
   首页
   ========================================================= */

.szcbe-home {
	overflow: hidden;
}


.szcbe-home__inner {
	margin: 0 auto;

	max-width: 1240px;

	padding-left: 24px;

	padding-right: 24px;
}



/* =========================================================
   首页 Hero
   ========================================================= */

.szcbe-hero {
	background:
		#031a4b
		url('assets/home-hero.webp')
		center / cover
		no-repeat;

	color: #fff;

	min-height: 572px;

	position: relative;
}


.szcbe-hero::before {
	background:
		linear-gradient(
			90deg,
			rgba(0, 13, 49, .22),
			rgba(0, 13, 49, .02)
		);

	content: '';

	inset: 0;

	position: absolute;
}


.szcbe-hero__inner {
	box-sizing: border-box;

	min-height: 572px;

	padding-bottom: 34px;

	padding-top: 56px;

	position: relative;
}


.szcbe-hero__copy {
	max-width: 590px;
}


.szcbe-hero__eyebrow {
	font-size:
		clamp(
			30px,
			3.2vw,
			48px
		);

	font-weight: 800;

	letter-spacing: .04em;

	line-height: 1.25;

	margin:
		0
		0
		2px;
}


.szcbe-hero h1 {
	color: #1ea1ff;

	font-size:
		clamp(
			35px,
			4vw,
			57px
		);

	font-weight: 800;

	letter-spacing: .01em;

	line-height: 1.16;

	margin: 0;
}


.szcbe-hero__desc {
	font-size: 16px;

	font-weight: 500;

	line-height: 1.8;

	margin:
		18px
		0
		22px;

	max-width: 560px;
}


.szcbe-hero__actions {
	display: flex;

	gap: 22px;
}


.szcbe-button {
	align-items: center;

	border:
		1px solid
		transparent;

	border-radius: 6px;

	display: inline-flex;

	font-size: 16px;

	font-weight: 700;

	height: 46px;

	justify-content: center;

	padding:
		0
		29px;

	text-decoration: none;
}


.szcbe-button--primary {
	background: #0869f4;

	color: #fff;
}


.szcbe-button--ghost {
	border-color:
		rgba(255,255,255,.72);

	color: #fff;
}



/* =========================================================
   首页统计数据
   ========================================================= */

.szcbe-stat-grid {
	bottom: 34px;

	display: grid;

	gap: 18px;

	grid-template-columns:
		repeat(
			4,
			1fr
		);

	left: 24px;

	position: absolute;

	right: 24px;
}


.szcbe-stat-card {
	align-items: center;

	background:
		rgba(0,20,65,.68);

	border:
		1px solid
		rgba(184,213,255,.72);

	border-radius: 9px;

	display: flex;

	gap: 16px;

	min-height: 94px;

	padding:
		0
		25px;
}


.szcbe-stat-card__icon {
	align-items: center;

	background:
		rgba(21,104,232,.38);

	border-radius: 10px;

	color: #8ecaff;

	display: inline-flex;

	font-size: 29px;

	height: 49px;

	justify-content: center;

	width: 49px;
}


.szcbe-stat-card strong {
	display: block;

	font-size: 31px;

	line-height: 1.1;
}


.szcbe-stat-card span:not(.szcbe-stat-card__icon) {
	display: block;

	font-size: 15px;

	margin-top: 5px;
}



/* =========================================================
   关于协会首页模块
   ========================================================= */

.szcbe-about-home {
	background: #f8fbff;

	position: relative;
}


.szcbe-about-home::after {
	background:
		url('assets/home-map.webp')
		center / contain
		no-repeat;

	content: '';

	inset:
		0
		0
		0
		42%;

	opacity: .07;

	pointer-events: none;

	position: absolute;
}


.szcbe-about-home__grid {
	display: grid;

	gap: 80px;

	grid-template-columns:
		1.18fr
		.82fr;

	min-height: 500px;

	padding-bottom: 60px;

	padding-top: 58px;

	position: relative;

	z-index: 1;
}


.szcbe-kicker {
	background: #e4efff;

	border-radius: 20px;

	color: #0756e8;

	display: inline-block;

	font-size: 15px;

	font-weight: 700;

	margin:
		0
		0
		20px;

	padding:
		4px
		14px;
}


.szcbe-about-home h2,
.szcbe-showcase h2 {
	color: #071c51;

	font-size:
		clamp(
			30px,
			3vw,
			43px
		);

	font-weight: 800;

	line-height: 1.24;

	margin:
		0
		0
		16px;
}


.szcbe-about-home__copy > p:not(.szcbe-kicker) {
	color: #263b65;

	font-size: 16px;

	line-height: 1.9;

	margin: 0;
}



/* =========================================================
   协会价值
   ========================================================= */

.szcbe-values {
	display: grid;

	gap: 16px;

	grid-template-columns:
		repeat(
			4,
			1fr
		);

	margin:
		30px
		0
		20px;
}


.szcbe-values span {
	color: #0967ee;

	display: block;

	font-size: 31px;

	line-height: 1;

	margin-bottom: 8px;
}


.szcbe-values strong,
.szcbe-values small {
	display: block;
}


.szcbe-values strong {
	color: #0e2760;

	font-size: 16px;

	margin-bottom: 5px;
}


.szcbe-values small {
	color: #506487;

	font-size: 12px;

	line-height: 1.55;
}


.szcbe-text-link {
	background: #0756e8;

	border-radius: 5px;

	color: #fff;

	display: inline-block;

	font-weight: 700;

	padding:
		10px
		20px;

	text-decoration: none;
}


.szcbe-text-link span {
	margin-left: 8px;
}



/* =========================================================
   时间轴
   ========================================================= */

.szcbe-timeline {
	border-left:
		2px solid
		#9ec1fb;

	display: grid;

	gap: 19px;

	margin:
		5px
		0
		0
		25px;

	padding-left: 38px;
}


.szcbe-timeline > div {
	min-height: 50px;

	position: relative;
}


.szcbe-timeline > div::before {
	background: #0762e8;

	border:
		4px solid
		#e9f3ff;

	border-radius: 50%;

	box-shadow:
		0 0 0 1px
		#0762e8;

	content: '';

	height: 8px;

	left: -45px;

	position: absolute;

	top: 3px;

	width: 8px;
}


.szcbe-timeline b {
	color: #0660e8;

	display: block;

	font-size: 21px;

	line-height: 1.2;
}


.szcbe-timeline span {
	color: #43587d;

	display: block;

	font-size: 14px;

	margin-top: 4px;
}



/* =========================================================
   标准委员会
   ========================================================= */

.szcbe-showcase {
	background:
		linear-gradient(
			120deg,
			#f7fbff 0%,
			#eaf4ff 56%,
			#f9fbff 100%
		);

	padding:
		62px
		0
		78px;
}


.szcbe-section-heading {
	align-items: center;

	display: flex;

	justify-content: space-between;

	margin-bottom: 30px;

	position: relative;
}


.szcbe-section-heading h2 {
	margin: 0;
}


.szcbe-section-heading h2::after {
	background: #0756e8;

	border-radius: 2px;

	bottom: -17px;

	content: '';

	height: 4px;

	left: 0;

	position: absolute;

	width: 45px;
}


.szcbe-section-heading a {
	color: #31558f;

	font-weight: 700;

	text-decoration: none;
}


.szcbe-section-heading a span {
	border:
		1px solid
		#82a9ed;

	border-radius: 50%;

	display: inline-flex;

	height: 23px;

	justify-content: center;

	margin-left: 8px;

	width: 23px;
}


.szcbe-committee-grid {
	display: grid;

	gap: 14px;

	grid-template-columns:
		repeat(
			5,
			1fr
		);
}


.szcbe-committee-card {
	align-items: center;

	background:
		rgba(255,255,255,.8);

	border:
		1px solid
		#cfe0ff;

	border-radius: 10px;

	box-shadow:
		0 7px 18px
		rgba(26,96,200,.11);

	color: #092967;

	display: flex;

	flex-direction: column;

	min-height: 177px;

	padding:
		18px
		12px
		15px;

	position: relative;

	text-align: center;

	text-decoration: none;

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}


.szcbe-committee-card:hover {
	box-shadow:
		0 12px 25px
		rgba(26,96,200,.19);

	transform:
		translateY(-4px);
}


.szcbe-committee-card__icon {
	align-items: center;

	background: #edf5ff;

	border-radius: 18px;

	color: #0865e8;

	display: inline-flex;

	font-size: 35px;

	height: 53px;

	justify-content: center;

	margin-bottom: 11px;

	width: 53px;
}


.szcbe-committee-card strong {
	font-size: 16px;

	line-height: 1.35;
}


.szcbe-committee-card small {
	color: #7c8eae;

	font-size: 11px;

	line-height: 1.4;

	margin-top: 6px;
}


.szcbe-committee-card i {
	align-items: center;

	border:
		1px solid
		#98baf4;

	border-radius: 50%;

	bottom: 13px;

	color: #0865e8;

	display: inline-flex;

	font-size: 12px;

	font-style: normal;

	height: 21px;

	justify-content: center;

	position: absolute;

	right: 13px;

	width: 21px;
}



/* =========================================================
   分支 / 地图模块
   ========================================================= */

.szcbe-branches-home {
	background:
		#04246b
		url('assets/home-map.webp')
		center / cover
		no-repeat;

	color: #fff;

	margin: 0 auto;

	max-width: 1360px;

	overflow: hidden;

	padding:
		52px
		0
		25px;

	position: relative;
}


.szcbe-branches-home::before {
	background:
		rgba(0,21,76,.5);

	content: '';

	inset: 0;

	position: absolute;
}


.szcbe-branches-home .szcbe-home__inner {
	position: relative;
}


.szcbe-branches-home__heading {
	align-items: end;

	display: flex;

	justify-content: space-between;
}


.szcbe-branches-home .szcbe-kicker {
	background:
		rgba(136,190,255,.24);

	color: #fff;
}


.szcbe-branches-home h2,
.szcbe-join-home h2 {
	color: #fff;

	font-size: 40px;

	margin:
		0
		0
		7px;
}


.szcbe-branches-home__heading p:not(.szcbe-kicker) {
	font-size: 15px;

	line-height: 1.7;

	margin: 0;

	max-width: 610px;
}


.szcbe-branch-markers {
	height: 266px;

	position: relative;
}


.szcbe-marker {
	background:
		rgba(255,255,255,.92);

	border:
		1px solid
		#b6d7ff;

	border-radius: 7px;

	box-shadow:
		0 6px 16px
		rgba(0,15,67,.25);

	color: #0756e8;

	font-size: 13px;

	padding:
		8px
		11px;

	position: absolute;
}


.szcbe-marker b {
	color: #34517d;

	font-size: 11px;

	font-weight: 500;
}


.szcbe-marker--one {
	left: 9%;

	top: 31%;
}


.szcbe-marker--two {
	left: 46%;

	top: 12%;
}


.szcbe-marker--three {
	right: 18%;

	top: 34%;
}


.szcbe-marker--four {
	bottom: 12%;

	right: 6%;
}


.szcbe-branch-stats {
	background:
		rgba(255,255,255,.92);

	border-radius: 8px;

	color: #254672;

	display: grid;

	font-size: 12px;

	grid-template-columns:
		repeat(
			4,
			1fr
		);

	padding:
		13px
		20px;
}


.szcbe-branch-stats span {
	border-right:
		1px solid
		#d6e5f7;

	padding-left: 21px;
}


.szcbe-branch-stats span:last-child {
	border: 0;
}


.szcbe-branch-stats b {
	color: #0756e8;

	display: block;

	font-size: 19px;
}



/* =========================================================
   发展历程
   ========================================================= */

.szcbe-development {
	background: #f6faff;

	padding:
		65px
		0;
}


.szcbe-development__layout {
	display: grid;

	gap: 36px;

	grid-template-columns:
		120px
		1fr;

	max-width: 960px;
}


.szcbe-year-tabs {
	display: grid;

	gap: 40px;

	padding-top: 7px;
}


.szcbe-year-tabs b {
	background: #e3efff;

	border-radius: 6px;

	color: #0756e8;

	padding: 11px;

	text-align: center;
}


.szcbe-year-tabs b:first-child {
	background: #0756e8;

	color: #fff;
}


.szcbe-development__events {
	border-left:
		2px solid
		#bed4fb;

	display: grid;

	gap: 14px;

	padding-left: 25px;
}


.szcbe-development__events div {
	position: relative;
}


.szcbe-development__events div::before {
	background: #0756e8;

	border-radius: 50%;

	content: '';

	height: 9px;

	left: -31px;

	position: absolute;

	top: 7px;

	width: 9px;
}


.szcbe-development__events time {
	color: #0756e8;

	font-weight: 800;
}


.szcbe-development__events p {
	color: #4b6287;

	display: inline;

	font-size: 14px;

	margin-left: 15px;
}



/* =========================================================
   服务模块
   ========================================================= */

.szcbe-services-home {
	background: #fff;

	padding:
		64px
		0;
}


.szcbe-service-rail {
	display: flex;

	flex-wrap: wrap;

	gap: 11px;
}


.szcbe-service-rail a {
	background:
		linear-gradient(
			135deg,
			#eff6ff,
			#dfeeff
		);

	border-radius: 5px;

	color: #0d3f91;

	flex:
		1
		1
		135px;

	font-size: 14px;

	font-weight: 700;

	padding:
		16px
		9px;

	text-align: center;

	text-decoration: none;
}


.szcbe-service-rail a:hover {
	background: #0756e8;

	color: #fff;
}



/* =========================================================
   活动模块
   ========================================================= */

.szcbe-events-home {
	background:
		linear-gradient(
			135deg,
			#eff6ff,
			#fff
		);

	padding:
		64px
		0;
}


.szcbe-event-grid {
	display: grid;

	gap: 13px;

	grid-template-columns:
		repeat(
			5,
			1fr
		);
}


.szcbe-event-grid article {
	background: #fff;

	border:
		1px solid
		#d6e5fb;

	border-radius: 9px;

	min-height: 156px;

	padding:
		21px
		14px;

	text-align: center;
}


.szcbe-event-grid span {
	color: #0756e8;

	display: block;

	font-size: 26px;
}


.szcbe-event-grid b {
	color: #0756e8;

	display: block;

	font-size: 25px;

	margin-top: 8px;
}


.szcbe-event-grid small {
	color: #314f7e;

	display: block;

	font-size: 13px;

	font-weight: 700;
}


.szcbe-event-grid p {
	color: #6c7e9c;

	font-size: 12px;

	line-height: 1.5;

	margin:
		7px
		0
		0;
}



/* =========================================================
   会长致辞首页模块
   ========================================================= */

.szcbe-voice-home {
	background: #fff;

	padding:
		60px
		0;
}


.szcbe-voice-card {
	background:
		linear-gradient(
			95deg,
			rgba(0,27,99,.94),
			rgba(15,97,208,.52)
		),
		url('assets/home-hero.webp')
		center 57% / cover;

	border-radius: 12px;

	color: #fff;

	min-height: 250px;

	overflow: hidden;

	padding:
		38px
		52px;
}


.szcbe-voice-card div {
	max-width: 550px;
}


.szcbe-voice-card span {
	color: #96caff;

	font-size: 14px;
}


.szcbe-voice-card h3 {
	color: #fff;

	font-size: 28px;

	margin:
		7px
		0;
}


.szcbe-voice-card p {
	line-height: 1.8;
}


.szcbe-voice-card a {
	color: #fff;

	font-weight: 700;

	text-decoration: none;
}



/* =========================================================
   会员福利
   ========================================================= */

.szcbe-welfare-home {
	background: #f6faff;

	padding:
		60px
		0;
}


.szcbe-welfare-grid {
	display: grid;

	gap: 16px;

	grid-template-columns:
		repeat(
			4,
			1fr
		);
}


.szcbe-welfare-grid a {
	background: #fff;

	border-bottom:
		3px solid
		#9ec6ff;

	box-shadow:
		0 5px 14px
		rgba(23,81,166,.08);

	color: #123571;

	min-height: 130px;

	padding: 20px;

	text-decoration: none;
}


.szcbe-welfare-grid b,
.szcbe-welfare-grid span {
	display: block;
}


.szcbe-welfare-grid b {
	font-size: 18px;

	margin-bottom: 11px;
}


.szcbe-welfare-grid span {
	color: #7486a4;

	font-size: 13px;

	line-height: 1.6;
}



/* =========================================================
   新闻
   ========================================================= */

.szcbe-news-home {
	background: #fff;

	padding:
		65px
		0;
}


.szcbe-news-columns {
	display: grid;

	gap: 34px;

	grid-template-columns:
		1fr
		1fr;
}


.szcbe-news-columns .szcbe-section-heading {
	margin-bottom: 14px;
}


.szcbe-news-columns .szcbe-section-heading h2 {
	font-size: 28px;
}


.szcbe-news-list {
	display: grid;

	gap: 12px;
}


.szcbe-news-list a {
	background: #f8fbff;

	border-left:
		4px solid
		#1c72ea;

	color: #193969;

	min-height: 78px;

	padding:
		16px
		18px;

	text-decoration: none;
}


.szcbe-news-list b,
.szcbe-news-list span {
	display: block;
}


.szcbe-news-list span {
	color: #7185a7;

	font-size: 13px;

	margin-top: 7px;
}



/* =========================================================
   合作伙伴
   ========================================================= */

.szcbe-partners {
	background: #eff6ff;

	padding:
		52px
		0;
}


.szcbe-partners .szcbe-section-heading {
	align-items: end;
}


.szcbe-partners .szcbe-section-heading span {
	color: #6d80a2;

	font-size: 13px;
}


.szcbe-partner-grid {
	display: grid;

	gap: 9px;

	grid-template-columns:
		repeat(
			8,
			1fr
		);
}


.szcbe-partner-grid span {
	align-items: center;

	background: #fff;

	border:
		1px solid
		#dceafa;

	color: #637796;

	display: flex;

	font-size: 13px;

	font-weight: 700;

	height: 49px;

	justify-content: center;

	text-align: center;
}



/* =========================================================
   加入协会
   ========================================================= */

.szcbe-join-home {
	background:
		#061d65
		url('assets/home-hero.webp')
		right center / cover;

	color: #fff;

	padding:
		65px
		0;

	position: relative;
}


.szcbe-join-home::before {
	background:
		rgba(3,20,71,.78);

	content: '';

	inset: 0;

	position: absolute;
}


.szcbe-join-home .szcbe-home__inner {
	align-items: center;

	display: flex;

	justify-content: space-between;

	position: relative;
}


.szcbe-join-home p:not(.szcbe-kicker) {
	line-height: 1.7;

	max-width: 560px;
}


.szcbe-join-home .szcbe-kicker {
	background:
		rgba(165,206,255,.2);

	color: #b9dbff;
}


.szcbe-join-home__steps {
	background:
		rgba(9,59,146,.72);

	border:
		1px solid
		rgba(173,211,255,.45);

	border-radius: 10px;

	display: grid;

	gap: 13px;

	min-width: 260px;

	padding: 22px;
}


.szcbe-join-home__steps span {
	border-bottom:
		1px solid
		rgba(255,255,255,.18);

	font-size: 15px;

	padding-bottom: 12px;
}


.szcbe-join-home__steps span:last-child {
	border: 0;

	padding: 0;
}



/* =========================================================
   中型桌面尺寸
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

	.szcbe-site-header__inner {
		gap: 18px;

		padding-left: 24px;

		padding-right: 24px;
	}


	.szcbe-brand__logo {
		height: 46px;

		max-width: 220px;
	}


	.szcbe-nav__list {
		gap: 16px;
	}


	.szcbe-nav__item > a,
	.szcbe-nav__parent {
		font-size: 14px;
	}

}



/* =========================================================
   平板 / 手机导航
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

	.szcbe-site-header {
		position: sticky;

		top: 0;
	}


	.szcbe-site-header__inner {
		gap: 14px;

		height: 72px;

		padding-left: 20px;

		padding-right: 20px;

		position: relative;
	}



	/* =====================================================
	   移动端 Logo
	   ===================================================== */

	.szcbe-brand {
		flex:
			0
			1
			auto;

		min-width: 0;
	}


	.szcbe-brand__logo {
		height: 44px;

		max-width:
			min(
				230px,
				45vw
			);

		width: auto;
	}



	/* =====================================================
	   会员中心图标
	   ===================================================== */

	.szcbe-account-link {
		margin-left: auto;

		order: 2;
	}



	/* =====================================================
	   汉堡按钮
	   ===================================================== */

	.szcbe-menu-toggle {
		display: block;

		flex:
			0
			0
			42px;

		margin-left: 2px;

		order: 3;
	}



	/* =====================================================
	   手机导航容器
	   ===================================================== */

	.szcbe-nav {
		background: #ffffff;

		border-top:
			1px solid
			#edf1f7;

		box-shadow:
			0 12px 30px
			rgba(6,27,72,.12);

		display: none;

		left: 0;

		position: absolute;

		right: 0;

		top: 72px;

		width: 100%;

		z-index: 9999;
	}


	/*
	 * 点击汉堡菜单以后
	 * JS 添加 is-open
	 */
	.szcbe-nav.is-open {
		display: block;
	}



	/* =====================================================
	   手机一级菜单
	   ===================================================== */

	.szcbe-nav__list {
		display: block;

		margin: 0;

		max-height:
			calc(
				100vh - 72px
			);

		overflow-y: auto;

		padding:
			10px
			20px
			20px;

		width: 100%;
	}


	.szcbe-nav__item {
		border-bottom:
			1px solid
			#edf1f7;

		width: 100%;
	}


	/*
	 * 普通一级菜单链接
	 * +
	 * 有下拉菜单的 button
	 */
	.szcbe-nav__item > a,
	.szcbe-nav__parent {
		box-sizing: border-box;

		font-size: 16px;

		line-height: 1.4;

		padding:
			15px
			4px;

		text-align: left;

		width: 100%;
	}



	/*
	 * 手机端不使用桌面下划线
	 */
	.szcbe-nav__item.is-active > a::after,
	.szcbe-nav__item:hover > a::after,
	.szcbe-nav__item.is-active > .szcbe-nav__parent::after,
	.szcbe-nav__item:hover > .szcbe-nav__parent::after {
		display: none;
	}



	/* =====================================================
	   有二级菜单的一级按钮
	   添加右侧箭头
	   ===================================================== */

	.szcbe-nav__parent {
		padding-right: 38px;
	}


	.szcbe-nav__parent::before {
		border-bottom:
			2px solid
			currentColor;

		border-right:
			2px solid
			currentColor;

		content: '';

		height: 7px;

		position: absolute;

		right: 8px;

		top: 50%;

		transform:
			translateY(-65%)
			rotate(45deg);

		transition:
			transform .2s ease;

		width: 7px;
	}



	/*
	 * 二级菜单打开以后
	 * 箭头向上
	 */
	.szcbe-nav__item.is-submenu-open
	> .szcbe-nav__parent::before {
		transform:
			translateY(-35%)
			rotate(-135deg);
	}



	/* =====================================================
	   手机二级菜单
	   默认隐藏
	   ===================================================== */

	.szcbe-nav__submenu {
		background: #f8fbff;

		border: 0;

		border-radius: 0;

		box-shadow: none;

		display: none;

		opacity: 1;

		pointer-events: auto;

		margin:
			0
			0
			10px;

		min-width: 0;

		padding:
			5px
			0
			8px
			14px;

		position: static;

		transform: none;

		transition: none;

		visibility: visible;

		width: 100%;
	}



	/*
	 * JS 点击父级 button 后
	 * 给 li 添加 is-submenu-open
	 */
	.szcbe-nav__item.is-submenu-open
	> .szcbe-nav__submenu {
		display: block;

		opacity: 1;

		pointer-events: auto;

		transform: none;

		visibility: visible;
	}



	/*
	 * 移动端禁止 hover 强制打开
	 *
	 * 只有真正添加
	 * is-submenu-open
	 * 才显示
	 */
	.szcbe-nav__item--has-children:hover
	> .szcbe-nav__submenu {
		display: none;
	}


	.szcbe-nav__item--has-children.is-submenu-open:hover
	> .szcbe-nav__submenu {
		display: block;
	}



	.szcbe-nav__submenu li {
		border: 0;
	}


	.szcbe-nav__submenu a {
		border-radius: 5px;

		color: #526587;

		font-size: 14px;

		padding:
			10px
			12px;
	}


	.szcbe-nav__submenu a:hover,
	.szcbe-nav__submenu a:focus {
		background: #edf5ff;

		color: #0756e8;
	}



	/*
	 * 手机菜单打开时
	 * 防止页面背景滚动
	 */
	body.szcbe-menu-open {
		overflow: hidden;
	}



	/* =====================================================
	   原网站其他移动端样式
	   ===================================================== */

	.szcbe-card-grid {
		grid-template-columns: 1fr;
	}


	.szcbe-shell,
	.szcbe-home__inner {
		padding-left: 16px;

		padding-right: 16px;
	}


	.szcbe-hero,
	.szcbe-hero__inner {
		min-height: 650px;
	}


	.szcbe-hero {
		background-position:
			62%
			center;
	}


	.szcbe-stat-grid {
		bottom: 20px;

		gap: 8px;

		grid-template-columns:
			repeat(
				2,
				1fr
			);

		left: 16px;

		right: 16px;
	}


	.szcbe-stat-card {
		gap: 9px;

		min-height: 74px;

		padding:
			0
			10px;
	}


	.szcbe-stat-card__icon {
		font-size: 22px;

		height: 37px;

		width: 37px;
	}


	.szcbe-stat-card strong {
		font-size: 21px;
	}


	.szcbe-stat-card span:not(.szcbe-stat-card__icon) {
		font-size: 12px;
	}


	.szcbe-about-home__grid {
		gap: 35px;

		grid-template-columns: 1fr;

		padding-bottom: 45px;

		padding-top: 45px;
	}


	.szcbe-values {
		grid-template-columns:
			repeat(
				2,
				1fr
			);
	}


	.szcbe-timeline {
		margin-left: 26px;
	}


	.szcbe-committee-grid,
	.szcbe-welfare-grid {
		grid-template-columns:
			repeat(
				2,
				1fr
			);
	}


	.szcbe-committee-card {
		min-height: 153px;
	}


	.szcbe-branches-home__heading,
	.szcbe-join-home .szcbe-home__inner {
		align-items: flex-start;

		flex-direction: column;

		gap: 22px;
	}


	.szcbe-branch-markers {
		height: 220px;
	}


	.szcbe-branch-stats,
	.szcbe-event-grid {
		grid-template-columns:
			repeat(
				2,
				1fr
			);
	}


	.szcbe-branch-stats span {
		border-bottom:
			1px solid
			#d6e5f7;

		padding: 8px;
	}


	.szcbe-development__layout,
	.szcbe-news-columns {
		grid-template-columns: 1fr;
	}


	.szcbe-year-tabs {
		grid-template-columns:
			repeat(
				2,
				1fr
			);
	}


	.szcbe-partner-grid {
		grid-template-columns:
			repeat(
				3,
				1fr
			);
	}


	.szcbe-voice-card {
		padding:
			30px
			23px;
	}

}



/* =========================================================
   手机
   <= 600px
   ========================================================= */

@media (max-width: 600px) {

	.szcbe-site-header__inner {
		gap: 8px;

		height: 64px;

		padding-left: 14px;

		padding-right: 14px;
	}


	.szcbe-brand__logo {
		height: 36px;

		max-width:
			min(
				190px,
				55vw
			);
	}


	.szcbe-account-link {
		flex-basis: 26px;
	}


	.szcbe-account-link svg {
		height: 24px;

		width: 24px;
	}


	.szcbe-menu-toggle {
		flex-basis: 38px;

		height: 38px;

		padding: 7px;

		width: 38px;
	}


	.szcbe-menu-toggle span {
		width: 22px;
	}


	.szcbe-nav {
		top: 64px;
	}


	.szcbe-nav__list {
		max-height:
			calc(
				100vh - 64px
			);

		padding-left: 16px;

		padding-right: 16px;
	}

}