html {
	height: 100%;
}

.head {
	height: 100%;
}

.body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: RGB(200, 200, 200);
}

.page-form {
	height: 100%;
}

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
}

/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
}

	/* 網頁捲軸【滑過時】把手的顏色 */
	::-webkit-scrollbar-thumb:hover {
		border-radius: 40px;
		background-color: RGB(160, 160, 160);
		border: 4px solid rgba(240, 240, 240, 1);
	}

/*
.Header
{
	width: 100%;
	height: auto;
}

.Body
{
	width: 100%;
	height: 100%;
}

.Footer
{
	width: 100%;
	height: auto;
}

.Body_Left
{
	width: 150px;
	height: auto;
	float: left;
}

.Body_Right
{
	height: auto;
	float: left;
}
	
*/

.page-footer {
	padding-top: 5px;
	clear: both;
	width: 100%;
	height: 50px;
	background-color: RGB(200, 200, 200);
}

.page-container {
	/* 改了裡面就不會是變動的*/
	max-width: 1920px;
	margin: 0px auto;
}

.page-body {
	position: relative;
	margin-top: 58px;
	background-color: RGB(240, 240, 240);
	height: 100%;
	min-height: 100%;
	/* 此寬度關乎整個內容的寬度 */
	/* 改了會影響動態排阪，但是不影響滑鼠滾動的比例*/
	width: 100%;
}


.page-header {
	position: fixed;
	width: 1920px;
	margin: 0 auto;
	height: 58px;
	top: 0px;
	min-height: 58px;
	z-index: 100;
	background-color: rgb(110, 160, 170);
	/*
	position: fixed;
	width: 100%;
	height: 58px;
	min-height: 58px;
	margin: 0px;
	float: left;
	z-index: 100;
	background-color: rgb(110, 160, 170);
	*/
}

.sub {
	position: relative;
	float: right;
	width: calc(100% - 250px);
	display: block;
	min-height: 100%;
	background-color: rgb(255, 255, 255);
	overflow: hidden;
}


.sub-content {
	min-height: 100vh;
}


.main {
	position: fixed;
	width: 250px;
	height: 100%;
	background-color: RGB(240, 240, 240);
	min-height: calc(100% - 50px);
	overflow-x: hidden;
}

.header-logo {
	position: relative;
	float: left;
	width: 250px;
	height: 58px;
	background-color: RGB(240, 240, 240);
}

.header-logo-item {
	width: 250px;
	height: 58px;
	margin-top: 12px;
	background-position: center;
	background-size: 100%, 100%;
	background-image: url("/resources/images/logo.png");
	background-repeat: no-repeat;
}

.header-menu {
	height: inherit;
	width: 100%;
	background-color: RGB(110, 160, 170);
}

.header-menu-item {
	position: relative;
	width: auto;
	height: 58px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	top: 50%;
	transform: translate(0%,-50%);
	transition: 0.2s;
}

	.header-menu-item:hover {
		height: 58px;
		background-color: RGB(80, 130, 140);
	}

.header-menu-item-icon {
	width: auto;
	height: 58px;
	min-height: 44px;
	padding-left: 5.8px;
	padding-right: 0px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-menu-item-text {
	width: auto;
	height: 58px;
	min-height: 44px;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 1px 0px RGB(80, 80, 80);
	color: RGB(255, 255, 255);
	text-align: center;
	padding-left: 5.8px;
	padding-right: 5.8px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-menu-item-divider {
	width: 0px;
	height: 40px;
	min-height: 40px;
	background-color: RGB(255, 255, 255);
	opacity: 1;
	text-align: center;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 50%;
	transform: translate(0%,-50%);
}

.fac-white {
	color: white;
	font-size: 24px;
}

.fac-black {
	color: RGB(80, 80, 80);
	font-size: 20px;
	padding-right: 6px;
}

i.fas.more {
	font-size: 20px;
	padding-left: 2px;
	color: RGB(160, 40, 0);
}

.fac-black-title {
	color: RGB(110, 160, 170);
	font-size: 28px;
}

.default-container {
	position: relative;
	max-width: calc(1920px - 250px);
}

.owl-container {
	padding: 0px 20px 0px 20px;
	width: 100%;
	height: 100%;
	position: relative;
}

.owl-carousel .owl-item img {
	display: inline-block;
	width: auto;
	height: 360px !important;
}

/* 投影片設定 */
.slideshow-containerNew {
	padding: 20px;
	width: 100%;
	position: relative;
	float: left;
}
/*
	.page-body:after {
		content: "";
		display: block;
		clear: both;
	}
*/

.main-menu-list { /*定選單寬度*/
}

.site-map {
	font-size: 18px;
	width: 100%;
	text-align: left;
	color: RGB(80, 80, 80);
	margin-bottom: 10px;
}

	.site-map a {
		width: 100%;
		text-align: left;
		color: RGB(110, 160, 170);
	}
		.site-map a:hover {
			width: 100%;
			text-align: left;
			color: RGB(110, 160, 170);
		}


.tree {
}

.tree a {
	display: block;
	text-decoration: none;
	font-weight: bold;
}

	.tree td.subDetailnav a {
		color: RGBA(80, 80, 80, .7);
	}
		.tree td.subDetailnav a:hover {
			color: RGB(255, 255, 255);
		}

.tree a:link {
	color: RGB(80, 80, 80);
	text-decoration: none;
}

.tree a:visited {
	color: RGB(80, 80, 80);
	text-decoration: none;
}

.tree a:hover {
	color: RGB(255, 255, 255);
}

.tree a:active {
	color: RGB(255, 255, 255);
	text-decoration: none;
}

	.tree td.mainnav { /*主選單*/
		width: auto;
		font-size: 26px;
		padding-left: 20px;
		padding-top: 20px;
		padding-bottom: 10px;
		position: relative;
	}

	.tree td.mainnav::before { /*主選單*/
		position: absolute; /*絕對定位*/
		content: ""; /*沒有加這段就不會產生偽元素*/
		width: 100%;
		height: 4px;
		background-color: RGB(110, 160, 170);
		bottom: 10px;
		z-index: 10;
	}

		.tree td.mainnav::after { /*主選單*/
			position: absolute; /*絕對定位*/
			content: ""; /*沒有加這段就不會產生偽元素*/
			width: 200px;
			background-color: RGB(200, 200, 200);
			height: 2px;
			bottom: 10px;
		}

	.tree a.mainnav:hover { /*主選單*/
		color: rgb(80, 80, 80);
	}

	.tree td.subnav { /*次選單*/
		position: relative;
		font-size: 26px;
		padding-left: 20px;
		width: 100%;
		/*
		border-top: solid;
		border-color: RGB(230, 230, 230);*/
	}

	.tree td.subnav:hover { /*次選單hover*/
		z-index: 1;
	}

		.tree td.subnav:hover::after { /*次選單*/
			position: absolute; /*絕對定位*/
			content: "";
			background-color: RGB(110, 160, 170);
			width: 100vw;
			height: 100%;
			top: 0;
			left: -20px;
			z-index: -1;
		}

	.tree td.subDetailnav { /*細項*/
		font-size: 22px;
		position: relative;
		padding: 0px 0px 0px 20px;
		width: 100vw;
		z-index: 1;
	}

	.tree td.subDetailnav:hover { /*細項hover*/
		background-color: RGB(110, 160, 170);
	}

		.tree td.subDetailnav:hover::after { /*細項*/
			position: absolute; /*絕對定位*/
			content: "";
			background-color: RGB(110, 160, 170);
			width: 100vw;
			height: 100%;
			top: 0;
			left: -40px;
			z-index: -1;
		}


/* 頁面container */
.sub-container {
	width: 100%;
}

/* 小首頁頁面 */
.sub-front-page-container {
	/* 用於使小首頁的頁面寬度維持全螢幕寬度 */
	width: calc(1920px - 300px);
}

/* 清單頁面 */
.list-container {
	/* 用於使list的頁面寬度維持全螢幕寬度 */
	width: calc(1920px - 300px);
}

/* 詳細頁面 */
.detail-container {
	color: RGB(80, 80, 80);
	/* 用於使detail的頁面寬度維持全螢幕寬度 */
	width: calc(1920px - 300px);
	margin: 10px;
}

.detail-left-side {
	float: left;
	width: 73%;
	height: 100%;
	clear: both;
}

.detail-main-70 {
	position: relative;
	width: 70%;
	float: left;
	margin-top: 20px;
	/* 
	border-bottom: solid;
	border-bottom-width: 2px;
	border-color: RGB(200, 200, 200);
	*/
}

.detail-main-100-center {
	position: relative;
	width: 100%;
	float: right;
	margin-top: 40px;
	margin-bottom: 40px;
	border-bottom: solid;
	border-bottom-width: 2px;
	border-color: RGB(200, 200, 200);
}


.detail-main-title-center {
	position: relative;
	font-size: 16pt;
	font-weight: bold;
	text-align: center;
}

.detail-main-title-center::before {
	position: absolute;
	content: ""; /*沒有加這段就不會產生偽元素*/
	width: 20%;
	height: 4px;
	background-color: RGB(110, 160, 170);
	float: left;
	top: 30px;
	left: 40%;
	z-index: 10;
}


.detail-main-100 {
	position: relative;
	width: 100%;
	float: left;
	margin-top: 20px;
	margin-bottom: 10px;
}

/* 標題底線 */
.underline-1 {
	border-bottom: solid;
	border-bottom-width: 1px;
	border-color: RGB(200, 200, 200);
}

.underline-2 {
	border-bottom: solid;
	border-bottom-width: 2px;
	border-color: RGB(200, 200, 200);
}

.detail-main-title {
	position: relative;
	font-size: 16pt;
	font-weight: bold;
	text-align: left;
	float: left;
}

.detail-main-title-underline {
	position: relative;
	font-size: 16pt;
	font-weight: bold;
	text-align: left;
	float: left;
}

	.detail-main-title-underline::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 4px;
		background-color: RGB(110, 160, 170);
		float: left;
		top: 30px;
		z-index: 10;
	}

.detail-main-content {

}

.detail-main-sub-100 {
	position: relative;
	width: 100%;
	float: left;
	margin-top: 20px;
	margin-bottom: 10px;
	border-bottom: solid;
	border-bottom-width: 1px;
	border-color: RGB(200, 200, 200);
}


.detail-main-sub-title {
	position: relative;
	font-size: 16pt;
	font-weight: bold;
	text-align: left;
	float: left;
}

/*
	.detail-main-sub-title::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 2px;
		background-color: RGB(110, 160, 170);
		float: left;
		top: 31px;
		z-index: 10;
	}
*/


.detail-main-sub-title-icon {
	padding-right: 8px;
}

.color-brown {
	color: brown;
}

.color-blue {
	color: RGB(110, 110, 170);
	color: RGB(7, 105, 180);
	color: RGB(75, 120, 205);
}
.color-orange {
	color: RGB(170, 150, 110);
	color: RGB(255, 170, 0);
	color: RGB(255, 153, 52);
}
.color-red {
	color: RGB(180, 0, 0);
	color: RGB(234, 67, 53);
	color: RGB(255, 51, 52);
}
.color-yellow {
	color: RGB(255, 204, 0);
}

.detail-content {
	clear: both;
}

.detail-title-icon {
	font-size: 18pt;
	color: RGB(110, 160, 170);
	padding-right: 8px;
}

.detail-title {
	font-size: 16pt;
	font-weight: bold;
	text-align: left;
}

.detail-content {
	font-size: 14pt;
	text-align: left;
}

.detail-star-container {
	margin: 10px 0px 10px 0px;
	float: left;
	clear: both;
}

.detail-star-title {
	font-size: 16px;
	color: RGB(80, 80, 80);
	padding-right: 4px;
	float: left;
}

.detail-star {
	font-size: 16px;
	float: left;
	color: RGB(255, 204, 0);
}

.detail-tag-container {
	margin: 10px 0px 10px 0px;
	float: left;
	clear: both;
}

.detail-tag {
	background-color: rgb(244, 244, 244);
	color: RGB(80, 80, 80);
	margin-right: 20px;
	padding: 6px 8px 6px 8px;
	float: left;
	border-color: RGB(230, 230, 230);
	border-width: 1px;
	border-style: solid;
}

.detail-tag-icon {
	padding-right: 6px;
	font-size: 14px;
	color: RGB(255, 103, 154);
}

.detail-tag hover {
}

.detail-photo-item-container {
	position: relative;
	z-index: 1;
}

.detail-photo-item-photo-container {
    max-width: 1280px;
    margin: 20px 0px 0px 0px;
}

.detail-photo-item-photo-main {
	max-width: 100%;
	width: 80%;
	float: left;
}

.detail-photo-item-photo-sub-ori {
	max-width: 18%;
	margin: 0px 0px 1% 1%;
	float: left;
}

.detail-photo-item-photo-sub {
	max-width: 18%;
	margin: 0px 0px 1% 1%;
	float: left;
}

.detail-photo-item-photo-src {
	max-width: 18%;
	object-fit: cover;
	margin: 0px 0px 1% 1%;
	float: left;
}

.detail-photo-item-text {
	background-color: RGB(248, 248, 248);
	padding: 20px;
	min-height: 28px;
	display: block;
	font-size: 12pt;
	text-decoration: none;
	color: inherit;
	text-align: left;
	text-overflow: ellipsis;
	clear: both;
}

.detail-right-side {
	float: right;
	width: 25%;
	height: 100%;
	margin-left: 2%;
}

.detail-map-container {
	/*background-color: rgb(255, 250, 230);*/
	background-color: rgb(248, 248, 248);
	margin-top: 20px;
	padding: 10px 10px 10px 10px;
	border-style: solid;
	border-color: RGB(240, 240, 240);
	border-width: 1px;
	border-radius: 10px;
	float: right;
}

/*
	.detail-map-container::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		opacity: 1;
		transform: translate(-50%, -50%);
		background-color: white;
		filter: drop-shadow(0px 0px 5px #BEBEBE);
		z-index: -1;
	}
*/

.detail-map-title-icon {
	transform: rotate(-45deg);
	left: -20px;
	padding-right: 10px;
	font-size: 20pt;
	text-align: left;
	float: left;
}

.detail-map-info {
	float: left;
	width: 100%;
}

.detail-map-title {
	position: relative;
	font-size: 14pt;
	font-weight: bold;
	text-align: left;
	padding: 0px 10px 10px 10px;
}

	.detail-map-title::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 1px;
		top: 30px;
		left: 0px;
		background-color: RGB(200, 200, 200);
		z-index: 10;
	}

.detail-map-info-list-bulleted {
	margin: 12px 8px 12px 8px;
	width: 4px;
	height: 4px;
	float: left;
	background-color: RGB(110, 160, 170);
	clear: both;
}

.detail-map-info-list {
	font-size: 12pt;
	text-align: left;
	/**
	border-bottom-style: solid;
	border-bottom-color: RGB(170, 80, 80);
	border-bottom-width: 1px;
	*/
}

i.detail-map-info-icon {
	width: 24px;
	font-size: 10pt;
	text-align: center;
	padding-right: 4px;
}

.detail-map-map {
	width: 100%;
	height: 360px;
	float: left;
	margin: 12px 0px 12px 0px;
}

.detail-main-footer-container{
	padding-top: 20px;
}

.detail-main-footer-item {
	font-size: 14px;
	color: RGB(80, 80, 80);
	float: right;
	clear: both;
}


.default-random-area-table {
	background-color: white;
	border-radius: 10px;
	/* 100除以width的%數為一個畫面能容納的表格數量 */
	width: 25%;
	height: 250px;
	padding: 20px 20px 20px 20px;
	position: relative;
	float: left;
}


.Table_Td_One {
	width: 200px;
	height: 20px;
	text-align: center;
	font-size: 18pt;
	line-height: 18px;
	background-color: #F9FCC5;
}

.Table_Td_Center
{
	height: 20px;
	text-align: center;
}

.Table_Td_Edit
{
	width: 150px;
	height: 25px;
	text-align: center;
}
/*
a:link
{
	font-size: 12px;
	color: #003399;
	text-decoration: none;
}

a:visited
{
	font-size: 12px;
	color: #003399;
	text-decoration: none;
}

a:hover
{
	font-size: 12px;
	text-decoration: underline;
}
*/


.table1
{
	background-color: #F8F8F8;
}

/*  20240321  begin */
.table_under_map {
	
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.row_under_map {
	min-width: 100%;
	display: grid;
	grid-template-columns: inherit;
}

.cell_under_map {
	min-width: 100%;
	padding: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*  20240321 end */

.boarder1
{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #CDCF65;
	border-right-color: #CDCF65;
	border-bottom-color: #CDCF65;
	border-left-color: #CDCF65;
	border-top-color: #CDCF65;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
.text12
{
	font-size: 12px;
	line-height: 17px;
}

.item-list-contaner {
	position: relative;
	float:left;
	width: 25%;
}

.item-list-content {
	font-size: 18px;
	line-height: 24pt;
	height: 25px;
	color: RGB(80, 80, 80);
	border: hidden;
	text-align: left;
	text-decoration: none;
	padding-left: 6px;
}

.item-list-content:hover {
	color: RGB(110, 160, 170);
}


	.item-list-content::before {
		position: relative;
		content: "";
		float: left;
		width: 4px;
		height: 4px;
		margin-top: 13px;
		left: -6px;
		background-color: RGB(80, 80, 80);
		transition: 0.2s;
	}

	.item-list-content:hover::before {
		content: "";
		margin-top: 12px;
		width: 6px;
		height: 6px;
		transform: rotate(45deg);
		background-color: RGB(110, 160, 170);
	}

.gvclass {
	border-color: RGB(240, 240, 240);
	border-style: solid;
	border-width: 1px;
}

/* 交通資訊所使用的Table的container */
.random-title-table-container {
	background-color: white;
	border-radius: 10px;
	/* 100除以width的%數為一個畫面能容納的表格數量 */
	width: 100%;
	height: 250px;
	padding: 20px 20px 20px 20px;
	position: relative;
	float: left;
}


.portlet-main-title {
	font-size: 24px;
	font-weight: bold;
	color: RGB(80, 80, 80);
	padding: 10px;
	float: left;
}

/* 表格title的部分，分為一般title 及 有項目符號(list-bulleted)的title */
.portlet-title, .portlet-title-list-bulleted {
	text-align: left;
	position: relative;
	font-size: 18px;
	color: RGB(80, 80, 80);
	border-color: white;
	height: 26px;
}

/* 表格title的部分, 標題要往左靠 */
.portlet-title {
}

/* 表格title的部分, 標題要往左靠 */
	.portlet-title th {
		position: relative;
		padding-left: 8px;
		content: "";
		left: 0px;
		height: 32px;
		background-color: RGB(110, 160, 170);
		font-weight: 400;
		color: white;
		z-index: 10;
	}

/* 表格title的部分, 有項目符號(list-bulleted)的title標題要往左靠 */
.portlet-title-list-bulleted {
	height: 30px; /* 不設高度的話灰色會跑到藍色上面 */
	width: 100%;
	/* 下底線灰色線條 */
	border-bottom: solid;
	border-bottom-width: 1px;
	border-color: RGB(100, 100, 100);
	float: left;
}

/* 下底線藍綠色線條 */
.portlet-title-list-bulleted th {
	border-bottom: solid;
	border-bottom-width: 4px;
	border-color: RGB(110, 160, 170);
	z-index: 10;
}

/* 表格title的部分, 有項目符號(list-bulleted)的title標題要往左靠
	*原設計以before與after去實現，但是在寬度設為百分比時會有線條沒延伸到後方的問題
.portlet-title-list-bulleted {
	float: left;
}
 */

/* 表格title的部分, 下底線藍綠色線條
	*原設計以before與after去實現，但是在寬度設為百分比時會有線條沒延伸到後方的問題
.portlet-title-list-bulleted::before {
	position: absolute;
	content: "";
	left: 0px;
	width: 100%;
	height: 4px;
	background-color: RGB(110, 160, 170);
	bottom: -2px;
	z-index: 10;
}
*/

/* 表格title的部分, 下底線灰色線條
	*原設計以before與after去實現，但是在寬度設為百分比時會有線條沒延伸到後方的問題
.portlet-title-list-bulleted::after {
	position: absolute;
	content: "";
	left: 0px;
	width: 550px;
	height: 1px;
	background-color: RGB(200, 200, 200);
	bottom: -2px;
}
*/

/* 表格body的td部分，分為一般body 及 有項目符號(list-bulleted)的body */
.portlet-body td, .portlet-body-alternating td, .portlet-body-list-bulleted td, .portlet-body td, .portlet-body-alternating td, .portlet-body-list-bulleted td {
	font-size: 18px;
	line-height: 24pt;
	height: 25px;
	padding-left: 4px;
	color: RGB(80, 80, 80);
	text-decoration: none;
}

	/* 表格body的a部分，分為一般body 及 有項目符號(list-bulleted)的body */
.portlet-body a, .portlet-body-alternating a, .portlet-body-list-bulleted a {
	font-size: 18px;
	line-height: 24pt;
	height: 25px;
	padding-left: 4px;
	color: RGB(80, 80, 80);
	text-decoration: none;
}

/* 表格body的a部分，分為一般body 及 有項目符號(list-bulleted)的body hover */ 
.portlet-body-alternating:hover a, .portlet-body-list-bulleted:hover a {
	color: RGB(110, 160, 170);
	color: RGB(202, 80, 16);
	text-decoration: none;
}

/* 表格body的部分, 有項目符號(list-bulleted)的body要稍微內縮(因為前面有項目符號) */
.portlet-body-list-bulleted td {
	max-width: 0px; /* TD須有此屬性才會顯示... */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 20px;
}

/* 表格body的部分, 有項目符號(list-bulleted)的body要稍微內縮(因為前面有項目符號) hover */
.portlet-body-list-bulleted:hover td {
	font-weight: bold;
	padding-left: 20px;
}


tr.portlet-body-list-bulleted {
}

/* 表格body的部分, 奇數行 td*/
.portlet-body td {
	background-color: RGB(255, 255, 255);
	border-bottom-style: solid;
	border-bottom-color: RGB(230, 230, 230);
	border-bottom-width: 1px;
}

/* 表格body的部分, 奇數行 a*/
.portlet-body a {
	color: RGB(60, 110, 120);
}

/* 表格body的部分, 奇數行 hover td, a */
.portlet-body:hover td, .portlet-body:hover a {
	background-color: RGB(240, 240, 240);
	font-weight: bold;
}

/* 表格body的部分, 偶數行 */
.portlet-body-alternating td {
	background-color: RGB(255, 255, 255);
	border-style: solid;
	border-bottom-color: RGB(230, 230, 230);
	border-bottom-width: 1px;
}


/* 表格body的部分, 偶數行 a */
.portlet-body-alternating a {
	color: RGB(60, 110, 120);
}

/* 表格body的部分, 偶數行hover td a */
.portlet-body-alternating:hover td, .portlet-body-alternating:hover a {
	background-color: RGB(240, 240, 240);
	font-weight: bold;
}



/* 表格body的部分, 這個是項目前的點點*/
.portlet-body-list-bulleted td::before {
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	left: 30px;
	margin-top: 13px;
	background-color: RGB(80, 80, 80);
	transition: 0.2s;
}

/* 表格body的部分, 這個是項目前的點點的hover*/
.portlet-body-list-bulleted td:hover::before {
	position: absolute;
	content: "";
	display: inline-block;
	margin-top: 12px;
	width: 6px;
	height: 6px;
	left: 30px;
	transform: rotate(45deg);
	background-color: RGB(110, 160, 170);
	background-color: RGB(202, 80, 16);
}


.portlet-footer
{
	background-color: #FFFFFF;
	line-height: 20px;
	border-color:#CCCCCC;
	border:solid 1px lightgray;
	border-color:#CCCCCC;
    border-width:1px;
    border-collapse:collapse;
    height:22px;
    border-style:solid;
}

.portlet-more {
	float: right;
	width: 88px;
	padding-top: 0px;
	padding-right: 24px;
	display: flex;
	justify-content: center;
}

	.portlet-more a {
		font-size: 18px;
		color: RGB(80, 80, 80);
		text-decoration: none;
	}

	.portlet-more:hover {
		background-color: RGB(240, 240, 240);
		border-radius: 10px;
		/* 框線
		color: RGB(230, 230, 230);
		border-width: 0.5px;
		border: solid;
		*/
	}

	.portlet-more::after {
		position: absolute;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 18px;
		content: "\f0a9";
		color: RGB(110, 160, 170);
		right: 30px;
	}

	.portlet-more:hover::after {
		color: RGB(110, 160, 170);
	}


.portlet-table {
	font-size: 18px;
	background-color: RGB(230, 230, 230);
	line-height: 25px;
	border: solid 1px lightgray;
	border-color: #CCCCCC;
	border-width: 1px;
	border-collapse: collapse;
	height: 25px;
	border-style: solid;
}

.portlet-table a {
		font-size: 18px;
		text-decoration: none;
	}

.guide-container {
	width: 100%;
}

.guide-item {
	position: relative;
	width: 23%;
	float: left;
	padding: 0.8%;
	margin: 1%;
	z-index: 1;
	color: rgb(80, 80, 80);
}

.guide-item-img {
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 正方形-100%, 4:3-75%, 3:4-133.33%*/
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

	.guide-item-img:hover {
	}

		.guide-item-img:hover::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,0.1);
			pointer-events: none;
		}

.guide-item:hover {
	color: black;
}

	/* 相片白框部分 */
	.guide-item::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		opacity: 1;
		transform: translate(-50%, -50%);
		background-color: white;
		filter: drop-shadow(0px 0px 5px #BEBEBE);
		z-index: -1;
	}


	/* 線條延伸的樣式
	.guide-item:hover::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		opacity: 1;
		transform: translate(-50%, -50%);
		border-width: 2px;
		border-style: solid;
		border-color: RGB(110, 160, 170);
		transition: 0.2s;
		z-index: -1;
	}
	*/

	/* 相片樣式*/

	/* 相片白框部分hover的陰影效果 */
	.guide-item:hover::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		opacity: 1;
		transform: translate(-50%, -50%);
		background-color: white;
		filter: drop-shadow(0px 0px 5px #333);
		z-index: -1;
	}

	/* 郵戳 */
	.guide-item:hover::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-size: 100px 100px;
		top: 5%;
		left: 65%;
		opacity: 1;
		background-image: url(../../Resources/images/postmark.png);
		background-repeat: no-repeat;
		filter: drop-shadow(0px 0px 1px white);
		z-index: 1;
	}

	/* 木夾
	.guide-item:hover::after {
		position: absolute;
		background-image: url(Resources/images/clip.png);
		content: "";
		width: 50px;
		height: 50px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	*/

	.guide-item img {
		width: 100%;
		/*border-radius: 10px;*/
	}

		.guide-item img:hover {
			border-radius: 0px;
			filter: brightness(1.1);
			transition: .2s;
		}


.guide-item-text {
	display: block;
	width: 100%;
	min-height: 28px;
	font-size: 14pt;
	font-weight: bold;
	text-decoration: none;
	color: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
	.guide-item-text:hover {
		font-weight: bold;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
	}

	.guide-item-text a {
	}

	.guide-item-text a:link {
	}

	.guide-item-text a:visited {
	}

	.guide-item-text a:hover {
	}

	.guide-item-text a:active {
	}


/*
a:link
{
	color: #69833A;
	text-decoration: underline;
}
a:visited
{
	color: #8A8E2F;
	text-decoration: underline;
}
a:hover
{
	color: #FF9900;
	text-decoration: none;
}
*/
		.mid-bar
{
	font-family: "新細明體";
	font-size: 13px;
	line-height: 24px;
	color: #000000;
	text-decoration: none;
	background-image: url(images/mid-bar.jpg);
	background-position: 2px;
}
.text13-bold
{
	font-size: 13px;
	line-height: 20px;
	font-weight: bold;
	color: #000000;
}
.text12-special
{
	font-size: 12px;
	color: #CC6699;
}


.button1 {
    border: 1px solid #CC9999;
    font-size: 12px;
    color: #660033;
    background-color: #FCF1E4;
    letter-spacing: 1px;
    top: 1px;
    line-height: 17px; 
}
.button2
{
	font-size: 11px;
	line-height: 16px;
	color: #CC6699;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
}
.button3
{
	font-size: 12px;
	line-height: 17px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
}
.button4_mouseout {
 BORDER-RIGHT: #7EBF4F 1px solid; margin-bottom:2px; margin-TOP:2px; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
} 
.button4_mouseover {
 BORDER-RIGHT: #7EBF4F 1px solid; margin-bottom:2px; margin-TOP:2px; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
/*Hover Menu*/
.popupMenu {
	position:absolute;
	visibility:hidden;
	background-color:#F5F7F8;
}
.popupHover {	
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#F5F7F8;
}
.watermark
{
	font-size: 10px;
	font-style: normal;  
	color: #CC6699;
	line-height:normal;
	height:20px;
	valign:middle;
	line-height:20px;
}
.modalBackground 
{ 
     background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
} 
.modalPopup 
{ 
	font-family:lucida grande,arial,helvetica,sans-serif;
	font-size:11px;
	background-color:#fff;
	border:solid 2px #000;
	padding:4px;
}

.lightgray{
    color:darkgrey;
}

.image_style {
    max-width: 600px;
    max-height: 600px;
}

.image_line {
    padding: 0px;
    border: 1px solid #c3cfd3 !important;
}

input[type=text] {
	padding-left: 8px;
	height: 24px;
	position: relative;
	left: 0;
	outline: none;
	border: 1px solid;
	border-color: rgb(110, 160, 170);
	background-color: white;
	font-size: 16px;
}

.textbox-query {
	width: 100px;
	transition: 0.5s;
	border-width: 1px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.textbox-query:hover {
		width: 700px;
		transition: 0.5s;
	}

.textbox-query:focus {
		background-color: RGB(240, 240, 240);
	}


.query-area-container {
	position: relative;
	float: left;
	margin-bottom: 10px;
}

.query-area-text {
	position: relative;
	float: left;
	min-height: 28px;
	font-size: 14pt;
	text-align: left;
	color: RGB(80, 80, 80);
	bottom: 2px;
	clear: both;
}

.query-area-textbox {
	position: relative;
	padding-left: 48px;
	float: right;
	font-size: 12pt;
}

	.query-area-textbox::before {
		position: absolute;
		content: "查詢";
		font-size: 10pt;
		color: white;
		left: 0px;
		width: 48px;
		height: 100%;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
		background-color: RGB(110, 160, 170);
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.query-area-textbox::after {
		position: absolute;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		color: RGB(110, 160, 170);
		content: "\f002";
		right: 8px;
	}

.query-area-button {
	position: relative;
	padding-left: 4px;
	float: left;
	font-size: 8pt;
}

.content {
	font-size: 16px;
}

/* 上下一頁按鈕 */
.button-container {
	position: relative;
	display: inline-block;
	margin: 0px auto;
	font-size: 12pt;
}

.button-container a, .button-container a:hover, .button-container a:link, .button-container a:active {
	font-size: 12pt;
	color: RGB(110, 160, 170);
	text-decoration: none;
}

.button-previous {
	font-weight: 900;
	font-size: 18px;
	float: left;
	padding: 0px 6px 0px 6px;
	color: RGB(110, 160, 170);
}

	.button-previous::before {
		font-family: "Font Awesome 5 Free";
		content: "\f0a8";
	}

.button-next {
	font-weight: 900;
	font-size: 18px;
	float: right;
	padding: 0px 6px 0px 6px;
	color: RGB(110, 160, 170);
}

	.button-next::before {
		font-family: "Font Awesome 5 Free";
		content: "\f0a9";
	}

/* 按鈕版本2 */
.button-page-container {
	position: relative;
	width: 360px;
	margin: 10px;
	font-size: 12pt;
}

	.button-page-container a, .button-page-container a:hover, .button-page-container a:link, .button-page-container a:active {
		font-size: 12pt;
		color: RGB(110, 160, 170);
		text-decoration: none;
	}

		.button-page-container a:hover {
			color: RGB(255, 153, 52);
			font-size: 14pt;
			font-weight: bold;
			bottom: 4px;
		}

.button-page-start, .button-page-previous, .button-page, .button-page-next, .button-page-end {
	position: relative;
	float: left;
	width: 24px;
	height: 20px;
}

	.button-page-start:before, .button-page-previous:before, .button-page:before, .button-page-next:after, .button-page-end:after {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 18px;
	}

	.button-page-start a:hover  {
		color: red;
	}

.button-page-start {
}

	.button-page-start:before {
		content: "\f048";
		content: "\f191";
		content: "\f048";
	}

.button-page-previous {
}

	.button-page-previous:before {
		content: "\f0d9";
		content: "\f100";
	}

.button-page {
}

.button-page-next {
}

	.button-page-next:after {
		content: "\f0da";
		content: "\f101";
	}

.button-page-end {
}

	.button-page-end:after {
		content: "\f051";
		content: "\f152";
		content: "\f051";
	}


/* 用於slide show的說明文字，只顯示當前圖片的說明文字 */
.owl-nav .owl-prev.disabled, .owl-nav .owl-next.disabled {
	display: none !important
}

#mainCarousel {
	width: 80%;
	height: 600px;
	margin: 0 auto 1rem auto;
	--carousel-button-color: #170724;
	--carousel-button-bg: #fff;
	--carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
	--carousel-button-svg-width: 20px;
	--carousel-button-svg-height: 20px;
	--carousel-button-svg-stroke-width: 2.5;
}


.carousel__slide-img {
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 正方形-100%, 4:3-75%, 3:4-133.33%*/
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

	#mainCarousel .carousel__slide {
		width: 100%;
		height: 100%;
		padding: 0;
	}

	#mainCarousel .carousel__button.is-prev {
		left: -1.5rem;
	}

	#mainCarousel .carousel__button.is-next {
		right: -1.5rem;
	}

	#mainCarousel .carousel__button:focus {
		outline: none;
		box-shadow: 0 0 0 4px #A78BFA;
	}

#thumbCarousel .carousel__slide {
	opacity: 0.5;
	padding: 0;
	margin: 0.25rem;
	width: 96px;
	height: 64px;
}

	#thumbCarousel .carousel__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	#thumbCarousel .carousel__slide.is-nav-selected {
		opacity: 1;
	}