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

@import "routine.css";




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

/*-------------header----------------*/

.header-box{
	box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

header{
	background:#FFFFFF url(../tw_img/other/bg.jpg) left top repeat-x;
}

.logo{
	margin-top:35px;
	margin-bottom:15px;
	overflow:hidden;
}


ul.lang{
	list-style-type:none;
	float:right;
}

ul.lang li{
	float:left;
	margin-right:8px;
}

ul.lang li a img{
	margin-top:2px;
}

ul.lang li button[type='button']{
	background:#00a0e9;
	color:#fff;
	font-size:20px;
}


@media (max-width:992px){
.logo-img{
	margin:0 auto;
}

ul.lang{
	display:block;
	clear:both;
	text-align:center;
	padding-left:0;
	margin:0 auto;
}
}

@media (max-width:450px){
ul.lang li input[type='search']{
	width:160px;
}
}

@media (max-width:350px){
ul.lang li input[type='search']{
	width:120px;
}
}

@media (max-width:300px){
ul.lang li input[type='search']{
	width:85px;
}
}



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

nav ul{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a0e9+26,144b78+98 */
	background: rgb(0,160,233); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,160,233,1) 26%, rgba(20,75,120,1) 98%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,160,233,1) 26%,rgba(20,75,120,1) 98%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,160,233,1) 26%,rgba(20,75,120,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0e9', endColorstr='#144b78',GradientType=0 ); /* IE6-9 */

	padding: 0;
	margin: 0;
	text-align: center;
	overflow: hidden;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}

nav ul a{
	margin: 8px auto;
    padding: 3px 3%;
	border-right: 1px solid #fff;
	display: inline-block;
	text-decoration: none;
	color:#fff;
	font-family:"微軟正黑體";
	font-size:1.6rem;
	letter-spacing:0.05rem;
	font-weight:bold;
}

nav ul a:last-child{
	border-right:none;
}

nav ul a li{
	
    display: inline-block;
}

nav ul li:hover{
	color:rgba(255,206,0,1.00);
	
}

.handle {
	width: 100%;
	background-color: #144b78;
	box-sizing: border-box;
	padding: 15px;
	cursor: pointer;
	color: white;
	display: none;
}
p.menu{
	display: inline-block;
	font-size:2.2rem;
	font-weight:bold;
	margin-bottom:0;
}
.menu_icon div {
  background-color: white;
  border-radius: 2px;
  width: 35px;
  height: 5px;
  margin: 5px;
}
.menu_icon{
	float: right;
}

i.navIcon{
	display:none;
	padding-right:1rem;
	font-size:1.8rem;
}


@media (max-width:768px){
nav ul a{
    padding: 3px 2.5% 8px;
	width:100%;
	border-right:none;
	border-bottom:1px dotted #FFFFFF;
}

nav ul{
	max-height: 0px;
}
nav ul li{
	box-sizing: border-box;
	width: 100%;
	padding: 0;
}
.showing{
	max-height: 21em; 
}
.handle{
	display: block;
}

i.navIcon{
	display:inline-block;
}
}

/*----------index content-------------*/

.about h1{
	text-transform:uppercase;
	color:#1a619f;
	font-family:Arial;
	font-size:2.5rem;
	font-weight:bolder;
	text-align:center;
}

.about>p{
	display:block;
	color:#fff;
	background:#1a619f;
	font-size:1.5rem;
	text-align:center;
	padding:1rem;
	font-family:"微軟正黑體";
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:0.05rem;
}

.about>p a{
	color:#ace7df;
}

.news_index h1{
	text-transform:uppercase;
	color:#3899a1;
	font-family:Arial;
	font-size:2.5rem;
	font-weight:bolder;
	text-align:center;
}

.news_index>p{
	display:block;
	color:#fff;
	background:#3899a1;
	font-size:1.5rem;
	text-align:center;
	padding:1rem;
	font-family:"微軟正黑體";
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:0.05rem;
}

.news_index>p a{
	color:#ace7df;
}

.text{
	font-size:1.4rem;
	line-height:2.2rem;
	text-align:justify;
	letter-spacing:0.05rem;
	-ms-text-justify: inter-ideograph; /*IE9*/
}

.hotnews{
	padding-left:5px;
	margin-bottom:20px;
	margin-top:15px;
	border-bottom:1px dashed rgba(0,0,0,1.00);
}

.hotnews p.data02{
	margin-bottom:5px;
	font-size:1.5rem;
	font-weight:bold;
}

.hotnews p.data02 span{
	margin-left:5px;
	color:#3899a1;
	font-size:1.5rem;
}


/*-------------hot pro----------------*/


.hot-pro h1{
	font-family:"微軟正黑體" !important;
	text-transform:uppercase;
	color:#1a619f;
	font-family:Arial;
	font-size:2.5rem;
	font-weight:bolder;
	text-align:center;
}

.hot-pro h1 span{
	font-family:Arial;
	color:#3899a1;
}

.hot-pro-carousel{
	background:rgba(229,245,157,1.00) url(../tw_img/index/hot-Pro-bg.jpg) left top no-repeat;
	background-size:cover;
}


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

.company{
	margin-bottom:80px;
}

footer{
	border-top: 2px solid #3899a1;
}

.footer01{
	margin-bottom:20px;
	margin-top:20px;
	background:url(../tw_img/index/footer_bg.jpg) no-repeat;
	background-size:cover;
	height:167px;
	padding:10px 5px;
}

.footer01 h1{
	text-transform:uppercase;
	color:#1a619f;
	font-family:"微軟正黑體";
	font-size:2.5rem;
	font-weight:bolder;
	margin-top:0;	
}

.footer01 ul{
	list-style-type:none;
	margin-bottom:0;
	padding-left:0;
	padding-bottom:10px;
}

.footer01 ul li{
	display:inline;
	margin-right:2%;
	line-height:2.5rem;
	letter-spacing:0.05rem;
}

.footer01 ul li i{
	color:#37c9f0;
	margin-right:10px;
	font-size:1.6rem;
}

.footer01 ul li a{
	color:#535353;
}

.footer02{
	margin-bottom:20px;
	margin-top:20px;
	background:url(../tw_img/index/footer_map.jpg) no-repeat;
	background-size:cover;
	height:167px;
	cursor:pointer;
}

.footer-2{
	background:#1a619f;
	text-align:center;
	padding:10px 0;
	color:#fff;
	letter-spacing:0.05rem;
}

.footer-2 ul{
	list-style-type:none;
	margin-bottom:0;
	padding-left:0;
}

.footer-2 ul li a{
	color:#fff;
	text-decoration:none;
}

.footer-2 ul br{
	display:none;
}

.footer-2 ul li{
	display:inline;
	margin-right:2%;
	line-height:2.5rem;
}


@media (max-width:768px){

.company{
	margin-bottom:30px;
}

	
.footer01 ul li{
	margin-right:0;
}

.footer-2 ul br{
	display:block;

}
}

@media (max-width:450px){
.footer01{
	text-align:left;
	padding:2rem 5px 0;
	height:auto;
}
}


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

.title{
	border-bottom:1px solid #eee;
	margin-bottom:25px;
}

.title h1{
	font-size:2rem;
	color:#1a619f;
	font-family:"微軟正黑體";
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:7px;
}

.title h1 span span.title4{
	color:#3899a1;
	font-size:1.4rem;
}

.title h1 span.breadcrumb2{
	font-size:1.4rem;
	color:#535353;
	font-weight:100;
	float:right;
}

.breadcrumb3{
	font-size:1.4rem;
	color:#535353;
	font-weight:100;
	padding:10px 5px;
	display:none;
	float:right;
}

.title h1>span.title-box{
	padding:6px 20px 6px 15px;
	border:1px solid #eeeeee;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+0,ffffff+100 */
	background: rgb(243,243,243); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(243,243,243,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

@media (max-width:1200px){
.breadcrumb3{
	display:block;
}

.title h1 span.breadcrumb2{
	display:none;
}
}



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

.pro-container{
	width:95%;
	margin:auto;
}

.title2{
	border-bottom:1px solid #eee;
}

.title2 h1{
	font-size:2rem;
	color:#1a619f;
	font-family:"微軟正黑體";
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:7px;
	margin-top:30px;
}

.title2 h1 span span.title3{
	color:#3899a1;
}

.title2 h1 span.breadcrumb2{
	font-size:1.4rem;
	color:#535353;
	font-weight:100;
	float:right;
	text-transform:capitalize;
}

.breadcrumb3{
	font-size:1.4rem;
	color:#535353;
	font-weight:100;
	padding:10px 5px;
	display:none;
	float:right;
}

.title2 h1>span.title-box{
	padding:6px 20px 6px 15px;
	border:1px solid #eeeeee;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+0,ffffff+100 */
	background: rgb(243,243,243); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(243,243,243,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

@media (max-width:1200px){
.breadcrumb3{
	display:block;
}

.title2 h1 span.breadcrumb2{
	display:none;
}
}




.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{
  
}

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

.pro_list_item figure.pro_list_inner img{
	border:1px solid #ddd;
}

.pro_list_item figure.pro_list_inner:hover img{
	border:3px solid #3899a1;
}


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

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


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

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


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

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

figcaption span{
	color:#37c9f0;
	padding-right:5px;
}

.page{
	text-align:center;
	margin-top:20px;
	margin-bottom:40px;
}

.page ul{
	list-style-type:none;
	padding-left:0;
}

.page ul li{
	display:inline-block;
}

.page ul li a{
	color:#1a619f;
	padding:5px;
}

.page ul li a:hover, .page ul li a.active-page{
	color:#ff2b2d !important;
}



/*----------product detail-------------*/

.pro-box{
	margin-top:25px;
}

.pro-box img{
	border:1px solid #eee;
}

.proInfoBox{
	border-bottom:1px dotted #626262;
	padding-bottom:10px;
	margin-bottom:20px;
}

.proInfo{
	font-size:1.5rem;
	font-family:"微軟正黑體";
	font-weight:bold;
	color:#000;
}

.proInfo span.name{
	color:#1a619f;
	padding-right:0.5rem;
	letter-spacing:1px;
	font-size:1.6rem;
	white-space:nowrap;
}


.proBtn{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c5c7c8+6,f8f8f8+84 */
	background: rgb(197,199,200); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(197,199,200,1) 6%, rgba(248,248,248,1) 84%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(197,199,200,1) 6%,rgba(248,248,248,1) 84%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(197,199,200,1) 6%,rgba(248,248,248,1) 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5c7c8', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	border:1px solid #adadad;
	border-radius:5px;
	margin:0.5rem 0;
	width:150px;
	color:#000;
	padding:8px
}
.proBtn:hover{
	box-shadow:0 0 2px rgba(0,0,0,0.3);
}

.info-bar{
	background-color:#eee;
	border-left:5px solid #ccc;
	padding:7px 0 7px 20px;
	font-size:1.6rem;
	letter-spacing:1px;
	margin-top:20px;
	margin-bottom:20px;
}

.info-bar p{
	margin:0;
}

.proBox{
	margin-left:20px;
}

.pro-word{
	margin-bottom:20px;
}

.pro-word table{
	text-align:center;
}

.pro-word table tbody tr th{
	background-color:#1f619f;
	color:#fff;
	text-align:center;
}

@media (max-width:992px){
.proInfoBox{
	margin-top:20px;
}

.proBox{
	margin:0 auto;
}
}

@media (max-width:768px){

.proBox{
	/*text-align:center;*/
	margin-left:0;
}

#button-wrap-inner{
	text-align:center;
}
}

@media (max-width:500px){
.proInfo{
	padding-left:5px;
}

.proBtn{
	width:100%;
}
}


/*************************************/
/*              inquiry              */
/*************************************/

.proInquiry{
	margin-top:20px;
}

.proInquiry table{
	font-size:1.4rem;
}

.proInquiry table tr td{
	background-color:rgba(255,255,255,1.00);
	text-align:center;
}

.proInquiry table thead tr th{
	text-align:center;
}

.proInquiry table tr td a:hover{
	color:#000;
}

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

.inq_title{
	color:#1f619f;
	font-size:18px;
	font-family:"微軟正黑體";
	text-align:left;
	letter-spacing:1px;
	padding:0;
}

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

.btn_con{
	font-family:"微軟正黑體";
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+16,c5c7c8+84,c5c7c8+84 */
	background: rgb(247,247,247); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(247,247,247,1) 16%, rgba(197,199,200,1) 84%, rgba(197,199,200,1) 84%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 16%,rgba(197,199,200,1) 84%,rgba(197,199,200,1) 84%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(247,247,247,1) 16%,rgba(197,199,200,1) 84%,rgba(197,199,200,1) 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c5c7c8',GradientType=0 ); /* IE6-9 */

	color:#000;
	width:120px;
	height:35px;
	vertical-align:middle;
	text-align:center;
	/*line-height:35px;*/
	margin:0 5px 10px;
	font-size:1.5rem;
	border-radius:5px;	
	border:1px solid #adadad;
}

.btn_con:hover{
	color:#000;
	text-decoration:none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+16,c5c7c8+84,c5c7c8+84 */
	background: rgb(247,247,247); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(247,247,247,1) 16%, rgba(197,199,200,1) 84%, rgba(197,199,200,1) 84%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 16%,rgba(197,199,200,1) 84%,rgba(197,199,200,1) 84%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(247,247,247,1) 16%,rgba(197,199,200,1) 84%,rgba(197,199,200,1) 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c5c7c8',GradientType=0 ); /* IE6-9 */
	box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}

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

.proInquiry a {
    color: #3f3f3f;
	font-size:1.7rem;
	font-weight:800;
}


@media (max-width:768px) {

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

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

.proInquiry{
	width:100%;
}
}

/*************************************/
/*             sitenews              */
/*************************************/


.newsTitleBorder{
	overflow:auto;
}

.newsTitle{
	text-align:left;
	vertical-align:middle;
	display:block;
	background-color:#1a619f;
	padding-left:5px;
	width:100%;
}

.newsTitle p{
	text-align:left;
	padding:0;
	font-size:1.5rem;
	margin-top:10px;
	color:#fff;
}

.dataTitle p{
	text-align:center !important;
}

.news{
	font-size:1.4rem;
	overflow:auto;
	border-bottom:1px solid #d1d1d1;
	color:hsla(0,0%,0%,1.00);
	background-color:#fff;
}

.news .subj{
	line-height:2.5rem;
	padding-bottom:9px;
	padding-top:9px;
}

.news .subj a{
	text-decoration:none;
	color:rgba(0,0,0,1.00);
}

.news .subj a:hover{
	text-decoration:none;
	color:rgba(0,108,185,1.00);
}

.news .data{
	line-height:2.5rem;
	padding-bottom:8px;
	padding-top:8px;
	text-align:center;
	color:rgba(0,0,0,0.6);
	font-weight:bold;
}

.news .data2{
	line-height:2.5rem;
	padding-bottom:8px;
	padding-top:8px;
	text-align:center;
	color:rgba(0,0,0,0.6);
}

.test{
	display:block;
	background-color:#1b619f;
	color:#fff;
	text-align:center;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
	
}

.test2{
	display:block;
	background-color:#f0f1f3;
	color:#000;
	padding-top:10px;
	padding-bottom:10px;
	
	padding-left:20px;	
}

.news-tr{
	display:block;
	overflow:hidden;
	border-bottom:1px solid #9fa0a2;
}


#newsBack{
	float:right;
	border-radius:5px;
	width:150px;
	text-align:center;
	margin-top:20px;
}

.table-txt{
	padding-left:20px !important;
}

.data a i{
	font-size:2.5rem;
	padding-top:3px;
	color:#626262;
}

.data a i:hover{
	color:#474747;
}

@media (max-width:992px){


}

@media (max-width:768px){
.news .data, .news .data2{
	text-align:left;
	padding-left:20px;
}

.newsDetail .data{
	text-align:left;
}

.newsCon{
	width:100%;
	margin-left:0;
}

.dataTitle{
	display:none;
}

.newsTitle{
	text-align:left;
}

.news .data{
	line-height:0.5rem;
	padding-top:15px;
	margin-bottom:8px;
}

.test, .test2{
	text-align:left;
	padding-left:10px;
}

 .test2{
	 padding-top:12px;
	 padding-bottom:20px;
}

.test3{
	text-align:center;
	padding-left:0;
}

.test4{
	text-align:center;
}

.table-txt{
	padding-left:0 !important;
}

.news .data, .news .data2{
	padding-left:15px;
}

}

@media (max-width:500px){

#newsBack{
	width:100%;
}

.test4{
	text-align:left;
}
}

/*************************************/
/*               contact             */
/*************************************/

.contact-box{
	background:#fff url(../tw_img/other/contact_bg.jpg) left top no-repeat;
	border-radius:8px;
	overflow:hidden;
}

.contact-con{
	padding-top:40px;
	width:70%;
	margin-left:60px;
}

.contact-con p{
	padding-left:10px;
}

@media (max-width:992px){
.contact-con{
	width:89%;
	margin-left:40px;
}
}

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

@media (max-width:550px){
.contact-box{
	background-size:cover;
}	

}

/*----------220517----------*/
.slider_frame{
	margin: 0 5px;
}

.slider_frame a img{
	background: #fff;
}