@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* reset */
*{margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body{font-family: 'Pretendard', sans-serif;}

.wrap{width: 100%;}
html {scroll-behavior: smooth;}

/* HEDEAR */
header {width: 100%;margin: 0 auto;height: 72px;align-items: center; z-index: 100; background-color: transparent;transition: background-color 0.3s ease;}
header.scrolled { background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}


/* 스크롤 시 로고만 검정으로 변경 */
.black-logo svg path {fill: black;}
header .innerHeader {width: 85%;;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 72px;position: relative;}
header .innerHeader .menu { display: flex;gap: 40px;list-style: none;height: 100%;align-items: center}
header .innerHeader .menu li a {font-size: 16px;font-weight: 500;transition: 0.3s;}
.menu li a:hover {color: #a3e635;}

/* 햄버거 버튼 스타일 */
.menu-toggle {display: none;flex-direction: column;cursor: pointer;width: 30px;height: 22px;justify-content: space-between;}
.menu-toggle span {height: 3px;background: black;border-radius: 3px;transition: 0.3s;}

/* vehicleWrap */


.vehicleWrap .inner {width: 100%;margin: 150px auto;text-align: center;}
.vehicleWrap .inner .txt {width: 50%;display: flex;justify-content: space-between;margin: 0 auto;}
.vehicleWrap h2 {font-size: 32px;margin-bottom: 20px;}
.vehicleWrap .desc {color: #555;font-size: 16px;margin-bottom: 100px;}


.vehicleWrap .tabNav {display: flex;justify-content: center;gap: 24px;margin-bottom: 60px;border-bottom: 1px solid #eee;}
.vehicleWrap .tabNav .tabBtn {background: none;;font-size: 16px;cursor: pointer;padding: 8px 20px;border-bottom: 2px solid transparent;color: #333;cursor: pointer;border: none;}
.vehicleWrap .tabNav .tabBtn.active {font-weight: bold;border-color: #333;}



.vehicleWrap .tabNav .tabBtn.active {color: #333;font-weight: bold;
    border-bottom: 3px solid #333;}



/* 콘텐츠 박스 */
.vehicleWrap .contentBox {width: 1200px;margin: 0 auto;padding: 0 24px;}
.vehicleWrap .contentBox h3{font-weight: 500 !important;text-align: left;margin-bottom: 60px;font-size: 32px;}
.vehicleWrap .contentBox .box { display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 20px;margin-bottom: 100px;}

.vehicleWrap .box .content {width: 31%;box-sizing: border-box;text-align: left;padding-bottom: 16px;}
.vehicleWrap .content .img img {width: 100%;height: auto;display: block;padding-bottom: 16px;}

.vehicleWrap .content p {font-size: 16px;padding: 0 ;}
.vehicleWrap .content h4 {font-size: 20px;padding-bottom: 8px;}

/* tag */
.vehicleWrap .content .img {position: relative;}
.vehicleWrap .content a .img .tag {position: absolute;background: rgba(192, 255, 78, 0.8);color:#262626; border:solid 1px #b6f63e;padding: 4px 12px;font-size: 18px;top: 12px;right: 12px;border-radius: 2px;}

/* FOOTER */
footer {width: 100%;background-color: #111;}
footer .inner {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 60px 0;gap: 40px;max-width: 1200px;;margin: 0 auto;}
.footer-left {height: 360px;background-color: #c0ff4e;padding: 50px 40px;flex: 1 1 300px;display: flex;flex-direction: column;justify-content: space-between;}

.footer-brand h3 {font-size: 22px;color: #111;margin-bottom: 6px;}
.footer-brand p {color: #111;font-size: 14px;margin-bottom: 40px;}
.footer-links {display: flex;flex-direction: column;gap: 30px;}

.footer-link {color: #111;font-size: 20px;text-decoration: none;border-bottom: 1px solid rgba(0, 0, 0, 0.2);display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;transition: all 0.3s;}

.footer-link:hover {color: #2e2e2e;transform: translateX(5px);}
.arrow {font-size: 20px;}

/* footer right */
.footer-right {flex: 2 1 600px;display: flex;flex-direction: column;justify-content: center;gap: 24px;}
.footer-right .top{display: flex;justify-content: space-between;}
.footer-nav {display: flex;gap: 40px;margin-bottom: 20px;}

.footer-nav a {color: #fff;text-decoration: none;font-size: 16px;position: relative;}

.footer-nav a:hover::after {content: '';display: block;width: 100%;height: 2px;background-color: #c0ff4e;position: absolute;bottom: 8px;left: 0;}


footer .bottom {display: flex;justify-content: space-between;align-items:center;}
footer .footer-message {text-align: right;}
footer .footer-message p {font-size: 18px;line-height: 1.5;color: #fff;}

.footer-contact {margin: 24px 0;color: #fff;text-align: right;}
.footer-contact p:first-child {margin-bottom: 8px;}
.footer-contact .tel span {color: #adb1ba;font-size: 16px;}
.footer-contact .tel {color: #c0ff4e;font-size: 24px;font-weight: bold;font-weight: 500;line-height: 1.5;}

.footer-info {font-size: 14px;line-height: 1.6;color: #ccc;}

.footer-copy {font-size: 13px;color: #888;margin-top: 10px;}


@media (max-width: 768px) {
    .vehicleWrap {padding: 100px 0 0 0;}
    .vehicleWrap .inner {width: 100vw; margin: 0;padding: 0 0 0 0; text-align: left;}
    .vehicleWrap .inner .txt {
    width: 100vw;
    display: block;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;}

    .vehicleWrap h2 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 900;
    text-align: left;
    letter-spacing: -0.02em;
  }
  .vehicleWrap .desc {
    font-size: 0.98rem;
    color: #666;
    margin-bottom: 32px;
    text-align: left;
    line-height: 1.6;
    font-weight: 400;
    padding-right: 16px;
  }

    .vehicleWrap .tabNav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1.5px solid #eee;
    padding: 0 20px;
    overflow-x: auto;}
    .vehicleWrap .tabNav .tabBtn {
    font-size: 0.98rem;
    padding: 8px 6px 8px 0;
    border: none;
    color: #aaa;
    background: none;
    border-bottom: 2px solid transparent;
    min-width: 60px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.2s, border-color 0.2s; }


    .vehicleWrap .tabNav .tabBtn.active {
    color: #2265e2;
    font-weight: 900;
    border-bottom: 2.5px solid #2265e2;
    background: none;}

  /* 카테고리 타이틀 */
    .vehicleWrap .contentBox {width: 100vw;padding: 0 0 32px 0;box-sizing: border-box;}
    .vehicleWrap .contentBox h3 {font-size: 1.13rem;font-weight: 900 !important;text-align: left;margin: 26px 0 18px 20px;letter-spacing: 0;padding: 0;}
    .vehicleWrap .contentBox .box {display: grid;grid-template-columns: 1fr 1fr;gap: 12px 6px;padding: 0 10px;margin-bottom: 0;}

    .vehicleWrap .box .content {width: 100%;overflow: hidden;padding: 0;margin: 0;line-height: 1.35;padding: 3px 0;color: #181818;}
    .vehicleWrap .content .img img {width: 100%;height: auto;object-fit: contain;display: block;margin-bottom: 0;padding-bottom: 0;}

    .vehicleWrap .content> p {font-size: 0.97rem;;font-weight: 600;text-align: left;letter-spacing: -0.01em;}

    .vehicleWrap .content h4 {font-size: 1.2em;padding-top: 8px;    padding-bottom: 1px}
    .vehicleWrap .content > p:last-child {color: #777;font-size: 0.93rem;font-weight: 500;margin-bottom: 10px;padding-top: 1px;line-height: 1.2;}


    .vehicleWrap .content a .tag p{font-size: 14px !important;}
  /* grayBox(콘텐츠 없음) */
    .vehicleWrap .grayBox {min-height: 62px;background: #f7f7f7;display: flex;align-items: center;justify-content: center;color: #bbb;font-size: 0.98rem;font-weight: 600;}



}