.footer {
  z-index: 100;
  position: relative;
  height: auto;
  background-color: #101010;
  color: var(--color-white);

  .footer-container {
    max-width: 75%;
    margin: 0 auto;
    padding: 8rem 4rem 16rem 2rem;
  }

  .sns-area {
    display: flex;
    justify-content: center;
    gap: 3rem;

    img {
      width: 4rem;
      height: 4rem;
      object-fit: contain;
    }
  }

  .cs-area {
    max-width: 80%;
    position: relative;
    margin: 4rem auto 0;

    .rounded-button-area {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .rounded-button {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      padding: 1.4rem 1rem;
      border: thin solid var(--color-white);
      border-radius: 5rem;
      background: #101010;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-light);
      transition:
        background 0.3s,
        color 0.3s;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background: var(--color-white);
          color: var(--color-hover-bg);
        }
      }

      &:active {
        background: var(--color-white);
        color: var(--color-hover-bg);
      }
    }
  }

  .footer-lnb {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;

    .link-area {
      display: flex;
      align-items: center;
      justify-content: center;

      .link-list {
        display: flex;
        align-items: center;
        column-gap: 0.6rem;
        text-align: center;

        .footer-link {
          padding: 0.3rem 0.6rem;
          border: thin solid var(--color-white);
          font-size: var(--font-size-tiny);
          font-weight: var(--font-weight-light);
          white-space: nowrap;
          transition:
            color 0.3s,
            background 0.3s;

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              background: var(--color-white);
              color: var(--color-gray-03);
            }
          }

          &:active {
            background: var(--color-white);
            color: var(--color-gray-03);
          }
        }
      }
    }

    .address-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      row-gap: 2rem;
      font-size: var(--font-size-tiny);
      color: var(--alpha-white-50);

      .address {
        text-align: center;
        font-weight: var(--font-weight-light);
        line-height: 1.4;
        margin-top: 1rem;
      }

      .f-cont{
        font-weight: var(--font-weight-light);
        text-align: center;

        p {
          display: inline-block;
          position: relative;
          margin-right: 1rem;

          &::after {
            content: '/';
            position: absolute;
            width: 2px;
            height: 100%;
            right: -0.5rem;
            top: 0;
          }

          &:last-child::after {
            display: none;
          } 
        }
      }

      .copyright {
        font-weight: var(--font-weight-regular);
        margin-top: 6rem;
      }

      .footer-logo {
        margin-top: 2rem;
      }
    }
  }
}

@media screen and (max-width: 1440px) {
  .footer {
    .footer-container {
      max-width: 108rem;
    }

    .cs-area {
      max-width: 96rem;
      margin-top: 2.6rem;

      .rounded-button-area {
        gap: 3rem;
      }
    }

    .footer-lnb {
      .branch-list {
        max-width: 96.4rem;
      }

      .address-area {
        max-width: 96rem;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .footer {
    .footer-container {
      max-width: 80vw;
      padding: 6vh 0 13vh;
    }

    .cs-area {
      max-width: 90vw;

      .rounded-button {
        padding: 1.2rem 0rem;
        font-size: var(--font-size-xxs);
        gap: 1rem;
      }
    }

    .footer-lnb {
      .link-area {
        .link-list {
          .footer-link {
            font-size: var(--font-size-mini);
          }
        }
      }

      .address-area {
        font-size: var(--font-size-mini);

        .address {
          p {
            display: block;
          }
        }

        .f-cont{
          p {
            margin-right: 0rem;

            &::after {
              display: none;
            }
          }
        }

        .footer-info{
          text-align: center;
          margin-top: 3rem;
        }

        .copyright {
          margin-top: 3rem;
        }
      }
    }
  }
}

@media screen and (max-width: 780px) {
  .footer {
    .sns-area {
      .sns-icon {
        font-size: 4rem;
      }
    }

    .cs-area {
      margin-top: 4rem;

      .rounded-button-area {
        grid-template-columns: repeat(1, 1fr);
        justify-self: center;
        gap: 1rem;
      }

      .rounded-button {
        min-width: 48rem;
        width: 100%;
      }
    }

    .footer-lnb {
      .link-area {
        max-width: 47.8rem;
        margin: 0 auto;

        .link-list {
          justify-content: center;
          flex-wrap: wrap;
          gap: 0.6rem;

          .footer-link {
            width: max-content;
          }
        }
      }

      .address-area {
        .copyright {
          margin-top: 0rem;
        }

        .footer-logo {
          margin-top: 1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .footer {
    .footer-lnb {
      .branch-area {
        .award-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          max-width: 38rem;
          gap: 1rem;

          .award-image {
            max-width: 12rem;
          }
        }
      }

      .address-area {
        .address {
          max-width: 33.9rem;
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .footer {
    .cs-area {
      .rounded-button {
        min-width: 36rem;
        padding: 0.8rem 1rem;
      }
    }

    .footer-logo {
      max-width: 14.3rem;
    }
  }
}

@media screen and (max-width: 320px) {
  .footer {
    .footer-container {
      padding: 6rem 1.9rem 12rem;
    }

    .sns-area {
      .sns-icon {
        font-size: 3.2rem;
      }
    }

    .cs-area {
      .rounded-button {
        min-width: 27rem;
      }
    }

    .footer-lnb {
      margin-top: 2rem;
      row-gap: 2rem;

      .branch-area {
        row-gap: 2rem;
        .award-list {
          gap: 0.6rem;

          .award-image {
            max-width: 9rem;
          }
        }
      }

      .address-area {
        row-gap: 1rem;
      }
    }
  }
}