@keyframes example3 {
    0% {
        transform: translate(0, 100px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes example_left {
    0% {
        transform: translate(-100%);
        opacity: 0;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}
@keyframes example_right {
    0% {
        transform: translate(100%);
        opacity: 0;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}
@media screen and (max-width: 1199px) {
    .index_pc_wrap {
        display: none;
    }

    .index_view_wrap {
        display: block;
    }
    .about_wrap{
        position: relative;
        padding-top: 1rem;
    }
    .about_bg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about_txt{
        position: absolute;
        left: 0;
        right: 0;
        top:1.82rem;
        font-size: 0.22rem;
        line-height: 0.34rem;
        font-family: TsangerYunHei-W04;
        color: #343D3E;
        text-align: center;
    }
    .about_txt p:nth-child(1) img{
        height: 0.34rem;
    }
    .about_txt p:nth-child(1){
        margin-bottom: 0.44rem;
    }
    .about_txt p:nth-child(2){
        margin-bottom: 0.3rem;
    }
    .about_txt p:nth-child(3){
        margin-bottom: 0.3rem;
    }
    .about_txt p:nth-child(4){
        margin-bottom: 0.27rem;
    }
    .about_txt p:last-child{
        margin-top: 0.37rem;
        font-size: 0.22rem;
        color:#005741;
        line-height: 0.4rem;
        font-family: TsangerYunHei-W05;
    }
    .about_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .view_page1,.view_page2,.view_page3,.view_page4,.view_page5,.view_page6,.view_page7{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .view_page1{
        height: 100vh;
    }
    .view_page1 video{
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
    .page_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page1_bg{
        width: 1.16rem;
        height: 1.16rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .view_page2{
        height: 9.34rem;
    }


    .page2_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;;
    }

    .page2_txt {
        position: absolute;
        left: 1.3rem;
        bottom: 1.2rem;

    }

    .page2_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .page2_txt p:nth-child(1) {
        color: #ffffff;
        font-size: 0.52rem;
        line-height: 0.73rem;
        margin-bottom: 0.15rem;
        font-family: TsangerYunHei-W06;
    }

    .page2_txt p:nth-child(2) {
        width: 1.5rem;
        font-size: 0.24rem;
        color: var(--theme-color);
        line-height:0.5rem;
        text-align: center;
        position: relative;
        font-family: TsangerYunHei-W05;
        cursor: pointer;

    }

    .page2_txt p:nth-child(2) img {
        width: 1.5rem;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page3_txt{
        position: absolute;
        top: 1.05rem;
        left: 0;
        right: 0;
        font-size: 0.17rem;
        color: #FFFFFF;
        line-height: 0.31rem;
        font-family: TsangerYunHei-W05;
        text-align: center;
    }

    .page3_txt p:nth-child(1){
        font-size: 0.32rem;
        line-height: 0.43rem;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom:0.43rem;
    }
    .page3_txt p:nth-child(2){
        margin-bottom: 0.36rem;
    }

    .page3_txt p:nth-child(3){
        margin-bottom: 0.33rem;
    }
    .page3_txt p:nth-child(4){
        color: var(--theme-color);
    }
    .page3_txt p{
        display: none;
    }
    .page3_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .page4_txt{
        position: absolute;
        top: 11.19rem;
        left: 0;
        right: 0;
        font-size: 0.17rem;
        color: #FFFFFF;
        line-height: 0.31rem;
        font-family: TsangerYunHei-W05;
        text-align: center;
    }

    .page4_txt p:nth-child(1){
        margin-bottom: 0.45rem;
    }


    .page4_txt p:nth-child(3){
        margin-top: 0.95rem;
        color: var(--theme-color);
    }
    .page4_txt p{
        display: none;
    }
    .page4_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .page5_txt{
        position: absolute;
        top: 1.54rem;
        left: 0;
        right: 0;
        font-size: 0.18rem;
        color: #FFFFFF;
        line-height: 0.30rem;
        font-family: TsangerYunHei-W04;
        text-align: center;
        padding: 0 0.4rem;
    }

    .page5_txt p:nth-child(1){
        font-size: 0.4rem;
        line-height: 0.55rem;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom: 0.37rem;
    }
    .page5_txt p{
        display: none;
    }
    .page5_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .page6_txt{
        position: absolute;
        top: 1.54rem;
        left: 0;
        right: 0;
        text-align: center;
    }

    .page6_txt p:nth-child(1){
        font-size: 0.4rem;
        line-height: 0.6rem;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
    }
    .page6_txt p{
        display: none;
    }
    .page6_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .page7_txt{
        position: absolute;
        top: 1.54rem;
        left: 0;
        right: 0;
        font-size: 0.18rem;
        color: #FFFFFF;
        line-height: 0.30rem;
        font-family: TsangerYunHei-W04;
        text-align: center;
        padding: 0 0.3rem;
    }

    .page7_txt p:nth-child(1){
        font-size: 0.4rem;
        line-height: 0.6rem;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom: 0.27rem;
    }
    .page7_txt p:nth-child(3){
        font-size: 0.4rem;
        line-height: 0.6rem;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom: 0.27rem;
        margin-top: 0.6rem;
    }
    .page7_txt p{
        display: none;
    }
    .page7_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

}

@media all and (max-width: 1560px)and (min-width: 1200px){
    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }
    .about_wrap{
        position: relative;
    }
    .about_bg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about_txt{
        position: absolute;
        left: 0;
        right: 0;
        top:194px;
        font-size: 16px;
        line-height: 24px;
        font-family: TsangerYunHei-W04;
        color: #343D3E;
        text-align: center;
    }
    .about_txt p:nth-child(1) img{
        height: 28px;
    }
    .about_txt p:nth-child(1){
        margin-bottom: 50px;
    }
    .about_txt p:nth-child(2){
        margin-bottom: 32px;
    }
    .about_txt p:nth-child(3){
        margin-bottom: 35px;
    }
    .about_txt p:nth-child(4){
        margin-bottom: 26px;
    }
    .about_txt p:last-child{
        margin-top: 43px;
        font-size: 20px;
        color:#005741;
        line-height: 30px;
        font-family: TsangerYunHei-W05;
    }
    .about_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .page1, .page2, .page3, .page4, .page5 {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .page1_img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .page1_bg{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .page2_img, .page3_img,.page4_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page2_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;;
    }

    .page2_txt {
        position: absolute;
        left: 70px;
        bottom: 100px;

    }

    .page2_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .page2_txt p:nth-child(1) {
        color: #ffffff;
        font-size: 60px;
        line-height: 84px;
        margin-bottom: 22px;
        font-family: TsangerYunHei-W06;
    }

    .page2_txt p:nth-child(2) {
        width: 126px;
        font-size: 20px;
        color: var(--theme-color);
        line-height: 40px;
        text-align: center;
        position: relative;
        font-family: TsangerYunHei-W05;
        cursor: pointer;

    }

    .page2_txt p:nth-child(2) img {
        width: 126px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page3_txt{
        position: absolute;
        top: 91px;
        left: 21.4%;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 24px;
        font-family: TsangerYunHei-W04;
    }

    .page3_txt p:nth-child(1){
        font-size: 50px;
        line-height: 70px;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom: 42px;
    }
    .page3_txt p:nth-child(2){
        margin-left: 229px;
        margin-bottom: 49px;
    }

    .page3_txt p:nth-child(3){
        margin-left: 229px;
        margin-bottom: 49px;
    }
    .page3_txt p:nth-child(4){
        margin-left: 229px;
        color: var(--theme-color);
    }
    .page3_txt p:nth-child(1).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(4).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(2).example_right {
        animation: example_right 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(3).example_right {
        animation: example_right 1s ease-out 0s backwards;
    }


    .page4_txt{
        position: absolute;
        top: 97px;
        left: 21.67%;
        font-size: 14px;
        color: #FFFFFF;
        line-height:24px;
        font-family: TsangerYunHei-W04;
    }

    .page4_txt p:nth-child(1){
        margin-bottom: 49px;
    }


    .page4_txt p:nth-child(3){
        margin-top: 48px;
        font-size: 20px;
        line-height: 28px;
        color: var(--theme-color);
    }
    .page4_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .mySwiper {
        width: 100%;
        height: 100vh;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .swiper-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .banner_txt {
        position: absolute;
        top: 89px;
        left: 60px;
        font-size: 14px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W04;
        line-height: 22px;
    }


    .banner_txt p:nth-child(1) {
        font-size: 38px;
        line-height: 48px;
        margin-bottom: 20px;
        color: var(--theme-color);

    }
    .banner_txt p:nth-child(3) {
        font-size: 38px;
        line-height: 48px;
        margin-bottom: 20px;
        color: var(--theme-color);
        margin-top: 30px;

    }
    .banner_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .swiper_pagination1 .swiper-pagination {
        left: 0;
        right: 0;
        margin: auto;
        bottom: 58px;
    }


    .swiper_pagination1 .swiper-pagination-bullet {
        width: 140px;
        height: 2px;
        background: #FFFFFF;
        border-radius: 0;
        margin: 0 15px;
        opacity: 1;

    }

    .swiper_pagination1 .swiper-pagination-bullet-active::before {
        content: ''; /* 伪元素需要 content 属性，即使为空 */
        animation: jindu 5s linear; /* 应用动画 */
        height: 2px;
        background: #BFE700;
        display: block;
    }


    @keyframes jindu {
        0% {
            width: 0;
        }
        100% {
            width: 140px;
        }
    }
    .swiper_pagination1 .swiper-pagination-bullet span{
        display: block;
        font-size: 12px;
        line-height: 17px;
        color: #FFFFFF;
        padding-top: 12px;
    }
    .swiper_pagination1 .swiper-pagination-bullet-active span{
        color: var(--theme-color);
        padding-top: 11px;
    }

}

@media screen and (min-width: 1561px) {
    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }
    .about_wrap{
        position: relative;
    }
    .about_bg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about_txt{
        position: absolute;
        left: 0;
        right: 0;
        top:311px;
        font-size: 26px;
        line-height: 38px;
        font-family: TsangerYunHei-W04;
        color: #343D3E;
        text-align: center;
    }
    .about_txt p:nth-child(1) img{
        height: 44px;
    }
    .about_txt p:nth-child(1){
        margin-bottom: 79px;
    }
    .about_txt p:nth-child(2){
        margin-bottom: 49px;
    }
    .about_txt p:nth-child(3){
        margin-bottom: 53px;
    }
    .about_txt p:nth-child(4){
        margin-bottom: 39px;
    }
    .about_txt p:last-child{
        margin-top: 67px;
        font-size: 32px;
        color:#005741;
        line-height: 48px;
        font-family: TsangerYunHei-W05;
    }
    .about_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .page1, .page2, .page3, .page4, .page5 {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .page1_img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .page1_bg{
        width: 128px;
        height: 128px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .page2_img, .page3_img,.page4_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page2_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;;
    }

    .page2_txt {
        position: absolute;
        left: 106px;
        bottom: 160px;

    }

    .page2_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }

    .page2_txt p:nth-child(1) {
        color: #ffffff;
        font-size: 96px;
        line-height: 120px;
        margin-bottom: 40px;
        font-family: TsangerYunHei-W06;
    }

    .page2_txt p:nth-child(2) {
        width: 204px;
        font-size: 32px;
        color: var(--theme-color);
        line-height: 67px;
        text-align: center;
        position: relative;
        font-family: TsangerYunHei-W05;
        cursor: pointer;

    }

    .page2_txt p:nth-child(2) img {
        width: 204px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page3_txt{
        position: absolute;
        top: 195px;
        left: 106px;
        font-size: 22px;
        color: #FFFFFF;
        line-height: 38px;
        font-family: TsangerYunHei-W04;
    }

    .page3_txt p:nth-child(1){
        font-size: 80px;
        line-height: 106px;
        font-family: TsangerYunHei-W06;
        color: var(--theme-color);
        margin-bottom: 72px;
    }
    .page3_txt p:nth-child(2){
        margin-bottom: 70px;
    }

    .page3_txt p:nth-child(3){
        margin-bottom: 70px;
    }
    .page3_txt p:nth-child(4){
        color: var(--theme-color);
        font-size: 32px;
    }
    .page3_txt p:nth-child(1).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(4).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(2).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page3_txt p:nth-child(3).example_left {
        animation: example_left 1s ease-out 0s backwards;
    }
    .page4_txt{
        position: absolute;
        top: 277px;
        right: 213px    ;
        font-size: 22px;
        color: #FFFFFF;
        line-height: 38px;
        font-family: TsangerYunHei-W04;
    }

    .page4_txt p:nth-child(1){
        margin-bottom: 70px;
    }


    .page4_txt p:nth-child(3){
       margin-top: 67px;
        font-size: 32px;
        color: var(--theme-color);
    }
    .page4_txt p.example_right {
        animation: example_right 1s ease-out 0s backwards;
    }
    .mySwiper {
        width: 100%;
        height: 100vh;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .swiper-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .banner_txt {
        position: absolute;
        top: 140px;
        left: 109px;
        font-size: 22px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W04;
        line-height: 35px;
    }


    .banner_txt p:nth-child(1) {
        font-size: 48px;
        line-height: 69px;
        margin-bottom: 40px;
        color: var(--theme-color);

    }

    .banner_txt p:nth-child(3) {
        margin-top: 60px;
        font-size: 48px;
        line-height: 69px;
        margin-bottom: 40px;
        color: var(--theme-color);
    }
    .banner_txt p.example3 {
        animation: example3 1s ease-out 0s backwards;
    }
    .swiper_pagination1 .swiper-pagination {
        left: 0;
        right: 0;
        margin: auto;
        bottom: 74px;
    }


    .swiper_pagination1 .swiper-pagination-bullet {
        width: 224px;
        height: 2px;
        background: #FFFFFF;
        border-radius: 0;
        margin: 0 15px;
        opacity: 1;

    }

    .swiper_pagination1 .swiper-pagination-bullet-active::before {
        content: ''; /* 伪元素需要 content 属性，即使为空 */
        animation: jindu 5s linear; /* 应用动画 */
        height: 2px;
        background: #BFE700;
        display: block;
    }


    @keyframes jindu {
        0% {
            width: 0;
        }
        100% {
            width: 224px;
        }
    }
    .swiper_pagination1 .swiper-pagination-bullet span{
        display: block;
        font-size: 18px;
        line-height: 25px;
        color: #FFFFFF;
        padding-top: 20px;
    }
    .swiper_pagination1 .swiper-pagination-bullet-active span{
        color: var(--theme-color);
        padding-top: 19px;
    }


}