Instructors – JJ Music Academy<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'jj-teal': '#17b194',\n 'jj-teal-light': '#2dd4b3',\n 'jj-dark': '#0f1115', \n 'jj-dark-sec': '#161920', \n 'jj-card': '#1e222b', \n },\n fontFamily: {\n sans: ['\"Noto Sans KR\"', 'sans-serif'],\n serif: ['\"Playfair Display\"', 'serif'],\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* \uae30\ubcf8 \uc124\uc815 *\/\n :root { --jj-teal: #17b194; }\n html { -webkit-text-size-adjust: none; scroll-behavior: smooth; }\n body {\n background-color: #0f1115;\n color: #f3f4f6;\n font-family: 'Noto Sans KR', sans-serif !important;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* \ud14d\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654 *\/\n h1, h2, h3, h4, p, span, a { transform: translateZ(0); word-break: keep-all; }\n\n \/* Scroll Reveal Animation Classes *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.5, 0, 0, 1);\n }\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Hero Image Effect *\/\n .hero-img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.85) contrast(1.1); \/* \ubc1d\uae30 \uc870\uc808: \uae00\uc528\uac00 \uc798 \ubcf4\uc774\uac8c \uc57d\uac04\ub9cc \uc5b4\ub461\uac8c *\/\n transform: scale(1.0);\n transition: transform 20s linear;\n }\n .hero-active .hero-img { transform: scale(1.1); }\n\n \/* Glow Text & Elements *\/\n .text-glow { text-shadow: 0 0 20px rgba(23, 177, 148, 0.5); }\n .divider-glow {\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--jj-teal), transparent);\n box-shadow: 0 0 15px var(--jj-teal);\n }\n\n \/* Glass Cards *\/\n .glass-panel {\n background: rgba(30, 34, 43, 0.6);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);\n }\n\n \/* Grid Hover Effect *\/\n .hover-card-zoom {\n transition: all 0.4s ease;\n }\n .hover-card-zoom:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px -5px rgba(23, 177, 148, 0.2);\n border-color: rgba(23, 177, 148, 0.5);\n }\n\n \/* Utilities *\/\n #back-to-top { opacity: 0; visibility: hidden; transition: all 0.3s; }\n #back-to-top.show { opacity: 1; visibility: visible; }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"relative h-[600px] flex items-center justify-center text-center text-white overflow-hidden w-full bg-jj-dark hero-active\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300\uc0ac\uc9c4-1.jpg\" class=\"hero-img\" alt=\"Hero Background\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-black\/60 via-transparent to-[#0f1115] z-10\"><\/div>\n <\/div>\n\n <div class=\"relative z-20 px-6 max-w-5xl mx-auto pt-20\">\n <div class=\"overflow-hidden mb-4\">\n <p class=\"text-jj-teal font-bold tracking-[0.4em] uppercase text-sm md:text-base animate-[fadeInDown_1s_ease-out]\">\n Our Teachers\n <\/p>\n <\/div>\n \n <h1 class=\"text-5xl md:text-7xl lg:text-8xl font-black text-white leading-tight mb-6 drop-shadow-2xl animate-[fadeInUp_1s_ease-out_0.2s_forwards] opacity-0\">\n INSTRUCTORS\n <\/h1>\n \n <p class=\"text-gray-200 text-lg md:text-2xl font-light tracking-wide animate-[fadeInUp_1s_ease-out_0.4s_forwards] opacity-0 font-serif italic\">\n “Meet the Professional Musicians”\n <\/p>\n <\/div>\n \n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 z-20 animate-bounce text-white\/50\">\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark relative border-b border-white\/5\">\n <div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-jj-teal\/5 rounded-full blur-[120px] pointer-events-none\"><\/div>\n\n <div class=\"container mx-auto px-6 max-w-6xl relative z-10\">\n <div class=\"flex flex-col md:flex-row items-stretch gap-0 rounded-[2.5rem] overflow-hidden glass-panel reveal\">\n \n <div class=\"w-full md:w-1\/2 p-10 md:p-16 flex flex-col justify-center order-2 md:order-1 relative\">\n <i class=\"fas fa-quote-left text-4xl text-jj-teal\/20 absolute top-10 left-10\"><\/i>\n \n <div class=\"mb-10 relative z-10\">\n <span class=\"text-jj-teal font-bold tracking-widest text-xs uppercase mb-3 block\">Message from Director<\/span>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white leading-tight\">\ub4dc\ub9ac\ub294 \ub9d0\uc500<\/h3>\n <\/div>\n \n <div class=\"space-y-8 leading-relaxed text-lg text-gray-300 relative z-10\">\n <p class=\"font-serif text-2xl md:text-3xl leading-snug text-white italic\">\n “\uc74c\uc545\uc740 \ub2e8\uc21c\ud55c \uae30\uc220\uc774 \uc544\ub2c8\ub77c,<br> \n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-jj-teal to-white font-bold not-italic font-sans\">\uc790\uc2e0\uc744 \ud45c\ud604\ud558\uace0 \uc138\uc0c1\uacfc \uc18c\ud1b5\ud558\ub294 \uc5b8\uc5b4<\/span>\uc785\ub2c8\ub2e4.”\n <\/p>\n \n <div class=\"space-y-4 font-light text-base md:text-lg opacity-90\">\n <p>\n \uc800\ud76c \ud559\uc6d0\uc740 \ube60\ub978 \uacb0\uacfc\ubcf4\ub2e4 <strong class=\"text-white font-medium\">\uc62c\ubc14\ub978 \ubc29\ud5a5\uc758 \uc131\uc7a5<\/strong>\uc744 \uc911\uc694\ud558\uac8c \uc5ec\uae41\ub2c8\ub2e4.\n <\/p>\n <p>\n \uc218\uac15\uc0dd \ud55c \ubd84 \ud55c \ubd84\uc758 \uac1c\uc131\uacfc \uac00\ub2a5\uc131\uc744 \uc874\uc911\ud558\uba70, \uae30\ucd08\ubd80\ud130 \ud0c4\ud0c4\ud558\uac8c, \uc624\ub798 \uc74c\uc545\uc744 \ud560 \uc218 \uc788\ub294 \ud798\uc744 \uae30\ub974\ub294 \uad50\uc721\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n\n <div class=\"pt-8 border-t border-white\/10 mt-6 flex flex-col space-y-2\">\n <p class=\"font-medium text-gray-400 text-sm\">\n \uc218\uac15\uc0dd\uc758 \uafc8\uc5d0 \ucc45\uc784\uc744 \ub290\ub07c\ub294 \uacf5\uac04\uc774 \ub418\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div class=\"text-right ml-auto\">\n <p class=\"text-xl font-bold text-white font-serif\">\uc6d0\uc7a5 \uc804 \uc900 \uc601<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"w-full md:w-1\/2 min-h-[400px] md:min-h-full relative order-1 md:order-2 group overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/KakaoTalk_Photo_2026-01-26-22-37-01.jpeg\" \n alt=\"\ud559\uc6d0 \uc804\uacbd\" \n class=\"absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-105 filter brightness-[0.9] group-hover:brightness-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-jj-dark\/80 via-transparent to-transparent md:bg-gradient-to-l md:from-jj-dark\/80 md:to-transparent\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark-sec relative border-b border-white\/5\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Professional <span class=\"text-jj-teal\">Instructors<\/span><\/h2>\n <div class=\"divider-glow w-24 mx-auto\"><\/div>\n <p class=\"text-gray-400 mt-6 font-light\">\n \ud30c\ud2b8\ubcc4 \uc774\ubbf8\uc9c0\ub97c \ud074\ub9ad\ud574 \uc0c1\uc138 \ud504\ub85c\ud544\uc744 \ud655\uc778\ud558\uc138\uc694.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6 px-2\">\n \n <div class=\"reveal popmake-1948 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub4dc\ub7fc-\uc0ac\uc9c4-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n \n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-drum text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">DRUMS<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1947 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.1s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud53c\uc544\ub178-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-music text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">PIANO<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1728 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.2s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\uae30\ud0c0-3-\ub0b5\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-guitar text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">GUITAR<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1950 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.3s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ubca0\uc774\uc2a4-\uc0ac\uc9c4-1-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-bolt text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">BASS<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1949 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.4s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ubcf4\uceec-\ub9c8\uc774\ud06c-\uc0ac\uc9c4-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-microphone-lines text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">VOCAL<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1946 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.5s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ucef4\ud4e8\ud130-\uc74c\uc545-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-sliders text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">MIDI<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark relative\">\n <div class=\"container mx-auto px-6 max-w-4xl relative z-10 reveal\">\n <div class=\"glass-panel rounded-3xl p-10 md:p-14 shadow-2xl relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-jj-teal to-transparent opacity-50\"><\/div>\n \n <h3 class=\"text-2xl font-bold text-white mb-10 flex items-center border-b border-white\/10 pb-6\">\n <span class=\"w-10 h-10 bg-jj-teal rounded-lg flex items-center justify-center mr-4 shadow-[0_0_15px_rgba(23,177,148,0.4)]\">\n <i class=\"fas fa-clipboard-check text-white text-lg\"><\/i>\n <\/span>\n \ub808\uc2a8 \uaddc\uc815 \uc548\ub0b4\n <\/h3>\n \n <ul class=\"space-y-8\">\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <div class=\"w-[1px] h-full bg-white\/10 mx-auto mt-2\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\uc218\uc5c5 \uc9c4\ud589 \ubc29\uc2dd<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \ub808\uc2a8\uc740 1:1 \uac1c\uc778 \uc218\uc5c5\uc73c\ub85c \uc9c4\ud589\ub418\uba70, \uc8fc 1\ud68c 1\uc2dc\uac04\uc529 \uc6d4 4\uc8fc \uae30\uc900\uc73c\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <div class=\"w-[1px] h-full bg-white\/10 mx-auto mt-2\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\ub808\uc2a8 \uc5f0\uae30 \uaddc\uc815<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \ub808\uc2a8 \uc5f0\uae30\ub294 \uc218\uc5c5 \ud558\ub8e8 \uc804\uae4c\uc9c0 \ub9d0\uc500\ud574\uc8fc\uc2dc\uba74 \uc6d4 2\ud68c\uae4c\uc9c0 \uac00\ub2a5\ud569\ub2c8\ub2e4.<br>\n <span class=\"text-red-400\/80 text-sm font-medium mt-1 block\"><i class=\"fas fa-exclamation-circle mr-1\"><\/i> \ub2f9\uc77c \ud1b5\ubcf4 \ubc0f 3\ud68c \uc774\uc0c1 \uc5f0\uae30 \uc2dc \uacb0\uc11d \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/span>\n <\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\uc7a5\uae30 \uc5f0\uae30 \ubc0f \ub300\uae30<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \uac1c\uc778 \uc0ac\uc815\uc73c\ub85c 3\uc8fc \uc774\uc0c1 \uc5f0\uae30\uac00 \ud544\uc694\ud55c \uacbd\uc6b0 \uc0ac\uc804 \ud611\uc758 \uc2dc \uac00\ub2a5\ud569\ub2c8\ub2e4.<br>\n <span class=\"text-gray-500 text-sm mt-1 block\">\ub2e8, \uc774 \uacbd\uc6b0 \ub300\uae30\uc790 \uba85\ub2e8\uc73c\ub85c \uc804\ud658\ub418\uc5b4 \ubcf5\uadc0 \uc2dc \uae30\uc874 \ub808\uc2a8 \uc2dc\uac04\ub300\uac00 \ubcf4\uc7a5\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span>\n <\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <button id=\"back-to-top\" class=\"fixed bottom-10 right-10 z-[9999] w-14 h-14 bg-jj-teal text-white rounded-full shadow-[0_0_20px_rgba(23,177,148,0.4)] flex items-center justify-center hover:bg-white hover:text-jj-teal transition-all duration-300 transform hover:-translate-y-2\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n \/\/ 1. Scroll Reveal Animation\n const reveals = document.querySelectorAll(\".reveal\");\n\n const revealOnScroll = () => {\n const windowHeight = window.innerHeight;\n const elementVisible = 100;\n\n reveals.forEach((reveal) => {\n const elementTop = reveal.getBoundingClientRect().top;\n if (elementTop < windowHeight - elementVisible) {\n reveal.classList.add(\"active\");\n }\n });\n };\n\n window.addEventListener(\"scroll\", revealOnScroll);\n revealOnScroll(); \/\/ Trigger once on load\n\n \/\/ 2. Back to Top Button\n const backToTopBtn = document.getElementById('back-to-top');\n \n window.addEventListener('scroll', () => {\n if (window.scrollY > 500) {\n backToTopBtn.classList.add('show');\n } else {\n backToTopBtn.classList.remove('show');\n }\n });\n\n backToTopBtn.addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n \n \/\/ 3. Tailwind Animation Keyframes (JS injection for fallback)\n const styleSheet = document.createElement(\"style\");\n styleSheet.innerText = `\n @keyframes fadeInUp {\n from { opacity: 0; transform: translate3d(0, 40px, 0); }\n to { opacity: 1; transform: translate3d(0, 0, 0); }\n }\n @keyframes fadeInDown {\n from { opacity: 0; transform: translate3d(0, -40px, 0); }\n to { opacity: 1; transform: translate3d(0, 0, 0); }\n }\n `;\n document.head.appendChild(styleSheet);\n });\n<\/script>\n<\/body> \n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Instructors – JJ Music Academy Our Teachers INSTRUCTORS “Meet the Professional Musicians” Message from Director \ub4dc\ub9ac\ub294 \ub9d0\uc500 “\uc74c\uc545\uc740 \ub2e8\uc21c\ud55c \uae30\uc220\uc774 \uc544\ub2c8\ub77c, \uc790\uc2e0\uc744 \ud45c\ud604\ud558\uace0 \uc138\uc0c1\uacfc \uc18c\ud1b5\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4.” \uc800\ud76c \ud559\uc6d0\uc740 \ube60\ub978 \uacb0\uacfc\ubcf4\ub2e4 \uc62c\ubc14\ub978 \ubc29\ud5a5\uc758 \uc131\uc7a5\uc744 \uc911\uc694\ud558\uac8c \uc5ec\uae41\ub2c8\ub2e4. \uc218\uac15\uc0dd \ud55c \ubd84 \ud55c \ubd84\uc758 \uac1c\uc131\uacfc \uac00\ub2a5\uc131\uc744 \uc874\uc911\ud558\uba70, \uae30\ucd08\ubd80\ud130 \ud0c4\ud0c4\ud558\uac8c, \uc624\ub798 \uc74c\uc545\uc744 \ud560 \uc218 \uc788\ub294 \ud798\uc744 \uae30\ub974\ub294 \uad50\uc721\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4. \uc218\uac15\uc0dd\uc758 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-541","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=541"}],"version-history":[{"count":222,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":3598,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541\/revisions\/3598"}],"wp:attachment":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":541,"date":"2025-11-20T10:42:54","date_gmt":"2025-11-20T10:42:54","guid":{"rendered":"http:\/\/localhost:8888\/wordpress1\/about\/"},"modified":"2026-02-09T13:58:13","modified_gmt":"2026-02-09T13:58:13","slug":"about","status":"publish","type":"page","link":"https:\/\/ccjjmusic.com\/?page_id=541","title":{"rendered":"Instructor"},"content":{"rendered":"\n\n\n\n \n \n Instructors – JJ Music Academy<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'jj-teal': '#17b194',\n 'jj-teal-light': '#2dd4b3',\n 'jj-dark': '#0f1115', \n 'jj-dark-sec': '#161920', \n 'jj-card': '#1e222b', \n },\n fontFamily: {\n sans: ['\"Noto Sans KR\"', 'sans-serif'],\n serif: ['\"Playfair Display\"', 'serif'],\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* \uae30\ubcf8 \uc124\uc815 *\/\n :root { --jj-teal: #17b194; }\n html { -webkit-text-size-adjust: none; scroll-behavior: smooth; }\n body {\n background-color: #0f1115;\n color: #f3f4f6;\n font-family: 'Noto Sans KR', sans-serif !important;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* \ud14d\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654 *\/\n h1, h2, h3, h4, p, span, a { transform: translateZ(0); word-break: keep-all; }\n\n \/* Scroll Reveal Animation Classes *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.5, 0, 0, 1);\n }\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Hero Image Effect *\/\n .hero-img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.85) contrast(1.1); \/* \ubc1d\uae30 \uc870\uc808: \uae00\uc528\uac00 \uc798 \ubcf4\uc774\uac8c \uc57d\uac04\ub9cc \uc5b4\ub461\uac8c *\/\n transform: scale(1.0);\n transition: transform 20s linear;\n }\n .hero-active .hero-img { transform: scale(1.1); }\n\n \/* Glow Text & Elements *\/\n .text-glow { text-shadow: 0 0 20px rgba(23, 177, 148, 0.5); }\n .divider-glow {\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--jj-teal), transparent);\n box-shadow: 0 0 15px var(--jj-teal);\n }\n\n \/* Glass Cards *\/\n .glass-panel {\n background: rgba(30, 34, 43, 0.6);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);\n }\n\n \/* Grid Hover Effect *\/\n .hover-card-zoom {\n transition: all 0.4s ease;\n }\n .hover-card-zoom:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px -5px rgba(23, 177, 148, 0.2);\n border-color: rgba(23, 177, 148, 0.5);\n }\n\n \/* Utilities *\/\n #back-to-top { opacity: 0; visibility: hidden; transition: all 0.3s; }\n #back-to-top.show { opacity: 1; visibility: visible; }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"relative h-[600px] flex items-center justify-center text-center text-white overflow-hidden w-full bg-jj-dark hero-active\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300\uc0ac\uc9c4-1.jpg\" class=\"hero-img\" alt=\"Hero Background\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-black\/60 via-transparent to-[#0f1115] z-10\"><\/div>\n <\/div>\n\n <div class=\"relative z-20 px-6 max-w-5xl mx-auto pt-20\">\n <div class=\"overflow-hidden mb-4\">\n <p class=\"text-jj-teal font-bold tracking-[0.4em] uppercase text-sm md:text-base animate-[fadeInDown_1s_ease-out]\">\n Our Teachers\n <\/p>\n <\/div>\n \n <h1 class=\"text-5xl md:text-7xl lg:text-8xl font-black text-white leading-tight mb-6 drop-shadow-2xl animate-[fadeInUp_1s_ease-out_0.2s_forwards] opacity-0\">\n INSTRUCTORS\n <\/h1>\n \n <p class=\"text-gray-200 text-lg md:text-2xl font-light tracking-wide animate-[fadeInUp_1s_ease-out_0.4s_forwards] opacity-0 font-serif italic\">\n “Meet the Professional Musicians”\n <\/p>\n <\/div>\n \n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 z-20 animate-bounce text-white\/50\">\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark relative border-b border-white\/5\">\n <div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-jj-teal\/5 rounded-full blur-[120px] pointer-events-none\"><\/div>\n\n <div class=\"container mx-auto px-6 max-w-6xl relative z-10\">\n <div class=\"flex flex-col md:flex-row items-stretch gap-0 rounded-[2.5rem] overflow-hidden glass-panel reveal\">\n \n <div class=\"w-full md:w-1\/2 p-10 md:p-16 flex flex-col justify-center order-2 md:order-1 relative\">\n <i class=\"fas fa-quote-left text-4xl text-jj-teal\/20 absolute top-10 left-10\"><\/i>\n \n <div class=\"mb-10 relative z-10\">\n <span class=\"text-jj-teal font-bold tracking-widest text-xs uppercase mb-3 block\">Message from Director<\/span>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white leading-tight\">\ub4dc\ub9ac\ub294 \ub9d0\uc500<\/h3>\n <\/div>\n \n <div class=\"space-y-8 leading-relaxed text-lg text-gray-300 relative z-10\">\n <p class=\"font-serif text-2xl md:text-3xl leading-snug text-white italic\">\n “\uc74c\uc545\uc740 \ub2e8\uc21c\ud55c \uae30\uc220\uc774 \uc544\ub2c8\ub77c,<br> \n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-jj-teal to-white font-bold not-italic font-sans\">\uc790\uc2e0\uc744 \ud45c\ud604\ud558\uace0 \uc138\uc0c1\uacfc \uc18c\ud1b5\ud558\ub294 \uc5b8\uc5b4<\/span>\uc785\ub2c8\ub2e4.”\n <\/p>\n \n <div class=\"space-y-4 font-light text-base md:text-lg opacity-90\">\n <p>\n \uc800\ud76c \ud559\uc6d0\uc740 \ube60\ub978 \uacb0\uacfc\ubcf4\ub2e4 <strong class=\"text-white font-medium\">\uc62c\ubc14\ub978 \ubc29\ud5a5\uc758 \uc131\uc7a5<\/strong>\uc744 \uc911\uc694\ud558\uac8c \uc5ec\uae41\ub2c8\ub2e4.\n <\/p>\n <p>\n \uc218\uac15\uc0dd \ud55c \ubd84 \ud55c \ubd84\uc758 \uac1c\uc131\uacfc \uac00\ub2a5\uc131\uc744 \uc874\uc911\ud558\uba70, \uae30\ucd08\ubd80\ud130 \ud0c4\ud0c4\ud558\uac8c, \uc624\ub798 \uc74c\uc545\uc744 \ud560 \uc218 \uc788\ub294 \ud798\uc744 \uae30\ub974\ub294 \uad50\uc721\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n\n <div class=\"pt-8 border-t border-white\/10 mt-6 flex flex-col space-y-2\">\n <p class=\"font-medium text-gray-400 text-sm\">\n \uc218\uac15\uc0dd\uc758 \uafc8\uc5d0 \ucc45\uc784\uc744 \ub290\ub07c\ub294 \uacf5\uac04\uc774 \ub418\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div class=\"text-right ml-auto\">\n <p class=\"text-xl font-bold text-white font-serif\">\uc6d0\uc7a5 \uc804 \uc900 \uc601<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"w-full md:w-1\/2 min-h-[400px] md:min-h-full relative order-1 md:order-2 group overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/KakaoTalk_Photo_2026-01-26-22-37-01.jpeg\" \n alt=\"\ud559\uc6d0 \uc804\uacbd\" \n class=\"absolute inset-0 w-full h-full object-cover transition duration-1000 group-hover:scale-105 filter brightness-[0.9] group-hover:brightness-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-jj-dark\/80 via-transparent to-transparent md:bg-gradient-to-l md:from-jj-dark\/80 md:to-transparent\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark-sec relative border-b border-white\/5\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Professional <span class=\"text-jj-teal\">Instructors<\/span><\/h2>\n <div class=\"divider-glow w-24 mx-auto\"><\/div>\n <p class=\"text-gray-400 mt-6 font-light\">\n \ud30c\ud2b8\ubcc4 \uc774\ubbf8\uc9c0\ub97c \ud074\ub9ad\ud574 \uc0c1\uc138 \ud504\ub85c\ud544\uc744 \ud655\uc778\ud558\uc138\uc694.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6 px-2\">\n \n <div class=\"reveal popmake-1948 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub4dc\ub7fc-\uc0ac\uc9c4-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n \n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-drum text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">DRUMS<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1947 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.1s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud53c\uc544\ub178-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-music text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">PIANO<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1728 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.2s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\uae30\ud0c0-3-\ub0b5\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-guitar text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">GUITAR<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1950 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.3s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ubca0\uc774\uc2a4-\uc0ac\uc9c4-1-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-bolt text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">BASS<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1949 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.4s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ubcf4\uceec-\ub9c8\uc774\ud06c-\uc0ac\uc9c4-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-microphone-lines text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">VOCAL<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n\n <div class=\"reveal popmake-1946 group relative rounded-2xl overflow-hidden aspect-square bg-jj-card cursor-pointer border border-white\/5 hover:border-jj-teal\/50 transition-colors duration-300\" style=\"transition-delay: 0.5s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ucef4\ud4e8\ud130-\uc74c\uc545-\ud14d\uc2a4\ud2b8-300x300.png\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center backdrop-blur-[2px]\">\n <i class=\"fas fa-sliders text-4xl text-jj-teal mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\"><\/i>\n <span class=\"text-white font-bold text-lg tracking-widest mb-4 font-serif\">MIDI<\/span>\n <span class=\"px-4 py-1.5 border border-jj-teal text-jj-teal text-xs font-bold rounded-full hover:bg-jj-teal hover:text-white transition-colors uppercase\">View Profile<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark relative\">\n <div class=\"container mx-auto px-6 max-w-4xl relative z-10 reveal\">\n <div class=\"glass-panel rounded-3xl p-10 md:p-14 shadow-2xl relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-jj-teal to-transparent opacity-50\"><\/div>\n \n <h3 class=\"text-2xl font-bold text-white mb-10 flex items-center border-b border-white\/10 pb-6\">\n <span class=\"w-10 h-10 bg-jj-teal rounded-lg flex items-center justify-center mr-4 shadow-[0_0_15px_rgba(23,177,148,0.4)]\">\n <i class=\"fas fa-clipboard-check text-white text-lg\"><\/i>\n <\/span>\n \ub808\uc2a8 \uaddc\uc815 \uc548\ub0b4\n <\/h3>\n \n <ul class=\"space-y-8\">\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <div class=\"w-[1px] h-full bg-white\/10 mx-auto mt-2\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\uc218\uc5c5 \uc9c4\ud589 \ubc29\uc2dd<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \ub808\uc2a8\uc740 1:1 \uac1c\uc778 \uc218\uc5c5\uc73c\ub85c \uc9c4\ud589\ub418\uba70, \uc8fc 1\ud68c 1\uc2dc\uac04\uc529 \uc6d4 4\uc8fc \uae30\uc900\uc73c\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <div class=\"w-[1px] h-full bg-white\/10 mx-auto mt-2\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\ub808\uc2a8 \uc5f0\uae30 \uaddc\uc815<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \ub808\uc2a8 \uc5f0\uae30\ub294 \uc218\uc5c5 \ud558\ub8e8 \uc804\uae4c\uc9c0 \ub9d0\uc500\ud574\uc8fc\uc2dc\uba74 \uc6d4 2\ud68c\uae4c\uc9c0 \uac00\ub2a5\ud569\ub2c8\ub2e4.<br>\n <span class=\"text-red-400\/80 text-sm font-medium mt-1 block\"><i class=\"fas fa-exclamation-circle mr-1\"><\/i> \ub2f9\uc77c \ud1b5\ubcf4 \ubc0f 3\ud68c \uc774\uc0c1 \uc5f0\uae30 \uc2dc \uacb0\uc11d \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/span>\n <\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start group\">\n <div class=\"flex-shrink-0 mt-1 mr-5\">\n <div class=\"w-2 h-2 rounded-full bg-jj-teal shadow-[0_0_10px_var(--jj-teal)] group-hover:scale-150 transition-transform duration-300\"><\/div>\n <\/div>\n <div>\n <strong class=\"block text-white text-lg mb-2 group-hover:text-jj-teal transition-colors duration-300\">\uc7a5\uae30 \uc5f0\uae30 \ubc0f \ub300\uae30<\/strong>\n <p class=\"text-gray-400 font-light leading-relaxed\">\n \uac1c\uc778 \uc0ac\uc815\uc73c\ub85c 3\uc8fc \uc774\uc0c1 \uc5f0\uae30\uac00 \ud544\uc694\ud55c \uacbd\uc6b0 \uc0ac\uc804 \ud611\uc758 \uc2dc \uac00\ub2a5\ud569\ub2c8\ub2e4.<br>\n <span class=\"text-gray-500 text-sm mt-1 block\">\ub2e8, \uc774 \uacbd\uc6b0 \ub300\uae30\uc790 \uba85\ub2e8\uc73c\ub85c \uc804\ud658\ub418\uc5b4 \ubcf5\uadc0 \uc2dc \uae30\uc874 \ub808\uc2a8 \uc2dc\uac04\ub300\uac00 \ubcf4\uc7a5\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span>\n <\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <button id=\"back-to-top\" class=\"fixed bottom-10 right-10 z-[9999] w-14 h-14 bg-jj-teal text-white rounded-full shadow-[0_0_20px_rgba(23,177,148,0.4)] flex items-center justify-center hover:bg-white hover:text-jj-teal transition-all duration-300 transform hover:-translate-y-2\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n \/\/ 1. Scroll Reveal Animation\n const reveals = document.querySelectorAll(\".reveal\");\n\n const revealOnScroll = () => {\n const windowHeight = window.innerHeight;\n const elementVisible = 100;\n\n reveals.forEach((reveal) => {\n const elementTop = reveal.getBoundingClientRect().top;\n if (elementTop < windowHeight - elementVisible) {\n reveal.classList.add(\"active\");\n }\n });\n };\n\n window.addEventListener(\"scroll\", revealOnScroll);\n revealOnScroll(); \/\/ Trigger once on load\n\n \/\/ 2. Back to Top Button\n const backToTopBtn = document.getElementById('back-to-top');\n \n window.addEventListener('scroll', () => {\n if (window.scrollY > 500) {\n backToTopBtn.classList.add('show');\n } else {\n backToTopBtn.classList.remove('show');\n }\n });\n\n backToTopBtn.addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n \n \/\/ 3. Tailwind Animation Keyframes (JS injection for fallback)\n const styleSheet = document.createElement(\"style\");\n styleSheet.innerText = `\n @keyframes fadeInUp {\n from { opacity: 0; transform: translate3d(0, 40px, 0); }\n to { opacity: 1; transform: translate3d(0, 0, 0); }\n }\n @keyframes fadeInDown {\n from { opacity: 0; transform: translate3d(0, -40px, 0); }\n to { opacity: 1; transform: translate3d(0, 0, 0); }\n }\n `;\n document.head.appendChild(styleSheet);\n });\n<\/script>\n<\/body> \n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Instructors – JJ Music Academy Our Teachers INSTRUCTORS “Meet the Professional Musicians” Message from Director \ub4dc\ub9ac\ub294 \ub9d0\uc500 “\uc74c\uc545\uc740 \ub2e8\uc21c\ud55c \uae30\uc220\uc774 \uc544\ub2c8\ub77c, \uc790\uc2e0\uc744 \ud45c\ud604\ud558\uace0 \uc138\uc0c1\uacfc \uc18c\ud1b5\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4.” \uc800\ud76c \ud559\uc6d0\uc740 \ube60\ub978 \uacb0\uacfc\ubcf4\ub2e4 \uc62c\ubc14\ub978 \ubc29\ud5a5\uc758 \uc131\uc7a5\uc744 \uc911\uc694\ud558\uac8c \uc5ec\uae41\ub2c8\ub2e4. \uc218\uac15\uc0dd \ud55c \ubd84 \ud55c \ubd84\uc758 \uac1c\uc131\uacfc \uac00\ub2a5\uc131\uc744 \uc874\uc911\ud558\uba70, \uae30\ucd08\ubd80\ud130 \ud0c4\ud0c4\ud558\uac8c, \uc624\ub798 \uc74c\uc545\uc744 \ud560 \uc218 \uc788\ub294 \ud798\uc744 \uae30\ub974\ub294 \uad50\uc721\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4. \uc218\uac15\uc0dd\uc758 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-541","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=541"}],"version-history":[{"count":222,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":3598,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/541\/revisions\/3598"}],"wp:attachment":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}