.header.is-active,
    .header.is-default,
    .header:not(.is-active):hover {
      --tw-border-opacity: 1;
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    }

    #searchInput {
      border-radius: 32px;
      text-indent: 48px;
    }

    #searchInput:focus-visible {
      border: solid 1px #0066FF;
    }

    :focus-visible {
      outline: none;
    }

    .popularGuide {
      background: #F7F8FB;
    }

    .popularGuide .popularGuide-container {
      display: flex;
      gap: 24px;
      margin-top: -110px;
      position: relative;
    }

    .popularGuide .popularGuide-container .popularGuide-container-item {
      width: 708px;
      height: 210px;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px 0px rgba(9, 95, 193, 0.16);
      border-radius: 16px 16px 16px 16px;
      border-radius: 16px 16px 16px 16px;
    }

    .popularGuide .box1 {
      background: url(../imgs/help/bg1.png) 50% 50% no-repeat;
      background-size: cover;
      height: 70px;
    }

    .popularGuide .popularGuide-container .popularGuide-container-item .popularGuide-header .title {
      display: flex;
      align-items: center;
      align-content: center;
      height: 70px;
      gap: 8px;
      padding: 24px;
      font-weight: 500;
      font-size: 16px;
      color: #07021B;
    }

    .popularGuide-body {
      padding: 10px 24px;
      display: flex;
      flex-wrap: wrap;
    }

    .popularGuide-body .popularGuide-item {
      flex: 1 1 50%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      cursor: pointer;
    }

    .popularGuide-body .popularGuide-item .dot {
      width: 6px;
      height: 6px;
      background: #ADB9D3;
      border-radius: 50%;
    }

    .popularGuide-body .popularGuide-item .hot {
      width: 24px;
      height: 12px;
      background: linear-gradient(197deg, #FF0B00 0%, #FF9326 100%);
      border: 0px solid #FFFFFF;
      font-size: 10px;
      color: #fff;
      border-radius: 8px 8px 8px 0px;
      text-align: center;
      line-height: 12px;
    }

    .popularGuide-body .popularGuide-item .hot em {
      display: block;
      transform: scale(0.8);
    }

    .ability {
      padding-top: 140px;
      background: #F7F8FB;
    }

    .ability .header-title {
      font-weight: 600;
      font-size: 48px;
      color: #07021B;
      text-align: center;
    }

    .example {
      display: flex;
      gap: 24px;
      margin-top: 50px;
      flex-wrap: wrap;
    }

    .example .item {
      width: 464px;
      height: 260px;
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #DCDFE6;
      padding: 24px;
      width: 464px;
      height: 260px;
    }

    .example .item .title {
      display: flex;
      gap: 8px;
      border-bottom: 1px solid #EBEEF5;
      padding-bottom: 16px;
    }

    .example .item .title img {
      width: 24px;
      height: 24px;
    }

    .item-body {
      margin-top: 24px;
      height: 99px;
    }

    .item-body .body-item {
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .item-body .body-item .dot {
      width: 6px;
      height: 6px;
      background: #ADB9D3;
      border-radius: 50%;
    }

    .item .more {
      font-weight: 400;
      font-size: 16px;
      color: #095FC1;
      margin-top: 30px;
      cursor: pointer;
      display:block;
    }

    .common {
      padding-top: 140px;
      background: #F7F8FB;
    }

    .common .header-title {
      font-weight: 600;
      font-size: 48px;
      color: #07021B;
      text-align: center;
    }

    .common-tabs-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 80px;
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #DCDFE6;
      overflow: hidden;
    }

    .common-tabs-container .tab {
      text-align: center;
      line-height: 64px;
      position: relative;
      flex: 1;
      cursor: pointer;
    }

    .common-tabs-container .active {
      background: linear-gradient(138deg, #004BFF 0%, #095FC1 53.42%, #008EFF 100%);
      font-weight: 500;
      font-size: 20px;
      color: #505764;
      border: none;
      font-weight: 500;
      font-size: 20px;
      color: #FFFFFF;
      display: block;
    }

    .common-tabs-container .tab::before {
      border-right: 1px solid #DCDFE6;
      content: "";
      width: 2px;
      height: 26px;
      position: absolute;
      left: 287px;
      top: 16px;
    }

    .common-tabs-container .active::before {
      border: none;
    }

    .common-tabs-content {
      margin-top: 40px;
      padding-bottom: 140px;
      display: none;
    }

    .common-body {
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #DCDFE6;
      padding: 24px;
    }

    .common-body .common-item .common-item-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 48px;
    }

    .common-body .common-item .common-item-desc {
      font-weight: 400;
      font-size: 14px;
      color: #737C8E;
      margin-top: 16px;
      margin-left:32px;
    }

    .common-body .more {
      width: 126px;
      height: 40px;
      border-radius: 118px 118px 118px 118px;
      border: 1px solid #095FC1;
      margin: 0 auto;
      margin-top: 48px;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #095FC1;
      line-height: 38px;
      cursor: pointer;
      display:block;
    }