// 声明字体
@font-face {
  font-family: 'fz';
  src: url('https://factory-walk-uat.feihe.com/farqbxzczytcami/images/fz.ttf')
    format('truetype');
}
@font-face {
  font-family: 'fz-bold';
  src: url('https://factory-walk-uat.feihe.com/farqbxzczytcami/images/fz-bold.ttf')
    format('truetype');
}

.blur-bg {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ) !important;
  box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.3);
  border-radius: 26rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px) !important;
}
.fz {
  font-family: 'fz';
}
.fz-bold {
  font-family: 'fz-bold';
}

.home {
  width: 100%;
  height: 100vh;
  .scroll {
    width: 100%;
    height: 100%;
  }
  .scroll-item {
    width: 100%;
    flex-shrink: 0;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.home-page {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: top;
  overflow: hidden;

  .logo {
    margin: 37rpx auto;
    text-align: center;
    image {
      width: 320rpx;
      height: 37rpx;
    }
  }
}
.footer {
  position: fixed;
  bottom: 130rpx;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  left: 0;
  display: flex;
  justify-content: space-around;
  font-size: 34rpx;
  font-family: 'fz';
  color: #fff;
  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 200rpx;
    overflow: hidden;
    image {
      width: 54rpx;
      height: 54rpx;
    }
  }
}
.footer-down {
  position: fixed;
  bottom: 30rpx;
  left: 0;
  width: 100%;
  height: 80rpx;
  text-align: center;
  image {
    width: 60rpx;
    height: 60rpx;
  }
}
.title {
  font-size: 86rpx;
  margin-top: 153rpx;
  font-family: 'fz-bold';
}
.sub-title {
  font-size: 37rpx;
  margin-top: 44rpx;
  font-family: 'fz-bold';
}
.desc {
  font-size: 22rpx;
  margin-top: 24rpx;
  line-height: 37rpx;
  text-align: left;
  font-family: 'fz';
}

.page1,
.page2,
.page3,
.page4 {
  position: relative;
  color: #fff;
  padding: 0 37rpx;
  box-sizing: border-box;
  text-align: center;
}
.page1 {
  padding: 0 108rpx;
}
.page2 {
  padding: 0;
  .title {
    margin-top: 54rpx;
  }
  .desc {
    text-align: center;
    width: 400rpx;
    margin: 40rpx auto;
  }
  .swiper {
    width: 100%;
    height: 450rpx;
    position: relative;
    overflow: hidden;
    .swiper-item {
      height: 450rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-item-box {
      width: 490rpx;
      height: 365rpx;
      position: relative;
      overflow: hidden;
      padding: 18rpx;
      box-sizing: border-box;
      z-index: 1000;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.3) 100%
      ) !important;
      box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.3);
      border-radius: 26rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(15px) !important;
      -webkit-backdrop-filter: blur(15px) !important;
    }
    .swiper-item-active {
      width: 597rpx;
      height: 448rpx;
    }
    video {
      width: 100%;
      height: 100%;
      transition: all 0.6s;
      z-index: 1000;
    }
  }
}

.page4 {
  .title {
    margin-top: 74rpx;
  }
  .card {
    margin-top: 40rpx;
    padding: 39rpx 50rpx 39rpx 75rpx;
    box-sizing: border-box;
    font-size: 21rpx;
    font-family: 'fz';
    color: #fff;
    text-align: left;
    .card-item {
      margin-bottom: 20rpx;
      position: relative;
      line-height: 30rpx;
    }
    .card-item::before {
      content: '';
      margin-right: 10rpx;
      position: absolute;
      width: 7rpx;
      height: 7rpx;
      background: #8bd278;
      border-radius: 50%;
      left: -20rpx;
      top: 10rpx;
    }
    .card-item:last-child {
      margin-bottom: 0;
    }
  }
}
