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

.banner .swiper {
    width: 100%;
    position: relative
}

.banner .swiper .swiper-slide {
    position: relative
}

.banner .swiper .swiper-slide .bg {
    overflow: hidden
}

.banner .swiper .swiper-slide .bg img {
    width: 100%;
    height: 32.29167vw;
    display: block;
    object-fit: cover
}

.banner .swiper .swiper-slide .text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 0 6.25vw
}

.banner .swiper .swiper-slide .text .t {
    color: #fff;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(1.04167vw)
}

.banner .swiper .swiper-slide.swiper-slide-active .text .t {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s
}

.banner .swiper .swiper-slide.swiper-slide-active .text a {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s;
    transition-delay: 0.2s
}

.banner .swiper .swiper-pagination {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5625vw;
    left: 0;
    padding: 0 6.25vw;
    bottom: 3.02083vw;
    z-index: 3
}

.banner .swiper .swiper-pagination .swiper-pagination-bullet {
    display: block;
    width: 100%;
    height: 2px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.49);
    position: relative;
    transition: 0.6s;
    border-radius: 0
}

.banner .swiper .swiper-pagination .swiper-pagination-bullet::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: all 600ms
}

.banner .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    animation: long 3s forwards linear
}

@keyframes long {
    to {
        width: 100%
    }
}

.container .sec1 {
    background: url(../images/a2.png) no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;
    padding: 6.25vw 6.25vw 5.57292vw 6.25vw;
    display: flex;
    justify-content: space-between
}

.container .sec1 .lbox img {
    width: 42.5vw;
    height: 30.36458vw;
    display: block;
    object-fit: cover
}

.container .sec1 .rbox {
    width: 42.5vw
}

.container .sec1 .rbox .p1 {
    color: #333;
    font-weight: 700;
    margin: 4.58333vw 0 3.33333vw 0
}

.container .sec1 .rbox .des {
    color: #666;
    font-weight: 500
}

.container .sec2 {
    position: relative
}

.container .sec2 img {
    width: 100%;
    display: block
}

.container .sec2 .list {
    position: absolute;
    left: 0;
    top: 5.20833vw;
    width: 100%;
    padding: 0 6.25vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25vw
}

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

.container .sec2 .list .item .p1 {
    color: #124098;
    font-weight: 500
}

.container .sec2 .list .item .p1 span {
    color: #5475B3;
    font-weight: 700
}

.container .sec2 .list .item .des {
    margin-top: .83333vw;
    color: #333
}

.container .sec3 {
    padding: 7.8125vw 6.25vw;
    background: linear-gradient(180deg, #fff 0%, #F0F1F6 100%)
}

.container .sec3 .t {
    color: #333;
    font-weight: 500;
    text-align: center
}

.container .sec3 .list {
    margin: 5.625vw 0 5.41667vw 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0
}

.container .sec3 .list .item {
    width: 100%;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #FFF
}

.container .sec3 .list .item .pic img {
    width: 10.41667vw;
    height: 10.41667vw;
    object-fit: cover;
    border-radius: 50%;
    transition: all 600ms
}

.container .sec3 .list .item .name {
    color: #333;
    font-weight: 500;
    margin: .83333vw 0
}

.container .sec3 .list .item .job {
    color: #333;
    font-weight: 500
}

.container .sec3 .list .item .des {
    color: #666;
    margin-top: .83333vw;
    padding: 0 1.25vw
}

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

.container .sec3 .list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5vw
}

.container .sec3 .list2 .item {
    width: 100%;
    border-radius: 4px;
    background: #FFF;
    padding: 2.08333vw 1.25vw;
    display: flex;
    gap: 1.66667vw
}

.container .sec3 .list2 .item .icon img {
    width: 6.25vw
}

.container .sec3 .list2 .item .text {
    flex: 1
}

.container .sec3 .list2 .item .text .p1 {
    color: #333;
    font-weight: 700
}

.container .sec3 .list2 .item .text .p2 {
    color: #666;
    margin-top: .41667vw
}

.container .sec4 {
    position: relative;
    background: url(../images/a4bg.png) no-repeat;
    background-size: cover;
    padding: 13.02083vw 0 13.85417vw 6.25vw;
    min-height: 50.52083vw
}

.container .sec4 .tabs {
    display: flex;
    gap: 3.64583vw;
    font-weight: 500;
    margin-left: 2.5vw
}

.container .sec4 .tabs .s1 {
    cursor: pointer;
    color: #666;
    transition: all 600ms
}

.container .sec4 .tabs .s1 span {
    transition: all 600ms;
    display: block
}

.container .sec4 .tabs .s1.on {
    color: #144199
}

.container .sec4 .tabs .s1.on span {
    transform: scale(1.2) translateX(.52083vw)
}

.container .sec4 .boxs {
    margin-top: 3.75vw;
    position: relative;
    z-index: 5
}

.container .sec4 .boxs .box {
    display: none
}

.container .sec4 .boxs .box.on {
    display: block
}

.container .sec4 .boxs .box .list {
    display: inline-flex
}

.container .sec4 .boxs .box .list .item {
    min-width: 10.41667vw;
    padding: 0 2.5vw;
    border-radius: 4px;
    border-right: 1px solid #C6E5FF
}

.container .sec4 .boxs .box .list .item:last-child {
    border-right: none
}

.container .sec4 .boxs .box .list .item .p1 {
    color: #333;
    font-weight: 500;
    margin-bottom: 1.66667vw
}

.container .sec4 .boxs .box .list .item .sub p {
    color: #666
}

.container .sec4 .boxs .box .list .item .sub p:not(:last-child) {
    margin-bottom: .83333vw
}

.container .sec4 .map_box {
    position: absolute;
    right: 3.125vw;
    top: 8.33333vw
}

.container .sec4 .map_box .map img {
    width: 50.46875vw
}

.container .sec4 .map_box p {
    text-align: right;
    margin-top: .9375vw;
    color: #666;
    display: none
}

.container .sec4 .map_box .points_box .p_box {
    display: none
}

.container .sec4 .map_box .points_box .p_box.on {
    display: block
}

.container .sec4 .map_box .points_box .p_box .point {
    width: .83333vw;
    height: .83333vw;
    background: #379AD6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute
}

.container .sec4 .map_box .points_box .p_box .point:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    animation: 2s scaleA linear infinite;
    background: rgba(55, 154, 214, 0.3);
    border-radius: 50%;
    z-index: -1
}

.container .sec4 .map_box .points_box .p_box .point:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    animation: 2s scaleA linear infinite;
    background: rgba(55, 154, 214, 0.2);
    border-radius: 50%;
    z-index: -1;
    animation-delay: 1s
}

@keyframes scaleA {
    0% {
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        transform: translate(-50%, -50%) scale(6)
    }
}



.container .sec5 {
    padding: 4.16667vw 6.25vw 4.58333vw 6.25vw;
    background: url(../images/historybg.png) no-repeat;
    background-size: cover;
    overflow: hidden
}

.container .sec5 .t {
    color: #333;
    font-weight: 500;
    text-align: center
}

.container .sec5 .content {
    margin: 13.22917vw 0 9.11458vw 0;
    position: relative
}

.container .sec5 .content::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: .52083vw;
    background: #379AD6;
    width: 100%;
    z-index: 1;
    border-radius: 10px
}

.container .sec5 .content .swiper .swiper-slide .text {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 12.08333vw;
    position: relative
}

.container .sec5 .content .swiper .swiper-slide .text .allText {
    position: absolute;
    left: 14.58333vw;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    width: 18.75vw;
    max-height: 15.625vw;
    overflow-y: auto;
    z-index: 10;
    padding: .83333vw;
    text-align: left;
    opacity: 0;
    transition: all 600ms;
    pointer-events: none;
    display: none
}

.container .sec5 .content .swiper .swiper-slide .text .allText.p_left {
    left: auto;
    right: 80%
}

.container .sec5 .content .swiper .swiper-slide .text .allText .des2 {
    margin-top: .83333vw;
    color: #666
}

.container .sec5 .content .swiper .swiper-slide .text .allText.show {
    opacity: 1;
    pointer-events: inherit
}

.container .sec5 .content .swiper .swiper-slide .text .circle {
    width: 1.875vw;
    height: 1.875vw;
    background: #FFF;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(51, 51, 51, 0.2));
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%)
}

.container .sec5 .content .swiper .swiper-slide .text .time {
    color: #333;
    font-weight: 500
}

.container .sec5 .content .swiper .swiper-slide .text .des {
    color: #797979;
    margin-top: .52083vw;
    height: 2.8125vw;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden
}

.container .sec5 .content .swiper .swiper-slide:nth-child(2n) .text {
    flex-direction: column-reverse;
    padding-top: 0;
    padding-bottom: 12.08333vw
}

.container .sec5 .content .swiper .swiper-slide:nth-child(2n) .text .allText {
    bottom: 12.08333vw
}

.container .sec5 .btns {
    display: flex;
    gap: 2.08333vw;
    justify-content: center
}

.container .sec5 .btns .prev,
.container .sec5 .btns .next {
    cursor: pointer
}

.container .sec5 .btns .prev img,
.container .sec5 .btns .next img {
    width: 2.5vw;
    opacity: .2;
    filter: grayscale(100%);
    transition: all 600ms
}

.container .sec5 .btns .prev:hover img,
.container .sec5 .btns .next:hover img {
    opacity: 1;
    filter: grayscale(0)
}

.container .sec6 {
    background: #F7F8F9;
    padding: 9.01042vw 6.25vw
}

.container .sec6 .t {
    color: #333;
    font-weight: 500;
    text-align: center
}

.container .sec6 .content {
    margin-top: 6.25vw;
    overflow: hidden
}

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

.container .sec6 .content .swiper .swiper-slide .pic {
    width: 100%;
    height: 15.88542vw;
    background: #E2EAF6;
    padding: .83333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.container .sec6 .content .swiper .swiper-slide .pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 600ms
}

.container .sec6 .content .swiper .swiper-slide p {
    margin-top: 1.25vw;
    color: #333;
    text-align: center
}

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

.common_sec {
    padding: 4.47917vw 0 4.89583vw 0
}

.common_sec .p1 {
    margin-bottom: 0
}

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

    .banner .swiper .swiper-slide .bg img {
        height: 200px
    }

    .banner .swiper .swiper-slide .text {
        padding: 0 5%
    }

    .banner .swiper .swiper-slide .text .t {
        font-size: 24px;
        line-height: 1.5
    }

    .banner .swiper .swiper-pagination {
        bottom: 20px;
        gap: 15px;
        padding: 0 5%
    }

    .container .sec1 {
        padding: 40px 5% 0 5%;
        flex-direction: column-reverse;
        background-size: contain;
        background-position: bottom center
    }

    .container .sec1 .lbox {
        margin-bottom: 30px
    }

    .container .sec1 .lbox img {
        width: 100%;
        height: auto
    }

    .container .sec1 .rbox {
        width: 100%
    }

    .container .sec1 .rbox .p1 {
        margin-top: 0;
        font-size: 20px
    }

    .container .sec1 .rbox .des {
        font-size: 16px
    }

    .container .sec2 {
        display: flex;
        flex-direction: column-reverse
    }

    .container .sec2 .list {
        position: static;
        padding: 20px 5%;
        grid-template-columns: 1fr;
        gap: 30px
    }

    .container .sec2 .list .item .p1 {
        font-size: 18px
    }

    .container .sec2 .list .item .des {
        margin-top: 10px;
        font-size: 16px
    }

    .container .sec3 {
        padding: 60px 5%
    }

    .container .sec3 .t {
        font-size: 20px;
        text-align: center
    }

    .container .sec3 .list {
        margin: 40px 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px 2%
    }

    .container .sec3 .list .item {
        width: 48%;
        border-color: transparent
    }

    .container .sec3 .list .item:first-child {
        width: 100%
    }

    .container .sec3 .list .item:first-child .des {
        width: 70%;
        margin: 0 auto
    }

    .container .sec3 .list .item .pic img {
        width: 80px;
        height: 80px
    }

    .container .sec3 .list .item .name,
    .container .sec3 .list .item .job {
        font-size: 16px;
        margin: 10px 0
    }

    .container .sec3 .list .item .des {
        padding: 0 10px;
        font-size: 14px
    }

    .container .sec3 .list2 {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .container .sec3 .list2 .item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 10px
    }

    .container .sec3 .list2 .item .icon img {
        width: 80px
    }

    .container .sec3 .list2 .item .text .p1 {
        font-size: 32px
    }

    .container .sec3 .list2 .item .text .p2 {
        font-size: 16px
    }

    .container .sec4 {
        padding: 30px 5% 60px 5%;
        background-size: cover;
        display: flex;
        flex-direction: column;
        min-height: auto
    }

    .container .sec4 .tabs {
        flex-wrap: wrap;
        gap: 40px;
        margin: 20px 0 20px 10px;
        order: 2
    }

    .container .sec4 .tabs .s1 {
        font-size: 18px
    }

    .container .sec4 .tabs .s1.on span {
        transform: scale(1.2) translateX(5px)
    }

    .container .sec4 .boxs {
        margin-top: 0;
        order: 3
    }

    .container .sec4 .boxs .box .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .container .sec4 .boxs .box .list .item {
        min-width: 100%;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid #C6E5FF;
        padding-top: 0
    }

    .container .sec4 .boxs .box .list .item:last-child {
        border-bottom: none
    }

    .container .sec4 .boxs .box .list .item .p1 {
        font-size: 16px;
        margin-bottom: 15px
    }

    .container .sec4 .boxs .box .list .item .sub p {
        font-size: 14px
    }

    .container .sec4 .boxs .box .list .item .sub p:not(:last-child) {
        margin-bottom: 10px
    }

    .container .sec4 .map_box {
        position: relative;
        margin: 0;
        right: 0;
        top: 0;
        order: 1
    }

    .container .sec4 .map_box .map img {
        width: 100%
    }

    .container .sec4 .map_box p {
        margin-top: 15px;
        font-size: 12px
    }

    .container .sec4 .map_box .points_box .p_box .point {
        width: 8px;
        height: 8px
    }
                .container .sec4 .map_box .points_box .p_box:nth-child(1) .point:nth-child(1) {
                    right: 36% !important;
                    top: 35% !important;
                }
    
        .container .sec4 .map_box .points_box .p_box:nth-child(1) .point:nth-child(2) {
            right: 28% !important;
            top: 60% !important;
        }
    
        .container .sec4 .map_box .points_box .p_box:nth-child(1) .point:nth-child(3) {
            right: 39% !important;
            top: auto !important;
            bottom: 12% !important;
        }

                        .container .sec4 .map_box .points_box .p_box:nth-child(2) .point:nth-child(1) {
                           right: 32% !important;
        top: 57% !important;
                }
    
        .container .sec4 .map_box .points_box .p_box:nth-child(2) .point:nth-child(2) {
            right: 28% !important;
            top: 60% !important;
        }
    
        .container .sec4 .map_box .points_box .p_box:nth-child(2) .point:nth-child(3) {
          right: 30% !important;
        top: auto !important;
        bottom: 32% !important;
        }

    .container .sec4 .map_box .points_box .p_box .point.point1 {
        right: 30%;
        top: 30%
    }

    .container .sec4 .map_box .points_box .p_box .point.point2 {
        right: 35%;
        top: 28%
    }

    .container .sec4 .map_box .points_box .p_box .point.point3 {
        right: 32%;
        top: 35%
    }

    .container .sec4 .map_box .points_box .p_box .point.point4 {
        right: 34%;
        top: 22%
    }

    .container .sec4 .map_box .points_box .p_box .point.point5 {
        right: 35%;
        top: 40%
    }

    .container .sec4 .map_box .points_box .p_box .point.point6 {
        right: 40%;
        top: 60%
    }

    .container .sec4 .map_box .points_box .p_box .point.point7 {
        right: 48%;
        top: 52%
    }

    .container .sec4 .map_box .points_box .p_box .point.point8 {
        right: 55%;
        top: 45%
    }

    .container .sec5 {
        padding: 30px 5%;
        background-size: cover
    }

    .container .sec5 .t {
        font-size: 18px
    }

    .container .sec5 .content {
        margin: 40px 0
    }

    .container .sec5 .content::before {
        height: 4px
    }

    .container .sec5 .content .swiper .swiper-slide .text {
        padding-top: 0
    }

    .container .sec5 .content .swiper .swiper-slide .text .allText {
        position: relative;
        left: 0;
        width: 100%;
        max-height: none;
        padding: 15px;
        margin-bottom: 15px;
        display: none
    }

    .container .sec5 .content .swiper .swiper-slide .text .allText .p_left {
        left: 0;
        right: 0
    }

    .container .sec5 .content .swiper .swiper-slide .text .circle {
        width: 20px;
        height: 20px
    }

    .container .sec5 .content .swiper .swiper-slide .text .time {
        font-size: 18px
    }

    .container .sec5 .content .swiper .swiper-slide .text .des {
        height: 40px;
        -webkit-line-clamp: unset;
        font-size: 14px;
        margin-top: 30px;
        position: relative;
        z-index: 5
    }

    .container .sec5 .content .swiper .swiper-slide:nth-child(2n) .text {
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0
    }

    .container .sec5 .content .swiper .swiper-slide:nth-child(2n) .text .allText {
        bottom: auto;
        margin-bottom: 15px
    }

    .container .sec5 .btns {
        gap: 20px
    }

    .container .sec5 .btns .prev img,
    .container .sec5 .btns .next img {
        width: 30px
    }

    .container .sec6 {
        padding: 40px 5%
    }

    .container .sec6 .t {
        font-size: 16px
    }

    .container .sec6 .content {
        margin-top: 40px
    }

    .container .sec6 .content .swiper .swiper-slide .pic {
        height: 150px;
        padding: 10px
    }

    .container .sec6 .content .swiper .swiper-slide p {
        margin-top: 15px;
        font-size: 12px
    }

    .common_sec {
        padding: 40px 5%
    }
}