.n-products{ width: 100%; display: block; margin: 30px 0 50px;}
.n-products .title{ display: block; }
.n-products .title h2{ display: block; font-size: 42px; color: #000; line-height: 62px; font-weight: bold; text-transform: uppercase; padding: 40px 0 20px; margin-bottom: 40px; position: relative; text-align: center;}
.n-products .title h2::after {
    content: ""; left: 50%; transform: translateX(-50%); bottom: 0; position: absolute; background: #000; width: 80px; height: 3px;
}
.n-products .title p{ font-size: 16px; color: #535353; max-width: 100%; line-height: 24px; display: block; margin: 0; text-align: center;}

.Content{
    background-color: #f5f5f5;
}
.Content .back{ display: block; width: 100%; background: url(../images/background.jpg); height: 160px;}
.Content .back h2{ display: block; font-size: 42px; color: #ff0; line-height: 62px; font-weight: bold; text-transform: uppercase; padding: 40px 0 20px; margin-bottom: 40px; position: relative; text-align: center;}
.Content .back h2::after{ content: ""; left: 47%; bottom: 0; position: absolute; background: #ff0; width: 80px; height: 3px;}
.Content .main {
    width: 1280px; margin: 0 auto; padding: 0;
}
.products-nav{ display: block; font-size: 0; width: 1280px; margin: 0 auto; padding-bottom: 40px;}
.t-r{ text-align: right;}
.products-nav .list{ width: 23%; display: inline-block; position: relative; box-sizing: border-box; margin-right: 2.5%; margin-bottom: 5px; transition: all 0.3s ease-in-out; vertical-align: top;}
.products-nav .list:nth-of-type(4n) {
    margin-right: 0;
}
.products-nav .list .img{ width: 100%; text-align: right; transform: skewX(0); transform-origin:right bottom;overflow: hidden; margin-top: 30px;}
.products-nav .list .img img{ max-width: 100%; transform: skewX(0);transform-origin:right bottom; transition: all 0.3s ease-in-out}

.products-nav .list .box-text{ width: 100%; box-sizing: border-box; padding: 20px 5%; display: block; background-color: #333; height: 72px; margin-top: 8px;} 
.products-nav .list .box-text h3{ display: block; line-height: 1.5; color: #fff; font-weight: bold; text-align: center; font-size: 15px; position: relative; }
.products-nav .list .box-text h3::after{ content: ""; width: 50px; height: 2px; position: absolute; bottom: 0; left: 0; display: inline-block; transition: all 0.3s ease-in-out; display: none;}
.products-nav .list .box-text p{ color: #666; font-size: 14px; line-height: 1.5; margin: 10px 0; transition: all 0.3s ease-in-out; display: none;}



.products-nav .list:hover{ z-index: 2;}
.products-nav .list:hover .box-text h3{ color: #ff0;}

.products-nav .list:hover .box-text p{ color: #fff;}
.products-nav .list:hover .box-text a{ background: #fff; color: #000;}

/*         





/* productlist */
.productslist{ width: 100%; display: none; font-size: 0;}
.productslist li{ width: 282.5px; display: inline-block; height: auto; box-sizing: border-box; margin: 40px 15px 0;}
.productslist li a{ width: 100%; float: left; position: relative;}
.productslist li .pic{ display: block; position: relative; z-index: 2; transition: all 0.3s ease-in-out}
.productslist li .pic img{ max-width: 100%; max-height: 100%;}
.productslist li .tit{ width: 100%; background:rgba(38,42,114,.8); display: block; text-align: center; font-family: "Futura Md BT Medium"; line-height: 62px; font-size: 18px; transform:scaleY(.85); color: #dedede;}


.n-cp-view{ display: block;}
.n-cp-view .con-1{ display: block; font-size: 0; margin-top: 50px;}
.n-cp-view .con-1 .pic{ width: 550px; height: 550px; box-sizing: border-box; border: 1px solid #ccc; display: inline-block;}
.n-cp-view .con-1 .pic img{ max-width: 100%;}
.n-cp-view .con-1 .tit{ display: block; font-family: "Futura Md BT Medium"; line-height: 80px; color: #0d1365; font-size: 36px; font-weight: bold; transform:scaleY(.85); letter-spacing: 1px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.n-cp-view .con-1 .text{ width: 690px; margin-left: 40px; display: inline-block; vertical-align: top;}


.n-cp-view .con-1 .Size{ width: 100%; display: inline-block; vertical-align: top; margin-top: 30px;}
.n-cp-view .con-1 .Size .type-1{ width: 140px; display: inline-block; vertical-align: top;}
.n-cp-view .con-1 .Size .type-1 b{ display: block; font-size: 24px; line-height: 40px; text-transform: uppercase; transform:scaleY(.85); font-weight: bold; color: #000; font-family: "Futura Md BT Medium";}
.n-cp-view .con-1 .Size .type-2{  width: 250px; display: inline-block; vertical-align: top;}
.n-cp-view .con-1 .Size .type-2 .name{ display: block; font-size: 16px; color: #000;  line-height: 40px;}
.n-cp-view .con-1 .Size .type-2 .type-cs{ display: block; line-height: 30px;}
.n-cp-view .con-1 .Size .type-2 .type-cs b{ font-size: 16px; color: #000; width: 15%; display: inline-block;}
.n-cp-view .con-1 .Size .type-2 .type-cs span{ font-size: 16px; color: #666; width: 85%; display: inline-block;}
.n-cp-view .con-1 .Size .type-3{  width: 260px; display: inline-block; vertical-align: top;}
.n-cp-view .con-1 .Size .type-3 img{ max-width: 100%;}
.n-cp-view .con-1 .oem{ width: 100%; display: inline-block; vertical-align: top; margin-top: 20px; padding-top: 30px; border-top: 1px solid #ddd;}
.n-cp-view .con-1 .oem .type-1{ width: 140px; display: inline-block; vertical-align: top;}
.n-cp-view .con-1 .oem .type-1 b{ display: block; font-size: 24px; line-height: 40px; text-transform: uppercase; transform:scaleY(.85); font-weight: bold; color: #000; font-family: "Futura Md BT Medium";}
.n-cp-view .con-1 .oem .type-2{  width: 50%; display: inline-block; vertical-align: top;}
.n-cp-view .con-1 .oem .type-2 .name{ display: block; font-size: 16px; color: #000;  line-height: 40px;}


.n-cp-view .con-2{ display: table; font-size: 0; margin-top: 50px; margin-bottom: 40px; width: 100%;}
.n-cp-view .con-2 >div{ width: 30%; display: table-cell; background: #eee; box-sizing: border-box; border-right: 2px solid #fff;}
.n-cp-view .con-2 .Vehicles{ width: 40%; border-right: 0px solid #fff;}
.n-cp-view .con-2 .Vehicles .table-row{padding: 0 30px;box-sizing: border-box; font-size: 16px;}
.n-cp-view .con-2 .Vehicles .table-row .text{padding: 0;border-bottom: 0;}
.n-cp-view .con-2 .Vehicles .table-row b {display: inline-block; }
.n-cp-view .con-2 .Vehicles .table-row span {width: auto;}
.n-cp-view .con-2 >div .tit{ width: 100%; display: block; text-transform: uppercase; background: rgba(13,19,101,.8); height: 60px; line-height: 60px; color: #fff; text-align: center; font-size: 16px; font-weight: bold;}
.n-cp-view .con-2 >div .table-row{ width: 100%; }
.n-cp-view .con-2 >div .text { display: inline-block; width: 100%; box-sizing: border-box; padding: 0 10px; border-bottom: 2px solid #fff; }
.n-cp-view .con-2 >div .text:last-child {border-bottom: 0;}
.n-cp-view .con-2 >div .text .name{ padding: 20px 0; display: inline-block; text-align: center; width: 40%; font-size: 16px; color: #666; font-weight: bold; vertical-align: top; line-height: 30px;}
.n-cp-view .con-2 >div .text .number{ padding: 20px 0; width: 60%; height: 100%; display: inline-block; padding-left: 10px; box-sizing: border-box; border-left: 2px solid #fff; font-size: 16px; color: #666; line-height: 30px;}
.n-cp-view .con-2 >div .text .number span{ display: block;}


.n-cp-view .con-2 >div .text > b{ display: inline-block; width: 100%; font-size: 16px; color: #666; font-weight: bold; vertical-align: top; line-height: 30px;}
.n-cp-view .con-2 >div .text > span{ width: 100%; display: inline-block; font-size: 16px; color: #666;  line-height: 30px;}

.product-button { margin-bottom: 40px; display: block; width: 114px; height: 51.4px; background-color: rgba(13,19,101,.8);  transition: background .5s ease-in-out; color: #fff; text-align: center;line-height: 51.4px; }
.product-button:hover { background-color: rgba(0, 0, 0,.8) }

.Content .lie { width: 1280px; display: block; margin: 0 auto; padding-bottom: 40px;}
.Content .lie ul { display: block; width: 100%;}
.Content .lie ul li { width: 32%; display: inline-block; margin: 20px 6px;}
.Content .lie ul li .img img{ max-width: 100%; width: 100%; display: block;}
.Content .lie ul li .img img:hover{ width: 100%; display: block;}
.Content .return{ margin-top: 20px; margin-left: 6px; font-size: 16px; width: 88px; height: 36px; line-height: 33px;text-align: center; display: block; border: 2px solid #000; color: #fff; background-color: #000; text-transform: uppercase;}
.Content .return:hover{ color: #ff0;}

@media screen and (max-width: 1600px){
    header .main{ width: 1200px; margin: 0 auto; padding: 0;}
	.i-quality .pagination span{ margin-right: 66px}
    .banner{ width: 1200px;}
    .i-about .main, .i-quality .main, .i-contact .main, .Content .lie{ width: 1200px;}
    .Content .main{ width: 1200px;}
    .i-pr .main{ width: 1240px;}
    .products-nav{ width: 1200px;}
    .Content .back h2::after,
    .about-common .back h2::after{
        left: 46%; bottom: 0; position: absolute;
    }

}

@media screen and (max-width: 1440px){
	header .main{ width: 1100px; margin: 0 auto; padding: 0;}
    .banner{ width: 1100px;}
    .i-about .main, .i-quality .main, .i-contact .main, .Content .lie{ width: 1100px;}
    .Content .main{ width: 1100px;}
    .i-pr .main{ width: 1140px;}
    .products-nav{ width: 1100px;}
    .products-nav .list .box-text h3{ display: block; line-height: 1.5; color: #fff; font-weight: bold; text-align: center; font-size: 14px; position: relative; }
}

@media screen and (max-width: 1280px){
	header .main{ width: 960px; margin: 0 auto; padding: 0;}
    .banner{ width: 960px;}
    .i-about .main, .i-quality .main, .i-contact .main, .Content .lie{ width: 960px;}
    .Content .main{ width: 960px;}
    .i-pr .main{ width: 1000px;}
    .products-nav{ width: 960px;}
    .products-nav .list .box-text h3{ display: block; line-height: 1.5; color: #535353; font-weight: bold; text-align: center; font-size: 14px; position: relative; }
}