h2{
    font-size: 36px;
}
/*header{*/
/*    background:rgba(68, 67, 67, .5);*/
/*}*/

.banner-con{
    margin-top: 80px;
    background: linear-gradient(to right,#d7d7d7,#ffffff);
}

.banner-con .banner{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner-con .banner .left-con h1{
    font-size: 75px;
    color: #444343;
    font-weight: 600;
    margin-bottom: 20px;
}
.banner-con .banner .left-con ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.banner-con .banner .left-con ul:nth-of-type(1){
    font-size: 14px;
}
.banner-con .banner .left-con ul:nth-of-type(2){
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 60px 0 100px;
    gap: 4vw;
} 
.banner-con .banner .left-con ul:nth-of-type(2) li p{
    line-height: 1.5;
}
.banner-con .banner .left-con ul:nth-of-type(2) li p:first-child{
    color: #f39800;
}
.banner-con .banner .left-con ul:nth-of-type(3) li:first-child{
    border: 1px solid #444343;
}
.banner-con .banner .left-con ul:nth-of-type(3) li a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    color: #444343;
    height: 100%;
    transition: all .5s ease;
}
.banner-con .banner .left-con ul:nth-of-type(3) li a:hover{
    background: #ff6d00;
    color: #ffffff;
}
.banner-con .banner .left-con ul:nth-of-type(3){
    align-items: stretch;
}
.banner-con .banner .left-con ul:nth-of-type(3) li:last-child{
    background-color: #ff6d00;
    padding: 10px 50px;
    color: #ffffff;
}
.banner-con .banner .left-con ul:nth-of-type(3) li:last-child p:last-child{
    font-size: 22px;
    font-weight: 600;
}
.submenu{
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 5vw;
    z-index: 200;
}
.submenu ul{
    display: flex;
    justify-content: center;
    gap: 20px;

}
.submenu ul li a{
    background-color: #ffebbe;
    display: block;
    width: 180px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    color: #444343;
}

.introduce{
    max-width: 1400px;
    margin: 80px auto;

}
.introduce h2{
    margin-bottom: 36px;
}
.introduce .bottoms{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 63px;
}
.introduce .bottoms .detail{
    max-width: 56%;
}
.introduce .detail p{
    line-height: 2;
}
/*.introduce .detail .material,.introduce .detail .application{*/
/*    text-indent: 2em;*/
/*}*/
.introduce .detail ul{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 48px;
}
.advantage-con{
    background: url(../../images/advantage-bg.png) no-repeat;
    background-size: 100% 100%;
}
.advantage-con ul{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 64px 0;
}
.advantage-con ul li{
    width: calc(100% / 3);
 
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: #444343;
    border-left: 2px solid #f39700;
}
.advantage-con ul li:last-child{
    border-right: 2px solid #f39700;
}
.principle-con{
    margin: 80px 0;
}
.principle-con .principle{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}
 h2{
    margin-bottom: 30px;
    font-weight: bold;
}
.principle-con .principle .principle-left p{
    text-indent: 2em;
    line-height: 2;
}
.principle-con .principle img{
    max-width: 50%;
}
.product-images{
    margin: 80px 0;
}
.product-images .product-images-con{
    max-width: 1400px;
    margin: 0 auto;
}
.product-images ul{
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.product-images ul.top-img{
    margin-bottom: 24px;
}
.performance-con{}
.performance-con .performance{
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}
.performance-con .performance img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    max-width: 450px;
}
.performance-con .performance ul{
    display: flex;
    justify-content: space-between;
    gap: 22px 0;
    flex-wrap: wrap;
}
.performance-con .performance ul li{
    width: 50%;
    background-color: #f6f6f6;
   
}
.performance-con .performance ul li:nth-child(odd){
   
    
    padding: 24px 250px 24px 50px;
    text-align: right;
    
}
.performance-con .performance ul li:nth-child(even){
    padding: 24px 50px 24px 250px;
    text-align: left;
}
.performance-con .performance ul li h3{
    font-size: 20px;
    font-weight: bold;
    color: #f39800;
    margin-bottom: 10px;
    position: relative;
}
.performance-con .performance ul li p{
    font-size: 14px;
    line-height: 2;
}
/*.performance-con .performance ul li:nth-child(1) h3:after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 100px;*/
/*    background-color: #f39800;*/
/*    transform: rotate(290deg);*/
/*    right: -57px;*/
/*    top: -14px;*/
/*}*/
/*.performance-con .performance ul li:nth-child(2) h3:after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 100px;*/
/*    background-color: #f39800;*/
/*    transform: rotate(252deg);*/
/*    left: -57px;*/
/*    top: -14px;*/
/*}*/
/*.performance-con .performance ul li:nth-child(3) h3:after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 200px;*/
/*    background-color: #f39800;*/
/*    transform: rotate(265deg);*/
/*    right: -108px;*/
/*    top: -93px;*/
/*}*/
/*.performance-con .performance ul li:nth-child(4) h3:after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 200px;*/
/*    background-color: #f39800;*/
/*    transform: rotate(275deg);*/
/*    left: -108px;*/
/*    top: -93px;*/
/*}*/
.technical-params-con{
    margin: 80px 0;
}
.technical-params-con .technical-params{
    max-width: 1400px;
    margin: 0 auto;
}
.technical-params-con .technical-params .table-data{
    overflow-x: auto;
    text-align: center;
}
 .table tr:first-child td{
    background-color: #0a1a32!important;
    color: #ffffff;
}
.table tr th{
    background-color: #0a1a32!important; 
    color: #ffffff;
     vertical-align: middle;
}
.table tr td{
    vertical-align: middle;
}
.recommend-con{
    background: url(../../images/recommend-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 36px 0 50px;
    margin: 80px 0;
}
.recommend-con .recommend{
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}
.recommend-con ul{
    display: flex;
    justify-content: space-between;
    gap: 1.43vw;
}
.recommend-con ul li{
    width: calc((100% - 4.29vw) / 4);
    background: url(../../images/product-bg.png) no-repeat;
    background-size: 100% 100%;
    
}
.recommend-con ul li h3{
    font-size: 20px;
    color: #444343;
    font-weight: bold;
}
.recommend-con ul li .img{
    height: 18vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recommend-con ul li .img img{
    max-height: 100%;
    max-width: 100%;
        margin: 0 auto;
    padding: 2.85vw 2.14vw;
}

.recommend-con ul li a>img{
    margin: 0 auto;
    padding: 20px 0;
}
.recommend-con ul li:hover{
    background: url(../../images/product-active-bg.png) no-repeat;
    background-size: 100% 100%;
}
.recommend-con ul li:hover h3{
    color: #ffffff;
}
.recommend-con ul li:hover a>img{
    filter: brightness(3) contrast(3);
}

@media(max-width:1400px){
    .banner-con,.submenu,.introduce,.advantage-con,.principle-con,.product-images,.performance-con,.technical-params-con,.recommend-con{
        padding-left: 15px;
        padding-right:15px;
    }
    .banner-con .banner img{
        max-width: 50%;
    }
    .banner-con .banner .left-con ul:nth-of-type(2){
        margin: 30px 0 60px;
    }
    .banner-con .banner .left-con h1{
        font-size: 70px;
    }
    .banner-con .banner .left-con ul:nth-of-type(3) li a{
        padding: 10px 20px;
    }
    .banner-con .banner .left-con ul:nth-of-type(3) li:last-child{
        padding: 10px 30px;
    }
    .introduce .bottoms{
        gap: 30px;
    }
}
@media (max-width:1080px){
     .banner-con .banner .left-con h1{
        font-size: 60px;
    }
    .banner-con .banner .left-con ul:nth-of-type(2){
        margin: 30px 0;
    }
    .banner-con .banner .left-con ul:nth-of-type(3) li:last-child{
        padding: 10px 15px;
    }
    .submenu{
        overflow-x: auto;
    }
    .submenu ul{
        display: block;
        white-space: nowrap;
    }
    .submenu ul li{
        display: inline-block;
    }
    .submenu ul li:not(:last-child){
        margin-right: 20px;
    }
    .introduce .bottoms .detail{
        max-width: 43%;
    }
    .advantage-con ul li{
        font-size: 20px;
    }
    .principle-con .principle{
        gap: 30px;
    }
    .performance-con .performance ul li:nth-child(odd){
        padding: 24px 221px 24px 30px;
    }
    .performance-con .performance ul li:nth-child(even){
        padding: 24px 30px 24px 200px;
    }
}
@media (max-width:900px){
     .banner-con .banner .left-con h1{
        font-size: 40px;
    }
}

@media (max-width:768px){
    .banner-con .banner{
        flex-wrap: wrap;
    }
    .banner-con .banner img{
        max-width: 100%;
    }
    
   .banner-con .banner .left-con{
       width: 100%;
       margin-top: 30px;
   }
   .banner-con .banner .left-con h1{
       text-align: center;
   }
    .advantage-con ul li{
        font-size: 16px;
    }
    .performance-con .performance img{
        position: static;
        transform: translate(0, 0);
        margin-bottom: 30px;
        max-width: 100%;
    }
    .performance-con .performance ul li h3:after{
        display: none;
    }
    .performance-con .performance ul li:nth-child(odd){
        padding: 24px;
        text-align: left;
    }
    .performance-con .performance ul li:nth-child(even){
        padding: 24px;
    }
    .performance-con .performance ul li:nth-child(1) h3:after{
        transform: rotate(306deg);
        right: -47px;
        top: -6px;
    }
    .performance-con .performance ul li:nth-child(2) h3:after{
        transform: rotate(230deg);
        left: -45px;
        top: 3px;
    }
    .introduce .bottoms,.principle-con .principle{
        flex-wrap: wrap;
    }
    .introduce .bottoms li{
        width: 100%;
    }
    .introduce .bottoms .detail,.principle-con .principle img{
        max-width: 100%;
    }
    
    .recommend-con ul{
        flex-wrap: wrap;
    }
    .recommend-con ul li{
        width: calc((100% - 1.43vw) / 2);
    }
    .recommend-con ul li .img{
        height: 45vw;
    }
    .introduce,.principle-con,.product-images,.technical-params-con,.recommend-con{
        margin: 30px auto;
    } 
}

@media (max-width:400px){
    .banner-con .banner .left-con ul:nth-of-type(3){
        flex-wrap: wrap;
    }
    .banner-con .banner .left-con ul{
        gap: 20px;
    }
    .banner-con .banner .left-con ul:nth-of-type(3) li{
        width: 100%;
        text-align: center;
    }
    .banner-con .banner .left-con ul:nth-of-type(2){
        gap: 30px;
    }
    .advantage-con ul li{
        font-size: 14px;
    }
    .product-images ul{
        flex-wrap: wrap;
    }
    .performance-con .performance ul li{
        width: 100%;
    }
    .recommend-con ul li h3{
        font-size: 16px;
    }
    .recommend-con ul li img:nth-of-type(1){
        padding: 10px;
    }
    .recommend-con ul li img:nth-of-type(2){
        display: none;
    }
    
}