@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:30px; }
	.icon-loc  { background:url(../images/index/icon_01.png) no-repeat left; }
	.icon-loc2  { background:url(../images/index/icon_02.png) no-repeat left; }
	.icon-mail { background:url(../images/index/icon_03.png) no-repeat left; }
	.icon-tel { background:url(../images/index/icon_04.png) no-repeat left; }
	.icon-fax { background:url(../images/index/icon_05.png) no-repeat left; }


	/*  onscrolling  */


	/*  header  */
	.headerbox { /* position:fixed; top:0; left:0; width:100%; z-index:999;*/	}

	.head-top { padding:5px 0;   }
	.head-info { margin-top: 4px; }
	.head-info li { display: inline-block; margin-right: 15px; min-height: 23px; line-height: 23px;  }
	.linklang li { float: left; line-height: 29px;  position: relative; margin:0 5px; }
	.linklang li a.active { color: #F9BD00;}
	.linklang li:nth-child(3) { margin-left: 15px; }
	.linklang li:nth-child(3):before { display: none; }
	.linklang li.langitem:before { content:""; border-left: 1px solid #000; position: absolute; top:7px; left:-5px; height: 15px; }

	.head-bot { background-color: #F9BD00; }
	.head-bot-flex { display: flex; }
	.logobox { flex:1 1 auto; margin:20px 0; width: 80px; margin-right: 10px;  }
	.logobox img { width: 100%; }
	.menubox { flex:5 1 auto; padding-left: 30px; }
	.menu { display: flex; }
	.menu li { flex:1 1 auto; text-align:center; }
	.menu li a { color:#000; display: block; height:96.51px; line-height:96.51px; position:relative; }
	.menu li a:hover,.menu li a.active { color:#fff; background-color: #8EC21F;}

		/*  rwd menu  */
		.rwdmenubtnbox { display:none; float:right; padding:21px 0; z-index:99;  }
		.rwdmenubtn { color:#242f36; font-size:25pt; }
		.rwdclosebtn { display:none; color:#242f36; font-size:25pt; }

		.rwdmenubox { display:none; position:fixed; top:0; left:0; width:270px; height:100%; background-color:#262F36; 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:#fff; display:block; }


	/*	footer	*/
	.footerbox { background-color:#eee; }
	.footext { line-height: 93px; }
	.footcontact { display: inline-block; line }
	.footcontact a { padding:20px;  display: block; }
	.footcontactbg { background-color: #8EC21F; }
	.footinfobox-flex { display: flex; margin: 40px 0 20px 0; }
	.footlogo { flex: 1 1 auto; }
	.footinfobox { flex:1 1 auto; padding-left: 70px;  border-left: 1px dashed #b2b2b2; }
	.footinfo li { margin:15px 0;  min-height: 23px; line-height: 23px; }
	.footinfo li a { color:#333333; }
	.copyright { text-align:center; font-size:10pt; border-top:2px solid #cacaca; padding:10px 15px;  }
	.gotop { position:fixed; right:calc((100% - 1200px - 50px)/ 2); bottom:15px; opacity:0;  width: 50px;
									-webkit-transition: all 0.52s ease;
									 	 -moz-transition: all 0.52s ease;
													transition: all 0.52s ease;
	}
	.rwdfootcontact { color: #F9BD00; }
	.gotop img { width: 100%; }
	.gotop.active { opacity:1; }

	/*  index  */
	.wrap.index { overflow-x: hidden; }
	.index-banner .item img { display: block; width: 100%; height: auto; }
	.index-linkbox { margin:-108.5px 0 30px 0; }
	.index-link { display: flex; }
	.index-link li { flex:1 1 auto; text-align: center;  position: relative; border-left: 1px solid #ffedbf; }
	.index-link li:first-child { border-left:0; }
	.index-link li a { padding: 20px 0 40px 0; background-color:#F9BD00; display: block; color: #Fff;  }
	.index-link li a:hover { background-color:#8EC21F; }
	.index-link li a:before { content: ""; border-bottom: 12px solid #3E3A39; position: absolute;  bottom: -12px; left: 0; width:100%; opacity: 0; }
	.index-link li a:hover:before { content: ""; opacity: 1; }
	.index-link li .linkimg2 { display: none; }
	.index-link li:hover .linkimg { display: none; }
	.index-link li:hover .linkimg2 { display: inline-block; }

	.index-aboutbox { margin:30px 0; }
	.index-aboutbox .cols-per-70 { width:calc(100% - 451px - 40px); margin-right: 40px; }
	.index-aboutbox .cols-per-30 { width: 451px; }


	.index-aboutbox .imgbox { opacity: 0;
	    -moz-transform: translateX(100%);
	    -webkit-transform: translateX(100%);
	    -o-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	    transform: translateX(100%);
	}
	.index-aboutbox .imgbox.active { 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;
	}
	.index-phlink li { float: left; width: calc(100%/4); }
	.index-phlink li a { display: block;  position:relative; }
	.phlinktextbox { position: absolute; left:0; top:0; height: 100%; width: 100%; padding: 10px;
		-webkit-transition: all 0.52s ease;
		 	 -moz-transition: all 0.52s ease;
						transition: all 0.52s ease;
						-webkit-transform:scale(0);
							 -moz-transform:scale(0);
								-ms-transform:scale(0);
								 -o-transform:scale(0);
									  transform:scale(0);
	}
	.index-phlink li a:hover .phlinktextbox {
		-webkit-transition: all 0.52s ease;
	 	 	 -moz-transition: all 0.52s ease;
						transition: all 0.52s ease;
					-webkit-transform:none;
						 -moz-transform:none;
							-ms-transform:none;
							 -o-transform:none;
								  transform:none;
	}
	.phlinktext {  background-color:rgba(0,0,0,0.8); height: 100%; }
	.phlinktext table { border-collapse: collapse; }
	.phlinktext table span { display: block; padding:0 15px; height:42px; overflow:hidden; }

	/* content */
	.content-titlebox { padding:10px 0;  }
	.cookiebox { margin:0; padding:0; position: absolute; right: 0; top: 4px; z-index: 9;  }
	.cookie li a { color: #fff; }

	.contentbk li { float: left;  width: 50%; }
	.contentbk li span { display: block; width: 63%; float: right; text-align: center; }
	.contentbk li:last-child span { float: none; }
	.contentbk li a { display: block; padding:15px 0;  color: #fff; font-weight: bold; background-color: #262F36; }
	.contentbk li a.active { block; color: #262F36; background-color: #F9BD00; }

	.contentset .left { float: left; width: 300px; margin-right: 20px; }
	.contentset .right { float: right; width: 73%; }

	.classbox { width: 300px; }
	.class-sub { width: 300px; padding: 25px 0; }
	.class li { margin-bottom: 4px; text-align: center; position: relative; background-color: #ededed;  border: 1px solid transparent;  }
	.class li:last-child { margin-bottom: 0; }
	.class li a { display: block; padding:20px 15px; }
	.class li:hover,.class li.active a { color: #F9BD00; }

	.class .class-title { background-color: #8EC21F; }
	.class .class-title .class-flex { display: flex; }
	.class .class-title .imgbox {  background-color: #F9BD00; flex:1 1 auto; padding:3px;  }
	.class .class-title .sub {  flex:50 1 auto;  line-height: 77px; letter-spacing: 5px;  }
	.class li.class-title { border:0;  }
	.class li.class-title a {  padding:0;  }
	.class li.class-title:hover,.class li.class-title.active a {  border: 0;  }
	.class li.class-title:hover .sub,.class li.class-title.active a .sub {  color: #fff;  }

		/* about */
		.aboutbox { background: url(../images/index/bg_01.png) center top no-repeat; }
		.about { padding:80px 0; }
		.aboutbox .cols-per-45 { margin-right: 30px; }
		.aboutbox .cols-per-55 { width: 52%; }

		/* itembox */
		.itembox .item { margin:10px 0 40px 0; min-height: 400px; }
		.itembox ul.class { margin-bottom: 4px; }
		.itembox ul.class:last-child { margin-bottom:0; }

		.index-link-cont { display: block; }
		.index-link-cont li { width:calc(100%/3); float: left; margin-bottom: 10px; }
		.index-link-cont li a { color: #000; padding:40px 0;  }
		.index-link-cont li a:hover { color: #fff; }

		.album { margin:0 -5px; }
		.album li { float: left; width: calc(100%/3 - 10px) ; margin:0 5px; margin-bottom:30px;  }
		.album li .phlinktext img { width: 31px; }

		.album li a:hover .phlinktextbox {
		-webkit-transition: all 0.52s ease;
	 	 	 -moz-transition: all 0.52s ease;
						transition: all 0.52s ease;
					-webkit-transform:none;
						 -moz-transform:none;
							-ms-transform:none;
							 -o-transform:none;
								  transform:none;
		}
		.album li .sub-box { padding:0 10px; overflow:hidden; height: 43px; text-align: center;}
		.report li .imgbox { border:1px solid #cccccc; }
		.report li .sub-box { height: 42px;  }

		/* performance */
		.performance { margin:10px 0 40px 0;  }

		.pipinglist li { padding:15px 0; border-bottom: 1px dotted #F9BD00;  }
		.pipinglist li:last-child { border-bottom:0;  }
		.pipinglist li a { display: block;  }
		.pipinglist .ser { float: left; display: block; width: 46px; height:46px; line-height: 46px; font-size: 14pt; color: #F9BD00; font-weight: bold;  text-align: center; border:1px solid #F9BD00; }
		.pipinglist .pipingsub { float: left; width: 83%; margin:0 40px 0 15px; overflow:hidden; height: 46px;  line-height: 24px;  }
		.pipinglist .more {  float: left; width: 46px; height:46px;}


		/*  contact  */
		.contactbox { background: url(../images/index/bg_02.png) center top no-repeat; background-size: cover; }
		.contact { padding:30px 0;  }
		.contact-form { border:3px solid #262F36; padding:5px; }
		.contact-form .padding-full-20 { border:2px solid #F9BD00; background-color: rgba(255,255,255,0.8);  }
		.contactbox .cols-per-50 img { margin-top: 138px; }
		.contactbox .imgbox { opacity: 0;
	    -moz-transform: translateX(100%);
	    -webkit-transform: translateX(100%);
	    -o-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	    transform: translateX(100%);
		}
		.contactbox .imgbox.active { 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;
		}
		.codebox label  { float: none; width: 60px; display: inline-block; }
		.codebox .inputblock { float: none; width: calc(100% - 329px); display: inline-block;  }
		.codebox .codeimg { float: none; width: 240px; display: inline-block; }
		.codebox .codeimg img { margin-top: 0;  }


	/* hack  */
	.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span  { background-color:#fff; }
	.owl-theme .owl-controls { position: absolute; bottom: 0; width: 100%; }
	.owl-pagination { display: none; }
	.owl-bannerbox { width:100%; position:absolute; left:0; top:calc(50% - 52px / 2); }
	.owlprev { position:absolute; left:53px; }
	.owlnext { position:absolute; right:53px; }
	.fancybox-navigation { height:100%;  }

	.articlebox img { max-width:100%; }

@media screen and (max-width: 1440px){

	/* content */
	.contentbk li span { width: 83%;}


}

@media screen and (max-width: 1024px){

	/*  global  */
	.container{ width:100%; }

	/* header */
	.head-top { padding:5px 15px;  }
	.head-bot { padding-left: 15px; }

	/* footer */
	.footinfobox-flex { padding:0 15px;  }
	.footext {padding:0 15px; }
	.gotop {right: 0;}

	/* index */
	.index-linkbox { margin: -45.5px 0 30px 0; }
	.index-aboutbox { padding: 0 15px; }

	.index-phlink li { width: calc(100%/4); }

	/* content */
	.contentset { padding:0 15px; }
	.content-titlebox { padding:10px 15px;  }
	.contentbk li span { width: 100%; float: none; }

	.contentset .right { width: 67%; }

	/* about */
	.aboutbox .cols-per-45 {  width: 50%; }
	.aboutbox .cols-per-55 {  width: 46%; }

	/* performance */
	.pipinglist .pipingsub { width: 77%; }

	/* contact */
	.contactbox .cols-per-50 img { margin-top: 173px; }
	.codebox .codeimg img { margin-top: 0;  }

	/* hack  */
	.owlprev { position:absolute; left:15px; }
	.owlnext { position:absolute; right:15px; }

}

@media screen and (max-width: 768px){

	/* header */
	.headerbox { position:fixed; top:0; left:0; width:100%; z-index:999;	}
	.head-top { display: none; }
	.head-bot { padding:5px 15px;  }
	.head-bot-flex { display: block; }
	.logobox { margin:0; float: left; width: 190px; }
	.logobox img { width: 100%; }

	.menubox { display: none; }
	.rwdmenubox { display: block; }
	.rwdmenubtnbox { display: block; padding: 12px 0; }

	.rwdlinklang { text-align: center; }
	.rwdlinklang li { display: inline-block; text-align: center; margin:10px;  }
	.rwdlinklang li:nth-child(3) { display: block; margin:0;  }
	.rwdlinklang li a { color: #fff;  }
	.rwdlinklang li a.active { color: #F9BD00;  }
	.rwdhead-info { center; padding:15px 39px;  }
	.rwdhead-info li { min-height: 23px; line-height: 23px; margin-bottom: 5px; }
	.rwdhead-info li a { color: #fff; font-size: 10pt }

	/* footer */
	.footinfobox-flex { display:block; margin:20px 0; }
	.footlogo { flex: none; }
	.footinfobox { flex: none; margin-left: 0; margin-top: 15px; border-left: 0; padding-left: 0; }
	.footcontactbox .font-20 { font-size: 19pt; }

	/* index */
	.wrap.index { margin-top: 67px; }
	.index-linkbox { margin: 0 0 30px 0; }
	.index-aboutbox .cols-per-70 { width: 100%; margin-right: 0; float: none; }
	.index-aboutbox .cols-per-30 { width: 100%; margin-top: 15px; float: none; text-align: center; }
	.index-aboutbox .imgbox { opacity: 1;
	    -moz-transform: translateX(0);
	    -webkit-transform: translateX(0);
	    -o-transform: translateX(0);
	    -ms-transform: translateX(0);
	    transform: translateX(0);
	}
	.index-phlink li { width: calc(100%/3); }
	.phlinktextbox { position: static; padding: 10px;

						-webkit-transform:scale(1);
							 -moz-transform:scale(1);
								-ms-transform:scale(1);
								 -o-transform:scale(1);
									  transform:scale(1);
	}
	.phlinktext {  background-color:transparent; }
	.phlinktext table span { display: block; padding: 0; height:42px; overflow:hidden; color: #4d4d4d; }
	.phlinktext table img { display: none;}

	/* content */
	.content-titlebox { padding:5px 15px;  }
	.cookiebox { position: static; text-align: right; }
	.cookie {  display: inline-block; }

	.contentset .left { float: none; width: 100%; margin-right: 0; margin-bottom: 15px; }
	.contentset .right { float: none; width: 100%; }

	.pd-menubtnbox { display: block; }

	.classbox { width: 100%; }
	.class-sub { width: 100%; padding: 10px 0; }
	.class { overflow:hidden; max-height: 0;
			-webkit-transition: all 0.52s ease;
			 	 -moz-transition: all 0.52s ease;
							transition: all 0.52s ease;
	}
	.class.active { max-height:2000px;
			-webkit-transition: all 0.52s ease;
			 	 -moz-transition: all 0.52s ease;
							transition: all 0.52s ease;
	}
	.class li a { padding:10px 0; }
	.class .class-title .class-flex { display: block; }
	.class .class-title .imgbox { flex: none; width: 45px; position: absolute; left:0; top: 0;  }
	.class .class-title .sub { flex: none; line-height: 45px; letter-spacing: 2px; }


	/* about */
	.about { padding: 30px 0; }
	.aboutbox .cols-per-45 {  width: 100%; margin-right: 0; margin-bottom: 15px; }
	.aboutbox .cols-per-55 {  width: 100%; }

	/* item */
	.index-link-cont li { width: calc(100%/2); }
	.album li a .phlinktextbox { position: static; padding: 0;

						-webkit-transform:scale(1);
							 -moz-transform:scale(1);
								-ms-transform:scale(1);
								 -o-transform:scale(1);
									  transform:scale(1);
	}

	/* performance */
	.pipinglist .pipingsub { width: 80%; }

	/* contact */
	.contactbox .cols-per-50 { width: 100%; }
	.contactbox .imgbox { opacity: 1;
	    -moz-transform: translateX(0);
	    -webkit-transform: translateX(0);
	    -o-transform: translateX(0);
	    -ms-transform: translateX(0);
	    transform: translateX(0);
	}
	.contactbox .cols-per-50 img {  margin-top: 15px; }
	.codebox .codeimg img { margin-top: 0;  }

	/* hack  */
	.owl-pagination { display: block; }
	.owl-bannerbox { display: none; }
	.mCSB_inside>.mCSB_container { margin-right: 0; }

}

@media screen and (max-width: 736px){

	/* footer */
	.footcontactbox .font-20 { font-size: 16pt; }

	/* performance */
	.pipinglist .pipingsub { width: 79%; }


}

@media screen and (max-width: 667px){

	/* performance */
	.pipinglist .pipingsub { width: 76%; }

}


@media screen and (max-width: 568px){

	/* footer */
	.footcontactbox .font-20 { font-size: 13pt; }
	.footcontact .font-18 { font-size: 14pt;  }

	/* performance */
	.pipinglist .pipingsub { width: 72%; }


}

@media screen and (max-width: 425px){

	/* footer */
	.rwdfootcontact { display: none; }
	.footcontact { width: 50px; }
	.footcontact img { margin:0; width: 100%;  }
	.footcontact a { padding:10px;  }
	.footcontactbox .font-20 { font-size: 12pt; }
	.footext { line-height: 50px; }
	.footlogo img { margin:0 auto;  }
	.gotop { width: 28px; }

	/* index */
	.index-link li a { padding: 20px 0 20px 0; }
	.index-link li img { width: 50%; }
	.index-link li .letter-spacing-5 { letter-spacing: 0; }
	.aboutsub { padding-left: 15px; font-size: 16pt; }
	.index-phlink li {  width: calc(100%/2); }

	/* item */
	.itembox .item { min-height: initial; }
	.itembox .index-link { display:block; }
	.itembox .index-link li { flex: none; margin-bottom: 20px;  }

	.album li { width: calc(100%/2 - 10px); }

	/* performance */
	.pipinglist .ser { float: none; }
	.pipinglist .pipingsub { float: none; width: 100%; margin:10px 0; }
	.pipinglist .more { float: none; position:absolute; top: 0; right: 0;  }

	/* conetnt */
	.contentbk li a { font-size: 10pt; }
	.codebox .inputblock { width: calc(100% - 75px); }
	.codebox .codeimg { margin:0; margin-top: 10px;  }
	.index-link-cont li { width: calc(100%); }

}

@media screen and (max-width: 414px){


}

@media screen and (max-width: 375px){

	/* index */
	.index-phlink li { width: calc(100%/1); }

	/* item */
	.album li { width: calc(100%/1 - 10px); }

}

@media screen and (max-width: 320px){

	/* footer */
	.footcontactbox .font-20 { font-size: 10pt; }


}