/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */

html { font-family: "微軟正黑體", GOTHIC; font-size:16px; -webkit-text-size-adjust:none;}

* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */}
	
* a:link, * a:visited { text-decoration:none;}
* a:hover, * a:active { text-decoration:none;}
.clear { clear:both;}
.tRed { color:#C00;}
@font-face { font-family: GOTHIC; src: url(../fonts/GOTHIC.TTF);}

/* --電腦版型------------------------------------- */
body { background: url(../images/mainView.jpg) no-repeat center top;}

#sublink { padding: 20px 20px 15px 0; text-align:right; font-size:14px; color:#fff; background:rgba(0,0,0,.2); position:absolute; top:0; right:0; width:100%;}
#sublink a { color:#fff; display:inline-block; margin: 0 5px;}
#sublink a:hover { color:#e77800;}
#logo { margin: 210px 0 20px 0;}
.mainCon { width:1200px; margin:0 auto; position:relative;}
#searchBar { width:100%; height:75px; font-size:18px; color:#fff; padding:4px; background:rgba(26, 95, 128, 0.95); margin: 20px auto; box-shadow: 0 5px 10px #d6d6d6;}
input { border:none; font-size:16px; padding: 5px 10px; margin: 0 25px 0 10px; font-family: "微軟正黑體", GOTHIC;}
input[type=submit] { background:#e77800; color:#fff; padding: 5px 20px; margin: 0; cursor:pointer;}
input[type=submit]:hover { background:#c76700;}
#searchBar img { margin: 0 10px; display:inline-block;}
#BarBg { background:url(../images/searchBar.png) repeat-x bottom center; text-align:center; height:67px; line-height:67px;}

h4 { display:none;}
h4:hover { display:block; width:69px; height:69px; background: url(../images/icon_Menu.png) no-repeat #43727a center center;}
#SUBMENU { display:none;}

/* -- 主選項 -- */
nav { font-size:15px; font-weight:bold; color:#00713f; z-index:fff; width:100%; z-index: 9999999; border-bottom:#509d9d 1px solid; height:40px;}
nav ul { padding: 0; z-index: 99999999; text-align:center;}
nav li { margin:0 5px; display: inline-block;}
nav li a { display: inline-block; color:#4e4e4e; margin: 0 5px;}
nav li a:hover { color:#e77800;}

/* -- left news -- */
#homeL { width:55%; float:left; margin-right:5%;}
h2 { font-size:30px; color:#6b3a1d; font-weight:bold; padding-top:25px; border-top: #e05300 6px solid; display: inline-table; width:auto;}
h2 img { display:inline-block; margin-right:10px; vertical-align:middle;}

ul.homelist { margin: 30px 0 0 0;}
ul.homelist li { font-size:20px; font-weight:bold; margin-bottom:30px; vertical-align:top; display: flex; /* 整個區塊 */ line-height:28px;}
a.box { display: flex; /* 整個區塊 */ color:#000; }
a.box:hover { color:#e77800;}
.box h3 { width: 90px; /* 佔整個區塊內的固定寬度 */ color:#878787; font-size:13px; border-right: #e77800 1px solid; font-weight:normal; margin-right:15px;}
.box p { flex: 1; /* 佔整個區塊內的剩餘寬度 */ text-align: justify;}

/* -- right zone -- */
ul.homeR { width:40%; float:right; margin-top:35px;}
ul.homeR li { margin-bottom:15px; display:block; width:100%; font-size:24px; font-weight:bold;}
ul.homeR li a { display:block; padding:25px 40px; display:block; color:#fff; background:#afafaf;}
ul.homeR li a:hover { background:#e1ebeb; color:#e77800;}
ul.homeR li img { display:inline-block; padding: 0 25px 0 0; border-right: #c3c8c8 1px solid; margin-right:25px; vertical-align: middle;}

/* -- link -- */
#outlink { background:#7b684bcf; width:100%; text-align:center; margin-top:40px; padding-bottom:40px;}
h2.link { font-size:30px; color:#fff; font-weight:bold; padding-top:25px; border-top: #e05300 6px solid; display: inline-table; width:auto; margin:0 auto;}
h2.link img { display:block; margin: 0 auto 15px auto; width:auto;}
ul.weblink { margin-top:30px; width:100%;}
ul.weblink li { width:17%; margin: 0 1%; display:inline-block; position:relative; border: #fff 1px solid;}
ul.weblink li:hover { border:#fff 1px solid; box-shadow: 0 0 8px #884700;}
ul.weblink li img { width:100%; height:auto;}
.linkname { position:absolute; font-size:15px; left:0; bottom:0; padding: 15px 0; color:#fff; background:rgba(0,0,0,.5); width:100%; text-align:center; display:block;}
ul.weblink li:hover .linkname { background:rgba(0,0,0,.9);}

/* -- Footer -- */
footer { width:100%; color: #999; padding:40px 0 40px 0; background:#f0f0f0; text-align:center; line-height:22px; font-size:13px;}
footer b { font-size:11px; color:#999;}
footer img { display: block; margin: 0 auto 15px auto; vertical-align:middle;}
footer a { display:inline-block; margin: 5px; font-size:15px; color:#1a7b7a;}
footer a:hover { color:#e77800;}


/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1024px) and (max-width: 1249px) {

.mainCon { width:98%; margin:0 auto; position:relative;}

}

/* --平板版型------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1023px) {

.mainCon { width:94%; margin:0 auto; position:relative;}

/* -- 主選項 -- */
nav { font-size:14px; font-weight:bold; color:#00713f; z-index:fff; width:100%; z-index: 9999999; border-bottom:#509d9d 1px solid; height:40px;}
nav li { margin:0 3px; display: inline-block;}
nav li a { display: inline-block; color:#4e4e4e; margin: 0 3px;}

input { border:none; font-size:15px; padding: 5px; margin: 0 10px 0 5px; font-family: "微軟正黑體", GOTHIC;}
input[type=submit] { background:#e77800; color:#fff; padding: 5px 10px; margin: 0; cursor:pointer;}

/* -- left news -- */
#homeL { width:60%; float:left; margin-right:5%;}
h2 { font-size:24px; color:#6b3a1d; font-weight:bold; padding-top:15px; border-top: #e05300 5px solid; display: inline-table; width:auto;}

ul.homelist { margin: 20px 0 0 0;}
ul.homelist li { font-size:18px; font-weight:bold; margin-bottom:25px; vertical-align:top; display: flex; /* 整個區塊 */ line-height:26px;}

/* -- right zone -- */
ul.homeR { width:35%; float:right; margin-top:50px;}
ul.homeR li { margin-bottom:15px; display:block; width:100%; font-size:18px; font-weight:bold;}
ul.homeR li a { display:block; padding:20px 20px; display:block; color:#1a7b7a; background:#eef4f4;}
ul.homeR li img { display:inline-block; padding: 0 10px 0 0; border-right: #c3c8c8 1px solid; margin-right:10px; vertical-align: middle; width:45px; height:auto;}

#outlink { padding-bottom:30px;}
ul.weblink li { width:30%; margin: 0 1% 30px 1%; display:inline-block; position:relative; border: #fff 1px solid;}

}

/* --手機版型------------------------------------- */

@media screen and (max-width: 767px) {

body { background: url(../images/mainView-M.jpg) no-repeat center top}
.mainCon { width:92%; margin:0 auto; position:relative;}
#sublink { padding: 16px 0 15px 15px; text-align:left; font-size:14px; color:#fff; background:rgba(0,0,0,.2); position:absolute; top:0; right:0; width:100%;}
#logo { margin: 160px 0 10px 0;}
img.sitename { width:100%; height:auto;}
h2 { font-size:24px; color:#1c7e7d; font-weight:bold; padding-top:15px; border-top: #e05300 6px solid; display: block; width:50%; margin:0 auto; text-align:center;}
h2.link { font-size:24px; color:#fff; font-weight:bold; padding-top:15px; border-top: #e05300 6px solid; display: block; width:50%; margin:0 auto; text-align:center;}
h2 img,
h2.link img { display:block; margin: 0 auto 15px auto; width:auto;}
nav { height:10px;}
nav ul { display:none;}

h4 { width:50px; height:50px; background: url(../images/menuM.png) no-repeat center center; background-size:50px 50px; position: fixed; top:0; right:0; display:block; z-index:9998;}
h4:hover { display:block; width:50px; height:50px; background: url(../images/menuM.png) no-repeat center center; background-size:50px 50px; cursor: pointer;}

#SUBMENU { width:60%; height:100%; padding:0; margin:0; position: fixed; top:0; right:0; display:none; z-index:9997; background: rgba(231,120,0,.9);}
#SUBMENU ul { padding: 0; margin: 80px auto 0 auto; width:100%; text-align:center;}
#SUBMENU ul li { width:100%;}
#SUBMENU ul li a { font-size:18px; color: #fff; font-weight:bold; padding: 15px 40px 15px 0; text-align:right; width:100%; margin: 0; display:block;}
#SUBMENU ul li a:hover { color:#fff;}
#SUBMENU ul li b { font-size:13px; display:block; margin: 10px 0 0 0; color:#fff;}
#SUBMENU ul li a:hover b { color:#fff;}

#searchBar { width:100%; height:auto; font-size:15px; color:#fff; padding:4px; background:rgba(26, 95, 128, 0.95); margin: 20px auto; box-shadow: 0 5px 10px #d6d6d6;}
#searchBar img { display:none;}
input { border:none; font-size:15px; padding: 5px; margin: 0 10px 0 5px; font-family: "微軟正黑體", GOTHIC; width:70%;}
input[type=submit] { background:#e77800; color:#fff; padding: 10px 30px; margin: 0; cursor:pointer; width:auto;}
label { display:block; margin: 9px 0;}
#BarBg { background:url(../images/searchBar.png) repeat-x bottom center; text-align:center; height:auto; line-height: normal; padding:10px 5px;}

/* -- left news -- */
#homeL { width:100%; float:none; margin: 0 0 30px 0;}
ul.homelist { margin: 30px 0 0 0;}
ul.homelist li { font-size:20px; font-weight:bold; margin-bottom:25px; vertical-align:top; display: flex; /* 整個區塊 */ line-height:28px;}

/* -- right zone -- */
ul.homeR { width:100%; float:none; margin-top:50px;}
ul.homeR li a { display:block; padding:30px 20px; display:block; color:#1a7b7a; background:#eef4f4;}
ul.homeR li img { display:inline-block; padding: 0 10px 0 0; border-right: #c3c8c8 1px solid; margin-right:10px; vertical-align: middle; width:45px; height:auto;}

#outlink { padding-bottom:25px;}
ul.weblink li { width:47%; margin: 0 1% 30px 1%; display:inline-block; position:relative; border: #fff 1px solid;}
footer img { width:90%; height:auto;}

}