.group-goods {
  width: 100%;
  // height: 271px;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .group-coverImg {
    height: 117px;
    width: 100%;
    background-repeat: no-repeat;
    // background-size: 100% 100%;
    background-size: cover;
    background-position: center;
  }

  .group-info {
    padding: 12px 16px 16px;
    flex: 1;

    .title {
      // height: 32px;
      font-size: 14px;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

      img {
        height: 20px;
        width: 20px;
        vertical-align: middle;
        margin-right: 4px;
      }
    }

    .rate-box {
      .rc-rate {
        font-size: 14px;
      }
    }

    .price-box {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      .fxm-price {
        width: 200px;
        margin-top: 5px;
        margin-bottom: unset;

        .fxm-price-icon {
          margin-left: unset;
        }
      }

      div:nth-child(2) {
        font-size: 12px;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 14px;
        word-break: break-all;
      }
    }

    .btn-box {
      display: flex;
      justify-content: space-between;
      margin-top: 11px;

      .left {
        display: flex;
        align-items: center;

        .number {
          width: 41px;
          height: 20px;
          background: var(--theme-color, #FF1659);
          border-radius: 2px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADrElEQVRYR+2XWchVdRTFf6sJI6EgtaJsRgJJCoIIJCsUUrSsFCsiaKBezAgrfCiLhMIGsEJKqYeI5qwwKokkMQibkSgIsnkyLIKyUV2ybv/7cb773XvOd++LBO23e+7/7L3+e6+99j5iD5v2cHz+2wBsHwEsBGYCRwP/AJ8ALwAPSPqtKcONGbB9IHAhcBrwM3C9pF22rwJWAPv3CPIDcJGkDXUgagHYPgd4CBhfcXIicCZwX3n2K/AY8D6wH3A6cD6wD/A3MEPSxl4gegKwPQtYC+xdUvsGkNusATaXAG8BcyXltkNm+2TgReBw4FtgkqTfu4HoCsD2GODT4uBzYJ6k3BDbjwCXAluByZJ+6ubY9inApnKBRZLu7wfAPOCZxAOmSnqzBA/g8OAgYKmkZXX1tZ0MzgFekzSjHwB3AEuAjyVNbr9oO1z4sfw+S9LrDQBuBJYDX0pKl4ywXiW4G1gMvC3p1AqACSX1eTStjlwlY/ERX19LOrIfAFcDDwJ/pr8lpd4tsx3Wjy3teE9DBp4EFgAbJU3rB8AhwBdAyPhyIeEfBcDj6e+ktZBwew8STgI+LK25RFJKMboSlEA3A7eVN6Juq0u/T6ywO+AWdCqe7aOAdcAJhbTHSfqlXwD7Au8BEZ62TZe03vYtwK3lYfo85WoLUVJ9ZSnTLuACSZHmrtaLhMcCzwIRlKq1AJQMRf0uruFASnO5pKfreDICgO3jQxrgsPLiq8DDwLvAV8A4YCVwHoyYptGNnHkeuEvSd3XB898wALaj5e8AU4CQ7gpJT7Sd2M5ASjrTjrFvgKciNGk1YIukdM6Q2b4dOKn4+r4TUCeARcC9RQFDrqhhy2xHDxIoLZggSzOQJP1Vd0vbIV8m6kfAGZK2Vc93Agjb0z5rJZ1bCZ60fwBk/sfBHEnR+UazHZ48CuwFrJc0vSsA2yHelvLnbEkvVQCsAjL/G8drN0S2r6mM70skhcAtG8pAGb/toOPaU852JPSzMtWWS8qM6NtsZ5SnRcOVYyTt7ARwNvBKhEPSwZXb3wRk6mW9mthLUJoQ2Z4KZKeIzZKUWMMykGxcFrJIyqLRsgryNZIypgcy2/Gf3SIquULSdcMA9PJaYfG1ktpr2KAg0tLZL4fI2LQTRhfScjk3X1LUcWCzfSdwQ4aUpGhN/XeB7bROVrNDMxMktbtkIBC25wLPZa+UNL8RQOHAAVm9OwVkIAT/ciqL6lZJO0YFYNBAo32v8cNktI4GPfc/gN2vBl8wU5YmqwAAAABJRU5ErkJggg==);
          background-position: left;
          background-size: contain;
          background-repeat: no-repeat;
          padding-left: 22px;
          font-size: 14px;
          font-family: var(--regular-font, SFProText-Medium, SFProText);
          font-weight: 500;
          color: #FFFFFF;
          line-height: 14px;
          display: flex;
          align-items: center;
          margin-right: 8px;
        }
      }

      .right {
        width: 101px;
        height: 32px;
        background: linear-gradient(90deg, #FF5252 0%, #FF3434 100%);
        border-radius: 16px;
        font-size: 14px;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 400;
        color: #FFFFFF;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}