up

assets/stylesheets/template/base/_global.scss

@@ -75,12 +75,6 @@ a[href="/en/sitemap"]{
 
 
 }
-.orbit-bar-inner{
-  .orbit-bar-menu{
-    display: flex;
-      align-items: center;
-  }
-
   blockquote{
     color: #333;
     padding: 0;
@@ -101,11 +95,11 @@ a[href="/en/sitemap"]{
       text-decoration: none;
       display: inline-block;
       height: 40px;
-      padding: 0.7em;
+      height: 40px;
-      font-size: 0.85em;
+      line-height: 40px;
+      padding: 0 0.5em;
     }
   }
-}
 .fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{
     font-family: var(--fa-style-family, "FontAwesome")!important;
 }

assets/stylesheets/template/base/_unity.scss

@@ -1,10 +1,13 @@
 @charset "utf-8";
 
 @import "variables";
+.page-module-title{
+  margin-top: 1em;
+}
 .internal-page{
-  // .unity-title{
+  .unity-title{
-  // margin-top: 1em;
+    margin-top: 1em;
-  // }
+  }
   .page-module-title{
     display: block !important;
     text-align: left !important;

assets/stylesheets/template/base/_variables.scss

@@ -19,6 +19,9 @@ $theme-color-third: darken(#256b86, 8%);
 $theme-color-green: #0c81ae;
 $theme-color-hover: darken(#256b86, 8%);
 
+// :root {
+//   --theme-color-second: #{$theme-color-second};
+// }
 // Font stacks
 $main-font: "Noto Sans TC", sans-serif;
 $sub-font: "Noto Sans TC", sans-serif;

assets/stylesheets/template/layout/header.scss

@@ -26,7 +26,16 @@ sup {
   ul{
     padding: 0;
   }
-  @media(max-width: 769px){
+  @media(min-width: 769px){
+    float: right;
+  }
+  @media(max-width: 768px){
+    a{
+      color: #333;
+      padding: 0.5em;
+      margin: 0;
+      position: relative;
+    }
     ul{
        display: flex!important;
        flex-wrap: wrap;
@@ -120,6 +129,11 @@ sup {
   .navbar-header {
     z-index: 10;
     position: relative;
+    @media(max-width:768px){
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
     padding: 0;
     margin: 0;
     @media (min-width: $screen-sm) {
@@ -172,7 +186,7 @@ sup {
         margin-right:0;
         height: auto;
         padding-right: 0.5em;
-        width: 100%!important;
+        width: 100%;
         @media(min-width: 769px){
           margin-bottom: 0.5em;
         }

assets/stylesheets/template/modules/ad_banner.scss

@@ -9,13 +9,29 @@
 // Widget
 // ## gerenral styles
 .ba-banner-widget-youtube{
- overflow: hidden;
+  overflow: hidden;
- height: auto !important;
+  iframe{
- .banner-overlay{
+    @media(min-width:1025px){
-  @media(max-width:768px){
+      position: absolute;
-    position: relative;
+      top: -180px;
+      left: 0;
+      width: 100%;
+      height: calc(100% + 215px);
+    }
+  }
+  .jarallax-video-audio{
+    @media(min-width:769px){
+          top: 7em;
+    }
+  }
+  .w-ba-banner__wrap{
+    height: auto !important; 
+  }
+  .banner-overlay{
+    @media(max-width:768px){
+      position: relative;
+    }
   }
- }
 }
 .w-ba-banner {
   position: relative;
@@ -268,10 +284,10 @@ ul.button-mid{
 }
 // Widget 0
 .ba-banner-widget-0 {
-  height: 100vh !important;
+  height: 70vh !important;
   z-index: 0;
   .w-ba-banner__wrap{
-    height: 100vh !important;
+    height: 70vh !important;
   }
   .youtube, .cycle-youtube {
     width: 100%;
@@ -282,12 +298,6 @@ ul.button-mid{
     width: 100%;
     height: 100%;
   }
-  .banner-pager {
-    right: 1em;
-    top: -2em;
-    z-index: 100;
-    display: none;
-  }
   .button-mid{
     z-index: 101;
   }
@@ -314,7 +324,6 @@ ul.button-mid{
         // width: auto;
         max-width: unset;
         // transform: translateX(-9%);
-        height: 100vh;
       }
     }
   &,& .jp-jplayer{
@@ -468,25 +477,22 @@ ul.button-mid{
 
 // Widget 3
 .ba-banner-widget-3 {
-.banner-pager .active-slide a {
+  overflow: hidden;
-    background: $theme-color-second !important;
+  border-radius: 2em;
-}
+  .w-ba-banner__image {
-
-  .w-ba-banner__wrap {
     width: 100%;
+    height: auto;
   }
 
-  .w-ba-banner__slide {
+  .youtube, .cycle-youtube {
     width: 100%;
-    position: relative;
+    height: 100%;
   }
 
-  .banner-pager {
+  object, embed {
-    right: 0;
+    width: 100%;
-    bottom: 2em;
+    height: 100%;
-   li { height: unset; width: unset; }
   }
-  ul.button-mid { display: none; }
 }
 
 //Widget 4

assets/stylesheets/template/modules/menu.scss

@@ -34,6 +34,7 @@
     float: right!important;
     width: 80%!important;
     padding-left: 1em;
+    padding-right: 1em;
     .ba-banner-widget-0 img{
       transform: none!important;
     }

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

@@ -4,6 +4,10 @@
 .universal-th-text{
   white-space: pre;
 }
+.btn-info {
+    background-color: #157d9d;
+    border-color: #157d9d;
+}
 .universal-table-index h3 {
     padding: 0;
 }

assets/stylesheets/template/modules/video.scss

@@ -453,7 +453,7 @@
     font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
     font-weight: normal;
     letter-spacing: 0.3px;
-    color: #8f8f8f;
+    color: #707070;
     line-height: 1.6;
     cursor: pointer;
 }
@@ -707,7 +707,7 @@
 .movie_desc{
   clear: both;
   letter-spacing: 0.3px;
-  color: #8f8f8f;
+  color: #707070;
   line-height: 1.8;
 }
 .video_title {
@@ -727,7 +727,7 @@
   clear: both;
 }
 .video_group_time{
-  color: #8f8f8f!important;
+  color: #707070!important;
 }
 .movietitle{
   margin-bottom: 15px;
@@ -905,7 +905,7 @@
   }
     .video_desc{
       letter-spacing: 0.3px;
-      color: #8f8f8f;
+      color: #707070;
       line-height: 1.6;
       max-height: 5em;
     }

assets/stylesheets/template/widget/breadcrumb.scss

@@ -7,6 +7,9 @@
     // padding-left: 0.9375em!important;
   }
 }
+.widget-breadcrumb{
+  margin-bottom: 1em;
+}
 .breadcrumb {
   @media(max-width: 768px){
     padding: 0;

modules/ad_banner/_ad_banner_widget3.html.erb

@@ -0,0 +1,99 @@
+<div class="w-ba-banner ba-banner-widget-3">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-cycle-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><button></button></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-youtube=true
+      data-cycle-youtube-autostart=false
+      data-cycle-swipe=true
+      data-cycle-swipe-fx="scrollHorz"
+    >
+     <div class="w-ba-banner__slide {{class}}"
+        data-link="{{link}}"
+        data-cycle-title="{{title}}"
+        data-cycle-desc="{{context}}"
+        data-overlay-template="<h3>{{title}}</h3>{{desc}}"
+        data-bs-target="{{target}}"
+      >
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+       </a>
+
+    </div>
+  </div>
+  <ul class="w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
+  <ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
+    <a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
+      <i aria-hidden="true"></i>
+      <p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
+    </a>
+
+    <a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
+      <i aria-hidden="true"></i>
+      <p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
+    </a>
+  </ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
+  </ul>
+</div>
+<script>
+  $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+    $(this).addClass('active')
+    $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
+  });
+  $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+    $(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");
+  });
+    /* 修正點：處理 Pager 無障礙朗讀文字 */
+  $('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
+    var $container = $(this).closest('.w-ba-banner');
+    var $slides = $(this).find('.w-ba-banner__slide');
+    var $pagerButtons = $container.find(".banner-pager button");
+
+    $pagerButtons.each(function(index) {
+      var slideTitle = $slides.eq(index).data('cycle-title') || "";
+      var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
+      $(this).attr({
+        "aria-label": ariaLabel,
+        "title": ariaLabel
+      });
+    });
+  });
+</script>
+<style type="text/css">
+  .w-ba-banner .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 50%;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
+</style>

modules/ad_banner/info.json

@@ -40,6 +40,14 @@
             },
             "thumbnail": "ad_banner2_thumb.png"
         },
+        {
+            "filename": "ad_banner_widget3",
+            "name": {
+                "zh_tw": "P1-1. 純圖片導圓角輪播-標準 ( 圖片, 導航圖示 )",
+                "en": "P1-1. Pure Image Carousel - Rounded - Standard ( image, navigation )"
+            },
+            "thumbnail": "ad_banner2_thumb.png"
+        },
         {
             "filename": "ad_banner_widget0",
             "name": {