/* 个人主页开始2024/06/04 */
.z-user-banner {
  width: 100%;
  height: 250px;
  padding: 0;
  position: relative;
}

.z-user-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.z-user-banner::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, .95) 85%, #f6f7f9);
  width: 100%;
  left: 0;
  z-index: 0;
  bottom: -1px;
  height: 40px;
}

.z-public-user-info {
  justify-content: space-between;
  padding: 30px 30px 0px 30px;
  background: linear-gradient(180deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,.9) 40%,#fff 100%);
  top: -50px;
  position: relative;
}

.z-public-user-avatar {
  width: 100px;
  height: 100px;
}

.z-public-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.z-public-user-info-body {
  margin-left: 20px;
}

.z-public-user-info-box {
  margin-bottom: 10px;
}

.z-public-user-info-name {
  font-size: 22px;
  font-weight: 500;
  color: #222226;
}

.z-public-user-info-grade {
  margin-right: 5px;
  margin-left: 5px;
}

.z-public-user-info-grade img {
  width: 35px;
  position: relative;
}

.z-public-user-info-meta {
  margin-bottom: 10px;
}

.z-public-user-info-intro {
  padding: 0px 30px 0px 30px;
  font-size: 14px;
  color: #222226;
  top: -25px;
  position: relative;
}

.z-public-user-info-location {
  background-color: #5353537a;
  color: #ffffff;
  font-size:13px;
  border-radius:14px;
  padding: 0 8px;
  height: 28px;
  margin-bottom: 10px;
  position: absolute;
  right: 20px;
  top: 20px;
}

.z-public-user-info-right {
  gap: 20px;
}


.z-user-right ul {
                  margin-bottom: 0;
                }

                .z-right-body li {
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                }

                .z-user-right .z-u-box .z-u-num {
                  color: #222226;
                  font-weight: 600;
                  font-size: 20px;
                  line-height: 24px;
                  margin-right: 4px;
                }

                .z-user-right .z-u-box .z-u-name {
                  color: #555666;
                  font-size: 14px;
                  line-height: 16px;
                  margin-top: 2px;
                  white-space: nowrap;
                }

                .z-user-right .z-u-bar {
                  width: 1px;
                  height: 16px;
                  background: #e8e8ed;
                  margin: 0 16px;
                }

                .z-u-btn {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 5px 20px;
                  border: 0;
                  border-radius: 5px;
                  font-size: 16px;
                  background-color: #5D87FF;
                  color: #FFF;
                }

                .z-u-groupbtn button i {
                  -webkit-text-stroke-width: unset;
                  margin-right: 5px;
                  font-size: 18px;
                }

                .z-u-groupbtn button:nth-child(1) {
                  background-color: #e8e8ed;
                  color: #222226;
                }

                .z-user-tab {
    margin-bottom: 30px;
    position: relative;
  }

  .z-user-tab::before {
    content: "";
    position: absolute;
    bottom: -10px;
    border-bottom: 1px solid #efefef;
    width: 100%;
  }


  .z-user-tab .z-u-tab-body {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      gap: 35px;
  }

  .z-u-tab-body .z-u-tab-item {
    position: relative;
  }

  .z-u-tab-body .z-u-tab-item a {
    color: #222226;
    font-size: 16px;
  }

  .z-u-tab-body .z-u-tab-item a span {
    margin-left: 5px;
    font-size: 12px;
    color: #aaaaaa;
  }

  .z-u-active {
    font-weight: 600;
  }

  .z-u-active::before {
    content: "";
    width: 50px;
    height: 2px;
    background: #222226;
    border-radius: 1px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .zero-public-user-body hr {
    color: #c5c5c5;
    margin: 10px 0px;
  }

  .z-u-post-list {
          margin-top: 10px;
        }

        .z-u-post-box {
          
        }

        .z-u-post-item {
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }

        .z-u-post-body {
          color: #878787;
          font-size: 14px;
        }

        .z-u-post-body:hover .z-u-post-title {
          color: #5D87FF;
        }

        .z-u-post-title {
          color: #222226;
          font-size: 18px;
          margin-bottom: 5px;
        }

        .z-u-post-content {
          color: #555666;
          line-height: 22px;
          white-space: normal;
          word-break: break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-bottom: 20px;
          overflow: hidden;
        }

        .z-u-post-footer ul {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 0;
        }

        .z-u-post-footer ul li {
          color: #aaaaaa;
          line-height: 20px;
          font-size: 14px;
        }

        .z-u-post-footer ul li span:nth-child(1) {
          margin-right: 2px;
        }

        .z-u-post-footer ul li::after {
          content: "";
          border-right: 1px solid #f0f0f0;
          margin-left: 15px;
        }

        .z-u-post-footer ul li:nth-last-child(1)::after {
          display: none;
        }

        .z-u-left-title {
          margin-bottom: 20px;
        }

        .z-u-card {
          position: relative;
          overflow: hidden;
          padding: 20px;
        }

        .z-u-left-body {
          display: flex;
          align-items: center;
        }

        .z-u-left-ico {
          
        }

        .z-u-left-ico svg {
          position: absolute;
          bottom: -5px;
          right: -40px;
          opacity: 0.08;
          width: 150px;
          height: 150px;
        }

        .z-u-left-text {
          font-weight: 600;
          font-size: 18px;
          color: #535353;
        }
        
        .z-u-left-badge {
          
        }

        .z-u-badge-box {
          margin-bottom: 15px;
          flex-wrap: wrap;
          width: 100%;
        }

        .z-u-badge-body {
          width: 25%;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
          flex-direction: column;
          padding-left: 5px;
          padding-right: 5px;
        }

        .z-u-badge-item {
          max-width: 50px;
          height: 50px;
          z-index: 1;
        }

        .z-u-badge-item img {
          width: 100%;
          height: 100%;
        }

        .z-u-badge-background {
          --w: 45px;
          width: var(--w);
          height: calc(var(--w) * 1.1547);
          clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
          background: linear-gradient(to right, #fffb08 0%, #ffbe0d 100%);
          margin: auto;
          position:absolute;
        }

        /*.z-u-badge-background {
          font-size: 16px;
          position: relative;
          display: inline-block;
          margin: 0 0.5rem;
          width: 4rem;
          height: calc(4rem * 1.732);
          background-color: #f006;
        }

        .z-u-badge-background::before,
        .z-u-badge-background::after {
          content:'';
          position:absolute;
          width:inherit;
          height:inherit;
          background-color:inherit;
          left:0;
          transform:rotate(-60deg);
        }

        .z-u-badge-background::after {
          transform:rotate(60deg);
        }*/

        .z-u-badge-name {
          font-size: 12px;
          color: #222222;
          margin-top: 5px;
        }

        .z-u-product-box {
          /*box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;*/
          margin-bottom: 10px;
          padding-left: 5px;
          padding-right: 5px;
        }
        
        .z-u-product-box .zerov4-ciecle-detail-product {
          padding: 10px;
          border-radius: 5px;
          border: 1px solid #f5f5f5;
        }

        .z-u-product-img {
          width: 45px;
          height: 45px;
          margin-right: 10px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
        }

        .z-u-product-img img {
          width: 100%;
          height: 100%;
        }

        .z-u-product-info {
          flex-direction: column;
        }

        .z-u-product-title {
          font-size: 16px;
          color: #222226;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          margin-bottom: 5px;
        }

        .z-u-product-sum {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 1.5;
          color: rgb(141 141 141 / 80%);
          font-size: 12px;
          height: 35px;
        }

        .z-u-model-body {
          position: relative;
        }

        .z-u-model-img {
          height: 250px;
          width: 100%;
          border-radius: 7px;
          overflow: hidden;
          display: block;
        }

        .z-u-model-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .z-u-model-like {
          position: absolute;
          right: 10px;
          top: 10px;
          background-color: rgb(0 0 0 / 40%);
          backdrop-filter: saturate(180%) blur(6px);
          border-radius: 50%;
          padding: 5px;
          opacity: 0;
          border: 0;
        }

        .z-u-model-like i {
          color: #FFF;
          font-size: 22px;
          -webkit-text-stroke-width: unset;
        }

        .z-u-model-title {
          content: "";
          background-color: rgb(0 0 0 / 40%);
          position: absolute;
          backdrop-filter: saturate(180%) blur(6px);
          -webkit-backdrop-filter: saturate(180%) blur(6px);
          bottom: 10px;
          left: 10px;
          right: 10px;
          padding: 10px;
          border-radius: 5px;
        }

        .z-u-model-text {
          color: #FFF;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-height: 1.5;
          font-size: 12px;
        }

        .z-user-favorite-tab {
          margin-bottom: 20px;
        }

        .z-u-favorite-tab-body {
          display: flex;
          align-items: center;
          gap: 25px;
        }

        .z-u-favorite-tab-item a {
          font-size: 14px;
          color: #6f6f6f;
        }

        .z-u-favorite-tab-item a span {
          font-size: 12px;
          color: #aaaaaa;
          margin-left: 2px;
        }

        .z-u-favorite-active {
          background-color: #5D87FF;
          padding: 3px 10px;
          border-radius: 3px;
        }

        .z-u-favorite-active a {
          color: #FFF;
        }

        .z-u-favorite-active a span {
          color: #ffffff;
        }

        .z-u-favorite-shop-box {
          padding: 0px;
          width: 100%;
          position: relative;
        }

        .z-u-favorite-shop-tag {
          position: absolute;
          background-color: #f60;
          right: 0;
          top: 0;
          border-radius: 3px;
        }

        .z-u-favorite-shop-tag span {
          padding: 5px;
          color: #fff;
        }

        .z-u-favorite-shop-img {
          height: 120px;
          object-fit: cover
        }

        .z-u-favorite-shop-img img {
          width: 100%;
          height: 100%;
          border-radius: 10px 10px 0 0;
        }

        .z-u-favorite-shop-title {
          padding: 20px 20px 0px 20px;
        }

        .z-u-favorite-shop-title h6 {
          line-height: 22px;
        }
        
        .z-u-favorite-shop-pic {
          padding: 10px;
        }

        .z-u-favorite-shop-more {
          background-color: #fafafa;
          padding: 10px;
          border-radius: 5px;
        }

        .z-u-favorite-shop-money {
          font-size: 16px;
          color: #f60;
          font-weight: 600;
        }

        .z-u-favorite-shop-author {
          width: 30px;
          height: 30px;
        }

        .z-u-favorite-shop-author img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        .z-u-favorite-shop-name {
          margin-left: 5px;
          color: #050023;
        }

        .z-u-favorite-shop-btn {
          gap: 10px;
          width: 100%;
        }

        .z-u-favorite-shop-btn button:nth-child(1) {
          background-color: #f60;
          color: #fff;
          width: 70%;
        }

        .z-u-favorite-shop-btn button:nth-child(2) {
          background-color: #fff;
          color: #f60;
          border: 1px solid #f60;
          width: 30%;
        }

        .z-u-follow-info {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
        }

        .z-u-follow-item {
          width: 32%;
          position: relative;
          box-sizing: border-box;
          background-color: #f9f9f9;
          padding: 10px;
          border-radius: 7px;
        }

        .z-u-follow-img {
          width: 45px;
          height: 45px;
          flex-shrink: 0;
          margin-right: 10px;
        }

        .z-u-follow-img img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }

        .z-u-follow-name {
          font-size: 16px;
          font-weight: 600;
          color: #222226;
        }

        .z-u-follow-grade {
          margin-left: 5px;
          width: 35px;
          height: auto;
        }

        .z-u-follow-grade img {
          width: 100%;
          height: 100%;
        }

        .z-u-follow-laston {
          color: #535353;
        }

        .z-u-follow-btn {
          gap: 10px;
        }

        .z-u-follow-btn button {
          font-size: 12px;
          border-radius: 3px;
          border: 0;
          background-color: #f60;
          padding: 1px 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          color: #FFF;
        }

        .z-u-follow-btn button.z-u-follow-active {
          background-color: rgb(255, 166, 107);
        }

        .z-u-follow-hr {
          color: #d3d3d3;
          margin: 15px 0;
        }

        .z-u-follow-footer {
          color: #939393;
        }

        .z-u-comment-item {
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }

        .z-u-comment-body {
          
        }

        .z-u-comment-content {
          line-height: 22px;
          white-space: normal;
          word-break: break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-bottom: 20px;
          overflow: hidden;
          color: #222226;
          font-size: 16px;
        }

        .z-u-comment-time {
          font-size: 14px;
          color: #555666;
        }

        .z-u-comment-time::after {
          content: "·";
          font-size: 14px;
          margin: 0px 15px;
          font-weight: 600;
        }

        .z-u-comment-post {
          color: #555666;
          font-size: 14px;
          font-weight: 600;
        }

        /* 用户设置页开始 2024.06.06*/

        .z-u-edit-left-tab {
        padding: 15px;
        position: relative;
        overflow: hidden;
      }

      .z-u-edit-left-tab::after {
        content: '';
        display: block;
        width: 400px;
        height: 400px;
        position: absolute;
        right: -60px;
        bottom: -100px;
        border-radius: 100% 0 0 0;
        background-image: linear-gradient(140deg, rgb(255 255 255 / 10%) 30%, #f1f5ff 100%);
      }

      .z-u-edit-box {

      }

      .z-u-edit-body {
        gap: 10px;
      }

      .z-u-edit-item {
        padding: 12px 8px;
      }

      .z-u-edit-item.active {
        color: #5D87FF !important;
        background-color: #eaf0ff !important;
      }

      .z-u-edit-ico {
        background-color: #fafafa;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .z-u-edit-item.active .z-u-edit-ico {
        background-color: #ffffff;
        color: #222222;
      }

      .z-u-edit-ico i {
        font-size: 20px;
        -webkit-text-stroke-width: unset;
      }

      .z-u-edit-title {
        margin-left: 20px;
      }

      .z-u-edit-title span {
        font-size: 16px;
        font-weight: 600;
      }

      .z-u-edit-title p {
        margin-bottom: 0px;
        color: #616161;
        font-size: 12px;
      }

      .z-u-edit-item.active .z-u-edit-title p {
        color: #5D87FF;
      }

      .z-u-edit-left-function {
        padding: 15px;
      }

      .z-u-edit-left-function-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-gap: 25px 0;
      }

      .z-u-edit-left-function-item.active i {
        color: #5D87FF;
        background-color: #eff3ff;
      }

      .z-u-edit-left-function-item.active span {
        color: #5D87FF;
      }

      .zerov4-user-home .z-u-edit-left-function-item {
        width: 12.5%;
      }

      .z-u-edit-left-function-item {
        width: 25%;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        color: #61666d;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .z-u-edit-left-function-item i {
        font-size: 24px;
        -webkit-text-stroke-width: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f3f3;
        padding: 8px;
        border-radius: 15px;
        color: #2A3547;
      }

      .z-u-edit-left-function-item span {
        margin-top: 5px;
        color: #222226;
      }

      .z-u-edit-right-user-header {
      justify-content: space-between;
      padding: 30px 30px 0px 30px;
      background: linear-gradient(180deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,.9) 40%,#fff 100%);top: -50px;position: relative;
    }

    .z-u-edit-right-user-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }

    .z-u-edit-right-user-avatar button {
      border: unset !important;
    }

    .z-u-edit-right-user-avatar::before {
      content: "";
      background-color: #5353537a;
      width: 100%;
      position: absolute;
      top: 0;
      height: 100%;
      left: 0;
    }

    .z-u-edit-right-user-avatar::after {
      content: "更换头像";
      font-size: 14px;
      position: absolute;
      left: 0;
      top: 0;
      margin: 0 auto;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      width: 100%;
      cursor: pointer;
    }

    .z-u-edit-right-user-avatar img {
      width: 100%;
      height: 100%;
    }

    .z-u-edit-right-user-info-box {
      margin-bottom: 10px;
    }

    .z-u-edit-right-user-info-name {
      font-size: 22px;
      font-weight: 500;
      color: #222226;
    }

    .c-user-grade {
      margin-right: 5px;
      margin-left: 5px;
    }

    .c-user-grade img {
      width: 35px;
      position: relative;
    }

    .z-u-edit-right-user-info-body {
      margin-bottom: 10px;
    }

    .z-u-edit-right-user-info-rz {
      color: #222226;
      font-size: 14px;
    }

    .z-u-edit-right-user-info-rz-tool {
      margin-bottom: 0;
      color: #222226;
      font-size: 14px;
    }

    .z-u-edit-right-user-info-rz i {
      margin-left: 5px;
      -webkit-text-stroke-width: unset;
      font-size: 18px;
    }

    .z-u-edit-right-user-info-rz span {
      margin-left: 5px;
    }

    .z-u-edit-right-user-info-bd {
      color: #222226;
      font-size: 14px;
    }

    .z-u-edit-right-user-info-bd-tool {
      margin-bottom: 0;
      color: #222226;
      font-size: 14px;
    }

    .z-u-edit-right-user-info-bd-box {
      margin-right: 15px;
    }

    .z-u-edit-right-user-info-bd-ico {
      width: 20px;
      height: 20px;
    }

    .z-u-edit-right-user-info-bd-ico img {
      width: 100%;
      height: 100%;
    }

    .z-u-edit-right-user-info-bd-ico-name {
      margin-left: 3px;
    }

    .z-u-edit-right-user-header .z-u-groupbtn {
      gap: 20px;
    }

    .z-u-edit-right-user-header .z-u-groupbtn button {
      background-color: #5D87FF;
      color: #FFF;
      font-size: 14px;
    }

    .z-u-edit-right-user-info-intro {
      padding: 0px 30px 0px 30px;
      font-size: 14px;
      color: #222226;
      top: -25px;
      position: relative;
    }

    .z-u-edit-right-user-info-cover {
      background-color: #5353537a;
      color: #ffffff;
      font-size:13px;
      border-radius:14px;
      padding: 0 8px;
      height: 28px;
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
    }

    .z-u-edit-right-user-info-cover i {
      -webkit-text-stroke-width: unset;
      font-size: 16px;
    }

    .z-u-edit-right-user-info-cover-text {
      margin-left: 5px;
    }

    .z-u-edit-right-user-info {
      margin-left: 20px;
    }

    .z-u-edit-right-account-body {
        padding: 20px;
        overflow: hidden;
      }

      .z-u-edit-right-account-body::before {
        content: '';
        display: block;
        width: 150px;
        height: 150px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0 0 100% 0;
        background-image: linear-gradient(45deg, rgb(220 253 246 / 10%) 35%, #e2ebff 99%);
      }

      .z-u-edit-right-account-body::after {
        content: '';
        display: block;
        width: 220px;
        height: 220px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0 0 100% 0;
        background-image: linear-gradient(45deg, rgb(244 253 251 / 0%) 45%, #f0f4ff 99%);
      }

      .z-u-edit-right-account-title {
        font-size: 18px;
      }

      .z-u-edit-right-account-num {
        font-size: 20px;
        color: #222226;
        font-weight: 600; 
      }

      .z-u-edit-right-account-num span {
        font-size: 26px;
      }

      .z-u-edit-right-account-num i {
        -webkit-text-stroke-width: unset;
        margin-right: 5px;
      }

      .z-u-edit-right-account-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .z-u-edit-right-account-button button {
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 5px;
      }

      .z-u-edit-right-account-button button:nth-child(1) {
        background-color: #3858f61a;
        color: #3858f6;
      }

      .z-u-edit-right-account-button button:nth-child(2) {
        background-color: #3858f6;
        color: #FFF;
      }

      .z-u-edit-right-account-button1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .z-u-edit-right-account-button1 button {
        padding: 1px 5px;
        font-size: 12px;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
      }

      .z-u-edit-right-account-button1 button:nth-child(1) {
        background-color: #f5f5f5;
      }

      .z-u-edit-right-account-button1 button:nth-child(2) {
        background-color: #5D87FF;
        color: #FFF;
      }

      .z-u-index {
        z-index: 1;
      }

      .z-u-index-box {
        margin-bottom: 20px;
      }

      .z-u-before::before {
        content: '';
        display: block;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0 0 100% 0;
        background-image: linear-gradient(45deg, rgb(244 253 251 / 0%) 60%, #f8faff 99%);
      }

      .z-u-tab-content {

            }

            .z-u-tab-content-item {
              border-bottom: 1px solid #f0f0f0;
              padding-bottom: 15px;
              margin-bottom: 15px;
            }

            .z-u-tab-content-body {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            .z-u-tab-content-text {
              line-height: 22px;
              white-space: normal;
              word-break: break-word;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              margin-bottom: 5px;
              overflow: hidden;
              color: #222226;
              font-size: 16px;
              flex: 1 1;
            }

            .z-u-tab-content-right {
              display: flex;
              flex-direction: column;
            }

            .z-u-tab-content-time {
              font-size: 12px;
              color: #9499a0;
            }

            .z-u-tab-content-num {
              color: #616161;
              font-size: 14px;
              text-align: end;
              margin-bottom:5px;
            }

            .z-u-tab-content-num b,
            .z-u-tab-content-num.increase b {
              color: #1a7af8;
              font-size: 18px;
              margin-right: 5px;
            }

            .z-u-tab-content-num.reduce b {
              color: #F44336;
            }

            .z-u-tab-content-money {
              font-size: 12px;
              color: #9499a0;
            }

            .z-u-tab-content-money b {
              color: #616161;
            }

            .z-u-edit-right-account-profile {
        position: relative;
        overflow: hidden;
      }

      .z-u-edit-right-account-profile::before {
        content: '';
        display: block;
        width: 200px;
        height: 200px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        border-radius: 100% 0 0 0;
        background-image: linear-gradient(300deg, rgb(220 253 246 / 10%) 35%, #e2ebff 99%);
      }

      .z-u-edit-right-account-profile::after {
        content: '';
        display: block;
        width: 300px;
        height: 300px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        border-radius: 100% 0 0 0;
        background-image: linear-gradient(300deg, rgb(244 253 251 / 0%) 45%, #f0f4ff 99%);
      }

      .z-u-edit-right-account-before::before {
        content: '';
        display: block;
        width: 400px;
        height: 400px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        border-radius: 100% 0 0 0;
        background-image: linear-gradient(300deg, rgb(244 253 251 / 0%) 10%, #f8faff 99%);
      }

      .z-u-edit-right-account-edit {
        width: 100%;
        max-width: 460px;
        margin-bottom: 20px;
      }
      
      .z-u-edit-right-account-edit input,
      .z-u-edit-right-account-edit textarea,
      .z-u-edit-right-account-edit select {
        background: #f6f7f9 !important;
        border-radius: 4px;
        font-size: 15px;
        padding: 10px !important;
        border: 0 !important;
      }

      .z-u-edit-right-account-edit input:focus,
      .z-u-edit-right-account-edit textarea:focus,
      .z-u-edit-right-account-edit select:focus {
        color: #222226;
      }

      .z-u-edit-btn-group {
        margin-top: 20px;
      }

      .z-u-edit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 5px 20px;
        border-radius: 5px;
        color: #FFF;
        background-color: #5D87FF;
        font-size: 16px;
        width: 140px;
      }

      .z-u-secure-header {
      width: 100%;
      height: 208px;
      box-sizing: border-box;
      padding: 0px;
      overflow: hidden;
      text-align: center;
      position: relative;
    }

    .z-u-secure-info {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    .z-u-secure-shield {
      display: block;
      width: 83px;
      height: 100px;
      line-height: 100px;
      background: url(../images/user/secure-safe.png) no-repeat 50%;
      background-size: cover;
      color: #fff;
      font-size: 40px;
      text-align: center;
    }

    .z-u-secure-desc {
      display: inline-block;
      padding: 0 8px;
      margin: 8px auto;
      border-radius: 12px;
      color: #fff;
      font-size: 14px;
    }

    .z-u-secure-desc.no {
      background: #29c469;
    }

    .z-u-secure-desc.middle {
      background: #fc6119;
    }

    .z-u-secure-desc.high {
      background: #fc1944;
    }

    .z-u-secure-text {
      margin-top: 10px;
      color: #222226;
    }

    .z-u-secure-text a {
      margin-left: 5px;
    }

    .z-u-secure-title {
        padding-bottom: 8px;
        border-bottom: 1px solid #f7f7f7;
        margin-bottom: 16px;
        font-size: 16px;
        color: #222226;
        font-weight: 600;
      }

      .z-u-secure-item {
        margin: 20px 10px;
        border-bottom: 1px solid #F3F3F3;
        padding-bottom: 20px;
      }

      .z-u-secure-name {
        font-size:16px;
        margin-bottom: 5px;
        color: #222226;
      }

      .z-u-secure-sum {
        color: #afafaf;
        font-size: 14px;
      }

      .z-u-secure-right {
        margin-left: auto;
      }

      .z-u-secure-right a {
        cursor: pointer;
      }

      .z-u-secure-btn {
        font-size: 14px;
      }

      .z-u-secure-login-list {
        background-color: #f7f7f7;
        border-radius: 5px;
        height: 130px;
      }
      
      .z-u-secure-login-list.z-unbound {
        background-color: #ffe9e9;
      }

      .z-u-secure-login-list.z-unbound .z-u-secure-login-item {
        position: relative;
        overflow: hidden;
      }

      .z-u-secure-login-list.z-unbound .z-u-secure-login-icon {
        position: absolute;
        right: -25px;
        bottom: -15px;
        opacity: 0.2;
        transform: rotate(335deg);
        width: 100px !important;
        height: 100px !important;
      }

      .z-u-secure-login-item {
        padding: 1rem;
        text-align: center;
        height: 100%;
      }

      .z-u-secure-login-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .z-u-secure-login-icon {
        width: 50px;
        height: 50px;
      }

      .z-u-secure-login-btn p {
        font-size: 16px;
        margin-bottom: 0 !important;
        font-size: 16px;
        color: #222226;
      }

      .z-u-secure-login-btn span {
        font-size: 14px;
        margin-top: 10px;
        color: #222226;
      }

      .z-u-secure-title-left {

      }

      .z-u-secure-title-right {
        font-size: 14px;
        color: #afafaf;
        font-weight: 500;
      }

      .z-u-setting-privacy-item {
      margin-bottom: 30px;
      border-bottom: 1px solid #f7f7f7;
      padding-bottom: 20px;
    }

    .z-u-select select {
      border: 0;
      padding: 0px 38px;
    }

    .z-u-setting-shop-item {
          margin-top: 10px;
          margin-bottom: 20px;
          border-bottom: 1px solid #F3F3F3;
          padding-bottom: 20px;
        }

        .z-u-setting-shop-product {
          display: flex;
        }

        .z-u-setting-shop-product-img {
          width: 80px;
          height: 80px;
          overflow: hidden;
          border-radius: 5px;
          flex-shrink: 0;
        }

        .z-u-setting-shop-product-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .z-u-setting-shop-product-amount {
          margin-bottom: 10px;
          font-size: 14px;
          color: #222226;
        }

        .z-u-setting-shop-product-group {
          gap: 15px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
        }

        .z-u-setting-shop-product-group button {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0;
          padding: 5px 10px;
          border-radius: 5px;
        }

        .z-u-setting-shop-product-group button:nth-child(1) {
          background-color: #5D87FF;
          color: #FFFFFF;
        }

        .z-u-setting-shop-item-name {
          font-size: 16px;
          color: #222226;
        }

        .z-u-setting-shop-item-name i {
          -webkit-text-stroke-width: unset;
          margin-right: 5px;
          font-size: 20px;
        }

        .z-u-setting-shop-product-info {
          margin-left: 10px;
        }

        .z-u-setting-shop-product-more {
          font-size: 14px;
          color: #aaaaaa;
          margin-bottom: 5px;
          flex-direction: column;
        }

        .z-u-setting-shop-item-num .z-u-shipped {
          color: #49beff;
        }

        .z-u-setting-shop-item-num .z-u-tobepaid {
          color: #F44336;
        }

        .z-u-setting-shop-item-num .z-u-completed {
          color: #4CAF50;
        }

        .z-u-setting-shop-item-num .z-u-tobeshipped {
          color: #5d87ff;
        }

        .z-u-setting-shop-item-num .z-u-canceled {
          color: #696969;
        }

        .z-u-setting-shop-item-num .z-u-evaluate {
          color: #4CAF50;
        }

        .z-u-setting-shop-product-name h6 {
          font-size: 16px;
          color: #222226;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .z-u-setting-shop-product-money {
          font-size: 20px;
          color: #222226;
          flex-shrink: 0;
        }

        .z-u-setting-shop-item-num {
          font-size: 14px;
          color: #222226;
        }

        .z-u-setting-shop-item-num span {
          margin-left: 15px;
        }

        /* 等级页面开始 */
        .z-u-level-list {
          display: flex;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          position: relative;
        }

        .z-u-level-box {
          position: relative;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }

        .z-u-level-body {
          align-items: flex-end;
          height: 100%;
          display: flex;
          overflow: auto;
          padding-bottom: 10px;
          gap: 7px;
        }

        .z-u-level-body .z-u-level-item.active {
          border: 2px solid #ffd599;
          border-radius: 10px;
        }

        .z-u-level-body .z-u-level-item.active .z-u-level-bar {
          background: linear-gradient(46deg, #ffd599 -40%, #ff9700 100%) !important;
        }

        .z-u-level-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 8px;
          justify-content: flex-end;
          min-width: 50px;
          padding: 0 !important;
          --carousel-slide-width: 50px;
          cursor: pointer;
        }

        .z-u-level-exp {
          color: #c9ccd0;
          margin-bottom: 2px;
          font-size: 14px;
        }

        .z-u-level-bar {
          width: 12px;
          background: #c9ccd0;
          border-radius: 4px;
          margin-bottom: 2px;
          opacity: .5;
        }

        .z-u-level-icon {
          width: auto;
          height: 18px;
          margin-bottom: 8px;
        }

        .z-u-level-icon img {
          height: 100%;
          width: auto;
        }

        .z-u-level-body::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        .z-u-level-body::-webkit-scrollbar-button {
          background-color: rgba(0, 0, 0, 0);
          height: 2px;
          width: 2px;
        }

        .z-u-level-body::-webkit-scrollbar-thumb {
          background-color: rgba(130, 130, 130, .5);
          -webkit-border-radius: 4px;
          border-radius: 4px;
        }

        .z-u-level-body::-webkit-scrollbar-thumb:hover {
          background-color: rgb(130 130 130 / 80%);
          -webkit-border-radius: 4px;
          border-radius: 4px;
        }

        .z-u-level-body::-webkit-scrollbar-corner {
          background: rgba(0, 0, 0, 0);
          border-radius: 0 0 8px 0;
        }

        .z-u-level-level-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 10px;
      }

      .z-u-level-level-title {
        font-size: 16px;
        color: #222226;
        font-weight: 600;
        position: relative;
      }

      .z-u-level-level-item {
        flex-direction: column;
        font-size: 14px;
        color: #222226;
        padding: 20px;
        border-radius: 7px;
      }

      .z-u-level-level-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: linear-gradient(46deg, #eaf0ff -40%, #5D87FF 100%) !important;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 26px;
        margin-bottom: 10px;
        color: #FFF;
      }

      .z-u-level-level-icon i {
        -webkit-text-stroke-width: unset;
      }

      .z-u-level-level-todo-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 32%;
        border: 1px solid #f3f3f3;
        padding: 10px;
        border-radius: 10px;
      }

      .z-u-level-level-todo-button button {
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 14px;
        background-color: #5D87FF;
        color: #FFF;
      }

      .z-u-level-level-todo-box {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
      }

      .z-u-level-level-todo-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        border-radius: 50%;
        overflow: hidden;
        width: 45px;
        height: 45px;
        background-color: #eff3ff;
        font-size: 20px;
        color: #5D87FF;
        margin-right: 5px;
      }

      .z-u-level-level-todo-icon i {
        -webkit-text-stroke-width: unset;
      }

      .z-u-level-level-todo-name {
        font-size: 15px;
        color: #222226;
        margin-bottom: 5px;
      }

      .z-u-level-level-todo-text {
        font-size: 12px;
        color: #888888;
      }

      .z-u-level-level-todo-list-h6 {
        font-size: 16px;
        color: #222226;
        margin-bottom: 20px;
        margin-top: 20px;
      }

      .z-u-level-level-todo-list-h6 span {
        position: relative;
        display: inline-block;
        z-index: 0;
      }

      .z-u-level-level-todo-list-h6 span::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 6px;
        content: " ";
        z-index: -1;
        background: linear-gradient(90deg, #c0d1ff, #5D87FF);
      }

      /*  成就徽章页开始  */

      .z-u-badge-banner {
      background: linear-gradient(180deg, rgb(107 180 255) 40%, #5D87FF 99%);
      overflow: hidden;
      position: relative;
    }
    
    .z-u-badge-banner-bg-left::after {
      content: '';
      display: block;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 0 0 100% 0;
      background-image: linear-gradient(45deg, rgb(220 253 246 / 10%) 35%, #ffffff52 99%);
    }

    .z-u-badge-banner-bg-left::before {
      content: '';
      display: block;
      width: 240px;
      height: 240px;
      position: absolute;
      left: 40px;
      bottom: -100px;
      border-radius: 100% 100% 100% 100%;
      background-image: linear-gradient(300deg, rgb(220 253 246 / 10%) 35%, #ffffff5e 99%);
      box-shadow: 5px -5px 30px #5d87ff2e;
    }

    .z-u-badge-banner-bg-right::after {
      content: '';
      display: block;
      width: 200px;
      height: 200px;
      position: absolute;
      right: -20px;
      top: -40px;
      border-radius: 5px 5px 5px 5px;
      background-image: linear-gradient(0deg, rgb(220 253 246 / 10%) 35%, #ffffff52 99%);
      box-shadow: 5px -5px 40px #00000015;
      transform: rotateZ(228deg);
    }

    .z-u-badge-banner-bg-right::before {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      position: absolute;
      right: 115px;
      bottom: 0px;
      border-radius: 5px 5px 5px 5px;
      background-image: linear-gradient(270deg, rgb(220 253 246 / 10%) 35%, #ffffff52 99%);
      transform: rotateZ(80deg);
    }

    .z-u-badge-banner-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .z-u-badge-banner-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 10px;
      background: #FFF;
    }

    .z-u-badge-banner-avatar img {
      width: 100%;
      height: 100%;
      transform: scale(0.9);
      border-radius: 50%;
    }

    .z-u-badge-banner-author {
      margin-bottom: 5px;
    }

    .z-u-badge-banner-name {
      font-size: 18px;
      font-weight: 600;
      color: #FFF;
    }

    .z-u-badge-banner-info {
      margin-left: 5px;
      background-color: #00000033;
      padding: 3px 10px;
      border-radius: 20px;
    }

    .z-u-badge-banner-icon {
      margin-right: 5px;
    }

    .z-u-badge-banner-badge {
      font-size: 12px;
      color: #FFF;
    }

    .z-u-badge-banner-get-badge {
      color: #FFF;
      font-size: 14px;
    }

    .z-u-badge-banner-get-badge b {
      margin: 0 5px;
    }

    .z-u-badge-get-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 118px);
        grid-gap: 24px 40px;
      }

      .z-u-badge-get-item {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        width: 118px;
        font-style: normal;
        font-weight: 400;
      }

      .z-u-badge-get-img {
        width: 118px;
        height: 118px;
      }

      .z-badge-not-obtain img {
        filter: grayscale(100%);
      }

      .z-u-badge-get-img img {
        width: 100%;
        height: 100%;
      }

      .z-u-badge-get-name {
        margin-top: 4px;
        text-align: center;
        color: #1d2129;
        font-size: 16px;
        line-height: 28px;
      }

      .z-u-badge-get-text {
        font-size: 14px;
        text-align: center;
        color: #86909c;
        height: 24px;
        line-height: 24px;
      }

      .z-u-badge-before::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 6px;
        content: " ";
        z-index: -1;
        background: linear-gradient(90deg, #c0d1ff, #5D87FF);
      }

      /*  徽章模态框开始  */
      .zeroui-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, .8);
}


.zeroui-modal-content {
position: relative;
margin: 10% auto;
padding: 20px;
}


.zeroui-close {
color: #aaa;
font-size: 40px;
margin-left: auto;
border: 1px solid #aaa;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.zeroui-close:hover,
.zeroui-close:focus {
color: rgb(255, 255, 255);
text-decoration: none;
cursor: pointer;
}


@media screen and (min-width: 768px) {
.zeroui-modal-content {
width: 40%;
}
}

.zeroui-model-badge-button {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-size: 18px;
}

.zeroui-model-badge-not-obtained {
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 5px 20px;
border-radius: 50px;
background: hsla(0, 0%, 100%, .2);
border: .5px solid #ffffff;
color: #FFF;
}

.zeroui-model-badge-button button {
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 5px 20px;
border-radius: 50px;
background: hsla(0, 0%, 100%, .2);
border: .5px solid #ffffff;
color: #FFF;
}

.zeroui-model-badge-btn-show {

}

.zeroui-model-badge-name-right {

}

.zeroui-modal-badge-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}

.zeroui-model-badge-img {
max-width: 250px;
height: 250px;
margin-bottom: 20px;
margin-top: 20px;
}

.zeroui-model-badge-img img {
width: 100%;
max-height: 100%;
}

.zeroui-model-badge-info {
margin-bottom: 20px;
color: #FFF;
text-align: center;
}

.zeroui-model-badge-name {
font-size: 26px;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.zeroui-model-badge-condition {
font-size: 16px;
}

.zeroui-model-badge-text {
font-size: 16px;
}

/* 徽章模态框样式 */
.badge-rarity-label {
font-size: 12px;
margin-left: 10px;
padding: 1px 6px;
border-radius: 10px;
display: inline-block;
vertical-align: middle;
}
.badge-rarity-label.rarity-1 { background-color: #f0f0f0; color: #6c757d; }
.badge-rarity-label.rarity-2 { background-color: #e8f5e9; color: #28a745; }
.badge-rarity-label.rarity-3 { background-color: #e0f7fa; color: #20c997; }
.badge-rarity-label.rarity-4 { background-color: #e3f2fd; color: #0d6efd; }
.badge-rarity-label.rarity-5 { background-color: #fff3e0; color: #fd7e14; font-weight: bold; }


.disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* 徽章卡片的鼠标样式 */
.z-u-badge-get-item {
cursor: pointer;
transition: transform 0.2s;
}

.z-u-badge-get-item:hover {
transform: translateY(-3px);
}

/* 为条件添加图标 */
.zeroui-model-badge-condition:before {
content: "🎯 ";
}

/* 会员页面开始 2024/06/11 */

.z-vip-bg {
  position: absolute;
  width: 100vw;
  height: 100%;
}

.z-vip-bg > div {
  position: absolute;
  opacity: 0.5;
}

.z-vip-polygon-1 {
  top: 220px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 714px;
  height: 390px;
  background: linear-gradient(#ffbb55, #fde799);
  -webkit-clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.z-vip-polygon-2 {
  bottom: 0px;
  left: 30%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: linear-gradient(-36deg, #6850e9, #9980f9);
  -webkit-clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.z-vip-polygon-3 {
  bottom: 0px;
  left: 70%;
  transform: translate(-50%, 0);
  width: 1000px;
  height: 450px;
  background: #50e964;
  -webkit-clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}

.z-vip-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-backdrop-filter: blur(150px);
  backdrop-filter: blur(150px);
  z-index: 1;
}

.zero-vip-text-body {
  text-align: center;
  font-weight: 600;
  color: #222226;
  margin-bottom: 40px;
}

.zero-vip-text-title {
  font-size: 30px;
  margin-bottom: 10px;
}

.zero-vip-text-sub {
  font-size: 18px;
  color: #8d8d8d;
  font-weight: 500;
}


.z-vip-my-grade-bg {
      background: linear-gradient(90deg, rgb(238 236 243) 20%, rgb(232 230 239) 40%, rgb(204 203 221) 100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }

    .z-vip-my-grade-bg.jinse-bg {
      background: linear-gradient(90deg, #ffebc5 20%, #f3e5cb 40%, #ffd48b 100%);
    }

    .z-vip-my-grade-bg::before {
      content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/static/images/vip/vip-bg/mb.png);
        background-size: 60% 60%;
    }

    .z-vip-grade {
      position: relative;
      background: unset;
      height: 200px;
      border-radius: 15px;
      border: 1px solid #e5e5e5;
    }

    .z-vip-my-grade {
      width: 160px;
      height: 145px;
      position: absolute;
      right: 30px;
      top: -50px;
    }

    .z-vip-my-grade img {
      width: 100%;
      height: 100%;
    }

    .z-vip-my-grade-vip {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 15px 0px 15px 0px;
      padding: 5px;
      background: #00000015;
      color: #222226;
      font-size: 12px;
    }

    .z-vip-my-grade-name {
      font-size: 26px;
      font-weight: 500;
      margin-top: 20px;
      font-family: auto;
      color: #222226;
    }

    .z-vip-my-grade-name.no-activate {
      margin-top: 15px;
      margin-bottom: 10px;
    }

    .z-vip-my-grade-progress {
      height: 12px;
      margin-bottom: 10px;
      margin-top: 15px;
    }

    .z-vip-my-grade-bar {
      background: linear-gradient(46deg, rgba(163, 160, 191, 0) -40%, rgb(163 160 191) 100%) !important;
    }

    .z-vip-my-grade-content {
      color: #8d8d8d;
      font-size: 14px;
    }

    .z-vip-my-grade-content-span {
      color: #8d8d8d;
      font-size: 14px;
    }

    .z-vip-my-grade-list {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .z-vip-my-grade-list ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 0;
    }

    .z-vip-my-grade-list ul li {
      font-size: 12px;
      color: #636363;
      margin-right: 10px;
    }

    .z-vip-grade-r-btn.jinse-bg {
      background-image: linear-gradient(90deg, #7b7b7b, #272727 100%);
      color: #e9be75;
    }
    
    .z-vip-my-grade-bg.zuanshi-bg {
      background-image: linear-gradient(90deg, rgb(238 202 255) 20%, rgb(245 222 255) 40%, rgba(207, 165, 227, 1) 100%);
    }

    .z-vip-grade-r-btn.zuanshi-bg {
      background-image: linear-gradient(90deg, #7b7b7b, #272727 100%);
      color: #e9be75;
    }

    .z-vip-my-grade-more {
      font-size: 14px;
      margin-top: 10px;
      color: #222226;
    }

    .z-vip-user-grade {
        box-shadow: 0 2px 8px 0 rgba(124, 29, 29, .1);
        background: #fff;
        opacity: 1;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        border-radius: 14px;
        position: absolute;
        cursor: pointer;
      }

      

      .z-vip-grade-list {
        background: linear-gradient(270deg, rgb(238 236 243) 20%, rgb(232 230 239) 40%, rgb(204 203 221) 100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .z-vip-grade-list::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/static/images/vip/vip-bg/mb.png);
        background-size: 50% 50%;
      }

      .z-vip-user-grade-img {
        width: 30px;
        height: 30px;
        top: -10px;
        position: absolute;
        margin-left: -7px;
      }

      .z-vip-user-grade-img img {
        width: 100%;
        height: 100%;
      }

      .z-vip-user-grade-name {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px;
        color: #222226;
        white-space: nowrap;
        font-family: fantasy;
        letter-spacing: 2px;
      }

      .z-vip-user-grade.z-vip-user-grade-1 {
        left: 0;
      }

      .z-vip-user-grade.z-vip-user-grade-2 {
        left: 16.66%;
      }

      .z-vip-user-grade.z-vip-user-grade-3 {
        left: 33.32%;
      }

      .z-vip-user-grade.z-vip-user-grade-4 {
        left: 49.98%;
      }

      .z-vip-user-grade.z-vip-user-grade-5 {
        left: 66.64%;
      }

      .z-vip-user-grade.z-vip-user-grade-6 {
        left: 83.3%;
      }

      .z-vip-user-grade.z-vip-user-grade-7 {
        left: 100%;
      }

      .z-vip-grade-right {
        height: 200px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid #e5e5e5;
      }

      .z-vip-grade-r-info {
        flex-direction: column;
        color: #222226;
      }

      .z-vip-grade-r-name {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .z-vip-grade-r-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 8px 30px;
        font-size: 14px;
        background-image: linear-gradient(270deg,#e9be75,#f6dcaa);
        border-radius: 50px;
      }

      .z-vip-grade-r-box {
        margin-right: 15px;
        margin-left: 15px;
      }

      .z-vip-grade-r-progress {
        height: 12px;
        margin-bottom: 15px;
      }

      .z-vip-grade-r-bar {
        background: linear-gradient(46deg, rgb(255 255 255 / 0%) -70%, rgb(121 117 165) 100%) !important;
      }

      .z-vip-package-body {
      background: #fffffff0;
      border-radius: 15px;
    }

    .z-vip-packagg-box {
      flex-direction: column;
    }

    .z-vip-package-title {
      font-size: 20px;
      margin-bottom: 5px;
      color: #222226;
    }

    .z-vip-package-subtitle {
      color: #aaaaaa;
      font-size: 15px;
      margin-bottom: 10px;
    }
    
    .z-vip-package-price {
      display: flex;
      align-items: baseline;
      color: #5D87FF;
      margin-bottom: 20px;
    }

    .z-vip-package-price .vip-rmb {
      font-size: 16px;
      margin-right: 5px;
    }

    .z-vip-package-price .vip-num {
      font-size: 26px;
    }

    .z-vip-package-price .vip-yuan {
      margin-left: 5px;
      color: #9499a0;
    }

    .z-vip-package-price .vip-time {
      color: #9499a0;
    }

    .z-vip-package-button {
      margin-bottom: 20px;
    }

    .z-vip-package-button button {
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      width: 200px;
      position: relative;
      border-radius: 50px;
      background-color: #e9efff;
      color: #5D87FF;
      font-size: 14px;
    }

    .z-vip-package-purview {
      width: 100%;
      padding: 0px 25px;
    }

    .z-vip-package-purview ul {

    }

    .z-vip-package-purview ul li {
      display: flex;
      align-items: center;
      margin: 7px 0px;
    }

    .z-vip-package-purview ul li i {
      -webkit-text-stroke-width: unset;
      margin-right: 5px;
      font-size: 18px;
      color: #5D87FF;
    }

    .zeroui-vip-qa {
      justify-content: center;
    }

    .z-vip-qa {

    }

    .z-vip-qa-item {
      color: #222226;
      background-color: #FFFFFF;
      margin-bottom: 15px;
      border-radius: 10px;
      overflow: hidden;
    }

    .z-vip-qa-button {
      font-size: 16px;
      color: #222226;
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 20px 40px;
      color: #222226;
      background-color: #ffffff;
      border: 0;
      overflow-anchor: none;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    }

    .z-vip-qa-button::after {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      margin-left: auto;
      content: "";
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230000008a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 1.25rem;
      transition: transform 0.2s ease-in-out;
    }

    .z-vip-qa-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230000008a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      transform: rotate(-180deg);
    }

    .z-vip-qa-header {
      margin-bottom: 0;
    }

    .z-vip-qa-body {
      padding: 10px 20px;
    }

    /* 我的推广页面 */

    .z-u-promotion-data {
          display: flex;
          align-items: center;
          background: #f8f8f8;
          border-radius: 5px;
          padding: 25px;
          margin-bottom: 20px;
        }

        .z-u-promotion-left {
          flex: 1 1;
        }

        .z-u-promotion-l-box {
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          align-items: center;
        }

        .z-u-promotion-l-name {
          color: #aaaaaa;
          margin-bottom: 5px;
          font-size: 14px;
        }

        .z-u-promotion-l-num {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 10px;
          color: #222226;
        }

        .z-u-promotion-l-num span {
          font-size: 22px;
        }

        .z-u-promotion-l-text {
          font-size: 14px;
          color: #aaaaaa;
          margin-bottom: 10px;
        }

        .z-u-promotion-right {
          flex: 5 2;
        }

        .z-u-promotion-r-body {
          display: flex;
          align-items: center;
          margin-bottom: 0;
          width: 100%;
          flex-wrap: wrap;
        }

        .z-u-promotion-r-item {
          width: 25%;
          text-align: end;
          margin-bottom: 20px;
        }
        
        .z-u-promotion-r-item:nth-child(5),
        .z-u-promotion-r-item:nth-child(6),
        .z-u-promotion-r-item:nth-child(7),
        .z-u-promotion-r-item:nth-child(8) {
          margin-bottom: 0;
        }

        .z-u-promotion-r-name {
          font-size: 14px;
          color: #aaaaaa;
          margin-bottom: 2px;
        }

        .z-u-promotion-r-num {
          font-size: 18px;
          font-weight: 600;
          color: #222226;
        }

        .z-u-promotion-r-num span {
          font-size: 22px;
        }

        .z-u-promotion-l-button {
          font-size: 14px;
          padding: 5px 10px;
          width: 80px;
        }

        .z-u-promotion-footer {
            display: flex;
            align-items: center;
            gap: 80px;
          }

          .z-u-promotion-footer-item {
            display: flex;
            flex-direction: column;
          }

          .z-u-promotion-footer-ico {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
          }

          .z-u-promotion-footer-ico.ico-1 {
            background: #ff5d72;
          }

          .z-u-promotion-footer-name {
            font-size: 14px;
            color: #aaaaaa;
          }

          .z-u-promotion-footer-num {
            font-size: 16px;
            color: #222226;
            margin-top: 5px;
          }

          .z-u-promotion-footer-num span {
            font-size: 20px;
          }

          .z-u-promotion-footer-ico.ico-2 {
            background: #14c4bf !important;
          }

          .z-u-promotion-footer-ico.ico-3 {
            background: #5D87FF !important;
          }

          .z-u-promotion-detail {
          margin-top: 20px;
        }

        .z-u-promotion-text {
          font-size: 16px;
          color: #222226;
          margin-right: 15px;
        }

        .z-u-promotion-link {
          background: #3858f61a;
          color: #5D87FF;
          font-size: 14px;
          padding: 8px 8px 8px 15px;
          border-radius: 5px;
        }

        .z-u-promotion-link-text {
          margin-right: 10px;
          letter-spacing: 1.2;
        }

        .z-u-promotion-link-cpoy {
          background: #5D87FF;
          color: #FFF;
          padding: 2px 4px;
          border-radius: 3px;
          font-size: 12px;
          cursor: pointer;
        }

        .z-u-promotion-link-cpoy i {
          margin-right: 2px;
          -webkit-text-stroke-width:unset;
        }

        .zeroui-table table {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          color: #222226;
        }

        .zeroui-table table td {
          border: 1px solid #f7f7f7;
        }

        .zeroui-table thead {
          border-top: 1px solid #f7f7f7;
        }

        .zeroui-table tr {

        }

        .zeroui-table tr td {
          text-align: center;
          padding: 10px;
          font-size: 14px;
          word-wrap: break-word;
          word-break: break-all;
        }

        .zeroui-thead tr td {
          font-weight: 600;
        }

        .zeroui-tbody tr td i {
          -webkit-text-stroke-width:unset;
          font-size: 20px;
        }

        .zeroui-tbody tr td i.ti-circle-check {
          color: #13deb9;
        }

        .zeroui-tbody tr td i.ti-circle-x {
          color: #fa896b;
        }

        /* 会员模态框开始 2024/06/17 */

            /* 模态框的CSS样式 */
.zeroui-vip-modal {
display: none; /* 默认不显示 */
position: fixed; /* 固定定位 */
z-index: 999; /* 确保模态框在最上层 */
left: 0;
top: 0;
width: 100%; /* 宽度100% */
height: 100%; /* 高度100% */
overflow: auto; /* 允许滚动 */
background-color: rgb(0,0,0); /* 背景色 */
background-color: rgba(0,0,0,0.4); /* 背景色带透明度 */
justify-content: center;
align-items: center;
}

.zeroui-modal-vip {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}

.zeroui-modal-vip-content {
background-color: #fefefe;
max-width: 720px;
width: 100%;
padding: 20px;
border: 1px solid #888;
position: relative;
border-radius: 12px;
}

.zeroui-modal-close {
color: #aaa;
float: left;
font-size: 32px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: -50px;
background: #FFF;
padding: 10px;
border-radius: 50%;
width: 40px;
height: 40px;
}

.zeroui-modal-close:hover,
.zeroui-modal-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.zeroui-modal-vip-header {
margin-bottom: 20px;
}

.zeroui-modal-vip-user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
overflow: hidden;
flex-shrink: 0;
}

.zeroui-modal-vip-user-avatar img {
width: 100%;
height: 100%;
}

.zeroui-modal-vip-user-name {
font-size: 16px;
color: #222226;
}

.zeroui-modal-vip-user-vip {
font-size: 14px;
color: #aaa;
}

.zeroui-modal-vip-user-btn {
gap: 10px;
}

.zeroui-modal-vip-user-btn button {
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 10px;
border-radius: 5px;
}

.zeroui-modal-vip-tab {
position: relative;
}

.zeroui-modal-vip-tab-list {
width: 100%;
background: #f6f7f9 !important;
margin-bottom: 20px;
}

.zeroui-modal-vip-tab-item {
width: 25%;
}

.zeroui-modal-vip-tab-btn {
color: #222226 !important;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px !important;
height: 50px;
border-radius: 0 !important;
}

.zeroui-modal-vip-tab-btn.active {
background: #e3e7ff !important;
color: #3858f6 !important;
}

.zeroui-vip-left {
    background: #f8f8f8;
    width: 188px;
    padding: 12px 16px 0;
    border-radius: 8px;
    margin-right: 30px;
    flex-shrink: 0;
  }

  @media (max-width:650px ) {
    .zeroui-vip-left {
      display: none;
    }
  }

  .zeroui-vip-left-vipname {
    border-bottom: 1px dashed rgba(3, 9, 17, .12);
    padding: 11px 0;
  }

  .zeroui-vip-left-vipname h6 {
    color: #222226;
    font-size: 16px;
    margin-bottom: 0;
  }

  .zeroui-vip-left-list {
    margin-top: 11px;
  }

  .zeroui-vip-left-list li {
    color: #9499a0;
    font-size: 13px;
    padding-bottom: 5px;
  }

  .zero-vip-right-box {
    overflow: hidden;
    flex: 1 1 0%;
  }

  .zeroui-vip-right-price-item {
    position: relative;
    cursor: pointer;
    padding: 24px 0 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid transparent;
    margin-right: 16px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
    font-size: 14px;
    width: 100px;
  }

  .zeroui-vip-right-price-item.active {
    color: #3858f6 !important;
    border-color: #3858f6 !important;
  }

  .zeroui-vip-right-price-list {
    display: flex;
    margin-bottom: 0;
  }

  .zeroui-vip-right-price-item .zeroui-price-money {
    margin: 8px 0px 4px;
    font-weight: bold;
    font-size: 18px;
    color: #3858f6;
    user-select: none;
  }

  .zeroui-vip-right-price-item .zeroui-price-num {
    color: #9499a0;
    text-decoration: line-through;
  }

  .zeroui-vip-right-price-item .zeroui-price-discount {
    border-radius: 8px 0 8px 0;
    left: -1px;
    padding: 0 8px;
    position: absolute;
    top: -1px;
    background: #3858f6;
    color: #ffffff;
    font-size: 12px;
  }

  .zeroui-vip-right-box {
    margin-bottom: 10px;
  }

  .zeroui-vip-right {
              width: 100%;
            }

            .zeroui-vip-right-pay {
              margin-bottom: 20px;
            }

            .zeroui-vip-right-pay-list {
              display: flex;
              flex-wrap: nowrap;
              gap: 20px;
            }

            .zeroui-vip-right-pay-item {
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid rgba(130, 130, 130, 0.15);
              border-radius: 4px;
              text-align: center;
              cursor: pointer;
              width: calc(33.333% - 16px);
              padding: 10px 0;
            }

            .zeroui-vip-right-pay-item.active {
              border-color: #3858f6 !important;
              color: #3858f6 !important;
            }

            .zeroui-vip-right-pay-item img {
              margin-right: 10px;
              height: 25px;
            }

            .zeroui-vip-right-pay-title {
              font-size: 16px;
              margin-bottom: 10px;
            }

            .zeroui-vip-right-button {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            
            .zeroui-vip-right-button button {
              display: flex;
              align-items: center;
              justify-content: center;
              border: 0;
              padding: 8px 30px;
              border-radius: 50px;
              background: #3858f6;
              color: #FFF;
              font-size: 16px;
            }

            .zeroui-vip-right-button-text {
              font-size: 14px;
              color: #c7c7c7;
            }

/* 移动端适配 */
@media (max-width: 768px) {
.zeroui-mobile-nofooter .py-5 {
padding-top: 0 !important;
}

.zeroui-mobile-nofooter .z-user-banner {
height: 120px;
}

.zeroui-mobile-nofooter .zero-public-user .zero-public-user-header {
padding-right: 0 !important;
padding-left: 0 !important;
}

.zero-public-user-header > .card-body {
margin-bottom: 0px;
box-shadow: unset;
border-bottom: 1px solid #ededed;
border-radius: 0px;
}

.zeroui-mobile-nofooter .z-public-user-info {
padding: 15px 20px 0px 20px;
top: -30px;
margin-bottom: 5px;
}

.zeroui-mobile-nofooter .z-public-user-avatar {
width: 60px;
height: 60px;
margin-bottom: 10px;
}

.zeroui-mobile-nofooter .z-public-user-info-body {
margin-left: 0px;
}

.zeroui-mobile-nofooter .z-public-user-info-name {
font-size: 18px;
font-weight: 600;
}

.zeroui-mobile-nofooter .z-public-user-info .z-public-user-info-left {
margin-bottom: 0px;
flex-direction: column;
}

.zeroui-mobile-nofooter .z-public-user-info-right {
position: absolute;
right: 20px;
gap: 10px;
top: 30px;
}

.z-public-user-info-right .z-u-btn {
padding: 4px 12px;
font-size: 14px;
border-radius: 50px;
}

.z-public-user-info-right .z-u-btn i {
-webkit-text-stroke-width: unset;
margin-right: 5px;
}

.z-public-user-info-box {
margin-bottom: 5px;
}

.z-public-user-info-grade {
width: 30px;
}

.z-public-user-info-meta {
margin-bottom: 5px;
}

.z-user-right .z-u-box .z-u-num {
font-size: 16px;
}

.z-user-right .z-u-bar {
margin: 0 10px;
}

.z-public-user-info-intro {
padding: 0px 20px 0px 20px;
}

.zero-public-user-body > .col-xl-9 > .card-body {
padding: 20px;
box-shadow: unset;
border-radius: unset;
}

.z-user-tab {
margin-bottom: 10px;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}

.z-user-tab::before {
display: none;
}

.z-u-active::before {
display: none;
}

.z-user-tab .z-u-tab-body {
margin-bottom: 5px;
gap: 20px;
}

.z-u-tab-body .z-u-tab-item {
flex: 0 0 auto;
}

.z-u-circle-list>.row {
row-gap: 15px;
}

.zero-public-user-body > .col-xl-9 {
padding: 0px;
}

.z-u-active a {
color: #5D87FF !important;
}

.z-u-post-item {
padding-bottom: 10px
}

.z-u-post-title {
font-size: 16px;
white-space: normal;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
margin-bottom: 10px;
color: var(--zeroacticle-default-color);
}

.z-u-post-content {
font-size: 14px;
margin-bottom: 10px;
}

.z-u-post-footer ul {
gap: 10px;
justify-content: space-between;
}

.z-u-post-footer ul li {
font-size: 12px;
}

.z-u-post-footer ul li:nth-child(1) {
display: none;
}

.z-u-post-footer ul li::after {
display: none;
}

.zero-public-user-body-right {
display: none;
}

.zero-edit-user .z-u-edit-right {

}

.z-u-edit-right-user-header {
padding: 15px 15px 0px 15px;
}

.z-u-edit-right-user-avatar::after {
font-size: 12px;
}

.z-u-edit-right-user-avatar {
flex: 0 0 auto;
width: 60px;
height: 60px;
}

.z-u-edit-right-user-info {
margin-left: 10px;
}

.z-u-edit-right-user-info-box {
margin-bottom: 5px;
}

.z-u-edit-right-user-info-name {
font-size: 18px;
font-weight: 600;
}

.c-user-grade {
margin-right: 2px;
margin-left: 2px;
}

.c-user-grade img {
width: 30px;
}

.z-u-groupbtn {
display: none !important;
}

.z-u-edit-right-user-info-intro {
padding: 0px 15px 0px 15px;
}

.z-u-edit-right-user-info-body {
margin-bottom: 5px;
}

.z-u-edit-right-user-info-bd {
font-size: 12px !important;
}

.z-u-edit-right-user-info-bd-box {
margin-right: 5px;
}

.z-u-edit-right-user-info-bd-ico-name {
display: none;
}

.zerov4-user-home .card-body,
.zero-edit-user .card-body {
margin-bottom: 0px;
border-radius: unset;
padding: 15px;
}

.z-u-edit-box .z-u-edit-body {
flex-direction: row !important;
width: 100%;
flex-wrap: nowrap;
justify-content: space-between;
}

.z-u-edit-item .d-flex {
flex-direction: column;
width: 100%;
align-items: center;
}

.z-u-edit-title {
margin-left: unset !important;
}

.z-u-edit-title span {
font-size: 10px;
font-weight: 500;
}

.z-u-edit-title p {
display: none;
}

.z-u-edit-item {
padding: 0px !important;
}

.z-u-edit-ico {
width: 30px;
height: 20px;
background-color: unset !important;
}

.z-u-edit-item.active {
background-color: unset !important;
}

.z-u-edit-item.active .z-u-edit-ico i {
color: #5D87FF !important;
}

.z-u-edit-ico i {
font-size: 22px;
}

.z-u-edit-left-tab {
position: fixed;
bottom: 0px;
width: 100%;
z-index: 1000;
padding: 10px;
box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
}

.z-u-edit-left-function-list {
grid-gap: 10px 0px;
}

.zerov4-user-home .z-u-edit-left-function-item {
width: 25% !important;
}

.z-u-edit-right-account-box {
margin: 0 !important;
}

.z-u-edit-right-account-box .col-xl-6 {
width: 50% !important;
padding-right: 0px !important;
padding-left: 0px !important;
}

.z-u-index-box {
flex-direction: column;
margin-bottom: 5px;
}

.z-u-edit-right-account-title {
margin-bottom: 5px;
font-size: 16px;
}

.z-u-edit-right-account-button1 {
justify-content: flex-start;
}

.z-u-edit-right-account-button1 button {
border-radius: 50px;
padding: 1px 8px;
font-size: 12px;
}

.z-u-edit-right-account-num i {
margin-right: 2px;
}

.z-u-edit-right-account-num {
margin-bottom: 10px;
}

.z-u-edit-right-account-num span {
font-size: 22px;
}

.z-u-edit-right-account-button button {
font-size: 12px;
padding: 4px 8px;
border-radius: 2px;
}

/* 徽章 */
.z-u-badge-get-list {
grid-gap: 20px 0px;
}

.z-u-badge-get-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.z-u-badge-get-img {
width: 90px;
height: 90px;
}

/* 我的订单 */
.z-u-select select {
padding: 0px 20px !important;
}

.z-u-setting-shop-item .z-u-setting-shop-item-header {
flex-direction: column;
align-items: unset !important;
}

.z-u-setting-shop-item-num {
display: flex;
justify-content: space-between;
}

.z-u-setting-shop-product-name h6 {
font-size: 15px;
}

.z-u-setting-shop-item-name {
margin-bottom: 5px;
}

.z-u-setting-shop-item-footer {
flex-direction: column;
align-items: unset !important;
}

.z-u-setting-shop-product-amount {
margin-bottom: 5px;
}

.z-u-setting-shop-product-money {
font-size: 18px;
}

.z-u-setting-shop-item-footer .z-u-setting-shop-item-num {
justify-content: flex-end;
margin-bottom: 10px;
}

.z-u-setting-shop-product-group {
justify-content: flex-end;
gap: 10px;
}

/* 推广 */
.z-u-promotion-data {
flex-direction: column;
padding: 15px;
}

.z-u-promotion-left {
margin-bottom: 10px;
}

.z-u-promotion-l-name {
margin-bottom: 1px;
}

.z-u-promotion-l-num {
margin-bottom: 1px;
}

.z-u-promotion-l-text {
margin-bottom: 5px;
}

.z-u-promotion-r-item {
text-align: center;
margin-bottom: 15px;
}

.z-u-promotion-r-num span {
font-size: 18px;
}

.z-u-promotion-footer {
justify-content: space-between;
width: 100%;
gap: 0px;
}

.z-u-promotion-footer-name {
font-size: 12px;
}

.z-u-promotion-footer-num {
font-size: 14px;
}

.z-u-promotion-user-item {
padding: 15px 15px 5px 15px !important;
}

.z-u-promotion-user-name {
margin-bottom: 0px;
}

/* 我的等级 */
.z-u-level-level-todo-item {
flex-direction: column;
}

.z-u-level-level-todo-button {
margin-top: 10px;
}

.z-u-level-level-todo-box {
gap: unset !important;
}

.z-u-level-level-todo-item {
width: 50% !important;
border-radius: unset !important;
position: relative;
align-items: unset !important;
}

.z-u-level-level-todo-icon {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.2;
background-color: unset !important;
width: unset !important;
height: unset !important;
padding: 0px !important;
border-radius: unset !important;
font-size: 35px;
}

.z-u-level-level-todo-button button {
padding: 2px 10px;
font-size: 12px;
border-radius: 50px;
}

.z-u-level-level-body-box {
justify-content: space-between;
flex-wrap: wrap;
}

.z-u-level-level-item {
margin: 5px;
}

.z-u-level-level-icon {
font-size: 22px;
width: 40px;
height: 40px;
}

/* 账号安全 */
.z-u-secure-header {
padding: 0px !important;
}

.z-u-secure-login-box {
width: 33.333333%;
padding: 5px;
}

.z-u-secure-login-icon {
width: 40px;
height: 40px;
}
}