{"id":23,"date":"2026-06-08T04:52:11","date_gmt":"2026-06-08T04:52:11","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc\/%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc2\/"},"modified":"2026-06-08T08:11:39","modified_gmt":"2026-06-08T08:11:39","slug":"%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc2","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc\/%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc2\/","title":{"rendered":"\uc0ac\uc5c5\ubd84\uc57c2"},"content":{"rendered":"    <!-- \uc678\ubd80 \uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac -->\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 (B.LANDING \ubc1d\uc740 \ud14c\ub9c8)\r\n        ========================================= *\/\r\n        .cb2-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        .cb2-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cb2-wrap img { max-width: 100%; height: auto; display: block; }\r\n        \r\n        .cb2-container { width: 100%; max-width: 1400px; 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        .cb2-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .cb2-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; animation: floatObj2 15s infinite alternate ease-in-out; }\r\n        .cb2-shape-1 { width: 500px; height: 500px; background: var(--c-secondary); top: 10%; left: -100px; animation-delay: -2s; }\r\n        .cb2-shape-2 { width: 600px; height: 600px; background: var(--c-primary); top: 60%; right: -200px; animation-delay: -7s; }\r\n        .cb2-shape-3 { width: 450px; height: 450px; background: var(--c-purple); bottom: 5%; left: 20%; animation-delay: -12s; }\r\n        @keyframes floatObj2 { \r\n            0% { transform: translate(0, 0) scale(1) rotate(0deg); } \r\n            100% { transform: translate(-80px, 120px) scale(1.1) rotate(-10deg); } \r\n        }\r\n\r\n        \/* =========================================\r\n           1. HERO SECTION (\uc90c\uc778 \ud6a8\uacfc \uc720\uc9c0)\r\n        ========================================= *\/\r\n        .cb2-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            background: #000;\r\n            overflow: hidden; \r\n        }\r\n        .cb2-hero-bg {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 130%;\r\n            background: url('https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&w=1920&auto=format&fit=crop') center\/cover no-repeat;\r\n            opacity: 0.4; transform: translateY(0); z-index: 1;\r\n            animation: bgZoom 20s ease-in-out infinite alternate;\r\n        }\r\n        @keyframes bgZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }\r\n        \r\n        .cb2-hero-overlay {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n            background: linear-gradient(to bottom, rgba(18,18,18,0.1) 0%, rgba(18,18,18,1) 100%);\r\n            z-index: 2;\r\n        }\r\n        .cb2-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .cb2-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            animation: pulseShadow2 2s infinite;\r\n        }\r\n        @keyframes pulseShadow2 { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.2); } 70% { box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }\r\n        \r\n        .cb2-hero-title {\r\n            font-size: clamp(2.5rem, 6vw, 4.5rem); \r\n            font-weight: 900; line-height: 1.2;\r\n            color: #ffffff; \r\n            letter-spacing: -0.03em;\r\n            white-space: nowrap; \r\n        }\r\n        .cb2-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: gradientText2 5s linear infinite;\r\n        }\r\n        @keyframes gradientText2 { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n        \/* =========================================\r\n           2. INTRO SECTION\r\n        ========================================= *\/\r\n        .cb2-intro { padding: 120px 0 80px; text-align: center; position: relative; z-index: 5; }\r\n        .cb2-intro h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; margin-bottom: 20px; line-height: 1.3; }\r\n        .cb2-intro p { font-size: 1.2rem; color: var(--c-text-muted); line-height: 1.6; word-break: keep-all; max-width: 800px; margin: 0 auto; }\r\n\r\n        \/* =========================================\r\n           3. PREMIUM STACKING CARDS SECTION\r\n        ========================================= *\/\r\n        .cb2-stack-section {\r\n            padding: 0 0 150px 0;\r\n            position: relative;\r\n            z-index: 5;\r\n        }\r\n\r\n        .cb2-cards-container {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 5%;\r\n        }\r\n\r\n        .cb2-card {\r\n            position: sticky;\r\n            top: 120px; \r\n            width: 100%;\r\n            height: 70vh; \r\n            min-height: 500px;\r\n            background: #ffffff;\r\n            border-radius: 40px;\r\n            box-shadow: 0 -10px 40px rgba(0,0,0,0.05); \r\n            display: flex;\r\n            overflow: hidden;\r\n            margin-bottom: 40px;\r\n            border: 1px solid rgba(0,0,0,0.04);\r\n            transform-origin: top center;\r\n            will-change: transform, opacity, filter;\r\n        }\r\n\r\n        .cb2-card-content {\r\n            width: 50%;\r\n            padding: 80px 60px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            background: #ffffff;\r\n            z-index: 2;\r\n        }\r\n        \r\n        .cb2-card-image {\r\n            width: 50%;\r\n            position: relative;\r\n            overflow: hidden;\r\n            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); \/* \ucd08\uae30 \uc0c1\ud0dc \uc228\uae40 *\/\r\n        }\r\n        \r\n        .cb2-card-image img {\r\n            position: absolute;\r\n            top: -15%; left: 0;\r\n            width: 100%; height: 130%;\r\n            object-fit: cover;\r\n            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        .cb2-card:hover .cb2-card-image img {\r\n            transform: scale(1.08);\r\n        }\r\n\r\n        .cb2-card:nth-child(even) { flex-direction: row-reverse; }\r\n\r\n        .cb2-step {\r\n            display: inline-flex; align-items: center; justify-content: center;\r\n            width: 70px; height: 70px; border-radius: 50%;\r\n            background: var(--c-bg); color: var(--c-primary);\r\n            font-size: 2rem; font-weight: 900; font-style: italic;\r\n            box-shadow: 0 10px 20px rgba(0,0,0,0.05);\r\n            margin-bottom: 30px;\r\n            border: 2px solid rgba(255,51,102,0.1);\r\n        }\r\n        .cb2-card:nth-child(even) .cb2-step { color: var(--c-secondary); border-color: rgba(0,229,255,0.1); }\r\n        .cb2-card:nth-child(3) .cb2-step { color: var(--c-purple); border-color: rgba(138,43,226,0.1); }\r\n\r\n        .cb2-card-content h3 {\r\n            font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.25; margin-bottom: 20px; color: var(--c-text-main);\r\n        }\r\n        .cb2-card-content p {\r\n            font-size: 1.2rem; line-height: 1.7; color: var(--c-text-muted); word-break: keep-all; margin-bottom: 40px;\r\n        }\r\n\r\n        .cb2-tags { display: flex; flex-wrap: wrap; gap: 12px; }\r\n        .cb2-tag {\r\n            padding: 10px 20px; background: rgba(0,0,0,0.03); border-radius: 30px;\r\n            font-size: 1.05rem; font-weight: 700; color: var(--c-text-main);\r\n            transition: all 0.3s;\r\n        }\r\n        .cb2-tag:hover { background: var(--c-primary); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255,51,102,0.2); }\r\n        .cb2-card:nth-child(even) .cb2-tag:hover { background: var(--c-secondary); box-shadow: 0 10px 20px rgba(0,229,255,0.2); }\r\n        .cb2-card:nth-child(3) .cb2-tag:hover { background: var(--c-purple); box-shadow: 0 10px 20px rgba(138,43,226,0.2); }\r\n\r\n        \/* =========================================\r\n           \u2728 \ubaa8\ubc14\uc77c \ubc18\uc751\ud615 \uc644\ubcbd \ucd5c\uc801\ud654 \u2728\r\n        ========================================= *\/\r\n        @media (max-width: 992px) {\r\n            .cb2-hero { min-height: 60vh; padding-top: 60px; }\r\n            .cb2-hero-title { font-size: clamp(2rem, 7vw, 3rem); white-space: normal; line-height: 1.3; }\r\n            \r\n            .cb2-intro { padding: 80px 0 40px; }\r\n            \r\n            \/* \ubaa8\ubc14\uc77c \uce74\ub4dc \uc804\uccb4 \ub808\uc774\uc544\uc6c3 (\uc774\ubbf8\uc9c0\uac00 \uc0c1\ub2e8\uc5d0 \uc624\ub3c4\ub85d column-reverse \uc801\uc6a9) *\/\r\n            .cb2-card, .cb2-card:nth-child(even) {\r\n                position: relative !important; \r\n                top: auto !important; \r\n                height: auto !important; \r\n                min-height: auto !important;\r\n                flex-direction: column-reverse !important; \/* \ud56d\uc0c1 \uc774\ubbf8\uc9c0 \uc704\uc5d0 \ubc30\uce58 *\/\r\n                margin-bottom: 60px;\r\n                box-shadow: 0 15px 30px rgba(0,0,0,0.05);\r\n                border-radius: 25px;\r\n                transform: none !important;\r\n                filter: none !important;\r\n                opacity: 1 !important;\r\n            }\r\n            \r\n            \/* \ubaa8\ubc14\uc77c \ucf58\ud150\uce20 \uc601\uc5ed *\/\r\n            .cb2-card-content { \r\n                width: 100%; padding: 40px 20px; \r\n                text-align: center; align-items: center; \r\n            }\r\n            \r\n            \/* \ubaa8\ubc14\uc77c \uc774\ubbf8\uc9c0 \uc601\uc5ed (\ubcf4\uc774\uc9c0 \uc54a\ub358 \ubc84\uadf8 \ud574\uacb0!) *\/\r\n            .cb2-card-image { \r\n                width: 100%; height: 300px; \r\n                clip-path: none !important; \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c \ub9c8\uc2a4\ud06c \ud574\uc81c\ud558\uc5ec \ubb34\uc870\uac74 \ubcf4\uc774\uac8c *\/\r\n            }\r\n            .cb2-card-image img { \r\n                top: 0; height: 100%; transform: none !important; \/* \ud328\ub7f4\ub799\uc2a4 \ub044\uae30 *\/\r\n            }\r\n            \r\n            .cb2-step { width: 60px; height: 60px; font-size: 1.6rem; margin-bottom: 20px; }\r\n            .cb2-card-content h3 { font-size: 1.8rem; }\r\n            .cb2-card-content p { font-size: 1.05rem; margin-bottom: 25px; }\r\n            .cb2-tags { justify-content: center; }\r\n            .cb2-tag { font-size: 0.95rem; padding: 8px 16px; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cb2-wrap\">\r\n        \r\n        <!-- \ubc30\uacbd \ub2e4\uc774\ub0b4\ubbf9 \ub3c4\ud615 -->\r\n        <div class=\"cb2-bg-shapes\">\r\n            <div class=\"cb2-shape cb2-shape-1\"><\/div>\r\n            <div class=\"cb2-shape cb2-shape-2\"><\/div>\r\n            <div class=\"cb2-shape cb2-shape-3\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- 1. Hero Section -->\r\n        <section class=\"cb2-hero\">\r\n            <div class=\"cb2-hero-bg\" id=\"cb2-parallax-bg\"><\/div>\r\n            <div class=\"cb2-hero-overlay\"><\/div>\r\n            <div class=\"cb2-container cb2-hero-content\">\r\n                <div class=\"cb2-hero-subtitle gs-bounce2\">BUSINESS AREA<\/div>\r\n                <h1 class=\"cb2-hero-title gs-fade-up2\">\ube44\uc988\ub2c8\uc2a4\uc758 \uc2a4\ucf00\uc77c\uc744 \ud0a4\uc6b0\ub294<br><span>DIGITAL MARKETING<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. Intro Section -->\r\n        <section class=\"cb2-intro\">\r\n            <div class=\"cb2-container\">\r\n                <h2 class=\"gs-fade-up2\">\ub370\uc774\ud130 \uae30\ubc18\uc758 \uc555\ub3c4\uc801 \ud37c\ud3ec\uba3c\uc2a4<\/h2>\r\n                <p class=\"gs-fade-up2 delay-1\">\ucf58\ud150\uce20 \uae30\ud68d\ubd80\ud130 \ub9e4\uccb4 \ucd5c\uc801\ud654, \uadf8\ub9ac\uace0 \uae00\ub85c\ubc8c \uc9c4\ucd9c\uae4c\uc9c0. B.LANDING\uc758 \ucc28\ubcc4\ud654\ub41c \ud37c\ud3ec\uba3c\uc2a4 \ub9c8\ucf00\ud305 \uc194\ub8e8\uc158\uc73c\ub85c \ub208\uc5d0 \ub744\ub294 \uc131\uc7a5\uc744 \uacbd\ud5d8\ud574 \ubcf4\uc138\uc694.<\/p>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. Premium Stacking Cards Section -->\r\n        <section class=\"cb2-stack-section\">\r\n            <div class=\"cb2-cards-container\">\r\n                \r\n                <!-- Card 01 -->\r\n                <div class=\"cb2-card\">\r\n                    <div class=\"cb2-card-content\">\r\n                        <div class=\"cb2-step gs-stagger\">01<\/div>\r\n                        <h3 class=\"gs-stagger\">Performance<br>Marketing<\/h3>\r\n                        <p class=\"gs-stagger\">\ub2e8\uc21c\ud55c \ub178\ucd9c\uc774 \uc544\ub2cc '\uc804\ud658'\uc744 \ubaa9\ud45c\ub85c \ud569\ub2c8\ub2e4. \ucca0\uc800\ud55c \ub370\uc774\ud130 \ubd84\uc11d\uacfc \ud0c0\uac9f \ub9ac\uc11c\uce58\ub97c \ud1b5\ud574 ROAS(\uad11\uace0\uc218\uc775\ub960)\ub97c \uadf9\ub300\ud654\ud558\ub294 \ub9e4\uccb4 \uc6b4\uc601 \ubc0f \ucea0\ud398\uc778 \uc804\ub7b5\uc744 \uc218\ub9bd\ud569\ub2c8\ub2e4.<\/p>\r\n                        <div class=\"cb2-tags gs-stagger\">\r\n                            <span class=\"cb2-tag\">\ud37c\ud3ec\uba3c\uc2a4 \ub9c8\ucf00\ud305<\/span>\r\n                            <span class=\"cb2-tag\">\ub370\uc774\ud130 \ubd84\uc11d (GA4)<\/span>\r\n                            <span class=\"cb2-tag\">SEO \ucd5c\uc801\ud654<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb2-card-image js-mask-reveal\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=1000&auto=format&fit=crop\" alt=\"Performance Marketing\" class=\"cb2-img-px\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Card 02 -->\r\n                <div class=\"cb2-card\">\r\n                    <div class=\"cb2-card-content\">\r\n                        <div class=\"cb2-step gs-stagger\">02<\/div>\r\n                        <h3 class=\"gs-stagger\">Media & Video<br>Production<\/h3>\r\n                        <p class=\"gs-stagger\">\ube0c\ub79c\ub4dc\uc758 \uba54\uc2dc\uc9c0\ub97c \uac00\uc7a5 \uac15\ub825\ud558\uac8c \uc804\ub2ec\ud560 \uc218 \uc788\ub294 \ud558\uc774\ud004\ub9ac\ud2f0 \uc601\uc0c1 \ucf58\ud150\uce20\ub97c \uae30\ud68d\ud558\uace0 \uc81c\uc791\ud569\ub2c8\ub2e4. \ud2b8\ub80c\ub514\ud55c \uc20f\ud3fc\ubd80\ud130 \ube0c\ub79c\ub4dc \ud544\ub984\uae4c\uc9c0 \ubaa8\ub4e0 \ud3ec\ub9f7\uc744 \uc544\uc6b0\ub985\ub2c8\ub2e4.<\/p>\r\n                        <div class=\"cb2-tags gs-stagger\">\r\n                            <span class=\"cb2-tag\">\ube0c\ub79c\ub4dc \ud544\ub984 \uc81c\uc791<\/span>\r\n                            <span class=\"cb2-tag\">SNS \uc20f\ud3fc \ucf58\ud150\uce20<\/span>\r\n                            <span class=\"cb2-tag\">\ubaa8\uc158 \uadf8\ub798\ud53d<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb2-card-image js-mask-reveal\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=1000&auto=format&fit=crop\" alt=\"Media Production\" class=\"cb2-img-px\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Card 03 -->\r\n                <div class=\"cb2-card\">\r\n                    <div class=\"cb2-card-content\">\r\n                        <div class=\"cb2-step gs-stagger\">03<\/div>\r\n                        <h3 class=\"gs-stagger\">Global Commerce<br>Solutions<\/h3>\r\n                        <p class=\"gs-stagger\">\uc131\uacf5\uc801\uc778 \uc628\ub77c\uc778 \ube44\uc988\ub2c8\uc2a4\ub97c \uc704\ud55c \uc774\ucee4\uba38\uc2a4 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc1fc\ud551\ubab0 \uad6c\ucd95\ubd80\ud130 \uae00\ub85c\ubc8c \uc9c4\ucd9c\uc744 \uc704\ud55c \ub85c\uceec\ub77c\uc774\uc9d5 \ub9c8\ucf00\ud305\uae4c\uc9c0 \uc6d0\uc2a4\ud1b1\uc73c\ub85c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\r\n                        <div class=\"cb2-tags gs-stagger\">\r\n                            <span class=\"cb2-tag\">\uae00\ub85c\ubc8c \uc774\ucee4\uba38\uc2a4 \uad6c\ucd95<\/span>\r\n                            <span class=\"cb2-tag\">\uae00\ub85c\ubc8c \ud0c0\uac9f \ub9c8\ucf00\ud305<\/span>\r\n                            <span class=\"cb2-tag\">CRM \uc790\ub3d9\ud654<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb2-card-image js-mask-reveal\">\r\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?q=80&w=1000&auto=format&fit=crop\" alt=\"Global Commerce\" class=\"cb2-img-px\">\r\n                    <\/div>\r\n                <\/div>\r\n\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 \ubc30\ub108 \ud328\ub7f4\ub799\uc2a4\r\n            gsap.to(\"#cb2-parallax-bg\", {\r\n                yPercent: 20, ease: \"none\",\r\n                scrollTrigger: { trigger: \".cb2-hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n            });\r\n\r\n            \/\/ 2. \ud14d\uc2a4\ud2b8 \ub4f1\uc7a5 \ud6a8\uacfc\r\n            gsap.fromTo(\".gs-bounce2\", \r\n                { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"bounce.out\" }\r\n            );\r\n            gsap.fromTo(\".cb2-hero-title.gs-fade-up2\", \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.utils.toArray('.cb2-intro .gs-fade-up2').forEach(function(elem) {\r\n                let delayVal = elem.classList.contains('delay-1') ? 0.2 : 0;\r\n                gsap.fromTo(elem, \r\n                    { y: 60, opacity: 0 }, \r\n                    { y: 0, opacity: 1, duration: 1, delay: delayVal, ease: \"power3.out\", scrollTrigger: { trigger: elem, start: \"top 85%\" } }\r\n                );\r\n            });\r\n\r\n            \/\/ 3. PC vs MOBILE \uc870\uac74\ubd80 \uc560\ub2c8\uba54\uc774\uc158\r\n            if(window.innerWidth > 992) {\r\n                const cards = gsap.utils.toArray('.cb2-card');\r\n                \r\n                cards.forEach((card, index) => {\r\n                    \/\/ \ub9c8\uc2a4\ud06c \ub9ac\ube4c \ubc0f \ud14d\uc2a4\ud2b8 \uc2a4\ud0dc\uac70 \uc560\ub2c8\uba54\uc774\uc158\r\n                    const imgContainer = card.querySelector('.js-mask-reveal');\r\n                    const textElements = card.querySelectorAll('.gs-stagger');\r\n                    \r\n                    const tl = gsap.timeline({\r\n                        scrollTrigger: {\r\n                            trigger: card,\r\n                            start: \"top 80%\",\r\n                            toggleActions: \"play none none reverse\"\r\n                        }\r\n                    });\r\n\r\n                    tl.to(imgContainer, {\r\n                        clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\",\r\n                        duration: 1.2, ease: \"power4.inOut\"\r\n                    })\r\n                    .fromTo(textElements, {\r\n                        y: 30, opacity: 0\r\n                    }, {\r\n                        y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: \"power3.out\"\r\n                    }, \"-=0.8\");\r\n\r\n                    \/\/ \uc2a4\ud0dc\ud0b9 \ub381\uc2a4(Depth) \uac15\ud654 \uc560\ub2c8\uba54\uc774\uc158\r\n                    if(index !== cards.length - 1) {\r\n                        gsap.to(card, {\r\n                            scale: 0.92, opacity: 0.5, filter: \"blur(4px)\",\r\n                            ease: \"none\",\r\n                            scrollTrigger: {\r\n                                trigger: cards[index + 1], \r\n                                start: \"top bottom\",       \r\n                                end: \"top 120px\",  \r\n                                scrub: true                \r\n                            }\r\n                        });\r\n                    }\r\n\r\n                    \/\/ \uc774\ubbf8\uc9c0 \ub0b4\ubd80 \uc2a4\ud06c\ub864 \ud328\ub7f4\ub799\uc2a4\r\n                    const img = card.querySelector('.cb2-img-px');\r\n                    if(img) {\r\n                        gsap.fromTo(img, \r\n                            { yPercent: -10 },\r\n                            {\r\n                                yPercent: 10, ease: \"none\",\r\n                                scrollTrigger: {\r\n                                    trigger: card, start: \"top bottom\", end: \"bottom top\", scrub: true\r\n                                }\r\n                            }\r\n                        );\r\n                    }\r\n                });\r\n            } else {\r\n                \/\/ \u2728 \ubaa8\ubc14\uc77c\uc744 \uc704\ud55c \uae54\ub054\ud55c \ub4f1\uc7a5 \ud6a8\uacfc \u2728\r\n                gsap.utils.toArray('.cb2-card').forEach(function(card) {\r\n                    gsap.fromTo(card, \r\n                        { y: 50, opacity: 0 }, \r\n                        { y: 0, opacity: 1, duration: 1, ease: \"power3.out\", scrollTrigger: { trigger: card, start: \"top 85%\" } }\r\n                    );\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-23","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\/23","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=23"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/23\/revisions\/49"}],"up":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}