@charset "utf-8";
/* 首页动画 */

@media screen and (min-width: 1200px){
    .home_part2 .ul1{ transition: 1s ; bottom: -29.95vw;}
    .home_part2 .ul1 li{transition: 0.8s ; transform: scale(0); opacity: 0;}
    .home_part2.active .ul1{ bottom: 0; transition-delay: 1s;}
    .home_part2.active .ul1 li{transform: scale(1); opacity: 1; transition-delay: 1.5s;}

    .home_part2 .ul2 li{ transition: 0.5s; opacity: 0; }
    .home_part2 .ul2 .li1{transform: translateY(-600px);}
    .home_part2 .ul2 .li2{transform: translateX(-400px);}
    .home_part2 .ul2 .li3{transform: translateX(400px);}
    .home_part2.active .ul2 li{transform: translate(0) !important; opacity: 1; transition: 1.2s; transition-delay: 0.2s;}

    .home_part2 .list dt span{transform: scale(1.5); opacity: 0; transition: 0.2s; display: inline-block;}
    .home_part2 .list dd{transform: translateY(100px);  transition: 0.8s; opacity: 0;}
    .home_part2.active .list dt span{ transform: scale(1); opacity: 1; transition-delay: calc(0.6s + var(--delay));}
    .home_part2.active .list dd{transform: translateY(0); opacity: 1; transition-delay: 0.9s;}



    .home_title .txt .p1{transition: 1s; opacity: 0; transform: translateY(-50px);}
    .home_title .txt .p1::before{transform: translate(-20px, -20px); transition: 0.8s; opacity: 0;}
    .home_title .txt .p1::after{transform: translate(20px, 20px);  transition: 0.8s; opacity: 0;}
    .active .home_title .txt .p1{opacity: 1; transition-delay: 0.5s; transform: translateY(0)}
    .active .home_title .txt .p1::before,
    .active .home_title .txt .p1::after{transform: translate(0,0); opacity: 1;  transition-delay: 0.8s;}

    .home_title .txt .p2{transition: 1s; opacity: 0; transform: translateY(50px);}
    .active .home_title .txt .p2{opacity: 1; transition-delay: 0.6s; transform: translateY(0)}

    .home_title .tet{transition: 1s; opacity: 0; transform: translateY(50px);}
    .active .home_title .tet {opacity: 1; transition-delay: 0.7s; transform: translateY(0)}


    .home_part3 .list .item{ opacity: 0; transition: 1s;}
    .home_part3 .list .item:nth-of-type(1){ transform: translateX(200px);}
    .home_part3 .list .item:nth-of-type(2){position: relative; z-index: 1; transform: translateY(-200px);}
    .home_part3 .list .item:nth-of-type(3){ transform: translateX(-200px);}
    .home_part3.active .list .item:nth-of-type(1),
    .home_part3.active .list .item:nth-of-type(3){transition-delay: 1.3s;}
    .home_part3.active .list .item{transform: translateX(0px); opacity: 1; transition-delay: 1s;}

    .home_part3 .form{transform: translateY(50px); opacity: 0; transition: 1s;}
    .home_part3.active .form{transform: translateY(0px); opacity: 1; transition-delay: 1s; }


    .home_part4::before,
    .home_part4::after{content: ''; position: absolute; left: 0; width: 100%; height: 60%; background: #fff; filter: blur(1px); z-index: 2; transition: 0.8s 0s; }
    .home_part4::before{top: 0; }
    .home_part4::after{bottom: 0;}
    .home_part4.active::before{top: -60%;  transition-delay: 1s;}
    .home_part4.active::after{bottom: -60%; transition-delay: 1s;}


    .home_part5 .wrap_box::before{transform: translateY(-200px); opacity: 0; transition: 1s;}
    .home_part5 .wrap_box::after{transform: translateY(200px); opacity: 0; transition: 1s;}
    .home_part5 .txt{transform: translateY(-100%); opacity: 0; transition: 1s;}


    .home_part5 .list{ opacity: 0; transition: 1s;}
    .home_part5 .box{transform: translate(-50%,100%); opacity: 0; transition: 1s;}

    .home_part5.active .wrap_box::before,
    .home_part5.active .wrap_box::after{transform: translateY(0); opacity: 1; transition-delay: 0.7s;}
    .home_part5.active .txt{transform: translateY(0); opacity: 1; transition-delay: 1s;}
    .home_part5.active .list{opacity: 1; transition-delay: 1.1s;}
    .home_part5.active .box{transform: translate(-50%,0); opacity: 1; transition-delay: 1s;}


    .home_part6 .list{transform: translateY(200px); opacity: 0; transition: 1s;}
    .home_part6 .back{transform: translateX(-30%); opacity: 0; transition: 1s;}
    .home_part6.active .list{transform: translateY(0px); opacity: 1; transition-delay: 1s; }
    .home_part6.active .back{transform: translateY(0px); opacity: 1; transition-delay: 0.4s; }

    .home_part7 .home_title .tet1{transform: translateY(100px); opacity: 0; transition: 1s;}
    .home_part7::after{transform: translateX(-100px); opacity: 1; transition: 0.7s;}
    .home_part7 .box{transform: scale(1.2); opacity: 0; transition: 1.3s;}

    .home_part7.active .home_title .tet1{transform: translateY(0px); opacity: 1; transition-delay: 0.8s; }
    .home_part7.active::after{transform: translateX(0px); opacity: 1; transition-delay: 1s; }
    .home_part7.active .box{transform: scale(1); opacity: 1; transition-delay: 1.1s; }


    .home_part8 .box{transform: translateX(100px); opacity: 0; transition: 1s;}
    .home_part8 .list .item{transform: translateY(-80px); opacity: 0; transition: 0.8s;}
    .home_part8.active .box{transform: translateX(0px); opacity: 1; transition-delay: 1s; }
    .home_part8.active .list .item{transform: translateY(0px); opacity: 1; transition-delay:calc(1.1s + var(--delay)); }


    .home_part9::after{transform: translateX(-100px); opacity: 1; transition: 1s;}
    .home_part9 .list{ opacity: 0; transition: 1s;}
    .home_part9 .back{ transform: scale(1.2); opacity: 0; transition: 1s;}
    .home_part9.active::after{transform: translateX(0px); opacity: 1; transition-delay: 0.4s; }
    .home_part9.active .list{transform: translateY(0px); opacity: 1; transition: 2s; transition-delay: 1.2s; }
    .home_part9.active .back{transform: scale(1); opacity: 1; transition-delay: 0.8s; }


    .home_part10 .box{transform: translateY(-100px); opacity: 0; transition: 1s;}
    .home_part10 .row_1{transform: translateX(-100px); opacity: 0; transition: 1s;}
    .home_part10 .row_2{transform: translateX(100px); opacity: 0; transition: 1s;}
    .home_part10 .row_3{transform: translateY(50px); opacity: 0; transition: 1s;}

    .home_part10.active .box{transform: translateX(0px); opacity: 1; transition-delay: 0.7s; }
    .home_part10.active .row_1{transform: translateX(0px); opacity: 1; transition-delay: 1s; }
    .home_part10.active .row_2{transform: translateX(0px); opacity: 1; transition-delay: 1s; }
    .home_part10.active .row_3{transform: translateX(0px); opacity: 1; transition-delay: 1s; }
}