{"id":25,"date":"2026-06-08T04:52:11","date_gmt":"2026-06-08T04:52:11","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ea%b3%b5%ec%a7%80%ec%82%ac%ed%95%ad\/"},"modified":"2026-06-08T08:44:25","modified_gmt":"2026-06-08T08:44:25","slug":"%ea%b3%b5%ec%a7%80%ec%82%ac%ed%95%ad","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ea%b3%b5%ec%a7%80%ec%82%ac%ed%95%ad\/","title":{"rendered":"\uacf5\uc9c0\uc0ac\ud56d"},"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\r\n        ========================================= *\/\r\n        .cn-wrap {\r\n            --c-bg: #fdfdfd; \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        .cn-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cn-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 10; }\r\n        \r\n        .cn-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .cn-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; animation: floatObj4 15s infinite alternate ease-in-out; }\r\n        .cn-shape-1 { width: 500px; height: 500px; background: var(--c-secondary); top: 10%; left: -100px; animation-delay: -2s; }\r\n        .cn-shape-2 { width: 600px; height: 600px; background: var(--c-primary); top: 60%; right: -200px; animation-delay: -7s; }\r\n        @keyframes floatObj4 { \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\r\n        ========================================= *\/\r\n        .cn-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        .cn-hero-bg {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 130%;\r\n            background: url('https:\/\/images.unsplash.com\/photo-1557804506-669a67965ba0?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        .cn-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        .cn-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .cn-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: pulseShadow4 2s infinite;\r\n        }\r\n        @keyframes pulseShadow4 { 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        .cn-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        .cn-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: gradientText4 5s linear infinite;\r\n        }\r\n        @keyframes gradientText4 { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n        \/* =========================================\r\n           2. BOARD SECTION\r\n        ========================================= *\/\r\n        .cn-board-section { padding: 100px 0 150px; position: relative; z-index: 5; }\r\n        \r\n        .cn-board-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }\r\n        .cn-board-header h2 { font-size: 2.5rem; font-weight: 900; color: var(--c-text-main); }\r\n        \r\n        .cn-admin-write-btn {\r\n            display: inline-flex; align-items: center; padding: 12px 30px;\r\n            background: var(--c-primary); color: #fff; text-decoration: none;\r\n            font-weight: 800; font-size: 1.1rem; border-radius: 50px; cursor: pointer; border: none;\r\n            box-shadow: 0 10px 20px rgba(255,51,102,0.3); transition: all 0.3s;\r\n        }\r\n        .cn-admin-write-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255,51,102,0.4); color: #fff; }\r\n\r\n        .cn-list { border-top: 3px solid #111111; border-bottom: 1px solid #111111; }\r\n        \r\n        .cn-item { border-bottom: 1px solid var(--c-border); }\r\n        .cn-item:last-child { border-bottom: none; }\r\n        \r\n        .cn-item-header {\r\n            display: flex; align-items: center; padding: 30px 20px;\r\n            background: transparent; cursor: pointer; transition: background 0.3s;\r\n        }\r\n        .cn-item-header:hover { background: rgba(0,0,0,0.02); }\r\n        \r\n        .cn-badge {\r\n            padding: 5px 15px; background: #111; color: #fff; font-weight: 800;\r\n            font-size: 0.9rem; border-radius: 20px; margin-right: 20px; flex-shrink: 0;\r\n        }\r\n        .cn-title { font-size: 1.3rem; font-weight: 700; color: var(--c-text-main); flex-grow: 1; transition: color 0.3s; }\r\n        .cn-item-header:hover .cn-title { color: var(--c-primary); }\r\n        \r\n        .cn-date { color: var(--c-text-muted); font-size: 1rem; margin-right: 20px; font-weight: 500; }\r\n        .cn-icon {\r\n            width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\r\n            font-size: 1.5rem; color: #888; transition: transform 0.4s ease;\r\n        }\r\n\r\n        .cn-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: #f8f9fa;\r\n        }\r\n        .cn-item-content { padding: 50px 40px; font-size: 1.15rem; line-height: 1.8; color: #333; overflow-wrap: break-word; }\r\n        .cn-item-content img, .cn-item-content iframe, .cn-item-content video { max-width: 100%; height: auto; border-radius: 15px; margin: 15px 0; }\r\n\r\n        .cn-admin-actions {\r\n            margin-top: 40px; padding-top: 20px; border-top: 1px dashed #ddd;\r\n            display: flex; justify-content: flex-end; gap: 15px;\r\n        }\r\n        .cn-action-btn {\r\n            padding: 8px 20px; border-radius: 50px; font-size: 0.95rem; font-weight: 700;\r\n            text-decoration: none; border: none; cursor: pointer; transition: all 0.3s;\r\n        }\r\n        .cn-action-btn.edit { background: #333; color: #fff; }\r\n        .cn-action-btn.edit:hover { background: var(--c-secondary); color: #111; }\r\n        .cn-action-btn.delete { background: #fff; color: var(--c-primary); border: 1px solid var(--c-primary); }\r\n        .cn-action-btn.delete:hover { background: var(--c-primary); color: #fff; }\r\n\r\n        .cn-pagination { margin-top: 60px; display: flex; justify-content: center; gap: 10px; }\r\n        .cn-pagination .page-numbers {\r\n            display: inline-flex; align-items: center; justify-content: center;\r\n            width: 45px; height: 45px; border-radius: 50%; background: #fff;\r\n            color: var(--c-text-main); font-weight: 800; font-size: 1.1rem;\r\n            text-decoration: none; border: 1px solid var(--c-border); transition: all 0.3s;\r\n        }\r\n        .cn-pagination .page-numbers:hover, .cn-pagination .current {\r\n            background: var(--c-primary); color: #fff; border-color: var(--c-primary);\r\n            box-shadow: 0 5px 15px rgba(255,51,102,0.3);\r\n        }\r\n        .cn-empty { text-align: center; padding: 100px 0; font-size: 1.2rem; color: #888; }\r\n\r\n        \/* =========================================\r\n           \ud83d\udea8 \ud504\ub860\ud2b8\uc5d4\ub4dc \uae00\uc4f0\uae30 \ud31d\uc5c5(\ubaa8\ub2ec) & \ubbf8\ub514\uc5b4 \uc5c5\ub85c\ub354 \uacb9\uce68 \ubc29\uc9c0\r\n        ========================================= *\/\r\n        .cn-write-modal {\r\n            position: fixed; \r\n            \/* \ud5e4\ub354\uc640 \uacb9\uce58\uc9c0 \uc54a\ub3c4\ub85d Top 80px \uc124\uc815 *\/\r\n            top: 80px; \r\n            left: 0; \r\n            width: 100vw; \r\n            height: calc(100vh - 80px);\r\n            background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);\r\n            z-index: 99999; display: flex; align-items: center; justify-content: center;\r\n            opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\r\n        }\r\n        .cn-write-modal.active { opacity: 1; pointer-events: auto; }\r\n        \r\n        .cn-write-content {\r\n            background: #fff; width: 100%; max-width: 900px; padding: 40px 50px;\r\n            border-radius: 30px; transform: translateY(30px); transition: transform 0.3s ease;\r\n            position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.3);\r\n            \/* \ubaa8\ub2ec \ucee8\ud150\uce20\uac00 \ud654\uba74\uc744 \ub118\uc5b4\uac00\uba74 \uc2a4\ud06c\ub864 \uc0dd\uc131 *\/\r\n            max-height: calc(100vh - 120px); overflow-y: auto; \r\n        }\r\n        .cn-write-modal.active .cn-write-content { transform: translateY(0); }\r\n        \r\n        .cn-write-content h3 { font-size: 2rem; font-weight: 900; margin-bottom: 10px; color: #111; }\r\n        .cn-write-desc { font-size: 1rem; color: #888; margin-bottom: 30px; }\r\n        \r\n        .cn-input-group { margin-bottom: 20px; }\r\n        .cn-input-group input[type=\"text\"] { \r\n            width: 100%; padding: 18px 25px; font-size: 1.2rem; font-weight: 700;\r\n            border: 2px solid #eee; border-radius: 15px; font-family: inherit; transition: border-color 0.3s;\r\n        }\r\n        .cn-input-group input[type=\"text\"]:focus { outline: none; border-color: var(--c-primary); }\r\n        \r\n        \/* \uc6cc\ub4dc\ud504\ub808\uc2a4 \uae30\ubcf8 \uc5d0\ub514\ud130 UI \ub514\uc790\uc778 \ubcf4\uc815 *\/\r\n        .wp-editor-wrap { border: 2px solid #eee; border-radius: 15px; overflow: hidden; }\r\n        .wp-editor-wrap .wp-editor-tools { background: #f8f9fa; border-bottom: 1px solid #eee; padding: 10px; }\r\n        \r\n        .cn-write-btns { display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; }\r\n        .cn-write-btns button { padding: 15px 40px; font-size: 1.1rem; font-weight: 800; border-radius: 50px; cursor: pointer; border: none; transition: all 0.3s; }\r\n        .cn-write-btns .btn-cancel { background: #eee !important; color: #555 !important; }\r\n        .cn-write-btns .btn-cancel:hover { background: #ddd !important; }\r\n        \r\n        .cn-write-btns .btn-submit { \r\n            background-color: #FF3366 !important; \r\n            color: #ffffff !important; \r\n            box-shadow: 0 10px 20px rgba(255,51,102,0.3) !important; \r\n            text-shadow: none !important;\r\n            opacity: 1 !important;\r\n        }\r\n        .cn-write-btns .btn-submit:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(255,51,102,0.4) !important; }\r\n\r\n        \/* \ud83d\udea8 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uae30\ubcf8 \ubbf8\ub514\uc5b4 \uc5c5\ub85c\ub354(\uc0ac\uc9c4\/\uc601\uc0c1 \ucd94\uac00\ucc3d) \ud5e4\ub354 \uacb9\uce68 \ubc29\uc9c0 *\/\r\n        div.media-modal { top: 80px !important; z-index: 999999 !important; }\r\n        div.media-modal-backdrop { top: 80px !important; z-index: 999998 !important; }\r\n\r\n        \/* \ubaa8\ubc14\uc77c \ucd5c\uc801\ud654 *\/\r\n        @media (max-width: 992px) {\r\n            .cn-hero { min-height: 60vh; padding-top: 60px; }\r\n            .cn-hero-title { font-size: clamp(2rem, 7vw, 3rem); white-space: normal; line-height: 1.3; }\r\n            .cn-board-header { flex-direction: column; align-items: flex-start; gap: 20px; }\r\n            .cn-item-header { flex-wrap: wrap; padding: 20px 10px; }\r\n            .cn-badge { margin-bottom: 15px; }\r\n            .cn-title { width: 100%; margin-bottom: 10px; font-size: 1.15rem; line-height: 1.4; }\r\n            .cn-date { margin-right: auto; }\r\n            \r\n            \/* \ubaa8\ubc14\uc77c \ud5e4\ub354 \ub192\uc774\uc5d0 \ub9de\ucda4 (\ubcf4\ud1b5 60px) *\/\r\n            .cn-write-modal { top: 60px; height: calc(100vh - 60px); }\r\n            div.media-modal, div.media-modal-backdrop { top: 60px !important; }\r\n            \r\n            .cn-write-content { padding: 30px 20px; margin: 15px; border-radius: 20px; max-height: calc(100vh - 100px); }\r\n            .cn-write-content h3 { font-size: 1.6rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cn-wrap\">\r\n        <div class=\"cn-bg-shapes\">\r\n            <div class=\"cn-shape cn-shape-1\"><\/div>\r\n            <div class=\"cn-shape cn-shape-2\"><\/div>\r\n        <\/div>\r\n\r\n        <section class=\"cn-hero\">\r\n            <div class=\"cn-hero-bg\" id=\"cn-parallax-bg\"><\/div>\r\n            <div class=\"cn-hero-overlay\"><\/div>\r\n            <div class=\"cn-container cn-hero-content\">\r\n                <div class=\"cn-hero-subtitle gs-bounce4\">NOTICE & NEWS<\/div>\r\n                <h1 class=\"cn-hero-title gs-fade-up4\">\uc0c8\ub85c\uc6b4 \uc18c\uc2dd\uacfc \uc548\ub0b4<br><span>B.LANDING<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"cn-board-section\">\r\n            <div class=\"cn-container\">\r\n                \r\n                <div class=\"cn-board-header gs-fade-up4\">\r\n                    <h2>\uacf5\uc9c0\uc0ac\ud56d<\/h2>\r\n                                    <\/div>\r\n\r\n                <div class=\"cn-list gs-fade-up4\">\r\n                                            <div class=\"cn-empty\">\ub4f1\ub85d\ub41c \uacf5\uc9c0\uc0ac\ud56d\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/div>\r\n                                    <\/div>\r\n\r\n                <div class=\"cn-pagination gs-fade-up4\">\r\n                                    <\/div>\r\n            <\/div>\r\n        <\/section>\r\n    <\/div>\r\n\r\n    \r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n\r\n            gsap.to(\"#cn-parallax-bg\", {\r\n                yPercent: 30, ease: \"none\",\r\n                scrollTrigger: { trigger: \".cn-hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n            });\r\n\r\n            gsap.fromTo(\".gs-bounce4\", \r\n                { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"bounce.out\" }\r\n            );\r\n            gsap.fromTo(\".gs-fade-up4\", \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            const headers = document.querySelectorAll('.cn-item-header');\r\n            headers.forEach(header => {\r\n                header.addEventListener('click', () => {\r\n                    const body = header.nextElementSibling;\r\n                    const icon = header.querySelector('.cn-icon');\r\n                    const isOpen = body.classList.contains('open');\r\n\r\n                    document.querySelectorAll('.cn-item-body').forEach(b => {\r\n                        b.classList.remove('open');\r\n                        b.style.maxHeight = null;\r\n                    });\r\n                    document.querySelectorAll('.cn-icon').forEach(i => i.style.transform = 'rotate(0deg)');\r\n\r\n                    if(!isOpen) {\r\n                        body.classList.add('open');\r\n                        body.style.maxHeight = body.scrollHeight + \"px\";\r\n                        icon.style.transform = 'rotate(180deg)';\r\n                    }\r\n                });\r\n            });\r\n        });\r\n\r\n        function openWriteModal(btn = null) {\r\n            const modal = document.getElementById('cnWriteModal');\r\n            const idInput = document.getElementById('notice_id');\r\n            const titleInput = document.getElementById('notice_title');\r\n            const modalTitle = document.getElementById('modalTitleText');\r\n            \r\n            let content = '';\r\n\r\n            if(btn) {\r\n                const id = btn.getAttribute('data-id');\r\n                idInput.value = id;\r\n                titleInput.value = btn.getAttribute('data-title');\r\n                content = document.getElementById('raw-content-' + id).value;\r\n                modalTitle.innerText = \"\uacf5\uc9c0\uc0ac\ud56d \uc218\uc815\";\r\n            } else {\r\n                idInput.value = '0';\r\n                titleInput.value = '';\r\n                content = '';\r\n                modalTitle.innerText = \"\uc0c8 \uacf5\uc9c0\uc0ac\ud56d \uc791\uc131\";\r\n            }\r\n            \r\n            if(typeof tinymce !== 'undefined' && tinymce.get('notice_content')) {\r\n                tinymce.get('notice_content').setContent(content);\r\n            } else {\r\n                document.getElementById('notice_content').value = content;\r\n            }\r\n            \r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n        }\r\n\r\n        function closeWriteModal() {\r\n            document.getElementById('cnWriteModal').classList.remove('active');\r\n            document.body.style.overflow = '';\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-25","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\/25","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=25"}],"version-history":[{"count":1,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/25\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}