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

/*Common Set*/
body
{
	font-size: 16px;
	margin: 0px;
	text-decoration: none;
	line-height: 150%;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	 -webkit-text-size-adjust: 100%;
	background-color:#99CCCC;
}	
a{
	 color:#000000;
	 text-decoration:none;
}
/*ipad或iphone會默認電話可撥自動加連結而改變樣式/所以在這加上這段*/
a[href^=tel]{ color: inherit; text-decoration: none; }

button{
	outline:none;
}
	
	
input,textarea,select,button,submit{
	font-size:18px;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",Arial,taipei, Helvetica, sans-serif;
}
input,textarea{
	padding-left:5px;
}
/*表單藍框問題*/
input:focus,textarea:focus{outline:none;}

ul{
	padding:0;
	margin:0;
	list-style:none;
}
.input_big{
	width:20px;
	height:20px;
}
.input_100{
	width:95%;
}


/* 解決浮動的CLEARFIX */
.cssfix:before, .cssfix:after { 
   content: "";
   display: table; 
}
.cssfix:after {
   clear: both; 
}
.cssfix { 
   zoom: 1; /* IE6&7 */ 
}

/*login*/
#login_head{
	height:60px;
	background-color:#800000;
	color:#ffffff;
	position:fixed;
	z-index:9;
	top:0;
	width:100%;
}
#pc_head{
	display:none;
}
#mobile_head{
	display:block;
}
	.big_h1{
		font-size:25px;
		font-weight:bold;
		padding-left:20px;
			line-height:60px;
	}
	#login_cart{
		display:none;
	}

	#login_cart2{
	
		margin-top:10px;
		margin-bottom:10px;
				padding-right:10px;
	}
	#login_cart2 a{
		color:#FFFFCC;
	}
	#login_member{
	
		color:#ffffff;
		font-size:30px;
		line-height:60px;

	}
	#login_member a{
		color:#ffffff;
	
	}
#login_kind{
	max-width:1000px;
	width:100%;
	line-height:50px;
	font-size:13px;
	color:#808080;

	text-align:center;
		margin-top:60px;

}	
  .slide-box{
        
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        /*去掉滾動條*/
        .slide-box::-webkit-scrollbar{
            width:0; 
            height:0; 
            display: none;
        }	
 .slide-item{
            width:70px;
            height: 50px;
          margin-right: 10px;
        }

#login_cf2{
	display:block;

}
#login_cf{
	display:none;
}
#login_main{
	text-align:center;
	padding-top:60px;
	margin:20px auto;
	font-size:13px;

}	
	#login_member2{
	margin:0 auto;
	background-color:#ffffff;
	padding:20px;	
		
	}
		#product_area{
		margin-top:20px;
		padding-left:20px;
		padding-right:20px;
			line-height:30px;
		
	}
@media only screen and (min-width:500px) {
	.product_box{
	display:inline-block;
	width:31.3%;
	margin:1%;
		float:left;
	}

}	
@media only screen and (max-width:499px) {
	.product_box{
	display:inline-block;
	width:48%;
	margin:1%;
		float:left;
}

}	

	.product_box img{
	width:100%;
		}

#login_footer{
		height:60px;
	background-color:#800000;
	color:#ffffff;
	padding:30px;
	display:block;
	text-align:center;

}


/*top*/
#top{
		display:block;
		z-index:999;
		min-width:320px;
		position:fixed;
		top:0px;

		height:60px;
		/*position:fixed;
		top:0px;
		z-index:99;*/
		width:100%;
		background-color:#FFFFFF;
		border-bottom:1px #cccccc solid;	
		/*box-shadow:0px 4px 20px -2px #cccccc;*/	
		/*box-shadow: x y blur spread color inset;
		水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
}
	#header{
		display:block;
		height:60px;
		
	background-color:#FFFFFF;
		/*box-shadow:0px 4px 20px -2px #cccccc;*/	
		/*box-shadow: x y blur spread color inset;
		水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	}
#logo {
		 display:block;
		 color:#333333;
		 height:60px;
		

				 
		}
		#logo a{
			text-decoration:none;
			
		}
		
			#logo_1{
				font-size:25px;
				line-height:60px;
				float:left;
				margin-left:10px;

			}
@media only screen and (min-width:381px){
	#menu_area{
				font-size:20px;
				width:200px;
				padding-right:20px;
				float:right;
				line-height:60px;
	}
		#sitem2{
			width:100px;
			line-height:60px;
			text-align:right;
			float:right;
			color:#336699;
			text-align:left;
			}
}	
@media only screen and (max-width:380px){
	#menu_area{
				font-size:20px;
				width:100px;
				padding-right:20px;
				float:right;
				line-height:60px;
	}
		#sitem2{
				display:none;
			}
}		
			
		
			#sitem1{
			width:60px;
			line-height:60px;
			text-align:left;
			float:right;
			
			}
			#sitem1 a{
			color:#800000;
			}
		
	

			#cell_menu{
				float:right;
				width:40px;
				margin-right:10px;
			}
			
	
		
#a_menu {
	width:100%;
	height:100%;
	top:60px;	
/*	position: absolute; */
	position:fixed;
	 background-color:#cccccc;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	z-index:5;
	
	}	 
	#a_menu a{
		
		 text-decoration:none;
		
		 color:#FFFFFF;
	}
	#a_menu a:hover{
	
		color:#FFCC33;
		
	
	}
	#a_content{
		width:96%;
		margin:2% auto;
		text-align:center;
		height:80%;
		overflow:auto;
		
	}	 
	.a_sub{ 
		/*display:block; width:100%;height:70pxborder-bottom:#FFFFFF 1px solid;;
		 line-height:70px;*/
		display:inline-block;
		width:46%;
		float:left;
		height:auto;
		line-height:30px;
		padding-top:10px;
		padding-bottom:10px;
		margin:1%;
		 font-size:16px;
		 letter-spacing:1px;
		background-color:#5b6068;		 
		 text-align:center;
		 color:#FFFFFF;
		
	
	}
	.a_sub a{ 
		/*display:block; width:100%;height:70p border-bottom:#FFFFFF 1px solid;x;
		 line-height:70px;*/
		display:inline-block;
		width:98%;
		height:auto;
		line-height:30px;
		padding-top:10px;
		padding-bottom:10px;
		margin:1%;

		 font-size:16px;
		 letter-spacing:1px;
		background-color:#5b6068;
		
		 
		
		 text-align:center;
		 color:#FFFFFF;
		
	
	}
	.a_sub a:hover{ 
		
		 
		 background-color:#336699;
		
	
	}


	

/*c*/
#c_area{
	width:100%;
	position: absolute;
	top:60px;
	
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	
}


#web{
	position: relative;
	overflow: auto;
	height:auto;
	
	
	
	/*因為#TOP是FIXED等於漂浮在上, 所以BODY的DIV從#WEB開始算,上面200PX的部分會被#TOP遮住,
	 所以要加上MARGIN-TOP:200PX,把DIV往下移
	 不可使用 TOP:200PX,雖然對#WEB本身沒有影響
	 但會使#WEB下面DIV的把#WEB當作FIXed狀態而自動往上移,然後被#WEB遮住*/
}
#b_area{
		display:none;
		
	}
	
#mainarea{
		padding:5px;
		position: relative;
	
}
	
#menu_title{
			margin-bottom:20px;
			font-size:25px;
			letter-spacing:2px;
			line-height:40px;
		}
		#content{
			width:100%;
			height:auto;
			min-height:100%;
		}

		/*電腦版*/
		#list_content{
			display:none;
		}
		/*手機板*/
			#list_content2{
			width:100%;
			height:auto;
			min-height:100%;
		}

		.table_title{
			background-color:#669999;
			color:#FFFFFF;
		}
		.table_td{
			background-color:#DFEDEF;
			color:#336666;
		}
		.table_title2{
			
		background-color:#0099CC;
			color:#FFFFFF;
		}
		.table_td2{
		background-color:#CCFFFF;
		color:#336699;
		
		
		}
		.table_title3{
		
		background-color:#FFCC00;
		color:#333333;
		}
		.table_td3{
	
		background-color:#FFFFCC;
		color:#336699;
		
		
		}
		.table_title4{
		
		background-color:#666666;
		color:#FFFFFF;
		}
		.table_td4{
	

		background-color:#CCCCCC;
		color:#336699;
		
		
		}
		.table_title5{
		
	
		background-color:#ECE29F;
		color:#663300;
	
		}
		.table_td5{
			background-color:#ffffff;
		color:#663300;
	
		}

.button_07{
	font-size:16px;
	line-height:25px;
	border-radius:5px;/*圓角*/
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;

	background-color:#006666;
	cursor:pointer;
	padding-left:5px;
	padding-right:5px;
	letter-spacing:2px;
	border:#FFFFFF 1px solid;
}

/*common*/





/*page number*/
.pagination a, .pagination a:link, .pagination a:visited {
	color:#265827;
	padding:3px 5px;
	background:#ffffff;
	border:1px solid #ccc;
	TEXT-DECORATION: none;
}
.pagination a:hover {
	color:white;
	background:#567556;
	border:1px solid #567556;
}
.pagination span {
	padding:4px 6px;
}
.pagination a span {
	font-size:inherit;
	display:none;
	visibility:hidden;
}
.pagination span.disable {
	padding:3px 5px;
	border:1px solid #eee;
	color:#ffffff;
	background:#999999;
}
/*other*/

.button_01{
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	background-color:#FF9900;
	border:#FFFFFF 1px solid;
	border-radius:20px;/*圓角*/
	/*box-shadow:2px 4px 5px -2px #999999;	box-shadow: x y blur spread color inset;
	水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	letter-spacing:2px;
}
.button_02{
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	background-color:#666666;
	border:#FFFFFF 1px solid;
	border-radius:20px;/*圓角*/
	/*box-shadow:2px 4px 5px -2px #999999;	box-shadow: x y blur spread color inset;
	水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	letter-spacing:2px;
}
.button_03{
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	background-color:#669966;
	letter-spacing:2px;
	border-radius:20px;/*圓角*/
	/*box-shadow:2px 4px 5px -2px #999999;	box-shadow: x y blur spread color inset;
	水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	border:#FFFFFF 1px solid;
}
.button_04{
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	background-color:#99CCFF;
	border-radius:20px;/*圓角*/
	/*box-shadow:2px 4px 5px -2px #999999;	box-shadow: x y blur spread color inset;
	水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	border:#FFFFFF 1px solid;
}
.button_05{
	font-size:16px;
	line-height:25px;
	border-radius:5px;/*圓角*/
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	background-color:#CC3333;
	cursor:pointer;
	padding-left:5px;
	padding-right:5px;
	letter-spacing:2px;
	border:#FFFFFF 1px solid;
}
.button_06{
	font-size:16px;
	line-height:25px;
	border-radius:5px;/*圓角*/
	color:#ffffff;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	
	background-color:#336699;
	cursor:pointer;
	padding-left:5px;
	padding-right:5px;
	letter-spacing:2px;
	border:#FFFFFF 1px solid;
}


/*common  css*/