@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_wrap{width:100%;
        margin: 0 auto;}


.main_wrap h3{width:100%;
                margin-top:50px;
                text-align: center;
                font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:45px;}

.main{width:100%;
        margin: 0 auto;
        animation-delay: 0.2s;
        animation-duration: 3s;}

.main img{width:100%;}

.main_info{width:90%;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;}

.main_info ul{width:calc(90% / 2);
            margin: 40px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;}



.small_etron{width:400px;
                cursor: pointer;}

.small_etron img{width:110%;}

.car_detail li{text-align: center;
                line-height: 30px;
                font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:20px;}

.car_detail li span{font-weight: 800;
                    font-size: 24px;}


/*----section2(etron 설명)----*/
.ov_wrap{display: flex;
        justify-content: space-around;
        width:90%;
        margin: 0 auto;}

.ov_img{width:600px;
        visibility: hidden;}

.ov_img1{height:700px;
        background-image: url('../images/image3/etron_design1.jpeg');
        background-position:center;}
.ov_img2{height:700px;
        background-image: url('../images/image3/etron_inner.jpeg');
        background-position:center;}
.ov_img3{width:600px;
        height:700px;
        background-position:center;
        object-fit: cover;
        vertical-align: bottom;}
.ov_img4{height:700px;
        background-image: url('../images/image3/etron_smart.jpeg');
        background-size:cover;}

/*----etron text----*/

.etron_txt{width:600px;}

.etron_txt h4{margin-bottom:20px;
                font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:30px;}

.etron_txt p{font-family: "Tinos", sans-serif;
                font-weight: 400;
                font-size:20px;}


.info_txt{display: flex;
        gap:5%;
        padding:150px 0;}

.info_txt > p{font-family: "Roboto", sans-serif;
            font-size:18px;
            font-weight: 500;
            width:35%;}

.info_txt span{width:60%;
                text-align: justify;}

.etron_txt .middle_txt{font-size: 28px;}


.etron_fp{width:400px;
        margin: auto;
        animation-delay: 0.2s;
        animation-duration: 3s;
        visibility: hidden;}

.etron_fp img{width:100%;}


.middle_img{height:480px;
            position:relative;
            animation-delay: 0.2s;
            animation-duration: 3s;
            visibility: hidden;}


.middle_img img:nth-child(1){position:absolute;
                            width:350px;
                            left:50px;
                            z-index: 1;}


.middle_img img:nth-child(2){position:absolute;
                            width:300px;
                            top:180px;
                            right:50px;}

.middle_txt{width:90%;
        margin:80px auto;
        text-align: center;
        animation-delay: 0.2s;
        animation-duration: 3s;
        visibility: hidden;}


/*----form----*/
.form_wrap{width:100%;
            margin: 0 auto;
            display: flex;
            font-family: "Tinos", sans-serif;}

.form_wrap h3{margin-bottom:40px;
            font-weight: 400;
            font-size:30px;}

.form_image{width:60%;
        height:500px;
        margin-bottom:50px;
        background-image: url("../images/image3/suv_etron.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: -150px;
        background-position-y: -25px;
        transform: scaleX(-1);
        visibility: hidden;
        animation-timing-function: ease-out;}

fieldset{border:0;}

input{padding:10px;}

fieldset > div > input{width:100%;
                    height:40px;
                    margin:20px auto;}

select{width:100%;
        height:40px;
        margin:20px auto;
        padding:10px;}

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

.btn button:hover{background-color: #ffffff;
                color:#000000;
                transition: 0.3s;}
/*----footer----*/

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


.footer_wrap{display: flex;}

.box1{Width:70%;}
.box2{width:30%;}



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

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




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

@media only screen and (max-width:1399px) and (min-width:950px){


        .main_wrap h3{font-size:40px;}

/*----section2(etron 설명)----*/

        .ov_wrap{width:100%;}

        .ov_img{width:90%;}

        .ov_img div{height:500px;
                background-size: cover;}

        .ov_img video{width:100%;
                height:500px;}

/*----etron text----*/

        .etron_txt{width:48%;}

        .etron_txt h4{font-size: 28px;}

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

        .info_txt{padding:70px 0;}

        .info_txt > p{font-size:16px;}

        .info_txt span{width:50%;
                        font-size:14px;}

        .etron_txt .middle_txt{font-size: 20px;
                                margin:30px auto;}

        .etron_fp{width:350px;}

        .middle_img{height:255px;}


        .middle_img img:nth-child(1){width:180px;
                                        left:15px;}


        .middle_img img:nth-child(2){width:150px;
                                        top:100px;
                                        right:90px;}

/*----form----*/
        .form_wrap{margin: 50px auto;}

        .form_image{background-size: 130%;
                        background-position-x: -200px;
                        background-position-y: 40px;}

        form{margin-right:20px;}

/*----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_wrap h3{margin-top:30px;
                        font-size:35px;}

        .main_info{width:95%;
                margin: 30px auto;
                border:1px solid #dddddd;}

        .main_info ul{width:100%;
                        margin: 10px auto;
                        display: block;
                        text-align: center;}

        .small_etron{width: 100%;
                        margin: 20px auto;}

        .small_etron img{width:80%;}

        .car_detail li{padding-top:45px;
                        font-size:18px;}

        .car_detail li span{font-size: 20px;}


/*----section2(etron 설명)----*/
        .ov_wrap{display: block;
                width:100%;
                margin:0 auto;}

        .scroll_wrap{width:100%;
                height:320px;
                margin:10px;
                overflow-x: scroll;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;}

        .scroll_wrap::-webkit-scrollbar{height:10px;
                                        border-radius: 5px;}

        .scroll_wrap::-webkit-scrollbar-track{border-radius: 10px;
                                                background-color: #f0f0f0;}

        .scroll_wrap::-webkit-scrollbar-thumb{background-color: #000000;
                                                border-radius: 5px;}

        .ov_img{display: flex;
                width:280%;
                visibility: visible;}

        .ov_img > div{width:120%;
                        height: 300px;
                        margin:5px;
                        background-size: cover;
                        background-position: center;}

        .ov_img video{width:100%;
                        height: 300px;
                        margin-top:5px;}


/*----etron text----*/

        .etron_txt{width: 88%;
                margin: 50px auto;}

        .info_txt{padding:50px 0;
                justify-content: space-between;}

        .info_txt > p{font-size:16px;}

        .info_txt span{width:50%;
                        font-size:14px;}

        .etron_txt .middle_txt{font-size: 20px;
                                margin:30px auto;}

        .etron_fp{width:350px;}

        .middle_img{height:350px;}


        .middle_img img:nth-child(1){width:280px;
                                        left:80px;}


        .middle_img img:nth-child(2){width:200px;
                                        top:150px;
                                        right:90px;}
/*----form----*/
        .form_wrap{margin: 50px auto;}

        .form_wrap h3{text-align: center;}

        .form_image{display: none;}

        form{width:80%;
                margin:0 auto;}

        .btn{width: 100%;
                margin: 5px auto;
                text-align: end;}

        .btn button{margin-top:0;}

        .btn button:hover{background-color: #000000;
                color:#ffffff;
                transition: none;}
/*----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_wrap h3{margin-top:30px;
                font-size:25px;}

        .main{margin:30px auto;}        


        .main_info{width:95%;
                margin: 30px auto;
                border:1px solid #dddddd;}

        .main_info ul{width:100%;
                        margin: 10px auto;
                        display: block;
                        text-align: center;}

        .small_etron{width: 100%;
                        margin: 20px auto;}

        .small_etron img{width:80%;}

        .car_detail li{padding-top:30px;
                        line-height: 25px;
                        font-size:16px;}

        .car_detail li span{font-size: 18px;}

/*----section2(etron 설명)----*/
        .ov_wrap{display: block;
                width:100%;
                margin:0 auto;}

        .scroll_wrap{width:100%;
                height:300px;
                overflow-x: scroll;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;}

        .scroll_wrap::-webkit-scrollbar {display: none;}

        .ov_img{display: flex;
                width:380%;
                visibility: visible;}

        .ov_img > div{width:120%;
                        height: 300px;
                        margin:5px;
                        background-size: cover;
                        background-position: center;}

        .ov_img video{width:100%;
                        height: 300px;
                        padding-top:5px;}




/*----etron text----*/

        .etron_txt{width: 88%;
                margin: 50px auto;}

        .info_txt{padding:50px 0;
                justify-content: space-between;}

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

        .info_txt span{width:50%;
                        font-size:14px;}

        .etron_txt .middle_txt{font-size: 20px;
                                margin:30px auto;}

        .etron_fp{width:300px;}

        .middle_img{height:320px;}

        .middle_img img:nth-child(1){width:200px;
                                        left:30px;}


        .middle_img img:nth-child(2){width:180px;
                                        top:100px;
                                        right:20px;}
/*----form----*/
        .form_wrap{margin: 50px auto;}

        .form_wrap h3{font-size: 24px;
                line-height: 30px;
                        text-align: center;}

        .form_image{display: none;}

        form{width:80%;
                margin:0 auto;}

        fieldset > div > input{margin:15px auto;}

        select{margin:10px auto;}


        .btn{width: 100%;
                margin: 5px auto;
                text-align: end;}

        .btn button{width:180px;
                height:40px;
                margin:10px auto;
                line-height: 40px;}

        .btn button:hover{background-color: #000000;
                color:#ffffff;
                transition: none;}

/*----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;}

}