/*==========簡介內容頁共用設定=========*/
#xo-content .formatbox #about {
	position: relative;
	box-sizing: border-box;
	padding: 1.5rem 0.625rem;
	color: #303030;
	word-break: normal;
	overflow-wrap: anywhere;
	--about-green: #176b2d;
	--about-blue: #075b84;
	--about-yellow: #e2c51e;
	--about-red: #b3261e;
	--about-border: #c8d9d3;
	--about-shadow: rgba(22, 82, 104, 0.14);
}

#xo-content .formatbox #about .table {
	margin: 1.875rem 0rem;
}

#xo-content .formatbox #about .alert {
	font-size: 120%;
}

#xo-content .formatbox #about .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.05) !important;
}


#xo-content .formatbox #about strong {
    font-size: 100%;
}

/*==========簡介內容頁共用標題=========*/
#xo-content .formatbox #about_title_h3 {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 2.5rem minmax(0rem, 1fr) 2.5rem;
	column-gap: 0.5rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: 0rem 0rem 1.875rem 0rem !important;
	padding: 0.5rem 1rem 0.875rem;
	background: #fff000;
	border: 0rem;
	border-radius: 0.875rem;
	box-shadow: 0rem 0.25rem 0.5rem rgba(20, 46, 105, 0.22);
	color: #1110d6;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	font-family:"Yozai Regular","Microsoft JhengHei",sans-serif;
	transition: box-shadow 0.2s ease;
}

/* 藍色上層與黃色下緣都由 CSS 畫出；文字增高時兩層一同伸展。 */
#xo-content .formatbox #about_title_h3::before {
	content: "";
	position: absolute;
	z-index: -1;
    inset: 0.0rem 0rem 0.5rem 0rem;
	background: #2022dd;
	border-radius: 0.75rem;
}

#xo-content .formatbox #about_title_h3:hover {
	box-shadow: 0rem 0.375rem 0.75rem rgba(20, 46, 105, 0.3);
}

#xo-content .formatbox #about_title_h3 #about_title {
	position: relative;
	z-index: 1;
	display: block;
	justify-self: center;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: 0.125rem 1.5rem;
	background: #ffffff;
	border: 0rem;
	border-radius: 0.875rem;
	color: #1110d6;
	overflow-wrap: anywhere;
}

#xo-content .formatbox #about_title_h3 .about_title_icon {
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	border: 0rem;
	color: #fff000;
	font-size: 1.9rem;
	line-height: 1;
	pointer-events: none;
}

#xo-content .formatbox #about_title_h3 .about_title_icon:last-child {
	justify-self: end;
}

@media (max-width: 30rem) {
	#xo-content .formatbox #about_title_h3 {
		grid-template-columns: 1.75rem minmax(0rem, 1fr) 1.75rem;
		column-gap: 0.25rem;
		padding: 0.5rem 0.625rem 0.875rem;
		font-size: 1.25rem;
	}
	#xo-content .formatbox #about_title_h3 #about_title {
		padding: 0.125rem 0.5rem;
	}
	#xo-content .formatbox #about_title_h3 .about_title_icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 1.4rem;
	}
}

/*==========簡介內容頁共用文字=========*/
#xo-content .formatbox #about .conrent_each {
	position: relative;
	box-sizing: border-box;
	margin: 0rem 0rem 2.25rem 0rem;
	padding: 1.25rem;
	background: #ffffff;
	border: 0.0625rem solid var(--about-border);
	border-radius: 0.75rem;
	box-shadow: 0rem 0.25rem 0.75rem var(--about-shadow);
	color: #303030;
	line-height: 1.9;
	font-family:"Yozai Regular","Microsoft JhengHei",sans-serif;
	font-weight: 500;
}

#xo-content .formatbox #about .conrent_each:last-child {
	margin-bottom: 0rem;
}

#xo-content .formatbox #about p {
	margin: 0rem 0rem 1.25rem 0rem;
	color: #333333;
	line-height: 2;
	text-indent: 2em;
}

#xo-content .formatbox #about dt {
	color: #477b1c;
	font-weight: 700;
}

#xo-content .formatbox #about .style_01,
#xo-content .formatbox #about .style_02,
#xo-content .formatbox #about .style_03,
#xo-content .formatbox #about .style_04,
#xo-content .formatbox #about .style_05,
#xo-content .formatbox #about .style_06 {
	font-size: 110%;
	font-weight: 700;
}

#xo-content .formatbox #about .style_01 {
	color: #a91569;
}

#xo-content .formatbox #about .style_02 {
	color: var(--about-blue);
}

#xo-content .formatbox #about .style_03 {
	color: #8a4a00;
}

#xo-content .formatbox #about .style_04 {
	color: var(--about-green);
}

#xo-content .formatbox #about .style_05 {
	color: #64249b;
}

#xo-content .formatbox #about .style_06 {
	color: var(--about-red);
}

#xo-content .formatbox #about h4 .fa-brands {
	position: relative;
	top: 0.1875rem;
	font-size: 130%;
}

/*==========簡介內容頁共用圖片=========*/
/* 新頁優先使用 .about_figure；既有 #img_box／.img_box 保留相容。 */
#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	max-width: 100%;
	margin: 0rem auto 1.5rem;
	padding: 0.5rem;
	background: #ffffff;
	border: 0.0625rem solid var(--about-border);
	border-radius: 0.625rem;
	box-shadow: 0rem 0.25rem 0.75rem var(--about-shadow);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box):is(:hover, :focus-within) {
	transform: translateY(-0.125rem);
	border-color: var(--about-blue);
	box-shadow: 0rem 0.5rem 1rem rgba(22, 82, 104, 0.2);
}

#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) a {
	display: block;
	border-radius: 0.25rem;
}

#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) a:focus-visible {
	outline: 0.1875rem solid var(--about-blue);
	outline-offset: 0.1875rem;
}

#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) img {
	display: block;
	width: 100%;
	height: auto !important;
	border-radius: 0.25rem;
	object-fit: contain;
	transform: scale(1, 1);
	transform-origin: center center;
}

#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box):is(:hover, :focus-within) img {
	transform-origin: center center;
	animation: img_box 0.9s ease-in-out 1;
}

@keyframes img_box {
	0% {
		transform: scale(1, 1);
	}

	48% {
		transform: scale(1.2, 0.985);
	}

	70% {
		transform: scale(0.9, 1.08) ;
	}

	86% {
		transform: scale(1.04, 0.97);
	}

	100% {
		transform: scale(1, 1);
	}
}


#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) figcaption {
	position: relative;
	margin: 0rem;
	padding: 0.625rem 0.75rem 0.125rem;
	color: #46545a;
	font-size: 90%;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 40rem) {
	#xo-content .formatbox #about {
		padding: 0rem 0rem;
	}
	#xo-content .formatbox #about .conrent_each {
		padding: 1rem 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box) {
		transition: none;
	}
	#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box):is(:hover, :focus-within) {
		transform: none;
	}
	#xo-content .formatbox #about :is(.about_figure, .img_box, #img_box):is(:hover, :focus-within) img {
		animation: none;
	}
}
/*============願景與特色=================*/
#xo-content .page65.formatbox #about {
  --vision-green: #277343;
  --vision-green-pale: #f0faee;
  --vision-blue: #176a9a;
  --vision-blue-pale: #edf7fc;
  --vision-red: #b43249;
  --vision-ink: #263e39;
  color: var(--vision-ink);
}

#xo-content .page65.formatbox #about .vision_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-width: 0;
}

#xo-content .page65.formatbox #about .vision_figure {
  width: 100%;
  max-width: 49rem;
  margin: 0 auto;
}

#xo-content .page65.formatbox #about .vision_figure a {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
}

#xo-content .page65.formatbox #about .vision_figure img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
}

#xo-content .page65.formatbox #about .vision_figure figcaption {
  padding: 0.7rem 0.9rem;
  color: var(--vision-blue);
  font-size: 0.94em;
  line-height: 1.6;
  text-align: center;
}

#xo-content .page65.formatbox #about .vision_text {
  min-width: 0;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

#xo-content .page65.formatbox #about .vision_text p {
  margin: 0;
}

#xo-content .page65.formatbox #about .vision_section_title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
  padding: 0.58rem 0.9rem;
  border-left: 0.38rem solid var(--vision-green);
  border-radius: 0.2rem 0.7rem 0.7rem 0.2rem;
  background: linear-gradient(90deg, var(--vision-green-pale), #fff);
  color: var(--vision-green);
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.45;
}

#xo-content .page65.formatbox #about .vision_section_title .fa-solid,
#xo-content .page65.formatbox #about .vision_subtitle .fa-solid {
  flex: none;
  color: var(--vision-red);
}

#xo-content .page65.formatbox #about #conrent_02 > .vision_section_title,
#xo-content .page65.formatbox #about #conrent_04 > .vision_section_title {
  border-left-color: var(--vision-blue);
  background: linear-gradient(90deg, var(--vision-blue-pale), #fff);
  color: var(--vision-blue);
}

#xo-content .page65.formatbox #about .vision_lead {
  padding: 1.15rem 1.3rem;
  border: 0.0625rem solid #d4e8d7;
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff, var(--vision-green-pale));
}

#xo-content .page65.formatbox #about .vision_lead .vision_section_title {
  margin-bottom: 0.75rem;
}

#xo-content .page65.formatbox #about .vision_intro {
  margin-bottom: 1rem;
  color: var(--vision-blue);
  font-weight: 650;
}

#xo-content .page65.formatbox #about .vision_directions_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#xo-content .page65.formatbox #about .vision_directions_list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 0.0625rem solid #dce9df;
  border-left: 0.3rem solid var(--vision-green);
  border-radius: 0.7rem;
  background: #fff;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

#xo-content .page65.formatbox #about .vision_directions_list li:nth-child(even) {
  border-left-color: var(--vision-blue);
  background: #f7fbfd;
}

#xo-content .page65.formatbox #about .vision_directions_list li:hover {
  background: var(--vision-green-pale);
  box-shadow: 0 0.2rem 0.65rem #183f2630;
}

#xo-content .page65.formatbox #about .vision_directions_list li:nth-child(even):hover {
  background: var(--vision-blue-pale);
}

#xo-content .page65.formatbox #about .vision_directions_list strong {
  color: var(--vision-green);
}

#xo-content .page65.formatbox #about .vision_directions_list li:nth-child(even) strong {
  color: var(--vision-blue);
}

#xo-content .page65.formatbox #about .vision_list_icon {
  flex: none;
  width: 1.5rem;
  padding-top: 0.7rem;
  color: var(--vision-red);
  text-align: center;
}

#xo-content .page65.formatbox #about .vision_action {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-top: 0.2rem solid #c5dfd0;
  border-radius: 0.25rem 0.25rem 0.8rem 0.8rem;
  background: var(--vision-green-pale);
}

#xo-content .page65.formatbox #about .vision_subtitle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  color: var(--vision-green);
  font-size: 1.08em;
}

#xo-content .page65.formatbox #about .vision_campus_text {
  display: grid;
  gap: 0.95rem;
}

#xo-content .page65.formatbox #about .vision_campus_text p {
  padding-left: 1rem;
  border-left: 0.22rem solid #bad8c4;
}

#xo-content .page65.formatbox #about .vision_campus_text p:nth-child(2) {
  border-left-color: #9ac8df;
}

#xo-content .page65.formatbox #about .vision_planning_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding-left: 2.65rem;
  list-style-type: decimal;
}

#xo-content .page65.formatbox #about .vision_planning_list li {
  padding: 0.82rem 1rem;
  border: 0.0625rem solid #dce9df;
  border-radius: 0.75rem;
  background: #fff;
  line-height: 1.75;
  overflow-wrap: anywhere;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

#xo-content .page65.formatbox #about .vision_planning_list li::marker {
  color: var(--vision-blue);
  font-weight: 700;
}

#xo-content .page65.formatbox #about .vision_planning_list li:nth-child(odd) {
  background: #f8fcf8;
}

#xo-content .page65.formatbox #about .vision_planning_list li:hover {
  background: var(--vision-blue-pale);
  box-shadow: 0 0.2rem 0.65rem #183f2630;
}

#xo-content .page65.formatbox #about .vision_planning_list strong {
  color: var(--vision-green);
}


/*============學校概況：本頁專屬=================*/
#xo-content .page66.formatbox #about {
  --school_overview_green: #246e45;
  --school_overview_blue: #176a96;
  --school_overview_red: #b33c4f;
  --school_overview_pale: #f1f9f2;
}

#xo-content .page66.formatbox #about .school_overview_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-width: 0;
}

#xo-content .page66.formatbox #about .school_overview_figure {
  width: 100%;
  max-width: 49rem;
  margin: 0 auto 1rem;
}

#xo-content .page66.formatbox #about .school_overview_text {
  min-width: 0;
}

#xo-content .page66.formatbox #about .school_overview_section_title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.58rem 0.9rem;
  border-left: 0.38rem solid var(--school_overview_green);
  border-radius: 0.2rem 0.7rem 0.7rem 0.2rem;
  background: linear-gradient(90deg, var(--school_overview_pale), #fff);
  color: var(--school_overview_green);
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.45;
}

#xo-content .page66.formatbox #about .school_overview_section_title .fa-solid {
  flex: none;
  color: var(--school_overview_red);
}

#xo-content .page66.formatbox #about #school_overview_history_title {
  border-left-color: var(--school_overview_blue);
  background: linear-gradient(90deg, #eef7fc, #fff);
  color: var(--school_overview_blue);
}

#xo-content .page66.formatbox #about .school_overview_facts {
  display: grid;
  grid-template-columns: minmax(5rem, 20rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 0;
}

#xo-content .page66.formatbox #about .school_overview_fact {
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 0.0625rem solid #d6e6dc;
  border-radius: 0.7rem;
  background: #fbfefa;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#xo-content .page66.formatbox #about .school_overview_fact:nth-child(even) {
  border-color: #d6e7ee;
  background: #f7fbfe;
}

#xo-content .page66.formatbox #about .school_overview_fact:hover {
  background: #eef8f0;
  box-shadow: 0 0.2rem 0.65rem rgba(23, 91, 61, 0.13);
}

#xo-content .page66.formatbox #about .school_overview_fact dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--school_overview_green);
  font-size: 1.06em;
  font-weight: 700;
  line-height: 1.5;
}

#xo-content .page66.formatbox #about .school_overview_fact dt .fa-solid {
  color: var(--school_overview_red);
}

#xo-content .page66.formatbox #about .school_overview_fact dd {
  margin: 0;
  padding: 0;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

#xo-content .page66.formatbox #about .school_overview_period {
  min-width: 0;
}

#xo-content .page66.formatbox #about .school_overview_period_title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.65rem;
  background: #eaf4ed;
  color: var(--school_overview_green);
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.45;
}

#xo-content .page66.formatbox #about .school_overview_period:nth-child(even) .school_overview_period_title {
  background: #edf6fb;
  color: var(--school_overview_blue);
}

#xo-content .page66.formatbox #about .school_overview_period_title .fa-clock {
  flex: none;
  color: var(--school_overview_red);
}

#xo-content .page66.formatbox #about .school_overview_timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  margin: 0 0 0 0.9rem;
  padding: 0 0 0 1.45rem;
  border-left: 0.16rem solid #b5d7c3;
  list-style: none;
}

#xo-content .page66.formatbox #about .school_overview_timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.12rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0.95rem;
  border: 0.0625rem solid #dce7df;
  border-radius: 0.7rem;
  background: #fff;
  line-height: 1.75;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#xo-content .page66.formatbox #about .school_overview_timeline li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: -1.88rem;
  width: 0.66rem;
  height: 0.66rem;
  border: 0.13rem solid #fff;
  border-radius: 50%;
  background: var(--school_overview_green);
  box-shadow: 0 0 0 0.12rem var(--school_overview_green);
}

#xo-content .page66.formatbox #about .school_overview_period:nth-child(even) .school_overview_timeline {
  border-left-color: #b9d8e7;
}

#xo-content .page66.formatbox #about .school_overview_period:nth-child(even) .school_overview_timeline li::before {
  background: var(--school_overview_blue);
  box-shadow: 0 0 0 0.12rem var(--school_overview_blue);
}

#xo-content .page66.formatbox #about .school_overview_timeline li:hover {
  background: #f2f9f4;
  box-shadow: 0 0.2rem 0.65rem rgba(23, 91, 61, 0.13);
}

#xo-content .page66.formatbox #about .school_overview_year {
  color: var(--school_overview_blue);
  font-weight: 700;
}

#xo-content .page66.formatbox #about .school_overview_event {
  min-width: 0;
}

/*============校徽區：本頁專屬=================*/
/* 最新收斂：上方左圖30%／右介紹70%；下方全寬四卡片兩欄兩排。
   共用標題、圖框及圖片動畫沿用 css_box；高倍率與手機留給既有分流。 */
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_layout {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 70fr);
    gap: 1.5rem;
    align-items: start;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_figure {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-color: #cadfd2;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_figure a {
    background: #fff;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_figure img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_text {
    min-width: 0;
    overflow-wrap: anywhere;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_section_title {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-left: 0.25rem solid #237346;
    border-radius: 0 0.5rem 0.5rem 0;
    background: linear-gradient(90deg, #edf7ef, #fff);
    color: #176b2d;
    font-size: 120%;
    line-height: 1.65;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_section_title .fa-solid {
    flex: 0 0 auto;
    color: #b32644;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_intro {
    margin: 0 0 1.25rem;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact {
    min-width: 0;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #d5e6da;
    border-left: 0.1875rem solid #42845c;
    border-radius: 0.625rem;
    background: #f6fbf5;
    box-shadow: 0 0.125rem 0.375rem rgba(28, 77, 49, 0.06);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact:nth-child(even) {
    border-color: #d2e3ed;
    border-left-color: #2779a0;
    background: #f5faff;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact:hover {
    border-color: #8db79b;
    background: #edf7ed;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact:nth-child(even):hover {
    border-color: #91b7cb;
    background: #edf6fd;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact dt {
    margin: 0 0 0.4rem;
    padding: 0;
    color: #176b2d;
    font-size: 110%;
    font-weight: 700;
    line-height: 1.7;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact:nth-child(even) dt {
    color: #075b84;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact dt .fa-solid {
    margin-right: 0.45rem;
    color: #b32644;
}
#xo-content .page70.formatbox #about .school_emblem_box .school_emblem_fact dd {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.95;
    overflow-wrap: anywhere;
}


/* 校歌區：共用標題與圖片效果沿用 css_box。 */
#xo-content .page70.formatbox #about .school_song_box .school_song_figure {
  margin: 0 0 1.5rem;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_section_title {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 1rem; padding: 0.6rem 0.8rem;
  border-left: 0.25rem solid #176b2d;
  background: #f1f9f2; color: #176b2d;
  font-size: 1.15em; line-height: 1.7;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_section_title > .fa-solid {
  flex-shrink: 0; color: #b3261e;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_authors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem; margin: 0 0 1rem; color: #075b84;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem; margin: 0; padding: 0; list-style: none;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_facts > li {
  display: flex; align-items: baseline; gap: 0.6rem;
  min-width: 0; margin: 0; padding: 0.9rem;
  border: 0.0625rem solid #d6e6dc; border-radius: 0.7rem;
  background: #f6fbf5; color: #174960; line-height: 2; list-style: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_facts > li:nth-child(even) {
  background: #f3f9fc; border-color: #d2e5ef;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_facts > li:hover {
  background: #edf6ed; border-color: #8daf99;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_note {
  flex-shrink: 0; color: #b3261e;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_video_box {
  overflow: hidden; border: 0.0625rem solid #c8d9d3;
  border-radius: 0.7rem; background: #f3f9fc;
}

#xo-content .page70.formatbox #about .school_song_box iframe.school_song_video {
  display: block; width: 100%; height: auto; min-height: 0;
  aspect-ratio: 16 / 9; margin: 0; border: 0;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits_title {
  margin: 1.25rem 0 0.75rem; color: #075b84; font-size: 1em; line-height: 1.7;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits_title > .fa-solid {
  color: #b3261e;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits > dl {
  min-width: 0; margin: 0; padding: 0.65rem 0.85rem;
  border-left: 0.1875rem solid #9bbcaa; border-radius: 0.35rem; background: #f6faf7;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits > dl > dt {
  margin: 0; padding: 0; color: #176b2d;
  font-size: 1em; font-weight: bold; line-height: 1.7;
}

#xo-content .page70.formatbox #about .school_song_box .school_song_credits > dl > dd {
  margin: 0; padding: 0; color: #174960; line-height: 1.8;
}


/*==========頁籤調整==============*/

#xo-content .page70.formatbox  .skltbs-theme-light .skltbs-panel, 
#xo-content .page70.formatbox .skltbs-theme-dark .skltbs-panel {
    padding: 0.9375rem 0ra,; 
    border: none; 
}

/* 頁籤：覆蓋 Skeletabs 原生樣式，放在原生 CSS 之後。 */
/* 僅桌面頁籤列使用 flex，避免蓋掉手風琴模式的隱藏設定。 */
#xo-content .page70.formatbox .skltbs-theme-light.skltbs-mode-tabs > .skltbs-tab-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.25rem;
    list-style: none;
}
#xo-content .page70.formatbox .skltbs-theme-light.skltbs-mode-tabs > .skltbs-tab-group::after {
    content: none;
    display: none;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab-item {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab {
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.75rem 1.25rem;
    border: 0.0625rem solid #9bb8cd;
    border-radius: 0.75rem;
    background: #f3f8fc;
    color: #174960;
    font-family: inherit;
    line-height: 1.6;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab:hover {
    background: #e4f0fa;
    border-color: #0066cc;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab.skltbs-active {
    color: #fff;
    background: #0066cc;
    border-color: #0066cc;
    font-weight: bold;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab.skltbs-active:hover {
    background: #005bb5;
    border-color: #005bb5;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab:focus {
    outline: 0.1875rem solid #174960;
    outline-offset: 0.1875rem;
    box-shadow: none;
}
#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab:disabled {
    cursor: not-allowed;
}




#xo-content .page70.formatbox .skltbs-theme-light .skltbs-tab, 
#xo-content .page70.formatbox .skltbs-theme-dark .skltbs-tab {
    font-size: 1.2rem;

}




/* 教職員信箱：共用標題與圖片效果沿用 css_box。 */
#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_figure {
  margin: 0 0 1.5rem;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_section_title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 0.25rem solid #176b2d;
  background: #f1f9f2;
  color: #176b2d;
  font-size: 1.15em;
  line-height: 1.7;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_section_title > .fa-solid {
  flex-shrink: 0;
  color: #b3261e;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_notices {
  margin: 0 0 1.5rem;
}

#xo-content .page71.formatbox #about .staff_mail_box p.staff_mail_notice {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.65rem;
  padding: 0.8rem 1rem;
  border: 0.0625rem solid #d6e6dc;
  border-radius: 0.7rem;
  background: #f6fbf5;
  color: #174960;
  text-indent: 0;
  line-height: 1.9;
}

#xo-content .page71.formatbox #about .staff_mail_box p.staff_mail_notice:nth-child(even) {
  background: #f3f9fc;
  border-color: #d2e5ef;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_notice > .fa-solid {
  flex-shrink: 0;
  color: #b3261e;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_notice > span:last-child {
  min-width: 0;
}

#xo-content .page71.formatbox #about .staff_mail_box table.staff_mail_table {
  width: 100%;
  margin: 1.5rem 0 0;
  border: 0.0625rem solid #c8d9d3;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.75rem;
  background: #fff;
  color: #174960;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > caption {
  padding: 0 0 0.8rem;
  caption-side: top;
  color: #176b2d;
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > caption > .fa-solid {
  color: #b3261e;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > thead > tr > th {
  padding: 0.8rem 0.9rem;
  border: 0;
  background: #176b2d;
  color: #fff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  line-height: 1.7;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > thead > tr > th:first-child {
  border-top-left-radius: 0.65rem;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > thead > tr > th:last-child {
  border-top-right-radius: 0.65rem;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr > td {
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 0.0625rem solid #dce8e1;
  background: #fff;
  vertical-align: middle;
  line-height: 1.8;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:nth-child(even) > td {
  background: #f2f8f4;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:hover > td {
  background: #eaf4fa;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:focus-within > td {
  background: #eaf4fa;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:last-child > td {
  border-bottom: 0;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 0.65rem;
}

#xo-content .page71.formatbox #about .staff_mail_box .staff_mail_table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 0.65rem;
}

#xo-content .page71.formatbox #about .staff_mail_box a.staff_mail_link {
  color: #075b84;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 0.15rem;
  transition: color 0.2s ease;
}

#xo-content .page71.formatbox #about .staff_mail_box a.staff_mail_link:hover {
  color: #b3261e;
}

#xo-content .page71.formatbox #about .staff_mail_box a.staff_mail_link:focus {
  outline: 0.1875rem solid #075b84;
  outline-offset: 0.1875rem;
}


/* 校園平面圖：共用標題與圖片效果沿用 css_box。 */
#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_figure {
  margin: 0 0 1.5rem;
}

#xo-content .page67.formatbox #about .campus_plan_box p.campus_plan_note {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 0.0625rem solid #d2e5ef;
  border-radius: 0.7rem;
  background: #f3f9fc;
  color: #075b84;
  text-indent: 0;
  line-height: 1.9;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_note > .fa-solid {
  flex-shrink: 0;
  color: #b3261e;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_note > span:last-child {
  min-width: 0;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_section_title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 0.25rem solid #176b2d;
  background: #f1f9f2;
  color: #176b2d;
  font-size: 1.15em;
  line-height: 1.7;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_section_title > .fa-solid {
  flex-shrink: 0;
  color: #b3261e;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_section_blue {
  border-left-color: #075b84;
  background: #f3f9fc;
  color: #075b84;
}

#xo-content .page67.formatbox #about .campus_plan_box p.campus_plan_location {
  margin: 1.5rem 0 0.5rem;
  padding: 0.7rem 0.9rem;
  border-left: 0.1875rem solid #9bbcaa;
  border-radius: 0.35rem;
  background: #f6faf7;
  color: #176b2d;
  text-indent: 0;
  line-height: 1.9;
}

#xo-content .page67.formatbox #about .campus_plan_box table.campus_plan_table {
  width: 100% !important;
  margin: 1rem 0 1.5rem;
  border: 0.0625rem solid #c8d9d3;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.75rem;
  background: #fff;
  color: #174960;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > caption {
  padding: 0 0 0.7rem;
  color: #176b2d;
  caption-side: top;
  font-size: 1.05em;
  font-weight: bold;
  text-align: left;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > thead > tr > th {
  padding: 0.8rem 0.9rem;
  border: 0;
  background: #176b2d;
  color: #fff;
  text-align: left;
  font-weight: bold;
  line-height: 1.7;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > thead > tr > th:first-child {
  border-top-left-radius: 0.65rem;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > thead > tr > th:last-child {
  border-top-right-radius: 0.65rem;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr > td {
  padding: 0.8rem 0.9rem;
  border: 0;
  border-bottom: 0.0625rem solid #dce8e1;
  background: #fff;
  vertical-align: top;
  line-height: 1.9;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr > td:first-child {
  color: #176b2d;
  font-weight: bold;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr:nth-child(even) > td {
  background: #f2f8f4;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr:hover > td {
  background: #eaf4fa;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr:last-child > td {
  border-bottom: 0;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 0.65rem;
}

#xo-content .page67.formatbox #about .campus_plan_box .campus_plan_table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 0.65rem;
}

/* 學校位置圖：全寬地圖、街景及單欄交通說明。 */
#xo-content .page68.formatbox #about .school_location_media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

#xo-content .page68.formatbox #about .school_location_map_card {
  min-width: 0;
  padding: 1rem;
  border: 0.0625rem solid #c8d9d3;
  border-radius: 0.75rem;
  background: #fbfefa;
  box-shadow: 0 0.2rem 0.5rem rgba(22, 82, 104, 0.1);
}

#xo-content .page68.formatbox #about .school_location_map_card > h4, #xo-content .page68.formatbox #about #school_location_info_title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 0.25rem solid #176b2d;
  background: #f1f9f2;
  color: #176b2d;
  font-size: 1.15em;
  line-height: 1.7;
}

#xo-content .page68.formatbox #about h4 > .fa-solid, #xo-content .page68.formatbox #about h5 > .fa-solid {
  flex-shrink: 0;
  color: #b3261e;
}

#xo-content .page68.formatbox #about .school_location_iframe_box {
  overflow: hidden;
  border: 0.0625rem solid #d2e5ef;
  border-radius: 0.6rem;
  background: #f3f9fc;
}

#xo-content .page68.formatbox #about iframe.school_location_iframe {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  aspect-ratio: 4 / 3;
}

#xo-content .page68.formatbox #about p.school_location_map_link {
  margin: 0.85rem 0 0;
  text-indent: 0;
}

#xo-content .page68.formatbox #about p.school_location_map_caption {
  margin: 0.85rem 0 0;
  color: #52605a;
  text-indent: 0;
  line-height: 1.8;
}

#xo-content .page68.formatbox #about .school_location_traffic_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}

#xo-content .page68.formatbox #about .school_location_traffic_card {
  min-width: 0;
  padding: 1rem;
  border: 0.0625rem solid #d6e6dc;
  border-left: 0.1875rem solid #176b2d;
  border-radius: 0.7rem;
  background: #f6fbf5;
  transition: background-color 0.2s ease;
}

#xo-content .page68.formatbox #about .school_location_traffic_card:nth-child(even) {
  border-left-color: #075b84;
  background: #f3f9fc;
}

#xo-content .page68.formatbox #about .school_location_traffic_card:hover {
  background: #edf5f1;
}

#xo-content .page68.formatbox #about .school_location_traffic_card > h5 {
  margin: 0 0 0.6rem;
  color: #176b2d;
  font-size: 1.05em;
  line-height: 1.8;
}

#xo-content .page68.formatbox #about .school_location_traffic_card > p {
  margin: 0 0 0.65rem;
  text-indent: 0;
  line-height: 1.9;
}

#xo-content .page68.formatbox #about .school_location_traffic_card > p:last-child {
  margin-bottom: 0;
}

#xo-content .page68.formatbox #about .school_location_notice {
  margin: 1.5rem 0 0;
  padding: 1rem;
  border: 0.0625rem solid #d2e5ef;
  border-radius: 0.7rem;
  background: #f3f9fc;
}

#xo-content .page68.formatbox #about .school_location_notice > h5 {
  margin: 0 0 0.6rem;
  color: #075b84;
  font-size: 1em;
  line-height: 1.8;
}

#xo-content .page68.formatbox #about .school_location_notice > p {
  margin: 0 0 1rem;
  text-indent: 0;
}

#xo-content .page68.formatbox #about .school_location_action_links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#xo-content .page68.formatbox #about .school_location_map_link > a, #xo-content .page68.formatbox #about .school_location_action_links > a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem;
  border: 0.0625rem solid #9bb8cd;
  border-radius: 0.6rem;
  color: #075b84;
  background: #fff;
  text-decoration: none;
  line-height: 1.7;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease;
}

#xo-content .page68.formatbox #about .school_location_map_link > a:hover, #xo-content .page68.formatbox #about .school_location_action_links > a:hover {
  color: #b3261e;
  background: #eaf4fa;
}

#xo-content .page68.formatbox #about .school_location_map_link > a:focus, #xo-content .page68.formatbox #about .school_location_action_links > a:focus {
  outline: 0.1875rem solid #075b84;
  outline-offset: 0.1875rem;
}

/* 學區安全地圖。 */
#xo-content .page72.formatbox #about .school_safety_box { min-width: 0; }
#xo-content .page72.formatbox #about .school_safety_note {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid var(--about-blue);
  border-radius: 0.4rem;
  background: #eff7fc;
  color: #075b84;
  text-indent: 0;
}
#xo-content .page72.formatbox #about .school_safety_section_title {
  margin: 1.5rem 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border-left: 0.25rem solid var(--about-green);
  background: linear-gradient(90deg, #eef8f0, #ffffff);
  color: var(--about-green);
  font-size: 120%;
  line-height: 1.6;
}
#xo-content .page72.formatbox #about .school_safety_title_blue {
  border-left-color: var(--about-blue);
  background: linear-gradient(90deg, #eef7fc, #ffffff);
  color: var(--about-blue);
}
#xo-content .page72.formatbox #about .school_safety_box h4 .fa-solid,
#xo-content .page72.formatbox #about .school_safety_note .fa-solid {
  margin-right: 0.4rem;
  color: var(--about-red);
}
#xo-content .page72.formatbox #about .school_safety_table {
  width: 100%;
  margin: 0 0 1.5rem;
  border: 0.0625rem solid #c8d9d3;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.625rem;
  background: #ffffff;
  color: #303030;
  line-height: 1.8;
}
#xo-content .page72.formatbox #about .school_safety_table caption {
  padding: 0.45rem 0 0.65rem;
  caption-side: top;
  color: #46545a;
  font-size: 95%;
  text-align: left;
}
#xo-content .page72.formatbox #about .school_safety_table th,
#xo-content .page72.formatbox #about .school_safety_table td {
  padding: 0.85rem 1rem;
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
#xo-content .page72.formatbox #about .school_safety_table thead th {
  background: #176b2d;
  color: #ffffff;
  font-weight: 700;
}
#xo-content .page72.formatbox #about .school_safety_table_blue thead th { background: #075b84; }
#xo-content .page72.formatbox #about .school_safety_table thead th:first-child { border-top-left-radius: 0.55rem; }
#xo-content .page72.formatbox #about .school_safety_table thead th:last-child { border-top-right-radius: 0.55rem; }
#xo-content .page72.formatbox #about .school_safety_table tbody tr + tr td { border-top: 0.0625rem solid #dce8e1; }
#xo-content .page72.formatbox #about .school_safety_table tbody td { transition: background-color 0.2s ease; }
#xo-content .page72.formatbox #about .school_safety_table tbody tr:nth-child(even) td { background: #f4faf5; }
#xo-content .page72.formatbox #about .school_safety_table tbody tr:hover td { background: #edf6fc; }
#xo-content .page72.formatbox #about .school_safety_table tbody td:first-child strong { color: var(--about-green); }
#xo-content .page72.formatbox #about .school_safety_table_blue tbody td:first-child strong { color: var(--about-blue); }
#xo-content .page72.formatbox #about .school_safety_table td p {
  margin: 0.4rem 0 0;
  text-indent: 0;
  line-height: 1.8;
}
#xo-content .page72.formatbox #about .school_safety_tag {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0.55rem;
  border: 0.0625rem solid #eccdcd;
  border-radius: 0.35rem;
  background: #fff5f4;
  color: #a82323;
  font-size: 90%;
  font-weight: 700;
}
#xo-content .page72.formatbox #about .school_safety_reminder {
  padding: 1rem;
  border: 0.0625rem solid #cce2d1;
  border-left: 0.25rem solid var(--about-green);
  border-radius: 0.625rem;
  background: #f1f9ef;
  transition: background-color 0.2s ease;
}
#xo-content .page72.formatbox #about .school_safety_reminder:hover { background: #eaf5e8; }
#xo-content .page72.formatbox #about .school_safety_reminder h4 {
  margin: 0 0 0.65rem;
  color: var(--about-green);
  font-size: 115%;
  line-height: 1.6;
}
#xo-content .page72.formatbox #about .school_safety_reminder p {
  margin: 0;
  text-indent: 0;
  line-height: 1.9;
}

/* 校園安全地圖：沿用共用標題、圖片及動畫設定。 */
#xo-content .page73.formatbox #about .campus_safety_box {
  min-width: 0;
}



#xo-content .page73.formatbox #about .campus_safety_note {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid var(--about-blue);
  border-radius: 0.4rem;
  background: #eff7fc;
  color: #075b84;
  text-indent: 0;
}

#xo-content .page73.formatbox #about .campus_safety_section_title {
  margin: 1.5rem 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border-left: 0.25rem solid var(--about-green);
  background: linear-gradient(90deg, #eef8f0, #ffffff);
  color: var(--about-green);
  font-size: 120%;
  line-height: 1.6;
}

#xo-content .page73.formatbox #about .campus_safety_title_blue {
  border-left-color: var(--about-blue);
  background: linear-gradient(90deg, #eef7fc, #ffffff);
  color: var(--about-blue);
}

#xo-content .page73.formatbox #about .campus_safety_box h4 .fa-solid {
  margin-right: 0.4rem;
  color: var(--about-red);
}

#xo-content .page73.formatbox #about .campus_safety_note .fa-solid {
  color: var(--about-red);
}

#xo-content .page73.formatbox #about .campus_safety_table {
  width: 100%;
  margin: 0 0 1.5rem;
  border: 0.0625rem solid #c8d9d3;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.625rem;
  background: #ffffff;
  color: #303030;
  line-height: 1.8;
}

#xo-content .page73.formatbox #about .campus_safety_table caption {
  padding: 0.45rem 0 0.65rem;
  caption-side: top;
  color: #46545a;
  font-size: 95%;
  text-align: left;
}

#xo-content .page73.formatbox #about .campus_safety_table th {
  padding: 0.85rem 1rem;
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

#xo-content .page73.formatbox #about .campus_safety_table td {
  padding: 0.85rem 1rem;
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

#xo-content .page73.formatbox #about .campus_safety_table thead th {
  background: #176b2d;
  color: #ffffff;
  font-weight: 700;
}

#xo-content .page73.formatbox #about .campus_safety_table_blue thead th {
  background: #075b84;
}

#xo-content .page73.formatbox #about .campus_safety_table thead th:first-child {
  border-top-left-radius: 0.55rem;
}

#xo-content .page73.formatbox #about .campus_safety_table thead th:last-child {
  border-top-right-radius: 0.55rem;
}

#xo-content .page73.formatbox #about .campus_safety_table tbody tr + tr td {
  border-top: 0.0625rem solid #dce8e1;
}

#xo-content .page73.formatbox #about .campus_safety_table tbody td {
  transition: background-color 0.2s ease;
}

#xo-content .page73.formatbox #about .campus_safety_table tbody tr:nth-child(even) td {
  background: #f4faf5;
}

#xo-content .page73.formatbox #about .campus_safety_table tbody tr:hover td {
  background: #edf6fc;
}

#xo-content .page73.formatbox #about .campus_safety_table tbody td:first-child strong {
  color: var(--about-green);
}

#xo-content .page73.formatbox #about .campus_safety_table_blue tbody td:first-child strong {
  color: var(--about-blue);
}

#xo-content .page73.formatbox #about .campus_safety_table td p {
  margin: 0.4rem 0 0;
  text-indent: 0;
  line-height: 1.8;
}

#xo-content .page73.formatbox #about .campus_safety_label {
  color: var(--about-blue);
}

#xo-content .page73.formatbox #about .campus_safety_tag {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0.55rem;
  border: 0.0625rem solid #eccdcd;
  border-radius: 0.35rem;
  background: #fff5f4;
  color: #a82323;
  font-size: 90%;
  font-weight: 700;
}

#xo-content .page73.formatbox #about .campus_safety_warning_note {
  margin: 0 0 0.65rem;
  color: #46545a;
  text-indent: 0;
}

#xo-content .page73.formatbox #about .campus_safety_reminder {
  padding: 1rem;
  border: 0.0625rem solid #cce2d1;
  border-left: 0.25rem solid var(--about-green);
  border-radius: 0.625rem;
  background: #f1f9ef;
  transition: background-color 0.2s ease;
}

#xo-content .page73.formatbox #about .campus_safety_reminder:hover {
  background: #eaf5e8;
}

#xo-content .page73.formatbox #about .campus_safety_reminder h4 {
  margin: 0 0 0.65rem;
  color: var(--about-green);
  font-size: 115%;
  line-height: 1.6;
}

#xo-content .page73.formatbox #about .campus_safety_reminder p {
  margin: 0;
  text-indent: 0;
  line-height: 1.9;
}

/* 校園開放時間：沿用共用標題與圖片，三組時段單欄流動。 */
#xo-content .page87.formatbox #about .campus_open_box {
  min-width: 0;
}

#xo-content .page87.formatbox #about .campus_open_section_title {
  margin: 1.5rem 0 0.85rem;
  padding: 0.55rem 0.85rem;
  border-left: 0.25rem solid var(--about-green);
  background: linear-gradient(90deg, #eef8f0, #ffffff);
  color: var(--about-green);
  font-size: 120%;
  line-height: 1.6;
}

#xo-content .page87.formatbox #about .campus_open_title_blue {
  border-left-color: var(--about-blue);
  background: linear-gradient(90deg, #eef7fc, #ffffff);
  color: var(--about-blue);
}

#xo-content .page87.formatbox #about .campus_open_box h4 .fa-solid {
  margin-right: 0.4rem;
  color: var(--about-red);
}

#xo-content .page87.formatbox #about .campus_open_hours {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

#xo-content .page87.formatbox #about .campus_open_hours li {
  margin: 0rem;
  padding: 0.85rem 1rem;
  border: 0.0625rem solid #d3e4d9;
  border-left: 0.25rem solid var(--about-green);
  border-radius: 0.65rem;
  background: #f5fbf6;
  transition: background-color 0.2s ease;
  list-style: none;
}

#xo-content .page87.formatbox #about .campus_open_hours li:nth-child(2) {
  border-left-color: var(--about-blue);
  background: #f2f8fd;
}

#xo-content .page87.formatbox #about .campus_open_hours li:hover {
  background: #eaf5ee;
}

#xo-content .page87.formatbox #about .campus_open_day {
 display: block; 
  color: var(--about-green);
  font-weight: 700;
  line-height: 1.7;
}

#xo-content .page87.formatbox #about .campus_open_day .fa-solid {
  margin-right: 0.4rem;
  color: var(--about-red);
}

#xo-content .page87.formatbox #about .campus_open_time {
 display: block; 
  margin-top: 0.25rem;
  color: var(--about-blue);
  font-size: 145%;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

#xo-content .page87.formatbox #about .campus_open_area {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 0.0625rem solid #cce2d1;
  border-left: 0.25rem solid var(--about-green);
  border-radius: 0.65rem;
  background: #f0f8ee;
}

#xo-content .page87.formatbox #about .campus_open_area h4 {
  margin: 0 0 0.5rem;
  color: var(--about-green);
  font-size: 115%;
  line-height: 1.6;
}

#xo-content .page87.formatbox #about .campus_open_area p {
  margin: 0;
  text-indent: 0;
}

#xo-content .page87.formatbox #about .campus_open_rules {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

#xo-content .page87.formatbox #about .campus_open_rules li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.65rem;
  padding: 0.85rem 1rem;
  border: 0.0625rem solid #d1e3ee;
  border-radius: 0.65rem;
  background: #f7fbfe;
  line-height: 1.9;
  transition: background-color 0.2s ease;
}

#xo-content .page87.formatbox #about .campus_open_rules li:hover {
  background: #edf6fc;
}

#xo-content .page87.formatbox #about .campus_open_rules li > .fa-solid {
  flex: 0 0 1.35rem;
  margin-top: 0.6rem;
  color: var(--about-red);
  text-align: center;
}

#xo-content .page87.formatbox #about .campus_open_rules li > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

#xo-content .page87.formatbox #about .campus_open_rules strong {
  color: var(--about-blue);
}

#xo-content .page87.formatbox #about .campus_open_smoking {
  padding: 1rem;
  border: 0.0625rem solid #edcccc;
  border-left: 0.25rem solid var(--about-red);
  border-radius: 0.65rem;
  background: #fff6f4;
}

#xo-content .page87.formatbox #about .campus_open_smoking h4 {
  margin: 0 0 0.5rem;
  color: #a82323;
  font-size: 115%;
  line-height: 1.6;
}

#xo-content .page87.formatbox #about .campus_open_smoking p {
  margin: 0;
  text-indent: 0;
}

#xo-content .page87.formatbox #about .campus_open_thanks {
  margin: 1.25rem 0 0;
  color: var(--about-green);
  text-align: center;
  text-indent: 0;
  font-weight: 700;
}

#xo-content .page87.formatbox #about .campus_open_thanks .fa-solid {
  color: var(--about-red);
}

/*=============通用補丁==============*/
#xo-content .formatbox #about table {
  display: table !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}




/*============動畫=================*/
.animationtrue #about #conrent_01 {
	position: relative;
	animation-duration: 1.5s;
	animation-name: aboutcenter;
	opacity: 1;
}

.animationtrue #about .conrent_each {
	position: relative;
	animation-duration: 1.5s;
	opacity: 0;
}

@keyframes aboutcenter {
	from {
		top: 12.5rem;
		opacity: 0;
	}

	to {
		top: 0rem;
		opacity: 1;
	}
}