.glass-section {
    /* palm-hole(약병) 중앙 좌표 - % */
    --palm-left: 72%;
    --palm-top: 45%;
    /* 40%에서 5% 아래 */

    /* 약병 박스 크기 */
    --palm-width: 330px;
    --palm-height: 330px;

    /* 유리 구멍(사각형) 크기 */
    --holeW: 400px;
    --holeH: 490px;

    /* 2분할 비율 (위=약병 공간 / 아래=텍스트 공간) */
    --hole-split: 50%;
    /* 필요하면 55%/45% 등으로 조정 */

    position: relative;
    min-height: 100vh;
    background: url('/home_assets/img/main/skin/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ========= 손 이미지 ========= */
.hand-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
    overflow: hidden;
}

.hand-full {
    height: auto;
    transform: translateX(200px) translateY(70px);
    /* 요청 반영 */
    filter: blur(2px);
    opacity: .75;
    user-select: none;
    pointer-events: none;
}

/* ========= palm-hole: 약병 기준(중앙 정렬) ========= */
.palm-hole {
    position: absolute;
    left: var(--palm-left);
    top: var(--palm-top);
    width: var(--palm-width);
    height: var(--palm-height);
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

.filler-image {
    position: absolute;
    left: 30%;
    top: 50%;
    width: var(--palm-width);
    height: var(--palm-height);
    transform: translate(-50%, -50%) rotate(-12deg);
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .2));
    pointer-events: auto;

    /* 슬라이드인 애니메이션 */
    animation: slideInFromTop 1.5s ease-out forwards, floatUpDown 3s ease-in-out infinite 1.5s;
}

/* 위에서 아래로 슬라이드인 효과 */
@keyframes slideInFromTop {
    0% {
        transform: translate(-50%, -200%) rotate(-12deg);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) rotate(-12deg);
        opacity: 1;
    }
}

/* 위아래로 둥둥 떠다니는 효과 */
@keyframes floatUpDown {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-12deg);
    }

    50% {
        transform: translate(-50%, -60%) rotate(-12deg);
    }
}

/* ========= 구멍 전체 프레임(정확히 420x590) ========= */
.hole-frame {
    position: absolute;
    left: var(--palm-left);
    top: var(--palm-top);
    width: var(--holeW);
    height: var(--holeH);
    transform: translate(-50%, -50%);
    /* 기존 위치 유지 */
    z-index: 6;
    /* 막대(2), 손(1)보다 위 */
    pointer-events: none;
    /* 필요시 auto */
    display: block;
    /* 2개 영역을 절대배치로 분리 */
}

/* 위 칸(약병 공간) — 시각적 영역만 차지 (실제 약병은 palm-hole에 위치) */
.hole-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 100px);
    pointer-events: none;
}

/* 아래 칸(텍스트 공간) */
.hole-bottom {
    position: absolute;
    left: -25%;
    bottom: 0;
    width: 100%;
    height: 70px;
    border-top: 2px solid #fff;
    /* 요청: 텍스트 영역 위쪽 흰색 테두리 */
    display: flex;
    align-items: center;
    /* 수직 가운데 */
    justify-content: flex-end;
    /* 오른쪽 정렬을 위한 컨테이너 정렬 */
    padding: 10px 16px;
    /* 텍스트 좌우 여백 */
    box-sizing: border-box;
    pointer-events: none;
    /* 텍스트만 클릭되게 하려면 아래 .brand-overlay를 auto */
}

/* 요청한 텍스트 스타일 */
.brand-overlay {
    font-family: 'Dream Orphans', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 96px;
    /* 변경: 64px -> 96px */
    line-height: 1.1;
    color: #fff;
    letter-spacing: 1px;
    text-align: right;
    /* 오른쪽 정렬 */
    text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    margin: 0;
    width: 100%;
    pointer-events: auto;
    /* 필요 시 클릭 허용 */
    box-sizing: border-box;
    margin-top: 20px;
}

/* ========= 콘텐츠(텍스트 본문) ========= */
.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 100vh;
    padding: 0 50px;
    padding-bottom: 100px;
    /* 바텀에서 100px 떨어진 위치 */
}

.text-area {
    flex: 1;
    max-width: 800px;
    color: #333;
    /* 600px에서 800px로 증가 */
    margin-left: 50px;
    /* 왼쪽에서 50px 떨어뜨리기 */
}

/* 메인 타이틀 스타일 변경 */
.main-title {
    font-family: 'Dream Orphans', sans-serif;
    font-weight: 400;
    font-size: 64px;
    /* 3rem에서 64px로 변경 */
    margin-bottom: 40px;
    letter-spacing: 2px;
    margin-top: 0;
    /* 상단 마진 제거 */
}

.main-title .brand {
    font-family: 'Dream Orphans', sans-serif;
    font-weight: 400;
    font-size: 96px;
    /* OLIDIA 부분 96px */
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* flex-start를 center로 변경 */

/* 02, 03 영역에 추가 들여쓰기 */
.info-item:nth-child(2) {
    margin-left: 30px;
}

.info-item:nth-child(3) {
    margin-left: 60px;
    /* 30px + 30px = 60px */
}

/* 숫자 스타일 변경 */
.info-number {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    /* bold */
    font-size: 32px;
    /* 1.5rem에서 32px로 변경 */
    color: #333;
    min-width: 40px;
}

/* 숫자 옆 텍스트 스타일 변경 */
.info-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    /* extra light */
    font-size: 16px;
    /* 1rem에서 16px로 변경 */
    line-height: 1.6;
    color: #555;
    flex: 1;
}

.image-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ====== Section 2: 콜라겐/탄력 설명 ====== */
.collagen-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 추가 - 세로 배치 */
    align-items: flex-end;
    background-color: #fff;
    background-image: url('/home_assets/img/main/skin/section2_background.png');
    background-repeat: no-repeat;
    background-position: left top;
    /* center를 top으로 변경 */
    background-size: cover;
    overflow: hidden;
    margin-top: -1px;
    /* 추가 - 위쪽 섹션과 완전히 붙이기 */
}

/* 오른쪽 텍스트 영역 */
.collagen-inner {
    max-width: 900px;
    margin-left: auto;
    margin-right: 60px;
    padding: 0 0px 40px 10px;
    /* 왼쪽 패딩 10px 추가 */
    text-align: center;
    color: #000000;
    /* #222에서 #000000으로 변경 */
    flex: 1;
    /* 추가 - 남은 공간 차지 */
    display: flex;
    /* 추가 */
    flex-direction: column;
    /* 추가 */
    justify-content: flex-end;
    /* 추가 - 아래쪽 정렬 */

    /* 초기 상태 - 숨김 */
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

/* 애니메이션 활성화 클래스 */
.collagen-inner.animate-in {
    transform: translateY(0);
    opacity: 1;
}

.collagen-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    margin: 0 0 28px;
    color: #000000;
    /* #222에서 #000000으로 변경 */
}

.collagen-title strong {
    font-weight: 700;
    /* bold로 변경 */
}

.collagen-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    /* extralight로 변경 */
    font-size: 24px;
    /* 24px로 변경 */
    line-height: 1.9;
    color: #000000;
    /* #666에서 #000000으로 변경 */
    margin: 0 0 18px;
}

.collagen-sub-number {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    /* extralight */
    font-size: 14px;
    /* 14px */
    color: #000000;
    /* #666에서 #000000으로 변경 */
    vertical-align: super;
    /* 위첨자 효과 */
}

.collagen-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    /* extralight로 변경 */
    font-size: 24px;
    /* 24px로 변경 */
    line-height: 1.9;
    color: #000000;
    /* #666에서 #000000으로 변경 */
    margin: 0;
    /* 수정 - 마진 제거 */
}

/* footnote 별도 영역 */
.footnote-area {
    width: 100%;
    /* 전체 너비 */
    padding: 20px 50px 50px;
    /* 좌우 패딩으로 여백 조정 */
    background-color: rgba(255, 255, 255, 0.9);
    /* 선택사항: 배경색 */
}

.collagen-footnote {
    font-family: 'Pretendard', sans-serif;
    /* Inter에서 Pretendard로 변경 */
    font-weight: 300;
    /* light로 변경 */
    font-size: 14px;
    /* 14px로 변경 */
    line-height: 1.6;
    color: #9A9A9A;
    /* 색상 변경 */
    margin: 0;
    /* 마진 제거 */
    text-align: right;
    /* 오른쪽 정렬로 변경 */
    white-space: nowrap;
    /* 한 줄로 표시 */
    overflow: hidden;
    /* 넘치는 부분 숨김 */
    text-overflow: ellipsis;
    /* 넘치면 ... 표시 */
}

/* ====== Section 3: 피부 재생 메커니즘 ====== */
.mechanism-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    padding: 80px 0;
}

.mechanism-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.mechanism-text {
    flex: 1;
    max-width: 800px;
    text-align: right;
    padding-bottom: 50px;
}

.mechanism-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.5;
    color: #000000;
    margin: 0 20px 40px 0;
    position: relative;
}

.mechanism-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 32%;
    width: calc(70%);
    height: 1px;
    background-color: #3B3F53;
}

.mechanism-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 30px;
}

.mechanism-sub .highlight {
    color: #FF7700;
}

.mechanism-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 100;
    font-size: 20px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

.mechanism-footnote-num {
    font-family: 'Pretendard', sans-serif;
    font-weight: 100;
    font-size: 14px;
    color: #000000;
    vertical-align: super;
}

.mechanism-video {
    flex: 1;
    max-width: 600px;
}

.mechanism-video video {
    width: 100%;
    height: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


/* ====== Section 4: 효과 ====== */
.effects-section {
    position: relative;
    min-height: 100vh;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.effects-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    /* 화면 꽉 채우는 섹션 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
}

/* 중앙 약병/버블 */
.center-image {
    position: absolute;
    top: 50%;
    left: 50%;
    /* ← X축을 CSS 변수로 제어 (기본 0px) */
    transform: translate(calc(-50% + var(--shift-x, 0px)), -50%);
    z-index: 1;
    transition: transform .6s ease;
    /* 부드럽게 이동 */
    will-change: transform;
}

.center-image img {
    height: 100%;
    width: 120%;
}

/* 좌/우 통 이미지 공통 */
.effect-text {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    /* 클릭 방해 X */
    width: clamp(220px, 22vw, 360px);
    /* 반응형 크기 */
    transition: transform .5s ease, opacity .5s ease;
    /* 이동/페이드 애니메이션 */
    will-change: transform, opacity;
}

.effect-text img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.collagen-effect,
.volume-effect {
    opacity: 0;
}

/* 위치값 — 참고 이미지 기준. 필요하면 %만 미세조정 */
.collagen-effect {
    left: 24%;
    top: 53%;
    transform: translate(-20px, -50%);
}

.volume-effect {
    right: 12%;
    top: 44%;
    transform: translate(-20px, -50%);
}

.effects-content.images-in .collagen-effect {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: .05s;
    /* 살짝 먼저 */
}

.effects-content.images-in .volume-effect {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: .12s;
    /* 살짝 나중 */
}

/* 왼쪽 텍스트 영역 */
.effects-copy {
    text-align: center;
    position: absolute;
    left: -10%;
    top: 50%;
    transform: translateY(-50%) translateX(-20px);
    /* 등장 전 살짝 왼쪽 */
    max-width: 780px;
    z-index: 2;

    /* 처음엔 숨김 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease, transform .6s ease;
}

/* 타이포 스타일 */
.copy-title {
    font-family: 'Noto Serif KR', serif;
    /* noto serif kr_semibold_32 */
    font-weight: 600;
    font-size: 32px;
    line-height: 1.5;
    margin: 0 0 120px 0;
    color: #000;

}

.copy-body {
    font-family: 'Pretendard', sans-serif;
    /* pretendard_thin_20 */
    font-weight: 200;
    font-size: 20px;
    line-height: 1.9;
    color: #000;
    margin: 0 0 14px 0;
}

.copy-highlight {
    font-family: 'Pretendard', sans-serif;
    /* pretendard_light_24 */
    font-weight: 300;
    font-size: 24px;
    line-height: 1.7;
    color: #000;
    margin: 32px 0 0 0;
}

/* ====== 스크롤 시 전환 상태 ======
     show-text 가 붙으면 포인터 이미지는 오른쪽으로 50px 이동하며 페이드아웃,
     텍스트는 페이드인 */
.effects-content.show-text .collagen-effect {
    transform: translate(50px, -50%);
    /* x=+50px, y=-50% 유지 */
    opacity: 0;
    pointer-events: none;
}

.effects-content.show-text .volume-effect {
    transform: translate(50px, -50%);
    /* x=+50px, y=-50% 유지 */
    opacity: 0;
    pointer-events: none;
}

.effects-content.show-text .effects-copy {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
    padding-top: 100px;
}

/* ====== Section 5: Multi-solution ====== */
.solution-section {
    position: relative;
    min-height: 120vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 80px 0;
    overflow: hidden;
}

.solution-content {
    max-width: 1400px;
    margin-left: 120px;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 0 50px;
    position: relative;
}

.solution-text {
    flex: 1;
    max-width: 900px;
    z-index: 2;
    position: relative;
}

.solution-title {
    font-family: 'Dream Orphans', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.3;
    color: #1D4074;
    margin: 0 0 40px 0;
}

.solution-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    font-size: 20px;
    line-height: 1.8;
    color: #000000;
    margin: 0 0 20px 0;
}

.solution-highlight {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #000000;
}

/* 테이블 스타일 */
.solution-table {
    width: 70vw;
    position: relative;
    z-index: 2;
}

.solution-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.solution-table th {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #ffffff;
    background-color: rgba(143, 164, 211, 0.9);
    backdrop-filter: blur(5px);
    padding: 25px 20px;
    text-align: center;
    border: none;
}

.solution-table td {
    font-family: 'Pretendard', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #000000;
    padding: 22px 20px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
}

.solution-table tbody tr:last-child td {
    border-bottom: none;
}

.solution-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.25);
}

/* 이미지 영역 */
.solution-image {
    position: absolute;
    right: -80%;
    top: 10%;
    transform: translateY(-50%);
    z-index: 1;
    max-width: 800px;
    width: 100%;
}

.solution-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* ====== Section 6: Expected Effects ====== */
.expected-effects-section {
    background-color: #ffffff;
    display: grid;
    justify-items: center;
    align-items: start;
    width: 100vw;
    min-height: 86vh;
    margin-top: -120px;
}

.effects-container {
    background-color: #ffffff;
    overflow: hidden;
    width: 1920px;
    height: 1089px;
    position: relative;
    max-width: 100%;
}

.effects-overlap {
    top: 222px;
    position: absolute;
    width: 1844px;
    height: 867px;
    left: 0;
}

.effects-overlap-group {
    top: 0;
    position: absolute;
    width: 1844px;
    height: 867px;
    left: 0;
}

.effects-header {
    position: absolute;
    width: 266px;
    top: 0;
    left: 161px;
}

.effects-title {
    font-family: "Dream Orphans", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
    padding: 0;
    display: inline;
}

.effects-subtitle {
    font-family: "Pretendard", sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #000000;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    display: inline;
}

.effects-line {
    position: absolute;
    width: 1px;
    height: 271px;
    top: 610px;
    left: 1304px;
    object-fit: cover;
}

.effects-vector {
    position: absolute;
    width: 1830px;
    height: 550px;
    top: 55px;
    left: 0;
    object-fit: cover;
    z-index: 10;
    transition: clip-path 0.8s ease;
    clip-path: inset(0 52% 0 0);
    /* 초기값: 33.33%만 보이기 (1830px의 1/3) */
}

.effects-icon {
    position: absolute;
    width: 63px;
    height: 59px;
    top: 50px;
    left: 351px;
}

.effects-arrow {
    position: absolute;
    width: 15px;
    height: 24px;
    top: 592px;
    left: 880px;
    transition: left 0.8s ease;
}

/* 첫 번째 이미지 (항상 보임) */
.effect-group-1 {
    position: absolute;
    width: 407px;
    height: 261px;
    top: 320px;
    left: 448px;
    margin: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* 1개월 후 효과 (두 번째 스크롤) */
.effect-image-1month {
    position: absolute;
    width: 407px;
    height: 261px;
    top: 320px;
    left: 886px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-rect-1month {
    position: absolute;
    width: 406px;
    height: 82px;
    top: 477px;
    left: 886px;
    background-color: transparent;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-element-1month {
    position: absolute;
    width: 64px;
    height: 18px;
    top: 525px;
    left: 1047px;
    background-color: transparent;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 3개월 후 효과 (세 번째 스크롤) */
.effect-image-3month {
    position: absolute;
    width: 407px;
    height: 261px;
    top: 320px;
    left: 1328px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-rect-3month {
    position: absolute;
    width: 396px;
    height: 82px;
    top: 477px;
    left: 1328px;
    background-color: transparent;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-element-3month {
    position: absolute;
    width: 68px;
    height: 18px;
    top: 528px;
    left: 1500px;
    background-color: transparent;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.olidia-product {
    position: absolute;
    width: 224px;
    height: 460px;
    top: 99px;
    left: 160px;
    margin: 0;
    padding: 0;
}

.olidia-product img {
    border-radius: 120px;
}

.effect-text-1 {
    width: 283px;
    left: 505px;
    position: absolute;
    top: 615px;
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.effect-text-2 {
    width: 329px;
    left: 924px;
    position: absolute;
    top: 615px;
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-text-3 {
    position: absolute;
    width: 354px;
    top: 615px;
    left: 1355px;
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-decoration-1 {
    position: absolute;
    width: 261px;
    height: 407px;
    top: -18345px;
    left: -35610px;
    background-color: transparent;
    border: none;
}

.effect-decoration-2 {
    position: absolute;
    width: 261px;
    height: 407px;
    top: -18345px;
    left: -36052px;
    background-color: transparent;
    border: none;
}

.effect-decoration-3 {
    position: absolute;
    width: 224px;
    height: 460px;
    top: -18544px;
    left: -37186px;
    background-color: transparent;
    border: none;
}

/* 이미지 스타일링 */
.effect-group-1 img,
.effect-image-3month img,
.effect-image-1month img,
.olidia-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 스크롤 상태 클래스 - 올바른 순서로 수정 */
.effects-container.show-second .effect-image-1month,
.effects-container.show-second .effect-rect-1month,
.effects-container.show-second .effect-element-1month,
.effects-container.show-second .effect-text-2 {
    opacity: 1;
}

.effects-container.show-second .effects-vector {
    clip-path: inset(0 26% 0 0);
    /* 2단계: 두 번째 이미지 영역까지 (74%까지 보이기) */
}

.effects-container.show-second .effects-arrow {
    left: 1350px;
    /* 두 번째 이미지 영역 끝으로 이동 */
}

.effects-container.show-third .effect-image-3month,
.effects-container.show-third .effect-rect-3month,
.effects-container.show-third .effect-element-3month,
.effects-container.show-third .effect-text-3 {
    opacity: 1;
}

.effects-container.show-third .effects-vector {
    clip-path: inset(0 0% 0 0);
    /* 3단계: 전체 이미지 크기로 원복 */
}

.effects-container.show-third .effects-arrow {
    left: 1830px;
    /* 전체 이미지 끝으로 이동 */
}