:root {
    --mobile-padding: 3% 7%; /* 調整此處的百分比數值 */
}
body {
	margin:				0 auto;	/* 加auto可讓整個body左右置中 */
	color:				#999;	/* 黑底白字 */
	background-color:	#f2e5bd;
	padding:			0 10px 0 10px;
}
img {BORDER:0px;}
/* ================================================================= */
@media screen {
	#mobile {display:none;}
	#mobile_table {display:none;}

	#menu-switcher {display:none;}	/* 不顯示，RWD選單使用開關 */
	body {width:90%;}/*直接改成顯示比例 不跑版*/
	#word{
		right:200px;
		top:68px;
		z-index:90;
	}
	#xo-banner {
		/*clear:				both;	 消除左邊及右邊的浮動 float */
		margin: 			0 ;
		position:			static;
		z-index:			10;
		width:				100% ;/* 繼承父元件 */
		height:				auto;
		text-align:			left;
	}
	#xo-globalnav {
		width:				-webkit-fill-available; /* 繼承父元件 */
		min-height:			28px;	 /* 最小高度 */
		color:				#fff;	 /* 白字 */
		background:			#d9a74a url(./navbar-bg.png) repeat-x left bottom;
	 	padding:			0 0 2px;/* 第一、三個數字會增加導航列上、下緣到字的距離，都會影響導航列的高度 */
		font-size:			1em;
		list-style-type:	none;
		display:			flex;	/* 本行及下行指示內容物水平置中 */
		justify-content:	center; 
	}
	#xo-globalnav summary{
		color:				#fff;	/* 白字，有效 */
		text-align: center;			/* 文字置中 */
	}
	#xo-globalnav summary.third{
		color:				#fff;	/* 白字，有效 */
		text-align: left;			/* 文字靠左 */
    	padding-left: 10px;
		background:			#668;
		border-bottom:dotted 1px #bbb;
	}
	#xo-globalnav dd.third{
		padding-left: 10px;
	}
	/* 滑鼠滑入顯示子選單 */
	#xo-globalnav a {
		color:				#fff;	/* 白字，有效 */
		background:			#d9a74a;
	}
	#xo-globalnav a:hover {
		color:				#EAAD7B;
	}
	#xo-globalnav a.red {color:red;}
	#xo-globalnav a.red:hover {color:#888;}
	#content {
		margin:				0 auto;	/* 加auto可讓整個body左右置中 */
		padding:			20px 20px 20px 20px;
		background-color:	#FDFEFF;
		color:				#000;
		width: 				initial;/*預設*/
	}
	.sub-menu{
		padding:			0;	/* 將多餘縮排消除 */
	}
	#footer{
		width: 100%;
		background-color: rgb(248, 224, 151);
	}
	#footer img{
		width: 40%;
		margin-left: 45px;
		margin-top:  10x;
		margin-bottom: -5px;
	}	
	.txt{
		padding-left: 4.5%;  
		line-height: 75%;
		font-weight: bolder;
		display: inline-block;
		width: 	50%;
		font-size: 18px;
  		text-align:left;
		color: #202020
	}
	#footer{
		font-size: 18px;  
	}
	#footer2{
		font-size: 18px;
	}
	#footer3{
		font-size: 18px;
	}
}

@media screen and (max-width:768px){	/* 新增頁面寬度768px下 RWDcss 性質 */
	body {
		width:				100%;	/* 填滿頁面 */
		padding:			0 ;
	}
	img {
		z-index:			90;		/* 圖片高度 100 遮住頁首 */
		/*width:				100%!important;	 寬度"強制"壓縮至頁面寬 */
		/* 	height:auto; */
	}
	.navigation li dl {
		margin:				0px 0px 0px 15px;	/* marker 對齊 1102 */
		text-align:			left;	/* marker 對齊 1102 */
	}
	#window1 {display:none;}
	#window2 {display:none;}
	#mobile {display:inline-block;height:200px;}
	#mobile_table {display:flex;}

	#word{
		right:				20px;
		top:				88px;
	}
	.hamburger {	/* 增加RWD選單按鈕方塊 */
		background-color:	#000000;	/* 顏色黑色 */
		width:				50px;	/* 寬度50 */
		height:				50px;	/* 高度50 正方形 */
		position:			absolute;	/* 絕對位置 */
		top:				140px;	/* 距離上方10px */
		right:				20px;	/* 距離右方20px */
		display:			block;	/* 方塊顯示 */
		z-index:			200;	/* 高度200 */
	}
	.hamburger-line {	/* 增加RWD選單按鈕線條 by */
		width:				40px;	/* 寬40 */
		height:				3px;	/* 高3(線) */
		background-color:	#ffffff;/* 白色 */
		margin:				auto;	/* 置中 */
		position:			absolute;	/* 絕對位置 */
		top:				0;	/* 距離上方0 */
		left:				0;
		right:				0;
		bottom:				0;
		z-index:			210;	/* 高度210 RWD選單按鈕之上 */
		box-shadow:		0px 10px 0px #ffffff, 0px -10px 0px #ffffff;
	}
	#xo-banner {
		width:				100%;	/* 寬度占滿螢幕 */
		height:				auto;
	}
	#xo-globalnav {	/* 選單更動 */
		background-color:	#eee;	/* 背景灰白 */
		height:				100vh;	/* 高度全滿 */
		width:				40%;	/* 寬度40% */
		position:			absolute;	/* 絕對位置 */
		top:				0;	/* 距上0 */
		left:				0;	/* 距左0 */
		z-index:			100;	/* 高度100 遮住字體工具箱內容 */
		transform:			translateX(-100%);	/* 先往左移100%(隱藏) */
		transition:			0.5s;	/* 移動時間0.5s */
	}
	#menu-switcher:checked ~ #xo-globalnav {	/* 按下RWD選單按鈕 */
		transform:			translateX(0%);	/* 選單會回歸原始位置再按一次退回左方 */
	}
	#xo-globalnav li {
		width:-webkit-fill-available;		/* 選單寬度 */
		display:			block;
		padding:			15px;
		margin:				0 20px 10px;
		color:				black;	/* 黑色 */
		text-decoration:	none;
		text-transform:		uppercase;
		font-size:			20px;
		text-align:			center;	/* 置中 */
		border-bottom:		3px solid #000;	/* 底線黑色 */
	}
	#xo-globalnav a {
		color:				#000;
		background:			#EEE;
		margin:				auto;
	}
	#xo-globalnav details{
		background:			#eee ;
	}
	#xo-globalnav a:hover {
		color:				#000;
		background-color:	#eee;
	}
	#xo-globalnav summary{
		color:				#000;
		background:			#eee;
	}
	#xo-globalnav summary.third{
		color:				#000;
		background:			#eee;
		padding-left:		20px;
	}
	#xo-globalnav dd.third{
		background-color:#eee;
	}
	.txt {
    width: 36%;
	padding: -2px;
}
	#footer img{width:50%;height:auto;}
	#footer .txt{
    font-size:14px;
	}
	#footer2{
	font-size:14px;
	}
	#footer3{
	font-size:12px;
	}
	 .xoops-form-text {
        width: 100%;
    }
}
@media screen and (max-width:480px){	/* 新增頁面寬度480px下 RWDcss 性質 */
	#xo-globalnav {		/* 選單更動 */
		width:75%;		/* 寬度50% */
	}
	#xo-globalnav a {
		background-color:	block;
		margin:				auto;
	}
	#xo-globalnav a:hover {background-color:inherit;}
	#xo-globalnav li {		/* 每項目寬度約七個中文字 */
		width:				165px;	/* 選單寬度 */
	}
	.navigation li dd {
		margin-left:		0px;/* 控制子選單左方空間 */
	}
	/* 將 dt,dd 設為矩形磚，目前 dt 已被 summary 取代 */
	.navigation li dd a {
		text-align:			left;
	}
	#content th span small{displat:none;}
	#footer img{
		width:75%;
		margin: 0 45px;
	}
	#footer .txt{width:46%;}
	#footer1{
        font-size: 15px;
    	text-align: left;
    	padding-left: 20%;
    	width: 120%;
	}
	#footer2{
		font-size: 15px;
    	text-align: left;
    	padding-left: 20%;
    	width: 170%;
	}
	#footer3{
		font-size: 11px;
    	text-align: left;
    	padding-left: 20%;
    	width: 180%;
	}
	#window1 {display:none;}
	.th {
		padding: var(--mobile-padding);
	}
}
h1,h2,h3 {font-family:標楷體;color:#567;}
pre {font-family:Courier New,新細明體;padding:1em;border:1px dashed #2f6fab;color:black;background-color:#f9f9f9;line-height:1.1em;overflow:auto;}
.block {vertical-align:top;font-family:Courier New,新細明體;padding:0px;border:1px dashed #2f6fab;color:black;background-color:#f9f9f9;line-height:1.1em;overflow:auto;}
/* 以下為 etable 設定 */
.list {background-color:#FFFFFF;}
a {font-family:Tahoma,taipei;text-decoration:none;color:#666666;font-style:normal}
a:hover {font-family:Tahoma,taipei;color:#FF9966;font-style:normal}
input,textarea {font-family :Tahoma,taipei,Verdana,Arial,Helvetica,sans-serif;font-size:1em;text-indent:2px;}
select {font-family:Tahoma,taipei,Verdana,Arial,Helvetica,sans-serif;font-size:1em;font-weight:bold;background-color:#F5F5F5;} 
table.nicetable {border:1pt solid black;border-collapse:collapse;}
table.nicetable td {border:1pt solid black;border-collapse:collapse;padding:0.3em 0.5em;}
table.nicetable th {border:1pt solid black;border-collapse:collapse;font-weight:normal;}
#content table.black-border td {            border: 1px solid black;   }
#content table.black-border th {            border: 1px solid black;   }
/* 因為是list中的局部設定，優先於其他設定 */
.list table {width:100%;}
.list th {border:1px none;background-color:#639B9C;color:#FFFFFF;font-size:1.1em;text-align:center;padding:3px;}
/* table,th,td {border:1px none #ffffff} */
/* .list td {border:1px none;color:#000000;font-size:1em;padding:0;font-family:Verdana,Arial,Helvetica,sans-serif;} */
/* 表格美化 */
.list table.outer {background-color:#FFFFFF;padding:2px;border:1px solid #C2E2E2;}
.odd   {background-color:#eeeeee;padding:2px;}
.even  {background-color:#F1F3F2;padding:2px;}
/* 蒐尋表單 */
.searchPrompt {color:black}
#login tr td {color:black;border:none;} /* 選擇器指向 id之下的tr之下的td */
.msg {color:black}
/* 按鈕顏色 */
.switchOK {color:#007000}
/* 文件輸出 */
.2li li{display:block;float:left;width:44%;padding:3px 0;}
.bui {font-weight:bold;font-style:italic;text-decoration:underline;}
.co12 {text-indent:-2.3em;margin-left:2.3em;}
.c9  {font-size:9pt;font-family:'新細明體';}
.c10 {font-size:10pt;font-family:'新細明體';}
.c12 {font-size:12pt;font-family:'新細明體';}
.co12 {font-size:12pt;font-family:'標楷體';}
.c14 {font-size:14pt;font-family:'標楷體';text-indent:-28pt;margin-left:28pt;}
.c14p2 {font-size:14pt;font-family:'標楷體';text-indent:31pt;}
.c16 {font-size:16pt;font-family:'標楷體';text-indent:-32pt;margin-left:32pt;}
.c18 {font-size:18pt;font-family:'標楷體';text-indent:-36pt;margin-left:36pt;}
.c20 {font-size:20pt;font-family:'標楷體';}
.c22 {font-size:22pt;font-family:'標楷體';}
.c24 {font-size:24pt;font-family:'標楷體';}
.c26 {font-size:24pt;font-family:'標楷體';}
.c28 {font-size:28pt;font-family:'標楷體';}
.c32 {font-size:32pt;font-family:'標楷體';}
.c36 {font-size:36pt;font-family:'標楷體';}
.c40 {font-size:40pt;font-family:'標楷體';}
.c100 {font-size:100pt;font-family:'標楷體';}
.c120 {font-size:120pt;font-family:'標楷體';}
/* 雙拼li， */
.2li li{display:block;float:left;width:44%;padding:3px 0;}
#content p {margin-top:3pt;margin-bottom:3pt;line-height:1.6em;letter-spacing:0.1em;}
#content table {border:1pt solid;mso-border-alt:solid .5pt;border-collapse:collapse;letter-spacing:.1pt;line-height:14pt;mso-line-height-rule:exactly;}
#content th {border:1pt solid;mso-border-alt:solid .5pt;border-collapse:collapse;letter-spacing:.1pt;line-height:14pt;mso-line-height-rule:exactly;}
#content td {border:1pt solid;mso-border-alt:solid .5pt;border-collapse:collapse;letter-spacing:.1pt;line-height:14pt;mso-line-height-rule:exactly;}
#content th {font-weight:normal}
#content ol {margin-bottom:0cm;margin-top:0cm}
#content ul {margin-bottom:0cm;margin-top:0cm}
#content li {margin-bottom:0cm;margin-top:0cm}
div.tright {
	float:right;
	clear:right;
	margin:0.5em 0 0.8em 1.4em;
}
div.tleft {
	float:left;
	clear:left;
	margin:0.5em 1.4em 0.8em 0;
}
div.thumbinner {
	border:1px solid #cccccc;
	padding:3px !important;
	background-color:White;
	font-size:94%;
	text-align:center;
	overflow:hidden;
}
.div1.block:hover {
	background-color: #48985f !important;
	color: #fff;
 }
.div2.block:hover  {
	background-color: #d6562a !important;
	color: #fff;
}
.text-out {
	opacity:1;
	transition: 0.1 ease-out;
}
.div1.block:hover .text-out,
.div2.block:hover .text-out{
	opacity: 0;
}
.hidden-text {
	opacity: 0;
    transition: 0.1s ease-in;
}
.div1.block:hover .hidden-text,
.div2.block:hover .hidden-text {
	cursor: pointer;
	opacity: 1;
}	
html .thumbcaption {
	border:none;
	text-align:left;
	line-height:1.4em;
	padding:3px !important;
	font-size:94%;
}