.banner-con{
    background: #20385a;
    color: #ffffff;
}
.banner-con h1{
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 30px;
}
.banner-con h1:after{
    content: "";
    background: url(../images/product-center-bg.png) no-repeat;
    width: 1029px;
    height: 57px;
    background-size: contain;
    display: block;
}
.banner-con .desc{
    max-width: 900px;
    line-height: 2;
    margin-top: 30px;
}
.product-menu ul li{
    flex: 1;
}
.product-menu ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 50px;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    color: #4c4c4c;
     font-size: 24px;
    gap: 10px;
}
.product-menu ul li:last-child a{
     border-right: 1px solid #cccccc;
}
.product-menu ul li a:after{
    content: "";
    background: url(../images/+.png) no-repeat;
    width: 15px;
    height: 15px;
    display: block;
   
}
.product-menu ul li.active a{
    color: #ffffff;
    background: #b02d2c;
}
.product-menu ul li.active a:after{
    display: none;
}
.product-menu ul li:hover a{
    color: #ffffff;
    background: #b02d2c;
}
.product-menu ul li:hover a:after{
    display: none;
}
.product-list>ul{
    gap: 30px;
}
.product-list>ul:after{
    content: "";
    margin-left: auto;
}
.product-list>ul>li{
    width: calc((100% - 60px) / 3);
}
.product-list>ul>li a .img{
    overflow: hidden;
}
.product-list>ul>li a .img img{
    transition: all .5s ease;
}
.product-list>ul>li a:hover img{
    transform: scale(1.05);
}
.product-list>ul>li a .text{
    padding: 30px;
    background: #fafafa;
}
.product-list>ul>li a .text p{
    color: #20385a;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
    padding-bottom: 20px;
}
.product-list>ul>li a .text p:after{
    content: "";
    background: url(../images/arrow-right.png) no-repeat;
    width: 28px;
    height: 9px;
    display: block;
}
.product-list>ul>li a .text ul{
    line-height: 2;
    color: #808080;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
}
.product-list>ul>li a .text ul li{
    position: relative;
    padding-left: 30px;
    font-size: 14px;
}
.product-list>ul>li a .text ul li:first-child:before{
    content: "";
    background: url(../images/jinliao-icon.png) no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 10px;
}
.product-list>ul>li a .text ul li:last-child:before{
    content: "";
    background: url(../images/chuliliang.png) no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 10px;
}

@media (max-width:1080px){
    .product-menu{
        overflow-x: auto;
    }
    .product-menu ul{
        white-space: nowrap;
        width: fit-content;
    }
    .product-list>ul{
        gap: 15px;
    }
    .product-list>ul>li{
        width: calc((100% - 30px) / 3);
    }
    .product-list>ul>li a .text{
        padding: 15px;
    }
}

@media (max-width:768px){
    .banner-con h1:after{
        display: none;
    }
    .product-list>ul>li{
        width: calc((100% - 15px) / 2);
    }
    .product-menu ul li a{
        font-size: 24px;
    }
    .product-list>ul>li a .text ul li{
        flex-wrap: wrap;
    }
    .product-list>ul>li a .text p{
        font-size: 16px;
    }
    
}

@media (max-width:500px){
    .product-list>ul>li a .text p:after{
        display: none;
    }
}