.docs-resources {
  @horizontalPadding: 114px;
  padding-top: 64px;

  .widthHeight(@width: 100%, @height: 100%) {
    width: @width;
    height: @height;
  }

  .fontLineColor(@fontSize: 16px, @lineHeight: 24px, @color: #fff) {
    font-size: @fontSize;
    line-height: @lineHeight;
    color: @color;
  }

  .flex(@justifyContent: flex-start, @alignItems: center) {
    display: flex;
    justify-content: @justifyContent;
    align-items: @alignItems;
  }

  .icon(@width, @height, @imgWidth: 100%, @imgHeight: 100%) {
    .widthHeight(@width, @height);

    > img {
      .widthHeight(@imgWidth, @imgHeight);
      vertical-align: top;
    }
  }

  .contentIsBg(@contentWidth: 100%, @contentHeight: auto, @bgImgWidth: 100%, @bgImgHeight: auto, @positionField: content) {
    position: relative;

    &-bg {
      .icon(@contentWidth, @contentHeight, @bgImgWidth, @bgImgHeight);
    }

    &-@{positionField} {
      position: absolute;
      top: 0;
      left: 0;
      .widthHeight();
    }
  }

  .flex(flex-start, flex-start);
  flex-direction: column;
  height: 100%;

  > * {
    width: 100%;
  }

  &-header {
    .contentIsBg();

    &-content {
      padding: 64px @horizontalPadding 0;
      .flex(center, flex-start);
      flex-direction: column;

      &-title {
        .fontLineColor(38px, 46px);
        font-family: MicrosoftYaHei-Bold;
        font-weight: 700;
      }

      &-describe {
        .fontLineColor(20px, 28px);
        margin: 20px 0 40px;
      }
    }
  }

  &-main {
    flex: 1;
    padding: 40px @horizontalPadding;

    &-title {
      font-family: MicrosoftYaHeiLight;
      .fontLineColor(24px, 28px);
      font-weight: 200;
    }

    &-describe {
      font-family: MicrosoftYaHei;
      .fontLineColor(16px, 24px);
      font-weight: 400;
      margin: 20px 0 30px;
    }

    &-content {
      .flex(space-between);

      &-item {
        flex-basis: calc(590 * 100% / 1200);
        flex-shrink: 1;
        background: #15192D;
        box-shadow: 0 3px 6px -4px rgba(5, 6, 10, 0.48), 0 6px 16px 0 rgba(5, 6, 10, 0.32), 0 9px 28px 8px rgba(5, 6, 10, 0.2);
        position: relative;
        cursor: pointer;

        &-icon {
          .icon(100%, auto);
        }

        &-text {
          position: absolute;
          left: 30px;
          bottom: 30px;
          &-title {
            margin: 10px 0;
            font-family: MicrosoftYaHei;
            .fontLineColor(16px, 24px);
            font-weight: 400;
          }

          &-desc {
            font-family: MicrosoftYaHei;
            .fontLineColor(16px, 24px);
            font-weight: 400;
          }
        }
      }
    }

  }


  &-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 19px 0 18px;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 22px;
    font-weight: 400;
  }
}