@charset "UTF-8"; @import url(./nicebluemark-basic.css); /* 구매자 보험 달력 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: 14px; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); width: 30px; aspect-ratio: 1/1; 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: 30px; aspect-ratio: 1 / 1; 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; transform: translateX(0); } 
 }


/* 주민등록번호 */
.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; } 
 }


/* ===== 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-50); border-radius: 4px; margin: 10px 0; background:linear-gradient(60.08834957747024deg, rgb(243, 243, 243) 19.091145833333332%,rgb(243, 243, 243) 19.091145833333332%,rgba(205, 205, 205,1) 68.59765625%,rgb(226, 226, 226) 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: 11px; font-weight: 500; padding: 6px; border-radius: 16px; line-height: 11px; white-space: nowrap; } 

.c-chip.primary { background-color: var(--blue-100); color: var(--blue-500); } 

.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.gray { color:var(--content-sub); background-color: var(--gray-200); } 

.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; z-index: 1; } 

.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: 1; position: relative; } 

.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); } 



.custom-select { line-height: 1.5; background: var(--inverse-background-secondary); border: none; border-radius: 8px; cursor: pointer; position: relative; padding: 8px 6px 8px 10px; } 

.custom-select > .custom-select__selected { display: flex; gap: 4px; align-items: center; } 

.custom-select > .custom-select__selected > img { width: 16px; height: 16px; transform: rotate(-90deg); } 

.custom-select > .custom-select__selected > .selected-value { font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: 0px; text-align: center; color: #fff; } 

.custom-select > .custom-select__list { position: absolute; top: 40px; left:0; width:200%; border-radius: 16px; border : 1px solid rgba(2, 32, 71, 0.05); box-shadow: 0px 10px 40px 0px rgba(2,32,71,0.05) ,0px 20px 50px 0px rgba(0, 23, 51, 0.02), 2px 70px 80px 0px rgba(0, 23, 51, 0.02); background-color: #fff; z-index: 10; display: none; padding: 8px; } 
 .custom-select__list.other { width:10%; border-radius: 16px; border : 1px solid rgba(2, 32, 71, 0.05); box-shadow: 0px 10px 40px 0px rgba(2,32,71,0.05) ,0px 20px 50px 0px rgba(0, 23, 51, 0.02), 2px 70px 80px 0px rgba(0, 23, 51, 0.02); background-color: #fff; z-index: 1; overflow: scroll; height: 300px; padding: 8px; } 

.custom-select__list.other > .custom-select__option { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--content-sub); border-radius: 8px; cursor: pointer; } 


.custom-select.is-open > .custom-select__list { display:block; } 

.custom-select > .custom-select__list > .custom-select__option { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--content-sub); border-radius: 8px; } 

 .custom-select__list > .custom-select__option.sts-active { color: var(--content-main); background-color: var(--gray-50); font-weight: 700 } 

.custom-select > .custom-select__list > .custom-select__option:hover { background-color: var(--gray-50); } 

.custom-select .icon-arrow { transition: transform 0.1s; display: flex; align-items: center; justify-content: center; } 
.custom-select .is-open.icon-arrow { transform: rotate(-180deg); } 

/* ===== 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 reverse infinite; animation: loader-spinner-animation 0.5s linear reverse 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: #919EAB; background-color: var(--gray-150); -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); width: 24px; height: 24px; font-size: 11px; font-weight: 700; line-height: 1; } 

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

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

.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: 2px; height: calc(100% - 8px); left: 12px; top: 32px; background-color: var(--gray-150); } 

.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(--content-main); } 

.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: 16px; font-weight: 600; word-break: break-word; line-height: 1.5; flex: auto; color: var(--gray-800); } 

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

.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); -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: 0s; -webkit-transition : 0s } 

.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: 20px; aspect-ratio: 1/1; font-size: 0; text-indent: -9999px; overflow: hidden; white-space: nowrap; background: url(/images/icon/chevron_left_darkgray.svg) no-repeat
center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 

.accordion.sts-active .btn-accordion-toggle { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0s ease; transition: all 0s ease; } 
.accordion.sts-active .accordion__head:hover .btn-accordion-toggle { background-image: url(/images/icon/icon-chevron-right-blue.svg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: 0s; -webkit-transition : 0s } 

.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: 118px; 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; } 

 .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 { justify-content: space-between; /*5-22*/
position:relative; -ms-overflow-style: none; scrollbar-width: none; overflow-x: auto; user-select:none; border-bottom: 1px solid var(--border-normal, #f1f4f6); } 

#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; align-items: center; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; white-space: nowrap; color: var(--content-sub); font-weight: 600; line-height: 16px; } 



@media only screen and (max-width: 768px){
 #sidebar { top: 96px; } 
 }
 #sidebar { width: 100%; border-right: 0; 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; overflow-x: scroll; border-bottom: 1px solid var(--border-normal, #f1f4f6); } 
 
 #sidebar .sidebar__item { padding: 10px; margin-bottom: 4px; } 
 
 #sidebar .sidebar__item::before { display: none; } 
 
 #sidebar .sidebar__item.sts-active { font-weight: 800; 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; } 

#ui-datepicker-div { z-index: 130 !important; } 

.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: 22px 22px 0; margin-bottom: 8px; } 

.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: 8px; } 

.modal .modal__head strong, .modal2 .modal__head strong,
.modal__trans__head strong { font-weight: 600; font-size: 20px; line-height: 1.5; 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: 8px; } 

.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,
.modal .modal__head+.modal__contents > p { font-size: 15px; line-height: 1.5; 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; min-height: 62px; } 

.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: 29px; 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: 24px; 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) } 

.vertical { /* vertical-align: middle; */
flex-direction: column; } 

#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: 77px; margin: 20px 0; text-align: center; } 

#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(--gray-50); margin-top: 16px; padding: 16px; -webkit-border-radius: 12px; border-radius: 12px; } 

#modal-transfer-mileage .mileage-list dl { display: flex; justify-content: space-between; } 
#modal-transfer-mileage .mileage-list dl + dl { margin-top: 8px; } 
#modal-transfer-mileage .mileage-list dt { color: var(--content-sub); font-weight: 400; } 
#modal-transfer-mileage .mileage-list dd { color: var(--content-body); font-weight: 500; } 
#modal-transfer-mileage .mileage-list dt, #modal-transfer-mileage .mileage-list dd { font-size: 16px; } 

#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 .model-name { padding-bottom: 0px; 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: 4px 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; margin-top: 10px; } 

#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-body); font-size: 16px; } 

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

#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; } 

#modal-imprmn-error-not-sales .modal__contents > div { padding: 12px; background-color: var(--bg-light-gray); border-radius: 10px; margin-top: 12px; } 

#modal-imprmn-error-not-sales .modal__contents > div > h4 { margin-bottom: 4px; } 
#modal-imprmn-error-not-sales .modal__contents > div > p { position: relative; padding-left: 10px; font-size: 13px; } 
#modal-imprmn-error-not-sales .modal__contents > div > p:before { content: ''; position: absolute; left: 0; width: 3px; height: 3px; top: 0.65em; transform: translateY(-50%); background-color: var(--content-caption); border-radius: 50%; } 

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

@media only screen and (max-width: 767px){
 .modal, .modal2 { overflow: hidden; max-width: 438px; width: 100%; -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; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-border-radius: 16px 16px 0 0; border-radius:16px 16px 0 0; } 

 .modal.alert { top: 50%; bottom: auto; max-width: 320px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 16px; border-radius: 16px; -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16); }
 
 .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; } 
 
 /* 2026-08-07 14:49    김단아      모바일 pc 모달 컨테츠 폰트 사이즈 통일
 .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; } 

 #modal-find-address { width: 100%; max-width: 100%; } 
 }

/* ===== 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: 10px; 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: 24px; } 

.c-form-input dt { margin-bottom: 4px; line-height: 1.5; font-size: 14px; color: var(--content-sub); font-weight: 400; } 

.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: 16px; font-size: 14px; } 

.c-form-outline dd { text-align: right; color: var(--content-main); } 

.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: 6px 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 dl.sum { position: relative; margin-top: 16px !important; padding-top: 16px; } 
.c-form-outline dl.sum::before { content: ''; display: block; width: 100%; height: 1px; background-color: var(--border-normal); position: absolute; top: 0; left: 0; } 
.c-form-outline dl.sum dt { font-size: 16px; font-weight: 700; color: var(--content-main); } 
.c-form-outline dl.sum dd { font-size: 18px; font-weight: 700; } 

.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: 24px; } 

.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:16px; padding: 0 16px; } 

.c-description .c-description__item { color: var(--content-sub); display: flex; justify-content: space-between; align-items: center; } 

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

.c-description .c-description__item > p > .icon { margin-right: 8px; background-image:url(/images/icon/c_check_circle.svg); background-position: center center; width: 19px; } 

/* ===== 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: 10px 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-caption); padding: 0 16px; margin-top: 5px; } 

/* c-cols content--info */

.c-cols .c-cols__content .c-cols__content--info { padding: 24px 16px; 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:4px; margin-bottom: 20px; } 

.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: 600; font-size: 16px; line-height: 1.5; } 

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


/* c-cols review */

.c-cols .c-cols__content:has(.review) { margin-top: 11px; } 
.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; font-size: 13px; } 

.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: 2px; img { display: block; width: 14px; } 
 }

.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; } 
 }



/* ===== 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: 16px; height: 16px; 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; background-size: contain; } 
.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_new.svg); } 
#tab-bar .sts-active .ic-tab-bar { background-image: url(/images/bottomnavigation/Active_new.svg); } 
#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; } 
#header ~ #container { padding-top: 83px; } 

/* 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: 26px; color: var(--content-main); line-height: 1.5; } 

.title__sub { margin-top: 4px; 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: 1.5; } 

.sub_title__text { margin-top: 15px; line-height: 1.5; color: var(--content-sub); font-weight: 500; font-size: 16px; } 

.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: 154px; } 

/* 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 , .divider { padding-left: 16px; padding-right: 16px; } 
.title { padding-top: 36px; } 
.contents .title__main { font-size: 26px; line-height: 1.5; } 
.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, .l-form .divider { width: 438px; } 

.l-form .contents { padding-top: 36px; } 

.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 , .l-form .divider { width: 100%; max-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; } 
 }


/* ===== allMenu ===== */


.l-all-menu .contents { padding-top: 16px; } 

.l-all-menu .title__main { font-weight: 700; font-size: 24px; line-height: 1.5; margin-bottom: 32px; } 
.l-all-menu .menu { padding: 0 16px; margin-bottom: 32px; } 

.l-all-menu .menu__title { font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--content-main); margin-bottom: 8px; } 


.l-all-menu .menu__list { display: flex; flex-direction: column; } 

.l-all-menu .menu__item { display: flex; flex-direction: row; background-color: #fff; padding: 16px 10px; width: 100%; gap:18px; border-radius: 10px; } 

.l-all-menu .menu__item:hover { background-color: var(--gray-50); } 

.l-all-menu .menu__item .menu__item--title { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--content-main); } 

.l-all-menu .menu__item .menu__item--img { width: 24px; height: 24px; } 


@media only screen and (max-width: 768px){
 .l-all-menu .contents { padding-left: 0; padding-right: 0; } 
 }



/* ===== 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; } 



/* ===== 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.first { display: none; } */

.l-social .title { padding-top: 92px; text-align: center; } 

.l-social .title__main { font-size: 16px; font-weight:900; } 

/* .l-social .divider { display: flex; align-items: center; max-width: 328px; height: fit-content; margin: 0 auto; position: relative; padding-top: 32px; } 

.l-social .divider .c-divider { border: 1px solid #E6E8EA; width: 110px; } 

.l-social .title__sub { color: #8B95A1; margin: 0 auto; } 

.l-social .title__sub .title__sub-text { color: #8B95A1; font-size: 14px; margin: 0 auto; } */
.l-login .divider { display: flex; align-items: center; max-width: 620px; height: fit-content; margin: 0 auto; position: relative; padding-top: 32px; } 

.l-login .divider .c-divider { border: 1px solid #E6E8EA; width: 185px; } 

.l-login .title__sub { color: #8B95A1; margin: 0 auto; } 

.l-login .title__sub .title__sub-text { color: #8B95A1; font-size: 14px; margin: 0 auto; flex-grow: 0 } 

/**************************/
.l-login .login-social__wrap { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 40px; gap: 30%; } 

.l-login .login-social__wrap .circle { width: 48px; height: 48px; align-items: center; justify-content: center; display: flex; border-radius: 50%; } 

.l-login .login-social__wrap .circle.kakao.on { background-color: #FEE500; } 

.l-login .login-social__wrap .circle.naver.on { background-color: #03A94D; } 

.l-login .login-social__wrap .icon { width: 18px; height: 18px; padding: 10px; background-repeat: no-repeat; overflow: hidden; object-fit: cover; } 

.l-login .kakao > i { background-image: url('/images/icon/icon-social-kakao.svg'); } 
.l-login .naver > i { background-image: url('/images/icon/icon-social-naver.svg'); } 


/* .l-social .c-btn { display: inline-flex; width: 100%; height: 48px; justify-content: center; align-items: center; border-radius: 10px; gap: 8px; } 

.l-social .c-btn.kakao { background-color: #FEE500; color: #333D4B; } 

.l-social .c-btn.naver { background-color: #03A94D; color: #FFFFFF; } 

.l-social .c-btn.email { color: #333D4B; background-color: white; border:solid 1px #D1D6DB; } 

.l-social .c-btn > i { display: block; width: 18px; height: 18px; overflow: hidden; object-position: center; object-fit: cover; } */
.l-login .c-btn { display: flex; width: 100%; height: 48px; justify-content: center; align-items: center; border-radius: 10px; gap: 8px; } 

.l-login .c-btn.kakao { background-color: #FEE500; color: #333D4B; } 

.l-login .c-btn.naver { background-color: #03A94D; color: #FFFFFF; } 

.l-login .c-btn.email { color: #333D4B; background-color: white; border:solid 1px #D1D6DB; } 

.l-login .c-btn > i { display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; } 

.kakao > i { background: url('/images/icon/icon-social-kakao.svg') no-repeat center / contain; } 

.naver > i { background: url('/images/icon/icon-social-naver.svg') no-repeat center / contain; } 

.email > i { background: url('/images/icon/icon-social-email.svg') no-repeat center / contain; } 

.l-login .c-btn > span { display: inline-block; height: 24px; font-size: 16px; font-weight: 700; line-height: 24px; vertical-align: middle; } 

.l-login .c-btn+.c-btn { margin-top: 0.75rem; } 

/* .l-social .c-btn > span { display: inline-block; height: 24px; font-size: 16px; font-weight: 700; line-height: 24px; vertical-align: middle; } 

.l-social .c-btn+.c-btn { margin-top: 0.75rem; } */

/* 로그인 */
/* .l-login .arrow__btn--wrap .arrow__btn--inner { padding-top: 0px; } */

.l-login .title { padding-top: 64px; text-align: center; } 

.l-login .title__main { font-size: 35px; } 

.l-login .login { padding-top: 32px; } 

.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; */
padding: 12px 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; max-width: 740px; } 
.l-sample .arrow__btn--wrap { padding: 0px; background-color: var(--white); } 
.l-sample .arrow__btn--inner { width: 740px; } 
.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 .support__tab { display: flex; gap: 0.625rem; padding: 0 0; width: 100%; overflow: hidden; margin-top: 24px; margin-bottom: 8px; } 

.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; } 

.l-support .list-middot dd>span { padding-left: 24px; line-height: 1.5; } 

.l-support .list-middot dd>span:before { left: 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; position: relative; } 


.l-faq .support__tab .blur__right { position: absolute; right: 0; top: 0; width: 20px; height: 100%; z-index: 10; pointer-events: none; background: linear-gradient(
 to left,
 rgba(255, 255, 255, 0.95) 0%,
 rgba(255, 255, 255, 0.7) 25%,
 rgba(255, 255, 255, 0.4) 50%,
 rgba(255, 255, 255, 0.15) 75%,
 rgba(255, 255, 255, 0) 100%
 ); } 

.l-faq .support__tab__underline { position: absolute; bottom: 0; height: 3px; background-color: var(--content-main); 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(--content-main); 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 .title__main { padding: 0 16px; } 


.l-contact .contact__form { display: flex; gap: 1.5rem; flex-direction: column; padding: 0 16px; } 

.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 .title__main { padding: 0; } 
.l-contact .contact__form-row { flex-direction: column; } 
.l-contact .contact__form { padding: 0; } 
 }

/* ===== 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(--content-main); -webkit-box-shadow: inset 0 -0.1875rem 0 0 var(--content-main); box-shadow: inset 0 -0.1875rem 0 0 var(--content-main); } 

.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; } 
 }





/* ===== 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 > a > 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.user .quick__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; padding: 20px 16px; margin-bottom: 16px; } 

.l-mypage.user .quick__item a { 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 { background-color: var(--gray-200); } 

.l-mypage.user .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 { font-weight: 500; font-size: 13px; line-height: 16px; color: var(--content-sub); } 

.l-mypage.user .quick__value { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--content-main); } 

.l-mypage.user .quick__value em { font-weight: 600; color: var(--content-main); } 


/* 내차정보 */

.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 16px 0; } 

.car-archieve__head > div { display: flex; align-items: center; } 

.car-archieve__head > div > em { color: var(--content-caption); font-size: 14px; line-height: 1.5 } 

.car-archieve__head .car-delete { color: var(--content-sub); font-size: 14px; line-height: 1.5; font-weight: 500; cursor: pointer; display: none; } 

.l-mypage .car-archieve__head h3 { margin-bottom: 0; } 

.l-mypage.car-archive .c-toggle { width: 100%; height: 100%; display: flex; justify-content: center; padding: 4px 16px; } 

.l-mypage.car-archive .c-toggle__list { display: flex; justify-content: space-between; border-radius: 10px; background-color: var(--gray-100); position: relative; align-items: center; z-index: 2; width: 100%; margin-bottom: 10px; } 

.l-mypage.car-archive .c-toggle__indicator { position: absolute; border-radius:8px; left: 0; background-color: #fff; z-index: -1; transition: transform 0.3s ease, width 0.3s ease; } 

.l-mypage.car-archive .c-toggle__item { display:flex; align-items:center; padding: 0px 20px; font-size: 15px; font-weight: 600; line-height: 18px; letter-spacing: -0.08px; color: var(--content-sub); width: 100%; justify-content: center; } 

.l-mypage.car-archive .c-toggle__item.is-active { font-weight: 700; font-size: 15px; line-height: 18px; letter-spacing: -0.08px; color: var(--content-main); } 




.l-mypage .car-count { font-size: 14px; line-height: 1.5; color: var(--content-caption) } 

.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: 0.4rem; align-items: center; margin-bottom: 10px; border-radius: 10px; justify-content: space-between; padding: 0 16px; } 


.l-mypage #newCar .car__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 16px; } 

.l-mypage #newCar .car__item { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 10px; border-radius: 10px; justify-content: flex-start; padding: 0; flex-direction: column; } 

.l-mypage #newCar .car__item:hover { background-color: transparent; } 

.l-mypage #newCar .car__item .card__info--wrap { display: flex; justify-content: space-between; width: 100%; align-items: flex-start; flex-direction: column; padding: 4px 0 10px 0; } 

.l-mypage #newCar .car__item .check-img--wrap { padding: 20px; display: flex; flex-direction: column; background-color: var(--gray-50); width: 100%; border-radius: 16px; } 

.l-mypage #newCar .car__img { display: block; height: 72px; width: 100%; position: relative; } 

.l-mypage #newCar .car__no { color: var(--content-sub); line-height: 1.5; font-size: 12px; font-weight: 400; } 

.l-mypage .car__item:hover { background-color: var(--gray-50); } 

.l-mypage .car__img { display: block; height: 52px; width: 105px; position: relative; } 

.l-mypage .car__img > .c-check { position: absolute; right: -10px; top: -10px; } 

.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: 13px; } 


.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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 112px; } 

.l-mypage .car__detail { position: relative; display: flex; font-size: 14px; color: var(--primary-blue); width: 100%; padding: 20px 16px 20px 0; border-radius: 10px; align-items: center; cursor: pointer; } 

.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.car-archive .arrow__btn--inner.size-m { padding:0 16px; } 

.l-mypage.car-archive .c-chip.select { display: flex; gap:4px; position: relative; align-items: center; overflow: scroll; user-select: none; z-index: 1; width: 100%; padding: 0 16px 6px; } 

.l-mypage.car-archive .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; } 

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

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

.l-mypage.car-archive .buy-info { display: flex; flex-direction: column-reverse; } 

.l-mypage.car-archive .bottom-sheet { max-width: 620px; } 


/* 리포트 보관함 */
.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 0; } 

.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.car-archive .c-toggle { padding: 4px 16px; } 
 
 .l-mypage .car__item { padding-right: 0px; } 
 
 .l-mypage.car-archive .c-chip.select { padding: 0px 16px 6px; } 
 .l-mypage.car-archive .arrow__btn--inner.size-m { padding: 0; } 
 .l-mypage #newCar .car__list { display: grid; grid-template-columns: repeat(2, 1fr); } 
 }

.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-mypage .myinfo-detail-line.social { width: 100%; justify-content: space-between; align-items: center; } 

.l-mypage .circle { width: 48px; height: 48px; align-items: center; justify-content: center; display: flex; border-radius: 50%; } 

.l-mypage .circle.kakao.on { background-color: #FEE500; } 

.l-mypage .circle.naver.on { background-color: #03A94D; } 

.l-mypage .circle.off { background-color: var(--gray-700); } 

.l-mypage .c-switch { color: var(--primary-blue); font-weight: 500; font-size: 14px; line-height: 22px; } 

.l-mypage .icon { width: 18px; height: 18px; padding: 10px; background-repeat: no-repeat; overflow: hidden; object-fit: cover; } 

.l-mypage .kakao > i { background-image: url('/images/icon/icon-social-kakao.svg'); } 
.l-mypage .naver > i { background-image: url('/images/icon/icon-social-naver.svg'); } 

/* .l-mypage .kakao.on > i { background-image: url('/images/icon/icon-social-kakao.svg'); } 
.l-mypage .naver.on > i { background-image: url('/images/icon/icon-social-naver.svg'); } 
.l-mypage .kakao.off > i { background-image: url('/images/icon/icon-social-kakao.svg'); } 
.l-mypage .naver.off > i { background-image: url('/images/icon/icon-social-naver.svg'); } */


/* ===== 온라인대리등록 ===== */
.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 { padding: 16px 18px; -webkit-border-radius: 12px; border-radius: 12px; margin-top: 14px; } 

.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 .title .help .help__sub { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--content-caption); margin-top: 8px; } 
.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; } 

/* [20260629] 부제목 컬러 content-sub 통일 */
.l-transfer .title__text { margin-top: 16px; line-height: 22px; color: var(--content-sub); } 

.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>span { display: block; margin-bottom: 8px; font-size: 14px; color: var(--content-sub); line-height: 1.5; } 

.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 .title .help-sign .tip-hpnum .icon + span { font-size: 16px; line-height: 1.5; } 

.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-insuranceAccidentDetail .contents .list,
.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; margin: 0 16px 100px; } 

.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-transfer.before .contents .list dl:not(:last-child) { margin-bottom: 26px; } 

.l-transfer.before .contents .list dt, .l-transfer.before .contents .list dd
 {
color: var(--content-sub); } 

.l-transfer.before .contents .list dt { font-weight: 600; margin-bottom: 8px; color: var(--content-body); } 

.l-transfer.before .contents .list-middot dd>span { padding-left: 24px; line-height: 1.5; } 

.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; /* [20260624] padding 20px 통일 */
padding: 20px; font-size: 14px; -webkit-border-radius: 12px; border-radius: 12px; color: var(--content-sub); } 
/* [20260624] 타이틀 font-weight 600 추가 */
.l-transfer.l-form .c-form-input .mileage-check>p { margin-bottom: 8px; font-weight: 600; } 

.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-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: 0; border-radius: 0; font-size: 14px; margin: 0 0 100px; } 

.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); } 
/* [20260624] padding 20px 통일 */
.l-transfer.l-form .c-form-input .mileage-check { margin-top: 24px; padding: 20px; 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 { 
 0% { transform: rotate(0deg) scaleX(-1); } 
 100% { transform: rotate(-360deg) scaleX(-1); } 
 }

@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; */
 width: 24px; height: 24px; justify-content: center; border-radius: 6px; } 

/* .el-btn-back:hover { background-color: var(--gray-100); } */

.arrow__btn--wrap { position: sticky; top: 0; width: 100%; height: 50px; 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; } 
#header ~ #container .arrow__btn--wrap { top: 76px; } 
.arrow__btn--inner { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; /*ㅇ*/ } 

.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; margin: 0 auto; } 

@media only screen and (max-width: 767px){
 .arrow__btn--wrap { top: 0; } 
 #header ~ #container .arrow__btn--wrap { top: 56px; } 
 .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/chevron_left_darkgray.svg); background-size: contain; } 

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

.c-form-outline-epay.type1 .caption { margin-bottom: 0; padding: 10px 0; line-height: 1.5; font-size: 16px; } 
.c-form-outline-epay.type1 .caption + span { font-size: 13px; font-weight: 400; color: var(--content-caption); } 
.c-form-outline-epay.type1 dl { margin: 4px 0; gap: 8px; display: inline-flex; width: 100%; } 
.c-form-outline-epay.type1 dl dt { width: 92px; } 
.c-form-outline-epay.type1 dl dd { width: 100%; font-weight: 500; color: var(--content-body); } 
.c-form-outline-epay dl { display: flex; justify-content: space-between; line-height: 1.5; font-size: 14px; } 
.c-form-outline-epay dl.finalPay { flex: 1 1; padding: 20px 0 10px; min-height: 44px; position: relative; } 
.c-form-outline-epay dl.finalPay::before { content: ''; display: block; width: calc(100% - 32px); height: 1px; background-color: #EAEDF0; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); } 
.c-form-outline-epay dl.finalPay dt { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--content-main); } 
.c-form-outline-epay dl.finalPay dd { font-weight: 700; line-height: 24px; } 
.c-form-outline-epay dl.finalPay dt dd { text-align: left; } 
@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; line-height: 1.5; color: var(--content-sub); } 

.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; } 



.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; width:14px; aspect-ratio: 1/1; 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:8px; border-radius: 20px; background-color: white; width: 100%; } 

.el-contract-grey { padding: 1px 0px; background-color: rgb(231, 230, 230); border: 1px solid var(--content-main); margin-bottom: 5px; } 

.contract-table table { table-layout: fixed; border: 1px solid var(--content-main); border-collapse: collapse; } 

.contract-table table + table{margin-top: 5px;}

.contract-table table td { padding: 0px 3px; border: 1px solid var(--content-main); } 

.contract-table table th { padding: 4px 3px; font-weight: bold; border: 1px solid var(--content-main); text-align: justify; text-align-last: justify; line-height: 1.1;color: var(--content-main); }
.contract-table table .txt-center{text-align: center; text-align-last: center;}
.contract-table table .txt-left{text-align: left; text-align-last: left;}
/* .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); } 

/* 환불계좌 안내 페이지만 dt 마진이 많아서 수정
.l-form.l-transfer .contents .es-list dt { font-weight: 600; margin-bottom: 24px; } 
*/
.l-form.l-transfer .contents .es-list dt { font-weight: 600; margin-bottom: 8px; } 

.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; } 

.l-form.l-transfer .contents .list-middot dd>span:before { content: ''; width: 3px; height: 3px; top: 9px; left: 8px; background: var(--Color-System-Content-contentCaption, #919eab); border-radius: 50%; } 

.l-form.l-transfer .contents .list-middot dd>span:last-child::before { top: 9px; } 

.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: 12
px; } 
 }

/*은행선택*/
.c-bank input[readonly] { cursor: pointer; pointer-events: all; padding-right: 3rem; background: #fff; } 
.c-bank input:disabled { background: var(--inverse-gray-900); } 
.c-bank input::placeholder { color: var(--content-sub); } 

.c-bank input+i { position: absolute; right: 1rem; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); width: 30px; aspect-ratio: 1/1; background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cscript xmlns=''/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.86001 17C9.64077 17 9.42153 16.9166 9.24995 16.7591C9.08987 16.6028 9 16.3912 9 16.1707C9 15.9502 9.08987 15.7386 9.24995 15.5823L12.9389 11.9964L9.24995 8.41974C9.08987 8.26345 9 8.05189 9 7.83135C9 7.61081 9.08987 7.39925 9.24995 7.24296C9.41072 7.08736 9.62837 7 9.85524 7C10.0821 7 10.2998 7.08736 10.4605 7.24296L14.7501 11.4126C14.9101 11.5689 15 11.7805 15 12.001C15 12.2216 14.9101 12.4331 14.7501 12.5894L10.4605 16.7591C10.2985 16.9166 10.0793 17 9.86001 17Z' fill='%236B7684'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E"); background-size: contain; pointer-events: none; } 
.c-bank input:disabled + i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cscript xmlns=''/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.86001 17C9.64077 17 9.42153 16.9166 9.24995 16.7591C9.08987 16.6028 9 16.3912 9 16.1707C9 15.9502 9.08987 15.7386 9.24995 15.5823L12.9389 11.9964L9.24995 8.41974C9.08987 8.26345 9 8.05189 9 7.83135C9 7.61081 9.08987 7.39925 9.24995 7.24296C9.41072 7.08736 9.62837 7 9.85524 7C10.0821 7 10.2998 7.08736 10.4605 7.24296L14.7501 11.4126C14.9101 11.5689 15 11.7805 15 12.001C15 12.2216 14.9101 12.4331 14.7501 12.5894L10.4605 16.7591C10.2985 16.9166 10.0793 17 9.86001 17Z' fill='%23B0B8C1'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E"); } 

#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: var(--content-main); -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: var(--content-main); 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: 15px; min-height: 46px; } 

.transfer-receipt>.contents>.logo-table-box>h1 { font-size: 26px; font-weight: 700; line-height: 31.03px; color: var(--content-main); } 

.part-name { width: 160px; border-right: 0; height: 36px; background-color: var(--gray-100); padding: 10px 14px; color: var(--content-sub); border-color: var(--border-outline); font-size: 14px; font-weight: 400; } 

.transfer-receipt .table-box table tr td { height: 44px; padding: 10px 14px; border-color: var(--border-outline); font-size: 14px; color: var(--content-main); } 

.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: 15px; 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); line-height: 22px; } 

.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; } 

.list-middot .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: calc(100svh - 70px); 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-select-bank .close-head__wrap { padding: 24px 16px 8px 16px; } 
#bottom-sheet-select-bank .close-head__wrap .btn-close img { width: 24px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } 
#bottom-sheet-select-bank div>.tab { padding: 0; margin-top: 8px; } 
#bottom-sheet-select-bank .tab__head__item { padding: 0; } 

.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; } 

.bottom-sheet-select-bank .tab .tab__head__item a { display: block; height: 40px; padding: 11px 12px; color: var(--content-sub); font-weight: inherit; } 

.bottom-sheet-select-bank .tab .tab__head__item--active a { color: var(--content-main); font-weight: 600; } 

.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; } 
.l-form.l-transfer>.arrow__btn--wrap .btn-end { margin-left: auto; } 
.l-form.l-transfer>.arrow__btn--wrap .btn-end::before { content: ''; display: inline-block; width: 24px; height: 24px; background: no-repeat url(/images/icon/x_close_icon.svg); background-size: contain; } 
@media only screen and (max-width: 768px){
 .l-form.l-transfer>.arrow__btn--wrap { left: 0; /* max-width: 100%; */
max-width: 438px; margin: 0 auto; } 
 }

.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.intro .info-card { background-color: var(--gray-100); border-radius: 24px; align-items: flex-end; justify-content: center; display: flex; } 


.l-estimate.intro .info-card__image { display: flex; flex-direction: column; align-items: center; gap: 0px; width: 100%; } 


.l-estimate.intro .mySwiper { width: 60%; } 
 
.l-estimate.intro .swiper-slide img { display: flex; width: 100%; align-items: center; justify-content: center; } 

.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: 20px 0; 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 .chip-date--wrap { display: flex; flex-direction: row-reverse; align-items: center; gap: 7px; } 

.l-estimate.recent .contents .card__body>.date > .chip-date--wrap >span { font-size: 12px; font-weight: 600; color: var(--content-main); } 

.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; border-radius: 0; } 

.l-estimate.intro .middot-container { padding: 0; } 

.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; } 
 
 .l-estimate.intro .info-desc--wrap { padding: 0 16px; } 
 }

.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); } 




/* 20260630 안심거래 가이드 페이지 */
.l-guide-escrow#container { padding-top: 16px; } 
/* .l-guide-escrow .arrow-title { padding-top: 0; } */
.l-guide-escrow .title__main { margin-top: 8px; line-height: 1.5; } 
.guide_img { display: block; margin: 38px auto 55px; text-align: center; } 
.guide-note { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--content-sub); padding-left: 30px; padding-right: 16px; margin-left: -7px; margin-top: 14px; } 
.guide-note sup::after { color: var(--content-sub); left: -9px; } 
.guide-note mark { background-color: transparent; color: var(--primary-blue); border-bottom: 1px solid var(--primary-blue); } 
.l-guide-escrow .c-cols { padding: 40px 0; } 
.l-guide-escrow .c-cols + .c-cols { padding-top: 0; padding-bottom: 40px; } 
.c-cols .c-cols__content .c-cols__content--info { margin-top: 0; } 
.l-guide-escrow .c-cols:has(.accordion__container) { gap: 0; } 
.l-guide-escrow .list-middot { font-size: 14px; } 
.l-guide-escrow .list-middot dd { font-weight: 500; line-height: 1.5; } 
.l-guide-escrow .list dd>span { line-height: 1.5; } 
.l-guide-escrow .button--wrap { padding: 0 18px; } 
.l-guide-escrow .button--wrap .c-btn.size-l { font-size: 16px; line-height: 18px; border-radius: 10px; margin-bottom: 21px; } 
.l-guide-escrow .btn-area { padding-top: 6px; } 
.l-guide-escrow .c-check label { gap: 12px; } 
.l-guide-escrow .c-check p { font-size: 14px; line-height: 16px; color: var(--content-sub); font-weight: 400; } 
.l-guide-escrow .c-check p a { font-weight: 700; } 


/* 20260701 안심거래 차량번호 입력 */
.l-transfer#container { padding-top:0; } 
.l-transfer form { padding: 0 16px; max-width: 438px; margin: 0 auto; } 
.l-transfer .l-form .contents { padding-top: 36px; } 
.l-transfer .sub_title__text { margin-top: 4px; } 
.l-transfer ~ .dim .modal.modal-outline-car .c-btn.secondary { color: var(--content-body) } 
.l-transfer ~ .dim .modal .modal__contents { padding-bottom: 0; } 
.l-transfer .arrow__btn--wrap ~ section { padding-left: 16px; padding-right: 16px; } 

.modal-outline-car .modal__contents--top h2 { font-size: 20px; line-height: 1.5; margin-bottom: 4px; color: #212B36; } 
.modal-outline-car .modal__contents--top h2 span { border-bottom: 2px solid var(--content-main); } 
.modal-outline-car .modal__contents--top h2 + .sub { line-height: 1.5; font-size: 14px; color: var(--content-caption); font-weight: 400; } 

.outline-car-summary { margin-bottom: 12px; } 
.outline-car-summary__brand { color: var(--content-sub, #637381); font-size: 14px; font-weight: 400; line-height: 150%; } 
.outline-car-summary__model { color: var(--content-main, #212B36); font-size: 16px; font-weight: 600; line-height: 150%; } 
.outline-car-summary__spec { color: var(--content-sub, #637381); font-size: 14px; font-weight: 400; line-height: 150%; } 

#modal-outline-car .modal__contents .c-form-outline { border-radius: 12px; background: var(--inverse-gray-900); padding: 12px 16px; } 

@media only screen and (max-width: 767px){
 .l-transfer#container form { padding: 0; } 
.l-transfer#container .arrow__btn--wrap ~ section { max-width: 438px; } 
 }



 /* 20260701 주행거리 입력 페이지 */
/* 20260702 안심거래 매매대금 입력 */
.l-escrow-flow#container { padding-bottom: 0; } 
.l-escrow-flow.l-transfer .contents,.mh-100 { display: flex; flex-direction: column; min-height: calc(100svh - 174px - 40px); } 
.l-escrow-flow.l-transfer .c-form-input { margin-bottom: 0; } 
.l-escrow-flow.l-transfer .escrow-info-box { margin-top: auto; margin-bottom: 14px; padding: 16px; border-radius: 10px; background: var(--bg-light-gray); } 
.l-escrow-flow.l-transfer .escrow-info-box dl { margin: 0; } 
.l-escrow-flow.l-transfer .escrow-info-box dt:first-child { margin-bottom: 8px; color: var(--content-body); font-size: 14px; font-weight: 600; line-height: 1.5; } 
.l-escrow-flow.l-transfer .escrow-info-box .span__wrap { gap: 4px; margin: 0; padding: 0; background: transparent; border-radius: 0; } 
.l-escrow-flow.l-transfer .escrow-info-box .span_dot { display: block; padding-left: 12px; color: var(--content-sub); font-size: 14px; font-weight: 500; line-height: 1.5; } 
.l-escrow-flow.l-transfer .escrow-info-box .span_dot::before { left: 0; top: 0; margin-right: 0; color: var(--content-sub); font-size: 12px; line-height: 18px; } 
.l-escrow-flow.l-transfer .desc-warning { margin-bottom: 24px; } 

.l-trans-car-mileage.l-transfer .c-form-input { margin-bottom: 0; display: flex; flex: 1; flex-direction: column; } 
.l-trans-car-mileage#container { padding-bottom: 0; } 
.l-trans-car-mileage.l-transfer .contents { display: flex; flex-direction: column; min-height: calc(100vh - 174px); } 
.l-trans-car-mileage.l-transfer .last-mileage { margin-top: auto; } 
.l-trans-car-mileage.l-transfer .last-mileage__title { margin-bottom: 12px; font-size: 14px; line-height: 18px; color: var(--content-sub); } 



@media only screen and (max-width: 767px){
 .l-trans-car-mileage.l-transfer .contents,
.l-escrow-flow.l-transfer .contents { padding-bottom: 98px; } 
 }


/* 20260702 최종 정보 확인 */

.l-final-check.l-transfer .title__main { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 34px; color: var(--content-main); } 
.l-final-check.l-transfer .title__sub { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--content-sub); } 

.l-final-check .contents > .help-box,
.l-final-check .contents > .c-form-outline { display: none; } 
.final-check-car { padding: 28px 16px 34px; background: var(--bg-white); } 
.final-check-car__image { display: flex; justify-content: center; align-items: center; min-height: 118px; margin-bottom: 22px; } 
.final-check-car__image img { display: block; width: 190px; max-width: 72%; height: auto; } 
.final-check-car__brand { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--content-sub); } 
.final-check-car__model { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--content-main); } 
.final-check-car__spec { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--content-sub); } 
.final-check-car__spec span:not(:first-child)::before { content: "·"; margin-right: 6px; } 
.final-check-car__meta { margin-top: 17px; } 
.final-check-car__meta dl,
.final-check-list dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); font-size: 14px; line-height: 1.5; } 
.final-check-car__meta dl + dl,.final-check-list dl + dl { padding: 4px 0; } 
.final-check-car__meta dt,
.final-check-list dt { color: var(--content-sub); font-weight: 500; } 
.final-check-car__meta dd,
.final-check-list dd { color: var(--content-body); font-weight: 500; text-align: left; word-break: break-all; } 
.final-check-car__status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } 
.final-check-car__status dl { margin: 0; padding: 10px 6px; text-align: center; border-radius: 12px; background: var(--bg-light-gray); } 
.final-check-car__status dt { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--content-sub); } 
.final-check-car__status dd { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--content-body); } 
.final-check-section { padding: 32px 16px 20px; background: var(--bg-white); } 
.final-check-section.divider-top { padding-top: 25px; } 
.final-check-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } 
.final-check-section__head h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--content-main); } 
.final-check-section__edit { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--primary-blue); } 
.final-check-amount { padding: 16px; border-radius: 12px; background: var(--bg-light-gray); } 
.final-check-amount span { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--content-sub); } 
.final-check-amount strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--content-body); } 
.final-check-section__sub-title { margin: 16px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--content-main); } 
.final-check-party h4 { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--content-main); padding: 10px 0; } 
.final-check-text-muted { color: var(--content-caption) !important; } 
.l-final-check.l-form .btn-box { padding: 44px 16px 16px; } 
.l-final-check.l-form .btn-box .c-btn { width: 100%; border-radius: 8px; font-size: 16px; font-weight: 700; } 
.l-transfer .btn-box .c-check { margin-bottom: 10px; padding-top: 20px; } 
.l-transfer .btn-box .c-check label { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--content-body); } 
.l-transfer .btn-box .c-check label span { border-bottom: 1px solid var(--content-body); display: block; } 

.ic-successCheck { text-align: center; display: block; margin-bottom: 38px; } 
.ic-successCheck + p.fc-red { margin-top: 0; } 
.c-form-sign .timeline { padding-bottom: 10px; margin-bottom: 40px; } 

.escrow-complete-faq + .escrow-complete-faq { margin-top: 36px; } 
.escrow-complete-faq h2 { font-weight: 600; font-size: 16px; line-height: 24px; } 
.escrow-complete-faq__text { padding: 12px 16px; background-color: var(--bg-light-gray); border-radius: 10px; margin-top: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--content-sub); } 


.c-form-sign .timeline__vertical .sts-active .badge { color: var(--Color-System-Content-contentCaption, #FFFFFF); } 
.c-form-sign .timeline__vertical .sts-active p { color: var(--primary-blue); } 
.c-form-sign .timeline__vertical .badge,
.c-form-sign .timeline__vertical p span { color: var(--Color-System-Content-contentCaption, #919EAB); } 
.c-form-sign .timeline__vertical p { font-weight: 600; font-size:14px; color: var(--content-sub); } 
.c-form-sign .timeline__vertical p span { font-weight: 400; } 
.icon_kakao { display: block; width: 40px; aspect-ratio: 1/1; background: url(/images/icon/icon_kakao_icon.svg); } 
.icon_kakao + .title__main { margin-top: 8px; } 
.screen_out_txt { font-weight: 400; font-size: 14px; line-height: 18px; text-align: center; margin-top: 85px; color: var(--content-caption); } 
.c-btn.btn-text { padding: 12px 18px; font-size: 16px; color: #637381; line-height: 18px; } 
.success-imgBox { margin: 131px auto; text-align: center; } 

.success-imgBox.lock_3d { margin-top: 91px; } 

.l-transfer .c-form .timer em { color: var(--content-body); margin-top: 10px } 
.l-transfer .c-form + .injn_btn { margin-top: -12px; margin-bottom: 12px; margin-left: auto; margin-right: auto; display: flex; font-size: 14px; font-weight: 500; line-height: 20px; padding: 8px 14px; } 
.niceBlumark_logo { max-width: 438px; height: 44px; display: flex; align-items: center; align-content: center; margin: 0 auto; } 
@media only screen and (max-width: 767px){
 .niceBlumark_logo { padding: 0 16px; } 
 }

.l-transfer.l-form .c-form-select .c-radio.radio-btn { display: flex; gap: 8px; padding: 0 0 4px; } 
.l-transfer.l-form .c-form-select .c-radio.radio-btn .radio-btn-box { width: 100%; height: 48px; } 
.l-transfer.l-form .c-form-select .c-radio.radio-btn input:checked + label { color: var(--blue-500); font-weight: 600; border-color: var(--blue-500); border-width: 2px; background-color: var(--blue-50); transition: all 0s; -webkit-transition: all 0s; } 
.l-transfer.l-form .c-form-select .c-radio.radio-btn label { display: inline-flex; align-items: center; justify-content: center; align-content: center; text-align: center; width: 100%; height: 100%; border: 1px solid var(--border-input); border-radius: 10px; font-size: 16px; transition: all 0.3s; -webkit-transition: all 0.3s; gap: 0; } 

.chkElTransInfo .final-check-section { margin: 0 -16px; } 
.l-transfer.last .contents > .c-form-input { padding: 0 16px; margin-bottom: 24px; } 
.l-transfer.last .contents .c-form-input dl { margin-bottom: 0; } 
.l-transfer.last .contents .c-form-input dl + dl { margin-top: 24px; } 
.l-transfer.last .final-check-section .c-form.c-form-input { margin-bottom: 4px; } 
.l-transfer.last .contents .c-form-input dd .title__sub { font-weight: 500; font-size: 14px; line-height: 150%; color: var(--gray-500); margin-top: 4px; } 

.speciContract-box { position: relative; }
.c-input.speciContract-box textarea#speciContract{ margin-top: -8px;}
.c-input.speciContract-box textarea { height: 353px; background-color: var(--gray-50); padding-bottom: 36px; transition: 0s; -webkit-transition: 0s;  }
.c-input textarea:hover,
.c-input textarea:focus,
.c-input textarea:focus-visible { box-shadow: none; -webkit-box-shadow: none; outline:2px solid var(--primary-blue); transition: 0s; -webkit-transition: 0s; }
.count-text { position: absolute; bottom: 16px; right: 16px; font-size: 14px; color: var(--content-caption); text-align: right; } 
.l-transfer.before.fin .es-list { background-color: var(--inverse-gray-900); padding: 16px; border-radius: 10px; overflow: hidden; margin-top: 20px; } 
.l-transfer.before.fin .es-list dt { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--content-sub); margin-bottom: 8px; } 
.l-transfer.before.fin .es-list dd { color: var(--content-sub); font-size: 14px; line-height: 1.5; } 
.ic-successCheck + .fc-red { margin-top: 110px; font-size: 14px; font-weight: 400; line-height: 1.5; } 
.arrow-title span + .title__main { margin-top: 8px; } 

.alimtalk .niceBlumark_logo ~ .title { padding-top: 36px; } 

/* [20260708] 수정 위치 : 카카오톡 서명 안내 박스(inverse background) 신규 스타일 */
.l-transfer .arrow-title .help { margin-top: 16px; 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; } 
.alimtalk .transcarFeelInfo .contents { width: 100%; padding:12px 0 0 0; } 
.alimtalk .transcarFeelInfo form { padding: 0; } 
.alimtalk .transcarFeelInfo .help-box .help { font-size: 14px; line-height: 16px; margin-bottom: 0; } 
.alimtalk .transcarFeelInfo .help-box .help + .help-account-check { margin-top: 16px; } 
.alimtalk .transcarFeelInfo .help-box .help-account-check + p { margin-top: 16px; } 
.alimtalk .transcarFeelInfo .c-form-outline.type1 dl { margin: 8px 0; } 
/* 20260724 김단아 수수료 안내 스타일 추가 */
.alimtalk .transcarFeelInfo .help-box .help + .help-account-check  .account {font-size: 16px;font-weight: 500;}
@media only screen and (max-width: 767px){
 .alimtalk .transcarFeelInfo#container form { padding: 0 16px; } 
 }

.alimtalk .transcarFeelInfo .c-form-outline.type1 dl.border-top { position: relative; margin-top: 16px; padding-top: 16px; } 
 .c-form-outline dl.border-top::before { content: ''; display: block; width: 100%; height: 1px; background-color: var(--border-normal); position: absolute; top: 0; left: 0; } 

/*260709 명의 이전 가이드 페이지 */
.transCarIntro .guide_img { max-width: 240px; } 
.transCarIntro .guide_img img { width: auto; max-width: 100%; height: auto; max-height: 100%; } 
.transCarIntro .c-cols { padding-top: 34px; padding-bottom: 0; } 
.transCarIntro .c-cols + .c-cols { padding-top: 24px; } 
.transCarIntro .c-cols .c-cols__content .c-cols__content--info { margin-top: 32px; } 
.transCarIntro .c-cols .c-cols__content .c-cols__content--info > dl { margin-bottom: 32px; } 
.transCarIntro .c-cols .c-cols__content .c-cols__content--info > dl:last-child { margin-bottom: 0; } 
.transCarIntro .c-cols.c-cols1 { padding-bottom: 12px; } 
.transCarIntro .c-cols.c-cols1 .c-cols__title--highlight { margin-bottom: 14px; } 
.transCarIntro .c-cols.c-cols1 .c-cols__title { padding-bottom: 0; padding-top: 12px; } 
.transCarIntro .c-cols.c-cols1 h4 { font-size: 20px; line-height: 30px; font-weight: 700; } 
.transCarIntro .c-cols.c-cols1 .c-cols__content .c-cols__content--caption { display: block; } 
.transCarIntro.l-transfer.before .contents .c-cols.c-cols2 .c-cols__content { margin-top: 12px; } 
.transCarIntro.l-transfer.before .contents .c-cols.c-cols2 .timeline__vertical.timeline-transfer { margin-top: 0; } 
.transCarIntro.l-transfer.before .contents .c-cols.c-cols2 .timeline__vertical>li:not(:last-child)::after { height: calc(100% - 10px); } 
.transCarIntro.l-transfer.before .contents .c-cols.c-cols2 .timeline__vertical>li .middot span { margin-left: 12px; } 
.transCarIntro.l-transfer.before .contents .timeline__vertical>li+li { margin-top: 0; } 
.transCarIntro .c-cols.c-cols3 .c-cols__title { padding-top: 0; padding-bottom: 5px; } 
.transCarIntro .c-cols.c-cols3 .c-cols__title h4 { margin-top: 5px; font-weight: 700; font-size: 20px; line-height: 30px; } 
.transCarIntro .c-cols.c-cols3 .c-cols__content > p { font-size: 16px; font-weight: 500; line-height: 24px; } 

.l-transfer.successCar.fin .title .help-box,
.l-transfer.successCar.fin .title .help { margin-top: 0; margin-bottom: 0; } 
/* 서브 타이틀 통일성을 위해서 삭제 처리 
.l-transfer.successCar.fin .sub_title__text { margin-top: 16px; margin-bottom: 16px; font-size: 14px; font-weight: 400; line-height: 20px; } 
*/
.l-transfer.successCar.fin .contents { width: 100%; max-width: 438px; padding: 0; margin-top: 36px; } 
.l-transfer.successCar.fin form { padding: 0; } 

/* 안내소개 페이지 공통 */
.guide-page .arrow-title { padding-left : 16px; padding-right: 16px; } 
.guide-page .button--wrap { padding-left : 16px; padding-right: 16px; } 
.guide-page .c-chip.select { padding: 10px 16px; } 
.guide-page.l-transfer.before .contents .list { font-size: 14px; margin-bottom: 100px; } 
/* 주행거리 페이지 */
.l-trans-car-mileage.l-transfer .last-mileage__title + .mileage-check,
.l-transfer .contents .c-form-input .last-mileage__title + .mileage-check { margin-top: 0; } 
.l-transfer .contents .c-form-input .last-mileage__title { margin-top: 36px; margin-bottom: 12px; font-size: 14px; line-height: 18px; color: var(--content-sub); } 

 /* 특약서 작성 페이지 */
.contract-expand { margin-right: -16px } 

/* [수정 시작] modalOpen/modalClose를 그대로 사용하는 PC/모바일 공통 바텀시트 */
.modal.modal-bottom-sheet { top: auto; bottom: 0; left: 50%; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; opacity: 1; transform: translate(-50%, 100%); transition: transform 0.3s ease-in, visibility 0s linear 0.3s; will-change: transform; } 
.modal.modal-bottom-sheet.sts-active { transform: translate(-50%, 0); animation: modal-bottom-sheet-open 0.3s ease-out both; transition: transform 0.3s ease-in, visibility 0s linear 0s; } 
/* 닫을 때 활성 상태를 유지하면서 아래 방향 키프레임을 끝까지 실행한다. */
.modal.modal-bottom-sheet.sts-active.sts-closing { animation: modal-bottom-sheet-close 0.3s ease-in both; } 
/* 딤과 모달이 동시에 표시되어도 시작 위치부터 확실히 렌더링되도록 열림 모션을 키프레임으로 지정한다. */
@keyframes modal-bottom-sheet-open { 
 from { transform: translate(-50%, 100%); } 
 to { transform: translate(-50%, 0); } 
 }
/* 닫힘 모션이 중간에 끊기지 않도록 화면 하단 밖까지 이동시킨다. */
@keyframes modal-bottom-sheet-close { 
 from { transform: translate(-50%, 0); } 
 to { transform: translate(-50%, 100%); } 
 }
/* [수정 끝] modalOpen/modalClose를 그대로 사용하는 PC/모바일 공통 바텀시트 */

/* [수정 시작] 전자계약 datepicker를 PC/모바일 공통 바텀시트로 표시 */
#ui-datepicker-div.datepicker-bottom-sheet { position: fixed !important; top: auto !important; right: auto !important; bottom: 0 !important; left: 50% !important; width: 100% !important; max-width: 480px; border-radius: 20px 20px 0 0; transform: translate(-50%, 0); animation: datepicker-bottom-sheet-open 0.3s ease-out both; will-change: transform; } 
#ui-datepicker-div.datepicker-bottom-sheet.datepicker-closing { animation: datepicker-bottom-sheet-close 0.3s ease-in both; } 
@keyframes datepicker-bottom-sheet-open { 
 from { transform: translate(-50%, 100%); } 
 to { transform: translate(-50%, 0); } 
 }
@keyframes datepicker-bottom-sheet-close { 
 from { transform: translate(-50%, 0); } 
 to { transform: translate(-50%, 100%); } 
 }
/* [수정 끝] 전자계약 datepicker를 PC/모바일 공통 바텀시트로 표시 */

.modal .modal__btn.full .c-btn.size-auto { padding-top: 14px; padding-bottom: 0; } 

/* 명의이전 이메일 계정 연동 약관 */
#modal-email-terms .email-terms .terms__item { align-items: center; gap: 0 8px; }
#modal-email-terms .email-terms .terms__check { flex: 0 0 20px; }
#modal-email-terms .email-terms .terms__check .c-check label { display: block; }
#modal-email-terms .email-terms .terms__text-title { align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
#modal-email-terms .email-terms .terms__text-title > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; }
#modal-email-terms .email-terms .terms__text-title > span span{font-weight: 600;}
#modal-email-terms .email-terms .terms__text-title a { flex-shrink: 0; }
#modal-email-terms .email-terms .terms__list.essential .terms__text-title { color: var(--content-body); }


/* 전자계약서 폼 전용: 다른 페이지의 공통 계약 스타일과 분리 */
.el-contract-form__back--compact { height: 560px; } 
.el-contract-form__back--expanded { height: 549px; } 
.el-contract-form__scroll { overflow: scroll; width: 100%; } 
.el-contract-form__scroll--compact { height: 520px; } 
.el-contract-form__scroll--expanded { height: 100%; } 
.el-contract-form__sheet { border: 1px solid #000; } 
.el-contract-form__logo-line { font-size: 1px; } 
.el-contract-form__logo--compact { width: 72px; height: 14px; } 
.el-contract-form__logo--expanded { width: 132px; height: 30px; } 
.el-contract-form__title { padding: 8px 0; text-align: center; } 
.el-contract-form__title--compact { font-size: 18px; } 
.el-contract-form__title--expanded { font-size: 24px; } 
.el-contract-form__meta--small { font-size: 8px; } 
.el-contract-form__meta--compact,
.el-contract-form__table--compact,
.el-contract-form__text--compact { font-size: 10px; } 
.el-contract-form__meta--expanded { font-size: 14px; } 
.el-contract-form__receipt-date { float: right; } 
.el-contract-form__table--expanded { font-size: 15px; } 
.el-contract-form__party-heading { width: 50px; } 
.contract-table table th.el-contract-form__label--plain { border: 0; } 
.contract-table table th.el-contract-form__label--mobile { border: 0; text-align: center; } 
.contract-table table th.el-contract-form__label--mobile-date { border: 0; font-size: 9px; text-align: center; } 
.el-contract-form__pending-signature { color: red; } 
.el-contract-form__pending-signature--fixed { width: 53px; } 
.el-contract-form__pending-value { color: red; } 
.contract-table table th.el-contract-form__section-heading { font-size: 14px; text-align: center; } 
.el-contract-form__text--expanded { font-size: 16px; } 
.el-contract-form__border-top { border-top: 1px solid #000; } 
.el-contract-form__border-bottom { border-bottom: 1px solid #000; } 
.el-contract-form__center { text-align: center; } 
.el-contract-form__sign-table { margin-top: 5px; } 
.el-contract-form__sign-cell { text-align: right; } 
.el-contract-form__notice-heading { margin-top: 40px; text-align: center; } 
.el-contract-form__check--compact { height: 15px; } 
.el-contract-form__check--expanded { height: 25px; } 
.el-contract-form__expand-action { text-align: right; } 
.el-contract-form__expand-icon { width: 110px; height: 70px; } 
#modal-contract-expand.el-contract-form__expanded-modal { width: 1000px !important; max-width: 100%; height: 656px; } 
.el-contract-form__close { background-color: #f1f4f6; } 
.el-contract-form__preformatted { white-space: pre-wrap; } 

/* 전자계약 특약 입력 모달 전용 */
.modal__head.el-contract-special__head { padding: 32px 16px; } 
.el-contract-special__close-wrap { float: right; } 
.el-contract-special__close { width: 15px; height: 15px; } 
.el-contract-special__title { float: left; } 
.title.el-contract-special__section { padding: 0; } 
.el-contract-special__help,
.el-contract-special__help p { margin-top: 0; } 
.el-contract-special__input { margin-top: 20px; } 
textarea.el-contract-special__textarea { height: 300px; font-size: 14px; background-color: #f9fafb; } 
.el-contract-special__counter { margin-top: 8px; text-align: right; } 

/* 전자계약 서명 화면의 수정 대기 상태 전용 */
.el-contract-signature__header-spacer { width: 30px; } 
.el-contract-signature__waiting { display: none; width: 100%; height: 520px; } 
.el-contract-signature__waiting-message { margin-top: 50%; color: #aab5c0; text-align: center; } 
.el-contract-signature__waiting-description { font-size: 14px; } 
.el-contract-signature__hidden { display: none; } 



/* 거래 유형 페이지 전용 스타일 */
.l-el-client-type .c-form-select .c-radio label { font-size: 16px; } 
.l-el-client-type .c-form-select .c-radio div + div { margin-top: 32px; } 


/* 2026-07-15 수정: 종합리포트 선택 영역 공통 비활성 상태 추가 */
.l-transfer.last .help-checkbox-report--disabled { border-color: var(--border-outline); cursor: default; pointer-events: none; } 
.l-transfer.last .help-checkbox-report--disabled .c-check label { color: var(--content-disabled); cursor: default; } 
.l-transfer.last .help-checkbox-report--disabled .c-check label p,
.l-transfer.last .help-checkbox-report--disabled .c-check label p > span,
.l-transfer.last .help-checkbox-report--disabled .c-check label strong { color: var(--content-disabled); } 
.l-transfer.last .help-checkbox-report--disabled .c-check label i { background-color: var(--gray-100); box-shadow: inset 0 0 0 2px var(--gray-300); } 
.l-transfer.last .help-checkbox-report--disabled .btn-info-select { color: var(--content-disabled); background-color: var(--gray-50); } 
.l-transfer.last .help-checkbox-report--disabled .btn-info-select::before { background-image: url(/images/icon/arrow_right_lightgray.svg); } 

/* 2026-07-31 09:29    김단아   계약서 레이아웃 수정 및 변경  */
.l-contract-confirm.l-form .contents{width: 100%;}
.l-contract-confirm.l-form{width: 780px;margin: 0 auto;}
@media only screen and (max-width: 767px){
    .l-contract-confirm.l-transfer#container .arrow__btn--wrap ~ section{max-width: 100%;}
    .l-contract-confirm .el-contract-back{padding:0}
    .l-contract-confirm.l-form.l-transfer>.arrow__btn--wrap{max-width: 100%;}
    .l-contract-confirm.l-form.l-transfer .arrow__btn--inner.size-m{position: relative;}
    .l-contract-confirm.l-form.l-transfer .arrow__btn--inner a.fc-blue{position: sticky; right: 16px;}
}

/* 2026-08-07 13:48    김단아    명의이전 이메일 주소 페이지 */
.l-escrow-flow#container.l-email-info{max-width: 438px; margin: 0 auto;}
#modal-email-terms .join__form .terms.email-terms .agree__check label{font-size: 16px;}
#modal-email-terms .join__form .terms .terms__item{margin: 12px 0 !important;}
#modal-email-terms .join__form .terms .agree__check{padding: 16px 0 10px !important;}


/* 2026-08-25 23:29    윤소정   명의이전 주민번호 뒷자리 입력 */
/* 주민등록번호 풀 입력 형태 (50:50 폭 맞춤) */
.ssn.ssn--full .ssn__front,
.ssn.ssn--full .ssn__back { width: auto; flex: 1 1 0; }
.ssn.ssn--full .ssn__back .c-input { width: 100% !important; }
.ssn.ssn--full .ssn__back .c-input input { padding: 0 20px; text-align: left; }

/* 2026-08-25 23:29    윤소정   명의이전 주민등록번호 보안키패드 바텀시트 CSS */
#bottom-sheet-security-keypad .bottom-sheet__contents { display: block; width: 100%; padding: 0 16px 24px; }
#bottom-sheet-security-keypad .keypad-display { text-align: center; font-size: 22px; letter-spacing: 8px; min-height: 28px; margin-bottom: 24px; color: var(--content-main); }
#bottom-sheet-security-keypad .keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#bottom-sheet-security-keypad .keypad-key { height: 56px; border: none; border-radius: 8px; background: var(--bg-light-gray); font-size: 20px; font-weight: 600; color: var(--content-main); }
#bottom-sheet-security-keypad .keypad-key--blank { background: transparent; }
#bottom-sheet-security-keypad .keypad-key--del { font-size: 14px; font-weight: 500; }
#bottom-sheet-security-keypad .keypad-actions { display: flex; gap: 8px; margin-top: 20px; }
#bottom-sheet-security-keypad .keypad-actions .c-btn { flex: 1; }

/* 2026-08-27 14:28    윤소정   명의이전 부평구청프로세스(입금요청 대기) 화면 전용 스타일 */
.payment-request .title { text-align: center; }
.payment-request .title__main { border: 0; padding-bottom: 0; }
.payment-request .title__sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--content-sub, #6b7280); }
.payment-request__visual { display: flex; flex-direction: column; align-items: center; padding: 56px 0 64px; }
.payment-request__check { margin-bottom: 40px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--content-primary, #3182f6); }