@charset "utf-8";

body , .wrapper{ color:#333; background:#fff;}


/*a 鏈結字*/
a { color:#333;}
a:hover, a:focus { color:#315944; text-decoration:none; }


/*圖片*/
.pic img{ width:100%; height:auto;}
.maxpic img{ max-width:100%; height:auto;}


/*方形圖設定*/
.item-thumb-frame { position: relative; display: block; width: 100%; overflow: hidden; }
.item-thumb { display: block; max-width: 100%; padding-bottom: 100%; }

.flex-container{ display: flex; flex-wrap:wrap; }


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

 
/*page 分頁*/
.page{
	margin: 30px 0 0px 0;
	font-size:0.75rem;
	text-align:center;
	color:#666;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #999;
	padding: 6px 6px;
	margin:0 3px;
	font-size:0.8rem;
	line-height:1.1;
	min-width:26px;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.page span{ 
	background:#6F273C;
	color:#fff; 
	border-color:#6F273C;
}

.page a{ color:#666; }
.page a:hover{ background:#333; color: #fff; border-color:#333; }


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

/*輪播-左右按鈕*/
.owl-nav-style .owl-next , .owl-nav-style .owl-prev{
	position: absolute;
	top:50%;
	width: 35px;
	height: 35px;
	margin-top:-20px;
	opacity:0;
	transition: all 0.2s ease-in-out;
}
.owl-nav-style .owl-prev { left: 0px; }
.owl-nav-style .owl-next{ right: 0px; }
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before , .owl-nav-style .owl-next:after{
	position:absolute;
	z-index:5;
	left:50%;
	margin-top:-6px;
	width:4px;
	height:16px;
	content:"";
	background:#fff;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:after{ bottom:50%; margin-bottom:-12px; }
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; margin-top:-12px; }
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:before{
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:after{
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.owl-nav-style:hover .owl-prev , .owl-nav-style:hover .owl-next{ opacity:0.8; }
.owl-nav-style .owl-prev:hover , .owl-nav-style .owl-next:hover{ opacity:1; }


/*輪播-底下圓圈*/
.owl-dots-style .owl-dots{ position:absolute; bottom:10px; left:1%; width:98%; z-index:3; text-align:right; padding:0 10px;}
.owl-dots-style .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-dots-style .owl-dots .owl-dot span {
	width:15px;
	height:15px;
	margin:0px 7px;
	background:#fff;
	border:3px solid #fff;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
}
.owl-dots-style .owl-dots .owl-dot.active span, .owl-dots-style .owl-dots .owl-dot:hover span { background:#EB6A26; border:3px solid transparent;}
@media (max-width:960px) { 
	.owl-nav-style .owl-prev { left: 0px; }
	.owl-nav-style .owl-next{ right: 0px; }
	
	.owl-dots-style .owl-dots{ bottom:5px; padding:0; line-height:1; }
	.owl-dots-style .owl-dots .owl-dot span { width:12px; height:12px; margin:0px 12px; border-width:2px; } 
}
 


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


/*回頂端按紐*/
.backtop-btn{
	position: fixed;
	z-index: 99;
	bottom: 75px;
	right: 15px;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	background:#12391D;
	border:3px solid rgba(255,255,255,0.5);
	padding:10px;
	
	opacity:0;
	transition:opacity 0.5s ease;
	-webkit-transition:opacity 0.5s ease;
	-moz-transition:opacity 0.5s ease;
	-o-transition:opacity 0.5s ease;
}
.backtop-btn img{ display:block; max-width:100%; height:auto; }
.backtop-btn:focus , .backtop-btn:hover{ color:#fff;}
.backtop-btn.show{ opacity:1; }
.backtop-btn:hover{ border-color: rgba(255,255,255,1); }



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


/*歡迎頁*/
.welcome-page{ 
	display: flex; 
	flex-wrap:wrap; 
	align-items:center; 
	width:100%;
	height:100%;
	min-height:100vh; 
	background:url(../images/banner-01.png) no-repeat center; 
	background-size:cover;
}

.language-line{ position:relative; /*display: flex; sflex-wrap:wrap;*/ }
.language-line:before{
	position:absolute;
	top:0;
	left:-1000px;
	width:1000px;
	height:32px;
	content:"";
	background:rgba(0,0,0,0.4); 
}
.language-btn , .enter-btn{
	position:relative;
	display:inline-block;
	line-height:1; 
	margin-right:10px; 
	background:rgba(0,0,0,0.4); 
	color:#fff;
	font-weight:bolder;
	text-align:center;
	height:32px;
	line-height:36px;
	
}
.language-btn{ padding:0 30px; font-size:1em; min-width:100px; }

.enter-btn{ letter-spacing:10px; padding:0 40px; min-width:220px; }
.enter-btn span{ display:block; }
.enter-btn .title{ font-size:1.3em; letter-spacing:10px; }
.enter-btn .subtitle{ position:absolute; bottom:-36px; right:0; color:#333; font-size:1.4em; letter-spacing:15px; }

.language-btn:focus , .enter-btn:focus{ background:rgba(0,0,0,0.4);  color:#fff; }
.language-btn:hover , .enter-btn:hover{ background:rgba(64,96,255,0.8);  color:#fff; }


.welcome-logo{ position:absolute; bottom:20px; left:50%; width:320px; margin-left:-160px; }
.welcome-logo img{ display:block; max-width:100%; height:auto; }





/*頁首*/
.header-top-wrap{ display: flex; flex-wrap:wrap; align-items:center; position:relative; background:url(../images/web-03.png) no-repeat center; background-size:cover; height:160px; }
.header-top-wrap:before{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:80px;
	margin-top:-50px;
	content:"";
	background:rgba(255,255,255,0.5);
}

.logo{ position:absolute; z-index:6; top:50%; left:50%; margin-left:-130px; margin-top:-45px; max-width:260px; }
.logo img{ display:block; max-width:100%; height:auto; }

.language-wrap{ position:relative; z-index:5; width:100%; background:rgba(255,255,255,0.5); margin-top:10px; text-align:right; padding:0 10px; }

.language-wrap a{ display:inline-block; color:rgba(66,66,66,0.6); text-align:center; padding:2px 10px; font-size:0.9em; letter-spacing:0px; font-weight:600; }
.language-wrap a:focus{ background:transparent;  color:#424242; }
.language-wrap a:hover , .language-wrap a.active{ background:rgba(66,66,66,0.3);  color:#fff; }


/*desktop選單*/
.header-bottom-wrap{ position:relative; border-top:3px solid rgba(255,255,255,0.5); background:#353535; margin-top:7px; }
.header-bottom-wrap:before{
	position:absolute;
	top:-10px;
	left:0;
	width:100%;
	height:7px;
	content:"";
	background:#555656;
}

.header-bottom{ text-align:center; }
.menu-list li{ display:inline-block; vertical-align:middle; margin:0 20px; }
.menu-list li a{ 
	position:relative; 
	display:block; 
	color:#fff; 
	padding:4px 10px; 
	letter-spacing:1px; 
	padding-left:27px;
	font-size:1.3em;
}
.menu-list li a:before{
	position:absolute;
	top:50%;
	left:0;
	width:24px;
	height:24px;
	margin-top:-14px;
	content:"";
	background:url(../images/web-02.png) no-repeat center;
	background-size:cover;
}
.menu-list li a:hover , .menu-list li.active a{ color:rgba(197,221,142,0.8); }








/*小螢幕時選單鈕*/
.menu-trigger{ display:none; padding:9px; }
.menu-trigger-icon , .menu-trigger-txt{ display:inline-block; vertical-align:middle; line-height:1; }
.menu-trigger-icon{
	position:relative;
	width:30px;
	height:30px;
	/*background:rgba(255,255,255,0.2);*/
	
	/*-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;*/
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	left:10%;
	width:80%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#fff; 
	
	transition:transform 0.5s ease;
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 0.5s ease;
	-o-transition:transform 0.5s ease;
}
.menu-trigger-icon:before{ top:25%; }
.menu-trigger-icon:after{ top:75%; }

.menu-trigger-icon .iocn-line{
	position:absolute;
	top:50%;
	left:10%;
	width:80%;
	height:3px;
	margin-top:-2px;
	background:#fff;
}
.menu-trigger.opened { /*background:#FF8B00;*/ }
.menu-trigger.opened .menu-trigger-icon:before{
	-webkit-transform: rotate(-45deg) translate(-5px, 6px) ;
    transform: rotate(-45deg) translate(-5px, 6px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	-webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
}
.menu-trigger.opened .menu-trigger-icon .iocn-line{ opacity:0; }

.menu-trigger-txt{ color:#fff; font-weight:bolder; font-size:1.2em; }

.header-bottom-wrap.opened{ background:#FF8B00; }





/*mobile選單*/
.menu-toggle-content{ display:none;  padding-bottom:30px; }
.menu-mobile-list{ margin-top:5px; }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#333; 
	display:block;
	font-size:1rem;
	padding:10px 20px 10px 10px;
	border-bottom:1px solid #d6d6d6;
}

.menu-mobile-list li ul{ background:#fff; }


/*第一層*/
.menu-mobile-list > li{  font-size:1rem; }
.menu-mobile-list > li > a{ font-weight: 600; }

/*第二層*/
.menu-mobile-list > li > ul{
	display:none;
	position:relative;
	top:0;
	left:0;
	width:100%;
	padding-left:16px;
}

/*第三層*/
.menu-mobile-list > li > ul li ul{
	display:none; 
	position:relative;
	top:0;
	left:0;
	width:100%;
	padding-left:16px;
}
/*下一層之按鈕*/
.submenu-button{
	position:absolute;
	z-index:3;
	top:20px;
	right:20px;
	width:11px;
	height:10px;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:0;
	right:0;
	width:6px;
	height:6px;
	border-right:2px solid #666; 
	border-bottom:2px solid #666; 
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.menu-mobile-list li.current{ background:transparent; color:#FF8B00; }
.menu-mobile-list li.current > a{ color:#FF8B00; }
.menu-mobile-list li.current > a .submenu-button:before{ border-right-color:#FF8B00; border-bottom-color:#FF8B00; }

.menu-mobile-list > li.current{/* background:#FF8B00; color:#fff; */}
.menu-mobile-list > li.current > a{ color:#FF8B00; }
.menu-mobile-list > li.current > a .submenu-button:before{ border-right-color:#FF8B00; border-bottom-color:#FF8B00; }




/*頁尾*/
.footer-top-wrap{ position:relative; background:#12391D; padding-top:20px;}
.footer-top-wrap:before{
	position:absolute;
	top:5px;
	left:0;
	width:100%;
	height:3px;
	content:"";
	background:rgba(255,255,255,0.5);
}
.social-list{ display:block; width:100%; text-align:right; }
.social-list li{ display:inline-block; width:30px;  margin:3px 6px; }
.social-list li img{ display:block; max-width:100%; height:auto; }
.social-list li:hover{ opacity:0.8; }


.footer-bottom-wrap{
	background:url(../images/web-04.png) no-repeat center;
	background-size:cover;
	padding:25px 0;
}
.footer-bottom{ background:rgba(0,0,0,0.5); }

.footer-content{ display: flex; flex-wrap:wrap; align-items:flex-end; padding:5px 0; }
.footer-content-left{ width:50%; }
.footer-content-right{ width:50%; text-align:right; }

.footer-content , .footer-content a{ color:rgba(255,255,255,0.7); }
.footer-content a:hover{ color:#fff; }

.web-copyright{ font-size:0.9em; }
.footer-info-list{ position:relative; font-size:0.9em; }
.footer-info-list li span{ display:inline-block; margin-right:5px; }

.web-designer{ font-size:0.8em; }




.main-bg{
	background-image:url(../images/web-11.png) , url(../images/web-12.png);
	background-repeat:no-repeat,no-repeat;
	background-position:top left , bottom right;
	background-size:contain , contain;
}


/*主內容區-左右內容*/
.content-cols-gp{ display: flex; flex-wrap:wrap; margin-bottom:60px; }
.content-left-side{ width:25%; width:300px; margin-right:45px; }
.content-right-side{ width:70%; width: calc(100% - 345px); min-height:900px; }



/*左側分類標題*/
.sidebar-heading{
	position:relative;
	background:#315944;
	color:#fff;
	text-align:center;
	padding:10px 25px;
	font-size:1.3em;
}
.sidebar-heading:before{
	position:absolute;
	bottom:10px;
	left:0;
	width:100%;
	height:4px;
	content:"";
	background:rgba(255,255,255,0.7);
}
.sidebar-heading .icon{ position:relative; display:block; margin:20px auto 5px auto;}
.sidebar-heading .icon:before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:4px;
	content:"";
	background:#fff;
}
.sidebar-heading .icon img{ display:block; max-width:100%; height:auto; }
.sidebar-heading .title{ display:block; width:100%; background:#fff; color:#315944; font-weight:600; font-size:1.2em; margin-bottom:30px; }


/*搜尋區塊*/
.search-box{
	position:relative;
	display:inline-block;
	width:100%;
	padding-right:45px;
	border:1px solid #367245;
}
.search-input , .search-btn{ 
	line-height:1; 
	border-width:0px;
	border:1px solid transparent;
	border-radius:0px;
}
.search-input{
	background:#ffffff;
	width:100%;
	padding:0 10px;
	font-size:0.9em;
	color:#333;
	height:46px; 
}
/*搜尋按鈕*/
.search-btn{
	position:absolute; 
	top:5px; 
	right:3px;
	background:rgba(54,114,69,0.4);
	cursor:pointer;
	padding:0 5px;
	width:36px;
	height:36px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.search-input:focus{ border:1px solid transparent; }
.search-btn:hover{ opacity:0.8; }



.side-nav-area{ 
	position:relative; 
	padding:20px 0 90px 0; 
	background:#C5DD8E url(../images/web-07.png) no-repeat bottom;
	background-size:100% auto;
	margin-bottom:45px;
}

/*左側分類*/
.mtree li{ position:relative; }
.mtree li a{ position:relative; display:block; padding:13px 0px;  }

/*第一層*/
.mtree > li > a{ font-weight:600; font-size:1.1em; }

/*第二層*/
.mtree li li a{ padding-left:20px; font-size:0.95em;}

/*第三層*/
.mtree li li li a{ padding-left:40px;}

/*有下一層選項的項目設定*/
.mtree li.mtree-node > a:before{
	position:absolute;
	z-index:4;
	top:50%;
	right:15px;
	width:8px;
	height:8px;
	border-right:2px solid #fff; 
	border-top:2px solid #fff;
	margin-top:-5px;
	content:"";
	
	transition:transform 0.5s ease;
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 0.5s ease;
	-o-transition:transform 0.5s ease;

	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.side-nav li.mtree-node.mtree-open > a:before{
	transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform:rotate(135deg);
}

.side-nav{ }
.side-nav li{ border-bottom:2px solid #315944;  }
.side-nav li a{
	background:rgba(49,89,68,0.5); 
	padding:15px 35px 11px 10px; 
	line-height:1.4; 
	color:#fff;
	font-weight:600;
}
.side-nav li a:hover{ background:#315944; color:#fff; }

.side-nav li ul > li a{ border-bottom-width:0px;  }
.side-nav li ul li a{ padding-top:15px; padding-bottom:15px; }


/*左側分類 開啟有下分類之項目 箭頭改變顏色*/
.side-nav li.mtree-node.mtree-open{ background:#fff;  }
.side-nav li.mtree-node.mtree-open a{ background:rgba(197,221,142,0.5);  color:#315944; border-left:8px solid rgba(49,89,68,0.5); }
.side-nav li.mtree-node.mtree-open a:hover{ background:rgba(142,142,142,0.3); }
.side-nav li.mtree-node.mtree-open > a{ background:#fff; border-left-color:#fff; }
.side-nav li.mtree-node.mtree-open > a:hover{ background:#fff; }




/*導覽路徑*/
.breadcrumbs{
	position:relative;
	font-size:0.95em;
	line-height:1.5;
	text-align:left;
	letter-spacing:0;
	margin:10px 0 20px 0;
	padding-left:29px;
}
.breadcrumbs:before{
	position:absolute;
	top:2px;
	left:0;
	width:22px;
	height:22px;
	content:"";
	background:url(../images/web-06.png) no-repeat center;
	background-size:cover;
}
.breadcrumbs , .breadcrumbs a{ color:#AAAAAA; font-weight:600; }
.breadcrumbs a:hover{ color:rgba(49,89,68,0.7);  }
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{ content:"/"; margin-left:5px; font-size:10px; }
.breadcrumbs span:last-child{ font-size:1.1em; color:rgba(49,89,68,0.7); }
.breadcrumbs span:last-child:after{display:none;}



/*頁面大標*/
.page-heading{ position:relative; background:rgba(173,206,51,0.5); text-align:center; padding-top:12px; margin-bottom:30px; }
.page-heading:before{
	position:absolute;
	top:5px;
	left:0;
	width:100%;
	height:4px;
	content:"";
	background:rgba(255,255,255,0.5);
}
.page-heading .title{ display:block; font-size:1.3em; font-weight:600; color:rgba(16,57,29,0.6); }




/*影片*/
.video{ position:relative; text-align:center; margin:30px 0; }
.video iframe{ max-width:100%;}


/*檔案下載*/
.download-line{ text-align:center; }
.download-btn{
	position:relative;
	display:inline-block;
	background:#666;
	padding:8px 30px 8px 20px;
	margin:10px; 
	line-height:1;
	font-size:0.95em;
	font-weight:600;
	color:#fff;
}
.download-btn:before{
	position:absolute;
	z-index:1;
	top:50%;
	right:10px;
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:-8px;
	content:"";
	background:url(../images/icon-arrow-bottom.png) no-repeat center;
	background-size:70% 70%;
} 
.download-btn:hover{ background:#315944; color:#fff; }



/*返回按鈕列*/
.pageback-line{margin:30px 0 60px 0; text-align:center; }
.pageback-btn span{ 
	position:relative; 
	display:inline-block; 
	vertical-align:bottom; 
	padding-left:16px; 
	color:#666; 
	font-weight:600; 
	font-size:0.95em; 
	line-height:1; 
}
.pageback-btn span:before{
	position:absolute;
	top:50%;
	left:0;
	width:14px;
	height:14px;
	margin-top:-7px;
	content:"";
	background:#666 url(../images/icon-arrow-left.png) no-repeat center;
	background-size:70% 70%;
}
.pageback-btn:hover span{ color:#315944; }
.pageback-btn:hover span:before{ background-color:#315944; }





/*詳細頁縮圖*/
.thumbnail-area{ margin:20px auto; text-align:center;}
.thumbnail-list{ display: flex; flex-wrap:wrap; }
.thumbnail-list li{ border:3px solid #eee; margin:10px 0; }
.thumbnail-list li a{ display:block; }
.thumbnail-list .item-thumb-frame .item-thumb { padding-bottom:70%; }
.thumbnail-list li:hover{ border-color:rgba(173,206,51,0.6); }

.thumbnail-list.three-cols li{ width:32.33333%; margin-left:0.5%; margin-right:0.5%; }
.thumbnail-list.five-cols li{ width:19%; margin-left:0.5%; margin-right:0.5%; }




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



/*商品介紹*/
.product-list{ display: flex; flex-wrap:wrap; }
.product-list li{  position:relative; width:31%; margin-right:3.5%; margin-bottom:45px; }
.product-list li:nth-child(3n){ margin-right:0; }

.product-item{ position:relative;  border-bottom:7px solid rgba(49,89,68,0.6); }
.product-item:before{
	position:absolute;
	bottom:-5px;
	left:0;
	width:100%;
	height:3px;
	content:"";
	background:rgba(255,255,255,0.6);
}
.product-item a{ position:relative; display:block; width:100%; height:100%; padding-bottom:10px; }
.product-item a:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:linear-gradient(top,transparent , rgba(18,87,59,0.5) );
	background:-moz-linear-gradient(top,transparent , rgba(18,87,59,0.5) );
	background:-webkit-linear-gradient(top,transparent , rgba(18,87,59,0.5) );
	background:-o-linear-gradient(top,transparent , rgba(18,87,59,0.5) );
	background:-ms-linear-gradient(top,transparent , rgba(18,87,59,0.5) );
	opacity:0;
	
	transition:background 0.5s ease;
	-webkit-transition:background 0.5s ease;
	-moz-transition:background 0.5s ease;
	-o-transition:background 0.5s ease;
}
.product-item-title{ padding:6px 10px; background:#315944; color:#fff; text-align:center; font-size:1.1em; font-weight:600; }
.product-item-photo { border-bottom:2px solid #315944; margin-bottom:10px; }
.product-item-desc{ position:relative; font-size:0.95em; height:55px; overflow:hidden;  }

.product-item-more{ position:absolute; z-index:3; bottom:15px; left:0; width:100%; text-align:center; color:#fff; font-weight:600; opacity:0; }

.product-item a:hover:before{ opacity:1; }
.product-item a:hover .product-item-more{ opacity:1; }
.product-item a:hover .product-item-desc{ color:#fff; }



/*產品詳細*/
.product-view-name{ padding:6px 10px; background:#315944; color:#fff; text-align:center; font-size:1.1em; font-weight:600; margin-bottom:30px;}

.page-heading + .product-view-name{ margin-top:-15px; }


/*商品介紹詳細*/
.product-view-gp{ display: flex; flex-wrap:wrap; margin-bottom:45px; }
.pro-view-photos{ width:49%; margin-right:5%; }
.pro-right-info{ position:relative; width:44%; }

.sync-slide{ margin-bottom:20px; border:1px solid #ccc; border-bottom:4px solid #315944; }
.sync-thum{ margin-top:10px; }
.sync-thum .owl-item{ cursor:pointer; border:1px solid #ccc; border-bottom:4px solid #315944;  }
.sync-thum .owl-item:hover{ opacity:0.8;}

.sync-thum.owl-nav-style .owl-prev { left: -40px; }
.sync-thum.owl-nav-style .owl-next{ right: -40px; }
.sync-thum.owl-nav-style .owl-prev:before , .sync-thum.owl-nav-style .owl-prev:after , 
.sync-thum.owl-nav-style .owl-next:before , .sync-thum.owl-nav-style .owl-next:after{
	background:#315944;
}

.sync-thum .owl-item.current{ border-bottom-color:#C5DD8E; cursor:default; }
.sync-thum:hover .owl-prev.disabled , .sync-thum:hover .owl-next.disabled{ opacity:0.3; cursor:default; }
.sync-thum.owl-nav-style .owl-prev.disabled:hover:before , .sync-thum.owl-nav-style .owl-prev.disabled:hover:after , 
.sync-thum.owl-nav-style .owl-next.disabled:hover:before , .sync-thum.owl-nav-style .owl-next.disabled:hover:after{ background:#315944; }


.pro-desc-title{ position:relative; padding-left:35px; font-size:1.3em; color:#10391D; font-weight:600; margin-top:10px; margin-bottom:20px; }
.pro-desc-title:before{
	position:absolute;
	top:50%;
	left:0;
	width:30px;
	height:30px;
	margin-top:-18px;
	content:"";
	background:url(../images/web-20.png) no-repeat center;
	background-size:cover;
}

.pro-description{ font-size:0.95em; line-height:2;}

.product-detail-heading{ position:relative; background:#315944; text-align:center; padding-top:12px; margin-bottom:30px; }
.product-detail-heading:before{
	position:absolute;
	top:5px;
	left:0;
	width:100%;
	height:4px;
	content:"";
	background:rgba(255,255,255,0.5);
}
.product-detail-heading .title{ display:block; font-size:1.3em; font-weight:600; color:#fff; }




/*最新消息*/
.news-item a{ display:block; position:relative; padding-left:140px; margin-bottom:45px }
.news-photo{ position:absolute; top:0; left:0; width:140px; border:1px solid #ccc; }
.news-item-content{ position:relative; height:140px; }
.news-item-content:before{
	display:none; 
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
	width:100%;
	height:110px;
	content:"";
	background:url(../images/web-23.png) no-repeat center bottom;
	background-size:100% auto;
}

.news-date{ display:block; font-size:0.9em; color:rgba(49,89,68,0.5); padding-left:20px; border-bottom:1px solid #ccc; margin-bottom:10px; font-weight:600; }
.news-name{
	position:relative;
	z-index:10;
	font-size:1.1em;
	padding-left:20px;
	
	overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.news-introduction{ font-size:0.95em; padding:13px 0 12px 20px; height:72px; overflow:hidden; background:rgba(197,221,142,0.3); color:#666; }

.news-more-btn{ display:none; position:absolute; z-index:5; bottom:5px; right:15px; color:#fff; font-weight:600; font-size:1.1em;}

.news-item a:hover .news-introduction{ display:none; }
.news-item a:hover .news-more-btn{ display:block; }
.news-item a:hover .news-item-content:before{ display:block; }
.news-item a:hover .news-name{ font-weight:600; color:#000; }




/*最新消息詳細*/
.news-view-date{ text-align:center; margin-bottom:20px; font-size:0.9em; font-weight:600; color:#666; }
.page-heading + .news-view-date{ margin-top:-20px; }




/*品質殊榮*/
.honor-list{ display: flex; flex-wrap:wrap; }
.honor-list li{  position:relative; width:48%; margin-right:4%; margin-bottom:45px; }
.honor-list li:nth-child(2n){ margin-right:0; }

.honor-item-photo{ position:relative; }
.honor-item-photo:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(173,204,168,0.5);
	opacity:0;
	
	transition:background 0.5s ease;
	-webkit-transition:background 0.5s ease;
	-moz-transition:background 0.5s ease;
	-o-transition:background 0.5s ease;
}

.honor-item-title{ background:rgba(49,89,68,0.5); color:#fff; text-align:center; padding:6px 10px; font-weight:600; }

.honor-item a:hover .honor-item-photo:before{ opacity:1; }
.honor-item a:hover .honor-item-title{ background:rgba(49,89,68,1); }




/*聯絡我們*/
.contact-heading{ position:relative; padding-left:32px; font-size:1.5em; color:#27AB38; font-weight:600; margin:25px 0; }
.contact-heading:before{
	position:absolute;
	top:50%;
	left:0;
	width:26px;
	height:26px;
	margin-top:-15px;
	content:"";
	background:url(../images/web-06.png) no-repeat center;
	background-size:cover;
}


.contact-gp{ display: flex; flex-wrap:wrap; align-items:center; margin:0 auto 45px auto; padding-left:40px; }
.contact-gp-left{ width:50%; }
.contact-gp-right{ width:45%; margin-right:5%;  }

.contact-info-list li{ position:relative; margin-bottom:15px; font-size:1.1em; padding-left:100px; min-height:30px;  }
.contact-info-list li .title{ position:absolute; top:0; left:0; width:98px; color:#315944; font-weight:600; }
.contact-info-list li .title:after{ position:absolute; top:0; right:0; content:"：";}

.contact-logo{ max-width:400px; margin:0 auto; }
.contact-logo img{ display:block; max-width:100%; height:auto; }



.contact-form-box{ padding-left:40px; margin-bottom:45px; }
.contact-form-note{ margin-bottom:15px; font-size:1em; color:#231815; }

/* == 表單 套件組合 ======== */
.input-group {
	display: flex; 
	flex-wrap:wrap;
	align-items:center;
	width:100%; 
	color:#555555; 
	margin-bottom:0;
	padding-right:10px;
	margin-bottom:25px;
}
.input-group.half-width{ width:50%; } 

.require-mark{ color:red; font-size:0.85em; }
.input-title{
	align-self: baseline;
	width:98px;
	font-size:1em;
	text-align: left;
	padding-top:8px;
	color:#315944;
	height:31px;
	font-weight:600;
}


.input-control {
	width: 100%;
	width:calc(100% - 98px);
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	border:1px solid #ccc;
}
.input-remind{ font-size:0.8em; color:#666; }

.input-group textarea{ width: 100%; }

.form-bt-line{ width:100%; text-align:center; }

input.fbtn{
	position:relative;
	z-index:2;
	line-height:1; 
	cursor:pointer;
	color:#12391D;
	font-size:1.2em;
	font-weight:600;
	background:transparent;
	border:1px solid transparent;
	padding:14px 16px 8px 16px;
}
.fbtn-outset{
	position:relative;
	display:inline-block;
	position:relative;
	margin:5px 10px;
	
	background:rgba(39,171,56,0.5);
	/*cursor:pointer;*/
}
.fbtn-outset:before{
	position:absolute;
	top:3px;
	left:0;
	width:100%;
	height:3px;
	content:"";
	background:rgba(255,255,255,0.5);
}

.fbtn-outset:hover{ background:#12391D; }
.fbtn-outset:hover input.fbtn{ color:#fff; }