.site-footer {
  width: 100%;
  background-image: url("../../assets/images/footer-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;


  .site-footer__top {

    padding-top: 5.4375rem;
    padding-left: 16.25rem;
    padding-right: 16.25rem;
    padding-bottom: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .0625rem solid rgba(255, 255, 255, 0.1);
  }

  .site-footer__left {
    width: 24.375rem;
  }

  .site-footer__logo {
    display: inline-flex;
    margin-bottom: 1.75rem;

    img {
      width: 10.75rem;
      height: 2.25rem;
      display: block;
    }
  }

  .site-footer__contact-list {
    padding: 0;
    list-style: none;
  }

  .site-footer__contact-item {
    border-bottom: .0625rem solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.125rem;

    &:last-child {
      border-bottom: none;
    }
  }

  .site-footer__contact-line {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .75rem;
    color: rgba(255, 255, 255, 1);

    font-family: "OPPO Sans 4.0";
    font-style: Medium;
    font-size: var(--font-18);
    font-weight: 500;
    line-height: var(--font-21);
    letter-spacing: 0rem;
    text-align: left;

    img {
      width: 1.875rem;
      height: 1.875rem;
    }
  }

  .site-footer__qr-group {
    display: flex;
    gap: 1.25rem;
  }

  .site-footer__qr-item {
    p {
      color: rgba(255, 255, 255, 1);

      font-family: "OPPO Sans 4.0";
      font-style: Regular;
      font-size: var(--font-16);
      font-weight: 400;
      line-height: var(--font-19);
      letter-spacing: 0rem;
      text-align: center;

      margin-top: .625rem;
    }
  }

  .site-footer__qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.75rem;
    height: 6.75rem;
    border-radius: .625rem;

    img {
      width: 5.875rem;
      height: 5.875rem;
    }
  }

  .site-footer__right {
    width: 43.75rem;
  }

  .site-footer__nav-col {
    h4 {
      color: rgba(255, 255, 255, 1);
      font-family: "OPPO Sans 4.0";
      font-style: Medium;
      font-size: var(--font-18);
      font-weight: 500;
      line-height: var(--font-21);
      letter-spacing: 0rem;
      text-align: left;

      margin-bottom: 1rem;
    }

    a {
      display: block;
      color: rgba(255, 255, 255, 1);
      opacity: 0.8;
      font-family: "OPPO Sans 4.0";
      font-style: Regular;
      font-size: var(--font-16);
      font-weight: 400;
      line-height: var(--font-28);
      letter-spacing: 0rem;
      text-align: left;
      margin-bottom: .875rem;
      transition: opacity 0.3s ease;

      &:hover {
        opacity: 1;
      }
    }
  }

  .site-footer__social-list {
    display: flex;
    gap: .625rem;

    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: .75rem;
    }

    img {
      width: 1.25rem;
      height: 1.4375rem;
    }
  }

  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.875rem 16.25rem;

    p {
      color: rgba(255, 255, 255, 1);

      font-family: "OPPO Sans 4.0";
      font-style: Regular;
      font-size: var(--font-16);
      font-weight: 400;
      line-height: var(--font-19);
      letter-spacing: 0rem;
      text-align: left;
    }
  }
}

@media (width <=992px) {
  .site-footer {

    .site-footer__top,
    .site-footer__bottom {
      padding: var(--p-x);
    }

    .site-footer__top {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;

      .site-footer__left {
        width: 100%;
      }

      .site-footer__right {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
      }
    }

    .site-footer__bottom {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;

      p {
        text-align: center;
      }
    }
  }
}