.container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.container::-webkit-scrollbar {
  display: none;
}
/******************** s1 ********************/
.s1 {
  color: #fff;
  width: 100vw;
  height: 50vw;
  background-image: url("../imgs/app/app-banner.png");
  background-size: cover;
  background-position: center bottom;
  overflow: hidden;
  position: relative;
}
/* 锚点导航 */
.anchor-wrap {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 10vh;
  left: 2vw;
  width: 11.625rem;
  z-index: 99;
  height: 9.375rem;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 4px 10px 0px rgba(89, 166, 209, 0.5), inset 0px 4px 10px 0px #a4e0ff;
  background: linear-gradient(180deg, #ffffff 0%, #cce7f4 100%);
}
.anchor-wrap a {
  font-size: 0.875rem;
  padding: 0.625rem 0;
  color: rgba(78, 78, 78, 0.6);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.anchor-wrap a.active {
  border-bottom-color: #3f8cce;
  color: #3f8cce;
}

/* 锚点的3个标题 */
.plan-title .title {
  color: #000000;
  font-size: 2.25rem;
  line-height: 2.6875rem;
  margin: 5vh 0 1vh;
}
.plan-title .description {
  font-size: 0.875rem;
  line-height: 2rem;
  color: #808080;
  margin-bottom: 1.875rem;
}
/* nav */
.nav-img {
  width: 100vw;
  height: 50vw;
  background-image: url("../imgs/app/nav.png");
  background-size: 100% 100%;
  background-position: center bottom;
}
/* 图片堆 */
.plan-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 820px) {
  .plan-card img {
    height: 40vw;
  }
  .plane-swiper {
    height: 40vw;
  }
}

.card-img1 {
  width: 52vw;
}
.card-img2 {
  width: 48vw;
}
.card-img3 {
  width: 29vw;
}
.card-img4 {
  width: 71vw;
}
.card-img5 {
  width: 50vw;
}
.card-img6 {
  width: 50vw;
}
.card-img7 {
  width: 47vw;
}
.card-img8 {
  width: 32vw;
}
.card-img9 {
  width: 68vw;
}
.plan-text-bg {
  width: 100vw;
  height: 9vw;
  background-image: url("../imgs/app/plan-text.png");
  background-size: 100% 100%;
  margin-top: 3vw;
}
.plane-swiper {
  width: 53vw;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 820px) {
  .s1 {
    height: 168vw !important;
    background-image: url("../imgs/app/app-banner-s.png");
  }
  .nav-img {
    height: 168vw !important;
    background-image: url("../imgs/app/nav-s.png");
  }
  .plan1-nav {
    height: 70vh;
  }
  .plan1-img img {
    width: 30vw;
    height: 30vw;
  }
  .plan-card img,
  .plane-swiper {
    width: 100vw;
  }
  .plan-text-bg {
    height: 22vw;
    background-image: url("../imgs/app/plan-text-s.png");
  }
  .card-img7 {
    margin-top: -3px;
  }
}

/* nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 999;
}
.mobile-nav {
  display: none;
}
.nav-inner {
  padding: 0 2.77778vw;
  width: 100%;
  height: 60px;
  color: #fff;
}
.desktop-nav.scroll-active {
  background: #3139344d;
  backdrop-filter: blur(224px);
  background-color: #0000002e;
  color: #ffffff;
}
.desktop-nav.scroll-active .nav-inner {
  color: #ffffff;
}
.nav-logo {
  height: 100%;
}
.nav-list {
  position: relative;
  height: 100%;
}
.nav-list-item {
  padding: 0 16px;
  cursor: pointer;
  height: 100%;
  line-height: 60px;
  vertical-align: middle;
  cursor: pointer;
}

.line {
  position: absolute;
  left: 16px;
  bottom: 10px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all ease 0.3s;
  opacity: 0;
}