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

.footer{

    padding:
        60px 40px;

    background:#102039;

    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%;
    }
}