﻿html,body {
	margin:0;
	padding:0;
}
/* 繁體切換防閃爍：隱藏整個 body 包含 header，僅保留 Logo 圖片 */
html.lang-converting body {
	visibility:hidden;
}
html.lang-converting .logo {
	visibility:visible;  /* Logo 背景圖保持可見，使用者知道頁面在載入 */
}
*, *::before, *::after {  box-sizing:border-box; margin:0; padding:0; }
:root {
	--green-dark:#0C1F14;
	--green-deep:#08321e;
	--green-mid:#0e3d29;
	--green-light:#3E7A58;
	--cyan-blue-light:#9efed5;
	--gold:#fac882;
	--gold-light:#dcb96e;
	--gold-dark:#a68361;
	--gold-pale:#bea98b;
	--gold-chroma:#b18653;
	--gold-bright:#f5e9bf;
	--gold-deep:#8c6428;
	--cream:		#F5EFE0;
	--off-white:	#FAF7F2;
	--text-white:	#FFFFFF;
	--text-deep:	#111111;
	--text-dark:	#3e3e3e;
	--text-gray:	#969696;
	--text-mid:	#777777;
	--text-muted:	#6c5648;
	--black-bg:rgba(0,0,0,0.85);
	--white-bg:#FFFFFF;
	--red-deep:#8f200e;
	--shadow:0 20px 20px -18px rgba(60, 50, 30, 0.15);
	--shadow-box:0 0 20px 0 rgba(60, 50, 30, 0.15);
	--card:#FFFFFF;
}
html {  scroll-behavior:smooth; }
main { display:block; }
body {
	font:62.5%/1 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
            text-size-adjust:100%;
	color:var(--text-dark);
}
/* ── SCROLLBAR ── */
/*::-webkit-scrollbar {  width:6px; }
::-webkit-scrollbar-track {  background:var(--green-dark); }
::-webkit-scrollbar-thumb {  background:var(--gold); border-radius:3px; }*/

a {
	color:var(--gold-pale);
	text-decoration:none;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
a:hover,
a:focus {
	color:var(--gold-light);
	text-decoration:none;	
}
a,
button,
textarea,
select,
input { 
    -webkit-appearance:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-border-radius:0;
       -moz-border-radius:0;
            border-radius:0;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
img {
	max-width:100%;
	height:auto;
    border:none;
    vertical-align:middle;
}
sub,
sup { 
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup { 
    top:-0.5em;
}
sub { 
    bottom:-0.25em;
}
/** Layout **/
#wrapper {
	width:100%;
	margin:0 auto;
}
#wrapper:has(.homeMain) {
	position:relative;
	overflow:hidden;
}
.noscript {
	display:block;
	width:100%;
	font-size:1.5em;
	line-height:120%;
	padding:20px 0px;
	margin:0 auto;
	box-sizing:border-box;
	background:#ffe5e6;
}
.hide-panel { 
    display:none !important;
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.container { 
    width:calc(100% - 60px);
    margin:0 auto;
}
@media screen and (max-width:990px) { 
    .pc-mode { 
        display:none !important;
    }
}
@media screen and (max-width:560px) { 
    .container { 
        width:calc(100% - 40px);
    }
}
@media screen and (min-width:991px) { 
    .sp-mode { display:none !important; }
}
@media screen and (min-width:1720px) { 
    .container { 
        max-width:1680px;
    }
}
/** header **/
#header {
	position:relative;
	width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	background:#FFF;
	z-index:999;
}
#header .container {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#header.flex {
	position:fixed;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.3);
	   -moz-box-shadow:0 5px 10px rgba(0,0,0,0.3);
			box-shadow:0 5px 10px rgba(0,0,0,0.3);
} 
@media screen and (max-width:990px) {
	#header { min-height:135px; }
	#header.flex { min-height:77px; }
}
@media screen and (min-width:991px) {
	#header { min-height:140px; }
	#header.flex { min-height:70px; }
}
@media screen and (min-width:1260px) {
	#header { min-height:176px; }
	#header.flex { min-height:90px; }
}
/* ----- logo ----- */
#header .logo {
	position:relative;
	width:calc(100% - 120px);
	transition:max-width 0.4s ease;
}
#header .logo a {
	margin:6px 0;
	display:block;
	width:122px;
	height:65px;
	background-image:url(../images/logo.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
}
@media screen and (min-width:991px) {
	#header .logo { max-width:130px; }
	#header .logo a {
		width:100%;height:0%;
		padding-bottom:53.33%;
	}
	#header.flex .logo { max-width:110px; }
}
@media screen and (min-width:1260px) {
	#header .logo { max-width:190px; }
	#header.flex .logo { max-width:140px; }
}
/* ----- topHead ----- */
#topHead {
	width:100%;
	min-height:58px;
	padding:8px 0;
	background-color:var(--green-mid);
}
#header.flex #topHead {
	height:0;
	padding:0;
	overflow:hidden;
	display:none;
	visibility:hidden;
}
#topHead .container {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	gap:.6vw;
}
.welcome {
	color:#fff;
	font-size:1.6em;
	line-height:180%;
	display:inline-flex;
	align-items:center;
	gap:6px;
}
.welcome::after {
	content:'';
    display:block;
    width:30px;
    height:30px;
    background-color:#9efed5;
	mask-image:url(../images/ico_welcome.svg);
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center center;
}
.nav-right {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:8px .6vw;
	max-width:calc(100% - 320px);
}
.flexWrap {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6vw;
}
@media screen and (max-width:480px) {
	.welcome {
		font-size:3.5vw;
	}
}
@media screen and (min-width:1580px) {
	.nav-right {  width:auto; }
}
/* ----- addon ----- */
#addon {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#addon-sp { 
    width:100%;
	background:#282828;
}
/** socialmedia **/
#socialmedia {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6vw;
}
.socialItem {
	position:relative;
}
#socialmedia a {
	padding:8px .6vw;
	border-radius:99px;
	font-size:1.6em;
	line-height:100%;
	font-weight:400;
	letter-spacing:0.12em;
	text-decoration:none;
	transition:background 0.3s, color 0.3s;
	background-color:var(--green-deep);
	border:1px solid transparent;
	color:#fff;
	display:flex;
	align-items:center;
	gap:6px;
}
#socialmedia a:hover,
#socialmedia a:focus {
	border-color:var(--gold-pale);
}
/** socialmedia QR code popup **/
.qrPopup {
	position:absolute;
	top:calc(100% + 12px);
	left:50%;
	transform:translateX(-50%) translateY(6px);
	background-color:#fff;
	border-radius:10px;
	padding:10px;
	width:120px;
	box-shadow:0 5px 15px rgba(0,0,0,0.3);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	z-index:200;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.qrPopup::before {
	content:"";
	position:absolute;
	bottom:100%;
	left:50%;
	transform:translateX(-50%);
	border:8px solid transparent;
	border-bottom-color:#fff;
}
.qrPopup .qrcode img {
	display:block;
	width:100%;
	height:auto;
}
.socialItem:hover .qrPopup,
.socialItem:focus-within .qrPopup {
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateX(-50%) translateY(0);
}
*[class^="media_ico"]::before {
	content:'';display:block;
    width:25px;height:20px;
	background-color:#bea98b;
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center center;
}
.media_ico1::before { mask-image:url(../images/media_ico1.svg); }
.media_ico2::before { mask-image:url(../images/media_ico2.svg); }
.media_ico3::before { mask-image:url(../images/media_ico3.svg); }
.media_ico4::before {
	width:56px;
	mask-image:url(../images/media_ico4.svg);
}
.media_ico5::before { mask-image:url(../images/media_ico5.svg); }
.media_ico6::before { mask-image:url(../images/media_ico6.svg); }
/** addonLink **/
#addonLink {
	width:auto;display:flex;
	flex-wrap:wrap;align-items:center;
	position:relative;
} 
#addonLink .acKey {
	position:absolute;
}
#addonLink > ul {
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6vw;
}
#addonLink > ul > li {  position:relative; }
#addonLink > ul > li a {
	position:relative;
	color:#fff;
	font-size:1.6em;
	line-height:150%;
	font-weight:400;
	box-sizing:border-box;
	border-radius:99px;
	padding:8px .6vw;
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1px solid transparent;
}
#addonLink > ul > li a:hover,
#addonLink > ul > li a:focus {
	border-color:var(--gold-pale);
	background-color:var(--green-deep);
}
#addonLink ul a:before { 
    content:"";display:block;
    width:20px;height:20px;
	background-color:#fff;
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center center;
}
#addonLink ul a.ico_home:before { mask-image:url(../images/ico_home.svg); }
#addonLink ul a.ico_sitemap:before { mask-image:url(../images/ico_sitemap.svg); }
/* ── Language Switcher ── */
.lang-switcher {
	position:relative;
	user-select:none;
}
.lang-trigger {
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px .6vw;
	background:transparent;
	border:none;
	cursor:pointer;
	transition:background 0.3s, border-color 0.3s;
	color:rgba(255,255,255,0.85);
	border:1px solid transparent;
	border-radius:99px;
	box-sizing:border-box;
	font-size:1.6em;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}
.lang-trigger::before {
	content:'';
	display:block;
	width:20px;
	height:20px;
	background-color:#fff;
	mask-image:url(../images/icon_globe.svg);
	mask-size:contain;
	mask-repeat:no-repeat;
	mask-position:center;
}
.lang-trigger:hover,
.lang-trigger:focus { 
  background:rgba(0,0,0,0.12);
  border-color:var(--gold-pale);
  color:var(--gold-pale);
}
.lang-trigger.open .chevron {  transform:rotate(180deg); }
.lang-trigger-globe {  width:14px; height:14px; opacity:0.7; }
.lang-trigger-chevron {
	width:11px;
	height:10px;
	position:relative;
}
.lang-trigger-chevron::before,
.lang-trigger-chevron::after {
	content:'';
	display:block;
	width:7px;
	height:2px;
	background-color:#fff;
	border-radius:2px;
	position:absolute;
	left:0%;
	top:50%;
	margin-top:-1px;
	transform:rotate(45deg);
}
.lang-trigger-chevron::after {
	transform:rotate(-45deg);
	left:auto;
	right:0%;
}
.lang-current-text { 
  font-size:1em;
  font-weight:400;
  letter-spacing:0.08em;
  color:#fff;
  white-space:nowrap;
}
@media screen and (max-width:1580px) {
	#socialmedia {  display:none; }
}
@media screen and (max-width:990px) {
	#addonLink {  justify-content:center; }
	#socialmedia a,
	#addonLink > ul > li a,
	.lang-trigger {
		padding:8px 10px;
	}
}
@media screen and (max-width:480px) {
	.lang-trigger {
		border-color:rgba(255,255,255,.5);
	}
	.lang-current-text {
		display:none;
	}
}
@media screen and (min-width:1260px) {
	#socialmedia a,
	#addonLink > ul > li a,
	.lang-trigger {
		padding:8px 15px;
		font-size:1.8em;
	}
}
/* ── Dropdown Panel ── */
.lang-dropdown {
	display:none;
	position:absolute;
	top:calc(100% + 10px);
	right:0;
	width:100%;
	min-width:140px;
	background:rgba(255,255,255,0.97);
	border:none;
	border-radius:10px;
	backdrop-filter:blur(16px);
	overflow:hidden;
	opacity:0;
	pointer-events:none;
	transform:translateY(-8px);
	transition:opacity 0.25s, transform 0.25s;
	z-index:200;
}
.lang-dropdown.open {
	display:block;
	opacity:1;
	pointer-events:auto;
	transform:translateY(0);
	box-shadow:0 5px 20px rgba(0,0,0,0.3);
}
.lang-dropdown.open::before {
	content:"";
	position:absolute;
	bottom:100%;
	left:50%;
	transform:translateX(-50%);
	border:8px solid transparent;
	border-bottom-color:#fff;
}
.lang-dropdown-header {
	padding:10px 16px 8px;
	font-size:9px; letter-spacing:0.28em;
	color:rgba(255,255,255,0.3);
	border-bottom:1px solid rgba(255,255,255,0.06);
}
.lang-option {
	width:100%; display:flex; align-items:center; gap:10px;
	padding:11px 16px;
	background:transparent; border:none; cursor:pointer;
	text-align:left;
	transition:background 0.2s;
	position:relative;
}
.lang-option:hover {  background:rgba(196,151,58,0.1); }
.lang-option.is-active {  background:rgba(196,151,58,0.08); }
.lang-option.is-active::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:2px;
	background:var(--gold);
}
.lang-option-flag {
	font-size:1.6em; line-height:1; flex-shrink:0;
}
.lang-option-info {  display:flex; flex-direction:column; gap:1px; }
.lang-option-name {
	font-size:1.3em;
	color:rgba(0,0,0,0.85);
	font-family:'Noto Sans TC', sans-serif;
	white-space:nowrap;
}
.lang-option-sub {
	font-size:0.75em;
	letter-spacing:0.1em;
	color:#7e7e7e;
}
.lang-option.is-active .lang-option-name {  color:var(--gold-dark); }
/* 🔴 上線終審（2026-08-16）：尚未接真翻譯的語言（EN／JP）—— 灰態、不可點。
   模板那兩顆帶 disabled，本段只負責「看起來就不能點」，不承擔擋點擊的責任
   （擋點擊靠原生 disabled，那才擋得住三份各自綁 click 的 js）。
   翻譯接真後連同模板的 is-pending 一起移除。 */
.lang-option.is-pending {  cursor:not-allowed; opacity:0.45; }
.lang-option.is-pending:hover {  background:transparent; }
.lang-option.is-pending .lang-option-sub {  color:var(--gold-dark); letter-spacing:0.06em; }

/* ── Baidu translate floating button:hide ── */
#baiduTranslateButton,
.baidu-translate-mask {  display:none !important; }

/** main **/
#main {
	position:relative;
    width:100%;
	padding:0;
    margin:0 auto;
	z-index:1;
}
#main.homeMain .acKey {
	position:absolute;
	left:20px;
	top:20px;
	margin-top:-15px;
	z-index:2;
}
@media screen and (min-width:991px) {
	#main.homeMain .acKey {
		left:50%;
		top:60px;
		margin-left:-450px;
	}
}
@media screen and (min-width:1260px) { 
    #main.homeMain .acKey {
		top:80px;
		margin-left:-600px;
	}
}
@media screen and (min-width:1720px) { 
    #main.homeMain .acKey {
		top:90px;
		margin-left:-780px;
	}
}

/* ----- searchZone ----- */
.searchZone {
	text-align:center;
}
.searchZone.bot {
	position:absolute;
	left:0;
    top:135px;
	width:100%;
	z-index:2;
}
.searchZone .searchTag {
	width:40px;
	height:40px;
	background-color:transparent;
	box-sizing:border-box;
	z-index:0;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
}
.searchZone .searchTag span:first-of-type {
	width:1px;
	height:1px;
	display:block;
	overflow:hidden;
	position:absolute;
}
.searchZone .searchTag span.btn {
	margin:0 auto;
    width:28px;
    height:28px;
	display:block;
}
.searchZone .searchTag span.btn em {
	display:block;
	height:100%;
	width:100%;
	background:none;
	backface-visibility:hidden;
	position:relative;
}
.searchZone .searchTag span.btn em::before,
.searchZone .searchTag span.btn em::after {
	position:absolute;
	display:block;
	content:'';
}
.searchZone .searchTag.open span.btn em::before {
	left:0;
	top:1px;
	height:20px;
	width:20px;
	border:3px solid #000;
	box-sizing:border-box;
	border-radius:100px;
	transition:transform .2s;
	margin:1px;
}
.searchZone .searchTag.open span.btn em::after {
	right:50%;
    top:50%;
	background:#000;
    transition:transform .2s;
    transform:rotate(-45deg);
    border-radius:5px;
    width:3px;
    height:8px;
	margin-right:-7px;
    margin-top:3px;
}
.searchZone .searchTag:hover span.btn em::before,
.searchZone .searchTag:focus span.btn em::before {  border-color:var(--green-deep); }
.searchZone .searchTag:hover span.btn em::after,
.searchZone .searchTag:focus span.btn em::after {  background-color:var(--green-deep); }
.searchZone .searchTag.close span.btn em::before,
.searchZone .searchTag.close span.btn em::after {
	left:50%;
	top:50%;
	width:26px;
	height:3px;
	margin:0;
	background:var(--green-deep);
	border-radius:2px;
	margin-left:-13px;
	margin-top:-1.5px;
}
.searchZone .searchTag.close span.btn em::before {
	border:none;
	transform:rotate(-45deg);
}
.searchZone .searchTag.close span.btn em::after {
	transform:rotate(45deg);
}
.searchZone .box {
	width:100%;
	padding:20px 0;
	background:none;
	box-sizing:border-box;
	margin:0 auto;
	transition:all 200ms ease;
	display:flex;
	flex-direction:column;
	gap:15px;
}
.searchrows {
	position:relative;
	background-color:#fff;
	border-radius:99px;
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
	align-items:center;
}
.searchZone .search { 	
	display:none;
	width:100%;
	text-align:center;
	background:#e8efe9;
	margin:0 auto;
	box-shadow:0 8px 5px rgba(0%,0%,0%,0.3);
}
.searchZone .search-txt {
	width:100%;
	height:55px;
	color:#666;
	font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:1.125rem;
	line-height:55px;
	padding:0 65px 0 15px;
	border:none;
	box-sizing:border-box;
	background:#fff;
	flex-grow:1;
	border-radius:50px;
}
.searchZone .search-txt:focus { color:#aa5000; }
.searchZone .search-txt::placeholder {
	color:#666;
	opacity:1;
}
.searchZone .search-txt:-ms-input-placeholder,
.searchZone .search-txt::-ms-input-placeholder {
	color:#666;
}
.searchZone input:-internal-autofill-selected {
	background:none !important;
}
.searchZone .search-btn {
	position:absolute;
	right:5px;
	top:5px;
	display:block;
	width:45px;
	height:45px;
	padding:0;
	border:none;
	cursor:pointer;
	background:var(--green-mid);
	border-radius:99px;
}
.searchZone .search-btn span {
	display:block;
	visibility:hidden;
}
.searchZone .search-btn em {
	position:relative;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	width:21px;
	height:21px;
	margin:12px auto;
	display:block;
}
.searchZone .search-btn em::before {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	height:19px;
	width:19px;
	border:3px solid #fff;
	box-sizing:border-box;
	border-radius:100px;
}
.searchZone .search-btn em::after {
	position:absolute;
	display:block;
	content:'';
	right:0;
	bottom:0;
	width:8px;
	height:3px;	
	background:#fff;
	border-radius:2px;
	transform:translate3d(0, -50%, 0) rotate(45deg);
}
.searchZone .search-btn:hover,
.searchZone .search-btn:focus {
	background-color:#aa5000;
}
.searchZone .keyWd {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	width:100%;
	color:#666;
	font-size:1.5em;	
	line-height:25px;
	text-align:left;
	padding:0 10px;
	box-sizing:border-box;
	margin:0 auto;
}
.searchZone .keyWd strong {
	color:#0c5c3a;
}
.searchZone .keyWd a {
	display:inline-block;
	color:#666;
	border:1px solid #bfbfbf;
	border-radius:99px;
	padding:0 15px;
	text-decoration:none;
	margin:0;
}
.searchZone .keyWd .popularity {
	color:#aa5000;
	border-color:#aa5000;
}
.searchZone .keyWd a:hover,
.searchZone .keyWd a:focus {
	color:#fff;
	background-color:#0c5c3a;
	border-color:transparent;
}
@media screen and (max-width:990px) {
	.searchZone {
		position:absolute;
		right:80px;
		top:74px;
	}
	.searchZone .searchTag {
		width:45px; height:45px;
	}
}
@media screen and (min-width:991px) {
	.searchZone.bot { top:58px; }
	#header.flex .searchZone.bot {  top:90px; }
	.searchZone .searchTag.open span.btn em::before { border-color:#fff; }
	.searchZone .searchTag.open span.btn em::after { background:#fff; }
	.searchZone .searchTag:hover span.btn em::before,
	.searchZone .searchTag:focus span.btn em::before {  border-color:var(--cyan-blue-light); }
	.searchZone .searchTag:hover span.btn em::after,
	.searchZone .searchTag:focus span.btn em::after,
	.searchZone .searchTag.close span.btn em::before,
	.searchZone .searchTag.close span.btn em::after { background-color:var(--cyan-blue-light); }
	.searchZone .search-txt {
		height:70px;
		line-height:70px;
		padding:0 70px 0 20px;
	}
	.searchZone .search-btn {
		right:10px;
		top:10px;
		width:50px;
		height:50px;
	}
	.searchZone .search-btn em {
		width:24px;
		height:24px;
	}
	.searchZone .search-btn em::before {
		height:22px;
		width:22px;
	}
}
@media screen and (min-width:1260px) {
	.searchZone.bot { top:61px; }
}
/** footer **/
#footer { 
    position:relative;
    width:100%;
	padding:0;
    margin:0 auto;
	background-color:var(--green-mid);
	background-image:linear-gradient(0deg, var(--green-mid) 0%, #2e6e34 100%);
}
@media screen and (min-width:1480px) {
	#footer {  padding-top:30px; }
}
/* ----- trigger ----- */
#footer .trigger { text-align:center; }
#footer .trigger a {
	position:relative;
	font-size:1.5em;
	font-weight:400;
	text-align:center;
	padding:6px 12px;
	margin:0 auto;
	z-index:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	border-radius:20px;
	background-color:var(--green-deep);
	color:#fff;
}
#footer .trigger a:hover,
#footer .trigger a:focus {
	color:#9CC813;
}
#footer .trigger .triggerico {
	position:relative;
	width:12px;
	height:12px;
	display:block;
	transition:all 0.3s ease;
}
#footer .trigger .triggerico:before,
#footer .trigger .triggerico:after {
	content:"";
	display:block;
	width:12px;
	height:2px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-6px;
	margin-top:-1px;
	background-color:#fff;
}
#footer .trigger a .triggerico:after {
	transform:rotate(90deg);
}
#footer .trigger a.close-Panell .triggerico { 
    transform:rotate(45deg);
}
#footer .trigger a:hover span:before,
#footer .trigger a:focus span:before, 
#footer .trigger a:hover span:after,
#footer .trigger a:focus span:after {
	background-color:#9CC813;
}
/* ----- fat-nav ----- */
.fat-nav { 
    position:relative;
	width:100%;
	padding:30px 0;
	margin:0 auto;	
	z-index:1;
}
.fat-nav > ul { 
    list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:30px 1px;
}
.fat-nav > ul > li { 
    width:auto;
    padding:10px 15px;
    box-sizing:border-box;
	position:relative;
	min-width:9.9%;
}
.fat-nav > ul > li:has(+ li):before {
	content:"";
	display:block;
	position:absolute;
	right:0;top:0;
	width:1px;
	height:100%;
	background-color:rgba(255,255,255,0.2);
}
.fat-nav > ul > li > a {
	position:relative;
    display:inline-block;
	font-family:"PingFang TC Semibold", "Microsoft YaHei";
	color:#ffffff;
	font-size:2em;
    font-weight:bold;
	line-height:130%;
}
.fat-nav > ul > li > a:hover,
.fat-nav > ul > li > a:focus {
	color:var(--gold);
}
.fat-nav > ul > li > ul { 
    list-style:none;
}
.fat-nav > ul > li > ul > li { 
    margin-top:10px;
}
.fat-nav > ul > li > ul > li > a { 
    position:relative;
	display:inline-block;
	color:#bfedbf;
    font-size:1.5em;
    line-height:130%;
    box-sizing:border-box;	
}
.fat-nav > ul > li > ul > li a:hover,
.fat-nav > ul > li > ul > li a:focus { 
    color:var(--gold);
}
.fat-nav > ul > li > ul > li > a.dropBtn:before {
	display:none;
}
.fat-nav > ul > li > ul > li > a.dropBtn span:before {
	content:"";
	position:absolute;
	display:block;
	width:10px;
	height:2px;
	top:10px;
	left:0px;
	border:none;
	background-color:#bababa;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.fat-nav > ul > li > ul > li > a.dropBtn span:after {
	content:"";
	position:absolute;
	display:block;
	width:2px;
	height:10px;
	top:6px;
	left:4px;
	border:none;
	margin:0;
	background-color:#bababa;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
			transform:rotate(0deg);
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.fat-nav > ul > li > ul > li > a.dropBtn:hover span:before,
.fat-nav > ul > li > ul > li > a.dropBtn:focus span:before,
.fat-nav > ul > li > ul > li > a.dropBtn:hover span:after,
.fat-nav > ul > li > ul > li > a.dropBtn:focus span:after {
	background-color:var(--gold);
}
.fat-nav > ul > li > ul > li > a.dropBtn.open {
	color:#ffff00;
}
.fat-nav > ul > li > ul > li > a.dropBtn.open span:before {
	left:-2px;
	width:12px;
	background-color:#ffff00;
	-webkit-transform:rotate(315deg);
		-ms-transform:rotate(315deg);
			transform:rotate(315deg);
}
.fat-nav > ul > li > ul > li > a.dropBtn.open span:after {
	left:3px;
	top:5px;
	height:12px;
	background-color:#ffff00;
	-webkit-transform:rotate(315deg);
		-ms-transform:rotate(315deg);
			transform:rotate(315deg);
}
.fat-nav > ul > li > ul > li > a.link:after,
.fat-nav > ul > li > ul > li > a.download:after {
	content:"";
	display:inline-block;
	width:15px;
	height:15px;
	border:0;
	margin-left:7px;
	vertical-align:middle;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#bababa;
	opacity:.5;
	-webkit-mask-size:15px 15px;
			mask-size:15px 15px;
	-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
			transform:rotate(0deg);
	-webkit-transition:all 0.3s;
	   -moz-transition:all 0.3s;    
		 -o-transition:all 0.3s;
			transition:all 0.3s;
}
.fat-nav > ul > li > ul > li > a.link:after {
	-webkit-mask-image:url(../images/nav-icon-link.svg);
			mask-image:url(../images/nav-icon-link.svg);
}
.fat-nav > ul > li > ul > li > a.download:after {
	-webkit-mask-image:url(../images/nav-icon-download.svg);
			mask-image:url(../images/nav-icon-download.svg);
}
.fat-nav > ul > li > ul > li > a.link:hover:after,
.fat-nav > ul > li > ul > li > a.link:focus:after,
.fat-nav > ul > li > ul > li > a.download:hover:after,
.fat-nav > ul > li > ul > li > a.download:focus:after {
	background-color:var(--gold);
}
@media screen and (max-width:767px) {
	.fat-nav { display:none; }
}
@media screen and (min-width:768px) {
	.fat-nav > ul {
		display:grid;
		grid-template-columns:repeat(5, 1fr);
		gap:30px 1px;
	}
}
@media screen and (min-width:768px) and (max-width:1479px) {
	.fat-nav > ul > li:nth-of-type(5)::before { visibility:hidden; }
}
@media screen and (min-width:1480px) {
	.fat-nav > ul {
		grid-template-columns:repeat(10, 1fr);
	}
	.fat-nav > ul > li { padding:10px 20px; }
	.fat-nav > ul > li > a {
		font-size:2.1em;
	}
	.fat-nav > ul > li > ul > li > a {
		font-size:1.7em;
	}
}
@media screen and (min-width:1680px) {
	.fat-nav > ul > li { padding:10px 25px; }
}
/**/
.copyright {
	width:100%;
	padding:20px 0;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}
.footerLogo { width:200px; }
.footerLogo::before {
	content:'';
	display:block;
    margin:6px 0;
    width:100%;
    padding-bottom:53.33%;
    height:auto;
    background-image:url(../images/footerLogo.webp);
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:contain;
}
.fooRight {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:15px;
}
.social_Qrcode {
	list-style:none;
	margin:0;padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
}
.social_Qrcode a {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	max-width:100px;
}
.social_Qrcode .qrcode {
	background-color:#fff;
	border-radius:10px;
	padding:5px;
}
.social_Qrcode .qrcode img {
	max-width:90px;
	height:auto;
}
.social_Qrcode p {
	font-size:1.3em;
	line-height:130%;
	text-align:center;
}
.fat-bottom {
	width:100%;
	border-top:1px solid rgba(0,0,0,0.2);
	padding:20px 0;
	font-size:1.8em;
	line-height:150%;
	color:#fff;
	text-align:center;
}
.fat-bottom .container {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
}
.leftFix,.rightFix {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px;
}
.fat-bottom p:has(*[class^="ico_"]) {
	display:flex;
	align-items:center;
	gap:6px;
	line-height:100%;
}
.fat-bottom *[class^="ico_"]::before {
	content:"";
	display:block;
	width:22px;
	height:22px;
	background-color:#fff;
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center center;
}
.ico_map:before { mask-image:url(../images/ico_map.svg); }
.ico_click:before { mask-image:url(../images/ico_click.svg); }
.autoTx {  display:inline-block; }
.clickNumber {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:400;
	color:var(--gold);
	border:1px solid var(--gold-pale);
	background-color:rgba(40,80,60,0.5);
	padding:8px 15px;
	border-radius:99px;
	display:inline-block;
}
.dotFont {
	display:inline-flex;
	align-items:center;
	gap:10px;
}
.dotFont::before {
	content:"";
	display:block;
	width:8px;
	height:8px;
	background-color:var(--cyan-blue-light);
	border-radius:8px;
}
@media screen and (max-width:990px) {
	.copyright {
		flex-direction:column;
		align-items:center;
	}
}
@media screen and (min-width:991px) {
	.copyright {
		justify-content:space-between;
		padding:30px 0;
	}
	.social_Qrcode { justify-content:flex-start; }
	.fat-bottom .container {  justify-content:space-between; }
}
/* asideNav */
#asideNav {
	position:fixed;
	width:110px;
	height:100%;
	right:0;
	top:0;
	z-index:90;
	display:flex;
	flex-direction:row;
	align-items:center;
	pointer-events:none;
	transition:all 0.4s ease-in-out;
}
#asideNav.active,
#asideNav.open-asideNav {
	right:-80px;
}
#asideNav.close-asideNav {
	right:0;
}
.asideTrigger {
	width:30px;
	height:292px;
	pointer-events:none;
}
.asideBtn {
	display:flex;
	width:30px;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	text-align:center;
	background-color:var(--green-dark);
	border-radius:5px 0 0 5px;
	margin-top:30px;
	font-size:1.5em;
	padding:15px 5px;
	pointer-events:auto;
}
.asideBtn .triggerico {
	position:relative;
	width:14px;
	height:14px;
	display:block;
}
.close-asideNav .asideBtn .triggerico {
	transform:scaleX(-1);
}
.asideBtn .triggerico:before,
.asideBtn .triggerico:after {
	content:"";
	display:block;
	width:10px;
	height:3px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-6px;
	background-color:#fff;
	border-radius:2px;
}
.asideBtn .triggerico:before {
	transform:rotate(-45deg);
	margin-top:-4px;
}
.asideBtn .triggerico:after {
	transform:rotate(45deg);
	margin-top:2px;
}
.asideWrap {
	width:80px;
	display:flex;
	flex-direction:column;
    align-items:flex-end;
	border-radius:20px 0 0 20px;
	transition:all 0.3s ease;
	pointer-events:auto;
}
.close-asideNav .asideWrap {
	box-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.asideWrap ul {
	list-style:none;
	display:flex;
	flex-direction:column;
}
.asideWrap ul li:has(+li) { border-bottom:1px solid #eee; }
.asideWrap ul li:first-of-type a {
	border-radius:20px 0 0 0;
}
.asideWrap ul li a {
	width:80px;
	height:80px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#777777;
	background-color:#fff;
}
.asideWrap ul li a::before {
	content:'';display:block;
    width:50px;height:50px;
	background-repeat:no-repeat;
	background-size:contain;
}
.asideWrap ul li a:hover,
.asideWrap ul li a:focus {
	background-color:#eee;
	color:var(--green-deep);
}
#asideNav .aside_ico1::before {
	background-image:url(../images/aside_ico1.svg);
}
#asideNav .aside_ico2::before {
	background-image:url(../images/aside_ico2.svg);
}
#asideNav .aside_ico3::before {
	background-image:url(../images/aside_ico3.svg);
}
@media screen and (max-width:990px) {
	#asideNav {
		width:100px;
		max-height:calc(56.25vw + 135px);
	}
	#asideNav.open-asideNav {
		right:-70px;
	}
	.asideTrigger,
	.asideWrap {
		margin-top:135px;
	}
	#header.flex + #asideNav {
		max-height:calc(56.25vw + 77px);
	}
	#header.flex + #asideNav .asideTrigger,
	#header.flex + #asideNav .asideWrap {
		margin-top:77px;
	}
	.asideWrap ul li a {
		width:70px;
		height:70px;
	}
	.asideWrap ul li a::before {
		width:40px;
		height:40px;
	}
}
@media screen and (max-width:767px) {
	#asideNav {
		max-height:calc(440px + 135px);
	}
	.asideTrigger,
	.asideWrap {
		margin-top:135px;
	}
	#header.flex + #asideNav {
		max-height:calc(440px + 77px);
	}
	#header.flex + #asideNav .asideTrigger,
	#header.flex + #asideNav .asideWrap {
		margin-top:77px;
	}
}
@media screen and (max-width:480px) {
	#asideNav {
		top:100%;
		width:350px;
		height:70px;
		border-radius:0;
		transform:translateY(-100%);
		box-shadow:0 0 10px rgba(0,0,0,0.3);
	}
	#asideNav.open-asideNav {
		right:-280px;
	}
	.asideTrigger {
		width:70px;
		height:70px;
		margin-top:0;
	}
	.asideBtn {
		width:100%;
		height:100%;
		border-radius:0;
		margin:0;
	}
	.asideWrap {
		width:280px;
		height:70px;
		flex-direction:row;
		align-items:flex-start;
		border-radius:0;
		margin-top:0;
	}
	.close-asideNav .asideWrap {
		box-shadow:none;
	}
	.asideWrap ul {
		flex-direction:row;
	}
	.asideWrap ul li:first-of-type a {
		border-radius:0;
	}
}
@media screen and (min-width:991px) {
	#asideNav {
		max-height:calc(56.25vw + 140px);
	}
	.asideTrigger,
	.asideWrap {
		margin-top:140px;
	}
	#header.flex + #asideNav {
		max-height:calc(56.25vw + 70px);
	}
	#header.flex + #asideNav .asideTrigger,
	#header.flex + #asideNav .asideWrap {
		margin-top:70px;
	}
}
@media screen and (min-width:1260px) {
	#asideNav {
		max-height:calc(56.25vw + 176px);
	}
	.asideTrigger,
	.asideWrap {
		margin-top:176px;
	}
	#header.flex + #asideNav {
		max-height:calc(56.25vw + 90px);
	}
	#header.flex + #asideNav .asideTrigger,
	#header.flex + #asideNav .asideWrap {
		margin-top:90px;
	}
}
@media screen and (min-width:1680px) {
}

/* ----- goTop ----- */
.goTop {
	width:80px;
}
.goTop a {
	position:relative;
	width:100%;
	height:50px;
	overflow:hidden;
	margin:0 auto;
	background-color:#00452d;
	background-image:linear-gradient(0deg, #0a5a3c 0%, #00452d 100%);
	border-radius:0 0 0 20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#fff;
}
.goTop a:hover,
.goTop a:focus {
	background-color:#98352d;
	background-image:linear-gradient(0deg, #5c100a 0%, #98352d 100%);
}
.goTop a::before {
	content:"";
	display:block;
	width:16px;
	height:16px;
	margin:0;
	background:url(../images/icon-top.svg) 50% 50% no-repeat;
	background-size:contain;
}
@media screen and (max-width:990px) {
	.goTop {
		width:70px;
	}
}
@media screen and (max-width:480px) {
	.goTop a {
		height:70px;
		border-radius:0;
	}
}

/*PRINT*/
@media print {
	body {
		margin:0!important;
		padding:0!important;
	}
	h1, h2, h3, h4, h5, h6 {
		page-break-after:avoid;
		page-break-inside:avoid;
	}
	blockquote, table, pre {
		page-break-inside:avoid;
	}
	ul, ol, dl {
		page-break-before:avoid;
	}
	img {
		max-width:100%!important;
		page-break-inside:avoid;
	}
	#addon,#navMenu,
	.searchZone,
	.fatfooter .trigger,
	#asideNav {
		display:none!important;
	}
	#wrapper {
		padding-top:60px;
		background:none!important;
	}
	#header {
		position:absolute!important;
		background:#FFFFFF!important;
	}
	#footer {
		padding:20px!important;
	}
}

@page {
	size:A4 portrait; /*a4尺寸 直式 */
    margin:1cm; /*邊距1公分 */
    orphans:2; /*頁面最後一段段落行數，預設值為2 */
    widows:2; /*頁面第一段段落行數，預設值為2 */
}