/* 파일 최상단에 추가 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 기본 리셋 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

/* fullPage.js 전용 설정 */
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 헤더 스타일 */
header.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 헤더 오른쪽 영역 */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 로고 - 기본(PC) 크기 */
.logo {
    display: flex;
    align-items: center;
    font-size: 32px;           /* PC에서 조금 더 크게 */
    font-weight: 600;
    color: white;
}

.logo img {
    width: 45px;               /* PC에서 더 큰 이미지 */
    height: 45px;
    margin-right: 15px;
    border-radius: 50%;
}

/* PC 메뉴 */
.pc-menu {
    position: fixed;
    bottom: 30px;
    left: 80%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 25px;
    z-index: 9998;
}

.pc-menu a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.pc-menu a:hover {
    opacity: 0.8;
}

.pc-menu .menu-divider {
    font-size: 18px !important;
    color: white;
    padding: 0;
    transition: color 0.3s ease;
}

/* PC 화면 (1024px 이상) */
@media screen and (min-width: 1024px) {
    header.top-nav {
        padding: 20px 40px;
    }

    /* PC 로고 크기 */
    .logo {
        font-size: 30px;           /* PC에서 더 큰 텍스트 */
    }

    .logo img {
        width: 40px;               /* PC에서 더 큰 이미지 */
        height: 40px;
        margin-right: 15px;
    }

    .pc-menu {
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        background: transparent;
        padding: 0;
        border-radius: 0;
        backdrop-filter: none;
        gap: 30px;
    }

    .pc-menu a {
        font-size: 18px;
    }
}

/* 태블릿 (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    header.top-nav {
        padding: 25px 35px;
    }

    /* 태블릿 로고 크기 */
    .logo {
        font-size: 45px;
    }

    .logo img {
        width: 65px;
        height: 65px;
        margin-right: 18px;
    }

    .pc-menu {
        bottom: 40px;
        padding: 15px 25px;
        gap: 25px;
    }

    .pc-menu a {
        font-size: 15px;
    }
}

/* fullPage.js 컨테이너 */
#fullpage {
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fp-section {
    height: 100vh !important;
    width: 100vw !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;


    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fp-fade {
    opacity: 0 !important;
}
.fp-fade.active {
    opacity: 1 !important;
}

.section {
    height: 100vh !important;
    width: 100vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

/* 히어로 섹션 */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh !important;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
}

.hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

.hero-content {
    z-index: 1;
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

.animate-ready {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
    transition: none !important;
}

.animate-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s ease-out !important;
}

.hero-badge.animate-ready,
.hero-title.animate-ready,
.hero-divider.animate-ready,
.hero-description.animate-ready,
.btn-store.animate-ready {
    opacity: 0;
    transform: translateY(-20px);
}

.hero-badge.animate-active,
.hero-title.animate-active,
.hero-divider.animate-active,
.hero-description.animate-active,
.btn-store.animate-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

.hero-content .since {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0;
}

.divider {
    width: 50px;
    height : 20px;
    margin: 20px auto;
}

.hero-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-store {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #fff;
    border-radius: 25px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-store:hover {
    background: #fff;
    color: #000;
}

.hero-footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

.hero-footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}

.hero-footer a:hover {
    text-decoration: underline;
}

/* fullPage 네비게이션 - 표시만 하고 클릭 불가 */
#fp-nav {
    position: fixed !important;
    z-index: 100 !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important; /* 클릭 비활성화 */
}

#fp-nav ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#fp-nav ul li {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    margin: 10px 0 !important;
}

#fp-nav ul li a {
    display: block !important;
    position: relative !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(200, 200, 200, 0.6) !important;
    cursor: default !important; /* 기본 커서로 변경 */
    text-decoration: none !important;
    transition: background 0.3s ease !important;
    border: none !important;
    pointer-events: none !important; /* 클릭 비활성화 */
}

/* fullPage.js 내부 span 요소도 같은 스타일 적용 */
#fp-nav ul li a span {
    display: none !important;
}

#fp-nav ul li a.active,
#fp-nav ul li .active {
    background: #333 !important;
}

/* hover 효과 비활성화 */
#fp-nav ul li a:hover {
    background: rgba(200, 200, 200, 0.6) !important; /* 기본 상태와 동일 */
}

#fp-nav ul li a.active:hover {
    background: #333 !important; /* active 상태와 동일 */
}

/* jQuery fullPage.js 전용 네비게이션 */
.fp-slidesNav {
    display: none !important;
}

/* 반응형 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-text {
        font-size: 14px;
        padding: 0 20px;
    }

    #fp-nav {
        right: 10px !important;
    }
}

/* fullPage.js 워터마크 제거 */
#fp-watermark {
    display: none !important;
}

.fp-watermark {
    display: none !important;
}

[class*="watermark"] {
    display: none !important;
}

a[href*="alvarotrigo.com"] {
    display: none !important;
}

/*----------- section3-6 고정 박스 (절대 크기 고정) -----------*/

/* 고정 왼쪽 박스 - 화면 왼쪽 40%를 꽉 채움 */
.fixed-left-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 40%; /* 화면의 정확히 40% */
    height: 100vh;
    background: none;
    overflow: hidden;
    z-index: 5;
    transform: translateX(-100%);
    opacity: 1; /* 항상 1로 고정 - 페이드인 없음 */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* opacity transition 완전 제거 */
    pointer-events: none;
    display: none; /* 기본적으로 숨김 */
    visibility: hidden; /* 추가 숨김 보장 */
}


.fixed-left-box.show {
    display: block !important; /* 더 강력한 표시 */
    visibility: visible !important; /* 더 강력한 표시 */
    transform: translateX(0) !important;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* === 섹션 6->7 전환을 위한 스크롤 애니메이션 (비활성화 - 즉시 숨김으로 변경) === */
/*
.fixed-left-box.scroll-out,
.fixed-right-box.scroll-out {
    transform: translateY(-60vh) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-out, visibility 0s linear 0.8s !important;
}
*/

/* 섹션 7->6 역방향 전환: 아래에서 위로 스르륵 올라옴 (최우선) */
.fixed-left-box.scroll-in,
.fixed-right-box.scroll-in {
    display: block !important; /* 강제 표시 */
    visibility: visible !important; /* 강제 보이기 */
    transform: translateY(0) translateX(0) !important; /* X축도 명시적으로 0 */
    opacity: 1 !important;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease-out !important;
}

/* 오른쪽 박스 scroll-in 시 flex 표시 */
.fixed-right-box.scroll-in {
    display: flex !important;
}

/* 스크롤 애니메이션 클래스가 있을 때는 다른 모든 transform 무시 */
.fixed-left-box.scroll-out,
.fixed-left-box.scroll-in {
    /* 최고 우선순위로 다른 모든 클래스 무효화 */
}

.fixed-right-box.scroll-out,
.fixed-right-box.scroll-in {
    /* 최고 우선순위로 다른 모든 클래스 무효화 */
}

/* 섹션3에서 초기 상태 - 완전히 왼쪽에 숨겨진 상태 */
.fixed-left-box.section3-hidden {
    transform: translateX(-100%) !important;
    opacity: 1 !important; /* 페이드인 없음! */
    transition: none !important;
}

/* 섹션3 전용 왼쪽 박스 - 페이드 없이 순수 슬라이딩만 */
.fixed-left-box.section3-slide {
    transform: translateX(0) !important;
    opacity: 1 !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}


/* ✅ 배경 이미지 - 원본 비율 유지하면서 fit */
.fixed-left-box .left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 박스 전체 너비(40%)를 꽉 채움 */
    height: 100vh; /* 박스 전체 높이를 꽉 채움 */
    object-fit: cover; /* 비율 유지하며 박스를 완전히 채움 */
    object-position: center; /* 중앙 기준 */
    opacity: 1; /* 페이드인 방지 - 항상 보임 */
    /* transition 제거 - 페이드인 완전 차단 */
}


.fixed-left-box .left-bg.show {
    opacity: 1;
}


/* ✅ 오버레이 텍스트 이미지 - 절대 크기로 고정 */
.fixed-left-box .left-overlay {
    position: absolute;
    right: 100px; /* 절대 픽셀값으로 고정 */
    top: 50%;
    transform: translateY(-50%);
    width: auto; /* 원본 가로 크기 유지 */
    height: auto; /* 원본 세로 크기 유지 */
    max-width: 500px; /* 절대 픽셀값으로 최대 크기 제한 */
    max-height: 600px; /* 절대 픽셀값으로 최대 높이 제한 */
    z-index: 3;
    opacity: 1;
    object-fit: contain; /* 이미지가 잘리지 않게 contain */
}

/* 모든 화면에서 동일한 절대 크기 유지 - 반응형 제거 */

.fixed-left-box .box-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center; /* 텍스트 중앙 정렬 추가 */
}

/* ✅ 왼쪽 이미지 - 원본 비율 유지하면서 fit */
.fixed-left-box .left-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 박스 전체 너비(40%)를 꽉 채움 */
    height: 100vh; /* 박스 전체 높이를 꽉 채움 */
    object-fit: cover; /* 비율 유지하며 박스를 완전히 채움 */
    object-position: center; /* 중앙 기준 */
    opacity: 1; /* 페이드인 방지 - 항상 보임 */
    /* transition 제거 - 페이드인 완전 차단 */
}

.fixed-left-box .left-image.show {
    opacity: 1;
}

/* 고정 오른쪽 박스 - 왼쪽 박스 바로 옆에 고정 배치 */
/* 고정 오른쪽 박스 - 왼쪽 40% 옆에 고정 배치 */
.fixed-right-box {
    position: fixed;
    left: 40%; /* 왼쪽 박스(40%) 바로 옆에 시작 */
    top: 0;
    width: 60%; /* 나머지 60% 화면 차지 */
    height: 100vh;
    background-color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center; /* 중앙 정렬 */
    z-index: 5;
    pointer-events: none;
    padding: 0;
    visibility: hidden; /* 추가 숨김 보장 */
}

.fixed-right-box.show {
    display: flex !important; /* 더 강력한 표시 */
    visibility: visible !important; /* 더 강력한 표시 */
}

.fixed-right-box .white-box-content {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬로 변경 */
    width: 100%;
    height: 100%;
    padding-left: 50px; /* 왼쪽에 적당한 간격 추가 */
}

.fixed-right-box .right-image {
    width: auto; /* 🔥원본 비율 유지 */
    height: auto; /* 🔥 원본 비율 유지 */
    max-width: 100%; /* 🔥 핵심: 컨테이너 너비를 넘지 않도록 */
    max-height: 100%; /* 🔥 핵심: 컨테이너 높이를 넘지 않도록 */
    object-fit: contain; /* 🔥 변경: 이미지 전체가 보이도록 */
    object-position: center; /* 🔥 유지: 중앙 정렬 */
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    display: block;
}

.fixed-right-box .right-image.show {
    opacity: 1;
    transform: translateX(0);
}

/* 방향별 짧은 슬라이드 애니메이션 - 부드럽게 수정 */
/* 순방향 슬라이드 (오른쪽에서 왼쪽으로) - 3→4→5→6→7 */
.fixed-right-box .right-image.slide-from-right {
    transform: translateX(80px) !important; /* !important로 확실히 적용 */
    opacity: 0;
    transition: none; /* 초기 위치에서는 transition 없음 */
}

.fixed-right-box .right-image.slide-from-right.show {
    opacity: 1;
    transform: translateX(0) !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
}

/* 역방향 슬라이드 (왼쪽에서 오른쪽으로) - 7→6→5→4→3 */
.fixed-right-box .right-image.slide-from-left {
    transform: translateX(-80px) !important; /* !important로 확실히 적용 */
    opacity: 0;
    transition: none; /* 초기 위치에서는 transition 없음 */
}

.fixed-right-box .right-image.slide-from-left.show {
    opacity: 1;
    transform: translateX(0) !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
}

/* 모바일 버전 푸터 */
.center-footer {
    text-align: center;
    transition: background-color 0.5s ease;
}

.center-contact {
    font-size: 16px;
    margin-bottom: 15px;
    transition: color 0.5s ease; /* 부드러운 색상 전환 */
}

.center-contact a {
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.5s ease; /* 링크 색상 전환 */
}

.center-info {
    font-size: 25px;
    line-height: 1.5;
    transition: color 0.5s ease; /* 부드러운 색상 전환 */
}

.dome-link, .contract-link {
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.5s ease;
}

.dome-link:hover, .contract-link:hover {
    opacity: 0.8;
}

/* --- 모바일 Safari 푸터 깨짐 대응 --- */

/* 1. 텍스트 확대 방지 */
html {
    -webkit-text-size-adjust: 100%;
}

/* 2. 푸터 전체 구조 안정화 */
.center-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 20px 10px env(safe-area-inset-bottom);
    text-align: center;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 3. 하위 텍스트 정렬 */
.center-contact,
.center-info {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 25px;
    line-height: 1.0;
    white-space: nowrap;
}

/* 4. 링크 스타일 안정화 */
.center-footer a,
.center-contact a,
.center-info a {
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.center-footer a:hover {
    opacity: 0.7;
}

/* 5. iOS Safari 전용 폰트 줄바꿈 버그 대응 */
@supports (-webkit-touch-callout: none) {
    .center-footer {
        font-size: 14px;
    }
}

/* 6. 작은 모바일 화면(375px 이하)에서 폰트 축소 */
@media screen and (max-width: 375px) {
    .center-footer {
        font-size: 12px;
    }
}

/* === iOS Safari 100vh 보정 및 푸터 겹침 방지 === */
:root {
    --vh: 1vh;
}

/* --- 모바일 푸터 고정 공통 스타일 --- */
.center-footer {
    position: fixed;
    padding-bottom: 30px !important;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 20px 10px env(safe-area-inset-bottom);
    text-align: center;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
    background: transparent;
    transition: background-color 0.4s ease, color 0.4s ease;
    pointer-events: none; /* 섹션 터치 스크롤 방해 방지 */
}

.center-footer * {
    pointer-events: auto; /* 링크는 클릭 가능하게 */
}

.center-contact,
.center-info {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 26px;
    line-height: 1.2;
    white-space: nowrap;
    color: #9fa0a0;
    text-align: center;
}

.center-contact a,
.center-info a {
    text-decoration: none;
    color: inherit;
    margin: 0 8px;
    transition: color 0.3s ease;
}

.center-footer a:hover {
    opacity: 0.8;
}

/* --- 모바일 Safari 대응 --- */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
    }

    #fullpage, .fp-section, .section {
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
        transition: transform 0s !important; /* Safari가 transition 중에 translate 보정 안 하는 버그 방지 */
    }




    .center-footer {
        position: fixed !important;
        bottom: 0 !important;
        width: 100% !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 20px));
        z-index: 999 !important;
        background: transparent;
    }
}

/* 작은 화면 (375px 이하) */
@media screen and (max-width: 375px) {
    .center-footer {
        font-size: 12px;
        padding: 16px 8px env(safe-area-inset-bottom);
    }
}

/* === Safari 100vh 보정 === */
:root {
    --vh: 1vh;
    --real-vh: 1vh;
}

/* 모바일 Safari 전용 뷰포트 고정 */
@supports (-webkit-touch-callout: none) {
    #fullpage,
    .fp-section,
    .section {
        height: calc(var(--real-vh, 1vh) * 100) !important;
        min-height: calc(var(--real-vh, 1vh) * 100) !important;
        max-height: calc(var(--real-vh, 1vh) * 100) !important;
    }

    /* 뷰포트 변경 시에도 위치 고정 */
    #fullpage {
        /*position: fixed !important;*/
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        /*overflow: hidden !important;*/
    }
}

/* 일반 브라우저용 fallback */
#fullpage:not([style*="--real-vh"]),
.fp-section:not([style*="--real-vh"]),
.section:not([style*="--real-vh"]) {
    min-height: calc(var(--vh, 1vh) * 100) !important;
}

/* 마지막 섹션 아래 여백 제거 (푸터가 항상 고정이라 필요 없음) */
.fp-section:last-child,
.section:last-child {
    padding-bottom: 0 !important;
}

/* === 섹션 하단 푸터 간격 확보 === */
.section,
.fp-section {
    padding-bottom: 120px !important; /* 푸터 높이만큼 공간 확보 */
    box-sizing: border-box;
}

/* 모바일 화면에서만 적용 (푸터 고정 높이에 맞춤) */
@media screen and (max-width: 1024px) {
    .section,
    .fp-section {
        padding-bottom: 140px !important; /* 모바일 푸터 + safe area 고려 */
    }
}

/* === 모바일 전용 폰트 크기 보정 === */
@media screen and (max-width: 480px) {
    html, body {
        font-size: 18px !important; /* 모바일 기본 폰트 크기 확대 */
        -webkit-text-size-adjust: 100%;
    }

    /* 주요 제목 계열 */
    h1, .slide-title {
        font-size: 1.8rem !important; /* 약 32px 수준 */
    }

    .slide-description {
        font-size: 1.1rem !important; /* 약 20px 수준 */
        line-height: 1.7;
    }

    .store-btn {
        font-size: 1.1rem !important; /* 약 20px */
        padding: 16px 0 !important;
    }

    .menu-carousel span {
        font-size: 1.2rem !important; /* 메뉴 텍스트 확대 */
    }

    .center-footer {
        font-size: 0.95rem !important; /* 푸터 글자도 약간 키움 */
    }
}
/* 🚫 section3 왼쪽 박스 페이드인 완전 차단 */
#section3 .fixed-left-box {
    opacity: 1 !important;
    transition: none !important;
}

/* 등장 시 슬라이드만 작동 */
#section3 .fixed-left-box.show,
#section3 .fixed-left-box.section3-slide {
    transform: translateX(0) !important;
    opacity: 1 !important;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 👇 내부 이미지(배경, 오버레이) 슬라이드 + 페이드 */
#section3 .fixed-left-box .left-bg,
#section3 .fixed-left-box .left-overlay {
    transform: translateX(-60px);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#section3 .fixed-left-box .left-bg.slide-in,
#section3 .fixed-left-box .left-overlay.slide-in {
    transform: translateX(0);
    opacity: 1;
}

/* ✅ opacity 조작 방어용 (JS가 변경해도 무시하도록) */
#section3 .fixed-left-box[style*="opacity"] {
    opacity: 1 !important;
}

/* 🎯 모든 섹션 통일: show 클래스 사용 */
/* 섹션3~6에서 leftBox 강제 표시 - JavaScript 간섭 방지 */
#section3 .fixed-left-box,
#section4 .fixed-left-box,
#section5 .fixed-left-box,
#section6 .fixed-left-box {
    transform: translateX(0) !important;
    opacity: 1 !important;
    display: block !important;
}

/* 섹션3~6에서 show 클래스가 없어도 표시 */
body.fp-viewing-section3 .fixed-left-box,
body.fp-viewing-section4 .fixed-left-box,
body.fp-viewing-section5 .fixed-left-box,
body.fp-viewing-section6 .fixed-left-box {
    transform: translateX(0) !important;
    opacity: 1 !important;
    display: block !important;
}