layouts/shortcodes/blocks/demo-en.html [8:128]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  <style>
    .overview-demo-section {
      padding: 0px;
      margin-top: 64px;
      background-color: #F4F4F6;
    }

    .container-demo {
      width: 100%;
      height: 240px;
      background-image: url('https://img.alicdn.com/imgextra/i4/O1CN0142n9L01PpfYFAXEM8_!!6000000001890-0-tps-2880-600.jpg');
      background-size: cover;
      display: flex;
      justify-content: center;
      padding: 24px;

      @media only screen and (min-width: 768px) {
        padding: 0px;
        height: 300px;
      }
    }

    .container-demo-title {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;

      @media only screen and (min-width: 768px) {
        width: 100%;
        padding-top: 68px;
        padding-bottom: 100px;
      }

      @media only screen and (min-width: 1100px) {
        width: 1016px;
      }
    }

    .demo-title-mall {
      font-size: 36px;
      font-weight: bold;
      line-height: 56px;
      letter-spacing: -0.01em;
      color: #121316;
      margin-bottom: 28px;

      @media only screen and (min-width: 768px) {
        font-size: 56px;
      }
    }

    .demo-des-mall {
      font-size: 14px;
      font-weight: normal;
      line-height: 24px;

      @media only screen and (min-width: 768px) {
        font-size: 16px;
      }
    }

    .demo-container-middle {
      width: 100%;
      padding: 24px;
      display: flex;
      justify-content: center;

      @media only screen and (min-width: 768px) {
        padding: 0px;
      }
    }

    .demo-subject {
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      display: inline-block;

      @media only screen and (min-width: 768px) {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 122px;
        margin-bottom: 141px;
      }

      @media only screen and (min-width: 1100px) {
        width: 1016px;
      }

    }

    .demo-subject-left,
    .demo-subject-right {
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 32px;
      padding: 24px;

      @media only screen and (min-width: 768px) {
        width: 500px;
      }
    }

    .demo-subject-left {
      margin-bottom: 16px;
      height: 714px;

      @media only screen and (min-width: 768px) {
        margin-right: 16px;
        margin-bottom: 0px;
      }
    }

    .demo-subject-right {
      height: 600px;

      @media only screen and (min-width: 768px) {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



layouts/shortcodes/blocks/demo-zh.html [8:128]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  <style>
    .overview-demo-section {
      padding: 0px;
      margin-top: 64px;
      background-color: #F4F4F6;
    }

    .container-demo {
      width: 100%;
      height: 240px;
      background-image: url('https://img.alicdn.com/imgextra/i4/O1CN0142n9L01PpfYFAXEM8_!!6000000001890-0-tps-2880-600.jpg');
      background-size: cover;
      display: flex;
      justify-content: center;
      padding: 24px;

      @media only screen and (min-width: 768px) {
        padding: 0px;
        height: 300px;
      }
    }

    .container-demo-title {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;

      @media only screen and (min-width: 768px) {
        width: 100%;
        padding-top: 68px;
        padding-bottom: 100px;
      }

      @media only screen and (min-width: 1100px) {
        width: 1016px;
      }
    }

    .demo-title-mall {
      font-size: 36px;
      font-weight: bold;
      line-height: 56px;
      letter-spacing: -0.01em;
      color: #121316;
      margin-bottom: 28px;

      @media only screen and (min-width: 768px) {
        font-size: 56px;
      }
    }

    .demo-des-mall {
      font-size: 14px;
      font-weight: normal;
      line-height: 24px;

      @media only screen and (min-width: 768px) {
        font-size: 16px;
      }
    }

    .demo-container-middle {
      width: 100%;
      padding: 24px;
      display: flex;
      justify-content: center;

      @media only screen and (min-width: 768px) {
        padding: 0px;
      }
    }

    .demo-subject {
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      display: inline-block;

      @media only screen and (min-width: 768px) {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 122px;
        margin-bottom: 141px;
      }

      @media only screen and (min-width: 1100px) {
        width: 1016px;
      }

    }

    .demo-subject-left,
    .demo-subject-right {
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 32px;
      padding: 24px;

      @media only screen and (min-width: 768px) {
        width: 500px;
      }
    }

    .demo-subject-left {
      margin-bottom: 16px;
      height: 714px;

      @media only screen and (min-width: 768px) {
        margin-right: 16px;
        margin-bottom: 0px;
      }
    }

    .demo-subject-right {
      height: 600px;

      @media only screen and (min-width: 768px) {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -