@charset "utf-8";

@font-face {
	font-family: "Gmarket";
	font-weight: 700;
	src: url("/share/css/Gmarket/GmarketSansBold.woff") format("woff");
}

@font-face {
	font-family: "Gmarket";
	font-weight: normal;
	src: url("/share/css/Gmarket/GmarketSansMedium.woff") format("woff");
}

@font-face {
	font-family: "Gmarket";
	font-weight: 300;
	src: url("/share/css/Gmarket/GmarketSansLight.woff") format("woff");
}

/* ✅ 컨테이너에서 REM 기준 설정 */
.vision2025 {
	--rem: 10px;
	/* 가짜 REM 기준값 */
	font-size: var(--rem);
	word-break: keep-all;
	font-family: "Gmarket", "Malgun Gothic", "맑은고딕", sans-serif;
	letter-spacing: normal;
	line-height: 180%;
	letter-spacing: 0.1em;
}

@media screen and (min-width: 841px) {
	.vision2025 {
		--rem: 10px;
		/* PC */
	}
}

@media screen and (max-width: 840px) {
	.vision2025 {
		--rem: 8px;
		/* Mobile */
	}
}

:root {
	--shadow: 0 calc(0.4 * 1em) calc(2 * 1em) 0 rgba(0, 0, 0, 0.10);
	--color01: #EC56CB;
	--color02: #00ABB8;
	--color03: #427FE9;
	--color04: #8656EC;
	--color05: #004F88;
	--color06: #437DEA;
}

/* ✅ Main Container */
#detail_con .vision2025 {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: calc(6 * var(--rem));
	padding: calc(0 * var(--rem)) calc(4 * var(--rem));
	--bg: url(/img/contents/vision.svg) no-repeat 0 0 / calc(26.2 * var(--rem));
}

/* ✅ DL & DT */
#detail_con .vision2025 dl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(2 * var(--rem));
}

#detail_con .vision2025 dt {
	font-size: calc(2.6 * var(--rem));
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0;
}

/* ✅ UL & LI */
#detail_con .vision2025 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#detail_con .vision2025 ul li {
	font-size: calc(1.7 * var(--rem));
	font-weight: 500;
	line-height: 140%;
}

/* ✅ Mission */
#detail_con .vision2025 .mission {
	position: relative;
	padding-top: calc(5.4 * var(--rem));
}

#detail_con .vision2025 .mission dt {
	position: absolute;
	top: 0;
	color: #F3F3F3;
	font-size: calc(7.8 * var(--rem));
	font-weight: 700;
	line-height: normal;
	z-index: -1;
}

#detail_con .vision2025 .mission dd,
#detail_con .vision2025 .mission dd * {
	font-size: calc(2.9 * var(--rem));
	font-weight: 500;
	line-height: normal;
}

#detail_con .vision2025 .mission dd span:nth-child(1) {
	color: #FDB414;
}

#detail_con .vision2025 .mission dd span:nth-child(2) {
	color: #F36D21;
}

/* ✅ Vision-Con */
#detail_con .vision2025 .vision-con {
	position: relative;
	padding-top: calc(2 * var(--rem));
}

#detail_con .vision2025 .vision-con dt {
	position: absolute;
	top: 0;
	padding: calc(1 * var(--rem)) calc(4 * var(--rem)) calc(0.8 * var(--rem)) calc(4 * var(--rem));
	color: #347715;
	font-size: calc(2 * var(--rem));
	font-weight: 700;
	border-radius: calc(10 * var(--rem));
	border: 1px solid #85C031;
	background: #FFF;
	box-shadow: var(--shadow);
}

#detail_con .vision2025 .vision-con dd {
	width: 100%;
	max-width: calc(80 * var(--rem));
	padding: calc(3.2 * var(--rem)) calc(2 * var(--rem)) calc(2.7 * var(--rem)) calc(2 * var(--rem));
	color: #FFF;
	font-size: calc(3 * var(--rem));
	font-weight: 500;
	line-height: normal;
	border-radius: calc(10 * var(--rem));
	background: linear-gradient(270deg, #69BF41 3.35%, #BED820 104.63%);
	word-break: keep-all;
}

/* ✅ Value */
#detail_con .vision2025 .value ul {
	gap: calc(4 * var(--rem));
	margin-top: calc(2 * var(--rem));
}

#detail_con .vision2025 .value ul li {
	position: relative;
	padding-top: calc(14.6 * var(--rem));
	min-width: calc(13 * var(--rem));
	flex: 1;
}

#detail_con .vision2025 .value ul li::before {
	content: '';
	position: absolute;
	top: calc(4.1 * var(--rem));
	left: 50%;
	margin-left: calc(-2.4 * var(--rem));
	width: calc(4.8 * var(--rem));
	height: calc(4.8 * var(--rem));
	background: var(--bg);
	z-index: 1;
}

#detail_con .vision2025 .value ul li::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(13 * var(--rem));
	height: calc(13 * var(--rem));
	border-radius: calc(4 * var(--rem));
	background: currentColor;
	box-shadow: 0 calc(0.4 * var(--rem)) calc(2 * var(--rem)) rgba(0, 0, 0, 0.10);
}

#detail_con .vision2025 .value ul li:nth-child(1),
#detail_con .vision2025 .value ul li:nth-child(1) p strong {
	color: var(--color01);
}

#detail_con .vision2025 .value ul li:nth-child(2),
#detail_con .vision2025 .value ul li:nth-child(2) p strong {
	color: var(--color02);
}

#detail_con .vision2025 .value ul li:nth-child(2)::before {
	background-position: calc(-4.8 * var(--rem)) 0;
}

#detail_con .vision2025 .value ul li:nth-child(3),
#detail_con .vision2025 .value ul li:nth-child(3) p strong {
	color: var(--color03);
}

#detail_con .vision2025 .value ul li:nth-child(3)::before {
	background-position: calc(-9.6 * var(--rem)) 0;
}

#detail_con .vision2025 .value ul li:nth-child(4),
#detail_con .vision2025 .value ul li:nth-child(4) p strong {
	color: var(--color04);
}

#detail_con .vision2025 .value ul li:nth-child(4)::before {
	background-position: calc(-19.8 * var(--rem)) 0;
}

#detail_con .vision2025 .value ul li p {
	margin-top: calc(1 * var(--rem));
	color: #BEBEBE;
}

#detail_con .vision2025 .value ul li p strong {
	font-size: calc(2.6 * var(--rem));
}

#detail_con .vision2025 .value ul li i {
	position: absolute;
	right: calc(-5 * var(--rem));
	top: 0;
	bottom: 0;
	margin: auto;
	width: calc(5.4 * var(--rem));
	height: calc(5.4 * var(--rem));
	background: var(--bg);
	background-position: calc(-14.4 * var(--rem)) 0;
}

/* ✅ Plan */
#detail_con .vision2025 .plan dd {
	width: 100%;
}

#detail_con .vision2025 .plan ul {
	gap: calc(1 * var(--rem));
	padding: calc(2 * var(--rem));
	border-radius: calc(0.8 * var(--rem));
	background: #F5F5F5;
}

#detail_con .vision2025 .plan ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	padding: calc(3.4 * var(--rem)) calc(0 * var(--rem)) calc(3 * var(--rem)) calc(0 * var(--rem));
	border-radius: calc(0.8 * var(--rem));
	background: #FFF;
	box-shadow: var(--shadow);
	border: 1px solid currentColor;
}

#detail_con .vision2025 .plan ul li:nth-child(1) {
	color: var(--color01);
}

#detail_con .vision2025 .plan ul li:nth-child(2) {
	color: var(--color02);
}

#detail_con .vision2025 .plan ul li:nth-child(3) {
	color: var(--color03);
}

#detail_con .vision2025 .plan ul li:nth-child(4) {
	color: var(--color04);
}

/* ✅ Goal */
#detail_con .vision2025 .goal dd {
	position: relative;
}

#detail_con .vision2025 .goal dd::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(4 * var(--rem));
	margin: auto;
	width: calc(27 * var(--rem));
	height: calc(27 * var(--rem));
	transform: rotate(45deg);
	border-radius: calc(4 * var(--rem));
	background: #F5F5F5;
	z-index: -1;
}

#detail_con .vision2025 .goal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(1.2 * var(--rem));
	padding: calc(4 * var(--rem)) calc(0 * var(--rem));
	width: 100%;
	max-width: calc(94 * var(--rem));
}

#detail_con .vision2025 .goal ul li {
	position: relative;
	flex: 1 1 calc(50% - 0.6em);
	display: flex;
	align-items: center;
	text-align: left;
	padding-left: calc(16.2 * var(--rem));
	max-width: calc(46 * var(--rem));
	min-height: calc(13 * var(--rem));
	color: #4D455B;
}

#detail_con .vision2025 .goal ul li:nth-child(odd) {
	justify-content: flex-end;
	padding-left: 0;
	padding-right: calc(16.2 * var(--rem));
	text-align: right;
}

#detail_con .vision2025 .goal ul li::after {
	content: '';
	position: absolute;
	left: 0;
	width: calc(13 * var(--rem));
	height: calc(13 * var(--rem));
	border-radius: calc(4 * var(--rem));
	background: #FFF;
	box-shadow: var(--shadow);
}

#detail_con .vision2025 .goal ul li:nth-child(odd)::after {
	left: auto;
	right: 0;
}

#detail_con .vision2025 .goal ul li::before {
	content: '';
	position: absolute;
	top: calc(4.1 * var(--rem));
	left: calc(4.1 * var(--rem));
	width: calc(4.8 * var(--rem));
	height: calc(4.8 * var(--rem));
	background: var(--bg);
	background-position: 0 calc(-5.4 * var(--rem));
	z-index: 1;
}

#detail_con .vision2025 .goal ul li:nth-child(odd)::before {
	left: auto;
	right: calc(4.1 * var(--rem));
}

#detail_con .vision2025 .goal ul li:nth-child(2)::before {
	background-position: calc(-4.8 * var(--rem)) calc(-5.4 * var(--rem));
}

#detail_con .vision2025 .goal ul li:nth-child(3)::before {
	background-position: calc(-9.6 * var(--rem)) calc(-5.4 * var(--rem));
}

#detail_con .vision2025 .goal ul li:nth-child(4)::before {
	background-position: calc(-14.4 * var(--rem)) calc(-5.4 * var(--rem));
}

/* ✅ Task */
#detail_con .vision2025 .task dd {
	width: 100%;
}

#detail_con .vision2025 .task .list {
	max-width: calc(107 * var(--rem));
	margin: 0 auto;
	gap: calc(1.6 * var(--rem));
}

#detail_con .vision2025 .task .list>li {
	flex: 1 1 calc(50% - (1.6em / 2));
	padding: calc(4.8 * var(--rem));
	font-weight: 500;
	line-height: 140%;
	border-radius: calc(1 * var(--rem));
	border: 1px solid currentColor;
	font-size: calc(1.8 * var(--rem));
}

#detail_con .vision2025 .task .list>li:nth-child(1) {
	color: var(--color01);
}

#detail_con .vision2025 .task .list>li:nth-child(2) {
	color: var(--color02);
}

#detail_con .vision2025 .task .list>li:nth-child(3) {
	color: var(--color03);
}

#detail_con .vision2025 .task .list>li:nth-child(4) {
	color: var(--color04);
}

#detail_con .vision2025 .task .list li ul {
	margin-top: calc(1 * var(--rem));
	justify-content: flex-start;
}

#detail_con .vision2025 .task .list li ul li {
	width: 100%;
	padding: calc(0.5 * var(--rem)) 0;
	border-bottom: 1px dashed #ddd;
	text-align: left;
	color: #4D455B;
	font-size: calc(1.5 * var(--rem));
}

#detail_con .vision2025 .task .list li ul li:last-child {
	border-bottom: none;
}

/* ✅ 반응형 */
@media screen and (max-width:840px) {
	#detail_con .vision2025 {
		padding: 0;
	}

	#detail_con .vision2025 .goal dd::after {
		display: none;
	}

	#detail_con .vision2025 .goal ul li:nth-child(odd) {
		justify-content: flex-start;
		text-align: left;
		padding-right: 0;
		padding-left: calc(16.2 * var(--rem));
	}

	#detail_con .vision2025 .goal ul li:nth-child(odd)::after {
		left: 0;
		right: auto;
	}

	#detail_con .vision2025 .goal ul li:nth-child(odd)::before {
		left: calc(4.1 * var(--rem));
		right: auto;
	}

	#detail_con .vision2025 .plan ul {
		flex-direction: column;
	}

	#detail_con .vision2025 .task .list {
		flex-direction: column;
	}

	#detail_con .vision2025 .task .list>li {
		padding: calc(2.4 * var(--rem));
	}

	@media screen and (max-width:480px) {
		#detail_con .vision2025 .value ul {
			margin-left: calc(2 * var(--rem));
		}

		#detail_con .vision2025 .value ul li {
			margin-left: calc(-2 * var(--rem));
		}

		#detail_con .vision2025 .value ul li i {
			display: none;
		}

		#detail_con .vision2025 .plan ul {
			border-radius: calc(62 * var(--rem));
		}

		#detail_con .vision2025 .plan ul li {
			flex-basis: calc(50% - 0.5em);
		}

		#detail_con .vision2025 .goal ul li {
			flex-basis: 100%;
			width: 100%;
		}
	}
}