.dhc-about-subnav-wrap {
	background:
		linear-gradient(180deg, rgba(248, 252, 253, .98), rgba(241, 248, 250, .96));
	border-bottom: 1px solid #dbe8ed;
	font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
	padding: 15px 20px 17px;
}

.dhc-about-subnav-wrap *,
.dhc-about-subnav-wrap *::before,
.dhc-about-subnav-wrap *::after {
	box-sizing: border-box;
}

.dhc-about-subnav {
	align-items: center;
	background: rgba(255, 255, 255, .96);
	border: 1px solid #d6e6eb;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(16, 68, 91, .07);
	display: flex;
	gap: 5px;
	justify-content: center;
	margin: 0 auto;
	max-width: 850px;
	padding: 7px;
	width: 100%;
}

.dhc-about-subnav > a {
	border: 0;
	border-radius: 11px;
	color: #466579;
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 21px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dhc-about-subnav > a:hover {
	background: #edf7f9;
	color: #005e83;
	transform: translateY(-1px);
}

.dhc-about-subnav > a.active {
	background: linear-gradient(135deg, #007fa9, #006487);
	box-shadow: 0 8px 18px rgba(0, 111, 151, .2);
	color: #fff;
	font-weight: 700;
}

@media (max-width: 640px) {
	.dhc-about-subnav-wrap {
		overflow: hidden;
		padding: 10px 0 12px;
	}

	.dhc-about-subnav {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
		box-shadow: none;
		justify-content: flex-start;
		max-width: none;
		overflow-x: auto;
		padding: 7px 15px;
		scrollbar-width: none;
	}

	.dhc-about-subnav::-webkit-scrollbar {
		display: none;
	}

	.dhc-about-subnav > a {
		font-size: 14px;
		padding: 9px 16px;
		white-space: nowrap;
	}
}