.floating-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translate3d(-50%, 0, 0);
  height: 7.2rem;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);

  .floating-list {
    display: flex;
    column-gap: 4rem;
    justify-content: center;
    height: 100%;

    .link-mobile {
      display: none;
    }
  }

  .floating-item {
    display: flex;
    width: 16.6rem;
  }

  .floating-link {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
    color: var(--color-white);
    font-size: var(--font-size-xs);

    @media (hover: hover) and (pointer: fine) {
      &:hover {}
    }

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

  .floating-text {
    text-align: center;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;

    &>br {
      display: none;
    }
  }
}


@media screen and (max-width: 1024px) {
  .floating-nav {
    .floating-list {
      column-gap: 2%;
    }

    .floating-link {}
  }
}

@media screen and (max-width: 780px) {
  .floating-nav {
    width: 100%;
    bottom: 0;

    .floating-list {
      column-gap: 0;
    }

    .floating-link {
      img {
        display: none;
      }

      .floating-text {
        br {
          display: block;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background: none;
          color: none;
        }
      }

      &:active {
        background: none;
        color: none;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .floating-nav {
    .floating-link {
      font-size: 16px;
    }

    .floating-item {
      width: 135px;
    }
  }
}

@media screen and (max-width: 320px) {
  .floating-nav {
    .floating-link {
      font-size: 1.4rem;
    }
  }
}