.mainContainer {
  .mainSection {
    height: 594px;
    background: url(https://gw.alipayobjects.com/zos/bmw-prod/756d63e6-4f1d-48e9-8c7f-7b4c0cbc1bb0.svg)
      no-repeat;
    background-size: cover;
    margin-top: -64px;
    padding-top: 64px;
  }

  .contentSection {
    position: relative;
    top: -100px;
    max-width: 1184px;
    margin: 0 auto;
    padding: 0 16px;

    .productIntroduce {
      box-sizing: border-box;
      min-height: 200px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 12px 28px 0 rgba(113, 142, 204, 0.1);
      display: flex;
      align-items: start;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0 32px 32px 32px;

      .productItem {
        width: 210px;
        text-align: center;
        margin-top: 32px;

        .productItemTitle {
          color: rgba(0, 0, 0, 0.85);
          margin-top: 24px;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          line-height: 24px;
        }

        .productItemDescription {
          font-size: 14px;
          color: #697a8c;
          line-height: 24px;
          margin-top: 8px;
        }
      }
    }

    .productResource {
      margin-top: 80px;

      .productResourceTitle {
        font-family: PingFangSC-Light;
        font-size: 24px;
        color: #697a8c;
        line-height: 32px;
      }

      .productResourceContent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .productResourceCard {
          width: 560px;
          height: 270px;
          margin-top: 32px;
          border-radius: 12px;
          padding: 16px 24px;

          .productResourceCardContent {
            width: 212px;
            margin: 32px auto 32px 8px;

            .productResourceCardTitle {
              font-family: PingFangSC-Medium;
              font-size: 24px;
              opacity: 0.85;
              line-height: 32px;
            }

            .productResourceCardDescription {
              font-size: 14px;
              color: #697a8c;
              line-height: 21px;
              margin-top: 16px;
            }

            .productResourceCardButton {
              background: #0170fe;
              border-radius: 18px;
              font-size: 14px;
              color: #fff;
            }

            .productResourceCardButton {
              margin-top: 32px;
            }
          }
        }
      }

      .productDesignValues {
        margin-top: 32px;
        height: 282px;
        padding: 24px 32px;

        .productDesignValueBody {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .productDesignValuesContent {
            width: 386px;

            .productDesignValuesTitle {
              font-family: PingFangSC-Medium;
              font-size: 24px;
              opacity: 0.85;
              line-height: 32px;
            }

            .productDesignValuesDescription {
              font-size: 14px;
              color: #697a8c;
              line-height: 26px;
              margin-top: 16px;
            }
          }

          .productDesignValuesIconContainer {
            display: flex;
            width: 352px;
            margin-right: 140px;
            text-align: center;
            flex-wrap: wrap;

            .productDesignValuesIcon {
              width: 62px;
              display: flex;
              flex-direction: column;
              align-items: center;
            }

            .productDesignValuesIcon:nth-child(2n) {
              margin-left: 220px;
            }

            .productDesignValuesIcon:nth-child(3),
            .productDesignValuesIcon:nth-child(4) {
              margin-top: 16px;
            }

            .productDesignValuesIconText {
              font-family: PingFangSC-Medium;
              font-size: 14px;
              color: #697a8c;
              margin-top: 12px;
            }
          }
        }
      }
    }

    .guides {
      margin-top: 80px;

      .guidesTitle {
        font-family: PingFangSC-Light;
        font-size: 24px;
        color: #697a8c;
        line-height: 32px;
      }

      .guidesContent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 8px;

        .guideCard {
          width: 560px;
          height: 196px;
          background-color: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 10px 0 rgba(184, 212, 231, 0.2);
          margin-top: 24px;
          padding: 12px 24px;

          .guideCardContent {
            width: 270px;

            .guideCardTitle {
              font-family: PingFangSC-Medium;
              font-size: 24px;
              opacity: 0.85;
              line-height: 32px;
            }

            .guideCardDescription {
              font-size: 14px;
              color: #697a8c;
              line-height: 21px;
              margin-top: 16px;
            }

            .guideCardButton {
              margin-top: 32px;

              a {
                color: #3978ff;
              }
            }
          }
        }
      }
    }

    .recommends {
      margin-top: 80px;

      .recommendsTitle {
        font-family: PingFangSC-Light;
        font-size: 24px;
        color: #697a8c;
        line-height: 32px;
      }

      .recommendsContent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background: url(https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*4LddRq0XO8sAAAAAAAAAAAAAARQnAQ)
          no-repeat;
        background-size: cover;

        .recommendCard {
          width: 368px;
          height: 146px;
          border-radius: 12px;
          box-shadow: 0 12px 28px 0 rgba(113, 142, 204, 0.1);
          margin-top: 32px;
          padding: 12px 24px;

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

            .recommendImage {
              margin: 0 25px;
            }

            .recommendCardContent {
              width: 196px;

              .recommendCardTitle {
                font-family: PingFangSC-Medium;
                font-size: 24px;
                color: rgba(0, 0, 0, 0.85);
              }

              .recommendCardDescription {
                color: rgba(0, 0, 0, 0.65);
                line-height: 20px;
                margin-top: 8px;
              }
            }
          }
        }

        .recommendCard:hover {
          box-shadow:
            0 1px 2px -2px rgba(0, 0, 0, 0.16),
            0 3px 6px 0 rgba(0, 0, 0, 0.12),
            0 5px 12px 4px rgba(0, 0, 0, 0.09);
          transition:
            box-shadow 0.3s,
            border-color 0.3s;
        }
      }
    }

    .users {
      margin-top: 80px;

      .usersTitle {
        font-family: PingFangSC-Light;
        font-size: 24px;
        color: #697a8c;
        line-height: 32px;
      }

      .usersContent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 32px;

        .userImage {
          width: 120px;
        }
      }
    }
  }

  @media screen and (max-width: 450px) {
    .mainSection {
      padding-top: 12px;
      height: 512px;
      text-align: center;
    }

    .contentSection {
      top: -24px;

      .productResource {
        .productResourceContent {
          .productResourceCard {
            width: 100%;
            height: 504px;

            .productResourceCardContent {
              width: auto;
              margin-top: 16px;
            }
          }

          .productResourceCard:last-child {
            margin-top: 32px;
          }
        }

        .productDesignValues {
          height: 444px;
          padding: 0;

          .productDesignValueBody {
            .productDesignValuesIconContainer {
              width: 234px;
              margin: 16px auto;

              .productDesignValuesIcon:nth-child(2n) {
                margin-left: 110px;
              }
            }
          }
        }
      }

      .guides {
        .guidesContent {
          .guideCard {
            .guideCardContent {
              width: 171px;

              .guideCardDescription {
                margin-top: 8px;
              }

              .guideCardButton {
                margin-top: 12px;
              }
            }
          }
        }
      }

      .users {
        .usersContent {
          .userImage {
            width: 80px;
          }
        }
      }

      .recommendsContent {
        .recommendCard {
          width: 100% !important;
        }
      }
    }
  }

  :global {
    .ant-btn-primary {
      background: #0170fe;
    }
  }
}
