{"id":27,"date":"2026-06-08T04:52:11","date_gmt":"2026-06-08T04:52:11","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/faq\/"},"modified":"2026-06-08T08:59:22","modified_gmt":"2026-06-08T08:59:22","slug":"faq","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/faq\/","title":{"rendered":"FAQ"},"content":{"rendered":"    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* =========================================\r\n           ROOT & RESET (B.LANDING \ubc1d\uc740 \ud14c\ub9c8)\r\n        ========================================= *\/\r\n        .cf-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-purple: #8A2BE2;\r\n            --c-text-main: #111111;\r\n            --c-text-muted: #555555;\r\n            --c-border: #eeeeee;\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            width: 100%;\r\n            margin-top: -80px; \r\n            position: relative;\r\n        }\r\n\r\n        .cf-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cf-container { width: 100%; max-width: 1000px; \/* FAQ\ub294 \uac00\ub3c5\uc131\uc744 \uc704\ud574 \ud3ed\uc744 \uc870\uae08 \uc904\uc784 *\/ 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        .cf-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .cf-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.2; animation: floatObj5 15s infinite alternate ease-in-out; }\r\n        .cf-shape-1 { width: 500px; height: 500px; background: var(--c-primary); top: 10%; left: -100px; animation-delay: -2s; }\r\n        .cf-shape-2 { width: 600px; height: 600px; background: var(--c-secondary); top: 60%; right: -200px; animation-delay: -7s; }\r\n        @keyframes floatObj5 { \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 (\uacf5\ud1b5 \ubc30\ub108 \uc2a4\ud0c0\uc77c)\r\n        ========================================= *\/\r\n        .cf-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        .cf-hero-bg {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 130%;\r\n            background: url('https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?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        .cf-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        .cf-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .cf-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: pulseShadow5 2s infinite;\r\n        }\r\n        @keyframes pulseShadow5 { 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        .cf-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        .cf-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: gradientText5 5s linear infinite;\r\n        }\r\n        @keyframes gradientText5 { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n        \/* =========================================\r\n           2. FAQ CONTENT SECTION\r\n        ========================================= *\/\r\n        .cf-faq-section { padding: 100px 0 150px; position: relative; z-index: 5; }\r\n        \r\n        \/* \uce74\ud14c\uace0\ub9ac \ud544\ud130 \ubc84\ud2bc *\/\r\n        .cf-filter {\r\n            display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 60px;\r\n        }\r\n        .cf-filter-btn {\r\n            padding: 12px 30px; background: transparent; border: 2px solid rgba(0,0,0,0.08);\r\n            border-radius: 50px; font-size: 1.1rem; font-weight: 800; color: var(--c-text-muted);\r\n            cursor: pointer; transition: all 0.3s ease;\r\n        }\r\n        .cf-filter-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }\r\n        .cf-filter-btn.active {\r\n            background: var(--c-primary); border-color: var(--c-primary); color: #fff;\r\n            box-shadow: 0 10px 20px rgba(255,51,102,0.2);\r\n        }\r\n\r\n        \/* FAQ \uc544\ucf54\ub514\uc5b8 \ub9ac\uc2a4\ud2b8 *\/\r\n        .cf-list { display: flex; flex-direction: column; gap: 20px; }\r\n\r\n        \/* \ud83d\udea8 \uc608\uc05c \ud50c\ub85c\ud305 \uce74\ub4dc \uc2a4\ud0c0\uc77c *\/\r\n        .cf-item {\r\n            background: var(--c-bg-soft); border-radius: 20px; \r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.02);\r\n            overflow: hidden; transition: all 0.3s ease;\r\n        }\r\n        .cf-item:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.08); transform: translateY(-3px); }\r\n        .cf-item.open { border-color: rgba(255,51,102,0.3); box-shadow: 0 15px 40px rgba(255,51,102,0.1); }\r\n\r\n        \/* \uc9c8\ubb38 \uc601\uc5ed (Header) *\/\r\n        .cf-item-header {\r\n            display: flex; align-items: center; padding: 30px 40px;\r\n            cursor: pointer; background: transparent; transition: background 0.3s;\r\n        }\r\n        \r\n        .cf-q-mark {\r\n            font-size: 1.8rem; font-weight: 900; color: var(--c-primary);\r\n            margin-right: 20px; font-style: italic;\r\n        }\r\n        \r\n        .cf-title-wrap { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }\r\n        .cf-category-badge {\r\n            align-self: flex-start; padding: 4px 12px; background: rgba(0,0,0,0.04);\r\n            color: var(--c-text-muted); font-size: 0.85rem; font-weight: 800; border-radius: 12px;\r\n        }\r\n        .cf-title { font-size: 1.3rem; font-weight: 700; color: var(--c-text-main); transition: color 0.3s; }\r\n        .cf-item.open .cf-title { color: var(--c-primary); }\r\n\r\n        .cf-icon {\r\n            width: 40px; height: 40px; border-radius: 50%; background: #f8f9fa;\r\n            display: flex; align-items: center; justify-content: center;\r\n            font-size: 1.2rem; color: #888; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        .cf-item:hover .cf-icon { background: rgba(255,51,102,0.1); color: var(--c-primary); }\r\n        .cf-item.open .cf-icon { transform: rotate(45deg); background: var(--c-primary); color: #fff; }\r\n\r\n        \/* \ub2f5\ubcc0 \uc601\uc5ed (Body) *\/\r\n        .cf-item-body {\r\n            max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n            background: #fafafa;\r\n        }\r\n        .cf-item-content {\r\n            padding: 40px; border-top: 1px dashed var(--c-border);\r\n            display: flex; gap: 20px;\r\n        }\r\n        .cf-a-mark {\r\n            font-size: 1.8rem; font-weight: 900; color: var(--c-text-main); opacity: 0.2; font-style: italic;\r\n        }\r\n        .cf-desc {\r\n            font-size: 1.15rem; line-height: 1.8; color: var(--c-text-muted); margin-top: 5px;\r\n        }\r\n        .cf-desc strong { color: var(--c-text-main); }\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            .cf-hero { min-height: 60vh; padding-top: 60px; }\r\n            .cf-hero-title { font-size: clamp(2rem, 7vw, 3rem); white-space: normal; line-height: 1.3; }\r\n            \r\n            .cf-faq-section { padding: 60px 0 100px; }\r\n            .cf-filter { gap: 10px; margin-bottom: 40px; }\r\n            .cf-filter-btn { padding: 8px 20px; font-size: 0.95rem; }\r\n            \r\n            .cf-item-header { padding: 25px 20px; align-items: flex-start; }\r\n            .cf-q-mark { font-size: 1.5rem; margin-right: 15px; }\r\n            .cf-title { font-size: 1.15rem; line-height: 1.4; }\r\n            .cf-icon { width: 32px; height: 32px; font-size: 1rem; flex-shrink: 0; margin-top: 5px; }\r\n            \r\n            .cf-item-content { padding: 30px 20px; flex-direction: column; gap: 10px; }\r\n            .cf-a-mark { font-size: 1.5rem; }\r\n            .cf-desc { font-size: 1.05rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cf-wrap\">\r\n        \r\n        <div class=\"cf-bg-shapes\">\r\n            <div class=\"cf-shape cf-shape-1\"><\/div>\r\n            <div class=\"cf-shape cf-shape-2\"><\/div>\r\n        <\/div>\r\n\r\n        <section class=\"cf-hero\">\r\n            <div class=\"cf-hero-bg\" id=\"cf-parallax-bg\"><\/div>\r\n            <div class=\"cf-hero-overlay\"><\/div>\r\n            <div class=\"cf-container cf-hero-content\">\r\n                <div class=\"cf-hero-subtitle gs-bounce5\">CUSTOMER SUPPORT<\/div>\r\n                <h1 class=\"cf-hero-title gs-fade-up5\">\ubb34\uc5c7\uc744 \ub3c4\uc640\ub4dc\ub9b4\uae4c\uc694?<br><span>FAQ CENTER<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"cf-faq-section\">\r\n            <div class=\"cf-container\">\r\n                \r\n                <div class=\"cf-filter gs-fade-up5\">\r\n                    <button class=\"cf-filter-btn active\" data-filter=\"all\">\uc804\uccb4\ubcf4\uae30<\/button>\r\n                    <button class=\"cf-filter-btn\" data-filter=\"project\">\ud504\ub85c\uc81d\ud2b8 \uc9c4\ud589<\/button>\r\n                    <button class=\"cf-filter-btn\" data-filter=\"cost\">\ube44\uc6a9 \ubc0f \uacb0\uc81c<\/button>\r\n                    <button class=\"cf-filter-btn\" data-filter=\"maintain\">\uc720\uc9c0\ubcf4\uc218<\/button>\r\n                <\/div>\r\n\r\n                <div class=\"cf-list gs-fade-up5\">\r\n                    \r\n                    <div class=\"cf-item\" data-category=\"project\">\r\n                        <div class=\"cf-item-header\">\r\n                            <div class=\"cf-q-mark\">Q.<\/div>\r\n                            <div class=\"cf-title-wrap\">\r\n                                <span class=\"cf-category-badge\">\ud504\ub85c\uc81d\ud2b8 \uc9c4\ud589<\/span>\r\n                                <div class=\"cf-title\">\uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791 \uae30\uac04\uc740 \ubcf4\ud1b5 \uc5bc\ub9c8\ub098 \uac78\ub9ac\ub098\uc694?<\/div>\r\n                            <\/div>\r\n                            <div class=\"cf-icon\">\uff0b<\/div>\r\n                        <\/div>\r\n                        <div class=\"cf-item-body\">\r\n                            <div class=\"cf-item-content\">\r\n                                <div class=\"cf-a-mark\">A.<\/div>\r\n                                <div class=\"cf-desc\">\r\n                                    \ud504\ub85c\uc81d\ud2b8\uc758 \uaddc\ubaa8\uc640 \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub530\ub77c \ub2e4\ub974\uc9c0\ub9cc, <strong>\uc77c\ubc18\uc801\uc778 \uae30\uc5c5\uc6a9 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uacbd\uc6b0 \uae30\ud68d\ubd80\ud130 \ub514\uc790\uc778, \uac1c\ubc1c, \uac80\uc218\uae4c\uc9c0 \uc57d 4\uc8fc\uc5d0\uc11c 8\uc8fc \uc815\ub3c4 \uc18c\uc694<\/strong>\ub429\ub2c8\ub2e4. \ucee4\uba38\uc2a4 \uae30\ub2a5\uc774 \ud3ec\ud568\ub418\uac70\ub098 \ubcf5\uc7a1\ud55c \ud50c\ub7ab\ud3fc\uc758 \uacbd\uc6b0 3\uac1c\uc6d4 \uc774\uc0c1\uc774 \uc18c\uc694\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc815\ud655\ud55c \uc77c\uc815\uc740 \ucd08\uae30 \ubbf8\ud305 \ud6c4 \uc0b0\uc815\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"cf-item\" data-category=\"cost\">\r\n                        <div class=\"cf-item-header\">\r\n                            <div class=\"cf-q-mark\">Q.<\/div>\r\n                            <div class=\"cf-title-wrap\">\r\n                                <span class=\"cf-category-badge\">\ube44\uc6a9 \ubc0f \uacb0\uc81c<\/span>\r\n                                <div class=\"cf-title\">\ud504\ub85c\uc81d\ud2b8 \ube44\uc6a9 \uacb0\uc81c \ubc29\uc2dd\uc740 \uc5b4\ub5bb\uac8c \ub418\ub098\uc694?<\/div>\r\n                            <\/div>\r\n                            <div class=\"cf-icon\">\uff0b<\/div>\r\n                        <\/div>\r\n                        <div class=\"cf-item-body\">\r\n                            <div class=\"cf-item-content\">\r\n                                <div class=\"cf-a-mark\">A.<\/div>\r\n                                <div class=\"cf-desc\">\r\n                                    \uc6d0\ud65c\ud55c \ud504\ub85c\uc81d\ud2b8 \uc9c4\ud589\uc744 \uc704\ud574 <strong>\uacc4\uc57d \uccb4\uacb0 \uc2dc \ucd1d \uacac\uc801\uc758 50%\ub97c \uc120\uae08\uc73c\ub85c \uccad\uad6c<\/strong>\ud558\uba70, \ud504\ub85c\uc81d\ud2b8 \uac1c\ubc1c\uc774 \uc644\ub8cc\ub418\uace0 <strong>\ucd5c\uc885 \uac80\uc218\uac00 \ub05d\ub09c \ud6c4 \ub098\uba38\uc9c0 50%\uc758 \uc794\uae08\uc744 \uccad\uad6c<\/strong>\ud569\ub2c8\ub2e4. (\uae30\uc5c5\uc758 \ub0b4\ubd80 \uacb0\uc81c \uc2dc\uc2a4\ud15c\uc5d0 \ub530\ub77c \ubd84\ud560 \ube44\uc728\uc740 \ud611\uc758 \uac00\ub2a5\ud569\ub2c8\ub2e4.)\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"cf-item\" data-category=\"project\">\r\n                        <div class=\"cf-item-header\">\r\n                            <div class=\"cf-q-mark\">Q.<\/div>\r\n                            <div class=\"cf-title-wrap\">\r\n                                <span class=\"cf-category-badge\">\ud504\ub85c\uc81d\ud2b8 \uc9c4\ud589<\/span>\r\n                                <div class=\"cf-title\">\uc9c0\ubc29\uc774\ub098 \ud574\uc678\uc5d0 \uc788\uc5b4\ub3c4 \ud504\ub85c\uc81d\ud2b8 \uc758\ub8b0\uac00 \uac00\ub2a5\ud55c\uac00\uc694?<\/div>\r\n                            <\/div>\r\n                            <div class=\"cf-icon\">\uff0b<\/div>\r\n                        <\/div>\r\n                        <div class=\"cf-item-body\">\r\n                            <div class=\"cf-item-content\">\r\n                                <div class=\"cf-a-mark\">A.<\/div>\r\n                                <div class=\"cf-desc\">\r\n                                    <strong>\ub124, \ub2f9\uc5f0\ud788 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/strong> B.LANDING\uc740 Google Meet, Zoom \ub4f1\uc744 \ud65c\uc6a9\ud55c \ud654\uc0c1 \ubbf8\ud305\uacfc Slack, Notion \ub4f1\uc758 \ud611\uc5c5 \ud234\uc744 \ud1b5\ud574 \uc6d0\uaca9\uc73c\ub85c\ub3c4 \uc644\ubcbd\ud55c \ucee4\ubba4\ub2c8\ucf00\uc774\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ud604\uc7ac\ub3c4 \ub2e4\uc591\ud55c \uc9c0\uc5ed \ubc0f \ud574\uc678 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc131\uacf5\uc801\uc73c\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc9c4\ud589\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"cf-item\" data-category=\"maintain\">\r\n                        <div class=\"cf-item-header\">\r\n                            <div class=\"cf-q-mark\">Q.<\/div>\r\n                            <div class=\"cf-title-wrap\">\r\n                                <span class=\"cf-category-badge\">\uc720\uc9c0\ubcf4\uc218<\/span>\r\n                                <div class=\"cf-title\">\ud648\ud398\uc774\uc9c0 \uc624\ud508 \ud6c4 \uc720\uc9c0\ubcf4\uc218 \uad00\ub9ac\ub3c4 \ud574\uc8fc\uc2dc\ub098\uc694?<\/div>\r\n                            <\/div>\r\n                            <div class=\"cf-icon\">\uff0b<\/div>\r\n                        <\/div>\r\n                        <div class=\"cf-item-body\">\r\n                            <div class=\"cf-item-content\">\r\n                                <div class=\"cf-a-mark\">A.<\/div>\r\n                                <div class=\"cf-desc\">\r\n                                    <strong>\ud504\ub85c\uc81d\ud2b8 \ub860\uce6d \ud6c4 \uae30\ubcf8\uc801\uc73c\ub85c 1\ub144\uac04 \ubb34\uc0c1 \ud558\uc790 \ubcf4\uc218(\ubc84\uadf8 \ubc0f \uc624\ub958 \uc218\uc815)\ub97c \uc9c0\uc6d0<\/strong>\ud574 \ub4dc\ub9bd\ub2c8\ub2e4. \ub514\uc790\uc778 \ubcc0\uacbd, \uc0c8\ub85c\uc6b4 \uae30\ub2a5 \ucd94\uac00, \ud14d\uc2a4\ud2b8 \uc5c5\ub370\uc774\ud2b8 \ub4f1\uc758 \uc9c0\uc18d\uc801\uc778 \uad00\ub9ac\uac00 \ud544\uc694\ud558\uc2e0 \uacbd\uc6b0 \ubcc4\ub3c4\uc758 \uc720\uc9c0\ubcf4\uc218 \uacc4\uc57d\uc744 \ud1b5\ud574 \uccb4\uacc4\uc801\uc73c\ub85c \uad00\ub9ac\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"cf-item\" data-category=\"cost\">\r\n                        <div class=\"cf-item-header\">\r\n                            <div class=\"cf-q-mark\">Q.<\/div>\r\n                            <div class=\"cf-title-wrap\">\r\n                                <span class=\"cf-category-badge\">\ube44\uc6a9 \ubc0f \uacb0\uc81c<\/span>\r\n                                <div class=\"cf-title\">\uc815\ubd80 \uc9c0\uc6d0\uae08\uc774\ub098 \ubc14\uc6b0\ucc98 \uc0ac\uc5c5\uc73c\ub85c \uc9c4\ud589\ud560 \uc218 \uc788\ub098\uc694?<\/div>\r\n                            <\/div>\r\n                            <div class=\"cf-icon\">\uff0b<\/div>\r\n                        <\/div>\r\n                        <div class=\"cf-item-body\">\r\n                            <div class=\"cf-item-content\">\r\n                                <div class=\"cf-a-mark\">A.<\/div>\r\n                                <div class=\"cf-desc\">\r\n                                    <strong>\ub124, \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/strong> B.LANDING\uc740 \ub2e4\uc591\ud55c \uc815\ubd80 \uc9c0\uc6d0 \uc0ac\uc5c5(\uc218\ucd9c\ubc14\uc6b0\ucc98, \ub370\uc774\ud130\ubc14\uc6b0\ucc98, \uccad\ub144\ucc3d\uc5c5\uc0ac\uad00\ud559\uad50 \ub4f1)\uc758 \uc218\ud589 \uae30\uad00\uc73c\ub85c \ub4f1\ub85d\ub418\uc5b4 \uc788\uac70\ub098 \uc9c4\ud589 \uacbd\ud5d8\uc774 \ud48d\ubd80\ud569\ub2c8\ub2e4. \ud544\uc694\ud55c \uc11c\ub958 \ubc0f \ud589\uc815 \uc808\ucc28\ub97c \uc801\uadf9\uc801\uc73c\ub85c \uc9c0\uc6d0\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n\r\n            \/\/ 1. \ubc30\ub108 \ud328\ub7f4\ub799\uc2a4\r\n            gsap.to(\"#cf-parallax-bg\", {\r\n                yPercent: 30, ease: \"none\",\r\n                scrollTrigger: { trigger: \".cf-hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n            });\r\n\r\n            \/\/ 2. \ud14d\uc2a4\ud2b8 \ubc14\uc6b4\uc2a4 \ubc0f \ub4f1\uc7a5 \ud6a8\uacfc\r\n            gsap.fromTo(\".gs-bounce5\", \r\n                { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"bounce.out\" }\r\n            );\r\n            gsap.fromTo(\".gs-fade-up5\", \r\n                { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 1.2, delay: 0.1, stagger: 0.15, ease: \"power4.out\" }\r\n            );\r\n\r\n            \/\/ 3. \uce74\ud14c\uace0\ub9ac \ud544\ud130\ub9c1 \uae30\ub2a5\r\n            const filterBtns = document.querySelectorAll('.cf-filter-btn');\r\n            const items = document.querySelectorAll('.cf-item');\r\n\r\n            filterBtns.forEach(btn => {\r\n                btn.addEventListener('click', function() {\r\n                    \/\/ \ubc84\ud2bc \ud65c\uc131\ud654 \ucc98\ub9ac\r\n                    filterBtns.forEach(b => b.classList.remove('active'));\r\n                    this.classList.add('active');\r\n\r\n                    const filterValue = this.getAttribute('data-filter');\r\n\r\n                    \/\/ \ub9ac\uc2a4\ud2b8 \ud544\ud130\ub9c1 \uc560\ub2c8\uba54\uc774\uc158\r\n                    items.forEach(item => {\r\n                        \/\/ \ud544\ud130\ub9c1 \ud560 \ub54c \uc5f4\ub824\uc788\ub294 \uc544\ucf54\ub514\uc5b8\uc740 \ub2eb\uae30\r\n                        item.classList.remove('open');\r\n                        item.querySelector('.cf-item-body').style.maxHeight = null;\r\n                        \r\n                        if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\r\n                            item.style.display = 'block';\r\n                            gsap.fromTo(item, { scale: 0.9, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.4, ease: \"back.out(1.2)\" });\r\n                        } else {\r\n                            item.style.display = 'none';\r\n                        }\r\n                    });\r\n                });\r\n            });\r\n\r\n            \/\/ 4. \uc544\ucf54\ub514\uc5b8(\ud3bc\uce68\/\ub2eb\ud798) \uae30\ub2a5\r\n            const headers = document.querySelectorAll('.cf-item-header');\r\n            \r\n            headers.forEach(header => {\r\n                header.addEventListener('click', () => {\r\n                    const item = header.parentElement;\r\n                    const body = header.nextElementSibling;\r\n                    const isOpen = item.classList.contains('open');\r\n\r\n                    \/\/ \ub2e4\ub978 \uc5f4\ub824\uc788\ub294 \ubaa8\ub4e0 \uc544\uc774\ud15c \ub2eb\uae30\r\n                    document.querySelectorAll('.cf-item').forEach(el => {\r\n                        el.classList.remove('open');\r\n                        el.querySelector('.cf-item-body').style.maxHeight = null;\r\n                    });\r\n\r\n                    \/\/ \ud074\ub9ad\ud55c \uc544\uc774\ud15c \uc5f4\uae30\r\n                    if(!isOpen) {\r\n                        item.classList.add('open');\r\n                        body.style.maxHeight = body.scrollHeight + \"px\";\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":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","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\/27","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=27"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/27\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}