@charset "utf-8";

/*
base-color:#669900;  rgba(102,153,0, 1); 
seconde-color:#006734;  rgba(0,103,52, 1); 
hover-color:
*/

body , .wrapper{color:#333333;}

/*a 鏈結字*/
a { color:#333333;}
a:hover, a:focus { color:#336600;}


.mt{ margin-top:30px;}
.mb{ margin-bottom:30px;}
.mt-h{ margin-top:15px;}
.mb-h{ margin-bottom:15px;}
.mt-d{ margin-top:60px;}
.mb-d{ margin-bottom:60px;}

.pic img{ display:block; width:100%; height:auto;}
.maxpic img{ display:block; max-width:100%; height:auto;}

/*================================================================================*/

.col-gp{}
.col-gp:before, .col-gp:after{ display:table; content:" " }
.col-gp:after{ clear:both }

.col{ float:left; margin:0 2% 0px 0;}
/*.col img{ display:block; width:100%; height:auto;}*/

.cols02 > .col{width:49%;}
.cols03 > .col{width:32%;}
.cols04 > .col{width:23.5%;}

.cols02 > .col:nth-child(2n) , .cols03 > .col:nth-child(3n) ,
.cols04 > .col:nth-child(4n){ margin-right:0%;}

.cols02 > .col:nth-child(2n+1) , .cols03 > .col:nth-child(3n+1) , 
.cols04 > .col:nth-child(4n+1){ clear:both; float:left;}

/*================================================================================*/

/*叉叉圖示*/
.btn-close{ position:relative;}
.btn-close:before, .btn-close:after{
	position: absolute; top: 50%; left: 50%;
	background: rgba(128,128,128,0.8);
	content: '';
	display: inline-block;
	height: 3px;
	width: 26px;
	margin-top: -2px;
	margin-left: -13px;
	
	transition:All 0.5s ease;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btn-close:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.btn-close:hover:before, .btn-close:hover:after{background:#e6d9b4;}
.btn-close .icon-txt{ display:none;}

/*================================================================================*/

.header{
	position:relative;
	z-index:4;
	padding:0px 0;
}

.header:before{
	position:absolute;
	z-index:-1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	content:"";
	background:linear-gradient(top,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-moz-linear-gradient(top,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-webkit-linear-gradient(top,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px ,rgba(255,255,255,0) );
	background:-o-linear-gradient(top,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-ms-linear-gradient(top,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
}

.header:after{
	position:absolute;
	z-index:-1;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	content:"";
	background:linear-gradient(bottom,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15x , rgba(255,255,255,0) );
	background:-moz-linear-gradient(bottom,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-webkit-linear-gradient(bottom,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-o-linear-gradient(bottom,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
	background:-ms-linear-gradient(bottom,rgba(210,227,174, 1) , rgba(210,227,174, 0.1) 15px , rgba(255,255,255,0) );
}

.logo{ float:left; width:28%; padding:10px 1% 5px 0;}
.logo img{width:100%; height:auto;}

/*================================================================================*/

.site-language{ position:absolute; z-index:10; top:50%; right:0px; margin-top:-13px; }

.site-language a{
	display:block;
	border:1px solid rgba(80,134,49, 0.4);
	width:26px;
	height:26px;
	text-align:center;
	line-height:25px;
	
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
	
	color:rgba(80,134,49, 0.7);
	font-size:0.8em;
}

.site-language a:hover{ background:#508631; color:#FFF; }

/*.chinese-langbtn{ display:none; } */

/*================================================================================*/

.nav{float:left; width:72%; position:relative; z-index:5;}

/*================================================================================*/

.menu-trigger , .menu-wrap{display:none;}

.menu{ width:100%;  position:relative; z-index:6;}
.menu:before, ul.menu:after{ display:table; content:" " }
.menu:after{ clear:both }

.menu li { float:left; width:11.3%; margin:0 0.25%; /*padding:15px 0;*/ position:relative; z-index:4;}
.menu li a { display:block; width:100%; height:100%; padding:15px 0; text-align:center; position:relative; z-index:5;}

.menu .menu-title , ul.menu .menu-subtitle{}
.menu .menu-title { 
	font-size:0.95em; 
	display:inline-block; 
	font-weight:600; 
	color:#669900;
	position:relative;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
.menu .menu-subtitle{ font-size:0.6em; display:block; text-transform:uppercase; padding-top:3px; }

.menu .menu-title:before {
	position:absolute;
	bottom:0px;
	right:-6px;
	content:"+";
	font-size:0.5em;
}

.menu li:before{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:0;
	content:"";
	background:linear-gradient(top, #669900 1% , #99cc33 20% , #99cc33 , #c8de88 );
	background:-moz-linear-gradient(top,#669900 1% , #99cc33 20% , #99cc33 , #c8de88 );
	background:-webkit-linear-gradient(top,#669900 1% , #99cc33 20% , #99cc33 , #c8de88 );
	background:-o-linear-gradient(top,#669900 1% , #99cc33 20% , #99cc33 , #c8de88 );
	background:-ms-linear-gradient(top,#669900 1% , #99cc33 20% , #99cc33 , #c8de88 );
	border-radius:50%/20%;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) , 2px 2px 2px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) , 2px 2px 2px rgba(255, 255, 255, 0.5);
	-o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) , 2px 2px 2px rgba(255, 255, 255, 0.5);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) , 2px 2px 2px rgba(255, 255, 255, 0.5);
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.menu li:hover:before , .menu li.active:before{height:140%;}

.menu li a:hover .menu-title , .menu li.active a .menu-title{color:#FFF;}
.menu li a:hover .menu-subtitle , .menu li.active a .menu-subtitle{color:#333333;}

/*================================================================================*/

.idx-banner{
	position:relative;
	overflow:hidden;
	margin-bottom:30px;
}

.idx-banner:before{
	position:absolute;
	z-index:2;
	bottom:-10px;
	right:0;
	width:1920px;
	height:270px;
	content:"";
	background:url(../images/banner-fixed.png) no-repeat right;
}

.page-banner img{
	width:100%;
	height:auto;
	display:block;
}

.mobile-page-banner{ display:none;}

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

#owl-banner .owl-controls{
	position:absolute;
	z-index:10;
	bottom:17px;
	right:190px;
}
#owl-banner .owl-page span{
	width: 12px;
	height: 12px;
	background: #ffffcc;
	border:1px solid #ffffff;
}
#owl-banner .owl-page.active span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background:rgba(0,0,0, 0.5);
}
#owl-banner.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background:rgba(0,0,0, 0.9);
}

/*================================================================================*/

.main{ position:relative; z-index:0;}

/*================================================================================*/

.footer{
	position:relative;
	z-index:0;
	text-align:center;
	color:#ffffff;
	margin-top:30px;
	background:linear-gradient(top, #99cc33 , #336600 );
	background:-moz-linear-gradient(top, #99cc33 , #336600 );
	background:-webkit-linear-gradient(top, #99cc33 , #336600 );
	background:-o-linear-gradient(top, #99cc33 , #336600 );
	background:-ms-linear-gradient(top, #99cc33 , #336600 );
	letter-spacing:0;
}

.footer:before{
	position:absolute;
	left:0;
	right:0;
	width:100%;
	height:100px;
	content:"";
	background:url(../images/footer-top-bg.png) repeat-x center;
	/*background-size:contain;*/
}

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

.footer-menu{ 
	text-align:center; 
	margin:0;
	padding:40px 0 10px 0;
	background:#336600;
	background:linear-gradient(top, #99cc33 , #336600 );
	background:-moz-linear-gradient(top, #99cc33 , #336600 );
	background:-webkit-linear-gradient(top, #99cc33 , #336600 );
	background:-o-linear-gradient(top, #99cc33 , #336600 );
	background:-ms-linear-gradient(top, #99cc33 , #336600 );
}
.footer-menu li{
	position:relative;
	display:inline-block;
	text-align:center;
	padding:10px 20px;
}
.footer-menu li:before{
	position:absolute;
	top:50%;
	right:-5px;
	width:1px;
	height:10px;
	margin-top:-5px;
	content:"";
	background:#FFF;
}
.footer-menu li:last-child:before{ display:none;}
.footer-menu li a{color:#ffffff; font-weight:600; }
.footer-menu li a:hover , .footer-menu li.active a{color:#ffd24c; border-bottom:1px solid #ffd24c; }

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

.top-scrolling-btn{ display:none;}

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

.footer-info{ 
	position:relative; 
	display:inline-block; 
	text-align:left; 
	padding-left:100px; 
	margin:30px 0 30px 0; 
	font-size:0.85em;
}
.footer-info span{ display:inline-block; margin:0 10px;}

.footer-icon{ position:absolute; top:50%; left:0; margin-top:-50px;}

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

.footer-designer{
	padding:5px 0 10px 0;
	/*background:#5A5858;*/
	color:#ffffff;
	text-align:right;
	font-size:0.75em;
	letter-spacing:1px;
}
.footer-designer a{ color:#ffffff; }
.footer-designer a:hover{ color:#ffd24c; }

/*================================================================================*/

.page-left , .page-right{float:left;}
.page-left{width:18%; margin-right:2%;}
.page-right{width:80%;}

/*================================================================================*/

/*.headline{text-align:center; border-bottom:1px solid #ccc;}
.headline .title , .headline .subtitle{margin:0;  padding:0;}
.headline .title{font-size:1.1em;}
.headline .subtitle{ font-size:0.7em; text-transform:uppercase; padding-bottom:5px;}*/

.headline{
	position:relative;
	border-bottom:1px solid #336600;
	/*margin-bottom:5px;*/
	padding-left:100px;
	
}
.headline:before{
	position:absolute;
	bottom:0;
	left:5px;
	width:90px;
	height:60px;
	content:"";
	background:url(../images/title-dex.png) no-repeat center;
	background-size:cover;
}
.headline .title{
	position:relative;
	display:inline-block;
	padding:0px 5px;
	text-align:center;
	color:#336600;
	font-size:1.3em;
	font-weight:600;
}

.headline .subtitle{
	position:relative;
	display:inline-block;
	/*width:120px;*/
	padding:0px 0px;
	text-align:center;
	color:#589535;
	font-size:1em;
	font-weight:600;
}

/*================================================================================*/

.back-line{text-align:left;}
.pageback-btn{ display:inline-block; vertical-align:top; font-size:0.85em;}
.pageback-btn-txt{position:relative; padding-left:12px;}
.pageback-btn-txt:before{
	position:absolute;
	left:0;
	top:50%;
	margin-top:-4px;
	content:"";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 8px solid #898989;
	border-bottom: 5px solid transparent;
}
.pageback-btn:hover{color:#336600;}
.pageback-btn:hover .pageback-btn-txt:before{border-right-color:#336600;}

/*================================================================================*/

.breadcrumbs{
	font-size:0.9em;
	line-height:1.5;
	text-align:right;
	margin-top:5px;
}
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{
	content:">";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}
/*.breadcrumbs span:last-child , */.breadcrumbs a:hover{ color:#faa80a;}
.breadcrumbs span:last-child{ cursor:default;}
.breadcrumbs span:last-child a{ color:#595757;}

/*================================================================================*/

.category-wrap{text-align:center; /*padding-right:15px;*/}

/*================================================================================*/

.category-wrap{text-align:center;}

.category a{ 
	position:relative; 
	display:inline-block; 
	padding-left:20px; 
	padding-right:20px; 
	font-size:1.1em;
	line-height:1.5;
	color:#336600; 
	border:1px solid #336600;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:15px;
}
.category a:hover{ color:#142800; border-color:#142800; }
/*.category a:before{
	position:absolute;
	top:50%;
	right:0px;
	width:1px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#336600;
}*/

.category a:last-child:before{ display:none;}

/*================================================================================*/

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

.more-btn a{
	position:relative;
	display:inline-block;
	padding:3px 0;
	width:90px;
	font-size:0.8em;
	color:#FFF;
	text-align:center;
	border-radius:5px;
	background:linear-gradient(top, #99cc33 , #336600 );
	background:-moz-linear-gradient(top, #99cc33 , #336600 );
	background:-webkit-linear-gradient(top, #99cc33 , #336600 );
	background:-o-linear-gradient(top, #99cc33 , #336600 );
	background:-ms-linear-gradient(top, #99cc33 , #336600 );
}

.more-btn .btn-txt{
	position:relative;
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	padding-right:13px;
}

.more-btn a .btn-txt:before{
	position:absolute;
	top:-1px;
	right:-5px;
	content:">>";
	font-size:0.9em;
	letter-spacing:-3px;
	color:#FFF;
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.more-btn a:hover .btn-txt{
	padding-left:10px;
}

/*================================================================================*/

.submenu{ /*margin-top:0px;*/}

.submenu li{ position:relative; padding-left:13px; margin-bottom:9px; font-size:0.95em; border-radius:2px;}

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

.submenu li a{ display:block; padding:1px 0;}

.submenu li:hover  , .submenu li.active{ background:#669900;}
.submenu li:hover a , .submenu li.active a{ color:#FFF; }
.submenu li:hover:before , .submenu li.active:before{ background:#669900;}


/*================================================================================*/

.pro-item{ 
	position: relative;
	text-align:center; 
	padding:6%;
	margin-bottom:30px;
	background:#336600;
	border:1px solid #cccccc;
	border-radius:3px;
	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);
}
.pro-item:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	content:"";
	background:#FFF;
	border-radius:3px;
	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);
}
.pro-item:after{
	position:absolute;
	z-index:-2;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	content:"";
	background:#99cc33;
	border-radius:3px;
	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);
}
.pro-item .photo{
	position: relative;
	width: 100%;
	height: 10vw;
	overflow:hidden;
	margin-bottom:10px;
	background:#FFF;
	border:1px solid #cccccc;
	
	-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2) inset;
	-o-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2) inset;
	box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2) inset;
}

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

.pro-item .photo img{
	max-width: 85%;
	max-height: 85%;

	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-item .title{ font-size:0.95em;}
.pro-item .title a{ color:#ffffff;}
.pro-item:hover .title a{ color:#ffd24c;}

.pro-item .title{
	transition:All 0.2s ease;
	-webkit-transition:All 0.2s ease;
	-moz-transition:All 0.2s ease;
	-o-transition:All 0.2s ease;
}
.pro-item:hover .title {
	-moz-transform:translateY(-4px));
	-webkit-transform:translateY(-4px);
	-o-transform:translateY(-4px);
	-ms-transform:translateY(-4px);
	transform:translateY(-4px);
}

/*================================================================================*/

.leaves-headline{ position:relative; text-align:center; color:#336600;}

.leaves-headline span{ 
	position:relative; 
	display:inline-block;
	padding:5px 10px;
	font-size:1.1em;
	padding-left:40px;
}

/* .leaves-headline span:before{
	position:absolute;
	z-index:1;
	top:-10px;
	left:0px;
	width:70px;
	height:50px;
	content:"";
	background:url(../images/news-dec3.png) no-repeat center;
	background-size:cover
} */

/*================================================================================*/

.download li { display:inline-block; margin-right:20px;}

.download a{
	position:relative;
	border:1px solid #999;
	color:#999;
	font-size:0.95em;
	padding:3px 1em;
	border-radius:3px;
}

.download a:hover{border-color:#336600; color:#336600;}

/*================================================================================*/

.page{
	margin:30px 0;
	text-align:center;
}

.page span{
	color:#336600;
	padding:0 5px;
	margin:0 3px;
	border-bottom:1px solid #336600;
}

.page a{
	display:inline-block;
	padding:3px 8px;
	color:#fff;
	background:#336600;
	border:1px solid #336600;
	line-height:1.1;
	border-radius:3px;
}
	
.page a:hover{ color:#336600; background:transparent;}