#nav{ position:absolute; right:0; top:0;}
#nav ul{ float:left;}
#nav ul li{ float:left; position:relative; z-index:0;}
@media only screen and (min-width: 1400px){
#nav ul li a{ display:block; padding:0 1.2rem; text-transform:capitalize;}
}

@media screen and (max-width: 1410px){
#nav ul li a{ display:block; padding:0 0.7rem; text-transform:uppercase;}
}



#nav ul li h3{ font-size:15px; color:#fff; line-height:5.625rem; overflow:hidden; position:relative; transition:.6s;}

#nav ul li a i{ display:inline-block;  width:9px; height:6px; background-size:contain; vertical-align:middle; margin-left:8px;}
#nav ul li .sub{position:absolute;top:100%;background:#fff;background:rgba(255,255,255,.95);width: 220px;left:50%;margin-left: -80px;z-index: 10000;/* transform:translateY(-20px); */visibility:hidden;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;transition:.5s;box-shadow: 0 3px 5px rgba(0,0,0,0.15);}
#nav ul li:nth-child(3) .sub{width: 240px;margin-left: -120px;}
#nav ul li .sub .box{padding: 20px 20px;text-align:center;}
#nav ul li .sub a{padding:0;line-height:2;transition:.3s;font-size: .9rem;color: #666;}
#nav ul li .sub a:hover{color: #0869ac;}
#nav ul li:hover .sub{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; visibility:visible; transform:translateY(0px);}
#nav>ul>li.on h3,#nav ul li:hover h3{ }
#nav>ul>li h3:after{ content:""; display:block; width:100%; height:3px; position:absolute; left:0; background:#0080cc; bottom:0px; transition:.3s; transform:scale(0);}
#nav>ul>li:hover h3:after,#nav ul li.on h3:after{  transform:scale(1);}

/*导航按钮开始*/
#nav_btn_box{ height:100%; z-index:999999999; float:right; margin-left:20px; }
#nav_btn_box.on{ background:none;  }
#nav_btn{}
#nav_btn .point.on .navbtn::after, #nav_btn .point.on .navbtn::before{ background:#fff;}

#nav_btn{cursor: pointer;text-align: center;z-index:99999;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;outline:none;box-shadow:none;}
#nav_btn .point{display: inline-block;width: 1.875rem;height: 22px; position: relative; outline:none;}
#nav_btn .point:hover .navbtn,
#nav_btn .point:hover .navbtn::after,
#nav_btn .point:hover .navbtn::before{width: 1.75rem;}
#nav_btn .navbtn{position: absolute;top: 12px;left: 0;display: inline-block;width: 21px;height: 1px;-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;background: #333;}
#nav_btn .navbtn::after,
#nav_btn .navbtn::before{position: absolute; left: 0;display: inline-block;width: 1.75rem;height: 1px;content: '';-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;background: #333;}
#nav_btn .navbtn::after{top: -8px;}
#nav_btn .navbtn::before{top: 8px;}
#nav_btn .point.on .navbtn{background: transparent;}
#nav_btn .point.on .navbtn::after{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);top: 0px;}
#nav_btn .point.on .navbtn::before{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 0px;}