/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        "Inter",
        "Noto Sans KR",
        sans-serif;
    color:#111;
    background:#fff;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
}

ul,
ol{
    list-style:none;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:82px;

    z-index:1000;

    transition:
        background .4s ease,
        box-shadow .4s ease,
        color .4s ease;

    color:#fff;

    background:transparent;
}


/* 스크롤 후 */

.site-header.scrolled{

    background:#fff;

    box-shadow:
        0 5px 25px rgba(0,0,0,.08);

    color:#111;
}


/* =========================================================
   HEADER INNER
========================================================= */

.header-inner{

    width:100%;

    max-width:1480px;

    height:100%;

    margin:0 auto;

    padding:
        0 40px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo{

    flex-shrink:0;

    font-size:25px;

    font-weight:800;

    letter-spacing:-1.5px;

    color:#fff;

    transition:.3s;
}

.site-header.scrolled .logo{
    color:#111;
}


/* 작은 로고 설명 */

.logo small{

    display:block;

    margin-top:-3px;

    font-size:7px;

    letter-spacing:3px;

    font-weight:600;

    opacity:.8;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.main-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:42px;

    margin-left:auto;

    margin-right:40px;

    height:100%;
}


.main-nav a{

    position:relative;

    display:flex;

    align-items:center;

    height:100%;

    font-size:16px;

    font-weight:600;

    letter-spacing:-.2px;

    color:#fff;

    /*
       중요:
       opacity를 사용하지 않고
       완전한 흰색으로 처리
    */

    opacity:1;

    transition:
        color .3s ease;
}


/* hover */

.main-nav a:hover{
    color:#fff;
}


/* 스크롤 후 */

.site-header.scrolled .main-nav a{

    color:#111;

    opacity:1;
}

.site-header.scrolled .main-nav a:hover{
    color:#000;
}


/* nav underline */

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:20px;

    width:0;
    height:2px;

    background:currentColor;

    transition:width .3s ease;
}

.main-nav a:hover::after{
    width:100%;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;
}


/* 상담 버튼 */

.header-contact{

    height:38px;

    padding:0 19px;

    border:1px solid rgba(255,255,255,.65);

    border-radius:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:600;

    color:#fff;

    transition:.3s;
}


.header-contact:hover{

    background:#fff;

    color:#111;
}


.site-header.scrolled .header-contact{

    border-color:#111;

    color:#111;
}

.site-header.scrolled .header-contact:hover{

    background:#111;

    color:#fff;
}


/* =========================================================
   HAMBURGER
========================================================= */

.menu-toggle{

    position:relative;

    width:34px;
    height:34px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:center;

    gap:6px;
}


.menu-toggle span{

    display:block;

    height:1px;

    background:#fff;

    transition:.35s ease;
}


.menu-toggle span:nth-child(1){
    width:19px;
}

.menu-toggle span:nth-child(2){
    width:13px;
}

.menu-toggle span:nth-child(3){
    width:19px;
}


.site-header.scrolled .menu-toggle span{
    background:#111;
}


/* =========================================================
   HERO
========================================================= */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:680px;

    overflow:hidden;

    background:#111;
}


/* =========================================================
   SLIDER
========================================================= */

.hero-slider{

    position:relative;

    width:100%;
    height:100%;
}


.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:scale(1.04);

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform 1.2s ease;

    background-position:center;
    background-size:cover;
}


.hero-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);
}


/* =========================================================
   SLIDE BACKGROUNDS
========================================================= */

.slide-01{

    background-image:
        linear-gradient(
            90deg,
            rgba(4,10,18,.72) 0%,
            rgba(4,10,18,.36) 40%,
            rgba(4,10,18,.05) 75%
        ),
        url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2400&q=90");
}


.slide-02{

    background-image:
        linear-gradient(
            90deg,
            rgba(5,10,16,.75) 0%,
            rgba(5,10,16,.32) 45%,
            rgba(5,10,16,.08) 80%
        ),
        url("https://cdn.pixabay.com/photo/2019/08/08/23/33/car-4393990_1280.jpg");
}


.slide-03{

    background-image:
        linear-gradient(
            90deg,
            rgba(3,8,15,.78) 0%,
            rgba(3,8,15,.35) 45%,
            rgba(3,8,15,.08) 80%
        ),
        url("https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&w=2400&q=90");
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-40%);

    width:100%;

    max-width:1480px;

    padding:
        0 120px;

    margin:auto;

    color:#fff;

    z-index:5;
}


/* 작은 카테고리 */

.hero-eyebrow{

    margin-bottom:13px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    opacity:1;
}


/* 제목 */

.hero-title{

    margin-bottom:18px;

    font-size:
        clamp(38px, 4.2vw, 68px);

    line-height:1.08;

    letter-spacing:-3.5px;

    font-weight:700;

    text-shadow:
        0 3px 15px rgba(0,0,0,.18);
}


/* 설명 */

.hero-description{

    max-width:440px;

    margin-bottom:28px;

    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.92);
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons{

    display:flex;

    gap:10px;
}


.hero-btn{

    min-width:118px;

    height:42px;

    padding:0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:3px;

    border:1px solid rgba(255,255,255,.7);

    font-size:13px;

    font-weight:600;

    transition:.3s ease;
}


.hero-btn.primary{

    background:#fff;

    color:#111;

    border-color:#fff;
}


.hero-btn.primary:hover{

    background:#111;

    color:#fff;

    border-color:#111;
}


.hero-btn.secondary{

    background:rgba(0,0,0,.15);

    color:#fff;

    backdrop-filter:blur(5px);
}


.hero-btn.secondary:hover{

    background:#fff;

    color:#111;
}


/* =========================================================
   SLIDE CONTENT ANIMATION
========================================================= */

.hero-slide .hero-content > *{

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.hero-slide.active .hero-content > *{

    opacity:1;

    transform:translateY(0);
}


.hero-slide.active .hero-eyebrow{
    transition-delay:.15s;
}

.hero-slide.active .hero-title{
    transition-delay:.25s;
}

.hero-slide.active .hero-description{
    transition-delay:.35s;
}

.hero-slide.active .hero-buttons{
    transition-delay:.45s;
}


/* =========================================================
   SLIDER BOTTOM
========================================================= */

.hero-bottom{

    position:absolute;

    left:0;
    bottom:28px;

    width:100%;

    z-index:10;
}


.hero-bottom-inner{

    width:100%;

    max-width:1480px;

    margin:auto;

    padding:
        0 40px;

    display:flex;

    align-items:center;

    justify-content:center;
}


/* =========================================================
   PAGINATION
========================================================= */

.slider-pagination{

    display:flex;

    align-items:center;

    gap:12px;
}


.slider-pagination button{

    position:relative;

    width:34px;
    height:20px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;
}


.slider-pagination button::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:100%;
    height:1px;

    background:rgba(255,255,255,.45);

    transition:.3s;
}


.slider-pagination button.active::before{

    background:#fff;

    height:2px;
}


.slider-pagination button span{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    font-size:13px;

    color:rgba(255,255,255,.8);
}


.slider-pagination button.active span{
    color:#fff;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.slider-arrows{

    position:absolute;

    right:40px;

    bottom:28px;

    display:flex;

    gap:6px;
}


.slider-arrow{

    width:38px;
    height:38px;

    border:1px solid rgba(255,255,255,.45);

    background:rgba(0,0,0,.12);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;
}


.slider-arrow:hover{

    background:#fff;

    color:#111;
}


/* =========================================================
   SCROLL DOWN
========================================================= */

.scroll-down{

    position:absolute;

    left:124px;
    bottom:27px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:9px;

    letter-spacing:1.5px;

    z-index:10;
}


.scroll-line{

    width:38px;

    height:1px;

    background:rgba(255,255,255,.6);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:2000;

    background:#fff;

    color:#111;

    visibility:hidden;

    opacity:0;

    transform:translateX(100%);

    transition:
        opacity .35s ease,
        transform .45s ease,
        visibility .45s;
}


.mobile-menu.open{

    visibility:visible;

    opacity:1;

    transform:translateX(0);
}


.mobile-menu-header{

    height:82px;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #eee;
}


.mobile-logo{

    font-size:23px;

    font-weight:800;

    letter-spacing:-1px;
}


.mobile-close{

    width:38px;
    height:38px;

    border:0;

    background:transparent;

    cursor:pointer;

    position:relative;
}


.mobile-close::before,
.mobile-close::after{

    content:"";

    position:absolute;

    left:9px;

    top:18px;

    width:23px;

    height:1px;

    background:#111;
}


.mobile-close::before{
    transform:rotate(45deg);
}

.mobile-close::after{
    transform:rotate(-45deg);
}


.mobile-nav{

    padding:55px 25px;
}


.mobile-nav li{

    border-bottom:1px solid #eee;
}


.mobile-nav a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:21px 0;

    font-size:25px;

    font-weight:700;

    letter-spacing:-1px;
}


.mobile-nav a::after{

    content:"→";

    font-size:18px;

    font-weight:400;
}


/* =========================================================
   CONTENT SECTIONS
========================================================= */

.section{

    padding:
        140px 40px;
}


.section-inner{

    max-width:1280px;

    margin:auto;
}


.section-label{

    margin-bottom:15px;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    color:#777;
}


.section-title{

    margin-bottom:25px;

    font-size:
        clamp(32px,4vw,56px);

    line-height:1.15;

    letter-spacing:-2px;
}


.section-text{

    max-width:650px;

    font-size:15px;

    line-height:1.9;

    color:#777;
}


/* =========================================================
   VEHICLE SECTION
========================================================= */

.vehicle-section{

    background:#f5f5f3;
}


.vehicle-grid{

    margin-top:65px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}


.vehicle-card{

    overflow:hidden;

    background:#fff;

    cursor:pointer;
}


.vehicle-image{

    height:280px;

    background-size:cover;

    background-position:center;

    transition:
        transform .6s ease;
}


.vehicle-card:hover .vehicle-image{

    transform:scale(1.05);
}


.vehicle-card:nth-child(1) .vehicle-image{

    background-image:
        url("https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=1200&q=85");
}


.vehicle-card:nth-child(2) .vehicle-image{

    background-image:
        url("https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1200&q=85");
}


.vehicle-card:nth-child(3) .vehicle-image{

    background-image:
        url("https://images.unsplash.com/photo-1553440569-bcc63803a83d?auto=format&fit=crop&w=1200&q=85");
}


.vehicle-info{

    padding:25px;
}


.vehicle-info h3{

    margin-bottom:8px;

    font-size:21px;
}


.vehicle-info p{

    font-size:13px;

    color:#888;

    line-height:1.7;
}


/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.tech-section{

    background:#111;

    color:#fff;
}


.tech-section .section-label{
    color:#888;
}


.tech-section .section-text{
    color:#aaa;
}


.tech-grid{

    margin-top:65px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:1px;

    background:#333;
}


.tech-item{

    min-height:260px;

    padding:35px;

    background:#111;
}


.tech-number{

    margin-bottom:50px;

    font-size:12px;

    color:#777;
}


.tech-item h3{

    margin-bottom:15px;

    font-size:23px;

    letter-spacing:-1px;
}


.tech-item p{

    font-size:13px;

    line-height:1.8;

    color:#999;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section{

    padding:
        120px 40px;

    background:#fff;
}


.contact-box{

    max-width:1280px;

    margin:auto;

    padding:70px;

    background:#f3f3f1;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}


.contact-box h2{

    margin-bottom:12px;

    font-size:
        clamp(30px,4vw,52px);

    letter-spacing:-2px;
}


.contact-box p{

    font-size:14px;

    color:#777;
}


.contact-btn{

    flex-shrink:0;

    min-width:160px;

    height:52px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:600;

    transition:.3s;
}


.contact-btn:hover{

    background:#333;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    padding:
        60px 40px;

    background:#0b0b0b;

    color:#fff;
}


.footer-inner{

    max-width:1280px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    gap:40px;
}


.footer-logo{

    font-size:23px;

    font-weight:800;
}


.footer-info{

    font-size:11px;

    line-height:2;

    color:#777;
}


.footer-copy{

    margin-top:30px;

    font-size:10px;

    color:#555;
}


/* =========================================================
   TOP BUTTON
========================================================= */

.top-button{

    position:fixed;

    right:25px;
    bottom:25px;

    width:45px;
    height:45px;

    z-index:900;

    border:1px solid #ddd;

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    box-shadow:
        0 5px 20px rgba(0,0,0,.08);
}


.top-button.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}


.top-button:hover{

    background:#111;

    color:#fff;

    border-color:#111;
}


/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media(max-width:1100px){
    .main-nav{

        gap:22px;

        margin-right:20px;
    }

    .main-nav a{

        font-size:11px;
    }

    .header-contact{
        display:none;
    }

    .hero-content{

        padding:0 30px;
    }

    .header-inner{
        padding:0 30px;
    }

    .hero-bottom-inner{
        padding:0 30px;
    }

    .scroll-down{
        left:30px;
    }

    .slider-arrows{
        right:30px;
    }

    .main-nav a {
        font-size:16px;
    }

}


/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media(max-width:768px){

    .hero-description{
        font-size:13px !important;
    }
    .slider-pagination {
        border:0px solid red;
        padding-bottom:60px;
    }
    .site-header{

        height:70px;
    }


    .header-inner{

        padding:
            0 20px;
    }


    .logo{

        font-size:21px;
    }


    .main-nav,
    .header-contact{

        display:none;
    }


    .menu-toggle{

        width:38px;
        height:38px;
    }


    .hero{

        min-height:620px;
    }


    .hero-content{

        top:50%;

        padding:
            0 22px;

        transform:translateY(-42%);
    }


    .hero-eyebrow{

        font-size:8px;

        margin-bottom:12px;
    }


    .hero-title{

        font-size:
            clamp(35px,10vw,52px);

        line-height:1.13;

        letter-spacing:-2.8px;

        margin-bottom:15px;
    }


    .hero-description{

        max-width:310px;

        font-size:11px;

        line-height:1.8;

        margin-bottom:22px;
    }


    .hero-btn{

        min-width:105px;

        height:40px;

        padding:0 14px;

        font-size:10px;
    }


    .hero-bottom{

        bottom:22px;
    }


    .hero-bottom-inner{

        padding:
            0 22px;
    }


    .scroll-down{

        display:none;
    }


    .slider-arrows{

        display:none;
    }


    .section{

        padding:
            90px 22px;
    }


    .vehicle-grid{

        grid-template-columns:1fr;

        gap:15px;

        margin-top:40px;
    }


    .vehicle-image{

        height:230px;
    }


    .tech-grid{

        grid-template-columns:1fr;

        margin-top:40px;
    }


    .tech-item{

        min-height:210px;
    }


    .contact-section{

        padding:
            70px 22px;
    }


    .contact-box{

        padding:40px 25px;

        display:block;
    }


    .contact-btn{

        margin-top:30px;

        width:100%;
    }


    .footer{

        padding:
            50px 22px;
    }


    .footer-inner{

        display:block;
    }


    .footer-info{

        margin-top:25px;
    }


    .top-button{

        right:18px;

        bottom:18px;

        width:42px;

        height:42px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .hero-title{

        font-size:36px;
    }

    .hero-description{

        font-size:10px;
    }

    .hero-buttons{

        gap:7px;
    }

    .hero-btn{

        min-width:96px;

        padding:0 10px;
    }

}
/* 슬라이드 번호 버튼 */

.slider-pagination button {
    position: relative;

    width: 60px;
    height: 24px;

    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);

    color: #fff;

    cursor: pointer;

    overflow: hidden;
}


/* 프로그래스 배경 */

.slider-pagination button::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background: rgba(255,255,255,0.25);

    z-index: 0;
}


/* 숫자가 항상 위에 보이도록 */

.slider-pagination button span {
    border:0px solid red !important;
    margin:0 auto;
    position: relative;
    left:2px;
    top:0px;
    z-index: 1;
    
}


/* active일 때 차오르는 효과 */

.slider-pagination button.active::before {
    animation: buttonProgress 5s linear forwards;
}

@keyframes buttonProgress {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}