update ai-virtual-star

layouts/ai-virtual-star/single.html

@@ -63,24 +63,40 @@
           創意滿滿的您是不是在煩惱怎麼讓影片更有亮點，還能帥到觀眾下巴掉下來？<br>
           別再想破頭了，我們這裡有個超狂手法，<br>就是幫您的頻道加入科技感的AI虛擬人物，而且只需要一小時的拍攝時間！</p>
 
-        <p>活動內容：我們將海選出 <strong class="fs-3">3位</strong> 具有潛力的影音創作者，幫您免費打造「AI虛擬人物」，並應用到您的影片中，讓您的影音頻道結合現代科技，吸引觀眾的目光！</p>
+        <p class="mb-0">活動內容：我們將海選出 <strong class="fs-3">3 位</strong> 最具潛力的影音創作者，<br>為您量身設計專屬 「AI 虛擬角色」，讓您的頻道形象煥然一新！</p>
       </div>
 
       <div class="d-flex flex-column align-items-center">
+        <div class="py-5 my-5 d-flex flex-column align-items-center">
+          <h4>🏆 免費打造 AI 虛擬人物</h4>
+          <div class="d-flex justify-content-center">
+            <ul class="ps-4" style="list-style: disc;">
+              <li>專屬設計與建模，提升您的創作特色。</li>
+              <li>提供建模過程的幕後花絮拍攝，展現創意與科技的精彩結合。</li>
+              <li>歡迎自帶團隊拍攝幕後花絮，打造更具個人風格的紀錄片！</li>
+            </ul>
+          </div>
+
+          <h4 class="mt-5">🎁 參與禮：算力傳媒專訪</h4>
+          <p class="mb-0">所有報名者均可獲得一則專訪機會，分享您的創作故事，提升個人曝光度！</p>
+        </div>
+
         <div class="info">
-          <p> 參加方式很簡單！只要
-          </p>
+          <p>參加方式很簡單！只要</p>
 
-          <p class="fw-bold pb-0">🎯 點擊立即報名 → 加入官方LINE → 提供頻道網址 或 一部原創作品</p>
+          <p class="d-none d-md-block fw-bold mb-0">🎯 點擊立即報名 → 加入官方LINE → 提供頻道網址 或 一部原創作品</p>
+
+          <p class="d-block d-md-none fw-bold text-center mt-3 mb-0">🎯 點擊立即報名 🎯<br> ↓ <br>加入官方LIN<br> ↓ <br>提供頻道網址 或 一部原創作品
+          </p>
         </div>
 
-        <div class="row align-items-center">
-          <div class="col-lg-6 d-flex flex-column align-items-center border-item">
+        <div class="row align-items-center mt-5">
+          <div class="col-lg-6 d-flex flex-column align-items-center">
             <h4>活動流程</h4>
 
-            <ol class="pb-4 pb-lg-0 pe-2 pe-lg-5">
+            <ol class="pb-4 pb-lg-0 pe-2 pe-lg-3">
               <li>決選會依照評比標準，挑選3位創作者免費建模！</li>
-              <li>你可以獲得：
+              <li>您可以獲得：
                 <ul>
                   <li>✔️ 進 AI 虛擬攝影棚錄製的機會<br><small>（攝影棚位於 ChoozMo 總公司，竹北高鐵站走路 3 分鐘即可到達）</small></li>
                   <li>✔️ 一支虛擬攝影棚拍攝的作品，後續 AI 虛擬人還可以用來製作更多主題影片！</li>
@@ -90,10 +106,10 @@
             </ol>
           </div>
 
-          <div class="col-lg-6 d-flex flex-column align-items-center">
-            <h4 class="mt-5">活動資訊</h4>
+          <div class="col-lg-6 d-flex flex-column align-items-center line-item">
+            <h4 class="mt-4 mt-lg-5">活動資訊</h4>
 
-            <ul class="px-lg-5">
+            <ul class="px-lg-3 line-bottom">
               <li>
                 報名日期：2025 / 01 / 24 ～ 2025 / 02 / 07
               </li>
@@ -102,11 +118,24 @@
               </li>
               <li>結果公布：2025 / 02 / 14</li>
             </ul>
+
+            <h4 class="mt-5 mt-lg-4">評分標準</h4>
+
+            <ul class="px-lg-3">
+              <li>
+                <p class="mb-0 fw-bold text-center">🌟 創意與吸引力（50%）</p>
+                <small>您使用 AI 虛擬人的用途是否有創意？能否快速吸引注意，展現您的獨特構想？</small>
+              </li>
+              <li class="mt-3">
+                <p class="mb-0 fw-bold text-center">💡 影響力與公益性（50%）</p>
+                <small>您使用 AI 虛擬人的方式是否能傳遞正向價值，或對社會產生積極影響？</small>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
 
-      <div class="d-flex justify-content-center my-lg-5">
+      <div class="d-flex justify-content-center my-5">
         <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank"
           class="sign-up-btn">立即報名</a>
       </div>

static/css/style.css

@@ -5627,7 +5627,7 @@
 }
 #video-editing .header .main p,
 #ai-virtual-star .header .main p {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
   text-align: center;
   font-weight: bold;
 }
@@ -5687,7 +5687,7 @@
 #ai-virtual-star h4 {
   font-weight: bold;
   font-size: 1.75rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 @media (max-width: 575px) {
   #ai-virtual-star h4 {
@@ -5700,10 +5700,10 @@
   list-style: none;
 }
 #ai-virtual-star ul li {
-  line-height: 2.5;
+  line-height: 2;
 }
 #ai-virtual-star small {
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 #ai-virtual-star .bg-1,
 #ai-virtual-star .bg-2 {
@@ -5732,24 +5732,35 @@
   }
 }
 #ai-virtual-star .info {
-  margin: 2rem auto 4rem;
   padding: 2rem 4rem;
-  text-align: center;
+  display: inline-block;
   border-radius: 20px;
   border: 2px solid #3cd3b9;
 }
 @media (max-width: 575px) {
   #ai-virtual-star .info {
-    padding: 1rem;
+    padding: 2rem;
   }
 }
-#ai-virtual-star .border-item {
-  border-right: 2px solid #3cd3b9;
+#ai-virtual-star .info h4,
+#ai-virtual-star .info p {
+  text-align: center;
+}
+#ai-virtual-star .line-bottom {
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #3cd3b9;
 }
 @media (max-width: 991px) {
-  #ai-virtual-star .border-item {
-    border-right: none;
-    border-bottom: 2px solid #3cd3b9;
+  #ai-virtual-star .line-bottom {
+    border-bottom: none;
+  }
+}
+#ai-virtual-star .line-item {
+  border-left: 2px solid #3cd3b9;
+}
+@media (max-width: 991px) {
+  #ai-virtual-star .line-item {
+    border-left: none;
   }
 }
 #ai-virtual-star .title {

static/css/style.scss

@@ -6179,7 +6179,7 @@
 
     .main {
       p {
-        margin-bottom: 2rem;
+        margin-bottom: 1.5rem;
         text-align: center;
         font-weight: bold;
 
@@ -6237,7 +6237,7 @@
   h4 {
     font-weight: bold;
     font-size: 1.75rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
 
     @media (max-width: 575px) {
       font-size: 1.5rem;
@@ -6250,12 +6250,12 @@
     list-style: none;
 
     li {
-      line-height: 2.5;
+      line-height: 2;
     }
   }
 
   small {
-    font-size: 0.875rem;
+    font-size: 1rem;
   }
 
   .bg-1,
@@ -6286,23 +6286,35 @@
   }
 
   .info {
-    margin: 2rem auto 4rem;
     padding: 2rem 4rem;
-    text-align: center;
+    display: inline-block;
     border-radius: 20px;
     border: 2px solid #3cd3b9;
 
     @media (max-width: 575px) {
-      padding: 1rem;
+      padding: 2rem;
+    }
+
+    h4,
+    p {
+      text-align: center;
+    }
+  }
+
+  .line-bottom {
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #3cd3b9;
+
+    @media (max-width: 991px) {
+      border-bottom: none;
     }
   }
 
-  .border-item {
-    border-right: 2px solid #3cd3b9;
+  .line-item {
+    border-left: 2px solid #3cd3b9;
 
     @media (max-width: 991px) {
-      border-right: none;
-      border-bottom: 2px solid #3cd3b9;
+      border-left: none;
     }
   }
 
@@ -6330,7 +6342,7 @@
   }
 
   #form {
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
 
     .news-form {
       color: #000;