body {
	margin:                 0 auto;	/* 加auto可讓整個body左右置中 */
	width:					800px;	/* 讓 banner 可隨 Ctrl-+- 縮放 */
	color:                  #999;	/* 黑底白字 */
	background-color:       #000;
	padding:                0 10px 0 10px;
}
#header {							/*頁首        by 芸伍*/
	width:		    		50%;    /* 讓他小於圖片寬度 */
	margin:                 0 auto;	/* 加auto可讓整個body左右置中 */
	color:                  #FFF;	/* 灰底白字 */
	background-color:       #999;
	padding:                0 10px 0 10px;
    text-align: 			center; /* 文字置中 */
    z-index:				50;		/* 高度在圖片下方 */
    position:				absolute;      /*固定在圖片後不顯示*/
}

img {BORDER: 0px;}
	
#font_box{					/*新增字體大小變化工具箱by 芸伍 */
	width: inherit;				/* 繼承父元件 */
	height: 10px;				
	position: absolute;			/*固定在網頁的位置*/
	top: 160px;					/*距離上方160px*/
	z-index: 0;					/*z軸高度0 容易被覆蓋*/
	color:#000;					/*白色*/
	text-align: right;			/*對齊右方*/
}
#xo-banner {
	clear:			both; /* 消除左邊及右邊的浮動 float */
	position:		relative;
	z-index:		100;
	width:			inherit; /* 繼承父元件 */
	height:			133px;
	background:		#c2ce99 left bottom;
	color:			#fff; /* 白字，不在超連結中 */
}

#xo-globalnav {
	width:			inherit; /* 繼承父元件 */
	min-height:		26px; /* 最小高度 */
	margin:			0;
	color:			#000; /* 黑字 */
	background:		#eee url(./navbar-bg.png) repeat-x left bottom;
	padding:		0px 0 2px;	/* 第一、三個數字會增加導航列上、下緣到字的距離，都會影響導航列的高度 */
	font-size:		1.1em;
	text-align:		center;
	list-style-type:none;
}
#xo-globalnav summary{
	background:#eee url(./navbar-bg.png) repeat-x left bottom;/* 圖檔背景無效 */
}

#xo-globalnav details{
	background:#eee url(./navbar-bg.png) repeat-x left bottom;/* 圖檔背景無效 */
	color:                  #000; /* 黑字，有效   by芸伍*/
	text-decoration:        none; /* 文字效果無畫線或閃爍 */
	margin:                 auto;
	background:#eee ;
}
#xo-globalnav li {
    display:                inline; /* 將資料顯示在同一行不分段 */
    margin:                 0;
    padding-left:           3px;
    padding-right:          3px;
}

#xo-globalnav a {
	background:#eee url(./navbar-bg.png) repeat-x left bottom;/* 圖檔背景無效 */
	color:                  #000; /* 黑字，有效 */
    text-decoration:        none; /* 文字效果無畫線或閃爍 */
}

#xo-globalnav a:hover {
    color:                  #888;
    text-decoration:        none;
}
#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;
}
.sub-menu{
	padding:0;/*將多餘縮排消除  by  芸伍*/
}

#footer {							/*頁尾     by 芸伍*/
	margin:                 0 auto;	/* 加auto可讓整個body左右置中 */
	color:                  #FFF;	/* 灰底白字 */
	background-color:       #999;
	padding:                0 10px 0 10px;
    text-align: 			center; /* 文字置中 */
}
@media screen{
	#mobile {display:none;}
	#surveyExplain {text-align:center;}
	#surveyTitle {font-family:標楷體;font-size:160%;}
	
	#header {							/*頁首        by 芸伍*/
	    display:		    	none;	/*隱藏*/
	}
	#menu-switcher {			/*RWD選單使用開關       by 芸伍*/ 
 		display: none;				/*不顯示*/
	}
	#font_box{					/*新增字體大小變化工具箱by 芸伍 */
		display: none;				/* 筆電不顯示 */
	}

	#xo-globalnav li {
	    display:                inline; /* 將資料顯示在同一行不分段 */
	}
}
@media screen and (max-width:768px){									/*by 芸伍 新增頁面寬度768px下 RWDcss 性質*/
	#desktopPC {display:none;}
	#mobile {display:block;}
	#surveyExplain {text-align:left;}
	#surveyTitle {font-family:標楷體;font-size:140%;}
	body {
	    margin:                 auto;	/* 加auto可讓整個body左右置中 */
	    width:					100%;	/* 填滿頁面 */
	    color:                  #FFF;	/* 白底白字 */
	    background-color:       #FFF;
	    padding:                0 ;
	}
	#header {							/*頁首  by 芸伍*/
		height:					60px;   /*高度*/
		width:					100%;   /* 寬度占畫面100% */
	    display:		    	block;	/*顯示方塊*/
	    padding:                0 ;
        text-align: 			center;	/* 文字置中 */
        z-index:				50;     /* 讓他高度低於圖片高度 */
        position:				fixed;	/* 位置固定在螢幕上方 */
	}
	img {BORDER: 0px;						/*圖片性質更動 by芸伍*/
	z-index:100;							/*圖片高度 100 遮住頁首*/
	width:					100%!important;	/*寬度"強制"壓縮至頁面寬*/
	/*	height:auto;*/

	}
	#font_box{								/*變換字體大小工具箱 by芸伍*/
	display: block;				/* 大小字型選框 */
	width: auto;							/*寬度 符合螢幕寬度 1115 by芸伍*/
	top: 130px;								/*距離上方140px*/
	right: 20px;							/*距離右方20px*/
	z-index: 200;							/*高度200 (選單之下)*/
	position: sticky;						/*黏著banner下方 1115 by芸伍*/
	
	}
	#button{
	height:25px;							/*button 高度 1115 by芸伍*/
	width:25px;								/*button 寬度 1115 by芸伍*/
	padding:inherit;						/*button 字體置中(無空格) 1115 by芸伍*/
	text-align:center;
	font-size:small;
	-webkit-appearance: none;
	}
	.hamburger {							/*增加RWD選單按鈕方塊 by芸伍*/
	  background-color: #000000;			/*顏色黑色*/
	  width: 50px;							/*寬度50*/
	  height: 50px;							/*高度50 正方形*/
	  position: absolute;					/*絕對位置*/
	  top: 10px;							/*距離上方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%; 				/*寬度占滿螢幕 by芸伍 */
		height:			auto;
	}

	#xo-globalnav {							/*選單更動 by芸伍*/
	  	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選單按鈕 by芸伍*/
 		 transform: translateX(0%);			/*選單會回歸原始位置 再按一次退回左方*/
		}
	#menu-switcher {						/*RWD選單開關    by芸伍*/
 	 display: none;							/*隱藏*/
	}
	#xo-globalnav li {
	    display:                block; 		/* 將資料顯示在同一行不分段 by芸伍*/
        padding: 				15px;		
	    margin:                 0 10px 10px;/* 1115漢堡線調整 by芸伍*/
	    color: #ffffff;						/*白色  */
		text-decoration: none;				
  		text-transform: uppercase;			
 		font-size: 20px;					
  		text-align: center;					/*置中*/
  		border-bottom: 3px solid #000;		/*底線黑色*/
	}
	.navigation li dl {
		margin: 0px 0px 0px 20px;
		text-align:left;
		}
	#xo-globalnav a {
	    background:       #EEE;
	    margin:                 auto;
	}
 		#xo-globalnav details{
 		background:#eee ;
 	}
	#xo-globalnav a:hover {
	    background-color:       #eee;
	    color:                  #000;
	   }
	#xo-globalnav summary{
	background:#eee;
	}
	
}
@media screen and (max-width:480px){									/*by 芸伍 新增頁面寬度480px下 RWDcss 性質*/
	#desktopPC {display:none;}
	#mobile {display:block;}
	#surveyExplain {text-align:left;}
	#surveyTitle {font-family:標楷體;font-size:138%;}
	body {
	    margin:                 auto;	/* 加auto可讓整個body左右置中 */
	    width:					100%;	/* 填滿頁面 */
	    color:                  #000;	/* 白底黑字 */
	    background-color:       #FFF;
	    padding:                0 ;
	}
	#font_box{								/*變換字體大小工具箱 by芸伍*/
	display: block;				/* 大小字型選框 */
	right: 10px;							/*距離右方20px*/
	/*z-index: 10;							高度200 (選單之下)*/ 
	width :75px;							/*1115改變寬度顯示一排字 by芸伍*/
	text-align:center;						/*1108改變對齊位置*/
	float: right;							/*1115浮向右*/
	}
	#xo-globalnav {							/*選單更動 by芸伍*/
		width: 53%;							/*寬度50% by 丁丁*/
	}
	#xo-globalnav a {
	    background-color:       block;
	    margin:                 auto;
	}
	#xo-globalnav a:hover {
	    background-color:       inherit;
	   }
}



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;}
/* 因為是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;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}
   
.section-title {
	font-family:'標楷體';	
  	font-size: 2rem;
  	margin-bottom: 1rem;
  	text-align: center;
}
.grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
}
.card {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      padding: 1rem;
      flex: 1 1 240px;
      max-width: 300px;
      text-align: center;
}
.emoji {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
}
.desc {
      font-size: 1rem;
      color: #333;
}