.page {
  background-color: rgba(242, 244, 248, 1);
  position: relative;
  width: 750rpx;
  height: 2208rpx;
  overflow: hidden;
  .group_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 88rpx;
    .text_1 {
      width: 108rpx;
      height: 42rpx;
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 1);
      font-size: 30rpx;
      letter-spacing: -0.30000001192092896px;
      font-family: PingFang SC-Semibold;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      line-height: 30rpx;
      margin: 28rpx 0 0 42rpx;
    }
    .section_1 {
      background-color: rgba(0, 0, 0, 1);
      width: 34rpx;
      height: 22rpx;
      margin: 36rpx 0 0 438rpx;
    }
    .section_2 {
      background-color: rgba(0, 0, 0, 1);
      width: 32rpx;
      height: 22rpx;
      margin: 36rpx 0 0 10rpx;
    }
    .image_1 {
      width: 50rpx;
      height: 24rpx;
      margin: 36rpx 26rpx 0 10rpx;
    }
  }
  .group_2 {
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 88rpx;
    justify-content: flex-center;
    .label_1 {
      width: 48rpx;
      height: 48rpx;
      margin: 20rpx 0 0 24rpx;
    }
    .text_2 {
      width: 72rpx;
      height: 52rpx;
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 0.9);
      font-size: 36rpx;
      font-family: PingFang SC-Semibold;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      line-height: 52rpx;
      margin: 18rpx 0 0 266rpx;
    }
    .block_1 {
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 16px;
      height: 64rpx;
      border: 0.5px solid rgba(231, 231, 231, 1);
      width: 174rpx;
      margin: 12rpx 24rpx 0 142rpx;
      .image-wrapper_1 {
        width: 40rpx;
        height: 2rpx;
        margin: 12rpx 0 0 90rpx;
        .thumbnail_1 {
          width: 40rpx;
          height: 2rpx;
        }
      }
      .group_3 {
        width: 122rpx;
        height: 32rpx;
        margin: 2rpx 0 16rpx 26rpx;
        .box_1 {
          background-color: rgba(0, 0, 0, 0.9);
          width: 36rpx;
          height: 12rpx;
          margin-top: 10rpx;
        }
        .box_2 {
          background-color: rgba(0, 0, 0, 0.9);
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
  .group_4 {
    height: 482rpx;
    /* background: url(/static/lanhu_jiaxiaoxiangqing/FigmaDDSSlicePNGcd54efcc9a8c89af0ef99c8275464828.png)
      100% no-repeat; */
    background-size: 100% 100%;
    width: 750rpx;
    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      width: 750rpx;
      height: 32rpx;
      margin-top: 450rpx;
    }
  }
  .group_5 {
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 0) 100%
    );
    width: 750rpx;
    //height: 304rpx;
    justify-content: flex-center;
    margin-bottom: 30rpx;
    .text_3 {
      width: 160rpx;
      height: 40rpx;
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 40rpx;
      font-family: PingFang SC-Semibold;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      line-height: 40rpx;
      margin: 30rpx 0 0 32rpx;
    }
    .text-wrapper_1 {
      width: 220rpx;
      height: 24rpx;
      margin: 30rpx 0 0 32rpx;
      .text_4 {
        width: 72rpx;
        height: 24rpx;
        overflow-wrap: break-word;
        color: rgba(44, 120, 245, 1);
        font-size: 24rpx;
        font-family: PingFang SC-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 24rpx;
      }
      .text_5 {
        width: 138rpx;
        height: 24rpx;
        overflow-wrap: break-word;
        color: rgba(137, 146, 162, 1);
        font-size: 24rpx;
        font-family: PingFang SC-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 24rpx;
      }
    }
    .block_2 {
      width: 686rpx;
      height: 120rpx;
      background: url(/static/lanhu_jiaxiaoxiangqing/FigmaDDSSlicePNG1eb894220f6795fd386c751f181ce5e4.png)
        100% no-repeat;
      background-size: 100% 100%;
      margin: 30rpx 0 30rpx 32rpx;
      .text-group_1 {
        width: 522rpx;
        height: 68rpx;
        margin: 26rpx 0 0 20rpx;
        .text_6 {
          width: 522rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 24rpx;
          font-family: PingFang SC-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
        }
        .text_7 {
          width: 118rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(137, 146, 162, 1);
          font-size: 24rpx;
          font-family: PingFang SC-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-top: 20rpx;
        }
      }
      .image-wrapper_2 {
        box-shadow: 0px 0px 8px 0px rgba(26, 55, 104, 0.1);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 50%;
        height: 64rpx;
        width: 64rpx;
        margin: 28rpx 30rpx 0 50rpx;
        .label_2 {
          width: 48rpx;
          height: 48rpx;
          margin: 8rpx 0 0 8rpx;
        }
      }
    }
  }
  .group_6 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    height: 642rpx;
    margin-left: 32rpx;
    width: 686rpx;
    justify-content: flex-center;
    .box_4 {
      width: 148rpx;
      height: 32rpx;
      margin-top: 30rpx;
      .box_5 {
        background-color: rgba(44, 120, 245, 1);
        border-radius: 0px 2px 0px 2px;
        width: 8rpx;
        height: 32rpx;
      }
      .text_8 {
        width: 128rpx;
        height: 32rpx;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
        font-family: PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 32rpx;
      }
    }
    .box_6 {
      width: 478rpx;
      height: 132rpx;
      margin: 40rpx 0 0 20rpx;
      .image-text_1 {
        position: relative;
        width: 478rpx;
        height: 132rpx;
        .image_2 {
          width: 212rpx;
          height: 132rpx;
        }
        .text-group_2 {
          width: 246rpx;
          height: 132rpx;
          margin-left: 20rpx;
          .text_9 {
            width: 212rpx;
            height: 28rpx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 28rpx;
            font-family: PingFang SC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 28rpx;
          }
          .text-wrapper_2 {
            width: 246rpx;
            height: 28rpx;
            margin-top: 76rpx;
            .text_10 {
              width: 138rpx;
              height: 28rpx;
              overflow-wrap: break-word;
              color: rgba(251, 66, 59, 1);
              font-size: 28rpx;
              font-family: PingFang SC-Bold;
              font-weight: 700;
              text-align: left;
              white-space: nowrap;
              line-height: 28rpx;
            }
            .text_11 {
              width: 98rpx;
              height: 20rpx;
              overflow-wrap: break-word;
              color: rgba(170, 170, 170, 1);
              font-size: 20rpx;
              font-family: PingFang SC-Regular;
              text-decoration: line-through;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 20rpx;
              margin-top: 4rpx;
            }
          }
        }

        .text-wrapper_3 {
          background-color: rgba(255, 239, 229, 1);
          border-radius: 2px;
          //height: 36rpx;
          width: 33rpx;
          //margin: 48rpx 86rpx 0 -138rpx;
          //width: 32rpx;
          //height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(123, 81, 11, 1);
          font-size: 24rpx;
          font-family: PingFang SC-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          margin-left: 10rpx;
          .text_12 {

            line-height: 24rpx;
            margin: 6rpx 0 0 10rpx;
          }
        }
        .text-wrapper_4 {
          //background-color: rgba(223, 235, 255, 1);
          border-radius: 2px;
          height: 36rpx;
          //width: 92rpx;
          position: absolute;
          left: 232rpx;
          top: 48rpx;
          .text_13 {
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(44, 120, 245, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin: 6rpx 0 0 10rpx;
          }
        }
      }
    }
    .box_7 {
      width: 478rpx;
      height: 132rpx;
      margin: 30rpx 0 0 20rpx;
      .image_3 {
        width: 212rpx;
        height: 132rpx;
      }
      .group_7 {
        width: 246rpx;
        height: 132rpx;
        .text_14 {
          width: 168rpx;
          height: 28rpx;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          font-family: PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx;
        }
        .box_8 {
          width: 160rpx;
          height: 36rpx;
          margin-top: 20rpx;
          .text-wrapper_5 {
            background-color: rgba(223, 235, 255, 1);
            border-radius: 2px;
            height: 36rpx;
            width: 92rpx;
            .text_15 {
              width: 72rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(44, 120, 245, 1);
              font-size: 24rpx;
              font-family: PingFang SC-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 10rpx;
            }
          }
          .text-wrapper_6 {
            background-color: rgba(255, 239, 229, 1);
            border-radius: 2px;
            height: 36rpx;
            width: 52rpx;
            .text_16 {
              width: 32rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(123, 81, 11, 1);
              font-size: 24rpx;
              font-family: PingFang SC-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 10rpx;
            }
          }
        }
        .text-wrapper_7 {
          width: 246rpx;
          height: 28rpx;
          margin-top: 20rpx;
          .text_17 {
            width: 138rpx;
            height: 28rpx;
            overflow-wrap: break-word;
            color: rgba(251, 66, 59, 1);
            font-size: 28rpx;
            font-family: PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
            line-height: 28rpx;
          }
          .text_18 {
            width: 98rpx;
            height: 20rpx;
            overflow-wrap: break-word;
            color: rgba(170, 170, 170, 1);
            font-size: 20rpx;
            font-family: PingFang SC-Regular;
            text-decoration: line-through;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 20rpx;
            margin-top: 4rpx;
          }
        }
      }
    }
    .box_9 {
      width: 478rpx;
      height: 132rpx;
      margin: 30rpx 0 0 20rpx;
      .image_4 {
        width: 212rpx;
        height: 132rpx;
      }
      .box_10 {
        width: 246rpx;
        height: 132rpx;
        .text_19 {
          width: 168rpx;
          height: 28rpx;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          font-family: PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx;
        }
        .box_11 {
          width: 160rpx;
          height: 36rpx;
          margin-top: 20rpx;
          .text-wrapper_8 {
            background-color: rgba(223, 235, 255, 1);
            border-radius: 2px;
            height: 36rpx;
            width: 92rpx;
            .text_20 {
              width: 72rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(44, 120, 245, 1);
              font-size: 24rpx;
              font-family: PingFang SC-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 10rpx;
            }
          }
          .text-wrapper_9 {
            background-color: rgba(255, 239, 229, 1);
            border-radius: 2px;
            height: 36rpx;
            width: 52rpx;
            .text_21 {
              width: 26rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(123, 81, 11, 1);
              font-size: 24rpx;
              font-family: PingFang SC-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 10rpx;
            }
          }
        }
        .text-wrapper_10 {
          width: 246rpx;
          height: 28rpx;
          margin-top: 20rpx;
          .text_22 {
            width: 138rpx;
            height: 28rpx;
            overflow-wrap: break-word;
            color: rgba(251, 66, 59, 1);
            font-size: 28rpx;
            font-family: PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
            line-height: 28rpx;
          }
          .text_23 {
            width: 98rpx;
            height: 20rpx;
            overflow-wrap: break-word;
            color: rgba(170, 170, 170, 1);
            font-size: 20rpx;
            font-family: PingFang SC-Regular;
            text-decoration: line-through;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 20rpx;
            margin-top: 4rpx;
          }
        }
      }
    }
    .box_12 {
      width: 222rpx;
      height: 24rpx;
      margin: 30rpx 0 30rpx 232rpx;
      .image-text_2 {
        width: 222rpx;
        height: 24rpx;
        .text-group_3 {
          width: 190rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(44, 120, 245, 1);
          font-size: 24rpx;
          font-family: PingFang SC-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
        }
        .thumbnail_2 {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .group_8 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    height: 560rpx;
    width: 686rpx;
    justify-content: flex-center;
    margin: 20rpx 0 24rpx 32rpx;
    .group_9 {
      width: 148rpx;
      height: 32rpx;
      margin-top: 30rpx;
      .block_3 {
        background-color: rgba(44, 120, 245, 1);
        border-radius: 0px 2px 0px 2px;
        width: 8rpx;
        height: 32rpx;
      }
      .text_24 {
        width: 128rpx;
        height: 32rpx;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
        font-family: PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 32rpx;
      }
    }
    .group_10 {
      width: 386rpx;
      height: 116rpx;
      margin: 40rpx 0 0 20rpx;
      .image-text_3 {
        position: relative;
        width: 222rpx;
        height: 116rpx;
        .label_3 {
          width: 96rpx;
          height: 96rpx;
        }
        .text-group_4 {
          width: 106rpx;
          height: 116rpx;
          .text_25 {
            width: 96rpx;
            height: 32rpx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 32rpx;
          }
          .text_26 {
            width: 36rpx;
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(237, 162, 58, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin: 18rpx 0 0 38rpx;
          }
          .text_27 {
            width: 106rpx;
            height: 45rpx;
            overflow-wrap: break-word;
            color: rgba(137, 146, 162, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin-top: 18rpx;
          }
        }
        .box_13 {
          position: absolute;
          left: 110rpx;
          top: 40rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
      .text_28 {
        width: 124rpx;
        height: 24rpx;
        overflow-wrap: break-word;
        color: rgba(137, 146, 162, 1);
        font-size: 24rpx;
        font-family: PingFang SC-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 24rpx;
        margin-top: 72rpx;
      }
    }
    .group_11 {
      width: 386rpx;
      height: 116rpx;
      margin: 40rpx 0 0 20rpx;
      .image-text_4 {
        position: relative;
        width: 222rpx;
        height: 116rpx;
        .label_4 {
          width: 96rpx;
          height: 96rpx;
        }
        .text-group_5 {
          width: 106rpx;
          height: 116rpx;
          .text_29 {
            width: 96rpx;
            height: 32rpx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 32rpx;
          }
          .text_30 {
            width: 36rpx;
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(237, 162, 58, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin: 18rpx 0 0 38rpx;
          }
          .text_31 {
            width: 106rpx;
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(137, 146, 162, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin-top: 18rpx;
          }
        }
        .section_3 {
          background-color: rgba(237, 162, 58, 1);
          position: absolute;
          left: 116rpx;
          top: 48rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
      .text_32 {
        width: 124rpx;
        height: 24rpx;
        overflow-wrap: break-word;
        color: rgba(137, 146, 162, 1);
        font-size: 24rpx;
        font-family: PingFang SC-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 24rpx;
        margin-top: 92rpx;
      }
    }
    .group_12 {
      width: 386rpx;
      height: 116rpx;
      margin: 40rpx 0 30rpx 20rpx;
      .image-text_5 {
        position: relative;
        width: 222rpx;
        height: 116rpx;
        .label_5 {
          width: 96rpx;
          height: 96rpx;
        }
        .text-group_6 {
          width: 106rpx;
          height: 116rpx;
          .text_33 {
            width: 96rpx;
            height: 32rpx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 32rpx;
          }
          .text_34 {
            width: 36rpx;
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(237, 162, 58, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin: 18rpx 0 0 38rpx;
          }
          .text_35 {
            width: 106rpx;
            height: 24rpx;
            overflow-wrap: break-word;
            color: rgba(137, 146, 162, 1);
            font-size: 24rpx;
            font-family: PingFang SC-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx;
            margin-top: 18rpx;
          }
        }
        .block_4 {
          background-color: rgba(237, 162, 58, 1);
          position: absolute;
          left: 116rpx;
          top: 48rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
      .text_36 {
        width: 124rpx;
        height: 24rpx;
        overflow-wrap: break-word;
        color: rgba(137, 146, 162, 1);
        font-size: 24rpx;
        font-family: PingFang SC-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 24rpx;
        margin-top: 92rpx;
      }
    }
  }
  .container {
    padding: 20rpx;
    background: #fff;
    border-radius: 16rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .class-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
	width: 90%;
	      height: 30%;
	      margin: 40rpx 0 0 20rpx;
  }

  .class-item {
    display: flex;

    padding: 20rpx;
    border-radius: 12rpx;
  }

  .class-image {
    width: 160rpx;
    height: 100rpx;
    border-radius: 8rpx;
  }

  .class-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .class-name {
    font-size: 35rpx;
    font-weight: bold;
	margin-bottom: 10px;
  }

  .class-price {
    display: flex;
    align-items: center;
  }

  .price {
    font-size: 28rpx;
    color: #ff4d4f;
    font-weight: bold;
  }

  .original-price {
    font-size: 24rpx;
    text-decoration: line-through;
    color: #999;
    margin-left: 10rpx;
  }

  .class-details {
      display: flex;
      gap: 8rpx; /* 设置两个标签之间的间距 */
	  align-items: center;
	  margin-bottom: 10rpx;

  }

  .view-all {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #007aff;
    font-size: 28rpx;
  }

  .arrow-icon {
    width: 20rpx;
    height: 20rpx;
  }

  .class-type,
  .class-license {
      display: flex; /* 设置为行内块元素 */
	  padding: 6rpx;
      border-radius: 3px; /* 圆角 */
      font-size: 12px; /* 较小的字体 */
      font-weight: bold; /* 加粗 */
	  justify-content: center;
	  align-items: center;
  }

  /* 如果需要区分两个标签的样式，可以单独设置 */
  .class-type {
	  color: #3478DC;
      background-color: #DDEDFE; /* 红色背景 */
  }

  .class-license {
	  color: #8B623D;
      background-color: #FFF0E4; /* 蓝色背景 */
  }
}