@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; align-items:center; }


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

 
/*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:#FDB813;
	color:#fff; 
	border-color:#FC9315;
}

.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:2px solid #FC9315;
	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:#FDB813; 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:#6699AD;
	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); }



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

.header-top-wrap{ background:#6699ad; padding:40px 4% 30px 4%; }
.header-top-flex{ display: flex; flex-wrap:wrap; align-items:center; max-width:1440px; margin:0 auto;  }
.header-top-left{ width:25%; margin-right:5%; }
.header-top-right{ position:relative; width:70%; text-align:right;}

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

.menu-list{ }
.menu-list li{ display:inline-block; vertical-align:top; text-align:right; width:130px; margin-left:15px;}
.menu-list li a{ display:block; }
.menu-list li.search{ width:220px; }

.menu-icon{ display:block; max-width:130px;}
.menu-icon img{ display:block; max-width:100%; height:auto; }

.menu-text{ display:inline-block; color:#fff; font-weight:bolder; font-size:1.1em; margin-top:6px; }

.menu-list li a:hover .menu-text{ color:#FDB813; }



/*搜尋區塊*/
.search-box{
	position:relative;
	display:inline-block;
	width:80%;
	padding-right:45px;
	border:1px solid #fff;
	margin-top:2px;
	background:rgba(255,255,255,1);
}
.search-input , .search-btn{ 
	line-height:1; 
	border-width:0px;
	border:1px solid transparent;
	border-radius:0px;
}
.search-input{
	background:transparent;
	width:100%;
	padding:0 10px;
	font-size:0.9em;
	color:#333;
	height:26px; 
}
.search-input::-webkit-input-placeholder{ color:#fff; font-size:0.95em;}
.search-input::-moz-placeholder{ color:#fff; font-size:0.95em;}
.search-input::-ms-input-placeholder{ color:#fff; font-size:0.95em;}
.search-input::-moz-placeholder{ color:#fff; font-size:0.95em;}

/*搜尋按鈕*/
.search-btn{
	position:absolute; 
	top:0px; 
	right:0;
	/*background:rgba(54,114,69,0.4);*/
	cursor:pointer;
	padding:0 5px;
	width:29px;
	height:29px;
	
	background:linear-gradient( 45degree , #fff , rgba(248,255,204,1) , rgba(135,135,135,1) );
	background:-moz-linear-gradient( 45degree , #fff , rgba(248,255,204,1) , rgba(135,135,135,1) );
	background:-webkit-linear-gradient( 45degree , #fff , rgba(248,255,204,1) , rgba(135,135,135,1) );
	background:-o-linear-gradient( 45degree , #fff , rgba(248,255,204,1) , rgba(135,135,135,1) );
	background:-ms-linear-gradient( 45degree , #fff , rgba(248,255,204,1) , rgba(135,135,135,1) );
}
.search-input:focus{ border:1px solid transparent; }
.search-btn:hover{ background:#fff; }


.mobile-search-box{ display:none; background:rgba(255,255,255,0.3); }
.mobile-search-box .search-input{ height:40px; }
.mobile-search-box .search-btn{ width:40px; height:40px; }




/*小螢幕時選單鈕*/
.menu-trigger{ display:none; position:absolute; top:50%; right:0; margin-top:-22px; }
.menu-trigger-icon , .menu-trigger-txt{ display:inline-block; vertical-align:middle; line-height:1; }
.menu-trigger-icon{
	position:relative;
	width:44px;
	height:44px;
	background:#fff;
	/*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:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#6699ad; 
	
	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:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	background:#6699ad;
}
.menu-trigger.opened .menu-trigger-icon { background:#FF9C43; }
.menu-trigger.opened .menu-trigger-icon:before{
	background:#fff;
	-webkit-transform: rotate(-45deg) translate(-8px, 8px) ;
    transform: rotate(-45deg) translate(-8px, 8px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	background:#fff;
	-webkit-transform: rotate(45deg) translate(-7px, -7px) ;
    transform: rotate(45deg) translate(-7px, -7px) ;
}
.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-top:10px;  padding-bottom:30px; background:#5B899B; }
.menu-mobile-list{ margin-top:5px; }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#fff; 
	display:block;
	font-size:1rem;
	padding:10px 20px 10px 10px;
	border-bottom:1px solid #fff;
}

.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 #fff; 
	border-bottom:2px solid #fff; 
	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{ background:#6699AD; }

.contact-logo{ max-width:320px; margin:0px auto; padding-top:40px; margin-bottom:30px; }
.contact-logo img{ display:block; max-width:100%; height:auto; }

.footer-top-flex{ display: flex; flex-wrap:wrap; max-width:900px; margin:0 auto 30px auto; align-items:flex-start; }
.footer-top-left , .footer-top-center , .footer-top-right{ padding:0 20px; }
.footer-top-left{ width:40% }
.footer-top-center{ width:20%; }
.footer-top-right{ width:40%; }

.footer-qrcode{ max-width:120px; margin:0 auto; }
.footer-qrcode img{ display:block; max-width:100%; height:auto; }

.social-list{ display:block; margin-top:10px; text-align:center; }
.social-list li{ display:inline-block; width:40px;  margin:3px 6px; }
.social-list li img{ display:block; max-width:100%; height:auto; }
.social-list li:hover{ opacity:0.8; }

.footer-info-list{ display:inline-block; text-align:left; }
.footer-info-list li{ margin-bottom:10px; }
.footer-info-list li , .footer-info-list li a{ color:#fff; }
.footer-info-list li a:hover{ color:#FF9C43; }
.footer-info-list li .title{ position:relative; display:inline-block; width:50px; text-align:left; }
.footer-info-list li .title:after{ position:absolute; top:0; right:0; content:"：";}

.footer-map iframe{ min-height:150px; }

.footer-bottom-wrap{ background:#3D707F; text-align:center; padding:10px 0;}

.web-copyright{ font-size:0.9em; color:#fff; }
.web-copyright span{ display:inline-block; }

.web-designer{ position:absolute; bottom:0; right:0; font-size:0.75em; }
.web-designer , .web-designer a{ color:rgba(255,255,255,0.5); }
.web-designer a:hover{ color:#FF9C43; }




.main-bg{ position:relative; z-index:2; min-height:300px; /*background:url(../images/web-32.png) no-repeat top center; background-size:100% auto;*/ }
.main-bg:before , .main-bg:after{ 
	position:absolute;
	z-index:-1;
	top:0;
	width:150px;
	height:100%;
	content:"";
}
.main-bg:before{ left:0; background:url(../images/web-20.png) repeat-y center top; background-size:100% auto;  }
.main-bg:after{  right:0; background:url(../images/web-21.png) repeat-y center top; background-size:100% auto;  }

.main-content{ max-width:1050px; margin:0 auto; padding-bottom:30px; }



/*導覽路徑*/
.breadcrumbs{
	line-height:1.5;
	text-align:right;
	letter-spacing:0;
	margin:10px 0 20px 0;
}
.breadcrumbs , .breadcrumbs a{ color:#333; }
.breadcrumbs a:hover{ color:#FDB813; }
.breadcrumbs span{margin-right:0px; font-size:0.8em;}
.breadcrumbs span:after{ content:"/"; margin-left:5px; font-size:0.7em; }
.breadcrumbs span:last-child:after{display:none;}
.breadcrumbs span:last-child{ font-size:1em; font-weight:600; }


/*分類*/
.category-area{ margin:10px 0 30px 0; }
.category-list li{ display:inline-block; margin:5px 20px 5px 0; }
.category-list li a{
	position:relative;
	display:block; 
	background:url(../images/web-22.png) no-repeat center;
	background-size:cover;
	padding:10px 20px; 
	min-width:170px; 
	text-align:center;
	color:#4F4544;
	font-weight:600;
	font-size:1.2em;
	letter-spacing:3px;
}
.category-list li a:before , .category-list li a:after{
	position:absolute;
	left:0;
	width:100%;
	height:5px;
	content:"";
	background:url(../images/web-23.png) no-repeat;
	background-size:cover;
	opacity:0;
} 
.category-list li a:before{ top:0; }
.category-list li a:after{ bottom:0;} 

.category-list li a:hover:before , .category-list li a:hover:after , 
.category-list li.active a:before , .category-list li.active a:after{ opacity:1; }

.category-list li.active a{ cursor:default; }


.category-heading{ margin:30px 0 10px 0; font-size:1.7em; color:#4F4544; font-weight:600; text-align:center;  }




/*詳細頁縮圖*/
.thumbnail-area{ margin:20px auto; text-align:center;}
.thumbnail-list{}
.thumbnail-list li{ margin:10px 0; text-align:center; }
.thumbnail-list li a{ display:inline-block; }
.thumbnail-list li img{ display:block; max-width:100%; height:auto; }
.thumbnail-list li:hover{ opacity:0.8; }



/*影片*/
.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:#4F4544; 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:#4F4544; }
.pageback-btn:hover span:before{ background-color:#4F4544; }















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



/*首頁-關於我們*/
.banner img{ display:block; max-width:100%; height:auto; }


.idx-about-wrap{ position:relative; z-index:2; min-height:400px; padding:50px 0 20px 0; }
.idx-about-wrap:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:#fff url(../images/web-12.png) no-repeat left top; 
	background-size:auto 100%;
}
.idx-about{ width:50%; /*min-width:500px; max-width:650px;*/ padding-right:30px; margin-left:auto; }

.idx-about-heading{ margin-bottom:20px; }
.idx-about-heading .title , .idx-about-heading .subtitle{ display:inline-block; vertical-align:middle; }
.idx-about-heading .title img , .idx-about-heading .subtitle img{ display:block; max-width:100%; height:auto; }
.idx-about-heading .title{ width:200px; margin-right:20px; }
.idx-about-heading .subtitle{ width:300px; }

.idx-about-desc{ padding-left:40px; color:#515253; font-weight:600; }

.idx-about-more{ text-align:right; margin-top:20px; }
.idx-about-more a{ display:inline-block; color:#595959; font-weight:600; }
.idx-about-more a:hover{ color:#FF9C43; }




/*首頁-熱門產品*/
.idx-product-wrap{ position:relative; z-index:2; min-height:550px; padding:60px 0 20px 0; }
.idx-product-wrap:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:#fff url(../images/web-13.png) no-repeat right top; 
	background-size:auto 100%;
}
.idx-product{ width:65%; padding-left:60px; }

.idx-product-heading{ margin-bottom:20px; }
.idx-product-heading .title { display:block; width:200px; margin:0 auto; }
.idx-product-heading .title img { display:block; max-width:100%; height:auto; }


.idx-item-slider{ padding:0 50px; margin-top:50px; }

/*左右鍵*/
.idx-item-slider .owl-nav-style .owl-next , .idx-item-slider  .owl-nav-style .owl-prev{
	width: 32px;
	height: 50px;
	margin-top:-25px;
	opacity:1;
}
.idx-item-slider .owl-nav-style .owl-prev { left:-50px; }
.idx-item-slider .owl-nav-style .owl-next{ right: -50px; }

/*左右鍵中箭頭*/
.idx-item-slider .owl-nav-style .owl-prev:before , .idx-item-slider .owl-nav-style .owl-prev:after , 
.idx-item-slider .owl-nav-style .owl-next:before , .idx-item-slider .owl-nav-style .owl-next:after{
	margin-top:-9px;
	width:3px;
	height:36px;
	background:#686868;
}
.idx-item-slider .owl-nav-style .owl-prev:before , .idx-item-slider .owl-nav-style .owl-next:after{ margin-bottom:-30px; }
.idx-item-slider .owl-nav-style .owl-prev:after , .idx-item-slider .owl-nav-style .owl-next:before{ margin-top:-30px; }

/*左右鍵 鼠標滑過之底色*/
.idx-item-slider .owl-nav-style .owl-prev:hover , .idx-item-slider .owl-nav-style .owl-next:hover{ /*background:#F06F38;*/ }

/*左右鍵 鼠標滑過之箭頭變化*/
.idx-item-slider .owl-nav-style .owl-prev:hover:before , .idx-item-slider .owl-nav-style .owl-prev:hover:after , 
.idx-item-slider .owl-nav-style .owl-next:hover:before , .idx-item-slider .owl-nav-style .owl-next:hover:after{ background:#FF9C43; }

/*左右鍵 無下一張或上一張之變淡提示*/
.idx-item-slider .owl-nav-style .owl-prev.disabled , .idx-item-slider .owl-nav-style .owl-next.disabled{ opacity:0; cursor:default; }
.idx-item-slider .owl-nav-style .owl-prev.disabled:hover:before , .idx-item-slider .owl-nav-style .owl-prev.disabled:hover:after ,
.idx-item-slider .owl-nav-style .owl-next.disabled:hover:before , .idx-item-slider .owl-nav-style .owl-next.disabled:hover:after{ background:#686868; }

.idx-item-photo{ 
	border:1px solid #ccc;
	background:#fff;
	transition:border-color 0.5s ease;
	-webkit-transition:border-color 0.5s ease;s
	-moz-transition:border-color 0.5s ease;
	-o-transition:border-color 0.5s ease;
}
.idx-item-title{ margin-top:10px; font-size:0.95em; font-weight:600; text-align:center; }
.idx-item-title a{ color:#898989; }
.idx-item-title a:hover{ color:#FF9C43; }
.idx-item-photo:hover{ border-color:#FF9C43; }





/*最新消息*/
.news-item{ border-bottom:1px solid rgba(91,45,4,0.5); margin-bottom:10px; }
.news-date{ 
	position:relative; 
	display:block;
	width:120px;
	background:rgba(201,219,226,0.8); 
	color:rgba(94,94,94,0.8); 
	font-size:0.85em; 
	padding:6px 25px 4px 10px; 
	line-height:1;
}
.news-date:before{
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	content:"";
	border-top:22px solid #fff;
	border-left:15px solid transparent;
}

.news-name a{ 
	position:relative; 
	z-index:2; 
	display:block; 
	color:#595959; 
	font-size:1em; 
	padding:10px 10px 20px 10px;
	
	overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.news-name a:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(102,153,173,0.2) url(../images/web-26.png) no-repeat right center;
	background-size:auto 100%;
	
	opacity:0;
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.news-name a:hover:before{ opacity:0.7; }



/*最新消息詳細*/
.news-view-name{
	color:rgba(30,26,26,0.7);
	font-weight:600; 
	font-size:1.2em;
	text-align:center;
	padding:9px;
	background:url(../images/web-27.png) no-repeat bottom center; background-size:cover;
	margin-bottom:25px;
}




/*商品介紹*/
.product-cols-gp{ display: flex; flex-wrap:wrap; margin:30px 0; }
.product-left-side{ width:24%; margin-right:3%; }
.product-right-side{ width:73%; }


.side-nav-heading{ position:relative; margin-top:10px; margin-bottom:10px; }
.side-nav-heading .title{
	position:relative; 
	display:block;
	background:#3D707F; 
	color:#fff; 
	font-size:1.6em; 
	padding:12px 25px 6px 10px; 
	line-height:1;
	font-weight:600;
	text-align:center;
	letter-spacing:3px;
}
.side-nav-heading .title:before{
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	content:"";
	border-top:50px solid #fff;
	border-left:30px solid transparent;
}

.side-nav-heading .subtitle{
	position:absolute;
	z-index:-1;
	top:-46px;
	left:10px;
	color:rgba(61,112,127,0.4);
	font-size:2.5em;
	font-family:"Times New Roman", Times, serif;
}




/*左側分類*/
.side-nav{ margin-bottom:60px; border-bottom:10px solid #3D707F; padding-bottom:10px; }

.side-nav li{ position:relative; border-top:1px solid #898989; }
.side-nav li a{ display:block; color:#444; padding:10px 5px 5px 10px; line-height:1.5; }
.side-nav > li:first-child{ border-top-width:0px; }
.side-nav li a:hover{background:#FDB813; color:#333; }
.side-nav li.mtree-node:hover > a:before{ /*border-right-color:#444; border-top-color:#444;*/ }

/*第一層*/
.side-nav > li > a{ font-weight:600; font-size:16px; padding-top:10px; padding-bottom:5px; background:rgba(68,68,68,0.15); }

.side-nav li ul{ /*background:rgba(68,68,68,0.1);*/ }

/*第二層*/
.side-nav li li a{ padding-left:26px; font-size:15px; padding-top:6px; padding-bottom:4px; }
.side-nav li li a:before{
	position:absolute;
	top:14px;
	left:15px;
	width:5px;
	height:5px;
	content:"";
	background:#666;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}

/*第二層*/
.side-nav li li li a{ padding-left:42px; font-size:14px; padding-top:6px; padding-bottom:4px; color:#666; }
.side-nav li li li a:before{
	position:absolute;
	top:14px;
	left:28px;
	width:10px;
	height:2px;
	content:"";
	background:#999;
}

/*.side-nav li.mtree-active > a{ background:rgba(47,47,47,0.5); color:#fff; }
.side-nav > li.mtree-active:before { opacity:1; }
ul.mtree li.mtree-active.mtree-node > a:before{ display:none;  }
ul.mtree li.mtree-active.mtree-node > a:after{ display:block; }*/

.side-nav li.mtree-open{ background:#eee; }

/*.side-nav li.active a{ color:red; }*/

/*.side-nav li.mtree-open > a{ background:rgba(47,47,47,0.5); color:#fff; }
.side-nav > li.mtree-open:before { opacity:1; }
.side-nav li.mtree-node.mtree-open > a:before{ display:none; }
.side-nav li.mtree-node.mtree-open > a:after{ display:block; }*/



/*商品分類大標*/
.product-cate-name{
	color:#fff;
	font-weight:600; 
	font-size:1.4em;
	text-align:center;
	padding:6px 9px;
	background:url(../images/web-30.png) no-repeat bottom center; background-size:cover;
	margin-bottom:25px;
}


/*商品介紹*/
.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-photo{ border:2px solid #919191; background:#fff; overflow:hidden; }
.product-item-photo a{ position:relative; display:block; }
.product-item-photo a:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(102,153,173,0.12);
	opacity:0; 
}
.product-item-more{
	position:absolute;
	z-index:2;
	bottom:0;
	left:0;
	width:100%;
	line-height:1;
	padding:10px 5px 8px 5px;
	text-align:center;
	color:#fff;
	font-weight:600;
	letter-spacing:3px;
	
	background:url(../images/web-31.png) no-repeat center;
	background-size:cover;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	
	-moz-transform:translateY(50px);
	-webkit-transform:translateY(50px);
	-o-transform:translateY(50px);
	-ms-transform:translateY(50px);
	transform:translateY(50px);
}

.product-item-title{ padding:5px; margin-top:5px; text-align:center;}
.product-item-title a{ display:block; color:#898989; font-weight:600; font-size:1.1em;  }
.product-item-title a:hover{ color:#333;}

.product-item-photo a:hover:before{ opacity:1; }
.product-item-photo a:hover .product-item-more{
	-moz-transform:translateY(0px);
	-webkit-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}



/*商品詳細*/
.pro-view-photos{ max-width:450px; margin:0 auto 60px auto;  }
.sync-slide{ margin-bottom:10px; border:1px solid #ccc; }
.sync-thum{ margin-top:15px; }
.sync-thum .owl-item{ cursor:pointer; padding:10px; }
.sync-thum-outset{ position:relative; border:1px solid #ccc; }
.sync-thum-outset:before , .sync-thum-outset:after{
	position:absolute;
	z-index:1;
	left:0;
	width:100%;
	height:8px;
	content:"";
	background:url(../images/web-31.png) no-repeat center;
	background-size:cover;
	opacity:0;
}
.sync-thum-outset:before{ top:0; }
.sync-thum-outset:after{ bottom:0; }
.sync-thum-outset:before , .sync-thum-outset:after{}

.sync-thum .owl-item:hover .sync-thum-outset{ border-color:#999; }

.sync-thum.owl-nav-style .owl-prev , .sync-thum.owl-nav-style .owl-next{ opacity:1; }
.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:#333;
}

.sync-thum .owl-item.current{ border-bottom-color:#C5DD8E; cursor:default; padding:0; }
.sync-thum .owl-item.current .sync-thum-outset:before , .sync-thum .owl-item.current .sync-thum-outset:after{ opacity:1; }


.sync-thum .owl-prev.disabled , .sync-thum .owl-next.disabled{ opacity:0.3; 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:#4F4544; }





.pro-desc-heading{ position:relative; margin-top:15px; margin-bottom:15px; }
.pro-desc-heading .title{
	position:relative; 
	display:block;
	width:150px;
	background:#2F2F2F; 
	color:#fff; 
	font-size:1.1em; 
	padding:10px 15px 4px 0; 
	line-height:1;
	font-weight:600;
	text-align:center;
}
.pro-desc-heading .title:before{
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	content:"";
	border-top:31px solid #fff;
	border-left:20px solid transparent;
}
.pro-desc-heading .subtitle{
	position:absolute;
	z-index:-1;
	top:-24px;
	left:10px;
	color:rgba(119,119,119,0.4);
	font-size:1.2em;
	font-family:"Times New Roman", Times, serif;
}

.pro-description{ margin-bottom:30px; }










/*聯絡我們*/
.contact-heading{ position:relative; margin-bottom:30px; }
.contact-heading .title{
	position:relative; 
	display:block;
	width:220px;
	background:#3D707F; 
	color:#fff; 
	font-size:1.4em; 
	padding:10px 25px 4px 10px; 
	line-height:1;
	font-weight:600;
	text-align:center;
	letter-spacing:3px;
}
.contact-heading .title:before{
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	content:"";
	border-top:36px solid #fff;
	border-left:20px solid transparent;
}
.contact-heading .subtitle{
	position:absolute;
	z-index:-1;
	top:-38px;
	left:10px;
	color:rgba(61,112,127,0.4);
	font-size:2em;
	font-family:"Times New Roman", Times, serif;
}

.contact-gp{ display:flex; flex-wrap:wrap; margin:45px auto 75px auto;  }
.contact-gp-left{ position:relative; width:50%; padding-right:110px;}
.contact-gp-right{ width:45%; margin-left:5%; }

.contact-qrcode{ position:absolute; bottom:0; right:0; width:100px; }
.contact-qrcode img{ display:block; max-width:100%; height:auto; }

.contact-info-list{ padding-left:20px; }
.contact-info-list li{ position:relative; margin-bottom:15px; font-size:1em; padding-left:58px; min-height:30px;  }
.contact-info-list li .title{ position:absolute; top:0; left:0; width:55px; }
.contact-info-list li .title:after{ position:absolute; top:0; right:0; content:"：";}
.contact-info-list li a { color:#424241; }
.contact-info-list li a:hover { color:#000; }

.contact-form-box{ padding-left:20px; 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:85px;
	font-size:1em;
	text-align: left;
	padding-top:8px;
	color:#424241;
	height:31px;
}

.input-control {
	width: 100%;
	width:calc(100% - 85px);
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	border:1px solid transparent;
	border-bottom: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;
	border:1px solid transparent;
	background:transparent;
	color:#595959;
	font-size:1em;
	font-weight:600;
	padding:5px 10px;
	padding-right:28px;
}
.fbtn-outset{
	display:inline-block;
	position:relative;
	margin:5px 10px;
	/*cursor:pointer;*/
}

.contact-send-btn{
	position:absolute;
	top:50%;
	right:10px;
	width:22px;
	height:22px;
	margin-top:-12px;
	line-height:1; 	
}
.contact-send-btn:before , .contact-send-btn:after{
	position:absolute;
	z-index:5;
	left:50%;
	width:2px;
	height:10px;
	content:"";
	background:#595959; 	
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}

.contact-send-btn:before{
	bottom:50%; 
	margin-bottom:-8px; 
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.contact-send-btn:after{
	top:50%; 
	margin-top:-8px;
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

.fbtn-outset:hover input.fbtn{ color:rgba(218,56,49, 1); }
.fbtn-outset:hover .contact-send-btn{ border-color:rgba(218,56,49, 1); }
.fbtn-outset:hover .contact-send-btn:before , .fbtn-outset:hover  .contact-send-btn:after{ background:rgba(218,56,49, 1); }





/*搜尋結果*/
.search-result-heading{  color:#4F4544; margin-bottom:20px; }
.search-result-heading .result{ font-weight:600; font-size:1.3em; }

.search-list{ display: flex; flex-wrap:wrap; }
.search-list li{  position:relative; width:22%; margin-right:4%; margin-bottom:45px; }
.search-list li:nth-child(4n){ margin-right:0; }