.proBg{
    position: relative;
    min-height: 50vh;
    padding: .6rem 0;
    background-color: #F4F8FB;
    overflow: hidden;
}
.proBg .page{
    margin: 0;
}
.proList{
    list-style: none;
    margin: .6rem -.3rem 0;
}
.proList li{
    width: 33.33%;
    padding: 0 .3rem;
    margin-bottom: .6rem;
}
.proLink{
    display: block;
    background-color: #FFFFFF;
}
.proImg{
    position: relative;
    padding: .3rem;
    overflow: hidden;
}
.proImg .imgBg{
    height: 0;
    padding-bottom: 66.32%;
    background-size: contain;
    transition: all 1s;
}
.proText{
    padding: .2rem;
    border-top: 1px solid #EEEEEE;
    text-align: center;
    transition: all .3s;
}
.proTit{
    line-height: 1.2;
    margin: .1rem 0;
    transition: all .3s;
}
.proCon{
    line-height: 1.4;
    margin: .1rem 0;
    -webkit-line-clamp: 1;
    transition: all .3s;
}
.proLink:hover .imgBg{
    transform: scale(1.05);
}
.proLink:hover .proText{
    color: #FFFFFF;
    background-color: var(--baseColor);
}
.proLink:hover .proTit,
.proLink:hover .proCon{
    color: #FFFFFF;
}

/* detail */
.pro1Bg{
    padding: 0 0 .6rem;
    background: url(../images/product/pro1Bg.png) center center #F4F8FB no-repeat;
    background-size: cover;
    overflow: hidden;
}
.pro1Box{
    margin: .2rem 0;
}
.pro1Left{
    width: 45%;
}
.pro1Tit{
    line-height: 1.4;
}
.pro1Des{
    line-height: 24px;
    min-height: 72px;
    margin: .1rem 0 .2rem;
}
.pro1Td{
    line-height: 32px;
    min-height: 160px;
    margin: .2rem 0;
}
.pro1Tel{
    display: block;
    width: fit-content;
    line-height: 28px;
    padding: .1rem .16rem;
    border: 1px solid #003B87;
    font-weight: bold;
}
.pro1Tel img{
    width: 24px;
    max-width: .3rem;
    margin-top: -2px;
    margin-right: 5px;
}
.pro1Tel:hover img{
    animation: swing 1s linear;
}
.pro1Right{
    width: 50%;
    text-align: center;
    text-align: right;
}
.pro1Right img{
    max-width: 100%;
    height: auto;
    max-height: 500px;
}
.pro2Bg{
    background-color: #FFFFFF;
    overflow: hidden;
}
.proName{
    margin: .2rem 0;
}
.proLine{
    display: block;
    height: 1px;
    margin: .2rem 0;
    background-color: #D8D8D8;
}
.pro2Box{
    margin: .8rem 0;
}
.pro2Left{
    width: 54%;
    max-width: 788px;
}
.pro2Left .proName{
    margin: .6rem 0;
}
.pro2Right{
    width: 43%;
    max-width: 632px;
}
.pro2Max{
    margin-bottom: .2rem;
}
.pro2MaxImg{
    padding-bottom: 83%;
}
.pro2Video::before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/product/video.png) center center rgba(0, 59, 135, .3) no-repeat;
    background-size: 9.17% auto;
    z-index: 1;
    cursor: pointer;
}
.pro2Min{
    position: relative;
}
.pro2Min .swiper-slide{
    background-color: #F7F7F7;
}
.pro2MinImg{
    padding-bottom: 100%;
    opacity: .5;
    cursor: pointer;
    transition: all .3s;
}
.pro2Min .swiper-slide-thumb-active .pro2MinImg{
    opacity: 1;
}
.proTable{
    margin: .2rem -.1rem .6rem;
}
.proTable table{
    width: 100%;
    text-align: center;
}
.proTable th,
.proTable td{
    padding: .1rem;
    border: .1rem solid #FFFFFF;
    background-color: #EEF5FF;
}
.proTable th{
    color: #333333;
}
.proTable td{
    color: #666666;
}
.proPage{
    line-height: 1.8;
    margin: .2rem 0 .4rem;
}
.proPage p{
    margin: 5px 0;
}
.proPage p a{
    color: #666666;
}
.proPage p a:hover{
    color: var(--baseColor);
}
.proOther{
    margin: .3rem 0 .8rem;
}
.proOther .swiper-slide{
    height: auto;
}
.otherLink{
    display: block;
    height: 100%;
    padding: .4rem;
    background-color: #F5F5F5;
}
.otherTit{
    line-height: 1.2;
    margin: .15rem 0;
    transition: all .3s;
}
.otherCon{
    line-height: 1.8;
    height: 3.6em;
    -webkit-line-clamp: 2;
    margin: .15rem 0;
}
.otherIcon{
    flex-shrink: 0;
    width: 44px;
    max-width: .5rem;
    margin-right: 10px;
    transition: all .4s;
}
.otherIcon img{
    width: 100%;
    height: auto;
}
.otherImg{
    width: 227px;
    height: 150px;
    max-width: 60%;
    max-height: 1.6rem;
}
.otherImg img{
    max-width: 100%;
    max-height: 100%;
    transition: all 1s;
}
.otherLink:hover .otherTit{
    color: var(--baseColor);
}
.otherLink:hover .otherIcon{
    margin-left: 10px;
}
.otherLink:hover .otherImg img{
    transform: scale(0.95);
}


@media (max-width:1600px){

}
@media (max-width:1400px){

}
@media (max-width:1200px){
    .proList{
        margin: .2rem -.1rem;
    }
    .proList li{
        padding: 0 .1rem;
        margin-bottom: .2rem;
    }
    .proText{
        padding: .1rem;
    }
    .proTit{
        font-size: 16px;
    }
    .proCon{
        font-size: 14px;
    }
    .pro1Box{
        display: block;
    }
    .pro1Left{
        width: 100%;
        margin: .3rem 0;
    }
    .pro1Des{
        min-height: 0;
    }
    .pro1Td{
        min-height: 0;
    }
    .pro1Tel{
        line-height: 20px;
    }
    .pro1Tel img{
        width: 22px;
    }
    .pro1Right{
        width: 100%;
        margin: .3rem 0;
        text-align: center;
    }
    .pro1Right img{
        max-width: 80%;
    }
    .proName{
        font-size: 18px;
    }
    .pro2Box{
        display: block;
        margin: .6rem 0;
    }
    .pro2Left{
        max-width: 100%;
        width: 100%;
        margin: .3rem 0;
    }
    .pro2Left .proName{
        margin: .3rem 0;
    }
    .pro2Right{
        width: 100%;
        max-width: 632px;
        margin: .3rem auto;
    }
    .otherLink{
        padding: .2rem;
    }
    .otherTit{
        font-size: 16px;
    }
    .otherCon{
         font-size: 14px;
    }
    .otherIcon{
        width: 36px;
    }

}
@media (max-width:991px){

}
@media (max-width:767px){
    .proList li{
        width: 50%;
    }

}
@media (max-width:640px){

}
@media (max-width:460px){
    .proList li{
        width: 100%;
    }

}