/* -------------------------- 轮播图Banner区（大幅增强动画） -------------------------- */
.banner {
	padding: 0;
	position: relative;
	overflow: hidden;
}

.banner-slider {
	position: relative;
	width: 100%;
	height: clamp(300px, 40vw, 500px);
	overflow: hidden;
	touch-action: pan-y;
	/* 优化移动端触摸体验 */
}

.slider-wrapper {
	display: flex;
	width: 300%;
	/* 3张轮播图 */
	height: 100%;
	/* 新增：平滑过渡动画 */
	transition: transform var(--transition-slow);
}

.slider-item {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	position: relative;
}

.slider-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.slider-img {
	width: 36%;
	height: 100%;
	object-fit: cover;
	/* 新增：图片加载动画 */
	animation: imgFadeIn 1.2s ease forwards;
}

.slider-img1 {
	background-size: cover !important;
}

@keyframes imgFadeIn {
	from {
		opacity: 0.8;
		transform: scale(1.02);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* 轮播箭头（美化+动画） */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--primary-blue);
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
	transition: var(--transition-base);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--light-blue);
}

.slider-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.1);
	box-shadow: var(--shadow-lg);
	color: var(--primary-blue-light);
}

.arrow-left {
	left: 2vw;
}

.arrow-right {
	right: 2vw;
}

/* 轮播指示器（美化+动画） */
.slider-indicators {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 10;
}

.indicator-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: var(--transition-slow);
	border: 2px solid transparent;
}

.indicator-dot.active {
	background: #fff;
	width: 36px;
	border-radius: 6px;
}

/* -------------------------- 产品导航与介绍区 -------------------------- */
.product-section {
	padding: var(--spacing-xxl) 0;
	background: #fff;
}

.product-tabs {
	display: flex;
	justify-content: center;
	gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
	margin-bottom: var(--spacing-xl);
	flex-wrap: wrap;
}

.product-tab {
	padding: clamp(var(--spacing-sm), 1.5vw, var(--spacing-md)) clamp(var(--spacing-lg), 3vw, var(--spacing-xl));
	background: var(--light-gray);
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 600;
	transition: var(--transition-base);
}

.product-tab.active {
	background: var(--primary-blue);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.product-tab:hover:not(.active) {
	background: var(--light-blue);
	color: var(--primary-blue);
	transform: translateY(-2px);
}

.product-content {
	display: none;
}

.product-content.active {
	display: block;
}

.product-showcase {
	display: flex;
	align-items: center;
	gap: clamp(var(--spacing-lg), 5vw, var(--spacing-xxl));
	flex-wrap: wrap-reverse;
	justify-content: center;
}

.product-img {
	/* flex: 1;
	min-width: 300px;
	max-width: 400px; */
	text-align: center;
}

.product-img img {
	width: 190px;
	height: 385px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	transition: var(--transition-slow);
}

.product-img img:hover {
	transform: translateY(-10px) scale(1.02);
}

.product-info {
	flex: 1;
	min-width: 300px;
	max-width: 600px;
}

.product-info-title {
	font-size: clamp(20px, 4vw, 26px);
	color: var(--dark-gray);
	margin-bottom: var(--spacing-md);
	line-height: 1.3;
}

.product-info-desc {
	font-size: clamp(14px, 2vw, 16px);
	color: var(--gray);
	margin-bottom: var(--spacing-xl);
	line-height: 1.6;
}

.product-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--spacing-md);
}

.product-card {
	background: var(--light-gray);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);

}

.product-card:hover {
	color: var(--light-gray);
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
	background: linear-gradient(217.04deg, #3366FF 1.29%, #07EFFE 117.58%, #ADD3FF 124.49%);
}

.product-card-title {
	font-size: clamp(16px, 2vw, 18px);
	margin-bottom: var(--spacing-xs);
}

.product-card p {
	font-size: clamp(12px, 2vw, 14px);
}

/* -------------------------- 8大核心优势区 -------------------------- */
.advantage-section {
	padding: var(--spacing-xxl) 0;
	background: #0b7bf0;
}

.advantage-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xl);
}

.privateimg {
	width: 20px;
	height: 20px;
	display: block;
	float: left;
	margin-right: 5px;
	margin-top: 2px;
}

.advantage-tab {
	color: #fff;
	padding: var(--spacing-sm) var(--spacing-md);
	background: rgba(255, 255, 255, .1);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: clamp(12px, 2vw, 14px);
	font-weight: 500;
	transition: var(--transition-base);
	border: 1px solid rgba(203, 220, 255, .5);
	box-shadow: 2px 2px 22px 5px #6d6d6d26;
}

.advantage-tab.active {
	background: var(--light-gray);
	color: #2d8cf0;
}

.advantage-tab:hover:not(.active) {
	background: var(--light-gray);
	color: var(--primary-blue);
}

.advantage-content {
	background: #fff;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.advantage-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-lg);
}

.advantage-card {
	padding: var(--spacing-lg);
	border-left: 3px solid var(--primary-blue);
	background: var(--light-gray);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	transition: var(--transition-base);
}

.advantage-card:hover {
	transform: translateX(5px);
	border-left-color: var(--primary-blue-light);
	box-shadow: var(--shadow-sm);
}

.advantage-card-title {
	font-size: clamp(16px, 2vw, 18px);
	color: var(--dark-gray);
	margin-bottom: var(--spacing-xs);
}

.advantage-card-desc {
	font-size: clamp(12px, 2vw, 14px);
	color: var(--gray);
}

/* -------------------------- 多场景电商解决方案区 -------------------------- */
.solution-section {
	padding: var(--spacing-xxl) 0;
	background: #fff;
}

.solution-content {
	display: flex;
	align-items: center;
	gap: clamp(var(--spacing-lg), 5vw, var(--spacing-xxl));
	flex-wrap: wrap;
	justify-content: center;
}

.solution-info {
	flex: 1;
	min-width: 300px;
	max-width: 500px;
}

.solution-info-title {
	font-size: clamp(20px, 4vw, 26px);
	color: var(--dark-gray);
	margin-bottom: var(--spacing-md);
}

.solution-info-desc {
	font-size: clamp(14px, 2vw, 16px);
	color: var(--gray);
	margin-bottom: var(--spacing-lg);
	line-height: 1.6;
}

.solution-features {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xl);
}

.solution-feature {
	padding: var(--spacing-sm) var(--spacing-lg);
	background: var(--light-blue);
	color: var(--primary-blue);
	border-radius: var(--radius-md);
	font-size: clamp(12px, 2vw, 14px);
	font-weight: 500;
}

.solution-btn {
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--primary-blue);
	color: #fff;
	border-radius: var(--radius-md);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	transition: var(--transition-base);
}

.solution-btn:hover {
	background: var(--primary-blue-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.solution-img {
	flex: 1;
	min-width: 300px;
	max-width: 600px;
}

.solution-img img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* -------------------------- 私域裂变引流区（核心：移动端横向滑动） -------------------------- */
.fission-section {
	padding: var(--spacing-xxl) 0;
	background: #F5F9FE;
	border-radius: var(--radius-xl);
	/* margin: 0 var(--spacing-md) var(--spacing-xxl); */
}

.fission-content {
	max-width: 100%;
}

/* 裂变标签容器：核心滑动样式 */
.fission-tabs-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: var(--spacing-xl);
}

.fission-scroll-hint {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--primary-blue);
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-base);
}

.fission-scroll-hint:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.1);
}

.left-hint {
	left: 0;
}

.right-hint {
	right: 0;
}

.fission-tabs {
	display: flex;
	gap: var(--spacing-sm);
	overflow-x: auto;
	padding: var(--spacing-sm) 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* 移动端顺滑滚动 */
	scrollbar-width: none;
	/* 隐藏PC端滚动条 */
}

/* 隐藏滚动条（兼容各浏览器） */
.fission-tabs::-webkit-scrollbar {
	display: none;
}

.fission-tab {
	flex: 0 0 auto;
	/* 禁止收缩，保证宽度固定 */
	padding: var(--spacing-md) var(--spacing-xl);
	background: #fff;
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	white-space: nowrap;
	/* 禁止文字换行 */
	transition: var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.fission-tab.active {
	background: var(--primary-blue);
	color: #fff;
}

.fission-tab:hover:not(.active) {
	background: var(--light-blue);
	color: var(--primary-blue);
	transform: translateY(-2px);
}

.fission-detail {
	visibility: hidden;
	/* 替代display: none */
	opacity: 0;
	height: 0;
	overflow: hidden;
	background: #fff;
	padding: 0 var(--spacing-xl);
	/* 初始padding为0 */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: opacity 0.3s ease;
	/* 仅保留淡入淡出，无位移 */
}

.fission-detail.active {
	visibility: visible;
	/* 替代display: block */
	opacity: 1;
	height: auto;
	padding: var(--spacing-xl);
	/* 激活后恢复padding */
}

.fission-detail h3 {
	font-size: clamp(18px, 3vw, 22px);
	color: var(--dark-gray);
	margin-bottom: var(--spacing-md);
}

.fission-detail p {
	font-size: clamp(14px, 2vw, 16px);
	color: var(--gray);
	margin-bottom: var(--spacing-lg);
	line-height: 1.6;
}

.fission-detail ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-md);
}

.fission-detail li {
	padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg);
	position: relative;
	font-size: clamp(12px, 2vw, 14px);
	color: var(--dark-gray);
}

.fission-detail li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary-blue);
	font-weight: 700;
}

/* -------------------------- 行业案例区 -------------------------- */
.case-section {
	padding: var(--spacing-xxl) 0;
	background: #fff;
}

.case-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
}

.case-card {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: var(--transition-slow);
}

.case-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: var(--shadow-lg);
}

.case-card-img {
	width: 100%;
	height: 370px;
	object-fit: cover;
}

.case-card-title {
	padding: var(--spacing-md);
	background: var(--light-gray);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	text-align: center;
	color: var(--dark-gray);
}

/* -------------------------- 合作伙伴区 -------------------------- */
.partner-section {
	padding: var(--spacing-xl) 0 var(--spacing-xxl);
	/* background: var(--light-gray); */
	border-radius: var(--radius-xl);
	margin: 0 var(--spacing-md) var(--spacing-xxl);
}

.partner-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(var(--spacing-lg), 3vw, var(--spacing-xl));
	align-items: center;
	padding: var(--spacing-lg) 0;
}

.partner-logo {
	width: clamp(130px, 15vw, 190px);
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-base);
}

.partner-logo:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-md);
}

.partner-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: none;
}

/* -------------------------- 新用户福利区 -------------------------- */
.benefit-section {
	padding: var(--spacing-xxl) 0;
	background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light));
	color: #fff;
	text-align: center;
}

.benefit-title {
	font-size: clamp(20px, 4vw, 28px);
	font-weight: 700;
	margin-bottom: var(--spacing-xl);
}

.benefit-btn {
	padding: var(--spacing-md) var(--spacing-xxl);
	background: #fff;
	color: var(--primary-blue);
	border-radius: var(--radius-lg);
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 700;
	transition: var(--transition-base);
	box-shadow: var(--shadow-md);
}

.benefit-btn:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	background: var(--light-gray);
}


/* -------------------------- 公司介绍模块 -------------------------- */
.company-section {
	padding: var(--spacing-xxl) 0;
	background: #f8fafc;
}

.company-content {
	display: flex;
	align-items: center;
	gap: clamp(var(--spacing-lg), 5vw, var(--spacing-xxl));
	flex-wrap: wrap;
	justify-content: center;
	background: #fff;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.company-img {
	flex: 1;
	min-width: 300px;
	max-width: 500px;
}

.company-img img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	transition: var(--transition-slow);
}

.company-img img:hover {
	transform: scale(1.02);
	box-shadow: var(--shadow-md);
}

.company-text {
	flex: 1;
	min-width: 300px;
	max-width: 600px;
	line-height: 1.8;
	color: var(--gray);
}

.company-text p {
	margin-bottom: var(--spacing-md);
}

/* -------------------------- 服务理念模块 -------------------------- */
.service-section {
	padding: var(--spacing-xxl) 0;
	background: #fff;
}

.service-subtitle {
	text-align: center;
	color: var(--gray);
	margin-bottom: var(--spacing-xl);
	font-size: clamp(14px, 2vw, 16px);
}

.service-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
}

.service-card {
	background: #F5F9FE;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-slow);
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-md);
}

.service-card-img {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.service-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-slow);
}

.service-card:hover .service-card-img img {
	transform: scale(1.05);
}

.service-card h3 {
	padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xs);
	font-size: clamp(16px, 2vw, 20px);
	color: var(--dark-gray);
}

.service-card p {
	padding: 0 var(--spacing-lg) var(--spacing-lg);
	color: var(--gray);
	line-height: 1.6;
}

/* -------------------------- 联系我们模块 -------------------------- */
.contact-section {
	padding: var(--spacing-xxl) 0;
}

.contact-subtitle {
	text-align: center;
	color: var(--gray);
	margin-bottom: var(--spacing-xl);
	font-size: clamp(14px, 2vw, 16px);
}

.contact-content {
	display: flex;
	align-items: stretch;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.contact-map {
	flex: 2;
	min-width: 300px;
}

.contact-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-info {
	flex: 1;
	min-width: 280px;
	padding: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #f8fafc;
}

.contact-logo {
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.contact-logo img {
	max-width: 150px;
	height: auto;
}

.contact-item {
	margin-bottom: var(--spacing-lg);
}

.contact-item h4 {
	color: var(--dark-gray);
	margin-bottom: var(--spacing-xs);
	font-size: 16px;
}

.contact-item p {
	color: var(--gray);
	line-height: 1.6;
}

.contact-phone {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-blue);
}

/* -------------------------- 响应式适配 -------------------------- */
@media (max-width: 767px) {

	.company-content,
	.contact-content {
		flex-direction: column;
	}

	.contact-map {
		height: 250px;
	}

	.contact-info {
		padding: var(--spacing-lg);
	}
}

/* -------------------------- 1. 使用正版软件，保护您的合法权益模块 -------------------------- */
.auth-banner-section {
	background: url(../img/authorize_banner.png) center center / cover no-repeat;
    padding: 0; /* 去掉原来的上下padding */
    min-height: 360px; /* 设置一个合适的最小高度，根据你的设计调整 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 让内容垂直居中 */
    position: relative;
    overflow: hidden;
}

.auth-banner-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
	background-size: cover;
	opacity: 0.3;
}

.auth-banner-wrapper {
	position: relative;
	z-index: 1;
	text-align: center;
}

.auth-banner-title {
	font-size: clamp(24px, 5vw, 32px);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--spacing-xl);
	animation: fadeInDown 0.8s ease;
}

.auth-input-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xl);
	flex-wrap: wrap;
}

.auth-domain-input {
	padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 24px);
	border: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	font-size: clamp(14px, 2vw, 16px);
	width: clamp(280px, 50vw, 500px);
	transition: var(--transition-base);
}

.auth-domain-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.auth-btn {
	padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 32px);
	border: none;
	border-radius: var(--radius-md);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-base);
}

.auth-query-btn {
	background: var(--primary-blue);
	color: #fff;
	border-radius: 0;
}

.auth-apply-btn {
	background: #fff;
	color: var(--primary-blue);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.auth-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.auth-counter {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	color: #fff;
	font-size: clamp(14px, 2vw, 16px);
}

.counter-digits {
	display: flex;
	gap: 4px;
}

.digit {
	display: inline-block;
	width: clamp(32px, 5vw, 40px);
	height: clamp(32px, 5vw, 40px);
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	font-size: clamp(16px, 3vw, 20px);
	animation: countUp 0.6s ease forwards;
}

@keyframes countUp {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* -------------------------- 2. 为什么需要授权证书？模块 -------------------------- */
.auth-why-section {
	padding: var(--spacing-xxl) 0;
	background: #F5F9FF;
}

.auth-why-subtitle {
	text-align: center;
	color: var(--gray);
	font-size: clamp(14px, 2vw, 16px);
	margin-bottom: var(--spacing-xxl);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.auth-why-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-lg);
}

.auth-why-card {
	background: #fff;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
	transition: var(--transition-slow);
	position: relative;
	overflow: hidden;
}

.auth-why-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light));
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.auth-why-card:hover::before {
	transform: scaleX(1);
}

.auth-why-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-lg);
}

.card-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto var(--spacing-lg);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition-base);
}

.auth-why-card:hover .card-icon {
	color: #fff;
}

.card-icon img {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.card-title {
	font-size: clamp(18px, 3vw, 20px);
	font-weight: 600;
	color: var(--dark-gray);
	margin-bottom: var(--spacing-md);
}

.card-desc {
	font-size: clamp(14px, 2vw, 16px);
	color: var(--gray);
	line-height: 1.6;
}

/* -------------------------- 3. 常见问题模块 -------------------------- */
.auth-faq-section {
	padding: var(--spacing-xxl) 0;
	background: #fafafa;
}

.faq-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-lg);
}

.faq-column {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-base);
}

.faq-column:hover {
	box-shadow: var(--shadow-md);
}

.faq-column-header {
	background: url("../img/authorize_section3_1.png");
	padding: var(--spacing-lg);
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 600;
	color: var(--dark-gray);
}

.faq-list {
	list-style: none;
	padding: var(--spacing-md) 0;
}

.faq-item {
	padding: var(--spacing-sm) var(--spacing-lg);
	transition: var(--transition-base);
}

.faq-item:hover {
	color: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.faq-link {
	color: var(--dark-gray);
	font-size: clamp(14px, 2vw, 16px);
	transition: var(--transition-base);
	display: block;
}

.faq-item:hover .faq-link {
	color: var(--primary-blue);
	padding-left: 5px;
}

/* -------------------------- 响应式适配 -------------------------- */
@media (max-width: 767px) {
	.auth-input-group {
		flex-direction: column;
	}

	.auth-domain-input {
		width: 100%;
		border-radius: var(--radius-md);
		margin-bottom: var(--spacing-sm);
	}

	.auth-query-btn,
	.auth-apply-btn {
		width: 100%;
		border-radius: var(--radius-md);
	}

	.auth-why-cards {
		grid-template-columns: 1fr;
	}

	.faq-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.auth-banner-title {
		font-size: 20px;
	}

	.digit {
		width: 28px;
		height: 28px;
		font-size: 16px;
	}
}


/* -------------------------- 新增：提交反馈模块 -------------------------- */
.feedback-section {
	padding: var(--spacing-xxl) 0;
	background: #fff;
}

.feedback-wrapper {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--spacing-xl);
}

.feedback-form .form-group {
	margin-bottom: var(--spacing-lg);
}

.form-required::before {
	content: "*";
	color: #ff4d4f;
	margin-right: 4px;
}

/* 问题类型按钮组 */
.feedback-type-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	margin-top: var(--spacing-sm);
}

.feedback-type-btn {
	padding: var(--spacing-sm) var(--spacing-lg);
	background: #fff;
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-base);
	font-size: 14px;
	color: var(--dark-gray);
}

.feedback-type-btn input {
	display: none;
}

.feedback-type-btn.active,
.feedback-type-btn:hover {
	background: var(--primary-blue);
	border-color: var(--primary-blue);
	color: #fff;
}

/* 文本域 */
.feedback-textarea {
	width: 100%;
	min-height: 150px;
	padding: var(--spacing-md);
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	font-size: 14px;
	resize: vertical;
	transition: var(--transition-base);
}

.feedback-textarea:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 2px rgba(49, 133, 254, 0.1);
	outline: none;
}

/* 上传截图 */
.feedback-upload {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-sm);
}

.upload-btn {
	width: 80px;
	height: 80px;
	border: 2px dashed var(--border-gray);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: var(--transition-base);
	color: var(--gray);
}

.upload-btn:hover {
	border-color: var(--primary-blue);
	color: var(--primary-blue);
}

.upload-btn i {
	font-size: 20px;
	margin-bottom: 4px;
}

.upload-btn span {
	font-size: 12px;
}

.upload-preview {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.upload-preview .preview-item {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-md);
	overflow: hidden;
	position: relative;
}

.upload-preview .preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upload-preview .preview-item .remove-btn {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	cursor: pointer;
}

/* 联系方式 */
.feedback-contact-group {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.contact-option {
	padding: var(--spacing-sm) var(--spacing-lg);
	background: #fff;
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-base);
	font-size: 14px;
	color: var(--dark-gray);
}

.contact-option input {
	display: none;
}

.contact-option.active,
.contact-option:hover {
	background: var(--primary-blue);
	border-color: var(--primary-blue);
	color: #fff;
}

.contact-input-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.contact-input-wrap.active {
	max-height: 60px;
}

.contact-input-wrap input {
	width: 100%;
	padding: var(--spacing-md);
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	font-size: 14px;
}

/* 提交按钮 */
.feedback-submit-btn {
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--primary-blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-base);
}

.feedback-submit-btn:hover {
	background: var(--primary-blue-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* 响应式适配 */
@media (max-width: 767px) {
	.feedback-wrapper {
		padding: var(--spacing-lg);
	}

	.feedback-type-group {
		flex-direction: column;
	}

	.feedback-type-btn {
		text-align: center;
	}

	.feedback-contact-group {
		flex-direction: column;
	}

	.contact-option {
		text-align: center;
	}
}

/* 侵权盗版举报模块 */
.report-section {
	padding: var(--spacing-xxl) 0;
	background: #F5F9FE;
}

.report-subtitle {
	text-align: center;
	color: var(--gray);
	font-size: clamp(14px, 2vw, 16px);
	margin-bottom: var(--spacing-xl);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.report-form {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-label {
	display: block;
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 600;
	color: var(--dark-gray);
	margin-bottom: var(--spacing-sm);
}

.select-wrapper {
	position: relative;
}

.form-select,
.form-input,
.form-textarea {
	width: 100%;
	padding: clamp(12px, 2vw, 16px);
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	font-size: clamp(14px, 2vw, 16px);
	transition: var(--transition-base);
	background: #fff;
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(49, 133, 254, 0.1);
	outline: none;
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}

.upload-area {
	border: 2px dashed var(--border-gray);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl);
	text-align: center;
	cursor: pointer;
	transition: var(--transition-base);
}

.upload-area:hover {
	border-color: var(--primary-blue);
	background: var(--light-blue);
}

.upload-placeholder i {
	font-size: 48px;
	color: var(--gray);
	margin-bottom: var(--spacing-md);
}

.upload-placeholder p {
	color: var(--gray);
	font-size: clamp(12px, 2vw, 14px);
}

.upload-preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.upload-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.upload-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upload-item-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	cursor: pointer;
}

.form-submit {
	text-align: center;
}

.form-submit2 {
	background: none !important;
}

.form-submit2:hover {
	background: none !important;
}

.submit-btn {
	padding: clamp(12px, 2vw, 16px) clamp(40px, 5vw, 60px);
	background: var(--primary-blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.submit-btn:hover {
	background: var(--primary-blue-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* 响应式适配 */
@media (max-width: 767px) {
	.report-form {
		padding: var(--spacing-lg);
	}

	.upload-area {
		padding: var(--spacing-lg);
	}

	.upload-placeholder i {
		font-size: 36px;
	}
}

/* --------------- 通用表单样式（举报+反馈） --------------- */
.report-section,
.feedback-section {
	padding: var(--spacing-xxl) 0;
	background: #F5F9FE;
}

.report-subtitle {
	text-align: center;
	color: var(--gray);
	font-size: clamp(14px, 2vw, 16px);
	margin-bottom: var(--spacing-xl);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.report-form {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-label {
	display: block;
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 600;
	color: var(--dark-gray);
	margin-bottom: var(--spacing-sm);
}

.select-wrapper {
	position: relative;
}

.form-select,
.form-input,
.form-textarea {
	width: 100%;
	padding: clamp(12px, 2vw, 16px);
	border: 1px solid var(--border-gray);
	border-radius: var(--radius-md);
	font-size: clamp(14px, 2vw, 16px);
	transition: var(--transition-base);
	background: #fff;
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(49, 133, 254, 0.1);
	outline: none;
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}

.upload-area {
	border: 2px dashed var(--border-gray);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl);
	text-align: center;
	cursor: pointer;
	transition: var(--transition-base);
}

.upload-area:hover {
	border-color: var(--primary-blue);
	background: var(--light-blue);
}

.upload-placeholder i {
	font-size: 48px;
	color: var(--gray);
	margin-bottom: var(--spacing-md);
}

.upload-placeholder p {
	color: var(--gray);
	font-size: clamp(12px, 2vw, 14px);
}

.upload-preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

/* 统一上传预览项样式（兼容举报页.upload-item和反馈页.preview-item） */
.upload-item,
.preview-item {
	position: relative;
	/* 保留原有80x80的固定尺寸，避免和后面150px的样式冲突 */
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin: 5px;
	display: inline-block;
}

.upload-item img,
.preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 移除重复的150px宽度，避免覆盖固定尺寸 */
	border: 1px solid #eee;
	border-radius: 8px;
}

/* 统一删除按钮样式（兼容举报页和反馈页） */
.upload-item-remove,
.remove-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	cursor: pointer;
	/* 修正反馈页删除按钮的定位，和举报页保持一致 */
	top: -8px;
	right: -8px;
	background: #ff3b30;
}

.form-submit {
	text-align: center;
}

.form-submit2 {
	background: none !important;
}

.form-submit2:hover {
	background: none !important;
}

.submit-btn {
	padding: clamp(12px, 2vw, 16px) clamp(40px, 5vw, 60px);
	background: var(--primary-blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.submit-btn:hover {
	background: var(--primary-blue-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* 表单响应式适配 */
@media (max-width: 767px) {
	.report-form {
		padding: var(--spacing-lg);
	}

	.upload-area {
		padding: var(--spacing-lg);
	}

	.upload-placeholder i {
		font-size: 36px;
	}
}

/* --------------- 移动端弹窗通用样式 --------------- */
.JF-mobile-tip-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.JF-mobile-tip-modal.active {
	opacity: 1;
	visibility: visible;
}

.JF-modal-content {
	width: 85%;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	padding: 35px 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	text-align: center;
	position: relative;
	overflow: hidden;
	transform: scale(1);
}

/* 科技感装饰条 */
.JF-modal-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #409eff, #67c23a, #e6a23c);
}

/* 抖动动画（仅触发2次） */
@keyframes JF-shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	50% {
		transform: translateX(5px);
	}

	75% {
		transform: translateX(-5px);
	}
}

/* 弹窗激活时触发抖动动画 */
.JF-mobile-tip-modal.active .JF-modal-content {
	animation: JF-shake 0.5s ease-in-out 0.2s 2 forwards;
}

.JF-modal-icon {
	font-size: 52px;
	color: #409eff;
	margin-bottom: 18px;
}

.JF-modal-title {
	font-size: 19px;
	color: #303133;
	font-weight: 600;
	margin-bottom: 12px;
}

.JF-modal-desc {
	font-size: 15px;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 30px;
}

.JF-modal-btn {
	width: 85%;
	height: 46px;
	background: linear-gradient(90deg, #409eff, #36cfc9);
	border: none;
	border-radius: 23px;
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 6px 15px rgba(64, 158, 255, 0.3);
}

.JF-modal-btn:hover {
	background: linear-gradient(90deg, #3399ff, #2db7f5);
	transform: translateY(-2px);
}

.JF-modal-btn:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(64, 158, 255, 0.4);
}

/* --------------- 移动端/PC端显隐控制（核心） --------------- */
@media (min-width: 768px) {
	.JF-mobile-tip-modal {
		display: none !important;
	}

	.report-section,
	.feedback-section {
		display: block !important;
	}
}

@media (max-width: 767px) {

	.report-section,
	.feedback-section {
		display: none !important;
	}
}

/* 单选按钮样式优化 - 独立命名空间，不影响其他样式 */
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 15px 0 20px 0;
	padding: 0;
	list-style: none;
}

.radio-item {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	color: #333;
	user-select: none;
}

/* 隐藏原生单选按钮 */
.radio-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* 自定义单选按钮样式 */
.radio-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}

/* 选中状态样式 */
.radio-item input[type="radio"]:checked+.radio-text::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #007bff;
}

/* 单选按钮文字样式 */
.radio-text {
	margin-left: 2px;
	transition: color 0.2s ease;
}

/* hover状态 */
.radio-item:hover::before {
	border-color: #007bff;
}

.radio-item:hover .radio-text {
	color: #007bff;
}

/* 去掉焦点蓝色边框 */
.radio-item input[type="radio"]:focus {
	outline: none;
	box-shadow: none;
}

/* 上传预览样式优化 */
.upload-preview {
	margin-top: 10px;
}

.upload-item {
	position: relative;
	display: inline-block;
	margin: 0 10px 10px 0;
}

.upload-item-remove {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(255, 0, 0, 0.8);
	color: #fff;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
}

/* 新增：上下篇切换样式 - 保证适配移动端 */
.news-navigator {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.news-navigator-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

.news-navigator-item {
	flex: 1;
	min-width: 280px;
	padding: 15px;
	background-color: #f9f9f9;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.news-navigator-item:hover {
	background-color: #f0f0f0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-navigator-title {
	font-size: 14px;
	color: #999;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}

.news-navigator-title i {
	margin-right: 6px;
	font-size: 12px;
}

.news-navigator-link {
	display: block;
	font-size: 16px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.news-navigator-link:hover {
	color: #007bff;
	text-decoration: underline;
}

/* 移动端适配 */
@media (max-width: 768px) {
	.news-navigator {
		margin-top: 20px;
		padding-top: 15px;
	}

	.news-navigator-list {
		flex-direction: column;
		gap: 10px;
	}

	.news-navigator-item {
		min-width: 100%;
		padding: 12px;
	}

	.news-navigator-link {
		font-size: 15px;
	}
}
  /* 基础样式 - 毛玻璃弹窗 */
  .WJF-mobile-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .WJF-mobile-popup-overlay.WJF-active {
    opacity: 1;
    visibility: visible;
  }

  .WJF-mobile-popup {
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
  }

  .WJF-mobile-popup-overlay.WJF-active .WJF-mobile-popup {
    transform: translateY(0);
  }

  .WJF-popup-header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .WJF-popup-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
  }

  .WJF-popup-body {
    padding: 20px;
  }

  .WJF-popup-desc {
    margin: 0;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    text-align: center;
  }

  .WJF-popup-footer {
    padding: 10px 20px 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .WJF-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .WJF-btn-cancel {
    background: rgba(245, 245, 245, 0.9);
    color: #666;
  }

  .WJF-btn-cancel:hover {
    background: rgba(235, 235, 235, 0.9);
  }

  .WJF-btn-confirm {
    background: #007bff;
    color: white;
  }

  .WJF-btn-confirm:hover {
    background: #0069d9;
  }

  /* 仅在移动端显示弹窗（屏幕宽度小于768px） */
  @media (min-width: 768px) {
    .WJF-mobile-popup-overlay {
      display: none !important;
    }
  }
/* 返回顶部按钮样式 - 关键修改：保留占位，仅透明化 */
.back-to-top {
  /* 保留你原有样式（颜色、大小、背景等），新增以下属性 */
  display: inline-block; /* 确保是行内块，保留占位 */
  opacity: 0.3; /* 默认半透明（未滚动时） */
  pointer-events: none; /* 半透明时无法点击，避免误触 */
  transition: opacity 0.3s ease; /* 平滑过渡 */
  /* 以下是你原有样式示例，根据实际情况保留 */
  padding: 6px 12px;
  color: #007bff;
  text-decoration: none;
}

/* 滚动后按钮变为正常显示 */
.back-to-top.show {
  opacity: 1; /* 完全不透明 */
  pointer-events: auto; /* 可点击 */
}

/* 基础样式重置 */
.JF1-contact-float * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器：PC端隐藏，移动端固定右下角 */
.JF1-contact-float {
  position: fixed;
  right: 20px;
  bottom: 20%;
  z-index: 9999;
  display: none; /* PC端默认隐藏 */
}

/* 移动端显示（屏幕宽度<768px） */
@media (max-width: 767px) {
  .JF1-contact-float {
    display: block;
  }
}

/* 悬浮按钮：圆形+毛玻璃+心跳动画 */
.JF1-float-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 51, 51, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

/* 心跳光环动画 */
.JF1-float-btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 51, 51, 0.4);
  z-index: -1;
  animation: JF1-heartbeat 2s infinite ease-in-out;
}

.JF1-float-btn:hover{
  background: rgba(255, 51, 51, 0.95);
  transform: scale(1.05);
}

/* 心跳动画关键帧 */
@keyframes JF1-heartbeat {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  50% {
    width: 75px;
    height: 75px;
    opacity: 0.6;
  }
  100% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
}

/* 弹窗遮罩 */
.JF1-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.JF1-popup-mask.active {
  opacity: 1;
  visibility: visible;
}

/* 客服弹窗：毛玻璃+圆角 */
.JF1-contact-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  overflow: hidden;
}

.JF1-contact-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* 关闭按钮 */
.JF1-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.JF1-popup-close:hover {
  background: #ff3333;
  color: #fff;
}

/* 弹窗标题 */
.JF1-popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  padding: 20px 20px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 联系方式列表 */
.JF1-contact-list {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  gap: 10px;
}

.JF1-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease;
}

.JF1-contact-item i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(245, 245, 245, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
}

/* 图标颜色区分 */
.JF1-contact-item .fa-phone {
  color: #10b981;
}
.JF1-contact-item .fa-weixin {
  color: #07c160;
}
.JF1-contact-item .fa-qq {
  color: #12b7f5;
}

.JF1-contact-item span {
  font-size: 14px;
  color: #666;
}

.JF1-contact-item:hover {
  transform: translateY(-3px);
}

/* 二维码区域 */
.JF1-qrcode-wrap {
  padding: 0 20px 20px;
  text-align: center;
}

.JF1-qrcode-img {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.JF1-qrcode-tip {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}