/* =========================================================================

==base
==header
==banner
==intro
==album
==news
==contact
==link
==research
==team
==footer
==breadcrumb + pagination + no-data + privacy
==RWD

========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* wow animation載入預設透明度校正，配合custom.js */
.wow {
	opacity: 0;
}

.cke_editable .wow {
	opacity: 1;
}

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 48px;
	--fs-sectionTitle: 40px;
	--fs-infoTitle: 28px;
	--fs-itemTitle: 24px;
	--fs-sidebarTitle: 24px;
	--fs-footerTitle: 22px;
	--fs-BNTxt: 20px; 
	--fs-headerNav: 18px;
	--fs-normal: 16px; 

	--cnvs-themecolor:	#0A84C9;
	--cnvs-deepblue:	#103C8F;
	--cnvs-lightblue:	#DAF1FF;
	
	--section: 80px;
	--cnvs-header-height: 43px;
	--header-height: 80px;
	--cnvs-slider-caption-width: 650px;
}

body,
.form-control {
	word-break: break-word;
	letter-spacing: 1px;
	line-height: 1.75;
	font-weight: 400;
	font-family: "Noto Sans TC", sans-serif;
	color: var(--cnvs-black);
	font-size: var(--fs-normal);
	transition: .3s ease all;
}

.form-control::placeholder {
	color: var(--cnvs-contrast-600);
}

.form-control:focus {
	box-shadow: none;
	border-color: var(--cnvs-themecolor) !important;
}

p:last-child,
ul:last-child,
ol:last-child,
li:last-child,
form:last-child,
.form-control:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cnvs-black);
	transition: .3s ease;
}

a:hover {
	color: var(--cnvs-themecolor);
}

button {
	transition: .3s ease;
}

input[type="date"],
input[type="time"] {
	cursor: pointer;
	padding-right: 2.5rem;
	position: relative;
}

input[type="date"]::after {
	content: "\f1f6";
	font-size: 15px;
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

input[type="time"]::after {
	content: "\f293";
	font-size: 15px;
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

select {
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right center;
}

.form-check-input {
	margin-top: 6px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cnvs-contrast-500);
}

.form-check-input:checked {
	background-color: var(--cnvs-themecolor);
}

.form-control:disabled {
	background-color: var(--cnvs-contrast-400);
}

.section {
	background-color: var(--cnvs-white);
	padding: var(--section) 0;
	margin: 0;
}

/* ================= ellipsis ================= */
.one-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.two-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.three-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ==================== btn ==================== */
.btn-base {
	padding: 12px 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 18px;
	font-weight: 400;
	color: var(--cnvs-white);
	background-color: var(--cnvs-deepblue);
	border-radius: 50px;
	transition: all 0.3s ease;
}

.btn-base:hover {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* ==================== title ==================== */
.section-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.3;
	letter-spacing: 1px;
	font-weight: 700;
	margin-bottom: 48px;
}

.section-title:after {
	content: '';
	display: block;
	width: 50px;
	height: 2px;
	background-color: var(--cnvs-deepblue);
	margin-top: 24px;
}

.section-title.center:after {
	margin: 24px auto 0;
}

.item-title {
	font-size: var(--fs-itemTitle);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-black);
	margin-bottom: 0;
}

.footer-title {
	font-size: var(--fs-footerTitle);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
	border-bottom: 2px solid rgba(16, 60, 143, 0.20);
	padding-bottom: 16px;
	position: relative;
}

.footer-title:after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 2px;
	width: 90px;
	background-color: var(--cnvs-themecolor);
}

.info-title {
	font-size: var(--fs-infoTitle);
	font-weight: 700;
	line-height: 1.5;
}

/* ==================== other ==================== */
.deep-color {
	color: var(--cnvs-deepblue);
}

.h-color:hover {
	color: var(--cnvs-themecolor);
}

.fs-18 {
	font-size: var(--fs-headerNav);
}

/* =========================================================================
==header
========================================================================= */
.menu-link {
	padding: 26px 4px;
	font-size: var(--fs-headerNav);
	font-weight: 400;
	line-height: 1.5;
}

.is-expanded-menu .sub-menu-container .menu-item > .menu-link,
.sub-menu-container .menu-item > .menu-link {
	font-size: var(--fs-headerNav);
	font-weight: 400;
	line-height: 1.5;
}

.is-expanded-menu .menu-link div > i.sub-menu-indicator {
	top: 5px;
	margin-left: 4px;
}

#top-search-trigger {
	width: 40px;
	height: 40px;
	background-color: var(--cnvs-deepblue);
	color: var(--cnvs-white);
	border-radius: 50px;
	font-size: 20px;
}

#top-search-trigger:hover,
#top-search-trigger:active {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.is-expanded-menu .menu-container > .menu-item:not(:first-child),
.header-misc {
	margin-left: 24px;
}

.header-wrap-clone {
	height: var(--header-height);
}

.primary-menu-trigger {
	border: 1px solid var(--cnvs-deepblue);
	border-radius: 4px;
	width: 40px;
	height: 40px;
	margin-left: 24px;
}


/* =========================================================================
==banner
========================================================================= */
#slider {
	aspect-ratio: 2000 / 1042;
}

#slider .container {
	margin-left: 16%;
}

.slider-caption,
.swiper-navs div[class*=slider-arrow-] {
	transform: translateY(-54px);
}

.swiper_wrapper.single-slide .swiper-navs,
.swiper_wrapper.single-slide .swiper-pagination,
.swiper_wrapper.single-slide .swiper-num {
	display: none !important;
}

.swiper-num .slide-number-current,
.swiper-num .slide-number-total {
	position: static;
	display: inline;
	line-height: inherit;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
}

.swiper-slide-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(16, 60, 143, 0.20);
}

/* ==================== title ==================== */
.banner-title {
	font-size: var(--fs-BNTitle);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--cnvs-white);
	margin-bottom: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.50);
}

.banner-txt {
	font-size: var(--fs-BNTxt);
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 1.5px;
	color: var(--cnvs-white);
	margin-bottom: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.50);
}

/* ==================== btn ==================== */
#slider .btn-base {
	background-color: var(--cnvs-white);
	color: var(--cnvs-deepblue);
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.50);
}

#slider .btn-base:hover {
	background-color: var(--cnvs-lightblue);
	color: var(--cnvs-black);
}

/* ==================== deco ==================== */
.banner-deco {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 109px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.banner-deco .wave {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	background-repeat: repeat-x;
	background-position: left bottom;
	will-change: background-position;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.banner-deco .wave-2 {
	z-index: 0;
	height: 87px;
	background-image: url(../images/wave_2.svg);
	background-size: 1920px 87px;
	animation-name: banner-wave-2;
	animation-duration: 14s;
}

.banner-deco .wave-1 {
	z-index: 1;
	height: 109px;
	background-image: url(../images/wave_1.svg);
	background-size: 2249px 109px;
	animation-name: banner-wave-1;
	animation-duration: 9s;
}

@keyframes banner-wave-1 {
	from { background-position-x: 0; }
	to   { background-position-x: -2249px; }
}

@keyframes banner-wave-2 {
	from { background-position-x: 0; }
	to   { background-position-x: -1920px; }
}

@keyframes banner-wave-1-sm {
	from { background-position-x: 0; }
	to   { background-position-x: -1237px; }
}

@keyframes banner-wave-2-sm {
	from { background-position-x: 0; }
	to   { background-position-x: -1056px; }
}

@media (prefers-reduced-motion: reduce) {
	.banner-deco .wave {
		animation: none;
	}
}

/* =========================================================================
==intro
========================================================================= */
.intro-section .element-float {
	position: absolute;
	top: 50px;
	right: 20px;
}

.intro-img-wrap {
	--space: 40px;
}

.intro-img-wrap .img {
	padding-left: var(--space);
	padding-bottom: var(--space);
}

.intro-img-wrap img {
	border-radius: 10px;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.50);
}

.intro-img-wrap::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - var(--space));
	height: calc(100% - var(--space));
	background-color: var(--cnvs-lightblue);
	border-radius: 10px;
	z-index: -1;
}

.intro-icons-wrap {
	--margin-bottom: 30px;
	background-color: var(--cnvs-lightblue);
	border-radius: 10px;
	box-shadow: 0 1px 20px 0 rgba(10, 132, 201, 0.20);
}

.intro-icons-wrap .row {
	margin-bottom: calc(var(--margin-bottom) * -1);
}

.intro-icon-item {
	margin-bottom: var(--margin-bottom);
}

.intro-icon-item .img-wrap {
	background-color: var(--cnvs-themecolor);
	width: 70px;
	height: 70px;
	border-radius: 10px;
}

.intro-icon-item .img-wrap img {
	width: 54px;
}

/* =========================================================================
==intro page（中心簡介）
========================================================================= */
.bg-light-blue {
	background-color: var(--cnvs-lightblue);
}

.mw-820 {
	max-width: 820px;
}

.deco-float {
	position: absolute;
	right: 40px;
	top: 40px;
	z-index: 0;
	width: 120px;
}

/* 淺藍底區塊裡的圖片位移框改用白色以維持對比 */
.bg-light-blue .intro-img-wrap::before {
	background-color: rgba(255,255,255,0.7);
}

/* 願景金句（內文行內強調，文字不變） */
.en-quote {
	font-style: italic;
	font-weight: 700;
	color: var(--cnvs-themecolor);
}

/* 科學議題卡（Grid 等高，2×2） */
.topic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 20px;
}

@media (min-width: 768px) {
	.topic-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* 研究特色頁：桌機 3 欄一排（平板 2 欄、手機 1 欄） */
@media (min-width: 992px) {
	.topic-grid-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.topic-box {
	padding: 20px 24px;
	background-color: var(--cnvs-lightblue);
	border-radius: 12px;
	border-left: 4px solid var(--cnvs-themecolor);
	color: var(--cnvs-deepblue);
	font-weight: 500;
}

.intro-info-2.intro-section .element-float {
	bottom: 80%;
	left: auto;
	top: auto;
}

/* ================= history ================= */
.history_6__time-item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 30%;
  height: 2px;
  background: var(--cnvs-themecolor);
}

.history_6__time-item:nth-child(even)::before {
  background: var(--cnvs-deepblue);
}

.history_6__time-item .history_6__time-year {
  width: 22%;
  background: var(--cnvs-themecolor);
  height: fit-content;
	border-radius: 4px;
}

.history_6__time-item:nth-child(even) .history_6__time-year {
  background: var(--cnvs-deepblue);
}

.history_6__time-txt {
  position: relative;
  margin-left: 10%;
  width: 68%;
  padding: 10px 0px 10px 30px;
}

/* =========================================================================
==album
========================================================================= */
.album-item .img-wrap {
	border-radius: 10px;
}

.album-item .img-wrap img {
	transition: all 0.3s ease;
	aspect-ratio: 1000 / 750;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.album-item:hover .img-wrap img {
	transform: scale(1.05);
}

.album-item .txt-wrap {
	padding: 0 28px;
	margin-top: -24px;
	z-index: 2;
	position: relative;
}

.album-item .item-title {
	padding: 16px;
	border-bottom: 3px solid var(--cnvs-deepblue);
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.20);
	background-color: var(--cnvs-white);
	transition: all 0.3s ease;
}

.album-item:hover .item-title {
	color: var(--cnvs-themecolor);
}

.album-item .short-wrap {
	padding: 16px 24px;
	border: 1px solid var(--cnvs-deepblue);
	border-radius: 10px;
	background-color: var(--cnvs-white);
	margin-top: 8px;
}

.album-section3 .row > .wow:nth-child(even),
#content .col-lg-8 .row > .wow:nth-child(even):has(.album-item) {
	animation-delay: 0.1s;
}

/* ==================== wave ==================== */
.wave-section {
	padding: 90px 0;
}

.wave-section .section {
	background-color: var(--cnvs-lightblue);
}

.wave-section .album-deco,
.wave-section .album-deco2 {
	position: absolute;
	left: 0;
	width: 100%;
	height: 99px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.wave-section .album-deco {
	top: 0;
}

.wave-section .album-deco2 {
	bottom: 0;
	transform: scaleY(-1);
}

/* 兩份拷貝並排 + 位移循環，接縫用 1px 重疊蓋掉 → 徹底無縫（含手機縮放） */
.wave-section .wave {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	width: max-content;
	height: 99px;
	will-change: transform;
	animation-name: album-wave;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.wave-section .wave i {
	flex: 0 0 auto;
	width: 2032px;
	height: 99px;
	background: url(../images/wave_3.svg) no-repeat 0 0 / 100% 100%;
}

/* 第二份與第一份重疊 1px，消除兩份之間的接縫 */
.wave-section .wave i + i {
	margin-left: -4px;
}

/* 後層（半透明）：透明度下放到整層，重疊不會疊出深線；慢 */
.wave-section .wave-4 {
	z-index: 0;
	opacity: 0.5;
	animation-duration: 16s;
}

/* 前層（不透明）：快 → 兩層速度差製造流動 */
.wave-section .wave-3 {
	z-index: 1;
	animation-duration: 11s;
}

@keyframes album-wave {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wave-section .wave {
		animation: none;
	}
}

.album-section .element-float.fish {
	position: absolute;
	top: 5px;
	left: 85px;
}

.album-section .element-float.bubble {
	position: absolute;
	top: 80px;
	right: 80px;
}

.album-section2 .element-float {
	position: absolute;
	top: 20px;
	right: 20px;
}

.album-section3 .element-float.bubble2 {
	position: absolute;
	top: 80px;
	left: 80px;
}

.album-section3 .element-float.jellyfish {
	position: absolute;
	top: 30px;
	right: 0;
}

.album-section3 .element-float.star {
	position: absolute;
  bottom: 25px;
	right: 97px;
}

.gallery-album-item img {
	aspect-ratio: 1000 / 750;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.album-info-cover {
	width: 100%;
	height: 100%;
}


/* =========================================================================
==news
========================================================================= */
.news-item {
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
}

.news-item .img-wrap {
	width: 34.81%;
	flex-shrink: 0;
	border-radius: 10px;
}

.news-item .img-wrap img {
	transition: all 0.3s ease;
	aspect-ratio: 960 / 720;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.news-item .img-wrap:hover img {
	transform: scale(1.05);
}

.news-item .txt-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.news-tag {
	width: fit-content;
	background-color: var(--cnvs-deepblue);
	color: var(--cnvs-white);
	padding: 0 16px;
	border-radius: 4px;
	line-height: 1.8;
	font-weight: 500;
}

.news-tag:hover,
.news-tag:active {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.news-item .txt-wrap p {
	color: #555;
}

.news-section .element-float.turtle {
	position: absolute;
	top: 8%;
	left: 30px;
}

.news-section .element-float.lobster {
	position: absolute;
	bottom: 30%;
	right: 0px;
}

.news-date {
	font-size: 18px;
}

/* ==================== sidebar ==================== */
.sidebar-wrap {
  top: 119px;
}

.news_1__sidebar-area::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(126 ,178, 204, 0.3);
}

.news_1__widget-title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, rgba(28,151,177,1), rgba(255,255,255,0.2));
}

.news_1__widget-categories:not(.product-cate-wrap) li a:hover,
.news_1__widget-categories:not(.product-cate-wrap) li a:active {
  color: var(--cnvs-themecolor);
	background-color: var(--cnvs-lightblue);
}

.news_1__widget-categories:not(.product-cate-wrap) li.active a {
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
}

.news_1__widget-categories ul li i {
  font-size: 12px;
}

.news-info-img-wrap .news-item .info-wrap {
	padding: 16px;
}

/* ==================== hot ==================== */
.hot-item-title {
	font-size: 20px;
	font-weight: 700;
}

/* ==================== info ==================== */
.news-info-txt-wrap .img-wrap {
	border-radius: 10px;
}

/* =========================================================================
==contact
========================================================================= */
.contact-wrap {
	padding: 0 34px;
}

.contact-wrap > div {
	border-radius: 10px;
	padding: 32px 16px;
	background-color: rgba(255, 255, 255, 0.90);
}

/* ================= info ================= */
.contact-info {
	margin-bottom: -16px;
}

.contact-info li > * {
	background-color: var(--cnvs-white);
	box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.20);
	border-bottom: 4px solid var(--cnvs-themecolor);
	word-break: break-word;
	aspect-ratio: 1 / 0.5;
}

.contact-info li a:hover,
.contact-info li a:active {
	transform: translateY(-4px);
	background-color: rgb(218 241 255 / 50%);
	color: var(--cnvs-deepblue);
}

.contact-info li i {
	font-size: 32px;
}

/* =========================================================================
==link
========================================================================= */
.link-item {
	border: 3px solid var(--cnvs-themecolor);
	border-radius: 10px;
	transition: all 0.3s ease;
}

.link-item:hover {
	transform: translateY(-5px);
	border-color: var(--cnvs-deepblue);
	box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.20);
}

.row > .wow:nth-child(even):has(.link-item) {
	animation-delay: 0.1s;
}

/* =========================================================================
==research（研究特色）
========================================================================= */
/* =========================================================================
==team
========================================================================= */
.team-section .table-wrap {
	overflow-x: auto;
	border-radius: 10px;
	box-shadow: 0 10px 30px 0 rgba(16, 60, 143, 0.08);
	background-color: var(--cnvs-white);
}

.team-section .team-table {
	width: 100%;
	border-collapse: collapse;
}

.team-section .team-table thead th {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .5px;
	padding: 18px 20px;
	text-align: left;
	white-space: nowrap;
}

.team-section .team-table thead th .th-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

/* 平板（空間較緊）才讓分機欄縮到內容寬度、長表頭折行；電腦版維持一行 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.team-section .team-table th:nth-child(4) {
		width: 1%;
	}
}

.team-section .team-table tbody td {
	padding: 20px;
	border-top: 1px solid rgba(16, 60, 143, 0.08);
	vertical-align: middle;
	line-height: 1.6;
	color: var(--cnvs-black);
	font-size: var(--fs-normal);
}

.team-section .team-table tbody tr:nth-child(even) {
	background-color: rgba(218, 241, 255, 0.3);
}

.team-section .team-table tbody tr:hover {
	background-color: rgba(218, 241, 255, 0.65);
}

.team-section .team-table .name {
	font-weight: 600;
	font-size: 18px;
	color: var(--cnvs-deepblue);
	white-space: nowrap;
}

.team-section .role-badge {
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 4px;
	white-space: nowrap;
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
}

.team-section .role-badge.is-director {
	background-color: var(--cnvs-deepblue);
}

.team-section .role-badge.is-researcher {
	background-color: var(--cnvs-lightblue);
	color: var(--cnvs-deepblue);
}

.team-section .team-table .title {
	white-space: nowrap;
}

.team-section .team-table .unit-org {
	display: block;
	font-weight: 400;
}

.team-section .team-table .unit-dept {
	display: block;
	font-size: var(--fs-normal);
	color: var(--cnvs-deepblue);
	margin-top: 2px;
}

.team-section .team-table .tel {
	white-space: nowrap;
}

.team-section .team-table a {
	color: var(--cnvs-themecolor);
	word-break: break-all;
}

.team-section .team-table a:hover {
	text-decoration: underline;
}

/* 平板以上維持表格；手機（<768px）才改為堆疊卡片（純 CSS，HTML 共用同一份） */
@media (max-width: 767.98px) {
	.team-section .table-wrap {
		overflow-x: visible;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.team-section .team-table {
		min-width: 0;
	}
	.team-section .team-table thead {
		display: none;
	}
	.team-section .team-table,
	.team-section .team-table tbody,
	.team-section .team-table tr,
	.team-section .team-table td {
		display: block;
		width: 100%;
	}
	.team-section .team-table tr {
		background-color: var(--cnvs-white);
		border: 1px solid var(--cnvs-lightblue);
		border-radius: 10px;
		box-shadow: 0 6px 20px 0 rgba(16, 60, 143, 0.08);
		margin-bottom: 20px;
		overflow: hidden;
	}
	.team-section .team-table tbody tr:nth-child(even) {
		background-color: var(--cnvs-white);
	}
	.team-section .team-table tbody td {
		position: relative;
		text-align: right;
		padding: 16px;
		border-top: 0;
		border-bottom: 1px solid rgba(16, 60, 143, 0.08);
		display: flex;
		justify-content: space-between;
	}
	.team-section .team-table tbody td:first-child {
		background-color: var(--cnvs-themecolor);
		color: var(--cnvs-white);
	}
	.team-section .team-table tbody td:first-child::before {
		color: var(--cnvs-white);
	}
	.team-section .team-table tbody td:last-child {
		border-bottom: 0;
	}
	.team-section .team-table tbody td::before {
		/* position: absolute;
		top: 14px;
		left: 18px; */
		width: 145px;
		text-align: left;
		font-size: var(--fs-normal);
		font-weight: 500;
		color: var(--cnvs-deepblue);
	}
	.team-section .team-table tbody td:nth-child(1)::before { content: "姓名"; }
	.team-section .team-table tbody td:nth-child(2)::before { content: "職位"; }
	.team-section .team-table tbody td:nth-child(3)::before { content: "服務單位"; }
	.team-section .team-table tbody td:nth-child(4)::before { content: "校內分機/聯絡電話"; }
	.team-section .team-table tbody td:nth-child(5)::before { content: "聯絡信箱"; }
	
	.team-section .team-table .tel {
		white-space: normal;
	}
}

/* =========================================================================
==footer
========================================================================= */
#footer {
	background-color: var(--cnvs-lightblue);
}

.footer-main {
	padding: 40px 0;
	font-size: 18px;
}

.footer-logo {
	width: 312px;
}

.footer-h1 {
	font-size: var(--fs-normal);
	line-height: 1.75;
	letter-spacing: 1px;
	font-weight: 400;
	border-top: 2px solid rgba(16, 60, 143, 0.20);
	padding-top: 16px;
}

.footer-sitemap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-sitemap a {
	display: inline-block;
	width: 130px;
}

.footer-sns a {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	background-color: var(--cnvs-color-youtube);
	color: var(--cnvs-white);
}

.footer-sns a:hover,
.footer-sns a:active {
	background-color: #d00202;
}

#copyrights {
	background-color: var(--cnvs-deepblue);
	font-size: var(--fs-normal);
}

#copyrights a {
	color: var(--cnvs-white);
}

#copyrights a:hover {
	color: var(--cnvs-lightblue);
}

.privacy-word:not(.btn-link):not(.text-decoration-underline):not(.more-link) {
	color: var(--cnvs-white);
	text-decoration: underline !important;
}

.privacy-word:not(.btn-link):not(.text-decoration-underline):not(.more-link):hover {
	color: var(--cnvs-deepblue);
}

/* =========================================================================
==breadcrumb + pagination + no-data + privacy
========================================================================= */
.breadcrumb-wrap {
	padding-bottom: calc(5rem + 90px) !important;
}

.breadcrumb-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 1px;
	flex-shrink: 0;
	margin-right: 48px;
}

.php_breadcrumb li:not(:last-child)::after {
	content: '/';
	display: inline-block;
	margin: 0 12px;
}

.breadcrumb-wrap,
.breadcrumb-wrap a {
	color: var(--cnvs-lightblue);
}

.breadcrumb-wrap a:hover,
.breadcrumb-wrap a:active {
	color: var(--cnvs-white);
}

.breadcrumb-wrap .wave {
	position: absolute;
	bottom: -1px;
	right: 0px;
}

/* ================= pagination ================= */
.page-item {
	margin: 0 4px;
}

.page-link {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.page-link.arrow {
	background-color: transparent;
	color: var(--cnvs-themecolor);
}

.page-link.arrow:hover,
.page-link.arrow:active {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.page-link.arrow i {
	font-size: 12px;
}

/* ================= no-data ================= */
.no-data {
	color: var(--cnvs-deepblue);
	border: 1px solid var(--cnvs-deepblue);
}

/* =========================================================================
==RWD
========================================================================= */
@media (min-width:992px) {
	.three-lg-row {
		-webkit-line-clamp: 3;
	}
}

@media (min-width:1680px) {
	.container {
		max-width: 1760px;
	}
}

@media (max-width:1399px) {
	:root {
		--cnvs-header-height: 39px;
	}
		
	/* ================= header ================= */
	.is-expanded-menu .menu-container > .menu-item:not(:first-child), .header-misc {
    margin-left: 12px;
  }

	/* ==================== breadcrumb + pagination + no-data + privacy ==================== */
	.breadcrumb-wrap {
    padding-bottom: calc(5rem + 45px) !important;
  }
}

@media (max-width:1199px) {
	:root {
		--header-height: 72px;
	}

	/* ================= header ================= */
	#logo {
		padding: 16px 0;
	}

	.menu-link {
		padding: 12px 4px;
	}

	.lang-mobile {
		font-size: 20px;
	}

	/* ================= intro ================= */
	.intro-img-wrap {
		max-width: 680px;
	}

	.intro-info-2.intro-section .element-float {
		left: auto;
		bottom: 77%;
	}

	/* ==================== breadcrumb + pagintaion + privacy ==================== */
	.breadcrumb-wrap {
		padding-bottom: calc(5rem + 24px) !important;
	}
}

@media (max-width:991px) {
	:root {
		--fs-BNTitle: 38px;
		--fs-sectionTitle: 36px;
		--fs-itemTitle: 22px;
		--fs-BNTxt: 18px;
		--fs-headerNav: 17px;

		--section: 60px;

		--cnvs-swiper-dots-position-bottom: 140px;
	}

	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}

	.btn-base {
		font-size: 16px;
		padding: 10px 32px;
	}

	/* ================= banner ================= */
	#slider .container {
		margin-left: auto;
	}

	.intro-icon-item .img-wrap {
		width: 65px;
    height: 65px;
	}

	.swiper-pagination {
		max-width: 720px;
		width: 100%;
		text-align: end;
		margin: auto;
		padding: 0 12px;
		left: 50% !important;
		transform: translateX(calc(-1 * 50% - 40px));
	}

	.swiper-pagination span {
		width: 36px;
		height: 1px;
		border-radius: 0;
		border: 0;
		background: var(--cnvs-white);
	}

	.swiper-pagination span.swiper-pagination-bullet-active {
		height: 4px;
	}

	.swiper-num {
		position: absolute;
		bottom: 137px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		color: var(--cnvs-white);
		max-width: 720px;
		width: 100%;
		text-align: end;
		padding: 0 12px;
	}

	/* ================= intro ================= */
	.intro-img-wrap {
		max-width: 100%;
  }

	.intro-icon-item .img-wrap img {
		width: 46px;
	}

	.intro-section .element-float {
		top: 48%;
	}

	/* ================= contact ================= */
	.contact-info li > * {
		aspect-ratio: initial;
	}

	/* ================= footer ================= */
	.footer-main {
		font-size: 16px;
	}

	/* ==================== breadcrumb + pagintaion + privacy ==================== */
	.breadcrumb-wrap {
		padding-bottom: calc(3rem + 36px) !important;
	}
}

@media (max-width:767px) {
	/* ================= banner ================= */
	#slider {
		aspect-ratio: 1 / 1.3;
	}

	.swiper-pagination,
	.swiper-num {
		max-width: 540px;
	}

	/* ================= intro ================= */
	.intro-section .element-float {
		top: 39%;
  }

	.history_6__time-item .history_6__time-year {
    width: 30%;
  }

  .history_6__time-item .history_6__time-txt {
    width: 65%;
		margin-left: 5%;
    padding: 10px 0px 10px 20px;
  }

  .history_6__time-item::before {
    top: 23px;
    width: 35%;
  }

	/* ================= album ================= */
	.album-item .txt-wrap {
    padding: 0 20px;
	}

	.album-section .element-float.fish {
		left: 2px;
	}

	.album-section .element-float.bubble {
		right: 30px;
	}

	.album-section2 .element-float {
		width: 150px;
	}

	.album-section3 .element-float.jellyfish {
		top: 4px;
	}

	.album-section3 .element-float.star {
		right: 10px;
		width: 120px;
		bottom: 38px;
	}

	/* ================= news ================= */
	.news-section .element-float.turtle {
		top: 8%;
		width: 120px;
	}

	.news-section .element-float.lobster {
		width: 120px;
	}

	/* ================= footer ================= */
	.footer-logo {
    width: 255px;
  }

	.footer-main > div:first-child {
		margin-bottom: 36px;
	}

	.footer-sitemap a {
		width: 110px;
	}

	/* ==================== breadcrumb + pagination + no-data + privacy ==================== */
	.breadcrumb-title {
		margin-right: 0;
	}

	.feature-box {
    --cnvs-featured-box-icon: 3.2rem;
		--cnvs-featured-box-icon-size: 1.5rem;
	}

	.fbox-icon i {
		line-height: 45px;
	}
}

@media (max-width:575px) {
	:root {
		--fs-BNTitle: 26px;
		--fs-BNTxt: 16px;
		--fs-sectionTitle: 30px;
		--fs-itemTitle: 20px;

		--cnvs-header-height: 26px;
		--section: 48px;
		--header-height: 59px;
	}

	.btn-base {
		padding: 6px 20px;
	}

	.section-title:after {
		margin-top: 16px;
	}

	/* ================= header ================= */
	.lang-mobile {
		font-size: 18px;
	}

	#top-search-trigger {
		font-size: 18px;
    width: 32px;
    height: 32px;
	}

	.primary-menu-trigger {
		width: 32px;
    height: 32px;
    margin-left: 16px;
	}

	/* ================= banner ================= */
	.banner-deco {
		height: 60px;
	}

	.banner-deco .wave-2 {
		height: 48px;
		background-size: 1056px 48px;
		animation-name: banner-wave-2-sm;
	}

	.banner-deco .wave-1 {
		height: 60px;
		background-size: 1237px 60px;
		animation-name: banner-wave-1-sm;
	}

	/* ================= intro ================= */
	.intro-img-wrap{
		--space: 24px;
	}

	.history_6__time-item .history_6__time-year {
    width: 100%;
    padding: 5px;
  }

  .history_6__time-item::before {
    top: 17px;
    width: 33%;
  }

  .history_6__time-item .history_6__time-txt {
    width: 100%;
    padding: 12px 0 0;
    margin-left: 0;
  }

	/* ================= album ================= */
	.wave-section .album-deco,
	.wave-section .album-deco2 {
		height: 54px;
	}

	.wave-section .wave {
		height: 54px;
	}

	.wave-section .wave i {
		width: 1118px;
		height: 54px;
	}

	.wave-section {
    padding: 53px 0;
  }

	.album-section .element-float.fish {
		width: 100px;
		left: 17px;
	}

	.album-section .element-float.bubble {
		width: 35px;
		right: 33px;
	}

	.album-section2 .element-float {
		width: 110px;
		right: 6px;
	}

	.album-section3 .element-float.bubble2 {
		width: 30px;
		left: 35px;
	}

	.album-section3 .element-float.jellyfish {
		top: 20px;
		width: 135px;
		right: -6px;
  }

	.album-section3 .element-float.star {
		width: 90px;
	}

	/* ================= news ================= */
	.news-item {
		flex-direction: column;
		gap: 16px;
	}

	.news-item .img-wrap {
		width: 100%;
	}

	.news-section .element-float.turtle {
		top: 4%;
		width: 85px;
  }

	.news-section .element-float.lobster {
		width: 90px;
		bottom: 32%;
	}

	.news-share-wrap [class*=border-] {
		border: 0 !important;
	}

	.news-share-wrap a {
		display: inline-block;
		font-size: 24px;
		margin: 0 8px;
	}

	.news-share-wrap a[title="Facebook"] {
		font-size: 26px;
	}

	/* ================= contact ================= */
	.contact-wrap {
		padding: 0 16px;
	}

	/* ================= footer ================= */
	.footer-logo {
		width: 245px;
  }

	.footer-main > div:last-child {
		margin-top: 36px;
	}

	/* ==================== breadcrumb + pagination + no-data + privacy ==================== */
	.fbox-content {
		padding-left: 6px;
	}

	.breadcrumb-wrap {
		padding-bottom: calc(3rem + 12px) !important;
  }
}


@media (max-width: 359px) {
	:root {
		--header-height: 55px;
		--cnvs-header-height: 22px;
	}
}