page {
  background-color: #f5f5f5;
}
.page {
  padding: 200rpx 40rpx 80rpx;
  .banner {
    position: relative;
    .b-title {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      width: 310rpx;
      height: 86rpx;
    }
    .b-content {
      padding: 72rpx 30rpx 36rpx;
      background: #fbf0f3;
      box-shadow: 0rpx 14rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 24rpx;
      border: 2rpx solid rgba(224, 71, 117, 0.52);
    }
  }
  .list {
    margin-top: 78rpx;
    padding: 76rpx 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 24rpx;
    position: relative;
    .l-title {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      width: 310rpx;
      height: 86rpx;
    }
    .l-tip {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }
    .module {
      .m-title {
        position: relative;
        margin: 26rpx 96rpx 0 16rpx;
        line-height: 60rpx;
        padding: 0 24rpx;
        background: linear-gradient(270deg, rgba(242, 125, 173, 0) 0%, rgba(224, 71, 117, 0.87) 57%, #e04775 100%);
        font-size: 28rpx;
        color: #ffffff;
        font-weight: bold;
        .num {
          position: absolute;
          left: 0;
          top: 0;
          transform: translate(-100%, 0);
          width: 60rpx;
          height: 60rpx;
          background-color: #24d8c8;
          text-align: center;
          line-height: 60rpx;
          &::before {
            position: absolute;
            top: -6rpx;
            left: 0;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 6rpx 14rpx;
            border-color: transparent transparent #007167 transparent;
          }
        }
      }
      .m-content {
        margin-top: 24rpx;
        padding: 32rpx 30rpx;
        font-size: 28rpx;
        color: #666666;
        border-radius: 16rpx;
        background-color: #f5f5f5;
      }
      .ul {
        .ol {
          margin-top: 34rpx;
          font-size: 28rpx;
          color: #666666;
          .o-title {
            font-size: 28rpx;
            color: #666666;
            font-weight: bold;
            margin-bottom: 12rpx;
            display: flex;
            .o-num {
              margin-right: 12rpx;
              flex-shrink: 0;
              width: 34rpx;
              height: 34rpx;
              font-size: 24rpx;
              color: #ffffff;
              background-color: #e04775;
              text-align: center;
              line-height: 34rpx;
              border-radius: 50%;
            }
          }
          &.no-title {
            display: flex;
          }
        }
      }
    }
    .tip {
      margin-top: 32rpx;
      .t-title {
        font-size: 32rpx;
        color: #666666;
        font-weight: bold;
        line-height: 1;
        &::before {
          margin-right: 16rpx;
          display: inline-block;
          vertical-align: middle;
          content: "";
          width: 10rpx;
          height: 34rpx;
          background-color: #e04775;
        }
      }
      .t-content {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
}