@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; }

.top_header_page.scroll-fix { margin-top: 0px; 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 { width: 100%; }
.top_navigation_right_box { width: 100%; }
/*公司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 { -moz-transition: 0.8s; -o-transition: 0.8s; -webkit-transition: 0.8s; 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) {
}
@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: 5px; padding-right: 0px; padding-bottom: 5px; 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: rgba(102, 152, 0, 1); border-radius: 2px; border: 1px solid rgba(88, 133, 0, 1); float: left; white-space: nowrap; display: block; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; padding: 0px; position: relative; }
#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: rgba(88, 133, 0, 1); }
#topmenuicon li a.system_login { color: #FFF; background-color: #666; }
#topmenuicon li a.system_login:hover { color: #FFF; background-color: rgba(88, 133, 0, 1); }
#topmenuicon li a.system_login:before { content:"\f090"; padding-right: 6px; }
#topmenuicon li.topmenuicon_home:before { content:"\f015"; position: absolute; z-index: 0; padding-left: 8px; }
#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; padding-left: 8px; }
#topmenuicon li.topmenuicon_login:before { content:"\f090"; position: absolute; z-index: 0; padding-left: 8px; }
#topmenuicon li.topmenuicon_InquiryCart:before { content:"\f03a"; position: absolute; z-index: 0; padding-left: 8px; }
#topmenuicon li.topmenuicon_OrderSearch:before { content:"\f00e"; position: absolute; z-index: 0; padding-left: 8px; }
/*頁面上方語文下拉選單*/
#language { float: right; padding: 0px; display: block; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; }
.language { line-height: 1.68em; 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: rgba(102, 152, 0, 1); float: left; color: #FFF; border: 1px solid rgba(88, 133, 0, 1); 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 #666; display: inline-block; margin: 0px; }
.search_box .search_btn1:hover { background-color: rgba(88, 133, 0, 1); color: #FFF; border-top-color: rgba(88, 133, 0, 1); border-right-color: rgba(88, 133, 0, 1); border-bottom-color: rgba(88, 133, 0, 1); border-left-color: rgba(88, 133, 0, 1); }
.search_box .search_btn2:hover { background-color: #000; color: #FFF;border: 1px solid #000; }
/*頁面上方購物車*/
.cart_item_page { background-color: rgba(102, 152, 0, 1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px 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: rgba(88, 133, 0, 1); }
.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: rgba(102, 152, 0, 1);  background-color: #FFF; padding-right: 5px; padding-left: 5px;    zoom: .8; margin-top: 3px; }
.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: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; background-color: rgba(102, 153, 0, 1); }
#navigation_box { width: 80%; display: block; clear: both; float: left; margin-right: 10%; margin-left: 10%; }
#navigation_box .caret {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 5px dashed;
    border-top: 5px solid \9;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    margin-bottom: 3px;
}

@media screen and (max-width: 1680px) {
.company_box h2 font { font-size: 15px; }
.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;}
}
@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; }
.company_box .logopic { text-align: center; width: 100%;}
.company_box .logopic a { text-align: center; }
.top_navigation_left_box { width: 100%; }
}
 @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; }
}
nav.navbar.navbar-webbuilder-1 { display: block; }
.navbar-webbuilder-1 .mega-dropdown { position: static !important; }
.navbar-webbuilder-1 .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none;max-height: 450px;overflow: auto; }
.navbar-webbuilder-1 .mega-dropdown-menu > li > ul { padding: 0; margin: 0; margin-bottom: 15px; }
.navbar-webbuilder-1 .mega-dropdown-menu > li > ul > li { list-style: none; }
.navbar-webbuilder-1 .mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px; font-size: 16px;}
.navbar-webbuilder-1 .mega-dropdown-menu > li ul > li > a:hover, .navbar-webbuilder-1 .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; }
.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header{ font-size: 16px; color: rgba(102, 152, 0, 1); padding: 5px 5px 5px 5px; }

.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header a,
.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header a:link,
.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header a:visited {padding: 0px 0px;}
.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header a:hover font{ color: #436400; }
.navbar-webbuilder-1 .mega-dropdown-menu .dropdown-header font{ font-size: 16px; color: rgba(102, 152, 0, 1);}

.navbar-webbuilder-1 .carousel-control { width: 30px; height: 30px; top: -35px; }
.navbar-webbuilder-1 .left.carousel-control { right: 30px; left: inherit; }
.navbar-webbuilder-1 .carousel-control .glyphicon-chevron-left, .navbar-webbuilder-1 .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; text-shadow: none; color: #333; border: 1px solid #ddd; }
.navbar-webbuilder-1 { float: left; clear: both; width: 100%; background-color: rgba(102, 153, 0, 1); border: 0px solid #e7e7e7; margin-bottom: 0px; border-radius:0px; }
.navbar-webbuilder-1 .navbar-collapse { padding-right: 0px; padding-left: 0px; }
.navbar-webbuilder-1 .navbar-nav > li > a { color: #FFF; }
.navbar-webbuilder-1 .navbar-nav > li > a font{ font-size: 16px; }
.navbar-webbuilder-1 .navbar-nav > li > a:hover, .navbar-webbuilder-1 .navbar-nav > li > a:focus { color: #555555; background-color: #e7e7e7; }
.navbar-webbuilder-1 .dropdown-menu { -webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.175); box-shadow: 0px 0px 5px rgba(0,0,0,0.175); top: 48px;    font-size: inherit; font-size: 16px; }
.navbar-webbuilder-1 .dropdown-menu .img-responsive{margin-bottom: 5px;}