@charset "UTF-8";
@import '../utils.scss';
/*변수파일 import*/

@keyframes fadein {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 1;
    }
}

.contentWarp.main{
    margin-bottom:0;
    .mainWarpInner{
        width:120rem;
        margin:0 auto;
    }
}
.mainBanner+.contentWarp{
    margin-top: 8rem;
    .mainWarpInner{
        .mainProductList{
            .mainProductInner{
                margin-top:0;
            }
        }
    }

}

.mainTopKey{
    width:100%;
    position: absolute;
    top:0;
    left:50%;
    transform: translate(-50%, 0);
    z-index: 2;
    @include desktopMin{
        max-width: 192rem;
    }
    .mainSwiper{
        max-width: 192rem;
        width:100%;
        top:0;
        left:50%;
        transform: translate(-50%, 0);
        height:64rem;
        background-size: cover;
        z-index: 0;
        @include tablet{
            height:64rem;
        }
        @include desktopMin{
            height:69rem;
        }
        @include desktopMax{
           height:85.5rem; 
        }
        &::before{
            content: "";
            display: block;
            position: absolute;
            width:100%;
            height:8rem;
            top:0;
            background: linear-gradient(180deg, rgba(5,20,31,0.8) 0%, rgba(5,20,31,0) 100%);
                z-index: 2;
        }
        ul{
            li{
                displaY:flex; 
                align-items: center;
                height:64rem;
                background-size: cover; 
                @include tablet{
                     height:69rem;
                }
                @include desktopMin{
                    height:69rem;
                }
                @include desktopMax{
                height:85.5rem; 
                }
                .mainText{
                    width:100%;
                    margin:0 auto;
                    display:flex; 
                    flex-wrap: wrap;
                    padding-left:2rem;
                    padding-right:2rem;
                    @include desktopMin{
                        width:120rem;
                    }
                    @include desktopMax{
                        padding-left:0rem;
                        padding-right:0rem;
                    }
                    p{
                        width:100%;
                        strong{
                            font-size: 3.5rem;
                            font-weight: 600;
                            @include desktopMin{
                                font-size: 8rem;
                            }
                        }
                        strong,
                        span{
                            displaY:block;
                            width:100%;
                                color:#fff;
                        }
                        span{
                            margin-top:2.5rem;
                            font-size: 1.6rem;
                            line-height: 2.8rem;
                            @include desktopMax{
                                font-size: 2rem;;
                            }
                       }
                    }
                        .oneButton{
                        width:16rem;
                        margin-top:5rem;
                    }
                }
                
            }
        }
        .swiper-pagination{
            bottom:10.8rem;
            span{
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background-color: #fff;
                opacity: 1;
            }
            .swiper-pagination-bullet-active{
                background-color: #00AAD2;
            }
        }
    }
   
    .mycarInfo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:100%;
        height:8.7rem;
        position: absolute;
        bottom:0;
        left:0;
        z-index: 1;
        background-color: #000;
        
        @include desktopMin{
            width:100%;
            padding-left:2rem;
            padding-right:2rem;
        }
        @include desktopMax{
            max-width:192rem;
            padding-left:0rem;
            padding-right:0rem;
        }
        .mycarInfoInner{
            width:100%;
            margin:0 auto; 
            display: flex;
            align-items: center;
            justify-content: space-between;
           
            @include desktopMax{
                width:120rem;
            }
            .mainComment{
                display: none;
                @include desktopMin{
                    display:block;
                }
                p{
                    color:#fff;
                    font-size: 1.6rem;
                    display: flex;
                    align-items: center;
                    &::before{
                        content: "";
                        display:block;
                        width:4.3rem;
                        height:4.3rem;
                        margin-right:1.5rem;
                        background-image: url(/kr/assets/images/common/icon-car.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }
                
            }
            .mainCarNum{
                width:100%;
                @include desktopMin{
                    width:fit-content;
                }
                .carlist {
                    position: relative;
                    width:100%;
                    padding-left:2rem;
                    padding-right:2rem;
                    @include desktopMin{
                        width:auto;
                        display: block;
                        padding-left:0rem;
                        padding-right:0rem;
                    }
                    span{
                        color: #00AAD2;
                        font-weight: 400;
                        displaY:flex; 
                        width:auto;
                        min-width: 2.2rem;
                         @include desktopMin{
                            width:fit-content;
                        }
                    }
                    span+span{
                        width:100%;
                        @include desktopMin{
                            width:fit-content;
                        }
                        &::before{
                            content:"";
                            displaY:block; 
                            width:1px;
                            height:1.4rem;
                            background-color:#DEDEDE;
                            margin-left:1rem; 
                            margin-right:1rem;
                        }
                    }
                    .carItem {
                        displaY:flex; 
                        height:8.7rem;
                        font-size:1.4rem;
                        align-items: center;
                        cursor: pointer;
                        color:#676767;
                        &::after{
                            content:"";
                            width:2.5rem;
                            height:0.8rem;
                            displaY:block;  
                            background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
                            background-size: 1.2rem;
                        }
                        &:hover,
                        &:focus{
                            border:none;
                            outline: none;
                        }
                    }
                    .carItem.on{
                        .carlistItem{
                        display:block;
                        } 
                    }
                    .carlistItem {
                        display: none;
                        position: absolute;
                        width: 100%;
                        min-width:17rem;
                        top: 8.7rem;
                        left: 50%;
                        transform: translate(-50%, 0);
                        background-color: #fff;
                        z-index:1;
                        @include desktopMin{
                            width: fit-content;
                        }
                        
                        .boxBullet{
                            display:none;
                            @include desktopMin{
                                width:1.4rem;
                                height:1rem;
                                displaY:block; 
                                position:absolute;
                                top:-0.9rem;
                                left:50%;
                                transform: translate(-50%,0);
                                z-index: 1;
                            }
                            
                        }
                        ul{
                            position: relative;
                            display: block;
                            padding: 2rem;
                            background-color:#fff;
                            border:1px solid #DEDEDE;
                            li {
                                a {
                                    display:flex;
                                    font-size:1.4rem;
                                    align-items: center;
                                    &:hover{
                                        span{
                                            color:#000;
                                        }
                                    }
                                    span{
                                        color: #9EA1A2;
                                        font-weight: 400;
                                        displaY:flex; 
                                        width:fit-content;
                                    }

                                }
                            }
                            li+li{
                                margin-top:1rem;
                            }
                        }
                        
                    }
                    .carlistItem.on{
                        display:block;
                    }
                    .carItem.on+.carlistItem {
                        display: block;
                        width:100%;
                        @include desktopMin{
                            width: fit-content;
                        }
                    }
                }
                .carlist.on {
                    a {
                        &::after{
                            transform: rotate(-180deg);
                            background-position-x: left;
                        }
                    
                    }
                }
            }
        }
        
    }
   
}

.mainTopKey+.contentWarp{
   margin-top:63.5rem;
    z-index: 1;
    @include desktopMax{
         margin-top:85.5rem;
    }
}

.mainProductList{
    padding-left: 2rem;
    padding-right: 2rem;
    @include desktopMax{
        padding-left:0;
        padding-right:0;
    }
    .mainContensTitle{
            display:block;
        h1,p{
            text-align: left;
        }
        h1{
            font-size: 3rem;
            font-weight: 600;
           
            @include desktopMin{
                font-size: 6rem;
                line-height: 6.5rem;
            }
        }
        p{
            display: none;
            font-size:1.8rem;
            font-weight: 400;
            margin-top:1.5rem;
            @include desktopMin{
                display:block;
            }
            
        }
    }
    .mainProductInner{
        max-width:50rem;
        margin:0 auto;
         margin-top:2rem;
        @include tablet{
            max-width:120rem;
        }
        @include desktopMin{
            margin-top:5rem;
             margin-top:7rem;
        }
        ul{
            li{
                position: relative;
                width:100%;
                overflow: hidden;
                background-color:#F6F3F2 ;
                display: flex;
                flex-direction: column;
                @include desktopMin{
                    height:35rem;
                }
                
                   
                @include tablet{
                    display: grid;
                    flex-direction: inherit;
                    grid-template-columns: 35rem auto;
                }
                >p{
                    position: relative;
                    width: 100%;
                    @include desktopMax{
                        height:35rem;
                        width:35rem;
                    }
                        img{
                        top: 0;
                        left: 0;
                        transform: translate(50, 50);
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        margin: auto;
                    }
                }
                
                .productSmallVideo{
                    position: absolute;
                    top:0;
                    left:0;
                    z-index: 0;
                    width:100%;
                    height:100%;
                }
                video{
                    width:100%;
                    height:100%;
                }
                .contentInfo{
                    width:100%;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding:2rem;
                    @include tablet{
                        padding:3rem;
                    }
                    @include desktopMin{
                        padding:4rem;
                        justify-content: inherit;
                    }
                    @include desktopMax{
                            height:100%;
                            justify-content: inherit;
                    }
                    .tag{
                        display: flex;
                        span{
                            padding:0.6rem;
                            font-size: 1.1rem;
                            font-weight: 400;
                            color: #fff;
                            background-color: #00AAD2;
                            @include desktopMin{
                                font-size: 1.3rem;
                            }
                        }
                        span+span{
                            margin-left:0.8rem;
                        }
                        
                    }
                    .tag+h2{
                        margin-top:2rem;
                    }
                    h2{
                        font-size:3rem ;
                        font-weight: 500;
                        color:#000;
                        
                        @include desktopMin{
                            font-size: 4rem;
                        }
                    }
                    .listOtionPrice{
                        margin-top:3rem;
                        display:block; 
                        @include tablet{
                            margin-top:0rem;
                            display:flex; 
                            align-items: center;
                        }
                        @include desktopMin{
                            position: absolute;
                            bottom:4rem;
                            left:4rem;
                        }
                        @include desktopMax{
                            position: absolute;
                            bottom:4rem;
                            left:4rem;
                        }
                        dl{
                            displaY:flex;
                            justify-content: space-between;
                            flex-direction: row-reverse;
                            width: 100%;
                            align-items: center;
                            @include tablet{
                                width: fit-content;
                                flex-direction: column-reverse;
                                justify-content: inherit;
                            }
                            dt,dd{
                                color:#676767;
                                font-size:1.4rem;
                                width: 100%;
                                font-family: "HyundaiSansHeadKR";
                                @include desktopMin{
                                    font-size:1.6rem;
                                }
                            }
                            dt{
                                font-weight: 400;
                                border-left:1px solid rgba(255,255,255,0.5);
                               
                                
                            }
                            dd{
                                font-weight: 600;
                                margin-top:1rem;
                                color:#000;
                                 text-align: right;
                                @include tablet{
                                    text-align: left;
                                }
                            }
                        }
                        dl+dl{
                            border-top:1px solid #DEDEDE;
                            margin-top:1.5rem;
                            padding-top:1.5rem;
                            @include tablet{
                                border-left:1px solid #DEDEDE;
                                margin-left:1.5rem;
                                padding-left:1.5rem;
                                border-top:0;
                                margin-top:0;
                                padding-top:0;
                            }
                        }
                    }
                    .noActionDescript{
                        color:#676767;
                        font-weight: 400;
                        line-height: 2.2rem;
                        font-size:1.4rem;
                        margin-top:1rem;
                        @include desktopMin{
                            font-size:1.6rem;
                            margin-top:1.5rem;
                        }
                    }
                    .listImgBtn{
                        right:4rem;
                        bottom:4rem;
                        width:100%;
                        margin-top:4rem;
                        @include tablet{
                            margin-top:0rem;
                            width:16rem;
                        }
                        @include desktopMin{
                            position: absolute;
                        }
                        @include desktopMax{
                            position: absolute;
                        }
                    }

                    .descript+.listImgBtn{
                        margin-top:4rem;
                    }
                }
                    
               
            }
            li+li{
                margin-top:4rem;
            }
        }
    }
}
.mainSevice{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    max-width: 120rem;
    margin:0 auto;
    justify-content: space-between;
    padding-left:2rem;
    padding-right:2rem;
    margin-top:5rem;
   
    @include tablet{
        margin-top:6rem;
        flex-wrap: nowrap;
    }
    @include desktopMin{
        margin-top:12rem;
    }
    @include desktopMax{
        padding-left:0;
        padding-right:0;
    }
    .left{
        @include tablet{
            width:50%;
        }
        span{
            color:#676767;
            font-size: 1.6rem;
        }
        h2{
            margin-top:1rem;
            font-size:3rem;
            font-weight: 500;
            line-height: 4rem;
            font-family: "HyundaiSansHeadKR";
            @include desktopMin{
                font-size:4rem;
                 line-height: 5rem;
            }
        }
    }
    .right{
        display: flex;
        flex-wrap: wrap;
        margin-top:2.5rem;
        width:100%;
        @include tablet{
            flex-wrap: nowrap;
            width:50%;
            margin-top:0;
        }
        a{
            width:100%;
            height:14rem;
            padding:3rem;
            border:1px solid #DEDEDE;
            @include tablet{
                height:17rem;
            }
            @include desktopMin{
                 width:29rem;
            }
            &:hover{
                 border:1px solid #05141F;
            }
            .faq,.cs{
                display:flex;
                height:100%;
                flex-direction: column;
                justify-content: space-between;
                span{
                    position: relative;
                    displaY:block;
                    font-weight: 600;
                    font-size: 1.8rem;
                    color:#002c5f;
                    &::after{
                        content: "";
                        position: absolute;
                        right:0;
                        displaY:inline-block;
                        width:0.8rem;
                        height:1.6rem;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center right;
                        background-image: url(/kr/assets/images/common/icon-bgo.svg);
                    }
                }
                &::before{
                    content: "";
                    display:block;
                    width:4.5rem;
                    height:4.5rem;
                    background-size: contain;
                    background-repeat: no-repeat;
                } 
            }
            .faq{
                &::before{
                   background-image: url(/kr/assets/images/common/icon-faq.svg);
                }

            }
            .cs{
                &::before{
                   background-image: url(/kr/assets/images/common/icon-bannercs.svg);
                }
            }
        }
        a+a{
            margin-top:1rem;
            @include tablet{
                margin-left:1rem;
                margin-top:0;
            }
        }
    }
}

.mainBanner{
    background-image: url(/kr/assets/images/hyundai/product-img/producy-mtemp8.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:34rem;
    margin-top:6rem;
    display: flex;
    align-items: center;
    padding-top:5rem;
    padding-bottom:4rem;
    @include tablet{
        padding-top:0;
        padding-bottom:0;
        height:34rem;
        background-image: url(/kr/assets/images/hyundai/product-img/producy-temp8.png);
    }
    
    @include desktopMin{
        margin-top:8rem;
    }
    .mabannerInner{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        max-width:120rem;
        width:100%;
        margin:0 auto;
        padding-left:2rem;
        padding-right:2rem;
        height:100%;
        flex-direction: column;
        justify-content: space-between;
        @include tablet{
            height:auto;
            flex-direction: inherit;
            justify-content: inherit;
        }
        @include desktopMax{
            max-width:120rem;
            padding-left:0rem;
            padding-right:0rem;
        }
        dl{
            width:100%;
            dt,dd{
                width:100%;
                color:#fff;
            }
            dt{
                font-size: 2.5rem;
                font-weight: 600;
                @include desktopMin{
                    font-size: 4rem;
                }
            }
            dd{
                margin-top:1.5rem;
                line-height: 2.2rem;
                br{
                    display:none;
                    @include tablet{
                        display: block;
                    }
                }
            }
        }
        .listImgBtn{
            width:100%;
            margin-top:3rem;
            @include tablet{
                width:17.6rem; 
            }
        }
    }
}

.mainNotice{
    margin-top:9rem;
    @include desktopMin{
        margin-top:15rem; 
    }
}