@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Muli:300,400);

/* 重設
--------------------------------------------------- */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th { font-size: 1em; font-weight: normal; font-style: normal; }
abbr,acronym { border: 0; }
ul,ol { list-style: none; }
fieldset,img { border: none; }

/* 基本
--------------------------------------------------- */
#itemContainer{ height:410px; position: relative}
.hr{ height:70px;}
body {
	font: 12px/22px 'Muli', sans-serif, "微軟正黑體",'Microsoft Jhenghei', Arial, Verdana, sans-serif;
	color: #333;
	}
	#bg {
 		position: fixed; 
  		top: -50%; 
  		left: -50%; 
  		width: 200%; 
  		height: 200%;
		}
	#bg img {
  		position: absolute; 
  		top: 0; 
  		left: 0; 
  		right: 0; 
  		bottom: 0; 
  		margin: auto; 
  		min-width: 50%;
  		min-height: 50%;
		}

a {	color:#333; cursor:pointer; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration:none; }
p { }
.clear{ clear:both;}

h1{ font: 24px/30px 'Muli', sans-serif, "微軟正黑體",'Microsoft Jhenghei', Arial, Verdana, sans-serif; font-weight:400;  color:#000; margin:0px 0 15px 0; }
h2{font: 18px/20px "Lucida Grande", "Lucida Sans Unicode","微軟正黑體", Arial, Verdana, sans-serif;  font-weight:400; color:#000; margin:10px 0;}



a, a:hover {
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}

/* Main
--------------------------------------------------- */

#head{ 
	width:100%;
	 height:70px; 
	 background:#f2f2f2;
	 position:fixed;
	 top:0;
	 z-index:999999;
	 }
	.logo { padding-top:18px;}
	.logo a{ width:122px; height:38px; background:url(../images/logo.png) no-repeat; display: block; text-indent:-9999px; margin:0 auto; }
	
#main{ 
	padding:30px 60px 80px 60px;
	}

	#mainNAV{width:345px; margin:0 auto;}
	#mainNAV ul{
		position:absolute; bottom:8px;
		z-index:9999;
		}
		#mainNAV li{ 
				float:left; 
				margin-right:20px;
				}
				#mainNAV li:last-child{ margin:0} 
			#mainNAV li a{
						font-size:13px; 
						display:block;
						color:#000;
						}
			#mainNAV li a:hover{ color:#666;}
	
	
	
	.bar_left{ width:60px; background:#f2f2f2; height:1500px; overflow:hidden;position:relative; position:fixed; left:0;  z-index:9999; top:0}
	.bar_right{ width:60px; background:#f2f2f2; height:1500px; overflow:hidden; position:fixed; right:0;z-index:9999; top:0}
	.bar_bottom{ width:100%; background:#f2f2f2; height:45px; position:fixed; bottom:0;z-index:9999;}
	
	
	.language{
			position:fixed; 
			top:45px; 
			right:62px;
			}
	.social_link,.design,.social_link a,.design a{font-size:11px; } 
	
	
	.social_link{
				position:fixed; 
				bottom:38px; 
				left:31px;
   			    z-index:9999; 
				-webkit-transform:rotate(-90deg);
				-moz-transform:rotate(-90deg);
				-ms-transform:rotate(-90deg);
				-o-transform:rotate(-90deg);
				transform:rotate(-90deg);
				-webkit-transform-origin:0% 0%;
				-moz-transform-origin:0% 0%;
				-ms-transform-origin:0% 0%;
				-o-transform-origin:0% 0%;
				transform-origin:0% 0%;
				
				}
			

		.social_link li{
						margin-right:10px;
						float:left; display:block;
						}
		.social_link li a{ display:block;}
		.social_link li a:hover{ color:#ccc}
	
	.social_link_ie8fix{
		        position:fixed; 
				bottom:70px; 
				left:31px;
   			    z-index:9999; 
				}
	.design_ie8fix{
			position:fixed; 
			bottom:63px; 
			right:36px;
			z-index:9999; 
			}
	.design{ 
			position:fixed; 
			bottom:38px; 
			right:-172px;
			z-index:9999;
			-webkit-transform:rotate(-90deg);
			-moz-transform:rotate(-90deg);
			-ms-transform:rotate(-90deg);
			-o-transform:rotate(-90deg);
			transform:rotate(-90deg);
			-webkit-transform-origin:0% 0%;
			-moz-transform-origin:0% 0%;
			-ms-transform-origin:0% 0%;
			-o-transform-origin:0% 0%;
			transform-origin:0% 0%;
			}
		.design li{
					margin-right:10px; 
					float:left;
					}
		.design li a:hover{ color:#ccc}	


/**news**/
	#news{ width:1000px; position:relative; margin:0 auto;}
	#news h1{ width:100%; clear:both; text-align:center; font-size:24px; margin-top:30px; margin-bottom:35px;}
	#news .viewall{ padding:3px; position:absolute; top:30px; right:0}
		#news .list_back{ padding:3px; position:absolute; top:30px; right:55px}
		#news .viewall a:hover{ color:#ccc}
		.txt_col{ width:470px ; height:120px; font-size:12px; padding:15px; position:relative;float:left;}
			.txt_col span{ font-size:10px; color:#999}
		.img_col{width:500px ; float:left;}
		/**press_ LIST**/
		#news .p_list{ width:720px; padding-left:25px; margin-bottom:40px; float:right;}
		#news .p_list li{ width:200px; padding-top:10px; border-top:1px #f1f1f1 solid; margin-right:30px; float:left}
			#news .p_list li:last-child{ margin-right:0}
			#news .p_list span{ font-size:10px; color:#999}
			#news .p_list li a:hover{ color:#999}
			
		#news_sort{ width:240px; border-top:1px solid #f1f1f1; float:left}
			#news_sort h2{ width:100%; padding-bottom:10px; font-size:17px; font-weight:bold; border-bottom:1px #f1f1f1 solid; float:left}
			#news_sort ul{ float:left}
			#news_sort ul li{ width:230px; border-bottom:1px #f1f1f1 solid; padding:6px 5px; float:left}
			#news_sort ul li a::before {content:">"; font-size:12px; color:#999; margin-right:3px;}
			#news_sort ul li a{ font-size:13px; display:block; }
			#news_sort ul li a:hover{ color:#999}
		/**press_ View**/ 	
		#news .p_view{ width:960px; padding:20px; padding-top:10px; position:relative;}
			#news .p_view .date{ width:100%; display:block; text-align:center; font-size:10px; margin-bottom:10px; color:#999;}
			#news .p_view .txt{ border-top:1px #f1f1f1 solid; padding-top:20px; clear:both;}
				#news .p_view .txt2{ padding-top:10px; clear:both;}
				#news .p_view h2{margin:10px 0;text-align:center}
				
			.pages{ width:77%; padding:10px 0; margin:10px 0; color:#999; float:right; text-align:center;}
			  .pages .selected{padding:5px; color:#000; text-decoration:underline; cursor:text; }
			  	.pages a{ padding:5px; color:#999}
				.pages a:hover{ color:#000}
			#yeae_sort{  }
			.back{ width:96%; padding:0 20px; display:table; border-top:1px solid #f1f1f1; padding-top:5px;}
				.back a:hover{ text-decoration:underline; color:#ccc}
				.back .pre,.back .back_cen,.back .next{display:table-cell; padding:5px;}
				.back .pre{ width:20%; text-align:left;}
				.back .back_cen{ width:60%; text-align:center;}
				.back .next{ width:20%;text-align:right;}
				
			
			/*
			#pre_mask{ position:absolute; right:16px; top:28px;}
				#pre_mask.list{position:absolute; left:12px; top:90px;}
				#pre_mask.list2{position:absolute; right:12px; top:90px;}
			#pre_mask li{ width:55px; height:55px;  float:left;}
				#pre_mask li a{width:55px; height:55px; display:block;}
				#pre_mask span{width:55px; height:55px; position:absolute;background:url(../images/mask.png) no-repeat; display:block}
			*/



/**press**/
	#press{ width:1000px; position:relative; margin:0 auto;}
	#press h1{ width:100%; clear:both; text-align:center; font-size:24px; margin-top:30px; margin-bottom:35px;}
	#press .viewall{ padding-right:20px; text-align:right;}
		#press .viewall a:hover{ color:#ccc}
		#press .list_back{ position:absolute; top:65px; right:40px;}
		#press .list_back a:hover{ color:#ccc}
	
	#press_cont{ width:715px; padding-bottom:100px; float:left}
		#press_cont .title{ font-weight:bold; margin:10px 0; clear:both;}
		
		.news_cont{ width:730px; border-top:1px #f1f1f1 solid; padding-bottom:100px; float:right}
		.news_cont .title{ font-weight:bold; margin:15px 0; clear:both; font-size:15px; border-bottom:1px #f1f1f1 solid; padding-bottom:10px;}
		
		/**press LIST**/
		#press .n_list{ width:100%}
			#press .n_list li{ padding:10px 0; }
			#press .n_list li .title{  text-align:center;}
				#press .n_list li .title a{border-bottom:1px solid #000; padding:10px 0;}
				#press .n_list li .title a:hover{ color:#999}
			#press .n_list li .date{  width:100%; display:block; text-align:center; font-size:10px; color:#999;}
		/**press View**/
		#press .p_view{ width:960px; padding:20px;padding-top:10px; margin-bottom:20px; border-bottom:1px #f1f1f1 solid}
			#press .p_view .date{ width:100%; display:block; text-align:center; font-size:10px; margin-bottom:10px; color:#999;}
			#press .p_view .txt{ border-top:1px #f1f1f1 solid; padding-top:10px; clear:both;}
			#press .p_view h2{ margin:10px 0; text-align:center}
	
	#press_nav{ width:230px; float:left}
	#press_nav select{ margin-bottom:15px;}
	
	
/**About**/
	#about{ width:1000px; position:relative; z-index:99; margin:0 auto;}
	#about h1{ width:100%; text-align:center;  margin-top:30px; margin-bottom:35px; color:#fff; clear:both;  }
	.h1line{ width:200px; border:0; height:1px; margin-bottom:30px; background-color:#e3c277;	color:#e3c277	/* IE6 */}
	
/**contact**/
	#contact{ width:1000px; height:700px; position:relative; z-index:99; margin:0 auto;}
	#contact h1{ width:100%; text-align:center; font-size:24px; margin-top:30px; margin-bottom:35px;clear:both;  }
	
	#contact .stock{ width:500px; text-align:center; margin:0 auto; color:#999}

	.stock_add{width:500px;text-align:center;margin:0 auto;  margin-bottom:10px ; }
		.stock_add .china{ text-decoration:underline; cursor:pointer}/**地址選單**/
		.stock_add .taiwan{}
		.stock_add .china{}
		.stock_add .hongkong{}
		.stock_add .canada{}
		.stock_add .usa{}
		
		.china_add{width:500px; text-align:center; margin:0 auto;  display:none}/**隱藏後出現的地址**/
		
	  #contact a:hover{ color:#ccc}
	.ct_info{ width:180px; margin:0 auto; padding-left: 100px;}
		.ct_info li{ margin-bottom:15px; text-align:left;} 
.ct_info li img{ position: relative; top: 5px; margin-right: 5px;}
		
/*******************************************ADDDDD*********************************************/			
/**collection**/	
	#collection{ width:1000px; position:relative; z-index:99; margin:0 auto;}	
		#collection h1{ width:100%; text-align:center; margin-top:30px; margin-bottom:35px;clear:both;  }
			#collection .colltxt{ width:80%; text-align:center; margin:0 auto; margin-bottom:50px;}
		.clt { /*height:280px; */float:left}
		.clt li{ width:300px; /*height:220px;*/ margin-right:45px; position:relative; margin-bottom:45px; text-align:center; float:left; position: relative;}
			.clt li.last{ margin-right:0;}	
				.clt li a{ display:block;}
				.clt li a:hover{ color:#999;}
				.clt li:hover{ outline:1px solid #f1f1f1;}
				.clt li img{ opacity:1;
								-o-transition: opacity 0.5s ease-in-out;
								-webkit-transition: opacity 0.5s ease-in-out;
								-moz-transition: opacity 0.5s ease-in-out;
								transition: opacity 0.5s ease-in-out;}
				.clt li:hover img{ opacity:0.5;	}
								
				.clt li em{width:100%; height:2px; background:#fff; position:absolute; bottom:-3px; left:0;
								-o-transition: background 0.5s ease-in-out;
								-webkit-transition: background 0.5s ease-in-out;
								-moz-transition: background 0.5s ease-in-out;
								transition: background 0.5s ease-in-out;}
				.clt li:hover em{ background:#000;}
		.clt li .title{ width:100%; font-size:13px; text-align:center; margin-top:12px; float:left;}

			
/**collection_list**/	
	#collection_list{ width:1000px; position:relative; z-index:99; margin:0 auto;}	
		#collection_list h1{ width:97%; text-align: center; padding-left:20px; margin-top:5px; clear:both;  }
		#collection_list .info{ width:960px; margin:0 auto; margin-bottom:25px;}
			#collection_list .breadcrumb{ width:100%; text-align:right;color:#999;}
		.clt_list{ /*height:220px;*/ margin-bottom:45px; float:left}
		.clt_list li{ width:200px; padding-bottom:5px; margin-right:65px; position:relative; text-align:center; float:left; position:relative;}
		.clt_list li img{ opacity:1;
						-o-transition: opacity 0.5s ease-in-out;
						-webkit-transition: opacity 0.5s ease-in-out;
						-moz-transition: opacity 0.5s ease-in-out;
						transition: opacity 0.5s ease-in-out;}
		.clt_list li:hover img{ opacity:0.5;}
		.clt_list li em{ width:100%; height:2px; background:#fff; position:absolute; bottom:0; left:0;
								-o-transition: background 0.25s ease-in-out;
								-webkit-transition: background 0.25s ease-in-out;
								-moz-transition: background 0.25s ease-in-out;
								transition: background 0.25s ease-in-out;}
		.clt_list li:hover em{background:#000; }
		.clt_list li img{ width:200px;}
			.clt_list li.last{ margin-right:0;}
				.clt_list li a{ display:block;}
				.clt_list li a:hover{ color:#999;}
				.clt_list li:hover{ outline:1px solid #f1f1f1;  }
		.clt_list li .title{ width:100%; font-size:13px; text-align:center; float:left;}

/**pd_view**/	
	#pd_view{ width:1000px; padding-top:60px; position:relative; z-index:99; margin:0 auto;}	
		#jlimg{ width:500px; float:left}
		
		#pd_moreinfo{ width:450px; float:right; margin-left:30px;}
			#pd_moreinfo h1.title{ width:500px; text-align:left; font-size:18px;  border-bottom:1px #e3c277 solid; padding-bottom:15px; float:left;  }  	
			#pd_moreinfo .infotxt{ width:100%; margin:15px 0; float:left;}
			#pd_moreinfo .texture{ width:100%; margin:15px 0; padding:15px 0; border-bottom:1px #000 solid; border-top:1px #000 solid; float:left;}
			#pd_moreinfo .breadcrumb{ width:100%; text-align:center; color:#999; float:left;}
	
		#pd_view button.next{ width:26px; height:35px; position:absolute; top:325px; right:-80px; background:url(../images/ar_rig.png) no-repeat; border:none; cursor:pointer;}
		#pd_view button.prev{ width:26px; height:35px;position:absolute; top:325px; left:-80px; background:url(../images/ar_left.png) no-repeat; border:none; cursor:pointer;}