/* ============================================
   通用Banner样式 - 会员中心
   配色：深蓝 + 活力橙 (与协会风格一致)
   ============================================ */

.banner {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #1a2a6c, #2d4373, #DB6731);



	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.banner-content {
	text-align: center;
	z-index: 2;
	padding: 0 20px;
}

.banner-title {
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 10px;
	text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
	letter-spacing: 2px;color: #fff;
}

.banner-subtitle {
	font-size: 16px;
	opacity: 0.92;
	max-width: 640px;
	margin: 0 auto;
	letter-spacing: 1px;
}

.banner-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image:
			radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.12) 12px, transparent 22px),
			radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.10) 18px, transparent 28px),
			radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 60px, transparent 100px);
	background-size: 220px 220px, 260px 260px, 100% 100%;
	pointer-events: none;
}

.banner-pattern::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at 30% 40%, rgba(219, 103, 49, 0.15) 0%, transparent 50%),
	radial-gradient(circle at 70% 60%, rgba(26, 42, 108, 0.20) 0%, transparent 50%);
	animation: patternGlow 8s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes bannerGradient {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}

@keyframes patternGlow {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(5%, 5%) rotate(3deg); }
}

@media (max-width: 768px) {
	.banner {
		height: 150px;
	}
	.banner-title {
		font-size: 26px;
	}
	.banner-subtitle {
		font-size: 14px;
		max-width: 90%;
	}
}

@media (max-width: 480px) {
	.banner {
		height: 120px;
	}
	.banner-title {
		font-size: 20px;
		margin-bottom: 6px;
	}
	.banner-subtitle {
		font-size: 12px;
	}
}