{"id":1472,"date":"2025-10-25T13:22:40","date_gmt":"2025-10-25T05:22:40","guid":{"rendered":"https:\/\/purestudio.com.tw\/official\/?page_id=1472"},"modified":"2026-02-26T13:06:29","modified_gmt":"2026-02-26T05:06:29","slug":"history","status":"publish","type":"page","link":"https:\/\/purestudio.com.tw\/official\/history\/","title":{"rendered":"\u767c\u5c55\u6cbf\u9769"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"circular-timeline-wrapper\" style=\"width:100%;height:460px;border:none;overflow: hidden; background-color: #e2e2e2;\">\n  <style>\n    \/* \ud83c\udfa8 1. \u80cc\u666f\u8207\u7db2\u683c *\/\n    .circular-timeline-wrapper { position: relative; z-index: 0; font-family: sans-serif; }\n    .circular-timeline-wrapper::before {\n      content: \"\"; position: absolute; inset: 0; z-index: -1;\n      background-image: radial-gradient(#807b7b 1px, transparent 1.1px);\n      background-size: 45px 45px;\n      animation: grid-breathing 4s ease-in-out infinite alternate;\n    }\n    @keyframes grid-breathing { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }\n\n    \/* \u2699\ufe0f 2. \u4f48\u5c40\u6838\u5fc3 (\u63a7\u5236\u5713\u76e4\u5927\u5c0f) *\/\n    .cards-container {\n      --radius: 37vw; \/* \u5713\u76e4\u534a\u5f91 *\/\n      --size: calc(var(--radius) * 2);\n      position: relative; margin: 2rem auto;\n      width: var(--size); height: var(--size);\n      padding: 2rem; user-select: none;\n    }\n\n    \/* \ud83d\udcf1 \u624b\u6a5f\u7248\u8abf\u6574 (\u87a2\u5e55\u5c0f\u65bc 800px) *\/\n    @media (max-width: 799px) { \n      .cards-container { --radius: 41vw; } \/* \ud83d\udc48 1. \u5efa\u8b70\u5f9e 35vw \u7e2e\u5c0f\u5230 30vw\uff0c\u9019\u6703\u8b93\u5e74\u4efd\u6a19\u7c64\u6536\u7e2e\uff0c\u4e0d\u906e\u64cb\u6587\u5b57 *\/\n      \n      \/* \u3010\u624b\u6a5f\u7248\u6a19\u984c\u5927\u5c0f\u3011 *\/\n      .cards li h2 {\n        top: 1.65rem !important;\n        font-size: 1.4rem !important;} \n\n      \/* \u3010\u624b\u6a5f\u7248\u5167\u6587\u4f4d\u7f6e\u3011\u8abf\u6574 top \u6578\u503c\u8d8a\u5c0f\uff0c\u96e2\u6a19\u984c\u8d8a\u8fd1 *\/\n      .cards li p { \n        top: 5.0rem !important; \n        font-size: 0.85rem !important; \n        width: 80vw !important;\n      }\n    }\n\n    \/* \ud83d\udda5\ufe0f \u96fb\u8166\u7248\u8abf\u6574 (\u87a2\u5e55\u5927\u65bc 800px) *\/\n    @media (min-width: 800px) { .cards-container { --radius: 30vw; } }\n\n    \/* \ud83d\udfe0 3. \u5713\u76e4\u65cb\u8f49\u6838\u5fc3 *\/\n    .cards {\n      position: absolute; inset: 2rem; border-radius: 50%;\n      list-style: none; padding: 0; margin: 0;\n      transition: transform 0.7s cubic-bezier(0.32, 1, 0.23, 1);\n      will-change: transform;\n    }\n    .cards li {\n      position: absolute; inset: 0; transform-origin: center;\n      display: grid; place-content: center;\n      transform: rotate(calc(var(--i) * (360deg \/ 10)));\n      pointer-events: none;\n    }\n\n    \/* \ud83d\udd18 4. \u5e74\u4efd\u6a19\u7c64\u8207\u5713\u9ede\u6a23\u5f0f *\/\n    .cards li > label {\n      position: absolute; inset: 0; margin: auto;\n      transform: translateY(calc(var(--radius) * -1 - 1rem));\n      height: 40px; cursor: pointer; pointer-events: auto;\n      text-align: center; color: #666; font-size: clamp(.8rem, 2.5vw, 1rem);\n      transition: color 0.3s, font-weight 0.3s;\n    }\n    .cards li > label::before {\n      content: \"\"; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%);\n      width: 10px; height: 10px; border-radius: 50%; background-color: currentColor;\n    }\n    .cards li > label::after {\n      content: \"\"; position: absolute; top: 88%; left: 50%; transform: translateX(-50%);\n      width: 1.5px; height: 0; background-color: #37505D; transition: height 0.3s;\n    }\n\n    \/* \ud83c\udff7\ufe0f 5. \u6587\u5b57\u5167\u5bb9\u6a23\u5f0f (\u96fb\u8166\u7248\u9810\u8a2d) *\/\n    .cards li h2, .cards li p {\n      background-color: #e2e2e2; position: absolute; left: 50%;\n      text-align: center; transform: translate(-50%, 30px);\n      opacity: 0; transition: all 0.5s ease; width: min(75vw, 550px);\n      pointer-events: none;\n    }\n\n    \/* \u3010\u96fb\u8166\u7248\u6a19\u984c\u5927\u5c0f\u8207\u984f\u8272\u3011 *\/\n    .cards li h2 { \n      top: 1.8rem; \n      font-size: 1.8rem; \n      font-weight: bold; \n      color: #37505D; \n    }\n\n    \/* \u3010\u96fb\u8166\u7248\u5167\u6587\u4f4d\u7f6e\u8207\u5927\u5c0f\u3011 *\/\n    .cards li p { \n      top: 7.5rem; \n      font-size: 0.95rem; \n      line-height: 1.6; \n      color: #444; \n    }\n\n    \/* \u2705 6. \u555f\u52d5\u72c0\u614b\u6a23\u5f0f (\u555f\u52d5\u5f8c\u7684\u52d5\u756b\u7d30\u7bc0) *\/\n    .cards li.active-item > label { color: #37505D; font-weight: bold; }\n    .cards li.active-item > label::after { height: 2.5rem; }\n    .cards li.active-item h2 { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.1s; }\n    .cards li.active-item p { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.2s; }\n\n    input[type=\"radio\"] { display: none; }\n  <\/style>\n\n  <div class=\"cards-container\">\n    <ul class=\"cards\" style=\"--items:10;\">\n      <li style=\"--i:0;\" class=\"active-item\"><label data-idx=\"0\">2015<\/label><h2>\u516c\u53f8\u6210\u7acb<\/h2><p>\u901a\u904e\u4e2d\u83ef\u6c11\u570b\u884c\u653f\u9662\u6587\u5316\u90e8\u3010\u6587\u5275\u7522\u696d\u5712\u5340\u8a08\u756b\u3011\uff0c<br>\u6210\u7acb\u3010\u53ef\u6f84\u97f3\u6a02\u6587\u5275 &#8211; \u5f70\u5316\u7e3d\u516c\u53f8\u3011\u3002<\/p><\/li>\n      <li style=\"--i:1;\"><label data-idx=\"1\">2016<\/label><h2>\u7522\u5b78\u5408\u4f5c\u8207\u5206\u516c\u53f8<\/h2><p>\u8207\u570b\u7acb\u52e4\u76ca\u79d1\u6280\u5927\u5b78\u6587\u5275\u5b78\u9662\u7c3d\u8a02\u7522\u5b78\u5408\u4f5c\u5354\u8b70\u3002<br>\u5e74\u5e95\u6210\u7acb\u3010\u53ef\u6f84\u97f3\u6a02\u6587\u5275 &#8211; \u53f0\u5357\u5206\u516c\u53f8\u3011\u3002<\/p><\/li>\n      <li style=\"--i:2;\"><label data-idx=\"2\">2017<\/label><h2>\u53f0\u4e2d\u5206\u516c\u53f8\u53ca\u597d\u8072\u97f3\u88fd\u4f5c<\/h2><p>\u5e74\u5e95\u6210\u7acb\u3010\u53ef\u6f84\u97f3\u6a02\u6587\u5275 &#8211; \u53f0\u4e2d\u5206\u516c\u53f8\u3011\u3002<br>\u627f\u63a5\u4e2d\u570b\u597d\u8072\u97f3\u5b98\u65b9\u88fd\u4f5c\u6848\u3002<\/p><\/li>\n      <li style=\"--i:3;\"><label data-idx=\"3\">2018 (\u4e00)<\/label><h2>\u9032\u8ecd\u51fa\u7248\u696d<\/h2><p>\u806f\u5408\u767c\u884c\u66f8\u7c4d\u7b49\u51fa\u7248\u54c1\uff0c\u6b63\u5f0f\u9032\u8ecd\u51fa\u7248\u696d\u3002<\/p><\/li>\n      <li style=\"--i:4;\"><label data-idx=\"4\">2018 (\u4e8c)<\/label><h2>\u570b\u969b\u8a2d\u8a08\u734e\u9805<\/h2><p>\u5531\u7247\u4f5c\u54c1\u6a02\u8b5c\u7372\u3010\u6eab\u5dde\u570b\u969b\u8a2d\u8a08\u96d9\u5e74\u5c55\u3011\u9285\u734e\u3002<\/p><\/li>\n      <li style=\"--i:5;\"><label data-idx=\"5\">2019<\/label><h2>\u6210\u7acb\u8cc7\u5de5\u4e2d\u5fc3<\/h2><p>\u6210\u7acb\u3010\u5357\u5c6f\u8cc7\u5de5\u7814\u7a76\u4e2d\u5fc3\u3011\uff0c\u8de8\u8db3\u6578\u4f4d\u9818\u57df\u53ca\u958b\u767c\u5de5\u7a0b\u3002<br>\u65bc 2024 \u9077\u79fb\u81f3\u9727\u5cf0\u3002<\/p><\/li>\n      <li style=\"--i:6;\"><label data-idx=\"6\">2019 &#8211; 2020<\/label><h2>\u85dd\u8853\u5b78\u9662\u5408\u4f5c<\/h2><p>\u8207\u671d\u967d\u85dd\u5927\u3001\u5357\u61c9\u5927\u85dd\u8853\u5b78\u9662\u7c3d\u8a02\u7522\u5b78\u5408\u4f5c\u5354\u8b70\u3002<\/p><\/li>\n      <li style=\"--i:7;\"><label data-idx=\"7\">2016 &#8211; 2024<\/label><h2>\u7814\u767c\u8207\u6280\u8853\u5c08\u5229<\/h2><p>\u901a\u904e\u591a\u5c46 SBIR \u7522\u696d\u7814\u767c\u8a08\u756b\uff0c\u958b\u767c\u6d41\u884c\u97f3\u6a02\u7522\u54c1\u53ca\u5c08\u5229\u3002<\/p><\/li>\n      <li style=\"--i:8;\"><label data-idx=\"8\">2024 &#8211; 2025<\/label><h2>AI Vocal \u6280\u8853\u61c9\u7528<\/h2><p>\u901a\u904e\u7d93\u6fdf\u90e8\u7814\u767c\u8a08\u756b\uff0c\u958b\u767c AI Vocal \u61c9\u7528\u6280\u8853\u3002<\/p><\/li>\n      <li style=\"--i:9;\"><label data-idx=\"9\">2026 ~<\/label><h2>\u860b\u679c MAC \u61c9\u7528\u7a0b\u5f0f<\/h2><p>\u9032\u5165 app \u61c9\u7528\u7a0b\u5f0f\u958b\u767c\u9818\u57df\u3002<\/p><\/li>\n    <\/ul>\n  <\/div>\n\n  <script>\n  (function() {\n    const cards = document.querySelector(\".cards\");\n    const items = cards.querySelectorAll(\"li\");\n    let currentIdx = 0;\n    let rotationAccumulator = 0; \n\n    function goTo(nextIdx) {\n      const total = items.length;\n      nextIdx = (nextIdx + total) % total;\n      let diff = nextIdx - currentIdx;\n      if (Math.abs(diff) > total \/ 2) {\n        diff = diff > 0 ? diff - total : diff + total;\n      }\n      rotationAccumulator -= diff * (360 \/ total);\n      currentIdx = nextIdx;\n      cards.style.transform = `rotate(${rotationAccumulator}deg)`;\n      items.forEach((li, i) => {\n        li.classList.toggle(\"active-item\", i === currentIdx);\n      });\n    }\n\n    cards.addEventListener(\"click\", e => {\n      const label = e.target.closest(\"label\");\n      if (label) goTo(parseInt(label.dataset.idx));\n    });\n\n    let startX = 0, isDragging = false;\n    const container = document.querySelector(\".cards-container\");\n    const start = e => { isDragging = true; startX = e.clientX || e.touches[0].clientX; };\n    const move = e => {\n      if (!isDragging) return;\n      const x = e.clientX || e.touches[0].clientX;\n      const dx = x - startX;\n      if (Math.abs(dx) > 60) {\n        goTo(currentIdx + (dx < 0 ? 1 : -1));\n        startX = x;\n      }\n    };\n    const end = () => isDragging = false;\n\n    container.addEventListener(\"mousedown\", start);\n    window.addEventListener(\"mousemove\", move);\n    window.addEventListener(\"mouseup\", end);\n    container.addEventListener(\"touchstart\", start);\n    container.addEventListener(\"touchmove\", move);\n    window.addEventListener(\"touchend\", end);\n  })();\n  <\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>2015 \u516c\u53f8\u6210\u7acb \u901a\u904e\u4e2d\u83ef\u6c11\u570b\u884c\u653f\u9662\u6587\u5316\u90e8\u3010\u6587\u5275\u7522\u696d\u5712\u5340\u8a08\u756b\u3011\uff0c\u6210\u7acb\u3010\u53ef\u6f84\u97f3\u6a02\u6587\u5275 &#8211; \u5f70\u5316\u7e3d\u516c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1472","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/pages\/1472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/comments?post=1472"}],"version-history":[{"count":24,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/pages\/1472\/revisions"}],"predecessor-version":[{"id":2617,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/pages\/1472\/revisions\/2617"}],"wp:attachment":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/media?parent=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}