{"id":15,"date":"2026-06-08T04:52:11","date_gmt":"2026-06-08T04:52:11","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ed%9a%8c%ec%82%ac%ec%86%8c%ea%b0%9c\/%ec%97%b0%ed%98%81\/"},"modified":"2026-06-08T07:36:49","modified_gmt":"2026-06-08T07:36:49","slug":"%ec%97%b0%ed%98%81","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ed%9a%8c%ec%82%ac%ec%86%8c%ea%b0%9c\/%ec%97%b0%ed%98%81\/","title":{"rendered":"\uc5f0\ud601"},"content":{"rendered":"    <!-- \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \ub85c\ub4dc -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vanilla-tilt\/1.8.0\/vanilla-tilt.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* =========================================\r\n           ROOT & RESET\r\n        ========================================= *\/\r\n        .ch-wrap {\r\n            --c-bg: #fdfdfd; \r\n            --c-bg-soft: #ffffff;\r\n            --c-primary: #FF3366; \r\n            --c-secondary: #00E5FF; \r\n            --c-tertiary: #FFE600; \r\n            --c-purple: #8A2BE2;\r\n            --c-text-main: #111111;\r\n            --c-text-muted: #555555;\r\n\r\n            font-family: 'Pretendard', -apple-system, sans-serif;\r\n            background-color: var(--c-bg);\r\n            color: var(--c-text-main);\r\n            overflow: hidden; \r\n            width: 100%;\r\n            margin-top: -80px; \r\n            position: relative;\r\n        }\r\n\r\n        .ch-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .ch-wrap img { max-width: 100%; height: auto; display: block; }\r\n        \r\n        .ch-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 10; }\r\n        \r\n        \/* \ubc30\uacbd 3D \ub5a0\ub2e4\ub2c8\ub294 \uc624\ube0c\uc81d\ud2b8 *\/\r\n        .ch-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .ch-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: floatObj 15s infinite alternate ease-in-out; }\r\n        .ch-shape-1 { width: 500px; height: 500px; background: var(--c-primary); top: 10%; left: -150px; }\r\n        .ch-shape-2 { width: 600px; height: 600px; background: var(--c-secondary); top: 50%; right: -250px; animation-delay: -5s; }\r\n        .ch-shape-3 { width: 400px; height: 400px; background: var(--c-tertiary); bottom: 10%; left: 5%; animation-delay: -10s; }\r\n        @keyframes floatObj { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(150px, 100px) scale(1.3); } }\r\n\r\n        \/* =========================================\r\n           1. HERO SECTION \r\n        ========================================= *\/\r\n        .ch-hero {\r\n            min-height: 85vh; \r\n            display: flex; align-items: center; justify-content: center;\r\n            position: relative; z-index: 2; padding-top: 80px;\r\n        }\r\n        .ch-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .ch-hero-subtitle {\r\n            display: inline-block; padding: 8px 25px; \r\n            background: rgba(0, 229, 255, 0.1); color: #00b8cc;\r\n            font-size: 1.1rem; font-weight: 800; border-radius: 50px; letter-spacing: 0.1em;\r\n            margin-bottom: 30px; border: 1px solid rgba(0, 229, 255, 0.3);\r\n        }\r\n        \r\n        .ch-hero-title {\r\n            font-size: clamp(2.5rem, 6vw, 4.5rem); \r\n            font-weight: 900; line-height: 1.2;\r\n            color: var(--c-text-main);\r\n            letter-spacing: -0.03em;\r\n            white-space: nowrap; \r\n        }\r\n        \r\n        .ch-hero-title span { \r\n            background: linear-gradient(to right, var(--c-primary), var(--c-purple), var(--c-secondary));\r\n            background-size: 200% auto;\r\n            -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n            animation: gradientText 5s linear infinite;\r\n        }\r\n        @keyframes gradientText { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n        \/* =========================================\r\n           2. TIMELINE SECTION (\uc2a4\ud06c\ub864 \uc5f0\ud601)\r\n        ========================================= *\/\r\n        .ch-timeline-section {\r\n            padding: 120px 0;\r\n            background: var(--c-bg);\r\n            position: relative;\r\n            z-index: 5;\r\n        }\r\n        .ch-timeline-header { text-align: center; margin-bottom: 100px; }\r\n        .ch-timeline-header h2 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--c-text-main); margin-bottom: 20px; }\r\n        \r\n        \/* \uc911\uc559 \ud0c0\uc784\ub77c\uc778 \uc120 *\/\r\n        .ch-timeline-wrap { position: relative; width: 100%; margin: 0 auto; }\r\n        .ch-line-bg {\r\n            position: absolute; left: 50%; top: 0; bottom: 0; width: 4px;\r\n            background: rgba(0,0,0,0.05); transform: translateX(-50%); border-radius: 2px;\r\n        }\r\n        .ch-line-progress {\r\n            position: absolute; left: 50%; top: 0; width: 4px; height: 0;\r\n            background: linear-gradient(to bottom, var(--c-primary), var(--c-secondary));\r\n            transform: translateX(-50%); border-radius: 2px; z-index: 2;\r\n        }\r\n\r\n        \/* \uac1c\ubcc4 \uc5f0\ud601 \uc544\uc774\ud15c \ub808\uc774\uc544\uc6c3 *\/\r\n        .ch-item {\r\n            display: flex; justify-content: space-between; align-items: center;\r\n            margin-bottom: 120px; position: relative; width: 100%;\r\n        }\r\n        .ch-item:nth-child(even) { flex-direction: row-reverse; }\r\n\r\n        \/* \uc5f0\ub3c4 \ubc0f \ucf58\ud150\uce20 \uc601\uc5ed *\/\r\n        .ch-year-wrap { width: 45%; display: flex; align-items: center; }\r\n        .ch-item:nth-child(odd) .ch-year-wrap { justify-content: flex-end; padding-right: 50px; text-align: right; }\r\n        .ch-item:nth-child(even) .ch-year-wrap { justify-content: flex-start; padding-left: 50px; text-align: left; }\r\n\r\n        .ch-content { width: 45%; position: relative; }\r\n\r\n        \/* \uc5f0\ub3c4 \ud14d\uc2a4\ud2b8 *\/\r\n        .ch-year {\r\n            font-size: clamp(4rem, 8vw, 7rem); font-weight: 900; font-family: 'Arial Black', sans-serif;\r\n            color: transparent; -webkit-text-stroke: 2px rgba(0,0,0,0.1);\r\n            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        .ch-item.active .ch-year {\r\n            color: var(--c-text-main); -webkit-text-stroke: 0px;\r\n            text-shadow: 0 20px 40px rgba(0,0,0,0.1); transform: scale(1.1);\r\n        }\r\n\r\n        \/* \uc911\uc559 \uc5f0\uacb0 \uc810 (Dot) *\/\r\n        .ch-dot {\r\n            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0);\r\n            width: 24px; height: 24px; background: #fff; border: 5px solid var(--c-primary);\r\n            border-radius: 50%; z-index: 3; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        }\r\n        .ch-item.active .ch-dot {\r\n            transform: translate(-50%, -50%) scale(1);\r\n            box-shadow: 0 0 20px rgba(255, 51, 102, 0.6);\r\n        }\r\n\r\n        \/* \uc5f0\ud601 3D \uce74\ub4dc \ub514\uc790\uc778 *\/\r\n        .ch-card {\r\n            background: #ffffff; padding: 40px; border-radius: 30px;\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03);\r\n            transform-style: preserve-3d; transition: all 0.4s ease; cursor: pointer;\r\n        }\r\n        .ch-card:hover {\r\n            box-shadow: 0 40px 80px rgba(0, 229, 255, 0.15); border-color: rgba(0, 229, 255, 0.3);\r\n            transform: translateY(-10px);\r\n        }\r\n        .ch-card-inner { transform: translateZ(40px); }\r\n        .ch-card h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; color: var(--c-text-main); }\r\n        .ch-card ul { list-style: none; padding: 0; margin: 0; }\r\n        .ch-card li {\r\n            font-size: 1.15rem; color: var(--c-text-muted); margin-bottom: 12px;\r\n            display: flex; align-items: flex-start; line-height: 1.6; word-break: keep-all;\r\n        }\r\n        .ch-card li::before {\r\n            content: '\u2713'; color: var(--c-primary); font-weight: 900; margin-right: 12px; font-size: 1.2rem;\r\n        }\r\n\r\n        \/* =========================================\r\n           3. MARQUEE BANNER (\uc218\uc815\ub41c \ub2e4\ud06c & \ud504\ub9ac\ubbf8\uc5c4 \ud14c\ub9c8)\r\n        ========================================= *\/\r\n        .ch-marquee {\r\n            \/* \ud48b\ud130\uc640 \uc5b4\uc6b8\ub9ac\ub294 \ubb35\uc9c1\ud55c \ub2e4\ud06c \ubc30\uacbd\uc73c\ub85c \ubcc0\uacbd *\/\r\n            background: #111111;\r\n            padding: 60px 0; \r\n            white-space: nowrap; \r\n            overflow: hidden; \r\n            display: flex; \r\n            z-index: 5; \r\n            position: relative;\r\n        }\r\n        .ch-marquee-text {\r\n            font-size: clamp(3rem, 6vw, 5rem);\r\n            font-weight: 900; \r\n            text-transform: uppercase; \r\n            \/* \ud14d\uc2a4\ud2b8\ub294 \ud22c\uba85\ud558\uac8c, \ud14c\ub450\ub9ac\ub9cc \ud558\uc597\uac8c \ucc98\ub9ac\ud558\uc5ec \uc138\ub828\ubbf8 \ubd80\uc5ec *\/\r\n            color: transparent;\r\n            -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);\r\n            padding-right: 50px; \r\n            display: inline-block; \r\n            letter-spacing: 0.05em;\r\n            transition: all 0.5s ease;\r\n            cursor: default;\r\n        }\r\n        \/* \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \uc2dc \ud14c\ub450\ub9ac\uac00 \uc0ac\ub77c\uc9c0\uace0 \ud14d\uc2a4\ud2b8\uac00 \ud558\uc597\uac8c \ucc44\uc6cc\uc9c0\uba70 \ube5b\ub098\ub294 \ud6a8\uacfc *\/\r\n        .ch-marquee:hover .ch-marquee-text {\r\n            color: #ffffff;\r\n            -webkit-text-stroke: 0px transparent;\r\n            text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);\r\n        }\r\n\r\n        \/* =========================================\r\n           \ubaa8\ubc14\uc77c \ubc18\uc751\ud615 \ucd5c\uc801\ud654\r\n        ========================================= *\/\r\n        @media (max-width: 992px) {\r\n            .ch-hero { min-height: 60vh; padding-top: 60px; }\r\n            .ch-hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); white-space: normal; }\r\n            .ch-timeline-section { padding: 80px 0; }\r\n            \r\n            \/* \ud0c0\uc784\ub77c\uc778 \uc88c\uce21 \uc815\ub82c \ub808\uc774\uc544\uc6c3 \ubcc0\uacbd *\/\r\n            .ch-line-bg, .ch-line-progress { left: 30px; transform: none; }\r\n            .ch-item { flex-direction: column !important; align-items: flex-start; margin-bottom: 80px; }\r\n            \r\n            .ch-year-wrap { width: 100%; justify-content: flex-start !important; padding: 0 0 20px 80px !important; text-align: left !important; }\r\n            .ch-year { font-size: 3.5rem; }\r\n            \r\n            .ch-content { width: 100%; padding-left: 80px; }\r\n            .ch-card { padding: 30px 20px; border-radius: 20px; }\r\n            .ch-card h3 { font-size: 1.4rem; }\r\n            .ch-card li { font-size: 1rem; }\r\n            \r\n            \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c Dot \uc704\uce58\ub97c \uc5f0\ub3c4 \ud14d\uc2a4\ud2b8 \uc606\uc73c\ub85c \uc774\ub3d9 *\/\r\n            .ch-dot { left: 30px; top: 30px; transform: translate(-50%, -50%) scale(0); }\r\n            .ch-item.active .ch-dot { transform: translate(-50%, -50%) scale(1); }\r\n            \r\n            .ch-marquee { padding: 40px 0; }\r\n            .ch-marquee-text { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"ch-wrap\">\r\n        \r\n        <!-- \ubc30\uacbd \ub2e4\uc774\ub0b4\ubbf9 \ub3c4\ud615 -->\r\n        <div class=\"ch-bg-shapes\">\r\n            <div class=\"ch-shape ch-shape-1\"><\/div>\r\n            <div class=\"ch-shape ch-shape-2\"><\/div>\r\n            <div class=\"ch-shape ch-shape-3\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- 1. Hero Section -->\r\n        <section class=\"ch-hero\">\r\n            <div class=\"ch-container ch-hero-content\">\r\n                <div class=\"ch-hero-subtitle gs-bounce\">HISTORY<\/div>\r\n                <h1 class=\"ch-hero-title gs-fade-up\">\ub04a\uc784\uc5c6\ub294 \ub3c4\uc804\uacfc \ud601\uc2e0\uc758<br>\ubc1c\uc790\ucde8 <span>B.LANDING<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. Timeline Section -->\r\n        <section class=\"ch-timeline-section\">\r\n            <div class=\"ch-container\">\r\n                <div class=\"ch-timeline-header gs-fade-up\">\r\n                    <h2>\uc5f0\ud601 \ubc0f \uc2e4\uc801<\/h2>\r\n                <\/div>\r\n\r\n                <div class=\"ch-timeline-wrap\">\r\n                    <div class=\"ch-line-bg\"><\/div>\r\n                    <div class=\"ch-line-progress\"><\/div>\r\n\r\n                    <!-- 2026\ub144 -->\r\n                    <div class=\"ch-item\">\r\n                        <div class=\"ch-dot\"><\/div>\r\n                        <div class=\"ch-year-wrap\">\r\n                            <div class=\"ch-year\">2026<\/div>\r\n                        <\/div>\r\n                        <div class=\"ch-content\">\r\n                            <div class=\"ch-card\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.1\">\r\n                                <div class=\"ch-card-inner\">\r\n                                    <h3>\ub514\uc9c0\ud138 \ud601\uc2e0\uc758 \uc0c8\ub85c\uc6b4 \ub3c4\uc57d<\/h3>\r\n                                    <ul>\r\n                                        <li>B.LANDING \ubc95\uc778 \uc124\ub9bd \ubc0f \uac15\ub0a8 \uc0ac\uc625 \ud655\uc7a5 \uc774\uc804<\/li>\r\n                                        <li>\ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \ub514\uc790\uc778 R&D \uc5f0\uad6c\uc18c \uacf5\uc2dd \uac1c\uc18c<\/li>\r\n                                        <li>\uae00\ub85c\ubc8c \uc6f9 \uc5b4\uc6cc\ub4dc '\uc62c\ud574\uc758 \uc774\ub178\ubca0\uc774\uc158 \uc5d0\uc774\uc804\uc2dc' \ub300\uc0c1 \uc218\uc0c1<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- 2025\ub144 -->\r\n                    <div class=\"ch-item\">\r\n                        <div class=\"ch-dot\"><\/div>\r\n                        <div class=\"ch-year-wrap\">\r\n                            <div class=\"ch-year\">2025<\/div>\r\n                        <\/div>\r\n                        <div class=\"ch-content\">\r\n                            <div class=\"ch-card\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.1\">\r\n                                <div class=\"ch-card-inner\">\r\n                                    <h3>\uc2dc\uc7a5 \ud655\ub300 \ubc0f \ud30c\ud2b8\ub108\uc2ed \uac15\ud654<\/h3>\r\n                                    <ul>\r\n                                        <li>\uc8fc\uc694 \ub300\uae30\uc5c5(IT, \uae08\uc735 \ubd84\uc57c) \uacf5\uc2dd \uc804\ub2f4 \uc5d0\uc774\uc804\uc2dc \uc120\uc815<\/li>\r\n                                        <li>\ub204\uc801 \uc778\ud130\ub799\ud2f0\ube0c \uc6f9 \ud504\ub85c\uc81d\ud2b8 500\uac74 \ub3cc\ud30c<\/li>\r\n                                        <li>\ub300\ud55c\ubbfc\uad6d \ub514\uc9c0\ud138 \ub9c8\ucf00\ud305 \uc5b4\uc6cc\ub4dc UI\/UX \ubd80\ubb38 \ubcf8\uc0c1 \uc218\uc0c1<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- 2024\ub144 -->\r\n                    <div class=\"ch-item\">\r\n                        <div class=\"ch-dot\"><\/div>\r\n                        <div class=\"ch-year-wrap\">\r\n                            <div class=\"ch-year\">2024<\/div>\r\n                        <\/div>\r\n                        <div class=\"ch-content\">\r\n                            <div class=\"ch-card\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.1\">\r\n                                <div class=\"ch-card-inner\">\r\n                                    <h3>\ud50c\ub7ab\ud3fc \ub860\uce6d \ubc0f \uc870\uc9c1 \uc815\ube44<\/h3>\r\n                                    <ul>\r\n                                        <li>B.LANDING \uc790\uccb4 \uc778\ud130\ub799\ud2f0\ube0c \ubaa8\uc158 \ud15c\ud50c\ub9bf \ud50c\ub7ab\ud3fc \ub860\uce6d<\/li>\r\n                                        <li>\ub514\uc9c0\ud138 \ub9c8\ucf00\ud305 \ubcf8\ubd80 \uc2e0\uc124 \ubc0f \uc804\ubb38 \uc778\ub825 \ub300\uaddc\ubaa8 \ud655\ucda9<\/li>\r\n                                        <li>\uc6b0\uc218 \ubca4\ucc98\uae30\uc5c5 \uc778\uc99d \ud68d\ub4dd<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- 2023\ub144 -->\r\n                    <div class=\"ch-item\">\r\n                        <div class=\"ch-dot\"><\/div>\r\n                        <div class=\"ch-year-wrap\">\r\n                            <div class=\"ch-year\">2023<\/div>\r\n                        <\/div>\r\n                        <div class=\"ch-content\">\r\n                            <div class=\"ch-card\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.1\">\r\n                                <div class=\"ch-card-inner\">\r\n                                    <h3>B.LANDING\uc758 \uc2dc\uc791<\/h3>\r\n                                    <ul>\r\n                                        <li>\ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \ud504\ub85c\uc81d\ud2b8 \uc804\ubb38 \ud300 B.LANDING \uacb0\uc131<\/li>\r\n                                        <li>\ucd08\uae30 \uc720\ub9dd \uc2a4\ud0c0\ud2b8\uc5c5 \ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0 \uad6c\ucd95 \uc9c0\uc6d0 \uc0ac\uc5c5 \uc804\uac1c<\/li>\r\n                                        <li>\ud601\uc2e0\uc801\uc778 \uc6f9 \ub514\uc790\uc778 \uc194\ub8e8\uc158 \uc11c\ube44\uc2a4 \uae30\ud68d \ubc0f \ud14c\uc2a4\ud2b8 \uc644\ub8cc<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. Marquee Banner (\ub2e4\ud06c \ud504\ub9ac\ubbf8\uc5c4 \ud14c\ub9c8 \uc801\uc6a9) -->\r\n        <section class=\"ch-marquee\">\r\n            <div class=\"ch-marquee-track\">\r\n                <span class=\"ch-marquee-text\">HISTORY BEYOND LIMITS \u2726 B.LANDING \u2726 <\/span>\r\n                <span class=\"ch-marquee-text\">HISTORY BEYOND LIMITS \u2726 B.LANDING \u2726 <\/span>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n\r\n            \/\/ 1. \uc0c1\ub2e8 \ud14d\uc2a4\ud2b8 \ubc14\uc6b4\uc2a4 \ubc0f \ub4f1\uc7a5 \ud6a8\uacfc\r\n            gsap.fromTo(\".gs-bounce\", \r\n                { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"bounce.out\" }\r\n            );\r\n            \r\n            \/\/ \uba54\uc778 \ud0c0\uc774\ud2c0 \uc2a4\ubb34\uc2a4\ud558\uac8c \uc62c\ub77c\uc624\uae30\r\n            gsap.fromTo(\".gs-fade-up.ch-hero-title\", \r\n                { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 1.2, delay: 0.2, ease: \"power4.out\" }\r\n            );\r\n            \r\n            gsap.fromTo(\".ch-timeline-header\", \r\n                { y: 60, opacity: 0 }, \r\n                { y: 0, opacity: 1, duration: 1, ease: \"power3.out\", scrollTrigger: { trigger: \".ch-timeline-header\", start: \"top 85%\" } }\r\n            );\r\n\r\n            \/\/ 2. \ud0c0\uc784\ub77c\uc778 \uc9c4\ud589 \uc120 (Line Progress) \uc560\ub2c8\uba54\uc774\uc158\r\n            const timelineWrap = document.querySelector('.ch-timeline-wrap');\r\n            if(timelineWrap) {\r\n                gsap.to('.ch-line-progress', {\r\n                    height: '100%',\r\n                    ease: 'none',\r\n                    scrollTrigger: {\r\n                        trigger: timelineWrap,\r\n                        start: 'top center', \r\n                        end: 'bottom center', \r\n                        scrub: 0.5 \r\n                    }\r\n                });\r\n            }\r\n\r\n            \/\/ 3. \uac1c\ubcc4 \uc5f0\ud601 \uc544\uc774\ud15c \uc2a4\ud06c\ub864 \uc560\ub2c8\uba54\uc774\uc158\r\n            gsap.utils.toArray('.ch-item').forEach(function(item) {\r\n                ScrollTrigger.create({\r\n                    trigger: item,\r\n                    start: 'top 65%', \r\n                    toggleClass: 'active'\r\n                });\r\n\r\n                gsap.fromTo(item.querySelector('.ch-card'),\r\n                    { y: 60, opacity: 0 },\r\n                    { y: 0, opacity: 1, duration: 1, ease: \"power3.out\", scrollTrigger: {\r\n                        trigger: item,\r\n                        start: \"top 75%\"\r\n                    }}\r\n                );\r\n            });\r\n\r\n            \/\/ 4. \ud558\ub2e8 \ub9c8\ud0a4 \ud14d\uc2a4\ud2b8 \ubb34\ud55c \ub864\ub9c1\r\n            gsap.to(\".ch-marquee-track\", { \r\n                xPercent: -50, ease: \"none\", duration: 15, repeat: -1 \r\n            });\r\n        });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":11,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/15\/revisions\/40"}],"up":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/11"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}