html,body {
	margin:0;
	padding:0;
}
*, *::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 "Noto Sans SC", sans-serif, "微軟雅黑", "Microsoft YaHei", Arial;
    -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; }

body.font-size-s {
    font-size:56.3%;
}
body.font-size-l {
	font-size:68.8%;
}
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;
}
.sr-only-focusable {
    position:fixed;
	top:0;
	left:0;
	color:#000;
	opacity:0;
	z-index:9999;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
	color:#FFF;
	font-size:1.2em;
	padding:5px 10px;	
	opacity:1;
	background:rgba(0,0,0,.7);
}
.acKey,
.acKey a {
    color:transparent;
    font-size:0.8rem;
}
.acKey:hover,
.acKey:focus,
.acKey a:hover,
.acKey a:focus {
    color:var(--gold-light);
}
.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:95px;}
	#header.flex {min-height:77px;}
}
@media screen and (max-width:460px) {
	#header {min-height:85px;}
}
@media screen and (min-width:991px) {
}
@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: 12vw;}
	#header .logo a {
		width:100%;height:0%;
		padding-bottom: 53.33%;
	}
	#header.flex .logo{max-width: 140px;}
}
@media screen and (min-width:1260px) {
	#header .logo{max-width: 190px;}
}
/* ----- topHead ----- */
#topHead{
	width: 100%;
	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) {
	#topHead .container{
		justify-content: flex-end;
	}
	.welcome{ display: none;}
}
@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;
}
#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);
}
*[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", sans-serif, "微軟雅黑", "Microsoft YaHei", Arial;
}
.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 (min-width:1260px) {
	#socialmedia a,
	#addonLink > ul > li a,
	.lang-trigger{
		padding: 8px 15px;
		font-size: 1.8em;
	}
}
/* ── Dropdown Panel ── */
.lang-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 160px;
  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 {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.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); }

/* ── 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:2px;
	height:20px;
	width:20px;
	border:2px 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:2px;
    height:8px;
	margin-right:-7px;
    margin-top:4px;
}
.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:24px;
	height:2px;
	margin:0;
	background:var(--green-deep);
	margin-left:-12px;
}
.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:10px 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 3px 5px rgba(0%,0%,0%,0.3);
}
.searchZone .search-txt {
	width:calc(100% - 70px);
	height:70px;
	color:#666;
	font-family:"微軟正黑體", Microsoft JhengHei, Helvetica, sans-serif;
	font-size:1.125rem;
	line-height:70px;
	padding: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 {
	display:block;
	width:50px;
	height:50px;
	padding:0;
	margin:10px;
	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:24px;
    height:24px;
    margin:12px auto;
    display:block;
}
.searchZone .search-btn em::before {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	height:22px;
	width:22px;
	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 .box{ padding:20px 0;}
	.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);}
}
@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;
	right:0;bottom:8vh;
	z-index:90;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 110px;
	transition: all 0.4s ease-in-out;
}
#asideNav.active,
#asideNav.open-asideNav{
	right: -80px;
}
#asideNav.close-asideNav{
	right:0;
}
.asideTrigger{
	width: 30px;
	display: flex;
	justify-content: center;
}
.asideBtn{
	display: flex;
	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;
}
.asideBtn .triggerico {
	position:relative;
	width:14px;
	height: 14px;
	display: block;
	transition:all 0.3s ease;
}
.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;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	border-radius: 20px 0 0 20px;
}
.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);
}
/* ----- goTop ----- */
.goTop {width:80px;}
.goTop a {
	position:relative;
	width:80px;
	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;
}
.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;
}

/*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 */
}