{"id":12,"date":"2026-06-02T02:02:10","date_gmt":"2026-06-02T02:02:10","guid":{"rendered":"https:\/\/pink-cassowary-558176.hostingersite.com\/%ec%82%ac%ec%97%85%ec%86%8c%ea%b0%9c\/"},"modified":"2026-06-02T09:34:09","modified_gmt":"2026-06-02T09:34:09","slug":"business","status":"publish","type":"page","link":"https:\/\/pink-cassowary-558176.hostingersite.com\/business\/","title":{"rendered":"\uc0ac\uc5c5\uc18c\uac1c"},"content":{"rendered":"    <style>\r\n        \/* [1] \uae30\ubcf8 \uc124\uc815 \ubc0f \ub9ac\uc14b *\/\r\n        .biz-wrap { \r\n            position: relative; width: 100vw; max-width: 100%; left: 50%; right: 50%; \r\n            margin-left: -50vw; margin-right: -50vw; overflow-x: hidden; background: #ffffff; color: #333; font-family: 'Noto Sans KR', sans-serif; \r\n        }\r\n        .biz-wrap * { box-sizing: border-box; }\r\n\r\n        \/* [2] \ud788\uc5b4\ub85c \uc139\uc158 *\/\r\n        .biz-hero { position: relative; height: 65vh; min-height: 450px; display: flex; align-items: center; justify-content: center; background: #f4f7fb; overflow: hidden; perspective: 1000px; }\r\n        .biz-hero-bg { position: absolute; inset: 0; background: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=2000&auto=format&fit=crop') center\/cover; filter: opacity(0.1) grayscale(100%); transform: scale(1.1); animation: slowZoom 20s infinite alternate linear; }\r\n        @keyframes slowZoom { 0% { transform: scale(1.1); } 100% { transform: scale(1.2); } }\r\n        .biz-hero-content { position: relative; z-index: 10; text-align: center; padding: 0 5%; transform-style: preserve-3d; }\r\n        .biz-title { font-size: 5vw; font-weight: 900; color: #111; margin: 0; line-height: 1.1; letter-spacing: -1px; text-transform: uppercase; text-shadow: 0 20px 40px rgba(0,0,0,0.05); }\r\n        .biz-title span { display: inline-block; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(50px); }\r\n        .biz-sub { font-size: 1.2rem; color: #0066ff; font-weight: 600; margin-top: 20px; letter-spacing: 3px; opacity: 0; transform: translateY(20px); word-break: keep-all; }\r\n\r\n        \/* [3] \uc694\uc57d(Overview) \uadf8\ub9ac\ub4dc (3D \ud638\ubc84 \ucd94\uac00) *\/\r\n        .biz-overview { padding: 120px 5% 60px; background: #fff; max-width: 1400px; margin: 0 auto; perspective: 2000px; }\r\n        .overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; transform-style: preserve-3d; }\r\n        .ov-card { padding: 40px 30px; background: #fff; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.03); border: 1px solid #f0f4f8; text-align: center; transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; transform-style: preserve-3d; }\r\n        .ov-card:hover { transform: translateY(-20px) rotateX(10deg) rotateY(-10deg); box-shadow: 20px 30px 50px rgba(0,102,255,0.15); border-color: rgba(0,102,255,0.3); }\r\n        .ov-icon { width: 80px; height: 80px; background: #f4f7fb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 25px; color: #0066ff; transition: 0.5s; transform: translateZ(40px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }\r\n        .ov-card:hover .ov-icon { background: #0066ff; color: #fff; transform: translateZ(60px) rotate(15deg) scale(1.1); box-shadow: 0 15px 30px rgba(0,102,255,0.3); }\r\n        .ov-card h3 { font-size: 1.4rem; font-weight: 800; color: #111; margin: 0 0 15px; transform: translateZ(30px); transition: 0.4s; }\r\n        .ov-card p { font-size: 1rem; color: #666; line-height: 1.6; margin: 0; word-break: keep-all; transform: translateZ(20px); transition: 0.4s; }\r\n\r\n        \/* [4] \uc0c1\uc138 \uc0ac\uc5c5\ubd84\uc57c (\uad50\ucc28\ud615 \ub808\uc774\uc544\uc6c3 + \uac15\ub825\ud55c 3D \ud638\ubc84) *\/\r\n        .biz-detail-sec { padding: 80px 5% 150px; background: #fff; }\r\n        .b-row { display: flex; align-items: center; max-width: 1300px; margin: 0 auto 150px; gap: 100px; perspective: 2500px; }\r\n        .b-row:nth-child(even) { flex-direction: row-reverse; }\r\n        .b-row:last-child { margin-bottom: 0; }\r\n        \r\n        \/* \uc774\ubbf8\uc9c0 3D \ud2f8\ud2b8 \ub798\ud37c *\/\r\n        .b-img-wrap { flex: 1; position: relative; border-radius: 30px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); transform-style: preserve-3d; transition: transform 0.1s, box-shadow 0.3s; will-change: transform; z-index: 1; }\r\n        .b-img-wrap:hover { box-shadow: 0 50px 100px rgba(0,102,255,0.25); z-index: 10; }\r\n        .b-img-wrap::after { content: ''; position: absolute; inset: 0; background: #0066ff; transform-origin: right; z-index: 2; border-radius: inherit; }\r\n        .b-img { width: 100%; height: 480px; object-fit: cover; border-radius: 30px; transform: scale(1.15) translateZ(30px); transition: 0.5s; pointer-events: none; }\r\n        \r\n        \/* \ud14d\uc2a4\ud2b8 3D \ud50c\ub85c\ud305 \ubc15\uc2a4 *\/\r\n        .b-text-wrap { flex: 1; padding: 40px; border-radius: 30px; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; border: 1px solid transparent; position: relative; z-index: 1; }\r\n        .b-text-wrap:hover { background: #ffffff; box-shadow: 0 40px 80px rgba(0, 102, 255, 0.08); border-color: #f0f4f8; transform: translateY(-15px) rotateX(5deg) rotateY(-5deg); z-index: 10; }\r\n        \r\n        .b-num { font-size: 5rem; font-weight: 900; color: #f0f4f8; line-height: 1; margin-bottom: 10px; font-family: 'Arial Black', sans-serif; transition: 0.5s; }\r\n        .b-text-wrap:hover .b-num { color: #e4eef9; transform: translateZ(60px) translateY(-10px); text-shadow: 0 15px 30px rgba(0,102,255,0.2); }\r\n        \r\n        .b-text-wrap h2 { font-size: 2.6rem; font-weight: 900; color: #111; margin: 0 0 25px; line-height: 1.3; transition: 0.5s; }\r\n        .b-text-wrap h2 span { color: #0066ff; }\r\n        .b-text-wrap:hover h2 { transform: translateZ(40px); text-shadow: 0 10px 20px rgba(0,0,0,0.05); }\r\n        \r\n        .b-text-wrap p { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 30px; word-break: keep-all; transition: 0.5s; }\r\n        .b-text-wrap:hover p { transform: translateZ(30px); color: #333; }\r\n        \r\n        .b-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; transition: 0.5s; }\r\n        .b-text-wrap:hover .b-list { transform: translateZ(25px); }\r\n        .b-list li { position: relative; padding-left: 25px; font-size: 1.05rem; font-weight: 600; color: #333; transition: 0.3s; }\r\n        .b-list li:hover { color: #0066ff; transform: translateX(5px); }\r\n        .b-list li::before { content: '\u2714'; position: absolute; left: 0; top: 0; color: #0066ff; font-size: 1rem; }\r\n\r\n        \/* [5] \uc5c5\ubb34 \ud504\ub85c\uc138\uc2a4 (Process) *\/\r\n        .biz-process { padding: 150px 5%; background: #0a0a0a; color: #fff; position: relative; overflow: hidden; perspective: 1500px; }\r\n        .proc-header { text-align: center; margin-bottom: 100px; position: relative; z-index: 10; }\r\n        .proc-header h2 { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: 2px; }\r\n        .proc-header p { font-size: 1.2rem; color: #4facfe; margin-top: 15px; font-weight: 600; }\r\n        \r\n        .proc-wrap { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; transform-style: preserve-3d; }\r\n        .proc-line { position: absolute; top: 50px; left: 5%; width: 90%; height: 2px; background: rgba(255,255,255,0.1); z-index: -1; }\r\n        .proc-line-fill { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: linear-gradient(90deg, #4facfe, #00f2fe); box-shadow: 0 0 15px rgba(0,242,254,0.5); }\r\n        \r\n        .proc-step { flex: 1; text-align: center; padding: 0 20px; position: relative; transition: 0.5s; transform-style: preserve-3d; cursor: pointer; }\r\n        .proc-step:hover { transform: translateZ(30px) translateY(-10px); }\r\n        .p-icon { width: 100px; height: 100px; background: #111; border: 2px solid #333; border-radius: 50%; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; transition: 0.4s; box-shadow: 0 0 0 10px #0a0a0a; transform: translateZ(20px); }\r\n        .proc-step:hover .p-icon { border-color: #00f2fe; color: #00f2fe; transform: translateZ(40px) scale(1.1); box-shadow: 0 20px 40px rgba(0,242,254,0.3), 0 0 0 10px #0a0a0a; }\r\n        .p-num { position: absolute; top: -10px; right: -10px; width: 35px; height: 35px; background: #00f2fe; color: #000; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 3px solid #0a0a0a; transition: 0.3s; }\r\n        .proc-step:hover .p-num { transform: rotate(360deg); background: #fff; }\r\n        .proc-step h3 { font-size: 1.5rem; margin: 0 0 15px; font-weight: 800; color: #fff; transition: 0.3s; transform: translateZ(10px); }\r\n        .proc-step:hover h3 { color: #00f2fe; }\r\n        .proc-step p { font-size: 1rem; color: #aaa; line-height: 1.6; margin: 0; word-break: keep-all; }\r\n\r\n        \/* [6] CTA \uc139\uc158 *\/\r\n        .biz-cta { padding: 120px 5%; background: linear-gradient(135deg, #0066ff, #00ccff); text-align: center; color: #fff; perspective: 1000px; }\r\n        .biz-cta h2 { font-size: 3.5rem; font-weight: 900; margin: 0 0 20px; text-shadow: 0 10px 20px rgba(0,0,0,0.1); }\r\n        .biz-cta p { font-size: 1.3rem; margin: 0 0 40px; font-weight: 500; opacity: 0.9; }\r\n        .cta-btn { display: inline-block; padding: 20px 50px; background: #fff; color: #0066ff; text-decoration: none; font-size: 1.2rem; font-weight: 800; border-radius: 50px; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 40px rgba(0,0,0,0.15); transform-style: preserve-3d; }\r\n        .cta-btn:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.3); background: #111; color: #fff; }\r\n\r\n        \/* \ubaa8\ubc14\uc77c \ubc0f \ud0dc\ube14\ub9bf \ucd5c\uc801\ud654 *\/\r\n        @media (max-width: 1200px) {\r\n            .overview-grid { grid-template-columns: repeat(2, 1fr); }\r\n            .b-row, .b-row:nth-child(even) { flex-direction: column; gap: 50px; margin-bottom: 120px; text-align: center; perspective: none; }\r\n            .b-img-wrap { width: 100%; max-width: 800px; margin: 0 auto; }\r\n            .b-text-wrap { width: 100%; padding: 0; }\r\n            .b-text-wrap:hover { transform: none; box-shadow: none; background: transparent; border-color: transparent; }\r\n            .b-list { text-align: left; }\r\n            .b-img { height: 400px; transform: scale(1.1); }\r\n            \r\n            .proc-wrap { flex-direction: column; gap: 60px; }\r\n            .proc-line { top: 0; left: 50px; width: 2px; height: 100%; transform: translateX(-50%); }\r\n            .proc-line-fill { width: 100%; height: 0%; background: linear-gradient(180deg, #4facfe, #00f2fe); }\r\n            .proc-step { display: flex; align-items: center; text-align: left; padding: 0; }\r\n            .p-icon { margin: 0 40px 0 0; box-shadow: 0 0 0 10px #0a0a0a; z-index: 2; }\r\n            .proc-step:hover .p-icon { transform: translateX(10px) rotate(10deg); }\r\n            .proc-step:hover { transform: none; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .biz-title { font-size: 10vw; letter-spacing: -1px; }\r\n            .biz-sub { font-size: 1rem; }\r\n            .overview-grid { grid-template-columns: 1fr; }\r\n            .b-text-wrap h2 { font-size: 2.2rem; }\r\n            .b-list { grid-template-columns: 1fr; }\r\n            .b-img { height: 300px; }\r\n            .proc-step { flex-direction: column; text-align: center; }\r\n            .p-icon { margin: 0 auto 20px; }\r\n            .proc-line { display: none; }\r\n            .biz-cta h2 { font-size: 2.5rem; }\r\n        }\r\n    <\/style>\r\n\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\r\n    <div class=\"biz-wrap\">\r\n        \r\n        <!-- 1. \ud788\uc5b4\ub85c \uc139\uc158 -->\r\n        <section class=\"biz-hero\">\r\n            <div class=\"biz-hero-bg\"><\/div>\r\n            <div class=\"biz-hero-content\">\r\n                <h1 class=\"biz-title\">\r\n                    <span class=\"gs-title\">WHAT<\/span> <span class=\"gs-title\" style=\"color:#0066ff;\">WE DO<\/span>\r\n                <\/h1>\r\n                <p class=\"biz-sub gs-sub\">\uc0c1\uc0c1\uc744 \ub6f0\uc5b4\ub118\ub294 \ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \uc194\ub8e8\uc158<\/p>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. \uc694\uc57d(Overview) \uadf8\ub9ac\ub4dc -->\r\n        <section class=\"biz-overview\">\r\n            <div class=\"overview-grid\">\r\n                <div class=\"ov-card gs-fade-up\">\r\n                    <div class=\"ov-icon\">\ud83c\udfaf<\/div>\r\n                    <h3>Brand Identity<\/h3>\r\n                    <p>\ube0c\ub79c\ub4dc\uc758 \ubcf8\uc9c8\uc744 \ud30c\uc545\ud558\uc5ec \ubcc0\uce58 \uc54a\ub294 \uace0\uc720\ud55c \uac00\uce58\uc640 \uc544\uc774\ub374\ud2f0\ud2f0\ub97c \ud655\ub9bd\ud569\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"ov-card gs-fade-up\">\r\n                    <div class=\"ov-icon\">\ud83d\udcbb<\/div>\r\n                    <h3>UI\/UX Design<\/h3>\r\n                    <p>\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc9c1\uad00\uc801\uc774\uace0 \ubbf8\ub824\ud55c \uc778\ud130\ud398\uc774\uc2a4\ub85c \ucd5c\uc801\uc758 \ub514\uc9c0\ud138 \uacbd\ud5d8\uc744 \uc124\uacc4\ud569\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"ov-card gs-fade-up\">\r\n                    <div class=\"ov-icon\">\u2699\ufe0f<\/div>\r\n                    <h3>Web Development<\/h3>\r\n                    <p>\ucd5c\uc2e0 \uae30\uc220 \ud2b8\ub80c\ub4dc\ub97c \ubc18\uc601\ud55c \uc548\uc815\uc801\uc774\uace0 \ud655\uc7a5 \uac00\ub2a5\ud55c \uc6f9 \uc2dc\uc2a4\ud15c\uc744 \uad6c\ucd95\ud569\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"ov-card gs-fade-up\">\r\n                    <div class=\"ov-icon\">\ud83d\udcc8<\/div>\r\n                    <h3>Digital Marketing<\/h3>\r\n                    <p>\ub370\uc774\ud130 \uae30\ubc18\uc758 \ud37c\ud3ec\uba3c\uc2a4 \ub9c8\ucf00\ud305\uc73c\ub85c \ud0c0\uac9f \uace0\uac1d\uc5d0\uac8c \ube0c\ub79c\ub4dc\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \uac01\uc778\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. \uc0c1\uc138 \uc0ac\uc5c5\ubd84\uc57c (\uad50\ucc28\ud615 \ub808\uc774\uc544\uc6c3 + 3D \ud2f8\ud2b8\/\ud50c\ub85c\ud305 \ud6a8\uacfc) -->\r\n        <section class=\"biz-detail-sec\">\r\n            \r\n            <!-- \ubd84\uc57c 1 -->\r\n            <div class=\"b-row\">\r\n                <div class=\"b-img-wrap gs-img-reveal js-tilt\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542744173-8e7e53415bb0?q=80&w=1200&auto=format&fit=crop\" class=\"b-img gs-parallax\" alt=\"Branding\">\r\n                <\/div>\r\n                <div class=\"b-text-wrap gs-fade-up\">\r\n                    <div class=\"b-num\">01<\/div>\r\n                    <h2>Brand <span>Consulting & Identity<\/span><\/h2>\r\n                    <p>\uc131\uacf5\uc801\uc778 \ube0c\ub79c\ub4dc\ub294 \uba85\ud655\ud55c \ucca0\ud559\uc5d0\uc11c \uc2dc\uc791\ub429\ub2c8\ub2e4. \uc2dc\uc7a5 \ubd84\uc11d\uacfc \ud0c0\uac9f \uc774\ud574\ub97c \ud1b5\ud574 \uadc0\uc0ac\ub9cc\uc758 \ub3c5\ubcf4\uc801\uc778 \ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0(CI\/BI)\ub97c \uad6c\ucd95\ud558\uace0, \uc77c\uad00\ub41c \ube0c\ub79c\ub4dc \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub3c4\ub85d \uc885\ud569\uc801\uc778 \ucee8\uc124\ud305\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\r\n                    <ul class=\"b-list\">\r\n                        <li>\ube0c\ub79c\ub4dc \ud3ec\uc9c0\uc154\ub2dd \ubc0f \uc804\ub7b5 \uc218\ub9bd<\/li>\r\n                        <li>CI \/ BI \/ \ub85c\uace0 \ub514\uc790\uc778<\/li>\r\n                        <li>\ube0c\ub79c\ub4dc \ub124\uc774\ubc0d \ubc0f \uc2a4\ud1a0\ub9ac\ud154\ub9c1<\/li>\r\n                        <li>\ube0c\ub79c\ub4dc \uac00\uc774\ub4dc\ub77c\uc778 \uc81c\uc791<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \ubd84\uc57c 2 -->\r\n            <div class=\"b-row\">\r\n                <div class=\"b-img-wrap gs-img-reveal js-tilt\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop\" class=\"b-img gs-parallax\" alt=\"UI UX Design\">\r\n                <\/div>\r\n                <div class=\"b-text-wrap gs-fade-up\">\r\n                    <div class=\"b-num\">02<\/div>\r\n                    <h2>UI\/UX Design & <span>Web Development<\/span><\/h2>\r\n                    <p>\ub2e8\uc21c\ud788 \ubcf4\uae30 \uc88b\uc740 \ub514\uc790\uc778\uc744 \ub118\uc5b4, \uc0ac\uc6a9\uc790\uac00 \ubaa9\uc801\uc744 \ub2ec\uc131\ud558\uae30 \uac00\uc7a5 \uc26c\uc6b4 \uad6c\uc870\ub97c \uc124\uacc4\ud569\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\uc758 \uc644\ubcbd\ud55c \uc870\ud654\ub97c \ud1b5\ud574 \ube60\ub974\uace0 \uc548\uc815\uc801\uc774\uba70, \ubaa8\ub4e0 \ub514\ubc14\uc774\uc2a4\uc5d0 \ucd5c\uc801\ud654\ub41c \ubc18\uc751\ud615 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uac1c\ubc1c\ud569\ub2c8\ub2e4.<\/p>\r\n                    <ul class=\"b-list\">\r\n                        <li>\uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX) \ucd5c\uc801\ud654 \uc124\uacc4<\/li>\r\n                        <li>\ubc18\uc751\ud615 \uc6f9\uc0ac\uc774\ud2b8 \ubc0f \uc571 UI \ub514\uc790\uc778<\/li>\r\n                        <li>\ub9de\ucda4\ud615 \ud504\ub860\ud2b8\/\ubc31\uc5d4\ub4dc \uac1c\ubc1c<\/li>\r\n                        <li>CMS(\uc6cc\ub4dc\ud504\ub808\uc2a4 \ub4f1) \uad6c\ucd95<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \ubd84\uc57c 3 -->\r\n            <div class=\"b-row\">\r\n                <div class=\"b-img-wrap gs-img-reveal js-tilt\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop\" class=\"b-img gs-parallax\" alt=\"Marketing\">\r\n                <\/div>\r\n                <div class=\"b-text-wrap gs-fade-up\">\r\n                    <div class=\"b-num\">03<\/div>\r\n                    <h2>Digital <span>Marketing<\/span><\/h2>\r\n                    <p>\uc544\ubb34\ub9ac \ud6cc\ub96d\ud55c \uc11c\ube44\uc2a4\ub3c4 \uc54c\ub824\uc9c0\uc9c0 \uc54a\uc73c\uba74 \uc758\ubbf8\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \uc815\ubc00\ud55c \ub370\uc774\ud130 \ubd84\uc11d\uc744 \uae30\ubc18\uc73c\ub85c \ud0c0\uac9f \uace0\uac1d\uc744 \ucc3e\uc544\ub0b4\uace0, \ud6a8\uc728\uc801\uc778 \uc608\uc0b0 \uc9d1\ud589\uc73c\ub85c \ud22c\uc790 \ub300\ube44 \ucd5c\uace0(ROI)\uc758 \uc131\uacfc\ub97c \uc774\ub04c\uc5b4\ub0b4\ub294 \ud37c\ud3ec\uba3c\uc2a4 \ub9c8\ucf00\ud305\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\r\n                    <ul class=\"b-list\">\r\n                        <li>\ub370\uc774\ud130 \uae30\ubc18 \ud37c\ud3ec\uba3c\uc2a4 \ub9c8\ucf00\ud305<\/li>\r\n                        <li>\uac80\uc0c9\uc5d4\uc9c4 \ucd5c\uc801\ud654 (SEO)<\/li>\r\n                        <li>\uc18c\uc15c \ubbf8\ub514\uc5b4(SNS) \uc6b4\uc601 \ubc0f \uae30\ud68d<\/li>\r\n                        <li>\uc628\ub77c\uc778 \uad11\uace0 \ucea0\ud398\uc778 \uc2e4\ud589<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n        <!-- 4. \uc5c5\ubb34 \ud504\ub85c\uc138\uc2a4 -->\r\n        <section class=\"biz-process\">\r\n            <div class=\"proc-header gs-fade-up\">\r\n                <h2>OUR PROCESS<\/h2>\r\n                <p>\uccb4\uacc4\uc801\uc774\uace0 \ud22c\uba85\ud55c Blanding\ub9cc\uc758 \uc5c5\ubb34 \uc808\ucc28<\/p>\r\n            <\/div>\r\n            <div class=\"proc-wrap\">\r\n                <div class=\"proc-line\"><div class=\"proc-line-fill\" id=\"procLine\"><\/div><\/div>\r\n                \r\n                <div class=\"proc-step gs-proc\">\r\n                    <div class=\"p-icon\">\ud83d\udd0d<div class=\"p-num\">1<\/div><\/div>\r\n                    <h3>Discovery<\/h3>\r\n                    <p>\uace0\uac1d\uc758 \uc694\uad6c\uc0ac\ud56d\uacfc \uc2dc\uc7a5 \uc0c1\ud669\uc744 \uc2ec\uce35\uc801\uc73c\ub85c \ubd84\uc11d\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\uc758 \ubc29\ud5a5\uc131\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"proc-step gs-proc\">\r\n                    <div class=\"p-icon\">\ud83d\udca1<div class=\"p-num\">2<\/div><\/div>\r\n                    <h3>Planning & Design<\/h3>\r\n                    <p>\uc218\uc9d1\ub41c \ub370\uc774\ud130\ub97c \ubc14\ud0d5\uc73c\ub85c \uce58\ubc00\ud55c \uae30\ud68d\uc548\uc744 \ub3c4\ucd9c\ud558\uace0 \uc9c1\uad00\uc801\uc778 \ub514\uc790\uc778 \uc2dc\uc548\uc744 \uc81c\uc791\ud569\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"proc-step gs-proc\">\r\n                    <div class=\"p-icon\">\u2328\ufe0f<div class=\"p-num\">3<\/div><\/div>\r\n                    <h3>Development<\/h3>\r\n                    <p>\ud655\uc815\ub41c \ub514\uc790\uc778\uc744 \ucd5c\uc2e0 \uc6f9 \ud45c\uc900 \uae30\uc220\uacfc \ucd5c\uc801\ud654\ub41c \ucf54\ub4dc\ub85c \uc644\ubcbd\ud558\uac8c \uad6c\ud604\ud574\ub0c5\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n                <div class=\"proc-step gs-proc\">\r\n                    <div class=\"p-icon\">\ud83d\ude80<div class=\"p-num\">4<\/div><\/div>\r\n                    <h3>Launch & Grow<\/h3>\r\n                    <p>\uc5c4\uaca9\ud55c \ud14c\uc2a4\ud2b8\ub97c \uac70\uccd0 \uc11c\ube44\uc2a4\ub97c \uc624\ud508\ud558\uace0, \uc9c0\uc18d\uc801\uc778 \uc720\uc9c0\ubcf4\uc218\uc640 \ub9c8\ucf00\ud305\uc73c\ub85c \uc131\uc7a5\uc744 \ub3d5\uc2b5\ub2c8\ub2e4.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 5. CTA -->\r\n        <section class=\"biz-cta\">\r\n            <h2 class=\"gs-fade-up\">\uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc900\ube44 \uc911\uc774\uc2e0\uac00\uc694?<\/h2>\r\n            <p class=\"gs-fade-up\">Blanding\uacfc \ud568\uaed8 \uadc0\uc0ac\uc758 \ube44\uc988\ub2c8\uc2a4\ub97c \ud55c \ub2e8\uacc4 \ub354 \ub3c4\uc57d\uc2dc\ud0a4\uc138\uc694.<\/p>\r\n            <div class=\"gs-fade-up\">\r\n                <a href=\"\/\ubb38\uc758\ud558\uae30\" class=\"cta-btn\">\ud504\ub85c\uc81d\ud2b8 \ubb38\uc758\ud558\uae30<\/a>\r\n            <\/div>\r\n        <\/section>\r\n\r\n    <\/div>\r\n\r\n    <script>\r\n        window.addEventListener('load', function() {\r\n            if(typeof gsap === 'undefined') return;\r\n            gsap.registerPlugin(ScrollTrigger);\r\n\r\n            \/\/ 1. \ud788\uc5b4\ub85c \uc778\ud2b8\ub85c \ud14d\uc2a4\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\r\n            const tl = gsap.timeline();\r\n            tl.to('.gs-title', { clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', y: 0, duration: 1.2, stagger: 0.2, ease: 'expo.out', delay: 0.2 })\r\n              .to('.gs-sub', { opacity: 1, y: 0, duration: 1, ease: 'power3.out' }, \"-=0.8\");\r\n\r\n            \/\/ 2. \uacf5\ud1b5 Fade Up \ud6a8\uacfc\r\n            gsap.utils.toArray('.gs-fade-up').forEach(item => {\r\n                gsap.fromTo(item, \r\n                    { y: 50, opacity: 0 }, \r\n                    { y: 0, opacity: 1, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: item, start: 'top 85%' } }\r\n                );\r\n            });\r\n\r\n            \/\/ 3. \uc774\ubbf8\uc9c0 Reveal \ud6a8\uacfc (\ub36e\uac1c\uac00 \ubc97\uaca8\uc9d0)\r\n            gsap.utils.toArray('.gs-img-reveal').forEach(wrap => {\r\n                gsap.to(wrap, { '--after-scaleX': 0, scrollTrigger: { trigger: wrap, start: 'top 75%' } });\r\n                gsap.to(wrap, { css: { className: \"+=revealed\" }, duration: 0}); \r\n            });\r\n            \r\n            const style = document.createElement('style');\r\n            style.innerHTML = `\r\n                .gs-img-reveal.revealed::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }\r\n                .gs-img-reveal:not(.revealed)::after { transform: scaleX(1); }\r\n            `;\r\n            document.head.appendChild(style);\r\n\r\n            gsap.utils.toArray('.gs-img-reveal').forEach(wrap => {\r\n                ScrollTrigger.create({ trigger: wrap, start: 'top 80%', onEnter: () => wrap.classList.add('revealed') });\r\n            });\r\n\r\n            \/\/ 4. \uc774\ubbf8\uc9c0 3D \ud2f8\ud2b8 (Tilt) \ub9c8\uc6b0\uc2a4 \uc778\ud130\ub799\uc158 \ucd94\uac00\r\n            if (window.innerWidth > 1024) {\r\n                const tilts = document.querySelectorAll('.js-tilt');\r\n                tilts.forEach(tilt => {\r\n                    tilt.addEventListener('mousemove', e => {\r\n                        const rect = tilt.getBoundingClientRect();\r\n                        const x = e.clientX - rect.left;\r\n                        const y = e.clientY - rect.top;\r\n                        const centerX = rect.width \/ 2;\r\n                        const centerY = rect.height \/ 2;\r\n                        \/\/ \uc911\uc559\uc5d0\uc11c \uba40\uc5b4\uc9c8\uc218\ub85d \uac01\ub3c4 \uc99d\uac00 (\ucd5c\ub300 10\ub3c4)\r\n                        const rotateX = ((y - centerY) \/ centerY) * -10;\r\n                        const rotateY = ((x - centerX) \/ centerX) * 10;\r\n                        \r\n                        tilt.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;\r\n                    });\r\n                    tilt.addEventListener('mouseleave', () => {\r\n                        \/\/ \ub9c8\uc6b0\uc2a4 \uc544\uc6c3 \uc2dc \uc6d0\ub798\ub300\ub85c \ubd80\ub4dc\ub7fd\uac8c \ubcf5\uad6c\r\n                        tilt.style.transform = 'rotateX(0) rotateY(0) scale3d(1, 1, 1)';\r\n                    });\r\n                });\r\n            }\r\n\r\n            \/\/ 5. \uc774\ubbf8\uc9c0 \ud328\ub7f4\ub799\uc2a4\r\n            gsap.utils.toArray('.gs-parallax').forEach(img => {\r\n                gsap.to(img, { yPercent: -10, ease: 'none', scrollTrigger: { trigger: img.parentElement, start: 'top bottom', end: 'bottom top', scrub: true } });\r\n            });\r\n\r\n            \/\/ 6. \uc5c5\ubb34 \ud504\ub85c\uc138\uc2a4 \uc9c4\ud589\ubc14 \uc120\uae0b\uae30 \ud6a8\uacfc\r\n            if(window.innerWidth > 1200) {\r\n                gsap.to('#procLine', { width: '100%', ease: 'none', scrollTrigger: { trigger: '.biz-process', start: 'top center', end: 'center center', scrub: true } });\r\n            } else if(window.innerWidth > 768) {\r\n                gsap.to('#procLine', { height: '100%', ease: 'none', scrollTrigger: { trigger: '.biz-process', start: 'top center', end: 'bottom 80%', scrub: true } });\r\n            }\r\n\r\n            \/\/ \ud504\ub85c\uc138\uc2a4 \uc544\uc774\ud15c \ub4f1\uc7a5 \ud6a8\uacfc\r\n            gsap.utils.toArray('.gs-proc').forEach((item, index) => {\r\n                gsap.fromTo(item, \r\n                    { y: 50, opacity: 0 }, \r\n                    { y: 0, opacity: 1, duration: 0.8, delay: index * 0.2, ease: 'back.out(1.5)', scrollTrigger: { trigger: '.proc-wrap', start: 'top 75%' } }\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-12","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":3,"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/pages\/12\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/pink-cassowary-558176.hostingersite.com\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}