@charset "utf-8";

html , body{ height:100%; min-height:100%; width:100%; }
body{
	background:#FFF;
	font-family:"微軟正黑體", serif , "新細明體-ExtB";
	letter-spacing: 1px;
}

.wrapper{
	position:relative;
	height:auto;
	width:100%;
	min-height:100%;
	overflow:hidden;
}

body , .wrapper{ color:#333;}


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


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

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

/*page 分頁*/
.page{
	margin: 20px 0 40px 0;
	font-size:0.95em;
	text-align:center;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #009193;
	padding: 2px 6px;
	margin:0 3px;
	-ms-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-bborder-radius:4px;
	border-radius:4px;
	min-width:36px;
}
.page span{ background:#009193; color:#fff;}

.page a{ color:#009193; }
.page a:hover{ background:#00D0D2; color: #fff; border-color:#00D0D2; }


/* 多少筆 */
.page_total {}

/* 分頁資訊 */
.page_info {}

/* 上頁 */
.page_prev {}

/* 分頁數字 */
.page_item {}

/* 目前選中的分頁 */
.page_current { background:#00D0D2; color: #fff; }
/* 下頁 */
.page_next {}

/* 下十頁 */
.page_next_group {}



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

/*頁首*/
.header{ }


.mobile-navbar{ display:none; background:#00D0D2; padding:5px 0; }
@media (max-width:960px) { .mobile-navbar{ display:block; }}
@media (max-width:480px) { .mobile-navbar{ padding:9px 0; } }

.mobile-logo{ max-width:250px; }
.mobile-logo img{ display:block; max-width:100%; height:auto; }
@media (max-width:480px) { .mobile-logo{ max-width:220px; } }


/*小螢幕時的選單按鈕*/
.nav-trigger{
	position:absolute;
	top:50%;
	right:0;
	margin-top:-20px;
	width:40px;
	height:40px;
	border:1px solid #fff;
	padding:11px 8px;
	border-radius:5px;
}
.nav-trigger-icon{ 
	position:relative; 
	width:100%; 
	height:100%;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
}
.nav-trigger-icon:before{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff;
}
.nav-trigger-txt{ display:none;}



/*輪播*/
.banner{ position:relative; }
.banner img{ display:block; width:100%; height:auto; }

/*輪播-左右按鈕*/
.owl-nav-style .owl-next , .owl-nav-style .owl-prev{
	position: absolute;
	top:50%;
	width: 35px;
	height: 40px;
	margin-top:-20px;
	background:#f4f4f4;
	border:1px solid #d6d6d6;
	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;
	margin-top:-6px;
	width:3px;
	height:16px;
	content:"";
	background:#999;
	
	-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-prev:after{ left:50%; margin-left:-2px;}
.owl-nav-style .owl-next:before , .owl-nav-style .owl-next:after{ right:50%; margin-right:-2px; }
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:after{ bottom:50%; margin-bottom:-13px; }
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; margin-top:-13px; }
.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:0px; left:0; width:100%; z-index:3; text-align:right; padding:0 20px;}
.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:#00D0D2;
	border:1px solid #fff;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
	border-radius:30px;
}
.owl-dots-style .owl-dots .owl-dot.active span, .owl-dots-style .owl-dots .owl-dot:hover span { background:#018182; border-color:#fff; }
@media (max-width:960px) { .owl-dots-style .owl-dots .owl-dot span { width:10px; height:10px; } }




/*大螢幕選單*/
.menubar{ position:relative; background:#00D0D2; text-align:center; margin-bottom:11px; }
.menubar:before{
	position:absolute;
	bottom:-11px;
	left:0;
	width:100%;
	height:7px;
	content:"";
	background:#00D0D2;
}
@media (max-width:960px) { .menubar{ display:none; } }

.menu-list > li{ float:left; width:14.285%; text-align:center; }
.menu-list > li > a{ position:relative; display:block; width:100%; padding:10px 0; color:#fff; }
.menu-list > li > a > span{ display:block; text-align:center; line-height:1.4; }
.menu-list > li > a > span.title{ font-size:1.05em; }
.menu-list > li > a > span.subtitle{ font-size:0.7em; }
.menu-list > li > a:before{
	position:absolute;
	bottom:-4px;
	left:0;
	width:100%;
	height:4px;
	content:"";
	background:#808080;
	transition:all 0.5s ease;
}
.menu-list > li > a:after{
	position:absolute;
	bottom:-1px;
	left:50%;
	margin-left:-10px;
	width:0;
	height:0;
	content:"";
	border-bottom:6px solid #808080;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	transition:all 0.5s ease;
}
.menu-list > li > a:before , .menu-list > li > a:after{ display:none; }
.menu-list > li > a:hover:before , .menu-list > li > a:hover:after{ display:block; }



/*小螢幕選單*/
.mobile-menu-wrap{
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#00D0D2;
	color: #5C391B;
	
	overflow-x: hidden;
	overflow-y: auto;
	
	visibility: hidden; 
	
	/*Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	
	-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
	-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
	transition: transform 0.5s 0s, visibility 0s 0.5s;
}
/*mobile 選單開啟*/
.mobile-menu-wrap.is-open {
	visibility: visible;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
	-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
	transition: transform 0.5s 0s, visibility 0s 0s;
}

@media (min-width:960px) { 
	.mobile-menu-wrap.is-open{
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.mobile-menu-header{ color:#fff; font-size:1.5em; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.8); padding:10px;}

.mobile-menu-list li{  position:relative; border-top:1px solid rgba(255,255,255,0.8);}
.mobile-menu-list > li:first-child{  border-top-width:0px; }
.mobile-menu-list > li:last-child{  border-bottom:1px solid rgba(255,255,255,0.8); }
.mobile-menu-list li a{ position:relative; display:block; padding:10px 10px; color:#fff; padding-right:65px; }
.mobile-menu-list li a:hover{text-decoration:none;}
.mobile-menu-list li ul li a{ padding-left:25px; }
.mobile-menu-list li ul li ul li a{ padding-left:41px; }
.mobile-menu-list li ul li ul li ul li a{ padding-left:56px; }
.mobile-menu-list ul { display:none; } 
.submenu-button{
	position:absolute;
	z-index:3;
	top:3px;
	right:5px;
	width:55px;
	height:44px;
	border-left:1px solid rgba(255,255,255,0.8);
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:50%;
	left:50%;
	width:10px;
	height:10px;
	border-top:1px solid rgba(255,255,255,1);
	border-right:1px solid rgba(255,255,255,1);
	margin-top:-5px;
	margin-left:-5px;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

/*手機板上滑出內容時出現的叉叉，在title 右側 / 'X' close icon */
.mobile-menu-close {
	position: absolute;
	z-index: 1;
	right: 10px;
	top: 8px;
	height: 50px;
	width: 50px;
	display:block;
	
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	color: transparent;
}
.mobile-menu-close:after, .mobile-menu-close:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	height: 22px;
	width: 4px;
	background-color:#fff;
}
.mobile-menu-close:after {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.mobile-menu-close:before {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
/* End 手機板上滑出內容時出現的叉叉 */
	



/*頁尾-menu*/
.footer-menubar{ background:#ADEEF0; min-height:40px; margin-top:35px; }
.footer-menu-list{  padding:0 55px; }
.footer-menu-list > li{ float:left; width:14.285%; text-align:center; }
.footer-menu-list > li > a{ position:relative; display:block; width:100%; padding:10px 0; color:#089B97; }
.footer-menu-list > li > a > span{ display:block; text-align:center; line-height:1.4; }
.footer-menu-list > li > a > span.title{ font-size:1em; }
.footer-menu-list > li > a > span.subtitle{ font-size:0.7em; }
.footer-menu-list > li > a:hover{ color:#063534; }
@media (max-width:960px) { .footer-menu-list{ display:none; } }


/*頁尾-回頂端按鈕*/
.backtop-btn{ 
	position:absolute;
	top:-20px;
	right:0;
	display:block;
	width:50px;
	height:50px;
	background:#00D0D2;
	color:#fff;
	text-align:center;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.backtop-btn:before , .backtop-btn:after{
	position:absolute;
	top:15px;
	width:16px;
	height:2px;
	border-radius:2px;
	content:"";
	background:#fff;
}
.backtop-btn:before{
	left:50%;
	margin-left:-14px;
	transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
}
.backtop-btn:after{
	right:50%;
	margin-right:-14px;
	transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
}
.backtop-btn:focus { background:#00D0D2; color:#fff; }
.backtop-btn:hover{ background:#063534; color:#fff; } 
.backtop-txt{ display:block; margin-top:23px; padding-left:2px; font-size:0.7em; }
@media (max-width:960px) { .backtop-btn{ right:50%; margin-right:-25px; } }


/*頁尾-logo*/
.footer-info-line{ background:#00D0D2; padding:60px 0; }
@media (max-width:768px) { .footer-info-line{ text-align:center; padding:30px 0 0 0; } }

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

/*頁尾-公司資料*/
.company-info-wrap{ text-align:left; }
.company-info-wrap , .company-info-wrap a{ color:#fff;}
.company-info-wrap a:hover{ text-decoration:underline; }
.company-info-title{ font-weight:600; font-size:1.05em; }
.company-info-list{ font-size:0.8em; }
.footer-company-info-wrap{ display:inline-block; margin:0 20px; }
@media (max-width:480px) { .footer-company-info-wrap{ display:block; text-align:center; } }


/*頁尾-證照標誌*/
.certificate-list li{ display:inline-block; max-width:90px; margin:25px 10px 15px 10px; }
.certificate-list li img{ display:block; max-width:100%; height:auto; }
@media (max-width:960px) { .certificate-list li{ max-width:70px; } }

.footer-certificate-list{ position:absolute; top:0px; right:0; }
@media (max-width:768px) { .footer-certificate-list{ position:relative; text-align:center; } }

.web-copyright{ background:#000; font-size:0.75em; text-align:center; padding:15px 0; }
.web-copyright span{ display:inline-block; }
.web-copyright , .web-copyright a{ color:#fff;}
.web-copyright a:hover{ text-decoration:underline; }



.main{ margin-bottom:45px; }
.pd-area{ max-width:800px; margin:0 auto;}


.page-side{ float:left; width:23%; margin-right:5%; }
.product-maincontent{ float:left; width:72%; }
@media (max-width:960px) { 
	.page-side{ display:none;}
	.product-maincontent{ width:100%; }
}



/*前往按鈕*/
.goto-btn{
	position:relative;
	border:1px solid #fff;
	display:inline-block;
	color:#fff;
	font-size:0.9em;
	min-width:160px;
	padding:1px 35px 1px 30px; 
	text-align:center;
	margin:5px 10px;
	transition:all 0.5s ease;
}
.goto-btn:before{
	position:absolute;
	z-index:4;
	top:50%;
	right:10px;
	width:6px;
	height:6px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	margin-top:-3px;
	margin-left:-3px;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.goto-btn:hover{
	color:#fff;
	animation:goto 2s linear infinite;
	-moz-animation:goto 2s linear infinite;
	-webkit-animation:goto 2s linear infinite;
	-o-animation:goto 2s linear infinite;
}

/*前往按鈕-藍色*/
.goto-btn.blue-style{ border:1px solid #0A918D; color:#0A918D;}
.goto-btn.blue-style:before{ border-top-color:#0A918D; border-right-color:#0A918D; }




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


/*大標*/
.page-headline{ background:#00D0D2; text-align:center; padding:15px 0; }
.page-headline .title{
	display:inline-block;
	width:130px;
	height:130px;
	font-size:1.8em; 
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
	color:#def8f9;
	border:1px solid #def8f9;
	text-align:center;
	line-height:128px;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
@media (max-width:960px) { 
	.page-headline{ padding:10px 0; /*display:none;*/ }
	.page-headline .title{ 
		width:90px; 
		height:90px; 
		font-size:1.2em; 
		line-height:89px;  
	} 
}



/*導覽路徑*/
.breadcrumbs{ font-size:0.8em; text-align:right; color:#999; margin:4px 0; }
.breadcrumbs , .breadcrumbs a{ color:#666; }
.breadcrumbs a:hover{ color:#333; }
.breadcrumbs span{ position:relative; margin-right:0px;}
.breadcrumbs span:first-child{ padding-left:12px; }
.breadcrumbs span:first-child:before{
	position:absolute;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-4px;
	border-left:8px solid #999;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
.breadcrumbs span:after{
	content:"/";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}
@media (max-width:960px) { .breadcrumbs{ text-align:center;} }



/*分類*/
.content-heading{ color:#00D0D2; font-weight:600; text-align:center; margin:25px 0; font-size:1.3em; }

.category-list{ margin:15px 0; text-align:center; }
.category-list li{ display:inline-block; width:14.6666%; margin:0 1% 15px 1%; }
.category-list li a{  color:#666; }
.category-list li a:hover , .category-list li.active a{ text-decoration:underline; }
.category-list li.active a{ font-weight:600; font-size:1.05em; }
@media (max-width:960px) { .category-list{ display:none; }}


.thrmbnail-list{ margin:10px 0;}
.thrmbnail-list li{ text-align:center; margin:5px 0;}
.thrmbnail-list li img{ max-width:100%; text-align:center; }


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



/* 檔案下載鈕*/
.download-line{ margin:10px 0; text-align:center; }
.download-btn{
	position:relative;
	display:inline-block;
	padding:7px 12px;
	margin:10px 20px; 
	color:#999;
}
.download-btn:before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:8px;
	content:"";
	background:#999;
	border-radius:2px;
}
.download-btn:after{
	position:absolute;
	bottom:0;
	left:50%;
	width:0;
	height:0;
	content:"";
	margin-left:-4px;
	border-top:6px solid #fff;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}
.download-btn:hover{ color:#00D0D2; }
.download-btn:hover:before{ background:#00D0D2; }


/*返回按鈕列*/
.pageback-line{margin:30px 0; text-align:center; }
.pageback-btn span{ position:relative; display:inline-block; padding-left:12px; color:#999999; }
.pageback-btn span:before{
	position:absolute;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-4px;
	border-right:8px solid #999;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
.pageback-btn:hover span{ color:#00D0D2; }
.pageback-btn:hover span:before{ border-right-color:#00D0D2; }



/*產品介紹與工程案例項目使用*/
.detail-gradient-box{
	position:relative;
	background:#fff;  
	text-align:center; 
	border:4px solid #fff;
	transition:all 0.5s ease;
}
.detail-gradient-box > a{ position:relative; display:block; width:100%; height:100%; padding:5px; }
.detail-gradient-box > a:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:linear-gradient(top,rgba(0,208,210, 0.1) , rgba(0,208,210, 0.9) 80% , rgba(0,208,210, 1) );
	background:-moz-linear-gradient(top,rgba(0,208,210, 0.1) , rgba(0,208,210, 0.9) 80%  , rgba(0,208,210, 1) );
	background:-webkit-linear-gradient(top,rgba(0,208,210, 0.1) , rgba(0,208,210, 0.9) 80%  , rgba(0,208,210, 1) );
	background:-o-linear-gradient(top,rgba(0,208,210, 0.1) ,rgba(0,208,210, 0.9) 80%  , rgba(0,208,210, 1) );
	background:-ms-linear-gradient(top,rgba(0,208,210, 0.1) , rgba(0,208,210, 0.9) 80%  , rgba(0,208,210, 1) );
	
	transition:all 0.5s ease;
	opacity:0;
}
.detail-gradient-box:hover a:before{ opacity:1; }
.detail-gradient-box .item-thumb-frame{ z-index:0; }
.detail-gradient-title{ position:relative; z-index:2; font-weight:600; font-size:1.05em; margin:5px 0; color:#808080; }
.detail-gradient-spec{ 
	position:relative;
	z-index:2;
	font-size:0.9em; 
	color:#808080; 
	max-height:55px; 
	overflow:hidden; 
	margin-bottom:25px;
	text-align:left;
}
.detail-gradient-more{ position:relative; z-index:2; display:block; background:#00D0D2; color:#fff; text-transform:uppercase; }

.detail-gradient-box:hover .detail-gradient-title{ color:#fff; }
.detail-gradient-box:hover .detail-gradient-spec{ color:#fff; opacity:0.8; }
@media (max-width:768px) { 
	.detail-gradient-spec , .detail-gradient-more{ display:none; }
	.detail-gradient-title{ margin-bottom:0;}
}




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


/*首頁*/
.logo{ text-align:center; padding:60px 0;}
.logo img{ display:inline-block; max-width:200px; height:auto; }

/*首頁-最新消息*/
.idx-news{
	min-height:200px;
	text-align:center;
	background:url(../images/idx-news-bg.png) no-repeat center;
	background-size:cover;
	padding:60px 0;
}
.idx-news-item{ display:inline-block; max-width:600px;  }

.idx-news-item-date{ font-size:0.75em; color:#fff; margin-bottom:5px; }
.idx-news-item-title{ font-weight:600; font-size:1.3em; }
.idx-news-item-title a{ color:#fff; }
.idx-news-item-title a:hover{ text-decoration:underline; }
.idx-news-item-spec{ color:#fff; max-height:115px; overflow:hidden; margin-bottom:15px; }

/*首頁-商品介紹*/
.idx-product{
	min-height:200px;
	text-align:center;
	background:url(../images/idx-product-bg.png) no-repeat center;
	background-size:cover;
	padding:30px 0;
}
.idx-product-item-title{ display:inline-block; max-width:250px; }
.idx-product-item-content{ margin:10px 0;}
.idx-product-item-content li{ display:inline-block; max-width:450px;}
.idx-product-item-title img , .idx-product-item-content li img{ display:block; max-width:100%; height:auto; }



/*首頁-工程案例*/
.idx-project{
	min-height:200px;
	text-align:center;
	background:url(../images/idx-project-bg.png) no-repeat center;
	background-size:cover;
	padding:30px 0;
}
.idx-project-title{ display:inline-block; max-width:250px; }
.idx-project-title img { display:block; max-width:100%; height:auto; }


.idx-project-list li{ 
	display:inline-block; 
	width:180px; 
	margin:15px 20px;
	border:3px solid #fff;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	overflow:hidden;
}
.idx-project-list li .item-thumb-frame .item-thumb{
	position:relative;
	background:#fff;
}
.idx-project-list li .item-thumb-frame{
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.idx-project-list li .item-thumb-frame .item-thumb:before{
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
	height:90%;
	content:"";
	background:url(../images/project-circle-hover.png) no-repeat center;
	background-size:cover;
	
	opacity:0;
	transition:opacity 0.5s ease;
	
	-webkit-transition:opacity 0.5s ease , transform 0.5s ease;
	-moz-transition:opacity 0.5s ease , transform 0.5s ease;
	-ms-transition:opacity 0.5s ease , transform 0.5s ease;
	-o-transition:opacity 0.5s ease , transform 0.5s ease;
	transition:opacity 0.5s ease , transform 0.5s ease;
}
.idx-project-list li .item-thumb-frame:hover .item-thumb:before{
	opacity:1;
	transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
}




/*最新消息*/
.datapost-list:before, .datapost-list:after{ display:table; content:" " }
.datapost-list:after{ clear:both }
.datapost-list{ margin:30px 0;}
.datapost-list li{ float:left; width:44%; margin:0 3% 45px 3%; }
.datapost-list li:nth-child(2n+1){ clear:both; float:left; }
@media (max-width:768px) { .datapost-list li{ width:100%; margin-left:0; margin-right:0; } }


.datapost-item{ 
	background:#fff; 
	padding:10px; 
	text-align:center; 
	border:10px solid #fff;
	transition:all 0.5s ease;
}
.datapost-date{ font-size:0.75em; color:#808080; margin-bottom:5px; }
.datapost-title{ font-weight:600; font-size:1.05em; margin-bottom:10px; }
.datapost-title a{ color:#808080; }
.datapost-spec{ 
	font-size:0.9em; 
	color:#808080; 
	max-height:182px; 
	overflow:hidden; 
	margin-bottom:25px;
	text-align:left;
}
.datapost-more a{ display:block; background:#00D0D2; color:#fff; text-transform:uppercase; }

.datapost-item:hover{ background:#00D0D2; }
.datapost-item:hover .datapost-title a{ color:#fff; }
.datapost-item:hover .datapost-spec{ color:#666; }
.datapost-item:hover .datapost-more a{ /*background:#fff; color:#00D0D2;*/ color:#FFFF99; }



/*最新消息詳細頁*/
.news-view-heading{ color:#808080; font-weight:600; font-size:1.2em; text-align:center; margin:20px 0 10px 0;}
.news-view-date{ font-size:0.8em; color:#808080; text-align:center; margin-bottom:25px; }
@media (max-width:768px) { .news-view-date{ position:relative; display:block; text-align:center;} }




/*產品介紹*/
.idx-product.prodcut-page-bg{
	min-height:200px;
	text-align:center;
	background:url(../images/idx-product-bg2.png) no-repeat center;
	background-size:cover;
	padding:15px 0;
}
@media (max-width:960px) { .prodcut-page-bg{ display:none; } }



/*左側分類*/
.side-heading { 
	color:#007A77; 
	font-size:1.1em;
	font-weight:600;
	border-bottom:2px solid #007A77; 
	padding-bottom:5px; 
	margin-bottom:10px;
	margin-left:12px;
}
.side-nav{ margin-bottom:90px; margin-left:12px; }
ul.mtree li{ position:relative; }
ul.mtree li a{ position:relative; display:block; padding:7px 40px 7px 5px; }

/*有下一層選項的項目設定*/
ul.mtree li.mtree-node > a:before , ul.mtree li.mtree-node > a:after{
	position:absolute;
	top:50%;
	content:"";
	background:rgba(121,199,199, 1);
}
ul.mtree li.mtree-node > a:before{ margin-top:-6px; right:15px; width:2px; height:12px; transition:transform .3s ease; }
ul.mtree li.mtree-node > a:after{ margin-top:-1px; right:10px; width:12px; height:2px; }
ul.mtree li.mtree-open > a:before , ul.mtree li.active > a:before{
	transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);	
}

ul.mtree li li , ul.mtree li li li{ padding-left:15px;}

.side-nav li a{ font-size:0.95em; color:#4C4C4C; }
.side-nav li > a { border-bottom:1px solid rgba(157,214,214, 0.4); }
.side-nav > li:before{
	position:absolute;
	top:17px;
	left:-6px;
	width:0;
	height:0;
	content:"";
	border-left:6px solid #00D0D2;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	opacity:0;
}
.side-nav > li:hover:before{ opacity:1; }



.product-list{ margin-bottom:0px; }
.product-list:before, .product-list:after{ display:table; content:" " }
.product-list:after{ clear:both }
.product-list li{ float:left; width:31%; margin-right:3.5%; text-align:center; margin-bottom:45px; }
.product-list li:nth-child(3n){ margin-right:0;}
.product-list li:nth-child(3n+1){ clear:both; float:left; }
@media (max-width:640px) { 
	.product-list li{ width:48%; }
	.product-list li:nth-child(3n){ margin-right:4%;}
	.product-list li:nth-child(3n+1){ clear:none; }
	.product-list li:nth-child(2n){ margin-right:0;}
	.product-list li:nth-child(2n+1){ clear:both; float:left; }
}




/*商品詳細頁*/
.product-view-heading{color:#808080; font-weight:600; font-size:1.2em; text-align:center; margin:10px 0 20px 0; }

.pro-photos{ max-width:550px; margin:0 auto; margin-bottom:30px; }
.pro-photos .sync-thum{ padding:0 45px; margin-bottom:5px;}
.pro-photos .sync-thum .item { cursor:pointer; border:1px solid transparent; padding:3px; }
.pro-photos .sync-thum .item:hover { opacity:0.9; border:1px solid #ccc; border-radius:5px; }

@media (max-width:960px) {
	.pro-photos .sync-thum.owl-nav-style .owl-prev , .pro-photos .sync-thum.owl-nav-style .owl-next{ opacity:0.8;}
}



/*色卡*/
.color-area{
	position:relative;
	min-height:200px;
	text-align:center;
	background:url(../images/color-bg.png) no-repeat center;
	background-size:cover;
	padding:10px 0;
}
.color-box{ position:absolute; z-index:2; top:50%; left:50%; width:160px; height:110px; margin-top:-55px; margin-left:-80px; }
.color-title{ color:#fff; font-size:2em; line-height:1.2; }
.color-subtitle{ color:#fff; font-size:0.95em; line-height:1.2; margin-bottom:20px; }
.color-box .goto-btn{ padding:1px 20px 1px 15px; min-width:auto; margin:0; }
.color-circle{ position:relative; z-index:1; max-width:450px; padding:5px; margin:0 auto;}
.color-circle img{ display:block; max-width:100%; height:auto;}
.color-circle{
	animation:circle 25s linear infinite;
	-moz-animation:circle 25s linear infinite;
	-webkit-animation:circle 25s linear infinite;
	-o-animation:circle 25s linear infinite;
}


.color-pd{ max-width:1000px; margin:0 auto; }
.idx-product.color-page-bg{
	min-height:200px;
	text-align:center;
	background:url(../images/idx-product-bg3.png) no-repeat center;
	background-size:cover;
	padding:15px 0;
}
@media (max-width:960px) { .color-page-bg{ display:none; } }

.color-certificate-list{ text-align:center; margin:0; }
.color-certificate-list.certificate-list li{ max-width:130px; margin-top:0; margin-bottom:0; }
.color-note{ max-width:450px; margin:0 auto 30px auto; }
.color-note img{ display:block; max-width:100%; height:auto; }

.color-page-title{ color:#00D0D2; font-size:2em; line-height:1.3; text-align:center; margin-top:15px; }
.color-page-subtitle{ color:#00D0D2; font-size:0.95em; line-height:1.3; text-align:center; margin-bottom:30px;}


.color-list:before, .color-list:after{ display:table; content:" " }
.color-list:after{ clear:both }
.color-list li{ float:left; width:17.6%; margin-right:3%; text-align:center; margin-bottom:30px; }
.color-list li:nth-child(5n){ margin-right:0;}
.color-list li:nth-child(5n+1){ clear:both; float:left; }
@media (max-width:768px) { 
	.color-list li:nth-child(5n){ margin-right:2%;}
	.color-list li:nth-child(5n+1){ clear:none; float:left; }
	.color-list li{ width:32%; margin-right:2%; }
	.color-list li:nth-child(3n){ margin-right:0; }
	.color-list li:nth-child(3n+1){ clear:both; float:left; }
}

.color-item .item-thumb-frame{ border-radius:50%; border:1px solid #ccc; }
.color-item-title{ margin:10px 0;}




/*工程案例*/
.project-list:before, .project-list:after{ display:table; content:" " }
.project-list:after{ clear:both }
.project-list{ margin:30px 0;}
.project-list li{ float:left; width:44%; margin:0 3% 45px 3%; }
.project-list li:nth-child(2n+1){ clear:both; float:left; }
@media (max-width:960px) { .idx-project.project-page{ display:none;} }
@media (max-width:768px) { 
	.project-list li{ width:48%; margin-left:0%; margin-right:4%; }
	.project-list li:nth-child(2n){ margin-right:0; }
}





/*工程案例詳細頁*/
.project-view-heading{ color:#808080; font-weight:600; font-size:1.2em; text-align:center; margin:20px 0 30px 0; }



/*聯絡我們*/
.contact-info-area{ text-align:center; margin:20px 0; }
.contact-logo , .contact-company-info-wrap{ display:inline-block; vertical-align:middle; margin:10px 20px; }
.contact-logo{ display:inline-block; max-width:170px; }
.contact-logo img{ display:block; max-width:100%; height:auto; }

.contact-company-info-wrap{ font-size:1em; }
.contact-company-info-wrap , .contact-company-info-wrap a{ color:#001E1D; }
.contact-company-info-wrap a:hover{ color:#000; }

.contact-company-info-wrap .company-info-title{ font-size:1.1em; }
.contact-company-info-wrap .company-info-list{ font-size:0.9em; }




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

@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);
  }
}

/* Firefox */
@-moz-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);
  }
}


/* 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 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);
  }
}





/* <<==========================================>> */
@keyframes circle {
  0% {
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
  }
}

/* Firefox */
@-moz-keyframes circle {
  0% {
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
  }
}


/* Safari和Chrome */
@-webkit-keyframes circle {
  0% {
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
  }
}

/* Opera */
@-o-keyframes circle {
  0% {
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
  }
}