footer {
  position: relative;
  background-color: #222222;
  overflow: hidden;
  margin-top: 20px;

  @media (min-width: 768px) {
    margin-top: 50px;
  }

  &::after, &::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 300px;
    background-image: url('/icon/footer-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
  }

  &::before {
    top: 0;
    left: 0;
    width: 50%;
    background-image: url('/icon/footer-1.svg');

    @media (min-width: 768px) {
      top: -5%;
      width: 30%;
    }
  }

  &::after {
    bottom: 0;
    right: 0;
    width: 36%;
    background-position: bottom;
    background-image: url('/icon/footer-2.svg');

    @media (min-width: 768px) {
      bottom: -5%;
      width: 15%;
    }
  }

  .footer-box {
    color: #aaa;
    position: relative;
    z-index: 1;

    a {
      color: #aaa;
      position: relative;

      &:hover {
        &::after {
          width: 100%;
          left: 0;
        }
      }

      &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        border-bottom: 1px solid;
        transition: width .3s;
      }
    }

    .footer-top-links {
      padding: 10px 0;

      @media (min-width: 768px) {
        padding: 40px 0;
      }

      .about {
        @media (min-width: 992px) {
          padding-right: 60px;
        }

        .about-text {
          padding-top: 6px;
        }
      }

      .footer-link-title {
        font-weight: bold;
        color: #fff;
        font-size: 15px;
        display: flex;
        justify-content: space-between;

        @media (min-width: 768px) {
          font-size: 18px;
          margin-bottom: 20px;
        }

        .footer-link-icon {
          &.active {
            i {
              &:before {
                content: "\F63B";
              }
            }
          }

          @media (min-width: 768px) {
            display: none;
          }
        }
      }

      .footer-item {
        padding-top: 10px;
        padding-bottom: 10px;

        .footer-item-content {
          display: none;
          padding-right: 26px;

          @media (min-width: 768px) {
            display: block;
          }
        }
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          margin-right: 20px;
          font-size: 14px;
          font-weight: bold;
          padding: 6px 0;
          a {
            &:hover {
              color: $primary;
              // text-decoration: underline;
            }
          }
        }
      }
    }


    .bottom-box {
      border-top: 1px solid #4A4A4A;
      padding: 26px 0;

      @media (max-width: 768px) {
        padding: 10px 0;
      }

      .left-links {
        @media (max-width: 768px) {
          text-align: center;
        }
      }

      .copyright-text {
        text-align: right;

        @media (max-width: 768px) {
          text-align: center;
          margin-top: 10px;
        }
      }

      .payment-icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        @media (max-width: 768px) {
          justify-content: center;
          margin-top: 10px;
        }

        img {
          margin-left: 10px;
          max-width: 50px;
        }
      }
    }
  }
}