@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
		url('/fonts/GmarketSansBold.woff2') format('woff2'),
		url('/fonts/GmarketSansBold.woff') format('woff');
}

@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
		url('/fonts/GmarketSansMedium.woff2') format('woff2'),
		url('/fonts/GmarketSansMedium.woff') format('woff');
}

@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
		url('/fonts/GmarketSansLight.woff2') format('woff2'),
		url('/fonts/GmarketSansLight.woff') format('woff');
}

:root {
	--int: 1rem;
	--font-family-primary: 'Pretendard Variable', Pretendard, 'Malgun Gothic', '맑은 고딕', helvetica, 'Apple SD Gothic Neo', sans-serif;
	--font-family-pretendard: 'Pretendard Variable', Pretendard, sans-serif;
	--font-family-gmarketSans: 'Gmarket Sans', sans-serif;

	--color-primary: #5c00ff;
	--color-primary-hover: #5902f4;
	--color-required: #fa4335;
	--color-error: #fa4335;
	--color-invalid: #fa4335;
	--color-emphasize: #fa4335;

	--color-white: #ffffff;
	--color-black: #1e1f20;
	--color-gray-50: #f7f8fc;
	--color-gray-100: #E0E0E0;
	--color-gray-200: #dddddd;
	--color-gray-300: #D6D6D6;
	--color-gray-400: #c8c8c8;
	--color-gray-500: #b2b2b2;
	--color-gray-600: #8c8c8c;
	--color-gray-700: #808080;
	--color-gray-800: #666666;
	--color-gray-900: #3f3f3f;

	/* clamp (767/1023) */
	--text-size-small: 0.75rem;
	--text-size-primary: 1rem;
	--text-size-medium: 1.125rem;

	--font-clamp-50: clamp(0.75rem, 0.375rem + 0.781vw, 0.875rem);
	--font-clamp-100: clamp(0.875rem, 0.5rem + 0.781vw, 1rem);
	--font-clamp-200: clamp(1rem, 0.625rem + 0.781vw, 1.125rem);
	--font-clamp-300: clamp(1.125rem, 0.75rem + 0.781vw, 1.25rem);
	--font-clamp-400: clamp(1.25rem, 0.501rem + 1.563vw, 1.5rem);
	--font-clamp-500: clamp(0.875rem, 0.126rem + 1.563vw, 1.125rem);
	--font-clamp-700: clamp(1rem, 0.251rem + 1.563vw, 1.25rem);
	--font-clamp-800: clamp(1.5rem, -0.167rem + 3.39vw, 2rem);
	--font-clamp-900: clamp(1.875rem, -1.121rem + 6.25vw, 2.875rem);

	--padding-clamp-100: clamp(1rem, -0.498rem + 3.125vw, 1.5rem);
	--padding-clamp-200: clamp(1rem, -0.498rem + 3.125vw, 1.5rem);
	--padding-clamp-300: clamp(1.25rem, -0.997rem + 4.688vw, 2rem);
	--padding-clamp-400: clamp(1.5rem, -1.496rem + 6.25vw, 2.5rem);

	--border-color-primary: var(--color-primary);
	--border-color-secondary: var(--color-primary);
	--border-color-100: var(--color-gray-100);
	--border-color-200: var(--color-gray-200);
	--border-color-300: var(--color-gray-300);
	--border-color-400: var(--color-gray-400);
	--border-color-800: var(--color-gray-800);

	--bg-color-white: var(--color-white);
	--bg-color-primary: var(--color-primary);

	--surface-white: var(--color-white);
	--surface-primary: var(--color-primary);
	--surface-50: var(--color-gray-50);
	--surface-100: #f3f3ff;
	--surface-200: var(--color-gray-100);

	--rounded-minimum: .5rem;
	--rounded: 1rem;
	--rounded-full: 3.125rem;

	--button-height: 3.5rem;
	--button-padding: 1.5rem;
	--button-background-color: var(--color-primary);
	--button-color: var(--color-white);

	--input-height: 3.5rem;
	--input-padding: 1rem;
	--input-bg: var(--color-white);
	--input-color: var(--color-black);

	--font-page-title: var(--font-clamp-900);

	--box-shadow: rgba(30, 31, 32, .12) 0px 0.25rem 0.5rem 0px, rgba(30, 31, 32, .08) 0px 0.125rem 0.25rem 0px;

	@media (width >=calc(16.25rem - 1px)) {
		--device-space: 1rem;
	}

	@media (width >=calc(23.125rem - 1px)) {
		--device-space: clamp(1.25rem, -0.997rem + 4.688vw, 2rem);
	}
}

/*  */
html {
	--font-size: 81.25%;
	font-size: var(--font-size);
	font-family: var(--font-family-primary);
	color: var(--color-black);
	letter-spacing: -0.022em;
	height: calc(var(--vh, 1vh) * 100);

	@media (width >=calc(20rem - 1px)) {
		--font-size: 87.5%;
	}

	@media (width >=calc(23.125rem - 1px)) {
		--font-size: 100%;
	}
}

input,
select,
textarea,
button,
optgroup {
	font-family: var(--font-family-primary);
	color: var(--color-black);
}

input,
select,
textarea {
	border: 1px solid var(--border-color-100);
}

select {
	padding-right: 1rem;
}

input::placeholder,
textarea::placeholder {
	font-size: var(--font-clamp-100);
}

b {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

/* Focus */
:focus,
a:focus,
button {
	outline: none;
}

.input-check input:focus-visible+label,
.input-radio input:focus-visible+label,
:focus-visible,
[class*='--is-focused'] {
	outline: none;
	box-shadow: 0 0 0 2px #becff9;
}

/* image */
img {
	max-width: 100%;
	border: none;
}

picture img,
figure img {
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
}

/* display */
.display {
	display: block;

	&[class*='--inline-block'] {
		display: inline-block;
	}
}

/* grid */
.grid {
	--gutter: 1rem;
	--grid-gutter: clamp(2.5rem, -0.496rem + 6.25vw, 3.5rem) var(--gutter);

	display: flex;
	flex-direction: column;
	grid-column: auto;

	@media(width>=calc(48rem - 1px)) {
		display: grid;
	}

	grid-template-rows: repeat(var(--grid-rows, 1), 1fr);
	grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
	gap: var(--grid-gutter, var(--gutter));

	.grid__col-1 {
		grid-column: auto/span 1
	}

	.grid__col-2 {
		grid-column: auto/span 2
	}

	.grid__col-3 {
		grid-column: auto/span 3
	}

	.grid__col-4 {
		grid-column: auto/span 4
	}

	.grid__col-5 {
		grid-column: auto/span 5
	}

	.grid__col-6 {
		grid-column: auto/span 6
	}

	.grid__col-7 {
		grid-column: auto/span 7
	}

	.grid__col-8 {
		grid-column: auto/span 8
	}

	.grid__col-9 {
		grid-column: auto/span 9
	}

	.grid__col-10 {
		grid-column: auto/span 10
	}

	.grid__col-11 {
		grid-column: auto/span 11
	}

	.grid__col-12 {
		grid-column: auto/span 12
	}
}

/* flex */
.flex {
	display: flex;

	&[class*='--row'] {
		flex-direction: row;
	}

	&[class*='--row-reverse'] {
		flex-direction: row-reverse;
	}

	&[class*='--column'] {
		flex-direction: column;
	}

	&[class*='--colum-reverse'] {
		flex-direction: column-reverse;
	}

	&[class*='--wrap'] {
		flex-wrap: wrap;
	}

	&[class*='--nowrap'] {
		flex-wrap: nowrap;
	}

	&[class*='--justify-start'] {
		justify-content: flex-start;
	}

	&[class*='--justify-center'] {
		justify-content: center;
	}

	&[class*='--justify-end'] {
		justify-content: flex-end;
	}

	&[class*='--justify-between'] {
		justify-content: space-between;
	}

	&[class*='--align-start'] {
		align-items: flex-start;
	}

	&[class*='--align-center'] {
		align-items: center;
	}

	&[class*='--align-end'] {
		align-items: flex-end;
	}

	&[class*='--align-baseline'] {
		align-items: baseline;
	}
}

.flex-1 {
	flex: 1 0 0;
}

/* gap */
.gap {
	&[class*='--4'] {
		gap: .25rem;
	}

	&[class*='--8'] {
		gap: .5rem;
	}

	&[class*='--16'] {
		gap: 1rem;
	}

	&[class*='--24'] {
		gap: 1.5rem;
	}

	&[class*='--32'] {
		gap: 2rem;
	}
}

/* position */
.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

/* */
.hidden--mo {
	display: none;

	@media (width>=calc(48rem - 1px)) {
		display: inline-block;
	}
}

.hidden--pc {
	display: inline-block;

	@media (width>=calc(48rem - 1px)) {
		display: none;
	}
}

/* required */
.required {
	--size: 0.375rem;
	overflow: hidden;
	display: inline-block;
	position: relative;
	width: var(--size);
	height: var(--size);
	background-color: var(--color-required);
	font-size: inherit;
	vertical-align: top;
	text-indent: 100%;
	white-space: nowrap;
	border-radius: var(--size);
}

/* Ally */
.sr-a11y {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	clip: rect(1px, 1px, 1px, 1px);
}

/*  Scroll */
.no-scroll {
	overflow: hidden;
}

/*  hidden */
*[class][hidden],
.is-hidden {
	display: none;
}

/* Lazy load */
img[data-scr] {
	opacity: 0;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
}

.lazyload--loaded img[data-scr],
img[data-scr].lazyload--loaded {
	opacity: 1
}

.lazyload {
	position: relative;
	overflow: hidden;
}

.lazyload img {
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.lazyload.lazyload--loaded img,
.lazyload img.lazyload--loaded {
	height: auto;
}

/* wrap width */
.wrap--tiny {
	width: 100%;
	margin-right: auto;
	margin-left: auto;

	@media (width>=calc(48rem - 1px)) {
		max-width: 26.25rem;
	}
}

.wrap--narrow {
	width: 100%;
	margin-right: auto;
	margin-left: auto;

	@media (width>=calc(48rem - 1px)) {
		max-width: 40rem;
	}
}

.wrap--middle {
	max-width: 60rem;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.wrap--wide {
	max-width: 67.5rem;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

/* ellipsis */
.ellipsis {
	overflow: hidden;
	display: -webkit-box;
	white-space: normal;
	-webkit-box-orient: vertical;
	box-orient: vertical;

	&[class*='--1'] {
		-webkit-line-clamp: 1;
	}

	&[class*='--2'] {
		-webkit-line-clamp: 2;
	}

	&[class*='--3'] {
		-webkit-line-clamp: 3;
	}

	&[class*='--4'] {
		-webkit-line-clamp: 4;
	}
}

/* text emphasis */
.text-color-emphasis {
	color: var(--color-primary);
}

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

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

/* link */
.text-link {
	display: inline-block;
	border: 0;
	background: none transparent;
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-indent: 0;

	&[class*='--inner'] {
		display: inline-flex;
		align-items: center;
		position: relative;
		text-decoration: none;

		&::after {
			display: inline-block;
			width: 1.6rem;
			height: 1.6rem;
			background-image: url(/images/svg/ico-link-inner.svg);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 75%;
			content: '';
		}
	}

	&[class*='--xlarge'] {
		font-size: 1.125rem;
	}

	&[class*='--large'] {
		font-size: 1.0625rem;
	}

	&[class*='--small'] {
		font-size: 0.9375rem;
	}

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

/* button */
.button-set {
	display: flex;

	&[class*='--minimum'] {
		width: 100%;

		@media (width>=calc(48rem - 1px)) {
			max-width: 26.25rem;
			margin: 0 auto;
		}
	}

	&[class='--full'] {
		flex-direction: column;
	}
}

.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: var(--button-height);
	padding: 0 var(--button-padding);
	border: 0 none;
	background-color: var(--button-background-color);
	font-size: var(--font-size-18);
	color: var(--button-color);
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition: color .3s, background-color .3s, border .3s;

	&[class*='--large'] {
		height: 3.5rem;
		line-height: 3.5rem;
		padding: 0 1rem;
		font-size: 1rem;
		font-weight: 500;
	}

	&[class*='--medium'] {
		height: 3rem;
		line-height: 3rem;
		padding: 0 3rem;
		font-size: 1rem;
	}

	&[class*='--small'] {
		min-width: 3.125rem;
		height: 2rem;
		line-height: 2rem;
		padding: 0 1rem;
		font-size: 0.875rem;
	}

	&[class*='--tiny'] {
		height: 1.5rem;
		line-height: 1.5rem;
		padding: 0 .75rem;
		font-size: .75rem;
	}

	&[class*='--full'] {
		width: 100%;
	}

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

.button[class*='--secondary'] {
	border: 1px solid var(--color-primary);
	background-color: var(--surface-white);
	color: var(--color-primary);
}

.button[class*='--secondary']:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.button[class*='--outline'] {
	border: 2px solid var(--border-color-primary);
	background-color: transparent;
	color: var(--color-primary);

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

}

.button[class*='--gray'] {
	background-color: #e0e0e0;
	color: var(--color-white);
}

.button[class*='--square'] {
	min-width: initial;
	padding: 0;
	aspect-ratio: 1/1;
}

.button[class*='--rounded'] {
	border-radius: var(--rounded-minimum);
}

.button[class*="--rounded-full"] {
	border-radius: var(--rounded-full)
}

.button[disabled],
.button[disabled]:hover {
	background-color: #d0d8f4;
	cursor: default;
}

.btn-disabled,
.btn-disabled:hover {
	background-color: #d0d8f4;
	cursor: default;
}

/* ico button */
.ico-button {
	--size: 1.5rem;
	overflow: hidden;
	width: var(--size);
	height: var(--size);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem;
	text-indent: -99999em;

	&[class*='--search'] {
		background-image: url(/images/svg/ico-search.svg);
	}

	&[class*='--map'] {
		background-image: url(/images/svg/ico-place.svg);
	}

	&[class*='--calendar'] {
		background-image: url(/images/svg/ico-calendar.svg);
	}
}

/* label-title */
.label-title {
	display: block;
	line-height: 100%;
	margin-bottom: 0.8125rem;
	font-size: var(--font-clamp-200);
	color: var(--color-black);
	font-weight: 700;
	-webkit-text-transform: uppercase;
	text-transform: uppercase;
}

/* selectbox */
.select {
	display: inline-flex;
	position: relative;
	height: 3.5rem;

	&::after {
		position: absolute;
		top: 50%;
		right: var(--padding-clamp-100);
		width: 1.25rem;
		height: 1.25rem;
		background-image: url(/images/svg/chevron-down-black.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1rem;
		transform: translateY(-50%);
		content: '';
	}

	&[class*='--full'] {
		width: 100%;
	}

	&[class*='--h50'] {
		height: 3.125rem;
	}

	select {
		width: 100%;
		height: 100%;
		padding-top: 0.5rem;
		padding-right: 3.375rem;
		padding-bottom: .5rem;
		padding-left: var(--padding-clamp-100);
		border: 2px solid var(--border-color-100);
		background-color: var(--surface-white);
		font-size: var(--font-clamp-100);
		color: var(--color-black);
		font-weight: 600;
		border-radius: var(--rounded-minimum);

		&[disabled] {
			border: 1px solid var(--border-color-100);
			background-color: var(--surface-200);
		}
	}
}

/* input */
.input {
	height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--border-color-100);
	font-size: 0.875rem;
	color: var(--color-black);
	border-radius: var(--rounded-minimum);

	&:focus {
		outline: 3px solid #fa4335;
	}

	&[readonly] {
		outline: none;
		box-shadow: none;
	}

	&[class*='--numeric'] {
		-webkit-text-security: disc;
	}
}

/* input : checkbox */
.input-check {
	display: inline-flex;
	padding: .25rem 0;
}

.input-check~.input-check {
	margin-left: 1rem;
}

.input-check input[type='checkbox'] {
	position: absolute;
	clip: rect(1px 1px 1px 1px);
}

.input-check input[type='checkbox']+label {
	display: inline-flex;
	align-items: flex-start;
	column-gap: 0.5rem;
	position: relative;
	width: 100%;
	line-height: 1.25rem;
	font-size: inherit;
	cursor: pointer;
}

.input-check input[type='checkbox']+label::before,
.input-check input[type='checkbox']+label::after {
	box-sizing: border-box;
	content: '';
}

.input-check input[type='checkbox']+label::after {
	position: absolute;
	top: 0.375rem;
	left: 0.125rem;
	width: 0.4375rem;
	height: 0.75rem;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-50%);
}

.input-check input[type='checkbox']+label::before {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--surface-white);
	border: 2px solid var(--border-color-100);
	border-radius: 0.125rem;
	-webkit-transition: background-color .1s;
	transition: background-color .1s;
}

.input-check input[type='checkbox']+label i {
	font-style: normal;
}

.input-check input[type='checkbox']:checked+label::before {
	border-color: var(--border-color-primary);
	background-color: var(--color-primary);
}

.input-check input[type='checkbox']:checked+label::after {
	border-color: var(--color-white);
}

.input-check input[type='checkbox'][disabled]+label {
	cursor: default;
}

.input-check input[type='checkbox'][disabled]+label::before {
	background-color: #f6f6f6;
	border: 1px solid var(--border-color-300);
}

/* input : checkbox - single */
.input-check[class*='--single'] input[type='checkbox']+label {
	display: inline-block;
	padding-left: 0;
	font-size: 0;
}

/* input : checkbox - checkmark */
.input-check[class*='--checkmark'] input[type='checkbox']+label::after {
	border-color: transparent;
	border-color: var(--border-color-100);
}

.input-check[class*='--checkmark'] input[type='checkbox']+label::before {
	border-color: transparent;
}

.input-check[class*='--checkmark'] input[type='checkbox']:checked+label::after {
	border-color: var(--border-color-primary);
}

.input-check[class*='--checkmark'] input[type='checkbox']:checked+label::before {
	border-color: transparent;
	background-color: transparent;
}

/* textarea */
textarea {
	overflow: auto;
	width: 100%;
	min-height: 20rem;
	padding: var(--padding-clamp-100);
	border: 2px solid var(--border-color-100);
	border-radius: var(--rounded-minimum);
}

/* form field  */
.form-field {
	>[class*='__label'] {
		display: block;
		line-height: 100%;
		margin-bottom: 0.8125rem;
		font-size: var(--font-clamp-200);
		color: var(--color-black);
		font-weight: 700;
		-webkit-text-transform: uppercase;
		text-transform: uppercase;
	}

	>[class*='__box'] {
		position: relative;

		&~& {
			margin-top: 0.5rem;
		}
	}

	>[class*='__messege'] {
		display: none;
		margin-top: 0.25rem;
		font-size: var(--font-clamp-50);
		color: var(--color-error);

		.form-field--is-invalid & {
			display: block;
		}
	}

	>[class*='__text'] {
		margin-top: 0.25rem;
		font-size: 0.75rem;
		color: #949494;
	}
}

.form-field__buttons {
	--gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--gap);
	margin: 0 -0.25rem;

	.form-field__button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-basis: calc(50% - var(--gap));
		height: 3.125rem;
		padding: 0 var(--padding-clamp-100);
		margin: 0 0.25rem;
		border: 2px solid var(--border-color-100);
		background-color: var(--color-white);
		border-radius: var(--rounded-minimum);
		font-size: 0.875rem;
		color: var(--color-gray-800);
		font-weight: 600;
		letter-spacing: -0.04em;

		@media (width>=calc(48rem - 1px)) {
			flex-basis: calc(33.3333% - var(--gap));
		}

		i {
			width: 1.25rem;
			height: 1.25rem;
			background-image: url(/images/svg/ico-checkmark--off.svg);
			background-repeat: no-repeat;
			background-size: cover;
		}

		&[class*='--is-actived'] {
			border-color: var(--border-color-primary);
			color: var(--color-primary);

			i {
				background-image: url(/images/svg/ico-checkmark--on.svg);
			}
		}
	}
}

.form-field--is-invalid {

	.input-cover,
	input[type='number'],
	input[type='text'],
	input[type='password'],
	select {
		border-color: var(--color-error);
		-webkit-transform-origin: center center;
		transform-origin: center center;
	}
}

/* input type */
.input-cover {
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	padding-right: var(--padding-clamp-100);
	border: 2px solid var(--border-color-100);
	border-radius: var(--rounded-minimum);
	background-color: var(--input-bg);
}

.input-text {
	display: block;
	height: var(--input-height);
	padding: 0 var(--padding-clamp-100);
	border: 2px solid var(--border-color-100);
	background-color: var(--input-bg);
	font-size: var(--font-clamp-100);
	color: var(--input-color);
	font-weight: 600;
	border-radius: var(--rounded-minimum);

	.input-cover & {
		min-width: 1.25rem;
		padding: 0 0 0 var(--padding-clamp-100);
		border: 0;

		height: calc(3.5rem - 0.25rem);

		&[class*='--h50'] {
			height: calc(3.125rem - 0.25rem);
		}

		&:focus-visible {
			box-shadow: none;
		}
	}
}

.input-text[class*='--full'] {
	width: 100%;
}

.input-text[class*='--h50'] {
	height: 3.125rem;
}

.input-text[class*='--inline'] {
	display:inline;
}

/* form */
.form-personal-input {
	input[type='text'] {
		width: 2.5rem;
		padding: 0.5rem;
		text-align: center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23666'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.25rem auto;

		&::placeholder {
			color: transparent;
		}

		&:not(:placeholder-shown) {
			background-image: none;
		}
	}

	&::after {
		display: inline-flex;
		width: 7.5rem;
		height: var(--input-height);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23666'/%3E%3C/svg%3E");
		background-repeat: repeat-x;
		background-position: 0 center;
		background-size: 1.25rem auto;
		content: '';
	}
}

/* Slide */
.swiper-notification {
	position: absolute;
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
}

.display-slide {
	position: relative;

	.swiper-slide {
		height: auto;

		&>div {
			width: auto;
		}
	}
}

.swiper-paging {
	&[class*='--inside'] {
		position: absolute;
		z-index: 1;
		margin-bottom: 1rem;
	}

	&[class*='--outside'] {
		position: static;
		width: 100%;
		margin-top: 2.625em;
	}

	&[class*='--cycle'] button[type='button'] {
		--size: .875rem;
		--border-width: 1px;
		--margni-space: 0.25rem;
		width: var(--size);
		height: var(--size);
		margin: 0 var(--margni-space);
		border: var(--border-width) solid var(--border-color-100);
		background-color: transparent;
		opacity: 1;

		@media (width>=calc(64rem - 1px)) {
			--size: 1.125rem;
			--border-width: 2px;
			--margni-space: .5rem;
		}

		&.swiper-pagination-bullet-active {
			border-color: var(--border-color-primary);
			background: var(--color-primary);
		}
	}

	&[class*='--white'] button[type='button'] {
		background-color: var(--surface-white);
	}

	&[class*='--white'] button[type='button'].swiper-pagination-bullet-active {
		opacity: 1;
	}


	&[class*='--black'] button[type='button'] {
		background-color: var(--surface-white);
	}

	&[class*='--black'] button[type='button'].swiper-pagination-bullet-active {
		background: var(--color-gray-1);
	}

}

.navigation {
	z-index: 10;

	.swiper-button-next:after,
	.swiper-button-prev:after {
		content: none;
	}

	.navigation--next,
	.navigation--prev {
		margin-top: -2.25rem;
		background-image: none;
	}

	.navigation--next,
	.swiper-container-rtl .navigation--prev {
		right: 0;
		left: auto;
	}

	.navigation--prev,
	.swiper-container-rtl .navigation--next {
		left: 0;
		right: auto;
	}
}

/* 헤더 모바일 변경 시 */
.mobile-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
	height: 3.5rem;
	line-height: 3.5rem;
	padding: 0 var(--padding-clamp-100);
	border-bottom: 1px solid var(--border-color-100);
	background-color: var(--surface-white);

	@media (width>=calc(48rem - 1px)) {
		display: none;
	}

	[class*='__title'] {
		text-align: center;
	}

	[class*='__close'] {
		position: absolute;
		top: 50%;
		left: calc(var(--padding-clamp-100) - 0.75rem);
		padding: 0.75rem;
		transform: translateY(-50%);
	}

	&+main {
		padding: clamp(6.25rem, 0.258rem + 12.5vw, 8.25rem) 0;
	}
}

.layout-mobile-header--has {
	height: 100%;

	.layout-top-banner,
	#header,
	#footer {
		@media (width<=calc(48rem - 1px)) {
			display: none !important;
		}
	}

	.mobile-header {
		width: 100%;

		&+main {
			padding: 0;
		}
	}

	.article-header {
		@media (width<=calc(48rem - 1px)) {
			padding-top: 7rem;
		}
	}

	.article-contents {
		@media (width<=calc(48rem - 1px)) {
			padding-bottom: 0;
		}
	}

	.board-list-wrap {
		min-height: calc(var(--vh, 1vh)* 52);
		margin-bottom: 0;
	}
}

.layout-header-nav--hide {
	height: 100%;

	.header-nav {
		@media (width<=calc(48rem - 1px)) {
			display: none !important;
		}
	}
}

/* 탭 매뉴 공통 */
.tab-menu__container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	[class*='__list'] {
		display: flex;

		[class*='__button'] {
			flex: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
		}
	}
}

.tab-container {
	display: block;

	[class*='__content'] {
		display: none;

		&[class*='--is-actived'] {
			display: block;
		}
	}
}

/* 아코디언 공통 */
.accordion {
	display: block;

	.accordion__item {
		display: block;

		.accordion__content {
			display: none;
		}

		&[class*='--is-expanded'] {
			.accordion__content {
				display: block;
			}
		}
	}
}

/* 스크롤 */
.scrollbar-style {
	&::-webkit-scrollbar-track {
		border-radius: .625rem;
		background-color: #ffffff;
	}

	&::-webkit-scrollbar {
		width: 0.625rem;
		background-color: #b9b9b9;
		border-radius: 1.875rem;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 1.875rem;
		background-color: #b9b9b9;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	&::-webkit-scrollbar {
		width: 0.5rem;
	}

	&::-webkit-scrollbar-thumb {
		border: 1px solid #ffffff;
	}
}

/* 서비스 이용약관 */
.terms-allagree {
	.input-check {
		width: 100%;
		padding: 0;

		input[type='checkbox']+label {
			align-items: center;
			border: 2px solid var(--color-primary);
			height: 3.5rem;
			width: 100%;
			padding: 0 var(--padding-clamp-100);
			background-color: var(--surface-white);
			font-size: 1rem;
			color: var(--color-black);
			font-weight: 700;
			text-align: left;
			border-radius: var(--rounded-minimum);

			&::after {
				top: 1.375rem;
				left: calc(var(--padding-clamp-100) + 0.125rem);
			}
		}
	}
}

.terms-list {
	overflow: hidden;
	border: 2px solid var(--border-color-100);
	border-radius: var(--rounded-minimum);
	background-color: var(--surface-white);
	font-size: var(--font-clamp-100);

	summary {
		padding: 0.625rem 0;
		font-weight: 600;
		font-size: var(--font-clamp-100);
		list-style: none;

		[open] & {
			padding-bottom: 0;
		}

		.icon {
			display: flex;
			width: 1.5rem;
			height: 1.5rem;
			background-image: url(/images/svg/ico-expand_more.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 0.875rem;
			cursor: pointer;
			transform: rotate(180deg);

			[open] & {
				background-image: url(/images/svg/ico-expand_less.svg);
			}
		}

		&::-webkit-details-marker {
			display: none;
		}
	}

	.input-check {
		flex: 1 0 0;
	}

	a {
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(/images/svg/ico-more-plus.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 0.875rem;
	}

	[class*='__items'] {
		padding-bottom: 0.625rem;
		font-size: clamp(0.813rem, 0.625rem + 0.391vw, 0.875rem);
		color: var(--color-gray-600);
	}

	[class*='__box'] {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 2rem;
		padding: 0 var(--padding-clamp-100);
	}
}

/* 보안 키패드 */
#Securitykeypad {
	position: absolute;
	right: 0;
	z-index: 1;
	margin-top: 0.5rem;
	border: 2px solid var(--border-color-100);
	border-radius: var(--rounded-minimum);
	background-color: var(--surface-50);
	box-shadow: var(--box-shadow);

	.skeypad__close {
		position: absolute;
		top: 0.375rem;
		right: 0.5rem;
		width: 2rem;
		height: 2rem;
		background-image: url(/images/svg/ico-close.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.25rem;
	}

	.skeypad__button {
		font-size: 1rem;
		color: var(--color-black);
		font-weight: 600;

		&[class*='--number'] {
			height: 3rem;
			background-color: var(--surface-white);
			border-radius: calc(var(--rounded-minimum) / 2);
			aspect-ratio: auto 1 / 1;
		}

		&:is([class*='--shurffle'], &[class*='--delete']) {
			height: 3rem;
			border-radius: calc(var(--rounded-minimum) / 2);
			background-color: #e6e8ed;

		}

		&[class*='--shurffle'] {
			flex: 1;
			font-size: 0.875rem;
			color: var(--color-gray-800);
			aspect-ratio: auto 3 / 1;
		}

		&[class*='--delete'] {
			background-image: url(/images/svg/ico-delete.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 1.75rem;
			aspect-ratio: 1 / 1;
		}
	}

	.skeypad__header {
		padding: 0.75rem 1rem 0.25rem;
		font-size: 1rem;
	}

	.skeypad__body {
		padding: 0.25rem 1rem 1rem;

		.skeypad__number {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-column-gap: 0.25rem;
			grid-row-gap: 0.25rem;
		}
	}

	.skeypad__footer {
		display: flex;
		column-gap: 0.25rem;
		padding-top: 0.25rem;
	}
}

/* 대출 비교 - 공통 */
.comparison-navigation__button {
	width: 50%;
	flex: 1 0 0;

	&::before,
	&::after {
		width: 1.5rem;
		height: 1.5rem;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.375rem;
	}

	&[class*='--prev'] {
		&::before {
			margin-right: 0.5rem;
			background-image: url(/images/svg/ico-arrow-left.svg);
			content: '';
		}
	}

	&[class*='--next'] {
		&::after {
			margin-left: 0.5rem;
			background-image: url(/images/svg/ico-arrow-right.svg);
			content: '';
		}
	}
}

/* 대출 비교 - 선택 정보 */
.comparison-select-info {
	position: relative;
	padding: calc(var(--padding-clamp-100)) var(--padding-clamp-100);
	border: 2px solid var(--border-color-primary);
	background-color: var(--color-white);
	border-radius: var(--rounded-minimum);
	box-shadow: var(--box-shadow);

	h3 {
		position: relative;
		line-height: 1.5rem;
		padding-left: 1.875rem;
		font-size: 1rem;
		color: var(--color-black);

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 1.5rem;
			height: 1.5rem;
			background-image: url(/images/svg/ico-home.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 1.5rem;
			content: '';
		}
	}

	ul {
		margin-top: 0.75rem;

		li {
			position: relative;
			line-height: 1.3;
			padding-left: 0.5rem;
			font-size: 0.875rem;
			color: var(--color-gray-800);
			font-weight: 600;

			&::before {
				position: absolute;
				top: 0.5rem;
				left: 0;
				width: 3px;
				height: 3px;
				background-color: var(--color-gray-800);
				content: '';
			}

			strong {
				color: var(--color-primary);
				font-weight: 600;
			}

			&~& {
				margin-top: 0.25rem;
			}
		}
	}

	[class*='__close'] {
		position: absolute;
		top: var(--padding-clamp-100);
		right: var(--padding-clamp-100);
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(/images/svg/ico-close.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
}

/* 대출 비교 - 검색 */
.comparison-search {

	&[class*='--residential'] {
		column-gap: clamp(1.25rem, -6.989rem + 17.188vw, 4rem);

		[class*='__wrap'] {
			flex: 1 0 0;
			width: 100%;
		}

		[class*='__field'] {
			flex: 1 0 0;
			width: 100%;
		}

	}
}

.comparison-search__form {
	position: relative;

	.input-cover {
		padding-left: var(--padding-clamp-100);

		.input-text {
			padding-left: 0;
		}
	}

	label {
		overflow: hidden;
		width: 1.25rem;
		height: 1.25rem;
		background-image: url(/images/svg/ico-search.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.25rem;
		text-indent: -99999em;
	}

	.delete {
		overflow: hidden;
		display: block;
		position: relative;
		width: 1.125rem;
		height: 1.125rem;
		background-color: #f2f2f2;
		text-indent: -99999em;
		border-radius: 0.25rem;

		&::before,
		&::after {
			position: absolute;
			top: 0.1875rem;
			left: 0.5625rem;
			width: 0.0625rem;
			height: 0.6875rem;
			background-color: var(--color-gray-800);
			content: '';
		}

		&::before {
			transform: rotate(45deg);
		}

		&::after {
			transform: rotate(-45deg);
		}
	}
}

.comparison-search__input {
	border: 2px solid var(--border-color-primary);
	padding: 0 calc(var(--padding-clamp-100) * 2.3);
}

.comparison-search__auto {
	position: absolute;
	z-index: 1;
	width: 100%;
	background-color: var(--color-white);

	ul {
		padding: 1rem;

		li {
			font-size: var(--font-clamp-100);
			cursor: pointer;

			strong {
				color: var(--color-primary)
			}

			&~& {
				margin-top: 0.25rem;
			}
		}
	}
}

.comparison-search__direct {
	display: flex;
	padding: var(--padding-clamp-100) 0;

	p {
		flex: 1 0 0;
		margin-right: 0.5rem;
		font-size: 0.875rem;
		color: #b6b6b6;
	}

	button[type='button'] {
		margin-left: auto;
		height: 1.5rem;
		padding: 0 1.5rem;
		border: 2px solid var(--border-color-100);
		font-size: 0.75rem;
		color: #b6b6b6;
		border-radius: 1.5rem;

	}
}

.comparison-search__map {
	padding-top: 100%;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0 none;
	}
}

/* 대출 비교 - 공지 */
.comparison-notice {

	&[class*='--white'] {
		@media (width>=calc(48rem - 1px)) {
			padding: var(--padding-clamp-100);
			border: 1px solid var(--border-color-100);
			background-color: var(--surface-white);
			border-radius: var(--rounded-minimum);
		}
	}

	&[class*='--detail'] {
		margin-top: 3.5rem;
		padding: var(--padding-clamp-100);
		background-color: var(--surface-50);
		border-radius: var(--rounded-minimum);

		@media (width>=calc(48rem - 1px)) {
			padding: var(--padding-clamp-100);
			border: 1px solid var(--border-color-100);
		}
	}

	section {
		margin-top: 0.5rem;

		&~& {
			margin-top: 2rem;
		}
	}

	h3 {
		height: 1.25rem;
		line-height: 100%;
		font-size: var(--font-clamp-200);
		color: var(--color-gray-900);

		&:is(.ico-priority) {
			display: flex;
			align-items: center;
			position: relative;

			&::before {
				width: 1.25rem;
				height: 1.25rem;
				background-image: url(/images/svg/ico-priority.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				margin-right: 0.25rem;
				content: '';
			}
		}
	}

	h4 {
		font-size: 0.875rem;
		color: var(--color-gray-800);
	}

	p,
	ul {
		margin: 0.75rem 0;
		font-size: var(--font-clamp-50);
		color: var(--color-gray-600);

		li {
			position: relative;
			padding-left: 0.5rem;

			&::before {
				position: absolute;
				top: 0.5rem;
				left: 0;
				width: 3px;
				height: 3px;
				background-color: var(--color-gray-600);
				border-radius: 3px;
				content: '';

			}
		}
	}
}

/* 대출 비교 - 신청 정보 */
.comparison-text-result {
	text-align: center;
	line-height: 1.5;
	min-height: 3.125rem;
	padding: 0.8125rem 1rem;
	border: 2px solid var(--border-color-primary);
	background-color: var(--surface-white);
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--rounded-minimum);

	strong {
		color: var(--color-primary);
		font-weight: 700;
	}

	&[class*='--fill'] {
		border: 0 none;
		background-color: var(--surface-100);
	}
}

/* 대출 비교 - 시세 결과 */
.comparison-average-value {
	background-color: var(--surface-white);

	&[class*='--search'] {
		background-color: var(--surface-50);
	}

	.comparison-average-value__items {
		border: solid var(--border-color-100);
		border-width: 2px 0;

		li {
			height: clamp(2.875rem, 2.126rem + 1.563vw, 3.125rem);
			line-height: clamp(2.875rem, 2.126rem + 1.563vw, 3.125rem);
			padding: 0 var(--padding-clamp-100);
			font-size: 1rem;

			strong {
				font-size: 0.875rem;
				color: var(--color-gray-800);
				font-weight: 400;
			}

			span {
				display: flex;
				column-gap: 0.25rem;
				color: var(--color-black);
				font-weight: 600;

				em {
					color: var(--color-primary);
				}
			}

			&~& {
				border-top: 1px solid var(--border-color-100);
			}
		}
	}
}

/* 대출 비교 - 상품 조회 중 */
.comparison-check {
	#progressbar {
		position: relative;
		padding: clamp(10rem, -3.108rem + 27.344vw, 14.375rem) 0 0 clamp(10rem, -3.108rem + 27.344vw, 14.375rem);

		svg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	[class*='__list'] {
		display: flex;
		flex-direction: column;
		row-gap: 2rem;
		margin-top: 3rem;

		[class*='__item'] {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		[class*='__ico'] {
			flex-shrink: 0;
			margin-right: 1rem;
			position: relative;
			padding: 1.5rem 0 0 1.5rem;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		[class*='__info'] {
			display: flex;
			flex-direction: column;

			span {
				margin-bottom: 0.25rem;
				font-size: var(--font-clamp-100);
				color: #909091;
			}

			strong {
				font-size: var(--font-clamp-200);
				color: var(--color-black);
				font-weight: 700;
			}
		}
	}

	.comparison-check__button {
		margin-top: 3.5rem;
	}
}

/* 대출 비교 - 상품 아이템 */
.loan-item {
	position: relative;

	[class*='__type'] {
		display: block;
		margin-bottom: 0.875rem;
		font-size: 0.875rem;
		color: var(--color-black);
		font-weight: 500;
	}

	[class*='__bank'] {
		margin-bottom: 1rem;

		i {
			display: flex;
			align-items: center;
			line-height: 100%;
			margin-bottom: 0.5rem;
			font-size: clamp(0.813rem, 0.625rem + 0.391vw, 0.875rem);
			color: #2a2a2a;
			font-weight: 500;
			font-style: normal;

			img {
				width: 1.5rem;
				height: 1.5rem;
				margin-right: 0.5rem;
			}
		}

		strong {
			line-height: 1.5rem;
			font-size: var(--font-clamp-700);
			font-weight: 700;
		}
	}

	[class*='__tag'] {
		margin-top: 0.5rem;

		i {
			--tag-bg-color: var(--bg-color-primary);
			--tag-color: var(--color-white);
			display: flex;
			align-items: center;
			height: 1.5rem;
			line-height: 1.25rem;
			padding: 0.25rem 0.375rem;
			background-color: var(--tag-bg-color);
			font-size: clamp(0.688rem, 0.5rem + 0.391vw, 0.75rem);
			color: var(--tag-color);
			font-style: normal;
			font-weight: 500;
			border-radius: calc(var(--rounded-minimum) / 2);
		}
	}

	[class*='__description'] {
		line-height: 100%;

		[class*='__rate'] {
			dd {
				gap: 0.5rem;
			}

			em {
				font-size: clamp(0.813rem, 0.625rem + 0.391vw, 0.875rem);
				color: var(--color-gray-600);

				&:is(.down) {
					color: #058cff;
				}

				&:is(.up) {
					color: #fa4335;
				}
			}

			strong {
				line-height: 100%;
				font-size: var(--font-clamp-200);
				color: var(--color-primary);
			}
		}

		[class*='__amount'] {
			gap: 0.5rem;

			dt {
				font-size: clamp(0.813rem, 0.625rem + 0.391vw, 0.875rem);
				color: var(--color-gray-600);
			}

			strong {
				line-height: 100%;
				font-size: var(--font-clamp-200);
				color: var(--color-black);
			}
		}
	}

	[class*='__more'] {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.25rem;
		font-size: 0.8125rem;
		color: var(--color-gray-600);
		font-weight: 500;

		&::after {
			display: inline-block;
			width: 0.4375rem;
			height: 0.4375rem;
			margin-left: 0.25rem;
			border: solid #2a2a2a;
			border-width: 1.5px 1.5px 0 0;
			opacity: .4;
			-webkit-transform: rotate(45deg) translateX(-0.125rem);
			transform: rotate(45deg) translateX(-0.125rem);
			content: '';
		}
	}

	&[class*='--card'] {
		padding: calc(var(--padding-clamp-100) + 0.5rem) var(--padding-clamp-300);
		background-color: var(--color-white);
		box-shadow: var(--box-shadow);
		border-radius: var(--rounded-minimum);

		[class*='__more'] {
			top: calc(var(--padding-clamp-100) + 0.5rem);
			right: var(--padding-clamp-100);
		}
	}

	&[class*='--detail'] {
		[class*='__bank'] {
			& i {
				margin-bottom: 1rem;
				font-size: var(--font-clamp-700);
				font-weight: 700;

				img {
					width: 1.75rem;
					height: 1.75rem;
					margin-right: 0.5rem;
				}
			}

			strong {
				line-height: 1.260869565217391;
				font-size: var(--font-clamp-900);
				font-weight: 500;
			}
		}

		.loan-item {
			@media (width>=calc(48rem - 1px)) {
				margin: 0 var(--device-space);
			}
		}

		[class*='__description'] {
			--gap-size: clamp(1.25rem, -0.623rem + 3.906vw, 1.875rem);
			position: relative;
			margin-top: 2rem;
			padding: var(--gap-size) 0;
			border: 2px solid var(--border-color-primary);
			background-color: var(--surface-white);
			border-radius: var(--rounded-minimum);

			&::after {
				position: absolute;
				top: var(--gap-size);
				bottom: var(--gap-size);
				left: 50%;
				width: 0;
				border-left: 2px solid var(--border-color-100);
				content: '';
			}

			dl {
				padding: 0 var(--padding-clamp-100);

				dt {
					line-height: 1.6875;
					font-size: var(--font-clamp-100);
					color: var(--color-gray-900);
					font-weight: 600;
				}

				dd {
					font-size: clamp(1.25rem, 0.875rem + 0.781vw, 1.375rem);
					color: var(--color-primary);
					font-weight: 700;
				}
			}
		}
	}
}

/* 대출 비교 - 상품 리스트 탭 */
.loan-list-tab {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	max-width: calc(30rem - 0.25rem);
	width: calc(100% - 0.25rem);
	margin: 0 auto 2.25rem;
	text-align: center;

	[class*='__list'] {
		display: flex;
		position: relative;
		width: 100%;
		height: 2.75rem;

		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(100% + 0.25rem);
			height: calc(100% + 0.25rem);
			background-color: #e2e2e8;
			border-radius: var(--rounded-minimum);
			transform: translate(-50%, -50%);
			content: '';
		}
	}

	[class*='__button'] {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color: transparent;
		font-size: 1rem;
		color: var(--color-black);
		font-weight: 500;
		border-radius: 0.375rem;

		&[class*='--is-active'] {
			background-color: var(--surface-white);
		}
	}
}

/* 대출 비교 - 상품 리스트 */
.loan-list {
	width: 100%;

	[class*='__items'] {
		display: flex;
		flex-direction: column;

		[class*='__item'] {
			&~& {
				margin-top: clamp(1.75rem, 2.499rem + -1.563vw, 1.5rem);
			}
		}
	}
}

/* 대출 비교 - 탭 메뉴 상세 */
.tab-menu__container {
	&[class*='--detail'] {
		[class*='__list'] {
			position: relative;
			margin-bottom: 2.5rem;
			width: 100%;

			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: var(--border-color-100);
				content: '';
			}

			[class*='__button'] {
				position: relative;
				height: 3.5rem;
				flex: 1 0 0;
				flex-shrink: 0;
				font-size: var(--font-clamp-200);
				color: var(--color-gray-600);
				font-weight: 600;

				&[class*='--is-active'] {
					color: var(--color-black);

					&::after {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 2px;
						background-color: var(--color-black);
						content: '';
					}
				}
			}
		}
	}
}

/* 대출 비교 - 상세 */
.loan-detail {
	margin-top: 3rem;
	margin-right: calc(var(--device-space) * -1);
	margin-left: calc(var(--device-space) * -1);
	padding: var(--padding-clamp-100) clamp(1.25rem, -0.997rem + 4.688vw, 2rem);
	background-color: var(--surface-white);

	@media (width>=calc(48rem - 1px)) {
		margin-right: 0;
		margin-left: 0;
		border-radius: var(--rounded-minimum);
	}

	[class*='__section'] {
		h3 {
			line-height: 1.5;
			font-size: var(--font-clamp-200);
			color: var(--color-black);

			&~& {
				margin-top: 2.5rem;
			}
		}

		ul {
			line-height: 1.6875;
			margin-top: 0.25rem;
			font-size: var(--font-clamp-100);
			color: var(--color-gray-600);

			li {
				position: relative;
				padding-left: 0.5rem;

				&::before {
					position: absolute;
					top: 10px;
					left: 0;
					width: 3px;
					height: 3px;
					background-color: var(--color-gray-600);
					border-radius: 3px;
					content: '';
				}
			}
		}
	}

	>[class*='__button'] {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 1rem var(--padding-clamp-100);
		background-color: var(--surface-white);
		text-align: center;

		@media (width>=calc(48rem - 1px)) {
			position: static;
			padding-top: 2.5rem;
			padding-bottom: 2.5rem;
		}
	}
}

/* 이용약관 및 서비스 관련 */
.agree-box {
	display: flex;
	flex-direction: column;
	row-gap: clamp(2.5rem, -1.994rem + 9.375vw, 4rem);
	line-height: 1.4;
	text-align: initial;

	.modal & {
		padding-right: 1.5rem;
	}

	.devide {
		border: 0;
		border-top: 1px solid var(--border-color-100);
	}

	h3 {
		margin-bottom: 1rem;
		font-size: clamp(1.125rem, 0.001rem + 2.344vw, 1.5rem);
		color: var(--color-black);
	}

	h2 {
		margin-bottom: .5rem;
		font-size: var(--font-clamp-500);
		color: var(--color-black);
	}


	:is(ul, ol, p, .table) {
		margin: 1rem 0;
		font-size: var(--font-clamp-100);
		color: var(--color-black);
	}

	li {
		position: relative;

		&~& {
			margin-top: 0.25rem;
		}

		ul & {
			padding-left: 1rem;
		}

		ul &::before {
			position: absolute;
			top: .5625rem;
			left: .25rem;
			width: .1875rem;
			height: .1875rem;
			background-color: var(--color-black);
			border-radius: .1875rem;
			content: '';
		}
	}

	.table {
		table {
			width: 100%;
			border-collapse: collapse;

			tbody {
				:is(th, td) {
					padding: 1rem;
					border: 1px solid var(--border-color-100);
				}

				th {
					text-align: initial;
				}
			}
		}
	}
}

.agree-box__select {
	gap: 1rem;
	margin-bottom: 2rem;

	strong {
		font-weight: 400;
	}
}

/* 게시판 */
.board-list-wrap {
	margin: clamp(2.125rem, -0.497rem + 5.469vw, 3rem) calc(var(--device-space) * -1);
	padding: 0 var(--device-space) calc(var(--device-space) * 3);
	background-color: var(--surface-white);

	&::before {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		height: 50%;
		background-color: var(--surface-white);
		content: '';
	}

	@media (width>=calc(48rem - 1px)) {
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
		padding: 0;
		background-color: transparent;

		&::before {
			content: none;
		}
	}
}

/* 게시판 검색 */
.board-search {
	margin-bottom: clamp(1rem, -0.498rem + 3.125vw, 1.5rem);
}

/* 게시판 카테고리 */
.board-category {
	display: block;

	a {
		display: inline-flex;
		align-items: center;
		line-height: clamp(2.125rem, 1.001rem + 2.344vw, 2.5rem);
		padding: 0 clamp(0.875rem, -0.249rem + 2.344vw, 1.25rem);
		border: 2px solid var(--border-color-100);
		background-color: var(--surface-white);
		font-size: var(--font-clamp-100);
		color: var(--color-gary-800);
		border-radius: var(--rounded-full);

		&[class*='--is-actived'] {
			border-color: var(--border-primary);
			background-color: var(--surface-primary);
			color: var(--color-white);
		}
	}
}

/* 게시판 리스트 */
.board-list {
	position: relative;
	z-index: 1;

	[class*='__items'] {
		border: solid var(--border-color-100);
		border-width: 0 0 1px;

		@media (width>=calc(48rem - 1px)) {
			border-color: var(--border-color-800);
			border-width: 2px 0;
		}

		[class*='--consultation '] & {
			margin-top: calc(var(--padding-clamp-300) * -1);
			border-top: 0 none;
		}

	}

	[class*='__item'] {
		&~& {
			border-top: 1px solid var(--border-color-100);

			@media (width>=calc(48rem - 1px)) {
				border-top-width: 2px;
			}

		}

		[class*='__link'] {
			display: flex;
			flex-direction: column;
			padding: var(--padding-clamp-300) 0;
		}

		[class*='__subject'] {
			.notice {
				color: var(--color-primary);
				font-weight: 700;
			}

			strong {
				font-size: var(--font-clamp-500);
				color: var(--color-black);
				font-weight: 500;
			}
		}

		[class*='__date'] {
			padding-top: 0.5rem;
			font-size: var(--font-clamp-50);
			color: var(--color-gray-600);
		}

		button[type='button'] {
			display: flex;
			width: 100%;
			padding: var(--padding-clamp-300) 0;
			text-align: left;

			&::after {
				width: 1.25rem;
				height: 1.25rem;
				margin: 0.1875rem 0 0 1rem;
				background-image: url(/images/svg/ico-expand_more.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 0.875rem;
				opacity: .9;
				content: '';
			}

			[class*='--is-expanded'] &::after {
				transform: rotate(180deg);
			}

			[class*='__subject'] {
				line-height: clamp(1.25rem, 0.126rem + 2.344vw, 1.625rem);

				strong {
					flex: 1 0 0;
					line-height: clamp(1.25rem, 0.126rem + 2.344vw, 1.625rem);
					font-size: var(--font-clamp-500);
					font-weight: 500;
					color: var(--color-black);
				}
			}
		}
	}
}

/* 게시판 쓰기 */
.board-wirte {
	padding-bottom: clamp(6.125rem, -5.485rem + 24.219vw, 10rem);

	@media (width>=calc(48rem - 1px)) {
		padding-bottom: 0;
	}
}

/* 게시판 읽기 */
.board-view {
	padding: clamp(4rem, -13.977rem + 37.5vw, 10rem) 0 clamp(6.125rem, -5.485rem + 24.219vw, 10rem);

	@media (width<=calc(48rem - 1px)) {
		padding-top: 7rem;
	}

	[class*='__title'] {
		line-height: clamp(1.75rem, 0.626rem + 2.344vw, 2.125rem);
		font-size: 1.5rem;
		color: var(--color-black);
		font-weight: 700;
	}

	[class*='__meta'] {
		margin-top: 0.875rem;
		font-size: 1rem;
		color: var(--color-gray-800);
		font-weight: 500;

		span {
			position: relative;

			&~& {
				margin-left: 1rem;
				padding-left: 1rem;

				&::before {
					position: absolute;
					top: 0.125rem;
					left: 0;
					width: 1px;
					height: 0.9375rem;
					background-color: #666666;
					content: '';
				}
			}
		}
	}

	[class*='__body'] {
		line-height: 1.6875;
		padding: 2.5rem 0 0;

		h3 {
			line-height: 1.375;
			margin: clamp(1.5rem, -1.496rem + 6.25vw, 2.5rem) 0;
			font-size: var(--font-clamp-700);
		}

		p {
			/* margin: clamp(1.5rem, -1.496rem + 6.25vw, 2.5rem) 0; */
			font-size: var(--font-clamp-100);
			color: var(--color-gary-800);
			font-weight: 500;

			&:nth-of-type(1) {
				margin-top: 0;
			}
		}
	}

	[class*='__answer'] {
		line-height: 1.6875;
		margin-top: 2.25rem;
		padding-top: 2.25rem;
		border-top: 1px solid var(--border-color-100);

		@media (width>=calc(48rem - 1px)) {
			padding: var(--padding-clamp-400);
			background-color: var(--surface-white);
			border-top: 0 none;
			border-radius: var(--rounded-minimum);
		}

		.answer__date {
			display: block;
			color: var(--color-primary);
			margin-bottom: 1rem;

		}

		.answer__text {
			p {
				font-size: var(--font-clamp-100);
				color: var(--color-gary-800);

				&~& {
					margin-top: 1.5rem;
				}
			}
		}
	}
}

.board-fuction {
	margin-top: clamp(3rem, -1.494rem + 9.375vw, 4.5rem);

	&[class*='--view'] {
		.button {
			flex: 1 0 0;

			@media (width>=calc(48rem - 1px)) {
				flex: 0;
				flex-basis: 10rem;
			}
		}
	}
}

/* 페이지 */
.pagination {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 1;
	margin-top: clamp(2.5rem, -3.492rem + 12.5vw, 4.5rem);
	font-weight: bold;

	.pagination__item {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		line-height: 100%;
		border: 1px solid var(--border-color-100);
		background-color: var(--surface-white);
		font-size: 0.875rem;
		color: #56595e;
		font-weight: 600;

		@media (width>=calc(48rem - 1px)) {
			min-width: 2.625rem;
			height: 2.625rem;
			font-size: 0.875rem;
		}

		&~& {
			border-left: 0 none;
		}

		&:first-child {
			border-top-left-radius: var(--rounded-minimum);
			border-bottom-left-radius: var(--rounded-minimum);
		}

		&:last-child {
			border-top-right-radius: var(--rounded-minimum);
			border-bottom-right-radius: var(--rounded-minimum);
		}

		&[class*='--current'] {
			border: 1px solid var(--border-primary);
			background-color: var(--color-primary);
			color: var(--color-white)
		}
	}

	.pagination__prev,
	.pagination__next {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		img {
			height: 1.5rem;
			width: 1.5rem;
			min-width: 1.5rem;
		}
	}

	.pagination__prev {
		margin-right: 0.25rem;
	}

	.pagination__next {
		margin-left: 0.25rem;
	}
}

/** **/
.tabs_wrap {
	ul {
		display:flex;
	}
	
	ul li{
		display: inline-block;
	    padding: 4px 20px;
	    border: 1px solid #ddd;
	    line-height: 25px;
	    font-size: 14px;
	    border-radius: 8px 8px 0 0;
	}
	
	ul li.on{
		background: #3396ff;
        color: white;
	}
}