@charset "utf-8";
html, body {
 /* min-height: 2000px;*/
  color:#221814;
  font-size:16px;
  font-family:"微軟正黑體", Arial;
  line-height:25px;
  /*padding: 25px 0 0 0;*/
  padding:0;
  margin:0;
  background:url(../images/bg_body.jpg) no-repeat fixed;
  background-size: cover;
}
.red { color:#e70012 } /*logo 紅*/
.blue { color:#1C1F87 } /*logo 藍*/
.black { color:#221814 }
.white { color:#ffffff }

:focus {outline: 0;}
a, a:focus, a:hover, a:visited {
    blr:expression(this.onFocus=this.blur());
    -moz-outline-style: none; 
	text-decoration:none;
	outline: 0;
	color:#e50011; /*logo 紅*/
}

.row { margin-bottom:25px }
.row div { margin-bottom:20px }
.row p { margin-bottom:25px }
.row img { max-width:100%; height:auto }

h2, h3 {   font-family:"微軟正黑體", Arial; text-align:center; }
h2 { color:#1C1F87;  /*logo 藍*/}
h3 { /*color:#221814;*/ /*黑*/ color:#1C1F87;  /*logo 藍*/ margin-top:15px; }
.center { text-align:center }

h2 .fa-tint { font-size:23px; color:#FF9933; /*橘*/ /*color:#e50011;*/ /*logo 紅*/  padding-left:15px;; padding-right:15px; }

.table { border:1px solid #ccc; max-width:90%; margin:20px auto; }
.table thead { font-weight:bold; background-color:#ebebeb; }

.devicem { display:none }
.devices { display:inline }

/*=== navbar ======*/
.nav { background:#fff; }
.nav-pills>.active>a, .nav-pills>.active>a:focus, .nav-pills>.active>a:hover{color:#221814; /*黑*/ background-color:#fff; outline: 0;}
.nav-fill>.active>a, .nav-fill>.active>a:focus, .nav-fill>.active>a:hover{color:#221814; background-color:#fff; outline: 0;}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#221814;background-color:#ececec}
.dropdown-item.active,.dropdown-item:active{text-decoration:none;color:#221814;background-color:#ececec}
#navbar ul li a { color: #221814 }
#navbar ul li a:hover { color:#e50011; /*logo 紅*/ }
.navbar-toggler { border:none; }

.btn.k{
    background-color: hsl(0, 0%, 79%);
    /*background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(hsl(0, 0%, 121%)), to(hsl(0, 0%, 79%)));
    background-image: -moz-linear-gradient(top, hsl(0, 0%, 121%), hsl(0, 0%, 79%));
    background-image: -ms-linear-gradient(top, hsl(0, 0%, 121%), hsl(0, 0%, 79%));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(0, 0%, 121%)), color-stop(100%, hsl(0, 0%, 79%)));
    background-image: -webkit-linear-gradient(top, hsl(0, 0%, 121%), hsl(0, 0%, 79%));
    background-image: -o-linear-gradient(top, hsl(0, 0%, 121%), hsl(0, 0%, 79%));
    background-image: linear-gradient(hsl(0, 0%, 121%), hsl(0, 0%, 79%));*/
	background: url(../images/btn_product.jpg) no-repeat center top;
 	border: 2px solid #000;
    border-color: hsl(0, 0%, 79%) hsl(0, 0%, 79%) hsl(0, 0%, 68.5%);
	/*color: #333;*/
    color: #fff;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.69);
    -webkit-font-smoothing: antialiased;
  }

.btn.k:hover, .btn.k.active {
  border: 2px solid #E50012; /*logo紅*/
  /*border-bottom-color: #666;*/
  color:#fff;
}

.page_title_left { width:10px; height:45px; background:url(../images/page_title.png) no-repeat 2px top;  }
.page_title_right { width:20px; height:45px; background:url(../images/page_title.png) no-repeat right top; border:1px solid red; }

/*=== footer ======*/

#footer_branch { background:#f6f4f1; padding:50px 30px 25px 30px; text-align:center; }

.gotop { display:none; position:fixed; bottom:20%; right:10px; z-index:1000; padding:11px 16px 11px 16px; margin:0; border-radius:50%; background:#E50012; /*logo紅*/ opacity: 0.8; box-shadow: 1px 1px 1px 1px #221814;}
.gotop .fa-angle-double-up  { font-size:1.9em; color:#fff;  }

footer { border-top:1px solid #ccc; background:#f5f5f5; padding-top:15px; padding-bottom:0px; color:#221814; font-size:14px; }
footer .row { margin-bottom:0; padding-bottom:0; }
footer .row div { padding-bottom:0; margin-bottom:0; }

/*=== carousel ======*/
.carousel {
  /*height: 500px;*/
  margin-bottom: 40px;
  margin-top:-20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  /*height: 500px;*/
  height:100%;
  /*background-color: #777;*/
}
.carousel-inner > .item > img {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  min-width: 100%;
  /*height: 500px;*/
  /*height:auto;*/
  width: 100%;
  margin: auto;
}

.page-title { 
  background: url(../images/bg_page_title.jpg) no-repeat center top; 
  margin-top:-20px; 
  margin-bottom:40px; 
  padding:30px 20px 30px 20px; 
  text-align:center;
}
.page-title h1 { color:#fff; letter-spacing:3px }

/*=== about ======*/
body.about .cert img { border:1px solid #efefef }
body.about .factory_album img { width:33%; max-width:33%; float:left; padding:3px; }

/*=== location ======*/
#map { height: 80%; width:80%; margin:0 auto 40px auto; }
body.location h2 { font-size:20px; font-weight:bold; color:#221814; /*黑*/ text-align:left; padding-top:0; margin-top:0; padding-bottom:15px; }
/*for location modal */
.modal-header, .modal-footer { 
   border:none;
}
.modal-body { padding:0; margin:0; }

/*=== index ======*/
#index_banner .item { height:500px; }
#index-video { width:100%; height:100% }
#index_banner_caption { display:block }
#index_banner_caption_m { display:none }

#index_bottom_banner .item { max-height:300px }
#index_bottom_banner .carousel-caption {
	width:100%; right:0;top:0; bottom:0;left:0;padding-top:0;padding-bottom:0;  -webkit-box-shadow: inset 2000px 0 0 rgba(0,0,0,0.5); box-shadow: inset 2000px 0 0 rgba(0,0,0,0.5); 
}
#index_bottom_banner .btn-success { color:#fff }

#index_product { padding-top:20px; }
#index_product h4 { margin-top:25px; margin-bottom:25px;}
#index_product .row {background:#f5f5f5; margin-right:1px; padding-bottom:18px;}
/*=== news ======*/
body.news .col-md-4 { }
body.news .col-md-4 .col-md-8 { padding:15px }
body.news .col-md-4 a { color:#0070C0; /*藍*/ }
body.news .col-md-4 a:hover { color:#e50011; /*logo 紅*/ }
body.news .news_product div.row:hover { background:#efefef }
body.news .news_bb .col-md-5 { font-size:16px; }
body.news .news_bb h1 { border-bottom:6px solid #BCE9D1;  /*綠*/ font-weight:bold; color:#3BB375; /*綠*/ font-size:44px; font-family:Arial, Helvetica, sans-serif; }

/*=== product ======*/
body.product ul, body.product ol { padding-left:20px;  }

@media (min-width:1500px){
  .container { /*width:1440px;*/ }
}

@media (min-width:1100px){
  body.about .logo { max-width:1000px; margin:0 auto; }
  body.location .row img { max-height:700px }
  .brand-img { padding-top:20px }
}
@media (min-width: 768px) {
  .navbar {border-bottom:1px solid #efefef}
  .container {

  }
}
@media (min-width:992px){
  .container {
  }
  
  html, body { /*margin-top:80px*/ }
  
  .navbar-header { float:none; }
  .navbar-brand { float:none; }
  .navbar-brand img { float:none; margin:0 auto;}
  #navbar { max-width:1100px; margin:0 auto;}
  
  /*=== index ======*/

  /*=== location ======*/
  #map { height: 120%; width:80%; margin:0 auto 40px auto; }
  body.location .row img { max-height:500px }
    
  /*=== news ======*/
  body.news h3 { font-size:18px }
}

@media (max-width:1100px){
  .brand-img { margin-left:100px; margin-right:30px;  max-width:80%;  }
  .navbar { margin-top:-80px; }
}
@media (max-width:992px){
  html, body { margin-top:10px }
  .navbar { margin-top:-20px; }
  .navbar-header { padding-top:0;}
  .navbar-brand { margin-top:-40px; height:110px; }
  .navbar-brand img { max-width:80%; padding-top:0; margin-top:0; padding-left:35px;   }
  .brand-img { margin-left:100px; margin-right:30px;  max-width:80%;  }
  .navbar { margin-top:-100px; }
 
  .gotop { padding:10px 16px 10px 16px;}
  .gotop .fa-angle-double-up  { font-size:1.7em; }
 
  .container {
  }
  body.about .cert .row {width:90%; margin:0 auto }
  body.about .cert .col-md-3 { width:50%; float:left; }
  
  .product_list .row { padding-left:20px; padding-right:15px;}
}
@media (max-width: 768px) {

  #footer_branch { background:#f6f4f1; padding:30px 30px 10px 30px; text-align:center; }
  #footer_branch img { max-width:70%; }

  #index-video { width:auto;  }
  #index_banner_caption { display:none }
  #index_banner_caption_m { display:block }
  
  #index_bottom_banner .devicem { display:block; height:10px; }
  #index_bottom_banner .devices { display:none }
  
  #index_bottom_banner h2 { font-size:1.7em; white-space:nowrap; font-weight:bold; } 
  #index_bottom_banner h3 { font-size:1.4em } 
}