.page_pro_list {
    --pd: 21px;
    --mt: 21px
}

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

.page_pro_list .item:hover .more,
.page_pro_list .item:hover .mark {
    opacity: 1
}

.page_pro_list .item a {
    position: relative;
}

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

.page_pro_list .item .mark {
    background: rgba(var(--color-mains), .38);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.page_pro_list .item .more {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    color: #fff;
    opacity: 0;
    position: absolute;
}

.page_pro_list .item .title {
    line-height: 1.5em;
    display: flex;
    background: #f5f5f5;
    margin: 0;
    padding: 39px 14px 33px
}

.sourcing {
    background: #fafafa;
    margin-top: 35px;
    display: flex;
    align-items: center
}

.sourcing .img {
    width: calc((514 / 19.2) * 1%);
    padding-bottom: calc((597 / 19.2) * 1%);
    flex-shrink: 0
}

.sourcing .main {
    padding-right: var(--all-pd);
    align-items: center;
    --pd: calc((105 / 11.45) * 1%);
    --l-w: calc((352 / 11.45) * 1%);
    margin: 0
}

.sourcing .main .lll {
    color: var(--color-main);
    font-family: Barlow;
    font-weight: 900;
    font-size: 38px;
    line-height: 1.3
}

.sourcing .main .rrr .item {
    margin-top: 36px
}

.sourcing .main .rrr .item:first-child {
    margin-top: 0
}

.sourcing .main .rrr .item .tit {
    font-weight: bold;
    font-size: 30px;
    color: var(--color-main);
    line-height: 1.2
}

.sourcing .main .rrr .item .des {
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 24px;
    margin-top: 10px
}

.what_p {
    padding-top: calc((112 / 19.2) * 1%)
}

.what_p .tit {
    font-family: Poppins;
    font-size: 40px;
    color: #333333;
    line-height: 1
}

.what_p .des {
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 24px;
    margin-top: 16px
}

.what_p .main {
    --l-w: 596px;
    --pd: 100px;
    margin-top: 46px;
    align-items: center;
}

.what_p .main .lll .tit1 {
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    line-height: 1
}

.what_p .main .lll .tit2 {
    font-family: Poppins;
    font-size: 30px;
    color: #464646;
    line-height: 1;
    margin-top: 22px
}

.what_p .main .lll .desc,
.what_p .main .lll .desc p {
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 24px
}

.what_p .main .lll .desc {
    margin-top: 28px
}

.what_p .main .lll .desc p {
    margin-top: 18px
}

.what_p .main .rrr {
    padding-bottom: calc((598 / 14) * 1%)
}

.faq {
    margin-top: calc((83 / 19.2) * 1%)
}

.faq .tit {
    font-family: Poppins;
    font-size: 40px;
    color: #333333;
    line-height: 1
}

.faq .lists {
    margin-top: 35px
}

.faq .lists .item {
    background: #f8f8f8;
    padding: 30px 20px 20px;
    justify-content: space-between;
    margin-top: 24px
}

.faq .lists .item.active .rrr {
    transform: rotate(180deg)
}

.faq .lists .item:first-child {
    margin-top: 0
}

.faq .lists .item .q span,
.faq .lists .item .q div {
    font-family: Barlow;
    font-weight: 400;
    font-size: 20px;
    color: #000000
}

.faq .lists .item .q span {
    font-family: Poppins
}

.faq .lists .item .a {
    margin-top: 15px;
    font-family: Barlow;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 1.3
}

.faq .lists .item .a span {
    font-family: Arial
}

.faq .lists .item .q,
.faq .lists .item .a {
    display: flex;
    align-items: center
}

.faq .lists .item .q span,
.faq .lists .item .a span {
    align-self: flex-start;
    margin-right: 15px
}

.faq .lists .item .ap {
    display: none
}

.faq .lists .rrr {
    flex-shrink: 0;
    width: 18px;
    height: 11px;
    background: url(../images/color/faq1.png) no-repeat center / cover
}

@media screen and (max-width:1366px) {
    .what_p .main {

        .lll,
        .rrr {
            width: 100%;
        }

        .lll {
            order: 2;
            margin-top: 15px;
        }

        .rrr {
            margin: 0;
            padding-bottom: 100%;
        }
    }
}

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

    .page_pro_list .item .img,
    .what_p .main .rrr {
        padding-bottom: 100%
    }

    .sourcing {
        flex-direction: column
    }

    .sourcing .img {
        width: 100%;
        padding-bottom: 100%
    }

    .sourcing .main {
        padding: 20px var(--all-pd) 0
    }


    .sourcing .main .rrr .item .tit {
        font-size: 20px
    }

    .what_p {
        padding-top: 30px
    }

    .what_p .tit {
        font-size: 30px
    }

    .faq {
        margin-top: 50px
    }

    .faq .tit {
        font-size: 30px
    }
}