@charset "utf-8";
/**
 * 独立视觉主题 — 与原版黑金窄栏风格区分，便于后续替换品牌色
 * 变量可在 :root 中统一改色
 */

:root {
	--color-bg-page: #eef1f4;
	--color-bg-section: #ffffff;
	--color-bg-muted: #e8ecf1;
	--color-text: #1f2430;
	--color-text-muted: #5a6270;
	--color-primary: #1e2a3b;
	--color-accent: #2f6f7a;
	--color-accent-hover: #265a63;
	--color-line: rgba(30, 42, 59, 0.12);
	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-pill: 999px;
	--shadow-nav: 0 8px 32px rgba(30, 42, 59, 0.1);
	--shadow-card: 0 16px 48px rgba(30, 42, 59, 0.08);
	--font-sans: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--section-pad-y: 4.5rem;
	--container-max: 1000px; /* 与版心网格一致，避免服装展示等区块错位 */
	/* 顶栏高度：改这一处即可，轮播与锚点偏移会一起变 */
	--nav-bar-height: 72px;
}

html {
	scroll-behavior: smooth;
}

.site-page {
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg-page);
	min-width: 1180px;
}

.site-page p {
	color: var(--color-text-muted);
}

.site-page .container {
	width: 100%;
	max-width: var(--container-max);
	box-sizing: border-box;
}

.site-page .container1 {
	width: 100%;
	max-width: 1240px;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* 锚点：与固定顶栏错开（不依赖 JS） */
.site-page .about1 {
	position: relative;
	top: auto;
	scroll-margin-top: var(--nav-bar-height);
}

/* —— 顶栏：浅色毛玻璃条 + 滚动加深 —— */
.site-page .head {
	height: var(--nav-bar-height);
	padding: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-line);
	transition: box-shadow 0.35s ease, background 0.35s ease;
}

.site-page .head-bg {
	background: rgba(255, 255, 255, 0.98) !important;
	box-shadow: var(--shadow-nav);
}

.site-page .head .container1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}

.site-page .head .container1.c:after {
	display: none;
}

.site-page .logo.fl,
.site-page .nav.fr {
	float: none;
}

/* Logo：固定高度、宽度按比例，避免 HTML 里写死 width/height 与新图比例不一致导致变形 */
.site-page .logo img {
	height: 48px;
	width: auto;
	object-fit: contain;
}

.site-page .nav-list {
	margin-top: 0;
}

.site-page .nav-list li {
	margin-right: 8px;
}

.site-page .nav-list li a em {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 7px 12px;
	border-radius: var(--radius-sm);
	transition: color 0.2s, background 0.2s;
}

.site-page .nav-list li a em span {
	font-size: 11px;
	opacity: 0.75;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2px;
}

.site-page .nav-list li a em,
.site-page .nav-list li a em span {
	color: var(--color-text);
}

.site-page .nav-list li a:hover em {
	color: var(--color-accent);
	background: rgba(47, 111, 122, 0.08);
}

.site-page .nav-list li a:hover em span {
	color: var(--color-accent);
}

/* 固定顶栏不占文档流：轮播整体上移，与顶栏等高对齐 */
.site-page .banner {
	padding-top: var(--nav-bar-height);
	box-sizing: border-box;
}

/* —— Banner：高度随视口，指示点纯 CSS —— */
.site-page .banner-hd {
	height: min(88vh, 860px);
	min-height: 420px;
}

.site-page .banner-hd .num {
	bottom: 8%;
}

.site-page .banner-hd .num li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.7);
	margin: 0 6px;
	transition: transform 0.2s, background 0.2s;
}

.site-page .banner-hd .num li.on {
	background: #fff !important;
	transform: scale(1.15);
	box-shadow: 0 0 0 2px rgba(47, 111, 122, 0.5);
}

.site-page .banner-hd .prev,
.site-page .banner-hd .next {
	border-radius: var(--radius-md);
	background: rgba(30, 42, 59, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.site-page .banner-hd .prev:hover,
.site-page .banner-hd .next:hover {
	background: rgba(47, 111, 122, 0.75);
}

/* —— 区块标题：下划线装饰 + 间距 —— */
.site-page .title {
	margin: 0 auto 2.5rem;
	padding-top: 0.5rem;
	position: relative;
}

.site-page .title span {
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	display: inline-block;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--color-accent);
	line-height: 1.25;
}

.site-page .title em {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: 0.28em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.site-page .title2,
.site-page .title3 {
	margin-top: 3rem;
	margin-bottom: 2.5rem;
}

/* —— 各区块节奏 —— */
.site-page .pro {
	padding-top: 2rem;
	padding-bottom: 3rem;
	background: var(--color-bg-section);
}

.site-page .display {
	padding: 2rem 0 3.5rem;
	background: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-section) 18%);
}

.site-page .process {
	padding-top: 2rem;
	background: var(--color-bg-page);
}

/* —— 关于：白卡片内嵌 —— */
.site-page .about {
	padding: var(--section-pad-y) 0;
	background: var(--color-bg-section);
}

.site-page .about .container {
	padding: 2.5rem 3rem 3rem;
	background: var(--color-bg-section);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-line);
}

.site-page .about .content p {
	text-indent: 0;
	font-size: 16px;
	line-height: 1.85;
	max-width: 52em;
	margin-left: auto;
	margin-right: auto;
}

/* —— 服务条：深蓝绿渐变条，替代纯黑 —— */
.site-page .service .content {
	background: linear-gradient(145deg, var(--color-primary) 0%, #2a3d52 55%, #243547 100%);
	padding: 3rem 0 3.5rem;
	border-radius: 0;
}

.site-page .service .content span {
	background: none;
	padding-top: 0;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.site-page .service .content p {
	color: rgba(255, 255, 255, 0.82);
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.9;
}

/* —— 定制分类 Tab —— */
.site-page .pro-class li {
	border-radius: var(--radius-pill);
	padding: 0 18px;
	border-color: #c5cad4;
	color: var(--color-text);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.site-page .pro-class li:hover,
.site-page .pro-class li.on {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

/* —— 服装展示 Tab —— */
.site-page .display .hd .displayclass-list div {
	border-radius: var(--radius-sm);
	border-color: #c5cad4;
	transition: all 0.2s;
}

.site-page .slideTxtBox .hd .displayclass-list div.on {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

.site-page .display-list li strong {
	background: none;
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 8px;
	display: inline-block;
}

/* —— 小知识深色区 —— */
.site-page .know {
	background: linear-gradient(180deg, #1a2433 0%, var(--color-primary) 100%);
	padding: 3.5rem 0 4rem;
}

.site-page .know .title4 span,
.site-page .know .title4 em {
	color: #fff;
}

.site-page .knowlist li p {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 400;
}

.site-page .know .hd .prev1,
.site-page .know .hd .next1 {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-image: none;
	position: relative;
}

.site-page .know .hd .prev1::after {
	content: "‹";
	color: #fff;
	font-size: 24px;
	line-height: 44px;
	display: block;
	text-align: center;
}

.site-page .know .hd .next1::after {
	content: "›";
	color: #fff;
	font-size: 24px;
	line-height: 44px;
	display: block;
	text-align: center;
}

.site-page .know .hd .prev1:hover,
.site-page .know .hd .next1:hover {
	background: rgba(47, 111, 122, 0.5);
}

/* —— 制作过程：步骤节点 —— */
.site-page .process .line {
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
	height: 3px;
	opacity: 0.35;
	top: 440px;
}

.site-page .processclass-list li span {
	background: var(--color-accent);
	box-shadow: 0 0 0 4px rgba(47, 111, 122, 0.2);
}

.site-page .processclass-list li .process-pic {
	border-radius: var(--radius-md);
	background: linear-gradient(160deg, #2a3545, #1a2230);
	transition: transform 0.2s, box-shadow 0.2s;
}

.site-page .processclass-list li:hover .process-pic,
.site-page .processclass-list li.on .process-pic {
	background: linear-gradient(160deg, var(--color-accent-hover), var(--color-accent));
}

/* —— 合作区底图缺失时兜底 —— */
.site-page .cooperation {
	background-color: var(--color-bg-muted);
	background-image: linear-gradient(135deg, rgba(47, 111, 122, 0.06) 0%, transparent 50%),
		url(../images/zs-bg.png);
}

/* —— 展厅轮播外框 —— */
.site-page .hall {
	padding-bottom: 5rem;
}

/* 避免父级 .container 的 overflow:hidden 裁掉左右箭头 */
.site-page .hall .container {
	overflow: visible;
}

.site-page .hall .content {
	overflow: visible;
}

.site-page .hall p {
	color: var(--color-text-muted);
	max-width: 52em;
	margin-left: auto;
	margin-right: auto;
}

.site-page .hall-list {
	padding: 1.5rem 56px 2rem; /* 左右留白，避免箭头贴边被裁切 */
	overflow: visible;
}

/* 与白框同宽居中，箭头相对此层左右外移 */
.site-page .hall-carousel-wrap {
	box-sizing: border-box;
}

.site-page .hall-list .bd {
	margin-left: 0;
	padding: 12px;
	background: var(--color-bg-section);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-line);
}

.site-page .hall-list .prev,
.site-page .hall-list .next {
	background: rgba(30, 42, 59, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-md);
}

.site-page .hall-list .prev:hover,
.site-page .hall-list .next:hover {
	background: var(--color-accent);
}

/* —— 联系区 —— */
.site-page .contact .content {
	padding: 1rem 0 2rem;
}

.site-page .con-right p {
	padding-left: 28px;
	border-left: 3px solid var(--color-accent);
	background: none !important;
	margin-bottom: 16px;
}

/* —— 表单与按钮 —— */
.site-page .submit {
	background-color: #2d3a4d;
	background-image: linear-gradient(120deg, rgba(47, 111, 122, 0.15), transparent),
		url(../images/submit-bg.png);
	background-size: cover;
	background-position: center;
}

.site-page .sub {
	background: var(--color-accent) !important;
	color: #fff !important;
	border-radius: var(--radius-sm);
	font-size: 18px;
	transition: background 0.2s, transform 0.15s;
}

.site-page .sub:hover {
	background: var(--color-accent-hover) !important;
}

.site-page .submit2 {
	background: #1e2632;
}

.site-page .submit2 .inp,
.site-page .submit2 .tex {
	border-radius: var(--radius-sm);
}

/* —— 版权 —— */
.site-page .copyright {
	background: var(--color-primary);
	padding: 1.25rem 0;
}

.site-page .copyright p,
.site-page .copyright p a {
	font-size: 13px;
	opacity: 0.92;
}

/* —— 右侧固定 —— */
.site-page .right-fixed li {
	background: var(--color-accent);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.site-page .right-fixed li:hover {
	filter: brightness(1.08);
}

/* —— about-more CTA 条 —— */
.site-page .about-more a.more {
	background: var(--color-accent);
	border: none;
	border-radius: var(--radius-pill);
	width: auto;
	min-width: 220px;
	padding: 0 32px;
}

.site-page .about-more a.more:hover {
	background: var(--color-accent-hover);
	color: #fff;
}