/* mycar */

.l-vehicle-info .car-number-select {
 display: flex;
 align-items: center;
 border-radius: 8px;
 cursor:pointer;
 padding: 8px 0;
}

.l-vehicle-info .car-number-select:hover{
  background-color: var(--gray-100);
}

.l-vehicle-info.l-vehicle-info-sample .car-number-select:hover{
  background-color: #fff;
  cursor: auto;
}

.l-vehicle-info .car-number-select > img {
  width: 20px;
  height: 20px;
  transform : rotate(90deg);
}

.l-vehicle-info .quick__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  padding: 0px 16px 10px 16px;
  margin-bottom: 16px;
}

.l-mypage.user .quick__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  padding: 20px 16px;
  margin-bottom: 16px;
}

.l-vehicle-info .quick__item {
  position: relative;
  display: flex;
  padding: 14px 0px;
  gap: 2px;
  border-radius: 12px;
  text-align:center;
  cursor: pointer;
  border-radius: 0.6rem;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--gray-100);
  align-items: center;
}

.l-vehicle-info .quick__item:hover {
   background-color: var(--gray-200);
}

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

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

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

.l-vehicle-info .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-vehicle-info .car-profile {
  position: relative;
  padding-top: 12px;
  padding-left: 16px;
  padding-right: 16px; 
  align-items: center;
  display: flex;
}

.l-vehicle-info .car-profile__img {
  position: relative;
  width: 40%;
  height: 7.5rem;
}

.l-vehicle-info .car-profile__img img:last-child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 94%;
  height: 94%;
  max-width: 94%;
  max-height: 94%;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-vehicle-info .car-profile__img img:first-child {
 position: absolute;
 width: 36px;
 top: 0;
 right: 0;
 z-index: 1;
}

.l-vehicle-info .car-profile__title{
  padding: 0.375rem 0;
  font-size: 20px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-vehicle-info .car-profile__title__model {
  margin-right: 0.1875rem;
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
}



.l-vehicle-info .car-profile__title__trim:after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/images/icon/chevron_right_gray.svg) no-repeat center;
  background-size: contain;
  vertical-align: -1px;
}

.l-vehicle-info.l-vehicle-info-sample .car-profile__title__trim:after{
 background: none;
}

.l-vehicle-info .car-profile__title__trim:hover {
  opacity: 0.6;
}


.l-vehicle-info.l-vehicle-info-sample .car-profile__title__trim:hover {
  opacity: 1;
  cursor: auto;
}

.l-vehicle-info .car-profile__sub--first-block {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
}

.l-vehicle-info .car-profile__sub--second-block {
 font-family: Pretendard;
 font-weight: 400;
 font-size: 12px;
 line-height: 18px;
 color: var(--content-caption);
}

.l-vehicle-info .car-profile__sub--second-block span:after {
  content: '' !important;
}

.l-vehicle-info .car-profile__sub--second-block span:last-child {
 text-decoration: underline;
}

.l-vehicle-info .btn-update {
  padding:6px 2px; 
}

.l-vehicle-info .btn-update:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}

.l-vehicle-info.l-vehicle-info-sample .btn-update:hover {
  background-color: #fff;
  cursor: auto;
}

.l-vehicle-info .car-profile__timestamp {
  display: inline-block;
  color: var(--content-sub) !important;
  font-size: 14px;
  font-weight: 500;
  margin-right: 4px;
}

.l-vehicle-info .car-spec__item span {
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
 align-items: center;
 gap: 4px;
 text-align: left;
}

@media only screen and (max-width: 767px) {
  .l-vehicle-info .car-profile {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .l-vehicle-info .car-profile__container {
    width: 100%;
  }
  
  .l-vehicle-info .car-profile__img {
    width: 100%; 
  }
}


.l-vehicle-info .divider {
 height: 12px;
 background-color: var(--gray-50);
 margin: 40px 16px;

}

.bottom-sheet__content .info-wrapper {
 margin-bottom: 24px
}

.bottom-sheet__content .info-line {
  padding: 4px 0px;
  color: var(--content-sub);
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.bottom-sheet__content .info-main-wrapper {
  height: 400px;
}

.bottom-sheet__content .info-main-wrapper .tab__title {
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  color: var(--content-main);
}
 
.l-vehicle-info .info-line:last-child {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
}

.bottom-sheet.my-car-summary {
 max-width: 740px;
 height:50%;
 overflow: scroll;
 padding: 0 16px;
}

.bottom-sheet.my-car-summary .bottom-sheet__content {
  padding: 0px;
}

.bottom-sheet.my-car-summary .bottom-sheet__header {
 padding-top: 20px;
 padding-bottom: 6px;
 padding-left : 0;
 padding-right : 0;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 position: sticky;
 top: 0;
 z-index: 30;
 background-color: white;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:first-child {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:first-child > span {
  display: flex;
  align-items: center;
  color: var(--primary-blue);
  font-weight: 600;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:last-child {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.bottom-sheet.my-car-summary .bottom-sheet__header > div:last-child:hover {
   background-color: var(--gray-100);
}

.bottom-sheet.my-car-summary .bottom-sheet__header >  div > h3 {
 font-weight: 700;
 font-size: 20px;
 line-height: 36px;
 letter-spacing: 0px;
 padding: 0;
 color: var(--content-main);
}

.bottom-sheet .card.my-car-summary {
 padding: 8px 16px;
 display: flex;
 justify-content: space-between;
 border: none;
 border-radius: 0;
 cursor:pointer;
 margin-bottom: 8px;
 border-radius: 12px;
}

.bottom-sheet .card.my-car-summary:hover {
  background-color: var(--gray-100);
}

.bottom-sheet .card.my-car-summary > .brand-name-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.bottom-sheet .card.my-car-summary > .brand-name-info > span {
 font-weight: 700;
 font-size: 18px;
 line-height: 28px;
 color: var(--content-main);
}

.bottom-sheet .card.my-car-summary.selected {
  background-color: var(--gray-100);
}


.bottom-sheet .card.my-car-summary.selected > .brand-name-info > span{
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--primary-blue);
}

.bottom-sheet .card.my-car-summary > .brand-name-info > div {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.bottom-sheet .card.my-car-summary >.car-image {
  width: 6rem
}

.bottom-sheet .card.my-car-summary >.car-image >img {
  width: 100%;
}

/* ===== myCarinfor ===== */


.l-vehicle-info {
  padding-bottom: 0 !important;
}

.l-vehicle-info .contents {
  padding: 0;
  max-width: 740px;
  min-width: 0;
  flex: auto;
}

.l-vehicle-info .tab {
  max-width: calc(1130px + 2rem);
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  background-color: var(--bg-white);
  z-index: 0;
  position: static;
  border-bottom: none;
}

.l-vehicle-info .tab>div {
  width: 100%;

}

.l-vehicle-info .arrow__btn--wrap {
 padding: 0px;
 background-color: var(--white);
}

.l-vehicle-info .arrow__btn--inner {
 width: 740px;

}

@media only screen and (max-width: 767px) {
  .l-vehicle-info .arrow__btn--wrap {
        top: 56px;
        padding: 8px 0 0;
   }
    
  .l-vehicle-info .arrow__btn--inner {
     padding: 0 4px;
  }
  
  .l-vehicle-info .divider {
      margin: 40px 0px;
   }
}

.l-vehicle-info .tab__head {
  overflow: hidden;
  display: flex;
  padding: 2.5rem 0 0.5rem;
  justify-content: space-between;
  position: sticky;
  top: 76px;
  -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
  backdrop-filter: saturate(180%) blur(1.25rem);
}

[id^='slide'] .tab__head {
  max-width: 100%;
  left: 0;
}

.l-vehicle-info .tab__head h3 {
  position: relative;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: var(--content-main);
}

.l-vehicle-info .tab__head__right .c-btn+.c-btn {
  margin-left: 0.25rem;
}

.l-vehicle-info .tab__contents {
  padding: 0;
  background-color: var(--bg-white);
}

.l-vehicle-info .tab__contents:first-child {
   padding: 16px 0;
}

.l-vehicle-info .tab__overview > .tab__contents {
  margin-bottom: 0;
  padding: 0;
}



.l-vehicle-info .tab__title:first-child {
  padding: 16px 16px 0;
}

.l-vehicle-info .tab__sub-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--content-main);
  padding: 8px 16px 8px 16px;
}

.l-vehicle-info .tab__title p {
  display: block;
  width: 100%;
  flex: none;
  color: var(--content-caption);
  padding-top: 0.5rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.l-vehicle-info .tab__title h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--content-main);
}

.l-vehicle-info .tab__title strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--content-main);
  line-height: 20px;
}

.l-vehicle-info .tab__title em {
  color: var(--primary-blue);
  font-size: inherit;
  font-weight: inherit;
}

.l-vehicle-info .tab__btn {
  display: none;
  padding: 0.25rem 1rem;
  gap: 0.5rem;
  background: rgba(250, 250, 252, 0.92);
}

.l-vehicle-info .tab__btn .c-btn {
  margin: 0;
  flex: 1 1 0;
  height: 2.625rem;
  font-size: 0.875rem;
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-vehicle-info .tab__btn .btn-report-share:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/share_white.svg);
  background-size: contain;
}

.l-vehicle-info .tab__btn .btn-report-save {
  background-color: var(--black);
  color: var(--white);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.l-vehicle-info .tab__btn .btn-report-save:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/arrow_down_tray_black.svg);
  background-size: contain;
}

.l-vehicle-info .tab__btn .btn-report-preview {
  background-color: rgba(252, 252, 252, 0.92);
}

.l-vehicle-info .tab__btn .btn-report-preview:before {
  width: 1rem;
  height: 1rem;
  background-image: url(/images/icon/search_b_gray.svg);
}

.l-vehicle-info .btn-report-save:before {
  vertical-align: -0.125rem;
  background-image: url(/images/arrow_down_tray_black.svg);
}

.l-vehicle-info .btn-report-preview:before {
  vertical-align: -0.125rem;
  background-image: url(/images/clipboard_gray.svg);
}

.bottom-sheet.c-tip .notice {
  padding: 0;
}

.l-vehicle-info .notice {
  text-align: left;
  padding: 14px;
  border-radius: 10px 0px 0px 0px;
}

.bottom-sheet.c-tip .notice > span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-sub);
}

.l-vehicle-info .notice > span {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--content-caption);
  margin-bottom: 4px;
}

.l-vehicle-info .notice__title {
  display: block;
  margin-bottom: 0.625rem;
  font-weight: 700;
  color: var(--content-main);
  font-size: 1.125rem;
}

.l-vehicle-info .notice__title em {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--content-main);
}

.l-vehicle-info .notice__title em:before {
  content: '';
  display: inline-block;
  margin-right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
  background: url(/images/icon/info_linecircle_gray.svg) no-repeat center;
  background-size: contain;
}

.bottom-sheet.c-tip .notice__list,
.l-vehicle-info .notice__list {
  margin-top: 10px;
}

.bottom-sheet.c-tip .notice__list li{
  position: relative;
  display: block;
  padding-left: 1.188rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-sub);
}

.l-vehicle-info .notice__list li {
  position: relative;
  display: block;
  padding-left: 1.188rem;
  color: var(--content-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.bottom-sheet.c-tip .notice__list li:not(:first-child),
.l-vehicle-info .notice__list li:not(:first-child) {
  margin-top: 0.3125rem;
}

.bottom-sheet.c-tip .notice__list li:before,
.l-vehicle-info .notice__list li:before {
  content: '•';
  display: inline-block;
  position: absolute;
  left: 0.4375rem;
  width: 0.1875rem;
  height: 0.1875rem;
  -webkit-border-radius: 6.25rem;
  border-radius: 6.25rem;
}

.l-vehicle-info .notice__list li strong {
  font-weight: 600;
  font-size: inherit;
  color: inherit;
}

.l-vehicle-info .chart__inner {
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-vehicle-info .case {
  display: flex;
  margin-bottom: 3.125rem;
  justify-content: center;
}

.l-vehicle-info .case__title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-sub);
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}


.l-vehicle-info .case--blind .case__title:before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  vertical-align: -0.25rem;
  background: url(/images/i_report_case_blind.svg) no-repeat center;
  background-size: contain;
}

.l-vehicle-info .case__list {
  font-weight: 400;
  font-size: 14px; 
  margin-top: 0.75rem;
}

.l-vehicle-info .case__list li {
  position: relative;
  display: block;
  padding-left: 1.188rem;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-caption);
}

.l-vehicle-info .case__list li+li {
  margin-top: 0.125rem;
}

.l-vehicle-info .case__list li:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0.625rem;
  left: 0.4375rem;
  width: 0.1875rem;
  height: 0.1875rem;
  -webkit-border-radius: 6.25rem;
  border-radius: 6.25rem;
  background-color: var(--content-caption);
}

.l-vehicle-info .case__list li strong {
  font-weight: 600;
  font-size: inherit;
  color: inherit;
}

.l-vehicle-info .server-error {
  text-align: center;
  padding: 30px 0;
}

.l-vehicle-info .server-error:before {
  content: '';
  display: block;
  margin: 0 auto 10px;
  width: 24px;
  height: 24px;
  background: url(/images/icon/icon-warning-triangle.svg) no-repeat center;
  background-size: contain;
}

.l-vehicle-info .server-error strong {
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
color: var(--content-sub);

}

.l-vehicle-info .server-error p {
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 text-align: center;
 margin-top: 10px;
 color: var(--content-caption);
}

.l-vehicle-info .server-error .c-btn {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  text-decoration: underline;
  margin-top: 24px;
  color: var(--primary-blue);

}

.l-vehicle-info .car-content {
  margin-bottom: 3.125rem;
}

.l-vehicle-info .predicted-mileage-period {
 display: flex;
 justify-content: space-between;
}

.l-vehicle-info .car-spec__item .predicted-mileage {
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--content-main)
 
}

.l-vehicle-info .car-profile__img img {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 94%;
  height: 94%;
  max-width: 94%;
  max-height: 94%;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-vehicle-info .car-profile__container {
  flex: auto;
}

.l-vehicle-info .car-profile__container>* {
  position: relative;
}

.l-vehicle-info .car-profile__brand {
  font-size: 14px;
  font-weight: 400;
  color: var(--content-caption);
}

.l-vehicle-info .car-profile__title {
  padding: 0.375rem 0;
  font-size: 24px;
  flex-wrap: wrap;
}

.l-vehicle-info .car-profile__title__model {
  margin-right: 0.1875rem;
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
}

.l-vehicle-info .car-profile__title__trim {
  font-weight: 600;
  font-size: inherit;
  color: var(--content-main);
  border: 0;
  background: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.l-vehicle-info .car-profile__title__trim:after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/images/icon/chevron_right_gray.svg) no-repeat center;
  background-size: contain;
}

.l-vehicle-info .car-profile__sub {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
  flex-direction: column;
}

.l-vehicle-info .car-profile__sub span {
  color: var(--content-caption);
  font-weight: 400;
}

.l-vehicle-info .car-profile__sub span:not(:last-child):after {
  content: '•';
  display: inline-block;
  margin: 0 2px;
  height: 0.875rem;
}

.l-vehicle-info .btn-update {
  padding:6px 2px; 
}


.l-vehicle-info .btn-update:hover {
  background-color: var(--gray-100);
  border-radius: 6px;
}



.l-vehicle-info .car-spec__item {
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
  position: relative;
}

.l-vehicle-info .car-spec__item > button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.l-vehicle-info .vehicle-value-wrapper {
 display: flex;
 width: 100%;
 justify-content: space-between;
 padding: 8px 0px 0px 0px;
}

.l-vehicle-info .residual-value {
 display: flex;
 flex-direction: column;
 font-size: 16px;
 font-weight: 600;
 line-height: 24px;
}

.l-vehicle-info .residual-value > button {
 display: flex;
 align-items: center;
 gap:4px;
}

.l-vehicle-info .residual-value > button >span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
}

.l-vehicle-info .depreciation-value {
 display: flex;
 flex-direction: column;
 font-size: 16px;
 font-weight: 600;
 line-height: 24px;
 text-align: right;
 color: var(--content-main)
}

.l-vehicle-info .depreciation-value > button {
  display: flex;
  align-items: center;
  gap:4px;
}

.l-vehicle-info .depreciation-value > button > span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub);
}

.l-vehicle-info .registration-period-price-wrapper {
  padding: 10px 0px 10px 0px; 
}

.l-vehicle-info .registration-period-price-wrapper > div > button {
  display: flex;
  align-items: center;
  gap:4px;
}

.l-vehicle-info .year-later-price {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 4px 16px 4px 16px;
 gap: 6px;
}

.l-vehicle-info .year-price-wrapper {
 display: flex;
 gap:21px;
 padding: 4px 0;
 color: var(--content-main);
 font-size: 14px;
}

.l-vehicle-info span.year {
 color: var(--content-sub);
 width: 40px;
}

.l-vehicle-info span.price {
 text-align: left;
 width: 80px;
}

.l-vehicle-info span.later-price {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--content-sub)
}

.l-vehicle-info .registration-period-price-wrapper > div {
  color: var(--content-sub);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.l-vehicle-info .model-detail-price-wrapper {
    padding: 8px 16px 8px 16px;
}

.l-vehicle-info .model-detail-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0px 8px 0px;
    gap: 6px;
}

.l-vehicle-info span.model {
 color: var(--content-sub);
}

.l-vehicle-info span.detail-price {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: var(--content-main);
}

.l-vehicle-info .car-spec__item strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: left; 
  color: var(--content-main);
}

.l-vehicle-info .car-spec__item>em {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--content-caption);
}

.l-vehicle-info .car-spec__item .c-tip__icon {
  vertical-align: -4px;
}

.car-info-wrapper {
 padding: 10px 16px;
}


.l-vehicle-info .car-info {
  font-size: 14px;
  color: var(--content-caption);
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--content-warning);
  display: flex;
}

.l-vehicle-info .car-basic-info > span > img {
 transform:rotate(90deg);
}

.l-vehicle-info .car-basic-info-wrapper {
  padding: 10px 16px;
}

.l-vehicle-info .car-basic-info {
  font-size: 14px;
  color: var(--content-sub);
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--border-outline);
  display: flex;
  font-weight: 600;
}

.l-vehicle-info .car-basic-info:hover{
  background-color: var(--gray-50);
}

.l-vehicle-info .car-basic-info > div {
  display: flex;
  width: 51px;
  padding: 0px 15px 0px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #F9FAFB;
  border-radius: 8px 0 0 8px;
}


.l-vehicle-info .car-basic-info > span{
  padding: 10px;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}


.l-vehicle-info .car-info > div{
  display: flex;
  width: 51px;
  padding: 0px 15px 0px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--content-warning);
  background: rgba(251, 179, 34, 0.08);
}


.l-vehicle-info .car-info > span{
  padding: 14px;
}


.l-vehicle-info .car-info > span > span{
  color: var(--primary-blue);
}

.l-vehicle-info .total-count {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.l-vehicle-info .tab__overview .car-content {
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
  margin-bottom: 0;
}

.l-vehicle-info .tab__overview .notice {
  margin-top: 3.75rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
}

.l-vehicle-info .tab__market-price .car-content, .l-vehicle-info .tab__mileage .car-content {
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.l-vehicle-info .market-price {
  padding: 0 16px;
}


.l-vehicle-info .market-price > .car-info-wrapper {
  padding: 10px 0;
}

.l-vehicle-info .predicted-price {
  margin-bottom: 16px;
  margin-top: 16px;
}

.l-vehicle-info .model-detail-price-list {
  margin-bottom: 16px;
}

.l-vehicle-info .tab__mileage .car-content {
  margin-bottom: 0;  
}

.l-vehicle-info .car-spec {
  padding: 0 16px;
}

.l-vehicle-info .tab__mileage .car-spec__item {
  border: 0;
}

.l-vehicle-info .tab__accident .accident {
  text-align: center;
  width: 29.38rem;
  max-width: 100%;
  margin: 6.25rem auto;
}

.l-vehicle-info .tab__accident .accident p {
  font-size: 14px;
}

.l-vehicle-info .tab__accident .accident .btn-accident-go {
  display: block;
  margin-top: 1.25rem;
  border: 1px solid var(--gray-500);
  background-color: transparent;
  font-size: 1.75rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.l-vehicle-info .tab__accident .accident .btn-accident-go:after {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 1rem;
  background: url(/images/icon/arrow_right_black.svg) no-repeat center;
  background-size: contain;
  vertical-align: -0.5rem;
}

.l-vehicle-info .tab__specification .tab__title:not(:first-child) {
  margin-top: 3.25rem;
}

.l-vehicle-info .tab__specification .spec-img {
  position: relative;
  margin: -0.25rem 0 1.25rem;
  width: 100%;
  overflow: auto;
}

.l-vehicle-info .tab__specification .spec-img img {
  display: block;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.l-vehicle-info .tab__specification .spec-img>span {
  position: absolute;
  font-size: 0.75rem;
  left: 0;
  bottom: 0;
}

.l-vehicle-info .tab__specification .spec-img .spec01 {
  left: 23rem;
  bottom: 1.875rem;
}

.l-vehicle-info .tab__specification .spec-img .spec02 {
  left: 29rem;
  bottom: 6.125rem;
}

.l-vehicle-info .tab__specification .spec-img .spec03 {
  left: 46.5rem;
  bottom: 1.875rem;
}

.l-vehicle-info .tab__specification .spec-img .spec04 {
  left: 18.4 .063rem;
  bottom: 66px;
}

.l-vehicle-info .tab__specification .spec-img .spec05 {
  left: 45.81rem;
  bottom: 4.063rem;
}

.l-vehicle-info .tab__specification .spec-img .spec06 {
  left: 63.5rem;
  bottom: 4.063rem;
}

.l-vehicle-info .tab__maintenance .tls td {
  word-break: break-all;
}

#tbMenu6 tr td:nth-child(4) {
  text-align: left;
}

.l-vehicle-info #slide2 .tab__contents {
 padding-top: 0;
}

.l-vehicle-info .maintenance-check {
  margin-bottom: 2rem;
}

.l-vehicle-info .maintenance-check td {
  vertical-align: middle;
}

.l-vehicle-info .label-safe {
  display: inline-block;
  font-weight: 500;
  color: var(--primary-blue);
}

.l-vehicle-info .label-safe:after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: -0.3125rem;
  background: url(/images/i_safe.svg) no-repeat center;
}

.l-vehicle-info .label-warning {
  display: inline-block;
  font-weight: 500;
  color: var(--content-error);
}

.l-vehicle-info .label-warning:after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: -0.3125rem;
  background: url(/images/alert_triangle_red.svg) no-repeat center;
}

.l-vehicle-info .find-history-btn-box {
  padding: 8px 16px 8px 16px;
  width: 100%;
}

.l-vehicle-info .btn-find-history {
  padding: 10px;
  gap: 4px;
  border-radius: 8px;
  background-color: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: default;
}


.l-vehicle-info .btn-find-history:hover {
  background-color: var(--blue-100);
  cursor: pointer;
}

.l-vehicle-info .btn-find-history > .icon-chevron {
  width: 16px;
  height: 16px;
  color: var(-blue-200)
   
}

.l-vehicle-info .btn-find-history >div > span {
   color : var(--content-sub);
   font-size: 14px;
   line-height: 16px; 
   font-weight: 600;
}

.l-vehicle-info .btn-find-history >div > span > span{
 color : var(--primary-blue);

}

.l-vehicle-info .special-use-card-list {
  display:flex;
  padding: 8px 16px 8px 16px;
  gap: 8px;
}

.l-vehicle-info .special-use-card-list > .desc-card   {
  padding: 20px;
  background-color: var(--bg-light-gray);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--content-sub);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  border-radius: 12px;
  align-items: center;
  width: 100%;

}

.l-vehicle-info .special-use-card-list > .desc-card > span {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--content-sub); 
}

.l-vehicle-info .special-use-card-list > .desc-card > span:last-child {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: var(--content-main);
}

.l-vehicle-info #recall-list > ul > li {
 padding: 12px 16px 12px 16px;
}

.l-vehicle-info #recall-list > ul  {
 display: flex;
 flex-direction: column;
}

.l-vehicle-info #drop-list > ul > li {
  padding: 12px 16px 12px 16px;
 
}

.l-vehicle-info .recall-info {
 margin-bottom: 8px;
}

.l-vehicle-info .parts-progress-wrapper {
 display: flex;
 justify-content: space-between;
}

.l-vehicle-info .recall-parts {
  color: var(--content-main);
  font-size: 15px;  
  font-weight: 600;
  line-height: 22px;
}

.l-vehicle-info .progress-status {
 font-size: 15px;
 font-weight: 600;
 line-height: 1.5;
}

.l-vehicle-info .progress-status.success {
  color: var(--primary-blue);
}

.l-vehicle-info .progress-status.pending {
  color: var(--content-error);
}

.l-vehicle-info .recall-date {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}

.l-vehicle-info .recall-desc {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-sub);
 
}

.l-vehicle-info .year-header {
  padding: 16px;
  font-size: 18px;
  color: var(--content-main);
  border-radius: 10px;
  background-color: var(--gray-50);
}

.recall-center {
 border-bottom: 1px solid var(--content-caption);
}

.l-vehicle-info .repair-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px 12px 16px;  
}

.l-vehicle-info .repair-info {
  display: flex;
  gap: 6px;
  flex-direction: column-reverse;
}

.l-vehicle-info .repair-info > div{
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption);
}

.l-vehicle-info .repair-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info .repair-cost {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--primary-blue);
}


.l-consumablesDetail .hidden-item,
.l-vehicle-info .hidden-item {
  display: none !important;
}

.l-vehicle-info .no-info {
 gap: 10px;
 padding-top: 48px;
 padding-right: 10px;
 padding-bottom: 48px;
 padding-left: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--content-sub);
 font-weight: 400;
 font-size: 14px;
 line-height: 16px;
 display: flex;
 flex-direction: column;
}


.l-vehicle-info .no-info.accident {
 text-align: center;
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 margin: 0px auto;
}

.l-vehicle-info .no-info.accident > div{
  display: flex;
  flex-direction: column;
}

.l-vehicle-info .no-info.accident > div > a{
  margin-top:10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-decoration: underline;
  color: var(--primary-blue);
}

.l-vehicle-info .btnShowMore,
.l-vehicle-info .btnHideMore {
  align-items: center;
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: center;
  background-color: var(--bg-light-gray);
  border-radius: 10px; 
  font-weight: 600;
}

.l-vehicle-info .btnShowMore:hover,
.l-vehicle-info .btnHideMore:hover {
  background-color: var(--gray-200);
}

.l-vehicle-info .btnShowMore.top, 
.l-vehicle-info .btnHideMore.top {
 height: 100%;
 border: none;
 background-color: transparent;
}

.l-vehicle-info .show-more-btn {
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--content-sub);
 font-size: 14px;
 font-weight: 600;
 line-height: 16px;
 margin: 0 16px;
 border-radius: 8px;
}

.l-vehicle-info .total-count > .show-more-btn {
 margin: 0;
 padding: 6px 4px; 
}

.l-vehicle-info .show-more-btn:hover {
  background-color: var(--gray-100)
}

.l-vehicle-info .btnShowMore img {
  transform: rotate(90deg);
  width: 20px;
  height: 20px;
}

.l-vehicle-info .btnHideMore img {
 transform: rotate(-90deg);
 width: 20px;
 height: 20px;
}
.l-vehicle-info .owner-history {
 display: flex;
 justify-content: space-between;
 padding: 12px 16px 12px 16px;
}

.l-vehicle-info .registration-details-wrapper {
 display: flex;
 flex-direction: column;
 gap:4px;
}

.l-vehicle-info .register-date {
 font-size: 15px;
 font-weight: 600;
 line-height: 22px;
 color: var(--content-main); 
}

.l-vehicle-info .vhr-no {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption); 
}

.l-vehicle-info .contents-user-wrapper {
  display: flex;
  flex-direction: column;
  gap:4px;
  text-align: right;
}

.l-vehicle-info .res-contents-ctg {
 font-size: 15px;
 font-weight: 600;
 line-height: 22px;
 color: var(--content-main);
}

.l-vehicle-info .res-user-info {
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}
.l-vehicle-info .date-drop-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.l-vehicle-info .car-drop {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info .car-drop-date {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info #impound-list {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main); 
}

.l-vehicle-info #impound-list > ul > li {
  padding: 12px 16px; 
}

.l-vehicle-info .date-organization-wrapper {
  display: flex;
  gap:4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-vehicle-info #mortgage-list > ul > li {
  padding: 12px 16px;
}

.l-vehicle-info .mortgage-info-wrapper {
  display: flex;
  gap:4px;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main);
  justify-content: space-between;
}

.l-vehicle-info .mortgage-info-wrapper > div {
   display: flex;
   flex-direction: column;
}

.l-vehicle-info .mortgage-info-wrapper > span {
  color: var(--primary-blue);
}

.l-vehicle-info .mortgage-info-wrapper > div > span:nth-child(2) {
 font-weight: 400;
 font-size: 13px;
 line-height: 18px;
 color: var(--content-caption);
}

.l-vehicle-info #checkup-list > ul >li{
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.l-vehicle-info .inspecnm-date-wrapper {
 display: flex;
 flex-direction: column;
}

.l-vehicle-info .inspecnm-date-wrapper > span:first-child {
 font-weight: 600;
 font-size: 15px;
 line-height: 22px;
 color: var(--content-main);
}

.l-vehicle-info .inspecnm-date-wrapper > span:last-child {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}

.l-vehicle-info .station-status-wrapper {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.l-vehicle-info .station-status-wrapper > span:first-child {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--primary-blue);
}

.l-vehicle-info .station-status-wrapper > span:last-child {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-caption);
}


.l-vehicle-info .tab__checkup .next {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
}

.l-vehicle-info .tab__checkup .next__title {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
}

.l-vehicle-info .tab__checkup .next__period {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--content-main);
}

.l-vehicle-info .tab__checkup .next__info {
  color: var(--content-disabled);
  font-size: 0.875rem;
}

.l-vehicle-info .tab__recall .tls td {
  white-space: normal;
}

.tls__tr--background-color {
  background-color: var(--bg-light-gray);
}

.l-vehicle-info .mortgage {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.l-vehicle-info .mortgage+.mortgage {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border-normal, #f1f4f6);
}

.l-vehicle-info .tax {
  margin-bottom: 2.5rem;
  padding: 0px 16px;
}

.l-vehicle-info .car-tax {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--content-sub);
  padding: 0 16px;
}

.l-vehicle-info .tax__info {
  padding-top: 0.375rem;
  color: var(--content-disabled);
  font-size: 0.875rem;
}

.l-vehicle-info .tax__amount {
  color: var(--primary-blue);
  font-family: Pretendard;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;

}

.l-vehicle-info .tax__amount em {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

.l-vehicle-info .period {
  padding: 4px 16px;
}

.l-vehicle-info .period__title {
  color: var(--content-main);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 4px;
}

.l-vehicle-info .period__contents--first-half,
.l-vehicle-info .period__contents--second-half {
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  color: var(--content-sub);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}


.l-vehicle-info .period-header {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--content-caption);    
    height: 36px;
}

.l-vehicle-info .period-header > div{
    display: flex;
    width: 100%;
    justify-content: flex-end
}

.l-vehicle-info .period-header > div:first-child{
    display: flex;
    justify-content: flex-start;

}

.l-vehicle-info .period-item {
   display: flex;
   justify-content: space-between;
   padding: 4px 0;
}

.l-vehicle-info .period-item > div{
  display: flex;
  width:100%;
  justify-content: flex-end
}

.l-vehicle-info .period-item > div:first-child{
  display: flex;

  justify-content: flex-start;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  
}

.l-vehicle-info .period-label {
  width: 60px;
  color: var(--content-sub);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}

.l-vehicle-info .tax-amount {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info .discount-rate {
  color: var(--primary-blue);
}

.l-vehicle-info .total-count {
  padding: 10px 16px 0px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.l-vehicle-info .total-count em {
 color: var(--primary-blue);
}

.l-vehicle-info .total-count strong {
 color: var(--content-sub);
}

.l-vehicle-info #mileage-summary-list{
 margin-bottom: 16px;
}

.l-vehicle-info .mileage-item {
 display:flex;
 justify-content: space-between;
 padding: 12px 16px 12px 16px;
}


.l-vehicle-info .date-type-wrapper {
 display: flex;
 flex-direction: column;
}

.l-vehicle-info .mileage-date {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info .mileage-type {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--content-caption);
}

.l-vehicle-info .amount-station-wrapper {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.l-vehicle-info .mileage-amount {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--content-main);
}

.l-vehicle-info .mileage-station{
 font-size: 13px;
 font-weight: 400;
 line-height: 18px;
 color: var(--content-caption);
}

.l-vehicle-info .accident-card-list {
 display:flex;
 padding: 8px 16px 8px 16px;
 gap: 8px;
 
}

.l-vehicle-info .accident-card-list > .card {
padding: 12px 16px 12px 16px;
  cursor: pointer;
}

.l-vehicle-info .accident-card-list > .card:hover {
  background-color: var(--gray-100);

}

.l-vehicle-info .accident-card-list > .card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--content-main);
}

.l-vehicle-info .accident-card-list > .card > div > span:first-child {
  color: var(--content-sub);
  font-size: 13px;
  line-height: 1.5;
}

.l-vehicle-info .accident-card-list > .card > div > span:last-child {
  font-weight: 600;
}

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


.l-vehicle-info #slide12 .tab__contents {
 margin-bottom: 72px;
}

@media only screen and (max-width: 960px) {
  .l-vehicle-info {
    display: block;
  }
  
  .l-vehicle-info .contents {
    padding: 0;
  }
  
  .l-vehicle-info .tab {
    padding: 0;
  }
  
  .l-vehicle-info .tab__head {
    display: none;
  }
  
  .l-vehicle-info .tab__contents {
    padding: 0px;
  } 
  
  .l-vehicle-info .tab__btn {
    position: sticky;
    display: flex;
    z-index: 1;
    bottom: 0;
    padding: 0 1rem 1rem;
  }
  
  .l-vehicle-info .tab__title {
   padding: 20px 0;
  }
  
  .l-vehicle-info .tab__title h4 {
   font-size: 20px;
   font-weight: 600;
   line-height: 30px;
  }
  
  .l-vehicle-info .tab__title strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    color: var(--content-main);
  }
  
  .l-vehicle-info .tab__title span .i-source {
    display: none;
  }

  .l-vehicle-info .chart__inner {
    height: auto;
    padding: 0 1rem 1rem;
  }
  
  .l-vehicle-info .short__list {
    display: none;
  }
  
  .l-vehicle-info .quick__list {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .l-vehicle-info .tab__accident .accident p {
    font-weight: 500;
  }
  
  .l-vehicle-info .tab__accident .accident .btn-accident-go {
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 1.375rem;
  }
  
  .l-vehicle-info .tab__accident .accident .btn-accident-go:after {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -0.3125rem;
    background-size: contain;
  }
  
  .l-vehicle-info .tab__specification .tvs th, .l-vehicle-info .tab__specification .tvs td {
    white-space: nowrap;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec01 {
    left: 22.81rem;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec02 {
    left: 29.38rem;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec03 {
    left: 46.56rem;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec04 {
    left: 18.25rem;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec05 {
    left: 45.75rem;
  }
  
  .l-vehicle-info .tab__specification .spec-img .spec06 {
    left: 63.5rem;
    bottom: 4.188rem;
  }
  .l-vehicle-info .tab__checkup .next--wrap {
    display: flex;
    flex-direction: column;
  }
  
}

@media only screen and (max-width: 767px) { 
  .l-vehicle-info .car-profile {
   flex-direction: column-reverse;
  }
  
  .l-vehicle-info .car-profile__container {
    width: 100%;
  }

  .l-vehicle-info .car-profile__brand {
    font-size: 14px;
    font-weight: 400;
    color: var(--content-caption);
  }
   
  .l-vehicle-info .car-profile__title {
    font-size: 20px;
  }
   
  .l-vehicle-info .car-profile__title__trim:after {
    vertical-align: -1rem;
   }
   
  .l-vehicle-info .car-spec {
     gap: 0;
   }
   
  .l-vehicle-info .car-spec__item {
     padding: 1rem 0;
   }
   
  .l-vehicle-info .car-spec__item span {
     padding-bottom: 0;
   }
   
  .l-vehicle-info .quick__item .nice-tag {
     display: none;
     right: auto;
     top: -0.625rem;
     left: 50%;
     padding: 0.1875rem 0.375rem;
     transform: translateX(-50%);
     background-color: var(--bg-white);
   }

  .l-vehicle-info .quick__label:after {
     content: none;
   }
 
  .l-vehicle-info .tab__mileage .car-spec {
     gap: 1.5rem;
     flex-direction: row;
  }
  
  .l-vehicle-info .tab__mileage .car-spec__item {
     flex-direction: column;
     justify-content: start;
  }
  
  .l-vehicle-info .tab__accident .accident p {
     font-size: 1rem;
     line-height: 1.4;
  }
  
  .l-vehicle-info .tab__accident .accident .btn-accident-go {
     padding: 1rem;
     font-size: 1.125rem;
  }
  
  .l-vehicle-info .tab__accident .accident .btn-accident-go:after {
     margin-left: 0.625rem;
  }
  
  .l-vehicle-info .tab__recall .tls td {
     white-space: nowrap;
  }
  
  .l-vehicle-info .mortgage {
     grid-template-columns: 1fr;
  }
  
  .l-vehicle-info .tax {
     padding-top: 0;
  }
  
  
  .l-vehicle-info .car-info > span{
     padding: 10px;
 }
 .l-vehicle-info .special-use-card-list > .desc-card   {
   padding: 14px;
   gap:0;
 }
}



/* mycarSample */

.l-vehicle-info-sample .text-btn {
 font-size: 14px;
}

.l-vehicle-info #sidebar,
.l-vehicle-info #sidebar,
.l-vehicle-info-sample #sidebar,
.l-vehicle-info-sample #sidebar {
 padding: 0 16px;
}

.l-vehicle-info-sample #sidebar,
.l-vehicle-info-sample #sidebar {
 top: 118px;
}

@media only screen and (max-width: 767px) {
 .l-vehicle-info #sidebar,
 .l-vehicle-info #sidebar,
 .l-vehicle-info-sample #sidebar,
 .l-vehicle-info-sample #sidebar {
  padding: 0;
 }
  .l-vehicle-info-sample #sidebar,
  .l-vehicle-info-sample #sidebar {
  top: 96px;
}

}

/* 상품용 차량 */
 
.l-vehicle-info .tab__title {
    display: flex;
    align-items: center;
    justify-content: normal;
    gap:4px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    padding: 8px 16px;
    color: var(--content-main); 
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 16px 4px 16px;  


}

.l-vehicle-info .car-profile {
 padding-bottom: 12px;
}

.l-vehicle-info .sale-car-info {
 padding:0 16px;
}

.l-vehicle-info .car-number-select {
 cursor: pointer;
}

.l-vehicle-info .car-number-select:hover {
 background-color: transparent;
}

.l-vehicle-info .sale-car-info__item {
 padding:10px 12px;
 background-color: var(--bg-light-gray);
 color: var(--content-sub);
 border-radius: 8px;
 font-weight: 500;
 font-size: 14px;
 line-height: 1.5;
 margin: 8px 0;
 
}

.l-vehicle-info .sale-car-info__item > span{
 font-family: Pretendard;
 font-weight: 600;
 font-size: 13px;
 line-height: 20px;
 letter-spacing: 0px;  
}

.l-vehicle-info .vehicle-card__history {
 padding: 12px 16px;
}

.l-vehicle-info .market-price .car-spec__item {
    width: 100%;
    background-color: var(--bg-light-gray);
    padding: 20px;
    border-radius: 12px;
    margin: 14px 0;
}

.l-vehicle-info .taxHead2 .car-spec__item{
   background-color: var(--bg-light-gray);
   border-radius: 12px;
}

.l-vehicle-info .tax {
 margin-bottom: 0;
}

.l-vehicle-info .vehicle-card__history .vehicle-card__history-list{
   display: flex;
   flex-direction: column;
   gap: 4px;
   border-radius: 12px;
   padding: 12px;
   background-color: var(--bg-light-gray);
}

.l-vehicle-info .vehicle-card__history .vehicle-card__history-list .vehicle-card__history-item{
  border-radius: 10px;
  padding: 0;
  color: var(--content-sub);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  align-items: center;
}

.l-vehicle-info .vehicle-card__history-item:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url(/images/icon/c_check_gray.svg) no-repeat center;
  margin-right: 4px;
  background-size : contain;
}

.l-vehicle-info .info-main-wrapper .info__content .info-line{
  padding: 4px 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  color: var(--content-sub)
}

.l-vehicle-info .info-main-wrapper {
  margin-top: 32px;
}

.l-vehicle-info .info-main-wrapper .info__content {
  padding: 16px 0;
}

.l-vehicle-info .info-wrapper .info-wrapper--desc {
 padding:  14px;
 font-size: 14px;
 line-height: 1.5;
 color: var(--content-caption);
}


.l-vehicle-info .desc-box {
  padding: 16px;
}

.l-vehicle-info .desc {
  padding: 16px;
  border-radius: 12px;
  background-color: var(--bg-light-gray);
}

.l-vehicle-info .desc .desc-list > ul{
  margin-top : 8px;
  display: flex;
  flex-direction: column;

}

.l-vehicle-info .desc .desc-list > ul > li{
 padding: 2px 0;
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 display: flex;
 justify-content: space-between;
 color: var(--content-main);
}

.l-vehicle-info #c-tip-detail-model-pirce {
 display: flex;
 align-items: center;
 gap:4px;
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 color: var(--content-main);
}

.l-vehicle-info .car-spec__mileage-info {
 display: flex;
 gap: 8px;
}

.l-vehicle-info .car-spec__mileage-info > .car-spec__item {
 width: 100%;
 background-color: var(--bg-light-gray);
 padding: 20px;
 border-radius: 12px;
}

.l-vehicle-info .car-spec__mileage-info > .car-spec__item > span{
 text-align: left
}

.l-vehicle-info .car-spec__mileage-info > .car-spec__item > strong{
 font-weight: 600;
 font-size: 20px;
 line-height: 30px;
 width: 100%;
}

.l-vehicle-info .predicted-mileage-period {
 gap:8px;
}

.l-vehicle-info .predicted-mileage-period > .car-spec__item {
 width: 100%;
 background-color: var(--gray-100);
 padding: 20px;
 border-radius: 8px;
}

.l-vehicle-info .mileage-item  {
 display: flex;
 justify-content: space-between;
}

.l-vehicle-info .mileage-item .date-type-wrapper  {
  width: 160px;
  font-family: Pretendard;
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0px; 
}

.l-vehicle-info .date-type-wrapper > .mileage-date  {

 font-weight: 600;
 font-size: 15px;
 line-height: 22px;
}

.l-vehicle-info .mileage-type  {
  text-align: left;
}

.l-vehicle-info .sub-desc {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 vertical-align: middle;
 color: var(--content-sub);
 padding: 0 16px;
 display: flex;
}

.l-vehicle-info .stat-cards-wrapper {
  padding: 4px 16px;
  display: flex;
  gap: 8px;
}

.l-vehicle-info .stat-card {
  border-radius: 12px;
  padding: 20px;
  background-color: var(--bg-light-gray);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
 
}

.l-vehicle-info .stat-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--content-sub);
}

.l-vehicle-info .stat-label > button{
  display: flex;
  gap:4px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--content-sub);
}

.l-vehicle-info .stat-value {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  vertical-align: middle;
  color: var(--content-main);
}

.l-vehicle-info .repair-year-header {
  padding: 10px 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 8px;
     
}
.l-vehicle-info .repair-year-header img {
 transition: transform 0.2s ease;
}

.l-vehicle-info .repair-year-header img.rotated {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.l-vehicle-info .repair-year-header:hover {
 background-color: var(--gray-100);
}

.l-vehicle-info .accident-year {
 display: flex;
 align-items: center;
 gap:4px;
}

.l-vehicle-info .year-label {
 color: var(--content-main)
}

.l-vehicle-info .year-summary {
 display: flex;
 gap:5px;
 align-items: center;
}

.l-vehicle-info .year-summary span:first-child {
  font-family: Pretendard;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--content-sub)
}

.l-vehicle-info .year-summary span:nth-child(2) {
 font-family: Pretendard;
 font-weight: 600;
 font-size: 14px;
 line-height: 20px;
 color: var(--primary-blue);
}

.l-vehicle-info .year-summary img {
 transform: rotate(90deg)
}

.l-vehicle-info .repair-info {
 display: flex;
 flex-direction: row;
}

.l-vehicle-info .repair-date {
 width: 90px;
}

.l-vehicle-info .repair-date > span{
 line-height: 22px;
}

.l-vehicle-info .repair-detail-meta {
 display: flex;
 align-items: center;
 gap:6px;
}

.l-vehicle-info .maintenance-status-card--wrap {
 padding: 0 16px;
 display: flex;
 flex-direction: column;
 gap:12px;
 margin-top: 12px;
 margin-bottom: 12px;
}

.l-insuranceAccidentDetail .card-line,
.l-vehicle-info .card-line {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.l-vehicle-info .maintenance-status-card {
 background-color: var(--bg-light-gray);
 padding: 16px 20px 20px;
 display: flex;
 flex-direction: column;
 gap:8px;
 border-radius: 12px;
 width: 100%;
}

.l-vehicle-info .maintenance-status-card > .status-header {
  display: flex;
  align-items: center;
  color: var(--content-main);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
}

.l-vehicle-info .progress-bar {
 height: 10px;
 width: 100%;
}

.l-vehicle-info .status-progress > .progress-track{
  border-radius: 4px;
  height: 8px;
  background-color: var(--gray-200);
  position: relative;
  overflow: hidden;
}

.l-vehicle-info .status-footer {
 display: flex;
 justify-content: space-between;
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 color: var(--content-main);
}

.l-insuranceAccidentDetail .record--wrap,
.l-vehicle-info .record--wrap {
 padding: 0 16px;
 display: flex;
 flex-direction: column;
 gap:12px;
 margin-top: 12px;
 margin-bottom: 8px;
}

.l-insuranceAccidentDetail .desc-card,
.l-vehicle-info .desc-card {
 padding: 20px;
 background-color: var(--bg-light-gray);
 display: flex;
 flex-direction: column;
 gap:4px;
 color: var(--content-sub);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 border-radius: 12px;
 align-items: baseline;
}

.l-vehicle-info .desc-card > .desc-img--wrap {
 display: flex;
 align-items: center;
}

.l-insuranceAccidentDetail .desc-card .cnt,
.l-vehicle-info .desc-card .cnt{
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--content-main);
}

.l-vehicle-info .date-drop-wrapper {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.l-vehicle-info .date-number--wrap {
 display: flex;
 flex-direction: column;
 gap:4px;
}
.l-vehicle-info .car-drop-number {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-sub); 
}

.l-vehicle-info .advanced-safety__content{
  padding: 0 16px;
  margin-top: 8px;
}

.l-vehicle-info .advanced-safety-card {
  padding: 14px;
  background-color: var(--gray-100);
  display: flex;
  gap:10px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.l-vehicle-info .advanced-safety-card__item--wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.l-vehicle-info .advanced-safety-card__item {
 display: flex;
 height: 30px;
 padding: 2px 4px;
 align-items: center;
 font-weight: 500;
 font-size: 13px;
 line-height: 20px;
 color: var(--content-sub);
 gap:10px;
}

.l-vehicle-info .advanced-safety-card__icon.installed:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/circle.svg) no-repeat center;
}

.l-vehicle-info .advanced-safety-card__icon.no-installed:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/dash.svg) no-repeat center;
}

.l-vehicle-info .advanced-safety-card__icon.optional:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/triangle.svg) no-repeat center;
}

.l-vehicle-info .advanced-safety-card__icon.unavailable:before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url(/images/saleCar/cross.svg) no-repeat center;
}

.l-insuranceAccidentDetail .advanced-safety__list,
.l-vehicle-info .advanced-safety__list {
  padding: 0 16px;
  margin-bottom: 20px;
}

.l-insuranceAccidentDetail .advanced-safety__row,
.l-vehicle-info .advanced-safety__row {
 height: 30px;
 display: flex;
 gap: 10px;
}

.l-insuranceAccidentDetail .advanced-safety__row:first-child > .advanced-safety__cell,
.l-vehicle-info .advanced-safety__row:first-child > .advanced-safety__cell{
  border-top :1px solid var(--border-outline);
}

.l-vehicle-info .advanced-safety__cell {
 width: 100%;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 1px solid var(--border-outline);
 display: flex;
 align-items: center;
 gap:10px;
}

.l-insuranceAccidentDetail .feature__name,
.l-vehicle-info .feature__name {
 font-weight: 500;
 font-size: 14px;
 line-height: 22px;
 color: var(--content-sub);
}

.l-vehicle-info .info-divider {
 height: 1px;
 background-color: var(--gray-100);
 width: 100%;
 margin: 10px 0;
}

.l-vehicle-info .chart-title {
 padding:0 16px;
 font-weight: 500;
 font-size: 13px;
 line-height: 22px;
 color: var(--content-sub);
 width: 100%;
 margin: 24px 0;
 display: flex; 
}

.l-vehicle-info .tab__checkup .next {
 background-color: var(--bg-light-gray);
 border-radius: 12px;
 display: flex;
 padding: 20px 16px;
 margin-top: 10px;
}

.l-vehicle-info .tab__checkup .next__period {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}


.l-insuranceAccidentDetail .contents  .list-box,
.l-vehicle-info .contents .list-box{
    padding: 0 16px;
}


.l-insuranceAccidentDetail .contents .list,
.l-vehicle-info .contents .list{
    background: var(--bg-light-gray);
    padding: 24px 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    font-size: 13px;
}


.l-insuranceAccidentDetail .contents .list dl:not(:last-child),
.l-vehicle-info .contents .list dl:not(:last-child) {
    margin-bottom: 26px;
}

.l-insuranceAccidentDetail .contents .list-middot dt, .l-insuranceAccidentDetail .contents .list dd,
.l-vehicle-info .contents .list-middot dt, .l-vehicle-info .contents .list dd{
    color: var(--content-sub);
}

.l-insuranceAccidentDetail .contents .list-middot dt,
.l-vehicle-info .contents .list-middot dt {
    font-weight: 600;
    margin-bottom: 8px;
}

.l-insuranceAccidentDetail .contents .list-middot dd>span,
.l-vehicle-info .contents .list-middot dd>span {
    padding-left: 24px;
    line-height: 1.5;
}

.l-insuranceAccidentDetail .contents .list-middot dd>span:before,
.l-vehicle-info .contents .list-middot dd>span:before {
    left: 0px;
}


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

.modal-mycar-update  .c-cols__content--info > dl > dt {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    color: var(--content-sub);
}

.modal-mycar-update .c-cols__content--info > dl > dd {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--content-caption);
}

.modal-mycar-update .list-middot dd>span {
    padding-left: 20px;
    line-height: 1.5;
}

.modal-mycar-update  .list-middot dd>span:before {
    left: 0px;
}


@media only screen and (max-width: 768px) {
    .l-vehicle-info .contents .list {
        border-radius: 0;
    }
    
    .l-insuranceAccidentDetail .contents  .list-box,
    .l-vehicle-info .contents .list-box{
        padding: 0;
    }
    
 
}