/*==========簡介內容頁共用設定=========*/
#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;
}


/*==========學校簡介=========*/
#xo-content .page2.formatbox #about{
	--school-green: #178264;
	--school-green-dark: #0f684f;
	--school-blue: #197caf;
	--school-pink: #bf3778;
	--school-yellow: #ffd43b;
	--school-line: #c8dce3;
	--school-soft-blue: #f1f8fb;
	--school-soft-green: #f2faf6;
}

#xo-content .page2.formatbox #about .school_intro_layout {
	display: grid;
/*	grid-template-columns: minmax(17rem, 22rem) minmax(0rem, 1fr); */
	grid-template-columns: minmax(0rem, 1fr);
	gap: 1.5rem;
	align-items: start;
}

#xo-content .page2.formatbox #about #conrent_04 .school_intro_layout {
	display: grid;
	grid-template-columns: minmax(17rem, 22rem) minmax(0rem, 1fr); 
	gap: 1.5rem;
	align-items: start;
}


#xo-content .page2.formatbox #about #conrent_02 .school_intro_layout {
	grid-template-columns: minmax(0rem, 1fr);
}

#xo-content .page2.formatbox #about #conrent_02 .school_about_figure {
	width: min(100%, 43rem);
	margin-right: auto;
	margin-left: auto;
}

/*==========圖片與圖說=========*/
#xo-content .page2.formatbox #about .school_about_figure {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.5rem;
	overflow: hidden;
	background: #ffffff;
	border: 0.0625rem solid #b8cdd5;
	border-radius: 0.375rem;
	box-shadow: 0rem 0.25rem 0.75rem rgba(31, 76, 91, 0.16);
	transform: translateY(0rem);
	transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
		width: min(100%, 43rem);
	margin-right: auto;
	margin-left: auto;
}

#xo-content .page2.formatbox #about .school_about_figure:hover,
#xo-content .page2.formatbox #about .school_about_figure:focus-within {
	border-color: #6faabd;
	box-shadow: 0rem 0.5rem 1rem rgba(31, 76, 91, 0.22);
	transform: translateY(-0.1875rem);
}

#xo-content .page2.formatbox #about .school_about_figure a {
	display: block;
	overflow: hidden;
	border-radius: 0.25rem;
}

#xo-content .page2.formatbox #about .school_about_figure a:focus-visible {
	outline: 0.1875rem solid #c81968;
	outline-offset: 0.1875rem;
}

#xo-content .page2.formatbox #about .school_about_figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: scale(1, 1);
	transform-origin: center center;
}
/*
#xo-content .page2.formatbox #about .school_about_figure:hover img,
#xo-content .page2.formatbox #about .school_about_figure:focus-within img {
	animation: school_about_pudding 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes school_about_pudding {
	0% { transform: scale(1, 1); }
	24% { transform: scale(1.035, 0.975); }
	46% { transform: scale(0.985, 1.025); }
	66% { transform: scale(1.012, 0.992); }
	84% { transform: scale(0.996, 1.006); }
	100% { transform: scale(1, 1); }
}
*/
#xo-content .page2.formatbox #about .school_about_figure figcaption {
	margin: 0rem;
	padding: 0.625rem 0.5rem 0.125rem 0.5rem;
	color: #46545a;
	font-size: 90%;
	line-height: 1.65;
	text-align: center;
}

/*==========區塊標題=========*/
#xo-content .page2.formatbox #about .history_section_title {
	display: grid;
	grid-template-columns: 2.25rem minmax(0rem, 1fr) 2.25rem;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	margin: 0rem 0rem 1.25rem 0rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(0deg, var(--school-green-dark) 50%, var(--school-green) 50%);
	border-left: 0.375rem solid var(--school-yellow);
	border-radius: 0.25rem;
	color: #ffffff;
	font-size: 125%;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	box-shadow: 0rem 0.1875rem 0.5rem rgba(15, 104, 79, 0.18);
	filter: brightness(1);
	transition: filter 0.25s ease, box-shadow 0.25s ease;
}

#xo-content .page2.formatbox #about .history_section_title:hover {
	filter: brightness(1.08);
	box-shadow: 0rem 0.3125rem 0.75rem rgba(15, 104, 79, 0.26);
}

#xo-content .page2.formatbox #about .history_section_title .fa-solid {
	color: #fff3a0;
	font-size: 105%;
	transform: rotate(0deg) scale(1);
	transition: transform 0.35s ease;
}

#xo-content .page2.formatbox #about .history_section_title .fa-solid:last-child {
	justify-self: end;
}

#xo-content .page2.formatbox #about .history_section_title:hover .fa-solid:first-child {
	transform: rotate(-12deg) scale(1.12);
}

#xo-content .page2.formatbox #about .history_section_title:hover .fa-solid:last-child {
	transform: rotate(12deg) scale(1.12);
}

/*==========建校緣起=========*/
#xo-content .page2.formatbox #about #conrent_01 .school_intro_text {
	box-sizing: border-box;
	padding: 1.125rem 1.25rem;
	background: var(--school-soft-blue);
	border-left: 0.3125rem solid var(--school-blue);
	border-bottom: 0.0625rem solid var(--school-line);
	box-shadow: 0rem 0rem 0rem rgba(31, 76, 91, 0);
	transform: translateY(0rem);
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

#xo-content .page2.formatbox #about #conrent_01 .school_intro_text:hover {
	background: #f8fcfe;
	box-shadow: 0rem 0.25rem 0.625rem rgba(31, 76, 91, 0.12);
	transform: translateY(-0.125rem);
}

#xo-content .page2.formatbox #about #conrent_01 dl,
#xo-content .page2.formatbox #about #conrent_01 dd {
	margin: 0rem;
}

#xo-content .page2.formatbox #about #conrent_01 dt {
	margin: 0rem 0rem 0.75rem 0rem;
	padding-bottom: 0.5rem;
	color: #075b84;
	font-size: 115%;
	border-bottom: 0.0625rem solid #bad7e3;
}

#xo-content .page2.formatbox #about #conrent_01 dt .fa-solid {
	margin-right: 0.5rem;
	color: var(--school-pink);
}

#xo-content .page2.formatbox #about #conrent_01 dd {
	color: #333333;
	line-height: 2;
}

/*==========建校沿革時間軸=========*/
#xo-content .page2.formatbox #about #conrent_02 dl,
#xo-content .page2.formatbox #about #conrent_03 dl,
#xo-content .page2.formatbox #about #conrent_02 dd,
#xo-content .page2.formatbox #about #conrent_03 dd {
	margin: 0rem;
}

#xo-content .page2.formatbox #about .school_history_period {
	box-sizing: border-box;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0.625rem 0.875rem;
	background: #eaf6fa;
	border-left: 0.3125rem solid var(--school-blue);
	color: #075b84;
	font-size: 112%;
	font-weight: 700;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#xo-content .page2.formatbox #about .school_history_period:hover {
	background: #dff1f7;
	border-left-color: var(--school-pink);
	color: #0f684f;
}

#xo-content .page2.formatbox #about .school_history_period .fa-regular {
	margin-right: 0.5rem;
	color: var(--school-pink);
}

#xo-content .page2.formatbox #about #conrent_02 ul,
#xo-content .page2.formatbox #about #conrent_03 ul {
	position: relative;
	box-sizing: border-box;
	margin: 0rem 0rem 0rem 0.75rem;
	padding: 0rem 0rem 0rem 1.75rem;
	list-style: none;
	border-left: 0.1875rem solid #b9d9e5;
}

#xo-content .page2.formatbox #about #conrent_02 li,
#xo-content .page2.formatbox #about #conrent_03 li {
	position: relative;
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.625rem 0.75rem;
	color: #333333;
	line-height: 1.8;
	border-bottom: 0.0625rem solid #d6e3e8;
	list-style: none;
	transform: translateX(0rem);
	transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

#xo-content .page2.formatbox #about #conrent_02 li:nth-child(odd),
#xo-content .page2.formatbox #about #conrent_03 li:nth-child(odd) {
	background: #f7fbfc;
}

#xo-content .page2.formatbox #about #conrent_02 li:hover,
#xo-content .page2.formatbox #about #conrent_03 li:hover {
	background: #eaf6fa;
	box-shadow: inset 0.1875rem 0rem 0rem var(--school-blue);
	color: #075b84;
	transform: translateX(0.25rem);
}

#xo-content .page2.formatbox #about #conrent_02 li::before,
#xo-content .page2.formatbox #about #conrent_03 li::before {
	content: '';
	position: absolute;
	top: 1.25rem;
	left: -2.375rem;
	box-sizing: border-box;
	width: 0.875rem;
	height: 0.875rem;
	background: #ffffff;
	border: 0.25rem solid var(--school-pink);
	border-radius: 50%;
	transform: scale(1);
	transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

#xo-content .page2.formatbox #about #conrent_02 li:hover::before,
#xo-content .page2.formatbox #about #conrent_03 li:hover::before {
	background: var(--school-yellow);
	border-color: var(--school-green);
	transform: scale(1.22);
}

/*==========規劃特色=========*/
#xo-content .page2.formatbox #about #conrent_04 {
	padding: 0rem 0rem 0.125rem 0rem;
	background: var(--school-soft-green);
	border-bottom: 0.125rem solid #75b59f;
}

#xo-content .page2.formatbox #about #conrent_04 .history_section_title {
	margin-bottom: 1.25rem;
}

#xo-content .page2.formatbox #about #conrent_04 .school_intro_layout {
	padding: 0rem 1rem 1rem 1rem;
}

#xo-content .page2.formatbox #about #conrent_04 .labelcss {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page2.formatbox #about #conrent_04 .labelcss li {
	position: relative;
	box-sizing: border-box;
	margin: 0rem 0rem 0.625rem 0rem;
	padding: 0.625rem 0.75rem 0.625rem 1.375rem;
	background: #ffffff;
	border-left: 0.25rem solid #35a57e;
	border-bottom: 0.0625rem solid #cbe1d8;
	color: #333333;
	line-height: 1.8;
	box-shadow: 0rem 0rem 0rem rgba(15, 104, 79, 0);
	transform: translateX(0rem);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

#xo-content .page2.formatbox #about #conrent_04 .labelcss li:hover {
	border-left-color: var(--school-pink);
	box-shadow: 0rem 0.1875rem 0.5rem rgba(15, 104, 79, 0.14);
	color: #0f684f;
	transform: translateX(0.25rem);
}

#xo-content .page2.formatbox #about #conrent_04 .labelcss li::before {
	content: '';
	position: absolute;
	top: 1.125rem;
	left: 0.4375rem;
	width: 0.375rem;
	height: 0.375rem;
	background: var(--school-pink);
	border-radius: 50%;
	transform: scale(1);
	transition: transform 0.22s ease, background-color 0.22s ease;
}

#xo-content .page2.formatbox #about #conrent_04 .labelcss li:hover::before {
	background: var(--school-yellow);
	transform: scale(1.35);
}

#xo-content .page2.formatbox #about #conrent_04 .labelbox{
display: none;
}



/*==========永順校歌=========*/
#xo-content .page1.formatbox #about .school_song_media {
	display: grid;
	grid-template-columns: minmax(0rem, 1fr);
	gap: 1.25rem;
	align-items: stretch;
	box-sizing: border-box;
	width: 90%;
	margin: 0rem auto;
}

#xo-content .page1.formatbox #about .school_song_figure,
#xo-content .page1.formatbox #about .school_song_video {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.625rem;
	background: #ffffff;
	border: 0.0625rem solid #b9d1dd;
	border-radius: 0.5rem;
	box-shadow: 0rem 0.25rem 0.75rem rgba(22, 82, 104, 0.14);
}

#xo-content .page1.formatbox #about .school_song_figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#xo-content .page1.formatbox #about .school_song_figure a {
	display: block;
}

#xo-content .page1.formatbox #about .school_song_video {
	display: flex;
	flex-direction: column;
}

#xo-content .page1.formatbox #about .school_song_video h4 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0.5rem 0.75rem;
	background: #e8f5f2;
	border-left: 0.3125rem solid #1f9c81;
	color: #126b61;
	font-size: 115%;
	font-weight: 700;
	line-height: 1.5;
}

#xo-content .page1.formatbox #about .school_song_video h4 .fa-solid {
	color: #d3468d;
}

#xo-content .page1.formatbox #about .school_song_video_frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eef3f5;
	border-radius: 0.375rem;
}

#xo-content .page1.formatbox #about .school_song_video_frame iframe {
	position: absolute;
	inset: 0rem;
	width: 100%;
	height: 100%;
	border: 0rem;
	min-height: 100%;
}

#xo-content .page1.formatbox #about .school_song_video_note {
	margin: 0.75rem 0rem 0rem 0rem;
	padding: 0.5rem 0.75rem;
	background: #fff8df;
	border-left: 0.25rem solid #e3ad22;
	color: #5b4b22;
	font-size: 92%;
	line-height: 1.7;
	text-indent: 0rem;
}

#xo-content .page1.formatbox #about .school_song_video_note .fa-solid {
	margin-right: 0.5rem;
	color: #b9790c;
}

#xo-content .page1.formatbox #about .school_song_section_title {
	display: grid;
	grid-template-columns: 2.25rem minmax(0rem, 1fr) 2.25rem;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.625rem 0.875rem;
	background: linear-gradient(0deg, #157865 50%, #1b8974 50%);
	border-left: 0.375rem solid #f2c335;
	border-radius: 0.25rem;
	color: #ffffff;
	font-size: 125%;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

#xo-content .page1.formatbox #about .school_song_section_title .fa-solid {
	color: #fff09c;
}

#xo-content .page1.formatbox #about .school_song_section_title .fa-solid:last-child {
	justify-self: end;
}

#xo-content .page1.formatbox #about .school_song_credits {
    display: grid;
    grid-template-columns: 7rem minmax(0rem, 1fr) 7rem minmax(0rem, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    margin: 0rem auto 1rem auto;
    padding: 0.0625rem;
    background: #f5fafb;
    border: 0.0625rem solid #c8dde5;
    border-radius: 0.375rem;
}

#xo-content .page1.formatbox #about .school_song_credits dt,
#xo-content .page1.formatbox #about .school_song_credits dd {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.625rem 0.75rem;
	line-height: 1.6;
}

#xo-content .page1.formatbox #about .school_song_credits dt {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e4f3f5;
	color: #11677b;
	font-weight: 700;
}

#xo-content .page1.formatbox #about .school_song_credits dt .fa-solid {
	margin-right: 0.375rem;
	color: #d3468d;
}

#xo-content .page1.formatbox #about .school_song_credits dd {
	display: flex;
	align-items: center;
	min-width: 0rem;
	color: #333333;
	font-weight: 700;
}

#xo-content .page1.formatbox #about .lyrics_box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0rem, 1fr));
	gap: 1rem;
	padding: 1rem;
	background: #f4fafb;
	border-left: 0.3125rem solid #2b9bc2;
	border-bottom: 0.0625rem solid #bfd7df;
}

#xo-content .page1.formatbox #about .lyrics_verse {
	position: relative;
	box-sizing: border-box;
	padding: 1rem 1.125rem;
	background: #ffffff;
	border-top: 0.25rem solid #d3468d;
	border-radius: 0.375rem;
	box-shadow: 0rem 0.1875rem 0.625rem rgba(24, 79, 98, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#xo-content .page1.formatbox #about .lyrics_verse:nth-child(2) {
	border-top-color: #e18a28;
}

#xo-content .page1.formatbox #about .lyrics_verse:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0rem 0.375rem 0.875rem rgba(24, 79, 98, 0.17);
}

#xo-content .page1.formatbox #about .lyrics_verse p {
	margin: 0rem 0rem 1rem 0rem;
	padding: 0rem 0rem 1rem 0rem;
	border-bottom: 0.0625rem dotted #c8d8dd;
	line-height: 1.9;
	text-align: center;
	text-indent: 0rem;
}

#xo-content .page1.formatbox #about .lyrics_verse p:last-child {
	margin-bottom: 0rem;
	padding-bottom: 0rem;
	border-bottom: 0rem;
}

#xo-content .page1.formatbox #about .lyrics_verse span {
	display: block;
}

/*==========永順校徽=========*/
#xo-content .page3.formatbox #about .school_badge_layout {
	position: relative;
	box-sizing: border-box;
	padding: 1.125rem;
	background: #f7faf6;
	border-left: 0.3125rem solid #2a9666;
	border-bottom: 0.0625rem solid #b7d8c8;
}

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

#xo-content .page3.formatbox #about .school_badge_layout_identity {
	background: #fffaf0;
	border-left-color: #d49116;
	border-bottom-color: #e5c985;
}

#xo-content .page3.formatbox #about .school_badge_section_title {
	display: grid;
	grid-template-columns: 2.5rem minmax(0rem, 1fr) 2.5rem;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.4375rem 0.75rem;
	background: linear-gradient(0deg, #16775f 50%, #238d73 50%);
	border-left: 0.3125rem solid #ffd43b;
	border-radius: 0.25rem;
	box-shadow: 0rem 0.1875rem 0.375rem rgba(24, 82, 66, 0.18);
	color: #ffffff;
	font-size: 125%;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

#xo-content .page3.formatbox #about .school_badge_layout_identity .school_badge_section_title {
	background: linear-gradient(0deg, #9b5708 50%, #ad650f 50%);
	box-shadow: 0rem 0.1875rem 0.375rem rgba(103, 56, 4, 0.18);
}

#xo-content .page3.formatbox #about .school_badge_section_title .fa-solid {
	color: #ffe77a;
	font-size: 110%;
}

#xo-content .page3.formatbox #about .school_badge_section_title .fa-solid:last-child {
	justify-self: end;
}

#xo-content .page3.formatbox #about .school_badge_layout_identity .school_badge_section_title {
	grid-column: 1 / -1;
}

#xo-content .page3.formatbox #about .school_badge_figure {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.5rem;
	background: #ffffff;
	border: 0.0625rem solid #aecfc0;
	border-radius: 0.375rem;
	box-shadow: 0rem 0.25rem 0.625rem rgba(31, 79, 60, 0.16);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#xo-content .page3.formatbox #about .school_badge_figure:hover,
#xo-content .page3.formatbox #about .school_badge_figure:focus-within {
	border-color: #31966a;
	box-shadow: 0rem 0.5rem 1rem rgba(31, 79, 60, 0.22);
	transform: translateY(-0.1875rem);
}

#xo-content .page3.formatbox #about .school_badge_figure > a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	border-radius: 0.25rem;
}

#xo-content .page3.formatbox #about .school_badge_figure img {
	display: block;
	width: 100%;
	height: auto !important;
	object-fit: contain;
	transform: scale(1, 1);
	transform-origin: center center;
}

#xo-content .page3.formatbox #about .school_badge_figure figcaption {
	margin: 0rem;
	padding: 0.625rem 0.5rem 0.125rem 0.5rem;
	color: #46545a;
	font-size: 90%;
	line-height: 1.6;
	text-align: center;
}

#xo-content .page3.formatbox #about .school_badge_figure_wide {
	width: 96%;
	margin: 0rem auto 1.25rem auto;
	border-color: #d8bd77;
}

#xo-content .page3.formatbox #about .school_badge_figure_wide:hover,
#xo-content .page3.formatbox #about .school_badge_figure_wide:focus-within {
	border-color: #b67218;
}

#xo-content .page3.formatbox #about .school_badge_content {
	min-width: 0rem;
}

#xo-content .page3.formatbox #about .school_badge_credits {
	display: grid;
	grid-template-columns: max-content minmax(0rem, 1fr);
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.625rem 0.875rem;
	background: #e6f3ee;
	border-left: 0.25rem solid #2a9666;
}

#xo-content .page3.formatbox #about .school_badge_credits dt,
#xo-content .page3.formatbox #about .school_badge_credits dd {
	margin: 0rem;
	padding: 0.125rem 0.625rem;
}

#xo-content .page3.formatbox #about .school_badge_credits dt {
	color: #176b4e;
}

#xo-content .page3.formatbox #about .school_badge_credits dt .fa-solid {
	margin-right: 0.5rem;
	color: #c0377b;
}

#xo-content .page3.formatbox #about .school_badge_credits dd {
	color: #333333;
	font-weight: 700;
}

#xo-content .page3.formatbox #about .school_badge_color_list,
#xo-content .page3.formatbox #about .school_badge_meaning_list {
	margin: 0rem 0rem 1.25rem 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page3.formatbox #about .school_badge_color_list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0rem, 1fr));
	gap: 0.625rem;
}

#xo-content .page3.formatbox #about .school_badge_color_list li {
	display: grid;
	grid-template-columns: 4rem minmax(0rem, 1fr);
	align-items: center;
	box-sizing: border-box;
	min-width: 0rem;
	padding: 0.5rem 0.75rem;
	background: #ffffff;
	border-left: 0.25rem solid #777777;
	box-shadow: 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

#xo-content .page3.formatbox #about .school_badge_color_green { border-left-color: #27853b !important; }
#xo-content .page3.formatbox #about .school_badge_color_green strong { color: #176b2d; }
#xo-content .page3.formatbox #about .school_badge_color_blue { border-left-color: #197caf !important; }
#xo-content .page3.formatbox #about .school_badge_color_blue strong { color: #075b84; }
#xo-content .page3.formatbox #about .school_badge_color_red { border-left-color: #d33b35 !important; }
#xo-content .page3.formatbox #about .school_badge_color_red strong { color: #a72722; }
#xo-content .page3.formatbox #about .school_badge_color_multi { border-left-color: #a73682 !important; }
#xo-content .page3.formatbox #about .school_badge_color_multi strong { color: #8b276c; }

#xo-content .page3.formatbox #about .school_badge_meaning_list {
	background: #ffffff;
	border-top: 0.1875rem solid #d49116;
	border-bottom: 0.0625rem solid #e2cf9e;
}

#xo-content .page3.formatbox #about .school_badge_meaning_list li {
	display: grid;
	grid-template-columns: 7.5rem minmax(0rem, 1fr);
	gap: 1rem;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border-bottom: 0.0625rem solid #e6d7b4;
	transition: background-color 0.2s ease;
}

#xo-content .page3.formatbox #about .school_badge_meaning_list li:last-child {
	border-bottom: 0rem;
}

#xo-content .page3.formatbox #about .school_badge_meaning_list li:hover {
	background: #fff4d9;
}

#xo-content .page3.formatbox #about .school_badge_meaning_list strong {
	color: #8a4a00;
	font-weight: 700;
}

#xo-content .page3.formatbox #about .school_badge_identity_content > p:first-child {
	padding: 0.75rem 1rem;
	background: #fff3ce;
	border-left: 0.25rem solid #d49116;
}


/*==========學區劃分=========*/
#xo-content .page4.formatbox #about .school_district_media {
	display: grid;
	grid-template-columns: minmax(0rem, 1fr);
	align-items: flex-start;
	gap: 2.5rem;
}

#xo-content .page4.formatbox #about .school_district_figure {
	position: relative;
	flex: 1 1 25rem;
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.625rem;
	background: linear-gradient(145deg, #ffffff 0%, #f3fbff 100%);
	border: 0.125rem solid #78bcdc;
	border-radius: 1.125rem;
	box-shadow: 0rem 0.625rem 1.25rem rgba(24, 91, 125, 0.16);
	overflow: hidden;
}

#xo-content .page4.formatbox #about .school_district_figure a {
	display: block;
	border-radius: 0.75rem;
	overflow: hidden;
}

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

#xo-content .page4.formatbox #about .school_district_figure figcaption {
	position: relative;
	margin: 0rem;
	padding: 0.75rem 0.5rem 0.25rem 0.5rem;
	color: #3a5968;
	font-size: 92%;
	line-height: 1.7;
	text-align: center;
}

#xo-content .page4.formatbox #about .school_district {
	display: grid;
	flex: 1 1 28rem;
	gap: 2.25rem;
	min-width: 0rem;
}

#xo-content .page4.formatbox #about .school_district_panel {
	position: relative;
	box-sizing: border-box;
	padding: 1.25rem;
	background: #ffffff;
	border: 0.125rem solid #b9dce9;
	border-radius: 1rem;
	box-shadow: 0rem 0.5rem 1rem rgba(34, 84, 108, 0.12);
}

#xo-content .page4.formatbox #about .school_district_panel_remark {
	background: #fffdf4;
	border-color: #e8c96e;
}

#xo-content .page4.formatbox #about .school_district_panel h4 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.5rem 0.875rem;
	background: linear-gradient(90deg, #075b84 0%, #176f9a 100%);
	border-radius: 0.75rem;
	color: #ffffff;
	font-size: 118%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page4.formatbox #about .school_district_panel_remark h4 {
	background: linear-gradient(90deg, #704000 0%, #8a4a00 100%);
}

#xo-content .page4.formatbox #about .school_district_panel h4 .fa-solid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: #fff3a6;
	font-size: 90%;
}

#xo-content .page4.formatbox #about .school_district_intro {
	margin: 0rem 0rem 1rem 0rem;
	padding: 0rem;
	color: #344d59;
	line-height: 1.8;
	text-indent: 0rem;
}

#xo-content .page4.formatbox #about .school_district_text h5 {
	margin: 1.25rem 0rem 0.75rem 0rem;
	padding: 0rem 0rem 0.375rem 0rem;
	border-bottom: 0.125rem dashed #c69b2d;
	color: #744300;
	font-size: 108%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page4.formatbox #about .school_district_area_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.75rem;
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page4.formatbox #about .school_district_area_list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.75rem;
	align-items: center;
	box-sizing: border-box;
	min-width: 0rem;
	padding: 0.75rem 0.875rem;
	background: #eef9fd;
	border-left: 0.375rem solid #258ebd;
	border-radius: 0.625rem;
	color: #2d4753;
	line-height: 1.65;
}

#xo-content .page4.formatbox #about .school_district_area_list_shared li {
	background: #fff8df;
	border-left-color: #d19a14;
}

#xo-content .page4.formatbox #about .school_district_area_list strong {
	color: #075b84;
	font-weight: 700;
}

#xo-content .page4.formatbox #about .school_district_area_list_shared strong {
	color: #7c4800;
}

#xo-content .page4.formatbox #about .school_district_area_list span {
	overflow-wrap: anywhere;
}

#xo-content .page4.formatbox #about .Remark_list {
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page4.formatbox #about .Remark_list li {
	position: relative;
	box-sizing: border-box;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0.75rem 0.875rem 0.75rem 2.125rem;
	background: rgba(255, 255, 255, 0.78);
	border: 0.0625rem solid #ead99d;
	border-radius: 0.625rem;
	color: #4d432c;
	line-height: 1.75;
}

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

#xo-content .page4.formatbox #about .Remark_list li::before {
	position: absolute;
	left: 0.75rem;
	top: 0.78rem;
	color: #996000;
	content: '✓';
	font-family: inherit;
	font-weight: 700;
}

#xo-content .page4.formatbox #about .Remark_list .aligned-text {
	min-width: 0rem;
}

#xo-content .page4.formatbox #about .Remark_list .leftbox {
	box-sizing: border-box;
	color: #744300;
	font-weight: 700;
}

#xo-content .page4.formatbox #about .Remark_list .rightbox {
	box-sizing: border-box;
	min-width: 0rem;
	overflow-wrap: anywhere;
}

#xo-content .page4.formatbox #about .Remark_list li {
	list-style: none;
}


/*==========交通位置=========*/
#xo-content .page6.formatbox #about .traffic_media {
	display: grid;
	grid-template-columns: minmax(0rem, 1fr);
	gap: 1.5rem;
}

#xo-content .page6.formatbox #about .traffic_map_card {
	position: relative;
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem;
	padding: 1rem;
	background: #ffffff;
	border: 0.125rem solid #b7dce9;
	border-radius: 1rem;
	box-shadow: 0rem 0.5rem 1rem rgba(32, 83, 107, 0.14);
}

#xo-content .page6.formatbox #about .traffic_map_card h4,
#xo-content .page6.formatbox #about .traffic > h4 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.625rem 0.875rem;
	background: linear-gradient(90deg, #075b84 0%, #176f9a 100%);
	border-radius: 0.75rem;
	color: #ffffff;
	font-size: 120%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page6.formatbox #about .traffic_map_card h4 .fa-solid,
#xo-content .page6.formatbox #about .traffic > h4 .fa-solid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: #fff3a6;
	font-size: 95%;
}

#xo-content .page6.formatbox #about .traffic_iframe_box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background: #eaf4f8;
	border: 0.0625rem solid #9fc8d8;
	border-radius: 0.75rem;
	overflow: hidden;
}

#xo-content .page6.formatbox #about .traffic_iframe_box iframe {
	display: block;
	width: 100%;
	height: auto;
	min-height: 20rem;
	aspect-ratio: 16 / 9;
	border: 0rem;
}

#xo-content .page6.formatbox #about .traffic_map_link,
#xo-content .page6.formatbox #about .traffic_map_caption,
#xo-content .page6.formatbox #about .traffic_route_link {
	margin: 0.75rem 0rem 0rem 0rem;
	padding: 0rem;
	color: #405965;
	line-height: 1.7;
	text-align: center;
	text-indent: 0rem;
}

#xo-content .page6.formatbox #about .traffic_map_link a,
#xo-content .page6.formatbox #about .traffic_route_link a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0.5rem 0.875rem;
	background: #edf8fc;
	border: 0.125rem solid #2584ad;
	border-radius: 1.25rem;
	color: #075b84;
	font-weight: 700;
	text-decoration: none;
}

#xo-content .page6.formatbox #about .traffic_map_link a:hover,
#xo-content .page6.formatbox #about .traffic_map_link a:focus,
#xo-content .page6.formatbox #about .traffic_route_link a:hover,
#xo-content .page6.formatbox #about .traffic_route_link a:focus {
	background: #075b84;
	color: #ffffff;
	text-decoration: underline;
}

#xo-content .page6.formatbox #about .traffic {
	display: grid;
	gap: 1.25rem;
	min-width: 0rem;
}

#xo-content .page6.formatbox #about .traffic_intro {
	box-sizing: border-box;
	margin: 0rem;
	padding: 1rem 1.125rem;
	background: #eef9fd;
	border-left: 0.375rem solid #258ebd;
	border-radius: 0.75rem;
	color: #304b57;
	line-height: 1.85;
	text-indent: 0rem;
}

#xo-content .page6.formatbox #about .traffic_route_card {
	position: relative;
	box-sizing: border-box;
	min-width: 0rem;
	padding: 1.125rem;
	background: #ffffff;
	border: 0.125rem solid #c9dfe8;
	border-radius: 0.875rem;
	box-shadow: 0rem 0.375rem 0.875rem rgba(40, 79, 96, 0.1);
}

#xo-content .page6.formatbox #about .traffic_route_card h5,
#xo-content .page6.formatbox #about .traffic_notice h5 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0rem 0rem 0.5rem 0rem;
	border-bottom: 0.125rem dashed #8fbfce;
	color: #075b84;
	font-size: 112%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page6.formatbox #about .traffic_route_card h5 .fa-solid,
#xo-content .page6.formatbox #about .traffic_notice h5 .fa-solid {
	color: #ad2f69;
}

#xo-content .page6.formatbox #about .traffic_route_card p,
#xo-content .page6.formatbox #about .traffic_notice p {
	margin: 1rem 0rem 0.875rem 0rem;
	padding: 0rem;
	color: #384f59;
	line-height: 1.85;
	text-indent: 0rem;
}

#xo-content .page6.formatbox #about .traffic_transfer_list,
#xo-content .page6.formatbox #about .traffic_direction_list,
#xo-content .page6.formatbox #about .traffic_step_list {
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page6.formatbox #about .traffic_transfer_list li,
#xo-content .page6.formatbox #about .traffic_direction_list li,
#xo-content .page6.formatbox #about .traffic_step_list li {
	position: relative;
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0.75rem 0.875rem;
	background: #f5fafc;
	border-left: 0.3125rem solid #4b9bbc;
	border-radius: 0.625rem;
	color: #334b55;
	line-height: 1.8;
	list-style: none;	
}

#xo-content .page6.formatbox #about .traffic_transfer_list li:last-child,
#xo-content .page6.formatbox #about .traffic_direction_list li:last-child,
#xo-content .page6.formatbox #about .traffic_step_list li:last-child {
	margin-bottom: 0rem;
}

#xo-content .page6.formatbox #about .traffic_transfer_list .aligned-text {
	min-width: 0rem;
}

#xo-content .page6.formatbox #about .traffic_transfer_list .leftbox {
	box-sizing: border-box;
	color: #075b84;
	font-weight: 700;
}

#xo-content .page6.formatbox #about .traffic_transfer_list .rightbox {
	box-sizing: border-box;
	min-width: 0rem;
	overflow-wrap: anywhere;
}

#xo-content .page6.formatbox #about .traffic_step_list {
	counter-reset: traffic-step;
}

#xo-content .page6.formatbox #about .traffic_step_list li {
	padding-left: 3.25rem;
	counter-increment: traffic-step;
}

#xo-content .page6.formatbox #about .traffic_step_list li::before {
	position: absolute;
	left: 0.75rem;
	top: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1.75rem;
	height: 1.75rem;
	background: #176f9a;
	border-radius: 50%;
	color: #ffffff;
	content: counter(traffic-step);
	font-weight: 700;
	line-height: 1;
}

#xo-content .page6.formatbox #about .traffic_step_list strong,
#xo-content .page6.formatbox #about .traffic_step_list span,
#xo-content .page6.formatbox #about .traffic_direction_list strong,
#xo-content .page6.formatbox #about .traffic_direction_list span {
	display: block;
}

#xo-content .page6.formatbox #about .traffic_step_list strong,
#xo-content .page6.formatbox #about .traffic_direction_list strong {
	margin-bottom: 0.1875rem;
	color: #075b84;
	font-weight: 700;
}

#xo-content .page6.formatbox #about .traffic_notice {
	box-sizing: border-box;
	padding: 1.125rem;
	background: #fff9df;
	border: 0.125rem solid #d6ae39;
	border-radius: 0.875rem;
}

#xo-content .page6.formatbox #about .traffic_notice h5 {
	border-bottom-color: #d6ae39;
	color: #704000;
}

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

#xo-content .page6.formatbox #about .traffic_action_links a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	box-sizing: border-box;
	padding: 0.5rem 0.875rem;
	background: #ffffff;
	border: 0.125rem solid #996000;
	border-radius: 1.25rem;
	color: #704000;
	font-weight: 700;
	text-decoration: none;
}

#xo-content .page6.formatbox #about .traffic_action_links a:hover,
#xo-content .page6.formatbox #about .traffic_action_links a:focus {
	background: #704000;
	color: #ffffff;
	text-decoration: underline;
}


/*==========班級位置圖=========*/
#xo-content .page5.formatbox #about #monitor {
	position: relative;
	box-sizing: border-box;
	margin: 0rem 0rem 1.75rem 0rem;
}

#xo-content .page5.formatbox #about #img_box {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.75rem;
	background: #f4fafc;
	border: 0.125rem solid #89bdcf;
	border-radius: 0.875rem;
	box-shadow: 0rem 0.5rem 1rem rgba(35, 78, 96, 0.14);
}

#xo-content .page5.formatbox #about #img_box .small-img {
	display: block;
	box-sizing: border-box;
	border: 0.1875rem solid transparent;
	border-radius: 0.5rem;
	overflow: hidden;
}

#xo-content .page5.formatbox #about #img_box .small-img:hover,
#xo-content .page5.formatbox #about #img_box .small-img:focus {
	border-color: #075b84;
	box-shadow: 0rem 0rem 0rem 0.25rem rgba(7, 91, 132, 0.22);
	outline: 0.1875rem solid #f1dc00;
	outline-offset: 0.1875rem;
}

#xo-content .page5.formatbox #about .campus_location_text {
	position: relative;
	min-width: 0rem;
}

#xo-content .page5.formatbox #about .campus_location_text > h4 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.75rem 1rem;
	background: linear-gradient(90deg, #075b84 0%, #176f9a 100%);
	border-radius: 0.75rem;
	color: #ffffff;
	font-size: 125%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page5.formatbox #about .campus_location_text > h4 .fa-solid {
	color: #fff3a6;
}

#xo-content .page5.formatbox #about .campus_location_intro {
	box-sizing: border-box;
	margin: 0rem 0rem 1.25rem 0rem;
	padding: 0.875rem 1rem;
	background: #edf8fc;
	border-left: 0.375rem solid #2584ad;
	border-radius: 0.625rem;
	color: #304b57;
	line-height: 1.85;
	text-indent: 0rem;
}

#xo-content .page5.formatbox #about .campus_location_list,
#xo-content .page5.formatbox #about .campus_facility_list,
#xo-content .page5.formatbox #about .building_floor_list {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0rem;
}

#xo-content .page5.formatbox #about .campus_location_list > dt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	box-sizing: border-box;
	margin: 1.5rem 0rem 0rem 0rem;
	padding: 0.75rem 1rem;
	background: #075b84;
	border: 0.125rem solid #075b84;
	border-radius: 0.875rem 0.875rem 0rem 0rem;
	color: #ffffff;
	font-size: 118%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page5.formatbox #about .campus_location_list > dt:first-child {
	margin-top: 0rem;
}

#xo-content .page5.formatbox #about .campus_location_list > dt .fa-solid {
	color: #fff3a6;
}

#xo-content .page5.formatbox #about .campus_location_list > dt small {
	font-size: 78%;
	font-weight: 500;
	line-height: 1.5;
	color: #DAEA00 !important;
}

#xo-content .page5.formatbox #about .campus_location_list > dd {
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem;
	padding: 0.875rem;
	background: #ffffff;
	border: 0.125rem solid #9fc8d8;
	border-top: 0rem;
	border-radius: 0rem 0rem 0.875rem 0.875rem;
	box-shadow: 0rem 0.375rem 0.875rem rgba(40, 79, 96, 0.1);
}

#xo-content .page5.formatbox #about .campus_facility_list,
#xo-content .page5.formatbox #about .building_floor_list {
	display: grid;
/*	grid-template-columns: minmax(7.5rem, 0.22fr) minmax(0rem, 1fr); */
	border: 0.0625rem solid #b7d3de;
	border-radius: 0.625rem;
	overflow: hidden;
}

#xo-content .page5.formatbox #about .campus_facility_list > dt,
#xo-content .page5.formatbox #about .building_floor_list > dt,
#xo-content .page5.formatbox #about .campus_facility_list > dd,
#xo-content .page5.formatbox #about .building_floor_list > dd {
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem;
	padding: 0.75rem 0.875rem;
	border-bottom: 0.0625rem solid #c6dce4;
	line-height: 1.8;
}

#xo-content .page5.formatbox #about .campus_facility_list > dt,
#xo-content .page5.formatbox #about .building_floor_list > dt {
	display: flex;
	align-items: center;
	background: #e6f3f8;
	border-right: 0.0625rem solid #b7d3de;
	color: #075b84;
	font-weight: 700;
}

#xo-content .page5.formatbox #about .campus_facility_list > dd,
#xo-content .page5.formatbox #about .building_floor_list > dd {
	background: #ffffff;
	color: #334b55;
}

#xo-content .page5.formatbox #about .campus_facility_list > dt:nth-last-of-type(1),
#xo-content .page5.formatbox #about .campus_facility_list > dd:nth-last-of-type(1),
#xo-content .page5.formatbox #about .building_floor_list > dt:nth-last-of-type(1),
#xo-content .page5.formatbox #about .building_floor_list > dd:nth-last-of-type(1) {
	border-bottom: 0rem;
}

#xo-content .page5.formatbox #about .floor_detail_list {
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page5.formatbox #about .floor_detail_list li {
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem 0rem 0.5rem 0rem;
	padding: 0.5rem 0.625rem;
	background: #f7fbfc;
	border-left: 0.25rem solid #4b9bbc;
	border-radius: 0.375rem;
	color: #334b55;
	list-style: none;
}

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

#xo-content .page5.formatbox #about .floor_detail_list .aligned-text,
#xo-content .page5.formatbox #about .floor_detail_list .rightbox {
	box-sizing: border-box;
	min-width: 0rem;
}

#xo-content .page5.formatbox #about .floor_detail_list .leftbox {
	box-sizing: border-box;
	color: #075b84;
	font-weight: 700;
}

#xo-content .page5.formatbox #about .floor_detail_list .rightbox {
	overflow-wrap: anywhere;
}

#xo-content .page7.formatbox #about .opening_hours_media {
	display: grid;
	grid-template-columns: minmax(0rem, 1fr);
	gap: 1.5rem;
}

#xo-content .page7.formatbox #about #monitor,
#xo-content .page7.formatbox #about .opening_hours {
	position: relative;
	box-sizing: border-box;
	min-width: 0rem;
}

#xo-content .page7.formatbox #about .opening_hours_figure {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0.75rem;
	background: #f4fafc;
	border: 0.125rem solid #89bdcf;
	border-radius: 0.875rem;
	box-shadow: 0rem 0.5rem 1rem rgba(35, 78, 96, 0.14);
}

#xo-content .page7.formatbox #about .opening_hours_figure .small-img {
	display: block;
	box-sizing: border-box;
	border: 0.1875rem solid transparent;
	border-radius: 0.625rem;
	overflow: hidden;
}

#xo-content .page7.formatbox #about .opening_hours_figure .small-img:hover,
#xo-content .page7.formatbox #about .opening_hours_figure .small-img:focus {
	border-color: #075b84;
	box-shadow: 0rem 0rem 0rem 0.25rem rgba(7, 91, 132, 0.22);
	outline: 0.1875rem solid #f1dc00;
	outline-offset: 0.1875rem;
}

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

#xo-content .page7.formatbox #about .opening_hours_panel {
	box-sizing: border-box;
	padding: 1rem;
	background: #ffffff;
	border: 0.125rem solid #9fc8d8;
	border-radius: 0.875rem;
	box-shadow: 0rem 0.375rem 0.875rem rgba(40, 79, 96, 0.1);
}

#xo-content .page7.formatbox #about .opening_hours_panel h4 {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	box-sizing: border-box;
	margin: 0rem 0rem 1rem 0rem;
	padding: 0.75rem 1rem;
	background: linear-gradient(90deg, #075b84 0%, #176f9a 100%);
	border-radius: 0.75rem;
	color: #ffffff;
	font-size: 122%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page7.formatbox #about .opening_hours_panel h4 .fa-solid {
	color: #fff3a6;
}

#xo-content .page7.formatbox #about .opening_hours_area_list {
	margin: 0rem;
	padding: 0rem;
	list-style: none;
}

#xo-content .page7.formatbox #about .opening_hours_area_list li {
	box-sizing: border-box;
	min-width: 0rem;
	margin: 0rem 0rem 0.75rem 0rem;
	padding: 0.875rem 1rem;
	background: #f3fafc;
	border-left: 0.375rem solid #2584ad;
	border-radius: 0.625rem;
	color: #304b57;
	line-height: 1.85;
	list-style: none;
}

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

#xo-content .page7.formatbox #about .opening_hours_area_list .aligned-text,
#xo-content .page7.formatbox #about .opening_hours_area_list .rightbox {
	box-sizing: border-box;
	min-width: 0rem;
}

#xo-content .page7.formatbox #about .opening_hours_area_list .leftbox {
	box-sizing: border-box;
	color: #075b84;
	font-weight: 700;
}

#xo-content .page7.formatbox #about .opening_hours_area_list .rightbox {
	overflow-wrap: anywhere;
}

#xo-content .page7.formatbox #about .opening_hours_notice {
	box-sizing: border-box;
	padding: 1rem 1.125rem;
	background: #fff9df;
	border: 0.125rem solid #d6ae39;
	border-radius: 0.875rem;
}

#xo-content .page7.formatbox #about .opening_hours_notice h5 {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0rem 0rem 0.625rem 0rem;
	padding: 0rem 0rem 0.5rem 0rem;
	border-bottom: 0.125rem dashed #b28a21;
	color: #704000;
	font-size: 110%;
	font-weight: 700;
	line-height: 1.6;
}

#xo-content .page7.formatbox #about .opening_hours_notice p {
	margin: 0rem;
	padding: 0rem;
	color: #4f3900;
	line-height: 1.85;
	text-indent: 0rem;
}

/*==========如何辦理轉學=========*/
#xo-content .page8.formatbox #about {
  --Transfer-rose: #9b225d;
  --Transfer-blue: #12698f;
  --Transfer-green: #28733d;
  --Transfer-ink: #303030;
  --Transfer-line: #d7dfe3;
}

#xo-content .page8.formatbox #about .Transfer_intro {
  margin: 0rem 0rem 1.5rem 0rem;
  padding: 0.875rem 1rem;
  background-color: #fff8dc;
  border-left: 0.375rem solid #c37900;
  border-radius: 0.375rem;
  color: #4a3a16;
  font-weight: 650;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content .page8.formatbox #about .Transfer_media,
#xo-content .page8.formatbox #about .Transfer,
#xo-content .page8.formatbox #about .Transfer_followup {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 1.5rem;
  width: 100%;
}

#xo-content .page8.formatbox #about #monitor,
#xo-content .page8.formatbox #about .Transfer_figure {
  width: 100%;
  margin: 0rem;
}

#xo-content .page8.formatbox #about .Transfer_figure {
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
  border: 0.0625rem solid #c8d5db;
  border-radius: 0.75rem;
  box-shadow: 0rem 0.4rem 1rem rgba(29, 70, 87, 0.16);
}

#xo-content .page8.formatbox #about .Transfer_figure .fancybox_each {
  display: block;
  border-radius: 0.6875rem 0.6875rem 0rem 0rem;
  overflow: hidden;
}

#xo-content .page8.formatbox #about .Transfer_figure .fancybox_each:focus {
  outline: 0.1875rem solid #b21f4b;
  outline-offset: -0.25rem;
}

#xo-content .page8.formatbox #about .Transfer_figure img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain;
  transform-origin: center center;
}

#xo-content .page8.formatbox #about .Transfer_figure figcaption {
  margin: 0rem;
  padding: 0.625rem 0.875rem;
  background-color: #f4f8fa;
  color: #46545a;
  font-size: 90%;
  line-height: 1.7;
  text-align: center;
}

#xo-content .page8.formatbox #about .Transfer_panel {
  box-sizing: border-box;
  width: 100%;
  padding: 1.125rem 1.25rem 1.25rem 1.25rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--Transfer-line);
  border-top: 0.375rem solid var(--Transfer-rose);
  border-radius: 0.75rem;
  box-shadow: 0rem 0.35rem 0.9rem rgba(34, 55, 65, 0.12);
  color: var(--Transfer-ink);
  overflow-wrap: anywhere;
}

#xo-content .page8.formatbox #about .Transfer_panel_overseas {
  border-top-color: var(--Transfer-blue);
}

#xo-content .page8.formatbox #about .Transfer_panel_inbound {
  border-top-color: var(--Transfer-green);
}

#xo-content .page8.formatbox #about .Transfer_panel h4,
#xo-content .page8.formatbox #about .Transfer_contact h4 {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0rem 0rem 1rem 0rem;
  color: var(--Transfer-rose);
  font-size: 120%;
  font-weight: 750;
  line-height: 1.6;
}

#xo-content .page8.formatbox #about .Transfer_panel_overseas h4 {
  color: var(--Transfer-blue);
}

#xo-content .page8.formatbox #about .Transfer_panel_inbound h4 {
  color: var(--Transfer-green);
}

#xo-content .page8.formatbox #about .Transfer_panel h4 .fa-solid,
#xo-content .page8.formatbox #about .Transfer_contact h4 .fa-solid {
  flex: 0 0 auto;
  width: 1.5rem;
  margin-top: 0.38rem;
  text-align: center;
}

#xo-content .page8.formatbox #about .Transfer_text,
#xo-content .page8.formatbox #about .Transfer_text ul {
  width: 100%;
}

#xo-content .page8.formatbox #about .Transfer_text .labelcssArr {
  box-sizing: border-box;
  margin: 0rem;
  padding: 0rem;
  list-style: none;
}

#xo-content .page8.formatbox #about .Transfer_text .labelcssArr > li {
  min-height: 2.25rem;
  border-bottom: 0.0625rem dashed #cad4d9;
  color: #333333;
  line-height: 1.8;
}

#xo-content .page8.formatbox #about .Transfer_text .labelcssArr > li:last-child {
  border-bottom: 0rem;
}


#xo-content .page8.formatbox #about .Transfer_text .labelbox {
  color: var(--Transfer-rose);
  font-weight: 800;
}

#xo-content .page8.formatbox #about .Transfer_panel_overseas .labelbox {
  color: var(--Transfer-blue);
}

#xo-content .page8.formatbox #about .Transfer_panel_inbound .labelbox {
  color: var(--Transfer-green);
}

#xo-content .page8.formatbox #about .Transfer_text strong {
  color: #7d1849;
  font-weight: 800;
}

#xo-content .page8.formatbox #about .Transfer_note {
  margin: -0.35rem 0rem 1rem 2.125rem;
  color: #4b5a61;
  font-size: 95%;
  line-height: 1.7;
  text-indent: 0rem;
}

#xo-content .page8.formatbox #about .Transfer_documents {
  margin: 0.5rem 0rem 0rem 0rem;
  padding-left: 1.75rem;
  list-style-type: decimal;
}

#xo-content .page8.formatbox #about .Transfer_documents li {
  margin-bottom: 0.25rem;
  padding-left: 0.25rem;
  line-height: 1.75;
  list-style-type: decimal;
}




#xo-content .page8.formatbox #about .Transfer_contact {
  box-sizing: border-box;
  width: 100%;
  padding: 1.125rem 1.25rem;
  background-color: #eef7fb;
  border: 0.125rem solid #5b98b3;
  border-radius: 0.75rem;
  color: #253b45;
}

#xo-content .page8.formatbox #about .Transfer_contact h4 {
  color: #075b84;
}

#xo-content .page8.formatbox #about .Transfer_contact p {
  margin: 0rem 0rem 0.75rem 0rem;
  color: #253b45;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content .page8.formatbox #about .Transfer_contact .Transfer_phone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
  margin-bottom: 0rem;
  font-weight: 700;
}

#xo-content .page8.formatbox #about .Transfer_contact a {
  color: #71325a;
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.1875rem;
}

#xo-content .page8.formatbox #about .Transfer_contact a:hover,
#xo-content .page8.formatbox #about .Transfer_contact a:focus {
  background-color: #71325a;
  color: #ffffff;
  outline: 0.1875rem solid transparent;
  text-decoration: none;
}

/*==========停課期間線上課程=========*/
#xo-content .page9.formatbox #about {
  --online-blue: #075b84;
  --online-blue-dark: #064565;
  --online-green: #28733d;
  --online-yellow: #f1dc00;
  --online-ink: #303030;
  --online-line: #cbd9df;
}

#xo-content .page9.formatbox #about .online_courses_intro {
  margin: 0rem 0rem 1.5rem 0rem;
  padding: 0.875rem 1rem;
  background-color: #fff8dc;
  border-left: 0.375rem solid #c37900;
  border-radius: 0.375rem;
  color: #4a3a16;
  font-weight: 650;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content .page9.formatbox #about .online_courses_media,
#xo-content .page9.formatbox #about .online_courses {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 1.5rem;
  width: 100%;
}

#xo-content .page9.formatbox #about #monitor,
#xo-content .page9.formatbox #about .online_courses_figure {
  width: 100%;
  margin: 0rem;
}

#xo-content .page9.formatbox #about .online_courses_figure {
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
  border: 0.0625rem solid var(--online-line);
  border-radius: 0.75rem;
  box-shadow: 0rem 0.4rem 1rem rgba(29, 70, 87, 0.16);
}

#xo-content .page9.formatbox #about .online_courses_figure .fancybox_each {
  display: block;
  overflow: hidden;
  border-radius: 0.6875rem 0.6875rem 0rem 0rem;
}

#xo-content .page9.formatbox #about .online_courses_figure .fancybox_each:focus {
  outline: 0.1875rem solid #b21f4b;
  outline-offset: -0.25rem;
}

#xo-content .page9.formatbox #about .online_courses_figure img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain;
  transform-origin: center center;
}

#xo-content .page9.formatbox #about .online_courses_figure figcaption {
  margin: 0rem;
  padding: 0.625rem 0.875rem;
  background-color: #f4f8fa;
  color: #46545a;
  font-size: 90%;
  line-height: 1.7;
  text-align: center;
}

#xo-content .page9.formatbox #about .online_courses_quick,
#xo-content .page9.formatbox #about .online_courses_panel,
#xo-content .page9.formatbox #about .online_courses_notice {
  box-sizing: border-box;
  width: 100%;
  padding: 1.125rem 1.25rem 1.25rem 1.25rem;
  background-color: #ffffff;
  border: 0.0625rem solid var(--online-line);
  border-radius: 0.75rem;
  box-shadow: 0rem 0.35rem 0.9rem rgba(34, 55, 65, 0.12);
}

#xo-content .page9.formatbox #about .online_courses_quick {
  border-top: 0.375rem solid #9b225d;
}

#xo-content .page9.formatbox #about .online_courses_panel {
  border-top: 0.375rem solid var(--online-blue);
}

#xo-content .page9.formatbox #about .online_courses_notice {
  background-color: #eef8f1;
  border: 0.125rem solid #73a982;
}

#xo-content .page9.formatbox #about .online_courses_quick h4,
#xo-content .page9.formatbox #about .online_courses_panel h4,
#xo-content .page9.formatbox #about .online_courses_notice h4 {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0rem 0rem 1rem 0rem;
  color: #8b1e55;
  font-size: 120%;
  font-weight: 750;
  line-height: 1.6;
}

#xo-content .page9.formatbox #about .online_courses_panel h4 {
  color: var(--online-blue);
}

#xo-content .page9.formatbox #about .online_courses_notice h4 {
  color: var(--online-green);
}

#xo-content .page9.formatbox #about .online_courses_quick h4 .fa-solid,
#xo-content .page9.formatbox #about .online_courses_panel h4 .fa-solid,
#xo-content .page9.formatbox #about .online_courses_notice h4 .fa-solid {
  flex: 0 0 auto;
  width: 1.5rem;
  margin-top: 0.38rem;
  text-align: center;
}

#xo-content .page9.formatbox #about .online_courses_quick_links {
  display: grid;
  grid-template-columns: minmax(0rem, 1fr);
  gap: 0.75rem;
}

#xo-content .page9.formatbox #about .online_courses_action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 0.125rem solid #9b225d;
  border-radius: 0.5rem;
  background-color: #9b225d;
  color: #ffffff;
  font-weight: 750;
  line-height: 1.6;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#xo-content .page9.formatbox #about .online_courses_action_portal {
  border-color: var(--online-blue);
  background-color: var(--online-blue);
}

#xo-content .page9.formatbox #about .online_courses_action:hover,
#xo-content .page9.formatbox #about .online_courses_action:focus {
  border-color: #4e1734;
  background-color: #4e1734;
  color: #ffffff;
  outline: 0.1875rem solid var(--online-yellow);
  outline-offset: 0.125rem;
  text-decoration: none;
}

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

#xo-content .page9.formatbox #about .online_courses_grade_list li {
  min-width: 0rem;
  margin: 0rem;
  list-style: none;
}

#xo-content .page9.formatbox #about .online_courses_grade_list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.625rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 0.875rem;
  background-color: #f1f8fb;
  border: 0.125rem solid #78aabe;
  border-radius: 0.5rem;
  color: var(--online-blue-dark);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#xo-content .page9.formatbox #about .online_courses_grade_list .online_courses_grade {
  color: #71325a;
  font-size: 110%;
  font-weight: 800;
}

#xo-content .page9.formatbox #about .online_courses_grade_list a:hover,
#xo-content .page9.formatbox #about .online_courses_grade_list a:focus {
  background-color: var(--online-blue-dark);
  border-color: var(--online-blue-dark);
  color: #ffffff;
  outline: 0.1875rem solid var(--online-yellow);
  outline-offset: 0.125rem;
}

#xo-content .page9.formatbox #about .online_courses_grade_list a:hover .online_courses_grade,
#xo-content .page9.formatbox #about .online_courses_grade_list a:focus .online_courses_grade {
  color: #ffffff;
}

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

#xo-content .page9.formatbox #about .online_courses_other_list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1rem;
  padding: 0.75rem 0rem;
  border-bottom: 0.0625rem dashed #9ebca6;
  color: #294632;
  font-weight: 700;
}

#xo-content .page9.formatbox #about .online_courses_other_list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  border: 0.125rem solid var(--online-green);
  border-radius: 0.375rem;
  background-color: #ffffff;
  color: #1d5d30;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

#xo-content .page9.formatbox #about .online_courses_other_list a:hover,
#xo-content .page9.formatbox #about .online_courses_other_list a:focus {
  background-color: #1d5d30;
  color: #ffffff;
  outline: 0.1875rem solid var(--online-yellow);
  outline-offset: 0.125rem;
  text-decoration: none;
}

#xo-content .page9.formatbox #about .online_courses_notice .online_courses_notice_text {
  margin: 1rem 0rem 0rem 0rem;
  padding: 0.75rem 0.875rem;
  background-color: #ffffff;
  border-left: 0.3125rem solid var(--online-green);
  color: #354a3b;
  line-height: 1.8;
  text-indent: 0rem;
}

#xo-content .page9.formatbox #about .online_courses_new_window {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0rem;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0rem, 0rem, 0rem, 0rem);
  white-space: nowrap;
  border: 0rem;
}


/*==========我們的遠景=========*/
#xo-content .page38.formatbox #about {
	--vision-blue: #08678f;
	--vision-blue-dark: #075274;
	--vision-green: #4f7f27;
	--vision-yellow: #e2c51e;
	--vision-pink: #a91569;
	--vision-paper: #fffef9;
}

#xo-content .page38.formatbox #about .conrent_each {
	box-sizing: border-box;
	padding: 1.25rem;
	background: linear-gradient(145deg, #ffffff 0%, #f7fbf1 100%);
	border: 0.0625rem solid #cbdcbc;
	border-radius: 1rem;
	box-shadow: 0rem 0.5rem 1.125rem rgba(32, 82, 63, 0.11);
}

#xo-content .page38.formatbox #about .conrent_each::before {
	content: "";
	position: absolute;
	top: 0rem;
	left: 1.25rem;
	right: 1.25rem;
	height: 0.3125rem;
	background: linear-gradient(90deg, var(--vision-blue) 0%, var(--vision-green) 52%, var(--vision-yellow) 100%);
	border-radius: 0rem 0rem 0.625rem 0.625rem;
}

#xo-content .page38.formatbox #about .school_vision_layout,
#xo-content .page38.formatbox #about .School_Vision_text {
	position: relative;
	box-sizing: border-box;
	width: 100%;
}

#xo-content .page38.formatbox #about .school_about_figure {
	position: relative;
	box-sizing: border-box;
	max-width: 43.75rem;
	margin: 0rem auto 1.5rem auto;
	padding: 0.625rem;
	background: #ffffff;
	border: 0.125rem solid #c8dcae;
	border-radius: 1rem;
	box-shadow: 0rem 0.5rem 1rem rgba(44, 84, 46, 0.16);
	overflow: hidden;
}

#xo-content .page38.formatbox #about .school_about_figure::before,
#xo-content .page38.formatbox #about .school_about_figure::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	pointer-events: none;
}

#xo-content .page38.formatbox #about .school_about_figure::before {
	top: 0.3125rem;
	left: 0.3125rem;
	border-top: 0.25rem solid var(--vision-yellow);
	border-left: 0.25rem solid var(--vision-yellow);
	border-radius: 0.625rem 0rem 0rem 0rem;
}

#xo-content .page38.formatbox #about .school_about_figure::after {
	right: 0.3125rem;
	bottom: 0.3125rem;
	border-right: 0.25rem solid var(--vision-blue);
	border-bottom: 0.25rem solid var(--vision-blue);
	border-radius: 0rem 0rem 0.625rem 0rem;
}

#xo-content .page38.formatbox #about .school_about_figure .small-img {
	display: block;
	border-radius: 0.6875rem;
	overflow: hidden;
}

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

#xo-content .page38.formatbox #about .school_about_figure figcaption {
	position: relative;
	z-index: 3;
	margin: 0rem;
	padding: 0.75rem 1rem 0.25rem 1rem;
	color: #365262;
	font-size: 92%;
	line-height: 1.7;
	text-align: center;
}

#xo-content .page38.formatbox #about .future_title {
	display: grid;
	grid-template-columns: 2.25rem minmax(0rem, 1fr) 2.25rem;
	align-items: center;
	column-gap: 0.625rem;
	box-sizing: border-box;
	width: 100%;
	margin: 0rem 0rem 1.25rem 0rem;
	padding: 0.625rem 1rem;
	background: linear-gradient(90deg, var(--vision-blue-dark) 0%, var(--vision-blue) 50%, var(--vision-blue-dark) 100%);
	border: 0.125rem solid #ffffff;
	border-radius: 1.5rem;
	box-shadow: 0rem 0.25rem 0rem #bddb74;
	color: #ffffff;
	font-size: 130%;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

#xo-content .page38.formatbox #about .future_title .fa-solid {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #efff83;
	font-size: 110%;
}

#xo-content .page38.formatbox #about .future_title .fa-solid:last-child {
	transform: scaleX(-1);
}

#xo-content .page38.formatbox #about dl {
	margin: 0rem;
	padding: 0rem;
}

#xo-content .page38.formatbox #about dl > dt {
	position: relative;
	box-sizing: border-box;
	margin: 1.25rem 0rem 0rem 0rem;
	padding: 0.6875rem 1rem 0.6875rem 3.75rem !important;
	background: linear-gradient(90deg, #e8f4d9 0%, #f8fbf2 100%);
	border: 0.0625rem solid #b8d095;
	border-bottom: 0rem;
	border-radius: 0.75rem 0.75rem 0rem 0rem;
	color: #315f1a;
	font-size: 110%;
	line-height: 1.65 !important;
}

#xo-content .page38.formatbox #about dl > dt::before {
	content: "◆";
	position: absolute;
	top: 50%;
	left: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--vision-green);
	border-radius: 50%;
	color: #ffffff;
	font-size: 70%;
	line-height: 1;
	transform: translateY(-50%);
}

#xo-content .page38.formatbox #about dl > dd {
	box-sizing: border-box;
	margin: 0rem 0rem 1.25rem 0rem;
	padding: 1rem 1.125rem !important;
	background: var(--vision-paper);
	border: 0.0625rem solid #c9d9b2;
	border-top: 0rem;
	border-radius: 0rem 0rem 0.75rem 0.75rem;
	color: #303030;
}

#xo-content .page38.formatbox #about dl ul {
	display: grid;
	grid-template-columns: 3.75rem minmax(0rem, 1fr);
	gap: 0.625rem 0.5rem;
	box-sizing: border-box;
	width: 100%;
	margin: 0rem;
	padding: 0rem;
	list-style: none !important;
	counter-reset: none !important;
}

#xo-content .page38.formatbox #about dl ul > li {
	position: relative;
	display: block !important;
	grid-column: 2;
	box-sizing: border-box;
	width: 100%;
	min-width: 0rem;
	margin: 0rem;
	padding: 0.5625rem 0.75rem 0.5625rem 2.125rem !important;
	background: #ffffff;
	border: 0.0625rem solid #dce7ce;
	border-radius: 0.625rem;
	box-shadow: 0rem 0.125rem 0.25rem rgba(61, 93, 47, 0.08);
	list-style: none !important;
	counter-increment: none !important;
}

#xo-content .page38.formatbox #about dl ul > li::marker {
	content: "";
}

#xo-content .page38.formatbox #about dl ul > .labelbox {
	position: relative !important;
	float: none !important;
	display: flex;
	grid-column: 1;
	align-self: start;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3.5rem;
	min-height: 3.00rem;
	margin: 0rem !important;
	padding: 0.7rem 0.35rem;
	background: #eef7e3;
	border: 0.0625rem solid #bdd39f;
	border-radius: 0.625rem;
	color: #315f1a;
	font-weight: 700;
	line-height: 1.35 !important;
	text-align: center;
	font-size: 110%  !important;
}

#xo-content .page38.formatbox #about dl ul > li::before {
	content: "✓";
	position: absolute;
	top: 0.5625rem;
	left: 0.6875rem;
	color: var(--vision-green);
	font-weight: 800;
	line-height: 1.5;
}

#xo-content .page38.formatbox #about #conrent_01 dl ul strong,
#xo-content .page38.formatbox #about #conrent_01 dl ul span {
	display: block;
}

#xo-content .page38.formatbox #about #conrent_01 dl ul strong {
	margin-bottom: 0.125rem;
	color: var(--vision-blue-dark);
}

#xo-content .page38.formatbox #about #conrent_02 dl {
	counter-reset: vision-policy;
}

#xo-content .page38.formatbox #about #conrent_02 dl > dt {
	counter-increment: vision-policy;
	padding-left: 4.25rem;
	background: linear-gradient(90deg, #e3f3fa 0%, #f8fcfe 100%);
	border-color: #a9cfdf;
	color: var(--vision-blue-dark);
}

#xo-content .page38.formatbox #about #conrent_02 dl > dt::before {
	content: counter(vision-policy, decimal-leading-zero);
	left: 0.875rem;
	box-sizing: border-box;
	width: 2.625rem;
	height: 2.625rem;
	background: var(--vision-blue);
	border: 0.1875rem solid #ffffff;
	box-shadow: 0rem 0.125rem 0.25rem rgba(0, 69, 101, 0.22);
	font-size: 85%;
	font-weight: 800;
}

#xo-content .page38.formatbox #about #conrent_02 dl > dd {
	border-color: #bed8e3;
}

#xo-content .page38.formatbox #about .vision_lead {
	position: relative;
	box-sizing: border-box;
	max-width: 38rem;
	margin: 0rem auto 1.5rem auto;
	padding: 0.75rem 3rem;
	background: #fff9d9;
	border: 0.0625rem solid #e2c849;
	border-radius: 1.5rem;
	color: #634c00;
	font-size: 115%;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	text-indent: 0rem;
}

#xo-content .page38.formatbox #about .vision_lead::before, #xo-content .page38.formatbox #about .vision_lead::after {
    position: absolute;
    top: 110%;
    color: var(--vision-pink);
    font-size: 470%;
    line-height: 1;
    transform: translateY(-50%);
}

#xo-content .page38.formatbox #about .vision_lead::before {
	content: "“";
	left: 1rem;
}

#xo-content .page38.formatbox #about .vision_lead::after {
	content: "”";
	right: 1rem;
}

#xo-content .page38.formatbox #about #conrent_03 dl > dd {
	line-height: 2;
	text-align: justify;
}

#xo-content .page38.formatbox #about .vision_conclusion {
	display: block;
	box-sizing: border-box;
	margin-top: 1rem;
	padding: 0.875rem 1rem;
	background: linear-gradient(90deg, #fff6d0 0%, #fffdf2 100%);
	border-left: 0.375rem solid var(--vision-yellow);
	border-radius: 0rem 0.625rem 0.625rem 0rem;
	color: #7d2854;
	font-size: 105%;
	font-weight: 700;
}

#xo-content .page38.formatbox #about .fancybox_each:focus-visible {
	outline: 0.1875rem solid #b00020;
	outline-offset: 0.25rem;
}



/*============動畫=================*/
.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;
	}
}