body{margin:0;padding:0;font-size:14px;font-family:microsoft yahei,times new roman,Times,serif;letter-spacing:0;min-width:1200px;color:#333}
.hl_nav{position:relative;color:#fff; background: #fff; min-width:1200px;height:60px;z-index: 2;border-top: 1px solid #efefef;}
.hl_nav a{display:block;text-decoration:none;}
.hl_nav .shade{position:absolute;width:100%;height:40px;top:60px;left:0;z-index:1;background-color:#eee;opacity:.9;filter:alpha(opacity=90);box-shadow:0 2 10px rgba(0,0,0,.3);display:none;border-bottom:#fff solid 1px;border-bottom:rgba(255,255,255,.3) solid 1px}
.hl_nav .nav_list{position:absolute;top:0;left:50%;margin:0 0 0 -600px;z-index:2;padding:0;list-style:none;width:1200px;overflow:hidden;height:60px}
.hl_nav .nav_list>li{padding:0;float:left;width: 14%; margin:0;text-align:center;height:60px;}
.hl_nav .nav_head{height:60px;line-height:60px;color:#333333;font-size:16px;position:relative;}
.hl_nav .nav_list>li>ul{position:absolute;width:auto;height:40px;top:60px;z-index:2;padding:0;margin:0;line-height:40px;list-style:none;overflow:hidden;display:none}
.hl_nav .nav_list>li.active{}

.hl_nav .nav_head span{ display: block; color: #333333;}
.hl_nav .nav_head::before{ content: ""; width: 0; height: 2px; position: absolute; left:50%; bottom:0; margin-left: -40%; opacity: 0; background: #114196;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.hl_nav .nav_head::after{ content: attr(data-text); width: 100%; height: 100%; border-radius: 20px; position: absolute; left:0; top:20px; opacity: 0; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; text-align: center; color: #003670; font-weight: bold;}
.hl_nav .nav_head:hover::before,.hl_nav .active .nav_head::before{ opacity: 1; width: 80%;}
.hl_nav .nav_head:hover::after,.hl_nav .active .nav_head::after{ opacity: 1; top:0}
.hl_nav .nav_head:hover span,.hl_nav .active .nav_head span{
    opacity: 0;
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
}

.hl_nav .nav_list>li:hover>ul{display:block}
.hl_nav .nav_list>li:nth-child(1)>ul.offset_left{left:5%}
.hl_nav .nav_list>li:nth-child(2)>ul.offset_left{left:16%}
.hl_nav .nav_list>li:nth-child(3)>ul.offset_left{left:30%}
.hl_nav .nav_list>li:nth-child(4)>ul.offset_left{left:44%}
.hl_nav .nav_list>li:nth-child(5)>ul.offset_left{right:32%}
.hl_nav .nav_list>li:nth-child(6)>ul.offset_left{right:17%}
.hl_nav .nav_list>li:nth-child(7)>ul.offset_left{right:3%}
.hl_nav .nav_list>li:nth-child(8)>ul.offset_left{left:80%}
.hl_nav .nav_list>li>ul>li{float:left}
.hl_nav .nav_list>li>ul>li>a{text-decoration:none;display:block;color:#666;padding:0 20px;height:60px;font-size: 15px;}
.hl_nav .nav_list>li>ul>li>a:hover{background-color:#fff;color:#999}
.hl_nav .nav_list:hover{height:100px}
.hl_nav .nav_list:hover+.shade{display:block}