.banner {
    position: relative
}

.banner::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30.05208vw;
    opacity: 0.8;
    background: linear-gradient(180deg, transparent 0%, #000 100%)
}

.banner .bg {
    display: block;
    width: 100%;
    height: 44.79167vw;
    object-fit: cover
}

.banner .text {
    position: absolute;
    width: 100%;
    bottom: 14.11458vw;
    padding: 0 5.72917vw;
    color: white;
    z-index: 5
}

.banner .text .icons {
    display: flex;
    gap: 3.125vw
}

.banner .text .icons .pic img {
    max-height: 4.08333vw;
    display: block
}

.banner .text .p1 {
    margin: 2.70833vw 0 .20833vw 0;
    font-size: 3.22917vw
}

.banner .text .des {
    font-weight: 275;
    line-height: 1.77
}

.banner .pics {
    position: absolute;
    right: 5vw;
    bottom: 15vw;
    width: 25vw;
    z-index: 10;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.banner .pics.animated {
    clip-path: inset(0 0 0 0)
}

.banner .pics a {
    display: block
}

.banner .pics a .pic {
    overflow: hidden
}

.banner .pics a .pic img {
    width: 100%;
    height: 6.82292vw;
    display: block;
    object-fit: cover;
    transition: all 600ms
}

.banner .pics a p {
    color: #FFF;
    font-weight: 300;
    margin-top: 1.30208vw;
    text-align: center
}

.banner .pics a:hover .pic img {
    transform: scale(1.05)
}

.banner .pics .swiper-pagination {
    position: static;
    background: rgba(217, 217, 217, 0.12);
    height: .10417vw;
    margin-top: 2.29167vw
}

.banner .pics .swiper-pagination .swiper-pagination-progressbar-fill {
    background: rgba(217, 217, 217, 0.5)
}

.container {
    background: #F5F4EF
}

.container .sec1 {
    background: url(../images/b3.png) no-repeat;
    background-size: cover;
    padding: 5.41667vw 12.65625vw 7.03125vw 11.5625vw;
    color: white;
    position: relative;
    z-index: 5
}

.container .sec1::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 98, 92, 0.8);
    z-index: -1
}

.container .sec1 .title .en {
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Montserrat"
}

.container .sec1 .title .cn {
    font-weight: 500;
    margin-top: .52083vw
}

.container .sec1 .content {
    margin-top: 4.375vw;
    display: flex;
    justify-content: space-between;
    gap: 7.29167vw;
    align-items: flex-end;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.container .sec1 .content.animated {
    clip-path: inset(0 0 0 0)
}

.container .sec1 .content .pic {
    width: 43.95833vw;
    overflow: hidden
}

.container .sec1 .content .pic img {
    width: 100%;
    height: 25.41667vw;
    display: block;
    object-fit: cover;
    transition: all 600ms
}

.container .sec1 .content .pic:hover img {
    transform: scale(1.05)
}

.container .sec1 .content .text {
    width: 100%;
    flex: 1;
    padding-bottom: .72917vw
}

.container .sec1 .content .text .pt {
    display: flex;
    align-items: flex-end;
    gap: 1.25vw;
    text-transform: uppercase;
    font-weight: 500
}

.container .sec1 .content .text .pt .p2 {
    transform: translateY(-.20833vw)
}

.container .sec1 .content .text .des {
    margin-top: 2.08333vw;
    line-height: 2.28
}

.container .sec2 {
    padding: 10.57292vw 5.83333vw 15.3125vw 6.04167vw
}

.container .sec2 .title {
    text-align: center
}

.container .sec2 .title .en {
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Montserrat"
}

.container .sec2 .title .cn {
    font-weight: 500;
    margin-top: .41667vw
}

.container .sec2 .list {
    margin-top: 7.76042vw;
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;

    gap: 3.125vw
}

.container .sec2 .list .item {
    width: 100%;
    text-align: center
}

.container .sec2 .list .item .pic {
    width: 13.54167vw;
    height: 13.54167vw;
    background: url(../images/border.svg) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 600ms
}

.container .sec2 .list .item .pic img {
    width: 11.97917vw;
    height: 11.97917vw;
    border-radius: 50%
}

.container .sec2 .list .item .pt {
    margin: 1.97917vw 0 2.70833vw 0;
    font-weight: 500
}

.container .sec2 .list .item .des {
    font-weight: 250;
    line-height: 2.28;
    width: 15.52083vw;
    margin: 0 auto
}

.container .sec2 .list .item:hover .pic {
    transform: scale(1.05)
}

.container .sec3 .title {
    padding: 0 6.25vw 0 11.25vw
}

.container .sec3 .title .en {
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
    font-family: "Montserrat"
}

.container .sec3 .title .cn {
    margin-top: .78125vw;
    font-weight: 500
}

.container .sec3 .title2 {
    padding: 0 6.25vw 2.91667vw 11.25vw;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative
}

.container .sec3 .title2 .des {
    margin-top: 1.04167vw;
    width: 28.80208vw;
    color: #666;
    font-weight: 350;
    line-height: 2
}

.container .sec3 .title2 img {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.container .sec3 .title2 img.animated {
    clip-path: inset(0 0 0 0)
}

.container .sec3 .list {
    padding: 7.5vw 1.71875vw 16.66667vw 1.71875vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.40625vw
}

.container .sec3 .list .item {
    width: 100%
}

.container .sec3 .list .item .pic {
    overflow: hidden
}

.container .sec3 .list .item .pic img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 22.91667vw;
    transition: all 600ms
}

.container .sec3 .list .item p {
    margin-top: 2.29167vw;
    text-align: center
}

.container .sec3 .list .item:hover .pic img {
    transform: scale(1.05)
}

.container .sec4 .title {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 7.29167vw 6.25vw 11.25vw
}

.container .sec4 .title .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: block;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.container .sec4 .title .line.animated {
    clip-path: inset(0 0 0 0)
}

.container .sec4 .title .lbox .en {
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
    font-family: "Montserrat"
}

.container .sec4 .title .lbox .cn {
    margin: .78125vw 0 1.82292vw 0;
    font-weight: 500
}

.container .sec4 .title .lbox .des {
    width: 35.78125vw;
    color: #666;
    line-height: 2;
    font-weight: 350
}

.container .sec4 .title .rbox {
    width: 18.80208vw;
    height: 11.17188vw;
    color: #B79A54;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.container .sec4 .title .rbox .t {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.34375vw;
    display: block;
    height: auto
}

.container .sec4 .title .rbox .b {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.34375vw;
    display: block;
    height: auto
}

.container .sec4 .list {
    padding: 10.3125vw 13.4375vw 15.88542vw 13.4375vw;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 5
}

.container .sec4 .list p {
    width: 6.66667vw;
    text-align: center;
    line-height: 4.16667vw;
    position: relative;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer
}

.container .sec4 .list p img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 20.9375vw;
    max-width: inherit;
    display: block;
    opacity: 0;
    transition: all 600ms
}

.container .sec4 .list p.on {
    font-weight: 700;
    color: #fff
}

.container .sec4 .list p.on img {
    opacity: 1
}

.container .sec5 {
    background: url(../images/glbg.png) no-repeat;
    background-size: cover;
    padding: 5.41667vw 11.40625vw 7.03125vw 11.25vw;
    color: white;
    position: relative;
    z-index: 5
}

.container .sec5 .title .en {
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Montserrat"
}

.container .sec5 .title .cn {
    font-weight: 500;
    margin-top: .52083vw
}

.container .sec5 .content {
    margin-top: 4.375vw;
    display: flex;
    justify-content: space-between;
    gap: 8.33333vw;
    align-items: flex-end;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.container .sec5 .content.animated {
    clip-path: inset(0 0 0 0)
}

.container .sec5 .content .pic {
    width: 43.95833vw;
    overflow: hidden
}

.container .sec5 .content .pic img {
    width: 100%;
    height: 25.41667vw;
    display: block;
    object-fit: cover;
    transition: all 600ms
}

.container .sec5 .content .pic:hover img {
    transform: scale(1.05)
}

.container .sec5 .content .text {
    width: 100%;
    flex: 1;
    padding-bottom: 3.90625vw
}

.container .sec5 .content .text .pt {
    display: flex;
    gap: .625vw;
    text-transform: uppercase;
    font-weight: 600
}

.container .sec5 .content .text .pt .p2 {
    font-weight: 300
}

.container .sec5 .content .text .des {
    margin-top: 1.45833vw;
    line-height: 2
}

.container .sec6 {
    padding: 11.97917vw 0 15.625vw 0
}

.container .sec6 .title {
    text-align: center
}

.container .sec6 .title .en {
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
    font-family: "Montserrat"
}

.container .sec6 .title .cn {
    margin-top: .78125vw;
    font-weight: 500
}

.container .sec6 .title .des {
    width: 46.04167vw;
    margin: 2.29167vw auto 9.01042vw auto;
    color: #999;
    font-weight: 350;
    line-height: 2
}

.container .sec6 .content {
    padding-right: 12.60417vw;
    position: relative;
    clip-path: inset(0 100% 0 0);
    transition: all 2s
}

.container .sec6 .content.animated {
    clip-path: inset(0 0 0 0)
}

.container .sec6 .content .swiper2 {
    width: 100%
}

.container .sec6 .content .swiper2 .item {
    display: flex
}

.container .sec6 .content .swiper2 .item .lbox {
    width: 53.95833vw;
    background: rgba(217, 217, 217, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8.80208vw 0 13.48958vw 14.01042vw
}

.container .sec6 .content .swiper2 .item .lbox .p1 {
    font-weight: 700;
    line-height: 1.78
}

.container .sec6 .content .swiper2 .item .lbox .des {
    margin-top: 1.51042vw;
    width: 20.3125vw;
    font-weight: 250;
    line-height: 1.6;
    position: relative;
    padding-top: 3.17708vw
}

.container .sec6 .content .swiper2 .item .lbox .des img {
    position: absolute;
    top: 0;
    width: 29.63542vw;
    left: 0;
    max-width: inherit
}

.container .sec6 .content .swiper2 .item .pic {
    margin-top: 3.54167vw;
    margin-left: -10.26042vw;
    position: relative;
    z-index: 5;
    overflow: hidden
}

.container .sec6 .content .swiper2 .item .pic img {
    width: 43.64583vw;
    height: 25.20833vw;
    display: block;
    transition: all 600ms;
    object-fit: cover
}

.container .sec6 .content .swiper2 .item .pic:hover img {
    transform: scale(1.05)
}

.container .sec6 .content .prev,
.container .sec6 .content .next {
    width: 4.0625vw;
    height: 4.0625vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #BDA88B;
    transition: all 600ms;
    cursor: pointer;
    position: absolute;
    z-index: 10
}

.container .sec6 .content .prev svg,
.container .sec6 .content .next svg {
    display: block;
    width: 2.13542vw;
    height: auto;
    margin-top: -.26042vw
}

.container .sec6 .content .prev svg path,
.container .sec6 .content .next svg path {
    transition: all 600ms
}

.container .sec6 .content .prev:hover,
.container .sec6 .content .next:hover {
    background: #BDA88B
}

.container .sec6 .content .prev:hover svg path,
.container .sec6 .content .next:hover svg path {
    stroke: #fff
}

.container .sec6 .content .prev {
    left: 5vw;
    top: 15.625vw
}

.container .sec6 .content .next {
    right: 4.6875vw;
    top: 15.625vw
}

@media screen and (max-width: 768px) {
    .banner {
        margin-top: 60px;
        position: relative
    }

    .banner::after {
        height: 100%
    }

    .banner .bg {
        height: 400px
    }

    .banner .text {
        bottom: 150px;
        padding: 0 5%
    }

    .banner .text .icons {
        gap: 30px
    }

    .banner .text .icons .pic img {
        max-height: 40px
    }

    .banner .text .p1 {
        margin: 30px 0 4px 0;
        font-size: 20px
    }

    .banner .text .des {
        font-size: 12px;
        height: 42px;
        overflow-y: scroll
    }

    .banner .pics {
        right: 5%;
        width: 70%;
        bottom: 10px
    }

    .banner .pics a .pic img {
        height: 77px
    }

    .banner .pics a p {
        margin-top: 15px
    }

    .container {
        background: #F5F4EF
    }

    .container .sec1 {
        padding: 30px 5% 80px 5%
    }

    .container .sec1 .title {
        font-size: 20px
    }

    .container .sec1 .title .cn {
        margin-top: 5px
    }

    .container .sec1 .content {
        margin-top: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start
    }

    .container .sec1 .content .pic {
        width: 100%
    }

    .container .sec1 .content .pic img {
        height: 195px
    }

    .container .sec1 .content .text {
        padding-bottom: 0
    }

    .container .sec1 .content .text .pt {
        gap: 15px;
        font-size: 14px
    }

    .container .sec1 .content .text .pt .p2 {
        transform: translateY(-2px)
    }

    .container .sec1 .content .text .des {
        margin-top: 10px;
        line-height: 1.8;
        font-size: 14px
    }

    .container .sec2 {
        padding: 30px 5% 100px 5%
    }

    .container .sec2 .title {
        font-size: 20px
    }

    .container .sec2 .title .cn {
        margin-top: 5px
    }

    .container .sec2 .list {
        display: grid;
        margin-top: 30px;
        grid-template-columns: repeat(2,1fr);
        gap: 20px
    }

    .container .sec2 .list .item .pic {
        width: 100%;
        height: auto;
    }

    .container .sec2 .list .item .pic img {
        width: 100%;
        height: auto;
        /* height: 180px */
    }

    .container .sec2 .list .item .pt {
        margin: 15px 0 10px 0;
        font-size: 16px
    }

    .container .sec2 .list .item .des {
        width: 100%;
        font-size: 12px;
        line-height: 1.8;
        /* padding: 0 10%; */
        padding: 0;
    }

    .container .sec3 .title {
        padding: 0 5%;
        font-size: 20px
    }

    .container .sec3 .title .cn {
        margin-top: 5px
    }

    .container .sec3 .title2 {
        padding: 30px 5%
    }

    .container .sec3 .title2 .p1 {
        font-size: 20px
    }

    .container .sec3 .title2 .des {
        margin-top: 15px;
        width: 100%;
        font-size: 14px;
        line-height: 1.8
    }

    .container .sec3 .title2 img {
        width: 100%
    }

    .container .sec3 .list {
        padding: 60px 5%;
        grid-template-columns: 1fr;
        gap: 30px
    }

    .container .sec3 .list .item .pic img {
        height: 250px
    }

    .container .sec3 .list .item p {
        margin-top: 10px
    }

    .container .sec4 .title {
        padding: 0 5% 60px 5%;
        flex-direction: column;
        gap: 30px
    }

    .container .sec4 .title .lbox {
        font-size: 20px
    }

    .container .sec4 .title .lbox .cn {
        margin: 5px 0 10px 0
    }

    .container .sec4 .title .lbox .des {
        width: 100%;
        font-size: 14px;
        line-height: 1.8
    }

    .container .sec4 .title .rbox {
        width: 200px;
        height: 150px;
        font-size: 24px;
        margin: 0 auto
    }

    .container .sec4 .title .rbox .t,
    .container .sec4 .title .rbox .b {
        width: 30px
    }

    .container .sec4 .list {
        padding: 40px 5% 60px 5%;
        gap: 20px
    }

    .container .sec4 .list p {
        width: 100%;
        line-height: 60px;
        font-size: 16px
    }

    .container .sec4 .list p:first-child {
        font-size: 18px
    }

    .container .sec4 .list img {
        left: 0;
        top: 0;
        width: 120px
    }

    .container .sec5 {
        padding: 30px 5% 60px 5%
    }

    .container .sec5 .title {
        font-size: 20px
    }

    .container .sec5 .title .cn {
        margin-top: 5px
    }

    .container .sec5 .content {
        margin-top: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start
    }

    .container .sec5 .content .pic {
        width: 100%
    }

    .container .sec5 .content .pic img {
        height: 195px
    }

    .container .sec5 .content .text {
        padding-bottom: 0
    }

    .container .sec5 .content .text .pt {
        gap: 6px;
        font-size: 16px
    }

    .container .sec5 .content .text .des {
        margin-top: 10px;
        line-height: 1.8;
        font-size: 14px
    }

    .container .sec6 {
        padding: 30px 0 60px 0
    }

    .container .sec6 .title {
        font-size: 20px
    }

    .container .sec6 .title .en {
        font-size: 18px
    }

    .container .sec6 .title .cn {
        margin-top: 5px
    }

    .container .sec6 .title .des {
        width: 100%;
        margin: 20px auto 40px auto;
        font-size: 14px;
        line-height: 1.8;
        padding: 0 5%
    }

    .container .sec6 .content {
        padding-right: 0
    }

    .container .sec6 .content .swiper2 .item {
        flex-direction: column
    }

    .container .sec6 .content .swiper2 .item .lbox {
        width: 100%;
        padding: 30px 5%
    }

    .container .sec6 .content .swiper2 .item .lbox .p1 {
        font-size: 16px
    }

    .container .sec6 .content .swiper2 .item .lbox .des {
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
        padding-top: 0
    }

    .container .sec6 .content .swiper2 .item .lbox .des img {
        width: 100%;
        display: none
    }

    .container .sec6 .content .swiper2 .item .pic {
        margin-top: 0;
        margin-left: 0
    }

    .container .sec6 .content .swiper2 .item .pic img {
        width: 100%;
        height: 216px
    }

    .container .sec6 .content .prev,
    .container .sec6 .content .next {
        width: 40px;
        height: 40px;
        bottom: 20px
    }

    .container .sec6 .content .prev svg,
    .container .sec6 .content .next svg {
        width: 15px
    }

    .container .sec6 .content .prev {
        left: 48%;
        top: auto;
        transform: translateX(-100%)
    }

    .container .sec6 .content .next {
        right: 48%;
        top: auto;
        transform: translateX(100%)
    }
}