#header{background-color: #0053af;}
#nav ul{list-style: none}
#nav{ position: relative;}
#nav::after{background-color: #004199; position: absolute;right: -55px; top: 0; height: 100%; content: ''; display: block; left: 100px; z-index: 0;}
.nav-list{height: 83px; width: 100%;;background-position:left center; background-repeat: no-repeat;background-image: url(../images/nav_bg.png); position: relative; z-index: 10; padding-right: 0; padding-left: 99px;}
.nav-sub-child,.nav-sub{display: none;}
.nav-item{position: relative;}
.nav-a{color: #fff;line-height: 83px;font-size: 18px;}
.nav-sub-a{line-height: 35px;padding: 0 15px;display: block;font-size: 16px;}
.nav-sub-box{position: relative;}
.nav-child-a{display: block; padding: 10px 10px; border-bottom: 1px solid #ededed;font-size:.18rem}
.nav-child-a:last-child{border-bottom: none;}
.header-right{flex: 1; margin-left: 120px;}
.header-top{font-size: 16px; padding: 25px 0;}
.header-top .a{color: #7c98cc; background-position:left center; background-repeat: no-repeat; padding-left:30px; margin-left: 19px;}
.header-top .icon1{background-image: url(../images/top-icon1.png);}
.header-top .icon2{background-image: url(../images/top-icon2.png);}
#topForm{border-radius: 40px; width: 305px; height: 40px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; background-color: #004199; margin-left: 50px;}
#topForm .text{ color: #fff; display: block; width: 100%; height: 100%; flex: 1; background-color: transparent; padding: 0 15px;}
#topForm .text::placeholder{color: #7c98cc;}
#topForm .submit-btn{margin: 0 0.2rem;/* width: 50px; *//* height: 40px; *//* background-position: center; *//* background-repeat: no-repeat; *//* background-image: url(../images/top-icon3.png); */}
.logo{display: block;}
#goback{position: fixed; right: 80px; z-index: 980; bottom: 30px; text-align: center; font-size: 14px; cursor: pointer;}
#goback .icon{width: 50px; height: 50px; background-color: #f5b01d; border-radius: 4px; background-position: center; background-repeat:no-repeat; background-size: 80%; background-image: url(../images/goback.png); display: block; margin: 0 auto 4px;}
#header .box{max-width: 1920px;}
.nav-a{display: block; width: 100%; text-align: center;}

.search-btn{width: 50px; height: 40px; background-position: center; background-repeat: no-repeat; background-image: url(../images/top-icon3.png); cursor: pointer;}
.search-btn.on{background-image: url(../images/close.png); background-size: 20px; }
@media (min-width: 1921px){
  #header .box{margin-left: auto !important; margin-right: auto !important; width: 1800px;}
  #nav::after{right: calc( (1800px - 100vw) / 2 );}
}
@media (min-width: 1270px){
  .nav-sub{opacity: 0; transform: translate(-50%, 20px); position: absolute; left: 50%;  top: 100%; opacity: 0; background-color: #fff; white-space: nowrap; min-width: 200px; text-align: center; border-top: 4px solid #00d8ff; border-radius: 0 0 6px 6px; padding: 10px 0;}
  .nav-sub-child{position: absolute; left: 100%; top: 0;  opacity: 0; background-color: #fff; min-width: 160px; border-radius: 0 6px 6px 6px;}
  .nav-sub-box:hover .nav-sub-a{color: #004199; font-weight:bold; }
  .nav-item:hover .nav-sub{display: block; animation: navSub 0.3s ease-out forwards;}
  .nav-sub-box:hover .nav-sub-child{animation: navSub1 0.3s ease-out forwards; display: block;}
  .nav-child-a:hover{color: #004199;font-weight:bold;}
  
  .nav-item::after{content: ''; display: block; width: 260px; height: 100%; position: absolute; bottom: 0; z-index: 0; left: 50%; transform: translateX(-50%); background-position: center; background-repeat: no-repeat; background-image: url(../images/nav-bg.png); z-index: 0; background-size: auto 100%; opacity: 0;}
  .nav-item .nav-a{position: relative; z-index: 5;}
  .nav-item:hover::after{opacity: 1;}
  .nav-item:first-child::after{background-image: url(../images/nav-bg2.png);}
  .nav-item:hover .nav-a{font-weight: bold;}
  .search-btn{display: none;}
}
@media (max-width: 1600px){
  #header .box{max-width: 1920px;}
  .logo{max-width: 35%;}
  .header-top{font-size: 14px; }
  .header-top .a{background-size: 24px;}
  #goback{right: 60px;}
  
  
  #header{position: relative; padding-bottom: 60px;}
  .nav-list{height: 60px; padding: 0 55px;}
  #nav{background-color: #004199; position: absolute; bottom: 0; left: 0; right: 0;}
  .nav-a{line-height: 60px;}
  #nav::after{display: none;}
  .nav-list{background-image: none;}
  .header-top{padding: 14px 0;}
  .logo img{max-height: 45px;}
}
@media (max-width: 1490px){
  
}
@media (max-width: 1269px){
  .header-top.on{display: flex; width: 100%; background-color: rgba(0,0,0,0.8);}
  .wap-menu{display: flex; align-items: center; justify-content: flex-end;}
  body{padding-top: 70px;}
  .header-top{display: none;justify-content: space-between; padding:26px 4%; flex-wrap: wrap;}
  .header-right{display: none1; margin: 0; position: absolute; top: 100%; left: 0; width: 100%;}
  #header{position: fixed; width: 100%; left: 0; top: 0; z-index: 999; padding-bottom: 0px;}
  #header  *{text-align: left;}
  #header .box{margin-left: auto !important; margin-right: auto !important; max-width: 92%; height: 70px;}
  .logo{ max-width: calc(100% - 100px);}
  .logo img{display: block;max-height: 45px;}
  .menu i{background-color: #fff;}
  .menu{display: flex; width: 50px; align-items: center; justify-content: center; margin-right: -10px;}
  .header-right.on #nav{display: block; position: fixed;width: 100%; left: 0; top: 70px; background-color: #0053af; height: calc(100vh - 70px); overflow-y: auto;}
  .nav-list{display: block; background-image: none; margin-left: 0; padding:10px 0 0; height: auto;}
  #nav::after{display: none;}
  #nav{display: none;}
  .header-top{}
  .header-top .a{margin: 0 10px 0 0;}
  #topForm{flex: 1; background-color: rgba(255,255,255,0.3); margin-top: 20px;}
  #topForm .text::placeholder{color: #ccc;}
  .nav-a{display: block; line-height: 48px; font-size: 18px;}
  
  .has-sub,.has-child-sub{display: flex; align-items: center; justify-content: space-between}
  .has-sub::after,.has-child-sub::after{content: ''; display: block; border: 6px solid transparent; border-left-color: #fff; border-left-width: 8px;}
  .nav-sub,.nav-sub-child{position: static; margin-left: 0;}
  
 
  
  .nav-a.active::after,.has-child-sub.active::after{transform: rotate(90deg);}
  .nav-sub.active{display: block; opacity: 1; transform: translateY(0);}
  #nav a{color: #fff;}
  .nav-sub-child.active{display: block; opacity: 0.85;}
  .nav-child-a{padding: 11px 0; border-bottom:none; padding-left: 40px;}
  
  
  .nav-item,.nav-child-a{border-top: 1px solid #537cab;}
  .nav-item:last-child{border-bottom: 1px solid #537cab;}
  .nav-sub-a{padding:10px 0; opacity: 0.95; font-size: 16px; border-top: 1px solid #537cab; }
  .nav-sub-box:last-child .nav-sub-a{border-bottom: none;}
  #goback{right: 20px;}
  
  
  .nav-a{padding-left: 20px; padding-right: 20px;}
  .nav-sub-a{padding-left: 40px; padding-right: 20px;}
  .nav-child-a{padding-left: 60px; padding-right: 20px;}
}
@media (max-width: 800px){
  #nav{height: calc(100% - 10px); overflow-y: auto;}
  .header-top{flex-wrap: wrap;width: 100%; justify-content: flex-start;}
  #topForm{width: 100%; flex: none; margin-left: 0;}
  
}



@keyframes navSub {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 1;
    transform:translate(-50%, 0px);
  }
}
@keyframes navSub1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform:translateY(0px);
  }
}