.esg22-page .esg22-management-table {
	--esg-management-border-color: var(--esg-management-border-cyan);
	--esg-management-body-size: 16px;
	--esg-management-head-size: 20px;
	--esg-management-title-size: 18px;
	--esg-management-cell-padding-block: 18px;
	--esg-management-cell-padding-inline: 16px;
	--esg-management-mobile-title-box-margin: -18px -16px 14px -16px;
}

.esg22-page .esg22-chart-wrap {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.esg22-page .esg22-chart-title {
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: #333;
}

.esg22-page .esg22-education-distribution {
	--esg-stacked-grid-color: #b8e3e3;
	--esg-stacked-axis-color: #555;
	--esg-stacked-year-color: #1f3864;
	--esg-stacked-total-color: #1f3864;
	--esg-stacked-legend-color: #1f3864;
	--esg-stacked-segment-value-size: 19px;
	--esg-stacked-total-size: 16px;
	--esg-stacked-year-size: 20px;
}

	.esg22-page .esg22-education-distribution .is-diploma {
		background: #7755a6;
	}

	.esg22-page .esg22-education-distribution .is-university {
		background: #b8cd1b;
	}

	.esg22-page .esg22-education-distribution .is-masters {
		background: #53c7c7;
	}

	.esg22-page .esg22-education-distribution .is-docters {
		background: #E086A0;
	}

.esg22-page ul,
.esg22-page .esg22-management-table ul {
	list-style: disc;
	list-style-position: outside;
	padding-left: 1.2em;
}

	.esg22-page ul li,
	.esg22-page .esg22-management-table ul li {
		list-style: disc;
		display: list-item;
	}

.esg22-page .esg22-results-table,
.esg22-page .esg22-product-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 16px;
	line-height: 1.8;
}

	.esg22-page .esg22-results-table th,
	.esg22-page .esg22-product-table th {
		background: #355a98;
		color: #fff;
		border: 1px solid #355a98;
		text-align: center;
		padding: 12px 10px;
		font-weight: 700;
	}

	.esg22-page .esg22-results-table th,
	.esg22-page .esg22-results-table td {
		font-size: 16px;
	}

	.esg22-page .esg22-results-table th {
		background: #49bdbc;
		border-color: #49bdbc;
	}

	.esg22-page .esg22-results-table td,
	.esg22-page .esg22-product-table td {
		border: 1px solid #355a98;
		padding: 14px 12px;
		vertical-align: middle;
		background: #fff;
		text-indent: 0;
	}

		.esg22-page .esg22-results-table td:nth-child(1) {
			text-align: center;
			vertical-align: middle;
			color: #1f3864;
		}

		.esg22-page .esg22-results-table td:nth-child(2) {
			text-align: left;
			vertical-align: middle;
			color: #1f3864;
			background-color: #D1EAEF;
		}

		.esg22-page .esg22-results-table td:nth-child(3) {
			vertical-align:central;
		}

		.esg22-page .esg22-product-table td.center {
			text-align: center !important;
			vertical-align: middle;
		}

		.esg22-page .esg22-product-table td:first-child {
			text-align: center !important;
		}

.esg22-page .esg22-subtitle {
	margin: 18px 0 10px 0;
	color: #1f3864;
	font-size: 20px;
}

@media (max-width: 900px) {
	.esg22-page .esg22-management-table th {
		font-size: 16px;
	}

	.esg22-page .esg22-management-table .esg-title-blue,
	.esg22-page .esg22-management-table .esg-title-orange,
	.esg22-page .esg22-management-table .esg-title-teal,
	.esg22-page .esg22-management-table .esg-title-green {
		font-size: 16px;
	}

	.esg22-page .esg22-chart-title {
		font-size: 22px;
	}
}

.esg22-budget-chart-wrap {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	overflow-x: auto;
}

.esg22-budget-chart-card {
	width: 1000px;
	margin: 0 auto;
	padding: 10px 20px 30px;
	box-sizing: border-box;
	background: #fff;
	font-family: "Microsoft JhengHei", "Microsoft JhengHei UI", Arial, sans-serif;
}

.esg22-budget-chart-title {
	margin: 0 0 18px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 4px;
	color: #17346b;
}

.esg22-budget-chart {
	position: relative;
	height: 330px;
	padding: 0 78px;
	box-sizing: border-box;
}

/* 圖表本體 */
.esg22-plot {
	position: relative;
	height: 240px;
	border-left: 1px solid #d7e36a;
	border-bottom: 1px solid #d7e36a;
	box-sizing: border-box;
}

/* 背景橫線 */
.esg22-grid-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: #d7e36a;
}

/* 左右刻度 */
.esg22-y-axis {
	position: absolute;
	top: 0;
	height: 240px;
	font-size: 12px;
	color: #000;
}

	.esg22-y-axis span {
		position: absolute;
		transform: translateY(50%);
		white-space: nowrap;
	}

.esg22-y-axis-left {
	left: 35px;
	width: 38px;
	text-align: right;
}

	.esg22-y-axis-left span {
		right: 0;
	}

.esg22-y-axis-right {
	right: 38px;
	width: 42px;
	text-align: left;
}

	.esg22-y-axis-right span {
		left: 0;
	}

/* 左右單位標題 */
.esg22-axis-title {
	position: absolute;
	top: 122px;
	font-size: 13px;
	color: #000;
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.esg22-axis-title-left {
	left: 5px;
}

.esg22-axis-title-right {
	right: 5px;
}

/* 折線 SVG */
.esg22-line-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 4;
}

/* 柱狀圖 */
.esg22-bar {
	position: absolute;
	bottom: 0;
	width: 68px;
	transform: translateX(-50%);
	z-index: 3;
}

	.esg22-bar span {
		position: absolute;
		top: 6px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 13px;
		font-weight: 700;
		/*color: #fff;*/
	}

.esg22-bar-2022 {
	background: #76D8DB;
}

/* 折線點 */
.esg22-line-point {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid #EEA051;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, 50%);
	z-index: 4;
	box-sizing: border-box;
}

	.esg22-line-point::after {
		content: "";
		position: absolute;
		left: 2px;
		top: 2px;
		width: 6px;
		height: 6px;
		background: #EEA051;
		border-radius: 50%;
	}

/* 折線數值 */
.esg22-point-value {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	font-size: 13px;
	color: #EEA051;
	white-space: nowrap;
}

/* X 軸年份 */
.esg22-x-label {
	position: absolute;
	bottom: -38px;
	transform: translateX(-50%);
	font-size: 13px;
	color: #000;
	white-space: nowrap;
}