<!--导航开始-->

<div class="nav_main" aos="fade-down" aos-easing="ease" aos-duration="700">

  <div class="nav w1200">

    <ul class="list clearfix" id="nav">

      <li id="cur" {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='hover' ":@me="";{/dede:field}><a href="/" title="网站首页">网站首页</a></li>

      {dede:channelartlist typeid='top' currentstyle='hover'}

      <li><a href="{dede:field name='typeurl'/}" title="{dede:field name='typename'/}" class='{dede:field.currentstyle/}'>{dede:field name='typename'/}</a>

        <dl>

          {dede:channel type='son' noself='yes'}

          <dd><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a> </dd>

          {/dede:channel}

        </dl>

      </li>

      {/dede:channelartlist}

    </ul>

  </div>

</div>

<!--导航结束--> 

@charset "UTF-8";

dl, dd {

margin: 0px;

}

.nav_main {

width: 100%;

height: 50px;

line-height: 50px;

background: #187abc;

position: relative;

z-index: 3;

}

.nav .list {

width: 102%;

margin: 0 auto;

height: 50px;

line-height: 50px;

position: relative;

}

.nav_main .nav {

width: 1400px;

margin: 0 auto;

}

.nav_main .nav li {

float: left;

width:125px;

display: block;

position: relative;

z-index: 10;

font-size: 16px;

border-right: 1px solid #0b2d7e;

text-align: center;

}

.nav_main .nav li:first-child {

border-left: 1px solid #0b2d7e;

background: none;

}

.nav_main .nav li:first-child.hover {

background-color: #0185d0;

}

.nav_main .nav li a {

display: block;

color: #fff;

font-size: 16px;

}

.nav_main .nav li a:hover, .nav_main .nav li a.hover, .nav_main .nav li #hover2 {

background: #0185d0;

}

.nav_main .nav dl {

width: 100%;

background: #fff;

position: absolute;

left: 0;

top: 52px;

z-index: 12;

border: 1px solid #0185d0;

}

.nav_main .nav dl {

position: absolute;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#4c91c0, direction=120, strength=5);

opacity: 0;

visibility: hidden;

transition: all .6s ease 0s;

transform: translate3d(0, 10px, 0);

-moz-transform: translate3d(0, 10px, 0);

-webkit-transform: translate3d(0, 10px, 0);

}

.nav_main .nav li:hover dl {

opacity: 1;

visibility: visible;

transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

}

.nav_main .nav dl dd {

line-height: 49px;

height: 49px;

border-top: 1px solid #e5e5e5;

text-align: left;

position: relative;

z-index: 12;

display: block;

width: 100%;

}

.nav_main .nav dl dd:first-child {

border: none;

}

.nav_main .nav dl dd a {

color: #666;

font-size: 16px;

padding: 0;

width: 100%;

text-align: center;

}

.nav_main .nav dl dd a:hover, .nav_main .nav dl dd a.hover {

background: #0185d0;

color: #fff;

}

.nav_main .nav dl dd .three {

position: absolute;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#4c91c0, direction=120, strength=5);

opacity: 0;

visibility: hidden;

transition: all .6s ease 0s;

transform: translate3d(0, 10px, 0);

-moz-transform: translate3d(0, 10px, 0);

-webkit-transform: translate3d(-10px, 0, 0);

}

.nav_main .nav dl dd:hover .three {

opacity: 1;

visibility: visible;

transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

}

.nav_main .nav dl dd .three {

position: absolute;

left: 158px;

top: 4px;

padding-left: 20px;

color: #666;

z-index: 10;

background: url(../images/menu_bg.png) 12px 10px no-repeat;

}

.nav_main .nav dl dd .three a {

color: #fff;

width: 140px;

font-size: 14px;

background: #0185d0;

text-align: center;

display: block;

height: 39px;

line-height: 39px;

border-top: 1px solid #187abc;

transition: ease-in-out .2s;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

.nav_main .nav dl dd .three a:first-child {

border-top: none;

}

.nav_main .nav dl dd .three a:hover {

background: #187abc;

color: #fff;

}

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

.nav_main {

    margin-top: -100%;

}

.nav_main .nav li:first-child.hover {

    margin-top: -100%;

}

.nav_main .nav li a {

    margin-top: -100%;

}

 }