/*==========簡介內容頁共用設定=========*/
#xo-content .formatbox #about {
	position: relative;
	padding: 1.5rem 0.625rem;
	color: #303030;
	word-break: normal;
	overflow-wrap: anywhere;
}

#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_title_h3 {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0rem, 1fr) 2.75rem;
	column-gap: 0.75rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 4.0625rem;
	margin: 0rem 0rem 1.875rem 0rem !important;
	padding: 0.5rem 0.75rem;
	background: linear-gradient(0deg, #ad2f69 50%, #bf3778 50%);
	border: 0rem;
	border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	box-shadow: 0rem 0.75rem 0rem -0.4rem #197caf;
	color: #ffffff;
	font-size: 140%;
	font-weight: 550;
	line-height: 1.45;
	text-align: center;
	font-family:"LXGWWenKai","Microsoft JhengHei",sans-serif;
}

#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.1875rem 2.1875rem;
	background: #ffffff;
	border: 0.1875rem solid #f1dc00;
	border-radius: 0.9375rem;
	box-shadow: 0rem 0.125rem 0.25rem rgba(85, 28, 55, 0.22);
	color: #a91569;
	overflow-wrap: anywhere;
}

#xo-content .formatbox #about_title_h3 .about_title_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	border: 0rem;
	border-radius: 0rem;
	box-shadow: none;
	color: #B1F93B;
	font-size: 190%;
	line-height: 1;
	pointer-events: none;
	font-size: 125%;
}

#xo-content .formatbox #about_title_h3 .about_title_icon:last-child {
	justify-self: end;
}

/*==========簡介內容頁共用文字=========*/
#xo-content .formatbox #about .conrent_each {
	position: relative;
	margin: 0rem 0rem 2.25rem 0rem;
	color: #303030;
	line-height: 1.9;
	font-family:"LXGWWenKai","Microsoft JhengHei",sans-serif;
	font-weight: 500;
}

#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: #075b84;
}

#xo-content .formatbox #about .style_03 {
	color: #8a4a00;
}

#xo-content .formatbox #about .style_04 {
	color: #176b2d;
}

#xo-content .formatbox #about .style_05 {
	color: #64249b;
}

#xo-content .formatbox #about .style_06 {
	color: #b3261e;
}

#xo-content .formatbox #about h4 .fa-brands {
	position: relative;
	top: 0.1875rem;
	font-size: 130%;
}

/*==========簡介內容頁共用圖片=========*/
#xo-content .formatbox #about #img_box {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

#xo-content .formatbox #about #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 .img_box:hover img {
	transform-origin: center bottom;
	animation: img_box 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes img_box {
	0% {
		transform: scale(1, 1);
	}

	24% {
		transform: scale(1.055, 0.94);
	}

	45% {
		transform: scale(0.97, 1.045);
	}

	64% {
		transform: scale(1.025, 0.98);
	}

	82% {
		transform: scale(0.992, 1.012);
	}

	100% {
		transform: scale(1, 1);
	}
}


#xo-content .formatbox #about #img_box figcaption {
	position: relative;
	margin: 0rem;
	padding: 0.5rem 0.75rem 0.125rem 0.75rem;
	color: #46545a;
	font-size: 90%;
	line-height: 1.6;
	text-align: center;
}



/*==========林佩娟校長：neilofficebriefing 五欄位共用=========*/
#xo-content .page1 #briefdescription, 
#xo-content #textbox.page1 {
  --principal-rose: #8b1e55;
  --principal-rose-dark: #66143e;
  --principal-blue: #075b84;
  --principal-green: #28733d;
  --principal-gold: #8a4a00;
  --principal-ink: #29343a;
  --principal-muted: #526169;
  --principal-line: #d5dfe3;
}

#xo-content #textbox.page1 .formatbox .principal_section {
  box-sizing: border-box;
  width: 100%;
  color: var(--principal-ink);
  overflow-wrap: anywhere;
}

/*==========學歷=========*/
#xo-content #textbox.page1 .formatbox .principal_education_card {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  box-sizing: border-box;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fff8dc 0%, #fff3f8 55%, #eef8fb 100%);
  border: 0.0625rem solid #d7cfc2;
  border-radius: 0.875rem;
  box-shadow: 0rem 0.35rem 0.9rem rgba(65, 43, 53, 0.13);
}

#xo-content #textbox.page1 .formatbox .principal_education_icon {
  display: flex;
  flex: 0 0 4.25rem;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  background-color: var(--principal-rose);
  border-radius: 50%;
  color: #ffffff;
  font-size: 180%;
}

#xo-content #textbox.page1 .formatbox .principal_education_content {
  flex: 1 1 22rem;
  min-width: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_education_label {
  color: var(--principal-rose-dark);
  font-weight: 750;
}

#xo-content #textbox.page1 .formatbox .principal_education_degree {
  margin: 0.125rem 0rem 0.375rem 0rem;
  color: var(--principal-blue);
  font-size: 160%;
  font-weight: 850;
  line-height: 1.5;
  text-indent: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_education_content > p:last-child {
  margin: 0rem;
  color: #3d4a50;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_focus_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0rem 0rem 0rem;
  padding: 0rem;
  list-style: none;
}

#xo-content #textbox.page1 .formatbox .principal_focus_list li {
  display: flex;
  flex: 1 1 10rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0rem;
  padding: 0.625rem 0.75rem;
  background-color: #f2f8fa;
  border: 0.0625rem solid #a9c7d4;
  border-radius: 0.5rem;
  color: var(--principal-blue);
  font-weight: 750;
  line-height: 1.6;
  text-align: center;
}

/*==========經歷=========*/
#xo-content #textbox.page1 .formatbox .principal_timeline {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 1rem;
  margin: 0rem;
  padding: 0rem;
  list-style: none;
}

#xo-content #textbox.page1 .formatbox .principal_timeline > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  box-sizing: border-box;
  padding: 1rem 1.125rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--principal-line);
  border-left: 0.375rem solid var(--principal-rose);
  border-radius: 0.625rem;
  box-shadow: 0rem 0.25rem 0.65rem rgba(34, 55, 65, 0.1);
}

#xo-content #textbox.page1 .formatbox .principal_timeline > li.principal_timeline_current {
  background-color: #f0f8f2;
  border-left-color: var(--principal-green);
}

#xo-content #textbox.page1 .formatbox .principal_timeline_time {
  flex: 1 1 11rem;
  color: var(--principal-rose-dark);
  font-weight: 800;
  line-height: 1.7;
}

#xo-content #textbox.page1 .formatbox .principal_timeline_current .principal_timeline_time {
  color: #1d6233;
}

#xo-content #textbox.page1 .formatbox .principal_timeline_content {
  flex: 1.5 1 24rem;
  min-width: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_timeline_content h4,
#xo-content #textbox.page1 .formatbox .principal_experience_highlights h4 {
  margin: 0rem 0rem 0.375rem 0rem;
  color: #183f53;
  font-size: 112%;
  font-weight: 800;
  line-height: 1.6;
}

#xo-content #textbox.page1 .formatbox .principal_timeline_content p,
#xo-content #textbox.page1 .formatbox .principal_experience_highlights p {
  margin: 0rem;
  color: #3d4a50;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_experience_highlights {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 0.875rem;
  margin-top: 1rem;
}

#xo-content #textbox.page1 .formatbox .principal_experience_highlights article {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 1rem;
  background-color: #f2f8fa;
  border: 0.0625rem solid #b9d0da;
  border-radius: 0.625rem;
}

#xo-content #textbox.page1 .formatbox .principal_experience_highlights article > .fa-solid {
  flex: 0 0 2.5rem;
  color: var(--principal-blue);
  font-size: 145%;
  line-height: 1.6;
  text-align: center;
}

#xo-content #textbox.page1 .formatbox .principal_experience_highlights article > div {
  flex: 1 1 22rem;
  min-width: 0rem;
}

/*==========工作職掌=========*/
#xo-content #textbox.page1 .formatbox .principal_duties_intro {
  margin: 0rem 0rem 1rem 0rem;
  padding: 0.75rem 1rem;
  background-color: #fff8dc;
  border-left: 0.375rem solid var(--principal-gold);
  color: #4a3a16;
  font-weight: 750;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_duties_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0rem, 1fr));
  gap: 1rem;
}

#xo-content #textbox.page1 .formatbox .principal_duties_grid article {
  box-sizing: border-box;
  min-width: 0rem;
  padding: 1rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--principal-line);
  border-top: 0.3125rem solid var(--principal-blue);
  border-radius: 0.625rem;
  box-shadow: 0rem 0.25rem 0.65rem rgba(34, 55, 65, 0.1);
}

#xo-content #textbox.page1 .formatbox .principal_duties_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.625rem;
  background-color: var(--principal-blue);
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 130%;
}

#xo-content #textbox.page1 .formatbox .principal_duties_grid h4 {
  margin: 0rem 0rem 0.375rem 0rem;
  color: var(--principal-blue);
  font-size: 112%;
  font-weight: 800;
  line-height: 1.6;
}

#xo-content #textbox.page1 .formatbox .principal_duties_grid p {
  margin: 0rem;
  color: #3d4a50;
  line-height: 1.8;
  text-indent: 0rem;
}

/*==========教育理念=========*/
#xo-content .page1 .formatbox .principal_philosophy {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 1rem;
}

#xo-content .page1 .formatbox .principal_lead,
#xo-content .page1 .formatbox .principal_motto {
  margin: 0rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.8;
  text-align: center;
  text-indent: 0rem;
  letter-spacing: 0.04em;
}

#xo-content .page1 .formatbox .principal_lead {
  background-color: var(--principal-blue);
  font-size: 125%;
}

#xo-content .page1 .formatbox .principal_motto {
  background-color: var(--principal-rose);
  font-size: 135%;
}

#xo-content .page1 .formatbox .principal_message {
  padding: 1.25rem 1.375rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--principal-line);
  border-left: 0.375rem solid #16819a;
  border-radius: 0.75rem;
  box-shadow: 0rem 0.35rem 0.9rem rgba(34, 55, 65, 0.12);
}

#xo-content .page1 .formatbox .principal_message h4 {
  margin: 0rem 0rem 0.875rem 0rem;
  color: var(--principal-blue);
  font-size: 120%;
  font-weight: 800;
}

#xo-content .page1 .formatbox .principal_message p {
  margin: 0rem 0rem 1rem 0rem;
  color: #3a474d;
  line-height: 2;
  text-indent: 2em;
}

#xo-content .page1 .formatbox .principal_message .principal_signature {
  margin: 0rem;
  color: var(--principal-rose-dark);
  font-weight: 800;
  text-align: right;
  text-indent: 0rem;
}

/*==========學校願景=========*/
#xo-content #textbox.page1 .formatbox .principal_vision_intro {
  margin: 0rem 0rem 1.25rem 0rem;
  color: var(--principal-muted);
  font-weight: 650;
  line-height: 1.8;
  text-align: center;
  text-indent: 0rem;
}

#xo-content #textbox.page1 .formatbox .principal_vision_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0rem, 1fr));
  gap: 1.25rem;
}

#xo-content #textbox.page1 .formatbox .principal_vision_card {
  box-sizing: border-box;
  min-width: 0rem;
  padding: 1.25rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--principal-line);
  border-radius: 0.875rem;
  box-shadow: 0rem 0.35rem 0.9rem rgba(34, 55, 65, 0.12);
}

#xo-content #textbox.page1 .formatbox .principal_vision_title {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

#xo-content #textbox.page1 .formatbox .principal_vision_number {
  display: inline-flex;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: #0b67c2;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 135%;
  font-weight: 800;
}

#xo-content #textbox.page1 .formatbox .principal_vision_happiness .principal_vision_number {
  background-color: #18794e;
}

#xo-content #textbox.page1 .formatbox .principal_vision_innovation .principal_vision_number {
  background-color: #8a4a00;
}

#xo-content #textbox.page1 .formatbox .principal_vision_excellence .principal_vision_number {
  background-color: #08758a;
}

#xo-content #textbox.page1 .formatbox .principal_vision_title h4 {
  min-width: 0rem;
  margin: 0rem;
  color: #183f53;
  font-size: 130%;
  font-weight: 800;
  line-height: 1.5;
}

#xo-content #textbox.page1 .formatbox .principal_vision_title h4 span {
  display: inline-block;
  margin-left: 0.25rem;
  color: #5c6670;
  font-size: 70%;
  font-weight: 500;
  letter-spacing: 0.03em;
}

#xo-content #textbox.page1 .formatbox .principal_vision_card > p {
  margin: 0rem;
  color: #3d484e;
  line-height: 1.95;
  text-align: left;
  text-indent: 0rem;
}
