@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');


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

body{background-color: #ffffff;
    color:#000000;
    font-family: "Roboto", sans-serif;}

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



.wrap{width:100%;}

header{height:70px;
        background-color: #ffffff;}

.burger{position:relative;
        width:25px;
        height:16px;
        top:24px;
        left:40px;
        cursor: pointer;}

.burger, .burger span{transition: all 0.4s;}

.burger span{position: absolute;
                top:0;
                left:0;
                width:100%;
                height:2px;
                background-color: #000000;}

.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:50%;}
.burger span:nth-child(3){top:100%;}

.burger.active span:nth-of-type(1){
    transform: translateY(8px) rotate(-45deg);
}

.burger.active span:nth-of-type(2){
    left:50%;
    opacity: 0;
    animation : active-menu-bar 0.8s forwards;
}

@keyframes active-menu-bar{
    100% {
        height:0;
    }
}

.burger.active span:nth-of-type(3){
    transform: translateY(-8px) rotate(45deg);
}


.logo{height:70px;
    margin-top:-15px;
    text-align: center;}

.logo img{height:100%;
        padding:10px;}

/*----submenu----*/

nav{position:absolute;
    margin-top:70px;
    width:20%;
    height:700px;
    background-color: #ffffff;
    display: none;
    z-index: 1;}


nav > ul > li {position: relative;
                padding-top:60px;
                padding-left:40px;
                font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:30px;}


.car_img{position:absolute;
        top:0;
        left:100%;
        width:320px;
        height:700px;
        padding-top:20px;
        background-color: #dddddd;}

.car_img li{width:fit-content;
            margin: 20px auto;}

.car_img img{width:250px;}



/*----main----*/

.main{width:100%;
        height:700px;
        background-position: center;
        background-size: cover;
        background-image: url("../images/image1/main.jpeg");
        animation-duration: 4s;
        display: flex;
        flex-direction: row;
        align-items: end;}

.main_txt{width:100%;
        text-align: right;
        margin-right:40px;}


.main h2{font-family: "Tinos", sans-serif;
        font-weight: 400;
        font-size:50px;}


.main_btn{width:200px;
        height:45px;
        margin:20px 0;
        float: right;
        text-align: center;
        line-height: 45px;
        color:#ffffff;
        border: 1px solid #000000;
        background-color: #000000;
        cursor: pointer;}

.main_btn:hover{background-color: #ffffff;
                color:#000000;
                transition: 0.3s;}




/*----첫번째 section 차 종류 이미지----*/

.car_wrap{column-count: 2;
        column-width: 48%;
        column-gap: 4%;
        max-width: 1920px;
        margin:0 auto;}

.car_wrap > div{break-inside: avoid;}

.car_wrap > p{font-size:14px;}

.car_wrap > div > h3{font-family: "Tinos", sans-serif;
                    font-weight: 400;
                    font-size:40px;
                    margin-top:30px;}


.content1_img{width:80%;
                height:700px;
                background-size: auto 100%;
                background-repeat: no-repeat;
                background-image: url("../images/image1/a7_sportback.jpeg");
                background-position: center;}

.content2_img{width:80%;
                height:620px;
                background-size: auto 100%;
                background-repeat: no-repeat;
                background-image: url("../images/image1/rs5_sportback.jpeg");
                background-position:center;}


.content3_img{width:100%;
                height:800px;
                background-size: auto 100%;
                background-repeat: no-repeat;
                background-image: url("../images/image1/a5_sportback_3.jpeg");
                background-position-x: -600px;}

.content4_img{width:100%;
                height:500px;
                background-size: auto 100%;
                background-repeat: no-repeat;
                background-image: url("../images/image1/as_q7.jpeg");
                background-position: center;}


.content1{margin-top:100px;
        visibility: hidden;}
.content2{margin-top:150px;
        visibility: hidden;}
.content3{padding-top:300px;
        visibility: hidden;}
.content4{margin-top:200px;
        visibility: hidden;}

.car_wrap > div > div:hover{background-size: auto 105%;
                        transition: 0.3s;}


.content3_img:hover{background-position-x: -650px;}

/*----discover----*/

article:nth-child(2){visibility: hidden;}

.discover_box{width:100%;
            display: flex;
            margin-top:200px;
            background-color: #dddddd;}

.dis_img{width: 50%;
        padding:35px;}

.dis_img img{width:100%;}


.bottom_txt{width:50%;
            margin-top:40px;}

.bottom_txt h3{font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:50px;
                margin:30px 0;}

.bottom_txt p{font-size: 18px;}

.bottom_btn{width:200px;
        height:45px;
        margin-top:30px;
        text-align: center;
        line-height: 45px;
        color:#ffffff;
        border: 1px solid #000000;
        background-color: #000000;
        cursor: pointer;}

.bottom_btn:hover{background-color: #ffffff;
                color:#000000;
                border: 1px solid #000000;
                transition: 0.3s;}


/*----footer----*/

footer{width:100%;
        height:400px;
        padding:50px;
        color:#ffffff;
        background-color: #000000;}


.footer_wrap{display: flex;
                justify-content: space-between;}

footer h3{font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:50px;}

.box1 > ul{width:50%;
            margin-top:50px;
            display: flex;
            justify-content: space-between;}


.box1 > ul > li{font-family: "Tinos", sans-serif;
                    font-weight: 400;
                    font-size:20px;}

.ft_nav{font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 400;
        margin-top:20px;
        line-height: 25px;}

.box1{width:70%;}
.box2{width:20%;
        margin-top:50px;}

.box2 p{margin-top:15px;}
.box2 > img{width:100%;}


/*====반응형====*/

@media only screen and (max-width:1399px) and (min-width:950px){
     
        .main h2{font-size: 48px;}

        .car_wrap{column-count: 2;
                column-width: 49%;
                column-gap: 2%;
                max-width: 1399px;
                margin:0 auto;}

        .content1_img{height:600px;}

        .content2_img{height:520px;}

        .content3_img{height:600px;
                        background-position: -480px;}

        .content4_img{height:400px;}

        .content3_img:hover{background-position-x: -530px;}

        .bottom_txt h3{font-size:45px;}

/*----footer----*/

        footer h3{font-size:45px;}

    
    }/*1399-950구간 끝*/




@media only screen and (max-width:949px) and (min-width:700px){

/*----header & nav----*/    
    
        .logo{height:70px;
                float: right;
                margin-top:-5px;}

        .logo img{height:70%;
                padding:10px;}

        nav{width:30%;
                height:510px;}

        nav > ul > li {font-size:24px;}

        .car_img{position:absolute;
                top:0;
                left:100%;
                width:200px;
                height:510px;
                padding-top:20px;
                background-color: #dddddd;}

        .car_img img{width:180px;}


/*----main----*/
        .main{height:500px;}

        .main_txt{margin-right:30px;
                margin-top:380px;}

        .main h2{font-size:40px;}

        .main_btn{width:180px;
                height:40px;
                margin:15px 0;
                line-height: 40px;}

/*----car content image----*/
        .car_wrap{column-count: initial;}

        .content1, .content2, .content4{margin-top:80px;}

        .content3{padding-top:80px;}

        .content1_img, .content2_img{width:100%;}

        .content3_img{background-position-x: -500px;}

        .content3_img:hover{background-position-x: -550px;}


/*----discover box----*/

        .discover_box{margin-top:100px;}

        .bottom_txt{margin-top:20px;}

        .bottom_txt h3{margin:20px 0;
                font-size:35px;}

        .bottom_txt p{font-size:16px;}

/*----footer----*/

        footer h3{font-size:40px;}

        .box1 ul {width:70%;}

        .box2 p{text-align: center;
                font-size: 10px;}


}/*949-700구간 끝*/




@media only screen and (max-width:699px){

/*---header & nav----*/
        .logo{height:70px;
                float: right;
                margin-top:-5px;}

        .logo img{height:70%;
                padding:10px;}
        
        .burger{top:28px;}

        nav{width:50%;
                height:500px;}

        nav > ul > li {font-size:20px;}

        .car_img{position:absolute;
                top:0;
                left:100%;
                width:100%;
                height:500px;
                padding-top:20px;
                background-color: #dddddd;}

        .car_img img{width:150px;}


/*----main----*/

        .main{height:200px;}

        .main_txt{margin-right:30px;
                margin-top:130px;}

        .main h2{font-size:18px;
                color:#ffffff;}

        .main_btn{width:100px;
                height:22px;
                margin-top:5px;
                line-height: 22px;
                font-size: 12px;
                background-color: #f0f0f0;
                color:#000000;
                border:none;}

/*----car image----*/
                
        .car_wrap{column-count: initial;
                width:100%;}

        .car_wrap > div > h3{font-size:24px;
                                margin:5px 0;}

        .car_wrap > div > p{font-size:14px;}

        .car_wrap > div > div{height:300px;
                                width:100%;}

        .car_wrap > div > div:hover{background-size: auto 100%;}
        
        .content1, .content2, .content4{margin-top:30px;}

        .content3{padding-top:30px;}

        .content3_img{background-position-x: -60px;}

        .content3_img:hover{background-position-x: -60px;}

        

/*----discover box----*/

        .discover_box{margin-top:20px;
                        height: 180px;}

        .dis_img{padding:10px;
                height:100%;}

        .dis_img img{object-fit: cover;
                        width:100%;
                        height:100%;}

        .bottom_txt{margin-top:4px;}

        .bottom_txt h3{font-size:24px;
                        margin:10px 0;}

        .bottom_txt p{width:150px;
                        font-size:12px;}

        .bottom_btn{width:100px;
                height:22px;
                margin-top:7px;
                line-height: 22px;
                font-size: 10px;}

/*----footer----*/

        footer{height:auto;
                padding:20px;}

        .footer_wrap{display:block ;}

        footer h3{font-size:30px;
                text-align: center;}

        .box1 > ul {width:100%;
                margin:0 auto;
                margin-top:30px;}

        .box1 > ul > li{font-size:16px;}

        .ft_nav{font-size:12px;
                margin-top:10px;
                line-height: 20px;}
        
        .box1{width: 100%;}

        .box2{display: none;}







}