@charset "utf-8";
/*Common Set*/
body
{
	font-size: 16px;
	margin: 0px;
	text-decoration: none;
	line-height: 165%;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",  Arial,taipei, Helvetica, sans-serif;
	/* -webkit-text-size-adjust: 100%;*/

	
	
}	
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:16px;
	FONT-FAMILY:"Microsoft YaHei","微軟正黑體","Microsoft JhengHei", "細明體","MingLiU","ＭＳ Ｐゴシック", "新細明體", "PMingLiU",Arial,taipei, Helvetica, sans-serif;
}

/*表單藍框問題*/
input:focus{outline:none;}
textarea:focus{
	outline:none;
}

ul{
	padding:0;
	margin:0;
	list-style:none;
}


/* 解決浮動的CLEARFIX */
.cssfix:before, .cssfix:after { 
   content: "";
   display: table; 
}
.cssfix:after {
   clear: both; 
}
.cssfix { 
   zoom: 1; /* IE6&7 */ 
}

/*page number*/
#page_area{
	display:block;
	text-align:center;
}
#page_area2{
	display:block;
		text-align:center;

}

.pagination a, .pagination a:link, .pagination a:visited {
	color:#265827;
	padding:3px 6px;
	background:#ffffff;
	border:1px solid #ccc;
	TEXT-DECORATION: none;
}
.pagination a:hover {
	color:white;
	background:#567556;
	border:1px solid #567556;
}
.pagination span {
	padding:3px 6px;
}
.pagination a span {
	font-size:inherit;
	display:none;
	visibility:hidden;
}
.pagination span.disable {
	padding:3px 6px;
	border:1px solid #eee;
	color:#ffffff;
	background:#999999;
}
/*top*/
#top{
		display:block;
		
		position:relative;
		
		
		height:96px;
		/*position:fixed;
		top:0px;
		z-index:99;*/
	/*	width:100%;*/
		background-color:#FFFFFF;
		/*box-shadow:0px 4px 20px -2px #cccccc;*/	
		/*box-shadow: x y blur spread color inset;
		水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
}
	#header{
		display:block;
		height:96px;
	/*	width:100%;*/
	background-color:#FFFFFF;
		/*box-shadow:0px 4px 20px -2px #cccccc;*/	
		/*box-shadow: x y blur spread color inset;
		水平位移距離(x) 、垂直位移距離(y) 、模糊強度(blur) 、擴散強度(spread) 陰影顏色 內陰影(inset)*/
	}
#logo {
		
		  color:#333333;
		height:auto;
		text-align:center;	 
		}
		#logo a{
			text-decoration:none;
			color:#333333;
			font-weight:bolder;
		}
		
			#logo_2{
			 height:90px;
				margin:0 auto;
			width:250px;
			}
			#logo_2 img{
			height:90px;
			width:250px;
		
			}

			
			#logo_3{
				display:none;
			}
			/*預防萬一翻轉平板從手機板CSS跳到PCCSS,原本這兩個是隱藏的,但萬一有click過之後,會變成block,在沒有RELOAD狀態下變換視窗大小,會造成MENU點選區塊沒有消失,所以把MENU圖片還是放上隱藏的CSS	*/
				#menu_img1{
					display:none;
				}
				#menu_img2{
				display:none;

				}


			#logo_4{
				display:none;
			}
		#member_menu{ 
			display:none;
			
		}
				
	#a_menu{
		display:none;	
		}	
		#a_content{
		display:none;	
		}
	#a_menu2 {
		
		 
	/*	 width:100%;*/
		 display:block; 
		 font-size:16px;
		 letter-spacing:2px;
	/*	border-top: 1px #B1937C solid;
		border-bottom: 1px #B1937C solid;
		color:#996633;*/
		border-top: 1px #92C1D3 solid;
		border-bottom: 1px #92C1D3 solid;

		

	
	

		 height:40px;
		 line-height:40px;
		
		 text-align:center;
		 
		
	}	 
	#a_menu2 a{
		
	color:#4B6D8F;
		 text-decoration:none;
		

	}
	#a_menu2 a:hover{
	
		
	
		color:#003366;
	
	}
	
	#a_content2{
		width:100%;
		max-width:1280px;
		margin:0 auto;
		text-align:center;
		height:40px;
		
	}	
		
/*c*/
#c_area{
	
	background-color:#FFFFFF;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	overflow:hidden;
	/*輪播圖100%時,會把畫面擠開多一段空白,增加這個就正常了*/
/*	background-image:url('images/bg1.png');
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;*/
}


#web_index{
/*	position: relative;
	overflow: hidden;
	background:url(images/bg1-2.webp); 
background-repeat:no-repeat;
 background-attachment:fixed;

 background-position:center top;*/
}
#cf{
	display:block;
}
#cfm{
	display:none;
}

#content_main{
	
	max-width:1240px;
	padding:10px;
	letter-spacing:1px;
	margin:0 auto;
	/*color:#ffffff;*/
	padding-top:30px;
	

/*	background-color:rgba(0, 0, 0, 0.5);*/


}

/*2024-8-23 新INDEX*/

.index_standard1{
	/*	border-top:3px #85bed9 dashed;
	border-bottom:3px #85bed9 dashed;*/

}
.index_standard2{
/*		border-top:3px #85bed9 dashed;
	border-bottom:3px #85bed9 dashed;*/

}

#index_head_mv{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	


}

#index_head_mv iframe, #index_head_mv object,#index_head_mv embed {
	position: absolute;
	
	top: 0;
	left: 0;
	
	width: 100%;
	
	height: 100%;

}
#index_head_mv2{
	position: relative;
/*	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;*/
	


}

.index_mv{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	


}

.index_mv iframe, .index_mv object,.index_mv embed {
	position: absolute;
	
	top: 0;
	left: 0;
	
	width: 100%;
	
	height: 100%;

}

#index_head_slogn{
max-width:1028px;
	margin:30px auto;

}
#index_head_slogn img{
	max-width:1028px;
	width:100%;
		text-align:center;
}
#index_head_slogn_b{
	display:none;
}

#index_area1{
	max-width:884px;
	margin:30px auto;

}

#index_area1 img{
	max-width:884px;
	width:100%;
		text-align:center;
}
#index_area1b{
	display:none;
}
@media only screen and (min-width:1281px){
	#index_area2{
	

		margin:30px auto;
	}
	#index_area2a{
		
	
	display:none;
	}
	#index_area2b{
		display:none;
	}

}
@media only screen and (max-width:1280px) and (min-width:1000px){
	#index_area2{
	display:none;
	}
	#index_area2a{
		
	
		margin:0 auto;
	}
	#index_area2b{
		display:none;
	}

}
@media only screen and (max-width:999px){
	#index_area2{
	display:none;
	}
	#index_area2a{
	display:none;
		}
	#index_area2b{
			margin:10px auto;
	}

}

#index_area2a img{
	
	width:100%;
		text-align:center;
}

#index_area2 img{
	
	width:100%;
		text-align:center;
}
#index_area2b img{
	
	width:100%;
		text-align:center;
}

/*2024-8-23 新INDEX 完*/

#index_content_main{
	
	letter-spacing:1px;
	margin:0 auto;
	/*color:#ffffff;*/
	padding-top:30px;
	

/*	background-color:rgba(0, 0, 0, 0.5);*/


}

#index_about_main{
	max-width:1240px;
		display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
	margin:0 auto;
	margin-bottom:50px;
	

}
	#index_about_left{
		align-self:stretch;
		width:30%;
	}
	#index_about_left img{
		
		width:100%;
	}

		#index_about_right{
		flex-grow:1;
		align-self:stretch;
		width:68%;
		padding:20px;
		}
@media only screen and (min-width:1001px){
			
	.index_slogn1{
	font-size:40px;
	font-weight:bold;
	color:#FF9900;
	line-height:60px;
	margin-top:40px;
	}
	.index_slogn2{
		font-size:20px;
		line-height:40px;
		color:#003366;
		margin-top:40px;
	}

}
@media only screen and (max-width:1000px){
	
		
	.index_slogn1{
	font-size:40px;
	font-weight:bold;
	color:#FF9900;
	line-height:60px;
	}
	.index_slogn2{
		font-size:20px;
		line-height:40px;
		color:#003366;
	}
}
#index_product_main{

	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;

	background-color:#E6E6E6;

	
}
	#index_product_main_in{
		max-width:1240px;	
		margin:20px auto;
	}
#index_product_kind{

padding-bottom:20px;

	display:flex;
	flex-wrap:wrap;
	flex-direction:row;

	/*background-color:#CCCCCC;*/
}
.index_kind_item{
line-height:25px;
	
	padding:10px;
	border-radius:10px;
/*	background-color:#996633;*/
	background-color:#6D8EAF;
	color:#ffffff;
	margin:10px;
}
.index_kind_item a{
	color:#ffffff;
}

#index_product_area{
/*	 background-color:#999966;*/
	border-top:1px #cccccc solid;
	padding-top:20px;

}

.index_product_content{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:stretch;
}
@media only screen and (min-width: 1000px) {
	.index_product_item{
	width:21%;
	height:auto;
	margin:0 2%;
	padding-bottom:20px;


	}
}
@media only screen and (min-width: 751px) and (max-width: 999px) {
	.index_product_item{
	width:29%;
	height:auto;
	margin:0 2%;
	padding-bottom:20px;
	

	}
}	
@media only screen and (max-width: 750px) {
	.index_product_item{
	width:45%;
	height:auto;
	margin:2%;
	padding-bottom:20px;


	}

}

/*about*/
.about_btitle{
	font-size:30px;
	 color:#009999;
	font-weight:bold;
	line-height:40px;
}
.about_btitle2{
	font-size:30px;

	
	 color:#336699;
	font-weight:bold;
}
.about_stitle{
	font-size:20px;
	font-weight:bold;
	color:#615693;
	
}
.about_content{
	color:#003366;
}
.alist{
		display:flex;
	flex-wrap:nowrap;
	flex-direction:row;

}
.alist_left{
	align-self:stretch;
	width:20%;
	min-width:170px;


}
.alist_right{
	width:50%;
	align-self:stretch;
	flex-grow:1;
	padding-top:10px;
}
/*3ddoll*/
#web_links{
	position: relative;
	overflow: hidden;
	background:url(images/bg1-2.webp); 
background-repeat:no-repeat;
 background-attachment:fixed;
 background-position:right center;
}
.links_box{
	 
	 	display:block;
	 	margin:2%;
	 	margin-bottom:30px;
	 	padding-bottom:30px;
		 border-bottom:1px #E2B1DB solid;
		 
	}
.links_pic_block{
	width:30%;
	margin-right:4%;
	height:auto;
	float:left;
}
.links_right_area{
	width:62%;
	float:left;

}
.links_title{
		 letter-spacing:2px;
		 font-size:20px;
		 font-weight:bold;
		
		  line-height:50px;
	}
.links_summary{
	color:#808080;
	margin-bottom:30px;
}
.links_button a{
	width:300px;
	text-align:center;
	height:50px;
	line-height:50px;
	color:#ffffff;
	display:block;
/*	background-color:#8B5C89;*/
		background-color:#6D8EAF;
	border-radius:50px;

}
@media only screen and (min-width:800px){
	
	.subbox{
		
		margin-left:0;
	}
	.article_detail_box{
	 
	 	display:inline-block;
	 	width:63%;
	 	margin-right:3%;
	  
	 	vertical-align:top;
	 	
	 
		
	}
	.article_detail_content {
	 
	 line-height:200%;		
	}
	.article_detail_content a{
	color:#336699;
	text-decoration:underline;
		
	}


	.article_detail_pic{
	 
	 	display:inline-block;
	 	width:33%;
	 	
	 
	 	vertical-align:top;
	 
		
	}


	
}
@media only screen and (max-width:799px){
	
.subbox{
		
		margin-bottom:10px;
		
	}
.article_detail_box{

	 	width:96%;
	 	margin:0 auto;
	 

	 		padding:10px;
	 		
	 		overflow:auto;

		
	}
	.article_detail_pic{

	 	width:96%;
	 	margin:0 auto;
	 	margin-bottom:30px;
	 	
	 		padding:10px;
	 		
	 		overflow:auto;

		
	}

}
.article_detail_content img{
MAX-WIDTH: 100%!important;HEIGHT: auto!important;
	width:expression(this.width > 900 ? "900px" : this.width)!important;

		
	}
*html.article_detail_content img{ 
width:expression(this.width>900&&this.width>this.height?900:auto); 

}
	
	
	.sup_block{
		padding-bottom:20px;
		border-bottom:#cccccc 1px dashed;
	}
	
	

	
		

	.title_box{
		 letter-spacing:2px;
		 font-size:20px;
		 font-weight:bold;
		 margin-top:10px;
		

	}
	.sdown_block{
	margin-top:20px;
	}
.sdown_detail_block{
	color:#006666;
	margin-top:20px;

}
.back{
	width:200px;
	text-align:center;
	background-color:#666699;
	color:#ffffff;
	cursor:pointer;
	border-radius:20px;
	line-height:40px;
	margin-top:30px;
	margin-bottom:30px;

}
/*video*/

#video_area{
	max-width:1280px;
	
	
	padding-bottom:30px;
	
	
	margin:0 auto;
	
}
.video_box{
	
DISPLAY:inline-block;
width:44%;
margin:2%;
vertical-align:top;


}
.video_audio{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video_audio iframe, .video_audio object,.video_audio embed {
	position: absolute;
	
	top: 0;
	left: 0;
	
	width: 100%;
	
	height: 100%;

}

.video_txt{
	margin-top:20px;
}
/*product*/

#product_main{

	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
	min-height:510px;
	
}
#product_kind{
	width:20%;
	min-width:200px;
	align-self:stretch;
/*	background-color:#CCCCCC;*/

}
#product_area{
	width:75%;
	align-self:stretch;
	flex-grow:1;
	border-left:1px #cccccc solid;
	padding-left:2%;
}
.kind_area{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	padding-right:30px;
	
}
.kind_item{
	/*max-width:200px;*/
	height:25px;
	border-radius:20px;
	border:1px #6D8EAF solid;


	
	margin-bottom:20px;
	padding:10px 20px;
	overflow:hidden;
}
.product_content{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:strech;
}
@media only screen and (min-width: 751px) {
	.product_item{
	width:29.3%;
	height:auto;
	margin:0 2%;
	padding-bottom:20px;
		background-color:#ffffff;

	}
}	
@media only screen and (max-width: 750px) {
	.product_item{
	width:45%;
	height:auto;
	margin:2%;
	padding-bottom:20px;
		background-color:#ffffff;

	}

}
.product_pic{
	height:auto;
}
.product_pic img{
	width:100%;
}

.product_name{
	line-height:30px;
}

/*product_detail*/
#detail_content{
	padding-left:2%;
}
@media only screen and (min-width:751px) {
	

	#detail_pic{
		width:45%;
		display:inline-block;
		vertical-align:top;
	
	}
	#detail_pic img{
		width:100%;
	}
	#detail_area{
		width:50%;
			display:inline-block;
			vertical-align:top;
			padding-left:2%;
	}
}
@media only screen and (max-width:750px) {
	#detail_pic{
margin-bottom:20px;
}
#detail_pic img{
	width:100%;
}
#detail_area{
margin-bottom:20px;
	
}

}

#detail_memo{
	padding-top:20px;
	margin-top:20px;
		margin-left:2%;

border-top:1px #cccc solid;
	
}
#detail_memo img{
width:100%;
}
/*加入購物車的提示*/
#alert_add{
	position:fixed;
	border-radius:30px;
	top:150px;
	left:30%;
	right:30%;
	padding:20px 30px;
	background:rgba(0,0,0,.6);
	color:#ffffff;
	font-size:20px;
	text-align:center;
	z-index:999;
	display:none;
	
}

/*member_join*/
#member_area{
	margin:0 auto;
	min-width:800px;
}
#title_area{
	
	display:inline-block;
	
	width:16%;
	margin-right:2%;
	font-size:40px;
	font-weight:bold;
	color:#6D8EAF;


	line-height:60px;
	text-align:center;
	vertical-align:top;
	
}
#title_area2{
	display:none;
}

#join_form{
	width:70%;
	display:inline-block;
	padding-left:20px;	
	border-left:1px #cccccc solid;
		vertical-align:top;
		min-height:510px;
}
.form_space{
	display:block;
}
.input_area{
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;

}
.lable_box{
	width:25%;
	min-width:90px;
	text-align:left;
}
.input_box{
	width:70%;
/*	background-color:#999966;*/
	align-self:stretch;
	flex-grow:1;

	padding-left:2%;

}
.input_set{
	width:300px;;
}

.input_100{
	width:100%;
}
.input_big{
	width:25px;
	height:25px;
}
/*shop_rule*/
#rule_area{
	margin:0 auto;
	min-width:800px;
}

#rule_box{
width:76%;
	
	display:inline-block;
	padding-left:4%;	
	border-left:1px #cccccc solid;
		vertical-align:top;
		min-height:510px;
 color:#999999;	
}

.rule_title{
	 color:#996633;
	 font-weight:bold;
	 font-size:20px;	
}
.rule_content{
 color:#333333;
}
/*member_order*/
#order_area{
	margin:0 auto;
	max-width:1280px;
	width:95%;
}
#order_title{

	font-size:40px;
	font-weight:bold;
	color:#D1BEA0;
	

	line-height:60px;
	text-align:center;
	
}
#pc_order{
margin-top:20px;
margin-bottom:50px;
	display:block;
}
#mobile_order{
	display:none;
}
/**/
/*always_up*/
#always_up{
	position:fixed;
	z-index:9999;
	right:10px;
	bottom:20px;
	width:80px;
	height:auto;
	display:block;
	
	
}
.linkicon{
	padding-bottom:35px;
}
.circle {

	display:block;
	 background-color:#3366CC;
	color:#ffffff;
	border-radius:15px;
	border:2px #ffffff solid;
	width:30px;
	height:30px;
	text-align:center;
	vertical-align:middle;
	font-size:15px;
	font-weight:bold;
	line-height:30px;
	padding:4px;
	margin-bottom:15px;
	
	
}
.circle a{
	color:#ffffff;
	
}

.circle2 {
	display:block;
	background-color:#eeaf00;
	color:#ffffff;
	border-radius:15px;
	border:2px #ffffff solid;

	width:30px;
	height:30px;
	text-align:center;
	vertical-align:middle;
	font-size:15px;
	font-weight:bold;
	line-height:30px;
	padding:4px;
	margin-bottom:15px;
}
.circle2 a{
	color:#ffffff;
	
}

.circle3 a{
	display:block;
	background-color:#FF0000;
	color:#ffffff;
	border-radius:15px;
	border:2px #ffffff solid;
	width:30px;
	height:30px;
	text-align:center;
	vertical-align:middle;
	font-size:15px;
	font-weight:bold;
	line-height:30px;
	padding:4px;

margin-bottom:15px;
}
.circle3 a{
	color:#ffffff;
	
}

/*common*/

/*footer*/

#footer{
	display:block;
	height:auto;
	
	padding-bottom:30px;
	color:#85bed9;
}

.link_menu{
	background-color:#85bed9;
	line-height:140px;
	height:140px;
}
.sub_mlist {
	color:#ffffff;
		color:#ffffff;
	text-align:center;
	font-size:25px;

	letter-spacing:6px;

	
}
.sub_mlist_br{
	display:none;
}

.sub_mlist a{
	color:#ffffff;

}
.dtable{
	padding-top:30px;padding-bottom:40px;padding-left:10px;padding-right:10px;
	letter-spacing:5px;
}
.dfont{
		font-size:13px;
				font-weight:bold;
}

.fleft{
	
	float:left;
	margin-right:10px;
	
}
.fleft img{
	width:120px;
}
	.sub_footer a{
		padding:10px;
		color:#CAD9DD;
		font-size:25px;
		line-height:40px;	
			/*color:#915B3C;*/
	}
	.sub_footer2{
		padding:10px;
		color:#ffffff;
	}
	.sub_footer2 a{
		padding:10px;

		color:#ffffff;
	}

	.sub_footer3{
		padding:10px;
		color:#cccccc;
	
		
	}


/*common*/
.submit_button1{
/*	background-color:#996633;*/
	background-color:#6D8EAF;
	color:#ffffff;
	cursor:pointer;
	border:none;
	border-radius:20px;
 padding:5px 10px;
}

.button1{

	background-color:#669999;
	color:#ffffff;
	cursor:pointer;
	border:none;
	border-radius:20px;
	 padding:5px 10px;
}
.button2{


	background-color:#AFAF5F;
	color:#ffffff;
	cursor:pointer;
	border:none;
	border-radius:20px;
	 padding:5px 10px;
}
.button3{

	background-color:#BD5451;
	color:#ffffff;
	cursor:pointer;
	border:none;
	border-radius:20px;
	 padding:5px 10px;
}
