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

.contentBox .leftArea{
	float:left;
	width:20%;
	margin-right:25px;}

.contentBox .rightArea{
	overflow:hidden;}

.classNote{
	padding-bottom:10px;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-size:15px;
	color:#000;
	text-align:center;
	line-height:1.8;}

.classNote img{
	max-width:100%;}

ul.facList{
	clear:both;
	padding-top:25px;
	margin:0 -15px;}

ul.facList > li{
	float:left;
	padding:0 15px 40px 15px;}

ul.facList > li .item{
	position:relative;}

ul.facList > li .Img{
	position:relative;
	overflow:hidden;}

ul.facList > 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;}

ul.facList > li .Img:hover img{
	opacity:0.7;
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-o-transform:scale(1.05);
	transform:scale(1.05);}

ul.facList > li .Txt{
	padding:15px 0;
	height: 80px;
}

ul.facList > li .Txt h3{
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-size:20px;
	font-weight:normal;}

ul.facList > li .Txt h3 a{
	display:block;
	font-weight:normal;
	color:#000;}

ul.facList > li .Txt ul.price{
	padding-top:5px;
	font-size:13px;
	color:#AAA;
	font-weight:normal;}

ul.facList > li .Txt ul.price li{
	display:inline-block;}

ul.facList > li .Txt ul.price li b{
	font-size:18px;
	color:#d91660;}

ul.facList > li .Txt ul.price li.del{
	text-decoration:line-through;
	margin-right:8px;}

ul.facList > li .Txt ul.price li.del b{
	color:#666;}

ul.facList > li .Txt p{
	padding-top:5px;
	font-size:13px;
	color:#6D6D6D;
	line-height:1.8;
	height:55px;}

ul.facList > li .ribbon_new{
	background:url(../images/ribbon_new.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	position:absolute;
	top:-3px;
	left:-2px;}

ul.facList > li .ribbon_hot{
	background:url(../images/ribbon_hot.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	position:absolute;
	top:-3px;
	left:-2px;}
	
/******內頁******/
.contentBox{}

.contentBox .leftBox{
	float:left;
	width:74%;}

.contentBox .rightBox{
	float:right;
	width:25%;}

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

.productIntro .albumBox{}

.productIntro .Img img{/*產品大圖*/
	width:100%;}

/*產品介紹縮圖文字*/
.introBox{
	margin-top:10px;}

ul.side_album{
	margin:-3px -1px 0 -1px;
	width:100%;}

ul.side_album li{
	float:left;
	width:50%;
	overflow:hidden;
	padding:3px;}

ul.side_album li a{
	display:block;}
	
ul.side_album li a img{
	display:block;
	width:100%;}

.introBox .fbBox{
	float:right;}

.contentBox h3.title strong{
	display:block;
	font-size: 22px;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-weight:normal;
	color:#e14f0e;}

.contentBox h3.title em{
	display:block;
	font-size:15px;
	font-weight:normal;
	color:#000;}

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

.introBox .Txt{
	margin-top:20px;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-size:16px;
	color:#948D41;
	line-height:1.6;}
	
/*訂購規格區*/
.orderTable{
	padding-top:10px;
	margin-top:20px;
	border-top:1px dashed #8e8e8e;}

.orderTable table{
	font-size:12px;}

.orderTable table th{
	padding:5px;
	font-size:15px;
	color:#000;}

.orderTable table td{
	padding:5px;
	color:#2f2f2f;}

.orderTable table tr:first-child th{}

.orderTable table tr:first-child td{}
	
.orderTable table td b{
	font-weight:normal;
	color:#2f2f2f;}

.orderTable table td b.del{
	margin-right:8px;
	text-decoration:line-through;}

.orderTable table td b.dis{
	color:#F00;
	font-size:14px;}

.orderTable .orderNote{/*處理備註*/
	padding-top:10px;}

.orderTable .orderNote textarea{/*處理備註*/
	width:100%;
	height:100px;
	padding:5px;
	border: 1px solid #C5C5C5;
	color:#2f2f2f;
	border-radius:5px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.orderTable .btn{
	padding-top:20px;
	text-align:center;}

.orderTable .btn a{
	display:inline-block;
	padding:10px 15px;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-size:15px;
	color:#FFF;
	border-radius:3px;
	
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

/*留言板*/
.faqList{
	margin-bottom:30px;}

.faqList dl{
	font-size:13px;
	color:#666;}

.faqList dl dt{
	padding:15px 15px 15px 35px;
	position:relative;}

.faqList dl dt:before{
	content:"Q.";
	font-size:15px;
	color:#e45923;
	position:absolute;
	left:10px;
	top:15px;}

.faqList dl dt strong{
	display:block;}

.faqList dl dt strong a{
	margin-left:3px;
	color:#06F;}

.faqList dl dt strong b{
	display:block;
	float:right;}

.faqList dl dt p{
	margin-top:5px;
	line-height:1.6;}

.faqList dl dd{
	padding:15px 15px 15px 35px;
	background:#eeeeee;
	border-bottom:1px dashed #C7C7C7;
	position:relative;}

.faqList dl dd:before{
	content:"A.";
	font-size:15px;
	color:#81d2d6;
	position:absolute;
	left:10px;
	top:15px;}

.postTitle{
	padding:8px 0;
	font-size:13px;
	color:#1983d0;}

.postBox{
	clear:both;
	background:#eee;
	padding:15px;}

.postBox .row{
	margin-top:15px;}

.postBox .row:first-child{
	margin:0;}

.postBox .row .col-2{
	padding-left:15px;}

.postBox .row .col-2:first-child{
	padding-left:0;}

.postBox label{
	display:block;
	font-size:13px;
	color:#383838;
	margin-bottom:5px;}

.postBox input[type="text"]{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	width:100%;
	padding:3px;
	height:35px;
	border:1px solid #CCC;}

.postBox textarea{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	width:100%;
	padding:5px;
	height:170px;
	border:1px solid #CCC;}

.form{
	clear:both;
	margin-top:20px;
	text-align:right;}

.checkArea{
	clear: both;
	display:inline-block;
	position: relative;}

.form .btn{
	display:inline-block;}

.form .btn a{/*送出按鈕*/
	display:inline-block;
	padding:7px 15px;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	font-size:16px;
	color:#FFF;
	border-radius:3px;
	
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

/*****************/
/** QapTcha CSS **/
/*****************/
.QapTcha {/*整個驗證碼區*/
		}
		
.QapTcha .clr{
	clear:both;}
	
.QapTcha .bgSlider{/*滑軌*/
	width:200px;
	height:34px;
	float:left;
	border-radius:6px;
	
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
	
.QapTcha .Slider{/*按鈕*/
	cursor:pointer;
	width:45px;
	height:30px;
	background:transparent url(../images/but-arrow.gif) no-repeat;
	position:relative;
	top:2px;
	left:0;
	z-index:99;}

.checkArea p.note{/*向右滑動解鎖*/
	font-size:15px;
	font-family:微軟正黑體;
	color:#949494;
	position:absolute;
	left:55px;
	top:7px;}
	
.QapTcha .dropSuccess{/*成功*/
	color:#4e8b37;}
	
.QapTcha .dropError{/*錯誤*/
	display:none;}


/*767*/
@media (max-width: 767px){

ul.facList > li.col-3{
	width:50%;}		

/*內頁*/
.productIntro .albumBox{
	width:100%;
	float:none;}

.introBox{
	margin-top:25px;}

}
/*767 end*/

/*640*/
@media (max-width: 640px){

/*內頁*/
.contentBox .leftArea{
	float:none;
	width:100%;
	margin-right:0;}

.contentBox .rightArea{
	float:none;
	width:100%;
	margin-top:20px;}

.contentBox .leftBox{
	float:none;
	width:100%;
	margin-right:0;}

.contentBox .rightBox{
	float:none;
	width:100%;
	margin-top:20px;}

.introBox .fbBox{
	float:none;
	margin-bottom:10px;}

ul.side_album li{
	width:25%;}

}
/*640 end*/

/*360*/
@media (max-width: 360px){
ul.facList > li.col-3{
	width:100%;}

ul.facList > li .Txt p{
	height:auto;}

/*內頁*/
.side_contactInfo ul{
	text-align:center;}
.side_contactInfo ul li{
	display:inline-block;}
.side_contactInfo ul li a b{
	display:none;}
}
/*360 end*/