@charset "utf-8";

/** errorWrap **/
#errorWrap {
	width:100%;
	margin:0 auto;
}
@media screen and (min-width:991px) {
	#errorWrap {
		display:flex;		
		align-items:center;
		height:100%;
	}
}


/** errorPage **/
#errorPage {
	position:relative;
	width:100%;
	margin:0 auto;
}
#errorPage .logo {
    display:block;
    width:345px;
	height:30px;
	background:url(../images/logo.png) no-repeat 0 50%;
	background-size:auto 30px;
	margin:20px auto;
}
#errorPage .errorBox {
	position:relative;
    width:100%;
	text-align:center;
    padding:50px 0;
	box-sizing:border-box;
    margin:0 auto;
	background:#8cbe41; /* Old browsers */
	background:-moz-linear-gradient(-45deg,  #8cbe41 0%, #1b9282 50%, #095fa4 100%); /* FF3.6-15 */
	background:-webkit-linear-gradient(-45deg,  #8cbe41 0%,#1b9282 50%,#095fa4 100%); /* Chrome10-25,Safari5.1-6 */
	background:linear-gradient(135deg,  #8cbe41 0%,#1b9282 50%,#095fa4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cbe41', endColorstr='#095fa4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-size:cover;
}
#errorPage .errorBox .acKey {
	position:absolute;
	top:20px;
	left:20px;
	color:transparent;
	font-size:1.1em;
}
#errorPage .errorBox .acKey:hover,
#errorPage .errorBox .acKey:focus {
	color:#FFF;
	outline:1px dashed #FF6600;
}
#errorPage .errorBox h2 {
    color:#FFF;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	font-size:4.3em;
	margin:0 0 10px 0;
	-webkit-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	   -moz-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	    -ms-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	        text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
}
#errorPage .errorBox h3 {
	color:#FFF;
	font-size:2.1em;
	margin:10px 0 25px 0;
	-webkit-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	   -moz-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	    -ms-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	        text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
}
#errorPage .errorBox p {
	color:#FFF;
	font-size:1.9em;
	line-height:150%;
	font-weight:bold;
	-webkit-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	   -moz-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	    -ms-text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
	        text-shadow:0px 1px 5px rgba(0,0,0,.5), 0px 1px 15px rgba(0,0,0,.5);
}
#errorPage .errorBox p.eng {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.9em;
}
#errorPage .errorBtn {
	width:100%;
	text-align:center;
    margin:2rem auto 1rem auto;
}
#errorPage .errorBtn a {
	display:inline-block;
	width:calc(100% - 10px);
	max-width:300px;
    color:#000;
    font-size:1.7em;
	padding:10px 0;
	border:1px solid #000;
	box-sizing:border-box;
	-webkit-border-radius:50px;
	   -moz-border-radius:50px;
			border-radius:50px;
	margin:5px;
}
#errorPage .errorBtn a:hover,
#errorPage .errorBtn a:focus {
	color:#FFF;
    background:#000;
}
#errorPage .mark {
	text-align:center;
	margin-top:1rem;
}
#errorPage .mark a {
	display:inline-block;
	vertical-align:middle;
	margin:0 5px;
}
#errorPage .wd {
	text-align:center;
	margin-top:1rem;
}
#errorPage .wd p {
	color:#000;
	font-size:1rem;
	line-height:165%;
	margin:0;
}
#errorPage .wd p strong {
    font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	font-size:1.2rem;
}
#errorPage .wd p span {
	display:inline-block;
	margin:0 10px;
}
@media screen and (max-width:480px) {
	#errorPage .logo {
		width:210px;
		height:30px;
		background:url(../images/logo_mobile.png) no-repeat 0 50%;
		background-size:auto 30px;
	}
	#errorPage .errorBox h2 {
		font-size:3.9em;
	}
	#errorPage .errorBox h3 {
		font-size:1.7em;
	}	
}
@media screen and (min-width:991px) {
	#errorPage {
		min-height:640px;
	}
	#errorPage .logo {
		width:460px;
		height:40px;
		background-size:auto 40px;
		margin:30px auto;
	}
	#errorPage .errorBox {	
		padding:60px 0;
	}	
	#errorPage .errorBox .acKey {
		top:30px;
		left:50%;
		margin-left:-450px;
	}
	#errorPage .errorBox h2 {
		font-size:4.9em;
	}
	#errorPage .errorBox h3 {
		font-size:2.1em;
	}
}
@media screen and (min-width:1260px) {
	#errorPage .logo {
        width:575px;
		height:50px;
		background-size:auto 50px;
    }
	#errorPage .errorBox h2 {
		font-size:5.9em;
	}
	#errorPage .errorBox h3 {
		font-size:2.7em;
	}
}


.ui-widget,
.ui-datepicker {
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
    font-size:1rem !important;
	z-index:2 !important;
}

/** comMain **/
#comMain {
	position:relative;
	width:100%;
	min-height:19.79vw;
	background:linear-gradient(0deg, #0a5a3c 0%, #00452d 100%);
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	border-radius:clamp(1.5rem, 5vw, 2.5rem);
	overflow:hidden;
}
#comMain::before {
	display:block;content:"";
	position:absolute;
	bottom:0;right:0;
	width:100%;height:100%;
	background-image:url(../images/comMain.webp);
	background-repeat:no-repeat;
	background-position:left bottom;
	background-size:cover;
	visibility:visible;
}
#comMain.cm1::before {
	background-image:url(../images/comMain_cm1.webp);
}
#comMain .container {
	align-content:center;
	position:relative;
	z-index:1;
}
.mianTitle {
	width:100%;
	min-height:10vw;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:1.5rem;
	text-shadow:2px 2px 10px rgba(0, 0, 0, 0.7);
}
.mianTitle h2 {
	color:#fff;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	font-size:clamp(2.25rem, 3vw, 3.75rem);
	font-weight:600;
}
.mianTitle p[lang="en"] {
	font-size:clamp(1.75rem, 2vw, 2.25rem);
	font-family:"Bahnschrift", Arial, Helvetica, sans-serif;
	color:#e6c8a0;
}
@media screen and (max-width:768px) {
	#comMain {min-height:220px;}
	.mianTitle {min-height:auto;}
	.mianTitle h2 {font-size:4.7em;}
}
@media screen and (max-width:520px) {
	#comMain .container {
		padding:20px 0;
	}
}
@media screen and (min-width:1260px) {
	#comMain {border-radius:40px;}
	.mianTitle h2 {font-size:6em;}
}


/** breadcrumbs **/
#breadcrumbs {
	width:100%;
	margin:20px auto;
}
#breadcrumbs ul {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	list-style:none;
	min-height:40px;
}
#breadcrumbs ul li {
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:10px;
	color:#000;
	font-size:1.5em;
	font-weight:400;
	line-height:1.6;
}
#breadcrumbs ul li + li:before {
	content:"";
	display:block;
	width:9px;
	height:9px;
	border-left:2px solid #0a5233;
	border-bottom:2px solid #0a5233;
	z-index:2;
	-webkit-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	transform:rotate(-135deg);
	margin-left:-1px;
}
#breadcrumbs ul li a {
	position:relative;
	display:inline-block;
	color:#000;
}
#breadcrumbs ul li a:hover,
#breadcrumbs ul li a:focus {
	color:#0e872a;
}
#breadcrumbs ul li a.bread-home {
	position:relative;
	padding-left:37px;
}
#breadcrumbs ul li a.bread-home:before {
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:50%;
	width:21px;
	height:21px;
	margin:-12px 0 0 5px;
	background:url(../images/icon-home.svg) 50% 50% no-repeat;
	background-size:contain;
	z-index:2;
}
#breadcrumbs ul li a.bread-home:hover:before,
#breadcrumbs ul li a.bread-home:focus:before {
	background-image:url(../images/icon-home.svg);
}
#breadcrumbs ul li a.bread-home:after {
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:-4px;
	width:30px;
	height:30px;
	background:#0a5a3c;
	border-radius:100%;
	z-index:1;
}
#breadcrumbs ul li a.bread-home:hover:after,
#breadcrumbs ul li a.bread-home:focus:after {
	background:#0e872a;
}
@media screen and (min-width:991px) {
	#breadcrumbs {
		margin:30px auto;
	}
	#breadcrumbs ul {
		justify-content:flex-end;
	}
	#breadcrumbs ul li {
		font-size:1.7em;
	}
	#breadcrumbs ul li a.bread-home {
		padding-left:50px;
	}
	#breadcrumbs ul li a.bread-home:before {
		width:30px;
		height:30px;
		margin:-13px 0 0 5px;
	}
	#breadcrumbs ul li a.bread-home:after {
		top:-5px;
		width:40px;
		height:40px;
	}
}
@media screen and (min-width:1260px) {
	#breadcrumbs ul li a.bread-home {
		padding-left:55px;
	}
}


/** comPage **/
#comPage {
	position:relative;
	width:100%;
	padding-bottom:40px;
	background:#FFF;
	box-sizing:border-box;
	margin:0 auto;
}
#comPage img {
	max-width:100%;
	height:auto;
}
#comPage .pageLeft,
#comPage .pageRight {
	position:relative;
	width:100%;
}
@media screen and (max-width:990px) {
	#comPage .pageLeft {
		margin:20px auto;
	}
}
@media screen and (min-width:991px) {
	#comPage {
		margin-top:2.2vw;
		padding-bottom:5.2vw;
	}
	#comPage .container:has(.pageLeft) {
		display:grid;
		grid-template-columns:260px 1fr;
		gap:30px;
	}
}
@media screen and (min-width:1260px) {
	#comPage .container:has(.pageLeft) {
		grid-template-columns:300px 1fr;
	}
}
@media screen and (min-width:1680px) {
	#comPage .container:has(.pageLeft) {
		grid-template-columns:340px 1fr;
		gap:40px;
	}
}


/** postShare **/
#postShare {
	display:flex;
	align-items:center;
}
@media screen and (max-width:640px) {
	.postShare {
		position:relative;
		margin-top:15px;
		justify-content:flex-end;
	}
}
/* ----- printBtn ----- */
.printBtn {
	position:relative;
	display:inline-block;
    width:50px;
    height:50px;
	border-right:1px solid #eaeaea;
	box-sizing:border-box;
}
.printBtn::before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:21px;
	height:21px;
	margin:-10.5px 0 0 -10.5px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#333;
	-webkit-mask-image:url(../images/icon-print.svg);
			mask-image:url(../images/icon-print.svg);
	-webkit-mask-size:21px 21px;
			mask-size:21px 21px;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.printBtn:hover:before,
.printBtn:focus span:before {
	background-color:#0e872a;
}
@media screen and (max-width:640px) {
	.printBtn {
		border:1px solid #ddd;
		margin-right:5px;
		-webkit-border-radius:100px;
		   -moz-border-radius:100px;
				border-radius:100px;
	}
}
@media screen and (min-width:991px) {
	.printBtn {
		width:50px;
		height:50px;
		line-height:50px;
	}
	.printBtn::before {
		background-size:cover;
	}
}


/** asideLeftNav **/
#asideLeftNav {
	position:relative;
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
}
#asideTitle .sideNav {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}

/** asideTitle **/
#asideTitle {
	position:relative;
	width:100%;
	display:flex;
	flex-direction:row;
	gap:10px;
}
#asideTitle h2 {
	width:calc(100% - 40px);
	color:#2c2e35;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	font-size:2.1em;
	font-weight:bold;
	line-height:135%;
	box-sizing:border-box;
}
#asideTitle .arrow {
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:99px;
	background-color:#666666;
}
#asideTitle .arrow::after {
	content:"";
	display:block;
	width:15px;
	height:15px;
	background-color:var(--text-white);
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:contain;
	mask-image:url(../images/triangular_arrow_down.svg);
}
@media screen and (max-width:990px) {
	#asideLeftNav {
		border:1px solid #CCC;
	}
	#asideTitle {
		align-items:center;
		padding:12px 14px;
	}
	#asideTitle h2 {
		width:calc(100% - 37px);
		font-size:1.7em;
	}
	#asideTitle h2::after {
		content:"选单";
		display:inline;
	}
	#asideLeftNav.open #asideTitle .arrow {
		transform:scaleY(-1);
	}
	#asideTitle .arrow {
		width:27px;
		height:27px;
	}
}
@media screen and (min-width:991px) {
	#asideLeftNav {
		display:flex;
		flex-direction:column;
		gap:30px;
	}
	#asideTitle {
		padding-right:5px;
	}
	#asideTitle h2 {
		font-size:3.5em;
	}
	#asideTitle .arrow {
		margin-top:11px;
	}
}
@media screen and (min-width:1260px) {
	#asideTitle h2 {
		font-size:4.1em;
	}
	#asideTitle .arrow {
		width:35px;
		height:35px;
		margin-top:13px;
	}
	#asideTitle .arrow::after {
		width:17px;
		height:17px;
	}
}
@media screen and (min-width:1680px) {
	#asideTitle {
		padding-right:10px;
	}
	#asideTitle h2 {
		font-size:4.7em;
	}
	#asideTitle .arrow {
		width:40px;
		height:40px;
		margin-top:14px;
	}
	#asideTitle .arrow::after {
		width:20px;
		height:20px;
	}
}


/** asideMenu **/
#asideMenu {
	width:100%;
	box-sizing:border-box;
	background-color:#e8e7e3;
	padding:20px;
}
#asideMenu > ul {
	position:relative;
	list-style:none;
	z-index:1;
}
#asideMenu > ul > li {
	position:relative;
	width:100%;
}
#asideMenu > ul > li > a {
	position:relative;
	display:inline-block;
	width:100%;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	color:#333333;
	font-size:1.7em;
	font-weight:bold;
	line-height:135%;
	padding:15px 40px 15px 15px;
	box-sizing:border-box;
}
#asideMenu > ul > li:hover > a,
#asideMenu > ul > li > a:hover,
#asideMenu > ul > li > a:focus {
	color:#0e872a;
}
#asideMenu > ul > li > a.dropBtn.open {
	color:#FFF;
	background:#333;
}
#asideMenu > ul > li.unit-now > a,
#asideMenu > ul > li.unit-now > a.dropBtn.open,
#asideMenu > ul > li:has(.unit-now) > a,
#asideMenu > ul > li:has(.unit-now) > a.dropBtn.open {
	color:#FFF;
	background:#0a5a3c;
}
#asideMenu > ul > li > a:after {
	content:"";
	display:block;    
	position:absolute;
	top:22px;
	right:20px;
	width:15px;
	height:15px;
	border:none;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#9fa3a6;
	-webkit-mask-size:100% 100%;
			mask-size:100% 100%;
	-webkit-mask-image:url(../images/nav-icon-detail.svg);
			mask-image:url(../images/nav-icon-detail.svg);
	transition:all 0.5s;
}
#asideMenu > ul > li > a.dropBtn:after {
	-webkit-mask-image:url(../images/nav-icon-more.svg);
			mask-image:url(../images/nav-icon-more.svg);
}
#asideMenu > ul > li > a.link:after {
	-webkit-mask-image:url(../images/nav-icon-link.svg);
			mask-image:url(../images/nav-icon-link.svg);
}
#asideMenu > ul > li > a.download:after {
	-webkit-mask-image:url(../images/nav-icon-download.svg);
			mask-image:url(../images/nav-icon-download.svg);
}
#asideMenu > ul > li:hover > a:after,
#asideMenu > ul > li > a:hover:after,
#asideMenu > ul > li > a:focus:after {
	background-color:#0e872a;
}
#asideMenu > ul > li.unit-now > a:after {
	background-color:#FFF;
}
#asideMenu > ul > li > a.dropBtn.open:after {
	background-color:#FFF;
	transform:scaleY(-1);
}
@media screen and (max-width:990px) {
	#asideMenu {
		display:none;
		padding:0;
	}
	#asideMenu > ul > li:has(.open) {
		background:#333333;
	}
	#asideMenu > ul > li.unit-now:has(.open) {
		background:#0a5a3c;
	}
	#asideMenu > ul > li + li {
		border-top:1px solid #fff;
	}
}
@media screen and (min-width:991px) {
	#asideMenu {
		position:relative;
		padding-bottom:8vw;
		border-radius:clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem) 0 0;
	}
	#asideMenu::after {
		content:"";
		display:block;
		width:100%;
		height:200px;
		background-image:linear-gradient(0deg, #fff 0%, #e8e7e3 100%);
		visibility:visible;
		position:absolute;
		left:0;
		bottom:0;
	}
	#asideMenu > ul > li {
		border-radius:clamp(1rem, 2.5vw, 1.5rem);
		overflow:hidden;
	}
	#asideMenu > ul > li.unit-now:has(ul) {
		box-shadow:0 5px 10px rgba(0, 0, 0, 0.05);
	}
	#asideMenu > ul > li + li {
		margin-top:10px;
	}
	#asideMenu > ul > li > a {
		font-size:1.9em;
	}
	#asideMenu > ul > li > a.dropBtn.open {
		border-radius:clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem) 0 0;
	}
}
@media screen and (min-width:1260px) {
	#asideMenu {
		padding:25px 25px 150px 25px;
	}
}
@media screen and (min-width:1680px) {
	#asideMenu {
		padding:30px 30px 200px 30px;
	}
	#asideMenu > ul > li > a {
		font-size:2.1em;
		padding:15px 40px 15px 20px;
	}
	#asideMenu > ul > li > a:after {
		top:23px;
	}
}


/** 左側選單 第二層 **/
#asideMenu > ul > li > ul {
	width:100%;
	list-style:none;
	padding:15px 0;
	box-sizing:border-box;
	background:#f5f5f5;
	overflow:hidden;
}
#asideMenu > ul > li.unit-now > ul,
#asideMenu > ul > li:has(.unit-now) > ul {
	background:#f0ecdb;
}
#asideMenu > ul > li > ul > li {
	display:inline-block;
	width:100%;
}
#asideMenu > ul > li > ul > li a {
	position:relative;
	display:inline-block;
	width:100%;
	color:#333333;
	font-size:1.7em;
	font-weight:bold;
	line-height:135%;
	padding:12px 50px 12px 30px;
	box-sizing:border-box;
}
#asideMenu > ul > li > ul > li a:hover,
#asideMenu > ul > li > ul > li a:focus {
	color:#0e872a;
}
#asideMenu > ul > li > ul > li.unit-now a {
	color:#6d5141;
	z-index:1;
}
#asideMenu > ul > li > ul > li.unit-now a:before {
	content:"";
	display:block;    
	position:absolute;
	top:0;
	left:15px;
	width:calc(100% - 30px);
	height:100%;
	background:#f7f6ed;
	border-radius:clamp(0.5rem, 1.5vw, 1rem);
	z-index:-1;
}
#asideMenu > ul > li > ul > li a:after {
	content:"";
	display:block;    
	position:absolute;
	top:19px;
	right:30px;
	width:15px;
	height:15px;
	border:none;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#9fa3a6;
	-webkit-mask-size:100% 100%;
			mask-size:100% 100%;
	-webkit-mask-image:url(../images/nav-icon-detail.svg);
			mask-image:url(../images/nav-icon-detail.svg);
	transition:all 0.5s;
}
#asideMenu > ul > li > ul > li a:hover:after,
#asideMenu > ul > li > ul > li a:focus:after {
	background-color:#0e872a;
}
#asideMenu > ul > li > ul > li.unit-now a:after {
	background-color:#6d5141;
}
#asideMenu > ul > li > ul > li a.link:after {
	-webkit-mask-image:url(../images/nav-icon-link.svg);
			mask-image:url(../images/nav-icon-link.svg);
}
#asideMenu > ul > li > ul > li a.download:after {
	-webkit-mask-image:url(../images/nav-icon-download.svg);
			mask-image:url(../images/nav-icon-download.svg);
}
@media screen and (max-width:990px) {
	#asideMenu > ul > li > ul {
		display:none;
		padding:0;
	}
	#asideMenu > ul > li > ul > li + li {
		border-top:1px dashed rgba(0,0,0,.3);
	}
	#asideMenu > ul > li > ul > li a {
		padding:15px 45px 15px 25px;
	}
	#asideMenu > ul > li > ul > li.unit-now a:before {
		left:0;
		width:100%;
		height:100%;
		border-radius:0;
	}
	#asideMenu > ul > li > ul > li a:after {
		top:22px;
		right:20px;
	}
}
@media screen and (min-width:991px) {
	#asideMenu > ul > li > ul {
		border-radius:0 0 clamp(1.25rem, 3vw, 1.875rem) clamp(1.25rem, 3vw, 1.875rem);
	}
	#asideMenu > ul > li > ul > li a {
		font-size:1.9em;
	}
}
@media screen and (min-width:1260px) {
}
@media screen and (min-width:1680px) {
	#asideMenu > ul > li > ul > li a {
		padding:15px 50px 15px 30px;
	}
	#asideMenu > ul > li > ul > li a:after {
		top:22px;
	}
}

/* ----- titHead ----- */
.titHead {
	width:100%;
	margin:0 auto 20px auto;
}
.titHead h2 {
	color:#2c2e35;
	font-family:"Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
	font-size:clamp(2rem, 3vw, 3rem);
	line-height:135%;
	font-weight:bold;
}
@media screen and (min-width:991px) {
	.titHead {
		margin-bottom:30px;
	}
	.titHead h2 {
		font-size:3.5em;
	}
}
@media screen and (min-width:1260px) {
	.titHead h2 {
		font-size:4.1em;
	}
}
@media screen and (min-width:1680px) {
	.titHead h2 {
		font-size:4.7em;
	}
}

/** searchCriteria **/
#searchCriteria {
	width:100%;
	text-align:center;
	padding:15px;
	box-sizing:border-box;
	margin:0 auto 20px;
	background:#e8e7e3;
	border-radius:clamp(1.5rem, 5vw, 2.5rem);
}
#searchCriteria .searchform {
	display:flex;flex-wrap:wrap;margin:-5px;}
#searchCriteria .sbox {
	display:inline-block;
	width:calc(100% - 10px);
	margin:5px;
	vertical-align:top;
}
#searchCriteria .sbox.sb1_2 {
	width:calc(20% - 10px);
}
#searchCriteria .sbox.sb1_3 {
	width:calc(30% - 10px);
}
#searchCriteria .sbox.sb1_4 {
	width:calc(40% - 10px);
}
#searchCriteria .sbox.sb1_5 {
	width:calc(50% - 10px);
}
#searchCriteria .sbox.sb1_6 {
	width:calc(60% - 10px);
}
#searchCriteria .sbox.sb1_7 {
	width:calc(70% - 10px);
}
/**/
#searchCriteria .dayInput {
	position:relative;
	display:inline-block;
	width:100%;
	box-sizing:border-box;
	padding:0;
}
#searchCriteria .dayInput span {
	position:absolute;
	left:0;
	top:0;
	width:45px;
	height:45px;
	background:url(../images/icon_calendar.svg) no-repeat 50% 50%;
	box-sizing:border-box;
	vertical-align:top;
	display:inline-block;
}
#searchCriteria .dayInput input {
	display:inline-block;
	width:100%;
	height:45px;
	color:#3C3C3C;
	font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:1.5em;
	line-height:45px;
	padding:0 0 0 45px;
	border:none;
	box-sizing:border-box;
	vertical-align:top;
	background:#FFF;
}
#searchCriteria span + .dayInput input {
    border-radius:0 99px 99px 0;
}
#searchCriteria input[placeholder] { color:#666; }
#searchCriteria input::-webkit-input-placeholder { color:#666; }
#searchCriteria input:-moz-placeholder { color:#666; }
#searchCriteria input::-moz-placeholder { color:#666; }
#searchCriteria input:-ms-input-placeholder { color:#666;}

#searchCriteria input:focus {
	color:#F06400;
	border:none;
}
#searchCriteria .listBar {
	display:inline-block;
	width:100%;
	height:45px;	
	color:#3C3C3C;
	font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:1.5em;
	line-height:45px;	
	cursor:pointer;
	text-indent:0.01px;
	text-overflow:"";
	padding:0 20px 0 10px;
	border:1px solid #ccc;
	box-sizing:border-box;
	background:#FFF url(../images/select-bg.svg) no-repeat right;
	appearance:none;
	border-radius:0;
}
#searchCriteria .firstTx + .listBar {
	border-radius:0 10px 10px 0;
	border-left:none;
}
#searchCriteria .keyGroup .listBar {
	margin-right:10px;
}
#searchCriteria .sbox.place .listBar {
	width:calc(100% - 180px);
}
#searchCriteria .listBar:focus {
	color:#FF6A00;
	border:none;
	background:#FFF url(../images/select-bg-on.svg) no-repeat right;
}
#searchCriteria .listBar option {
	color:#3C3C3C;
	padding:0 10px;
	border:none;
	background:#FFF; /* style the dropdown bg color */
}
#searchCriteria .listBar:-ms-expand {
	display:none; /* hide default arrow in IE10 */
}
#searchCriteria .search-query {
	display:inline-block;
	width:calc(100% - 55px);
	height:45px;
	color:#3C3C3C;
	font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:1.5em;
	line-height:45px;
	padding:0 10px;
	border:1px solid #fff;
	box-sizing:border-box;
	vertical-align:top;
	background:#FFF;
	margin-right:10px;
    border-radius:0 99px 99px 0;
}
#searchCriteria .firstTx + .search-query {
	border-left:none;
}
#searchCriteria .search-query:focus {
	color:#F06400;
}
#searchCriteria .search-btn {
	width:90px;
	height:45px;
	text-align:center;
	padding:0;
	margin:0;
	border:none;
	cursor:pointer;
	background:#666;
	border-radius:0;
	transition:all 0.5s ease;
	display:flex;align-items:center;
	justify-content:center;
	gap:8px;
    border-radius:99px;
	font-size:100%;
}
#searchCriteria .search-btn em {
	font-size:1.7em;
	font-style:normal;
	font-weight:400;
	color:#fff;
}
#searchCriteria .search-btn span {
	position:relative;
	display:block;
	width:20px;
	height:20px;
	vertical-align:middle;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
#searchCriteria .search-btn span::before {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	height:16px;
	width:16px;
	border:2px solid #FFF;
	box-sizing:border-box;
	border-radius:100px;
}
#searchCriteria .search-btn span::after {
	position:absolute;
	display:block;content:'';
	right:0;bottom:3px;
	width:9px;height:2px;	
	background:#FFF;
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
}
#searchCriteria .search-btn:hover,
#searchCriteria .search-btn:focus {
	background:var(--gold-chroma);
}

#searchCriteria .dayGroup,
#searchCriteria .keyGroup {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
#searchCriteria .dayGroup .firstTx,
#searchCriteria .keyGroup .firstTx {
	width:100px;
	font-size:1.7em;
	font-weight:400;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	background-color:#666;
	color:#fff;
	min-height:45px;
	display:flex;flex-wrap:wrap;
	justify-content:center;
	align-items:center;
    border-radius:99px 0 0 99px;
}

#searchCriteria .dayGroup .dayBox {
	width:calc(100% - 100px);
	border:1px solid #fff;
	background-color:#fff;
	border-radius:0;
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#searchCriteria .dayGroup .firstTx + .dayBox {
	border-left:none;
	border-radius:0 99px 99px 0;
}
#searchCriteria .dayGroup .inTx {
	width:30px;font-size:1.7em;font-weight:bold;
	display:block;text-align:center;
}
#searchCriteria .dayGroup .dayInput { width:calc(50% - 15px);}

#searchCriteria .keyGroup .search-query,
#searchCriteria .keyGroup .listBar { width:calc(100% - 200px);}
@media screen and (max-width:1500px) {
	#searchCriteria .sbox.sb1_5 {width:calc(100% - 10px);}
}
@media screen and (max-width:600px) {
	#searchCriteria .dayInput span {
		width:32px;
		background-size:22px auto;
		background-position:center right;
	}
	#searchCriteria .dayInput input {padding-left:40px;}
}
@media screen and (max-width:480px) {
	#searchCriteria .searchform {
		margin:0;
	}
	#searchCriteria .sbox.sb1_5 {
		width:100%;
		margin:0;
	}
	#searchCriteria .dayGroup .firstTx,
	#searchCriteria .keyGroup .firstTx {
		position:absolute;
		width:1px;
		height:1px;
		padding:0;
		margin:-1px;
		overflow:hidden;
		clip:rect(0,0,0,0);
		border:0;
		text-align:left;
		text-indent:-9999px;
		background:none;
	}
	#searchCriteria .dayGroup .firstTx + .dayBox {
		width:100%;
		border-radius:10px;
	}
	#searchCriteria .dayInput span {
		width:30px;
		background-size:20px auto;
	}
	#searchCriteria .dayGroup .inTx {
		font-size:1.5em;
	}
	#searchCriteria .dayInput input {
		padding-left:35px;
	}
	#searchCriteria .keyGroup .search-query {
		width:calc(100% - 100px);
		border-radius:10px;
	}
	#searchCriteria .search-btn {
		border-radius:10px;
	}
	#searchCriteria div + div {
		margin-top:10px !important;
	}
	#searchCriteria .dayInput input {
		border-radius:10px 0 0 10px;
	}
	#searchCriteria span + .dayInput input {
		border-radius:0 10px 10px 0;
	}
}
@media screen and (min-width:991px) {
	#searchCriteria {
		padding:20px;
		margin-bottom:25px;
	}
}
@media screen and (min-width:1260px) {
	#searchCriteria .dayInput span {
		width:50px;
		height:50px;
	}
	#searchCriteria .dayInput input {
		height:50px;
		line-height:50px;
		font-size:1.7em;
		padding-left:50px;
	}
	#searchCriteria .listBar {
		height:50px;
		font-size:1.7em;line-height:50px;
		padding:0 20px 0 15px;
	}
	#searchCriteria .search-query {
		width:calc(100% - 100px);height:50px;
		font-size:1.7em;line-height:60px;
		padding:0 15px;
	}
	#searchCriteria .search-btn {
		width:90px;height:50px;
	}
	#searchCriteria .keyGroup .search-query,
	#searchCriteria .keyGroup .listBar {
		width:calc(100% - 210px);
		margin-right:10px;
	}
	#searchCriteria .oneSection .firstTx,
	#searchCriteria .twoSection .firstTx,
	#searchCriteria .dayGroup .firstTx,
	#searchCriteria .keyGroup .firstTx {
		width:110px; min-height:50px;
	}
	#searchCriteria .oneSection select,
	#searchCriteria .oneSection input {
		width:calc(100% - 110px);
	}
	#searchCriteria .twoSection .lastBox {
		width:calc(100% - 110px);
	}
	#searchCriteria .dayGroup .dayBox {
		width:calc(100% - 110px);
	}
}


/* ----- Flatpickr 自訂 ----- */
.flatpickr-current-month {
	display:inline-flex !important;
    justify-content:center;
    flex-direction:row-reverse;
	gap:5px;
}
.flatpickr-current-month select,
.flatpickr-current-month .fp-year-select {
    appearance:menulist;
    background:transparent;
    border:none;
    border-radius:0;
    box-sizing:border-box;
    color:inherit;
    cursor:pointer;
    font-size:inherit;
    font-family:inherit;
    font-weight:300;
    height:auto;
    line-height:inherit;
    margin:-1px 0 0 0;
    outline:none;
    padding:0 10px 0 5px !important;
    position:relative;
    vertical-align:initial;
    -webkit-box-sizing:border-box;
    -webkit-appearance:menulist;
    -moz-appearance:menulist;
    width:auto
}
.flatpickr-current-month .fp-year-select:focus,.flatpickr-current-month .fp-year-select:active {
    outline:none
}
.flatpickr-current-month .fp-year-select:hover {
    background:rgba(0,0,0,0.05)
}
.flatpickr-current-month .fp-year-select .flatpickr-monthDropdown-month {
    background-color:transparent;
    outline:none;
    padding:0
}
.flatpickr-calendar.open {
	z-index:99 !important;
}
.fp-custom-btns {
	display:flex;
	justify-content:center;
	gap:10px;
	padding:10px;
	border-top:1px solid #e9e9e9;
}
.fp-custom-btns button {
	width:100%;
	background:none;
	border:1px solid #ccc;
	border-radius:3px;
	cursor:pointer;
	font-size:1em;
	padding:5px 12px;
	color:#333;
	transition:background .15s, border-color .15s;
}
.fp-custom-btns button:hover {
	background:#e6e6e6;
}
.fp-custom-btns .fp-btn-today {
	border-color:#e8523a;
	color:#e8523a;
}
.fp-custom-btns .fp-btn-today:hover {
	color:#fff;
	background:#e8523a;
}
.fp-custom-btns .fp-btn-today:disabled {
	cursor:not-allowed;
	background: #eee !important;
	border-color:#ddd !important;
	color:#aaa !important;
}
.fp-custom-btns .fp-btn-clear:hover {
	color:#fff;
	border-color:#0e872a;
	background:#0e872a;
}


/** page **/
#page {
	display:flex;
	width:100%;	
	flex-direction:column;
	margin:30px auto 0 auto;
}
#page:after {
	display:none;
}	
#page .total {
	width:100%;
	display:inline-block;
	color:#000;
	font-size:2em;
	line-height:150%;
	text-align:center;
}
#page .total span {
	font-weight:bold;
	color:#7d0000;
	font-size:1.1rem;
	display:inline-block;
	margin:0 0.5em;
}
#page .num {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:10px;
	margin-top:20px;
}
#page .num a {
	display:none;
	font-family:Arial, Helvetica, sans-serif;
	width:45px;
	height:45px;
	font-size:1.5em;
	color:#000;
	font-weight:bold;
	background:#f3f4ef;
	vertical-align:middle;
	text-align:center;
	line-height:45px;
	border:none;
	box-sizing:border-box;	
	border-radius:99px;
}
#page .num a:hover,
#page .num a:focus {
	color:#FFF;
	background:var(--gold-chroma);
}
#page .num .cur {	
	display:inline-block;
	width:45px;
	height:45px;
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:2.1em;
	font-weight:bold;
	text-align:center;	
	line-height:45px;
	vertical-align:middle;
	cursor:text;
	border-radius:99px;
}
#page .num a.btn-first {
	position:relative;
	display:inline-block;
	width:45px;
	height:45px;
	text-align:left;
	text-indent:-9999px;
	background:#000000;
	box-sizing:border-box;
}
#page .num a.btn-first:before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:1px;
	height:13px;
	background-color:#fff;
	margin:-6.5px 0 0 -6px;
	z-index:2;
	transition:all 0.5s ease;
}
#page .num a.btn-first:after {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:9px;
	height:9px;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:-5px 0 0 1px;
	z-index:2;
	transform:rotate(45deg);
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#page .num a.btn-prev {
	position:relative;
	display:inline-block;
	width:45px;
	height:45px;
	text-align:left;
	text-indent:-9999px;
	background:#626262;
	box-sizing:border-box;
}
#page .num a.btn-prev:after {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:9px;
	height:9px;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:-5px 0 0 -3px;
	z-index:2;
	transform:rotate(45deg);
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#page .num a.btn-next {
	position:relative;
	display:inline-block;
	width:45px;
	height:45px;
	text-align:left;
	text-indent:-9999px;
	background:#626262;
	box-sizing:border-box;
}
#page .num a.btn-next:after {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:50%;
	width:9px;
	height:9px;
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
	margin:-5px -3px 0 0 ;
	z-index:2;
	transform:rotate(45deg);
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#page .num a.btn-last {
	position:relative;
	display:inline-block;
	width:45px;
	height:45px;
	text-align:left;
	text-indent:-9999px;
	background:#000000;
	box-sizing:border-box;
}
#page .num a.btn-last:before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:50%;
	width:1px;
	height:13px;
	background-color:#fff;
	margin:-6.5px -6px 0 0;
	z-index:2;
	transition:all 0.5s ease;
}
#page .num a.btn-last:after {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:50%;
	width:9px;
	height:9px;
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
	margin:-5px 1px 0 0;
	z-index:2;
	transform:rotate(45deg);
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#page .num a.btn-first,
#page .num a.btn-prev,
#page .num a.btn-next,
#page .num a.btn-last {
	border-radius:99px;
}
#page .num a.btn-first:hover,
#page .num a.btn-first:focus,
#page .num a.btn-prev:hover,
#page .num a.btn-prev:focus,
#page .num a.btn-next:hover,
#page .num a.btn-next:focus,
#page .num a.btn-last:hover,
#page .num a.btn-last:focus {
	background:var(--gold-chroma);
}
@media screen and (min-width:991px) {
	#page {
		justify-content:space-between;
		flex-direction:column;
		align-items:center;
		margin-top:40px;
	}
	#page .num {
		gap:6px;
	}
	#page .num a {
		display:inline-block;
		font-weight:normal;
	}
	#page .num .cur {
		color:#FFF;
		font-size:1.5em;		
		background:#0a5a3c;
	}
}
@media screen and (min-width:1260px) {
	#page .num {
		gap:10px;
	}
	#page .num a {
		width:50px;
		height:50px;
		font-size:1.7em;
		line-height:50px;
	}
	#page .num .cur {
		width:50px;
		height:50px;
		font-size:1.7em;	
		line-height:50px;
	}
	#page .num a.btn-first,
	#page .num a.btn-prev,
	#page .num a.btn-next,
	#page .num a.btn-last {
		width:50px;
		height:50px;
	}
}


@media print {
	#comBar,
	#topMenu {
		display:none!important;
	}
	#comPage {
		margin-top:0!important;
	}
	#comPage .pageLeft {
		display:none!important;
	}
	#articleBox .titHead h2 {
		margin:0!important;
	}
	#articleBox .titHead h2::before {
		display:none!important;
	}
}