.container {
    width: 100%;
    overflow: hidden
}

.container .section {
    position: relative
}

.banner {
    height: 56.25vw;
    position: relative;
    overflow: hidden
}

.banner .btns {
    width: 100%;
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 .83333vw;
    z-index: 3
}

.banner .btns .jt {
    pointer-events: auto;
    cursor: pointer;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.6s
}

.banner .btns .jt img {
    display: block;
    width: 1.04167vw
}

.banner .btns .jt:hover {
    background: #D4AF37
}

.banner .btns .jt:nth-child(2) {
    transform: rotate(-180deg)
}

.banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
    transform: scale(1.1)
}

.banner .swiper-slide .text_box {
    width: 46.19792vw;
    position: absolute;
    z-index: 3;
    top: 28.90625vw;
    right: 10.98958vw
}

.banner .swiper-slide .text_box .h1 {
    color: #FFF;
    font-weight: 800;
    line-height: 150%;
    text-align: right
}

.banner .swiper-slide .text_box .p {
    color: #FFF;
    text-align: right;
    font-weight: 500;
    line-height: 1.4;
    margin: 4.21875vw 0 2.96875vw
}

.banner .swiper-slide .text_box .links {
    display: flex;
    gap: .83333vw;
    justify-content: flex-end
}

.banner .swiper-slide .text_box .links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: .41667vw 1.66667vw;
    transition: 0.6s;
    border-radius: .39729vw;
    background: #FDF6E3;
    transition: 0.6s;
    color: #000;
    font-weight: 500;
    line-height: 1.4
}

.banner .swiper-slide .text_box .links a:hover {
    background: #D4AF37
}

.banner .swiper-slide.swiper-slide-active img {
    transform: scale(1)
}

.sec1 {
    padding: 6.51042vw 0 10.26042vw;
    background: linear-gradient(0deg, rgba(255, 234, 201, 0.6) 0%, rgba(139, 69, 19, 0.03) 100%);
    position: relative;
    z-index: 3
}

.sec1:after {
    content: "";
    width: 19.79167vw;
    height: 19.79167vw;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    position: absolute;
    top: -4.0625vw;
    right: 0;
    transform: translateX(50%)
}

.sec1:before {
    content: "";
    width: 19.79167vw;
    height: 19.79167vw;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    position: absolute;
    bottom: -14.6875vw;
    left: -6.25vw
}

.sec1 .p1 {
    width: 58.4375vw;
    margin: 0 auto;
    color: #2C1810;
    text-align: center;
    font-weight: 700;
    line-height: 150%
}

.sec1 .p2 {
    width: 59.16667vw;
    color: rgba(107, 68, 35, 0.8);
    text-align: center;
    font-weight: 700;
    line-height: 150%;
    margin: 1.04167vw auto 12.60417vw
}

.sec1 .title {
    color: #2C1810;
    text-align: center;
    font-weight: 700;
    line-height: 150%
}

.sec1 .text {
    color: #6B4423;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    margin: .52083vw 0 8.59375vw
}

.sec1 .content {
    position: relative;
        direction: ltr;
}

.sec1 .content .c_box {
    position: absolute;
    left: -4.16667vw;
    top: 0
}

.sec1 .content .c_box .border {
    display: block;
    position: absolute;
    left: 0;
    width: 45.98958vw;
    height: 45.98958vw;
    border-radius: 50%;
    border: 2px solid #6B4423;
    transform: translateX(-60%)
}

.sec1 .content .c_box .c {
    display: block;
    position: absolute;
    left: 0;
    width: 19.0625vw;
    display: none
}

.sec1 .content .c_box .c_swiper {
    height: 45.98958vw;
    overflow: hidden
}

.sec1 .content .c_box .c_swiper .swiper-slide {
    display: flex;
    align-items: center;
    cursor: pointer
}

.sec1 .content .c_box .c_swiper .swiper-slide .st {
    display: flex;
    align-items: center;
    gap: 2.60417vw;
    padding-left: 8.07292vw;
    transition: all 600ms
}

.sec1 .content .c_box .c_swiper .swiper-slide .st span {
    width: .83333vw;
    height: .83333vw;
    display: block;
    background: #B9A28E;
    border-radius: 50%;
    transition: all 600ms
}

.sec1 .content .c_box .c_swiper .swiper-slide .st p {
    color: rgba(107, 68, 35, 0.4);
    font-weight: 600;
    line-height: 1.5;
    width: 6.25vw;
    transition: all 600ms
}

.sec1 .content .c_box .c_swiper .swiper-slide-prev .st,
.sec1 .content .c_box .c_swiper .swiper-slide-next .st {
    padding-left: 15.88542vw
}

.sec1 .content .c_box .c_swiper .swiper-slide-prev .st {
    transform: translate(-.52083vw, -1.30208vw)
}

.sec1 .content .c_box .c_swiper .swiper-slide-next .st {
    transform: translate(-.52083vw, 1.30208vw)
}

.sec1 .content .c_box .c_swiper .swiper-slide-active .st {
    padding-left: 17.96875vw
}

.sec1 .content .c_box .c_swiper .swiper-slide-active .st span {
    background: #6B4423
}

.sec1 .content .c_box .c_swiper .swiper-slide-active .st p {
    color: #6B4423;
    font-weight: 700;
    transform: scale(1.3)
}

.sec1 .content .imgs .img {
    width: 32.03125vw;
    height: 44.01042vw;
    background: #f4e5d3;
    margin: 0 auto;
    padding: 4.79167vw 0 0;
    border-radius: .625vw;
    display: none
}

.sec1 .content .imgs .img.on {
    display: block
}

.sec1 .content .imgs .img img {
    display: block;
    width: 21.875vw;
    margin: 0 auto 2.60417vw;
    transition: 1s
}

.sec1 .content .imgs .img p {
    color: #2C1810;
    font-weight: 700;
    line-height: 150%;
    text-align: center
}

.sec1 .content .imgs .img:hover img {
    transform: scale(1.1)
}

.sec2 {
    background: #FDF6E3;
    padding: 5.625vw 0 12.60417vw
}

.sec2 .title {
    color: #2C1810;
    text-align: center;
    font-weight: 700;
    line-height: 1.1
}

.sec2 .text {
    color: #6B4423;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
    margin: .9375vw 0 6.45833vw
}

.sec2 .box .item {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between
}

.sec2 .box .item:not(:last-child) {
    margin-bottom: 8.28125vw
}

.sec2 .box .item:nth-child(2):after {
    content: "";
    width: 19.79167vw;
    height: 19.79167vw;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%)
}

.sec2 .box .item:nth-child(3):after {
    content: "";
    width: 19.79167vw;
    height: 19.79167vw;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    position: absolute;
    left: 0;
    bottom: -2.70833vw;
    transform: translate(-50%, 100%)
}

.sec2 .box .item .l {
    width: calc(100% - 49.6354166vw);
    /* padding: 0 6.09375vw 0 11.25vw; */
      padding: 0  11.25vw 0 6.09375vw;
    text-align: right
}

.sec2 .box .item .l .h5 {
    color: #000;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 2.29167vw
}

.sec2 .box .item .l .p {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    line-height: 150%
}

.sec2 .box .item .r {
    width: 49.63542vw;
    height: 35.10417vw;
    overflow: hidden;
    box-shadow: 0 .78125vw .625vw 0 rgba(23, 43, 77, 0.08)
}

.sec2 .box .item .r img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec2 .box .item .r:hover img {
    transform: scale(1.1)
}

.sec2 .box .item:nth-child(2n) {
    flex-direction: row-reverse
}

.sec2 .box .item:nth-child(2n) .l {
    padding: 0 11.25vw 0 6.14583vw
}

.sec3 .wrap {
    width: 77.5vw;
    margin: 0 auto;
    padding: 7.39583vw 0 8.64583vw
}

.sec3 .wrap .title {
    color: #2C1810;
    font-weight: 700;
    line-height: 150%
}

.sec3 .wrap .text {
    color: #6B4423;
    font-weight: 600;
    line-height: 150%;
    margin: .52083vw 0 4.53125vw
}

.sec3 .wrap .swiper {
    width: 13.17708vw;
    height: 22.91667vw
}

.sec3 .wrap .swiper .swiper-wrapper {
    align-items: center
}

.sec3 .wrap .swiper .swiper-slide {
    width: 13.17708vw;
    height: fit-content;
    transition: 0.6s
}

.sec3 .wrap .swiper .swiper-slide .slide_box {
    width: 100%;
    background: linear-gradient(180deg, #F2E3D1 0%, rgba(242, 227, 209, 0.02) 100%);
    padding: 1.04167vw
}

.sec3 .wrap .swiper .swiper-slide .slide_box img {
    display: block;
    width: 100%
}

.sec3 .wrap .swiper .swiper-slide.on {
    width: 17.03125vw
}

@media screen and (max-width: 768px) {
    .banner {
        height: 60vh
    }

    .banner .swiper-slide .text_box {
        width: 90%;
        right: 5vw;
        top: 20vh
    }

    .banner .swiper-slide .text_box .h1 {
        font-size: 24px;
        line-height: 1.2;
        text-align: center
    }

    .banner .swiper-slide .text_box .p {
        font-size: 16px;
        line-height: 1.5;
        text-align: center
    }

    .banner .swiper-slide .text_box .links {
        margin: 20px 0 0;
        justify-content: center;
        gap: 10px
    }

    .banner .swiper-slide .text_box .links a {
        height: 30px;
        border-radius: 6px;
        padding: 0 10px
    }

    .banner .btns {
        top: unset;
        bottom: 20px;
        gap: 20px;
        justify-content: center
    }

    .banner .btns .jt {
        width: 40px;
        height: 40px
    }

    .banner .btns .jt img {
        width: 14px
    }

    .sec1 {
        padding: 60px 5vw 40px
    }

    .sec1:after {
        width: 30vw;
        height: 30vw;
        top: -15vw
    }

    .sec1:before {
        width: 30vw;
        height: 30vw;
        bottom: -10vw;
        left: -15vw
    }

    .sec1 .p1 {
        width: 100%;
        font-size: 18px
    }

    .sec1 .p2 {
        width: 100%;
        font-size: 16px;
        margin: 10px 0 60px
    }

    .sec1 .title {
        font-size: 24px
    }

    .sec1 .text {
        font-size: 16px;
        margin: 10px 0 25px
    }

    .sec1 .content {
        display: flex;
        flex-direction: column-reverse
    }

    .sec1 .content .c_box {
        position: static;
        margin-top: 20px
    }

    .sec1 .content .c_box .border {
        display: none
    }

    .sec1 .content .c_box .c_swiper {
        width: 100%;
        height: auto
    }

    .sec1 .content .c_box .c_swiper .swiper-slide {
        display: block
    }

    .sec1 .content .c_box .c_swiper .swiper-slide .st {
        gap: 20px;
        padding-left: 0 !important;
        transform: none !important;
        justify-content: center
    }

    .sec1 .content .c_box .c_swiper .swiper-slide .st span {
        width: 8px;
        height: 8px
    }

    .sec1 .content .c_box .c_swiper .swiper-slide .st p {
        width: auto
    }

    .sec1 .content .imgs .img {
        width: 70%;
        margin: 0 auto;
        height: auto;
        border-radius: 8px;
        padding: 30px;
        position: relative;
        z-index: 3
    }

    .sec1 .content .imgs .img img {
        width: 80%
    }

    .sec1 .content .imgs .img p {
        font-size: 16px;
        margin: 20px 0 0
    }

    .sec2 {
        padding: 60px 5vw;
        padding-top: 30px
    }

    .sec2 .title {
        font-size: 24px
    }

    .sec2 .text {
        font-size: 16px;
        margin: 10px 0 25px
    }

    .sec2 .box .item {
        flex-direction: column-reverse !important
    }

    .sec2 .box .item:not(:last-child) {
        margin-bottom: 30px
    }

    .sec2 .box .item .r {
        width: 100%;
        height: 60vw
    }

    .sec2 .box .item .l {
        width: 100%;
        padding: 30px 0 0 !important
    }

    .sec2 .box .item .l .h5 {
        font-size: 20px
    }

    .sec2 .box .item .l .p {
        font-size: 16px;
        margin: 10px 0 0
    }

    .sec3 {
        padding: 60px 0 0 0
    }

    .sec3 .wrap {
        width: 90%
    }

    .sec3 .wrap .title {
        font-size: 24px
    }

    .sec3 .wrap .text {
        font-size: 16px;
        margin: 10px 0 40px
    }

    .sec3 .wrap .swiper {
        width: 100%;
        height: unset
    }

    .sec3 .wrap .swiper .swiper-slide {
        width: 100%
    }

    .sec3 .wrap .swiper .swiper-slide .slide_box {
        padding: 20px
    }
}