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

@import url("reset.css");
body{font-family:"微軟正黑體",Arial, Helvetica, sans-serif; line-height:1.7; font-size:13px; color:#222; background-color:#fff;}
a{ color:#222; text-decoration:none;}
a:hover{ color:#8d2a1f; text-decoration:none;}




#Wrapper_All{ width:100%; position:relative; z-index:100;}
.Header_AllAll{ position:absolute; z-index:100;}

@media only screen and (min-width: 769px) {
#Header_All{ width:100%; height:185px; position:fixed; top:0; background-color:#fff; z-index:10000;}	
#Center{ width:1060px; padding:0; margin:200px 0 0 0; /*margin:185px 0 0 0;*/ position:absolute; z-index:-1;}
#grid-content { width:1060px; margin:200px 50px 0 50px; /*margin:185px 50px 0 50px;*/ }

}


/** PC MAC **/

	/*body{ background:#09C;}*/
	#Header{ width:1060px; height:200px; /*height:185px; margin:0 auto;*/ margin:0 50px; }
	#Header .Logo{ margin:25px 0;}
	#Header_List{height:185px; padding:0 50px;}	
	#Header_List .Logo{ margin:20px 0;}


	#Menu{width:100%; height:50px;}
		 #Menu ul.MenuList{ margin:0 0 0 -15px;}
				ul.MenuList li  { position:relative; display:block; float:left;/*  color:#fff; line-height:40px;*/}
				ul.MenuList li a.navbtn{ display:block; float:left; line-height:30px; height:30px; padding:0 20px 0 25px; font-size:15px;
									font-family:"微軟正黑體","Lucida Grande"; font-weight:bold;}
				ul.MenuList li ul.sub{ position:absolute; z-index:10; left:0px; top:30px; width:400px; background:#fff;}
				ul.MenuList li ul.sub li{ display:block; float:left;}
				ul.MenuList li ul.sub li a.subbtn{ display:block; float:left; line-height:25px; height:25px; font-size:13px; padding:0 0px 0 25px;}

			 ul.MenuList li>ul.sub { visibility: hidden;}
			 ul.MenuList li:hover>ul.sub { visibility: visible;}



#Wrapper{ width:1060px; margin:0 50px;}
	#Center{ width:1060px; padding:0; /*margin:200px 0 0 0; margin:185px 0 0 0;*/ position:absolute; z-index:-1;}
		
		ul.NewsList{ padding-top:0px; font-size:13px;}
			ul.NewsList li{ height:330px; margin:0 0 25px 0; /*border-bottom:1px solid #888;*/}
			ul.NewsList li span{  padding:0 20px 0 0;}
			ul.NewsList li:hover{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95);}
			
		ul.AboutList{ width:540px; height:50px; padding:20px 0 0 12px;}
			ul.AboutList li a{ display:block; float:left; padding:0 75px 0 0; line-height:1.3; font-size:15px;
				font-family:"微軟正黑體","Lucida Grande"; font-weight:bold;}

		ul.DetailLink{ float:left; padding-top:100px; width:70px;}
			ul.DetailLink li{}

		.LeftAll{ margin:0 0 0 757px; position:absolute; z-index:1;/**/}

		.RightArea{ float:left; width:702px; padding:20px 25px 25px 25px; background:#e5e5e5; }
		.RightArea00{width:700px; padding:25px 40px 25px 10px; background:#fff;}
		/*.RightArea img{ width:700px;}*/
		img.Float_Right{ float:right; padding:0 0 25px 40px;}
		img.Float_News{ float:right; padding:0 0 25px 40px; width:480px; height:300px;}
		

/************* Vgrid (list layout) ******************************************************************/
#grid-content { width:1060px;  margin:200px 50px 0 50px; /*margin:185px 50px 0 50px;*/ }
	#grid-content div { width:250px; background:#e5e5e5; padding:5px 5px 0px 5px; margin:0 5px 5px 0;}
	#grid-content div img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */}
	#grid-content div a p{ display:block; border-bottom:1px solid #888; font-size:13px; line-height:1.3; letter-spacing:1px; height:45px;
			padding:10px 6px 0 6px; margin:0 0 5px 0; font-family:"微軟正黑體","Lucida Grande";}
	#grid-content div a span{ display:block; font-size:15px; letter-spacing:2; margin-bottom:0px; font-weight:bold;
			font-family:"微軟正黑體","kozuka Mincho Pr6N B","Meiryo UI", Meiryo, "Mesquite Std"; }
	#grid-content div:hover{ background:#8c291e;}
	#grid-content div:hover a{ color:#fff;}
	#grid-content div:hover a p{border-bottom:1px solid #fff;}
	#grid-content div a:hover img{filter: none; -webkit-filter: grayscale(0%);}





/** Ipad **/
@media only screen and (min-width: 321px) and (max-width: 768px) {
	/*body{ background:#F9C;}*/
#Header_All{ width:100%; height:185px;/* position:fixed; top:0;*/ background-color:#fff;}
#Center{ width:1060px; padding:0; position:absolute; z-index:-1;}	
#grid-content { width:1060px; margin:0px 50px 0 50px; background:#fff; }

}

/** Phone **/
@media only screen and (max-width: 321px){
#Header_All{ width:100%; height:185px; background-color:#fff;}
#Center{ width:280px; padding:0; position:absolute; z-index:-1;}
#grid-content { margin:0px 20px 0 20px; background:#fff;}

	
}



@media only screen and (min-width: 0px) and (max-width: 320px){
	/*body{ background:#993;}*/
	#Header{ width:280px; height:185px; /*margin:0 auto;*/ margin:0 20px; }
	#Header .Logo{ margin:25px 0;}
	#Header_List{height:185px; padding:0 20px;}	
	#Header_List .Logo{ margin:20px 0;}
	#Menu{width:100%; height:50px;}
		#Menu ul.MenuList{ margin:-20px 0 0 -5px;}
				ul.MenuList li  { position:relative; display:block; float:left;/*  color:#fff; line-height:40px;*/}
				ul.MenuList li a.navbtn{ display:block; float:left; line-height:25px; height:25px; padding:0 10px; font-size:15px;
									font-family:"微軟正黑體","Lucida Grande"; font-weight:bold;}
				ul.MenuList li ul.sub{ position:absolute; z-index:10; left:0px; top:25px; width:320px; background:#fff;}
				ul.MenuList li ul.sub li{ display:block; float:left;}
				ul.MenuList li ul.sub li a.subbtn{ display:block; float:left; line-height:25px; height:25px; font-size:13px; padding:0 0px 0 10px;}

			 ul.MenuList li>ul.sub { visibility: hidden;}
			 ul.MenuList li:hover>ul.sub { visibility: visible;}



#Wrapper{ width:280px; margin:0 20px;}
		
		ul.NewsList{ padding-top:0px; font-size:13px;}
			ul.NewsList li{  margin:0 0 25px 0; /*border-bottom:1px solid #888;*/}
			ul.NewsList li span{  padding:0 20px 0 0;}
			ul.NewsList li:hover{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95);}
			
		ul.AboutList{ width:280px; height:50px; padding:20px 0 0 12px;}
			ul.AboutList li a{ display:block; float:left; padding:0 20px 0 0; line-height:1.3; font-size:15px;
				font-family:"微軟正黑體","Lucida Grande"; font-weight:bold;}

		ul.DetailLink{ float:left; padding-top:100px; width:70px;}
			ul.DetailLink li{}

		.LeftAll{ margin:0 0 0 757px; position:absolute; z-index:1;/**/}

		.RightArea{ float:left; width:250px; padding:20px 15px 25px 15px; background:#e5e5e5; }
		.RightArea img{ width:250px;}
		.RightArea00{width:700px; padding:25px 40px 25px 10px; background:#fff;}
		.AboutBox img{ width:280px;}
		.ContactBox img{ width:280px;}
		ul.LeftArea{ display:none;}
		img.Float_Right{ width:280px; padding:0 0 25px 0;}
		img.Float_News{width:280px; padding:0 0 15px 0;}


/************* Vgrid (list layout) ******************************************************************/
	#grid-content div { width:250px; background:#e5e5e5; padding:5px 5px 0px 5px; margin:0 5px 5px 0;}
	#grid-content div img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */}
	#grid-content div a p{ display:block; border-bottom:1px solid #888; font-size:13px; line-height:1.3; letter-spacing:1px; height:45px;
			padding:10px 6px 0 6px; margin:0 0 5px 0; font-family:"微軟正黑體","Lucida Grande";}
	#grid-content div a span{ display:block; font-size:15px; letter-spacing:2; margin-bottom:0px; font-weight:bold;
			font-family:"微軟正黑體","kozuka Mincho Pr6N B","Meiryo UI", Meiryo, "Mesquite Std"; }
	#grid-content div:hover{ background:#8c291e;}
	#grid-content div:hover a{ color:#fff;}
	#grid-content div:hover a p{border-bottom:1px solid #fff;}
	#grid-content div a:hover img{filter: none; -webkit-filter: grayscale(0%);}


}


		.AboutBox{ padding:0px 0 0 12px;}
		.ContactBox{ padding:0px 0 0 0;}

		ul.LeftArea{ float:right; width:260px; margin:0 43px 25px 0; }
			ul.LeftArea li a { display:block; float:left; width:250px; cursor:pointer; padding:5px 5px 0 5px; margin:0 5px 5px 0; background:#e5e5e5;/* background:#f5f3ef;*/}
			ul.LeftArea li img {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
				filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */}
			ul.LeftArea li a p{ display:block; border-bottom:1px solid #888; font-size:13px; line-height:1.3; letter-spacing:1px; height:42px;
				padding:10px 6px 0 6px; margin:0 0 5px 0; font-family:"Lucida Grande"; }
			ul.LeftArea li a span{ display:block; font-size:15px; letter-spacing:2; margin-bottom:0px;
				font-family:"微軟正黑體","kozuka Mincho Pr6N B","Meiryo UI", Meiryo, "Mesquite Std";font-weight:bold;}
			ul.LeftArea li a:hover{ background:#8c291e;}
			ul.LeftArea li a:hover{ color:#fff;}
			ul.LeftArea li a:hover p{border-bottom:1px solid #fff;}
			ul.LeftArea li a:hover img{filter: none; -webkit-filter: grayscale(0%);}


		h1,h2,h3,h4,h5,h6{ font-weight:normal; padding:0; margin:0;}
		h1{ font-size:21px; padding-bottom:0px; /*font-weight:normal;*/ font-weight:bold;
		 font-family:"微軟正黑體","Kozuka Mincho Pr6N H","Kozuka Mincho Pro H","華康黑體 Std W5"; letter-spacing:2px;}
		h1 span.txtEN{font-family:"微軟正黑體","Kozuka Mincho Pr6N M","Kozuka Mincho Pro M"; letter-spacing:2px;}
		h2{ font-size:20px; padding-bottom:0px; font-weight:bold;}
		h3{ margin-top:10px;}
		h4{}
		h5{ font-size:12px; padding-bottom:15px;}
		h6{ font-size:11px; padding-bottom:5px;}		


		ul.PageBtn{ margin:25px 0; background:#fff;}
			ul.PageBtn li span{ display:block; font-size:15px; line-height:52px;}
			ul.PageBtn li.Prev a{ display:block; float:left; width:210px; height:52px; text-align:left;padding:23px 15px 20px 40px; margin-right:172px; 
				background: url(../images/arrow_prev.png) left top no-repeat; }
			ul.PageBtn li.Next a{ display:block; float:left; width:210px; height:52px; text-align:right; padding:23px 40px 20px 15px;
				background: url(../images/arrow_next.png) right top no-repeat;}


		.Footer{ clear:both; padding:10px 0; height:130px; border-top:1px solid #888; font-size:11px;}





/*============================================================================================================*/
br.CLEAR{ clear:both; height:0; line-height:0; font-size:0;}

/*===== 文字區 ===============================================================================================*/
.font_red{ color:#ff0000; font-weight:bold;}
.font_black{ font-weight:bold; color:#000;}
.font_11{ font-size:11px; color:#333;}



/*===== 按鈕區 ===============================================================================================*/
.Btn_Num{ width:85%; margin:10px auto; text-align:center; font-size:12px; color:#777;}
.Btn_Num a{ padding:0 5px; margin:0 2px; color:#777; background:#fff; border:1px solid #888;}
.Btn_Num a.stay ,
.Btn_Num a:hover{ color:#fff; background:#f9b024; border:1px solid #924b1c; font-weight:bold;}

a.BtnBtn{padding:2px 5px; margin:5px 3px; color:#777; background:#fff; border:1px solid #888; font-size:12px;}
a.BtnBtn:hover{ color:#fff; background:#f9b024; border:1px solid #924b1c; font-weight:bold;}

a.BBTN{ display:block; float:left; width:150px; height:30px; text-align:center; border:1px solid #999; background:url(../images/btn_bg.jpg) repeat-x; line-height:30px; font-size:13px; color:#ffe5f1; margin:0 2px;}
a:hover.BBTN{ color:#fff; font-weight:bold;}


/*===== 表格區 ===============================================================================================*/
.Web_Bar{ background:url(../images/bar_bg.jpg) repeat-x; height:50px; line-height:50px; padding:0 20px; font-size:20px; font-weight:bold; color:#630; border:1px solid #C96;}

.Web_Form { margin:5px 0 0 0;}
.Web_Form table{width:100%;}
.Web_Form tr.Gray{ background:#f4f4f4;}
.Web_Form td{line-height:35px; color:#555; padding:0 10px; border-bottom:1px dashed #ccc;}
.Web_Form td.TITLE{ background:url(../images/icon_arrow.png) left center no-repeat; padding-left:20px;}
.Web_Form td.Edit{line-height:25px; padding:5px 0 10px 10px;}
.Web_Form td span.LinkText{ display:block; font-size:18px; font-weight:bold; line-height:32px;}
.Web_Form td a{ color:#555;}
.Web_Form td a:hover{ color:#F60; font-weight:bold;}
.Web_Form td img.LinkPic{ width:150px; height:50px; border:1px solid #888; margin:5px 0;}
.Web_Form td img.StorePic{width:225px; height:110px; border:1px solid #888;}
.Web_Form td img.PicLeft{ float:left; width:200px; margin:8px; border:1px solid #ccc;}
.Web_Form td img.PicRight{ float:right; width:200px; margin:8px; border:1px solid #ccc;}

	#ShowPicBox{ width:100%; text-align:center;}
		#album{background:#fff;}
		#PicShow{width:335px; /*height:280px;*/ padding:1px; background:#fff; border:2px solid #e6e6e6;}
		.PicSize{ width:335px;}
		#PicList{ width:100%; margin:5px 0 0 0;}
		.smallPic{ width:70px; height:55px; background-color:#fff; padding:1px; border:1px solid #ccc; margin:0 3px 0 0;}
		.garyBG{ background-color:#666;}



/*----- text_bar --------------------------------------------------------------------------------------*/
.Input_Select{width:175px; height:22px; background:url(../images/btn_bg.gif) top repeat-x; padding-left:5px; border: 1px solid #c3c3c3; color: #787878; font-size:12px; line-height:22px;}	
.Input_Select02{width:90px; height:22px; background:url(../images/btn_bg.gif) top repeat-x; padding-left:5px; border: 1px solid #c3c3c3; color: #787878; font-size:12px; line-height:22px;}	
	
.Text_Bar1{width:530px; height:22px; padding:0 5px; background:url(../images/btn_bg.gif) top repeat-x; border:1px solid #c3c3c3; color:#787878;
           font-size:13px; line-height:22px; margin-right:5px;}		
		
.Select_Bar2{width:350px; height:22px; background:url(../images/btn_bg.gif) top repeat-x; border:1px solid #c3c3c3; color:#787878;
           font-size:13px; line-height:22px; margin-right:5px;}