.lbanner-pp .lbanner-btn {display: block;}

.listPro_main {margin-top: 5%;}

.listPro_main .pro_lbanner {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 32%;
    margin-bottom: 30px;
    -webkit-transition: all .5s ease-out 0ms;
    -moz-transition: all .5s ease-out 0ms;
    -o-transition: all .5s ease-out 0ms;
    transition: all .5s ease-out 0ms;
}

.listPro_main .pro_lbanner img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.listPro_main .pro_lbanner:hover img {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
}


.pro_list .pro_item {
    width: calc((100% - 42px) / 4);
    background: #FFFFFF; padding: 14px; margin-right: 14px;
}
.pro_list .pro_item:nth-child(4n){margin-right: 0;}
.pro_list .pro_item:nth-child(n+5){margin-top: 20px;}

.pro_list .pro_item .pic{padding-bottom: 100%;}
.pro_list .pro_item .title{font-family: 'Roboto-Regular'; color: var(--txtColor); line-height: 26px; margin-top: 18px;}

.pro_list .pro_item:hover {background: var(--commonColor);}
.pro_list .pro_item:hover .title{color: #fff;}

@media only screen and (max-width: 980px) {
    .listPro_main{margin-top: 28px;}
    .listPro_main .pro_lbanner{margin-bottom: 24px;}
    .pro_list .pro_item{width: calc(50% - 10px); margin-right: 20px;}
    .listPro_main .pro_list .pro_item:nth-child(2n){
        margin-right: 0;
    }
    .pro_list .pro_item:nth-child(n+3){margin-top: 16px;}
    .pro_list .pro_item .title{margin-top: 15px;}
}
@media only screen and (max-width: 640px) {
    .pro_list .pro_item{width: 100%; margin-right: 0;}
    .pro_list .pro_item:nth-child(n+2){margin-top: 16px;}
}

/* listPro_principle */
.listPro_principle {
    margin-top: 5%;
}
.principle_txt{margin-top: 3%;}

.listPro_principle .txt_item {
    font-family: 'Roboto-Regular';
    font-weight: 400;
    font-size: 16px;
    color: var(--txtColor);
    line-height: 30px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 28px;
}

.listPro_principle .txt_item .brief{flex: 1; padding-bottom: 10px; position: relative;}
.listPro_principle .txt_item .brief::before{position: absolute; left: 0; bottom: 0; height: 2px; content: ''; background: var(--commonColor); width: 0; transition: all 0.5s ease;}

.listPro_principle .txt_item:before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 40px;
    background: url(../img/principle_icon.png) no-repeat center/100% auto;
    margin-right: 32px;
}

.listPro_principle .txt_item:hover .brief::before{width: 120px;}
.listPro_principle .txt_item:hover::before{animation: swing 0.5s;}

.listPro_principle .principle_img {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 31%;
    -webkit-transition: all .5s ease-out 0ms;
    -moz-transition: all .5s ease-out 0ms;
    -o-transition: all .5s ease-out 0ms;
    transition: all .5s ease-out 0ms;
}

.listPro_principle .principle_img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.listPro_principle .principle_img:hover img {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
}

@media only screen and (max-width: 980px) {
    .listPro_principle{margin-top: 28px;}
    .principle_txt{margin-top: 15px;}
    .listPro_principle .txt_item{margin: 0 0 16px;}
    .listPro_principle .txt_item:before{margin-right: 12px;}
    .listPro_principle .txt_item .brief{padding-bottom: 0;}
    .listPro_principle .txt_item .brief::before{height: 0;}
}

/* listPro_advantages */
.listPro_advantages{margin: 5% 0 0;}
.advantages_wrap{margin-top: 3%;}

.advantages_wrap .advantages_left {width: 42%;}

.advantages_list{
    border-top: 1px solid #D4DCFF;
    border-left: 1px solid #D4DCFF;
}
.advantages_list .advantages_item {
    width: 33.333333%; background: #F6F6F7;
    border-right: 1px solid #D4DCFF;
    border-bottom: 1px solid #D4DCFF;
    padding: 24px 14px; cursor: pointer;
}
.advantages_list .advantages_item .item_icon {
    width: 44px; height: 44px; margin: 0 auto 16px;
    position: relative; overflow: hidden;
    background: url(../img/icon_adv.png) no-repeat center;
    background-size: 100% auto;
}
.advantages_list .advantages_item .title {
    font-family: 'Roboto-Regular'; color: var(--txtColor);
    line-height: 24px; text-align: center;
    text-transform: capitalize;
}
.advantages_list .advantages_item.current,
.advantages_list .advantages_item:hover {
    background-color: var(--commonColor);
}
.advantages_list .advantages_item.current .item_icon,
.advantages_list .advantages_item:hover .item_icon{
    background-image: url(../img/icon_adv_h.png);
    animation: swing 0.5s;
}
.advantages_list .advantages_item.current .title,
.advantages_list .advantages_item:hover .title{color: #fff;}


.advantages_wrap .advantages_right {
    width: 58%; position: relative;
    height: auto; overflow: hidden;
}

.advantages_right img {
    position: absolute; width: 100%; height: 100%;
    left: 0; top: 0; object-fit: cover;
}

.advantages_right .advantages_info {
    width: 100%; height: 100%;
    padding: 10% 7%; position: absolute; z-index: 99;
}

.advantages_right .advantages_info .info_title {
    font-family: 'Roboto-Bold';
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 1.35;
    text-transform: capitalize;
}

.advantages_right .advantages_info .info_desc {
    font-family: 'Roboto-Regular';
    color: #FFFFFF;
    line-height: 30px;
    text-transform: none;
    margin-top: 15px;
}

@media only screen and (max-width: 1300px) {
    .advantages_list .advantages_item{padding: 16px 10px;}
    .advantages_list .advantages_item .item_icon{margin-bottom: 10px;}
    .advantages_list .advantages_item .title{font-size: 14px; line-height: 22px;}
}
@media only screen and (max-width: 980px) {
    .listPro_advantages{margin-top: 28px;}
    .listPro_advantages .advantages_wrap{
        flex-direction: column;
        align-items: center; margin-top: 15px;
    }
    .advantages_wrap .advantages_left{width: 100%;}
    .advantages_wrap .advantages_right{width: 100%; height: auto;}
    .advantages_list .advantages_item{width: 50%; padding: 14px 8px;}
    .advantages_wrap .advantages_right .advantages_info{
        position: relative; padding: 24px 16px;
    }
}