@charset "UTF-8";
/*
-----------------------------------
    0. normalize
    1. 變數
    2. mixin
    3. 樣式共用
    4. flex欄位
    5. button按鈕
    6. input輸入框
    7. checkbox & radio
    8. table表格
    9. pagination頁碼
    10. list style列表樣式
    11. accordion手風琴
    12. 附件列表
    13. 麵包屑
    14. 側邊欄
    15. 桌機版 header & nav
    16. 平板、手機版 header & nav
    17. 主要內容區
    18. 網站導覽區塊
    19. 頁尾footer
    20. 回到頁首按鈕
    21. animated動畫
-----------------------------------
*/
/*===============================
    normalize
================================*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*===============================
    變數
================================*/
:root {
  --fontFamily: NotoSans, "PingFangTC", Microsoft JhengHei, "微軟正黑體", "Helvetica", "sans-serif";
  /*語意化顏色變數*/
  --color-gray-100: #f1f6fa;
  --color-gray-200: #f4f4f4;
  --color-gray-300: #ecf2f9;
  --color-gray-400: #ebeff2;
  --color-gray-500: #e3e8ed;
  --color-gray-600: #e1e1e1;
  --color-gray-700: #9fa4ac;
  --color-gray-800: #6c6c6c;
  --color-gray-900: #3d4e66;
  --color-black: #1f2429;
  --color-primary-darker: #00658c;
  --color-primary-dark: #006d97;
  --color-primary: #007eae;
  --color-primary-light: #c3eeff;
  --color-primary-lighter: #f0fbff;
  --color-secondary: #edf6ff;
  --color-secondary-light: #f3f9ff;
  --color-success: #00b428;
  --color-success-dark: #049624;
  --color-info: #1b61c0;
  --color-info-dark: #1654a8;
  --color-warning: #ffc700;
  --color-warning-light: #fff6e6;
  --color-warning-lighter: #fffaec;
  --color-danger: #ed0408;
  --color-text-primary: #007eae;
  --color-text-darkblue: #113563;
  --color-text-default: var(--color-gray-900);
  --color-text-light: var(--color-gray-700);
  --color-text-dark: var(--color-gray-800);
  --color-bg-primary: #f1f6fa;
  --color-bg-light: #ecf2f9;
  --color-bg-dark: #ebeff2;
  --color-border-default: var(--color-gray-600);
  --color-border-light: var(--color-gray-500);
  --color-linear: linear-gradient(to bottom, #f7fafd 0%, #eafbff 69%);
  --color-lakeblue: #daf7f7;
  --outlineBrown: #AE8800;
}

/*===============================
    mixin
================================*/
/*html整頁用*/
/*元件用，滾動條較細*/
/*===============================
    樣式共用
================================*/
* {
  transition: font-size 0.3s ease;
  font-family: var(--fontFamily);
}
*:focus {
  outline: 3px dashed var(--outlineBrown);
}

html {
  font-size: 1rem;
}

body {
  font-family: var(--fontFamily);
  font-size: 1rem;
  width: 100%;
  line-height: normal;
  color: var(--color-text-default);
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
body.zoom-200 .mobile-nav {
  position: static;
}
body.zoom-200 .info-section {
  margin-top: 0;
}
body.zoom-200 main {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-text-default);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.full-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
}

.goMainContent {
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  left: -1000px;
  z-index: 1000;
  background-color: var(--color-primary-dark);
  padding: 0.625rem;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.goMainContent:link {
  color: #fff;
}
.goMainContent:visited {
  color: #fff;
}
.goMainContent:focus {
  left: 5px;
  outline: 2px solid var(--color-warning);
}
.goMainContent:focus-visible {
  left: 5px;
  outline: 2px solid var(--color-warning);
}

a#key_U:focus,
a#key_C:focus,
a#key_B:focus,
a#key_L:focus {
  position: relative;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
}

.visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.ellipsis-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.text-red {
  color: var(--color-danger);
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  line-height: 0;
}

.icon-size-md {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  line-height: 0;
}

.icon-size-lg {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  line-height: 0;
}

[hidden] {
  display: none !important;
}

/*===============================
    flex欄位
================================*/
.flex-row {
  display: flex;
  position: relative;
}
.flex-row.align-items-start {
  align-items: flex-start;
}
.flex-row.align-items-center {
  align-items: center;
}
.flex-row.align-items-end {
  align-items: flex-end;
}
.flex-row.justify-content-start {
  justify-content: flex-start;
}
.flex-row.justify-content-center {
  justify-content: center;
}
.flex-row.justify-content-end {
  justify-content: flex-end;
}
.flex-row.justify-content-between {
  justify-content: space-between;
}
.flex-row.gap-4 {
  gap: 0.25rem;
}
.flex-row.gap-8 {
  gap: 0.5rem;
}
.flex-row.gap-10 {
  gap: 0.625rem;
}
.flex-row.gap-12 {
  gap: 0.75rem;
}
.flex-row.gap-16 {
  gap: 1rem;
}
.flex-row.gap-20 {
  gap: 1.25rem;
}
.flex-row.gap-24 {
  gap: 1.5rem;
}
.flex-row.gap-32 {
  gap: 2rem;
}
.flex-row.flex-wrap {
  flex-wrap: wrap;
}
.flex-row.column {
  flex-direction: column !important;
}

.col-12-md {
  width: 100%;
  box-sizing: border-box;
}

.col-10-md {
  width: 83.3333%;
  box-sizing: border-box;
}

.col-9-md {
  width: 75%;
  box-sizing: border-box;
}

.col-8-md {
  width: 66.6666%;
  box-sizing: border-box;
}

.col-7-md {
  width: 58.3333%;
  box-sizing: border-box;
}

.col-6-md {
  width: 50%;
  box-sizing: border-box;
}

.col-5-md {
  width: 41.6666%;
  box-sizing: border-box;
}

.col-4-md {
  width: 33.3333%;
  box-sizing: border-box;
}

.col-3-md {
  width: 25%;
  box-sizing: border-box;
}

.col-2-md {
  width: 16.6666%;
  box-sizing: border-box;
}

.col-1-md {
  width: 8.3333%;
  box-sizing: border-box;
}

@media screen and (max-width: 991px) {
  .col-12-sm {
    width: 100%;
  }
  .col-10-sm {
    width: 83.3333%;
  }
  .col-9-sm {
    width: 75%;
  }
  .col-8-sm {
    width: 66.6666%;
  }
  .col-7-sm {
    width: 58.3333%;
  }
  .col-6-sm {
    width: 50%;
  }
  .col-5-sm {
    width: 41.6666%;
  }
  .col-4-sm {
    width: 33.3333%;
  }
  .col-3-sm {
    width: 25%;
  }
  .col-2-sm {
    width: 16.6666%;
  }
  .col-1-sm {
    width: 8.3333%;
  }
  .flex-row.mobile-column {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .col-12-xs {
    width: 100%;
  }
  .col-10-xs {
    width: 83.3333%;
  }
  .col-9-xs {
    width: 75%;
  }
  .col-8-xs {
    width: 66.6666%;
  }
  .col-7-xs {
    width: 58.3333%;
  }
  .col-6-xs {
    width: 50%;
  }
  .col-5-xs {
    width: 41.6666%;
  }
  .col-4-xs {
    width: 33.3333%;
  }
  .col-3-xs {
    width: 25%;
  }
  .col-2-xs {
    width: 16.6666%;
  }
  .col-1-xs {
    width: 8.3333%;
  }
  .flex-row.mobile-column-xs {
    flex-direction: column;
  }
}
/*===============================
    button按鈕
================================*/
.button {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  font-weight: normal;
  color: var(--color-text-default);
  padding: 0.625rem 1rem;
  border-radius: 6px;
  line-height: normal;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s;
  white-space: normal;
}
.button.disabled, .button:disabled {
  cursor: not-allowed;
  opacity: 0.5 !important;
}
.button:hover {
  text-decoration: none;
}

.button-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.button-primary:not(.disabled):hover, .button-primary:not(.disabled):focus, .button-primary:not(:disabled):hover, .button-primary:not(:disabled):focus {
  background-color: var(--color-primary-dark);
}

.button-info {
  background-color: var(--color-info);
  color: #fff;
}
.button-info:not(.disabled):hover, .button-info:not(.disabled):focus, .button-info:not(:disabled):hover, .button-info:not(:disabled):focus {
  background-color: var(--color-info-dark);
}

.button-border {
  border: 1px solid var(--color-info);
  color: var(--color-info);
}
.button-border:not(.disabled):hover, .button-border:not(.disabled):focus, .button-border:not(:disabled):hover, .button-border:not(:disabled):focus {
  background-color: var(--color-secondary-light);
}
.button-border:has(img) {
  padding: 0.5625rem 1rem;
}

.button-border-default {
  border: 1px solid var(--color-gray-700);
  color: var(--color-text-default);
}
.button-border-default:not(.disabled):hover, .button-border-default:not(.disabled):focus, .button-border-default:not(:disabled):hover, .button-border-default:not(:disabled):focus {
  background-color: var(--color-gray-200);
}
.button-border-default:has(img) {
  padding: 0.5625rem 1rem;
}

.button-white {
  min-height: 36px;
  padding: 0.3125rem 0.625rem;
  box-sizing: border-box;
  background-color: #ffffff;
  color: var(--color-primary);
  border: 1px solid var(--color-gray-400);
  box-shadow: 0 0 6px 0 rgba(235, 239, 242, 0.5);
}
.button-white:not(.disabled):hover, .button-white:not(.disabled):focus, .button-white:not(:disabled):hover, .button-white:not(:disabled):focus {
  background-color: #ffffff;
  color: var(--color-primary);
  border: 1px solid var(--color-gray-400);
  box-shadow: 0 0 6px 0 rgba(235, 239, 242, 0.5);
}

.button-switch {
  background-color: #ffffff;
  color: var(--color-primary);
}
.button-switch:not(.disabled):hover, .button-switch:not(.disabled):focus, .button-switch:not(:disabled):hover, .button-switch:not(:disabled):focus {
  background-color: var(--color-primary);
  color: #ffffff;
}
.button-switch:not(.disabled):hover .btn-icon, .button-switch:not(.disabled):focus .btn-icon, .button-switch:not(:disabled):hover .btn-icon, .button-switch:not(:disabled):focus .btn-icon {
  background-image: url(../images/icon_arrow-right-square_white.png);
}
.button-switch .btn-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(../images/icon_arrow-right-square_blue.png);
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: normal;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-default);
  cursor: pointer;
}
.link:hover, .link:focus {
  color: var(--color-info);
  text-decoration: underline;
}

/*===============================
    input輸入框
================================*/
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group .flex-row {
  margin-bottom: 0;
}

.label {
  flex-shrink: 0;
}

.field {
  flex-grow: 1;
  position: relative;
}

.function {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.control-label {
  color: var(--color-text-default);
  font-size: 1rem;
  font-weight: 500;
}

.form-control {
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
  line-height: 1.375;
  padding: 0.5625rem 0.625rem;
  color: var(--color-text-default);
  border-radius: 5px;
  border: 1px solid var(--color-border-default);
  background-color: #fff;
  transition: all 0.3s;
  box-sizing: border-box;
  outline: none;
  position: relative;
}
.form-control::placeholder {
  color: var(--color-text-dark);
}
.form-control:disabled, .form-control.disabled {
  background-color: var(--color-gray-400);
  cursor: not-allowed;
}
.form-control:focus {
  border: 1px solid var(--color-info);
  box-shadow: 0 0 6px 0 #ebeff2;
}
.form-control:focus-visible {
  outline: 3px dashed var(--outlineBrown);
}
.form-control:not(.disabled).error, .form-control:not(:disabled).error {
  border: 1px solid var(--color-danger);
}
.form-control.calendar {
  background-image: url(../images/icon_calendar-week.png);
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: calc(100% - 0.625em) 50%;
  padding-right: 2.75rem;
}

.error-prompt {
  display: none;
  font-size: 1rem;
  color: var(--color-danger);
  margin-top: 0.5rem;
  position: absolute;
}

.form-group:has(.error) .error-prompt {
  display: block;
}

.search-bar .form-control-search {
  width: 100%;
  min-height: 2.5rem;
  font-size: 1rem;
  line-height: 1.375;
  padding: 0.5rem;
  color: var(--color-text-default);
  border-radius: 4px;
  border: 0;
  background-color: var(--color-gray-200);
  transition: all 0.3s;
  box-sizing: border-box;
  outline: none;
  position: relative;
}
.search-bar .form-control-search::placeholder {
  color: var(--color-text-default);
}
.search-bar .form-control-search:focus {
  border: 1px solid var(--color-info);
}
.search-bar .form-control-search:focus-visible {
  outline: 3px dashed var(--outlineBrown);
}
.search-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background-image: url(../images/icon_search_dark.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.5rem;
}

.select2-container {
  width: 100%;
  max-width: 100%;
}

.select2-container .select2-selection--single {
  height: auto;
}

.select2-container--default .select2-selection--single {
  padding: 0.625rem;
  border: 1px solid var(--color-border-default);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border: 1px solid var(--color-info);
  box-shadow: 0 0 6px 0 #ebeff2;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.375;
  color: var(--color-text-default);
  padding: 0;
  white-space: unset;
  padding-right: 1.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
  right: 14.5px;
  height: 100%;
}

.select2-container .select2-selection__arrow b {
  border: none !important;
}

.select2-container .select2-selection__arrow {
  background: url("../images/icon_arrow_down_black.png") no-repeat center;
  background-size: 24px 24px;
  width: 24px;
  height: 100%;
}

/*===============================
    checkbox & radio
================================*/
fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

legend {
  width: 100%;
  margin-bottom: 0.5rem;
}

.field:has(.form-checkbox),
.field:has(.form-radio) {
  padding: 0.3125rem 0;
  box-sizing: border-box;
  display: flex;
}

.form-checkbox,
.form-radio {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.form-checkbox:has(:disabled),
.form-radio:has(:disabled) {
  cursor: not-allowed;
}
.form-checkbox > span,
.form-radio > span {
  line-height: 1.375;
  color: var(--color-text-default);
}

input[type=checkbox] {
  flex-shrink: 0;
  appearance: none;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border: 2px solid var(--color-border-default);
  border-radius: 2px;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease-in;
  cursor: pointer;
}
input[type=checkbox]::before {
  content: "";
  display: block;
  width: 3px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg) scale(0);
  transition: all 0.1s ease;
  box-sizing: content-box;
}
input[type=checkbox]:checked {
  background-color: var(--color-info);
  border: 2px solid var(--color-info);
}
input[type=checkbox]:checked::before {
  transform: translateX(-50%) rotate(45deg) scale(1);
}
input[type=checkbox]:disabled {
  background-color: var(--color-gray-200);
  border-color: var(--color-border-default);
  cursor: not-allowed;
}
input[type=checkbox]:disabled::before {
  transform: translateX(-50%) rotate(45deg) scale(0);
}
input[type=checkbox]:disabled:checked {
  cursor: not-allowed;
  background-color: var(--color-border-default);
  border-color: var(--color-border-default);
}
input[type=checkbox]:disabled:checked::before {
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: translateX(-50%) rotate(45deg) scale(1);
}

input[type=radio] {
  flex-shrink: 0;
  appearance: none;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border: 2px solid var(--color-border-default);
  border-radius: 50%;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease-in;
  cursor: pointer;
}
input[type=radio] + span {
  white-space: nowrap;
}
input[type=radio]::before {
  content: "";
  display: block;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.1s ease;
}
input[type=radio]:checked {
  background-color: #fff;
  border: 4px solid var(--color-info);
}
input[type=radio]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
input[type=radio]:disabled {
  background-color: var(--color-gray-200);
  border-color: var(--color-border-default);
  cursor: not-allowed;
}
input[type=radio]:disabled::before {
  transform: translateX(-50%) rotate(45deg) scale(0);
}
input[type=radio]:disabled:checked {
  cursor: not-allowed;
  background-color: var(--color-gray-200);
  border-color: var(--color-border-default);
}
input[type=radio]:disabled:checked::before {
  background-color: #fff;
  transform: translate(-50%, -50%) scale(1);
}

/*===============================
    table表格
================================*/
.default-table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
}
.default-table .col-item {
  width: 80px;
}
.default-table .col-date {
  width: 120px;
}
.default-table thead tr th {
  padding: 0.625rem;
  background-color: var(--color-warning-lighter);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-default);
  box-sizing: border-box;
}
.default-table tbody tr {
  border-bottom: 1px solid var(--color-gray-400);
}
.default-table tbody tr:first-child {
  border-top: 1px solid var(--color-warning-lighter);
}
.default-table tbody tr td,
.default-table tbody tr th[scope=row] {
  height: 2.625rem;
  padding: 0.625rem;
  padding-bottom: 0.5625rem;
  box-sizing: border-box;
  word-break: break-word;
  font-size: 1rem;
  color: var(--color-text-default);
}
.default-table tbody tr th[scope=row] {
  font-weight: 400;
}
.default-table tbody tr .no-info {
  text-align: center;
}

.dictionary-table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
}
.dictionary-table .col-title {
  width: 200px;
}
.dictionary-table .col-date {
  width: 110px;
}
.dictionary-table thead th {
  padding: 0.625rem;
  background-color: var(--color-warning-lighter);
  box-sizing: border-box;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375;
  color: var(--color-text-default);
}
.dictionary-table tbody td,
.dictionary-table th[scope=row] {
  background-color: #fff;
  padding: 0;
  border-bottom: 1px solid var(--color-gray-400);
  box-sizing: border-box;
  word-break: break-word;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  color: var(--color-text-default);
}
.dictionary-table .cell-content {
  display: flex;
  align-items: center;
  padding: 0.625rem;
  padding-bottom: 0.5625rem;
  box-sizing: border-box;
}
.dictionary-table tbody tr:first-child {
  border-top: 1px solid var(--color-warning-lighter);
}
@media screen and (max-width: 1199px) {
  .dictionary-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .dictionary-table tbody tr td,
  .dictionary-table tbody tr th[scope=row] {
    padding: 0;
    border: 1px solid var(--color-gray-400);
    border-bottom: none;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 70px 1fr;
  }
  .dictionary-table tbody tr td::before,
  .dictionary-table tbody tr th[scope=row]::before {
    content: attr(data-th);
    display: flex;
    align-items: center;
    padding: 0.625rem;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-default);
    text-align: left;
    border-right: 1px solid var(--color-gray-400);
  }
  .dictionary-table tbody tr:nth-child(odd) td,
  .dictionary-table tbody tr:nth-child(odd) th[scope=row] {
    background-color: #fff;
  }
  .dictionary-table tbody tr:nth-child(even) td,
  .dictionary-table tbody tr:nth-child(even) th[scope=row] {
    background-color: var(--color-warning-lighter);
  }
  .dictionary-table tbody tr:first-child {
    position: relative;
    border-top: 0;
  }
  .dictionary-table tbody tr:first-child::before {
    content: "";
    width: 100%;
    height: 8px;
    background-color: var(--color-warning-lighter);
    position: absolute;
    top: -8px;
    border: 1px solid var(--color-gray-400);
    border-bottom: 0;
    box-sizing: border-box;
  }
  .dictionary-table tbody tr:last-child td:last-child {
    border-bottom: 1px solid var(--color-gray-400);
  }
}

/*===============================
    pagination頁碼
================================*/
.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

#pagination-container {
  display: flex;
}

.pagination-container .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}
.pagination-container .pagination li.page-first a {
  background-image: url(../images/icon_pignation_arrow_pre_black.png);
}
.pagination-container .pagination li.page-prev a {
  font-size: 0;
  background-image: url(../images/icon_pignation_arrow_left_black.png);
}
.pagination-container .pagination li.page-next a {
  font-size: 0;
  background-image: url(../images/icon_pignation_arrow_right_black.png);
}
.pagination-container .pagination li.page-last a {
  background-image: url(../images/icon_pignation_arrow_next_black.png);
}
.pagination-container .pagination li.disabled {
  cursor: not-allowed;
}
.pagination-container .pagination li.disabled a {
  pointer-events: none;
}
.pagination-container .pagination li.disabled.page-first a {
  background-image: url(../images/icon_pignation_arrow_pre_gray.png);
}
.pagination-container .pagination li.disabled.page-prev a {
  font-size: 0;
  background-image: url(../images/icon_pignation_arrow_left_gray.png);
}
.pagination-container .pagination li.disabled.page-next a {
  font-size: 0;
  background-image: url(../images/icon_pignation_arrow_right_gray.png);
}
.pagination-container .pagination li.disabled.page-last a {
  background-image: url(../images/icon_pignation_arrow_next_gray.png);
}
.pagination-container .pagination li.active a {
  color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination-container .pagination li.three-dots {
  font-size: 1.125rem;
  font-weight: 500;
}
.pagination-container .pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-default);
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 0.8125rem 0.5rem;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 50%;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  color: var(--color-text-default);
}
.pagination-info .total-text {
  flex-shrink: 0;
}
.pagination-info .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: normal;
  padding-right: 1.75rem;
}

/*===============================
    list style列表樣式
================================*/
.list-style-disc {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.125rem;
}
.list-style-disc > li {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.24px;
}
.list-style-disc > li ol,
.list-style-disc > li ul {
  padding-left: 2.25rem;
}

.list-style-decimal {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.125rem;
}
.list-style-decimal > li {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.24px;
}
.list-style-decimal > li ol,
.list-style-decimal > li ul {
  padding-left: 2.25rem;
}

.list-style-cjk-ideographic {
  list-style-type: cjk-ideographic;
  list-style-position: outside;
  padding-left: 2.25rem;
}
.list-style-cjk-ideographic > li {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.24px;
}
.list-style-cjk-ideographic > li ol,
.list-style-cjk-ideographic > li ul {
  padding-left: 2.25rem;
}

/*===============================
    accordion手風琴
================================*/
.filter-accordion {
  margin-top: 1rem;
  margin-bottom: 0.625rem;
}
.filter-accordion .filter-accordion-collapse {
  display: none;
  margin-top: 0.625rem;
  margin-bottom: 1rem;
}
.filter-accordion .filter-accordion-collapse .container {
  padding: 1rem;
  border-radius: 8px;
  background-color: rgba(241, 246, 250, 0.5);
  box-sizing: border-box;
}
.filter-accordion .filter-accordion-collapse .date-range-group {
  display: flex;
}
.filter-accordion .filter-accordion-collapse .input-row {
  margin-top: 1rem;
  display: flex;
  gap: 16px;
}
.filter-accordion .filter-accordion-collapse .input-row .form-group {
  flex: 1;
}
.filter-accordion .filter-accordion-collapse .input-row button {
  flex-shrink: 0;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .filter-accordion .filter-accordion-collapse .input-row {
    flex-direction: column;
  }
  .filter-accordion .filter-accordion-collapse .input-row button {
    align-self: auto;
    width: 100%;
  }
}

/*===============================
    附件列表
================================*/
.appendix {
  margin-top: 1.5rem;
}
.appendix .appendix-heading {
  font-size: 1.125rem;
  font-weight: 500;
  color: #5569d8;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 2px;
}
.appendix .appendix-heading::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(../images/icon_appendix_purple.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.appendix .appendix-list li + li {
  margin-top: 0.625rem;
}
.appendix .appendix-list li a {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 1rem;
  line-height: 1.375;
  color: #3d4e66;
  text-align: left;
  text-decoration: none;
  padding: 0.25rem 1rem;
  border-radius: 4px;
  background-color: var(--color-bg-primary);
  box-sizing: border-box;
  cursor: pointer;
}
.appendix .appendix-list li a:hover .file-name {
  text-decoration: underline;
}
.appendix .appendix-list li a .counter {
  width: 1.375rem;
}
.appendix .appendix-info {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--color-text-default);
}
.appendix .appendix-info a {
  text-decoration: underline;
  color: var(--color-info);
}

/*===============================
    麵包屑
================================*/
.breadcrumb {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  box-sizing: border-box;
}
.breadcrumb ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb ul li {
  color: var(--color-text-default);
  word-break: break-all;
  font-size: 0.875rem;
}
.breadcrumb ul li + li::before {
  content: "/";
  text-align: center;
  color: var(--color-text-default);
  padding: 0 0.5rem;
}
.breadcrumb ul li:last-child {
  font-weight: 600;
}
.breadcrumb ul li:last-child::before {
  font-weight: 400;
}
.breadcrumb ul li:first-child a {
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breadcrumb ul li:first-child a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/icon_home_black.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.breadcrumb ul li a {
  color: var(--color-text-default);
  font-size: 0.875rem;
  text-decoration: none;
}
.breadcrumb ul li a:has(img) {
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breadcrumb ul li a:hover {
  text-decoration: underline;
}

/*===============================
    側邊欄
================================*/
.sidebar {
  flex-shrink: 0;
  align-self: flex-start;
  width: 298px;
  border-radius: 8px;
  background-color: var(--color-bg-primary);
  padding: 0 0.25rem;
  box-sizing: border-box;
}
.sidebar .sidebar-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-darkblue);
  padding: 1rem 0.625rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border-light);
}
.sidebar .sidebar-menu .menu-item {
  padding: 1rem 0.625rem 0.9375rem 0.625rem;
  border-bottom: 1px solid var(--color-border-light);
  box-sizing: border-box;
}
.sidebar .sidebar-menu .menu-item > a {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-default);
  transition: color 0.3s ease;
  text-decoration: none;
}
.sidebar .sidebar-menu .menu-item > a:hover, .sidebar .sidebar-menu .menu-item > a:focus {
  color: var(--color-primary-dark);
}
.sidebar .sidebar-menu .menu-item.active > a {
  color: var(--color-primary-dark);
}
.sidebar .sidebar-menu .has-submenu .menu-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}
.sidebar .sidebar-menu .has-submenu .menu-toggle .menu-text {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-default);
  transition: color 0.3s ease;
}
.sidebar .sidebar-menu .has-submenu .menu-toggle .menu-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-image: url(../images/icon_arrow_leftbar_black.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
.sidebar .sidebar-menu .has-submenu .menu-toggle .menu-icon::after {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  inset: 0;
  background-image: url(../images/icon_arrow_leftbar_blue.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar .sidebar-menu .has-submenu .menu-toggle:hover .menu-text, .sidebar .sidebar-menu .has-submenu .menu-toggle:focus .menu-text {
  color: var(--color-primary-dark);
}
.sidebar .sidebar-menu .has-submenu .menu-toggle:hover .menu-icon::after, .sidebar .sidebar-menu .has-submenu .menu-toggle:focus .menu-icon::after {
  opacity: 1;
}
.sidebar .sidebar-menu .has-submenu.active .menu-toggle .menu-text {
  color: var(--color-primary-dark);
}
.sidebar .sidebar-menu .has-submenu.active .menu-toggle .menu-icon::after {
  opacity: 1;
  transform: rotate(90deg);
}
.sidebar .sidebar-menu .has-submenu.active .menu-toggle .menu-icon {
  background-image: none;
}
.sidebar .sidebar-menu .has-submenu .submenu {
  margin-top: 0.625rem;
  padding: 1rem 0.9375rem;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #fff;
}
.sidebar .sidebar-menu .has-submenu .submenu[hidden] {
  display: none;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item + .submenu-item {
  margin-top: 1rem;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  color: var(--color-text-default);
  transition: color 0.3s ease;
  position: relative;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a::before, .sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a::after {
  content: "";
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a::before {
  background-image: url(../images/icon_diamond-fill_gray.png);
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a::after {
  position: absolute;
  left: 0;
  background-image: url(../images/icon_diamond-fill_blie.png);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a:hover, .sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a:focus {
  color: var(--color-primary);
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a:hover::after, .sidebar .sidebar-menu .has-submenu .submenu .submenu-item > a:focus::after {
  opacity: 1;
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item.active > a {
  color: var(--color-primary);
}
.sidebar .sidebar-menu .has-submenu .submenu .submenu-item.active > a::before {
  background-image: url(../images/icon_diamond-fill_blie.png);
}
@media screen and (max-width: 1199px) {
  .sidebar {
    display: none;
  }
}

/*===============================
    桌機版 header & nav
================================*/
header {
  box-sizing: border-box;
  box-shadow: 0 2px 8px 0 rgba(31, 60, 79, 0.2);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
}
@media screen and (max-width: 1199px) {
  header {
    display: none;
  }
}

.header-top {
  padding: 0.75rem 0;
  box-sizing: border-box;
  background-color: #fff;
}
.header-top .wrap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.header-top .header-logo {
  flex: 0 0 auto;
}
.header-top .header-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-black);
}
.header-top .header-logo a img {
  width: 208px;
  height: 62px;
}
.header-top .header-tools {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  min-width: 0;
}
.header-top .header-tools .header-links ul {
  display: flex;
  gap: 9px;
}
.header-top .header-tools .header-links ul li a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-default);
}
.header-top .header-tools .font-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
.header-top .header-tools .font-controls .font-label {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-default);
}
.header-top .header-tools .font-controls button.font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: #ffffff;
  font-weight: 500;
  text-align: center;
  line-height: normal;
  cursor: pointer;
}
.header-top .header-tools .font-controls button.font-btn.font-small {
  font-size: 0.875rem;
}
.header-top .header-tools .font-controls button.font-btn.font-medium {
  font-size: 1.125rem;
}
.header-top .header-tools .font-controls button.font-btn.font-large {
  font-size: 1.375rem;
}
.header-top .header-tools .font-controls button.font-btn:hover {
  text-decoration: none;
}
.header-top .header-tools .font-controls button.font-btn.active {
  background-color: var(--color-primary);
  color: #ffffff;
}
.header-top .header-tools .header-search {
  width: 280px;
  min-width: 0;
}

.header-bottom {
  background-color: var(--color-primary-dark);
}
.header-bottom .main-nav #main-menu {
  display: flex;
  justify-content: space-between;
}
.header-bottom .main-nav #main-menu > li {
  position: relative;
}
.header-bottom .main-nav #main-menu > li > a {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem 0.3125rem 0.25rem;
  box-sizing: border-box;
  text-decoration: none;
  border-bottom: 3px solid var(--color-primary-dark);
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}
.header-bottom .main-nav #main-menu > li > a:hover, .header-bottom .main-nav #main-menu > li > a:focus, .header-bottom .main-nav #main-menu > li > a.active {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);
}
.header-bottom .main-nav #main-menu > li > a:hover .menu-arrow, .header-bottom .main-nav #main-menu > li > a:focus .menu-arrow, .header-bottom .main-nav #main-menu > li > a.active .menu-arrow {
  background-image: url(../images/icon_arrow_down_lightblue.png);
}
.header-bottom .main-nav #main-menu > li:has(ul > li > a:hover) > a, .header-bottom .main-nav #main-menu > li:has(ul > li > a:focus) > a {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);
}
.header-bottom .main-nav #main-menu > li:has(ul > li > a:hover) > a .menu-arrow, .header-bottom .main-nav #main-menu > li:has(ul > li > a:focus) > a .menu-arrow {
  background-image: url(../images/icon_arrow_down_lightblue.png);
}
.header-bottom .main-nav #main-menu > li ul {
  width: 300px;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  z-index: 97;
  display: none;
}
.header-bottom .main-nav #main-menu > li ul li {
  position: relative;
}
.header-bottom .main-nav #main-menu > li ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: left;
  color: var(--color-text-default);
  background-color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.header-bottom .main-nav #main-menu > li ul li a:hover, .header-bottom .main-nav #main-menu > li ul li a:focus {
  background-color: var(--color-primary-light);
}
.header-bottom .main-nav #main-menu > li ul li a .text {
  display: flex;
  flex-direction: column;
}
.header-bottom .main-nav #main-menu > li ul li:only-child > a {
  border-radius: 10px;
}
.header-bottom .main-nav #main-menu > li ul li:first-child:not(:only-child) > a {
  border-radius: 10px 10px 0 0;
}
.header-bottom .main-nav #main-menu > li ul li:last-child:not(:only-child) > a {
  border-radius: 0 0 10px 10px;
}
.header-bottom .main-nav #main-menu > li ul li ul {
  top: 0;
  left: 100%;
  position: absolute;
}
.header-bottom .main-nav #main-menu > li ul li ul li > a {
  white-space: wrap;
}
.header-bottom .main-nav #main-menu > li:last-child > ul {
  left: auto;
  right: 0;
}
.header-bottom .main-nav #main-menu > li:last-child > ul a {
  flex-wrap: wrap;
}
.header-bottom .main-nav .menu-arrow {
  width: 24px;
  height: 24px;
  margin-left: 0.625rem;
  box-sizing: border-box;
  background-image: url(../images/icon_arrow_down_white.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.header-bottom .main-nav .submenu-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 0.625rem;
  background-image: url(../images/icon_arrow_leftbar_black.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/*===============================
    平板、手機版 header & nav
================================*/
.mobile-nav {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}
@media screen and (max-width: 1199px) {
  .mobile-nav {
    display: block;
  }
}

.mobile-nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 2px solid var(--color-primary-dark);
  padding: 0.375rem 1rem 0.25rem 1rem;
  box-sizing: border-box;
}
.mobile-nav-header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1f2429;
}
.mobile-nav-header .logo a img {
  width: 147px;
  height: 44px;
}
.mobile-nav-header .mobile-nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #fff;
  border: 0;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  background-image: url(../images/icon_burgermenu.png);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.mobile-nav-header .mobile-nav-btn:hover, .mobile-nav-header .mobile-nav-btn.active {
  background-color: var(--color-primary-lighter);
}

.mobile-menu {
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  box-sizing: border-box;
  opacity: 0;
  display: none;
}
.mobile-menu.active {
  display: block;
}
.mobile-menu.fadeInUp {
  animation: fadeInUp 0.5s both;
}
.mobile-menu.fadeOutDown {
  animation: fadeOutDown 0.5s both;
}
.mobile-menu .mobile-search {
  padding: 0.625rem 1rem 0.5625rem 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border-light);
  background-color: #fff;
}
.mobile-menu .mobile-menu-list li .menu-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem 0.5625rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  box-sizing: border-box;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
.mobile-menu .mobile-menu-list li .menu-wrap a {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: left;
  color: #3d4e66;
  text-decoration: none;
  transition: color 0.3s ease;
}
.mobile-menu .mobile-menu-list li .menu-wrap button {
  width: 32px;
  height: 32px;
  border: 0;
  background-color: transparent;
  background-image: url(../images/icon_arrow_leftbar_black.png);
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.mobile-menu .mobile-menu-list li .menu-wrap button.active {
  background-image: url(../images/icon_arrow_down_leftbar_blue.png);
}
.mobile-menu .mobile-menu-list li .menu-wrap:has(button.active) {
  background-color: var(--color-primary-lighter);
}
.mobile-menu .mobile-menu-list li .menu-wrap:has(button.active) a {
  color: var(--color-primary);
}
.mobile-menu .mobile-menu-list li ul {
  display: none;
}
.mobile-menu .mobile-menu-list li ul li a {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem 0.625rem 1.5rem;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 1.25rem;
  text-align: left;
  color: #3d4e66;
  background-color: #fff;
  transition: background-color 0.3s ease;
}
.mobile-menu .mobile-menu-list li ul li a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(../images/icon_diamond-fill_gray.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 0.625rem;
}
.mobile-menu .mobile-menu-list li ul li a .text {
  display: flex;
  flex-direction: column;
}
.mobile-menu .mobile-menu-list li:has(.menu-wrap button.active) ul li a {
  background-color: var(--color-primary-lighter);
}
.mobile-menu .mobile-links ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.625rem 1rem;
  box-sizing: border-box;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(31, 36, 41, 0.5);
  z-index: 98;
}

/*===============================
    主要內容區
================================*/
main {
  background-image: url(../images/inpage_bg.png), var(--color-linear);
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
  flex-grow: 1;
  box-sizing: border-box;
  min-height: 42px;
}
@media screen and (max-width: 1199px) {
  main {
    margin-top: 56px;
    min-height: auto;
    background-size: cover;
  }
  main .wrap {
    padding: 0 1rem;
  }
}

.main-wrap {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 84px;
  padding: 1.5rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 9px;
  box-shadow: 0 0 6px 0 rgba(31, 60, 79, 0.1);
}
.main-wrap .main-content {
  width: 100%;
  flex-grow: 1;
  box-sizing: border-box;
}

.title-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-gray-400);
  padding-bottom: 0.625rem;
  box-sizing: border-box;
}
.title-row h2 {
  flex: 1 1 auto;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.title-row a {
  flex-shrink: 0;
  margin-left: auto;
}

.article-author-row {
  display: flex;
  gap: 24px;
  margin: 1rem 0;
}
.article-author-row span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-default);
}
@media screen and (max-width: 1199px) {
  .article-author-row {
    flex-direction: column;
    gap: 8px;
  }
}

.article-content p {
  word-wrap: break-word;
  font-size: 1rem;
  font-weight: normal;
  line-height: normal;
  text-align: left;
  color: var(--color-text-default);
}

.article-wrap {
  display: flex;
  gap: 16px;
}
.article-wrap:has(.article-img) .article-content {
  width: 66.6666%;
}
.article-wrap:has(.article-img) .article-img {
  width: 33.3333%;
}
@media screen and (max-width: 767px) {
  .article-wrap {
    flex-direction: column;
  }
  .article-wrap:has(.article-img) .article-content,
  .article-wrap:has(.article-img) .article-img {
    width: 100%;
  }
}

.image-gallery {
  width: 100%;
}
.image-gallery .image-wrap {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  position: relative;
}
.image-gallery .image-wrap:hover .imgs .hover-effect {
  background-color: rgba(0, 0, 0, 0.3);
}
.image-gallery .image-wrap:hover .imgs .hover-effect img {
  opacity: 1;
}
.image-gallery .image-wrap .imgs {
  width: 100%;
  height: 100%;
  position: absolute;
}
.image-gallery .image-wrap .imgs a:first-child {
  display: block;
}
.image-gallery .image-wrap .imgs a {
  width: 100%;
  height: 100%;
  display: none;
}
.image-gallery .image-wrap .imgs a img {
  border-radius: 6px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-gallery .image-wrap .imgs a:first-child:focus::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(../images/icon_zoom_white.png);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  box-sizing: border-box;
}
.image-gallery .image-wrap .imgs .hover-effect {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 49, 64, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
  pointer-events: none;
  border-radius: 6px;
}
.image-gallery .image-wrap .imgs .hover-effect img {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  opacity: 0;
}
.image-gallery .image-wrap .imgs .multiple-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
}
.image-gallery .image-wrap .imgs .multiple-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

button.mfp-close:focus,
button.mfp-arrow:focus {
  outline: 3px dashed var(--outlineBrown);
}

@media all and (max-width: 900px) {
  .mfp-container {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  .mfp-arrow-left {
    left: 15px;
  }
  .mfp-arrow-right {
    right: 15px;
  }
  .mfp-image-holder .mfp-close,
  .mfp-iframe-holder .mfp-close {
    right: 0;
  }
}
.back-btn-row {
  margin-top: 1.5rem;
}

/*===============================
    網站導覽區塊
================================*/
.guide-section .guide-group {
  position: relative;
}
.guide-section .guide-group .guide-toggle-btn {
  width: 140px;
  height: 40px;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
  border: 0;
  background-color: var(--color-secondary);
  box-shadow: 0 -2px 8px -3px rgba(31, 60, 79, 0.2);
  background-image: url(../images/icon_arrow_up_blue.png);
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: 50%;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}
.guide-section .guide-group .guide-toggle-btn.active {
  background-image: url(../images/icon_arrow_down_leftbar_blue.png);
}
.guide-section .guide-group .guide-container {
  display: none;
  background-color: var(--color-secondary-light);
  border-radius: 40px 40px 0 0;
  border-bottom: solid 1px #c0e2ef;
  box-shadow: 0 2px 8px 0 rgba(31, 60, 79, 0.2);
}
.guide-section .guide-group .guide-container .guide-items {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  padding: 2rem 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.guide-section .guide-group .guide-container .guide-items .guide-item .guide-item-title {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  color: #3d4e66;
  text-decoration: none;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.guide-section .guide-group .guide-container .guide-items .guide-item .guide-link-group li a {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.375;
  text-align: left;
  color: #3d4e66;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.guide-section .guide-group .guide-container .guide-items .guide-item .guide-link-group li a .text {
  display: flex;
  flex-direction: column;
}
.guide-section .guide-group .guide-container .guide-items .guide-item .guide-link-group li a .text span {
  font-size: 1rem;
  line-height: 1.375;
}
@media screen and (max-width: 1199px) {
  .guide-section {
    display: none;
  }
}

/*===============================
    頁尾footer
================================*/
footer {
  background-color: var(--color-primary-dark);
  color: #ffffff;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}
footer .wrap {
  position: relative;
}
footer .footer-contacts {
  display: flex;
  gap: 40px;
}
footer .footer-contacts .footer-contact {
  flex: 1;
}
footer .footer-contacts .footer-contact ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
footer .footer-contacts .footer-contact ul li {
  min-width: 277px;
  display: flex;
  align-items: center;
  gap: 4px;
}
footer .footer-contacts .footer-contact ul li a {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.375;
}
@media screen and (max-width: 991px) {
  footer .footer-contacts {
    flex-direction: column;
  }
}
footer .footer-info {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
}
@media screen and (max-width: 1199px) {
  footer .footer-info {
    grid-template-columns: repeat(1, 1fr);
  }
}
footer .footer-info nav a {
  color: #ffffff;
}
footer .footer-info .footer-meta p {
  display: inline;
}
footer .footer-info .footer-meta p + p {
  margin-left: 1rem;
}
footer .certifications {
  position: absolute;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 1199px) {
  footer .certifications {
    position: static;
    margin-top: 1rem;
  }
}

/*===============================
    回到頁首按鈕
================================*/
.scroll-top-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: none;
}
.scroll-top-btn.show {
  display: block;
}
.scroll-top-btn .wrap {
  position: relative;
}

.btn-gotop {
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.25rem 0.375rem;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--color-primary-darker);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  position: absolute;
  bottom: 60px;
  right: 1rem;
}
.btn-gotop::before {
  flex-shrink: 0;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-image: url(../images/icon_gotop.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*===============================
    animated動畫
================================*/
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}/*# sourceMappingURL=component.css.map */