{"id":1341,"date":"2025-10-01T00:51:39","date_gmt":"2025-10-01T00:51:39","guid":{"rendered":"https:\/\/bluebrownrecords.com\/home\/"},"modified":"2025-11-07T03:26:07","modified_gmt":"2025-11-07T03:26:07","slug":"home","status":"publish","type":"page","link":"https:\/\/bluebrownrecords.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1341\" class=\"elementor elementor-1341 elementor-27\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0870e9e e-flex e-con-boxed e-con e-parent\" data-id=\"0870e9e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b77130f elementor-widget elementor-widget-html\" data-id=\"b77130f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>* {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    \/* \ud31d\uc5c5 \uc624\ubc84\ub808\uc774 *\/\n    .intro-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        background: #000;\n        z-index: 9999;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        animation: fadeOut 0.8s ease-out 3.2s forwards;\n    }\n\n    @keyframes fadeOut {\n        to {\n            opacity: 0;\n            visibility: hidden;\n        }\n    }\n\n    .intro-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    \/* \ub85c\uace0 \ucee8\ud14c\uc774\ub108 *\/\n    .logo-wrapper {\n        position: relative;\n        animation: elegantEntrance 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        opacity: 0;\n        animation-delay: 1.8s;\n    }\n\n    @keyframes elegantEntrance {\n        0% {\n            opacity: 0;\n            transform: scale(0.92) translateY(20px);\n        }\n        70% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 1;\n            transform: scale(1) translateY(0);\n        }\n    }\n\n    \/* \ub85c\uace0 \uc774\ubbf8\uc9c0 \uc124\uc815 *\/\n    .logo-image {\n        max-width: 280px;\n        max-height: 280px;\n        width: auto;\n        height: auto;\n    }\n\n    \/* \uc774\ubbf8\uc9c0\uac00 \ub85c\ub4dc\ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0 \ud14d\uc2a4\ud2b8 \ub85c\uace0 \ud45c\uc2dc *\/\n    .logo-text {\n        font-size: 120px;\n        font-weight: 700;\n        color: #F2E1CB;\n        letter-spacing: 20px;\n        text-transform: uppercase;\n        display: none;\n    }\n\n    \/* \ubbf8\ub2c8\uba40\ud55c \ub77c\uc778 \ud6a8\uacfc *\/\n    .reveal-line {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 1px;\n        height: 0;\n        background: linear-gradient(180deg, \n            transparent, \n            rgba(242, 225, 203, 0.6),\n            rgba(242, 225, 203, 0.4),\n            transparent);\n        animation: revealHeight 1.5s ease-out forwards;\n    }\n\n    @keyframes revealHeight {\n        0% {\n            height: 0;\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            height: 80vh;\n            opacity: 0;\n        }\n    }\n\n    \/* \uac00\ub85c \ub77c\uc778 *\/\n    .reveal-line.horizontal {\n        width: 0;\n        height: 1px;\n        background: linear-gradient(90deg, \n            transparent, \n            rgba(242, 225, 203, 0.5),\n            rgba(242, 225, 203, 0.3),\n            transparent);\n        animation: revealWidth 1.5s ease-out 0.2s forwards;\n    }\n\n    @keyframes revealWidth {\n        0% {\n            width: 0;\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            width: 60vw;\n            opacity: 0;\n        }\n    }\n\n    \/* \uc138\ub828\ub41c \uc11c\ud074 \ud6a8\uacfc *\/\n    .elegant-circle {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 400px;\n        height: 400px;\n        border: 1px solid rgba(242, 225, 203, 0.1);\n        border-radius: 50%;\n        animation: circleExpand 2s ease-out 0.5s forwards;\n        opacity: 0;\n    }\n\n    @keyframes circleExpand {\n        0% {\n            width: 400px;\n            height: 400px;\n            opacity: 0;\n            transform: translate(-50%, -50%) scale(0.5);\n        }\n        50% {\n            opacity: 0.5;\n        }\n        100% {\n            width: 700px;\n            height: 700px;\n            opacity: 0;\n            transform: translate(-50%, -50%) scale(1);\n        }\n    }\n\n    \/* \ub9e4\uc6b0 \ubbf8\uc138\ud55c \ub178\uc774\uc988 \ud14d\uc2a4\ucc98 *\/\n    .noise-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0.03;\n        pointer-events: none;\n        background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' \/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' \/%3E%3C\/svg%3E\");\n    }\n\n    \/* \ud0dc\ube14\ub9bf \ubc18\uc751\ud615 *\/\n    @media (max-width: 1024px) {\n        .logo-image {\n            max-width: 240px;\n            max-height: 240px;\n        }\n\n        .logo-text {\n            font-size: 100px;\n            letter-spacing: 15px;\n        }\n\n        .elegant-circle {\n            width: 350px;\n            height: 350px;\n        }\n\n        @keyframes circleExpand {\n            0% {\n                width: 350px;\n                height: 350px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(0.5);\n            }\n            50% {\n                opacity: 0.5;\n            }\n            100% {\n                width: 600px;\n                height: 600px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(1);\n            }\n        }\n    }\n\n    \/* \ubaa8\ubc14\uc77c \uac00\ub85c *\/\n    @media (max-width: 768px) {\n        .logo-image {\n            max-width: 200px;\n            max-height: 200px;\n        }\n\n        .logo-text {\n            font-size: 80px;\n            letter-spacing: 12px;\n        }\n\n        .elegant-circle {\n            width: 300px;\n            height: 300px;\n        }\n\n        @keyframes circleExpand {\n            0% {\n                width: 300px;\n                height: 300px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(0.5);\n            }\n            50% {\n                opacity: 0.5;\n            }\n            100% {\n                width: 500px;\n                height: 500px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(1);\n            }\n        }\n\n        @keyframes revealHeight {\n            0% {\n                height: 0;\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                height: 60vh;\n                opacity: 0;\n            }\n        }\n\n        @keyframes revealWidth {\n            0% {\n                width: 0;\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                width: 70vw;\n                opacity: 0;\n            }\n        }\n    }\n\n    \/* \ubaa8\ubc14\uc77c \uc138\ub85c *\/\n    @media (max-width: 480px) {\n        .logo-image {\n            max-width: 160px;\n            max-height: 160px;\n        }\n\n        .logo-text {\n            font-size: 60px;\n            letter-spacing: 8px;\n        }\n\n        .elegant-circle {\n            width: 250px;\n            height: 250px;\n        }\n\n        @keyframes circleExpand {\n            0% {\n                width: 250px;\n                height: 250px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(0.5);\n            }\n            50% {\n                opacity: 0.5;\n            }\n            100% {\n                width: 400px;\n                height: 400px;\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(1);\n            }\n        }\n\n        @keyframes revealHeight {\n            0% {\n                height: 0;\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                height: 50vh;\n                opacity: 0;\n            }\n        }\n\n        @keyframes revealWidth {\n            0% {\n                width: 0;\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                width: 80vw;\n                opacity: 0;\n            }\n        }\n    }\n<\/style><div class=\"intro-overlay\" id=\"introOverlay\"><div class=\"intro-container\"><!-- \ub178\uc774\uc988 \uc624\ubc84\ub808\uc774 --><div class=\"noise-overlay\"><\/div><!-- \ub77c\uc778 \ud6a8\uacfc --><div class=\"reveal-line\"><\/div><div class=\"reveal-line horizontal\"><\/div><!-- \uc11c\ud074 \ud6a8\uacfc --><div class=\"elegant-circle\"><\/div><!-- \ub85c\uace0 --><div class=\"logo-wrapper\"><img decoding=\"async\" src=\"https:\/\/bluebrownrecords.com\/wp-content\/uploads\/2025\/10\/logoAsset-2@4x-8.png\" alt=\"Logo\" class=\"logo-image\" id=\"logoImage\" onerror=\"this.style.display='none'; document.querySelector('.logo-text').style.display='block';\"><!-- \uc774\ubbf8\uc9c0 \ub85c\ub4dc \uc2e4\ud328\uc2dc \ud45c\uc2dc\ub420 \ud14d\uc2a4\ud2b8 \ub85c\uace0 --><div class=\"logo-text\">BRAND<\/div><\/div><\/div><\/div><script>\/\/ 4\ucd08 \ud6c4 \uc790\ub3d9\uc73c\ub85c \ub2eb\uae30\n    setTimeout(() => {\n        const overlay = document.getElementById('introOverlay');\n        overlay.style.animation = 'fadeOut 0.5s ease-out forwards';\n        setTimeout(() => {\n            overlay.remove();\n        }, 500);\n    }, 4000);\n\n    \/\/ \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub85c \ud55c \ubc88\ub9cc \ubcf4\uc5ec\uc8fc\uae30 (\uc120\ud0dd\uc0ac\ud56d)\n    \/\/ \uc544\ub798 \uc8fc\uc11d\uc744 \ud574\uc81c\ud558\uba74 \ube0c\ub77c\uc6b0\uc800 \uc138\uc158\ub2f9 \ud55c \ubc88\ub9cc \uc778\ud2b8\ub85c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4\n    \/*\n    if (sessionStorage.getItem('introShown')) {\n        const overlay = document.getElementById('introOverlay');\n        overlay.remove();\n    } else {\n        sessionStorage.setItem('introShown', 'true');\n    }\n    *\/\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0005c48 e-con-full e-flex e-con e-parent\" data-id=\"0005c48\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cba365 elementor-widget elementor-widget-html\" data-id=\"6cba365\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"custom-intro-container-slow\"><div class=\"geometric-lines\"><div class=\"geo-line line-top-left\"><\/div><div class=\"geo-line line-top-right\"><\/div><div class=\"geo-line line-bottom-left\"><\/div><div class=\"geo-line line-bottom-right\"><\/div><\/div><div class=\"text-overlay-final\"><div class=\"line line-1\"><div class=\"word-mask\"><span class=\"large-word\">DREAM.<\/span><\/div><span class=\"small-phrase phrase-1\">Crafting the future of entertainment<\/span><\/div><div class=\"line line-2\"><div class=\"word-mask\"><span class=\"large-word\">DEFINE.<\/span><\/div><\/div><div class=\"line line-3\"><span class=\"small-phrase phrase-2\">Setting the stage for tomorrow's icons<\/span><div class=\"word-mask\"><span class=\"large-word\">LEAD.<\/span><\/div><\/div><\/div><\/div><style>.custom-intro-container-slow {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background-color: #000;\n  font-family: 'Jost', Arial, sans-serif;\n  font-weight: 300;\n}\n\n\/* \uae30\ud558\ud559\uc801 \ub77c\uc778\ub4e4 - \uc2ed\uc790\uac00\ucc98\ub7fc \uadf8\ub824\uc9c0\ub294 \ud6a8\uacfc *\/\n.geometric-lines {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.geo-line {\n  position: absolute;\n  opacity: 0;\n}\n\n\/* \uc88c\uce21 \uc0c1\ub2e8 \uc218\ud3c9 \ub77c\uc778 *\/\n.line-top-left {\n  top: 8%;\n  left: 0;\n  width: 0;\n  height: 1px;\n  background: linear-gradient(90deg, \n    transparent, \n    rgba(242, 224, 201, 0.8),\n    rgba(242, 224, 201, 0.5),\n    transparent);\n  animation: drawLineHorizontalLeft 1.5s ease-out 6s forwards;\n}\n\n\/* \uc6b0\uce21 \uc0c1\ub2e8 \uc218\uc9c1 \ub77c\uc778 *\/\n.line-top-right {\n  top: 0;\n  right: 12%;\n  width: 1px;\n  height: 0;\n  background: linear-gradient(180deg, \n    transparent, \n    rgba(242, 224, 201, 0.8),\n    rgba(242, 224, 201, 0.5),\n    transparent);\n  animation: drawLineVerticalDown 1.5s ease-out 6s forwards;\n}\n\n\/* \uc88c\uce21 \ud558\ub2e8 \uc218\uc9c1 \ub77c\uc778 *\/\n.line-bottom-left {\n  bottom: 0;\n  left: 15%;\n  width: 1px;\n  height: 0;\n  background: linear-gradient(180deg, \n    transparent, \n    rgba(242, 224, 201, 0.8),\n    rgba(242, 224, 201, 0.5),\n    transparent);\n  animation: drawLineVerticalUp 1.5s ease-out 6s forwards;\n}\n\n\/* \uc6b0\uce21 \ud558\ub2e8 \uc218\ud3c9 \ub77c\uc778 *\/\n.line-bottom-right {\n  bottom: 10%;\n  right: 0;\n  width: 0;\n  height: 1px;\n  background: linear-gradient(90deg, \n    transparent, \n    rgba(242, 224, 201, 0.8),\n    rgba(242, 224, 201, 0.5),\n    transparent);\n  animation: drawLineHorizontalRight 1.5s ease-out 6s forwards;\n}\n\n@keyframes drawLineHorizontalLeft {\n  0% {\n    width: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 40vw;\n    opacity: 0;\n  }\n}\n\n@keyframes drawLineHorizontalRight {\n  0% {\n    width: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 40vw;\n    opacity: 0;\n  }\n}\n\n@keyframes drawLineVerticalDown {\n  0% {\n    height: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    height: 40vh;\n    opacity: 0;\n  }\n}\n\n@keyframes drawLineVerticalUp {\n  0% {\n    height: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    height: 40vh;\n    opacity: 0;\n  }\n}\n\n.text-overlay-final {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 5vw;\n  box-sizing: border-box;\n  color: #F2E0C9;\n  z-index: 10;\n}\n\n.text-overlay-final .line {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin: 1vw 0;\n}\n\n.text-overlay-final .line-1 { justify-content: flex-start; }\n.text-overlay-final .line-2 { justify-content: center; }\n.text-overlay-final .line-3 { justify-content: flex-end; }\n\n.word-mask {\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n}\n\n.large-word {\n  display: block;\n  font-size: 9vw;\n  font-weight: 400;\n  line-height: 1;\n  text-transform: capitalize;\n  transform: translateY(100%);\n  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.small-phrase {\n  font-size: 1.4vw;\n  font-weight: 300;\n  padding: 0 2vw;\n  opacity: 0;\n  transition: opacity 1.5s ease-in-out;\n}\n\n.large-word.animate-in {\n  transform: translateY(0);\n}\n\n.small-phrase.animate-in {\n  opacity: 1;\n}\n\n\/* \ud0dc\ube14\ub9bf *\/\n@media (max-width: 1024px) {\n  .large-word { \n    font-size: 10vw; \n  }\n  .small-phrase { \n    font-size: 1.8vw; \n    padding: 0 1.5vw;\n  }\n}\n\n\/* \ubaa8\ubc14\uc77c \uac00\ub85c *\/\n@media (max-width: 768px) {\n  .large-word { \n    font-size: 12vw; \n  }\n  .small-phrase { \n    font-size: 2.5vw; \n    padding: 0 3vw;\n  }\n  \n  .text-overlay-final .line {\n    margin: 2vw 0;\n  }\n}\n\n\/* \ubaa8\ubc14\uc77c \uc138\ub85c *\/\n@media (max-width: 480px) {\n  .large-word { \n    font-size: 15vw; \n  }\n  .small-phrase { \n    font-size: 3.5vw; \n    padding: 0 4vw;\n  }\n  \n  .text-overlay-final {\n    justify-content: center;\n  }\n  \n  .text-overlay-final .line {\n    justify-content: center;\n    text-align: center;\n    margin: 3vw 0;\n    width: 100%;\n  }\n  \n  .text-overlay-final .line-1,\n  .text-overlay-final .line-2,\n  .text-overlay-final .line-3 {\n    display: block;\n  }\n  \n  \/* DREAM *\/\n  .text-overlay-final .line-1 .word-mask {\n    display: block;\n  }\n  \n  \/* \uccab\ubc88\uc9f8 \uc791\uc740\uae00\uc528\ub294 \uc228\uae30\uae30 *\/\n  .text-overlay-final .line-1 .small-phrase {\n    display: none;\n  }\n  \n  \/* DEFINE *\/\n  .text-overlay-final .line-2 {\n    position: relative;\n  }\n  \n  .text-overlay-final .line-2::before {\n    content: 'Crafting the future of entertainment';\n    display: block;\n    font-size: 3.5vw;\n    font-weight: 300;\n    opacity: 0;\n    margin: 0vw 0 7vw 0;\n    animation: fadeInPhrase 1.5s ease-in-out forwards;\n    animation-delay: 5.1s;\n  }\n  \n  .text-overlay-final .line-2 .word-mask {\n    display: block;\n  }\n  \n  .text-overlay-final .line-2::after {\n    content: 'Setting the stage for tomorrow's icons';\n    display: block;\n    font-size: 3.5vw;\n    font-weight: 300;\n    opacity: 0;\n    margin: 5vw 0 1vw 0;\n    animation: fadeInPhrase 1.5s ease-in-out forwards;\n    animation-delay: 5.3s;\n  }\n  \n  \/* LEAD *\/\n  .text-overlay-final .line-3 .small-phrase {\n    display: none;\n  }\n  \n  .text-overlay-final .line-3 .word-mask {\n    display: block;\n  }\n  \n  \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c \uae30\ud558\ud559\uc801 \ub77c\uc778 \ucd95\uc18c *\/\n  .line-top-left,\n  .line-bottom-right {\n    animation: drawLineHorizontalMobile 1.5s ease-out 6s forwards;\n  }\n  \n  .line-top-right,\n  .line-bottom-left {\n    animation: drawLineVerticalMobile 1.5s ease-out 6s forwards;\n  }\n}\n\n@keyframes fadeInPhrase {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes drawLineHorizontalMobile {\n  0% {\n    width: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 30vw;\n    opacity: 0;\n  }\n}\n\n@keyframes drawLineVerticalMobile {\n  0% {\n    height: 0;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    height: 30vh;\n    opacity: 0;\n  }\n}\n<\/style><script>(function() {\n  const container = document.querySelector('.custom-intro-container-slow');\n  if (!container) return;\n  const largeWords = container.querySelectorAll('.large-word');\n  const smallPhrases = container.querySelectorAll('.small-phrase');\n  \n  \/\/ \uc778\ud2b8\ub85c\uac00 \ub05d\ub09c \ud6c4 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 (4000ms = 4\ucd08 \ud6c4)\n  const introEndTime = 4000;\n  const baseDelay = 500;\n  \n  largeWords.forEach((word, index) => {\n    setTimeout(() => {\n      word.classList.add('animate-in');\n    }, introEndTime + baseDelay + (index * 200));\n  });\n  \n  const smallPhraseDelay = introEndTime + baseDelay + (largeWords.length * 200);\n  smallPhrases.forEach((phrase, index) => {\n      setTimeout(() => {\n        phrase.classList.add('animate-in');\n      }, smallPhraseDelay + (index * 200));\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f622e7 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"4f622e7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9688b8 elementor-widget elementor-widget-html\" data-id=\"d9688b8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\/* Pretendard \ud3f0\ud2b8 CDN *\/\n    @import url('https:\/\/cdn.jsdelivr.net\/gh\/orioncactus\/pretendard@v1.3.9\/dist\/web\/static\/pretendard.min.css');\n    .text-fill-animation-container {\n        text-align: left;\n        padding: 10px 0; \/* \uc704\uc82f \ub0b4\ubd80 \uc5ec\ubc31 \uc870\uc815 *\/\n    }\n    .animated-gradient-heading h2 {\n        margin: 0;\n        padding: 0;\n    }\n    .animated-gradient-text-line {\n        display: block;\n        font-family: '\ud504\ub9ac\uc820\ud14c\uc774\uc158', sans-serif; \/* \ud3f0\ud2b8 \uc801\uc6a9 *\/\n        font-size: 47px;\n        font-weight: 600;\n        line-height: 1.4;\n        letter-spacing: -0.5px;\n        background: linear-gradient(to right, #ffffff 50%, #222222 50%);\n        background-size: 200% 100%;\n        background-position: right bottom;\n        -webkit-background-clip: text;\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        color: transparent;\n        transition: background-position 1.5s ease-in-out;\n    }\n    .animated-gradient-text-line.visible {\n        background-position: left bottom;\n    }\n    .animated-gradient-text-line:nth-child(1) {\n        transition-delay: 0s;\n    }\n    .animated-gradient-text-line:nth-child(2) {\n        transition-delay: 0.5s;\n    }\n    .animated-gradient-text-line:nth-child(3) {\n        transition-delay: 1s;\n    }\n    \/* \ubaa8\ubc14\uc77c \ubc18\uc751\ud615 \ucf54\ub4dc *\/\n    @media (max-width: 768px) {\n        .animated-gradient-text-line {\n            font-size: 1.5rem; \/* \ubaa8\ubc14\uc77c \ud3f0\ud2b8 \ud06c\uae30 *\/\n            line-height: 1.7;   \/* \ubaa8\ubc14\uc77c \uc904 \uac04\uaca9 *\/\n            letter-spacing: -0.5px;\n            word-break: keep-all; \/* \ub2e8\uc5b4 \ub2e8\uc704 \uc904\ubc14\uafc8 *\/\n        }\n    }\n<\/style><div class=\"text-fill-animation-container\"><h2 class=\"animated-gradient-heading\"><span class=\"animated-gradient-text-line\">\ub2e8\uc21c\ud55c \uae30\ud68d\uc0ac\uac00 \uc544\ub2cc,<\/span><span class=\"animated-gradient-text-line\">\ub2f9\uc2e0\uc758 \uafc8\uc744 \ud568\uaed8 \uc2e4\ud604\ud574 \ub098\uac00\ub294<\/span><span class=\"animated-gradient-text-line\">\ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \ud30c\ud2b8\ub108\uc785\ub2c8\ub2e4<\/span><\/h2><\/div><script>(function() {\n        \/\/ Elementor \uc704\uc82f \ud658\uacbd\uc5d0\uc11c ID \ucda9\ub3cc\uc744 \ud53c\ud558\uae30 \uc704\ud574 \uace0\uc720 \uc120\ud0dd\uc790 \uc0ac\uc6a9\n        const animatedHeading = document.querySelector('.animated-gradient-heading');\n        \n        \/\/ \uc704\uc82f\uc774 \uc5c6\uc73c\uba74 \uc2a4\ud06c\ub9bd\ud2b8 \uc911\ub2e8\n        if (!animatedHeading) {\n            return;\n        }\n        const animatedLines = animatedHeading.querySelectorAll('.animated-gradient-text-line');\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    animatedLines.forEach(line => {\n                        line.classList.add('visible');\n                    });\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, {\n            threshold: 0.9 \/\/ \uc694\uc18c\uac00 90% \ubcf4\uc774\uba74 \uc2e4\ud589\n        });\n        observer.observe(animatedHeading);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-07d1bf9 e-flex e-con-boxed e-con e-parent\" data-id=\"07d1bf9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-790e7c7 elementor-widget elementor-widget-heading\" data-id=\"790e7c7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">(Producer)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dfd76c elementor-widget elementor-widget-html\" data-id=\"5dfd76c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@300;400&display=swap');\n    \n    .interactive-menu-container {\n        background-color: #000000;\n        color: #ffffff;\n        font-family: 'Jost', Arial, sans-serif;\n        width: 100%;\n        position: relative;\n    }\n    \n    .interactive-menu-container::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 0;\n        height: 1px;\n        background-color: #ffffff;\n    }\n    \n    \/* \uc2a4\ud06c\ub864 \ub3c4\ub2ec \uc2dc animate \ud074\ub798\uc2a4 \ucd94\uac00 *\/\n    .animate .interactive-menu-container::after {\n        animation: drawLineHorizontal 1s ease-out forwards;\n    }\n    \n    .interactive-menu-container .menu-item {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 0.3em 1em;\n        text-decoration: none;\n        color: #ffffff;\n        font-size: clamp(2.5rem, 7vw, 5rem);\n        font-weight: 300!important;\n        position: relative;\n        overflow: hidden;\n        cursor: pointer;\n    }\n    \n    .interactive-menu-container .menu-item::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 1px;\n        background-color: #ffffff;\n    }\n    \n    .animate .menu-item::before {\n        animation: drawLineHorizontal 0.8s ease-out forwards;\n        animation-delay: calc(var(--index) * 0.2s);\n    }\n    \n    .interactive-menu-container .menu-item:nth-child(1) { --index: 0; }\n    .interactive-menu-container .menu-item:nth-child(2) { --index: 1; }\n    .interactive-menu-container .menu-item:nth-child(3) { --index: 2; }\n    \n    .interactive-menu-container .menu-item.detail-view {\n        font-size: clamp(1.1rem, 4vw, 3rem);\n    }\n    \n    .interactive-menu-container .menu-text {\n        display: inline-block;\n        transition: letter-spacing 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n        line-height: 1;\n        opacity: 0;\n    }\n    \n    .animate .menu-text {\n        animation: fadeIn 0.6s ease-out forwards;\n        animation-delay: calc(var(--index) * 0.2s + 0.3s);\n    }\n    \n    .interactive-menu-container .menu-item:hover .menu-text {\n        letter-spacing: 0.05em;\n        color: #a9a9a9;\n    }\n    \n    @keyframes drawLineHorizontal {\n        to { width: 100%; }\n    }\n    \n    @keyframes fadeIn {\n        to { opacity: 1; }\n    }\n\n    \/* \ud0dc\ube14\ub9bf \ubc18\uc751\ud615 *\/\n    @media (max-width: 1024px) {\n        .interactive-menu-container .menu-item {\n            font-size: clamp(2rem, 6vw, 4rem);\n            padding: 0.35em 1em;\n        }\n        \n        .interactive-menu-container .menu-item.detail-view {\n            font-size: clamp(1rem, 3.5vw, 2.5rem);\n        }\n    }\n\n    \/* \ubaa8\ubc14\uc77c \uac00\ub85c *\/\n    @media (max-width: 768px) {\n        .interactive-menu-container .menu-item {\n            font-size: clamp(2.5rem, 7vw, 4rem);\n            padding: 0.4em 0.8em;\n        }\n        \n        .interactive-menu-container .menu-item.detail-view {\n            font-size: clamp(1.3rem, 4vw, 2.5rem);\n        }\n\n        .interactive-menu-container .menu-item:hover .menu-text {\n            letter-spacing: 0.03em;\n        }\n    }\n\n    \/* \ubaa8\ubc14\uc77c \uc138\ub85c *\/\n    @media (max-width: 480px) {\n        .interactive-menu-container .menu-item {\n            font-size: clamp(2.2rem, 6.5vw, 3.5rem);\n            padding: 0.5em 0.5em;\n            text-align: center;\n        }\n        \n        .interactive-menu-container .menu-item.detail-view {\n            font-size: clamp(1.2rem, 3.8vw, 2.2rem);\n            padding: 0.6em 0.5em;\n        }\n\n        .interactive-menu-container .menu-text {\n            word-break: keep-all;\n        }\n\n        \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \ud638\ubc84 \ud6a8\uacfc \uc57d\ud654 *\/\n        .interactive-menu-container .menu-item:hover .menu-text {\n            letter-spacing: 0.02em;\n        }\n    }\n\n    \/* \uc791\uc740 \ubaa8\ubc14\uc77c *\/\n    @media (max-width: 360px) {\n        .interactive-menu-container .menu-item {\n            font-size: clamp(2rem, 6vw, 3rem);\n            padding: 0.6em 0.3em;\n        }\n        \n        .interactive-menu-container .menu-item.detail-view {\n            font-size: clamp(1.1rem, 3.5vw, 2rem);\n        }\n    }\n<\/style>\n\n<div class=\"interactive-menu-container\" id=\"animatedMenu\">\n   <a href=\"https:\/\/bluebrownrecords.com\/en\/producer\/#producersection\" class=\"menu-item\">\n    <span class=\"menu-text\">SANGWOO MYUNG<\/span>\n  <\/a>\n  <a href=\"https:\/\/bluebrownrecords.com\/en\/producer\/#dwayne\" class=\"menu-item\">\n    <span class=\"menu-text\">DWAYNE<\/span>\n  <\/a>\n  <a href=\"https:\/\/bluebrownrecords.com\/en\/producer\/\" class=\"menu-item detail-view\">\n    <span class=\"menu-text\">DETAIL VIEW<\/span>\n  <\/a> \n<\/div>\n\n<script>\n    \/\/ Intersection Observer \uc124\uc815\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                \/\/ \uba54\ub274 \ucee8\ud14c\uc774\ub108\uc758 \ubd80\ubaa8 \uc694\uc18c\uc5d0 animate \ud074\ub798\uc2a4 \ucd94\uac00\n                entry.target.parentElement.classList.add('animate');\n                \/\/ \ud55c \ubc88\ub9cc \uc2e4\ud589\ub418\ub3c4\ub85d \uad00\ucc30 \uc911\uc9c0\n                observer.unobserve(entry.target);\n            }\n        });\n    }, {\n        threshold: 0.3 \/\/ \uc694\uc18c\uc758 30%\uac00 \ubcf4\uc77c \ub54c \ud2b8\ub9ac\uac70\n    });\n    \n    \/\/ \uad00\ucc30 \uc2dc\uc791\n    const menu = document.getElementById('animatedMenu');\n    if (menu) {\n        observer.observe(menu);\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34d3542 e-flex e-con-boxed e-con e-parent\" data-id=\"34d3542\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-938567d elementor-widget elementor-widget-html\" data-id=\"938567d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"audition-section\">\n  <!-- \uc6d0 \ud655\uc7a5 \uc560\ub2c8\uba54\uc774\uc158 --> \n  <div class=\"circle-intro-overlay\">\n    <div class=\"expanding-circle\"><\/div>\n  <\/div>\n  \n  <div id=\"main-content-wrapper\">\n    <div class=\"content-grid\">\n      <div class=\"main-title\">AUDITION<\/div>\n      \n      <!-- \ud68c\uc804\ud558\ub294 \uc6d0\ud615 \ubc84\ud2bc -->\n      <a href=\"https:\/\/bluebrownrecords.com\/en\/audition\/\" class=\"circular-button\">\n        <svg viewbox=\"0 0 200 200\" class=\"circular-text\">\n          <path id=\"circlePath\" d=\"M 100, 100 m -85, 0 a 85,85 0 1,1 170,0 a 85,85 0 1,1 -170,0\" fill=\"none\"\/>\n          <text class=\"rotating-text\">\n            <textpath href=\"#circlePath\" startoffset=\"0%\" textlength=\"520\" lengthadjust=\"spacing\">\n              VIEW DETAIL \u2022 BLUE BROWN \u2022 VIEW DETAIL \u2022 BLUE BROWN \u2022\n            <\/textpath>\n          <\/text>\n        <\/svg>\n        <div class=\"center-circle\"><\/div>\n        <div class=\"arrow-icon\">\u2192<\/div>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* ====== \ubbf8\ub2c8\uba40 \ud3f0\ud2b8 \ubd88\ub7ec\uc624\uae30 ====== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@200;300;400;500&family=Space+Grotesk:wght@300;400;500&display=swap');\n\n\/* ====== \uc6d0 \ud655\uc7a5 \uc778\ud2b8\ub85c \uc560\ub2c8\uba54\uc774\uc158 ====== *\/\n.circle-intro-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  opacity: 1;\n  visibility: visible;\n}\n\n.expanding-circle {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 200vw;\n  height: 200vw;\n  background-color: #F2E0C9;\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.1s ease-out;\n}\n\n\/* ====== \uc624\ub514\uc158 \uc139\uc158 \uc2a4\ud0c0\uc77c ====== *\/\n.audition-section {\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #F2E0C9;\n  position: relative;\n  overflow: hidden;\n  padding: 60px 20px;\n}\n\n#main-content-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  max-width: 1200px;\n  opacity: 1;\n  z-index: 2;\n}\n\n.content-grid {\n  position: relative;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-align: left;\n  color: #000;\n  gap: 50px;\n  max-width: 600px;\n}\n\n.main-title {\n  font-family: 'Jost', sans-serif;\n  font-size: 8vw;\n  font-weight: 400;\n  margin: 0;\n  letter-spacing: -0.01em;\n  color: #000;\n  opacity: 1;\n  line-height: 0.95;\n}\n\n\/* ====== \ud68c\uc804\ud558\ub294 \uc6d0\ud615 \ubc84\ud2bc ====== *\/\n.circular-button {\n  position: relative;\n  width: 150px;\n  height: 150px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-decoration: none;\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.circular-button:hover {\n  transform: scale(1.05);\n}\n\n.circular-text {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  animation: rotate 20s linear infinite;\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.rotating-text {\n  font-family: 'Inter', sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0.05em;\n  fill: #000;\n  text-transform: uppercase;\n}\n\n\/* ====== \uc911\uc559 \uac80\uc815 \uc6d0 ====== *\/\n.center-circle {\n  position: absolute;\n  width: 76px;\n  height: 76px;\n  background-color: #000;\n  border-radius: 50%;\n  z-index: 1;\n  transition: transform 0.3s ease;\n}\n\n.circular-button:hover .center-circle {\n  transform: scale(1.05);\n}\n\n.arrow-icon {\n  font-size: 2rem;\n  color: #F2E0C9;\n  font-weight: 300;\n  z-index: 2;\n  transition: transform 0.3s ease;\n  position: relative;\n}\n\n.circular-button:hover .arrow-icon {\n  transform: translateX(3px);\n}\n\n\/* \ud0dc\ube14\ub9bf \ubc18\uc751\ud615 *\/\n@media (max-width: 1024px) {\n  .audition-section {\n    padding: 50px 20px;\n  }\n  \n  .content-grid {\n    gap: 45px;\n  }\n  \n  .main-title {\n    font-size: 10vw;\n  }\n  \n  .circular-button {\n    width: 140px;\n    height: 140px;\n  }\n  \n  .rotating-text {\n    font-size: 12px;\n  }\n  \n  .center-circle {\n    width: 70px;\n    height: 70px;\n  }\n  \n  .arrow-icon {\n    font-size: 1.8rem;\n  }\n}\n\n\/* \ubaa8\ubc14\uc77c \uac00\ub85c *\/\n@media (max-width: 768px) {\n  .audition-section {\n    padding: 40px 20px;\n    min-height: 90vh;\n  }\n  \n  .content-grid {\n    align-items: center;\n    text-align: center;\n    max-width: 90%;\n    gap: 40px;\n  }\n  \n  .main-title {\n    font-size: 12vw;\n  }\n  \n  .circular-button {\n    width: 130px;\n    height: 130px;\n  }\n  \n  .rotating-text {\n    font-size: 11px;\n  }\n  \n  .center-circle {\n    width: 66px;\n    height: 66px;\n  }\n  \n  .arrow-icon {\n    font-size: 1.6rem;\n  }\n}\n\n\/* \ubaa8\ubc14\uc77c \uc138\ub85c *\/\n@media (max-width: 480px) {\n  .audition-section {\n    padding: 30px 15px;\n    min-height: 85vh;\n  }\n  \n  .content-grid {\n    gap: 35px;\n    max-width: 95%;\n  }\n  \n  .main-title {\n    font-size: 14vw;\n  }\n  \n  .circular-button {\n    width: 120px;\n    height: 120px;\n  }\n  \n  .rotating-text {\n    font-size: 10px;\n  }\n  \n  .center-circle {\n    width: 60px;\n    height: 60px;\n  }\n  \n  .arrow-icon {\n    font-size: 1.5rem;\n  }\n}\n\n\/* \uc791\uc740 \ubaa8\ubc14\uc77c *\/\n@media (max-width: 360px) {\n  .audition-section {\n    padding: 25px 10px;\n  }\n  \n  .content-grid {\n    gap: 30px;\n  }\n  \n  .main-title {\n    font-size: 16vw;\n  }\n  \n  .circular-button {\n    width: 110px;\n    height: 110px;\n  }\n  \n  .rotating-text {\n    font-size: 9px;\n  }\n  \n  .center-circle {\n    width: 55px;\n    height: 55px;\n  }\n  \n  .arrow-icon {\n    font-size: 1.3rem;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const auditionSection = document.querySelector('.audition-section');\n  const circle = document.querySelector('.expanding-circle');\n  \n  \/\/ \ubaa8\ubc14\uc77c \uc5ec\ubd80 \ud655\uc778\n  const isMobile = window.innerWidth <= 768;\n  \n  window.addEventListener('scroll', function() {\n    const rect = auditionSection.getBoundingClientRect();\n    const windowHeight = window.innerHeight;\n    \n    const sectionTop = rect.top;\n    const sectionHeight = rect.height;\n    \n    let progress = 0;\n    \n    \/\/ \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \ub354 \ube68\ub9ac \uc2dc\uc791\ud558\uace0 \ub354 \ube60\ub974\uac8c \ud655\uc7a5\n    if (isMobile) {\n      if (sectionTop < windowHeight * 0.7 && sectionTop > -sectionHeight) {\n        progress = Math.max(0, Math.min(1, (windowHeight * 0.7 - sectionTop) \/ (windowHeight * 0.6)));\n      }\n    } else {\n      if (sectionTop < windowHeight * 0.4 && sectionTop > -sectionHeight) {\n        progress = Math.max(0, Math.min(1, (windowHeight * 0.4 - sectionTop) \/ (windowHeight * 1.2)));\n      }\n    }\n    \n    const scale = progress * 1.5;\n    circle.style.transform = `translate(-50%, -50%) scale(${scale})`;\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BRAND DREAM.Crafting the future of entertainmentDEFINE.Setting the stage for tomorrow&#8217;s iconsLEAD. \ub2e8\uc21c\ud55c \uae30\ud68d\uc0ac\uac00 \uc544\ub2cc,\ub2f9\uc2e0\uc758 \uafc8\uc744 \ud568\uaed8 \uc2e4\ud604\ud574 \ub098\uac00\ub294\ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \ud30c\ud2b8\ub108\uc785\ub2c8\ub2e4 (Producer) SANGWOO MYUNG DWAYNE DETAIL VIEW AUDITION VIEW DETAIL \u2022 BLUE BROWN \u2022 VIEW DETAIL \u2022 BLUE BROWN \u2022 \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1341","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/pages\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":1,"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/pages\/1341\/revisions"}],"predecessor-version":[{"id":1349,"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/pages\/1341\/revisions\/1349"}],"wp:attachment":[{"href":"https:\/\/bluebrownrecords.com\/en\/wp-json\/wp\/v2\/media?parent=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}