.home .vertice .activities {
    background-image: url("./assets/home/Background3.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    padding: 7.5rem 0rem 8.75rem 0rem;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    align-self: stretch;
    justify-content: center;

    overflow: clip;
}


.home .vertice .activities .sub-title {
    display: flex;
    width: 18rem;
    max-width: 70vw;
    height: 12rem;

    padding: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;

    text-align: start;
    color: #fff
}

.home .vertice .activities .title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    margin-bottom: 1.5rem;
}

.home .vertice .activities .box {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    max-width: 49rem;
    margin: 0 auto;

    justify-content: center;
    gap: 2rem;
    row-gap: 2rem;
    align-items: flex-start;
    padding: 0;
}

.home .vertice .activities .card {
    width: 18rem;
    max-width: 70vw;
    height: 12rem;
    max-height: 20vh;

    padding: 2rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;

    border-radius: 2rem;
    border: 1px solid #A4C4E4;

    cursor: default;
    position: relative;

    overflow: hidden;
    background-color: radial-gradient(78.48% 63.53% at 36.5% 35.71%, #FFF 0%, rgba(255, 255, 255, 0.90) 100%);
    box-shadow: 0.375rem 0.375rem 2rem 0px rgba(0, 0, 0, 0.15);

    transition: all 300ms;
}

.home .vertice .activities .card:hover {
    background-color: #ffffff;
}


.home .vertice .activities .card .background {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    opacity: 0.25;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;

    overflow: visible;

    transition: all 600ms;
}

.home .vertice .activities .card:hover .background {
    opacity: 0.5;
    transition: all 600ms;
}

.home .vertice .activities .card-1 .background {
    background-image: url('./assets/vary/bell.png');
    
    background-size: 16% 21%;
    background-position: 26rem 16.5rem;
    transform: rotate(5deg);
    transition: all ease-in 400ms;
}

.home .vertice .activities .card-1:hover .background {
    background-size: 17% 23%;
    background-position: 25rem 15.5rem;
    transform: rotate(8deg);
}

.home .vertice .activities .card-2 .background {
    background-image: url('./assets/vary/megaphone.png');

    background-size: 16% 21%;
    background-position: 27rem 16rem;
    transform: rotate(15deg);
    transition: all 400ms;
}

.home .vertice .activities .card-2:hover .background {
    background-size: 17% 23%;
    background-position: 26rem 15rem;
    transform: rotate(18deg);
}

.home .vertice .activities .card-3 .background {
    background-image: url('./assets/vary/file.png');

    background-size: 15% 24%;
    background-position: 25rem 20rem;
    transform: rotate(-10deg);
    transition: all 400ms;
}

.home .vertice .activities .card-3:hover .background {
    background-size: 16% 25%;
    background-position: 24rem 19rem;
    transform: rotate(-13deg);
}


/* 콘텐츠는 배경 위에 떠 있게 설정 */
.home .vertice .activities .card>*:not(.background) {
    position: relative;
    z-index: 1;
}

.home .vertice .activities .card .title {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1rem;

    margin: 0;
}

.home .vertice .activities .card .text {
    gap: 1rem;
}

.home .vertice .activities .card h2 {
    color: #555;
    font-family: "NanumSquareNeoHeavy";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 800;

    transition: all 300ms;
}

.home .vertice .activities .card:hover h2 {
    font-size: 1.25rem;
    font-weight: 900;
    color: #3D64FF;
}

.home .vertice .activities .card li {
    color: #555;
    font-family: "NanumSquareNeo";
    font-weight: 400;
    font-size: 0.875rem;
    text-align: left;
    margin: 0rem;

    list-style-position: outside;

    text-indent: -0.75rem;
    padding-left: 1.25rem;
    line-height: 1.6;

    transition: all 300ms;
}

.home .vertice .activities .card:hover li {
    font-size: 1rem;
}

.home .vertice .activities .card span {
    color: #555;
    font-family: "NanumSquareNeoBold";
    font-weight: 400;
    font-size: 0.875rem;
    text-align: left;
    margin: 0rem;

    transition: all 300ms;
}

.home .vertice .activities .card:hover span {
    font-size: 1rem;
    font-weight: 600;
    color: #3D64FF;

    transition: all 300ms;
}


.home .vertice .activities .card .number {
    display: flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;

    border-radius: 20px;

    color: #555;
    background-color: #55555522;

    text-align: center;
    font-family: "NanumSquareNeoHeavy";
    font-size: 18px;
    font-weight: 900;
    transition: all 300ms;
}

.home .vertice .activities .card:hover .number {
    color: #fff;
    background: #3D64FF;
}


@media (max-width: 1024px) {
    /* 카드 호버 스타일 기본 적용 */
    .home .vertice .activities .card, .home .vertice .activities .card:hover {
        max-width: 70vw;
        background-color: #ffffff;
    }
  
    .home .vertice .activities .card h2, .home .vertice .activities .card:hover h2 {
      font-size: 1rem;
      font-weight: 900;
      color: #3D64FF;
    }
  
    .home .vertice .activities .card li, .home .vertice .activities .card:hover li {
      font-size: 0.875rem;
    }
  
    .home .vertice .activities .card span, .home .vertice .activities .card:hover span {
      font-size: 0.875rem;
      font-weight: 600;
      color: #3D64FF;
    }
  
    .home .vertice .activities .card .number, .home .vertice .activities .card:hover .number {
      color: #fff;
      background: #3D64FF;
      font-size: 1.125rem;
    }
  
    /* 배경 레이어는 완전히 비활성화 */
    .home .vertice .activities .card .background {
      opacity: 0 !important;
      transition: none !important;
    }
  }