@import url("font-awesome.css");
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* === 基本設定 === */
html {
  line-height: 1;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans TC", "Roboto", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  animation: naturalFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.en {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  animation: naturalFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
b, strong {
  font-weight: 600;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}
.sr-only:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 10px;
  background: #df4180;
  color: #fff;
  outline: 3px solid rgba(112,44,135,.6);
  outline-offset: 3px;
  z-index: 1000;
}
/* 只在使用鍵盤 Tab 導航時顯示外框 */
*:focus-visible {
  outline: 3px solid rgba(112,44,135,.6); 
  outline-offset: 3px;
  border-radius: 1px;
}
.skip-to-main {
	position: absolute;
	width: auto;
	height: auto;
	padding: 1rem 1.2rem;
	background-color: rgba(112,44,135,1);
	color: #fff;
	z-index: 99999;
	display: block;
	font-size: 1rem;
	top: -999rem; /* 預設在視覺外 */
	left: -999rem;
	text-decoration: none;
	transition: all 0.3s ease-in-out !important;
	opacity: 0; /* 預設透明 */
	transform: translateY(-20px) !important; /* 初始狀態為向上偏移 */
}
.skip-to-main:focus {
  position: absolute;
  top: 0; /* 當 focus 時跳到視覺範圍內 */
  left: 0;
  opacity: 1; /* 透明度變為可見 */
  transform: translateY(0) !important; /* focus 時移動到正常位置 */
  transition: all 0.3s ease-in-out !important; /* 平滑過渡效果 */
  outline: 3px solid rgba(112,44,135,1);
  outline-offset: -3px;
}
.skip-to-main:hover {
	color: #fff;
}
#acccenter {
	position: absolute;
	margin-left:-20px;
	text-decoration: none;
	color: transparent;
}
#acccenter:hover, #acccenter:focus-visible {
	color: #702C87 !important
}
#U {
	position: absolute;
	margin-left:-25px;
	margin-top: -8px;
	text-decoration: none;
	color: transparent;
}
#U:hover, #U:focus-visible  {
	color: #702C87 !important
}
#Z {
	position: absolute;
	margin-left:-25px;
	margin-top: -8px;
	text-decoration: none;
	color: transparent;
}
#Z:hover, #Z:focus-visible {
	color: #702C87 !important
}
@media (max-width: 680px) {
#Z {
	position: absolute;
	margin-left:-10px;
	margin-top: -25px;
	text-decoration: none;
	color: transparent;
}
}
#N {
	position: absolute;
	margin-left:-20px;
	margin-top: 0px;
	text-decoration: none;
	color: transparent;
}
#N:hover, #N:focus-visible {
	color: #702C87 !important
}
figure {
	margin-bottom: 0;
}
@keyframes naturalFadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 預防閃爍 */
html {
  background-color: #fff;
}
/* 如果需要停用動畫 */
@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1;
    animation: none;
  }
}
a {
  transition: all 0.4s ease;
  color: #000;
}
a:hover {
  transition: all 0.4s ease;
  color: #702C87;
}
.title-1 {
  font-size: 4.6875rem;
  letter-spacing: .2rem;
  font-family: "DM Serif Display", serif;
  padding: 0;
  margin: 0;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1340px;
}
/* === Header 設定 === */
.top-link {
  padding: 34px 0 0;
  background-image: url("../images/bg-top.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.top-link .container-fluid {
  width: 94%;
  max-width: 1380px;
}
.top-link.in-page {
  padding: 34px 0 220px;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 2992 / 975; /* 保持原始圖片比例 */
}
.top-link.in-page .border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
}
.top-link.in-page .nav-link {
  padding: .9rem .8rem !important;
}
.top-link.in-page .navbar-brand.logo-bg {
  margin-bottom: 20px;
}
.top-subnav {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 5px;
}
.subnav {
  display: inline-block;
  margin: 8px 0;
}
.subnav-link {
  font-size: 0.875rem;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 0;
}
.subnav-nav {
	display: inline-block;
}
.subnav-nav:after {
  content: "|";
  padding: 0 12px;
  color: rgba(0, 0, 0, .8);
  font-size: .8rem;
  position: relative;
  top: -1px;
}
.subnav-link:hover:after {
  color: #000;
}
/* === Swiper 設定 === */
.bg-swiper {
  background-image: url("../images/bg-slider.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}
.swiper {
  width: 100%;
  height: auto;
  background-color: transparent;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 65%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.swiper-slide img {
  width: 100%;
  aspect-ratio: 2000 / 1090;
  object-fit: cover;
  display: block;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.slide-link:hover {
  text-decoration: none;
}
.slide-link .swiper-caption, .swiper-caption {
  position: absolute;
  top: 78%;
  left: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
  padding: 12px 25px 14px;
  text-align: left;
  line-height: 1.6;
  display: inline-block;
  max-width: 320px;
  transition: background-color 0.3s ease;
}
.en .slide-link .swiper-caption, .swiper-caption {
   font-size: .9rem;  
   line-height: 1.5;
}
.slide-link:hover .swiper-caption {
  background: rgba(0, 0, 0, 0.8);
}
.swiper-caption:empty {
  display: none;
}
a.slide-link:focus-visible {
outline: 3px solid rgba(112,44,135,.6);
outline-offset: -10px;
border-radius: 10px!important;
	
}

/* Swiper 分頁樣式 */
.swiper-pagination {
  bottom: 20px !important;
}
.swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 2px solid #000;
  opacity: 1;
  transition: background 0.3s ease, transform 0.3s ease;
  margin: 0 8px !important;
}
.swiper-pagination-bullet-active {
  background: #000;
  border: 2px solid #000;
}
.swiper-pagination-bullet:focus-visible {
 outline: 2px solid rgba(112,44,135,.8); 
 outline-offset: 2px;
 border-radius: 999px;
}
/* Swiper 按鈕樣式 */
.swiper-button-next, .swiper-button-prev {
  background-color: #000;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.swiper-button-next::after, .swiper-button-prev::after {
  content: "";
  background: none;
}
.swiper-button-next svg, .swiper-button-prev svg {
  display: none;
}
.swiper-button-prev {
  background-image: url('../images/left-arrow.png');
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center 46%;
  left: 30px;
}
.swiper-button-next {
  background-image: url('../images/right-arrow.png');
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center 46%;
  right: 30px;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 1);
  transform: scale(1.1);
}
.swiper-button-prev:focus-visible , .swiper-button-next:focus-visible  {
  outline: 3px solid rgba(112,44,135,.8); 
  outline-offset: 3px;
}
/* === Navbar 設定 === */
.navbar {
  padding: 0;
}
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-nav {
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.nav-item {
  margin: 0 21.1px;
}
.en .nav-item {
  margin: 0 12px;
}
.nav-link {
  font-size: 1.0625rem;
  font-weight: 400;
  color: #000;
  transition: color 0.3s ease;
  padding: 1.5rem .8rem !important;
}
.en .nav-link {
  font-size: 1.2rem;
  font-weight: 400;
  color: #000;
  transition: color 0.3s ease;
  padding: 1.4rem 0.5rem !important;
  font-family: "DM Serif Display", serif;
  letter-spacing: 0.05rem;
}
.nav-link:hover {
  color: #7b518a;
}
.nav-link:focus-visible  {
	box-shadow: none;
	outline: 3px solid rgba(112,44,135,.6);
	outline-offset: -3px;
	border-radius: 5px;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
/* Dropdown 設定 */
.dropdown-menu {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scaleY(0.95);
  transform-origin: top;
  transition:
    opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s ease-out;
  margin-top: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.9); /* 稍微調整透明度 */
  padding: 1rem 0 1.1rem;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 0;
  margin-left: -22px;
}
/* 選單展開狀態 */
.nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu, .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}
/* 下拉項目樣式 */
.dropdown-item {
  opacity: 0;
  transform: translateY(0px);
  transition:
    opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.2s ease-out;
  transition-delay: calc(var(--item-index) * 0.03s);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.45rem 2.3rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.en .dropdown-item {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0em;
  padding: 0.45rem 2rem;
}
/* 移除點擊後的持續反白效果 */
.dropdown-item:focus:not(:focus-visible) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  outline: none;
}
/* 移除選單項目的預設外框 */
.dropdown-item:focus {
  outline: none;
}
/* 確保在點擊時的視覺反饋 */
.dropdown-item:active, .dropdown-item:hover {
  background-color: transparent;
  color: #A88AB3;
}
/* 下拉項目展開狀態 */
.nav-item:hover .dropdown-item, .nav-item:focus-within .dropdown-item, .dropdown-menu.show .dropdown-item {
  opacity: 1;
  transform: translateY(0);
}
/* 優化效能 */
.dropdown-menu, .dropdown-item {
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 選單關閉動畫 */
.nav-item:not(:hover):not(:focus-within) .dropdown-menu {
  transition-duration: 0.2s;
}
/* 移除預設的下拉箭頭 */
.dropdown-toggle::after {
  display: none;
}
.dropdown-arrow {
  display: none;
}
/* 確保下拉按鈕和連結在同一行 */
.dropdown .nav-link {
  display: inline-block;
}
/* Navbar Brand 背景圖片 */
.navbar-brand.logo-bg {
  background-image: url('../images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  display: block;
  width: 428px;
  height: 119px;
  margin-bottom: 30px;
}
/* === 社交圖標 === */
.social-icons {
  display: inline-block;
  margin: 8px 15px 8px 0;
}
.social-icons i {
  margin: 0 8px;
}
.language-icon {
  position: relative;
  display: inline-block; /* 確保大小可調 */
}
.language-icon a {
  overflow: hidden; /* 防止超出邊界 */
  border-radius: 999rem;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: rgba(255, 255, 255, .9);
  background-color: #000;
  transition: opacity 0.4s ease; /* 初始設定透明度過渡 */
  z-index: 1;
  padding: 9px 42px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.language-icon a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/bg-btn.jpg);
  background-position: center;
  background-position: left top;
  background-size: 110% auto;
  opacity: 0; /* 初始透明 */
  transition: opacity 0.4s ease; /* 淡入淡出過渡效果 */
  z-index: -1; /* 置於底層 */
}
.language-icon a:hover::before {
  opacity: 1; /* 滑鼠懸停時背景淡入 */
}
.language-icon:focus-visible {
  outline: 3px solid rgba(112,44,135,.6); 
  outline-offset:3px;
}
/* === News 區塊設定 === */
.news {
  padding: 35px 0 60px;
  background-image: url("../images/bg-news2.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.news .g-4 {
  --bs-gutter-y: 2rem;
  --bs-gutter-x: 1.5rem;
}
.news .container-fluid {
  width: 98%;
  max-width: 1480px;
}
.news-item {
  position: relative;
  border: none;
  background: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid #191919;
}
.news-item a {
  text-decoration: none;
}
.news-item img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 800 / 500;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.news-item:hover img {
  transform: scale(1.1);
}
.news-item:hover, .news-item:focus {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.09);
  background-color: #fff;
}
.news-item a:focus-visible {
  outline: 3px solid rgba(112,44,135,.6);
  outline-offset: 3px;
}
.news-img-container {
  width: 100%;
  aspect-ratio: 800 / 500;
  overflow: hidden;
  position: relative;
}
.news-info {
  border-top: 6px solid #f2f2f2;
  padding: 20px 15px 45px 20px;
}
.news-info h3 {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}
.en .news-info h3 {
  font-size: 1rem !important; 
  line-height: 1.4 !important;
}
.news-info p {
  font-weight: 500 !important;
}
.news-item p {
  font-family: "Roboto", serif !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  color: #666666 !important;
  letter-spacing: 0.05rem !important;
  line-height: 1.5 !important;
}
.badge {
  font-size: 0.8rem;
  line-height: 1;
  padding: 3px 14px 5px;
  border-radius: 999rem;
  font-weight: 400;
}
.en .badge {
   white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.badge2 {
  font-size: 0.8rem;
  line-height: 1;
  padding: 3px 15px 2px !important;
  border-radius: 999rem;
  font-weight: 400;
  height: 24px;
  letter-spacing: .05rem;
}
.en .badge2 {
  font-size: 0.8rem;
  line-height: 1;
  padding: 4px 15px 2px !important;
  border-radius: 999rem;
  font-weight: 400;
  height: 24px;
  letter-spacing: 0.03rem;
}
/* === 關於我們區塊 === */
.about-us {
  position: relative;
  /*background-image: url("../images/bg-about.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;*/
  padding: 140px 0 185px;
  background:
    linear-gradient(-45deg, rgba(238, 119, 82, .8), rgba(231, 60, 126, .4), rgba(35, 166, 213, .8), rgba(35, 213, 171, .8)), url('../images/bg-about.jpg');
  background-size: 300% 300%, cover;
  background-blend-mode: overlay;
  background-position: center center, center top;
  animation: gradientBG 8s ease infinite;
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%, center top;
  }
  50% {
    background-position: 100% 50%, center top;
  }
  100% {
    background-position: 0% 50%, center top;
  }
}
.about-us h2 {
  font-size: 2.1rem;
  letter-spacing: .15rem;
  font-weight: 400;
}
.en .about-us h2 {
  font-size: 2.2rem;
  letter-spacing: 0rem;
  font-weight: 400;
  font-family: "DM Serif Display", serif;
}
.about-us h6 {
  letter-spacing: 1px;
}
.about-us p {
  line-height: 1.9;
  font-size: 1.0625rem;
  padding-bottom: 10px;
}
.en .about-us p {
  line-height: 1.8;
  font-size: 1rem;
  padding-bottom: 10px;
}
.about-us .text-en {
  font-family: "DM Serif Display", serif;
  letter-spacing: 0.03rem;
  font-size: 1.05rem;
  margin-bottom: 0;
  padding-bottom: 0;
}
.about-us a.btn {
  border-radius: 50px;
}
.pic-about {
  width: 104%;
  margin: 0;
}
.pic-about img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  object-fit: cover;
  opacity: 0; /* 初始隱藏 */
  transition: opacity 0.3s ease; /* 較短的過渡時間 */
  will-change: opacity; /* 提示瀏覽器優化性能 */
}
.pic-about img.animate-in {
  opacity: 1;
}
.about-info {
  display: flex;
  flex-direction: column;
  padding: 30px 70px 0 60px;
  justify-content: flex-start;
}
/* === Art Gallery 樣式 === */
.art-gallery {
  padding: 40px 0 0;
}
.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.marquee {
  display: flex;
  width: calc(400px * 10); /* 調整根據圖片數量 */
  animation: scroll 30s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
.marquee img {
  width: 100%;
  max-width: 680px;
  object-fit: cover;
  aspect-ratio: 700 / 345; /* 設定圖片比例 */
  margin-right: 20px; /* 圖片間隔 */
  cursor: pointer;
}
.marquee img:focus-visible  {
  outline: 3px solid rgba(112,44,135,.6);
  outline-offset: -8px;
  border-radius: 10px;
}
@keyframes scroll {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-2000px); /* 滑動距離 */
  }
}
/* 滑鼠懸停時暫停動畫 */
.marquee-container:hover .marquee {
  animation-play-state: paused;
}
/* Modal 大圖樣式 */
.modal {
  background-color: rgba(0, 0, 0, .6);
}
.modal-dialog {
  max-width: none !important;
  margin: 1.75rem auto;
  display: flex;
  justify-content: center;
}
.modal-content {
  background-color: transparent;
  border: none;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-body img {
  max-width: 90vw;
  max-height: 85vh; /* 縮小高度以留空間給說明文字 */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.modal-header {
  position: absolute;
  top: -20px;
  right: -55px;
  z-index: 1050;
  border: none;
  padding: 0;
}
.modal-header .btn-close {
  padding: 12px;
  margin: 0;
  filter: invert(1);
  opacity: 0.8;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
} 
.modal-header .btn-close:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(122, 60, 0, 0.8);
	filter: invert(1) hue-rotate(75deg);
}
box-shadow:hover {
  opacity: 1;
  transform: scale(1.1);
}
/* 圖片說明文字 */
.modal-caption {
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 10px 0;
  font-size: .9375rem;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}
.art-gallery h2 {
  margin: 0;
  font-family: "DM Serif Display", serif;
  font-size: 6.875rem;
  position: relative;
  margin-bottom: -42px;
  z-index: 2;
}
.art-gallery a {
  transition: color 0.3s ease, transform 0.3s ease;
}
/* === Contact 區塊樣式 === */
.contact {
  padding: 75px 0 15px;
}
.contact h4 {
  font-family: "DM Serif Display", serif;
  font-size: 3rem;
  letter-spacing: .2rem;
  margin-bottom: 10px;
}
.contact-info p {
  margin-bottom: 0px;
  padding: 0;
  line-height: 1.8;
}
.contact a {
  transition: color 0.3s ease;
}
.contact a:hover {
  color: #007bff;
}
.contact .fab {
  transition: transform 0.3s ease;
}
.contact img {
  max-width: 100%;
  height: auto;
}
.bg-footer {
  background-image: url("../images/bg-footer.jpg");
  background-size: 100% auto;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.footer-box-1 p, .footer-box-1 {
  font-size: 1rem;
  letter-spacing: 0.05rem;
}
.en .footer-box-1 p, .footer-box-1 {
  font-size: 1rem;
  letter-spacing: 0rem; 
}
.footer-box-2 {
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  padding-left: 20px;
  padding-top: 8px;
  margin: 10px 0;
}
.footer-box-2 h5 {
  margin: 0 10px 14px 30px;
}
.en .footer-box-2 h5 {
  margin: 0 5px 14px 20px; 
}
.footer-box-2 h5 a {
  font-size: 1rem;
  text-decoration: none;
  font-weight: 400;
}
.footer-box-2 h5 a:hover {
  color: #7b518a;
}
.footer-box-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: -6px;
}
.footer-logo {
  display: block;
  width: 274px;
}
.copyright {
  font-size: 0.875rem;
  text-align: right;
  margin: 20px -5px 10px 0;
  line-height: 1.6;
}
.copyright a {
  text-decoration: none;
}
.social-icons-round {
  margin-top: 12px;
}
.social-icons-round a {
  width: 42px;
  height: 42px;
  border: 1px solid #000;
  border-radius: 999rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.2rem;
  margin-right: 15px;
  transition: all 0.3s ease;
}
.social-icons-round a:hover {
  font-size: 1.2rem;
  background-color: #000;
  color: #fff;
  transition: all 0.3s ease;
}
.social-icons-round a:focus-visible {
  outline: 3px solid rgba(112,44,135,.6);
  outline-offset: 3px;
}
.contact .social-icons-round a:focus-visible {
  outline: 3px solid rgba(112,44,135,.6); 
  outline-offset: 3px;
}
.pic-news img {
  height: 31px;
  width: auto;
  margin-left: 4px;
  margin-bottom: 18px;
}
.btn-group-box {
  display: flex;
  justify-content: flex-end;
}
.btn-group-box a {
  text-decoration: none;
}
.btn-group-icon {
  display: inline-flex;
  background-color: #000;
  background-image: url('../images/right-arrow.png');
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center 46%;
  color: #fff;
  width: 62px;
  height: 62px;
  border: 1px solid #000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative;
}
.btn-group-icon::after {
  content: "";
  background: none;
}
.btn-group-box:hover .btn-group-icon {
  background-color: rgba(0, 0, 0, 1);
  transform: scale(1.1);
}
.btn-group-icon.outline {
  background-color: transparent;
  background-image: url('../images/right-arrow-bk.png');
}
.btn-group-box:hover .btn-group-icon.outline {
  background-color: rgba(0, 0, 0, 1);
  transform: scale(1.1);
  background-image: url('../images/right-arrow.png');
}
.btn-group-box .btn-text {
  display: inline-flex;
  text-decoration: none;
  color: #000;
  padding-left: 15px;
  width: auto;
  position: relative;
  top: 5px;
  font-size: 1rem;
}
/* === 基礎設置 === */
/* 標題動畫 */
.title-animation {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.title-animation.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* 圖片動畫 */
.image-animation {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-animation.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* 圖片淡入效果 */
.fade-image {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-image.animate-in {
  opacity: 1;
  transform: scale(1);
}
/* 卡片動畫 */
.card-animation {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-animation.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* 動畫延遲 */
.title-animation, .image-animation, .card-animation {
  transition-delay: var(--animation-delay, 0s);
}
/* Hover 效果 */
.news-img-container img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-item {
  transition: all 0.2s ease;
}
.news-item:hover .news-img-container img {
  transform: scale(1.05);
}
.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* 效能優化 */
.title-animation, .image-animation, .card-animation, .fade-image, .fixed-nav {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 動畫降級處理 */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .title-animation, .image-animation, .card-animation, .fade-image, .fixed-nav {
    transition: none;
  }
}
/* 固定導航欄樣式 */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0);
  padding: 8px 0 12px;
}
.fixed-nav.show {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}
/* 容器布局 */
.fixed-nav .container {
  display: flex;
  align-items: center;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 15px;
  height: 60px;
}
/* Logo 樣式 */
.fixed-nav .navbar-brand {
  width: 288px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  margin-right: 0px;
}
/* 導航區域 */
.fixed-nav .navbar {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}
.fixed-nav .navbar-collapse {
  flex-grow: 1;
}
.fixed-nav .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fixed-nav .nav-item {
  margin: 0 15px;
  position: relative;
}
.fixed-nav .nav-link {
  font-size: 1rem;
  color: #000;
  padding: 2.1rem .2rem 1.72rem !important;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.en .fixed-nav .nav-link {
  font-size: 1.1rem;  
}
.fixed-nav .nav-link:hover {
  color: #702C87;
}
/* 下拉選單 */
.fixed-nav .dropdown-menu {
  position: absolute;
  margin-top: 0;
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  border-radius: 0;
  padding: 0.8rem 0;
  min-width: 150px;
  margin-left: -28px;
}
.fixed-nav .dropdown-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  padding: 0.35rem 2rem;
  white-space: nowrap;
}
.fixed-nav .dropdown-item:hover {
  color: #A88AB3;
}
.fixed-nav .dropdown-item:focus-visible {
  color: #212529;
}
/* 下拉按鈕 */
.fixed-nav .dropdown-toggle.dropdown-arrow {
  display: none;
}
/* === 手機選單 === */
.phone-menu-btn {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 1.6rem;
  right: 1.2rem;
  cursor: pointer;
  z-index: 9999;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.phone-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: all 0.3s ease;
  transform-origin: center;
}
.phone-menu-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background-color: #000;
}
.phone-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.phone-menu-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background-color: #000;
}
.phone-menu-btn:focus-visible {
	outline: 3px solid rgba(112,44,135,.6);
	outline-offset: 5px;
	border-radius: 1px;
}
.phone-menu-btn.active:focus-visible {
	outline: 3px solid rgba(112,44,135,.6);
	outline-offset: 5px;
	border-radius: 1px;
}
.phone-side-nav {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100%;
  background-image: url("../images/bg-phone-nav.jpg");
  background-size: cover;
  padding-top: 70px;
  transition: 0.3s ease-in-out;
  z-index: 1500;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0);
  overflow-y: auto;
}
.phone-side-nav.open {
  right: 0;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.phone-nav-item {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.phone-nav-link {
  display: flex;
  align-items: center;
  padding: .8rem 1.6rem;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  position: relative;
}
a.phone-nav-link:focus-visible {
	outline: 3px solid rgba(112,44,135,.6);
	outline-offset: -3px;
	border-radius: 6px;
}
a.phone-submenu-link:focus-visible  {
	outline: 3px solid rgba(112,44,135,.6);
	outline-offset: -3px;
	border-radius: 6px;
}
.nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
}
/* 原有的圖示CSS */
.icon-home::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #333;
  border-top: none;
  border-radius: 0 0 2px 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}
.icon-home::after {
  content: '';
  position: absolute;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #333;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.icon-features::before {
  content: '★';
  position: absolute;
  font-size: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.icon-keywords::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 14px;
  border: 2px solid #333;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon-keywords::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #333;
  border-radius: 50%;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}
.icon-collab::before, .icon-collab::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.icon-collab::before {
  left: 2px;
}
.icon-collab::after {
  right: 2px;
}
.icon-value::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #333;
  transform: rotate(45deg);
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
}
.phone-nav-link:hover {
  background-color: var(--background-light);
  color: var(--accent-color);
}
.phone-nav-link.has-submenu::after {
  content: '';
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: translateY(-50%) rotate(-45deg);
  transition: 0.3s;
}
.phone-nav-item.active .phone-nav-link.has-submenu::after {
  transform: translateY(-50%) rotate(45deg);
}
.phone-submenu {
  background-color: var(--background-light);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.phone-nav-item.active .phone-submenu {
  max-height: 300px;
  margin-bottom: 10px;
}
.phone-submenu-link {
  display: block;
  padding: 0.8rem 2rem;
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.0625rem;
  transition: 0.3s;
}
.phone-submenu-link:hover {
  background-color: white;
  color: var(--accent-color);
  padding-left: 2.5rem;
}
.phone-submenu .phone-submenu-link {
  padding: 0.4rem 2.5rem;
  font-size: 0.9375rem;
}
/* 新增的社群媒體和語言選擇區塊樣式 */
.social-language-section {
  padding: 1rem 1.5rem 2rem;
  display: flex;
  align-items: center;
}
.social-language-section .social-icons-round {
  margin-top: 5px;
}
.social-language-section .social-icons-round a {
  margin-left: 0;
}
.social-links {
  display: flex;
  gap: 1rem;
}
.social-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-radius: 4px;
  transition: 0.3s;
}
.social-link:hover {
  color: var(--accent-color);
  background-color: rgba(0, 0, 0, 1);
}
.language-selector {
  text-decoration: none;
  transition: 0.3s;
  font-size: .9rem !important;
}
.language-selector:hover {
  background-color: rgba(0, 0, 0, 1);
}
.phone-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 1400;
}
.phone-overlay.show {
  opacity: 1;
  visibility: visible;
}
/* 返回頂部按鈕樣式 */
.back-to-top {
  position: fixed;
  bottom: 26px;
  right: 16px;
  width: 45px;
  height: 45px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 999;
  border: 1px solid #000;
  padding: 0;
}
.back-to-top::before {
  content: '';
  width: 12px;
  height: 12px;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  transform: rotate(45deg) translate(2px, 2px);
}
.back-to-top:hover {
  background-color: #000;
  transform: translateY(0) scale(1.1);
}
.back-to-top:hover::before {
  border-left-color: #fff;
  border-top-color: #fff;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 確保焦點狀態清晰可見 */
.back-to-top:focus-visible {
  outline: 3px solid rgba(112,44,135,.6);
  outline-offset: 3px;
  border-radius: 999px;
}
/* 確保按鈕在鍵盤焦點時可見 */
.back-to-top:focus:not(:focus-visible) {
  outline: none;
}
/* 支援使用者減少動態效果的偏好設定 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}
.inner-wrapper {
  padding-bottom: 60px;
  background-image: url("../images/bg-inpage.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
/* 左側選單樣式 */
.side-nav {
  top: 120px;
  padding: 60px 8px;
  transition: all 0.3s ease;
  z-index: 90;
}
/* 選單標題 */
.menu-title-en {
  font-family: "DM Serif Display", serif !important;
  font-size: 3.2rem !important;
  margin-bottom: 0px !important;
  color: #000 !important;
  letter-spacing: 0.02em !important;
}
.en .menu-title-en {
    margin-bottom: 20px!important;
    letter-spacing: 0em !important;
    line-height: 1.1!important;
    font-weight: 500!important;
}
.menu-title-ch {
  font-size: 1.2rem;
  margin-bottom: 32px;
  color: #000;
  font-weight: 600;
  padding-left: 2px;
}
/* 選單列表 */
.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 30px;
  ;
}
/* 主選單項目 */
.side-nav > ul > li {
  margin-bottom: 0px;
}
.side-nav > ul > li > a {
  display: block;
  padding: 8px 0 8px 15px;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
}
/* 主選單圓點 */
.side-nav > ul > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  transition: all 0.3s ease;
}
/* 子選單 */
.side-nav > ul > li > ul {
  padding-left: 19px;
  margin-top: 0px;
  display: none;
}
.side-nav > ul > li.open > ul {
  display: block;
  margin-left: 0;
  margin-bottom: 20px;
}
.side-nav > ul > li > ul > li {
  margin-bottom: 0px;
}
.side-nav > ul > li > ul > li > a {
  display: block;
  padding: 4px 0 4px 12px;
  color: #333;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  position: relative;
}
.side-nav > ul > li > ul > li > a.active {
  color: #702C87 !important
}
/* 子選單箭頭 */
.side-nav > ul > li > ul > li > a::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 2px;
  color: #666;
  transition: all 0.3s ease;
  font-weight: 600;
  transform: scale(1.1) !important;
}
.side-nav > ul > li > ul > li > a.active::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 2px;
  color: #666;
  transition: all 0.3s ease;
  font-weight: 600;
  transform: scale(1.1) !important;
  background: none !important;
}
/* Hover效果 */
.side-nav > ul > li > a:hover {
  color: #702C87;
  transform: translateX(5px);
}
.side-nav > ul > li > a:hover::before {
  background: #702C87;
  transform: scale(1.2);
}
/* 子選單 hover 效果 */
.side-nav > ul > li > ul > li > a:hover {
  color: #702C87;
  padding-left: 18px;
  transition: all 0.3s ease;
}
.side-nav > ul > li > ul > li > a:hover::before {
  color: #702C87;
}
/* 子選單當前頁面狀態 */
.side-nav > ul > li > ul > li > a.active {
  color: #702C87;
}
.side-nav > ul > li > ul > li > a.active::before {
  color: #702C87;
}
/* 當前頁面狀態 */
.side-nav a::before {
  transform: scale(1.8) !important;
  margin-top: 2px;
}
.side-nav a.active {
  color: #702C87 !important;
}
.side-nav a.active::before {
  background: #702C87 !important;
  transform: scale(1.8);
}
.side-nav a.active:hover::before {
  transform: scale(1.8);
}
/* 展開的子選單動畫 */
.side-nav > ul > li > ul {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.side-nav > ul > li.open > ul {
  opacity: 1;
  transform: translateY(0);
}
/* 內容區域基本設置 */
.content-area {
  padding: 100px 40px 70px;
  line-height: 1.8;
  font-size: 1rem;
  font-weight: 400;
}
.content-area.style2 {
  padding: 55px 40px 70px;
}
.content-area .editor-box a {
  color: #702C87;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.content-area .editor-box a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #702C87;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: bottom right;
}
.content-area .editor-box.news-box {
  border-bottom: 1px solid #000;
  padding: 0 3px 60px 3px;
}
.content-area .editor-box img {
  max-width: 100%;
  height: auto;
}
.content-area a:hover {
  text-decoration: none;
  color: #702C87;
}
.content-area a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* 主標題 */
.content-area .page-title {
  font-size: 1.875rem;
  font-weight: 600;
  margin: 0 0 30px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #000;
  letter-spacing: .1rem;
}
.en .content-area .page-title {
  font-size: 1.875rem;
  letter-spacing: 0.03rem;
}
.content-area .page-title.news-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 40px 0;
}
.en .content-area .page-title.news-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 40px 0;
  letter-spacing: 0rem;
}
/* 標題系統 */
.content-area h1, .content-area .h1 {
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.content-area h2, .content-area .h2 {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.en .content-area h2, .en .content-area .h2 {
  font-size: 1.45rem;
  line-height: 1.4;
  font-weight: 700; 
}
.content-area h3, .content-area .h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.en .content-area h3, .en .content-area .h3 {
  font-size: 1.3rem;
  font-weight: 700; 
  line-height: 1.4;
}
.content-area h4, .content-area .h4 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.content-area h5, .content-area .h5 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.content-area h6 .content-area .h6 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.4;
}
.content-area p {
  margin: 0 0 .6rem 0;
  padding: 0;
  line-height: 1.8;
  font-weight: 400;
}
.en .content-area p {
  line-height: 1.7;
}
.content-area p + p {
  margin-top: 1rem;
}
.content-area p + h1, .content-area p + .h1, .content-area p + h2, .content-area p + .h2, .content-area p + h3, .content-area p + .h3 {
  margin-top: 1.8rem;
}
.content-area p + h4, .content-area p + .h4, .content-area p + h5, .content-area p + .h5, .content-area p + h6, .content-area p + .h6 {
  margin-top: .8rem;
}
/* 列表樣式 */
.content-area ul {
  padding-left: 1.2em;
  margin: .7rem 0 1.4rem 0;
}
.content-area ul li {
  position: relative;
  padding-left: 0.5em;
  margin-bottom: 0.1em;
  list-style-type: disc;
  font-weight: 400;
}
.content-area ul li ul li {
	list-style-type: circle;
}
.content-area ol {
  padding-left: 1.2em;
  margin: .7rem 0 1.4rem 0;
  counter-reset: item;
  font-weight: 400;
}
.content-area ol li {
  position: relative;
  padding-left: 0.5em;
  margin-bottom: 0.1em;
}
/* 創建水平滾動容器 */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 表格樣式 */
.content-area table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1em 0;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(112, 44, 135, 0.08);
  border: none;
}
.content-area thead tr {
  background: linear-gradient(90deg, rgba(123, 149, 197, 1) 0%, rgba(151, 132, 184, 1) 50%, rgba(168, 132, 184, 1) 100%);
}
.content-area th {
  color: #fff;
  font-weight: 500;
  padding: 10px 10px;
  text-align: center;
  border: none;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  background: transparent;
}
.en .content-area th {
  line-height: 1.3!important;
}
.content-area td {
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  vertical-align: middle;
  transition: all 0.3s ease;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
.en .content-area td {
  line-height: 1.4;  
}
.content-area td:last-child {
  border-right: none;
}
.content-area tr:nth-child(odd) td {
  background: rgba(243, 244, 246, 6); /* 使用淺灰色背景 */
}
/* 麵包屑樣式 */
.breadcrumb-wrapper {
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  padding: 20px 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  margin-bottom: 0;
}
.breadcrumb a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}
.breadcrumb a:hover {
  color: #702C87;
}
.breadcrumb a:not(:last-child)::after {
  content: '／';
  margin-left: 12px;
  margin-right: 12px;
  color: #666;
}
/* 首頁圖標 */
.breadcrumb i {
  margin-right: 6px;
  font-size: 0.875rem;
}
.banner-in {
  display: none;
  height: 220px;
  background-size: cover;
  background-position: center bottom;
}
.banner-in img {
  width: 100%;
  height: auto;
}
/* === 團隊 === */
.faculty-card {
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  border-bottom: 1px solid #000;
}
.faculty-card:hover {
  color: inherit;
}
.faculty-member {
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}
.faculty-image-container {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
.faculty-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.faculty-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease;
  object-position: center top;
}
.faculty-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg-btn.jpg");
  opacity: 0;
  transition: all 0.5s ease;
  background-size: 100% 120%;
}
/* 滑鼠滑過整張卡片時的效果 */
.faculty-card:hover .faculty-image img {
  transform: scale(1.1);
}
.faculty-card:hover .faculty-overlay {
  opacity: .8;
  background: url("../images/bg-btn.jpg");
  background-size: 100% 120%;
  transition: all 0.5s ease;
}
.faculty-info {
  padding: 1rem 0 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.faculty-title {
  font-size: 0.9375rem;
  color: #666;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  line-height: 1.5;
}
.en .faculty-title {
  line-height: 1.4; 
  font-size: 0.9rem;
}
.faculty-name-ch {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.en .faculty-name-ch {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-family: "DM Serif Display", serif;
  letter-spacing: 0.02rem;
}
.faculty-name-en {
  font-size: 0.875rem;
  color: #333;
  font-family: "DM Serif Display", serif;
  font-weight: 300;
  letter-spacing: 0.02rem;
}
.faculty-role, .faculty-role p {
  font-size: 0.875rem !important;
  color: #666 !important;
  margin: .8rem 0 0 0 !important;
  line-height: 1.6 !important;
}
.faculty-role p {
  margin: 0 !important;
}
.faculty-role a {
  text-decoration: none;
}
.profile-image {
  width: 100%;
  height: auto;
  max-width: 500px;
}
.faculty-title-in {
  color: #702C87;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  margin-top: 0.5rem;
}
.faculty-name {
  font-size: 2rem!important;
  font-weight: bold!important;
  margin-bottom: 0 !important;
}
.en .faculty-name {
  font-size: 2.4rem!important;
  font-weight: 400!important;
  margin-bottom: 0 !important;
  font-family: "DM Serif Display", serif!important;
  letter-spacing: 0.02rem;
}
.faculty-info-out {
  border-top: 1px solid #ccc;
  margin-top: 2rem;
}
.faculty-info-box {
  border-bottom: 1px solid #ccc;
  padding-bottom: 30px;
  padding-top: 40px;
}
.faculty-info-box h2 {
  font-size: 1.125rem;
  border: 1px solid #000;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 999px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.5s ease, border-color 0.5s ease;
}
.en .faculty-info-box h2 {
  font-size: 1.125rem;
  line-height: 1.3;
}
.faculty-info-box h2::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("../images/bg-btn.jpg");
  background-size: 120% 120%;
  background-position: center top;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.faculty-info-box:hover h2 {
  border-color: #fff;
  color: #fff;
}
.faculty-info-box:hover h2::before {
  opacity: 1;
}
/* 藝廊特定樣式 */
.artwork-box {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding: 3rem 0 3.2rem 0
}
.artwork-pic {
  height: 600px;
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.artwork-pic img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.artwork-pic img:hover {
  transform: scale(1.02);
}
.artwork-info {
  padding: 2.5rem 2rem;
  overflow-y: auto;
  position: relative;
}
.artwork-info .artist-name {
  font-size: 1.125rem;
  color: #333;
  margin-bottom: 1rem;
}
.artwork-info .artwork-year {
  font-size: 0.9375rem;
  color: #666;
  margin-bottom: 1.5rem;
}
.artwork-description {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #333;
}
.artwork-description h4 {
  font-size: 1rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.artwork-display {
  height: 600px;
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  overflow: hidden;
  background-image: url("../images/bg-artwork.jpg");
  background-size: 220px auto;
}
.artwork-display img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.artwork-display img:hover {
  transform: scale(1.02);
}
.artwork-info h3 {
  font-size: 1.6rem;
  margin-bottom: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
}
.artwork-info h4 {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.artwork-info p {
  color: #666;
  font-size: 0.9375rem;
}
/* 下载列表样式 */
.download-list {
  margin-top: -20px;
}
.download-item {
  padding: .6rem .8rem .7rem;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  transition: background-color 0.3s ease;
}
.download-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.download-item + .download-icon {
  margin-top: 20px;
}
.download-icon {
  background: linear-gradient(90deg, rgba(123, 149, 197, 1) 0%, rgba(151, 132, 184, 1) 50%, rgba(168, 132, 184, 1) 100%);
  color: #fff;
  display: flex;
  width: auto;
  padding: 5px 23px;
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-style: italic;
  letter-spacing: .04rem;
}
.info-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.date {
  flex-shrink: 0;
  color: #666;
  font-family: "Roboto", serif;
  font-size: 0.9375rem;
}
.date2 {
  flex-shrink: 0;
  color: #666;
  padding-top: 0px;
  font-family: "Roboto", serif;
  font-size: 0.9375rem;
}
.new-badge {
  flex-shrink: 0;
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin-top: 4px;
}
.title-box {
  flex-grow: 1;
}
.download-title {
  font-size: 1rem;
  color: #000;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.file-type {
  font-size: 0.8125rem;
  padding: .2rem .8rem;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.file-type.doc {
  color: #1565C0;
  border-color: #1565C0;
}
.file-type.doc:hover {
  background-color: #1565C0;
  color: #fff;
}
.file-type.pdf {
  color: #D32F2F;
  border-color: #D32F2F;
}
.file-type.pdf:hover {
  background-color: #D32F2F;
  color: #fff;
}
.file-type.odt {
  color: #000;
  border-color: #000;
}
.file-type.odt:hover {
  background-color: #000;
  color: #fff;
}
.file-type.xlsx {
  color: #3e8550;
  border-color: #3e8550;
}
.file-type.xlsx:hover {
  background-color: #3e8550;
  color: #fff;
}
.file-type.url {
  color: #702C87;
  border-color: #702C87;
}
.file-type.url:hover {
  background-color: #702C87;
  color: #fff;
}
.file-size {
  color: #666;
  font-size: 0.875rem;
}
.file-type i:first-child {
  margin-right: 2px;
}
.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.title-line .download-title {
  flex: 1;
  margin-bottom: 0;
}
.file-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.doenload-title {
  border-bottom: 1px solid #000;
  margin-bottom: 3px;
  width: 100%;
  display: block;
  margin-top: 5rem;
}
.doenload-title .menu-title-en {
  font-size: 2.5rem !important;
  font-weight: 500!important;
}
.doenload-title .menu-title-en span {
  font-size: 1.2rem !important;
  font-family: "Noto Sans TC", "Roboto", Arial, sans-serif;
  margin-left: 7px;
}
.en .doenload-title .menu-title-en span {
  font-size: 1.2rem !important;
  font-family: "Roboto", Arial, sans-serif;
  margin-left: 7px;
}
.pagination-container {
  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
}
.pagination {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}
.page-item {
  list-style: none !important;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  padding: .1rem .5rem 0;
  font-size: 0.9375rem;
  color: #000;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  transition: all 0.3s ease;
  text-decoration: none;
  font-family: "Roboto", serif;
}
.page-link:hover {
  background-color: #fff;
  border-color: rgba(0, 0, 0, .2);
}
.page-item.active .page-link {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.page-link.prev, .page-link.next {
  font-size: 0.875rem;
}
.page-link.prev {
  margin-right: .5rem;
}
.page-link.next {
  margin-left: .5rem;
}
.page-item:last-child .page-link, .page-item:first-child .page-link {
  border-radius: 999px;
  border: none;
}
.des-list {
  margin-bottom: 7px;
  display: flex;
  border-bottom: 1px solid #ececec;
  padding-bottom: 7px;
}
.des-list .des-title {
  margin: 0;
  width: 80px;
  display: inline-block;
}
.en .des-list .des-title {
  width: 90px;
  font-weight: 600;
}
.des-list .des-info {
  width: calc(100% - 80px);
  font-weight: 400;
}
.en .des-list .des-info {
  width: calc(100% - 90px);
  font-weight: 400;
}
.des-list .des-title2 {
  margin: 0;
  width: 130px;
  display: inline-block;
}
.des-list .des-info2 {
  width: calc(100% - 130px);
  font-weight: 400;
}
.description {
  margin-top: 2rem;
}
.en .description {
  line-height: 1.7;
  font-size: .9375rem;
}
.bg-about {
  background-image: url("../images/bg-about2.jpg");
  background-repeat: no-repeat;
  background-position: 75% top;
  background-size: 660px auto;
  min-height: 600px;
}
.en .bg-about {
    background-position: 75% 50px;
    min-height: 680px;
}
address {
	margin-bottom: 0;
}
/* 添加動畫相關樣式 */
.editor-box, .faculty-box, .download-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--animation-delay, 0s);
}
/* 當加入 animate-in 類別時觸發動畫 */
.editor-box.animate-in, .faculty-box.animate-in, .download-box.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* 預設狀態類別 */
.editor-box.card-animation, .faculty-box.card-animation, .download-box.card-animation {
  will-change: transform, opacity;
}
.under-line {
  border-bottom: 1px solid #000;
  padding-bottom: 30px!important;
}