From c9551f4445132d823ee8dc8a1790afebf727866b Mon Sep 17 00:00:00 2001
From: kenlee <poopooken11@gmail.com>
Date: Mon, 24 Mar 2025 18:37:10 +0800
Subject: [PATCH] 'refresh'

---
 assets/javascripts/app.js                     |  76 ++--
 .../stylesheets/template/layout/header.scss   |  96 ++---
 assets/stylesheets/template/modules/menu.scss | 374 +++++++-----------
 assets/stylesheets/template/template.scss     |  39 +-
 4 files changed, 250 insertions(+), 335 deletions(-)

diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index 62c8615..4aaf21f 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -414,51 +414,39 @@
     // orbit.plugins.bullEye();
     orbit.setColumn('.left-column', '.right-column');
 
-    // 自適應網頁使用，當網頁載入時，如果視窗寬度小於769，就執行orbit.nav.setDropdown函數
-    if ($(window).width() < 769) {
-      // orbit.nav.setDropdown();
-      orbit.MobileMenu();
-      $('.mobile-menu').append($('.modules-menu'));
-      $('.header-buttom').appendTo($('.modules-menu'));
-      orbit.ClickMenuHandler();
-    }
-
-    // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
-    $(window).resize(function() {
-      if ($(window).width() < 769) {
-        $('.navbar-toggle').click(function(e){
-          e.preventDefault();
-          $('.mobile-menu').toggleClass('active');
-          $('body').toggleClass('noscroll');
-
-          $('.mobile-menu .navbar-toggle').removeClass('collapsed');
-          // $menu.slideToggle();
-          $('.mobile-menu1 > ul').slideUp(500);
-          $('.mobile-menu1 > .menu-drop').removeClass('opened');
-          $('.mobile-menu2 > ul').slideUp(500);
-          $('.mobile-menu2 > .menu-drop').removeClass('opened');
-        })
-
-        if (resizeTimer) clearTimeout(resizeTimer);
-        resizeTimer = setTimeout(function() {
-        if ( $('.modules-menu i').length == 0 ) {
-          orbit.MobileMenu();
-        }
-        if( $('.mobile-menu .modules-menu').length == 0 ) {
-          $('.mobile-menu').append($('.modules-menu'));
-          $('.header-buttom').appendTo($('.modules-menu'));
-          $('.navbar-toggle').bind(orbit.ClickMenuHandler());
-        }
-      },500 )} else {
-        resizeTimer = setTimeout(function(){
-          if( $('.mobile-menu .modules-menu').length > 0 ) {
-            $('.layout-header .outdropdowns .dropdowns').append($('.modules-menu'));
-            $('.dropdowns').append($('.header-buttom'));
-          }
-          orbit.removeDropdown();
-        }, 500);
+	    // 自適應網頁使用，當網頁載入時，如果視窗寬度小於769，就執行orbit.nav.setDropdown函數
+      if ($(window).width() >200) {
+        // orbit.nav.setDropdown();
+        orbit.MobileMenu();
+        $('.mobile-menu').append($('.modules-menu'));
+        $('.header-buttom').appendTo($('.modules-menu'));
+        orbit.ClickMenuHandler();
       }
-    });
+  
+      // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
+      $(window).resize(function() {
+        if ($(window).width() >200) {
+          if (resizeTimer) clearTimeout(resizeTimer);
+          resizeTimer = setTimeout(function() {
+          if ( $('.modules-menu i').length == 0 ) {
+            orbit.MobileMenu();
+          }
+          if( $('.mobile-menu .modules-menu').length == 0 ) {
+            $('.mobile-menu').append($('.modules-menu'));
+            $('.header-buttom').appendTo($('.modules-menu'));
+            $('.navbar-toggle').bind(orbit.ClickMenuHandler());
+          }
+        },500 )} else {
+          resizeTimer = setTimeout(function(){
+            if( $('.mobile-menu .modules-menu').length > 0 ) {
+              $('.layout-header .outdropdowns .dropdowns').append($('.modules-menu'));
+              $('.layout-header .outdropdowns .container').append($('.modules-menu'));
+              $('.dropdowns').append($('.header-buttom'));
+            }
+            orbit.removeDropdown();
+          }, 500);
+        }
+      });
     // if($(window).width()<769){
     //         $('.header-buttom').appendTo($('.modules-menu'));
     // }else{
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 045ccf6..df794e6 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -1,13 +1,17 @@
 @charset "utf-8";
 
 @import "../initial";
+.fc-cal-date-selected-fusion {
+  font-size: 1em!important;
+}
 .outdropdowns{
   position: relative;
   z-index: 1;
+    padding: 0.5em 0;
 }
 .header-nav {
   ul{
-             padding: 0;
+      padding: 0;
   }
   @media(max-width: 769px){
     ul{
@@ -25,7 +29,7 @@
   outline: 0.3125em auto -webkit-focus-ring-color !important;
 }
 .layout-header {
-  z-index: 2;
+  z-index: 10;
   position: relative;
   margin-bottom: 0;
   border: none;
@@ -45,13 +49,19 @@
   }
   .header-banner { overflow: hidden; }
   .header-nav {
-    padding:1em 0 0 0;
-    color: $theme-color-main;
-    font-family: $main-font;
-    text-transform:uppercase;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    background: #f5f5f5;
+    padding:0;
+
+    >.container{
+      color: $theme-color-main;
+      font-family: $main-font;
+      text-transform:uppercase;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 0.9375em;
+      padding-left: 0.9375em;
+    }
     @media(max-width: 820px){
       justify-content: space-between;
       padding:0;
@@ -67,17 +77,16 @@
       padding: 0;
       margin-top: 0;
       margin-bottom: 0;
-      color: $theme-color-main;
     }
 
     a {
-      color: $theme-color-main;
       text-decoration: none;
       padding: 15px;
+      font-size: 0.85em;
     }
 
     @media (min-width:1025px) {
-      margin-bottom: -4em;
+      // margin-bottom: -4em;
       position: relative;
     }
   }
@@ -98,7 +107,6 @@
     //   flex-flow: row-reverse;
     // }
     .navbar-brand {
-      margin: 0.5em 0;
       line-height: 2.125em;
       color: $theme-color-main;
       font-family: $main-font;
@@ -108,13 +116,11 @@
       @media (min-width: $screen-sm) {
         margin:0;
         line-height: 3.75em;
-        font-size: 1.5em;
         h1{
-          margin-top: 1em;
           font-size: 1.2em;
           display: flex;
           align-items: center;
-          color: #155E75;
+          color:#1a66b1;
           font-weight: bold;
         }
       }
@@ -145,6 +151,7 @@
         float: left;
         height: 60px;
         padding-right: 0.5em;
+        width: auto!important;
         @media(min-width: 1024px){
           height: 60px;
         }
@@ -152,7 +159,7 @@
           height: 50px !important;
         }
         @media(max-width: 820px)and(min-width:$screen-xs ){
-          height: 60px!important;
+          height: 50px!important;
         }
       }
     }
@@ -160,8 +167,9 @@
 }
 
 .navbar-toggle {
-  padding: 0.875em 0.625em;
   margin-top: 1em;
+  position: absolute;
+  right: 0;
   // border-radius: 0.125em;
   // border-width: 0.125em;
   // border-color: lighten($theme-color-main, 30%);
@@ -274,7 +282,7 @@
   ::-moz-placeholder { /* Firefox 19+ */
     opacity: 0;
   }
-	input {
+  input {
       position: relative;
       background: none;
       z-index: 2;
@@ -287,34 +295,34 @@
       border: 2px solid #33333326;
       // box-shadow: #0000000f 0 0px 1px 1px;
       border-radius: 3em;
-		&:hover {
-			cursor: pointer;
-			&:focus {
-				cursor: text;
-			}
-			+ span {
-				background: rgba(255,255,255,0.2);
-			}
-		}
-		&:focus {
-			width: 200px;
-			padding: 0 10px;
-			outline: none;
-			color: $theme-color-second;
-			background:none;
+    &:hover {
+      cursor: pointer;
+      &:focus {
+        cursor: text;
+      }
+      + span {
+        background: rgba(255,255,255,0.2);
+      }
+    }
+    &:focus {
+      width: 200px;
+      padding: 0 10px;
+      outline: none;
+      color: $theme-color-second;
+      background:none;
       @media(max-width: $screen-xs){
         width: 100px;
       }
-			+ span {
-				width: 200px;
-				&::before {
-					width:2px;
-					opacity:1;
-					transition: all .25s ease-in;
-				}
-			}
-		}
-	}
+      + span {
+        width: 200px;
+        &::before {
+          width:2px;
+          opacity:1;
+          transition: all .25s ease-in;
+        }
+      }
+    }
+  }
   .kenspan{
     .fa-search{
       color: $theme-color-second;
diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss
index b844741..923e0a2 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -2,74 +2,6 @@
 
 @import "../initial";
 
-// 選單樣式2
-.modules-menu{
-    @media (min-width: $screen-sm){
-      li{
-          padding-left: 0!important;
-      }
-      .modules-menu-level-1 > li > a{
-        color: $theme-color-second!important;
-      }
-    }
-  .modules-menu-level-0 > li{
-    @media (min-width: $screen-sm){
-      position: static!important;
-    }
-  }
-
-  .modules-menu-level-1{
-
-    @media (min-width: $screen-sm){
-      min-width:unset;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      left:0!important;
-      display: flex!important;
-      visibility: hidden;
-      opacity: 0;
-      width: 100vw!important;
-      box-shadow: 2px 2px 5px #00000033;
-      margin:0;
-      padding:1em 13% 3em!important;
-      transition-duration: 0.5s;
-      background: #f0f0f0;
-    }
-  }
-  .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{
-    visibility: visible!important;
-    opacity: 1!important;
-  }
-
-  .modules-menu-level-2 {
-    right:auto!important;
-    display: block;
-    top: auto!important;
-    left: auto!important;
-    background-color: transparent!important;
-    position: relative!important;
-  }
-  .modules-menu-level-1{
-    @media (min-width: $screen-sm) {
-      & > li {
-        width: 25%;
-        & > a {
-          padding-left: 1em;
-          padding: 5px 0;
-        }
-
-        &:hover {
-          .modules-menu-level-2 {
-            display: block;
-          }
-        }
-      }
-      .modules-menu-level-2{
-        display: block;
-      }
-    }
-  }
-}
 
 //固定選單
 .navFixed {
@@ -89,7 +21,7 @@
   min-width: 100%;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
-  background-color: #fff;
+  background-color: #ffffffd9;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
@@ -97,69 +29,6 @@
   transition: all .3s ease;
 }
 
-// //直式選單更改css
-// .navbar-brand{
-//   h1{
-//     @media(min-width: 769px){
-//       margin-top:0.5em;
-//     }
-//   }
-// }
-// #layout-navigation{
-//   @media(min-width: 769px){
-//     position: absolute;
-//     width: 20%!important;
-//     left: 0;
-//     background-color: #fff;
-//     margin-top: 5em;
-//     padding-right: 0;
-//     #main-nav{
-//       padding: 0;
-//     }
-//     .modules-menu-level-0{
-//       width: 100%!important;
-//     }
-//     .modules-menu-level-0 > li{
-//       width: 100%;
-//     }
-//     .modules-menu-level-1{
-//       min-width: 100%;
-//       left: 100%;
-//       top: 0;
-//     }
-//   }
-// }
-// .verticalhome{
-//   .layout-content{
-//     @media(min-width: 769px){
-//       float: right!important;
-//       width: 80%!important;
-//     }
-//   }
-// }
-// .homebanner{
-//   @media(min-width: 769px){
-//     float: right!important;
-//     width: 80%!important;
-//     .ba-banner-widget-0 img{
-//       transform: none!important;
-//     }
-//   }
-// }
-// .container{
-//   @media(min-width: 1200px){
-//     width: 95%!important;
-//     max-width: unset!important;
-//   }
-// }
-// .layout-header .navbar-header .navbar-brand{
-//   @media(min-width: 1200px){
-//     padding-left: 0;
-//   }
-// }
-
-
-
 
 
 
@@ -178,8 +47,11 @@
   z-index: 1020;
 
   li {
-    padding: 1em;
+    white-space: nowrap;
     list-style: none;
+    @media(max-width: 768px){
+      padding: 1em;
+    }
   }
   .menu-drop.opened {
     transform: rotateX(180deg);
@@ -188,21 +60,18 @@
   .modules-menu-level-0 {
       width: 100%;
       padding: 0;
-      // @media (min-width:769px)and(max-width: 1025px){
-      //   display: flex;
-      //   flex-wrap: wrap;
-      //   justify-content: flex-end;
-      //   padding: 0;
-      //   width: 100%;
-      // }
     @media (min-width:769px) {
-      margin: 0;
-      padding:0.5em 0 0;
+      margin: 0 0 0.8em 0;
+      -webkit-flex-flow: row wrap;
       list-style: none;
+      float: left !important;
+      padding-top: 10px;
       display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      width: 70%;
+      width: 100%;
+      justify-content: start;
+      padding-left: 0;
+      padding-left: 6em;
+      padding-right: 3em;
       }
     .has-dropdown.level-1.active {
       .modules-menu-level-1 {
@@ -240,7 +109,7 @@
       text-align: center;
       border-radius: 0.13em;
       top: 2em;
-      @media(max-width: 769px){
+      @media(max-width: 768px){
         top: 1em;
         font-size: 1em;
       }
@@ -260,12 +129,21 @@
       margin: 0;
       padding: 0.5em;
       border-bottom: 0.0625em solid lighten($theme-gray, 5%);
-
+      i{
+            color: #fff;
+            @media(max-width: 768px){
+              color: $theme-color-main;
+            }
+      }
       & > a {
         display: block;
-        padding: 1em;
+        padding: 1.125em 0;
         font-family: $main-font;
         font-size: 1.1em;
+        color: #fff;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
         &:after{
           content:'';
           position:absolute;
@@ -283,7 +161,7 @@
           bottom:0;
         }
         &.active {
-          color: $theme-color-second;
+          text-decoration: revert;
           background: none;
           &:after{
             width:100%;
@@ -294,7 +172,7 @@
 
       &:hover {
         & > a {
-          color: $theme-color-second;
+          text-decoration: revert;
           background: transparent;
           box-shadow:none;
           &:after{
@@ -305,29 +183,21 @@
         }
 
         @media (min-width: $screen-sm) {
-          // background-color: $theme-color-second;
+          // background-text-decoration: revert;
           // border-radius: 0.5em;
         }
       }
-      @media (min-width: $screen-sm)and(max-width: 1439px){
-        .modules-menu-level-1 {
-         right: 0;
-        }
-      }
+
       @media (min-width: $screen-sm) {
         margin: 0;
         padding: 0;
         border-bottom: none;
+        width: 30%;
 
         &:first-child {
           margin-left: 0;
         }
-        &:nth-last-child(2){
-          .modules-menu-level-2 {
-            right: 100%;
-            left: auto;
-          }
-        }
+
         &:last-child {
           margin-right: 0;
 
@@ -340,8 +210,6 @@
             }
 
             & > li {
-              padding-right: 1em;
-              padding-left: 1em;
 
               & > a {
                 padding-left: 0;
@@ -356,10 +224,12 @@
         }
 
         & > a {
-          font-size:1.1em;
-          color:#686868;
-          font-weight: bold;
+          font-size:1.2em;
+          color:#fff;
+          font-weight: 900;
           position: relative;
+          border-bottom: 2px solid #f8f9fa;
+          margin-right: 1em;
         }
 
         &:hover {
@@ -374,18 +244,15 @@
   }
 
   .modules-menu-level-1 {
-    display: none;
     list-style: none;
     z-index: 1;
     padding:0;
     left: auto;
     @media(min-width:769px){
-      min-width: 200px;
-      width:fit-content;
-      box-shadow: 2px 2px 5px #00000033;
+      display: block !important;
       margin:0;
       transition-duration: 0.5s;
-      background: #f0f0f0;
+      padding-right: 1em;
       & > a {
         padding: 1em 1.5em;
       }
@@ -393,7 +260,9 @@
 
     & > li {
       position: relative;
-      padding: 1em;
+      padding-top: 1em;
+      padding-left: 0;
+          list-style: none;
       // & + li {
       //   border-top: 0.0625em solid lighten($theme-gray, 5%);
       // }
@@ -402,26 +271,22 @@
         display: block;
         font-family: $main-font;
         font-weight: 600;
-        color: #686868;
+        color: #fff;
         font-size: 1.1em;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
       }
 
       &:hover {
-
-        @media(max-width: 769px){
-                  background-color: $theme-color-second;
-          a,i {
-           color: #fff;
-         }
-        }
-         &>a {
-          color: #fff;
+        // background-text-decoration: revert;
+        & > a {
+          text-decoration: revert;
         }
       }
     }
 
     @media (min-width: $screen-sm) {
-      position: absolute;
 
       & > li {
         & > a {
@@ -430,8 +295,7 @@
 
         &:hover {
           .modules-menu-level-2 {
-            display: block;
-            position: absolute;
+
           }
         }
       }
@@ -442,35 +306,34 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    display: none;
 
     & > li {
       & + li {
+        list-style: none;
         // border-top: 0.0625em solid lighten($theme-gray, 5%);
       }
 
       & > a {
         display: block;
-        font-family: $main-font;
-        color:#686868;
+        color:#fff;
         font-weight: 500;
         font-weight: bold;
+        padding-top: 1em;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
       }
       &:hover {
         a{
           transition: all 0.3s ease-in-out;
-          color: $theme-color-second;
+          text-decoration: revert;
           margin-left: 0.5rem;
         }
       }
     }
 
     @media (min-width: $screen-sm) {
-      top: 0;
-      left: 100%;
-      background-color: #dbdbdb;
-      position: absolute;
-      min-width: 150px;
+
     }
   }
 }
@@ -496,7 +359,14 @@
     padding: 0;
   }
 }
-
+.navbar-toggle{
+  @media(min-width: 769px){
+    margin-top: 1em;
+    right:6%;
+    position: absolute;
+    display: block;
+  }
+}
 //mobile
 .mobile-menu {
   z-index: 1051;
@@ -512,30 +382,57 @@
   }
 
   .modules-menu {
-    width: 80%;
+    width: 100%;
     position: absolute;
     right: 0;
-    background: #ffffff;
+    background: #222222a6;
     height: 100%;
-    top: 0;
-    padding-top: 40px;
+    top: 40px;
+    padding-top: 0;
+    @media(max-width: 768px){
+      width: 80%;
+      position: absolute;
+      right: 0;
+      background: #ffffff;
+      height: 100%;
+      top: 0;
+      padding-top: 40px;
+    }
   }
   .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {
     font-weight:bold;
   }
 .menu-drop{
-
+  font-size: 10px ;
 }
   .navbar-toggle {
-    position: absolute;
-    left: 0;
-    background: transparent;
-    top: 40px;
-    z-index: 1;
-    height: 100vh;
-    margin: 0;
-    width: 20%;
-    border: 0;
+
+    @media(max-width: 768px){
+      display: block!important;
+      position: absolute;
+      left: 0;
+      background: transparent;
+      top: 40px;
+      z-index: 1;
+      height: 100vh;
+      margin: 0;
+      width: 20%;
+      border: 0;
+    }
+    @media(min-width: 769px){
+      position: absolute;
+      right: 3%;
+      background: transparent;
+      top: 3.5em;
+      z-index: 11111;
+      height: 40px;
+      margin: 0;
+      border: 0;
+      -webkit-transition: -webkit-transform 0.3s;
+      transition: -webkit-transform 0.3s;
+      transition: transform 0.3s;
+      transition: transform 0.3s, -webkit-transform 0.3s;
+    }
   }
   .cover {
     position: fixed;
@@ -565,20 +462,19 @@
 }
 .mobile-menu .modules-menu.collapse.in {
   transform: translateX(100%);
-  -webkit-transition-timing-function:ease;
-  -o-transition-timing-function:ease;
-  transition-timing-function:ease;
-  -webkit-transition-duration:.35s;
-  -o-transition-duration:.35s;
-  transition-duration:.35s;
-  -webkit-transition-property:transform;
-  -o-transition-property:transform;
-  transition-property:transform;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-duration: .35s;
+  -o-transition-duration: .35s;
+  transition-duration: .35s;
+  -webkit-transition-property: transform;
+  -o-transition-property: transform;
+  transition-property: transform;
 }
 
 .mobile-menu .collapse.navbar-collapse.modules-menu {
-      overflow-y: scroll;
-      transform: translateX(0%);
+  transform: translateX(0%);
 }
 .display-on{
    display:block!important;
@@ -595,7 +491,7 @@
     align-self: center;
     margin-left: 10px;
     z-index: 999;
-    @media(max-width: 769px){
+    @media(max-width: 768px){
       position: absolute;
       right: 0.3em;
       width: 2.5em;
@@ -611,6 +507,7 @@
 .fa-chevron-right{
     align-self: center;
     margin-left: 10px;
+    font-size: 3px;
     font-weight: 100!important;
 }
 .show{
@@ -618,23 +515,26 @@
   display: block!important;
   visibility: visible!important;
 }
-.mobile-menu2{
-  &>a{
-      padding-right: 1em;
-  }
-  .menu-drop{
-    top: 0.6em!important;
+.mobile-menu .collapse.navbar-collapse.modules-menu{
+  @media(min-width: 769px){
+    // overflow-y: scroll !important;
+    height: 100% !important;
+    padding: 0;
   }
 }
-html[lang="en"]{
-  .modules-menu .modules-menu-level-0{
-    @media (min-width: 1025px){
-      width: 50%;
-    }
-  }
-  .modules-menu-level-1{
-    @media(min-width:769px){
-      min-width: 220px!important;
+.mobile-menu1{
+  @media(min-width: 769px){
+    &>.menu-drop{
+      display: none;
     }
   }
 }
+.navbar-toggle0{
+  @media(min-width: 769px){
+    position: absolute;
+    right: 0;
+    .navbar-toggle{
+      transform: translateX(-100%);
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index 9597346..a4f8ea2 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -22,7 +22,16 @@
 
 //RWD
 @import "RWD";
-
+.sr-only{
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
 
 .dropdown-toggle:focus {
   // outline: 2px solid #43B5FC;
@@ -475,13 +484,13 @@ ul.tab_nav {
   table td{
     border: 1px solid #ddd!important;
     @media (max-width: 480px) {
-     width: 100%;
+      width: auto!important;
      text-align: center;
     }
   }
   td,th{
     @media(max-width: $screen-xs){
-      width: 100%;
+      width: auto!important;
       text-align: center;
     }
   }
@@ -560,7 +569,7 @@ table.dataTable>tbody>tr.child{
   }
   @media(max-width: $screen-xs){
     tr{
-     display: table-row!important;
+     display: table-row;
     }
  }
 }
@@ -669,13 +678,18 @@ table.dataTable>tbody>tr.child{
     }
   }
 }
+//內頁搜尋樣式
 input.search_box{
-  background: #fff!important;
-  border: 1px solid #bbb!important;
-  color: #333!important;
+  background: #fff !important;
+  border: 1px solid #bbb !important;
+  color: #333 !important;
   padding: 0.5em !important;
-  margin-right: 0.5em !important;
-  border-radius: 0.5em!important;
+  margin-right: 0.25em !important;
+  border-radius: 0.5em !important;
+  margin-left: 0.25em !important;
+  @media(max-width:1024px){
+    margin-top: 0.5em !important;
+  }
 }
 ::placeholder {
   color: #333!important;
@@ -685,6 +699,10 @@ input.search_box{
   background: #fff!important;
   color: #333!important;
   margin-right: 0.5em!important;
+  @media(max-width:1024px){
+    margin-left: 0.25em !important;
+    margin-top: 0.5em !important;
+  }
 }
 #category_select_box>option{
   background: #fff!important;
@@ -725,6 +743,7 @@ a.ui-state-default{
   border: 0!important;
   background: silver!important;
 }
+
 .aligncenter{
   display: flex;
   align-items: center;
@@ -835,4 +854,4 @@ hr{
 }
 .video_tablist a{
   background-color: #a2a2a2!important;
-}
\ No newline at end of file
+}