@charset "utf-8";

/* <<=== index 首頁 =============================================>> */

.idx-group{
	position:relative;
	min-height:250px;
	padding:20px 520px 30px 0;
}

.idx-news{
	position:absolute;
	top:0;
	right:0;
	width:500px;
	height:200px;
	background:#336600;
	border-radius:10px;
	margin-top:25px;
	/* background:url(../images/idx-news-bg.png) no-repeat center;
	background-size:100% 100%; */
}

.idx-news .title{
	position:absolute;
	top:10px;
	left:-20px;
	width:230px;
	height:40px;
	background:url(../images/idx-news-dec.png) no-repeat center;
	text-align:center;
	color:#FFF;
	font-weight:600;
}


/*---------------------*/
/*跑馬燈*/
#abgne_marquee {
	position:absolute;
	top:90px;
	left:60px;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	width: 380px;
	height: 110px;
}
#abgne_marquee ul {
	position: absolute;
}
#abgne_marquee ul li a {
	display: block;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	font-size:1.3em;
	height: 110px;
	text-decoration: none;
	color:#FFF;
}
#abgne_marquee ul li a:hover{
	color:#ffd24c;
}

.idx-news .more-btn{ display:none;}

/*---------------------*/

.idx-about{
	position:relative;
	min-height:210px;
	/*overflow:hidden;*/
	background:#ffffcc;
	background:linear-gradient(top, #ffffcc , #ffffff );
	background:-moz-linear-gradient(top, #ffffcc , #ffffff );
	background:-webkit-linear-gradient(top, #ffffcc , #ffffff );
	background:-o-linear-gradient(top, #ffffcc , #ffffff );
	background:-ms-linear-gradient(top, #ffffcc , #ffffff );
	border-radius:10px;
	webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	padding:50px 20px 15px 20px;
}

.idx-about .title{
	position:absolute;
	top:-6px;
	left:6px;
	width:240px;
	height:40px;
	background:url(../images/idx-about-title.png) no-repeat center;
	text-align:center;
	color:#FFF;
	font-weight:600;
	line-height:38px;
}
.idx-about .intro{height:120px; overflow:hidden;}
.idx-about .more-btn{ position:absolute; right:20px; bottom:10px;}

/*---------------------*/

/* .idx-pro-healine .title:before{
	position:absolute;
	top:-16px;
	right:-30px;
	content:"HOT!";
	color:#F00;
	font-weight:600;
	-moz-transform:rotate(8deg);
	-webkit-transform:rotate(8deg);
	-o-transform:rotate(8deg);
	-ms-transform:rotate(8deg);
	transform:rotate(8deg);
} */

/*---------------------*/

.idx-pro-gp{}
.idx-pro-gp .col{ padding:2%;}

/*.idx-pro-gp .pro-item{ background:#336600;}
.idx-pro-gp .pro-item:after{ background:#99cc33;}

.idx-pro-gp .pro-item .title a{ color:#ffffff;}
.idx-pro-gp .pro-item:hover .title a{ color:#ffd24c;}*/



/* <<===End index 首頁 ==>> */



/* <<=== product 商品頁 =============================================>> */

.pro-gp .col{ padding:2%;}

.pro-gp .pro-item .photo{ height:8vw;}

/*.pro-gp .pro-item{ background:#336600;}
.pro-gp .pro-item:after{ background:#99cc33;}

.pro-gp .pro-item .title a{ color:#ffffff;}
.pro-gp .pro-item:hover .title a{ color:#ffd24c;}*/

.product-area .title{
	position:relative;
	color:#669900;
	font-size:1.1em;
	font-weight:600;
	padding-left:12px;
}

.product-area .title:before{
	position:absolute;
	top:10%;
	left:0;
	height:80%;
	width:6px;
	border-radius:2px;
	content:"";
	background:#99cc00;
}

/* <<===End product 商品頁 ==>> */


/* <<=== about 關於我們 =============================================>> */
.about-area{position:relative; padding-bottom:40px;}

.about-area .photo{
	max-width:350px;
}

/*因後台編輯器 span會自添縮排*/
.about-area .intro span{ display:block;}

.about-dec{
	position:absolute;
	z-index:-1;
	bottom:0;
	right:0;
	width:100%;
	text-align:right;
}

.about-dec img{
	display:inline-block;
	max-width:450px;
	height:auto;
}
/* <<===End about 關於我們 ==>> */



/* <<=== product_view 商品詳細頁 =============================================>> */
.pro-detail{
	position:relative;
	min-height:470px;
	padding-left:470px;
}

/* .pro-detail .photo{
	position:absolute;
	top:0;
	left:0;
	width:470px;
	height:470px;
	overflow:hidden;
	background: url(../images/pro-view-bg.png) no-repeat center;
	background-size:cover;
} */

.pro-detail .photo img{
	max-width: 50%;
	max-height: 50%;

	position: absolute;
	top: 48%;
	left: 38%;
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.pro-detail .title{ padding-top:150px; padding-bottom:5px; margin-bottom:0; color:#336600;}

/*.pro-desc{ padding-left:40px;}*/

.leaves-headline.pro-view-set{ text-align:left;}


.pro-photo:before, .pro-photo:after{ display:table; content:" " }
.pro-photo:after{ clear:both }

.pro-photo li{ 
	float:left; 
	position:relative; 
	width:18%; 
	height:10vw; 
	overflow:hidden; 
	margin-right:2%; 
	margin-bottom:30px;
	border:1px solid #cccccc;
}

.pro-photo li img{
	max-width: 100%;
	max-height: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.pro-photo li a{ display:block; width:100%; height:100%;}

/*---------------------*/

.video iframe{ max-width:600px;}

/* <<===End product_view 商品詳細頁 ==>> */



/* <<=== news 最新消息 =============================================>> */

.datepost{
	position:relative;
	padding:0 12%;
	margin-bottom:60px;
}
.datepost:before{
	position:absolute;
	z-index:0;
	bottom:0;
	right:-3%;
	width:1px;
	height:100%;
	content:"";
	background:#cccccc;
}
.datepost-list li:nth-child(3n) .datepost:before{ display:none;}

.datepost .title{ 
	margin:15px 0; 
	font-weight:600;
	overflow : hidden;
	
	text-overflow : ellipsis; 
	white-space : nowrap;
}
.datepost .title a{ color:#336600;}
.datepost:hover .title a{ color:#589535;}

.datepost .intro{
	font-size:0.9em;
	color:#666;
	height:50px;
	overflow:hidden;
	margin:15px 0;
}
.datepost .photo{
	position: relative;
	width: 100%;
	height: 200px;
	overflow:hidden;
}

.datepost .photo img{
	max-width: 100%;
	max-height: 100%;

	position: absolute;
	top: 0%;
	left: 0%;
}

.datepost .type{
	display:inline-block;
	font-size:0.75em;
	line-height:1;
	padding:4px 5px;
	color:#666;
	border:1px solid #cccccc;
}

.datepost .date{
	display:inline-block;
	font-size:0.75em;
	line-height:1.2;
	padding:0 5px;
	color:#666;
	letter-spacing:1px;
}
/* <<===End news 最新消息 ==>> */



/* <<=== news_view 最新消息詳細 =============================================>> */
.news-view-area{}
.news-view-area:before, .news-view-area:after{ display:table; content:" " }
.news-view-area:after{ clear:both }

.news-view-area .title , .news-view-area .date{ text-align:center;}
.news-view-area .title{ color:#336600; font-size:1.2em; margin-bottom:5px;}

.news-view-area .date{ font-size:0.7em; color:#333}

.news-view-area .intro img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto;
}

.news-photo .col{padding-bottom:20px;}
.news-photo , .news-photo img{border-radius:5px;}

/* <<===End news_view 最新消息詳細 ==>> */




/* <<===begin factory 參觀工廠 ==============================================>> */

.factoty-area .title{
	position:relative;
	color:#669900;
	font-size:1.1em;
	font-weight:600;
	padding-left:15px;
}

.factoty-area .title:before{
	position:absolute;
	top:10%;
	left:0;
	height:80%;
	width:6px;
	border-radius:2px;
	content:"";
	background:#99cc00;
}

.factoty-area .title:after{
	position:absolute;
	z-index:-1;
	top:10%;
	left:3px;
	height:80%;
	width:6px;
	border-radius:2px;
	content:"";
	background:#336600;
}

/*---------------------*/

.thumbnail-list .col{
	padding:10px;
}

.thumbnail-item {position:relative; margin-bottom:30px;}

.thumbnail-item .photo , .thumbnail-item .photo img{border-radius:10px;}

.thumbnail-item .photo{
	background:#FFF;
	overflow:hidden;
}

.thumbnail-item .photo a img{
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.thumbnail-item .photo:hover a 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);
}

.thumbnail-item:before{
	position:absolute;
	z-index:-1;
	top:2px;
	left:2px;
	width: 100%;
	height: 100%;
	content:"";
	background:#FFF;
	border-radius:10px;
	border:1px solid #b7b7b7;
	webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.thumbnail-item:after{
	position:absolute;
	z-index:-2;
	top:5px;
	left:5px;
	width: 100%;
	height: 100%;
	content:"";
	background:#FFF;
	border-radius:10px;
	border:1px solid #a3a3a3;
	webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	-moz-transform:rotate(-6deg);
	-webkit-transform:rotate(-6deg);
	-o-transform:rotate(-6deg);
	-ms-transform:rotate(-6deg);
	transform:rotate(-6deg);
}

/* <<===End factory 參觀工廠 ==>> */


/* <<===begin brands 經銷品牌 ==============================================>> */

/*.brands-set.submenu li:before{
	position:absolute;
	top:10%;
	left:0;
	height:80%;
	width:6px;
	border-radius:2px;
	content:"";
	background:linear-gradient(45deg, #99cc33 50% , #89b72d 50% );
	background:-moz-linear-gradient(45deg, #99cc33 50% , #89b72d 50% );
	background:-webkit-linear-gradient(45deg, #99cc33 50% , #89b72d 50% );
	background:-o-linear-gradient(45deg, #99cc33 50% , #89b72d 50% );
	background:-ms-linear-gradient(45deg, #99cc33 50% , #89b72d 50% );
}

.brands-set li:hover a , .brands-set li.active a{ color:#669900;}
.brands-set li:hover:before , .brands-set li.active:before{ 
	background:#99cc00;
	background:linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-moz-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-webkit-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-o-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-ms-linear-gradient(45deg, #99cc33 50% , #336600 50% );
}*/

/*---------------------*/

.brands-area:before, .brands-area:after{ display:table; content:" " }
.brands-area:after{ clear:both }

.brands-area .title{
	position:relative;
	color:#669900;
	font-size:1.1em;
	font-weight:600;
	padding-left:15px;
}

.brands-area .title:before{
	position:absolute;
	top:10%;
	left:0;
	height:80%;
	width:6px;
	border-radius:2px;
	content:"";
	background:#99cc00;
	background:linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-moz-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-webkit-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-o-linear-gradient(45deg, #99cc33 50% , #336600 50% );
	background:-ms-linear-gradient(45deg, #99cc33 50% , #336600 50% );
}

.brands-area .intro .pic{
	width:100px;
	float:left;
	margin-right:20px;
	margin-bottom:10px;
}

/* <<===End brands 經銷品牌 ==>> */




/* <<===begin contact 聯絡我們 ==============================================>> */

.info-list{ letter-spacing:2px; margin-left:15px; position:relative; margin-bottom:60px;}
/* .info-list:before{
	position:absolute;
	z-index:-1;
	bottom:-30px;
	right:0px;
	width:300px;
	height:218px;
	content:"";
	background:url(../images/contact-dec.png) no-repeat center;
	background-size:cover;
	opacity:0.3;
} */
.info-list li{margin-bottom:5px;}
.info-list .company { color:#336600; margin-bottom:30px; font-weight:600;}

.info-list .company .maintitle{font-size:1.4em;}
.info-list .company .subtitle{font-size:0.9em;}
.info-list .company span{display:block;}

/*---------------------*/

.social-list {display:inline-block;}

.social-list li{ 
	display:inline-block; 
	margin-right:10px;
	margin-top:10px;
	border-radius:5px;
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.social-list li img{ display:block; border-radius:5px;}

.social-list li:hover{
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/*---------------------*/

.qrcode{ display:inline-block; width:102px; border:1px solid #cccccc; padding:1px; margin-right:5px;}

/* <<===End contact 聯絡我們 ==>> */




/* <<===begin  ==============================================>> */

.link-box{ 
	position:relative; 
	min-height:120px;
	padding:10px 93px 10px 120px;
	border:1px solid #cccccc;
	margin-bottom:30px;
}

.link-box .photo{
	position:absolute;
	top:10px;
	left:10px;
	width:100px; 
	height:100px; 
	border:5px solid #ffffff;
	overflow:hidden;
}

.link-box .photo img{
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
}

.link-box .title{ font-weight:600; margin-bottom:5px;  font-size:1.05em;}
.link-box .title a {color:#336600;}
.link-box .intro{ font-size:0.95em; color:#666;}

.link-box .morebtn{
	position:absolute;
	bottom:-1px;
	right:10px;
	width:90px;
	height:60px;
	background:url(../images/link-btn.png) no-repeat center;
}

.link-box .morebtn a:before{
	position:absolute;
	top:50%;
	left:50%;
	content:"Go>";
	margin-left:-19px;
	margin-top:-5px;
	color:#CCC;
	font-weight:600;
}

.link-box:hover .morebtn a:before{
	animation:goto 2s linear infinite;
	-moz-animation:goto 2s linear infinite; /* Firefox */
	-webkit-animation:goto 2s linear infinite; /* Safari and Chrome */
	-o-animation:goto 2s linear infinite; /* Opera */
}

.link-box .morebtn a{ display:block; width:100%; height:100%;}
.link-box .morebtn .icon-txt{ display:none;}


.link-box:hover{
	background:#336600;
	border-color:#336600;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.link-box:hover .morebtn{background:url(../images/link-btn-hover.png) no-repeat center;}
.link-box:hover .morebtn a:before{color:#336600;}
.link-box:hover .intro{ color:#ffffff;}
.link-box:hover .title a{ color:#ffffff;}
.link-box .title:hover a{color:#ffd24c;}

/* <<===End links 相關連結 ==>> */






.intro img{
	max-width:100%; height:auto;
}



@keyframes jump {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Firefox */
@-moz-keyframes jump {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}


/* Safari和Chrome */
@-webkit-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Opera */
@-o-keyframes jump {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}