.tx-productl{padding:5px 0 50px}

.tx-productl-main li{width: 48.75%; background: #f7f7f7;margin-left: 2.5%;margin-top: 30px;}
.tx-productl-main li:nth-child(2n-1){margin-left: 0;}
.tx-productl-main li a{float: left;width: 100%;padding:38px 21px;overflow: hidden;}
.tx-productl-main li .text{width: 50%;padding-left: 20px;height: 224px;display: flex;flex-direction: column;justify-content: center;}
.tx-productl-main li .text h3{position: relative; font-size: 18px;font-weight: bold; line-height: 24px;height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 20px;padding-bottom: 16px;}
.tx-productl-main li .text h3::before{content: '';position: absolute;left:0;bottom:0;width: 40px;height: 3px;background: var(--mColor);}
.tx-productl-main li .text em{display: block;color: #999;line-height: 22px;}
.tx-productl-main li .text b{display: inline-block;width: 168px;line-height: 38px;text-align: center;font-weight: normal;border:1px solid #b8b8b8;margin-top: 50px;}
.tx-productl-main li .text b img{margin-left:15px; filter:Gray; -webkit-filter: grayscale(100%);}
.tx-productl-main li .img{width: 50%;height: 224px; display: flex;justify-content: center;align-items: center;}
.tx-productl-main li .img img{max-width: 100%;max-height: 100%;}

.tx-productc{padding: 67px 0;}
.tx-productc-top{background: #f7f7f7;margin-bottom: 56px;}
.tx-productc-top .img{width: 46.58%;display: flex;justify-content: center;align-items: center;background: url('../img/productc-topbg.png') center center no-repeat; background-size: cover;}
.tx-productc-top .text{width: 53.42%;padding:32px 59px;}
.tx-productc-top .text h3{font-size: 28px;line-height: 37px; font-weight: bold;color:var(--mColor);margin-bottom: 30px;}
.tx-productc-top .text h4{font-size: 20px;line-height: 26px;margin-bottom: 9px;}
.tx-productc-top .text p{font-size: 16px;color:#999;line-height: 21px;margin-top: 10px;}
.tx-productc-top .text a{display: inline-block;width: 170px; font-size: 18px; line-height: 51px;text-align: center; border:1px solid var(--mColor);color: var(--mColor);margin-top: 42px;}
.tx-productc-top .text a img{margin-right: 12px;}

.tx-productc-left{width: 70.8%;}
.tx-productc-right{width: 24.66%;}
.tx-productc-right .title{font-size: 24px;line-height: 31px; margin-bottom:20px;font-weight: bold;}
.tx-productc-right .mains li{width: 100%;margin-bottom: 30px;}
.tx-productc-right .mains li .imgs{height:229px;overflow: hidden;padding: 20px;background: #f7f7f7;display: flex;justify-content: center;align-items: center;}
.tx-productc-right .mains li .imgs img{max-width: 100%;max-height: 100%;}
.tx-productc-right .mains li .text{position: relative; color:#666;line-height: 55px;border-bottom: 1px solid #707070;}
.tx-productc-right .mains li .text::before{content: '';position: absolute;bottom:-1px;left:0;width: 0%;height: 1px;background: var(--mColor);transition: 0.5s;-webkit-transition: 0.5s;-ms-transition: 0.5s;}

@media screen and (min-width: 769px){

    .tx-productl-main li:hover a{background: var(--mColor) url('../img/productl-libg.png') left bottom no-repeat;}
    .tx-productl-main li:hover .text h3{color:#fff;}
    .tx-productl-main li:hover .text h3::before{background: #fff;}
    .tx-productl-main li:hover .text em{color:#fff;}
    .tx-productl-main li:hover .text b{background: #fff;border:1px solid #fff;color:var(--mColor);}
    .tx-productl-main li:hover .text b img{-webkit-filter: grayscale(0%);}
    .tx-productl-main li .text b:hover{opacity: 0.8;}
    
    .tx-productc-top .text a:hover{background: var(--mColor);color:#fff;}
    .tx-productc-top .text a:hover img{display: none;}

    .tx-productc-right .mains li:hover .imgs img{transform: scale(1.08);}
    .tx-productc-right .mains li:hover .text{color:var(--mColor);}
    .tx-productc-right .mains li:hover .text::before{width: 100%;}

}

@media screen and (max-width: 1465px){

    .tx-productl-main li .text h3{font-size: 17px;}

    .tx-productc-top .text h3{font-size: 22px;}
    .tx-productc-top .text h4{font-size: 17px;}
    .tx-productc-top .text p{font-size: 14px;}
    .tx-productc-top .text a{font-size: 16px;line-height: 48px;}

    .tx-productc-right .title{font-size: 20px;}

}

@media screen and (max-width: 768px){

    .tx-productl{padding:5px 0 20px}

    .tx-productl-main li{margin-top: 2.5%;}
    .tx-productl-main li a{padding:15px 15px 20px}
    .tx-productl-main li .img{width: 100%;height: 30vw;}
    .tx-productl-main li .text{width: 100%;padding-left: 0;display: block;margin-top: 12px;height: auto;}
    .tx-productl-main li .text b{display: none;}
    .tx-productl-main li .text h3{font-size: 14px;padding-bottom: 10px;margin-bottom: 0px;height: 34px;}
    .tx-productl-main li .text em{display: none;}
    .tx-productl-main li .text h3::before{height: 1px;right:0;margin:0 auto;}

    .tx-productc{padding: 20px 0;}
    .tx-productc-top{margin-bottom: 20px;}
    .tx-productc-top .img{width: 100%;}
    .tx-productc-top .text{width: 100%;padding:20px;}
    .tx-productc-top .text h3{font-size: 16px;line-height: 22px;margin-bottom: 12px;}
    .tx-productc-top .text h4{font-size: 14px;line-height: 20px;}
    .tx-productc-top .text p{font-size: 12px;line-height: 18px;}
    .tx-productc-top .text a{font-size: 12px;margin-top:15px;width: 130px;line-height: 35px;}
    .tx-productc-top .text a img{width: 18px;}

    .tx-productc-right{display: none;}
    .tx-productc-left{width: 100%;}
}