/* web21 模板 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.6; color: #333; background: #fff; }

.w21-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* 旋转式顶栏导航 */
.w21-hd { background: #fff; border-bottom: 1px solid #eee; }
.w21-hd-top { padding: 14px 0; }
.w21-hd-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.w21-logo { font-size: 22px; font-weight: 700; color: #222; text-decoration: none; }
.w21-logo:hover { color: #0066cc; }

.w21-nav-rotate {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-top: 1px solid #eee;
}
.w21-nav-arrow {
	flex-shrink: 0;
	width: 44px;
	height: 48px;
	border: none;
	background: rgba(0,0,0,0.05);
	color: #333;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.w21-nav-arrow:hover { background: rgba(0,0,0,0.1); }
.w21-nav-view {
	flex: 1;
	overflow: hidden;
}
.w21-nav-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.35s ease;
	will-change: transform;
}
.w21-nav-item {
	flex-shrink: 0;
	padding: 14px 20px;
	color: #444;
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
	transition: color 0.2s, background 0.2s;
}
.w21-nav-item:hover { background: rgba(0,0,0,0.06); color: #0066cc; }
.w21-nav-cta { background: #0066cc; color: #fff !important; }
.w21-nav-cta:hover { background: #0052a3; color: #fff !important; }

@media (max-width: 768px) {
	.w21-nav-arrow { width: 36px; height: 44px; font-size: 20px; }
	.w21-nav-item { padding: 12px 14px; font-size: 13px; }
}

/* 页脚：左右抽屉合并呈现 */
.w21-ft { background: #1a1a1a; color: #bbb; overflow: hidden; }
.w21-ft-drawers {
	display: flex;
	min-height: 280px;
}
.w21-ft-drawer {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: stretch;
	animation: w21-drawer-merge 0.8s ease-out forwards;
}
.w21-ft-drawer-left {
	background: #252525;
	transform-origin: left center;
}
.w21-ft-drawer-right {
	background: #2d2d2d;
	transform-origin: right center;
}
@keyframes w21-drawer-merge {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.w21-ft-drawer-right {
	animation-name: w21-drawer-merge-right;
}
@keyframes w21-drawer-merge-right {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.w21-ft-drawer-inner {
	padding: 40px 28px 32px;
	max-width: 480px;
}
.w21-ft-drawer-right .w21-ft-drawer-inner { margin-left: auto; }
.w21-ft-title { color: #fff; font-size: 16px; margin-bottom: 12px; }
.w21-ft-desc { font-size: 13px; line-height: 1.6; margin-bottom: 16px; color: #999; }
.w21-ft-contact p { font-size: 13px; margin-bottom: 8px; color: #aaa; }
.w21-ft-drawer a { display: block; font-size: 13px; color: #aaa; text-decoration: none; margin-bottom: 10px; }
.w21-ft-drawer a:hover { color: #fff; }
.w21-ft-bottom { padding-top: 20px; margin-top: 12px; border-top: 1px solid #404040; font-size: 12px; color: #777; }
.w21-ft-bottom a { color: #777; text-decoration: none; margin-left: 12px; }
.w21-ft-bottom a:hover { color: #aaa; }
.w21-ft-friend { margin-top: 12px; font-size: 12px; }
.w21-ft-friend a { display: inline-block; color: #666; text-decoration: none; margin-right: 14px; margin-bottom: 4px; }
.w21-ft-friend a:hover { color: #999; }

@media (max-width: 768px) {
	.w21-ft-drawers { flex-direction: column; min-height: 0; }
	.w21-ft-drawer-right .w21-ft-drawer-inner { margin-left: 0; }
	.w21-ft-drawer-inner { padding: 28px 20px; max-width: none; }
}

/* 首页 */
.w21-hero { background: linear-gradient(180deg, #e8f4fc 0%, #fff 100%); padding: 60px 20px 50px; text-align: center; }
.w21-hero h1 { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 12px; }
.w21-hero p { font-size: 15px; color: #555; max-width: 560px; margin: 0 auto 24px; }
.w21-hero .w21-btn { display: inline-block; padding: 12px 24px; background: #0066cc; color: #fff; text-decoration: none; border-radius: 6px; font-size: 14px; margin: 0 8px 8px 0; }
.w21-hero .w21-btn:hover { background: #0052a3; }
.w21-hero .w21-btn-outline { background: transparent; color: #0066cc; border: 1px solid #0066cc; }
.w21-hero .w21-btn-outline:hover { background: #e8f4fc; }

.w21-sec { padding: 48px 0; }
.w21-sec-title { font-size: 24px; font-weight: 700; color: #222; margin-bottom: 8px; text-align: center; }
.w21-sec-desc { font-size: 14px; color: #666; text-align: center; margin-bottom: 28px; }
.w21-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .w21-grid3 { grid-template-columns: 1fr; } }
.w21-card { background: #fafafa; padding: 24px; border-radius: 8px; text-align: center; }
.w21-card h3 { font-size: 16px; margin-bottom: 8px; color: #222; }
.w21-card p { font-size: 13px; color: #555; }
.w21-card a { color: #0066cc; font-size: 13px; text-decoration: none; margin-top: 8px; display: inline-block; }
.w21-card a:hover { text-decoration: underline; }

.w21-about { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 768px) { .w21-about { grid-template-columns: 1fr; } }
.w21-about-text h2 { font-size: 22px; margin-bottom: 16px; color: #222; }
.w21-about-text p { font-size: 14px; color: #555; margin-bottom: 12px; }
.w21-about-text a { color: #0066cc; font-size: 14px; text-decoration: none; }
.w21-about-img img { width: 100%; height: auto; border-radius: 8px; }

.w21-cta { background: #0066cc; color: #fff; padding: 40px 20px; text-align: center; }
.w21-cta h2 { font-size: 22px; margin-bottom: 12px; }
.w21-cta p { font-size: 14px; margin-bottom: 20px; opacity: 0.9; }
.w21-cta a { display: inline-block; padding: 12px 28px; background: #fff; color: #0066cc; text-decoration: none; border-radius: 6px; font-weight: 600; }
.w21-cta a:hover { background: #f0f0f0; }

/* 内页 */
.w21-page { padding: 40px 0 60px; }
.w21-page-title { font-size: 26px; font-weight: 700; color: #222; margin-bottom: 12px; }
.w21-page-desc { font-size: 14px; color: #666; margin-bottom: 28px; }
.w21-prose p { margin-bottom: 16px; font-size: 15px; color: #444; }
.w21-prose h3 { font-size: 18px; margin: 24px 0 12px; color: #222; }
.w21-list { list-style: none; }
.w21-list li { padding: 14px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.w21-list li:last-child { border-bottom: none; }
.w21-form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.w21-form input, .w21-form textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.w21-form textarea { min-height: 120px; resize: vertical; }
.w21-form button { padding: 12px 24px; background: #0066cc; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }
.w21-form button:hover { background: #0052a3; }

.w21-btn { display: inline-block; padding: 12px 24px; background: #0066cc; color: #fff; text-decoration: none; border-radius: 6px; font-size: 14px; }
.w21-btn:hover { background: #0052a3; color: #fff; }