:root {
--wb-color-primary:#669900;             /*主要顏色*/
--wb-color-primary-hover:#588500;   /*主要顏色hover*/ 
--wb-color-secondary:;                      /*次要顏色*/
--wb-color-accent:#FFC107;             /*強調色顏色*/

--wb-txt-primary:#222;                     /*主要顏色*/
--wb-txt-primary-hover:#669900;     /*主要顏色hover*/ 
--wb-txt-secondary:#555;                /*次要顏色*/
--wb-txt-accent:#000;                     /*強調色顏色*/

--wb-bg-light:#f7f7f7;                   /*淺底顏色*/
--wb-txt-light-hover:#efefef;         /*淺底顏色hover*/ 
--wb-bg-dark:#333;                      /*深底顏色*/
--wb-txt-dark-hover:#669900;     /*深底顏色hover*/ 

--wb-border-color-light: rgb(0 0 0 / 15%);             /*線條淺底顏色*/
--wb-border-color-dark: rgb(0 0 0 / 30%);             /*線條淺底顏色*/

}

.layout-navbar-page{line-height: 1.68; border-bottom: 1px solid rgba(222, 222, 222, 1); width: 100%; z-index: 890;position: relative;background-color: #333;}
.layout-navbar-box{display: flex;align-items: center;justify-content: flex-end;position: relative;padding: .25rem 0px;font-size: 15px;width: 100%}
.left-box{}
.right-box{}
.center-box{}
@media all and (max-width:768px) {
	.layout-navbar-page{background: #fff; border-bottom: 1px solid rgba(222, 222, 222, 0);}
}

/*頁面上方文字選單*/ 
#topmenuicon { margin: 0px; padding: 0px;margin-right: 5px; }
#topmenuicon ul { padding: 0px; border:none; list-style:none; white-space: nowrap; margin: 0px; }
#topmenuicon ul a { display: block; white-space: nowrap; background-color: var(--wb-color-primary); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid var(--wb-border-color-dark); }
#topmenuicon li { float: left; white-space: nowrap; display: block; margin: 0px; padding-top: 0px; padding-right: 2px; padding-bottom: 0px; padding-left: 2px; }
#topmenuicon li a, 
#topmenuicon li a:link, 
#topmenuicon li a:visited { padding-right: 8px; padding-left: 8px; margin: 0px; display: block; color: #FFF;  }
#topmenuicon li a:hover { color: #FFF; background-color: var(--wb-color-primary-hover); }
#topmenuicon li a.system_login{color: #FFF; background-color: #666; }
#topmenuicon li a.system_login:hover { color: #FFF; background-color: var(--wb-color-primary-hover); }
#topmenuicon li a.system_login:before { content:"\f090"; padding-right: 6px; font-family: "FontAwesome";  font-weight: 400; color: #FFF; }
@media screen and (max-width: 997px) {
#topmenuicon .topmenuicon_home,
#topmenuicon .topmenuicon_shopping_cart,
#topmenuicon .topmenuicon_OrderSearch,
#topmenuicon .topmenuicon_login { display: none; }
}
@media all and (max-width:768px) {
	#topmenuicon { display: none; }
}

/*頁面上方語文下拉選單*/
#language { padding: 0px; margin: 0px 5px; display: flex }
.language { display: block; margin: 0px; padding: 0px; }

/*搜尋*/
.search_page{margin-right: 5px;font-size: inherit;}
.search_box{ float: left;  }
.search_bg{ float: left; background-color: #FFF; padding-top: 0px; padding-right: 4px; padding-bottom: 0px; padding-left: 4px; display: flex;align-items: center;}
.search_bg i{ color: var(--wb-txt-primary);display: none;}
.search_box .search_txt{ margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;border: 1px solid transparent;}
.search_box .search_btn1{ cursor: pointer; background-color: var(--wb-color-primary); float: left; color: #FFF;  border: 1px solid var(--wb-border-color-dark);  display: block; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; margin-right: 4px; border-radius: 0px;}
.search_box .search_btn2{ cursor: pointer; background-color: #666; float: left; color: #fff; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; border: 1px solid var(--wb-border-color-dark); margin: 0px;display: flex;align-items: center;}
.search_box .search_btn1:hover{ background-color: var(--wb-color-primary-hover); color: #FFF; }
.search_box .search_btn2:hover{ background-color: #000; color: #FFF; }
.search_box .search_btn2 i{margin-right: 6px;}
.search_box .search_btn2 i:before{zoom: 1.4;}
@media all and (max-width:768px) {
.search_box .search_btn2 span{ display: none;}
.search_box .search_btn2 i{margin-right: 0px;}
}

/*手機搜尋功能*/
.mobile-search-page{margin-right: 4px;}
.mobile-search-box{}
.mobile-search-btn { cursor: pointer; background-color: #333; float: left; color: #FFF;  border: 1px solid var(--wb-border-color-dark);  display: block; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; margin-right: 4px; border-radius: 0px; }
.mobile-search-btn:hover{background-color: var(--wb-color-primary-hover);color: #FFF;}
.mobile-search-btn i{margin-right: 4px;}
@media all and (max-width:992px) {
.mobile-search-page{display: block;}
}

#modal-search .modal-dialog { margin: 5% auto; max-width: 100%;  padding: 20px; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}
#modal-search .modal-header { border: 0 none; padding: 0; min-height: auto; }
#modal-search button.close { position: absolute; right: 10px; top: 10px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index: 2; opacity: 1; }
#modal-search button.close span { border: 1px solid #909295; border-radius: 60px; color: #909295; display: block; height: 30px; line-height: 0.88; text-align: center; width: 30px; padding-top: 1px; }

.modal-search-page{padding: 20px 0px;}
.modal-search-page .modal-search-title{font-size: 24px;text-align: center;margin-bottom: .5rem;text-transform: uppercase;font-weight: bold;}
.modal-search-page .btn-webbuilder{}
.modal-search-page .modal-search-from{margin-bottom: 1rem}
.modal-search-page .modal-search-button-box{text-align: center;}
@media all and (max-width:576px) {}

/*頁面上方購物車*/
.cart_item_page { margin: 0px 2px;display: block; padding: 0px .5rem;background-color: var(--wb-color-primary); border-radius: 2px;border: 1px solid var(--wb-border-color-dark);}
.cart_item_page:hover { color: #FFF; background-color: var(--wb-color-primary-hover); }
.cart_item { display: flex;align-items: center;}
.cart_item:before{ content:""; /*background-image: url(../../../images/cart_icon.svg);*/ background-repeat: no-repeat; background-position: left center;width: 20px;height: 20px;background-size: 100%;    margin-right: .5rem;}
.cart_item:before{	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512' fill='%23fff'%3E%3Cpath d='M329.291 272.719h-12.326c-65.26 0-201.736.046-266.992-.031-16.978-.018-24.805-12.204-21.825-33.354 1.68-11.923 7.178-18.446 16.671-18.946 6.765-.353 13.547-.195 20.321-.196 64.544-.011 200.313-.383 264.851.354 11.042.127 17.521-2.949 19.301-17.507.585-4.789 2.331-12.109 4.271-19.558H340.31c-79.522-.001-230.264.041-309.784-.042-16.119-.016-23.574-9.945-22.261-28.969 1.059-15.337 7.795-23.373 20.515-23.464 28.526-.202 57.054-.065 85.582-.066 57.768 0 186.761-.198 244.526.249 7.33.058 10.647-2.653 12.85-11.482 5.28-21.137 11.79-36.255 17.021-57.409 3.39-13.713 10.259-20.524 21.047-20.657 24.604-.305 53.6-.617 78.192.101 13.928.406 20.984 11.023 20.574 28.027-.402 16.735-7.931 25.617-22.262 25.739-19.231.161-29.631.04-49.467.04-10.534 37.953-19.282 78.315-32.098 124.531-11.124 40.125-22.183 80.284-33.359 120.39-4.87 17.471-9.209 21.647-23.467 21.679-59.909.127-206.724.15-266.631-.013-15.724-.038-22.656-8.378-22.749-26.081-.097-18.545 6.675-26.977 23.073-27.058 50.277-.241 171.776.064 222.062-.173 21.037-.1 15.205 1.189 22.732-23.184 1.14-3.687 1.725-7.646 2.885-12.92zm37.405 212.822c-26.106-.043-45.793-20.083-45.624-46.438.162-25.25 20.161-45.284 45.479-45.567 25.475-.28 46.671 20.58 46.812 46.072.141 25.591-20.569 45.977-46.667 45.933zm-280.241.001c-26.106-.043-45.793-20.083-45.624-46.438.162-25.25 20.16-45.284 45.479-45.567 25.475-.279 46.671 20.58 46.812 46.072.141 25.591-20.569 45.977-46.667 45.933z' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E");}
.cart_item .cart_box:before {/*content: "\f370";font-family: 'Ionicons';display: inline-block;*/}
.cart_item a:link,
.cart_item a:visited,
.cart_item a{ text-decoration: none; color: #fff; }
.cart_item strong {  font-weight: normal; }
.cart_item .much_total { color: #fff; margin: 0px; padding: 0px; }
.cart_item .items { color: #fff; font-weight: bold; margin: 0px; padding: 0px 5px; }

.cart_item:hover .cart_item_list_box { display: block; }
.cart_item_list_box { width: 300px; background-color: #EBEBEB; position: absolute; display: none; right: 0px; top: 30px; border: 1px solid #CCC; }
.cart_item_list_box ul { clear: both; float: left; width: 100%; margin: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
.cart_item_box { clear: both; float: left; width: 96%; padding-top: 5px; padding-right: 2%; padding-bottom: 5px; padding-left: 2%; margin: 0px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999; }
.cart_item_box .photo { float: left; width: 40px; }
.cart_item_box .txt { float: left; width: 230px; }
.cart_item_box .edit { float: left; width: 10px; }
.cart_item_box .txt h2 { clear: both; float: left; width: 100%; margin: 0px; padding: 0px; font-size: inherit; font-weight: normal; line-height: normal; }
.cart_item_box .txt h2 a { color: #496a01; }
.cart_item_box .txt h3 { clear: both; float: left; width: 100%; margin: 0px; padding: 0px; font-size: inherit; font-weight: normal; color: #999; }
.cart_item_box .txt p { clear: both; float: left; width: 100%; margin: 0px; padding: 0px; font-size: inherit; font-weight: normal; color: var(--wb-txt-primary); }
.cart_item_box .edit a { color: var(--wb-txt-primary); }
.cart_item_list_box .checkout_bt { width: 100%; clear: both; float: left; background-color: #434343; text-align: center; }
.cart_item_list_box .checkout_bt a { color: #FFF; }
@media all and (max-width:768px) {
.cart_item strong{display: none;}
.cart_item {display: none;}
.cart_item_page{display: none;}
}


/*右邊多語系*/
.language-page {display: block; margin: 0px; padding: 0px;position: relative;}
.language-page .language-group:hover .dropdown-menu {display: block;}
.language-page .language-btn{font-size: inherit; background-color: #666;color: #fff;padding: 0px 8px;border: 1px solid var(--wb-border-color-dark);line-height: inherit;text-transform: uppercase;text-decoration: none;border-radius: 0rem;display: flex;}
.language-page .language-btn strong{font-weight: normal;}
.language-page .language-btn i{font-weight: normal;margin-right: 5px;}
.language-page .language-btn i:before{zoom: 1.4;display: flex;line-height: 1.2;}
/*.language-page .language-btn:before { content: ""; background-image: url(../../../images/globe-1.png); height: 16px; width: 16px; display: block; margin-right: 5px; float: left; }*/
.language-page .language-btn:hover { color: rgba(255, 255, 255, 1); }
.language-page .btn-link::after { display: none; }
.language-page .dropdown-menu:before { position: absolute; border-color: transparent transparent rgba(255, 255, 255,0.8) transparent; border-style: solid solid solid; border-width: 6px; top: -12px; content: ''; height: 0px; right: 10px; width: 0px; z-index: 1; }
.language-group .dropdown-menu { position: absolute; left: auto; text-align: left; margin: 0; background: rgba(255, 255, 255,0.9); border: none; padding: 0 20px;box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); border-radius: 0px 0px 4px 4px;font-size: inherit; line-height: 2;max-height: 400px;overflow-y: auto;}

.language-group-list{list-style-type: none;padding: 15px;margin: 0;display: flex;flex-wrap: wrap;width: 500px;}
.language-group-list li{width: 33.33%;}
.language-group-list li > a{padding: 5px 0px; text-align: left; color: var(--wb-txt-primary);font-size: inherit;}
.language-group .dropdown-menu li > a:hover{ text-decoration: none; color: rgba(0, 47, 85, 1); }
.language-group .dropdown-menu li img{margin-right: .5rem;}

 @media all and (max-width:997px) {
.language-group-list{width: 200px;padding: 5px;}
.language-group-list li{width: 100%;}
		.language-page .language-btn strong{display: none;}
		.language-page .language-btn i{ margin-right: 0px;}
}


/*頁首內容*/
.fix-header {transition: ease 0.8s; width: 100%; max-width: 100% !important; top: 0px; left: 0px; right: 0px; z-index: 889; margin: 0 auto; position: fixed !important;box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.5);}
.headerSpace{display: none;}
.headerSpace.unvisible{display: block;}
.fix-header .header-box { padding: 0; }

.page-header { position: relative; background: #f3f3f3; padding-top: 0px; padding-bottom: 0px;width: 100%;transition: 0.4s ease-out; }
.outerHeight{position: relative;width: 100%;height: 0px;transition: 0.4s ease-out;}
.outerHeight.unvisible{}

/* header */
.header-page { background: #fff; padding-top: 0px; padding-bottom: 0px;}
.header-box { position:relative;  text-align: left; z-index: 8;padding:0;transition: 0.4s ease-out; display: flex;align-items: center;justify-content: space-between;}
.fix-header .header-box {    padding: 0px 0;    /*display: none;*/}
@media all and (max-width:992px) {
	.header-box {justify-content: center;}
}

/*LOGO*/
.logo-page { z-index: 1; position: relative; vertical-align: top;display: inline-flex;align-items: center;flex-shrink: 0; padding-right: 30px; }
.logo-page .logo { padding:0; }
.logo-page .logo a { display: inline-block; }
.logo-page .logo img { max-height: 70px; width: auto; height: auto; }
@media (max-width: 576px) {
.logo-page .logo img {width: 100%!important;height: auto!important;}	
}

/*公司名稱*/
.company-name{font-size: 1.25rem;padding: 0; margin: 0;margin-left: .5rem;}
@media (max-width: 576px) {
.company-name{margin-left: 0rem;}
}

/*左邊服務電話*/
.top-phone-page { position: absolute; top: 50%; left: 0; -moz-transform:  translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);display: none;}
.header-phone { text-align: left; padding: 8px 0; padding-left: 46px; background: url(../../../files/icon_phone.png?3958493984054474904) left center no-repeat; }
.header-phone label,
.header-phone p { margin: 0;color: #5a5a5a; line-height: normal;}
 @media all and (min-width:1600px) {/*#top > .container { max-width: 100%; padding: 0 30px; }*/}
	
/* 搜尋search */
.search-page .search-button { color: #505150; height: 44px; width: 45px; line-height: 200%; border: 1px solid var(--wb-border-color-dark); border-radius: 3px; cursor: pointer; box-shadow: none !important; }
.search-page .search-button:hover { color: rgba(102, 153, 0, 1); }
.search-page .search-button[aria-expanded="true"] i:before { content:"\f2d7";}
.search-page .search-content { padding: 0; border: 0; background: transparent; box-shadow: none; left: auto; right: 100%; width: auto; top: 0; margin: 0 5px 0 0px; }
.search-page { float: left; }
.search-page input,
.search-page input.form-control:focus { height: 44px; color: #fff; background: #242424; width: 235px;border: 1px solid rgba(222, 222, 222, 1); border-radius: 3px; box-shadow: none !important; padding: 10px 45px 10px 15px; float: none; }
.search-page input.form-control::placeholder{color: #fff!important;opacity: 1!important;}
.search-page .input-group-btn { position: absolute; right: 0; width: auto; top: 1px; }
.search-page .input-group-btn button { background: transparent; color: #fff; border: 0; border-left: 1px solid rgba(222, 222, 222, 1); height: 43px; width: 45px; padding: 0; border-radius: 0; box-shadow: none !important; margin: 0; }
.search-page .input-group-btn button:hover { color: rgba(102, 153, 0, 1); }
.search-page .input-group-btn button i{}

/*購物區*/
/*==========================*/
.box-cart { position: absolute; right: 0; top: 50%; z-index: 112; -moz-transform:  translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center;padding: .5rem 0rem;}
/*==========================*/
.box-cart .wishlist-page { display: inline-block; vertical-align: top; margin: 0 20px 0 10px; }
.box-cart .wishlist-page a {width: 45px; height: 44px; display: block; position: relative;  color: #505150; border: 1px solid var(--wb-border-color-dark); border-radius: 3px; }
.box-cart .wishlist-page a:hover { color: rgba(102, 153, 0, 1); }
.box-cart .wishlist-page a span { left: -13px; position: absolute;  top: 50%; width: 26px; height: 26px;margin-top: -13px; padding: 0; background: rgba(102, 153, 0, 1); border-radius: 100%; color: #fff; }
.box-cart .wishlist-page a span { opacity: 0; }
/*==========================*/

.cart-page .cart-total {left: -13px; position: absolute;  top: 50%; width: 26px; height: 26px;  margin-top: -13px; padding: 0; background: rgba(102, 153, 0, 1); border-radius: 100%; color: #fff; }
.cart-page .dropdown-menu { }
.cart-page { width: auto; display: inline-block; vertical-align: top; }
.cart-page .mycart { text-transform: capitalize; display: inline-block; vertical-align: top; text-align: left; padding: 0 11px; }
.cart-page .mycart { padding: 0 0 0 11px; }
.cart-page .mycart i{ padding-top: 0; padding-right: 8px; padding-bottom: 0; padding-left: 8px; }
.cart-page .mycart span { display: none; }
.cart-page .mycart span.money { display: block; }
.cart-page .mycart .total-price { color: rgba(102, 153, 0, 1); font-weight: 500; margin-top: 0; display: inline-block; vertical-align: top; }
.cart-page > button { background: none; border: 1px solid rgba(222, 222, 222, 1); border-radius: 3px; box-shadow: none; padding: 0; width: auto; position: relative;height: 44px; }
.cart-page > button > i {  color: #505150; display: inline-block; vertical-align: top;  border-right: 1px solid rgba(222, 222, 222, 1); padding: 0 10px 0 17px; }

.cart-page > button.btn.focus,
.cart-page > button.btn:focus { outline: 0; box-shadow: 0px 0px 0px 0rem rgba(0,123,255,0.25); }
.cart-page .dropdown-toggle::after{ display: none; }

/*購物車下拉選單內容*/
.cart-page .dropdown-menu { margin: 0; padding: 15px 30px 0 30px !important; width: 340px;/* right: -15px;*/ list-style: none none; /*margin-top: 11px;*/ box-sizing: border-box; top: 100%; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.1); box-shadow: 0 0 50px 0 rgba(0,0,0,0.1); color: #fff;border-color: 
rgba(205,205,205,1);}
.cart-page .dropdown-menu:after,
.cart-page .dropdown-menu:before { border-bottom-style: solid; content: ''; display: block; height: 0; position: absolute; width: 0; }
.cart-page .dropdown-menu:before { border: 8px solid; border-color: transparent transparent rgba(255,255,255,1) transparent; z-index: 99; right: 26px; top: -15px; opacity: 1; }
.cart-page .dropdown-menu:after { border: 8px solid; border-color: transparent transparent rgba(205,205,205,1) transparent; z-index: 98; right: 26px; top: -16px; }

.cart-page .dropdown-menu p { margin: 0; }
.cart-page .dropdown-menu .has-scroll { max-height: 270px; overflow: auto; padding: 0 15px; margin: 0 -30px; background: none; }

.cart-page .dropdown-menu .cart-product-box{margin-bottom: .75rem;}
.cart-page .cart-close { position: absolute; top: -2px; right: 5px; font-weight: 400;  }
.cart-page .cart-close button { background: none; color: #5a5a5a; border-radius: 100%; width: 15px; height: 15px; line-height: 15px; padding: 0; border: 0;  -webkit-box-shadow: none;box-shadow: none; }
.cart-page .cart-close button:hover { color: rgba(102, 153, 0, 1); border-color: rgba(102, 153, 0, 1); }
.cart-page .cart-close button i { line-height: inherit; }


.cart-page .dropdown-menu .info-item { padding-left: 10px; padding-right: 20px; }
.cart-page .cart-name { text-transform: capitalize; }
.cart-page .cart-name:hover { color: rgba(102, 153, 0, 1); }
.cart-page .cart-image{width: 100px;height: auto;}
.cart-page .cart-quantity { color: #5a5a5a;display: block; padding: 5px 0;  }
.cart-page .cart-price { color: rgba(102, 153, 0, 1); padding-top: 2px; display: block; }


.cart-page .dropdown-menu .cart-button { margin: 0 -35px; padding: 0px 20px 20px 20px; }
.cart-page p.cart-button a:last-child { margin-top: 15px; }
.cart-page p.cart-button a { border: none; background: #2e2e2e; color: #fff; text-align: center; padding: 0 20px; text-transform: capitalize; margin: 0; border-radius: 3px; display: block; }
.cart-page p.cart-button a strong { font-weight: 400; }
.cart-page p.cart-button a:hover { color: #fff; background: rgba(102, 153, 0, 1); border-color: rgba(102, 153, 0, 1); }
.cart-page p.cart-button a:hover i { color: #fff; }
.cart-page p.cart-button a i { padding-left: 5px; display: none; }

.cart-page .dropdown-menu .cart-price-box{background: url(../../../images/line3.png) top center no-repeat !important;padding: 1rem 0rem }
.cart-page .dropdown-menu .cart-price-box .text-left{padding-left: 0px; }
.cart-page .dropdown-menu .cart-price-box .text-right{padding-right: 0px;}
.cart-page .dropdown-menu .cart-price-box .text-left{ color: #232323; float: left; padding: 2px 0; text-transform: uppercase; }
.cart-page .dropdown-menu .cart-price-box .text-right{ color: rgba(102, 153, 0, 1);  }

@media all and (max-width:1200px) {

}
@media all and (max-width:992px) {
.logo-container { float: none; display: block; text-align: center; }
.box-cart { margin-right: 0px !important; }
#top { text-align: center;}
}
@media all and (max-width:768px) {
.search-page .search-content { left: -15px; right: auto; top: 100%; margin-top: 10px; }
.logo-page {justify-content: center;display: flex;flex-direction: column;padding: 0px; width: calc(100% - 0px); }
.logo-page .logo{padding: 0px 0;}
.company-name {font-size: 1.2rem;padding: .5rem 0;margin-left: 0rem;}
.box-cart{justify-content: center;display: flex;position: relative;transform: translateY(0%);}
.navbar-menu-box{padding: 0px;}
.navbar-menu-box > li {margin-left: 0px;}}
@media (max-width: 576px) {}

/* 選單開始 */
.header-M9-08 .top-menu-page {z-index: 8; width: 100%;background-color: rgb(0 0 0 / 5%); }
.header-M9-08 .top-menu-page > .container{display: flex;flex-wrap: wrap;}
.header-M9-08 .top-menu-box{position: relative;width: 100%;}

/*  MAIN HEADER */
.header-M9-08 .main-header {
  display: flex; align-items: center;  justify-content: space-between; height: 70px;  position: sticky; top: 0; z-index: 1000;  overflow: visible;
  flex: 1; min-width: 0;
}

/*  MAIN NAV  */
.header-M9-08 .main-nav {
  display: flex; align-items: stretch; height: 100%;
  position: relative; width: max-content; flex: none; margin-left: auto;
}
/* Horizontal overflow navigation — reuse jquery.navScroll.js used by HeaderM91-M94.
   The viewport always occupies the space beside the logo, while a short nav keeps
   its natural width and stays right-aligned. Arrows are enabled only on overflow. */
.header-M9-08 .divMenu-page {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.header-M9-08 .divMenu-box {
  height: 100%;
}
.header-M9-08 .main-header.nav-scroll-active .divMenu-box {
  position: relative;
  margin-left: 24px;
  margin-right: 24px;
  overflow: hidden;
}
.header-M9-08 .main-header.nav-scroll-active .main-nav.divMenu-list-items {
  left: 0;
  margin-left: 0;
}
.header-M9-08 #divArrowLeft,
.header-M9-08 #divArrowRight {
  display: none;
  position: absolute;
  top: 0;
  z-index: 2;
  width: 24px;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
.header-M9-08 .main-header.nav-scroll-active #divArrowLeft,
.header-M9-08 .main-header.nav-scroll-active #divArrowRight {
  display: block;
}
.header-M9-08 #divArrowLeft { left: 0; }
.header-M9-08 #divArrowRight { right: 0; }
.header-M9-08 #divArrowLeft button,
.header-M9-08 #divArrowRight button {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.header-M9-08 #divArrowLeft button::before,
.header-M9-08 #divArrowRight button::before {
  display: inline-block;
  font-family: 'Ionicons';
  font-size: 18px;
  line-height: 1;
}
.header-M9-08 #divArrowLeft button::before { content: "\f124"; }
.header-M9-08 #divArrowRight button::before { content: "\f125"; }
.header-M9-08 .nav-item { position: static; display: flex; align-items: center;position: relative; }
.header-M9-08 .nav-link {  display: flex; align-items: center; gap: 5px; padding: 0 15px; height: 100%;  font-size: 16px; font-weight: 600; color: #222; text-decoration: none;  cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent;
  border-top: none; border-left: none; border-right: none;  transition: color 0.18s, border-color 0.18s; background: none;}
.header-M9-08 .nav-link:hover, .header-M9-08 .nav-item.open .nav-link {  color: var(--wb-txt-primary-hover); /*border-bottom-color: var(--wb-color-primary);*/}
.header-M9-08 .nav-link .chev {  display: inline-block; width: 8px; height: 8px;  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; flex-shrink: 0;}
.header-M9-08 .nav-item.open .nav-link .chev { transform: rotate(225deg) translateY(1px); }
.header-M9-08 .nav-link:before {    position: absolute;    content: '';    width: calc(100% - 30px);    margin: 0 auto;    display: table;    height: 3px;    background: var(--wb-color-accent);    bottom: 12px;    -webkit-transition: all 300ms linear;    transition: all 300ms linear;    -webkit-transform: scaleX(0);    transform: scaleX(0);}
.header-M9-08 .nav-link:hover::before{    -webkit-transform: scaleX(1);    transform: scaleX(1);}
.header-M9-08 .nav-item.open .nav-link:before{    -webkit-transform: scaleX(1);    transform: scaleX(1);}

/* ════════════════════════════════════════
   MEGA MENU — Tab style
   ════════════════════════════════════════ */
.header-M9-08 .mega-wrap {  display: none;  position: fixed;   /* overridden by JS to sit flush under the sticky header */  left: 0; right: 0;  background: #fff;  border-top: 3px solid var(--wb-color-primary);  box-shadow: 0 12px 40px rgba(0,0,0,0.14);  z-index: 990;        border-bottom-left-radius: 20px;        border-bottom-right-radius: 20px;}
.header-M9-08 .mega-wrap-box{max-height: 75vh;    display: flex;    width: 100%;    overflow-y: hidden;    padding: 15px;}
.header-M9-08 .nav-item.open .mega-wrap { display: flex;max-width: 1650px; margin-left: auto;margin-right: auto;}

/* Left tab rail */
.header-M9-08 .mega-tabs-box{width: 220px; flex-shrink: 0;overflow: hidden;    background: var(--wb-bg-light);    display: flex;    flex-direction: column;    justify-content: space-between;}
.header-M9-08 .mega-tabs {  width: 220px; flex-shrink: 0;  background: var(--wb-bg-light);  border-right: 1px solid #e8e8e8;  padding: 0;		height: calc(100% - 46px);  overflow-y: auto;    }
.header-M9-08 .mega-tab {  display: flex; align-items: center; justify-content: space-between;  padding: 12px 20px; font-size: 15px; font-weight: 600; color: var(--wb-txt-primary);  cursor: pointer; border-left: 3px solid transparent;  transition: background 0.15s, color 0.15s, border-color 0.15s;  user-select: none; background: none; border-top:none; border-right:none; border-bottom:none;  width: 100%; text-align: left;}
.header-M9-08 .mega-tab:hover { background: var(--wb-txt-light-hover); color: var(--wb-txt-primary-hover); }
.header-M9-08 .mega-tab.active {    color: #ffffff;    border-left-color: var(--wb-color-accent);    font-weight: 600;    background-color: var(--wb-color-primary);}
.header-M9-08 .mega-tab .fa { font-size: 13px; color: var(--wb-txt-secondary); }
.header-M9-08 .mega-tab.active .fa { color: var(--wb-color-accent); }
.header-M9-08 a.mega-tab-all{padding: 12px 20px; font-size: 15px; font-weight: 600; color: var(--wb-txt-primary-hover);}
.header-M9-08 a.mega-tab-all .fa {    font-size: 16px;    margin-left: 10px; }
.header-M9-08 a.mega-tab-all:hover{color:var(--wb-txt-primary);}


/* Right panel area */
.header-M9-08 .mega-panels { flex: 1; padding: 10px 0px 28px 32px; overflow: hidden;    overflow-y: auto;max-height: 75vh; }
.header-M9-08 .mega-panels-title-box{margin-bottom: 1.5rem;}
.header-M9-08 .mega-panels .mega-panels-title{font-size: 20px;font-weight: 600;    margin-bottom: .25rem;}
.header-M9-08 .mega-panels .mega-panels-title .fa {    font-size: 15px;    margin-left: 8px; }
.header-M9-08 .mega-panels .mega-panels-title-link{display: flex;align-items: center;color: var(--wb-txt-primary);}
.header-M9-08 .mega-panels .mega-panels-title-link:hover{color: var(--wb-color-primary);}
.header-M9-08 .mega-panels .mega-panels-txt{font-size: 15px;color: var(--wb-txt-secondary);    max-width: 600px;}
.header-M9-08 .mega-panel { display: none; }
.header-M9-08 .mega-panel.active { /*display: flex; gap: 32px; */ display: block;}
.header-M9-08 .mega-panel-box{column-count: 3;column-gap: 30px;width: 100%;margin: 20px auto;}

/* Panel columns */
.header-M9-08 .panel-col {/* flex: 1; min-width: 160px;*/ min-height: 30px;break-inside: avoid;     margin-bottom: 30px;}
.header-M9-08 .panel-col-title {  font-size: 16px; font-weight: 600; text-transform: uppercase;  letter-spacing: 0.09em; color: var(--wb-txt-primary); margin-bottom: 8px;  padding-bottom: 6px; border-bottom: 1px solid var(--wb-border-color-light);}
.header-M9-08 .panel-col-title a{color: var(--wb-txt-primary);}
.header-M9-08 .panel-col-title a:hover{color: var(--wb-color-primary);border-bottom: 2px solid var(--wb-color-accent);}
.header-M9-08 .panel-col ul { list-style: none;padding: 0; }
.header-M9-08 .panel-col ul li { margin-bottom: 4px; }
.header-M9-08 .panel-col ul li a {  font-size: 15px; color: var(--wb-txt-primary); text-decoration: none;  display: flex; align-items: center; gap: 5px; padding: 4px 0;  transition: color 0.15s; line-height: 1.4;align-items: baseline;}
.header-M9-08 .panel-col ul li a:hover { color: var(--wb-txt-primary-hover); padding-left: 4px; }
.header-M9-08 .panel-col ul li a::before {  display: flex;    flex-shrink: 0;    content: "\f105";    font: normal normal normal 14px / 1 FontAwesome;}
.header-M9-08 .panel-col ul li a:hover::before { border-color: var(--wb-txt-primary-hover); }

/* Simple dropdown (no tabs) */
.header-M9-08 .simple-drop {  display: none; position: fixed;  background: #fff; border-top: 3px solid var(--wb-color-primary);  box-shadow: 0 10px 36px rgba(0,0,0,0.13);  z-index: 990; min-width: 220px; padding: 10px 0; border-radius: 0 0 4px 4px; max-height: 75vh;    overflow-y: auto;}
.header-M9-08 .nav-item.open .simple-drop { display: block;}
.header-M9-08 .simple-drop a {  display: block; padding: 10px 22px; font-size: 15px; color: var(--wb-txt-primary);  text-decoration: none; transition: background 0.15s, color 0.15s;}
.header-M9-08 .simple-drop a:hover { background: var(--wb-txt-light-hover); color: var(--wb-txt-primary-hover); }
.header-M9-08 .simple-drop .sep { height: 1px; background: #f0f0f0; margin: 6px 0; }

/* Overlay dimmer */
.header-M9-08 .menu-dimmer {  display: none; position: fixed; inset: 0;  background: rgba(0,0,0,0.35); z-index: 980;}
.header-M9-08 .menu-dimmer.show { display: block; }

@media (max-width: 1680px) {.header-M9-08 .nav-item.open .mega-wrap{max-width: 1410px;}}
@media (max-width: 1680px) {.header-M9-08 .nav-item.open .mega-wrap{max-width: 1410px;}}
@media (max-width: 1440px) {.header-M9-08 .nav-item.open .mega-wrap{ max-width: 1250px;}}
@media (max-width: 1366px) {.header-M9-08 .nav-item.open .mega-wrap { max-width: 1250px;}}
@media (max-width: 1280px) {.header-M9-08 .nav-item.open .mega-wrap { max-width: 1170px;}}

@media (max-width: 992px) {
.header-M9-08 .main-header{display: none;}
.header-M9-08 .menu-dimmer.show{display: none;}
}

/*手機選單位置和LOGO位置*/
@media all and (max-width:992px) {
.mobile-menu-position-right{}
.mobile-menu-position-right .layout-navbar-box{justify-content: flex-start;}

.mobile-logo-left .header-box {justify-content: flex-start;}
.mobile-logo-left .logo-page{align-items: flex-start;}
.mobile-logo-left .logo-box {justify-content: flex-start;width: calc(100% - 0px);}
.mobile-logo-center .header-box {justify-content:center;}
.mobile-logo-center .logo-page{align-items: center;}
.mobile-logo-center .logo-box{justify-content:center;}
.mobile-logo-right .header-box {justify-content: flex-end;}
.mobile-logo-right .logo-page{align-items: flex-end;}
.mobile-logo-right .logo-box {justify-content: flex-end;width: calc(100% - 0px);}
.language-group .dropdown-menu{width: 200px;}
.mobile-menu-position-right .language-group .dropdown-menu{width: 200px;left: 0;}
}
@media (max-width: 768px){
.mobile-logo-left .logo-box{align-items: flex-start;}
.mobile-logo-left .company-name { margin: 5px 0px;}
.mobile-logo-center .logo-box{align-items: center;}
.mobile-logo-right .logo-box {align-items: flex-end;}
}
@media (max-width: 576px){
}