@charset "utf-8";
/* ============================================================
   Glassmorphism & Colorful Accents — All Pages
   全站毛玻璃彩色效果
   ============================================================ */

/* ==========================================================
   Part 1: 全站通用效果（首页 + 内页共享）
   ========================================================== */

/* ---------- 全局背景微调 ---------- */
.main {
	background: linear-gradient(180deg, #ffffff 0%, #f8faff 30%, #f0f4ff 60%, #f8faff 100%);
}

/* ---------- Footer — 深色毛玻璃 + 白色文字 ---------- */
.footer-middle {
	background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
	color: #e2e8f0;
}

.footer-content {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Footer 标题 */
.footer-middle .title,
.footer-middle .title span {
	color: #ffffff !important;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Footer 列表文字 */
.footer-middle .footer-block-contant li {
	color: #cbd5e1;
}

.footer-middle .footer-block-contant li label {
	color: #94a3b8;
}

/* Footer 链接 */
.footer-middle .footer-block-contant li a {
	color: #cbd5e1 !important;
	transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-middle .footer-block-contant li a:hover {
	color: #67e8f9 !important;
	padding-left: 4px;
}

/* Footer 底部版权区 */
.footer-secondary {
	background: rgba(15, 23, 42, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-secondary p,
.footer-secondary-box {
	color: #94a3b8;
}

.footer-secondary a {
	color: #94a3b8 !important;
	transition: color 0.3s ease;
}

.footer-secondary a:hover {
	color: #67e8f9 !important;
}

/* ==========================================================
   Part 2: 内页（.inner-page）专用效果
   ========================================================== */

/* ---------- 内页彩色光晕背景装饰 ---------- */
.inner-page .inner-page-main {
	position: relative;
}

.inner-page .inner-page-main::before,
.inner-page .inner-page-main::after {
	content: "";
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.12;
	filter: blur(100px);
	-webkit-filter: blur(100px);
}

.inner-page .inner-page-main::before {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #6366f1 0%, #a855f7 40%, transparent 70%);
	top: -100px;
	left: -150px;
}

.inner-page .inner-page-main::after {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, #06b6d4 0%, #3b82f6 40%, transparent 70%);
	top: 400px;
	right: -120px;
}

/* 确保内容在光晕之上 */
.inner-page .inner-page-middle {
	position: relative;
	z-index: 1;
}

.inner-page .bread-crumb {
	position: relative;
	z-index: 1;
}

/* ---------- 面包屑导航升级 ---------- */
.inner-page .bread-crumb {
	background: rgba(249, 249, 249, 0.6) !important;
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	border-bottom: 1px solid rgba(99, 102, 241, 0.06);
}

/* ---------- 侧边栏毛玻璃 ---------- */
.inner-page .sidebar-box {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	overflow: hidden;
}

.inner-page .sidebar-title {
	border-bottom: 2px solid rgba(99, 102, 241, 0.08);
}

.inner-page .sidebar-title span {
	color: #4338ca !important;
	font-weight: 600;
}

/* 侧边栏链接 hover */
.inner-page .sidebar-featured ul li a:hover,
.inner-page .sidebar-contant ul li a:hover {
	color: #6366f1 !important;
}

/* ---------- 产品列表卡片毛玻璃 ---------- */
.inner-page .product-item {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 14px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.inner-page .product-item:hover {
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 10px 35px rgba(99, 102, 241, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
	transform: translateY(-5px);
	border-color: rgba(99, 102, 241, 0.12);
}

.inner-page .product-image {
	border-radius: 10px;
	overflow: hidden;
}

.inner-page .product-item-name a:hover h3 {
	color: #6366f1 !important;
}

/* ---------- 产品详情页升级 ---------- */
.inner-page .product-details {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.inner-page .product-information {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 14px;
	padding: 25px;
	margin-top: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* ---------- 新闻列表毛玻璃 ---------- */
.inner-page .news-listing-box {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.inner-page .news-listing-box:hover {
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 8px 30px rgba(99, 102, 241, 0.08);
	transform: translateY(-3px);
}

/* 新闻日期徽章渐变 */
.inner-page .news-listing-time span b {
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
	border-radius: 8px;
}

/* ---------- 新闻详情页 ---------- */
.inner-page .news-details {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 14px;
	padding: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* ---------- 上下篇导航 ---------- */
.inner-page .other-upper-next-box {
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	padding: 15px 20px;
}

.inner-page .other-upper-next-box a:hover {
	color: #6366f1 !important;
}

/* ---------- Related Products 区块 ---------- */
.inner-page .related-products-t span {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1.5px solid rgba(99, 102, 241, 0.25);
	border-radius: 12px;
	color: #4338ca !important;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- 留言表单毛玻璃 ---------- */
.inner-page .inquiry-form-container {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 18px !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.inner-page .inquiry-btn {
	background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.inner-page .inquiry-btn:hover {
	background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%) !important;
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
	transform: translateY(-2px);
}

/* ---------- Contact 页面表单 ---------- */
.inner-page .inner-message .btn-text {
	background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%) !important;
	color: #fff !important;
	border-radius: 10px;
	padding: 8px 35px;
	border: none;
	box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.inner-page .inner-message .btn-text:hover {
	background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%) !important;
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
	transform: translateY(-2px);
}

/* ---------- 分页条升级 ---------- */
.inner-page .pagination-bar ul li.active,
.inner-page .pagebar .page-item.active {
	background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
}

.inner-page .pagination-bar ul li a:hover,
.inner-page .pagebar .page-link:hover {
	background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
	color: #fff !important;
}


/* ==========================================================
   Part 3: 首页（.homepage）专用效果
   ========================================================== */

/* ---------- 彩色光晕背景装饰 ---------- */
.homepage .mian-contain {
	position: relative;
	overflow: hidden;
}

.homepage .mian-contain::before,
.homepage .mian-contain::after {
	content: "";
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.18;
	filter: blur(100px);
	-webkit-filter: blur(100px);
}

.homepage .mian-contain::before {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, #6366f1 0%, #a855f7 40%, transparent 70%);
	top: -120px;
	left: -180px;
}

.homepage .mian-contain::after {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #06b6d4 0%, #3b82f6 40%, transparent 70%);
	top: 600px;
	right: -150px;
}

/* 第三个彩色光晕用 section 伪元素 */
.homepage .featured-products::before {
	content: "";
	position: absolute;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, #f472b6 0%, #fb923c 40%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.15;
	filter: blur(90px);
	-webkit-filter: blur(90px);
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
}

.homepage .featured-products {
	position: relative;
}

/* 确保内容在光晕之上 */
.homepage .mian-contain>section {
	position: relative;
	z-index: 1;
}

/* ---------- 区块标题 — 毛玻璃效果 ---------- */
.homepage .hot-products-t span,
.homepage .index-news-t span {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
	border-radius: 12px;
	color: #4338ca !important;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage .hot-products-t span:hover,
.homepage .index-news-t span:hover {
	background: rgba(255, 255, 255, 0.75) !important;
	box-shadow: 0 6px 24px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	transform: translateY(-1px);
}

.homepage .featured-products-t span {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	border: 1.5px solid rgba(6, 182, 212, 0.25);
	border-radius: 12px;
	color: #0e7490 !important;
	padding: 0 30px !important;
	line-height: 50px;
	box-shadow: 0 4px 16px rgba(6, 182, 212, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage .featured-products-t span:hover {
	background: rgba(255, 255, 255, 0.75) !important;
	box-shadow: 0 6px 24px rgba(6, 182, 212, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	transform: translateY(-1px);
}

/* 标题下划线改为渐变色 */
.homepage .hot-products-t::after,
.homepage .featured-products-t::after,
.homepage .index-news-t::after {
	background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.2) 30%, rgba(6, 182, 212, 0.2) 70%, transparent 100%) !important;
	height: 2px !important;
}

/* ---------- 产品卡片 — 毛玻璃磨砂 ---------- */
.homepage .hot-products-box ul li .item {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.homepage .hot-products-box ul li .item:hover {
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
	transform: translateY(-6px);
	border-color: rgba(99, 102, 241, 0.15);
}

/* 产品图片容器圆角 */
.homepage .hot-products-box ul li .item>a {
	border-radius: 12px;
	overflow: hidden;
}

.homepage .hot-products-box ul li .item>a>img {
	border-radius: 12px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage .hot-products-box ul li .item:hover>a>img {
	transform: scale(1.05);
}

/* 产品名称 hover 渐变色 */
.homepage .hot-products-box-t:hover h3 {
	color: #6366f1 !important;
}

/* ---------- Featured 产品卡片 ---------- */
.homepage .featured-products-box {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.homepage .featured-products-box:hover {
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 12px 40px rgba(6, 182, 212, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
	transform: translateY(-5px);
	border-color: rgba(6, 182, 212, 0.15);
}

.homepage .featured-products-box>a>img {
	border-radius: 12px;
}

.homepage .featured-products-box-t:hover h3 {
	color: #0891b2 !important;
}

/* Carousel 左右按钮升级 */
.homepage .featured-products .owl-controls .owl-prev,
.homepage .featured-products .owl-controls .owl-next {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 10px !important;
	transition: all 0.3s ease !important;
}

.homepage .featured-products .owl-controls .owl-prev:hover,
.homepage .featured-products .owl-controls .owl-next:hover {
	background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* ---------- About 区块 — 毛玻璃 ---------- */
.homepage .index-about {
	background: linear-gradient(135deg, rgba(243, 244, 255, 0.8) 0%, rgba(236, 254, 255, 0.8) 100%) !important;
	border-top: 1px solid rgba(99, 102, 241, 0.06);
	border-bottom: 1px solid rgba(6, 182, 212, 0.06);
}

.homepage .index-about-box {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* About 图片框 */
.homepage .index-about-r-frame {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.homepage .index-about-r-frame img {
	border-radius: 16px;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage .index-about-box:hover .index-about-r-frame img {
	transform: scale(1.03);
}

/* About Details 按钮 — 渐变 */
.homepage .index-about-r span a {
	background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 8px 35px !important;
	font-weight: 500;
	box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.homepage .index-about-r span a:hover {
	background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%) !important;
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
	transform: translateY(-2px);
}

/* About 标题 hover */
.homepage .index-about-text-t a:hover {
	color: #6366f1 !important;
}

/* ---------- 新闻卡片 — 毛玻璃 ---------- */
.homepage .index-news-box ul li .item {
	background: rgba(255, 255, 255, 0.6) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage .index-news-box ul li .item:hover {
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 12px 40px rgba(99, 102, 241, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
	transform: translateY(-5px);
	border-color: rgba(99, 102, 241, 0.12) !important;
}

/* 新闻图片圆角 */
.homepage .index-news-box-frame {
	border-radius: 12px;
	overflow: hidden;
}

.homepage .index-news-box ul li .item img {
	border-radius: 12px;
}

/* 日期徽章渐变 */
.homepage .index-news-box ul li .item span b {
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
}

/* 新闻标题 hover */
.homepage .index-news-text-t a:hover {
	color: #6366f1 !important;
}


/* ==========================================================
   Part 4: 响应式适配
   ========================================================== */
@media (max-width: 768px) {

	/* 移动端减弱光晕以节省性能 */
	.homepage .mian-contain::before,
	.homepage .mian-contain::after {
		opacity: 0.10;
		filter: blur(60px);
		-webkit-filter: blur(60px);
	}

	.homepage .mian-contain::before {
		width: 300px;
		height: 300px;
	}

	.homepage .mian-contain::after {
		width: 250px;
		height: 250px;
	}

	.homepage .featured-products::before {
		width: 200px;
		height: 200px;
		opacity: 0.10;
	}

	.inner-page .inner-page-main::before,
	.inner-page .inner-page-main::after {
		opacity: 0.08;
		filter: blur(60px);
		-webkit-filter: blur(60px);
	}

	.inner-page .inner-page-main::before {
		width: 250px;
		height: 250px;
	}

	.inner-page .inner-page-main::after {
		width: 200px;
		height: 200px;
	}

	/* 移动端卡片毛玻璃减弱 blur 值以提升性能 */
	.homepage .hot-products-box ul li .item,
	.homepage .featured-products-box,
	.homepage .index-news-box ul li .item,
	.homepage .index-about-box,
	.inner-page .product-item,
	.inner-page .sidebar-box,
	.inner-page .news-details,
	.inner-page .product-details {
		-webkit-backdrop-filter: blur(6px) saturate(140%);
		backdrop-filter: blur(6px) saturate(140%);
	}

	.homepage .hot-products-box ul li .item,
	.homepage .featured-products-box {
		border-radius: 12px !important;
	}
}

/* ==========================================================
   Part 5: 不支持 backdrop-filter 的浏览器回退
   ========================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

	.homepage .hot-products-box ul li .item,
	.homepage .featured-products-box,
	.homepage .index-news-box ul li .item,
	.inner-page .product-item,
	.inner-page .news-listing-box {
		background: rgba(255, 255, 255, 0.92) !important;
	}

	.homepage .index-about-box,
	.inner-page .sidebar-box,
	.inner-page .news-details,
	.inner-page .product-details {
		background: rgba(255, 255, 255, 0.95) !important;
	}

	.homepage .hot-products-t span,
	.homepage .featured-products-t span,
	.homepage .index-news-t span,
	.inner-page .related-products-t span {
		background: rgba(255, 255, 255, 0.9) !important;
	}
}