/* HOME1016p — 첫 화면을 «관문» 으로: 배너 슬라이드 · 큰 타일 · 둥근 바로가기 · 가로로 밀리는 줄 (롯데렌터카 모바일 참고) */
@import url("/assets/vthumb.1016p.css");
.hm-sec{margin-top:30px}
.hm-h{font-size:23px;font-weight:900;letter-spacing:-.02em;margin:0}
.hm-sub{margin:4px 0 0;font-size:15px;color:var(--muted)}
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.hm-head .hm-sub{margin-top:2px}
.hm-more{flex:none;font-size:15px;font-weight:800;color:var(--blue-d);text-decoration:none;white-space:nowrap;padding:10px 0 4px}
.hm-more i{font-style:normal;margin-left:2px}
.hm-more:hover{text-decoration:underline}
.hm-sec>.hm-h+.hm-sub{margin-bottom:14px}

/* ── 배너 ── */
.hm-ban{max-width:1200px;margin:14px auto 0;padding:0 16px}
.hm-ban-vp{position:relative;border-radius:22px;overflow:hidden;background:var(--navy);box-shadow:0 8px 24px rgba(11,31,58,.18)}
.hm-ban-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline:0}
.hm-ban-track::-webkit-scrollbar{display:none}
.hm-sl{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:flex-start;min-height:244px;padding:22px 20px 60px;color:#fff;text-decoration:none;overflow:hidden}
.hm-sl.s1{background:radial-gradient(120% 110% at 88% 100%,#2b5a99 0%,#0b1f3a 62%)}
.hm-sl.s2{background:linear-gradient(150deg,#2a6cf0 0%,#164aae 70%)}
.hm-sl.s3{background:radial-gradient(120% 110% at 88% 100%,#1f6d63 0%,#0e2f3d 64%)}
.hm-sl .k{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.02em;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 12px;margin-bottom:12px}
.hm-sl .t{display:block;font-size:26px;line-height:1.28;font-weight:900;letter-spacing:-.025em;max-width:68%}
.hm-sl .t em{font-style:normal;color:#ffd34d}
.hm-sl .s{display:block;font-size:15px;line-height:1.5;color:#dbe6f8;margin-top:10px;max-width:64%}
.hm-sl .go{display:inline-flex;align-items:center;margin-top:14px;min-height:40px;padding:0 16px;border-radius:999px;background:#ffd34d;color:#0b1f3a;font-size:15px;font-weight:900}
.hm-sl .go::after{content:"›";margin-left:6px;font-size:20px;line-height:1}
.hm-sl .art{position:absolute;right:-8px;bottom:44px;width:158px;height:128px;opacity:.98;pointer-events:none}
.hm-sl:focus-visible{outline-offset:-4px}
.hm-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 10px 18px;pointer-events:none}
.hm-ctl>*{pointer-events:auto}
.hm-dots{display:flex;gap:0}
.hm-dots button{position:relative;width:26px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.hm-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .25s,margin .25s,background .25s}
.hm-dots button.on::before{width:22px;margin-left:-11px;border-radius:6px;background:#ffd34d}
.hm-nav{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.34);border-radius:999px;padding:2px 4px}
.hm-nav button{width:36px;height:36px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hm-nav button:hover{background:rgba(255,255,255,.18)}
.hm-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hm-nav .hm-pp .i-play{display:none;fill:currentColor;stroke:none}
.hm-nav .hm-pp[aria-pressed="true"] .i-play{display:block}
.hm-nav .hm-pp[aria-pressed="true"] .i-pause{display:none}
.hm-cnt{min-width:44px;text-align:center;color:#fff;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.hm-cnt b{font-weight:900}

/* ── 큰 타일 2x2 ── */
.hm-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm-tiles li{min-width:0}
.hm-tiles a{position:relative;display:flex;flex-direction:column;height:100%;min-height:172px;padding:16px 14px 12px;border-radius:22px;text-decoration:none;color:var(--navy);overflow:hidden;border:1px solid rgba(11,31,58,.06);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.hm-tiles a:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12)}
.hm-tiles b{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.25}
.hm-tiles a>span{display:block;font-size:15px;line-height:1.4;color:#475569;margin-top:4px;max-width:92%}
.hm-tiles .art{position:absolute;right:-6px;bottom:-2px;width:116px;height:94px}
.hm-tiles .t-used a{background:linear-gradient(155deg,#f2f7ff 0%,#dbe7fd 100%)}
.hm-tiles .t-rent a{background:radial-gradient(120% 90% at 85% 100%,#24497f 0%,#0b1f3a 62%);color:#fff}
.hm-tiles .t-rent a>span{color:#c7d6f0}
.hm-tiles .t-care a{background:linear-gradient(155deg,#f1fbf6 0%,#d6f1e3 100%)}
.hm-tiles .t-li a{background:linear-gradient(155deg,#fffaf0 0%,#ffefc9 100%)}

/* ── 둥근 바로가기 ── */
.hm-ico{list-style:none;margin:0 -16px;padding:2px 16px 6px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hm-ico::-webkit-scrollbar{display:none}
.hm-ico li{flex:0 0 auto}
.hm-ico a{display:flex;flex-direction:column;align-items:center;gap:7px;width:80px;padding:4px 0;text-decoration:none;color:var(--navy)}
.hm-ico .ci{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:var(--blue-l);border:1px solid #d3e1fb;transition:transform .3s,background .2s}
.hm-ico svg{width:30px;height:30px;fill:none;stroke:var(--blue-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-ico a:hover .ci{transform:translateY(-3px);background:#d9e7fd}
.hm-ico .cl{font-size:15px;font-weight:800;line-height:1.25;text-align:center;letter-spacing:-.03em;white-space:nowrap}

/* ── 가로로 밀리는 줄 ── */
.hm-railw{position:relative}
.hm-rail{list-style:none;margin:0 -16px;padding:2px 16px 14px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;outline:0}
.hm-rail::-webkit-scrollbar{display:none}
.hm-rail>li{flex:0 0 78%;max-width:300px;min-width:0;scroll-snap-align:start}
.hm-cards>.card{height:auto}
.hm-cards .card-a{height:100%}
.hm-cards .c-all{background:linear-gradient(155deg,#f2f7ff 0%,#dbe7fd 100%)}
.hm-cards .c-all .card-a{display:flex}
.hm-cards .ca-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:300px;padding:20px;text-align:center;color:var(--navy)}
.hm-cards .ca-in svg{width:150px;height:122px}
.hm-cards .ca-in b{font-size:20px;font-weight:900}
.hm-cards .ca-in span{font-size:15px;color:var(--muted)}
.hm-cards .ca-in em{font-style:normal;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:20px;margin-top:6px}
.hm-vids>li{max-width:300px}
.hm-vids .vcard{height:100%}
.hm-vids .vcard b{font-size:16px}
.hm-arr{display:none}

/* ── 연락 띠 ── */
.hm-sec.visit{margin-top:34px;padding-bottom:20px;background:var(--soft);border-radius:22px;padding:24px 16px 24px}
.hm-sec.visit h2{font-size:21px}
.hm-sec.visit .cta .btn{flex:1 1 140px}

@media (min-width:560px){
  .hm-sl{min-height:280px;padding:30px 32px 64px}
  .hm-sl .t{font-size:32px;max-width:60%}
  .hm-sl .s{font-size:17px;max-width:55%}
  .hm-sl .art{width:230px;height:187px;right:24px;bottom:50px}
  .hm-tiles{gap:14px}
  .hm-tiles a{min-height:200px;padding:20px 18px 14px}
  .hm-tiles b{font-size:22px}
  .hm-tiles .art{width:150px;height:122px}
}
@media (min-width:900px){
  .hm-sec{margin-top:44px}
  .hm-h{font-size:28px}
  .hm-sl{min-height:340px;padding:44px 56px 72px}
  .hm-sl .t{font-size:42px;max-width:55%}
  .hm-sl .s{font-size:19px;max-width:48%}
  .hm-sl .go{min-height:46px;font-size:17px;padding:0 22px;margin-top:20px}
  .hm-sl .art{width:340px;height:276px;right:56px;bottom:56px}
  .hm-ctl{padding:0 20px 14px 46px}
  .hm-tiles{grid-template-columns:repeat(4,1fr);gap:16px}
  .hm-tiles a{min-height:230px;padding:24px 22px 16px}
  .hm-tiles .art{width:170px;height:138px}
  .hm-ico{margin:0;padding:2px 0 6px;justify-content:space-between}
  .hm-ico a{width:96px}
  .hm-ico .ci{width:72px;height:72px}
  .hm-ico svg{width:34px;height:34px}
  .hm-rail{margin:0;padding:2px 2px 16px;scroll-padding-left:2px}
  .hm-rail>li{flex-basis:280px}
  .hm-vids>li{flex-basis:300px}
  .hm-sec.visit{padding:34px 24px}
  .hm-sec.visit .cta .btn{flex:0 0 auto}
  .hm-arr{display:flex;position:absolute;top:38%;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(15,23,42,.18);align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
  .hm-arr.l{left:-18px}.hm-arr.r{right:-18px}
  .hm-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .hm-arr[hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hm-tiles a,.hm-ico .ci,.hm-dots button::before{transition:none}
  .hm-tiles a:hover,.hm-ico a:hover .ci{transform:none}
}
@media print{.hm-ctl,.hm-arr{display:none}}