@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansscsliced.css);
@charset "UTF-8";
.btn-info {
  background-color: #00bcd4 !important;
  border-color: #00bcd4 !important;
}

.btn-danger {
  background-color: #e91e63 !important;
  border-color: #e91e63 !important;
}

.btn-red {
  background-color: red !important;
  border-color: red !important;
}

.btn-success {
  background-color: #8bc34a !important;
  border-color: #8bc34a !important;
}

.text-info {
  color: #00bcd4 !important;
}

.text-danger {
  color: #e91e63 !important;
}

.text-red {
  color: red !important;
}

.text-success {
  color: #8bc34a !important;
}

/**
 * 好看的 menu hamburger => https://jonsuh.com/hamburgers/
 */
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0px 0px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger.is-active:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: white;
}

.hamburger-box {
  width: 32px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 32px;
  height: 4px;
  background-color: white;
  border-radius: 6px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -8px;
}
.hamburger-inner::after {
  bottom: -8px;
}

/*
 * 3DY
 */
.hamburger--3dy .hamburger-box {
  perspective: 64px;
}
.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg);
}
.hamburger--3dy.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dy.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * Arrow
 */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-6.4px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-6.4px, 0, 0) rotate(45deg) scale(0.7, 1);
}

#logo-large {
  margin-top: 17px;
}

#logo-small {
  margin-top: 10px;
}

#bottom-footer {
  font-size: 13px;
}

.hover-effect:hover {
  background-color: #f8f9fa !important;
}

.list-page-title {
  font-size: 26px;
  color: #212121;
  margin-bottom: 0;
}

.list-item-row:hover {
  background-color: #f8f9fa;
}
.list-item-row .sticky-top-title {
  color: #00bcd4;
}
.list-item-row p {
  font-size: 17px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 15px;
}

.list-head h1 {
  color: #212121;
  font-size: 17px;
  padding-left: 15px;
}
.list-head hr {
  margin-top: 0;
}

.mx-n3 {
  margin-right: -1rem !important;
  margin-left: -1rem !important;
}

.mx-n5 {
  margin-right: -3rem !important;
  margin-left: -3rem !important;
}

@media (min-width: 576px) {
  .mx-sm-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-sm-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
}
@media (min-width: 768px) {
  .mx-md-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-md-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
}
@media (min-width: 992px) {
  .mx-lg-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-lg-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
}
@media (min-width: 1200px) {
  .mx-xl-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-xl-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
}
input[readonly] {
  cursor: default;
}

input[type=radio],
.cursor-pointer {
  cursor: pointer;
}

input[type=file],
.cursor-copy {
  cursor: copy;
}

[disabled] {
  cursor: not-allowed;
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}
.spinner .path {
  stroke: #00bcd4;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
/**
 * 使用 google fonts: Noto Sans 繁體中文與簡體中文
 * @see https://fonts.google.com/earlyaccess
 */
/* initialization and @override Bootstrap 4 style */
#js-article-body a {
  color: #3366CC;
  font-family: "Source Sans Pro", "Noto Sans TC", "Noto Sans SC Sliced", "微軟正黑體", "新細明體", sans-serif;
}

/* 圖片的樣式設定 */
#js-article-body img {
  max-width: 100%; /* 限制圖片最大寬度不超過父容器 */
  height: auto; /* 保持圖片的長寬比 */
  -o-object-fit: contain;
     object-fit: contain; /* 防止圖片變形 */
  display: block; /* 讓圖片成為區塊元素 */
  margin: 0 auto; /* 圖片在區塊內水平置中 */
}

#js-article-body {
  overflow: hidden; /* 隱藏任何可能的溢出 */
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  color: #212121;
  font-family: "Source Sans Pro", "Noto Sans TC", "Noto Sans SC Sliced", "微軟正黑體", "新細明體", sans-serif;
}

/* 預設背景顏色為底 */
body {
  background-color: white;
}

a:hover {
  color: black;
  text-decoration: none;
}

.table td, .table th {
  vertical-align: middle;
}

.btn {
  border-radius: 0 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.breadcrumb-trail p {
  color: #333333;
  margin-bottom: 0;
}
.breadcrumb-trail .breadcrumb-trail-item + .breadcrumb-trail-item::before {
  content: " > ";
}
.breadcrumb-trail a {
  color: #333333;
}
.breadcrumb-trail a:hover {
  color: black;
  font-weight: 500;
}

#js-white-area {
  min-height: 674px;
}

#article-info {
  color: #757575;
}

#article-sidebar {
  width: 350px;
}

.more-articles-title {
  color: #424242;
  font-size: 20px;
}

.more-articles-icon-wrapper {
  background-color: rgba(224, 224, 224, 0.3);
  border-radius: 100%;
  font-size: 27px;
  min-height: 45px;
  min-width: 45px;
}

.more-articles-body {
  font-size: 14px;
}

#fb-wrapper {
  margin-top: 100px;
}

#back {
  color: #333333;
}
#back:hover {
  color: black;
  font-weight: 500;
}

/* 附件檔案連結樣式 */
.attachment-link {
  max-width: 100%;
  display: inline-block;
  white-space: normal; /* 允許文字自動換行 */
  word-wrap: break-word; /* 兼容舊版瀏覽器的換行屬性 */
  overflow-wrap: break-word; /* 現代瀏覽器推薦使用 */
  word-break: break-all; /* 如果有超長字串也能強制斷行 */
}

/* 在小螢幕上限制寬度 */
@media (max-width: 767.98px) {
  .attachment-link {
    max-width: 70%;
    width: 70%;
  }
  /* 確保附件檔案標籤和連結在小螢幕上換行顯示 */
  .attachment-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* 始終向左對齊 */
    text-align: left; /* 文字左對齊 */
    margin-bottom: 5px; /* 在手機版增加更多間距 */
    white-space: normal; /* 允許文字自動換行 */
    word-wrap: break-word; /* 兼容舊版瀏覽器的換行屬性 */
    overflow-wrap: break-word; /* 現代瀏覽器推薦使用 */
    word-break: break-all; /* 如果有超長字串也能強制斷行 */
  }
}
.attachment-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* 增加下方間距 */
  padding-top: 5px; /* 增加上方間距 */
}

.attachment-label {
  min-width: 120px; /* 根據實際需要調整 */
  margin-right: 15px; /* 標題和檔名之間的間隔 */
}

.attachment-link {
  word-break: break-all; /* 確保長檔名能夠換行 */
}

#top-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: #00bcd4;
  padding-top: 0;
  padding-bottom: 0;
}
#top-bar > div > ul > li > a {
  font-size: 15px;
}

header {
  margin-top: 56px;
}

@media (min-width: 768px) {
  #top-bar {
    position: relative;
    z-index: auto;
  }
  header {
    margin-top: 0;
  }
}
#navbar {
  box-shadow: 0 0.5rem 0.6rem rgba(0, 0, 0, 0.1) !important;
}

#navbar > div > ul > li > a {
  font-size: 18px;
  font-weight: bold;
}
#navbar > div > ul > li > div > a {
  font-size: 15px;
}

.dropdown-menu {
  border-radius: 0;
}

.dropdown-toggle::after {
  display: none;
}

.app-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  .app-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .app-container {
    max-width: 1140px;
  }
}
main {
  background-color: #f5f5f5;
}

#top-footer > div > h1 {
  font-size: 15px;
  font-weight: bold;
}
#top-footer > div > a > p {
  font-size: 14px;
  margin: 0;
  padding: 0.5rem 0;
}
#top-footer > div > a > p:hover {
  background-color: #f8f9fa !important;
}

@media (max-width: 767px) {
  #js-white-area .card {
    transition: all 0.2s ease-in-out;
  }
  #js-white-area .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }
}
#js-white-area a {
  text-decoration: none;
  color: inherit;
}
#js-white-area a:hover {
  text-decoration: none;
}

.carousel-indicators {
  bottom: -10px;
}

.main-title,
.services-card-chinese-title {
  font-size: 20px;
}

.services-card-english-title {
  font-size: 16px;
}

.services-card-description {
  color: #616161;
  font-size: 14px;
}

.services-card-link {
  color: #212121;
}

.services-card-link:hover {
  color: black;
  text-decoration: none;
}

/* 職涯影音 */
.video-link > div > h1 {
  font-size: 14px;
}

.position-relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.video-btn-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  justify-content: center;
  z-index: 150;
}

.video-btn-wrapper-previous {
  left: -25px;
}

.video-btn-wrapper-next {
  right: -25px;
}

.video-btn {
  display: flex;
  margin-top: 5rem;
  border-radius: 50%;
  background-color: rgba(224, 224, 224, 0.6);
  color: #444444;
  font-size: 30px;
  width: 50px;
  height: 50px;
}