@import url(https://fonts.googleapis.com/earlyaccess/cwtexhei.css);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/checkout
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/*vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


input::-ms-clear { display: none;}
input[type=number]::-ms-clear { display: none;}
input,button,select,textarea{outline:none}
textarea{resize:none}
textarea.form-control{outline:none}
textarea:focus{outline:none}
body,select,input,button {font-family: "微軟正黑體";}
/*input[type=checkbox],label,select,button { vertical-align: middle; border-radius: 0;-webkit-appearance: none;}
label,select,button { vertical-align: middle; -webkit-appearance: none;}
input[type="text"],select {-webkit-appearance: none;border-radius: 0;}*/ 
input[type=checkbox],label,select,button { vertical-align: middle;}
button,input,select{font-family: "微軟正黑體",sans-serif;cursor: pointer;}

body {
	margin: 0;
	padding: 0;
	font-family: "微軟正黑體";	
	line-height: 28px;
	letter-spacing: 0.1em;
	position: relative;	
	font-size: 100%;
    font-size:15px;
    color: #898989;
	background-color:#fff;
}

html,body {
	height: 100%;
	position: relative;
	
}

a:link,
a:visited,
a:hover,
a:active,
a:focus{text-decoration: none;cursor: pointer; }
a:link,
a:visited,
a:active,
a:focus{
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	/*outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

a:hover{
	color: inherit;
	text-decoration: underline;
}
a.link-black{ color: #000;text-decoration: underline !important; }
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
hr{box-sizing:content-box;height:0;overflow:visible}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.shadow {
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.13);
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.13);
box-shadow: 2px 2px 3px rgba(0,0,0,0.13);
}
.shadow1 {
-webkit-box-shadow: -2px -2px 5px rgba(0,0,0,0.13);
-moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.13);
box-shadow: -2px -2px 5px rgba(0,0,0,0.13);
}
.p-0{padding: 0px;}
.p-1{padding: 0px 15px;}
.p-2{padding:.5rem .5rem!important}
.flex-nowrap{-webkit-flex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}
/*.p-2{padding: 0px 10px;}*/
.p-3{padding: 0px 5px;}
.m-1{margin: 0px 15px;}
.mt{margin-top: 30px;}
.mt1{margin-top: 20px;}
.mt2{margin-top: 10px;}
.mt3{margin-top:5px;}
.md{margin-bottom: 40px;}
.md1{margin-bottom: 30px;}
.md2{margin-bottom: 20px;}
.md3{margin-bottom: 10px;}
.mh{height: 55px;}
.msg{
	font-size: 95%;
	color: #b10e0e;
	letter-spacing: 0em;
	
}
.fc-primary{color:#25c19c;}
.red,.fc-red{color: #f25657;}
.red1{color: #b10e0e;font-weight: 600;}
.red2{color: #f25657;font-weight: 600;}
.red3{color: #b10e0e;font-weight: 600;font-size: 125%;}
.red4{color: #f25657;font-weight: 600;font-size: 105%;}
.fc1{color: #000000;letter-spacing: 0em; padding-top:10px;}
.fc2{font-size: 85%;}
.fc3{font-size: 105%;font-weight: 600; color:#000000}
.fc4{color: #30a3cd;}
.fc-nb{font-family: Arial, Helvetica, sans-serif;}
.strong { font-weight: bold; font-size: 105%; margin-bottom: 10px; }
.fc-gray{color: #adadad;font-size: 90%;}
.fc-og{color: #fd6c02;font-weight: bold;}



/* float */
.float-left{float:left!important}.float-right{float:right!important}
.right{ float:right; }
.left{ float:left; }
.hide{ clear:both;}
.relative{position: relative;}
.img-responsive{max-width:100%;height:auto}
.center-block {text-align: center;width: 100%;line-height: 0px;}
.center-block img{max-width:100%;height:auto;margin: 0px 0px  20px 0px;}
.under{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.fc-white{color:#ffffff;}
.bg-white{background-color:#ffffff;}

/* box-sizing  */
*,*:before,*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* clearfix */
.clearfix:before,.clearfix:after {display:table;line-height:0;content:"";}
.clearfix:after {clear:both;}
.clearfix {*zoom: 1; /*forIE*/}

/*transition */
*:link,
*:visited,
*:hover,
*:active,
*:focus {
 -moz-transition:color .5s linear, background-color .5s linear, border-color .5s linear, opacity .5s linear;
 -o-transition:color .5s linear, background-color .5s linear, border-color .5s linear, opacity .5s linear;
 -webkit-transition: color .5s linear, background-color .5s linear, border-color .5s linear, opacity .5s linear;
 transition: color .5s linear, background-color .5s linear, border-color .5s linear, opacity .5s linear;
}
/* transition end */
/* btn */
.btn-style {
	padding: 10px 35px;
	/*width: 100%;*/
	letter-spacing: 0.05em;	
	color: #4a4a4a;
	font-size: 108%;
	border: 1px solid #c9caca;
	background-color: rgba(255, 255, 255, 0.5);
}
.btn-style:hover{
	color: #fff;
	background: #a0a0a0; 
}
.btn-style01{
	padding: 10px 35px;
	/*width: 100%;*/
	letter-spacing: 0.05em;	
	color: #595757;
	font-size: 108%;
	border: 1px solid #595757;
	background-color:transparent;
}
.btn-style01:hover{
	color: #fff;background: #a0a0a0; 
	border: 1px solid #a0a0a0;
}

.btn-style02{
	padding: 7px 20px;
	letter-spacing: 0.15em;
	color: #664312;
	font-size: 108%;
	border: 1px solid #664312;
	background-color:transparent;
	margin-left:15px;
}
.btn-style02:hover{
	color: #fff;background: #664312; 
}
.btn-style03{
	padding: 7px 0px;width:100%;
	letter-spacing: 0.15em;
	background: #f46b03; 
	color: #FFF;
	font-size: 108%;
}
.btn-style03:hover{
	color: #fff;background: #f59851; 
}
.btn-seemap{
	border: 1px solid #a0a0a0;
	padding: 0 ;
	width: 62px;
	letter-spacing: 1px;
	background: #a0a0a0; 
	color: #FFF;
	font-size: 12px;
}
.btn-seemap:hover{
	color: #FFF
}



/* btn end */
.m-block{display: none;}
.pc-block{display: block;}
.line_t{border-top: 1px solid #CCC;}
.line_r{border-right: 1px solid #CCC;}
.line_b{border-bottom: 1px solid #CCC;}
.inputstyle1,.radio1{
	vertical-align: text-bottom;
	height: 20px;
	width: 20px;
	margin-right: 100px;
}
.radiodiv{vertical-align: middle;}


.form-control01{display:block;width:100%;height:40px;padding:6px 10px;font-size:15px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.form-control02{height:40px;padding:6px 2px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.fa-map-marker{ color:#088473;/* margin-right:5px; */}
/*@media (min-width:1200px){.container{width:1024px}}*/
h3,h2{
    font-family: 'cwTeXHei', sans-serif;
    font-weight:550;
}
h3{   
    color: #233140;   
    text-align: center; 
}
h3{
font-size: 170%;
	/*color: #000;*/
	line-height: 35px;
	position: relative;
	margin: 20px 0px 10px 0px;
}

.header_h{height: 70px;}
/*TOP BANNER*/
.topbr img{
	display: block;
	height: auto;
	/*background-image: url(../images/topbr.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;*/
	width: 100%;
}
.topbr_m{
	display: none;
	
}

.slick{margin-bottom: 0px}

.newbr{
	display: block;
	height: 350px;
	background-image: url(../images/newbr.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.casebr{
	display: block;
	height: 350px;
	background-image: url(../images/casebr.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.servicebr{
	display: block;
	height: 350px;
	background-image: url(../images/servicebr.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}

.navbar-default .navbar-toggle .icon-bar{background-color:#a0a0a0}
.navbar-default{border:none}

/*navbar*/
.logo img{height: 70px;float: left;}
.logo span{
	line-height: 70px;
	letter-spacing: 0em;
	color: #fff;
	font-size: 110%;
}

.navbar{
	background-color: #fff;
	padding-top: 0px;
	padding-bottom: 0px;color:#595757;
}

.nav{margin-top:0px;}
.navbar-nav>li>a{
	padding-top:0px;padding-bottom:0px;line-height:70px;
font-size: 110%;
}
.navbar-brand{
	float: left;
	height: auto;
	padding: 0px;
	margin: 0px;
}

.navbar .navbar-nav>li>a{color:#595757;/*border-bottom: 5px solid #fff;*/}
.navbar .navbar-nav>li>a:focus,.navbar .navbar-nav>li>a:hover{color:#00913e;background-color:transparent;}



.navbar-collapse{
	overflow: visible;
	z-index: 111;
	display: block;
}
/*go top*/
.scrollup:link,
.scrollup:visited,
.scrollup:hover,
.scrollup:active,
.scrollup:focus{color: #FFF;cursor: pointer; }
.scrollup {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 40px;
	z-index: 1010;
	height: 40px;
	display: none;
	border-radius: 50%;
	text-align: center;
	box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.53);
	color: #FFF;
	background-color: #a0a0a0;
	line-height: 40px;
}
/*about*/

#about{ 
    color: #FFF;
	background-image: url();
	background-attachment : fixed;
	background-color:#2c3e50;
	padding-top: 50px;padding-bottom: 60px;
text-align: justify;

}
#about h3{color: #fff; background-color:inherit;text-align: center;
}
#about .aboutimage{
          float: left;
        margin: 0px 20px;
          clear:right;
        }
#about .container img{
padding: 10px 10px 15px;
margin: 0 auto;
}
#about .container{
padding-bottom: 10px;
}

/*news*/
#news{ 
	background-image: url();
	background-attachment : fixed;
	background-color:inherit;

}
#news h3{color: #233140;background-color: inherit;text-align: center;}

#news a,#newslist a,#case a,#service li a{ color: #898989;text-decoration: none;}
#news a:hover,#newslist a:hover,#case a:hover{
    text-decoration: none;
}


#news .ti,#case li p{color: #fc5f0a; background-color:#f6f6f8;font-size: 120%;padding:8px 8px;}
#service li p{color: #fc5f0a; font-size: 120%;padding:8px 8px;}
#news .ti{background-color: transparent;}


#news li .pic {
	float: left;
	overflow: hidden;
	position: relative;
	height:180px;
	width: 25%;
	max-width: 100%;
	margin: auto;
	margin-right: 20px;
	background-color: #E6E6E6;
}
#news li .pic img {
    transition: all 0.3s linear;
    -webkit-backface-visibility: hidden;
	height: 200px;
	position: absolute;
	 -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

#news .time{	
	color:#1acb8c;
	padding:5px 10px;
	margin-right: 5px;
	margin-top: 3px;
	float: left;
    background-color: inherit;
	
}

#news .time b{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;margin-right: 8px;}
#news .time span{
	font-size: 100%;
	color: #FFF;padding:5px 10px; 
	font-weight: 600;background-color: #1acb8c;

}
#news .box{
	/*padding-left: 13%;
	width:90%;*/
}
#news .ti{
	margin:0px 0px 0px 0px;

	/*overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;*/
}
#news li{
	margin:0px 0px 20px 0px;
	padding-bottom:0px;
}

/*news newslist*/
#news .newslist ul{
	position: relative;
	margin:20px 0px 50px 0px;
		
	} 

/
#newslist li text{
	display: -webkit-box;
	overflow: hidden;
	text-overflow : ellipsis;
	-webkit-line-clamp:5;
	-webkit-box-orient: vertical;
	line-height: 25px;
	font-size: 100%;

}
#newslist li p{
	font-size: 130%;
	color: #000;
	display: -webkit-box;  
	overflow:hidden;
	text-overflow : ellipsis;
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	margin:10px 0px 0px 0px;
}
#newslist li{
	margin:20px 0px 30px 0px;
	padding-bottom:15px;
}
#newslist li:before,#newslist li:after {display:table;line-height:0;content:"";}
#newslist li:after {clear:both;}
#newslist li {*zoom: 1; /*forIE*/}

#newslist li .col-md-3{
	padding-right: 0px;
	padding-left: 0px;
}
#newslist li .ti{
	font-size: 130%;}
#newslist li .time2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;color: #ffffff;
	margin-right:8px;
	background: #30a3cd;
	padding:3px 5px; 
}
#newslist li .item{
	color: #fa8e03;
	padding:0px 5px;
}

#newslist li .pic {
	overflow: hidden;
	position: relative;
	height: 200px;
	width: 100%;
	max-width: 100%;
	margin: auto;
	background-color: #E6E6E6;
}
#newslist li .pic img {
    transition: all 0.3s linear;
    -webkit-backface-visibility: hidden;
	height: 200px;
	position: absolute;
	 -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
#newslist{ margin-top:50px;}
#newslist ul{ margin-top:10px;}
#news,#case,#service,#contact{padding: 50px 0px 30px 0px;}
/*service*/
#service h3{color: #fff;background-color: inherit;text-align: center;}
#service{
    text-align: center;
    width:100%; 
	color: #FFF;
	background-image: url(../images/back02.jpg);
	background-attachment : fixed;
	background-color:inherit;     
}
#service ul{
   width:100%;
   margin:0;
   padding:0;
   list-style: none;
}
#service ul li{
    margin-top: 5px;
    padding-bottom:5px;
    display: inline-block;
	width: 31.3%;
	margin: 20px 0.8% 50px 0.8%;
}

#service li {
	display: block;
	/*background-color: #FFF;*/
	padding:8px;margin-bottom:20px;
	text-align: left;
}

#service li text{padding:0px 8px;color:#fff;}
#service li p{
	font-size: 120%;
	overflow:hidden;
	text-overflow : ellipsis;
    white-space : nowrap;
	margin: 0px;padding:8px 8px;text-align: center;
}

#service .round{
    text-align: center;
}
#service .round img{height: 85px;margin:  10px 0px;}



/*case*/
#case{
    text-align: center;
    width:100%;    
	color: #FFF;
	background-image: url();
	background-attachment : fixed;
	background-color:inherit;
  
}
#case h3{color: #233140;background-color: inherit;text-align: center;}
#case ul{
   width:100%;
   margin:0;
   padding:0;
   list-style: none;
}
#case ul li{
	margin-top: 5px;
	padding-bottom: 5px;
	display: inline-block;
	width: 31.3%;
	margin: 20px 0.8% 50px 0.8%;
	text-align: left; 
	background-color: #FFF;
}

#case li text{padding:0px 8px;}
#case li p{
	font-size: 120%;
	height:65px;
	display: -webkit-box;  
	overflow:hidden;
	text-overflow : ellipsis;
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	margin:10px 0px 5px 0px;padding:5px 8px 3px 8px;
}
#case li text,#news li text,#service li text{
	display: -webkit-box;
	overflow: hidden;
	text-overflow : ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 25px;
	font-size: 100%;
	height:80px;
}
#news li text{padding:0px 8px;height: auto;}

#case li .pic {
	overflow: hidden;
	position: relative;
	height: 300px;
	width: 100%;
	max-width: 100%;
	margin: auto;
	background-color: #E6E6E6;
}
#case li .pic img {
    transition: all 0.3s linear;
    -webkit-backface-visibility: hidden;
	height: 300px;
	position: absolute;
	 -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
#news li:before,#news li:after {display:table;line-height:0;content:"";}
#news li:after {clear:both;}
#news li {*zoom: 1; /*forIE*/}

#case ul:before,#case ul:after {display:table;line-height:0;content:"";}
#case ul:after {clear:both;}
#case ul {*zoom: 1; /*forIE*/}

/*#contact*/
#contact{
    width:100%;    
	color:  #233140;
	background-image: url();
	background-attachment : fixed;
	background-color:#f6f6f8;

  
}
#contact h3{color: #233140;background-color: inherit;text-align: center;}


/*form*/
#form{
	padding: 50px 0px;
}
#form .col_2{
	float: left;
	width: 50%;
	padding:10px 10px 10px 5px;
	font-size: 105%;
	/*color: #000;*/
	display:block;
}
#form .col_3{
	font-size: 100%;
	/*color: #000;*/width: 24%;float: left;margin: 25px 0px 15px 0px;

}
#form .label_w{
	width: 28%;
	float: left;
	/*color: #040000;*/
	font-size: 16px;
	font-weight: normal;
	margin: 25px 0px 15px 0px;
	padding-left:5px;
	text-align: left;
}
#form .col_4{
	float: left;
	width: 33.5%;
	margin: 10px 5% 15px 0px; font-size: 105%;
    color: #000;
}

#form .col_4:nth-child(3n){
	margin-right: 0%;
}

#form .group i{
	display: block;
	font-size: 20px;
	color: #999999;
	width: 45px;
	line-height: 45px;
	text-align: center;
	position: absolute;
	right: 0px;
	top: 0px;
	border-radius: 5px;
	transition: all 0.4s ease;
}
#form .group input[type="text"]:focus ~ i,#form .group select:focus ~ i,
#form .group input textarea:focus ~ i{
	color: #fca03d;
}
#form .group2 i{
	display: block;
	font-size: 20px;
	color: #999999;
	width: 45px;
	line-height: 45px;
	text-align: center;
	position: absolute;
	right: 0px;
	top: 0px;
	border-radius: 5px;
	transition: all 0.4s ease;
}
#form .group2 input[type="text"]:focus ~ i,#form .group2 select:focus ~ i,
#form .group2 input textarea:focus ~ i{
	color: #fca03d;
}
/* form starting stylings ------------------------------- */
#form .group               {
	position: relative;	
	float: left;
	width: 46%;
	margin: 0px 2% 45px 2%;
}
#form .group2{
	position: relative;	
	float: left;
	width: 96%;
	margin: 0px 2% 45px 2%;
}
#form .group2 textarea{ font-size:16px;color:#040000;}

#form  select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding: 5px 50px 5px 5px;
  width: 100%;
  height: 50px;
  border-radius: 0px;
  border: none;border-bottom: 1px solid #d2d2d2;
  font-size: 105%;
  background: url(../images/icon-select-01.svg) no-repeat scroll right center transparent;
  background-color: transparent;
  /*color: #000;*/
}

#form  select::-ms-expand{ display: none; }

#form input[type=text]                 {
  font-size:15px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #d2d2d2;-webkit-appearance: none;
  background-color:transparent;
}
#form input[type=text]:focus         { outline:none; -webkit-appearance: none;}

/* LABEL ======================================= */
#form label                  {
  /*color:#040000; */
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;-webkit-appearance: none;
}

/* active state */
#form input[type=text]:focus ~ label,#form  input:valid ~ label ,#form  select:valid ~ label{
  top:-20px;
  font-size:16px;
  /*color:#fca03d;*/
  -webkit-appearance: none;
}

#form input[type=text]:focus ~ i,#form  input[type=text]:valid ~ i {
  color:#fca03d; 
}

/* BOTTOM BARS ================================= */
#form .bar     { position:relative; display:block; width:100%; }
#form .bar:before,#form .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#fca03d; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
#form .bar:before {
  left:50%;
}
#form .bar:after {
  right:50%; 
}

/* active state */
#form input[type=text]:focus ~ .bar:before,#form  input[type=text]:focus ~ .bar:after {
  width:50%;
  -webkit-appearance: none;
}
#form select:focus ~ .bar:before,#form  select:focus ~ .bar:after {
  width:50%;
  -webkit-appearance: none;
}

/* HIGHLIGHTER ================================== */
#form .highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
#form input:focus ~#form .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

.
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#fca03d; }
  to     { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#fca03d; }
  to     { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#fca03d; }
  to     { width:0; background:transparent; }
}
/*form END*/
#news_detail{background-color:#f6f6f8;}
#news_detail h2,#contact_detail h2{
	color: #000000;
	padding: 30px 0px;
	font-size: 180%;
	
	text-align: center;
}
#news_detail .ti{
	color: #19b3d3;
	border-bottom: 1px solid #CCC;
	margin: 20px 0px;
	padding-bottom: 20px;
	font-size: 150%;
	position: relative;
}
#news_detail .day{
	color: #595757;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	position: absolute;
	right: 0px;
}
/*#news_detail .newpic{
	text-align: center;
	width: 100%;
	height: 670px;
}
#news_detail .newpic img{
	text-align: center;
  margin: auto;
}*/
#news .newpic {
	text-align: center;
	/* height: 0; */
	width: 100%;line-height: 0px;
	/* padding-bottom: 60%; */
	margin:30px 0px 0px 0px;
}
#news .newpic img{
	width: auto;
	height: auto;
	max-height: 600px;
	max-width: 100%;
	display: inline-block;
	
}
#news_detail .container{
	padding: 15px 15px 45px 15px;
}
#news .number {
	
	color: #19b3d3;
	display: inline-block;

	float: left;


}
#news .number:hover{
	background-color: #19b3d3;
	color: #fff;
	text-decoration: none;
}
#news .titt{
	color: #000000;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-weight: bold;
	
}

/*.previous a,.next a{color: #000000;}*/
#news .previous a,#news .next a{
	text-align: left;
	width: 100%;
	display: inline-block;
	text-decoration: none;
}

/*頁尾下底*/
footer .logo{	
	float: left;
	display: inline-block;
	margin:0px 20px 0px 0px;text-decoration: none;
}
footer ul{
	float: left;margin:0px 0px;		
}
footer p{
	float: left;
	margin-right: 15px;
	font-size: 100%;
}
footer .container{padding:15px 0px 5px 0px}

footer .copyright{
	padding:5px 0px;
	background-color: #2c3e50;
	color: #FFF;
	text-align: center;
	
}
footer{
	background-color: #233140;
	text-decoration: none;
	color: #FFF;
}
/*==========================================
               video
===========================================*/
/* video */
.video-container{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container video, .video-container object, .video-container embed {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
}
/*==========================================
               共同加寫
===========================================*/
#about h3, #news h3, #service h3, #case h3, #contact h3{
    padding: 5px 20px 3px;
}
#news li p,#case li p,#service li p{
    font-size: 120%;
}
/*==========================================
               #form
===========================================*/
#form{color: #898989;}/*#form整體顏色*/
#form label,#form .col_2,#form .label_w{color: #000000;}/*#form標題顏色*/
#form .group i,#form .group2 i{color: #999999;}/*#form右小圖顏色*/
#form .group input[type="text"]:focus ~ i,#form .group select:focus ~ i,
#form .group input textarea:focus ~ i{color: #000000;}/*#form右小圖顏色hover*/
#form .group2 input[type="text"]:focus ~ i,#form .group2 select:focus ~ i,
#form .group2 input textarea:focus ~ i{color: #000000;}/*#form右小圖顏色hover*/
#form input[type=text]:focus ~ i,#form  input[type=text]:valid ~ i {color: #000000;}/*#form右小圖顏色hover*/
#form .bar:before,#form .bar:after {background:#000000;}/*#form下底線顏色hover*/
/*==========================================
        聯絡我們_地圖+表單
===========================================*/
/*浤福樣式*/
.w100 {width: 100%;}
#contact {color: #898989;}
#contact .ti{
	font-size: 150%;
	color: #000;
	line-height: 40px;
}
#contact .fa{
    text-align: center;
    width: 25px;
    font-size: 18px;
    color: #999999;
}
#contact .col-md-4 span{
	float: left;
}
#contact .col-md-4 .text{
	padding-left: 65px;
}
/*浤福樣式 end*/
#contact .group2 img{ /*驗證碼圖片樣式*/
	margin-top: -4px;
}
#contact .group2 input{ /*驗證碼輸入框樣式*/
	padding: 6px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 126px);
}
#contact .form-control{ /*輸入框樣式*/
	margin: 10px 0px;
    font-size: 15px;
    color: #000;
}
/*==========================================
        語系
===========================================*/
.lang {
    cursor: pointer;
    top: 22px;
    margin-left: 15px;
    padding-bottom: 10px;

    border: 1px solid #c9caca;
    border-radius: 5px;
    padding: 3px 5px;
    background-color: #FFF;
}
.lang img {
    float: left;
    width: 20px;
    margin: 2px 5px 0 0;
}
.lang span {
    float: left;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    letter-spacing: 1px;
	display: block;
}
.lang span:after {
    content: "▾";
}
.lang_tit {
    font-size: 20px;
    font-weight: 600;
}
#navbar .lang > ul {
    display: block;
    /* z-index: -1; */
    opacity: 0;
    position: absolute;
    overflow: visible;
    width: 110px;
    top: 25px;
    left: -2px;
}
#navbar .lang:hover > ul {
    transition: all 0.2s;
    z-index: 2;
    opacity: 1; 
}
.lang li{
	display: block;
    padding: 0 0 0 10px;
    line-height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #d2d2d2;
    background-color: #FFF;
    color: #000;
}
.lang li:hover{
	background-color: #ececec;
}
.lang li a{
    color: #000;
}
.lang li a:hover {
    color: #000;
    text-decoration: none;
}
.lang li a img {
    margin-top: 11px;
}
.nav-item #google_translate_element{margin:20px 0px 0px 0px;}

 div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {
            text-decoration: none;
        }

      

        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
            color: #000;
        }
/*        
        .goog-te-gadget-icon {
            display: none !important;
            //background: url("url for the icon") 0 0 no-repeat !important;
        }
*/
        /* Remove the down arrow */
        /* when dropdown open */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {
            display: none;
        }
        /* after clicked/touched */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {
            display: none;
        }
        /* on page load (not yet touched or clicked) */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {
            display: none;
        }

        /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {
            display: none;
        }
        /* Remove span with left border line | (next to the arrow) in Edge & IE11 */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
            display: none;
        }
        /* HIDE the google translate toolbar */
        .goog-te-banner-frame.skiptranslate {
            display: none !important;
        }
		body {
            top: 0px !important;
        }

.vertical-tab{
    font-family: 'Chivo', sans-serif;
    
}
.vertical-tab .nav-tabs{
    display: table-cell;
    width: 28%;float:left;
    min-width: 28%;
    vertical-align: top;
    border: none;
    border-right: 3px solid #e7e7e7;
}
.tabopen{font-size: 18px; font-weight: 700;border-bottom: 1px solid #CCC;padding:5px 10px;cursor: pointer;}
.tabopen:hover{color: #52baff;}
.vertical-tab .nav-tabs li{float: none;vertical-align: top;color: #444;background: #fff;    }
.vertical-tab .nav-tabs li a{
	color: #444;
	background: #fff;
	display: inline-block;	
	width: 100%;	
	margin: 0 0 1px 0;
	border: none;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}
.vertical-tab .nav-tabs li ul li.on a {
	color: #198df8; margin: 0 -100px 0 0;
	background-color: #efefef; 
}


.vertical-tab .nav-tabs li a:hover{color: #198df8; background-color:#efefef}
.vertical-tab .nav-tabs li ul li{}
.vertical-tab .nav-tabs li ul li a{
	width: 100%;
	padding: 5px 15px;
	display: inline-block;
	

}
.vertical-tab .nav-tabs li a:hover,
.vertical-tab .nav-tabs li.active a,
.vertical-tab .nav-tabs li.active a:hover{
    color: #198df8;
    background: #fff;
    border: none;
}

.vertical-tab .nav-tabs li a:before,
.vertical-tab .nav-tabs li a:after{
    /*content: "\f054";*/
    color: #198df8;
    /*font-family: "Font Awesome 5 Free";*/
    font-weight: 900;
    font-size: 18px;
    opacity: 0;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -4px;
    z-index: 1;
    transition: all 0.3s ease 0.1s;
}
.vertical-tab .nav-tabs li a:after{
    content: "";
    background: #198df8;
    width: 3px;
    height: 100%;
    transform: translateY(0);
    top: 0;
    right: 8px;
    transition: all 0.3s ease 0s;
}
.vertical-tab .nav-tabs li a:hover:before,
.vertical-tab .nav-tabs li.active a:before{
    opacity: 1;
    right: -17px;
}
.vertical-tab .nav-tabs li a:hover:after,
.vertical-tab .nav-tabs li.active a:after{
    opacity: 1;
    right: -3px;
}
.vertical-tab .tab-content{width: 72%;
    color: #555;
    background-color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 23px;
    padding: 10px 15px 10px 25px;
    display: table-cell;
    position: relative; float:left;
}
.vertical-tab .tab-content h3{
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
@media only screen and (max-width: 479px){
    .vertical-tab .nav-tabs,.vertical-tab .tab-content{
        display: block;
        width: 100%;
        border-right: none;
    }
    .vertical-tab .nav-tabs li a{
       /*padding: 7px 7px;
        margin: 0 0 18px 0;*/
    }
    .vertical-tab .nav-tabs li a:before,
    .vertical-tab .nav-tabs li a:after{
        transform: translateY(0) translateX(50%) rotate(90deg);
        right: 50%;
        top: auto;
        bottom:0;
    }
    .vertical-tab .nav-tabs li a:after{
        width: 100%;
        height: 3px;
        transform: translateY(0) translateX(50%) rotate(0);
    }
    .vertical-tab .nav-tabs li a:hover:before,
    .vertical-tab .nav-tabs li.active a:before{
        bottom: -22px;
        right: 50%;
    }
    .vertical-tab .nav-tabs li a:hover:after,
    .vertical-tab .nav-tabs li.active a:after{
        bottom: -2px;
        right: 50%;
    }
    .vertical-tab .tab-content{
        border-top: 3px solid #e7e7e7;
        display: block;
        padding: 20px 15px 10px;
    }
    .vertical-tab .tab-content h3{ font-size: 18px; }
}