@charset "utf-8";
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
  font-style: normal;
  font-weight: bold;
  src: local(MS Gothic), local(Yu Gothic);
}
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
  font-style: normal;
  font-weight: normal;
  src: local(微軟正黑體), local(Microsoft JhengHei);
}
html, body {
 /* min-height: 2000px;*/
  color:#221814;
  font-size:16px;
  /*font-family:"微軟正黑體", Arial;*/
  font-family: 'Open Sans', Verdana, Geneva,"新微軟正黑體",'Microsoft JhengHei',"微軟正黑體", Arial, sans-serif;
  line-height:25px;
  /*padding: 25px 0 0 0;*/
  padding:0;
  margin:0;
  background:url(../images/bg_body.jpg) no-repeat fixed;
  /*background-position-y: 140px;*/
  background-size: cover;
  
   -webkit-font-smoothing: antialiased;
}
.purple { color:#5F85CB /*紫*/ }
.green { color:#83B735; /*綠*/ }  
.green_nav { color:#00BB62; /*綠*/ }
.red { color:#dd4d7b; /*紅*/ }
.blue { color:#0066bf /* 藍*/ } 
.black_title { color:#444 }
.black { color:#221814 }
.white { color:#ffffff }
.pink { color:#ED008C; /*桃紅*/ } 
.pink { color:#c61044; /*深桃紅*/ }
.pink_light { color:#FF99FF; } 
.pink_lightest { color:#FFD7FF; }

: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 紅*/
	color:#ED008C; /*pink*/
	color:#c61044; /*深桃紅pink*/
}

.container { max-width:1600px; padding-left:25px; padding-right:25px; }

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

h1 { font-family:"微軟正黑體", Arial; color:#0066bf; /*blue*/ font-weight:bold; font-size:44px;  text-align:center; }
h2, h3 { font-family:"微軟正黑體", Arial; text-align:center; }
h2 { /*color:#221814;*/ /*黑*/ color:#0066bf; /*blue*/ }
h3 { /*color:#221814;*/ /*黑*/ color:#0066bf; /*blue*/ 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 ======*/
.navbar_section { margin-bottom:0px; background:#fff; /*border:2px solid red; */padding-bottom:23px;}
.nav { background:#fff;/* border:2px solid blue;*/}
.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; background-color:#FFD7FF; }
.dropdown-item.active,.dropdown-item:active{text-decoration:none;color:#221814; background-color:#ececec; }

#navbar { width:100%; }
#navbar ul li { line-height:20px; }
#navbar ul li ul li { line-height:40px; }
#navbar ul li a { color: #333; font-size:18px; }
#navbar ul li a:hover { color:#c61044; /*pink 深桃紅*/ }
.navbar-toggler { border:none; }

.navbar {/*border:2px solid green*/ }
#navLogin_m {display:none; float:right; cursor:pointer; font-size:16px; font-weight:bold; text-align:center; color:#333; height:80px; width:70px; padding-top:22px; padding-left:10px; position:relative; z-index:9000; background:#fff;} /*傳銷商登入，手機版*/
#navLogin_m span { position:relative; z-index:50; }
#navLogin_m:hover { color:#c61044 } /*深桃紅*/

.desktoponly {display: inline}
.mobileonly { display: none }

a.nav_login, a.nav_login:focus, a.nav_login:visited  {color:#333; /*黑*/ }
a.nav_login:hover { color:#c61044; /*pink 深桃紅*/  }

.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紅*/ background:#fff; opacity: 0.8; box-shadow: 1px 1px 1px 1px #221814;}
.gotop .fa-angle-double-up  { font-size:1.9em; color:#c61044; /*深桃紅pink*/  }

footer { border-top:1px solid #ccc; background:#333333; padding-top:30px; padding-bottom:0px; color:#fff; font-size:14px; }
footer .row { margin-bottom:0; padding-bottom:0; }
footer .row div { padding-bottom:0; margin-bottom:0; }
footer h5 { font-weight:bold; font-size:17px; margin-bottom:20px }
footer a, footer a:focus, footer a:visited { color:#fff; }
footer a:hover { color:#FF99FF; /*plink light*/ }
footer hr { background:#666; }
footer .footer_qlink a { font-size:16px; line-height:35px; }

/*=== 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;
}
.carousel-indicators li {
    width: 8px;
    height: 8px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #fff;
	border:1px solid #333;
}
.carousel-indicators li.active {
	width: 8px;
    height: 8px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #777; 
}
.carousel-indicators {
    bottom: -45px;
}


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

.qLink_caption { position:absolute; z-index:2000; font-weigt:bold; font-size:44px; line-height:50px; text-align:center; text-shadow: black 0.15em 0 0.9em; width:93%; color:#fff; cursor:pointer;  }
.qLink_caption:hover { color:#ED008C; /*pink*/ }

.yotu-video-thumb { width:100%; height:auto; }

#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:1360px){
}

@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 { margin:0 auto -50px 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; }
  #searchText {display:none}
  #navLogin {display:none}
}
@media (max-width:992px){
  html, body { margin-top:10px }
  body { /*background-position-y: 160px;*/ }
  
  .navbar_section { padding-bottom:0; margin-top:0; margin-bottom:-50px;}
  .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:-110px; margin-bottom:0; /*padding-bottom:25px;*/}
  #navLogin_m {display:inline } /*傳銷商登入，手機版*/
  
  .desktoponly {display: none}
  .mobileonly { display:inline }
 
  .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;}
  
  
  body.magazine h1 span { display:block; } /*雜誌標題*/
}
@media (max-width: 768px) {

  .navbar_section { padding-bottom:0; margin-top:0; margin-bottom:-50px;}
  .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:-110px; margin-bottom:0; /*padding-bottom:25px;*/}
  #navLogin_m {display:inline } /*傳銷商登入，手機版*/
  
  .desktoponly {display: none}
  .mobileonly { display:inline }

  #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 } 
  
}