@charset "utf-8";
@import url('topstyle.css'); /*web-top & lightbox*/
/* =====================================
   全域
===================================== */
body {
	font-family: \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 1.7em;
}
a:hover {
  text-decoration: none;
}

/* =====================================
   共用樣式
===================================== */
/* a - 轉場過度 */
a {
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

ul.ulset {
	margin: 0;
	padding: 0;
	list-style: none;
}
.line,
.double-line {
	clear: both;
	position: relative;
	width: 100%;
	margin: 40px 0;
	border-top: 1px solid #EEE;
}
/* Post Elements
-----------------------------------------------------------------*/

img.alignleft,
div.alignleft {
	float: left;
	margin: 5px 20px 13px 0;
	max-width: 100%;
}

div.alignleft > img,
div.alignnone > img,
div.aligncenter > img,
div.alignright > img {
	display: block;
	float: none;
}

img.alignnone,
img.aligncenter,
div.alignnone,
div.aligncenter {
	display: block;
	margin: 10px 0;
	float: none;
}

img.aligncenter,
div.aligncenter,
div.aligncenter img {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

img.alignright,
div.alignright {
	float: right;
	margin: 5px 0 13px 20px;
}
/* 清除浮動、清除浮動+高度 */
.clearboth,
.space15 {
	clear: both;
	font-size: 0;
	overflow: hidden;
}
.space15 {
	height: 15px;
}

/*************************
Typography 
**************************/

.font1 {
	font-size: 15px;
	line-height: 26px;
	color: #1d2088;
	font-weight: bold;
}
.font2 {
	font-size: 12px;
	line-height: 22px;
	color: #df0500;
}
.font3 {
	font-size: 13px;
	line-height: 20px;
	color: #666;
}

/*************************
 Footer CSS
**************************/
#footer {
	float: left;
	width: 100%;
}
.footertop {
	width: 100%;
	float: left;
	padding-top: 25px;
	padding-bottom: 15px;
	background: #333;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}
.footer_global .info_block {
	float: left;
	width: 14%;
	padding-left: 1%;
	list-style-type: none;
}
.footer_global h4 {
	font-size: 15px;
	line-height: 20px;
	color: #fff;
	display: block;
	float: left;
	width: 100%;
	padding: 0 0 5px 0;
	margin: 0; 
}
.footer_global h4 a {
	color: #fff;
	text-decoration: none;
}
.footer_global h4 a:hover {
	color: #008519;
	text-decoration: none;
}
.footer_global .info_block ol {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.footer_global .info_block li {
	margin-top: 2px;
	font-size: 13px;
	line-height: 18px;
	color: #999;
	margin-bottom: 2px;
	display: block;
	float: left;
	width: 100%;
}
.footer_global .info_block li a {
	text-decoration: none;
	color: #999;
}
.footer_global .info_block li a:hover {
	color: #f9bb04;
	text-decoration: underline;
}
/*.footertop ul.s {
	float: left;
	width: 14%;
	padding-left: 1%;
	list-style-type: none;
}
.footertop ul.s li.tit {
	font-size: 15px;
	line-height: 20px;
	color: #333;
	margin-bottom: 10px;
	display: block;
	float: left;
	width: 100%;
}
.footertop ul.s li.tit a {
	color: #333;
	text-decoration: none;
}
.footertop ul.s li.tit a:hover {
	color: #008519;
	text-decoration: none;
}
.footertop ul.s li {
	margin-top: 2px;
	font-size: 13px;
	line-height: 18px;
	color: #999;
	margin-bottom: 2px;
	display: block;
	float: left;
	width: 100%;
}
.footertop ul.s li a {
	text-decoration: none;
	color: #999;
}
.footertop ul.s li a:hover {
	color: #f9bb04;
	text-decoration: underline;
}*/
.footertop ul.basic {
	float: right;
	width: 30%;
	padding-left: 1%;
}
.footertop ul.basic li.tit {
	font-size: 16px;
	line-height: 20px;
	color: #fff;
	margin-bottom: 5px;
	display: block;
	float: left;
	width: 100%;
	font-weight: bold;
}
.footertop ul.basic li {
	margin-top: 2px;
	font-size: 13px;
	line-height: 20px;
	color: #999;
	margin-bottom: 3px;
	display: block;
	float: left;
	width: 100%;
}
.footertop ul.basic li a {
	text-decoration: none;
	color: #999;
}
.footertop ul.basic li a:hover {
	color: #f9bb04;
	text-decoration: underline;
}
.footertop ul.basic li i {
	margin-right: 6px;
	text-align: center;
	float: left;
	width: 15px;
	line-height: 20px;
	color: #f9bb04;
}
.footertop ul.basic li span {
	display: block;
	float: left;
	width: 45px;
}
.footerbottom {
	width: 100%;
	float: left;
	background: #333;
}
.footerbottom .copyright {
	font-size: 12px;
	line-height: 17px;
	color: #a3a3a3;
	padding-top: 15px;
	float: left;
	text-align: right;
	width: 100%;
	padding-bottom: 15px;
}
.footerbottom .copyright A:link {color:#a3a3a3;text-decoration:none}
.footerbottom .copyright A:visited {color:#a3a3a3;text-decoration:none}
.footerbottom .copyright A:hover {color:#ffa12e;text-decoration:underline}

.footerbottom .mreport {
	float: left;
	margin-left: 5px;
}
.footerbottom .mreport a {
	font-size: 12px;
	line-height: 17px;
	color: #666;
	padding-top: 3px;
	padding-right: 12px;
	padding-bottom: 3px;
	padding-left: 22px;
	text-decoration: none;
	border: 1px solid #6b6b6b;
	background-image: url(../bullet_key.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
.footerbottom .mreport a:hover {
	color: #96CB54;
	text-decoration: none;
	border: 1px solid #96CB54;
}
@media (min-width: 768px) and (max-width: 991px) {
/*.footertop ul.s {
	float: left;
	width: 20%;
	padding-right: 1%;
	padding-left: 0;
	list-style-type: none;
}*/
.footer_global .info_block {
	float: left;
	width: 20%;
	padding-left: 1%;
	padding-bottom: 10px;
	list-style-type: none;
}
.footertop ul.basic {
	float: left;
	width: 100%;
	margin-top: 5px;
	padding-top: 15px;
	padding-left: 0;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #CCC;
}

}
@media (max-width: 767px) {
.footertop ul.basic {
	float: left;
	width: 100%;
	margin-top: 5px;
	padding-top: 15px;
	padding-left: 0;
	border-top-style: none;
}
.footerbottom .copyright {
	text-align: left;
}
.footer_global h4 {
	font-size: 16px;
	line-height: 20px;
	display: block;
	float: left;
	width: 100%;
	padding: 12px 0 12px 0;
	margin: 0;
}
.footer_global .info_block{ border-bottom:1px solid #737373; width:100%;}
.footer_global .info_block{ position:relative;}
.footer_global .info_block span{ position:absolute; top:0; right:0; padding:1.2em 1.2em; transition:all .4s;}
.footer_global .info_block span.open{ -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.footer_global .info_block span:before{ content:'\f107'; font-size:1.5em; color:#c1c1c1;font-family:'FontAwesome'}
.footer_global .info_block ol{ display:none;}
.footer_global .info_block ol.open{ display:block;}
.footer_global .info_block li {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	margin-bottom: 10px;
	display: block;
	float: left;
	width: 100%;
}
.footerbottom .mreport {
	float: right;
	margin-left: 15px;
}
}
@media (max-width: 480px) {

}

/*************************
******* Home ******
**************************/
#content {
	width: 100%;
	float: left;
	position: relative;
}
.icontent {
	position: absolute;
	left: 0px;
	top: -75px;
	width: 100%;
	z-index: 99;
}

@media all and (max-width:1359px) {
	.icontent {
		top: -45px;
	}
}

.idetail {
	width: 100%;
	margin: 0;
	padding: ;
}
.idetail::after {
	content: "";
	display: block;
	clear: both;
}
.idetail .container {
	background-image: url(../line4.png);
	background-repeat: no-repeat;
	background-position: center top;
	max-width: 1130px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 45px;
	padding-right: 40px;
	padding-bottom: 30px;
	padding-left: 40px;
}
.iabout {
	float: left;
	width: 55%;
	padding-bottom: 18px;
	background-image: url(../line5.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
}
.iabout .aboutword {
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 35%;
	background-image: url(../iabout-p1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	min-height:160px;
	padding-right: 5%;
}
.iabout .aboutword .tit {
	font-size: 22px;
	line-height: 26px;
	font-weight: bold;
	color: #b28850;
	float: left;
	width: 100%;
	padding-bottom: 7px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #c2b7a4;
	margin-bottom: 10px;
}
.iabout .aboutword .tit i {
	font-size: 22px;
	line-height: 26px;
	color: #333;
	font-style: normal;
	font-weight: normal;
	padding-left: 10px;
}
.iabout .aboutword .word {
	font-size: 14px;
	line-height: 22px;
	color: #666;
	float: left;
	width: 100%;
}
.inews {
	float: right;
	width: 42%;
}
.inews .tit {
	font-size: 20px;
	line-height: 26px;
	font-weight: bold;
	color: #11644D;
	float: left;
	width: 100%;
	padding-left: 5px;
	padding-bottom: 10px;
	background-image: url(../line6.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.inews .tit i {
	font-size: 18px;
	line-height: 26px;
	color: #333;
	font-style: normal;
	font-weight: bold;
	padding-left: 10px;
}
.inews .more {
	float: right;
	margin-top: 15px;	
}
.inews .more a {
	background-color: #F0F0F0;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 3px 10px 4px;
	font-size: 12px;
	line-height: 15px;
	color: #666;
	font-weight: normal;
}
.inews .more a:hover {
	background-color: #11644D;
	color: #fff;
}
.inews_w {
	float: left;
	width: 100%;
}
.inews_w dl {
	width: 100%;
	float: left;
	padding-top: 7px;
	padding-right: 0px;
	padding-bottom: 7px;
	padding-left: 5px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}
.inews_w dt {
	float: left;
	font-size: 12px;
	color: #e4ba47;
	margin: 0px;
	line-height: 23px;
}
.inews_w dd {
	float: right;
	width: 80%;
	margin: 0px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
.inews_w dd a{
	color:#333;
	text-decoration: none;
}
.inews_w dd a:hover{
	text-decoration:none;
	color:#00a0e9;
}

@media (min-width: 992px) and (max-width: 1099px) {
.idetail .container {
	background-image: url(../line4-1.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 992px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 45px;
	padding-right: 35px;
	padding-bottom: 30px;
	padding-left: 35px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.idetail .container {
	background-image: url(../line4-2.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 768px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 45px;
	padding-right: 40px;
	padding-bottom: 30px;
	padding-left: 40px;
}
.iabout {
	float: left;
	width: 100%;
}
.iabout .aboutword {
	float: left;
	width: 100%;
	padding-left: 28%;
	min-height:150px;
	padding-right: 5%;
}
.inews {
	float: left;
	width: 100%;
	padding-top: 20px;
}
.inews_w dd {
	float: right;
	width: 87%;
}
}
@media (max-width: 767px) {
.icontent {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 99;
}
.idetail .container {
	background-image: url(../line4-3.png);
	background-repeat: repeat-x;
	background-position: 0 top;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 40px;
	padding-right: 15px;
	padding-bottom: 40px;
	padding-left: 15px;
}
.iabout {
	float: left;
	width: 100%;
}
.iabout .aboutword {
	float: left;
	width: 100%;
	padding-left: 30%;
	min-height:150px;
	padding-right: 5%;
}
.inews {
	float: left;
	width: 100%;
	padding-top: 20px;
}
.inews_w dl {
	width: 100%;
	float: left;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
}
.inews_w dt {
	float: left;
	font-size: 12px;
	margin: 0px;
	line-height: 23px;
	padding-left: 0px;
	width: 100%;
}
.inews_w dd {
	float: left;
	width: 100%;
	margin: 0px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
}
@media (max-width: 650px) {
.iabout .aboutword {
	float: left;
	width: 100%;
	padding-left: 35%;
	min-height:160px;
	padding-right: 5%;
}
}
@media (max-width: 480px) {
.iabout .aboutword {
	float: left;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 10px;
	padding-left: 35%;
	background-image: url(../iabout-p1-1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	min-height:190px;
	padding-right: 3%;
}
}




.icertificate{
	padding: 60px 0 10px;
	background:  url(../index_07.jpg); 
}
.icertificate h3{
	font-weight: bold;
	color: #f9b700;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	margin: 0 0 20px;
}
.icertificate h5{
	font-size: 12px;
	text-align: center;
	color: #f9b700;
	text-transform: uppercase;
	margin: 0 0 20px;
}




.supplier{
	padding: 30px 60px;
	color: #fff;
	background: #f8bf16;
	display: flex;
	flex-flow: wrap;
}
.supplier section{
	flex: 1;
}
.supplier section:nth-of-type(2){
	
}

.supplier section:nth-of-type(1) h3{
	font-weight: bold;
	letter-spacing: 3px;
	margin: 8px 0 8px;
}
.supplier section:nth-of-type(1) h5{
	color: #ccc;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-right: 5px;
}


.supplier ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}
.supplier ul li{
	margin: 5px;
	text-align: center;
}
.supplier ul li .pic{
}
.supplier ul li .pic img{
	width: auto;
	max-height: 60px;
	display: block;
}

@media (max-width: 767px) {
	.supplier{
		padding: 20px 15px;
	}
}


/* =====================================
   banner
===================================== */
#banner {
	width: 100%;
	float: left;
}