{"id":21,"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%bc1\/"},"modified":"2026-06-08T08:00:21","modified_gmt":"2026-06-08T08:00:21","slug":"%ec%82%ac%ec%97%85%eb%b6%84%ec%95%bc1","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%bc1\/","title":{"rendered":"\uc0ac\uc5c5\ubd84\uc57c1"},"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\r\n        ========================================= *\/\r\n        .cb1-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        .cb1-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cb1-wrap img { max-width: 100%; display: block; }\r\n        \r\n        .cb1-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 (\uc0dd\ub3d9\uac10 \uac15\ud654) *\/\r\n        .cb1-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .cb1-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; animation: floatObj 15s infinite alternate ease-in-out; }\r\n        .cb1-shape-1 { width: 500px; height: 500px; background: var(--c-primary); top: 5%; left: -100px; }\r\n        .cb1-shape-2 { width: 600px; height: 600px; background: var(--c-secondary); top: 40%; right: -200px; animation-delay: -5s; }\r\n        .cb1-shape-3 { width: 400px; height: 400px; background: var(--c-purple); bottom: 10%; left: 10%; animation-delay: -10s; }\r\n        @keyframes floatObj { \r\n            0% { transform: translate(0, 0) scale(1) rotate(0deg); } \r\n            100% { transform: translate(120px, 120px) scale(1.3) rotate(15deg); } \r\n        }\r\n\r\n        \/* =========================================\r\n           1. HERO SECTION \r\n        ========================================= *\/\r\n        .cb1-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        .cb1-hero-bg {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 130%;\r\n            background: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?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        }\r\n        .cb1-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        .cb1-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .cb1-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: pulseShadow 2s infinite;\r\n        }\r\n        @keyframes pulseShadow { 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        .cb1-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        .cb1-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. INTRO SECTION\r\n        ========================================= *\/\r\n        .cb1-intro { padding: 120px 0 60px; text-align: center; position: relative; z-index: 5; }\r\n        .cb1-intro h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 20px; line-height: 1.3; }\r\n        .cb1-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. BUSINESS AREA SECTION (\uc9c0\uadf8\uc7ac\uadf8 \ub808\uc774\uc544\uc6c3)\r\n        ========================================= *\/\r\n        .cb1-business { padding: 40px 0 120px; position: relative; z-index: 5; }\r\n        \r\n        .cb1-item {\r\n            display: flex; align-items: center; justify-content: space-between; gap: 80px;\r\n            margin-bottom: 180px; position: relative; perspective: 1500px;\r\n        }\r\n        .cb1-item:nth-child(even) { flex-direction: row-reverse; }\r\n\r\n        .cb1-bg-text {\r\n            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n            font-size: 14vw; font-weight: 900; color: rgba(0,0,0,0.03);\r\n            white-space: nowrap; pointer-events: none; z-index: -1;\r\n            font-family: 'Arial Black', sans-serif; letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* \ud83d\udea8 \ubb38\uc81c \ud574\uacb0: \uc774\ubbf8\uc9c0 \uc601\uc5ed \ub192\uc774 \uace0\uc815 \ubc0f \uc624\ubc84\ud50c\ub85c\uc6b0 \uad00\ub9ac *\/\r\n        .cb1-img-col { \r\n            width: 50%; position: relative; z-index: 2; \r\n        }\r\n        \r\n        \/* \ud50c\ub85c\ud305 \ub118\ubc84 \ubc30\uc9c0 (\uc785\uccb4\uac10 \ubd80\uc5ec) *\/\r\n        .cb1-number {\r\n            position: absolute; top: -30px; left: -30px; z-index: 10;\r\n            width: 110px; height: 110px; background: var(--c-primary);\r\n            color: #fff; font-size: 3.5rem; font-weight: 900; font-style: italic;\r\n            display: flex; align-items: center; justify-content: center;\r\n            border-radius: 50%; \r\n            box-shadow: 0 20px 40px rgba(255, 51, 102, 0.4);\r\n            border: 6px solid #fff;\r\n            animation: floatBadge 4s ease-in-out infinite;\r\n        }\r\n        .cb1-item:nth-child(even) .cb1-number { left: auto; right: -30px; background: var(--c-secondary); box-shadow: 0 20px 40px rgba(0, 229, 255, 0.4); animation-delay: 1s; }\r\n        .cb1-item:nth-child(3) .cb1-number { background: var(--c-purple); box-shadow: 0 20px 40px rgba(138, 43, 226, 0.4); animation-delay: 2s; }\r\n\r\n        @keyframes floatBadge {\r\n            0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n            50% { transform: translateY(-15px) rotate(5deg); }\r\n        }\r\n\r\n        \/* \ud83d\udea8 \ud575\uc2ec \ud53d\uc2a4: \uc774\ubbf8\uc9c0 \ud504\ub808\uc784 \ub192\uc774\ub97c 550px\ub85c \ubb34\uc870\uac74 \ub3d9\uc77c\ud558\uac8c \uace0\uc815 *\/\r\n        .cb1-img-wrap {\r\n            width: 100%; height: 550px;\r\n            border-radius: 40px; overflow: hidden; position: relative;\r\n            box-shadow: 0 30px 60px rgba(0,0,0,0.1);\r\n            border: 1px solid rgba(0,0,0,0.05);\r\n            background: var(--c-bg-soft);\r\n            transition: box-shadow 0.4s ease;\r\n        }\r\n        .cb1-img-wrap::after {\r\n            content: ''; position: absolute; inset: 0;\r\n            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);\r\n            pointer-events: none;\r\n        }\r\n        \/* \ud83d\udea8 \ud575\uc2ec \ud53d\uc2a4: \uc774\ubbf8\uc9c0\ub97c \ucee8\ud14c\uc774\ub108\ubcf4\ub2e4 \ud06c\uac8c \ub9cc\ub4e4\uc5b4\uc11c \ud328\ub7f4\ub799\uc2a4 \uc2dc \ud770\uc0c9 \uc5ec\ubc31\uc774 \uc548 \ubcf4\uc774\ub3c4\ub85d \ucc28\ub2e8 *\/\r\n        .cb1-img { \r\n            position: absolute; top: -12.5%; left: 0;\r\n            width: 100%; height: 125%; \r\n            object-fit: cover; \r\n        }\r\n        \r\n        \/* \ud14d\uc2a4\ud2b8 \uc601\uc5ed (\ud638\ubc84 \uc2dc \ub2e4\uac00\uc624\ub294 \uc785\uccb4 \ud6a8\uacfc \uac15\ud654) *\/\r\n        .cb1-text-col { \r\n            width: 45%; \r\n            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); \r\n        }\r\n        .cb1-item:hover .cb1-text-col { transform: translateX(25px) scale(1.02); }\r\n        .cb1-item:nth-child(even):hover .cb1-text-col { transform: translateX(-25px) scale(1.02); }\r\n\r\n        .cb1-text-col h3 { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 900; color: var(--c-text-main); margin-bottom: 25px; line-height: 1.3; }\r\n        .cb1-text-col p { font-size: 1.15rem; color: var(--c-text-muted); line-height: 1.7; word-break: keep-all; margin-bottom: 30px; }\r\n        \r\n        \/* \uc0c1\uc138 \ub9ac\uc2a4\ud2b8 *\/\r\n        .cb1-feature-list { list-style: none; padding: 0; margin: 0; }\r\n        .cb1-feature-list li {\r\n            position: relative; padding-left: 35px; margin-bottom: 18px;\r\n            font-size: 1.1rem; font-weight: 700; color: var(--c-text-main);\r\n        }\r\n        .cb1-feature-list li::before {\r\n            content: '\u2713'; position: absolute; left: 0; top: 0px;\r\n            width: 22px; height: 22px; background: var(--c-primary); color: #fff;\r\n            font-size: 0.8rem; display: flex; align-items: center; justify-content: center;\r\n            border-radius: 50%; box-shadow: 0 4px 10px rgba(255,51,102,0.3);\r\n            animation: pulseIcon 2s infinite;\r\n        }\r\n        .cb1-item:nth-child(even) .cb1-feature-list li::before { background: var(--c-secondary); box-shadow: 0 4px 10px rgba(0,229,255,0.3); }\r\n        .cb1-item:nth-child(3) .cb1-feature-list li::before { background: var(--c-purple); box-shadow: 0 4px 10px rgba(138,43,226,0.3); }\r\n\r\n        @keyframes pulseIcon {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.15); }\r\n            100% { transform: scale(1); }\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            .cb1-hero { min-height: 60vh; padding-top: 60px; }\r\n            .cb1-hero-title { font-size: clamp(2rem, 7vw, 3rem); white-space: normal; line-height: 1.3; }\r\n            \r\n            .cb1-intro { padding: 80px 0 40px; }\r\n            .cb1-business { padding: 20px 0 80px; }\r\n            \r\n            .cb1-item, .cb1-item:nth-child(even) { flex-direction: column; gap: 50px; margin-bottom: 120px; }\r\n            \r\n            .cb1-img-col, .cb1-text-col { width: 100%; }\r\n            .cb1-item:hover .cb1-text-col, .cb1-item:nth-child(even):hover .cb1-text-col { transform: none; } \r\n            \r\n            \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \ube44\uc728 \uc720\uc9c0 \ubc0f \ud328\ub7f4\ub799\uc2a4 \ubb34\ud6a8\ud654\ud558\uc5ec \uae54\ub054\ud558\uac8c \uace0\uc815 *\/\r\n            .cb1-img-wrap { height: 400px; }\r\n            .cb1-img { top: 0; height: 100%; }\r\n            \r\n            .cb1-number, .cb1-item:nth-child(even) .cb1-number {\r\n                width: 80px; height: 80px; font-size: 2.5rem;\r\n                top: -25px; left: -15px; right: auto; border-width: 4px;\r\n            }\r\n            \r\n            .cb1-bg-text { font-size: 25vw; }\r\n            .cb1-text-col h3 { font-size: 2rem; margin-bottom: 15px; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cb1-wrap\">\r\n        \r\n        <!-- \ubc30\uacbd \ub2e4\uc774\ub0b4\ubbf9 \ub3c4\ud615 -->\r\n        <div class=\"cb1-bg-shapes\">\r\n            <div class=\"cb1-shape cb1-shape-1\"><\/div>\r\n            <div class=\"cb1-shape cb1-shape-2\"><\/div>\r\n            <div class=\"cb1-shape cb1-shape-3\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- 1. Hero Section -->\r\n        <section class=\"cb1-hero\">\r\n            <div class=\"cb1-hero-bg\" id=\"cb1-parallax-bg\"><\/div>\r\n            <div class=\"cb1-hero-overlay\"><\/div>\r\n            <div class=\"cb1-container cb1-hero-content\">\r\n                <div class=\"cb1-hero-subtitle gs-bounce\">BUSINESS AREA<\/div>\r\n                <h1 class=\"cb1-hero-title gs-fade-up\">\ub514\uc9c0\ud138 \uacbd\ud5d8\uc758 \uc0c8\ub85c\uc6b4 \uae30\uc900<br><span>WEB & APP UX\/UI<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. Intro Section -->\r\n        <section class=\"cb1-intro\">\r\n            <div class=\"cb1-container\">\r\n                <h2 class=\"gs-fade-up\">\uc6b0\ub9ac\uc758 \ube44\uc988\ub2c8\uc2a4\ub294<br>\uace0\uac1d\uc758 \uc131\uacf5\uc744 \ub514\uc790\uc778\ud569\ub2c8\ub2e4.<\/h2>\r\n                <p class=\"gs-fade-up delay-1\">\ub2e8\uc21c\ud788 \ubcf4\uae30 \uc88b\uc740 \ub514\uc790\uc778\uc744 \ub118\uc5b4, \ucca0\uc800\ud55c \ub370\uc774\ud130 \ubd84\uc11d\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc744 \ubc14\ud0d5\uc73c\ub85c \ube0c\ub79c\ub4dc\uc758 \uac00\uce58\ub97c \uadf9\ub300\ud654\ud558\ub294 \ucd5c\uc801\uc758 \ub514\uc9c0\ud138 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. Business Areas (Zig-Zag) -->\r\n        <section class=\"cb1-business\">\r\n            <div class=\"cb1-container\">\r\n                \r\n                <!-- Item 01: UX\/UI Design -->\r\n                <div class=\"cb1-item\">\r\n                    <div class=\"cb1-bg-text gs-parallax-text\">UX\/UI DESIGN<\/div>\r\n                    <!-- \uc22b\uc790 \ubc30\uc9c0\ub97c \uc774\ubbf8\uc9c0 \ub798\ud37c \ubc16\uc73c\ub85c \uaebc\ub0b4\uc5b4 \uc798\ub9bc \ubc29\uc9c0 -->\r\n                    <div class=\"cb1-img-col gs-slide-right\">\r\n                        <div class=\"cb1-number\">01<\/div>\r\n                        <div class=\"cb1-img-wrap\" data-tilt data-tilt-max=\"8\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.3\" data-tilt-perspective=\"1000\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?q=80&w=1000&auto=format&fit=crop\" alt=\"UX UI Design\" class=\"cb1-img gs-img-parallax\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb1-text-col gs-fade-up delay-1\">\r\n                        <h3>\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc9c1\uad00\uc801\uc778<br>UX\/UI \ub514\uc790\uc778<\/h3>\r\n                        <p>\uace0\uac1d\uc758 \ube44\uc988\ub2c8\uc2a4 \ubaa9\ud45c\uc640 \uc0ac\uc6a9\uc790\uc758 \ub2c8\uc988\ub97c \uc815\ud655\ud788 \ud30c\uc545\ud558\uc5ec, \uc27d\uace0 \ud3b8\ub9ac\ud558\uba74\uc11c\ub3c4 \uc2dc\uac01\uc801\uc73c\ub85c \ub9e4\ub825\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc124\uacc4\ud569\ub2c8\ub2e4. \uc544\ub984\ub2e4\uc6c0\uacfc \uc0ac\uc6a9\uc131\uc744 \ub3d9\uc2dc\uc5d0 \ub9cc\uc871\uc2dc\ud0a4\ub294 \uacb0\uacfc\ubb3c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\r\n                        <ul class=\"cb1-feature-list gs-stagger-list\">\r\n                            <li>\uc0ac\uc6a9\uc790 \ub9ac\uc11c\uce58 \ubc0f \ub370\uc774\ud130 \ubd84\uc11d \uae30\ubc18 UX \uc124\uacc4<\/li>\r\n                            <li>\ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0\ub97c \ubc18\uc601\ud55c \ub9de\ucda4\ud615 UI \ub514\uc790\uc778<\/li>\r\n                            <li>\ub514\ubc14\uc774\uc2a4 \ucd5c\uc801\ud654 (\ubc18\uc751\ud615 \uc6f9, \ubaa8\ubc14\uc77c \uc571 \ub514\uc790\uc778)<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Item 02: Web Development -->\r\n                <div class=\"cb1-item\">\r\n                    <div class=\"cb1-bg-text gs-parallax-text\">DEVELOPMENT<\/div>\r\n                    <div class=\"cb1-img-col gs-slide-left\">\r\n                        <div class=\"cb1-number\">02<\/div>\r\n                        <div class=\"cb1-img-wrap\" data-tilt data-tilt-max=\"8\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.3\" data-tilt-perspective=\"1000\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?q=80&w=1000&auto=format&fit=crop\" alt=\"Web Development\" class=\"cb1-img gs-img-parallax\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb1-text-col gs-fade-up delay-1\">\r\n                        <h3>\ucd5c\uc2e0 \uae30\uc220 \uae30\ubc18\uc758<br>\uc548\uc815\uc801\uc778 \uc6f9\/\uc571 \uac1c\ubc1c<\/h3>\r\n                        <p>\ub514\uc790\uc778\uc758 \uc644\uc131\ub3c4\ub97c 100% \uad6c\ud604\ud558\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud37c\ube14\ub9ac\uc2f1\ubd80\ud130, \ud2b8\ub798\ud53d\uc744 \uacac\ub514\ub294 \uacac\uace0\ud55c \ubc31\uc5d4\ub4dc \uc2dc\uc2a4\ud15c\uae4c\uc9c0 \uc644\ubcbd\ud558\uac8c \uad6c\ucd95\ud569\ub2c8\ub2e4. \ud654\ub824\ud55c \uc778\ud130\ub799\uc158\uacfc \uc560\ub2c8\uba54\uc774\uc158\uc73c\ub85c \uc0dd\ub3d9\uac10\uc744 \ub354\ud569\ub2c8\ub2e4.<\/p>\r\n                        <ul class=\"cb1-feature-list gs-stagger-list\">\r\n                            <li>HTML5, CSS3, GSAP \uc560\ub2c8\uba54\uc774\uc158 \ud37c\ube14\ub9ac\uc2f1<\/li>\r\n                            <li>React, Vue.js \uae30\ubc18\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c<\/li>\r\n                            <li>\uc548\uc815\uc801\uc774\uace0 \ud655\uc7a5 \uac00\ub2a5\ud55c \uc11c\ubc84 \ubc0f \ubc31\uc5d4\ub4dc \uad6c\ucd95<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Item 03: Digital Branding -->\r\n                <div class=\"cb1-item\">\r\n                    <div class=\"cb1-bg-text gs-parallax-text\">BRANDING<\/div>\r\n                    <div class=\"cb1-img-col gs-slide-right\">\r\n                        <div class=\"cb1-number\">03<\/div>\r\n                        <div class=\"cb1-img-wrap\" data-tilt data-tilt-max=\"8\" data-tilt-speed=\"400\" data-tilt-glare=\"true\" data-tilt-max-glare=\"0.3\" data-tilt-perspective=\"1000\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1434030216411-0b793f4b4173?q=80&w=1000&auto=format&fit=crop\" alt=\"Digital Branding\" class=\"cb1-img gs-img-parallax\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cb1-text-col gs-fade-up delay-1\">\r\n                        <h3>\uae30\uc5c5\uc758 \uac00\uce58\ub97c \ub192\uc774\ub294<br>\ub514\uc9c0\ud138 \ube0c\ub79c\ub529 \uc804\ub7b5<\/h3>\r\n                        <p>\ub2e8\uc21c\ud55c \ub85c\uace0 \uc81c\uc791\uc744 \ub118\uc5b4, \ub514\uc9c0\ud138 \uacf5\uac04\uc5d0\uc11c \ube0c\ub79c\ub4dc\uac00 \uace0\uac1d\uacfc \uc18c\ud1b5\ud558\ub294 \ubc29\uc2dd\uc744 \uae30\ud68d\ud569\ub2c8\ub2e4. \uc77c\uad00\ub41c \ube0c\ub79c\ub4dc \uba54\uc2dc\uc9c0\uc640 \ube44\uc8fc\uc5bc \uc2dc\uc2a4\ud15c\uc744 \ud1b5\ud574 \uae30\uc5c5\uc758 \uc544\uc774\ub374\ud2f0\ud2f0\ub97c \uac15\ub825\ud558\uac8c \uad6c\ucd95\ud569\ub2c8\ub2e4.<\/p>\r\n                        <ul class=\"cb1-feature-list gs-stagger-list\">\r\n                            <li>\ube0c\ub79c\ub4dc \ub124\uc774\ubc0d \ubc0f \uc2a4\ud1a0\ub9ac\ud154\ub9c1 \uae30\ud68d<\/li>\r\n                            <li>CI\/BI \ub85c\uace0 \ub514\uc790\uc778 \ubc0f \ube44\uc8fc\uc5bc \uac00\uc774\ub4dc\ub77c\uc778 \uac1c\ubc1c<\/li>\r\n                            <li>\ub514\uc9c0\ud138 \ub9c8\ucf00\ud305\uc744 \uc704\ud55c \uc5d0\uc14b \ubc0f \ucf58\ud150\uce20 \uc81c\uc791<\/li>\r\n                        <\/ul>\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(\"#cb1-parallax-bg\", {\r\n                yPercent: 30, ease: \"none\",\r\n                scrollTrigger: { trigger: \".cb1-hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n            });\r\n\r\n            \/\/ 2. \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            gsap.fromTo(\".cb1-hero-title.gs-fade-up\", \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            \/\/ 3. \ud14d\uc2a4\ud2b8 \ube14\ub85d \uc2a4\ud06c\ub864 \ub4f1\uc7a5\r\n            gsap.utils.toArray('.gs-fade-up:not(.cb1-hero-title)').forEach(function(elem) {\r\n                let delayVal = 0;\r\n                if(elem.classList.contains('delay-1')) delayVal = 0.2;\r\n\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            \/\/ 4. \uc0c1\uc138 \ub9ac\uc2a4\ud2b8(ul li) \uc21c\ucc28\uc801 \ud0c0\uaca9\uac10 \uc560\ub2c8\uba54\uc774\uc158\r\n            gsap.utils.toArray('.gs-stagger-list').forEach(function(list) {\r\n                const items = list.querySelectorAll('li');\r\n                gsap.fromTo(items, \r\n                    { x: -30, opacity: 0 }, \r\n                    { x: 0, opacity: 1, duration: 0.8, stagger: 0.15, ease: \"back.out(1.5)\", scrollTrigger: { trigger: list, start: \"top 85%\" } }\r\n                );\r\n            });\r\n\r\n            \/\/ 5. \uc88c\uc6b0 \uc2ac\ub77c\uc774\ub4dc \ub4f1\uc7a5 \ud6a8\uacfc (\uc774\ubbf8\uc9c0)\r\n            gsap.utils.toArray('.gs-slide-right').forEach(function(elem) {\r\n                gsap.fromTo(elem, \r\n                    { x: -80, opacity: 0 }, { x: 0, opacity: 1, duration: 1.2, ease: \"power3.out\", scrollTrigger: { trigger: elem, start: \"top 75%\" } }\r\n                );\r\n            });\r\n            gsap.utils.toArray('.gs-slide-left').forEach(function(elem) {\r\n                gsap.fromTo(elem, \r\n                    { x: 80, opacity: 0 }, { x: 0, opacity: 1, duration: 1.2, ease: \"power3.out\", scrollTrigger: { trigger: elem, start: \"top 75%\" } }\r\n                );\r\n            });\r\n\r\n            \/\/ 6. \uc774\ubbf8\uc9c0 \ub0b4\ubd80 \uc2a4\ud06c\ub864 \ud328\ub7f4\ub799\uc2a4 (\uc644\ubcbd\ud558\uac8c \ud770 \uc5ec\ubc31\uc744 \ucc28\ub2e8\ud55c \uacc4\uc0b0\ub41c \ubc94\uc704 \uc801\uc6a9)\r\n            if(window.innerWidth > 992) {\r\n                gsap.utils.toArray('.gs-img-parallax').forEach(function(img) {\r\n                    gsap.fromTo(img, \r\n                        { yPercent: -10 },\r\n                        { yPercent: 10, ease: \"none\", scrollTrigger: { trigger: img.parentElement, start: \"top bottom\", end: \"bottom top\", scrub: true } }\r\n                    );\r\n                });\r\n            }\r\n\r\n            \/\/ 7. \ubc30\uacbd \ud14d\uc2a4\ud2b8(\uc6cc\ud130\ub9c8\ud06c) \ud328\ub7f4\ub799\uc2a4 \ud6a8\uacfc\r\n            gsap.utils.toArray('.gs-parallax-text').forEach(function(text) {\r\n                gsap.to(text, {\r\n                    yPercent: -50, ease: \"none\",\r\n                    scrollTrigger: { trigger: text.parentElement, start: \"top bottom\", end: \"bottom top\", scrub: true }\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-21","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\/21","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=21"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/21\/revisions\/47"}],"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=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}