@charset "utf-8";

/* =========================== Global Components =========================== */
/* Form group styles */
.form-group label em { color: #ff4d4f; margin-left: 4px; }

/* Simple Toast */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast.success { background: #52c41a; }
.toast.error { background: #ff4d4f; }

/* Form Submit Loading State */
.form-submit.loading { opacity: 0.7; cursor: not-allowed; position: relative; color: transparent !important; }
.form-submit.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Image Preview Modal */
.cert-item { position: relative; cursor: pointer; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.3s; }
.cert-item img { width: 100%; display: block; transition: all 0.5s; }
.cert-item:hover img { transform: scale(1.05); }
.cert-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s; color: #fff; }
.cert-item:hover .cert-hover { opacity: 1; }
.cert-hover i { font-size: 24px; margin-bottom: 8px; }

.modal-preview { display: none; position: fixed; z-index: 10001; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
.modal-content-preview { margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s; border-radius: 8px; }
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }
.close-preview { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }
.close-preview:hover, .close-preview:focus { color: #bbb; text-decoration: none; cursor: pointer; }
.modal-caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; font-size: 18px; }

@media only screen and (max-width: 700px){
    .modal-content-preview { width: 100%; }
}

/* =====================================================================
 * common.css —— 内页共用样式（About / Products / News / Contact Us）
 * 说明：本文件用于编写全站内页（关于我们、产品、新闻、联系我们）的样式，
 *   - 主色：#E30083   深色文字：#202020 / #222   辅助文字：#666 / #767676 / #888
 *   - 标题字体：Poppins-Regular   圆角：30px / 20px / 50px
 *   - 卡片描边：1px solid #EBEBEB
 * ===================================================================== */
.indspace{padding-top: 50px;padding-bottom: 50px;position: relative;}



/* =========================== About 页面样式 =========================== */

/* ============= 子页面共用广告图 (Subpage Hero) =============
 * 所有子页面（About / Products / News / Contact Us）共用同一张顶部广告图。
 * 如需为某页单独更换背景图，可在该页 .subpage-hero 上内联 style 覆盖 background。 */
.subpage-hero {
	width: 100%;
	position: relative;
	padding: 200px 0 130px;
	background-repeat:  no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}

.subpage-hero:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.45);
}

.subpage-hero .contain,
.subpage-hero .news-container {
	position: relative;
	z-index: 2;
}

.subpage-hero h1 {
	color: #ffffff;
	font-size: 72px;
	font-weight: bold;
	margin-bottom: 20px;
}

.subpage-hero p {
	color: #ffffff;
	font-size: 22px;
	line-height: 32px;
}

/* Hero 内面包屑（News 等页面，深色底上使用浅色） */
.subpage-hero .news-crumb {
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 22px;
}

.subpage-hero .news-crumb a,
.subpage-hero .news-crumb span {
	color: rgba(255, 255, 255, .8);
}

.subpage-hero .news-crumb em {
	color: #ffffff;
	font-style: normal;
}

.subpage-hero .news-crumb a:hover {
	color: #E30083;
}


/* 公司介绍 —— About Mework */
.about-intro {
	width: 100%;
}

.about-intro-box {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
	margin-top: 50px;
}

.about-intro-box .intro-img {
	width: 46%;
	flex: none;
	border-radius: 16px;
	overflow: hidden;
}

.about-intro-box .intro-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-intro-box .intro-body {
	flex: 1;
	min-width: 0;
}

.about-intro-box .intro-body p {
	font-size: 17px;
	line-height: 30px;
	color: #555555;
	margin-bottom: 20px;
}

.about-intro-box .intro-list {
	list-style: none;
	margin-top: 6px;
}

.about-intro-box .intro-list li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	line-height: 28px;
	color: #333333;
	margin-bottom: 14px;
}

.about-intro-box .intro-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E30083;
}


/* 为什么选择我们 —— Why Partner With Us */
.about-why {
	width: 100%;
}

.about-why-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about-why-box .list {
	width: calc(50% - 15px);
	display: flex;
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid #EBEBEB;
	border-radius: 30px;
	padding: 32px;
	margin-bottom: 30px;
	transition: all .4s ease;
}

.about-why-box .list .icon {
	width: 85px;
	height: 85px;
	margin-right: 30px;
	flex: none;
}

.about-why-box .list .icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.about-why-box .list .cont {
	flex: 1;
	overflow: hidden;
}

.about-why-box .list .cont .title {
	color: #202020;
	font-size: 28px;
	font-weight: bold;
	transition: all .4s ease;
}

.about-why-box .list .cont p {
	color: #666666;
	font-size: 18px;
	line-height: 28px;
	margin-top: 12px;
	transition: all .4s ease;
}

.about-why-box .list:hover {
	background: #E30083;
}

.about-why-box .list:hover .cont .title,
.about-why-box .list:hover .cont p {
	color: #ffffff;
}


/* 制造实力图集 —— Our Manufacturing Excellence */
.about-factory {
	width: 100%;
}

.about-factory .factory-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 50px;
}

.about-factory .factory-box .item {
	width: calc(100% / 3 - 13px);
}

.about-factory .factory-box .item .img-box {
	margin-bottom: 26px;
	overflow: hidden;
	border-radius: 16px;
}

.about-factory .factory-box .item .img-box img {
	display: block;
	width: 100%;
	transition: all 1s ease;
}

.about-factory .factory-box .item .img-box:hover img {
	transform: scale(1.05);
}


/* 常见问题 —— Frequently Asked Questions */
.about-faq {
	width: 100%;
}

.about-faq-box {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.about-faq-box .faq-item {
	border: 1px solid #EBEBEB;
	border-radius: 16px;
	margin-bottom: 16px;
	overflow: hidden;
	background: #ffffff;
	transition: all .4s ease;
}

.about-faq-box .faq-item.active {
	border-color: #E30083;
}

.about-faq-box .faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 30px;
	cursor: pointer;
}

.about-faq-box .faq-q span {
	color: #202020;
	font-size: 20px;
	font-weight: bold;
	padding-right: 30px;
}

.about-faq-box .faq-q i {
	position: relative;
	width: 22px;
	height: 22px;
	flex: none;
}

.about-faq-box .faq-q i:before,
.about-faq-box .faq-q i:after {
	content: "";
	position: absolute;
	background: #E30083;
	transition: all .3s ease;
}

.about-faq-box .faq-q i:before {
	left: 0;
	top: 10px;
	width: 22px;
	height: 2px;
}

.about-faq-box .faq-q i:after {
	left: 10px;
	top: 0;
	width: 2px;
	height: 22px;
}

.about-faq-box .faq-item.active .faq-q i:after {
	transform: rotate(90deg);
	opacity: 0;
}

.about-faq-box .faq-a {
	display: none;
	padding: 0 30px 26px;
	color: #666666;
	font-size: 16px;
	line-height: 28px;
}

.about-faq-box .faq-a p {
	margin-bottom: 10px;
}



/* =========================== Products 页面样式 ===========================
 * 布局：左侧 CATEGORIES 分类导航 + 右侧 PRODUCTS 产品网格（参照 fruilux.com/products/）
 * ================================================================== */

/* ---------- 产品主容器（左右布局） ---------- */
.product-main {
	width: 100%;
	padding: 60px 0 90px;
}

.product-layout {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}


/* ========== 左侧：CATEGORIES 分类侧栏 ========== */
.product-sidebar {
	width: 240px;
	flex: none;
}

.sidebar-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #202020;
	padding-bottom: 14px;
	border-bottom: 2px solid #202020;
	margin-bottom: 20px;
}

.sidebar-list {
	list-style: none;
}

.sidebar-list li {
	border-bottom: 1px solid #eeeeee;
}

.sidebar-list li a {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	color: #555555;
	transition: color .3s ease, padding-left .3s ease;
}

.sidebar-list li a:hover {
	color: #E30083;
	padding-left: 6px;
}

.sidebar-list li.active a {
	color: #E30083;
	font-weight: 600;
}


/* ========== 右侧：PRODUCTS 产品网格 ========== */
.product-content {
	flex: 1;
	min-width: 0; /* 防止 flex 子项溢出 */
}

.content-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #202020;
	padding-bottom: 14px;
	border-bottom: 2px solid #202020;
	margin-bottom: 32px;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 28px;
}

/* 单个产品卡片 —— 简洁风格（图 + 标题，参考截图） */
.product-item {
	background: #ffffff;
	transition: transform .35s ease;
}

.product-item a {
	display: block;
}

.product-item-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f9f9f9;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	margin-bottom: 16px;
}

.product-item-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-sizing: border-box;
	transition: transform .6s ease;
}

.product-item:hover {
	transform: translateY(-4px);
}

.product-item:hover .product-item-img img {
	transform: scale(1.06);
}

.product-item h5 {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	line-height: 1.5;
	text-align: center;
	transition: color .3s ease;
}

.product-item:hover h5 {
	color: #E30083;
}



/* =========================== News 页面样式 =========================== */
/* 说明：News 页面整体参照 fruilux.com/blog/ 的干净编辑风（米白底、墨黑标题、
   青铜色点缀、衬线大标题 + Poppins 正文）。为不影响 About 等页面，导航与页脚的
   视觉覆盖统一收在 body.news-page 作用域内。 */

/* ---------- News 内容容器（列表区沿用；Hero 已统一为 .subpage-hero） ---------- */
.news-container {
	width: 1200px;
	max-width: 92%;
	margin: 0 auto;
}

.news-crumb {
	font-size: 14px;
	color: #9a948b;
	margin-bottom: 22px;
}

.news-crumb a {
	color: #9a948b;
}

.news-crumb a:hover {
	color: #E30083;
}

.news-crumb span {
	margin: 0 8px;
}

.news-crumb em {
	font-style: normal;
	color: #2b2824;
}

/* ---------- 博客文章列表 ---------- */
.news-list {
	width: 100%;
	padding: 60px 0 90px;
	background: #ffffff;
}

.news-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 32px;
}

.news-card {
	background: #ffffff;
}

.news-card-link {
	display: block;
}

.news-thumb {
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: #f3efe9;
	aspect-ratio: 4 / 3;
}

.news-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease;
}

.news-card-link:hover .news-thumb img {
	transform: scale(1.06);
}

.news-card-body {
	padding: 22px 2px 0;
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.news-cat {
	font-size: 12px;
	text-transform: uppercase;
	color: #E30083;
	font-weight: 600;
}

.news-meta time {
	font-size: 13px;
	color: #a39c92;
}

.news-title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	color: #1c1a17;
	transition: color .4s ease;
}

.news-card-link:hover .news-title {
	color: #E30083;
}

.news-excerpt {
	font-size: 15px;
	line-height: 26px;
	color: #6f685f;
	margin-top: 12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.news-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1a17;
	position: relative;
	padding-right: 22px;
}

.news-more:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 14px;
	height: 8px;
	transform: translateY(-50%);
	transition: right .3s ease;
}

.news-card-link:hover .news-more {
	color: #E30083;
}

.news-card-link:hover .news-more:after {
	right: -6px;
}

/* ---------- 分页 ---------- */
.news-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 70px;
}

.news-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	margin: 0 5px;
	font-size: 15px;
	color: #2b2824;
	border: 1px solid #e2dcd2;
	border-radius: 4px;
	transition: all .35s ease;
}

.news-pagination a:hover {
	border-color: #E30083;
	color: #E30083;
}

.news-pagination .page-num.active {
	background: #1c1a17;
	border-color: #1c1a17;
	color: #ffffff;
}

.news-pagination .page-prev.disabled,
.news-pagination .page-next.disabled {
	opacity: .4;
	pointer-events: none;
}

/* ---------- 响应式适配（断点沿用 1000 / 640） ---------- */
@media all and (max-width: 1200px) {
	.news-container {
		width: 92%;
	}
}

@media all and (max-width: 1000px) {
	.news-list {
		padding: 44px 0 64px;
	}

	.news-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px 24px;
	}
}

@media all and (max-width: 640px) {
	.news-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.news-title {
		font-size: 20px;
	}

	.news-pagination a {
		min-width: 38px;
		height: 38px;
		margin: 0 3px;
		font-size: 14px;
	}
}



/* =========================== News Detail 页面样式 ===========================
 * 布局：单栏主文章（封面 + 元信息 + 正文 + 上下篇导航），居中显示
 * 视觉：沿用 News 编辑风（米白底、墨黑标题、青铜点缀、Playfair Display 衬线大标题 + Poppins 正文） */
.news-detail {
	width: 100%;
	padding: 60px 0 90px;
	background: #ffffff;
}

.news-detail-layout {
	display: block;
}


/* ---------- 主文章 ---------- */
.news-article {
	margin: 0 auto;
}

.news-article-cover {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 34px;
	background: #f3efe9;
}

.news-article-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.news-detail-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 18px;
}

.news-detail-meta .news-author {
	font-size: 13px;
	color: #a39c92;
}

.news-detail-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.25;
	color: #1c1a17;
	margin-bottom: 26px;
}

.news-detail-content p {
	font-size: 16px;
	line-height: 30px;
	color: #4a443d;
	margin-bottom: 22px;
}

.news-detail-content h3 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: #1c1a17;
	margin: 32px 0 14px;
}

.news-detail-content a {
	color: #E30083;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.news-detail-content a:hover {
	color: #b8006b;
}

.news-figure {
	margin: 30px 0;
}

.news-figure img {
	display: block;
	width: 100%;
	border-radius: 4px;
}

.news-figure figcaption {
	font-size: 14px;
	color: #a39c92;
	margin-top: 12px;
	text-align: center;
}

.news-quote {
	margin: 30px 0;
	padding: 22px 26px;
	background: #fafafa;
	border-left: 4px solid #E30083;
	border-radius: 0 4px 4px 0;
	font-family: 'Playfair Display', 'Poppins', serif;
	font-size: 20px;
	font-style: italic;
	line-height: 1.6;
	color: #1c1a17;
}



/* 上一篇 / 下一篇 */
.news-pager {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid #eeeeee;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.news-pager a {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.news-pager .pager-next {
	text-align: right;
	align-items: flex-end;
}

.pager-dir {
	font-size: 13px;
	color: #a39c92;
	margin-bottom: 6px;
}

.pager-title {
	font-size: 16px;
	font-weight: 600;
	color: #1c1a17;
	transition: color .3s ease;
}

.news-pager a:hover .pager-title {
	color: #E30083;
}




/* =========================== Contact Us 页面样式 ===========================
 * 布局：左侧联系信息+二维码 / 右侧询价表单；下方地图+交通时间
 * ================================================================== */

/* ---------- 联系我们主容器（左右布局） ---------- */
.contact-main {
	width: 100%;
	padding: 60px 0 70px;
}

.contact-layout {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
}


/* ========== 左侧：联系信息 ========== */
.contact-info {
	width: 600px;
	flex: none;
}

.contact-title {
	font-size: 36px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 32px;
	line-height: 1.2;
}

.info-list {
	list-style: none;
	margin-bottom: 40px;
}

.info-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	font-size: 16px;
	color: #333333;
	line-height: 1.6;
}

.info-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 14px;
	flex: none;
	margin-top: 2px;
	border-radius: 50%;
	background-color: #E30083;
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
	/* 用 CSS 绘制简单图标（纯色圆形 + 内嵌符号） */
}

.info-icon-user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.info-icon-phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.info-icon-email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.info-icon-whatsapp {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.15-2.9-7.02A9.816 9.816 0 0012.04 2zm.01 17.77c-1.53 0-3.03-.41-4.33-1.18l-.31-.18-3.21.84.86-3.13-.2-.32a8.27 8.27 0 01-1.27-4.42c0-4.56 3.71-8.27 8.27-8.27 2.21 0 4.28.86 5.84 2.42a8.2 8.2 0 012.42 5.85c-.01 4.56-3.72 8.29-8.28 8.29z'/%3E%3C/svg%3E");
}

.info-icon-location {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

/* 二维码区域 */
.contact-qrcode {
	display: flex;
	gap: 28px;
}

.qr-item {
	text-align: center;
}

.qr-img {
	width: 110px;
	height: 110px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 8px;
	margin-bottom: 10px;
	background: #ffffff;
}

.qr-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.qr-item span {
	font-size: 13px;
	color: #666666;
}


/* ========== 右侧：询价表单 ========== */
.contact-form-wrap {
	flex: 1;
	min-width: 0;
	background: #fafafa;
	padding: 35px;
	border-radius: 8px;
}

.form-title {
	font-size: 26px;
	font-weight: 700;
	color: #E30083;
	margin-bottom: 30px;
	line-height: 1.3;
}

.contact-form .form-group {
	margin-bottom: 22px;
}

.contact-form label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #333333;
	margin-bottom: 8px;
}

.contact-form label em {
	color: #E30083;
	font-style: normal;
	margin-left: 2px;
}

.contact-form-wrap .contact-form input[type="text"],
.contact-form-wrap .contact-form input[type="email"],
.contact-form-wrap .contact-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	font-size: 15px;
	color: #333333;
	background: #ffffff;
	outline: none;
	transition: border-color .3s ease;
	box-sizing: border-box;
	font-family: 'Poppins', 'Poppins-Regular', sans-serif;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #bbbbbb;
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: #E30083;
}

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

.form-submit {
	display: block;
	width: 100%;
	padding: 16px;
	background: #E30083;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background .3s ease, transform .2s ease;
	margin-top: 8px;
}

.form-submit:hover {
	background: #e54d1f;
	transform: translateY(-1px);
}


/* ---------- 地图 + 交通时间 ---------- */
.contact-travel {
	width: 100%;
	padding-bottom: 80px;
}

.travel-layout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/* 地图占位 */
.travel-map {
	width: calc(50% - 30px);
	flex: none;
}

.map-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 3px solid #E30083;
	border-radius: 4px;
	overflow: hidden;
	background: #f5f5f5;
}

.map-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 交通时间列表 */
.travel-info {
	width: calc(50% - 30px);
	flex: none;
}

.travel-title {
	font-size: 26px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 28px;
	line-height: 1.3;
}

.travel-list {
	list-style: none;
}

.travel-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	font-size: 16px;
	color: #333333;
	line-height: 1.65;
}

.travel-icon {
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-right: 14px;
	flex: none;
	margin-top: 3px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.travel-icon-plane {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E30083' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
}

.travel-icon-port {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E30083' viewBox='0 0 24 24'%3E%3Cpath d='M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78s-.34-.42-.6-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V2H9v2H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.26.08-.48.26-.6.51s-.14.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z'/%3E%3C/svg%3E");
}

.travel-icon-train {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E30083' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l1.5-1.5h5L16 21h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V8h5v3zm2 0V8h5v3h-5zm3.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}



/* =========================== 产品详情页样式 (Product Detail) =========================== */

/* ---------- 面包屑 ---------- */
.pd-breadcrumb {
	width: 100%;
	padding: 18px 0;
	background: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}

.pd-breadcrumb .contain {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 14px;
	color: #999999;
}

.pd-breadcrumb a {
	color: #666666;
	transition: color .3s ease;
}

.pd-breadcrumb a:hover {
	color: #E30083;
}

.pd-breadcrumb span {
	margin: 0 8px;
	color: #cccccc;
}

.pd-breadcrumb em {
	font-style: normal;
	color: #333333;
}


/* ---------- 产品详情主区：左侧图库 + 右侧信息 ---------- */
.pd-section {
	width: 100%;
	padding: 50px 0 60px;
	background: #ffffff;
}

.pd-section .contain {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

/* ===== 左侧：图库（缩略图 + 主图 + 放大镜） ===== */
.pd-gallery {
	flex: none;
	width: calc(55% - 30px);
	display: flex;
	gap: 16px;
}

/* 缩略图列表 —— 竖向排列 */
.pd-thumbs {
	flex: none;
	width: 80px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pd-thumb {
	width: 80px;
	height: 80px;
	border: 2px solid #eeeeee;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .3s ease;
	background: #fafafa;
}

.pd-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
	transition: transform .3s ease;
}

.pd-thumb:hover img {
	transform: scale(1.08);
}

.pd-thumb.active {
	border-color: #333333;
}

/* 主图区域 */
.pd-main-wrap {
	flex: 1;
	position: relative;
}

.pd-main-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	overflow: hidden;
	cursor: crosshair;
	position: relative;
	background: #fafafa;
}

.pd-main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 24px;
	box-sizing: border-box;
	user-select: none;
	pointer-events: none;
}

/* 放大镜透镜 */
.pd-zoom-lens {
	display: none;
	position: absolute;
	width: 140px;
	height: 140px;
	border: 2px solid rgba(0, 0, 0, .25);
	border-radius: 50%;
	background-repeat: no-repeat;
	background-color: rgba(255, 255, 255, .15);
	pointer-events: none;
	z-index: 10;
}

/* 右侧放大预览区 */
.pd-zoom-preview {
	display: none;
	position: absolute;
	left: calc(100% + 20px);
	top: 0;
	width: 480px;
	height: 480px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	overflow: hidden;
	background: #ffffff;
	z-index: 20;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.pd-zoom-preview img {
	position: absolute;
	display: block;
	object-fit: contain;
}


/* ===== 右侧：产品信息 ===== */
.pd-info {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.pd-title {
	font-size: 32px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.3;
	margin-bottom: 8px;
}

.pd-model {
	font-size: 15px;
	color: #888888;
	margin-bottom: 28px;
	letter-spacing: .5px;
}

/* 特性列表 */
.pd-features {
	list-style: none;
	margin-bottom: 36px;
	padding-left: 2px;
}

.pd-features li {
	font-size: 15px;
	color: #444444;
	line-height: 1.9;
	padding-left: 14px;
	position: relative;
}

.pd-features li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #E30083;
}

.pd-features li strong {
	color: #1a1a1a;
	font-weight: 600;
}

/* GET A QUOTE 按钮 */
.pd-quote-btn {
	display: inline-block;
	padding: 16px 56px;
	background: #FF6633;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	border-radius: 50px;
	text-decoration: none;
	transition: background .3s ease, transform .25s ease, box-shadow .3s ease;
	margin-bottom: 36px;
}

.pd-quote-btn:hover {
	background: #e54d1f;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 102, 51, .35);
}

/* 社交分享图标行 */
.pd-share {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid #eeeeee;
}

.pd-share-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f7f7f7;
	transition: background .3s ease, transform .2s ease;
}

.pd-share-icon:hover {
	background: #eeeeee;
	transform: translateY(-2px);
}

.pd-share-icon svg {
	display: block;
}


/* ---------- 规格参数表 ---------- */
.pd-specs {
	width: 100%;
	padding-bottom: 70px;
	background: #fafafa;
}

.pd-specs-table {
	width: 100%;
	max-width: 900px;
	border-collapse: collapse;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.pd-specs-table tr:nth-child(even) {
	background: #fcfcfc;
}

.pd-specs-table th,
.pd-specs-table td {
	padding: 14px 24px;
	text-align: left;
	font-size: 15px;
	line-height: 1.65;
	border-bottom: 1px solid #f0f0f0;
}

.pd-specs-table th {
	width: 220px;
	font-weight: 600;
	color: #1a1a1a;
	background: #f7f7f7;
	white-space: nowrap;
}

.pd-specs-table td {
	color: #555555;
}

.pd-specs-table tr:last-child th,
.pd-specs-table tr:last-child td {
	border-bottom: none;
}


/* ---------- 相关推荐 ---------- */
.pd-related {
	width: 100%;
	padding-bottom: 80px;
	background: #ffffff;
}

.pd-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.pd-related-card {
	display: block;
	background: #ffffff;
	border: 1px solid #EBEBEB;
	border-radius: 16px;
	overflow: hidden;
	transition: all .4s ease;
	text-decoration: none;
}

.pd-related-card:hover {
	border-color: #E30083;
	box-shadow: 0 12px 32px rgba(227, 0, 131, .12);
	transform: translateY(-4px);
}

.pd-related-card .img-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f7f7;
}

.pd-related-card .img-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease;
}

.pd-related-card:hover .img-box img {
	transform: scale(1.06);
}

.pd-related-card h5 {
	color: #202020;
	font-size: 16px;
	font-weight: 600;
	padding: 18px 16px 20px;
	transition: color .3s ease;
}

.pd-related-card:hover h5 {
	color: #E30083;
}



/* =========================== 响应式适配 =========================== */
/* 断点参考 style.css / index.css 已有配置：1600 / 1359 / 1000 / 640 */
/* -------------------------PC端--------------------------- */
@media all and (max-width: 1700px) {
	/* 1600 × (900/1024/1200) */
}

@media all and (max-width: 1600px) {
	/* 1440 × (900/1050) */
	.contain {
		width: 92%;
	}
}

@media all and (max-width: 1440px) {
	/* 1360 × (768) */
}

@media all and (max-width: 1359px) {
	/* 1280 × (800/854/1024) */
	.subpage-hero h1 {
		font-size: 56px;
	}

	.about-why-box .list .cont .title {
		font-size: 24px;
	}
}

@media all and (max-width: 1279px) {
	/* 1152 × (864) */
}

@media all and (max-width: 1151px) {
	/* 1024 × (600/768) */
}


/* ------------------------平板/手机端-------------------------- */
@media all and (max-width: 1000px) {
	/* 平板设备 720 适配 */
	.subpage-hero {
		padding: 130px 0 80px;
	}

	.subpage-hero h1 {
		font-size: 40px;
	}

	.subpage-hero p {
		font-size: 18px;
	}

	.about-intro-box {
		flex-direction: column;
		gap: 30px;
	}

	.about-intro-box .intro-img {
		width: 100%;
	}

	.about-why-box .list {
		width: 100%;
	}

	.about-faq-box .faq-q span {
		font-size: 18px;
	}

	/* Products —— 平板：侧栏收起/隐藏、产品 2 列 */
	.product-layout {
		flex-direction: column;
		gap: 32px;
	}

	.product-sidebar {
		width: 100%;
	}

	.sidebar-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.sidebar-list li {
		border-bottom: none;
		border-right: 1px solid #eeeeee;
		margin-bottom: 0;
	}

	.sidebar-list li a {
		padding: 10px 18px;
		font-size: 14px;
		white-space: nowrap;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 22px;
	}

	/* Contact Us —— 平板：左右变上下 */
	.contact-layout {
		flex-direction: column;
		gap: 40px;
	}

	.contact-info {
		width: 100%;
	}

	.contact-form-wrap {
		padding: 32px 36px;
		width: 100%;
	}

	.travel-layout {
		flex-direction: column;
		gap: 36px;
	}

	.travel-map,
	.travel-info {
		width: 100%;
	}

	/* Product Detail —— 平板：图库与信息上下排列 */
	.pd-section .contain {
		flex-direction: column;
		gap: 40px;
	}

	.pd-gallery {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}

	.pd-info {
		width: 100%;
		max-width: 700px;
	}

	.pd-title {
		font-size: 26px;
	}

	.pd-zoom-preview {
		display: none !important;
	}

	.pd-related-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}



	.news-detail-title {
		font-size: 32px;
	}
}

@media all and (max-width: 640px) {
	/* 移动终端以上 360 适配 */
	.subpage-hero {
		padding: 100px 0 60px;
	}

	.subpage-hero h1 {
		font-size: 30px;
	}

	.subpage-hero p {
		font-size: 16px;
	}

	.about-intro-box .intro-body p {
		font-size: 15px;
		line-height: 26px;
		margin-bottom: 16px;
	}

	.about-intro-box .intro-list li {
		font-size: 14px;
	}

	.about-why-box .list {
		padding: 20px;
	}

	.about-why-box .list .icon {
		width: 60px;
		height: 60px;
		margin-right: 16px;
	}

	.about-why-box .list .cont .title {
		font-size: 20px;
	}

	.about-why-box .list .cont p {
		font-size: 16px;
	}

	.about-factory .factory-box {
		flex-wrap: wrap;
	}

	.about-factory .factory-box .item {
		width: 100%;
	}

	.about-faq-box .faq-q {
		padding: 18px 20px;
	}

	.about-faq-box .faq-q span {
		font-size: 16px;
	}

	.about-faq-box .faq-a {
		padding: 0 20px 18px;
	}

	/* Products —— 手机：侧栏横向滚动、产品 1 列 */
	.product-main {
		padding: 40px 0 60px;
	}

	.sidebar-list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sidebar-list li a {
		padding: 8px 14px;
		font-size: 13px;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.product-item h5 {
		font-size: 14px;
	}

	/* Contact Us —— 手机 */
	.contact-main {
		padding: 40px 0 50px;
	}

	.contact-title {
		font-size: 28px;
		margin-bottom: 24px;
	}

	.info-list li {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.info-icon {
		width: 20px;
		height: 20px;
		background-size: 12px;
		margin-right: 10px;
	}

	.contact-qrcode {
		gap: 20px;
	}

	.qr-img {
		width: 90px;
		height: 90px;
	}

	.contact-form-wrap {
		padding: 24px 20px;
	}

	.form-title {
		font-size: 22px;
		margin-bottom: 22px;
	}

	.travel-title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.travel-list li {
		font-size: 14px;
	}

	/* Product Detail —— 手机 */
	.pd-section {
		padding: 32px 0 44px;
	}

	.pd-breadcrumb {
		padding: 12px 0;
		font-size: 13px;
	}

	.pd-gallery {
		flex-direction: column;
		align-items: center;
		gap: 14px;
		max-width: 100%;
	}

	.pd-thumbs {
		flex-direction: row;
		width: auto;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.pd-thumb {
		width: 64px;
		height: 64px;
		flex-shrink: 0;
	}

	.pd-main-wrap {
		width: 100%;
	}

	.pd-title {
		font-size: 22px;
	}

	.pd-model {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.pd-features li {
		font-size: 14px;
		line-height: 1.75;
	}

	.pd-quote-btn {
		padding: 13px 40px;
		font-size: 14px;
		margin-bottom: 24px;
	}

	.pd-share {
		gap: 10px;
	}

	.pd-share-icon {
		width: 34px;
		height: 34px;
	}

	/* 规格表手机 */
	.pd-specs-table th,
	.pd-specs-table td {
		padding: 11px 16px;
		font-size: 13px;
	}

	.pd-specs-table th {
		width: 140px;
	}

	/* 相关推荐手机 */
	.pd-related-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.pd-related-card h5 {
		font-size: 14px;
		padding: 12px 12px 14px;
	}

	/* News Detail —— 手机 */
	.news-detail {
		padding: 36px 0 54px;
	}

	.news-article-cover {
		margin-bottom: 24px;
	}

	.news-detail-title {
		font-size: 26px;
		margin-bottom: 18px;
	}

	.news-detail-content p {
		font-size: 15px;
		line-height: 28px;
	}

	.news-detail-content h3 {
		font-size: 20px;
	}

	.news-quote {
		font-size: 17px;
		padding: 18px 20px;
	}


	.news-pager {
		flex-direction: column;
		gap: 18px;
	}

	.news-pager .pager-next {
		text-align: left;
		align-items: flex-start;
	}
}