/*index_categories_product*/
.index_product_container { position: relative; padding: 60px 0 25px 0; }
.Product_categories_wrap { position: relative; }
.Product_categories_wrap .product_cate_tabs { position: relative; font-size: 0; text-align: center; }
.product_cate_tabs .categories_tab { width: 161px; display: inline-block; cursor: pointer; }
.categories_tab .cate_img { display: block; position: relative; }
.categories_tab .cate_img:after { content: ""; width: 2px; height: 34px; background: #b2afaf; position: absolute; right: -1px; top: 10px; }
.categories_tab:last-child .cate_img:after { display: none; }
.categories_tab .cate_img img { max-width: 100%; width: auto; }
.categories_tab .cate_img img + img { display: none; }
.categories_tab .category_name { position: relative; font-size: 16px; line-height: 1; font-weight: normal; padding: 17px 0 25px; text-transform: lowercase; }
.Product_categories { position: relative; margin-top: 30px; }
.category_tab_wrap { position: relative; }
.category_items { display: flex;justify-content: center;flex-wrap: wrap;-webkit-display: flex;-webkit-justify-content: space-between;-webkit-flex-wrap: wrap; }
.category_item { width: calc((100% - 75px)/5);margin-right: 15px; }
.category_item figure { }
.category_item .item_img { position: relative;display: block; }
.category_item .item_img:before {content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 15px;
    top: 0;
    bottom: 15px;
    background: #0000009c;
    transition: all ease-in-out .35s;
    -webkit-transition: all ease-in-out .35s;
    transform: scale(0);
    -webkit-transform: scale(0);}
.category_item .item_img:after { content: "\f002"; font-family: 'fontawesome'; color: black; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; box-sizing: border-box; text-align: center; line-height: 40px; font-size: 16px; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); transition: all ease-in-out .35s; -webkit-transition: all ease-in-out .35s; }
.category_item figcaption h4 { display: block; text-align: center; margin: 21px 0 22px 0; font-size: 16px; line-height: 1.5; font-weight: normal;color: #0e8345; }
.categories_tab.current .category_name { color: #408858; text-transform: capitalize; }
/*.categories_tab.current .category_name:after { content: ""; width: 76px; height: 6px; background-image: url(img/demo/title_line.png); position: absolute; left: 50%; bottom: 0; margin-left: -38px; }*/
.categories_tab.current .cate_img img { display: none; }
.categories_tab.current .cate_img img + img { display: inline-block; }
.category_item:hover .item_img:before { transform: scale(1); -webkit-transform: scale(1); border-radius: 50%;}
.category_item:hover .item_img:after { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }
.product-detail { position: relative; overflow: visible; }
.detail-tabs { position: relative; margin-bottom: -1px; background: #eaedf0; }
.detail-tabs .title { position: relative; position: relative; position: relative; float: left; display: inline-block; margin-right: -1px; padding: 1px 35px; border: 1px solid #ccd3d9; color: #959da7; vertical-align: top; text-transform: uppercase; font-weight: bold; font-size: 18px; line-height: 35px; cursor: pointer; color: rgba(0,33,64,.5); font-family: Times New Roman; }
.detail-tabs .title.current { position: relative; z-index: 2; margin-bottom: -1px; padding-bottom: 2px; border-bottom: none; background: #fff; color: rgba(0,33,64,1); }
.product-detail .tab-panel-content { display: block; overflow: hidden; padding: 10px 0; }
.product-detail .disabled, .Product_categories .disabled { display: none; }
.tab-panel-wrap { margin-bottom: 60px; padding: 40px; border: 1px solid #ccd3d9; background-color: #fff; }


  @media only screen and (max-width: 950px) {
    *{
        font-size: 12px !important;
    }
  }
  


 @media only screen and (max-width: 950px) {
/*index*/
.category_items{ margin-left: 9px;}
.company_introduce_container { padding: 25px 0; }
.company_introduce_wrap { width: auto; float: none; }
.company_introduce_wrap .about_tit { font-size: 28px; line-height: 35px; margin: 7px 0; }
.index_feature_container { padding: 30px 0; }
.hd_title { font-size: 45px; }
.index_hd .hd_sesc { font-size: 14px; max-width: 80%; margin: 15px auto 20px auto; }
.feature_item { padding: 30px 1%; width: 32.33%; }
.feature_item .feature_icon { margin-bottom: 10px; }
.feature_item figcaption .feature_tit { font-size: 18px; margin-bottom: 0; }
.feature_item figcaption .feature_desc { font-size: 12px; line-height: 1.67; }
.category_item { width: calc((100% - 30px)/2);margin-right: 7px; }
.index_product_container, .index_news_container { padding: 30px 0; }
.company_subscribe .subscribe_desc { max-width: unset !important; }
.company_subscribe .hd_title { font-size: 34px; }
.news_item_wrap { margin-top: 17px; }
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
 @-webkit-keyframes fadeInLeftA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(-30%, 0, 0);
 transform: translate3d(-30%, 0, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInLeftA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(-30%, 0, 0);
 transform: translate3d(-30%, 0, 0);
 -ms-transform: translate3d(-30%, 0, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 -ms-transform: none;
}
}
.fadeInLeftA { -webkit-animation-name: fadeInLeftA; animation-name: fadeInLeftA; }
 @-webkit-keyframes fadeInUpA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 30%, 0);
 transform: translate3d(0, 30%, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInUpA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 30%, 0);
 transform: translate3d(0, 30%, 0);
 -ms-transform: translate3d(0, 30%, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 -ms-transform: none;
}
}
.fadeInUpA { -webkit-animation-name: fadeInUpA; animation-name: fadeInUpA; }
 @-webkit-keyframes fadeInRightA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(30%, 0, 0);
 transform: translate3d(30%, 0, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInRightA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(30%, 0, 0);
 transform: translate3d(30%, 0, 0);
 -ms-transform: translate3d(30%, 0, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 -ms-transform: none;
}
}
.fadeInRightA { -webkit-animation-name: fadeInRightA; animation-name: fadeInRightA; }
 @-webkit-keyframes twinkling { 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @-webkit-keyframes OrangePulse { from {
 background-color: rgba(210,174,109,.2);
 -webkit-box-shadow: 0 0 10px rgba(210,174,109,1);
}
 50% {
 background-color: rgba(210,174,109,1);
 -webkit-box-shadow: 0 0 10px rgba(210,174,109,1);
}
to { background-color: rgba(210,174,109,.2); -webkit-box-shadow: 0 0 10px rgba(210,174,109,1); }
}
 @-webkit-keyframes swing { 20% {
 -webkit-transform: rotate(40deg);
 transform: rotate(40deg);
}
 40% {
 -webkit-transform: rotate(-20deg);
 transform: rotate(-20deg);
}
 60% {
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
 80% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
}
 @keyframes swing { 20% {
 -webkit-transform: rotate(40deg);
 transform: rotate(40deg);
 -ms-transform: rotate(40deg);
}
 40% {
 -webkit-transform: rotate(-20deg);
 transform: rotate(-20deg);
 -ms-transform: rotate(-20deg);
}
 60% {
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
 -ms-transform: rotate(10deg);
}
 80% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
}
 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 -ms-transform: rotate(0deg);
}
}
.swing { -webkit-transform-origin: top center; transform-origin: top center; -ms-transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }
 @-webkit-keyframes jump { 0% {
 -webkit-transform: translateY(0);
}
 25% {
 -webkit-transform: translateY(-20%);
}
 50% {
 -webkit-transform: translateY(0);
}
 75% {
 -webkit-transform: translateY(-10%);
}
 100% {
 -webkit-transform: translateY(0);
}
}
 @keyframes jump { 0% {
 transform: translateY(0);
}
 25% {
 transform: translateY(-20%);
}
 50% {
 transform: translateY(0);
}
 75% {
 transform: translateY(-10%);
}
 100% {
 transform: translateY(0);
}
}
 @-webkit-keyframes bounceInA { 0%, 100%, 20%, 40%, 60%, 80% {
 -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
 transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(.97, .97, .97);
 transform: scale3d(.97, .97, .97);
}
 100% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes bounceInA { 0%, 100%, 20%, 40%, 60%, 80% {
 -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
 transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 -ms-transform: scale3d(.3, .3, .3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
 -ms-transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
 -ms-transform: scale3d(.9, .9, .9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
 -ms-transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(.97, .97, .97);
 transform: scale3d(.97, .97, .97);
 -ms-transform: scale3d(.97, .97, .97);
}
 100% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
 -ms-transform: scale3d(1, 1, 1);
}
}
.bounceInA { -webkit-animation-name: bounceInA; animation-name: bounceInA; -webkit-animation-duration: .75s; animation-duration: .75s; }
 @-webkit-keyframes fadeInDownA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -20%, 0);
 transform: translate3d(0, -20%, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInDownA { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -20%, 0);
 transform: translate3d(0, -20%, 0);
 -ms-transform: translate3d(0, -20%, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 -ms-transform: none;
}
}
.fadeInDownA { -webkit-animation-name: fadeInDownA; animation-name: fadeInDownA; }
 @keyframes fadeInA { 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
.fadeInA { -webkit-animation-name: fadeInA; animation-name: fadeInA; }
 @-webkit-keyframes flipInY { 0% {
 opacity: 0;
 -webkit-transform: perspective(400px) rotateY(90deg);
 transform: perspective(400px) rotateY(90deg);
}
 0%, 40% {
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 40% {
 -webkit-transform: perspective(400px) rotateY(-20deg);
 transform: perspective(400px) rotateY(-20deg);
}
 60% {
 opacity: 1;
 -webkit-transform: perspective(400px) rotateY(10deg);
 transform: perspective(400px) rotateY(10deg);
}
 80% {
 -webkit-transform: perspective(400px) rotateY(-5deg);
 transform: perspective(400px) rotateY(-5deg);
}
to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}
 @keyframes flipInY { 0% {
 opacity: 0;
 -webkit-transform: perspective(400px) rotateY(90deg);
 transform: perspective(400px) rotateY(90deg);
}
 0%, 40% {
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 40% {
 -webkit-transform: perspective(400px) rotateY(-20deg);
 transform: perspective(400px) rotateY(-20deg);
}
 60% {
 opacity: 1;
 -webkit-transform: perspective(400px) rotateY(10deg);
 transform: perspective(400px) rotateY(10deg);
}
 80% {
 -webkit-transform: perspective(400px) rotateY(-5deg);
 transform: perspective(400px) rotateY(-5deg);
}
to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}
.flipInY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY; }
/* animate.css */
@-webkit-keyframes fadeInUp { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
to { opacity: 1; -webkit-transform: none; transform: none; }
}
 @keyframes fadeInUp { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
 @-webkit-keyframes fadeInUpBig { 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
to { opacity: 1; -webkit-transform: none; transform: none; }
}
 @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
 animation-timing-function: cubic-bezier(.215, .61, .355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 3000px, 0);
 transform: translate3d(0, 3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 75% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -5px, 0);
 transform: translate3d(0, -5px, 0);
}
to { -webkit-transform: translateZ(0); transform: translateZ(0); }
}
 @keyframes bounceInUp { 0%, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
 animation-timing-function: cubic-bezier(.215, .61, .355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, 3000px, 0);
 transform: translate3d(0, 3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 75% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -5px, 0);
 transform: translate3d(0, -5px, 0);
}
to { -webkit-transform: translateZ(0); transform: translateZ(0); }
}
.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; }
 @-webkit-keyframes zoomInA { 0% {
 opacity: 0;
 -webkit-transform: scale3d(.6, .6, .6);
 transform: scale3d(.6, .6, .6);
}
 50% {
 opacity: 1;
}
}
 @keyframes zoomInA { 0% {
 opacity: 0;
 -webkit-transform: scale3d(.6, .6, .6);
 transform: scale3d(.6, .6, .6);
}
 50% {
 opacity: 1;
}
}
.zoomInA { -webkit-animation-name: zoomInA; animation-name: zoomInA; }


    /*手机版菜单*/
    #header a.mm_btn {
        background: center center no-repeat transparent;
        display: block;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -10px;
        padding: 15px;
        z-index: 12;
    }

    #header .mm_btn .menu_bar {
        width: 30px;
        height: 30px;
        position: relative;
        transform: translateZ(0) rotate(0);
        transition: transform .4s cubic-bezier(.4, .01, .165, .99);
    }

    #header .mm_btn .menu_bar_item {
        position: absolute;
        left: 0;
        top: 0;
        transform: translateZ(0) rotate(0);
        transition: transform .25s cubic-bezier(.4, .01, .165, .99) 0s;
        -webkit-transform: translateZ(0) rotate(0);
        -webkit-transition: -webkit-transform .25s cubic-bezier(.4, .01, .165, .99) 0s;
        width: 30px;
        height: 30px;
    }

    #header .mm_btn .menu_bar_item .rect {
        width: 30px;
        height: 2px;
        background: black;
        position: absolute;
        left: 0;
        top: 14px;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #header .mm_btn .menu_bar_item .rect.top {
        transform: translate3d(0, -8px, 0);
        -webkit-transform: translate3d(0, -8px, 0);
    }

    #header .mm_btn .menu_bar_item .rect.mid {
        transform: translate3d(0, 0px, 0);
        -webkit-transform: translate3d(0, 0px, 0);
        transition: 0.5s;
    }

    #header .mm_btn .menu_bar_item .rect.bottom {
        transform: translate3d(0, 8px, 0);
        -webkit-transform: translate3d(0, 8px, 0);
    }

    #header .mm_btn.is_active .menu_bar_item.mid {
        opacity: 0;
    }

    #header .mm_btn.is_active .menu_bar_item .rect {
        transition: transform 0s ease 0s;
        transform: translate3d(0, 0, 0);
        -webkit-transition: -webkit-transform 0s ease 0s;
        -webkit-transform: translate3d(0, 0, 0);
    }

    #header .mm_btn.is_active .menu_bar_item.bottom {
        transform: translateZ(0) rotate(-45deg);
        -webkit-transform: translateZ(0) rotate(-45deg);
    }

    #header .mm_btn.is_active .menu_bar_item {
        transform: translateZ(0) rotate(45deg);
        transition: transform .25s cubic-bezier(.4, .01, .165, .99) 0s;
        -webkit-transform: translateZ(0) rotate(45deg);
        -webkit-transition: -webkit-transform .25s cubic-bezier(.4, .01, .165, .99) 0s;
    }

    /*菜单弹出方向*/
    .mm-menu_offcanvas {
        left: auto !important;
    }

    .mm-menu {
        right: 0 !important;
    }

    .mm-menu_offcanvas.mm-menu_opened {
        z-index: 9 !important;
    }

    .mm-slideout {
        z-index: 10 !important;
    }

    .mm-menu.mm-menu_pageshadow:after {
        content: "";
        display: block;
        width: 20px;
        height: 120%;
        position: absolute;
        right: 100%;
        top: -10%;
        z-index: 99;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    }

    /*弹出菜单边阴影*/
    .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate(-80vw, 0) !important;
        -ms-transform: translate(-80vw, 0) !important;
        transform: translate(-80vw, 0) !important;
        -webkit-transform: translate3d(-80vw, 0, 0) !important;
        transform: translate3d(-80vw, 0, 0) !important;
    }

    .mm-wrapper_opened .mm-menu_fx-menu-slide {
        -webkit-transform: translate(0, 0) !important;
        -ms-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }

    #menu {
        color: rgba(0, 0, 0, .8);
    }

    #menu .mm-listview .mm-btn_next:after {
        border-color: rgba(189, 189, 189, 1);
    }

    #menu .mm-btn:after,
    #menu .mm-btn:before {
        border-color: rgba(189, 189, 189, 1);
    }

    #menu .mm-navbar a,
    #menu .mm-navbar>* {
        color: rgba(0, 0, 0, .8);
        font-size: 16px;
    }

    #menu.mm-menu_theme-white .mm-counter {
        color: rgba(0, 0, 0, .6);
    }

    #menu .mm-listitem,
    #menu .mm-listitem #menu .mm-btn_next,
    #menu .mm-listitem #menu .mm-btn_next:before,
    #menu .mm-listitem:after,
    #menu .mm-listview {
        border-color: rgba(0, 0, 0, .1);
    }

    #menu .mm-navbars_bottom,
    #menu .mm-navbars_top {
        border-color: rgba(0, 0, 0, .1);
    }

    #menu .mm-listitem a {
        font-size: 16px;
    }
/*-------------------------------
			animation  end
			----------------------------------*/