:root,
    :host {
      --fa-font-solid: normal 900 1em/1 "Font Awesome 7 Free";
      --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Free";
      --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
      --fa-font-thin: normal 100 1em/1 "Font Awesome 7 Pro";
      --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
      --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 7 Duotone";
      --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone";
      --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone";
      --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
      --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 7 Sharp";
      --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 7 Sharp";
      --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp";
      --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 7 Sharp";
      --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 7 Sharp Duotone";
      --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone";
      --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone";
      --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone";
      --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab";
      --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press";
      --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard";
      --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint";
      --fa-font-notdog-solid: normal 900 1em/1 "Font Awesome 7 Notdog";
      --fa-font-notdog-duo-solid: normal 900 1em/1 "Font Awesome 7 Notdog Duo";
      --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch";
      --fa-font-jelly-regular: normal 400 1em/1 "Font Awesome 7 Jelly";
      --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill";
      --fa-font-jelly-duo-regular: normal 400 1em/1 "Font Awesome 7 Jelly Duo";
      --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel";
    }

    .svg-inline--fa {
      box-sizing: content-box;
      display: var(--fa-display, inline-block);
      height: 1em;
      overflow: visible;
      vertical-align: -0.125em;
      width: var(--fa-width, 1.25em);
    }

    .svg-inline--fa.fa-2xs {
      vertical-align: 0.1em;
    }

    .svg-inline--fa.fa-xs {
      vertical-align: 0em;
    }

    .svg-inline--fa.fa-sm {
      vertical-align: -0.0714285714em;
    }

    .svg-inline--fa.fa-lg {
      vertical-align: -0.2em;
    }

    .svg-inline--fa.fa-xl {
      vertical-align: -0.25em;
    }

    .svg-inline--fa.fa-2xl {
      vertical-align: -0.3125em;
    }

    .svg-inline--fa.fa-pull-left,
    .svg-inline--fa .fa-pull-start {
      float: inline-start;
      margin-inline-end: var(--fa-pull-margin, 0.3em);
    }

    .svg-inline--fa.fa-pull-right,
    .svg-inline--fa .fa-pull-end {
      float: inline-end;
      margin-inline-start: var(--fa-pull-margin, 0.3em);
    }

    .svg-inline--fa.fa-li {
      width: var(--fa-li-width, 2em);
      inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
      inset-block-start: 0.25em;
      /* syncing vertical alignment with Web Font rendering */
    }

    .fa-layers-counter,
    .fa-layers-text {
      display: inline-block;
      position: absolute;
      text-align: center;
    }

    .fa-layers {
      display: inline-block;
      height: 1em;
      position: relative;
      text-align: center;
      vertical-align: -0.125em;
      width: var(--fa-width, 1.25em);
    }

    .fa-layers .svg-inline--fa {
      inset: 0;
      margin: auto;
      position: absolute;
      transform-origin: center center;
    }

    .fa-layers-text {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }

    .fa-layers-counter {
      background-color: var(--fa-counter-background-color, #ff253a);
      border-radius: var(--fa-counter-border-radius, 1em);
      box-sizing: border-box;
      color: var(--fa-inverse, #fff);
      line-height: var(--fa-counter-line-height, 1);
      max-width: var(--fa-counter-max-width, 5em);
      min-width: var(--fa-counter-min-width, 1.5em);
      overflow: hidden;
      padding: var(--fa-counter-padding, 0.25em 0.5em);
      right: var(--fa-right, 0);
      text-overflow: ellipsis;
      top: var(--fa-top, 0);
      transform: scale(var(--fa-counter-scale, 0.25));
      transform-origin: top right;
    }

    .fa-layers-bottom-right {
      bottom: var(--fa-bottom, 0);
      right: var(--fa-right, 0);
      top: auto;
      transform: scale(var(--fa-layers-scale, 0.25));
      transform-origin: bottom right;
    }

    .fa-layers-bottom-left {
      bottom: var(--fa-bottom, 0);
      left: var(--fa-left, 0);
      right: auto;
      top: auto;
      transform: scale(var(--fa-layers-scale, 0.25));
      transform-origin: bottom left;
    }

    .fa-layers-top-right {
      top: var(--fa-top, 0);
      right: var(--fa-right, 0);
      transform: scale(var(--fa-layers-scale, 0.25));
      transform-origin: top right;
    }

    .fa-layers-top-left {
      left: var(--fa-left, 0);
      right: auto;
      top: var(--fa-top, 0);
      transform: scale(var(--fa-layers-scale, 0.25));
      transform-origin: top left;
    }

    .fa-1x {
      font-size: 1em;
    }

    .fa-2x {
      font-size: 2em;
    }

    .fa-3x {
      font-size: 3em;
    }

    .fa-4x {
      font-size: 4em;
    }

    .fa-5x {
      font-size: 5em;
    }

    .fa-6x {
      font-size: 6em;
    }

    .fa-7x {
      font-size: 7em;
    }

    .fa-8x {
      font-size: 8em;
    }

    .fa-9x {
      font-size: 9em;
    }

    .fa-10x {
      font-size: 10em;
    }

    .fa-2xs {
      font-size: calc(10 / 16 * 1em);
      /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 10 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 10 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-xs {
      font-size: calc(12 / 16 * 1em);
      /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 12 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 12 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-sm {
      font-size: calc(14 / 16 * 1em);
      /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 14 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 14 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-lg {
      font-size: calc(20 / 16 * 1em);
      /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 20 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 20 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-xl {
      font-size: calc(24 / 16 * 1em);
      /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 24 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 24 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-2xl {
      font-size: calc(32 / 16 * 1em);
      /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
      line-height: calc(1 / 32 * 1em);
      /* sets the line-height of the icon back to that of it's parent */
      vertical-align: calc((6 / 32 - 0.375) * 1em);
      /* vertically centers the icon taking into account the surrounding text's descender */
    }

    .fa-width-auto {
      --fa-width: auto;
    }

    .fa-fw,
    .fa-width-fixed {
      --fa-width: 1.25em;
    }

    .fa-ul {
      list-style-type: none;
      margin-inline-start: var(--fa-li-margin, 2.5em);
      padding-inline-start: 0;
    }

    .fa-ul>li {
      position: relative;
    }

    .fa-li {
      inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
      position: absolute;
      text-align: center;
      width: var(--fa-li-width, 2em);
      line-height: inherit;
    }

    /* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
    /* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
    .fa-border {
      border-color: var(--fa-border-color, #eee);
      border-radius: var(--fa-border-radius, 0.1em);
      border-style: var(--fa-border-style, solid);
      border-width: var(--fa-border-width, 0.0625em);
      box-sizing: var(--fa-border-box-sizing, content-box);
      padding: var(--fa-border-padding, 0.1875em 0.25em);
    }

    .fa-pull-left,
    .fa-pull-start {
      float: inline-start;
      margin-inline-end: var(--fa-pull-margin, 0.3em);
    }

    .fa-pull-right,
    .fa-pull-end {
      float: inline-end;
      margin-inline-start: var(--fa-pull-margin, 0.3em);
    }

    .fa-beat {
      animation-name: fa-beat;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, ease-in-out);
    }

    .fa-bounce {
      animation-name: fa-bounce;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
    }

    .fa-fade {
      animation-name: fa-fade;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
    }

    .fa-beat-fade {
      animation-name: fa-beat-fade;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
    }

    .fa-flip {
      animation-name: fa-flip;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, ease-in-out);
    }

    .fa-shake {
      animation-name: fa-shake;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, linear);
    }

    .fa-spin {
      animation-name: fa-spin;
      animation-delay: var(--fa-animation-delay, 0s);
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 2s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, linear);
    }

    .fa-spin-reverse {
      --fa-animation-direction: reverse;
    }

    .fa-pulse,
    .fa-spin-pulse {
      animation-name: fa-spin;
      animation-direction: var(--fa-animation-direction, normal);
      animation-duration: var(--fa-animation-duration, 1s);
      animation-iteration-count: var(--fa-animation-iteration-count, infinite);
      animation-timing-function: var(--fa-animation-timing, steps(8));
    }

    @media (prefers-reduced-motion: reduce) {

      .fa-beat,
      .fa-bounce,
      .fa-fade,
      .fa-beat-fade,
      .fa-flip,
      .fa-pulse,
      .fa-shake,
      .fa-spin,
      .fa-spin-pulse {
        animation: none !important;
        transition: none !important;
      }
    }

    @keyframes fa-beat {

      0%,
      90% {
        transform: scale(1);
      }

      45% {
        transform: scale(var(--fa-beat-scale, 1.25));
      }
    }

    @keyframes fa-bounce {
      0% {
        transform: scale(1, 1) translateY(0);
      }

      10% {
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
      }

      30% {
        transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
      }

      50% {
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
      }

      57% {
        transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
      }

      64% {
        transform: scale(1, 1) translateY(0);
      }

      100% {
        transform: scale(1, 1) translateY(0);
      }
    }

    @keyframes fa-fade {
      50% {
        opacity: var(--fa-fade-opacity, 0.4);
      }
    }

    @keyframes fa-beat-fade {

      0%,
      100% {
        opacity: var(--fa-beat-fade-opacity, 0.4);
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(var(--fa-beat-fade-scale, 1.125));
      }
    }

    @keyframes fa-flip {
      50% {
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
      }
    }

    @keyframes fa-shake {
      0% {
        transform: rotate(-15deg);
      }

      4% {
        transform: rotate(15deg);
      }

      8%,
      24% {
        transform: rotate(-18deg);
      }

      12%,
      28% {
        transform: rotate(18deg);
      }

      16% {
        transform: rotate(-22deg);
      }

      20% {
        transform: rotate(22deg);
      }

      32% {
        transform: rotate(-12deg);
      }

      36% {
        transform: rotate(12deg);
      }

      40%,
      100% {
        transform: rotate(0deg);
      }
    }

    @keyframes fa-spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .fa-rotate-90 {
      transform: rotate(90deg);
    }

    .fa-rotate-180 {
      transform: rotate(180deg);
    }

    .fa-rotate-270 {
      transform: rotate(270deg);
    }

    .fa-flip-horizontal {
      transform: scale(-1, 1);
    }

    .fa-flip-vertical {
      transform: scale(1, -1);
    }

    .fa-flip-both,
    .fa-flip-horizontal.fa-flip-vertical {
      transform: scale(-1, -1);
    }

    .fa-rotate-by {
      transform: rotate(var(--fa-rotate-angle, 0));
    }

    .svg-inline--fa .fa-primary {
      fill: var(--fa-primary-color, currentColor);
      opacity: var(--fa-primary-opacity, 1);
    }

    .svg-inline--fa .fa-secondary {
      fill: var(--fa-secondary-color, currentColor);
      opacity: var(--fa-secondary-opacity, 0.4);
    }

    .svg-inline--fa.fa-swap-opacity .fa-primary {
      opacity: var(--fa-secondary-opacity, 0.4);
    }

    .svg-inline--fa.fa-swap-opacity .fa-secondary {
      opacity: var(--fa-primary-opacity, 1);
    }

    .svg-inline--fa mask .fa-primary,
    .svg-inline--fa mask .fa-secondary {
      fill: black;
    }

    .svg-inline--fa.fa-inverse {
      fill: var(--fa-inverse, #fff);
    }

    .fa-stack {
      display: inline-block;
      height: 2em;
      line-height: 2em;
      position: relative;
      vertical-align: middle;
      width: 2.5em;
    }

    .fa-inverse {
      color: var(--fa-inverse, #fff);
    }

    .svg-inline--fa.fa-stack-1x {
      --fa-width: 1.25em;
      height: 1em;
      width: var(--fa-width);
    }

    .svg-inline--fa.fa-stack-2x {
      --fa-width: 2.5em;
      height: 2em;
      width: var(--fa-width);
    }

    .fa-stack-1x,
    .fa-stack-2x {
      inset: 0;
      margin: auto;
      position: absolute;
      z-index: var(--fa-stack-z-index, auto);
    }
  

    .nav .new,
    .wapnava .new,
    .nava.bbs {
      display: flex;
      align-items: center;
    }

    .nav .new {
      justify-content: center;
    }

    .navhide .new {
      margin-top: 6px;
      justify-content: space-between;
    }

    .nava.prod {
      display: flex;
      align-items: center;
    }

    .nava.prod .icon {
      margin-left: 6px;
    }

    .navhide .new .desc {
      font-size: 12px;
      color: #aaa;
    }

    .nava.bbs .icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
      background-image: url("");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 2px;
      image-rendering: -webkit-optimize-contrast;
      display: none;
    }

    .nava .icon,
    .wapnava .new .icon,
    .nav .new .icon {
      width: 28px;
      height: 28px;
      image-rendering: -webkit-optimize-contrast;
    }

    .nav span .cheap {
      color: #ff5200;
    }

    .nav span:hover .cheap {
      color: #ff5200;
    }

    .nav .cheap_tips {
      position: absolute;
      top: 8px;
      left: -35px;
      white-space: nowrap;
      padding: 1px 3px 2px;
      background-color: #ff5200;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      animation: moveUpDown 1s infinite;
      -webkit-animation: moveUpDown 1s infinite;
    }

    .nav .cheap_tips::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -8px;
      left: 72px;
      width: 0;
      height: 0;
      border: 4px solid;
      border-color: #ff5200 transparent transparent;
    }

    .navhide::after {
      content: '';
      top: -10px;
      position: absolute;
      left: 80px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff;
    }

    .navhide {
      width: 200px;
    }

    .navhide a {
      height: 55px;
    }

    .navhide a:hover,
    .navhide a.active {
      background-color: #def1e0;
    }

    .navhide a:hover .nav-sub-title-h3,
    .navhide a.active .nav-sub-title-h3 {
      color: #20a53a;
    }

    .navhide a:hover .desc,
    .navhide a.active .desc {
      color: #62c075;
    }

    .nav-sub-title {
      position: relative;
    }

    .nav-sub-title .nav-sub-title-h3 {
      font-size: 15px;
      color: #555;
      font-weight: 600;
      margin-bottom: 3px;
    }

    .nav-sub-title .desc {
      font-size: 12px;
      color: #999;
    }

    .nav-sub-title .icon-new {
      display: inline-block;
      background: url("") no-repeat;
      width: 30px;
      height: 15px;
      background-size: 100%;
      position: absolute;
      right: -30px;
      top: 4px;
    }

    .nava .icon-new {
      display: inline-block;
      background: url("") no-repeat;
      width: 30px;
      height: 30px;
      background-size: 100%;
      position: absolute;
      right: 16px;
      top: 6px;
    }

    .navhide .sub-nav-more {
      display: none;
    }

    .nav-more-btn {
      text-align: center;
      height: 30px;
      line-height: 30px;
      color: #20a53a;
      cursor: pointer;
      border-top: #eee 1px solid;
      padding-top: 3px;
      margin-top: 5px;
    }

    .nav-more-btn:hover {
      font-weight: 600;
    }

    .nav-more-btn-ico {
      display: inline-block;
      background: url("") no-repeat;
      width: 14px;
      height: 12px;
      vertical-align: -1px;
      background-size: 100%;
      margin-left: 4px;
    }

    @-webkit-keyframes moveUpDown {
      25% {
        top: 7px;
      }

      50% {
        top: 6px;
      }

      75% {
        top: 5px;
      }

      100% {
        top: 6px;
      }
    }

    @keyframes moveUpDown {
      25% {
        top: 7px;
      }

      50% {
        top: 6px;
      }

      75% {
        top: 5px;
      }

      100% {
        top: 6px;
      }
    }

    .swiperTips {
      height: 40px;
      background-color: #fcf4e4;
      color: #d98704;
      overflow: hidden;
    }

    .swiperTips .tip {
      float: left;
      width: 100%;
    }

    .swiperYips .tips {
      width: 100%;
    }

    .swiperTips a {
      color: #d98704;
      text-decoration: underline;
    }

    .swiperTips .swiperBtnGroup {
      position: absolute;
      display: flex;
      justify-content: end;
      align-items: center;
      width: 100px;
      height: 16px;
      top: 10px;
      right: 48px;
      display: none;
    }

    .swiperTips .swiperBtnGroup .swiperBtn {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1px solid #d98704;
      border-radius: 50%;
      margin-left: 10px;
      cursor: pointer;
    }

    .swiperTips .swiperBtnGroup .active {
      background-color: #d98704;
    }

    .top-tips .closex:hover {
      color: #d98704;
    }

    .nav .cheap_tips {
      left: -12px;
    }

    .nav .cheap_tips::after {
      left: 46px;
    }
  

    .nav .new,
    .wapnava .new,
    .nava.bbs {
      display: flex;
      align-items: center;
    }

    .nav .new {
      justify-content: center;
    }

    .navhide .new {
      margin-top: 6px;
      justify-content: space-between;
    }

    .nava.prod {
      display: flex;
      align-items: center;
    }

    .nava.prod .icon {
      margin-left: 6px;
    }

    .navhide .new .desc {
      font-size: 12px;
      color: #aaa;
    }

    .nava.bbs .icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
      background-image: url("");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 2px;
      image-rendering: -webkit-optimize-contrast;
      display: none;
    }

    .nava .icon,
    .wapnava .new .icon,
    .nav .new .icon {
      width: 28px;
      height: 28px;
      image-rendering: -webkit-optimize-contrast;
    }

    .nav span .cheap {
      color: #ff5200;
    }

    .nav span:hover .cheap {
      color: #ff5200;
    }

    .nav .cheap_tips {
      position: absolute;
      top: 8px;
      left: -35px;
      white-space: nowrap;
      padding: 1px 3px 2px;
      background-color: #ff5200;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      animation: moveUpDown 1s infinite;
      -webkit-animation: moveUpDown 1s infinite;
    }

    .nav .cheap_tips::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -8px;
      left: 72px;
      width: 0;
      height: 0;
      border: 4px solid;
      border-color: #ff5200 transparent transparent;
    }

    .navhide::after {
      content: '';
      top: -10px;
      position: absolute;
      left: 80px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff;
    }

    .navhide {
      width: 320px;
    }

    .navhide a {
      height: 55px;
    }

    .navhide a:hover,
    .navhide a.active {
      background-color: #def1e0;
    }

    .navhide a:hover .nav-sub-title-h3,
    .navhide a.active .nav-sub-title-h3 {
      color: #20a53a;
    }

    .navhide a:hover .desc,
    .navhide a.active .desc {
      color: #62c075;
    }

    .nav-sub-title {
      position: relative;
    }

    .nav-sub-title .nav-sub-title-h3 {
      font-size: 15px;
      color: #555;
      font-weight: 600;
      margin-bottom: 3px;
    }

    .nav-sub-title .desc {
      font-size: 12px;
      color: #999;
    }

    .nav-sub-title .icon-new {
      display: inline-block;
      background: url("") no-repeat;
      width: 30px;
      height: 15px;
      background-size: 100%;
      position: absolute;
      right: -30px;
      top: 4px;
    }

    .nava .icon-new {
      display: inline-block;
      background: url("") no-repeat;
      width: 30px;
      height: 30px;
      background-size: 100%;
      position: absolute;
      right: 16px;
      top: 6px;
    }

    .navhide .sub-nav-more {
      display: none;
    }

    .nav-more-btn {
      text-align: center;
      height: 30px;
      line-height: 30px;
      color: #20a53a;
      cursor: pointer;
      border-top: #eee 1px solid;
      padding-top: 3px;
      margin-top: 5px;
    }

    .nav-more-btn:hover {
      font-weight: 600;
    }

    .nav-more-btn-ico {
      display: inline-block;
      background: url("") no-repeat;
      width: 14px;
      height: 12px;
      vertical-align: -1px;
      background-size: 100%;
      margin-left: 4px;
    }

    @-webkit-keyframes moveUpDown {
      25% {
        top: 7px;
      }

      50% {
        top: 6px;
      }

      75% {
        top: 5px;
      }

      100% {
        top: 6px;
      }
    }

    @keyframes moveUpDown {
      25% {
        top: 7px;
      }

      50% {
        top: 6px;
      }

      75% {
        top: 5px;
      }

      100% {
        top: 6px;
      }
    }

    .swiperTips {
      height: 40px;
      background-color: #fcf4e4;
      color: #d98704;
      overflow: hidden;
    }

    .swiperTips .tip {
      float: left;
      width: 100%;
    }

    .swiperYips .tips {
      width: 100%;
    }

    .swiperTips a {
      color: #d98704;
      text-decoration: underline;
    }

    .swiperTips .swiperBtnGroup {
      position: absolute;
      display: flex;
      justify-content: end;
      align-items: center;
      width: 100px;
      height: 16px;
      top: 10px;
      right: 48px;
      display: none;
    }

    .swiperTips .swiperBtnGroup .swiperBtn {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1px solid #d98704;
      border-radius: 50%;
      margin-left: 10px;
      cursor: pointer;
    }

    .swiperTips .swiperBtnGroup .active {
      background-color: #d98704;
    }

    .top-tips .closex:hover {
      color: #d98704;
    }

    .nav .cheap_tips {
      left: -12px;
    }

    .nav .cheap_tips::after {
      left: 46px;
    }

    .install-box,
    select,
    textarea {
      transition: .3s all linear;
      -ms-transition: .3s all linear;
      -moz-transition: .3s all linear;
      -webkit-transition: .3s all linear;
      -o-transition: .3s all linear
    }

    .downTitle {
      color: #20a53a
    }

    .head_pc {
      background-color: #fff;
      position: relative;
      z-index: 2
    }

    canvas {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 0;
      opacity: .5
    }

    .top-tips {
      z-index: 1
    }

    .wrap {
      padding: 0
    }

    .d1 {
      background: linear-gradient(0deg, #fff, #d8efdb, #edf7ef);
      position: relative
    }

    .d1 .wrap {
      padding-top: 20px;
      position: relative;
      z-index: 1
    }

    .d2 .wrap,
    .d3 .wrap,
    .d4 .wrap {
      padding: 50px 2% 10px
    }

    .install-box {
      position: relative;
      top: 0;
      display: flex;
      align-items: center;
      width: 30%;
      padding: 30px 10px 16px 20px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 8px 0 rgb(0 0 0 / 30%);
      transition: all .3s
    }

    .install-box:hover {
      box-shadow: 0 6px 16px 0 rgb(0 0 0 / 50%);
      top: -10px
    }

    .install-box.linux,
    .install-box.windows {
      align-items: center;
      width: 45%
    }

    .install-box+.install-box {
      margin-left: 5%
    }

    .install-box::before {
      content: '';
      position: absolute;
      top: 20px;
      right: 0;
      bottom: 0;
      width: 100%;
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: auto 100%;
      z-index: 10;
      transition: all .25s;
      opacity: .3
    }

    .install-box.linux::before {
      background-image: url("../images/downico1_01.png")
    }

    .install-box.windows::before {
      background-image: url("")
    }

    .install-box.cloud::before {
      background-image: url("")
    }

    .install-box.ssh::before {
      background-image: url("")
    }

    .install-box.app::before {
      background-image: url("")
    }

    .install-box .img {
      position: relative;
      flex: 0 0 44%;
      z-index: 12
    }

    .install-box .img img {
      display: block;
      width: 100%
    }

    .install-box .cont {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 5%;
      padding-bottom: 12px;
      z-index: 12
    }

    .install-box.linux .cont,
    .install-box.windows .cont {
      padding-bottom: 10px
    }

    .install-box .bottom {
      display: flex
    }

    .install-box .title {
      margin-bottom: 14px;
      line-height: 1;
      font-size: 20px;
      font-weight: 700;
      transition: color .25s
    }

    .install-box.linux .title,
    .install-box.windows .title {
      font-size: 28px
    }

    .install-box .desc {
      margin-bottom: 14px;
      font-size: 12px;
      color: #777;
      transition: color .25s
    }

    .install-box.linux .desc,
    .install-box.windows .desc {
      font-size: 14px
    }

    .install-box .mark {
      margin-bottom: 20px;
      height: 22px;
      overflow: hidden
    }

    .install-box .mark span {
      margin-right: 10px;
      line-height: 22px;
      height: 22px;
      padding: 0 6px;
      font-size: 12px;
      border-radius: 2px;
      display: inline-block
    }

    .install-box .mark span:nth-child(1) {
      border: #6bdc6b 1px solid;
      color: #fff;
      background-color: #6bdc6b
    }

    .install-box .mark span:nth-child(2) {
      border: #ffa565 1px solid;
      color: #fff;
      background-color: #ffa565
    }

    .install-box .mark span:nth-child(3) {
      border: #65a7ff 1px solid;
      color: #fff;
      background-color: #65a7ff
    }

    .install-box .mark span:last-child {
      margin-right: 0
    }

    .install-box .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 16px;
      background-image: linear-gradient(#54b891, #22a53d);
      border-radius: 6px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      border: none
    }

    .install-box .btn.default {
      margin-left: 10px;
      background: 0 0;
      border: 1px solid #777;
      color: #777
    }

    .install-box .btn:hover {
      filter: brightness(120%);
      -webkit-filter: brightness(120%)
    }

    .install-box:hover {
      background-image: linear-gradient(#e5f5e5, #fff)
    }

    .wrap-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 50px;
      position: relative
    }

    .wrap-title::before {
      content: ' ';
      display: inline-block;
      height: 1rem;
      width: 1rem;
      -webkit-transform: rotate(224deg);
      -ms-transform: rotate(224deg);
      transform: rotate(224deg);
      border-width: 0 0 4px 4px;
      border-color: #20a53a;
      border-style: solid;
      margin-right: 16px;
      position: absolute;
      left: -50px;
      top: 6px;
      transition: transform .4s ease-in-out
    }

    .wrap-title.default-module-line {
      margin-left: 30px
    }

    .wrap-title.default-module-line::before {
      content: '';
      display: block;
      width: 6px;
      height: 36px;
      margin-right: 20px;
      background-color: #20a53a;
      transform: none;
      top: 0;
      left: -30px
    }

    .wrap-title.show-module::before {
      -webkit-transform: rotate(314deg);
      -ms-transform: rotate(314deg);
      transform: rotate(314deg);
      transition: transform .4s ease-in-out
    }

    .wrap-title .text {
      margin-right: 20px;
      line-height: 36px;
      font-size: 36px;
      font-weight: 700
    }

    .wrap-title a {
      font-size: 16px
    }

    .warp-content {
      display: none
    }

    .warp-content.show {
      display: block
    }

    .d2 .desc,
    .d2 .tips,
    .d4 .tips {
      line-height: 30px
    }

    .d2 .desc {
      margin-bottom: 16px
    }

    .d2 .tips,
    .d4 .tips {
      margin-top: 16px
    }

    .install-code {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      line-height: 30px
    }

    .install-code .osname {
      display: inline-block;
      width: 179px;
      font-weight: 700;
      text-align: right;
    }

    .install-code+.install-code {
      margin-top: 16px
    }

    .install-code .code-cont {
      display: flex;
      align-items: center
    }

    .install-code .command,
    .reference .serverCode {
      position: relative;
      display: flex;
      margin-left: 12px;
      margin-right: 15px;
      padding: 7px 10px;
      border-radius: 3px;
      background-color: #20202f;
      box-shadow: 0 0 5px #ececec;
      font-size: 16px;
      color: #fff;
      font-family: SimSun;
      width: 950px
    }

    .reference .serverCode {
      display: inline;
      margin: 0 5px;
      padding: 4px
    }

    .install-code .ico-copy-box {
      display: block;
      width: 140px;
      height: 38px;
      cursor: pointer;
      font-weight: 700;
      color: #fff;
      border-radius: 5px;
      line-height: 38px;
      border: #20a53a 1px solid;
      background-color: #20a53a;
      transition: background-color .25s;
      text-align: center
    }

    .install-code .ico-copy-box i {
      background: url("../images/ico-copy_hover.png") no-repeat;
      width: 16px;
      height: 18px;
      background-size: 16px 18px;
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle
    }

    .install-code .ico-copy-box:hover {
      background-color: #35af4d
    }

    .d3,
    .d5 {
      background-color: #edf6ef
    }

    .divide .wrap {
      position: relative
    }

    .divide .wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      border-top: 2px dashed #ddd
    }

    .form-line+.form-line {
      margin-top: 20px
    }

    .form-line .label {
      float: left;
      width: 72px;
      height: 38px;
      line-height: 38px;
      margin-right: 10px;
      text-align: right;
      font-weight: 700
    }

    .form-line .o-info {
      margin-left: 65px
    }

    .form-line input,
    .form-line select {
      height: 42px;
      line-height: 42px;
      border: 1px solid #ccc;
      padding: 0 10px;
      border-radius: 4px;
      font-size: 14px
    }

    .form-line input:focus,
    .form-line input:hover,
    .form-line select:focus,
    .form-line select:hover,
    .form-line textarea:focus,
    .form-line textarea:hover {
      border-color: #20a53a;
      box-shadow: 0 4px 8px 0 #bfe2c5, 0 6px 20px 0 rgba(0, 0, 0, .19)
    }

    .form-line select {
      width: 140px;
      padding-left: 10px;
      padding-right: 0
    }

    .form-line textarea {
      height: 100px;
      border: 1px solid #ccc;
      padding: 8px;
      border-radius: 2px;
      font-size: 14px
    }

    .form-line .show-paw {
      background-image: url("");
      background-repeat: no-repeat;
      background-position: center center;
      width: 25px;
      height: 25px;
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;
      z-index: 10
    }

    .form-line .show-paw.active {
      background-image: url("")
    }

    .online-btn {
      height: 44px;
      color: #fff;
      border: none;
      background: #20a53a;
      background-image: linear-gradient(#54b891, #22a53d);
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;
      margin-left: 80px
    }

    .online-btn.disable {
      cursor: not-allowed
    }

    .online-btn.disable:hover {
      filter: brightness(100%);
      -webkit-filter: brightness(100%)
    }

    .online-btn:hover {
      filter: brightness(130%);
      -webkit-filter: brightness(130%)
    }

    .matters-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 20px
    }

    .matters-list {
      list-style: disc;
      line-height: 28px;
      padding-left: 20px;
      padding-right: 20px
    }

    .matters-list li {
      list-style: disc;
      margin-bottom: 10px
    }

    .matters-list li span {
      color: #ff4500;
      font-weight: 700
    }

    .d4 .desc {
      margin-bottom: 16px
    }

    .Prompts-info {
      margin-top: 20px;
      height: 75px;
      color: #20a53a;
      text-align: center;
      font-size: 25px;
      padding: 15px 0
    }

    .Prompts-info span {
      display: inline;
      margin: 0 auto;
      padding-top: 3px;
      padding-left: 80px;
      width: 100%;
      height: 33px;
      line-height: 30px;
      background: url("") no-repeat;
      background-position: 40px 2px;
      background-size: 30px 30px;
      box-sizing: border-box
    }

    .newsList {
      width: 550px;
      overflow: hidden;
      font-size: 15px;
      background: #000;
      color: #fff;
      border-radius: 5px;
      padding: 20px;
      box-sizing: border-box;
      margin: 0 auto 15px;
      position: relative
    }

    .newsList li {
      line-height: 30px;
      overflow: hidden;
      margin-bottom: 5px;
      position: relative
    }

    .newsList li span {
      display: block
    }

    .newsList li span:nth-child(1) {
      float: left;
      width: 17%;
      font-size: 18px;
      font-weight: 400;
      text-align: right
    }

    .newsList li span:nth-child(2) {
      float: right;
      width: 80%;
      font-size: 18px;
      font-weight: 400;
      margin-left: 10px
    }

    .newsList i {
      background: url("") no-repeat;
      width: 16px;
      height: 16px;
      font-style: inherit;
      position: absolute;
      right: 220px;
      top: 7px;
      cursor: pointer
    }

    .step_one,
    .step_three,
    .step_two {
      font-size: 16px;
      margin: 0 0 15px 40px
    }

    .step_tips {
      font-size: 15px;
      margin: 0 40px 10px 64px;
      letter-spacing: .5px
    }

    select.bto_rule_type {
      height: 38px;
      border: 1px solid #ccc;
      line-height: 38px;
      padding: 0 10px;
      border-radius: 2px;
      font-size: 14px
    }

    .bird {
      width: 25px;
      height: 5px;
      display: inline-block;
      position: absolute;
      transform: skew(20deg, 20deg);
      animation: wave 2.5s ease-in-out infinite;
      z-index: 0
    }

    .bird:after,
    .bird:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: #1aa837;
      position: absolute;
      border-radius: 20%;
      opacity: .1
    }

    .bird:before {
      right: 49%;
      transform-origin: right;
      transform: rotate(-40deg);
      animation: flap-left .75s ease-in-out infinite
    }

    .bird:after {
      left: 49%;
      transform-origin: left;
      transform: rotate(40deg);
      animation: flap-right .75s linear infinite
    }

    .alert,
    .cloud-form {
      font-size: 12px
    }

    .alert-success {
      margin: 15px;
      padding: 15px;
      line-height: 1.4;
      background-color: #f1f6ef;
      border: 1px solid #eaf2e6;
      border-radius: 4px;
      color: #3c763d
    }

    .b-u-c-list {
      display: flex;
      position: relative;
      width: 100%;
      margin-bottom: 20px
    }

    .b-u-c-list .tit {
      width: 100px;
      margin-right: 20px;
      line-height: 34px;
      text-align: right;
      white-space: nowrap
    }

    .input-text {
      flex: 1;
      height: 34px;
      margin-right: 40px;
      padding: 0 6px;
      line-height: 34px;
      border: 1px solid #dbdbea;
      border-radius: 3px;
      outline: 0;
      font-size: 12px
    }

    .input-text:focus {
      border: 1px solid #20a53a
    }

    .layui-layer .install-code {
      display: flex;
      flex-wrap: wrap;
      line-height: 30px
    }

    .layui-layer .install-code .osname {
      display: inline-block;
      width: 160px;
      font-weight: 700;
      margin: 20px auto;
      font-size: 18px
    }

    .layui-layer .install-code+.install-code {
      margin-top: 16px
    }

    .layui-layer .install-code .code-cont {
      display: flex;
      align-items: center
    }

    .layui-layer .install-code .command {
      position: relative;
      display: flex;
      margin-right: 15px;
      padding: 7px 10px;
      border-radius: 3px;
      background-color: #20202f;
      box-shadow: 0 0 5px #ececec;
      color: #fff;
      font-family: SimSun;
      width: 950px
    }

    .layui-layer .install-code .ico-copy {
      display: block;
      width: 26px;
      height: 30px;
      background: url("") no-repeat left center;
      cursor: pointer;
      width: 65px;
      text-indent: 2.4em;
      font-weight: 700;
      color: #20a53a
    }

    .layui-layer .install-code {
      flex-direction: column;
      align-items: flex-start
    }

    .layui-layer .install-code .code-cont {
      width: 100%
    }

    .layui-layer .install-code .command {
      flex: 1;
      width: 0;
      margin-left: 0;
      line-height: 30px;
      font-size: 12px;
      word-break: break-all
    }

    .install-box.hosteye,
    .install-box.monitor {
      position: relative
    }

    .install-box.hosteye .tag,
    .install-box.monitor .tag {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 999
    }

    .install-label .osname {
      display: block;
      line-height: 24px
    }

    @keyframes wave {
      40% {
        transform: translateY(40px) skew(20deg, 20deg)
      }

      50% {
        transform: translateY(50px) skew(20deg, 20deg)
      }

      60% {
        transform: translateY(40px) skew(20deg, 20deg)
      }

      100% {
        transform: translateY(0) skew(20deg, 20deg)
      }
    }

    @keyframes flap-left {
      60% {
        transform: rotate(10deg)
      }

      75% {
        transform: rotate(20deg)
      }

      100% {
        transform: rotate(-40deg)
      }
    }

    @keyframes flap-right {
      60% {
        transform: rotate(-10deg)
      }

      75% {
        transform: rotate(-20deg)
      }

      100% {
        transform: rotate(40deg)
      }
    }

    @media screen and (min-height:900px) {
      .d1 .wrap {
        padding: 50px 0
      }

      .i1t h1 {
        font-size: 56px !important;
        margin-bottom: 20px
      }

      .faq-question .faq-tit {
        font-size: 18px
      }

      .reference .faq-title {
        font-size: 20px
      }

      .reference .faq-question {
        margin-bottom: 30px
      }

      .reference .install_command {
        padding: 20px 45px
      }
    }

    @media screen and (max-width:1440px) {
      .wrap {
        width: 97%
      }

      .install-code .command {
        margin-left: 0;
        width: 920px !important
      }
    }

    @media only screen and (max-width:1299px) {

      .d2 .wrap,
      .d3 .wrap,
      .d4 .wrap {
        padding: 60px 0
      }

      .install-box {
        padding: 24px 20px 10px;
        padding-right: 0
      }

      .install-box .title,
      .install-box.linux .title,
      .install-box.windows .title {
        margin-bottom: 10px;
        font-size: 20px
      }

      .install-box .img {
        flex: 0 0 40%
      }

      .install-box.linux .title,
      .install-box.windows .title {
        margin-bottom: 16px
      }

      .install-box .desc {
        font-size: 13px
      }

      .install-box .btn {
        padding: 0 12px;
        height: 30px;
        border-radius: 8px;
        font-size: 12px
      }
    }

    @media only screen and (max-width:1200px) {
      .install-box .title {
        font-size: 16px
      }

      .install-box .desc {
        font-size: 12px
      }
    }

    @media only screen and (max-width:980px) {
      .install-list {
        justify-content: flex-start;
        flex-wrap: wrap
      }

      .install-box,
      .install-box.linux,
      .install-box.windows {
        width: 48%;
        padding: 15px;
        align-items: center
      }

      .install-box:nth-child(n+3) {
        margin-left: 0;
        margin-top: 20px
      }

      .install-box .title,
      .install-box.linux .title,
      .install-box.windows .title {
        font-size: 16px
      }

      .install-box .btn {
        height: 24px;
        padding: 0 10px;
        border-radius: 6px;
        font-weight: 400
      }

      .install-box .btn+.btn {
        margin-left: 5px
      }

      .install-code {
        flex-direction: column;
        align-items: flex-start
      }

      .install-code .code-cont {
        width: 100%
      }

      .install-code .command,
      .reference pre {
        flex: 1;
        width: 0 !important;
        margin-left: 0;
        line-height: 18px;
        font-size: 12px;
        word-break: break-all;
        white-space: normal
      }

      .online-install-cont {
        flex-direction: column
      }

      .online-install-cont .form {
        margin-bottom: 20px
      }

      .online-install-cont .pr-70 {
        padding-right: 0
      }

      .online-install-cont .pl-10 {
        padding-left: 0
      }

      .online-install-cont .first-line {
        flex-wrap: wrap
      }

      .online-install-cont .server-line {
        width: 100%;
        flex: none
      }

      .online-install-cont .port-line {
        flex: none;
        margin-top: 20px;
        width: 100%
      }

      .d2 .desc,
      .d2 .tips {
        line-height: 24px
      }

      .install-label .osname {
        display: inline-block;
        width: auto
      }
    }

    @media only screen and (max-width:768px) {

      .d2 .wrap,
      .d3 .wrap,
      .d4 .wrap {
        padding: 40px 0
      }

      .d1 .wrap {
        padding-top: 40px
      }

      .install-box {
        flex-wrap: wrap;
        margin: 0 15px 0 0 !important
      }

      .install-box:nth-child(2n) {
        margin-right: 0 !important
      }

      .install-box:nth-child(n+3) {
        margin-top: 20px !important
      }

      .install-box .cont,
      .install-box .img {
        flex: 0 0 100%
      }

      .install-box .cont {
        margin-top: 10px;
        margin-left: 0;
        padding: 0
      }

      .install-box .title,
      .install-box.linux .title,
      .install-box.windows .title {
        margin-bottom: 10px
      }

      .install-box .desc {
        margin-bottom: 10px
      }

      .wrap-title {
        margin-bottom: 20px
      }

      .wrap-title::before {
        width: 3px;
        height: 20px;
        margin-right: 10px
      }

      .wrap-title.default-module-line {
        margin-left: 15px
      }

      .wrap-title.default-module-line::before {
        width: 3px !important;
        height: 20px !important;
        top: 6px !important;
        left: -15px !important
      }

      .wrap-title .text {
        font-size: 20px;
        margin-right: 10px
      }

      .wrap-title .text span {
        font-size: 12px !important
      }

      .wrap-title a {
        font-size: 12px
      }

      .faq-title a {
        font-size: 12px
      }

      .faq-box.collapsed .install_command p,
      .faq-box.expanded .install_command p {
        line-height: 30px;
        font-size: 12px
      }

      .module-controller {
        margin-left: 30px !important
      }

      .wrap-title::before {
        border-width: 0 0 2px 2px;
        height: .6rem;
        width: .6rem;
        left: -30px;
        top: 11px
      }
    }

    @media only screen and (max-width:430px) {
      .install-box {
        width: 100% !important;
        margin: 0 !important
      }

      .install-box:nth-child(n+2) {
        margin-top: 20px !important
      }
    }

    .install-port-notice li {
      display: inline-block;
      width: 230px;
      margin-bottom: 0
    }

    .module-controller {
      cursor: pointer;
      margin-left: 55px;
      position: relative
    }

    .install-tips-title {
      margin-bottom: 10px;
      color: #000;
      line-height: 24px
    }

    .head-recom {
      display: flex;
      align-items: center;
      justify-content: center
    }

    .head-recom>img {
      margin-right: 100px
    }

    .hr-title {
      display: flex;
      margin-bottom: 40px;
      align-items: center
    }

    .hr-title>img {
      background-color: #fff;
      border-radius: 12px;
      padding: 6px;
      margin-right: 20px;
      width: 76px;
      height: 76px
    }

    .hr-title h1 {
      font-size: 34px
    }

    .hr-right p {
      font-size: 22px;
      color: #919191;
      margin-top: 20px
    }

    .hr-title div div {
      font-size: 20px;
      color: #919191
    }

    .hr-right .hr-qccode img {
      padding: 6px
    }

    .hr-right ul img {
      width: 120px;
      height: 120px
    }

    .hr-qccode {
      display: flex;
      align-items: center;
      background: #ffffff73;
      padding: 15px;
      border-radius: 20px
    }

    .hr-qccode div {
      font-size: 18px
    }

    .hr-qccode div {
      font-size: 18px;
      margin-left: 20px;
      line-height: 30px;
      color: #737373
    }

    .hr-right ul {
      margin-top: 20px
    }

    .hr-right ul li {
      display: inline-block;
      margin-right: 20px
    }

    .hr-right ul li div {
      font-size: 16px;
      color: #919191;
      text-align: center
    }

    @media only screen and (max-width:1050px) {
      .hr-title {
        margin-bottom: 20px
      }

      .hr-title>img {
        width: 50px;
        height: 50px
      }

      .hr-title h1 {
        font-size: 20px
      }

      .hr-title div div {
        font-size: 12px
      }

      .head-recom>img {
        margin-right: 30px
      }

      .hr-right p {
        font-size: 12px;
        margin-top: 0
      }

      .hr-qccode div {
        font-size: 12px
      }

      .hr-qccode img {
        width: 120px
      }

      .head-recom ul img {
        width: 80px;
        height: 80px
      }

      .head-recom ul div {
        font-size: 12px !important
      }
    }

    @media only screen and (max-width:830px) {
      .head-recom {
        flex-direction: column-reverse
      }

      .head-recom .hr-right {
        margin-bottom: 50px
      }
    }

    .wechat-customer {
      display: none
    }