@charset "utf-8";

.main-sec-04 {
    padding: var(--space-80-fivexl) 0;
}

.main-sec-04 .container {
    background: #f4fafa;
    padding-top: 60px;
    padding-bottom: 50px;
}

.main-sec-04 .tab-wrap .tab {
    font-size: 21px;
    letter-spacing: 0px;
    line-height: 42px;
    color: #1b1464;
    font-weight: bold;
    text-align: center;
}

.main-sec-04 .tab-wrap {
    padding-bottom: 30px;
}

.main-video {
    width: 100%;
    height: 700px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

video[poster] {
    /* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */
    height: 100%;
    width: 100%;
}
.feature-list {
    padding: 36px 0 36px 0;
    margin-bottom: 36px;
}

.feature-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 30px;   /* 아이콘~아이콘 세로 간격 128px */
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 250px; /* 필요시 카드 높이 맞춤 */
    height: 100%;
    position: relative;
}

.feature-icon {
    /* 기본 */
    margin-bottom: 25px;  /* 아이콘-타이틀 간 여백 조정 (원하는 만큼) */

}

/* 예외: 상단 2번째, 3번째만 별도 (간격 더 줄이기 또는 늘리기) */
/* grid 기준이므로, 2번째=2번째 item, 3번째=3번째 item */
.feature-grid > .feature-item:nth-child(2) .feature-icon,
.feature-grid > .feature-item:nth-child(3) .feature-icon {
    margin-bottom: 40px;  /* 혹시 다르다면 여기서 조정 (예: 32px 등) */
}

/* (필요시) 2/3번째 아이템만 아이콘-아이콘 간격 예외 적용
   → 특별히 더 가까워야 하면, grid-row-gap을 인위적으로 조정해야 함
   → grid-row-gap은 전체 행 기준이므로, 특정 셀만 별도 여백을 주려면 padding/margin으로 해결
*/
.feature-grid > .feature-item:nth-child(2),
.feature-grid > .feature-item:nth-child(3) {
    /* 아래로 margin 추가/제거 등, 필요시 조정 */
    /* margin-bottom: 80px;  예시 (원하시면 수치 조정) */
}

.feature-texts {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;         /* title-desc 간격 */
    box-sizing: border-box;
}

.feature-title {
    margin-bottom: 0;
    font-size: 17px;
    letter-spacing: 0px;
    line-height: 24px;
    color: #1b1464;
    font-weight: bold;
    text-align: center;
}

.feature-desc {
    color: #1b1464;
    font-size: 0.99rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.3;
    min-height: 20px;
}

/* 개별 아이콘 사이즈 */
.feature-size-1 {
    width: 136px; height: 136px;
}
.feature-size-2 {
    width: 136px; height: 145px;
}
.feature-size-3 {
    width: 200px; height: 136px;
}
.feature-icon:not(.feature-size-1):not(.feature-size-2):not(.feature-size-3) {
    width: 136px; height: 136px;
}
.feature-icon img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}