html,body{
    width: 100%;
    /*height: 100%;*/
    /*overflow-x: hidden;*/
}

.wrap{
    width: 100%;
    min-height: 800px;
    /*background-color: #ffffff;*/
    /*display: none;*/
}
.arrow-box{
    position: absolute;
    width: 90px;
    height: 31px;
    right: 178px;
    top:330px;
    z-index: 100;
}
.arrow-btn{
    float: left;
    /*color: #000000;*/
    /*font-size: 31px;*/
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    width: 31px;
    height: 100%;
}
.arrow-btn:focus{
    outline: none;
}
.arrow-left{
    margin-right: 25px;
    background-image: url("../img/arrow-left.png");
}
.arrow-right{
    background-image: url("../img/arrow-right.png");
}
.banner-container{
    width: 100%;
    height: 100%;
}
.banner-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.banner-slide {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    display: none;
}
.banner-slide:first-child{
    display: block;
}
.car-user-info{
    float: left;
    margin-top: 80px;
}
.car-info-box{
    width: 515px;
    min-height: 200px;
    float: right;
    margin-top: 80px;
    margin-right: 175px;
}
.car-info-name{
    float: left;
    font-size: 60px;
    color: #3c3c3c;
    padding-right: 25px;
    border-right: 1px solid #000000;
}
.car-info-price{
    color: #333333;
    float: left;
    font-size: 24px;
    padding-left: 30px;
    padding-top: 40px;
}
.car-info-details{
    font-size: 16px;
    color: #333333;
    margin-top: 20px;
    margin-bottom: 20px;
}
.car-info-icon{
    width: 119px;
    height: 34px;
    background-image: url("../img/vr-btn.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.car-appearance-box{
    width: 100%;
    margin-top: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    margin-bottom: 50px;
    min-height: 440px;
}
.car-line-box{
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.car-appearance-img{
    position: relative;

}
.car-appearance-left{
    position: absolute;
    height: calc(100% - 45px);
    width: 10px;
    left: 200px;
    bottom: 45px;
    background-image: url("../img/car-info-left.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.car-appearance-left.on{
    animation:borderHeight 3s ease-in-out;
    -webkit-animation: borderHeight 3s ease-in-out;
    -moz-animation: borderHeight 3s ease-in-out;
    -ms-animation: borderHeight 3s ease-in-out;
    -o-animation: borderHeight 3s ease-in-out;
}
.car-left-top,
.car-left-bottom{
    position: absolute;
    left: 13px;
    font-size: 12px;
    color: #333333;
}
.car-left-top{
    top: -5px;
}
.car-left-bottom{
    bottom: -5px;
}
.car-appearance-bottom{
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 20px;
    left: 0;
    background-image: url("../img/car-info-bottom.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.car-appearance-bottom.on{
    animation:borderWidth 3s ease-in-out;
    -webkit-animation: borderWidth 3s ease-in-out;
    -moz-animation: borderWidth 3s ease-in-out;
    -ms-animation: borderWidth 3s ease-in-out;
    -o-animation: borderWidth 3s ease-in-out;
}
.car-bottom-left,
.car-bottom-right{
    position: absolute;
    top: -12px;
    font-size: 12px;
    color: #333333;
}
.car-bottom-left{
    left: 0;
}
.car-bottom-right{
    right: 0;
}
.go-top{
    display: none;
}

@keyframes borderWidth {
    0%{
        width: 0;
        background-size: auto;
    }
    100%{
        width: 100%;
        background-size: 100% 100%;
    }
}
@-webkit-keyframes borderWidth {
    0%{
        width: 0;
        background-size: auto;
    }
    100%{
        width: 100%;
        background-size: 100% 100%;
    }
}
@-ms-keyframes borderWidth {
    0%{
        width: 0;
        background-size: auto;
    }
    100%{
        width: 100%;
        background-size: 100% 100%;
    }
}
@-moz-keyframes borderWidth {
    0%{
        width: 0;
        background-size: auto;
    }
    100%{
        width: 100%;
        background-size: 100% 100%;
    }
}
@-o-keyframes borderWidth {
    0%{
        width: 0;
        background-size: auto;
    }
    100%{
        width: 100%;
        background-size: 100% 100%;
    }
}

@-o-keyframes borderHeight {
    0%{
        height: 0;
        background-size: auto;
    }
    100%{
        height: calc(100% - 45px);
        background-size: 100% 100%;
    }
}
@keyframes borderHeight {
    0%{
        height: 0;
        background-size: auto;
    }
    100%{
        height: calc(100% - 45px);
        background-size: 100% 100%;
    }
}
@-webkit-keyframes borderHeight {
    0%{
        height: 0;
        background-size: auto;
    }
    100%{
        height: calc(100% - 45px);
        background-size: 100% 100%;
    }
}
@-ms-keyframes borderHeight {
    0%{
        height: 0;
        background-size: auto;
    }
    100%{
        height: calc(100% - 45px);
        background-size: 100% 100%;
    }
}
@-moz-keyframes borderHeight {
    0%{
        height: 0;
        background-size: auto;
    }
    100%{
        height: calc(100% - 45px);
        background-size: 100% 100%;
    }
}


@media screen and  (max-width: 1760px){
    .car-user-info{
        width: 810px;
    }
    .car-user-img{
        width: 100%;
    }
    .car-info-box{
        margin-right: 30px;
    }
}
@media screen and  (max-width: 1380px){
    .car-user-info{
        width: 600px;
    }
    .car-user-img{
        width: 100%;
    }
    .car-info-box{
        margin-right: 30px;
    }
    .car-appearance-img{
        width: 80%;
    }
    .banner-xingzhou-img{
        width: 100%;
    }
}