@keyframes handshake {
    0% {
      transform: translateY(0rem) rotate(0deg);
    }
    10% {
      transform: translateY(-0.6rem) rotate(12deg);
    }
    25% {
      transform: translateY(0.4rem) rotate(-8deg);
    }
    40% {
      transform: translateY(-0.3rem) rotate(6deg);
    }
    55% {
      transform: translateY(0.2rem) rotate(-4deg);
    }
    70% {
      transform: translateY(-0.15rem) rotate(2deg);
    }
    85% {
      transform: translateY(0.1rem) rotate(-1deg);
    }
    100% {
      transform: translateY(0rem) rotate(0deg);
    }
  }


.introduction {
    display: flex;
    padding: 2rem 0rem 0rem 0rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    align-self: stretch;
}

.introduction .text {
    display: flex;
    max-width: 80vw;
    padding: 0rem 0rem 3rem 0rem;
    height: max-content;
    justify-content: center;
    gap: clamp(2rem, 12vw, 6rem);
    align-items: center;
    align-self: center;

    flex-wrap: wrap;
}

.introduction p {
    text-align: left;
    word-break: keep-all;
    margin: 0px;
    max-width: 32rem
}

.introduction span {
    font-weight: 600;
    color: #3D64FF;
}

.introduction .h-box {
    display: flex;
    width: 100%;

    padding: 2rem 0rem;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    transition: all 300ms;
}

.introduction .h-box:hover {
    background-color: #F5FAFF;
}

.introduction .h-box .intro-card {
    display: flex;
    width: 15rem;
    height: 18rem;

    align-self: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    background-color: #F5FAFF00;
    border-radius: 1.5rem;

    transition: all 500ms;
}

.introduction .h-box .intro-card.active {
    background-color: #Fff;
    box-shadow: 0rem 0rem 3rem 0rem rgba(61, 122, 255, 0.075);
}

.introduction .h-box .intro-card h3 {
    color: #555;
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;

    transition: all 500ms;
}

.introduction .h-box .intro-card span {
    color: #555;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;

    transition: all 500ms;
}

.introduction .h-box .intro-card.active h3 {
    color: #333;
    font-size: 1rem;
}

.introduction .h-box .intro-card.active span {
    color: #3D64FF;
    font-size: 1rem;
}


.introduction .h-box .intro-card img {
    width: 7rem;
    height: auto;

    filter: grayscale(100%);
    opacity: 0.75;

    transition: all 500ms;
}

.introduction .h-box .intro-card.active img {
    width: 8rem;
    opacity: 1.0;
    filter: grayscale(0%);
    mix-blend-mode: normal;
    fill: #3D64FF;
}

.handshake-target {
    transform-origin: center left;
}
  
  .handshake {
    animation: handshake 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  


.graph-container {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 6rem;
  }
  
  .bar-group {
    width: 0.75rem;
    background-color: #666;
    border-radius: 0.5rem;
    transition: height 600ms ease-in-out, background-color 300ms ease;
    align-self: flex-end;
  }




.introduction .join {
    display: flex;
    width: 100%;
    padding: 2rem 0px;
    margin-bottom: 4rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1rem;
    row-gap: 1rem;
    align-self: center;
    flex-wrap: wrap;

    background: #fff;
    transition: all 300ms;
}

.introduction .join:hover {
    background: #F5FAFF;
    transition: all 300ms;
}

.introduction .join .button {
    display: flex;
    width: 9rem;
    height: 9rem;
    padding: 0rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0);

    transition: all ease-out 100ms;
    cursor: pointer;
}

.introduction .join .button:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0rem rgba(61, 100, 255, 0.05);
}

.introduction .join .button .icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;

    transition: all 200ms;
    border-radius: 2.5rem;
    background: #33333388;
}

.introduction .join .button img {
    width: 1.5rem;
    height: auto;
    transition: all 250ms;
}

.introduction .join .button:hover img {
    width: 1.75rem;
}

.introduction .join .button:hover .icon {
    width: 3.5rem;
    height: 3.5rem;
    transition: all 300ms;
    background: #3D64FF;
}

.introduction .join .button h3 {
    color: #33333388;
    text-align: center;
    font-family: "NanumSquareNeo";
    font-size: 0.875rem;
    font-weight: 600;

    margin: 0px;

    transition: all 250ms;
}

.introduction .join .button:hover h3 {
    color: #3D64FF;
    text-align: center;
    font-family: "NanumSquareNeo";
    font-size: 1rem;
    font-weight: 800;

    transition: all 250ms;
}



.introduction .join .contact {
    display: flex;
    width: 9rem;
    height: 9rem;
    padding: 0rem 0px;
    justify-content: center;
    align-items: center;


    color: #33333388;

    text-align: center;
    font-family: "NanumSquareNeoHeavy";
    font-size: 1.125rem;
    font-weight: 900;

    transition: all 300ms;
}

.introduction .join:hover .contact {
    color: #3D64FF;
    font-size: 1.25rem;
    transition: all 300ms;
}

@media (hover: none) and (pointer: coarse) {
  .introduction .h-box .intro-card.active {
    background-color: #fff;
    box-shadow: 0rem 0rem 3rem 0rem rgba(61, 122, 255, 0.075);
  }

  .introduction .h-box .intro-card.active img {
    width: 8rem;
    opacity: 1.0;
    filter: grayscale(0%);
  }

  .introduction .h-box .intro-card h3,
  .introduction .h-box .intro-card span {
    font-size: 0.875rem;
    font-weight: 400;
  }

  .introduction .join .button h3 {
    font-size: 1rem;
    font-weight: 500;
  }

  .introduction .join .contact {
    font-size: 1.125rem;
  }
}




@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .introduction .h-box .intro-card {
    background-color: #fff;
    box-shadow: 0rem 0rem 1rem 0rem rgba(61, 122, 255, 0.1);
  }

  .introduction .h-box .intro-card h3 {
    color: #333;
    font-size: 1rem;
  }

  .introduction .h-box .intro-card span {
    font-size: 1rem;
  }

  .introduction .h-box .intro-card img {
    opacity: 1.0;
  }

  .introduction .join {
    justify-content: center;
    gap: 1rem;
    row-gap: 1rem;
    flex-wrap: wrap;
  }

  .introduction .join .button,
  .introduction .join .contact {
    width: calc(50% - 1rem);
    max-width: 10rem;
    flex: 0 0 auto;
  }

  .introduction .join .button h3 {
    font-size: 0.95rem;
  }

  .introduction .join .contact {
    font-size: 1rem;
    height: 9rem;
  }
}