.group {
  width: 100%;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 43px 12px 2px;
  position: relative;

  .click-area {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    color: white;
    // font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;

    div {
      display: flex;
      align-items: center;

      span:nth-child(2) {
        margin-left: 6px;
        display: block;
        height: 24px;
        width: 24px;
        background-size: contain;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAB6VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+MAXszAAAAonRSTlMAAQIDBAUGCAoLDA0PEBESFhgbHR4fIiQlKCkqKywtLi8xMjM1Njc4OTo9P0JERkdIS01PUFJXW11eYGFiY2RmZ2hpamtscHFzeXp9f4CGiIyNj5CRkpOUlZudnp+goaSmp6ipqqusrbCys7S1tre5u7zBwsPExcbIysvMzc7P0NLT1NXW19jZ3N7h4ubn6Orr7O3u7/Dx8vT19vf5+vv8/f4o2yynAAACHElEQVQYGcXB91/McQDH8fd1KQ0jm0hl5ewREg0j43BmMkO2ri47GUVJ0tDUnavr9Ze6Pj30+N6+fuH51P+R/nKbZucX9+ZrNsagK1fJm0/QQKGSVsCU/hVK1kGMr5lK0h2m3VJy7P1Mm9yhpOzhr45UafUWJdLAjDLJ9m2l4lsVYEanTXrVNldxPcBil9TIZUW3RFMKA1jcl1oIbFZUzxRke42VLyvTB+9TFMVi8iSVEar4BEGliqKCU9KiAUK9GSOoK1WRXvBYtkaiK1GENZN8URUxfFCE29C/6TexrFOYpX4Y7yamqwpTQ3zfFSrHRwJ5CuEikeOySutjSntVEwSqrgBPDxU7e6g9OuUMQddktRvDLRdMyAHHZM/Sws4jGemak7GWoLeyqsFwywUTclCvop+Bi9oKHjkxumX1EcOtc36/Tw726TlMLlcfHjkxhmQ1hOGW4aBQI8BevcMjJ4ZfVuMYbm2srCyTg/XqBXbqMx45MUZk1Yfhlgu8clCu6zCcne3HIydGp6xaMdxygVcO2tKyLtUV6Sx45MR4IqtaDLdc4JUDHs6TbJXj4JET47Ss9mMMN/+AQHMHMNLwqIug0U89GPmyWjBGAq0KdYEEShUqZ5S42uwKc4B4xjcowg3iOKlIqXXEVK1o7DeJ4bxiKBklCt9hxbTsboBwLbmKJ792EKve8hQlkFJQUd3UPuj1DrfVu7an6p/7A+2xSG/B7/HrAAAAAElFTkSuQmCC');
      }
    }
  }

  .group-item {
    // width: 100%;
    // height: 142px;
    background: #FFFFFF;
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    overflow: hidden;

    .group-left {
      img {
        height: 100%;
        width: 142px;
      }
    }

    .group-right {
      flex: 1;
      padding: 8px 12px 12px 8px;
      overflow: hidden;

      .fxm-price {
        margin-top: 5px;

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

      .title {
        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;
      }

      .number-box {
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .avatar-list {
          margin-right: 8px;
        }

        .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;
        }
      }

      .btn-box {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
          font-size: 12px;
          font-family: var(--light-font, SFProText-Medium, SFProText);
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 14px;
        }

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