﻿/* GNB */

#topMain {

    width: 100%;

    height: 32px;

    overflow: hidden;

    line-height: 32px;

    background:#007E25;

    color: #FFF;

}



#top {

    max-width: 1200px;

    margin: 0 auto;

}



#top p.tel {

    display: block;

    float: right;

    background: url(../ico/tel_bai.png) left center no-repeat;

    padding-left: 20px;

    font-family: Arial, "宋体";

}



#header {

    width: 100%;

    margin: 0;

    background: url(../images/bg_nav.jpg) center bottom repeat-y #FFF;

    position: relative;

    z-index: 100;

}



#header nav {

    position: relative;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}



#header nav h1 {

}



#header nav h1 a {

    display: block;

    position: relative;

    width: 220px;

    height: 110px;

    -webkit-transition: height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -moz-transition: height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -ms-transition: height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -o-transition: height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition: height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)

}



#header nav h1 a img {

    position: absolute;

    top: 50%;

    left: 0;

    width: auto;

    height: 70px;

    margin-top: -35px

}



#header nav .btn_nav {

    display: none

}



#header nav .util_wrap {

    position: absolute;

    top: 0;

    right: 0;

}



#header nav .util_wrap ul li {

    float: left;

    width: 122px;

}



#header nav .util_wrap ul li a {

    display: block;

    position: relative;

    color: #007E25;

    font-size: 18px;

    font-weight: normal;

    text-align: center;

    line-height: 110px;



    -webkit-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -moz-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -ms-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -o-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)

}



#header nav .util_wrap ul li a:hover {

    color: #007E25;

    text-decoration: none

}



#header nav .util_wrap ul li:hover a:after {

    content: "";

    display: block;

    position: absolute;

    bottom: 0;

    right: 0;

    left: 0;

    height: 4px;

    background: #007E25;

}



/* #header nav .util_wrap ul li.m_prod	{position:absolute; top:0; right:-239px; width:239px}

 #header nav .util_wrap ul li.m_prod a	{position:relative; padding-right:67px; font-size:14px}

 #header nav .util_wrap ul li.m_prod a:after	{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:20px; margin-top:-10px; background:#d9d9d9}

 #header nav .util_wrap ul li.m_prod a span	{display:block; overflow:hidden; position:absolute; top:50%; right:50px; width:39px; height:26px; margin-top:-13px; font-size:0; line-height:0}

 #header nav .util_wrap ul li.m_prod a span img	{transition:all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition:all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition:all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition:all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);}

 #header nav .util_wrap ul li.m_prod a:hover span img	{margin-top:-39px}*/



#header nav .util_wrap ul li ul {

    overflow: hidden;

    max-height: 0;

    margin: 0 -30px;

    border: 1px solid #ddd;

    border-top: 0;

    border-bottom: 0;

    background: url('../ico/bg_nav98.png') repeat 0 0;



    box-shadow: rgba(113, 113, 113, 0.1) 0px 7px 3px -3px inset;

    -webkit-transition: all 0.3s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -moz-transition: all 0.3s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -ms-transition: all 0.3s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -o-transition: all 0.3s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    transition: all 0.3s cubic-bezier(0.770, 0.000, 0.175, 1.000)

}



#header nav .util_wrap ul li:hover ul {

    max-height: 400px;

    border-bottom: 1px solid #ddd;

    -webkit-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -moz-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -ms-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    -o-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);

    transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000)

}



#header nav .util_wrap ul li ul li {

    float: none;

    width: 100%;

    border-top: 1px solid #ddd

}



#header nav .util_wrap ul li ul li:first-child {

    border-top: 0; display:block !important;

}



#header nav .util_wrap ul li ul li a {

    display: block;

    font-size: 14px;

    line-height: 50px;

    text-transform: uppercase

}



#header nav .util_wrap ul li:hover ul li a:after {

    display: none

}



#header nav .util_wrap ul li ul li a:hover {

    background: #f0f5fa;

    text-decoration:

}



#header nav .util_wrap ul li ul li:first-child a:hover {

    box-shadow: rgba(113, 113, 113, 0.1) 0px 7px 3px -3px inset;

}



@media screen and (max-width: 1008px) {

    /* 全局 */

    body {

        font-size: 14px;

    }



    /* GNB */

    #header nav .util_wrap ul li.m_prod {

        right: -123px;

        width: 123px

    }



    #header nav .util_wrap ul li.m_prod a {

        padding: 0;

        text-indent: -9999px

    }



    #header nav .util_wrap ul li.m_prod a span {

        text-indent: 0

    }



    #header nav .util_wrap ul li a {

        font-size: 14px;

    }



    #header nav .util_wrap ul li ul {

        margin: 0 -25px;

    }



    #header nav .util_wrap ul li ul li a {

        font-size: 13px;

    }



}



@media screen and (max-width: 800px) {

    /* GNB */

    #header nav h1 a {

        width: 110px;

        height: 55px;

    }



    #header nav h1 a img {

        left: 5px;

        width: 110px;

        height: auto;

        margin-top: -18px

    }



    #header nav .btn_nav {

        display: block;

    }



    #header nav .btn_nav.open {

        position: absolute;

        top: 3px;

        right: 0;

        width: 62px;

        height: 50px;

        background: url('../ico/btn_nav_open.png') no-repeat 0 0

    }



    #header nav .btn_nav.closed {

        position: absolute;

        top: 0;

        right: 0;

        width: 58px;

        height: 51px;

        background: url('../ico/btn_nav_closed.png') no-repeat 0 0

    }



    #header nav .util_wrap {

        overflow-y: scroll;

        position: fixed;

        z-index: 100;

        top: 0;

        right: -240px;

        bottom: 0;

        left: auto;

        width: 240px;

        background: #fff

    }



    #header nav .util_wrap ul {

        padding-top: 51px

    }



    #header nav .util_wrap ul li {

        float: none;

        width: auto !important;

        margin: 0 !important;

        border-bottom: 1px solid #e9eff5

    }



    #header nav .util_wrap ul li:first-child {

        border-top: 1px solid #e9eff5;

        display:none;



    }

#header nav .util_wrap ul li:nth-of-type(2){border-top: 1px solid #e9eff5;}
#header nav .util_wrap ul li ul li:nth-of-type(2){border-top:none;}
    #header nav .util_wrap ul li a {

        padding: 5px 40px 0 20px;

        font-size: 15px;

        text-align: left;

        line-height: 44px

    }



    #header nav .util_wrap ul li a:after {

        content: "";

        display: block !important;

        position: absolute;

        top: 20px;

        right: 20px;

        width: 17px;

        height: 9px;

        background: url('../ico/bg_gnb_arr.png') no-repeat 0 -9px

    }



    #header nav .util_wrap ul li:hover a:after {

        content: "";

        display: block !important;

        position: absolute;

        top: 20px;

        right: 20px;

        left: auto;

        width: 17px;

        height: 9px;

        background: url('../ico/bg_gnb_arr.png') no-repeat 0 -9px

    }



    #header nav .util_wrap ul li.on a:after {

        top: 19px;

        background-position: 0 0

    }



    /*  #header nav .util_wrap ul li.on:hover a:after	{top:19px; left:auto; background-position:0 0} */

    #header nav .util_wrap ul li.m04 a:after {

        top: 20px !important;

        left: auto;

        background-position: 0 -9px !important

    }



    #header nav .util_wrap ul li.on ul li a:after {

        display: none !important;

    }



    #header nav .util_wrap ul li.on:hover a:after ul li a:after {

        display: none

    }



    #header nav .util_wrap ul li ul li a:after {

        display: none !important

    }



    #header nav .util_wrap ul li:hover ul li a:after {

        display: none !important

    }



    #header nav .util_wrap ul li ul {

        position: static !important;

        display: block;

        margin: 0 !important;

        padding: 20px 0 !important;

        border: 0;

        background: #f0f5fa;

        box-shadow: none

    }



    #header nav .util_wrap ul li ul li {

        float: none !important;

        border: 0

    }



    #header nav .util_wrap ul li ul li a {

        margin: 0 !important;

        padding: 0 30px;

        font-size: 14px !important;

        line-height: 30px !important;

        text-transform: none

    }



    #header nav .util_wrap ul li ul li:first-child a:hover {

        box-shadow: none

    }



    #header nav .util_wrap ul li ul li ul {

        padding: 0 !important

    }



    #header nav .util_wrap {

        -webkit-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);

        -moz-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);

        -ms-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);

        -o-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);

        transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000)

    }



    #header nav.on .util_wrap {

        right: 0

    }



    #header nav .util_wrap ul li ul {

        max-height: 1000px !important;

        padding: 20px 0 !important;

        -webkit-transition: all 0.2s ease;

        -moz-transition: all 0.2s ease;

        -ms-transition: all 0.2s ease;

        -o-transition: all 0.2s ease;

        transition: all 0.2s ease;

    }



    #header nav .util_wrap ul li.on ul {

        max-height: 1000px !important;

        padding: 20px 0 !important;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        transition: all 0.5s ease;

    }



    #header nav .util_wrap ul li.on ul li ul {

        padding: 0 !important

    }



    #header nav .util_wrap ul li:hover ul {

        max-height: 0;

        border-bottom: 0

    }

}



















