:root {
  --theme-color: #252525;
}

.banner-lay {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.icon-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-lay {
  --lay-icon-w: 56px;
  width: var(--lay-icon-w);
  height: var(--lay-icon-w);
  border-radius: 50%;
  background-color: var(--theme-color-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: 0.3s;
  cursor: pointer;
}

.img-lay {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.img-lay-contain {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.swiper {
  height: 100%;
}

.card-wrap {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  --column: 3;
  --gap: max(10px, 30 * var(--rpx));
  gap: var(--gap);
}

.card-wrap > .item {
  /* min-width: calc((100% - (var(--column) - 1) * var(--gap)) / var(--column)); */
  /* flex: 1; */
  width: calc((100% - (var(--column) - 1) * var(--gap)) / var(--column));
}

.container {
  /* margin-top: max(30px, 130 * var(--rpx)); */
  position: relative;
}

.container-thin {
  margin-top: max(30px, 70 * var(--rpx));
  position: relative;
}

.layer-thin {
  padding: calc(85 * var(--rpx)) 0;
}

.sec-bg-linear {
  background: linear-gradient(
    270deg,
    rgba(223, 228, 233, 1),
    rgba(243, 245, 247, 1) 100%
  );
}

.full-page {
  height: calc(100vh - var(--header-h));
}

.flex-aic {
  display: flex;
  align-items: center;
}

.flex-jcc {
  display: flex;
  justify-content: center;
}