img {
    display: block;
    object-fit: cover
}

.common_title {
    display: flex;
    align-items: center;
    gap: 0 1.04167vw
}

.common_title p {
    color: #333;
    line-height: 1.13;
    text-transform: uppercase;
    font-weight: 400
}

.common_title p.cn {
    font-weight: 400;
    line-height: 1.25
}

.common_title span {
    width: 1px;
    height: 1.82292vw;
    background: #00A9B2
}

.common_more {
    width: fit-content;
    display: flex;
    align-items: center;
    padding: .26042vw .26042vw .26042vw 1.25vw;
    gap: 0 1.35417vw;
    border-radius: 2.08333vw;
    background: rgba(242, 242, 242, 0.8)
}

.common_more p {
    color: #2B323E;
    font-weight: 400
}

.common_more .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.08333vw;
    height: 2.08333vw;
    border-radius: 50%;
    background: #00B2B5;
    transition: 0.6s
}

.common_more .icon img {
    display: block;
    width: .72917vw
}

.common_more:hover .icon {
    transform: rotate(45deg)
}

.w1520 {
    width: 79.16667vw;
    margin: 0 auto
}

.sec1 {
    padding: 7.8125vw 0 41.66667vw;
    width: 100%;
    overflow: hidden;
    position: relative
}

.sec1 .cir {
    position: absolute
}

.sec1 .cir img {
    width: 100%
}

.sec1 .cir.cir1 {
    width: 33.90625vw;
    top: 14.0625vw;
    right: 0
}

.sec1 .cir.cir2 {
    width: 10.15625vw;
    top: 24.53125vw;
    right: 47.70833vw
}

.sec1 .cir.cir3 {
    width: 22.5vw;
    top: 34.0625vw;
    right: 27.29167vw
}

.sec1 .cir.cir4 {
    width: 22.5vw;
    top: 37.70833vw;
    left: .625vw
}

.sec1 .cir.cir5 {
    width: 15.98958vw;
    top: 45.26042vw;
    left: 25.83333vw
}

.sec1 .cir.cir6 {
    width: 22.5vw;
    top: 49.32292vw;
    left: 45.72917vw
}

.sec1 .cir.cir7 {
    width: 20.15625vw;
    top: 51.51042vw;
    left: 73.95833vw
}

.sec1 .cir.cir8 {
    width: 13.48958vw;
    top: 53.85417vw;
    left: 12.5vw
}

.sec1 .cir.cir9 {
    width: 16.71875vw;
    top: 59.79167vw;
    left: 29.84375vw
}

.sec1 .wrap .text {
    width: 23.28125vw;
    color: #333;
    font-weight: 400;
    line-height: 1.8;
    margin: 5.3125vw 0 5.05208vw
}

.sec2 .common_title {
    justify-content: center
}

.sec2 .position {
    width: 41.66667vw;
    height: 15.625vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5.20833vw auto 0
}

.sec2 .position .img {
    width: 41.66667vw;
    height: 15.625vw;
    border-radius: 2.08333vw;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.sec2 .position .img.on {
    border-radius: 0
}

.sec2 .position .img .img_box {
    width: 100vw;
    height: 49.47917vw;
    position: absolute
}

.sec2 .position .img .img_box .num_box {
    display: none;
    position: absolute;
    width: 100%;
    top: 25.52083vw;
    z-index: 3
}

.sec2 .position .img .img_box .num_box .numList {
    display: flex;
    justify-content: center;
    gap: 0 8.33333vw;
    width: 100%
}

.sec2 .position .img .img_box .num_box .numList .item .num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: .88542vw;
    gap: 0 .52083vw
}

.sec2 .position .img .img_box .num_box .numList .item .num p {
    color: #FFF;
    font-weight: 500;
    line-height: 1
}

.sec2 .position .img .img_box .num_box .numList .item .num span {
    display: block;
    color: #FFF;
    font-weight: 400;
    line-height: 1;
    margin-bottom: .78125vw
}

.sec2 .position .img .img_box .num_box .numList .item h5 {
    color: #FFF;
    text-align: center;
    font-weight: 400;
    line-height: 1.33
}

.sec2 .position .img .img_box img {
    width: 100%;
    height: 100%
}

.sec3 {
    padding: 23.95833vw 0 10.41667vw;
    width: 100%;
    overflow: hidden;
    position: relative
}

.sec3 .control {
    position: absolute;
    left: -9.53125vw;
    top: 34.375vw
}

.sec3 .control .cir {
    width: 12.60417vw;
    margin-bottom: 2.08333vw;
    opacity: 0.4;
    transition: 0.6s;
    cursor: pointer
}

.sec3 .control .cir img {
    width: 100%
}

.sec3 .control .cir:hover {
    opacity: 1
}

.sec3 .control .cir.on {
    opacity: 1;
    transform: translateX(2.08333vw)
}

.sec3 .wrap .box {
    margin: 4.16667vw 0 0
}

.sec3 .wrap .box .item {
    justify-content: space-between;
    align-items: center;
    display: none
}

.sec3 .wrap .box .item.on {
    display: flex
}

.sec3 .wrap .box .item .l {
    width: 41.66667vw
}

.sec3 .wrap .box .item .l img {
    display: block;
    width: 100%
}

.sec3 .wrap .box .item .r {
    width: 32.03125vw;
    padding: 4.47917vw 0 0
}

.sec3 .wrap .box .item .r .label {
    color: #000;
    font-weight: 400;
    line-height: 1;
    padding: 0 0 0 1.35417vw;
    position: relative
}

.sec3 .wrap .box .item .r .label:after {
    content: "";
    width: .52083vw;
    height: .52083vw;
    background: #00A9B2;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.sec3 .wrap .box .item .r .r_title {
    color: #000;
    font-weight: 400;
    line-height: 1;
    margin: 1.5625vw 0
}

.sec3 .wrap .box .item .r .r_text {
    color: #333;
    font-weight: 400;
    line-height: 1.875
}

.sec4 {
    position: relative
}

.sec4 .cir {
    position: absolute
}

.sec4 .cir img {
    width: 100%
}

.sec4 .cir.cir1 {
    width: 61.92708vw;
    top: .78125vw;
    left: 29.6875vw
}

.sec4 .cir.cir2 {
    width: 94.79167vw;
    top: .78125vw;
    left: 1.5625vw
}

.sec4 .wrap {
    width: 100%;
    overflow: hidden
}

.sec4 .wrap .sec4_swiper {
    width: 79.16667vw;
    margin: 0 auto
}

.sec4 .wrap .sec4_swiper .swiper-slide .item {
    display: flex;
    overflow: hidden
}

.sec4 .wrap .sec4_swiper .swiper-slide .item .img {
    width: 50%;
    height: 28.125vw;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    opacity: 0;
    transition: all 600ms
}

.sec4 .wrap .sec4_swiper .swiper-slide .item .img img {
    width: 100%;
    height: 100%;
    transition: 0.6s
}

.sec4 .wrap .sec4_swiper .swiper-slide .item .slide_box {
    width: 50%;
    padding: 18.95833vw 0 0 4.16667vw
}

.sec4 .wrap .sec4_swiper .swiper-slide .item .slide_box .slide_text_box .slide_title {
    color: #000;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: .83333vw;
    opacity: 0;
    transform: translateY(1.04167vw)
}

.sec4 .wrap .sec4_swiper .swiper-slide .item .slide_box .slide_text_box .slide_text {
    color: #00A9B2;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(1.04167vw)
}

.sec4 .wrap .sec4_swiper .swiper-slide .item:nth-child(2n) {
    flex-direction: row-reverse
}

.sec4 .wrap .sec4_swiper .swiper-slide .item:nth-child(2n) .img {
    transition-delay: 400ms
}

.sec4 .wrap .sec4_swiper .swiper-slide .item:nth-child(2n) .slide_box {
    padding: 18.95833vw 4.16667vw 0 0
}

.sec4 .wrap .sec4_swiper .swiper-slide .item:nth-child(2n) .slide_box .slide_text_box .slide_title,
.sec4 .wrap .sec4_swiper .swiper-slide .item:nth-child(2n) .slide_box .slide_text_box .slide_text {
    transition-delay: 400ms
}

.sec4 .wrap .sec4_swiper .swiper-slide .item:hover .img img {
    transform: scale(1.1)
}

.sec4 .wrap .sec4_swiper .swiper-slide.swiper-slide-active .item .img {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    opacity: 1
}

.sec4 .wrap .sec4_swiper .swiper-slide.swiper-slide-active .slide_box .slide_text_box .slide_title {
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s
}

.sec4 .wrap .sec4_swiper .swiper-slide.swiper-slide-active .slide_box .slide_text_box .slide_text {
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s
}

.sec5 {
    padding: 6.25vw 0 5.46875vw;
    background: #F5F5F5;
    position: relative
}

.sec5 .cir {
    position: absolute
}

.sec5 .cir img {
    width: 100%
}

.sec5 .cir.cir1 {
    width: 11.66667vw;
    top: 3.80208vw;
    right: 19.375vw
}

.sec5 .cir.cir2 {
    width: 11.66667vw;
    top: 6.30208vw;
    right: 7.96875vw
}

.sec5 .cir.cir3 {
    width: 5.9375vw;
    top: 11.51042vw;
    right: 0
}

.sec5 .wrap .common_title {
    margin-bottom: 5.36458vw
}

.sec5 .wrap .list {
    display: flex;
    justify-content: space-between
}

.sec5 .wrap .list .item {
    width: 8.28125vw;
    height: 31.25vw;
    border-radius: 1.04167vw;
    overflow: hidden;
    position: relative;
    transition: 1s
}

.sec5 .wrap .list .item:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    opacity: 0.5;
    transition: 0.6s
}

.sec5 .wrap .list .item .img {
    width: 36.51042vw;
    height: 100%
}

.sec5 .wrap .list .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec5 .wrap .list .item .item_title {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 3.64583vw;
    z-index: 2;
    color: #FFF;
    font-weight: 500;
    line-height: 1
}

.sec5 .wrap .list .item .item_content {
    width: 36.51042vw;
    position: absolute;
    z-index: 2;
    top: 26.04167vw;
    padding: 0 2.70833vw;
    opacity: 0;
    transition: 0.6s
}

.sec5 .wrap .list .item .item_content h5 {
    color: #FFF;
    font-weight: 500;
    line-height: 1
}

.sec5 .wrap .list .item .item_content .item_text {
    color: #FFF;
    font-weight: 400;
    line-height: 1.5;
    margin: 1.51042vw 0 2.13542vw
}

.sec5 .wrap .list .item.on {
    width: 36.51042vw
}

.sec5 .wrap .list .item.on:after {
    opacity: 1
}

.sec5 .wrap .list .item.on .item_title {
    opacity: 0
}

.sec5 .wrap .list .item.on .item_content {
    opacity: 1;
    transform: translateY(-10.41667vw)
}

.sec5 .wrap .list .item:nth-child(1) {
    margin: 1.19792vw 0 0
}

.sec5 .wrap .list .item:nth-child(2) {
    margin: 3.54167vw 0 0
}

.sec5 .wrap .list .item:nth-child(3) {
    margin: 5.26042vw 0 0
}

.sec5 .wrap .list .item:nth-child(5) {
    margin: 3.54167vw 0 0
}

.sec6 {
    padding: 9.79167vw 0 0;
    position: relative;
    z-index: 3
}

.sec6 .img {
    width: 41.66667vw;
    height: 20.83333vw;
    cursor: pointer;
    margin: 15.625vw auto 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.sec6 .img .img_box {
    position: absolute;
    width: 41.66667vw;
    height: 20.83333vw;
    border-radius: 2.08333vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.sec6 .img img {
    width: 79.16667vw;
    max-width: unset;
    position: absolute
}

.sec7 {
    margin: 10.41667vw 0 0;
    padding: 8.33333vw 0 28.64583vw;
    position: relative;
    width: 100%;
    overflow: hidden
}

.sec7 .cir {
    position: absolute
}

.sec7 .cir img {
    width: 100%
}

.sec7 .cir.cir1 {
    width: 28.95833vw;
    top: 5.67708vw;
    right: 0
}

.sec7 .cir.cir2 {
    width: 22.5vw;
    top: 35.88542vw;
    right: 27.29167vw
}

.sec7 .cir.cir3 {
    width: 19.375vw;
    top: 58.85417vw;
    left: .72917vw
}

.sec7 .cir.cir4 {
    width: 11.97917vw;
    top: 63.02083vw;
    left: 25.88542vw
}

.sec7 .cir.cir5 {
    width: 21.19792vw;
    top: 68.75vw;
    left: 39.375vw
}

.sec7 .cir.cir6 {
    width: 18.38542vw;
    top: 70.3125vw;
    left: 68.54167vw
}

.sec7 .cir.cir7 {
    width: 12.91667vw;
    top: 71.35417vw;
    left: 15.88542vw
}

.sec7 .cir.cir8 {
    width: 15.26042vw;
    top: 79.6875vw;
    left: 32.5vw
}

.sec7 .wrap .common_title {
    margin-bottom: 3.22917vw
}

.sec7 .wrap .recommend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.64583vw
}

.sec7 .wrap .recommend .l {
    width: 32.76042vw
}

.sec7 .wrap .recommend .l .time {
    color: #293A45;
    font-weight: 400;
    line-height: 1.25
}

.sec7 .wrap .recommend .l .l_title {
    color: #293A45;
    font-weight: 600;
    line-height: 1;
    margin: .78125vw 0 1.25vw;
    transition: 0.6s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sec7 .wrap .recommend .l .l_text {
    color: #293A45;
    font-weight: 400;
    line-height: 1.5
}

.sec7 .wrap .recommend .r {
    width: 39.16667vw;
    height: 19.27083vw;
    border-radius: 2.08333vw;
    overflow: hidden
}

.sec7 .wrap .recommend .r img {
    width: 100%;
    height: 100%;
    transition: 1s
}

.sec7 .wrap .recommend:hover .l .l_title {
    color: #00A9B2
}

.sec7 .wrap .recommend:hover .r img {
    transform: scale(1.1)
}

.sec7 .wrap .list {
    display: flex;
    gap: 2.91667vw
}

.sec7 .wrap .list .item {
    width: 24.42708vw
}

.sec7 .wrap .list .item .img {
    width: 100%;
    height: 16.77083vw;
    border-radius: 1.04167vw;
    overflow: hidden
}

.sec7 .wrap .list .item .img img {
    width: 100%;
    height: 100%;
    transition: 1s
}

.sec7 .wrap .list .item .item_text {
    padding: 1.45833vw 1.09375vw 0
}

.sec7 .wrap .list .item .item_text h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #293A45;
    font-weight: 500;
    line-height: 1;
    transition: all 600ms
}

.sec7 .wrap .list .item .item_text .time {
    color: #293A45;
    font-weight: 400;
    line-height: 1;
    margin: .83333vw 0 0
}

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

.sec7 .wrap .list .item:hover .item_text h5 {
    color: #00B2B5
}

.sec7 .wrap .more {
    margin: 2.96875vw auto 0;
    width: fit-content
}

@media screen and (max-width: 768px) {
    .banner .text {
        width: 90%;
        left: 5vw
    }

    .w1520 {
        width: 90%
    }

    .common_title {
        gap: 0 10px
    }

    .common_title span {
        height: 20px
    }

    .common_more {
        padding: 5px 5px 5px 14px;
        gap: 0 20px;
        border-radius: 40px
    }

    .common_more p {
        font-size: 16px
    }

    .common_more .icon {
        width: 30px;
        height: 30px
    }

    .common_more .icon img {
        width: 12px
    }

    .sec1 {
        padding: 60px 0 180px
    }

    .sec1 .cir.cir1 {
        top: 120px
    }

    .sec1 .cir.cir2 {
        top: 200px
    }

    .sec1 .cir.cir3 {
        top: 300px
    }

    .sec1 .cir.cir4 {
        top: 320px
    }

    .sec1 .cir.cir5 {
        top: 330px
    }

    .sec1 .cir.cir6 {
        top: 340px
    }

    .sec1 .cir.cir7 {
        top: 350px
    }

    .sec1 .cir.cir8 {
        top: 370px
    }

    .sec1 .cir.cir9 {
        top: 390px
    }

    .sec1 .wrap .text {
        width: 100%
    }

    .sec2 {
        padding: 30px 0 60px
    }

    .sec2 .common_title {
        margin-bottom: 30px
    }

    .sec2 .position {
        width: 90%;
        height: unset
    }

    .sec2 .position .img {
        width: 100%;
        height: unset;
        position: unset;
        border-radius: unset
    }

    .sec2 .position .img .img_box {
        width: 100%;
        height: unset;
        position: unset
    }

    .sec2 .position .img .img_box img {
        border-radius: 10px
    }

    .sec2 .position .img .img_box .num_box {
        position: unset;
        display: block;
        margin: 20px 0 0
    }

    .sec2 .position .img .img_box .num_box .numList {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px 0
    }

    .sec2 .position .img .img_box .num_box .numList .item {
        width: 48%
    }

    .sec2 .position .img .img_box .num_box .numList .item .num {
        margin-bottom: 10px
    }

    .sec2 .position .img .img_box .num_box .numList .item .num p {
        color: #111111
    }

    .sec2 .position .img .img_box .num_box .numList .item .num span {
        color: #111111
    }

    .sec2 .position .img .img_box .num_box .numList .item h5 {
        color: #666;
        font-size: 14px
    }

    .sec3 {
        padding: 20px 0 60px
    }

    .sec3 .control {
        top: 65px;
        width: 90%;
        left: 5vw;
        display: flex;
        justify-content: space-between
    }

    .sec3 .control .cir {
        width: 20vw;
        transform: unset !important
    }

    .sec3 .wrap .box {
        margin: 70px 0 0
    }

    .sec3 .wrap .box .item .l {
        width: 100%
    }

    .sec3 .wrap .box .item .r {
        width: 100%;
        margin: 20px 0 0
    }

    .sec3 .wrap .box .item .r .label {
        padding: 0 0 0 20px
    }

    .sec3 .wrap .box .item .r .label:after {
        width: 6px;
        height: 6px
    }

    .sec3 .wrap .box .item .r .r_title {
        margin: 15px 0 20px
    }

    .sec3 .wrap .box .item.on {
        display: block
    }

    .sec4 {
        padding: 20px 0 10px
    }

    .sec4 .wrap .swiper {
        width: 90%;
        margin: 0 auto
    }

    .sec4 .wrap .swiper .swiper-slide .item {
        display: block;
        margin: 0 auto 30px
    }

    .sec4 .wrap .swiper .swiper-slide .item .img {
        width: 100%;
        height: 51vw
    }

    .sec4 .wrap .swiper .swiper-slide .item .slide_box {
        width: 100%;
        padding: 30px 20px !important
    }

    .sec4 .wrap .swiper .swiper-slide .item .slide_box .slide_text_box {
        height: 50px
    }

    .sec4 .wrap .swiper .swiper-slide .item .slide_box .slide_text_box .slide_text {
        margin: 15px 0 0
    }

    .sec5 {
        padding: 60px 0
    }

    .sec5 .cir img {
        transform: translateY(70px)
    }

    .sec5 .wrap .list {
        display: block
    }

    .sec5 .wrap .list .item {
        width: 100% !important;
        height: unset;
        margin: 0 0 30px !important
    }

    .sec5 .wrap .list .item:after {
        opacity: 1
    }

    .sec5 .wrap .list .item .img {
        width: 100%;
        height: 300px;
    }

    .sec5 .wrap .list .item .item_title {
        display: none
    }

    .sec5 .wrap .list .item .item_content {
        opacity: 1 !important;
        width: 100%;
        padding: 0 20px;
        transform: unset !important;
        top: 50px
    }

    .sec5 .wrap .list .item .item_content .item_text {
        margin: 10px 0 15px;
        font-size: 12px;
    }

    .sec6 {
        padding: 60px 0 0 0
    }

    .sec6 .img {
        margin: 40px 0 0;
        width: 100%;
        height: unset
    }

    .sec6 .img .img_box {
        position: unset;
        width: 100%;
        height: unset;
        border-radius: unset
    }

    .sec6 .img .img_box img {
        position: unset;
        width: 100%
    }

    .sec7 {
        padding: 20px 0 100px
    }

    .sec7 .cir img {
        transform: translateY(80px)
    }

    .sec7 .cir.cir3 img,
    .sec7 .cir.cir4 img,
    .sec7 .cir.cir5 img,
    .sec7 .cir.cir6 img,
    .sec7 .cir.cir7 img,
    .sec7 .cir.cir8 img {
        transform: translateY(1580px)
    }

    .sec7 .wrap .recommend {
        margin: 40px 0 20px;
        flex-direction: column-reverse
    }

    .sec7 .wrap .recommend .r {
        width: 100%;
        height: 44vw;
        border-radius: 10px;
        margin-bottom: 20px
    }

    .sec7 .wrap .recommend .l {
        width: 100%
    }

    .sec7 .wrap .recommend .l .l_title {
        margin: 20px 0 15px
    }

    .sec7 .wrap .list {
        display: block
    }

    .sec7 .wrap .list .item {
        width: 100%;
        margin-bottom: 30px
    }

    .sec7 .wrap .list .item .img {
        width: 100%;
        height: 60vw;
        border-radius: 20px
    }

    .sec7 .wrap .list .item .item_text {
        padding: 20px
    }

    .sec7 .wrap .list .item .item_text .time {
        margin: 15px 0 0
    }
}