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

@import "routine.css";
@import "tw_nav.css";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
	font-family:"微軟正黑體";
}

a, a:hover, a:active, a:focus{
	text-decoration:none;
	outline:none;
  color: #434343;
}

body,html{
    height: 100%;
  }

  nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }


/*--------------------------------- index ------------------------------------*/
.ind_box{
  margin-right: 20px;
  margin-left: 20px;
}
.tip span {
	font-weight:bold;
	color:#5fbaed;
	}
.title{
	font-size:30px;
	font-weight:bold;
	color:#1b40a4;
  padding-left: 50px;
  margin-top: 35px;
}
.text{
	font-size:15px;
	color:#4c4c4c;
	line-height:40px;
  padding-left: 50px;
  margin-top: -10px;
}
@media screen and (max-width: 1200px) {
  .text {
      line-height:26px;
  }
}
@media screen and (max-width: 992px) {
  .text {
    line-height:20px;
    padding-left: 0px;
  }
}
.com_text{
  font-size: 15px;
  color: #4c4c4c;
  line-height: 20px;
  margin-top: 10px;
  padding-top: 60px;
  margin-bottom: 50px;
  padding-bottom: 60px;
}
@media screen and (max-width: 760px) {
  .com_text {
    margin-left: 30px;
  }
}
/*-------------------------------------- footer --------------------------------------*/
footer{
  line-height:25px;
	background-color: #303030;
}
.ft_copyRight{
  color:#fff;
  font-size:16px;
  padding: 23px;
  text-align:center;
  background-color: #142f79;
}
.ft_copyRight .smallword{
  padding-top: 20px;
  font-size:12px;
}
.ft_copyRight .smallword a{
  padding-top: 20px;
  font-size:12px;
  color: #fff;
}
.ft_copyRight_two{
	color:#000;
	font-size:12px;
	padding: 10px;
	text-align:center;
  background-color: #5fbaed;
}
.ft_copyRight_two a{
  color:#000;
}
.icon_d{
  padding-right: 5px;
  letter-spacing: 3px;
  padding-left: 10px;
}
.ft_word{
  color: #fff;
}
.ft_word a{
  color: #fff;
}
.ft_word a:hover{
  color: #5fbaed;
}
@media screen and (max-width: 600px) {
  .ft_word {
    display: none;
  }
}
/*------------------------------------- more ---------------------------------*/
.more{
  font-size: 16px;
  text-align:center;
  line-height:45px;
  background-color: #5fbaed;
  width:30%;
  height:auto;
  margin-left: 50px;
  margin-top: 7px;
}
.more a{
  color: #ffffff;
  display: block;
}
@media screen and (max-width: 1199px) {
  .more {
    width:40%;
    height:auto;
    /*margin-left: 0px;*/
  }
}
@media screen and (max-width: 992px) {
  .more {
    width:100%;
    height:auto;
    margin-top: 30px;
    margin-left: 0px;
  }
}
/*--------------------------------- img ------------------------------------*/
.indx_img{
  padding-right: 10px;
  text-align:center;
  margin: 0 auto;
  padding-bottom: 10px;
}

.indx_imgtitle{
  margin-top: -35px;
  margin-bottom: 25px;
}
@media screen and (max-width: 980px) {
  .indx_imgtitle {
  margin-top: -25px;
  margin-bottom: 25px;
  }
}
@media screen and (max-width: 760px) {
  .indx_imgtitle {
  width: 0px;
  height: 0px;
  margin-bottom: 40px;
  }
}
.indx_logo{
  float: right;
  margin-bottom: 10px;
  margin-top: -10px;
}
.com_box{
  width: 70%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .com_box {
    width: 90%;
  }
}
.com_bbg{
  width: 100%;
  background-image: url(../tw_images/com_bg.png);
  background-repeat: no-repeat;
}
@media screen and (max-width: 500px) {
  .com_bbg {
    background-color: #d3e9f3;
    background-image: none;
  }
}
.com_img_top{
  padding-right: 10px;
}
.com_img{
  border: 1px solid #a0a0a0;
  margin-top: 25px;
  margin-right: 28px;
  margin-bottom: 50px;
  float: left;
}
@media screen and (max-width: 1200px) {
  .com_img {
    width: 45%;
  }
}
@media screen and (max-width: 590px) {
  .com_img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.com_imgtwo{
  margin-top: 25px;
  margin-right: 20px;
  float: left;
}
@media screen and (max-width: 1200px) {
  .com_imgtwo {
    width: 45%;
  }
}
@media screen and (max-width: 590px) {
  .com_imgtwo {
    width: 100%;
    margin-bottom: 20px;
  }
}
.com_imgthr{
  margin-top: 25px;
  margin-right: 20px;
  margin-bottom: 50px;
  float: left;
}
@media screen and (max-width: 1200px) {
  .com_imgthr {
    width: 45%;
  }
}
@media screen and (max-width: 590px) {
  .com_imgthr {
    width: 100%;
    margin-bottom: 20px;
  }
}
/*---------------------------------product rotation--------------------------------*/
/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 100px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 100px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  /*width: 250px;
  height: 100px*/
}
/* End carousel */
/*-------------------------------------- head --------------------------------------*/
.language{
  font-size: 12px
  color:#6d6d6d;
  text-align: right
}
.language a:hover{
  color:#5fbaed;
}
/*-------------------------------------- word --------------------------------------*/
.bar_title{
  font-size: 24px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin-top: 13px;
  position: relative;
  background-color: #1f3f87;
  padding: 2px;
  z-index: -2;
}
.bar_title:before,
.bar_title:after{
  position: absolute;
  content: "";
  background-image: url(../tw_images/triangle.png);
  background-repeat: no-repeat;
  display: inline-block;
  width: 102px;
  height: 50px;
  bottom: 0;
  z-index: -1;
}
.bar_title:before{
  left: 0;
}
.bar_title:after{
  right: 0;
  moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}
.bar_title2{
  font-size: 17px;
  line-height: 35px;
  color: #fff;
  padding-left: 30px;
  margin-bottom: 5px;
  display: block;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#72acf8+0,004cb0+100 */
  background: #72acf8; /* Old browsers */
  background: -moz-linear-gradient(top,  #72acf8 0%, #004cb0 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #72acf8 0%,#004cb0 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #72acf8 0%,#004cb0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72acf8', endColorstr='#004cb0',GradientType=0 ); /* IE6-9 */
}
.menu_item > ul> li{
  list-style-type :none;
  color: #fff;
}
.menu_item > ul> li a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6edff0+0,058c94+100 */
background: #6edff0; /* Old browsers */
background: -moz-linear-gradient(top,  #6edff0 0%, #058c94 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6edff0 0%,#058c94 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6edff0 0%,#058c94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edff0', endColorstr='#058c94',GradientType=0 ); /* IE6-9 */
color: #fff;
}
.bar_title2 a{
  color: #fff;
}
.page_title{
  font-size: 26px;
  font-weight: bold;
  color: #1b40a4;
  border-bottom: 2px solid #4c4c4c;
  padding-left: 10px;
  margin-top: 13px;
}
.tip{
  color: #5fbaed;
}
.rela_title{
  color: #1b40a4;
  font-size: 18px;
  font-weight: bold;
}
.rela_text_title{
  color: #1b40a4;
  font-size: 15px;
}
.rela_text{
  font-size: 15px;
}
.pro_de_title{
  color: #142f79;
  font-weight: bold;
  font-size: 25px;
  padding-left: 30px;
  padding-top: 20px;
}
/*--------------------------------- box ------------------------------------*/
.rela_box{
  margin-top: 25px;
  margin-bottom: 30px;
}
.rela_box_two{
  margin-bottom: 50px;
}
/*--------------------------------- img_rela ------------------------------------*/
.pro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;
  
  width: 100%;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.pro_1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 13px 20px 20px 0px;
}

@media screen and (max-width: 50em) {
  .pro_1 {
    width: 33.333%;
  }
}
@media screen and (max-width: 40em) {
  .pro_1 {
    width: 50%;
  }
}
@media screen and (max-width: 22em) {
  .pro_1 {
    width: 100%;
  }
}

.pro_1 figure {
  margin: 0;
}
.pro_2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 13px 10px 20px 0px;
}

@media screen and (max-width: 50em) {
  .pro_2 {
    width: 33.333%;
  }
}
@media screen and (max-width: 40em) {
  .pro_2 {
    width: 50%;
  }
}
@media screen and (max-width: 22em) {
  .pro_2 {
    width: 100%;
  }
}
.pro_2 figure {
  margin: 0;
}
/*--------------------------------- btn ------------------------------------*/
.setbtn{
  text-align:center;
  margin:30px auto;
}
@media (max-width:760px){
  .setbtn {
    margin-bottom: 30px;
    margin-top: 10px;
  }
}
.setbtn1{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#64c4f4+0,25499f+100 */
  background: #64c4f4; /* Old browsers */
  background: -moz-linear-gradient(top,  #64c4f4 0%, #25499f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #64c4f4 0%,#25499f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #64c4f4 0%,#25499f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c4f4', endColorstr='#25499f',GradientType=0 ); /* IE6-9 */
  border-radius:6px;
  height:35px;
  width:135px;
  text-align:center;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
  color:#fff; 
  font-size:13px;
  font-family:"微軟正黑體";
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 40px;
}
@media (max-width:760px){
  .setbtn1 {
    margin-bottom: 0px;
  }
}

.setbtn1:hover{
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6edff0+0,058c94+100 */
  background: #6edff0; /* Old browsers */
  background: -moz-linear-gradient(top,  #6edff0 0%, #058c94 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #6edff0 0%,#058c94 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #6edff0 0%,#058c94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edff0', endColorstr='#058c94',GradientType=0 ); /* IE6-9 */
  color: #fff;
  text-decoration:none;
}
@media screen and (max-width: 991px) {
  .setbtn1 {
    width: 33.333%;
  }
}
@media screen and (max-width: 760px) {
  .setbtn1 {
    width: 100%;
      margin-left: 0;
  }
}
input, button, select, textarea {
  border:none;
}
.setbtn2{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#64c4f4+0,25499f+100 */
  background: #64c4f4; /* Old browsers */
  background: -moz-linear-gradient(top,  #64c4f4 0%, #25499f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #64c4f4 0%,#25499f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #64c4f4 0%,#25499f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c4f4', endColorstr='#25499f',GradientType=0 ); /* IE6-9 */
  border-radius:6px;
  height:35px;
  text-align:center;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
  color:#fff; 
  font-size:13px;
  font-family:"微軟正黑體";
  line-height: 30px;
  float: left;
  margin-top: 214px;
  margin-left: 30px;
  width: 145px;
}
.setbtn2 a{
  color: #fff;
  display: block;
}
.setbtn2 a:hover{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6edff0+0,058c94+100 */
  background: #6edff0; /* Old browsers */
  background: -moz-linear-gradient(top,  #6edff0 0%, #058c94 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #6edff0 0%,#058c94 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #6edff0 0%,#058c94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edff0', endColorstr='#058c94',GradientType=0 ); /* IE6-9 */
  border-radius:6px;
  height:35px;

}
@media screen and (max-width: 1200px) {
  .setbtn2 {
    margin-top: 160px;
    margin-left: 0px;
  }
}
@media screen and (max-width: 990px) {
  .setbtn2 {
    margin-top: 275px;
    margin-left: 0px;
  }
}
@media screen and (max-width: 768px) {
  .setbtn2 {
    margin-top: 10px;
    margin-left: 0px;
    width: 100%;
  }
}
/*------------------------------ left_bar ---------------------------------*/
.panel-default a{
  display: block;
}
.panel-default a:hover{
  color: #fff;
}
.panel-default > .panel-heading:hover{
     /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6edff0+0,058c94+100 */
  background: #6edff0; /* Old browsers */
  background: -moz-linear-gradient(top,  #6edff0 0%, #058c94 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #6edff0 0%,#058c94 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #6edff0 0%,#058c94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edff0', endColorstr='#058c94',GradientType=0 ); /* IE6-9 */
}
/*--------------------------------- pro ------------------------------------*/
.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_item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 33.333%;
  padding: 0.625rem;
  margin: 0;
}
@media (max-width:992px){
  .pro_list_item {
    width: 33.333%;
  }
}

@media (max-width:768px){
  .pro_list_item {
    width: 33.333%;
  }
  
  .pro-box{
  width:100%;
  margin-left:0;
}
}


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

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


.pro_list_item figure {
  margin: 10px 8px;
  /*border:1px solid #e8e8e8;*/
}

.pro_list_inner {
  background: #fff;
  width: 100%;
}
.pro_list_inner img {
  display: block;
  width: 100%;
}
.pro_list_inner figcaption {
  padding: 0.5rem;
  color:#4c4c4c;
  font-size:15px;
  text-align:center;
}
/*-------------hover--------------*/
.pro_list_inner a{
  position:relative;
  display:block;
}
.pro_list_inner a:hover .over-layer{
  display:inherit;
}
.panel-collapse tr:hover{
  background-color: #87d7fd;
  display: block;
}
/*--------------------------------pro_img--------------------------------*/
.cirmom{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border:1px solid #91a9b3;
  padding:8px;
}
/*--------------------------------page--------------------------------*/
.pageNum{
  margin:10px 0 20px 0;
  text-align:center;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pageNum .pagination > li{
    /*display: inline-block;*/
}
.pageNum .pagination > li > a,
.pageNum .pagination > li > span{
  color:#000000;
  border-radius:0;
  font-size:16px;
  padding:8px 12px 8px 12px;
  text-decoration:none;
  font-family:Microsoft JhengHei;
}
.pageNum .pagination > li.num_page a{
  color:#fff;
  font-size:15px;
}
.pageNum .pagination > li.num_page:hover a{
  color:#fff;
  text-decoration:none;
}
.pageNum .pagination > li:hover a,
.pageNum .pagination > li:hover > span,
.pageNum .pagination > li a:focus,
.pageNum .pagination > li > span:focus{
  color:#ff0000;
  text-decoration:underline;
}
.pageNum .pagination > li a.num_act{
  color:#000;
  text-decoration:underline;
}
.pageNum .pagination > li a.num_act:hover{
  color:red;
  text-decoration:underline;
}

/*-------------------------------------- contact --------------------------------------*/
.con_w{
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 1px;
  color: #000;
  padding-top:15px;
}
.con_w a:hover{
  color: #1b40a4;
}
.con_icon{
  font-size: 15px;
  color: #1b40a4;
  padding-right: 8px;
}
.conbox{
  padding-top: 10px;
  margin-left: -10px;
}
.con_code{
  margin-top: 33px;
}
@media (max-width:760px){
  .con_code {
    margin-top: 0px;
    margin-bottom: 30px;
  }
}
/*------------------------------------ pro_detail ----------------------------------*/
.pro_title{
  background-color: #e0f1fb;
  color: #142f79;
  font-size: 15px;
  font-weight: bold;
  width: 100%;
  height: 36px;
  line-height: 33px;
  padding-left: 17px;
  margin-top: 25px;
  margin-bottom: 15px;
  float: right;
}
.pro-tablee .th,
.pro-table .td{
  display:table-cell;
  padding: 5px;
}
.pro-table .th{
  background-color: #006599;
  color:#ffffff;
  border: 1px solid #fff;
  /*text-align: center;*/
  font-size:13px;
}
.pro-table .td{
  color: #595757;
  font-size:13px;
  /*text-align:center;*/
  border: 1px solid #fff;
  background-color:#99cdff;
  /*cursor:pointer;*/
}
@media only screen and (max-width: 568px) {
  .pro-table{
    background-color: transparent;
  }
  .pro-table .thead{
    display: none;
  }
  .pro-table .tr{
    display:block;
    margin-bottom: 15px;
    border:2px solid #2a52a5;
  }
  .pro-table .th,
  .pro-table .td{
    display:block;
    width: 100%;
    background-color:#fff;
    border-bottom:1px dashed #ccc;
  }
  .pro-table .td:last-child{
    border-bottom:none;
  }
}

.pro-table{
  width: 100%;
  border-collapse:separate;
  margin-bottom: 20px;
  font-family:Microsoft JhengHei;
	overflow: hidden;
}
.pro-table .tr{
  display: table;
  width:100%;
}
.pro-table .th,
.pro-table .td{
  display:table-cell;
  padding: 8px 20px;
}
.pro-table .th{
  background-color: #2a52a5;
  color:#ffffff;
  border: 1px solid #fff;
  text-align: center;
  font-size:14px;
  width:15%;
  vertical-align:middle;
}
.pro-table .td{
  color: #595757;
  font-size:13px;
  border: 1px solid #fff;
  background-color:#f3f3f3;
  width:85%;
}
@media only screen and (max-width: 480px) {
  .pro-table .th,
  .pro-table .td{
    display:block;
    width: 100%;
  }
}
.pro_de_img{
  margin-top: 15px;
  float: left;
}