choozmo
/
AI_Video_LP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
							<!DOCTYPE html>
<html lang="en">

<head>
  {{ partial "head_single.html" . }}

  <title>ChoozMo SaaS AI 主播｜快速製作 AI 人物影片｜集仕多</title>
  <meta name="description" content="輸入文字，即可生成 AI 分鏡表與 AI 人物影片。支援多語、綠幕下載、字幕自動化與模板套用，快速、高效、低成本，適用教育訓練、宣傳行銷、活動開場與新媒體製作。">
  <meta property="og:title" content="ChoozMo SaaS AI 主播｜快速製作 AI 人物影片">
  <meta property="og:description" content="用 AI 分鏡把靈感變成分鏡表與成片：自動腳本、自由修改、雲端製作、綠幕下載、字幕自動化。">
  <meta property="og:type" content="website">

  <!-- Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    :root {
      --brand: #ea5413;
      --brand-dark: #c43e00;
      --brand-light: #fff3ed;
      --gray-border: #e5e7eb;
      --text-dark: #0b1120;
      --text-secondary: #555;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: var(--text-dark);
      background-color: #fff;
    }

    .text-primary {
      color: var(--brand) !important;
    }

    .hero {
      background:
        radial-gradient(1200px 520px at 15% -10%, rgba(234, 84, 19, 0.18), transparent),
        radial-gradient(800px 420px at 100% 0%, rgba(234, 84, 19, 0.1), transparent),
        linear-gradient(180deg, #fffdfc, #fff7f3);
      border-bottom: 1px solid var(--gray-border);
    }

    .badge-soft {
      background: rgba(234, 84, 19, 0.1);
      color: var(--brand);
      border: 1px solid rgba(234, 84, 19, 0.2);
      font-weight: 600;
    }

    .shadow-soft {
      box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
    }

    .feature-card {
      border: 1px solid var(--gray-border);
      border-radius: 16px;
      padding: 20px;
      background: #fff;
      height: 100%;
      transition: all .25s ease;
    }

    .feature-card:hover {
      border-color: var(--brand);
      box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
    }

    .feature-card h5 {
      background: var(--brand-light);
      color: var(--brand-dark);
      text-align: center;
      padding: 0.75rem;
      border-radius: 10px;
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }

    .feature-card h5 i {
      color: var(--brand);
    }

    .feature-card {
      overflow: hidden;
      /* 防止內容超出邊框 */
    }

    .feature-card img.demo-img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      border-radius: 12px;
    }

    @media (min-width: 992px) {
      .feature-card img.demo-img {
        max-width: 45%;
        /* 桌機時左右各佔一半寬度 */
      }
    }

    .line {
      border-bottom: 2px solid var(--brand-light);
      padding-bottom: 5rem;
      margin-bottom: 5rem;
    }

    .link-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--brand);
      color: #fff;
      padding: .9rem 1.2rem;
      border-radius: .8rem;
      text-decoration: none;
      transition: all .2s ease-in-out;
      font-weight: 600;
      box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
    }

    .link-btn:hover {
      background: var(--brand-dark);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
    }

    .outline-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border: 2px solid var(--brand);
      color: var(--brand);
      padding: .8rem 1.2rem;
      border-radius: .8rem;
      font-weight: 600;
      background: transparent;
      text-decoration: none;
      transition: all .2s ease-in-out;
    }

    .outline-btn:hover {
      background: var(--brand);
      color: #fff;
      transform: translateY(-1px);
    }

    .kicker {
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--brand-dark);
    }

    .media-card img,
    .media-card video {
      border-radius: 14px;
      width: 100%;
      height: auto;
    }

    .accordion-button {
      color: var(--brand-dark);
      background-color: #fff;
      font-weight: 600;
    }

    .accordion-button:not(.collapsed) {
      color: var(--brand);
      background-color: var(--brand-light);
      box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(234, 84, 19, 0.25);
    }

    .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    a {
      color: var(--brand);
      text-decoration: none;
    }

    a:hover {
      color: var(--brand-dark);
    }

    .ratio iframe {
      border: 1px solid var(--gray-border);
      border-radius: 12px;
    }

    /* 桌機比較表美化 */
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    th,
    td {
      border: 1px solid var(--gray-border);
      padding: 1rem;
      vertical-align: top;
    }

    thead th {
      background: var(--brand-light);
      color: var(--text-dark);
      font-weight: 700;
      text-align: center;
      border-bottom: none;
    }

    tbody td p {
      margin-bottom: .5rem;
    }

    tbody ul {
      padding-left: 1.1rem;
      margin-bottom: 0;
    }

    /* 案例區塊：左側彩條與間距節奏 */
    .case-block {
      position: relative;
      padding-left: 0.25rem;
    }

    @media (min-width: 992px) {
      .case-block {
        padding-left: .75rem;
      }

      .case-block::before {
        content: "";
        position: absolute;
        left: -2px;
        top: 8px;
        bottom: 8px;
        width: 4px;
        background: linear-gradient(180deg, var(--brand), var(--brand-dark));
        border-radius: 4px;
        opacity: .15;
      }
    }

    .case-meta .badge {
      background: var(--brand-light) !important;
      color: var(--brand-dark) !important;
      border: 1px solid rgba(234, 84, 19, .25) !important;
      font-weight: 600;
    }

    .case-block .media-card {
      border-radius: 14px;
    }

    .case-block .media-card img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 12px;
    }

    .case-block .outline-btn {
      margin-top: .25rem;
    }
  </style>
</head>

<body>
  {{ partial "navbar.html" . }}

  <header class="hero py-5 mt-5">
    <div class="container pt-5 pb-4">
      <div class="row align-items-center g-4">
        <div class="col-lg-6">
          <span class="badge badge-soft mb-3">AI 分鏡 × 一鍵影片生成 × 綠幕下載</span>
          <h1 class="display-6 fw-bold mb-3">
            輸入文字 → 生成 <span class="text-primary">AI 分鏡表</span><br class="d-none d-md-block"> 快速製作「AI 人物影片」
          </h1>
          <p class="lead text-secondary mb-4">
            不用會剪輯也能做影片：自動腳本、自由修改、雲端製作、字幕自動化、綠幕原檔下載。
            適用教育訓練、產品/公司宣傳、活動開場、新媒體與社群內容。
          </p>
          <div class="d-flex flex-wrap gap-3">
            <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank" rel="noopener">
              <i class="bi bi-lightning-charge"></i> 免費開始體驗
            </a>
            <a href="#cases" class="outline-btn">
              <i class="bi bi-play-circle"></i> AI 影片案例
            </a>
          </div>
          <div class="mt-3 small text-secondary">
            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 綠幕下載 · 模板套用
          </div>
        </div>

        <div class="col-lg-6">
          <div class="media-card">
            <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI 人物影片｜SaaS 首圖" loading="lazy" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 首圖 & 教學 -->
  <section class="py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-8 px-5">
          <div class="line">
            <div class="text-center mb-4">
              <p class="kicker mb-2">How It Works</p>
              <h2 class="fw-bold">如何從文字生成 AI 人物影片？</h2>
            </div>

            <div class="media-card">
              <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI 人物影片｜四格 SaaS 教學" loading="lazy">
            </div>
          </div>

          <div class="line">
            <div class="text-center mb-4">
              <p class="kicker mb-2">AI Storyboard</p>
              <h2 class="fw-bold">什麼是 AI 分鏡？</h2>
            </div>
            <div class="d-flex flex-column align-items-center">
              <p>AI 分鏡是 ChoozMo 的獨家功能，讓你<strong>不用學剪輯</strong>也能創作專業影片：</p>
              <ol>
                <li><strong>自動生成腳本：</strong>AI 依文字提示產生完整腳本與分鏡設計。</li>
                <li><strong>輕鬆修改：</strong>不滿意可直接改，直到符合需求。</li>
                <li><strong>無縫製作：</strong>把分鏡上傳至系統，即可生成專屬 AI 主播影片。</li>
              </ol>
              <p class="mb-5">讓製作流程更簡單、更高效，你專心發揮創意即可！</p>

              <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank" rel="noopener">
                <i class="bi bi-magic"></i> 立即體驗生成
              </a>
            </div>

            <div class="media-card mt-5">
              <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI 人物影片｜AI 分鏡表" loading="lazy">
            </div>
          </div>

          <div class="line">
            <div class="text-center">
              <p class="kicker mb-2">Why ChoozMo</p>
              <h2 class="fw-bold mb-4">為什麼選擇 ChoozMo SaaS AI 影片生成器？</h2>
            </div>

            <div class="row g-4">
              <!-- 卡片 1 -->
              <div class="col-12 col-lg-4">
                <div class="feature-card h-100">
                  <h5 class="fw-bold mb-2">
                    <i class="bi bi-broadcast-pin me-2 text-primary"></i>電視台的專業品質
                  </h5>
                  <p class="mb-2">與多家知名電視台長期合作、參與大型 AI 活動，成片畫質與效果達業界高標。</p>
                  <p class="mb-0">大螢幕播放依然清晰震撼，品質有保證。</p>
                </div>
              </div>

              <!-- 卡片 2 -->
              <div class="col-12 col-lg-4">
                <div class="feature-card h-100">
                  <h5 class="fw-bold mb-2">
                    <i class="bi bi-images me-2 text-primary"></i>無需素材也能輕鬆創作
                  </h5>
                  <p class="mb-2">AI 精準理解文字提示，生成高品質圖片並自動剪輯成片。</p>
                  <ul class="mb-0">
                    <li>輸入幾段文字就有精美畫面</li>
                    <li><strong>無素材數量限制</strong>，人人都能輕鬆創作</li>
                  </ul>
                </div>
              </div>

              <!-- 卡片 3 -->
              <div class="col-12 col-lg-4">
                <div class="feature-card h-100">
                  <h5 class="fw-bold mb-2">
                    <i class="bi bi-speedometer2 me-2 text-primary"></i>快速、高效、低成本
                  </h5>
                  <p class="mb-2">雲端流程不需專人協助，<strong>一天內可產出多支高品質影片</strong>。</p>
                  <ul class="mb-0">
                    <li><strong>省時：</strong>縮短製作週期</li>
                    <li><strong>省錢：</strong>大幅降低成本，適用各規模團隊</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 應用場合 & 綠幕下載 -->
            <section class="pt-4">
              <div class="row g-4 align-items-stretch">
                <div class="col-12">
                  <div class="feature-card h-100">
                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
                      <i class="bi bi-play-circle me-2"></i>
                      <span class="fw-bold">AI 人物影片的應用場合</span>
                    </div>
                    <div class="d-flex flex-column align-items-center">
                      <p class="text-secondary mb-2">AI 人物影片適用於多種情境：</p>
                      <ul class="mb-0 ps-3">
                        <li>教育訓練：快速生成教學影片，提升學習效果。</li>
                        <li>開幕會場：吸睛開場介紹，增添活動亮點。</li>
                        <li>產品／公司宣傳：生動呈現品牌與價值。</li>
                        <li>個人品牌／創作者：YouTube／IG／TikTok 一鍵量產內容。</li>
                        <li>企業內訓與對外簡報：標準化輸出、效率高。</li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="feature-card h-100 overflow-hidden">
                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
                      <i class="bi bi-filetype-mp4 me-2"></i>
                      <span class="fw-bold">自由下載綠幕原檔</span>
                    </div>

                    <div class="d-flex flex-column align-items-center">
                      <p class="text-secondary mb-2">
                        完成的 AI 人物影片可直接用，亦可下載<strong>綠幕原檔</strong>，方便進一步合成與設計：
                      </p>
                      <ul class="mb-3 ps-3">
                        <li>導入剪輯工具進一步編輯。</li>
                        <li>替換背景、加上特效與轉場。</li>
                      </ul>
                    </div>

                    <div
                      class="my-4 d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 text-center">
                      <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI 人物影片｜綠幕示意1"
                        class="img-fluid demo-img rounded shadow-sm">
                      <span class="d-block d-lg-none fs-3">⬇️</span>
                      <span class="d-none d-lg-block fs-3">➡️</span>
                      <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI 人物影片｜綠幕示意2"
                        class="img-fluid demo-img rounded shadow-sm">
                    </div>

                    <p class="mb-0 text-center">
                      到
                      <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁</a>
                      挑選「主播」與「模板」，即可快速產出符合品牌風格的影片。
                    </p>
                  </div>
                </div>
              </div>
            </section>
          </div>

          <!-- 應用實例 -->
          <div id="cases">
            <div class="text-center my-5">
              <p class="kicker mb-2">Case Studies</p>
              <h2 class="fw-bold">應用實例</h2>
            </div>

            <!-- Case 1 -->
            <div class="row align-items-center g-4 case-block mb-5">
              <div class="col-lg-6 order-2 order-lg-1">
                <div class="case-meta mb-2">
                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-translate me-1"></i>客語</span>
                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-cloud-sun me-1"></i>氣象節目</span>
                </div>
                <h3 class="h4 fw-bold mb-3">客家電視台｜AI 主播講天時</h3>
                <p class="mb-2">
                  客家電視台每週推出
                  <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
                    target="_blank" rel="noopener">【AI 主播講天時】</a>
                  ，由兩位客語 AI 主播輪流主持，以流利客語帶來精準天氣資訊。
                </p>

                <ul class="my-4">
                  <li>流利客語 × 精準氣象敘事</li>
                  <li>每週定期更新，讓您隨時掌握最新天氣動態</li>
                </ul>

                <a class="outline-btn"
                  href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
                  target="_blank" rel="noopener">
                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
                </a>
              </div>
              <div class="col-lg-6 order-1 order-lg-2">
                <div class="media-card">
                  <img src="/imgs/ai-presenter/客家2.webp" alt="AI 主播講天時 範例 1" loading="lazy">
                </div>
                <p class="small text-secondary mt-2">▲ AI 主播講天時：節目畫面示意</p>
              </div>
            </div>

            <!-- Case 2 -->
            <div class="row align-items-center g-4 case-block mb-5">
              <div class="col-lg-6">
                <div class="media-card">
                  <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="三立新聞 克隆娟 應用實例" loading="lazy">
                </div>
              </div>
              <div class="col-lg-6">
                <div class="case-meta mb-2">
                  <span class="badge rounded-pill text-bg-light border"><i
                      class="bi bi-broadcast-pin me-1"></i>新聞節目</span>
                  <span class="badge rounded-pill text-bg-light border"><i
                      class="bi bi-link-45deg me-1"></i>AI×真人連線</span>
                </div>
                <h3 class="h4 fw-bold mb-3">三立新聞｜克隆娟</h3>
                <p class="mb-2">
                  為知名主播 <strong>陳斐娟</strong> 打造專屬 AI 造型，並與本人遠端連線共同播報，帶來全新新聞體驗。
                </p>

                <ul class="my-4">
                  <li>打造專屬 AI 人設，品牌識別度提升</li>
                  <li>AI 與真人同台互動，打造全新節目形式</li>
                </ul>

                <a class="outline-btn" href="https://youtu.be/CUR_9L8RtDk?si=aCt3Z20u2Co4uAjZ" target="_blank"
                  rel="noopener">
                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
                </a>
              </div>
            </div>

            <!-- Case 3 -->
            <div class="row align-items-center g-4 case-block mb-5">
              <div class="col-lg-6 order-2 order-lg-1">
                <div class="case-meta mb-2">
                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-newspaper me-1"></i>新媒體</span>
                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-mic me-1"></i>AI 採訪</span>
                  <span class="badge rounded-pill text-bg-light border"><i
                      class="bi bi-filetype-doc me-1"></i>即時新聞稿</span>
                </div>
                <h3 class="h4 fw-bold mb-3">算力傳媒｜AI 品牌助理</h3>
                <p class="mb-2">
                  <a href="https://news.aimedium.org/" target="_blank" rel="noopener">【算力傳媒】</a> 以 AI 助理完成線上採訪，
                  自動彙整重點、產出 AI 主播訪談影片，並可即時生成新聞稿，加速內容上線。
                </p>

                <ul class="my-4">
                  <li><strong>音檔重點萃取：</strong>AI 自動提取關鍵內容，快速整理重點。</li>
                  <li><strong>AI 主播訪談影片：</strong>生成專業級訪談影片，強化品牌形象。</li>
                  <li><strong>即時新聞稿生成：</strong>採訪後自動生成新聞稿，立即發布。</li>
                </ul>

                <a class="outline-btn" href="https://news.aimedium.org/" target="_blank" rel="noopener">
                  <i class="bi bi-box-arrow-up-right"></i> 造訪網站
                </a>
              </div>
              <div class="col-lg-6 order-1 order-lg-2">
                <div class="media-card">
                  <img src="/imgs/ai-presenter/YT1.webp" alt="算力傳媒 範例頁" loading="lazy">
                </div>
                <div class="d-flex gap-3 mt-3 flex-wrap justify-content-center justify-content-lg-start">
                  <div class="media-card">
                    <img src="/imgs/ai-presenter/算力首頁.webp" alt="算力傳媒 首頁" loading="lazy">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 pe-lg-5">
          <div id="form" class="mt-0">
            {{ partial "form-main.html" . }}

            {{ partial "founder-cta.html" . }}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 影片案例 -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="text-center mb-4">
        <p class="kicker mb-2">Showcase</p>
        <h2 class="fw-bold">其他 AI 影片案例</h2>
      </div>

      <div class="row g-4">
        <div class="col-md-4">
          <div class="media-card">
            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
          </div>
        </div>

        <div class="col-md-4">
          <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?autoplay=1&mute=1" title="YouTube video player"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
          </div>
        </div>

        <div class="col-md-4">
          <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?autoplay=1&mute=1" title="YouTube video player"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
          </div>
        </div>

        <div class="col-md-4">
          <div class="media-card">
            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
          </div>
        </div>

        <div class="col-md-4">
          <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/95gce-Upi_A?autoplay=1&mute=1" title="YouTube video player"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
          </div>
        </div>

        <div class="col-md-4">
          <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?autoplay=1&mute=1" title="YouTube video player"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container py-5">
    <!-- FAQ -->
    <div class="line">
      <div class="text-center">
        <p class="kicker mb-2">FAQ</p>
        <h2 class="fw-bold mb-4">常見問題</h2>
      </div>

      <div class="accordion" id="faq_accordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_1">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
              如何修改 AI 分鏡表內容？
            </button>
          </h2>
          <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              AI 分鏡表提供了直觀的編輯功能，您可以輕鬆進入編輯頁面，自行設定大標題、字幕和素材文字內容。此外，素材圖片也可以自由更換，讓您的創作更加靈活。
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_2">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
              是否可以上傳自己的圖片或影片素材？
            </button>
          </h2>
          <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              當然可以！下載 AI 分鏡表後，所有內容皆可隨意編輯，您還能輕鬆上傳個人圖片或影片素材，讓影片更加個性化。
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_3">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
              系統是否會自動上字幕？
            </button>
          </h2>
          <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              是的，AI 分鏡表具備全自動字幕生成功能，無需手動剪輯字幕，大幅提升製作效率！
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_4">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
              如何更換影片背景和主播？
            </button>
          </h2>
          <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              完成分鏡表後，您只需將內容上傳至 SaaS 的
              <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁面</a>，
              即可挑選喜愛的「主播」與「模板」，讓影片風格更加符合需求。
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_5">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
              製作影片需要多長時間？
            </button>
          </h2>
          <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              影片製作的時間取決於影片長度。舉例來說，一支 30 秒的影片，製作時間約為 10 分鐘，快速又高效！
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_6">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
              如何查看完成的影片？
            </button>
          </h2>
          <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              透過
              <a href="https://cloud.choozmo.com/main/progress" target="_blank" rel="noopener">影片清單</a>，
              您可以即時查看所有正在製作中的影片以及已完成的影片，並可直接下載成品。
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="faq_heading_7">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
              如何付款？是否提供免費試用？
            </button>
          </h2>
          <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
            data-bs-parent="#faq_accordion">
            <div class="accordion-body">
              AI 分鏡表提供免費試用版，您只需連結 Google 帳號，即可立即體驗！若需正式版功能，可直接在
              <a href="https://cloud.choozmo.com/main/dashboard" target="_blank" rel="noopener">首頁</a>
              線上儲值製作秒數，輕鬆升級使用完整功能。
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 使用者義務 / 免責 -->
    <div>
      <div class="text-center my-5">
        <p class="kicker mb-2">Terms & Policy</p>
        <h2 class="fw-bold">使用者義務與免責聲明</h2>
      </div>

      <div class="accordion my-5 pb-4" id="disclaimer">
        <div class="accordion-item">
          <h2 class="accordion-header" id="disclaimerHeading_1">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
              使用者的守法義務
            </button>
          </h2>
        </div>
        <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
          data-bs-parent="#disclaimer">
          <div class="accordion-body">
            <section class="terms-content">
              <p>
                您承諾絕不為任何非法目的或以任何非法方式使用本服務，並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者，並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
              </p>
              <ul>
                <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
                <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
                <li>違反依法律或契約所應負之保密義務</li>
                <li>冒用他人名義使用本服務</li>
              </ul>
            </section>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="disclaimerheading_2">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
              免責聲明
            </button>
          </h2>
        </div>
        <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
          data-bs-parent="#disclaimer">
          <div class="accordion-body">
            <section class="terms-content">
              <p>
                您明確了解並同意：ChoozMo
                對本服務不提供任何明示或默示的擔保，包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供，您使用本服務時，須自行承擔相關風險。ChoozMo
                不保證以下事項：
              </p>
              <ul>
                <li>本服務將符合您的需求</li>
                <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
                <li>由本服務之使用而取得之結果為正確或可靠</li>
              </ul>
              <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險，並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失，對 ChoozMo
                提出任何請求或採取法律行動，您應自負完全責任。</p>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{ partial "footer.html" . }}

  <script>
    const yEl = document.getElementById('y');
    if (yEl) yEl.textContent = new Date().getFullYear();
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>