/*공통*/
@import url('reset.css');

:root {
	/*폰트*/
	--Pretendard: 'Pretendard';
	--Domine: 'Domine', serif;
	--NotoSerif: 'Noto Serif', serif;
	--Exo2: 'Exo 2', sans-serif;
	--Poppins: 'Poppins', sans-serif;
	--KoPub: 'KoPub Dotum';

	/*폰트 사이즈*/
	--font-12: 12px;
	--font-14: 14px;
	--font-16: 16px;
	--font-18: 18px;
	--font-20: 20px;
	--font-22: 22px;
	--font-24: 24px;
	--font-28: 28px;
	--font-30: 30px;
	--font-32: 32px;
	--font-36: 36px;
	--font-40: 40px;
	--font-50: 50px;
	--font-60: 60px;
	--font-80: 80px;

	/*마진, 패딩*/
	--gap-8: 8px;
	--gap-12: 12px;
	--gap-16: 16px;
	--gap-20: 20px;
	--gap-24: 24px;
	--gap-30: 30px;
	--gap-32: 32px;
	--gap-40: 40px;
	--gap-56: 56px;
	--gap-60: 60px;
	--gap-80: 80px;
	--gap-100: 100px;

	/*사이즈*/
	--n-12: 12px;
	--n-14: 14px;
	--n-16: 16px;
	--n-18: 18px;
	--n-20: 20px;
	--n-22: 22px;
	--n-24: 24px;
	--n-26: 26px;
	--n-30: 30px;
	--n-32: 32px;
	--n-40: 40px;
	--n-42: 42px;
	--n-45: 45px;
	--n-46: 46px;
	--n-48: 48px;
	--n-50: 50px;
	--n-54: 54px;
	--n-56: 56px;
	--n-60: 60px;
	--n-64: 64px;
	--n-70: 70px;
	--n-72: 72px;
	--n-74: 74px;
	--n-80: 80px;

	/*컬러*/
	--brand: #0063f6;

	--black: #000;
	--black-1: #111;
	--black-3: #333;

	--gray-6: #666;
	--gray-9: #999;
	--gray-a: #aaa;
	--gray-c: #ccc;
	--gray-e: #eee;
	--gray-dc: #dcdcdc;
	--gray-f4: #f4f4f4;
	--gray-f8: #f8f8f8;
	--light-gray: #f9fafc;

	--white: #fff;
	--red: #f34246;
	--yellow: #ffa800;
	--green: #00dc80;
	--blue: #007aff;
	--sky-blue: #e6effe;
	--mid-blue: #bfc7d9;
	--light-blue: #f1f4f9;
	--dark-blue: #161b2e;

	--line-gray: #e3e6ed;
	--bg-gray: #f4f4f4;

	/*기타*/
	--vh: 100vh;
	--nvh: calc(var(--vh, 1vh) * 100);
	--max-w: 1024px;
	--min-w: 320px;

	--headerH: 100px;
	--footerH: 80px;
}

@media screen and (max-width: 1600px) {
	:root {
		--font-80: 64px;
	}
}

@media screen and (max-width: 1280px) {
	:root {
		--font-80: 50px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--font-14: 12px;
		--font-16: 14px;
		--font-18: 16px;
		--font-20: 18px;
		--font-22: 20px;
		--font-24: 22px;
		--font-28: 25px;
		--font-30: 26px;
		--font-32: 28px;
		--font-36: 30px;
		--font-40: 32px;
		--font-50: 38px;
		--font-60: 46px;

		--gap-16: 14px;
		--gap-20: 16px;
		--gap-24: 18px;
		--gap-30: 25px;
		--gap-32: 27px;
		--gap-40: 32px;
		--gap-50: 42px;
		--gap-60: 52px;
		--gap-64: 54px;
		--gap-80: 62px;
		--gap-100: 82px;

		--n-20: 16px;
		--n-24: 20px;
		--n-30: 26px;
		--n-32: 28px;
		--n-36: 32px;
		--n-40: 36px;
		--n-42: 38px;
		--n-48: 45px;
		--n-50: 46px;
		--n-54: 48px;
		--n-60: 52px;
		--n-64: 52px;
		--n-70: 56px;
		--n-75: 60px;
		--n-80: 72px;

		--headerH: 80px;
		--footerH: 60px;
	}
}

@media screen and (max-width: 648px) {
	:root {
		--font-80: 42px;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--font-14: 11px;
		--font-16: 13px;
		--font-18: 14px;
		--font-20: 16px;
		--font-22: 16px;
		--font-24: 17px;
		--font-28: 18px;
		--font-30: 20px;
		--font-32: 24px;
		--font-36: 24px;
		--font-40: 26px;
		--font-50: 28px;
		--font-60: 32px;
		--font-80: 36px;

		--gap-8: 5px;
		--gap-16: 12px;
		--gap-20: 14px;
		--gap-24: 15px;
		--gap-30: 20px;
		--gap-32: 22px;
		--gap-40: 28px;
		--gap-50: 32px;
		--gap-60: 36px;
		--gap-64: 40px;
		--gap-80: 52px;
		--gap-100: 70px;

		--n-20: 14px;
		--n-24: 16px;
		--n-30: 22px;
		--n-32: 24px;
		--n-36: 28px;
		--n-40: 32px;
		--n-42: 34px;
		--n-48: 42px;
		--n-50: 42px;
		--n-54: 45px;
		--n-60: 48px;
		--n-64: 48px;
		--n-70: 50px;
		--n-75: 56px;
		--n-80: 64px;

		--headerH: 70px;
		--footerH: 50px;
	}
}

#wrap {
	width: 100%;
	margin: 0 auto;
	position: relative;
	min-width: var(--min-w);
}

* {
	touch-action: manipulation;
}

body.fix {
	overflow: hidden;
}

header {
	width: 100%;
	height: var(--headerH);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
}
header .header-wrap {
	/* width: 92%; */
	max-width: 1920px;
	margin: 0 auto;
	padding-inline: 40px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .logo {
	width: 63px;
	height: 48px;
	background: url(/img/icons/header-logo-48.svg) center no-repeat;
	background-size: 100% auto;
	display: block;
	font-size: 0;
	filter: invert(1);
}
.pg-general header .logo {
	filter: invert(0);
}
.pg-masterpiece .theme--white header .logo {
	filter: invert(0);
}
.pg-masterpiece.snap-section-1 .theme--white header .logo {
	filter: invert(1);
}
/* .pg-about-us--v2.snap-section-11 .theme--white header .logo {
	filter: invert(0);
} */
.pg-about-us--v2.snap-section-10 .theme--white .logo {
	filter: invert(0);
}
.is-sitemap-active header .logo {
	filter: invert(1) !important;
}
header .btn-sitemap {
	width: 40px;
	height: 35px;
	background: url(/img/com/icon_menu.svg) center no-repeat;
	background-size: cover;
}
.theme--white header .btn-sitemap {
	filter: invert(1);
}
.theme--white header .btn-sitemap.active {
	filter: invert(1);
}
.pg-masterpiece.snap-section-1 .theme--white header .btn-sitemap {
	filter: invert(0);
}

.pg-about-us--v2 .theme--white header .btn-sitemap {
	filter: invert(0);
}
/* .pg-about-us--v2.snap-section-11 .theme--white header .btn-sitemap {
	filter: invert(1);
} */
.pg-about-us--v2.snap-section-10 .theme--white header .btn-sitemap {
	filter: invert(1);
}
.is-sitemap-active header .btn-sitemap {
	filter: invert(0) !important;
}
header.hide {
	visibility: hidden;
	opacity: 0;
}
header.active {
	visibility: visible;
	opacity: 1;
	transition: 1s ease;
}
header .btn-sitemap.active {
	background-image: url(/img/com/icon_close.svg);
	background-size: auto 100%;
}

@media screen and (max-width: 768px) {
	header .logo {
		width: 53px;
		height: 42px;
	}
	header .btn-sitemap {
		width: 28px;
		height: 24px;
	}
}

@media screen and (max-width: 480px) {
	header .logo {
		width: 43px;
		height: 34px;
	}
	header .btn-sitemap {
		width: 23px;
		height: 20px;
	}
}

footer {
	display: flex;
	justify-content: space-between;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: 40px;
	visibility: hidden;
	opacity: 0;
	box-sizing: border-box;
}
footer .footer-wrap {
	min-height: var(--footerH);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	padding: var(--gap-16) 0;
}
footer .copyright {
	font-size: var(--font-16);
	color: var(--white);
}
footer .btn-family-site {
	width: 200px;
	height: var(--n-45);
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 0 var(--gap-16);
	border-radius: 100px;
	position: relative;
	font-size: var(--font-16);
	display: flex;
	align-items: center;
	color: var(--white);
}
footer .btn-family-site:after {
	content: '';
	width: var(--font-16);
	height: var(--font-16);
	background: url(/img/com/arrow_up_white.svg) center no-repeat;
	background-size: 70% auto;
	position: absolute;
	right: var(--gap-16);
	top: 50%;
	transform: translateY(-50%);
}
footer .btn-family-site.active:after {
	transform: translateY(-50%) scaleY(-1);
}
footer .button-area {
	display: flex;
	align-items: center;
	gap: 10px;
}

footer .family-site {
	position: relative;
}
footer .family-site .family-site-list {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: calc((var(--n-45) + var(--gap-8)));
	border-radius: var(--gap-16);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--white);
	transform: translateX(-50%);
	padding: var(--gap-20);
	visibility: hidden;
	opacity: 0;
	transition: 0.3s ease-in-out;
}
footer .family-site .family-site-list ul li {
	width: 100%;
	margin-top: 10px;
}
footer .family-site .family-site-list ul li:first-child {
	margin-top: 0;
}
footer .family-site .family-site-list ul li a {
	font-size: var(--font-16);
	font-weight: 500;
	display: block;
}
footer .family-site .family-site-list.active {
	visibility: visible;
	opacity: 1;
}
footer .btn-fnb {
	display: flex;
	align-items: center;
	width: fit-content;
	height: var(--n-45);
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0 var(--gap-32);
	font-family: var(--Poppins);
	font-size: var(--font-16);
	color: var(--white);
	text-align: center;
}
/* footer .btn-fnb.small {
	font-size: var(--font-14);
	line-height: 1.2;
} */

.pg-about-us--v2.snap-section-11 footer .btn-fnb {
	border-color: rgba(0, 0, 0, 0.2);
	background-color: var(--white);
	color: var(--black);
}

footer.fix {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 100;
}
footer.hide {
	visibility: hidden;
	opacity: 0;
}
footer.active {
	visibility: visible;
	opacity: 1;
	transition: 1s ease;
}

footer .button-wrap {
	gap: var(--gap-24);
	display: flex;
	align-items: center;
}

@media screen and (max-width: 1024px) {
	footer .copyright {
		font-size: var(--font-14);
	}
	footer .btn-fnb.small {
		font-size: 12px;
	}
	footer .btn-family-site {
		width: 150px;
	}
	footer .btn-fnb {
		padding: 0 var(--gap-24);
	}
	footer .button-area {
		gap: 0 8px;
	}
}

@media screen and (max-width: 768px) {
	footer .footer-wrap {
		flex-wrap: wrap;
		flex-direction: column;
		gap: var(--gap-24);
	}
	footer .copyright {
		width: 100%;
		text-align: center;
	}
	footer .btn-family-site {
		width: 150px;
	}
	footer .button-area {
		gap: 0 4px;
	}
	footer .btn-fnb {
		padding: 0 var(--gap-32);
	}
}

@media screen and (max-width: 480px) {
	.pg-main footer {
		display: none;
	}
	footer.active {
		justify-content: center;
		padding-block: 20px;
	}
	footer .btn-family-site {
		width: 130px;
	}
	footer .button-area {
		display: none;
		flex-wrap: wrap;
		gap: 5px;
		justify-content: center;
	}
}

.btn-com-back {
	display: flex;
	align-items: center;
	width: fit-content;
	height: var(--n-46);
	border-radius: 100px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid var(--black);
	padding: 0 var(--gap-20);
	font-family: var(--Poppins);
	font-size: var(--font-16);
	color: var(--black);
}
.btn-com-back span {
	position: relative;
	padding-left: calc(var(--n-20) + 10px);
}
.btn-com-back span:before {
	content: '';
	width: var(--n-20);
	height: var(--n-20);
	background: url(/img/com/arrow_left.svg) center no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.btn-com-back.hide {
	display: none;
}
.btn-com-back.disabled {
	pointer-events: none;
}
/* .pg-about-us--v2.snap-section-11 .btn-com-back {
	border-color: var(--black);
	background-color: var(--black);
	color: var(--white);
}
.pg-about-us--v2.snap-section-11 .btn-com-back span:before {
	filter: invert(1);
} */

@media screen and (max-width: 480px) {
	.btn-com-back {
		height: 51px;
	}
}

.mo-btn-com-back {
	display: flex;
	align-items: center;
	width: fit-content;
	height: var(--n-54);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--white);
	padding: 0 var(--gap-32);
	font-family: var(--Poppins);
	font-size: var(--font-16);
	color: var(--black);
}
.mo-btn-com-back span {
	position: relative;
	padding-left: calc(var(--n-20) + 10px);
}
.mo-btn-com-back span:before {
	content: '';
	width: var(--n-20);
	height: var(--n-20);
	background: url(/img/com/arrow_left.svg) center no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.mo-btn-com-back.hide {
	display: none;
}
.mo-btn-com-back.disabled {
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.btn-com-back {
		margin: 0 auto;
	}
	.mo-btn-com-back {
		margin: 0 auto;
	}
}

.back-btn-wrap {
	width: 92%;
	max-width: 1920px;
	margin: 0 auto;
	z-index: 100;
}
.back-btn-wrap.fix {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
}

.cursor {
	width: var(--n-60);
	height: var(--n-60);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--white);
	border-radius: 50%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-14);
	color: var(--white);
	text-align: center;
	font-weight: 600;
	visibility: hidden;
}
.cursor span {
	position: relative;
	z-index: 10;
}
.cursor.typeB {
	color: var(--black);
}
.cursor.typeB:before {
	content: '';
	width: calc(var(--n-60) - 5px);
	height: calc(var(--n-60) - 5px);
	background: var(--white);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	border-radius: 50%;
}
.cursor.active {
	visibility: visible;
}

.sns-cursor {
	width: fit-content;
	height: var(--n-32);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--white);
	border-radius: 100px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	transition: transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-12);
	color: var(--white);
	text-align: center;
	font-weight: 600;
	visibility: hidden;
	padding: 0 var(--gap-24);
}
.sns-cursor span {
	position: relative;
	z-index: 10;
}
.sns-cursor.active {
	visibility: visible;
}

.cursor-arrow {
	width: var(--n-80);
	height: var(--n-80);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--white);
	border-radius: 50%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-14);
	color: var(--white);
	text-align: center;
	font-weight: 600;
	visibility: hidden;
	cursor: pointer;
}
.cursor-arrow:before {
	content: '';
	width: calc(var(--n-80) - 8px);
	height: calc(var(--n-80) - 8px);
	border-radius: 50%;
	background: var(--white);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.cursor-arrow:after {
	content: '';
	width: 100%;
	height: 100%;
	background: url(/img/com/arrow_left.svg) center no-repeat;
	background-size: auto 40%;
	position: absolute;
	left: 0;
	top: 0;
}
.cursor-arrow.arrow-next:after {
	transform: scaleX(-1);
}
.cursor-arrow.active {
	visibility: visible;
}

/*.arrow-cursor {width:100px; height:100px; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.); border-radius:50%; position:fixed; left:0; top:0; z-index:10000; display:flex; align-items:center; justify-content:center; visibility:hidden; cursor:pointer;}
.arrow-cursor:after {content:""; width:100%; height:100%; background:url(/img/com/arrow_left_white.svg) center no-repeat; background-size:auto 50%; position:absolute; left:0; top:0;}
.arrow-cursor.active {visibility:visible;}
.arrow-cursor.arrow-next-cursor:after {transform:scaleX(-1);}*/

.sitemap {
	width: 100%;
	height: 0vh;
	position: fixed;
	left: 0;
	top: 0;
	padding-top: var(--headerH);
	padding-bottom: calc(var(--footerH) + var(--n-54));
	z-index: 0;
	transition: height 0.5s ease-out;
}
.sitemap:before {
	content: '';
	width: 100%;
	height: 0;
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	transition: height 0.3s ease-out;
}
.sitemap .sitemap-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	position: relative;
	z-index: 10;
}
.sitemap .sitemap-wrap::-webkit-scrollbar {
	background: transparent;
}
.sitemap .sitemap-wrap .sitemap-box {
	width: 90%;
	max-width: 1440px;
	margin: 0 auto;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap {
	width: 100%;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box {
	width: 100%;
	margin-top: 60px;
	display: flex;
	align-items: center;
	gap: 80px;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {
	width: 300px;
}

.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a,
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1;
	display: block;
	color: var(--white);
	transform: translateY(-50px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a span {
	display: flex;
	gap: 20px;
	align-items: center;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
	display: none;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap {
	width: calc(100% - 380px);
	opacity: 0;
	transition: opacity 0.3s ease-out;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap ul.snb-box {
	display: flex;
	align-items: center;
	gap: 20px 80px;
	flex-wrap: wrap;
}
.sitemap
	.sitemap-wrap
	.sitemap-box
	.gnb-wrap
	.gnb-box
	.snb-wrap
	ul.snb-box
	li
	a {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.3;
	background-image: linear-gradient(var(--white), var(--white));
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: background-size 0.3s linear;
}
.sitemap
	.sitemap-wrap
	.sitemap-box
	.gnb-wrap
	.gnb-box
	.snb-wrap
	ul.snb-box
	li
	a.active {
	background-size: 100% 2px;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box.off {
	opacity: 0.5;
}
.sitemap .sitemap-wrap .sitemap-box .button-wrap {
	width: 100%;
	margin-top: 60px;
	display: flex;
	align-items: center;
	gap: 0 var(--gap-20);
	transform: translateY(-50px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.sitemap .sitemap-wrap .sitemap-box .button-wrap .btn {
	display: flex;
	width: fit-content;
	height: var(--n-64);
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.3);
	align-items: center;
	justify-content: center;
	font-size: var(--font-24);
	color: var(--white);
	font-weight: 500;
	padding: 0 var(--gap-32);
	text-align: center;
}
.sitemap .sitemap-wrap .sitemap-box .button-wrap .btn.small {
	font-size: var(--font-16);
	line-height: 1.2;
}

.sitemap.active {
	height: var(--nvh);
	z-index: 999;
}
.sitemap.active:before {
	height: 100%;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap.active .gnb-box .gnb a,
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap.active .gnb-box .gnb button {
	transform: translateY(0);
	opacity: 1;
}
.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap.active {
	opacity: 1;
}
.sitemap .sitemap-wrap .sitemap-box .button-wrap.active {
	transform: translateY(0);
	opacity: 1;
}

@media screen and (max-width: 1600px) {
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box {
		gap: 40px;
		margin-top: 50px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {
		width: 280px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a,
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
		font-size: 50px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap {
		width: calc(100% - 330px);
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box {
		gap: 15px 40px;
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box
		li
		a {
		font-size: 23px;
	}
	.sitemap .sitemap-wrap .sitemap-box .button-wrap {
		margin-top: 50px;
	}
}
@media screen and (max-width: 1280px) {
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box {
		gap: 30px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {
		width: 220px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a,
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
		font-size: 40px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap {
		width: calc(100% - 250px);
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box {
		gap: 15px 30px;
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box
		li
		a {
		font-size: 24px;
	}

	.sitemap .sitemap-wrap .sitemap-box .button-wrap .btn {
		height: var(--n-48);
		font-size: var(--font-18);
	}
}

@media screen and (max-width: 900px) {
	.sitemap .sitemap-wrap {
		align-items: flex-start;
		justify-content: space-between;
	}
	.sitemap .sitemap-wrap .sitemap-box {
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box {
		flex-direction: column;
		gap: var(--gap-24);
		margin-top: var(--gap-24);
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {
		width: 100%;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a,
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
		transform: translateY(0);
		opacity: 1;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a {
		display: none;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
		display: flex;
		align-items: center;
		height: var(--n-80);
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button span {
		display: flex;
		align-items: center;
		column-gap: 6px;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button i {
		width: 43.2px;
		height: 24.3px;
		background-size: cover;
	}
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .snb-wrap {
		width: 100%;
		display: none;
		opacity: 1;
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box {
		flex-direction: column;
		gap: var(--gap-16);
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box
		li {
		width: 100%;
	}

	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box.off {
		opacity: 1;
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box
		li
		a.active {
		background-size: 0;
	}
}

@media screen and (max-width: 648px) {
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb a,
	.sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb button {
		font-size: 32px;
		height: var(--n-70);
	}
	.sitemap
		.sitemap-wrap
		.sitemap-box
		.gnb-wrap
		.gnb-box
		.snb-wrap
		ul.snb-box
		li
		a {
		font-size: 20px;
	}
}

@media screen and (max-width: 480px) {
	.sitemap .sitemap-wrap .sitemap-box .button-wrap {
		gap: 10px 5px;
		flex-wrap: wrap;
	}
	.sitemap .sitemap-wrap .sitemap-box .button-wrap .btn {
		font-size: var(--font-16);
	}
	.sitemap .sitemap-wrap .sitemap-box .button-wrap .btn.small {
		font-size: var(--font-12);
	}
}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}