From 68cc881d4b6edf9998ffc7ce0701a4fdf8925015 Mon Sep 17 00:00:00 2001
From: ken <poopooken11@gmail.com>
Date: Fri, 11 Sep 2026 13:45:49 +0800
Subject: [PATCH] css

---
 assets/stylesheets/template/template.scss | 1296 +++++++++++++++++++++
 1 file changed, 1296 insertions(+)
 create mode 100644 assets/stylesheets/template/template.scss

diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
new file mode 100644
index 0000000..cfbd753
--- /dev/null
+++ b/assets/stylesheets/template/template.scss
@@ -0,0 +1,1296 @@
+
+// Base
+@import "base/orbitbar-override";
+@import "base/sitemap-override";
+@import "base/global";
+@import "base/unity";
+@import "base/utilities";
+@import "base/pagination";
+@import "base/accesskey";
+@import "base/go_back_top";
+@import "base/ckeditor-reset";
+
+// Layout
+@import "layout/*";
+
+// Modules
+@import "modules/*";
+
+// Widget
+@import "widget/*";
+
+//RWD
+@import "RWD";
+    .list-unstyled::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+input:focus, 
+input:hover {
+    outline: 3px solid #14324f!important;
+    background: #e6f0ff!important;
+    transition: all 0.2s ease-in-out!important;
+}
+.visually-hidden{
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.sr-only{
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.container{
+  margin: auto;
+}
+
+.internalfullwidth{
+ @media(min-width: 1280px){
+  transform: translateX(calc(-50vw + 685px));
+  width: 100vw;
+ }
+@media(max-width:1279px)and(min-width:1025px){
+  width: 100vw;
+  transform: translateX(-0.95em);
+ }
+ @media(max-width:1024px)and(min-width:768px){
+  width: 100vw;
+  transform: translateX(-1.75em);
+ }
+ @media(max-width:767px){
+  width: 100vw;
+  transform: translateX(-0.75em);
+ }
+}
+// container setting
+.response-container {
+  position: relative;
+  margin:auto;
+  z-index: 1;
+  @media (max-width: $screen-xs) {
+    width: 100%;
+  }
+  @media (min-width: $screen-sm) {
+    width: 100%;
+
+  }
+  @media (min-width: $screen-md) {
+    width: 80%;
+  }
+
+  @media (min-width: $screen-lg) {
+    max-width: 1700px;
+    padding: 0;
+  }
+}
+.dropdowns{
+  @media (min-width: $screen-md) {
+    margin: auto;
+  }
+}
+.header-buttom{
+  @media (min-width: $screen-md) {
+        padding: 12px 0;
+  }
+}
+.background {
+    width: 100%;
+    left: 0;
+    top: 5px;
+    z-index: -1;
+}
+
+.extra { clear: both; }
+//公告頁籤
+ul.tab_nav,.nav_tabs_filter {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-family: $main-font;
+
+    li {
+      list-style: none;
+      position: relative;
+      padding:0.5em 1em;
+      margin: 0.5em;
+      cursor: pointer;
+      transition: all 0.5s;
+      -moz-transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+      -o-transition: all 0.5s;
+      color: #5e5e5e;
+      box-shadow: 0px 6px 20px 0px #64646f33;
+      border-radius: 3em;
+      border: none;
+     @media(max-width:$screen-xs){
+        text-align: center;
+      }
+      &:hover{
+        color: #fff;
+        background: $theme-color-third;
+        &:after,&:before{
+          width:100%;
+          transition: all 0.3s;
+        }
+      }
+      &.active {
+        color: #fff;
+        background: $theme-color-third;
+        &:before,
+        &:after{
+          width:100%;
+          transition: all 0.3s;
+        }
+      }
+    }
+}
+
+.noscroll { overflow: hidden; position: fixed; }
+
+//覆蓋bootstrap 設定
+.row { margin: 0; }
+.container>.navbar-collapse {
+  @media (max-width: 767px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+//共用樣式
+.title {
+  @extend .unity-title;
+}
+
+.superBtn {
+  a.btn-primary {
+    color: $theme-white;
+    border-color: #990000;
+    background-color: #990000;
+    font-size: 0.8125rem;
+    padding: 0.3em 0.5em;
+
+    &:hover {
+      background-color: darken(#990000, 10%);
+      border-color: darken(#990000, 10%);
+    }
+  }
+}
+.side-panel-wrap{
+  display: flex!important;
+  padding: 0!important;
+  .panel-item{
+  background: #fff!important;
+  }
+      img{
+        width: 150px!important;
+      }
+}
+.black-screen-social-window.reactable.right .content-social .social_wrap > div{
+  background-color: transparent;
+  width: auto;
+  
+}
+.black-screen-social-window.reactable .content-social .social_wrap span{
+  padding: 0.5em;
+}
+.black-screen-social-window .content-social .social_wrap i{
+  font-size: 1.5em;
+}
+.black-screen-social-window.reactable .content-social .social_wrap > div{
+  line-height: unset;
+}
+.black-screen-social-window.reactable .content-social .social_wrap > div:hover, .black-screen-social-window.reactable .content-social .social_wrap > div.hover-class{
+  border-radius: 30px 0 0 30px;
+  background: #fff;
+}
+.hide_sharer_button{
+      width: 1.65em;
+}
+.black-screen-social-window.reactable .content-social .social_wrap i, .black-screen-social-window.reactable .content-social .social_wrap img{
+  padding-bottom:0;
+}
+.hide_sharer_button{
+  display: none;
+}
+.side-panel-wrap {
+  display: flex;
+  align-items: stretch;
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9999;
+}
+
+.black-screen-social-window {
+  border-radius: 0 !important;
+  background-color: transparent !important;
+  min-width: auto;
+  border: 0 !important;
+  padding: 0;
+
+  ul {
+    margin-top: 60px;
+    width: auto;
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+}
+
+.side-tab {
+  width: 40px;
+  background: #c0155a;
+  color: #fff;
+  border-radius: 8px 0 0 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 0;
+  cursor: pointer;
+  user-select: none;
+  min-height: 180px;
+  transition: background 0.2s;
+  flex-shrink: 0;
+
+  &:hover { background: #9b1044; }
+
+  &:focus {
+    outline: 3px solid #fff;
+    outline-offset: -3px;
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.side-tab-label {
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+}
+
+.side-tab i { 
+  font-size: 1.125rem; 
+}
+
+.side-panel {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
+  border: none;
+  border-radius: 8px 0 0 8px;
+}
+
+/* hover 或 focus-within 時自動展開 */
+.side-panel-wrap:hover .side-panel,
+.side-panel-wrap:focus-within .side-panel {
+  width: 100px;
+}
+
+.side-panel-inner {
+  padding: 0;
+  width: 100px;
+  box-sizing: border-box;
+}
+
+.panel-txt {
+  justify-content: center;
+}
+
+.panel-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  img{
+    margin: auto;
+  }
+
+  a {
+    padding-bottom: 0.5em;
+    display: block;
+
+    &:focus {
+      outline: 3px solid #fff;
+      outline-offset: 2px;
+    }
+  }
+}
+
+.panel-item img {
+  width: 100%;
+  border-radius: 0 8px 0 0;
+  display: block;
+}
+
+.panel-item-label {
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  padding: 8px;
+  border-radius: 0 0 8px 0;
+}
+.table-bordered{
+  border: 0;
+}
+.internal-page{
+  table{
+    tr{
+      @media(max-width:$screen-xs){
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+
+    }
+    td,th{
+      @media(max-width: $screen-xs){
+        width:100%;
+      }
+    }
+  }
+}
+#tdstyle0{
+  @media(max-width:768px){
+
+  }
+  tr{
+    &:nth-child(even){
+      background-color:#dfdedc;
+    }
+  }
+  tr{
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%!important;
+    @media(max-width: 1200px){
+
+    }
+
+  }
+  td,th{
+    width:100%;
+    @media(max-width: 768px){
+      a{
+        padding: 0.5rem 1.25rem!important;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    }
+    span {
+      white-space: normal;
+    }
+    a{
+      &: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;
+      }
+    }
+  }
+  @media(max-width: 1200px){
+    thead{
+      display: none;
+    }
+  }
+}
+//td有rwd跳色，寬度占滿100%
+#tdstyle1{
+  tr{
+    &:nth-child(even){
+      background-color:#dfdedc;
+    }
+  }
+  tr{
+    @media(max-width: $screen-xs){
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%!important;
+    }
+
+  }
+  td,th{
+    @media(max-width: $screen-xs){
+      width:100%!important;
+    }
+  }
+  @media(max-width: $screen-xs){
+    thead{
+      display: none;
+    }
+  }
+}
+//td無rwd，寬度不變
+#tdstyle2{
+  table td{
+    border: 1px solid #ddd!important;
+    @media (max-width: 480px) {
+     width: auto;
+    }
+  }
+  td,th{
+    @media(max-width: $screen-xs){
+      width: auto ;
+    }
+  }
+  tr{
+    display: table-row;
+  }
+}
+//td有rwd灰色底，寬度占滿100%
+#tdstyle3{
+  tr{
+    background: #efefef !important;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+  }
+  td{
+    border-bottom: #cacaca 1px solid !important;
+  }
+}
+//td無rwd跳色，寬度不變
+#tdstyle4{
+  table td{
+    border: 1px solid #ddd!important;
+    @media (max-width: 480px) {
+      width: auto!important;
+    }
+  }
+  td,th{
+    @media(max-width: $screen-xs){
+      width: auto!important;
+    }
+  }
+  tr{
+    display: table-row;
+    &:nth-child(odd){
+      background-color:#f2f2f2;
+    }
+  }
+}
+//td有rwd
+#tdstyle5{
+    margin-top: 1.5em;
+  tr{
+    @media(max-width: $screen-xs){
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%!important;
+    }
+
+  }
+  td,th{
+    @media(max-width: $screen-xs){
+      width:100%!important;
+    }
+  }
+  ul{
+    padding: 0;
+
+  }
+  li{
+    font-weight: bold;
+    background-color:#f2f2f2;
+    margin-bottom: 0.5em;
+    border-radius: 0.5em;
+    list-style: none;
+    padding: 0.5em;
+    text-align: center;
+    position: relative;
+
+  }
+
+  .firsttr1{
+    border-radius: 0 !important;
+    padding-bottom: 1.5em !important;
+    padding-top: 1em!important;
+    margin-bottom: 2em !important;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    &:after{
+      content: '1';
+      background-color: #fff;
+      position: absolute;
+      padding: 0.1em 1.5em;
+      border-radius: 1em;
+      border: 2px solid #f5c346;
+      color: #333;
+      left: 36%;
+      top: 70%;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      height: 18.5em;
+      left: 50%;
+      top: -105px;
+      width: 2px;
+      background-color: #f5c346;
+      z-index: 0;
+    }
+  }
+  .firsttr2{
+    border-radius: 0 !important;
+    padding-bottom: 1.5em !important;
+    padding-top: 1em!important;
+    margin-bottom: 2em !important;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    &:after{
+      content: '1';
+      background-color: #fff;
+      position: absolute;
+      padding: 0.1em 1.5em;
+      border-radius: 1em;
+      border: 2px solid #5a89f5;
+      color: #333;
+      left: 36%;
+      top: 70%;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      height: 16.5em;
+      left: 50%;
+      top:-60px;
+      width: 2px;
+      background-color: #5a89f5;
+      z-index: 0;
+    }
+  }
+  .firsttr3{
+    border-radius: 0 !important;
+    padding-bottom: 1.5em !important;
+    padding-top: 1em!important;
+    margin-bottom: 2em !important;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    &:after{
+      content: '1';
+      background-color: #fff;
+      position: absolute;
+      padding: 0.1em 1.5em;
+      border-radius: 1em;
+      border: 2px solid #464063;
+      color: #333;
+      left: 36%;
+      top: 70%;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      height: 15.5em;
+      left: 50%;
+      top: -40px;
+      width: 2px;
+      background-color: #464063;
+      z-index: 0;
+    }
+  }
+  .firsttr4{
+    border-radius: 0 !important;
+    padding-bottom: 1.5em !important;
+    padding-top: 1em!important;
+    margin-bottom: 2em !important;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    &:after{
+      content: '1';
+      background-color: #fff;
+      position: absolute;
+      padding: 0.1em 1.5em;
+      border-radius: 1em;
+      border: 2px solid #ed7b77;
+      color: #333;
+      left: 36%;
+      top: 70%;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      height: 16.5em;
+      left: 50%;
+      top:-62px;
+      width: 2px;
+      background-color: #ed7b77;
+      z-index: 0;
+    }
+  }
+  .firsttr5{
+    border-radius: 0 !important;
+    padding-bottom: 1.5em !important;
+    padding-top: 1em!important;
+    margin-bottom: 2em !important;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    &:after{
+      content: '1';
+      background-color: #fff;
+      position: absolute;
+      padding: 0.1em 1.5em;
+      border-radius: 1em;
+      border: 2px solid #afaac8;
+      color: #333;
+      left: 36%;
+      top: 70%;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      height: 18.5em;
+      left: 50%;
+      top: -105px;
+      width: 2px;
+      background-color:#afaac8;
+      z-index: 0;
+    }
+  }
+}
+//rwd時標題在表格資料的左側
+#tdstylesp{
+  @media (max-width: 480px) {
+    thead,
+    tbody,
+    tr,
+    th,
+    td {
+      display: block;
+      width: 100%;
+    }
+
+    /* thead 隱藏，改用 data-label 顯示 */
+    thead {
+      display: none;
+    }
+
+    tbody tr {
+      border: 1px solid #ddd;
+      margin-bottom: 12px;
+    }
+
+    tbody td {
+      position: relative;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+      min-height: 72px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    /* 用 data-label 顯示對應標題 */
+    tbody td::before {
+      content: attr(data-label);
+      position: relative;
+      left: 0;
+      width: 40%;
+      font-weight: bold;
+      color: #333;
+      white-space: normal;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+    }
+
+    /* 空白格不顯示 */
+    tbody td:empty,
+    tbody td[data-label=""]::before {
+      display: none;
+    }
+  }
+}
+// //取消內頁tdrwd可加在內頁編輯
+// .internal-page table td{
+//   border: 1px solid #ddd!important;
+//   @media (max-width: 480px) {
+//    width: auto !important;
+//   }
+// }
+// tr{
+//   display: table-row!important;
+// }
+table.dataTable>tbody>tr.child{
+  padding:0;
+}
+#orbit_calendar{
+      width: 100% !important;
+}
+//預約系統
+.fc-direction-ltr .fc-daygrid-event .fc-event-time{
+      white-space: nowrap;
+}
+.fc-daygrid-dot-event .fc-event-title{
+      white-space: nowrap;
+}
+.fc .fc-daygrid-event{
+      margin-top: 4px;
+}
+.modal-content{
+  box-shadow: 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f, 0 11px 15px -7px #00000033;
+  border-radius: 8px;
+  border: 0;
+}
+.fc .fc-daygrid-day.fc-day-today{
+  background-color:transparent!important;
+  .fc-daygrid-day-number{
+    color: #fff;
+    background-color: #858585;
+    border-radius: 0.65em;
+  }
+}
+.calendar-modal .event_summary{
+  font-size: 1.2em;
+  letter-spacing: 1px;
+}
+.calendar-modal > .modal-content h3{
+  font-weight: bold;
+}
+.fc .fc-daygrid-event-harness{
+  font-weight: bold;
+}
+.fc .fc-daygrid-day-number{
+      margin-top: 0.3em;
+}
+.table-striped{
+  a.btn-primary{
+    margin: 0;
+  }
+}
+.form-horizontal .form-group{
+  margin-right: 0;
+  margin-left: 0;
+}
+#calendar{
+  td{
+        border: 1px solid #dee2e6;
+  }
+  @media(max-width: $screen-xs){
+    tr{
+     display: table-row;
+    }
+ }
+}
+.w-calendar{
+  @media(max-width: $screen-xs){
+    tr{
+     display: table-row!important;
+    }
+ }
+}
+//動畫往上
+.hide0{
+  opacity: 0;
+  -webkit-transform: translateY(15%) translateZ(0);
+  -moz-transform: translateY(15%) translateZ(0);
+  -o-transform: translateY(15%) translateZ(0);
+  -ms-transform: translateY(15%) translateZ(0);
+  transform: translateY(15%) translateZ(0);
+  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+}
+.animationvisible{
+  opacity: 1;
+  -webkit-transform: translateY(0) translateZ(0);
+  -moz-transform: translateY(0) translateZ(0);
+  -o-transform: translateY(0) translateZ(0);
+  -ms-transform: translateY(0) translateZ(0);
+  transform: translateY(0) translateZ(0);
+}
+//動畫往右
+.hide1{
+  opacity: 0;
+  transform: translate3d(-120px, 0, 0);
+  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+}
+.animationvisible1{
+  opacity: 1;
+  transform: translateZ(0);
+}
+// 動畫往左
+.hide2{
+  opacity: 0;
+  transform: translate3d(120px, 0, 0);
+  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+}
+.animationvisible2{
+  opacity: 1;
+  transform: translatez(0);
+}
+// 動畫往下
+.hide3{
+  opacity: 0;
+  transform: translate3d(0, -100px, 0);
+  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+}
+.animationvisible3{
+  opacity: 1;
+  transform: translatez(0);
+}
+//動畫選轉
+.rotate0{
+  transform: perspective(2500px) rotateY(-100deg);
+  overflow: hidden;
+  position: relative;
+}
+.animationrotate0{
+  transform: perspective(2500px) rotateY(0);
+  transition-timing-function: ease;
+  transition-duration: 1s;
+}
+// 放大
+.zoomin{
+  opacity: 0;
+  transform: scale(.6);
+  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+}
+.animationvisible5{
+  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{
+    white-space: nowrap;
+    @media(max-width: $screen-xs){
+      width: 100%;
+    }
+  }
+}
+//內頁搜尋樣式
+input.search_box{
+  background: #fff !important;
+  border: 1px solid #bbb !important;
+  color: #333 !important;
+  padding: 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;
+}
+#category_select_box{
+  border-radius: 0.5em!important;
+  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;
+  color: #333!important;
+}
+.search_widget{
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+.ui-datepicker-calendar{
+  tr{
+    flex-wrap:unset!important;
+  }
+  th{
+    width: auto!important;
+  }
+}
+.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{
+  background: #000000;
+  border-color: #000000;
+  color: #fff!important;
+}
+.ui-widget-header a{
+  color: #fff!important;
+}
+.ui-widget-header .ui-icon{
+  filter: brightness(500%);
+}
+a.ui-state-default{
+  background: #fff!important;
+  border:0!important;
+  text-align: center!important;
+  &:hover{
+    background: silver!important;
+  }
+}
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
+  border: 0!important;
+  background: silver!important;
+}
+
+.aligncenter{
+  display: flex;
+  align-items: center;
+  @media(max-width:$screen-xs){
+    justify-content: flex-start!important;
+  }
+}
+.flexwrap{
+  display: flex;
+  flex-wrap: wrap;
+}
+.flexreverse{
+  @media(max-width: 768px){
+    display: flex;
+    flex-wrap: wrap-reverse!important;
+  }
+}
+//search
+.search-box{
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+}
+.input-search{
+  height: 50px;
+  width: 50px;
+  border-style: none;
+  padding: 10px;
+  font-size: 18px;
+  letter-spacing: 2px;
+  outline: none;
+  border-radius: 25px;
+  transition: all .5s ease-in-out;
+  background:none;
+  padding-right: 40px;
+  color:#333;
+  z-index: 100;
+  position: relative;
+  @media(max-width:768px){
+    color:#333!important ;
+
+  }
+}
+.input-search::placeholder{
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-weight: 100;
+  @media(min-width:769px){
+    color:#333!important;
+  }
+  @media(max-width:768px){
+    color:#333!important ;
+  }
+}
+/* 當 input 被 focus 或 btn 被點擊時，讓按鈕跳到上層並可點擊 */
+.search-box:focus-within .btn-search {
+  z-index: 999;
+  pointer-events: auto;
+  -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    transition: all .3s ease;
+}
+.search-box.searching .input-search {
+  width: 200px;
+  @media(max-width:$screen-xs){
+    width: 150px;
+  }
+}
+.search-box.searching .btn-search {
+  z-index: 999;
+  pointer-events: auto;
+  -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    transition: all .3s ease;
+}
+.btn-search{
+  width: 50px;
+  height: 50px;
+  border-style: none;
+  font-size: 20px;
+  font-weight: bold;
+  outline: none;
+  cursor: pointer;
+  border-radius: 50%;
+  position: absolute;
+  right: 0px;
+  color:#333;
+  background-color:transparent;
+  pointer-events: auto;
+  @media(max-width:768px){
+    color:gray ;
+  }
+}
+.btn-search:focus ~ .input-search{
+  width: 150px;
+  border-radius: 0px;
+  background-color: transparent;
+  border-bottom:1px solid rgba(255,255,255,.5);
+  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
+
+}
+.input-search:focus{
+  width: 150px;
+  border-radius: 0px;
+  background-color: transparent;
+  border-bottom:1px solid rgba(255,255,255,.5);
+  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
+}
+//search
+.btn-search-trigger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  color: inherit;
+  padding: 0.4rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.btn-search-trigger:focus {
+  outline: 2px solid #1a1a1a;
+  border-radius: 4px;
+}
+
+/* overlay 全螢幕 */
+.search-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  z-index: 99999;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-overlay.is-open {
+  display: flex;
+}
+
+/* 關閉按鈕 */
+.search-overlay__close {
+  position: fixed;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  font-size: 1.8rem;
+  cursor: pointer;
+  color: #555;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: color 0.2s;
+}
+
+.search-overlay__close:hover { color: #1a1a1a; }
+.search-overlay__close:focus { outline: 2px solid #1a1a1a; }
+
+/* 中央內容 */
+.search-overlay__inner {
+  width: 90%;
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.search-overlay__title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* 搜尋框 */
+.search-overlay__input-wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 2px solid #1a1a1a;
+  border-radius: 50px;
+  overflow: hidden;
+  padding: 0 0.5rem 0 1.5rem;
+}
+
+.search-overlay__input-wrap .input-search {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 1.1rem;
+  padding: 0.85rem 0;
+  background: transparent;
+  color: #1a1a1a;
+}
+
+.search-overlay__input-wrap .btn-search {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: #1a1a1a;
+  padding: 0.5rem 0.75rem;
+  transition: color 0.2s;
+}
+
+.search-overlay__input-wrap .btn-search:hover { color: #555; }
+hr{
+  border-top: 0.0625em solid #333;
+}
+.video_tablist li.now_view a{
+  background-color: #c9c9c9!important;
+}
+.video_tablist a{
+      background-color: #a2a2a2!important;
+}
+.modal-backdrop{
+  z-index: 2;
+}
+.video_tablist li.now_view a{
+  background-color: #c9c9c9!important;
+}
+.video_tablist a{
+  background-color: #a2a2a2!important;
+}
+.marqueeken {
+    width: 100vw;
+    overflow: hidden;
+    position: absolute;
+    .scroll .text1{
+      font-size:1000%;
+      color:#e7e7e7 !important;
+      letter-spacing: 8px;
+      white-space: nowrap;
+      text-transform: uppercase;
+      animation: scroll 80s linear infinite;
+      -webkit-animation:scrollken 80s linear infinite;
+      line-height: 1;
+      &:nth-child(2) {
+        animation: scroll2 80s linear infinite;
+        animation-delay: -40s;
+      }
+    }
+      .scroll .text2{
+      font-size:1000%;
+      color:#f5f5f5;
+      letter-spacing: 8px;
+      white-space: nowrap;
+      text-transform: uppercase;
+      animation: scroll 80s linear infinite;
+      -webkit-animation:scrollken 80s linear infinite;
+      line-height: 1;
+      &:nth-child(2) {
+        animation: scroll2 80s linear infinite;
+        animation-delay: -40s;
+      }
+    }
+  }
+  @keyframes scrollken {
+    from {
+      transform: translateX(100%);
+  }
+    to {
+      transform: translateX(-100%);
+  }
+  }
+  @keyframes scroll2 {
+    from {
+      transform: translateX(0%);
+  }
+    to {
+      transform: translateX(-200%);
+  }
+}
+.aa{
+  #chatbot-box{
+    padding: 0;
+    @media(min-width:769px){
+      right: 3em;
+    }
+  }
+}
\ No newline at end of file