@font-face {
    font-family: 'DINEngschrift';
    src: url('../font-awesome/fonts/DINEngschrift.otf') format('woff'),
    url('../font-awesome/fonts/DINEngschrift.otf') format('woff2');
}
@font-face {
    font-family: 'BittodsSans';
    src: url('../font-awesome/fonts/056-SHANGSHOUXINYITI-2.TTF') format('woff'),
    url('../font-awesome/fonts/056-SHANGSHOUXINYITI-2.TTF') format('woff2'),
url('../font-awesome/fonts/056-SHANGSHOUXINYITI-2.TTF') format('truetype');

}

.banner-home::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 50% /* 60% 开始完全透明 */);
    z-index: 10;
}
.banner-home img{
    width: 100%;
    padding: 0px;
    height: 100%;
    object-fit: cover;
    z-index:2;
}



/*.banner-home .main-title{*/
/*    position: absolute;*/
/*    left: 8.8rem;*/
/*    font-family: '452';*/
/*    font-weight: normal;*/
/*    font-size: 11.43rem;*/
/*    color: #FFFFFF;*/
/*    text-align: left;*/
/*    font-style: normal;*/
/*    text-transform: none;*/
/*    top: 26.5rem;*/
/*    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);*/
/*    z-index:11*/
/*}*/










@font-face {
    font-family: 'SourceSansRoman';
    src: url('../font-awesome/fonts/SourceHanSansCN-Bold.otf') format('woff'),
    url('../font-awesome/fonts/SourceHanSansCN-Bold.otf') format('woff2');
}





.model-bg{
    /*background-color: #f2f2f2;*/
    width: 100%;
    /*height: 124.6rem;*/
}
.models{

    padding: 5.2rem 5.9rem 5.5rem 9.5rem;
    background-color: #000;
}
.models .container-init{
    display: flex  ;
    gap: 23.6rem;
    padding-left: 11.5rem;
}


@font-face {
    font-family: 'BebasNeue';
    src: url('../font-awesome/fonts/BebasNeue.otf') format('woff'),
    url('../font-awesome/fonts/BebasNeue.otf') format('woff2');
}


.models .models-right{
    font-family: '452';
    font-weight: normal;
    font-size: 7.1rem;
    color: #fff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}



.tab-buttons {

    font-size: 3.7rem;
    color: #000000;
    line-height: 6.26rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    display: flex;
    gap: 4.1rem;
    justify-content: flex-start;
    align-items: center;
}

.tab-buttons span {


    font-family: 'BebasNeue';
    font-size: 2.8rem;
    color: #7a7a7a;
    line-height: 4.4rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    background-color: #ffffff;
    padding: 1.2rem 2rem;
    width: 32.3rem;
    height: 6.4rem;

}

.tab-buttons span.active {

    background-image: url(../images/vechile/vechile-model.png);
    color: #fff;

    display: block;

    /* line-height: 3.5rem; */
    background-size: cover;
    /* padding: 0.8rem 1.9rem 0.8rem 1.9rem; */
    background-color: transparent;

}


@font-face {
    font-family: 'din';
    src: url('../font-awesome/fonts/din-bold-2.ttf') format('woff'),
    url('../font-awesome/fonts/din-bold-2.ttf') format('woff2');
}



 .smart-tab-content{
    position: relative;
     width: 100vw;
     height: 82.4rem;

}

.tab-content-vechile-content .swiper-slide::before {
    /*width: 100%;*/
    height: 82.4rem;
    width: 100vw;
    z-index:2;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(255, 0, 0, 0) 50%, rgba(255, 0, 0, 1));
}
.smart-tab-content .img-phone{
    /*width: 100%;*/
    width: 100vw;
    height: 82.4rem;
    object-fit: cover;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.smart-tab-content .container-init{
    position: relative;
    height: 100%;
}

.tab-content-vechile-content{
    /*background-image: url(../images/smart/bj-smart.png);*/
    background-size: cover;
    background-repeat: no-repeat;
    height: 90.7rem;
    /*width: 202.12rem;*/
    display: flex;
    padding-left: 3rem;
    display: none ;
    position: relative;
    z-index: 9;


}

.tab-content-vechile-content .items{
    width: 101.8rem;
    height: 90.7rem;
    position: absolute;
    right: 0;
    padding-top: 17rem;
    z-index:99;
}



.tab-content-vechile-content .items span.A5{

    font-size: 11.7rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: block;
    font-family: 'BittodsSans', 'serif';
    margin-top: 4.6rem;
    transform: scaleY(1.4);
}
.tab-content-vechile-content .items span.des{
    width: 85.2rem;
    /* height: 11.1rem; */
    font-family: AcuminConcept_212000wght;
    font-size: 2rem;
    color: #FFFFFF;
    /* text-align: left; */
    font-style: normal;
    text-transform: none;
    display: block;
    margin-top:4.6rem;
    text-align: left;
}
.tab-content-vechile-content{
    display: none;
}
.tab-content-vechile-content.active{
    display: flex;
}


.all-car-tips-up,.all-car-tips-next{
    position: absolute;
    width: 2rem;
    height: 7.2rem;
    z-index: 9;
    top: 0;
    top: 50%;
    transform: translateY(-50%);
}
.all-car-tips-up{
    left: 4.5rem;
}
.all-car-tips-next{
    transform: scaleX(-1);
    right: 0;
    right: 4.5rem;
}


.tab-content-vechile-content .items .up{
    width: 2.2rem;
    height: 4.4rem;
    font-family: 'DINEngschrift';
    font-weight: normal;
    font-size: 2.1rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.tab-content-vechile-content .items .money{

    font-family: SweiSansCJKsc, SweiSansCJKsc;
    font-weight: bold;
    font-size: 4.45rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;

}
.pff-number{
    gap: 4.5rem;
    margin-left: 1.2rem;
}
.numbers{
    margin-left: 1.8rem;
}
.off{
    font-family: 'BebasNeue';
    font-size: 8.15rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}
.on-select{
    font-family: 'DINEngschrift';
    font-size: 1.66rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.3rem;
    margin-left: 1.2rem;
}
.fu{
    width: 1.1rem;
    height: 1.1rem;
    font-family: JDLANGZHENGTI--GB1, JDLANGZHENGTI--GB1;
    font-weight: normal;
    font-size: 2.7rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 0.9rem;
}
.or{
    width: 2.4rem;
    height: 3.5rem;
    font-family: 'BebasNeue';
    font-size: 2.86rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 2rem;
    display: block;
    border-top: 2px solid #fff;
    line-height: 1.2;
    border-bottom: 2px solid #fff;
}
.finan{
    width: 10.4rem;
    height: 3.1rem;
    font-family: 'DINEngschrift';
    font-size: 1.66rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 2rem;
}
.zero{

    font-family: 'BebasNeue';
    font-size: 10.15rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}
.fu1{

    font-family: TenSans, TenSans;
    font-weight: bold;
    font-size: 4.8rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}


.arp{

    font-family: 'DINEngschrift';
    font-size: 3.37rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}
.for{
    font-family: 'DINEngschrift';
    font-size: 1.66rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.3rem;
    margin-top: -2rem;
}
.concat{
    margin-top: 6rem;
    margin-left: 67rem;
    gap: 1.8rem;
}

.concat img{
    width: 4.6rem;
    height: 3.9rem;
}
.concat span{

    font-family: 'bahnschrift';
    font-size: 2.26rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

@media screen and (max-width: 768px) {
    .banner-home {
        aspect-ratio: 9/16;
    }

    .banner-home .main-title {
        font-size: 19rem;
        position: absolute;
        top: 50%;
        left: 50%;
        /*transform: translate(-50%, -50%);*/
        width: 100%;
        text-align: center;
        left: 0 !important;
    }
    .models .models-right{
        font-size: 7.1rem;
        line-height: 1.3;
        width: 37%;
    }
    .models{
        padding: 11.2rem 5.9rem 11.5rem 5.5rem;
    }
    .tab-buttons span{
        width: 52.3rem;
        height: 13.4rem;
        line-height: 11.4rem;
        font-size: 6.8rem;
    }
    .models .container-init{
        gap: 0px;
    }
    .smart-tab-content{
        height: 77vh;
    }
    .tab-content-vechile-content .items{
        position: relative;
        width: 100%;
        height: auto;
        padding-left: 7rem;
    }
    .smart-tab-content .img-phone,.smart-tab-content::before{
        height: 100% ;
    }
    .smart-tab-content .container-init{
        height: 100%;
    }
    .tab-content-vechile-content .items span.A5 {
        font-size: 14.7rem;
        margin-top: 12.6rem;
    }
    .tab-content-vechile-content .items span.des{
        margin-top: 63.6rem;
        font-size: 7rem;
        width: auto;
        height: auto;
    }
    .number-text{
        margin-top: 16rem;
        gap: 2rem;
    }
    .tab-content-vechile-content .items .up{
        font-size: 7.1rem;
        width: 7.2rem;
    }
    .tab-content-vechile-content .items .money{
        font-size: 13.45rem;
    }
    .off{
        font-size: 20.15rem;
    }
    .on-select{
        font-size: 7.6rem;
    }
    .fu{
        width: 3.1rem;
        font-size: 8.7rem;
    }
    .or{
        width: 7.4rem;
        height: 12.5rem;
        font-size: 9.86rem;
    }
    .finan{
        width: 23.4rem;
        height: 3.1rem;
        font-size: 5.66rem;
        display: none;
    }
    .zero{
        font-size: 28.15rem;
    }
    .fu1{
        font-size: 12.8rem;
    }
    .arp{
        font-size: 7.37rem;
    }
    .for{
        font-size: 6.66rem;
    }
    .concat img {
        width: 11.6rem;
        height: 8.9rem;
    }
    .concat span {
        font-size: 10.26rem;
    }
    .concat {
        margin-top: 18rem;
        margin-left: 124rem;
    }
    .tab-content-vechile-content .swiper-slide::before{
        height: 100vh !important;
    }
}