@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,350,400,500,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700&display=swap);

:root {
  /* ------ 字體基礎設定 ------ */
  --font-size-base: 16px;

  /* ------ 字型 ------ */
  --font-cjk: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  --font-en:  'Roboto', sans-serif;

  /* ------ 色彩 ------ */
  /* 文字 */
  --color-text-primary:   #000000; /* 主要內文、標題  */
  --color-text-secondary: #4b4b4b; /* 次要說明文字   */
  --color-text-muted:     #888888; /* 輔助、日期、標籤 */
  --color-text-disabled:  #c8c8c8; /* 停用狀態       */
  --color-text-link:      #0057b8; /* 連結預設       */
  --color-text-link-hover:#003a8c; /* 連結 hover     */
 
  /* 背景 */
  --color-bg-surface: #f3f3f3;
  --color-bg-overlay: rgba(0, 0, 0, 0.04);
 
  /* 分隔線 */
  --color-border: #3e3e3e;

  --primary-color: #D95E0B;
  --secondary-color: #4B4B4B;
}
html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth
}
body, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--font-cjk);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: normal;
}
body:not(.index),
body:not(.index) .navbar {
  background-color: var(--color-bg-surface);
}

/* ------ Gobal setting ------ */
a {
  color: inherit;
  transition: all .25s;
  text-decoration: none;
}
a:focus, a:hover, a:active, a:visited {
  text-decoration: none;
  text-decoration: none;
}
ul, li {
  padding-left: 0;
  margin-bottom: 0;
}
dl, ol, ul {
  padding-inline-start: 20px;
}
button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  transition: all .25s;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
:focus:not(:focus-visible) {
  outline: 0;
}
.form-group {
  margin-bottom: 20px;
}
legend {
  font-size: 1.25rem;
}
.form-control,
.form-control:focus,
.form-select,
select {
  font-size: 18px;
  font-weight: 350;
  line-height: 28px;
  letter-spacing: 0.72px;
  padding: 6px 10px;
  color: var(--color-black);
  background-color: var(--bs-white);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: none;
}
.form-control:not(textarea),
.form-control:not(textarea):focus,
.form-select,
select {
  height: calc(2.375rem + 2px);
}
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
::-webkit-input-placeholder {
  color: var(--color-placeholder);
}
.form-group .form-control[disabled],
.form-group .form-control:disabled {
  background-color: var(--color-border);
  color: #797877;
}
.form-check-input:checked {
  background-color: var(--bs-white);
  border-color: var(--color-black);
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOS41IiBzdHJva2U9ImJsYWNrIi8+CjxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjUiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
}
.form-check-input:checked[type=checkbox] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.row.form-row  {
  margin-left: -4px;
  margin-right: -4px;
}
.row.form-row > [class^="col"] {
  padding-left: 4px;
  padding-right: 4px;
}
.custom-control-label::after {
  width: 18px;
  height: 18px;
  top: 3px;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 0;
}
.custom-control-input:checked~.custom-control-label::before {
  border-color: transparent;
  background-color: #23d2b4;
}
.form-select {
  padding: 5px 10px;
  background-size: 20px;
  --bs-form-select-bg-img: url(../images/icon/icon-dashicons_arrow-down-alt2.svg);
}
.form-select:focus {
  --bs-form-select-bg-img: url(../images/icon/icon-dashicons_arrow-up-alt2.svg);
}
.form-group input[type="submit"] {
  border: 0;
  padding: 0;
}
.form-group label.error {
  font-weight: normal;
}
button:focus {
  outline: 0;
}
.modal .btn-close {
  text-shadow: none;
  opacity: 1;
  width: 20px;
  height: 20px;
  z-index: 9;
  padding: 0;
}
.modal-open ::-webkit-scrollbar {
  background-color: transparent;
}
.modal-content {
  border: 0;
  border-radius: 20px;
  padding: 30px 40px;
}
.modal-body {
  padding: 1.25rem 0 40px;
}
.modal-backdrop {
  background-color: rgba(0,0,0,0.85);
}
nav[aria-label="Page navigation"] {
  margin-top: 70px;
}
.pagination {
  gap: 20px;
}
.page-link[aria-label] span {
  width: 24px;
  height: 24px;
  background-size: 100%;
  display: block;
}
.page-link[aria-label] span {
  background-image: url(../images/icon/icon-chevron-right.svg);
}
.page-link[aria-label="Previous"] span {
  transform: rotate(-180deg);
}
.disabled .page-link[aria-label] span {
  opacity: .2;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link { padding: 0; }
.page-item.disabled .page-link {
  background-color: transparent;
  border: 0;
}
.page-link {
  --bs-pagination-hover-bg: transparent;
  --bs-pagination-bg: transparent;
  --bs-pagination-font-size: 1.125rem;
  padding: 10px;
  line-height: 1;
  font-weight: 500;
  border: 0;
  color: var(--color-black);
  min-width: 44px;
  width: 44px;
  height: 44px;
}
.page-link:not([aria-label]) {
  border-radius: 100%;
  padding: 0;
}
.page-item.active .page-link:not([aria-label]),
.page-link.num:hover {
  color: var(--bs-white);
  background-color: var(--color-primary);
}
.page-link:focus {
  box-shadow: none;
}
.nav-pills {
}
.nav-pills .nav-item + .nav-item .nav-link {
  border-left: 0;
}
.nav-pills .nav-link {
  padding: 9px 4px;
  background-color: var(--bs-white);
  color: var(--color-black);
  border: 1px solid transparent;
  border-radius: 28px;
}
.nav-pills .nav-link:hover {
  background-color: var(--color-hover-gray);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--color-primary);
  background-color: #F2EFE8;
  border-color: var(--color-primary);
}
nav[aria-label="breadcrumb"] {
  margin-bottom: 30px;
}
.breadcrumb {
  padding: 2px 0;
  margin-bottom: 20px;
  --bs-breadcrumb-divider-color: var(--color-primary);
  --bs-breadcrumb-item-padding-x: 11px;
}
.breadcrumb-item a {
  color: var(--color-black)!important;
  padding: 0 6px;
  background: #F1F1F1;
  border-radius: 15px;
  line-height: normal;
  font-size: 14px;
}
.popover {
  border: 0 !important;
}
.popover-body {
  padding: 12px 8px;
}
.offcanvas {
  --bs-offcanvas-width: 440px;
  max-width: calc(100vw - 10%);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
}
.offcanvas-body {
  --bs-offcanvas-padding-y: 25px;
  --bs-offcanvas-padding-x: 20px;
}
.invalid-feedback {
  color: var(--color-alert);
  margin-top: 8px;
}
.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
}
.truncate-3 {
  -webkit-line-clamp: 3;
  -moz-line-clamp: 3;
}
.bg-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.border-dashed {
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--border-color-dashed);
}
/* 子選單向右展開的定位 */
.dropend .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
}

/* ------ 文字設定（Heading） ------ */
.ff-en {
  font-family: var(--font-en);
}
.c-trans {
  color: color-mix(in srgb, var(--bs-white), transparent 60%);
}
.h1-hero {
  font-size: 33px;
  line-height: 43px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.h2-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.84px;
}
.h3-subtitle {
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
}
.h4-small-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}
.body-text,
p {
  font-size: 20px;
  line-height: 38px;
  font-weight: 350;
}
.body-text-sm {
  font-size: 18px;
  line-height: 30px;
  font-weight: 350;
}
.caption {
  font-size: 14px;
  line-height: 28px;
  font-weight: 350;
  letter-spacing: 0.42px;
}
.caption-sm {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.8px;
}

/* ------ 最新消息模組（News Module）------ */
.news-list-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
}
.news-date {
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
}
.news-summary {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}


.icon {
  width: 26px;
  height: 26px;
  display: block;
  background: no-repeat center / 100%;
}
.icon.search {
  background-image: url(../images/icon/icon-search.svg);
}
.icon.home {
  background-image: url(../images/icon/icon-home.svg);
}
.icon.facebook {
  background-image: url(../images/icon/icon-facebook.svg);
}
.icon.instagram {
  background-image: url(../images/icon/icon-instagram.svg);
}
.icon.youtube {
  background-image: url(../images/icon/icon-youtube.svg);
}
.icon.facebook_w {
  background-image: url(../images/icon/icon-facebook_w.svg);
}
.icon.instagram_w {
  background-image: url(../images/icon/icon-instagram_w.svg);
}
.icon.youtube_w {
  background-image: url(../images/icon/icon-youtube_w.svg);
}
.ratio-cover::before {
  padding-top: 63.49%;
}
.ratio > img {
  object-fit: cover;
  object-position: center;
}
.back-top {
  position: fixed;
  bottom: 26px;
  right: 30px;
  z-index: 999;
  display: none;
  width: 50px;
  height: 50px;
  background: no-repeat url(../images/icon/icon-backTop.svg);
  transition: all .25s ease-out;
}

/* ------ navbar------ */
.navbar {
  padding: 0;
  z-index: 99;
  width: 100%;
  background-color: var(--bs-white);
}
.navbar-brand {
  padding: 0;
}
.navbar .nav-link,
.navbar .dropdown-item {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.64px;
  padding: 3px 5px!important;
}
.navbar .nav-link {
  color: var(--color-black);
  line-height: normal;
  overflow: hidden;
  position: relative;
  transition: all .35s ease-out;
  min-width: 140px;
}
.navbar-nav .dropdown-menu {
  flex-direction: column;
  gap: 10px;
  background-color: var(--bs-white);
  border: 0;
  border-radius: 0;
}
.navbar-nav .dropdown-menu.show {
  display: flex;
  gap: 10px;
}
.dropdown-item {
  position: relative;
}
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: transparent;
}
.navbar-toggler {
  border: 0;
  padding: 0;
}
.navbar-toggler-icon {
  width: 28px;
  height: 28px;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0LjUwMDYgOC4xNjY1OEg5LjMzMzk4QzkuMDI0NTYgOC4xNjY1OCA4LjcyNzgyIDguMDQzNjcgOC41MDkwMyA3LjgyNDg4QzguMjkwMjMgNy42MDYwOCA4LjE2NzMyIDcuMzA5MzQgOC4xNjczMiA2Ljk5OTkyQzguMTY3MzIgNi42OTA1IDguMjkwMjMgNi4zOTM3NSA4LjUwOTAzIDYuMTc0OTZDOC43Mjc4MiA1Ljk1NjE3IDkuMDI0NTYgNS44MzMyNSA5LjMzMzk4IDUuODMzMjVIMjQuNTAwNkMyNC44MTAxIDUuODMzMjUgMjUuMTA2OCA1Ljk1NjE3IDI1LjMyNTYgNi4xNzQ5NkMyNS41NDQ0IDYuMzkzNzUgMjUuNjY3MyA2LjY5MDUgMjUuNjY3MyA2Ljk5OTkyQzI1LjY2NzMgNy4zMDkzNCAyNS41NDQ0IDcuNjA2MDggMjUuMzI1NiA3LjgyNDg4QzI1LjEwNjggOC4wNDM2NyAyNC44MTAxIDguMTY2NTggMjQuNTAwNiA4LjE2NjU4Wk0yNS42NjczIDEzLjk5OTlDMjUuNjY3MyAxMy42OTA1IDI1LjU0NDQgMTMuMzkzOCAyNS4zMjU2IDEzLjE3NUMyNS4xMDY4IDEyLjk1NjIgMjQuODEwMSAxMi44MzMyIDI0LjUwMDYgMTIuODMzMkgzLjUwMDY1QzMuMTkxMjMgMTIuODMzMiAyLjg5NDQ5IDEyLjk1NjIgMi42NzU2OSAxMy4xNzVDMi40NTY5IDEzLjM5MzggMi4zMzM5OCAxMy42OTA1IDIuMzMzOTggMTMuOTk5OUMyLjMzMzk4IDE0LjMwOTMgMi40NTY5IDE0LjYwNjEgMi42NzU2OSAxNC44MjQ5QzIuODk0NDkgMTUuMDQzNyAzLjE5MTIzIDE1LjE2NjYgMy41MDA2NSAxNS4xNjY2SDI0LjUwMDZDMjQuODEwMSAxNS4xNjY2IDI1LjEwNjggMTUuMDQzNyAyNS4zMjU2IDE0LjgyNDlDMjUuNTQ0NCAxNC42MDYxIDI1LjY2NzMgMTQuMzA5MyAyNS42NjczIDEzLjk5OTlaTTI1LjY2NzMgMjAuOTk5OUMyNS42NjczIDIwLjY5MDUgMjUuNTQ0NCAyMC4zOTM3IDI1LjMyNTYgMjAuMTc1QzI1LjEwNjggMTkuOTU2MiAyNC44MTAxIDE5LjgzMzIgMjQuNTAwNiAxOS44MzMySDE0LjAwMDZDMTMuNjkxMiAxOS44MzMyIDEzLjM5NDUgMTkuOTU2MiAxMy4xNzU3IDIwLjE3NUMxMi45NTY5IDIwLjM5MzcgMTIuODM0IDIwLjY5MDUgMTIuODM0IDIwLjk5OTlDMTIuODM0IDIxLjMwOTMgMTIuOTU2OSAyMS42MDYxIDEzLjE3NTcgMjEuODI0OUMxMy4zOTQ1IDIyLjA0MzcgMTMuNjkxMiAyMi4xNjY2IDE0LjAwMDYgMjIuMTY2NkgyNC41MDA2QzI0LjgxMDEgMjIuMTY2NiAyNS4xMDY4IDIyLjA0MzcgMjUuMzI1NiAyMS44MjQ5QzI1LjU0NDQgMjEuNjA2MSAyNS42NjczIDIxLjMwOTMgMjUuNjY3MyAyMC45OTk5WiIgZmlsbD0iI0Q5NUUwQiIvPgo8L3N2Zz4K");
}
[aria-expanded="true"] .navbar-toggler-icon {
  background-size: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS44Nzg1IDAuMzkwNzc3QzE2LjM4MTYgLTAuMTEyMDkxIDE3LjE3NjkgLTAuMTMyMDM1IDE3LjY1NDggMC4zNDU4NTVDMTguMTMyNiAwLjgyMzg1OCAxOC4xMTIgMS42MTkxNyAxNy42MDg5IDIuMTIyMjJMMTAuNzMxIDguOTk5MThMMTcuNjA4OSAxNS44NzgxQzE4LjExMiAxNi4zODEyIDE4LjEzMjcgMTcuMTc2NSAxNy42NTQ4IDE3LjY1NDRDMTcuMTc2OSAxOC4xMzI0IDE2LjM4MTYgMTguMTExNyAxNS44Nzg1IDE3LjYwODZMOC45OTk1NiAxMC43MzA2TDIuMTIxNjMgMTcuNjA5NUMxLjYxODQ4IDE4LjExMjIgMC44MjMxMDcgMTguMTMyMyAwLjM0NTI2NiAxNy42NTQ0Qy0wLjEzMjQ2NSAxNy4xNzY0IC0wLjExMTg4NiAxNi4zODExIDAuMzkxMTY1IDE1Ljg3ODFMNy4yNjkwOSA4Ljk5OTE4TDAuMzkxMTY1IDIuMTIyMjJDLTAuMTExODMxIDEuNjE5MjMgLTAuMTMyMzA1IDAuODIzODc1IDAuMzQ1MjY2IDAuMzQ1ODU1QzAuODIzMjQ0IC0wLjEzMjEyMiAxLjYxOTQ4IC0wLjExMjM1NyAyLjEyMjYxIDAuMzkwNzc3TDguOTk5NTYgNy4yNjg3MUwxNS44Nzg1IDAuMzkwNzc3WiIgZmlsbD0iI0Q5NUUwQiIvPgo8L3N2Zz4K");
}
.header-utils {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  
}
.header-utils a:hover {
  color: var(--primary-color);
}
.utils-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.utils-divider {
  width: 1px;
  height: 16px;
  background: var(--color-border);
}
.btn-search {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid;
  border-radius: 30px;
  padding: 5px 8px;
  background: var(--bs-white);
  cursor: pointer;
  font-family: var(--font-en);
  letter-spacing: 0.64px;
}
.btn-search .icon {
  width: 20px;
  height: 20px;
}
.font-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.font-controls a,
.lang-switch {
  font-family: var(--font-en);
  text-decoration: none;
  transition: color 0.2s;
}
.font-controls__item {
  width: 45px;
  text-align: center;
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------ footer ------ */
.footer {
  background-color: var(--primary-color);
  color: var(--bs-white);
  padding: 1.5rem 0;
}
.footer .caption {
  line-height: 1.4!important;
}
.footer__info,
.footer__link {
  font-size: 14px;
  font-weight: 350;
  line-height: 24px;
  display: block;
}
.footer__link:hover, 
.footer__link:focus {
  text-decoration: underline;
}
.footer__social-link {
  transition: opacity 0.3s ease;
}
.footer__social-link:hover {
  opacity: 0.8;
}
/*** footer END ***/

@media screen and (min-width: 992px) {
  .layout {
    max-width: calc(100% - 36px);
    width: 100%;
    margin: auto;
  }
}
@media screen and (min-width: 1200px) {
  /* ------ navbar------ */
  .navbar .nav-link,
  .navbar .dropdown-item {
    font-size: 18px;
    letter-spacing: 0.72px;
    color: var(--color-text-primary)!important;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link:focus,
  .navbar .nav-link.active,
  .navbar .nav-link.show {
    background-color: var(--primary-color);
    color: var(--bs-white)!important;
  }
  .navbar .nav-item>.nav-link.dropdown-toggle::after {
    content: none;
  }
  .navbar-nav .dropdown-menu {
    padding: 10px 5px;
  }
  .dropend .dropdown-toggle::after {
    border: 0;
    background: no-repeat center / 100% url(../images/icon/icon-arrow.svg);
    width: 15px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(-50%);
    border: 0;
  }
  .header-utils {
    display: none;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.72px;
  }
}
@media screen and (max-width: 1199px) {
  /* ------ navbar ------ */
  .navbar-brand {
    padding: 12px 0;
  }
  .navbar-collapse {
    padding: 20px 10px;
  }
  .navbar .nav-item > .nav-link {
    width: 100%;
    padding-right: 20px!important;
    position: relative;
  }
  .navbar .nav-item > .nav-link.dropdown-toggle::after {
    border: 0;
    width: 14px;
    height: 7px;
    background: no-repeat center / 100% url(../images/icon/icon-chevron-down.svg);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    transition: transform .25s;
  }
  .navbar .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-180deg);
  }
  .navbar-nav > .nav-item + .nav-item {
    border-top: 1px solid #E2E2E2;
  }
  .navbar-nav > .nav-item { 
    padding: 8px 0;
  }
  .navbar-nav .dropdown-menu .dropdown-item.dropdown-toggle {
    color: var(--primary-color);
  }
  .dropend .dropdown-toggle::after { content: none; }
}
@media screen and (max-width: 991px) {
  .footer .layout > .row {
    gap: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .h1-hero {
    font-size: 30px;
  }
  .h2-title {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.72px;
  }
  .h4-small-title {
    font-size: 20px;
  }
  .body-text,
  p {
    font-size: 18px;
    line-height: 32px;
  }
  .body-text-sm {
    font-size: 16px;
    line-height: 2;
  }
  .caption {
    font-size: 12px;
    font-weight: 350;
    letter-spacing: 0.33px;
  }
}