@charset "utf-8";

.page-hero {position: relative;z-index: 7;display: flex;align-items: center;justify-content: center;height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem);contain: content;color: #fff;isolation: isolate;
	&::before {position: absolute;inset: 0;z-index: -1;background: var(--black) no-repeat 50% / cover;/* content: ""; */}
	&.nav-about::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-contact::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-board::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-legal::before { background-image: url("/assets/images/pages/page-hero-11.webp"); }
	/* TODO: after 삭제 */
	&::after {position: absolute;inset: 0;z-index: -1;align-content: center;margin: auto;font: 200 var(--font-size-32) var(--font-sans);text-align: center;color: #fff;background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3) 0 / cover no-repeat;/* content: "페이지 헤더"; */}
	.page-hero-container {display: grid;}
	.heading { font: var(--font-size-50) var(--font-sans); }
	@media (prefers-reduced-motion: no-preference) {
		&::before { animation: page-hero-bg 1.8s both; }
		/* .heading { opacity: 0; animation: slide-up 0.6s 0.2s both; } */
	}
}
@keyframes page-hero-bg {
	0% { scale: 1.05; }
	100% { scale: 1; }
}
@keyframes slide-up {
	0% { translate: 0 40rem; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}
@keyframes slide-right {
	0% { translate: -40rem; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}

.local-nav { position: relative; z-index: 7; font: var(--font-size-18-to-14) var(--font-sans);
	.container { display: flex; height: 3.88888889em; }
	.home { display: grid; place-items: center; width: auto; height: 100%; aspect-ratio: 1; background: var(--black); }
	.home-icon { display: block; width: 1.05555556em; height: auto; fill: white; }
	details { position: relative; }
	summary { position: relative; display: block; align-content: center; height: 100%; padding-inline: 1.66666667em 3.83333333em; text-align: left; color: var(--black); background: lightgray; }
	summary::after { position: absolute; inset: 0; width: 0.55555556em; aspect-ratio: 1; margin: auto 29rem auto auto; border: solid currentColor; border-width: 0 1px 1px 0; translate: 0 -25%; rotate: 45deg; content: ""; }
	[open] summary::after { translate: 0 25%; scale: -1; }
	.nav-menu {position: relative;inset: 100% 0 auto;color: var(--black);background: #fff;border: 1px solid var(--border-color);box-shadow: 0 10rem 30rem #0000000d;}
	.details-level-1 .nav-menu-level-2 { display: none; }
	.details-level-2 .nav-menu-level-3 { display: none; }
	.nav-link { display: block; padding: 1em 1.61111111em; }
	@media (any-hover) {
		.nav-link:hover { background: #f4f4f4; }
	}
}

.layout-sub { min-height: 300px; padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
	.legal-document .page-heading, .page-heading-block { margin-bottom: calc(var(--font-size-35) * 2); text-align: center; }
	.page-heading { font-size: var(--font-size-35); }
	.page-subheading { margin-top: 0.125em; font-weight: 700; font-size: var(--font-size-16); color: #999; }
	/* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
	#main:has(.join_area) .sub_title { display: none; }
}

/* common-sub */
.sub {position: relative;

	.container { display: flex; gap: 40rem; }
	.sub-nav {position: relative;width: 100%;max-width: 190rem;}
	.sub-nav .img-cs {margin-top: 10rem;}
	.sub-nav .img-cs img {width: 100%;height: 100%;}
	.page-hero {padding: 10rem;aspect-ratio: 1/1;height: auto;background: url(/assets/images/pages/sleft_tit.jpg) no-repeat;background-size: cover;}
	.page-hero .heading {font-size: 30rem;font-weight: 600;text-align: center;margin-bottom: 5rem;font-family: 'Pretendard';}
	.page-hero-container span { font-size: 11rem; text-align: center; color: rgb(255 255 255 / 50%); }
	.local-nav .nav-link { position: relative; padding: 18rem 15rem; font-size: 15rem; font-weight: 900; border-top: 1rem solid #ddd; display: flex; justify-content: space-between; }
	.local-nav .nav-item.active .nav-link { color: #365ec3; }
	.local-nav .nav-link::after { content: ''; position: relative; background: url(/assets/images/layouts/arrow-right-blue.svg) no-repeat; background-size: contain; width: 17rem; height: 17rem; }
	.local-nav .nav-item.active .nav-link::after { background-image: url(/assets/images/layouts/arrow-right-gray.svg); }
	.head-title { }
	.breadcrumb {display: flex;gap: 10rem;font-size: 14rem;align-items: center;}
	.sub-content {position: relative;margin-top: 40rem;width: 100%;padding-bottom: 100rem;}
	.breadcrumb span[aria-current="page"] { font-weight: bold; }
	.head-title .title { display: flex; flex-direction: column; font-size: 14rem; color: #777; padding: 30rem 0; }
	.head-title .title .page-heading-block { font-size: 18rem; margin: 0; color: #222; }
	.breadcrumb li {position: relative;display: flex;gap: 10rem;align-items: center;}
	.breadcrumb li:nth-child(1) {background: url(/assets/images/layouts/house-fill.svg) no-repeat;background-size: contain;color: transparent;}
	.breadcrumb li::after { content: ''; position: relative; background: url(/assets/images/layouts/caret-right.svg) no-repeat; background-size: contain; width: 15rem; height: 15rem; }
	.breadcrumb li:last-child::after { display: none; }

	@media(max-width: 767px){

		.container { flex-direction: column; gap: 0rem; margin-top: 15rem; }
		.sub-nav { display: grid; max-width: none; }
		.nav-menu { inset: unset; }
		.page-hero { aspect-ratio: unset; padding: 20rem 0; }
		.nav-menu { display: grid; grid-template-columns: repeat(2, 1fr); }

		.sub-nav {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-areas: "hero img" "nav  nav";gap: 0;}
		.sub-nav .page-hero { grid-area: hero; }
		.sub-nav .img-cs {grid-area: img; margin: 0;}
		.sub-nav .local-nav { grid-area: nav; }
	}
}

/* sub01 */
.ceo-message {
	.wrap { display: flex; gap: 30rem; }
	.img-ceo { width: 100%; height: 100%; max-width: 250rem;}
	.txt { display: flex; flex-direction: column; gap: 30rem; font-size: 15rem; color: #555; text-align: justify; }
	.txt span { font-size: 22rem; color: #365ec3; }
	.txt .sign-name { text-align: end; }

	@media(max-width: 1023px){
		.wrap { flex-direction: column; align-items: center; }
	}
}
.history {
	.list-his { display: flex; flex-direction: column; }
	.list-his > li { display: flex; padding: 15rem 0; border-top: 1rem dashed #ccc; font-size: 15rem; line-height: 1.8; }
	.list-his > li .year { font-size: 20rem; font-weight: bold; color: #365ec3; min-width: 100rem; line-height: normal; }
}
.organization {
	figure { display: block; width: 100%; }
	figure img { width: 100%; height: 100%; }
}
.direction {
	.map { position: relative; margin-bottom: 30rem; }
	.map .hide, .map .cont { display: none; }
	.map .root_daum_roughmap_landing { width: 100%; }
	.map .root_daum_roughmap .wrap_map { height: 280rem; }
	.map-info { display: flex; flex-direction: column; border-top: 3rem solid #365ec3; }
	.map-info li {display: flex;align-items: center;border-bottom: 1rem solid #ddd;gap: 20rem;font-size: 15rem;}
	.map-info li span {padding: 10rem 15rem;min-width: 120rem;background: #f2f9fd;font-weight: bold;}
}


/* sub02 */
.product {
	img {width: 100%; height: 100%; object-fit: cover;}
	.product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 20rem; }
	.product-list img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 6/5; }
	.product-list li a { text-align: center; font-size: 14rem; font-weight: bold; color: #777; display: flex; flex-direction: column; align-items: center; gap: 10rem; }

	@media(max-width: 767px){
		.product-list { grid-template-columns: repeat(2, 1fr); }
	}
}
.product-view {
	.product-tit { font-size: var(--font-size-22); display: block; padding: 15rem; color: #365ec3; border-top: 2rem solid #222; border-bottom: 1rem solid #222; margin: 20rem 0; }
	.product-info { display: flex; flex-direction: column; gap: 10rem; margin: 30rem 0; font-size: var(--font-size-15); }
	.scrollTable { display: flex; flex-direction: column; gap: 10rem; }
	.scrollTable .table {width: 100%;}
	.scrollTable .table-wrap {overflow: auto;display: block;}
	.scrollTable .table thead { background: #f2f9fd; border-top: 2rem solid #365ec3; }
	.scrollTable .table th, .scrollTable .table td {padding: 10rem 0;border: 1rem solid #ddd;font-size: var(--font-size-13);text-align: center;}
	.btn-list {display: flex;gap: 10rem;width: fit-content;padding: 10rem 40rem;background: #222;color: #fff;margin: 40rem auto;align-items: center;}
	.btn-list::after { position: relative; width: 6rem; height: 100%; aspect-ratio: 1; border: solid #fff; border-width: 0 1px 1px 0; rotate: -45deg; content: ""; }
}


/* sub03 */
.technology {
	.tech-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30rem 20rem;}
	.tech-list img {width: 100%;height: 100%;object-fit: cover;padding: 5rem;border: 1rem solid #ddd;}
	.tech-list li a { text-align: center; font-size: 14rem; font-weight: bold; color: #777; display: flex; flex-direction: column; align-items: center; gap: 10rem; }
	.img-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
	.img-modal-content { max-width: 90%; max-height: 80%; border-radius: 8px; }
	.img-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: #fff; cursor: pointer; }

	@media(max-width: 767px){
		.tech-list { grid-template-columns: repeat(2, 1fr); }
	}
}