.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);
}

.listPro_main .pro_list {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.listPro_main .pro_list .pro_item {
    width: 22.5%;
    background: #FFFFFF;
    padding: 15px;
    margin-right: 30px;
    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_list .pro_item:hover {
    background-color: var(--conmmonColor);
}

.listPro_main .pro_list .pro_item:nth-child(4n) {
    margin-right: 0;
}

.listPro_main .pro_list .pro_item .item_img {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    margin-bottom: 20px;
}

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

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


.listPro_main .pro_list .pro_item .item_title {
    font-family: 'Roboto-Regular';
    font-weight: 400;
    font-size: 16px;
    color: #798190;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.listPro_main .pro_list .pro_item .item_title a {
    display: inline-block;
    color: #798190;
    height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listPro_main .pro_list .pro_item:hover .item_title a {
    color: #FFFFFF;
}

.listPro_principle {
    margin-top: 5%;
}

.listPro_principle .principle_title {
    font-family: 'Roboto-Bold';
    font-weight: bold;
    font-size: 56px;
    color: #020C1E;
    line-height: 1.5;
    text-align: center;
    font-style: normal;
    text-transform: capitalize;
    margin-bottom: 40px;
}

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

.listPro_principle .txt_item span {
    width: calc(100% - 95px);
}

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

.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);
}

.listPro_advantages {
    margin: 5% 0;
}

.listPro_advantages .advantages_title {
    font-family: 'Roboto-Bold';
    font-weight: bold;
    font-size: 56px;
    color: #020C1E;
    line-height: 59px;
    text-align: center;
    font-style: normal;
    text-transform: capitalize;
    margin-bottom: 58px;
}

.listPro_advantages .advantages_wrap {
    justify-content: center;
    align-items: flex-start;
}


.listPro_advantages .advantages_wrap .advantages_left {
    width: 42%;
}


.listPro_advantages .advantages_wrap .advantages_left .advantages_list {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item {
    width: 33.333333%;
    background: #F6F6F7;
    border: 1px solid #D4DCFF;
    padding: 25px 13px;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item:hover {
    background-color: var(--conmmonColor);
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item .item_icon {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item .item_icon .icon_img_hover {
    opacity: 0;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item:hover .item_icon .icon_img {
    opacity: 0;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item:hover .item_icon .icon_img_hover {
    opacity: 1;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item .item_icon img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    transition: opacity .5s ease-out;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item .item_title {
    font-family: 'Roboto-Regular';
    font-weight: 400;
    font-size: 16px;
    color: #798190;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: capitalize;
    height: 72px;
    overflow: hidden;
    transition: all .5s ease-out;
}

.listPro_advantages .advantages_wrap .advantages_left .advantages_list .advantages_item:hover .item_title {
    color: #FFFFFF;
}

.listPro_advantages .advantages_wrap .advantages_right {
    width: 68%;
    position: relative;
    height: 564px;
    overflow: hidden;
}

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

.listPro_advantages .advantages_wrap .advantages_right .advantages_info {
    width: 100%;
    height: 100%;
    padding: 10% 75px 10% 68px;
    position: absolute;
    z-index: 99;
}

.listPro_advantages .advantages_wrap .advantages_right .advantages_info .info_title {
    font-family: 'Roboto-Bold';
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 34px;
    text-align: left;
    font-style: normal;
    text-transform: capitalize;
    margin-bottom: 27px;
}


.listPro_advantages .advantages_wrap .advantages_right .advantages_info .info_desc {
    font-family: 'Roboto-Regular';
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

@media only screen and (max-width: 950px) {
    .listPro_main .pro_list .pro_item{
        width: 48%;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    .listPro_main .pro_list .pro_item:nth-child(2n){
        margin-right: 0;
    }
    .listPro_principle .principle_title{
        font-size: 40px;
        line-height: 45px;
    }
    .listPro_advantages .advantages_title{
         font-size: 40px;
        line-height: 45px;
    }
    .listPro_advantages .advantages_wrap{
        flex-direction: column;
        align-items: center;
    }
    .listPro_advantages .advantages_wrap .advantages_left{
        width: 100%;
    }
    .listPro_advantages .advantages_wrap .advantages_right{
        width: 100%;
    }
    .listPro_advantages .advantages_wrap .advantages_right .advantages_info{
        padding: 40px;
    }
}