:root {
--green-900:#13301e;
--green-800:#1d4029;
--green-700:#2b5a3a;
--green-600:#3a7249;
--green-500:#4d8a5c;
--green-200:#c6e0cc;
--green-100:#e4f0e6;
--green-50:#f1f8f2;
--cream:#fbfaf5;
--sand:#f4f0e5;
--gold:#c8a95f;
--gold-dark:#a8873f;
--ink:#1e2a23;
--ink-2:#4a5a50;
--ink-3:#7b8c82;
--line:rgba(30,42,35,.10);
--shadow:0 10px 30px rgba(20,48,31,.09);
--shadow-lg:0 24px 60px rgba(20,48,31,.14);
--radius:18px;
--radius-lg:28px
}
* {
	box-sizing: border-box
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth
}
body {
	margin: 0;
	font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink);
	background: var(--cream);
	overflow-x: hidden
}
a {
	color: inherit;
	text-decoration: none
}
button, input, select, textarea {
	font: inherit
}
.container {
	max-width: 1200px
}
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(251,250,245,.96);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line)
}
.header-inner {
	min-height: 78px
}
.logo {
	display: flex;
	align-items: center;
	gap: 10px
}
.logo-image {
	width: 48px;
	height: 48px
}
.logo-image img {
	width: 100%;
	height: 100%;
	object-fit: contain
}
.logo-text strong {
	display: block;
	font-family: "Noto Serif TC", serif;
	font-size: 1.5rem;
	color: #e57400;
	line-height: 1.2
}
.logo-text small {
	display: block;
	font-size: .88rem;
	color: #dd0058;
	letter-spacing: .14em
}
.nav-desktop a {
	padding: .55em .7em;
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 1rem;
	margin: 0 .28em
}
.nav-desktop a:hover, .nav-desktop a.active {
	background: #ffebae;
	color: var(--green-700)
}
.btn {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .04em
}
.btn-primary {
	background: var(--green-700);
	border-color: var(--green-700)
}
.btn-primary:hover {
	background: var(--green-800);
	border-color: var(--green-800)
}
.btn-outline-primary {
	color: var(--green-700);
	border-color: var(--green-600)
}
.btn-outline-primary:hover {
	background: var(--green-700);
	border-color: var(--green-700)
}
.btn-gold {
	background: var(--gold);
	border-color: var(--gold);
	color: #3a2c0c
}
.btn-gold:hover {
	background: var(--gold-dark);
	border-color: var(--gold-dark);
	color: #fff
}
.topbar {
	background: var(--green-900);
	color: rgba(255,255,255,.82);
	font-size: .78rem
}
.topbar a:hover {
	color: var(--gold)
}
.mobile-nav {
	display: none
}
.page-hero {
	padding: 40px 0;
	background-image:url(../images/456.png);
	color: #fff;
	position: relative;
	overflow: hidden
}
.page-hero:after {
	content: "";
	position: absolute;
	inset: auto -10% -55% -10%;
	height: 10px;
	background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.18), transparent 65%)
}
.page-hero h1 {

	font-size: 1.2rem;
	color:hsla(121,100%,12%,1.00);
	margin: 0 0 .2em;
	letter-spacing: .08em
}
.page-hero p {
	max-width: 760px;
	color: rgba(255,255,255,.8);
	margin: 0
}
.eyebrow {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--green-600);
	margin-bottom: 12px
}
.eyebrow:before {
	content: "";
	width: 20px;
	height: 4px;
	background: #B36900}
.section {
	padding: 20px 0
}
.section-sand {
	background: linear-gradient(180deg, #fbf8ed, #f5f0e1)
}
.section-green {
	background: linear-gradient(180deg, var(--green-50), #fff)
}
.section-dark {
	background: linear-gradient(160deg, var(--green-900), var(--green-800));
	color: #fff
}
.section-title {
	font-family: "Noto Serif TC", serif;
	color: #ffb100;
	font-size: clamp(1.5rem, 2.4vw, 1.6rem);
	font-weight: 700
}
.section-dark .section-title {
	color: #fff
}
.section-sub {
	color: var(--ink-2);
	max-width: 720px
}
.section-dark .section-sub {
	color: rgba(255,255,255,.75)
}
.card-s {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #ffefd5;
	box-shadow: 0 4px 14px rgba(20,48,31,.05);
	transition: .3s ease
}
.card-s:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow)
}
.stat-card {
	padding: 20px;
	text-align: center
}
.stat-card strong {
	display: block;
	color: var(--green-700);
	font-family: "Noto Serif TC", serif;
	font-size: 1.7rem;
	line-height: 1.2
}
.stat-card span {
	font-size: .8rem;
	color: var(--ink-3)
}
.timeline {
	position: relative
}
.timeline:before {
	content: "";
	position: absolute;
	left: 88px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--green-200)
}
.tl-item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 42px;
	padding: 15px 0;
	position: relative
}
.tl-year {
	text-align: right;
	color: var(--green-700);
	font-weight: 700
}
.tl-body {
	position: relative;
	padding-left: 20px
}
.tl-body:before {
	content: "";
	position: absolute;
	left: -1px;
	top: 9px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 3px solid var(--green-600);
	background: #fff
}
.origin-visual {
	height: 160px;
	background: linear-gradient(160deg, #e4f0e6, #92b89a);
	position: relative;
	overflow: hidden
}
.origin-visual:after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 70%;

}
.origin-alt {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 2;
	background: rgba(255,255,255,.92);
	padding: .2em .75em;
	border-radius: 999px;
	font-size: .75rem;
	color: var(--green-700);
	font-weight: 700
}
.origin-body {
	padding: 22px
}
.origin-body h3 {
	font-family: "Noto Serif TC", serif;
	font-size: 1.2rem;
	color: var(--green-900)
}
.chip {
	display: inline-block;
	padding: .25em .75em;
	border-radius: 999px;
	background: var(--green-50);
	border: 1px solid var(--green-100);
	color: var(--green-700);
	font-size: .74rem;
	margin: 0 .3em .3em 0
}
.chip.gold {
	background: #fdf7e8;
	border-color: #f0e2c0;
	color: var(--gold-dark)
}
.acc {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
	margin-bottom: 12px
}
.acc summary {
	padding: 18px 22px;
	font-family: "Noto Serif TC", serif;
	font-weight: 600;
	cursor: pointer
}
.acc-content {
	padding: 0 22px 22px;
	color: var(--ink-2)
}
.craft-wrap {
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 28px
}
.craft-list {
	max-height: 560px;
	overflow: auto
}
.craft-item {
	display: flex;
	gap: 12px;
	width: 100%;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid transparent;
	text-align: left;
	color: var(--ink-2);
	background: transparent
}
.craft-item.active, .craft-item:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
	border-color: rgba(255,255,255,.12)
}
.craft-num {
	min-width: 30px;
	color: var(--gold);
	font-weight: 700
}
.craft-panel {
	background: #fff;
	color: var(--ink);
	padding: 34px;
	border-radius: var(--radius-lg);
	min-height: 260px
}
.craft-panel h3 {
	font-family: "Noto Serif TC", serif;
	color: var(--green-900)
}
.meta-box {
	background: var(--green-50);
	border: 1px solid var(--green-100);
	border-radius: 12px;
	padding: 14px
}
.meta-box small {
	display: block;
	color: var(--green-600);
	font-weight: 700
}
.product-card {
	height: 100%;
	overflow: hidden
}
.pc-visual {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative
}
.pc-code {
	position: absolute;
	left: 14px;
	top: 14px;
	background: rgba(255,255,255,.92);
	padding: .2em .7em;
	border-radius: 999px;
	font-size: .7rem;
	color: var(--green-700);
	font-weight: 700
}
.pc-body {
	padding: 22px
}
.pc-body h3 {
	font-family: "Noto Serif TC", serif;
	font-size: 1.15rem;
	color: var(--green-900)
}
.article-card {
	height: 100%;
	overflow: hidden
}
.ac-visual {
	height: 135px;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	background: linear-gradient(160deg, #d9ecd9, #8fbb9a)
}
.ac-cat {
	background: #fff;
	padding: .2em .7em;
	border-radius: 999px;
	font-size: .72rem;
	color: var(--green-700)
}
.store-item {
	padding: 22px;
	text-align: center;
	height: 100%
}
.si-icon {
	font-size: 1.6rem;
	margin-bottom: 6px
}
.tool-card {
	padding: 28px
}
.result-box {
	margin-top: 18px;
	padding: 18px;
	border-radius: 14px;
	background: linear-gradient(150deg, var(--green-50), #fff);
	border: 1px dashed var(--green-200)
}
.timer {
	font-family: "Noto Serif TC", serif;
	font-size: 2.1rem;
	text-align: center;
	color: var(--green-800)
}
.timer-bar {
	height: 6px;
	background: var(--green-100);
	border-radius: 999px;
	overflow: hidden
}
.timer-bar i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--green-500), var(--gold));
	width: 100%
}
.news-item {
	padding: 18px 20px
}
.news-date {
	font-family: "Noto Serif TC", serif;
	color: var(--green-600);
	font-weight: 700
}
.form-card {
	padding: 30px
}
.footer {
	background: var(--green-900);
	color: rgba(255,255,255,.72);
	padding-top: 65px
}
.footer h4 {
	color: #ffa700;
	font-family: "Noto Serif TC", serif;
	font-size: 1.2rem
}
.footer a:hover {
	color: var(--gold)
}
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 18px 0;
	margin-top: 40px;
	font-size: .76rem
}
.bottom-nav {
	display: none
}
.toast-wrap {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2000
}
.modal-iframe {
	width: 100%;
	height: 72vh;
	border: 0;
	background: #fff;
	border-radius: 18px
}
.quote-badge {
	min-width: 20px
}
.inquiry-list {
	display: grid;
	gap: 10px
}
.empty-box {
	padding: 40px;
	text-align: center;
	color: var(--ink-3);
	border: 1px dashed var(--line);
	border-radius: 14px
}
.hero-home {

}
.hero-home:after {
	content: "";
	position: absolute;
	inset: 0;

}
.hero-content {
	position: relative;
	z-index: 2;
	min-height: 610px;
	display: flex;
	align-items: center
}
.hero-content h1 {
	font-family: "Noto Serif TC", serif;
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	letter-spacing: .08em;
	text-shadow: 0 4px 24px rgba(0,0,0,.3)
}
.hero-content .lead {
	color: #fff4c9;
	letter-spacing: .14em
}
.floating-badge {
	position: absolute;
	right: 5%;
	bottom: 30px;
	z-index: 3;
	background: rgba(255,255,255,.88);
	color: var(--green-900);
	padding: 14px 18px;
	border-radius: 18px;
	box-shadow: var(--shadow);
	text-align: right
}
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: .65s ease
}
.reveal.in {
	opacity: 1;
	transform: none
}

@media(max-width:991px) {
.nav-desktop {
	display: none!important
}
.hamburger {
	display: block
}
.mobile-nav {
	position: fixed;
	inset: 0;
	background: linear-gradient(170deg, var(--green-900), var(--green-800));
	z-index: 1025;
	padding: 110px 24px 30px;
	transform: translateY(-100%);
	transition: .35s ease;
	overflow: auto
}
.mobile-nav.open {
	display: block;
	transform: none
}
.mobile-nav a {
	display: flex;
	justify-content: space-between;
	color: #fff;
	padding: 14px 6px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	font-family: "Noto Serif TC", serif
}
.craft-wrap {
	grid-template-columns: 1fr
}
.floating-badge {
	left: 18px;
	right: 18px;
	text-align: center
}
.hero-home, .hero-content {
	min-height: 20px
}
}

@media(max-width:767px) {
body {
	font-size: 15px;
	padding-bottom: 72px
}
.topbar {
	display: none
}
.section {
	padding: 28px 0
}
.page-hero {
	padding: 10px 0
}
.page-hero h1 {
	font-size: 1.2rem
}
.timeline:before {
	left: 60px
}
.tl-item {
	grid-template-columns: 50px 1fr;
	gap: 22px
}
.form-card {
	padding: 20px
}
.hero-content {
	padding-top: 45px;
	padding-bottom: 115px
}
.hero-content h1 {
	font-size: clamp(2.4rem, 12vw, 3.4rem)
}
.bottom-nav {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1020;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	padding: 6px 5px env(safe-area-inset-bottom)
}
.bottom-nav a {
	flex: 1;
	text-align: center;
	font-size: .7rem;
	color: var(--ink-3);
	padding: 5px
}
.bottom-nav a.active {
	color: var(--green-700);
	font-weight: 700
}
.bottom-nav i {
	display: block;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.2
}
.modal-iframe {
	height: 78vh
}
}

.text-white01 { color:hsla(359,100%,40%,1.00);
}