@charset "utf-8";
/* CSS Document */
/* ------------- IE6: _底線  IE7/6: *星號 --------------- */
@import "reset.css";
/*==============================Container&body Start===============================*/
body {
	background:url(../images/bg_bar.jpg) repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:1.5em;
	letter-spacing:0.1em;
}
/*a { blr:expression(this.onFocus=this.blur()) } *//*针对 IE 不過IE8已經不支援expression語法了. 所以還是在html裡面用布林運算方式加入吧<a href="#" hidefocus=”true”>*/ 
a { outline:none; }/*针对 FF*/
#container{
/*-----centerlized setup------*/
	position:relative;
/*-----centerlized setup------*/
	width: 794px;/*780+  Design icon info的widht:12+ margin:2*/
	_width:796px;/*IE6增加2px*/
	margin: 0 auto;
	text-align:left;

}
h1{
	color: #f67118;
	font-size: 15px;
	font-weight: bold;
}
h4{
	font-size:13px;
	color: #6f8b23;
	font-weight:normal;
	margin-top: -10px;
}
em{
	font-style:normal;
	color: #6f8b23;
 }
/*==============================Container&body End==================================*/



/*=======================Navigation Start 導覽列選單開始==============================*/
#main {
	float:left; /*包覆所有的內容起來靠左,所以才能設置Side info獨立靠右*/
}
#header{
	width: 780px;
}
#header #lan{/*語言選單*/
	position:absolute;
	top:181px;
	left:0px;
	width:130px;
	height:19px;
	font-size:10px;
	color:#FFFFFF;
	text-align:center;
	background:url(../images/lan_bar.jpg) no-repeat;
}
#header #lan a{
	text-decoration:none;
	color:#FFFFFF;
}
#header #lan a:hover{
	text-decoration:none;
	color:#FF9900;
}
#header ul{
	list-style-type:none;
}
#header li{
	float:left;
	width:130px;
	height:200px;
	/*text-indent:-9999px;*/ /*用text-indent就可以完美的把list文字移出視窗之外，但仍保留在html原始碼之中。而且連結感應區仍留在原地不受影響。==>會有虛線出現在Foxy2.0 Bug*/
}
#header li a{
	width:130px;
	height:200px;
	display:block;
	text-decoration:none;
	color:#f3f3f3;
}
#header h1{
	/*以下把文字以block element針對把字隱藏 font/line-height/vertical-align/padding*/
	font-size:0px;
	line-height:0em;
	color:#f3f3f3;
	vertical-align:middle;/*垂直置中*/
	padding-top:200px;/*因為li圖片高為200px,所以離上方200px的距離就會把字撐開移至200px下的間細中隱藏起來*/
}
#header  li#logo{
	background:url(../images/header_logo.jpg) no-repeat;
}
#header li#nav_1{
	background:url(../images/header_nav_1_off.jpg) no-repeat;
}
#header li#nav_1 a:hover{
	background:url(../images/header_nav_1_on.jpg) no-repeat;
}
#navlist a:link#current_01, #navlist a:visited#current_01, #navlist a:hover{
	background:url(../images/header_nav_1_on.jpg) no-repeat;
}
#header li#nav_2{
	background:url(../images/header_nav_2_off.jpg) no-repeat;
}
#header li#nav_2 a:hover{
	background:url(../images/header_nav_2_on.jpg) no-repeat;
}
#navlist a:link#current_02, #navlist a:visited#current_02, #navlist a:hover{
	background:url(../images/header_nav_2_on.jpg) no-repeat;
}
#header li#nav_3{
	background:url(../images/header_nav_3_off.jpg) no-repeat;
}
#header li#nav_3 a:hover{
	background:url(../images/header_nav_3_on.jpg) no-repeat;
}
#navlist a:link#current_03, #navlist a:visited#current_03, #navlist a:hover{
	background:url(../images/header_nav_3_on.jpg) no-repeat;
}
#header li#nav_4{
	background:url(../images/header_nav_4_off.jpg) no-repeat;
}
#header li#nav_4 a:hover{
	background:url(../images/header_nav_4_on.jpg) no-repeat;
}
#navlist a:link#current_04, #navlist a:visited#current_04, #navlist a:hover{
	background:url(../images/header_nav_4_on.jpg) no-repeat;
}
#header li#nav_5{
	background:url(../images/header_nav_5_off.jpg) no-repeat;
}
#header li#nav_5 a:hover{
	background:url(../images/header_nav_5_on.jpg) no-repeat;
}
#navlist a:link#current_05, #navlist a:visited#current_05, #navlist a:hover{
	background:url(../images/header_nav_5_on.jpg) no-repeat;
}

/*========================Navigation End 導覽列選單結束===============================*/



/*======================Side info Start 最右側設計公司資訊開始=========================*/
#designIcon{
	float:right;
	width:12px;
	height:210px;
	margin-left:2PX;
	display:inline;
	background:url(../images/design_firm.gif) no-repeat;
	font-size:0px;/*以下三行針對把字隱藏 font/line-height/color*/
	line-height:0em;
	color:#efefe1;
}
#designIcon a{
	width:12px;
	height:210px;
	display:block;
	text-decoration:none;
	color:#efefe1;
}
#designIcon a:hover{
background:url(../images/design_firm_on.gif) no-repeat;
}
/*========================Side info End 最右側設計公司資訊開始=============================*/



/*==========================Index Content Start 首頁開始=================================*/
#index{/*底圖設置*/
	float:left;
	width:780px;
	height:412px;
	margin-top:-7px;
	border-right:#EBEBE2 1px solid;
	border-left:#EBEBE2 1px solid;
	border-bottom:#EBEBE2 1px solid;
	background:url(../images/index_bg.jpg) no-repeat;
}
#index #indexCon{/*內容包含物*/
	float:left;
	width:780px;
	height:376px;
}
#index #indexCon p{
	_margin-top:-2px;/*for IE6 要把字隱藏就統一設定在邊界外, 雖然IE7 FF並沒有此問題 只要設了Font-size&line-height=0就都看不見了*/
	font-size:0px;
	line-height:0em;
	vertical-align:middle;/*垂直置中*/
}
/*==========================Index Content End 首頁結束=====================================*/



/*==========================About Content Start 關於開始=====================================*/
#about{/*底圖設置*/
	float:left;
	width:780px;
	height:412px;
	margin-top:-7px;
	border-right:#EBEBE2 1px solid;
	border-left:#EBEBE2 1px solid;
	border-bottom:#EBEBE2 1px solid;
	background:url(../images/about_bg.jpg) no-repeat;
}
#about #aboutCon{/*內容包含物*/
	height:336px;
	margin-top:40px;
	_margin-top:40px;
	margin-left:35px;
}
#about #aboutCon p{
	margin-top:5px;
	margin-bottom:20px;
}
/*==========================About Content Start 關於結束=====================================*/



/*==========================Product Content Start 產品開始=================================*/
#ieBorder2{/*針對IE6做的假border壓在最上面,因為實際的product背景有被撐開大概20px,所以在ie6的此頁面會的置中點大約往左移了20px*/
	position:absolute;
	_top:202px;
	_left:0px;
	_width:778px; 
	_height:729px;
	_border-right:#EBEBE2 1px solid;
	_border-left:#EBEBE2 1px solid;
	_border-bottom:#EBEBE2 1px solid;
}
#product{/*底圖設置*/
	float:left;
	width:780px;
	margin-top:2px;
	_margin-top:2px;
	/*border-right:#EBEBE2 1px solid;
	border-left:#EBEBE2 1px solid;
	border-bottom:#EBEBE2 1px solid;*/
	_border:0;
	background:#f3f3f3;/*底圖色讓footer的背景有顏色*/
	_background:transparent;
}
#product #productCon{
	width:780px;
	height:567px;
	_height:729px;
	background:url(../images/product_bg.jpg) no-repeat;
	_background:url(../images/product_bg_1.jpg) no-repeat;
	
}
#product #productCon ul{
	width:780px;
	height:230px;
	padding-left:35px;/*針對FF ul不能用margin 會影響底圖*/
	_padding-left:0px;/*針對IE6 padding會把值撐開;*/
	list-style-type:none;
}
#product #productCon #top{
	padding-top:50px;/*針對FF ul不能用margin 會影響底圖*/
	*padding-top:0px;/*針對IE6/7 ul不用padding 所以把padding值改回來 IE7okay 但IE6如設padding值會有超出範圍*/
	*margin-top:50px;/*針對IE6/7 ul不用padding */
}
#product #productCon #bottom{
	margin-top:30px;/*第二個 ul卻沒有影響到FF....真怪 全都可以用*/
}
#product #productCon li{
	float:left;
	width:200px;
	_width:250px;
	margin-right:60px;
	_margin-right:0px;
	color:#000000;
	vertical-align:bottom;/*vertical-align的屬性預設為baseline,如不做改變圖片下方會有間隙. 為了消除間隙,固指定"bottom"*/
}
#product #productCon li em{
	font-style:normal;
	color:#996600;
}
#product #productCon li a{
	text-decoration:none;
	color:#000000;
}
#product #productCon li a:hover{
	text-decoration:underline;
	color:#FF6600;
	_padding-top:-80px;
}
#product #productCon .roll{/*============================針對上方主要圖片===========================*/
	margin-left:16px;
	_margin-left:48px;/*針對IE6 上方的圖*/
}
#product #productCon #roll_01{
	background:url(../images/product_nav01_off.png) no-repeat;
}
#product #productCon #roll_01 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_01 a:hover{
	background:url(../images/product_nav01_on.png) no-repeat;
	_background:none;
}
#product #productCon #roll_02{
	/*_margin-right:65px;*/
	background:url(../images/product_nav02_off.png) no-repeat;
}
#product #productCon #roll_02 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_02 a:hover{
	width:158px;
	background:url(../images/product_nav02_on.png) no-repeat;
	_background:none;/*IE6無法讀取roll over時的.htc 使png透明的支援檔 所以在此不設IE6的底圖rollover*/
}
#product #productCon #roll_03{
	background:url(../images/product_nav03_off.png) no-repeat;
}
#product #productCon #roll_03 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_03 a:hover{
	background:url(../images/product_nav03_on.png) no-repeat;
	_background:none;
}
#product #productCon #roll_04{
	background:url(../images/product_nav04_off.png) no-repeat;
}
#product #productCon #roll_04 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_04 a:hover{
	background:url(../images/product_nav04_on.png) no-repeat;
	_background:none;
}
#product #productCon #roll_05{
	background:url(../images/product_nav05_off.png) no-repeat;
}
#product #productCon #roll_05 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_05 a:hover{
	background:url(../images/product_nav05_on.png) no-repeat;
	_background:none;
}
#product #productCon #roll_06{
	background:url(../images/product_nav06_off.png) no-repeat;
}
#product #productCon #roll_06 a{
	width:158px;
	height:134px;
	display:block;
	text-decoration:none;
}
#product #productCon #roll_06 a:hover{
	background:url(../images/product_nav06_on.png) no-repeat;
	_background:none;
}
#product #productCon li .conImg{
	float:right;
	margin:0;
	padding:0;
}
#product #productCon li p{/*============================針對上方主要圖片===========================*/
	width:210px;
	margin-top:4px;
	margin-left:16px;/*對齊上方圖片*/
	_margin-left:48px;/*針對IE6下方文字說明*/
}
#product #graphic{
	width:179px;
	height:177px;
	margin-top:-20px;
	_margin-top:-180px;
	background:url(../images/peanut.png) no-repeat;
}
#product #footer{
	margin-top:-40px;
}
/*==========================Product Content End 產品結束===================================*/



/*==========================Product Detail Start 產品內頁開始==============================*/
#productDet{/*底圖設置*/
	float:left;
	width:780px;
	margin-top:-8px;
	_margin-top:-8px;
	border-right:#EBEBE2 1px solid;
	border-left:#EBEBE2 1px solid;
	border-bottom:#EBEBE2 1px solid;
	background: #f3f3f3;/*底圖色讓footer的背景有顏色*/
}
#productDet #productDetCon{/*內容包含物*/
	width:780px;
	height:567px;/*原圖為780*712但是針對footer的位置縮短為600可見長度*/
	background:url(../images/product_detail_bg.jpg) no-repeat;
}
/*######## Product Series Area Start 左側系列商品Menu開始########*/
#productDet #productDetCon #prodSer{
	float:left;
	width:245px;
	_width:246px;
	height:450px;
	margin-top:51px;
	margin-left:13px;
	_margin-left:6px;
	background:url(../images/product_menu_bg.jpg) no-repeat;/*@@@@@@@@做底圖*/
}
#productDet #productDetCon #prodSer ul{
	list-style-type:none;
	margin-top:15px;/*指定menu上方的距離*/
	text-align:center;
}
#productDet #productDetCon #prodSer #pLeft{ /*ul 左邊*/
	float:left;
	margin-left:14px;
	_margin-left:7px;
}
#productDet #productDetCon #prodSer #pRight{ /*ul 右邊*/
	float:right;
	margin-right:15px;
	_margin-right:8px;
}
#productDet #productDetCon #prodSer li{
	width:100px;
	height:88px;
	font-size:0px;
	line-height:0em;
	color:#f3f3f3;
	vertical-align:bottom;/*vertical-align的屬性預設為baseline,如不做改變圖片下方會有間隙. 為了消除間隙,固指定"bottom"*/
}
#productDet #productDetCon #prodSer li a{
	width:100px;
	height:88px;
	display:block;
	color:#f3f3f3;
	text-decoration:none;
}
/*ul li 左邊*/
#productDet #productDetCon #prodSer li#p_S1{ 
	margin-bottom:22px;
	background:url(../images/product_menu_01_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S1 a:hover{ 
	background:url(../images/product_menu_01_on.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S2{ 
	margin-bottom:20px;
	background:url(../images/product_menu_02_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S2 a:hover{ 
	background:url(../images/product_menu_02_on.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S3{
	margin-bottom:25px;
	background:url(../images/product_menu_03_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S3 a:hover{
	background:url(../images/product_menu_03_on.jpg) no-repeat;
}
/*#productDet #productDetCon #prodSer li#p_S4{
	background-color:transparent;
}
#productDet #productDetCon #prodSer li#p_S4 a:hover{
	background-color:transparent;
}*/
/*ul li 右邊*/
#productDet #productDetCon #prodSer li#p_S5{
	margin-bottom:22px;
	background:url(../images/product_menu_04_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S5 a:hover{
	background:url(../images/product_menu_04_on.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S6{
	margin-bottom:20px;
	background:url(../images/product_menu_05_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S6 a:hover{
	background:url(../images/product_menu_05_on.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S7{
	margin-bottom:25px;/*單獨針對下方menu li#p_S8的圖案設定的距離*/
	background:url(../images/product_menu_06_off.jpg) no-repeat;
}
#productDet #productDetCon #prodSer li#p_S7 a:hover{
	background:url(../images/product_menu_06_on.jpg) no-repeat;
}
/*#productDet #productDetCon #prodSer li#p_S8{
	background-color:transparent;
}
#productDet #productDetCon #prodSer li#p_S8 a:hover{
	background-color:transparent;
}*/
/*######## Product Series Area End 左側系列商品Menu結束########*/
/*######## Item Display Area Start 右側單一商品內容展示開始########*/
#productDet #productDetCon #prodItem{/*右側所有內容物*/
	float:right;
	width:500px;
	height:445px;
	margin-top:51px;
} 
/*Top  #itemDisplay  上方物件包括:標題,單一系列商品裡所有的商品顯示 */
#productDet #productDetCon #prodItem #itemDisplay #seriesTitle{/*點選的產品系列標題*/
	width:165px;
	height:30px;
	margin-left:170px;
	/*background:url(../images/product_d_s02.png) no-repeat;*/
	/*_background:url(../images/product_d_s02.jpg) no-repeat;*//*IE6 PNG雖然寫上htc但是還是不能work*/
}
#productDet #productDetCon #prodItem #itemDisplay #signItemImg{/*點選的產品系列商品框架大小*/
	width:485px;
	height:174px;
	margin-top:5px;
	margin-left:3px;
	background: url(../images/product_item_bg.jpg) no-repeat;/*@@@@@@@@做底圖*/
	
}
#productDet #productDetCon #prodItem #itemDisplay #signItemImg ul{
	list-style-type:none;
	margin-left:22px;/*設定上邊的邊界使之可以在中間位置*/
	
}
#productDet #productDetCon #prodItem #itemDisplay #signItemImg li{
	float:left;
	width:80px;
	height:145px;
	margin-top:25px;/*設定上邊的邊界使之可以在中間位置*/
	margin-right:10px;/*設定每個物件的右邊邊界為5與旁邊的物件產生間隔*/
}
#productDet #productDetCon #prodItem #itemDisplay #signItemImg li a{
	width:80px;
	height:145px;
	display:block;
	text-decoration:none;
	font-size:0px;/*以下三行針對把字隱藏 font/line-height/color*/
	line-height:0em;
	color:#efefe1;
}
/*系列商品裡的單一物件之排列點選已經用JavaScriptRollover 代替 因為並非固定式的nav 不適用css RollOver*/
/*======================
#productDet #productDetCon #prodItem #itemDisplay #signItemImg li#item_01{
}
#productDet #productDetCon #prodItem #itemDisplay #signItemImg li#item_01 a:hover{
}
========================*/

/*Bottom #itemDetail 下方物件包括:單一產品放大圖片與內容*/
#productDet #productDetCon #prodItem #itemDetail{
	width:484px;
	height:300px;
	margin-top:12px;
	margin-left:3px;
}
#productDet #productDetCon #prodItem #itemDetail #itemImg{/*商品單一放大圖*/
	float:left;
	width:246px;
	height:222px;
	background:url(../images/product_item_bg1.jpg) no-repeat;/*@@@@@@@@做底圖*/
}
#productDet #productDetCon #prodItem #itemDetail #itemCon{/*單一商品內容:標題/內容*/
	float:right;
	width:228px;
	margin-top:8px;
}
#productDet #productDetCon #prodItem #itemDetail #itemCon #itemTitle{/*標題*/
	width:65px;
	height:19px;
	margin-left:77px;
	margin-bottom:15px;
	_margin-bottom:17px;
	background:url(../images/product_content.png) no-repeat;
	_background:url(../images/product_content.jpg) no-repeat;/*IE6 PNG雖然寫上htc但是還是不能work*/
	font-size:0px;/*以下三行針對把字隱藏 font/line-height/color*/
	line-height:0em;
	color:#efefe1;
}
#productDet #productDetCon #prodItem #itemDetail #itemCon ul{/*內容*/
	margin-left:8px;
	list-style-type:none;
}
#productDet #productDetCon #prodItem #itemDetail #itemCon li{
	color:#716666;
}
#productDet #productDetCon #prodItem #itemDetail #itemCon em{
	font-style:normal;
	color:#7e9d4f;
}
/*######## Item Display Area End 右側單一商品內容展示結束########*/
#productDet #proImg{/*底下的product字樣*/
	float:left;
	width:110px;
	height:54px;
	margin-top:-66px;
	_margin-top:-71px;
	margin-left:20px;
	_margin-left:10px;
	background:url(../images/product_word.jpg) no-repeat;;
}
/*============================Product Detail End 產品內頁結束===============================*/



/*==========================About Content Start 關於開始=====================================*/
#contact{/*底圖設置*/
	float:left;
	width:780px;
	height:412px;
	margin-top:-7px;
	border-right:#EBEBE2 1px solid;
	border-left:#EBEBE2 1px solid;
	border-bottom:#EBEBE2 1px solid;
	background:url(../images/contact_bg.jpg) no-repeat;
}
#contact #contactCon{/*內容包含物*/
	width:780px;
	height:336px;
	margin-top:40px;
	_margin-top:40px;
}
#contact #contactCon #conLeft{
 	float:left;
	margin-left:35px;
	_margin-left:18px;
}
#contact #contactCon #conRight{
	float:right;
	padding-right:125px;
}
#contact #contactCon h4{
	margin-top:10px;
}
#contact #contactCon p{
	margin-top:5px;
	margin-bottom:20px;
}
#contact #contactCon em{
	font-style:normal;
	color: #c67138;
 }
#contact #contactCon a{
 	text-decoration:none;
	color:#c67138;
 }
#contact #contactCon a:hover{
	text-decoration:underline;
}
/*==========================About Content Start 關於結束=====================================*/



/*=================================Footer Start 頁尾開始===================================*/
#footer{
	/*clear:both;*/
	float:right;
	padding-right:7px;
	background:url(../images/footer_logo.png) 0px 5px no-repeat;
}
#footer p{
	padding-left:30px;
	color:#8f8888;
}
#footer #en{
	font-size:10px;
	letter-spacing:normal;
}
/*=================================Footer End 頁尾結束===================================*/