@charset "utf-8";
/* CSS Document */

a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
	border: none;
}

a:link {
	color:#1E5DA0;
	text-decoration: none; 
}
a:visited {
	color:#1E5DA0;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* 這個選取器群組可以讓使用鍵盤導覽的使用者，也和使用滑鼠的使用者一樣擁有相同的滑過體驗。 */
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
    font-weight: bold;
	margin:0;
    text-rendering: optimizelegibility;
}
h1, h2, h3 {
    line-height: 1.3em;
}
h4, h5, h6 {
    line-height: 1.6em;
}

h1 {
    font-size: 38.5px;
}
h2 {
    font-size: 31.5px;
}
h3 {
    font-size: 24.5px;
}
h4 {
    font-size: 17.5px;
}
h5 {
    font-size: 14px;
}
h6 {
    font-size: 12px;
}

body {
	font-family:Arial,Microsoft JhengHei,Microsoft JhengHei,sans-serif;
	font-size:80%;
}

img { vertical-align:middle;}

input{
	background-color: #F1F1F1;
	border: 1px solid #CCC;
	padding: 1px;
	*padding: 0;
	cursor:pointer;
}
button {cursor:pointer;}
input[type=button]:hover, input[type=submit]:hover{ }
input[type=text],input[type=password],input[type=email]{ background:#fff; cursor: text; }
input[disabled] { background:#dedede; color:#ccc; border: 1px solid #CCC;}
input[disabled]:hover{ border: 1px solid #CCC; cursor: inherit;/*小手隱藏*/}

/*table 全置中*/
.table { 
 width:100%;
 border:1px solid #ccc ;

 }
.table img { max-height:100%; max-width:100%; vertical-align:text-top;}
.table th,.table td {
	border-top: 1px solid #ccc;
    line-height: 20px;
    padding: 5px 2px;
    vertical-align: middle;
	}
.table th {
	font-weight: bold;
	text-align:center;
	
}
.table td {
	text-align: center;
	}
	
.tableBordered th, .tableBordered td {
    border-left: 1px solid #DDDDDD;
}
.tableBackground th{ background-color:#EEE;}	

/*table th 置中*/
.tableTh {
	 width:100%;
	 border:1px solid #ccc ;
	 background-color:#fff;
 }
.tableTh th,.tableTh td{
	border-top: 1px solid #ccc;
    line-height: 20px;
    padding: 5px 2px;
    vertical-align: middle;
	}
.tableTh th{
	font-weight: bold;
	text-align:center;
	
}
.tableTh img { max-height:100%; max-width:100%; vertical-align:text-top;}


/* ~~ 導覽清單樣式 (如果選擇使用 Spry 之類的預製飛出選單，則可移除) ~~ */
ul.nav {
	list-style: none; /* 這會移除清單標記 */
	border-top: 1px solid #666; /* 這會建立連結的上方邊框，其他則都會使用下方邊框放置在 LI 上 */
	margin-bottom: 10px; /* 這會在下方的內容上建立導覽間的間距 */
}
ul.nav li {
	border-bottom: 1px solid #666; /* 這會建立按鈕分隔 */
}
ul.nav a, ul.nav a:visited { /* 將這些選取器放入群組，即可確保您的連結即使在受到點擊後仍保有按鈕外觀 */
	padding: 5px 5px 5px 15px;
	display: block; /* 這會為連結提供區塊屬性，使連結能填滿包含它的整個 LI，讓整個區域都能回應滑鼠點按動作。 */
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* 這會同時變更滑鼠及鍵盤導覽器的背景及文字顏色 */
	background: #6F7D94;
	color: #FFF;
}

/* ~~ 頁尾 ~~ */
.footer {
	margin-top:10px;
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */
	clear: both; /* 這個 clear 屬性可以強制 .container 辨識欄結束於何處以及包含欄的位置 */
}
.copyright {}

/* ~~ 其他 float/clear 類別 ~~ */
.right {  
	float: right !important; /*I7靠右時修正掉排的問題*/
}
.left {
	float: left;
}

/*清除浮動*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 

/*-------------------------------------------------------------------------------------------*/


/*漸層顏色*/
.orangeback{
	background: -moz-linear-gradient(-90deg,rgba(243,151,0,1), rgba(254,192,10,1)); /* FF3.6+ */
	background: yellow -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,151,0,1)), color-stop(100%,rgba(254,192,10,1))); /* Chrome,Safari4+ */
	background: yellow -webkit-linear-gradient(-90deg,rgba(243,151,0,1),rgba(254,192,10,1)); /* Chrome10+,Safari5.1+ */
	background: rgb(254,192,10); /* Old browsers */
}

.redback{
	background: -moz-linear-gradient(top,  rgba(214,68,51,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
	background: red -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,68,51,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
	background: red -webkit-linear-gradient(top,  rgba(214,68,51,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
	background: rgb(214,68,51); /* Old browsers */
	}

.greenback{
	background: -moz-linear-gradient(-90deg,rgba(87,153,59,1), rgba(121,190,67,1)); /* FF3.6+ */
	background: green -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,153,59,1)), color-stop(100%,rgba(121,190,67,1))); /* Chrome,Safari4+ */
	background: green -webkit-linear-gradient(-90deg,rgba(87,153,59,1),rgba(121,190,67,1)); /* Chrome10+,Safari5.1+ */
	background: rgb(87,153,59); /* Old browsers */
}
.darkGreenback{ background:#3e7452;}
.lightGreenback {background:#DBEAC9;}
.blueback{
	background: -moz-linear-gradient(-90deg,rgba(23,74,113,1), rgba(75,143,179,1)); /* FF3.6+ */
	background: blue -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,74,113,1)), color-stop(100%,rgba(75,143,179,1))); /* Chrome,Safari4+ */
	background: blue -webkit-linear-gradient(-90deg,rgba(23,74,113,1),rgba(75,143,179,1)); /* Chrome10+,Safari5.1+ */
	background: rgb(75,143,179); /* Old browsers */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#16486f',endColorstr='#5ca6c8');*/
}

.grayback {
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
	background: rgb(238,238,238); /* Old browsers */
	}
.lightGray { background:#F3F3F3;}

/*區塊*/
.blockBox { display:inline-block; width:100%;}
.inlineBlock{display:inline-block;}

/*區塊:置中*/
.autobox{ margin:0 auto; width:970px;}

/*區塊:置中 有邊距*/
.boxAuto{ margin:10px auto;}

/*陰影大區塊*/
.box {
    background-color: #fefefe;
    box-shadow: 0 3px 7px 1px rgba(2, 2, 2, 0.15);
}

.ie7_input input{ border:none !important; background:none !important;}

/*字置中*/
.Center { text-align:center;}
/*字靠左*/
.textleft{ text-align:left;}
/*字靠右*/
.textright{ text-align:right;}

/*小手*/
.pointer{cursor:pointer;}

/*粗體*/
.bold { font-weight:bold;}

/*粗體:消除*/
.fontnormal{ font-weight:normal;}

/*行高:消除*/
.linenormal{line-height:normal;}

/*圓角*/
.radius {
  border-radius: 3px;
  }
.radius_top{ border-radius:3px 3px 0 0;}
.radius_bottom{ border-radius: 0 0 3px 3px;}

/*IMG*/
.midImg img{ vertical-align:middle;}
.botImg img{ vertical-align:bottom;}
.topImg img{ vertical-align:top;}

.maxImg img { max-height:100%; max-width:100%;}


/*定位*/
.relative { position:relative;}
.absolute{ position:absolute;}
.fixed { position:fixed;}

.top0{ position:absolute; top:0;}
.top8px {position:absolute; top:8px;}
.right0{ position:absolute; right:0;}
.right5px{ position:absolute;  right:5px;}
.bottom0{position:absolute;  bottom:0;}
.left0{ position:absolute; left:0;}
.leftPosition1{ position:absolute; left:38%;}
.leftPosition2{ position:absolute; left:28%;}

/*標題*/
.bartitle { /*border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc;*/ margin-top:10px;}
.bartitle h4 {border-bottom:2px solid #62A23C; padding-left:0.35em;}

/*限制高度*/
.hidden { line-height:30px; height:30px; overflow:hidden;}



/*字顏色*/
.red{color:#cc3333;}
.red2 {color:#cc3333;}
.orange {
	color:#F63;
}
.green{color:#097c25;}
.gray{ color:gray;}
.gray333{ color:#333;}

.red a:link, .red a:visited, .red a:active {
	color: #cc3333;
}
.red a:hover {
	color: #cc3333;
	text-decoration:underline;
}

/*實線*/

.solidccc1px{ border:1px solid #ccc;}
.solid1px_trl{ border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc;}

.solid1px_top{ border-top:1px solid #ccc;}
.solid1px_right{ border-right:1px solid #ccc;}
.solid1px_bottom{ border-bottom:1px solid #ccc;}
.solid1px_left{ border-left:1px solid #ccc;}

.dotted1px{border:1px dotted #ccc;}

.dashed1px_bottom{ border-bottom:1px dashed #ccc;}

.solid2px{ border:2px solid #ccc;}
.solid2px_bottom{ border-bottom:2px solid #666;}

/*黃線*/
.solidYellow1px{border:1px solid #fed558;}
.solidYellow2px{border:2px solid #fed558; overflow:hidden !important;}

/*標題區塊灰底圓角*/
.BlockDuplexRounded{
	background:rgb(238,238,238);
	padding:5px;
	text-align:left;
	font-weight:bold;
	overflow:hidden;
	text-transform:capitalize;/*屬性控製文本的大小寫*/
	border-collapse:collapse;/*為表格設置合併邊框模型*/
	border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc;
	border-radius:3px 3px 0 0;
	clear:both;
}
.BlockDuplexRounded img { width:16px;}

/*標籤*/
.labelRed { height:30px;  color:#fff; background-color:#F30; text-indent:5px;}
.labelRed h5 {line-height:30px; }
.labelGrey {}
.labelOrange {}
.labelGreen {}



/*控制卷軸*/
.overflowAuto{ overflow:auto;}
.overflowHidden{ overflow:hidden;}
.overflowScroll{ overflow:scroll;}

/*寬px*/
.w85px{ width:85px;}
.w100px{ width:100px;}
.w150px{ width:150px;}
.w200px{ width:200px;}
.w250px{ width:250px;}
.w270px{ width:270px;}
.w300px{ width:300px;}
.w350px{ width:350px;}
.w380px{ width:380px;}
.w400px{ width:400px;}
.w450px{ width:450px;}
.w470px{ width:470px;}
.w500px{ width:500px;}
.w600px{ width:600px;}
.w700px{ width:700px;}

/*高px*/
.h40px{ height:40px;}
.h50px{ height:50px;}
.h60px{ height:60px;}
.h90px{ height:90px;}
.h100px{ height:100px;}
.h200px{ height:200px;}
.h300px{ height:300px;}
.h400px{ height:400px;}
.h500px{ height:500px;}
.h3em{ height:3em;}
.h5em{ height:5em;}

/*行高*/
.h1em{ line-height:1em;}
.h0105em{ line-height:1.5em;}
.h0108em{ line-height:1.8em;}

.Em1 { line-height:1em;}
.Em2 { line-height:2em;}
.Em3 { line-height:3em;}
.Em4 { line-height:4em;}
.Em5 { line-height:5em;}
.Em6 { line-height:6em;}
.Em7 { line-height:1.5em;}
.Em8 { line-height:2.5em;}
.Em9 { line-height:3.5em;}
.Em10 { line-height:4.5em;}
.Em11 { line-height:5.5em;}
.Em12 { line-height:6.5em;}


/*寬%*/
.w5 {width: 5%;}
.w9 {width: 9%; }
.w10 {width: 10%;}
.w13 {width: 13%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w35 {width: 35%; *width:34.99%;}
.w40 {width: 40%;}
.w45 {width: 45%; *width:44.99%;}
.w50 {width: 50%; *width:49.99%;}
.w55 { width: 55%;}
.w60 { width: 60%;}
.w65 { width: 65%;}
.w70 { width: 70%;}
.w75 { width: 75%;}
.w80 { width: 80%;}
.w85 { width: 85%;}
.w90 { width: 90%;}
.w95 { width: 95%;}
.w100 { width: 100%;}
/*邊距*/

.m_05 { margin:5px;}
.m_0500{ margin:5px 0;}
.m_0005{ margin:0 5px;}
.mt_05{ margin-top:5px;}
.mr_05{ margin-right:5px;}
.mb_05{ margin-bottom:5px;}
.ml_05{ margin-left:5px;}

.m_10 { margin:10px;}
.m_1000{ margin:10px 0;}
.m_2000{ margin:20px 0;}
.m_0010{ margin:0 10px;}
.mt_10{ margin-top:10px;}
.mt_20{ margin-top:20px;}
.mr_10{ margin-right:10px;}
.mb_10{ margin-bottom:10px;}
.mb_15{ margin-bottom:15px;}
.mb_20{ margin-bottom:20px;}
.mb_30{ margin-bottom:30px;}
.ml_10{ margin-left:10px;}
.mlr_0510{ margin:0 5px 0 10px;}
.mtb_1505{ margin:15px 0 5px 0;}

/*內距*/
.p_05 { padding:5px;}
.p_0500{ padding:5px 0;}
.p_0005{ padding:0 5px;}
.pt_05{ padding-top:5px;}
.pr_05{ padding-right:5px;}
.pb_05{ padding-bottom:5px;}
.pl_05{ padding-left:5px;}

.p_10 { padding:10px;}
.p_1000{ padding:10px 0;}
.p_0010{ padding:0 10px;}
.pt_10{ padding-top:10px;}
.pr_10{ padding-right:10px;}
.pb_10{ padding-bottom:10px;}
.pl_10{ padding-left:10px;}
.pl_35{ padding-left:35px;}

/*字的大小*/
.size11px{ font-size:11px;}
.size12px{ font-size:12px;}
.size13px{ font-size:13px;}
.size14px{ font-size:14px;}
.size15px{ font-size:15px;}
.size16px{ font-size:16px;}
.size17px{ font-size:17px;}
.size18px{ font-size:18px;}
.size19px{ font-size:19px;}
.size20px{ font-size:20px;}
.size24px{ font-size:24.5px;}