@charset "utf-8";
/* css document */

.mainarea{
padding-top:0px;
background:#fff}

.mainarea .contentbox{
	padding:0}

/**最新消息**/
.aboutarea{
	position:relative;
	padding:30px 0 0 0;
	}
	
.aboutarea a:before{
	z-index: 999;
    content: "";
    display: block;
    width: 100%;
    height: 105px;
    background: url(/uploads/image/eimages/top_cut.png) no-repeat center top;
    background-size: cover;
    position: absolute;
    top: -104px;
    left: 0;}

.aboutarea .box{
	border:1px solid #dcdcdc;
	box-shadow:0 2px 2px rgba(125, 125, 125, 0.28);
	padding:20px;}
	

.featurearea{
	padding:10px 0;}

.featurearea ul{
	margin:0 -20px;}

.featurearea ul li{
	-webkit-transition:all 0.8s ease;
	-moz-transition:all 0.8s ease;
	-o-transition:all 0.8s ease;
	transition:all 0.8s ease;
	padding:20px;}
.featurearea ul li .item{
	overflow:hidden;
	position:relative;
	padding:10px;
	border:1px solid #dcdcdc;
	-webkit-transition:all 0.8s ease;
	-moz-transition:all 0.8s ease;
	-o-transition:all 0.8s ease;
	transition:all 0.8s ease;}
	
.featurearea ul li:hover .item{
	border:1px solid #222;}	


.featurearea ul li .img{
	position:relative;
	overflow:hidden;
	float:left;
	width:45%;}

.featurearea ul li .img a{
	display:block;}

.featurearea ul li .img img{
	display:block;
	width:100%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;}

.featurearea ul li:hover .img img{
	-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);}

.featurearea ul li .txt{
	float:left;
	width:45%;
	margin:0 0 0 6%;
}

.featurearea ul li .txt h3{
	padding:15px 0;
	color:#333333;
	font-size:21px;
	font-weight:normal;
	
	}

.featurearea ul li .txt h3 a{
	overflow : hidden;
 	text-overflow : ellipsis;
  	color:#000;
  	white-space : nowrap;
	position:relative;
	display:block;
}

.featurearea ul li:hover .txt h3 a{
	font-weight:bold;
	color:#222;}


.featurearea ul li .txt p{
	overflow:hidden;
	margin-top:15px;
	font-size:15px;
	color:#666666;
	line-height:25px;
	height:100px;}	
	
.featurearea .btn2{
	margin-top:30px;
	}

.featurearea  .btn2 a{
	position:relative;
	z-index:1;
	display:block;
	float:left;
	margin:0 6%;
	padding:10px 0;
	font-size:13px;
	color:#333;
	width:30%;
	border-top:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
	}

.featurearea .btn2 a i{
	margin:0 15px;
	font-size:15px;}

.featurearea .btn2 a:after{
	content:"";
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	transition:all 0.4s ease;
	opacity:0;	
}

.featurearea  .btn2 a:hover{
	color:#222;font-weight: bold;}
.featurearea  .btn2 a:hover:after{
	transform:skewx(-10deg);
	opacity:1;}
	
.sidebox{
	float:left;
	width:265px;
	margin-right:30px;}
	

.side_menu a.main{
	display:none;}

.mainbox{
	overflow:hidden;}

.mainbox .titlebox_s{
	position:relative;
	margin-bottom:30px;}

.mainbox .titlebox_s h2{
	font-size: 15px;
	color: #0054a7;
	border-bottom:1px solid #dcdcdc;}

.mainbox .titlebox_s h2 strong{
	display:block;
	font-weight:normal;}

.mainbox .titlebox_s h2 em{
	display:inline-block;
	font-size:20px;
	color:#222;
	text-transform:uppercase;
	border-bottom:3px solid #ca171d;
	padding-bottom:10px;}
	
	
.mainbox .box{
	margin:20px 0;
	border:1px solid #dcdcdc;
	 box-shadow:0 2px 2px rgba(125, 125, 125, 0.28);
	padding:20px;}	
	

.classnote{
	padding-bottom:10px;
	font-size:15px;
	color:#222;
	text-align:center;
	line-height:1.8;}

.classnote img{
	max-width:100%;}	
	
ul.itemlist{ margin:0 -10px;}
ul.itemlist li{
	width:33%;
	margin:0 0 30px 0;
	transition:all 0.2s linear;}
ul.itemlist li:hover{
-webkit-transform: translatey(-12px);
	transform: translatey(-12px);
	}
ul.itemlist li .item{}	
	
ul.itemlist li .img{
	border:1px solid #dcdcdc;
	position:relative;
	background:#1e1e1e;}
ul.itemlist li .img:before{
	width:100px;
	height:20px;
	content:"more";
	background:url(/uploads/image/eimages/s_logo.png) no-repeat top center;
	padding-top:80px;
	color:#fff;
	text-align:center;
	display:block;
	font-size:0.8em;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-60px;
	margin-left:-50px;
	opacity:0;
	transition:all 0.4s linear;
}
ul.itemlist li:hover .img:before{
	margin-top:-40px;
	opacity:1;
}
ul.itemlist li .img img{
	float:left;
	width:100%;}
ul.itemlist li:hover .img img{
	opacity:0.2;
}
ul.itemlist li .txt{
	background:#e9e9e9;
	padding:20px 15px 50px 15px;}
ul.itemlist li .txt:before{
	content:"";
	display:block;
	width:40px;
	height:3px;
	background:#c92b2f;
	}
ul.itemlist li .txt h3{
	padding-top:10px;
	font-size:1.23em;
	height:50px;
}
ul.itemlist li .txt h3 a{
	color:#000;}
ul.itemlist li:hover .txt h3 a{
	color:#c92b2f;}
ul.itemlist li .txt p{
	display:block;
	padding-top:10px;
	color:#666;
	font-size:0.8em;
	line-height:25px;
	height:50px;
	overflow:hidden;}

ul.left_ad{ text-align:center;}	
ul.left_ad li{padding:10px 0;}

/*產品介紹區*/
.productintro{}

.productintro .albumbox{
	margin-right:30px;
	padding:0;}

/*產品大圖*/
.productintro .albumbox ul.img{}

.productintro .albumbox ul.img li .pic{
	border:1px solid #dcdcdc;
	max-height:580px;}

.productintro .albumbox ul.img .pic  img{
	width:100%;}

.productintro .albumbox ul.img li .txt{
	font-size:15px;
	color:#222;}

.productintro .albumbox ul.img li .txt span{
	color:#d50003;}
	
/*產品介紹縮圖文字*/
.introbox{
	overflow:hidden;}

.introbox .fbbox{}

.introbox b.code{/*商品編號*/
	display:block;
	font-size:12px;
	color:#999;
	font-weight:normal;}

.introbox .txt{
	margin-top:20px;
	font-size:14px;
	color:#666;
	line-height:1.5;}

.introbox .share{
	clear:both;
	padding-top: 10px;
    margin-top: 20px;
    border-top: 1px dashed #e1e1e1;}

.introbox .share b{
	display:inline-block;
	font-size:13px;
	font-weight:normal;
	color:#666;}

.introbox .share a{
	display:inline-block;
	vertical-align:middle;
	margin:0 5px;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	border-radius:5px;
	color:#fff;
	font-size:18px;
	transform:translatey(0);}
.introbox .share a.fb{
	border:1px solid #3765a3;
	background:#3765a3;}
.introbox .share a.gplus{
	border:1px solid #dd5144;
	background:#dd5144;}
.introbox .share a.twitter{
	border:1px solid #33bdfd;
	background:#33bdfd;}
.introbox .share a.twitter{
	border:1px solid #33bdfd;
	background:#33bdfd;}
.introbox .share a.weibo{
	border:1px solid #d72729;
	background:#d72729;}

.introbox .share a.line{
	border:none;}
.introbox .share a.line img{
	max-width:100%;}

.introbox .share a:hover{
	opacity:0.8;}
	
 .ordernote{/*處理備註*/
	padding-top:10px;}

.ordernote textarea{/*處理備註*/
	width:100%;
	height:75px;
	border:none;
	border-top:1px dashed #d4d4d4;
	border-bottom:1px solid #d4d4d4;
	padding:15px 10px 35px 10px;
	color:#666666;
	font-family:arial,"新細明體";
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}	
	
.btn{/*送出按鈕*/
	}

.btn a{/*送出按鈕*/
	cursor:pointer;
	display:inline-block;
	padding:7px 15px;
	font-size:16px;
	color:#fff;
	box-shadow:2px 2px 2px #ccc;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

@media (max-width: 1160px){	

.featurearea  .btn2 a{
	text-align: center;
		width:40%;}	
	
}
	
@media (max-width: 960px){	
.featurearea  .btn2 a{
	text-align: center;
		width:100%;}
		
.sidebox{
		float:none;
		width:100%;
		margin:0 0 20px 0;}
	
.side_menu a.main{
		display:block;
		font-size:15px;
		color:#222;
		border:1px solid #ccc;
		position:relative;
		padding:10px;
		border-radius:5px;
		background: #eeeeee; /* old browsers */
		background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* ff3.6  */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* chrome,safari4  */
		background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* chrome10 ,safari5.1  */
		background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* opera 11.10  */
		background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* ie10  */
		background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* w3c */
		filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#eeeeee', endcolorstr='#eeeeee',gradienttype=0 ); /* ie6-9 */
	}
	
	.side_menu a.main i{
		display:block;
		font-size:15px;
		
		position:absolute;
		right:10px;
		top:50%;
		margin-top:-6px;}
	
	.side_menu ul{
		display:none;}		
		
	.aboutarea .titlebox .bread{
	display:none;}	
	
	ul.left_ad{display:none;}

}
	
	
@media (max-width: 767px){


.introbox{
	overflow:inherit}
	
.aboutarea{
	position:relative;
	background:#fff;
	padding:20px 0;}

.aboutarea a:before{
	display:none;}
	

.featurearea  .btn2 a{
	    text-align: center;
		width:40%;}	
		
ul.itemlist li{
	width:46%;
	margin:0 2% 20px 2%;
}
		
	
	}
	
	
@media (max-width: 480px){	
.productintro .albumbox ul.img li .pic{
	margin-bottom:20px;
	}
.aboutarea{
	padding:10px 0;}
	
.featurearea{
	padding-bottom:40px;}	
	
.featurearea ul li .item{
	padding:0px;
}

.featurearea ul li .txt h3{
	padding:8px 0;
	color:#333333;
	font-size:21px;
	font-weight:normal;
	
	}

.featurearea ul li .txt p{
	overflow:hidden;
	margin-top:5px;
	font-size:15px;
	color:#666666;
	line-height:25px;
	height:70px;}	
	
.featurearea .btn2{
	margin-top:10px;
	}
	
.featurearea  .btn2 a{
	padding:6px 0;
	}	
	
ul.itemlist li{
	width:48%;
	margin:0 1% 20px 1%;
}

ul.itemlist li .txt{
	background:#e9e9e9;
	padding:20px 8px;}
	
ul.itemlist li .txt h3{
	padding-top:5px;
	font-size:1.1em;
	height:40px;
	line-height:1.2;
}

ul.itemlist li .txt p{
	display:block;
	padding-top:0px;
	color:#666;
	font-size:0.8em;
	line-height:1.2;
	height:50px;
	overflow:hidden;}	
}