.info-cards-container {
    /* 3개의 카드를 보여주는 뷰포트 역할 */
    width: 1281px; /* (카드 390px * 3) + (갭 24px * 2) */
    height: 538px;
    top: 882px;
    left: 319px; /* (1920px - 1220px) / 2 */
    position: absolute;
    overflow: hidden; /* 스크롤바를 숨기고 내부 콘텐츠를 잘라냄 */
}

.info-cards-track {
    /* 카드들을 담고 실제 움직이는 컨테이너 */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    transition: transform 0.5s ease-in-out; /* 부드러운 슬라이드 효과 */
}

.info-card {
    width: 411px;
    position: relative;
    height: 500px;
    flex-shrink: 0;
}

.info-card-background {
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 24px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(194, 196, 200, 0.2), rgba(244, 244, 245, 0.2)), rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-sizing: border-box;
    width: 411px;
    height: 500px;
    z-index: -1;
}

.info-card-title {
    position: absolute;
    top: 88px;
    left: 40px;
    line-height: 40px;
    font-weight: 600;
    width: 100%;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    font-family: Roboto;
    color: #37383c;
    text-align: left;
    display: inline-block;
}

.info-card-icon-background {
    position: absolute;
    top: 37px;
    left: 40px;
    box-shadow: -11.150400161743164px -10.392000198364258px 48px -12px rgba(0, 0, 0, 0.15), -1.8583999872207642px -1.7319999933242798px 12px -8px rgba(0, 0, 0, 0.15), 2.787600040435791px 2.5980000495910645px 12px rgba(255, 255, 255, 0.05) inset, 1.8583999872207642px 1.7319999933242798px 6px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(40px);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    mix-blend-mode: normal;
    z-index: 2;
}

.info-card-icon-01{
    position: absolute;
    top: 43px;
    left: 46px;
    width: 28px;
    height: 28px;
    overflow: hidden;
    z-index: 3;
}
.info-card-icon-02{
    position: absolute;
    top: 43px;
    left: 46px;
    width: 28px;
    height: 28px;
    overflow: hidden;
    z-index: 3;
}
.info-card-icon-03{
    position: absolute;
    top: 42px;
    left: 45px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    z-index: 3;
}

.info-card-description {
    position: absolute;
    top: 168px;
    left: 41px;
    font-size: 18px;
    line-height: 28px;
    font-family: Roboto;
    color: #878a93;
    text-align: left;
    display: inline-block;
}

.info-card-description .p {
    margin: 0;
}

.info-card-mask-01 {
    width: 100%;
position: relative;
max-width: 100%;
overflow: hidden;
height: 500px;
object-fit: cover;
    z-index: -1;
}

.info-card-mask-02 {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 500px;
    object-fit: cover;
    z-index: -1;
}

.info-card-mask-03 {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 500px;
    object-fit: cover;
    z-index: -1;
}

.info-card-mask-04 {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 500px;
    object-fit: cover;
    z-index: -1;
}

.info-card-button-previous {
    position: absolute;
    top: 1434px;
    right: 384px;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.info-card-button-next {
    position: absolute;
    top: 1434px;
    right: 320px;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}