.kv{
    position: relative;
    background-color: #000;
	overflow:hidden;
	height:100vh;
}
.kv img{width:100%}
.kv .kv-swiper{width:100%;height:100%;overflow: hidden;}
.kv .kv-swiper .swiper-slide{
    color: #fff;
    width:100%;height:100%;position:relative;background-repeat:no-repeat;background-position:50%;background-size:cover}

.kv .headline{font-size:70px;line-height:1;color:#fff;text-align:right;margin-bottom:50px}
.kv .btns{display:flex}
.kv .btns .a{position:relative;display:flex;width:260px;height:55px;margin-right:2vw;background-color:#fce503;color:#000;border-radius: 4px;}
.kv .btns .a a{
position:absolute;
width:100%;
height:100%;
top:0;
left:0
}
.kv-nav{
	bottom:5vh;
}
.kv .btns .a:last-child{margin-right:0}
.kv .btns .a img{display: block;margin-right: 21px;margin-top: 2px;width: auto;}
.kv .btns .img{width: 14px;height: 22px;margin-right: 21px; margin-top: 2px;background: url(/assets/images/location-icon.png) scroll no-repeat 0 0;}
/* .kv .btns .border:hover .img{background-image: url(/assets/images/location-hover-icon.png);} */
.grids{background-color:#000}
.grids img{width:100%}
.grids a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:8;}
.grids-item-x4-x1{display:flex;width:100%;flex-direction:row}
.grids .grids-item img{width:100%}
.grids .x4{flex:1;background-position:center center;background-repeat:no-repeat;background-size:105% 105%;
    /* height:41.841vw; */
    overflow: hidden;
    cursor:pointer;transition:all .2s linear;position:relative}
.grids .x4::after{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);transition:all .2s linear}
.grids .x4:hover::after{background-color:rgba(0,0,0,0)}
.grids .x1_4{flex:1;display:flex;flex-wrap:wrap;overflow: hidden;}
.grids .x1_4 .x1{flex:0 0 50%;
    /* height:20.92vw; */
}
.grids-item-x1{display:flex}
.grids-item-x1 .x1{flex:1;
    /* height:20.92vw */
}
.grids .x4 .headline{position:absolute;top:12.31%;left:5.2%;color:#fff;font-size:40px}
.grids .x4 .p2{font-size:22px;margin-top:10px;opacity:0;transition:all .3s linear}
.grids .x4:hover .p2{opacity:1}
.grids .x4:hover .show-detail{opacity:1;transition:all .3s linear}
.grids .x4 .show-detail{position:absolute;left:5.2%;bottom:12.31%;display:flex;width:190px;height:55px;background-color:#fce503;color:#000;font-size:20px;font-weight:700;opacity:0}
.grids .x1{background-position:center center;background-repeat:no-repeat;background-size:105% 105%;cursor:pointer;transition:all .2s linear;position:relative;overflow:hidden}
.grids .x1::after{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);transition:all .2s linear}
.grids .x1:hover{background-size:100% 100%}
.grids .x1:hover::after{background-color:rgba(0,0,0,0)}
.grids .bottom{position:absolute;width:100%;left:0;bottom:0%;
    background-color:rgba(0,0,0,.4);color:#fff;font-size:22px;
    text-align:center;height: 70px;transition:bottom .4s ease-out;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grids .bottom br{
    display: none;
}
.grids .bottom p{line-height:1.2;}

.grids .bottom p sup{
	font-size: 15px;
    margin-left: 2px;
}


.grids .x1 .bottom .icon{margin-top:5px;font-size:26px;line-height:1}
.grids .x1:hover .bottom,.grids .x4:hover .bottom{bottom:0}
.grids .x4 .bottom p{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8%;
}
.grids .x4 .bottom .btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8%;
    width: 20%;
    min-width: 150px;
    height: 70%;
    font-size: 18px;
    color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 4px;
}

.grids .x4:hover .bottom .btn{
    background-color: #fce503;
    color: #000;
    border-color: #fce503;
}
.banner-bj{
    transform: scale(1.05);
    transition: transform 0.2s linear;
    transform-origin: 50% 50%;
}

.grids .x4:hover .banner-bj ,.grids .x1:hover .banner-bj{
    transform: scale(1);
}

.grids a{
    border: 1px solid #000;
    box-sizing: border-box;
}

.grids .grids-item-x4-x1:first-child .x4 > a{
    border-left: none;
}
.grids .grids-item-x4-x1:last-child .x4 > a{
    border-right: none;
}

.grids .grids-item-x4-x1:first-child .x1_4 .x1:nth-child(2) > a{
    border-right: none;
}
.grids .grids-item-x4-x1:first-child .x1_4 .x1:nth-child(4) > a{
    border-right: none;
}

.grids-item-x1 .x1:first-child > a{
    border-left: none;
}

.grids-item-x1 .x1:last-child > a{
    border-right: none;
}


.grids .grids-item-x4-x1:last-child .x1_4 .x1:nth-child(1) > a{
    border-left: none;
}
.grids .grids-item-x4-x1:last-child .x1_4 .x1:nth-child(3) > a{
    border-left: none;
}



.kv .kv-swiper .swiper-slide .artic .a{
    border-radius: 4px;
    overflow: hidden;
    width: 13.69vw;
    height: 3.12vw;
    font-weight: bold;
	position:relative;
}

.kv .kv-swiper .swiper-slide .artic a{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.swiper-slide-btn{
    position: absolute;
    width: 70px;
    height: 70px;
    background: url("") scroll no-repeat center center;
    background-size: 100% 100%;
    bottom: 45%;
    transform: translateY(-50%);
    z-index: 9;
    cursor: pointer;
    transition: transform 0.3s linear;
	display:none;
}
.swiper-slide-btn:hover{
    transform: translateY(-50%) scale(1.1);
}
.slide-btn-pre{
    left: 20px;
    background-image: url(/assets/images/left_btn.png);
}
.slide-btn-next{
    right: 20px;
    background-image: url(/assets/images/right_btn.png);
}

.kv .kv-swiper .swiper-slide-1{
   background-image:url(/assets/images/home/dstl-home-kv.jpg);
   background-image:url(/assets/images/home/4w_auto_0430.jpg);
   background-image:url(/assets/images/home/anakee-0627.jpg);
   background-image:url(/assets/images/home/kv_primacy_5_launch_pc.jpg);
}

.kv .kv-swiper .swiper-slide .artic{
	position: absolute;
    width: 75%;
    max-width: 1250px;
    left: 50%;
    transform: translateX(-50%);
	text-align: left;
	bottom: 38.63%;
}

.kv .kv-swiper .swiper-slide-1 .artic{
    #position: absolute;
    #width: 75%;
    #max-width: 1250px;
    #left: 50%;
    #transform: translateX(-50%);
    #bottom: 35.63%;
    #text-align: right;
	#text-align: left;
}

.kv .kv-swiper .swiper-slide-1 .artic img{
    width: 18.125vw;
    display: inline-block;
    max-width: 348px;
}

.kv .kv-swiper .swiper-slide-2{
    background-image:url(/assets/images/home/kv-2.jpg);
}


.kv .kv-swiper .swiper-slide-3{
    background-image:url(/assets/images/home/kv-3.jpg);
}

.kv .kv-swiper .swiper-slide-4{
    background-image:url(/assets/images/home/kv-4.jpg);
    background-position: center bottom;
}

.kv .kv-swiper .swiper-slide-5{
    background-image:url(/assets/images/home/kv-5.jpg);
    background-position: center center;
}
.kv .kv-swiper .swiper-slide-6{
    background-image:url(/assets/images/home/kv-6.jpg);
    background-position: center center;
}


.kv .swiper-slide-1 .btns{
    display: flex;
    #justify-content: flex-end;
    margin-top: 2vw;
}

.kv .swiper-slide-1 .btns .img{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.kv .swiper-slide-1 .btns .a2{
    background-color: #27509b;
    border-color: #27509b;
    color: #fff;
}

.kv .swiper-slide-1 .btns .a1 .img{
    width: 17px;
    height: 23px;
    background-image: url(/assets/images/tire-icon.png);
}
.kv .swiper-slide-1 .btns .a1:hover{
    background-color: #27509b;
    color: #fff;
}
.kv .swiper-slide-1 .btns .a1:hover .img{
    background-image: url(/assets/images/tire-icon-white.png);
}


.kv .swiper-slide-1 .btns .a2 .img{
    width: 14px;
    height: 22px;
    background-image: url(/assets/images/location-icon-2.png);
}
.kv .swiper-slide-1 .btns .a2:hover{
    background-color: #fce503;
    color: #000;
}
.kv .swiper-slide-1 .btns .a2:hover .img{
    background-image: url(/assets/images/location-hover-icon.png);
}


.kv .swiper-slide-2 .btns .a1 .img{
    width: 17px;
    height: 23px;
    background-image: url(/assets/images/tire-icon.png);
}

.kv .swiper-slide-2 .btns .a1:hover .img{
    background-image: url(/assets/images/tire-icon-white.png);
}

.kv .kv-swiper .swiper-slide-2 .artic{
    #position: absolute;
    #width: 28.36vw;
    #left: 18%;
    #bottom: 35.36%;
}
.kv .kv-swiper .swiper-slide-2 .artic img{
    width: 29.16vw;
}

.kv .kv-swiper .swiper-slide-2 .artic .btns{
	margin-top:3.3vw;
}

.kv .kv-swiper .swiper-slide-2 .a{
    background-color: #fce503;
    color: #000;
}

.kv .kv-swiper .swiper-slide-2 .a2{
    background-color: #27509b;
    border-color: #27509b;
    color: #fff;
}


.kv .kv-swiper .swiper-slide-2 .a1:hover{
    background-color: #27509b;
    color: #fff;
}

.kv .kv-swiper .swiper-slide-2 .a2:hover{
    background-color: #fce503;
    color: #000;
}

.kv .kv-swiper .swiper-slide-3 .artic{
    #position: absolute;
    #width: 75%;
    #max-width: 1250px;
    #height: auto;
    #left: 62%;
    #bottom: 46%;
    #transform: translateX(-50%);
}
.kv .kv-swiper .swiper-slide-3 img{
    width: 17.29vw;
}

.kv .kv-swiper .swiper-slide-3 .artic .a{
    #border: 1px solid #fff;
    #box-sizing: border-box;
	background:#fce503;
    color: #000;
    margin-top: 30px;
	margin-top:5.67vw
}
.kv .kv-swiper .swiper-slide-3 .artic .a:hover{
    background-color: #27509b;
    color: #fff;
}


.kv .kv-swiper .swiper-slide-4 .artic{
    #position: absolute;
    #width: 28.89vw;
    #left: 50%;
    #bottom: 35.6%;
    #transform: translateX(-50%);
}

.kv .kv-swiper .swiper-slide-4 img{
    width: 17.86vw;
}

.kv .kv-swiper .swiper-slide-4 .a{
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    margin-top: 5.98vw;
}

.kv .kv-swiper .swiper-slide-4 .a:hover{
    background-color: #bd2332;
	border: 1px solid #bd2332;
    color: #fff;
}



.kv .kv-swiper .swiper-slide-5 .artic{
    #position: absolute;
    #width: 37.29vw;
    #left: 50%;
    #bottom: 40%;
    #transform: translateX(-50%);
}
.kv .kv-swiper .swiper-slide-5 .artic img{
	width:24.68vw;
}

.kv .kv-swiper .swiper-slide-5 .a{
    background-color: #fce503;
    color: #000;
	margin-top:3.3vw;
}

.kv .kv-swiper .swiper-slide-5 .a:hover{
    background-color: #27509b;
    color: #fff;
}




.kv .kv-swiper .swiper-slide-6 .artic{
    #position: absolute;
    #width: 75%;
    #max-width: 1250px;
    #height: auto;
    #left: 50%;
	#bottom:46%;
    #transform: translateX(-50%);
	#display: flex;
    #flex-direction: column;
    #align-items: flex-end;
}
.kv .kv-swiper .swiper-slide-6 img{
    width: 24.79vw;
}

.kv .kv-swiper .swiper-slide-6 .artic .a{
    box-sizing: border-box;
    color: #000;
    margin-top: 3.64vw;
	background-color: #fce503;
}
.kv .kv-swiper .swiper-slide-6 .artic .a:hover{
    color: #fff;
	background-color: #27509C;
}









@media (max-width:1366px){

.kv .headline{font-size:46px;margin-bottom:35px}
.kv .btns .a{width:180px;height:40px;margin-right: 20px;}
.grids .x4 .show-detail{width:140px;height:40px;font-size:18px}
.grids .x1 .bottom,.grids .x4 .bottom{font-size:16px}
.kv .btns .a img,.kv .btns .a .img{
    margin-right: 10px;
    margin-top: 0;
}
.swiper-slide-btn{
    width: 55px;
    height:55px;
}
.kv .kv-swiper .swiper-slide .artic .a{
    height: 40px;
}


}
@media (max-width:1024px){
.kv{
height:auto;
}
.kv .kv-swiper .swiper-slide-1 .artic,.kv .kv-swiper .swiper-slide-2 .artic{
    width: 85%;
}
.grids .bottom{font-size:18px;height: 55px;}
.grids .x4 .bottom .btn{
    height: 75%;
    font-size: 14px;
}
.grids .x1 .bottom .icon{font-size:20px;margin-top:0}
.grids .x4 .show-detail{width:108px;
    /* height:32px; */
    font-size:14px}
.kv .kv-swiper{
height:100vh;
height:890px;
height:900px;

}
}

@media (max-width:750px){
.kv .kv-swiper{
	height:calc(100vh + 200px);
}
.kv-nav .swiper-slide{
	height:55px;
}
.grids .x4{flex:auto;
    /* height:83.68vw */
}
.grids-item-x4-x1{flex-direction:column}
.grids-item-x1{
    flex-direction:row;
    flex-wrap: wrap;
}
.grids .x1{
    flex:0 0 50%;
    /* height:41.84vw!important */
}
.grids .bottom{display:flex;flex-direction: column;justify-content: center;
    align-items: center;
    font-size:16px;padding: 0;height: 50px;}
    .grids .x4 .bottom{
        height: 55px;
    }
.grids .x4 .bottom .btn{
        width: 120px;
        height: 70%;
        min-width: auto;
        //background-color: #fce503;
       // color: #000;
        //border-color: #fce503;
}
.grids .x1 .bottom, .grids .x4 .bottom {
    font-size: 14px;
}
.grids .bottom br{
    display: block;
}
.grids .x1{
    background-size: 100% 100%;
}

.follow-us .qr-code .text{font-size:12px}

.kv .headline{
    font-size: 40px;
}
.kv .kv-swiper .swiper-slide{
    background-position: 0 0;
    background-size: 100% auto;
    background-color: #000;
}
.banner-bj{
    transform: scale(1);
}

.grids .grids-item-x4-x1:first-child .x4 > a{
    border-right: none;
}

.grids .grids-item-x4-x1:first-child .x1_4 .x1:nth-child(2n-1) > a{
    border-left: none;
}
.grids .grids-item-x4-x1:first-child .x1_4 .x1:nth-child(2n) > a{
    border-right: none;
}

.grids-item-x1 .x1:nth-child(2n-1) > a{
    border-left: none;
}
.grids-item-x1 .x1:nth-child(2n) > a{
    border-right: none;
}

.grids .grids-item-x4-x1:last-child .x4 > a{
    border-left: none;
}
.kv .headline{
    margin-bottom: 22px;
}

.kv .headline{
    margin-bottom: 4vh;
}
.kv .btns .a{
    flex: 0.472;
    margin: 0;
}

.kv .kv-swiper .swiper-slide .artic .a{
    width: calc(0.472 * 90vw);
}

.kv .kv-swiper .swiper-slide-1 .btns{
    justify-content: space-between;
    margin-top: 140px;
	margin-top:0;
	position:absolute;
	bottom:0
}
.kv .kv-swiper .swiper-slide-1{
    background-image:url(/assets/images/home/kv-1-mobi.jpg);
	background-image:url(/assets/images/home/dstl-home-kv-m.jpg);
	background-image:url(/assets/images/home/4w_m_0430.jpg);
	background-image:url(/assets/images/home/anakee-0627-750.jpg);
	 background-image:url(/assets/images/home/kv_primacy_5_launch_m.jpg);
    background-position: 0 0vh;
}
.kv .kv-swiper .swiper-slide .artic{
	width:90%;
}

.kv .kv-swiper .swiper-slide-2 .artic .btns{
	justify-content: space-between;
	margin-top:90px;
}

.kv .kv-swiper .swiper-slide-2 .btns .a{
	flex:none;
	margin:0
}

.kv .kv-swiper .swiper-slide-2 .btns .a2{
}


.kv .kv-swiper .swiper-slide-2{
    background-image:url(/assets/images/home/kv-2-m.jpg);
    background-position: 0 0;
}
.kv .kv-swiper .swiper-slide-2 .artic{
    width: 90%;
    transform: none;
    left: 50%;
	bottom: 497px;
	bottom:540px;
	#top:18%;
	transform: translateX(-50%);
}
.kv .kv-swiper .swiper-slide-2 .artic img{
    width:46.93vw;
}
.kv .kv-swiper .swiper-slide-6 .artic .a{
    margin-top: 120px;
}

.kv .kv-swiper .swiper-slide-3 img{
	width:56.66vw;
}

.kv .kv-swiper .swiper-slide-3{
    background-image:url(/assets/images/home/kv-3-m.jpg);
    background-position: 0 0;
}

.kv .kv-swiper .swiper-slide-4{
    background-image:url(/assets/images/home/kv-4-m.jpg);
    background-position: 0 0;
}
.kv .kv-swiper .swiper-slide-4 .artic{
   # width: auto;
   # left: 50%;
	#bottom:490px;
	#top:20%;
	bottom:468px !important;
}

.kv .kv-swiper .swiper-slide-4 .artic .a{
	margin-top:120px;
	#background:#bd2332;
	#border-color:#bd2332;
	color:#fff;
}

.kv .kv-swiper .swiper-slide-4 .artic img{
       width: 58.66vw;
}




.swiper-slide-btn{
    width: 40px;
    height: 40px;
	bottom:400px;
}

.kv .kv-swiper .swiper-slide-5{
    background-image:url(/assets/images/home/kv-5-m.jpg);
    background-position: 0 0;
}
.kv .kv-swiper .swiper-slide-5 .artic{
   # width: auto;
   # left: 50%;
  	bottom:450px !important;
	#top: 27%;
}
.kv .kv-swiper .swiper-slide-5 .artic img{
    width:64.66vw;
}
.kv .kv-swiper .swiper-slide-5 .a{
    margin-top: 15vh;
}


.kv .kv-swiper .swiper-slide-6{
    background-image:url(/assets/images/home/kv-6-m.jpg);
    background-position: 0 0;
}
.kv .kv-swiper .swiper-slide-6 .artic{
    width: 90%;
    left: 50%;
	align-items:flex-start;
	bottom:464px;
	bottom:468px;
	#top: 34%;
}
.kv .kv-swiper .swiper-slide-6 .artic img{
    width: 80.66vw;
}
.kv .kv-swiper .swiper-slide-6 .a{
    margin-top: 20vh;
}




.kv .kv-swiper .swiper-slide-1 .artic{
    width: 90%;
    bottom: 518px;
	#top:20%;
	
	top: 0;
    position: absolute;
	
}

.kv .kv-swiper .swiper-slide-1 .artic img{
    width: 60vw;
	
	position: relative;
    top: 20vh;
}

.kv .kv-swiper .swiper-slide-1 .guide-text{
    position: absolute;
    bottom: 20%;
    width: 52vw;
    left: 5%;
}
.kv .kv-swiper .swiper-slide-3 .artic{
    width: 90%;
    left: 50%;
    bottom: 468px !important;
	#top:27%;
}
.kv .kv-swiper .swiper-slide-3 .guide-text{
    width: 42.13vw;
}
.kv .kv-swiper .swiper-slide-3 .artic .a{
    margin-top: 170px;
    background-color: #fce503;
    border-color: #fce503;
}


.x1_4_top .x1:nth-child(1){
	order:1
}
.x1_4_top .x1:nth-child(2){
	order:4
}
.x1_4_top .x1:nth-child(3){
	order:2
}
.x1_4_top .x1:nth-child(4){
	order:3
}

.kv-nav{
bottom:10px;
}

.kv .kv-swiper .swiper-slide .artic{
	bottom:430px;
}
.grids .bottom p sup{
	font-size:10px;
}

.grids .x4 .bottom p{
	left:4%;
}

}


@media (max-width:750px) and (max-height:750px){
	.kv .kv-swiper .swiper-slide-1{
		  background-position: 0px -10vh;
	}
}