@charset "utf-8";
@import url(./tool.css);
/*  global  */
	body{ font-family: Arial,"Microsoft JhengHei";}
	body.btmsite100,
	html.btmsite100 { height:100%; overflow:hidden;}
	.footerbox.btmsite{ position:fixed; bottom:0; width:100%; z-index:2001;}
	.wrap{ width:100%;}
	.container{ width:1200px; margin: 0 auto;}
	.container.container-maxout { width:1500px; }
	.container.container-zoomout { width:1000px; }
	.container.container-xmiddle { width:850px; }
	.container.container-middle { width:700px; }
	.rwd-img { width:100%;}
	.rwd-maximg { max-width:100%;}
	.imgbox { overflow:hidden;}
	a{ color:#000; text-decoration:none;}
	/*a:hover { color:#000; text-decoration:none;}*/
	a:focus, a:hover { text-decoration:none; }
	h1,h2,h3,h4,h5,h6 { margin:0; padding:0; font-weight:normal;}
	ul, section, div, h3 { position: relative;}
	* {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
		}
	ul:after, section:after, div:after, li:after { content: ""; display: block; clear: both;}
	ul{ list-style:none; margin:0; padding:0; }
	body,div,p { margin: 0;padding: 0;}
	
/*	==========================================	*/

	/*  icon  */
	.footericon { padding-left:35px; }
	.icon-tel { background:url(../images/index/icon_03.png) no-repeat left; }
	.icon-fax { background:url(../images/index/icon_04.png) no-repeat left; }
	.icon-mail { background:url(../images/index/icon_05.png) no-repeat left; }
	.icon-loc  { background:url(../images/index/icon_06.png) no-repeat left; }

	
	/*  onscrolling  */

	
	/*  header  */
	.headerbox { padding:15px 0; position:fixed; top:0; left:0; width:100%; z-index:999; border-bottom:1px solid #d6dcdc;	}
	.headerbg { background-color:#fff; }
	
	.logobox { float:left; }
	
	.menubox { float:left; margin:12px 0 0 260px; }
	.menu li { float:left; margin-left:15px; text-align:center; }
	.menu li a { font-size:12pt; color:#4D4D4D; letter-spacing:2px; position:relative; }
	.menu li a:hover:before,.menu li a.active:before { content:""; position:absolute; left:13px; top:20px; background:url(../images/index/icon_01.png) no-repeat center; width:44px; height:30px; }
	.menu li a:hover,.menu li a.active { color:#4D4D4D;}
	
	.langbox { float:right; padding:0 15px; }
	.langbox:before { content:""; position:absolute; left:0; top:-16px; height:77px; border-left:2px solid #ececec; }
	.langbtn .fa-sort-desc { position:absolute; top:0; left:56px; }
	
	
	.lang { max-height:0; overflow:hidden; position:absolute; top:45px; left:-9px; width:77px; background-color:rgba(0,0,0,0.20); 
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
															-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.44);
					-moz-box-shadow: 0 1px 10px 0 rgba(0,0,0,0.44);
							 box-shadow: 0 1px 10px 0 rgba(0,0,0,0.44);
													
	}
	.lang li { text-align:center; margin:5px 0; }
	.lang li a { font-size:10pt; color:#fff; }
	.langbtn:hover .lang,.langbtn:active .lang { max-height:1000px; }
	
		/*  rwd menu  */
		.rwdmenubtnbox { display:none; float:right; padding:21px 0; z-index:99;  }
		.rwdmenubtn { color:#0a8f76; font-size:25pt; }
		.rwdclosebtn { display:none; color:#0a8f76; font-size:25pt; }
		
		.rwdmenubox { display:none; position:fixed; top:0; left:0; width:270px; height:100%; background-color:rgba(10,143,118,1); z-index:99999; opacity:0;
									-moz-transform:translateX(-100%);
									-webkit-transform:translateX(-100%);
									-o-transform:translateX(-100%);
									-ms-transform:translateX(-100%);
									transform:translateX(-100%);
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
		} 
		.rwdmenubox.in { opacity:1;
									-moz-transform:translateX(0);
									-webkit-transform:translateX(0);
									-o-transform:translateX(0);
									-ms-transform:translateX(0);
									transform:translateX(0);
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
		}
		
	  .rwdmenumask { display:none; position:fixed; top:0; left:0; height:100%; width:100%; background-color:rgba(0,0,0,0.6); z-index:9;	
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;	  	
	  }
	  .rwdmenumask.in { display:block; }
		
		.rwdmenu { padding:15px; text-align:center; }
		.rwdmenu li { border-bottom:1px solid #fff; padding:10px 0; margin: 0 30px; }
		.rwdmenu li a { font-size:12pt; color:#d4122f; display:block; }
		
		.rwdlinkbox { padding:15px; text-align:center; }
		.rwdlink li { display:inline-block; margin:0 8px; }
		
		.rwdlink li:nth-child(4) { display:none; }
		.rwdlink li:nth-child(5) { display:none; }
		
		.rwdlang  { padding:15px; text-align:center; }	
		.rwdlang li { display:inline-block; position:relative; margin: 0 8px; }	
		.rwdlang li a { color:#fff; }
		.rwdlang li:before { content:""; border-left:1px solid #fff; height:100%; position:absolute; left:-8px; top:0; }
		.rwdlang li:first-child:before { content:""; border-left:0; }
		
	/*	footer	*/
	.footerbox { padding:15px 0; }
	.footerbg { background-color:#333333; }
	
	.footerlogo { margin:15px 0;}
	.footinfobox { margin:15px 0;}
	
	.footerslogan { font-size:14pt; color:#dddddd; letter-spacing:15px; text-align:center; padding-bottom:15px; border-bottom:1px solid #000; }

	.footinfo { text-align:center; }
	.footinfo li { display:inline-block; margin:0 15px; min-height:29px; line-height:29px; letter-spacing:2px; position:relative; }
	.footinfo li:before{ content:""; position:absolute; right:-15px; top:4px; height:20px; width:1px; background-color:#dddddd; }
	.footinfo li:last-child:before { content:""; background-color:transparent; }
	.footinfo li a { font-size:12pt; color:#dddddd; }
	
	
	.copyright { text-align:center; font-size:10pt; color:#dddddd; letter-spacing:2px; }
	.gotop { display:none; position:fixed; right:calc((100% - 1200px - 60px)/ 2); bottom:15px; z-index:9; }
	
	/*  index  */
	.indexbg { /*background:url(../images/01index/bg.png) repeat center;*/}
	.wrap.index { margin-top:77px; }

	.index-aboutbox { padding:50px 0; border-bottom:1px solid #d9d9d9; }
	.index-newsbox { margin:30px 0; }
	.index-expandbox { padding:15px 0; border-bottom:1px solid #d9d9d9; }
	.index-expandbox span { border-bottom:1px dotted #1e957f; }
	
	.index-sloganbox { margin:116px 0 0 0; }	
	.index-sloganbox .imgbox { margin-top:-80px; opacity:0;	
									-moz-transform:translateX(-20%);
									-webkit-transform:translateX(-20%);
									-o-transform:translateX(-20%);
									-ms-transform:translateX(-20%);
									transform:translateX(-40%);
									-webkit-transition: all 0.72s ease;
									 	 -moz-transition: all 0.72s ease;
													transition: all 0.72s ease;	
	}
	.index-sloganbox .imgbox.active { opacity:1; 
									-moz-transform:translateX(0);
									-webkit-transform:translateX(0);
									-o-transform:translateX(0);
									-ms-transform:translateX(0);
									transform:translateX(0);
	}

	.index-slogan li { opacity:0; margin:48px 0 48px 50px; font-size:18pt; font-weight:bold; color:#4d4d4d; position:relative; 
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;		
	}
	.index-slogan li.active { opacity:1; }
	.index-slogan li:before { content:""; position:absolute; left:-22px; top:10px; width:14px; height:14px; background-color:#0A8F76; border-radius:50px; }
	.index-slogan li:after { content:""; position:absolute; left:120px; top:18px; width:250px; height:1px; background-color:#0A8F76; }
	
	
	.index-expand { margin-top:50px; }
	.index-expand li { float:left; width:calc(100%/6); }
	.index-expand li a { font-size:12pt; color:#4d4d4d; }
	.index-expand li:hover a { color:#1e957f; }
	
	.index-designbox { margin:30px 0; }
	.index-design li { margin: 0 20px; }
	.index-design li:before { content:""; position:absolute; bottom:0; left:17px; height:5px; width:80%;
		background: -moz-linear-gradient(left, rgba(17,140,120,0) 0%, rgba(17,140,120,1) 50%, rgba(245,247,249,0) 100%);
		background: -webkit-linear-gradient(left, rgba(17,140,120,0) 0%,rgba(17,140,120,1) 50%,rgba(245,247,249,0) 100%);
		background: linear-gradient(to right, rgba(17,140,120,0) 0%,rgba(17,140,120,1) 50%,rgba(245,247,249,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00118c78', endColorstr='#00f5f7f9',GradientType=1 );
	}
	
	/* content */
	.contentbg { background:url(../images/index/pic_03.png) no-repeat center; height:131px; }
	
	/*  about  */
	.about .cols-per-70 { padding-left:30px; }
	.about .cols-per-70:before { content:""; position:absolute; left:0; top:0; width:7px; height:100%;
		background: -moz-linear-gradient(top, rgba(214,16,51,1) 30%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(top, rgba(214,16,51,1) 30%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to bottom, rgba(214,16,51,1) 30%,rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d61033', endColorstr='#00ffffff',GradientType=0 );
	} 
	
	/*  news  */
	.newslist li { padding:15px 0; position:relative; }
	.newslist li:hover:before { content:""; position:absolute; left:0; bottom:0; width:100%; border-bottom:1px solid #0A8F76; }
	.newslist li .datebox { padding-left:30px; background:url(../images/index/icon_02.png) no-repeat left; height:22px; }
	.newslist li .datebox div { margin-top:3px; }
	.newslist li .datebox { float:left; width:112px; }
	.newslist li .textbox { float:left; width:75%; margin:0 50px; overflow:hidden; height:22px; }
	.newslist li .morebox { float:right; width:78px; }

	/*  product  */

	.class { text-align:center; }
	.class li { display:inline-block; text-align:center; margin:0 3px; padding:5px 0; width:120px; line-height: 22px; position:relative; }
	.class li a:before { content:""; position:absolute; left:0; bottom:0; width:100%; border-bottom:5px solid #818181; border-radius:5px; }
	.class li a { display:block; }
	.class li a:hover,.class li a.active { color:#0d8f77; }
	.class li a:hover:before,.class li a.active:before { content:""; border-bottom:5px solid #0d8f77; }
	
	.productlist { margin:30px -10px; }
	.productlist li { width:calc(100%/4 - 20px); margin:10px; float:left; position:relative; }

	.productlist-link { position:absolute; top: calc((100% - 169px)/2); left: calc((100% - 169px)/2); z-index:9; opacity:0; 
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
	}
	.productlist li:hover .productlist-link { opacity:1; }
	.productlist-sub1 { height:34px; overflow:hidden; }
	.productlist-sub2 { height:34px; overflow:hidden; }
	
	
	.product-detail-top { padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #d9d9d9; }
	.product-detail-top .cols-per-80:before { content:""; position:absolute; left:0; top:0; width:7px; height:100%;
		background: -moz-linear-gradient(top, rgba(214,16,51,1) 30%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(top, rgba(214,16,51,1) 30%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to bottom, rgba(214,16,51,1) 30%,rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d61033', endColorstr='#00ffffff',GradientType=0 );
	}
	.product-detail-top .cols-per-80 { padding-left:20px; }
	.product-detail-bot .returnbtn { position:absolute; bottom:0; left:0; }
	.product-detail-bot .articlebox { padding-left:260px; }

	.product{ margin-bottom:60px; }
	
	
	/*  download */
	.download .newslist li .datebox { padding-left:30px; background:url(../images/index/download.png) no-repeat left; height:22px; }
	.download .newslist li .morebox { width:82px; padding:2px 5px;}
	
	/*  contact  */
	.mapbox { padding:15px; border-radius:5px; height: 617px; }
	.mapbox iframe { border: 1px solid #b4b4b4; display:block; }
	
	/* hack  */
	.bx-controls-direction { display:none; }
	.bx-wrapper .bx-pager.bx-default-pager a { width:28px; height:4px; border:0; background-color:#666668; margin: 0 1px; }
	.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background-color:#d4142d; }
	
	.owl-theme .owl-controls .owl-page span { width:28px; height:4px; border:0; background-color:#666668; margin: 0 1px; opacity:1; }
	.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span  { background-color:#d4142d; }
	.owl-designbox { width:100%; position:absolute; left:0; top:calc(50% - 49px / 2); }
	.owlprev { position:absolute; left:-49px; }
	.owlnext { position:absolute; right:-49px; }
	
	.articlebox img { max-width:100%; }


@media screen and (max-width: 1024px){
	/*  global  */
	.container{ width:100%; }

	/* header */
	.headerbox { padding:10px 15px; }
	.menubox { margin:12px 0 0 50px; }
	.langbox:before { content:""; height:72px; }
	
	/* footer */
	.footerlogo { margin:15px 0; padding:0 15px; }
	.footinfobox { margin:15px 0; padding:0 15px; }
	.gotop { right:15px; bottom:15px; }
	
	/* index */
	.wrap.index { margin-top:67px; }
	
	.index-aboutbox { padding:50px 15px; }
	.index-newsbox { padding:0 15px; }
	.newslist li .textbox { width:70%; }
	.index-sloganbox { padding: 0 15px; }
	.index-slogan li { margin:34px 0 34px 50px; }
	.index-slogan li:after { content:""; width:150px; }
	.index-sloganbox .imgbox img { width:100%; }
	.index-expandbox { padding:0 15px; }
	.index-expand li { width:calc(100%/3); }
	.index-designbox { padding: 0 15px; }
	
	/* hack */
	.owl-designbox { display:none; }		

}

@media screen and (max-width: 768px){
	/*  global  */
	li:hover .zooming {
						-webkit-transform:scale(1);
							 -moz-transform:scale(1);
								-ms-transform:scale(1);
								 -o-transform:scale(1);
									  transform:scale(1);
	}
	
	/* footer*/
	.footinfo li { width:39%; text-align:left;}
	.footinfo li:nth-child(2):before { content:""; background-color: transparent; }
	
	/* header */
	.menubox { display:none; }
	.langbox { display:none; }
	.rwdmenubtnbox { display:block; }
	.rwdmenubox { display:block; }
	
	.headerbox { padding:5px 15px; }
	.rwdmenubtnbox { padding:6px 0; }
	
	.rwdlangbox .langbtn .fa-sort-desc { left:initial; right:92px; }
	.rwdlangbox .lang { left:initial; right:92px; }
	
	/* index */
	.wrap.index { margin-top:57px; }
	.index-aboutbox .table-per-30 { width:40%; }
	.index-aboutbox .table-per-70 { width:60%; }
	.newslist li .textbox { width:60%; }
	.index-slogan li:after { content:""; width:80px; }
	.index-slogan li { margin:14px 0 14px 50px; }
	
	/* about */
	.about .cols-per-30 { width:100%; margin-bottom:15px; text-align:center; }
	.about .cols-per-70 { width:100%; }
	
	/* product */
	.pd-menubtnbox { display:block; }
	.productlist-link { display:none; }
	.class li { display:block; width:50%; margin: 0 auto;}
	.class li { padding:10px 0; }
	.class { max-height:0; overflow:hidden;
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
	}
	.class.active { max-height:1000px; }
	
	.product-detail-top .cols-per-20 { width:30%; }
	.product-detail-top .cols-per-80 { width:70%; }
	.product-detail-bot .articlebox { padding-left:160px; }
	
	
	
	
	/* contact */
	.contact .cols-per-40 { width:100%; margin-bottom:15px; padding: 0; }
	.contact .cols-per-60 { width:100%; }
	
}

@media screen and (max-width: 736px){
	
	/* footer */
	.footinfo li { width:41%; }
	
	/* news */
	.newslist li .textbox { width:57%; }
	.newslist li:before { content:""; position:absolute; left:0; bottom:0; width:100%; border-bottom:1px solid #0A8F76; }
	.newslist li:last-child:before { content:""; border-bottom:0; }

}

@media screen and (max-width: 667px){
	
	/* footer */
	.footinfo li { width:45%; }
	
	/* news */
	.newslist li .textbox { width:53%; }
	.newslist li:before { content:""; position:absolute; left:0; bottom:0; width:100%; border-bottom:1px solid #0A8F76; }
	.newslist li:last-child:before { content:""; border-bottom:0; }
	.index-slogan li { margin:6px 0; }
	
}


@media screen and (max-width: 568px){
	
	/* footer */
	.footinfo li { width:100%; margin: 0; }
	
	/* index */
	.index-aboutbox .table-per-30 { width:100%; text-align:center; margin-bottom:15px; display:block; }
	.index-aboutbox .table-per-70 { width:100%; display:block; }
	.index-slogan li { margin: -1px 0; }
	.index-slogan li:after { content: ""; position: absolute; left: 103px; }
	
	/* news */
	.newslist li .textbox { width:42%; }

}

@media screen and (max-width: 425px){
	
	/* footer */
	.footerslogan { padding:0 15px 15px 15px; }
	.footinfo li { width:100%; margin: 0; }
	.footinfo li:before { content: ""; background-color: transparent; }
	
	/* header */
	.logobox { width:248px; }
	.logobox img { max-width:100%; }
	.rwdmenubtnbox { padding:0; }
	
	/* index */
	.wrap.index { margin-top:44px; }
	.index-aboutbox .table-per-30 { width:100%; text-align:center; margin-bottom:15px; display:block; }
	.index-aboutbox .table-per-70 { width:100%; display:block; }
	.index-sloganbox .cols-per-65 { width:100%; }
	.index-sloganbox .cols-per-35 { width:100%; }
	.index-slogan li { text-align:center; margin:10px 0; }
	.index-slogan li:before { content:""; left:100px; }
	.index-slogan li:after { content:""; left:260px; }
	.index-expand li { width: calc(100%/2); }
	
	/* news */
	.newslist li .datebox { width:100%; margin:10px 0; float:none; }
	.newslist li .textbox { width:100%; margin:10px 0; float:none; margin:0; overflow:initial; height:initial; }
	.newslist li .morebox { margin: 10px auto; display:block; float:none;}
	
	/* product */
	.productlist li { width: calc(100%/2 - 20px); }
	.class li { width:100%; }
	
	/* contact */
	.mapbox { height:400px; }

}

@media screen and (max-width: 414px){
	
	/* product */
	.product { margin-bottom:80px; }
	.product-detail-bot .returnbtn { bottom:-60px; }
	.product-detail-top .cols-per-20 { width:100%; margin-bottom:15px; }
	.product-detail-top .cols-per-80 { width:100%; padding-left: 0; }
	.product-detail-top .cols-per-80:before { content:""; background:transparent; }
	.product-detail-bot .articlebox { padding-left:0; }

}

@media screen and (max-width: 375px){
	/* index */
	.index-slogan li:before { content: ""; left: 79px; }
	.index-slogan li:after { content: "";  left: 243px; }

}

@media screen and (max-width: 320px){
	/* footer */
	.copyright { letter-spacing:0; }
	.footerslogan { letter-spacing:2px; }
	
	/* index */
	.index-slogan li:before{ content: "";  left: 60px; }
	.index-slogan li:after { content: ""; left: 200px; }
	.index-expand li { width: calc(100%/1); }

}