.section {
    padding: 5.83333vw 0 8.33333vw
}

.section .links {
    display: flex;
    justify-content: center;
    gap: 15.625vw
}

.section .links .item {
    display: block;
    position: relative;
    width: 6.875vw
}

.section .links .item .cn {
    color: #4C4C4C;
    font-size: .78125vw;
    font-weight: 300;
    margin-bottom: .36458vw;
    line-height: 1.25vw;
    transition: 0.6s;
    padding: 0 0 0 .625vw
}

.section .links .item .en {
    color: #838383;
    font-size: .41667vw;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .625vw;
    transition: 0.6s;
    font-family: "Aboreto";
    padding: 0 0 0 .625vw
}

.section .links .item .line {
    width: 100%;
    margin: .52083vw 0 0;
    opacity: 0;
    transition: 0.6s
}

.section .links .item .line img {
    display: block;
    width: 100%
}

.section .links .item:hover .cn,
.section .links .item.on .cn {
    font-size: 1.04167vw;
    color: #986733
}

.section .links .item:hover .en,
.section .links .item.on .en {
    font-size: .52083vw
}

.section .links .item:hover .line,
.section .links .item.on .line {
    opacity: 1
}

.section .control {
    display: flex;
    justify-content: center;
    /* gap: 4.61458vw; */
    gap: 5vw;
    margin: 4.16667vw 0 6.92708vw;
    padding: 0 6.77083vw;
}

.section .control .item {
    width: 7.08333vw;
    text-align: center;
    cursor: pointer
}

.section .control .item .icon {
    width: 7.08333vw;
    height: 5.98958vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s
}

.section .control .item .icon img {
    display: block;
    width: 100%
}

.section .control .item .cn {
    color: #000;
    font-weight: 300;
    transition: 0.6s;
    margin-bottom: .20833vw
}

.section .control .item .en {
    font-family: "Aboreto";
    color: #838383;
    font-weight: 400;
    text-transform: uppercase
}

.section .control .item:hover .cn,
.section .control .item.on .cn {
    font-weight: 500;
    color: #986733
}

.section .box{
        padding: 0 9.77083vw;
}
.section .box .part {
    display: none
}

.section .box .part.on {
    display: block
}

.section .box .part .part_box {
    display: flex;
    gap: 2.60417vw
}

.section .box .part .part_box .part_l {
    /* padding: .57292vw 0 0; */
    width: 20.67708vw
}

.section .box .part .part_box .part_l .part_l_title {
    width: 100%;
    height: 4.21875vw;
    padding: 0 1.77083vw 0 3.125vw;
    color: #838383;
    font-weight: 500
}

.section .box .part .part_box .part_l .item {
    width: 100%
}

.section .box .part .part_box .part_l .item .block {
    width: 100%;
    height: 4.21875vw;
    padding: 0 1.51042vw 0 3.125vw;
    transition: 0.6s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.section .box .part .part_box .part_l .item .block p {
    color: #838383;
    font-weight: 500;
    transition: 0.6s
}

.section .box .part .part_box .part_l .item .block .jia {
    width: 1.51042vw;
    height: 1.51042vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.section .box .part .part_box .part_l .item .block .jia span {
    display: block;
    width: 100%;
    height: .10417vw;
    background: #333333;
    position: absolute;
    transition: 0.6s;
    border-radius: .05208vw
}

.section .box .part .part_box .part_l .item .block .jia span:nth-child(2) {
    transform: rotate(90deg)
}

.section .box .part .part_box .part_l .item .block:hover {
    background: #F5EBE0
}

.section .box .part .part_box .part_l .item .block:hover p {
    color: #986733
}

.section .box .part .part_box .part_l .item .block:hover .jia span {
    background: #986733
}

.section .box .part .part_box .part_l .item .none {
    display: none
}

.section .box .part .part_box .part_l .item .none .select_item {
    height: 3.38542vw;
    width: 100%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    padding: 0 0 0 3.125vw;
    color: #4F4F4F;
    font-weight: 350;
    transition: 0.6s;
    cursor: pointer
}

.section .box .part .part_box .part_l .item .none .select_item:hover,
.section .box .part .part_box .part_l .item .none .select_item.on {
    color: #986733;
    font-weight: 500
}

.section .box .part .part_box .part_l .item.item_active .block {
    background: #F5EBE0;
    border-bottom: .10417vw solid #986733
}

.section .box .part .part_box .part_l .item.item_active .block p {
    color: #986733
}

.section .box .part .part_box .part_l .item.item_active .block .jia span {
    background: #986733
}

.section .box .part .part_box .part_l .item.item_active .block .jia span:nth-child(2) {
    width: 1.30208vw;
    transform: rotate(0deg)
}

.section .box .part .part_box .part_r {
    width: 72.70833vw
}

.section .box .part .part_box .part_r .pro_box {
    width: 100%;
    display: none
}

.section .box .part .part_box .part_r .pro_box.on {
    display: block
}

.section .box .part .part_box .part_r .pro_box .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875vw 1.97917vw
}

.section .box .part .part_box .part_r .pro_box .list .item {
    display: block;
    width: 100%;
    height: 25.10417vw;
    position: relative
}

.section .box .part .part_box .part_r .pro_box .list .item .img {
    width: 100%;
    height: 100%;
    background: #FBFBFB;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.section .box .part .part_box .part_r .pro_box .list .item .img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}
.section .box .part .part_box .part_r .pro_box .list .item .img p{
     position: absolute;
     left: 0;
     bottom:1.822vw;
     width: 100%;
     text-align: center;
}

.section .box .part .part_box .part_r .pro_box .list .item .img2 {
    position: absolute;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.6s
}

.section .box .part .part_box .part_r .pro_box .list .item .img2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.section .box .part .part_box .part_r .pro_box .list .item .img2 .more {
    width: 9.375vw;
    height: 3.64583vw;
    background: url("/images/btn_bg.png") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: #000;
    font-size: .9375vw;
    font-weight: 300;
    transition: 0.6s
}

.section .box .part .part_box .part_r .pro_box .list .item:hover .img2 {
    opacity: 1
}

.section .box .part .part_box .part_r .pro_box .pager {
    display: flex;
    justify-content: center;
    gap: 1.19792vw;
    align-items: center;
    margin-top: 2.96875vw
}

.section .box .part .part_box .part_r .pro_box .pager .prev,
.section .box .part .part_box .part_r .pro_box .pager .next {
    margin-top: 2px
}

.section .box .part .part_box .part_r .pro_box .pager .prev svg,
.section .box .part .part_box .part_r .pro_box .pager .next svg {
    display: block;
    width: 1.25vw
}

.section .box .part .part_box .part_r .pro_box .pager .prev svg path,
.section .box .part .part_box .part_r .pro_box .pager .next svg path {
    transition: all 600ms
}

.section .box .part .part_box .part_r .pro_box .pager .prev svg:hover path,
.section .box .part .part_box .part_r .pro_box .pager .next svg:hover path {
    stroke: #986733
}

.section .box .part .part_box .part_r .pro_box .pager .nums {
    display: flex;
    gap: 1.19792vw
}

.section .box .part .part_box .part_r .pro_box .pager .nums a {
    color: #000;
    font-weight: 300;
    line-height: 2;
    transition: all 600ms
}

.section .box .part .part_box .part_r .pro_box .pager .nums a.on {
    color: #986733;
    font-weight: 900
}

@media screen and (max-width: 768px) {
    .section .box .part .part_box .part_r .pro_box .list .item .img p{
        font-size: 14px;
        bottom: 5px;
    }
    .section {
        padding: 50px 5vw 70px
    }

    .section .links {
        gap: 20px
    }

    .section .links .item {
        width: 100%
    }

    .section .links .item .cn {
        font-size: 20px !important;
        line-height: 24px
    }

    .section .links .item .en {
        font-size: 10px !important;
        line-height: 12px;
        margin: 8px 0 0
    }

    .section .links .item:after {
        width: 120px;
        left: -10px;
        bottom: -5px
    }

    .section .links .item:before {
        width: 20px;
        left: 0px;
        bottom: -10px
    }

    .section .links .item .line {
        margin-top: 5px
    }

    .section .control {
        margin: 40px 0 25px;
        padding: 0;
        flex-wrap: wrap;
        gap: 10px 0
    }

    .section .control .item {
        width: 33.33%
    }

    .section .control .item .icon {
        width: 20vw;
        height: 15vw;
        margin: 0 auto 2px
    }

    .section .control .item .cn {
        font-size: 15px;
        margin-bottom: 2px
    }

    .section .control .item .en {
        font-size: 12px
    }
     .section .box {
        padding: 0;
     }

    .section .box .part .part_box {
        display: block
    }

    .section .box .part .part_box .part_l {
        width: 100%;
        margin-bottom: 20px
    }

    .section .box .part .part_box .part_l .part_l_title {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 15px
    }

    .section .box .part .part_box .part_l .item .block {
        height: 50px;
        padding: 0 15px
    }

    .section .box .part .part_box .part_l .item .block p {
        font-size: 15px
    }

    .section .box .part .part_box .part_l .item .block .jia {
        width: 18px;
        height: 18px
    }

    .section .box .part .part_box .part_l .item .block .jia span {
        width: 100% !important
    }

    .section .box .part .part_box .part_l .item .none .select_item {
        height: 40px;
        padding: 0 15px;
        font-size: 15px
    }

    .section .box .part .part_box .part_r {
        width: 100%
    }

    .section .box .part .part_box .part_r .pro_box .list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .section .box .part .part_box .part_r .pro_box .list .item {
        height: 50vw
    }

    .section .box .part .part_box .part_r .pro_box .list .item .img img {
        object-fit: cover;
        width: 100%;
    }

    .section .box .part .part_box .part_r .pro_box .list .item .img2 .more {
        width: 120px;
        height: 40px;
        font-size: 14px
    }

    .section .box .part .part_box .part_r .pro_box .pager {
        gap: 15px;
        margin-top: 30px
    }

    .section .box .part .part_box .part_r .pro_box .pager .prev svg,
    .section .box .part .part_box .part_r .pro_box .pager .next svg {
        width: 20px
    }

    .section .box .part .part_box .part_r .pro_box .pager .nums {
        gap: 15px
    }
}