﻿@charset "UTF-8";
/* ~~ 元素/標籤選取器 ~~ */
ul, ol, dl { /* 由於瀏覽器之間的差異，最佳作法是在清單中使用零寬度的欄位間隔及邊界。為了保持一致，您可以在這裡指定所要的量，或在清單包含的清單項目 (LI、DT、DD) 上指定所要的量。請記住，除非您寫入較為特定的選取器，否則在此執行的作業將重疊顯示到 .nav 清單。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 移除上方邊界可以解決邊界可能從其包含的區塊逸出的問題。剩餘的下方邊界可以保持區塊不與接在後面的元素接觸。 */
	padding-right: 15px;
	padding-left: 15px; /* 將欄位間隔加入至區塊內元素的兩側 (而不是區塊元素本身)，即可不需執行任何方塊模型的計算作業。具有側邊欄位間隔的巢狀區塊也可當做替代方法。 */
}
a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
	border: none;
}
/* ~~ 網站連結的樣式設定必須保持此順序，包括建立滑過 (Hover) 效果的選取器群組在內。~~ */
a:link {
	color: #42413C;
	text-decoration:none; /* 除非您要設定非常獨特的連結樣式，否則最好提供底線，以便快速看出 */
}
a:visited {
	color: #6E6C64;
	text-decoration:none;
}
a:hover, a:active, a:focus { /* 這個選取器群組可以讓使用鍵盤導覽的使用者，也和使用滑鼠的使用者一樣擁有相同的滑動體驗。 */
	text-decoration: none;
	-webkit-transition:color 0.5s ease-out;
	-moz-transition:color 0.5s ease-out;
	-o-transition:color 0.5s ease-out;
	transition:color 0.5s ease-out;
	color:#D60950;
	outline:none;
	/*background-color:;*/
}


/* ~~ 導覽清單樣式 (如果選擇使用 Spry 之類的預製飛出選單，則可移除) ~~ */
ul {
	list-style: none; /* 這會移除清單標記 */
}
ul li {
	border-bottom: 1px solid ; /* 這會建立按鈕分隔 */
}
ul { /* 將這些選取器放入群組，即可確保您的連結即使在受到點擊後仍保有按鈕外觀 */

	display: block; /* 這會為連結提供區塊屬性，使連結能填滿包含它的整個 LI，讓整個區域都能回應滑鼠點按動作。 */
	text-decoration: none;

}



body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFF;
	margin: 0;
	padding: 0;
	color: #000;
	font-size:16px;
	font-family: "微軟正黑體", Verdana, Geneva, sans-serif, Arial, futura, "Century Gothic";

}

header {
	background-color:#E6E6E6;
	z-index:999;

}

/* ~~ 頁尾 ~~ */
footer {
    color:#ffffff;
	position: relative;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */
	clear: both; /* 這個 clear 屬性可以強制 .container 辨識欄結束於何處以及包含欄的位置 */
}

/*HTML5 支援 – 設定新的 HTML5 標籤以顯示區塊並使瀏覽器能夠正確顯示標籤。 */
header, section, footer, aside, article, figure {
	display: block;
}


input[type=text],input[type=password]{
	font-size:20px;
	color:#F90;
}
input[type=button], input[type=button]:hover,input[type=submit], input[type=submit]:hover {
	position:relative; 
	font-size:16px;
	left:0px;
	border:1px solid #adc5cf;
	background: #D60950; /* Old browsers */
	background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fff 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
	background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
	color:#F90;
	cursor: pointer;
	border-radius:10px; 
	-moz-border-radius:10px; 
	-webkit-border-radius:10px; 
}

.searchg{
	float: right;
	margin-right:90px;
	margin-top: -65px;
}

.searchg input[type=text]{
	font-size:16px;
	color:#000;
	padding:4px 15px 6px 30px;
	font-size:14px;
	margin:0px;
	background: url('../image/search.png') no-repeat 8px 6px; 
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
}
.searchg input[type=button],.searchg input[type=button]:hover {
	position:relative; 
	font-size:16px;
	left:0px;
	border:1px solid #adc5cf;
	background: #D60950; /* Old browsers */
	background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fff 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
	background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
	color:#F90;
	cursor: pointer;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
}

.header{
z-index:999;
position:fixed;
margin-top:-95px;
width:100%;
height:95px;
background-color:#FB0;	

	background: #FB0; /* Old browsers */
	background: -moz-linear-gradient(top, #FB0 0%, #FFF 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB0), color-stop(100%,#FFF)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #FB0 0%,#FFF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #FB0 0%,#FFF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #FB0 0%,#FFF 100%); /* IE10+ */
	background: linear-gradient(top, #FB0 0%,#FFF 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB0', endColorstr='#FFF',GradientType=0 ); /* IE6-9 */


}

.menu_content{
width: 960px;
margin: 0 auto;
z-index:998;	
}

.menu_logo{
	width:320px;
	margin-top:25px;
	z-index:997;
	margin-left: 1px;
	border: none;
}

.menu_more{
	float:right;
	margin-right:-10px;
	margin-top: -40px;
	border: none;
	z-index:996;
}


.footer{
 width:100%;
 height:95px;
 background-color:#F90;	
 background: #F90; /* Old browsers */    
}

/* ~~ 這個固定寬度的容器環繞著所有其他區塊 ~~ */
.container {
	clear: both;
	padding: 0;
	width: 960px;
	background-color: #FFFFFF;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;	
}
.T2
{
    float:left;
    margin-top:-70px;
}

.TT{
    float:left;
    margin-left:300px;
}

.menu{
	float:left;
	margin-left:0px;
	
	z-index:995;
}


.menu div{
	width:120px;
	float:left;
	margin-left:10px;
	padding:0;
	position: relative;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */
	text-align:center;
}

.nav1{
	display: none;
	height: 100%;
	background-color:#FEFEFE;
	width: 200px;
	margin:0 auto;
	top: 0 !important;
	z-index: 9999;
	color: #999;
	box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5) inset;
	background-repeat: repeat;
	padding:0;
	position:fixed;
}

.nav1-title{
	margin:0 auto;
	height:40px;
	background-color:#D60950;
	color:#FFF;
	z-index:999;
	padding:0;
	position: relative;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */

}

.nav1-title-l{
	margin:10px auto;
	padding: 0;
	width:20px;
	height:20px;
	float:left;
	z-index:999;
}

.nav1-title-r{
	margin:0px auto;
	margin-left:20px;
	height:40px;
	font-size:20px;
	text-align:left;
	line-height:40px;
	z-index:999;
	
}

.nav1-body{
	margin:0px auto;
	margin-left:0px;
	padding: 0px;

}

.nav1-body ul li{
	margin:0px auto;
	margin-left:0px;
	padding: 0;
	height:40px;
	font-size:20px;
	text-align:left;
	line-height:40px;
	border-style:outset;
	border-width:1px;
	text-align:center;
}





.language{
	float: right;
	margin-right:-10px;
	margin-top: -80px;
}

.content {
    float:left;
	padding: 20px 0;
	width: 960px;
}

/* ~~ 這個群組選取器會在 .content 區域空間中提供清單 ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* 這個欄位間隔反映出上方標題和段落規則中的右方間隔。當欄位間隔位於下方時，便可將清單中的其他元素間隔開來；當位於左方時，則可藉此建立縮排。這些動作均可依需要進行調整。 */
}

/* ~~ 這是版面的欄位。~~ 

1) 欄位間隔只會置於區塊元素的頂端或底部。這些區塊內的元素在兩側會有欄位間隔，可讓您不需進行「方塊模型計算」。請記住，如果對區塊本身加入任何側邊的欄位間隔或邊框，在計算「總」寬度時，就會將這些加入您定義的寬度。您也可以選擇移除區塊元素中元素的欄位間隔，然後在其中放置沒有寬度的第二個區塊元素，並依設計所需放置欄位間隔。

2) 尚未為這些欄位提供邊界，因為它們全都是浮動的。如果必須加入邊界，請避免將其放在浮動方向的一側 (例如將右邊界放在設定為向右浮動的區塊上)。在許多時候，您都可以改用欄位間隔。對於必須違反此規則的區塊，您應該在區塊元素的規則中加入 "display:inline" 宣告，以防止某些版本的 Internet Explorer 將邊界加倍。

3) 因為可在文件中多次使用類別 (也可對單一的元素套用多個類別)，所以已為欄位指定類別名稱，而非 ID。例如，您可在必要時將兩個側邊列區塊堆疊起來。如有需要，也可以將這些名稱輕鬆地變更為 ID (只要您在每份文件中只使用一次)。

4) 如果想要將導覽放在左方而非右方，只要將這些欄設定為往反方向浮動 (全部往左，而非全部往右)，它們就會以相反順序呈現。您不需要在 HTML 原始碼中移動區塊。

*/
.sidebar1 {
	float:left;
	width:100%;
}

.sidebar2 {
	margin-top:40px;
	float:left;
	width:100%;
}



#titleword{
	font-size: 20px;
	color: #F06;
}

.round_photo {
    width: 250px;
    height: 250px;
    border: 1px solid #ddddde;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius:150px;
}



.UPBodyFont{
	font-size:18px;
	color:#999;
	margin:20px auto;
	position:relative;
	text-align:left;
	width:800px;

}



.UPTitle{
	font-size:30px;
	text-align:center;
	color:#F90;
	position:relative;
	margin-left:70px;
}


.UPSImage
{
	margin-top:-20px;
	width:100%;
	z-index:0;
	position:relative;
}

.UPFont{
	font-size:18px;
	color:#ff6a00;
	margin:20px auto;
	position:relative;
	text-align:left;
	width:800px;

}



#contact{
	font-size:22px;
}


.clear_center{
	font-size:22px;
	text-align:center;
	margin:0px auto;	
	position:relative;
}

.UPSection{
    margin-top:10px;
    border-top:1px solid #b4b4b4;
    border-bottom:1px solid #b4b4b4;
}