.help-manual-wrapper {
  width: 100%;
  position: relative;
  background-image: url('../img/help_manual_bg.webp');
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.help-manual {
  width: 1200px;
  margin: 0px auto;
  padding-top: 125px;
  padding-bottom: 115px;
}
  .help-manual>.title {
    font-size: 48px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #121933;
    line-height: 56px;
    text-align: center;
  }
    .help-manual .title .strong {
      color: #107fff;
    }
  .help-manual .search-box-wrapper {
    width: 100%;
    position: relative;
    text-align: center;
    margin-top: 48px;
  }
    .help-manual .search-box-wrapper .search-box {
      width: 563px;
      height: 60px;
      background: #FFFFFF;
      box-shadow: 0px 2px 12px 0px rgba(18, 25, 51, 0.1);
      border-radius: 40px;
      display: inline-block;
      border: none;
      outline: none;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #304265;
      line-height: 24px;
      padding: 18px 115px 18px 60px;
      caret-color: #107fff;
    }
    .help-manual .search-box-wrapper .icon {
      font-size: 20px;
      line-height: 20px;
      position: absolute;
      left: 343px;
      top: 20px;
      cursor: pointer;
      color: #6E7A93;
    }
    .help-manual .search-box-wrapper .actions {
      position: absolute;
      right: 343px;
      top: 18px;
      display: flex;
      width: 84px;
      align-items: center;
    }
      .help-manual .search-box-wrapper .actions .icon {
        position: static;
        cursor: pointer;
      }
      .help-manual .search-box-wrapper .actions .divider {
        width: 1px;
        height: 20px;
        background-color: #efefef;
        margin: 0px 16px;
      }
      .help-manual .search-box-wrapper .actions .text {
        height: 24px;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #107FFF;
        line-height: 24px;
        cursor: pointer;
      }
    .help-manual .search-box-wrapper .search-history {
      position: absolute;
      top: 62px;
      left: calc(318px + 24px);
      width: 515px;
      height: max-content;
      background: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 12px 12px;
      box-shadow: 0px 0px 8px 0px #E0E5F0;
      z-index: 52;
    }
    .search-history-enter, .search-history-leave-to {
      opacity: 0;
      height: 0;
    }
    .search-history-enter-active, .search-history-leave-active {
      transition: all .5s;
      overflow: hidden;
    }
      .help-manual .search-box-wrapper .search-history-title {
        padding: 8px 36px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8893A7;
        line-height: 18px;
        height: 34px;
        text-align: left;
      }
      .help-manual .search-box-wrapper .search-history-item {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #304265;
        line-height: 18px;
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 36px;
        cursor: pointer;
      }
      .help-manual .search-box-wrapper .search-history-item>.text {
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .help-manual .search-box-wrapper .search-history-item:hover {
        background-color: #F4F8FC;
      }
  .help-manual .content {
    margin-top: 64px;
  }
  .help-manual .hot-search {
    height: 150px;
    background: rgba(255, 255, 255, 0.48);
    border-radius: 4px;
    text-align: left;
    padding: 24px;
    vertical-align: middle;
  }
    .help-manual .hot-search .title {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #304265;
      line-height: 26px;
      display: inline-block;
      margin-right: 17px;
      vertical-align: middle;
    }
    .help-manual .hot-search .action {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #107FFF;
      line-height: 18px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      cursor: pointer;
    }
      .help-manual .hot-search .action .icon {
        margin-right: 6px;
        font-size: 12px;
        line-height: 12px;
      }
  .help-manual .items {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px 29px;
  }
    .help-manual .items .item {
      width: 266px;
      display: flex;
      align-items: center;
    }
      .help-manual .items .item .icon {
        width: 10px;
        height: 10px;
        border: 2px solid #107fff;
        border-radius: 5px;
        display: inline-block;
        margin-right: 8px;
      }
      .help-manual .items .item .text {
        max-width: 248px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #304265;
        line-height: 22px;
        cursor: pointer;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
      }
      .help-manual .items .item .text:hover{
        color: #107fff;
        border-bottom: 1px solid #107fff;
      }
  .help-manual .document-navigation {
    margin-top: 68px;
  }
    .help-manual .document-navigation .title {
      text-align: left;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #304265;
      line-height: 26px;
      margin-bottom: 20px;
    }
    .help-manual .document-navigation-content {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 36px;
    }
      .help-manual .document-navigation-card {
        width: 376px;
        height: 237px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px #E0E5F0;
        border-radius: 4px;
        padding: 24px;
        cursor: default;
        transition: transform .5s;
      }
      .help-manual .document-navigation-card:hover {
        transform: translate(0px, -8px);
        box-shadow: 0px 2px 12px 0px rgba(18, 25, 51, 0.1);
      }
        .help-manual .document-navigation-card .title {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #121933;
          line-height: 26px;
          margin-bottom: 12px;
          max-width: 320px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
          .help-manual .document-navigation-card .title .icon {
            width: 18px;
            height: 18px;
            vertical-align: middle;
          }
        .help-manual .document-navigation-card .subnavs {
          height: 100px;
          margin-bottom: 12px;
        }
          .help-manual .document-navigation-card .subnavs>a {
            display: block;
            width: max-content;
            margin-bottom: 4px;
          }
          .help-manual .document-navigation-card .subnavs>a:last-child {
            margin: 0px;
          }
          .help-manual .document-navigation-card .subnavs .subnav-item {
            height: 24px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #304265;
            line-height: 22px;
            cursor: pointer;
            width: max-content;
            max-width: 328px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 4px;
          }
          .help-manual .document-navigation-card .subnavs .subnav-item:last-child {
            margin: 0px;
          }
            .help-manual .document-navigation-card .subnavs .subnav-item:hover .icon {
              color:#107fff;
            }
            .help-manual .document-navigation-card .subnavs .subnav-item:hover .text {
              border-top: 1px solid transparent;
              border-bottom: 1px solid #107fff;
              color: #107FFF;
            }
        .help-manual .document-navigation-card .divider {
          width: 328px;
          height: 1px;
          background: #efefef;
          margin-bottom: 20px;
        }
        .help-manual .document-navigation-card .see-more {
          display: inline-flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #107FFF;
          line-height: 22px;
          cursor: pointer;
        }
          .help-manual .document-navigation-card .see-more .icon {
            margin-left: 8px;
          }
  .help-manual .manual-support {
    margin-top: 68px;
  }
    .help-manual .manual-support .title {
      height: 26px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #304265;
      line-height: 26px;
      margin-bottom: 20px;
    }
    .help-manual .manual-support .manual-support-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
      .help-manual .manual-support .manual-support-item {
        width: 376px;
        height: 104px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #EFEFEF;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 4px;
        cursor: pointer;
      }
        .help-manual .manual-support .manual-support-item .img {
          width: 96px;
          height: 96px;
          margin-right: 2px;
        }
        .help-manual .manual-support .manual-support-item .title {
          height: 26px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #121933;
          line-height: 26px;
          margin-bottom: 8px;
        }
        .help-manual .manual-support .manual-support-item .description {
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #304265;
          line-height: 22px;
        }


  .help-manual .search-content {
    margin-top: 12px;
  }
    .help-manual .search-content span[style="color:#cc0000"] {
      color: #107fff !important;
    }
    .help-manual .search-content .tips {
      height: 18px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8893A7;
      line-height: 18px;
      text-align: center;
      margin-bottom: 38px;
    }
      .help-manual .search-content .tips .link {
        color: #304265;
        cursor: pointer;
      }
  .help-manual .search-result {
    width: 1200px;
    height: max-content;
    min-height: 350px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(18, 25, 51, 0.1);
    border-radius: 4px;
    position: relative;
    padding: 34px 28px 30px;
  }
    .help-manual .search-result .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
      @keyframes loading-animation{
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg)
        }
      }
      .help-manual .search-result .loading .icon {
        display: inline-block;
        animation-name: loading-animation;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        margin-bottom: 10px;
        color: #107fff;
      }
      .help-manual .search-result .loading .text {
        height: 24px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #107fff;
        line-height: 24px;
      }
    .help-manual .search-result .no-result-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
      .help-manual .search-result .no-result-wrapper>img {
        width: 170px;
        height: 214px;
        margin-bottom: 28px;
      }
      .help-manual .search-result .no-result-wrapper>p {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ABAFC2;
        line-height: 28px;
        margin-bottom: 5px;
      }
    .help-manual .search-result .search-result-wrapper {
      display: flex;
      justify-content: space-between;
    }
      .help-manual .search-result .search-result-menu {
        width: 180px;
      }
        .help-manual .search-result .search-result-menu-item {
          width: 100%;
          padding: 6px 12px;
          height: 36px;
          background-color: #FFFFFF;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #304265;
          line-height: 24px;
          cursor: pointer;
        }
        .help-manual .search-result .search-result-menu-item.selected, .help-manual .search-result .search-result-menu-item:hover {
          background-color: #F4F8FC;
          color: #107FFF;
        }
      .help-manual .search-result .search-result-container {
        width: 932px;
        position: relative;
      }
      .help-manual .search-result .search-result-content {
        width: 100%;
        height: max-content;
        border-bottom: 60px solid transparent;
      }
        .help-manual .search-result .search-result-content-item {
          margin-top: 48px;
        }
        .help-manual .search-result .search-result-content-item:first-child {
          margin-top: 0px;
        }
          .help-manual .search-result .search-result-content-item-title {
            height: 26px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #304265;
            line-height: 26px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 8px;
          }
          .help-manual .search-result .search-result-content-item-title>a:hover {
            color: #107fff;
          }
          .help-manual .search-result .search-result-content-item-content {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;
          }
            .help-manual .search-result .search-result-content-item-content img{
              width: 110px;
              height: 44px;
              border-radius: 2px;
              border: 1px solid #EFEFEF;
              margin-right: 16px;
              flex-shrink: 0;
            }
            .help-manual .search-result .search-result-content-item-content p {
              height: 44px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #304265;
              line-height: 22px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          .help-manual .search-result .search-result-content-item-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
          }
            .help-manual .search-result .search-result-content-item-info span[style="color:#cc0000"] {
              color: #778299 !important;
            }
            .help-manual .search-result .search-result-content-item-breadcrum {
              max-width: 60%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
              .help-manual .search-result .search-result-content-item-breadcrum a {
                height: 19px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #778299;
                line-height: 19px;
              }
              .help-manual .search-result .search-result-content-item-breadcrum a:last-child {
                color: #304265;
              }
              .help-manual .search-result .search-result-content-item-breadcrum a:not(:last-child)::after {
                content: '>';
              }
              .help-manual .search-result .search-result-content-item-breadcrum a:not(:last-child):hover span {
                color: #107fff !important;
              }
            .help-manual .search-result .search-result-content-item-info-detail {
              height: 19px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #778299;
              line-height: 19px;
            }
              .help-manual .search-result .search-result-content-item-info-detail>span:first-child {
                margin-right: 24px;
              }
        .help-manual .search-result .search-result-content-pagination {
          position: absolute;
          right: 5px;
          bottom: 5px;
        }
              




@media screen and (max-width: 1200px) {
  .help-manual-wrapper {
    background-image: url('../img/help_manual_bg_mobile.webp');
  }
  .help-manual {
    width: 100%;
    padding-top: 24px;
    padding-bottom: 49px;
    min-height: calc(100vh - 58px);
  }
    .help-manual>.title {
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #304265;
      line-height: 32px;
    }
    .help-manual .search-box-wrapper {
      margin-top: 24px;
    }
      .help-manual .search-box-wrapper .search-box {
        width: 90%;
        height: 34px;
        padding: 0;
        border-radius: 17px;
        padding: 0px 96px 0px 40px;
      }
        .help-manual .search-box-wrapper .icon {
          left: calc(5% + 17px);
          top: 9px;
          font-size: 16px;
          line-height: 16px;
        }
        .help-manual .search-box-wrapper .actions {
          right: calc(5% + 17px);
          top: 9px;
          width: 70px;
          justify-content: flex-end;
        }
          .help-manual .search-box-wrapper .actions .divider {
            height: 16px;
            margin: 0px 8px;
          }
          .help-manual .search-box-wrapper .actions .text {
            font-size: 16px;
            line-height: 16px;
            height: 16px;
          }
        .help-manual .search-box-wrapper .search-history {
          width: calc(90% - 34px);
          left: calc(5% + 17px);
          top: 35px;
        }
          .help-manual .search-box-wrapper .search-history-item {
            padding: 0 20px;
          }
          .help-manual .search-box-wrapper .search-history-title {
            padding: 8px 20px;
          }
          .help-manual .search-box-wrapper .search-history-item>.text {
            max-width: calc(100% - 40px);
          }
    .help-manual .content {
      margin-top: 24px;
    }
    .help-manual .hot-search {
      margin: 0 auto;
      width: 92%;
      padding: 12px;
      height: max-content;
      position: relative;
    }
      .help-manual .hot-search .action {
        position: absolute;
        right: 12px;
        top: 12px;
      }
      .help-manual .hot-search .items {
        margin-top: 12px;
        grid-template-columns: 100%;
        gap: 12px;
      }
        .help-manual .hot-search .items .item {
          width: 100%;
        }
          .help-manual .hot-search .items .item .text{
            max-width: calc(100% - 30px);
          }
    .help-manual .document-navigation {
      width: 92%;
      margin: 28px auto 0 auto;
    }
      .help-manual .document-navigation>.title{
        margin-bottom: 14px;
      }
      .help-manual .document-navigation .document-navigation-content {
        grid-template-columns: 100%;
      }
      .help-manual .document-navigation .document-navigation-card {
        width: 100%;
        padding: 12px;
        height: 180px;
        position: relative;
      }
      .help-manual .document-navigation .document-navigation-card .divider {
        width: 100%;
        display: none;
      }
      .help-manual .document-navigation .document-navigation-card .see-more {
        position: absolute;
        top: 12px;
        right: 12px;
      }
        .help-manual .document-navigation .document-navigation-card .see-more .icon {
          display: none;
        }
        .help-manual .document-navigation .document-navigation-card .subnavs .subnav-item {
          max-width: 100%;
        }
        .help-manual .document-navigation .document-navigation-card .subnavs a {
          display: block;
          width: 100%;
        }
    .help-manual .manual-support {
      margin-top: 28px;
    }
      .help-manual .manual-support>.title {
        margin-bottom: 16px;
        margin-left: 4%;
      }
      .help-manual .manual-support>.manual-support-wrapper {
        flex-wrap: wrap;
      }
      .help-manual .manual-support .manual-support-item {
        width: 92%;
        margin-bottom: 16px;
        margin-left: 4%;
      }
    .help-manual .search-content {
      width: 100%;
      padding: 0 16px;
    }
      .help-manual .search-content .tips {
        margin-bottom: 24px;
      }
      .help-manual .search-result {
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
      }
        .help-manual .search-result .search-result-wrapper {
          display: block;
        }
        .help-manual .search-result .search-result-menu {
          width: 100%;
          margin-bottom: 14px;
        }
          .help-manual .search-result .search-result-menu-item {
            display: none;
          }
          .help-manual .search-result .search-result-menu-item:first-child {
            display: block;
            background-color: transparent;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #304265;
            line-height: 25px;
            padding: 0;
          }
          .help-manual .search-result .search-result-menu-item.selected, .help-manual .search-result .search-result-menu-item:hover {
            background-color: transparent;
            color: #304265;
          }
        .help-manual .search-result .search-result-container {
          width: 100%;
        }
          .help-manual .search-result .search-result-content {
            padding: 0px 5px 5px;
          }
          .help-manual .search-result .search-result-content-item {
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px #E0E5F0;
            border-radius: 4px;
            padding: 12px;
            margin-top: 16px;
          }
          .help-manual .search-result .search-result-content-item-info {
            display: block;
          }
          .help-manual .search-result .search-result-content-item-breadcrum {
            max-width: 100%;
            overflow: auto;
            text-overflow: unset;
            padding-bottom: 4px;
          }
          .help-manual .search-result .search-result-content-item-info-detail {
            display: flex;
            justify-content: space-between;
          }
}