diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index 33dd23c..76c5164 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -310,7 +310,13 @@
 
             $('.mobile-menu').toggleClass('active');
             $('body').toggleClass('noscroll');
-            $('.mobile-menu .navbar-toggle').removeClass('collapsed');
+
+            // ★ 修正：依據 active 狀態決定 collapsed 的加/移除
+            if ($('.mobile-menu').hasClass('active')) {
+              $('.mobile-menu .navbar-toggle').removeClass('collapsed'); // 打開 → 叉叉
+            } else {
+              $('.mobile-menu .navbar-toggle').addClass('collapsed');    // 關閉 → 三條橫線
+            }
 
             // 關閉所有下拉選單
             $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
@@ -324,6 +330,34 @@
             }
           });
 
+          // ✅ Tab 鍵跳過 .mobile-menu 時，觸發收合邏輯
+          $(document).on('focusout', '.mobile-menu', function(e) {
+            setTimeout(function() {
+              var $newFocus = $(document.activeElement);
+
+              // 焦點在 body 時代表滑鼠正在點擊中，不處理
+              if ($newFocus.is('body')) return;
+
+              if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
+
+                var $btn = $('.navbar-toggle').first();
+
+                if ($btn.attr('data-bs-toggle')) {
+                  var target = $btn.attr('data-bs-target');
+                  var bsCollapse = window.bootstrap && bootstrap.Collapse.getInstance($(target)[0]);
+                  if (bsCollapse) bsCollapse.hide();
+                  $('.mobile-menu').removeClass('active');
+                  $('body').removeClass('noscroll');
+                  $('.mobile-menu .navbar-toggle').addClass('collapsed');
+                  $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
+                  $('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
+                } else {
+                  $btn.trigger('click');
+                }
+              }
+            }, 50);
+          });
+
           $('.mobile-menu1 > .menu-drop').click(function(){
             var $that = $(this);
             var opencheck1 = $that.hasClass('opened');
@@ -966,284 +1000,372 @@
             setTimeout(fixImageAccessibility, 500);
         });
 
-    // 有連結目的之所有a標籤的無障礙處理
-    $(function() {
-        /**
-         * 全站無障礙 AA 級補強 (整合 HM1240400C 與 HM1240401C 規範)
-         */
-        function fixAccessibilityAll() {
-            // --- 0. 環境與語言偵測 ---
-            //1200ms 後執行（確保所有其他 function 執行完畢後才處理）
-            //Part 1：修正語言選單按鈕
-            //Part 2：掃描所有 <a>
-                //├─ 排除 navbar-brand、javascript: 連結
-                //├─ 空連結 → 隱藏
-                //├─ 文字是路徑/空 → 補隱藏 span
-                //├─ 圖片+文字共存 → 圖片 alt 清空
-                //├─ 無 title → 自動產出 title
-                //├─ 有 title 但與連結文字重複 → 只保留開窗提示
-                //├─ 有 title 出現空括號 () → 清除並補上正確開窗提示
-                //└─ 移除 aria-label
-            var urlParams = new URLSearchParams(window.location.search);
-            var isEditMode = urlParams.get('editmode') === 'on';
+// 有連結目的之所有a標籤的無障礙處理
+$(function() {
+    // Bootstrap 會把原始 title 搬到 data-bs-original-title，先還原回來
+    $('a[data-bs-original-title]').each(function() {
+        var $a = $(this);
+        var originalTitle = $a.attr('data-bs-original-title');
+        if (originalTitle && originalTitle.trim() !== '') {
+            $a.attr('title', originalTitle);
+        }
+    });
 
-            var pageLang = $('html').attr('lang') || 'zh-Hant';
-            var isEn = pageLang.toLowerCase().startsWith('en');
+    /**
+     * 全站無障礙 AA 級補強 (整合 HM1240400C 與 HM1240401C 規範)
+     */
+    function fixAccessibilityAll() {
+        // --- 0. 環境與語言偵測 ---
+        //1200ms 後執行（確保所有其他 function 執行完畢後才處理）
+        //Part 1：修正語言選單按鈕
+        //Part 2：掃描所有 <a>
+            //├─ 排除 navbar-brand、javascript: 連結
+            //├─ 空連結 → 隱藏
+            //├─ 文字是路徑/空 → 補隱藏 span
+            //├─ 圖片+文字共存 → 圖片 alt 清空
+            //├─ 無 title → 自動產出 title
+            //├─ 有 title 但與連結文字或圖片 alt 重複 → 只保留開窗提示
+            //├─ 有 title 出現空括號 () → 清除並補上正確開窗提示
+            //└─ 移除 aria-label
+        var urlParams = new URLSearchParams(window.location.search);
+        var isEditMode = urlParams.get('editmode') === 'on';
 
-            var i18n = {
-                langBtn: isEn ? 'Open language menu in this window' : '在本視窗開啟語言選單',
-                newWin: isEn ? 'Open in new window' : '在新視窗開啟',
-                selfWin: isEn ? 'Open in this window' : '在本視窗開啟',
-                link: isEn ? 'Link' : '連結',
-                openImg: isEn ? 'Open image' : '開啟圖片內容',
-                sort: isEn ? 'Sort' : '排序'
-            };
+        var pageLang = $('html').attr('lang') || 'zh-Hant';
+        var isEn = pageLang.toLowerCase().startsWith('en');
 
-            // --- Part 1: 語言選單修正 ---
-            var $langBtn = $('#languagebutton');
-            if ($langBtn.length > 0) {
-                $langBtn.attr('title', i18n.langBtn);
-                $langBtn.removeAttr('aria-label');
+        var i18n = {
+            langBtn: isEn ? 'Open language menu in this window' : '在本視窗開啟語言選單',
+            newWin: isEn ? 'Open in new window' : '在新視窗開啟',
+            selfWin: isEn ? 'Open in this window' : '在本視窗開啟',
+            link: isEn ? 'Link' : '連結',
+            openImg: isEn ? 'Open image' : '開啟圖片內容',
+            sort: isEn ? 'Sort' : '排序'
+        };
+
+        // --- Part 1: 語言選單修正 ---
+        var $langBtn = $('#languagebutton');
+        if ($langBtn.length > 0) {
+            $langBtn.attr('title', i18n.langBtn);
+            $langBtn.removeAttr('aria-label');
+        }
+
+        // --- Part 2: 全站連結與圖片邏輯處理 ---
+        $('a').each(function() {
+            var $a = $(this);
+
+            // 【條件 1：排除特定 class】
+            if ($a.hasClass('navbar-brand')) {
+                return; 
             }
 
-            // --- Part 2: 全站連結與圖片邏輯處理 ---
-            $('a').each(function() {
-                var $a = $(this);
+            var href = ($a.attr('href') || '').toLowerCase();
+            if (!href || href.startsWith('javascript:')) return;
 
-                // 【條件 1：排除特定 class】
-                if ($a.hasClass('navbar-brand')) {
-                    return; 
+            // --- 關鍵修正：先偵測是否有原始 title ---
+            var rawTitleAttr = $a.attr('title');
+            var hasOriginalTitle = (typeof rawTitleAttr !== 'undefined' && rawTitleAttr !== false && rawTitleAttr.trim() !== "");
+
+            // 清理 &nbsp; 與 空白
+            var linkText = $a.text().replace(/\u00a0/g, '').trim();
+            var $img = $a.find('img');
+            var $icons = $a.find('i, svg'); 
+            var currentTitle = ($a.attr('title') || '').trim();
+
+            // ✅ 在 D 區塊清空 alt 之前，先記錄圖片原始 alt
+            var imgAltOriginal = $img.length > 0 ? ($img.attr('alt') || '').trim() : '';
+            
+            // --- 【修正 1：隱藏空連結】 ---
+            if (!isEditMode && linkText === "" && $img.length === 0 && $icons.length === 0) {
+                $a.hide();
+                return; 
+            }
+
+            // --- 【修正 2：文字語意防禦】 ---
+            if ((linkText === "" || linkText.startsWith('/') || linkText.includes('?')) && $img.length === 0 && $icons.length === 0) {
+                var accessibleText = i18n.link; 
+                if (href.includes('sort')) {
+                    accessibleText = i18n.sort;
                 }
-
-                var href = ($a.attr('href') || '').toLowerCase();
-                if (!href || href.startsWith('javascript:')) return;
-
-                // --- 關鍵修正：先偵測是否有原始 title ---
-                var rawTitleAttr = $a.attr('title');
-                var hasOriginalTitle = (typeof rawTitleAttr !== 'undefined' && rawTitleAttr !== false && rawTitleAttr.trim() !== "");
-
-                // 清理 &nbsp; 與 空白
-                var linkText = $a.text().replace(/\u00a0/g, '').trim();
-                var $img = $a.find('img');
-                var $icons = $a.find('i, svg'); 
-                var currentTitle = ($a.attr('title') || '').trim();
                 
-                // --- 【修正 1：隱藏空連結】 ---
-                if (!isEditMode && linkText === "" && $img.length === 0 && $icons.length === 0) {
-                    $a.hide();
-                    return; 
+                var $span = $a.find('span');
+                if ($span.length > 0) {
+                    $span.text(accessibleText);
+                } else {
+                    $a.append('<span>' + accessibleText + '</span>');
+                    $span = $a.find('span').last();
                 }
 
-                // --- 【修正 2：文字語意防禦】 ---
-                if ((linkText === "" || linkText.startsWith('/') || linkText.includes('?')) && $img.length === 0) {
-                    var accessibleText = i18n.link; 
-                    if (href.includes('sort')) {
-                        accessibleText = i18n.sort;
-                    }
-                    
-                    var $span = $a.find('span');
-                    if ($span.length > 0) {
-                        $span.text(accessibleText);
-                    } else {
-                        $a.append('<span>' + accessibleText + '</span>');
-                        $span = $a.find('span').last();
-                    }
+                $span.css({
+                    'display': 'inline-block', 'position': 'absolute', 'width': '1px', 'height': '1px',
+                    'padding': '0', 'margin': '-1px', 'overflow': 'hidden', 'clip': 'rect(0, 0, 0, 0)',
+                    'white-space': 'nowrap', 'border': '0'
+                });
+                linkText = accessibleText; 
+            }
 
-                    $span.css({
-                        'display': 'inline-block', 'position': 'absolute', 'width': '1px', 'height': '1px',
-                        'padding': '0', 'margin': '-1px', 'overflow': 'hidden', 'clip': 'rect(0, 0, 0, 0)',
-                        'white-space': 'nowrap', 'border': '0'
-                    });
-                    linkText = accessibleText; 
+            // A. 視窗動作規範
+            var isNewWindow = ($a.attr('target') === '_blank');
+            var windowTask = isNewWindow ? i18n.newWin : i18n.selfWin;
+
+            // B. 偵測檔案類型
+            var fileExt = "";
+            var fileMatches = href.match(/\.(pdf|doc|docx|xls|xlsx|ppt|pptx|odt|ods|odp|zip|rar|jpg|png|csv)$/);
+            if (fileMatches) {
+                fileExt = fileMatches[1].toLowerCase(); 
+            }
+
+            // C. 智慧修正標題判斷
+            var hasBadSymbol = currentTitle.includes('()') || 
+                                currentTitle.includes('Open in new window') ||
+                                currentTitle.includes('/uploads/');
+
+            if (currentTitle.startsWith('/') || currentTitle.includes('?')) {
+                currentTitle = "";
+            }
+
+            // D. 處理【HM1240400C】：圖片與文字毗鄰時，替代文字只能有一份
+            if (($img.length > 0 || $icons.length > 0) && linkText !== "") {
+                if ($img.length > 0) {
+                    $img.attr('alt', '');
                 }
 
-                // A. 視窗動作規範
-                var isNewWindow = ($a.attr('target') === '_blank');
-                var windowTask = isNewWindow ? i18n.newWin : i18n.selfWin;
+                var $hiddenSpans = $a.find('span').filter(function() {
+                    return $(this).css('display') === 'none' || $(this).attr('style')?.includes('display: none');
+                });
 
-                // B. 偵測檔案類型
-                var fileExt = "";
-                var fileMatches = href.match(/\.(pdf|doc|docx|xls|xlsx|ppt|pptx|odt|ods|odp|zip|rar|jpg|png|csv)$/);
-                if (fileMatches) {
-                    fileExt = fileMatches[1].toLowerCase(); 
-                }
-
-                // C. 智慧修正標題判斷
-                var hasBadSymbol = currentTitle.includes('()') || 
-                                    currentTitle.includes('Open in new window') ||
-                                    currentTitle.includes('/uploads/');
-
-                if (currentTitle.startsWith('/') || currentTitle.includes('?')) {
-                    currentTitle = "";
-                }
-
-                // D. 處理【HM1240400C】：圖片與文字毗鄰時，替代文字只能有一份
-                if (($img.length > 0 || $icons.length > 0) && linkText !== "") {
-                    if ($img.length > 0) {
-                        $img.attr('alt', '');
-                    }
-
-                    var $hiddenSpans = $a.find('span').filter(function() {
-                        return $(this).css('display') === 'none' || $(this).attr('style')?.includes('display: none');
-                    });
-
-                    if ($hiddenSpans.length > 0) {
-                        $hiddenSpans.each(function() {
-                            var $span = $(this);
-                            if ($span.text().includes('/uploads/')) {
-                                $span.text(i18n.openImg);
-                            }
-                            
-                            $span.css({
-                                'display': 'inline-block',
-                                'position': 'absolute',
-                                'width': '1px',
-                                'height': '1px',
-                                'padding': '0',
-                                'margin': '-1px',
-                                'overflow': 'hidden',
-                                'clip': 'rect(0, 0, 0, 0)',
-                                'white-space': 'nowrap',
-                                'border': '0'
-                            });
-                        });
-                    }
-                }
-
-                // E. 重新計算標題 (關鍵邏輯：若 hasOriginalTitle 為真，則不進入此區塊)
-                if (!hasOriginalTitle) {
-                    if (linkText === "" && $img.length > 0) {
-                        var rawAlt = ($img.attr('alt') || '').trim();
-                        var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', ''];
-                        var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; }) 
-                                        ? ($a.attr('aria-label') || i18n.link) : rawAlt;
+                if ($hiddenSpans.length > 0) {
+                    $hiddenSpans.each(function() {
+                        var $span = $(this);
+                        if ($span.text().includes('/uploads/')) {
+                            $span.text(i18n.openImg);
+                        }
                         
-                        var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : '';
-                        $a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim());
-                        $img.attr('alt', imgAlt);
-                    } 
-                    else if (linkText !== "") {
-                        if (fileExt !== "" || hasBadSymbol || currentTitle === "" || currentTitle.includes('/uploads/')) {
-                            if (fileExt !== "") {
-                                $a.attr('title', linkText + " ." + fileExt + " " + windowTask);
-                            } else {
-                                $a.attr('title', windowTask);
-                            }
+                        $span.css({
+                            'display': 'inline-block',
+                            'position': 'absolute',
+                            'width': '1px',
+                            'height': '1px',
+                            'padding': '0',
+                            'margin': '-1px',
+                            'overflow': 'hidden',
+                            'clip': 'rect(0, 0, 0, 0)',
+                            'white-space': 'nowrap',
+                            'border': '0'
+                        });
+                    });
+                }
+            }
+
+            // E. 重新計算標題 (關鍵邏輯：若 hasOriginalTitle 為真，則不進入此區塊)
+            if (!hasOriginalTitle) {
+                if (linkText === "" && $img.length > 0) {
+                    var rawAlt = ($img.attr('alt') || '').trim();
+                    var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', ''];
+                    var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; }) 
+                                    ? ($a.attr('aria-label') || i18n.link) : rawAlt;
+                    
+                    var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : '';
+                    $a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim());
+                    $img.attr('alt', imgAlt);
+                } 
+                else if (linkText !== "") {
+                    if (fileExt !== "" || hasBadSymbol || currentTitle === "" || currentTitle.includes('/uploads/')) {
+                        if (fileExt !== "") {
+                            $a.attr('title', linkText + " ." + fileExt + " " + windowTask);
+                        } else {
+                            $a.attr('title', windowTask);
                         }
                     }
                 }
+            }
 
-                // ✅ 符合 HM1240404E：title 不應與連結文字重複
-                if (hasOriginalTitle && currentTitle !== "") {
-                    var titleWithoutWindow = currentTitle
-                        .replace('(在本視窗開啟)', '')
-                        .replace('(在新視窗開啟)', '')
-                        .replace('Open in this window', '')
-                        .replace('Open in new window', '')
-                        .replace('另開新視窗前往', '')  
-                        .replace('另開新視窗', '')
-                        .trim();
+            // ✅ 符合 HM1240404E：title 不應與連結文字或圖片 alt 重複
+            if (hasOriginalTitle && currentTitle !== "") {
+                var titleWithoutWindow = currentTitle
+                    .replace('(在本視窗開啟)', '')
+                    .replace('(在新視窗開啟)', '')
+                    .replace('Open in this window', '')
+                    .replace('Open in new window', '')
+                    .replace('另開新視窗前往', '')  
+                    .replace('另開新視窗', '')
+                    .trim();
 
-                    if (titleWithoutWindow === linkText) {
-                        $a.attr('title', windowTask);
-                    }
-
-                    // ✅ 最終清理：若 title 出現空括號 () 則移除並補上正確開窗提示
-                    var finalTitle = ($a.attr('title') || '').trim();
-                    if (finalTitle.includes('()')) {
-                        finalTitle = finalTitle.replace(/\(\)/g, '').trim();
-                        $a.attr('title', finalTitle + ' ' + windowTask);
-                    }
+                // ✅ title 去掉開窗字串後，若與連結文字或圖片原始 alt 相同，則只保留開窗提示
+                if (
+                    (titleWithoutWindow === linkText && linkText !== i18n.link) ||
+                    (imgAltOriginal !== '' && titleWithoutWindow === imgAltOriginal)
+                ) {
+                    $a.attr('title', windowTask);
                 }
 
-                // F. 最終清理：移除冗餘 label，避免螢幕閱讀器唸兩次
-                $a.removeAttr('aria-label');
-            });
-
-            // ✅ G. 補強特定連結（須在迴圈外，因為 javascript: 連結被迴圈跳過）
-            $('.btn-o a').each(function() {
-                var $a = $(this);
-                if (!$a.attr('target')) {
-                    $a.attr('target', '_blank');
-                    $a.attr('rel', 'noopener noreferrer');
+                // ✅ 最終清理：若 title 出現空括號 () 則移除並補上正確開窗提示
+                var finalTitle = ($a.attr('title') || '').trim();
+                if (finalTitle.includes('()')) {
+                    finalTitle = finalTitle.replace(/\(\)/g, '').trim();
+                    $a.attr('title', finalTitle + ' ' + windowTask);
                 }
-                $a.attr('title', isEn ? 'Share to X Open in new window' : '分享至 X 在新視窗開啟');
-            });
+            }
 
-            $('.print-button a').each(function() {
-                var $a = $(this);
-                if (!$a.attr('title') || $a.attr('title').trim().toLowerCase() === 'print') {
-                    $a.attr('title', isEn ? 'Print this page' : '列印此頁');
-                }
-            });
+            // F. 最終清理：移除冗餘 label，避免螢幕閱讀器唸兩次
+            $a.removeAttr('aria-label');
+        });
+
+        // ✅ G. 補強特定連結（須在迴圈外，因為 javascript: 連結被迴圈跳過）
+        $('.btn-o a').each(function() {
+            var $a = $(this);
+            if (!$a.attr('target')) {
+                $a.attr('target', '_blank');
+                $a.attr('rel', 'noopener noreferrer');
+            }
+            $a.attr('title', isEn ? 'Share to X Open in new window' : '分享至 X 在新視窗開啟');
+        });
+
+        $('.print-button a').each(function() {
+            var $a = $(this);
+            if (!$a.attr('title') || $a.attr('title').trim().toLowerCase() === 'print') {
+                $a.attr('title', isEn ? 'Print this page' : '列印此頁');
+            }
+        });
+
+        $('a.i-archive__file-name').each(function () {
+            var $a = $(this);
+            var isNewWindow = ($a.attr('target') === '_blank');
+            $a.attr('title', isNewWindow ? i18n.newWin : i18n.selfWin);
+        });
+    }
+
+    // ✅ 延遲 800ms 確保所有其他 function 執行完畢後才處理
+    setTimeout(function() {
+        fixAccessibilityAll();
+    }, 800);
+});
+    //圖示新增sr-only
+$(function() {
+  function smartFixIcons() {
+    var isEn = $('html').attr('lang') === 'en';
+
+    var labels = {
+      calendar    : isEn ? 'Date: '              : '日期：',
+      user        : isEn ? 'Author: '            : '發布者：',
+      tag         : isEn ? 'Tag: '               : '標籤：',
+      clock       : isEn ? 'Time: '              : '時間：',
+      location    : isEn ? 'Location: '          : '地點：',
+      phone       : isEn ? 'Phone: '             : '電話：',
+      envelope    : isEn ? 'Email: '             : '信箱：',
+      folder      : isEn ? 'Category: '          : '分類：',
+      eye         : isEn ? 'Views: '             : '瀏覽次數：',
+      download    : isEn ? 'Download: '          : '下載檔案：',
+      search      : isEn ? 'Search'              : '搜尋',
+      bars        : isEn ? 'Menu'                : '選單',
+      print       : isEn ? 'Print this page'     : '列印此頁',
+      share       : isEn ? 'Share'               : '分享至社群',
+      close       : isEn ? 'Close window'        : '關閉視窗',
+      closePopup  : isEn ? 'Close announcement'  : '關閉公告視窗',
+      closeGallery: isEn ? 'Close gallery'       : '關閉相簿',
+      toggleDesc  : isEn ? 'Show or hide image description' : '顯示或隱藏圖片說明',
+      themeSwitch : isEn ? 'Switch gallery theme': '切換相簿主題',
+      showOriginal: isEn ? 'Show original image' : '顯示原始圖片'
+    };
+
+    $('i').each(function() {
+      var $icon   = $(this);
+      var $parent = $icon.parent();
+
+      // 1. 所有圖示先對螢幕閱讀器隱藏
+      $icon.attr('aria-hidden', 'true');
+
+      // 特判：.close-screen-btn 內的圖示，移除無關的 sr-only 並設正確 aria-label
+      if ($parent.hasClass('close-screen-btn')) {
+        $parent.find('.sr-only').remove();
+        $parent.attr('aria-label', labels.closePopup);
+        if ($icon.next('.sr-only').length === 0) {
+          $icon.after('<span class="sr-only">' + labels.closePopup + '</span>');
         }
-
-        // ✅ 延遲 800ms 確保所有其他 function 執行完畢後才處理
-        setTimeout(function() {
-            fixAccessibilityAll();
-        }, 800);
-    });
-        //圖示新增sr-only
-    $(function() {
-      function smartFixIcons() {
-          $('i').each(function() {
-              var $icon = $(this);
-              var $parent = $icon.parent();
-
-              // 1. 基本安全：所有圖示先對螢幕閱讀器隱藏 (避免讀出 Unicode 亂碼)
-              $icon.attr('aria-hidden', 'true');
-
-              // 2. 檢查：如果已經有 aria-label 或旁邊已有 sr-only，就不重複處理
-              if ($icon.attr('aria-label') || $icon.next('.sr-only').length > 0 || $parent.find('.sr-only').length > 0) {
-                  return;
-              }
-
-              var cls = ($icon.attr('class') || '').toLowerCase();
-              var labelText = '';
-
-              // --- 策略 A：常見資訊型圖示 (自動識別內容意義) ---
-              if (cls.includes('calendar')) labelText = '日期：';
-              else if (cls.includes('user') || cls.includes('male')) labelText = '發布者：';
-              else if (cls.includes('tag')) labelText = '標籤：';
-              else if (cls.includes('clock') || cls.includes('time')) labelText = '時間：';
-              else if (cls.includes('map-marker') || cls.includes('location')) labelText = '地點：';
-              else if (cls.includes('phone')) labelText = '電話：';
-              else if (cls.includes('envelope') || cls.includes('mail')) labelText = '信箱：';
-              else if (cls.includes('folder')) labelText = '分類：';
-              else if (cls.includes('eye')) labelText = '瀏覽次數：';
-              else if (cls.includes('download')) labelText = '下載檔案：';
-              
-              // --- 策略 B：功能性按鈕 (如果 i 放在 <a> 或 <button> 裡面且容器沒文字) ---
-              var $container = $icon.closest('a, button');
-              if ($container.length > 0 && $container.text().trim() === "") {
-                  // 如果容器裡面什麼字都沒有，這是一個「純圖示按鈕」
-                  // 我們嘗試抓取容器的 title 作為 label
-                  var btnTitle = $container.attr('title');
-                  if (btnTitle) {
-                      labelText = btnTitle;
-                  } else if (cls.includes('search')) labelText = '搜尋';
-                  else if (cls.includes('bars') || cls.includes('navicon')) labelText = '選單';
-                  else if (cls.includes('print')) labelText = '列印此頁';
-                  else if (cls.includes('share')) labelText = '分享至社群';
-                  else if (cls.includes('close') || cls.includes('times')) labelText = '關閉視窗';
-              }
-
-              // --- 3. 執行補強 ---
-              if (labelText !== '') {
-                  // 如果是按鈕內部，用 aria-label 補強容器
-                  if ($container.length > 0 && $container.text().trim() === "") {
-                      $container.attr('aria-label', labelText);
-                  } else {
-                      // 如果是資訊列表，在 i 後面插入 sr-only
-                      $icon.after('<span class="sr-only">' + labelText + '</span>');
-                  }
-              }
-          });
+        return;
       }
 
-      // 延遲執行確保內容渲染完成
-      setTimeout(smartFixIcons, 500);
+      // 特判：.gallery-close 內的圖示，移除錯誤的 sr-only 並補正確說明
+      if ($parent.closest('.gallery-close').length > 0) {
+        $parent.closest('.gallery-close').find('.sr-only').remove();
+        $parent.closest('.gallery-close').attr('aria-label', labels.closeGallery);
+        $parent.closest('.gallery-close').attr('role', 'button');
+        $parent.closest('.gallery-close').attr('tabindex', '0');
+        if ($icon.next('.sr-only').length === 0) {
+          $icon.after('<span class="sr-only">' + labels.closeGallery + '</span>');
+        }
+        return;
+      }
+
+      // 特判：.gallery-toggle-desc 補說明
+      if ($parent.closest('.gallery-toggle-desc').length > 0) {
+        var $toggleBtn = $parent.closest('.gallery-toggle-desc');
+        if (!$toggleBtn.attr('aria-label')) {
+          $toggleBtn.attr('aria-label', labels.toggleDesc);
+          $toggleBtn.attr('role', 'button');
+          $toggleBtn.attr('tabindex', '0');
+        }
+        if ($icon.next('.sr-only').length === 0) {
+          $icon.after('<span class="sr-only">' + labels.toggleDesc + '</span>');
+        }
+        return;
+      }
+
+      // 特判：.gallery-theme-switch 補說明
+      if ($parent.closest('.gallery-theme-switch').length > 0) {
+        var $themeBtn = $parent.closest('.gallery-theme-switch');
+        if (!$themeBtn.attr('aria-label')) {
+          $themeBtn.attr('aria-label', labels.themeSwitch);
+          $themeBtn.attr('role', 'button');
+          $themeBtn.attr('tabindex', '0');
+        }
+        if ($icon.next('.sr-only').length === 0) {
+          $icon.after('<span class="sr-only">' + labels.themeSwitch + '</span>');
+        }
+        return;
+      }
+
+      // 2. 已有 aria-label 或 sr-only 就不重複處理
+      if ($icon.attr('aria-label') || $icon.next('.sr-only').length > 0 || $parent.find('.sr-only').length > 0) {
+        return;
+      }
+
+      var cls = ($icon.attr('class') || '').toLowerCase();
+      var labelText = '';
+
+      // --- 策略 A：常見資訊型圖示 ---
+      if      (cls.includes('calendar'))                               labelText = labels.calendar;
+      else if (cls.includes('user') || cls.includes('male'))           labelText = labels.user;
+      else if (cls.includes('tag'))                                    labelText = labels.tag;
+      else if (cls.includes('clock') || cls.includes('time'))          labelText = labels.clock;
+      else if (cls.includes('map-marker') || cls.includes('location')) labelText = labels.location;
+      else if (cls.includes('phone'))                                  labelText = labels.phone;
+      else if (cls.includes('envelope') || cls.includes('mail'))       labelText = labels.envelope;
+      else if (cls.includes('folder'))                                 labelText = labels.folder;
+      else if (cls.includes('eye'))                                    labelText = labels.eye;
+      else if (cls.includes('download'))                               labelText = labels.download;
+
+      // --- 策略 B：功能性按鈕 ---
+      var $container = $icon.closest('a, button');
+      if ($container.length > 0 && $container.text().trim() === '') {
+        var btnTitle = $container.attr('title');
+        if      (btnTitle)                                             labelText = btnTitle;
+        else if (cls.includes('search'))                               labelText = labels.search;
+        else if (cls.includes('bars') || cls.includes('navicon'))      labelText = labels.bars;
+        else if (cls.includes('print'))                                labelText = labels.print;
+        else if (cls.includes('share'))                                labelText = labels.share;
+        else if (cls.includes('close') || cls.includes('times'))       labelText = labels.close;
+        else if (cls.includes('image') || cls.includes('photo'))       labelText = labels.showOriginal;
+      }
+
+      // --- 3. 執行補強 ---
+      if (labelText !== '') {
+        $icon.after('<span class="sr-only">' + labelText + '</span>');
+      }
     });
+  }
+
+  setTimeout(smartFixIcons, 500);
+});
     // 刪除banner-slide的空連結和空連結目標
     for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
       if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
@@ -1469,92 +1591,6 @@
           resizeTimer = setTimeout(fixAccessKeyM, 150);
         });
       });
-      //公告頁籤無障礙
-      $(function() {
-          function fixTabLinearOrder() {
-              //  只處理內部含有 .tab_nav 的 .w-annc
-              var $targetAnnc = $('.w-annc').filter(function() {
-                  return $(this).find('.tab_nav').length > 0;
-              });
-
-              // 若頁面上沒有符合條件的 .w-annc，直接離開
-              if ($targetAnnc.length === 0) return;
-
-              var $tabs = $targetAnnc.find('.filter_tab');
-              var $anncList = $targetAnnc.find('.w-annc__list');
-
-              // --- 1. 順向遊走：標籤 -> 對應內容 ---
-              $tabs.on('keydown', function(e) {
-                  if (e.which === 9 && !e.shiftKey) {
-                      var category = $(this).data('category');
-                      var $scope = $(this).closest('.w-annc'); //  限定在同一個 .w-annc
-                      var $visibleItems = $scope.find('.w-annc__item[data-category="' + category + '"]:visible');
-
-                      if ($visibleItems.length > 0) {
-                          var $firstLink = $visibleItems.find('a').first();
-                          if ($firstLink.length > 0) {
-                              e.preventDefault();
-                              $firstLink.focus();
-                          }
-                      }
-                  }
-                  if (e.which === 13 || e.which === 32) {
-                      e.preventDefault();
-                      $(this).click();
-                  }
-              });
-
-              // --- 2. 反向遊走：內容 -> 對應標籤 ---
-              $anncList.on('keydown', '.w-annc__item a', function(e) {
-                  var $currentLink = $(this);
-                  var $currentItem = $currentLink.closest('.w-annc__item');
-                  var $scope = $currentLink.closest('.w-annc'); //  限定在同一個 .w-annc
-                  var category = $currentItem.data('category');
-                  var $visibleItems = $scope.find('.w-annc__item[data-category="' + category + '"]:visible');
-
-                  if (e.which === 9 && e.shiftKey) {
-                      if ($currentLink.is($visibleItems.find('a').first())) {
-                          e.preventDefault();
-                          $scope.find('.filter_tab[data-category="' + category + '"]').focus();
-                      }
-                  }
-
-                  if (e.which === 9 && !e.shiftKey) {
-                      if ($currentLink.is($visibleItems.find('a').last())) {
-                          var $currentTab = $scope.find('.filter_tab[data-category="' + category + '"]');
-                          var $nextTab = $currentTab.next('.filter_tab');
-                          if ($nextTab.length > 0) {
-                              e.preventDefault();
-                              $nextTab.focus();
-                              $nextTab.click();
-                          }
-                      }
-                  }
-              });
-
-              // --- 3. 反向遊走：標籤 -> 上一個標籤的內容最後一個連結 ---
-              $tabs.on('keydown', function(e) {
-                  if (e.which === 9 && e.shiftKey) {
-                      var $scope = $(this).closest('.w-annc'); //  限定在同一個 .w-annc
-                      var $prevTab = $(this).prev('.filter_tab');
-                      if ($prevTab.length > 0) {
-                          var prevCategory = $prevTab.data('category');
-                          $prevTab.click();
-
-                          var $prevItems = $scope.find('.w-annc__item[data-category="' + prevCategory + '"]:visible');
-                          var $lastLink = $prevItems.find('a').last();
-
-                          if ($lastLink.length > 0) {
-                              e.preventDefault();
-                              $lastLink.focus();
-                          }
-                      }
-                  }
-              });
-          }
-
-          fixTabLinearOrder();
-      });
       //導覽選單子選單無障礙狀態修正 (支援多層級)
       function fixNavMenuA11y() {
           const $navItems = $('#main-nav li');
@@ -1620,87 +1656,219 @@
           // 延遲執行，確保動態產生的選單也能被補強
           setTimeout(fixEmptyHref, 500);
       });
+      //公告頁籤無障礙
+      $(function() {
+          function fixTabLinearOrder() {
+              var $targetAnnc = $('.w-annc').filter(function() {
+                  return $(this).find('.tab_nav').length > 0;
+              });
+
+              if ($targetAnnc.length === 0) return;
+
+              var $tabs = $targetAnnc.find('.filter_tab');
+              var $anncList = $targetAnnc.find('.w-annc__list');
+
+              // 智慧判斷：偵測 filter_tab 用哪個屬性來分類
+              // 優先用 data-tags（若有值），否則用 data-category
+              function getTabKey($tab) {
+                  var tags = $tab.data('tags');
+                  if (tags && tags !== '') return { attr: 'data-tags', value: tags };
+                  var category = $tab.data('category');
+                  if (category && category !== '') return { attr: 'data-category', value: category };
+                  return null;
+              }
+
+              // 根據 key 找對應的可見 w-annc__item
+              function getVisibleItems($scope, key) {
+                  if (!key) return $();
+                  return $scope.find('.w-annc__item[' + key.attr + '="' + key.value + '"]:visible');
+              }
+
+              // 根據 w-annc__item 反查對應的 filter_tab
+              function getTabFromItem($item, $scope) {
+                  var tags = $item.data('tags');
+                  if (tags && tags !== '') {
+                      var $tab = $scope.find('.filter_tab[data-tags="' + tags + '"]');
+                      if ($tab.length) return $tab;
+                  }
+                  var category = $item.data('category');
+                  if (category && category !== '') {
+                      var $tab = $scope.find('.filter_tab[data-category="' + category + '"]');
+                      if ($tab.length) return $tab;
+                  }
+                  return $();
+              }
+
+              $tabs.on('keydown', function(e) {
+                  var $scope = $(this).closest('.w-annc');
+                  var key = getTabKey($(this));
+
+                  // 順向 Tab：頁籤 -> 對應內容第一個連結
+                  if (e.which === 9 && !e.shiftKey) {
+                      var $visibleItems = getVisibleItems($scope, key);
+                      if ($visibleItems.length > 0) {
+                          var $firstLink = $visibleItems.find('a').first();
+                          if ($firstLink.length > 0) {
+                              e.preventDefault();
+                              $firstLink.focus();
+                          }
+                      }
+                  }
+
+                  // 反向 Shift+Tab：頁籤 -> 上一個頁籤的內容最後一個連結
+                  if (e.which === 9 && e.shiftKey) {
+                      var $prevTab = $(this).prev('.filter_tab');
+                      if ($prevTab.length > 0) {
+                          var prevKey = getTabKey($prevTab);
+                          $prevTab.click();
+
+                          var $prevItems = getVisibleItems($scope, prevKey);
+                          var $lastLink = $prevItems.find('a').last();
+
+                          if ($lastLink.length > 0) {
+                              e.preventDefault();
+                              $lastLink.focus();
+                          }
+                      }
+                  }
+
+                  // Enter / Space：切換頁籤並移焦點到內容第一個連結
+                  if (e.which === 13 || e.which === 32) {
+                      e.preventDefault();
+                      $(this).click();
+
+                      var $visibleItems = getVisibleItems($scope, key);
+                      var $firstLink = $visibleItems.find('a').first();
+                      if ($firstLink.length > 0) {
+                          setTimeout(function() { $firstLink.focus(); }, 50);
+                      }
+                  }
+              });
+
+              // 反向遊走：內容 -> 對應標籤；Tab 到最後一個連結跳下一個頁籤
+              $anncList.on('keydown', '.w-annc__item a', function(e) {
+                  var $currentLink = $(this);
+                  var $currentItem = $currentLink.closest('.w-annc__item');
+                  var $scope = $currentLink.closest('.w-annc');
+
+                  // 找出當前 item 對應的 filter_tab
+                  var $currentTab = getTabFromItem($currentItem, $scope);
+                  if (!$currentTab.length) return;
+
+                  // 找出同類別的所有可見 item
+                  var key = getTabKey($currentTab);
+                  var $visibleItems = getVisibleItems($scope, key);
+
+                  // Shift+Tab：若是第一個連結，跳回對應頁籤
+                  if (e.which === 9 && e.shiftKey) {
+                      if ($currentLink.is($visibleItems.find('a').first())) {
+                          e.preventDefault();
+                          $currentTab.focus();
+                      }
+                  }
+
+                  // Tab：若是最後一個連結，跳到下一個頁籤並切換
+                  if (e.which === 9 && !e.shiftKey) {
+                      if ($currentLink.is($visibleItems.find('a').last())) {
+                          var $nextTab = $currentTab.next('.filter_tab');
+                          if ($nextTab.length > 0) {
+                              e.preventDefault();
+                              $nextTab.focus();
+                              $nextTab.click();
+                          }
+                      }
+                  }
+              });
+          }
+
+          setTimeout(fixTabLinearOrder, 500);
+      });
+
       //頁籤無障礙
       $(function () {
-        function fixTabAccessibility() {
-          var $tabNav = $('.tab_nav');
-          var $tabs = $tabNav.find('li'); // ✅ 你的 HTML 是 li，不是 .filter_tab
+          function fixTabAccessibility() {
 
-          // --- 1. 初始化結構語意 ---
-          $tabNav.attr('role', 'tablist');
+              // 各自獨立處理每組 .tab_nav，避免多組時跨區塊操作問題
+              $('.tab_nav').each(function() {
+                  var $tabNav = $(this);
+                  var $tabs = $tabNav.find('li');
 
-          $tabs.each(function () {
-            var $this = $(this);
-            var isActive = $this.hasClass('active');
+                  // --- 1. 初始化結構語意 ---
+                  $tabNav.attr('role', 'tablist');
 
-            $this.attr({
-              'role': 'tab',
-              'aria-selected': isActive ? 'true' : 'false',
-              'tabindex': isActive ? '0' : '-1' // ✅ 只有 active 的可以被 Tab 聚焦
-            });
+                  $tabs.each(function () {
+                      var $this = $(this);
+                      var isActive = $this.hasClass('active');
 
-            var tabName = $this.text().trim();
-            $this.attr('title', '切換至 ' + tabName);
-          });
+                      $this.attr({
+                          'role': 'tab',
+                          'aria-selected': isActive ? 'true' : 'false',
+                          'tabindex': isActive ? '0' : '-1'
+                      });
 
-          // --- 2. 點擊事件：更新 aria-selected 與 tabindex ---
-          $tabs.on('click', function () {
-            var $clickedTab = $(this);
+                      var tabName = $this.text().trim();
+                      $this.attr('title', '切換至 ' + tabName);
+                  });
 
-            $tabs.attr('aria-selected', 'false').attr('tabindex', '-1');
-            $clickedTab.attr('aria-selected', 'true').attr('tabindex', '0');
-          });
+                  // --- 2. 點擊事件：更新 aria-selected 與 tabindex ---
+                  $tabs.on('click', function () {
+                      var $clickedTab = $(this);
 
-          // --- 3. 鍵盤操作補強 ---
-          $tabs.on('keydown', function (e) {
-            var $current = $(this);
-            var currentIndex = $tabs.index($current);
-            var lastIndex = $tabs.length - 1;
-            var $target = null;
+                      $tabs.attr('aria-selected', 'false').attr('tabindex', '-1');
+                      $clickedTab.attr('aria-selected', 'true').attr('tabindex', '0');
+                  });
 
-            switch (e.which) {
-              case 13: // Enter
-              case 32: // Space
-                e.preventDefault();
-                $current.trigger('click');
-                break;
+                  // --- 3. 鍵盤操作補強 ---
+                  $tabs.on('keydown', function (e) {
+                      var $current = $(this);
+                      var currentIndex = $tabs.index($current);
+                      var lastIndex = $tabs.length - 1;
+                      var $target = null;
 
-              case 37: // ← 左方向鍵：移到前一個頁籤
-              case 38: // ↑ 上方向鍵
-                e.preventDefault();
-                $target = currentIndex > 0
-                  ? $tabs.eq(currentIndex - 1)
-                  : $tabs.eq(lastIndex); // 到底了就循環到最後一個
-                break;
+                      switch (e.which) {
+                          case 13: // Enter
+                          case 32: // Space
+                              e.preventDefault();
+                              $current.trigger('click');
+                              break;
 
-              case 39: // → 右方向鍵：移到下一個頁籤
-              case 40: // ↓ 下方向鍵
-                e.preventDefault();
-                $target = currentIndex < lastIndex
-                  ? $tabs.eq(currentIndex + 1)
-                  : $tabs.eq(0); // 到底了就循環到第一個
-                break;
+                          case 37: // ← 左方向鍵：移到前一個頁籤
+                          case 38: // ↑ 上方向鍵
+                              e.preventDefault();
+                              $target = currentIndex > 0
+                                  ? $tabs.eq(currentIndex - 1)
+                                  : $tabs.eq(lastIndex);
+                              break;
 
-              case 36: // Home：跳到第一個頁籤
-                e.preventDefault();
-                $target = $tabs.eq(0);
-                break;
+                          case 39: // → 右方向鍵：移到下一個頁籤
+                          case 40: // ↓ 下方向鍵
+                              e.preventDefault();
+                              $target = currentIndex < lastIndex
+                                  ? $tabs.eq(currentIndex + 1)
+                                  : $tabs.eq(0);
+                              break;
 
-              case 35: // End：跳到最後一個頁籤
-                e.preventDefault();
-                $target = $tabs.eq(lastIndex);
-                break;
-            }
+                          case 36: // Home：跳到第一個頁籤
+                              e.preventDefault();
+                              $target = $tabs.eq(0);
+                              break;
 
-            // 移動焦點並觸發點擊切換
-            if ($target && $target.length) {
-              $tabs.attr('tabindex', '-1');
-              $target.attr('tabindex', '0').focus().trigger('click');
-            }
-          });
-        }
+                          case 35: // End：跳到最後一個頁籤
+                              e.preventDefault();
+                              $target = $tabs.eq(lastIndex);
+                              break;
+                      }
 
-        setTimeout(fixTabAccessibility, 500);
+                      // 移動焦點並觸發點擊切換
+                      if ($target && $target.length) {
+                          $tabs.attr('tabindex', '-1');
+                          $target.attr('tabindex', '0').focus().trigger('click');
+                      }
+                  });
+              });
+          }
+
+          setTimeout(fixTabAccessibility, 500);
       });
       //移除 accesskey="W" 之後的 | 符號
       $(function() {
@@ -2056,6 +2224,16 @@
       // if($('.show-announcement').hasClass('show-announcement')) {
       //   $('.').css('', '');
       // }
+      $(function() {
+        var $headerNav = $('.header-nav');
+        $headerNav.contents().each(function() {
+          if (this.nodeType === 3 && this.nodeValue.trim() === '|') {
+            $(this).remove();
+          }
+        });
+      });
+      $('.status-top').html('<i class="fa-solid fa-thumbtack"></i>');
+      $('.status-hot').html('<i class="fa-solid fa-fire"></i>');
       if ($('.index-publications-4, .index-publications-3').length > 0) {
       // 針對 .contentwrap3 加上背景顏色
       $('.contentwrap3').css('background-color', '#ffd54f');
@@ -2236,7 +2414,6 @@
       });
       $(window).resize(function() {
         if ($(window).width() <769) {
-
           $('.modules-menu-level-0').after($('.header-nav'));
         }else{
           $('.navbar-header').before($('.header-nav'));
@@ -2770,74 +2947,279 @@ $(document).ready(function () {
 //   $('a[href="/zh_tw/sitemap"]').html('<i class="fa-solid fa-sitemap"></i>');
 //   $('a[href="/en/sitemap"]').html('<i class="fa-solid fa-sitemap"></i>')
 // });
-//cycle2無障礙
-$(document).ready(function() {
-  var $allSlideshows = $('.cycle-slideshow');
+//#tdstylesp表格樣式
+$(function () {
+  $('#tdstylesp').each(function () {
+    var $table = $(this);
+    var headers = [];
 
-  function refreshCycleA11y($el) {
-    var $items = $el.find('.w-annc__item');
-
-    $items.each(function() {
-      var $slide = $(this);
-
-      if ($slide.hasClass('cycle-slide-active')) {
-        $slide.attr({
-          'aria-hidden': 'false',
-          'tabindex': '0'
-        });
-        $slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
-      } else {
-        $slide.attr({
-          'aria-hidden': 'true',
-          'tabindex': '-1'
-        });
-        $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
-      }
+    // 收集 thead 的標題文字
+    $table.find('thead th').each(function () {
+      // 只取 .universal-th-text 的文字，沒有就取全部文字
+      var $thText = $(this).find('.universal-th-text');
+      var label = $thText.length > 0
+        ? $thText.text().trim()
+        : $(this).text().trim();
+      headers.push(label);
     });
 
-    var $container = $el.closest('.w-annc');
-    var $prevBtn = $container.find('.btn-left');
-
-    $el.find('.cycle-slide-active a, .cycle-slide-active button').first()
-       .off('keydown.a11y').on('keydown.a11y', function(e) {
-        if (e.keyCode === 9 && e.shiftKey) {
-          if ($prevBtn.length) {
-            e.preventDefault();
-            $prevBtn.focus();
-          }
+    // 把標題塞進每個 tbody td 的 data-label
+    $table.find('tbody tr').each(function () {
+      $(this).find('td').each(function (i) {
+        if (headers[i]) {
+          $(this).attr('data-label', headers[i]);
         }
       });
-  }
+    });
+  });
+});
+//cycle2無障礙
+$(document).ready(function() {
+    // 取得頁面上所有的 Cycle2 輪播圖
+    var $allSlideshows = $('.cycle-slideshow');
 
-  $(document).on('keydown', '.btn-right, .btn-left', function(e) {
-    if (e.keyCode === 13) {
-      var $btn = $(this);
-      var $el = $btn.closest('.w-annc').find('.cycle-slideshow');
+    /**
+     * 核心無障礙狀態刷新函式
+     */
+    function refreshCycleA11y($el) {
+      var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"]');
 
-      $el.one('cycle-after', function() {
-        //  延長等待時間，確保 Cycle2 已將所有可見項目加上 cycle-slide-active
-        setTimeout(function() {
-          refreshCycleA11y($el);
-          $btn.focus();
-        }, 300);
+      $items.each(function() {
+        var $slide = $(this);
+        var isActive = $slide.hasClass('cycle-slide-active');
+
+        if (isActive) {
+          // ✅ li 只設 aria-hidden，不加 tabindex
+          $slide.attr('aria-hidden', 'false');
+          $slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex
+          $slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
+        } else {
+          // 隱藏中的投影片：徹底隔離
+          $slide.attr('aria-hidden', 'true');
+          $slide.removeAttr('tabindex');
+          $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
+        }
       });
+
+      // --- 防鎖死邊界處理 (Shift + Tab) ---
+      var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link');
+      var $prevBtn = $container.find('.btn-left, .prev-button');
+
+      $el.find('.cycle-slide-active a, .cycle-slide-active button').first()
+        .off('keydown.a11y').on('keydown.a11y', function(e) {
+            if (e.keyCode === 9 && e.shiftKey) {
+              if ($prevBtn.length) {
+                e.preventDefault();
+                $prevBtn.focus();
+              }
+            }
+          });
+    }
+
+    /**
+     * 針對 widget-link 非語意化標籤 (如 i 標籤當按鈕) 的無障礙補強
+     */
+    function refreshCycleA11y($el) {
+      var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"]');
+
+      $items.each(function() {
+        var $slide = $(this);
+        var isActive = $slide.hasClass('cycle-slide-active');
+
+        if (isActive) {
+          // ✅ li 只設 aria-hidden，不加 tabindex
+          $slide.attr('aria-hidden', 'false');
+          $slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex
+          $slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
+        } else {
+          // 隱藏中的投影片：徹底隔離
+          $slide.attr('aria-hidden', 'true');
+          $slide.removeAttr('tabindex');
+          $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
+        }
+      });
+
+      // --- 防鎖死邊界處理 (Shift + Tab) ---
+      var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link');
+      var $prevBtn = $container.find('.btn-left, .prev-button');
+
+      $el.find('.cycle-slide-active a, .cycle-slide-active button').first()
+        .off('keydown.a11y').on('keydown.a11y', function(e) {
+            if (e.keyCode === 9 && e.shiftKey) {
+              if ($prevBtn.length) {
+                e.preventDefault();
+                $prevBtn.focus();
+              }
+            }
+          });
+    }
+
+    // 輔助函式：切換後更新 A11y 狀態並鎖定焦點
+    function triggerPostUpdate($el, $activeBtn) {
+        $el.one('cycle-after', function() {
+            setTimeout(function() {
+                refreshCycleA11y($el);
+                $activeBtn.focus();
+            }, 300);
+        });
+    }
+
+    /**
+     * 舊有按鈕事件相容與整合
+     */
+    $(document).on('keydown', '.btn-right, .btn-left', function(e) {
+        if (e.keyCode === 13) {
+            var $btn = $(this);
+            var $el = $btn.closest('.w-annc').find('.cycle-slideshow');
+            triggerPostUpdate($el, $btn);
+        }
+    });
+
+    /**
+     * 綁定 Cycle2 核心事件
+     */
+    $allSlideshows.on('cycle-initialized cycle-after', function() {
+        var $this = $(this);
+        setTimeout(function() {
+            refreshCycleA11y($this);
+        }, 300);
+    });
+
+    // 初始化執行
+    patchWidgetLinkElements();
+    
+    $allSlideshows.each(function() {
+        var $this = $(this);
+        setTimeout(function() {
+            refreshCycleA11y($this);
+        }, 500);
+    });
+});
+//gallery層級問題
+$(function() {
+  var target = document.getElementById('gallery-theater-stage');
+  if (!target) return;
+
+  var observer = new MutationObserver(function() {
+    var display = target.style.display;
+    if (display === 'block') {
+      $('.verticalhome').css('z-index', '2000');
+    } else if (display === 'none') {
+      $('.verticalhome').css('z-index', 'auto');
     }
   });
 
-  //  cycle-after 事件也延長等待時間
-  $allSlideshows.on('cycle-initialized cycle-after', function() {
-    var $this = $(this);
-    setTimeout(function() {
-      refreshCycleA11y($this);
-    }, 300);
-  });
-
-  $allSlideshows.each(function() {
-    var $this = $(this);
-    setTimeout(function() {
-      refreshCycleA11y($this);
-    }, 500);
+  observer.observe(target, {
+    attributes    : true,
+    attributeFilter: ['style']
   });
 });
+$(document).ready(function() {
+
+  function removeFakeLinks() {
+    $('a.fake_link').remove();
+  }
+
+  // 初始執行一次
+  removeFakeLinks();
+
+  // Shift+Tab 時也執行
+  $(document).on('keydown', function(e) {
+    if (e.key === 'Tab' && e.shiftKey) {
+      removeFakeLinks();
+    }
+  });
+
+  // MutationObserver 監聽 DOM 變化，fake_link 一出現就移除
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      mutation.addedNodes.forEach(function(node) {
+        // 直接是 fake_link
+        if ($(node).is('a.fake_link')) {
+          $(node).remove();
+        }
+        // 或其子元素內含 fake_link
+        if ($(node).find) {
+          $(node).find('a.fake_link').remove();
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+
+});
+//cycle2無障礙
+// $(document).ready(function() {
+//   var $allSlideshows = $('.cycle-slideshow');
+
+//   function refreshCycleA11y($el) {
+//     var $items = $el.find('.w-annc__item');
+
+//     $items.each(function() {
+//       var $slide = $(this);
+
+//       if ($slide.hasClass('cycle-slide-active')) {
+//         $slide.attr({
+//           'aria-hidden': 'false',
+//           'tabindex': '0'
+//         });
+//         $slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
+//       } else {
+//         $slide.attr({
+//           'aria-hidden': 'true',
+//           'tabindex': '-1'
+//         });
+//         $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
+//       }
+//     });
+
+//     var $container = $el.closest('.w-annc');
+//     var $prevBtn = $container.find('.btn-left');
+
+//     $el.find('.cycle-slide-active a, .cycle-slide-active button').first()
+//        .off('keydown.a11y').on('keydown.a11y', function(e) {
+//         if (e.keyCode === 9 && e.shiftKey) {
+//           if ($prevBtn.length) {
+//             e.preventDefault();
+//             $prevBtn.focus();
+//           }
+//         }
+//       });
+//   }
+
+//   $(document).on('keydown', '.btn-right, .btn-left', function(e) {
+//     if (e.keyCode === 13) {
+//       var $btn = $(this);
+//       var $el = $btn.closest('.w-annc').find('.cycle-slideshow');
+
+//       $el.one('cycle-after', function() {
+//         //  延長等待時間，確保 Cycle2 已將所有可見項目加上 cycle-slide-active
+//         setTimeout(function() {
+//           refreshCycleA11y($el);
+//           $btn.focus();
+//         }, 300);
+//       });
+//     }
+//   });
+
+//   //  cycle-after 事件也延長等待時間
+//   $allSlideshows.on('cycle-initialized cycle-after', function() {
+//     var $this = $(this);
+//     setTimeout(function() {
+//       refreshCycleA11y($this);
+//     }, 300);
+//   });
+
+//   $allSlideshows.each(function() {
+//     var $this = $(this);
+//     setTimeout(function() {
+//       refreshCycleA11y($this);
+//     }, 500);
+//   });
+// });
 
 }(jQuery, window));
diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss
index 644fe1d..21ef292 100644
--- a/assets/stylesheets/template/base/_global.scss
+++ b/assets/stylesheets/template/base/_global.scss
@@ -62,11 +62,7 @@ a:focus {
   text-decoration: none;
 }
 
-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+
 
 .admin-edit {
   clear: both;
@@ -171,13 +167,17 @@ a.btn-primary {
     }
   }
 }
-.w-annc,.i-video_data,.w-video_data,.w-ba-banner,.widget-link{
+.w-annc,.i-video_data,.w-video_data,.w-ba-banner,.widget-link,.i-member-pic-wrap,.i-annc__img-wrap{
   img{
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 }
+img {
+    max-width: 100%;
+    height: auto;
+}
 // Take care of exceeding content
 // body[data-module="page_content"],
 // body[data-module="announcement"] {
diff --git a/assets/stylesheets/template/base/_unity.scss b/assets/stylesheets/template/base/_unity.scss
index 7044d72..f534fe9 100644
--- a/assets/stylesheets/template/base/_unity.scss
+++ b/assets/stylesheets/template/base/_unity.scss
@@ -78,18 +78,39 @@
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
 }
-
+.search_widget{
+  font-size: 1em!important;
+}
 .status {
   font-family: $main-font;
   font-size: 0.750em;
 }
 
 .status-top {
-  background-color: $theme-color-main;
+    border-radius: 1em!important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: rotate(45deg);
+    float: left;
+    i{
+    color: #a2a2a2!important;
+    font-size: 1em!important;
+    padding: 0!important;
+    }
 }
 
 .status-hot {
-  background-color: $theme-color-third;
+    border-radius: 1em!important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    i{
+    color: #c60000!important;
+    font-size: 1em!important;
+    padding: 0!important;
+    }
 }
 
 .status-source {
diff --git a/assets/stylesheets/template/layout/bo5.scss b/assets/stylesheets/template/layout/bo5.scss
index f476882..dfaa2ed 100644
--- a/assets/stylesheets/template/layout/bo5.scss
+++ b/assets/stylesheets/template/layout/bo5.scss
@@ -574,10 +574,10 @@ button.close {
     }
 }
 
-.tab-content>.tab-pane {
-    display: none
-}
+// .tab-content>.tab-pane {
+//     display: none
+// }
 
-.tab-content>.active {
-    display: block
-}
\ No newline at end of file
+// .tab-content>.active {
+//     display: block
+// }
\ No newline at end of file
diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss
index 56abc79..58cf670 100644
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@@ -69,7 +69,7 @@
   position: relative;
   width: 100%;
   background: #F8F9FA;
-  padding-bottom: 2em;
+  padding-bottom: 3em;
   padding-top: 2em;
    p{
    padding-bottom: 1em;
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 3164df2..55ef136 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -111,8 +111,8 @@ a[href="/en/sitemap"]{
   padding: 0.5em 0;
 }
 .header-nav {
-  display: flex !important;
-  flex-wrap: wrap;
+  // display: flex !important;
+  // flex-wrap: wrap;
   ul{
     padding: 0;
   }
@@ -148,7 +148,7 @@ a[href="/en/sitemap"]{
     list-style: none;
   }
   a[accesskey]{
-
+   position: relative;
   }
 
   .container {
@@ -200,6 +200,7 @@ a[href="/en/sitemap"]{
 }
   .navbar-header {
     z-index: 10;
+    position: relative;
     padding: 0;
     margin: 0;
         display: flex;
diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss
index 468b527..b28bfdd 100644
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
@@ -45,14 +45,13 @@
   }
 }
 .w-annc__status{
-  margin-right: 0.5em;
   line-height: 1 !important;
 }
 .w-annc__status-wrap{
   display: flex;
 }
 .i-annc__status-wrap{
-  display: flex;
+  float: left;
 }
 .i-annc__th--date{
   min-width: 6em;
@@ -260,9 +259,9 @@
   }
   .w-annc__img-wrap {
     padding: 0;
+    aspect-ratio: 16 / 9;
   }
   .w-annc__content-wrap {
-    padding-top: 1em;
     @media(max-width: $screen-xs){
       padding-right: 0.9375em;
       padding-left: 0.9375em;
@@ -330,7 +329,7 @@
     clear: both;
   }
   .w-annc__img-wrap {
-    height: 14.5em;
+    aspect-ratio: 16 / 9;
     margin:0;
     .w-annc__img{
       width: 100%;
@@ -949,6 +948,7 @@
     margin-bottom: 0.5em;
     border-radius: 20px;
     overflow: hidden;
+    aspect-ratio: 16 / 9;
     .w-annc__img{
       width: 100%;
       position: relative !important;
@@ -2098,18 +2098,19 @@
    margin: 0;
    overflow: hidden;
    border: 2px solid #333;
-   @media(min-width:480px)and(max-width:820px){
-    height: 9.5em;
-   }
-    @media(min-width:821px)and(max-width:1024px){
-    height: 12.5em;
-   }
-   @media(min-width:1025px){
-   height: 15.5em;
-   }
-  @media(max-width:480px){
-   height: 14.5em;
-   }
+   aspect-ratio: 16 / 9;
+  //  @media(min-width:480px)and(max-width:820px){
+  //   height: 9.5em;
+  //  }
+  //   @media(min-width:821px)and(max-width:1024px){
+  //   height: 12.5em;
+  //  }
+  //  @media(min-width:1025px){
+  //  height: 15.5em;
+  //  }
+  // @media(max-width:480px){
+  //  height: 14.5em;
+  //  }
  }
  .w-annc__item{
     padding: 0.5em;
@@ -2160,6 +2161,7 @@
  }
  .w-annc__img-wrap {
    margin: 0 0 0.5rem 0;
+   aspect-ratio: 16 / 9;
  }
 }
 
@@ -2206,12 +2208,9 @@
     height: 2em;
   }
   .w-annc__img-wrap {
-    height: 13.5em;
+    aspect-ratio: 16 / 9;
     margin:0;
     overflow: hidden;
-    @media (max-width: $screen-xs) {
-      height: 13.5em;
-    }
   }
   .w-annc__content-wrap{
     background-color: #fff;
@@ -2712,7 +2711,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   }
   .i-annc__img-wrap {
     overflow: hidden;
-    height: 13.5em;
+    aspect-ratio: 16 / 9;
     margin: 1em 0.5em;
     img {
       @media (max-width:767px) {
@@ -2752,7 +2751,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   }
   .i-annc__img-wrap {
     overflow: hidden;
-    height: 13.5em;
+    aspect-ratio: 16 / 9;
     margin: 0.5em;
     img {
       @media (max-width:767px) {
@@ -3150,11 +3149,19 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
     display: inline-block;
   }
 
-  .s-annc__flie-title {
+  .s-annc__flie-title,.s-annc__link-title {
+    padding-left: 0;
     white-space: nowrap;
     width: 100%;
-    margin-bottom: 0.5em;
     text-align: justify;
+    color: #0077D8;
+    border: 1px solid #0077D8;
+    margin-bottom: 1em;
+    padding: 0.5em;
+    &:hover{
+      background:#f3f3f3;
+    }
+
   }
 
   .s-annc__social > * {
@@ -3206,7 +3213,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   text-align: center;
   background-color: #aab2bd;
   border-radius: 4px;
-  //behavior: url("/assets/ie_support/PIE2/PIE.htc");
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   z-index: 100;
@@ -3227,7 +3233,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   background-color: #4fc1e9;
   border: 4px solid #f5f7fa;
   border-radius: 50%;
-  //behavior: url("/assets/ie_support/PIE2/PIE.htc");
+  
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%
 }
@@ -3249,7 +3255,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   margin-top: 31px;
   background-color: #CCC;
   border-radius: 4px;
-  //behavior: url("/assets/ie_support/PIE2/PIE.htc");
+  
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px
 }
@@ -3304,7 +3310,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 .VivaTimeline dl dd .events .events-footer ol li {
   background: #32b487;
   border-radius: 5px;
-  //behavior: url("/assets/ie_support/PIE2/PIE.htc");
+  
   margin: 10px;
   display: inline-block;
   width: 10px;
@@ -3521,3 +3527,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
     padding: 0;
   }
 }
+.carousel_img_item img {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
\ No newline at end of file
diff --git a/assets/stylesheets/template/modules/member.scss b/assets/stylesheets/template/modules/member.scss
index 2557d4f..2ffebb2 100644
--- a/assets/stylesheets/template/modules/member.scss
+++ b/assets/stylesheets/template/modules/member.scss
@@ -499,6 +499,9 @@
 
   .member-plugins {
     margin: 0;
+    li{
+      list-style: none;
+    }
 
     a {
 
diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss
index 394c2ab..2398433 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -193,7 +193,6 @@
 .modules-menu {
   font-family: $sub-font;
   max-height: none;
-  z-index: 1020;
 
   li {
     padding: 1em;
diff --git a/assets/stylesheets/template/modules/video.scss b/assets/stylesheets/template/modules/video.scss
index 82b92ce..addbdb6 100644
--- a/assets/stylesheets/template/modules/video.scss
+++ b/assets/stylesheets/template/modules/video.scss
@@ -163,7 +163,7 @@
             -o-transition: all .3s ease;
             transition: all .3s ease;
       }
-      .video_linkwrapper2{
+      .video_linkwrapper{
         .video_snapshot{
               -webkit-transform: scale(1.1) !important;
               -ms-transform: scale(1.1) !important;
@@ -232,12 +232,6 @@
       .video_tags2{
         display: block!important;
        }
-      .video_linkwrapper2{
-
-        @media(min-width:$screen-xs)and(max-width:768px){
-          height: 24em;
-        }
-      }
       width: 100% ;
       margin-bottom: 2em;
       @media(max-width:1024px){
@@ -379,23 +373,6 @@
         }
 
       }
-
-
-      .video_linkwrapper2{
-          @media(min-width:1025px){
-            height: 40.6em;
-          }
-          @media(min-width:769px)and(max-width:1024px){
-            height: 32.6em!important;
-          }
-          @media(max-width: 821px)and(min-width: 769px){
-            height: 25.6em!important;
-          }
-          @media(max-width:$screen-xs){
-            height: 14.5em!important;
-          }
-      }
-
     }
 
   }
@@ -804,10 +781,20 @@
   border: 1px solid #6868688f;
 }
 .video_linkwrapper{
+  padding: 0;
+  border-radius: 0.5em;
   position:relative;
-  height: 13.5em;
   overflow:hidden;
   width: 100%;
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+  border-radius: 14px;
+  box-shadow: 0 4px 18px rgba(127, 119, 221, 0.13);
+  border: 1px solid #ede9fe;
+  aspect-ratio: 16 / 9;
+  &:hover{
+    transform: translateY(-6px);
+    box-shadow: 0 12px 32px rgba(127, 119, 221, 0.28);
+  }
   img{
     width: 100%;
   }
@@ -834,102 +821,8 @@
   }
   }
 }
-.video_linkwrapper10{
-  position: relative;
-  overflow: hidden;
-  height: 9.5em;
-  @media(max-width: 1025px)and(min-width: 821px){
-      height:7.5em;
-  }
-  @media(max-width: 821px)and(min-width: 769px){
-      height:13em;
-  }
-  @media(max-width:768px)and(min-width: 600px){
-    height: 13.5em;
-  }
-  @media(max-width: $screen-xs){
-      height:13em;
-  }
-}
 .video_linkwrapper{
-  @media(max-width: 1025px)and(min-width: 821px){
-      height:10.5em;
-  }
-  @media(max-width: 821px)and(min-width: 769px){
-      height:8em;
-  }
-  @media(max-width:768px)and(min-width: 600px){
-      height: 23.5em;
-  }
-  @media(max-width: $screen-xs){
-      height: 13.5em;
-  }
-}
-.video_linkwrapper2{
-  position:relative;
-  height: 13.5em;
-  overflow:hidden;
-
-  @media(max-width: 1025px)and(min-width: 769px){
-      height:10em;
-
-  }
-  @media(max-width: 821px)and(min-width: 768px){
-    height:7.5em;
-
-  }
-  @media(max-width:767px)and(min-width:$screen-xs){
-      height: 22.5em;
-  }
-  @media(max-width:$screen-xs){
-      height: 13.5em;
-  }
-}
-.video_linkwrapper3{
-  position:relative;
-  height: 13.5em;
-  overflow:hidden;
-
-  @media(max-width: 1025px)and(min-width: 821px){
-    height:10em;
-
-  }
-  @media(max-width: 821px)and(min-width: 769px){
-    height: 7.8em;
-
-
-  }
-  @media(max-width:768px)and(min-width:$screen-xs){
-      height: 13.5em;
-
-  }
-  @media(max-width: $screen-xs){
-      height:13.5em;
-  }
-}
-.video_linkwrapper5{
-
-  position:relative;
-  height: 27em;
-  overflow:hidden;
-
-  @media(max-width: 1025px)and(min-width: 821px){
-    height:21.5em;
-
-  }
-@media(max-width: 821px)and(min-width: 769px){
-  height: 7.8em;
-
-
-}
-@media(max-width:768px)and(min-width:$screen-xs){
-  height: 25em;
-
-}
-@media(max-width: $screen-xs){
-    height:13.5em;
-
-}
+  aspect-ratio: 16 / 9;
 }
 .video_group_time{
   q{
@@ -1004,9 +897,6 @@
           color: #ffffff;
         }
   }
-  // .video_linkwrapper2{
-  //   height: 9.5em;
-  // }
     .video_desc{
       letter-spacing: 0.3px;
       color: #8f8f8f;
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index bf7840b..8eaca71 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -119,38 +119,38 @@ input:hover {
 }
 
 .extra { clear: both; }
-.tab-content .tab-pane {
+// .tab-content .tab-pane {
 
-display: block !important;
+// display: block !important;
 
-height: 0;
+// height: 0;
 
-overflow: hidden;
+// overflow: hidden;
 
-}
-.tab-content .tab-pane.active {
+// }
+// .tab-content .tab-pane.active {
 
-height: auto;
+// height: auto;
 
-overflow: visible;
+// overflow: visible;
 
-}
-.tab-content .tab-pane {
+// }
+// .tab-content .tab-pane {
 
-display: block !important;
+// display: block !important;
 
-height: 0;
+// height: 0;
 
-overflow: hidden;
+// overflow: hidden;
 
-}
-.tab-content .tab-pane.active {
+// }
+// .tab-content .tab-pane.active {
 
-height: auto;
+// height: auto;
 
-overflow: visible;
+// overflow: visible;
 
-}
+// }
 //公告頁籤
 ul.tab_nav {
     list-style-type: none;
@@ -596,20 +596,19 @@ ul.tab_nav {
 
     tbody td {
       position: relative;
-      padding-left: 45%;
       text-align: left;
       border-bottom: 1px solid #eee;
       min-height: 72px;
       display: flex;
       align-items: center;
-      justify-content: center;
+      flex-wrap: wrap;
     }
 
     /* 用 data-label 顯示對應標題 */
     tbody td::before {
       content: attr(data-label);
-      position: absolute;
-      left: 8px;
+      position: relative;
+      left: 0;
       width: 40%;
       font-weight: bold;
       color: #333;
@@ -926,19 +925,33 @@ a.ui-state-default{
     overflow: hidden;
     border-radius: 2em;
     height: fit-content;
-  input:focus, 
-  input:hover{
-
-    background: transparent !important;
-    transition: all 0.2s ease-in-out !important;
-    border-radius: 2em !important;
-  }
-  @media(max-width: 768px){
-        position: absolute;
-        right: 6em;
-        color: #fff;
-        top: 1em;
-  }
+    width: fit-content;
+  // input:focus, 
+  // input:hover{
+  //   border-color: rgba(82, 168, 236, 0.8);
+  //   outline: 0;
+  //   outline: thin dotted \9;
+  //   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  //   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
+  //   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  //   border-radius: 2em;
+  // }
+  // .btn-search:focus{
+  //   border-color: rgba(82, 168, 236, 0.8);
+  //   outline: 0;
+  //   outline: thin dotted \9;
+  //   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  //   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  //   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  //   border-radius: 1em;
+  //   color: $theme-color-second;
+  // }
+  // @media(max-width: 768px){
+  //       position: absolute;
+  //       right: 6em;
+  //       color: #fff;
+  //       top: 1em;
+  // }
 }
 .search-box{
   width: fit-content;
@@ -962,7 +975,7 @@ a.ui-state-default{
   position: relative;
   @media(max-width:768px){
     color:#333!important ;
-    height: 30px;
+
   }
 }
 .input-search::placeholder{
@@ -1017,8 +1030,6 @@ a.ui-state-default{
   pointer-events: auto;
   @media(max-width:768px){
     color:gray ;
-    width: 70px;
-    height: 30px;
   }
 }
 .btn-search:focus ~ .input-search{
diff --git a/modules/ad_banner/_ad_banner_widget2.html.erb b/modules/ad_banner/_ad_banner_widget2.html.erb
index d64448c..e7c9f79 100644
--- a/modules/ad_banner/_ad_banner_widget2.html.erb
+++ b/modules/ad_banner/_ad_banner_widget2.html.erb
@@ -41,10 +41,10 @@
       <p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
     </a>
   </ul>
-	<ul class="button-mid">
-  <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
-  <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
-	</ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
+  </ul>
 </div>
 <script>
 	var flag = 1;
diff --git a/modules/ad_banner/_ad_banner_widget5.html.erb b/modules/ad_banner/_ad_banner_widget5.html.erb
index 15c092a..08e3644 100644
--- a/modules/ad_banner/_ad_banner_widget5.html.erb
+++ b/modules/ad_banner/_ad_banner_widget5.html.erb
@@ -45,10 +45,10 @@
       <p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
     </a>
   </ul>
-	<ul class="button-mid">
-    <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
-    <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
-	</ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
+  </ul>
 </div>
 <script>
 	var flag = 1;
diff --git a/modules/ad_banner/_ad_banner_widget6.html .erb b/modules/ad_banner/_ad_banner_widget6.html .erb
index 92a6e05..67efe09 100644
--- a/modules/ad_banner/_ad_banner_widget6.html .erb	
+++ b/modules/ad_banner/_ad_banner_widget6.html .erb	
@@ -44,8 +44,8 @@
     </a>
   </ul>
   <ul class="button-mid">
-    <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
-    <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
   </ul>
     <div class="background-overlay"></div>
 </div>
diff --git a/modules/announcement/_annc_widget15.html.erb b/modules/announcement/_annc_widget15.html.erb
index 162ee50..d079e0e 100644
--- a/modules/announcement/_annc_widget15.html.erb
+++ b/modules/announcement/_annc_widget15.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc w-annc  widget-announcement-15" style="position:relative;">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 50%;width:100%;    z-index: 101;">
@@ -25,6 +25,7 @@
     data-cycle-prev="#prev-{{subpart-id}}"
     data-cycle-slides=".w-annc__item" >
     <li class="w-annc__item " >
+    <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}" class="widget-title-a">
       <div class="w-annc__item_inner">
         <div class="w-annc__img-wrap bullseye" style="position:relative">
           <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
@@ -50,6 +51,7 @@
             <p class="w-annc__subtitle">{{subtitle}}</p>
         </div>
       </div>
+      </a>
     </li>
   </ul>
 </div>
diff --git a/modules/announcement/_annc_widget18.html.erb b/modules/announcement/_annc_widget18.html.erb
index c199335..d8aa1a6 100644
--- a/modules/announcement/_annc_widget18.html.erb
+++ b/modules/announcement/_annc_widget18.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-18">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
diff --git a/modules/announcement/_annc_widget19.html.erb b/modules/announcement/_annc_widget19.html.erb
index 8c0ac0a..7774209 100644
--- a/modules/announcement/_annc_widget19.html.erb
+++ b/modules/announcement/_annc_widget19.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  w-annc  widget-announcement-19" style="position:relative;">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 50%;width:100%;    z-index: 101;">
diff --git a/modules/announcement/_annc_widget20.html.erb b/modules/announcement/_annc_widget20.html.erb
index 5d624b4..e147d98 100644
--- a/modules/announcement/_annc_widget20.html.erb
+++ b/modules/announcement/_annc_widget20.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-20">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
diff --git a/modules/announcement/_annc_widget21.html.erb b/modules/announcement/_annc_widget21.html.erb
index 81320e5..01fb5a1 100644
--- a/modules/announcement/_annc_widget21.html.erb
+++ b/modules/announcement/_annc_widget21.html.erb
@@ -1,8 +1,8 @@
-<div class="w-annc  widget-announcement-4 widget-announcement-21">
-  <div class="w-annc__more-wrap clearfix">
+<div class="w-annc widget-announcement-21">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 62%;width:100%;    z-index: 101;">
diff --git a/modules/announcement/_annc_widget22.html.erb b/modules/announcement/_annc_widget22.html.erb
index ec01b02..b34ae4c 100644
--- a/modules/announcement/_annc_widget22.html.erb
+++ b/modules/announcement/_annc_widget22.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc   w-annc  widget-announcement-22" style="position:relative;">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 50%;width:100%;    z-index: 101;">
diff --git a/modules/announcement/_annc_widget24.html.erb b/modules/announcement/_annc_widget24.html.erb
index ea1aa39..df83d49 100644
--- a/modules/announcement/_annc_widget24.html.erb
+++ b/modules/announcement/_annc_widget24.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-24">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
diff --git a/modules/announcement/_annc_widget25.html.erb b/modules/announcement/_annc_widget25.html.erb
index d748c26..0d8822f 100644
--- a/modules/announcement/_annc_widget25.html.erb
+++ b/modules/announcement/_annc_widget25.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-4 widget-announcement-25">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div class="prevnext" style="position: absolute;top: 62%;width:100%;    z-index: 101;">
diff --git a/modules/announcement/_annc_widget4.html.erb b/modules/announcement/_annc_widget4.html.erb
index 8bdbb62..3bb8e2f 100644
--- a/modules/announcement/_annc_widget4.html.erb
+++ b/modules/announcement/_annc_widget4.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-4">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
diff --git a/modules/announcement/_annc_widget5.html.erb b/modules/announcement/_annc_widget5.html.erb
index 563e97b..c0da6bc 100644
--- a/modules/announcement/_annc_widget5.html.erb
+++ b/modules/announcement/_annc_widget5.html.erb
@@ -14,11 +14,12 @@
           <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
+
+      </div>
+      <h4 class="w-annc__entry-title">
         <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
           <span class="w-annc__status label status {{status-class}}">{{status}}</span>
         </span>
-      </div>
-      <h4 class="w-annc__entry-title">
         <span class="w-annc__title">{{title}}</span>
       </h4>
       <p class="w-annc__subtitle">{{subtitle}}</p>
diff --git a/modules/announcement/show.html.erb b/modules/announcement/show.html.erb
index 8a3b869..32948ff 100644
--- a/modules/announcement/show.html.erb
+++ b/modules/announcement/show.html.erb
@@ -36,6 +36,7 @@
         <a href="{{url}}"><span class="s-annc__tag label label-default">{{tag}}</span></a>
       </span>
     </li>
+    {{orbithashtags}}
   </ul>
 
   <section class="s-annc__post-wrap">
diff --git a/modules/event_news_mod/_event_news_widget15.html.erb b/modules/event_news_mod/_event_news_widget15.html.erb
index 502f40f..2cfd25f 100644
--- a/modules/event_news_mod/_event_news_widget15.html.erb
+++ b/modules/event_news_mod/_event_news_widget15.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc w-annc  widget-announcement-15 event-news-15" style="position:relative;">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 50%;width:100%;    z-index: 101;">
diff --git a/modules/event_news_mod/_event_news_widget20.html.erb b/modules/event_news_mod/_event_news_widget20.html.erb
index 76fb0ac..9bb8c88 100644
--- a/modules/event_news_mod/_event_news_widget20.html.erb
+++ b/modules/event_news_mod/_event_news_widget20.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-20">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="event_news">
diff --git a/modules/event_news_mod/_event_news_widget21.html.erb b/modules/event_news_mod/_event_news_widget21.html.erb
index a155d75..be4a6a2 100644
--- a/modules/event_news_mod/_event_news_widget21.html.erb
+++ b/modules/event_news_mod/_event_news_widget21.html.erb
@@ -1,8 +1,8 @@
 <div class="w-annc  widget-announcement-4 event-news-21">
-  <div class="w-annc__more-wrap clearfix">
     <h3 class="w-annc__widget-title">
       <span>{{widget-title}}</span>
     </h3>
+  <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 62%;width:100%;    z-index: 101;">
diff --git a/modules/member/show.html.erb b/modules/member/show.html.erb
index e0dd054..f317751 100644
--- a/modules/member/show.html.erb
+++ b/modules/member/show.html.erb
@@ -1,9 +1,9 @@
 <div class="show-member" module="member">
   <div class="row">
-    <div class="member-pic col-xs-3">
+    <div class="member-pic col-sm-3">
       <img src="{{image}}" alt="{{name}}" title="{{name}}" width="100%">
     </div>
-    <div class="member-data col-xs-9">
+    <div class="member-data col-sm-9">
       <table class="table table-striped">
         <div data-list="profile_data" data-level="0">
           <tr class="row">
@@ -15,7 +15,9 @@
     </div>
   </div>
   <ul class="member-plugins nav nav-pills" role="tablist" data-list="plugins" data-level="0">
-    <li class="{{plugin_class}}"><a href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a></li>
+    <li class="nav-item {{plugin_class}}">
+      <a class="nav-link" href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a>
+    </li>
   </ul>
   <div class="tab-content" data-list="plugins" data-level="0">
     <div class="tab-pane {{plugin_class}}" id="{{plugin_name}}">
@@ -45,15 +47,21 @@
     // Adding class on first element
     function memberPlugins() {
       var plugins = document.querySelector('.member-plugins');
-        if( plugins.children.length === 0 ) {
-            return;
-        }
-        if( plugins.querySelectorAll('.member-plugins .active').length === 0 ) {
-            var navs = plugins.querySelectorAll('.member-plugins > li'),
-                contents = plugins.nextElementSibling.children[0];
-            navs[0].className += ' ' + 'active';
-            contents.className += ' ' + 'active';
+      if (!plugins || plugins.children.length === 0) return;
+
+      // 改用 a.nav-link 判斷是否已有 active，不看 li
+      if (plugins.querySelectorAll('a.nav-link.active').length === 0) {
+        var firstLink = plugins.querySelector('li a.nav-link');
+        var firstPane = document.querySelector(firstLink.getAttribute('href'));
+
+        // active 只加在 a.nav-link，不加在 li
+        firstLink.classList.add('active');
+
+        // pane 要同時加 active 和 show
+        if (firstPane) {
+          firstPane.classList.add('active', 'show');
         }
+      }
     }
     memberPlugins();
   }())
@@ -91,10 +99,13 @@ $('.tab-pane table').each(function(){
     });
   }
 });
-
-$(document).ready(function () {
-  $('.member-data-value-5 a').each(function () {
-    $(this).replaceWith($(this).html()); // 把<a>替換成它裡面的內容
+// 同步 li.nav-item 的 active class
+document.addEventListener('show.bs.tab', function(e) {
+  // 移除所有 li 的 active
+  document.querySelectorAll('.member-plugins li.nav-item').forEach(function(li) {
+    li.classList.remove('active');
   });
+  // 把被點的 a 的父層 li 加上 active
+  e.target.closest('li.nav-item').classList.add('active');
 });
 </script>
diff --git a/modules/personal_course/index.html.erb b/modules/personal_course/index.html.erb
index 83fd717..070f753 100644
--- a/modules/personal_course/index.html.erb
+++ b/modules/personal_course/index.html.erb
@@ -3,19 +3,23 @@
   <thead>
     <tr>
       <th class="col-md-1">{{th_year}}</th>
-      <th class="col-md-6">{{th_course_title}}</th>
-      <th class="col-md-3">{{th_course_category}}</th>
+      <th class="col-md-4">{{th_course_title}}</th>
+      <th class="col-md-2">{{th_course_class}}</th>
+      <th class="col-md-2">{{th_course_category}}</th>
       <th class="col-md-1 min-tablet">{{th_course_semester}}</th>
       <th class="col-md-1 min-tablet-l">{{th_authors}}</th>
+      <th class="col-md-1 min-tablet-2">{{th_url}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="courses">
     <tr>
       <td>{{year}}</td>
       <td><a href="{{link_to_show}}">{{title}}</a></td>
+      <td>{{course_class}}</td>
       <td>{{category}}</td>
       <td>{{semester}}</td>
       <td>{{authors}}</td>
+      <td>{{url}}</td>
     </tr>
   </tbody>
 </table>
@@ -33,4 +37,4 @@ $('table.courses-index').each(function(){
     });
   }
 });;
-</script>
\ No newline at end of file
+</script>
diff --git a/modules/universal_table/index7.html.erb b/modules/universal_table/index7.html.erb
new file mode 100644
index 0000000..c8edd53
--- /dev/null
+++ b/modules/universal_table/index7.html.erb
@@ -0,0 +1,154 @@
+<style>
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index3">
+  <div class="searchbtn">
+    <div class="ken-click">
+      <a href="{{url}}" class="universal-btn btn btn-info  {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+      <button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
+    </div>
+  </div>
+  <div class="searchbox">
+  <div class="theadsearch2">
+    <div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
+      <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <div class="form-group">
+              {{form-field}}
+              <input type="hidden" value="{{key}}" name="column" >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-2 col-xs-12 submit-btn-wrap">
+      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+    </div>
+  </div>
+  </div>
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+              <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
+// $('.universal-table-index thead tr').prepend('<th></th>')
+// $('.universal-table-index tbody tr').prepend('<td></td>')
+</script>
diff --git a/modules/universal_table/index8.html.erb b/modules/universal_table/index8.html.erb
new file mode 100644
index 0000000..ea07d15
--- /dev/null
+++ b/modules/universal_table/index8.html.erb
@@ -0,0 +1,146 @@
+<style>
+  .universal-table-index4{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index4">
+  <div class="searchbtn">
+    <div class="ken-click">
+      <a href="{{url}}" class="universal-btn btn btn-info  {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+      <button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
+    </div>
+  </div>
+  <div class="searchbox">
+  <div class="theadsearch2">
+    <div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
+      <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <div class="form-group">
+              {{form-field}}
+              <input type="hidden" value="{{key}}" name="column" >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-2 col-xs-12 submit-btn-wrap">
+      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+    </div>
+  </div>
+  </div>
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+              <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
+// $('.universal-table-index thead tr').prepend('<th></th>')
+// $('.universal-table-index tbody tr').prepend('<td></td>')
+</script>
diff --git a/modules/universal_table/info.json b/modules/universal_table/info.json
index 1c77599..70b9418 100644
--- a/modules/universal_table/info.json
+++ b/modules/universal_table/info.json
@@ -50,7 +50,24 @@
                     "en" : "6. card 3-col Pure index table+ Multiple Field Search"
                     },
                 "thumbnail" : "thumb.png"
-            }
+            },
+          {
+              "filename" : "index7",
+              "name" : {
+                  "zh_tw" : "7.rwd左右 單純表格列表 + 多欄位搜尋",
+                  "en" : "7.rwd左右 col Pure index table+ Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png"
+          },
+          {
+              "filename" : "index8",
+              "name" : {
+                  "zh_tw" : "8.rwd左右 含序號表格列表 + 多欄位搜尋",
+                  "en" : "8.rwd左右 col Index Table with serial number + Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png",
+              "default": true
+          }
     ],
     "widgets" : [
         {
diff --git a/modules/video_pro/_video_pro_widget1.html.erb b/modules/video_pro/_video_pro_widget1.html.erb
index fc85ec3..611f700 100644
--- a/modules/video_pro/_video_pro_widget1.html.erb
+++ b/modules/video_pro/_video_pro_widget1.html.erb
@@ -21,7 +21,7 @@
           <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
           <div class="video_keyword">{{video_keyword}}</div>
           <div class="video_group_time">{{video_postdate}}</div>
-          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
           <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
         </div>
 
diff --git a/modules/video_pro/_video_pro_widget2.html.erb b/modules/video_pro/_video_pro_widget2.html.erb
index 66b0402..21e3155 100644
--- a/modules/video_pro/_video_pro_widget2.html.erb
+++ b/modules/video_pro/_video_pro_widget2.html.erb
@@ -3,7 +3,7 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
       <a  href="{{video_show_url}}" title="{{video_title_escape}}">
-        <div class="video_linkwrapper2">
+        <div class="video_linkwrapper">
           <div class="videohover">
             <div class="view_info">
               <span>{{view_count}}</span>
@@ -20,7 +20,7 @@
           <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
           <div class="video_keyword">{{video_keyword}}</div>
           <div class="video_group_time">{{video_postdate}}</div>
-          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
           <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
         </div>
     </li>
diff --git a/modules/video_pro/_video_pro_widget3.html.erb b/modules/video_pro/_video_pro_widget3.html.erb
index 6c49c7f..5f4cde7 100644
--- a/modules/video_pro/_video_pro_widget3.html.erb
+++ b/modules/video_pro/_video_pro_widget3.html.erb
@@ -22,7 +22,7 @@
   >
   <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
   <a  href="{{video_show_url}}" title="{{video_title_escape}}">
-    <div class="video_linkwrapper3">
+    <div class="video_linkwrapper">
       <div class="videohover">
         <div class="view_info">
           <span>{{view_count}}</span>
@@ -39,7 +39,7 @@
       <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
       <div class="video_keyword">{{video_keyword}}</div>
       <div class="video_group_time">{{video_postdate}}</div>
-      <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+      <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
       <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
     </div>
 </li>
diff --git a/modules/video_pro/_video_pro_widget4.html.erb b/modules/video_pro/_video_pro_widget4.html.erb
index 2e701ce..c6282e0 100644
--- a/modules/video_pro/_video_pro_widget4.html.erb
+++ b/modules/video_pro/_video_pro_widget4.html.erb
@@ -3,7 +3,7 @@
   <ul class="video_data_wrap row container" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-3" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-      <div class="video_linkwrapper10">
+      <div class="video_linkwrapper">
         <div class="videohover">
           <div class="view_info">
             <span>{{view_count}}</span>
@@ -19,7 +19,7 @@
           <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
           <div class="video_keyword">{{video_keyword}}</div>
           <div class="video_group_time">{{video_postdate}}</div>
-          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
           <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
         </div>
 
diff --git a/modules/video_pro/_video_pro_widget5.html.erb b/modules/video_pro/_video_pro_widget5.html.erb
index d6fc841..f2ea18b 100644
--- a/modules/video_pro/_video_pro_widget5.html.erb
+++ b/modules/video_pro/_video_pro_widget5.html.erb
@@ -12,7 +12,7 @@
   data-cycle-pager-template="<a href='#' class='pager-item' data-slide-num=''><h5></h5></a>">
  <li class="video_data col-xs-12 col-sm-12" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" data-title="{{video_title}}">
    <a  href="{{video_show_url}}" title="{{video_title_escape}}">
-    <div class="video_linkwrapper5">
+    <div class="video_linkwrapper">
       <div class="videohover">
         <div class="view_info">
           <span>{{view_count}}</span>
diff --git a/modules/video_pro/_video_pro_widget6.html.erb b/modules/video_pro/_video_pro_widget6.html.erb
index a284977..b9587f2 100644
--- a/modules/video_pro/_video_pro_widget6.html.erb
+++ b/modules/video_pro/_video_pro_widget6.html.erb
@@ -47,7 +47,7 @@
   >
   <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
   <a  href="{{video_show_url}}" title="{{video_title_escape}}">
-    <div class="video_linkwrapper6">
+    <div class="video_linkwrapper">
       <div class="videohover">
         <div class="view_info">
           <span>{{view_count}}</span>
@@ -64,7 +64,7 @@
       <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
       <div class="video_keyword">{{video_keyword}}</div>
       <div class="video_group_time">{{video_postdate}}</div>
-      <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+      <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
       <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
     </div>
 </li>
diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb
index e83948f..0150386 100644
--- a/modules/video_pro/video_pro_index1.html.erb
+++ b/modules/video_pro/video_pro_index1.html.erb
@@ -3,7 +3,7 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="  video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-    <div class="video_linkwrapper3 col-sm-4">
+    <div class="video_linkwrapper col-sm-4">
       <div class="videohover">
         <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
         <div class="videoduration"></div>
@@ -13,7 +13,7 @@
         <div class="col-sm-8 video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h5>{{video_title}}</h5></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
             <!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
diff --git a/modules/video_pro/video_pro_index2.html.erb b/modules/video_pro/video_pro_index2.html.erb
index 348cfa5..2ea598d 100644
--- a/modules/video_pro/video_pro_index2.html.erb
+++ b/modules/video_pro/video_pro_index2.html.erb
@@ -33,7 +33,7 @@
       </div>
         <div class="video_info">
           <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
-          <div class="video_title"><h5>{{video_title}}</h5></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
         </div>
       </a>
diff --git a/modules/video_pro/video_pro_index2_tag.html.erb b/modules/video_pro/video_pro_index2_tag.html.erb
index c7a81be..78c4a30 100644
--- a/modules/video_pro/video_pro_index2_tag.html.erb
+++ b/modules/video_pro/video_pro_index2_tag.html.erb
@@ -33,7 +33,7 @@
       </div>
         <div class="video_info">
           <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
-          <div class="video_title"><h5>{{video_title}}</h5></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
         </div>
       </a>
diff --git a/modules/video_pro/video_pro_index3.html.erb b/modules/video_pro/video_pro_index3.html.erb
index b1f5698..56bccb9 100644
--- a/modules/video_pro/video_pro_index3.html.erb
+++ b/modules/video_pro/video_pro_index3.html.erb
@@ -25,7 +25,7 @@
       </div>
         <div class="video_info">
           <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
-          <div class="video_title"><h5>{{video_title}}</h5></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
         </div>
       </a>
diff --git a/modules/video_pro/video_pro_index4.html.erb b/modules/video_pro/video_pro_index4.html.erb
index 13ad985..a9159e8 100644
--- a/modules/video_pro/video_pro_index4.html.erb
+++ b/modules/video_pro/video_pro_index4.html.erb
@@ -13,7 +13,7 @@
       <div class="video_info">
         <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
         <div class="video_group_time">{{video_postdate}}</div>
-        <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+        <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a></div>
         <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
       </div>
       </a>
diff --git a/modules/video_pro/video_pro_index_post_agency1.html.erb b/modules/video_pro/video_pro_index_post_agency1.html.erb
index d5855aa..b219cce 100644
--- a/modules/video_pro/video_pro_index_post_agency1.html.erb
+++ b/modules/video_pro/video_pro_index_post_agency1.html.erb
@@ -22,7 +22,7 @@
         <div class="video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
-          <div class="video_title"><h5>{{video_title}}</h5></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
             <span>x {{view_count}}</span>