{"id":10837,"date":"2025-07-09T08:47:06","date_gmt":"2025-07-09T08:47:06","guid":{"rendered":"https:\/\/metarich-internship.co.kr\/?page_id=10837"},"modified":"2025-07-24T07:27:25","modified_gmt":"2025-07-24T07:27:25","slug":"%eb%b6%80%eb%8c%80%ec%8b%9c%ec%84%a4","status":"publish","type":"page","link":"https:\/\/metarich-internship.co.kr\/?page_id=10837","title":{"rendered":"\ubd80\ub300\uc2dc\uc124"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\uc88c\uce21 \ud5e4\ub354 + \ud558\ub2e8 \uc5f0\ub77d\ucc98 \uace0\uc815 + \ubaa8\ubc14\uc77c \ud584\ubc84\uac70 \uba54\ub274<\/title>\r\n<style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: 'Noto Sans KR', sans-serif;\r\n background: #000;\r\n color: white;\r\n overflow-x: hidden;\r\n }\r\n nav.sidebar {\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 250px;\r\n height: 100vh;\r\n background: #000;\r\n border-right: 1px solid #444;\r\n padding: 30px 15px 80px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n z-index: 1000;\r\n color: white;\r\n overflow-y: hidden;\r\n transition: transform 0.3s ease;\r\n }\r\n nav.sidebar .logo {\r\n width: 100%;\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n nav.sidebar .logo img {\r\n width: 180px;\r\n height: auto;\r\n display: inline-block;\r\n cursor: pointer;\r\n }\r\n nav.sidebar ul.menu {\r\n list-style: none;\r\n width: 100%;\r\n text-align: center;\r\n border-top: 1px solid #444;\r\n border-bottom: 1px solid #444;\r\n }\r\n nav.sidebar ul.menu li {\r\n border-bottom: 1px solid #444;\r\n }\r\n nav.sidebar ul.menu li:last-child {\r\n border-bottom: none;\r\n }\r\n nav.sidebar ul.menu li a {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #ccc;\r\n display: block;\r\n padding: 12px 0;\r\n transition: color 0.3s, background-color 0.3s, transform 0.2s;\r\n text-decoration: none;\r\n }\r\n nav.sidebar ul.menu li a:hover,\r\n nav.sidebar ul.menu li a.active {\r\n color: #ff6600;\r\n background-color: #222;\r\n transform: translateX(10px);\r\n box-shadow: 2px 2px 10px rgba(255,102,0,0.5);\r\n border-radius: 4px;\r\n }\r\n nav.sidebar .guide-btns {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n margin-top: 20px;\r\n }\r\n nav.sidebar .guide-btns button {\r\n padding: 12px 0;\r\n border: none;\r\n background: #0d6efd;\r\n color: white;\r\n font-weight: 600;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n font-size: 16px;\r\n transition: background-color 0.3s;\r\n }\r\n nav.sidebar .guide-btns button:hover { background: #084cd8; }\r\n nav.sidebar .guide-btns button.orange-btn { background: #ff6600; }\r\n nav.sidebar .guide-btns button.orange-btn:hover { background: #cc5200; }\r\n nav.sidebar .guide-btns button.green-btn {\r\n background: #28a745;\r\n color: white;\r\n }\r\n nav.sidebar .guide-btns button.green-btn:hover {\r\n background: #1e7e34;\r\n }\r\n nav.sidebar .contact-group {\r\n position: fixed;\r\n bottom: 20px;\r\n left: 15px;\r\n width: 220px;\r\n text-align: left;\r\n font-size: 14px;\r\n color: #bbb;\r\n font-weight: 600;\r\n line-height: 1.6;\r\n }\r\n nav.sidebar .contact-group p { margin-bottom: 8px; }\r\n\r\n #menu-toggle {\r\n display: none;\r\n position: fixed;\r\n top: 15px;\r\n left: 15px;\r\n z-index: 2000;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 30px;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n background: rgba(0,0,0,0.6);\r\n border-radius: 6px;\r\n padding: 5px;\r\n border: none;\r\n transition: background-color 0.3s;\r\n }\r\n #menu-toggle:hover { background: rgba(0,0,0,0.85); }\r\n #menu-toggle span {\r\n display: block;\r\n height: 4px;\r\n background: white;\r\n border-radius: 2px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n nav.sidebar {\r\n transform: translateX(-100%);\r\n width: 250px;\r\n }\r\n nav.sidebar.open { transform: translateX(0); }\r\n #menu-toggle { display: flex; }\r\n nav.sidebar .contact-group {\r\n position: static;\r\n width: 100%;\r\n padding-left: 30px;\r\n margin-top: 20px;\r\n font-size: 13px;\r\n }\r\n nav.sidebar .logo img { width: 140px; }\r\n nav.sidebar ul.menu li a {\r\n font-size: 16px;\r\n padding: 10px 0;\r\n }\r\n nav.sidebar .guide-btns button {\r\n font-size: 14px;\r\n padding: 10px 0;\r\n }\r\n body.menu-open { overflow: hidden; }\r\n .main-content { margin-left: 0; }\r\n }\r\n .main-content {\r\n margin-left: 250px;\r\n min-height: 150vh;\r\n padding: 40px;\r\n background: #111;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<button id=\"menu-toggle\" aria-label=\"\uba54\ub274 \uc5f4\uae30\/\ub2eb\uae30\" role=\"button\" tabindex=\"0\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n<\/button>\r\n\r\n<nav class=\"sidebar\" id=\"sidebar\">\r\n <div class=\"logo\">\r\n <a href=\"https:\/\/metarich-academy.co.kr\/\" tabindex=\"0\">\r\n <img decoding=\"async\" src=\"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/05\/\uba54\ud0c0\ub9ac\uce58-\ub85c\uace0-mz\ubd80\uc2a4\ud2b8\ucea0\ud504\uc804\uc6a9.png\" alt=\"MetaRich \ub85c\uace0\" \/>\r\n <\/a>\r\n <\/div>\r\n <ul class=\"menu\" id=\"menu-list\">\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=10810\" tabindex=\"0\">\uc5f0\uc218\uc6d0\uc18c\uac1c<\/a><\/li>\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=12747\" tabindex=\"0\">\uad50\uc721\uc548\ub0b4<\/a><\/li>\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=11154\" tabindex=\"0\">\uc774\uc6a9\uc548\ub0b4<\/a><\/li>\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=11241\" tabindex=\"0\">\uad50\uc721\uc2dc\uc124<\/a><\/li>\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=11127\" tabindex=\"0\">\uc219\uc18c\uc548\ub0b4<\/a><\/li>\r\n <li><a href=\"https:\/\/metarich-academy.co.kr\/?page_id=10837\" tabindex=\"0\">\ubd80\ub300\uc2dc\uc124<\/a><\/li>\r\n <\/ul>\r\n <div class=\"guide-btns\">\r\n <button onclick=\"location.href='https:\/\/metarich-academy.co.kr\/?page_id=12254'\">\uc2e4\uc2dc\uac04\uc608\uc57d<\/button>\r\n <button class=\"green-btn\" onclick=\"location.href='https:\/\/metarich-academy.co.kr\/?page_id=13530'\">\uad50\uc721\uc2e0\uccad<\/button>\r\n <button class=\"orange-btn\" onclick=\"location.href='https:\/\/metarich-academy.co.kr\/?page_id=11902'\">\uc624\uc2dc\ub294\uae38<\/button>\r\n <\/div>\r\n <div class=\"contact-group\">\r\n <p>\ub300\ud45c\ubc88\ud638: 010-9244-0114<\/p>\r\n <p>\uc8fc\uc18c: \ucd98\ucc9c\uc2dc \ub0a8\uba74 \uc18c\uc8fc\uace0\uac1c\ub85c 238<\/p>\r\n <\/div>\r\n<\/nav>\r\n\r\n<script>\r\n const menuToggle = document.getElementById('menu-toggle');\r\n const sidebar = document.getElementById('sidebar');\r\n const body = document.body;\r\n\r\n menuToggle.addEventListener('click', () => {\r\n sidebar.classList.toggle('open');\r\n body.classList.toggle('menu-open');\r\n });\r\n\r\n menuToggle.addEventListener('keydown', e => {\r\n if(e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n sidebar.classList.toggle('open');\r\n body.classList.toggle('menu-open');\r\n }\r\n });\r\n\r\n \/\/ \uba54\ub274 active \uc0c1\ud0dc \uc81c\uc5b4\r\n const menuList = document.getElementById('menu-list');\r\n const menuItems = menuList.querySelectorAll('a');\r\n\r\n menuItems.forEach(item => {\r\n item.addEventListener('click', e => {\r\n menuItems.forEach(i => i.classList.remove('active'));\r\n e.currentTarget.classList.add('active');\r\n \/\/ \ubaa8\ubc14\uc77c\uc5d0\uc11c \uba54\ub274 \ud074\ub9ad\ud558\uba74 \ub2eb\uae30\r\n if(window.innerWidth <= 768){\r\n sidebar.classList.remove('open');\r\n body.classList.remove('menu-open');\r\n }\r\n });\r\n item.addEventListener('keydown', e => {\r\n if(e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n menuItems.forEach(i => i.classList.remove('active'));\r\n e.currentTarget.classList.add('active');\r\n }\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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<div class=\"elementor-element elementor-element-189ac88 e-flex e-con-boxed e-con e-parent\" data-id=\"189ac88\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d688e3e elementor-widget elementor-widget-html\" data-id=\"d688e3e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ko\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n <title>\ubd80\ub300\uc2dc\uc124 4\ub4f1\ubd84 \uc778\ud130\ub799\uc158 + \ubc15\uc2a4\ub0b4\/\ubaa8\ubc14\uc77c\ubaa8\ub2ec \uc2ac\ub77c\uc774\ub4dc<\/title>\r\n <style>\r\n html, body { height: 100%; margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; background: #000; overflow-x: hidden; width: 100vw; height: 100vh; }\r\n body { background: url('https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/\uc804\uacbd1-scaled.jpg') no-repeat center center\/cover; position: relative;}\r\n body::before { content: \"\"; position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(0,0,0,0.55); pointer-events: none; z-index: 0;}\r\n .container { position: fixed; top:0; left:250px; height:100vh; width: calc(100vw - 250px); display: flex; z-index: 10; flex-direction: row; }\r\n .box { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; transition: flex-grow 0.5s, filter 0.5s; filter: brightness(1) !important; cursor: pointer; background: rgba(0,0,0,0.3); overflow: hidden; border-left: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px);}\r\n .box:first-child { border-left: none; border-top-left-radius:10px; border-bottom-left-radius:10px;}\r\n .box:last-child { border-right: none; border-top-right-radius:10px; border-bottom-right-radius:10px;}\r\n .box-text { color:#fff !important; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em; opacity: 1 !important; background: none !important; border-radius: 0 !important; padding: 8px 22px !important; box-shadow: none !important; text-shadow: 0 2px 12px #000, 0 1px 4px #000, 0 0 1px #fff; width: 100%; text-align: center; cursor: pointer; z-index: 2; position: relative; user-select: none; white-space: pre-line;}\r\n .box.active { flex-grow: 2.5; filter: brightness(1) !important; background: rgba(0,0,0,0.55); z-index: 2; cursor: default; }\r\n .container .box:not(.active) { flex-grow: 0.7; filter: brightness(0.7);}\r\n .box-inner { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }\r\n .box.active .box-text { display:none; }\r\n .slide-wrap { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }\r\n .slide-img-zone { width:100%; aspect-ratio:16\/9; max-width: 800px; min-width: 0; background: #222; border-radius: 18px 18px 0 0; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }\r\n .slide-img { width: 100%; height: 100%; object-fit: cover; display: block; background: #222; border-radius: 0; }\r\n .slide-texts { width:100%; max-width:800px; margin:0 auto; display:flex; flex-direction:column; align-items:center; margin-bottom: 8px;}\r\n .slide-desc, .use-info { color: #fff !important; opacity: 1 !important; text-shadow: 0 2px 12px #000, 0 0 6px #fff;}\r\n .slide-desc { font-size:1.5rem; margin-bottom:13px; text-align:center; width:100%; font-weight: bold; letter-spacing: 0.01em;}\r\n .use-info { font-size:1.10rem; margin-top:8px; text-align:center; border-top:1px dashed #888; padding-top:9px; width:100%;}\r\n .slide-arrow { position: absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; color:#fff; font-size:1.6rem; border:none; cursor:pointer; z-index:12; display:flex; align-items:center; justify-content:center; box-shadow: none; transition: background 0.2s;}\r\n .slide-arrow.left { left: 6px;}\r\n .slide-arrow.right { right: 6px;}\r\n .slide-arrow:hover { background: #0d6efd22; }\r\n .dots { margin: 20px 0 12px; display: flex; gap: 10px; }\r\n .dot { width:17px; height:17px; border-radius:50%; background: #bbb; transition: background 0.3s; cursor:pointer; display: inline-block; }\r\n .dot.active { background: #0d6efd; }\r\n .close-btn { position: absolute; top:16px; right:16px; background: transparent; color:#fff; border: none; width: 38px; height:38px; font-size:2.1rem; font-weight:900; cursor:pointer; z-index:22; transition: color 0.2s; line-height: 1; box-shadow: none; padding: 0; display: flex; align-items: center; justify-content: center;}\r\n .close-btn:hover { color:#f34444; background:transparent; }\r\n\r\n \/* \ubaa8\ubc14\uc77c: \uc138\ub85c 4\ub4f1\ubd84 \u2192 \ud074\ub9ad \uc2dc \ud480\ubaa8\ub2ec *\/\r\n @media (max-width:900px){\r\n .container { left: 0 !important; width: 100vw !important; top: 0 !important; height: 100vh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; position: fixed !important; background: none !important; z-index: 10; margin: 0 !important; padding: 0 !important;}\r\n .box, .container .box { flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; height: 25vh !important; max-height: 25vh !important; width: 100vw !important; border-radius: 0 !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; border-bottom: 2px solid rgba(255,255,255,0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important;}\r\n .box:last-child { border-bottom: none !important; }\r\n .box-inner { width: 100% !important; height: 100% !important; justify-content: center !important; }\r\n .slide-wrap, .slide-img-zone { max-width: 98vw !important; }\r\n .slide-desc { font-size: 1.01rem !important; }\r\n .slide-img-zone { border-radius: 7px 7px 0 0 !important; aspect-ratio: 1\/1 !important; }\r\n .box-text { font-size: 1.09rem !important; padding: 8px 2vw !important; }\r\n }\r\n @media (max-width:600px){\r\n .container { min-width:100vw !important; }\r\n .box, .container .box { max-height: 25vh !important; }\r\n .slide-img-zone { aspect-ratio: 1\/1 !important; min-height: 0 !important; }\r\n }\r\n \/* \ubaa8\ubc14\uc77c \ud480\ubaa8\ub2ec *\/\r\n #mobileModalOverlay {\r\n display: none;\r\n position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;\r\n background: rgba(20,20,20,0.96); z-index: 99999;\r\n align-items: center; justify-content: center;\r\n animation: modalFadeIn .25s;\r\n }\r\n #mobileModalOverlay.active { display: flex; }\r\n .mobile-modal-box {\r\n width: 97vw; max-width: 440px; background: #181d22;\r\n border-radius: 16px; box-shadow: 0 10px 50px #000c, 0 2px 10px #00f2;\r\n padding: 0 0 24px 0; position: relative; display: flex; flex-direction: column; align-items: center;\r\n }\r\n .mobile-modal-box .slide-wrap { border-radius: 13px 13px 0 0; padding: 18px 7px 0 7px; width: 100%;}\r\n .mobile-modal-box .slide-img-zone { border-radius: 11px 11px 0 0; }\r\n .mobile-modal-box .slide-img { border-radius: 11px 11px 0 0; }\r\n .mobile-modal-box .close-btn { top:8px; right:8px; width:35px; height:35px; font-size:2rem;}\r\n @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"box\" data-id=\"0\"><div class=\"box-inner\"><div class=\"box-text\">\uc57c\uc678 \uc778\ud53c\ub2c8\ud2f0\ud480<\/div><\/div><\/div>\r\n <div class=\"box\" data-id=\"1\"><div class=\"box-inner\"><div class=\"box-text\">\ubc99\ucee4\ub8f8 \uc6d0\ud615 \uc218\uc601\uc7a5<\/div><\/div><\/div>\r\n <div class=\"box\" data-id=\"2\"><div class=\"box-inner\"><div class=\"box-text\">\uac1c\ubcc4 \uc218\uc601\uc7a5<\/div><\/div><\/div>\r\n <div class=\"box\" data-id=\"3\"><div class=\"box-inner\"><div class=\"box-text\">\ub9e4\uc810<\/div><\/div><\/div>\r\n <\/div>\r\n <!-- \ubaa8\ubc14\uc77c \ud480\ubaa8\ub2ec -->\r\n <div id=\"mobileModalOverlay\">\r\n <div class=\"mobile-modal-box\"><\/div>\r\n <\/div>\r\n <script>\r\n const boxes = document.querySelectorAll('.box');\r\n const pools = [\r\n {\r\n title: \"\uc57c\uc678 \uc778\ud53c\ub2c8\ud2f0\ud480\",\r\n description: \"\ub113\uace0 \ucf8c\uc801\ud55c \uc57c\uc678 \uc778\ud53c\ub2c8\ud2f0\ud480\",\r\n images: [\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/68058433cb7841.92141520.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/P1000081-scaled.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/2-1-scaled.jpg\"\r\n ],\r\n useinfo: \"\uc6b4\uc601\uc2dc\uac04: 09:00~21:00<br>\uc218\uc2ec: 1.2m(\uc720\uc544\ud480 50cm)<br>\ubb3c\ub180\uc774 \uc6a9\ud488 \ub300\uc5ec \uac00\ub2a5\"\r\n },\r\n {\r\n title: \"\ubc99\ucee4\ub8f8 \uc6d0\ud615 \uc218\uc601\uc7a5\",\r\n description: \"\uc544\ub291\ud55c \ubc99\ucee4\ub8f8 \uc6d0\ud615 \uc218\uc601\uc7a5\",\r\n images: [\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/\uc804\uacbd3-scaled.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/\uc804\uacbd2.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/6746a566e4a17.jpg\"\r\n ],\r\n useinfo: \"\uc6b4\uc601\uc2dc\uac04: 09:00~21:00<br>\uc218\uc2ec: 1.0m\"\r\n },\r\n {\r\n title: \"\uac1c\ubcc4 \uc218\uc601\uc7a5\",\r\n description: \"\ud504\ub77c\uc774\ube57\ud55c \uac1c\ubcc4 \uc218\uc601\uc7a5\",\r\n images: [\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/665047bf10a4a.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/1-scaled.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/656d6277a111d.jpg\"\r\n ],\r\n useinfo: \"\uc0ac\uc774\uc988 : 1.9m x 5m<br> \uc694\uae08 : \ub0c9\uc218 30,000\uc6d0 \/ \ubbf8\uc628\uc218 70,000\uc6d0\"\r\n },\r\n {\r\n title: \"\ub9e4\uc810\",\r\n description: \"\ub2e4\uc591\ud55c \uac04\uc2dd\uacfc \ub77c\uba74\uc744 \uad6c\ub9e4\ud560 \uc218 \uc788\ub294 \ub9e4\uc810\",\r\n images: [\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/KakaoTalk_20250709_180422488_04-scaled.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/123123-scaled.jpg\",\r\n \"https:\/\/metarich-internship.co.kr\/wp-content\/uploads\/2025\/07\/\ub77c\uba74\uae30\uacc4-scaled.jpg\"\r\n ],\r\n useinfo: \"\uc6b4\uc601\uc2dc\uac04: 10:00~22:00<br>\uac04\uc2dd\u00b7\uc74c\ub8cc \ud310\ub9e4\"\r\n }\r\n ];\r\n\r\n let activeIdx = null;\r\n let slideIdx = 0;\r\n let autoSlideTimer = null;\r\n\r\n function getSlideHTML(pool, slide, forModal=false) {\r\n return `\r\n <div class=\"slide-wrap\">\r\n <div class=\"slide-img-zone\">\r\n <button class=\"close-btn\" aria-label=\"\ub2eb\uae30\" type=\"button\">×<\/button>\r\n <button class=\"slide-arrow left\" aria-label=\"\uc774\uc804\" type=\"button\">←<\/button>\r\n <img decoding=\"async\" src=\"${pool.images[slide]}\" class=\"slide-img\" \/>\r\n <button class=\"slide-arrow right\" aria-label=\"\ub2e4\uc74c\" type=\"button\">→<\/button>\r\n <\/div>\r\n <div class=\"dots\">\r\n ${pool.images.map((_, i) =>\r\n `<span class=\"dot${i === slide ? ' active' : ''}\" data-dot=\"${i}\"><\/span>`\r\n ).join('')}\r\n <\/div>\r\n <div class=\"slide-texts\">\r\n <div class=\"slide-desc\">${pool.description}<\/div>\r\n <div class=\"use-info\">${pool.useinfo}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ PC (box \uc548 \uc2ac\ub77c\uc774\ub4dc)\r\n boxes.forEach((box, idx) => {\r\n box.addEventListener('click', function(e) {\r\n if (window.innerWidth <= 900) { \/\/ \ubaa8\ubc14\uc77c: \ubaa8\ub2ec \uc624\ud508\r\n openMobileModal(idx, 0);\r\n return;\r\n }\r\n if (box.classList.contains('active')) return;\r\n e.stopPropagation();\r\n boxes.forEach((b, i) => {\r\n b.classList.remove('active');\r\n b.querySelector('.box-inner').innerHTML = `<div class=\"box-text\">${pools[i].title}<\/div>`;\r\n });\r\n box.classList.add('active');\r\n activeIdx = idx;\r\n slideIdx = 0;\r\n box.querySelector('.box-inner').innerHTML = getSlideHTML(pools[idx], slideIdx);\r\n setTimeout(() => addSlideEvents(box, idx), 10);\r\n startAutoSlide(box, idx);\r\n });\r\n });\r\n\r\n function startAutoSlide(box, poolIdx) {\r\n clearInterval(autoSlideTimer);\r\n const pool = pools[poolIdx];\r\n autoSlideTimer = setInterval(() => {\r\n if (!box.classList.contains('active')) {\r\n clearInterval(autoSlideTimer);\r\n return;\r\n }\r\n slideIdx = (slideIdx + 1) % pool.images.length;\r\n box.querySelector('.box-inner').innerHTML = getSlideHTML(pool, slideIdx);\r\n addSlideEvents(box, poolIdx);\r\n }, 2500);\r\n }\r\n\r\n function addSlideEvents(box, poolIdx) {\r\n const left = box.querySelector('.slide-arrow.left');\r\n const right = box.querySelector('.slide-arrow.right');\r\n const dots = box.querySelectorAll('.dot');\r\n const closeBtn = box.querySelector('.close-btn');\r\n const pool = pools[poolIdx];\r\n\r\n function resetAutoSlide() {\r\n clearInterval(autoSlideTimer);\r\n startAutoSlide(box, poolIdx);\r\n }\r\n\r\n left && left.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n slideIdx = (slideIdx - 1 + pool.images.length) % pool.images.length;\r\n box.querySelector('.box-inner').innerHTML = getSlideHTML(pool, slideIdx);\r\n addSlideEvents(box, poolIdx);\r\n resetAutoSlide();\r\n });\r\n\r\n right && right.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n slideIdx = (slideIdx + 1) % pool.images.length;\r\n box.querySelector('.box-inner').innerHTML = getSlideHTML(pool, slideIdx);\r\n addSlideEvents(box, poolIdx);\r\n resetAutoSlide();\r\n });\r\n\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n slideIdx = parseInt(dot.dataset.dot);\r\n box.querySelector('.box-inner').innerHTML = getSlideHTML(pool, slideIdx);\r\n addSlideEvents(box, poolIdx);\r\n resetAutoSlide();\r\n });\r\n });\r\n\r\n closeBtn && closeBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n box.classList.remove('active');\r\n box.querySelector('.box-inner').innerHTML = `<div class=\"box-text\">${pool.title}<\/div>`;\r\n activeIdx = null;\r\n clearInterval(autoSlideTimer);\r\n });\r\n }\r\n\r\n \/\/ \ubaa8\ubc14\uc77c \uc804\uc6a9 \ubaa8\ub2ec\r\n const modalOverlay = document.getElementById('mobileModalOverlay');\r\n const modalBox = modalOverlay.querySelector('.mobile-modal-box');\r\n let modalPoolIdx = 0;\r\n let modalSlideIdx = 0;\r\n let modalTimer = null;\r\n\r\n function openMobileModal(poolIdx, startSlideIdx) {\r\n modalPoolIdx = poolIdx;\r\n modalSlideIdx = startSlideIdx;\r\n renderMobileModal();\r\n modalOverlay.classList.add('active');\r\n document.body.style.overflow = \"hidden\";\r\n startMobileModalAuto();\r\n }\r\n\r\n function renderMobileModal() {\r\n modalBox.innerHTML = getSlideHTML(pools[modalPoolIdx], modalSlideIdx, true);\r\n addMobileModalEvents();\r\n }\r\n\r\n function startMobileModalAuto() {\r\n clearInterval(modalTimer);\r\n const pool = pools[modalPoolIdx];\r\n modalTimer = setInterval(() => {\r\n modalSlideIdx = (modalSlideIdx + 1) % pool.images.length;\r\n renderMobileModal();\r\n }, 2500);\r\n }\r\n\r\n function addMobileModalEvents() {\r\n const left = modalBox.querySelector('.slide-arrow.left');\r\n const right = modalBox.querySelector('.slide-arrow.right');\r\n const dots = modalBox.querySelectorAll('.dot');\r\n const closeBtn = modalBox.querySelector('.close-btn');\r\n const pool = pools[modalPoolIdx];\r\n\r\n left && left.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n modalSlideIdx = (modalSlideIdx - 1 + pool.images.length) % pool.images.length;\r\n renderMobileModal();\r\n startMobileModalAuto();\r\n });\r\n right && right.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n modalSlideIdx = (modalSlideIdx + 1) % pool.images.length;\r\n renderMobileModal();\r\n startMobileModalAuto();\r\n });\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n modalSlideIdx = parseInt(dot.dataset.dot);\r\n renderMobileModal();\r\n startMobileModalAuto();\r\n });\r\n });\r\n closeBtn && closeBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n closeMobileModal();\r\n });\r\n }\r\n\r\n function closeMobileModal() {\r\n modalOverlay.classList.remove('active');\r\n document.body.style.overflow = \"\";\r\n clearInterval(modalTimer);\r\n }\r\n\r\n modalOverlay.addEventListener('click', function(e) {\r\n if (e.target === modalOverlay) {\r\n closeMobileModal();\r\n }\r\n });\r\n\r\n window.addEventListener('keydown', e => {\r\n if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {\r\n closeMobileModal();\r\n }\r\n });\r\n\r\n \/\/ \ubc14\uae65 \ud074\ub9ad \uc2dc PC \uc2ac\ub77c\uc774\ub4dc \ub2eb\ud798\r\n document.body.addEventListener('click', function(e) {\r\n if (window.innerWidth <= 900) return;\r\n if (![...boxes].some(b => b.contains(e.target))) {\r\n boxes.forEach((b, idx) => {\r\n b.classList.remove('active');\r\n b.querySelector('.box-inner').innerHTML = `<div class=\"box-text\">${pools[idx].title}<\/div>`;\r\n });\r\n activeIdx = null;\r\n clearInterval(autoSlideTimer);\r\n }\r\n });\r\n \r\n <\/script>\r\n <script>\r\nfunction removeFooters() {\r\n document.querySelectorAll(\r\n 'footer, .footer, #footer, [class*=\"footer\"], [id*=\"footer\"],' +\r\n '.site-footer, .page-footer, .wp-block-template-part-footer,' +\r\n '.elementor-footer, .o-footer, .c-footer'\r\n ).forEach(el => el.remove());\r\n}\r\nwindow.addEventListener('DOMContentLoaded', removeFooters);\r\nwindow.addEventListener('load', removeFooters);\r\nconst observer = new MutationObserver(removeFooters);\r\nobserver.observe(document.body, { childList: true, subtree: true });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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<div class=\"elementor-element elementor-element-5b32da5 e-flex e-con-boxed e-con e-parent\" data-id=\"5b32da5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03d33d4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"03d33d4\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\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>\uc88c\uce21 \ud5e4\ub354 + \ud558\ub2e8 \uc5f0\ub77d\ucc98 \uace0\uc815 + \ubaa8\ubc14\uc77c \ud584\ubc84\uac70 \uba54\ub274 \uc5f0\uc218\uc6d0\uc18c\uac1c \uad50\uc721\uc548\ub0b4 \uc774\uc6a9\uc548\ub0b4 \uad50\uc721\uc2dc\uc124 \uc219\uc18c\uc548\ub0b4 \ubd80\ub300\uc2dc\uc124 \uc2e4\uc2dc\uac04\uc608\uc57d \uad50\uc721\uc2e0\uccad \uc624\uc2dc\ub294\uae38 \ub300\ud45c\ubc88\ud638: 010-9244-0114 \uc8fc\uc18c: \ucd98\ucc9c\uc2dc \ub0a8\uba74 \uc18c\uc8fc\uace0\uac1c\ub85c 238 \ubd80\ub300\uc2dc\uc124 4\ub4f1\ubd84 \uc778\ud130\ub799\uc158 + \ubc15\uc2a4\ub0b4\/\ubaa8\ubc14\uc77c\ubaa8\ub2ec \uc2ac\ub77c\uc774\ub4dc \uc57c\uc678 \uc778\ud53c\ub2c8\ud2f0\ud480 \ubc99\ucee4\ub8f8 \uc6d0\ud615 \uc218\uc601\uc7a5 \uac1c\ubcc4 \uc218\uc601\uc7a5 \ub9e4\uc810<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-10837","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/10837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10837"}],"version-history":[{"count":136,"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/10837\/revisions"}],"predecessor-version":[{"id":14529,"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/10837\/revisions\/14529"}],"wp:attachment":[{"href":"https:\/\/metarich-internship.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}