@charset "utf-8";
.page-header {
	position: relative;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 340rem;
	padding-bottom: 0.3%;
	background: var(--black);
	color: #fff;
	isolation: isolate;
	.bg {
		contain: content;
		position: absolute;
		inset: 0;
		z-index: -1;
	}
	.bg::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("/assets/images/pages/page-header-bg.webp") no-repeat 50% / cover;
	}
	.container {
		max-width: 1115rem;
	}
	.heading {
		margin-bottom: 0.375em;
		font: 600 clamp(36rem, calc(48 / var(--container) * 100vw), 48rem) var(--font-sans);
	}
	.subheading {
		font: var(--font-size-18) / 2 var(--font-sans);
	}
	@media (prefers-reduced-motion:no-preference) {
		&::before {
			animation: page-header-bg 1.8s both;
		}
	}
}
.sub {
	padding-block: 55rem clamp(var(--section-padding-block-mobile), calc(120 / var(--container) * 100vw), 120rem);
	.section-switch {
		margin: 0 auto 85rem;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
		gap: clamp(5rem, calc(10 / var(--container) * 100vw), 10rem);
		max-width: 1085rem;
		:where([data-nav-level], .tab) {
			display: block;
			padding: 0.77777778em 1ch 0.88888889em;
			border: 1px solid var(--border-color);
			font: 350 var(--font-size-18-to-14) / 1.44444444 var(--font-sans);
			color: var(--boulder);
			text-align: center;
		}
		:where([data-nav-level].is-visiting, .tab[aria-selected="true"]) {
			border-color: var(--black);
			color: var(--black);
		}
	}
	.legal-document .page-heading,
	.page-heading-block {
		margin-bottom: clamp(var(--section-padding-block-mobile), calc(94 / var(--container) * 100vw), 94rem);
		text-align: center;
	}
	.page-heading-en {
		font: 600 var(--font-size-60) var(--font-sans);
		color: var(--mine-shaft);
	}
	.page-heading-en:empty {
		display: none;
	}
	.page-heading {
		min-height: 1lh;
		font: var(--font-size-20) var(--font-sans);
		color: var(--boulder);
	}
	.page-heading:empty {
		display: none;
	}
	.board-heading:empty,
	.board-description:empty {
		display: none;
	}
	.board-heading {
		font: var(--font-size-28) var(--font-sans);
		color: var(--mine-shaft);
	}
	.board-heading:has(+ .board-description) {
		margin-bottom: 0.17857143em;
	}
	.board-description {
		font: var(--font-size-17) var(--font-sans);
		color: #939393;
	}
	&:has(.join_area) .sub_title {
		display: none;
	}
	/* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
	.section-layout {
		display: flex;
		justify-content: space-between;
		gap: 40rem;
		@media (width >=768px) {
			& {
				align-items: start;
			}
			& + .section-layout {
				margin-top: clamp(var(--section-padding-block-mobile), calc(160 / var(--container) * 100vw), 160rem);
			}
			&:nth-child(even) > *:first-child {
				order: 2;
				min-width: 38.2%;
			}
		}
		@media (width >=1280px) {
			& > .text-block {
				flex-shrink: 0;
			}
		}
		@media (768px <=width < 1280px) {
			& {
				align-items: center;
			}
			& > * {
				flex: 1 40%;
			}
		}
		@media (width < 768px) {
			& {
				flex-direction: column;
			}
		}
	}
	.section-heading {
		font: 600 var(--font-size-26) var(--font-sans);
		color: var(--mine-shaft);
	}
	.section-heading::after {
		content: "";
		display: block;
		margin-block: 1.07692308em;
		width: 79rem;
		border-top: 1px solid #000;
	}
	.section-description {
		font: var(--font-size-16) / 1.75 var(--font-sans);
		color: var(--gray);
	}
	.section-layout-image {
		display: block;
		width: 100%;
		height: auto;
		@media (width >=768px) {
			max-width: 600rem;
		}
	}
}
.sub-about-us {
	.section-1 .text-block {
		max-width: 51ch;
	}
	.company-values {
		max-width: 618rem;
	}
	.section-3 {
		text-align: center;
	}
	.value-list {
		display: grid;
		gap: 40rem 30rem;
		font: var(--font-size-20) var(--font-sans);
	}
	.value-icon {
		margin-bottom: 1.9em;
		aspect-ratio: 38/36;
		background: no-repeat 50% / contain;
	}
	.value-icon-1 {
		background-image: url("/assets/images/pages/value-icon-1.webp");
	}
	.value-icon-2 {
		background-image: url("/assets/images/pages/value-icon-2.webp");
	}
	.value-icon-3 {
		background-image: url("/assets/images/pages/value-icon-3.webp");
	}
	@media (width >=768px) {
		.company-values {
			margin-top: 4rem;
		}
		.value-list {
			grid-template-columns: repeat(3, 1fr);
		}
		.section-2 .text-block {
			justify-self: end;
		}
	}
	@media (width < 768px) {
		.value-list {
			grid-template-columns: repeat(4, 1fr);
		}
		.value-item {
			grid-column-end: span 2;
		}
		.value-item-1 {
			grid-column-start: 2;
		}
	}
}
.sub-history {
	.list-title {
		margin-inline: auto;
		width: fit-content;
		padding: 0.375em 2.25em 0.4375em;
		background: var(--cello);
		border-radius: 0.625em;
		font: 500 var(--font-size-32) var(--font-sans);
		color: #fff;
	}
	.history-component {
		--year-list-margin: 39rem;
		gap: clamp(60rem, calc(98 / var(--container) * 100vw), 98rem);
		padding-block: 58rem clamp(60rem, calc(58 / var(--container) * 100vw), 58rem);
	}
	.year {
		position: relative;
		display: inline-block;
		padding: 0.15384615em 0.73076923em 0.23076923em;
		border: 3px solid var(--cello);
		border-radius: 0.38461538em;
		font: 500 var(--font-size-26) var(--font-sans);
		color: var(--mine-shaft);
	}
	.month-ul {
		margin-top: 1.3125em;
		gap: 2.125em;
		font: var(--font-size-16) / 1 var(--font-sans);
		color: var(--gray);
	}
	.month-li {
		gap: 2.0625em;
	}
	.day-ul {
		gap: 0.5em;
	}
	@media (width >=768px) {
		.history-component::after {
			content: "";
			position: absolute;
			inset: 100% 0 auto;
			margin: auto;
			width: 6rem;
			height: 5rem;
			background: #ddd;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
		}
		.year-li:nth-child(odd) {
			padding-left: var(--year-list-margin);
		}
		.year-li:nth-child(even) {
			padding-right: var(--year-list-margin);
		}
		.year::before {
			content: "";
			position: absolute;
			top: 46.5%;
			height: 14rem;
			aspect-ratio: 1;
			background: var(--cello);
			border-radius: 50%;
		}
		.year-li:nth-child(odd) .year::before {
			left: calc(var(--year-list-margin) * -1 - 3rem);
			translate: -50% -50%;
		}
		.year-li:nth-child(even) .year::before {
			right: calc(var(--year-list-margin) * -1 - 3rem);
			translate: 50% -50%;
		}
	}
}
.sub-location {
	.sub-section + .sub-section {
		margin-top: 47rem;
	}
	.section-heading {
		position: relative;
		padding: 0 0 0 16rem;
		letter-spacing: -0.03846154em;
	}
	.section-heading::after {
		position: absolute;
		top: 4rem;
		left: 0;
		margin: 0;
		width: 5rem;
		height: 45rem;
		background: currentColor;
		border-radius: 50%;
		border: 0;
	}
	.section-description {
		margin: 11rem 0 0 49rem;
	}
	.root-map {
		z-index: 0;
		margin-top: clamp(var(--section-padding-block-mobile), calc(160 / var(--container) * 100vw), 160rem);
		width: 100%;
	}
	.root-map .wrap_map {
		height: 100%;
	}
	.root-map svg {
		pointer-events: none;
	}
	.cont {
		display: none;
	}
	@media (min-width:768px) {
		.root-map .wrap_map {
			height: 532rem;
		}
	}
	@media (max-width:767px) {
		.root-map {
			aspect-ratio: 1;
			padding-bottom: 32rem;
		}
	}
}
.sub-about-business {
	.tabpanel[aria-hidden="true"] {
		display: none;
	}
	.board-heading {
		margin-inline: auto;
		width: fit-content;
		text-align: center;
	}
	.board-heading::after {
		margin-inline: auto;
	}
	.page-certification-list {
		margin-top: 60rem;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rem;
	}
	.img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 210/297;
		object-fit: contain;
	}
}
.sub-tech-develop {
	.tech-develop-image {
		margin-inline: auto;
		display: block;
		max-width: 1214rem;
		width: 100%;
		height: auto;
	}
	.tech-develop-image + .tech-develop-image {
		margin-top: clamp(var(--section-padding-block-mobile), calc(160 / var(--container) * 100vw), 160rem);
	}
}
.sub-board {
	--border-color: #d7d5d5;
	.container {
		max-width: 1364rem;
	}
	.content-block {
		border-color: var(--border-color);
	}
}
.board-product-list {
	display: grid;
	gap: 68rem 30rem;
	/* max-width: 1184rem; */
	.link {
		display: block;
	}
	.thumbnail {
		display: block;
		aspect-ratio: 1;
	}
	.title {
		margin-block: 21rem 13rem;
		font: 500 var(--font-size-17) / 1.2 var(--font-sans);
		color: #2e2e2e;
	}
	.content {
		height: auto;
		font: 300 var(--font-size-14) / 1.42857143 var(--font-sans);
		color: var(--boulder);
	}

	.prodThumb { overflow: hidden; aspect-ratio: 1; }
	.thumbnail { transform: scale(1); transition: .3s; }
	li:hover .thumbnail { transform: scale(1.1); transition: .3s; }

	@media (width >=768px) {
		& {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	@media (width >=1280px) {
		& {
			grid-template-columns: repeat(4, 1fr);
		}
	}
}
.board-view {
	.board-info-list {
		display: grid;
		grid-template: "title title" "author author" "date view" / auto 1fr;
		.info-item {
			display: grid;
			align-items: center;
			border-top: 1px solid #d7d5d5;
		}
		.title-item {
			grid-area: title;
		}
		.author-item {
			grid-area: author;
		}
		.date-item {
			grid-area: date;
		}
		.view-item {
			grid-area: view;
			padding-left: 24rem;
		}
		:where(.title-item, .author-item) {
			grid-template-columns: 130rem 1fr;
			gap: 10rem;
			dt {
				padding: 12rem 18rem 9rem;
				font: var(--font-size-15) / 1.46666667 var(--font-sans);
				color: var(--mine-shaft);
			}
			dd {
				padding: 12rem 18rem 9rem;
				font: 12rem/1.5 var(--font-sans);
				color: var(--mine-shaft);
			}
		}
		:where(.date-item, .view-item) {
			grid-template-columns: auto 1fr;
			gap: 0.8ch;
			dt {
				padding: 12rem 0 12rem 20rem;
				font: 500 12rem var(--font-sans);
				color: #666;
			}
			dd {
				font: 11rem var(--font-sans);
				color: #939393;
			}
		}
		@media (width < 768px) {
			:where(.title-item, .author-item) {
				dt {
					display: none;
				}
				dd {
					grid-column: 1/-1;
				}
			}
		}
	}
	.board-attachment-block {
		display: grid;
		border: 1px solid var(--border-color);
		border-top: 0;
		word-break: break-all;
		.list-title {
			align-content: center;
			padding: 12rem 17rem 10rem;
			border-right: 1px solid var(--border-color);
			font: var(--font-size-15) var(--font-sans);
			color: var(--mine-shaft);
		}
		.attachment-list {
			display: grid;
			gap: 0.5lh;
			padding: 14rem 10rem;
			font-size: 11rem;
			color: #8f8f8f;
		}
		.file-icon {
			margin-right: 5rem;
			display: inline-block;
			width: 7rem;
			aspect-ratio: 7/12;
			background: url("/assets/images/components/board/attachment-icon.png") no-repeat 50% / contain;
		}
		@media (width >=768px) {
			& {
				grid-template-columns: 129rem 1fr;
			}
		}
	}
}
.board-qna-list--custom {
	border-top: 1px solid var(--border-color);
	color: var(--mine-shaft);
	.col-number {
		width: 70rem;
	}
	.col-write {
		width: 150rem;
	}
	.col-date {
		width: 150rem;
	}
	.col-views {
		width: 97rem;
	}
	:is(th, td).views {
		padding-right: 52rem;
	}
	th {
		padding-block: 14rem;
		font-size: 15rem;
	}
	td {
		padding-block: 16rem;
		font-size: 15rem;
	}
}
.footer-banner {
	margin-top: clamp(var(--section-padding-block-mobile), calc(160 / var(--container) * 100vw), 160rem);
	align-content: center;
	height: clamp(300rem, calc(500 / var(--container) * 100vw), 500rem);
	background: #91959b url("/assets/images/components/footer-banner-bg.webp") no-repeat 50% / cover;
	font: var(--font-size-40) / 1.75 var(--font-sans);
	color: #fff;
	text-align: center;
	* {
		letter-spacing: -0.02333333em;
	}
}