.border-radius {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin: 20rpx;
}

.top {
  padding-bottom: 20rpx;
}

.top image {
  width: 240rpx;
  height: 240rpx;
}

.top .btn-box {
  margin-top: 40rpx;
}

.top .btn-box .btn {
  width: 184rpx;
  height: 62rpx;
  box-sizing: border-box;
  border-radius: 33rpx;
  border: 2rpx solid #FA7D22;
  font-size: 24rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #FA7D22;
}

.top .btn-box .btn.active {
  background: #FA7D22;
  color: #fff;
}

.list {
  padding: 40rpx 20rpx;
}

.list .item {
  margin-top: 20rpx;
  /* padding: 12rpx 20rpx 20rpx; */
}

.list .item .change-img {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

.list .item-card {
  border-radius: 20rrpx;
  overflow: hidden;
  background: #FAFAFA;
  box-sizing: border-box;
}

.list .item-card text {
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.list .item .card-img {
  width: 160rpx;
  height: 160rpx;
}

.list .item .btn {
  width: 136rpx;
  height: 56rpx;
  color: #666;
  font-size: 28rpx;
  border-radius: 28rpx;
  border: 2rpx solid #E1E1E1;
}

.btm {
  height: 170rpx;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  /* bottom: 56rpx; */
  background: #fff;
  /* padding: 0 28rpx; */
}

.btm-btn {
  width: 100%;
  height: 84rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  margin: 0 40rpx;
  background: #FA7D22;
  border-radius: 42rpx;
  /* margin-top: 64rpx; */
}

.no-more-data {
  font-size: 24rpx;
  color: #666;
  padding: 10rpx 0 40rpx;
}

.vip-price-box .vip-origin-price {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 40rpx;
  text-decoration: line-through;
}

.tabs-content {
  padding: 0 30rpx;
  background-color: #fff;
}

.tabs-content .item {
  padding: 20rpx 0;
  background: #fff;
}

.tabs-content .item-image {
  width: 280rpx;
  height: 280rpx;
  background-color: #efefef;
  border-radius: 24rpx;
  margin-right: 20rpx;
}

.tabs-content .tags {
  flex-wrap: wrap;
}

.tabs-content .tags-item {
  margin-bottom: 4px;
  padding: 2rpx 4rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #979797;
  display: inline;
  margin-right: 20rpx;
}

.tabs-content .tags-item:last-child {
  /* margin-right: 0; */
}

.tabs-content .vip-price {
  background: #CAA470;
  border-radius: 8rpx;
  padding: 4rpx;
  /* display: inline-block; */
  height: 28rpx;
  /* box-sizing: border-box; */
}

.tabs-content .vip-price text {
  font-size: 20rpx;
  color: #fff;
}

.tabs-content .vip-price .price {
  background-color: #fff;
  border-radius: 8rpx;
  color: #CAA470;
  padding: 0 8rpx;
}

.tabs-content .btn-box image {
  width: 88rpx;
  height: 30rpx;
  margin-left: 16rpx;
}

.tabs-content .btn {
  width: 96rpx;
  height: 50rpx;
  background: #FA7D22;
  border-radius: 37rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}


.tabs-content.active {
  display: grid;
  grid-gap: 20rpx 20rpx;
  padding: 0 20rpx 20rpx;
  grid-template-columns: repeat(2, 1fr);
  background-color: #F7F8FA;
}

.tabs-content.active .item {
  width: 344rpx;
  height: 608rpx;
  display: flex;
  flex-direction: column;
  border-radius: 24rpx;
  overflow: hidden;
  padding: 0;
}

.tabs-content.active .item-image {
  width: 344rpx;
  height: 344rpx;
  border-radius: 0;
}

.tabs-content.active .item-text {
  padding: 0 24rpx;
}

.tabs-title {
  height: 74rpx;
}

.tabs-title .line {
  width: 130rpx;
  height: 2rpx;
  background: #E9E9E9;
}

.opct{
  opacity: 0;
}