@keyframes example3 {
    0% {
        transform: translate(0, 100px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.swiper_slide1{
    cursor: pointer;
}
@media screen and (max-width: 1199px) {

    .index_pc_wrap {
        display: none;
    }

    .index_view_wrap {
        display: block;
    }

    .view_page1 {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .mySwiper {
        width: 100%;
        height: 100vh;
    }
    .mySwiper_750_3{
        height: 3.94rem;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .mySwiper_750_3 .swiper-slide  {
        width: 5rem;
        height: 100%;
        position: relative;
    }
    .swiper-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

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


    .banner_txt {
        position: absolute;
        top: 2.87rem;
        left: 0.78rem;
        font-size: 0.37rem;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        line-height: 0.47rem;
    }


    .banner_txt p:nth-child(1) {
        font-size: 0.75rem;
        line-height: 1.04rem;
        margin-bottom: 0.27rem;
        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: 2.95rem;
    }


    .swiper_pagination1 .swiper-pagination-bullet {
        /*width: 1.77rem;*/
        width: 15%;
        height: 0.04rem;
        background: #FFFFFF;
        border-radius: 0;
        margin: 0 0.15rem;
        opacity: 1;

    }

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


    @keyframes jindu {
        /*0% {*/
        /*    width: 0;*/
        /*}*/
        /*100% {*/
        /*    width: 1.77rem;*/
        /*}*/
    }

    .view_page2, .view_page3 {
        position: relative;
        overflow: hidden;
        height: 9.34rem;
    }


    .page2_img, .page3_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: 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.16rem;
        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;
        left: 1.3rem;
        bottom: 1.2rem;
    }


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

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


    .page3_txt p:nth-child(2), .page3_txt p:nth-child(3) {
        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;
        float: left;

    }

    .page3_txt p:nth-child(3) {
        margin-left: 0.2rem;
    }

    .page3_txt p:nth-child(2) img, .page3_txt p:nth-child(3) img {
        width: 1.5rem;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .page3_icon1 {
        position: absolute;
        right: -1px;
        bottom: 2.68rem;
    }

    .page3_icon2 {
        position: absolute;
        right: -1px;
        bottom: 2.04rem;
    }

    .page3_icon3 {
        position: absolute;
        right: -1px;
        bottom: 1.4rem;
    }


    .page3_icon {
        height: 0.64rem;
        background: rgba(54, 61, 62, 1);
        padding-left: 0.16rem;
        display: flex;
        opacity: 0.95;
    }

    .page3_icon span {
        width: 0;
        height: 0.64rem;
        font-size: 0.24rem;
        color: #ffffff;
        text-align: center;
        line-height: 0.64rem;
       cursor: pointer;
        font-family: TsangerYunHei-W03;
        box-sizing: border-box;
    }

    .page3_icon img {
        width: 0.32rem;
        height: 0.32rem;
        cursor: pointer;
        margin-top: 0.16rem;
        margin-right: 0.16rem;

    }
    .view_page4{
        width: 100%;
    }
    .view_page4 li{
        position: relative;
        width: 100%;
        height: 7rem;
        overflow: hidden;
    }
    .view_page4 li>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page4_txt {
        position: absolute;
        left: 1.3rem;
        bottom: 1.2rem;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
    }


    .page4_txt p {
        /*display: none;*/
    }

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


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


    .page4_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;

    }

    .page4_txt p:nth-child(2) img {
        width: 1.5rem;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .view_page5{
        width: 100%;
        height: 5.7rem;
        background: #1C2122;
        padding: 0.92rem 0.5rem;
        overflow: hidden;
    }


    .page5_txt {
        position: absolute;
        bottom: 0.2rem;
        left:0.34rem;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .page5_txt_p1 {
        font-size: 0.34rem;
        line-height: 0.48rem;
    }

    .page5_txt img {
        width: 0.22rem;
        height: 0.22rem;
        margin-left:0.07rem;
    }


}

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

    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }

    .page1, .page4, .page5 {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }


    .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;
    }

    .banner_txt {
        position: absolute;
        top: 157px;
        left: 66px;
        font-size: 30px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        line-height: 38px;
    }


    .banner_txt p:nth-child(1) {
        font-size: 60px;
        line-height: 84px;
        margin-bottom: 22px;
        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: 52px;
    }


    .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;
        }
    }
    .page2, .page3 {
        position: relative;
        overflow: hidden;
    }

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

    .page2_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;;
    }
    .bofang{
        position: absolute;
        width: 80px;
        height: 80px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
    }

    .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;
        left: 70px;
        bottom: 100px;
    }


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

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


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

    }

    .page3_txt p:nth-child(3) {
        margin-left: 31px;
    }

    .page3_txt p:nth-child(2) img, .page3_txt p:nth-child(3) img {
        width: 126px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .page3_icon1, .page3_icon2, .page3_icon3 {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }

    .page3_icon2 {
        top: 80px;
    }

    .page3_icon3 {
        top: 160px;
    }

    .page3_icon {
        height: 40px;
        background: rgba(54, 61, 62, 1);
        padding-left: 10px;
        display: flex;
        opacity: 0.95;
    }

    .page3_icon span {
        width: 0;
        height: 40px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
       cursor: pointer;
        font-family: TsangerYunHei-W03;
    }

    .page3_icon img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-top: 10px;
        margin-right: 10px;

    }


    .page4_txt {
        position: absolute;
        bottom: 100px;
        left: 70px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
    }


    .page4_txt p {
        /*display: none;*/
    }

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


    .page4_txt_p1 {
        color: #ffffff;
        font-size: 60px;
        line-height: 84px;
        font-family: TsangerYunHei-W06;
        margin-bottom: 22px;
    }


    .page4_txt_p3 {
        width: 126px;
        font-size: 20px;
        color: var(--theme-color);
        line-height: 40px;
        text-align: center;
        position: relative;
        font-family: TsangerYunHei-W05;
        cursor: pointer;
        float: left;

    }


    .page4_txt_p3 img {
        width: 126px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page5 {
        background: #1C2122;
        padding: 0 60px;
        display: flex;
        align-items: center;
    }
    .page5_main{
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 460px;
    }
    .page5_left{
        width: 66%;
        position: relative;
        margin-right: 20px;
        height: 100%;
    }
    .page5_right{
        width: 34%;
        position: relative;
        height: 100%;
    }
    .page5_left>img,.page5_right>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .page5_txt {
        position: absolute;
        bottom: 35px;
        left: 40px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        display: flex;
        align-items: center;
    }

    .page5_txt_p1 {
        font-size: 30px;
        line-height: 42px;
    }

    .page5_txt img {
        width: 22px;
        height: 22px;
        margin-left: 7px;
        cursor: pointer;

    }

}

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

    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }

    .page1, .page4, .page5 {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }



    .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: 252px;
        left: 107px;
        font-size: 48px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        line-height: 60px;
    }


    .banner_txt p:nth-child(1) {
        font-size: 96px;
        line-height: 135px;
        margin-bottom: 33px;
        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: 83px;
    }


    .swiper_pagination1 .swiper-pagination-bullet {
        width: 224px;
        height: 2px;
        background: #FFFFFF;
        border-radius: 0;
        margin: 0 24px;
        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;
        }
    }
    .page2, .page3 {
        position: relative;
        overflow: hidden;
    }

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

    .page2_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;;
    }
    .bofang{
        position: absolute;
        width: 128px;
        height: 128px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
    }
    .page2_txt {
        position: absolute;
        left: 112px;
        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;
        left: 112px;
        bottom: 160px;
    }


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

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


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

    }

    .page3_txt p:nth-child(3) {
        margin-left: 46px;
    }

    .page3_txt p:nth-child(2) img, .page3_txt p:nth-child(3) img {
        width: 204px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .page3_icon1, .page3_icon2, .page3_icon3 {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }

    .page3_icon2 {
        top: 128px;
    }

    .page3_icon3 {
        top: 254px;
    }

    .page3_icon {
        height: 64px;
        background: rgba(54, 61, 62, 1);
        padding-left: 12px;
        display: flex;
        opacity: 0.95;
    }

    .page3_icon span {
        width: 0;
        height: 64px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 64px;
        cursor: pointer;
        font-family: TsangerYunHei-W03;
    }

    .page3_icon img {
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-top: 12px;
        margin-right: 12px;

    }

    .page4_txt {
        position: absolute;
        bottom: 160px;
        left: 112px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
    }

    .page4_txt p {
        /*display: none;*/
    }

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


    .page4_txt_p1 {
        color: #ffffff;
        font-size: 96px;
        line-height: 120px;
        font-family: TsangerYunHei-W06;
        margin-bottom: 40px;
    }


    .page4_txt_p3 {
        width: 204px;
        font-size: 32px;
        color: var(--theme-color);
        line-height: 67px;
        text-align: center;
        position: relative;
        font-family: TsangerYunHei-W05;
        cursor: pointer;
        float: left;

    }


    .page4_txt_p3 img {
        width: 204px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page5 {
        background: #1C2122;
        padding: 0 95px;
        display: flex;
        align-items: center;
    }
    .page5_main{
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 736px;
    }
    .page5_left{
        width: 66%;
        position: relative;
        margin-right: 32px;
        height: 100%;
    }
    .page5_right{
        width: 34%;
        position: relative;
        height: 100%;
    }
    .page5_left>img,.page5_right>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page5_txt {
        position: absolute;
        bottom: 60px;
        left: 64px;
        color: #FFFFFF;
        font-family: TsangerYunHei-W06;
        display: flex;
        align-items: center;
    }

    .page5_txt_p1 {
        font-size: 48px;
        line-height: 60px;
    }

    .page5_txt img {
        width: 32px;
        height: 32px;
        margin-left: 15px;
        cursor: pointer;

    }


}