@charset "utf-8";
@import url('https://gcore.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
	--environment: #25b483;
	--environment_line: #99dcc5;
	--social: #1c9ea6;
	--social_line: #87ccd0;
	--governance: #247ee3;
	--governance_line: #8bbbf0;
}
* {
	padding: 0;
	margin: 0;
}
html, body {
	width: 100%;
	height:100%;
}
body {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	letter-spacing: -0.05em;
	background-color: #fff;
}

.wrap {
	display:flex;
	padding: 30px;
	margin: 10px;
	background-color: #FFF;
	justify-content: space-evenly;
	/* flex-wrap: wrap; */
	width: 1287px;
}
graph {
	display: inline-block;
	border: 1px solid #DBDBDB;
	border-radius: 20px;
	padding: 22px;
	width: 100%;
	min-width: 220px;
	/*margin: 10px;*/
	position:relative;
}
graph.env {border-color: var(--environment_line)}
graph.soc {border-color: var(--social_line)}
graph.gov {border-color: var(--governance_line)}

graph canvas {
	width: 100%;
}

graph .title {
	font-size: 16px;
	font-weight: 700;
	color: #444;
}
graph.def .title {
	text-align: center;
}
graph .achievement {
	font-size: 14px;
	font-weight: 400;
	color: #666;
	text-align: right;
	height: 31px;
}
graph .achievement .percent {
	display: inline-block;
	font-size: 26px;
	font-weight: 700;
	color: #25b483;
	vertical-align: -10%;
}
graph.env .achievement .percent {color: var(--environment);}
graph.soc .achievement .percent {color: var(--social);}
graph.gov .achievement .percent {color: var(--governance);}

graph .unit {
	position: absolute;
	right: 22px;
	bottom: 10px;
	font-size: 12px;
	font-weight: 400;
	color: #878787;
	text-align: right;
}