
@media screen and (min-width: 758px){
    /* 首页动画 */
    .section{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; opacity: 0;}
    .section.down { z-index: 10; opacity: 1;}
    .section.up { z-index: 20; opacity: 1;}
    .section.fixed { z-index: 10; opacity: 1;}


    .header::before{transition: all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1); width: 0;}
    .header::after{transition: all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1); height: 0;}
    .header .logo a::after{transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1); height: 0;}
    .header .logo span{opacity: 0; transition: 0.6s;}
    .header .lang{opacity: 0; transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);}

    .header.on .logo a::after{height: 100%;}
    .header.on::before{ width: 100%; transition-delay: 0.3s;}
    .header.on::after{ height: 100vh; transition-delay: 0.5s;}
    .header.on .logo span{opacity: 1;}
    .header.on .lang{opacity: 1;}

    .home_part1{opacity: 1;}
    .home_part1::after{transition: all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1); width: 0;}
    .home_part1 .box>div{transition: all 0.6s 0s cubic-bezier(0.42, 0, 0.58, 1); transform: translateY(30px); opacity: 0;}
    .home_part1 .box .tit{transition-delay: 0.1s;}
    .home_part1.fixed .box>div{opacity: 1; transform: translateY(0);}
    .home_part1.fixed::after{width: 100%; transition-delay: 0.2s;}
    .home_part1.up{z-index: 1;}



    .home_part2 .back_video{height: 0; transition: 0.8s cubic-bezier(0.42, 0, 0.58, 1); }
    .home_part2.down .back_video{ transition-delay: 0.4s;}
    .home_part2.up .back_video{ height: 100%; transition-delay: 0.6s}
    .home_part2.fixed .back_video{ height: 100%; transition-delay: 0s;}

    .home_part2 .box::after{ height: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2.down .box::after{  transition-delay: 0.4s;}
    .home_part2.up .box::after{ height: 100%; transition-delay: 0.6s;}
    .home_part2.fixed .box::after{ height: 100%; transition-delay: 0s;}


    .home_part2 .home_title>div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2 .home_title .txt{transition-delay: 0.1s;}
    .home_part2 .home_title .tet{transition-delay: 0.2s;}
    .home_part2.fixed .home_title>div{ transform: translateY(0); opacity: 1;}

    .home_part2 .box .item{ transform: translateY(20px); opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2.fixed .box .item{ transform: translateY(0); opacity: 1; transition-delay: 0.5s;}

    .home_part2 .box .list::before{width: 0; transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2 .box .list::after{height: 0; transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2.fixed .box .list::before{width: 100%; transition-delay: 0.3s;}
    .home_part2.fixed .box .list::after{height: 100%; transition-delay: 0.7s;}

    .home_part2::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 6.25vw; background: #fff; height: 0; transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part2.down::after{transition-delay: 0.4s;}
    .home_part2.up::after{height: 100%; transition-delay: 0.6s;}
    .home_part2.fixed::after{height: 100%; transition-delay: 0.6s;}



    .home_part3.up{z-index: 1}
    .home_part3 .mask{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
    .home_part3 .mask>div{position: absolute; top: 0; height: 100%; background: #fff; opacity: 0;}
    .home_part3 .mask .d1{width: 37.5vw; left: 0; transform-origin: right; transform: scaleX(1); transition:all 0.5s cubic-bezier(0.42, 0, 0.58, 1); }
    .home_part3 .mask .d2{width: 56.25vw; left: 37.5vw;  transform-origin: bottom; transform: scaleY(1); transition:all 0.5s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part3 .mask .d3{width: 6.25vw; right: 0; transform-origin: right; transform: scaleX(1); transition:all 0.3s cubic-bezier(0.42, 0, 0.58, 1);}

    .home_part3.one .mask .d1{ transform: scaleX(0);}
    .home_part3.one .mask .d2{ transform: scaleY(0);}
    .home_part3.one .mask .d3{ transform: scaleX(0);}
    .home_part3.down .mask>div{ opacity: 1; transition-delay: 0.3s; }
    .home_part3.up .mask>div{ opacity: 1;}
    .home_part3.fixed .mask>div{ opacity: 1;}

    .home_part3 .back_video>div{ transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part3.one1 .back_video>div{ transition-delay: 0.5s;}

    .home_part3.one1 .back_video .d1{width: 0;}
    .home_part3.one1 .back_video .d2{height: 0;}
    .home_part3.one1 .back_video .d3{width: 0;}

    .home_part3 .home_title>div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part3 .home_title .txt{transition-delay: 0.1s;}
    .home_part3 .home_title .tet{transition-delay: 0.2s;}
    .home_part3.fixed .home_title>div{ transform: translateY(0); opacity: 1;} 

    .home_part3 form{transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1); transform: translateY(100%);}
    .home_part3.fixed form{transform: translateY(0); transition-delay: 0.2s;}



    .home_part4.down{z-index: 0;}
    .home_part4.up{z-index: 1;}

    .home_part4 .home_title >div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part4 .home_title .txt{transition-delay: 0.1s;}
    .home_part4 .home_title .tet{transition-delay: 0.2s;}
    .home_part4.fixed .home_title >div{ transform: translateY(0); opacity: 1; }

    .home_part4 .list::after{width: 0;transition:all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part4.fixed .list::after{width: 100%;}

    .home_part4 .list .item{transform: translateY(20px); opacity: 0;transition:all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part4.fixed .list .item{ transform: translateY(0); opacity: 1; }



    .home_part5 .back_video{height: 0; transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5.down .back_video{transition-delay: 0.4s;}
    .home_part5.up .back_video{height: 100%; transition-delay: 0.6s;}
    .home_part5.fixed .back_video{height: 100%; transition-delay: 0s;}


    .home_part5 .box::after{height: 0; transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5.down .box::after{transition-delay: 0.4s;}
    .home_part5.up .box::after{height: 100%; transition-delay: 0.6s;}
    .home_part5.fixed .box::after{height: 100%; transition-delay: 0s;}

    .home_part5 .home_title >div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5 .home_title .txt{transition-delay: 0.1s;}
    .home_part5 .home_title .tet{transition-delay: 0.2s;}
    .home_part5.fixed .home_title >div{ transform: translateY(0); opacity: 1; }

    .home_part5 .list::after{width: 0;transition:all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5.fixed .list::after{ width: 100%; transition-delay: 0.3s;}

    .home_part5 .list dt{transform: translateY(20px); opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5.fixed .list dt{ transform: translateY(0); opacity: 1;}

    .home_part5 .swiper-but{ opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part5.fixed .swiper-but{opacity: 1;}

    .home_part5 .list dd{height: 0; transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1); overflow: hidden;}
    .home_part5.down .list dd{transition-delay: 0.4s;}
    .home_part5.up .list dd{height: 100%; transition-delay: 0.6s;}
    .home_part5.fixed .list dd{height: 100%; transition-delay: 0s;}






    .home_part6.up{z-index: 1;}

    .home_part6 .home_title >div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part6 .home_title .txt{transition-delay: 0.1s;}
    .home_part6.fixed .home_title >div{ transform: translateY(0); opacity: 1; }

    .home_part6 .list::after{ width: 0;transition:all 0.8s 0s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part6.fixed .list::after{ width: 100%;transition-delay: 0.3s;}

    .home_part6 .list .swiper{ transform: translateY(20px); opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part6.fixed .list .swiper{ transform: translateY(0); opacity: 1;}

    .home_part6 .swiper-but{ opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part6.fixed .swiper-but{ opacity: 1; }


    .home_part7 .back_video{ height: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part7.down .back_video{transition-delay: 0.4s;}
    .home_part7.up .back_video{ height: 100%; transition-delay: 0.4s;}
    .home_part7.fixed .back_video{ height: 100%; transition-delay: 0s;}

    .home_part7 .box::after{ height: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part7.down .box::after{transition-delay: 0.5s;}
    .home_part7.up .box::after{ height: 100%; transition-delay: 0.5s;}
    .home_part7.fixed .box::after{ height: 100%; transition-delay: 0s;}

    .home_part7 .home_title >div{transform: translateY(30px); opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part7 .home_title .txt{transition-delay: 0.1s;}
    .home_part7 .home_title .tet{transition-delay: 0.2s;}
    .home_part7.fixed .home_title >div{ transform: translateY(0); opacity: 1; }


    .home_part7 .swiper-but{ opacity: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part7.fixed .swiper-but{opacity: 1;}

    .home_part7 .swiper1,
    .home_part7 .swiper3{ clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part7 .swiper2,
    .home_part7 .swiper4{ clip-path: inset(0 0 0 100%); transition: clip-path 0.6s cubic-bezier(0.42, 0, 0.58, 1);}

    .home_part7.fixed .swiper-slide{clip-path: inset(0 0 0 0); transition-delay: 0.3s; }


    .home_part8.up{z-index: 1;}
    .home_part8 .mask{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;}
    .home_part8 .mask>div{position: absolute; top: 0; height: 100%; background: #fff;}
    .home_part8 .mask .d1{width: 50vw; left: 0; transform-origin: right; transform: scaleX(1); transition:all 0.7s cubic-bezier(0.42, 0, 0.58, 1); }
    .home_part8 .mask .d2{width: 43.75vw; left: 50vw;  transform-origin: bottom; transform: scaleY(1); transition:all 0.7s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part8 .mask .d3{width: 6.25vw; right: 0; transform-origin: right; transform: scaleX(1); transition:all 0.7s cubic-bezier(0.42, 0, 0.58, 1);}

    .home_part8.one .mask .d1{ transform: scaleX(0);}
    .home_part8.one .mask .d2{ transform: scaleY(0);}
    .home_part8.one .mask .d3{ transform: scaleX(0);}


    .home_part8 .list dl{width: 43.75vw;}
    .home_part8 .list{width: 0;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1); overflow: hidden; }
    .home_part8.down .list{ width: 0; transition-delay: 0.0s;}
    .home_part8.up .list{ width: 100%; transition-delay: 1.4s;}
    .home_part8.fixed .list{ width: 100%; transition-delay: 0s;}

    .home_part8 .fenx,
    .home_part8 .cont{ opacity: 0; transition:all 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
    .home_part8.fixed .fenx,
    .home_part8.fixed .cont{opacity: 1; transition-delay: 0.6s;}
}


@media screen and (max-width: 1200px) and (min-width: 758px){
    

    .home_part2 .back_video .img{position: absolute; left: 0; bottom: 0; width: 100%; height: 100vh; background-position: center; background-repeat: no-repeat; background-color: #eeecea; background-size: 55vw;}


    .home_part3 .back_video{ opacity: 0; transition:all 0.5s;}
    .home_part3.down .back_video{opacity: 0; transition-delay: 0s;}
    .home_part3.up .back_video{opacity: 1; transition-delay: 0.8s;}
    .home_part3.fixed .back_video{opacity:1; transition-delay: 0s;}
    .home_part3 .back_video>div{display: none; transition: 0s !important;}
    .home_part3 .back_video .d1{display: block; width: 100% !important; background-position: center; background-size: cover;}

    

    .home_part7 .back_video .img{position: absolute; left: 0; bottom: 0; width: 100%; height: 100vh; background-position: center; background-repeat: no-repeat;  background-size: cover;}


    .home_part2::after{width: 60px;}
    
    .home_part8 .mask .d1{width: 51vw;}
    .home_part8 .mask .d2{width: calc(50vw - 60px);}
    .home_part8 .mask .d3{width: 60px;}

}



@media screen and (max-width: 758px){

    .header::after{height: 0; transition: 0.5s;}
    .header::before{width: 0; transition: 0.5s;}
    .header.on::after{height: 100vh; }
    .header.on::before{width: 100%; }

    .home_part1 .box>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part1.active .box>div{ opacity: 1; transform: translate(0,0); }
    .home_part1.active .box .txt{ transition-delay: 0.4s;}
    .home_part1.active .box .tit{ transition-delay: 0.5s;}

    .home_part1::after{width: 0; transition: 0.8s;}
    .home_part1.active::after{width: 100%; transition-delay: 0.4s;}


    .home_part2 .box::after{width: 0; transition: 0.5s;}
    .home_part2.active .box::after{width: 100%; transition-delay: 0.3s;}
    .home_part2 .box .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part2.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.7s;}
    .home_part3.active .box .home_title .txt{transition-delay: 0.8s;}

    .home_part2 .box .list::before{width: 0; transition: 0.8s;}
    .home_part2.active .box .list::before{width: 100%; transition-delay: 0.7s;}

    .home_part2 .box .list::after{height: 0; transition: 0.8s;}
    .home_part2.active .box .list::after{height: 100%; transition-delay: 0.7s;}

    .home_part2 .box .item{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part2.active .box .item{ opacity: 1; transform: translate(0,0); transition-delay: 1s;}


    .home_part3 .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part3.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.4s;}
    .home_part3.active .box .home_title .txt{transition-delay: 0.5s;}

    .home_part3 form{opacity: 1; transition: 0.8s; transform: translateX(-100%);}
    .home_part3.active form{opacity: 1; transform: translate(0,0); transition-delay: 0.6s;}


    .home_part4 .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part4.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.4s;}
    .home_part4.active .box .home_title .txt{transition-delay: 0.5s;}

    .home_part4 .list .item{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part4.active .list .item{ opacity: 1; transform: translate(0,0); }
    .home_part4.active .list .item:nth-of-type(1){transition-delay: 0.7s;}
    .home_part4.active .list .item:nth-of-type(2){transition-delay: 0.8s;}
    .home_part4.active .list .item:nth-of-type(3){transition-delay: 0.9s;}
    .home_part4.active .list .item:nth-of-type(4){transition-delay: 1.0s;}
    .home_part4.active .list .item:nth-of-type(5){transition-delay: 1.0s;}
    .home_part4.active .list .item:nth-of-type(6){transition-delay: 1.2s;}
    .home_part4.active .list .item:nth-of-type(7){transition-delay: 1.3s;}
    .home_part4.active .list .item:nth-of-type(8){transition-delay: 1.4s;}
    .home_part4.active .list .item:nth-of-type(9){transition-delay: 1.5s;}
    .home_part4.active .list .item:nth-of-type(10){transition-delay: 1.6s;}



    .home_part5 .box::after{width: 0; transition: 0.5s;}
    .home_part5.active .box::after{width: 100%; transition-delay: 0.3s;}

    .home_part5 .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part5.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.7s;}
    .home_part5.active .box .home_title .txt{transition-delay: 0.8s;}

    .home_part5 .swiper-but{opacity: 0; transition: 0.8s; transform: translateY(0px);}
    .home_part5.active .swiper-but{ opacity: 1; transform: translate(0,0); transition-delay: 0.9s;}
    .home_part5 .list dl{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part5.active .list dl{ opacity: 1; transform: translate(0,0); transition-delay: 1.1s;}


    .home_part6 .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part6.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.4s;}
    .home_part6.active .box .home_title .txt{transition-delay: 0.5s;}

    .home_part6 .swiper{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part6.active .swiper{ opacity: 1; transform: translate(0,0); transition-delay: 0.7s;}

    .home_part6 .swiper-but{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part6.active .swiper-but{ opacity: 1; transform: translate(0,0); transition-delay: 0.8s;}


    .home_part7 .home_title>div{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part7.active .box .home_title>div{ opacity: 1; transform: translate(0,0); transition-delay: 0.4s;}
    .home_part7.active .box .home_title .txt{transition-delay: 0.5s;}
    .home_part7 .list{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part7.active .list{ opacity: 1; transform: translate(0,0); transition-delay: 0.7s;}


    .home_part8 .list{opacity: 0; transition: 0.8s; transform: translateY(-50px);}
    .home_part8.active .list{ opacity: 1; transform: translate(0,0); transition-delay: 0.4s;}

    .home_part8 .fenx{opacity: 0; transition: 0.8s; transform: translateY(50px);}
    .home_part8.active .fenx{ opacity: 1; transform: translate(0,0); transition-delay: 0.6s;}



    .fp-viewing-7 .downward i{transform: rotate(-180deg); display: inline-block;}


}