.banner {
    position: relative
}

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

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

.banner .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 14.16667vw; */
    z-index: 3
}

.banner .logo img {
    display: block;
    /* width: 100% */
}

.common_title {
    text-align: center
}

.common_title .en {
    color: #000;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: .41667vw
}

.common_title .h5 {
    color: #000;
    font-weight: 500;
    line-height: 1
}

.sec1 {
    padding: 8.85417vw 0 0;
    overflow: hidden
}

.sec1 .des {
    width: 90%;
    margin: 1.92708vw auto 6.35417vw;
    color: #999;
    text-align: center;
    font-weight: 350;
    line-height: 2
}

.sec1 .swiper {
    width: 81.92708vw;
    margin-left: 5vw
}

.sec1 .swiper .swiper-slide {
    height: 30.625vw;
    position: relative
}

.sec1 .swiper .swiper-slide .play {
    position: absolute;
    z-index: 3;
    width: 5.72917vw;
    cursor: pointer;
    transition: 0.6s;
    z-index: 3
}

.sec1 .swiper .swiper-slide .play svg {
    display: block;
    width: 100%;
    height: unset
}

.sec1 .swiper .swiper-slide .play svg g {
    transition: 0.6s
}

.sec1 .swiper .swiper-slide .play:hover svg g {
    opacity: 1
}

.sec1 .swiper .swiper-slide .video_img {
    cursor: pointer
}

.sec1 .swiper .swiper-slide .video_img.on img {
    opacity: 0
}

.sec1 .swiper .swiper-slide .video_img.on .play {
    opacity: 0
}

.sec1 .swiper .swiper-slide .img {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.sec1 .swiper .swiper-slide .img img,
.sec1 .swiper .swiper-slide .img video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec1 .swiper .swiper-slide .img img {
    position: relative;
    z-index: 3
}

.sec1 .swiper .swiper-slide .img video {
    position: absolute;
    top: 0;
    left: 0
}

.sec1 .swiper .swiper-slide .img:after {
    content: "";
    width: 100%;
    height: 21.71875vw;
    opacity: 0.6;
    background: linear-gradient(180deg, transparent 0%, #000 100%);
    position: absolute;
    left: 0;
    bottom: 0
}

.sec1 .swiper .swiper-slide .img.sp:after {
    display: none
}

.sec1 .swiper .swiper-slide .img:hover img {
    transform: scale(1.1)
}

.sec1 .more {
    margin: 4.01042vw auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.66667vw;
    height: 3.125vw;
    border: 1px solid #369591;
    transition: 0.6s;
    position: relative
}

.sec1 .more .bg {
    width: 11.09375vw;
    height: unset;
    position: absolute
}

.sec1 .more p {
    color: #369591;
    font-weight: 350;
    transition: 0.6s
}

.sec1 .more img {
    display: block;
    width: 1.09375vw;
    position: absolute;
    opacity: 0;
    transition: 0.6s
}

.sec1 .more:hover {
    background: #369591
}

.sec1 .more:hover p {
    color: #FFFFFF;
    transform: translateX(-1.19792vw)
}

.sec1 .more:hover img {
    opacity: 1;
    transform: translateX(1.5625vw)
}

.sec1 .more:hover .bg {
    transform: unset
}

.sec2 {
    padding: 12.29167vw 0 0;
    overflow: hidden
}

.sec2 .des {
    width: 90%;
    margin: 1.92708vw auto 6.5625vw;
    color: #999;
    text-align: center;
    font-weight: 350;
    line-height: 2
}

.sec2 .list {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.35417vw
}

.sec2 .list .item {
    width: 29.0625vw
}

.sec2 .list .item .img {
    width: 100%;
    height: 20.15625vw;
    overflow: hidden;
    position: relative
}

.sec2 .list .item .img:after {
    content: "";
    width: 100%;
    height: 13.95833vw;
    opacity: 0.6;
    background: linear-gradient(180deg, transparent 0%, #000 100%);
    position: absolute;
    left: 0;
    bottom: 0
}

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

.sec2 .list .item .item_h5 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .83333vw;
    color: #000;
    font-weight: 400;
    line-height: 1.3;
    margin: 1.77083vw 0 0
}

.sec2 .list .item .item_h5 .dian {
    width: .52083vw;
    height: .52083vw;
    background: #369591;
    border-radius: 50%
}

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

.sec3 {
    padding: 14.01042vw 0 20.9375vw;
    overflow: hidden
}

.sec3 .swiper_box {
    width: 72.91667vw;
    margin: 6.61458vw auto 0;
    position: relative
}

.sec3 .swiper_box .btns {
    display: flex;
    gap: 82.13542vw;
    position: absolute;
    top: 9.89583vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none
}

.sec3 .swiper_box .btns .jt {
    pointer-events: auto;
    width: 4.0625vw;
    height: 4.0625vw;
    border-radius: 50%;
    border: .05208vw solid #BDA88B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.6s
}

.sec3 .swiper_box .btns .jt img {
    display: block;
    width: 2.13542vw;
    transition: 0.6s;
    margin: -.41667vw 0 0
}

.sec3 .swiper_box .btns .jt:hover {
    background: #BDA88B
}

.sec3 .swiper_box .btns .jt:hover img {
    filter: brightness(0) invert(1)
}

.sec3 .swiper_box .swiper {
    width: 100%
}

.sec3 .swiper_box .swiper .swiper-slide {
    display: flex;
    justify-content: space-between;
    padding: 0 9.79167vw 0 0
}

.sec3 .swiper_box .swiper .swiper-slide .l_box {
    padding: 4.01042vw 0 0;
    width: 20.625vw;
    opacity: 0;
    transform: translateY(1.5625vw)
}

.sec3 .swiper_box .swiper .swiper-slide .l_box .h5 {
    color: #000;
    font-weight: 700;
    line-height: 1.8
}

.sec3 .swiper_box .swiper .swiper-slide .l_box .line {
    width: 42.86458vw;
    margin-bottom: 2.86458vw
}

.sec3 .swiper_box .swiper .swiper-slide .l_box .p {
    color: #000;
    font-weight: 250;
    line-height: 2
}

.sec3 .swiper_box .swiper .swiper-slide .r_box {
    position: relative;
    width: 28.85417vw;
    opacity: 0;
    transform: translateY(1.5625vw)
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img1 {
    width: 100%;
    height: 22.03125vw;
    position: relative
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img1:hover img {
    transform: scale(1.1)
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img2 {
    width: 18.54167vw;
    height: 20.10417vw;
    position: absolute;
    top: 5.67708vw;
    left: 19.0625vw
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec3 .swiper_box .swiper .swiper-slide .r_box .img2:hover img {
    transform: scale(1.1)
}

.sec3 .swiper_box .swiper .swiper-slide.swiper-slide-active .l_box,
.sec3 .swiper_box .swiper .swiper-slide.swiper-slide-active .r_box {
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s
}

.sec4 {
    background: rgba(217, 217, 217, 0.2)
}

.sec4 .fix {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.sec4 .fix .text_box .des {
    width: 21.30208vw;
    color: #999;
    text-align: center;
    font-weight: 350;
    line-height: 2;
    margin: 1.82292vw 0 0
}

.sec4 .fix .bian_box {
    position: absolute
}

.sec4 .fix .bian_box.l {
    left: 3.80208vw;
    bottom: 50vh
}

.sec4 .fix .bian_box.r {
    right: 4.21875vw;
    top: 50vh
}

.sec4 .fix .bian_box .img {
    overflow: hidden
}

.sec4 .fix .bian_box .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec4 .fix .bian_box .img1 {
    width: 25.36458vw;
    height: 19.01042vw;
    margin: 0 0 5.10417vw 6.82292vw
}

.sec4 .fix .bian_box .img2 {
    width: 27.86458vw;
    height: 37.34375vw
}

.sec4 .fix .bian_box .img3 {
    width: 22.96875vw;
    height: 26.09375vw;
    margin: 0 0 0 auto
}

.sec4 .fix .bian_box .img4 {
    width: 26.14583vw;
    height: 25.10417vw;
    margin: 5.05208vw 0 0 3.69792vw
}

.sec5 {
    padding: 12.60417vw 0 0;
    overflow: hidden
}

.sec5 .des {
    width: 90%;
    color: #999;
    text-align: center;
    font-weight: 350;
    line-height: 2;
    margin: 1.97917vw auto 5.625vw
}

.sec5 .swiper_box {
    position: relative;
    width: 100%
}

.sec5 .swiper_box .btns {
    display: flex;
    gap: 82.29167vw;
    position: absolute;
    top: 15.625vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none
}

.sec5 .swiper_box .btns .jt {
    pointer-events: auto;
    width: 4.0625vw;
    height: 4.0625vw;
    border-radius: 50%;
    border: .05208vw solid #BDA88B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.6s
}

.sec5 .swiper_box .btns .jt img {
    display: block;
    width: 2.13542vw;
    transition: 0.6s;
    margin: -.41667vw 0 0
}

.sec5 .swiper_box .btns .jt:hover {
    background: #BDA88B
}

.sec5 .swiper_box .btns .jt:hover img {
    filter: brightness(0) invert(1)
}

.sec5 .swiper_box .swiper {
    width: 100%
}

.sec5 .swiper_box .swiper .swiper-slide {
    display: flex;
    position: relative
}

.sec5 .swiper_box .swiper .swiper-slide .r {
    width: 43.64583vw;
    height: 25.20833vw;
    overflow: hidden;
    position: absolute;
    top: 6.92708vw;
    left: 43.75vw;
    z-index: 3;
    opacity: 0;
    transform: translateY(1.5625vw)
}

.sec5 .swiper_box .swiper .swiper-slide .r img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec5 .swiper_box .swiper .swiper-slide .r:hover img {
    transform: scale(1.1)
}

.sec5 .swiper_box .swiper .swiper-slide .l_box {
    width: 53.95833vw;
    background: rgba(217, 217, 217, 0.2);
    padding: 8.80208vw 0 11.82292vw 14.01042vw;
    opacity: 0;
    transform: translateY(1.5625vw)
}

.sec5 .swiper_box .swiper .swiper-slide .l_box .h5 {
    color: #000;
    font-weight: 700;
    line-height: 1.77
}

.sec5 .swiper_box .swiper .swiper-slide .l_box .line {
    width: 29.63542vw;
    margin: 1.51042vw 0 0
}

.sec5 .swiper_box .swiper .swiper-slide .l_box .line img {
    display: block;
    width: 100%
}

.sec5 .swiper_box .swiper .swiper-slide .l_box .p {
    width: 20.83333vw;
    margin: -4.375vw 0 0;
    color: #000;
    font-weight: 250;
    line-height: 1.6
}

.sec5 .swiper_box .swiper .swiper-slide.swiper-slide-active .l_box,
.sec5 .swiper_box .swiper .swiper-slide.swiper-slide-active .r {
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s
}

.sec6 {
    padding: 11.19792vw 0;
    overflow: hidden
}

.sec6 .des {
    width: 46.04167vw;
    color: #999;
    text-align: center;
    font-weight: 350;
    line-height: 2;
    margin: 1.97917vw auto 4.47917vw
}

.sec6 .swiper {
    width: 110.625vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.sec6 .swiper .swiper-slide .img {
    height: 32.70833vw;
    overflow: hidden;
    opacity: 0;
    transition: 0.6s
}

.sec6 .swiper .swiper-slide .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.sec6 .swiper .swiper-slide .img:hover img {
    transform: scale(1.05)
}

.sec6 .swiper .swiper-slide.swiper-slide-active .img {
    opacity: 1
}

.sec6 .swiper .swiper-slide.swiper-slide-next .img,
.sec6 .swiper .swiper-slide.swiper-slide-prev .img {
    opacity: 0.5
}

.sec7 {
    padding: 7.8125vw 0 10.10417vw;
    background: #F7F7F7;
    overflow: hidden
}

.sec7 .list {
    display: flex;
    justify-content: center;
    margin: 5.05208vw 0 0;
    gap: 9.79167vw
}

.sec7 .list .item {
    min-width: 11.51042vw
}

.sec7 .list .item .icon {
    width: 6.30208vw;
    height: 6.30208vw;
    margin: 0 auto
}

.sec7 .list .item .icon img {
    display: block;
    width: 100%;
    height: 100%
}

.sec7 .list .item .p {
    color: #333;
    text-align: center;
    font-weight: 400;
    line-height: 1.3;
    margin: 1.40625vw 0 0
}

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

    .banner::after {
        height: 100%
    }

    .banner .bg {
        height: 300px
    }

    .banner .logo {
        width: 140px
    }

    .common_title .h5 {
        margin-bottom: 6px
    }

    .sec1 {
        padding: 50px 5vw
    }

    .sec1 .des {
        width: 100%;
        font-size: 14px;
        margin: 20px 0
    }

    .sec1 .swiper {
        width: 100%;
        margin: 0
    }

    .sec1 .swiper .swiper-slide {
        height: 62vw
    }

    .sec1 .swiper .swiper-slide .play {
        width: 40px
    }

    .sec1 .more {
        width: 120px;
        height: 40px;
        margin: 30px auto 0
    }

    .sec2 {
        padding: 10px 5vw 50px
    }

    .sec2 .des {
        width: 100%;
        font-size: 14px;
        margin: 20px 0
    }

    .sec2 .list {
        width: 100%;
        gap: 20px 0
    }

    .sec2 .list .item {
        width: 100%
    }

    .sec2 .list .item .img {
        height: 60vw
    }

    .sec2 .list .item .item_h5 {
        margin: 8px 0 0;
        gap: 6px
    }

    .sec2 .list .item .item_h5 .dian {
        width: 8px;
        height: 8px
    }

    .sec3 {
        padding: 10px 5vw 50px
    }

    .sec3 .swiper_box {
        width: 100%
    }

    .sec3 .swiper_box .swiper .swiper-slide {
        flex-direction: column-reverse;
        padding: 0
    }

    .sec3 .swiper_box .swiper .swiper-slide .r_box {
        width: 100%;
        margin-bottom: 30vw
    }

    .sec3 .swiper_box .swiper .swiper-slide .r_box .img1 {
        width: 80vw;
        height: 60vw
    }

    .sec3 .swiper_box .swiper .swiper-slide .r_box .img2 {
        right: 0;
        left: unset;
        top: 23vw;
        width: 60vw;
        height: 63vw
    }

    .sec3 .swiper_box .swiper .swiper-slide .l_box {
        width: 100%
    }

    .sec3 .swiper_box .swiper .swiper-slide .l_box .h5 {
        font-size: 18px
    }

    .sec3 .swiper_box .swiper .swiper-slide .l_box .line {
        width: 240px;
        margin: 6px 0
    }

    .sec3 .swiper_box .swiper .swiper-slide .l_box .p {
        font-size: 14px;
        width: 100%
    }

    .sec3 .swiper_box .btns {
        margin: 20px 0 0;
        justify-content: center;
        gap: 20px;
        position: unset;
        transform: unset
    }

    .sec3 .swiper_box .btns .jt {
        width: 30px;
        height: 30px
    }

    .sec3 .swiper_box .btns .jt img {
        width: 16px
    }

    .sec4 {
        height: unset !important
    }

    .sec4 .fix {
        height: unset;
        padding: 50px 5vw;
        display: block
    }

    .sec4 .fix .text_box {
        margin-bottom: 25px
    }

    .sec4 .fix .text_box .des {
        width: 100%;
        font-size: 14px
    }

    .sec4 .fix .bian_box {
        position: unset;
        transform: unset !important;
        display: flex;
        justify-content: space-between;
        margin-bottom: 3vw
    }

    .sec4 .fix .bian_box .img {
        width: 48.5% !important;
        height: 36vw !important;
        margin: 0 !important
    }

    .sec5 {
        padding: 50px 5vw
    }

    .sec5 .des {
        width: 100%;
        margin: 20px 0
    }

    .sec5 .swiper_box .swiper .swiper-slide {
        flex-direction: column-reverse
    }

    .sec5 .swiper_box .swiper .swiper-slide .r {
        width: 100%;
        position: unset;
        height: 50vw
    }

    .sec5 .swiper_box .swiper .swiper-slide .l_box {
        width: 100%;
        padding: 20px
    }

    .sec5 .swiper_box .swiper .swiper-slide .l_box .h5 {
        font-size: 18px;
        margin-bottom: 10px
    }

    .sec5 .swiper_box .swiper .swiper-slide .l_box .line {
        display: none
    }

    .sec5 .swiper_box .swiper .swiper-slide .l_box .p {
        font-size: 14px;
        width: 100%;
        margin: 0
    }

    .sec5 .swiper_box .btns {
        margin: 20px 0 0;
        justify-content: center;
        gap: 20px;
        position: unset;
        transform: unset
    }

    .sec5 .swiper_box .btns .jt {
        width: 30px;
        height: 30px
    }

    .sec5 .swiper_box .btns .jt img {
        width: 16px
    }

    .sec6 {
        padding: 10px 5vw 50px
    }

    .sec6 .common_title .en {
        font-size: 18px;
        margin-bottom: 8px
    }

    .sec6 .des {
        width: 100%;
        margin: 20px 0;
        font-size: 14px
    }

    .sec6 .swiper {
        width: 100%
    }

    .sec6 .swiper .swiper-slide .img {
        height: 50vw
    }

    .sec7 {
        padding: 50px 5vw
    }

    .sec7 .list {
        flex-wrap: wrap;
        margin: 30px 0 0;
        gap: 20px 0
    }

    .sec7 .list .item {
        width: 50%
    }

    .sec7 .list .item .icon {
        width: 60px;
        height: 60px
    }

    .sec7 .list .item .p {
        font-size: 16px;
        margin: 6px 0 0
    }
}