@charset "utf-8";
/* CSS Document */
body {	
	margin: 0px 0px 0px 0px;
	background: url(images/bg.jpg) repeat-x #181818;
	font-family:Arial, Helvetica, sans-serif, "微軟正黑體";		
	font-size:100%;	
	color:#333;
}
a{ color:#333; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:underline;}

/* -首頁----------------------------------------------------------------------------------------------------------*/
#wrapper{ margin:0px auto; width:95%; height:auto; overflow: hidden;/*版面底圖延伸*/ background:#fff;}
#top{ margin:0px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ position:relative;}
#menubg{ margin:0px; width:100%; position: absolute; z-index:10;}
#ad{ margin:5% 0px 0px 0px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ }
#topmenu { margin:0px 0px 0px 0px; width:100%; position: absolute; z-index:11; }
#logo { margin:1% 0px 0px 2%; float:left; }
#smenu { margin:2% 2% 0px 0px; width:auto; float:right;  }
#main{ margin:0px; padding:10px 0px 10px 0px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ background:url(images/midbg.jpg) repeat top left;}
#mid{ margin:0px; padding:0px 1% 0px 2%; width:97%; height:auto; overflow: hidden;/*版面底圖延伸*/ }
#mid2{ margin:0px 0px 3% 0px; padding:0px 1% 0px 2%; width:97%; height:auto; overflow: hidden;/*版面底圖延伸*/ }
.hot { float:left; }
.more { float:right; }
#foot{ margin:0 0px 0px 0px; width:100%; height:69px; background:url(images/foot_bg.jpg) repeat center;}
#foot h1{ font-size:0.75em; color: #bca57b; font-weight:normal; line-height:1.500em; padding:15px 0px 0px 0px; text-align:center;}
#foot h1 a{ color: #bca57b; text-decoration:none;}
#foot h1 a:hover{ color: #bca57b; text-decoration:underline;}

/* -search-*/
.search { width:190px; height:0px; display:inline; margin:0px 0px 0px 25px; }
@media only screen and (min-width: 0px) and (max-width: 320px){
.search { margin:0px 0px 0px 10px; }
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.search { margin:0px 0px 0px 10px; }
}
.s_button a{ padding:4px 3px 4px 3px; background:#000; color:#fff; border:0; font-size:11px;  -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; }
.s_button a:hover{ color:#fff; text-decoration:none;}


.left_member {
	display: block;
	color: #fff;
	padding:10px 0px 10px 15px;
	text-decoration:none;
	border: 2px solid #a6884f;
	line-height:1.250em;
	width:190px;
	margin:10px 0px 0px 20px;
}
@media only screen and (min-width: 0px) and (max-width: 320px){
.left_member  { margin:10px 0px 0px 10px; }
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.left_member  { margin:10px 0px 0px 10px; }
}

/* -產品列表-*/
#pd {
	float: left;
	width:100%;
	margin: 2% 0px 0px 0px;	
	padding: 0px 0px 0px 0px;	
}
#pd ul {
	margin: 0px 0px 0px 0px;	
	padding: 0px 0px 4% 0px;	
	height:auto; overflow: hidden;/*版面底圖延伸*/	
}

#pd li {
	float:left;
	width: 44%;
	display: block;	
	margin: 0px 0px 0px 0px;	
	padding: 0px 3% 0px 3%;	
	display: block;
	
}
#pd .pd_pic img {
	width: 100%;
	margin:0px 0px 0px 0px; 
	border: solid 4px #851212;
}
#pd .name{
	width: 100%;
	padding:0px 0px 0px 0px;
	font-size: 	0.813em;
	color: #c89b4b;
	font-weight:normal;
	text-decoration:none;
	font-style: normal;
	line-height:1.250em;
	margin: 3px 0px 0px 0px;
	display: block;
	text-align:center;
}
#pd .name a{
  color: #c89b4b;
  text-decoration:none;
}
#pd .name a:hover{
  color: #b78428;
  text-decoration:none;
}

/* -內頁----------------------------------------------------------------------------------------------------------*/
#title{ margin:20% 0px 0px 0px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ background:#981c1c;}
#title .line{ margin:0px 2% 0px 2%; width:96%; padding:0px 0px 0px 0px; background:url(images/line_tt.gif) repeat-x center;}
#main2{ margin:0px; padding:10px 0px 30px 0px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ background: #fff; min-height:270px; }

#box{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow: hidden;/*版面底圖延伸*/ font-size:0.938em; line-height:1.875em;}

@media only screen and (min-width: 0px) and (max-width: 320px){
#logo img {
	max-width:90px;
	height:auto;
}
#smenu ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 10px; list-style: none; display: block; float:left; }
#smenu ul img { max-width:14px; }
#smenu li{ margin:0px 0px 0px 0px; padding:0px 0px 0px 10px; list-style: none; display: block; float:left; }
.rightmenu img { max-width:14px; float:right; }

.hot img{ max-width:60px;}
.more img{ max-width:20px; padding:0px 5px 0px 0px;}
#pd .pd_pic img {
	width: 100%;
	margin:0px 0px 0px 0px; 
	border: solid 2px #851212;
}
#foot h1{ font-size:0.625em;}
#title h1{ font-family:"標楷體"; color:#fff; font-size:0.938em; padding:1.5% 0 1.5% 3%; }
#box{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow: hidden;/*版面底圖延伸*/ font-size:0.813em; line-height:1.875em;}
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
#logo img {
	max-width:140px;
	height:auto;
}
#smenu ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 10px; list-style: none; display: block; float:left; }
#smenu ul img { max-width:22px; }
#smenu li{ margin:0px 0px 0px 0px; padding:0px 0px 0px 10px; list-style: none; display: block; float:left; }
.rightmenu img { max-width:22px; float:right; }

.hot img{ max-width:140px;}
.more img{ max-width:40px;}
#title h1{ font-family:"標楷體"; color:#fff; font-size:0.938em; padding:1.5% 0 1.5% 3%; }
#box{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow: hidden;/*版面底圖延伸*/ font-size:0.813em; line-height:1.875em;}
}

@media only screen and (min-width: 769px) {
#smenu ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 25px; list-style: none; display: block; float:left; }
#smenu ul img { max-width:40px; }
#smenu li{ margin:0px 0px 0px 0px; padding:0px 0px 0px 25px; list-style: none; display: block; float:left; }
.rightmenu img { max-width:40px; float:right; }

#pd .name{ font-size: 	1em;}
#title h1{ font-family:"標楷體"; color:#fff; font-size:1.500em; padding:1% 0 1% 3%; }
}

/* -最新消息----------------------------------------------------------------------------------------------------------*/
#news1{ margin:0px 3% 4% 3%; width:94%; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
#news1{ margin:0px 3% 4% 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
#news1{ margin:0px 3% 4% 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
#news1 ul{ margin-top:0px;}
#news1 ul li{ background:url(images/icon01.jpg) no-repeat 0 13px; line-height:30px; border-bottom:#ccc 1px dotted; padding-left:10px; overflow:hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height:35px; color: #b4a69b; text-decoration: none; }
#news1 ul li a{ color: #d3ceca; text-decoration: none; padding-left:5px; }
#news1 ul li a:hover{ color: #fff;text-decoration: none; }


.news2{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.news2{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.news2{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
.news2 ul li{ background:url(images/icon01.jpg) no-repeat 0 13px; line-height:30px; border-bottom:#ccc 1px dotted; padding-left:10px; overflow:hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height:35px; color: #999; text-decoration: none;}
.news2 ul li a{ color: #ad6304; text-decoration: none; padding-left:5px; }
.news2 ul li a:hover{ color: #ff0000;text-decoration: none; }

.news_box{ width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/}
.news_title{ width:auto; float:left; font-weight:bold; color:#ad6304; }
.news_date{ width:auto; float:right; color:#999;}

.news_area{  margin-top:10px; width:100%; height:auto; overflow: hidden;/*版面底圖延伸*/ }
@media only screen and (min-width: 0px) and (max-width: 320px){
.news_area{  font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.news_area{  font-size:0.813em; line-height:1.875em;}
}
.news_link{  margin-top:10px;}
.news_link ul li{ border-bottom:1px solid #ccc; padding:5px 0px 5px 10px; background:url(images/icon05.gif) no-repeat 0px 15px;}

/* -購物須知----------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 769px) {
.faq{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em;}
}
@media only screen and (min-width: 0px) and (max-width: 320px){
.faq{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.faq{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
.faq ul li { background:url(images/icon02.gif) no-repeat 5px 15px; padding:5px 0 5px 20px;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.faq ul li { background:url(images/icon02.gif) no-repeat 5px 11px;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.faq ul li { background:url(images/icon02.gif) no-repeat 5px 13px;}
}
.faq ul li a{ color:#333;}
.faq ul li a:hover{ color:#ff0000;}
.faq .box_2 a{ color:#993300;}
.faq .box_2 a:hover{ color:#993300; text-decoration:underline;}

.faq02{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.faq02{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.faq02{ margin:0px 3% 0px 3%; width:94%; font-size:0.813em; line-height:1.875em;}
}

/* -會員登入----------------------------------------------------------------------------------------------------------*/
.login{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.login{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.login{ font-size:0.813em; line-height:1.875em;}
}
.login_title{ margin-bottom:10px;}
.login_leftarea{ width: 300px; float:left;}
.login_right{ width: 250px; float:right; margin-right:30px;}
.login_left{ margin-left:75px; color:#996600; margin-bottom:10px;}

/* -聯絡我們----------------------------------------------------------------------------------------------------------*/
.contacts_border{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.contacts_border{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.contacts_border{ font-size:0.813em; line-height:1.875em;}
}
.contacts_title { font-weight:bold; color:#5c360e;}
.contacts_border ul li{ border-bottom:dotted #ccc 1px; padding:8px 5px;}
.contacts_map { margin:1% 0% 0px 0%; width:99%; border:1px solid #ccc; padding:3px;}


/* -產品介紹----------------------------------------------------------------------------------------------------------*/
#pd02 {
	float: left;
	width:100%;
	margin: 2% 0px 0px 0px;	
	padding: 0px 0px 0px 0px;	
}
#pd02 ul {
	margin: 0px 0px 0px 0px;	
	padding: 0px 0px 4% 0px;	
	height:auto; overflow: hidden;/*版面底圖延伸*/	
}

#pd02 li {
	float:left;
	width: 44%;
	display: block;	
	margin: 0px 0px 0px 0px;	
	padding: 0px 3% 0px 3%;	
	display: block;
	
}
#pd02 .pd_pic img {
	width: 100%;
	margin:0px 0px 0px 0px; 
	border:1px solid #c89b4a;
	padding:1px;
}
#pd02 .name{
	width: 100%;
	padding:0px 0px 0px 0px;
	font-size: 	0.813em;
	color:#603e00;
	font-weight:normal;
	text-decoration:none;
	font-style: normal;
	line-height:1.250em;
	margin: 1px 0px 0px 0px;
	display: block;
	text-align:center;
}
#pd02 .name a{
  color:#603e00;
  text-decoration:none;
}
#pd02 .name a:hover{
  color:#4e2b18;
  text-decoration:none;
}
@media only screen and (min-width: 769px) {
#pd02 .name{ font-size: 	1em;}
}

/*main_middle*/
#main_bar{ margin:0px 3% 0px 3%; width:94%; font-size:0.938em; line-height:1.875em; height:auto; overflow:hidden;}
@media only screen and (min-width: 0px) and (max-width: 320px){
#main_bar{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
#main_bar{ font-size:0.813em; line-height:1.875em;}
}

/* -大圖-*/	
div.main_img{
	width:100%;
	float:left;
	}
div.main_img div.topimg{
	width:100%;
	height:auto;
	margin-bottom:2%;
	}
div.main_img div.topimg img{
	width:100%;
	}

/* -小圖-*/
div.img_sbox{
	width:100%;
	margin-top:0px;
	}
div.img_sbox img{
	width:23%;
	height:auto;
	margin:0px 2% 0px 0px;
	display:inline;
	}
	
/*products_show*/
.show_txt{ margin:1% 0% 0px 0%; }
.show_txt ul li{ font-size:13px; border-top:#ccc 1px dotted; padding: 6px 0px;}
.show_detail { width:100%; height:auto; overflow:hidden; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.show_detail{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.show_detail{ line-height:1.875em;}
}

/*禮盒系列*/
.p_border{ margin:0px 3% 0px 3%; width:94%; background:#e9d0a8 url(images/p_bg.jpg) no-repeat right bottom; height:auto; overflow: hidden;/*版面底圖延伸*/	margin-bottom:15px; -webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;}
.p_02{ float:left; width:40%; padding:3% 3% 3% 3%; }
.p_02 img{ width:100%; }
.p_tex02 {float:right; width:51%; padding:3% 3% 3% 0%;}

.p_title a{ font-size:0.938em; line-height:1.875em; color:#6e4901;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.p_title a{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.p_title a{ font-size:0.813em; line-height:1.875em;}
}
.p_title a:hover{ color:#971d1c; text-decoration:none;}
.p_price { font-size:13px; line-height:30px;}
.p_cart { padding-left:5px;}

/* -購物車----------------------------------------------------------------------------------------------------------*/
.step img{margin-bottom:1%;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.step img{ width:100%}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.step img{ width:100%}
}

/* -網站導覽----------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 320px){
.sitemap{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow:hidden;}
.sitemap_img{float: left; width:50%; }
.sitemap_img img{width:120px; }
.sitemap_r{float: left; margin:1% 0% 0px 0%; width:50%; }
.sitemap_word{ padding: 0px 0px 12px 0px; }
.sitemap_word img{ height:30px; }
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.sitemap{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow:hidden;}
.sitemap_img{float: left; padding-right:20px; }
.sitemap_r{width:200px; float:left; margin:1% 0% 0px 0%; }
.sitemap_word{ width:auto;  padding: 0px 0px 12px 0px; }
}
@media only screen and (min-width: 769px) {
.sitemap{ margin:0px 3% 0px 3%; width:94%; height:auto; overflow:hidden;}
.sitemap_img{float: left; padding-right:20px; padding-left:20px;}
.sitemap_r{margin:10% 0% 0px 0%; }
.sitemap_word{ width:200px; float:left; padding: 15px 5px; }
}


/* -頁碼------------------------------------------------------------------------------------------------------------*/
.pagination{ margin:0px 0% 0px 0%; width:100%; color:#ccc; margin-top:20px;} 
.pagination ul{ margin: 0;padding: 0;text-align: center; }
.pagination li{list-style-type: none;display: inline; padding-bottom: 1px; font-size:0.750em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.pagination ul{ margin: 0;padding: 0;text-align: center; font-size:0.750em;}
.pagination li{list-style-type: none;display: inline;padding-bottom: 1px; font-size:0.750em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.pagination{ margin:0px 0% 0px 0%; width:100%; color:#ccc; margin-top:20px; font-size:0.750em;} 
.pagination ul{ margin: 0;padding: 0;text-align: center; font-size:0.750em;}
.pagination li{list-style-type: none;display: inline;padding-bottom: 1px; font-size:0.750em;}
}
.pagination a, .pagination a:visited{padding: 0 8px;text-decoration: none; color: #666;}
.pagination a:hover{color: #666; text-decoration: underline;}
.pagination a.currentpage {font-weight:bold;color: #ff0000 !important;}
.pagination a.currentpage:hover { text-decoration:underline; !important;}
.pagination a.disablelink, .pagination a.disablelink:hover {background-color: #fff;color: #666;font-weight: normal !important;text-decoration:none}
.pagination a.prevnext{color: #666;}

/*form*/
.simpleform{margin:1% 3% 0px 3%; width:94%; height:auto; overflow:hidden; font-size:0.938em; line-height:1.875em;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.simpleform{ font-size:0.813em; line-height:1.875em;}
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
.simpleform{ font-size:0.813em; line-height:1.875em;}
}
.simpleform_word{ margin-bottom:1%; margin-left:0px;}
.simpleform .text{padding:3px 5px 2px 5px; border:1px #ccc solid; color: #2d2d2d; }
.simpleform .textbox{height:100px; padding:3px 5px 2px 5px; border:1px #ccc solid; color: #2d2d2d;}
.simpleform .row {margin-bottom:1%; width:100%;}
.simpleform .row label{	float:left;	width:100px; text-align:left;}
.simpleform .buttonbar{ margin-top:2%;}

/*others*/
input.border01{ border: solid 1px #999; color:#333; padding:5px 5px 5px 5px;}
input.border02{ border:0; padding:1px 5px 1px 5px;}
input.border03{ border: solid 1px #999; color:#333; padding:3px 5px 2px 5px;}
.img5 a{ border: solid 1px #ad6304; color:#ad6304; padding:3px 5px 2px 5px; background:#f7d89d; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;}
.img5 a:hover{ border: solid 1px #333333; color:#fff; padding:3px 5px 2px 5px; background:#333333; text-decoration:none;-webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 5px; }
.button01 a{ border: solid 1px #999; background:#333; color:#fff; padding:3px 5px 2px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; font-size:13px;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.button01 a{font-size:13px;}
}
.button01 a:hover{ border: solid 1px #999; background:#666; color:#fff; padding:3px 5px 2px 5px; text-decoration:none;}
.img4 { border:2px #e9d0a8 solid; height:20px; width:35px;}

.button02 { border: solid 1px #999; background:#666; color:#fff; padding:1px 1px 1px 1px; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; font-size:13px;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.button02 { color:#fff; font-size:10px;}
}
.button02 a{ color:#fff; font-size:13px; text-decoration:none;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.button02 a{ color:#fff; font-size:10px;}
}
.button02 a:hover{ color:#fff; font-size:13px; text-decoration:none;}
@media only screen and (min-width: 0px) and (max-width: 320px){
.button02 a:hover{ color:#fff; font-size:10px;}
}
.img4 { border:2px #e9d0a8 solid; height:20px; width:35px;}