* {
    margin: 0;
    padding: 0;
}

.products {
    width: 100%;
    box-sizing: border-box;
}

.products .proBanner {
    width: 100%;
    height: 7rem;
    background: url('../img/products/products.png') no-repeat;
    background-size: 100% 100%;
    padding-top: 3.01rem;
    padding-left: 1.47rem;
    box-sizing: border-box;
}

.leftTrans {
    position: relative;
    height: 0.18rem;
}

.ball {
    animation: swap 2s infinite;
    /* 2秒无限循环动画 */
}

.ball1 {
    position: absolute;
    left: 0;
    width: 0.18rem;
    height: 0.18rem;
    background: #fff;
    border-radius: 50%;
    animation-delay: 0s;
    /* 第一个小球动画延迟 */
}

.ball2 {
    position: absolute;
    left: 0.14rem;
    width: 0.18rem;
    height: 0.18rem;
    border: 0.01rem solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    animation-delay: 1s;
    /* 第二个小球动画延迟 */
}

@keyframes swap {

    0%,
    100% {
        left: 0;
        /* 初始位置 */
    }

    50% {
        left: 0.14rem;
        /* 交换到的目标位置 */
    }
}

.products .proBanner .bannerTIt {
    font-family: Arial-Black, Arial-Black;
    font-size: 0.5rem;
    color: #FFFFFF;
    line-height: 0.71rem;
    margin-bottom: 0.11rem;
}

.products .proBanner .bannerNav {
    display: flex;
    align-items: center;
    font-family: Arial, Arial;
    font-size: 0.2rem;
}

.bannerNav a {
    color: #FFFFFF;
}

.bannerNav a.active {
    color: #A0B1CE;
}

.bannerNav img {
    display: inline-block;
    width: 0.16rem;
    height: 0.16rem;
    margin-right: 0.09rem;
}

.products .proList {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background: #F8F8F8;
    padding-top: 1.05rem;
    padding-left: 1.34rem;
    box-sizing: border-box;
    padding-bottom: 0.47rem;
}

.products .proList .listLeft {
    width: 4.21rem;
    background: #fff;
}

.listLeft .leftTit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.21rem;
    height: 0.72rem;
    background: #BD1D20;
    border-radius: 0.12rem 0.12rem 0 0;
    font-family: MiSans, MiSans;
    font-weight: bold;
    font-size: 0.4rem;
    color: #FFFFFF;
}

.listLeft .leftItem {
    display: flex;
    justify-content: space-between;
    padding-left: 0.22rem;
    padding-right: 0.2rem;
    height: 0.6rem;
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 0.2rem;
    color: #575757;
    line-height: 0.6rem;
    transition: all 0.3s ease-in-out;
}
.listLeft .leftItem div:first-child{
    width: calc(100% - 0.6rem);
}
.itemBottom .bottomItem .line1{
    padding-right: 0.2rem;
}
.listLeft .leftItem:hover {
    color: #BD1D20;
}

.listLeft .leftItem.active {
    color: #BD1D20;
}

.activeRe {
    /*display: none;*/
   transform: rotate(90deg);
}

.itemBottom .bottomItem {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.46rem;
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 0.2rem;
    color: #6F6F6F;
    line-height: 0.46rem;
    padding-left: 0.21rem;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

.itemBottom .bottomItem:hover {
    background: #BD1D20;
    border-radius: 0.08rem 0.08rem 0 0;
    color: #fff;
}

.itemBottom .bottomItem img {
    display: block;
    width: 0.16rem;
    height: 0.16rem;
    margin-right: 0.09rem;
}

.products .proList .listRight {
    margin-left: 0.53rem;
}

.listRight .listCard {
    display: flex;
    width: 11.75rem;
    padding-left: 0.48rem;
    box-shadow: 0 0.03rem 0.06rem 0.01rem rgba(0, 0, 0, 0.16);
    border-radius: 0.2rem;
    box-sizing: border-box;
    margin-bottom: 0.4rem;
    background: #FFFFFF;
}

.listRight .listCard:last-child {
    margin-bottom: 0;
}

.listRight .listCard .cardLeft {
    position: relative;
    margin: 0.27rem 0 0.47rem;
}

.listRight .listCard:hover .cardLeft .cardTit{
    /*font-size: 0.46rem;*/
    /*color: #BE1E21;*/
    transform: scale(1.01);
}

.listRight .listCard:hover .cardLeft .cardNav{
    color: #BE1E21;
    border-bottom: 0.01rem solid #BD1D20;
}

.listRight .listCard:hover .modalBtn{
    background: #BE1E21;
    color: #FFFFFF;
}

.listRight .listCard:hover .modalBtn .btnImg{
    border: 0.01rem solid #FFFFFF;
}

.listRight .listCard:hover .modalBtn .btnImgBor{
    width: 0;
    background: #FFFFFF;
}

.listRight .listCard:hover .modalBtn .btnImgCen{
    width: 0.12rem;
    height: 0.12rem;
    background: #FFFFFF;
}

.cardLeft img {
    display: block;
    width: 1.74rem;
    height: 0.35rem;
}

.cardLeft .cardNav {
    /*margin-top: 0.36rem;*/
    margin-top: 0.1rem;
    font-family: Arial, Arial;
    /*font-size: 0.2rem;*/
    font-size: 0.18rem;
    color: #717171;
    line-height: 0.26rem;
    border-bottom: 0.01rem solid #D9D9D9;
    /*padding-bottom: 0.2rem;*/
    transition: all 0.3s ease-in-out;
    width: fit-content;
}

.cardLeft .cardTit {
    /*margin: 0.05rem 0 0.6rem;*/
    margin: 0.05rem 0 0;
    font-family: Arial, Arial;
    font-weight: bold;
    /*font-size: 0.55rem;*/
    font-size: 0.3rem;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s ease-in-out;
    width: 5.41rem;
    /*white-space: nowrap;*/
}

.cardLeft .cardBor {
    display: none;
    width: 5.41rem;
    height: 0.01rem;
    background: #D9D9D9;
}

.cardLeft .cardTex {
    width: 5.41rem;
    margin: 0.12rem 0 0.27rem;
    font-family: Arial, Arial;
    font-size: 0.2rem;
    color: #ADADAD;
    line-height: 0.25rem;
}

.listRight .listCard .cardRight {
    display: flex;
    align-items: center;
    width: 4.94rem;
    margin-left: 0.16rem;
}

.cardRight img {
    display: block;
    width: 100%;
    /* margin: auto 0; */
}

.modalBtn {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 2.1rem;
    height: 0.64rem;
    /* background: #BE1E21; */
    background: #FFFFFF;
    padding: 0 0.24rem;
    margin-top: 0.31rem;
    border-radius: 0.53rem 0.53rem 0.53rem 0.53rem;
    box-sizing: border-box;
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 0.2rem;
    color: #BE1E21;
    line-height: 0rem;
    border: 0.02rem solid #BE1E21;
    transition: all 0.3s;
}

/* 
.modalBtn:hover {
    background: #BE1E21;
    color: #fff;
} */

.modalBtn .btnImg {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 0.27rem;
    height: 0.27rem;
    border: 0.01rem solid #BE1E21;
    border-radius: 50%;
}

.btnImgBor {
    position: absolute;
    left: -0.3rem;
    width: 0.45rem;
    height: 0.01rem;
    /* border: 0.01rem solid #FFFFFF; */
    background: #BE1E21;
    transition: all 0.3s;
}

.modalBtn .btnImg .btnImgCen {
    width: 0.07rem;
    height: 0.07rem;
    background: #BE1E21;
    border-radius: 50%;
    transition: all 0.3s;
}

.modalBtn .btnImg .btnImgCen.btnImgCenActive {
    width: 0.17rem;
    height: 0.17rem;
    background: #fff;
}

.ListBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 2.47rem;
    height: 0.64rem;
    background: #FFFFFF;
    border-radius: 0.53rem;
    border: 0.02rem solid #BE1E21;
    padding-left: 0.24rem;
    padding-right: 0.28rem;
    margin: 0.72rem auto 0;
    box-sizing: border-box;
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 0.2rem;
    color: #BE1E21;
}

.ListBtn img {
    display: block;
    width: 0.15rem;
    height: 0.17rem;
}


@media only screen and (max-width:768px){
    .products .proBanner{
            margin-top: 1.2rem;
        height: 4rem;
            padding-top: 1.3rem;
    padding-left: 0.33rem;
    }
    .products .proList{
        padding-left: 0rem;
            flex-wrap: wrap;
    }
    .products .proList .listLeft{
        width: 94%;
        margin: 0 auto;
    }
    .listLeft .leftTit{
        width: auto;
    }
    .products .proList .listRight{
        margin-left: 0;
        width: 100%;
        margin-top: 0.3rem;
    }
    .cardLeft .cardTit{
        width: 4.41rem;
    }
    .listRight .listCard .cardRight{
            width: 2.94rem;
    }
    .listRight .listCard{
          width: 94%;
    margin: 0 auto 0.4rem auto;
    }
    .modalBtn{
            position: static;
                margin-top: 0.31rem;
    }
}