@charset "utf-8";
.main-section .main-tit-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.main-section .main-tit-wrap h2 {word-break: keep-all; text-align: center; font-weight: 700; font-family: 'Hana2', sans-serif !important; font-size: 1.5rem; color: #0D2240;}
.main-section .main-tit-wrap h2 img {width: 18rem;}
.main-section .main-tit-wrap h2 strong {font-weight: 700; font-family: 'Hana2', sans-serif !important; color: #009178;}
.main-section .main-tit-wrap p {text-align: center; word-break: keep-all; font-size: 1rem; color: #414141;}
.main-section .inner {display: flex; flex-direction: column; row-gap: 50px;}
.main-section .alert-box {background-color: #fff; border-radius: 20px; border: 1px solid #e2e2e2; padding: 30px;}
.main-section .alert-box .alert-tit {display: flex; align-items: center; column-gap: 10px; margin-bottom: 20px;}
.main-section .alert-box p {font-size: 1.25rem; font-weight: 700; color: #525252;}
.main-section .alert-box li {word-break: keep-all; font-size: 0.938rem; line-height: 1.75; color: #7E7E7E;}
.main-section .alert-box li table.pc {max-width: 460px;}
.main-section .alert-box li table.mo {display: none;}
/* 메인배너 */
.hero-section {padding-top: 60px;}
.hero-section .main-banner-swiper {width: 100%; height: clamp(510px,35vw,680px); border-radius: 20px; overflow: hidden;}
.hero-section .main-banner-swiper .swiper-slide {align-content: center; padding: 60px 50px; background-repeat: no-repeat; background-size: cover; background-position: center center;}
/* 텍스트 스타일 (이미지 기반) */
.hero-section .txt-wrap {display: flex; flex-direction: column; row-gap: 30px; color: #fff;}
.hero-section .txt-wrap .sub-tit { font-size: 1rem; font-weight: 500;}
.hero-section .txt-wrap .tit-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.hero-section .txt-wrap .main-tit { font-size: 2rem; font-weight: 700; }
.hero-section .txt-wrap .main-tit strong { font-weight: 800; }
.hero-section .main-banner-swiper .banner-ctrl {position: absolute; bottom: 60px; left: 50px; z-index: 10; display: flex; align-items: center; gap: 10px;}
.hero-section .main-banner-swiper .banner-ctrl .btn-prev,
.hero-section .main-banner-swiper .banner-ctrl .btn-next {display: flex; align-items: center; justify-content: center;}
.hero-section .main-banner-swiper .banner-ctrl .fraction {font-size: 0.938rem; color: #fff;}

/* 불렛형 pagination */
.hero-section .swiper-pagination { position: static; width: auto; }
.hero-section .swiper-pagination-bullet { background: #fff; opacity: 0.5; width: 10px; height: 10px; }
.hero-section .swiper-pagination-bullet-active { opacity: 1; background: #fff; width: 30px; border-radius: 5px; }

/* 네비게이션 & 숫자형 fraction */
.swiper-navigation { display: flex; align-items: center; background: rgba(0,0,0,0.3); border-radius: 30px; padding: 5px 15px; color: #fff; }
.swiper-navigation button { background: none; border: none; color: #fff; cursor: pointer; font-size: 20px; padding: 0 10px; }
.swiper-navigation .fraction { font-size: 14px; min-width: 40px; text-align: center; }

/* jhauto solution X 하나캐피탈 26년 판매 순위 차량 */
.main-section01 {padding-block: 60px 100px;}
.main-section01 .inner {row-gap: 80px;}
.main-section01 .car-list-box {display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 40px;}
.main-section01 .car-list-box .car-list {position: relative; width: calc(100% / 4 - (24px * 3) / 4); border-radius: 20px; border: 1px solid #E5E5E5;}
.main-section01 .car-list-box .car-list .label {position: absolute; top: 20px; left: 20px;}
.main-section01 .car-list-box .car-list .img-wrap {width: 100%; height: 280px; position: relative;}
.main-section01 .car-list-box .car-list .img-wrap img {width: 100%; height: 100%; object-fit: contain;}
.main-section01 .car-list-box .car-list .img-wrap p {position: absolute; right: 20px; bottom: 20px; font-size: 0.75rem; color: #7E7E7E;}
.main-section01 .car-list-box .car-list .cont-wrap {padding: 20px; display: flex; flex-direction: column; row-gap: 20px;}
.main-section01 .car-list-box .car-list .txt-wrap strong {font-size: 1.125rem; font-weight: 500;}
.main-section01 .car-list-box .car-list .txt-wrap p {font-size: 0.875rem; color: #7E7E7E; margin-top: 4px;}
.main-section01 .car-list-box .car-list .price-wrap {padding: 10px; border-radius: 10px;}
.main-section01 .car-list-box .car-list .price-wrap .month-price {display: flex; align-items: center; justify-content: space-between;}
.main-section01 .car-list-box .car-list .price-wrap .month-price span {font-size: 0.938rem; font-weight: 500; color: #575757;}
.main-section01 .car-list-box .car-list .price-wrap .month-price strong {font-size: 1.5rem; font-weight: 700; color: #DC231E;}
.main-section01 .car-list-box .car-list .price-wrap .month-price strong i {font-size: 0.75rem; font-weight: 400;}
.main-section01 .car-list-box .car-list .price-wrap p {text-align: right; font-size: 0.75rem; color: #7E7E7E;}
.main-section01 .car-list-box .car-list .detail-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.main-section01 .car-list-box .car-list .detail-wrap .square-btn {width: 100%;}
.main-section01 .car-list-box .car-list .detail-wrap .rent-info {display: flex; align-items: center; justify-content: center; column-gap: 4px;}
.main-section01 .car-list-box .car-list .detail-wrap .rent-info li {font-size: 0.75rem; color: #676767; letter-spacing: -1px;}
.main-section01 .car-list-box .car-list .detail-wrap .rent-info .line {width: 1px; height: 10px; background-color: #676767;}
.main-section01 .more-car {border-radius: 20px; padding: 45px 50px; position: relative;}
.main-section01 .more-car .left {display: flex; flex-direction: column; row-gap: 20px;}
.main-section01 .more-car .left p {font-size: 1.5rem; font-weight: 700; color: #fff;}
.main-section01 .more-car .right {position: absolute; bottom: 0; right: 50px;} 
/* 상품안내 */
/* .main-section02 {padding-top: 60px;}
.main-section02 .info-box {display: flex; align-items: center; column-gap: 24px;}
.main-section02 .info-box .line {flex: 1; height: 1px; background-color: #D4D4D4;}
.main-section02 .info-box .info-card {border-radius: 50%; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 16px; width: clamp(240px,20vw,300px); height: clamp(240px,20vw,300px);}
.main-section02 .info-box .info-card span {font-size: 1.5rem; font-weight: 700;}
.main-section02 .info-box .info-card p {font-size: 1rem; font-weight: 500; color: #404040; text-align: center;}
.main-section02 .info-box .info-card.card01 {border-color: #009178; background-color: #E6F4F2;}
.main-section02 .info-box .info-card.card01 span {color: #009178;}
.main-section02 .info-box .info-card.card02 {width: clamp(300px,25vw,360px); height: clamp(300px,25vw,360px); background-color: #009178;}
.main-section02 .info-box .info-card.card02 p,
.main-section02 .info-box .info-card.card02 span {color: #fff;}
.main-section02 .info-box .info-card.card03 {border-color: #DAA800; background-color: #FFF9E5;}
.main-section02 .info-box .info-card.card03 span {color: #DAA800;} */
/* 계약절차 */
/* .main-section03 {padding-block: 60px;}
.main-section03 .step-box {display: flex; align-items: center; column-gap: 10px; background-color: #fff; border-radius: 20px; border: 1px solid #009178; padding: 30px;}
.main-section03 .step-box > div {flex: 1; display: flex; flex-direction: column; align-items: center; row-gap: 20px;}
.main-section03 .step-box > div .ico-wrap {width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.main-section03 .step-box > div .txt-wrap {display: flex; flex-direction: column; row-gap: 14px; align-items: center;}
.main-section03 .step-box > div .txt-wrap strong {font-size: 1.25rem; font-weight: 700; color: #DC231E;}
.main-section03 .step-box > div .txt-wrap span {font-size: 1.25rem; font-weight: 500; color: #000;}
.main-section03 .step-box > div .txt-wrap p { word-break: keep-all; font-size: 0.938rem; font-weight: 500; color: #5c5c5c; text-align: center;} */
/* 장기렌터카 이런분께 추천 드립니다! */
.main-section02 {padding-block: 80px;}
.main-section02 .recommend-box {margin-inline: auto; display: flex; flex-wrap: wrap; gap: 24px;}
.main-section02 .recommend-box .recommend-card {width: calc(100% / 4 - (24px * 3)/ 4); height: clamp(260px,19vw,360px); padding: 24px; border-radius: 20px; display: flex; flex-direction: column; row-gap: 1.25rem; align-items: center; justify-content: center;} 
.main-section02 .recommend-box .recommend-card .img-wrap {width: 120px; height: 120px;}
.main-section02 .recommend-box .recommend-card .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.main-section02 .recommend-box .recommend-card .txt-wrap {display: flex; flex-direction: column; row-gap: 8px; align-items: center;}
.main-section02 .recommend-box .recommend-card .txt-wrap span {text-align: center; font-size: 1rem; color: #009178; font-weight: 700;}
.main-section02 .recommend-box .recommend-card .txt-wrap p {word-break: keep-all; font-size: 0.875rem; color: #4C4C4C; font-weight: 500; text-align: center;}

@media screen and (max-width: 1440px) {
  .main-section01 .car-list-box .car-list .img-wrap {height: 210px;}
}

@media screen and (max-width: 1280px) {
  .main-section01 .car-list-box .car-list {width: calc(100% / 3 - (24px * 2) / 3);}
  .main-section02 .recommend-box .recommend-card {width: calc(100% / 3 - (24px * 2) / 3);}
}

@media screen and (max-width: 1024px) {
  .hero-section {padding-top: 24px;}
  .hero-section .main-banner-swiper .swiper-slide {padding: 50px 40px;}
  .hero-section .main-banner-swiper .banner-ctrl {bottom: 50px; left: 40px;}
  .hero-section .txt-wrap .main-tit {font-size: 1.5rem;}
  .main-section .alert-box,
  .main-section03 .step-box,
  .main-section02 .recommend-box .recommend-card {padding: 24px;}
  .main-section01 .car-list-box .car-list .cont-wrap {padding: 16px;}
  .main-section01 .car-list-box .car-list .label {top: 16px; left: 16px;}
  .main-section01 .car-list-box .car-list .img-wrap p {right: 16px; bottom: 16px;}
  .main-section01 .more-car {padding: 35px 40px;}
  .main-section02 .info-box {justify-content: center;}
  .main-section02 .info-box .line {display: none;}
  .main-section03 .step-box {flex-wrap: wrap; gap: 20px;}
  .main-section03 .step-box > div {width: calc(50% - 12px); flex: unset;}
  .main-section03 .step-box > svg {display: none;}
}

@media screen and (max-width: 930px) {
  .main-section01 .car-list-box .car-list {width: calc(100% / 2 - 24px / 2);}
  .main-section02 .info-box {column-gap: 0;}
  .main-section02 .info-box .info-card {flex-shrink: 0;}
  .main-section02 .info-box .info-card,
  .main-section02 .info-box .info-card.card02 {width: 33vw; height: 33vw;}
  .main-section02 .info-box .info-card.card01 {background-color: #E6F4F266;}
  .main-section02 .info-box .info-card.card02 {margin-inline: -5vw; background-color: #00917899;}
  .main-section02 .info-box .info-card.card03 {background-color: #fff9e566;}
  .main-section02 .recommend-box .recommend-card {width: calc(50% - 12px);}
}

@media screen and (max-width: 768px) {
  .hero-section .main-banner-swiper {height: calc(100vw - 48px);}
  .hero-section .main-banner-swiper .main-banner-slide01 {background-image: url("/img/main/main-banner01-mo.webp") !important;}
  .hero-section .main-banner-swiper .main-banner-slide02 {background-image: url("/img/main/main-banner02-mo.webp") !important;}
  .hero-section .main-banner-swiper .swiper-slide {padding: 40px 30px;}
  .hero-section .main-banner-swiper .banner-ctrl {bottom: 40px; left: 30px;}
  .hero-section .main-banner-swiper .swiper-slide {align-content: unset;}
  .main-section .alert-box,
  .main-section03 .step-box,
  .main-section02 .recommend-box .recommend-card {padding: 20px;}
  .main-section01 .more-car {padding: 25px 30px;}
  .main-section01 .more-car .left {align-items: center;}
  .main-section01 .more-car .right {display: none;}
  .main-section02 .info-box {flex-direction: column;}
  .main-section02 .info-box .info-card,
  .main-section02 .info-box .info-card.card02 {width: clamp(240px,80vw,300px); height: clamp(240px,80vw,300px);}
  .main-section02 .info-box .info-card.card02 {margin-inline: unset; margin-block: -8vw;}
  .main-section03 .step-box {gap: 16px;}
  .main-section03 .step-box > div {width: calc(50% - 8px);}
  .main-section03 .step-box > div .txt-wrap {row-gap: 10px;}
}

@media screen and (max-width: 600px) {
  .main-section .alert-box li table.pc {display: none;}
  .main-section .alert-box li table.mo {display: table;}
  .main-section01 .car-list-box .car-list {width: 100%;}
  .main-section02 .recommend-box {row-gap: 20px;}
  .main-section02 .recommend-box .recommend-card {width: 100%;}
  .main-section02 .recommend-box .recommend-card {justify-content: flex-start;}
  .main-section01 .more-car {padding: 20px 24px;}
}

@media screen and (max-width: 480px) {
  .hero-section .main-banner-swiper {height: calc(100vw - 32px);}
  .hero-section .main-banner-swiper .swiper-slide {padding: 30px 20px;}
  .hero-section .main-banner-swiper .banner-ctrl {bottom: 30px; left: 20px;}
  .hero-section .txt-wrap .main-tit {font-size: clamp(1rem,5vw,1.5rem);}
  .hero-section .txt-wrap .square-btn {display: none;}
  .main-section03 .step-box {row-gap: 20px;}
  .main-section03 .step-box > div {width: 100%;}
  .main-section .main-tit-wrap h2 img {width: 16rem;}
  .main-section .main-tit-wrap h2 {font-size: clamp(1.2rem,5vw,1.5rem);}
  .main-section .main-tit-wrap p {font-size: 0.938rem;}
  .main-section01 .more-car {padding: 16px 20px;}
  .main-section01 .more-car .left p {font-size: 1.3rem;}
}

@media screen and (max-width: 375px) {
  .hero-section .txt-wrap .sub-tit {font-size: 0.875rem;}
  .main-section .main-tit-wrap h2 img {width: 15rem;}
  .main-section .main-tit-wrap h2 {font-size: 1.1rem;}
  .main-section .main-tit-wrap p {font-size: 0.875rem;}
}

/* ── 장기렌트/리스 장점 ── */
.main-section-merit {padding-block: 60px 80px;}
.main-section-merit .inner {row-gap: 40px;}

.merit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.merit-card {
    width: calc(25% - 18px); /* 4열: (gap 24px * 3) / 4 */
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.merit-card:hover {
    box-shadow: 0 8px 28px rgba(0, 145, 120, 0.12);
    transform: translateY(-4px);
}

.merit-ico {
    flex-shrink: 0;
}

.merit-txt {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merit-txt strong {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0D2240;
    font-family: 'Hana2', sans-serif;
    word-break: keep-all;
}

.merit-txt strong em {
    font-style: normal;
    color: #009178;
}

.merit-txt p {
    font-size: 0.875rem;
    color: #7E7E7E;
    line-height: 1.7;
    word-break: keep-all;
}

/* 구분선 */
.merit-section-divider {
    width: 40px;
    height: 3px;
    background: #009178;
    border-radius: 2px;
    margin-top: 4px;
}

/* ── 웹툰 섹션 ── */
.main-section-toon {padding-block: 60px 100px;}
.main-section-toon .inner {row-gap: 40px;}

.toon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 900px;
    margin-inline: auto;
}

.toon-item {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E5E5E5;
    background: #fafafa;
}

.toon-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ── 반응형 ── */
@media screen and (max-width: 1280px) {
    .merit-card {width: calc(25% - 18px);}
}

@media screen and (max-width: 1024px) {
    .merit-card {width: calc(50% - 12px);}
}

@media screen and (max-width: 768px) {
    .main-section-merit {padding-block: 50px 60px;}
    .merit-card {width: calc(50% - 12px); padding: 24px 20px;}
    .toon-grid {gap: 12px;}
    .main-section-toon {padding-block: 50px 60px;}
}

@media screen and (max-width: 600px) {
    .merit-card {width: 100%;}
    .merit-card:hover {transform: none;}
}

@media screen and (max-width: 600px) {
    .toon-grid {grid-template-columns: 1fr; gap: 12px; max-width: 480px;}
    .toon-item {border-radius: 12px;}
}