.pro_main {
    background: #fafafa
}

.page_pro_list {
    --pd: 25px;
    --mt: 45px;
    padding: calc((10 / 19.2) * 1%) 0 calc((64 / 19.2) * 1%);
    width: calc(100% - var(--all-pd) * 2);
    margin: 0 auto
}

.page_pro_list .item {
    margin-top: var(--mt) !important
}

.page_pro_list .item:hover .title {
    background: var(--color-main);
    color: #fff !important;
}

.page_pro_list .item .img {
    padding-bottom: calc((248 / 3.31) * 1%)
}

.page_pro_list .item .title {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5em;
    display: flex;
    background: #f5f5f5;
    box-shadow: 0 2px 0 0 var(--color-main);
    margin: 0;
    padding: 20px
}

.pro_page_size {
    margin-top: 40px
}

.pro_page_size .com_page {
    width: 11px;
    height: 19px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer
}

.pro_page_size .sw-prev {
    background-image: url(../images/color/pro11.png)
}

.pro_page_size .sw-next {
    background-image: url(../images/color/pro22.png)
}

.pro_page_size .sw_pag {
    display: flex;
    align-items: center;
    margin: 0 22px
}

.pro_page_size .swiper-pagination-bullet {
    background: unset;
    color: #333;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1
}

.pro_page_size .swiper-pagination-bullet-active {
    background: var(--color-main);
    color: #fff
}

.visiti {
    margin-top: 40px
}

.visiti .title {
    font-family: Arial;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 24px
}

.visiti .desc {
    margin-top: 26px !important
}

.visiti .desc,
.visiti .desc p {
    font-family: Arial;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    margin: 5px
}

.visiti .desc a,
.visiti .desc p a {
    font-weight: bold;
    margin: 0 3px
}

.visiti .desc a:hover,
.visiti .desc p a:hover {
    color: var(--color-main);
    text-decoration: underline
}

.why_pvc {
    margin-top: calc((108 / 14) * 1%)
}

.why_pvc .title {
    font-family: Arial;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 1
}

.why_pvc .lists {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap
}

.why_pvc .lists .item {
    width: calc(100% / 3);
    border: 1px solid #cccccc;
    padding: 70px 40px 74px
}

.why_pvc .lists .item:hover {
    background: var(--color-main)
}

.why_pvc .lists .item:hover .tit,
.why_pvc .lists .item:hover .des {
    color: #fff
}

.why_pvc .lists .item:hover .tit::after {
    background: #fff
}

.why_pvc .lists .item .tit {
    font-family: Arial;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    padding-bottom: 15px;
    position: relative
}

.why_pvc .lists .item .tit::after {
    content: "";
    display: block;
    width: 63px;
    height: 2px;
    background: var(--color-main);
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.why_pvc .lists .item .des {
    margin-top: 17px;
    font-family: Arial;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 24px
}

@media screen and (max-width:950px) {
    .page_pro_list {
        padding: 20px 0 30px
    }

    .visiti .title,
    .why_pvc .title {
        line-height: unset
    }

    .why_pvc .lists .item {
        width: 100%
    }

    .page_pro_list .item .img {
        padding-bottom: 100%
    }
}