.floating-nav {
  position: fixed;
  left: 50%;
  bottom: 4rem;
  width: 99.9rem;
  transform: translate3d(-50%, 0, 0);
  z-index: 200;

  .floating-list {
    display: flex;
    column-gap: 2%;
    justify-content: center;

    .link-mobile{
      display: none; 
    }
  }

  .floating-item {
    display: flex;
    flex-grow: 1;
    width: 100%;
  }

  .floating-link {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
    padding: 1.4rem 2.6rem;
    border-radius: 0.4rem;
    background: var(--color-white);
    box-shadow: 0 0.4rem 1rem 0 var(--alpha-black-35);
    color: var(--color-hover-bg);
    font-size: var(--font-size-xs);
    transition: all 0.3s;

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

    &: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: 1280px) {
  .floating-nav {
    width: calc(100% - 28rem);
  }
}

@media screen and (max-width: 1024px) {
  .floating-nav {
    width: 94%;
    bottom: 3rem;

    .floating-list {
      column-gap: 2%;
    }

    .floating-link {
      padding-inline: 1.6rem;
      column-gap: 0.4rem;
      border-radius: 0.4rem;
      font-size: var(--font-size-base);
      padding: 2rem 2.6rem;
    }
  }
}

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

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

    .floating-item {
      position: relative;

      &:not(:first-child)::after {
        content: '';
        position: absolute;
        width: 1.5px;
        height: 45%;
        bottom: 50%;
        transform: translateY(50%);
        left: 0;
        background-color: var(--alpha-white-30);
      }
    }

    .floating-link {
      padding-inline: 0;
      column-gap: 0;
      border-radius: 0;
      font-size: var(--font-size-sm);
      padding: 0;
      box-shadow: none;
      height: 8vh;
      background-color: var(--color-hover-bg-06);
      color: var(--color-white);

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

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