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@100;300;400;500;700;900&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 },\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-20px)' },\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); }\n\n \/* Scroll Reveal Animation Classes *\/\n .reveal {\n opacity: 0;\n transform: translateY(30px);\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 Slider *\/\n .hero-container {\n height: 750px; \/* PC \ub192\uc774 \uc57d\uac04 \uc99d\uac00 *\/\n position: relative;\n overflow: hidden;\n }\n @media (max-width: 768px) { .hero-container { height: 600px; } }\n\n .slide-item {\n position: absolute; inset: 0; opacity: 0;\n transition: opacity 1.2s ease-in-out;\n z-index: 0;\n }\n .slide-item.active { opacity: 1; z-index: 1; }\n \n .slide-img {\n width: 100%; height: 100%;\n background-size: cover; background-position: center;\n filter: brightness(0.7) contrast(1.1); \/* \uc57d\uac04 \ub354 \uc5b4\ub461\uac8c \ub20c\ub7ec\uc11c \ud14d\uc2a4\ud2b8 \uac15\uc870 *\/\n transform: scale(1.0);\n transition: transform 10s linear; \/* \uc90c\uc778 \ud6a8\uacfc *\/\n }\n .slide-item.active .slide-img { transform: scale(1.1); }\n\n \/* Custom Gradients & Glows *\/\n .hero-gradient {\n background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,0.6) 60%, #0f1115 100%);\n }\n .text-glow {\n text-shadow: 0 0 20px rgba(23, 177, 148, 0.4);\n }\n .divider-glow {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--jj-teal), transparent);\n box-shadow: 0 0 15px var(--jj-teal);\n }\n\n \/* Card Hover Effects *\/\n .glass-card {\n background: rgba(30, 34, 43, 0.6);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .glass-card:hover {\n border-color: rgba(23, 177, 148, 0.5);\n box-shadow: 0 10px 40px -10px rgba(23, 177, 148, 0.15);\n transform: translateY(-5px);\n }\n\n \/* Scroll Down Indicator *\/\n .scroll-down {\n position: absolute; bottom: 40px; left: 50%;\n transform: translateX(-50%); z-index: 20;\n animation: bounce 2s infinite;\n cursor: pointer;\n }\n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {transform: translate(-50%, 0);}\n 40% {transform: translate(-50%, -10px);}\n 60% {transform: translate(-50%, -5px);}\n }\n\n \/* Utility *\/\n #custom-back-to-top {\n opacity: 0; visibility: hidden; transition: all 0.3s;\n }\n #custom-back-to-top.show {\n opacity: 1; visibility: visible;\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero-container flex items-center justify-center text-center relative w-full group\">\n <div class=\"hero-slider absolute inset-0\">\n <div class=\"slide-item active\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/\ud559\uc6d0-\uc804\uacbd-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-10-56-55-002-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-10-56-55-001-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-11-06-42-002-scaled.jpeg');\"><\/div><\/div>\n <div class=\"hero-gradient absolute inset-0 z-[1]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 px-4 w-full max-w-7xl mx-auto mt-10\">\n <div class=\"overflow-hidden mb-4\">\n <p class=\"text-jj-teal font-bold tracking-[0.5em] text-xs md:text-sm uppercase animate-[fadeInDown_1s_ease-out_forwards]\">\n Premium Music Education\n <\/p>\n <\/div>\n \n <h1 class=\"text-5xl md:text-7xl lg:text-9xl font-black text-white leading-tight mb-8 tracking-tighter drop-shadow-2xl opacity-0 animate-[fadeInUp_1s_ease-out_0.3s_forwards]\">\n JJ. MUSIC<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-200 to-gray-500\">ACADEMY<\/span>\n <\/h1>\n\n <p class=\"text-gray-300 text-lg md:text-xl font-light tracking-wide max-w-2xl mx-auto opacity-0 animate-[fadeInUp_1s_ease-out_0.6s_forwards] break-keep\">\n \ucd98\ucc9c \uc2e4\uc6a9\uc74c\uc545\uc758 \uc0c8\ub85c\uc6b4 \uae30\uc900.<br class=\"md:hidden\"> \ub2f9\uc2e0\uc758 \uc74c\uc545\uc801 \uc7a0\uc7ac\ub825\uc744 \uae68\uc6b0\ub294 \ucd5c\uace0\uc758 \uacf5\uac04.\n <\/p>\n\n <div class=\"flex justify-center space-x-3 mt-12 opacity-0 animate-[fadeIn_1s_ease-out_1s_forwards]\" id=\"slider-dots\">\n <button onclick=\"changeSlide(0)\" class=\"w-10 h-1 rounded-full bg-jj-teal transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(1)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(2)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(3)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <\/div>\n <\/div>\n\n <div class=\"scroll-down text-white\/50 hover:text-jj-teal transition-colors\" onclick=\"document.querySelector('#quote-section').scrollIntoView({behavior:'smooth'})\">\n <span class=\"text-[10px] uppercase tracking-widest mb-2 block\">Scroll<\/span>\n <i class=\"fas fa-chevron-down text-lg\"><\/i>\n <\/div>\n <\/section>\n\n <section id=\"quote-section\" class=\"py-32 bg-jj-dark relative overflow-hidden\">\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] bg-jj-teal\/5 blur-[150px] rounded-full pointer-events-none animate-pulse-slow\"><\/div>\n <div class=\"absolute right-0 bottom-0 text-[20rem] text-white\/[0.02] font-black leading-none pointer-events-none select-none font-serif -mb-20 -mr-20\">\u201d<\/div>\n\n <div class=\"container mx-auto px-6 text-center max-w-4xl relative z-10 reveal\">\n <i class=\"fas fa-music text-4xl text-jj-teal mb-8 block opacity-80 animate-float\"><\/i>\n \n <blockquote class=\"text-3xl md:text-5xl font-bold text-white mb-12 leading-snug break-keep\">\n “\ub098\ub294 \uc5ec\uc804\ud788 \uc5f0\uc2b5\ud55c\ub2e4.<br>\n <span class=\"bg-gradient-to-r from-jj-teal via-white to-jj-teal bg-clip-text text-transparent text-glow\">\uc544\uc9c1 \ub354 \uc798\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/span>”\n <\/blockquote>\n \n <cite class=\"text-gray-400 not-italic flex items-center justify-center gap-4 text-sm md:text-base tracking-widest uppercase\">\n <span class=\"w-8 h-[1px] bg-gray-600\"><\/span>\n Pablo Casals\n <span class=\"w-8 h-[1px] bg-gray-600\"><\/span>\n <\/cite>\n \n <div class=\"divider-glow w-24 mx-auto mt-16\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"curriculum\" class=\"py-24 bg-jj-dark-sec border-t border-white\/5\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-12 px-2 reveal\">\n <div>\n <span class=\"text-jj-teal font-bold tracking-wider text-sm\">WHAT’S NEW<\/span>\n <h2 class=\"text-4xl md:text-5xl font-bold text-white mt-2\">Notice & <span class=\"text-gray-500\">Curriculum<\/span><\/h2>\n <\/div>\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=542\" class=\"hidden md:inline-flex items-center text-gray-400 hover:text-white transition-colors mt-4 md:mt-0 group\">\n \uc804\uccb4 \ucee4\ub9ac\ud058\ub7fc \ubcf4\uae30 <i class=\"fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform text-jj-teal\"><\/i>\n <\/a>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=543\" class=\"reveal group relative h-[450px] rounded-[2rem] overflow-hidden block glass-card\">\n <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300-\uac74\ubc18-\ub9c8\uc774\ud06c-\uc0ac\uc9c4.jpg');\"><\/div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-[#0f1115] via-[#0f1115]\/60 to-transparent opacity-90 transition-opacity duration-300\"><\/div>\n \n <div class=\"absolute inset-0 p-10 flex flex-col justify-end items-start z-10\">\n <div class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\n <span class=\"text-xs font-bold tracking-widest text-jj-teal border border-jj-teal\/30 px-3 py-1 rounded-full mb-4 inline-block bg-jj-teal\/10\">NOTICE<\/span>\n <h3 class=\"text-4xl font-bold text-white mb-2\">\uacf5\uc9c0\uc0ac\ud56d<\/h3>\n <p class=\"text-gray-400 text-sm mb-6 max-w-xs line-clamp-2\">\uc544\uce74\ub370\ubbf8\uc758 \ucd5c\uc2e0 \uc18c\uc2dd\uacfc \uc77c\uc815, \uc911\uc694\ud55c \uc548\ub0b4\uc0ac\ud56d\uc744 \ud655\uc778\ud558\uc138\uc694.<\/p>\n <span class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center text-white group-hover:bg-jj-teal group-hover:scale-110 transition-all duration-300\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=542\" class=\"reveal group relative h-[450px] rounded-[2rem] overflow-hidden block glass-card\" style=\"transition-delay: 0.1s;\">\n <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\uacf5\uc5f0\uc0ac\uc9c4-.jpg');\"><\/div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-[#0f1115] via-[#0f1115]\/60 to-transparent opacity-90 transition-opacity duration-300\"><\/div>\n \n <div class=\"absolute inset-0 p-10 flex flex-col justify-end items-start z-10\">\n <div class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\n <span class=\"text-xs font-bold tracking-widest text-purple-400 border border-purple-400\/30 px-3 py-1 rounded-full mb-4 inline-block bg-purple-400\/10\">CLASS<\/span>\n <h3 class=\"text-4xl font-bold text-white mb-2\">\ucee4\ub9ac\ud058\ub7fc<\/h3>\n <p class=\"text-gray-400 text-sm mb-6 max-w-xs line-clamp-2\">\ubcf4\uceec, \uae30\uc545, \ubbf8\ub514, \uc791\uace1 \ub4f1 \uac01 \ubd84\uc57c\ubcc4 \uccb4\uacc4\uc801\uc778 \uc804\ubb38 \uad50\uc721 \uacfc\uc815.<\/p>\n <span class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center text-white group-hover:bg-purple-500 group-hover:scale-110 transition-all duration-300\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-32 bg-jj-dark relative border-t border-white\/5 overflow-hidden\">\n <div class=\"absolute right-0 top-0 w-1\/3 h-full bg-gradient-to-l from-jj-teal\/5 to-transparent pointer-events-none\"><\/div>\n\n <div class=\"container mx-auto px-6 max-w-7xl relative z-10\">\n <div class=\"flex flex-col lg:flex-row items-center gap-16 lg:gap-24\">\n \n <div class=\"lg:w-1\/2 order-2 lg:order-1 reveal\">\n <h2 class=\"text-5xl md:text-6xl font-black mb-8 text-white leading-[1.1]\">\n Professional <br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-jj-teal to-jj-teal-light\">Instructors<\/span>\n <\/h2>\n <div class=\"space-y-6 text-gray-300 leading-relaxed text-lg font-light\">\n <p class=\"border-l-2 border-jj-teal pl-6\">\n \uac01 \ubd84\uc57c <b class=\"text-white\">\ucd5c\uace0\uc758 \uc804\ubb38\uc131<\/b>\uc744 \uac16\ucd98 \uac15\uc0ac\uc9c4\uc774<br> \uc5ec\ub7ec\ubd84\uc758 \uc74c\uc545\uc801 \uc5ec\uc815\uc744 \ud568\uaed8\ud569\ub2c8\ub2e4.\n <\/p>\n <p class=\"opacity-80 pl-6\">\n \ub2e8\uc21c\ud55c \uae30\uc220 \uc804\uc218\ub97c \ub118\uc5b4, \uc74c\uc545\uc801 \uc601\uac10\uc744 \uacf5\uc720\ud558\uace0<br> \uac1c\uac1c\uc778\uc758 \uc7a0\uc7ac\ub825\uc744 \ucd5c\ub300\ub85c \ub04c\uc5b4\uc62c\ub9ac\ub294 1:1 \ub9de\ucda4\ud615 \uc9c0\ub3c4.\n <\/p>\n <\/div>\n \n <a href=\"http:\/\/ccjjmusic.com\/?page_id=541\" class=\"group inline-flex items-center mt-12 px-8 py-4 bg-transparent border border-jj-teal\/50 text-jj-teal rounded-none hover:bg-jj-teal hover:text-white transition-all duration-300 font-bold uppercase tracking-wider text-sm relative overflow-hidden\">\n <span class=\"relative z-10\">\uac15\uc0ac\uc9c4 \ud504\ub85c\ud544 \ud655\uc778<\/span>\n <div class=\"absolute inset-0 bg-jj-teal transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out z-0\"><\/div>\n <i class=\"fas fa-long-arrow-alt-right ml-3 relative z-10 transform group-hover:translate-x-1 transition-transform\"><\/i>\n <\/a>\n <\/div>\n \n <div class=\"lg:w-1\/2 w-full order-1 lg:order-2 reveal\" style=\"transition-delay: 0.2s;\">\n <div class=\"relative group\">\n <div class=\"absolute -inset-4 border border-jj-teal\/30 rounded-3xl transform rotate-3 group-hover:rotate-0 transition-transform duration-500\"><\/div>\n <div class=\"absolute -inset-4 border border-white\/5 rounded-3xl transform -rotate-2 group-hover:rotate-0 transition-transform duration-500\"><\/div>\n \n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl aspect-[4\/3] transform group-hover:scale-[1.01] transition-transform duration-500\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300-\uac74\ubc18-\ub9c8\uc774\ud06c-\uc0ac\uc9c4.jpg\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 filter saturate-0 group-hover:saturate-100\">\n <div class=\"absolute inset-0 bg-jj-teal\/20 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark-sec border-t border-white\/5\" id=\"gallery\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"text-center mb-16 reveal\">\n <span class=\"text-jj-teal font-bold tracking-[0.3em] text-xs uppercase block mb-4\">Space<\/span>\n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">Academy <span class=\"text-gray-600 italic\">Gallery<\/span><\/h2>\n <p class=\"text-gray-400 font-light\">\uc74c\uc545\uc5d0\ub9cc \uc628\uc804\ud788 \uc9d1\uc911\ud560 \uc218 \uc788\ub294 \ucd5c\uc801\uc758 \ud658\uacbd<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud569\uc8fc\uc2e4-\uc804\uacbd.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ud569\uc8fc\uc2e4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.1s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub4dc\ub7fc-\uc5f0\uc2b5\uc2e4.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ub4dc\ub7fc\uc2e4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.2s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub808\uc2a8\uc2e4-\uad6c\uc5ed.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ub808\uc2a8\uc2e4 \ubcf5\ub3c4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.3s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud53c\uc544\ub178-\uc5f0\uc2b5\uc2e4.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ud53c\uc544\ub178\uc2e4<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"text-center mt-12\">\n <a href=\"https:\/\/ccjjmusic.com\/?page_id=543#gallery\" class=\"inline-block text-gray-500 hover:text-jj-teal transition-colors text-sm tracking-widest border-b border-transparent hover:border-jj-teal pb-1\">VIEW ALL GALLERY<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <button id=\"custom-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 \/\/ 1. Scroll Reveal Animation Logic (\uc2a4\ud06c\ub864 \uc2dc \uc694\uc18c \ub4f1\uc7a5)\n document.addEventListener(\"DOMContentLoaded\", function() {\n const reveals = document.querySelectorAll(\".reveal\");\n\n const revealOnScroll = () => {\n const windowHeight = window.innerHeight;\n const elementVisible = 150;\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 \/\/ \ucd08\uae30 \ub85c\ub4dc \uc2dc \ud55c \ubc88 \uc2e4\ud589\n revealOnScroll();\n\n \/\/ 2. Back to Top Logic\n const backToTopBtn = document.getElementById('custom-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\n \/\/ 3. Slider Logic (\uae30\uc874 \uc720\uc9c0\ud558\ub418 \ubd80\ub4dc\ub7fd\uac8c \uac1c\uc120)\n (function() {\n const slides = document.querySelectorAll('.slide-item');\n const dots = document.querySelectorAll('#slider-dots button');\n \n if (slides.length === 0) return;\n\n let currentSlide = 0;\n let slideInterval;\n\n function showSlide(index) {\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => {\n dot.classList.remove('bg-jj-teal', 'w-10'); \n dot.classList.add('bg-white\/20', 'w-2');\n });\n\n if(slides[index]) slides[index].classList.add('active');\n if(dots[index]) {\n dots[index].classList.remove('bg-white\/20', 'w-2');\n dots[index].classList.add('bg-jj-teal', 'w-10');\n }\n currentSlide = index;\n }\n\n function nextSlide() {\n showSlide((currentSlide + 1) % slides.length);\n }\n\n window.changeSlide = function(index) {\n clearInterval(slideInterval);\n showSlide(index);\n slideInterval = setInterval(nextSlide, 6000); \/\/ 6\ucd08 \uac04\uaca9\n };\n\n slideInterval = setInterval(nextSlide, 6000);\n \n \/\/ Tailwind animation custom keyframes add via style tag (for fadeIn)\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 @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\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>JJ Music Academy Premium Music Education JJ. MUSICACADEMY \ucd98\ucc9c \uc2e4\uc6a9\uc74c\uc545\uc758 \uc0c8\ub85c\uc6b4 \uae30\uc900. \ub2f9\uc2e0\uc758 \uc74c\uc545\uc801 \uc7a0\uc7ac\ub825\uc744 \uae68\uc6b0\ub294 \ucd5c\uace0\uc758 \uacf5\uac04. Scroll \u201d “\ub098\ub294 \uc5ec\uc804\ud788 \uc5f0\uc2b5\ud55c\ub2e4. \uc544\uc9c1 \ub354 \uc798\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.” Pablo Casals WHAT’S NEW Notice & Curriculum \uc804\uccb4 \ucee4\ub9ac\ud058\ub7fc \ubcf4\uae30 NOTICE \uacf5\uc9c0\uc0ac\ud56d \uc544\uce74\ub370\ubbf8\uc758 \ucd5c\uc2e0 \uc18c\uc2dd\uacfc \uc77c\uc815, \uc911\uc694\ud55c \uc548\ub0b4\uc0ac\ud56d\uc744 \ud655\uc778\ud558\uc138\uc694. CLASS \ucee4\ub9ac\ud058\ub7fc \ubcf4\uceec, \uae30\uc545, \ubbf8\ub514, \uc791\uace1 \ub4f1 […]<\/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-540","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540","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=540"}],"version-history":[{"count":249,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540\/revisions\/3575"}],"wp:attachment":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":540,"date":"2025-11-20T10:42:54","date_gmt":"2025-11-20T10:42:54","guid":{"rendered":"http:\/\/localhost:8888\/wordpress1\/home\/"},"modified":"2026-02-09T12:19:33","modified_gmt":"2026-02-09T12:19:33","slug":"home","status":"publish","type":"page","link":"https:\/\/ccjjmusic.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n 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@100;300;400;500;700;900&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 },\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-20px)' },\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); }\n\n \/* Scroll Reveal Animation Classes *\/\n .reveal {\n opacity: 0;\n transform: translateY(30px);\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 Slider *\/\n .hero-container {\n height: 750px; \/* PC \ub192\uc774 \uc57d\uac04 \uc99d\uac00 *\/\n position: relative;\n overflow: hidden;\n }\n @media (max-width: 768px) { .hero-container { height: 600px; } }\n\n .slide-item {\n position: absolute; inset: 0; opacity: 0;\n transition: opacity 1.2s ease-in-out;\n z-index: 0;\n }\n .slide-item.active { opacity: 1; z-index: 1; }\n \n .slide-img {\n width: 100%; height: 100%;\n background-size: cover; background-position: center;\n filter: brightness(0.7) contrast(1.1); \/* \uc57d\uac04 \ub354 \uc5b4\ub461\uac8c \ub20c\ub7ec\uc11c \ud14d\uc2a4\ud2b8 \uac15\uc870 *\/\n transform: scale(1.0);\n transition: transform 10s linear; \/* \uc90c\uc778 \ud6a8\uacfc *\/\n }\n .slide-item.active .slide-img { transform: scale(1.1); }\n\n \/* Custom Gradients & Glows *\/\n .hero-gradient {\n background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,0.6) 60%, #0f1115 100%);\n }\n .text-glow {\n text-shadow: 0 0 20px rgba(23, 177, 148, 0.4);\n }\n .divider-glow {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--jj-teal), transparent);\n box-shadow: 0 0 15px var(--jj-teal);\n }\n\n \/* Card Hover Effects *\/\n .glass-card {\n background: rgba(30, 34, 43, 0.6);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .glass-card:hover {\n border-color: rgba(23, 177, 148, 0.5);\n box-shadow: 0 10px 40px -10px rgba(23, 177, 148, 0.15);\n transform: translateY(-5px);\n }\n\n \/* Scroll Down Indicator *\/\n .scroll-down {\n position: absolute; bottom: 40px; left: 50%;\n transform: translateX(-50%); z-index: 20;\n animation: bounce 2s infinite;\n cursor: pointer;\n }\n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {transform: translate(-50%, 0);}\n 40% {transform: translate(-50%, -10px);}\n 60% {transform: translate(-50%, -5px);}\n }\n\n \/* Utility *\/\n #custom-back-to-top {\n opacity: 0; visibility: hidden; transition: all 0.3s;\n }\n #custom-back-to-top.show {\n opacity: 1; visibility: visible;\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero-container flex items-center justify-center text-center relative w-full group\">\n <div class=\"hero-slider absolute inset-0\">\n <div class=\"slide-item active\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/\ud559\uc6d0-\uc804\uacbd-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-10-56-55-002-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-10-56-55-001-scaled.jpeg');\"><\/div><\/div>\n <div class=\"slide-item\"><div class=\"slide-img\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2025\/11\/KakaoTalk_Photo_2025-11-22-11-06-42-002-scaled.jpeg');\"><\/div><\/div>\n <div class=\"hero-gradient absolute inset-0 z-[1]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 px-4 w-full max-w-7xl mx-auto mt-10\">\n <div class=\"overflow-hidden mb-4\">\n <p class=\"text-jj-teal font-bold tracking-[0.5em] text-xs md:text-sm uppercase animate-[fadeInDown_1s_ease-out_forwards]\">\n Premium Music Education\n <\/p>\n <\/div>\n \n <h1 class=\"text-5xl md:text-7xl lg:text-9xl font-black text-white leading-tight mb-8 tracking-tighter drop-shadow-2xl opacity-0 animate-[fadeInUp_1s_ease-out_0.3s_forwards]\">\n JJ. MUSIC<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-200 to-gray-500\">ACADEMY<\/span>\n <\/h1>\n\n <p class=\"text-gray-300 text-lg md:text-xl font-light tracking-wide max-w-2xl mx-auto opacity-0 animate-[fadeInUp_1s_ease-out_0.6s_forwards] break-keep\">\n \ucd98\ucc9c \uc2e4\uc6a9\uc74c\uc545\uc758 \uc0c8\ub85c\uc6b4 \uae30\uc900.<br class=\"md:hidden\"> \ub2f9\uc2e0\uc758 \uc74c\uc545\uc801 \uc7a0\uc7ac\ub825\uc744 \uae68\uc6b0\ub294 \ucd5c\uace0\uc758 \uacf5\uac04.\n <\/p>\n\n <div class=\"flex justify-center space-x-3 mt-12 opacity-0 animate-[fadeIn_1s_ease-out_1s_forwards]\" id=\"slider-dots\">\n <button onclick=\"changeSlide(0)\" class=\"w-10 h-1 rounded-full bg-jj-teal transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(1)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(2)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <button onclick=\"changeSlide(3)\" class=\"w-2 h-1 rounded-full bg-white\/20 hover:bg-white transition-all duration-300\"><\/button>\n <\/div>\n <\/div>\n\n <div class=\"scroll-down text-white\/50 hover:text-jj-teal transition-colors\" onclick=\"document.querySelector('#quote-section').scrollIntoView({behavior:'smooth'})\">\n <span class=\"text-[10px] uppercase tracking-widest mb-2 block\">Scroll<\/span>\n <i class=\"fas fa-chevron-down text-lg\"><\/i>\n <\/div>\n <\/section>\n\n <section id=\"quote-section\" class=\"py-32 bg-jj-dark relative overflow-hidden\">\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] bg-jj-teal\/5 blur-[150px] rounded-full pointer-events-none animate-pulse-slow\"><\/div>\n <div class=\"absolute right-0 bottom-0 text-[20rem] text-white\/[0.02] font-black leading-none pointer-events-none select-none font-serif -mb-20 -mr-20\">\u201d<\/div>\n\n <div class=\"container mx-auto px-6 text-center max-w-4xl relative z-10 reveal\">\n <i class=\"fas fa-music text-4xl text-jj-teal mb-8 block opacity-80 animate-float\"><\/i>\n \n <blockquote class=\"text-3xl md:text-5xl font-bold text-white mb-12 leading-snug break-keep\">\n “\ub098\ub294 \uc5ec\uc804\ud788 \uc5f0\uc2b5\ud55c\ub2e4.<br>\n <span class=\"bg-gradient-to-r from-jj-teal via-white to-jj-teal bg-clip-text text-transparent text-glow\">\uc544\uc9c1 \ub354 \uc798\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/span>”\n <\/blockquote>\n \n <cite class=\"text-gray-400 not-italic flex items-center justify-center gap-4 text-sm md:text-base tracking-widest uppercase\">\n <span class=\"w-8 h-[1px] bg-gray-600\"><\/span>\n Pablo Casals\n <span class=\"w-8 h-[1px] bg-gray-600\"><\/span>\n <\/cite>\n \n <div class=\"divider-glow w-24 mx-auto mt-16\"><\/div>\n <\/div>\n <\/section>\n\n <section id=\"curriculum\" class=\"py-24 bg-jj-dark-sec border-t border-white\/5\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-12 px-2 reveal\">\n <div>\n <span class=\"text-jj-teal font-bold tracking-wider text-sm\">WHAT’S NEW<\/span>\n <h2 class=\"text-4xl md:text-5xl font-bold text-white mt-2\">Notice & <span class=\"text-gray-500\">Curriculum<\/span><\/h2>\n <\/div>\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=542\" class=\"hidden md:inline-flex items-center text-gray-400 hover:text-white transition-colors mt-4 md:mt-0 group\">\n \uc804\uccb4 \ucee4\ub9ac\ud058\ub7fc \ubcf4\uae30 <i class=\"fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform text-jj-teal\"><\/i>\n <\/a>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=543\" class=\"reveal group relative h-[450px] rounded-[2rem] overflow-hidden block glass-card\">\n <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300-\uac74\ubc18-\ub9c8\uc774\ud06c-\uc0ac\uc9c4.jpg');\"><\/div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-[#0f1115] via-[#0f1115]\/60 to-transparent opacity-90 transition-opacity duration-300\"><\/div>\n \n <div class=\"absolute inset-0 p-10 flex flex-col justify-end items-start z-10\">\n <div class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\n <span class=\"text-xs font-bold tracking-widest text-jj-teal border border-jj-teal\/30 px-3 py-1 rounded-full mb-4 inline-block bg-jj-teal\/10\">NOTICE<\/span>\n <h3 class=\"text-4xl font-bold text-white mb-2\">\uacf5\uc9c0\uc0ac\ud56d<\/h3>\n <p class=\"text-gray-400 text-sm mb-6 max-w-xs line-clamp-2\">\uc544\uce74\ub370\ubbf8\uc758 \ucd5c\uc2e0 \uc18c\uc2dd\uacfc \uc77c\uc815, \uc911\uc694\ud55c \uc548\ub0b4\uc0ac\ud56d\uc744 \ud655\uc778\ud558\uc138\uc694.<\/p>\n <span class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center text-white group-hover:bg-jj-teal group-hover:scale-110 transition-all duration-300\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"http:\/\/ccjjmusic.com\/?page_id=542\" class=\"reveal group relative h-[450px] rounded-[2rem] overflow-hidden block glass-card\" style=\"transition-delay: 0.1s;\">\n <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110\" style=\"background-image: url('https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\uacf5\uc5f0\uc0ac\uc9c4-.jpg');\"><\/div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-[#0f1115] via-[#0f1115]\/60 to-transparent opacity-90 transition-opacity duration-300\"><\/div>\n \n <div class=\"absolute inset-0 p-10 flex flex-col justify-end items-start z-10\">\n <div class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\n <span class=\"text-xs font-bold tracking-widest text-purple-400 border border-purple-400\/30 px-3 py-1 rounded-full mb-4 inline-block bg-purple-400\/10\">CLASS<\/span>\n <h3 class=\"text-4xl font-bold text-white mb-2\">\ucee4\ub9ac\ud058\ub7fc<\/h3>\n <p class=\"text-gray-400 text-sm mb-6 max-w-xs line-clamp-2\">\ubcf4\uceec, \uae30\uc545, \ubbf8\ub514, \uc791\uace1 \ub4f1 \uac01 \ubd84\uc57c\ubcc4 \uccb4\uacc4\uc801\uc778 \uc804\ubb38 \uad50\uc721 \uacfc\uc815.<\/p>\n <span class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center text-white group-hover:bg-purple-500 group-hover:scale-110 transition-all duration-300\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-32 bg-jj-dark relative border-t border-white\/5 overflow-hidden\">\n <div class=\"absolute right-0 top-0 w-1\/3 h-full bg-gradient-to-l from-jj-teal\/5 to-transparent pointer-events-none\"><\/div>\n\n <div class=\"container mx-auto px-6 max-w-7xl relative z-10\">\n <div class=\"flex flex-col lg:flex-row items-center gap-16 lg:gap-24\">\n \n <div class=\"lg:w-1\/2 order-2 lg:order-1 reveal\">\n <h2 class=\"text-5xl md:text-6xl font-black mb-8 text-white leading-[1.1]\">\n Professional <br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-jj-teal to-jj-teal-light\">Instructors<\/span>\n <\/h2>\n <div class=\"space-y-6 text-gray-300 leading-relaxed text-lg font-light\">\n <p class=\"border-l-2 border-jj-teal pl-6\">\n \uac01 \ubd84\uc57c <b class=\"text-white\">\ucd5c\uace0\uc758 \uc804\ubb38\uc131<\/b>\uc744 \uac16\ucd98 \uac15\uc0ac\uc9c4\uc774<br> \uc5ec\ub7ec\ubd84\uc758 \uc74c\uc545\uc801 \uc5ec\uc815\uc744 \ud568\uaed8\ud569\ub2c8\ub2e4.\n <\/p>\n <p class=\"opacity-80 pl-6\">\n \ub2e8\uc21c\ud55c \uae30\uc220 \uc804\uc218\ub97c \ub118\uc5b4, \uc74c\uc545\uc801 \uc601\uac10\uc744 \uacf5\uc720\ud558\uace0<br> \uac1c\uac1c\uc778\uc758 \uc7a0\uc7ac\ub825\uc744 \ucd5c\ub300\ub85c \ub04c\uc5b4\uc62c\ub9ac\ub294 1:1 \ub9de\ucda4\ud615 \uc9c0\ub3c4.\n <\/p>\n <\/div>\n \n <a href=\"http:\/\/ccjjmusic.com\/?page_id=541\" class=\"group inline-flex items-center mt-12 px-8 py-4 bg-transparent border border-jj-teal\/50 text-jj-teal rounded-none hover:bg-jj-teal hover:text-white transition-all duration-300 font-bold uppercase tracking-wider text-sm relative overflow-hidden\">\n <span class=\"relative z-10\">\uac15\uc0ac\uc9c4 \ud504\ub85c\ud544 \ud655\uc778<\/span>\n <div class=\"absolute inset-0 bg-jj-teal transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out z-0\"><\/div>\n <i class=\"fas fa-long-arrow-alt-right ml-3 relative z-10 transform group-hover:translate-x-1 transition-transform\"><\/i>\n <\/a>\n <\/div>\n \n <div class=\"lg:w-1\/2 w-full order-1 lg:order-2 reveal\" style=\"transition-delay: 0.2s;\">\n <div class=\"relative group\">\n <div class=\"absolute -inset-4 border border-jj-teal\/30 rounded-3xl transform rotate-3 group-hover:rotate-0 transition-transform duration-500\"><\/div>\n <div class=\"absolute -inset-4 border border-white\/5 rounded-3xl transform -rotate-2 group-hover:rotate-0 transition-transform duration-500\"><\/div>\n \n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl aspect-[4\/3] transform group-hover:scale-[1.01] transition-transform duration-500\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/\ubb34\ub300-\uac74\ubc18-\ub9c8\uc774\ud06c-\uc0ac\uc9c4.jpg\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 filter saturate-0 group-hover:saturate-100\">\n <div class=\"absolute inset-0 bg-jj-teal\/20 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-jj-dark-sec border-t border-white\/5\" id=\"gallery\">\n <div class=\"container mx-auto px-6 max-w-7xl\">\n <div class=\"text-center mb-16 reveal\">\n <span class=\"text-jj-teal font-bold tracking-[0.3em] text-xs uppercase block mb-4\">Space<\/span>\n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">Academy <span class=\"text-gray-600 italic\">Gallery<\/span><\/h2>\n <p class=\"text-gray-400 font-light\">\uc74c\uc545\uc5d0\ub9cc \uc628\uc804\ud788 \uc9d1\uc911\ud560 \uc218 \uc788\ub294 \ucd5c\uc801\uc758 \ud658\uacbd<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud569\uc8fc\uc2e4-\uc804\uacbd.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ud569\uc8fc\uc2e4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.1s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub4dc\ub7fc-\uc5f0\uc2b5\uc2e4.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ub4dc\ub7fc\uc2e4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.2s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ub808\uc2a8\uc2e4-\uad6c\uc5ed.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ub808\uc2a8\uc2e4 \ubcf5\ub3c4<\/span>\n <\/div>\n <\/div>\n <div class=\"reveal group relative rounded-xl overflow-hidden aspect-square bg-gray-900 cursor-pointer\" style=\"transition-delay: 0.3s;\">\n <img decoding=\"async\" src=\"https:\/\/ccjjmusic.com\/wp-content\/uploads\/2026\/01\/home_\ud53c\uc544\ub178-\uc5f0\uc2b5\uc2e4.png\" class=\"w-full h-full object-cover opacity-100 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-transparent transition-colors\"><\/div>\n <div class=\"absolute bottom-4 left-4\">\n <span class=\"text-white font-bold text-lg drop-shadow-md translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300\">\ud53c\uc544\ub178\uc2e4<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"text-center mt-12\">\n <a href=\"https:\/\/ccjjmusic.com\/?page_id=543#gallery\" class=\"inline-block text-gray-500 hover:text-jj-teal transition-colors text-sm tracking-widest border-b border-transparent hover:border-jj-teal pb-1\">VIEW ALL GALLERY<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <button id=\"custom-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 \/\/ 1. Scroll Reveal Animation Logic (\uc2a4\ud06c\ub864 \uc2dc \uc694\uc18c \ub4f1\uc7a5)\n document.addEventListener(\"DOMContentLoaded\", function() {\n const reveals = document.querySelectorAll(\".reveal\");\n\n const revealOnScroll = () => {\n const windowHeight = window.innerHeight;\n const elementVisible = 150;\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 \/\/ \ucd08\uae30 \ub85c\ub4dc \uc2dc \ud55c \ubc88 \uc2e4\ud589\n revealOnScroll();\n\n \/\/ 2. Back to Top Logic\n const backToTopBtn = document.getElementById('custom-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\n \/\/ 3. Slider Logic (\uae30\uc874 \uc720\uc9c0\ud558\ub418 \ubd80\ub4dc\ub7fd\uac8c \uac1c\uc120)\n (function() {\n const slides = document.querySelectorAll('.slide-item');\n const dots = document.querySelectorAll('#slider-dots button');\n \n if (slides.length === 0) return;\n\n let currentSlide = 0;\n let slideInterval;\n\n function showSlide(index) {\n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => {\n dot.classList.remove('bg-jj-teal', 'w-10'); \n dot.classList.add('bg-white\/20', 'w-2');\n });\n\n if(slides[index]) slides[index].classList.add('active');\n if(dots[index]) {\n dots[index].classList.remove('bg-white\/20', 'w-2');\n dots[index].classList.add('bg-jj-teal', 'w-10');\n }\n currentSlide = index;\n }\n\n function nextSlide() {\n showSlide((currentSlide + 1) % slides.length);\n }\n\n window.changeSlide = function(index) {\n clearInterval(slideInterval);\n showSlide(index);\n slideInterval = setInterval(nextSlide, 6000); \/\/ 6\ucd08 \uac04\uaca9\n };\n\n slideInterval = setInterval(nextSlide, 6000);\n \n \/\/ Tailwind animation custom keyframes add via style tag (for fadeIn)\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 @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\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>JJ Music Academy Premium Music Education JJ. MUSICACADEMY \ucd98\ucc9c \uc2e4\uc6a9\uc74c\uc545\uc758 \uc0c8\ub85c\uc6b4 \uae30\uc900. \ub2f9\uc2e0\uc758 \uc74c\uc545\uc801 \uc7a0\uc7ac\ub825\uc744 \uae68\uc6b0\ub294 \ucd5c\uace0\uc758 \uacf5\uac04. Scroll \u201d “\ub098\ub294 \uc5ec\uc804\ud788 \uc5f0\uc2b5\ud55c\ub2e4. \uc544\uc9c1 \ub354 \uc798\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.” Pablo Casals WHAT’S NEW Notice & Curriculum \uc804\uccb4 \ucee4\ub9ac\ud058\ub7fc \ubcf4\uae30 NOTICE \uacf5\uc9c0\uc0ac\ud56d \uc544\uce74\ub370\ubbf8\uc758 \ucd5c\uc2e0 \uc18c\uc2dd\uacfc \uc77c\uc815, \uc911\uc694\ud55c \uc548\ub0b4\uc0ac\ud56d\uc744 \ud655\uc778\ud558\uc138\uc694. CLASS \ucee4\ub9ac\ud058\ub7fc \ubcf4\uceec, \uae30\uc545, \ubbf8\ub514, \uc791\uace1 \ub4f1 […]<\/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-540","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540","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=540"}],"version-history":[{"count":249,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=\/wp\/v2\/pages\/540\/revisions\/3575"}],"wp:attachment":[{"href":"https:\/\/ccjjmusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}