:root {
    --MSIBodyFont: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "Meiryo UI", Helvetica, Arial, sans-serif;
  }
  
  .mbAwards {
    background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/awards/images/award-bg.jpg);
    background-size: 150%;
    font-family: var(--MSIBodyFont);
    font-size: 18px;
    padding: 5vh 0;
  }
  .mbAwards .title--main {
    font-size: 3rem;
    padding: 0;
    margin: 0;
    color: #000;
  }
  .mbAwards .awardsDescription {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #000;
  }
  .mbAwards .mbAwards__titlebox {
    text-align: center;
  }
  .mbAwards .mbAwards__awardsbox {
    padding-top: 50px;
    width: 80%;
    height: auto;
    margin: auto;
  }
  .mbAwards .mbAwards__awardsbox .mbAwards__awardsbox--slider {
    position: relative;
  }
  .mbAwards .mbAwards__awardsbox .mbAwards__awardsbox--slider .slick-list {
    width: 90%;
    margin: 0 auto;
  }
  .mbAwards .mbAwards__awardsbox .awards__prev, .mbAwards .mbAwards__awardsbox .awards__next {
    width: 50px;
    position: absolute;
    opacity: 0.9;
    cursor: pointer;
    z-index: 2;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
  }
  .mbAwards .mbAwards__awardsbox .awards__prev {
    left: -20px;
  }
  .mbAwards .mbAwards__awardsbox .awards__next {
    right: -20px;
  }
  .mbAwards .mbAwards__awardsbox .awardsSlideBox a {
    text-align: center;
    text-decoration: none;
  }
  .mbAwards .mbAwards__awardsbox .awardsSlideBox a .imageBox {
    margin: 0 auto 10px auto;
    width: 160px;
    height: 160px;
  }
  .mbAwards .mbAwards__awardsbox .awardsSlideBox a .imageBox img {
    width: 90%;
    margin: 0 auto;
  }
  .mbAwards .mbAwards__awardsbox .awardInfo__companyName, .mbAwards .mbAwards__awardsbox .awardInfo__time {
    color: #696969;
    font-size: 1rem;
    margin: 0;
  }
  .mbAwards .mbAwards__awardsbox .awardInfo__productName {
    color: #222222;
    font-size: 1.2rem;
    margin: 0;
  }
  
  @media all and (min-width: 1930px) {
    .mbAwards {
      background-size: cover;
    }
  }
  @media all and (max-width: 1600px) {
    .mbAwards {
      background-size: 100%;
    }
  }
  @media all and (max-width: 1300px) {
    .mbAwards {
      background-size: 150%;
    }
  }
  @media all and (max-width: 1100px) {
    .mbAwards {
      background-size: 200%;
    }
    .mbAwards .msi__container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .mbAwards__titlebox {
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .mbAwards__titlebox img {
      padding: 5px 0;
      max-width: 60px;
    }
    .mbAwards__awardsbox .awardsSlideBox a {
      text-align: center;
      text-decoration: none;
    }
    .mbAwards__awardsbox .awardsSlideBox a .imageBox {
      margin: 0 auto 10px auto;
    }
    .mbAwards__awardsbox .awardsSlideBox a .imageBox img {
      width: 90%;
    }
    .mbAwards__awardsbox .awards__prev {
      left: 0px;
    }
    .mbAwards__awardsbox .awards__next {
      right: 0px;
    }
  }
  @media all and (max-width: 768px) {
    .mbAwards {
      background-size: 250%;
    }
  }
  @media all and (max-width: 576px) {
    .mbAwards {
      background-size: 300%;
    }
  }