@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");


html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

@-ms-viewport {
	width: device-width;
}

body {
	font-size: 12pt;
	background-color: #f0f0f0;

	/* 核心修改：首选 Inter 字体，其次调用苹果系统原生字体，最后是常规无衬线 */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* 建议：将原本带点绿色的浅灰 (#878e83) 改为深灰 (#333333)，苹果官网正文通常是高对比度的深灰色，阅读体验更好 */
	color: #333333;

	/* 注意：这里我删除了 letter-spacing: -1px; 让正文呼吸感更强，更像苹果官网 */
}

h1,
h2,
h3,
h4 {
	color: #007897;
	font-weight: normal;
}


h2 {
	font-size: 2em;
	/* 苹果的大标题通常比较有视觉张力，推荐放大到 2em */
	font-weight: 600;
	/* 半粗体 (Semi-bold)，增加标题的分量感 */
	color: #1d1d1f;
	/* 苹果官方最爱用的经典深灰色，比纯黑更有呼吸感 */
	letter-spacing: -0.02em;
	/* 极微弱的负字距，让英文字母看起来更紧凑高级，去除原本粗暴的 -1px */
	margin-bottom: 0.8em;
	/* 增加标题和下方正文的留白距离（呼吸感） */
	line-height: 1.2;
	/* 确保标题换行时行距紧凑 */
}

/* ========================================= */
/* 缩小主内容区标题与下方内容之间的间距           */
/* ========================================= */

#main section h2 {
	/* 强行缩小底部的外边距。你可以将 10px 改为 5px 甚至 0 来看看哪个效果最紧凑 */
	margin-bottom: 10px !important;
}

h3,
h4 {
	color: #283121;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 1.2em;
	margin-bottom: 0.8em;
}

h4 {
	font-size: 1em;
}

p,
ul {
	margin-bottom: 1.25em;
}

p {
	line-height: 1.8em;
}

strong {
	color: #474e43;
}

img.left {
	float: left;
	margin: 2px 1.25em 0 0;
}

img.top {
	margin: 4px 0 2.25em 0;
}

ul {
	padding: 0.25em 0 0 0;
}

a {
	color: #5d93a2;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

*>p:last-child {
	margin-bottom: 0 !important;
}

section,
article {
	margin: 0 0 60px 0;
}

section:last-child,
article:last-child {
	margin-bottom: 0;
}

/* Container */

.container {
    margin: 0 auto;
    width: 1200px !important;       /* 強制鎖死寬度 */
    min-width: 1200px !important;   /* 最小寬度鎖死 */
    max-width: none !important;     /* 解除最大寬度限制 */
}

/* 給 body 也加上最小寬度，防止背景圖變形 */
body {
    min-width: 1200px !important;
    overflow-x: auto !important; /* 允許橫向滑動 */
}

/* Row */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
}

.row>* {
	box-sizing: border-box;
}

.row.gtr-uniform>*> :last-child {
	margin-bottom: 0;
}

.row.aln-left {
	justify-content: flex-start;
}

.row.aln-center {
	justify-content: center;
}

.row.aln-right {
	justify-content: flex-end;
}

.row.aln-top {
	align-items: flex-start;
}

.row.aln-middle {
	align-items: center;
}

.row.aln-bottom {
	align-items: flex-end;
}

.row>.imp {
	order: -1;
}

.row>.col-1 {
	width: 8.33333%;
}

.row>.off-1 {
	margin-left: 8.33333%;
}

.row>.col-2 {
	width: 16.66667%;
}

.row>.off-2 {
	margin-left: 16.66667%;
}

.row>.col-3 {
	width: 25%;
}

.row>.off-3 {
	margin-left: 25%;
}

.row>.col-4 {
	width: 33.33333%;
}

.row>.off-4 {
	margin-left: 33.33333%;
}

.row>.col-5 {
	width: 41.66667%;
}

.row>.off-5 {
	margin-left: 41.66667%;
}

.row>.col-6 {
	width: 50%;
}

.row>.off-6 {
	margin-left: 50%;
}

.row>.col-7 {
	width: 58.33333%;
}

.row>.off-7 {
	margin-left: 58.33333%;
}

.row>.col-8 {
	width: 66.66667%;
}

.row>.off-8 {
	margin-left: 66.66667%;
}

.row>.col-9 {
	width: 75%;
}

.row>.off-9 {
	margin-left: 75%;
}

.row>.col-10 {
	width: 83.33333%;
}

.row>.off-10 {
	margin-left: 83.33333%;
}

.row>.col-11 {
	width: 91.66667%;
}

.row>.off-11 {
	margin-left: 91.66667%;
}

.row>.col-12 {
	width: 100%;
}

.row>.off-12 {
	margin-left: 100%;
}

.row.gtr-0 {
	margin-top: 0px;
	margin-left: 0px;
}

.row.gtr-0>* {
	padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
	margin-top: 0px;
}

.row.gtr-0.gtr-uniform>* {
	padding-top: 0px;
}

.row.gtr-25 {
	margin-top: -12.5px;
	margin-left: -12.5px;
}

.row.gtr-25>* {
	padding: 12.5px 0 0 12.5px;
}

.row.gtr-25.gtr-uniform {
	margin-top: -12.5px;
}

.row.gtr-25.gtr-uniform>* {
	padding-top: 12.5px;
}

.row.gtr-50 {
	margin-top: -25px;
	margin-left: -25px;
}

.row.gtr-50>* {
	padding: 25px 0 0 25px;
}

.row.gtr-50.gtr-uniform {
	margin-top: -25px;
}

.row.gtr-50.gtr-uniform>* {
	padding-top: 25px;
}

.row {
	margin-top: -50px;
	margin-left: -50px;
}

.row>* {
	padding: 50px 0 0 50px;
}

.row.gtr-uniform {
	margin-top: -50px;
}

.row.gtr-uniform>* {
	padding-top: 50px;
}

.row.gtr-150 {
	margin-top: -75px;
	margin-left: -75px;
}

.row.gtr-150>* {
	padding: 75px 0 0 75px;
}

.row.gtr-150.gtr-uniform {
	margin-top: -75px;
}

.row.gtr-150.gtr-uniform>* {
	padding-top: 75px;
}

.row.gtr-200 {
	margin-top: -100px;
	margin-left: -100px;
}

.row.gtr-200>* {
	padding: 100px 0 0 100px;
}

.row.gtr-200.gtr-uniform {
	margin-top: -100px;
}

.row.gtr-200.gtr-uniform>* {
	padding-top: 100px;
}


/* Reusable */

article.blog-post {
	position: relative;
}

article.blog-post .comments {
	position: absolute;
	top: 0;
	right: 0;
	height: 32px;
	line-height: 24px;
	padding-left: 40px;
	background: url("images/icon-bubble.png") no-repeat;
}

article.blog-post .blog-post-image {
	width: 100%;
}

ul.small-image-list li {
	overflow: hidden;
	margin-bottom: 1.5em;
}

ul.small-image-list li img {
	width: 78px;
}

ul.big-image-list li {
	overflow: hidden;
	margin-bottom: 2em;
}

ul.big-image-list li img {
	width: 178px;
}

ul.link-list li {
	border-top: solid 1px #ced0b7;
	padding: 0.75em 0 0 0;
	margin: 0.75em 0 0 0;
}

ul.link-list li:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.button {
	background-image: -moz-linear-gradient(top, #008dad, #007b9d);
	background-image: -webkit-linear-gradient(top, #008dad, #007b9d);
	background-image: -ms-linear-gradient(top, #008dad, #007b9d);
	background-image: linear-gradient(top, #008dad, #007b9d);
	display: inline-block;
	padding: 15px 25px 15px 25px;
	background-color: #007b9d;
	border-radius: 10px;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: -1px;
	border: solid 1px #006e8b;
	box-shadow: inset 0px 0px 0px 1px #18a8c8;
}

.button:hover {
	background-image: -moz-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: -webkit-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: -ms-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: linear-gradient(top, #1b9fbe, #118eb1);
	background-color: #118eb1;
	box-shadow: inset 0px 0px 0px 1px #3ecceb;
}

/* Header */

#header-wrapper {
	background-image: -moz-linear-gradient(top, #fdfdfd, #e8e8e8);
	background-image: -webkit-linear-gradient(top, #fdfdfd, #e8e8e8);
	background-image: -ms-linear-gradient(top, #fdfdfd, #e8e8e8);
	background-image: linear-gradient(top, #fdfdfd, #e8e8e8);
	background-color: #f0f0f0;
	/* 后备底色 */
	position: sticky;
	/* 开启粘性定位 */
	top: 0;
	/* 吸附在屏幕最顶部边缘 */
	z-index: 1000;
	/* 保证它在最上层，不被下方图片或文字遮挡 */
	width: 100%;
	/* 宽度撑满屏幕 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/* 建议加个极淡的阴影，滚动时能跟下方内容区分开 */
	padding-top: 0.1px !important;
	padding-bottom: 0.1px !important;
}

#header {
	background-image: -moz-linear-gradient(top, #008ead, #007b9d);
	background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
	background-image: -ms-linear-gradient(top, #008ead, #007b9d);
	background-image: linear-gradient(top, #008ead, #007b9d);
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	position: relative;
	margin: 0.5% 0 0.5% 0;
	/* 修改标题栏背景高度 */
	padding: 0 20px 0 20px;
	border-radius: 10px;
	border: solid 1px #006e8b;
	box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
	background-color: #007b9d;
	height: 55px;
}

#header h1 {
	position: absolute;
	left: 40px;
	top: 0;
	color: #fff;
	font-size: 2.4em;
	letter-spacing: -2px;
	line-height: 45px;
	margin-bottom: 0 !important;
	/* 去除 Logo 下方的默认空隙 */
}

#header h1 a {
	color: #fff;
	text-decoration: none;
}

#header nav {
	position: absolute;
	right: 40px;
	top: 1px;
	line-height: 52px;
	font-size: 1.1em;
	letter-spacing: -1px;
}

#header nav a {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	padding: 0 25px 0 25px;
	outline: 0;
}

#header nav a.current-page-item {
	background-image: -moz-linear-gradient(top, #007b99, #007897);
	background-image: -webkit-linear-gradient(top, #007b99, #007897);
	background-image: -ms-linear-gradient(top, #007b99, #007897);
	background-image: linear-gradient(top, #007b99, #007897);
	background-color: #007897;
	box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px 1px rgba(255, 255, 255, 0.1);
}

#header nav a:hover {
	background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
	background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
	background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
	background-image: linear-gradient(top, #0782a0, #077d9b);
	background-color: #0882a1;
	box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.05), 0px 0px 5px 1px rgba(255, 255, 255, 0.05);
}

/* Banner */

#banner-wrapper {
	/* 调整上方的空白高度（觉得大就改小，甚至可以改成 0） */
	padding-top: 10px !important;
	/* 调整下方的空白高度 */
	padding-bottom: 10px !important;
}

#banner {
	position: relative;
	width: 100%;
	padding: 6em 0;
	border-radius: 10px;
	background-size: cover;
	text-align: center;
	box-shadow: inset 0 0 0 20px #fff;
}

#banner h2 {
	font-size: 3.3em;
	color: #fff;
	text-align: center;
	letter-spacing: -2px;
	margin: 0;
}

#banner span {
	display: block;
	left: 0;
	margin: 0.5em 0 0 0;
	font-size: 1.6em;
	color: #fff;
	letter-spacing: -1px;
	opacity: 0.8;
}

/* Main */

#main {
	background: #fff;
	padding: 4em 0;
}

/* Footer */

#footer-wrapper {
	padding: 4em 0;
}

/* Copyright */

#copyright {
	text-align: center;
	color: #A6A88F;
	border-top: solid 1px #ced0b7;
	padding: 10px 0 0 0;
	margin: 0 0 0 0;
}

#copyright a {
	color: #A6A88F;
}

/* Large */


/* Small */

#navPanel,
#titleBar {
	display: none;
}




/* ========================================= */
/* 修复图片 Logo 替换文字后的样式                */
/* ========================================= */

/* 1. 桌面端与平板端（>980px）：使用绝对定位+位移法实现完美居中 */
#header h1 {
	position: absolute !important;
	top: 50% !important;
	/* 定位到父容器高度的 50% */
	transform: translateY(-50%) !important;
	/* 往上偏移自身高度的一半，实现绝对居中 */
	margin: 0 !important;
	height: auto !important;
	line-height: 1 !important;
	/* 清除原模板写死的几十像素行高干扰 */
}

#header h1 a {
	display: block !important;
	line-height: 1 !important;
}

#header h1 img {
	/* 控制桌面端 Logo 的高度 */
	max-height: 38px !important;
	width: auto !important;
	display: block !important;
}

/* 2. 手机端与小平板（<980px）：适配动态生成的 #titleBar */

/* ========================================= */
/* 自定义轮播图样式 (Slider)                    */
/* ========================================= */

#banner-slider {
	position: relative;
	width: 100%;
	/* 【控制尺寸】在这里修改轮播图的高度，觉得太大可以改为 400px 或 500px */
	height: 550px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: inset 0 0 0 10px #fff;
	/* 保持原模板的白色内边框风格 */
	background-color: #333;
	/* 图片加载前的背景色 */
}

.slider-container {
	display: flex;
	width: 100%;
	height: 100%;
	/* 切换图片的动画过渡效果 */
	transition: transform 0.6s ease-in-out;
}

.slide {
	min-width: 100%;
	height: 100%;
	position: relative;
}

.slide img {
	width: 100%;
	height: 100%;
	/* 保证图片铺满整个区域且不变形被拉伸 */
	object-fit: cover;
}

/* 漂浮在图片上的文字样式 */
.slide-text {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 2.2em;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	background: rgba(0, 114, 148, 0.7);
	/* 品牌蓝色半透明背景 */
	padding: 10px 30px;
	border-radius: 5px;
	white-space: nowrap;
}

/* 左右切换按钮 */
.slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.3);
	color: white;
	border: none;
	font-size: 1em;
	padding: 15px 20px;
	cursor: pointer;
	border-radius: 5px;
	transition: background 0.3s;
	z-index: 10;
}

.slide-btn:hover {
	background: rgba(0, 114, 148, 0.8);
}

.prev-btn {
	left: 20px;
}

.next-btn {
	right: 20px;
}

/* 底部指示圆点 */
.slider-dots {
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
	z-index: 10;
}

.dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s;
}

.dot.active,
.dot:hover {
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}



/* ========================================= */
/* 1. 缩小外侧一圈的空白区域                   */
/* ========================================= */
#main {
	/* 原本是 4em。2em 控制上下空白，0 控制左右。觉得大可以改 1.5em 或 1em */
	padding: 1.5em 0 !important;
}

/* ========================================= */
/* 2. 工厂优势列表样式 (Advantages List)        */
/* ========================================= */
.advantages-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.advantages-list li {
	display: flex;
	align-items: flex-start;
	/* 让图片和文字顶部对齐 */
	/* 👇 在这里修改每个优势项目之间的上下间距 */
	margin-bottom: 10px;
}

.adv-img {
	/* 👇 在这里修改优势图片的尺寸 (目前是正方形 65x65) */
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	/* 让图片有点小圆角，看起来不那么死板 */
	/* 👇 在这里修改图片和右侧文字之间的水平距离 */
	margin-right: 15px;
}

.adv-text h4 {
	/* 👇 修改优势标题的字体大小和下方间距 */
	font-size: 1.1em;
	margin-bottom: 3px;
	color: #283121;
}

.adv-text p {
	/* 👇 修改优势说明的字体大小和行高 */
	font-size: 0.9em;
	line-height: 1.4;
	margin: 0;
}



/* ========================================= */
/* 适配 macOS 浅灰背景的内部样式修正            */
/* ========================================= */

/* 1. 把内部的蓝框变透明，去掉原本的边框和内阴影 */
#header {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* 2. 把导航菜单的文字变成深灰色，更有商务质感 */
#header nav a {
	color: #333 !important;
	font-weight: 500;
	/* 稍微加粗一点增加可读性 */
}

/* 3. 修改鼠标悬浮在菜单上的效果 (原本是深蓝底色，现在改成浅灰底色) */
#header nav a:hover,
#header nav a.current-page-item {
	background: rgba(0, 0, 0, 0.05) !important;
	/* 极淡的黑色半透明底 */
	color: #000 !important;
	box-shadow: none !important;
	border-radius: 6px;
	/* 苹果风圆角 */
}

/* 4. 如果你的 Logo 还是文字，也把它变成深灰色 (如果是图片 Logo 这条不影响) */
#header h1 a {
	color: #222 !important;
}


/* ========================================= */
/* 1. 语言下拉菜单样式 (Language Dropdown)      */
/* ========================================= */

.lang-dropdown {
	display: inline-block;
	position: relative;
	/* 继承外部的对齐方式 */
}

/* 隐藏下拉框，只有在鼠标悬浮时才显示 */
.lang-dropdown-content {
	display: none;
	position: absolute;
	top: 80%;
	/* 靠近主菜单下方 */
	left: 50%;
	transform: translateX(-50%);
	/* 保证下拉框在文字正下方居中 */
	background-color: #ffffff;
	min-width: 120px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	/* 苹果风柔和弥散阴影 */
	border-radius: 12px;
	/* 苹果风圆角 */
	padding: 8px 0;
	z-index: 10000;
}

/* 鼠标悬浮时显示下拉框 */
.lang-dropdown:hover .lang-dropdown-content {
	display: block;
	animation: fadeIn 0.2s ease;
	/* 简单的淡入动画 */
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate(-50%, -5px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* 下拉框内部链接样式重置 */
#header nav .lang-dropdown-content a {
	display: block !important;
	padding: 10px 20px !important;
	line-height: 1.2 !important;
	color: #333333 !important;
	font-size: 0.9em !important;
	background: transparent !important;
	text-align: center;
	border-radius: 0 !important;
}

/* 下拉框内部链接 hover 效果：苹果风浅灰色背景 */
#header nav .lang-dropdown-content a:hover {
	background-color: #f5f5f7 !important;
	color: #0071e3 !important;
	/* 文字变蓝 */
}

/* ========================================= */
/* 2. 苹果风格 Contact 蓝色按钮样式             */
/* ========================================= */

#header nav a.nav-contact-btn {
	display: inline-block !important;
	background-color: #0071e3 !important;
	color: #ffffff !important;
	/* 文字纯白 */

	/* 尺寸与对齐控制 */
	padding: 0 20px !important;
	height: 40px !important;
	line-height: 40px !important;
	vertical-align: middle !important;
	/* 强制与旁边的文字垂直居中对齐 */
	margin-left: 15px !important;
	/* 稍微与左边菜单拉开一点呼吸空间 */

	border-radius: 7px !important;
	/* 胶囊圆角 */
	font-weight: 500 !important;
	/* 稍微加粗让按钮更有力量感 */
	letter-spacing: normal !important;
	/* 清除原有负字距 */
	transition: all 0.2s ease !important;
	/* 丝滑的过渡动画 */
}

/* 按钮 Hover 效果：轻微提亮并有一点点浮动 */
#header nav a.nav-contact-btn:hover {
	background-color: #0077ed !important;
	transform: scale(1.15);
	/* 鼠标放上去有轻微的放大交互感 */
	box-shadow: 0 4px 10px rgba(0, 113, 227, 0.3) !important;
	/* 淡淡的蓝色光晕 */
}

/* ========================================= */
/* Factory Tour 工厂照片墙网格样式与交互效果     */
/* ========================================= */
/* 使用 CSS Grid 布局，默认电脑端 5 列 */
.factory-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
	/* 图片之间的空隙，可根据喜好调大或调小 */
}

/* 每个图片容器的样式 */
.factory-item {
	position: relative;
	border-radius: 6px;
	/* 苹果风圆角 */
	overflow: hidden;
	/* 核心机制：防止放大的图片溢出容器 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	/* 淡淡的立体阴影 */
	/* 强制图片比例为 4:3，哪怕原图尺寸不一也能自动裁齐排好 */
	aspect-ratio: 4 / 3;
	background-color: #f5f5f7;
	/* 图片加载出来前的底色 */
}

/* 内部图片的样式 */
.factory-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 保证图片铺满且不变形 */
	display: block;
	/* 放大动画的过渡时间与平滑曲线 */
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 鼠标悬浮时的丝滑放大交互效果 */
.factory-item:hover img {
	transform: scale(1.08);
	/* 放大 1.08 倍，克制且高级 */
}



/* ========================================= */
/* 大数字驱动的纯文本核心优势网格 (2x3 Layout)   */
/* ========================================= */

/* 采用 Grid 网格，电脑端 3 列 */
.text-grid-2x3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	/* 卡片之间的间距 */
}

/* 极简文字卡片的基础样式 */
.text-card {
	background-color: #ffffff;
	border: 1px solid #e5e5ea;
	/* 极淡的苹果风边框 */
	border-radius: 12px;
	padding: 35px 25px;
	text-align: center;
	/* 内容居中 */
	transition: all 0.3s ease;
	/* 丝滑过渡动画 */
}

/* 卡片悬浮交互：轻微上浮 + 柔和阴影 */
.text-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
	border-color: #d2d2d7;
}

/* 核心灵魂：极其醒目的大数字 */
.big-number {
	font-size: 3em;
	/* 超大字号 */
	font-weight: 700;
	/* 粗体 */
	color: #0071e3;
	/* 苹果经典商务蓝，吸引眼球 */
	line-height: 1;
	margin-bottom: 10px;
	letter-spacing: -1.5px;
	/* 让大数字的字符更紧凑，显得更有力量感 */
}

/* 卡片内的小标题 */
.text-card h4 {
	font-size: 1.25em !important;
	color: #1d1d1f !important;
	/* 近乎黑色的深灰 */
	margin-bottom: 12px !important;
	font-weight: 600 !important;
}

/* 卡片内的补充说明段落 */
.text-card p {
	font-size: 0.95em !important;
	color: #515154 !important;
	/* 柔和的灰色，区分层级 */
	line-height: 1.6 !important;
	margin: 0 !important;
}




/* ========================================= */
/* Products Category 苹果风格展示区            */
/* ========================================= */
/* ========================================= */
/* 🎒 Featured Collections (終極主從佈局)     */
/* ========================================= */

.category-master-detail {
	display: flex;
	align-items: stretch;
	/* 🌟 核心：讓左右兩邊高度強制相等 */
	gap: 20px;
	margin-bottom: 20px;
}

/* ================= 1. 左側分類菜單 + 動態場景圖 (25%) ================= */
.category-sidebar {
	flex: 0 0 25%;
	background-color: #fbfbfd;
	border: 1px solid #e5e5ea;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	/* 垂直排列 */
	justify-content: space-between;
	/* 🌟 核心：將菜單頂到最上，將場景圖推到最下 */
	overflow: hidden;
}

.category-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	/* 菜單上下留點空隙 */
}

.category-menu li {
	padding: 16px 25px;
	font-size: 1.05em;
	font-weight: 500;
	color: #515154;
	cursor: pointer;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
}

.category-menu li:hover {
	color: #1d1d1f;
	background-color: #f5f5f7;
}

.category-menu li.active {
	color: #0071e3;
	font-weight: 600;
	background-color: #ffffff;
	border-left: 3px solid #0071e3;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* 🖼️ 左下角動態場景圖樣式 */
.category-mood-box {
	position: relative;
	margin: 15px;
	/* 留出內邊距，像相框一樣 */
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	/* 限制場景圖為 4:3 比例，不會太高 */
	background-color: #e5e5ea;
}

.category-mood-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.4s ease;
	/* 切換時自帶漸變淡入效果 */
}

.mood-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 15px 12px 15px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	/* 底部黑色漸變保證文字清晰 */
}

.mood-overlay span {
	display: block;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
}

/* ================= 2. 右側單品網格 (75%) ================= */
.category-content {
	flex: 1;
	min-width: 0;
}

.product-grid-2x3 {
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	animation: fadeInGrid 0.4s ease;
}

.product-grid-2x3.active-grid {
	display: grid;
}

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

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

/* ================= 3. 單品卡片與【自定義圖片尺寸控制台】 ================= */
.prod-card {
	background-color: #ffffff;
	border: 1px solid #e5e5ea;
	border-radius: 12px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s ease;
}

.prod-card:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
	border-color: #d2d2d7;
}

/* 📐 圖片尺寸自定義控制台： */
.prod-img-wrapper {
	width: 100%;
	/* 這裡控制圖片比例。默認 1 / 1 (正方形)。如果你們包包比較長，可以改為 4 / 5，如果是橫向可改為 4 / 3 */
	aspect-ratio: 1 / 1;
	margin-bottom: 15px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fcfcfc;
	/* 淺灰底色，非常適合襯托去背產品圖 */
}

.prod-img-wrapper img {
	width: 100%;
	height: 100%;
	/* contain 保證圖片完整顯示不被裁切。如果你們的圖已經完美去背，這個效果最好 */
	object-fit: contain;
	transition: transform 0.4s ease;
}

.prod-card:hover .prod-img-wrapper img {
	transform: scale(1.08);
}

.prod-id {
	display: block;
	font-size: 0.9em;
	color: #86868b;
	font-weight: 500;
}

/* ================= 4. 底部硬朗化 CTA 橫幅 ================= */
.cta-capsule-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f5f5f7;
	border: 1px solid #e5e5ea;
	border-radius: 16px;
	/* 🌟 修正：從 50px 膠囊改為更專業的 16px 大廠圓角 */
	padding: 15px 25px;
}

.cta-text strong {
	color: #1d1d1f;
	font-size: 1.1em;
	margin-right: 10px;
}

.cta-text span {
	color: #515154;
	font-size: 0.95em;
}

.cta-btn {
	background-color: #0071e3;
	color: #ffffff !important;
	padding: 12px 25px;
	border-radius: 6px;
	/* 🌟 修正：按鈕改為 12px 硬朗商務圓角 */
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.cta-btn:hover {
	background-color: #0077ed;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
}



/* ========================================= */
/* 修复：将导航栏左右边缘与下方内容严格对齐      */
/* ========================================= */

#header {
	padding: 0 !important;
	/* 移除原本左右 40px 的内边距 */
}

#header h1 {
	left: 0 !important;
	/* 让左侧的 Logo 紧贴容器的最左侧边缘 */
}

#header nav {
	right: 0 !important;
	/* 让右侧的 Contact 按钮及菜单紧贴容器的最右侧边缘 */
}


/* ========================================= */
/* 🍎 苹果风格 Services 服务卡片排版区           */
/* ========================================= */

/* ========================================= */
/* 🧩 Core Services (極限 2 行壓縮網格)       */
/* ========================================= */

/* 🌟 修復對齊：強制副標題靠左並限制寬度，消除居中錯位 */
.services-section .section-subtitle {
	text-align: left !important;
	max-width: 700px;
	color: #86868b;
	font-size: 1.05em;
	margin-bottom: 35px;
	max-width: 100% !important;
	/* 🌟 解除宽度限制，允许文字在一行内完全舒展 */
}

/* 🌟 核心引擎：5列 x 2行 的極限網格 */
.bento-grid-2rows {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* 5 列均分 */
	grid-auto-rows: 240px;
	/* 🌟 核心壓縮：強制每一行高度僅為 240px，兩行總高不到 500px！ */
	gap: 18px;
}

/* 統一的卡片底座 */
.bento-card {
	background-color: #ffffff;
	border: 1px solid #e5e5ea;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	position: relative;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bento-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	border-color: #d2d2d7;
}

/* 1. 寬卡片 (佔據 2 列，內部左右排列) */
.bento-wide {
	grid-column: span 2;
	flex-direction: row;
	align-items: center;
}

.bento-wide .bento-text {
	flex: 1;
	padding: 25px;
}

.bento-wide .bento-text h3 {
	font-size: 1.3em !important;
	margin-bottom: 8px !important;
	font-weight: 700 !important;
	color: #1d1d1f !important;
}

.bento-wide .bento-text p {
	font-size: 0.9em !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	color: #515154 !important;
}

.bento-img-right,
.bento-img-left {
	width: 45%;
	height: 100%;
	object-fit: cover;
}

/* 2. 小卡片 (佔據 1 列，內部上下排列) */
.bento-small {
	grid-column: span 1;
	flex-direction: column;
}

.bento-small .bento-img-top {
	width: 100%;
	height: 110px;
	/* 圖片高度壓縮 */
	object-fit: cover;
	background-color: #fbfbfd;
}

.bento-small .bento-text {
	padding: 15px;
	flex: 1;
}

.bento-small .bento-text h3 {
	font-size: 1.05em !important;
	margin-bottom: 5px !important;
	font-weight: 700 !important;
	color: #1d1d1f !important;
}

.bento-small .bento-text p {
	font-size: 0.85em !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	color: #86868b !important;
}

/* 3. 全圖遮罩小卡片 (佔據 1 列) */
.bento-overlay {
	grid-column: span 1;
	border: none;
	background-color: #1d1d1f;
}

.bento-overlay .bg-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: transform 0.5s ease;
}

.bento-card:hover.bento-overlay .bg-img {
	transform: scale(1.1);
	opacity: 0.4;
}

.overlay-content {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 15px;
	z-index: 2;
}

.overlay-content h3 {
	color: #ffffff !important;
	margin-bottom: 5px !important;
	font-size: 1.1em !important;
	font-weight: 700 !important;
}

.overlay-content p {
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 !important;
	font-size: 0.85em !important;
	line-height: 1.3 !important;
}

/* 🌟 卡片內圖片懸浮放大特效 (針對非遮罩卡片) */
.bento-img-right,
.bento-img-left,
.bento-img-top {
	transition: transform 0.4s ease;
}

.bento-card:hover .bento-img-right,
.bento-card:hover .bento-img-left,
.bento-card:hover .bento-img-top {
	transform: scale(1.05);
}






/* ========================================= */
/* 🍎 Apple-Style About Us (40/60 左右数据卡布局) */
/* ========================================= */

/* Flexbox 实现 40/60 左右分栏 */
.about-split-layout {
	display: flex;
	align-items: center;
	/* 左右垂直居中对齐 */
	gap: 20px;
	/* 左右两边之间的留白间距 */
}

/* ================= 左侧：引言区 ================= */
.about-left-intro {
	flex: 0 0 38%;
	/* 占据大约 40% 的宽度 */
}

.about-left-intro h2 {
	margin-bottom: 8px !important;
}

.about-left-intro .about-subtitle {
	color: #86868b !important;
	font-weight: 500 !important;
	font-size: 1.25em !important;
	margin-bottom: 20px !important;
	line-height: 1.4;
}

.about-left-intro p {
	font-size: 1.05em !important;
	color: #515154 !important;
	line-height: 1.6 !important;
	margin-bottom: 30px !important;
}

/* ================= 右側：3行3列數據卡 ================= */
.about-right-stats {
	flex: 1;
	/* 占据剩下的 60% 宽度 */
	min-width: 0;
	/* 🚨 核心修复：打破 Flexbox 默认的最小宽度限制，防止被子元素撑爆 */
}

.stats-grid-3x3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 強制 3 列 */
	gap: 12px;
	/* ⚙️ 卡片之間的間距稍微調小，適應 3 行排列 */
}

.stat-card {
	background-color: #fbfbfd;
	border: 1px solid #e5e5ea;
	border-radius: 12px;

	/* ⚙️ 內部留白：為了容納 3 行而不顯得過高，將上下 Padding 調整為 20px */
	padding: 25px 10px;

	/* ⚙️ 最低高度：設置為 115px，讓卡片保持微胖的正方形質感 */
	min-height: 115px;

	text-align: center;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 交互：懸浮時卡片變純白、微微上浮並帶柔和陰影 */
.stat-card:hover {
	background-color: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	border-color: #d2d2d7;
}

.stat-num {
	font-size: 2.5em;
	/* ⚙️ 字號稍微收斂一點，適配更多的卡片數量 */
	font-weight: 700;
	color: #0071e3;
	line-height: 1;
	margin-bottom: 6px;
	letter-spacing: -1px;
}

.stat-num span {
	font-size: 0.45em;
	font-weight: 600;
	margin-left: 2px;
}

.stat-label {
	font-size: 0.85em;
	color: #515154;
	font-weight: 600;
	line-height: 1.2;
}





/* ========================================= */
/* 🌐 全局大一统格式 (Global Section Styles)     */
/* ========================================= */

/* 1. 统一所有大板块的上下呼吸间距与淡淡的分割线 */
.global-section {
	padding: 30px 0 !important;
	/* 统一模块内部的上下留白 (呼吸感核心) */
	margin: 0 !important;
	border-top: 1px solid #e5e5ea;
	/* 全站统一的极淡苹果风分割线 */
}

/* About 板块作为首屏第一个模块，不需要顶部横线 */
.about-split-section {
	border-top: none !important;
	padding-top: 0px !important;
}

/* 2. 统一全站主标题 (H2) - 强制居左对齐 */
#main section h2 {
	text-align: left !important;
	font-size: 2.4em !important;
	/* 统一大字号 */
	font-weight: 700 !important;
	/* 统一加粗，提升大厂质感 */
	color: #1d1d1f !important;
	letter-spacing: -1px !important;
	margin-bottom: 35px !important;
	/* 统一标题和下方内容之间的距离 */
	line-height: 1.2 !important;
}

/* 标题下方增加一抹品牌蓝色的几何短线 */
#main section h2::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background-color: #0071e3;
	/* SANDA 品牌蓝 */
	margin-top: 13px;
	border-radius: 2px;
}

/* 3. 统一层级：修正 Why Partner 卡片里的标题大小 (由 h4 修正为 h3) */
.text-card h3 {
	font-size: 1.25em !important;
	color: #1d1d1f !important;
	margin-bottom: 12px !important;
	font-weight: 600 !important;
}


/* ========================================= */
/* 🎨 各大模块背景自定义控制台 (Background Customization) */
/* ========================================= */

/* 1. 默认底色与准备工作 */
.global-section {
	/* 如果不使用图片背景，全站模块默认显示这个极淡的浅灰底色。/
	background-color: #fdfdfd !important;

	/* 以下两行必须保留：为下方的图片伪元素提供定位锚点，并保证文字内容永远在图片的最上层 */
	position: relative;
	z-index: 1;
}

/* =======================================================
2. 【预留模块】各大板块背景图自定义 (默认已注释)
👉 启用方法：删除你想修改的模块前后的 /* 和 * / 符号即可启用。
👉 高级玩法：我已为你预设了 opacity(透明度)、brightness(亮度)、blur(模糊) 等参数，你可以随意改数值！
=======================================================
*/



/* ========================================= */
/* 🤝 信任背书区域 (Logo 滚动墙 / LCD 跑马灯)   */
/* ========================================= */

/* 外层容器：利用 margin-top 将其推下，正好与左侧的按钮保持水平视觉平衡 */
.trust-signals-wrapper {
	margin-top: 25px;
	border-top: 1px solid #e5e5ea;
	/* 添加一条很淡的分割线 */
	padding-top: 15px;
	overflow: hidden;
	/* 防止内容撑爆容器 */
}

/* 信任背书小标题 */
.trust-title {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	color: #86868b;
	letter-spacing: 1px;
	margin-bottom: 12px;
}

/* 🍎 方案一：Logo 滚动墙核心样式 */
.scrolling-logo-wall {
	width: 100%;
	overflow: hidden;
	/* 苹果级特效：左右两端边缘渐变透明，让 Logo 看起来像从雾中浮现 */
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
	display: flex;
	align-items: center;
	width: max-content;
	/* ⚙️ 滚动速度：15s 是滚动一圈的时间。越小越快，越大越慢 */
	animation: scroll-left 7s linear infinite;
}

/* 悬浮交互：鼠标移上去时，滚动暂停，方便客户仔细看 Logo */
.scrolling-logo-wall:hover .logo-track {
	animation-play-state: paused;
}

.logo-track img {
	/* ⚙️ Logo 高度：通过修改这里控制 Logo 的整体大小 */
	height: 30px;
	object-fit: contain;
	/* ⚙️ Logo 间距：修改这里的数值控制 Logo 之间的距离 */
	margin: 0 25px;
	/* 苹果级特效：强制黑白并降低透明度，展现高级的次级视觉层级 */
	filter: grayscale(0%) opacity(50%);
	transition: filter 0.3s ease;
}

/* 鼠标悬浮在某个特定 Logo 上时，恢复原本的彩色 */
.logo-track img:hover {
	filter: grayscale(0%) opacity(100%);
}

/* 🚇 方案二：LCD 文字滚动跑马灯核心样式 */
.lcd-ticker-tape {
	width: 100%;
	overflow: hidden;
	background-color: #fbfbfd;
	border: 1px solid #e5e5ea;
	border-radius: 8px;
	/* 胶囊状外框 */
	padding: 8px 0;
}

.ticker-track {
	display: flex;
	width: max-content;
	/* ⚙️ 滚动速度：这里是 20s，也可以自由更改 */
	animation: scroll-left 20s linear infinite;
}

.ticker-track span {
	font-size: 0.9em;
	font-weight: 500;
	color: #1d1d1f;
	/* ⚙️ 文字间距：控制不同公告之间的距离 */
	margin: 0 40px;
	white-space: nowrap;
	/* 强制文字不换行 */
}

/* ♾️ 核心动画引擎：无缝向左滑动 */
@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	/* 因为内部包含两套完全一模一样的元素，所以移动到 -50% 时，视觉上刚好完成一次完美轮回 */
	100% {
		transform: translateX(-50%);
	}
}





/* ========================================= */
/* 📝 FAQ & Quote 左右分栏布局与样式            */
/* ========================================= */

/* 1. 左右分栏 Flex 布局 */
.faq-split-layout {
	display: flex;
	align-items: flex-start;
	gap: 50px;
	/* 左右两边之间的留白距离 */
}

/* ================= 左侧：FAQ 手风琴 ================= */
.faq-left-accordion {
	flex: 1;
	/* 占据剩余的 65% 宽度 */
	min-width: 0;
	/* 防止内容撑破 Flex 容器 */
}

.faq-accordion {
	width: 100%;
}

details.faq-item>summary {
	list-style: none;
}

details.faq-item>summary::-webkit-details-marker {
	display: none;
}

details.faq-item {
	border-bottom: 1px solid #e5e5ea;
	margin-bottom: 5px;
	transition: all 0.3s ease;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px 24px 0;
	/* 左侧无内边距，保持与左侧文字对齐 */
	font-size: 1.15em;
	font-weight: 600;
	color: #1d1d1f;
	cursor: pointer;
	transition: color 0.2s ease;
}

.faq-question:hover {
	color: #0071e3;
}

.faq-icon {
	font-size: 1.3em;
	font-weight: 300;
	color: #86868b;
	transition: transform 0.3s ease;
}

details[open].faq-item .faq-icon {
	transform: rotate(45deg);
	color: #0071e3;
}

details[open].faq-item .faq-question {
	color: #0071e3;
}

.faq-answer {
	padding: 0 5px 24px 0;
	animation: slideDown 0.3s ease-in-out;
}

.faq-answer p {
	font-size: 1.0em !important;
	color: #515154 !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}

.faq-answer strong {
	color: #0071e3 !important;
	font-weight: 600;
}

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

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

/* ================= 右侧：Get a Quote 表单卡片 ================= */
.faq-right-form {
	flex: 0 0 35%;
	/* 表单占据 35% 宽度 */
	position: sticky;
	/* 开启粘性定位，左侧滚动时表单固定在屏幕上 */
	top: 80px;
}

.quote-form-card {
	background-color: #0071e3;
	/* SANDA 品牌蓝 */
	border-radius: 16px;
	padding: 35px 25px;
	box-shadow: 0 10px 30px rgba(0, 113, 227, 0.15);
}

.quote-form-card h3 {
	color: #ffffff !important;
	text-align: center;
	font-size: 1.6em !important;
	font-weight: 700 !important;
	margin-bottom: 25px !important;
}

/* 表单输入框样式重置 */
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form textarea {
	width: 100%;
	padding: 14px 15px;
	margin-bottom: 15px;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95em;
	background-color: #ffffff;
	color: #333333;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
	color: #86868b;
}

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

/* ⚙️ 禁止拖拽并固定尺寸 */
.quote-form textarea {
	resize: none;
	/* 禁止用户在右下角拖拽缩放 */
	height: 150px;
	/* ⚙️ 如果你想让留言框更扁，改小数值（如 90px）；如果想更高，改大数值（如 150px） */
}

/* 纯白色的提交按钮 */
.quote-submit-btn {
	width: 100%;
	padding: 14px 0;
	background-color: #ffffff;
	color: #0071e3;
	border: none;
	border-radius: 8px;
	font-size: 1.05em;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
}

.quote-submit-btn:hover {
	background-color: #f5f5f7;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 1. 将原本的蓝色背景替换为高通透度的浅色毛玻璃 */
#main .faq-quote-section .quote-form-card {
	background-color: rgba(255, 255, 255, 0.45) !important;
	/* 浅色半透明白底 */
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* 2. 调整标题颜色为深色 (因为底色变亮了) */
.quote-form-card h3 {
	color: #1d1d1f !important;
	text-shadow: none !important;
	/* 去除原本的白色发光 */
}

/* 3. 输入框质感优化：微透明白底，融入玻璃环境 */
.quote-form input,
.quote-form textarea {
	background-color: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	color: #1d1d1f !important;
	transition: all 0.3s ease !important;
}

/* 聚焦输入框时，亮起苹果蓝光环并变纯白 */
.quote-form input:focus,
.quote-form textarea:focus {
	background-color: rgba(255, 255, 255, 0.95) !important;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3) !important;
	border-color: #0071e3 !important;
}

/* 4. 提交按钮改为经典的苹果蓝实心按钮，提升转化引导 */
.quote-submit-btn {
	background-color: #0071e3 !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 10px rgba(0, 113, 227, 0.25) !important;
}

.quote-submit-btn:hover {
	background-color: #0077ed !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 113, 227, 0.4) !important;
}

/* ========================================= */
/* 🛡️ 方案二：表单下方信任徽章 (毛玻璃材质) */
/* ========================================= */
.quote-trust-badge {
	margin-top: 15px;
	padding: 15px;
	background-color: rgba(255, 255, 255, 0.45);
	/* 继承浅色毛玻璃材质 */
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.quote-trust-badge .trust-icon {
	font-size: 2em;
	line-height: 1;
}

.quote-trust-badge .trust-text strong {
	display: block;
	color: #1d1d1f;
	font-size: 1.05em;
	font-weight: 700;
	margin-bottom: 4px;
}

.quote-trust-badge .trust-text p {
	color: #515154 !important;
	font-size: 0.85em !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

/* ========================================= */
/* 🍏 FAQ 静态平铺网格替代方案 (Zero Layout Shift) */
/* ========================================= */

#main .faq-static-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2 列排版 */
	gap: 20px;
	margin-top: 25px;
}

.faq-static-card {
	background-color: rgba(255, 255, 255, 0.6);
	/* 极其通透的浅色玻璃底座 */
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	padding: 30px 20px;
	transition: all 0.3s ease;
}

.faq-static-card:hover {
	background-color: rgba(255, 255, 255, 0.95);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.faq-static-card h4 {
	color: #1d1d1f !important;
	font-size: 1.05em !important;
	font-weight: 700 !important;
	margin-bottom: 10px !important;
	line-height: 1.3 !important;
}

.faq-static-card p {
	color: #515154 !important;
	font-size: 0.9em !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}




/* ========================================= */
/* 📰 News & Exhibitions (40/60 展會風采佈局) */
/* ========================================= */

.exhibition-split-layout {
	display: flex;
	gap: 40px;
	/* 左右兩邊的間距 */
	align-items: stretch;
	/* 讓左右兩邊高度自動等高 */
}

/* ================= 左側 (40%)：即將到來的展會 ================= */
.exhibition-upcoming {
	flex: 0 0 35%;
	/* ⚙️ 精準鎖定左側寬度為 40% */
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 480px;
	/* 稍微加高一點，以匹配右側 3 行照片的高度 */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.exhibition-upcoming .upcoming-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.upcoming-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 100%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 40px 30px;
}

.upcoming-content {
	color: #ffffff;
}

.upcoming-content .badge {
	display: inline-block;
	background-color: #0071e3;
	color: white;
	font-size: 0.75em;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 4px;
	letter-spacing: 1px;
	margin-bottom: 15px;
}

.upcoming-content h3 {
	color: #ffffff !important;
	font-size: 1.8em !important;
	font-weight: 700 !important;
	margin-bottom: 20px !important;
	line-height: 1.2;
}

.event-details {
	list-style: none;
	padding: 0;
	margin: 0 0 25px 0;
}

.event-details li {
	font-size: 1.05em;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.9);
}

.event-details li strong {
	color: #ffffff;
	display: inline-block;
	width: 70px;
}

.book-meeting-btn {
	display: inline-block;
	background-color: #ffffff;
	color: #0071e3 !important;
	font-weight: 600;
	font-size: 1.05em;
	padding: 12px 25px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.book-meeting-btn:hover {
	background-color: #f5f5f7;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* ================= 右側 (60%)：3行4列 照片牆 ================= */
.exhibition-past {
	flex: 1;
	/* 自動佔滿剩下的 60% 空間 */
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* 防止子元素撐爆容器 */
}

.past-header {
	margin-bottom: 20px;
}

.past-header h3 {
	font-size: 1.4em !important;
	color: #1d1d1f !important;
	margin-bottom: 5px !important;
	font-weight: 600 !important;
}

.past-header p {
	color: #515154 !important;
	margin: 0 !important;
}

/* 核心：3行4列 緊湊型網格 */
.past-gallery-grid-12 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* ⚙️ 橫向強制 4 列 */
	gap: 12px;
	/* ⚙️ 圖片之間的縫隙。為了容納 12 張圖，縫隙稍微調小一點顯得更精緻 */
}

.gallery-item {
	border-radius: 8px;
	/* 圓角比左邊小一點，更像相簿 */
	overflow: hidden;
	background-color: #f5f5f7;
	position: relative;
	aspect-ratio: 4 / 3;
	/* ⚙️ 終極大招：強制所有照片變成 4:3 的橫向統一比例，絕對整齊！ */
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 確保圖片鋪滿且不變形 */
	display: block;
	transition: transform 0.4s ease;
}

.gallery-item:hover img {
	transform: scale(1.1);
	/* 懸浮時的絲滑放大 */
}


/* ========================================= */
/* 🛠️ Customization Solutions (流程 + 互動選項卡) */
/* ========================================= */

/* 1. 強制大標題靠左對齊 */
#main .customization-section h2 {
	text-align: left !important;
}

/* 2. 強制小藍條靠左對齊 (取消原本的居中屬性) */
#main .customization-section h2::after {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* 3. 強制大標題下方的灰色副標題段落也靠左對齊 (覆蓋 HTML 裡的居中樣式) */
#main .customization-section p {
	text-align: left !important;
	max-width: 100% !important;
	/* 🌟 解除宽度限制，允许文字在一行内完全舒展 */
}


/* ================= 1. 上半部分：時間軸 ================= */
.process-timeline-box {
	display: flex;
	justify-content: space-between;
	position: relative;
	background-color: #fbfbfd;
	border: 1px solid #e5e5ea;
	border-radius: 16px;
	padding: 15px 20px;
	margin-bottom: 15px;
}

/* 貫穿 5 個步驟的灰色背景連接線 */
.process-timeline-box::before {
	content: '';
	position: absolute;
	top: 40px;
	/* 控制線條的高度，使其穿過圓圈中心 */
	left: 80px;
	right: 80px;
	height: 2px;
	background-color: #e5e5ea;
	z-index: 1;
}

.timeline-step {
	position: relative;
	z-index: 2;
	/* 確保圓圈蓋在連接線的上方 */
	text-align: center;
	background-color: #fbfbfd;
	/* 擋住背後的線 */
	padding: 0 15px;
	flex: 1;
}

.step-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #0071e3;
	/* 蘋果藍 */
	color: #ffffff;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 44px;
	/* 垂直居中數字 */
	margin: 0 auto 15px auto;
	box-shadow: 0 4px 10px rgba(0, 113, 227, 0.3);
}

.timeline-step h4 {
	font-size: 1.1em !important;
	color: #1d1d1f !important;
	margin-bottom: 8px !important;
	font-weight: 600 !important;
}

.timeline-step p {
	font-size: 0.85em !important;
	color: #86868b !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

/* ================= 2. 下半部分：Tab 導航切換按鈕 ================= */
.custom-tabs-nav {
	display: flex;
	justify-content: center;
	background-color: #f5f5f7;
	/* 淺灰底座 */
	padding: 6px;
	border-radius: 12px;
	max-width: 100 !important;
	margin: 0 auto 10px auto;
}

.tab-btn {
	flex: 1;
	padding: 12px 20px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1.05em;
	font-weight: 600;
	color: #39393a;
	transition: all 0.3s ease;
}

/* 當前被選中的按鈕狀態 (高亮) */
.tab-btn.active {
	background-color: #ffffff;
	color: #1d1d1f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tab-btn:hover:not(.active) {
	color: #1d1d1f;
}

/* ================= 3. 下半部分：Tab 內容與微距卡片網格 ================= */
.tab-content {
	display: none;
	/* 默認隱藏所有內容 */
	animation: fadeInTab 0.4s ease;
	/* 切換時的淡入動畫 */
}

.tab-content.active {
	display: block;
	/* 只顯示帶有 active 類的內容 */
}

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

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

/* 網格系統：支持 5列、4列、2列 佈局 */
.craft-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
}

.craft-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

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

/* 獨立工藝卡片 (Bento Box 質感) */
.craft-item {
	background-color: #ffffff;
	border: 1px solid #e5e5ea;
	border-radius: 12px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s ease;
}

.craft-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
	border-color: #d2d2d7;
}

/* 強制正方形圖片容器 */
.craft-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fbfbfd;
	/* 圖片加載前的底色 */
	margin-bottom: 12px;
}

.craft-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 確保圖片不變形，填滿方塊 */
	transition: transform 0.4s ease;
}

.craft-item:hover .craft-img img {
	transform: scale(1.1);
	/* 懸浮放大圖片細節 */
}

.craft-item span {
	display: block;
	font-size: 0.95em;
	font-weight: 600;
	color: #333333;
}


/* ========================================= */
/* ⚓ 修复 Customization 模块 Tab 切换高度跳动 */
/* ========================================= */

/* 1. 电脑端：以最高的 Tab (2 行网格) 为基准设定最低高度 */
#main .customization-section .tab-content {
	min-height: 480px !important;
}

/* ========================================= */
/* 🎨 终极版：全模块全屏背景控制台 (Zero Bleed)  */
/* ========================================= */

/* 1. 双重保险：防止 100vw 导致网页出现横向滚动条 */
html,
body {
	overflow-x: hidden !important;
}

/* 2. 彻底清除外层容器的干扰留白，消除蓝色/红色框的缝隙 */
#main {
	padding: 0 !important;
}

/* 3. 规范所有全局模块的基础属性 */
.global-section {
	position: relative;
	z-index: 1;
	padding: 70px 0 !important;
	/* 统一模块内部的上下呼吸间距 */
	margin: 0 !important;
	/* 绝对不能有 margin，否则模块之间会漏出白缝 */
	border-top: none !important;
	/* 使用背景图时，建议去掉原本的横线 */
}

/* 4. 🌟 核心大招：让所有模块的背景统一具备「左右铺满 + 上下绝对不越界」的能力 */
.global-section::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	z-index: -1;
	background-color: #ffffff;

	/* 🌟 终极防重复与尺寸锁定机制 */
	background-repeat: no-repeat !important;
	/* 绝对禁止图片重复贴瓷砖 */
	background-size: cover !important;
	/* 强制等比例缩放并完全覆盖容器 */
	background-position: center center !important;
	/* 始终保持图片中心点在正中央 */
}


/* =======================================================
   👇 各大模块的专属背景设置区 
   你可以为任何一个模块加上图片，或者换成浅灰底色
======================================================= */


/* ========================================= */
/* 🖼️ Banner 外層區域全屏背景自定義 (Zero Bleed) */
/* ========================================= */

/* 1. 重置 Banner 外層容器，確保乾淨無干擾 */
#banner-wrapper {
	position: relative !important;
	z-index: 1 !important;
	background: #ececec !important;
	padding-top: 70px !important;  /* 把 Banner 往下推，讓出導航欄的空間 */
	padding-bottom: 0px !important;
}
/* 2. 獨立的高級背景層 */
#banner-wrapper::before {
	content: '';
	position: absolute;
	/* 嚴格鎖定上下左右邊界，絕對不會干擾到上方導航欄或下方模塊 */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;

	/* 👇 在這裡放你的 Banner 背景圖路徑 */
	/*background-image: url('../../images/Background/bg1.webp'); */
	background-size: cover;
	background-position: center;

	/* 🍎 蘋果風高級特效調節 */
	opacity: 0.55;
	/* 透明度：建議 0.1 到 0.2 之間，隱約的紋理質感最高級 */
	filter: grayscale(100%);
	/* 如果圖片顏色太亂，解開這個註釋可將其變為高級黑白灰 */
}


/* 1. About SANDA (雪山背景) */
.about-split-section::before {
	/* 替换为你的雪山图片路径 */
	/* background-image: url('../../images/Background/bg1.webp'); */
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	/* 视差滚动特效 */
	opacity: 0.75;
	/* 降低透明度保证文字清晰 */
}

/* 2. Products Category (默认浅灰底色，与上下模块区分) */
.products-category-section::before {
	background-color: #fbfbfd;
	/* 如果想加图片，取消下面两行的注释 */
	background-image: url('../../images/Background/bg2.webp');
	background-size: cover;
	opacity: 0.45;
}

/* 3. Services 服务模块 (图片背景演示) */
.services-section::before {
	/* background-image: url('../../images/Background/bg3.webp'); */
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.55;
}

/* 4. Why Partner 优势模块 (可以设置为纯白) */
.why-choose-section::before {
	/* background-image: url('../../images/Background/bg4.webp'); */
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.55;
	background-color: #ffffff;
}

/* 5. Factory Tour 工厂展示 (浅灰底色) */
.factory-tour-section::before {
	background-color: #fbfbfd;
}

/* 6. FAQ & Quote 询盘模块 */
.faq-quote-section::before {
	background-image: url('../../images/Background/bg5.webp');
	opacity: 0.85;
	background-color: #ffffff;
}

/* 7. News & Exhibitions 展会模块 */
.news-exhibition-section::before {
	opacity: 0.65;
	background-image: url('../../images/Background/bg12.webp');
	background-color: #fbfbfd;
}

/* 8. Customization 定制模块 */
.customization-section::before {
	opacity: 0.85;
	background-image: url('../../images/Background/4865.webp');
	background-color: #ffffff;
}


/* ========================================= */
/* 🌍 終極企業級 Footer (三列網格佈局)          */
/* ========================================= */
/* ========================================= */
/* 🔧 全局修復 1：導航欄高級懸浮與防遮擋       */
/* ========================================= */
#header-wrapper {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999 !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


/* ========================================= */
/* 🔧 全局修復 2：圖片防拽出與底層灰色縫隙切除   */
/* ========================================= */
img {
	-webkit-user-drag: none;
	user-drag: none;
}

body,
#page-wrapper {
	background-color: #ffffff !important;
}

#footer-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
}

/* ========================================= */
/* 🔒 終極極簡版權條 (Copyright Bar)           */
/* ========================================= */
#copyright-bar-advanced {
	position: relative;
	z-index: 1;
	background-color: transparent !important;
	padding: 25px 0;
	/* 移除左右内边距，让内部的 container 去对齐全站网格 */
	border-top: none !important;
}

#copyright-bar-advanced::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	z-index: -1;
	background-color: #ffffff !important;
	border-top: 1px solid #e5e5ea;
}

/* 🌟 将 Flex 对齐作用于内部的真实内容容器 */
.copyright-content {
	display: flex;
	justify-content: space-between;
	/* 左右两端对齐 */
	align-items: center;
	/* 垂直居中 */
	width: 100%;
}

.copy-left {
	color: #86868b;
	font-size: 0.85em;
}

.copy-right a {
	color: #86868b;
	text-decoration: none;
	font-size: 0.85em;
	margin-left: 20px;
	transition: color 0.2s;
}

.copy-right a:hover {
	color: #1d1d1f;
}



/* ========================================= */
/* 🚀 終極重構版：2x2 矩陣 Footer (完美對齊)    */
/* ========================================= */
#footer-advanced {
	position: relative;
	z-index: 1;
	background-color: transparent !important;
	padding: 70px 0 50px 0 !important;
	border-top: none !important;
}

/* 100vw 滿屏延伸的淺灰底色 */
#footer-advanced::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	z-index: -1;
	background-color: #fbfbfd !important;
	border-top: 1px solid #e5e5ea;
}

/* 核心網格引擎：2x2 矩陣 */
.footer-grid-master {
	display: grid;
	grid-template-columns: 46% 50%;
	/* 收緊中間空白 */
	justify-content: space-between;
	row-gap: 30px;
}

.footer-cell-headline {
	grid-column: 1;
	grid-row: 1;
}

.footer-cell-contact {
	grid-column: 1;
	grid-row: 2;
}

.footer-cell-locations {
	grid-column: 2;
	grid-row: 2;
}

/* 標題強制不換行與小藍條 */
.footer-main-title {
	text-align: left !important;
	font-size: 2.1em !important;
	font-weight: 700 !important;
	color: #1d1d1f !important;
	white-space: nowrap !important;
	margin: 0 !important;
	letter-spacing: -0.5px !important;
}

.footer-main-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background-color: #0071e3;
	margin-top: 15px;
	border-radius: 2px;
}

/* Logo 與雙行口號佈局 */
.footer-brand-flex {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
}

.footer-logo-img {
	max-height: 42px !important;
	width: auto !important;
	display: block;
}

.footer-slogan-wrap p {
	font-size: 0.95em !important;
	color: #515154 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-align: left !important;
	max-width: none !important;
	white-space: nowrap !important;
	/* 僅靠 HTML <br> 換行 */
}

/* 聯繫方式文字間距 */
.direct-contact-info p {
	margin-bottom: 10px !important;
	color: #1d1d1f !important;
}

.direct-contact-info a {
	color: #0071e3;
	text-decoration: none;
}

/* 二維碼佈局 */
.qr-direct-group {
	display: flex;
	gap: 15px;
}

.qr-direct-item {
	flex: 0 0 100px;
	text-align: center;
}

.qr-direct-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #e5e5ea;
	background-color: #ffffff;
	padding: 4px;
	margin-bottom: 8px;
}

.qr-direct-item span {
	font-size: 0.9em;
	font-weight: 600;
	color: #515154;
}

/* 右側標題、地圖與地址佈局 */
.footer-cell-locations .footer-title {
	margin-top: 0 !important;
	font-size: 1.25em !important;
	color: #1d1d1f !important;
	font-weight: 700 !important;
	margin-bottom: 20px !important;
}

.locations-flex {
	display: flex;
	gap: 20px;
	margin-bottom: 25px;
}

.location-item {
	flex: 1;
}

.location-item strong {
	display: block;
	color: #1d1d1f;
	font-size: 1.05em;
	margin-bottom: 8px;
}

.location-item p {
	margin: 0 !important;
	font-size: 0.95em !important;
	color: #515154 !important;
	line-height: 1.5 !important;
}

.footer-map-wide {
	width: 100%;
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e5e5ea;
}

.footer-map-wide iframe {
	width: 100%;
	height: 100%;
	border: none;
}


/* ========================================= */
/* 🚫 全局防复制：禁止网页文字被鼠标选中        */
/* ========================================= */
body {
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE10+/Edge */
	user-select: none;
	/* 标准语法 */
}

/* ⚠️ 核心保护：允许客户在表单输入框里正常选中和修改自己打的字 */
input,
textarea {
	-webkit-user-select: auto !important;
	-moz-user-select: auto !important;
	-ms-user-select: auto !important;
	user-select: auto !important;
}


/* ========================================= */
/* 🌟 苹果风浅色毛玻璃 Banner 引擎 (Glassmorphism) */
/* ========================================= */
/* ========================================= */
/* 🌟 终极苹果风：侧栏导航毛玻璃 Banner 引擎 */
/* ========================================= */

#hero-advanced-wrapper {
	position: relative;
	width: 100%;
	height: 700px;
	/* 💻 电脑端高度 */
	margin-top: 55px;
	/* 预留给顶部导航栏的空间 */
	overflow: hidden;
	background-color: #1d1d1f;
}

/* 1. 🖼️ 背景图无缝轮播 */
.hero-bg-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-bg-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
	/* 电影级高级淡入淡出 */
}

.hero-bg-slide.active {
	opacity: 1;
	z-index: 2;
}

.hero-bg-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2. 🖥️ 左侧毛玻璃主面板 */
.hero-content-container {
	position: relative;
	z-index: 10;
	height: 100%;
	display: flex;
	align-items: center;
	/* 垂直居中 */
}

.hero-glass-panel {
	background: rgba(255, 255, 255, 0.85);
	/* 浅色高级半透明 */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 24px;
	width: 460px;
	/* 左侧面板的固定宽度 */
	padding: 40px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
}

/* 3. A区：侧边导航条 */
.hero-side-nav {
	list-style: none;
	margin: 0 0 35px 0;
	/* 与下方文字拉开距离 */
	padding: 0 0 35px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	/* 极淡的分割线 */
}

.hero-nav-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nav-progress-bar {
	width: 4px;
	height: 0px;
	/* 默认没有高度 */
	background-color: #0071e3;
	border-radius: 2px;
	margin-right: 15px;
	transition: height 0.3s ease;
}

.nav-text {
	font-size: 1.05em;
	font-weight: 500;
	color: #86868b;
	/* 未激活是灰色 */
	transition: all 0.3s ease;
}

/* 导航激活状态 */
.hero-nav-item.active .nav-progress-bar {
	height: 20px;
}

.hero-nav-item.active .nav-text {
	color: #1d1d1f;
	/* 激活变为黑色 */
	font-weight: 700;
	transform: translateX(5px);
	/* 字体向右微微移动的交互感 */
}

.hero-nav-item:hover:not(.active) .nav-text {
	color: #515154;
}

/* 4. B区：动态文字轮播 */
.hero-text-track {
	position: relative;
	height: 180px;
	/* 固定高度防止跳动 */
}

.hero-text-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: translateY(15px);
	/* 默认偏下 */
	transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
	pointer-events: none;
	/* 隐藏时不阻挡点击 */
}

.hero-text-item.active {
	opacity: 1;
	transform: translateY(0);
	/* 丝滑向上滑入 */
	pointer-events: auto;
}

.hero-title {
	font-size: 2.8em !important;
	font-weight: 800 !important;
	color: #1d1d1f !important;
	line-height: 1.15 !important;
	letter-spacing: -1.5px !important;
	margin-bottom: 15px !important;
	border: none !important;
}

.hero-title::after {
	display: none !important;
}

/* 清除小蓝条 */
.hero-desc {
	font-size: 1.05em !important;
	color: #515154 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* 5. C区：全局强引导按钮 */
.hero-global-action {
	margin-top: 10px;
}

.hero-global-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #0071e3;
	color: #ffffff !important;
	padding: 16px 25px;
	border-radius: 12px;
	/* 苹果圆角 */
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 600;
	transition: all 0.3s ease;
}

.hero-global-btn:hover {
	background-color: #0077ed;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 113, 227, 0.35);
	/* 蓝色发光阴影 */
}

/* 6. 📱 手机端逻辑：隐藏导航，启用圆点指示器 */
.hero-mobile-dots {
	display: none;
}

/* 电脑端隐藏圆点 */



/* --- 标题极致优化 --- */
#main section h2 {
	line-height: 1.1 !important;
	/* 压缩行高，产生压迫感和高级感 */
	letter-spacing: -0.02em !important;
	/* 苹果精细字距 */
	font-weight: 700 !important;
	text-align: left !important;
}

/* 优化保留的“小蓝条” */
#main section h2::after {
	content: '';
	display: block;

	height: 4px;
	background-color: #0071e3;
	margin-top: 10px;
	/* 随着行高压缩，间距也同步微调 */
	border-radius: 2px;
}

/* --- 物理光影取代边框 --- */
.stat-card,
.prod-card,
.craft-item,
.text-card {
	border: none !important;
	/* 彻底去除边框 */
	background-color: #ffffff !important;
	/* 确保卡片是纯白 */
	/* 引用 DESIGN.md 的柔和弥散阴影 */
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 24px 0px !important;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 悬浮时阴影加深，产生上浮感 */
.stat-card:hover,
.prod-card:hover,
.craft-item:hover,
.text-card:hover {
	transform: translateY(-5px);
	box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 40px 0px !important;
}

/* 部分模块利用色差区分 (如背景是浅灰时) */
.products-category-section::before {
	background-color: #f5f5f7 !important;
	/* 苹果标准浅灰背景 */
}

/* ========================================= */
/* 🍏 Core Services 恢復淺色模式與陰影優化      */
/* ========================================= */

/* 1. 強制恢復背景為淺色 (與 About 模塊呼應) */
#main .services-section {
	background-color: #ffffff !important;
}

/* 2. 重置全屏背景偽元素為淺灰色 (產生層級感) */
#main .services-section::before {
	background-color: #f5f5f7 !important;
	/* 蘋果標準淺灰，與白色卡片形成對比 */
	background-image: none !important;
}

/* 3. 標題與副標題恢復深色 */
#main .services-section h2 {
	color: #1d1d1f !important;
}

#main .services-section .section-subtitle {
	color: #86868b !important;
}

/* 4. 🌟 核心：移除卡片邊框，改用物理陰影並防止切斷 */
#main .services-section .bento-grid-2rows {
	overflow: visible !important;
	/* 確保整個網格區域不切斷陰影 */
	padding: 25px 0;
	/* 留出陰影擴散的空間 */
}

.services-section .bento-card {
	background-color: #ffffff !important;
	border: none !important;
	/* 徹底取消邊框 */
	overflow: visible !important;
	/* 釋放卡片陰影 */

	/* 引用規範中的柔和彌散陰影 */
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 24px 0px !important;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 懸浮交互：上浮感 */
.services-section .bento-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 40px 0px !important;
}

/* 5. 修正卡片內文字顏色 */
.services-section .bento-text h3 {
	color: #1d1d1f !important;
}

.services-section .bento-text p {
	color: #515154 !important;
}

/* 6. 遮罩卡片 (Bento Overlay) 的淺色適配 */
.services-section .bento-overlay {
	background-color: #000000 !important;
	/* 遮罩卡片保持黑底以凸顯圖片文字 */
}

.services-section .bento-overlay .overlay-content h3 {
	color: #ffffff !important;
}

/* ========================================= */
/* 🔧 修复 Core Services 图片悬浮放大溢出圆角问题 */
/* ========================================= */

#main .services-section .bento-card {
	/* 核心修复：重新开启隐藏，像剪刀一样沿着圆角切掉放大的图片边缘 */
	overflow: hidden !important;

	/* 强制锁定圆角，确保切出来的边缘是平滑的苹果风弧度 */
	border-radius: 14px !important;
}

/* ========================================= */
/* 🧪 測試版：Products 模塊毛玻璃背景 (Glassmorphism) */
/* ========================================= */

/* 1. 先把外層的背景圖透明度調高一點，這樣毛玻璃透出來的紋理才好看 */
.products-category-section::before {
	opacity: 0.8 !important;
}

/* 2. 🌟 核心：將產品卡片改造為可控的毛玻璃 */
#main .products-category-section .prod-card {
	/* 👇 【透明度控制台】：修改 0.65 來調節透明度 (0 是完全透明，1 是純白) */
	background-color: rgba(255, 255, 255, 0.65) !important;

	/* 👇 【模糊度控制台】：修改 blur(20px) 裡的數值 (數值越大，背景越模糊) */
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;

	/* 蘋果風毛玻璃邊緣微光與彌散陰影 */
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}


/* 5. 稍微加深文字顏色，確保在半透明玻璃上的可讀性 */
#main .products-category-section .prod-id {
	color: #333333 !important;
	font-weight: 600 !important;
}

/* ========================================= */
/* 🍏 左侧分类菜单栏 毛玻璃化升级 */
/* ========================================= */

/* 1. 左侧外框毛玻璃特效 */
#main .products-category-section .category-sidebar {
	background-color: rgba(255, 255, 255, 0.55) !important;
	/* 半透明白底 */
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 2. 抽空列表按钮的原有底色，让玻璃质感透出来 */
#main .products-category-section .category-menu li {
	background-color: transparent !important;
}

/* 3. 悬浮与激活时的微光交互 */
#main .products-category-section .category-menu li:hover {
	background-color: rgba(255, 255, 255, 0.4) !important;
	/* 鼠标放上去微微泛白 */
}

#main .products-category-section .category-menu li.active {
	background-color: rgba(255, 255, 255, 0.8) !important;
	/* 选中时变成不透明白，强调层级 */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 移除圖片包裝層的底色 */
#main .products-category-section .prod-img-wrapper {
	background-color: transparent !important;
}

/* 降低卡片底色透明度，讓毛玻璃質感更通透 */
#main .products-category-section .prod-card {
	background-color: rgba(255, 255, 255, 0.6) !important;
	/* 從 0.65 降到 0.3 */
}

/* ========================================= */
/* 🍏 Products 模塊細節：毛玻璃特效升級        */
/* ========================================= */

/* 1. 左下角場景圖的文字遮罩 (Mood Overlay) 升級為暗色毛玻璃 */
#main .products-category-section .mood-overlay {
	/* 取消原本的黑色漸變，改為半透明暗色底 */
	background: rgba(0, 0, 0, 0.4) !important;

	/* 蘋果標準毛玻璃濾鏡 */
	backdrop-filter: saturate(180%) blur(15px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(15px) !important;

	/* 頂部加入極細的白色高光邊緣，模擬真實玻璃切面 */
	border-top: 1px solid rgba(255, 255, 255, 0.25) !important;

	/* 稍微增加內邊距，讓毛玻璃區域顯得更舒展 */
	padding: 16px 15px !important;
}

/* 確保毛玻璃上的文字絕對清晰 */
#main .products-category-section .mood-overlay span {
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 2. 底部 Get Catalog 橫幅 (CTA Banner) 升級為淺色毛玻璃 */
#main .products-category-section .cta-capsule-banner {
	/* 取消原本的實心淺灰，改為半透明白底 */
	background-color: rgba(255, 255, 255, 0.55) !important;

	/* 蘋果標準毛玻璃濾鏡 */
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;

	/* 邊框改為半透明白色高光 */
	border: 1px solid rgba(255, 255, 255, 0.7) !important;

	/* 增加柔和的彌散陰影，讓橫幅浮起來 */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;

	/* 確保過渡動畫絲滑 */
	transition: all 0.3s ease !important;
}

/* 鼠標懸浮在底部橫幅時，微微提亮並上浮 */
#main .products-category-section .cta-capsule-banner:hover {
	background-color: rgba(255, 255, 255, 0.7) !important;
	transform: translateY(-3px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================= */
/* 🔧 修复：左下角场景图的底色与圆角溢出 Bug     */
/* ========================================= */

/* 1. 将场景相框的灰色底座替换为“浅色毛玻璃” */
#main .products-category-section .category-mood-box {
	background-color: rgba(255, 255, 255, 0.2) !important;
	/* 极淡的透明白 */
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;

	/* 强制重申圆角并开启 GPU 硬件加速，强行裁切内部的毛玻璃溢出 */
	border-radius: 8px !important;
	overflow: hidden !important;
	transform: translateZ(0) !important;
}

/* 2. 给底部的暗色遮罩强制加上底部圆角，双重保险防止直角刺出 */
#main .products-category-section .mood-overlay {
	border-radius: 0 0 8px 8px !important;
	/* 左上、右上为0，左下、右下为8px */
}

/* ========================================= */
/* 🔧 修复毛玻璃切换闪烁 Bug (GPU 渲染层修复) */
/* ========================================= */

/* 1. 覆盖原有的网格淡入动画：彻底删除 transform 位移，仅保留透明度渐变 */
@keyframes fadeInGrid {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 2. 限制产品卡片的过渡效果，强制开启 GPU 硬件加速 */
#main .products-category-section .prod-card {
	/* 不要用 transition: all，明确只让缩放和阴影产生动画，保护毛玻璃不受干扰 */
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;

	/* 强制开启 3D 硬件加速，让浏览器提前渲染好毛玻璃涂层 */
	transform: translateZ(0);
	will-change: transform, opacity;
}


/* ========================================= */
/* 🛡️ 终极修复：绕过浏览器 GPU 毛玻璃闪烁 Bug */
/* ========================================= */

/* 1. 斩断病根：彻底移除导致毛玻璃失效的父容器网格动画 */
#main .products-category-section .product-grid-2x3 {
	animation: none !important;
}

/* 2. 给毛玻璃卡片穿上终极防闪烁护甲 (强制独立 GPU 渲染层) */
#main .products-category-section .prod-card {
	-webkit-backface-visibility: hidden !important;
	backface-visibility: hidden !important;
	transform: translate3d(0, 0, 0) !important;
	/* 强制开启 3D 硬件加速缓存 */
}

/* 3. 🍎 苹果级平替动画：玻璃框瞬间就位，里面的图片和文字柔和浮现 */
#main .products-category-section .product-grid-2x3.active-grid .prod-img-wrapper,
#main .products-category-section .product-grid-2x3.active-grid .prod-id {
	animation: innerSoftLoad 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
	opacity: 0;
	/* 初始隐藏，等待动画唤醒 */
}

/* 定义内部元素专属的丝滑载入动画 */
@keyframes innerSoftLoad {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
		/* 微微偏下且缩小 */
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		/* 归位 */
	}
}

/* ========================================= */
/* 🍏 Customization 定制模块：全系统毛玻璃升级 */
/* ========================================= */

/* 1. 顶部时间轴面板毛玻璃化 */
#main .customization-section .process-timeline-box {
	background-color: rgba(255, 255, 255, 0.55) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* 修复时间轴上的圆圈和文字底色，使其完全融入毛玻璃 */
#main .customization-section .timeline-step {
	background-color: transparent !important;
	/* 抽空原本的白色底 */
}

#main .customization-section .process-timeline-box::before {
	background-color: rgba(0, 0, 0, 0.1) !important;
	/* 将贯穿的连接线稍微改淡 */
}

/* 2. 中间 Tab 导航按钮底座毛玻璃化 */
#main .customization-section .custom-tabs-nav {
	background-color: rgba(255, 255, 255, 0.4) !important;
	backdrop-filter: saturate(180%) blur(15px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(15px) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 3. 🌟 下方工艺卡片的毛玻璃升级 */
#main .customization-section .craft-item {
	background-color: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* 4. 🎯 终极解法：图片容器的“画框台座”特效 (包容一切图片格式) */
#main .customization-section .craft-img {
	/* 垫一层柔和的白色台座，用来稀释没抠图的白底，或作为透明图的背景 */
	background-color: rgba(255, 255, 255, 0.7) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	/* 增加一个极细的内发光边框，无论里面放什么图，都有一个统一、精致的边界感 */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* 确保内部图片充满台座 */
#main .customization-section .craft-img img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
}

/* 加深文字颜色，确保在半透明底上绝对清晰 */
#main .customization-section .craft-item span {
	color: #1d1d1f !important;
	margin-top: 5px !important;
	font-weight: 600 !important;
}

/* ========================================= */
/* 🛡️ 修复：Customization 定制模块毛玻璃闪烁 Bug */
/* ========================================= */

/* 1. 斩断病根：移除 Tab 切换时会导致毛玻璃失效的位移动画 */
@keyframes fadeInTab {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 2. 给工艺卡片穿上防闪烁护甲，强制开启独立 3D 硬件加速缓存 */
#main .customization-section .craft-item {
	/* 废除 transition: all，明确只让缩放和阴影产生动画，保护毛玻璃 */
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: hidden !important;
	transform: translate3d(0, 0, 0) !important;
}

/* 3. 🍎 苹果级平替动画：让玻璃框瞬间就位，框内的图片和文字再柔和向上浮现 */
#main .customization-section .tab-content.active .craft-img,
#main .customization-section .tab-content.active span {
	animation: innerSoftLoad 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
	opacity: 0;
	/* 初始隐藏 */
}

/* 错开一点点延迟，让文字比图片晚一点点浮现，质感更好 (瀑布流加载) */
#main .customization-section .tab-content.active span {
	animation-delay: 0.05s;
}

/* ========================================= */
/* 🗡️ 終極補刀：徹底移除 Customization 父容器動畫 */
/* ========================================= */

/* 強制關閉 Tab 內容切換時的父級動畫，防止其干擾子元素的毛玻璃渲染 */
#main .customization-section .tab-content {
	animation: none !important;
	transition: none !important;
}

/* 確保切換時，卡片底座瞬間 100% 顯示，消除降透明度的過渡期 */
#main .customization-section .tab-content.active {
	opacity: 1 !important;
}

/* ========================================= */
/* 原生輪播圖 Apple 視覺風格升級補丁         */
/* ========================================= */

/* 1. 輪播圖主容器：去除死板相框，改為電影級大圓角與柔和陰影 */
#banner-slider {
	height: 500px !important;
	/* 增加高度，營造電影感 (Cinematic feel) */
	border-radius: 24px !important;
	/* 蘋果風大圓角 */
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
	/* 柔和的彌散外陰影 */
	border: none !important;
	/* 徹底清除原本的白色內邊框 */
}

/* 2. 圖片底層漸變：確保文字在任何亮度的圖片上都絕對清晰 */
#banner-slider .slide::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30%;
	/* 漸變覆蓋下半部分 */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
	pointer-events: none;
	/* 不阻擋點擊 */
	z-index: 1;
}

/* 3. 懸浮文字：去除藍色方塊，採用極致排版 (Typography) */
#banner-slider .slide-text {
	background: transparent !important;
	/* 去除老派的藍色半透明框 */
	font-size: 2.2em !important;
	/* 字號放大，增加衝擊力 */
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	/* 蘋果經典負字距，讓標題更緊湊 */
	text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
	/* 增強立體感 */
	bottom: 70px !important;
	width: 90% !important;
	white-space: normal !important;
	/* 允許文字自動換行 */
	line-height: 1.1 !important;
	z-index: 2;
}

/* 4. 左右控制按鈕：升級為圓形毛玻璃 (Media Controls) */
#banner-slider .slide-btn {
	width: 54px !important;
	height: 54px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	/* 完美圓形 */
	background: rgba(31, 26, 26, 0.15) !important;
	/* 極淡的白色 */
	backdrop-filter: saturate(180%) blur(15px) !important;
	/* 蘋果標準毛玻璃 */
	-webkit-backdrop-filter: saturate(180%) blur(15px) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2em !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.3s ease !important;
}

/* 按鈕懸浮交互 */
#banner-slider .slide-btn:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-50%) scale(1.08) !important;
	/* 輕微放大 */
}

/* 5. 底部指示圓點：升級為蘋果動態膠囊 (Pill-shaped dots) */
#banner-slider .slider-dots {
	bottom: 25px !important;
	z-index: 10 !important;
}

#banner-slider .dot {
	width: 10px !important;
	height: 10px !important;
	background-color: rgba(255, 255, 255, 0.3) !important;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	/* 絲滑過渡 */
	margin: 0 6px !important;
}

/* 當前激活的圓點會自動拉長變成膠囊狀 */
#banner-slider .dot.active {
	width: 32px !important;
	border-radius: 5px !important;
	background-color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}



/* =======================================================
   轮播图全屏宽度开关 (Full-Width Banner Switch)
   效果：高度保持 500px 不变，宽度强制突破 1200px 限制，撑满整个屏幕。
======================================================= */

#banner-slider {
	width: 97vw !important;
	/*vw 代表 Viewport Width（視口寬度）*/
	height: 37vw !important;
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;

	border-radius: 5px !important;
	box-shadow: none !important;
}

/* ========================================= */
/* 🧩 Footer 左下角：扩展组件通用样式          */
/* ========================================= */
.footer-widget-box {
	margin-top: 15px;
	border-top: 1px solid #e5e5ea;
	padding-top: 20px;
	max-width: 380px;
}

.footer-widget-box .widget-title {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	color: #86868b;
	margin-bottom: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* 方案 1：下载按钮样式 */
.download-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dl-btn {
	font-size: 0.9em;
	color: #1d1d1f;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dl-btn:hover {
	color: #0071e3;
}

/* 方案 2：社交媒体样式 */
.social-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.social-links a {
	font-size: 0.95em;
	color: #515154;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
}

.social-links a:hover {
	color: #0071e3;
}

/* 方案 3：寄语样式 */
.founder-note p {
	font-family: "Georgia", serif;
	font-size: 1.15em !important;
	font-style: italic;
	color: #515154 !important;
	line-height: 1.5 !important;
	margin-bottom: 5px !important;
}

.founder-note .signature {
	font-family: "Georgia", serif;
	font-size: 1.1em;
	color: #1d1d1f;
	font-weight: 700;
}


/* 方案 4 & 5：文字说明样式 */
.esg-pledge p,
.timezones p {
	font-size: 0.9em !important;
	color: #515154 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}