@charset "UTF-8";
@import url('../fonts/style.css');
@import url('./icon.css');

:root {
	--hv: 5.5rem;
	/* 🎨 Colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-primary: #ea3483;
	--color-secondary: #007FC1;
	--color-bg1: #223055;
	--color-bg2: #f6f7f8;
	--color-bg3: #e3f0ff;
	--color-bg4: #fff0f6;
	--color-gray-50: #fafafa;
	--color-gray-100: #F5F5F5;
	--color-gray-200: #eeeeee;
	--color-gray-300: #dddddd;
	--color-gray-400: #bbbbbb;
	--color-gray-500: #999999;
	--color-gray-600: #727272;
	--color-gray-700: #4b4b4b;
	--color-gray-800: #2c2c2c;
	--color-gray-900: #121212;

	/* 🖋️ Font Families */
	--font-kvhi: 'KVHi', sans-serif;
	--font-pretendard: 'Pretendard', sans-serif;

	/* 🖋️ PC Typography */
	--font-display-size: 4.5rem;
	/* 72 */
	--font-title1-size: 4rem;
	/* 64 */
	--font-title2-size: 3rem;
	/* 48 */
	--font-title3-size: 2.5rem;
	/* 40 */
	--font-title4-size: 2rem;
	/* 32 */
	--font-body-size: 1.5rem;
	/* 24 */
	--font-body1-size: 1.25rem;
	/* 20 */
	--font-body2-size: 1.125rem;
	/* 18 */
	--font-body3-size: 1rem;
	/* 16 */
	--font-body4-size: 0.875rem;
	/* 14 */

	@media screen and (max-width:50rem) {
		& {
			--hv: 64px;

			--font-display-size: 3rem;
			/* 48 */
			--font-title1-size: 2.75rem;
			/* 44 */
			--font-title2-size: 2rem;
			/* 32 */
			--font-title3-size: 1.75rem;
			/* 28 */
			--font-title4-size: 1.5rem;
			/* 24 */
			--font-body-size: 1.25rem;
			/* 20 */
			--font-body1-size: 1.125rem;
			/* 18 */
			--font-body2-size: 1rem;
			/* 16 */
			--font-body3-size: 0.875rem;
			/* 14 */
			--font-body4-size: 0.75rem;
			/* 12 */

			/* Headings */
			--head1: 2.5rem;
			/* 40 / 16 */
			--head2: 2.25rem;
			/* 36 / 16 */
			--head3: 2.25rem;
			/* 36 / 16 */
			--head4: 1.625rem;
			/* 26 / 16 */
			--head5: 1.25rem;
			/* 20 / 16 */
		}
	}
}

*.c-white {
	color: var(--color-white);
}

*.c-black {
	color: var(--color-black);
}

*.c-point1 {
	color: var(--color-primary);
}

*.c-point2 {
	color: var(--color-secondary);
}

*.c-gray100 {
	color: var(--color-gray-100);
}

*.c-gray200 {
	color: var(--color-gray-200);
}

*.c-gray300 {
	color: var(--color-gray-300);
}

*.c-gray400 {
	color: var(--color-gray-400);
}

*.c-gray500 {
	color: var(--color-gray-500);
}

*.c-gray600 {
	color: var(--color-gray-600);
}

*.c-gray700 {
	color: var(--color-gray-700);
}

*.c-gray800 {
	color: var(--color-gray-800);
}

*.c-gray900 {
	color: var(--color-gray-900);
}

*.bg-point1 {
	background-color: var(--color-primary);
}

*.bg-point2 {
	background-color: var(--color-secondary);
}

*.bg-white {
	background-color: var(--color-white);
}

*.bg-black {
	background-color: var(--color-black);
}

*.bg-gray {
	background-color: var(--color-gray-50);
}

*.bg-1 {
	background-color: var(--color-bg1);
}

*.bg-2 {
	background-color: var(--color-bg2);
}

*.bg-3 {
	background-color: var(--color-bg3);
}

*.bg-4 {
	background-color: var(--color-bg4);
}

*.ft-title72 {
	font-family: var(--font-kvhi);
	font-size: var(--font-display-size);
}

*.ft-title64 {
	font-family: var(--font-kvhi);
	font-size: var(--font-title1-size);
	letter-spacing: -1.5px;
}

*.ft-title48 {
	font-family: var(--font-kvhi);
	font-size: var(--font-title2-size);
}

*.ft-title40 {
	font-family: var(--font-kvhi);
	font-size: var(--font-title3-size);
}

*.ft-title32 {
	font-family: var(--font-kvhi);
	font-size: var(--font-title4-size);
}

*.ft-body24 {
	font-size: var(--font-body-size);
}

*.ft-body20 {
	font-size: var(--font-body1-size);
}

*.ft-body18 {
	font-size: var(--font-body2-size);
}

*.ft-body16 {
	font-size: var(--font-body3-size);
}

*.ft-body14 {
	font-size: var(--font-body4-size);
}


/* 폰트 굵기 */
*.fw-100 {
	font-weight: 100;
}

*.fw-200 {
	font-weight: 200;
}

*.fw-300 {
	font-weight: 300;
}

*.fw-400 {
	font-weight: 400;
}

*.fw-500 {
	font-weight: 500;
}

*.fw-600 {
	font-weight: 600;
}

*.fw-700 {
	font-weight: 700;
}

*.fw-800 {
	font-weight: 800;
}

*.fw-900 {
	font-weight: 900;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.scroll-hidden {
	overflow: hidden;
}

.inner {
	width: 100%;
	max-width: calc(1600px + 2rem);
	margin: 0 auto;
	padding: 0 1rem;
}

.inner2 {
	width: 100%;
	max-width: calc(1440px + 2rem);
	margin: 0 auto;
	padding: 0 1rem;
}

/* show/hide */
.v1920, .v1600, .v1440, .v1280, .v1024, .v800, .v600, .v480, .v320 {
	display: none !important;
}

@media screen and (max-width: 1920px) {
	.v1920 {
		display: block !important;
	}

	.v1920_none {
		display: none !important;
	}
}

@media screen and (max-width: 1600px) {
	.v1600 {
		display: block !important;
	}

	.v1600_none {
		display: none !important;
	}
}

@media screen and (max-width: 1440px) {
	.v1440 {
		display: block !important;
	}

	.v1440_none {
		display: none !important;
	}
}

@media screen and (max-width: 1280px) {
	.v1280 {
		display: block !important;
	}

	.v1280_none {
		display: none !important;
	}
}

@media screen and (max-width: 1024px) {
	.v1024 {
		display: block !important;
	}

	.v1024_none {
		display: none !important;
	}
}

@media screen and (max-width: 800px) {
	.v800 {
		display: block !important;
	}

	.v800_none {
		display: none !important;
	}
}

@media screen and (max-width: 600px) {
	.v600 {
		display: block !important;
	}

	.v600_none {
		display: none !important;
	}
}

@media screen and (max-width: 480px) {
	.v480 {
		display: block !important;
	}

	.v480_none {
		display: none !important;
	}
}

@media screen and (max-width: 320px) {
	.v320 {
		display: block !important;
	}

	.v320_none {
		display: none !important;
	}
}

/* width */
.w33p {
	width: 33%;
}

.w50p {
	width: 50%;
}

.w66p {
	width: 66%;
}

.w100p {
	width: 100%;
}

.w-auto {
	width: auto;
}

/* btn */
.btn-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--font-body5-size) var(--font-body4-size);
	margin-top: 2.5rem;
}

.btn-group.btn-wrap {
	flex-wrap: wrap;
}

.btn-group.btn-left {
	justify-content: flex-start;
}

.btn-group.btn-group-full .btn {
	flex: 1 1 100%;
}

.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	height: 3.25rem;
	padding: 0 2rem;
	font-size: var(--font-body3-size);
	font-weight: 700;
	letter-spacing: -0.35px;
	border-radius: 6rem;
	box-sizing: border-box;
	border: 1px solid var(--color-black);
	background-color: var(--color-white);
	color: var(--color-black);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-lg {
	height: 3.5rem;
}

.btn-xl {
	height: 5.5rem;
	padding: 0 2.5rem;
	font-size: var(--font-title3-size);
}

.btn-spad {
	padding: 0 1rem;
}

.btn-nrd {
	border-radius: 0.5rem;
}

.btn.w-auto {
	width: auto;
}

.btn.w100p {
	width: 100%;
}

.btn.w50p {
	width: calc(50% - calc(var(--font-body3-size) / 2));
}

.btn.w180 {
	width: 100%;
	max-width: 11.25rem;
}

.btn.w208 {
	width: 100%;
	max-width: 13rem;
}

.btn.w224 {
	width: 100%;
	max-width: 14rem;
	padding: 0 1.5rem;
}

.btn.btn-circle {
	aspect-ratio: 1 / 1;
	padding: 0.5rem;
	border-radius: 100%;
}

.btn.btn-transparent {
	background-color: transparent;
}

.btn.btn-black {
	background-color: var(--color-black);
	color: var(--color-white);
}

.btn.btn-white {
	border: 1px solid var(--color-white);
	background-color: transparent;
	color: var(--color-white);
}

.btn.btn-point1 {
	border: 1px solid var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.btn.btn-point2 {
	border: 1px solid var(--color-secondary);
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.btn.btn-gray {
	border: 1px solid var(--color-gray-500);
	background-color: var(--color-gray-500);
	color: var(--color-white);
}

.btn.btn-lightgray {
	border: 1px solid var(--color-gray-100);
	background-color: var(--color-gray-100);
	color: var(--color-white);
}

.btn[class*="hover-"]:hover {
	transition: all 0.1s ease;
}

.btn.hover-point1:hover {
	border: 1px solid var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.btn.hover-black:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.btn.hover-white:hover {
	border: 1px solid var(--color-white);
	background-color: var(--color-white);
	color: var(--color-black);
}

.btn.hover-point2:hover {
	border: 1px solid var(--color-secondary);
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.btn.hover-gray:hover {
	border: 1px solid var(--color-gray-500);
	background-color: var(--color-gray-500);
	color: var(--color-white);
}

.btn[class*="hover-"]:hover i,
.btn[class*="hover-"]:hover i:before {
	background-color: var(--color-white);
}

.btn.hover-white:hover i,
.btn.hover-white:hover i:before {
	background-color: var(--color-black);
}

.btn:not(.btn-circle) i {
	margin-left: 0.5rem;
}

@media screen and (max-width:800px) {
	.btn-group {
		margin-top: 2rem;
	}

	.btn {
		height: 2.875rem;
	}

	.btn-lg {
		height: 3.5rem;
	}

	.btn-xl {
		height: 4.5rem;
	}

	.btn.w208 {
		max-width: calc(50% - (var(--font-body4-size)/1.8));
		/* width: 13rem; */
	}

	.btn.w180 {
		max-width: calc(50% - (var(--font-body4-size)/1.8));
		/* width: 13rem; */
	}

	.btn.w224 {
		max-width: 100%;
		/* width: 13rem; */
	}

	.btn-group.btn-group-full {
		flex-wrap: wrap;
	}

	.btn:not(.btn-circle) i {
		margin-left: 0.325rem;
	}
}

/* checkbox */
.checkbox, .radio {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	margin-right: 1rem;
	white-space: normal;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: var(--color-gray-900);
	word-break: keep-all;
	word-wrap: break-word
}

.checkbox:has(:focus-visible), .radio:has(:focus-visible) {
	outline: 1px dashed
}

.checkbox__label, .radio__label {
	position: relative;
	padding: .125rem 0;
	padding-left: 1.625rem;
	vertical-align: middle;
	-webkit-transition: color .3s;
	transition: color .3s;
	font-size: var(--font-body3-size);
	font-weight: 400;
	line-height: 1.5;
	font-weight: 400
}

@media(min-width: 48em) {
	.checkbox__label, .radio__label {
		font-size: .9375rem
	}
}

@media(min-width: 80em) {
	.checkbox__label, .radio__label {
		font-size: var(--font-body2-size);
	}
}

.checkbox__label.a11y, .radio__label.a11y {
	padding-left: 0
}

.checkbox__label::before, .checkbox__label::after, .radio__label::before, .radio__label::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	display: block;
	box-sizing: border-box;
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s
}

.checkbox__blind .checkbox__label, .checkbox__blind .radio__label, .radio__blind .checkbox__label, .radio__blind .radio__label {
	width: 1.25rem;
	height: 1.25rem;
	padding-left: 0
}

.checkbox:last-child, .radio:last-child {
	margin-right: 0
}

.checkbox [type=checkbox], .checkbox [type=radio], .radio [type=checkbox], .radio [type=radio] {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px
}

.checkbox [type=checkbox]+label::before, .checkbox [type=checkbox]+label::after, .checkbox [type=radio]+label::before, .checkbox [type=radio]+label::after, .radio [type=checkbox]+label::before, .radio [type=checkbox]+label::after, .radio [type=radio]+label::before, .radio [type=radio]+label::after {
	content: "";
	top: calc(50% - .625rem);
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	background: no-repeat center/contain;
	will-change: transform
}

.checkbox [type=checkbox]:focus+label, .checkbox [type=radio]:focus+label, .radio [type=checkbox]:focus+label, .radio [type=radio]:focus+label {
	outline: 1px dotted var(--grey50)
}

.checkbox [type=checkbox][disabled]+label, .checkbox [type=radio][disabled]+label, .radio [type=checkbox][disabled]+label, .radio [type=radio][disabled]+label {
	color: var(--color-disabled);
	cursor: not-allowed
}

.checkbox [type=checkbox][disabled]+label::before, .checkbox [type=radio][disabled]+label::before, .radio [type=checkbox][disabled]+label::before, .radio [type=radio][disabled]+label::before {
	opacity: .5
}

.checkbox [type=checkbox]+label::before, .radio [type=checkbox]+label::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgcng9IjMuNSIgZmlsbD0iI0ZBRkFGQSIgc3Ryb2tlPSIjREREREREIi8+Cjwvc3ZnPg==")
}

.checkbox [type=checkbox]+label::after, .radio [type=checkbox]+label::after {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iNCIgZmlsbD0iIzAwN0ZDMCIvPgo8cGF0aCBkPSJNMTMuOTA1OCA3LjMxNDU4TDguNTM1MDEgMTIuNjg1M0w2LjA5Mzc1IDEwLjI0NDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPgo8L3N2Zz4=")
}

.checkbox [type=checkbox]:checked+label::before, .radio [type=checkbox]:checked+label::before {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}

.checkbox [type=checkbox]:checked+label::after, .radio [type=checkbox]:checked+label::after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}

.checkbox [type=checkbox]:checked[disabled]+label::before, .radio [type=checkbox]:checked[disabled]+label::before {
	opacity: .5
}

.checkbox [type=radio]+label::before, .radio [type=radio]+label::before {
	border-radius: 50%;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTEiIGZpbGw9IiNGQUZBRkEiIHN0cm9rZT0iI0VFRUVFRSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==")
}

.checkbox [type=radio]+label::after, .radio [type=radio]+label::after {
	border-radius: 50%;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOS4yNSIgZmlsbD0iI0ZBRkFGQSIgc3Ryb2tlPSIjRUEzNDgzIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI1IiBmaWxsPSIjRUEzNDgzIi8+Cjwvc3ZnPg==")
}

.checkbox [type=radio]:checked+label::before, .radio [type=radio]:checked+label::before {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}

.checkbox [type=radio]:checked+label::after, .radio [type=radio]:checked+label::after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}

.checkbox [type=radio]:checked[disabled]+label::before, .radio [type=radio]:checked[disabled]+label::before {
	opacity: .5
}


/* Side Menu (top / quick)
---------------------*/
#sideMenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 50%;
	right: 0;
	width: 6rem;
	padding: 1rem 0;
	border-radius: 1rem 0 0 1rem;
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
	border-left: 1px solid var(--color-gray-200);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
	background-color: var(--color-white);
	transform: translateY(calc(-50% - 4.5rem));
	transition: right 0.3s ease;
	z-index: 900;

	&.active {
		right: -6rem;
	}

	.quick {
		a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 1rem 0;
			text-align: center;
			white-space: nowrap;

			i {
				margin-bottom: 0.25rem;
			}

			&:hover {
				color: var(--color-primary);

				i {
					background-color: var(--color-primary);
				}
			}
		}
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: calc(100% - 2rem);
		aspect-ratio: 1/1;
		margin-top: 0.5rem;
		padding: 0.5rem;

		&:after {
			position: absolute;
			left: 50%;
			bottom: 100%;
			width: 0.25rem;
			height: 0.25rem;
			border-radius: 100%;
			background-color: var(--color-gray-300);
			transform: translateX(-50%);
			content: '';
		}
	}

	.sideMenu-btn {
		position: absolute;
		top: 50%;
		right: 100%;
		width: 1.25rem;
		height: 3.5rem;
		border-radius: 1rem 0 0 1rem;
		border-top: 1px solid var(--color-gray-200);
		border-bottom: 1px solid var(--color-gray-200);
		border-left: 1px solid var(--color-gray-200);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
		background-color: var(--color-primary);
		transform: translateY(-50%);

		i {
			background-color: var(--color-white);

			&.ic-arrow-prev {
				display: none;
			}

			&.ic-plus {
				display: none;
			}

			&.ic-close {
				display: none;
			}
		}

		&.active {
			i {
				&.ic-arrow-next {
					display: none;
				}

				&.ic-arrow-prev {
					display: inline-block;
				}
			}
		}
	}
}

@media screen and (max-width: 800px) {
	#sideMenu {
		top: auto;
		bottom: 2rem;
		right: 1rem;
		padding: 0;
		border: none;
		background-color: transparent;
		box-shadow: none;
		transform: translateY(0);

		&.active {
			right: 1rem;
		}

		.quick {
			display: none;
			width: 100%;
			padding: 1rem 0;
			border-radius: 1rem;
			background-color: var(--color-white);
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);

			a {
				padding: 0.5rem 0;
			}
		}

		.top {
			width: 3rem;
			height: 3rem;
			margin-top: 0.5rem;
			margin-left: auto;
			border-radius: 100%;
			background-color: var(--color-white);
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);

			&:after {
				display: none;
			}
		}

		.sideMenu-btn {
			position: static;
			width: 3rem;
			height: 3rem;
			margin-top: 0.5rem;
			margin-left: auto;
			border-radius: 100%;
			background-color: var(--color-white);
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
			transform: translateY(0);

			i {
				background-color: var(--color-black);

				&.ic-arrow-next {
					display: none;
				}

				&.ic-arrow-prev {
					display: none;
				}

				&.ic-plus {
					display: inline-block;
				}
			}

			&.active {
				i {
					&.ic-arrow-prev {
						display: none;
					}

					&.ic-plus {
						display: none;
					}

					&.ic-close {
						display: inline-block;
					}
				}
			}
		}
	}
}

/* Header
------------------- */
.nav-up {
	transform: translateY(-100.1%);
	transition: transform 0.2s;
}

.nav-down {
	transition: transform 0.2s;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px solid var(--color-gray-200);
	z-index: 1000;
	opacity: 0;

	animation: show 0.4s ease-in-out forwards;
	animation-delay: 10.5s;

	&.active {
		animation-delay: 0.1s;
	}
	&:after {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: var(--hv);
		left: 0;
		width: 100%;
		height: calc(100vh - var(--hv));
		background-color: rgba(0, 0, 0, 0.15);
		z-index: -1;
		content:'';
		transition: opacity .3s ease;
	}

	.inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: calc(1760px + 2rem);
		height: var(--hv);
	}

	.util {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;

		.util_logout {
			display: flex;
			align-items: center;
			padding: 0.5rem 0.75rem;
			color: var(--color-primary);
			font-size: var(--font-body4-size);
			font-weight: 700;
			border: 1px solid var(--color-primary);
			border-radius: 1rem;

			i {
				margin-left: 0.25rem;
				background-color: var(--color-primary);
			}

			&:hover {
				color: var(--color-white);
				background-color: var(--color-primary);

				i {
					background-color: var(--color-white);
				}
			}
		}

		.util_all {
			width: 2.5rem;
			aspect-ratio: 1/1;
			background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9H38V11H2V9Z' fill='black'/%3E%3Cpath d='M2 19H38V21H2V19Z' fill='black'/%3E%3Cpath d='M2 29H38V31H2V29Z' fill='black'/%3E%3C/svg%3E%0A");
			background-repeat: no-repeat;
			background-size: cover;

			&.active {
				background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.97919 6.5646L33.435 32.0204L32.0208 33.4347L6.56498 7.97882L7.97919 6.5646Z' fill='black'/%3E%3Cpath d='M33.435 7.97867L7.97915 33.4345L6.56494 32.0203L32.0208 6.56445L33.435 7.97867Z' fill='black'/%3E%3C/svg%3E%0A");
			}
		}
	}
}

@media screen and (max-width: 800px) {
	header {
		.inner {
			.logo {
				width: 5rem;

				a {
					display: block;
					line-height: 1;
				}
			}
		}

		.util {
			gap: 0.75rem;

			.util_logout {
				padding: 0;
				border: none;
				border-radius: 0;

				i {
					width: 1.25rem;
					height: 1.25rem;
					margin-left: 0;
					background-color: var(--color-black);
				}

				&:hover {
					background-color: transparent;

					i {
						background-color: var(--color-black);
					}
				}
			}

			.util_all {
				width: 2rem;
			}
		}
	}
}

.gnb {
	position: absolute;
	display: none;
	line-height: 1.5;
	letter-spacing: -0.05em;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);

	&.active {
		&+.util {

			.util_pop,
			.util_sc {
				display: none;
			}
		}
	}
}

.gnb [data-link-preparing] {
	cursor: pointer
}

.gnb .d1 {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 4rem;
	word-break: keep-all;
	text-wrap: balance
}

.gnb .d1__link {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: calc(120px - 2rem);
	padding-inline: 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	-webkit-transition: color .3s;
	transition: color .3s
}

.header:has(.gnb .d1__link[target=_blank]:hover)::after {
	display: none !important
}

.gnb .d1__link:not(.d1__link--symbol)::before {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .1875rem;
	background-color: var(--color-primary);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
	will-change: transform
}

.gnb .d1__link span {
	display: block;
	text-align: center
}

@media(hover: hover)and (pointer: fine) {
	.gnb .d1__item:hover .d1__link, .gnb .d1__item:focus-visible .d1__link {
		color: var(--color-primary)
	}

	.gnb .d1__item:hover .d1__link::before, .gnb .d1__item:focus-visible .d1__link::before {
		-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
		transform: scaleX(1)
	}

	header:has(.gnb .d1__item:not(:last-child):hover),
	header:has(.gnb .d1__item:not(:last-child):focus-visible) {
		&::after {
			opacity: 1;
			visibility: visible;
		}
	}

	.gnb .d1__item:hover .d2, .gnb .d1__item:focus-visible .d2 {
		block-size: auto;
		block-size: calc-size(auto, size);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding-top: 1.5rem;
		padding-bottom: 2.3125rem
	}

	@starting-style {
		.gnb .d1__item:hover .d2, .gnb .d1__item:focus-visible .d2 {
			block-size: 0;
			padding-block: 0
		}
	}
}

.gnb .d2 {
	position: absolute;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	left: calc(50% - 50vw);
	top: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	block-size: 0;
	padding-inline: 5rem;
	padding-block: 0;
	gap: 1rem;
	width: 99.72vw;
	border-top: 1px solid var(--color-gray-200);
	/* box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.15); */
	background-color: var(--color-white);
	text-align: center;
	overflow-y: clip;
	-webkit-transition: block-size .5s, padding .5s;
	transition: block-size .5s, padding .5s;
	transition-behavior: allow-discrete;
}

.gnb .d2__link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: var(--color-gray-900);
	font-size: 1.125rem;
	text-align: center;
	font-weight: 600
}

.gnb .d2__link span {
	width: 10.25rem;
}

@media(hover: hover)and (pointer: fine) {
	.gnb .d2__link:hover, .gnb .d2__link:focus-visible {
		color: var(--color-primary)
	}
}

.gnb .d3 {
	position: static;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 1rem;
	gap: .5rem
}

.gnb .d3__link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-gray-700);
	font-weight: 400
}

@media(min-width: 48em) {
	.gnb .d3__link {
		font-size: .9375rem
	}
}

@media(min-width: 100em) {
	.gnb {
		position: absolute;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

		&.active {
			display: none;
		}
	}

	.gnb .d3__link {
		font-size: 1rem
	}
}

@media(hover: hover)and (pointer: fine) {
	.gnb .d3__link:hover, .gnb .d3__link:focus-visible {
		color: var(--color-primary);
		text-decoration: underline;
		text-underline-offset: .25em;
		text-decoration-thickness: 1px
	}
}


/* All-menu */
#allmenu {
	overflow-y: auto;
	display: none;
	position: fixed;
	top: var(--hv);
	left: 0;
	width: 100%;
	height: 100dvh;
	max-height: calc(100dvh - var(--hv));
	padding: 3.5rem 0;
	background-color: var(--color-bg2);
	z-index: 10000;
}

#allmenu.active {
	display: block;
}

#allmenu .d1 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.5rem;
	width: 100%;
	min-height: 35rem;
	max-width: calc(1760px + 2rem);
	margin: 0 auto;
	padding: 0 1rem;
}

#allmenu .d1__item {
	width: 100%;
	height: 100%;
	min-height: 24rem;
	padding: 0 2rem;
	border-radius: 1rem;
	background-color: var(--color-white);
	background-repeat: no-repeat;
	background-size: min(20vw, 17.75rem) auto;
	background-position: center bottom 1.5rem;

	&:nth-of-type(1) {
		background-image: url(/resource/images/common/allmenu_img-1.png);
	}

	&:nth-of-type(2) {
		background-image: url(/resource/images/common/allmenu_img-2.png);
	}

	&:nth-of-type(3) {
		background-image: url(/resource/images/common/allmenu_img-3.png);
	}

	&:nth-of-type(4) {
		background-image: url(/resource/images/common/allmenu_img-4.png);
	}

	&:nth-of-type(5) {
		position: relative;

		&:after {
			position: absolute;
			right: 0;
			bottom: -1.5rem;
			width: 11.125rem;
			height: 11.6875rem;
			background-image: url(/resource/images/common/allmenu_img-5.png);
			background-size: contain;
			content: '';
		}

	}
}

#allmenu .d1__link {
	display: block;
	padding: 1.5rem 0;
	font-family: 'KVHi', serif;
	font-size: var(--font-title4-size);
	font-weight: 700;
	word-break: keep-all;
}

#allmenu .d1__link:has(~.d2) {
	border-bottom: 1px solid var(--color-gray-300);
}

#allmenu .d2 {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	padding-block: 1.5rem;
}

#allmenu .d2__link {
	color: var(--gray-700);
	font-size: var(--font-body2-size);
}

#allmenu .d2__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#allmenu .d3 {
	/* display: none; */
}

#allmenu .d3__item {
	margin-bottom: 0.5rem;
}

#allmenu .d3__link {
	color: var(--color-gray-600);
	font-size: var(--font-body3-size);

	&:before {
		color: #D9D9D9;
		font-size: var(--font-body2-size);
		content: '• ';
	}
}

#allmenu .d1 a {
	word-break: keep-all;
	transition: color 0.2s ease;
}

#allmenu .d1 a:hover {
	color: var(--color-primary);
}

#allmenu .d2 a {
	word-break: keep-all;
	transition: color 0.2s ease;
}

#allmenu .d2 a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-position: under;
}

#allmenu .all-bottom {
	padding: 0 1rem;
}

.all-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: calc(1760px + 2rem);
	margin: 4rem auto 0;
	padding: 0 1rem;
}

.all-bottom .etc {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.all-bottom .etc a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--body4);
}

.all-bottom .etc .bar {
	width: 1.5px;
	height: 0.75rem;
	background-color: var(--color-gray-400);
}

@media screen and (max-width: 800px) {
	#allmenu {
		top: calc(var(--hv) + 1px);
		max-height: calc(100dvh - var(--hv) + 1px);
		padding: 1rem 0;
		background-color: var(--color-white);
		z-index: 10000;
	}

	#allmenu .d1 {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		max-width: 100%;
		min-height: 0;
		padding: 0;
	}

	#allmenu .d1__item {
		width: 100%;
		padding: 0;
		min-height: 0;
		border-radius: 0;
		background-image: none !important;
	}

	#allmenu .d1__item:nth-of-type(5):after {
		display: none;
	}

	#allmenu .d1__link {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0;
		padding: 1rem;
	}

	#allmenu .d1__link:has(~.d2) {
		border-bottom: 0;
	}

	#allmenu .d1__link:has(+ .d2)::after {
		content: '';
		display: block;
		min-width: 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
		margin-left: auto;
		background-image: url(/resource/images/icon/ic-dropDown.svg);
		background-size: contain;
		background-repeat: no-repeat;
		transform-origin: center;
		transition: transform 0.3s;
	}

	#allmenu .d1__link.active::after {
		transform: rotate(-180deg);
	}

	#allmenu .d2 {
		display: none;
		background-color: var(--color-gray-50);
	}

	#allmenu .d2__item {
		padding: 0 1rem;
	}

	#allmenu .d2__item+.d2__item {
		margin-top: 1.5rem;
	}

	#allmenu .all-bottom {
		/* display: none; */
	}
}

/* All-search */
.nav-down+form .all-sch {
	transform: translateY(0);
	transition: transform 0.2s;
}

.nav-up+form .all-sch {
	transform: translateY(calc(var(--hv) * -1));
	transition: transform 0.2s;
}

.all-sch {
	position: fixed;
	top: var(--hv);
	left: 0;
	display: none;
	justify-content: center;
	gap: 2rem;
	width: 100%;
	padding: 5rem 0;
	border-top: var(--color-gray-200) 1px solid;
	border-bottom: var(--color-gray-200) 1px solid;
	background-color: var(--color-white);
	z-index: 999;
}

/* .all-sch.active {
	display: flex;
} */
.all-sch .sch-box {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	border: 1px solid var(--color-gray-300);
	border-radius: 40px;
}

.all-sch .sch-box input {
	width: 100%;
	font-size: 1.125rem;
	border: none;
	outline: none;
}

.all-sch .sch-box button {
	flex-shrink: 0;
	width: 48px;
	aspect-ratio: 1/1;
	border-radius: 100%;
	background-color: var(--color-secondary);
}

.all-sch .sch-box button i.ic-search {
	background-color: var(--color-white);
}

@media screen and (max-width: 800px) {
	.all-sch {
		gap: 1rem;
		padding: 2rem 1rem;
	}
}

/* Footer
------------------- */
footer {
	position: relative;
	width: 100%;
	background-color: #232733;
	color: var(--color-white);
	border-top: 1px solid var(--color-gray-200);

	.bar {
		width: 1px;
		height: 0.5rem;
	}

	.fnb {
		.inner {
			display: flex;
		}

		.fm_site {
			display: inline-block;
			position: relative;
			margin-left: auto;
			margin-right: -1rem;
			border-left: 1px solid var(--color-gray-200);
			border-right: 1px solid var(--color-gray-200);
			z-index: 10;

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 1rem;
				height: 4.5rem;
				padding: 0 2rem;
			}

			.fm_list {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				padding-block: 1.5rem;
				text-align: center;
				border: 1px solid var(--color-gray-200);
				border-bottom: none;

				li {
					width: 100%;

					a {
						color: var(--color-gray-900);
					}
				}
			}
		}
	}

	.foot_bottom {
		padding: 2.5rem 0;
	}

	.f_logo {
		display: inline-block;
		margin-bottom: 2.25rem;
	}

	.fnb_list {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		position: absolute;
		top: 0;
		left: 50%;
		width: 100%;
		height: 4.5rem;
		max-width: calc(1600px + 2rem);
		padding: 0 1rem;
		transform: translateX(-50%);
		z-index: 9;

		li {
			&.bar {
				background-color: var(--color-gray-300);
			}

			a, button {
				color: var(--color-gray-900);

				&.c-point2 {
					color: var(--color-secondary);
				}
			}
		}
	}

	.f_info {
		display: flex;
		align-items: center;
		gap: 0.75rem;

		&+.f_info {
			margin-top: 0.75rem;
		}

		.bar {
			background-color: var(--color-gray-500);
		}

		p {
			display: flex;
			align-items: center;
			gap: 0.75rem;
		}
	}

	.f_copy {
		margin-top: 1.5rem;
	}
}

@media screen and (max-width: 600px) {
	footer {
		position: relative;
		width: 100%;
		background-color: #232733;
		color: var(--color-white);
		border-top: 1px solid var(--color-gray-200);

		.bar {
			width: 1px;
			height: 0.5rem;
		}

		.fnb {
			.inner {
				padding: 0;
			}

			.fm_site {
				width: 100%;
				margin-right: auto;

				button {
					justify-content: space-between;
					width: 100%;
					height: 3.5rem;
					padding: 0 1rem;
				}

				.fm_list {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					padding-block: 1.5rem;
					text-align: center;
					border: 1px solid var(--color-gray-200);
					border-bottom: none;

					li {
						width: 100%;

						a {
							color: var(--color-gray-900);
						}
					}
				}
			}
		}

		.f_logo {
			display: inline-block;
			width: 5rem;
			margin-bottom: 1.5rem;
		}

		.fnb_list {
			gap: 0.5rem;
			position: static;
			height: auto;
			max-width: 100%;
			margin-bottom: 1.5rem;
			padding: 0;
			transform: translateX(0);

			li {
				&.bar {
					background-color: var(--color-gray-600);
				}

				a, button {
					color: var(--color-gray-400);

					&.c-point2 {
						color: var(--color-white);
					}
				}
			}
		}

		.f_info {
			flex-wrap: wrap;

			.bar {
				background-color: var(--color-gray-600);
			}
		}

		.f_copy {
			margin-top: 2.5rem;
		}
	}
}

@media screen and (max-width: 480px) {
	footer {
		.bar {
			&.v480_none {
				&+p {
					width: 100%;
				}
			}
		}
	}
}


/* 전체 공통 이메일수집거부 팝업 */
.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	inset: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .25s ease, -webkit-transform .25s ease;
	transition: opacity .25s ease, -webkit-transform .25s ease;
	transition: opacity .25s ease, transform .25s ease;
	transition: opacity .25s ease, transform .25s ease, -webkit-transform .25s ease;
	border: 0
}

.popup:popover-open {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}

.popup:popover-open .popup__content {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}

.popup__content {
	width: 100%;
	max-height: calc(100% - 2.5rem);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 0;
	background: #fff;
	width: calc(100% - 32px);
	max-width: 70rem;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 1.25rem;
	z-index: 1;
	-webkit-transition: opacity .25s ease, -webkit-transform .25s ease;
	transition: opacity .25s ease, -webkit-transform .25s ease;
	transition: opacity .25s ease, transform .25s ease;
	transition: opacity .25s ease, transform .25s ease, -webkit-transform .25s ease;
	-webkit-transform: translateY(10%) scale(0.9);
	-ms-transform: translateY(10%) scale(0.9);
	transform: translateY(10%) scale(0.9);
	overflow: hidden
}

.popup__content-pad {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 4rem
}

.popup__close {
	position: absolute;
	right: 1rem;
	top: 1rem
}

@media(min-width: 64em) {
	.popup__close {
		right: 1.5rem;
		top: 1.5rem
	}
}

.popup--email .popup__content {
	padding: 0;
	max-width: 29rem;
	height: auto;
	letter-spacing: -1px
}

.popup--email .popup__content-pad {
	padding: 1.5rem 1rem
}

.popup--email .popup__title {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	font-weight: 700
}

@media(min-width: 80em) {
	.popup--email .popup__title {
		font-size: 1.25rem
	}
}

.popup--email .popup__desc {
	margin: 1rem 0 0;
	padding: 1.5rem 1rem;
	border-radius: 1rem;
	background-color: var(--color-bg2);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	word-break: break-all;
	text-align: center
}

@media(min-width: 80em) {
	.popup--email .popup__desc {
		font-size: 1.125rem
	}
}

@media(min-width: 64em) {
	.popup--email .popup__content {
		letter-spacing: -1.5px
	}

	.popup--email .popup__content-pad {
		padding: 1.5rem 1.5rem
	}

	.popup--email .popup__desc {
		margin: 1.5rem 0 0;
		padding: 2.5rem
	}
}

/* slide popup */
.popuparea {
	display: none;
}

.popuparea .mask_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0 20px;
	z-index: 20000;
	background-color: rgba(0, 0, 0, .75);
}

.popuparea .popup_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	max-height: none;
	transform: translate(-50%, -50%);
}

.popuparea .popup_box .popup_head {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.popuparea .popup_box .popup_head .swiper-pagination {
	display: inline-flex;
	align-items: center;
	position: static;
	width: auto;
	padding:1rem 1.25rem;
	color: var(--color-gray-300);
	font-size: var(--font-body4-size);
	border-radius: 6.25rem;
	background-color: var(--color-white);
}
.popuparea .popup_box .popup_head .swiper-pagination .swiper-pagination-current {
	width: 1.5rem;
	color: var(--color-primary);
	font-size: var(--font-body2-size);
	font-weight: 700;
}
.popuparea .popup_box .popup_head .swiper-pagination .swiper-pagination-total {
	width: 1.5rem;
	color: var(--color-gray-600);
	font-size: var(--font-body2-size);
}

.popuparea .popup_box .popup_head .close_btn {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.5rem auto;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.97919 6.5646L33.435 32.0204L32.0208 33.4347L6.56498 7.97882L7.97919 6.5646Z' fill='white'/%3E%3Cpath d='M33.435 7.97867L7.97915 33.4345L6.56494 32.0203L32.0208 6.56445L33.435 7.97867Z' fill='white'/%3E%3C/svg%3E%0A");
	transform: translateY(-50%);
}

.popuparea .popup_box .popup_con {
	/* max-width: 100%; */
	min-width: 22.5rem;
	margin:0 auto;
}

.popuparea .popup_box .popSlides {
	position: relative;
	width: 100%;
	padding:0 6rem; 
	/* box-sizing: content-box; */
}

.popuparea .popup_box .popSlides .swiper-slide {
	overflow: hidden;
	border-radius: 1.25rem;
	max-width: 22.5rem;
}

.popuparea .popup_box .popSlides img {
	width: 100%;
	aspect-ratio: 372/468;
	background-color: #ddd;
	object-fit: cover;
}

.popuparea .popup_box .popSlides .btn {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.popuparea .popup_box .popSlides .swiper-button {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background-repeat: no-repeat;
	background-size: cover;
}
.popuparea .popup_box .popSlides .swiper-button.left {
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M28.4611 3.24542L27.3573 2.1416L10.6424 18.8565L9.53857 19.9603L10.6424 21.0641L27.3573 37.8579L28.4611 36.6752L11.7462 19.9603L28.4611 3.24542Z' fill='%23fff'/%3E%3C/svg%3E");
}
.popuparea .popup_box .popSlides .swiper-button.right {
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M11.5389 3.24542L12.6427 2.1416L29.3576 18.8565L30.4614 19.9603L29.3576 21.0641L12.6427 37.8579L11.5389 36.6752L28.2538 19.9603L11.5389 3.24542Z' fill='white'/%3E%3C/svg%3E");
}
.popuparea .popup_box .popSlides .swiper-button:after {
	display: none;
}

.popuparea .popup_box:has(.swiper-container-initialized){
	opacity: 1;
	transition: opacity 0.5s;
}

.popuparea .popup_box:not(:has(.swiper-container-initialized)){
	opacity: 0;
}
.popuparea .popup_box .popup_foot {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}
.popuparea .popup_box .popup_foot .checkbox {
	color: var(--color-white);
}
@media screen and (max-width: 1280px) {
	.popuparea .popup_box .popSlides {
		padding:0 3.5rem; 
	}
}
@media screen and (max-width: 1024px) {
	.popuparea .popup_box:not(.swiper-container-initialized) a{
		max-width: 100%;
	}
	.popuparea .popup_box .popSlides .swiper-slide {
		max-width: 100%;
	}
}
@media screen and (max-width: 768px) {
	.popuparea .popup_box .popup_head {
		padding-top: 5rem;
		margin-bottom: 1.75rem;
	}
	.popuparea .popup_box .popup_head .close_btn {
		top: 0;
		right: 50%;
		width: 3rem;
		height: 3rem;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.4);
		background-size: 1.5rem auto;
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7227 17.3053L17.3085 18.7195L5.28766 6.69866L6.70188 5.28445L18.7227 17.3053Z' fill='white'/%3E%3Cpath d='M6.70188 18.7298L5.28766 17.3156L17.3085 5.29481L18.7227 6.70902L6.70188 18.7298Z' fill='white'/%3E%3C/svg%3E%0A");
		transform: translate(50%, 0);
	}
	.popuparea .popup_box .popup_con {
		max-width: calc(382px + 2rem) !important;
	}
}
@media screen and (max-width: 480px) {
	.popuparea .popup_box .popSlides {
		padding:0 1rem;
	}

	.popuparea .popup_box .popSlides .swiper-button {
		display: none;
	}
}