@charset "UTF-8";
/* =================================================================================
* INFORMATION
* -----------------------------------------------------------------------
* @File Name: font.css
* @Create Date: 2023-05-22
* @Update Date: N/A
* @History: N/A
* @Description:
* ================================================================================= */
/* ====================== */
/* UI library */
/* ====================== */
 @import
	url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css')
	;

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------ㅋ
* @File Name: common.css
* @Description : 공통 레이아웃 정의
* @Create Date: 2023-05-22
* @Last Update Date: N/A
* @History: N/Af
* ====================================================================*/
:root {
	color-scheme: only light;
	/** 240513 수정 **/
	--gray-50: #f9fafb;
	--gray-100: #f2f4f6;
	--gray-200:#e5e8eb;
	--gray-300: #d1d6db;
	--gray-400: #b0b8c1;
	--gray-500: #8b95a1;
	--gray-600: #6b7684;
	--gray-700: #4e5968;
	--gray-800: #333d4b;
	--gray-900: #191f28;
	--gray-950: #060909;
	
	--inverse-gray-50:#0A0F10;
	--inverse-gray-100:#191F28;
	--inverse-gray-200:#262F3B;
	--inverse-gray-300:#333D4B;
	--inverse-gray-400:#4E5968;
	--inverse-gray-500:#6B7684;
	--inverse-gray-600:#8B95A1;
	--inverse-gray-700:#B0B8C1;
	--inverse-gray-800:#D1D6DB;
	--inverse-gray-900:#F2F4F6;
	
	--blue-50: #eaf3fe;
	--blue-100: #d6e9ff;
	--blue-150: #b8d8ff;
	--blue-200: #90c2ff;
	--blue-300: #64a8ff;
	--blue-400: #529eff;
	--blue-500: #3082f7;
	--blue-600: #1370f6;
	--blue-700: #0862e2;
	--blue-800: #064db1;
	--blue-900: #13377c;
	--red-100: #fbd0d3;
	--red-200: #f7979f;
	--red-500: #f04452;
	--red-800: #b30e1c;
	
	--content-main: var(--gray-800);
	--content-sub: var(--gray-600);
	--content-caption: var(--gray-500);
	--content-disabled: var(--gray-400);
	--content-error: var(--red-500);
	--content-success: #34c759;
	--content-accent: #ff5c48;
	--content-warning : #FBB322;
	
	--light-background: var(--white);
	--dark-background: var(--gray-950);
	--light-grey-background: var(--gray-100);
	--dark-grey-background: var(--gray-900);
	
	--bg-light-gray: var(--gray-50);
  --bg-gray-table: var(--gray-50);
  --bg-white: var(--white);
  --border-normal: var(--gray-100);
  --border-outline: var(--gray-200);
  --border-input: var(--gray-300);
  --border-focused: var(--gray-900);
  --primary-blue: var(--blue-500);
  --white: #ffffff;
  --black: #000000;
  --fontSizeSmall: 0.875rem;
  
  /* 14px */
  --logo-black: url(../images/common/logo_white.svg);
  --logo-white: url(../images/common/logo_white2.svg);

	--inverse-content-main: var(--white);
  --inverse-content-sub: var(--inverse-gray-700);
  --inverse-content-caption: var(--inverse-gray-500);
  --inverse-content-disabled: var(--inverse-gray-400);	
  
  --inverse-background-primary: var(--inverse-gray-50);
  --inverse-background-secondary:var(--inverse-gray-100);
  --inverse-background-tertiary:var(--inverse-gray-200);
}

/* responsive */
/*===================================================================
* INFORMATION
* -------------------------------------------------------------------ㅋ
* @File Name: common.css
* @Description : 공통 레이아웃 정의
* @Create Date: 2023-05-22
* @Last Update Date: N/A
* @History: N/A
* ====================================================================*/
/* ====================== */
/* UI Reset */
/* ====================== */
/* ===== Default ===== */
hr, caption {
	display: none;
}

dl, ul, ol, menu, li {
	list-style: none;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
	form, label, fieldset, legend, textarea, p, blockquote, th, td, input,
	select, textarea, button, figure {
	margin: 0;
	padding: 0;
}

.select-readonly {
	pointer-events: none;
}

html, body {
	font-size: 1rem;
	min-height: 100vh;
	-webkit-margin-start: 0;
	-webkit-padding-start: 0;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	background-color: var(--white);
	/*scroll-behavior:smooth; */
	word-break: keep-all;
	color: var(--content-main);
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	word-break: keep-all;
}

html, html *, html *::before, html *::after {
	font-family: Pretendard, 'Pretendard', -apple-system,
		'Apple SD Gothic Neo', AppleGothic, 'Malgun Gothic', '맑은 고딕', Dotum,
		돋움, sans-serif;
	font-size: 100%;
	color: inherit;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

a {
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a img {
	border: none;
}

address, caption, cite, code, dfn, em, th, var, i {
	font-style: normal;
	font-weight: normal;
}

b, strong {
	font-weight: 600;
}

a, button, input, textarea, select {
	-webkit-tap-highlight-color: transparent;
}

select, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
}

select {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

[disabled], [readonly], [-moz-readonly] {
	pointer-events: none;
	cursor: default;
	color: var(--content-disabled);
}

button, [type='button'], [role='button'], [role='tablist'] {
	pointer-events: all;
	cursor: pointer;
}

img {
	vertical-align: bottom;
	pointer-events: none;
}

::-moz-selection {
	background-color: rgba(122, 122, 122, 0.22);
}

::selection {
	background-color: rgba(122, 122, 122, 0.22);
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--content-main);
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
	box-shadow: 0 0 0px 1000px #fff inset;
	-webkit-transition: background-color 5000s ease-in-out 0s;
	transition: background-color 5000s ease-in-out 0s;
}

/* 접근성;본문 바로가기 */
.skip-navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 999;
}

.skip-navigation a {
	display: block;
	height: 0;
	width: 0;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}

.skip-navigation a:hover, .skip-navigation a:active, .skip-navigation a:focus
	{
	width: 100%;
	padding: 1rem 0;
	height: auto;
	font-weight: 500;
	color: var(--white);
	line-height: 1;
	text-align: center;
	background-color: var(--primary-blue);
	outline: none;
}



/* align */
.ta-left {
	text-align: left !important;
}

.ta-right {
	text-align: right !important;
}

.ta-center {
	text-align: center !important;
}

/* space */
.pd-0 {
	padding: 0;
}

.pd-t-0 {
	padding-top: 0 !important;
}

.pd-b-0 {
	padding-bottom: 0 !important;
}

.pd-l-0 {
	padding-left: 0 !important;
}

.pd-r-0 {
	padding-right: 0 !important;
}

.pd-lr-1 {
	padding: 0 1rem !important;
}

.pd-t-1 {
	padding-top: 1rem !important;
}

.pd-b-1 {
	padding-bottom: 1rem !important;
}

.mg-0 {
	margin: 0 !important;
}

.mg-0-auto {
	margin: 0 auto !important;
}

.mg-t-0 {
	margin-top: 0 !important;
}

.mg-b-0 {
	margin-bottom: 0 !important;
}

.mg-l-0 {
	margin-left: 0 !important;
}

.mg-r-0 {
	margin-right: 0 !important;
}

.mg-t1 {
	margin-top: 1rem !important;
}

.mg-b1 {
	margin-bottom: 1rem !important;
}

/* width */
.w-half {
	width: 50% !important;
}

.w-full {
	width: 100% !important;
}

.w-auto {
	width: auto !important;
}

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

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

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

.fw-700 {
	font-weight: 700 !important;
}

.fw-800 {
	font-weight: 800 !important;
}


/* font_color */

.fc-red {
	color: var(--content-error) !important;
}

.fc-blue {
	color: var(--primary-blue) !important;
}

.fc-blue:disabled {
	color: var(--blue-100) !important;
}

/* else */
.clear:after {
	content: '';
	display: block;
	clear: both;
}

.blind {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

sup {
	font-size: 0;
	position: relative;
}

sup:after {
	content: '*';
	color: var(--content-error);
	font-size: 14px;
	font-weight: 600;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

::-webkit-scrollbar {
	height: 0px;
	width: 2px;
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background: grey;
}

/* pc / mobile toggle */
[class*='only-m'] {
	display: none !important;
}

.only-pc {
	display: block !important;
}

.only-pc-inline-block {
	display: inline-block !important;
}

.only-pc-table {
	display: table !important;
}

@media only screen and (max-width: 767px) {
	[class*='only-pc'] {
		display: none !important;
	}
	.only-m {
		display: block !important;
	}
	.only-m-inline-block {
		display: inline-block !important;
	}
	.only-m-table {
		display: table !important;
	}
	.only-m-flex {
		display: flex !important;
	}
}

/* ===== datepicker ===== */
.ui-state-default, .ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default, .ui-button, .ui-button.ui-state-disabled:hover,
	.ui-button.ui-state-disabled:active {
	border: 0;
	color: inherit;
	background: none;
	-webkit-transition: 0.2s ease-in;
	transition: 0.2s ease-in;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
	.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus,
	.ui-button:hover, .ui-button:focus {
	border: 0;
	background: none;
}

.ui-datepicker-calendar .ui-state-hover {
	background: rgba(48, 130, 247, 0.1);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
	color: var(--white);
	background: var(--primary-blue);
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	width: 28px;
	height: 28px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: contain;
}

.ui-datepicker .ui-datepicker-prev {
	left: auto;
	right: 56px;
	background-image: url(/images/icon/chevron_left_blue.svg);
}

.ui-datepicker .ui-datepicker-next {
	right: 16px;
	background-image: url(/images/icon/chevron_right_blue.svg);
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span
	{
	display: none;
}

.ui-widget.ui-widget-content {
	z-index: 10 !important;
	border: 0;
	padding: 20px 16px;
	background: #fff;
	-webkit-box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 300px !important;
}

.ui-datepicker .ui-datepicker-header {
	padding: 0px;
	border: 0;
	border-radius: 0;
	background: none;
}

.ui-datepicker .ui-datepicker-title {
	margin: 0;
	font-size: 20px;
	text-align: left;
}

.ui-datepicker .ui-datepicker-buttonpane {
	padding: 20px 0 0;
	margin: 0;
	border: 0;
	gap: 0 10px;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.ui-datepicker .ui-datepicker-buttonpane button {
	font-family: Pretendard, 'Pretendard', -apple-system,
		'Apple SD Gothic Neo', AppleGothic, 'Malgun Gothic', '맑은 고딕', Dotum,
		돋움, sans-serif;
	font-weight: 500;
	margin: 0;
	padding: 0;
	flex: 1;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: right;
}

.ui-datepicker table {
	margin: 0;
}

.ui-datepicker th, .ui-datepicker td {
	padding: 0;
	line-height: 40px;
	color: var(--content-sub);
}

.ui-datepicker th {
	font-weight: normal;
	font-size: 12px;
}

.ui-datepicker td.ui-datepicker-beforeDay {
	color: var(--content-disabled);
}

.ui-datepicker td span, .ui-datepicker td a {
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	color: inherit;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.c-datepicker input, .c-datepicker input[disabled], .c-datepicker input[readonly]
	{
	cursor: pointer;
	pointer-events: all;
	padding-right: 3rem;
	background: #fff !important;
}

.c-datepicker input+i {
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/chevron_right_lightgray.svg);
	background-size: contain;
	pointer-events: none;
}

/* 구매자 보험 달력 css */
.c-datepickerIns input, .c-datepickerIns input[disabled],
	.c-datepickerIns input[readonly] {
	cursor: pointer;
	pointer-events: all;
	padding-right: 3rem;
	background: #fff !important;
}

.c-datepickerIns input+i {
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/chevron_right_lightgray.svg);
	background-size: contain;
	pointer-events: none;
}

/* 안심거래 달력 css */
.c-datepickerEs input, .c-datepickerEs input[disabled], .c-datepickerEs input[readonly]
	{
	cursor: pointer;
	pointer-events: all;
	padding-right: 3rem;
	background: #fff !important;
}

.c-datepickerEs input+i {
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/chevron_right_lightgray.svg);
	background-size: contain;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.ui-widget.ui-widget-content {
		position: fixed !important;
		left: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		height: max-content;
		-webkit-border-radius: 20px 20px 0 0;
		border-radius: 20px 20px 0 0;
	}
}

/* ===== Input ===== */
input[type='text'], input[type='tel'], input[type='email'], input[type='number'],
input[type='password'], input[type='button'], input[type='search'],
textarea {
	width: 100%;
	vertical-align: middle;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-weight: 500;
}

input[type='text'], input[type='tel'], input[type='email'], input[type='number'],
input[type='password'], input[type='search'], textarea {
	padding-left: 1rem;
	padding-right: 1rem;
	color: var(--content-main);
	-webkit-box-shadow: inset 0 0 0 1px var(--border-outline, #eaedf0);
	box-shadow: inset 0 0 0 1px var(--border-outline, #eaedf0);
}

input[type=text]:focus, input[type=text]:active, input[type=tel]:focus,
input[type=tel]:active, input[type=number]:focus, input[type=number]:active,
input[type=password]:focus, input[type=password]:active, input[type=search]:focus,
input[type=search]:active, input[type=email]:focus, input[type=email]:active
	/* textarea:focus,
textarea:active */ {
	outline: none;
	-webkit-box-shadow: inset 0 0 0 0.125rem var(--primary-blue) !important;
	box-shadow: inset 0 0 0 0.125rem var(--primary-blue) !important;
}

input[type='text']:hover, input[type='tel']:hover, input[type='email']:hover,
input[type='number']:hover, input[type='password']:hover, input[type='search']:hover,
textarea:hover {
	outline: none;
	-webkit-box-shadow: inset 0 0 0 0.125rem var(--gray-300);
	box-shadow: inset 0 0 0 0.125rem var(--gray-300);
}

input[disabled], textarea[disabled] {
	color: var(--content-disabled);
	background: var(--gray-100);
}

input[type='text'][-moz-readonly], input[type='tel'][-moz-readonly],
input[type='email'][-moz-readonly], input[type='number'][-moz-readonly],
input[type='password'][-moz-readonly], input[type='search'][-moz-readonly],
textarea[-moz-readonly] {
	background: var(--gray-100);
	color: var(--content-disabled);
}

input[type='text'][readonly], input[type='tel'][readonly], input[type='email'][readonly],
input[type='number'][readonly], input[type='password'][readonly], input[type='search'][readonly],
textarea[readonly] {
	background: var(--gray-100);
	color: var(--content-disabled, #919eab);
}

input[type='text'].sts-error, input[type='tel'].sts-error, input[type='email'].sts-error,
input[type='number'].sts-error, input[type='password'].sts-error, input[type='search'].sts-error,
textarea.sts-error {
	-webkit-box-shadow: inset 0 0 0 0.125rem var(--content-error);
	box-shadow: inset 0 0 0 0.125rem var(--content-error);
}

textarea {
	height: auto;
	-webkit-resize: none;
	resize: none;
}

textarea::-webkit-scrollbar {
	width: 0.3125rem;
	margin: 0.25rem;
}

textarea::-webkit-scrollbar-track {
	background: transparent;
}

textarea::-webkit-scrollbar-thumb {
	background: #ddd;
}

input::-webkit-input-placeholder, input::placeholder {
	font-size: inherit;
	color: var(--content-disabled);
	opacity: 1;
}

input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	margin: 0;
}

input[type='number'] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	-o-appearance: textfield;
	appearance: textfield;
}

/* color */
.color-caption {
	color: var(--content-caption);
}

.color-disabled {
	color: var(--content-disabled);
}

.color-positive {
	color: var(--content-success);
}

.color-negative {
	color: var(--content-error);
}

/* msg */
.c-msg {
	margin-top: 0.375rem;
	color: var(--content-sub);
}

.c-msg.positive {
	color: var(--content-success);
}

.c-msg.negative {
	color: var(--content-error);
}

/* input */
.c-input {
	position: relative;
}

.c-input [role='button'][readonly], .c-input [role='button'][disabled] {
	background: #fff;
}

.c-input.size-s input, .c-input.size-s textarea {
	font-size: 14px;
	line-height: 16px;
	padding-left: 16px;
	padding-right: 16px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.c-input.size-m input, .c-input.size-m textarea {
	font-size: 16px;
	line-height: 18px;
	padding-left: 18px;
	padding-right: 18px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.c-input.size-l input, .c-input.size-l textarea {
	font-size: 14px;
	line-height: 24px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.c-input.size-xl input, .c-input.size-xl textarea {
	font-size: 20px;
	line-height: 24px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.c-input textarea {
	padding: 1rem;
	height: auto;
}

.c-input input {
	position: relative;
	z-index: 0;
	color: var(--content-main);
}

.c-input.sts-error input:not([type='button']) {
	-webkit-box-shadow: inset 0 0 0 0.125rem var(--content-error) !important;
	box-shadow: inset 0 0 0 0.125rem var(--content-error) !important;
}

.c-input.sts-active input:not([type='button']) {
	padding-right: 3.25rem;
}

.c-input.sts-active input[type='password'] {
	padding-right: 90px;
}

.c-input.size-s input {
	height: 2.25rem;
	/* 36px */
}

.c-input.size-m input {
	height: 3rem;
	/* 48px */
}

.c-input.size-l input {
	height: 3.5rem;
	font-size: 16px;
	/* 56px */
}

.c-input.size-xl input {
	height: 4rem;
	/* 64px */
}

.c-input[class*='type-']:before {
	content: '';
	display: block;
	position: absolute;
	left: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	border: 0;
	background: url(../images/icon/search_gray.svg) no-repeat center;
	background-size: 100% auto;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	z-index: 1;
}

.c-input[class*='type-'] input {
	pointer-events: all;
	cursor: pointer;
	padding-left: 3rem;
}

.c-input[class*='type-'].size-s input {
	padding-left: 2.75rem;
}

.c-input[class*='type-'].size-s:before {
	width: 1rem;
	height: 1rem;
}

.c-input[class*='type-'].size-l input {
	padding-left: 3.25rem;
}

.c-input[class*='type-'].size-l:before {
	width: 1.5rem;
	height: 1.5rem;
}

.c-input.type-search:before {
	background: url(/images/icon/search_gray.svg) no-repeat center;
	background-size: 100% auto;
}

.c-input.type-range:before, .c-input.type-date:before {
	background: url(/images/icon/calendar_lightgray.svg) no-repeat center;
	background-size: 100% auto;
}

.c-input.type-range input[-moz-readonly], .c-input.type-date input[-moz-readonly] {
	background-color: var(--bg-white);
}

.c-input.type-range input[readonly], .c-input.type-date input[readonly] {
	background-color: var(--bg-white);
}

/* input + button */
.c-input input[readonly]+.btn-clear, .c-input input[disabled]+.btn-clear {
	display: none;
}

.c-input-set .c-btn {
	flex: none;
}

.c-input .btn-clear {
	opacity: 0;
	z-index: -1;
	position: absolute;
	right: 0;
	top: 0;
	width: 3.25rem;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	background: url(/images/x_circle_lightgray.svg) no-repeat;
	background-size: auto 1.25rem;
	background-position: calc(100% - 1rem) center;
}

.c-input.sts-error .btn-clear, .c-input.sts-active .btn-clear {
	opacity: 1;
	z-index: 1;
}

.c-input.size-s .btn-clear {
	background-size: auto 1rem;
}

.c-input.size-l .btn-clear {
	background-size: auto 1.5rem;
}

.c-input .btn-eye {
	opacity: 0;
	z-index: -1;
	position: absolute;
	right: 48px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: auto 2px;
	background-position: center;
}

.c-input.sts-error .btn-eye, .c-input.sts-active .btn-eye {
	opacity: 1;
	z-index: 1;
}

.c-input.size-s .btn-eye {
	background-size: auto 1rem;
}

.c-input.size-m .btn-eye {
	background-size: auto 1.5rem;
}

.c-input.size-l .btn-eye {
	background-size: auto 1.5rem;
}

.c-input .btn-eye[data-state='show'] {
	background-image: url(/images/icon/eye_show.svg);
}

.c-input .btn-eye[data-state='hide'] {
	background-image: url(/images/icon/eye_hide.svg);
}


/* c-btn-input */

.c-btn-input {
  width: 100%;
  position: relative;
  height: 56px;
  border-radius: 36px;
  padding: 8px;
  background-color: #fff;
  display: flex;
  gap:8px;
}
.c-btn-input:focus {
  border: 2px solid red
}

.c-btn-input > input[type='text'] {
  outline: none !important;
  box-shadow: none !important;
  font-weight: 600;
  font-size: 16px;
}
.c-btn-input > input[type=text]:focus {
   outline: none !important;
   box-shadow: none !important;
}

/* c-btn-input > button */


/* select */
.c-select {
	position: relative;
	display: inline-block;
}

.c-select select, .c-select .nice-select {
	position: relative;
	padding: 0 3rem 0 1rem;
	-webkit-box-shadow: inset 0 0 0 1px var(--border-outline, #eaedf0);
	box-shadow: inset 0 0 0 1px var(--border-outline, #eaedf0);
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
}

.c-select select {
	z-index: 1;
	height: 3rem;
	overflow: hidden;
	background: transparent;
}

.c-select .nice-select {
	clear: both;
	cursor: pointer;
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: 7.5rem;
	background-color: var(--white);
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.c-select .nice-select:after {
	content: '';
	position: absolute;
	z-index: 2;
	margin-top: -0.25rem;
	top: 50%;
	right: 1rem;
	-webkit-transform: rotate(90deg) translateY(-50%);
	transform: rotate(90deg) translateY(-50%);
	-webkit-transform-origin: 50% 22%;
	transform-origin: 50% 22%;
	width: 1rem;
	height: 1rem;
	pointer-events: none;
	background: url(../images/icon/chevron_right_lightgray.svg) no-repeat
		center;
	background-size: contain;
}

.c-select .nice-select:not(.open):hover {
	box-shadow: inset 0 0 0 2px var(--border-outline, #eaedf0);
}

.c-select.open .nice-select {
	box-shadow: inset 0 0 0 0.125rem var(--primary-blue) !important;
}

.c-select.open .nice-select:after {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.c-select.size-s select, .c-select.size-s .nice-select {
	height: 36px;
	line-height: 16px;
	padding: 10px 16px;
	font-size: 14px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.c-select.size-m select, .c-select.size-m .nice-select {
	height: 48px;
	line-height: 18px;
	padding: 14px 16px;
	font-size: 16px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.c-select.size-l select, .c-select.size-l .nice-select {
	height: 56px;
	line-height: 20px;
	padding: 18px 16px;
	font-size: 18px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.c-select.w-full select, .c-select.w-full .nice-select {
	width: 100%;
}

.c-select.sts-error select, .c-select.sts-error .nice-select {
	box-shadow: inset 0 0 0 0.125rem var(--content-error);
}

.c-select select[disabled], .c-select .nice-select[readonly='true'],
	.c-select .nice-select.disabled {
	cursor: none;
	pointer-events: none;
	color: var(--content-disabled);
	background: var(--gray-100);
}

.c-select .nice-select[readonly='true'] .current, .c-select .nice-select.disabled .current
	{
	color: var(--content-disabled);
}

.c-select .current {
	font-size: inherit;
	font-weight: 500;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}

.c-select .list-wrap {
	background-color: var(--bg-white);
	font-size: inherit;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 11;
	left: 0;
	top: 100%;
	margin-top: 10px;
	width: 100%;
	opacity: 0;
	-webkit-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: scale(0.75) translateY(-1.25rem);
	transform: scale(0.75) translateY(-1.25rem);
	-webkit-transition: opacity 0.2s cubic-bezier(0.5, 0, 0, 1.25);
	transition: opacity 0.2s cubic-bezier(0.5, 0, 0, 1.25);
}

.c-select .list-wrap .list__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 0.625rem;
	line-height: 1.4;
	color: var(--content-sub);
	font-size: inherit;
}

.c-select .list-wrap .list__text {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.c-select.open .list-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	-webkit-transform: scale(1) translateY(0);
	transform: scale(1) translateY(0);
}

.c-select.type1 .list-wrap .list__item, .c-select.type1 .list-wrap .list__label
	{
	line-height: 1.4;
	padding: 20px;
}

.c-select.type1 .list-wrap .list__label {
	font-size: 14px;
	padding-bottom: 8px;
	pointer-events: none;
}

.c-select.type1 .list-wrap .list__item:hover, .c-select.type1 .list-wrap .list__item.focus,
.c-select.type1 .list-wrap .list__item.selected {
	background-color: var(--bg-light-gray);
}

.c-select.type1 .list-wrap .list:hover .list__item:not(:hover) {
	background-color: transparent !important;
}

.c-select.type1 .list-wrap .list__item.selected {
	color: #202429;
	font-weight: 500;
}

.c-select.type1 .list-wrap .list__item.disabled {
	background-color: transparent;
	color: #999;
	cursor: default;
}

/* check, radio */
.c-check, .c-check2, .c-radio {
	display: inline-flex;
	position: relative;
	text-align: left;
	vertical-align: middle;
}

.c-check input, .c-check2 input, .c-radio input {
	display: none;
}

.c-check label, .c-check2 label, .c-radio label {
	display: inline-flex;
	word-break: break-word;
	align-items: center;
	gap: 0.625rem;
	color: var(--content-sub);
	font-weight: 500;
	cursor: pointer;
}

.c-check label i, .c-check2 label i, .c-radio label i {
	display: block;
	position: relative;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.c-check label i, .c-radio label i {
	-webkit-box-shadow: inset 0 0 0 0.125rem var(--gray-200);
	box-shadow: inset 0 0 0 0.125rem var(--gray-200);
}

.c-check input:hover+label i, .c-radio input:hover+label i {
	-webkit-box-shadow: inset 0 0 0 3px var(--gray-200);
	box-shadow: inset 0 0 0 3px var(--gray-200);
	background-color: var(--bg-light-gray);
}

.c-check input:checked+label i, .c-radio input:checked+label i {
	background-color: var(--primary-blue);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.c-check input[disabled]+label, .c-check2 input[disabled]+label,
	.c-radio input[disabled]+label {
	color: #cfd2d7;
}

.c-check input[disabled]+label i, .c-check2 input[disabled]+label i,
.c-radio input[disabled]+label i {
	-webkit-box-shadow: inset 0 0 0 0.125rem #cfd2d7;
	box-shadow: inset 0 0 0 0.125rem #cfd2d7;
}

.c-check input:checked[disabled]+label i, .c-radio input:checked[disabled]+label i
	{
	background-color: #a3b7ff;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.c-radio input:checked[disabled]+label i:before {
	background-color: var(--white);
}

/* radio */
.c-radio input {
	z-index: 10;
}

.c-radio label i {
	position: relative;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	-webkit-border-radius: 100%;
	border-radius: 100%;
}

.c-radio label i:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 0.375rem;
	height: 0.375rem;
	background-color: var(--white);
	-webkit-border-radius: 100%;
	border-radius: 100%;
}

.c-radio input:checked+label i:before {
	background-color: var(--white);
}

.c-radio input[disabled]+label i {
	background-color: var(--white);
}

.c-radio input:checked[disabled]+label {
	color: #cfd2d7;
}

/* check */
.c-check input {
	width: 100%;
	z-index: 2;
}

.c-check label {
	position: relative;
}

.c-check label i {
	width: 1.25rem;
	height: 1.25rem;
	background: transparent;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.c-check input:checked+label i {
	position: relative;
}

.c-check input:checked+label i:before {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/icon/c_check_white.svg) no-repeat center;
}

/* check */
.c-check2 input {
	width: 100%;
	z-index: 2;
}

.c-check2 label {
	position: relative;
}

.c-check2 label i {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.c-check2 label i:before {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/icon/c_check_lightgray.svg) no-repeat center;
	background-size: contain;
}

.c-check2 input:checked+label i:before {
	background-image: url(/images/icon/c_check_blue.svg);
}

.c-check2 input:checked[disabled]+label i {
	-webkit-box-shadow: inset 0 0 0 0.125rem #a3b7ff;
	box-shadow: inset 0 0 0 0.125rem #a3b7ff;
}

/* switch */
.c-switch {
	display: inline-flex;
	align-items: center;
	-moz-column-gap: 0.625rem;
	column-gap: 0.625rem;
	cursor: pointer;
}

.c-switch [type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	width: 3.25rem;
	height: 2rem;
	background: var(--bg-light-gray);
	border: 0;
	-webkit-border-radius: 6.25rem;
	border-radius: 6.25rem;
	cursor: pointer;
}

.c-switch [type='checkbox']::before {
	content: '';
	position: absolute;
	left: 0.125rem;
	top: 0.125rem;
	width: 1.75rem;
	height: 1.75rem;
	background-color: var(--bg-white);
	-webkit-transition: left 250ms linear;
	transition: left 250ms linear;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 1px 1px
		rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
	box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 1px 1px
		rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.c-switch [type='checkbox']:checked {
	background-color: var(--primary-blue);
}

.c-switch [type='checkbox']:checked::before {
	left: 1.375rem;
	background-color: white;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.c-switch [type='checkbox'][disabled] {
	background-color: var(--content-disabled);
}

.c-switch [type='checkbox'][disabled]:before {
	background-color: var(--bg-light-gray);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.c-switch [type='checkbox'][disabled]+span {
	color: var(--content-disabled);
}

/* c-input-set */
.c-input-set {
	position: relative;
	display: flex;
	gap: 0.5rem;
}

.c-input-set .c-input {
	flex: auto;
	width: auto;
}

.c-input-set .c-btn {
	flex: none;
}

.c-input-set.c-unit .input-text {
	color: var(--content-sub);
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.c-input-set.c-unit .c-input.size-s+.input-text {
	font-size: 14px;
}

.c-input-set.c-unit .c-input.size-m+.input-text {
	font-size: 16px;
}

.c-input-set.c-unit .c-input.size-l+.input-text {
	font-size: 18px;
}

.c-input-set.c-unit .c-input.size-xl+.input-text {
	font-size: 20px;
}

.c-input-set.c-unit .c-input.size-s .btn-clear {
	right: 25px;
}

.c-input-set.c-unit .c-input.size-m .btn-clear {
	right: 30px;
}

.c-input-set.c-unit .c-input.size-l .btn-clear, .c-input-set.c-unit .c-input.size-xl .btn-clear
	{
	right: 35px;
}

.c-input-set.c-unit .c-input.size-s input {
	padding-right: 70px;
}

.c-input-set.c-unit .c-input.size-m input {
	padding-right: 75px;
}

.c-input-set.c-unit .c-input.size-l input, .c-input-set.c-unit .c-input.size-xl input
	{
	/* padding-right: 85px; */
	padding: 6px 18px 6px 18px;
}

.c-input-set.c-phone {
	flex-wrap: wrap;
	align-items: center;
}

.c-input-set.c-phone .c-input {
	flex: 1;
}

.c-input-set.c-phone .c-btn {
	width: 100%;
}

/* 주민등록번호 */
.ssn {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.ssn .ssn__front {
	width: 40%;
	flex: auto;
}

.ssn .ssn__front .c-input {
	width: 100% !important;
}

.ssn .ssn__back {
	display: flex;
	align-items: center;
}

.ssn .ssn__back .c-input {
	width: 3rem !important;
}

.ssn .ssn__back .c-input input {
	padding: 1px 1rem 0;
	text-align: center;
}

.ssn .ssn__hyphen {
	display: inline-block;
	width: 0.75rem;
	height: 0.125rem;
	background-color: var(--gray-600);
}

.ssn .ssn__secret {
	display: inline-block;
	margin-left: 0.75rem;
	width: 0.5rem;
	height: 0.5rem;
	font-size: 0;
	text-indent: -9999px;
	-webkit-border-radius: 6.25rem;
	border-radius: 6.25rem;
	overflow: hidden;
	white-space: nowrap;
	background-color: var(--gray-800);
}

.ssn .ssn__secret+.ssn__secret {
	margin-left: 0.5rem;
}

@media only screen and (max-width: 767px) {
	/* phone */
	.c-input-set.c-phone {
		flex-wrap: wrap;
	}
	.c-input-set.c-phone>button {
		width: 100% !important;
	}
	.c-input-set.c-phone .c-input {
		flex: 1 1 0;
	}
	.c-input.size-l .btn-clear {
		background-size: auto 20px;
	}
}

@media only screen and (max-width: 320px) {
	/* phone */
	.c-input-set.c-phone {
		flex-direction: column;
	}
	.c-input-set.c-phone>* {
		width: 100% !important;
	}

	/* 주민등록번호 */
	.ssn .ssn__secret {
		display: none;
	}
}

/* ===== Btn ===== */
.button--wrap {
	font-size: 14px;
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background-color: var(--bg-white);
}

.button--wrap>.c-check {
	width: 100%;
	padding: 10px 0px;
}

.button--wrap>.btn-area>.c-btn {
	width: 100%;
	margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
	.button--wrap {
		position: fixed;
		padding: 0 16px;
	}
	.button--wrap>.c-check {
		width: 100%;
		padding: 10px 0px;
	}
	.button--wrap>.btn-area>.c-btn {
		width: 100%;
	}
}

.c-btn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	cursor: pointer;
	color: var(--content-sub);
	font-weight: 600;
	transition: all 0.1s ease-in;
}

.c-btn svg {
	margin-right: 0.5rem;
}

.c-btn[disabled] {
	pointer-events: none;
	color: var(--content-disabled);
}

.c-btn.modal__btn--flex {
	flex: 1;
}

.c-btn.size-auto {
	padding: 8px;
	line-height: 1.4;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.c-btn.size-xs {
	min-width: 45px;
	height: 26px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 14px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.c-btn.size-s {
	min-width: 64px;
	height: 36px;
	padding: 4px 14px;
	font-size: 15px;
	line-height: 16px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.c-btn.size-m {
	min-width: 75px;
	height: 48px;
	padding: 4px 14px;
	font-size: 16px;
	line-height: 16px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.c-btn.size-l {
	min-width: 86px;
	height: 56px;
	padding: 4px 14px;
	font-size: 16px;
	line-height: 18px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

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

.c-btn.black[disabled] {
	color: var(--bg-light-gray);
	background-color: var(--gray-400);
}

.c-btn.primary {
	color: var(--white);
	background-color: var(--primary-blue);
}

.c-btn.primary:hover {
	background-color: var(--blue-700);
}

.c-btn.primary.disabled, .c-btn.primary[disabled] {
	background-color: var(--blue-100);
}

.c-btn.line-primary {
	background-color: var(--bg-white);
	color: var(--primary-blue);
	-webkit-box-shadow: inset 0 0 0 1px var(--primary-blue);
	box-shadow: inset 0 0 0 1px var(--primary-blue);
}

.c-btn.line-primary:hover {
	background-color: var(--primary-blue);
	color: var(--white);
}

.c-btn.line-primary.disabled, .c-btn.line-primary[disabled] {
	-webkit-box-shadow: inset 0 0 0 1px var(--blue-100);
	box-shadow: inset 0 0 0 1px var(--blue-100);
	color: var(--blue-100);
}

.c-btn.secondary {
	background-color: var(--gray-100);
}

.c-btn.secondary:hover {
	background-color: var(--gray-200);
}

 .c-btn.tertiary {
  -webkit-box-shadow: inset 0 0 0 1px var(--border-input);
  box-shadow: inset 0 0 0 1px var(--border-input);
}

.c-btn.tertiary:hover {
  background-color: rgba(241, 244, 246, 0.5);
}
.c-btn.tertiary:hover {
	background-color: rgba(241, 244, 246, 0.5);
}

.c-btn.tertiary.disabled, .c-btn.tertiary[disabled] {
	color: var(--gray-100);
}

.c-btn.red {
	color: var(--white);
	background-color: var(--content-error);
}

.c-btn.red:hover {
	background-color: var(--red-800);
}

.c-btn.red.disabled, .c-btn.red[disabled] {
	background-color: var(--red-100);
}

.c-btn.rounded {
  border-radius: 36px;
}

.c-btn .circle {
	pointer-events: none;
	position: absolute;
	z-index: 3;
	width: 1px;
	height: 1px;
	background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0.4));
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: ripple 0.5s ease-in;
	animation: ripple 0.5s ease-in;
}

.c-btn.trailing {
	padding-right: 2.75rem !important;
}

.c-btn.trailing:before {
	content: '';
	display: block;
	position: absolute;
	right: 0.75rem;
	top: 50%;
	width: 1.25rem;
	height: 1.25rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(/images/icon/chevron_right_black.svg) no-repeat center;
	background-size: contain;
}

.c-btn.trailing.sky:before {
	background-image: url(/images/icon/chevron_right_black.svg);
}

.c-btn.trailing.line-blue:before {
	background-image: url(/images/icon/chevron_right_blue.svg);
}

.c-btn.trailing.line-gray:before {
	background-image: url(/images/icon/chevron_right_black.svg);
}

.c-btn.trailing.size-s {
	padding-right: 2.5rem;
}

.c-btn.trailing.size-s:before {
	width: 1rem;
	height: 1rem;
}

.c-btn.trailing.size-l {
	padding-right: 3rem;
}

.c-btn.trailing.size-l:before {
	width: 1.5rem;
	height: 1.5rem;
}

.c-btn.icon:before {
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.c-btn.loader {
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
}

.c-btn.loader1 .load {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
}

.c-btn.loader1 .loader__spinner {
	display: block;
	-webkit-transform-origin: 0.625rem 0.625rem;
	transform-origin: 0.625rem 0.625rem;
	-webkit-animation: iLoad-animation 0.8s ease infinite;
	animation: iLoad-animation 0.8s ease infinite;
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
}

.c-btn.loader1 .loader__spinner:nth-child(1) {
	transform: rotate(0deg);
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

.c-btn.loader1 .loader__spinner:nth-child(2) {
	transform: rotate(45deg);
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.c-btn.loader1 .loader__spinner:nth-child(3) {
	transform: rotate(90deg);
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.c-btn.loader1 .loader__spinner:nth-child(4) {
	transform: rotate(135deg);
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.c-btn.loader1 .loader__spinner:nth-child(5) {
	transform: rotate(180deg);
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.c-btn.loader1 .loader__spinner:nth-child(6) {
	transform: rotate(225deg);
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.c-btn.loader1 .loader__spinner:nth-child(7) {
	transform: rotate(270deg);
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.c-btn.loader1 .loader__spinner:nth-child(8) {
	transform: rotate(315deg);
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.c-btn.loader1 .loader__spinner:after {
	content: '';
	display: block;
	position: absolute;
	top: 1px;
	left: 0.5625rem;
	width: 0.125rem;
	height: 0.3125rem;
	-webkit-border-radius: 1.25rem;
	border-radius: 1.25rem;
	background-color: var(--white);
}

.c-btn.loader1 .load.sky .load .loader__spinner:after {
	background-color: var(--gray-500);
}

.c-btn.loader1 .load.line-blue .load .loader__spinner:after {
	background-color: var(--primary-blue);
}

.c-btn.loader1 .load.line-gray .load .loader__spinner:after {
	background-color: var(--gray-500);
}

.c-btn.loader1.size-s .load {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

.c-btn.loader1.size-l .load {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.c-btn.loader2 .load {
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto;
	text-align: center;
}

.c-btn.loader2 .loader__spinner1, .c-btn.loader2 .loader__spinner2 {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	will-change: transform, opacity;
}

.c-btn.loader2 .loader__spin .loader__spinner1 {
	background-image: url(/images/spinner/i_spinner_bk.png);
}

.c-btn.loader2.size-xs .load {
	width: 0.75rem;
	height: 0.75rem;
}

.c-btn.loader2.size-s .load {
	width: 1rem;
	height: 1rem;
}

.c-btn.loader2.size-m .load {
	width: 1.125rem;
	height: 1.125rem;
}

.c-btn.loader2.size-l .load {
	width: 1.25rem;
	height: 1.25rem;
}

.c-btn.loader2 .loader__spinner1 {
	display: block;
	background-image: url(/images/spinner/i_spinner_bk.png);
	-webkit-animation: loader-spinner-animation 0.5s linear infinite;
	animation: loader-spinner-animation 0.5s linear infinite;
	will-change: transform, opacity;
}

.c-btn.loader2 .loader__spinner1.primary {
	background-image: url(/images/spinner/i_spinner.png);
}

.c-btn.loader2 .loader__spinner2 {
	opacity: 0;
	background-image: url(/images/spinner/i_spinner_fin_bk.svg);
}

.c-btn.loader2.primary .loader__spinner1 {
	background-image: url(/images/spinner/i_spinner.png);
}

.c-btn.loader2.primary .loader__spinner2 {
	background-image: url(/images/spinner/i_spinner_fin_wh.svg);
}

/* ===== Snackbar ===== */
.c-snackbar {
	visibility: hidden;
	display: flex;
	position: fixed;
	bottom: 82px;
	width: 328px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	padding: 12px;
	margin: 0 auto;
	background: rgba(32, 36, 41, 0.9);
	border-radius: 8px;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.22);
	transform-origin: center;
	animation-fill-mode: forwards; /* 애니메이션 종료 상태 유지 */
}

.c-snackbar p {
	color: var(--white);
	line-height: 16px;
	font-size: 14px;
	font-weight: 400;
}

.c-snackbar.sts-active {
	animation: snackbar-show 0.2s ease-out forwards, snackbar-hide 0.2s
		ease-in 1s forwards; /* 나타나고 사라지는 애니메이션 */
	visibility: visible; /* 애니메이션 동작 중 표시 */
}

.c-snackbar.theme-alert {
	padding-left: 3.5rem;
}

.c-snackbar.theme-alert:before {
	content: '';
	display: block;
	width: 1.375rem;
	height: 1.375rem;
	position: absolute;
	top: 50%;
	left: 1.063rem;
	bottom: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(/images/c_snackbar_alert.svg) no-repeat center;
	background-size: contain;
}

@media only screen and (max-width: 767px) {
	.c-snackbar {
		transform: none;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		width: 328px;
		left: calc(50% - 164px); 
		
	}
	.c-btn.size-l {
		min-width: 75px;
		height: 56px;
		padding: 16px;
		font-size: 16px;
		line-height: 16px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
}

/* ===== Tooltip ===== */
.c-tooltip {
	display: block;
	position: relative;
	z-index: 10;
	padding: 0.625rem;
	padding-right: 2.25rem;
	font-weight: 500;
	font-size: 14px;
	color: var(--white);
	background-color: var(--gray-800);
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-box-shadow: 0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.2);
}

.c-tooltip:before {
	content: '';
	display: block;
	position: absolute;
	width: 1.125rem;
	height: 0.75rem;
	background: url(/images/c_tooltip.svg) no-repeat center bottom;
	background-size: contain;
}

.c-tooltip>.btn-close {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	width: 1rem;
	height: 1rem;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	background: url(/images/icon/x_white.svg) no-repeat center;
	background-size: contain;
}

.c-tooltip.pos-bottom:before {
	top: -0.75rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.c-tooltip.pos-top:before {
	bottom: -11px;
	left: 50%;
	-webkit-transform: translateX(-50%) rotate(180deg);
	transform: translateX(-50%) rotate(180deg);
}

.c-tooltip.pos-right:before {
	left: -0.875rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(-90deg);
	transform: translateY(-50%) rotate(-90deg);
}

.c-tooltip.pos-left:before {
	right: -0.875rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
}

.c-tooltip__wrap {
	position: relative;
	display: block;
}

.c-tooltip__wrap .btn-info .icon {
	width: 16px;
	height: 16px;
	vertical-align: -4px;
	margin-right: 4px;
}

.c-tooltip__wrap .c-tooltip {
	display: none;
	position: absolute;
	top: calc(100% + 1.063rem);
	left: 0;
}

/* ===== tip ===== */
.c-tip {
	position: relative;
	display: inline-block;
	cursor:pointer;
	text-align: left;
 width: fit-content;
}

.c-tip__icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(/images/icon/question-mark-circle.svg) no-repeat center;
	background-size: contain;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

.c-tip__content {
 display: none;
}

.bottom-sheet.c-tip {
 max-width: 740px;
 cursor: auto;
}

.bottom-sheet.c-tip > .bottom-sheet__content {
 overflow: scroll;
 padding-top: 8px; 
 height: 50%;
 padding: 0px 16px 20px;
}

.bottom-sheet .c-tip__btn {
  margin-top:0px;
  width: 100%;
}

/* ===== Skeleton ===== */
.c-skeleton{
  padding: 0 16px;
}
.skeleton-section{
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
}
.skeleton-section__contents {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-section__contents--box {
  background-color: var(--gray-200);
  border-radius: 4px;
  margin: 10px 0;
  background:linear-gradient(60.08834957747024deg, rgba(232, 232, 232,1) 19.091145833333332%,rgba(231, 231, 231,1) 19.091145833333332%,rgba(205, 205, 205,1) 68.59765625%,rgba(199, 199, 199,1) 80.65364583333333%);
  background-size: 400% 400%;
  animation: gradient 3s ease-in-out infinite;
}

@keyframes gradient {
    0% {
     background-position: 0% 50%;
    }
    50% {
     background-position: 100% 50%;
    }
    100% {
     background-position: 0% 50%;
    }
}

.skeleton-section__contents--grid-box {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 8px;

}

.skeleton-section__contents--list {
 display: flex;
 justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .skeleton-section__contents.head {
   display: flex;
   flex-direction: column-reverse;
   align-items: flex-start;
  }
  
  .skeleton-section__contents--box.moblie {
   width: 100% !important;
  }
}


/* ===== Chip ===== */
.c-chip {
	width: fit-content;
	font-size: 12px;
	font-weight: 500;
	padding: 6px;
	border-radius: 16px;
	white-space: nowrap;
}

.c-chip.primary {
	background-color: rgba(48, 130, 247, 0.1);
	color: var(--primary-blue);
}

.c-chip.secondary {
	color: var(--content-success);
	background-color: rgba(52, 199, 89, 0.1);
}

.c-chip.error {
  color: var(--content-error);
  background-color: rgba(255, 235, 238, 1);
}

.c-chip.normal {
 color:var(--content-caption);
 background-color: rgba(242, 244, 246, 1)
}

.c-chip.line {
 color: var(--inverse-content-main);
 border: 1px solid rgba(209, 214, 219, 0.5);
}

.c-chip.radius-s {
 border-radius: 4px;
 padding:2px 4px;
}

.c-chip.radius-m {
 border-radius: 16px;
}

/* c-chip select */

.c-chip.select {
  display: flex;
  gap:4px;
  position: relative;
  align-items: center;
  overflow: scroll;
  user-select: none;
}

.c-chip.select .c-chip__item {
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  color:var(--content-sub);
  z-index: 2; 
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;   
}

.c-chip.select .c-chip__item:hover {
  background: var(--gray-50);
}

.c-chip.select .c-chip__item.selected {
  color: var(--content-main);
  background-color: var(--gray-100);
}

/* ===== diveder =====  */

.c-divider {
 width: 100%;
 height: 1px;
 background-color: var(--border-normal);
}

.c-toggle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.c-toggle__list {
   display: flex;
   justify-content: center;
   border-radius: 56px;
   background-color: var(--inverse-gray-100);
   position: relative;
   align-items: center;
   z-index: 2
}

.c-toggle__indicator {
  position: absolute;
  border-radius:56px;
  left: 0;
  background-color: var(--inverse-gray-200);
  z-index: -1;
  transition: transform 0.3s ease, width 0.3s ease;
}

.c-toggle__item {
  display:flex;
  align-items:center; 
  padding: 13px 40px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--inverse-content-sub);
}

.c-toggle__item.is-active {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--inverse-content-main);
}
/* ===== Table ===== */
.btn-tls-more {
	width: 100%;
	border: 0;
	background-color: var(--white);
	font-weight: 500;
	font-size: 0.875rem;
	padding: 1.25rem 1.5rem;
	color: var(--content-main);
	position: sticky;
	left: 0;
}

.btn-tls-more:after {
	content: '';
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-left: 0.25rem;
	vertical-align: -0.1875rem;
	background: url(/images/icon/chevron_right_darkgray.svg) no-repeat
		center;
	background-size: contain;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* tls */
table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	text-align: left;
}

.tls {
	width: 100%;
	border: 1px solid var(--border-normal, #f1f4f6);
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-overflow-scrolling: touch;
	touch-action: auto;
}

.tls table {
	background-color: var(--white);
}

.tls caption {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.tls thead tr {
	border-bottom: 1px solid var(--gray-100, #e4e6e9);
}

.tls thead th {
	color: var(--content-sub);
	padding: 1rem 0;
	line-height: 18px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
}

.tls tbody tr:not(:last-child) {
	border-bottom: 1px solid var(--gray-100, var(--bg-light-gray));
}

.tls tbody th {
	padding: 1.125rem 1.5rem;
	vertical-align: top;
	font-size: 14px;
	line-height: 18px;
	color: var(--content-sub);
	white-space: nowrap;
	font-weight: 500;
}

.tls tbody td {
	padding: 16px 14px;
	text-align: center;
	vertical-align: top;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: var(--content-main);
}

/* tvs */
.tvs {
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	width: 100%;
	border: 1px solid var(--border-normal, #f1f4f6);
	-webkit-overflow-scrolling: touch;
	touch-action: auto;
	background-color: var(--white);
}

.tvs th {
	color: var(--content-sub);
	padding: 1rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	background-color: var(--bg-gray-table);
}

.tvs td {
	color: var(--content-main);
	padding: 1rem 1.5rem;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
}

.tvs tr {
	border-bottom: 1px solid var(--gray-100, #e4e6e9);
}

.tvs tr:last-child {
	border-bottom: 0;
}

@media only screen and (max-width: 960px) {
	.tls, .tvs {
		overflow-x: auto;
	}
	.tls tbody td {
		white-space: nowrap;
	}
	.tls-scroll, .tvs-scroll {
		/* width: 100%; */
		overflow-x: auto;
	}
	.tls-scroll .tls, .tvs-scroll .tvs {
		min-width: 100%;
		width: -moz-fit-content;
		width: fit-content;
	}
}

/* ===== Icon ===== */
.icon {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	width: 20px;
	height: 20px;
	vertical-align: -5px;
	font-size: 0;
	text-indent: -9999px;
}

.icon.i-warn {
	background-image: url(/images/alert_triangle_red.svg);
}

.icon.i-warn-line {
	background-image: url(/images/alert_linetriangle_blue.svg);
}

.icon.i-info-darkgray {
	background-image: url(/images/icon/info_circle_gray.svg);
}

.icon.i-info-lightgray {
	background-image: url(/images/icon/info_circle_lightgray.svg);
}

.icon.i-info-blue {
	background-image: url(/images/icon/info_circle_blue.svg);
}

.icon.i-down {
	background-image: url(/images/i_down.svg);
}

/* ===== source ===== */
.i-source {
	display: inline-block;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.i-source.nicednr {
	width: 46px;
	height: 46px;
	background-image: url(/images/service/nice_bluemark_new_logo.webp);
	background-size: contain;
}

.i-source.molit {
	width: 6.063rem;
	height: 1.688rem;
	background-image: url(/images/source/source_molit.png);
	background-size: contain;
}

.i-source.kidi {
	width: 5.625rem;
	height: 1.625rem;
	background-image: url(/images/source/source_kidi.png);
	background-size: contain;
}

.i-source.kotsa {
	width: 7.313rem;
	height: 1rem;
	background-image: url(/images/source/source_kotsa.png);
}

.i-source.recall {
	width: 6.75rem;
	height: 1.25rem;
	background-image: url(/images/source/source_recall.png);
}

.i-source ~ .i-source {
	margin-left: 0.25rem;
}

@media only screen and (max-width: 767px) {
	.icon {
		width: 16px;
		height: 16px;
		vertical-align: -3px;
	}
}

/* ===== Loading ===== */
#loading {
	position: fixed;
	z-index: 30000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.loader1 .load {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
}

.loader1 .loader__spinner {
	display: block;
	-webkit-transform-origin: 0.625rem 0.625rem;
	transform-origin: 0.625rem 0.625rem;
	-webkit-animation: iLoad-animation 0.8s ease infinite;
	animation: iLoad-animation 0.8s ease infinite;
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
}

.loader1 .loader__spinner:nth-child(1) {
	transform: rotate(0deg);
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

.loader1 .loader__spinner:nth-child(2) {
	transform: rotate(45deg);
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.loader1 .loader__spinner:nth-child(3) {
	transform: rotate(90deg);
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.loader1 .loader__spinner:nth-child(4) {
	transform: rotate(135deg);
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.loader1 .loader__spinner:nth-child(5) {
	transform: rotate(180deg);
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.loader1 .loader__spinner:nth-child(6) {
	transform: rotate(225deg);
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.loader1 .loader__spinner:nth-child(7) {
	transform: rotate(270deg);
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.loader1 .loader__spinner:nth-child(8) {
	transform: rotate(315deg);
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.loader1 .loader__spinner:after {
	content: '';
	display: block;
	position: absolute;
	top: 1px;
	left: 0.5625rem;
	width: 0.125rem;
	height: 0.3125rem;
	-webkit-border-radius: 1.25rem;
	border-radius: 1.25rem;
	background-color: var(--white);
}

.loader1 .load.sky .load .loader__spinner:after {
	background-color: var(--gray-500);
}

.loader1 .load.line-blue .load .loader__spinner:after {
	background-color: var(--primary-blue);
}

.loader1 .load.line-gray .load .loader__spinner:after {
	background-color: var(--gray-500);
}

.loader1.size-s .load {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

.loader1.size-l .load {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.loader2 .loader__spin {
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto;
	text-align: center;
}

.loader2 .loader__spinner1, .loader2 .loader__spinner2 {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.loader2 .loader__spinner1 {
	background-image: url(/images/spinner/i_spinner_bk.png);
	-webkit-animation: loader-spinner-animation 0.5s linear infinite;
	animation: loader-spinner-animation 0.5s linear infinite;
	will-change: transform, opacity;
}

.loader2 .loader__spinner1.primary {
	background-image: url(/images/spinner/i_spinner.png);
}

.loader2 .loader__spinner2 {
	background-image: url(/images/spinner/i_spinner_fin_bk.png);
}

.loader2 .loader__spinner2.primary {
	background-image: url(/images/spinner/i_spinner_fin.png);
}

.spinner {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	top: 50%;
	left: 50%;
	margin: -1.75rem 0 0 -1.75rem;
	min-width: 3.5rem;
	min-height: 3.5rem;
}

.spinner:before {
	content: 'Loading…';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	margin-top: -1.75rem;
	margin-left: -1.75rem;
	font-size: 0;
	display: block;
	background: url(/images/spinner/i_spinner.png) no-repeat center;
	background-size: contain;
	-webkit-animation: spinner 0.7s linear infinite;
	animation: spinner 0.7s linear infinite;
}

/* ===== 비밀번호 ===== */
.pw-check {
	display: flex;
	gap: 0 0.75rem;
	margin-top: 8px;
}

.pw-check .c-msg {
	margin-top: 0;
}

.pw-check li {
	color: var(--content-error);
	margin-top: 0.1875rem;
	font-size: 0.875rem;
}

.pw-check li:before {
	content: '';
	display: inline-block;
	margin-right: 4px;
	width: 0.875rem;
	height: 0.875rem;
	background: url(/images/i_cancel.svg) no-repeat center;
	background-size: contain;
	vertical-align: -0.125rem;
}

.pw-check li.pw-check__checked {
	color: var(--content-success);
}

.pw-check li.pw-check__checked:before {
	background-image: url(/images/i_check.svg);
	background-size: 1.375rem auto;
}

/* ===== img ===== */
.customers__logo-pc {
	width: 90%;
	height: 90%;
}

.customers__logo-mb {
	width: 100%;
	height: 100%;
}

.logo--margin {
	margin-left: 64px;
	margin-right: 64px;
	margin-bottom: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 767px) {
	.logo--margin {
		margin-top: 24px;
		margin-right: 16px;
		margin-bottom: 56px;
		margin-left: 16px;
	}
}

/* ===== pagination ===== */
.pagination-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  position: relative;
  bottom: 0;
  margin-bottom : 67px;
}

.pagination {
 display: flex;
 gap: 10px
}

.pagination-next__btn--wrap {
 display: flex;
}

.pagination-prev__btn--wrap {
 display: flex;
}

.pagination-next__btn:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.pagination-prev__btn:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.pagination-all-next__btn:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.pagination-all-prev__btn:hover {
   background-color: var(--gray-100);
  border-radius: 6px;
}

.pagination-next__btn:active {
  background-color: var(--gray-200);
  border-radius: 6px;
}

.pagination-prev__btn:active {
  background-color: var(--gray-200);
  border-radius: 6px;
}

.pagination-all-next__btn:active {
  background-color: var(--gray-200);
  border-radius: 6px;
}

.pagination-all-prev__btn:active {
  background-color: var(--gray-200);
  border-radius: 6px;
}

.pagination .page-item {
 font-size: 16px;
 line-height: 18px;
 color: var(--content-main);
 width: 36px;
 height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}

.pagination .page-item:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.pagination .page-item.active {
  font-weight: 600;
  color:var(--primary-blue);
}

.no-results-message {
 display: flex;
 align-items: center;
 justify-content: center;
}

@media only screen and (max-width: 767px) {
  .pagination .page-item {
    width: 24px;
    height: 24px;
    font-size: 14px;
   }
   
  .pagination-prev__btn,
  .pagination-next__btn,
  .pagination-all-next__btn,
  .pagination-all-prev__btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  } 
}

/* ===== timeline ===== */
.timeline ul, .timeline li {
	position: relative;
}

.timeline li {
	z-index: 1;
}

.timeline li>a {
	pointer-events: none;
}

.timeline .badge {
	display: flex;
	align-items: center;
  padding:10px;
  width:26px;
  height:26px;
	line-height:  14px;
	font-size: 12px;
	color: var(--content-sub);
	background-color: var(--gray-100);
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
	font-weight: 600;
}

.timeline li.sts-active>a {
	pointer-events: all;
}

.timeline li.sts-active .badge {
	color: var(--white);
	background-color: var(--primary-blue);
}

.timeline li.sts-active p {
	color: var(--primary-blue);
}

.timeline__vertical>li {
	display: table;
	padding-left: 48px;
	color: var(--content-main);
	font-weight: 600;
	margin-bottom: 28px;
}

.timeline__vertical>li>a> .timeline__user {
  color: var(--content-sub);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.timeline__vertical>li:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 1.5px;
	height: calc(100% - 8px);
	left: 12px;
	top: 32px;
	background-color: var(--border-outline);
}

.timeline__vertical>li.sts-active::after {
	background-color: var(--primary-blue);
}

.timeline__vertical p {
	height: 24px;
	line-height: 24px;
	font-size: 20px;
}

.timeline__vertical>li .badge {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	color: var(--content-main);
}

 .timeline__vertical>li p {
  font-size: 16px;
  font-weight: 600;
  color: var(--content-main);
}

.timeline__vertical>li .middot {
  padding: 10px 0 24px;
}

.timeline__vertical>li .middot span {
	position: relative;
	display: block;
	color: var(--content-sub);
	padding-left: 12px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
}

/* timeline-image */

.timeline__vertical.timeline__vertical-image {
  padding: 0 16px;
}


.timeline__vertical.timeline__vertical-image > li {
  padding-left: 68px;
  margin-bottom: 40px;
}

.timeline__vertical.timeline__vertical-image > li + li {
  margin-top: 40px !important;
}

.timeline__vertical.timeline__vertical-image .badge{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
}

.timeline__vertical.timeline__vertical-image .badge > img{
  padding:8px;
}

.timeline__vertical.timeline__vertical-image>li:not(:last-child)::after {
  left: 18px;
  width: 2px;
  height: 40px;
  top: 40px;
}

.timeline__vertical>li .middot span::after {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--content-sub);
	-webkit-border-radius: 100%;
	border-radius: 100%;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.timeline__row {
	display: table;
	margin: 0 auto;
}

.timeline__row>li {
	display: table-cell;
	text-align: center;
	color: var(--content-main);
}

.timeline__row>li:not(:first-child) {
	padding-left: 80px;
}

.timeline__row>li:not(:first-child)::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: calc(100% - 8px);
	height: 1.5px;
	top: 16px;
	left: 0;
	background-color: var(--border-outline);
}

.timeline__row>li.sts-active:not(:first-child)::before {
	background-color: var(--primary-blue);
}

.timeline__row>li .badge {
	margin: 0 auto 1rem;
}

.timeline__row>li p {
	font-size: 0.75rem;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.timeline__vertical>li {
		padding-left: 44px;
	}
}

/* ===== tab ===== */

div>.tab {
	position: sticky;
	top: 146px;
	background-color: var(--bg-white);
	z-index: 10;
	padding: 0 16px;
	border-bottom: 1px solid var(--border-outline);
}

.tab__head {
	position: sticky;
	display: flex;
	max-width: 438px;
	left: calc(50% - 219px);
	display: flex;
	align-items: center;
	top: 146px;
}

.tab__head__item {
	flex: 1;
	text-align: center;
	cursor: pointer;
	padding: 14px;
	color: var(--content-sub);
	font-size: 16px;
}

@media only screen and (max-width: 767px) {
	div>.tab {
		top: 100px;
	}
	.tab__head__item {
		font-size: 16px;
		padding: 12px;
	}
	.tab__head {
		display: flex;
		border-bottom: 1px solid var(--border-outline);
		max-width: 100%;
		left: 0;
	}
}

.tab__head__item--active {
	color: var(--primary-blue);
	font-weight: 500;
	border-bottom: 3px solid var(--primary-blue);
}

.tab__head__item:not(.tab__head__item--active):hover {
	color: var(--content-main);
}

.tab__underline {
	position: absolute;
	bottom: 0;
	height: 3px;
	background-color: var(--primary-blue);
	transition: all 0.2s ease;
	display: flex;
	padding: 0px 16px;
}

/* ===== card ===== */
.card__list .item>a {
	display: block;
	width: 100%;
	height: 100%;
}

.card__list .item {
	background-color: var(--bg-white);
	border: 1px solid var(--border-normal);
	-webkit-box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.06);
	box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.06);
}

.card__list .item:hover, .card__list .item:active {
	-webkit-animation: hover-floating 0.3s forwards
		cubic-bezier(0, 0, 0.5, 1);
	animation: hover-floating 0.3s forwards cubic-bezier(0, 0, 0.5, 1);
}

/* ===== middot ===== */
.list-middot dd>span {
	position: relative;
	display: block;
}

.list-middot dd>span:before {
	content: '•';
	position: absolute;
	width: 16px;
	text-align: center;
}

/* ===== 핸드폰 약관 (인증번호 받을 때 약관) ===== */
.phone-term {
	margin-top: 0.75rem;
}

.phone-term .phone-term__all {
	display: flex;
	justify-content: space-between;
}

.phone-term .phone-term__all label {
	font-weight: 500;
	color: var(--content-sub);
	font-size: 0.875rem;
	gap: 8px;
}

.phone-term .btn-phone-term-toggle {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	font-size: 0;
	background-size: contain;
	color: var(--gray-300);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.phone-term .btn-phone-term-toggle.sts-active {
	transform: rotate(180deg);
}

.phone-term .phone-term__list {
	display: none;
}

.phone-term .phone-term__item {
	display: flex;
	margin-top: 0.75rem;
	justify-content: space-between;
}

.phone-term .phone-term__item label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--content-main);
}

.phone-term .phone-term__link {
	font-size: 0.875rem;
	color: var(--primary-blue);
	font-weight: 500;
}

.phone-term.disabled {
	pointer-events: none;
}

.phone-term.disabled .phone-term__all label {
	color: var(--content-disabled);
}

.phone-term.disabled .btn-phone-term-toggle {
	pointer-events: none;
	background-image: url(/images/icon/chevron_right_lightgray.svg);
}

@media only screen and (max-width: 767px) {
	.phone-term {
		width: 100%;
	}
}

/* ===== accordion ===== */

.accordion__head {
	display: flex;
	padding: 16px;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
	border-radius: 10px;
}

.accordion__head-title {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	word-break: break-word;
	line-height: 1.5;
	flex: auto;
	color: var(--content-sub);
}

.accordion__head-title .question-mark {
 	color: var(--primary-blue);
}

.accordion__head:hover {
	background-color: var(--gray-50);
}

.accordion__head:hover .accordion__head-title {
	color: var(--primary-blue);
}

.accordion__head:hover .btn-accordion-toggle {
	background-image: url(/images/icon/icon-chevron-right-blue.svg);
  	background-size: 12px 12px;
}

.accordion__body {
	display: none;
	padding: 16px 16px 48px;
	font-weight: 500;
	font-size: 15px;
	color: var(--content-sub);
	line-height: 1.5;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
}

.accordion-more {
	margin: 4rem 0 6.25rem;
	text-align: center;
}

.accordion .btn-accordion-toggle {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	background: url(/images/icon/chevron_right_lightgray.svg) no-repeat
		center;
	background-size: 16px 16px; /* 강제 고정 */
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.accordion.sts-active .btn-accordion-toggle {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.accordion.sts-active .accordion__head {
  background-color: var(--gray-50);
}

.accordion.sts-active .accordion__head-title {
	color: var(--primary-blue);
}

@media only screen and (max-width: 767px) {
	.accordion__head, .accordion__body {
		padding : 16px;
	}
}

/* ===== scroll-up ===== */
.slide-in-up {
	opacity: 0;
	filter: alpha(opacity = 0);
	margin-top: 30px;
}

.slide-in-up.sts-active {
	opacity: 1;
	filter: alpha(opacity = 100);
	margin-top: 0;
	-webkit-transition: margin-top.55s 0.2s ease-out, opacity 0.55s 0.2s
		linear;
	transition: margin-top 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear;
}

/* ===== tab ===== */

/*sidebar*/
#sidebar {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 76px);
  width: 15.5rem;
  border-right: 1px solid var(--border-normal, #f1f4f6);
  background-color: var(--bg-white);
  flex: none;
  z-index: 2;
  max-width: 740px;
  display: none;
}

 .sidebar__no {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sidebar__no > img {
 width: 32px;
}

.sidebar__no:hover {
 background-color: var(--gray-100);
 border-radius: 6px;
}

.sidebar__no-new {
  flex: none;
  position: relative;
}

 .sidebar__no-new .c-tip__text {
  width: auto;
  font-weight: 500;
}

 .sidebar__no-new .c-tip__text:before {
  left: 1.5rem;
}

 .sidebar__no-new:hover .c-tip__text {
  display: block;
}

.sidebar__select {
  position: relative;
  flex: auto;
  display: flex;
  font-size: 15px;
}

.sidebar__no .sidebar__select .nice-select {
 padding: 0;
  width: auto;
  height: auto;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-shadow: none !important;
}

.sidebar__select .nice-select:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  -webkit-transform: rotate(90deg) translateY(-50%);
  transform: rotate(90deg) translateY(-50%);  -webkit-transform-origin: 50% 22%;
  transform-origin: 50% 22%;
  background: url(/images/icon/chevron_right_lightgray.svg) center;
  background-size: contain;
  pointer-events: none;
  display: flex;
  width: 16px;
  height: 16px;
  padding: 4px;
  justify-content: center;
  align-items: center;
}

.sidebar__select .nice-select.open:after {
  transform: rotate(-90deg);
}

.sidebar__select .nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.sidebar__select .nice-select.disabled {
  border-color: var(--gray-200);
  color: #999;
  background-color: #fafafb;
  pointer-events: none;
}

.sidebar__select .nice-select.disabled .current {
  color: var(--content-disabled);
}

.sidebar__select .nice-select .current {
  font-size: 16px;
  color: rgba(0, 0, 0, 0);
}

.sidebar__select .nice-select .list {
  max-height: 25rem;
  width: 10.38rem;
  -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.1);
  background-color: var(--bg-white);
  -webkit-border-radius: 0.25rem 0.25rem;
  border-radius: 0.25rem 0.25rem;
  font-size: inherit;
  margin-top: 0.3125rem;
  opacity: 0;
  overflow: auto;
  padding: 0.25rem 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-1.313rem);
  transform: scale(0.75) translateY(-1.313rem);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity
    0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s
    ease-out;
  z-index: 9;
}

.sidebar__select .nice-select .option {
  cursor: pointer;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.625rem 0.75rem;
  color: var(--content-main);
  list-style: none;
  outline: none;
  padding-left: 1rem;
  font-size: inherit;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.sidebar__select .nice-select .option:last-child {
  border-bottom: 0;
}

.sidebar__select .nice-select .option:hover, .sidebar__select .nice-select .option.focus,
.sidebar__select .nice-select .option.selected.focus {
  background-color: var(--gray-100);
  color: #202429;
}

.sidebar__select .nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}

.sidebar__select .nice-select .option.selected {
  color: #202429;
}

.sidebar__select .nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.sidebar__select .real__select {
  font-size: 1.125rem;
  font-weight: 600;
  background-color: var(--bg-white);
  z-index: 1;
  color: var(--content-main);
  pointer-events: none;
  left: 0;
}

#sidebar .sidebar__brand {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  font-weight: 500;
  border-radius: 6.25rem;
  overflow: hidden;
  background-color: var(--bg-white);
}

#sidebar .sidebar__brand img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#sidebar .sidebar__title {
  position: relative;
  margin-top: 0.25rem;
}

#sidebar .sidebar__title strong {
  display: block;
  font-size: 0.875rem;
}

#sidebar .sidebar__title__model {
  font-weight: 600;
  color: var(--content-main);
}

#sidebar .sidebar__title__trim {
  margin-top: 0.25rem;
  font-weight: 400;
  color: var(--content-disabled);
}

#sidebar .sidebar__vin {
  position: relative;
  margin-top: 0.375rem;
}

#sidebar .sidebar__vin__value {
  font-size: 0.875rem;
}

#sidebar .btn-copy {
  display: inline-block;
  font-size: 0;
  vertical-align: 0.25rem;
  cursor: pointer;
}

#sidebar .btn-copy .icon {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/i_copy.svg);
}

#sidebar .btn-copy-wrap {
  position: relative;
  display: inline-block;
}

#sidebar .btn-copy-wrap .c-tooltip {
  position: absolute;
  top: calc(100% + 0.6875rem);
  left: -0.9375rem;
  padding: 0.625rem;
  visibility: hidden;
  -webkit-transform-origin: 0;
  transform-origin: 0;
  z-index: 10;
}

#sidebar .btn-copy-wrap .c-tooltip:before {
  transform: none;
  left: 1.125rem;
}

#sidebar .btn-copy-wrap .c-tooltip.sts-active {
  visibility: visible;
  -webkit-animation: tooltip-show 0.1s, tooltip-hide 0.1s 1.5s;
  animation: tooltip-show 0.1s, tooltip-hide 0.1s 1.5s;
}

#sidebar .sidebar__list {
  position:relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: auto;
  user-select:none;
}

#sidebar .sidebar__list::-webkit-scrollbar {
  display: none;
}

#sidebar .sidebar__item {
  position: relative;
  display: flex;
  cursor: pointer;
  padding: 12px 12px 12px 40px;
  gap: 0.75rem;
  font-size: 15px;
  width: auto;
  height: auto;
  background-color: transparent;
  -webkit-border-radius: 0;
  border-radius: 0;
  opacity: 1;
  color: var(--content-main);
  align-items: center;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: var(--content-caption);
  line-height: 16px;
}

@media only screen and (max-width: 768px) {
  #sidebar {
   top: 108px;
  }
}
  #sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border-normal, #f1f4f6);
    height: auto;
  }

  #sidebar .sidebar__title {
    display: none;
  }
  
  #sidebar .sidebar__vin {
    display: none;
  }
  
  #sidebar .sidebar__brand {
   display: none;
  }
  
  #sidebar .sidebar__select {
    margin-top: 0;
    flex: none;
  }
  
  #sidebar .sidebar__select .nice-select {
    padding-right: 1.5rem;
    line-height: 1;
  }
  
  #sidebar .sidebar__no-new .c-tip__text {
    display: none !important;
  }
  
  #sidebar .sidebar__list {
    display: flex;
    gap: 0.4rem;
    overflow-x: scroll;
    justify-content: space-between;
  }
  
  #sidebar .sidebar__item {
    padding: 10px;
    margin-bottom: 4px;
  }
  
  #sidebar .sidebar__item::before {
    display: none;
  }
  
  #sidebar .sidebar__item.sts-active {
    font-weight: 600;
    color: var(--content-main);
    background-color: transparent;
  }


@media ( hover : hover) and (pointer: fine) {
  #sidebar .sidebar__item:hover {
    background-color: var(--gray-100);
    border-radius: 8px;
  }
}

@media ( hover : hover) and (pointer: fine) {
  #sidebar .sidebar__item:hover {
    background-color: var(--gray-100);
    border-radius: 8px;
  }
}

/* ===== Popup ===== */
.dim, .dim2 {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 120;
}

.dim.dim-active, .dim2.dim-active {
	display: block;
	-webkit-animation: dim-animation 0.3s ease;
	animation: dim-animation 0.3s ease;
}

.modal, .modal2 {
	visibility: hidden;
	position: fixed;
	background: #fff;
	-webkit-box-shadow: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.16);
	box-shadow: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.08);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.modal.sts-active, .modal2.sts-active {
	visibility: visible;
}

.modal .modal__head, .modal2 .modal__head, .modal .modal__contents,
.modal2 .modal__contents, .modal__trans__head {
	padding: 24px 20px 12px 20px;
}

.modal .modal__sub-head {
	padding: 0px 20px;
	font-size: 18px;
	color: var(--content-main);
}

.modal__contents>p>span {
	color: var(--content-sub);
	font-weight: 400;
	line-height: 24px;
}

#modal-notice-popupText {
	line-height: 24px;
	margin-bottom: 16px;
	font-size: 15px;
	color: var(--gray-700)
}

.modal .modal__head h2, .modal2 .modal__head h2 {
  margin-bottom: 6px;
}

.modal .modal__head strong, .modal2 .modal__head strong,
.modal__trans__head strong {

  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
	color: var(--content-main);
}

.modal .modal__head strong+p, .modal2 .modal__head strong+p, .modal .modal__trans__head strong+p {
	margin-top: 12px;
	font-size: 14px;
	color: var(--content-sub);
}

.modal__contents--top {
 margin-bottom: 6px;
}

.modal .modal__contents, .modal2 .modal__contents {
	line-height: 1.32;
}

.cash-receipt__contents {
	color: var(--content-sub);
}

.modal .modal__head+.modal__contents, .modal2 .modal__head+.modal__contents,
.modal .modal__trans__head+.modal__contents {
	padding-top: 0;
}

.modal .modal__head+.modal__contents, .modal2 .modal__head+.modal__contents,
.modal .modal__trans__head+.modal__contents {
	font-size: 14px;
	line-height: 1.43;
	color: var(--content-sub);
}

.modal .modal__head+.modal__contents p+p, .modal2 .modal__head+.modal__contents p+p,
.modal2 .modal__trans__head+.modal__contents p+p {
	margin-top: 24px;
}

.modal .modal__btn, .modal2 .modal__btn {
	display: flex;
	padding: 14px 16px;
	justify-content: center;
	gap: 8px;
}

.modal .modal__btn[class*='full'] {
	justify-content: flex-end;
}

.modal .modal__btn.full, .modal2 .modal__btn.full {
	padding-top: 0;
}

.modal .modal__btn.half-row, .modal2 .modal__btn.half-row {
	gap: 8px;
}


.modal .modal__btn.full2 .c-btn, .modal .modal__btn.half-row .c-btn,
.modal2 .modal__btn.half-row .c-btn {
	flex: 1;
}

.modal .modal__btn.full2 .c-btn, .modal2 .modal__btn.full2 .c-btn {
	width: 100%;
}

.modal .btn-close, .modal2 .btn-close {
	display: block;
	position: absolute;
	right: 1.25rem;
	top: 1rem;
	width: 1.25rem;
	height: 1.25rem;
	text-indent: -9999px;
	font-size: 0;
	overflow: hidden;
	background: url(/images/icon/x_gray.svg) no-repeat center;
	background-size: contain;
}

.modal .loader, .modal2 .loader {
	text-align: center;
}

.modal .loader__text, .modal2 .loader__text, .modal .loader__text_fin,
	.modal2 .loader__text_fin {
	position: relative;
	margin-top: 2.25rem;
	font-size: 14px;
	color: var(--content-main);
	box-sizing: border-box;
}

.modal .loader__text_finn>p, .modal2 .loader__text_fin>p {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-blue);
}

.modal .loader__spin, .modal2 .loader__spin {
	width: 40px;
	height: 40px;
	margin: 16px auto;
}

.modal .alert-text, .modal2 .alert-text {
	position: relative;
	margin-top: 24px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--content-caption);
}

.modal .alert-text strong, .modal2 .alert-text strong {
	font: inherit;
	font-weight: 600;
}

.modal .form__item:not(:last-child), .modal2 .form__item:not(:last-child) {
	margin-bottom: 24px;
}

.modal .form__item label, .modal2 .form__item label {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--content-sub);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.modal2 .form__caption,
.modal .form__caption {
 font-weight: 400;
 font-size: 13px;
 line-height: 20px;
 color: var(--content-caption)
}

#modal-notice .modal__btn {
  display: flex;
  justify-content: space-between;
}

#modal-notice .modal__btn > button {
  font-size: 14px;
  background-color: #fff;
}

#modal-notice .modal__btn > button:hover {
  background-color: var(--gray-100);
}

#modal-mycar-load.modal {
  width: 280px;
}

#modal-promotion-popup .modal__contents {
	padding: 0;
}

#modal-promotion-popup .modal__contents>a {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
}

#modal-promotion-popup .modal__btn {
	padding: 0;
	justify-content: space-between;
}

#modal-promotion-popup .modal__btn.half-row .c-btn {
	flex: none;
	min-width: 100px;
	font-size: 12px;
	padding: 10px 12px;
}

/**/
#modal-promotion-popup2 .modal__contents {
	padding: 0;
}

#modal-promotion-popup2 .modal__contents>a {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
}

#modal-promotion-popup2 .modal__btn {
	padding: 0;
	justify-content: space-between;
}

#modal-promotion-popup2 .modal__btn.half-row .c-btn {
	flex: none;
	min-width: 100px;
	font-size: 12px;
	padding: 10px 12px;
}
/**/
#modal-outline-car .c-tooltip {
	position: absolute;
	bottom: calc(100% + 1.063rem);
	padding: 0.625rem;
}

#modal-outline-car .modal__head .modal__trans__head .help {
	margin-top: 10px;
	font-size: 12px;
	color: var(--content-caption);
}

#modal-outline-car .modal__contents .c-form-outline {
	padding: 0;
}

#modal-outline-car .modal__contents .c-form-outline::after {
	display: none;
}

#modal-outline-car .modal__contents .outline__img {
	height: 78px;
	margin: 20px 0;
}

#modal-outline-car .modal__contents .outline__img img {
	height: 100%;
}

#modal-outline-car .modal__contents .outline__report {
	height: 44px;
	padding: 14px;
}

#modal-mycar-search .modal-btn {
	padding: 0;
}

#modal-mycar-load .modal__btn, #modal-mycar-load-fin .modal__btn {
	padding: 0;
}

#modal-transfer-info .list-middot dl {
	margin-top: 20px;
}

#modal-transfer-info .list-middot dd {
	margin-top: 4px;
}

#modal-transfer-info .list-middot dd>span {
	padding-left: 20px;
}

#modal-transfer-info .list-middot dd>span::before {
	width: 4px;
	height: 4px;
	left: 8px;
}

#modal-transfer-mileage .mileage-list {
	background: var(--bg-light-gray);
	margin-top: 18px;
	padding: 14px 12px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

#modal-transfer-mileage .mileage-list dl {
	display: flex;
	justify-content: space-between;
}

#modal-transfer-mileage .mileage-list dt, #modal-transfer-mileage .mileage-list dd
	{
	font-size: 14px;
}

#modal-molit-check .modal__head .modal__trans__head {
	padding-bottom: 10px;
}

#modal-molit-check .modal__btn {
	padding-top: 0;
}

#modal-molit-check img {
	display: block;
	width: 196px;
	margin: 48px auto;
}

#modal-molit-check .molit-info {
	padding: 16px;
	border-radius: 10px;
	background-color: var(--bg-light-gray);
}

#modal-molit-check .molit-info__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

#modal-molit-check .molit-info__list {
	display: block;
	line-height: 1.3;
	text-align: left;
	margin-top: 8px;
}

#modal-molit-check .molit-info__list li {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--content-caption);
}

#modal-molit-check .molit-info__list li+li {
	margin-top: 3px;
}

#modal-model-select .modal__contents {
	flex: auto;
}

#modal-model-select .model-name {
	padding-bottom: 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--content-main);
}

#modal-model-select .model-select {
	display: grid;
	grid-gap: 4px 10px;
	grid-template-columns: 1fr;
	max-height: 168px;
	overflow: auto;
}

.model-name {
	margin-bottom: 10px;
}

.model-select {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#modal-model-select .c-radio {
	margin-bottom: 4px;
	padding: 9px 0;
}

#modal-model-select .c-radio input+label {
	color: var(--content-main);
}

#modal-model-select .c-radio input {
	cursor: pointer;
}

#modal-model-select .c-radio input:checked+label {
	color: var(--primary-blue);
}

#modal-model-select .modal__contents p {
	line-height: 1.5;
}

#modal-model-select .help-text {
	margin-top: 24px;
	padding: 14px;
	background: var(--bg-light-gray);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#modal-mileage-modify .modal__contents p {
	line-height: 1.5;
}

#modal-mileage-modify .mileage-input label {
	display: inline-block;
	padding-bottom: 8px;
	font-size: 20px;
	font-weight: 600;
}

#modal-mileage-modify .unit-wrap {
	display: flex;
	align-items: center;
}

#modal-mileage-modify .unit-wrap .c-input {
	flex: auto;
}

#modal-mileage-modify .unit-wrap .unit {
	margin-left: 6px;
	font-size: 20px;
	color: var(--content-main);
}

#modal-mileage-modify .mileage-history {
	display: flex;
	margin-top: 24px;
	padding: 1rem 12px;
	border: 1px solid var(--border-normal);
	border-width: 1px 0;
	gap: 36px;
}

#modal-mileage-modify .mileage-history__item {
	flex: 1 1 0;
}

#modal-mileage-modify .mileage-history__item>span {
	display: block;
	font-weight: 500;
	padding-top: 4px;
}

#modal-mileage-modify .mileage-history__label {
	font-size: 14px;
}

#modal-mileage-modify .mileage-history__value {
	font-size: 18px;
}

#modal-mileage-modify .mileage-history__date {
	font-size: 12px;
	color: var(--content-caption);
}

#modal-mileage-modify .alert-text {
	color: var(--content-error);
}

#modal-report-export {
	width: 520px;
}

#modal-report-export .modal__head .modal__trans__head {
	padding-bottom: 14px;
	text-align: center;
	border-bottom: 1px solid var(--border-normal);
}

#modal-report-export .modal__head .modal__trans__head strong {
	font-size: 16px;
}

#modal-report-export .modal__contents {
	padding-bottom: 0;
	overflow-y: auto; 
  height: 300px;
}

.modal__contents>p {
	line-height: 1.5;
	font-weight: 500;
	color: var(--content-sub);
}

.modal__contents>p[class*='cash-receipt__contents'] {
	line-height: 24px;
	color: var(--content-sub);
	font-size: 14px;
}

#modal-report-export .provide__list {
	margin-bottom: 10px;
	    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#modal-report-export .provide__item:not(:last-child) {
	margin-bottom: 10px;
}

#modal-report-export .provide__item .c-check label {
	font-size: 14px;
}

#modal-report-export .provide__item .c-check label:not([disabled]+label)
	{
	font-size: 14px;
	color: var(--content-main);
}

#modal-report-export .provide__head {
	padding: 20px 0;
	font-size: 14px;
}

#modal-report-export .provide__title {
	font-weight: 600;
	color: var(--content-main);
}

#modal-report-export .provide__total {
	margin-left: 4px;
	font-weight: normal;
	color: var(--content-sub);
}

#modal-report-export .provide__count {
	color: var(--primary-blue);
}

#modal-report-export .guide {
	padding: 16px;
	background: var(--bg-light-gray);
	-webkit-border-radius: 16px;
	border-radius: 16px;
}

#modal-report-export .guide__item {
	position: relative;
	padding-left: 8px;
	font-size: 12px;
	line-height: 16px;
	margin: 0;
	color: var(--content-caption);
}

#modal-report-export .guide__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 2px;
	height: 2px;
	background: var(--content-caption);
	-webkit-border-radius: 100%;
	border-radius: 100%;
}

#modal-recipient-info .recipient-list {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
}

#modal-recipient-info .recipient-item {
	display: flex;
	gap: 24px;
	text-align: left;
}

#modal-recipient-info .recipient-item__label {
	font-size: 16px;
	font-weight: 500;
	color: #989ca1;
	width: 64px;
}

#modal-recipient-info .recipient-item__value {
	font-size: 16px;
	font-weight: 500;
}


@media only screen and (max-width: 768px) {
	#modal-usage-receipt .receipt__inner, #modal-usageSms-receipt .receipt__inner
		{
		max-height: 335px;
		overflow: auto;
	}
}

.modal-usage-receipt .receipt__title {
	display: block;
}

.modal-usage-receipt .receipt__item,
.bottom-sheet.usage-receipt .receipt__item {
	padding: 16px 0;
	border-bottom: 1px solid var(--border-outline);
}

.modal-usage-receipt .receipt__item:last-child,
.bottom-sheet.usage-receipt .receipt__item:last-child {
	border-bottom: 0;
}

.modal-usage-receipt .receipt__label,
.bottom-sheet.usage-receipt .receipt__label {
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--content-sub);
}

.modal-usage-receipt .receipt__value,
.bottom-sheet.usage-receipt .receipt__value {
	font-size: 12px;
	font-weight: 500;
}

.modal-usage-receipt .receipt__value li,
.bottom-sheet.usage-receipt .receipt__value li {
	position: relative;
	padding-left: 1rem;
}

.modal-usage-receipt .receipt__value li:before,
.bottom-sheet.usage-receipt .receipt__value li:before {
	content: '';
	position: absolute;
	top: 8px;
	left: 5px;
	width: 3px;
	height: 3px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	background: var(--content-main);
}

/*============================================*/
#modal-difficult-transCar .difficult-list li {
	margin-top: 8px;
}

#modal-difficult-transCar .difficult-list li>.icon {
	margin-right: 4px;
	background-image: url(/images/icon/c_check_red.svg);
}

#modal-difficult-transCar .help-contact {
	margin-top: 24px;
	padding: 16px 10px;
	background: var(--bg-light-gray);
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

#modal-difficult-transCar .help-contact span {
	display: block;
	font-size: 12px;
	line-height: 15px;
}

#modal-difficult-transCar .help-contact span:not(:last-child) {
	margin-bottom: 6px;
}

#modal-password-change p.c-msg {
	margin-top: 0.375rem;
}

#modal-password-change .modal__contents {
	margin-top: 0;
}

#modal-find-address {
	width: 490px;
}

#modal-find-address .modal__contents, #modal-find-address .modal__btn {
	padding: 0;
}

@media only screen and (min-width: 768px) {
	.modal, .modal2 {
		overflow: hidden;
		width: 328px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		-webkit-border-radius: 20px;
		border-radius: 20px;
		z-index : 1000;
	}
}

@media only screen and (max-width: 767px) {
  	.modal, .modal2 {
  		overflow: hidden;
  		-webkit-box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.05);
  		box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.05);
  	}
  	
  	.modal {
  		position: fixed;
  		width: calc(100% - 48px) !important;
  		top: 50%;
  		left: 50%;
  		-webkit-transform: translate(-50%, -50%);
  		transform: translate(-50%, -50%);
  		-webkit-border-radius: 20px;
  		border-radius: 20px;
  	}
  	
  	.modal2 {
  		left: 0;
  		right: 0;
  		width: 100%;
  		bottom: -100%;
  		-webkit-border-radius: 12px 12px 0 0;
  		border-radius: 12px 12px 0 0;
  	}
  	
  	.modal2.sts-active {
  		bottom: 0;
  	}
  	
  	.modal .modal__head+.modal__contents, .modal2 .modal__head+.modal__contents {
  		font-size: 14px;
  	}
  	
  	.modal .modal__head+.modal__contents p+p, .modal2 .modal__head+.modal__contents p+p {
  		margin-top: 20px;
  	}
  	
  	#modal-report-export .provide__list {
  		height: 202px;
  		overflow-y: scroll;
  	}
  	
  	#modal-model-select, #modal-report-export {
  		width: calc(100% - 32px) !important;
  	}
  	
  	#modal-mycar-load.modal {
    width: calc(100% - 100px) !important;
  }
}

/* ===== Form ===== */
/* form 스타일 */
.c-form .caption {
	position: relative;
	margin-bottom: 24px;
	padding: 12px 0;
	line-height: 20px;
	font-size: 18px;
  color: var(--content-main);
}

.c-form dt {
	position: relative;
}

.c-form .c-msg {
	font-size: 14px;
}

.c-form .c-input+.c-msg, .c-form .c-msg+[id*='display_'] {
	margin-top: 8px;
}

.c-form .timer {
	display: inline-block;
	margin-top: 6px;
	font-size: 14px;
}

.c-form .timer em {
	font-size: inherit;
	font-weight: inherit;
	color: var(--content-error);
}

.c-form dt .sup {
	position: absolute;
	right: 0;
	top: 0;
	color: var(--content-error);
}

.c-form .btn-info {
	margin-top: 6px;
	color: var(--content-caption);
	font-weight: 500;
	font-size: var(--fontSizeSmall);
	cursor: pointer;
}

.c-form .c-tooltip.pos-bottom:before {
	-webkit-transform: none;
	transform: none;
	left: 28px;
}

.c-form-input {
	margin-bottom: 60px;
}

.c-form-input .c-input-anchor {
	margin-top: 10px;
}

.c-form-input .c-input-anchor>a {
	display: inline-block;
	text-decoration: underline;
	text-underline-position: under;
	color: var(--content-caption);
	font-size: 14px;
}

.c-form-input dl {
	margin-bottom: 38px;
}

.c-form-input dt {
	margin-bottom: 8px;
	line-height: 18px;
	font-size: 15px;
	color: var(--content-sub);
	font-weight: 500;
}

.c-form-outline {
	position: relative;
}

.c-form-outline:not(.last, .no-data)::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--border-normal);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.c-form-outline dl {
	display: flex;
	justify-content: space-between;
	line-height: 1.5;
	font-size: 14px;
}

.c-form-outline dd {
	text-align: right;
}

.c-form-outline dd>span {
	display: block;
}

.c-form-outline.no-data {
	padding-top: 122px;
	text-align: center;
	color: var(--content-caption);
	font-weight: 400;
}

.c-form-outline.no-data .c-btn {
	margin-top: 24px;
}

.c-form-outline.type1 dl {
	margin: 8px 0;
}

.c-form-outline.type1 .caption {
	margin-bottom: 10px;
}

.c-form-outline.type1 .outline__img {
	height: 117px;
}

.c-form-outline.type1 .outline__img img {
	display: block;
	margin: 0 auto;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.c-form-outline.type1 .outline__error {
	cursor: unset;
	justify-content: flex-start;
	margin: 24px 0;
	width: 100%;
	color: var(--content-error);
	background-color: rgba(240, 68, 82, 0.05);
}

.c-form-outline.type1 .outline__report {
	position: relative;
	justify-content: flex-start;
	margin: 24px 0;
	width: 100%;
	color: var(--primary-blue);
	background-color: rgba(48, 130, 247, 0.05);
}

.c-form-outline.type1 .outline__report::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/chevron_right_blue.svg);
	background-size: contain;
}

.c-form-outline.type1 .outline__report i {
	margin-right: 4px;
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/search_blue.svg);
	background-size: contain;
}

.c-form-outline.type1 dt {
	color: var(--content-sub);
}

.c-form-outline.type2 .cont-top {
	margin-bottom: 10px;
}

.c-form-outline.type2 .cont-top .date {
	display: block;
	margin-bottom: 8px;
	padding: 16px 0;
	font-size: 14px;
	color: var(--content-sub);
}

.c-form-outline.type2 .cont-top .num {
	line-height: 32px;
	font-size: 18px;
	font-weight: 500;
}

.c-form-outline.type2 .cont-bottom dl {
	padding: 8px 0;
	color: var(--content-sub);
}

@media only screen and (max-width: 767px) {
	.c-form dt, .c-form dd {
		width: 100%;
	}
	
	.c-form dt {
		padding: 0;
		margin-bottom: 10px;
		font-size: 14px;
	}
	
	.c-form .c-input.size-l input, .c-form .c-input.size-l textarea {
		font-size: 16px;
		line-height: 18px;
		padding-left: 18px;
		padding-right: 18px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	
	.c-form .c-input.size-l input {
		height: 3rem;
		/* 56px */
	}
	
	.c-form-input dl {
		margin-bottom: 32px;
	}
	
	.c-form-outline dt, .c-form-outline dd {
		margin-bottom: 0;
	}

	.c-form-outline.type1 .outline__report {
		height: 36px;
		padding: 11px 14px;
		font-size: 12px;
		line-height: 14px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	
	.c-select.size-xl select, .c-select.size-xl .nice-select {
		height: 3rem;
		font-size: 16px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
}


/* ===== c-description =====*/

.c-description{
  display: flex;
  flex-direction: column;
  gap:10px;
}

.c-description .c-description__item{
  background-color: var(--gray-100);
  border-radius:18px;
  color: var(--content-sub);
  padding: 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-description .c-description__item > p {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}

.c-description .c-description__item > p > .icon{
  margin-right: 6px;
  background-image:url(/images/icon/c_check_blue.svg);
}

/* ===== c-cols ===== */

.c-cols {
 padding: 36px 0;
 display: flex;
 flex-direction: column;
 gap:5px;
}

.c-cols .c-cols__title {
 font-weight: 700;
 font-size: 20px;
 line-height: 30px;
 color: var(--content-main);
 padding: 0 16px;
}

.c-cols .c-cols__content > p {
 font-weight: 500;
 font-size: 15px;
 line-height: 24px;
 color: var(--content-sub);
 padding: 0 16px;
}

.c-cols .c-cols__content > img {
 padding: 0 16px;
 margin-top: 24px;
 width: 100%;
} 

/* c-cols caption  */

.c-cols .c-cols__content .c-cols__content--caption {
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  color: var(--content-disabled);
  padding: 0 16px;
}

/* c-cols content--info */

.c-cols .c-cols__content .c-cols__content--info {
  padding: 32px 20px;
  background-color: var(--bg-light-gray);
  border-radius: 12px;
  margin: 32px 16px 0; 
}

.c-cols .c-cols__content .c-cols__content--info > dl {
  display: flex;
  flex-direction: column;
  gap:10px;
  margin-bottom: 32px;
}

.c-cols .c-cols__content .c-cols__content--info > dl:last-child {
  margin-bottom: 0;
}


.c-cols .c-cols__content .c-cols__content--info > dl > dt {
  color: var(--content-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.c-cols .c-cols__content .c-cols__content--info > dl > dd {
  color:var(--content-sub);
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

/* c-cols timeline */

.c-cols .timeline__vertical.timeline-transfer {
  padding: 0 16px;
}


/* c-cols accordion */

.c-cols .accordion {
  border-bottom: 0;
}

.c-cols .accordion__head {
  padding: 16px;
} 


  .c-cols .accordion__head-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.c-cols .accordion__body {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  background-color: #fff;
}


/* c-cols review */

.c-cols .review {
 padding:0 16px;
 margin-bottom: 36px;  
}

.c-cols .review__title {
 display: flex;
 justify-content: space-between;
 margin-bottom: 12px;
 font-weight: 600;
 font-size: 14px;
 line-height: 22px;
}

.c-cols .review__title > .review__title--buyer-seller {
  color: var(--content-caption);
  font-weight: 400;
}

.c-cols .review__title > div{
  display: flex;
  align-items: center;
}

.c-cols .review__title > div > .review__title--name{
  margin-right: 6px;
  color: var(--content-main);
}

.c-cols .review__title > div > .review__title--star{
  display: flex;
  gap: 1px;
}

.c-cols .review__content {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub); 
}

@media only screen and (max-width: 767px) {
   .accordion__head {
    padding: 16px;
   }
   
   .c-cols .c-cols__content > img {
   padding: 0;
  } 
}

/* ====================== */
/* Layout */
/* ====================== */
#wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	word-wrap: break-word;
	min-height: 100vh;
}

/* ===== header ===== */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--black);
	z-index: 100;
}

#header header {
	position: relative;
	background-color: rgba(10, 15, 16, 0.75);
	-webkit-backdrop-filter: blur(0.625rem);
	backdrop-filter: blur(0.625rem);
}

#header header .logo {
	width: 130px;
	height: 16px;
	background: var(--logo-white) no-repeat center;
	background-size: contain;
	display: flex;
	cursor: pointer;
}

@media only screen and (max-width: 767px) {
	#header header .logo {
		padding: 0px;
		height: 16px;
		display: flex;
		align-items: center;
	}
}

#header .contents {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1130px;
	padding: 0;
}

#header .logo-box {
	padding: 0.875rem;
}

@media only screen and (max-width: 767px) {
	#header .logo-box {
		padding: 0px;
	}
}

#header .header__right {
	text-align: right;
}

#header .header__right a:hover {
	color: var(--white);
}

#header .header__right .btn-gnb-menu {
	overflow: hidden;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 16px;
}

#header .header__right .btn-gnb-menu span:not(.blind) {
	display: block;
}

#header .header__right .btn-gnb-menu .menu__bar>span {
	position: absolute;
	width: 20px;
	height: 2px;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	background: #7a7f86;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

#header .header__right .btn-gnb-menu .menu__bar>span:nth-child(1) {
	top: 0;
}

#header .header__right .btn-gnb-menu .menu__bar>span:nth-child(2) {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#header .header__right .btn-gnb-menu .menu__bar>span:nth-child(3) {
	bottom: 0;
}

#header .header__right .btn-gnb-menu[class*='--active'] .menu__bar>span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#header .header__right .btn-gnb-menu[class*='--active'] .menu__bar>span:nth-child(2) {
	opacity: 0;
}

#header .header__right .btn-gnb-menu[class*='--active'] .menu__bar>span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#header .header__util a {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--content-caption);
	padding: 0.5625rem 0.75rem;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#header .header__nav ul {
	display: flex;
	justify-content: flex-end;
	gap: 1.5rem;
}

#header .header__nav li .btn-nav {
	padding: 0.875rem 0.75rem;
	font-weight: 500;
	font-size: 14px;
	color: var(--content-disabled);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#header .header__nav li .btn-nav:hover {
	color: var(--white);
}

#header .header__nav li a.btn-nav {
	display: block;
}

#header .header__nav li button.btn-nav {
	border: 0;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

#header .header__nav li.sts-active .btn-nav {
	font-weight: 600;
	color: var(--white);
}

#header #btn-version-login, #header #btn-version-logout {
	position: fixed;
	left: 2rem;
	bottom: 1rem;
}

/* ===== footer ===== */

#footer {
  position: relative;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.74);
  @media only screen and (max-width: 767px) {
    padding: 24px 16px;
    padding-bottom: 60px;
  }
}
#footer footer {
  margin: 0 auto;
  padding: 48px 0;
  padding-left: 14px;
  padding-right: 14px;
  max-width: 70.63rem;
  display: flex;
  justify-content: space-between;
  @media only screen and (max-width: 767px) {
    padding: 24px 0px;
  }
}

.footer__list--font-color {
	margin-bottom: 6px;
	color: var(--gray-300);
}

.footer__list--flex {
	display: flex;
	color: var(--content-disabled);
	margin-top: 2px;
	margin-bottom: 2px;
}

.footer__list--flex:last-child {
	display: block;
}

.footer__img--size {
  width: 49.64px;
  height: 59.08px;
  @media only screen and (max-width: 767px) {
    width: 43 0.52px;
    height: 49 0.42px;
  }
}
#footer footer li {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  @media only screen and (max-width: 767px) {
    font-size: 12px;
    line-height: 18px;
  }
}
#footer .footer__anchor {
  margin: 1.25rem 0;
  @media only screen and (max-width: 767px) {
    width: 52px;
    display: flex;
  }
}

#footer .footer__anchor li {
  display: inline-flex;
  color: var(--gray-300);
  align-items: center;
  margin-right: 1rem;
  @media only screen and (max-width: 767px) {
    font-size: 12px;
    display: flex;
  }
}

#footer .footer__anchor a {
	font-weight: 600;
	color: inherit;
	font-size: inherit;
}

footer .logo {
	display: flex;
	align-items: flex-end;
}

#footer .footer__info {
	margin-top: 0.375rem;
}

#footer .footer__info li {
	align-items: center;
}

/* ===== etc ===== */
/* snb */
.snb {
	display: flex;
	display: none;
	flex-direction: column;
	position: fixed;
	top: 3.5rem;
	width: 100%;
	left: 100%;
	right: 0;
	height: calc(100vh - 3.5rem);
	background-color: var(--white);
	z-index: 100;
	-webkit-transition: background 0.25s ease-in-out;
	transition: background 0.25s ease-in-out;
}

.my-profile,
.snb .snb__profile {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  padding:16px;
  align-items: center;
}

.my-profile > div,
.snb .snb__profile > div {
  display: flex;
  align-items: center;
  gap:12px;
}

.my-profile .my-profile__img,
.snb .snb__profile .profile__img {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	-webkit-border-radius: 6.25rem;
	border-radius: 6.25rem;
	background: url(/images/img_profile_bg.svg) no-repeat center;
	overflow: hidden;
}

.my-profile .my-profile__img img,
.snb .snb__profile .profile__img img {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.my-profile .my-profile__name,
.snb .snb__profile .profile__name {
	display: block;
	font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
	
}

.my-profile .my-profile__email,
.snb .snb__profile .profile__email {
	display: block;
	font-weight: 400;
	flex: auto;
	color: var(--content-sub);
  font-size: 13px;
  line-height: 14px;

}

.snb .snb__btn {
	display: flex;
	width: 100%;
	padding: 8px 16px;
	gap: 0.5rem;
	border-width: 0 0 1px;
}

.snb .snb__nav .snb__btn > a {
  display: flex;
  position: relative;
  padding: 0;
  font-weight: 500;
  text-align: left;
  border: 0;
}

.snb .snb__btn [class*='btn'] {
	flex: 1 1 0;
}

.snb .snb__nav > ul > li > a {
  display: flex;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
}

.snb .snb__nav > ul > li > a:hover{
  background-color: var(--gray-50);
}

.accordion-nav > .accordion__head {
 padding: 14px 16px;
}

.accordion-nav > .accordion__head > .accordion__head-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
}
  
  
.accordion-nav .accordion__body {
  padding: 0;
}  
  
.accordion-nav .accordion__body > ul > li:hover {
  background-color: var(--gray-200)
}

.accordion-nav .accordion__body > ul > li > a{
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
  display: flex;
  width: 100%;
  height: 44px;
  padding: 12px 32px;
}

.accordion-nav .btn-accordion-toggle {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  background: url(/images/icon/chevron_right_lightgray.svg) no-repeat center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.accordion-nav.sts-active .btn-accordion-toggle {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.accordion-nav.sts-active .accordion__head-title {
  color: var(--primary-blue);
}

.snb__nav .accordion-nav .accordion__head .btn-accordion-toggle {
 padding: 0;
}

.snb__nav .accordion-nav.sts-active .accordion__head-title {
 color: var(--content-main);
}

.snb__nav .accordion__head:hover .btn-accordion-toggle {
 background-image: url(/images/icon/chevron_right_lightgray.svg);
}

body.snb--open {
	overflow: hidden;
}

body.snb--open .snb {
	display: flex;
	left: 0;
	overflow: scroll;
}

/* tab-bar */
#tab-bar {
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 98;
	height: 60px;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--border-outline);
	border-radius: 12px 12px 0px 0px;
	border-top: 1px solid var(--Color-System-Border-borderNormal, #F1F4F6);
	background:#fff;
	backdrop-filter: blur(8px);
}

#tab-bar>a {
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#tab-bar>a>span {
	font-size: 10px;
	color: var(--content-caption);
}

#tab-bar .sts-active>span {
	color: var(--content-main);
	font-weight: 600;
}

#tab-bar .ic-tab-bar {
	margin-bottom: 4px;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-image: url(/images/bottomnavigation/Enabled.webp);
}

#tab-bar .sts-active .ic-tab-bar {
	background-image: url(/images/bottomnavigation/Active.webp);
}

#tab-bar .ic-tab-bar.history {
	background-position: 0 0;
}

#tab-bar .ic-tab-bar.report {
	background-position: -27px 0;
}

#tab-bar .ic-tab-bar.change {
	background-position: -55px 0;
}

#tab-bar .ic-tab-bar.mycar {
	background-position: -84px 0;
}

#tab-bar .ic-tab-bar.mypage {
	background-position: -113px 0;
}

/* container  */
#container {
	min-height: 100vh;
	padding-top: 4.625rem;
	height: auto;
	flex: 1;
}

/* btn-box */
.btn__top {
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--content-caption);
}

.btn-area.full .c-btn {
	width: 100%;
}

.btn-area.full .c-btn+.c-btn {
	margin-top: 8px;
}

.btn-area.half {
	display: flex;
	gap: 0 10px;
}

.btn-area.half .c-btn {
	flex: 1;
}

.btn__top.onLoading {
	text-align: center;
	color: var(--primary-blue);
}

/* section  */
.title, .contents {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.title {
	position: relative;
	padding-top: 64px;
}

/* arrow-title 사이즈 */
.arrow-title {
	position: relative;
	padding-top: 16px;
	margin: 0 auto;
}

.arrow-title.size-s {
	max-width: 438px;
}

.arrow-title.size-m {
	max-width: 620px;
}

.arrow-title.size-l {
	max-width: 740px;
}

.title__main {
	font-weight: 700;
	font-size: 32px;
	color: var(--content-main);
	line-height: 52px;
}

.title__sub {
	margin-top: 8px;
	line-height: 24px;
	color: var(--content-sub);
}

.title .btn-back.only-m {
	position: absolute;
	top: 10px;
	left: 16px;
	margin-bottom: 24px;
	width: 24px;
	height: 24px;
	background: no-repeat url(/images/icon/arrow_left_black.svg);
	background-size: contain;
}

.sub_title__main {
	font-size: 26px;
	line-height: 32px;
}

.sub_title__text {
	margin-top: 16px;
	line-height: 22px;
	color: var(--gray-700);
}

.title.on .title__main {
	font-size: 18px;
	text-align: center;
	position: fixed;
	z-index: 20;
	left: 0;
	right: 0;
	top: 0;
	padding: 12px 0;
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.title.on .title__main .btn-back {
	position: absolute;
	left: 16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.contents {
	padding-top: 50px;
}

@media only screen and (min-width: 768px) {
	#container {
		padding-bottom: 180px;
	}
}

@media only screen and (max-width: 767px) {
	/* container  */
	#container {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	/* header  */
	#header header {
		display: flex;
		align-items: center;
		padding: 0 1rem;
		min-height: 3.5rem;
	}
	#header .contents {
		width: 100%;
		align-items: center;
	}
	#header header .logo {
		margin: 0;
	}
	#header .header__nav {
		display: none;
	}

	/* footer  */
	#footer {
		padding: 0 10px;
		padding-bottom: 60px;
	}

	/* section  */
	.title, .contents {
		padding-left: 16px;
		padding-right: 16px;
	}
	.title {
		padding-top: 36px;
	}
	.contents .title__main {
		font-size: 26px;
		line-height: 32px;
	}
	.title__main {
		font-size: 26px;
		line-height: 32px;
	}
	.title__text {
		margin-top: 10px;
		font-size: 16px;
		line-height: 24px;
	}
	#container .arrow-title {
		padding-left: 16px;
		padding-right: 16px;
		width: 100%;
		max-width: 100%;
	}
	.elBuyer #header .header__right {
		visibility: hidden;
	}
}

.elBuyer #header h1 a {
	display: none;
	width: 100%;
	height: 100%;
}

.elBuyer #header .header__right {
	visibility: hidden;
}

.elBuyer #footer .footer__anchor {
	visibility: hidden;
}

@media only screen and (max-width: 480px) {
	#modal-promotion-popup .modal__contents>a>img {
		width: 100%;
	}
}

/*이중 레이어*/
@media only screen and (max-width: 480px) {
	#modal-promotion-popup2 .modal__contents>a>img {
		width: 100%;
	}
}
/*이중 레이어*/

/* ====================== */
/* page */
/* ====================== */
/* ===== 폼 ===== */
.l-form .title, .l-form .contents {
	width: 438px;
}

.l-form .contents {
	padding-top: 32px;
}

.l-form .btn-box {
	position: sticky;
	z-index: 5;
	left: 0;
	bottom: 0;
	padding: 44px 0 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 40%);
}

.l-form .btn-box.join-box {
  position: sticky;
  z-index: 5;
  left: 0;
  bottom: 0;
  padding: 44px 0 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 40%);
}

@media only screen and (max-width: 767px) {
	.l-form .title, .l-form .contents {
		width: 100%;
	}
	
	.l-form .btn-box {
		position: fixed;
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.l-form .btn-box.join-box {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* ===== 메인 ===== */
.l-home #header {
  background-color: transparent;
  position: sticky;
}

.l-home #container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow:hidden;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

 .l-home #container:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  background-size: cover;
  background-color: var(--inverse-background-primary)
} 

/* .l-home #container:after {
  content: '';
  width:1348.36px;
  height:363px;
  position: relative;
  z-index: 3;
  top: -1300px;
  left: 667.5px;
  background-color: var(--after-bg-color, transparent);
  transition: background-color 1s ease;
  filter: blur(100px);
  transform: rotate(-19.99deg);
} */

.l-home .title {
  padding-top: 160px;
  color: var(--white);
}

.l-home .title__main {
  font-size: 44px;
  color: var(--white);
}

.l-home .title__sub {
  color: var(--content-disabled);
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  margin-top: 8px;
  text-align: center;
}

.l-home .title_input--wrap {
  width:100%;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  justify-content: center;
}

.l-home .title_input--wrap > .title {
  margin: 0;
  text-align: left;
  padding-top: 20px;
}

.l-home .text-btn {
  color: var(--primary-blue);
}

.l-home .text-btn:hover {
  opacity: 0.8;
  transition: 0.1s;
}

.l-home .text-btn a img {
  width: 16px;
  height: 16px;
}

.l-home .text-btn a {
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 1;
}

.l-home .banner {
  height: 60px;
  background: #191f28;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 14px;
}

.l-home .banner-text {
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:6px;
}


@media only screen and (max-width: 767px) {
  .l-home .title_input--wrap > .title {
   max-width: 100%;
   margin-bottom: 30px;   
  }
 
  .l-home .title_input--wrap {
    width: 100%;
    padding-left: 0;
    display: flex;
    align-items: center;
  }
}

.l-home .banner-contents {
  width: 100%;
  max-width: 1130px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.l-home .carousel {
  overflow: hidden;
  position: relative;
  margin-top: 120px;
  border-radius: 16px;
}

@media only screen and (max-width: 767px) {
  .l-home .text-btn {
    justify-content: center;
  }
 
  .l-home .carousel {
    height: 172px;
  }
}

.l-home .carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.l-home .carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.l-home .carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  height: 100%;
}

.l-home .carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(255, 255, 255, 0.1);
  width: 34px;
  height: 34px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.l-home .mycar_mobile--wrap {
 position: relative;
 padding-right: 16px;
}

/* .l-home .mycar_mobile--wrap > .img-gradation {
 position: absolute;
   background: linear-gradient(
  to bottom,
  rgba(10, 15, 16, 0),
  rgba(10, 15, 16, 1)
);
    bottom: -10px;
    width: 100%;
    height: 90px;
} */

.l-home .new-car-img {
   width: 100%;
   height:500px;
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), 
   url(/images/home/home_new_car.jpg) no-repeat center;
   border-radius: 24px;
   display: flex;
   position: relative;
   background-size: cover;
   background-color: rgba(0, 0, 0, 0.6);
}

.l-home .new-car-img > div {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.l-home .new-car-img > div > p {
  font-weight: 700;
  font-size: 28px;
  line-height: 150%;
  letter-spacing: 0px;
  text-align: center;
  color: var(--inverse-content-main);
}

.l-home .input-sample--wrap {
  display: flex;
  align-items: center;
  gap:24px;
  margin-top: 20px;
}

.l-home .section-first {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--inverse-background-primary)
}

.l-home .section-second {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--inverse-background-primary);
  z-index: 10;
}

.l-home .section-third {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  background-color: var(--inverse-background-primary);
}

.l-home .section-fourth {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color:var(--inverse-background-primary);
  z-index: 10;
}

.l-home .section-second > .banner__title--wrap > h2 {
 color: #fff;
}

@media only screen and (max-width: 767px) {
  .l-home .new-car-img {
   margin-top: 36px;
  }
 
  .l-home .banner-contents {
   width: 100%;
   display: flex;
   flex-direction: column;
  }
}

.l-home .search_wrap {
  margin-bottom: -100px;
}

.l-home .search__input {
  flex-basis: auto;
}

.l-home .c-input input:not([type='button']):focus,
.l-home .c-input input:not([type='button']):active {
  -webkit-box-shadow: 0 0 0 0.125rem var(--primary-blue) !important;
  box-shadow: 0 0 0 0.125rem var(--primary-blue) !important;
}

.l-home .c-input input::-webkit-input-placeholder,
.l-home .c-input input::placeholder {
  font-weight: 400;
}

.l-home .c-input input {
  font-weight: 600;
  font-size: 16px;
}

.l-home .search__btn {
  flex: auto;
  min-width: 7.5rem;
}

.l-home .search-banner {
  border-radius: 10px;
  height: 114px;
  background-color: #191f28;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  position: relative; 
  left: 0;
  width: 100%;
}

.l-home .search-banner:hover {
  opacity: 0.9;
}

.l-home .search-banner > a {
  width: 100%;
}

.l-home .form-img--wrap {
  display: flex;
  justify-content: space-between;
  z-index: 1;
  position: relative;
  margin-top: 24px;
  max-width: 1130px;
  width: 100%;
}

.l-home .search__form--wrap {
    display: flex;
}
  
@media only screen and (max-width: 767px) {
  .l-home .search-banner {
    align-items: center;
  }
  
  .l-home .search__form--wrap {
    padding: 0 16px;
  }
  
 .l-home .form-img--wrap {
    flex-direction: column;
  }
 
 .l-home .mycar_mobile--wrap {
    margin-top: 51.3px;
    width: 100%;
    align-items: center;
    padding-right: 0;
  }
 
 .l-home .mycar_mobile--wrap > img {
    width: 162px;
  }
 
 .l-home #container:after {
    top:-1700px
 }
}

.l-home .search-banner__wrap {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
}

.l-home .banner__title--wrap {
  z-index: 4;
  color: #fff;
  text-align: left;
  margin-top: 100px;
  max-width: 1130px;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 100px;
}

.l-home .foot-banner {
  margin-top: 120px;
  background-color: #06B060;
  padding : 18px 32px;
  display: flex; 
  border-radius: 10px;
}

.l-home .foot-banner__img {
 width: 140px;
 height: 140px;
}

.l-home .foot-banner .foot-banner__title-img--wrap {

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-home .foot-banner .foot-banner__title--wrap {
  padding: 16px 0;
}


.l-home .foot-banner .foot-banner__title {
 font-size: 32px;
 line-height: 46px;
 margin-bottom: 20px;
}

.l-home .foot-banner .foot-banner__link {
  display: flex;
  align-items: center;
}

.l-home .foot-banner .foot-banner__link > img {
  width: 16px;
  height: 16px;
}

.container > .banner__title--wrap:nth-child(2) {
  margin-bottom: 0;
  margin-top: 0;
}
.l-home .banner__title--wrap > h2 {
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 26px;
}

.l-home .search-banner__text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-left: 20px;
  font-size: 16px;
  text-align: left;
}

.l-home .search-banner__wrap a {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .l-home .search-banner__wrap {
    display: flex;
    align-items: flex-start;
  }
  .l-home .search-banner__wrap a {
    width: 24px;
  }
  .l-home .banner__title--wrap {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
  }
  
  .l-home .foot-banner__img {
    display: none;
  }
  .l-home .foot-banner .foot-banner__title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
  }
  .l-home .foot-banner {
    padding:18px;
  }
}

.l-home .search-banner__text-wrap div {
  margin-bottom: 10px;
  font-weight: 400;
}

.l-home .search-banner__text-wrap__span {
  font-size: 14px;
  font-weight: 400;
  color: var(--content-disabled);
  text-align: left;
}

.l-home .search-banner__text-wrap__span2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  text-align: left;
  line-height: 28px;
}

.l-home .recent-car-card {
  background-color: rgba(25, 31, 40, 1);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  max-width: 328px;
  min-width: 262px;
  margin-top: 24px;
  cursor: pointer;
}

.l-home .recent-car-card__img-detail--wrap {
 display: flex;
 align-items: center;
 gap:12px;
 
}

.l-home .recent-car-card__detail {
  display: flex;
  flex-direction: column;
  gap:4px;
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--inverse-content-sub)
  
}
.l-home .recent-car-card__img {
  padding:  12px 7.5px;
  background-color: var(--inverse-background-tertiary);
  border-radius: 6px;
}

@media only screen and (max-width: 767px) {
  .l-home .search-banner__text-wrap {
    gap: 0;
    justify-content: flex-start;
  }

  .l-home .search-banner__text-wrap__span2 {
    font-size: 18px;
    display: flex;
  }
}

.l-home .search-banner__text-wrap__span3 {
  font-size: 14px;
  font-weight: 400;
  color: var(--content-disabled);
  line-height: 23.87px;
  text-align: left;
}

.l-home .search-banner__text-wrap__star {
  display: flex;
  color: var(--content-disabled);
  justify-content: center;
  position: relative;
}

.l-home .search-banner__text-wrap__star span {
  display: flex;
  justify-content: center;
}

.l-home .support-banner {
  border-radius: 10px;
  background-color: #191f28;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  left: 0;
  width: 100%;
}

.l-home .support-banner:hover {
  opacity: 0.9;
}

.l-home .support-banner__wrap {
  padding: 22px;
}

.l-home .support-banner__text-wrap {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  gap: 8px;
  font-size: 16px;
  text-align: left;
}

.l-home .support-banner__text-wrap__span2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  text-align: left;
  line-height: 28px;
}

.l-home .support-banner__text-wrap__span3 {
  font-size: 14px;
  font-weight: 400;
  color: var(--content-disabled);
  line-height: 23.87px;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .l-home .search-banner__btn {
    font-size: 16px;
    width: 20px;
    height: 30px;
  }

  .l-home .search-banner__text-wrap__span3 {
    line-height: 22px;
  }
}

.floating {
  position: fixed;
  display: flex;
  right: 1.5rem;
  bottom: 1.5rem;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-end;
  z-index: 10009;
}

.floating > a > img {
  border-radius: 8px;
  height: 64px;
}

.l-home .signup-banner {
    position: fixed;
    bottom: 1.5rem;
    right: 50%;
    transform:translateX(50%);
    display: flex;
    flex-direction: column;
    gap: 11px;
    z-index: 10;
}
.l-home .signup-banner > a {
  height: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(24px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  gap:6px;
  padding: 0 64px;
  white-space: nowrap;
}


.l-home .signup-banner > a > span {
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--content-main);
}


@media only screen and (max-width: 767px) {
  .floating {
    display: none;
  }
  .l-home .signup-banner {
    bottom:10%;
  }
}

@media only screen and (max-width: 767px) {
  .l-home #container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-home .title__main {
    font-size: 32px;
    line-height: 150%;
    text-align: center;
    width: 200px;
  }

  .l-home .title {
    padding-top: 0px;
  }

  .l-home .search__form {
    gap: 10px;
    display: flex;
    flex-direction: column;
  }

  .l-home .search__input {
    flex-basis: auto;
    width: 262px;
    display: flex;
    justify-content: center;
    gap: 11px;
    flex-direction: column;
    margin: 0 auto;
  }

  .l-home .other__item {
    margin: 0.125rem;
  }

  .l-home .floating {
    display: none;
  }

  .l-home .banner-item {
    height: 5rem;
  }

  .l-home .banner-item .banner-text {
    padding: 1.2rem 1rem;
  }

  .l-home .banner-item .banner-text__title {
    line-height: 1.35;
    font-size: 0.875rem;
  }

  .l-home .banner-item .banner-text__sub {
    font-size: 0.75rem;
  }

  .l-home .banner-item img {
    max-width: 100%;
    height: 100%;
  }

  .l-home .search__btn .c-btn {
    margin-top: 12px;
    min-width: 75px;
    height: 48px;
    padding: 4px 16px;
    font-size: 14px;
    line-height: 16px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
  }

  .l-home .search-banner {
    position: relative;
    left: 0;
    width: 100%;
  }

  .l-home .search-banner img {
    width: 56px;
    height: 56px;
  }
  
  .l-home .support-banner__wrap > img {
    width: 56px;
    height: 56px;
  }
}

@media only screen and (min-width: 640px) {
  .l-home #container {
    text-align: center;
    padding-top: 0;
  }

  .l-home .title__main {
    font-size: 44px;
    line-height: 1.4;
  }

  .l-home .title__sub {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 16px;
    text-align: left;
    margin-bottom: 0;
  }

  .l-home .title {
    padding-top: 64px;
  }

  .l-home .search__form {
    display: flex;
    width: 328px;
    flex-direction: column;
  }

  .l-home .search__input {
    flex-basis: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 11px;
    flex-direction: column;  
  }

  .l-home .other__item {
    margin: 0.125rem;
  }

  .l-home .banner-item {
    height: 5rem;
  }

  .l-home .banner-item .banner-text {
    padding: 1.2rem 1rem;
  }

  .l-home .banner-item .banner-text__title {
    line-height: 1.35;
    font-size: 0.875rem;
  }

  .l-home .banner-item .banner-text__sub {
    font-size: 0.75rem;
  }

  .l-home .banner-item img {
    max-width: 100%;
    height: 100%;
  }

  .l-home .search__btn .c-btn {
    margin-top: 16px;
  }
}


/* ===== error ===== */
.l-maintainance {
	text-align: center;
}

.maintainance {
	margin-top: 181px;
}

.l-maintainance h2 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

.l-maintainance p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

/* ===== service ===== */
.l-service {
	overflow: hidden;
}

.l-service .main-logo--margin {
	width: 56px;
}

.l-service .h1--margin {
	margin-top: 40px;
}

.l-service .p--font {
	font-size: 18px;
	font-weight: 500;
	margin-top: 30px;
}

.l-service .section-intro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	height: 840px;
	background: var(--black);
	color: var(--white);
}

.l-service .section-intro::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 40%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 363px;
	height: 363px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	background: linear-gradient(270deg, rgba(48, 130, 247, 0.3) 0%,
		rgba(28, 76, 145, 0.2) 100%);
	filter: blur(42px);
}

.l-service .section-intro .arrow_down_btn {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.l-service a[href="https://www.nicednr.co.kr/ko/index.do"] button {
	background-color: var(--gray-900);
}

.l-service a[href="https://www.nicednr.co.kr/ko/index.do"] button:hover {
	background-color: var(--gray-950);
}

@media only screen and (max-width: 767px) {
	.l-service .main-logo--margin {
		width: 56px;
	}
	
	.l-service .h1--margin {
		margin-top: 40px;
		font-size: 18px;
		font-weight: 600;
	}
	
	.l-service .p--font {
		font-weight: 400;
		margin-top: 20px;
		font-size: 14px;
	}
	
	.l-service .section-intro .arrow_down_btn {
		position: absolute;
		bottom: 30%;
		transform: translateX(-50%);
		left: 50%;
	}
}

.l-service .section-intro .text {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 40%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}

.l-service .section-intro h1 {
	font-size: 48px;
	font-weight: bold;
}


.l-service .contents {
	padding-top: 0;
	max-width: 100%;
}

.l-service [class*='cont-'] {
	position: relative;
	z-index: 1;
	max-width: 1130px;
	margin: 0 auto;
}

.l-service [class*='cont-2'] .text p {
	margin-top: 24px;
	line-height: 26px;
	color: #fff;
	font-weight: 400;
}

.l-service [class*='cont-1'] .text p, .l-service [class*='cont-3'] .text p,
	.l-service [class*='cont-4'] .text p {
	margin-top: 24px;
	line-height: 26px;
	color: var(--content-sub);
	font-weight: 400;
}

.l-service [class*='cont-5'] {
	padding: 0 16px;
}

.l-service [class*='cont-'] .text-btn {
	display: flex;
	gap: 20px;
}

.l-service [class*='cont-'] .text-btn a {
	display: inline-block;
	color: var(--primary-blue);
	gap: 10px;
}


.l-service .text-btn--wrap {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 20px;
}

.l-service .cont-1 .logo-box {
	position: relative;
	overflow: hidden;
}

.l-service .cont-1 .logo-box::before, .l-service .cont-1 .logo-box::after
	{
	content: '';
	position: absolute;
	z-index: 5;
	top: 0;
	height: 100%;
	width: 67px;
	pointer-events: none;
}

.l-service .cont-1 .logo-box::before {
	left: 0;
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 1) 100%);
}

.l-service .cont-1 .logo-box::after {
	right: 0;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 1) 100%);
}

.l-service .cont-1 .logo-box ul {
	gap: 0 36px;
}

.l-service .cont-1 .logo-box li {
	width: max-content !important;
}

.l-service .cont-1 .logo-box .swiper-wrapper {
	transition-timing-function: linear !important;
}

.l-service .cont-1 .text {
	margin-top: 140px;
	text-align: center;
	margin-right: 16px;
	margin-left: 16px;
	margin-bottom: 36px;
}

.l-service .cont-1 .text p {
	font-size: 24px;
	color: var(--content-main);
	font-weight: bold;
}

.l-service .cont-1 .text>span {
	display: block;
	color: var(--content-caption);
	margin-top: 14px;
	font-size: 14px;
}

.l-service .cont-2 {
	padding: 84px 16px;
	display: flex;
	align-items: center;
	gap: 56px;
}

.l-service .cont-2::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	background-color: var(--gray-950);
}

.l-service .cont-2 .box {
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #fff;
	-webkit-border-radius: 32px;
	border-radius: 32px;
}

.l-service .cont-2 .box:hover {
	-webkit-animation: hover-floating 0.3s forwards
		cubic-bezier(0, 0, 0.5, 1);
	animation: hover-floating 0.3s forwards cubic-bezier(0, 0, 0.5, 1);
}

.l-service .cont-2 .box .text, .l-service .cont-2 .box figure {
	flex: 1;
}

.l-service .cont-2 .box .text {
	padding: 0 40px;
}

.l-service .cont-2 .box .text h1 {
	width: 202px;
}

.l-service .cont-2 .box .text h1>img {
	width: 100%;
}

.l-service .cont-3 .image {
	border-radius: 20px;
	width: 561px;
}

.l-service .cont-3>ul {
	margin: 0px 16px;
}

.l-service .image-text__wrap--first {
	display: flex;
	align-items: center;
	gap: 56px;
	margin: 240px 0;
}

.l-service .image-text__wrap--second {
	display: flex;
	align-items: center;
	gap: 56px;
	margin-bottom: 240px;
}

.l-service .image-text__wrap--third {
	display: flex;
	align-items: center;
	gap: 56px;
	margin-bottom: 240px;
}

.l-service .image-text__wrap--fourth {
	display: flex;
	align-items: center;
	gap: 56px;
}

@media only screen and (max-width: 767px) {
	.l-service .image-text__wrap--first {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0px;
		margin-top: 24px;
	}
	.l-service .image-text__wrap--second {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
	}
	.l-service .image-text__wrap--third {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
	}
	.l-service .image-text__wrap--fourth {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
	}
	.l-service .cont-3 .image {
		width: 100%;
		gap: 0;
		border-radius: 0;
	}
	.l-service .cont-3>ul {
		margin: 0;
	}
	.l-service .section-intro .text {
		top: 35%;
	}
	.l-service [class*='cont-1'] .text p, .l-service [class*='cont-3'] .text p,
		.l-service [class*='cont-4'] .text p {
		margin-top: 10px;
	}
	.l-service [class*='cont-5'] {
		padding: 0px;
	}
}

.l-service>#footer {
	padding-bottom: 0;
}


.l-service .cont-3 .text h4 {
	font-size: 40px;
	font-weight: bold;
	color: var(--content-main);
}

.l-service .cont-4 {
	padding: 68px 0px;
	margin-bottom: 144px;
}

.l-service .cont-4 .c-btn {
	display: table;
	margin: 50px auto 0;
}

.l-service .cont-4 .accordion .question-mark {
	color: var(--gray-300);
	display: inline-block;
}

.l-service .cont-4 .accordion-box {
	gap: 0 300px;
}

.l-service .cont-4 .accordion-box h4 {
	padding: 20px 16px;
	flex-shrink: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--content-main);
}

.l-service .cont-4 .accordion__container {
	flex: 1;
}

.l-service .cont-5 a {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.l-service .cont-5 a::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 196px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(/images/service/customer-service.webp);
	border-radius: 16px;
	z-index: -1;
}

.l-service .cont-5 a>div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.l-service .cont-5 a>div>p {
	font-size: 28px;
	color: #fff;
	font-weight: 500;
	line-height: 36px;
}

.l-service .cont-5 a>span {
	margin-top: 36px;
	font-size: 18px;
	color: var(--content-sub);
	display: block;
}

.l-service .cont-5 a>span>.icon {
	margin-left: 4px;
	width: 24px;
	height: 24px;
	background-image: url(/images/icon/arrow_right_gray.svg);
}

@media only screen and (max-width: 767px) {
	.l-service .section-intro {
		height: 720px;
	}
	.l-service .section-intro::before {
		width: 155px;
		height: 155px;
		top: 35%;
	}
	.l-service .section-intro h1 {
		font-size: 26px;
	}

	.l-service .contents {
		padding: 0;
	}
	.l-service [class*='cont-'] button {
		height: 36px;
	}
	.l-service [class*='cont-2'] .text p {
		margin-top: 10px;
		font-size: 14px;
		line-height: 24px;
		text-wrap: wrap;
		word-break: break-all;
		font-weight: 400;
	}

	.l-service [class*='cont-'] .text-btn a {
		font-size: 14px;
	}
	.l-service .cont-1 .text {
		margin-top: 64px;
		margin-bottom: 0px;
	}
	.l-service .cont-1 .text p {
		font-size: 20px;
		line-height: 28px;
		margin-top: 24px;
	}
	.l-service .cont-1 .text p>span {
		display: block;
	}
	.l-service .cont-1 .text>span {
		margin: 12px 0 0;
	}
	.l-service .cont-2 {
		padding: 84px 16px;
		flex-direction: column;
	}
	.l-service .cont-2 .box {
		flex-direction: column-reverse;
		-webkit-border-radius: 16px;
		border-radius: 16px;
	}
	.l-service .cont-2 .box .text, .l-service .cont-2 .box figure {
		width: 100%;
	}
	.l-service .cont-2 .box .text {
		padding: 32px 20px;
	}
	.l-service .cont-2 .box .text h1 {
		width: 114px;
	}
	.l-service .cont-2 .box figure {
		max-height: 316px;
		overflow: hidden;
	}
	.l-service .cont-2 .box figure>img {
		width: 100%;
	}
	.l-service .cont-3 div.text {
		margin-left: 0;
		padding: 20px 16px 120px 16px;
	}
	.l-service .cont-3 figure {
		width: 100%;
		background-position: center;
		-webkit-border-radius: 0;
		border-radius: 0;
	}
	.l-service .cont-3 .text {
		width: 100%;
		padding: 28px 16px 0;
	}
	.l-service .cont-3 .text h4 {
		font-size: 20px;
		line-height: 28px;
	}
	.l-service .cont-3 .text p>br {
		display: none;
	}
	.l-service .cont-3 li.online figure img:nth-child(1) {
		top: 16px;
	}
	.l-service .cont-3 li.online figure img:nth-child(2) {
		top: 175px;
	}
	.l-service .cont-3 li.online figure img:nth-child(3) {
		top: 240px;
	}
	.l-service .cont-3 li.nice-price figure img:nth-child(1) {
		top: 125px;
	}
	.l-service .cont-4 {
		padding-top: 20px;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 0;
	}
	.l-service .cont-4 .accordion-box {
		display: block;
	}
	.l-service .cont-4 .accordion-box h4 {
		font-size: 18px;
		padding: 10px 16px;
	}
	.l-service .cont-4 .c-btn {
		display: none;
	}

	.l-service .cont-5>a>div>button {
		height: 36px;
	}
	.l-service .cont-5 a {
		padding: 32px 0;
		height: 165px;
	}
	.l-service .cont-5 a::before {
		height: 165px;
		border-radius: 0;
	}
	.l-service .cont-5 a>div>p {
		font-size: 20px;
	}
	.l-service .cont-5 a>span {
		margin-top: 10px;
		font-size: 14px;
	}
	.l-service .cont-5 a>span>.icon {
		width: 16px;
		height: 16px;
	}
}

/* ===== front ===== */
.join__form_top {
	margin-bottom: 36px;
}

.join__form_top>p {
	line-height: 30px;
	font-size: 24px;
}

.join__form .help-checkbox-agree {
	margin-top: 20px;
}

.join__form .help-checkbox-agree>p {
	position: relative;
	padding-left: 10px;
	line-height: 1.39;
	font-size: 12px;
	color: var(--content-caption);
}

.join__form .help-checkbox-agree>p::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--gray-400);
	-webkit-border-radius: 100%;
	border-radius: 100%;
	left: 0;
	top: 5px;
}

.join__form .terms .agree__check {
	display: block;
	padding: 18px 0;
	border-bottom: 1px solid var(--border-normal);
}

.join__form .terms .agree__check label {
	color: var(--content-main);
}

.join__form .terms .terms__item {
	display: flex;
	flex-direction: row;
	gap: 0 10px;
	margin: 20px 0;
}

.join__form .terms .terms__text {
	flex: auto;
	display: flex;
	flex-direction: column;
}

.join__form .terms .terms__text-title {
	display: flex;
	justify-content: space-between;
	color: var(--content-sub);
}

.join__form .terms .terms__text-title a {
	color: var(--primary-blue);
}

/* 로그인 */
.l-login .title {
	padding-top: 92px;
	text-align: center;
}

.l-login .title__main {
	font-size: 36px;
}

.l-login .login {
	padding-top: 50px;
}

.l-login .c-input {
	margin-top: 0.75rem;
}

.l-login .c-input:first-child {
	margin: 0;
}

.l-login .login__option {
	display: flex;
	padding: 1.375rem 0 3.125rem;
	justify-content: space-between;
	align-items: center;
}

.l-login .login__option a {
	color: var(--gray-600);
	font-size: 14px;
	font-weight: 500;
}

.l-login .login__option .c-check label {
	font-size: 14px;
	font-weight: 500;
	gap: 0.5rem;
}

.l-login .c-btn {
	width: 100%;
	justify-content: center;
}

.l-login .c-btn+.c-btn {
	margin-top: 0.75rem;
}

/* 회원가입 */
.l-join.fin {
	text-align: center;
}

.l-join.fin .title__main::before {
	content: '';
	display: block;
	margin: 0 auto 24px;
	width: 64px;
	height: 64px;
	background: no-repeat url(/images/img_join_finish.svg);
}

.l-join.fin .join__success p {
	padding-top: 14px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gray-800);
}

.l-join.fin .join__success p span {
	font-size: inherit;
	font-weight: 700;
	color: inherit;
}

.l-join.fin .join__success .btn-box {
	padding-top: 70px;
}

/* 찾기 */
.l-find .find__step_box {
	margin-top: 84px;
	text-align: center;
}

.l-find .find__step_box>span {
	display: block;
}

.l-find .find__step_box .btn-box {
	padding-top: 84px;
}

.l-find .id__box>p {
	font-size: 14px;
	color: var(--content-sub);
}

.l-find .id__box>span {
	margin-top: 25px;
	padding: 24px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	background-color: var(--bg-light-gray);
}

.l-find .password__box img {
	width: 58px;
}

.l-find .password__box>p {
	margin: 32px 0 16px;
	font-weight: 700;
	font-size: 20px;
}

.l-find .password__box>span {
	font-size: 14px;
	color: var(--content-sub);
}

/* 샘플리포트 */

.l-sample .contents {
 padding: 0;
}

.l-sample .arrow__btn--wrap {
 padding: 10px 0px 10px 0px;
    background-color: var(--white);
}

.l-sample .arrow__btn--inner {
     width: 620px;
    padding: 0 12px;
} 
.l-sample .text-btn {
 font-size: 14px;
}

.l-sample img {
	max-width: 100%;
}

@media only screen and (max-width: 767px) {
	.l-join.fin .title__main::before {
		margin: 30px auto 20px;
	}
	.join__form_top>p {
		line-height: 25px;
		font-size: 18px;
	}
	.join__form .terms .agree__check {
		padding: 10px 0;
	}
	.join__form .terms .terms__item {
		margin: 15px 0;
	}
	.l-find .id__box {
		width: 100%;
	}
	.l-find .id__box span {
		margin-top: 1rem;
	}
}

/* ===== support ===== */
/* 고객센터 */

.l-support .contents {
  padding-top: 30px;

}

.l-support .help {
	margin-top: 36px;
	color:var(--content-main);
}

.l-support .help-title {
	display: block;
	margin-bottom: 48px;
	font-size: 20px;
	font-weight: 700;
}

.l-support .card-support {
	border: none;
	padding : 0;
}

.l-support .card__list {
	display: flex;
	gap: 0 10px;
	width: 100%;
}

.l-support .help .card__list .item {
	flex: 1;
	position: relative;
	display: inline-block;
	padding: 1.25rem 1.5rem;
	text-align: left;
	line-height: 2.2;
	font-size: 1.25rem;
	font-weight: 600;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
	height: 172px;
	background-color: var(--gray-50);
	box-shadow: none;
	border: none;
}

.l-support .help .card__list .item:hover {
  background-color: var(--gray-100);
  animation: none;
}

.l-support .help .card__list .item>a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.l-support .help .card__list .item>a>div {
	display: flex;
	justify-content: flex-end;
}

.l-support .question--wrap {
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	padding: 10px 0;
}

.l-support .question--wrap>h5 {
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--content-main);
}

.l-faq .btn-back, .l-contact .btn-back {
	display: table;
	font-size: 1.25rem;
	font-weight: 600;
}

.l-faq .faq-search--wrap {
 display: flex; 
 gap: 8px; 
 margin-top: 30px;
}

.l-faq .btn-back:before, .l-contact .btn-back:before {
	content: '';
	display: inline-block;
	margin-right: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	background: url(/images/icon/arrow_left_darkgray.svg) no-repeat center;
	vertical-align: -0.3125rem;
}

.l-faq  .list-middot dd>span {
  padding-left: 24px;
  line-height: 1.5;
}

.l-faq .list-middot dd>span:before {
  left: 0
}

.l-faq .accordion__head {
  padding: 16px;
}

.l-faq .c-chip.select {
  padding: 10px 0;
}


.l-support .btn-box, .l-contact .btn-box {
	text-align: center;
	padding: 60px 0;
}

/* 자주묻는질문 */
.support__tab__head__item--active {
	color: var(--content-main);
}

.tab__head__item.sts-active {
	font-weight: 600;
	color: var(--content-main);
}

.l-faq .contents {
	padding-top: 0;
}

.l-faq .support__tab {
	display: flex;
	gap: 0.625rem;
	padding: 0 0;
	width: 100%;
	overflow: hidden;
	margin-top: 24px;
	margin-bottom: 8px;
}

.l-faq .support__tab__underline {
	position: absolute;
	bottom: 0;
	height: 3px;
	background-color: var(--black);
	transition: all 0.2s ease;
	display: flex;
	padding: 0px 16px;
}

.l-faq .support__tab>.tab__head {
	position: sticky;
	max-width: 100%;
	left: 0;
	display: flex;
	align-items: center;
	top: 146px;
	overflow-x: scroll;
}

.l-faq .faq {
	padding: 0.5rem 0;
}

.l-faq .faq:not(:last-child) {
	border-bottom: 1px solid var(--border-outline, #eaedf0);
}

.l-faq .faq__head {
	display: flex;
	padding: 1rem;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
}

.l-faq .faq__head-title {
	position: relative;
	padding-left: 2.1rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--content-main);
	word-break: break-word;
	line-height: 1.3;
	flex: auto;
}

.l-faq .faq__head-title:before {
	content: 'Q.';
	margin-right: 1rem;
	color: var(--content-disabled);
	font-weight: 600;
	font-size: inherit;
	position: absolute;
	left: 0;
}

.l-faq .faq__head:hover {
	background-color: var(--bg-light-gray);
}

.l-faq .faq__head:hover .faq__head-title {
	color: var(--primary-blue);
}

.l-faq .faq__head:hover .btn-faq-toggle {
	background-image: url(/images/icon/chevron_right_blue.svg);
}

.l-faq .btn-faq-toggle {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	background: url(/images/icon/chevron_right_lightgray.svg) no-repeat center;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.l-faq .faq.sts-active .btn-faq-toggle {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.l-faq .faq__body {
	display: none;
	margin-top: 0.5rem;
	padding: 1.5rem 3.125rem;
	font-weight: 500;
	color: var(--content-main);
	line-height: 1.4;
	border-radius: 0.5rem;
	background-color: var(--gray-50);
}

/* 공지사항 */
.l-notification .contents {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

.l-notification .support__tab {
	display: flex;
	gap: 0.625rem;
	padding: 0 0;
	width: 100%;
	overflow: hidden;
	margin-top: 32px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-outline);
}

.l-notification .support__tab__underline {
	position: absolute;
	bottom: 0;
	height: 3px;
	background-color: var(--black);
	transition: all 0.2s ease;
	display: flex;
	padding: 0px 16px;
}

.l-notification .support__tab>.tab__head {
	position: sticky;
	max-width: 100%;
	left: 0;
	display: flex;
	align-items: center;
	top: 146px;
}

.notification-list__card {
	margin-bottom: 9px;
}

.notification-list__card>a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 16px;
}

.notification-list__card:hover {
	background-color: var(--gray-50);
	cursor: pointer;
}

.notification-list__card-title {
	font-weight: 500;
	line-height: 20px;
	color: var(--content-main);
}

.notification-list__card-date {
	font-weight: 400;
	line-height: 20px;
	color: var(--content-sub);
	font-size: 14px;
}

/* 문의하기 */
.l-contact .contact__form {
	display: flex;
	gap: 1.5rem;
	flex-direction: column;
}

.l-contact .contact__form-row {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.l-contact .contact__form-row label {
	width: 8.75rem;
	padding: 0.875rem 0;
	color: var(--content-main);
}

.l-contact .contact__form-row label+* {
	flex: auto;
}

.l-contact .contact__info {
	position: absolute;
	top: 1rem;
	left: 1rem;
	line-height: 1.4;
	color: var(--content-disabled);
	pointer-events: none;
}

.l-contact .contact__form textarea:focus+.contact__info {
	display: none;
}

.l-contact .contact__info strong {
	font-weight: 400;
	color: var(--content-error);
}

.l-contact .ta-center {
	padding-top: 3.75rem;
}

.l-contact .ta-center .c-btn {
	width: 16rem;
	max-width: 100%;
}

@media only screen and (max-width: 767px) {
	.l-support .help-title {
		margin-bottom: 1rem;
	}
	
	.l-support .card__list {
		flex-direction: column;
		gap: 0.625rem;
	}
	
	.l-support .help .card__list .item {
		height: auto;
		line-height: 1.5;
		padding: 1rem 1.5rem;
		font-size: 1.125rem;
	}
	
	.l-support .question--wrap {
		padding: 10px 16px;
	}
	
	.l-support .accordion__container {
		padding: 0px 0px;
	}
	
	.l-support .contents {
		padding-left: 0;
		padding-right: 0;
	}
	
	.l-support .faq__head {
		padding: 12px 1rem;
	}
	
	.l-support .faq__head-title {
		font-size: 1rem;
	}
	
	.l-support .faq__body {
		padding: 1rem 3.125rem;
	}
	
	.l-support .faq-more {
		margin: 1.875rem 0 6.25rem;
	}
	
	.l-support .btn-faq-toggle {
		width: 1.25rem;
		height: 1.25rem;
	}
	
	.l-faq .title, .l-contact .title {
		padding-top: 10px;
	}
	
	.l-faq .btn-back, .l-contact .btn-back {
		margin-bottom: 10px;
		font-size: 0;
		color: var(--gray-700);
	}
	
	.l-faq .btn-back:before, .l-faq .btn-back:before {
		opacity: 0.6;
		vertical-align: -6px;
		margin-right: 5px;
	}
	
	.l-faq .contents {
		padding-left: 0;
		padding-right: 0;
	}
	
	.l-faq .support__tab {
		margin-top: 24px;
		padding: 0 0;
		flex-wrap: wrap;
		gap: 8px;
	}
	
	.l-faq .support__tab button {
		min-width: auto;
		width: 90px;
		padding: 12px 0;
	}
	
	.l-faq .faq-search--wrap {
  padding: 0 16px;
  }
	
	.l-faq .faq__head {
		padding: 12px 1rem;
	}
	.l-faq .faq__head-title {
		font-size: 1rem;
	}
	.l-faq .btn-faq-toggle {
		width: 20px;
		height: 20px;
	}
	.l-faq .faq__body {
		padding: 1rem 50px;
	}
	.l-faq .faq-more {
		margin: 30px 0 100px;
	}
	
	.l-faq .c-chip.select {
	 padding: 10px 16px;
	}
	
	.l-contact .contact__form-row {
		flex-direction: column;
	}
}

/* ===== agreeDoc ===== */
.l-policy p {
	line-height: 1.6;
	color: var(--content-main);
	word-spacing: -0.4px;
}

.l-policy .text {
	line-height: 1.6;
	color: var(--content-main);
	word-spacing: -0.4px;
}

.l-policy .tls {
	margin: 12px 0;
}

.l-policy .tls tbody td {
	white-space: normal;
}

.l-policy .indent {
	margin: 5px 0;
	padding-left: 1rem;
}

.l-policy .underline {
	text-decoration: underline;
}

.l-policy .contents h3 {
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 700;
}

.l-policy .contents h3:not(:first-child) {
	margin-top: 32px;
}

.l-policy .agree-list li {
	margin-bottom: 35px;
	font-size: 16px;
	line-height: 20px;
}

.l-policy .agree-list li>a::after {
	content: '';
	display: inline-block;
	vertical-align: bottom;
	width: 20px;
	height: 20px;
	background: no-repeat url(/images/icon/chevron_right_black.svg);
	background-size: contain;
}

.l-policy .agree-tab__head {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	margin-bottom: 32px;
}

.l-policy .agree-tab__head button {
	border: 0;
	background: transparent;
	padding: 0.625rem 0;
	font-size: 1.5rem;
	font-weight: 700;
}

.l-policy .agree-tab__head button.sts-active {
	color: var(--black);
	-webkit-box-shadow: inset 0 -0.1875rem 0 0 var(--black);
	box-shadow: inset 0 -0.1875rem 0 0 var(--black);
}

.l-policy .agree-tab__contents {
	display: none;
}

.l-policy .agree-tab__contents.sts-active {
	display: block;
}

.l-policy .title .text {
	padding-top: 1.5rem;
}

@media only screen and (max-width: 767px) {
	.l-policy .contents {
		padding: 2rem 1rem;
	}
	.l-policy h2 {
		padding-bottom: 0.625rem;
		font-size: 1.5rem;
	}
	.l-policy h3 {
		font-size: 1.125rem;
	}
}

/* mycar */

.l-mycar .car-number-select {
 display: flex;
 align-items: center;
 border-radius: 8px;
 cursor:pointer;
 padding: 8px 0;
}

.l-mycar .car-number-select:hover{
  background-color: var(--gray-100);
}

.l-mycar.l-mycar-sample .car-number-select:hover{
  background-color: #fff;
  cursor: auto;
}

.l-mycar .car-number-select > img {
  width: 20px;
  height: 20px;
  transform : rotate(90deg);
}

.l-mycar .quick__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  padding: 0px 16px 10px 16px;
  margin-bottom: 16px;
}

.l-mypage.user .quick__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  padding: 20px 16px;
  margin-bottom: 16px;
}

.l-mypage.user .quick__item a,
.l-mycar .quick__item {
  position: relative;
  display: flex;
  padding: 14px 0px;
  gap: 2px;
  border-radius: 12px;
  text-align:center;
  cursor: pointer;
  border-radius: 0.5rem;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--gray-100);
  align-items: center;
}

.l-mypage.user .quick__item a:hover,
.l-mycar .quick__item:hover {
   background-color: var(--gray-200);
}

.l-mypage.user .quick .nice-tag,
.l-mycar .quick .nice-tag {
  display: none;
  position: absolute;
  padding: 0.25rem 0.5rem;
  top: 0.625rem;
  right: 0.625rem;
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--content-error);
  border: 1px solid var(--content-error);
}

.l-mypage.user .quick__label,
.l-mycar .quick__label {
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 color: var(--content-sub);
}

.l-mypage.user .quick__value,
.l-mycar .quick__value {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--content-main);
}

.l-mypage.user .quick__value em,
.l-mycar .quick__value em {
  font-weight: 600;
  color: var(--content-main);
}

.l-mycar .quick__value__loading {
  display: inline-block;
  font-size: 0;
  width: 1.188rem;
  height: 1.188rem;
  background: url(/images/i_quick_spinner.svg) no-repeat center;
  background-size: contain;
  overflow: hidden;
  -webkit-animation: spinner 0.5s linear infinite;
  animation: spinner 0.5s linear infinite;
}

.l-mycar .car-profile {
  position: relative;
  padding-top: 12px;
  padding-left: 16px;
  padding-right: 16px; 
  align-items: center;
  display: flex;
}

.l-mycar .car-profile__img {
  position: relative;
  width: 40%;
  height: 7.5rem;
}

.l-mycar .car-profile__img img:last-child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 94%;
  height: 94%;
  max-width: 94%;
  max-height: 94%;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-mycar .car-profile__img img:first-child {
 position: absolute;
 width: 36px;
 top: 0;
 right: 0;
 z-index: 1;
}

.l-mycar .car-profile__title{
  padding: 0.375rem 0;
  font-size: 20px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-mycar .car-profile__title__model {
  margin-right: 0.1875rem;
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
}

.l-mycar .car-profile__title__trim {
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
  border: 0;
  background: 0;
  cursor: pointer;
  display: flex;
  align-items: center; 
}

.l-mycar .car-profile__title__trim:after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/images/icon/chevron_right_gray.svg) no-repeat center;
  background-size: contain;
  vertical-align: -1px;
}

.l-mycar.l-mycar-sample .car-profile__title__trim:after{
 background: none;
}

.l-mycar .car-profile__title__trim:hover {
  opacity: 0.6;
}


.l-mycar.l-mycar-sample .car-profile__title__trim:hover {
  opacity: 1;
  cursor: auto;
}

.l-mycar .car-profile__sub--first-block {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
}

.l-mycar .car-profile__sub--second-block {
 font-family: Pretendard;
 font-weight: 400;
 font-size: 12px;
 line-height: 18px;
 color: var(--content-caption);
}

.l-mycar .car-profile__sub--second-block span:after {
  content: '' !important;
}

.l-mycar .car-profile__sub--second-block span:last-child {
 text-decoration: underline;
}

.l-mycar .btn-update {
  padding:6px 2px; 
}

.l-mycar .btn-update:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.l-mycar.l-mycar-sample .btn-update:hover {
  background-color: #fff;
  cursor: auto;
}

.l-mycar .car-profile__timestamp {
  display: inline-block;
  color: var(--content-sub) !important;
  font-size: 13px;
  margin-right: 2px;
}

.l-mycar .car-spec__item span {
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
 align-items: center;
 gap: 4px;
 text-align: right;
}

@media only screen and (max-width: 767px) {
  .l-mycar .car-profile {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .l-mycar .car-profile__container {
    width: 100%;
  }
  
  .l-mycar .car-profile__img {
    width: 100%; 
  }
}

.l-mycar .tab__title {
 font-weight: 600;
 font-size: 20px;
 line-height: 30px;
 padding: 8px 16px;
 color: var(--content-main); 
}

.l-mycar .divider {
 height: 12px;
 background-color: var(--gray-50);
 margin: 40px 0;
}

.bottom-sheet__content .info-wrapper {
 margin-bottom: 24px
}

.bottom-sheet__content .info-line {
  padding: 4px 0px;
  color: var(--content-sub);
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.bottom-sheet__content .info-main-wrapper {
  height: 400px;
}

.bottom-sheet__content .info-main-wrapper .tab__title {
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  color: var(--content-main);
}
 
.l-mycar .info-line:last-child {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
}

.bottom-sheet.my-car-summary {
 max-width: 740px;
 height:50%;
 overflow: scroll;
}

.bottom-sheet.my-car-summary .bottom-sheet__content {
  padding: 0px;
}

.bottom-sheet.my-car-summary .bottom-sheet__header {
 padding-top: 20px;
 padding-right: 16px;
 padding-bottom: 6px;
 padding-left: 16px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 position: sticky;
 top: 0;
 z-index: 30;
 background-color: white;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:first-child {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:first-child > span {
  display: flex;
  align-items: center;
  color: var(--primary-blue);
  font-weight: 600;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:last-child {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:last-child:hover {
   background-color: var(--gray-100);
}

.bottom-sheet.my-car-summary .bottom-sheet__header >  div > h3 {
 font-weight: 700;
 font-size: 20px;
 line-height: 36px;
 letter-spacing: 0px;
 padding: 0;
 color: var(--content-main);
}

.bottom-sheet .card.my-car-summary {
 padding: 8px 16px;
 display: flex;
 justify-content: space-between;
 border: none;
 border-radius: 0;
 cursor:pointer;
 margin-bottom: 8px;
}

.bottom-sheet .card.my-car-summary:hover {
  background-color: var(--gray-100);
}

.bottom-sheet .card.my-car-summary > .brand-name-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.bottom-sheet .card.my-car-summary > .brand-name-info > span {
 font-weight: 700;
 font-size: 18px;
 line-height: 28px;
 color: var(--content-main);
}

.bottom-sheet .card.my-car-summary.selected {
  background-color: var(--gray-100);
}


.bottom-sheet .card.my-car-summary.selected > .brand-name-info > span{
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--primary-blue);
}

.bottom-sheet .card.my-car-summary > .brand-name-info > div {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.bottom-sheet .card.my-car-summary >.car-image {
  width: 110px;
}

.bottom-sheet .card.my-car-summary >.car-image >img {
  width: 100%;
}

/* ===== myCarinfor ===== */


.l-mycar {
  padding-bottom: 0 !important;
}

.l-mycar .contents {
  padding: 0;
  max-width: 740px;
  min-width: 0;
  flex: auto;
}

.l-mycar .tab {
  max-width: calc(1130px + 2rem);
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  background-color: var(--bg-white);
  z-index: 0;
  position: static;
  border-bottom: none;
}

.l-mycar .tab>div {
  width: 100%;

}

.l-mycar .arrow__btn--wrap {
 padding: 10px 0px 10px 0px;
 background-color: var(--white);
}

.l-mycar .arrow__btn--inner {
 width: 740px;
 padding: 0 12px;
}

@media only screen and (max-width: 767px) {
  .l-mycar .arrow__btn--wrap {
        top: 56px;
        padding: 10px 12px 10px 12px;
   }
    
  .l-mycar .arrow__btn--inner {
     padding: 0;
  }
}

.l-mycar .tab__head {
  overflow: hidden;
  display: flex;
  padding: 2.5rem 0 0.5rem;
  justify-content: space-between;
  position: sticky;
  top: 76px;
  -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
  backdrop-filter: saturate(180%) blur(1.25rem);
}

[id^='slide'] .tab__head {
  max-width: 100%;
  left: 0;
}

.l-mycar .tab__head h3 {
  position: relative;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: var(--content-main);
}

.l-mycar .tab__head__right .c-btn+.c-btn {
  margin-left: 0.25rem;
}

.l-mycar .tab__contents {
  padding: 0;
  background-color: var(--bg-white);
}

.l-mycar .tab__contents:first-child {
   padding: 16px 0;
}

.l-mycar .tab__overview > .tab__contents {
  margin-bottom: 0;
  padding: 0;
}

.l-mycar .tab__title {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 4px 16px;  
}

.l-mycar .tab__title:first-child {
  padding: 4px 16px 4px 16px;
}

.l-mycar .tab__sub-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--content-main);
  padding: 8px 16px 8px 16px;
}

.l-mycar .tab__title p {
  display: block;
  width: 100%;
  flex: none;
  color: var(--content-caption);
  padding-top: 0.5rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.l-mycar .tab__title h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--content-main);
}

.l-mycar .tab__title strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--content-main);
  line-height: 20px;
}

.l-mycar .tab__title em {
  color: var(--primary-blue);
  font-size: inherit;
  font-weight: inherit;
}

.l-mycar .tab__btn {
  display: none;
  padding: 0.25rem 1rem;
  gap: 0.5rem;
  background: rgba(250, 250, 252, 0.92);
}

.l-mycar .tab__btn .c-btn {
  margin: 0;
  flex: 1 1 0;
  height: 2.625rem;
  font-size: 0.875rem;
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-mycar .tab__btn .btn-report-share:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/share_white.svg);
  background-size: contain;
}

.l-mycar .tab__btn .btn-report-save {
  background-color: var(--black);
  color: var(--white);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.l-mycar .tab__btn .btn-report-save:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/arrow_down_tray_black.svg);
  background-size: contain;
}

.l-mycar .tab__btn .btn-report-preview {
  background-color: rgba(252, 252, 252, 0.92);
}

.l-mycar .tab__btn .btn-report-preview:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/icon/search_b_gray.svg);
}

.l-mycar .btn-report-save:before {
  vertical-align: -0.125rem;
  background-image: url(/images/arrow_down_tray_black.svg);
}

.l-mycar .btn-report-preview:before {
  vertical-align: -0.125rem;
  background-image: url(/images/clipboard_gray.svg);
}

.bottom-sheet.c-tip .notice {
  padding: 0;
}

.l-mycar .notice {
  text-align: left;
  background-color: var(--bg-light-gray);
  padding: 14px;
  border-radius: 10px 0px 0px 0px;
}

.bottom-sheet.c-tip .notice > span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-sub);
}

.l-mycar .notice > span {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--content-caption);
  margin-bottom: 4px;
}

.l-mycar .notice__title {
  display: block;
  margin-bottom: 0.625rem;
  font-weight: 700;
  color: var(--content-main);
  font-size: 1.125rem;
}

.l-mycar .notice__title em {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--content-main);
}

.l-mycar .notice__title em:before {
  content: '';
  display: inline-block;
  margin-right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
  background: url(/images/icon/info_linecircle_gray.svg) no-repeat center;
  background-size: contain;
}

.bottom-sheet.c-tip .notice__list,
.l-mycar .notice__list {
  margin-top: 10px;
}

.bottom-sheet.c-tip .notice__list li{
  position: relative;
  display: block;
  padding-left: 1.188rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-sub);
}

.l-mycar .notice__list li {
  position: relative;
  display: block;
  padding-left: 1.188rem;
  color: var(--content-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.bottom-sheet.c-tip .notice__list li:not(:first-child),
.l-mycar .notice__list li:not(:first-child) {
  margin-top: 0.3125rem;
}

.bottom-sheet.c-tip .notice__list li:before,
.l-mycar .notice__list li:before {
  content: '•';
  display: inline-block;
  position: absolute;
  left: 0.4375rem;
  width: 0.1875rem;
  height: 0.1875rem;
  -webkit-border-radius: 6.25rem;
  border-radius: 6.25rem;
}

.l-mycar .notice__list li strong {
  font-weight: 600;
  font-size: inherit;
  color: inherit;
}

.l-mycar .chart__inner {
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-mycar .case {
  display: flex;
  margin-bottom: 3.125rem;
  justify-content: center;
}

.l-mycar .case__title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-sub);
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}


.l-mycar .case--blind .case__title:before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  vertical-align: -0.25rem;
  background: url(/images/i_report_case_blind.svg) no-repeat center;
  background-size: contain;
}

.l-mycar .case__list {
  font-weight: 400;
  font-size: 14px; 
  margin-top: 0.75rem;
}

.l-mycar .case__list li {
  position: relative;
  display: block;
  padding-left: 1.188rem;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-caption);
}

.l-mycar .case__list li+li {
  margin-top: 0.125rem;
}

.l-mycar .case__list li:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0.625rem;
  left: 0.4375rem;
  width: 0.1875rem;
  height: 0.1875rem;
  -webkit-border-radius: 6.25rem;
  border-radius: 6.25rem;
  background-color: var(--content-caption);
}

.l-mycar .case__list li strong {
  font-weight: 600;
  font-size: inherit;
  color: inherit;
}

.l-mycar .server-error {
  text-align: center;
  padding: 30px 0;
}

.l-mycar .server-error:before {
  content: '';
  display: block;
  margin: 0 auto 10px;
  width: 24px;
  height: 24px;
  background: url(/images/icon/icon-warning-triangle.svg) no-repeat center;
  background-size: contain;
}

.l-mycar .server-error strong {
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
color: var(--content-sub);

}

.l-mycar .server-error p {
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 text-align: center;
 margin-top: 10px;
 color: var(--content-caption);
}

.l-mycar .server-error .c-btn {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  text-decoration: underline;
  margin-top: 24px;
  color: var(--primary-blue);

}

.l-mycar .car-content {
  margin-bottom: 3.125rem;
}

.l-mycar .predicted-mileage-period {
 display: flex;
 justify-content: space-between;
}

.l-mycar .car-spec__item .predicted-mileage {
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--content-main)
 
}

.l-mycar .car-profile__img img {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 94%;
  height: 94%;
  max-width: 94%;
  max-height: 94%;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-mycar .car-profile__container {
  flex: auto;
}

.l-mycar .car-profile__container>* {
  position: relative;
}

.l-mycar .car-profile__brand {
  font-size: 14px;
  font-weight: 400;
  color: var(--content-caption);
}

.l-mycar .car-profile__title {
  padding: 0.375rem 0;
  font-size: 24px;
  flex-wrap: wrap;
}

.l-mycar .car-profile__title__model {
  margin-right: 0.1875rem;
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
}

.l-mycar .car-profile__title__trim {
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
  border: 0;
  background: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.l-mycar .car-profile__title__trim:after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/images/icon/chevron_right_gray.svg) no-repeat center;
  background-size: contain;
}

.l-mycar .car-profile__sub {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
  flex-direction: column;
}

.l-mycar .car-profile__sub span {
  color: var(--content-caption);
  font-weight: 400;
}

.l-mycar .car-profile__sub span:not(:last-child):after {
  content: '•';
  display: inline-block;
  margin: 0 2px;
  height: 0.875rem;
}

.l-mycar .btn-update {
  padding:6px 2px; 
}


.l-mycar .btn-update:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}


.l-mycar .car-profile__timestamp {
  display: inline-block;
  color: var(--content-sub) !important;
  font-size: 13px;
  margin-right: 2px;
}

.l-mycar .car-spec__item {
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
  position: relative;
}

.l-mycar .car-spec__item > button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.l-mycar .vehicle-value-wrapper {
 display: flex;
 width: 100%;
 justify-content: space-between;
}

.l-mycar .residual-value {
 display: flex;
 flex-direction: column;
 font-size: 16px;
 font-weight: 600;
 line-height: 24px;
}

.l-mycar .residual-value > button {
 display: flex;
 align-items: center;
 gap:4px;
}

.l-mycar .residual-value > button >span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
}

.l-mycar .depreciation-value {
 display: flex;
 flex-direction: column;
 font-size: 16px;
 font-weight: 600;
 line-height: 24px;
 text-align: right;
 color: var(--content-main)
}

.l-mycar .depreciation-value > button {
  display: flex;
  align-items: center;
  gap:4px;
}

.l-mycar .depreciation-value > button > span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
}

.l-mycar .registration-period-price-wrapper {
  padding: 10px 0px 10px 0px; 
}

.l-mycar .registration-period-price-wrapper > div > button {
  display: flex;
  align-items: center;
  gap:4px;
}

.l-mycar .year-later-price {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 8px 16px 8px 16px;
 gap: 6px;
}

.l-mycar .year-price-wrapper {
 display: flex;
 gap:21px;
 padding: 4px 0;
 color: var(--content-main);
 font-size: 15px;
}

.l-mycar span.year {
 color: var(--content-sub);
 width: 40px;
}

.l-mycar span.price {
 text-align: left;
 width: 80px;
}

.l-mycar span.later-price {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub)
}

.l-mycar .registration-period-price-wrapper > div {
  color: var(--content-sub);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.l-mycar .model-detail-price-wrapper {
    padding: 8px 16px 8px 16px;
}

.l-mycar .model-detail-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0px 8px 0px;
    gap: 6px;
}

.l-mycar span.model {
 color: var(--content-sub);
}

.l-mycar span.detail-price {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: var(--content-main);
}

.l-mycar .car-spec__item strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: left; 
  color: var(--primary-blue);
}

.l-mycar .car-spec__item>em {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--content-caption);
}

.l-mycar .car-spec__item .c-tip__icon {
  vertical-align: -4px;
}

.l-mycar-summary .car-info-wrapper {
 padding: 10px 16px;
}

.l-mycar-summary .car-info,
.l-mycar .car-info {
  font-size: 14px;
  color: var(--content-caption);
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--content-warning);
  display: flex;
}

.l-mycar .car-basic-info > span > img {
 transform:rotate(90deg);
}

.l-mycar .car-basic-info-wrapper {
  padding: 10px 16px;
}

.l-mycar .car-basic-info {
  font-size: 14px;
  color: var(--content-sub);
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--border-outline);
  display: flex;
  font-weight: 600;
}

.l-mycar .car-basic-info:hover{
  background-color: var(--gray-50);
}

.l-mycar .car-basic-info > div {
  display: flex;
  width: 51px;
  padding: 0px 15px 0px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #F9FAFB;
  border-radius: 8px 0 0 8px;
}

.l-mycar-summary .car-basic-info > span,
.l-mycar .car-basic-info > span{
  padding: 10px;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.l-mycar-summary .car-info > div,
.l-mycar .car-info > div{
  display: flex;
  width: 51px;
  padding: 0px 15px 0px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--content-warning);
  background: rgba(251, 179, 34, 0.08);
}

.l-mycar-summary .car-info > span,
.l-mycar .car-info > span{
  padding: 14px;
}

.l-mycar-summary .car-info > span > span,
.l-mycar .car-info > span > span{
  color: var(--primary-blue);
}

.l-mycar .total-count {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.l-mycar .tab__overview .car-content {
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
  margin-bottom: 0;
}

.l-mycar .tab__overview .notice {
  margin-top: 3.75rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
}

.l-mycar .tab__market-price .car-content, .l-mycar .tab__mileage .car-content {
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-mycar .market-price {
  padding: 0 16px;
}


.l-mycar .market-price > .car-info-wrapper {
  padding: 10px 0;
}

.l-mycar .predicted-price {
  margin-bottom: 16px;
  margin-top: 16px;
}

.l-mycar .model-detail-price-list {
  margin-bottom: 16px;
}

.l-mycar .tab__mileage .car-content {
  margin-bottom: 0;  
}

.l-mycar .car-spec {
  padding: 0 16px;
}

.l-mycar .tab__mileage .car-spec__item {
  border: 0;
}

.l-mycar .tab__accident .accident {
  text-align: center;
  width: 29.38rem;
  max-width: 100%;
  margin: 6.25rem auto;
}

.l-mycar .tab__accident .accident p {
  font-size: 14px;
}

.l-mycar .tab__accident .accident .btn-accident-go {
  display: block;
  margin-top: 1.25rem;
  border: 1px solid var(--gray-500);
  background-color: transparent;
  font-size: 1.75rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.l-mycar .tab__accident .accident .btn-accident-go:after {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 1rem;
  background: url(/images/icon/arrow_right_black.svg) no-repeat center;
  background-size: contain;
  vertical-align: -0.5rem;
}

.l-mycar .tab__specification .tab__title:not(:first-child) {
  margin-top: 3.25rem;
}

.l-mycar .tab__specification .spec-img {
  position: relative;
  margin: -0.25rem 0 1.25rem;
  width: 100%;
  overflow: auto;
}

.l-mycar .tab__specification .spec-img img {
  display: block;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-mycar .tab__specification .spec-img>span {
  position: absolute;
  font-size: 0.75rem;
  left: 0;
  bottom: 0;
}

.l-mycar .tab__specification .spec-img .spec01 {
  left: 23rem;
  bottom: 1.875rem;
}

.l-mycar .tab__specification .spec-img .spec02 {
  left: 29rem;
  bottom: 6.125rem;
}

.l-mycar .tab__specification .spec-img .spec03 {
  left: 46.5rem;
  bottom: 1.875rem;
}

.l-mycar .tab__specification .spec-img .spec04 {
  left: 18.4 .063rem;
  bottom: 66px;
}

.l-mycar .tab__specification .spec-img .spec05 {
  left: 45.81rem;
  bottom: 4.063rem;
}

.l-mycar .tab__specification .spec-img .spec06 {
  left: 63.5rem;
  bottom: 4.063rem;
}

.l-mycar .tab__maintenance .tls td {
  word-break: break-all;
}

#tbMenu6 tr td:nth-child(4) {
  text-align: left;
}

.l-mycar #slide2 .tab__contents {
 padding-top: 0;
}

.l-mycar .maintenance-check {
  margin-bottom: 2rem;
}

.l-mycar .maintenance-check td {
  vertical-align: middle;
}

.l-mycar .label-safe {
  display: inline-block;
  font-weight: 500;
  color: var(--primary-blue);
}

.l-mycar .label-safe:after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: -0.3125rem;
  background: url(/images/i_safe.svg) no-repeat center;
}

.l-mycar .label-warning {
  display: inline-block;
  font-weight: 500;
  color: var(--content-error);
}

.l-mycar .label-warning:after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: -0.3125rem;
  background: url(/images/alert_triangle_red.svg) no-repeat center;
}

.l-mycar .find-history-btn-box {
  padding: 8px 16px 8px 16px;
  width: 100%;
}

.l-mycar .btn-find-history {
  padding: 10px;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--blue-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: default;
}

/* 임시 비활  */
/* .l-mycar .btn-find-history:hover {
  background-color: var(--blue-50);
} */

.l-mycar .btn-find-history > .icon-chevron {
  width: 16px;
  height: 16px;
  color: var(-blue-200)
   
}

.l-mycar .btn-find-history >div > span {
   color : var(--blue-200);
   font-size: 14px;
   line-height: 16px; 
}

.l-mycar .btn-find-history >div > span > span{
  font-weight: 600;
}

.l-mycar .special-use-card-list {
  display:flex;
  padding: 8px 16px 8px 16px;
  gap: 8px;
}

.l-mycar .special-use-card-list > .card > div  {
  display: flex;
  flex-direction: column;
  align-items: center;  
}

.l-mycar .special-use-card-list > .card > div > span {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--content-sub); 
}

.l-mycar .special-use-card-list > .card > div > span:last-child {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--content-main);
}

.l-mycar #recall-list > ul > li {
 padding: 12px 16px 12px 16px;
}

.l-mycar #recall-list > ul  {
 display: flex;
 flex-direction: column;
}

.l-mycar #drop-list > ul > li {
  padding: 12px 16px 12px 16px;
 
}

.l-mycar .recall-info {
 margin-bottom: 8px;
}

.l-mycar .parts-progress-wrapper {
 display: flex;
 justify-content: space-between;
}

.l-mycar .recall-parts {
  color: var(--content-main);
  font-size: 15px;  
  font-weight: 600;
  line-height: 22px;
}

.l-mycar .progress-status {
 font-size: 15px;
 font-weight: 600;
 line-height: 1.5;
}

.l-mycar .progress-status.success {
  color: var(--primary-blue);
}

.l-mycar .progress-status.pending {
  color: var(--content-error);
}

.l-mycar .recall-date {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}

.l-mycar .recall-desc {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-sub);
 
}

.l-mycar .year-header {
  padding: 16px;
  font-size: 18px;
  color: var(--content-main);
  border-radius: 10px;
  background-color: var(--gray-50);
}

.recall-center {
 border-bottom: 1px solid var(--content-caption);
}

.l-mycar .repair-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px 12px 16px;  
}

.l-mycar .repair-info {
  display: flex;
  gap: 6px;
  flex-direction: column-reverse;
}

.l-mycar .repair-info > div{
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mycar .repair-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-mycar .repair-cost {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--primary-blue);
}

.l-consumablesDetail .hidden-item,
.l-mycar .hidden-item {
  display: none !important;
}

.l-mycar .no-info {
 gap: 10px;
 padding-top: 48px;
 padding-right: 10px;
 padding-bottom: 48px;
 padding-left: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--content-sub);
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 display: flex;
 flex-direction: column;
}


.l-mycar .no-info.accident {
 text-align: center;
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 margin: 0px auto;
}

.l-mycar .no-info.accident > div{
  display: flex;
  flex-direction: column;
}

.l-mycar .no-info.accident > div > a{
  margin-top:10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-decoration: underline;
  color: var(--primary-blue);
}

.l-mycar .btnShowMore,
.l-mycar .btnHideMore {
  align-items: center;
  display: flex;
  width: 100%;
  height: 48px;
  justify-content: center;
  border: 1px solid var(--border-outline);
  border-radius: 10px; 
}

.l-mycar .btnShowMore.top, 
.l-mycar .btnHideMore.top {
 height: 100%;
 border: none;
}

.l-mycar .show-more-btn {
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--content-sub);
 font-size: 14px;
 font-weight: 500;
 line-height: 16px;
 margin: 0 16px;
 border-radius: 8px;
}

.l-mycar .total-count > .show-more-btn {
 margin: 0;
 padding: 6px 4px; 
}

.l-mycar .show-more-btn:hover {
  background-color: var(--gray-100)
}

.l-mycar .btnShowMore img {
  transform: rotate(90deg);
  width: 20px;
  height: 20px;
}

.l-mycar .btnHideMore img {
 transform: rotate(-90deg);
 width: 20px;
 height: 20px;
}
.l-mycar .owner-history {
 display: flex;
 justify-content: space-between;
 padding: 12px 16px 12px 16px;
}

.l-mycar .registration-details-wrapper {
 display: flex;
 flex-direction: column;
 gap:4px;
}

.l-mycar .register-date {
 font-size: 15px;
 font-weight: 600;
 line-height: 22px;
 color: var(--content-main); 
}

.l-mycar .vhr-no {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption); 
}

.l-mycar .contents-user-wrapper {
  display: flex;
  flex-direction: column;
  gap:4px;
  text-align: right;
}

.l-mycar .res-contents-ctg {
 font-size: 15px;
 font-weight: 600;
 line-height: 22px;
 color: var(--primary-blue);
}

.l-mycar .res-user-info {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}
.l-mycar .date-drop-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.l-mycar .car-drop {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-mycar .car-drop-date {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-mycar #impound-list {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main); 
}

.l-mycar #impound-list > ul > li {
  padding: 12px 16px; 
}

.l-mycar .date-organization-wrapper {
  display: flex;
  gap:4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mycar #mortgage-list > ul > li {
  padding: 12px 16px;
}

.l-mycar .mortgage-info-wrapper {
  display: flex;
  gap:4px;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main);
  justify-content: space-between;
}

.l-mycar .mortgage-info-wrapper > div {
   display: flex;
   flex-direction: column;
}

.l-mycar .mortgage-info-wrapper > span {
  color: var(--primary-blue);
}

.l-mycar .mortgage-info-wrapper > div > span:nth-child(2) {
 font-weight: 400;
 font-size: 13px;
 line-height: 18px;
 color: var(--content-caption);
}

.l-mycar #checkup-list > ul >li{
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.l-mycar .inspecnm-date-wrapper {
 display: flex;
 flex-direction: column;
}

.l-mycar .inspecnm-date-wrapper > span:first-child {
 font-weight: 600;
 font-size: 15px;
 line-height: 22px;
 color: var(--content-main);
}

.l-mycar .inspecnm-date-wrapper > span:last-child {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mycar .station-status-wrapper {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.l-mycar .station-status-wrapper > span:first-child {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--primary-blue);
}

.l-mycar .station-status-wrapper > span:last-child {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mycar .tab__checkup .next {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
}

.l-mycar .tab__checkup .next__title {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
}

.l-mycar .tab__checkup .next__period {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--content-main);
}

.l-mycar .tab__checkup .next__info {
  color: var(--content-disabled);
  font-size: 0.875rem;
}

.l-mycar .tab__recall .tls td {
  white-space: normal;
}

.tls__tr--background-color {
  background-color: var(--bg-light-gray);
}

.l-mycar .mortgage {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.l-mycar .mortgage+.mortgage {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border-normal, #f1f4f6);
}

.l-mycar .tax {
  margin-bottom: 2.5rem;
  padding: 0px 16px;
}

.l-mycar .car-tax {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
  padding: 0 16px;
}

.l-mycar .tax__info {
  padding-top: 0.375rem;
  color: var(--content-disabled);
  font-size: 0.875rem;
}

.l-mycar .tax__amount {
  color: var(--primary-blue);
  font-family: Pretendard;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;

}

.l-mycar .tax__amount em {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

.l-mycar .period {
  padding: 4px 16px;
}

.l-mycar .period__title {
  color: var(--content-main);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 4px;
}

.l-mycar .period__contents--first-half,
.l-mycar .period__contents--second-half {
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  color: var(--content-sub);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.btn-report-like,
.btn-report-search,
.btn-report-share {
 width: 32px;
 height: 32px;
}

.btn-report-like:hover,
.btn-report-search:hover,
.btn-report-share:hover{
  background-color: var(--gray-100);
  border-radius: 6px;
}

.l-mycar .period-header {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--content-caption);    
}

.l-mycar .period-header > div{
    display: flex;
}

.l-mycar .period-header > div > div:first-child{
    display: flex;
    width: 60px;
}

.l-mycar .period-item {
   display: flex;
   justify-content: space-between;
   padding: 4px 0;
}

.l-mycar .period-item > div{
  display: flex;
}

.l-mycar .period-label {
  width: 60px;
  color: var(--content-sub);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}

.l-mycar .tax-amount {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main);
}

.l-mycar .discount-rate {
  color: var(--primary-blue);
}

.l-mycar .total-count {
  padding: 10px 16px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.l-mycar .total-count em {
 color: var(--primary-blue);
}

.l-mycar .total-count strong {
 color: var(--content-sub);
}

.l-mycar #mileage-summary-list{
 margin-bottom: 16px;
}

.l-mycar .mileage-item {
 display:flex;
 justify-content: space-between;
 padding: 12px 16px 12px 16px;
}


.l-mycar .date-type-wrapper {
 display: flex;
 flex-direction: column;
}

.l-mycar .mileage-date {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-mycar .mileage-type {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mycar .amount-station-wrapper {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.l-mycar .mileage-amount {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
 
}

.l-mycar .mileage-station{
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}

.l-mycar .accident-card-list {
 display:flex;
 padding: 8px 16px 8px 16px;
 gap: 8px;
 
}

.l-mycar .accident-card-list > .card {
padding: 12px 16px 12px 16px;
  cursor: pointer;
}

.l-mycar .accident-card-list > .card:hover {
  background-color: var(--gray-100);

}

.l-mycar .accident-card-list > .card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--content-main);
}

.l-mycar .accident-card-list > .card > div > span:first-child {
  color: var(--content-sub);
  font-size: 13px;
  line-height: 1.5;
}

.l-mycar .accident-card-list > .card > div > span:last-child {
  font-weight: 600;
}

.l-mycar .notice-wrapper {
    padding: 16px;
}

.mycar__tab__underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--black);
  transition: all 0.2s ease;
  display: flex;
  padding: 0px 16px;
}


.l-mycar #slide12 .tab__contents {
 margin-bottom: 72px;
}

@media only screen and (max-width: 960px) {
  .l-mycar {
    display: block;
  }
  
  .l-mycar .contents {
    padding: 0;
  }
  
  .l-mycar .tab {
    padding: 0;
  }
  
  .l-mycar .tab__head {
    display: none;
  }
  
  .l-mycar .tab__contents {
    padding: 0px;
  } 
  
  .l-mycar .tab__btn {
    position: sticky;
    display: flex;
    z-index: 1;
    bottom: 0;
    padding: 0 1rem 1rem;
  }
  
  .l-mycar .tab__title {
   padding: 20px 0;
  }
  
  .l-mycar .tab__title h4 {
   font-size: 20px;
   font-weight: 600;
   line-height: 30px;
  }
  
  .l-mycar .tab__title strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    color: var(--content-main);
  }
  
  .l-mycar .tab__title span .i-source {
    display: none;
  }

  .l-mycar .chart__inner {
    height: auto;
    padding: 0 1rem 1rem;
  }
  
  .l-mycar .short__list {
    display: none;
  }
  
  .l-mycar .quick__list {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .l-mycar .tab__accident .accident p {
    font-weight: 500;
  }
  
  .l-mycar .tab__accident .accident .btn-accident-go {
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 1.375rem;
  }
  
  .l-mycar .tab__accident .accident .btn-accident-go:after {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -0.3125rem;
    background-size: contain;
  }
  
  .l-mycar .tab__specification .tvs th, .l-mycar .tab__specification .tvs td {
    white-space: nowrap;
  }
  
  .l-mycar .tab__specification .spec-img .spec01 {
    left: 22.81rem;
  }
  
  .l-mycar .tab__specification .spec-img .spec02 {
    left: 29.38rem;
  }
  
  .l-mycar .tab__specification .spec-img .spec03 {
    left: 46.56rem;
  }
  
  .l-mycar .tab__specification .spec-img .spec04 {
    left: 18.25rem;
  }
  
  .l-mycar .tab__specification .spec-img .spec05 {
    left: 45.75rem;
  }
  
  .l-mycar .tab__specification .spec-img .spec06 {
    left: 63.5rem;
    bottom: 4.188rem;
  }
}

@media only screen and (max-width: 767px) { 
  .l-mycar .car-profile {
   flex-direction: column-reverse;
  }
  
  .l-mycar .car-profile__container {
    width: 100%;
  }

  .l-mycar .car-profile__brand {
    font-size: 14px;
    font-weight: 400;
    color: var(--content-caption);
  }
   
  .l-mycar .car-profile__title {
    font-size: 20px;
  }
   
  .l-mycar .car-profile__title__trim:after {
    vertical-align: -1rem;
   }
   
  .l-mycar .car-spec {
     gap: 0;
   }
   
  .l-mycar .car-spec__item {
     padding: 1rem 0;
   }
   
  .l-mycar .car-spec__item span {
     padding-bottom: 0;
   }
   
  .l-mycar .quick__item .nice-tag {
     display: none;
     right: auto;
     top: -0.625rem;
     left: 50%;
     padding: 0.1875rem 0.375rem;
     transform: translateX(-50%);
     background-color: var(--bg-white);
   }

  .l-mycar .quick__label:after {
     content: none;
   }
 
  .l-mycar .tab__mileage .car-spec {
     gap: 1.5rem;
     flex-direction: row;
  }
  
  .l-mycar .tab__mileage .car-spec__item {
     flex-direction: column;
     justify-content: start;
  }
  
  .l-mycar .tab__accident .accident p {
     font-size: 1rem;
     line-height: 1.4;
  }
  
  .l-mycar .tab__accident .accident .btn-accident-go {
     padding: 1rem;
     font-size: 1.125rem;
  }
  
  .l-mycar .tab__accident .accident .btn-accident-go:after {
     margin-left: 0.625rem;
  }
  
  .l-mycar .tab__recall .tls td {
     white-space: nowrap;
  }
  
  .l-mycar .mortgage {
     grid-template-columns: 1fr;
  }
  
  .l-mycar .tax {
     padding-top: 0;
  }
  
  .l-mycar .notice-wrapper {
     padding: 16px 0;
  }
  
   .l-mycar .car-info > span{
     padding: 10px;
 }
}



/* mycarSample */

.l-mycar-sample .text-btn {
 font-size: 14px;
}

.l-mycar-sample #sidebar {
 top: 150px;
}

@media only screen and (max-width: 767px) {
 .l-mycar-sample #sidebar {
  top: 130px;
 }
}


/* ===== report ===== */

/** share **/
.l-payment {
	padding-top: 0;
}

.l-payment .contents {
	padding-top: 0;
	max-width: 600px;
}

.l-payment .payment__box {
	border-bottom: 1px solid var(--border-outline);
	padding: 20px 0;
}

.l-payment .payment__header, .l-payment .payment__box {
	background-color: var(--bg-white);
}

.l-payment .payment__header {
	position: sticky;
	top: 76px;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.82);
}

.l-payment .payment__header h2 {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 1rem 0;
}

.l-payment .payment__header .btn-back {
	position: absolute;
	top: 1rem;
	width: 24px;
	height: 24px;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	border: none;
	white-space: nowrap;
	background: transparent url(/images/btn_payment_back.svg) no-repeat center;
}

.l-payment .payment__box:last-child {
	border: none;
}

.l-payment .payment__box>div {
	position: relative;
	padding: 10px 0 10px 0;
}


.l-payment .payment__box__title {
	font-size: 18px;
}

.l-payment .payment__box__tip {
	position: absolute;
	right: 0;
	bottom: 1rem;
	font-size: 14px;
	color: var(--content-caption);
}

.l-payment .price__item {
	display: flex;
	padding: 8px 0;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.l-payment .price__item__left, .l-payment .price__item__right {
	font-size: 14px;
	color: var(--content-sub);
}

.l-payment .price__item__right {
	font-weight: 600;
}

.l-payment .price__total {
	margin-top: 0px;
}

.l-payment .price__total .price__item__left, .l-payment .price__total .price__item__right
	{
	font-weight: 600;
}

.l-payment .price__total .price__item__right {
	font-size: 20px;
	color: var(--primary-blue);
}

.l-payment .c-btn del {
	font-weight: 400;
	color: #c4c7fe;
	margin-right: 6px;
}

.l-payment .payer {
	display: flex;
	gap: 8px;
}

.l-payment label {
	font-size: 14px;
	color: var(--content-sub);
	padding-bottom: 8px;
}

.l-payment .payer__inner {
	width: 100%;
}

.l-payment .payer__item {
	display: inline-block;
	position: relative;
	flex: 1 1 0;
}

.l-payment .payer__item label {
	width: 100%;
	border: 1px solid var(--border-outline);
	background-color: var(--bg-white);
	color: var(--content-sub);
}

.l-payment .payer__item input:checked+label {
	color: var(--primary-blue);
	border-color: var(--primary-blue);
}

.l-payment .payer__item input:checked+label:hover {
	color: var(--white);
	background-color: var(--blue-700);
}


.l-payment .payer__info strong {
	display: block;
	line-height: 1.5;
	font-size: 14px;
}

.l-payment .payer__info strong ~ strong {
	margin-top: 1rem;
}

.l-payment .payer__info ul li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--content-sub);
	line-height: 1.5;
	font-size: 14px;
}

.l-payment .payer__info ul li:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--content-sub);
}

.l-payment .receive__media {
	display: flex;
	gap: 6px;
	margin-bottom: 36px;
}

.l-payment .media__item {
	display: inline-block;
	position: relative;
	flex: 1 1 0;
}

.l-payment .media__item label {
	padding: 12px;
	width: 100%;
	justify-content: center;
	gap: 0;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--border-outline);
	background-color: var(--bg-white);
}

.l-payment .media__item label:hover {
	background-color: var(--bg-light-gray);
}

.l-payment .media__item label:before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 4px;
}

.l-payment .media__item input:checked+label {
	color: var(--primary-blue);
	border: 2px solid var(--primary-blue);
}

.l-payment .email label:before {
	background: url(/images/radio_media_email.svg) no-repeat center;
	margin-right: 6px;
}

.l-payment .email input:checked+label:before {
	background-image: url(/images/radio_media_email_active.svg);
	margin-right: 6px;
}

.l-payment .message label:before {
	background: url(/images/radio_media_message.svg) no-repeat center;
	margin-right: 6px;
}

.l-payment .message input:checked+label:before {
	background-image: url(/images/radio_media_message_active.svg);
	margin-right: 6px;
}

.l-payment .kakao label:before {
	background: url(/images/radio_media_kakao.svg) no-repeat center;
	background-size: contain;
	margin-right: 6px;
}

.l-payment .receive__form {
	display: grid;
	margin: 18px 0px 10px 0px;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 8px;
}

.l-payment .form__item label {
	display: block;
	font-size: 14px;
	font-weight: 500;
}


.l-payment .payment-check label {
	font-weight: 600;
	color: var(--content-main);
}

.l-payment .agree__info {
	margin-top: 12px;
	padding-left: 32px;
	font-size: 14px;
	font-weight: 500;
	color: var(--content-sub);
}

.l-payment .agree__info li {
	position: relative;
	padding-left: 14px;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: 1.4;
}

.l-payment .agree__info li:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 7px;
	left: 5px;
	width: 3px;
	height: 3px;
	border-radius: 100%;
	background: var(--content-sub);
}

.l-payment .agree__info li:not(:last-child) {
	margin-bottom: 8px;
}

.l-payment .report__amount {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

.l-payment-end {
	width: 438px;
	margin: 0 auto;
}

.l-payment-end .btn-box {
	padding-top: 72px;
}

.l-payment-end .payment__fin {
	padding-top: 45px;
	text-align: center;
}

.l-payment-end .payment__fin h3::before {
	content: '';
	display: block;
	margin: 0 auto 28px;
	width: 64px;
	height: 64px;
	background: url(/images/img_join_finish.svg) no-repeat center;
	background-size: contain;
}

.l-payment-end .payment__fin h3 {
	font-size: 36px;
	font-weight: 700;
}

.l-payment-end .payment__fin p {
	margin-top: 24px;
	line-height: 1.6;
	color: var(--content-sub);
}

@media only screen and (max-width: 767px) {
	.l-payment .contents {
		max-width: 100%;
	}
	.l-payment .payment__box__tip {
		display: block;
		position: unset;
		padding-top: 6px;
	}
	.l-payment .payment__header {
		top: 56px;
	}
}

@media only screen and (max-width: 767px) {
	.l-payment .contents {
		max-width: 100%;
	}
	.l-payment .receive__form {
		grid-template-columns: 1fr;
		grid-gap: 40px;
	}
	.l-payment .payment__box__tip {
		display: block;
		position: unset;
		padding-top: 6px;
	}
}

/* ===== mypage ===== */

 .l-mypage.user .contents {
  padding: 0;
}

.l-mypage h3 {
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: bold;
}

.l-mypage .tab {
	margin-top: 40px;
	border-bottom: 1px solid var(--border-outline, #eaedf0);
}

.l-mypage .tab ul {
	display: flex;
	flex-direction: row;
}

.l-mypage .tab__item {
	display: block;
	padding: 0.625rem 1rem;
	font-weight: 400;
	color: var(--content-disabled);
	white-space: nowrap;
}

.l-mypage .tab__item.sts-active {
	border-bottom: 0.125rem solid var(--content-main);
	font-weight: 600;
	color: var(--content-main);
}

.l-mypage .c-snackbar {
	text-align: left;
	width: 33.75rem;
	top: 0;
	bottom: auto;
	max-width: 100%;
}

/* 홈 */
.l-mypage .profile {
	padding: 1rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	border-bottom: 1px solid var(--border-normal, #f1f4f6);
}

.l-mypage .profile .profile__img {
	position: relative;
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border: 0.125rem solid #3461ff;
	border-radius: 6.25rem;
	background: url(/images/img_profile_bg.svg) no-repeat center;
	overflow: hidden;
	background-size: 2.25rem auto;
}

.l-mypage .profile .profile__img img {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.l-mypage .profile .profile__name {
	display: block;
}

.l-mypage .profile .profile__email {
	display: block;
	margin-top: 0.25rem;
	font-weight: 500;
	flex: auto;
	color: var(--content-disabled);
	font-size: 0.875rem;
}

.l-mypage .mypage__list a {
	display: block;
	position: relative;
	width: 100%;
	padding: 1.25rem 0;
	font-weight: 500;
}

.l-mypage .mypage__list a:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	background: url(/images/icon/chevron_right_black.svg) no-repeat center;
}

/* 회원정보 */
.l-mypage.user .title {
  padding-left: 16px;
  padding-right: 16px;
}

.l-mypage .user .btn-edit {
	display: inline-block;
	position: absolute;
	right: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/i_edit.svg) no-repeat center;
	border: 0;
	text-indent: -9999px;
	font-size: 0;
	overflow: hidden;
}

.l-mypage .user-support .user-support__title {
  padding: 0 16px;
  display: flex;
  gap:10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-mypage .user-support .user-support__list {
  padding: 0 16px;
  margin-bottom: 24px;
}

.l-mypage .user-support .user-support__list > li > div{
 display: flex;
 align-items: center;

}
.l-mypage .user-support .user-support__list > li > a > div > span{
 color: var(--content-sub);
 font-weight: 600;
 line-height: 24px;
}

.l-mypage .user-support .user-support__list > li > a > div > span > em {
  font-weight: 600;
  line-height: 24px;
}

.l-mypage .user-support .user-support__list > li > a {
  width: 100%;
  display: flex;
  height: 48px;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
  justify-content: space-between;  
}

.l-mypage .user-support .user-support__list > li > a:hover {
  background-color: var(--gray-50);
    
}

.l-mypage .user__table {
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-box-shadow: inset 0 0 0 1px var(--border-normal, #f1f4f6);
	box-shadow: inset 0 0 0 1px var(--border-normal, #f1f4f6);
	overflow: hidden;
}

.l-mypage .user__table dl {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid var(--border-normal, #f1f4f6);
	min-height: 3.5rem;
	align-items: center;
}

.l-mypage .user__table dl:last-child {
	border-bottom: 0;
}

.l-mypage .user__table dt {
	padding: 1rem 1.5rem;
	width: 13.75rem;
	color: var(--content-disabled);
}

.l-mypage .user__table dd {
	position: relative;
	padding: 1rem 1.5rem;
	font-weight: 500;
	flex: auto;
	word-break: break-all;
}

.l-mypage .pw-dot {
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 100%;
	background-color: #202429;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	vertical-align: middle;
}

.l-mypage .user__bottom {
	position: relative;
  margin-top: 14px;
}

.l-mypage .user__bottom span {
	color: var(--content-disabled);
	font-size: 0.875rem;
}

/* 내차정보 */

.l-mypage.car-archive .title {
 padding-top: 0;
 padding-bottom: 10px;
}

.l-mypage.car-archive .contents {
 padding: 0;
}


.l-mypage .car-archieve__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.car-archieve__head > div > em {
  color: var(--content-caption);
}

.l-mypage .car-archieve__head h3 {
	margin-bottom: 0;
}

.l-mypage .car-count {
	color: var(--primary-blue);
}

.l-mypage .car__item, .l-mypage .car__img {
	position: relative;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
}

.l-mypage .car__item {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-direction: row-reverse;
	margin-bottom: 10px;
	border: 1px solid var(--border-outline);
	border-radius: 10px;
}

.l-mypage .car__item:hover  {
	background-color: var(--gray-50);
}

.l-mypage .car__img {
	display: block;
  height: 52px;
  width: 105px;
}

.l-mypage .car__img img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-object-fit: contain;
	object-fit: contain;
	width: 90%;
	height: 90%;
}

.l-mypage .car__text {
	flex: auto;
	display: flex;
	flex-direction: column;
	margin-left:4px;
}

.l-mypage .car__text > span:first-child {
  color: var(--content-sub);
  line-height: 1.5;
  font-size: 14px;
}


.l-mypage .car__no {
  color: var(--content-sub);
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
}

.l-mypage .car__trim {
	display: block;
	color: var(--content-main);
	line-height: 1.5;
	font-size: 16px;
	font-weight: 600;
}

.l-mypage .car__detail {
	position: relative;
  display: flex;
	font-size: 14px;
	color: var(--primary-blue);
	width: 100%;
	padding: 20px 0px 20px 0;
	border-radius: 10px;
	align-items: center;
}

.l-mypage .btn-car-delete {
	display: block;
	width:30px;
	height: 30px;
	position: absolute;
	right: 8px;
	top: 8px;
	font-size: 0;
	border: 0;
	background: url(/images/icon/x_lightgray.svg) no-repeat center;
	background-size: 14px;
}

/* 리포트 보관함 */
.l-mypage .report__search .range {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.25rem;
}

.l-mypage .report__search .range .type-date {
	width: 10.63rem;
}

.l-mypage .report__search .range-middle {
	color: var(--content-disabled);
}

.l-mypage .report__search {
	margin: 2rem 0 0.75rem;
}

.l-mypage .report__search .c-btn {
	width: 6.25rem;
	margin-left: 0.625rem;
}

.l-mypage .report__total {
	display: flex;
	margin-bottom: 1rem;
	padding: 1.25rem 90px;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
	background-color: var(--bg-light-gray);
	flex-direction: row;
	justify-content: space-between;
}

.l-mypage .report__total dl {
	text-align: center;
}

.l-mypage .report__total dl:first-child {
	border-right: 1px solid var(--gray-300);
	padding-right: 90px;
}

.l-mypage .report__total dt {
	padding-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--content-main);
}

.l-mypage .report__total dd {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--content-main);
}

.l-mypage .report-archive .tls table {
	text-align: center;
}

.l-mypage .report-status {
	font-size: inherit;
}

.l-mypage .report-status.expired {
	color: var(--content-disabled);
}

.l-mypage .report-archive .tls td {
	padding: 1.25rem 1.5rem;
	vertical-align: middle;
	white-space: nowrap;
}

.l-mypage .btn-report-view {
	display: inline-block;
	font-size: 0.875rem;
	color: var(--primary-blue);
	font-weight: 400;
	border: 0;
	background-color: transparent;
}

.l-mypage .btn-report-view:disabled {
	opacity: 0.5;
}

.l-mypage .btn-receipt-export {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0;
	border: 0;
	background: url(/images/i_export.svg) no-repeat center;
}

.l-mypage .btn-receipt-export :disabled {
	opacity: 0.5;
}

.l-mypage .btn-recipient {
	padding: 0;
	font-size: inherit;
	text-decoration: underline;
	color: #5c78ef;
	border: 0;
	background-color: transparent;
}

.l-mypage.report-archive .title {
  padding-top:0;
}

.l-mypage.report-archive .contents {
  
  padding-top:0;
}

.l-mypage.report-archive .quick__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  padding: 20px 0px;
}

.l-mypage.report-archive .quick__item {
  position: relative;
  display: flex;
  padding: 14px 0px;
  gap: 2px;
  border-radius: 12px;
  text-align:center;
  cursor: pointer;
  border-radius: 0.5rem;
  justify-content: space-between;
  flex-direction: column;
}

.l-mypage.report-archive .quick .nice-tag {
  display: none;
  position: absolute;
  padding: 0.25rem 0.5rem;
  top: 0.625rem;
  right: 0.625rem;
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--content-error);
  border: 1px solid var(--content-error);
}

.l-mypage.report-archive .quick__label {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--content-sub);
}


.l-mypage.report-archive .quick__value {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--content-main);
}

.l-mypage.report-archive .quick__value em {
  font-weight: 600;
  color: var(--content-main);
}

.l-mypage.report-archive .quick__value__loading {
  display: inline-block;
  font-size: 0;
  width: 1.188rem;
  height: 1.188rem;
  background: url(/images/i_quick_spinner.svg) no-repeat center;
  background-size: contain;
  overflow: hidden;
  -webkit-animation: spinner 0.5s linear infinite;
  animation: spinner 0.5s linear infinite;
}


.l-mypage.report-archive .card > .card-item-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.l-mypage.report-archive .card .card-item-label {
  color: var(--content-sub);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;

  
}

.l-mypage.report-archive .card .card-item-value,
.l-mypage.report-archive .card .report-status {
  color: var(--content-main);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;

  
}

.l-mypage.report-archive .card .card-item-value.car-number {
 font-weight: 600;
 font-size: 16px;
 line-height: 24px;
 color: var(--content-main);
}

.l-mypage.report-archive .card .card-btn-box {
  display: flex;
  gap:8px;
  padding: 8px 0;

  
}



/* 약관정보 */
.l-mypage .c-switch {
	column-gap: 0;
}

.l-mypage .terms__title {
	display: block;
	margin: 12px 0;
	font-weight: 600;
	font-size: 16px;
	color: var(--content-main);
}

.l-mypage .terms__list {
	border-radius: 4px;
	padding-bottom: 12px;
	overflow: hidden;
	max-width: 620px;
	border-bottom: 1px solid var(--gray30);
}

.l-mypage .terms__item {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-normal, #f1f4f6);
}

.l-mypage .terms__item:last-child {
	margin-bottom: 0;
}

.l-mypage .terms__text {
	flex: auto;
	display: flex;
	font-weight: 500;
	justify-content: space-between;
}

.l-mypage .terms__text-title {
	display: flex;
	padding: 2px 0;
	font-weight: 500;
	font-size: 16px;
	justify-content: space-between;
	color: var(--content-main);
}

.l-mypage .terms__text a {
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.l-mypage .terms__text a>img {
	width: 20px;
	height: 20px;
}

.l-mypage .terms__text-description {
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--content-sub);
}

.l-mypage .terms__date-description--wrap {
	display: flex;
	flex-direction: column-reverse;
}

.l-mypage .terms__text-sub {
	margin-top: 7px;
	font-size: 12px;
	color: var(--content-caption);
	line-height: 1;
	font-weight: 400;
}

.l-mypage .terms__text-sub+.terms__text-sub {
	margin-top: 4px;
}

.l-mypage .terms__text-sub:before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 100%;
	background: var(--content-caption);
	margin-right: 8px;
	vertical-align: 2px;
}

.l-mypage .terms__text-date {
	margin-top: 4px;
	font-size: 14px;
	color: #989ca1;
}

.l-mypage .terms__info {
	margin-top: 14px;
}

.l-mypage .terms__info>span {
	position: relative;
	display: block;
	padding-left: 1rem;
	font-size: 12px;
	color: #989ca1;
	line-height: 1.4;
}

.l-mypage .terms__info>span::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 100%;
	background-color: #5e5f61;
	vertical-align: 3px;
}

.l-mypage .terms__info .그만 {
	font-size: inherit;
	font-weight: 500;
	color: inherit;
}

.l-mypage .terms__btn {
	display: flex;
	align-items: center;
}

.l-mypage .terms__text-title {
	justify-content: start;
	align-items: center;
}


.l-mypage .terms-h3 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	margin-bottom: 10px;
}

.l-mypage .terms__intro > span {
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: var(--content-caption);
	margin-bottom: 42px;
}

/* 개인정보 이용내역 */
.l-mypage .usage__container {
	display: grid;
	margin-top: 2rem;
	grid-gap: 1rem;
}

.l-mypage.info-usage .contents {
 padding-top: 0;
}

.l-mypage.info-usage .description__p {
	color: var(--content-sub);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
}

.l-mypage.info-usage .user-support .user-support__list {
 padding: 30px 0 0 0 ;
 
}

.l-mypage .usage {
	padding: 1.25rem 0;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}

.l-mypage .usage__assi {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--content-main);
}

.l-mypage .usage__title {
	display: flex;
	margin-top: 0.25rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--content-main);
	justify-content: space-between;
	align-items: center;
}

.l-mypage .usage__title>img {
	width: 20px;
	height: 20px;
}

.l-mypage .usage__count {
	display: block;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--primary-blue);
}

.l-mypage .usage__count em {
	margin-right: 0.125rem;
	font-size: 1rem;
	font-weight: 600;
}

/* 마이페이지 > 개인정보 이용내역 > 상세 */
.l-info-usage-view .title {
	display: flex;
	padding: 2.5rem 0 0.5rem;
	align-items: center;
}

.l-info-usage-view .contents {
 padding-top: 16px;
}

.l-info-usage-view .usage__desc h3 {
	font-size: 1.75rem;
	font-weight: 700;
}

.l-info-usage-view .usage__desc p {
	margin-top: 0.75rem;
	color: var(--content-main);
}

.l-info-usage-view .usage__desc .target-date {
	display: block;
	margin-top: 2.063rem;
	font-weight: 600;
	color: var(--content-main);
}

.l-info-usage-view .tls {
	margin-top: 1.5rem;
}

.l-info-usage-view .btn-back:before {
	content: '';
	display: inline-block;
	margin-right: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: -0.3125rem;
	overflow: hidden;
	border: none;
	white-space: nowrap;
	background: url(/images/icon/chevron_left_black.svg) no-repeat center;
	background-size: contain;
}

.l-info-usage-view .btn-usage-export {
	display: inline-block;
	font-size: 0.875rem;
	color: var(--content-main);
	font-weight: 400;
	border: 0;
	background-color: transparent;
}

.l-info-usage-view .receipt-count {
 padding: 10px 0;
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 color: var(--content-sub);
}

.l-info-usage-view .receipt-count > em > span {
color: var(--primary-blue);
 
}

.l-info-usage-view .card {
 padding: 0;
}

.l-info-usage-view .card:hover {
  background-color: var(--gray-50);
}

.l-info-usage-view .card .card-item-wrapper {
  text-align: left;

}

.l-info-usage-view .card .card-item-wrapper .main-card{
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
}

.l-info-usage-view .no-data {
  color: var(--content-sub);
  font-weight: 400;
}

.l-info-usage-view .card-item > .card-value {
  color: var(--content-sub);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.l-info-usage-view .card > button {
  display: flex; 
  width: 100%;
  align-items: center;
  padding: 16px;
  justify-content: space-between;
}

.l-info-usage-view .card > button > .share-card-wrapper {
 display: flex;
 flex-direction: column;
 text-align: left;
 width: 100%;
}
.l-info-usage-view .card > button > div > div > img {
  width: 20px;
  height: 20px;
}

.l-info-usage-view .card > button > .share-card-wrapper > span:first-child {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--content-sub);
}

.l-info-usage-view .card > button > .share-card-wrapper > span:nth-child(2) {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-main);
}

.l-info-usage-view .btn-usage-export:disabled {
	color: var(--content-disabled);
}

.l-info-usage-view .btn-usage-export:disabled:before {
	opacity: 0.5;
}

.bottom-sheet.usage-receipt{
  max-width: 620px;
  overflow: scroll;
}

.bottom-sheet.usage-receipt .bottom-sheet__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bottom-sheet.usage-receipt .bottom-sheet__content {
  overflow: scroll;
  padding-top: 8px;
  height: 80%;
  padding: 0px 16px 20px;
}

.bottom-sheet.usage-receipt .bottom-sheet__content > .receipt{
  height: 400px;
}

.bottom-sheet.usage-receipt .bottom-sheet__btn {
  display: flex;
  gap:8px;
  padding: 10px 16px;
}

.receipt .receipt__top {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-bottom: 32px;
}

.receipt .receipt__top>img {
	width: 32px;
	height: 32px;
}

/* 회원탈퇴 */
.l-withdraw .withdraw__title {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	padding-bottom: 1rem;
}

.l-withdraw .withdraw__title:not(:first-child) {
	margin-top: 2.625rem;
}

.l-withdraw .c-input {
	max-width: 20.5rem;
}

.l-withdraw .btn-box {
	margin-top: 2.5rem;
	text-align: center;
}

.l-withdraw .btn-box .c-btn+.c-btn {
	margin-left: 0.375rem;
}

.l-withdraw .ta-center {
	margin-top: 2.25rem;
}

.l-withdraw .dot-list ul li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--content-main);
	line-height: 1.5;
}

.l-withdraw .dot-list ul li:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	width: 0.1875rem;
	height: 0.1875rem;
	border-radius: 50%;
	background-color: var(--gray-500);
}

.l-withdraw .reason {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.l-withdraw .withdraw-fin {
	margin-top: 5.75rem;
	text-align: center;
}

.l-withdraw .withdraw-fin h2 {
	font-size: 2.25rem;
}

.l-withdraw .withdraw-fin h2:before {
	content: '';
	display: block;
	margin: 0 auto 1.5rem;
	width: 4rem;
	height: 4rem;
	background: url(/images/btn_withdraw_fin.svg) no-repeat center;
}

.l-withdraw .withdraw-fin p {
	font-weight: 500;
	margin: 1rem 0 4.375rem;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--content-main);
}

.l-withdraw .withdraw-fin .c-btn {
	width: 9.75rem;
}

@media only screen and (max-width: 767px) {
	.l-mypage .user__table dt {
		width: 6.563rem;
		padding: 1rem;
		flex: none;
	}
	.l-mypage .user__table dd {
		padding: 1rem;
	}
	.l-mypage.car-archive .title {
	 padding-top: 0;
	}
	.l-mypage .car-archieve__head {
		align-items: center;
		padding: 10px 16px
	}
	.l-mypage .car__list {
      padding: 0 16px;
	}
	.l-mypage .car__detail:after {
		width: 1rem;
		height: 1rem;
		background-size: contain;
		vertical-align: -0.125rem;
	}
	.l-mypage .report__search {
		margin: 0 0 1.875rem;
	}
	.l-mypage .report__search .range {
		width: 100%;
	}
	.l-mypage .report__search .range .type-date {
		width: inherit;
	}
	.l-mypage .report__search .c-btn {
		width: 100%;
		margin: 0.625rem 0 0;
	}
	.l-mypage .report__total {
		padding: 1.25rem;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.l-mypage .report__total dl:first-child {
		padding-right: 0;
		padding-bottom: 1rem;
		width: 100%;
		border-right: 0;
	}
	.l-withdraw .btn-area {
		display: flex;
	}
	.l-withdraw .btn-area .c-btn {
		flex: 1;
	}
}

.l-mypage.my-info .contents {
  padding-top: 16px;
}

.l-mypage.my-info .myinfo-detail__wrap {
  margin-bottom: 24px;
}

.l-mypage.my-info .myinfo-detail__title {
  padding: 4px 0;
  display: flex;
  gap:10px;
}

.l-mypage.my-info .myinfo-detail__title > h4{
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--content-main);
}

.l-mypage.my-info .myinfo-detail__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-mypage.my-info .myinfo-detail-line{
  padding: 4px 0;
  display: flex;
}

.l-mypage.my-info .myinfo-detail-line > span:first-child {
  width: 72px;
  height: 22px;
  display: flex;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px; 
  color: var(--content-sub);
}

.l-mypage.my-info .myinfo-detail-line > span:last-child {
  color: var(--content-main);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}

.l-mypage.my-info .myinfo-detail-line.phone {
  display: flex; 
  justify-content: space-between;
}

.l-mypage.my-info .myinfo-detail-line.phone > div{
  display: flex; 
}

.l-mypage.my-info .myinfo-detail-line.phone > div > span:first-child{
  width: 72px;
  height: 22px;
  display: flex;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px; 
  color: var(--content-sub);
}

.l-mypage.my-info .myinfo-detail-line.phone > div > span:nth-child(2){
  color: var(--content-main);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}

.l-mypage.my-info .myinfo-detail-line.phone .myinfo-detail-line__btn {
 color: var(--primary-blue);
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
}

.l-mypage.my-info .my-pw {
 display: flex;
 align-items: center;
 gap: 5px;
}


/* ===== 온라인대리등록 ===== */
.l-transfer .card-type .card__list>li {
	position: relative;
	-webkit-border-radius: 22px;
	border-radius: 22px;
}

.l-transfer .card-type .card__list>li>a p {
	font-size: 1.75rem;
	font-weight: bold;
}

.l-transfer .card-type .card__list>li+li {
	margin-top: 2rem;
}

.l-transfer .card-type .card__list>li>a::after {
	content: '';
	position: absolute;
	right: 1.875rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	background: no-repeat url(/images/icon/arrow_right_blue.svg);
	background-size: contain;
}

/* 소유권 이전/받기 */
.l-transfer.main .contents {
	padding-top: 44px;
}

@media only screen and (max-width: 767px) {
  .l-transfer.main .title {
    padding-left: 0;
    padding-right: 0;
    
  }
 
	.l-transfer.main .contents {
		padding: 20px 0 0;
		
	}
}

.text-btn {
	color: var(--primary-blue);
	font-size: 14px;
  font-weight: 500;
  line-height: 22px;

	
}
.text-btn.bg-hover {
 padding: 4px;
 border-radius: 8px;
 font-weight: 600;
}


.text-btn.bg-hover:hover {
  opacity: 1;
  background-color: var(--gray-100);
}


.text-btn:hover {
	opacity: 0.8;
	transition: 0.1s;
}

.text-btn a img {
	width: 14px;
	height: 14px;
}

.text-btn a {
	display: flex;
	align-items: center;
	gap: 2px;
}

.l-transfer .title .help {
	margin-top: 35px;
	padding: 16px 18px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.l-transfer .arrow-title .help {
	margin-top: 35px;
	padding: 16px 18px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

.l-transfer .title .help>p {
	display: flex;
	align-items: center;
	font-size: var(--fontSizeBasic);
	line-height: 1.13;
}

.l-transfer .arrow-title .help>p {
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 1.13;
}

.l-transfer section.timeline {
	padding-top: 80px;
}

.l-transfer.main .title__main {
	margin-bottom: 8px;
	padding: 0 16px;
}

.l-transfer.main .title__sub {
  padding: 0 16px;
}

.l-transfer .giveOwnership-banner {
	border-radius: 12px;
	height: 108px;
	background-color: #fcc250;
}

.l-transfer .giveOwnership-banner__logo {
	width: 70px;
	background-repeat: no-repeat;
}

.l-transfer .giveOwnership-banner__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 20px;
	margin-right: 20px;
}

.l-transfer .giveOwnership-banner__text-wrap {
	height: 108px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	color: var(--white);
}

.l-transfer .giveOwnership-banner__text-wrap__span {
	background: var(--logo-white) no-repeat center;
}

.l-transfer .giveOwnership-banner__text-wrap__span2 {
	font-size: 18px;
}

.l-transfer .giveOwnership-banner__text-wrap__span3 {
	font-size: 13px;
	font-weight: 200;
}


.l-transfer .title__text {
	margin-top: 16px;
	line-height: 22px;
	color: var(--gray-700);
}

.l-transfer>title.sub_title {
	color: var(--content-sub);
}

.l-transfer.main .card-type .card__list>li>a {
	padding: 48px 30px;
}

.l-transfer.main .card-type .card__list>li>a .tag {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	color: var(--primary-blue);
}

.l-transfer.main .title .help-system-link {
	margin-top: 1.875rem;
	background: rgba(48, 130, 247, 0.05);
}

.l-transfer.before .arrow-title .help-system-link {
	margin-top: 1.875rem;
	background: rgba(48, 130, 247, 0.05);
	padding: 16px;
	display: flex;
	justify-content: space-between;
}
.l-transfer.before .help.help-check-transfer.transfer {
  padding: 32px;
}

.l-transfer.before .help.help-check-transfer.transfer > span {
  color: var(--primary-blue);
  margin-bottom: 16px;
}


.l-transfer.before .help.help-check-transfer.transfer > span > a {
  text-decoration: underline;
  font-weight: 600;
}

.l-transfer.before .help.help-check-transfer.transfer .btn-box{
  display: flex;
  justify-content:center;
}

.l-transfer.before .help.help-check-transfer.transfer .text-btn{
  display: flex;
}

 /* 각 가이드 페이지  */
.l-guide-elcontract .arrow__btn--inner,
.l-guide-escrow .arrow__btn--inner,
.l-guide-transfer .arrow__btn--inner {
  padding: 0 16px;
 }
.l-transfer.before.l-guide-elcontract .contents,
.l-transfer.before.l-guide-escrow .contents,
.l-transfer.before.l-guide-transfer .contents{
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
 }
 
 @media only screen and (max-width: 768px) {
.l-transfer.before.l-guide-elcontract .contents,
.l-transfer.before.l-guide-escrow .contents,
.l-transfer.before.l-guide-transfer .contents{
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
 } 
}

@media only screen and (max-width: 767px) {
  .l-transfer.before .help.help-check-transfer.transfer {
    padding: 32px 16px;
  }
	.l-transfer.before .arrow-title .help-system-link {
		padding: 10px;
	}
}

.l-transfer.main .title .help-system-link>p {
	color: var(--primary-blue);
}

.l-transfer.before .arrow-title .help-system-link>p {
	color: var(--primary-blue);
}

.l-transfer.main .title .help-system-link .icon {
	width: 20px;
	height: 22px;
	margin-right: 3px;
	background-image: url(/images/i_safe.svg);
}

.l-transfer.before .arrow-title .help-system-link .icon {
	width: 20px;
	height: 22px;
	margin-right: 3px;
	background-image: url(/images/i_safe.svg);
}

.l-transfer.main .contents .btn-box {
	text-align: center;
	margin: 16px 0;
}

.l-transfer.fin .title .help-box {
	margin-top: 36px;
}

.l-transfer.fin .title .help-box .help__sub {
	margin-top: 14px;
	font-size: 12px;
	color: var(--content-caption);
}

.l-transfer.fin .btn-box .btn__top {
	margin-bottom: 12px;
	text-align: center;
}

.l-transfer.fin .btn-box .btn__top>span {
	font-size: 14px;
	color: var(--content-caption);
}

.l-transfer.fin .title .help-sign {
	margin-bottom: 14px;
	padding-top: 24px;
	padding-bottom: 24px;
	text-align: center;
	background: var(--bg-light-gray);
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.l-transfer.fin .title .help-sign>span {
	display: block;
	margin-bottom: 1rem;
	font-size: 14px;
}

.l-transfer.fin .title .help-sign .tip-hpnum {
	color: var(--content-main);
}

.l-transfer.fin .title .help-sign .tip-hpnum .icon {
	margin-right: 8px;
	background-image: url(/images/ic/ic_kakao.svg);
}

.l-transfer.fin .contents .timeline__vertical>li+li {
	margin-top: 32px;
}

.l-transfer.fin .contents .timeline__vertical>li>p {
	font-size: 14px;
}

.l-transfer.before .card-type {
	margin-top: 46px;
}

.l-transfer.before .card-type .card__list>li>a {
	padding: 50px 30px;
}

.help-check-transfer {
	padding: 14px 10px;
	margin-bottom: 32px;
	background: var(--bg-light-gray);
	font-size: 14px;
}


.help-check-transfer>p {
	color: var(--content-sub);
}

.help-check-transfer>p:not(:last-child) {
	margin-bottom: 10px;
}

.help-check-transfer .icon {
	margin-right: 6px;
	background-image: url(/images/icon/c_check_blue.svg);
}

/*====양수인 보험 미가입 안내 모달====*/
.l-transfer.before .insur .help-check-transfer>p:not(:last-child) {
	margin-bottom: 0.62rem;
}

.l-transfer.before .insur .help-check-transfer .icon {
	margin-right: 6px;
	background-image: url(/images/icon/c_check_blue.svg);
}

.l-transfer.before .insur .list {
	background: #fff2f0;
	padding: 20px 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	color: var(--red-500);
}

.l-transfer.before .insur .list dl:not(:last-child) {
	margin-bottom: 26px;
}

.l-transfer.before .insur .list dt {
	font-weight: 600;
	margin-bottom: 8px;
}

.l-transfer.before .insur .list-middot dd>span {
	padding-left: 24px;
	line-height: 24px;
}

.l-transfer.before .insur .list-middot dd>span:before {
	width: 4px;
	height: 4px;
	left: 8px;
}

.insur .list-middot dd>span:before {
	content: '';
	position: absolute;
	background: var(--red-500);
	-webkit-border-radius: 100%;
	border-radius: 100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.modal-buyer-insur .modal__contents {
	padding-bottom: 0px;
}

/*====양수인 보험 미가입 안내 모달====*/

.l-transfer.before .title .help-before-agree {
	padding: 0;
}

.l-transfer.before .contents .cols {
	margin-bottom: 100px;
}

.l-transfer.before .contents .cols__title__sub {
	line-height: 22px;
	color: var(--content-sub);
}

.l-transfer.before .contents .cols__title h4 {
	padding: 12px 16px;
	margin-bottom: 8px;
	line-height: 34px;
	font-size: 24px;
	font-weight: 600;
}

.l-transfer.before .contents .help>p {
	font-size: var(--fontSizeBasic);
	color: var(--content-sub);
	line-height: 18px;
}

.l-transfer.before .contents .help .icon {
	margin-right: 8px;
}

.l-transfer.before .contents .help-time {
	padding: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-color: var(--bg-light-gray);
}

.l-transfer.before .contents .help-time .icon {
	background-image: url(/images/icon/info_circle_gray.svg);
}

.l-transfer.before .contents .help-warning .icon {
	background-image: url(/images/alert_triangle_red.svg);
}

.l-transfer.before .contents .help-prepare .icon {
	background-image: url(/images/icon/info_circle_blue.svg);
}

.l-transfer.before .contents .timeline__vertical {
	margin: 20px 0 72px 0;
}

.l-transfer.before .contents .timeline__vertical.timeline-transfer {
  margin: 20px 0 0 0;
}

.l-transfer.before .contents .timeline__vertical>li+li {
	margin-top: 28px;
}

.l-sale-car .contents .list,
.l-transfer.before .contents .list {
	background: var(--bg-light-gray);
	padding: 24px 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	font-size: 13px;
}

.l-transfer.before .contents .list.list-middot.transfer {
  background: #fff;
  padding: 0px;
}

.l-transfer.before .contents .list.list-middot.transfer dt,
.l-transfer.before .contents .list.list-middot.transfer dl,
.l-transfer.before .contents .list.list-middot.transfer p,
.l-transfer.before .contents .list.list-middot.transfer span {
    color: var(--content-main);
}

.l-sale-car .contents .list dl:not(:last-child),
.l-transfer.before .contents .list dl:not(:last-child) {
	margin-bottom: 26px;
}

.l-sale-car .contents .list-middot dt, .l-sale-car .contents .list dd,
.l-transfer.before .contents .list dt, .l-transfer.before .contents .list dd
	{
	color: var(--content-sub);
}

.l-sale-car .contents .list-middot dt,
.l-transfer.before .contents .list dt {
	font-weight: 600;
	margin-bottom: 8px;
}
.l-sale-car .contents .list-middot dd>span,
.l-transfer.before .contents .list-middot dd>span {
	padding-left: 24px;
	line-height: 1.5;
}
.l-sale-car .contents .list-middot dd>span:before,
.l-transfer.before .contents .list-middot dd>span:before {
	left: 0px;
}

.l-transfer.before .btn-box a {
	font-size: 14px;
	line-height: 16px;
	display: flex;
	align-items: center;
}



.l-form.l-transfer.before.el.l-chkeltransinfo .contents {
     padding-top: 32px;
}

.l-transfer.before.el.l-chkeltransinfo .arrow__btn--inner {
 padding: 0;
}

.l-form.l-transfer.before.el.l-chkeltransinfo .caption {
   color: var(--content-main);
}
.l-transfer.before.transfer .arrow__btn--inner {
    padding: 0 16px;
}

@media only screen and (max-width: 767px) {
  .l-transfer.before.transfer .contents {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
  }
  .l-transfer.before.transfer .arrow__btn--inner {
   padding: 0;
  }
  .l-form.l-transfer.before.el.l-chkeltransinfo .contents {
     padding: 32px 16px 0;
  }
  
  .l-transfer.before .arrow__btn--inner {
   padding: 0 ;
  }
	.l-transfer.before .btn-box a {
		height: 36px;
		font-size: 14px;
	}
}

.l-transfer.last .contents {
	padding-left: 0;
	padding-right: 0;
}

.l-transfer.last .help-box .checkbox__txt {
	margin-top: 8px;
	font-size: 14px;
	color: var(--content-caption);
}

.l-transfer.last .help-checkbox-report {
	position: relative;
	cursor: pointer;
	width: 100%;
	border: 1px solid var(--primary-blue);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.l-transfer.last .help-checkbox-report .c-check, .l-transfer.last .help-checkbox-report .c-check label {
	width: 100%;
}

.l-transfer.last .help-checkbox-report .c-check label {
	cursor: pointer;
	color: var(--content-main);
	padding: 16px 12px;
}

.l-transfer.last .help-checkbox-report .c-check label p>span {
	display: block;
	color: var(--content-sub);
	margin-bottom: 6px;
	font-size: 12px;
}

.l-transfer.last .help-checkbox-report .btn-info-select {
	flex-direction: column;
	position: absolute;
	z-index: 0;
	right: 0;
	top: 0;
	height: 100%;
	width: 62px;
	gap: 8px 0;
	font-size: 10px;
	color: var(--primary-blue);
	background-color: rgba(48, 130, 247, 0.1);
}

.l-transfer.last .help-checkbox-report .btn-info-select::before {
	content: '';
	width: 24px;
	height: 24px;
	background: no-repeat url(/images/icon/arrow_right_blue.svg) center;
	background-size: contain;
}

.l-transfer.last .c-form-outline .c-check-report, .l-transfer.last .c-form-outline .c-check-report label {
	width: 100%;
}

.l-transfer.last .c-form-outline .c-check-report {
	position: relative;
	cursor: pointer;
	margin-bottom: 36px;
	padding: 16px 12px;
	border: 1px solid var(--primary-blue);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.l-transfer.last .c-form-outline .c-check-report .btn-info-select {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px 0;
	right: 0;
	top: 0;
	width: 62px;
	height: 100%;
	font-size: 10px;
	color: var(--primary-blue);
	background-color: rgba(48, 130, 247, 0.1);
}

.l-transfer.last .c-form-outline .c-check-report .btn-info-select::before
	{
	content: '';
	width: 24px;
	height: 24px;
	background: no-repeat url(/images/icon/arrow_right_blue.svg) center;
	background-size: contain;
}

.l-transfer.last .c-form-outline .c-check-report label {
	cursor: pointer;
	color: var(--content-main);
	font-size: 14px;
}

.l-transfer.last .c-form-outline .c-check-report label p>span {
	display: block;
	color: var(--content-sub);
	margin-bottom: 6px;
	font-size: 12px;
}

.l-transfer.last .c-form-outline .caption .anchor-modify {
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.l-transfer.last .c-form-outline .caption .anchor-modify.txt {
	font-size: 14px;
	color: var(--primary-blue);
	font-weight: normal;
}

.l-transfer.last .c-form-outline dd>span {
	display: inline-block;
}

.l-transfer.last .c-form-outline dd .anchor-modify.icon {
	vertical-align: middle;
	background-image: url(/images/i_modify_blue.svg);
}

.l-transfer.history .contents {
	padding-top: 20px;
}

/* 내역보기 */

.history__card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.history__card-list .history__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 16px;

}

.history__card-list .history__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
  border-radius: 10px;
}

.history__card-list .history__item:hover {
	background-color: var(--gray-50);
	color: var(--primary-blue);
}

.history__card-list .history__item .history__img {
 background-color: var(--gray-100);
 padding: 12px;
 border-radius: 12px;
}


.history__card-list .history__item .history__img > img {
	width: 24px;
	height: 24px;
	
}

.history__card-list  .history__item a .history__img--wrap {
	display: flex;
	align-items: center;
	padding: 16px 0;
}

.history__card-list .history__item  a .history__text--wrap {
	display: flex;
	flex-direction: column;
	text-align: left;
	margin-left: 16px;
}

.history__card-list .history__item a  .history__text--wrap>span {
	font-size: 13px;
	color: var(--primary-blue);
	line-height: 16px;
	margin-bottom: 2px;
}

.history__card-list .history__item   a .history__text--wrap>p {
	font-size: 17px;
	color: var(--content-main);
	font-weight: 600;
	line-height: 1.5;
}

.history__card-list.history__item  a  .history__img--wrap>img {
	border-radius: 10px;
	width: 64px;
}

.history__card-list.history__item  a  .history__img--wrap>p {
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.l-form.l-transfer.history .arrow__btn--wrap {
	max-width: 438px;
	left: calc(50% - 219px);
	display: flex;
	align-items: center;
  backdrop-filter: blur(0px);
  background-color: var(--bg-white);
  justify-content: flex-start;
}

.l-form.l-transfer.history .tab {
  top: 128px;
}

@media only screen and (max-width: 768px) {
  .l-form.l-transfer.history .tab {
   top: 108px;
  }
	.l-form.l-transfer.history .arrow__btn--wrap {
		left: 0;
		max-width: 100%;
	}
	.history__card-list a .history__item .history__img--wrap {
		padding: 10px 0;
	}
	.history__card-list a .history__item .history__img--wrap>img {
		width: 56px;
		height: 56px;
	}
}

.l-form.l-transfer.history .arrow__btn--wrap>h5 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.card {
	padding: 16px;
	margin-bottom: 12px;
	width: 100%;
	border-radius: 12px;
	background-color: var(--bg-white);
	border: 1px solid var(--border-outline);
	font-size: 14px;
	position: relative;
}

.l-form.l-transfer.history .contents .card .detail__vehicle-number--wrap {
	display: flex;
	margin-bottom: 10px;
}

.l-form.l-transfer.history .contents .card .detail__vehicle-number--wrap>.detail {
	color: var(--primary-blue);
	display: none;
}

.l-form.l-transfer.history .contents .card .detail__vehicle-number--wrap>.vehicle-number {
	font-size: 16px;
	color: var(--content-main);
}

.btn--wrap {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.l-form.l-transfer.history .contents .card .btn--wrap>button {
	width: 100%;
	background-color: var(--gray-100);
}

.l-form.l-transfer.history .contents .card .btn-third--wrap {
	display: flex;
	flex-direction: column;
}

.l-form.l-transfer.history .contents .card .completion-time {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--content-sub);
}


.l-form.l-transfer.history .contents .trans-date.receipt {
 font-weight: 600;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-main)
}


.l-form.l-transfer.history .contents .card .info-title {
 font-weight: 600;
 font-size: 16px;
 line-height: 24px;
 color: var(--content-main);
 margin-bottom: 8px;
}

.l-form.l-transfer.history .contents .card .info-wrapper {
  padding: 16px 0;
}

.l-form.l-transfer.history .contents .card .info-wrapper:first-child {
  border-bottom: 1px solid var(--border-outline);
  padding-top: 0;
  padding-bottom: 16px;
}

.l-form.l-transfer.history .contents .card .info-line.last{
 font-weight: 600;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .info-line.last > span:last-child{
 font-weight: 600;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .info-line {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--content-sub);
  display: flex;
  justify-content: space-between;
  padding: 4px 0px;
}

.l-form.l-transfer.history .contents .card .info-line > span:last-child {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .completion-time>span:last-child {
	color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .status-rejectied {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--content-sub);
}

.l-form.l-transfer.history .contents .card .status-rejectied>span:last-child
	{
	color: var(--content-error);
}

.l-form.l-transfer.history .contents .card .detail {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.l-form.l-transfer.history .contents .card .status {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--content-sub);
}

.l-form.l-transfer.history .contents .card .status>span:last-child {
	color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .card__body .status .color--disabled
	{
	color: var(--content-disabled);
}

.l-form.l-transfer.history .contents .no-content-viewed {
	height: 204px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.l-form.l-transfer.history .contents .c-btn.size-s {
	background-color: var(--gray-100);
}

.l-form.l-transfer.history .contents .no-content-viewed>span {
	margin-bottom: 5px;
	color: var(--content-sub);
}

.l-form.l-transfer.history .contents .card .vehicle-number {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--content-sub);
}

.l-form.l-transfer.history .contents .card__list .trans-date {
  padding: 8px 0px 8px 0px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .vehicle-number>span:last-child {
	color: var(--content-main);
}

.l-form.l-transfer.history .contents .card .application-number {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	color: var(--content-sub);
}

.l-form.l-transfer.history .contents .card .application-number>span:last-child {
	color: var(--content-main);
}

.l-transfer.history .contents .tab .tab__head__item--active::after {
	background: var(--border-focused);
}

.l-transaction .contents {
  max-width: 438px;
}

.l-transaction .contents .info-main-title {
  gap: 10px;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-input);
}

.l-transaction .contents .info-main-title > h3 {
  font-weight: 600;
  font-size: 24px;
  line-height: 28.64px;
  color: var(--content-main);
}

.l-transaction .contents .info-wrapper {
  margin: 16px 0;

}

.l-transaction .contents .info-wrapper .info-title {
  gap: 10px;
  padding: 12px 0;
  display: flex;
  font-weight: 600;
  font-size: 18px;
  line-height: 21.48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--content-main);
}

.l-transaction .contents .info-wrapper .info-title > .payment-approval {
  border: 2px solid var(--primary-blue);
  padding: 4px;
  display: flex;
  align-items: center;
}

.l-transaction .contents .info-wrapper .info-title > .payment-approval > span {
 font-weight: 600;
 font-size: 12px;
 line-height: 14.32px;
 color: var(--primary-blue);

}


.l-transaction .contents .info-wrapper .info__content {
  display: flex;
  flex-direction: column;
  gap:10px;
  
}

.l-transaction .contents .info-wrapper .info-line {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.71px;
  
}

.l-transaction .contents .info-wrapper .info-line.inside > div {
  color: var(--content-sub);
  display: flex;
}

.l-transaction .contents .info-wrapper .info-line.total {
  color: var(--content-sub);
  display: flex;
  padding: 8px 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 19.09px;
}

.l-transaction .contents .info-wrapper .info-line.total > span:last-child {
  color: var(--primary-blue);
}

.l-transaction .contents .info-wrapper .info-line > span:first-child {
  color: var(--content-sub);
}

.l-transaction .contents .info-wrapper .info-line > span:last-child {
  color: var(--content-main);
  text-align: right;
}

.l-transaction .contents .tab__body-caption {
  color: var(--content-sub);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;

}
.l-transfer.history .c-form-outline.type2 .tag {
	display: table;
	margin-bottom: 7px;
	padding: 4px 8px;
	font-size: 12px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.l-transfer.history .c-form-outline.type2.seller .tag {
	color: var(--primary-blue);
	background-color: rgba(48, 130, 247, 0.05);
}

.l-transfer.history .c-form-outline.type2.buyer .tag {
	color: var(--content-error);
	background-color: rgba(240, 68, 82, 0.05);
}

.l-transfer.history .c-form-outline.type2.buyer .tag {
	color: var(--content-error);
	background-color: rgba(240, 68, 82, 0.05);
}

.l-transfer.l-form .c-form-input .c-form-outline {
	position: relative;
	display: block;
	color: var(--content-caption);
	padding-left: 10px;
	font-size: 14px;
}

.l-transfer .c-form .help-incorr-info {
	margin-top: 48px;
}

.l-transfer .c-form .help-incorr-info p {
	position: relative;
	color: var(--content-caption);
	padding-left: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.l-transfer .c-form .help-incorr-info p::before {
	content: '*';
	position: absolute;
	left: 0;
	top: 0;
}

.l-transfer.l-form .c-form-input .mileage-check {
	background: var(--bg-light-gray);
	margin-top: 36px;
	padding: 14px 10px;
	font-size: 14px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	color: var(--content-sub);
}

.l-transfer.l-form .c-form-input .mileage-check>p {
	margin-bottom: 8px;
}

.l-transfer.l-form .c-form-input .mileage-check>p>i {
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
	width: 20px;
	height: 20px;
	background: no-repeat url(/images/common/NICE_Symbol.svg);
	background-size: contain;
}

.l-transfer.l-form .c-form-input .check__list li {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

.l-transfer.l-form .c-form-input .check__list li>span {
	color: var(--content-caption);
}

.l-transfer.l-form .c-form-input .check__list .help-check {
	margin-top: 12px;
	font-size: 12px;
}

.l-transfer.l-form .c-form-select .c-radio {
	display: block;
	padding: 16px 0;
}

input[type='radio']:checked+.radio-active {
	color: var(--primary-blue);
}

.radio-active:hover {
	color: var(--primary-blue);
}

.l-transfer.l-form .c-form-select .c-radio label {
	width: 100%;
	gap: 0 10px;
	font-size: 14px;
}

.l-transfer.l-form .c-form-select .c-radio label p>span {
	display: block;
	color: var(--content-main);
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 18px;
}

.l-transfer.l-form .btn-help-sales .icon {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	margin-left: 2px;
	background-image: url(/images/icon/info_circle_lightgray.svg);
}

.l-transfer.l-form>.contents>p {
	color: var(--content-caption);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}

.must-check-wrapper {
	display: flex;
	flex-direction: column;
	background-color: #fef5f6;
	border-radius: 10px;
	padding: 14px;
	color: var(--content-error);
	position: relative;
	line-height: 20px;
}

.must-check-wrapper>h4 {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}

.must-check-wrapper>span {
	position: relative;
	display: block;
	padding-left: 12px;
	font-weight: 400;
	font-size: 14px;
	word-break: break-all;
}

.agree-terms {
	font-size: 14px;
}

.desc-warning {
	padding: 12px 0px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--content-caption);
}

.must-check-wrapper>span::before {
	position: absolute;
	content: '';
	background-color: var(--content-error);
	border-radius: 50%;
	width: 4px;
	height: 4px;
	top: 5px;
	left: 0;
	transform: translateY(50%);
}

.button-box {
	background: #fff;
	position: fixed;
	z-index: 5;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 438px;
	margin: 0 auto;
	left: 0;
	padding: 12px 0 16px;
	box-shadow: 0px -31px 39px 29px rgba(255, 255, 255, 0.75);
}

.arrow-img__wrap {
	width: 20px;
	height: 20px;
}

.arrow-img {
	width: 20px;
	height: 20px;
}

.button-box button {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	box-sizing: border-box;
}

.button-box>.btn-area {
	width: 100%;
}

.button-box>.c-check {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

.button-box>.c-check>.check-start>p {
	font-size: 14px;
}

@media only screen and (min-width: 768px) {
	.l-transfer.before .title .help-before-agree {
		text-align: center;
	}
	.l-transfer.before .title .help-before-agree .c-check {
		margin: 0 auto 1.375rem;
	}
}

@media only screen and (max-width: 767px) {
	.l-transfer .card-type .card__list>li {
		-webkit-border-radius: 12px;
		border-radius: 12px;
	}
	
	.l-transfer .card-type .card__list>li>a p {
		font-size: 18px;
	}
	
	.l-transfer .card-type .card__list>li+li {
		margin-top: 12px;
	}
	
	.l-transfer .card-type .card__list>li>a::after {
		right: 1.125rem;
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(/images/icon/arrow_right_lightgray.svg);
	}
	
	.l-transfer .title .help {
		margin-top: 20px;
		padding: 14px 10px 14px 10px;
	}
	
	.l-transfer .arrow-title .help {
		margin-top: 20px;
		padding: 14px 10px 14px 10px;
	}
	
	.l-transfer .title .help>p {
		font-size: 14px;
	}
	
	.l-transfer .arrow-title .help>p {
		font-size: 14px;
	}
	
	.l-transfer .title .help .c-tip {
		margin-right: 5px;
	}
	
	.l-transfer .arrow-title .help .c-tip {
		margin-right: 5px;
	}
	
	.l-transfer.main .contents .card__list>li>a {
		padding: 22px 18px;
	}
	
	.l-transfer.main .contents .card__list>li>a .tag {
		font-size: 14px;
	}
	
	.l-transfer.main .contents .btn-area {
		margin: 16px auto;
	}
	
	.l-transfer.main .contents .btn-area>a {
		background-color: var(--bg-white);
	}
	
	.l-transfer.main .contents .btn-area>a:hover {
		background-color: #eaedf0;
	}
	
	.l-transfer.before .contents {
		padding-top: 24px;
	}
	
	.l-transfer.before .title .help-before-agree {
		background: #fff;
		position: fixed;
		z-index: 5;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 12px 12px 0 0;
		-webkit-box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.05);
		box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.05);
	}
	
	.l-transfer.before .title .help-before-agree .c-check, .l-transfer.before .title .help-before-agree .btn-area{
		padding: 10px 16px;
	}
	
	.l-transfer.before .title .help-before-agree .c-check label i {
		flex-shrink: 0;
	}
	
	.l-transfer.before .title .help-before-agree .c-check label>p {
		font-size: 14px;
		line-height: 18px;
	}
	
	.l-transfer.before .title .help-before-agree .c-btn {
		width: 100%;
	}
	
	.l-transfer.last .contents>div {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.l-transfer.before .card-type {
		margin-top: 34px;
	}
	
	.l-transfer.before .card-type .card__list>li>a {
		padding: 24px 18px;
	}
	
	.l-transfer.before .contents .help>p {
		font-size: 14px;
	}
	
	.l-transfer.before .contents .list {
		padding: 14px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		font-size: 14px;
	}
	
	.l-transfer.before .contents .cols {
		margin-bottom: 56px;
	}
	
	.l-transfer.before .contents .cols__title {
		margin: 0;
	}
	
	.l-transfer.before .contents .cols__title h4 {
		font-size: 18px;
		margin-bottom: 0;
	}
	
	.l-transfer.before .contents .cols__title .help {
		margin-top: 0;
	}

	.l-transfer.before .contents .list dd>span {
		padding-left: 20px;
		line-height: 24px;
	}
	
	.l-transfer.last .help-box .checkbox__txt {
		font-size: 12px;
	}
	
	.l-transfer.before .contents .timeline__vertical>li+li {
		margin-top: 28px;
	}
	
	.l-transfer.history .contents {
		padding-top: 14px;
	}
	
	.l-transfer.history .c-form-outline.no-data>p {
		font-size: 14px;
		color: var(--content-caption);
	}
	
	.l-transfer.l-form .c-form-input .mileage-check {
		margin-top: 24px;
		padding: 18px 10px;
		font-size: 12px;
	}
	
	.l-transfer.l-form .c-form-input .mileage-check>p {
		margin-bottom: 8px;
	}
	
	.button-box {
		max-width: none;
		padding: 0px 16px;
	}
	
	.l-transfer.l-form>.contents>.c-form-input>.must-check-wrapper {
		margin-bottom: 0px;
	}
	
	.l-transfer.l-form>.contents>.c-form-input>.must-check-wrapper>p {
		padding-bottom: 60px;
	}
}

/* ====================== */
/* hover */
/* ====================== */
@media ( hover : hover) and (pointer: fine) {
	.c-btn .circle {
		display: none !important;
	}
	.c-btn.black:hover {
		background-color: var(--gray-700);
	}
}

/* ====================== */
/* keyframes */
/* ====================== */
@keyframes dim-animation {
  0% {
    background: rgba(0, 0, 0, 0);
  }

  100% {
    background: rgba (0, 0, 0, 0 0.6);
  }
}

@keyframes tooltip-show {
  0% {
    top: 0;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
  }

  100% {
    top: calc (100% + 0 0.6875rem);
    -webkit-transform: scale (1);
    transform: scale (1);
    opacity: 1;
  }
}

@keyframes tooltip-hide {
  0% {
    top: calc(100% + 0.6875rem);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    top: 0;
    -webkit-transform: scale (0 0.75);
    transform: scale (0 0.75);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  75% {
    -webkit-transform: scale (450, 450);
    transform: scale (450, 450);
    opacity: 0 0.75;
  }
  100% {
    -webkit-transform: scale (700, 700);
    transform: scale (700, 700);
    opacity: 0;
  }
}

@keyframes iLoad-animation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes loader-spinner-animation {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes snackbar-show {
  0% {
    transform: translateX(-50%) scale(0.75); /* 초기 상태: 아래쪽에서 확대 */
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1); /* 중앙으로 이동 */
    opacity: 0.9;
  }
}

@keyframes snackbar-hide {
  0% {
    transform: translateX(-50%) scale(1); /* 초기 상태: 중앙에서 축소 */
    opacity: 0.9;
  }

  100% {
    transform: translateX(-50%) scale(0.75); /* 아래쪽으로 이동 */
    opacity: 0;
  }
}

@keyframes hover-floating {
  to {
    -webkit-box-shadow: 0.125rem0.25rem1remrgba (0, 0, 0, 0.06);
    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.06);
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 767px) {
  @keyframes snackbar-show {
    0% {
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale (1);
      transform: scale (1);
      opacity: 1;
    }
  }
  
  @keyframes snackbar-hide {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale (0 0.75);
      transform: scale (0 0.75);
      opacity: 0;
    }
  }
}

@media print {
	.receipt__inner {
		width: 300px;
	}
}

/* 240812 추가 */
.c-check input:checked+#checkP, .c-check2 input:checked+#checkP,
	.c-radio input:checked+#checkP {
	color: var(--primary-blue);
}

/* 240814 추가 */
.c-form-outline.type1.el dt {
	color: #637381;
}

.el-radio input:checked+label i {
	background-color: #dfe3e8;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.el-radio input:checked+label i:before {
	background-color: #f1f4f6;
}

.el-radio input+label i {
	background-color: #dfe3e8;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.el-radio input+label i:before {
	background-color: #f1f4f6;
}

.el-radio input:hover+label i {
	-webkit-box-shadow: inset 0 0 0 3px var(--gray-200);
	box-shadow: inset 0 0 0 3px var(--gray-200);
	background-color: #dfe3e8;
}

.modal__trans__head {
	color: var(--content-sub);
}

.el_hr {
	content: '';
	left: 50%;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--border-normal);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.el-btn-back {
	display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  justify-content: center;
  border-radius: 6px;
}

 .el-btn-back:hover {
 background-color: var(--gray-100);
}

.arrow__btn--wrap {
	position: sticky;
	top: 76px;
	width: 100%;
	display: inline-flex;
	z-index: 11;
	padding: 10px 0px 10px 0px;
	background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(24px);
	justify-content: center;
	align-items: center;
}

.arrow__btn--inner {
 display: flex;
 justify-content: space-between;
 align-items: center; 
}

.arrow__btn--inner.size-s {
  width: 438px; 
}

.arrow__btn--inner.size-m {
  width: 620px;
}

.arrow__btn--inner.size-l {
  width: 1130px;
}

.arrow__btn--wrap h4 {
  color: var(--content-main);
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;     
  overflow: hidden;            
  text-overflow: ellipsis;
}

@media only screen and (max-width: 767px) {
  .arrow__btn--wrap {
  		top: 56px;
  		padding: 10px 16px 10px 16px;
  }
  
  .arrow__btn--wrap  h4 {
      font-size: 16px;
      line-height: 18px;
  }
  
  .arrow__btn--inner.size-s {
    width: 100%
  }
  
  .arrow__btn--inner.size-m {
    width: 100%
  }
  
  .arrow__btn--inner.size-l {
    width: 100%
  }

}

/* elContract 뒤로가기 버튼 */
.el-btn-back:before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: no-repeat url(/images/icon/arrow_left_black.svg);
	background-size: contain;
}

.c-form-outline-epay {
	position: relative;
}

.c-form-outline-epay.type1 .caption {
	margin-bottom: 10px;
}

.c-form-outline-epay.type1 dl {
	margin: 8px 0;
}

.c-form-outline-epay dl {
	display: flex;
	justify-content: space-between;
	line-height: 1.5;
	font-size: 14px;
}

.c-form-outline-epay dl:last-child {
	margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
	.c-form-outline-epay:not(.last, .no-data)::after {
		width: 100vw;
		height: 12px;
	}
	
	.c-form-outline-epay dt, .c-form-outline-epay dd {
		margin-bottom: 0;
	}
	
	.c-form-outline-epay:not(.last, .no-data)::after {
		width: 100vw;
		height: 12px;
	}
	
	.c-form-outline-epay.type1 .outline__report {
		height: 36px;
		padding: 11px 14px;
		font-size: 12px;
		line-height: 14px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	
	.c-form-outline-epay dd {
		text-align: right;
	}
	
	.l-form .btn-box-epay {
		position: fixed;
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		padding: 44px 0 16px;
	}
	
	.l-transfer.before.el .contents .list {
		padding: 32px 20px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
}

.c-form-outline-epay:not(.last, .no-data)::after {
	content: '';
	/* position: absolute; */
	left: 50%;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--border-normal);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.l-form .btn-box-epay {
	position: sticky;
	z-index: 5;
	left: 0;
	bottom: 0;
	padding: 44px 0 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 40%);
}

/* elContract 나가기 버튼 */
.el-btn-end:before {
	content: '';
	display: inline-block;
	top: 10px;
	left: 16px;
	margin-bottom: 24px;
	width: 24px;
	height: 24px;
	background: no-repeat url(/images/icon/stepX.svg);
	background-size: contain;
}

textarea::placeholder {
	color: #aab5c0;
}

/* 특약 모달 나가기 버튼 */
.el-btn-end-contract:before {
	content: '';
	display: inline-block;
	top: 10px;
	left: 16px;
	margin-bottom: 24px;
	width: 15px;
	height: 15px;
	background: no-repeat url(/images/icon/stepX.svg);
	background-size: contain;
}

/* 계약서 확인 div */
.el-contract-back {
	padding: 20px 20px;
	border-radius: 20px;
	background-color: white;
	border: 1px solid #eaedf0;
	width: 100%;
}

.el-contract-grey {
	padding: 1px 0px;
	background-color: rgb(231, 230, 230);
	border: 1px solid black;
	margin-bottom: 5px;
}

.contract-table table {
	table-layout: fixed;
	border: 1px solid black;
	border-collapse: collapse;
}

.contract-table table td {
	padding: 0px 3px;
	border: 1px solid black;
}

.contract-table table th {
	padding: 0px 3px;
	font-weight: bold;
	border: 1px solid black;
	text-align: justify;
	line-height: 0.5;
}

.contract-table table th:after {
	content: '';
	display: inline-block;
	width: 100%;
}

.contract-table table th:before {
	content: '';
	display: inline-block;
	width: 100%;
}

.el-contract-text {
	padding: 10px 7px;
	line-height: 2;
}

/*elContract 계약자 정보 페이지 input창 간격*/
.c-form-input.el dl {
	margin-bottom: 28px;
}

/*안심거래 css*/
.l-transfer__span--wrap {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	font-weight: 400;
	color: var(--content-sub);
	margin-bottom: 40px;
	margin-top: 10px;
}

.l-transfer__span--wrap>span::before {
	content: '•';
	left: 8px;
	color: var(--content-caption);
	font-size: 14px;
	margin-right: 8px;
	position: absolute;
}

.l-transfer__span--wrap>span {
	padding-left: 24px;
	line-height: 26px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	position: relative;
}

.l-transfer__h1__span--wrap {
	margin-bottom: 40px;
}

.l-transfer__h1__span--wrap>h1 {
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--content-main);
}

.h3--color > h3 {
	color: var(--content-main);
}

.l-transfer__h1__span--wrap>span {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: var(--content-sub);
}

.desc__wrap h1 {
	font-size: 20px;
	margin-bottom: 12px;
	color: var(--content-main);
}

.desc__wrap h3 {
	font-size: 16px;
	line-height: 18px;
	font-weight: 600;
}

.l-transfer__h1__p--wrap>p {
	padding: 18px;
	border-radius: 12px;
	background-color: var(--bg-light-gray);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	margin-bottom: 56px;
	color: var(--content-sub);
}

.l-form.l-transfer .contents .es-list {
	background: var(--bg-light-gray);
	-webkit-border-radius: 20px;
	border-radius: 12px;
	font-size: 14px;
}

.l-form.l-transfer .contents .es-list dl:not(:last-child) {
	margin-bottom: 26px;
}

.l-form.l-transfer .contents .es-list dt, .l-form.l-transfer .contents .es-list dd
	{
	color: var(--content-sub);
}

.l-form.l-transfer .contents .es-list dt {
	font-weight: 600;
	margin-bottom: 24px;
}

.l-form.l-transfer .contents .es-list.list-middot {
	padding: 16px;
}

.l-form.l-transfer .contents .list-middot dd>span {
	padding-left: 24px;
	line-height: 22px;
	color: var(--Color-System-Content-contentCaption, #919eab);
}

.l-form.l-transfer .contents .list-middot dd>span:before {
	width: 4px;
	height: 4px;
	top: 50%;
	left: 8px;
	background: var(--Color-System-Content-contentCaption, #919eab);
}

.l-form.l-transfer .contents .list-middot dd>span:last-child::before {
	top: 12px;
}

.progress-box {
	width: 49%;
	background: #fef5f6;
	margin-top: 40px;
	padding: 16px 16px 56px 16px;
	color: var(--content-sub);
}

.progress-box__wrap {
	margin-top: 20px;
}

.qna__h2--padding {
	padding-top: 36px;
}

@media only screen and (max-width: 767px) {
	.l-form.l-transfer .contents .list-middot dd>span:last-child::before {
		top: 12px;
	}
	.l-form.l-transfer .contents .list-middot dd>span:nth-child(2):before {
		top: 12px;
	}
}

/*은행선택*/
.c-bank input, .c-bank input[disabled], .c-bank input[readonly] {
	cursor: pointer;
	pointer-events: all;
	padding-right: 3rem;
	background: #fff !important;
}

.c-bank input+i {
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	width: 16px;
	height: 16px;
	background: no-repeat url(/images/icon/chevron_right_lightgray.svg);
	background-size: contain;
	pointer-events: none;
}

#modal-select-bank {
	width: 368px;
	height: 548px;
}

#modal-select-bank .modal__contents {
	width: 368px;
	height: 548px;
	overflow: scroll;
}

#modal-select-bank .banks-rect {
	width: 100%;
	height: 860px;
	float: left;
	margin-bottom: 100px;
}

#modal-select-bank .banks-rect .banks {
	width: 100%;
	height: 700px;
	float: left;
	margin-bottom: 100px;
}

#modal-select-bank .banks-rect .securities {
	width: 100%;
	height: 1000px;
	float: left;
	margin-bottom: 100px;
}

#modal-select-bank .bank-rect {
	width: 104px;
	height: 64px;
	border-radius: 8px;
	background: var(--Color-System-Background-bgLightGrey, #f9fafb);
	position: relative;
	float: left;
	margin-top: 2.3px;
	margin-bottom: 2.3px;
	margin-left: 2.3px;
	margin-right: 2.3px;
}

#modal-select-bank .bank-rect img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#modal-select-bank .bank-rect img::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--Color-System-Grey-150, #eaedf0);
}

/*은행선택 탭메뉴*/
.modal-select-bank .tab .tab__head {
	display: flex;
	position: sticky;
}

.modal-select-bank .tab .tab__head::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: var(--border-normal);
}

.modal-select-bank .tab .tab__head__item {
	position: relative;
	flex: 1 1 0;
	text-align: center;
	cursor: pointer;
}

.modal-select-bank .tab .tab__head__item::after {
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0;
	height: 2px;
	background: black;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.modal-select-bank .tab .tab__head__item a {
	display: block;
	padding: 12px 12px;
	color: var(--content-sub);
	font-weight: inherit;
}

.modal-select-bank .tab .tab__head__item--active a {
	color: black;
	font-weight: 700;
}

.modal-select-bank .tab .tab__head__item--active::after {
	width: 100%;
}

.modal-select-bank .tab .tab__body {
	margin-top: 44px;
}

/* transfer-receipt */
.transfer-receipt-wrap>.contents {
	background-color: red;
}

.transfer-receipt>.contents>.logo-table-box {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 27px;
}

.transfer-receipt>.contents>.logo-table-box>h1 {
	font-size: 26px;
	font-weight: 700;
	line-height: 31.03px;
}

.part-name {
	width: 160px;
	border-right: 0;
	height: 44px;
	background-color: var(--gray-100);
	padding: 10px 14px;
	color: var(--content-sub);
	border-color: var(--border-outline);
}

.transfer-receipt .table-box table tr td {
	height: 44px;
	padding: 10px 14px;
	border-color: var(--border-outline);
}

.transfer-receipt .table-box table tr {
	width: 100%;
	height: 44px;
}

.information-transfer {
	line-height: 22px;
	font-size: 14px;
	font-weight: 400;
	margin-top: 17px;
	color: var(--content-sub);
}

.img-company__wrap {
	margin-top: 40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.company-name-date__wrap {
	display: flex;
	flex-direction: column;
	margin-right: 12px;
	text-align: right;
}

.company-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: var(--content-main);
}

.transfer-date {
	font-size: 14px;
	font-weight: 400;
	color: var(--content-sub);
}

.date-summary__wrap {
	display: flex;
}

.align__wrap {
	display: flex;
}

.span__wrap {
	background-color: var(--bg-light-gray);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	color: var(--content-caption);
	font-size: 14px;
}

.span__wrap>span::before {
	content: '•';
	left: 8px;
	color: var(--content-caption);
	font-size: 14px;
	margin-right: 8px;
	width: 3px;
	height: 3px;
	position: absolute;
}

.span__wrap>span {
	padding-left: 24px;
	line-height: 22px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	position: relative;
}

#bottom-sheet-select-bank {
	height: 70vh;
	border-radius: 16px 16px 0 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	max-width: 438px;
}

.bottom-sheet__contents {
	display: flex;
	justify-content: center;
	margin-top: 24px;
	overflow-y: auto;
}

.bottom-sheet__content > span {
 color: var(--content-sub);
 font-size: 14px;
}

#bottom-sheet-select-bank .modal__contents {
	height: 548px;
	overflow: scroll;
}

#bottom-sheet-select-bank .banks-rect {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	place-items: center;
	gap: 8px;
	padding: 0 16px 16px 16px;
}

#bottom-sheet-select-bank .banks-rect .banks {
	width: 100%;
	height: 700px;
	float: left;
	margin-bottom: 100px;
}

#bottom-sheet-select-bank .banks-rect .securities {
	width: 100%;
	height: 1000px;
	float: left;
	margin-bottom: 100px;
}

#bottom-sheet-select-bank .bank-rect {
	width: 100%;
	height: 64px;
	border-radius: 8px;
	background: var(--Color-System-Background-bgLightGrey, #f9fafb);
	position: relative;
	float: left;
	margin-top: 2.3px;
	margin-bottom: 2.3px;
	margin-left: 2.3px;
	margin-right: 2.3px;
}

#bottom-sheet-select-bank .bank-rect img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#bottom-sheet-select-bank .bank-rect img::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--Color-System-Grey-150, #eaedf0);
}

/*은행선택 탭메뉴*/
.bottom-sheet-select-bank .tab .tab__head {
	display: flex;
	position: sticky;
}

#bottom-sheet-select-bank .bank-rect:hover {
	background: var(--gray-200);
	cursor: pointer;
}

.bottom-sheet-select-bank .tab .tab__head::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: var(--border-normal);
}

.bottom-sheet-select-bank .tab .tab__head__item {
	position: relative;
	flex: 1 1 0;
	text-align: center;
	cursor: pointer;
}

.bottom-sheet-select-bank .tab .tab__head__item::after {
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0;
	height: 2px;
	background: black;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.bottom-sheet-select-bank .tab .tab__head__item a {
	display: block;
	padding: 12px 12px;
	color: var(--content-sub);
	font-weight: inherit;
}

.bottom-sheet-select-bank .tab .tab__head__item--active a {
	color: black;
	font-weight: 700;
}

.bottom-sheet-select-bank .tab .tab__head__item--active::after {
	width: 100%;
}

.bottom-sheet-select-bank .tab .tab__body {
	margin-top: 44px;
	max-width: 480px;
	width: 100%;
}


.close-head__wrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding-bottom: 17px;
	padding: 25px 16px;
}

.bottom-sheet__head {
	font-size: 20px;
	font-weight: 600;
}

.bottom-sheet {
	position: fixed;
	left: 0;
	bottom: -100vh;
	width: 100%;
	background-color: var(--bg-white);
	box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
	transition: bottom 0.3s;
	z-index: 40;
	overflow-y: auto;
}

.bottom-sheet.show {
	bottom: 0;
}

.bottom-sheet-select-bank>.head-tab__wrap {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--bg-white);
}

.bottom-sheet-select-bank::-webkit-scrollbar {
	display: none;
}

.bottom-sheet__contents>.mg-t-0 {
	width: 100%;
}

/* bridge */

.l-bridge .contents {
	max-width: 400px;
}

.l-bridge .contents>span {
	display: flex;
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
	color: var(--content-caption);
	margin: 36px 0;
	justify-content: center;
}

.l-bridge .img-h1__wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 236px;
}

.l-bridge .img-h1__wrap img {
	width: 72px;
	height: 72px;
}

.l-bridge .img-h1__wrap .h1__wrap {
	font-size: 26px;
	line-height: 36px;
}

.l-bridge .img-h1__wrap p {
	text-align: center;
	font-size: 14px;
	color: var(--content-sub);
	line-height: 22px;
}

.l-bridge .img-h1__wrap table>tr>th {
	vertical-align: baseline;
}

.table-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.table-wrap table {
	border-collapse: separate;
}

.table-wrap tbody {
	line-height: 28px;
	color: var(--content-main);
	font-size: 14px;
	border-bottom: 1px solid var(--border-outline);
	border-top: 1px solid var(--border-outline);
	padding: 36px 0;
	display: block;
	margin-top: 52px;
}

.table-wrap th {
	vertical-align: baseline;
	width: 76px;
	color: var(--content-sub);
	border-spacing: 100px;
}

.table-wrap tbody td span {
	color: var(--primary-blue);
}

.table-wrap .messeage__wrap {
	line-height: 18px;
	padding: 5px 0;
	padding-bottom: 20px;
}

.table-wrap .messeage__wrap>p {
	font-size: 12px;
	color: var(--content-caption);
}

/* elContract 신청인 유형 뒤로가기 버튼 공간 */
.l-form.l-transfer>.arrow__btn--wrap {
	display: flex;
	align-items: center;
}

@media only screen and (max-width: 768px) {
	.l-form.l-transfer>.arrow__btn--wrap {
		left: 0;
		max-width: 100%;
	}
}

.give-owner__img--wrap {
	margin: 56px 0;
	display: flex;
	flex-direction: column;
}

.give-owner__img--wrap>.give-owner__banner {
	width: 100%;
	border-radius: 16px;
}

.give-owner__img--wrap>h5 {
	padding: 12px 0;
	margin-bottom: 8px;
	line-height: 34px;
	font-size: 24px;
	font-weight: 600;
}

@media only screen and (max-width: 768px) {
	.give-owner__img--wrap>h5 {
		left: 0;
		max-width: 100%;
		font-size: 18px;
		margin-bottom: 0;
		line-height: 28px;
	}
}

/* 중고차 거래 페이지 신청내역 보기 버튼 */
@media only screen and (max-width: 768px) {
	.c-btn.secondary.size-m.btn-size-s {
		min-width: 64px;
		height: 36px;
		padding: 11px 14px;
		font-size: 12px;
		line-height: 14px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
}

.tab__head--second {
	display: flex;
}

.l-find.l-form section.title {
	position: sticky;
	display: flex;
	max-width: 438px;
	left: calc(50% - 219px);
	display: flex;
	top: 77px;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-white);
	z-index: 20;
}

.l-find.l-form section.title .tab__head {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0 0 0;
	border-bottom: 1px solid var(--border-outline);
}

.l-find.l-form .contents .tab {
	border-bottom: none;
	padding: 0;
}

@media only screen and (max-width: 768px) {
	.l-find.l-form section.title {
		top: 56px;
		max-width: 100%;
	}
}

.l-find.l-form .contents .btn-box {
	position: static;
	padding: 0;
}

.l-find.l-form.l-find-final .contents .btn-box {
  padding-top:84px;
}

/* estimate intro */
.l-estimate.intro .title, .l-estimate.recent .title {
	max-width: 438px;
}

.l-estimate.intro .title__main {
	display: flex;
	align-items: center;
	gap: 4px;
}

.l-estimate.intro .title span.c-chip {
	align-items: center;
	justify-content: center;
	display: flex;
	height: 30px;
	padding: 6px;
}

.l-estimate.intro .contents {
	max-width: 438px;
	padding-top: 34px;
}

.l-estimate.recent .contents {
	max-width: 438px;
	padding-top: 36px;
}

.l-estimate.recent .contents .no-estimate-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--content-sub);
}

.l-estimate.intro .contents .latest-quote__top-bar {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
}

.l-estimate.intro .contents .latest-quote__top-bar>span {
	color: var(--content-sub);
	font-weight: 400;
}

.l-estimate.intro .contents .example-image--wrap {
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 54px;
	border-radius: 16px;
}

.l-estimate.intro .contents .example-image--wrap>img {
	width: 100%;
	border-radius: 12px;
}

.l-estimate.intro .contents .intro--wrap {
	margin-top: 38px;
}

.l-estimate.intro .intro--wrap>.intro__header>.intro__header--title {
	font-weight: 700;
	font-size: 24px;
	line-height: 38px;
	color: var(--content-main);
	margin-bottom: 10px;
	margin-top: 64px;
}

.l-estimate.intro .intro--wrap>.intro__header>.intro__header--desc {
	margin-top: 10px;
	color: var(--content-sub);
}

.l-estimate.intro .contents .intro--wrap>.intro__background {
	margin-bottom: 24px;
	width: 100%;
}

.l-estimate.intro .contents .intro--wrap>.intro__background>img {
	width: 100%;
}


.l-estimate.intro .contents .list {
	background: var(--bg-light-gray);
	padding: 24px 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.l-estimate.intro .contents .list dt {
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--content-sub);
}

.l-estimate.intro .contents .list-middot dd>span {
	padding-left: 24px;
	line-height: 24px;
}

.l-estimate.intro .contents .list-middot dd>span:before {
	left: 0px;
}

.l-estimate.intro .contents .list dt, .l-estimate.intro .contents .list dd {
	color: var(--content-sub);
}


.l-estimate.intro .contents .card, .l-estimate.recent .contents .card {
	display: flex;
	flex-direction: column;
}

.l-estimate.intro .contents .card__body {
	margin-bottom: 12px;
}

.l-estimate.intro .contents .card__body, .l-estimate.recent .contents .card__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.l-estimate.intro .contents .card__body .name--wrap, .l-estimate.recent .contents .card__body .name--wrap
	{
	display: flex;
	flex-direction: column;
}

.l-estimate.intro .contents .card__body .name--wrap>span:first-child,
.l-estimate.recent .contents .card__body .name--wrap>span:first-child {
	color: var(--content-sub);
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 2px;
}

.l-estimate.intro .contents .card__body .name--wrap>span:nth-child(2),
.l-estimate.recent .contents .card__body .name--wrap>span:nth-child(2)
	{
	color: var(--content-main);
	font-weight: 600;
	line-height: 22px;
	font-size: 16px;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.l-estimate.intro .contents .card__body .name--wrap>span:last-child,
.l-estimate.recent .contents .card__body .name--wrap>span:last-child {
	color: var(--content-sub);
	line-height: 16px;
	gap: 4px;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.l-estimate.intro .contents .estimate-intro__card--wrap {
 display: flex;
 gap:12px;
  
}

.l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card {
 display: flex;
 flex-direction: column;
 gap: 15px;
 padding: 16px;
 background-color: var(--gray-100);
 border-radius: 12px;
 width: 100%;
 transition : 0.2s;
}

.l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card:hover {
 background-color: var(--gray-200);

}

.l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card > span:first-child {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--content-main);
}

.l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card > span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-blue)
}

.l-estimate.recent .contents .card__body>a {
	cursor: pointer;
}

.l-estimate.recent .contents .card__list .card {
	display: flex;
	padding: 16px;
	margin-bottom: 10px;
}

.l-estimate.recent .contents span.result-number {
	color: var(--primary-blue);
	font-weight: 600;
}

.l-estimate.recent .contents .result-number--wrap {
	margin-bottom: 12px;
	display: flex;
  justify-content: space-between;
}

.l-estimate.recent .contents .result-number--wrap>span {
	color: var(--content-sub);
	line-height: 22px;
}

.l-estimate.recent .contents .card__body {
	flex-direction: column;
}

.l-estimate.recent .contents .card__body>.date>span {
	border-radius: 16px;
	color: var(--primary-blue);
	border: 1px solid var(--primary-blue);
	width: fit-content;
	padding: 2px 6px;
	font-size: 12px;
}

.l-estimate.recent .contents .card__body>.date {
	width: 100%;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.l-estimate.recent .contents .card__body .finance_options {
	width: 100%;
	display: flex;
	flex-direction: column;
	color: var(--content-sub);
}

.l-estimate.recent .contents .card__body .finance_options .option1 {
	margin-bottom: 8px;
}

.l-estimate.recent .contents .card__body .finance_options .option1>span:last-child
	{
	color: var(--content-main);
	font-weight: 600;
}

.l-estimate.recent .contents .card__body .finance_options .option2>span:last-child
	{
	color: var(--content-main);
}

.l-estimate.recent .contents .card__body .finance_options>div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.l-estimate.recent .contents .card__body .img-name--wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.l-estimate.recent .contents .card__body .btn--wrap {
	width: 100%;
	margin-top: 18px;
}

.l-estimate.recent .contents .card__body .btn--wrap>button {
	width: 100%;
	font-weight: 400;
}

.l-estimate.recent .button--wrap {
  position: fixed;
  max-width: 438px;
  left: 50%;
  transform : translateX(-50%);
  width: 100%;
}


@media only screen and (max-width: 768px) {
	.l-estimate.intro .contents .example-image--wrap {
		border-radius: 0;
	}
	
	.l-estimate.intro .contents {
		padding: 0;
		padding-top: 14px;
	}
	
	.l-estimate.intro .contents .latest-quote__top-bar {
		padding: 12px 16px;
	}
	
	.l-estimate.intro .contents .card__list {
		padding: 0 16px;
	}
	
	.intro__header {
		padding: 0 16px;
	}
	
	.l-estimate.intro .contents .timeline {
		padding: 0 16px;
	}
	
	.l-estimate.intro .contents .list {
		padding: 0 16px;
	}
	
	.l-estimate.intro .middot-container {
		padding: 0 16px;
	}
	
	.l-estimate.intro .button--wrap {
  bottom : 52px
  }
  
  .l-estimate.intro .contents .estimate-intro__card--wrap {
    padding: 0 16px;
  }
  
 .l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card > span:first-child,
 .l-estimate.intro .contents .estimate-intro__card--wrap > .estimate-intro__card > span:last-child {
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
  }	
}

.bottom-sheet {
	position: fixed;
	bottom: -150%;
	left: 50%;
	width: 100%;
	max-width: 480px;
	background: white;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
	transition: bottom 0.3s ease;
	z-index: 1000;
	transform: translateX(-50%);
}

.bottom-sheet.active {
	bottom: 0;
}

/* 공통 바텀시트 */

.btm-sheet__head {
 padding: 24px 16px 4px;
}

.btm-sheet__head > h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
   color: var(--content-main);
}

.btm-sheet__contents {
 padding: 0px 16px;
 
}

.btm__button {
 padding: 16px;
 margin-top: 24px;
}

.btm__button.half-row {
  display: flex;
  gap: 8px;
}


.btm__button.half-row > button {
 display: flex;
 gap: 8px;
 width: 100%;
}


.btm__button.full > button {
  width: 100%;
}


.btm-sheet__contents > span {
 line-height: 24px;
 font-size: 16px;
 font-weight: 400;
 color: var(--content-sub);
}

/* 바텀시트 헤더 */
.bottom-sheet__header {
	padding: 20px 16px 8px;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: left;
}

.bottom-sheet__header>h3 {
	width: 100%;
	font-size: 20px;
	color: var(--content-main);
}

.bottom-sheet__header>span {
	width: 100%;
	font-size: 16px;
	line-height: 24px;
	color: var(--content-sub);
}

/* 바텀시트 내용 */
.bottom-sheet__content {
	padding: 16px 16px 0px;
}

/* 폼 스타일 */
.formRow {
	margin-bottom: 16px;
}

.formRow label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: #333;
	width: 100%;
}

.formRow__phone {
	display: flex;
	gap: 10px;
	height: 48px;
	border-radius: 8px;
}

.formRow input, .formRow select {
	border: none;
}

.input-wrapper {
	position: relative;
	width: 100%;
}

.text-input {
	width: 100%;
	padding-right: 36px;
	box-sizing: border-box;
}

span.span_desc {
	color: var(--content-sub);
	font-size: 12px;
	font-weight: 400;
}

.clear-btn {
	position: absolute;
	right: 8px; 
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: url('/images/icon/icon-x-circle-filled.svg') no-repeat center/contain;
	border: none;
	cursor: pointer;
	display: none;
}

.input-wrapper.has-content .clear-btn {
	display: block; 
}

.formRow textarea {
	width: 100%;
	padding: 18px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	height: 108px;
	resize: none;
}

.bottom-sheet__content label {
	display: flex;
	position: relative;
	cursor: pointer;
}

.bottom-sheet__content .formRow:first-child>label::after,
.bottom-sheet__content .formRow:nth-child(2)>label::after {
	content: '*';
	color: red;
}

.bottom-sheet__content label span {
	font-size: 14px;
	color: var(--content-main);
	align-items: center;
	display: flex;
	user-select: none;
	margin-bottom: 8px;
}

.bottom-sheet__content label span::before {
	content: '';
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background: url('/images/icon/icon_checksquare_disabled.svg') no-repeat center/contain;
	display: inline-block;
	user-select: none;
}

.bottom-sheet__content label.on span::before {
	background: url('/images/icon/icon_checksquare_checked.svg') no-repeat center/contain;
	user-select: none;
}

.bottom-sheet__content label span>a {
	text-decoration: underline;
	color: var(--content-main);
}

.bottom-sheet__button {
	display: flex;
	gap: 8px;
	margin-top: 26px;
	padding: 16px 0;
}

.l-notification-detail .contents {
 padding-top : 20px;
}

.l-notification-detail span{
 font-weight: 400;
 line-height: 26px;
 color:var(--content-main);
 
}

.l-notification-detail h5 {
 font-weight: 700;
 line-height: 26px;
 color:var(--content-main);
}


.l-notification-detail .middot span {
 display: flex;
 color:var(--content-main);
}

.l-notification-detail .middot span::before {
 content:"⦁";
 display: flex;
 margin-right: 8px;
 margin-left : 8px;
}

#container.l-notification {
 position: relative;
}

@media only screen and (max-width: 768px) {
 #container.l-notification {
  position: relative;
  padding-bottom: 180px;
 } 
}

/* 전기차 배터리 제조사 확인 페이지 */

.l-car-battery .contents {
    overflow-x: auto; 
    max-width: 620px;
}

.l-car-battery .contents table {
  margin-top: 8px;
}

.l-car-battery .contents table tr,
.l-car-battery .contents table td,
.l-car-battery .contents table th {
 height: 48px;
 display: flex;
 font-size: 14px;
 font-weight: 500;
 line-height: 20px;
 color: var(--content-main);
}

.l-car-battery .contents table th {
 background-color: var(--gray-50);
}

.l-car-battery .contents table .first-column {
 align-items: center;
 padding: 4px 12px;
 width: 113px;
 border-left: none;
 border-right: none;
 border-top: 1px solid var(--border-outline);
 border-bottom: 1px solid var(--border-outline);
}

.l-car-battery .contents table .second-column {
 align-items: center;
 padding: 4px 12px;
 width: 221px;
 border-left: none;
 border-right: none;
 border-top: 1px solid var(--border-outline);
 border-bottom: 1px solid var(--border-outline);
}

.l-car-battery .contents table .third-column {
 align-items: center;
 padding: 4px 12px;
 width: 178px;
 border-left: none; 
 border-right: none;
 border-top: 1px solid var(--border-outline);

}

.l-car-battery .contents table .forth-column { 
 align-items: center;
 padding: 4px 12px;
 width: 108px; 
 border-right: none;
 border-left: none;
 border-top: 1px solid var(--border-outline);
 border-bottom: 1px solid var(--border-outline);
}



/* 상품용 차량 */
 
.l-sale-car .tab__title {
    display: flex;
    align-items: center;
    justify-content: normal;
    gap:4px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0;
}

.l-sale-car .car-profile {
 padding-bottom: 12px;
}

.l-sale-car .sale-car-info {
 padding:0 16px;
}

.l-sale-car .car-number-select {
 padding: 0;
}

.l-sale-car .sale-car-info__item {
 padding:6px 12px;
 background: rgba(48, 130, 247, 0.06);
 color: var(--primary-blue);
 border-radius: 6px;
 font-weight: 500;
 font-size: 13px;
 line-height: 20px;
 margin-bottom: 20px;
 
}

.l-sale-car .sale-car-info__item > span{
 font-family: Pretendard;
 font-weight: 600;
 font-size: 13px;
 line-height: 20px;
 letter-spacing: 0px;  
}

.l-sale-car .vehicle-card__history {
 padding: 12px 16px;
}

.l-sale-car .vehicle-card__history .vehicle-card__history-list{
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.l-sale-car .vehicle-card__history .vehicle-card__history-list .vehicle-card__history-item{
  background-color: var(--gray-100);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--content-sub);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  align-items: center;
}

.l-sale-car .vehicle-card__history-item.price:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/money.svg) no-repeat center;
  margin-right: 7px;
}


.l-sale-car .vehicle-card__history-item.warning:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/danger.svg) no-repeat center;
  margin-right: 7px;
}

.l-sale-car .vehicle-card__history-item.positive:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/success.svg) no-repeat center;
  margin-right: 7px;
}

.l-sale-car .vehicle-card__history-item.change-user:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/person.svg) no-repeat center;
  margin-right: 7px;
}

.l-sale-car .info-main-wrapper .info__content .info-line{
  padding: 4px 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  color: var(--content-sub)
}

.l-sale-car .info-main-wrapper {
  margin-top: 32px;
}

.l-sale-car .info-main-wrapper .info__content {
  padding: 16px 0;
}

.l-sale-car .desc-box {
  padding: 16px;
}

.l-sale-car .desc {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--gray-100);
}

.l-sale-car .desc .desc-list > ul{
  margin-top : 8px;
  display: flex;
  flex-direction: column;

}

.l-sale-car .desc .desc-list > ul > li{
 padding: 2px 0;
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 display: flex;
 justify-content: space-between;
 color: var(--content-main);
}

.l-sale-car #c-tip-detail-model-pirce {
 display: flex;
 align-items: center;
 gap:4px;
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 color: var(--content-main);
}

.l-sale-car .car-spec__mileage-info {
 display: flex;
}

.l-sale-car .car-spec__mileage-info > .car-spec__item {
 width: 100%;
}

.l-sale-car .car-spec__mileage-info > .car-spec__item > span{
 text-align: left
}

.l-sale-car .car-spec__mileage-info > .car-spec__item > strong{
 font-weight: 600;
 font-size: 20px;
 line-height: 30px;
 width: 100%;
}


.l-sale-car .predicted-mileage-period > .car-spec__item {
 width: 100%;
}

.l-sale-car .mileage-item  {
 display: flex;
 justify-content: flex-start;
}

.l-sale-car .mileage-item .date-type-wrapper  {
  width: 90px;
  font-family: Pretendard;
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0px; 
}

.l-sale-car .date-type-wrapper > .mileage-date  {

 font-weight: 600;
 font-size: 13px;
 line-height: 22px;
}

.l-sale-car .mileage-type  {
  text-align: left;
}

.l-sale-car .sub-desc {
 font-family: Pretendard;
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 letter-spacing: 0px;
 vertical-align: middle;
 color: var(--content-sub);
 padding: 0 16px;
}

.l-sale-car .stat-cards-wrapper {
  padding: 4px 16px;
  display: flex;
  gap: 8px;
}

.l-sale-car .stat-card {
  border-radius: 8px;
  padding: 20px;
  background-color: var(--gray-100);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
 
}

.l-sale-car .stat-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--content-sub);
}

.l-sale-car .stat-label > button{
  display: flex;
  gap:4px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--content-sub);
}

.l-sale-car .stat-value {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  vertical-align: middle;
  color: var(--content-main);
}

.l-sale-car .repair-year-header {
  padding: 10px 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 8px;
     
}
.l-sale-car .repair-year-header img {
 transition: transform 0.2s ease;
}

.l-sale-car .repair-year-header img.rotated {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.l-sale-car .repair-year-header:hover {
 background-color: var(--gray-100);
}

.l-sale-car .accident-year {
 display: flex;
 align-items: center;
 gap:4px;
}

.l-sale-car .year-label {
 color: var(--content-main)
}

.l-sale-car .year-summary {
 display: flex;
 gap:5px;
 align-items: center;
}

.l-sale-car .year-summary span:first-child {
  font-family: Pretendard;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--content-sub)
}

.l-sale-car .year-summary span:nth-child(2) {
 font-family: Pretendard;
 font-weight: 600;
 font-size: 14px;
 line-height: 20px;
 color: var(--primary-blue);
}

.l-sale-car .year-summary img {
 transform: rotate(90deg)
}

.l-sale-car .repair-info {
 display: flex;
 flex-direction: row;
}

.l-sale-car .repair-date {
 width: 90px;
}

.l-sale-car .repair-date > span{
 line-height: 22px;
}

.l-sale-car .repair-detail-meta {
 display: flex;
 align-items: center;
 gap:6px;
}

.l-sale-car .maintenance-status-card--wrap {
 padding: 0 16px;
 display: flex;
 flex-direction: column;
 gap:12px;
 margin-top: 12px;
 margin-bottom: 12px;
}
.l-insuranceAccidentDetail .card-line,
.l-sale-car .card-line {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}


.l-sale-car .maintenance-status-card {
 background-color: var(--gray-100);
 padding: 16px 20px 20px;
 display: flex;
 flex-direction: column;
 gap:8px;
 border-radius: 12px;
 width: 100%;
}

.l-sale-car .maintenance-status-card > .status-header {
  display: flex;
  align-items: center;
  color: var(--content-main);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

.l-sale-car .progress-bar {
 height: 10px;
}

.l-sale-car .status-progress > .progress-track{
  border-radius: 4px;
  height: 8px;
  background-color: var(--gray-200);
  position: relative;
  overflow: hidden;
}

.l-sale-car .status-footer {
 display: flex;
 justify-content: space-between;
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 color: var(--content-main);
}

.l-insuranceAccidentDetail .record--wrap,
.l-sale-car .record--wrap {
 padding: 0 16px;
 display: flex;
 flex-direction: column;
 gap:12px;
 margin-top: 12px;
 margin-bottom: 8px;
}

.l-insuranceAccidentDetail .desc-card,
.l-sale-car .desc-card {
 padding: 20px;
 background-color: var(--gray-100);
 display: flex;
 flex-direction: column;
 gap:4px;
 color: var(--content-sub);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 border-radius: 12px;
 align-items: baseline;
}

.l-insuranceAccidentDetail .desc-card .cnt,
.l-sale-car .desc-card .cnt{
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
}


.l-insuranceAccidentDetail .cnt-y,
.l-sale-car .cnt-y{
  color: var(--content-error)
}

.l-insuranceAccidentDetail .cnt-n,
.l-sale-car .cnt-n{
  color: var(--content-main);
}


.l-sale-car .date-drop-wrapper {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.l-sale-car .date-number--wrap {
 display: flex;
 flex-direction: column;
 gap:4px;
}
.l-sale-car .car-drop-number {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-sub); 
}

.l-sale-car .advanced-safety__content{
  padding: 0 16px;
  margin-top: 8px;
}

.l-sale-car .advanced-safety-card {
  display: flex;
  padding: 14px;
  background-color: var(--gray-100);
  display: flex;
  gap:10px;
  border-radius: 12px;
}

.l-sale-car .advanced-safety-card__item--wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.l-sale-car .advanced-safety-card__item {
 display: flex;
 height: 30px;
 padding: 2px 4px;
 align-items: center;
 font-weight: 500;
 font-size: 13px;
 line-height: 20px;
 color: var(--content-sub);
 gap:10px;
}

.l-sale-car .advanced-safety-card__icon.installed:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/circle.svg) no-repeat center;
}

.l-sale-car .advanced-safety-card__icon.no-installed:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/dash.svg) no-repeat center;
}

.l-sale-car .advanced-safety-card__icon.optional:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/triangle.svg) no-repeat center;
}

.l-sale-car .advanced-safety-card__icon.unavailable:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/cross.svg) no-repeat center;
}

.l-insuranceAccidentDetail .advanced-safety__list,
.l-sale-car .advanced-safety__list {
  padding: 16px;
}

.l-insuranceAccidentDetail .advanced-safety__row,
.l-sale-car .advanced-safety__row {
 height: 30px;
 display: flex;
 gap: 10px;
}

.l-insuranceAccidentDetail .advanced-safety__row:first-child > .advanced-safety__cell,
.l-sale-car .advanced-safety__row:first-child > .advanced-safety__cell{
  border-top :1px solid var(--border-outline);
}

.l-sale-car .advanced-safety__cell {
 width: 100%;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 1px solid var(--border-outline);
 display: flex;
 align-items: center;
 gap:10px;
}

.l-insuranceAccidentDetail .feature__name,
.l-sale-car .feature__name {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
}

.l-sale-car .info-divider {
 height: 1px;
 background-color: var(--gray-100);
 width: 100%;
 margin: 10px 0;
}

.l-sale-car .chart-title {
 padding:0 16px;
 font-weight: 500;
 font-size: 13px;
 line-height: 22px;
 color: var(--content-sub);
 width: 100%;
 margin: 24px 0;
 display: flex; 
}

/* ===== insuranceAccidentDetail ===== */

.l-insuranceAccidentDetail .contents {
 padding: 0;
 max-width: 620px;
 min-width: 0;
 flex: auto;
}

.l-insuranceAccidentDetail .arrow__btn--inner {
 width: 620px;
 padding: 0 12px;
}

.l-insuranceAccidentDetail .arrow__btn--wrap {
 padding: 10px 0px 10px 0px;
 background-color: var(--white);
}

.l-insuranceAccidentDetail .info__content .info-line {
 display: flex;
 justify-content: space-between;
 padding: 4px 16px;
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub)
}

.l-insuranceAccidentDetail .info__content .info-line > div {
 display: flex;
 flex-direction: column;
 text-align: right;
}

.l-insuranceAccidentDetail .car-info-wrapper {
 padding: 10px 16px;
}

.l-insuranceAccidentDetail .car-info > div{
 display: flex;
 width: 51px;
 padding: 0px 15px 0px 16px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 border-right: 1px solid var(--border-input);
 background: rgba(249, 250, 251, 1);
 border-radius: 8px 0px 0px 8px;
}

.l-insuranceAccidentDetail .car-info > span{
  padding: 14px;
}

.l-insuranceAccidentDetail .car-info > span > span{
  color: var(--content-sub);
  font-family: Pretendard;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
}

.l-insuranceAccidentDetail .car-info {
  font-size: 14px;
  color: var(--content-sub);
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  display: flex;
}

.l-insuranceAccidentDetail .detail-history--wrap {
 padding: 12px 16px;
}

.l-insuranceAccidentDetail .detail-history__info-line--wrap {
 display: flex;
 gap:4px;
 align-items: center;
}

.l-insuranceAccidentDetail .detail-history__info-line {
 display: flex;
 justify-content: space-between;
 padding: 4px 0;
}

.l-insuranceAccidentDetail .detail-history__info-line:nth-child(2){
 font-weight: 600; 
}

.l-insuranceAccidentDetail .detail-history__info-line--date {
 font-weight: 600;
 font-size: 15px;
 line-height: 22px;
 color: var(--content-main); 
}

.l-insuranceAccidentDetail .detail-history__info-line--label {
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
}

.l-insuranceAccidentDetail .detail-history__info-line--cost {
 font-size: 14px;
 line-height: 22px;
 color: var(--content-main);
}

.l-insuranceAccidentDetail .repair-history__card--wrap {
 padding: 8px 16px;
}

.l-insuranceAccidentDetail .repair-history__card--wrap > ul {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 8px;
}

.l-insuranceAccidentDetail .repair-history__card {
 padding: 14px 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: var(--gray-100);
 border-radius: 12px;
 flex-direction: column;
 gap:1px;
}

.l-insuranceAccidentDetail .repair-history__card > span:first-child {
 color:var(--content-sub);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
}

.l-insuranceAccidentDetail .repair-history__card > span:last-child {
 color:var(--content-main);
 font-weight: 600;
 font-size: 14px;
 line-height: 20px;
}

.l-insuranceAccidentDetail .detach,
.l-insuranceAccidentDetail .paint,
.l-insuranceAccidentDetail .paint-detach {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
}

.l-insuranceAccidentDetail .advanced-safety__cell {
 width: 100%;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 1px solid var(--border-outline);
 display: flex;
 align-items: center;
 gap:10px;
 justify-content: space-between;
}


/* ===== consumablesDetail =====  */


.l-consumablesDetail .contents {
  padding: 0;
  max-width: 620px;
  min-width: 0;
  flex: auto;
}

.l-consumablesDetail .consumable { 
  display: none; 
}

.l-consumablesDetail .arrow__btn--inner {
 width: 620px;
 padding: 0 12px;
}

.l-consumablesDetail .arrow__btn--wrap {
 padding: 10px 0px 10px 0px;
 background-color: var(--white);
}

.l-consumablesDetail .consumable__title--wrap {
 padding:0 16px;
 margin-bottom: 14px;
}

.l-consumablesDetail .consumable__title {
 font-weight: 600;
 font-size: 24px;
 line-height: 36px;
 color: var(--content-main);
}

.l-consumablesDetail  .consumable__progress {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 0 16px;
}

.l-consumablesDetail  .consumable__progress-bar {
 height: 10px;
}

.l-consumablesDetail .consumable__status {
 display: flex;
 gap:4px;
 align-items: center;
}

.l-consumablesDetail .consumable__usage {
 font-weight: 600;
 font-size: 18px;
 line-height: 28px;
 color: var(--content-main);
 
}

.l-consumablesDetail .consumable__progress-track {
 width: 100%;
 border-radius: 4px;
 height: 8px; 
 background-color: var(--gray-200);
 overflow: hidden;
}

.l-consumablesDetail .consumable__info-list {
 padding: 0 16px;
 margin-top: 20px;
}

.l-consumablesDetail .consumable__info-item {
 padding: 4px 0px;
 display: flex;
 justify-content: space-between;
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub)
}

.l-consumablesDetail .consumable__info-item:first-child {
 font-weight: 600;
 font-size: 14px;
 line-height: 22px;
}

.l-consumablesDetail .consumable__info-item:last-child > .consumable__info-value,
.l-consumablesDetail .consumable__info-item:first-child > .consumable__info-value {
 color: var(--content-main);
 font-weight: 600;
}

.l-consumablesDetail .maintenance-history {
  margin-top: 62px;
}

.l-consumablesDetail .maintenance-history__list {
  padding: 12px 0;
}

.l-consumablesDetail .maintenance-history__header {
  padding: 4px 16px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.l-consumablesDetail .maintenance-history__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--content-main); 
}

.l-consumablesDetail .maintenance-history__item {
  display: flex;
  padding: 12px 16px 12px 16px;
}

.l-consumablesDetail .maintenance-history__date {
  color:var(--content-sub);
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  width: 90px;
}

.l-consumablesDetail .maintenance-history__meta {
  display: flex;
  gap:4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
  align-items: center;
}

.l-consumablesDetail .maintenance-history__desc {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main);
}


.l-consumablesDetail .maintenance-history__content {
  display: flex;
  flex-direction: column;
  gap:4px;
}


.l-consumablesDetail .show-more-btn {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--content-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  margin: 0 16px;
  border-radius: 8px;
}


.l-consumablesDetail .btnShowMore, 
.l-consumablesDetail .btnHideMore {
  align-items: center;
  display: flex;
  width: 100%;
  height: 48px;
  justify-content: center;
  border: 1px solid var(--border-outline);
  border-radius: 10px;
}

.l-consumablesDetail .btnShowMore img {
  transform: rotate(90deg);
  width: 20px;
  height: 20px;
 
}

.l-consumablesDetail .btnHideMore img {
  transform: rotate(-90deg);
  width: 20px;
  height: 20px;
}

.l-consumablesDetail .consumable__caution {
  margin-top: 39px
}

.l-consumablesDetail .consumable__caution-header {
  padding: 4px 16px;
}

.l-consumablesDetail .consumable__caution-title{
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--content-main); 
}

.l-consumablesDetail .consumable__caution-list--wrap {
 padding: 10px 16px;
}

.l-consumablesDetail .consumable__caution-list{
 border-radius: 10px;
 padding: 14px;
 background-color: var(--gray-100);
}

.l-consumablesDetail .consumable__caution-item {
 position: relative;
 padding-left: 15px;
 display: block;
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub); 
}

.l-consumablesDetail .consumable__caution-item:before {
 content: '';
 position: absolute;
 left: 0;
 top: calc((22px - 4px) / 2);
 width: 4px;
 height: 4px;
 background-color: var(--content-sub);
 border-radius: 50%;
}

.l-consumablesDetail.bottom-sheet.c-tip {
 max-width: 620px;
} 

.l-insuranceAccidentDetail .no-info, 
.l-consumablesDetail .no-info {
 gap: 10px;
 padding-top: 48px;
 padding-right: 10px;
 padding-bottom: 48px;
 padding-left: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--content-sub);
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 display: flex;
 flex-direction: column;
}

/* 임직원몰 코드 입력 페이지 */
#container.l-insertCode {
  display: flex;
  flex-direction:column;
  padding-bottom: 0;
}

.l-insertCode .contents {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-radius: 20px;
  margin-top: 72px;
  align-items: center;
  width: 100%;
}
.l-insertCode .form-welcome--wrap > div > p {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.5;
  color: var(--content-caption);
  font-size: 13px;
}

.l-insertCode .form-welcome--wrap > div > h2 {
  color: var(--content-main);
  font-size: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.l-insertCode .code-input-container {
  display: flex;
  gap: 8px;
}

.l-insertCode .code-input {
  width: 50px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  border-radius: 8px;
  padding: 10px; 
  box-sizing: border-box;
}

.l-insertCode .error-message {
  color: var(--content-error);
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
  height: 15px;
}

.l-insertCode .welcome-message {
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap:12px;
} 

.l-insertCode .company-name{
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
} 

.l-insertCode .info-desc--wrap {
  width: 100%;
  max-width:520px;
  margin-top: 32px;
}

.l-insertCode .info-card {
  background-color: var(--gray-100);
  border-radius: 24px;
  align-items: flex-end;
  justify-content: center;
  display: flex;
}

.l-insertCode .info-card__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-bottom: 20px;
}

.l-insertCode .c-description {
  gap:10px;
}

.l-insertCode .c-description__item {
  background-color: transparent;
  padding: 0;
  color: var(--content-main)
}

@media only screen and (max-width: 768px) {
 .l-insertCode .info-desc--wrap {
   padding: 0 16px;
 } 
 .l-insertCode .c-description .c-description__item > p {
  font-size: 13px;
 }
}
/* 임직원몰 코드 입력 페이지 */