@charset "utf-8";
@layer reset;

:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(110 / var(--container) * 100vw), 110rem);
	--container-narrow: 1300;
	--container: 1500;
	--container-wide: 1780;
	--container-scale: 0.93;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #00522d;
	--secondary: #00429b;
	--placeholder-bg: #444444;
	--white: #fff;
	--black: #222;
	--border-color: #ddd; /* components.css 공유 */
	--hover-border-color: #444; /* components.css 공유 */
	--font-pre: "Pretendard", "Malgun Gothic", "Dotum", "Gulim", Sans-serif;
	--font-ten: "Tenada", var(--font-pre);
	--font-pop: "Poppins", var(--font-pre);
	--font-sans: var(--font-pre);
	--site-menu-button-size: 25rem;
	--section-padding-block-mobile: 60rem;
}

/* #region view transition, scroll behavior */
@media (prefers-reduced-motion: no-preference) {
	/* @view-transition { navigation: auto; } */
	html { scroll-behavior: smooth; }
}
/* #endregion view transition, scroll behavior */

/* #region UI 컴포넌트, 공통으로 사용하는 사용자 인터페이스 텍스트 스타일 모음 */
.ui-eyebrow { font: var(--font-size-20) var(--font-ten); letter-spacing: -0.01em; color: var(--primary); text-transform: capitalize; }
.ui-heading { margin-top: 0.78em; font: 700 var(--font-size-50) var(--font-sans); letter-spacing: -0.01em; }
.ui-btn { position: relative; display: flex; align-items: center; width: fit-content; font: 700 var(--font-size-18) / 1 var(--font-sans); border-radius: 5rem; isolation: isolate;
	&::before { display: inline-block; width: 50rem; aspect-ratio: 1; background: var(--primary) url("../images/ui-btn-arrow.svg") no-repeat 50% / 15rem; border-radius: inherit; content: ""; }
	.ui-btn-text { margin-left: -5rem; padding-inline: 27rem 38rem; }
	&::after { position: absolute; inset: 0; z-index: -1; background: var(--primary); border-radius: inherit; clip-path: inset(0 calc(100% - 45rem) 0 0); content: ""; }
	@media (any-hover) {
		@media (prefers-reduced-motion: no-preference) {
			&::after,
			.ui-btn-text { transition: 0.3s; }
		}
		&:hover::after { clip-path: inset(0); }
		.ui-btn-text { color: inherit; background: linear-gradient(90deg, #fff 50%, currentColor 50%) no-repeat 100% / 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
		&:hover .ui-btn-text { background-position-x: 0%; }
	}
}
/* #endregion UI 컴포넌트, 공통으로 사용하는 사용자 인터페이스 텍스트 스타일 모음 */

/* #region container */
.container { position: relative; width: calc(var(--container-scale) * 100%); max-width: calc(var(--container) * 1rem); margin: 0 auto; }
.container--narrow { max-width: calc(var(--container-narrow) * 1rem); }
.container--wide { max-width: calc(var(--container-wide) * 1rem); }
.container--fluid { width: 100%; max-width: none; }
/* #endregion container */

html { scroll-margin-top: var(--header-height); }

#header { position: fixed; inset: 0 0 auto; z-index: 10;
	@media (width >= 1280px) { position: absolute; }
	.container { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
	.logo { display: inline-block; background: url("../images/bordered-logo.svg") no-repeat 50% / contain;
		.logo-image { display: block; width: auto; height: clamp(36rem, calc(60 / var(--container) * 100vw), 60rem); opacity: 0; }
		@media (prefers-reduced-motion: no-preference) and (width < 1280px) {
			.logo-image { transition: 0.3s; }
			.is-home-visible & .logo-image { opacity: 1; }
		}
	}
	.main-nav { position: fixed; inset: 0 0 auto; display: grid; place-items: center; height: var(--header-height); margin: auto; pointer-events: none;
		.main-menu { display: inline-flex; gap: 3rem; padding: 3rem; background: #fff; border-radius: 5rem; box-shadow: 0 20rem 20rem rgba(0, 0, 0, 0.05); pointer-events: auto; }
		.menu-link { display: grid; place-items: center; width: 6.94444444em; height: 2.44444444em; font: 500 var(--font-size-18) var(--font-sans); border-radius: 5rem; }
		.menu-link.is-current-section { color: #fff; background: var(--black); }
		@media (width < 1280px) { display: none; }
	}
	.menu-link { text-transform: capitalize; }
	.utilities { display: inline-flex; align-items: center; gap: 20rem; }
	.contact-phone { display: inline-flex; align-items: center; gap: 0.6ch; padding: 0.80555556em 1.33333333em; font: 700 var(--font-size-18-to-14) var(--font-sans); color: #fff; background: var(--primary); border-radius: 5rem;
		&::before { display: inline-block; width: 0.88888889em; aspect-ratio: 16 / 15; background: url("../images/contact-phone-call.png") no-repeat 50% / contain; content: ""; }
		@media (width < 768px) { padding: 0.80555556em;
			.contact-phone-number { display: none; }
		}
	}
	.site-menu-toggle { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; cursor: pointer;
		.bar { position: absolute; inset: 0; height: 2px; margin: auto; background: currentColor; }
		.bar-1 { translate: 0 -8rem; }
		.bar-3 { translate: 0 8rem; }
		@media (width >= 1280px) { display: none; }
	}
	.site-menu { --border-color: #eaeaea; --padding-block: 15rem; --padding-inline: 16rem; left: auto; z-index: 12; width: 100%; max-width: 280rem; height: 100dvh; padding: 0; color: #000; background: #fff; border: 0;
		&::backdrop { background: #000; }
		.site-menu-header { display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }
		.site-menu-close { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; margin-right: 16px; background: 0;
			&::before,
			&::after { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background: currentColor; transform: translateY(-50%) rotate(45deg); content: ""; }
			&::after { transform: translateY(-50%) rotate(-45deg); }
		}
		.main-menu {
			& > li { border-top: 1px solid var(--border-color); }
			& > li:last-child { border-bottom: 1px solid var(--border-color); }
			.menu-link { position: relative; display: block; width: 100%; padding: var(--padding-block) 30rem var(--padding-block) var(--padding-inline); font-size: 16rem; text-align: left; }
		}
		@media (prefers-reduced-motion: no-preference) {
			& { translate: 100%; transition: 0.4s allow-discrete; }
			&::backdrop { opacity: 0; transition: 0.4s allow-discrete; }
			&:popover-open { translate: 0;
				&::backdrop { opacity: 0.6; }
				@starting-style { translate: 100%;
					&::backdrop { opacity: 0; }
				}
			}
		}
	}
}

.hero { position: relative; color: #fff; background: #4b7894;
	.container { width: 100%; width: 100%; max-width: 100%; height: min(960rem, 100dvh); min-height: 500rem; }
	.text-block { position: absolute; top: 50%; z-index: 999; translate: 0 -50%; }
	.heading { font: 700 clamp(26rem, calc(80 / var(--container) * 100vw), 80rem) / 1.2 var(--font-sans); letter-spacing: -0.015em; }
	.text-shadow { text-shadow: 0 10rem 20rem rgba(0, 0, 0, 0.2); }
	.text-fx { --stroke-size: 1px; position: absolute; inset: 0; color: var(--primary); text-shadow: calc(var(--stroke-size) * -1) 0 0 #fff, var(--stroke-size) 0 0 #fff, 0 calc(var(--stroke-size) * -1) 0 #fff, 0 var(--stroke-size) 0 #fff,
			calc(var(--stroke-size) * -1) calc(var(--stroke-size) * -1) 0 #fff, var(--stroke-size) var(--stroke-size) 0 #fff, calc(var(--stroke-size) * -1) var(--stroke-size) 0 #fff,
			var(--stroke-size) calc(var(--stroke-size) * -1) 0 #fff, calc(var(--stroke-size) * -0.5) var(--stroke-size) 0 #fff, calc(var(--stroke-size) * 0.5) var(--stroke-size) 0 #fff,
			calc(var(--stroke-size) * -0.5) calc(var(--stroke-size) * -1) 0 #fff, calc(var(--stroke-size) * 0.5) calc(var(--stroke-size) * -1) 0 #fff, var(--stroke-size) calc(var(--stroke-size) * -0.5) 0 #fff,
			var(--stroke-size) calc(var(--stroke-size) * 0.5) 0 #fff, calc(var(--stroke-size) * -1) calc(var(--stroke-size) * -0.5) 0 #fff, calc(var(--stroke-size) * -1) calc(var(--stroke-size) * 0.5) 0 #fff; pointer-events: none; }
	.qr-link { display: block; margin-top: clamp(20rem, calc(40 / var(--container) * 100vw), 40rem); padding-inline: clamp(0px, calc(30 / var(--container) * 100vw), 30rem); font: clamp(12rem, calc(16 / var(--container) * 100vw), 16rem) var(--font-sans); text-align: center;
		@media (width >= 768px) { max-width: clamp(100rem, calc(200 / var(--container) * 100vw), 200rem); }
		@media (width < 768px) { max-width: 100rem; }
		.qr { display: block; width: 100%; height: auto; margin-bottom: 0.5em; }
	}
	.swiper {
		img { display: block; width: 100%; height: 100%; object-fit: cover; }
	}
	.scroll-cue { position: absolute; bottom: 0; left: 20px; z-index: 999; display: flex; align-items: center; gap: 16rem; font: 700 13rem var(--font-sans); color: color-mix(in srgb, currentColor 70%, #0000); text-transform: uppercase; user-select: none; }
	.scroll-bar { position: relative; width: 1px; height: 100rem; contain: content; background: color-mix(in srgb, currentColor 20%, #0000); }
	.scroll-bar::before { position: absolute; bottom: 0; inset-inline: 0; height: 30%; background: currentColor; content: ""; }
	@media (prefers-reduced-motion: no-preference) {
		.text-fx { clip-path: inset(0 100% 0 0); animation: hero-clip-right 2530ms 1290ms both; }
		.scroll-bar::before { animation: hero-down 2s infinite; }
	}
	@media (width >= 768px) {
		.container { height: 960rem; }
		.text-block { left: 50rem; }
		.heading { padding-inline: 0.375em 0.575em; }
	}
	@media (width <= 767px) {
		.container { height: 100dvh; }
		/* .container img {position:absolute; top:0; left:-50%;} */
		.text-block { left: 20rem; }
		.heading { padding-inline: 0.375em 0.575em; }
	}
}
@keyframes hero-clip-right {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0); }
}
@keyframes hero-down {
	0%,
	20% { bottom: 131%; }
	100% { bottom: -31%; }
}

.about-us { position: relative; align-content: center; padding-block: clamp(var(--section-padding-block-mobile), calc(198 / var(--container) * 100vw), 198rem); text-align: center; color: #fff; background: #96abbf url("../images/about-us-bg.webp") no-repeat 50% / cover;
	.ui-eyebrow { color: inherit; }
	.ui-heading { margin-block: 0.44285714em 0.55714286em; font-size: var(--font-size-70); }
	.description { font: var(--font-size-28) / 1.60714286 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
	.ui-btn { margin: clamp(50rem, calc(85 / var(--container) * 100vw), 85rem) auto 0; }
	@media (prefers-reduced-motion: no-preference) {
		.about-us-duplicate { position: absolute; inset: 0; align-content: center; padding-block: inherit; color: var(--black); background: #fff; pointer-events: none; user-select: none;
			.se-visible & { animation: about-us-clip-path 2s both; }
			.ui-btn::before,
			.ui-btn::after { background-color: var(--black); }
		}
	}
	@media (width >= 1280px) {
		& { padding-top: calc(var(--header-height) + clamp(var(--section-padding-block-mobile), calc(204 / var(--container) * 100vw), 204rem)); }
	}
	@media (width < 768px) {
		br { display: none; }
	}
}
@keyframes about-us-clip-path {
	0% { clip-path: polygon(0% 0%, 0% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 0%); }
	100% { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 100%, 100% 100%, 100% 0%); }
}

.system { padding-block: clamp(var(--section-padding-block-mobile), calc(121 / var(--container) * 100vw), 121rem); text-align: center;
	.overview-image { display: block; width: 100%; max-width: 1500rem; height: auto; margin: 40rem auto 0; }
	@media (width >= 1280px) {
		& { padding-top: calc(var(--header-height) + clamp(var(--section-padding-block-mobile), calc(110 / var(--container) * 100vw), 110rem)); }
	}
}

.product-features { contain: content; padding-block: clamp(var(--section-padding-block-mobile), calc(198 / var(--container) * 100vw), 198rem) clamp(var(--section-padding-block-mobile), calc(120 / var(--container) * 100vw), 120rem); background: #f6f6f6;
	.ui-eyebrow,
	.ui-heading { text-align: center; }
	.list { margin-top: clamp(50rem, calc(82 / var(--container) * 100vw), 82rem); }
	.item { width: 100%; padding: clamp(212rem, calc(409 / var(--container) * 100vw), 409rem) clamp(30rem, calc(50 / var(--container) * 100vw), 50rem) clamp(30rem, calc(57 / var(--container) * 100vw), 57rem); color: #fff; background: var(--black) no-repeat 50% / cover; border-radius: 10rem; }
	.item-1 { background-image: url("../images/product-features-bg-1.webp"); }
	.item-2 { background-image: url("../images/product-features-bg-2.webp"); }
	.item-3 { background-image: url("../images/product-features-bg-3.webp"); }
	.item-4 { background-image: url("../images/product-features-bg-4.webp"); }
	.item-5 { background-image: url("../images/product-features-bg-5.webp"); }
	.item-6 { background-image: url("../images/product-features-bg-6.webp"); }
	.item-7 { background-image: url("../images/product-features-bg-7.webp"); }
	.item-8 { background-image: url("../images/product-features-bg-8.webp"); }
	.item:nth-child(odd) { float: left; }
	.item:nth-child(even) { float: right; }
	.title { margin-bottom: 0.5em; font: 600 var(--font-size-30) var(--font-sans); letter-spacing: -0.01em; }
	.title span.stlt { display: inline-block; margin-bottom: 20px; padding: 10px; font-size: 12pt; color: #5bb48c; border: 1px solid #5bb48c; }
	.description { font: var(--font-size-18) / 1.2 var(--font-sans); color: color-mix(in srgb, currentColor 70%, #0000); }
	.description span.sdescription { display: inline-block; margin-top: 10px; font-size: 10pt; color: #979797; }
	.description-6 { max-width: 32ch; }
	@media (width >= 768px) {
		.item { max-width: min(560rem, calc(50% - 25rem)); }
		.item + .item { margin-top: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); }
		.item:nth-child(2) { margin-top: clamp(170rem, calc(243 / var(--container) * 100vw), 243rem); }
	}
	@media (width >= 1280px) {
		& { padding-top: calc(var(--header-height) + clamp(var(--section-padding-block-mobile), calc(111 / var(--container) * 100vw), 111rem)); }
	}
	@media (width < 768px) {
		.item { max-width: calc(100% - 20rem); }
		.item + .item { margin-top: 20rem; }
	}
}

.our-products { contain: content; padding-block: clamp(var(--section-padding-block-mobile), calc(239 / var(--container) * 100vw), 239rem);
	.ui-eyebrow,
	.ui-heading { text-align: center; }
	.product-list { display: grid; gap: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); margin-top: clamp(50rem, calc(82 / var(--container) * 100vw), 82rem); }
	.product-slide { width: 100%; }
	.product-image { display: block; width: 100%; height: 100%; aspect-ratio: 89 / 63; object-fit: cover; }
	.info-block { display: grid; }
	.title { grid-area: title; margin-bottom: 0.46em; font: 700 var(--font-size-50) / 1.3 var(--font-sans); letter-spacing: -0.01em; }
	.description { grid-area: description; font: var(--font-size-20) / 1.75 var(--font-sans); letter-spacing: -0.01em; }
	.info-list { display: inline-flex; grid-area: list; align-items: center; font: 700 var(--font-size-16) var(--font-sans); background: #f6f6f6; border: 1px solid #e0e0e0; border-radius: 5em; }
	.info-item { display: inline-flex; gap: 0.5625em; }
	dt { letter-spacing: -0.01em; color: color-mix(in srgb, #111 50%, #0000); }
	dd { letter-spacing: -0.01em; color: #111; }
	.button-group { display: inline-flex; grid-area: button; justify-content: end; gap: 10rem; }
	.swiper-button { display: grid; place-items: center; width: clamp(45rem, calc(60 / var(--container) * 100vw), 60rem); aspect-ratio: 1; background: #f6f6f6; border-radius: 50%; }
	.swiper-button::before { display: block; width: 15rem; aspect-ratio: 15 / 12; background: url("../images/product-arrow-gray.svg") no-repeat 50% / contain; content: ""; }
	.swiper-prev::before { rotate: 180deg; }
	.thumbnail-slide { grid-area: thumbnail; width: 100%; max-width: 790rem; }
	.thumbnail-image { display: block; width: 100%; height: auto; aspect-ratio: 250 / 176; object-fit: cover; }
	@media (any-hover) {
		.swiper-button:hover { background-color: var(--primary); }
		.swiper-button:hover::before { background-image: url("../images/product-arrow-white.svg"); }
	}
	@media (width >= 768px) {
		.info-list { gap: 2.75em; margin-right: 20rem; padding-inline: 58rem 53rem; }
	}
	@media (width >= 1280px) {
		& { padding-top: calc(var(--header-height) + clamp(var(--section-padding-block-mobile), calc(112 / var(--container) * 100vw), 112rem)); }
		.product-item { display: grid; grid-template-columns: repeat(2, 50%); }
		.product-slide { max-width: 890rem; }
		.info-block { --padding-inline: clamp(20rem, calc(100 / var(--container-wide) * 100vw), 100rem); padding-top: 82rem; }
		.info-item:last-child { margin-left: 1.125em; }
		.info-list,
		.button-group { margin-top: 63rem; }
		.thumbnail-slide { margin-top: clamp(40rem, calc(91 / var(--container) * 100vw), 91rem); }
		.product-list-item:nth-child(odd) {
			.info-block { grid-template: "title title temp" "description description temp" "list button temp" "thumbnail thumbnail thumbnail" / 0 minmax(auto, 650rem) 1fr; justify-items: start; padding-left: var(--padding-inline); }
			.button-group { margin-left: auto; }
		}
		.product-list-item:nth-child(even) {
			.info-block { grid-template: "temp title title" "temp description description" "temp button list" "thumbnail thumbnail thumbnail" / 1fr minmax(auto, 650rem) 0; justify-items: end; }
			.title,
			.description { text-align: right; }
			.info-block { order: -1; padding-right: var(--padding-inline); }
			.button-group { margin-right: auto; }
		}
	}
	@media (width < 1280px) {
		.product-slide { max-width: calc(var(--container-scale) * 100vw); }
		.info-block { grid-template: "thumbnail" "button" "title" "description" "list"; margin-top: 10px; }
		.info-list { justify-content: space-between; justify-self: start; gap: 2ch; height: 3.75em; margin-top: 30rem; padding-inline: 30rem; }
		.button-group { margin-block: 20rem 30rem; }
	}
	@media (width < 768px) {
		.description br { display: none; }
	}
}

.contact-us { padding-block: clamp(var(--section-padding-block-mobile), calc(112 / var(--container) * 100vw), 112rem) clamp(var(--section-padding-block-mobile), calc(140 / var(--container) * 100vw), 140rem); background: #f6f6f6;
	.container { display: grid; gap: 60rem clamp(30rem, calc(119 / var(--container) * 100vw), 119rem); }
	.install-support { padding-block: clamp(50rem, calc(146 / var(--container) * 100vw), 146rem) clamp(30rem, calc(127 / var(--container) * 100vw), 127rem); color: #fff; background: var(--primary) url("../images/installation-bg.webp") no-repeat 50% / cover; border-radius: 10rem;
		.heading { margin-bottom: 0.475em; font: 700 var(--font-size-40) var(--font-sans); letter-spacing: -0.01em; }
		.description { max-width: 42ch; font: 300 var(--font-size-18) / 1.66666667 var(--font-sans); color: rgb(from currentColor r g b / 0.6); }
		.contact-list { display: grid; gap: 10rem; margin-top: 54rem; font: 600 clamp(14rem, calc(30 / var(--container) * 100vw), 30rem) var(--font-sans); }
		.contact-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.96666667em; }
		.contact-list dt { display: grid; place-content: center; width: 3.33333333em; aspect-ratio: 1; font: 700 var(--font-size-15) / 1 var(--font-sans); text-align: center; background: #003883; border-radius: 5rem; }
		.contact-item:first-child dt { background-color: #e58700; }
		.operating-hours { display: grid; gap: 8rem; margin-top: 44rem; padding: clamp(18rem, calc(27 / var(--container) * 100vw), 27rem) clamp(18rem, calc(39 / var(--container) * 100vw), 39rem); font-weight: 500; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10rem; }
		.operating-hours-item { display: grid; grid-template-columns: auto 1fr; gap: 1.875em; }
		.operating-hours dt { font-weight: 700; color: rgb(from currentColor r g b / 0.4); }
		@media (width >= 1280px) { padding-inline: clamp(20rem, calc(140 / var(--container) * 100vw), 140rem) clamp(20rem, calc(130 / var(--container) * 100vw), 130rem); }
		@media (width < 1280px) { padding-inline: 20rem; }
	}
	.contact-form { scroll-margin-top: var(--header-height);
		.ui-heading { margin-top: 0.18em; }
		fieldset { margin: 44rem 0 0; padding: 0; border: 0; }
		.border-bottom-3px { border-bottom: 3rem solid #d4d4d4; }
		.form-item { display: block; }
		.form-field { display: block; width: 100%; min-height: 3.88888889em; font: 600 var(--font-size-18) / 1.5 var(--font-sans); background-color: unset; border: 0; border-bottom: 3rem solid #d4d4d4; }
		.form-field::placeholder { color: #11111180; }
		:where(.form-field-name, .form-field-mail) { padding-left: 3.83333333em; background: no-repeat 1.16666667em 50% / 1.27777778em; }
		.form-field-name { background-image: url("../images/contact-name.png"); }
		.form-field-mail { background-image: url("../images/contact-mail.png"); }
		.form-field-message { height: calc(4.7777778lh + 3em); resize: none; padding: 2.27777778em 1.11111111em 1.11111111em; }
		.captcha-block { display: flex; align-items: center; margin-top: 1px; font: var(--font-size-18) / 1.5 var(--font-sans); }
		.captcha-text { padding-inline: 1.11111111em; color: #111; }
		.captcha-number { min-width: 5.55555556em; margin-inline: 0.61111111em 1.66666667em; padding: 0.55555556em; text-align: center; color: #fff; background: #111; border-radius: 5rem; pointer-events: none; user-select: none; }
		.form-field-captcha { padding-left: 1.16666667em; }
		.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20rem; margin-top: 54rem; }
		.consent-block { display: flex; align-items: center; }
		#consent { width: 1.5em; height: 1.5em; margin-right: 9rem; }
		.privacy-popover-trigger { margin-left: 10rem; font-weight: 600; font-size: var(--font-size-14); text-decoration: underline; }
		@media (width < 1280px) {
			.captcha-text { position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; border: 0; }
			.captcha-number { margin-left: 0; }
			.ui-btn { margin-left: auto; }
		}
	}
	.privacy-popover { padding: 0; border: 0;
		&::backdrop { background: #000; opacity: 0.8; }
		.head { display: flex; align-items: center; justify-content: space-between; gap: 2ch; height: 3.4375em; box-sizing: border-box; padding: 0.9375em; color: #fff; background: #686e82; }
		.privacy-close { position: relative; width: 1.1875em; aspect-ratio: 1; }
		.privacy-close::before { --line-thickness: 1px; position: absolute; inset: -0.1875em; background: linear-gradient(
					0deg,
					#0000 calc(50% - var(--line-thickness)),
					currentColor calc(50% - var(--line-thickness)),
					currentColor calc(50% + var(--line-thickness)),
					#0000 calc(50% + var(--line-thickness))
				),
				linear-gradient(90deg, #0000 calc(50% - var(--line-thickness)), currentColor calc(50% - var(--line-thickness)), currentColor calc(50% + var(--line-thickness)), #0000 calc(50% + var(--line-thickness))); rotate: 45deg; content: ""; }
		.privacy-close::after { position: absolute; inset: -5px; content: ""; }
		.body,
		.dialogIframe { display: block; width: 100%; max-height: calc(85vh - 3.4375em); box-sizing: border-box; overflow: auto; padding: 0.9375em; background: #fff; border: 0; }
		@media (prefers-reduced-motion: no-preference) {
			& { opacity: 0; transition: 0.4s allow-discrete; }
			&::backdrop { opacity: 0; transition: 0.4s allow-discrete; }
			&:popover-open { opacity: 1;
				&::backdrop { opacity: 0.6; }
				@starting-style { opacity: 0;
					&::backdrop { opacity: 0; }
				}
			}
		}
		@media (min-width: 768px) {
			& { width: min(600px, 92vw); }
		}
	}
	@media (width >= 1280px) {
		& { padding-top: calc(var(--header-height) + 15rem); }
		.container { grid-template-columns: 82fr 84fr; }
		.contact-form { max-width: 700rem; padding-top: 82rem; }
	}
	@media (768px <= width < 1280px) {
		.container { grid-template-columns: 1fr 1fr; gap: 30rem; }
	}
}

#footer { padding-top: clamp(var(--section-padding-block-mobile), calc(79 / var(--container) * 100vw), 79rem); color: #fff; background: #111;
	.info-list { display: flex; flex-wrap: wrap; gap: 1lh 3.6875em; color: rgb(from currentColor r g b / 0.4); }
	.info-item { display: inline-flex; align-items: center; }
	dt:not(.highlight-label)::after { margin-inline: 0.4ch; content: ":"; }
	.highlight-label { display: inline-block; margin-right: 1.35714286em; padding: 0.35714286em 2.14285714em; font-size: var(--font-size-14); border: 2rem solid rgb(from currentColor r g b / 0.1); border-radius: 5rem; }
	.copyright-block { margin-top: 3.46666667em; padding-block: 1.63333333em; font-size: var(--font-size-15); color: rgb(from currentColor r g b / 0.2); border-top: 1px solid rgb(from currentColor r g b / 0.1); }
	@media (width >= 1280px) {
		.info-list { row-gap: 2.25em; }
	}
}

.floating-links { position: fixed; inset: auto 0 52rem; z-index: 9; display: grid; justify-content: end; gap: 4rem; pointer-events: none;
	.link { display: block; width: 60rem; aspect-ratio: 1; background: no-repeat 50% / cover; border-radius: 5rem; pointer-events: auto; }
	.link-kakao { background-color: #ffe812; background-image: url("../images/floating-menu-kakao.png"); }
	.link-wechat { background-color: #2dc100; background-image: url("../images/floating-menu-wechat.png"); }
	.link-youtube { background-color: #dd2c28; background-image: url("../images/floating-menu-youtube.png"); }
	.link-instagram { background-color: #b635ab; background-image: url("../images/floating-menu-instagram.png"); }
	.link-naver { background-color: #01c73c; background-image: url("../images/floating-menu-naver.png"); }
}