update

content/features/ai-course-instructor-jared/index.md

@@ -0,0 +1,85 @@
+---
+title: "AI 課程講師 Jared：推動產業智慧化的實戰推手"
+date: "2025-09-05T00:00:00+08:00"
+draft: false
+type: "features"
+summary: "聚焦進出口貿易、零售與媒體三大場景，強調「可落地」與「可量化」的導入路徑"
+image: "/features/ai-course-instructor-jared/image_1.webp"
+tags: ["AI", "AI課程講師", "進出口貿易", "零售", "媒體", "數位轉型", "生成式AI"]
+slug: "ai-course-instructor-jared"
+---
+
+{{< threecol >}}
+
+:::left
+
+![Jared Liang](image_1.webp)
+
+:::middle
+
+在數位轉型的浪潮中，許多企業坦言「知道 AI 很重要，卻不知從何下手」。AI 課程講師 Jared 受訪時表示，破解之道是把抽象技術轉化為有步調的管理工作。他說，企業應先鎖定最痛的工作情境，明確描述要解決的問題與期待成效；接著把零散資料梳理乾淨，讓來源、欄位與權限有一致規範；再挑選與目標相符的模型與工具，先讓一個可維護的版本上線，之後以短週期回顧持續調整，讓系統在真實業務中逐步變好。「這是一條能走得久的路，而不是一次性的技術展示，」他強調。
+
+:::right
+
+Jared 補充，關鍵在於讓第一線同事先感受到改變：時間被釋放、錯誤率下降、流程更順，AI 的價值就會被看見。與其一次追求大而全的方案，不如先交付一個看得見的成果，再把方法向外擴散。他提醒，任何導入都應回到問題本身，用清楚的成效去說話，包含投入與產出的對照與持續驗證，讓團隊有共同語言與節奏。「AI 不該只是口號，它必須在現場產生可被量化的改善，」Jared 說。
+
+{{< /threecol >}}
+
+<!-- ### 從問題到成效：AI 導入四步驟
+在數位轉型的浪潮中，不少企業仍停留在「知道 AI 很重要，卻不知從何下手」的階段。AI課程講師 Jared 提出的解方，是將看似遙遠的人工智慧技術拆解成一套可執行的路徑。他歸納出四個核心步驟：場景—數據—模型—迭代。
+
+Jared 認為，企業不必追求「一次導入所有技術」，而應該先找到最具痛點的場景，從小規模試點開始。接著，透過數據整理與清理，建立適合的模型，再透過反覆迭代與檢驗，讓 AI 工具逐漸融入日常流程。這樣的方式，不僅能降低員工的抗拒感，也能讓投資報酬率變得更具體可見。
+
+「AI 不該只是概念或口號，而要真正成為能解決問題的工具。」Jared 強調。 -->
+
+---
+
+### 進出口貿易：AI 讓通關更快更準
+在全球化的進出口市場中，企業最常面臨的挑戰是文件繁瑣與流程冗長。錯誤的資料輸入，不僅會造成延誤，甚至可能帶來高額罰款。
+
+Jared 提到，**自然語言處理（NLP）** 可以快速閱讀並理解報關文件，協助企業降低人工審核的錯誤率。同時，建立「規則庫」能幫助不同國家或地區的通關規範即時更新，縮短作業時間。
+
+更進一步地，AI 模型能針對市場需求與運輸成本進行預測。例如：當系統預測某一航線的貨運費用即將上漲，企業便能提前做出決策，避免不必要的支出。再加上異常偵測機制，AI 還能主動提醒物流延誤或可能的法規風險，讓管理層能即時調整計畫。
+
+「過去依賴經驗的決策，如今可以由數據和模型來輔助，這對貿易公司來說，是一種全新的競爭力。」Jared 說。
+
+---
+
+### 零售產業：數據打底、推薦與庫存同步進化
+零售業是與消費者最貼近的產業，而 AI 正在悄悄改變顧客的購物體驗。Jared 指出，導入 AI 前的第一步，是整合所有數據，包括 POS 系統銷售紀錄、線上購物行為與會員資料。這些數據，就像建築的地基，沒有打穩，後續的應用都會失去效果。
+
+在此基礎上，企業能建立更細緻的顧客分群，並根據購買習慣進行精準推薦。例如：常購買嬰兒用品的家庭，可能會需要尿布、奶粉的組合優惠；而年輕客群則更偏好時尚單品與快閃活動。
+
+庫存管理也是零售商頭痛的環節。AI 能根據歷史銷售資料與季節性需求，預測熱銷商品，提醒企業提前補貨。同時，也能指出哪些商品有積壓風險，幫助業者減少庫存壓力。
+
+更重要的是，AI 還能改善顧客服務。智慧客服系統能即時回答消費者疑問，減少等待時間；而智慧導購則能在線上或實體門市中，根據顧客的偏好給予個人化建議。這些改變，最終都會反映在轉換率提升與顧客滿意度的增長上。
+
+---
+
+### 媒體產業：AI 讓內容更快、觀眾更近、營收更穩
+媒體產業正處於前所未有的轉型期。從新聞產製、影音製作到廣告投放，AI 幾乎滲透到每個環節。Jared 分析，首先是在編採流程中，AI 可用來生成多版本的標題、新聞摘要，甚至進行即時翻譯，幫助媒體更快地將新聞內容傳遞給全球受眾。影音部分，AI 則能自動完成剪輯與字幕生成，大幅縮短後製時間。
+
+在運營層面，AI 透過讀者行為分析，能判斷何時發布文章、在哪些平台曝光效果最好，讓內容觸及率最大化。至於商務模式，AI 同樣帶來變革。廣告主可依據 AI 分析出的讀者輪廓進行精準投放，而會員制媒體則能藉由 AI 建立動態定價模型，針對不同用戶提供差異化方案，提升收入來源。
+
+「媒體的本質是內容，但營運的核心是觀眾。AI 讓媒體能更懂觀眾，這才是未來競爭的關鍵。」Jared 說。
+
+---
+
+### 從試行到標準化：讓 AI 走進每天的工作
+
+談到導入 AI 的真正難處，Jared 並不避諱直言：「**技術反而不是最大問題**。多數專案卡關，其實是卡在治理。」他口中的「治理」，包括資料使用權限怎麼分級、誰能動到模型、版本如何迭代，以及 KPI 要如何與既有流程對齊。「如果沒有這些共識，AI 很容易變成一次性的示範秀，過了發表日就沒人管。」
+
+Jared 給出的處方是明確的三段路徑，但不是照本宣科的流程圖，而是**會動的管理節奏**。他建議企業先從**小型試點**起步：選一個痛點明確、數據可取得的場景，例如報關文件審核或客服常見問答。「試點的關鍵不是把模型訓練到多漂亮，而是用兩到三個清楚的指標——像是錯誤率、處理時間、滿意度——去驗證它是不是有『實際價值』。」
+
+當試點跑出成果，第二步是**擴散**。Jared 形容這是「把成功做成模板」的過程：把資料欄位定義、權限設計、回訓週期、監控儀表板都整理成套件，複製到相鄰部門或相近流程。「擴散不是一股腦全部上，而是按『相似度』排序。越像的先複製，邊複製邊調整。」
+
+最後一段是**標準化**。這意味著將 AI 納入組織的固定機制：模型有版本歷史，資料有存取紀錄，權限有審批流程，績效指標會被定期檢視。「標準化讓專案不再綁在某個團隊或某位工程師身上，」Jared 說，「**工具換了、成員換了，流程照樣跑**。」
+
+為了讓節奏不走樣，Jared 建議採取**季度檢核**：每三個月檢視一次模型表現與業務指標是否一致，並將回饋納入下一輪迭代。「這個檢核不像審計那麼硬，而是讓 AI 和業務彼此拉齊。當你能持續回答：它現在為什麼有用、下一季怎麼更好，AI 就不會只是一個『專案』，而會成為企業文化的一部分。」
+
+---
+
+### 從講師到引路人：帶企業跨出 AI 第一哩路
+
+從進出口貿易、零售業到媒體產業，Jared 的觀察揭示了一個共通點：AI 的價值不在於技術多先進，而在於能否真正解決問題，並產生可量化的成果。 在他的課程與顧問實務中，AI 不再是遙不可及的高科技，而是幫助企業提效、降本、創新的實用工具。這場由 AI 驅動的轉型浪潮，正在各個產業全面展開，而 Jared 的角色，正是那個帶領企業跨出第一步的引路人。
+

news_templates/static/css/style.css

@@ -33,15 +33,21 @@ body {
 }
 
 body {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   overflow-y: scroll;
 }
 
 .btn:focus,
 .form-control:focus {
   border-color: var(--main-color) !important;
-  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
   outline: 0 none !important;
 }
 
@@ -52,16 +58,22 @@ body {
 .navbar {
   background-color: var(--main-color) !important;
 }
+
 .navbar .navbar-collapse {
-  flex-grow: 0;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
 }
+
 .navbar .navbar-brand {
   font-size: 50px;
   font-weight: 500;
   font-family: "Roboto Slab", serif !important;
   color: var(--sub-color);
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 .navbar .navbar-brand:hover {
   opacity: 0.9;
   color: var(--sub-color);
@@ -70,6 +82,7 @@ body {
 .blog-post-tags .badge {
   background-color: var(--main-color);
 }
+
 .blog-post-tags .badge:hover {
   color: var(--main-color);
   background-color: #fff;
@@ -79,17 +92,22 @@ body {
 .blog-post-title {
   margin: 10px 0 20px;
 }
+
 .blog-post-title a {
   font-size: 50px;
   font-weight: 600;
 }
 
 .pagination {
-  justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
+
 .pagination .page-link {
   color: var(--main-color);
 }
+
 .pagination .page-item.active .page-link {
   z-index: 3;
   color: #fff;
@@ -109,6 +127,7 @@ body {
   position: relative;
   font-size: 22px;
 }
+
 .post-block-title::after {
   position: absolute;
   z-index: -10;
@@ -120,6 +139,7 @@ body {
   border-bottom: 1px solid #929292;
   bottom: 5px;
 }
+
 .post-block-title span {
   font-weight: 500;
   background: #fff;
@@ -129,16 +149,20 @@ body {
   margin-top: 10px;
   line-height: 20px;
 }
+
 .news-info a {
   font-size: 14px;
   font-weight: 500;
   color: var(--gray-color);
   text-decoration: none;
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 .news-info a:hover {
   opacity: 0.8;
 }
+
 .news-info small {
   color: var(--gray-color);
 }
@@ -167,6 +191,7 @@ body {
   text-overflow: ellipsis;
   line-height: 26px;
 }
+
 .post-depiction a {
   color: #7a7a7a;
   text-decoration: none;
@@ -178,8 +203,10 @@ body {
   right: 15px;
   z-index: 10;
   opacity: 0;
-  transition: all 0.5s;
+  -webkit-transition: all .5s;
+  transition: all .5s;
 }
+
 .top-btn button {
   border: none;
   background: var(--sub-color);
@@ -194,9 +221,11 @@ body {
 
 /* sidebar.html Start */
 .news-sidebar {
+  position: -webkit-sticky;
   position: sticky;
   top: 15px;
 }
+
 .news-sidebar .news-featured {
   position: unset;
 }
@@ -204,12 +233,15 @@ body {
 .search-btn {
   border: 1px solid var(--main-color) !important;
 }
+
 .search-btn svg {
   color: var(--main-color);
 }
+
 .search-btn:hover {
   background-color: var(--main-color) !important;
 }
+
 .search-btn:hover svg {
   color: #fff;
 }
@@ -222,6 +254,7 @@ body {
   color: var(--main-color) !important;
   border: 1px solid var(--main-color) !important;
 }
+
 .tags:hover {
   color: #fff !important;
   background-color: var(--main-color);
@@ -234,6 +267,7 @@ body {
   font-weight: 300;
   line-height: 32px;
 }
+
 .blog-post.content h4 a {
   padding: 5px 8px;
   margin-right: 3px;
@@ -241,6 +275,7 @@ body {
   border-radius: 5px;
   font-size: 14px;
 }
+
 .blog-post.content h4 a:hover {
   color: #fff !important;
 }
@@ -250,8 +285,10 @@ body {
   display: block;
   text-align: center;
   text-decoration: none;
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 .back-link:hover {
   opacity: 0.7;
 }
@@ -262,9 +299,11 @@ body {
   height: 100%;
   overflow: hidden;
 }
+
 .news-main a {
   text-decoration: none;
 }
+
 .news-main .title-info {
   position: absolute;
   bottom: 0;
@@ -272,17 +311,21 @@ body {
   right: 0;
   z-index: 10;
   padding: 1rem;
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), color-stop(50%, rgba(0, 0, 0, 0.7)), color-stop(80%, rgba(0, 0, 0, 0.3)), to(transparent));
   background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
 }
+
 .news-main .title-info a,
 .news-main .title-info h2,
 .news-main .title-info small {
   color: #fff;
   letter-spacing: 1px;
 }
+
 .news-main .title-info h2 {
   line-height: 1.5;
 }
+
 .news-main .title-info h2 a {
   font-weight: 500;
   font-size: 1.5rem;
@@ -293,11 +336,13 @@ body {
   text-overflow: ellipsis;
   word-break: break-word;
 }
+
 @media (max-width: 991px) {
   .news-main .title-info h2 a {
     font-size: 1.25rem;
   }
 }
+
 .news-main .title-info .badge-link {
   display: inline-block;
   padding: 1px 20px;
@@ -305,19 +350,23 @@ body {
   background-color: var(--sub-color);
   font-weight: 500;
 }
+
 .news-main .post-title a {
   font-size: 34px;
 }
+
 .news-main img {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 @media (max-width: 991px) {
   .news-main .main-img {
     height: 50vw;
   }
 }
+
 .news-main .news-info a {
   font-size: 16px;
 }
@@ -325,6 +374,7 @@ body {
 /* content.html End */
 /* focus.html Start */
 .focus-content {
+  position: -webkit-sticky;
   position: sticky;
   top: 20px;
 }
@@ -334,21 +384,26 @@ body {
 .recent-content .news-list {
   margin: 0;
 }
+
 .recent-content .news-list li {
   margin: 15px 0;
 }
+
 .recent-content .news-list li img {
   width: 140px;
   height: 105px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .recent-content .news-list li small {
   display: block;
 }
+
 .recent-content .news-list li .news-info {
   margin-top: 0px;
 }
+
 .recent-content .news-list li:last-child {
   margin: 0;
 }
@@ -359,6 +414,7 @@ body {
   color: var(--main-color);
   font-weight: 500;
 }
+
 .tab-category .nav-pills .nav-link.active,
 .tab-category .nav-pills .show > .nav-link {
   color: var(--sub-color);
@@ -373,16 +429,19 @@ body {
   background-position: center center;
   cursor: pointer;
 }
+
 .tab-content .bg-img section {
   padding: 10px 25px;
   position: absolute;
   bottom: 0;
   color: #fff;
 }
+
 .tab-content .bg-img section a {
   color: #fff;
   text-decoration: none;
 }
+
 .tab-content .bg-img section small {
   font-size: 12px;
 }
@@ -392,20 +451,25 @@ body {
 .news-all .post-title {
   margin: 5px auto;
 }
+
 .news-all .post-title a {
   font-size: 36px;
 }
+
 .news-all .news-info a {
   font-size: 18px;
 }
+
 .news-all hr {
   margin: 1.5rem 0;
 }
+
 .news-all .first-img {
   height: 50vh;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .news-all .line {
   padding: 0 12px;
 }
@@ -413,8 +477,10 @@ body {
 /* news-all.html End */
 /* news-featured.html Start */
 .news-featured {
+  position: -webkit-sticky;
   position: sticky;
   top: 20px;
 }
 
-/* news-featured.html End *//*# sourceMappingURL=style.css.map */
+/* news-featured.html End */
+/*# sourceMappingURL=style.css.map */

static/css/style.css

@@ -33,15 +33,21 @@ body {
 }
 
 body {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   overflow-y: scroll;
 }
 
 .btn:focus,
 .form-control:focus {
   border-color: var(--main-color) !important;
-  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
   outline: 0 none !important;
 }
 
@@ -52,22 +58,29 @@ body {
 .navbar {
   background-color: var(--main-color) !important;
 }
+
 .navbar .navbar-collapse {
-  flex-grow: 0;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
 }
+
 .navbar .navbar-brand {
   font-size: 50px;
   font-weight: 500;
   font-family: "Roboto Slab", serif !important;
   color: var(--sub-color);
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 @media (max-width: 575px) {
   .navbar .navbar-brand {
     padding-left: 1rem;
     font-size: 35px;
   }
 }
+
 .navbar .navbar-brand:hover {
   opacity: 0.9;
   color: var(--sub-color);
@@ -76,6 +89,7 @@ body {
 .blog-post-tags .badge {
   background-color: var(--main-color);
 }
+
 .blog-post-tags .badge:hover {
   color: var(--main-color);
   background-color: #fff;
@@ -85,17 +99,22 @@ body {
 .blog-post-title {
   margin: 10px 0 20px;
 }
+
 .blog-post-title a {
   font-size: 50px;
   font-weight: 500;
 }
 
 .pagination {
-  justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
+
 .pagination .page-link {
   color: var(--main-color);
 }
+
 .pagination .page-item.active .page-link {
   z-index: 3;
   color: #fff;
@@ -115,6 +134,7 @@ body {
   position: relative;
   font-size: 20px;
 }
+
 .post-block-title::after {
   position: absolute;
   z-index: -10;
@@ -126,6 +146,7 @@ body {
   border-bottom: 1px solid var(--sub-color);
   bottom: 5px;
 }
+
 .post-block-title span {
   padding: 5px 20px;
   color: #fff;
@@ -137,16 +158,20 @@ body {
   margin-top: 10px;
   line-height: 20px;
 }
+
 .news-info a {
   font-size: 14px;
   font-weight: 500;
   color: var(--gray-color);
   text-decoration: none;
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 .news-info a:hover {
   opacity: 0.8;
 }
+
 .news-info small {
   color: var(--gray-color);
 }
@@ -175,6 +200,7 @@ body {
   text-overflow: ellipsis;
   line-height: 26px;
 }
+
 .post-depiction a {
   color: #7a7a7a;
   text-decoration: none;
@@ -186,8 +212,10 @@ body {
   right: 15px;
   z-index: 10;
   opacity: 0;
+  -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
+
 .top-btn button {
   border: none;
   background: var(--sub-color);
@@ -203,6 +231,7 @@ body {
 .blog-header .nav-item {
   padding: 0 0.3rem;
 }
+
 @media (max-width: 575px) {
   .blog-header .nav-item {
     padding: 0 1rem;
@@ -211,9 +240,11 @@ body {
 
 /* sidebar.html Start */
 .news-sidebar {
+  position: -webkit-sticky;
   position: sticky;
   top: 15px;
 }
+
 .news-sidebar .news-featured {
   position: unset;
 }
@@ -221,12 +252,15 @@ body {
 .search-btn {
   border: 1px solid var(--main-color) !important;
 }
+
 .search-btn svg {
   color: var(--main-color);
 }
+
 .search-btn:hover {
   background-color: var(--main-color) !important;
 }
+
 .search-btn:hover svg {
   color: #fff;
 }
@@ -239,6 +273,7 @@ body {
   color: var(--main-color) !important;
   border: 1px solid var(--main-color) !important;
 }
+
 .tags:hover {
   color: #fff !important;
   background-color: var(--main-color);
@@ -249,6 +284,7 @@ body {
 .blog-post.content .content {
   padding-bottom: 3rem;
 }
+
 .blog-post.content .toc-container {
   padding: 1.5rem;
   margin: 3rem 0;
@@ -256,14 +292,17 @@ body {
   border: 1px solid #aaa;
   border-radius: 5px;
 }
+
 .blog-post.content .toc-container ul {
   margin-bottom: 0;
   list-style: disc;
 }
+
 .blog-post.content .toc-container ul a {
   color: var(--sub-color);
   text-decoration: none;
 }
+
 .blog-post.content .toc-container .title {
   display: block;
   margin-left: 1rem;
@@ -271,17 +310,20 @@ body {
   font-size: 1.25rem;
   color: #000;
 }
+
 .blog-post.content h2 {
   padding-left: 1rem;
   margin: 5rem 0 1.5rem;
   border-left: 7px solid var(--sub-color);
 }
+
 .blog-post.content h4 {
   margin-top: 3rem;
   font-size: 1.25rem;
   font-weight: 500;
   line-height: 32px;
 }
+
 .blog-post.content h4 a {
   padding: 5px 8px;
   margin-right: 3px;
@@ -289,6 +331,7 @@ body {
   border-radius: 5px;
   font-size: 14px;
 }
+
 .blog-post.content h4 a:hover {
   color: #fff !important;
 }
@@ -298,8 +341,10 @@ body {
   display: block;
   text-align: center;
   text-decoration: none;
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+
 .back-link:hover {
   opacity: 0.7;
 }
@@ -310,9 +355,11 @@ body {
   height: 100%;
   overflow: hidden;
 }
+
 .news-main a {
   text-decoration: none;
 }
+
 .news-main .title-info {
   position: absolute;
   bottom: 0;
@@ -320,17 +367,21 @@ body {
   right: 0;
   z-index: 10;
   padding: 1rem;
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.95)), color-stop(50%, rgba(0, 0, 0, 0.7)), color-stop(80%, rgba(0, 0, 0, 0.3)), to(transparent));
   background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
 }
+
 .news-main .title-info a,
 .news-main .title-info h2,
 .news-main .title-info small {
   color: #fff;
   letter-spacing: 1px;
 }
+
 .news-main .title-info h2 {
   line-height: 1.5;
 }
+
 .news-main .title-info h2 a {
   font-weight: 500;
   font-size: 1.5rem;
@@ -341,11 +392,13 @@ body {
   text-overflow: ellipsis;
   word-break: break-word;
 }
+
 @media (max-width: 991px) {
   .news-main .title-info h2 a {
     font-size: 1.25rem;
   }
 }
+
 .news-main .title-info .badge-link {
   display: inline-block;
   padding: 1px 20px;
@@ -353,14 +406,17 @@ body {
   background-color: var(--sub-color);
   font-weight: 500;
 }
+
 .news-main .post-title a {
   font-size: 34px;
 }
+
 .news-main img {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .news-main .news-info a {
   font-size: 16px;
 }
@@ -368,6 +424,7 @@ body {
 /* content.html End */
 /* focus.html Start */
 .focus-content {
+  position: -webkit-sticky;
   position: sticky;
   top: 20px;
 }
@@ -378,12 +435,14 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 @media (max-width: 991px) {
   .focus-content img,
   .news-featured img {
     height: 15vw;
   }
 }
+
 .focus-content .post-title,
 .news-featured .post-title {
   overflow: hidden;
@@ -400,21 +459,26 @@ body {
 .recent-content .news-list {
   margin: 0;
 }
+
 .recent-content .news-list li {
   margin: 15px 0;
 }
+
 .recent-content .news-list li img {
   width: 140px;
   height: 105px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .recent-content .news-list li small {
   display: block;
 }
+
 .recent-content .news-list li .news-info {
   margin-top: 0px;
 }
+
 .recent-content .news-list li:last-child {
   margin: 0;
 }
@@ -425,6 +489,7 @@ body {
   color: var(--main-color);
   font-weight: 500;
 }
+
 .tab-category .nav-pills .nav-link.active,
 .tab-category .nav-pills .show > .nav-link {
   color: var(--sub-color);
@@ -439,24 +504,29 @@ body {
   background-position: center center;
   cursor: pointer;
 }
+
 @media (max-width: 991px) {
   .tab-content .bg-img {
     height: 50vw;
   }
 }
+
 .tab-content .bg-img section {
   padding: 10px 25px;
   position: absolute;
   bottom: 0;
   color: #fff;
 }
+
 .tab-content .bg-img section a {
   color: #fff;
   text-decoration: none;
 }
+
 .tab-content .bg-img section small {
   font-size: 12px;
 }
+
 .tab-content .col-5 img {
   height: 150px;
 }
@@ -466,6 +536,7 @@ body {
 .news-all .post-title {
   margin: 5px auto;
 }
+
 .news-all .post-title a {
   font-size: 1.5rem;
   display: -webkit-box;
@@ -475,27 +546,33 @@ body {
   text-overflow: ellipsis;
   word-break: break-word;
 }
+
 .news-all .news-info a {
   font-size: 18px;
 }
+
 .news-all hr {
   margin: 1.5rem 0;
 }
+
 .news-all img {
   height: 12vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 @media (max-width: 991px) {
   .news-all img {
     height: 20vw;
   }
 }
+
 @media (max-width: 575px) {
   .news-all img {
     height: 50vw;
   }
 }
+
 .news-all .line {
   padding: 0 12px;
 }
@@ -503,6 +580,7 @@ body {
 /* news-all.html End */
 /* news-featured.html Start */
 .news-featured {
+  position: -webkit-sticky;
   position: sticky;
   top: 20px;
 }
@@ -514,6 +592,7 @@ body {
   width: 100%;
   text-align: center;
 }
+
 .news-video .post-title a {
   font-size: 18px;
   display: -webkit-box;
@@ -522,6 +601,7 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .news-video .news-info a {
   font-size: 14px;
 }
@@ -530,12 +610,15 @@ body {
 .news-main .left-content {
   height: 45vh;
 }
+
 .news-main .right-content {
   height: 55vh;
 }
+
 .news-main .bottom-content {
   height: 35vh;
 }
+
 @media (max-width: 991px) {
   .news-main .left-content,
   .news-main .right-content,
@@ -555,15 +638,19 @@ body {
   max-width: 60%;
   margin: 1rem 0 0 1rem;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+
 .feature-article .float-left {
   float: left;
   max-width: 60%;
   margin: 1rem 1.5rem 0 0;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+
 @media (max-width: 768px) {
   .feature-article .float-right,
   .feature-article .float-left {
@@ -574,21 +661,26 @@ body {
     /* 圖片置中 */
   }
 }
+
 .feature-article figure {
   margin: 2rem 0;
   text-align: center;
 }
+
 .feature-article figure img {
   width: 100%;
   height: auto;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
 }
+
 .feature-article h1 {
   font-size: 3.5rem;
   margin: 3rem auto;
   padding-top: 1.5rem;
   border-top: 12px solid var(--sub-color);
 }
+
 .feature-article h2 {
   padding: 1.5rem 0;
   margin: 2.5rem auto;
@@ -599,20 +691,25 @@ body {
   font-size: 2.5rem;
   font-weight: 500;
 }
+
 .feature-article h3,
 .feature-article h4 {
   margin-bottom: 1rem;
   color: var(--sub-color);
 }
+
 .feature-article hr {
   margin: 3rem 0;
 }
+
+.feature-article .feature-body div,
 .feature-article .feature-body p {
   margin: 1.5rem 0 0;
   line-height: 1.8;
   font-size: 1.05rem;
   color: #222;
 }
+
 .feature-article .lead {
   display: inline-block;
   padding: 0.5rem 1.5rem;
@@ -621,16 +718,20 @@ body {
   border-left: 5px solid var(--sub-color);
   border: 2px dotted #ccc;
 }
+
 .feature-article ul {
   list-style: disc;
 }
+
 .feature-article ol {
   list-style: auto;
 }
+
 .feature-article b,
 .feature-article strong {
   font-weight: 700;
 }
+
 .feature-article .toc {
   margin: 3rem 0;
   background: #f9f9f9;
@@ -638,47 +739,63 @@ body {
   border-left: 4px solid var(--sub-color);
   font-size: 0.95rem;
 }
+
 .feature-article .toc .toc-title {
   font-size: 1.25rem;
   font-weight: bold;
   margin: 1rem 0;
 }
+
 .feature-article .toc ul {
   list-style: none;
   padding-left: 0;
 }
+
 .feature-article .toc ul li {
   margin: 0.15rem 0;
   font-size: 1rem;
 }
+
 .feature-article .toc ul li a {
   text-decoration: none;
   color: var(--sub-color);
 }
+
 .feature-article .toc ul li a:hover {
   text-decoration: underline;
 }
+
 .feature-article .toc ul li:empty {
   display: none;
 }
+
 .feature-article .quote-accent {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   gap: 0.5rem;
   padding: 1rem 0;
   font-size: 2rem;
   font-weight: 600;
   border-top: 4px solid var(--sub-color);
 }
+
 .feature-article .quote-accent::before {
   content: "“";
-  flex: 0 0 auto;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 2.8em;
   line-height: 0.6;
   color: var(--sub-color);
   margin-top: 0.1em;
 }
+
 .feature-article .quote-accent > p {
   margin: 0;
-}/*# sourceMappingURL=style.css.map */
+}
+/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -362,8 +362,13 @@ body {
     right: 0;
     z-index: 10;
     padding: 1rem;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
-
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.95) 0%,
+      rgba(0, 0, 0, 0.7) 50%,
+      rgba(0, 0, 0, 0.3) 80%,
+      transparent 100%
+    );
 
     a,
     h2,
@@ -525,7 +530,7 @@ body {
   }
 
   .nav-pills .nav-link.active,
-  .nav-pills .show>.nav-link {
+  .nav-pills .show > .nav-link {
     color: var(--sub-color);
     background-color: var(--main-color);
   }
@@ -719,7 +724,6 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
-
   .float-left {
     float: left;
     max-width: 60%;
@@ -728,7 +732,6 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
-
   .float-right,
   .float-left {
     @media (max-width: 768px) {
@@ -740,7 +743,6 @@ body {
     }
   }
 
-
   figure {
     margin: 2rem 0;
     text-align: center;
@@ -791,7 +793,7 @@ body {
   h3,
   h4 {
     margin-bottom: 1rem;
-    color: var(--sub-color)
+    color: var(--sub-color);
   }
 
   hr {
@@ -799,6 +801,7 @@ body {
   }
 
   .feature-body {
+    div,
     p {
       margin: 1.5rem 0 0;
       line-height: 1.8;
@@ -809,7 +812,7 @@ body {
 
   .lead {
     display: inline-block;
-    padding: .5rem 1.5rem;
+    padding: 0.5rem 1.5rem;
     margin-bottom: 1.5rem;
     background-color: #f8f8f8;
     border-left: 5px solid var(--sub-color);
@@ -870,7 +873,7 @@ body {
   .quote-accent {
     display: flex;
     align-items: flex-start;
-    gap: .5rem;
+    gap: 0.5rem;
     padding: 1rem 0;
     font-size: 2rem;
     font-weight: 600;
@@ -881,13 +884,13 @@ body {
       flex: 0 0 auto;
       font-family: Georgia, "Times New Roman", serif;
       font-size: 2.8em;
-      line-height: .6;
+      line-height: 0.6;
       color: var(--sub-color);
-      margin-top: .1em;
+      margin-top: 0.1em;
     }
 
-    &>p {
+    & > p {
       margin: 0;
     }
   }
-}
+}