body{ font-family:Microsoft YaHei, Helvetica, Arial, sans-serif; font-size:14px; color:#3e3939; line-height:1.5;}
a{ text-decoration:none;}
ul,li{ list-style:none; margin:0; padding:0;}
div,span{ box-sizing:border-box;}

.fade{ opacity:0;}
.fade.in{ opacity:1;}
.collapse{ display:none;}
.collapse.in{ display:block;}
.open>.dropdown-menu{ display:block;}
.open>a{ outline:0;}

.container{ width:100%; max-width:1400px; padding:0 20px;}
.nav-bar{ position:relative; height:70px; background-color:#ffffff; display:flex; align-items:center; justify-content:center;}
.nav-bar-fixed-top{ position:fixed; right:0; left:0; top:0; z-index:1030;}
.nav-bar-header{ float:left; height:70px; display:flex; align-items:center; justify-content:space-between;}
.nav-bar-brand>img{ display:block;}
.nav-bar-toggle{ position:relative; float:right; padding:6px; background:#ffffff; border:2px solid #ffffff;}
.nav-bar-toggle:focus{ outline:0;}
.nav-bar-toggle .icon-bar{ display:block; background-color:#54499E; width:15px; height:2px;}
.nav-bar-toggle .icon-bar+.icon-bar{ margin-top:4px;}
.nav-bar-collapse{ float:right;}
.nav-bar-collapse li{ float:left; padding:0 20px !important;}
.nav-bar-collapse li>a{ font-size:15px; color:#000000; line-height:70px;}
.nav-bar-collapse li>a:hover{ color:#54499E;}
.nav-bar-collapse li.active>a{ color:#54499E;}
.nav-bar-collapse li>a.button{ background:#00C891; color:#ffffff; margin-left:50px; padding:10px 20px; border-radius:30px; cursor:pointer;}
.nav-bar-collapse li>a.button:hover{ box-shadow:inset 0 0 3rem 3rem rgba(0,0,0,0.08);}

.nav-bar-drop{ position:relative;}
.nav-bar-drop .drop-box{ position:absolute; width:420px; top:50px; left:-80px; display:none; z-index:1000;}
.nav-bar-drop .caret{ display:inline-block; margin:-4px 0 0 2px; width:0; height:0; vertical-align:middle; border-top:4px dashed; border-top:4px solid #aaaaaa; border-right:4px solid transparent; border-left:4px solid transparent;}
.nav-bar-drop:hover .drop-box{ display:block;}
.nav-bar-drop .drop-inner{ width:100%; margin-top:20px; padding:10px 30px 30px 30px; background:#ffffff; border-radius:0 0 15px 15px; box-shadow:0 10px 15px rgba(0,0,0,.06); display:flex; align-items:start; justify-content:space-between;}
.nav-bar-drop .drop-content .title{ font-size:15px; color:#54499E; margin-bottom:10px; display:flex; align-items:center;}
.nav-bar-drop .drop-content .title img{ width:22px; margin-right:6px;}
.nav-bar-drop .drop-content .list{ width:100%; display:flex; flex-direction:column;}
.nav-bar-drop .drop-content .list a{ font-size:14px; color:#333333; line-height:32px;}
.nav-bar-drop .drop-content .list a:hover{ color:#54499E;}


@media (max-width:767px){
    .nav-bar-header{ width:100%;}
    .nav-bar-collapse{ position:fixed; width:100%; background:#ffffff; left:0; top:60px; bottom:0;}
    .nav-bar-collapse li{ width:100%; top:0; padding:0;}
    .nav-bar-collapse li>a{ line-height:40px; padding:20px;}
    .nav-bar-drop .drop-box{ position:relative; width:100%; top:0; left:0; box-shadow:none;}
    .nav-bar-drop .drop-inner{ padding:0 30px; margin:0; flex-direction:column; box-shadow:none;}
    .nav-bar-drop .drop-content{ margin:10px 0;}
    .nav-bar-collapse li>a.button{ margin-left:20px;}
}

@media (min-width:768px){
    .nav-bar-header{ float:left;}
    .nav-bar-collapse.collapse{ display:block !important; height:auto!important; overflow:visible !important;}
    .nav-bar-collapse.in{ overflow-y:visible;}
    .nav-bar-toggle{ display:none;}
}