{"id":9,"date":"2026-06-08T04:52:11","date_gmt":"2026-06-08T04:52:11","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%eb%a9%94%ec%9d%b8%ed%8e%98%ec%9d%b4%ec%a7%80\/"},"modified":"2026-06-08T05:08:02","modified_gmt":"2026-06-08T05:08:02","slug":"%eb%a9%94%ec%9d%b8%ed%8e%98%ec%9d%b4%ec%a7%80","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/","title":{"rendered":"\uba54\uc778\ud398\uc774\uc9c0"},"content":{"rendered":"    <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        .cw-wrap {\r\n            --c-bg: #f8f9fa;\r\n            --c-primary: #FF3366; \r\n            --c-secondary: #00E5FF; \r\n            --c-tertiary: #FFE600; \r\n            --c-purple: #8A2BE2;\r\n            --c-dark: #121212;\r\n            --c-light: #ffffff;\r\n            \r\n            font-family: 'Pretendard', -apple-system, sans-serif;\r\n            background-color: var(--c-bg);\r\n            color: var(--c-dark);\r\n            overflow-x: hidden; \r\n            width: 100%;\r\n            margin-top: -80px; \/* Pull main page up to overlay floating header *\/\r\n        }\r\n\r\n        .cw-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cw-wrap img { max-width: 100%; height: auto; display: block; }\r\n        .cw-wrap a { text-decoration: none; color: inherit; }\r\n\r\n        \/* =========================================\r\n           \u2728 INTRO ANIMATION (Zoom-through)\r\n        ========================================= *\/\r\n        .cw-intro {\r\n            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\r\n            background-color: var(--c-dark);\r\n            z-index: 999999;\r\n            display: flex; align-items: center; justify-content: center;\r\n            overflow: hidden;\r\n        }\r\n        .cw-intro-text {\r\n            color: var(--c-light);\r\n            font-size: clamp(3rem, 6vw, 8rem);\r\n            font-weight: 900;\r\n            letter-spacing: -0.02em;\r\n            white-space: nowrap;\r\n            transform-origin: center center;\r\n            will-change: transform, opacity;\r\n        }\r\n\r\n        .cw-progress-bar {\r\n            position: fixed; top: 0; left: 0;\r\n            height: 6px; width: 0%;\r\n            background: linear-gradient(90deg, var(--c-primary), var(--c-purple), var(--c-secondary));\r\n            z-index: 9998;\r\n        }\r\n\r\n        \/* =========================================\r\n           GLOBAL TYPOGRAPHY & LAYOUT\r\n        ========================================= *\/\r\n        .cw-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%; }\r\n        .cw-section { padding: 150px 0; position: relative; }\r\n        \r\n        .cw-title-xl { font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }\r\n        .cw-title-lg { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }\r\n        .cw-title-md { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }\r\n        .cw-desc { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; color: #555; word-break: keep-all; }\r\n\r\n        \/* =========================================\r\n           1. HERO SECTION\r\n        ========================================= *\/        .cw-hero {\r\n            height: 100vh; display: flex; align-items: center; justify-content: center;\r\n            background: linear-gradient(135deg, #f8f9ff 0%, #f4f0ff 50%, #e8f9ff 100%);\r\n            position: relative; overflow: hidden; \r\n        }\r\n        \r\n        \/* Dynamic soft neon background blobs *\/\r\n        .cw-hero-blob {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            filter: blur(130px);\r\n            opacity: 0.55;\r\n            mix-blend-mode: multiply;\r\n            pointer-events: none;\r\n            will-change: transform;\r\n        }\r\n        .cw-hero-blob-1 {\r\n            width: 600px; height: 600px;\r\n            background: radial-gradient(circle, rgba(255, 51, 102, 0.22) 0%, rgba(255, 51, 102, 0) 70%);\r\n            top: -10%; left: -10%;\r\n            animation: drift1 22s infinite alternate ease-in-out;\r\n        }\r\n        .cw-hero-blob-2 {\r\n            width: 700px; height: 700px;\r\n            background: radial-gradient(circle, rgba(0, 229, 255, 0.22) 0%, rgba(0, 229, 255, 0) 70%);\r\n            bottom: -15%; right: -10%;\r\n            animation: drift2 28s infinite alternate ease-in-out;\r\n        }\r\n        .cw-hero-blob-3 {\r\n            width: 500px; height: 500px;\r\n            background: radial-gradient(circle, rgba(138, 43, 226, 0.18) 0%, rgba(138, 43, 226, 0) 70%);\r\n            top: 30%; left: 50%;\r\n            animation: drift3 25s infinite alternate ease-in-out;\r\n        }\r\n        @keyframes drift1 {\r\n            0% { transform: translate(0, 0) scale(1); }\r\n            100% { transform: translate(150px, 80px) scale(1.2); }\r\n        }\r\n        @keyframes drift2 {\r\n            0% { transform: translate(0, 0) scale(1.1); }\r\n            100% { transform: translate(-120px, -150px) scale(0.9); }\r\n        }\r\n        @keyframes drift3 {\r\n            0% { transform: translate(0, 0) scale(0.9); }\r\n            100% { transform: translate(-80px, 100px) scale(1.1); }\r\n        }\r\n\r\n        \/* Subtle grid background (tech blueprint overlay) *\/\r\n        .cw-hero-grid {\r\n            position: absolute; inset: 0;\r\n            background-size: 60px 60px;\r\n            background-image: \r\n                linear-gradient(to right, rgba(18, 18, 24, 0.015) 1px, transparent 1px),\r\n                linear-gradient(to bottom, rgba(18, 18, 24, 0.015) 1px, transparent 1px);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n            opacity: 0.95;\r\n        }\r\n\r\n        .cw-hero-overlay {\r\n            position: absolute; inset: 0;\r\n            background: radial-gradient(circle at center, transparent 30%, rgba(248, 249, 255, 0.5) 100%);\r\n            z-index: 2; pointer-events: none;\r\n        }\r\n\r\n        .cw-hero-content { position: relative; z-index: 15; text-align: center; width: 100%; }\r\n        \r\n        .cw-hero-title-wrap { overflow: hidden; display: inline-block; padding: 10px 0; }\r\n        .cw-hero-title { \r\n            color: #121212; \r\n            display: inline-block; \r\n            transform: translateY(110%);\r\n            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);\r\n        }\r\n        .cw-hero-title span { \r\n            background: linear-gradient(to right, var(--c-primary), #bd24e8, var(--c-secondary));\r\n            -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n            background-size: 200% auto; animation: gradientText 4s linear infinite;\r\n        }\r\n        @keyframes gradientText { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n        \r\n        \/* Glassmorphic interactive cards wrapper *\/\r\n        .cw-hero-img-wrap { \r\n            position: absolute; top: 0; left: 0; width: 100%; height: 100%; \r\n            pointer-events: auto; \/* Enable hover\/tilt interactions *\/\r\n            z-index: 5; \r\n        }\r\n        \r\n        .cw-glass-card {\r\n            position: absolute;\r\n            border-radius: 24px;\r\n            overflow: hidden;\r\n            background: rgba(255, 255, 255, 0.35);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(255, 255, 255, 0.7);\r\n            box-shadow: 0 30px 60px rgba(18, 18, 30, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n            transform-style: preserve-3d;\r\n            transition: border-color 0.3s, box-shadow 0.3s;\r\n        }\r\n        .cw-glass-card:hover {\r\n            border-color: rgba(0, 229, 255, 0.35);\r\n            box-shadow: 0 40px 80px rgba(0, 229, 255, 0.22), 0 30px 60px rgba(18, 18, 30, 0.1);\r\n        }\r\n        \r\n        .cw-glass-card-img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            opacity: 0.95;\r\n            transition: transform 0.6s, opacity 0.3s;\r\n        }\r\n        .cw-glass-card:hover .cw-glass-card-img {\r\n            transform: scale(1.05) translateZ(10px);\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* Interactive cursor glow light (flashlight behind frosted glass effect) *\/\r\n        .cw-hero-cursor-glow {\r\n            position: absolute;\r\n            width: 500px;\r\n            height: 500px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, rgba(255, 51, 102, 0.12) 40%, rgba(255, 255, 255, 0) 70%);\r\n            pointer-events: none;\r\n            z-index: 3;\r\n            transform: translate(-50%, -50%);\r\n            opacity: 0;\r\n            transition: opacity 0.5s ease;\r\n            mix-blend-mode: color-burn;\r\n            will-change: transform;\r\n        }  .cw-glass-card.card1 { width: 320px; height: 420px; top: 8%; left: 4%; }\r\n        .cw-glass-card.card2 { width: 420px; height: 280px; bottom: 10%; right: 3%; }\r\n        .cw-glass-card.card3 { width: 240px; height: 240px; top: 12%; right: 14%; border-radius: 50%; }\r\n        .cw-glass-card.card3 .cw-glass-card-img { border-radius: 50%; }\r\n\r\n        \/* Scroll Down Indicator *\/\r\n        .cw-scroll-indicator {\r\n            position: absolute;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            z-index: 10;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 8px;\r\n            opacity: 0.6;\r\n            transition: opacity 0.3s;\r\n            cursor: pointer;\r\n        }\r\n        .cw-scroll-indicator:hover { opacity: 1; }\r\n        .cw-scroll-mouse {\r\n            width: 24px;\r\n            height: 38px;\r\n            border: 2px solid #ffffff;\r\n            border-radius: 12px;\r\n            position: relative;\r\n        }\r\n        .cw-scroll-wheel {\r\n            width: 4px;\r\n            height: 8px;\r\n            background-color: var(--c-secondary);\r\n            border-radius: 2px;\r\n            position: absolute;\r\n            top: 6px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            animation: scrollWheel 1.5s infinite;\r\n        }\r\n        @keyframes scrollWheel {\r\n            0% { top: 6px; opacity: 1; }\r\n            100% { top: 18px; opacity: 0; }\r\n        }\r\n        .cw-scroll-text {\r\n            color: #ffffff;\r\n            font-size: 0.8rem;\r\n            font-weight: 700;\r\n            letter-spacing: 0.15em;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        \/* =========================================\r\n           2. ABOUT SECTION\r\n        ========================================= *\/\r\n        .cw-about { background-color: var(--c-dark); color: var(--c-light); border-radius: 0; }\r\n        .cw-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n        .cw-about-left { position: sticky; top: 35vh; }\r\n        .cw-about-left h2 { line-height: 1.2; }\r\n        .cw-about-left h2 span { color: var(--c-primary); }\r\n        \r\n        .cw-about-right {\r\n            height: 600px; overflow: hidden; position: relative; border-radius: 40px;\r\n            mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);\r\n            -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);\r\n        }\r\n        .cw-about-track { display: flex; flex-direction: column; gap: 40px; animation: scrollVertical 25s linear infinite; }\r\n        .cw-about-track:hover { animation-play-state: paused; }\r\n        .cw-about-track img { width: 100%; height: 400px; object-fit: cover; border-radius: 40px; filter: grayscale(50%); transition: all 0.5s; }\r\n        .cw-about-track img:hover { filter: grayscale(0%); transform: scale(1.03); box-shadow: 0 20px 40px rgba(255,51,102,0.2); }\r\n        @keyframes scrollVertical { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-50% - 20px)); } }\r\n\r\n        \/* =========================================\r\n           3. SERVICES\r\n        ========================================= *\/\r\n        .cw-services { background-color: #f0f4f8; position: relative; z-index: 2; overflow: hidden; }\r\n        .cw-svc-circle { position: absolute; border-radius: 50%; filter: blur(100px); z-index: -1; }\r\n        .cw-svc-circle-1 { width: 600px; height: 600px; background: rgba(255,51,102,0.15); top: -100px; left: -200px; }\r\n        .cw-svc-circle-2 { width: 800px; height: 800px; background: rgba(0,229,255,0.15); bottom: -200px; right: -200px; }\r\n\r\n        .cw-services-header { text-align: center; margin-bottom: 80px; }\r\n        .cw-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }\r\n        \r\n        .cw-card {\r\n            background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n            padding: 50px 40px; border-radius: 40px;\r\n            transform-style: preserve-3d; box-shadow: 0 20px 50px rgba(0,0,0,0.03);\r\n            border: 1px solid rgba(255,255,255,0.8); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        .cw-card:hover { \r\n            background: rgba(255, 255, 255, 0.9);\r\n            border-color: rgba(255, 51, 102, 0.4); \r\n            box-shadow: 0 40px 80px rgba(255, 51, 102, 0.15); \r\n            transform: translateY(-10px);\r\n        }\r\n        .cw-card-inner { transform: translateZ(50px); }\r\n        .cw-card-icon {\r\n            width: 70px; height: 70px; background: var(--c-dark); color: #fff; border-radius: 50%;\r\n            display: flex; align-items: center; justify-content: center;\r\n            font-size: 1.8rem; font-weight: 900; margin-bottom: 25px; font-style: italic;\r\n            transition: all 0.4s;\r\n        }\r\n        .cw-card:nth-child(1):hover .cw-card-icon { background: var(--c-primary); box-shadow: 0 10px 20px rgba(255,51,102,0.4); }\r\n        .cw-card:nth-child(2):hover .cw-card-icon { background: var(--c-secondary); box-shadow: 0 10px 20px rgba(0,229,255,0.4); }\r\n        .cw-card:nth-child(3):hover .cw-card-icon { background: var(--c-purple); box-shadow: 0 10px 20px rgba(138,43,226,0.4); }\r\n\r\n        .cw-card h3 { font-size: 1.8rem; font-weight: 900; margin-bottom: 15px; color: var(--c-dark); }\r\n        .cw-card p { font-size: 1.05rem; color: #555; margin-bottom: 30px; line-height: 1.6; }\r\n        \r\n        .cw-card-img-wrapper {\r\n            width: 100%; height: 220px; border-radius: 20px; overflow: hidden;\r\n            box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateZ(30px);\r\n        }\r\n        .cw-card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }\r\n        .cw-card:hover .cw-card-img-wrapper img { transform: scale(1.1); }\r\n\r\n        \/* =========================================\r\n           4. HORIZONTAL SCROLL\r\n        ========================================= *\/\r\n        .cw-horizontal-wrap {\r\n            height: 100vh; background-color: var(--c-dark); color: var(--c-light);\r\n            display: flex; flex-direction: column; justify-content: center;\r\n            overflow: hidden; position: relative; padding-top: 150px; \r\n        }\r\n        .cw-h-title { position: absolute; top: 130px; left: 5%; z-index: 10; width: 90%; }\r\n        .cw-h-title h2 { color: var(--c-light); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.1; }\r\n        .cw-h-title p { color: var(--c-secondary); font-size: 1.3rem; font-weight: bold; margin-top: 10px; letter-spacing: 0.1em; }\r\n        \r\n        .cw-horizontal-container { display: flex; width: 400vw; height: 60vh; align-items: center; }\r\n        \r\n        .cw-h-panel { width: 100vw; padding: 0 5vw; display: flex; align-items: center; justify-content: center; gap: 4vw; }\r\n        \r\n        .cw-h-img-mask {\r\n            width: 45vw; height: 50vh; \r\n            border-radius: 30px; overflow: hidden;\r\n            box-shadow: 0 30px 60px rgba(0,0,0,0.4); position: relative; flex-shrink: 0;\r\n        }\r\n        .cw-h-panel-img { \r\n            position: absolute; top: 0; left: -10%; \r\n            width: 120%; height: 100%; \r\n            object-fit: cover; \r\n        }\r\n        \r\n        .cw-h-panel-text { width: 35vw; flex-shrink: 0; }\r\n        .cw-h-panel-step { font-size: 1.3rem; font-weight: 900; color: var(--c-primary); margin-bottom: 15px; display: block; font-style: italic; }\r\n        .cw-h-panel-text h3 { font-size: 2.8rem; font-weight: 900; margin-bottom: 20px; line-height: 1.2; }\r\n        .cw-h-panel-text p { font-size: 1.15rem; color: #aaa; line-height: 1.7; word-break: keep-all; }\r\n\r\n        \/* 5. MARQUEE REMOVED *\/\r\n\r\n        \/* =========================================\r\n           6. CONTACT (\ud83d\udea8 \ub2e4\ud06c \ud14c\ub9c8\ub85c \ubcc0\uacbd\ud558\uc5ec \uadf9\uc801\uc778 \ub300\ube44 \ubd80\uc5ec)\r\n        ========================================= *\/\r\n        .cw-contact { \r\n            background-color: var(--c-dark); \/* \uae4a\uc740 \ub2e4\ud06c\ud1a4\uc73c\ub85c \uc218\uc815 *\/\r\n            color: var(--c-light);\r\n            text-align: center; padding: 180px 0; border-radius: 0; position: relative; \r\n        }\r\n        .cw-contact h2 { color: var(--c-light); }\r\n        .cw-contact p { color: #aaaaaa; }\r\n        \r\n        .btn-wrapper { display: inline-block; margin-top: 50px; padding: 20px; }\r\n        .cw-contact-btn {\r\n            display: inline-block; padding: 25px 80px;\r\n            background-color: var(--c-primary) !important; \/* \ub208\uc5d0 \ub744\ub294 \ud56b\ud551\ud06c \ubc84\ud2bc *\/\r\n            color: #ffffff !important; \r\n            font-size: 2rem; font-weight: 900; border-radius: 100px;\r\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n            box-shadow: 0 20px 40px rgba(255, 51, 102, 0.3);\r\n            position: relative; z-index: 2; overflow: hidden;\r\n            border: none;\r\n        }\r\n        .cw-contact-btn::before {\r\n            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n            background: #ffffff; z-index: -1; transform: scaleX(0); transform-origin: right;\r\n            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        .cw-contact-btn:hover { color: var(--c-dark) !important; box-shadow: 0 30px 60px rgba(255, 255, 255, 0.2); transform: scale(1.05); }\r\n        .cw-contact-btn:hover::before { transform: scaleX(1); transform-origin: left; }\r\n\r\n        \/* =========================================\r\n           MOBILE RESPONSIVE\r\n        ========================================= *\/\r\n        @media (max-width: 992px) {\r\n            .cw-section { padding: 100px 0; }\r\n            .cw-intro-text { font-size: 15vw; }\r\n            .cw-hero-img { display: none; }\r\n            .cw-about-grid { grid-template-columns: 1fr; gap: 40px; }\r\n            .cw-about-left { position: relative; top: 0; text-align: center; }\r\n            .cw-about-right { height: 400px; mask-image: none; -webkit-mask-image: none; border-radius: 20px; }\r\n            \r\n            .cw-horizontal-wrap { height: auto; display: block; padding-top: 80px; padding-bottom: 80px; }\r\n            .cw-h-title { position: relative; top: 0; margin-bottom: 60px; width: 100%; text-align: center; }\r\n            .cw-h-title h2 { font-size: 3rem; }\r\n            .cw-horizontal-container { width: 100%; height: auto; flex-direction: column; margin-top: 0; }\r\n            .cw-h-panel { width: 100%; height: auto; flex-direction: column; padding: 0 5%; gap: 30px; margin-bottom: 80px; }\r\n            .cw-h-img-mask, .cw-h-panel-text { width: 100%; }\r\n            .cw-h-img-mask { height: 350px; border-radius: 20px; }\r\n            .cw-h-panel-img { width: 100%; left: 0; }\r\n            .cw-h-panel-text h3 { font-size: 2.2rem; margin-bottom: 15px; }\r\n            \r\n            .cw-marquee-text { font-size: 3.5rem; padding-right: 30px; -webkit-text-stroke: 1px #fff; }\r\n            .cw-contact { padding: 120px 0; border-radius: 0; }\r\n            .cw-contact-btn { padding: 20px 50px; font-size: 1.5rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cw-wrap\">\r\n        \r\n        <!-- \u2728 \uc601\ud654\uac19\uc740 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \uc778\ud2b8\ub85c \ub85c\ub354 -->\r\n        <div class=\"cw-intro\">\r\n            <!-- \ud83d\udea8 \uc774 \ud14d\uc2a4\ud2b8\ub97c \ub85c\uace0 \uc774\ubbf8\uc9c0(<img decoding=\"async\" src=\"...\">)\ub85c \ubcc0\uacbd\ud558\uc154\ub3c4 \uc644\ubcbd\ud558\uac8c \ub3d9\uc791\ud569\ub2c8\ub2e4. -->\r\n            <h1 class=\"cw-intro-text\">B.LANDING<\/h1>\r\n        <\/div>\r\n\r\n        <div class=\"cw-progress-bar\"><\/div>\r\n\r\n        <!-- 1. HERO -->\r\n        <section class=\"cw-hero\">\r\n            <!-- Neon Glowing Blobs -->\r\n            <div class=\"cw-hero-blob cw-hero-blob-1\"><\/div>\r\n            <div class=\"cw-hero-blob cw-hero-blob-2\"><\/div>\r\n            <div class=\"cw-hero-blob cw-hero-blob-3\"><\/div>\r\n            \r\n            <!-- Tech Grid Overlay -->\r\n            <div class=\"cw-hero-grid\"><\/div>\r\n            <div class=\"cw-hero-overlay\"><\/div>\r\n            \r\n            <!-- Floating Interactive Glass Cards -->\r\n            <div class=\"cw-hero-cursor-glow\"><\/div>\r\n            <div class=\"cw-hero-img-wrap\">\r\n                <div class=\"cw-glass-card card1 gs-float\" data-speed=\"1.2\" data-tilt data-tilt-max=\"12\" data-tilt-speed=\"300\" data-tilt-perspective=\"1000\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop\" class=\"cw-glass-card-img\" alt=\"Shape\">\r\n                <\/div>\r\n                <div class=\"cw-glass-card card2 gs-float\" data-speed=\"-0.8\" data-tilt data-tilt-max=\"12\" data-tilt-speed=\"300\" data-tilt-perspective=\"1000\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=800&auto=format&fit=crop\" class=\"cw-glass-card-img\" alt=\"Abstract\">\r\n                <\/div>\r\n                <div class=\"cw-glass-card card3 gs-float\" data-speed=\"1.8\" data-tilt data-tilt-max=\"15\" data-tilt-speed=\"300\" data-tilt-perspective=\"1000\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1614850523459-c2f4c699c52e?q=80&w=800&auto=format&fit=crop\" class=\"cw-glass-card-img\" alt=\"Sphere\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Hero Typography -->\r\n            <div class=\"cw-container cw-hero-content\">\r\n                <div class=\"cw-hero-title-wrap\">\r\n                    <h1 class=\"cw-title-xl cw-hero-title\">IMAGINE<\/h1>\r\n                <\/div><br>\r\n                <div class=\"cw-hero-title-wrap\">\r\n                    <h1 class=\"cw-title-xl cw-hero-title\"><span>THE BEYOND<\/span><\/h1>\r\n                <\/div>\r\n                <div style=\"overflow: hidden; margin-top: 20px;\">\r\n                    <p class=\"cw-desc cw-hero-title\" style=\"font-size: 1.4rem; color: #b0b0cc; font-weight: 700; text-shadow: 0 0 10px rgba(0,229,255,0.2);\">\ub2f9\uc2e0\uc758 \ube0c\ub79c\ub4dc\ub97c \uac00\uc7a5 \uc784\ud329\ud2b8 \uc788\uac8c \uac01\uc778\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Interactive Scroll Indicator -->\r\n            <div class=\"cw-scroll-indicator\" onclick=\"document.querySelector('.cw-about').scrollIntoView({ behavior: 'smooth' });\">\r\n                <div class=\"cw-scroll-mouse\">\r\n                    <div class=\"cw-scroll-wheel\"><\/div>\r\n                <\/div>\r\n                <div class=\"cw-scroll-text\">Scroll Down<\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. ABOUT -->\r\n        <section class=\"cw-section cw-about\">\r\n            <div class=\"cw-container cw-about-grid\">\r\n                <div class=\"cw-about-left\">\r\n                    <h2 class=\"cw-title-lg gs-fade-up\">\uc6b0\ub9ac\ub294<br><span>\ud2c0\uc5d0 \uac07\ud788\uc9c0<\/span><br>\uc54a\uc2b5\ub2c8\ub2e4.<\/h2>\r\n                <\/div>\r\n                <div class=\"cw-about-right gs-scale-up\">\r\n                    <div class=\"cw-about-track\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=800&auto=format&fit=crop\" alt=\"Team\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=800&auto=format&fit=crop\" alt=\"Office\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c223a692?q=80&w=800&auto=format&fit=crop\" alt=\"Work\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?q=80&w=800&auto=format&fit=crop\" alt=\"Team\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=800&auto=format&fit=crop\" alt=\"Office\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c223a692?q=80&w=800&auto=format&fit=crop\" alt=\"Work\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. SERVICES -->\r\n        <section class=\"cw-section cw-services\">\r\n            <div class=\"cw-svc-circle cw-svc-circle-1\"><\/div>\r\n            <div class=\"cw-svc-circle cw-svc-circle-2\"><\/div>\r\n            <div class=\"cw-container\">\r\n                <div class=\"cw-services-header gs-fade-up\">\r\n                    <h2 class=\"cw-title-md\">\ube44\uc988\ub2c8\uc2a4 \ud601\uc2e0 \ubd84\uc57c<\/h2>\r\n                <\/div>\r\n                <div class=\"cw-services-grid\">\r\n                    <div class=\"cw-card hover-target\" data-tilt data-tilt-max=\"15\" data-tilt-speed=\"400\" data-tilt-perspective=\"1000\">\r\n                        <div class=\"cw-card-inner\">\r\n                            <div class=\"cw-card-icon\">01<\/div>\r\n                            <h3>\uc0ac\uc5c5\ubd84\uc57c 1<\/h3>\r\n                            <p>\ube0c\ub79c\ub4dc\uc758 \ud575\uc2ec \uac00\uce58\ub97c \ud30c\uc545\ud558\uc5ec \uac00\uc7a5 \ub3cb\ubcf4\uc77c \uc218 \uc788\ub294 \ub514\uc9c0\ud138 \uc804\ub7b5\uc744 \uae30\ud68d\ud569\ub2c8\ub2e4.<\/p>\r\n                            <div class=\"cw-card-img-wrapper\">\r\n                                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558655146-d09347e92766?q=80&w=800&auto=format&fit=crop\" alt=\"Service 1\">\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cw-card hover-target\" data-tilt data-tilt-max=\"15\" data-tilt-speed=\"400\" data-tilt-perspective=\"1000\">\r\n                        <div class=\"cw-card-inner\">\r\n                            <div class=\"cw-card-icon\">02<\/div>\r\n                            <h3>\uc0ac\uc5c5\ubd84\uc57c 2<\/h3>\r\n                            <p>\uc0ac\uc6a9\uc790\uc758 \uc6c0\uc9c1\uc784\uc5d0 \ubc18\uc751\ud558\ub294 \ud654\ub824\ud558\uace0 \uc5ed\ub3d9\uc801\uc778 UI\/UX \ub514\uc790\uc778\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\r\n                            <div class=\"cw-card-img-wrapper\">\r\n                                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?q=80&w=800&auto=format&fit=crop\" alt=\"Service 2\">\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cw-card hover-target\" data-tilt data-tilt-max=\"15\" data-tilt-speed=\"400\" data-tilt-perspective=\"1000\">\r\n                        <div class=\"cw-card-inner\">\r\n                            <div class=\"cw-card-icon\">03<\/div>\r\n                            <h3>\uc0ac\uc5c5\ubd84\uc57c \ud655\uc7a5<\/h3>\r\n                            <p>\ucd5c\uc2e0 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ube60\ub974\uace0 \uc548\uc815\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud569\ub2c8\ub2e4.<\/p>\r\n                            <div class=\"cw-card-img-wrapper\">\r\n                                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop\" alt=\"Service 3\">\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 4. HORIZONTAL SCROLL -->\r\n        <section class=\"cw-horizontal-wrap\">\r\n            <div class=\"cw-h-title gs-fade-up\">\r\n                <h2>CREATIVE HIGHLIGHTS<\/h2>\r\n                <p>\ub3c5\ubcf4\uc801\uc778 \ube0c\ub79c\ub4dc \uacbd\ud5d8<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"cw-horizontal-container\">\r\n                <div class=\"cw-h-panel\">\r\n                    <div class=\"cw-h-img-mask\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600132806370-bf17e65e942f?q=80&w=1200&auto=format&fit=crop\" class=\"cw-h-panel-img js-h-parallax\" alt=\"Detail 1\">\r\n                    <\/div>\r\n                    <div class=\"cw-h-panel-text\">\r\n                        <span class=\"cw-h-panel-step\">Step 01<\/span>\r\n                        <h3>\uc2dc\uc120\uc744 \uc0ac\ub85c\uc7a1\ub294<br>\ubaa8\uc158 \uadf8\ub798\ud53d<\/h3>\r\n                        <p class=\"cw-desc\">\uc2a4\ud06c\ub864\uacfc \uc5f0\ub3d9\ub418\uc5b4 \uac00\ub85c\ub85c \uc774\ub3d9\ud558\ub294 \ud2b9\uc218 \ub808\uc774\uc544\uc6c3\uc785\ub2c8\ub2e4. \ud575\uc2ec \uc0ac\uc5c5 \ubd84\uc57c\uc640 \ube44\uc804\uc744 \uc2a4\ud1a0\ub9ac\ud154\ub9c1 \ubc29\uc2dd\uc73c\ub85c \ubd80\ub4dc\ub7fd\uac8c \ud480\uc5b4\ub0c5\ub2c8\ub2e4.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cw-h-panel\">\r\n                    <div class=\"cw-h-img-mask\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550745165-9bc0b252726f?q=80&w=1200&auto=format&fit=crop\" class=\"cw-h-panel-img js-h-parallax\" alt=\"Detail 2\">\r\n                    <\/div>\r\n                    <div class=\"cw-h-panel-text\">\r\n                        <span class=\"cw-h-panel-step\">Step 02<\/span>\r\n                        <h3>\uc785\uccb4\uc801\uc778<br>\ube0c\ub79c\ub4dc \uacbd\ud5d8<\/h3>\r\n                        <p class=\"cw-desc\">\ub808\ud2b8\ub85c, \ub124\uc628, 3D \ub4f1 \ub2e4\uc591\ud55c \uc624\ube0c\uc81c\ub97c \uacb0\ud569\ud558\uc5ec \uace0\uac1d\uc758 \ub1cc\ub9ac\uc5d0 \uae4a\uac8c \ub0a8\ub294 \uc555\ub3c4\uc801\uc778 \ub514\uc9c0\ud138 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cw-h-panel\">\r\n                    <div class=\"cw-h-img-mask\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1634084462412-b54873c0a56d?q=80&w=1200&auto=format&fit=crop\" class=\"cw-h-panel-img js-h-parallax\" alt=\"Detail 3\">\r\n                    <\/div>\r\n                    <div class=\"cw-h-panel-text\">\r\n                        <span class=\"cw-h-panel-step\">Step 03<\/span>\r\n                        <h3>\ub04a\uc784\uc5c6\ub294<br>\uae30\uc220\uc758 \uc9c4\ud654<\/h3>\r\n                        <p class=\"cw-desc\">\ucd5c\uc2e0 \uc6f9 \ud2b8\ub80c\ub4dc\uc640 \ucd5c\uace0 \uc218\uc900\uc758 \uc778\ud130\ub799\uc158 \uae30\uc220\uc744 \uc801\uadf9 \ub3c4\uc785\ud558\uc5ec \ud55c\ubc1c \uc55e\uc120 \ub514\uc9c0\ud138 \uc194\ub8e8\uc158\uc744 \uc81c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 5. MARQUEE REMOVED -->\r\n\r\n        <!-- 6. CONTACT (\ub2e4\ud06c \ud14c\ub9c8 \uc801\uc6a9) -->\r\n        <section class=\"cw-contact\">\r\n            <div class=\"cw-container gs-fade-up\">\r\n                <h2 class=\"cw-title-xl\">READY TO<br>START?<\/h2>\r\n                <p class=\"cw-desc\" style=\"margin-top: 30px; font-size: 1.5rem;\">\uc0c8\ub85c\uc6b4 \ub3c4\uc57d\uc744 \uc704\ud55c \uc900\ube44\uac00 \ub418\uc168\ub098\uc694? \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud574\ubcf4\uc138\uc694.<\/p>\r\n                <div class=\"btn-wrapper\" id=\"magnetic-btn-wrap\">\r\n                    <a href=\"\/\ubb38\uc758\ud558\uae30\" class=\"cw-contact-btn hover-target\" id=\"magnetic-btn\">\ubb38\uc758\ud558\uae30 &rarr;<\/a>\r\n                <\/div>\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            document.body.style.overflow = 'hidden';\r\n\r\n            \/\/ --- \u2728 0. Zoom-through Intro Animation ---\r\n            const tlIntro = gsap.timeline({\r\n                onComplete: () => {\r\n                    document.querySelector('.cw-intro').style.display = 'none';\r\n                    document.body.style.overflow = '';\r\n                    initHeroAnim(); \r\n                }\r\n            });\r\n\r\n            tlIntro.fromTo('.cw-intro-text', \r\n                { opacity: 0, scale: 0.8 }, \r\n                { opacity: 1, scale: 1, duration: 1, ease: \"power3.out\" }\r\n            )\r\n            .to('.cw-intro-text', \r\n                { scale: 100, opacity: 0, duration: 1.2, ease: \"power4.in\", delay: 0.3 }\r\n            )\r\n            .to('.cw-intro', { opacity: 0, duration: 0.5 }, \"-=0.5\");\r\n\r\n\r\n            \/\/ --- 1. Scroll Progress Bar ---\r\n            gsap.to('.cw-progress-bar', {\r\n                width: '100%', ease: 'none',\r\n                scrollTrigger: { trigger: document.body, start: 'top top', end: 'bottom bottom', scrub: 0.3 }\r\n            });\r\n\r\n            \/\/ --- 2. Hero Text Reveal Animation ---\r\n            function initHeroAnim() {\r\n                gsap.to('.cw-hero-title', {\r\n                    y: 0, duration: 1.2, stagger: 0.2, ease: \"power4.out\"\r\n                });\r\n            }\r\n\r\n            \/\/ --- 3. Advanced Entrance Animations ---\r\n            gsap.utils.toArray('.gs-fade-up').forEach(function(elem) {\r\n                gsap.fromTo(elem, \r\n                    { y: 80, opacity: 0 }, \r\n                    { y: 0, opacity: 1, duration: 1.2, ease: \"power4.out\", scrollTrigger: { trigger: elem, start: \"top 85%\" } }\r\n                );\r\n            });\r\n            gsap.utils.toArray('.gs-scale-up').forEach(function(elem) {\r\n                gsap.fromTo(elem, \r\n                    { scale: 0.8, opacity: 0 }, \r\n                    { scale: 1, opacity: 1, duration: 1.5, ease: \"power3.out\", scrollTrigger: { trigger: elem, start: \"top 80%\" } }\r\n                );\r\n            });\r\n\r\n            \/\/ --- 4. Hero Section Parallax ---\r\n            const hero = document.querySelector('.cw-hero');\r\n            const floaters = document.querySelectorAll('.gs-float');\r\n            if(hero && floaters.length > 0 && window.innerWidth > 992) {\r\n                hero.addEventListener('mousemove', function(e) {\r\n                    const xAxis = (window.innerWidth \/ 2 - e.pageX) \/ 25;\r\n                    const yAxis = (window.innerHeight \/ 2 - e.pageY) \/ 25;\r\n                    floaters.forEach(el => {\r\n                        const speed = el.getAttribute('data-speed') || 1;\r\n                        gsap.to(el, { x: xAxis * speed, y: yAxis * speed, rotation: xAxis * 0.5, duration: 1, ease: \"power1.out\" });\r\n                    });\r\n                });\r\n            }\r\n\r\n            \/\/ --- 5. Horizontal Scroll & Inner Parallax ---\r\n            if(window.innerWidth > 992) {\r\n                const horizontalContainer = document.querySelector('.cw-horizontal-container');\r\n                const panels = gsap.utils.toArray(\".cw-h-panel\");\r\n                \r\n                const scrollTween = gsap.to(panels, {\r\n                    xPercent: -100 * (panels.length - 1),\r\n                    ease: \"none\",\r\n                    scrollTrigger: {\r\n                        trigger: \".cw-horizontal-wrap\",\r\n                        pin: true,\r\n                        scrub: 1,\r\n                        snap: 1 \/ (panels.length - 1),\r\n                        end: () => \"+=\" + horizontalContainer.offsetWidth\r\n                    }\r\n                });\r\n\r\n                gsap.utils.toArray(\".js-h-parallax\").forEach(img => {\r\n                    gsap.to(img, {\r\n                        xPercent: 10, \r\n                        ease: \"none\",\r\n                        scrollTrigger: {\r\n                            trigger: img.closest('.cw-h-panel'),\r\n                            containerAnimation: scrollTween,\r\n                            start: \"left right\",\r\n                            end: \"right left\",\r\n                            scrub: true\r\n                        }\r\n                    });\r\n                });\r\n            }\r\n\r\n            \/\/ --- 6. Marquee Removed ---\r\n\r\n            \/\/ --- 7. Magnetic Button Effect ---\r\n            const magnetBtnWrap = document.getElementById('magnetic-btn-wrap');\r\n            const magnetBtn = document.getElementById('magnetic-btn');\r\n            if(magnetBtnWrap && window.innerWidth > 992) {\r\n                magnetBtnWrap.addEventListener('mousemove', function(e) {\r\n                    const rect = magnetBtnWrap.getBoundingClientRect();\r\n                    const x = e.clientX - rect.left - rect.width \/ 2;\r\n                    const y = e.clientY - rect.top - rect.height \/ 2;\r\n                    gsap.to(magnetBtn, { x: x * 0.5, y: y * 0.5, duration: 0.3, ease: \"power2.out\" });\r\n                });\r\n                magnetBtnWrap.addEventListener('mouseleave', function() {\r\n                    gsap.to(magnetBtn, { x: 0, y: 0, duration: 0.7, ease: \"elastic.out(1, 0.3)\" });\r\n                });\r\n            }\r\n\r\n            \/\/ --- 8. Interactive Cursor Glow logic ---\r\n            const cursorGlow = document.querySelector('.cw-hero-cursor-glow');\r\n            const heroSec = document.querySelector('.cw-hero');\r\n            if (heroSec && cursorGlow && window.innerWidth > 992) {\r\n                heroSec.addEventListener('mouseenter', () => {\r\n                    gsap.to(cursorGlow, { opacity: 1, duration: 0.3 });\r\n                });\r\n                heroSec.addEventListener('mousemove', (e) => {\r\n                    const rect = heroSec.getBoundingClientRect();\r\n                    const x = e.clientX - rect.left;\r\n                    const y = e.clientY - rect.top;\r\n                    gsap.to(cursorGlow, { x: x, y: y, duration: 0.2, overwrite: \"auto\", ease: \"power2.out\" });\r\n                });\r\n                heroSec.addEventListener('mouseleave', () => {\r\n                    gsap.to(cursorGlow, { opacity: 0, duration: 0.5 });\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","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\/9","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=9"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/9\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}