@charset "utf-8";

:root {
	--container: 1254;
}

.page-header {
	position: relative;
	z-index: 7;
	aspect-ratio: 2 / 1;
	contain: content;
	isolation: isolate;
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--black) no-repeat 50% 0 / cover;
		content: "";
	}
	@media (width >= 768px) {
		aspect-ratio: 1920 / 768;
		&.nav-about::before {
			background-image: url("/assets/images/pages/page-header-about-pc.webp");
		}
		&.nav-news::before {
			background-image: url("/assets/images/pages/page-header-news-pc.webp");
		}
		&.nav-inquiry::before {
			background-image: url("/assets/images/pages/page-header-inquiry-pc.webp");
		}
	}
	@media (width < 768px) {
		&.nav-about::before {
			background-image: url("/assets/images/pages/page-header-about-mob.webp");
		}
		&.nav-news::before {
			background-image: url("/assets/images/pages/page-header-news-mob.webp");
		}
		&.nav-inquiry::before {
			background-image: url("/assets/images/pages/page-header-inquiry-mob.webp");
		}
	}
}

/* main layout */
.layout-sub {
	min-height: 300px;
	padding-block: 60rem;
	.legal-document .page-heading,
	.page-heading-block {
		margin-bottom: calc(var(--font-size-38) * 1.4);
	}
	.page-heading {
		font-size: var(--font-size-38);
		&::before {
			display: inline-block;
			width: 0.57894737em;
			aspect-ratio: 1;
			margin-right: 0.21052632em;
			vertical-align: top;
			background: #a2e200;
			translate: 0 11%;
			content: "";
		}
	}
	.page-subheading {
		margin-top: 0.125em;
		padding-left: calc(var(--font-size-38) * 0.78947369);
		font-size: var(--font-size-18-to-14);
	}
	#main:has(.join_area) .sub_title {
		display: none;
	} /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
}

.pager-about {
	.section-vision {
		.visual-1 {
			aspect-ratio: 600 / 458;
			contain: content;
			background: url("/assets/images/home/vision-visual-1.webp") no-repeat 50% / contain;
			@media (width >= 768px) {
				--path: polygon(10% 65%, 90% 0, 100% 0, 100% 100%, 10% 100%);
				float: right;
				width: min(600rem, 40%);
				clip-path: var(--path);
				shape-outside: var(--path);
			}
		}
		.heading {
			font: 700 var(--font-size-35) / 1.5 var(--font-sans);
			@media (width < 768px) {
				margin-top: 1em;
			}
		}
		.subheading {
			margin-block: 0.6em 0.5em;
			font: 700 var(--font-size-25) / 1.5 var(--font-sans);
		}
		.description {
			font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		}
		.section-vision-details {
			margin-top: 54rem;
			@media (width >= 768px) {
				display: grid;
				grid-template-columns: 1fr 1.5fr;
				gap: 0 clamp(8rem, calc(50 / var(--container) * 100vw), 50rem);
				.visual-2 {
					grid-row: 1 / 3;
				}
				.sub-heading {
					align-self: end;
				}
			}
		}
		.visual-2 {
			aspect-ratio: 540 / 293;
			background: #244e35 url("/assets/images/home/vision-visual-2.webp") no-repeat 50% / contain;
			@media (width >= 768px) {
				align-self: center;
				width: clamp(260rem, calc(540 / var(--container) * 100vw), 540rem);
			}
		}
		.sub-heading {
			margin-bottom: 1em;
			font: 700 var(--font-size-20) / 1.5 var(--font-sans);
			@media (width < 768px) {
				margin-top: 1em;
			}
		}
	}
	.section-mission {
		padding-block: 60rem;
		.heading {
			width: 11.5em;
			max-width: 230rem;
			margin-top: 1.1em;
			margin-inline: auto;
			padding: 0.57692308em 2ch;
			font: 700 var(--font-size-26) var(--font-sans);
			text-align: center;
			color: #fff;
			text-transform: uppercase;
			background: #a2e200;
			border-radius: 5em;
		}
		.subheading {
			margin-top: 0.8em;
			font: var(--font-size-30) var(--font-sans);
			text-align: center;
		}
		.mission-image {
			display: block;
			width: 100%;
			height: auto;
		}
	}
	.section-values {
		--bg-color: rgba(0, 0, 0, 0.1);
		padding-block: 60rem;
		background: linear-gradient(var(--bg-color), var(--bg-color)), url("/assets/images/home/values-bg.webp") no-repeat 50% / cover, #e4ece9;
		.heading {
			font-size: var(--font-size-35);
			color: #fff;
		}
		.list {
			display: grid;
			gap: 12rem clamp(8rem, calc(36 / var(--container) * 100vw), 36rem);
			margin-top: 40rem;
			@media (width >= 768px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}
		.item {
			padding: clamp(30rem, calc(50 / var(--container) * 100vw), 50rem) clamp(16rem, calc(44 / var(--container) * 100vw), 44rem);
			background: rgba(249, 250, 250, 0.89);
			border-radius: clamp(20rem, calc(60 / var(--container) * 100vw), 60rem);
		}
		.title {
			margin-bottom: 1em;
			font: 700 var(--font-size-30) var(--font-sans);
			color: #1f3e5c;
		}
		.description {
			font: var(--font-size-18-to-14) / 1.44444444 var(--font-sans);
		}
	}
	.section-esg {
		padding-block: 60rem;
		.heading {
			font: 700 var(--font-size-35) var(--font-sans);
		}
		.list {
			display: grid;
			gap: 40rem;
			margin-top: 55rem;
		}
		.item {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: clamp(8rem, calc(35 / var(--container) * 100vw), 35rem);
		}
		.visual {
			@media (width >= 768px) {
				width: clamp(100rem, calc(190 / var(--container) * 100vw), 190rem);
				aspect-ratio: 190 / 191;
				background: no-repeat 50% / contain;
				&.visual--1 {
					background-image: url("/assets/images/pages/esg-1.webp");
				}
				&.visual--2 {
					background-image: url("/assets/images/pages/esg-2.webp");
				}
				&.visual--3 {
					background-image: url("/assets/images/pages/esg-3.webp");
				}
			}
			@media (width < 768px) {
				display: none;
			}
		}
		.title-list {
			display: flex;
			flex-wrap: wrap;
			gap: 0 2ch;
			margin-bottom: 1em;
			font: 700 var(--font-size-28) var(--font-sans);
		}
		.title-item::before {
			content: "#";
		}
		.description {
			padding-left: 2ch;
			font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		}
	}
	.section-history {
		padding-block: 60rem;
		.heading-block {
			padding: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem) clamp(24rem, calc(118 / var(--container) * 100vw), 118rem) clamp(14rem, calc(18 / var(--container) * 100vw), 18rem);
			color: #fff;
			background: var(--secondary);
		}
		.heading {
			font: 700 var(--font-size-42) / 1.5 var(--font-sans);
		}
		.subheading {
			font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
			text-wrap: balance;
		}
		.history-list {
			position: relative;
			display: grid;
			padding-block: clamp(40rem, calc(58 / var(--container) * 100vw), 58rem) 11rem;
			isolation: isolate;
			&::before {
				position: absolute;
				z-index: -3;
				border-left: 1px solid var(--primary);
				content: "";
			}
			@media (width >= 768px) {
				&::before {
					inset: 0 auto 0 50%;
				}
				.history-item {
					width: 50%;
					&:nth-child(odd) {
						margin-left: auto;
						.year-block {
							&::before {
								translate: -50% -50%;
							}
							&::after {
								right: 50%;
							}
						}
					}
					&:nth-child(even) {
						.year-block::before {
							margin-left: auto;
							translate: 50% -50%;
						}
						.year-block::after {
							left: 50%;
						}
					}
				}
			}
			@media (width < 768px) {
				gap: 40rem;
				&::before {
					inset: 0 auto 0 0;
				}
				.year-block::before {
					translate: -50% -50%;
				}
				.year-block::after {
					right: 50%;
				}
			}
		}
		.year-block {
			position: relative;
			display: block;
			font: 700 var(--font-size-44) var(--font-sans);
			text-align: center;
			color: var(--primary);
			.year {
				padding-inline: 1ch;
				background: #fff;
			}
			&::before {
				position: absolute;
				inset: 0.4lh 0 auto;
				z-index: -1;
				width: clamp(10rem, 0.34090909em, 15rem);
				aspect-ratio: 1;
				background: #fff;
				border: 1px solid var(--primary);
				border-radius: 50%;
				content: "";
			}
			&::after {
				position: absolute;
				inset: 0.4lh 0 auto;
				z-index: -2;
				border-top: 1px dashed var(--primary);
				content: "";
			}
		}
		.event-list {
			margin: 13rem clamp(8rem, calc(39 / var(--container) * 100vw), 39rem) 0;
			font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		}
	}
	.section-certification {
		padding-block: 60rem;
		background: rgba(204, 233, 195, 0.11);
		.container {
			display: flex;
			justify-content: space-between;
			gap: 1lh;
			@media (width < 1280px) {
				flex-direction: column;
			}
		}
		.heading {
			font: 700 var(--font-size-35) var(--font-sans);
			color: var(--primary);
		}
		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2lh clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
			max-width: 710rem;
			font: 12rem / 1.33333333 var(--font-sans);
			text-align: center;
			text-wrap: balance;
			@media (width >= 768px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}
		img {
			display: block;
			width: 100%;
			height: auto;
			margin-bottom: 0.5lh;
		}
	}
}