\uc21c\ucc28\uc801 \uc560\ub2c8\uba54\uc774\uc158 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 10px;\r\n font-family: Arial, sans-serif;\r\n background-color: #f5f5f5;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n }\r\n\r\n .diagram-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 900px;\r\n height: 0;\r\n padding-bottom: 72.22%; \/* 650\/900 = 0.7222 \ube44\uc728 \uc720\uc9c0 *\/\r\n background: white;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .diagram-content {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n transform-origin: top left;\r\n }\r\n\r\n .box {\r\n position: absolute;\r\n border: 2px solid #666;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n font-weight: bold;\r\n opacity: 0;\r\n transform: scale(0);\r\n transition: all 0.5s ease-out;\r\n font-size: 14px;\r\n }\r\n\r\n .box.show {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n .box-text {\r\n opacity: 0;\r\n transition: opacity 0.3s ease-in;\r\n transition-delay: 0.2s;\r\n line-height: 1.2;\r\n }\r\n\r\n .box.show .box-text {\r\n opacity: 1;\r\n }\r\n\r\n .gray-box {\r\n background-color: #45A049;\r\n color: white;\r\n }\r\n\r\n .white-box {\r\n background-color: white;\r\n color: #333;\r\n }\r\n\r\n \/* \ubc15\uc2a4 \uc704\uce58 \ubc0f \ud06c\uae30 (\ubc31\ubd84\uc728 \uae30\uc900) *\/\r\n .functional-improvement {\r\n top: 1.54%;\r\n left: 33.89%;\r\n width: 32.22%;\r\n height: 12.31%;\r\n }\r\n\r\n .visual-improvement {\r\n top: 32.31%;\r\n left: 0.56%;\r\n width: 13.33%;\r\n height: 18.46%;\r\n }\r\n\r\n .space-upgrade {\r\n top: 32.31%;\r\n left: 86.11%;\r\n width: 13.33%;\r\n height: 18.46%;\r\n }\r\n\r\n .best-solution {\r\n top: 24.62%;\r\n left: 37.78%;\r\n width: 24.44%;\r\n height: 9.23%;\r\n }\r\n\r\n .superior-design {\r\n top: 40%;\r\n left: 21.11%;\r\n width: 15.56%;\r\n height: 9.23%;\r\n }\r\n\r\n .experience {\r\n top: 40%;\r\n left: 63.33%;\r\n width: 15.56%;\r\n height: 9.23%;\r\n }\r\n\r\n .creative-center {\r\n top: 43.08%;\r\n left: 48.33%;\r\n width: 4.44%;\r\n height: 9.23%;\r\n background-color: black;\r\n border-radius: 0;\r\n border: none;\r\n color: white;\r\n font-size: 10px;\r\n font-weight: bold;\r\n writing-mode: vertical-lr;\r\n text-orientation: mixed;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .strategic-approach {\r\n top: 64.62%;\r\n left: 37.78%;\r\n width: 24.44%;\r\n height: 9.23%;\r\n }\r\n\r\n .client-value {\r\n top: 83.08%;\r\n left: 33.89%;\r\n width: 32.22%;\r\n height: 12.31%;\r\n }\r\n\r\n \/* \uc120 \uc2a4\ud0c0\uc77c *\/\r\n .line {\r\n position: absolute;\r\n background-color: #666;\r\n opacity: 0;\r\n transform-origin: 0 0;\r\n }\r\n\r\n .line.show {\r\n opacity: 1;\r\n animation: drawLine 0.8s ease-out forwards;\r\n }\r\n\r\n @keyframes drawLine {\r\n from {\r\n transform: scaleX(0);\r\n }\r\n to {\r\n transform: scaleX(1);\r\n }\r\n }\r\n\r\n \/* \uc218\uc9c1\uc120 *\/\r\n .vertical-line {\r\n width: 2px;\r\n }\r\n\r\n \/* \uc218\ud3c9\uc120 *\/\r\n .horizontal-line {\r\n height: 2px;\r\n }\r\n\r\n \/* \ud654\uc0b4\ud45c *\/\r\n .arrow {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n transition: opacity 0.3s ease-in;\r\n }\r\n\r\n .arrow.show {\r\n opacity: 1;\r\n }\r\n\r\n .arrow-down {\r\n border-left: 6px solid transparent;\r\n border-right: 6px solid transparent;\r\n border-top: 10px solid #666;\r\n }\r\n\r\n .arrow-up {\r\n border-left: 6px solid transparent;\r\n border-right: 6px solid transparent;\r\n border-bottom: 10px solid #666;\r\n }\r\n\r\n .arrow-left {\r\n border-top: 6px solid transparent;\r\n border-bottom: 6px solid transparent;\r\n border-right: 10px solid #666;\r\n }\r\n\r\n .arrow-right {\r\n border-top: 6px solid transparent;\r\n border-bottom: 6px solid transparent;\r\n border-left: 10px solid #666;\r\n }\r\n\r\n .reset-btn {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n padding: 8px 16px;\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-size: 12px;\r\n z-index: 10;\r\n }\r\n\r\n .reset-btn:hover {\r\n background-color: #45a049;\r\n }\r\n\r\n \/* \ubaa8\ubc14\uc77c \ucd5c\uc801\ud654 *\/\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 5px;\r\n }\r\n \r\n .box {\r\n font-size: 12px;\r\n }\r\n \r\n .creative-center {\r\n font-size: 8px;\r\n }\r\n \r\n .reset-btn {\r\n padding: 6px 12px;\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .box {\r\n font-size: 10px;\r\n }\r\n \r\n .creative-center {\r\n font-size: 7px;\r\n }\r\n \r\n .reset-btn {\r\n padding: 5px 10px;\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"diagram-container\">\r\n <button class=\"reset-btn\" onclick=\"resetAnimation()\">\ub2e4\uc2dc \uc7ac\uc0dd<\/button>\r\n \r\n <div class=\"diagram-content\">\r\n \r\n \r\n <div class=\"line horizontal-line\" style=\"top: 7.69%; left: 7.22%; width: 26.67%;\" id=\"line0a\"><\/div>\r\n <div class=\"line vertical-line\" style=\"top: 7.69%; left: 7.22%; height: 24.62%;\" id=\"line1b\"><\/div>\r\n <div class=\"arrow arrow-down\" style=\"top: 31.38%; left: 6.56%;\" id=\"arrow1\"><\/div>\r\n \r\n \r\n <div class=\"line horizontal-line\" style=\"top: 7.69%; left: 66.11%; width: 26.67%;\" id=\"line0b\"><\/div>\r\n <div class=\"line vertical-line\" style=\"top: 7.69%; left: 92.78%; height: 24.62%;\" id=\"line2b\"><\/div>\r\n <div class=\"arrow arrow-down\" style=\"top: 31.38%; left: 92.11%;\" id=\"arrow2\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 13.85%; left: 49.89%; height: 10.77%;\" id=\"line3\"><\/div>\r\n <div class=\"arrow arrow-down\" style=\"top: 23.69%; left: 49.22%;\" id=\"arrow3\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 33.85%; left: 49.89%; height: 9.23%;\" id=\"line4\"><\/div>\r\n \r\n \r\n <div class=\"line horizontal-line\" style=\"top: 44.46%; left: 36.67%; width: 11.67%;\" id=\"line5\"><\/div>\r\n <div class=\"arrow arrow-left\" style=\"top: 43.54%; left: 36%;\" id=\"arrow5\"><\/div>\r\n \r\n \r\n <div class=\"line horizontal-line\" style=\"top: 44.46%; left: 52.78%; width: 10.56%;\" id=\"line6\"><\/div>\r\n <div class=\"arrow arrow-right\" style=\"top: 43.54%; left: 64%;\" id=\"arrow6\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 52.31%; left: 49.89%; height: 12.31%;\" id=\"line7\"><\/div>\r\n <div class=\"arrow arrow-down\" style=\"top: 63.69%; left: 49.22%;\" id=\"arrow7\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 50.77%; left: 7.22%; height: 32.31%;\" id=\"line8\"><\/div>\r\n <div class=\"line horizontal-line\" style=\"top: 82.92%; left: 7.22%; width: 26.67%;\" id=\"line9\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 50.77%; left: 92.78%; height: 32.31%;\" id=\"line10\"><\/div>\r\n <div class=\"line horizontal-line\" style=\"top: 82.92%; left: 66.11%; width: 26.67%;\" id=\"line11\"><\/div>\r\n \r\n \r\n <div class=\"line vertical-line\" style=\"top: 73.85%; left: 49.89%; height: 9.23%;\" id=\"line12\"><\/div>\r\n <div class=\"arrow arrow-down\" style=\"top: 82.15%; left: 49.22%;\" id=\"arrow8\"><\/div>\r\n \r\n \r\n <div class=\"box gray-box functional-improvement\" id=\"box1\">\r\n <div class=\"box-text\">Functional Improvement<\/div>\r\n <\/div>\r\n \r\n <div class=\"box gray-box visual-improvement\" id=\"box2\">\r\n <div class=\"box-text\">Visual<br>Improve<br>ment<\/div>\r\n <\/div>\r\n \r\n <div class=\"box gray-box space-upgrade\" id=\"box3\">\r\n <div class=\"box-text\">Space<br>Value<br>Up-grade<\/div>\r\n <\/div>\r\n \r\n <div class=\"box white-box best-solution\" id=\"box4\">\r\n <div class=\"box-text\">Best Solution<br>w\/ Know How<\/div>\r\n <\/div>\r\n \r\n <div class=\"box white-box superior-design\" id=\"box5\">\r\n <div class=\"box-text\">Superior<br>Design Sense<\/div>\r\n <\/div>\r\n \r\n <div class=\"box white-box experience\" id=\"box6\">\r\n <div class=\"box-text\">25years<br>Experience<\/div>\r\n <\/div>\r\n \r\n <div class=\"box creative-center\" id=\"box7\">\r\n <div class=\"box-text\">CREATIVE<\/div>\r\n <\/div>\r\n \r\n <div class=\"box white-box strategic-approach\" id=\"box8\">\r\n <div class=\"box-text\">Strategics Approach<br>w\/ Insight<\/div>\r\n <\/div>\r\n \r\n <div class=\"box gray-box client-value\" id=\"box9\">\r\n <div class=\"box-text\">Client's Value Creation<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const animationSequence = [\r\n \/\/ 1\ub2e8\uacc4: Functional Improvement\r\n {elements: ['line0a', 'line0b', 'line3'], delay: 500},\r\n {elements: ['line1b', 'line2b'], delay: 800},\r\n {elements: ['arrow1', 'arrow2', 'arrow3'], delay: 1100},\r\n {elements: ['box1'], delay: 1400},\r\n \r\n \/\/ 2\ub2e8\uacc4: \uc88c\uc6b0 \ubc15\uc2a4\ub4e4\r\n {elements: ['box2', 'box3'], delay: 1900},\r\n \r\n \/\/ 3\ub2e8\uacc4: Best Solution\r\n {elements: ['box4'], delay: 2400},\r\n \r\n \/\/ 4\ub2e8\uacc4: Creative \uc911\uc2ec\ubd80\r\n {elements: ['line4'], delay: 2900},\r\n {elements: ['box7'], delay: 3200},\r\n \r\n \/\/ 5\ub2e8\uacc4: \uc88c\uc6b0 \uc5f0\uacb0\r\n {elements: ['line5', 'line6'], delay: 3600},\r\n {elements: ['arrow5', 'arrow6'], delay: 3900},\r\n {elements: ['box5', 'box6'], delay: 4200},\r\n \r\n \/\/ 6\ub2e8\uacc4: \uc544\ub798\ucabd \uc5f0\uacb0\r\n {elements: ['line7'], delay: 4600},\r\n {elements: ['arrow7'], delay: 4900},\r\n {elements: ['box8'], delay: 5200},\r\n \r\n \/\/ 7\ub2e8\uacc4: Client Value\ub85c\uc758 \uc5f0\uacb0\r\n {elements: ['line8', 'line10', 'line12'], delay: 5600},\r\n {elements: ['line9', 'line11'], delay: 5900},\r\n {elements: ['arrow8'], delay: 6200},\r\n {elements: ['box9'], delay: 6500}\r\n ];\r\n\r\n function startAnimation() {\r\n animationSequence.forEach((step, index) => {\r\n setTimeout(() => {\r\n step.elements.forEach(elementId => {\r\n const element = document.getElementById(elementId);\r\n if (element) {\r\n element.classList.add('show');\r\n }\r\n });\r\n }, step.delay);\r\n });\r\n }\r\n\r\n function resetAnimation() {\r\n \/\/ \ubaa8\ub4e0 \uc694\uc18c \uc228\uae30\uae30\r\n document.querySelectorAll('.line, .arrow, .box').forEach(element => {\r\n element.classList.remove('show');\r\n });\r\n \r\n \/\/ \uc7a0\uc2dc \ud6c4 \uc560\ub2c8\uba54\uc774\uc158 \ub2e4\uc2dc \uc2dc\uc791\r\n setTimeout(startAnimation, 100);\r\n }\r\n\r\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791\r\n window.addEventListener('load', () => {\r\n setTimeout(startAnimation, 500);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b0cfa6e e-flex e-con-boxed e-con e-parent\" data-id=\"b0cfa6e\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3172794 e-con-full e-flex e-con e-child\" data-id=\"3172794\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-22ca414 e-con-full e-flex e-con e-child\" data-id=\"22ca414\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e76b57e elementor-widget elementor-widget-theme-site-logo elementor-widget-image\" data-id=\"e76b57e\" data-element_type=\"widget\" data-widget_type=\"theme-site-logo.default\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/crearts.kr\">\n\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"696\" height=\"175\" src=\"https:\/\/crearts.kr\/wp-content\/uploads\/2025\/08\/\ud06c\ub9ac\uc544\uce20\ub85c\uace0.svg\" class=\"attachment-full size-full wp-image-47\" alt=\"\" \/>\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e2a373 elementor-widget elementor-widget-heading\" data-id=\"5e2a373\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">WE BOOST UP BETTER SOCIETY<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ecbc5a e-con-full e-flex e-con e-child\" data-id=\"6ecbc5a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20ea542 elementor-widget elementor-widget-image-box\" data-id=\"20ea542\" data-element_type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><p class=\"elementor-image-box-title\">(\uc8fc)\ud06c\ub9ac\uc544\uce20<\/p><p class=\"elementor-image-box-description\">\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uc1a1\ud30c\uad6c \uc62c\ub9bc\ud53d\ub85c 88 \uc62c\ub9bc\ud53d\ud0c0\uc6cc 206 |cscurator@naver.com | 02.6368.0369<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-314a1ef elementor-widget elementor-widget-heading\" data-id=\"314a1ef\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\"><span style=\", sans-serif\">Copyright @ CREARTS. All Rights Reserved.<\/span>.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WHAT WE DO Strategic Performance \ud06c\ub9ac\uc544\uce20\uc758 \uc131\uacf5\uc801\uc778 \ud37c\ud3ec\uba3c\uc2a4\ub294 \uc804\ub7b5\uc801\uc774\uace0 \uccb4\uacc4\uc801\uc778 \ud504\ub85c\uc138\uc2a4\ub85c \uc644\uc131\ub429\ub2c8\ub2e4. \ucd5c\uc0c1\uc758 \uacf5\uac04 \ucc3d\uc870\ub97c \uc704\ud574, \uacf5\uac04 \ubcf8\uc5f0\uc758 \uae30\ub2a5\uacfc \ud568\uaed8, \uc0ac\uc6a9\uc790\ub97c \ubc30\ub824\ud558\ub294 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-173","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/pages\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crearts.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":7,"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/crearts.kr\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/crearts.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}