@charset "utf-8";
/* CSS Document */

@import "routine.css";

body{
	background:url(../tw_img/other/body_bg.jpg) top left repeat-x;
}


/*************************************/
/*                index              */
/*************************************/

.lang{
	background-color:#151411;
	border-top:3px solid #00a9ec;
	border-bottom:1px solid rgba(83,83,83,1.00);
	height:23px;
}

.header01{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2e2e2e+0,848484+100 */
	background: rgb(46,46,46); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(46,46,46,1) 0%, rgba(132,132,132,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(46,46,46,1) 0%,rgba(132,132,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(46,46,46,1) 0%,rgba(132,132,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e2e', endColorstr='#848484',GradientType=0 ); /* IE6-9 */

	height:auto;

}

#home{

	background-color:#3576a7;
}

@media (max-width:768px){
.headSid{
	display:none;
}

.header01 img{
	padding:5px;
}
}

/*------------footer---------------*/

footer .container{
	background:#3576a7;
	border-radius:0 0 10px 10px;
}

.footerUl2{
	list-style-type: none;
	color:#fff;
	font-size:1.3rem;
	/*padding:2rem 20rem;*/
	/*text-align:center;*/
	margin-left:-3rem;
	margin-top:2rem;
	line-height:2rem;
	text-align:center;
}

.footerUl2 li{
	display:inline;
	/*padding:0 1%;*/
}

.footerUl2 li a{
	color:#ffcc00;
}

.footerUl2 li a:hover{
	text-decoration:none;
}

.vLine2{
	color:#fff;
	font-size:1.2rem;
}

#gotop {
    bottom: 20px;
    cursor: pointer;
    font-size: 20px;
    padding: 10px 15px;
    position: fixed;
    right: 3%;
	height: 54px;
    width: 54px;
	background-image:url(../tw_img/other/top.png);
	background-repeat:no-repeat;
	z-index:101010;
}

@media (max-width: 991px) {
.footerUl2{
	text-align:center;
	float:none;
}
}

@media (max-width: 650px) {
  
.footerUl2{
	text-align:center;
	font-size:1.2rem;
	/*padding:2rem 1rem;*/
}

.footerUl2 li{
	  display:inherit;
}

.vLine2{
	display:none;
}

}



/*************************************/
/*              company              */
/*************************************/

.lang p{
	color:#fff;
	text-align:right;
	font-size:1.2rem;
	padding:0;
}

.lang p a{
	color:#fff;
	text-decoration:none;
	padding-left:3px;
	padding-right:3px;
}

.conBox{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e7e7e7+0,ffffff+100 */
	background: rgb(231,231,231); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(231,231,231,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(231,231,231,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(231,231,231,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	padding-bottom:15px;
	overflow:hidden;
	border-radius:0 0 10px 10px;
	border-bottom:3px solid #303030;
}


/*---------- nav -----------*/

.content .lead {
  text-align: center;
  font-weight: 500;
  font-size: 32px;
  color: #333;
}

.menu {
  background: #e0e0e1;
  border-radius:10px;
  width:85%;
  float:right;
  margin-top:4%;
}
.menu:after {
  content: "";
  display: table;
  clear: both;
}
.menu .handler {
  color:rgba(0,0,0,0.8);
  padding: 1em 0;
  text-align: center;
  background: #e0e0e1;
  display: none;
  cursor: pointer;
  font-weight: 700;
  font-size:1.8rem;
  box-shadow:0 2px 2px rgba(0,0,0,0.2);
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.menu li a {
  font-family:"微軟正黑體"; 
  font-size:1.5rem;
  float: left;
  width:19%;
  padding: 1.5% 0;
  color: #000;
  text-decoration: none;
  display: block;
  text-align:center;
}

.menu li a:hover, .menu li a.active {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4b38a+0,c3410a+100 */
	background: rgb(244,179,138); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(244,179,138,1) 0%, rgba(195,65,10,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(244,179,138,1) 0%,rgba(195,65,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(244,179,138,1) 0%,rgba(195,65,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b38a', endColorstr='#c3410a',GradientType=0 ); /* IE6-9 */
	color:#fff;
}

.menu ul li:first-child{
	margin-left:2%;
}

.menu ul li i{
	padding-right:5px;
	display:none;
}


@media (max-width:1200px){

}

@media (max-width:992px){
.menu {
  width:100%;
  border-radius:0;
}
}

/* Media Queries */
@media only screen and (max-width: 768px) {
  .menu .handler {
    display: block;
  }
  .menu ul {
    display: none;
  }
  .menu ul li{
    display: block;
	border-top:1px solid rgba(255,255,255,0.5)
  }
  .menu li a {
    display: block;
    padding: 1em;
    float: none;
    width: 100%;
	text-align:center;
  }
  
  .menu ul li i{
	display:inline-block;
}

.menu ul li:first-child{
	margin-left:0;
}
}



.header-bar{
	background:rgba(0,0,0,1.00) url(../tw_img/other/bar.jpg) top left no-repeat;
	background-size:contain;
	padding-bottom:4.7%;
}


@media (max-width:768px){
.header-bar{
	background:rgba(0,0,0,1.00) url(../tw_img/other/bar-2.jpg) top left no-repeat;
	background-size:contain;
	padding-bottom:7.2%;
}
}


/*----------side-------------*/

.menuBox{
	width:95%;
	margin:0 auto;
}

.menuImg{
	color:#1e4d6b;
	padding-bottom:0;
	padding-top:2rem;
	font-family:"微軟正黑體";
}

.listInfo{
	padding:5px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#869eb1+0,f7f7f7+100 */
	background: rgb(134,158,177); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(134,158,177,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(134,158,177,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(134,158,177,1) 0%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#869eb1', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

.listInfo>ul{
	background-color:#fff;
}

.sideBox{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+33,f7f7f7+100 */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 33%, rgba(247,247,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(247,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 33%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
	overflow:auto;
}

.menu2{
	padding-left:10px;
	list-style-type:none;
/*	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;*/
}

ul.menu2>li>a{
	font-size:1.4rem;
	color:#006699;
	font-weight:bold;
}

ul.menu2>li>a:hover{
	color:#0087ca;
}

ul.menu2>li>a span.sideIcon{
	font-size:2rem;
	color:#e77309;
	padding-right:0.3rem;
	/*vertical-align:middle;*/
}

ul.menu2>li:first-child{
	padding-top:15px;
}

ul.menu2>li:last-child{
	margin-bottom:150px;
}

ul.menu2>li{
	line-height:2.5rem;
	border-bottom:1px solid #d2d2d2;
	padding:5px;
	margin-right:8px;
}

ul.menu2>li>ul{
	list-style-type:none;
	font-size:1.3rem;
	color:rgba(0,0,0,1.00);
	padding-left:20px;
}

.menuBox>ul>a:hover{
	text-decoration:none;
}

.menuIcon{
	display:none;
}

.kind-title>p{
	color:#000;
	font-size:2.2rem;
	font-family:"微軟正黑體";
	vertical-align:middle;
	padding:3px;
	margin-top:4rem;
	border-bottom:2px solid #adaeae;
	font-weight:bold;
}

.kind-title>p>span.k2{
	color:#000;
	font-size:2.2rem;
	font-family:"微軟正黑體";
	vertical-align:middle;
	padding:3px;
	margin-top:4rem;
	font-weight:bold;
	line-height:3rem;
}


.kind-title>p>i{
	font-size:3.2rem;
	padding-right:0.5rem;
	vertical-align:middle;
	color:rgba(58,58,58,0.8);
}

.kind-title>p>span.k2-icon{
	font-size:3.2rem;
	padding-right:0.5rem;
	color:rgba(58,58,58,0.8);
	vertical-align:middle;
}

.cont-text{
	font-size:1.5rem;
	color:#000;
	line-height:2.5rem;
	letter-spacing:0.1rem;;
	text-align:justify;
}

.cont-text>span{
	color:#d85000;
}

.cont-text2{
	color:#c97900;
	font-size:1.5rem;
	font-weight:bold;
	line-height:2.5rem;
}

.cont-text2-1{
	color:#c97900;
	font-size:1.5rem;
	font-weight:bold;
	line-height:2.5rem;
	padding-left:5px;
}

.cont-text3{
	color:#003333;
	font-size:1.4rem;
	font-weight:bold;
	padding-bottom:0;
	margin-bottom:0;
	font-family:Arial;
}

.cont-text4{
	color:#000;
	font-size:1.4rem;
	line-height:2rem;
	padding-bottom:0;
	margin-bottom:0;
	font-family:Arial;
}

.cont-text5{
	color:#000;
	font-size:1.4rem;
	vertical-align:super;
	padding-left:0;
	border-bottom:1px dashed rgba(0,0,0,1.00);
	line-height:2.3rem;
}

.blue{
	color:#336699;
	font-family:Arial;
	font-size:2.2rem;
}

.ver-mid{
	vertical-align:middle;
}

.kind-title p span{
	color:#768085;
	font-size:1.3rem;
	padding-left:0.5rem;
	letter-spacing:0.03rem;
}

@media (max-width:768px){
.menuBox{
	width:100%;
	margin:0 auto;
	cursor:pointer;
}	

.menuBox>ul>li{
	text-align:center;
	/*padding-left:0;*/
	padding:0.5rem 2%;
}

.menu2{
	display:none;
}

.menuIcon{
	color:rgba(0,0,0,0.7) !important;
	display:inline;
	float:right;
	font-size:2.5rem;
}

.menuBox>ul>a{
	padding-left:0;
}

.web-breadcrumb{
	margin-right:10px;
}

.cont-text2, .cont-text3, .cont-text4{
	font-size:1.3rem;
}

.cont-text4{
	text-align:justify;
}
}


@media (max-width:768px){
.contentBox{
	width:100%;
	margin-left:0;
}

.comImg{
	display:none;
}
}

@media (max-width:750px){
ul.menu2>li:last-child{
	margin-bottom:30px;
}
}

@media (max-width:500px){
.kind-title>p>span.k2-icon{
	vertical-align:baseline;
}
}


/*************************************/
/*              product              */
/*************************************/

.pro_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 10px 0;
  margin: 0;
}

.pro_list li:hover figure{
/*  opacity:0.8;*/
}

/*.pro_list li:hover figcaption{
  color:#134e60;
  background-color:#b0e4f2;
}*/

.pro_list_item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 33.333%;
  padding: 0.625rem;
  margin: 0;
}

.kind-title br{
	display:none;
}

.kind p{
	color:rgba(2,90,172,1.00);
	font-size:1.8rem;
	font-weight:bold;
	padding-bottom:0;
	margin-bottom:0;
	padding-left:2rem;
}

.product_ps{
	font-size:1.4rem;
	color:#444;
	line-height:2.2rem;
	letter-spacing:0.03rem;
	padding:0;
	margin:0;
	font-weight:500;
}

.pro-information{
	margin:3rem auto 1rem;
}

.pro-information .table-bordered > thead > tr > th,
.pro-information .table-bordered > tbody > tr > th,
.pro-information .table-bordered > tfoot > tr > th,
.pro-information .table-bordered > thead > tr > td,
.pro-information .table-bordered > tbody > tr > td,
.pro-information .table-bordered > tfoot > tr > td {
    border: 1px solid #85abb9;
}

.pro-information .table-bordered > thead > tr > th,
.pro-information .table-bordered > tbody > tr > th,
.pro-information .table-bordered > tfoot > tr > th
 {
	 background:#205e8c;
	 color:#fff;
	 font-size:1.4rem;
	 font-weight:500;
	 text-align:center;
	 width:20%;
	 line-height:2.5rem;
}

.pro-information .table-bordered > thead > tr > td,
.pro-information .table-bordered > tbody > tr > td,
.pro-information .table-bordered > tfoot > tr > td {
   background:#cce7ef;
   color:#333;
   font-size:1.4rem;
   font-weight:500;
   text-align:left;
   line-height:2.5rem;
}

#newsBack{
	float:right;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3281b9+0,578ab6+49,256499+50,235486+100 */
	background: rgb(50,129,185); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(50,129,185,1) 0%, rgba(87,138,182,1) 49%, rgba(37,100,153,1) 50%, rgba(35,84,134,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(50,129,185,1) 0%,rgba(87,138,182,1) 49%,rgba(37,100,153,1) 50%,rgba(35,84,134,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(50,129,185,1) 0%,rgba(87,138,182,1) 49%,rgba(37,100,153,1) 50%,rgba(35,84,134,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3281b9', endColorstr='#235486',GradientType=0 ); /* IE6-9 */
	border:1px solid #1e90fc;
	border-top:2px solid #84b3d5;
	border-radius:5px;
	width:150px;
	text-align:center;
	margin-top:3rem;
}

#newsBack:hover{
	box-shadow:1px 2px 3px rgba(0,0,0,0.5);
}

#newsBack a{
	color:#fff;
	padding:6px 40px;
}

#newsBack:hover a{
	color:#E4E4E4;
}

.btn_back{
	position:relative;
	display:block;
	background: #8dbe3d;

	color:#fff;
	width:140px;
	height:35px;
	vertical-align:middle;
	text-align:center;
	line-height:35px;
	box-shadow:0 0 6px rgba(142,142,142,0.7);
	margin-bottom:30px;
	margin:60px auto 20px;
}


@media (max-width:992px){
  .pro_list_item {
    width: 50%;
  }
  
  .kind-title br{
	display:inherit;
}

}

@media (max-width:768px){
  .pro_list_item {
    width: 33.333%;
  }
}


@media (max-width:600px){
  .pro_list_item {
    width: 50%;
  }
}

@media (max-width:500px){

#newsBack{
	width:100%;
}

#newsBack a{
	color:#fff;
	padding:6px 180px;
}
}

@media (max-width:400px){
  .pro_list_item {
    width: 100%;
  }
}


.pro_list_item figure {
  margin: 0;
  padding:10px;
}

.pro_list_inner {
  width: 100%;
}
.pro_list_inner img {
  display: block;
}
.pro_list_inner figcaption {
  padding: 1.25rem;
  color:#333333;
  font-size:15px;
  text-align:center;
}

/*************************************/
/*              knowledge            */
/*************************************/

.knowledge{
	width:98%;
	letter-spacing:0.03rem;
}

.knowledge h2{
	font-size:1.4rem;
	color:rgba(0,0,0,1.00);
	font-weight:bold;
	line-height:2.2rem;
}

.knowledge h2 span.sideTxt{
	font-weight:500;
}

/*.orange-txt br{
	display:none;
}*/

.knowledge p{
	font-size:1.4rem;
	font-weight:500;
	color:rgba(0,0,0,1.00);
	line-height:2.3rem;
	padding:0;
	margin:0;
	padding-left:1rem;
}

.orange-txt{
	color:#e25400;
	line-height:2.3rem;
	font-weight:600;
}

.knowledge-1{
	background:#006699;
	line-height:4rem;
	color:#fff;
	font-size:1.5rem;
	font-weight:500;
	text-align:center;
	letter-spacing:0.03rem;
	margin:0;
	margin-top:3rem;
	padding-left:1rem;
	padding-right:1rem;
}

.knowledge-2{
	background:#eee;
	line-height:4rem;
	color:#000;
	font-size:1.4rem;
	font-weight:500;
	text-align:center;
	letter-spacing:0.03rem;
	margin:0;
	border:1px solid #d2d2d2;
	overflow:hidden;
}

.knowledge-3{
	background:#fff;
	line-height:2.5rem;
	color:#000;
	font-size:1.4rem;
	font-weight:500;
	letter-spacing:0.03rem;
	margin:0;
	border:1px solid #d2d2d2;
	overflow:hidden;
	margin-top:-1px;
	vertical-align:middle !important;	
}


.knowledge-txt{
	text-align:left;
	vertical-align:middle;
	border-left:1px solid #d2d2d2;
	height:155px;
	width:100%;
	padding-left:1rem;
	padding-right:1rem;
	display:table-cell;
	text-align:justify;
}

.knowledge-img{
	margin-top:1rem;
	margin-bottom:1rem;
}

.btline{
	border-bottom:1px solid #d2d2d2;
	overflow:hidden;
}

@media (max-width:992px){
.knowledge{
	width:98%;
	margin:0 auto;
	text-align:justify;
}

.knowledge-2{
	display:none;
}

.knowledge-img{
	margin-top:1rem;
	margin-bottom:1.5rem;
}

.knowledge-txt{
	border-left:none;
	height:auto;
}

.btline{
	padding-bottom:2rem;
}

}

@media (max-width:768px){
.orange-txt br{
	display:inherit;
}

}

@media (max-width:450px){
#knowImg{
	margin:auto;
}
}


/*************************************/
/*             contacts              */
/*************************************/

.contant-txt p{
	color:#666;
	font-size:1.4rem;
	line-height:2.5rem;
	padding:0;
	margin:0;
	letter-spacing:0.02rem;
	text-align:justify;
	font-family:Arial;
}

.contant-txt p span{
	color:#d40303;
	font-size:1.4rem;
	font-weight:bold;
}

.contant-txt p a{
	color:#e25400;
	text-decoration:none;
}

.contant-txt p a:hover{
	color:#ca4d02;
	text-decoration:underline;
}


.contactCode{
	margin-bottom:15px;
}

.getCode img{
	padding-top:5px;
	text-align:left;
}

.conBtn{
	text-align:center;
	margin:20px auto;
}

.btn_con{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#62aaff+31,2870e6+100 */
	background: rgb(50,129,185); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(50,129,185,1) 0%, rgba(87,138,182,1) 49%, rgba(37,100,153,1) 50%, rgba(35,84,134,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(50,129,185,1) 0%,rgba(87,138,182,1) 49%,rgba(37,100,153,1) 50%,rgba(35,84,134,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(50,129,185,1) 0%,rgba(87,138,182,1) 49%,rgba(37,100,153,1) 50%,rgba(35,84,134,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3281b9', endColorstr='#235486',GradientType=0 ); /* IE6-9 */
	border:1px solid #1e90fc;
	border-top:2px solid #84b3d5;
	border-radius:5px;

	color:#fff;
	width:120px;
	height:35px;
	vertical-align:middle;
	text-align:center;
	margin-bottom:10px;
	font-size:1.4rem;
}

.btn_con:hover{
	box-shadow:1px 2px 3px rgba(0,0,0,0.5);
}

input, button, select, textarea {
	border:none;
}

@media (max-width:768px) {

.getCode img{
	margin-left:-15px;
	margin-right:-15px;
}
}

@media (max-width:500px){
.btn_con{
	width:100%;
	display:block;
}
}

/*************************************/
/*                index              */
/*************************************/


/*************************************/
/*                index              */
/*************************************/