/* 顶部导航 */
.header-wrap {

    width: 100%;
    height: 1rem;
    background: #fff;

    /* overflow: hidden; */
    /* border-bottom: 1px solid rgba(0,0,0,0.4000); */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    transition: all .365s;
}

.headerHide {
    height: 0;
    overflow: hidden;
}

.headerBg {
    background: rgba(0, 0, 0, 0.6);
}

.header-logo-img2 {
    display: none;
}

.headerBg .header-logo-img1 {
    display: none;
}

.headerBg .header-logo-img2 {
    display: block;
}

.headerBg .header-menu-a {
    color: #fff;
}



.header-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.header-logo {
    height: 0.79rem;
}

.header-logo img {
    height: 100%;
    width: auto;
}

.header-nav-box {
    height: 100%;
    display: flex;
    align-items: center;
}

/* 
.header-nav {
    display: flex;
    align-items: center;
}

.header-nav-active {
    font-weight: bold;
}

.header-nav-a {
    margin-right: 0.95rem;
    font-size: 0.18rem;
    font-family: MicrosoftYaHei;
    color: #333;
} */


.header-nav {
    height: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between;
    padding: 0 0.5rem; */
}

.header-menu {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 0.3rem;
    position: relative;
}

.header-menu-a {
    font-size: 0.16rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.header-menu:hover .header-menu-a {
    color: #00C7FF;
}

.header-menu .active,
.header-nav-active {
    color: #00C7FF !important;
    font-weight: bold;
}

.header-first {
    cursor: pointer;
    position: relative;
}

.header-first::after {
    content: '';
    width: 0;
    height: 0.03rem;
    background: #00C7FF;
    border-radius: 0.1rem;
    position: absolute;
    bottom: 0.03rem;
    left: 50%;
    transform: translateX(-50%);
    transition: all .365s;
}

.header-first:hover::after {
    width: 100%;
}

.header-first:hover .header-level-box {
    height: auto;
    /* display: block; */
    opacity: 1;
    top: 1rem;
    transition: all .365s;
}

.header-level-box {
    position: absolute;
    height: 0;
    opacity: 0;
    /* display: none; */
    overflow: hidden;
    top: 0.6rem;
    left: 50%;
    z-index: 99;
    transform: translateX(-50%);
    min-width: 100%;
    box-shadow: 0rem 0.03rem 0.06rem 0.01rem rgba(0, 0, 0, 0.1);
    transition: all .365s;
    border-radius: 0 0 0.05rem 0.05rem;
    background: #fff;
}

.header-level {
    width: 1.92rem;
    padding: 0.1rem 0.25rem;
    /* white-space: nowrap; */
    min-height: 0.5rem;
    transition: all .2s;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: rgba(255, 255, 255, 0.6); */

    font-size: 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 0.19rem;
    color: #707070;
    text-align: center;
}

.header-level:hover {
    /* background: rgba(0, 0, 0, 0.8); */
    color: #00C7FF;
}

.header-level-active {
    position: relative;
    color: #00C7FF;
}









@media all and (max-width: 1024px) {
   .header-nav-box {
       display: none;
   }
   
   .header-box {
       padding: 0 15px;
       height: 50px;
   }
   
   .header-logo img {
       width: 185.5px;
   }
   
   
   .h5-menu-box {
       display: inline-block !important;
   }
   .h5-menu {
       width: 35px;
   }
   .header-wrap {
       z-index: 100000000;
       border-bottom: 1px solid #eee;
   }
   
   .header-nav-box {
    display: none;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
   }
   
  
   
   
   .header-nav {
        padding-top: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
   }
   .header-menu {
         margin: 0;
       position: relative;
       width: 100%;
       min-height: 40px;
       height: auto;
          padding-left: 20px;
          flex-direction: column;
          align-items: flex-start;
   }
   
   
   
  .h5-header-top {
      display: flex;
      justify-content: space-between;
    align-items: center;
      padding: 0 15px;
        width: 100%;
        height: 51px;
  
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;
  }
  
  
   
   .h5-logo {
       width: 185.5px;
   }
   
   .h5-close {
       width: 30px;
   }
   
   
   .header-menu-a {
       width: 100%;
        height: 40px;
        line-height: 40px;
       font-size: 14px;
   }

   
   
   
   /*次级导航*/
   .header-first::after {
       display: none;
   }
   .header-level-box {
       display: none;
        position: relative;
        top: 0;
        left: 28px;
        height: auto;
        opacity: 1;
        box-shadow:none;
        transform: none;
        transition: 0;
        padding: 10px 0;
        padding-top: 0;
   }
   
   .header-first:hover .header-level-box {
        position: relative;
        top: 0;
        left: 28px;
        height: auto;
        opacity: 1;
        transform: none;
   }
   
   .header-level {
       text-align: left;
       border-bottom: none;
       justify-content: flex-start;
       line-height: 30px;
       height: 30px;
       width: 100%;
       padding-left: 0;
       font-size: 14px;
   }
   
   .header-menu:hover .header-menu-a {
       color: #333333;
   }
   
   
   .h5-arrow-right {
       display: block !important;
       position: absolute;
       right: 20px;
       width: 15px;
       height: 15px;
       top: 12.5px;
        transform: rotate(0);
       transition: .3s;
   }
   
   .expand + .header-level-box + .h5-arrow-right { 
       transform: rotate(90deg);
   }
}