.home {
  position: relative;
  height: inherit;

  &-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;

    &.hide {
      animation: loading-leave 1s ease-in forwards;
    }
    &.close {
      display: none;
      top: -200%;
      left: -200%;
      width: 0;
      height: 0;
      opacity: 0;
      z-index: -1;
    }
  }
  &__cloud {
    position: absolute;
    left: -100%;
    bottom: 0;
    height: 148px;
    animation: cloudMove linear 8s infinite;

    &.cloud2 {
      animation-delay: 4s;
    }
  }
  &-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #99b6b4 0%, #fffaea 100%);
    z-index: 1;
  }
  &__menu-btn {
    position: fixed;
    top: 30px;
    left: 27px;
    width: 80px;
    height: 76px;
    background: url("../../images/icon_menu@2x-min.png") no-repeat center /
      cover;
    z-index: 9;
  }
  &__bg {
    position: relative;
    width: 100%;
    z-index: -1;
  }
  &__btm-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  &-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 2;

    &__btn {
      position: absolute;
      left: 50%;
      bottom: 180px;
      width: 460px;
      text-align: center;
      font-size: 31px;
      color: #589498;
      font-family: "Source Han Serif CN-Bold";
      transform: translateX(-50%);
      z-index: 9;

      .flashing {
        animation: flashing linear 2s infinite;
      }
      .reflect {
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        transform: rotatex(180deg) translatey(15px);
        transform-origin: 50% 100%;
        mask: linear-gradient(
          transparent 0%,
          transparent 20%,
          rgba(0, 0, 0, 0.5) 100%
        );
      }
      &::before {
        content: "";
        position: absolute;
        top: -38px;
        left: 50%;
        width: 664px;
        height: 20px;
        transform: translateX(-50%);
        background: url("../../images/line@2x-min.png") no-repeat center /
          contain;
      }
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -76px;
        transform: translateX(-50%);
        width: 56px;
        height: 56px;
        background: url("../../images/img_slide@2x.png") no-repeat center /
          contain;
      }
    }
  }

  &-toggle {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 150px;
    padding: 0 60px;

    &__icon {
      width: 60px;
      height: 60px;
    }
    &-inner {
      flex: 1;
      position: relative;
    }
    &-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #589498;
      font-size: 24px;
      letter-spacing: 7px;
      background: url("../../images/img_active_title@2x-min.png") no-repeat
        center bottom / contain;

      &__title {
        font-size: 46px;
        font-family: "Source Han Serif CN Heavy";
      }
    }
    &__detail {
      position: absolute;
      left: 50%;
      bottom: -108px;
      width: 296px;
      height: 88px;
      background: url("../../images/btn_more@2x-min.png") no-repeat center /
        contain;
      transform: translateX(-50%);
    }
  }

  &__point {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 70px;
    background: url("../../images/icon_address_active@2x-min.png") no-repeat
      center / contain;
    will-change: top left;
    transition: all linear 0.2s;
    z-index: 2;

    &-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 70px;

      // &.red::after {
      //   background: #c59797;
      // }
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 10px;
        height: 5px;
        transform: translateX(-50%);
        background: #97c59b;
        border-radius: 25%;
        overflow: hidden;
      }
    }
  }
}

.home2 {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/images/bg_loading%402x-min.png")
    no-repeat center / cover;

  &__btn {
    position: absolute;
    left: 50%;
    bottom: 150px;
    width: 496px;
    transform: translateX(-50%);
  }
}

.ld-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255);
  transition: opacity ease-in 1s;
  will-change: opacity;
  z-index: 999;

  &__icon {
    animation: loading-rotate 2s linear infinite;
  }
  &.hide {
    animation: loading-leave 1s ease-in forwards;
  }
}

@keyframes loading-leave {
  100% {
    opacity: 0;
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flashing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes cloudMove {
  100% {
    left: 100%;
  }
}
