'upgrade'

assets/javascripts/app.js

@@ -1,27 +1,35 @@
 ;(function($, win, undefined) {
   // ECMAScript 5 嚴格模式
   'use strict';
-
-  //header fixed在上方
-  function initdata1() {
-        if ( $('.homebanner').length != 0) {
-          $('.layout-header').css('height', '');
-          var scrollTop = $(window).scrollTop();
-          var scrollBottom = $('html').height() - $(window).height() - $('.layout-header').height();
-          if (scrollTop>5 && scrollBottom>0)  {          /* 要滑動到選單的距離 */
-              if (parseInt($('.index-layout-content').css('margin-top'))==0){
-              }
-              $('.outdropdowns').addClass('navFixed');   /* 幫選單加上固定效果 */
-          } else {
-              if ($('.homebanner').html().trim() == "") {
-                $('.outdropdowns').removeClass('navFixed');
-              }else{
-                $('.outdropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
-              }
-
-          }
-        }
+$(document).ready(function() {
+  // 確保兩個元素都存在
+  if ($('.header-nav blockquote').length && $('.orbit-bar-menu').length) {
+    $('.header-nav blockquote').appendTo('.orbit-bar-menu');
   }
+});
+  //header fixed在上方
+$(function(){
+  function initdata1(){
+
+    if (!$('.homebanner').length) return;
+
+    // 取得 65.5em 對應的 px
+    var em = parseFloat($('body').css('font-size'));
+    var minHeight = 65.5 * em;
+
+    // 判斷 .layout-content 高度
+    if ($('.layout-content').height() < minHeight) return;
+
+    var scrollTop = $(window).scrollTop();
+    $('.outdropdowns').toggleClass('navFixed', scrollTop > 5);
+  }
+
+  initdata1();
+
+  $(window).on('scroll', function(){
+    requestAnimationFrame(initdata1);
+  });
+});
   // 初始函數: 把所有的程式碼都包在init裡面，方便在之後的jQuery ready 函數裡一次呼叫
   function init() {
       // 快取一些常用的變數
@@ -351,7 +359,6 @@
       }
 
       // 在所有的頁面(包含首頁)執行下面這幾個函數
-      initdata1();
       orbit.sitemenuDropdown();
       orbit.goBackTop('top', 800);
       // orbit.plugins.bullEye();
@@ -399,6 +406,89 @@
       //   $('.header-buttom').appendTo($('.dropdowns'));
       // }
     function forFreeGo() {
+      setTimeout(function() {
+        $('h1, h2, h3, h4, h5, h6').each(function() {
+            var $heading = $(this);
+            
+            // 檢查是否為空 (去除空白後)
+            if ($.trim($heading.text()) === '' && $heading.children().length === 0) {
+                $heading.remove();
+            }
+        });
+      }, 500);
+            //zoom
+      $(function () {
+        $('.fnav a').each(function () {
+          const $a = $(this);
+
+          // 若已經有可見文字（非 icon），直接通過
+          const visibleText = $a.clone()
+            .children('.icon, i, svg, .caret')
+            .remove()
+            .end()
+            .text()
+            .trim();
+
+          if (visibleText.length > 0) return;
+
+          // 取得可用標籤文字（優先順序）
+          let label =
+            $a.attr('aria-label') ||
+            $a.attr('title') ||
+            $a.find('i[title]').attr('title') ||
+            '';
+
+          label = $.trim(label);
+
+          // 若真的完全沒有，就給一個保底（避免空字串違規）
+          if (!label) {
+            label = '功能按鈕';
+          }
+
+          // aria-label 一定要有
+          $a.attr('aria-label', label);
+
+          // icon 對螢幕閱讀器隱藏
+          $a.find('i, svg').attr('aria-hidden', 'true');
+
+          // 若沒有隱藏文字才補
+          if ($a.find('.sr-only, .visually-hidden').length === 0) {
+            $a.append(`<span class="sr-only">${label}</span>`);
+          }
+        });
+      });
+      //播放驗證碼語音
+      $(function () {
+        $('.ask-question')
+          .find('.controls button.fas.fa-volume-up')
+          .each(function () {
+            const $btn = $(this);
+
+            // 已經補過就不重複處理
+            if ($btn.attr('aria-label')) return;
+
+            $btn.attr({
+              'aria-label': '播放驗證碼語音',
+              'aria-controls': 'captcha_audio',
+              'role': 'button'
+            });
+          });
+      });
+
+      //刪除td的id
+      $('td[id]').removeAttr('id');
+
+      //刪除空的title
+        $('[class*="title"]').each(function () {
+          const $el = $(this);
+
+          // 取純文字（忽略 HTML tag、空白、換行）
+          const text = $.trim($el.text());
+
+          if (text === '') {
+            $el.remove();
+          }
+        });
       //表單legend
       $("fieldset").each(function () {
         const $fieldset = $(this);
@@ -571,6 +661,16 @@
           }
         });
           //無障礙單位轉換
+          $(function() {
+            $('style:contains("font-size")').each(function() {
+              let css = $(this).html();
+              css = css.replace(/font-size\s*:\s*([\d.]+)px\s*;?/gi, (_, px) =>
+                `font-size: ${(parseFloat(px) / 16).toFixed(3)}em;`
+              );
+              $(this).html(css);
+            });
+          });
+
           $("[style*='font-size']").each(function() {
             var fontSize = $(this).css("font-size");
             if (fontSize.includes("px")) {
@@ -623,6 +723,29 @@
             if (!$this.attr('title') || $this.attr('title').trim() === '') {
               $this.attr('title', '按鈕');
             }
+          });
+          $('img').each(function () {
+            const $img = $(this);
+
+            // 如果沒有 alt 或 alt 是空字串
+            if (!$img.attr('alt') || $img.attr('alt').trim() === '') {
+              let altText = '';
+
+              // 先抓 img 的 title
+              if ($img.attr('title')) {
+                altText = $img.attr('title');
+              }
+              // 再抓外層 a 的 title
+              else if ($img.closest('a').attr('title')) {
+                altText = $img.closest('a').attr('title');
+              }
+              // 如果都沒有，給預設文字
+              else {
+                altText = '圖片';
+              }
+
+              $img.attr('alt', altText);
+            }
           });        
           $('img').each(function() {
             var $this = $(this);
@@ -777,24 +900,40 @@
           }
         }
       });
-                  $('a').each(function () {
-                const $link = $(this);
-                const linkText = $link.text().trim();
+    if (location.href.search('editmode=on') === -1){
+            $('a').each(function () {
+              const $link = $(this);
+              const linkText = $link.text().trim();
 
-                $link.find('img').each(function () {
-                  const $img = $(this);
-                  const altText = $img.attr('alt')?.trim();
+              $link.find('img').each(function () {
+                const $img = $(this);
+                const altText = $img.attr('alt')?.trim();
 
-                  // 如果圖片 alt 是空的，就略過（已符合）
-                  if (altText === '') return;
+                // 如果圖片 alt 是空的，就略過（已符合）
+                if (altText === '') return;
 
-                  // 如果圖片 alt 等於文字內容，就將 alt 清空，避免重複
-                  if (altText === linkText) {
-                    $img.attr('alt', '');
-                  }
-                });
+                // 如果圖片 alt 等於文字內容，就將 alt 清空，避免重複
+                if (altText === linkText) {
+                  $img.attr('alt', '');
+                }
               });
+            });
+            $('a').each(function () {
+              const $a = $(this);
 
+              // 取得可見文字（去掉空白）
+              const text = $a.text().replace(/\u00a0/g, '').trim();
+
+              // 是否有圖片
+              const hasImg = $a.find('img').length > 0;
+
+              // 若沒有文字、也沒有圖片 → 移除
+              if (text === '' && !hasImg) {
+                $a.remove();
+              }
+            });
+    }
+    
     // 刪除banner-slide的空連結和空連結目標
     for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
       if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
@@ -1203,7 +1342,18 @@
       // if($('.show-announcement').hasClass('show-announcement')) {
       //   $('.').css('', '');
       // }
+      $('.i-publication__table').each(function () {
+        const $table = $(this);
+        const $tbody = $table.find('tbody');
 
+        if ($tbody.find('tr').length === 0) {
+          $table.hide();
+        }
+      });
+
+      if ($('.fatfooter').length === 0) {
+        $('.btn-fatfooter').hide();
+      };
       if($('.s-annc').length){
         $(".carousel_images h4").remove();
         $('.carousel_images').addClass('carousel_images2');
@@ -1217,27 +1367,27 @@
         // });
       }
       $('.s-annc__tag-wrap ').after($('.s-annc__post-orbithashtags'));
-    $('a').each(function () {
-          const $a = $(this);
+      $('a').each(function () {
+            const $a = $(this);
 
-          // 有圖示或圖片就不刪
-          if ($a.find('i, img').length > 0) return;
+            // 有圖示或圖片就不刪
+            if ($a.find('i, img').length > 0) return;
 
-          // 沒有任何實際文字內容（去除空白）
-          const hasVisibleText = $a.text().trim().length > 0;
+            // 沒有任何實際文字內容（去除空白）
+            const hasVisibleText = $a.text().trim().length > 0;
 
-          // 進一步判斷 span 內部是否完全為空
-          const allChildrenEmpty = $a.children().length > 0 && $a.children().toArray().every(child => {
-            return $(child).text().trim().length === 0;
-          });
+            // 進一步判斷 span 內部是否完全為空
+            const allChildrenEmpty = $a.children().length > 0 && $a.children().toArray().every(child => {
+              return $(child).text().trim().length === 0;
+            });
 
-          // 如果沒有文字內容且子元素全為空，則移除
-          if (!hasVisibleText && allChildrenEmpty) {
-            $a.remove();
-          }
-    });
-    $('.i-member-pic-wrap a').removeAttr('target');
-    function markCheckStatusButton() {
+            // 如果沒有文字內容且子元素全為空，則移除
+            if (!hasVisibleText && allChildrenEmpty) {
+              $a.remove();
+            }
+      });
+      $('.i-member-pic-wrap a').removeAttr('target');
+      function markCheckStatusButton() {
         $('.ask-question').each(function () {
           var $prev = $(this).prev(); // 取得前一個元素
 
@@ -1246,8 +1396,8 @@
             $prev.addClass('CheckStatus'); // 加上 class
           }
         });
-    };
-    markCheckStatusButton();
+      };
+      markCheckStatusButton();
 
 
     // 綁定滑動事件
@@ -1270,8 +1420,8 @@
       $('.box-social-share').before($('.sitemenu-wrap3'));
       $('.box-social-share').before($('.sitemenu-wrap3'));
       $('.box-social-share').before($('.sitemenu-wrap3'));
-      $(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)"));
-      $(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child"));
+      // $(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)"));
+      // $(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child"));
 
       //檔案室手風琴
       $('.panel-title>.collapsed').click(function(){
@@ -1322,7 +1472,7 @@
       if ($(window).width() <769) {
         $('.modules-menu-level-0').after($('.header-nav'));
       }else{
-        $('.outdropdowns').before($('.header-nav'));
+        $('.dropdowns').before($('.header-nav'));
       };
       $('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){
         $('.sitemenu-vertical .dropdown-menu').slideToggle();
@@ -1390,7 +1540,7 @@
 
           $('.modules-menu-level-0').after($('.header-nav'));
         }else{
-          $('.outdropdowns').before($('.header-nav'));
+          $('.dropdowns').before($('.header-nav'));
         };
 
         if ($(window).width() > 821) {
@@ -1407,9 +1557,6 @@
         }
           headerH();
       })
-      $(window).scroll(function() {
-        initdata1();
-      });
       // $(window).scroll(function() {
       //   if ($(this).scrollTop() > 100)  {          /* 要滑動到選單的距離 */
       //      $('.outdropdowns').addClass('navFixed');   /* 幫選單加上固定效果 */
@@ -1613,6 +1760,95 @@
       $(this).replaceWith($(this).contents());
     }); 
   });
+  //選單li加上fa-chevron-down
+  $(document).ready(function () {
+    function addDropdownIcons() {
+      if ($(window).width() > 769) {
+        $('#main-nav.modules-menu-level-0 > li').each(function () {
+          if ($(this).children('ul').length > 0) {
+            const $toggle = $(this).children('a.dropdown-toggle');
+            if ($toggle.find('i.fa-chevron-down').length === 0) {
+              $toggle.append(' <i class="kenmenu-drop fa-solid fa-chevron-down"></i>');
+            }
+          }
+        });
+      }else {
+        // 螢幕寬度小於等於 768 時，移除所有 chevron-down icon
+        $('#main-nav.modules-menu-level-0 .kenmenu-drop').remove();
+      }
+    }
+
+    addDropdownIcons();
+
+    $(window).resize(function () {
+      addDropdownIcons();
+    });
+  });
+    //banner動畫淡出
+  $(document).ready(function(){
+    // 一開始先觸發動畫
+    $(".w-ad-banner__slide.cycle-slide-active [data-animation]").each(function(){
+      triggerAnimation($(this));
+    });
+
+    // 每次輪播換圖後觸發
+    $(".w-ad-banner__wrap").on("cycle-after", function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
+      $(incomingSlideEl).find("[data-animation]").each(function(){
+        triggerAnimation($(this));
+      });
+    });
+
+    // 動畫觸發 function
+    function triggerAnimation($el){
+      let animClass = $el.attr("data-animation");
+      $el.removeClass(animClass); // 先移除，避免殘留
+      void $el[0].offsetWidth;   // reflow 強制重繪
+      $el.addClass(animClass);   // 重新加上動畫 class
+    }
+  });
+$(document).ready(function() {
+  // 核心清理函數
+  function removeHiddenLinks() {
+    $('.s-annc__post-wrap a').each(function() {
+      var $a = $(this);
+      // 如果 <a> 裡面有 <span> 且 display: none，就移除整個 <a>
+      if ($a.find('span').filter(function() {
+        return $(this).css('display') === 'none';
+      }).length > 0) {
+        $a.remove();
+      }
+    });
+  }
+
+  // 初始清理
+  removeHiddenLinks();
+
+  // 監控 .s-annc__post-wrap 內新增的節點
+  const target = document.querySelector('.s-annc__post-wrap');
+  if (target) {
+    const observer = new MutationObserver(function(mutationsList) {
+      // 每次有新增節點就重新清理
+      removeHiddenLinks();
+    });
+    observer.observe(target, { childList: true, subtree: true });
+  }
+});
+$(document).ready(function() {
+  $('[style]').each(function() {
+    var $el = $(this);
+    var style = $el.attr('style');
+    if (style && style.includes('font-size-adjust')) {
+      // 用正則移除 font-size-adjust 屬性（包含結尾的分號）
+      style = style.replace(/font-size-adjust\s*:\s*[^;]+;?/gi, '');
+      // 去除多餘空白
+      style = style.trim();
+      // 更新 style
+      $el.attr('style', style);
+    }
+  });
+});
+
+
 
   // //選單樣式2
   // $(document).ready(function() {
@@ -1632,10 +1868,107 @@
   //   }
   // });
 
+  //隱藏Hashtags
+  $(document).ready(function () {
+    $('.universal-table-show .table-title').each(function () {
+      var $titleTd = $(this);
+      var titleText = $titleTd.text().trim();
+      var $nextTd = $titleTd.next('td');
+
+      if (titleText === 'Hashtags' && $nextTd.length > 0 && $nextTd.text().trim() === '') {
+        $titleTd.closest('tr').hide();
+      }
+    });
+    $('.universal-table-index .theadsearch tr th').each(function (index) {
+      const $th = $(this);
+      const title = $th.find('.universal-th-text').text().trim();
+
+      // 找到 Hashtags 欄
+      if (title === 'Hashtags') {
+        let allEmpty = true;
+
+        // 走訪 tbody 的每一列檢查對應欄位是否都為空
+        $('.universal-table-index tbody tr').each(function () {
+          const $td = $(this).find('td').eq(index);
+          if ($td.text().trim() !== '') {
+            allEmpty = false;
+            return false; // 提前跳出 each
+          }
+        });
+
+        if (allEmpty) {
+          // 隱藏 thead 裡對應的 th
+          $th.hide();
+
+          // 隱藏 tbody 所有對應的 td 欄位
+          $('.universal-table-index tbody tr').each(function () {
+            $(this).find('td').eq(index).hide();
+          });
+        }
+      }
+    });
+  });
+  
   $(window).load(function(){
     $("iframe[src*='google']").attr('title','googleOauth');
   });
 
+  //tabtitle位置
+  $(document).ready(function() {
+      $('.w-annc .w-annc__widget-title').each(function() {
+          var $title = $(this);
+          var $tabs = $title.find('.nav-tabs, .tab_nav, .nav_tabs_filter');
+          
+          if ($tabs.length) {
+              $tabs.insertAfter($title);
+          }
+      });
+  });
+  //會員信箱a
+  $(document).ready(function() {
+    $('.member-data-value-6 a[href^="mailto:"]').each(function() {
+        var $link = $(this);
+        var html = $link.html();
+        
+        // 檢查是否有信箱且有 <br>
+        if (html.indexOf('@') !== -1 && html.indexOf('<br>') !== -1) {
+            // 分割內容
+            var parts = html.split(/<br\s*\/?>/i);
+            var email = parts[0].trim();
+            var rest = parts.slice(1).join('<br>').trim();
+            
+            // 更新連結
+            $link.html(email)
+                 .attr('href', 'mailto:' + email)
+                 .attr('title', email + '(在本視窗開啟)')
+                 .attr('aria-label', email);
+            
+            // 插入其餘內容
+            if (rest) {
+                $link.after('<br>' + rest);
+            }
+        }
+    });
+  });
+$(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>')
+    // 找到 Sitemap 連結
+    var $sitemapLink = $('a[href="/zh_tw/sitemap"]');
+    
+    // 找到目標容器
+    var $target = $('.searchclass');
+    
+    // 移動到容器內的最前面
+    if ($sitemapLink.length && $target.length) {
+        $sitemapLink.prependTo($target);
+    }
+    var $sitemapLink = $('a[href="/en/sitemap"]');
+    var $target = $('.searchclass');
+    if ($sitemapLink.length && $target.length) {
+        $sitemapLink.prependTo($target);
+    }
+});
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
   // $(window).load(function() {
   //   if ($('.index-member-3').length && $(window).width() > 992) {

assets/stylesheets/template/base/_accesskey.scss

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 a[accesskey] {
-  position: absolute!important;
+  position: absolute;
   margin-left: -0.9375em;
   color: transparent !important;
 }

assets/stylesheets/template/base/_global.scss

@@ -115,18 +115,18 @@ a.btn-primary {
   transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
   background: none;
   border: none;
-  color: $theme-color-main;
-  box-shadow: $theme-color-main 0 0px 0px 2px inset;
+  color: $theme-color-hover;
+  box-shadow: $theme-color-hover 0 0px 0px 2px inset;
 
   &:hover {
     color: #fff;
-    box-shadow:$theme-color-main 0 0px 0px 40px inset;
+    box-shadow:$theme-color-hover 0 0px 0px 40px inset;
   }
 }
 .theadsearch2{
   .btn-primary{
-    background-color:$theme-color-second;
-    border-color:$theme-color-second;
+    background-color:$theme-color-hover;
+    border-color:$theme-color-hover;
   }
 }
 
@@ -151,10 +151,16 @@ a.btn-primary {
     }
   }
 }
-img{
+img {
+    max-width: 100%;
+    height: auto;
+}
+.w-annc,.i-video_data,.w-video_data,.w-ba-banner{
+  img{
     width: 100%;
     height: 100%;
     object-fit: cover;
+  }
 }
 // Take care of exceeding content
 // body[data-module="page_content"],

assets/stylesheets/template/base/_sitemap-override.scss

@@ -3,6 +3,7 @@
 @import "variables";
 
 body .sitemap-list {
+    padding-left: 1.6em;
   a {
     color: $theme-color-main;
 

assets/stylesheets/template/layout/content.scss

@@ -9,7 +9,7 @@
 .verticalhome{
   position: relative;
   width: 100%;
-  overflow: hidden;
+    z-index: unset!important;
 }
 .internal-page{
   .layout-content{
@@ -23,8 +23,8 @@
 }
 .layout-content {
   position: relative;
-  min-height: 42.5em;
-  background: #fff;
+  min-height: 55.5em;
+  background: #F8F9FA;
   .container {
     @extend .response-container;
   }
@@ -33,7 +33,6 @@
   overflow: hidden;
 }
 .video-banner{
-  max-width: 850px;
   margin: auto;
   position: relative;
 }
@@ -69,8 +68,8 @@
   position: relative;
   width: 100%;
   background: #F8F9FA;
-  padding-bottom: 4em;
-  padding-top: 4em;
+  padding-bottom: 2em;
+  padding-top: 2em;
    p{
    padding-bottom: 1em;
   }
@@ -80,22 +79,22 @@
   position: relative;
   width: 100%;
   // background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0);
-  padding-top: 4em;
-  padding-bottom: 4em;
+  padding-top: 2em;
+  padding-bottom: 2em;
 }
 .contentwrap2{
   overflow: hidden;
   position: relative;
   width: 100%;
-  padding-top: 4em;
-  padding-bottom: 4em;
+  padding-top: 2em;
+  padding-bottom: 2em;
 }
 .contentwrap3{
   overflow: hidden;
   position: relative;
   width: 100%;
-  padding-top: 4em;
-  padding-bottom: 4em;
+  padding-top: 2em;
+  padding-bottom: 2em;
   background:#F8F9FA;
 }
 .iconwrap{

assets/stylesheets/template/layout/header.scss

@@ -1,9 +1,104 @@
 @charset "utf-8";
 
 @import "../initial";
+a[href="/zh_tw/sitemap"]{
+  padding: 0 1em;
+}
+a[href="/en/sitemap"]{
+  padding: 0 1em;
+}
 .fc-cal-date-selected-fusion {
   font-size: 1em!important;
 }
+.nav_ul{
+      padding: 0;
+  & > li{
+    position: relative;
+    list-style:none;
+    float: left;
+    display: inline-block;
+    @media(max-width:480px){
+      width: 100%;
+      a{
+        display: block;
+      }
+    }
+    &:hover{
+      background-color:transparent;
+      > a{
+        text-decoration: underline;
+        padding: 0.7em;
+      }
+      & > ul{
+        display: block;
+        a{
+          color: #fff;
+        }
+      }
+    }
+    & > ul{
+      @media(max-width:480px){
+       position: relative;
+       box-shadow: none;
+       display: block;
+       li{
+        width: 100%;
+       }
+      }
+      display: none;
+      width:-webkit-fill-available;
+      min-width: max-content;
+      box-shadow: 2px 2px 5px #00000033;
+      margin: 0;
+      transition-duration: 0.5s;
+      background:$theme-color-second;
+      position: absolute;
+      padding: 0;
+      li{
+        list-style:none;
+        float: none!important;
+        a{
+          color: #fff;
+          display: block;
+          padding: 0.7em;
+        }
+        &:hover{
+          background-color: rgba(darken($theme-color-second, 10%), 1);;
+          & > ul{
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+
+}
+.orbit-bar-inner{
+  .orbit-bar-menu{
+    display: flex;
+      align-items: center;
+  }
+
+  blockquote{
+    color: #fff;
+    padding: 0;
+    margin: 0;
+    font-size: unset;
+    border-left: 0;
+    &:after, &:before{
+      display: none;
+    }
+    a{
+      color: #fff;
+      text-decoration: none;
+      display: inline-block;
+      height: 40px;
+      padding: 0.7em;
+      font-size: 0.85em;
+    }
+  }
+}
 .outdropdowns{
   background-color: #fff;
   position: relative;
@@ -28,7 +123,7 @@
   }
 }
 .dropdowns{
-  padding: 0;
+
 }
 .accessibility_mode a:focus{
   outline: 0.1em solid !important;
@@ -47,7 +142,7 @@
   li{
     list-style: none;
   }
-  a[accesskey] {
+  a[accesskey]{
     position: relative!important;
   }
 

assets/stylesheets/template/modules/ad_banner.scss

@@ -68,13 +68,6 @@ iframe{
 .w-ba-banner__slide {
   width: 100%;
 }
-[data-cycle-carousel-visible="3"] .w-ba-banner__slide {
-    width: auto;
-    height: auto
-}
-[data-cycle-carousel-visible="3"]{
-    padding-bottom: 0;
-}
 .ad-overlay {
     color: #333333;
     font-family: $main-font;
@@ -105,11 +98,7 @@ iframe{
   }
 
   button {
-    // background: hsla(0,0%,100%,.4);
-    // width: 100%;
-    // height: 3px;
-    // border: unset;
-    background: white !important;
+    background: #ccc !important;
     display: inline-block;
     margin-right: 0.25em;
     width: 0.8em !important;
@@ -193,7 +182,7 @@ ul.button-mid{
     top: 50%;
     position: absolute;
     transform: translateY(-50%);
-    z-index: 100;
+    z-index: 200;
 
     &:hover {
       background: rgba(0,0,0,0.1);
@@ -215,7 +204,7 @@ ul.button-mid{
     top: 50%;
     position: absolute;
     transform: translateY(-50%);
-    z-index: 100;
+    z-index: 200;
     &:hover {
       background: rgba(0,0,0,0.1);
     }
@@ -374,14 +363,6 @@ ul.button-mid{
     width: 100%;
     height: 100%;
   }
-
-
-  .banner-pager {
-    right: 1em;
-    top: -2em;
-    z-index: 100;
-    display: none;
-  }
 }
 
 // Widget 3
@@ -511,11 +492,8 @@ ul.button-mid{
         padding: 0.5em;
         overflow: hidden;
   }
-  .banner-pager{
-    display: none;
-  }
   .banner-overlay {
-    border-bottom: 3px solid $theme-color-second;
+    // border-bottom: 3px solid $theme-color-second;
     text-align: center;
     width: 100%;
     visibility: unset !important;
@@ -629,6 +607,7 @@ ul.button-mid{
 }
 //Widget 10
 .ba-banner-widget-10 {
+  margin-bottom: 1em;
   .w-ad-banner__caption{
     padding: 2em 1em;
     background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
@@ -647,7 +626,6 @@ ul.button-mid{
         "g1 g2 g3"
         "g1 g4 g5";
         grid-gap: 2% 1%;
-        grid-template-columns:32.3% 32.3% 32.3%;
     }
     .bannerimgwrapper{
       overflow: hidden;

assets/stylesheets/template/modules/announcement.scss

@@ -8,6 +8,20 @@
 
 // Announcement widget
 // ## Gerneral styles for widgets
+.s-annc__show-title{
+  span{
+        justify-content: center;
+    &:before{
+      display: none!important;
+    }
+    &:after{
+      display: none!important;
+    }
+  }
+}
+.w-annc__item_inner{
+  position: relative;
+}
 .VivaTimeline{
   z-index: 1;
   position: relative;
@@ -42,7 +56,7 @@
 }
 .w-annc .w-annc__subtitle{
   display: -webkit-box;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -121,7 +135,7 @@
       @extend .i-title;
       color: $theme-color-main;
       font-weight: normal;
-      display: flex!important;
+      display: flex;
       align-items: center;
     }
 
@@ -287,6 +301,7 @@
 
 // Widget-4
 .widget-announcement-4 {
+  
   .w-annc__title {
     font-family: $main-font;
     display: -webkit-box;
@@ -319,12 +334,6 @@
       -webkit-box-orient: vertical;
     }
   }
-  .clearfix{
-    // text-align: center;
-    // display: flex;
-    // justify-content: center;
-    // margin-bottom: 2em;
-  }
   .w-annc__content-wrap {
    &:after {
      content: '';
@@ -337,16 +346,18 @@
    }
   }
    .w-annc__item{
+    padding: 0.5em;
+    margin: 0!important;
+  }
+   .w-annc__item_inner{
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      background: #fff;
       -webkit-box-shadow: 0 1px 2px 0 #0000002e;
       box-shadow: 0 1px 2px 0 #0000002e;
-      margin-right: 0.5em;
-      margin-left: 0.5em;
+      margin: 0;
       margin-bottom: 1em;
-      padding: 0;
      &:hover{
       -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
@@ -359,21 +370,7 @@
          }
      }
    }
-  .w-annc__item{
-    // @media(min-width:  $screen-lg){
-    //   width:382px !important;
-    // }
-    // @media(max-width: 1025px)and(min-width: 821px){
-    //   width: 30.5vw !important;
-    // }
-    // @media(max-width: 820px)and(min-width: 768px){
-    //   width: 356px!important;
-    // }
-    // @media (max-width: $screen-xs) {
-    //   width: 94vw !important;
-    //   margin-left: 0 !important;
-    //   margin-right: 0 !important;
-    // }
+  .w-annc__item_inner{
       &:hover{
         -webkit-transform: translateY(-6px);
         -ms-transform: translateY(-6px);
@@ -420,7 +417,6 @@
   }
   .w-annc__list{
     display: flex;
-    justify-content: center;
   }
   .w-annc__postdate-wrap{
     color: #fff!important;
@@ -633,9 +629,6 @@
     margin-right: 1em;
     overflow: hidden;
     position: relative !important;
-    @media(max-width: $screen-xs){
-      width: 100% !important;
-    }
     @media(min-width: 1600px){
        height: 28em;
       .w-annc__img-wrap{
@@ -708,11 +701,6 @@
       -webkit-box-orient: vertical;
     }
   }
-  .clearfix{
-    // text-align: center;
-    // display: flex;
-    // justify-content: center;
-  }
   .w-annc__subtitle {
     display: -webkit-box;
    -webkit-line-clamp: 2;
@@ -733,46 +721,24 @@
    }
   }
    .w-annc__item{
-     -webkit-transition: .3s all ease;
-     -o-transition: .3s all ease;
-     transition: .3s all ease;
-     padding-bottom: 1em;
-     @media(min-width:  $screen-lg){
-       width:382px !important;
-     }
-     @media(max-width: 1025px)and(min-width: 821px){
-       width: 30.5vw !important;
-     }
-     @media(max-width: 820px)and(min-width: 768px){
-       width: 356px!important;
-     }
-     @media (max-width: $screen-xs) {
-      width: 93.5vw !important;
-      margin-left: 0 !important;
-      margin-right: 1em !important;
-     }
-     &:hover{
-      -webkit-transition: all .3s ease;
-      -moz-transition: all .3s ease;
-      -ms-transition: all .3s ease;
-      -o-transition: all .3s ease;
-      transition: all .3s ease;
-         .w-annc__content-wrap:after{
-           width: 100%;
-          background: #f2f2f2;
-         }
-     }
-   }
-  .w-annc__item{
+    padding: 0.5em;
+    margin: 0!important;
+  }
+  .w-annc__item_inner{
+      background: #fff;
+      -webkit-transition: .3s all ease;
+      -o-transition: .3s all ease;
+      transition: .3s all ease;
+      -webkit-box-shadow:none!important;
+      box-shadow:none!important;
+      margin: 0;
+      margin-bottom: 1em;
+  }
+  .w-annc__item_inner{
       &:hover{
         -webkit-transform: translateY(-6px);
         -ms-transform: translateY(-6px);
         transform: translateY(-6px);
-
-      .w-annc__img-wrap{
-        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-      }
       img{
           // transform: scale(1.2)!important;
           // -webkit-transition: .3s ease-out;
@@ -816,11 +782,6 @@
     }
   }
   .w-annc__item{
-    padding: 0;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
-    overflow: hidden;
-    position: relative !important;
     @media(min-width: 1600px){
       height: 28em;
 
@@ -831,10 +792,8 @@
     }
     @media(min-width: $screen-xs)and(max-width: 1599px){
       height: 20em;
-
       .w-annc__img-wrap{
           height: 20em;
-
       }
     }
   }
@@ -869,7 +828,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 8px;
+      height: 18px;
       background-color: $theme-color-second;
       z-index: -1;
       -webkit-transition: height .6s;
@@ -1326,9 +1285,6 @@
     margin-right: 1em;
     overflow: hidden;
     position: relative !important;
-    @media(max-width: $screen-xs){
-      width: 100% !important;
-    }
     @media(min-width: 1600px){
        height: 28em;
       .w-annc__img-wrap{
@@ -1426,37 +1382,49 @@
      transition: width .5s ease, background-color .5s ease;
    }
   }
-   .w-annc__item{
-     -webkit-transition: .3s all ease;
-     -o-transition: .3s all ease;
-     transition: .3s all ease;
-     padding-bottom: 1em;
-     @media(min-width:  $screen-lg){
-       width:382px !important;
-     }
-     @media(max-width: 1025px)and(min-width: 821px){
-       width: 30.5vw !important;
-     }
-     @media(max-width: 820px)and(min-width: 768px){
-       width: 356px!important;
-     }
-     @media (max-width: $screen-xs) {
-      width: 93.5vw !important;
-      margin-left: 0 !important;
-      margin-right: 1em !important;
-     }
-     &:hover{
-      -webkit-transition: all .3s ease;
-      -moz-transition: all .3s ease;
-      -ms-transition: all .3s ease;
-      -o-transition: all .3s ease;
-      transition: all .3s ease;
-         .w-annc__content-wrap:after{
-           width: 100%;
-          background: #f2f2f2;
-         }
-     }
-   }
+     .w-annc__item{
+    padding: 0.5em;
+    margin: 0!important;
+  }
+  .w-annc__item_inner{
+      background: #fff;
+      -webkit-transition: .3s all ease;
+      -o-transition: .3s all ease;
+      transition: .3s all ease;
+      -webkit-box-shadow:none!important;
+      box-shadow:none!important;
+      margin: 0;
+      margin-bottom: 1em;
+  }
+  .w-annc__item_inner{
+      &:hover{
+        -webkit-transform: translateY(-6px);
+        -ms-transform: translateY(-6px);
+        transform: translateY(-6px);
+      img{
+          // transform: scale(1.2)!important;
+          // -webkit-transition: .3s ease-out;
+          // -moz-transition: .3s ease-out;
+          // -ms-transition: .3s ease-out;
+          // -o-transition: .3s ease-out;
+          // transition: .3s ease-out;
+      }
+      .transitionfade{
+        height: inherit;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(0,0,0,.4);
+        -webkit-transition: .3s ease-out;
+        -moz-transition: .3s ease-out;
+        -ms-transition: .3s ease-out;
+        -o-transition: .3s ease-out;
+        transition: .3s ease-out;
+      }
+    }
+  }
   .w-annc__item{
       &:hover{
         -webkit-transform: translateY(-6px);
@@ -1468,10 +1436,6 @@
           align-items: end;
           flex-wrap: wrap;
       }
-      .w-annc__img-wrap{
-        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-      }
       img{
           transform: scale(1.2)!important;
           -webkit-transition: .3s ease-out;
@@ -1515,27 +1479,27 @@
     }
   }
   .w-annc__item{
-    padding: 0;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
+    margin-right: 1em;
     overflow: hidden;
     position: relative !important;
     @media(min-width: 1600px){
-      height: 28em;
-
+       height: 28em;
       .w-annc__img-wrap{
           height: 28em;
-
       }
     }
     @media(min-width: $screen-xs)and(max-width: 1599px){
-      height: 20em;
-
+       height: 20em;
       .w-annc__img-wrap{
-          height: 20em;
-
+        height: 20em;
       }
     }
+    @media(max-width: $screen-xs){
+      height: 20em;
+     .w-annc__img-wrap{
+       height: 20em;
+     }
+    }
   }
       li{
       &:hover{
@@ -2001,6 +1965,9 @@
 // Widget-13
 // ## Table
 .widget-announcement-13 {
+  .table>tbody>tr>td{
+    border: 0;
+  }
   .w-annc__th{
     white-space: nowrap;
     @media(max-width: $screen-xs){
@@ -2040,7 +2007,16 @@
 
 // Widget-14
 .widget-announcement-14 {
-
+  .w-annc__inner{
+    @media(min-width:769px){
+      display: flex;
+    }
+  }
+  .w-annc__img-wrap{
+    @media(min-width:769px){
+      padding-right: 1em!important;
+    }
+  }
   .w-annc__img-wrap {
       margin-bottom: 0;
       padding: 0;
@@ -2089,47 +2065,29 @@
  }
 
  .w-annc__img-wrap {
-   height: 15.5em;
+  //  height: 15.5em;
    margin: 0;
    overflow: hidden;
  }
  .w-annc__item{
+    padding: 0.5em;
+    margin: 0!important;
+ }
+ .w-annc__item_inner{
     background: #fff;
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     -webkit-box-shadow: 0 1px 2px 0 #0000002e;
     box-shadow: 0 1px 2px 0 #0000002e;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
+    margin: 0;
     margin-bottom: 1em;
-    padding: 0;
-    @media(min-width:  $screen-lg){
-      width:382px !important;
-    }
-    @media(max-width: 1025px)and(min-width: 821px){
-      width: 30.5vw !important;
-    }
-    @media(max-width: 820px)and(min-width: 768px){
-      width: 356px!important;
-    }
-    @media (max-width: $screen-xs) {
-      width: 94.5vw !important;
-      margin-left: 0 !important;
-      margin-right: 1em !important;
-    }
  }
- // .cycle-slide{
- //    width:25vw !important;
- // }
- // .cycle-carousel-wrap{
- //   margin-left:0.5em !important;
- // }
 }
 //Widget 16
 .widget-announcement-16 {
   .w-annc__item{
-    padding-right: 1em;
+    // padding-right: 1em;
   }
   .w-annc__img{
     width: 100%;
@@ -2452,7 +2410,7 @@
   }
   .i-annc__img-wrap {
     overflow: hidden;
-    height: 14.5em;
+    // height: 14.5em;
     margin: 1em 0.5em;
     @media (max-width:$screen-xs) {
       height: 7em;
@@ -2603,13 +2561,14 @@ table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataT
 table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
   background-color: $theme-gray !important;
 }
-.i-annc__table{
-  border: 0.0625em solid #ddd !important;
-}
 .i-annc__table .child span.dtr-data li {
   padding: 0 0.5em;
 }
-
+.i-annc{
+  tr{
+    border: 0.0625em solid #ddd !important;
+  }
+}
 // Index-1
 // Index-2
 .index-announcement-1,
@@ -3509,7 +3468,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   }
   .i-annc__img-wrap {
     overflow: hidden;
-    height: 14.5em;
+    // height: 14.5em;
     margin: 1em 0.5em;
     @media (max-width:$screen-xs) {
       height: 7em;

assets/stylesheets/template/modules/archives.scss

@@ -7,6 +7,9 @@
 //
 // Widget
 // ## gerenral styles
+.i-archive__file-wrap{
+      font-size: 1.2em;
+}
 .i-archive__list{
   .date-thead{
     min-width: 4em;
@@ -18,6 +21,7 @@
   }
 }
 .i-items{
+      border: 1px solid #ccc;
   @media(min-width: 768px){
       background-color: #fff;
   }
@@ -42,9 +46,6 @@
     @extend .unity-title;
   }
 }
-.i-archive-item-title{
-  font-weight: normal;
-}
 .panel-title{
   @extend .i-title;
 }
@@ -144,14 +145,14 @@
 .i-archive-title {
   @extend .unity-title;
 }
-.link{margin-left: 0.5em;}
-.txt { background-color: #6dbb73;     margin-left: 0.5em;}
-.xlsx { background-color: #bb6d7f;     margin-left: 0.5em;}
-.pdf { background-color: #3b8347;     margin-left: 0.5em;}
-.docx { background-color: #846dbb;     margin-left: 0.5em;}
-.pptx { background-color: #6d77bb;     margin-left: 0.5em;}
-.jpg { background-color: #bb6d6d;     margin-left: 0.5em;}
-.zip { background-color: #dcb957;     margin-left: 0.5em;}
+.link{margin-right: 0.5em;}
+.txt { background-color: #6dbb73;     margin-right: 0.5em;}
+.xlsx { background-color: #bb6d7f;     margin-right: 0.5em;}
+.pdf { background-color: #3b8347;     margin-right: 0.5em;}
+.docx { background-color: #846dbb;     margin-right: 0.5em;}
+.pptx { background-color: #6d77bb;     margin-right: 0.5em;}
+.jpg { background-color: #bb6d6d;     margin-right: 0.5em;}
+.zip { background-color: #dcb957;     margin-right: 0.5em;}
 .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
     // border-top: 0.0625em solid #ddd;
 }
@@ -160,10 +161,12 @@
   font-family: $main-font;
 
   .i-archive__item-wrap{
-    border: 1px solid #ccc;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-    padding: 15px;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 1em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom: 0;
+    }
   }
 
   .i-archive__archive-title {
@@ -183,7 +186,6 @@
     list-style: none;
   }
 
-  .i-archive__category-list {}
 
   .i-archive__category-title {
     padding-bottom: 0.3125em;
@@ -195,13 +197,12 @@
   }
 
   .i-archive__file-list {
-    display: block;
     margin-bottom: 0;
   }
 
   .i-archive__file-wrap {
     margin:0;
-    padding:0.5em 0 0;
+    padding:0 0 0.5em 0;
     border-radius: 0.125em;
   }
 
@@ -399,7 +400,6 @@
     margin-bottom: 1.5em;
     position: relative;
     background: #fff;
-    border-radius: 5px;
   }
   .head{
     @media(min-width: 821px){

assets/stylesheets/template/modules/event_news.scss

@@ -57,17 +57,27 @@
 .w-annc__list{
   padding: 0!important;
 }
+// .event-news-14
+.event-news-14{
+  .w-annc__inner{
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 1em;
+    .w-annc__list{
+      @media(max-width:768px){
+      width:100%;
+      }
+
+    }
+  }
+}
 //event-news-21
 .event-news-21 {
   .w-annc__item{
     padding: 0;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
+    margin-right: 1em;
     overflow: hidden;
     position: relative !important;
-    @media(max-width: $screen-xs){
-      width: 100% !important;
-    }
     @media(min-width: 1600px){
        height: 28em;
       .w-annc__img-wrap{
@@ -113,9 +123,6 @@
 
   .w-annc__title{
     color: #fff;
-    @media(min-width:1920px){
-      font-size: 1.6rem!important;
-    }
   }
   .w-annc__title {
     font-family: $main-font;
@@ -143,12 +150,6 @@
       -webkit-box-orient: vertical;
     }
   }
-  .clearfix{
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 2em;
-  }
   .w-annc__subtitle {
     display: -webkit-box;
    -webkit-line-clamp: 2;
@@ -169,46 +170,24 @@
    }
   }
    .w-annc__item{
-     -webkit-transition: .3s all ease;
-     -o-transition: .3s all ease;
-     transition: .3s all ease;
-     padding-bottom: 1em;
-     @media(min-width:  $screen-lg){
-       width:382px !important;
-     }
-     @media(max-width: 1025px)and(min-width: 821px){
-       width: 30.5vw !important;
-     }
-     @media(max-width: 820px)and(min-width: 768px){
-       width: 356px!important;
-     }
-     @media (max-width: $screen-xs) {
-      width: 93.5vw !important;
-      margin-left: 0 !important;
-      margin-right: 1em !important;
-     }
-     &:hover{
-      -webkit-transition: all .3s ease;
-      -moz-transition: all .3s ease;
-      -ms-transition: all .3s ease;
-      -o-transition: all .3s ease;
-      transition: all .3s ease;
-         .w-annc__content-wrap:after{
-           width: 100%;
-          background: #f2f2f2;
-         }
-     }
-   }
-  .w-annc__item{
+    padding: 0.5em;
+    margin: 0!important;
+  }
+  .w-annc__item_inner{
+      background: #fff;
+      -webkit-transition: .3s all ease;
+      -o-transition: .3s all ease;
+      transition: .3s all ease;
+      -webkit-box-shadow:none!important;
+      box-shadow:none!important;
+      margin: 0;
+      margin-bottom: 1em;
+  }
+  .w-annc__item_inner{
       &:hover{
         -webkit-transform: translateY(-6px);
         -ms-transform: translateY(-6px);
         transform: translateY(-6px);
-
-      .w-annc__img-wrap{
-        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-      }
       img{
           // transform: scale(1.2)!important;
           // -webkit-transition: .3s ease-out;
@@ -252,11 +231,6 @@
     }
   }
   .w-annc__item{
-    padding: 0;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
-    overflow: hidden;
-    position: relative !important;
     @media(min-width: 1600px){
       height: 28em;
 
@@ -267,10 +241,8 @@
     }
     @media(min-width: $screen-xs)and(max-width: 1599px){
       height: 20em;
-
       .w-annc__img-wrap{
           height: 20em;
-
       }
     }
   }
@@ -285,21 +257,18 @@
             }
       }
       position: relative;
-      @media only screen and (max-width: 769px) and(min-width:500px){
-       flex: 0 0 50%;
-      }
     }
     .card{
       position: absolute;
       z-index:0;
-      padding: 20px 25px;
+      padding: 30px 25px;
       bottom: 0;
       left: 0;
       background-color: transparent;
       background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
       background-image: linear-gradient(
       180deg
-      , #ffffff00 32%, #00000080 89%);
+      , #ffffff00 2%, #00000080 89%);
       width: 100%;
     }
     .card:before{
@@ -308,7 +277,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 8px;
+      height: 18px;
       background-color: $theme-color-second;
       z-index: -1;
       -webkit-transition: height .6s;
@@ -330,7 +299,6 @@
    font-weight: bold;
    color: #599df7;
  }
- .w-annc__widget-title { float: left; }
  .w-annc__more {
    margin-top: 1.5em;
    display: none;
@@ -370,7 +338,7 @@
     transition: .3s all ease;
     margin-right: 0.5em;
     margin-left: 0.5em;
-    margin-bottom: 1em;
+    margin-bottom: 1em!important;
     padding: 0;
     width: 100% !important;
     display: flex!important;

assets/stylesheets/template/modules/gallery.scss

@@ -1,6 +1,30 @@
 @charset "utf-8";
 
 @import "../initial";
+.album-name{
+  min-height: 1em;
+  display: block;
+}
+.show-pic{
+      overflow: hidden;
+  &:hover{
+    img{
+    transform: scale(1.1) !important;
+    -webkit-transition: .3s ease-out;
+    -moz-transition: .3s ease-out;
+    -ms-transition: .3s ease-out;
+    -o-transition: .3s ease-out;
+    transition: .3s ease-out;
+    }
+  }
+}
+.widget-gallery{
+  position: relative;
+  z-index: 1;
+}
+.widget-content-inner{
+  margin-bottom: 1em;
+}
 .index-pic{
   overflow: hidden;
   padding: 0;
@@ -60,6 +84,10 @@
     }
     .widget-content {
       width: 100%;
+      @media(min-width:769px){
+        display: flex;
+        flex-wrap: wrap;
+      }
       // margin-left: -0.3125em;
       // margin-right: -0.3125em;
 
@@ -96,7 +124,6 @@
       .widget-pic {
         margin-right:1em;
         border-radius:  10px;
-        behavior: url("/assets/ie_support/PIE2/PIE.htc");
         border:  2px solid $theme-color-second;
         overflow: hidden;
         display: inline-block;
@@ -117,8 +144,214 @@
           display: inline-block;
           width: 100%;
           height: auto;
-          border-radius: 1.5em;
-          transform: scale(4) translateY(-1%);
+        }
+      }
+    }
+  }
+  &.widget7 {
+    position: relative;
+    .cycle-carousel-wrap{
+      display: flex;
+      align-items: baseline;
+      }
+    .gallery-widget-title{
+      // float: left;
+      // width: 150px;
+      // display: inline-block;
+      // padding: 5px 0 0 20px;
+      position: relative;
+      @media(max-width:$screen-xs){
+        float: none;
+        width: 100%;
+      }
+      &:before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 140px;
+      margin: 0;
+      overflow: hidden;
+      background: #fff;
+      position: absolute;
+      top: -100px;
+      left: 0;
+      }
+      .en {
+      float: left;
+      font-size: 1.5em;
+      line-height: 1em;
+      color: #FFF;
+      font-weight: bold;
+      }
+      .ch {
+        float: left;
+        font-size: 1em;
+        line-height: 1em;
+        color: #FFF;
+        display: inline-block;
+        margin: 8px 0 0 0;
+      }
+    }
+    .mask_title {
+        color: #000000;
+        text-align: center;
+        margin: 0;
+        padding: 8px 10px 10px;
+        background: #fff;
+        display: block;
+        font-size: 1.2em;
+        line-height: 1.7em;
+        width: 100%;
+        white-space: pre-line;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        height: 4em;
+    }
+
+    .button-mid{
+      position: absolute;
+      width: 100%;
+      top: 50%;
+      .prev-button,.next-button{
+        cursor: pointer;
+      }
+      @media(min-width:769px){
+        .prev-button{
+          left: 1.5em;
+        }
+      }
+        // position: absolute;
+        // width: 7%;
+        // height: 0;
+        // top: -2em;
+        // right: 0;
+        // min-width: 100px;
+    }
+
+    .banner-pager {
+      position:relative;
+      text-align: center;
+      margin-top: 10px;
+    }
+
+    .banner-pager span {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin: 0 4px;
+      background: #ccc;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    .banner-pager .cycle-pager-active {
+      background: $theme-color-second;
+    }
+    .widget-content {
+      overflow: hidden;
+
+      .album-item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .widget-pic {
+        display: inline-block;
+        padding: 0.0625em;
+        text-align: center;
+        padding: 0.5em;
+      @media(max-width:$screen-xs){
+        margin: 0!important;
+        padding:0;
+      }
+
+        @include size(20%, auto);
+
+        img {
+          @include size(100%, 100%);
+        }
+      }
+    }
+  }
+  &.widget8 {
+    .cycle-slideshow>*:nth-child(n + 2):not(.active,[class*="-wrap"]){
+      display: none!important;
+    }
+    .cycle-carousel-wrap{
+      display: flex;
+      align-items: baseline;
+    }
+    .gallery-widget-title{
+      position: relative;
+      @media(max-width:$screen-xs){
+        float: none;
+        width: 100%;
+      }
+    }
+  .mask_title {
+      color: #000000;
+      text-align: center;
+      margin: 0;
+      padding: 8px 10px 10px;
+      background: #fff;
+      display: block;
+      font-size: 1em;
+      line-height: 1.7em;
+      height: 4em;
+      width: 100%;       
+      box-sizing: border-box;
+      text-align: center;
+      padding: 8px 10px 10px;
+      overflow-wrap: break-word;
+      white-space: normal;
+  }
+
+  .button-mid{
+
+  }
+
+  .banner-pager {
+    position:relative;
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .banner-pager span {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 0 4px;
+    background: #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+    .banner-pager .cycle-pager-active {
+      background: $theme-color-second;
+    }
+    .widget-content {
+      overflow: hidden;
+
+      .album-item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .widget-pic {
+        padding: 0.0625em;
+        text-align: center;
+        padding-left: 1em;
+        border-radius: 1em;
+        @media(max-width:$screen-xs){
+          margin: 0!important;
+        }
+        img{
+          height: 12.5em!important;
         }
       }
     }
@@ -131,6 +364,12 @@
   }
 
   &.index1 {
+        @media(min-width:769px){
+      .img-thumbnail{
+        height: 15em;
+        overflow: hidden;
+      }
+    }
     .index-content {
       @media(max-width: $screen-xs){
         width: 100%;
@@ -167,7 +406,6 @@
       }
     }
   }
-
   &.index2 {
     .index-part{
       @media(max-width: $screen-xs){
@@ -205,68 +443,127 @@
     }
   }
   &.index6 {
-  .index-content{
-    margin-bottom: 1em;
-    @media(min-width: $screen-xs)and(max-width: 820px){
-        width: 50%;
+    .index-content{
+      margin-bottom: 1em;
+      @media(min-width: $screen-xs)and(max-width: 820px){
+          width: 50%;
+      }
+      @media(max-width: $screen-xs){
+        width: 100%;
+      }
     }
-    @media(max-width: $screen-xs){
-      width: 100%;
+    .index-pic{
+      border-bottom-right-radius: 30px;
+      overflow: hidden;
+      .img-thumbnail{
+        width: 100%;
+        border: 0;
+        padding: 0;
+        &:hover{
+          transform: scale(2);
+          -webkit-transition: .3s all ease;
+          -o-transition: .3s all ease;
+          transition: .3s all ease;
+        }
+      }
     }
-  }
-  .index-pic{
-    border-bottom-right-radius: 30px;
-    overflow: hidden;
-    .img-thumbnail{
-      width: 100%;
-      border: 0;
-      padding: 0;
-      &:hover{
-        transform: scale(2);
-        -webkit-transition: .3s all ease;
-        -o-transition: .3s all ease;
-        transition: .3s all ease;
+    .index-content {
+      &:nth-child(4n+1) {
+        clear: both;
+      }
+
+      .index-part {
+        padding: 0.5em;
+      }
+
+      .index-content-inner {
+        position: relative;
+        border: 0.0625em solid #ddd;
+        padding: 0.8em;
+      }
+
+      .index-content-title {
+        @extend .i-title;
+        font-family: $main-font;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 0;
+        height: 2.5em;
+      }
+
+      .index-img-description {
+        font-size: 0.813em;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
-  .index-content {
-    &:nth-child(4n+1) {
-      clear: both;
+  &.index7 {
+    @media(min-width:769px){
+      .img-thumbnail{
+        height: 15em;
+        overflow: hidden;
+      }
     }
-
-    .index-part {
-      padding: 0.5em;
+    .img-thumbnail{
+      padding: 0;
     }
+    .index-content {
+      margin-bottom: 1em;
+      @media(max-width: $screen-xs){
+        width: 100%;
+      }
+      &:nth-child(4n+1) {
+        clear: both;
+      }
 
-    .index-content-inner {
-      position: relative;
-      border: 0.0625em solid #ddd;
-      padding: 0.8em;
-    }
+      .index-part {
+        padding: 0.5em;
+        width: 100%;
+        padding: 1vw;
+        color: #fff;
+        box-sizing: border-box;
+        background-color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 2;
+        a{
+          color: #fff;
+        }
+      }
 
-    .index-content-title {
-      @extend .i-title;
-      font-family: $main-font;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-bottom: 0;
-      height: 2.5em;
-    }
+      .index-content-inner {
+        position: relative;
+      }
 
-    .index-img-description {
-      font-size: 0.813em;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      .index-content-title {
+        @extend .i-title;
+        font-family: $main-font;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .index-img-description {
+        font-size: 0.813em;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }
-}
 
 .show-gallery {
   .show-title {

assets/stylesheets/template/modules/member.scss

@@ -7,6 +7,11 @@
 //
 // Member Index
 // ## Gerneral styles for Index
+.i-member-profile-item{
+  a{
+    word-wrap: break-word;
+  }
+}
 .i-member-profile-item{
   list-style: none;
 }
@@ -186,9 +191,8 @@
     .i-member-item {
       width: 100%;
     }
-    .i-member-item-inner { display: flex; }
-    .i-member-pic-wrap { width: 40%; }
-    .i-member-profile-data-wrap { width: 60%; }
+    .i-member-pic-wrap { width: 100%; }
+    .i-member-profile-data-wrap { width: 100%; }
   }
 }
 
@@ -494,7 +498,7 @@
     padding-bottom: 1em;
   }
   .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
-    background-color: #91bfea;
+    background-color: $theme-color-second;
   }
   .nav-pills>li>a {
     border-radius: unset;
@@ -537,4 +541,98 @@
   .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
       border: 0;
   }
+}
+// Index 9
+.index-member-9 {
+  .i-annc__page-title{
+    display: none;
+  }
+  @media(min-width:769px){
+    .i-member-profile-list{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .i-member-profile-item.deputy {
+        width: 100%;
+    }
+    .titlesection,.infosection{
+      width: 50%;
+    }
+  }
+  .i-member-pic-wrap{
+    display: none!important;
+  }
+  .member-data-value-1 {
+      color: #0693e3;
+      font-size: 2em;
+  }
+  .member-data-value-name{
+      color: #0693e3;
+      font-size: 2em;
+  }
+  .member-data-title-1,.member-data-title-name {
+    display: none;
+  }
+  .i-member-section {
+    max-width: 31.25em;
+    margin: auto;
+  }
+
+  .i-member-status-title {
+    @extend .unity-title;
+  }
+
+  .i-member-item-inner {
+    background: none;
+    padding: 1.5em 1rem;
+    margin-bottom: 1em;
+    border-bottom: 2px solid #333;
+    @media(max-width:768px){
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+  .i-member-profile-data-wrap{
+    @media(max-width:768px){
+      width: 100%;
+    }
+  }
+
+  .i-member-pic-wrap {
+    height: auto;
+    margin-bottom: 1em;
+    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
+    height: 10em;
+    width: 10em;
+    padding: 0;
+  }
+
+  .i-member-pic {
+    width: 100%;
+    padding: 0;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .i-member-profile-list {
+    @include list-reset;
+    color: #737f85;
+  }
+
+  .i-member-profile-item {
+    margin-bottom: 0.5em;
+    font-size: $font-13;
+  }
+
+  // RWD
+  @media screen and (min-width: $screen-sm) {
+    .i-member-section {
+      max-width: 100%;
+    }
+
+    .i-member-item-inner {
+
+    }
+  }
 }

assets/stylesheets/template/modules/menu.scss

@@ -78,18 +78,31 @@
 
 //固定選單
 .navFixed {
+    @media (max-width: 768px) {
+      .navbar-header{
+        position: relative;
+      }
+      .site-logo {
+          height: 35px !important;
+          -webkit-transition: all .3s ease;
+          -moz-transition: all .3s ease;
+          -ms-transition: all .3s ease;
+          -o-transition: all .3s ease;
+          transition: all .3s ease;
+      }
+    }
   .header-nav{
     display: none!important;
-    -webkit-transition: all .3s ease;
+  }
+      -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
-  }
+  padding: 0.5em 0;
   z-index: 10;
   position: fixed;
   left: 0;
-  top:0;
   margin-top: 0;
   min-width: 100%;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
@@ -196,7 +209,6 @@
       @media (min-width:769px)and(max-width: 1024px){
         display: flex;
         flex-wrap: wrap;
-        justify-content:space-between;
         padding: 0;
         width: 100%;
       }
@@ -206,7 +218,7 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-end;
-      width: 65%;
+      width: 76%;
       }
     .has-dropdown.level-1.active {
       .modules-menu-level-1 {
@@ -392,6 +404,9 @@
     padding:0;
     left: auto;
     @media(min-width:769px){
+        // max-height: 70vh;
+        // overflow-y: auto;
+        // overflow-x: hidden;
       min-width: 200px;
       width:max-content;
       box-shadow: 2px 2px 5px #00000033;
@@ -405,7 +420,7 @@
 
     & > li {
       position: relative;
-      padding: 1em;
+      padding: 0.8em;
       // & + li {
       //   border-top: 0.0625em solid lighten($theme-gray, 5%);
       // }
@@ -416,10 +431,14 @@
         font-weight: 600;
         color: #686868;
         font-size: 1.1em;
+        @media(max-width: 768px){
+        color: #686868;
+        }
       }
 
       &:hover {
 /*        background-color: $theme-color-second;*/
+        background: #e5e5e5;
         @media(max-width: 769px){
           a,i {
            color:$theme-color-second;

assets/stylesheets/template/modules/universal-table.scss

@@ -2,6 +2,9 @@
 
 @import "../initial";
 
+.universal-form-inline{
+  position: relative;
+}
 .universal-table-index tbody{
   width:100% ;
 }
@@ -34,7 +37,7 @@
   width: 100%;
   position: relative;
   @media(max-width:$screen-xs){
-    margin-top: 3em;
+
   }
 }
 .universal-btn{
@@ -78,6 +81,7 @@
       display: flex;
       flex-wrap: wrap;
       width: 100%;
+      border:0!important;
       tr{
         display: flex;
         flex-wrap: wrap;
@@ -100,12 +104,15 @@
   cursor: pointer;
   padding: 0;
   position: absolute;
-  right:1em;
+  right:0;
   z-index:2;
   @media(max-width: $screen-xs){
     margin-top: 0.5em;
     right:0;
-    top:-4em;
+    top:0;
+    position: relative;
+    float: right;
+    margin-bottom: 0.5em;
   }
   .searchbtn2, .universal-btn {
     line-height: 2em;
@@ -209,6 +216,8 @@
   margin-top: 1em;
   z-index: 1;
   position: relative;
+  width: 100%;
+  clear: both;
       .fa-search{
         color: #333!important;
       }
@@ -367,4 +376,284 @@
     transform: scale(1.1);
     }
   }
-}
+}
+
+img.image-preview {
+    max-width: 100px;
+}
+.universal-form-inline5{
+  .tdken{
+    @media(min-width:820px){
+      width: calc(50% - 1em) !important;
+    }
+    @media(min-width:768px)and(max-width:820px){
+      width: calc(50% - 1em) !important;
+    }
+    &:hover{
+      -webkit-transform: translateY(-6px);
+      -ms-transform: translateY(-6px);
+      transform: translateY(-6px);
+      box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
+      -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
+      -webkit-transition: all .3sease;
+      -moz-transition: all .3s ease;
+      -ms-transition: all .3s ease;
+      -o-transition: all .3s ease;
+      transition: all .3sease;
+      .fa-thumbtack{
+        transform: scale(1.1) rotate(45deg);
+      }
+      i{
+        color:$theme-color-second;
+        transform: scale(1.1) ;
+        -webkit-transition: all .3sease;
+        -moz-transition: all .3s ease;
+        -ms-transition: all .3s ease;
+        -o-transition: all .3s ease;
+        transition: all .3sease;
+      }
+    }
+  }
+  .universal-table-index{
+    border:0;
+  }
+  .theadsearch{
+    display: none;
+  }
+  .universal-th-text{
+    padding: 0;
+  }
+  .image-preview {
+    width: 80px;
+  }
+  td,th{
+    width: 100%!important;
+  }
+  .kentbody{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  tbody{
+    // display: flex;
+    // flex-wrap: wrap;
+    justify-content: center;
+    tr{
+      padding:18px 20px 25px 20px;
+      background-color: #fff;
+      box-shadow: 0 2px 8px 0px #999;
+      border-radius:30px;
+      margin: 0.5em;
+      position: relative;
+      min-height: 12em;
+    }
+    td{
+      border:0!important;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding-bottom: 0 !important;
+      color: #0757A0;
+      font-size: 1.4rem;
+      a{
+        color: #2D9349;
+        font-size:medium;
+      }
+      &:nth-child(2){
+        font-size: 1.5rem;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 0.5em;
+      }
+      &:nth-child(5){
+        color: #00F;
+      }
+    }
+  }
+  .fa-thumbtack{
+    transform: rotate(45deg);position: absolute;right: 2em;
+  }
+}
+.universal-form-inline6{
+  .tdken{
+    @media(min-width:820px){
+      width: calc(33.3% - 1em) !important;
+    }
+    @media(min-width:768px)and(max-width:820px){
+      width: calc(50% - 1em) !important;
+    }
+    &:hover{
+      -webkit-transform: translateY(-6px);
+      -ms-transform: translateY(-6px);
+      transform: translateY(-6px);
+      box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
+      -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
+      -webkit-transition: all .3sease;
+      -moz-transition: all .3s ease;
+      -ms-transition: all .3s ease;
+      -o-transition: all .3s ease;
+      transition: all .3sease;
+      .fa-thumbtack{
+        transform: scale(1.1) rotate(45deg);
+      }
+      i{
+        color:$theme-color-second;
+        transform: scale(1.1) ;
+        -webkit-transition: all .3sease;
+        -moz-transition: all .3s ease;
+        -ms-transition: all .3s ease;
+        -o-transition: all .3s ease;
+        transition: all .3sease;
+      }
+    }
+  }
+  .universal-table-index{
+    border:0;
+  }
+  .theadsearch{
+    display: none;
+  }
+  .universal-th-text{
+    padding: 0;
+  }
+  .image-preview {
+    width: 80px;
+  }
+  td,th{
+    width: 100%!important;
+  }
+  .kentbody{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  tbody{
+    // display: flex;
+    // flex-wrap: wrap;
+    justify-content: center;
+    tr{
+      padding:18px 20px 25px 20px;
+      background-color: #fff;
+      box-shadow: 0 2px 8px 0px #999;
+      border-radius:30px;
+      margin: 0.5em;
+      position: relative;
+      min-height: 12em;
+    }
+    td{
+      border:0!important;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding-bottom: 0 !important;
+      color: #0757A0;
+      font-size: 1.4rem;
+      a{
+        color: #2D9349;
+        font-size:medium;
+      }
+      &:nth-child(2){
+        font-size: 1.5rem;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 0.5em;
+      }
+      &:nth-child(5){
+        color: #00F;
+      }
+    }
+  }
+  .fa-thumbtack{
+    transform: rotate(45deg);position: absolute;right: 2em;
+  }
+}
+
+// .universal-table-show {
+
+//   border-collapse: collapse;
+//   .table-content{
+//     table{
+//       border: 0;
+//     }
+//     tbody > tr:nth-of-type(even) {
+//         background-color: #cccccc30;
+//     }
+//     td{
+//       border-bottom: 1px #333 solid;
+//     }
+//   }
+//   td{
+//     border-top:0!important;
+//     min-width: 7em;
+//         border-left: 0 !important;
+//     border-right: 0 !important;
+//   }
+//   .universal-table-show.table td{
+//     padding: 15px 18px;
+//   }
+//   tbody>tr:nth-of-type(odd){
+//     background-color:transparent;
+//   }
+//   .table-content{
+//     min-width: 100%!important;
+//   }
+//   .universal-table-tr{
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     width: 100%;
+//     &:first-child{
+//       display:none;
+//     }
+//     &:nth-child(2){
+//       .table-title{
+//         display: none;
+//       }
+//       .table-content{
+//         padding-top: 1em;
+//         width: 100%;
+//         color: #173463;
+//         font-size: 2.2rem;
+//         font-weight: 900;
+//         text-align: center;
+//         padding-bottom: 0;
+//       }
+//     }
+//     &:nth-child(3){
+//       .table-title{
+//         display: none;
+//       }
+//       .table-content{
+//         width: 100%;
+//         color: #e66b28;
+//         font-size: 2.2rem;
+//         font-weight: 900;
+//         text-align: center;
+//         padding-top: 0;
+//       }
+//     }
+//     &:nth-child(4){
+//       .table-title{
+//         display: none;
+//       }
+//       .table-content{
+//         margin-bottom: 1em;
+//       }
+//     }
+//     &:nth-child(5){
+//       .table-title{
+//         display: none;
+//       }
+//     }
+    
+//   }
+//   .table-content{
+//     background-color: #fff;
+//     padding: 0;
+//   }
+//   .table-title{
+//    width: 100%;
+//         padding: 30px 0;
+//         color: #2D9349;
+//         font-size: 1.8rem;
+//         font-weight: 600;
+//   }
+// }

assets/stylesheets/template/modules/video.scss

@@ -15,6 +15,9 @@
     display: block!important;
   }
 }
+.w-video_data {
+    z-index: 1;
+}
 .Video__Player{
   display: flex;
       -webkit-box-align: center;
@@ -29,8 +32,7 @@
         padding-top: 0px;
         border-radius: 50%;
         border: 0px;
-        background-color: $theme-color-second;
-        background: url(/assets/btn-play.svg) no-repeat;
+        background: url(/assets/youtube.png) no-repeat;
         background-size: 100%;
         background-repeat: no-repeat;
         background-position: center center;
@@ -437,7 +439,7 @@
     text-overflow: ellipsis;
     max-height: 4.5em;
     line-height: 1.5em; 
-    min-height: 4.5em;
+    // min-height: 4.5em;
   }
   .video_info{
       margin:0.5em 0;
@@ -513,7 +515,7 @@
             border-radius: 50%;
             border: 0px;
             background-color: $theme-color-second;
-            background: url(/assets/btn-play.svg) no-repeat;
+            background: url(/assets/youtube.png) no-repeat;
             background-size: 100%;
             background-repeat: no-repeat;
             background-position: center center;
@@ -620,6 +622,89 @@
     white-space: normal;
   }
 }
+.video_data-widget-6{
+  .video_info{
+    display: none;
+  }
+  .videohover{
+    position: absolute;
+    transition: 0.3s;
+    z-index: 2;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    right: 0;
+    background-image: linear-gradient(180deg, transparent 0, #00000063 90%, #000);
+  }
+  .video_data{
+    padding: 0;
+  }
+  .video_snapshot{
+    transform: none!important;
+    box-shadow: none!important;
+  }
+  @media(max-width:768px){
+      margin-bottom: 3em;
+  }
+  .btnwrapper{
+    @media(max-width:768px)and(min-width:$screen-xs){
+      top:100%!important;
+      width: 14%!important;
+      left: 44%!important;
+    }
+    @media(max-width:$screen-xs){
+      top: 100%!important;
+      width: 24% !important;
+      left: 38% !important;
+    }
+  }
+  .video_data_wrap{
+    @media(min-width:$screen-xs){
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  // .video_data{
+  //   @media(max-width:821px)and(min-width:$screen-xs){
+  //     width: 48vw !important;
+  //     float: none;
+  //   }
+  //   @media(max-width:$screen-xs){
+  //     width: 92.5vw !important;
+  //     margin-left: 0 !important;
+  //     margin-right: 1em !important;
+  //     float: none;
+  //   }
+  // }
+  .video_desc{
+    display: -webkit-box;
+    -webkit-line-clamp: 3; 
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 4.5em;
+    line-height: 1.5em; 
+    // min-height: 4.5em;
+  }
+  .video_info{
+      margin:0.5em 0;
+      position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    right: 0;
+    background-image: linear-gradient(180deg, transparent 0, #00000063 90%, #000);
+  }
+  .video_link{
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
 .video_detail{
   @media(max-width:820px){
     .video_box_wrap{
@@ -806,18 +891,18 @@
     height:10em;
 
   }
-@media(max-width: 821px)and(min-width: 769px){
-  height: 7.8em;
+  @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:768px)and(min-width:$screen-xs){
+      height: 13.5em;
 
-}
-@media(max-width: $screen-xs){
-    height:13.5em;
-}
+  }
+  @media(max-width: $screen-xs){
+      height:13.5em;
+  }
 }
 .video_linkwrapper5{
 

assets/stylesheets/template/modules/web_resource.scss

@@ -34,7 +34,7 @@
 .widget-content{
   list-style: none;
   @media(min-width: $screen-xs)and(max-width: 768px){
-    width: 50%!important;
+    // width: 50%!important;
     margin:0 auto;
   }
 }
@@ -94,6 +94,43 @@
     }
   }
   &.widget2{
+    .widget-content{
+      @media(min-width:769px){
+        width: 25%;
+      }
+      @media(max-width:768px){
+            width: 50%;
+      }
+      &:hover{
+        .link-img-wrap img{
+          transform:scale(0.9,0.9);
+              transition: all 0.3s;
+        }
+      }
+    }
+    .widget-title {
+      @extend .unity-title;
+    }
+    .link-img-wrap{
+      @media(min-width:769px){
+        height: 10em;
+        img{
+          height: auto;
+        }
+      }
+    width: 50%;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    }
+      .list-unstyled{
+        display: flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+      }
+  }
+  &.widget10{
     .link-img-wrap{
       height: 14em;
     }
@@ -312,6 +349,52 @@
       }
     }
   }
+  &.widget11{
+    .widget-content-title {
+      padding-top: 0.5em;
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      color: #fff;
+  }
+    .link-img-wrap{
+      // height: 14em;
+      filter: brightness(0.8);
+    }
+    .widget-content{
+      text-align: center;
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      &:hover{
+        img{
+          transform: scale(1.1) !important;
+          -webkit-transition: .3s ease-out;
+          -moz-transition: .3s ease-out;
+          -ms-transition: .3s ease-out;
+          -o-transition: .3s ease-out;
+          transition: .3s ease-out;
+        }
+      }
+      @media(min-width:769px){
+      width: calc(100% / 4 - 1em);
+      padding: 0;
+      }
+    }
+    .list-unstyled{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow: hidden;
+    gap: 1em;
+      }
+  }
 }
 
 // Link INDEX

assets/stylesheets/template/template.scss

@@ -121,6 +121,7 @@ ul.tab_nav {
     width: 100%;
 
     li {
+      font-size: 1em;
       list-style: none;
       position: relative;
       padding: 0.5em 1em;
@@ -693,6 +694,40 @@ table.dataTable>tbody>tr.child{
   opacity: 1;
   transform: translatez(0) scale(1);
 }
+.fadeInUp {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeInUpAnim 0.5s forwards;
+}
+
+@keyframes fadeInUpAnim {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+.fadeInDown {
+  opacity: 0;
+  transform: translateY(-20px);
+  animation: fadeInDownAnim 0.5s forwards;
+}
+
+@keyframes fadeInDownAnim {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 //研討會
 .seminar-index,.survey-index,.application_form-index{
   th{

home/header.html.erb

@@ -18,11 +18,12 @@
   <div class="cover"></div>
 </div>
 <header class="navbar layout-header no-print" role="navigation">
-  <div class="header-nav container no-print">
+
+  <div class="outdropdowns kenjohn">
+    <div class="header-nav container no-print">
     <a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
       {{header-data}}
   </div>
-  <div class="outdropdowns kenjohn">
   <div class="container dropdowns">
     <div class="navbar-header">
         <a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>

home/index.html.erb

@@ -2,8 +2,6 @@
 <html lang="<%= I18n.locale.to_s %>" class="orbit">
 <head>
   <%= render_partial("head") %>
-
-  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 </head>
 <body class="page-home">
   <%= render_orbit_bar %>
@@ -16,13 +14,14 @@
   <div class="layout-content2 topcontent">
     <div class=" single-child-datapp onesection" id="onesection" data-pp="1999"></div>
   </div>
-  <div class="video-banner" data-pp="301" ></div>
+  
   <div class="verticalhome">
     <div class="layout-content topcontent">
       <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
 
       <div class="contentwrap">
         <div class="container">
+          <div class="video-banner" data-pp="301" ></div>
           <section class="body-banner" data-pp="0"></section>
           <div class="row ">
             <section class="layout-content-box col-sm-4" data-pp="1"></section>

home/page.html.erb

@@ -2,7 +2,6 @@
 <html lang="<%= I18n.locale.to_s %>" class="orbit">
 <head>
   <%= render_partial("head") %>
-  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 </head>
 <body class="internal-page">
   <%= render_orbit_bar %>
@@ -36,11 +35,11 @@
         <div class="row container membercontainer">
           <section class="extrabox layout-content-box left-column col-sm-9">
             <div class="extra" data-pp="600"></div>
+            <div class="extra sitemenu-wrap2" data-pp="700"></div>
             <main id="main-content" class="main-content" data-content="true">
               <%= yield %>
             </main>
             <%= render_every_page_sharer %>
-            <div class="extra sitemenu-wrap2" data-pp="700"></div>
             <div class="extra sitemenu-wrap3" data-pp="7000"></div>
           </section>
           <aside class="layout-content-box aside right-column col-sm-3" data-pp="906"></aside>

modules/ad_banner/_ad_banner_widget8_video.html.erb

@@ -7,11 +7,11 @@
     data-cycle-carousel-rwd-json='{768: 1}'
     data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
     data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
-    data-cycle-auto-height="{{base_image}}"
     data-cycle-speed="{{speed}}"
     data-cycle-timeout="{{timeout}}"
     data-cycle-fx="carousel"
     data-cycle-carousel-visible="3"
+    data-cycle-carousel-advance="1"
     data-cycle-carousel-fluid="true"
     data-pager=".banner_caption_{{subpart-id}}"
     data-pager-template="<li><button title='pager' aria-label='Pager'></button></li>"
@@ -309,7 +309,6 @@
                       if(overlay_in_slide.length != 0){
                         height += overlay_in_slide.outerHeight(true);
                       }
-                      banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
                       var init_key = find_out_yt_event_relation_key(yt_player, false);
                       if(init_key){
                         delete yt_player[init_key].onStateChange;
@@ -332,7 +331,6 @@
                         event_dict[relation_key].onStateChange = [];
                         event_dict[count_key] = event_dict[array_key].length;
                         yt_player.addEventListener('onStateChange',onPlayerStateChange);
-                        banner_wrap.trigger('resize');
                       }else{
                         console.log("YT player changes its variables!")
                       }
@@ -391,10 +389,6 @@
         }
       }
     })
-    /*
-    var height = opts.slides.filter('.active').height() || opts.slides.height();
-    banner_wrap.height(height)*/
-    banner_wrap.css("padding-bottom","");
     {{extra_document_ready_script}}
     $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
@@ -406,15 +400,33 @@
       $(this).addClass('active');
       $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
     });
-    $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
-      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
-    })
-    $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
-      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
-    })
-  })
+  });
+
+
+
+
+
+  
 </script>
 <style type="text/css">
+.ba-banner-widget-8{
+  height: 400px!important;
+  .w-ba-banner__wrap {
+    height: 400px!important;
+    overflow: hidden;
+    position:relative;
+  }
+  .w-ba-banner__wrap {
+    transform: translate3d(0,0,0);
+  }
+
+  .w-ba-banner__slide {
+    backface-visibility: hidden;
+    will-change: transform;
+  }
+}
+
+
   .jarallax-video-audio, .jarallax-video-control-play{
     z-index: 201;
     font-size: 2em;

modules/announcement/_annc_widget14.html.erb

@@ -3,10 +3,10 @@
     <span>{{widget-title}}</span>
   </h3>
   <div class="w-annc__inner row">
-    <div class="w-annc__img-wrap col-sm-12 bullseye">
+    <div class="w-annc__img-wrap col-sm-4 bullseye">
       <img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
     </div>
-    <ul class="w-annc__list  col-sm-12" data-level="0" data-list="announcements">
+    <ul class="w-annc__list  col-sm-8" data-level="0" data-list="announcements">
       <li class="w-annc__item">
         <div class="w-annc__content  row">
           <h4 class="w-annc__entry-title  col-xs-9">

modules/announcement/_annc_widget15.html.erb

@@ -25,157 +25,78 @@
     data-cycle-prev="#prev-{{subpart-id}}"
     data-cycle-slides=".w-annc__item" >
     <li class="w-annc__item " >
-    <div class="w-annc__img-wrap bullseye" style="position:relative">
-	<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
-      <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-      <div class="transitionfade"></div>
-    </a>
-    </div>
-    <div class="w-annc__content-wrap">
-      <div class="w-annc__meta">
-        <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-          <span class="w-annc__status label {{status-class}}">{{status}}</span>
-        </span>
-        <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa-regular fa-calendar"></i>
-          <span class="w-annc__postdate">{{postdate}}</span>
-        </span>
-        <span class="w-annc__category-wrap">
-          <i class="fa-solid fa-list"></i>
-          <span class="w-annc__category">{{category}}</span>
-          </span>
+      <div class="w-annc__item_inner">
+        <div class="w-annc__img-wrap bullseye" style="position:relative">
+          <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+          <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+          <div class="transitionfade"></div>
+          </a>
+        </div>
+        <div class="w-annc__content-wrap">
+          <div class="w-annc__meta">
+            <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+              <span class="w-annc__status label {{status-class}}">{{status}}</span>
+            </span>
+            <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+              <i class="fa-regular fa-calendar"></i>
+              <span class="w-annc__postdate">{{postdate}}</span>
+            </span>
+            <span class="w-annc__category-wrap">
+              <i class="fa-solid fa-list"></i>
+              <span class="w-annc__category">{{category}}</span>
+              </span>
+          </div>
+          <h4 class="w-annc__entry-title">
+            <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+          </h4>
+            <p class="w-annc__subtitle">{{subtitle}}</p>
+        </div>
       </div>
-      <h4 class="w-annc__entry-title">
-        <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-      </h4>
-        <p class="w-annc__subtitle">{{subtitle}}</p>
-    </div>
     </li>
   </ul>
 </div>
 <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
-<!-- <script>
-	function combineul_{{subpart-id}}(){
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
-				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
-			var ullength = $(v).find('ul.w-annc__list').length;
-			for(var i = 1;i < ullength;i++)
-				$(v).find('ul.w-annc__list').eq(-1).remove();
-		})
-	};
-	var num;
-	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-	function reorganize_{{subpart-id}}(num){
-		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
-		var currentul = uls.findIndex(function(v){
-			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
-		})
-		if(currentul == -1)
-			currentul = 0;
-		var li_active_idx = 0;
-		if(currentul != 0)
-			li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
-		combineul_{{subpart-id}}();
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			var lilength = $(v).find('li.w-annc__item').length;
-			var ul_length = Math.ceil(lilength/num);
-			for(var ii=1;ii< ul_length;ii++){
-				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
-				clone_ul.empty();
-				clone_ul.removeClass("active");
-				clone_ul.css("display","");
-				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
-				var lihtml="";
-				if(ii != (ul_length-1)){
-					for(var j=0;j<num;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				}else{
-					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				};
-				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
-			}
-			if(ul_length != 1 )
-				for(var i=0;i< lilength -num ; i++)
-					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
-		})
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
-		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
-	  	$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
-	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
-		active_ul.addClass("active");
-		active_ul.removeClass("hidden_item");
-		active_ul.css("display","");
-	};
-	$(window).resize(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	})
-	$(document).ready(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	var flag=false;
-	$('[data-subpart-id=\"{{subpart-id}}\"] .btn-left').click(function(){
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul - 1 < 0)
-				currentul += ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul-1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$("body").css("overflow-x","hidden");
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
-		};
-	});
-	$('[data-subpart-id=\"{{subpart-id}}\"] .btn-right').click(function(){
-		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul + 1 > ul_length - 1)
-				currentul -= ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul+1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$("body").css("overflow-x","hidden");
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
-		};
-	});
-	});
-</script> -->
+<script>
+$(document).ready(function () {
+
+  var $widget = $('.widget-announcement-15');
+  var $slideshow = $widget.find('.w-annc__list');
+
+  function initAnnouncementCarousel() {
+
+    var visibleCount = $(window).width() < 768 ? 1 : 3;
+
+    // 如果已初始化 → 先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 重新初始化（只針對 widget-announcement-15）
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 0,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .w-annc__item',
+
+      // 只抓這個 widget 裡的按鈕
+      prev: $widget.find('.btn-left'),
+      next: $widget.find('.btn-right')
+    });
+  }
+
+  // 初始執行
+  initAnnouncementCarousel();
+
+  // resize 時重新初始化（加 debounce 避免狂 reinit）
+  var resizeTimer;
+  $(window).on('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      initAnnouncementCarousel();
+    }, 200);
+  });
+
+});
+</script>

modules/announcement/_annc_widget21.html.erb

@@ -25,31 +25,77 @@
     data-cycle-prev="#prev-{{subpart-id}}"
     data-cycle-slides=".w-annc__item" >
       <li class="w-annc__item">
-        <div class="w-annc__img-wrap bullseye" >
-        <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
-          <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-          <div class="transitionfade"></div>
-          </a>
+      	<div class="w-annc__item_inner">
+          <div class="w-annc__img-wrap bullseye" >
+            <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+            <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+            <div class="transitionfade"></div>
+            </a>
+          </div>
+          <div class="w-annc__content-wrap card">
+            <div class="w-annc__meta">
+              <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+                <span class="w-annc__status label {{status-class}}">{{status}}</span>
+              </span>
+              <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+                <i class="fa-regular fa-calendar"></i>
+                <span class="w-annc__postdate">{{postdate}}</span>
+              </span>
+              <span class="w-annc__category-wrap">
+                <i class="fa-solid fa-list"></i>
+                <span class="w-annc__category">{{category}}</span>
+              </span>
+            </div>
+            <h4 class="w-annc__entry-title">
+              <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+            </h4>
+            <p class="w-annc__subtitle">{{subtitle}}</p>
+          </div>
         </div>
-      <div class="w-annc__content-wrap card">
-        <div class="w-annc__meta">
-          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="w-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa-regular fa-calendar"></i>
-            <span class="w-annc__postdate">{{postdate}}</span>
-          </span>
-          <span class="w-annc__category-wrap">
-            <i class="fa-solid fa-list"></i>
-            <span class="w-annc__category">{{category}}</span>
-          </span>
-        </div>
-        <h4 class="w-annc__entry-title">
-          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </h4>
-        <p class="w-annc__subtitle">{{subtitle}}</p>
-      </div>
       </li>
     </ul>
 </div>
+<script>
+$(document).ready(function () {
+
+  var $widget = $('.widget-announcement-21');
+  var $slideshow = $widget.find('.w-annc__list');
+
+  function initAnnouncementCarousel() {
+
+    var visibleCount = $(window).width() < 768 ? 1 : 3;
+
+    // 如果已初始化 → 先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 重新初始化（只針對 widget-announcement-21）
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 0,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .w-annc__item',
+
+      // 只抓這個 widget 裡的按鈕
+      prev: $widget.find('.btn-left'),
+      next: $widget.find('.btn-right')
+    });
+  }
+
+  // 初始執行
+  initAnnouncementCarousel();
+
+  // resize 時重新初始化（加 debounce 避免狂 reinit）
+  var resizeTimer;
+  $(window).on('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      initAnnouncementCarousel();
+    }, 200);
+  });
+
+});
+</script>

modules/announcement/_annc_widget25.html.erb

@@ -27,31 +27,77 @@
     data-cycle-prev="#prev-{{subpart-id}}"
     data-cycle-slides=".w-annc__item" >
       <li class="w-annc__item">
-        <div class="w-annc__img-wrap bullseye" >
-        <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
-          <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-          <div class="transitionfade"></div>
-          </a>
+      	<div class="w-annc__item_inner">
+          <div class="w-annc__img-wrap bullseye" >
+            <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+            <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+            <div class="transitionfade"></div>
+            </a>
+          </div>
+          <div class="w-annc__content-wrap card">
+            <div class="w-annc__meta">
+              <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+                <span class="w-annc__status label {{status-class}}">{{status}}</span>
+              </span>
+              <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+                <i class="fa-regular fa-calendar"></i>
+                <span class="w-annc__postdate">{{postdate}}</span>
+              </span>
+              <span class="w-annc__category-wrap">
+                <i class="fa-solid fa-list"></i>
+                <span class="w-annc__category">{{category}}</span>
+              </span>
+            </div>
+            <h4 class="w-annc__entry-title">
+              <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+            </h4>
+            <p class="w-annc__subtitle">{{subtitle}}</p>
+          </div>
         </div>
-      <div class="w-annc__content-wrap card">
-        <div class="w-annc__meta">
-          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="w-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa-regular fa-calendar"></i>
-            <span class="w-annc__postdate">{{postdate}}</span>
-          </span>
-          <span class="w-annc__category-wrap">
-            <i class="fa-solid fa-list"></i>
-            <span class="w-annc__category">{{category}}</span>
-          </span>
-        </div>
-        <h4 class="w-annc__entry-title">
-          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </h4>
-        <p class="w-annc__subtitle">{{subtitle}}</p>
-      </div>
       </li>
     </ul>
 </div>
+<script>
+$(document).ready(function () {
+
+  var $widget = $('.widget-announcement-25');
+  var $slideshow = $widget.find('.w-annc__list');
+
+  function initAnnouncementCarousel() {
+
+    var visibleCount = $(window).width() < 768 ? 1 : 3;
+
+    // 如果已初始化 → 先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 重新初始化（只針對 widget-announcement-25）
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 0,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .w-annc__item',
+
+      // 只抓這個 widget 裡的按鈕
+      prev: $widget.find('.btn-left'),
+      next: $widget.find('.btn-right')
+    });
+  }
+
+  // 初始執行
+  initAnnouncementCarousel();
+
+  // resize 時重新初始化（加 debounce 避免狂 reinit）
+  var resizeTimer;
+  $(window).on('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      initAnnouncementCarousel();
+    }, 200);
+  });
+
+});
+</script>

modules/announcement/_annc_widget4.html.erb

@@ -7,6 +7,7 @@
   </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item  col-md-4">
+	<div class="w-annc__item_inner">
       <div class="w-annc__img-wrap bullseye" style="position:relative">
 	  <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
         <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
@@ -32,80 +33,7 @@
       </h4>
       <p class="w-annc__subtitle"><a  href="{{link_to_show}}">{{subtitle}}</a></p>
     </div>
+	</div>
     </li>
   </ul>
 </div>
-<style type="text/css">
-	[data-subpart-id="{{subpart-id}}"] .bullseye{
-		overflow: hidden;
-	}
-</style>
-<script>
-	function combineul_{{subpart-id}}(){
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
-				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
-			var ullength = $(v).find('ul.w-annc__list').length;
-			for(var i = 1;i < ullength;i++)
-				$(v).find('ul.w-annc__list').eq(-1).remove();
-		})
-	};
-	var num;
-	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-	function reorganize_{{subpart-id}}(num){
-		combineul_{{subpart-id}}();
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			var lilength = $(v).find('li.w-annc__item').length;
-			var ul_length = Math.ceil(lilength/num);
-			for(var ii=1;ii< ul_length;ii++){
-				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
-				clone_ul.empty();
-				clone_ul.removeClass("active");
-				clone_ul.css("display","");
-				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
-				var lihtml="";
-				if(ii != (ul_length-1)){
-					for(var j=0;j<num;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				}else{
-					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				};
-				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
-			}
-			if(ul_length != 1 )
-				for(var i=0;i< lilength -num ; i++)
-					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
-		})
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/20+'em)'); //20px=>li的margin
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
-	};
-	$(window).resize(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	})
-	$(document).ready(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	})
-</script>

modules/announcement/_annc_widget5.html.erb

@@ -4,7 +4,7 @@
   </h3>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item">
-    <div class="w-annc__content-wrap">
+    <div class="w-annc__content-wrap2">
       <div class="w-annc__meta">
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
             <i class="fa-regular fa-calendar"></i>

modules/archive/_archive_widget3.html.erb

@@ -10,7 +10,7 @@
               <ul class="w-archive__list level-4" data-list="files" data-level="2">
                 <li class="w-archive__item level-4">
                   <a href="{{file-url}}" class="widget-archive-files-item w-archive__link" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                  <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                  <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
                 </li>
               </ul>
             </li>

modules/archive/archive_index1.html.erb

@@ -1,5 +1,7 @@
 <div class="i-archive  index-archive-1">
-  <h3 class="i-archive-title">{{page-title}}</h3>
+    <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
   <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
     <li class="i-archive__item">
       <h4 class="i-archive__category-title">{{category-title}}</h4>
@@ -16,7 +18,7 @@
             <dd class="i-archive__file-wrap">
               <i class="fa-solid fa-file"></i>
               <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-              <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
             </dd>
           </dl>
         </div>
@@ -24,3 +26,19 @@
     </li>
   </ul>
 </div>
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+  .i-archive__item-wrap {
+      background: #eaeef0;
+  }
+  .index-archive-1 .i-archive__file-list{
+        display: flex;
+    flex-wrap: wrap;
+  }
+</style>

modules/archive/archive_index10.html.erb

@@ -16,10 +16,11 @@
           <tr class="archive-items">
             <td class="i-archive__serial_number col-sm-2">{{idx}}</td>
             <td class="head col-sm-7">
-               {{archive-title}}
+               <span class="i-archive__archive-title">{{archive-title}}</span>
                <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
                <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-             </span>
+               </span>
+               <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
             </td>
             <td class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
               <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
@@ -30,3 +31,23 @@
     </table>
   </div>
 </div>
+<style>
+.index-archive-10{
+  .i-archive__archive-title {
+    font-weight: bold;
+  }
+  .thead{
+  @media(max-width:768px){
+    display:none;
+  }
+  }
+  .table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+    border:0;
+  }
+  .archive-items:nth-child(odd) {
+      background-color: #F3F3F3;
+  }
+} 
+
+
+</style>

modules/archive/archive_index11.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-9">
+<div class="i-archive index-archive-11">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
@@ -32,3 +32,23 @@
     </table>
   </div>
 </div>
+<style>
+.index-archive-11{
+  .i-archive__archive-title {
+    font-weight: bold;
+  }
+  .thead{
+  @media(max-width:768px){
+    display:none;
+  }
+  }
+  .table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+    border:0;
+  }
+  .archive-items:nth-child(odd) {
+      background-color: #F3F3F3;
+  }
+} 
+
+
+</style>

modules/archive/archive_index12.html.erb

@@ -1,44 +1,69 @@
-<div class="i-archive index-archive-2 index-archive-12">
+<div class="i-archive index-archive-12">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
   <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
     <div class="panel panel-default">
-      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+      <div class="panel-heading">
         <h4 class="panel-title">
-          <i class="fa fa-file-text" aria-hidden="true"></i>
-          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
-            {{category-title}}
-            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
+             <i class="fa fa-th-list"></i>
+             {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
-
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list">
-              <sapn class="i-archive-item-title">{{archive-title}}</span>
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-item-list col-sm-12">
+              <span class="i-archive-item-title">{{archive-title}}</span>
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list" data-list="files"  data-level="2">
+              <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+            </div>
+            <div class="i-archive-files-list col-sm-12" data-list="files"  data-level="2">
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
         {{link_to_edit}}
   </div>
   <style>
-    .index-archive-12 dt.i-archive-item-list{
-      float: none;
-      width: auto;
+  .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+  }
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
+      }
     }
   </style>
-</div>
+</div>

modules/archive/archive_index13.html.erb

@@ -11,20 +11,20 @@
     <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
       <ul class="archives-ul" data-list="archives" data-level="1">
         <li class="archive-li">
-          <p>
-            <span data-list="statuses" data-level="2">
-              <span class="label status {{status-class}}">{{status}}</span>
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
-            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
-              {{archive-title}}
-            </a>
-            <span class="i-archive-files-list" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
-              </a>
-            </span>
-          </p>
-          <div class="archive-description">{{description}}</div>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
+        </div>
         </li>
       </ul>
       {{link_to_edit}}
@@ -32,6 +32,33 @@
   </div>
 </div>
 <style>
+.index-archive-13{
+  .i-archive__status-wrap {
+    display: block;
+    width: 100%;
+  }
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  .archives-ul {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+  }
+} 
+.i-archive__file-wrap {
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0.5em 0 0;
+    border-radius: 0.125em;
+}
+
   .i-archive.index-archive-13 .i-archive-files-item{
     white-space: inherit;
   }

modules/archive/archive_index14.html.erb

@@ -6,18 +6,17 @@
     <div class="panel panel-default default-collapse" data-list="archives" data-level="1">
       <div class="panel-heading" style="padding: 0.625em 0.9375em;">
         <h4 class="panel-title">
-          <i class="fa fa-file-text" aria-hidden="true"></i>
           <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
-            {{archive-title}}
+           <i class="fa fa-file-text" aria-hidden="true"></i> {{archive-title}}
             <i class="fa fa-chevron-down" aria-hidden="true"></i>
           </a>
-
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
           <ul class="i-archive-files-list" data-list="files"  data-level="2">
             <li>
+              <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               <span class="label label-primary {{file-type}}">{{file-type}}</span>
             </li>
@@ -28,6 +27,17 @@
         {{link_to_edit}}
   </div>
   <style>
+  .fa-file-text:before {
+    content: "\f15c"!important;
+  }
+    .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+    width: 100%;
+  }
     .index-archive-12 dt.i-archive-item-list{
       float: none;
       width: auto;

modules/archive/archive_index15.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-13 index-archive-15">
+<div class="i-archive index-archive-15">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
@@ -11,20 +11,24 @@
     <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
       <ul class="archives-ul" data-list="archives" data-level="1">
         <li class="archive-li">
-          <p>
-            <span data-list="statuses" data-level="2">
-              <span class="label status {{status-class}}">{{status}}</span>
+        <div class="i-archive__item-wrap">
+          <span class="i-archive__category-item">
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
-            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
-              {{archive-title}}
-            </a>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </span>
             <span class="i-archive-files-list" data-list="files" data-level="2">
+             <i class="fa-solid fa-file"></i>
               <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
-                {{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span>
+                {{file-name}}
+              </a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
+                <span class="label label-primary {{file-type}}">{{file-type}}</span>
               </a>
             </span>
-          </p>
-          <div class="archive-description">{{description}}</div>
+        </div>
         </li>
       </ul>
       {{link_to_edit}}
@@ -32,10 +36,44 @@
   </div>
 </div>
 <style>
-  .index-archive-13 .archives-ul .archive-li{
-    list-style-type: disc;
+.index-archive-15{
+  .archive-li{
+    list-style:none;
   }
-  .index-archive-13 .archive-description{
+  .i-archive__archive-title {
+    width: 100%;
+    display: block;
+    font-weight: bold;
+    font-size: 1.1em;
+  }
+  .i-archive__status-wrap {
+    display: block;
+    width: 100%;
+  }
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    margin-bottom: 20px;
+  }
+  .archives-ul {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+  }
+} 
+.i-archive__file-wrap {
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0.5em 0 0;
+    border-radius: 0.125em;
+}
+
+  .i-archive.index-archive-15 .i-archive-files-item{
+    white-space: inherit;
+  }
+  .index-archive-15 .archive-description{
     color: #9b9b9b;
   }
 </style>

modules/archive/archive_index17.html.erb

@@ -0,0 +1,47 @@
+<div class="i-archive  index-archive-1 index-archive-17">
+    <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
+        </div>
+      </dl>
+    </li>
+  </ul>
+</div>
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+.index-archive-8{
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+  }
+}
+
+</style>

modules/archive/archive_index2.html.erb

@@ -1,7 +1,7 @@
 <div class="i-archive index-archive-2">
-  <h1 class="i-archive-title">
+  <h3 class="i-archive-title">
     <span>{{page-title}}</span>
-  </h1>
+  </h3>
   <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
     <div class="panel panel-default">
       <div class="panel-heading">
@@ -9,34 +9,53 @@
           <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
              <i class="fa fa-th-list"></i>
              {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list col-sm-3">
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-item-list col-sm-3">
               <span class="i-archive-item-title">{{archive-title}}</span>
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
+              <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+            </div>
+            <div class="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
         {{link_to_edit}}
   </div>
   <style>
-    @media (min-width: 769px){
-      .index-archive-2 .dl-horizontal dt.col-sm-3{
-        width: 25%;
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
       }
     }
   </style>

modules/archive/archive_index3.html.erb

@@ -1,5 +1,7 @@
 <div class="i-archive  index-archive-3">
-  <h3 class="i-archive-title">{{page-title}}</h3>
+    <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
   <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
     <li class="i-archive__item">
       <h4 class="i-archive__category-title">{{category-title}}</h4>
@@ -9,15 +11,36 @@
             <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
               <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
           </dt>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
               <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-              <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
             </dd>
           </dl>
         </div>
       </dl>
     </li>
   </ul>
-</div>
+</div>
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+.i-archive__item-wrap {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 1em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom: 0;
+    }
+}
+.i-archive__file-list {
+    margin: 0;
+}
+</style>

modules/archive/archive_index4.html.erb

@@ -7,28 +7,53 @@
       <div class="panel-heading">
         <h4 class="panel-title">
           <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
-            <i class="fa fa-th-list"></i>{{category-title}}
+             <i class="fa fa-th-list"></i>
+             {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list col-sm-5">
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-files-list col-sm-12" data-list="files"  data-level="2">
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list col-sm-7" data-list="files"  data-level="2">
+              <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    {{link_to_edit}}
+        {{link_to_edit}}
   </div>
-</div>
+  <style>
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
+      }
+    }
+  </style>
+</div>

modules/archive/archive_index5.html.erb

@@ -15,10 +15,11 @@
           <div class="archive-items clearfix">
               <div class="date col-sm-2">{{created_at}}</div>
               <div class="head col-sm-7">
-                 {{archive-title}}
+                 <span class="i-archive__archive-title">{{archive-title}}</span>
                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                 <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-               </span>
+                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+                 </span>
+                 <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               </div>
               <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
                 <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
@@ -37,4 +38,22 @@ if( window.location.href.indexOf('/en/') > -1 ) {
   $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
   $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
 }
-</script>
+</script>
+<style>
+.i-archive__archive-title{
+  font-weight:bold;
+}
+.index-archive-5 .archive-items{
+  @media(max-width:768px){
+    padding:1em;
+  }
+}
+.link{margin-right: 0.5em;}
+.txt { background-color: #6dbb73;     margin-right: 0.5em;}
+.xlsx { background-color: #bb6d7f;     margin-right: 0.5em;}
+.pdf { background-color: #3b8347;     margin-right: 0.5em;}
+.docx { background-color: #846dbb;     margin-right: 0.5em;}
+.pptx { background-color: #6d77bb;     margin-right: 0.5em;}
+.jpg { background-color: #bb6d6d;     margin-right: 0.5em;}
+.zip { background-color: #dcb957;     margin-right: 0.5em;}
+</style>

modules/archive/archive_index6.html.erb

@@ -1,46 +1,48 @@
-<div class="i-archive index-archive-6">
-  <h3 class="i-archive-title">
+<div class="i-archive  index-archive-1 index-archive-6">
+    <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <div class="i-items">
-        <div class="thead row">
-          <div class="col-sm-2 date-thead">上傳日期</div>
-          <div class="col-sm-7 title-thead">標題</div>
-          <div class="col-sm-3 file-thead">檔案下載</div>
-          </div>
-        <div class="tbody">
-          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
-          <div class="archive-items clearfix">
-              <div class="date col-sm-2">{{created_at}}</div>
-              <div class="head col-sm-7">
-                <dl class="i-archive__file" data-list="files"  data-level="2">
-                <div class="file-name">
-                  <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
-                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-                  </span>
-                </div>
-                </dl>
-              </div>
-              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <div class="file-item">
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
-              </div>
-              </div>
-            </div>
-          </div>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <div class="date ">{{created_at}}</div>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+          </dt>
+          <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
         </div>
-      </div>
-    </div>
-  </div>
+      </dl>
+    </li>
+  </ul>
 </div>
-
-<script>
-if( window.location.href.indexOf('/en/') > -1 ) {
-  $('.date-thead').replaceWith('<div class="col-sm-2 date-thead-en">Updated At</div>')
-  $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
-  $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
 }
-</script>
+.index-archive-1{
+  .date {
+    font-size: 1.2rem;
+    font-weight: normal;
+  }
+}
+  .i-archive__item-wrap {
+      background: #eaeef0;
+  }
+
+</style>

modules/archive/archive_index7.html.erb

@@ -1,54 +1,51 @@
-<div class="i-archive index-archive-7">
+<div class="i-archive index-archive-2 index-archive-7">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <table class="i-items table table-bordered">
-        <thead class="thead row">
-        <tr>
-          <th class="col-sm-2">{{date-head}}</th>
-          <th class="col-sm-4">{{title-head}}</th>
-          <th class="col-sm-3">{{description-head}}</th>
-          <th class="col-sm-3">{{file-head}}</th>
-        </tr>
-        </thead>
-        <tbody class="tbody i-archive__category-list" data-list="archives" data-level="1">
-          <tr class="archive-items">
-
-            <td class="date col-sm-2">{{created_at}}</td>
-            <td class="head col-sm-4">{{archive-title}}</td>
-              <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-               <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-              </span>
-            <td class="description col-sm-3">{{description}}</td>
-            <td class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
-            </td>
-          </tr>
-        </tbody>
-    </table>
+  
+  <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
+  <h4 class="i-archive__category-title">{{category-title}}</h4>
+    <div class="panel panel-default default-collapse" data-list="archives" data-level="1">
+      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+        <h4 class="panel-title">
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+           <i class="fa fa-file-text" aria-hidden="true"></i> {{archive-title}}
+            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          </a>
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
+        <div class="panel-body">
+          <ul class="i-archive-files-list" data-list="files"  data-level="2">
+            <li>
+              <span class="description" style="margin-top: 0.5em;clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <span class="label label-primary {{file-type}}">{{file-type}}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+        {{link_to_edit}}
   </div>
+  <style>
+    .fa-file-text:before {
+    content: "\f15c"!important;
+  }
+    .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+    width: 100%;
+  }
+    .index-archive-7 dt.i-archive-item-list{
+      float: none;
+      width: auto;
+    }
+    li{
+      list-style:none;
+    }
+  </style>
 </div>
-
-
-<script>
-$(document).ready(function(){
-  if(window.innerWidth >= 768){
-    $(".archive-items .date").each(function(i,d){
-      $(d).parent().eq(0).children().css("min-height",$(d).parent().height());
-    })
-  }else{
-    $(".archive-items >").css("min-height","");
-  }
-})
-$(window).resize(function(){
-  if(window.innerWidth >= 768){
-    $(".archive-items .date").each(function(i,d){
-      $(d).parent().eq(0).children().css("min-height",$(d).parent().height());
-    })
-  }else{
-    $(".archive-items >").css("min-height","");
-  }
-})
-</script>

modules/archive/archive_index8.html.erb

@@ -1,40 +1,48 @@
-<div class="i-archive index-archive-6">
-  <h3 class="i-archive-title">
+<div class="i-archive  index-archive-1 index-archive-8">
+    <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <div class="i-items">
-        <div class="thead row">
-          <div class="col-sm-2 date-thead">{{date-head}}</div>
-          <div class="col-sm-4 title-thead">{{title-head}}</div>
-          <div class="col-sm-3 description-thead">{{description-head}}</div>
-          <div class="col-sm-3 file-thead">{{file-head}}</div>
-          </div>
-        <div class="tbody">
-          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
-          <div class="archive-items clearfix">
-              <div class="date col-sm-2">{{created_at}}</div>
-              <div class="head col-sm-4">
-                <dl class="i-archive__file" data-list="files"  data-level="2">
-                <div class="file-name">
-                  <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-                  </span>
-                </div>
-                </dl>
-              </div>
-              <div class="description col-sm-3">{{description}}</div>
-              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <div class="file-item">
-                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
-              </div>
-              </div>
-            </div>
-          </div>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
         </div>
-      </div>
-    </div>
-  </div>
-</div>
+      </dl>
+    </li>
+  </ul>
+</div>
+<style>
+.i-archive__file-list{
+  display:flex;
+}
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+.index-archive-8{
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+  }
+}
+
+</style>

modules/archive/archive_index9.html.erb

@@ -28,3 +28,20 @@
     </table>
   </div>
 </div>
+<style>
+.index-archive-9{
+.thead{
+ @media(max-width:768px){
+  display:none;
+ }
+}
+.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+  border:0;
+}
+.archive-items:nth-child(odd) {
+    background-color: #F3F3F3;
+}
+} 
+
+
+</style>

modules/archive/info.json

@@ -1,73 +1,97 @@
 {
   "frontend": [
-    {
-      "filename": "archive_index1",
-      "name": {
-        "zh_tw": "1. 列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "1. List (widget-title, category, filename, download link)"
-      },
-      "thumbnail": "ar1.png"
-    },
     {
       "filename": "archive_index2",
       "name": {
-        "zh_tw": "2. 手風琴式列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
+        "zh_tw": "A1. 手風琴式列表 ( 類別折疊,（左）檔案室標題與說明,（右）檔名及Icon)",
         "en": "2. Accordion list (widget-title, category, filename, download link)"
       },
       "thumbnail": "ar2.png"
-    },
+    },    
     {
-      "filename": "archive_index3",
+      "filename": "archive_index12",
       "name": {
-        "zh_tw": "3. 列表( 無檔案名稱 ) ( 模組標題, 類別標題, 下載連結 )",
-        "en": "3. List(no filename) (widget-title, category, download link)"
+        "zh_tw": "A1-1. 手風琴式列表 ( 類別折疊,（上）檔案室標題與說明,（下）檔名及Icon)",
+        "en": "12. Accordion list - with drop down  (widget-title, category, filename, download link)"
       },
-      "thumbnail": "ar3.png"
+      "force_cover": "true",
+      "thumbnail": "ar12.png"
     },
     {
       "filename": "archive_index4",
       "name": {
-        "zh_tw": "4. 手風琴式列表( 無檔案名稱  ( 模組標題, 類別標題, 下載連結 )",
+        "zh_tw": "A2. 手風琴式列表 ( 類別折疊, 檔案室說明, 檔名Icon)",
         "en": "4. Accordion list(no filename) (widget-title, category, download link)"
       },
       "thumbnail": "ar4.png"
     },
     {
-      "filename": "archive_index5",
+      "filename": "archive_index14",
       "name": {
-        "zh_tw": "5. 表格列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "5. Table list (widget-title, category, filename, download link)"
+        "zh_tw": "A3. 手風琴式列表 ( 類別折疊, 檔案室說明, 檔名Icon)",
+        "en": "14. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
       },
-      "thumbnail": "ar5.png"
-    },
-    {
-      "filename": "archive_index6",
-      "name": {
-        "zh_tw": "6. 表格列表 ( 模組標題, 檔案名稱, 下載連結 )",
-        "en": "6. Table list (widget-title, filename, download link)"
-      },
-      "thumbnail": "ar5.png"
-    },
+      "force_cover": "true",
+      "thumbnail": "ar14.png"
+    },    
     {
       "filename": "archive_index7",
       "name": {
-        "zh_tw": "7. 表格列表 ( 模組標題, 類別標題, 上傳日期, 檔案名稱, 檔案簡介, 下載連結 )",
+        "zh_tw": "A4. 手風琴式列表 ( 類別區塊, 檔案室標題折疊, 檔案室說明, 檔名Icon)",
         "en": "7. Table list (widget-title, category, Updated At, filename, download link)"
       },
-      "thumbnail": "ar5.png"
+      "thumbnail": "ar7.png"
+    },
+    
+
+    
+    {
+      "filename": "archive_index1",
+      "name": {
+        "zh_tw": "L1. 條列式列表 ( 類別區塊, 檔案室標題, 檔案室說明, 檔名Icon )",
+        "en": "1. List (widget-title, category, filename, download link)"
+      },
+      "thumbnail": "ar1.png"
+    },
+    {
+      "filename": "archive_index3",
+      "name": {
+        "zh_tw": "L2. 條列式列表 ( 類別區塊, 檔案室說明, 檔名Icon )",
+        "en": "3. List(no filename) (widget-title, category, download link)"
+      },
+      "thumbnail": "ar3.png"
     },
     {
       "filename": "archive_index8",
       "name": {
-        "zh_tw": "8. 表格列表 ( 模組標題, 上傳日期, 檔案名稱, 檔案簡介, 下載連結 )",
+        "zh_tw": "L3. 條列式列表 ( 類別區塊, 檔案室標題及說明, Icon)",
         "en": "8. Table list (widget-title, Updated At, filename, download link)"
       },
+      "thumbnail": "ar8.png"
+    },
+    {
+      "filename": "archive_index6",
+      "name": {
+        "zh_tw": "L4. 條列式列表 ( 類別區塊, 檔案室日期, 檔名Icon檔案室說明)",
+        "en": "6. Table list (widget-title, filename, download link)"
+      },
+      "thumbnail": "ar6.png"
+    },
+    
+
+
+    {
+      "filename": "archive_index5",
+      "name": {
+        "zh_tw": "G1. 表格式列表 ( 類別區塊, 檔案室日期, 檔案室標題, 檔案室說明, Icon)",
+        "en": "5. Table list (widget-title, category, filename, download link)"
+      },
       "thumbnail": "ar5.png"
     },
     {
       "filename": "archive_index9",
       "name": {
-        "zh_tw": "9. 表格列表 - 簡約 ( 模組標題, 檔案名稱, 下載連結 )",
+        "zh_tw": "G2. 表格式列表 ( 類別區塊, 檔名, Icon )",
         "en": "9. Table list - Simple (widget-title, filename, download link)"
       },
       "force_cover": "true",
@@ -76,32 +100,25 @@
     {
       "filename": "archive_index10",
       "name": {
-        "zh_tw": "10. 表格列表 ( 模組標題, 類別標題, 編號,  檔案名稱, 下載連結 )",
+        "zh_tw": "G3. 表格式列表 ( 類別區塊, 編號, 檔案室標題, 檔案室說明, Icon)",
         "en": "10. Table list (widget-title, category, Serial Number, filename, download link)"
       },
-      "thumbnail": "ar5.png"
+      "thumbnail": "ar10.png"
     },
     {
       "filename": "archive_index11",
       "name": {
-        "zh_tw": "11. 表格列表 - 簡約 - 展開檔案 ( 模組標題, 類別標題, 編號,  檔案名稱, 下載連結 )",
+        "zh_tw": "G4. 表格式列表 ( 類別區塊, 編號, 檔名, Icon)",
         "en": "11. Table list - Simple - Unfold Files (widget-title, category, Serial Number, filename, download link)"
       },
-      "thumbnail": "ar9.png"
-    },
-    {
-      "filename": "archive_index12",
-      "name": {
-        "zh_tw": "12. 手風琴式列表 - 有下拉 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "12. Accordion list - with drop down  (widget-title, category, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar11.png"
     },
+
+
     {
       "filename": "archive_index13",
       "name": {
-        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 下載連結, 描述 )",
+        "zh_tw": "T1. 頁籤式 ( 類別頁籤, 檔案室標題, 檔案室說明, Icon)",
         "en": "13. Tab list  (widget-title, category, title, download link, description)"
       },
       "old_name": {
@@ -109,34 +126,16 @@
         "en": "13. Tab list  (widget-title, category, title, filename, download link, description)"
       },
       "force_cover": "true",
-      "thumbnail": "ar-tab1.png"
-    },
-    {
-      "filename": "archive_index14",
-      "name": {
-        "zh_tw": "14. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
-        "en": "14. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar13.png"
     },
     {
       "filename": "archive_index15",
       "name": {
-        "zh_tw": "15. 頁籤式 ( 模組標題, 類別標題, 標題, 完整檔案名稱, 下載連結, 描述 )",
+        "zh_tw": "T2. 頁籤式 ( 類別頁籤, 檔案室標題, 檔案室說明, 檔名Icon)",
         "en": "15. Tab list  (widget-title, category, title, full filename, download link, description)"
       },
       "force_cover": "true",
-      "thumbnail": "ar-tab1.png"
-    },
-    {
-      "filename": "archive_index16",
-      "name": {
-        "zh_tw": "16. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
-        "en": "16. Accordion list - with drop down - For every data  (date,widget-title, title, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar15.png"
     }
   ],
   "widgets": [

modules/event_news_mod/_event_news_widget14.html.erb

@@ -3,7 +3,7 @@
     <span>{{widget-title}}</span>
   </h3>
   <div class="w-annc__inner row">
-    <div class="w-annc__img-wrap col-sm-4 bullseye">
+    <div class="w-annc__img-wrap col-sm-4 ">
       <img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
     </div>
     <ul class="w-annc__list  col-sm-8" data-level="0" data-list="event_news">
@@ -26,4 +26,4 @@
   <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= t("event_news.more") %></a>
   </div>
-</div>
+</div>

modules/event_news_mod/_event_news_widget15.html.erb

@@ -22,31 +22,33 @@
     data-cycle-prev="#prev-{{subpart-id}}"
 		data-cycle-slides=".w-annc__item" >
     <li class="w-annc__item">
-      <div class="w-annc__img-wrap bullseye" style="position:relative">
-	  <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
-        <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-        <div class="transitionfade"></div>
-      </a>
-      </div>
-    <div class="w-annc__content-wrap">
-      <div class="w-annc__meta">
-        <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-          <span class="w-annc__status label {{status-class}}">{{status}}</span>
-        </span>
-        <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa-regular fa-calendar"></i>
-          <span class="w-annc__postdate">{{postdate}}</span>
-        </span>
-        <span class="w-annc__category-wrap">
-          <i class="fa-solid fa-list"></i>
-          <span class="w-annc__category">{{category}}</span>
-          </span>
-      </div>
-      <h4 class="w-annc__entry-title">
-        <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-      </h4>
-      <p class="w-annc__subtitle">{{subtitle}}</p>
-    </div>
+	  <div class="w-annc__item_inner">
+		<div class="w-annc__img-wrap bullseye" style="position:relative">
+			<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+				<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+				<div class="transitionfade"></div>
+			</a>
+		</div>
+		<div class="w-annc__content-wrap">
+			<div class="w-annc__meta">
+				<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+				<span class="w-annc__status label {{status-class}}">{{status}}</span>
+				</span>
+				<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+				<i class="fa-regular fa-calendar"></i>
+				<span class="w-annc__postdate">{{postdate}}</span>
+				</span>
+				<span class="w-annc__category-wrap">
+				<i class="fa-solid fa-list"></i>
+				<span class="w-annc__category">{{category}}</span>
+				</span>
+			</div>
+			<h4 class="w-annc__entry-title">
+				<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+			</h4>
+			<p class="w-annc__subtitle">{{subtitle}}</p>
+		</div>
+	  </div>
     </li>
   </ul>
   <div class="w-annc__more-wrap clearfix">
@@ -54,127 +56,48 @@
   <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= t("event_news.more") %></a>
 </div>
 </div>
-<!-- <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
 <script>
-	function combineul_{{subpart-id}}(){
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
-				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
-			var ullength = $(v).find('ul.w-annc__list').length;
-			for(var i = 1;i < ullength;i++)
-				$(v).find('ul.w-annc__list').eq(-1).remove();
-		})
-	};
-	var num;
-	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-	function reorganize_{{subpart-id}}(num){
-		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
-		var currentul = uls.findIndex(function(v){
-			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
-		})
-		if(currentul == -1)
-			currentul = 0;
-		var li_active_idx = 0;
-		if(currentul != 0)
-			li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
-		combineul_{{subpart-id}}();
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			var lilength = $(v).find('li.w-annc__item').length;
-			var ul_length = Math.ceil(lilength/num);
-			for(var ii=1;ii< ul_length;ii++){
-				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
-				clone_ul.empty();
-				clone_ul.removeClass("active");
-				clone_ul.css("display","");
-				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
-				var lihtml="";
-				if(ii != (ul_length-1)){
-					for(var j=0;j<num;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				}else{
-					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				};
-				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
-			}
-			if(ul_length != 1 )
-				for(var i=0;i< lilength -num ; i++)
-					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
-		})
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
-		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
-	  	$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
-	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
-		active_ul.addClass("active");
-		active_ul.removeClass("hidden_item");
-		active_ul.css("display","");
-	};
-	$(window).resize(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(5);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	})
-	$(document).ready(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(5);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	var flag=false;
-	$('.btn-left').click(function(){
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul - 1 < 0)
-				currentul += ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul-1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
-		};
-	});
-	$('.btn-right').click(function(){
-		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul + 1 > ul_length - 1)
-				currentul -= ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul+1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){flag=false;});
-		};
-	});
-	});
-</script> -->
+$(document).ready(function () {
+
+  var $widget = $('.event-news-15');
+  var $slideshow = $widget.find('.w-annc__list');
+
+  function initAnnouncementCarousel() {
+
+    var visibleCount = $(window).width() < 768 ? 1 : 3;
+
+    // 如果已初始化 → 先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 重新初始化（只針對 event-news-15）
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 0,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .w-annc__item',
+
+      // 只抓這個 widget 裡的按鈕
+      prev: $widget.find('.btn-left'),
+      next: $widget.find('.btn-right')
+    });
+  }
+
+  // 初始執行
+  initAnnouncementCarousel();
+
+  // resize 時重新初始化（加 debounce 避免狂 reinit）
+  var resizeTimer;
+  $(window).on('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      initAnnouncementCarousel();
+    }, 200);
+  });
+
+});
+</script>

modules/event_news_mod/_event_news_widget16.html.erb

@@ -7,7 +7,7 @@
         <th class="w-annc__th  w-annc__th--title">{{title-head}}</th>
         <th class="w-annc__th  w-annc__th--title">{{subtitle-head}}</th>
         <th class="w-annc__th  w-annc__th--title">{{host-head}}</th>
-        <th class="w-annc__th  w-annc__th--title">{{notes-head}}</th>
+ 
       </tr>
     </thead>
     <tbody data-level="0" data-list="event_news">
@@ -22,7 +22,7 @@
           </td>
           <td class="w-annc_subtitle">{{subtitle}}</td>
           <td class="w-annc__host">{{host}}</td>
-          <td class="w-annc__notes">{{notes}}</td>
+  
         </tr>
     </tbody>
   </table>

modules/event_news_mod/_event_news_widget21.html.erb

@@ -22,34 +22,80 @@
     data-cycle-prev="#prev-{{subpart-id}}"
     data-cycle-slides=".w-annc__item" >
       <li class="w-annc__item">
-        <div class="w-annc__img-wrap bullseye" >
-        <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
-          <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-          <div class="transitionfade"></div>
-          </a>
+        <div class="w-annc__item_inner">
+          <div class="w-annc__img-wrap bullseye" >
+            <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+            <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+            <div class="transitionfade"></div>
+            </a>
+          </div>
+          <div class="w-annc__content-wrap card">
+            <div class="w-annc__meta">
+              <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+                <span class="w-annc__status label {{status-class}}">{{status}}</span>
+              </span>
+              <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+                <i class="fa-regular fa-calendar"></i>
+                <span class="w-annc__postdate">{{postdate}}</span>
+              </span>
+              <span class="w-annc__category-wrap">
+                <i class="fa-solid fa-list"></i>
+                <span class="w-annc__category">{{category}}</span>
+              </span>
+            </div>
+            <h4 class="w-annc__entry-title">
+              <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+            </h4>
+            <p class="w-annc__subtitle">{{subtitle}}</p>
+          </div>
         </div>
-      <div class="w-annc__content-wrap card">
-        <div class="w-annc__meta">
-          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="w-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa-regular fa-calendar"></i>
-            <span class="w-annc__postdate">{{postdate}}</span>
-          </span>
-          <span class="w-annc__category-wrap">
-            <i class="fa-solid fa-list"></i>
-            <span class="w-annc__category">{{category}}</span>
-          </span>
-        </div>
-        <h4 class="w-annc__entry-title">
-          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </h4>
-        <p class="w-annc__subtitle">{{subtitle}}</p>
-      </div>
       </li>
     </ul>
     <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>
+<script>
+$(document).ready(function () {
+
+  var $widget = $('.event-news-21');
+  var $slideshow = $widget.find('.w-annc__list');
+
+  function initAnnouncementCarousel() {
+
+    var visibleCount = $(window).width() < 768 ? 1 : 3;
+
+    // 如果已初始化 → 先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 重新初始化（只針對 widget-announcement-21）
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 0,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .w-annc__item',
+
+      // 只抓這個 widget 裡的按鈕
+      prev: $widget.find('.btn-left'),
+      next: $widget.find('.btn-right')
+    });
+  }
+
+  // 初始執行
+  initAnnouncementCarousel();
+
+  // resize 時重新初始化（加 debounce 避免狂 reinit）
+  var resizeTimer;
+  $(window).on('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      initAnnouncementCarousel();
+    }, 200);
+  });
+
+});
+</script>

modules/event_news_mod/_event_news_widget4.html.erb

@@ -43,7 +43,7 @@
     display: none;
   }
 </style>
-<script>
+<!-- <script>
 	function combineul_{{subpart-id}}(){
 		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
 		parents.each(function(i,v){
@@ -111,4 +111,4 @@
 			num=1;
 		}
 	})
-</script>
+</script> -->

modules/gallery/_gallery_widget2.html.erb

@@ -3,7 +3,7 @@
     <span>{{widget-title}}</span>
   </h3>
   <div class="row widget-content" data-level="0" data-list="images">
-    <div class="col-md-6" style="text-align: center;">
+    <div class="col-md-6 widget-content-inner" style="text-align: center;">
       <a class="widget-pic" href="{{link_to_show}}" title="{{album-name}}">
         <img
           srcset="
@@ -16,7 +16,7 @@
       <a href="{{link_to_show}}" title="{{album-name}}">
         <div class="mask_title">{{image_description}}</div>
       </a>
-      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+      <a class="album-name" href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
     </div>
   </div>
 </div>

modules/gallery/_gallery_widget3.html.erb

@@ -1,7 +1,7 @@
 <div class="widget-gallery widget3 no-print">
-  <!-- <h3 class="w-annc__widget-title">
-    <span class="album_icon"></span><span>{{widget-title}}</span>
-  </h3> -->
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
   <div class="cycle-slideshow widget-content"
     data-level="0" data-list="images" data-cycle-slides="> a"
     data-cycle-fx="carousel" data-cycle-timeout="3000" data-cycle-carousel-visible="1" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">

modules/gallery/_gallery_widget4.html.erb

@@ -1,38 +1,33 @@
-<div class="widget-gallery gallery card-group widget4 no-print">
+<div class="widget-gallery widget4 gallery card-group no-print">
   <h3 class="widget-title">
     <span>{{widget-title}}</span>
   </h3>
   <% OrbitHelper.render_css_in_head(["gallery_card.css"]) %>
   <div class="row widget-content" data-level="0" data-list="images">
     <div class="card card-flip h-100">
+    <a class="widget-pic" href="{{link_to_show}}" target="_blank" title="{{album-name}}">
       <div class="card-front">
         <div class="card-body" style="padding:0;">
-          <img
-            srcset="
-              {{thumb-large-src}} 1024w,
-              {{thumb-src}} 768w"
-            src="{{thumb-src}}"
-            alt="{{alt_title}}"
-          >
-          <div class="card-footer">
-            <h3 class="card-title">{{image_short_description}}</h3>
-          </div>
+            <img
+              srcset="
+                {{thumb-large-src}} 1024w,
+                {{thumb-src}} 768w"
+              src="{{thumb-src}}"
+              alt="{{alt_title}}"
+            >
+            <div class="card-footer">
+              <h3 class="card-title">{{image_short_description}}</h3>
+            </div>
         </div>
       </div>
       <div class="card-back">
+        
         <div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
           <h3 class="card-title">{{image_short_description}}</h3>
           {{image_description}}
-          <div class="card-button-group">
-            <a href="{{link_to_show}}" class="btn btn-secondary view ">
-              <i class="fa fa-link" aria-hidden="true"></i>
-            </a>
-            <a href="{{src}}" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="{{alt_title}}" data-type="image" target="_blank">
-              <i class="fa fa-eye" aria-hidden="true"></i>
-            </a>
-          </div>
         </div>
       </div>
+    </a>
     </div>
   </div>
 </div>

modules/gallery/_gallery_widget5.html.erb

@@ -69,4 +69,11 @@ if(typeof Modernizr == "undefined"){
 }
 
 </script>
-</div>
+</div>
+<style>
+.widget-gallery {
+    position: relative;
+    z-index: 1 !important;
+}
+
+</style>

modules/gallery/_gallery_widget7.html.erb

@@ -0,0 +1,49 @@
+<div class="widget-gallery widget7 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+
+  <div class="cycle-slideshow widget-content"
+    data-level="0"
+    data-list="images"
+    data-cycle-slides="> .widget-pic"
+    data-cycle-fx="carousel"
+    data-cycle-timeout="3000"
+    data-cycle-carousel-visible="3"
+    data-cycle-pause-on-hover="true"
+    data-cycle-log="false"
+    data-cycle-carousel-fluid="true"
+    data-cycle-prev="~ .button-mid .prev-button"
+    data-cycle-next="~ .button-mid .next-button"
+    data-cycle-pager="~ .banner-pager"
+    data-cycle-pager-template="<span></span>">
+
+
+    <div class="widget-pic" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
+      <a href="{{link_to_show}}" title="{{album-name}}">
+        <img
+          srcset="
+            {{thumb-large-src}} 1024w,
+            {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </a>
+      <div style="clear: both;"></div>
+      <a href="{{link_to_show}}" title="{{album-name}}">
+        <div class="mask_title">{{image_description}}</div>
+      </a>
+      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+    </div>
+
+
+  </div>
+
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
+    <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
+  </ul>
+
+
+  <div class="banner-pager"></div>
+</div>

modules/gallery/_gallery_widget8.html.erb

@@ -0,0 +1,174 @@
+<div class="widget-gallery widget8 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+
+  <div class="cycle-slideshow widget-content"
+    data-level="0"
+    data-list="images"
+    data-cycle-slides="> .widget-pic"
+    data-cycle-fx="carousel"
+    data-cycle-timeout="3000"
+    data-cycle-carousel-visible="4"
+    data-cycle-pause-on-hover="true"
+    data-cycle-log="false"
+    data-cycle-carousel-fluid="true"
+    data-cycle-prev="~ .button-mid .prev-button"
+    data-cycle-next="~ .button-mid .next-button"
+    data-cycle-pager="~ .banner-pager"
+    data-cycle-pager-template="<span></span>">
+
+
+    <div class="widget-pic" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
+      
+        <img
+          srcset="
+            {{thumb-large-src}} 1024w,
+            {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      
+      <div style="clear: both;"></div>
+      <a href="{{link_to_show}}" title="{{album-name}}">
+        <div class="mask_title">{{image_description}}</div>
+      </a>
+      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+    </div>
+
+
+  </div>
+
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
+    <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
+  </ul>
+
+</div>
+<script>
+$(document).ready(function () {
+  var $slideshow = $('.widget8 .cycle-slideshow');
+
+  function initCarousel() {
+    var visibleCount = $(window).width() < 768 ? 1 : 4;
+
+    // 如果已經初始化，先 destroy
+    var api = $slideshow.data('cycle.API');
+    if (api) {
+      api.destroy();
+    }
+
+    // 初始化 carousel
+    $slideshow.cycle({
+      fx: 'carousel',
+      timeout: 3000,
+      pauseOnHover: true,
+      log: false,
+      carouselVisible: visibleCount,
+      carouselFluid: true,
+      slides: '> .widget-pic',
+      prev: '.widget8 .prev-button',
+      next: '.widget8 .next-button',
+      pager: '.widget8 .banner-pager',
+      pagerTemplate: '<span></span>'
+    });
+  }
+
+  // 一開始初始化
+  initCarousel();
+
+  // resize 時重新初始化
+  $(window).on('resize', function () {
+    initCarousel();
+  });
+});
+$(document).ready(function () {
+
+  $('.widget8').on('click', '.widget-pic img', function (e) {
+    e.preventDefault();
+
+    var $img = $(this);
+    var imgAlt = $img.attr('alt') || '';
+    var imgSrc;
+
+    var srcset = $img.attr('srcset');
+
+    if (srcset) {
+      // 抓 srcset 第一個網址（通常是 thumb_large）
+      imgSrc = srcset.split(',')[0].trim().split(' ')[0];
+    } else {
+      imgSrc = $img.attr('src');
+    }
+
+    if ($('.widget8-lightbox').length) return;
+
+    var lightboxHtml = `
+      <div class="widget8-lightbox">
+        <div class="widget8-lightbox__overlay"></div>
+        <div class="widget8-lightbox__content">
+          <button class="widget8-lightbox__close" aria-label="關閉">×</button>
+          <img src="${imgSrc}" alt="${imgAlt}">
+        </div>
+      </div>
+    `;
+
+    $('body').append(lightboxHtml);
+  });
+
+  $('body').on('click', '.widget8-lightbox__close, .widget8-lightbox__overlay', function () {
+    $('.widget8-lightbox').fadeOut(200, function () {
+      $(this).remove();
+    });
+  });
+
+});
+
+</script>
+<style>
+  .prev-button,.next-button{
+      cursor: pointer;
+  }
+  .widget8-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+  }
+
+  .widget8-lightbox__overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+  }
+
+  .widget8-lightbox__content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 90vw;
+    max-height: 90vh;
+        height: 800px;
+      width: 800px;
+  }
+
+  .widget8-lightbox__content img {
+    display: block;
+    max-width: 100%;
+    max-height: 90vh;
+  }
+
+  .widget8-lightbox__close {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: #000;
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+  }
+    
+</style>

modules/gallery/_gallery_widget9.html.erb

@@ -0,0 +1,78 @@
+<div class="widget-gallery widget9 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row widget-content" data-level="0" data-list="images">
+    <div class="widget-content-inner" style="text-align: center;">
+      <a class="widget-pic" href="{{link_to_show}}" title="{{album-name}}">
+        <img
+          srcset="
+            {{thumb-large-src}} 1024w,
+            {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </a>
+      <a href="{{link_to_show}}" title="{{album-name}}">
+        <div class="mask_title">{{image_description}}</div>
+      </a>
+      <a class="album-name" href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+    </div>
+  </div>
+</div>
+<style>
+  .widget-gallery.widget9 .row {
+    @media(min-width:768px){
+      display: block !important; 
+      column-count: 3;
+      column-gap: 16px;
+    }
+  }
+
+  .widget-gallery.widget9 .index-content {
+    break-inside: avoid;        
+    -webkit-column-break-inside: avoid;
+    display: inline-block;      
+    width:100%!important;
+    margin-bottom: 0;
+    box-sizing: border-box;
+  }
+
+
+  .widget-gallery.widget9 .index-content.col-sm-4 {
+    float: none !important;
+    padding: 0;
+  }
+
+
+  .widget-gallery.widget9 .index-content-inner {
+    width: 100%;
+  }
+
+  .widget-gallery.widget9 .index-content-inner img {
+    width: 100%;
+    height: auto;       
+    display: block;
+  }
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
+<script>
+$(document).ready(function () {
+  $('.widget-gallery.widget9 .index-content').each(function (i) {
+    $(this).css({
+      'opacity': 0,
+      'animation': 'fadeInUp 0.6s ease forwards',
+      'animation-delay': (i * 0.08) + 's'
+    });
+  });
+});
+</script>

modules/gallery/gallery_index2.html.erb

@@ -6,11 +6,11 @@
     <div class="index-content">
       <div class="index-content-inner clearfix row">
        <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
-        <div class="index-pic col-xs-5 col-sm-2">
+        <div class="index-pic col-sm-2">
           <img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
         </div>
         </a>
-        <div class="index-part col-xs-7 col-sm-10">
+        <div class="index-part col-sm-10">
           <h4 class="index-content-title">
            <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
           </h4>

modules/gallery/gallery_index5.html.erb

@@ -5,16 +5,12 @@
   <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
   <div class="row" data-level="0" data-list="albums">
     <div class="card card-flip h-100">
-
+    <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
         <div class="card-front">
           <div class="card-body" style="padding:0;">
-          <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
             <img src="{{thumb-src}}"alt="{{alt_title}}">
-            </a>
             <div class="card-footer">
-            <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
               <h3 class="card-title">{{album-name}}</h3>
-            </a>
             </div>
           </div>
         </div>
@@ -22,15 +18,11 @@
       <div class="card-back">
         <div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
           <h3 class="card-title">{{album-name}}</h3>
-          <div class="card-button-group">
-            <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}" class="btn btn-secondary view ">
-              <i class="fa fa-link" aria-hidden="true"></i>
-            </a>
-          </div>
         </div>
       </div>
-
+    
     </div>
+    </a>
   </div>
 </div>
 {{pagination_goes_here}}

modules/gallery/gallery_index7.html.erb

@@ -0,0 +1,24 @@
+<div class="index-gallery index7">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content col-sm-3">
+      <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
+      <div class="index-content-inner">
+        <div class="index-pic">
+          <img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
+        </div>
+        </a>
+        <div class="index-part">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
+          </h4>
+          <div class="index-img-description">{{album-description}}</div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/gallery_index8.html.erb

@@ -0,0 +1,80 @@
+<div class="index-gallery index8">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content col-sm-4">
+      <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
+        <div class="index-content-inner">
+          <div class="index-pic">
+            <img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
+          </div>
+      </a>
+        <div class="index-part">
+            <h4 class="index-content-title">
+              <a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
+            </h4>
+            
+        </div>
+    </div>
+
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
+<style>
+  .index-gallery.index8 .row {
+    @media(min-width:768px){
+      display: block !important; 
+      column-count: 3;
+      column-gap: 16px;
+    }
+  }
+
+  .index-gallery.index8 .index-content {
+    break-inside: avoid;        
+    -webkit-column-break-inside: avoid;
+    display: inline-block;      
+    width:100%!important;
+    margin-bottom: 0;
+    box-sizing: border-box;
+  }
+
+
+  .index-gallery.index8 .index-content.col-sm-4 {
+    float: none !important;
+    padding: 0;
+  }
+
+
+  .index-gallery.index8 .index-content-inner {
+    width: 100%;
+  }
+
+  .index-gallery.index8 .index-content-inner img {
+    width: 100%;
+    height: auto;       
+    display: block;
+  }
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
+<script>
+$(document).ready(function () {
+  $('.index-gallery.index8 .index-content').each(function (i) {
+    $(this).css({
+      'opacity': 0,
+      'animation': 'fadeInUp 0.6s ease forwards',
+      'animation-delay': (i * 0.08) + 's'
+    });
+  });
+});
+</script>

modules/gallery/info.json

@@ -47,7 +47,22 @@
                   "en" : "6. Thumbnail ( gallery thumbnail, page navigation )"
                   },
               "thumbnail" : "gallery_index6_thumb.png"
-          }
+          },        {
+            "filename" : "gallery_index7",
+            "name" : {
+                "zh_tw" : "7. 縮圖黑底字 ( 相本圖片, 相本說明, 分頁導覽 )",
+                "en" : "7. Thumbnail black bg txt ( gallery thumbnail, gallery description, page navigation )"
+                },
+            "thumbnail" : "gallery_index6_thumb.png"
+        },
+        {
+            "filename" : "gallery_index8",
+            "name" : {
+                "zh_tw" : "8. 瀑布流固定高縮圖 ( 相本圖片, 分頁導覽 )",
+                "en" : "8. Masonry Thumbnail ( gallery thumbnail, page navigation )"
+                },
+            "thumbnail" : "gallery_index8_thumb.png"
+        }
     ],
     "widgets" : [
         {
@@ -105,6 +120,30 @@
                     "en" : "6. 10-Carousel Effect (widget-title, image)"
                     },
                 "thumbnail" : "_gallery_widget6_thumb.png"
-          }
+          },
+        {
+            "filename" : "gallery_widget7",
+            "name" : {
+                "zh_tw" : "7. 輪播跑馬燈 ( 模組標題, 圖片 )",
+                "en" : "7. Carousel Effect (widget-title, image)"
+                },
+            "thumbnail" : "_gallery_widget7_thumb.png"
+        },
+        {
+            "filename" : "gallery_widget8",
+            "name" : {
+                "zh_tw" : "8.popup 輪播跑馬燈當頁開啟 ( 模組標題, 圖片 )",
+                "en" : "8.popup Carousel Effect (widget-title, image)"
+                },
+            "thumbnail" : "_gallery_widget8_thumb.png"
+        },
+        {
+            "filename" : "gallery_widget9",
+            "name" : {
+                "zh_tw" : "9. 瀑布流固定高相本排版 ( 模組標題, 圖片 )",
+                "en" : "9.Masonry Thumbnail (widget-title, image)"
+            },
+            "thumbnail" : "gallery_index8_thumb.png"
+        }
     ]
 }

modules/gallery/show.html.erb

@@ -3,7 +3,7 @@
     <span>{{album-title}}</span>
   </h1>
   {{album-description}}
-  <div data-level="0" data-list="images">
+  <div class="show-gallery-list" data-level="0" data-list="images">
     <div class="show-content col-xs-6 col-sm-2">
       <div class="show-content-inner">
         <div class="show-pic">
@@ -15,4 +15,15 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+<style>
+.show-gallery-list{
+    display: flex;
+    flex-wrap: wrap;
+}
+.show-gallery .show-content {
+  @media(max-width:480px){
+    width:100%;
+  }
+}
+</style>

modules/member/info.json

@@ -30,7 +30,7 @@
                 "zh_tw" : "4. 精簡名片式 ( 類別標題, 個人資料等自訂欄位 )",
                 "en" : "4. Simple Two Columns (category title, customized profile data)"
                 },
-            "thumbnail" : "thumb.png"
+            "thumbnail" : "member_index4_thumb.png"
         },
         {
             "filename" : "member_index5",
@@ -63,6 +63,22 @@
                 "en" : "8. four Columns whitebg (category title, photo and customized profile data)"
                 },
             "thumbnail" : "member_index5_thumb.png"
+        },
+        {
+            "filename" : "member_index9",
+            "name" : {
+                "zh_tw" : "9. 單欄式 無照片 ( 類別標題, 橫線, 個人資料等自訂欄位 )",
+                "en" : "9. Single Column no img (category title, line and customized profile data)"
+                },
+            "thumbnail" : "member_index9_thumb.png"
+        },
+        {
+            "filename" : "member_index10",
+            "name" : {
+                "zh_tw" : "10. 名片式 無照片 ( 類別標題, 個人資料等自訂欄位 )",
+                "en" : "10. Two Columns no img (category title,customized profile data)"
+                },
+            "thumbnail" : "member_index10_thumb.png"
         }
     ]
 }

modules/member/member_index10.html.erb

@@ -0,0 +1,83 @@
+<div class="i-member index-member-10">
+<h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
+  <div data-list="roles" data-level="0">
+    <div class="i-member-section">
+      <div data-level="1" data-list="status-list">
+        <h3 class="i-member-status-title">{{status-title}}</h3>
+        <div class="i-member-list row" data-level="2" data-list="members">
+          <div class="i-member-item col-md-6">
+            <div class="i-member-item-inner clearfix">
+              <div class="i-member-profile-data-wrap col-sm-12">
+                  <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
+                    <li class="i-member-profile-item">
+                        <span class="i-member-title {{title_class}}">{{title}}:</span>
+                        <span class="i-member-value {{value_class}}">{{value}}</span>
+                    </li>
+                  </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
+<script>
+	for(var i = 0;i < $('.i-member img').length ; i++){
+		if($('.i-member img').eq(i).attr('alt')=="" ){
+			$('.i-member img').eq(i).attr('alt','noname');
+			$('.i-member img').eq(i).attr('title','noname');
+      $('.i-member img').eq(i).parent().attr('title','noname');
+		}
+	}
+</script>
+<style>
+ul.i-member-profile-list {
+    padding: 0;
+}
+.member-data-title-name {
+    display: none;
+}
+.member-data-value-name {
+  width: 100%;
+  display: block;
+    font-size: 1.5em;
+    font-weight: 600;
+    text-align: left;
+    padding: 0 0 5px 0;
+    margin: 5px 0px 15px;
+    color: #002a54;
+    border-bottom: 1px dashed #d0d0d0;
+    a{
+      color: #002a54;
+    }
+}
+.member-data-value-1{
+  color: #4b7abb;
+}
+span.i-member-title {
+    color: #4b7abb;
+}
+.member-data-title-1 {
+    display: none;
+}
+.i-member-profile-item {
+  &:first-child{
+
+  }
+    list-style: none;
+    padding-bottom: 0.25em;
+    padding-top: 0.25em;
+}
+.i-member-item-inner.clearfix {
+    border: #efefef solid 1px;
+    background: #fff;
+    margin-bottom: 1em;
+        padding-top: 1em;
+}
+.i-member-profile-data-wrap{
+    padding-right: 0.9375em;
+    padding-left: 0.9375em;
+}
+</style>

modules/member/member_index9.html.erb

@@ -0,0 +1,79 @@
+<div class="i-member index-member-9">
+<h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
+  <div data-list="roles" data-level="0">
+    <div class="i-member-section">
+      <div data-level="1" data-list="status-list">
+        <h3 class="i-member-status-title">{{status-title}}</h3>
+        <div class="i-member-list" data-level="2" data-list="members">
+          <div class="i-member-item row">
+            <div class="i-member-item-inner clearfix">
+              <div class="i-member-pic-wrap col-sm-12">
+                <a href="{{link_to_show}}" title="{{name}}">
+				          <img class="i-member-pic img-thumbnail" src="{{image}}" title="{{name}}">
+                </a>
+              </div>
+              <div class="i-member-profile-data-wrap col-sm-12">
+                  <div class="i-member-profile-list" data-list="profile_data" data-level="3">
+                    <div class="i-member-profile-item">
+                        <span class="i-member-title {{title_class}}">{{title}}</span>
+                        <span class="i-member-value {{value_class}}">{{value}}</span>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
+<script>
+	for(var i = 0;i < $('.i-member img').length ; i++){
+		if($('.i-member img').eq(i).attr('alt')=="" ){
+			$('.i-member img').eq(i).attr('alt','noname');
+			$('.i-member img').eq(i).attr('title','noname');
+      $('.i-member img').eq(i).parent().attr('title','noname');
+		}
+	}
+	for(var i = 0;i < $('.i-member span.member-data-value-name a').length ; i++){
+		if($('.i-member span.member-data-value-name a').eq(i).html().trim().replace('&nbsp;','') == "")
+			$('.i-member span.member-data-value-name a').eq(i).html('noname');
+	};
+  $(function () {
+    $('.i-member-item').each(function () {
+      var $root = $(this);
+
+      // 找到該 member 區塊內所有 profile item（只限自己的區塊）
+      var $profileItems = $root.find('.i-member-profile-item');
+
+      // 1) titlesection：包含 member-data-value-1 或 member-data-value-name 的項目（排除已在 titlesection 裡的）
+      var $titleItems = $profileItems.filter(function () {
+        return $(this).find('.member-data-value-1, .member-data-value-name').length > 0
+              && $(this).closest('.titlesection').length === 0;
+      });
+
+      if ($titleItems.length) {
+        // wrapAll 只會包該 member 區塊內的那幾個 sibling items
+        $titleItems.wrapAll('<div class="titlesection"></div>');
+      }
+
+      // 2) infosection：包含 mobile-no、fax、office-tel 或 email（排除已在 infosection 裡的）
+      var $infoItems = $profileItems.filter(function () {
+        return $(this).find('.member-data-value-mobile-no, .member-data-value-fax, .member-data-value-office-tel, .member-data-value-email,.member-data-value-3,.member-data-value-4').length > 0
+              && $(this).closest('.infosection').length === 0;
+      });
+
+      if ($infoItems.length) {
+        $infoItems.wrapAll('<div class="infosection"></div>');
+      }
+
+      // 3) deputy class：在該 member 區塊內，含 member-data-value-2 的 i-member-profile-item 加上 class
+      $profileItems.filter(function () {
+        return $(this).find('.member-data-value-2').length > 0;
+      }).addClass('deputy');
+
+    });
+  });
+
+</script>

modules/text_marquee/_widget3.html.erb

@@ -0,0 +1,115 @@
+<div class="marquee-1 marquee-3" module="text_marquee" data-ps="">
+	<div class="marquee-container">
+		<ul class="marquee" data-level="0" data-list="texts">
+			<li>{{content}}</li>
+		</ul>
+	</div>
+</div>
+
+<style>
+.marquee-row{
+  li{
+    list-style:none;
+    a{
+      color:red;
+    }
+  }
+}
+.marquee-container {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 150px;
+}
+
+.marquee {
+  display: flex;
+  position: absolute;
+  white-space: nowrap;
+  left: 0;
+}
+
+.marquee-row {
+  position: relative;
+  height: 25px;
+  overflow: hidden;
+}
+
+.marquee-row ul {
+  display: flex;
+  position: absolute;
+  white-space: nowrap;
+  left: 0;
+}
+
+.marquee li {
+  display: inline-block;
+  padding-right: 200px;
+}
+
+</style>
+ 
+<script type="text/javascript">
+(function(){
+  var main_div = $("div[data-subpart-id={{subpart-id}}]");
+  var container = main_div.find(".marquee-container");
+  var original_ul = main_div.find("ul.marquee");
+  var items = original_ul.find("li");
+
+  if (!items.length) return;
+
+  // 清空
+  container.empty();
+
+  // 建立三行
+  for (var i = 0; i < 3; i++) {
+    container.append('<div class="marquee-row"><ul></ul></div>');
+  }
+
+  var rows = container.find(".marquee-row ul");
+
+  // 平均分配
+  items.each(function(index){
+    rows.eq(index % 3).append($(this));
+  });
+
+  // 固定速度（像素/毫秒）
+  var speed = 0.06;  // 數字越大越快，可自行調整
+
+  function startMarquee($ul){
+
+    var total_width = 0;
+
+    $ul.find("li").each(function(){
+      total_width += $(this).outerWidth(true);
+    });
+
+    // ⭐ 強制在最後再補 100px 空白
+    total_width += 100;
+
+    var containerWidth = container.width();
+
+    // 固定速度 → duration = 距離 / 速度
+    var distance = containerWidth + total_width;
+    var duration = distance / speed;
+
+    $ul.css({
+      left: containerWidth + 'px'
+    });
+
+    $ul.animate({
+      left: -total_width + 'px'
+    }, duration, 'linear', function(){
+      startMarquee($ul);
+    });
+  }
+
+  rows.each(function(){
+    startMarquee($(this));
+  });
+
+})();
+
+
+
+</script>

modules/text_marquee/info.json

@@ -15,6 +15,13 @@
                 "en" : "white-marquee"
                 },
             "thumbnail" : "thumb.png"
+        },{
+            "filename" : "widget3",
+            "name" : {
+                "zh_tw" : "三則跑馬燈",
+                "en" : "3-marquee"
+                },
+            "thumbnail" : "thumb.png"
         }
     ]
 }

modules/universal_table/index3.html.erb

@@ -80,7 +80,7 @@
   </div>
   <div class="searchbox">
   <div class="theadsearch2">
-    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+    <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>
@@ -94,7 +94,7 @@
         </div>
       </div>
     </div>
-    <div class="col-md-1 col-xs-12 submit-btn-wrap">
+    <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>

modules/universal_table/index4.html.erb

@@ -74,7 +74,7 @@
   </div>
   <div class="searchbox">
   <div class="theadsearch2">
-    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+    <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>
@@ -88,7 +88,7 @@
         </div>
       </div>
     </div>
-    <div class="col-md-1 col-xs-12 submit-btn-wrap">
+    <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>

modules/universal_table/index5.html.erb

@@ -0,0 +1,197 @@
+<style>
+.combined-search-inner{
+   border: 1px solid #d5d5d5;
+    background: #f6f6f6;
+    padding: 0.5em;
+    border-radius: 0.5em;
+}
+.input-group2{
+    display: flex;
+    justify-content: space-between;
+}
+.more-btn {
+    background-color: #c93a42;
+    color: #fff;
+    font-size: 1rem;
+    border-radius: 5px;
+    &:hover{
+      color:#fff!important;
+    }
+}
+#combined-search{
+    max-width:250px;
+    flex: 0 0 75%;
+    width: auto;
+    display: block;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+  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{
+    white-space: pre!important;
+    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 {
+    margin-left: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  .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 universal-form-inline5 universal-index5" action="{{url}}" method="get">
+<table 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 class="i-annc__page-title"><span>{{table-name}}</span></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}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows" class="kentbody">
+    <tr class="tdken" 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(){
+  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
+  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
+  $(".universal-th-text").append(" :");
+  # $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
+  $('.voice-player').each(function () {
+    // 取得 <i> 元素
+    const icon = $(this).find('i')[0];
+    if (icon) {
+        // 取得 <i> 前面的節點
+        const prevNode = icon.previousSibling;
+        // 如果是文字節點，則移除
+        if (prevNode && prevNode.nodeType === 3) {
+            prevNode.remove();
+        }
+    }
+});
+});
+
+
+</script>

modules/universal_table/index6.html.erb

@@ -0,0 +1,197 @@
+<style>
+.combined-search-inner{
+   border: 1px solid #d5d5d5;
+    background: #f6f6f6;
+    padding: 0.5em;
+    border-radius: 0.5em;
+}
+.input-group2{
+    display: flex;
+    justify-content: space-between;
+}
+.more-btn {
+    background-color: #c93a42;
+    color: #fff;
+    font-size: 1rem;
+    border-radius: 5px;
+    &:hover{
+      color:#fff!important;
+    }
+}
+#combined-search{
+    max-width:250px;
+    flex: 0 0 75%;
+    width: auto;
+    display: block;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+  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{
+    white-space: pre!important;
+    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 {
+    margin-left: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  .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 universal-form-inline6 universal-index6" action="{{url}}" method="get">
+<table 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 class="i-annc__page-title"><span>{{table-name}}</span></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}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows" class="kentbody">
+    <tr class="tdken" 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(){
+  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
+  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
+  $(".universal-th-text").append(" :");
+  # $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
+  $('.voice-player').each(function () {
+    // 取得 <i> 元素
+    const icon = $(this).find('i')[0];
+    if (icon) {
+        // 取得 <i> 前面的節點
+        const prevNode = icon.previousSibling;
+        // 如果是文字節點，則移除
+        if (prevNode && prevNode.nodeType === 3) {
+            prevNode.remove();
+        }
+    }
+});
+});
+
+
+</script>

modules/universal_table/info.json

@@ -33,6 +33,23 @@
                   },
               "thumbnail" : "thumb.png",
               "default": true
+          },
+            {
+                "filename" : "index5",
+                "name" : {
+                    "zh_tw" : "5. 卡片兩欄單純表格列表 + 多欄位搜尋",
+                    "en" : "5. card 2-col Pure index table+ Multiple Field Search"
+                    },
+                "thumbnail" : "thumb.png"
+            }
+            ,
+            {
+                "filename" : "index6",
+                "name" : {
+                    "zh_tw" : "6. 卡片三欄單純表格列表 + 多欄位搜尋",
+                    "en" : "6. card 3-col Pure index table+ Multiple Field Search"
+                    },
+                "thumbnail" : "thumb.png"
             }
     ],
     "widgets" : [

modules/video_pro/_video_pro_widget3.html.erb

@@ -61,34 +61,6 @@
   .view_info img{
     margin-right: 5px;
   }
-  .Video__Player{
-    display: flex;
-        -webkit-box-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        .Video__PlayerButton{
-          display: inline-block;
-          padding-bottom: 0px;
-          padding-top: 0px;
-          border-radius: 50%;
-          border: 0px;
-          background-color: rgb(255, 81, 0);
-          background: url(/assets/btn-play.svg) no-repeat;
-          background-size: 100%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          transition: 0.5s;
-          width: 60px;
-          height: 60px;
-          &:hover{
-            width: 80px;
-            height: 80px;
-          }
-        }
-  }
   .view_info{
     max-height: 100%;
     border-radius: 2px;

modules/video_pro/_video_pro_widget6.html.erb

@@ -0,0 +1,126 @@
+<div class="w-video_data video_data-widget-6">
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
+<div class="btnwrapper" style="">
+  <button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="transition: 0.4s;
+    float: left;
+    left: 0.5rem;
+    transition: 0.4s;
+    right: 0.5rem;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+    height: 2em !important;
+    width: 2em !important;
+    font-size: 1em !important;
+    line-height: 2rem !important;
+    border-radius: 1em;
+    border: 0;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
+  <button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="
+    float: right;
+    transition: 0.4s;
+    right: 1.5rem;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+    height: 2em !important;
+    width: 2em !important;
+    font-size: 1em !important;
+    line-height: 2rem !important;
+    border-radius: 1em;
+    border: 0;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
+</div>
+  <ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
+  data-cycle-timeout="0"
+  data-cycle-carousel-visible="1"
+  data-cycle-carousel-fluid="true"
+  data-cycle-next="#next-{{subpart-id}}"
+  data-cycle-prev="#prev-{{subpart-id}}"
+  data-cycle-slides=".video_data"
+  >
+  <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="videohover">
+        <div class="view_info">
+          <span>{{view_count}}</span>
+        </div>
+        <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
+        <div class="videoduration"></div>
+      </div>
+      <img class="video_snapshot" src="{{snapshot_url}}"/>
+    </div>
+    </a>
+    
+    <div class="video_info">
+      <div class="video_length">{{video_duration}}</div>
+      <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_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
+    </div>
+</li>
+  </ul>
+  <div class="clearfix"></div>
+<style>
+
+  .video_title h5{
+    @extend .i-title;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .view_info{
+    float: right;
+  }
+  .view_info img{
+    margin-right: 5px;
+  }
+  .view_info{
+    max-height: 100%;
+    border-radius: 2px;
+    font-size: 0.875rem;
+    font-weight: normal;
+    letter-spacing: 0.3px;
+    text-align: center;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: absolute;
+    padding: 0px 8px;
+    background-color: #000000cc;
+    color: rgb(255, 255, 255);
+    z-index: 10;
+    top: 10px;
+    left: 10px;
+    border: 1px solid transparent;
+    line-height: 1.45;
+    span{
+      color:#fff;
+    }
+    &:before{
+      content: "";
+      display: inline-block;
+      margin-right: 5px;
+      width: 14px;
+      height: 10px;
+      background: url(/assets/icon-view@2x.png) no-repeat;
+      position: relative;
+      background-size: contain;
+    }
+  }
+</style>
+</div>
+<script>
+
+</script>

modules/video_pro/info.json

@@ -45,6 +45,15 @@
                 },
             "thumbnail" : "video_pro_widget5_thumb"
         },
+        {
+            "filename" : "video_pro_widget6",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "6. 影片單欄倫波 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "6.carousel-Video 1 List  ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget6_thumb.png"
+        },
         {
             "filename" : "video_pro_widget_jqcloud1",
             "force_cover": "true",
@@ -52,7 +61,7 @@
                 "zh_tw" : "2. 影片文字雲(標籤)",
                 "en" : "2. Video Word Cloud(tags)"
                 },
-            "thumbnail" : "video_pro_widget6_thumb"
+            "thumbnail" : "video_pro_widgetcloud_thumb"
         }
     ],
     "frontend" : [
@@ -87,8 +96,8 @@
             "filename" : "video_pro_index3",
             "force_cover": "true",
             "name" : {
-                "zh_tw" : "3. 三欄 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
-                "en" : "3. 3col-Video List 2 + Modal window ( snapshot, video info)"
+                "zh_tw" : "3. 三欄 影片列表 + 懸浮框 ( 縮圖, 影片資訊)",
+                "en" : "3. 3col-Video List + Modal window ( snapshot, video info)"
                 },
             "thumbnail" : "thumb.png"
         },
@@ -96,8 +105,8 @@
             "filename" : "video_pro_index_post_agency1",
             "force_cover": "true",
             "name" : {
-                "zh_tw" : "4. 三欄 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
-                "en" : "4. 3col-Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
+                "zh_tw" : "4. 三欄影片列表 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
+                "en" : "4. 3col-Video List + Post Agency filter ( snapshot, video info, keyword, page link)"
                 },
             "thumbnail" : "thumb.png"
         },
@@ -105,8 +114,8 @@
             "filename" : "video_pro_index4",
             "force_cover": "true",
             "name" : {
-                "zh_tw" : "4. 三欄影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
-                "en" : "4. 3col-Video List 1 + Category filter + Search ( snapshot, video info, page link)"
+                "zh_tw" : "4. 三欄影片列表 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "4. 3col-Video List + Category filter + Search ( snapshot, video info, page link)"
                 },
             "thumbnail" : "thumb.png"
         }