{"id":673,"date":"2018-04-17T15:23:45","date_gmt":"2018-04-17T07:23:45","guid":{"rendered":"http:\/\/demo.mobantu.com\/modown\/?page_id=673"},"modified":"2026-04-15T15:21:25","modified_gmt":"2026-04-15T07:21:25","slug":"homepage1","status":"publish","type":"page","link":"https:\/\/2013.webk.svipwebs.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<!-- homeslide \u6837\u5f0f -->\r\n<style>\r\n  :root {\r\n    --hs-cyan: #00f2ff;     \/* \u6807\u5fd7\u6027\u53d1\u5149\u9713\u8679\u84dd *\/\r\n    --hs-dark: #071326;     \/* \u9ad8\u7ea7\u6df1\u84dd\u8272\u8c03\uff08\u4e0e\u4e0b\u65b9\u8bfe\u7a0b\u6a21\u5757\u80cc\u666f\u547c\u5e94\uff09 *\/\r\n    --hs-blue: #0055ff;     \/* \u821e\u53f0\u5149\u611f\u84dd *\/\r\n  }\r\n\r\n  .homeslide-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 700px;\r\n    height: 80vh;\r\n    background: var(--hs-dark);\r\n    overflow: hidden;\r\n    color: #fff;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* --- \u80cc\u666f\u5c42\u8bbe\u8ba1 --- *\/\r\n  .homeslide-bg-blur {\r\n    position: absolute;\r\n    inset: -30px;\r\n    background-size: cover;\r\n    background-position: center;\r\n    filter: blur(45px) brightness(0.3) saturate(1.2);\r\n    transition: background-image 1s ease-in-out;\r\n    z-index: 1;\r\n  }\r\n  .homeslide-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    \/* \u914d\u5408\u80cc\u666f\u53d8\u91cf\uff0c\u5929\u7136\u5448\u73b0\u6df1\u84dd\u6c1b\u56f4\u6e10\u53d8 *\/\r\n    background: radial-gradient(circle at 70% 50%, rgba(0, 85, 255, 0.15) 0%, var(--hs-dark) 90%);\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* --- \u6f02\u6d6e\u97f3\u7b26\u52a8\u753b --- *\/\r\n  .homeslide-notes-area {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n  }\r\n  .hs-note {\r\n    position: absolute;\r\n    bottom: -50px;\r\n    color: rgba(0, 242, 255, 0.2);\r\n    font-size: 24px;\r\n    animation: hs-float 10s linear infinite;\r\n  }\r\n  @keyframes hs-float {\r\n    0% { transform: translateY(0) rotate(0deg) scale(0.8); opacity: 0; }\r\n    20% { opacity: 1; }\r\n    80% { opacity: 1; }\r\n    100% { transform: translateY(-90vh) rotate(360deg) scale(1.5); opacity: 0; }\r\n  }\r\n\r\n  \/* --- \u5185\u5bb9\u533a\u5e03\u5c40 --- *\/\r\n  .homeslide-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    width: 100%;\r\n    \/* \u62d3\u5bbd\u6574\u4f53\u5bb9\u5668\u5bbd\u5ea6\uff0c\u7ed9\u53f3\u4fa7\u5927\u56fe\u4e89\u53d6\u7a7a\u95f4 *\/\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 40px;\r\n  }\r\n\r\n  \/* --- \u5de6\u4fa7\u64ad\u653e\u5668\u4fe1\u606f\u4e0e\u63a7\u5236 --- *\/\r\n  .homeslide-left {\r\n    flex: 1;\r\n    max-width: 550px;\r\n  }\r\n\r\n  .homeslide-now-playing {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(0, 242, 255, 0.1);\r\n    border: 1px solid rgba(0, 242, 255, 0.3);\r\n    padding: 6px 16px;\r\n    border-radius: 20px;\r\n    font-size: 13px;\r\n    color: var(--hs-cyan);\r\n    letter-spacing: 2px;\r\n    margin-bottom: 20px;\r\n    box-shadow: 0 0 15px rgba(0, 242, 255, 0.15);\r\n  }\r\n\r\n  .homeslide-title {\r\n    font-size: 3rem;\r\n    font-weight: 800;\r\n    margin: 0 0 15px 0;\r\n    line-height: 1.2;\r\n    background: linear-gradient(135deg, #fff 30%, var(--hs-cyan) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    transition: opacity 0.4s, transform 0.4s;\r\n  }\r\n  \r\n  .homeslide-desc {\r\n    color: #a0aec0;\r\n    font-size: 1.1rem;\r\n    line-height: 1.6;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  \/* \u97f3\u8f68 EQ *\/\r\n  .homeslide-eq {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 3px;\r\n    height: 24px;\r\n  }\r\n  .hs-eq-bar {\r\n    width: 4px;\r\n    background: var(--hs-cyan);\r\n    border-radius: 2px;\r\n    animation: hs-eq-dance 1s ease-in-out infinite alternate;\r\n  }\r\n  @keyframes hs-eq-dance {\r\n    0% { height: 20%; opacity: 0.5; }\r\n    100% { height: 100%; opacity: 1; box-shadow: 0 0 8px var(--hs-cyan); }\r\n  }\r\n\r\n  \/* \u97f3\u4e50\u64ad\u653e\u5668\u8fdb\u5ea6\u6761 *\/\r\n  .homeslide-player-ui {\r\n    background: rgba(255,255,255,0.03);\r\n    border: 1px solid rgba(255,255,255,0.08);\r\n    padding: 25px;\r\n    border-radius: 16px;\r\n    backdrop-filter: blur(10px);\r\n  }\r\n\r\n  .homeslide-timeline {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    margin-bottom: 20px;\r\n    font-size: 12px;\r\n    color: #888;\r\n  }\r\n  .hs-progress-bg {\r\n    flex: 1;\r\n    height: 4px;\r\n    background: rgba(255,255,255,0.1);\r\n    border-radius: 2px;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n  .hs-progress-fill {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 0%;\r\n    background: var(--hs-cyan);\r\n    box-shadow: 0 0 10px var(--hs-cyan);\r\n    animation: hs-progress-run 5s linear infinite; \r\n  }\r\n  @keyframes hs-progress-run {\r\n    0% { width: 0%; }\r\n    100% { width: 100%; }\r\n  }\r\n\r\n  \/* \u64ad\u653e\u5668\u5207\u6b4c\u952e *\/\r\n  .homeslide-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 30px;\r\n  }\r\n  .hs-btn {\r\n    width: 45px;\r\n    height: 45px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(255,255,255,0.2);\r\n    background: transparent;\r\n    color: #fff;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: 0.3s;\r\n  }\r\n  .hs-btn:hover {\r\n    border-color: var(--hs-cyan);\r\n    color: var(--hs-cyan);\r\n    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);\r\n    transform: scale(1.1);\r\n  }\r\n  .hs-btn-play {\r\n    width: 55px;\r\n    height: 55px;\r\n    background: var(--hs-cyan);\r\n    color: var(--hs-dark);\r\n    border: none;\r\n    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);\r\n  }\r\n  .hs-btn-play:hover {\r\n    background: #fff;\r\n    border-color: #fff;\r\n    color: var(--hs-dark);\r\n  }\r\n\r\n  \/* --- \u53f3\u4fa7\u89c6\u89c9\uff1a\u5b8c\u7f8e\u517c\u5bb9\u4e0d\u7edf\u4e00\u56fe\u7247 --- *\/\r\n  .homeslide-right {\r\n    flex: 1.3; \r\n    height: 700px;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  \/* \u9ed1\u80f6\u5531\u7247 (\u6c38\u8fdc\u5728\u5e95\u90e8\u65cb\u8f6c\u586b\u8865\u7a7a\u767d) *\/\r\n  .homeslide-vinyl {\r\n    position: absolute;\r\n    width: 530px;\r\n    height: 530px;\r\n    background: radial-gradient(circle, #101c35 10%, #040c1b 30%, #0a142a 32%, #020713 35%, #081224 60%, #01040a 85%, #0a1222 100%);\r\n    border-radius: 50%;\r\n    z-index: 5;\r\n    box-shadow: 0 20px 50px rgba(2, 10, 26, 0.8);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    animation: hs-spin 12s linear infinite;\r\n  }\r\n  .homeslide-vinyl::after {\r\n    content: '';\r\n    width: 160px;\r\n    height: 160px;\r\n    background: repeating-radial-gradient(var(--hs-cyan), #00b3cc 10px, #008099 20px);\r\n    border-radius: 50%;\r\n    box-shadow: inset 0 0 15px rgba(2, 10, 26, 0.9);\r\n  }\r\n  .homeslide-vinyl::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 22px;\r\n    height: 22px;\r\n    background: #01040a;\r\n    border-radius: 50%;\r\n    z-index: 6;\r\n  }\r\n  @keyframes hs-spin { \r\n    100% { transform: rotate(360deg); } \r\n  }\r\n\r\n  \/* \u56fe\u7247\u5c55\u793a\u5c42 - \u7cbe\u6e5b\u7684\u81ea\u9002\u5e94\u9634\u5f71\u6280\u5de7 *\/\r\n  .homeslide-gallery {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 10;\r\n  }\r\n\r\n  .homeslide-img-wrapper {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    transform: translateY(20px) scale(0.95);\r\n    transition: opacity 0.6s ease, transform 0.6s ease;\r\n    pointer-events: none;\r\n  }\r\n  .homeslide-img-wrapper.homeslide-active {\r\n    opacity: 1;\r\n    transform: translateY(0) scale(1);\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .homeslide-img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    width: auto;\r\n    height: auto;\r\n    border-radius: 12px;\r\n    box-shadow: 0 25px 60px rgba(3, 12, 30, 0.8), 0 0 1px 1px rgba(0, 242, 255, 0.3);\r\n  }\r\n\r\n  \/* =========================================\r\n     [\u65b0\u589e] \u5e95\u90e8\u6a21\u5757\u89c6\u89c9\u5206\u9694\u5668 - \u5e73\u6ed1\u8fc7\u6e21\u5230\u4e0b\u4e2a\u533a\u5757\r\n     ========================================= *\/\r\n  .homeslide-bottom-gradient {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 120px;\r\n    background: linear-gradient(to top, var(--hs-dark) 0%, transparent 100%);\r\n    z-index: 15;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .homeslide-separator {\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent 15%, rgba(0, 242, 255, 0.4) 50%, transparent 85%);\r\n    z-index: 20;\r\n    box-shadow: 0 -5px 20px rgba(0, 242, 255, 0.2);\r\n  }\r\n  \r\n  \/* \u5206\u9694\u7ebf\u4e2d\u5fc3\u7684\u547c\u5438\u5149\u6548\u53d1\u5149\u6761 *\/\r\n  .homeslide-separator::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 120px;\r\n    height: 3px;\r\n    background: #fff;\r\n    border-radius: 2px;\r\n    box-shadow: 0 0 15px var(--hs-cyan), 0 0 30px var(--hs-cyan);\r\n    animation: hs-glow-pulse 3s infinite alternate;\r\n  }\r\n  \r\n  @keyframes hs-glow-pulse {\r\n    0% { opacity: 0.5; width: 80px; }\r\n    100% { opacity: 1; width: 140px; box-shadow: 0 0 20px var(--hs-cyan), 0 0 40px var(--hs-cyan); }\r\n  }\r\n\r\n  \/* \u79fb\u52a8\u7aef\u9002\u914d *\/\r\n  @media (max-width: 960px) {\r\n    .homeslide-container { flex-direction: column; text-align: center; gap: 30px; padding: 40px 20px; }\r\n    .homeslide-left { max-width: 100%; }\r\n    .homeslide-right { width: 100%; flex: none; height: 400px; }\r\n    .homeslide-vinyl { width: 330px; height: 330px; } \r\n    .homeslide-title { font-size: 2.2rem; }\r\n    .homeslide-player-ui { padding: 15px; }\r\n    .homeslide-desc { margin-bottom: 20px; display: none;} \r\n  }\r\n<\/style>\r\n\r\n<!-- homeslide HTML \u7ed3\u6784 -->\r\n<div class=\"homeslide-wrapper\" id=\"homeslide-js-widget\">\r\n  \r\n  <!-- \u6700\u5e95\u5c42\u80cc\u666f\u6a21\u7cca -->\r\n  <div class=\"homeslide-bg-blur\" id=\"hs-bg\"><\/div>\r\n  <div class=\"homeslide-overlay\"><\/div>\r\n\r\n  <!-- \u6f02\u6d41\u97f3\u7b26 -->\r\n  <div class=\"homeslide-notes-area\">\r\n    <div class=\"hs-note\" style=\"left:10%; animation-delay:0s;\">\u266a<\/div>\r\n    <div class=\"hs-note\" style=\"left:85%; animation-delay:2s; font-size:32px;\">\u266b<\/div>\r\n    <div class=\"hs-note\" style=\"left:50%; animation-delay:4s;\">\u266c<\/div>\r\n    <div class=\"hs-note\" style=\"left:20%; animation-delay:6s;\">\u2669<\/div>\r\n    <div class=\"hs-note\" style=\"left:70%; animation-delay:1.5s; font-size:28px;\">\u266a<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"homeslide-container\">\r\n    <!-- \u5de6\u4fa7\uff1a\u64ad\u653e\u5668 UI -->\r\n    <div class=\"homeslide-left\">\r\n      <div class=\"homeslide-now-playing\">\r\n        <div class=\"homeslide-eq\">\r\n          <span class=\"hs-eq-bar\" style=\"animation-delay: 0.1s\"><\/span>\r\n          <span class=\"hs-eq-bar\" style=\"animation-delay: 0.3s\"><\/span>\r\n          <span class=\"hs-eq-bar\" style=\"animation-delay: 0.0s\"><\/span>\r\n          <span class=\"hs-eq-bar\" style=\"animation-delay: 0.4s\"><\/span>\r\n          <span class=\"hs-eq-bar\" style=\"animation-delay: 0.2s\"><\/span>\r\n        <\/div>\r\n        <!-- [\u6587\u6848\u4f18\u5316] \u5f3a\u8c03\u963f\u5361\u8d1d\u62c9\u548c\u5de5\u4f5c\u5ba4\u6838\u5fc3 -->\r\n        A CAPPELLA - Star Sound Music\r\n      <\/div>\r\n      \r\n      <!-- [\u6587\u6848\u4f18\u5316] \u66f4\u5177\u611f\u67d3\u529b\u7684\u521d\u59cb\u4e3b\u6807\u9898 -->\r\n      <h2 class=\"homeslide-title\" id=\"hs-title\">Creating heavenly music with pure vocals<\/h2>\r\n      \r\n      <!-- [\u6587\u6848\u4f18\u5316] \u878d\u5165\u5de5\u4f5c\u5ba4\u7684\u963f\u5361\u8d1d\u62c9\u4e0e\u6559\u5b66\u80cc\u666f -->\r\n      <p class=\"homeslide-desc\">\r\n        Specializing in a cappella a cappella and professional vocal instruction, supplemented by popular dance integrated performance.<br>\r\n        Feel the beauty of the strongest harmony here, the heavenly music will be composed by you personally.\r\n      <\/p>\r\n\r\n      <div class=\"homeslide-player-ui\">\r\n        <div class=\"homeslide-timeline\">\r\n          <span id=\"hs-time-current\">0:00<\/span>\r\n          <div class=\"hs-progress-bg\">\r\n            <!-- \u8d70\u6761\u6ee1\u5373\u5207\u56fe -->\r\n            <div class=\"hs-progress-fill\" id=\"hs-progress\"><\/div> \r\n          <\/div>\r\n          <span id=\"hs-time-total\">0:05<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"homeslide-controls\">\r\n          <button class=\"hs-btn\" onclick=\"hsAction.prev()\">\u23ee<\/button>\r\n          <button class=\"hs-btn hs-btn-play\" onclick=\"hsAction.next()\">\u25b6<\/button>\r\n          <button class=\"hs-btn\" onclick=\"hsAction.next()\">\u23ed<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u53f3\u4fa7\uff1a\u65e0\u8bba\u4ec0\u4e48\u5c3a\u5bf8\u7684\u56fe\u7247\u90fd\u4e0d\u88c1\u526a -->\r\n    <div class=\"homeslide-right\">\r\n      <!-- \u65cb\u8f6c\u6253\u5e95\u7684\u5b9e\u4f53\u9ed1\u80f6 -->\r\n      <div class=\"homeslide-vinyl\"><\/div>\r\n      \r\n      <!-- \u753b\u5eca\uff1a\u6ce8\u5165\u81ea\u9002\u5e94\u56fe\u50cf -->\r\n      <div class=\"homeslide-gallery\" id=\"hs-gallery\">\r\n        <!-- JS \u52a8\u6001\u6ce8\u5165 -->\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  \r\n  <!-- [\u65b0\u589e] \u5e95\u90e8\u6a21\u5757\u5206\u9694\u6e10\u53d8\u4e0e\u9713\u8679\u547c\u5438\u7ebf -->\r\n  <div class=\"homeslide-bottom-gradient\"><\/div>\r\n  <div class=\"homeslide-separator\"><\/div>\r\n\r\n<\/div>\r\n\r\n<!-- homeslide \u903b\u8f91\u4ee3\u7801 -->\r\n<script>\r\n  const hsAction = (() => {\r\n    \/\/ === \u6570\u636e\u6e90 ===\r\n    \/\/ [\u6587\u6848\u4f18\u5316] \u5c06\u4e09\u5927\u8f6e\u64ad\u6807\u9898\u8d34\u5408\u5de5\u4f5c\u5ba4\u4e1a\u52a1\uff1a\u963f\u5361\u8d1d\u62c9\u3001\u58f0\u4e50\u821e\u8e48\u3001\u4f01\u4e1a\/\u9ad8\u6821\u5b9a\u5236\r\n    const data = [\r\n      {\r\n        src: '\/wp-content\/uploads\/2026\/04\/08043939868.png', \r\n        title: '\u963f\u5361\u8d1d\u62c9\u65e0\u4f34\u594f\u5408\u5531 A Cappella'\r\n      },\r\n      {\r\n        src: '\/wp-content\/uploads\/2026\/04\/08043936795.png', \r\n        title: '\u4e13\u4e1a\u58f0\u4e50\u4e0e\u6d41\u884c\u821e\u8e48 Vocal & Dance'\r\n      },\r\n      {\r\n        src: '\/wp-content\/uploads\/2026\/04\/08043928108.png', \r\n        title: '\u4f01\u4e1a\u53ca\u9ad8\u6821\u5b9a\u5236\u6392\u7ec3 Custom Event'\r\n      }\r\n    ];\r\n\r\n    let current = 0;\r\n    let timer = null;\r\n    const intervalTime = 5000; \r\n\r\n    const bgEl = document.getElementById('hs-bg');\r\n    const titleEl = document.getElementById('hs-title');\r\n    const galleryEl = document.getElementById('hs-gallery');\r\n    const progressEl = document.getElementById('hs-progress');\r\n\r\n    \/\/ \u521d\u59cb\u5316\u6e32\u67d3 DOM\r\n    function init() {\r\n      data.forEach((item, index) => {\r\n        const wrapper = document.createElement('div');\r\n        wrapper.className = 'homeslide-img-wrapper' + (index === 0 ? ' homeslide-active' : '');\r\n        wrapper.id = 'hs-slide-' + index;\r\n\r\n        const img = document.createElement('img');\r\n        img.src = item.src;\r\n        img.className = 'homeslide-img';\r\n        \r\n        wrapper.appendChild(img);\r\n        galleryEl.appendChild(wrapper);\r\n      });\r\n      syncView();\r\n      startTimer();\r\n    }\r\n\r\n    \/\/ \u540c\u6b65\u89c6\u56fe\u4e0e\u6570\u636e\r\n    function syncView() {\r\n      \/\/ \u80cc\u666f\u865a\u5316\u5207\u6362\r\n      bgEl.style.backgroundImage = `url(${data[current].src})`;\r\n      \r\n      \/\/ \u6587\u5b57\u8fdb\u573a\u52a8\u6548\r\n      titleEl.style.opacity = '0';\r\n      titleEl.style.transform = 'translateY(15px)';\r\n      setTimeout(() => {\r\n        titleEl.innerText = data[current].title;\r\n        titleEl.style.opacity = '1';\r\n        titleEl.style.transform = 'translateY(0)';\r\n      }, 300);\r\n\r\n      \/\/ \u56fe\u96c6\u5207\u6362\r\n      data.forEach((_, i) => {\r\n        const el = document.getElementById('hs-slide-' + i);\r\n        if (i === current) {\r\n          el.classList.add('homeslide-active');\r\n        } else {\r\n          el.classList.remove('homeslide-active');\r\n        }\r\n      });\r\n\r\n      \/\/ \u91cd\u542f\u8fdb\u5ea6\u6761\u52a8\u753b\r\n      resetProgressAnimation();\r\n    }\r\n\r\n    \/\/ \u6838\u5fc3\u8fdb\u5ea6\u6761\u4e0e\u5b9a\u65f6\u5668\u91cd\u542f\u903b\u8f91\r\n    function resetProgressAnimation() {\r\n      progressEl.style.animation = 'none';\r\n      void progressEl.offsetWidth; \r\n      progressEl.style.animation = `hs-progress-run ${intervalTime}ms linear infinite`;\r\n    }\r\n\r\n    function next() {\r\n      current = (current + 1) % data.length;\r\n      syncView();\r\n      resetTimer();\r\n    }\r\n\r\n    function prev() {\r\n      current = (current - 1 + data.length) % data.length;\r\n      syncView();\r\n      resetTimer();\r\n    }\r\n\r\n    function startTimer() {\r\n      timer = setInterval(next, intervalTime);\r\n    }\r\n    function resetTimer() {\r\n      clearInterval(timer);\r\n      startTimer();\r\n    }\r\n\r\n    \/\/ \u542f\u52a8\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', init);\r\n    } else {\r\n      init();\r\n    }\r\n\r\n    return { next, prev };\r\n  })();\r\n<\/script>\n<style>\r\n  \/* =========================================\r\n     HOME COURSES SECTION - \u3010\u9ed1\u80f6\u62bd\u53d6 \/ \u97f3\u4e50\u64ad\u653e\u5668\u3011\u91cd\u6784\u7248\r\n     \u529f\u80fd\uff1a\u89e3\u51b3\u6df1\u8272\u75b2\u52b3\uff0c\u6ce8\u5165\u6781\u81f4\u97f3\u4e50\u6c14\u606f\r\n     ========================================= *\/\r\n  \r\n  :root {\r\n    --m-blue: #0055ff;           \/* \u6838\u5fc3\u54c1\u724c\u84dd\uff1a\u4e0e\u6df1\u84dd\u5e95\u7ad9\u5b8c\u7f8e\u8854\u63a5 *\/\r\n    --m-cyan: #00e5ff;           \/* \u7535\u97f3\u9752\uff1a\u63d0\u4eae\u5c42\u6b21 *\/\r\n    --m-bg-light: #f4f6fb;       \/* \u547c\u5438\u611f\u4eae\u8272\u80cc\u666f\uff1a\u53d6\u4ee3\u6c89\u95f7\u7684\u6df1\u84dd *\/\r\n    --m-text-dark: #0f172a;      \/* \u8d28\u611f\u6df1\u7070\uff1a\u4fdd\u8bc1\u9605\u8bfb\u6027 *\/\r\n    --m-text-gray: #64748b;\r\n    --m-card-bg: #ffffff;\r\n    --m-shadow: rgba(0, 85, 255, 0.08);\r\n  }\r\n\r\n  .home-courses-section {\r\n    padding: 120px 5%;\r\n    \/* \u4f7f\u7528\u4eae\u8272+\u5927\u8303\u56f4\u67d4\u548c\u7684\u6de1\u84dd\u8272\u5149\u6655\uff0c\u6253\u7834\u539f\u59cb\u7f51\u7ad9\u6df1\u8272\u7684\u538b\u6291\u611f *\/\r\n    background: \r\n      radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),\r\n      radial-gradient(circle at 90% 100%, rgba(0, 85, 255, 0.06) 0%, transparent 50%),\r\n      var(--m-bg-light);\r\n    color: var(--m-text-dark);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", sans-serif;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* \u9876\u90e8\u5f15\u8a00\u533a - \u878d\u5165\u6df7\u97f3\u53f0\u5747\u8861\u5668\u5143\u7d20 *\/\r\n  .home-section-header {\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n    max-width: 900px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  \/* \u52a8\u6001\u8df3\u52a8\u7684\u9876\u90e8\u4fee\u9970\u5e26 *\/\r\n  .header-eq-wrap {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: flex-end;\r\n    gap: 4px;\r\n    height: 20px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .header-eq-wrap span {\r\n    width: 3px;\r\n    background: var(--m-cyan);\r\n    border-radius: 2px;\r\n    animation: eq-bounce 1.2s infinite ease-in-out;\r\n  }\r\n  .header-eq-wrap span:nth-child(2) { animation-delay: 0.1s; background: var(--m-blue); }\r\n  .header-eq-wrap span:nth-child(3) { animation-delay: 0.2s; }\r\n  .header-eq-wrap span:nth-child(4) { animation-delay: 0.3s; background: var(--m-blue); }\r\n  .header-eq-wrap span:nth-child(5) { animation-delay: 0.4s; }\r\n\r\n  .home-section-subtitle {\r\n    color: var(--m-blue);\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .home-section-title-en {\r\n    font-size: 42px;\r\n    font-weight: 900;\r\n    margin: 0 0 5px 0;\r\n    letter-spacing: -0.5px;\r\n    color: var(--m-text-dark);\r\n    \/* \u91c7\u7528\u6df1\u8272\u5230\u4eae\u84dd\u7684\u9177\u70ab\u6e10\u53d8\u6587\u5b57 *\/\r\n    background: linear-gradient(135deg, var(--m-text-dark) 40%, var(--m-blue) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n  }\r\n\r\n  .home-section-title-cn {\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    color: var(--m-blue);\r\n    margin: 0 0 25px 0;\r\n    letter-spacing: 2px;\r\n  }\r\n\r\n  .home-section-desc {\r\n    color: #0e52b2; \r\n    font-size: 15px;\r\n    line-height: 1.8;\r\n  }\r\n\r\n  \/* \u8bfe\u7a0b\u7f51\u683c - \u66f4\u6539\u4e3aFlex\u5e03\u5c40\u5b9e\u73b0\u4e0d\u8db34\u4e2a\u5c45\u4e2d *\/\r\n  .home-course-grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center; \/* \u6838\u5fc3\uff1a\u4e0d\u8db3\u6ee1\u884c\u65f6\u5c45\u4e2d *\/\r\n    gap: 35px;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* ================================\r\n     \u91cd\u6784\uff1a\u97f3\u4e50\u4e13\u8f91\u5f0f\u5361\u7247\r\n     ================================ *\/\r\n  .music-track-card {\r\n    \/* \u5bbd\u5ea6\u8ba1\u7b97\uff1a100%\u51cf\u53bb3\u4e2agap(3*35=105px)\u540e\u5e73\u52064\u4efd\uff0c\u4fdd\u8bc1\u548c\u539fGrid\u6bd4\u4f8b\u5b8c\u5168\u4e00\u81f4 *\/\r\n    width: calc((100% - 105px) \/ 4);\r\n    background: var(--m-card-bg);\r\n    border-radius: 24px;\r\n    padding: 20px; \/* \u5185\u7f29\u5f0f\u8bbe\u8ba1\uff0c\u50cf\u8f6f\u4ef6UI *\/\r\n    text-decoration: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    box-shadow: 0 15px 40px var(--m-shadow);\r\n    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;\r\n    border: 1px solid rgba(0, 85, 255, 0.05);\r\n  }\r\n\r\n  .music-track-card:hover {\r\n    transform: translateY(-12px);\r\n    box-shadow: 0 25px 50px rgba(0, 85, 255, 0.15);\r\n  }\r\n\r\n  \/* \u5c01\u5957\u7cfb\u7edf *\/\r\n  .album-art-system {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 1 \/ 1;\r\n    margin-bottom: 20px;\r\n    z-index: 1; \/* \u91cd\u8981\uff1a\u4e0d\u8981\u52a0 overflow: hidden\uff0c\u4ee5\u4fbf\u9ed1\u80f6\u6ed1\u51fa *\/\r\n  }\r\n\r\n  \/* \u5b9e\u4f53\u9ed1\u80f6\u5531\u7247\uff1a\u60ac\u6d6e\u81ea\u52a8\u6ed1\u51fa *\/\r\n  .vinyl-record {\r\n    position: absolute;\r\n    top: 5%;\r\n    left: 5%;\r\n    width: 90%;\r\n    height: 90%;\r\n    border-radius: 50%;\r\n    background: #111;\r\n    \/* \u6a21\u62df\u9ed1\u80f6\u7684\u6c9f\u69fd\u6e10\u53d8\u8d28\u611f *\/\r\n    background-image: \r\n      repeating-radial-gradient(circle, #111 0px, #1a1a1a 2px, #111 4px),\r\n      conic-gradient(from 0deg, rgba(255,255,255,0.1) 0%, transparent 25%, rgba(255,255,255,0.1) 50%, transparent 75%, rgba(255,255,255,0.1) 100%);\r\n    box-shadow: 0 0 15px rgba(0,0,0,0.5);\r\n    z-index: 1;\r\n    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n  \r\n  \/* \u9ed1\u80f6\u8f74\u5fc3\u6807\u7b7e *\/\r\n  .vinyl-record::after {\r\n    content: '';\r\n    width: 30%;\r\n    height: 30%;\r\n    background: var(--m-blue);\r\n    border: 4px solid #fff;\r\n    border-radius: 50%;\r\n    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);\r\n  }\r\n  \r\n  \/* \u9ed1\u80f6\u4e2d\u5fc3\u5706\u5b54 *\/\r\n  .vinyl-record::before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 6%;\r\n    height: 6%;\r\n    background: #fff;\r\n    border-radius: 50%;\r\n    z-index: 2;\r\n  }\r\n\r\n  .music-track-card:hover .vinyl-record {\r\n    transform: translateX(45%) rotate(180deg);\r\n  }\r\n\r\n  \/* \u5531\u7247\u5c01\u5957\uff08\u4e13\u8f91\u5c01\u9762\u56fe\u5305\u88f9\uff09 *\/\r\n  .album-sleeve {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    z-index: 2; \/* \u76d6\u5728\u9ed1\u80f6\u4e0a\u9762 *\/\r\n    box-shadow: -5px 0 15px rgba(0,0,0,0.1); \/* \u7ed9\u5c01\u5957\u5de6\u4fa7\u9634\u5f71\u589e\u52a0\u7acb\u4f53\u611f *\/\r\n    background: #000;\r\n  }\r\n\r\n  .album-sleeve img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: transform 0.6s, opacity 0.4s;\r\n  }\r\n\r\n  .music-track-card:hover .album-sleeve img {\r\n    transform: scale(1.05); \/* \u5c01\u5957\u81ea\u8eab\u653e\u5927 *\/\r\n    opacity: 0.9;\r\n  }\r\n\r\n  \/* \u6bdb\u73bb\u7483\u64ad\u653e\u60ac\u6d6e\u952e *\/\r\n  .play-glass-btn {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(0.9);\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(8px);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    opacity: 0;\r\n    transition: all 0.4s ease;\r\n    box-shadow: 0 5px 15px rgba(0, 85, 255, 0.4);\r\n  }\r\n  \r\n  .play-glass-btn::after {\r\n    content: '';\r\n    width: 0; \r\n    height: 0; \r\n    border-top: 8px solid transparent;\r\n    border-bottom: 8px solid transparent;\r\n    border-left: 12px solid var(--m-blue); \r\n    margin-left: 4px; \/* \u4fee\u6b63\u91cd\u5fc3 *\/\r\n  }\r\n\r\n  .music-track-card:hover .play-glass-btn {\r\n    opacity: 1;\r\n    transform: translate(-50%, -50%) scale(1);\r\n  }\r\n\r\n  \/* \u5de6\u4e0a\u89d2\u7acb\u4f53\u6807\u7b7e *\/\r\n  .track-badge {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 12px;\r\n    background: var(--m-text-dark);\r\n    color: #fff;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    padding: 6px 14px;\r\n    border-radius: 8px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  \/* \u6a21\u62df\u64ad\u653e\u5668\u8fdb\u5ea6\u6761 *\/\r\n  .player-progress {\r\n    width: 100%;\r\n    height: 3px;\r\n    background: #e2e8f0;\r\n    border-radius: 3px;\r\n    margin-bottom: 15px;\r\n    overflow: hidden;\r\n  }\r\n  .player-progress-fill {\r\n    width: 0%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, var(--m-cyan), var(--m-blue));\r\n    border-radius: 3px;\r\n    transition: width 0.8s cubic-bezier(0.1, 0.8, 0.3, 1);\r\n  }\r\n  .music-track-card:hover .player-progress-fill {\r\n    width: 100%; \/* \u60ac\u6d6e\u65f6\u8fdb\u5ea6\u6761\u62c9\u6ee1 *\/\r\n  }\r\n\r\n  \/* \u6587\u672c\u4fe1\u606f\u533a *\/\r\n  .track-info-area {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n    z-index: 5;\r\n    position: relative;\r\n  }\r\n\r\n  .track-artist {\r\n    color: var(--m-blue);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .track-title {\r\n    color: var(--m-text-dark);\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    margin: 0 0 10px 0;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .track-desc {\r\n    color: var(--m-text-gray);\r\n    font-size: 13px;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* \u5e95\u90e8\u8054\u52a8 *\/\r\n  .track-footer {\r\n    margin-top: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n\r\n  .track-btn {\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--m-text-dark);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    transition: color 0.3s;\r\n  }\r\n  .music-track-card:hover .track-btn {\r\n    color: var(--m-blue);\r\n  }\r\n  .track-btn span {\r\n    font-size: 16px;\r\n    transition: transform 0.3s;\r\n  }\r\n  .music-track-card:hover .track-btn span {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* \u5e95\u90e8\u72b6\u6001\uff1a\u52a8\u753b\u5747\u8861\u5668\u6ce2\u5f62 *\/\r\n  .status-eq {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 2px;\r\n    height: 14px;\r\n    opacity: 0.3;\r\n    transition: opacity 0.3s;\r\n  }\r\n  .music-track-card:hover .status-eq {\r\n    opacity: 1;\r\n  }\r\n  .status-eq span {\r\n    width: 2px;\r\n    background: var(--m-blue);\r\n    border-radius: 1px;\r\n    animation: eq-bounce 0.8s infinite alternate ease-in-out;\r\n  }\r\n  .status-eq span:nth-child(2) { animation-delay: 0.2s; height: 100%; }\r\n  .status-eq span:nth-child(3) { animation-delay: 0.4s; height: 60%; background: var(--m-cyan);}\r\n  .status-eq span:nth-child(4) { animation-delay: 0.1s; height: 80%; }\r\n\r\n  @keyframes eq-bounce {\r\n    0% { height: 20%; }\r\n    100% { height: 100%; }\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f\u8c03\u6574\uff1a\u91cd\u65b0\u8ba1\u7b97\u5f39\u6027\u76d2\u5b50\u6bd4\u4f8b *\/\r\n  @media (max-width: 1200px) {\r\n    .music-track-card { \r\n      \/* 3\u5217\uff1a\u51cf\u53bb2\u4e2agap(2*35=70px) *\/\r\n      width: calc((100% - 70px) \/ 3); \r\n    } \r\n  }\r\n  @media (max-width: 900px) {\r\n    .music-track-card { \r\n      \/* 2\u5217\uff1a\u51cf\u53bb1\u4e2agap(35px) *\/\r\n      width: calc((100% - 35px) \/ 2); \r\n    } \r\n    .music-track-card:hover .vinyl-record { transform: translateX(30%) rotate(180deg); }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .home-courses-section { padding: 80px 4%; }\r\n    .home-course-grid { max-width: 360px; margin: 0 auto;}\r\n    .music-track-card { width: 100%; }\r\n    .home-section-title-en { font-size: 30px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"home-courses-section\">\r\n  \r\n  <div class=\"home-section-header\">\r\n    <div class=\"header-eq-wrap\">\r\n      <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n    <\/div>\r\n    <div class=\"home-section-subtitle\">EST. 2020 - A CAPPELLA<\/div>\r\n    \r\n    <h2 class=\"home-section-title-en\">STAR SOUND JOY STUDIO<\/h2>\r\n    <h3 class=\"home-section-title-cn\">Star Sound Joy Music Studio<\/h3>\r\n    \r\n    <p class=\"home-section-desc\">\r\n      Founded in 2020, Star Sound Joy Music Studio is a music organization that specializes in a cappella a cappella oratorio (choral) and vocal instruction, supplemented by comprehensive courses in popular dance. In addition to professional and responsible individual teaching, we also write and rehearse a cappella songs tailor-made for major corporations, schools, performances and concerts, allowing this form of music to enter all levels of society.<br><br>\r\n      Here, you no longer just look up to the performances of a cappella teams on the Internet and TV programs, you can personally learn to experience the strongest harmonic beauty brought by a cappella, the heavenly music is composed by you, and you can feel the deepest bond between people. In this gathering place of popular music culture, let the music move you, move me, move him (her)!\r\n    <\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"home-course-grid\">\r\n    \r\n        \r\n    <!-- \u5361\u7247\u5b9e\u4f53\uff1a\u5145\u5f53\u64ad\u653e\u5668\u5e95\u5ea7 -->\r\n    <a href=\"https:\/\/2013.webk.svipwebs.com\/en\/beatbox-bootcamp\/\" class=\"music-track-card\">\r\n      \r\n      <!-- \u89c6\u542c\u5c01\u5957\u7cfb\u7edf\uff1a\u5305\u88f9\u9ed1\u80f6\u548c\u5c01\u9762 -->\r\n      <div class=\"album-art-system\">\r\n        <!-- \u7edd\u5bf9\u5b9a\u4f4d\u7684\u9ed1\u80f6\u5531\u7247\uff1a\u60ac\u6d6e\u65f6\u6ed1\u51fa\uff01 -->\r\n        <div class=\"vinyl-record\"><\/div>\r\n        \r\n        <!-- \u56fe\u7247\u5c01\u5957\u672c\u8eab -->\r\n        <div class=\"album-sleeve\">\r\n          <span class=\"track-badge\">COURSE<\/span>\r\n          <img decoding=\"async\" src=\"https:\/\/2013.webk.svipwebs.com\/wp-content\/uploads\/2019\/03\/10021537874.png\" alt=\"Beatbox introduction\">\r\n          <div class=\"play-glass-btn\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <!-- \u6587\u672c\u4e0e\u72b6\u6001\u533a -->\r\n      <div class=\"track-info-area\">\r\n        <!-- \u6a21\u62df\u8f68\u9053\u8fdb\u5ea6\u6761 -->\r\n        <div class=\"player-progress\">\r\n          <div class=\"player-progress-fill\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"track-artist\">BEATBOX BOOTCAMP<\/div>\r\n        <h4 class=\"track-title\">Beatbox introduction<\/h4>\r\n        <p class=\"track-desc\">Master the core triads of the base drum, pedal cymbal, and snare to build your powerful rhythm engine from the ground up.<\/p>\r\n        \r\n        <div class=\"track-footer\">\r\n          <span class=\"track-btn\">PLAY TRACK <span>\u2192<\/span><\/span>\r\n          <div class=\"status-eq\">\r\n            <span><\/span><span><\/span><span><\/span><span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n    \r\n    \r\n  <\/div>\r\n<\/section>\n<style>\r\n  \/* =========================================\r\n     HOME SECTION 3: MENTORS (\u6781\u7b80\u6d41\u5a92\u4f53\u00b7\u78e8\u7802\u60ac\u6d6e\u98ce + \u65e0\u7f1d\u8fc7\u6e21\u7248)\r\n     ========================================= *\/\r\n\r\n  .homethree-section {\r\n    \/* \u589e\u52a0\u4e0a\u4e0b padding\uff0c\u4e3a\u8fc7\u6e21\u5c42\u7559\u51fa\u5145\u8db3\u547c\u5438\u7a7a\u95f4 *\/\r\n    padding: 120px 5% 140px 5%; \r\n    \/* \u6838\u5fc3\u80cc\u666f\uff1a\u4ece\u4e0a\u4e00\u6a21\u5757\u7684 #071326 \u6e10\u53d8\u5230\u5f53\u524d\u7684\u6df1\u5e7d\u84dd\uff0c\u518d\u5230\u5e95\u90e8\u7684\u6781\u9ed1 *\/\r\n    background: linear-gradient(180deg, #071326 0%, #040A18 15%, #040A18 85%, #020610 100%);\r\n    position: relative;\r\n    z-index: 2;\r\n    overflow: hidden;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\r\n  }\r\n\r\n  \/* --- \u9876\u90e8\u8fc7\u6e21\u906e\u7f69\uff1a\u9632\u751f\u786c\u65ad\u5c42 --- *\/\r\n  .homethree-top-fade {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100px;\r\n    background: linear-gradient(180deg, rgba(7, 19, 38, 1) 0%, transparent 100%);\r\n    z-index: 3;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* --- \u5e95\u90e8\u8fc7\u6e21\u906e\u7f69\u4e0e\u5149\u6548\u6536\u5c3e --- *\/\r\n  .homethree-bottom-fade {\r\n    position: absolute;\r\n    bottom: 0; left: 0; width: 100%; height: 150px;\r\n    background: linear-gradient(0deg, #020610 0%, rgba(2, 6, 16, 0.5) 50%, transparent 100%);\r\n    z-index: 3;\r\n    pointer-events: none;\r\n  }\r\n  .homethree-bottom-line {\r\n    position: absolute;\r\n    bottom: 0; left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 70%; height: 1px;\r\n    background: radial-gradient(circle, rgba(0, 242, 255, 0.4) 0%, transparent 80%);\r\n    z-index: 4;\r\n    box-shadow: 0 -5px 20px rgba(0, 242, 255, 0.1);\r\n  }\r\n\r\n  \/* --- \u6c1b\u56f4\u5149\u6655\u5c42 --- *\/\r\n  .homethree-ambient {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    overflow: hidden;\r\n  }\r\n  .homethree-ambient::before,\r\n  .homethree-ambient::after {\r\n    content: '';\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(120px);\r\n    opacity: 0.35;\r\n    animation: ht-glow-move 15s ease-in-out infinite alternate;\r\n  }\r\n  .homethree-ambient::before {\r\n    width: 600px; height: 600px;\r\n    background: #0055ff;\r\n    top: -150px; left: -100px;\r\n  }\r\n  .homethree-ambient::after {\r\n    width: 500px; height: 500px;\r\n    background: #00f2ff;\r\n    bottom: -100px; right: -50px;\r\n    animation-delay: -5s;\r\n  }\r\n  @keyframes ht-glow-move {\r\n    0% { transform: translate(0, 0) scale(1); }\r\n    100% { transform: translate(150px, 100px) scale(1.2); }\r\n  }\r\n\r\n  \/* \u9876\u90e8\u5f15\u8a00\u533a *\/\r\n  .homethree-header {\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n    position: relative;\r\n    z-index: 10;\r\n  }\r\n\r\n  .homethree-subtitle {\r\n    color: #00f2ff;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    letter-spacing: 4px;\r\n    margin-bottom: 20px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n  }\r\n  .homethree-subtitle::before,\r\n  .homethree-subtitle::after {\r\n    content: '';\r\n    width: 40px; height: 1px;\r\n    background: rgba(0, 242, 255, 0.5);\r\n  }\r\n\r\n  .homethree-title-en {\r\n    font-size: 44px;\r\n    font-weight: 900;\r\n    margin: 0 0 10px 0;\r\n    font-style: italic;\r\n    letter-spacing: 1px;\r\n    color: #fff;\r\n    text-shadow: 0 10px 30px rgba(0, 85, 255, 0.3);\r\n  }\r\n\r\n  .homethree-title-en span {\r\n    color: transparent;\r\n    -webkit-text-stroke: 1px #00f2ff;\r\n    background: linear-gradient(90deg, #fff, #00f2ff);\r\n    -webkit-background-clip: text;\r\n  }\r\n\r\n  .homethree-title-cn {\r\n    font-size: 20px;\r\n    color: rgba(255,255,255,0.7);\r\n    font-weight: 400;\r\n    letter-spacing: 2px;\r\n  }\r\n\r\n  \/* \u5bfc\u5e08\u7f51\u683c - \u6539\u4e3a Flexbox \u5e03\u5c40\u5b9e\u73b0\u5c45\u4e2d *\/\r\n  .homethree-grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center; \/* \u6838\u5fc3\uff1a\u4e0d\u6ee1 4 \u4e2a\u65f6\u5c45\u4e2d\u663e\u793a *\/\r\n    gap: 30px;\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* \u5355\u4e2a\u5bfc\u5e08\u5361\u7247 - \u8c03\u6574\u5bbd\u5ea6\u8ba1\u7b97 *\/\r\n  .homethree-card {\r\n    position: relative;\r\n    \/* 4\u5217\u8ba1\u7b97\uff1a(100% - 3\u4e2agap(90px)) \/ 4 *\/\r\n    width: calc((100% - 90px) \/ 4);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    background: #081224;\r\n    aspect-ratio: 3 \/ 4;\r\n    cursor: default;\r\n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\r\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);\r\n    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  }\r\n\r\n  .homethree-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: \r\n      -10px 20px 40px rgba(0, 85, 255, 0.3),\r\n       10px 20px 40px rgba(0, 242, 255, 0.15),\r\n       inset 0 0 0 1px rgba(0, 242, 255, 0.4);\r\n  }\r\n\r\n  \/* \u5bfc\u5e08\u7167\u7247\u5904\u7406 *\/\r\n  .homethree-img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center 20%;\r\n    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;\r\n    filter: grayscale(40%) contrast(1.1) brightness(0.85); \r\n  }\r\n  .homethree-card:hover .homethree-img {\r\n    transform: scale(1.08); \r\n    filter: grayscale(0%) contrast(1.05) brightness(1); \r\n  }\r\n\r\n  \/* \u5e95\u90e8\u6e10\u6e10\u900f\u51fa\u7684\u6697\u8272\u9636\u68af *\/\r\n  .homethree-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(to top, rgba(4, 10, 24, 0.9) 0%, rgba(4, 10, 24, 0.2) 50%, transparent 100%);\r\n    opacity: 0.6;\r\n    transition: opacity 0.4s;\r\n    pointer-events: none;\r\n  }\r\n  .homethree-card:hover::after { opacity: 0.9; }\r\n\r\n  \/* \u6838\u5fc3\uff1a\u9ad8\u65af\u6a21\u7cca\u62bd\u5c49\u9762\u677f\uff08Glassmorphism\uff09 *\/\r\n  .homethree-glass-panel {\r\n    position: absolute;\r\n    bottom: 15px; left: 15px; right: 15px;\r\n    background: rgba(10, 25, 55, 0.4); \r\n    backdrop-filter: blur(12px); \r\n    -webkit-backdrop-filter: blur(12px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 16px;\r\n    padding: 20px 20px;\r\n    z-index: 10;\r\n    \r\n    max-height: 80px; \r\n    overflow: hidden;\r\n    transition: max-height 0.6s cubic-bezier(0.19, 1, 0.22, 1), background 0.4s;\r\n  }\r\n\r\n  .homethree-card:hover .homethree-glass-panel {\r\n    max-height: 300px; \r\n    background: rgba(10, 25, 55, 0.7);\r\n    border-color: rgba(0, 242, 255, 0.3);\r\n  }\r\n\r\n  .homethree-name-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 6px;\r\n  }\r\n\t.homethree-name a { color: #fff;}\r\n  .homethree-name {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #fff;\r\n    margin: 0;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  \/* EQ\u97f3\u8f68\u52a8\u753b *\/\r\n  .homethree-eq {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 3px;\r\n    height: 16px;\r\n    opacity: 0.5;\r\n    transition: opacity 0.3s;\r\n  }\r\n  .homethree-card:hover .homethree-eq { opacity: 1; }\r\n  \r\n  .ht-eq-bar {\r\n    width: 3px;\r\n    background: #00f2ff;\r\n    border-radius: 2px;\r\n    animation: ht-eq-bounce 1.2s ease infinite alternate;\r\n  }\r\n  .ht-eq-bar:nth-child(1) { animation-duration: 0.8s; height: 100%; }\r\n  .ht-eq-bar:nth-child(2) { animation-duration: 1.0s; height: 60%; }\r\n  .ht-eq-bar:nth-child(3) { animation-duration: 0.9s; height: 80%; }\r\n  .ht-eq-bar:nth-child(4) { animation-duration: 1.1s; height: 40%; }\r\n  \r\n  @keyframes ht-eq-bounce {\r\n    0% { transform: scaleY(0.3); transform-origin: bottom; }\r\n    100% { transform: scaleY(1); transform-origin: bottom; box-shadow: 0 0 5px #00f2ff; }\r\n  }\r\n\r\n  .homethree-role {\r\n    color: rgba(255, 255, 255, 0.6);\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    margin-bottom: 0;\r\n    transition: margin 0.4s;\r\n  }\r\n  .homethree-card:hover .homethree-role {\r\n    margin-bottom: 15px; \r\n    color: #00f2ff;\r\n  }\r\n\r\n  .homethree-hidden-content {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;\r\n  }\r\n  .homethree-card:hover .homethree-hidden-content {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .homethree-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    margin-bottom: 12px;\r\n    border-top: 1px solid rgba(255,255,255,0.1);\r\n    padding-top: 15px;\r\n  }\r\n\r\n  .homethree-tag {\r\n    background: rgba(0, 242, 255, 0.1);\r\n    color: rgba(255,255,255,0.9);\r\n    font-size: 11px;\r\n    padding: 4px 10px;\r\n    border-radius: 6px;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .homethree-bio {\r\n    color: rgba(255,255,255,0.5);\r\n    font-size: 12px;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n    display: -webkit-box;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-line-clamp: 4; \r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* VIP \u5927\u5496\u4e13\u5c5e\u9ad8\u4eae\u8272 *\/\r\n  .homethree-card.homethree-vip-card .homethree-glass-panel {\r\n    border-color: rgba(0, 150, 255, 0.4);\r\n  }\r\n  .homethree-card.homethree-vip-card .ht-eq-bar {\r\n    background: #4a72ff;\r\n    box-shadow: 0 0 5px #4a72ff;\r\n  }\r\n  .homethree-card.homethree-vip-card:hover .homethree-role {\r\n    color: #4a72ff;\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f\u9002\u914d *\/\r\n  @media (max-width: 1024px) {\r\n    \/* 2\u5217\u8ba1\u7b97\uff1a(100% - 1\u4e2agap(30px)) \/ 2 *\/\r\n    .homethree-card { width: calc((100% - 30px) \/ 2); }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .homethree-section { padding: 80px 5% 100px 5%; }\r\n    .homethree-ambient { display: none; } \r\n    \/* \u79fb\u52a8\u7aef\u5f3a\u5236\u5355\u5217 *\/\r\n    .homethree-card { width: 100%; max-width: 380px; }\r\n    .homethree-grid { flex-direction: column; align-items: center; } \r\n    .homethree-title-en { font-size: 32px; }\r\n    \r\n    .homethree-img { filter: grayscale(0%) contrast(1.05); }\r\n    .homethree-glass-panel { max-height: 300px; background: rgba(10, 25, 55, 0.8); }\r\n    .homethree-hidden-content { opacity: 1; transform: translateY(0); }\r\n    .homethree-role { margin-bottom: 15px; color: #00f2ff; }\r\n    .homethree-eq { opacity: 1; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"homethree-section\">\r\n  \r\n  <!-- \u8fb9\u754c\u8fc7\u6e21\u5c42 -->\r\n  <div class=\"homethree-top-fade\"><\/div>\r\n\r\n  <!-- \u8d85\u8d28\u611f\u5149\u6548\u6c1b\u56f4\u5c42 -->\r\n  <div class=\"homethree-ambient\"><\/div>\r\n\r\n  <div class=\"homethree-header\">\r\n    <div class=\"homethree-subtitle\">TEAM OF EXPERTS<\/div>\r\n    <h2 class=\"homethree-title-en\">MASTER <span>MENTORS<\/span><\/h2>\r\n    <h3 class=\"homethree-title-cn\">Not just a mentor, but a force of sound that reshapes the stage<\/h3>\r\n  <\/div>\r\n\r\n  <div class=\"homethree-grid\">\r\n    \r\n    <!-- \u5355\u5f20\u5361\u7247 -->\r\n    <div class=\"homethree-card\">\r\n      <!-- \u80cc\u5e95\u5927\u56fe -->\r\n      <img decoding=\"async\" src=\"https:\/\/2013.webk.svipwebs.com\/wp-content\/uploads\/2026\/04\/10021808765-scaled.jpg\" alt=\"Mr. Chen Liu\" class=\"homethree-img\">\r\n      \r\n      <!-- \u78e8\u7802\u73bb\u7483\u62bd\u5c49\u9762\u677f -->\r\n      <div class=\"homethree-glass-panel\">\r\n        \r\n        <!-- \u6c38\u8fdc\u663e\u793a\u7684\u90e8\u5206\uff08\u540d\u5b57+\u97f3\u9891\u67f1+\u5934\u8854\uff09 -->\r\n        <div class=\"homethree-name-row\">\r\n\t\t\t<h4 class=\"homethree-name\"><a target=\"_blank\" href=\"\/en\/liuchenlaoshi\/\">Mr. Chen Liu<\/a><\/h4>\r\n          <!-- \u8df3\u52a8\u7684 EQ \u97f3\u8f68\u89c6\u89c9\u8bbe\u8ba1 -->\r\n          <div class=\"homethree-eq\">\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"homethree-role\">A Cappella Tutor<\/div>\r\n\r\n        <!-- \u53ea\u6709\u60ac\u6d6e\u65f6\u624d\u5c55\u5f00\u7684\u90e8\u5206\uff08\u6807\u7b7e+\u7b80\u4ecb\uff09 -->\r\n        <div class=\"homethree-hidden-content\">\r\n          <div class=\"homethree-tags\">\r\n                                <span class=\"homethree-tag\">a cappella (music)<\/span>\r\n                      <\/div>\r\n          <p class=\"homethree-bio\">Graduated from Xinghai Conservatory of Music majoring in Pop Music Performance, specializing in Pop Singing, Trapeze Dance and Piano. She is the founder of the Vocal A Cappella Ensemble and the director of the Star Music Studio, specializing in a cappella teaching and performance arrangement.<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    \r\n    <!-- \u5355\u5f20\u5361\u7247 -->\r\n    <div class=\"homethree-card\">\r\n      <!-- \u80cc\u5e95\u5927\u56fe -->\r\n      <img decoding=\"async\" src=\"https:\/\/2013.webk.svipwebs.com\/wp-content\/uploads\/2026\/04\/10022211712.png\" alt=\"Mr. Zeng Zhuo\" class=\"homethree-img\">\r\n      \r\n      <!-- \u78e8\u7802\u73bb\u7483\u62bd\u5c49\u9762\u677f -->\r\n      <div class=\"homethree-glass-panel\">\r\n        \r\n        <!-- \u6c38\u8fdc\u663e\u793a\u7684\u90e8\u5206\uff08\u540d\u5b57+\u97f3\u9891\u67f1+\u5934\u8854\uff09 -->\r\n        <div class=\"homethree-name-row\">\r\n\t\t\t<h4 class=\"homethree-name\"><a target=\"_blank\" href=\"\/en\/zengzhuo\/\">Mr. Zeng Zhuo<\/a><\/h4>\r\n          <!-- \u8df3\u52a8\u7684 EQ \u97f3\u8f68\u89c6\u89c9\u8bbe\u8ba1 -->\r\n          <div class=\"homethree-eq\">\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n            <span class=\"ht-eq-bar\"><\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"homethree-role\">Beatbox Tutors<\/div>\r\n\r\n        <!-- \u53ea\u6709\u60ac\u6d6e\u65f6\u624d\u5c55\u5f00\u7684\u90e8\u5206\uff08\u6807\u7b7e+\u7b80\u4ecb\uff09 -->\r\n        <div class=\"homethree-hidden-content\">\r\n          <div class=\"homethree-tags\">\r\n                                <span class=\"homethree-tag\">Beatbox | Acapella | Vocal Percussion<\/span>\r\n                      <\/div>\r\n          <p class=\"homethree-bio\">Graduated from Wuhan Conservatory of Music. In high school through the school Beatbox club contact and study the art of vocal rhythm, during the university to join the a cappella choir, long-term team vocal percussion (VP) voice, accumulated a wealth of live performances, competitions and teaching experience, specializing in a cappella in the vocal percussion arrangement and guidance. (Artistic name THIRASH)<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n    \r\n      <\/div>\r\n\r\n  <!-- \u8fb9\u754c\u5e95\u90e8\u6e10\u53d8\u878d\u5408\u5c42 & \u53d1\u6563\u5149\u8f68\u7ebf -->\r\n  <div class=\"homethree-bottom-fade\"><\/div>\r\n  <div class=\"homethree-bottom-line\"><\/div>\r\n\r\n<\/section>\n<style>\r\n  \/* =========================================\r\n     HOME CONTACT BAR - \u3010\u5f55\u97f3\u5ba4\u5927\u5e08\u63a7\u5236\u53f0\u3011\u6700\u7ec8\u4f18\u5316\u7248\r\n     ========================================= *\/\r\n  :root {\r\n    --st-cyan: #00f2ff;\r\n    --st-blue: #0066ff;\r\n    --st-bg-dark: #0a1120;             \/* \u6df1\u8272\u80cc\u666f *\/\r\n    --st-panel-bg: rgba(16, 26, 48, 0.8); \/* \u6a21\u5757\u80cc\u666f *\/\r\n    --st-border-color: rgba(0, 242, 255, 0.15); \/* \u8fb9\u6846\u9ed8\u8ba4\u8272 *\/\r\n    --st-text-color: #e0e6ed;          \/* \u4e3b\u8981\u6587\u672c\u8272 *\/\r\n    --st-label-color: #94a3b8;         \/* \u6807\u7b7e\u6587\u672c\u8272 *\/\r\n    --st-hover-panel: rgba(16, 26, 48, 1); \/* \u60ac\u6d6e\u65f6\u6a21\u5757\u80cc\u666f *\/\r\n    --st-glow-shadow: rgba(0, 242, 255, 0.3); \/* \u8367\u5149\u9634\u5f71 *\/\r\n  }\r\n\r\n  .home-contact-bar {\r\n    position: relative;\r\n    z-index: 25;\r\n    width: 100%;\r\n    background: var(--st-bg-dark);\r\n    padding: 60px 4%; \/* \u5de6\u53f3\u5185\u8fb9\u8ddd\u7565\u51cf\uff0c\u9002\u5e94\u66f4\u5e7f *\/\r\n    overflow: hidden;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  \/* \u80cc\u666f\uff1a\u6a21\u62df\u8bbe\u5907\u6563\u70ed\u5b54\/\u9632\u6ed1\u7eb9\u7406 *\/\r\n  .home-contact-bar::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(0, 242, 255, 0.04) 1px, transparent 1px);\r\n    background-size: 25px 25px; \/* \u7eb9\u7406\u5bc6\u5ea6\u5fae\u8c03 *\/\r\n    opacity: 0.6;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n\r\n  .contact-bar-container {\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    \/* \u91c7\u7528\u66f4\u7075\u6d3b\u7684\u7f51\u683c\u5e03\u5c40\uff0c\u6839\u636e\u5185\u5bb9\u81ea\u52a8\u5206\u914d\u5bbd\u5ea6 *\/\r\n    grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); \r\n    gap: 25px; \/* \u589e\u52a0\u95f4\u8ddd *\/\r\n    align-items: stretch;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  \r\n  \/* \u516c\u53f8\u540d\u7279\u6b8a\u6837\u5f0f\uff1a\u6a21\u62df\u8bbe\u5907\u54c1\u724cLogo *\/\r\n  .contact-brand {\r\n    grid-column: 1 \/ -1; \/* \u6a2a\u8de8\u6574\u884c *\/\r\n    margin-bottom: 25px; \/* \u589e\u52a0\u54c1\u724c\u4e0e\u9879\u76ee\u95f4\u7684\u95f4\u8ddd *\/\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n  }\r\n  .contact-brand h2 {\r\n    font-size: 18px; \/* \u589e\u5927\u5b57\u4f53 *\/\r\n    letter-spacing: 5px; \/* \u589e\u52a0\u5b57\u95f4\u8ddd *\/\r\n    color: var(--st-text-color);\r\n    margin: 0;\r\n    text-transform: uppercase;\r\n    background: linear-gradient(90deg, #fff 30%, var(--st-cyan) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    font-weight: 800; \/* \u52a0\u7c97 *\/\r\n  }\r\n  .contact-brand-line {\r\n    flex-grow: 1;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--st-cyan), transparent);\r\n    opacity: 0.4;\r\n  }\r\n\r\n  \/* \u6bcf\u4e2a\u8054\u7cfb\u5355\u5143\u683c\uff1a\u6a21\u62df\u8c03\u97f3\u53f0\u6a21\u5757 *\/\r\n  .contact-item {\r\n    background: var(--st-panel-bg);\r\n    border: 1px solid var(--st-border-color);\r\n    border-radius: 12px;\r\n    padding: 25px;\r\n    display: flex;\r\n    align-items: flex-start; \/* \u9876\u90e8\u5bf9\u9f50\u56fe\u6807\u548c\u6587\u672c *\/\r\n    gap: 18px;\r\n    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);\r\n    position: relative;\r\n    overflow: hidden;\r\n    backdrop-filter: blur(10px);\r\n  }\r\n\r\n  \/* \u60ac\u6d6e\u6548\u679c\uff1a\u6a21\u62df\u8bbe\u5907\u88ab\u6fc0\u6d3b\u901a\u7535 *\/\r\n  .contact-item:hover {\r\n    transform: translateY(-8px);\r\n    background: var(--st-hover-panel);\r\n    box-shadow: 0 12px 35px var(--st-glow-shadow);\r\n  }\r\n  \r\n  \/* \u6d41\u5149\u8fb9\u6846\u52a8\u753b *\/\r\n  .contact-item::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; left: -50%;\r\n    width: 200%; height: 200%;\r\n    background: linear-gradient(60deg, transparent, rgba(0, 242, 255, 0.4), transparent);\r\n    transform: rotate(15deg);\r\n    transition: all 0.7s ease;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n  .contact-item:hover::after {\r\n    left: 100%;\r\n    opacity: 1;\r\n    transition: all 0.7s ease;\r\n  }\r\n\r\n  \/* \u56fe\u6807\u5bb9\u5668\u53ca\u6837\u5f0f\uff1a\u50cf\u63a7\u5236\u65cb\u94ae \/ \u6307\u793a\u706f *\/\r\n  .contact-icon {\r\n    width: 48px; min-width: 48px; \/* \u56fa\u5b9a\u5bbd\u5ea6\uff0c\u907f\u514d\u6587\u672c\u8fc7\u957f\u9020\u6210\u7684\u5e03\u5c40\u95ee\u9898 *\/\r\n    height: 48px;\r\n    background: linear-gradient(145deg, #152540, #0a1120);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: var(--st-cyan);\r\n    font-size: 22px; \/* SVG \u56fe\u6807\u4e0d\u9700\u8981 font-size\uff0c\u4f46\u4fdd\u7559\u6b64\u5c5e\u6027\u53ef\u7528\u4e8e\u8c03\u6574 Padding *\/\r\n    border: 2px solid rgba(255,255,255,0.05);\r\n    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  .contact-icon svg {\r\n    width: 50%; \/* \u63a7\u5236 SVG \u5c3a\u5bf8 *\/\r\n    height: 50%;\r\n    fill: var(--st-cyan); \/* SVG \u989c\u8272 *\/\r\n    transition: fill 0.3s ease;\r\n  }\r\n  .contact-item:hover .contact-icon svg {\r\n    fill: #fff; \/* \u60ac\u505c\u65f6\u56fe\u6807\u53d8\u767d\uff0c\u66f4\u52a0\u7a81\u51fa *\/\r\n  }\r\n\r\n  .contact-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1; \/* \u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\r\n  }\r\n\r\n  .contact-text-label {\r\n    font-size: 11px;\r\n    text-transform: uppercase;\r\n    color: var(--st-label-color);\r\n    letter-spacing: 1.5px;\r\n    margin-bottom: 5px;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .contact-text-value {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: var(--st-text-color);\r\n    word-break: break-word; \/* \u5141\u8bb8\u957f\u6587\u672c\u81ea\u52a8\u6362\u884c *\/\r\n    line-height: 1.4;\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f *\/\r\n  @media (max-width: 768px) {\r\n    .home-contact-bar { padding: 40px 4%; }\r\n    .contact-bar-container { gap: 20px; }\r\n    .contact-item { padding: 20px; flex-direction: column; align-items: center; text-align: center; gap: 10px; }\r\n    .contact-text-label { margin-bottom: 2px; }\r\n    .contact-text-value { font-size: 15px; }\r\n    .contact-brand h2 { font-size: 16px; letter-spacing: 3px; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"home-contact-bar\">\r\n  <div class=\"contact-bar-container\">\r\n    \r\n    <!-- \u54c1\u724c\u533a -->\r\n    <div class=\"contact-brand\">\r\n      <h2>Shenzhen Bao'an District Star Sound Joy Music Studio<\/h2>\r\n      <div class=\"contact-brand-line\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- \u5730\u5740 -->\r\n    <a href=\"https:\/\/maps.google.com\/?q=\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u65ed\u751fB\u533a6\u680b\u7efc\u5408\u697c602\" target=\"_blank\" class=\"contact-item\">\r\n      <div class=\"contact-icon\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n      <\/div>\r\n      <div class=\"contact-text\">\r\n        <span class=\"contact-text-label\">Studio Location<\/span>\r\n        <span class=\"contact-text-value\">602, Complex Building, Building 6, Xusheng B, Gongle Community, Xixiang Street, Bao'an District, Shenzhen, China<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n\r\n    <!-- \u90ae\u7bb1 -->\r\n    <a href=\"mailto:yeshenyuetian@sina.com\" class=\"contact-item\">\r\n      <div class=\"contact-icon\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n      <\/div>\r\n      <div class=\"contact-text\">\r\n        <span class=\"contact-text-label\">Official Email<\/span>\r\n        <span class=\"contact-text-value\">yeshenyuetian@sina.com<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- \u5de5\u4f5c\u65f6\u95f4 -->\r\n    <div class=\"contact-item\">\r\n      <div class=\"contact-icon\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"\/><\/svg>\r\n      <\/div>\r\n      <div class=\"contact-text\">\r\n        <span class=\"contact-text-label\">Service Hours<\/span>\r\n        <span class=\"contact-text-value\">10:00 - 21:00 (Tue - Sun)<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template\/homepage1.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-673","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/pages\/673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":76,"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/pages\/673\/revisions"}],"predecessor-version":[{"id":2344,"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/pages\/673\/revisions\/2344"}],"wp:attachment":[{"href":"https:\/\/2013.webk.svipwebs.com\/en\/wp-json\/wp\/v2\/media?parent=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}