@charset "utf-8";
/*------------------------------*/
/*          $Catalog
--------------------------------*/
/**
* $Catalog                目錄
* $Fonts                  字體
* $Navbar                 主選單
* $Slideshow & Topbanner  輪播海報與靜態海報
* $Globalpage             頁面大小
* $Sidebar & breadcrumbs  側邊攔與麵包削
* $Productlist            商品列表頁
* $Product                產品頁
* $Newslist               最新消息列表頁
* $News                   最新消息頁
* $EditModeLayout         內文編輯模式編排
* $Checkout & Inquiry     結帳與詢價頁
* $Gototop                回到上方按鈕
* $Utilities              功用型
* $ProductRecommend       好康推薦
* $translate              Google翻譯
**/

/*------------------------------*/
/*          $Fonts
--------------------------------*/
/* 統一預設網站字體 */
@font-face {
  font-family: sans-serif, "微軟正黑體", "Microsoft JhengHei" !important;
  src: local(sans-serif), local("微軟正黑體");
  /* no unicode-range; default to all characters */
}
/* 中文字型專用 */
@font-face{
  font-family: "微軟正黑體", "Microsoft JhengHei" !important;
  unicode-range: U+4E00-9FFF;
  src: local("Microsoft JhengHei"),local("微軟正黑體"),local("WenQuanYi Zen Hei");
}
/* 拉丁字符專用 */
@font-face{
  font-family: sans-serif, Arial !important;
  src: local(sans-serif), local(Arial) ;
  unicode-range: U+00-024F;
}
/* 注音符號專用 */
@font-face {
  font-family: "LiHei Pro" !important;    /* 同樣的 font-family */
  unicode-range: U+3100-312F;             /* Bopomofo */
  src: local("LiHei Pro"),                /* OS X */
       local("微軟正黑體");                /* Windows Vista+ */
}
/* 日文假名專用 */
@font-face {
  font-family: sans-serif !important;     /* 同樣的 font-family */
  unicode-range: U+3040-30FF;             /* Hiragana, Katakana */
  src: local(Hiragino Kaku Gothic Pro),   /* OS X */
       local(Meiryo);                     /* Windows Vista+ */
}



/*------------------------------*/
/*          $Navbar
--------------------------------*/
/* 移除 bootstrap navbar 樣式 */
.navbar {
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
  background-color: #f8f8f8;
}
/* 主導覽列 樣式 回饋效果 */
.navbar-nav>li>a{color: #2E2E2E; transition: all 0.4s ease;}
.nav li a:focus,.nav li a:hover{
  background-color: transparent;
}
/* 首頁Navbar固定在頁面上方時，其他頁必須留上方空白，避免重疊覆蓋 */
.navbar-fixtop-blank
{padding-top: 0px;}
/* Logo 圖片大小調整 */
.img-logo-sm,.img-logo-xs{display: inline-block;}
.img-logo-xs a img{max-width: 48%;}
/* bootsnav的搜尋列 */
.top-search .input-group-addon
{padding: 6px 0px;}
.top-search .btn-empty
{
  display: inline-block;
  padding: 0px;
  width: 1%;
  background-color: transparent;
  border-width: 0px;
}
.top-search input
{
  display: inline-block;
  width: 95%;
}
.top-search{
  background-color: #2E2E2E;
  padding: 10px 0;
  display: none;
}
.top-search input.form-control{
  background-color: transparent;
  border: none;
  -moz-box-shadow: 0px 0px 0px;
  -webkit-box-shadow: 0px 0px 0px;
  -o-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
  color: #f8f8f8;
}
.top-search .input-group-addon{
  background-color: transparent;
  border: none;
  color: #f8f8f8;
}
.top-search .input-group-addon.close-search{
  cursor: pointer;
  display: inline-block;
}
/* 購物車下拉選單 */
.cart_list table tr td {
  min-width: 80px;
  vertical-align: middle;
  text-align: center;
}
.cart_list table tr td a img{width: 90%;}
/* 手機板搜尋按鈕ICON */
.navbar-search-xs{
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.navbar-search-xs a{color:rgb(51, 51, 51);}
.navbar-header .attr-nav{
  list-style: none;
  padding: 0px;
  margin: 0px;
}



/*------------------------------*/
/*    $Slideshow & Topbanner
--------------------------------*/
/* 修改Bootstrap3 輪播圖片自適應大小 */
.carousel-inner>.item>img{width: 100%;}
/* 內頁的靜態上方海報 */
.top_banner > img{
  display: block;
  height: auto;
  width: 100%;
}



/*------------------------------*/
/*          $Globalpage
--------------------------------*/
/* 會員中心、商品頁、最新消息上下留白，左右吃bootstrap container*/
.member-wrapper,.contact-wrapper,
.category-wrapper,.search-wrapper,
.product-wrapper,.news-wrapper
{
  margin: 36px auto;
}


/*------------------------------*/
/*     $Sidebar & breadcrumbs
--------------------------------*/
/* 側邊導覽列標題樣式 */
#LinkContainer,ul.breadcrumb,.nav_cate_current,.categoriesbar,.aside-title,.newsbar{
  margin: 0px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 17px; 
}
/* 有些include把breadcrumb當標題用所以必須對齊，E.X. B_category_best_sell.asp */
ul.breadcrumb{margin: 20px 15px 20px 15px;padding: 7px 10px;}
/* 隱藏側邊導覽列母標題 */
.nav .nav_cate_current{display: none;}
/* 側邊導覽列列表樣式 */
aside .nav li a,.headlinecate a,.headlinecate0 a{
  font-size: 15px;
  color: #2E2E2E;
  text-decoration: none;
  transition: all 0.4s ease;
}
/* 商品頁、商品清單列，側邊導覽列 回饋效果 */
aside .nav li a:hover,aside .nav li a:focus{
  background-color: #2E2E2E;
  color: #f8f8f8;
}
/* 移除左側新聞類別項目符號 */
/* 移除各遊覽器ul預設樣式，Chrom、Firfox、Edge已測試都會推padding-start:40px; */
/* 並移除Bootstrap 預設樣式 */
.NEWS_type{
  list-style-type: none;
  padding: 0px;
  margin-bottom: 0px;
}
/* 最新消息 側邊導覽列列表間距 */
.NEWS_type li{padding: 10px 0px;}
/* 最新消息ICON置中對齊 */
.headlinecate img,.headlinecate0 img{margin-bottom: 4px;}
/* 類別和數字的間格 */
.headlinecate a,.headlinecate0 a{padding: 0px 4px;}
/* 麵包削列文字表樣式 */
ol.breadcrumb li a{
  font-size: 15px;
  color: #2E2E2E;
  text-decoration: none;
}
/* News的麵包削不顯示 */
#LinkContainer{
  margin: 0px 15px;
  padding: 7px 10px;
  display: none;
  background-color: #f8f8f8;
}
#LinkContainer a{
  color: #2E2E2E;
  text-decoration: none;
  font-size: 16px;
}

/*------------------------------*/
/*    $Productlist
--------------------------------*/
/* 商品瀏覽方式 回饋效果 */
#myTab a .btn-default{transition: all 0.4s ease;}
#myTab a .btn-default:hover,#myTab a .btn-default:focus{
  background-color: #2E2E2E;
  color: #f8f8f8;
}
/* 商品詳細介紹 回饋效果 */
.li-item .features-box a.btn-default{transition: all 0.4s ease;}
.li-item .features-box a.btn-default:hover,
.li-item .features-box a.btn-default:focus{
  background-color: #2E2E2E;
  color: #f8f8f8;
}
/* 移除點擊商品類別後，多出來的<br>標籤 */
.myTab_topbr{display: none;}
/* 移除無連結商品名稱與商品資訊，P.S.Html5 語意化有問題未修復 */
.features-box .view > .mask{display: none;}
/* 商品頁的商品名稱 */
.features-box > .view >.mask > h2,
.features-box > a > h4{font-size: 16px;}
/* 商品頁的商品名稱 回饋效果 */
.features-box > a{text-decoration: none; transition: all 0.4s ease;}
.features-box > a:hover,.features-box > a:focus{ color: #2E2E2E;}

/* 商品頁的商品簡介 */
.features-box > .view >.mask > p.prd_info,
.features-box > p.prd_info
{font-size: 12px;}
/* 移除浮動屬性避免，跑出.features-box 外(跑版) */
.features-box > .product-price{float: none;}



/*------------------------------*/
/*    $Product
--------------------------------*/
/* 產品二十圖預設標題樣式 */
.brinfo h1{
  margin: 0px 0px 20px 0px;
  font-size: 26px;
}
.brinfo h3{
  margin: 0px 0px 12px 0px;
  font-size: 14px;
}
/* 避免二十圖按鈕不能被點擊 */
.fotorama__nav-wrap {
  position: absolute;
  bottom: 0px;
  margin: 0px !important;
  padding: 0px !important;
}
/* 手機的商品圖片與商品標題避免重疊 */
#prod_img{margin-bottom: 20px;}
/* 商品圖片大小，請勿推padding會引響放大鏡效果 */
#prod_img img{width: 90%;}
@media(max-width: 767px){#prod_img img{width: 100%;}}
/* 左側文字與水平分割線的部分 */
.title-none{
  margin: 0px;
  font-size: 26px;
}
.input-qty-detail h3{margin: 0px;}
.descri-none{font-size: 18px;}
.intro-none hr{margin: 18px auto;}
.ProductName{margin-top: 0px;}
.CodeNum,.PersonNum{
  font-size: 14px;
  text-align: left;
}
/* 數量字體調整 */
dt{font-weight: normal;}
/* 若商品屬性不需要到下一行，可直接刪除.iteminfo_parameter dt 樣式*/
.iteminfo_parameter dt{width: 100% !important;}
.iteminfo_parameter{margin: 0px;}
/* 商品頁，商品數量輸入form會覆蓋放大鏡，bootstrap按鈕層級問題修復 */
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group,
.input-group .form-control
{z-index: 0;}
/* 商品頁數量寬度調整 */
.btn-buy,.btn-inquiry
{margin: 0px 5px 5px 0px;}
/* 關聯產品 / 加購產品，文字內距調整與分散對齊 */
.products-wrapper .grid figcaption,
.product-wrapper .grid figcaption
{padding: 8px 0px;}
.products-wrapper .grid figcaption span,
.product-wrapper .grid figcaption span
{display: inline-block;  text-align: justify;}



/*------------------------------*/
/*          $Newslist
--------------------------------*/
/* 文章標題名稱 */
.news_title
{
  font-size: 20px;
  margin: 0px 0px 12px 0px;
}
/* 避免浮動圖片超出 */
.newslist{overflow: hidden;}
/* 調整預覽圖位址與大小 */
.newslist img.news_pic {
    width: 40%;
    float: left;
    padding: 1%;
}
@media (max-width: 767px){
    .newslist img.news_pic {
        width: 100%;
        float: left;
        padding: 1%;
    }
}
/* 文章相關敘述 */
.caption p{margin-bottom:10px;}
/* icon調整間距 */
.news_date,.news_sort,.news_author{margin-right: 10px;}
/* icon大小調整 */
.news_icon01,.news_icon02,.news_icon03
{max-width: 16px;max-height: 16px;margin-right: 4px;}
/* 繼續閱讀按鈕位置調整 */
.news_more {float: right; transition: all 0.4s ease;}
/* 繼續閱讀按鈕 回饋效果 */
.news_more:hover,.news_more:focus{
  background-color: #2E2E2E;
  color: #f8f8f8;
}
/* 最新消息分頁 樣式 回饋效果 */
.pagination li a{color: #2E2E2E; transition: all 0.4s ease;}
.pagination>li>a:focus,.pagination>li>a:hover{
  background-color: #2E2E2E;
  color: #f8f8f8;
  border: #2E2E2E 1px solid;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover{
  border-color: transparent;
  color: #f8f8f8;
  background-color: #2E2E2E;
}



/*------------------------------*/
/*            $News
--------------------------------*/
/* 文章標題名稱 */
h2.news_title{
  padding:  0px 15px;
  margin: 18px 0px;
  font-size: 30px;
}
/* 貼文資訊ICON，為了排版逼不得已～! */
.news-wrapper>.container>.row>.col-sm-9>.row>p{padding-left: 15px;}



/*------------------------------*/
/*       $EditModeLayout
--------------------------------*/
/* 商品頁、最新消息頁，編輯模式-純文字 */
.GoodsDescrBody2 .alltext,.alltext{
  text-align: justify;
  color: #2E2E2E;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.6px;
}
/* 商品頁、最新消息頁，編輯模式-上圖下文，P.S.預設樣式*/
.arti-news{margin: 0px 15px;}
.arti-news p{
  text-align: justify;
  color: #2E2E2E;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.6px;
}
.arti-news > img{
  margin-top: 5px;
  margin-bottom: 10px;
  width:100%;
}
/* 商品頁、最新消息頁，編輯模式-圖文交錯，P.S.預設樣式*/
.article-content{margin: 0px -15px;}
.article-content .Pro_content p{
  text-align: justify;
  color: #2E2E2E;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.6px;
}
.article-content .Pro_content img{
  width: 100%;
  height:auto;
  margin: 8px 0px 0px;
}
/* 商品頁、最新消息頁，編輯模式-左圖右文，P.S.預設樣式*/
.article-content .Pro_content2 p{
  text-align: justify;
  color: #2E2E2E;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.6px;
}
.article-content .Pro_content2 img{
  width: 100%;
  height:auto;
  margin: 8px 0px 0px;
}
/* 最新消息頁，編輯模式-左圖右文 */
.news_content{margin: 0px 15px;}
/* 每一商品描述內容間距 */
.Pro_content,.Pro_content2{margin-bottom: 24px;}
/* 產品頁影片播放網址視窗 */
.product-wrapper iframe,
.product-wrapper iframe
{margin: 16px auto; width: 100%;}



/*------------------------------*/
/*     $Checkout & Inquiry
--------------------------------*/
/* 標題：我的購物車 */
h1.MYCART_TITLE {
  margin:24px auto !important;
  color: rgb(0, 0, 0) !important;
}
/* 店家資訊與網址 */
.STORE_INFO{display: none;}

/* 清單圖片統一大小，不設最大寬度會有500px的方形圖片 */
tr.PRD_LIST td img{width: 100%;max-width: 200px;}

/* 送出詢價單按鈕 */
#BUY_SELECT{text-align: right;}

/*------------------------------*/
/*           $Gototop
--------------------------------*/
#gotop.gotop{
  padding: 10px;
  font-size: 30px;
  color: #f8f8f8;
  background: rgba(46, 46, 46, 0.4);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
#gotop.gotop:hover{background: rgba(46, 46, 46, 0.8)}



/*------------------------------*/
/*           $Utilities
--------------------------------*/
/* 最新消息列表頁、商品列表頁、側邊導覽列，文字多於一行以...表示 */
.nav_cate_item a,
.headlinecate,.headlinecate0,
.features-box .view .mask p.prd_info,
.features-box .view .mask h2,
.features-box a h4,
.features-box p.prd_info{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/*------------------------------*/
/*     $ProductRecommend
--------------------------------*/
/* 好康推薦1、好康推薦2、好康推薦3、好康推薦4、好康推薦5，文字多於一行以...表示 */
.B_Prod_Slide3 .view .mask h2,
.B_Prod_Slide3 .view .mask p,
.B_Prod_Slide3 .col-item .info h5,
.B_Prod_Slide4 .view .mask h2,
.B_Prod_Slide4 .view .mask p,
.B_Prod_Slide4 .col-item .info h5,
.B_hot_3 .view .mask h2,
.B_hot_3 .view .mask p,
.B_hot_3 .li-item  a h4,
.B_hot_3 .li-item  a p,
.B_hot_4 .caption h3,
.B_category_best_sell .view .mask h2,
.B_category_best_sell .view .mask p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 好康推薦1、好康推薦2、好康推薦3、好康推薦4 標題 */
.B_Prod_Slide4 h3,
.B_Prod_Slide3 h3,
.B_hot_3 .page-header h1,
.B_hot_4 .page-header h1{
  margin: 10px 0px;
  font-size: 32px;
}
/* 好康推薦1、好康推薦2 商品名稱 */
.B_Prod_Slide4 .view .mask h2,
.B_Prod_Slide3 .view .mask h2{
  margin: 10px auto;
  text-align: center;
  font-size: 20px;
}
/* 好康推薦1、好康推薦2 商品簡介 */
.B_Prod_Slide4 .view .mask p,
.B_Prod_Slide3 .view .mask p{
  text-align: center;
  font-size: 14px;
}
/* 好康推薦1、好康推薦2、好康推薦3 細節 */
.B_Prod_Slide4 .view .mask .info,
.B_Prod_Slide3 .view .mask .info,
.B_hot_3 .view .mask .info{
  display: block;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

/* 好康推薦1、好康推薦2 標題、價錢和詳細介紹 */
.B_Prod_Slide4 .col-item .info,
.B_Prod_Slide3 .col-item .info{
  margin: 0px auto;
  text-align: center;
}
.B_Prod_Slide4 .col-item .info h5,
.B_Prod_Slide3 .col-item .info h5
{padding: 4px;}
/* 分割線 */
.B_Prod_Slide4 .col-item .separator,
.B_Prod_Slide3 .col-item .separator
{border-top: 1px solid #2E2E2E;}
/* 好康推薦1、好康推薦2 詳細介紹 */
.B_Prod_Slide4 .info .separator .btn-details,
.B_Prod_Slide3 .info .separator .btn-details{
  float: none;
  display: block;
  margin: 0 auto;
  padding: 8px;
}
/* 好康推薦1、好康推薦2 移除框線 */
.B_Prod_Slide4 .col-item:hover .info,
.B_Prod_Slide3 .col-item:hover .info{
  border: 0 solid transparent;
  -moz-box-shadow: 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
/* 好康推薦1、好康推薦2 清除多一層.row */
.B_Prod_Slide4 > .container > .row,
.B_Prod_Slide3 > .container > .row{margin: 0px;}

/* 好康推薦3、好康推薦4，標題對齊 */
.page-header {
  padding: 0px 0px 9px;
  margin: 40px 15px 20px;
  border-bottom: 1px solid #2E2E2E;
}
/* 好康推薦3，標題與商品對齊 */
.B_hot_3 .thumbnail-list li{padding: 4px;}
/* 好康推薦3、好康推薦4 商品名稱 */
.B_hot_3 .view .mask h2,
.B_hot_4 .caption h3{
  margin: 10px auto;
  font-size: 20px;
}


/*------------------------------*/
/*          $translate
--------------------------------*/
/* 下拉式選單樣式 */
#google_translate_element .goog-te-gadget-simple {
  background-color: transparent;
  border: 0px;
  font-size: 10pt;
  padding: 0px;
}
#google_translate_element .goog-te-combo {
  width: auto !important;
  height: auto;
  margin: 0px;
  background-color: transparent;
  border: none;
}
/* Google logo icon */
#google_translate_element .skiptranslate{display: none;}