@charset "utf-8";
/* CSS Document */

/*頁面上方header*/
.top_header_page { width: 100%; z-index: 1000; clear: both; float: left; box-shadow: none; top: 0px; position: relative; background-color: #FFF; transition:0.2s ease-out;}
.top_header_box { display: block; clear: both; position: relative; float: left; margin: 0px; padding: 0px; width: 100%; z-index: 1; }

.scroll-fix.top_header_page { margin-top: -30px; transition:0.2s ease-out; z-index: 9980; clear: both; float: left; }

.top_header_page.scroll-fix{
-webkit-animation-name: animationFade;
-o-animation-name: animationFade;
animation-name: animationFade;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
}
@-webkit-keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-o-keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
@keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
.top_header_page.scroll-fix .top_icon_page{transform: translate3d(0, -100%, 0);position: absolute;}
/*頁面上方公司LOGO和選單*/
.top_navigation_page{ clear: both; float: left; padding: 0px; width: 100%; margin: 0px; background-color: #FFF; }
.top_navigation_box{ width: 80%; display: block; margin-right: 10%; margin-left: 10%; clear: both; float: left; }
.top_navigation_left_box{ float: left; width: 60%;  }
.top_navigation_right_box{ float: right; width: 40%;  }

/*公司LOGO名稱*/
.company_page { float: left; width: 100%; }
.company_box { position: relative; width: 100%; z-index: 100; clear: both; float: left; margin: 0%; }
.company_box .logopic { margin: 0px; position: relative; padding: 0px; text-align: left; float: left; }
.company_box .logopic a { text-align: left;  }
.company_box .logopic img { transition: 0.8s; height: 70px; width: auto; }
.company_box .company_name { color: #000; text-align: left; padding: 0px; display: inline-block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; }
.company_box .company_name font { font-size: 22px; line-height: 70px;display: block; }
 @media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 736px) {
.company_box .logopic { float: none; }
.company_box h2 { text-align: center; padding: 0px; }
.company_box h2 font { }
}
@media screen and (max-width: 480px) {

}

/*頁面上方選單區*/
.top_icon_page { clear: both; width: 100%; float: left; display: block; margin: 0px; padding: 0px; background-color: #333; }
.top_icon_box { display: block; clear: both; position: relative; right: 0px; float: left; width: 80%; margin-top: 0px; margin-right: 10%; margin-bottom: 0px; margin-left: 10%; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; }
.top_icon_left_box { float: left; width: 470px; }

/*頁面上方文字*/
.top_text_messages { float: left; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 5px; }


/*頁面上方文字選單*/ 
#topmenuicon { float: right; margin: 0px; padding: 0px; }
#topmenuicon ul { padding: 0px; border:none; list-style:none; white-space: nowrap; margin: 0px; }
#topmenuicon li { background-color: #F60; border-radius: 2px;  border: 1px solid #E65B00; float: left; white-space: nowrap; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; padding: 0px; position: relative;display: flex;
    justify-content: center; align-items: center; }
#topmenuicon li:before{font-size: 18px;line-height: 26px;font-family: "FontAwesome"; font-weight: 400; color: #FFF;}
#topmenuicon li a, 
#topmenuicon li a:link, 
#topmenuicon li a:visited { padding-right: 15px; padding-left: 15px; margin: 0px; color: #FFF; display: block; text-indent: -9000px; z-index: 1; position: relative; }
#topmenuicon li:hover { color: #FFF; background-color: #E65B00; }
#topmenuicon li a.system_login { color: #FFF; background-color: #666; }
#topmenuicon li a.system_login:hover { color: #FFF; background-color: #E65B00; }
#topmenuicon li a.system_login:before { content:"\f090"; padding-right: 6px;}

#topmenuicon li.topmenuicon_home:before{ content:"\f015"; position: absolute; z-index: 0;}
#topmenuicon li.topmenuicon_shopping_cart:before{ content:"\f07a "; position: absolute; z-index: 0; left: 8px; }
#topmenuicon li.topmenuicon_contact:before{content:"\f27a"; position: absolute; z-index: 0;}
#topmenuicon li.topmenuicon_login:before{content:"\f090"; position: absolute; z-index: 0; }
#topmenuicon li.topmenuicon_InquiryCart:before{content:"\f03a"; position: absolute; z-index: 0;}
#topmenuicon li.topmenuicon_OrderSearch:before{content:"\f00e"; position: absolute; z-index: 0;}

/*頁面上方語文下拉選單*/
#language { float: right; padding: 0px; display: block; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; }
.language { display: block; margin: 0px; padding: 2px; }

/*搜尋*/
.search_page { float: right; margin-right: 5px; margin-left: 5px; }
.search_box { float: left; }
.search_bg { float: left; background-color: #FFF; padding-top: 0px; padding-right: 4px; padding-bottom: 0px; padding-left: 4px; }
.search_bg i { color: #000; }
.search_box .search_txt { margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; height: 28px; }
.search_box .search_btn1 { cursor: pointer; background-color: #F60; float: left; color: #FFF; border: 1px solid #E65B00; display: block; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; margin-right: 4px; }
.search_box .search_btn2 { cursor: pointer; background-color: #666; float: left; color: #CCC; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; border: 1px solid #333; display: block; margin: 0px; }
.search_box .search_btn1:hover { background-color: #E65B00; color: #FFF; border-top-color: #E65B00; border-right-color: #E65B00; border-bottom-color: #E65B00; border-left-color: #E65B00; }
.search_box .search_btn2:hover { background-color: #000; color: #FFF; }

/*頁面上方購物車*/
.cart_item_page { background-color: #F60; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 0px solid rgba(88, 133, 0, 1); float: right; margin-left: 0px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; display: block; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px; }
.cart_item_page:hover { color: #FFF; background-color: #E65B00; }
.cart_item_page .cart_item { float: left; display: block; position: relative; margin: 0px; padding: 0px; width: 100%; clear: both; }
.cart_item_page .cart_item:before { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: absolute; content:"\f291"; font-family: FontAwesome; color: #F60; background-color: #FFF; padding-right: 5px; padding-left: 5px; }
.cart_item_page .cart_item a:link, 
.cart_item_page .cart_item a:visited, 
.cart_item_page .cart_item a { text-decoration: none; color: #FFF; font-family: Arial, Helvetica, sans-serif;}
.cart_item_page .cart_item strong { padding-left:35px; font-weight: normal; }
.cart_item_page .cart_item .much_total {color: #FFF; margin: 0px; padding: 0px; }
.cart_item_page .cart_item .items {color: #FFF; margin: 0px; padding-top: 0px; padding-right: 2px; padding-bottom: 0px; padding-left: 2px; }
.cart_item_page{ display: none; }

.cart_item_page_big { background-color: #F60; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid #E65B00; float: right; margin-left: 0px; margin-top: 14px; margin-right: 5px; margin-bottom: 14px; display: block; padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px;line-height: 40px; }
.cart_item_page_big:hover { color: #FFF; background-color: #E65B00; }
.cart_item_page_big .cart_item { float: left; display: flex; position: relative; margin: 0px; padding: 0px; width: 100%; clear: both; align-items: center;}
.cart_item_page_big .cart_item:before{  border-radius: 50%; position: absolute; content:"\f291"; font-family: FontAwesome; color: #F60; background-color: #FFF; padding: 5px; margin-top: 2px;line-height: normal;display: table;}
.cart_item_page_big .cart_item a:link, 
.cart_item_page_big .cart_item a:visited, 
.cart_item_page_big .cart_item a { text-decoration: none; color: #FFF; font-family: Arial, Helvetica, sans-serif;}
.cart_item_page_big .cart_item strong { padding-left:35px; font-weight: normal; }
.cart_item_page_big .cart_item .much_total {color: #FFC; margin: 0px; padding: 0px; }
.cart_item_page_big .cart_item .items { color: #FFF; margin: 0px; padding-top: 0px; padding-right: 2px; padding-bottom: 0px; padding-left: 2px; }

.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-weight: 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-weight: normal; color: #999; }
.cart_item_box .txt p { clear: both; float: left; width: 100%; margin: 0px; padding: 0px; font-weight: normal; color: #333; }
.cart_item_box .edit a { color: #000; }
.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; }

/*選單*/
#navigation_page { width: 100%; float: left; position: relative; height: 42px; background-color: #F60; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #E65B00; border-bottom-color: #E65B00; }
#navigation_box { width: 80%; display: block; clear: both; float: left; margin-right: 10%; margin-left: 10%; }
#navigation { width: 100%; float: left; padding: 0px; display: block; z-index: 1000; position: relative; clear: both; margin: 0px; }
.navigation_box { width: 100%; }
#divBg { position: relative; margin: 0px; padding-top: 0px; padding-bottom: 0px; }
#divMenu { position: absolute; overflow: hidden; margin-right: 0px; margin-left: 0px; }
#divArrowLeft { height: 40px; cursor: pointer; display: block; position: absolute; width: 20px; VERTICAL-ALIGN: bottom; left: 0px; background-image: url(./images/icon_l-1-a.png); background-repeat: no-repeat; background-position: left 0px; z-index: 1; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: -20px; }
#divArrowLeft:hover { background-image: url(./images/icon_l-1-a.png); background-repeat: no-repeat; background-position: 0px -40px; }
#divArrowRight { height: 40px; cursor: pointer; display: block; position: absolute; width: 20px; background-image: url(./images/icon_r-1-a.png); background-repeat: no-repeat; background-position: left -0px; right: 0px; padding: 0px; margin-top: 0px; margin-right: -20px; margin-bottom: 0px; margin-left: 0px; }
#divArrowRight:hover { background-image: url(./images/icon_r-1-a.png); background-repeat: no-repeat; background-position: 0px -40px; }

/* css_tabs */
#tabs_1 { display: block; float: left; width: 1000%; _width: 100%; margin: 0px; padding: 0px; }
#tabs_1 ul { white-space:nowrap; list-style:none; float: left; clear: both; position: relative; left: 0px; right: 0px; padding: 0px; margin: 0px; }
#tabs_1 li { text-decoration:none; height: 40px; font-style: normal; font-weight: normal; float: left; clear: right; display: block; position: relative; padding-right: 10px; padding-left: 10px; line-height: 42px; border-right-width: 1px; border-right-style: solid; border-right-color: rgba(255,255,255,0.5); }
#tabs_1 li a, 
#tabs_1 li a:link, 
#tabs_1 li a:visited { text-decoration:none; color: #FFF; height: 40px; padding: 0px; cursor: pointer; display: block; float: left; margin: 0px; }
#tabs_1 li a strong { text-decoration:none; font-style: normal; font-weight: normal; display: block; height: 40px; float: left; padding-right: 4px; padding-left: 4px; }
#tabs_1 li a strong font { font-size: 16px; margin: 0px; display: block; white-space: nowrap; padding: 0px; float: left; line-height: 42px; }
#tabs_1 li:hover { background-color: #E65B00; }
#tabs_1 li:hover a,
#tabs_1 li:hover a:link, 
#tabs_1 li:hover a:visited 
{ color: #FFF; }

#tabs_1 li.line_box { width: 20px; background-image: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; }
#tabs_1 li.line_box:hover { background-color: transparent; }

/* 下拉式選單 */
#submenu { padding:0px; clear: both; z-index: 350; float: left; margin-top: 32px; margin-right: 0px; margin-bottom: 0px; margin-left: -20px; }
#submenu .tabs_top { position: absolute; z-index: 300; background-image: url(../images/tabs_1_li_a_h.png); height: 17px; width: 28px; top: 35px; background-repeat: no-repeat; background-position: left top; }
#topmu1, #topmu2, #topmu3, #topmu4, #topmu5, #topmu6, #topmu7, #topmu8, #topmu9, #topmu10 { display:none; margin: 0px; padding: 0px; clear: both; float: left; }
.group_t { margin:0px; width: 280px; clear: both; background-repeat:repeat; background-position: left top; display: block; float: left; padding: 8px; position: relative; }
.group_t:before { border-color:transparent transparent rgba(0,  0,  0,  0.5) transparent; border-style: solid solid solid; border-width: 8px; top: -8px; content: ''; height: 0px; left: 25px; position: absolute; width: 0px; }
.group_t:after { border-color: transparent transparent rgba(255,  255,  255,  1) transparent; border-style: solid solid solid solid; border-width: 8px; top: -7px; content: ''; height: 0px; left: 25px; position: absolute; width: 0px; }
.group_t .tabs_2 { background: rgba(255,  255,  255,  1); width: 100%; display: block; float: left; clear: both; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px; border:double 1px rgba(0,  0,  0,  0.5); overflow: hidden; -moz-box-shadow: 2px 2px 4px rgba(0,  0,  0,  0.3); -webkit-box-shadow: 2px 2px 4px rgba(0,  0,  0,  0.3); box-shadow: 2px 2px 4px rgba(0,  0,  0,  0.3); }
.group_t .tabs_2 ul.tabs_2_ul { width: 100%; list-style:none; display: block; clear: both; float: left; margin: 0px; padding: 0px; }
.group_t .tabs_2 li.tabs_2_li { color:#333; line-height:normal; list-style-type:none; display:block; text-decoration:none; margin:0px; width: 100%; padding: 0px; float: left; clear: both; }
.sub_navigation_box { width: 100%; clear: both; float: left; }
.sub_navigation_box .navigation_img { width: 100%; clear: both; float: left; margin-bottom: 10px; background-image: url(../images/white_alpha_9.png); padding: 1px; display: none; }
.sub_navigation_box a.navigation_title { color: #000; padding: 0px; clear: both; width: 100%; display: block; float: left; line-height: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; font-weight: bold; position: relative; }
.sub_navigation_box a.navigation_title font { font-size: 16px; font-size: inherit; ine-height: 22px; padding: 0px; float: left; display: block; font-weight: normal; margin: 0px; }
.group_t .tabs_2 li a { display: none; }
.group_t .tabs_2 li a.navigation_title, .group_t .tabs_2 li a.navigation_title:link, .group_t .tabs_2 li a.navigation_title:visited { color:#333; line-height:normal; list-style-type:none; display:block; text-decoration:none; overflow:hidden; margin:0px; padding-top: 8px; padding-right: 0px; padding-bottom: 8px; padding-left: 0px; clear: both; list-style-image: none; float: left; width: 100%; }
.group_t .tabs_2 li a.navigation_title font { font-size: 16px; font-size: inherit; padding-left: 15px; padding-right: 15px; display: block; }
.group_t .tabs_2 li:hover a { }
.group_t .tabs_2 li a.navigation_title:hover { text-decoration:none; background-color: rgba(255,  102,  0,  0.8); color: #FFF; /*opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);*/ }
.tabs_2_d { margin-top:0px; position:relative; height:9px; }
.sub_navigation_box .navigation_list { display: none; }
.sub_navigation_box .navigation_list .navigation_link { display: none; }
.sub_navigation_box .navigation_list .navigation_link a { display: none; }
.sub_navigation_box .navigation_list .navigation_link a:before { display: none; }
.sub_navigation_box .navigation_list .navigation_link font { }
.sub_navigation_box .navigation_more_box { display: none; }
.sub_navigation_box .navigation_more_box a { display: none; }
.sub_navigation_box .navigation_more_box a:before { display: none; }


@media screen and (max-width: 1680px) {
.company_box h2 font {  }
.top_icon_box { width: 90%; margin-right:5%; margin-left:5%; }
#navigation_box{ width: 90%; margin-right:5%; margin-left:5%; }
.top_navigation_box{ width: 90%; margin-right:5%; margin-left:5%; }
}
@media screen and (max-width: 1380px) {}
@media screen and (max-width: 1280px) {
.company_box .logopic img { height: 60px; width: auto; }
.company_box .company_name font { line-height: 60px; }
.cart_item_page_big { margin-top: 15px; }
}
@media screen and (max-width: 980px) {
#navigation_page { display: none; }
.search_page { display: none; }
.top_header_page { width: 100%;  }
.company_box .logopic img { width: auto; height: 60px;}
.company_box .company_name{margin-left: 0px;text-align: center; width: 100%;line-height: 1.68em;}
.company_box .company_name font {  font-size: 15px; line-height: 1.68em; }
.cart_item_page_big{ display: none; }
.company_box .logopic { text-align: center;  }
.company_box .logopic a { text-align: center;  }
.top_navigation_left_box{ width: 100%; }
.cart_item_page{ display: inline-block; }
}
 @media screen and (max-width: 736px) {
#navigation_page { display: none; }
.top_header_page { width: 100%; }
#topmenuicon .topmenuicon_home,
#topmenuicon .topmenuicon_shopping_cart,
#topmenuicon .topmenuicon_OrderSearch,
#topmenuicon .topmenuicon_login { display: none; }
}
 @media screen and (max-width: 480px) {
#navigation_page { display: none; }
.top_header_page { width: 100%; }
.company_box .logopic img { margin-right: 20%; margin-left: 20%; width: 60%; height: auto; }
.company_box .company_name{ display: block; clear: both; float: left; width: 100%; margin-right: 0px; margin-left: 0px; }
.company_box .company_name font { font-size: 15px; line-height: 1.68em; clear: both; float: left; width: 100%;   display: inline-block; }
}