更新 content & css

layouts/shortcodes/form.html

@@ -5,68 +5,68 @@
   </div>
   <form>
     <div class="row mb-4">
-      <label for="nameValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="nameValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           聯絡人 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <input type="text" class="form-control" id="nameValue" placeholder="請留下聯絡人姓名">
       </div>
     </div>
 
     <div class="row mb-4">
-      <label for="phoneValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="phoneValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           聯絡電話 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <input type="tel" class="form-control" id="phoneValue" placeholder="請留下聯絡電話">
       </div>
     </div>
 
     <div class="row mb-4">
-      <label for="companyValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="companyValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           公司名稱 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
       </div>
     </div>
 
     <div class="row mb-3">
-      <label for="emailValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="emailValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           電子信箱 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail">
       </div>
     </div>
 
     <div class="row mb-3">
-      <label for="dateValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="dateValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           預計活動需求日 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10 d-flex align-items-center">
+      <div class="col-md-10 col-lg-9 col-xl-10 d-flex align-items-center">
         <input type="date" id="dateValue" name="dateValue" class="px-2"
           style="border:1px solid #ced4da; border-radius: 3px;" />
       </div>
     </div>
 
     <div class="row mb-4">
-      <label for="budgetValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="budgetValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           預算限制 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <select class="form-select" id="budgetValue" name="budgetValue">
           <option selected>請選擇</option>
           <option value="一萬以內">一萬以內</option>
@@ -78,12 +78,12 @@
     </div>
 
     <div class="row mb-4">
-      <label for="demandValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="demandValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           需求目的 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <!-- <input type="text" class="form-control" id="demandValue" placeholder="請留下需求目的"> -->
         <fieldset>
           <div>
@@ -105,18 +105,18 @@
     </div>
 
     <div class="row mb-4">
-      <label for="captionValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+      <label for="captionValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
         <div class="d-flex flex-nowrap">
           需求說明 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-sm-10 col-lg-9 col-xl-10">
+      <div class="col-md-10 col-lg-9 col-xl-10">
         <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明"></textarea>
       </div>
     </div>
 
     <div class="row">
-      <div class="col-sm-10 col-lg-9 col-xl-10 offset-sm-2">
+      <div class="col-md-10 col-lg-9 col-xl-10 offset-sm-2">
         <div class="form-check">
           <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
           <label class="form-check-label w-100" for="agreeValue">

static/css/style.css

@@ -4588,10 +4588,9 @@
   width: 100%;
   max-width: 1050px;
 }
-.news-main-content iframe {
-  top: 10% !important;
-  width: 80% !important;
-  height: 80% !important;
+.news-main-content .video-box {
+  width: 100%;
+  padding-bottom: 56%;
 }
 .news-main-content .list-link {
   display: block;
@@ -4625,6 +4624,11 @@
   margin: auto;
   max-width: 600px;
 }
+@media (min-width: 1460px) {
+  .news-form form .col-form-label {
+    width: 101px;
+  }
+}
 .news-form .title {
   margin-bottom: 50px;
 }
@@ -4636,16 +4640,20 @@
 .news-form .title p {
   margin-bottom: 30px;
 }
-.news-form .submit-btn {
+
+.submit-btn {
   padding: 5px 40px;
+  display: inline-block;
   color: #fff;
   background-color: #ea5413;
   border: 1px solid #ea5413;
   border-radius: 5px;
+  text-decoration: none;
   transition: all 0.3s;
 }
-.news-form .submit-btn:hover {
+.submit-btn:hover {
   opacity: 0.8;
+  color: #fff;
 }
 
 /* news-content End *//*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -5032,10 +5032,15 @@
     max-width: 1050px;
   }
 
-  iframe {
-    top: 10% !important;
-    width: 80% !important;
-    height: 80% !important;
+  .video-box {
+    width: 100%;
+    padding-bottom: 56%;
+
+    // iframe {
+    //   top: 10% !important;
+    //   width: 80% !important;
+    //   height: 80% !important;
+    // }
   }
 
   .list-link {
@@ -5070,6 +5075,12 @@
   form {
     margin: auto;
     max-width: 600px;
+
+    .col-form-label {
+      @media (min-width: 1460px) {
+        width: 101px;
+      }
+    }
   }
 
   .title {
@@ -5085,18 +5096,21 @@
       margin-bottom: 30px;
     }
   }
+}
 
-  .submit-btn {
-    padding: 5px 40px;
-    color: #fff;
-    background-color: #ea5413;
-    border: 1px solid #ea5413;
-    border-radius: 5px;
-    transition: all .3s;
+.submit-btn {
+  padding: 5px 40px;
+  display: inline-block;
+  color: #fff;
+  background-color: #ea5413;
+  border: 1px solid #ea5413;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: all .3s;
 
-    &:hover {
-      opacity: .8;
-    }
+  &:hover {
+    opacity: .8;
+    color: #fff;
   }
 }
 

webSite/content/main-news/virtual-host-solution/index.md

@@ -6,52 +6,55 @@ categories = "焦點訊息"
 banner = ""
 +++
 
-AI虛擬人在科技日新月異的今天，已經逐漸走進我們的日常生活，接下來進入年底尾聲，我們推出全台灣唯一的「AI主持人」，讓企業尾牙、春酒活動不再枯燥乏味，揮別真人讀稿、活動前彩排、預演，由「AI主持人」、「AI虛擬長官」來點不一樣的開場、致和有趣互動吧！想知道它會如何替2023年尾牙帶來最高衝擊的視覺饗宴呢？
+AI 虛擬人在科技日新月異的今天，已經逐漸走進我們的日常生活，接下來進入年底尾聲，我們推出全台灣唯一的「AI 主持人」，讓企業尾牙、春酒活動不再枯燥乏味，揮別真人讀稿、活動前彩排、預演，由「AI 主持人」、「AI 虛擬長官」來點不一樣的開場、致和有趣互動吧！想知道它會如何替 2023 年尾牙帶來最高衝擊的視覺饗宴呢？
 
+## **2023 尾牙春酒選擇 AI 主持人的好處是？**
 
-## **2023尾牙春酒選擇AI主持人的好處是？**
-
-對於尾牙活動而言，AI主持人的應用是一個顯著的創新。傳統主持人可能會受到一些限制，例如需要休息，或是無法同時進行其他活動。而AI主持人可以保持專業的風格和形象，不受情緒或生理條件影響，同時也能提供更高效的互動體驗，例如不會吃螺絲、不會讀錯稿，除了能進行尾牙活動開場、主持互動遊戲、開獎，甚至還能唱歌、跳舞等。與此同時，AI主持人也能夠透過先進的技術手段吸引觀眾的注意力，並帶來令人難忘的體驗，它的出現不僅僅是一個科技創新，更是為尾牙活動帶來了全新的可能性。
+對於尾牙活動而言，AI 主持人的應用是一個顯著的創新。傳統主持人可能會受到一些限制，例如需要休息，或是無法同時進行其他活動。而 AI 主持人可以保持專業的風格和形象，不受情緒或生理條件影響，同時也能提供更高效的互動體驗，例如不會吃螺絲、不會讀錯稿，除了能進行尾牙活動開場、主持互動遊戲、開獎，甚至還能唱歌、跳舞等。與此同時，AI 主持人也能夠透過先進的技術手段吸引觀眾的注意力，並帶來令人難忘的體驗，它的出現不僅僅是一個科技創新，更是為尾牙活動帶來了全新的可能性。
 
 ![三立新聞台 世界面對面 (陳斐娟x克隆娟)](1.webp)
-三立新聞台 世界面對面 (陳斐娟x克隆娟)
- \
- \
-影片（唱歌）：[https://drive.google.com/file/d/1ZsY-K3UqTIv3zy__MzK2JUQwJrlSSI5P/view?usp=sharing](https://drive.google.com/file/d/1ZsY-K3UqTIv3zy__MzK2JUQwJrlSSI5P/view?usp=sharing)
-
-## **除了尾牙春酒活動，AI主持人還能應用在哪？**
-
-除了尾牙活動外，AI主持人也適用於各種企業活動，如年會、展覽、產品發布會、課程教學、內部教育訓練、廣告宣傳、社群貼文等，甚至在各種學術研討會或公共演講中也能應用。
-
-![華視新聞 2023亞運賽事播報 (林奕雯xE-win)](2.webp)
-華視新聞 2023亞運賽事播報 (林奕雯xE-win)
+三立新聞台 世界面對面 (陳斐娟 x 克隆娟)
 
+<div class="video-box mb-5">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/QVaLhMOZF5E?si=Q2SEdFo0E4-CAvQ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
 
-[華視AI體育主播登場！分身「E-Win」打造電視新聞的全新互動體驗](https://ai.choozmo.com/main-news/%E8%8F%AF%E8%A6%96/)
+## **除了尾牙春酒活動，AI 主持人還能應用在哪？**
 
+除了尾牙活動外，AI 主持人也適用於各種企業活動，如年會、展覽、產品發布會、課程教學、內部教育訓練、廣告宣傳、社群貼文等，甚至在各種學術研討會或公共演講中也能應用。
 
-## **客制：AI虛擬主持人和AI虛擬長官該怎麼選？**
+![華視新聞 2023亞運賽事播報 (林奕雯xE-win)](2.webp)
+華視新聞 2023 亞運賽事播報 (林奕雯 xE-win)
 
-透過集仕多真人客製化建模的技術，AI主持人能夠擁有逼真的外觀和聲音，讓觀眾感受到與真人主播相仿的互動體驗。我們根據真人樣本進行高度的還原，以確保AI主持人在外觀和聲音上與真人極為相似。
+[華視 AI 體育主播登場！分身「E-Win」打造電視新聞的全新互動體驗](https://ai.choozmo.com/main-news/%E8%8F%AF%E8%A6%96/)
 
+## **客制：AI 虛擬主持人和 AI 虛擬長官該怎麼選？**
 
-## **AI虛擬主持人**
+透過集仕多真人客製化建模的技術，AI 主持人能夠擁有逼真的外觀和聲音，讓觀眾感受到與真人主播相仿的互動體驗。我們根據真人樣本進行高度的還原，以確保 AI 主持人在外觀和聲音上與真人極為相似。
 
-集仕多虛擬主持人與傳統活動主持，最大的差異性在於AI主持人不受時間和嗓音限制，能夠提供一致的表現，且擁有更多元化的互動方式，例如即時回答問題、播放影音素材等，增加活動的娛樂性和互動性、創新性。
+## **AI 虛擬主持人**
 
-影片：[https://drive.google.com/file/d/1HgxxG5oml7BtwYFK3mAccmdwJt5sS_Fz/view?usp=sharing](https://drive.google.com/file/d/1HgxxG5oml7BtwYFK3mAccmdwJt5sS_Fz/view?usp=sharing)
+集仕多虛擬主持人與傳統活動主持，最大的差異性在於 AI 主持人不受時間和嗓音限制，能夠提供一致的表現，且擁有更多元化的互動方式，例如即時回答問題、播放影音素材等，增加活動的娛樂性和互動性、創新性。
 
+<div class="video-box mb-5">
+    <iframe src="https://www.youtube.com/embed/NwQCotGZdGU?si=SE7XTMZ8j05Z3E5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
 
-## **AI虛擬長官**
+## **AI 虛擬長官**
 
-將AI主持人作為虛擬長官出現在尾牙活動開場，替長官客製化一個AI分身，用來傳遞出一種現代化和科技化的形象。還可以呈現「多語言」和「視覺」效果，營造出獨特的氛圍，讓尾牙活動帶有更多的科技感，帶給全體員工一個獨特而難忘的尾牙，展現出科技的魅力，同時傳遞企業形象、提升企業員工向心力與創新能力。
+將 AI 主持人作為虛擬長官出現在尾牙活動開場，替長官客製化一個 AI 分身，用來傳遞出一種現代化和科技化的形象。還可以呈現「多語言」和「視覺」效果，營造出獨特的氛圍，讓尾牙活動帶有更多的科技感，帶給全體員工一個獨特而難忘的尾牙，展現出科技的魅力，同時傳遞企業形象、提升企業員工向心力與創新能力。
 
-影片（日文）：[https://www.youtube.com/watch?v=xJa3rXU9LZs](https://www.youtube.com/watch?v=xJa3rXU9LZs)
+<div class="video-box mb-5">
+    <iframe src="https://www.youtube.com/embed/xJa3rXU9LZs?si=bh3GISOYgXQeDCDD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
 
-有了AI主持人的出現，為尾牙活動注入了新的活力，它在不同層面上與傳統的活動主持有著諸多優勢，並且能夠提供更加多元化的互動和體驗。這樣創新的想法，不僅能夠豐富企業尾牙、春酒的內容，同時也代表著時代的發展和科技的進步，想了解更多AI主持人嗎？歡迎公司尾牙福委、總召與我們一起讓今年的尾牙再創高峰！（[LINE一對一諮詢](https://lin.ee/jYalbZq)）
+有了 AI 主持人的出現，為尾牙活動注入了新的活力，它在不同層面上與傳統的活動主持有著諸多優勢，並且能夠提供更加多元化的互動和體驗。這樣創新的想法，不僅能夠豐富企業尾牙、春酒的內容，同時也代表著時代的發展和科技的進步，想了解更多 AI 主持人嗎？歡迎公司尾牙福委、總召與我們一起讓今年的尾牙再創高峰！
 
-集仕多ChoozMo，我們是一家Generative AI 新創公司，成立於 2020 年，唯一獲得工業局－人工智慧技術服務機構能量登錄「虛擬人物/虛擬偶像設計」。我們專注於 text-to-video 技術研發，快速建立生成式AI人物模型，任意變換臉型、妝感、服飾、背景、光源等風格，也能學習客戶聲音，支援22國語言，畫質最高可達8K，讓您免進攝影棚，免拍攝，用最短的時間幫您的想法快速轉換成影片。成功應用客戶包含三立電視AI陳斐娟（[克隆娟](https://ai.choozmo.com/main-news/inewsspokes/)）、警察廣播電台 [AI盧卡斯](https://ai.choozmo.com/main-news/%E8%AD%A6%E5%AF%9F%E5%BB%A3%E6%92%AD%E9%9B%BB%E5%8F%B0%E5%88%9D%E6%AC%A1ai%E4%B8%BB%E6%92%AD%E7%9C%9F%E4%BA%BA%E5%BB%BA%E6%A8%A1-%E8%88%87choozmo%E5%90%88%E4%BD%9Cai%E5%BD%B1%E7%89%87/)、華視新聞 AI林奕雯（[E-Win](https://ai.choozmo.com/main-news/%E8%8F%AF%E8%A6%96/)）等。
+<div class="d-flex justify-content-center mb-5">
+    <a href="https://lin.ee/jYalbZq" class="submit-btn mb-3" target="_blank"> LINE 一對一諮詢</a>
+</div>
 
+集仕多 ChoozMo，我們是一家 Generative AI 新創公司，成立於 2020 年，唯一獲得工業局－人工智慧技術服務機構能量登錄「虛擬人物/虛擬偶像設計」。我們專注於 text-to-video 技術研發，快速建立生成式 AI 人物模型，任意變換臉型、妝感、服飾、背景、光源等風格，也能學習客戶聲音，支援 22 國語言，畫質最高可達 8K，讓您免進攝影棚，免拍攝，用最短的時間幫您的想法快速轉換成影片。成功應用客戶包含三立電視 AI 陳斐娟（[克隆娟](https://ai.choozmo.com/main-news/inewsspokes/)）、警察廣播電台 [AI 盧卡斯](https://ai.choozmo.com/main-news/%E8%AD%A6%E5%AF%9F%E5%BB%A3%E6%92%AD%E9%9B%BB%E5%8F%B0%E5%88%9D%E6%AC%A1ai%E4%B8%BB%E6%92%AD%E7%9C%9F%E4%BA%BA%E5%BB%BA%E6%A8%A1-%E8%88%87choozmo%E5%90%88%E4%BD%9Cai%E5%BD%B1%E7%89%87/)、華視新聞 AI 林奕雯（[E-Win](https://ai.choozmo.com/main-news/%E8%8F%AF%E8%A6%96/)）等。
 
 ![警察廣播電臺 雙主播 多語言對話](3.webp)
 警察廣播電臺 雙主播 多語言對話
@@ -59,4 +62,4 @@ AI虛擬人在科技日新月異的今天，已經逐漸走進我們的日常生
 ![華視新聞 2023 亞錦賽宣傳影片](4.webp)
 華視新聞 2023 亞錦賽宣傳影片
 
-{{< form >}}
+{{< form >}}