.anim-opacity {
  animation: opacity 1s 1;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
}
.home {
  height: 100%;
  /* #ifdef MP-ALIPAY */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  /* #endif */
  // height: 100vh;
  &-header {
    display: flex;
    align-items: center;
    height: 92rpx;
    width: 100%;
    padding: 0 $space-md * 2;
    background: $white;

    &-search {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 $space-md * 2;
      width: 100%;
      height: 60rpx;
      // border: $border-sm solid $font-color-search;
      border-radius: $border-radius-1;
      background-color: $bg-color-g1;
      font-size: $font-base;
      text-align: center;
      color: $text-color-n1;

      .iconfont {
        margin-right: $margin-base;
        height: 33rpx;
        font-size: $font-lg;
        // color: $border-color-search;
      }
    }
  }

  &-container {
    height: calc(100% - 92rpx);
    // height: 500rpx;
    &-body {
      padding: 0 $space-md * 2;
    }
    box-sizing: border-box;
  }

  &-banner {
    box-sizing: border-box;
    height: 218rpx;
    padding: 0 30rpx;
    background-image: linear-gradient(#fff, #f7f8fa);
    position: relative;
    &-swiper {
      width: 100%;
      height: 100%;
      position: relative;
      .Hb-swiper-item {
        .Hbs-item-img {
          width: 100%;
          height: 100%;
          border-radius: $border-radius-base;
        }
      }
    }

    &-dots {
      display: flex;
      position: absolute;
      bottom: 16rpx;
      left: 50%;
      transform: translateX(-50%);

      .Hb-dots-item {
        width: 12rpx;
        height: 12rpx;
        border-radius: $uni-border-radius-circle;
        background: rgba(255, 255, 255, 0.5);
        margin-right: $margin-md;
      }

      .Hb-dots-item_selected {
        height: 12rpx;
        width: 20rpx;
        border-radius: $border-radius-sm;
        background: $white;
      }
    }
  }

  &-nav {
    margin: $padding-md 0;
    padding: $padding-md 0;
    background: $white;
    overflow: hidden;
    border-radius: $uni-border-radius-lg;

    &-body {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      align-content: flex-start;
      margin-bottom: -$padding-md * 2;

      .Hn-body-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: $padding-lg;
        width: 25%;
        text-align: center;
        font-size: $font-sm;
        line-height: $line-height-md;
        color: $text-color-n3;

        image {
          margin-bottom: $margin-sm;
          width: 96rpx;
          height: 96rpx;
          border-radius: $uni-border-radius-circle;
        }
      }
    }
  }

  &-welfare {
    font-size: 0;
    display: flex;
    align-content: flex-start;
    margin: 20rpx 0;

    image {
      height: 260rpx;
      flex: 1;
    }
  }

  &-ads {
    margin: $padding-md 0;
    height: 180rpx;

    image {
      border-radius: $uni-border-radius-lg;
      width: 100%;
      height: 180rpx;
    }
  }

  &-find {
    display: flex;
    justify-content: space-between;

    image {
      width: 339rpx;
      height: 290rpx;
    }
  }
}
