@import url(../Base.css);
.header-component {
  height: 76px;
  background-color: #F7F8FA; }
  .header-component > nav {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 1200px;
    height: 100%;
    margin: 0 auto; }
    .header-component > nav .nav-logo > img {
      width: 156px;
      height: 28px; }
    .header-component > nav .nav-bar {
      width: 820px;
      height: 100%;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      font-size: 16px; }
      .header-component > nav .nav-bar .active {
        color: #207cff; }
        .header-component > nav .nav-bar .active .icon {
          border-top: 5px solid #207cff; }
      .header-component > nav .nav-bar > li {
        position: relative;
        height: 100%; }
        .header-component > nav .nav-bar > li > a {
          display: block;
          height: 100%;
          position: relative;
          line-height: 76px; }
          .header-component > nav .nav-bar > li > a .icon {
            position: absolute;
            top: 36px;
            right: -16px;
            width: 0;
            height: 0;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-top: 5px solid #1A1A1A;
            border-bottom: 5px solid transparent; }
        .header-component > nav .nav-bar > li:hover > a {
          color: #207cff; }
        .header-component > nav .nav-bar > li:hover .icon {
          border-top: 5px solid #207cff; }
        .header-component > nav .nav-bar > li:hover .sub-nav {
          display: flex; }
        .header-component > nav .nav-bar > li .sub-nav {
          width: 148px;
          background: white;
          box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.11);
          border: 1px solid #E5E5E5;
          position: absolute;
          top: 60px;
          left: -26px;
          z-index: 9;
          padding: 34px 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-flex;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          display: none; }
          .header-component > nav .nav-bar > li .sub-nav > i {
            position: absolute;
            top: -14px;
            left: 50%;
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-top: 1px solid #E5E5E5;
            border-left: 1px solid #E5E5E5;
            transform: rotate(45deg) translateY(50%); }
          .header-component > nav .nav-bar > li .sub-nav > a {
            font-size: 16px;
            color: #666666;
            display: block; }
            .header-component > nav .nav-bar > li .sub-nav > a:hover {
              color: #1A1A1A; }
            .header-component > nav .nav-bar > li .sub-nav > a:not(:last-child) {
              margin-bottom: 38px; }
        .header-component > nav .nav-bar > li .search-wrap {
          width: 192px;
          height: 34px;
          margin-top: 25px;
          display: -webkit-flex;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          flex-wrap: nowrap;
          position: relative;
          font-family: "Helvetica Neue", Helvetica, "PingFang SC", tahoma, 'hiragino sans GB', arial, "Microsoft YaHei", sans-serif; }
          .header-component > nav .nav-bar > li .search-wrap input {
            font-size: 14px;
            padding-bottom: 8px;
            background: none;
            border: none;
            width: 100%;
            color: #666666;
            border-bottom: 1px solid #D8D8D8;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", tahoma, 'hiragino sans GB', arial, "Microsoft YaHei", sans-serif; }
            .header-component > nav .nav-bar > li .search-wrap input:focus {
              caret-color: #207CFF;
              border-bottom: 2px solid #207CFF; }
            .header-component > nav .nav-bar > li .search-wrap input::placeholder {
              font-weight: normal;
              color: #ccc; }
            .header-component > nav .nav-bar > li .search-wrap input:focus + button {
              color: #207CFF;
              bottom: 10px; }
          .header-component > nav .nav-bar > li .search-wrap .search-icon {
            background: none;
            border: none;
            outline: none;
            color: #1A1A1A;
            position: absolute;
            right: 0;
            bottom: 10px;
            font-weight: 500; }
