/* 广告投放 */
    
    @keyframes banner-bg {
        from {
            background-position: top center;
        }
        100% {
            background-position: bottom center;
        }
    }
    
    #recruit-banner .swiper-slide-active.rec-banner1,
    #recruit-banner .swiper-slide-active.rec-banner2,
    #recruit-banner .swiper-slide-active.rec-banner3,
    .banner {
        animation: banner-bg .5s ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes move-right {
        from {
            transform: translateX(-80px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes move-left {
        from {
            transform: translateX(80px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .run .mode-pc {
        animation: move-right .3s ease-out;
    }
    
    .run .mode-man {
        animation: move-left .5s ease-out;
    }
    
    @keyframes insert-man {
        from {
            transform: translate(100px, -100px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .run .insert-man {
        animation: insert-man .5s ease-out;
    }
    
    .run .insert-screen {
        animation: move-left .3s ease-out;
    }
    
    .presentation-poimg4 {
        animation: move-left .3s ease-out;
    }
    
    @keyframes move-top {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .banner .banner-strong,
    #recruit-banner .swiper-slide-active .banner-strong,
    .swiper-slide-active .media-info ul {
        transform: translateY(50px);
        opacity: 0;
        animation-delay: .1s;
        animation: move-top .5s ease-out;
        animation-fill-mode: forwards;
    }
    
    .swiper-slide-active .media-info ul {
        animation-delay: .7s;
    }
    
    .banner .banner-info,
    #recruit-banner .swiper-slide-active .banner-info,
    .swiper-slide-active .info-p {
        transform: translateY(50px);
        opacity: 0;
        animation: move-top .4s ease-out;
        animation-delay: .2s;
        animation-fill-mode: forwards;
    }
    
    .swiper-slide-active .info-p {
        animation-delay: .8s;
    }
    
    .presentation-poimg3,
    .feature li:hover p {
        animation: move-top .3s ease-out;
    }
    
    .rec-banner-item .btn {
        transform: translateY(50px);
        opacity: 0;
    }
    
    .banner .btn,
    #recruit-banner .swiper-slide-active .btn,
    .swiper-slide-active .media-info .btn {
        transform: translateY(50px);
        opacity: 0;
        animation: move-top .4s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .3s;
    }
    
    .swiper-slide-active .media-info .btn {
        animation-delay: .9s;
    }
    
    @keyframes rotate {
        from {
            transform: rotate(0);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    .feature li:hover .orient-bg {
        animation: rotate 1.5s linear infinite;
    }
    
    .trait li:hover .circle-img {
        animation: rotate .9s linear infinite;
    }
    
    .feature li:hover .manage {
        animation: rotate 1.5s linear infinite;
    }
    
    @keyframes fly {
        0%,
        20% {
            transform: translate(-50px, 50px);
        }
        45%,
        90% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(50px, -50px);
        }
    }
    
    .trait li:hover .plane-img {
        animation: fly 2s ease infinite;
    }
    
    @keyframes cover {
        from {
            left: 0;
        }
        100% {
            left: 100%;
        }
    }
    
    .trait li:hover .hook-cover,
    .feature li:hover .warrant-cover {
        animation: cover .3s cubic-bezier(0.4, 0, 1, 1);
    }
    
    @keyframes scale {
        from {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
    
    @keyframes scale-big {
        from {
            transform: scale(0);
        }
        100% {
            transform: scale(1.5);
        }
    }
    
    .trait li:hover .ai-large-img {
        animation: scale 1.5s linear infinite;
    }
    
    .feature li:hover .lightning {
        animation: scale .8s linear infinite;
    }
    
    .feature li:hover .personality-star,
    .feature li:hover .personality-star1,
    .feature li:hover .personality-star2 {
        animation: scale .8s linear infinite;
    }
    
    .feature li:hover .personality-star1 {
        animation-delay: .3s;
    }
    
    .feature li:hover .personality-star2 {
        animation-delay: .6s;
    }
    
    .trait li:hover .ai-small-img {
        animation: scale-big 1.5s linear infinite;
        animation-delay: .8s;
    }
    
    @keyframes frequency {
        from {
            transform: translateY(26px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: .5;
        }
    }
    
    .feature li:hover .frequency {
        opacity: 0;
        animation: frequency .5s ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes frequency1 {
        from {
            transform: translateY(13px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: .5;
        }
    }
    
    .feature li:hover .frequency1,
    .feature li:hover .system {
        opacity: 0;
        animation: frequency1 .5s ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes move-right-bottom {
        from {
            transform: translate(-5px, -5px);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    .feature li:hover .cross1 {
        animation: move-right-bottom .4s linear;
    }
    
    @keyframes scale-height {
        from {
            height: 59px;
        }
        100% {
            height: 10px;
        }
    }
    
    .feature li:hover .actual,
    .feature li:hover .actual1,
    .feature li:hover .actual2 {
        animation: scale-height .4s linear infinite;
        animation-direction: alternate;
    }
    
    .feature li:hover .actual2 {
        animation-delay: .1s;
    }
    
    .feature li:hover .actual1 {
        animation-delay: .3s;
    }
    
    @keyframes advantage-pc {
        from {
            transform: translate(-100px, -100px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .user-pc,
    .swiper-slide-active .user-screen {
        transform: translate(-100px, -100px);
        opacity: 0;
        animation: advantage-pc .3s;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    .swiper-slide-active .advantage-pc {
        transform: translate(-100px, -100px);
        opacity: 0;
        animation: advantage-pc .4s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .4s;
    }
    
    .swiper-slide-active .scene-pc {
        transform: translate(-100px, -100px);
        opacity: 0;
        animation: advantage-pc .4s ease-out;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    @keyframes advantage-screen {
        from {
            transform: translate(-130px, -120px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .advantage-screen {
        transform: translate(-130px, -120px);
        opacity: 0;
        animation: advantage-screen .4s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .4s;
    }
    
    @keyframes scene-screen {
        from {
            transform: translate(-150px, -125px) scale(.8);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-screen {
        transform: translate(-150px, -125px) scale(.8);
        opacity: 0;
        animation: scene-screen .4s ease-out;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    @keyframes advantage-screen3 {
        from {
            transform: translateY(80px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .advantage-screen2,
    .swiper-slide-active .user-screen2 {
        transform: translateY(80px);
        opacity: 0;
        animation: advantage-screen3 .3s;
        animation-fill-mode: forwards;
        animation-delay: .5s;
    }
    
    @keyframes beat1 {
        from {
            transform: translateY(0)
        }
        100% {
            transform: translateY(-10px);
        }
    }
    
    .swiper-slide-active .advantage-screen2.beat1,
    .swiper-slide-active .user-screen2.beat1,
    .swiper-slide-active .scene-uav.beat1 {
        opacity: 1;
        animation: beat1 1s linear infinite;
        animation-direction: alternate;
    }
    
    @keyframes beat2 {
        from {
            transform: translate(0, 0)
        }
        100% {
            transform: translate(-10px, -10px);
        }
    }
    
    .swiper-slide-active .advantage-screen.beat2,
    .swiper-slide-active .scene-screen.beat2 {
        opacity: 1;
        animation: beat2 1s linear infinite;
        animation-direction: alternate;
    }
    
    @keyframes beat3 {
        from {
            transform: translate(0, 0)
        }
        100% {
            transform: translate(-10px, 10px);
        }
    }
    
    .swiper-slide-active .scene-man.beat3 {
        opacity: 1;
        animation: beat3 1s linear infinite;
        animation-direction: alternate;
    }
    
    @keyframes advantage-screen2 {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-uav {
        transform: translateY(-30px);
        opacity: 0;
        animation: advantage-screen2 .3s;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    @keyframes advantage-mouse {
        from {
            transform: translate(-70px, -70px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .advantage-mouse,
    .swiper-slide-active .advantage-mouse1 {
        transform: translate(-70px, -70px);
        opacity: 0;
        animation: advantage-mouse .3s;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    @keyframes scene-mail {
        from {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-mail {
        opacity: 0;
        animation: scene-mail .3s;
        animation-delay: .7s;
        animation-fill-mode: forwards;
    }
    
    @keyframes scene-sit {
        from {
            transform: translate(70px, 70px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-sit {
        transform: translate(70px, 70px);
        opacity: 0;
        animation: scene-sit .5s;
        animation-delay: .4s;
        animation-fill-mode: forwards;
    }
    
    @keyframes presentation-poimg1 {
        from {
            transform: translate(-61px, -25px) scaleY(.67) scaleX(.94);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0) scaleY(1) scaleX(1);
        }
    }
    
    .run .presentation-poimg1 {
        transform-origin: 57% 70%;
        animation: presentation-poimg1 .3s ease-out;
    }
    
    @keyframes presentation-poimg2 {
        from {
            transform: translate(-55px, 5px) scale(.65);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0) scale(1);
        }
    }
    
    .presentation-poimg2 {
        transform-origin: 57% 70%;
        animation: presentation-poimg2 .3s ease-out;
    }
    
    @keyframes phone-float1 {
        from {
            transform: translate(20px, -10px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    .phone-float1 {
        animation: phone-float1 .3s ease-out;
    }
    
    @keyframes phone-float2 {
        from {
            transform: scale(.8) translate(33px, 5px);
            opacity: 0;
        }
        100% {
            transform: scale(1) translate(0, 0);
        }
    }
    
    .phone-float2,
    .phone-float4,
    .phone-float5 {
        animation: phone-float2 .3s ease-out;
    }
    
    @keyframes phone-float3 {
        from {
            transform: translate(-30px, 60px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    .phone-float3 {
        animation: phone-float3 .3s ease-out;
    }
    
    @keyframes phone-float6 {
        from {
            transform: translate(20px, 20px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    .phone-float6 {
        animation: phone-float6 .3s ease-out;
    }
    
    @keyframes user-man {
        from {
            transform: translate(-50px, 50px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .user-man {
        transform: translate(-50px, 50px);
        opacity: 0;
        animation: user-man .3s;
        animation-delay: .8s;
        animation-fill-mode: forwards;
    }
    
    @keyframes user-woman {
        from {
            transform: translate(50px, -50px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .user-woman {
        transform: translate(50px, -50px);
        opacity: 0;
        animation: user-woman .3s;
        animation-delay: .8s;
        animation-fill-mode: forwards;
    }
    
    @keyframes scene-woman {
        from {
            transform: translate(20px, 20px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-woman {
        transform: translate(20px, 20px);
        opacity: 0;
        animation: scene-woman .3s;
        animation-delay: .6s;
        animation-fill-mode: forwards;
    }
    
    @keyframes scene-man {
        from {
            transform: translate(-10px, -10px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    
    .swiper-slide-active .scene-man {
        transform: translate(-10px, -10px);
        opacity: 0;
        animation: scene-man .3s;
        animation-delay: .8s;
        animation-fill-mode: forwards;
    }
    
    @keyframes case-posi1 {
        from {
            transform: translate(-10px, -10px) scale(.9);
        }
        100% {
            transform: translate(0, 0) scale(1);
        }
    }
    
    .swiper-slide-active .case-posi1 {
        animation: case-posi1 .6s;
    }
    
    @keyframes case-posi2 {
        from {
            transform: translate(-30px, 0) scale(.7);
        }
        100% {
            transform: translate(0, 0) scale(1);
        }
    }
    
    .swiper-slide-active .case-posi2 {
        animation: case-posi2 .6s;
    }
    /* 公司介绍 */
    
    @keyframes scale {
        0% {
            transform: scale(.001);
        }
        50%,
        75% {
            transform: scale(1.5);
        }
        78%,
        100% {
            opacity: 0;
        }
    }
    
    .spot-big {
        animation: scale 2.5s infinite ease-out;
    }
    
    .posti2 .spot-big,
    .posti5 .spot-big {
        animation-delay: .5s;
    }
    
    .posti3 .spot-big,
    .posti8 .spot-big {
        animation-delay: .8s;
    }
    
    .posti4 .spot-big,
    .posti6 .spot-big {
        animation-delay: 1.5s;
    }
    
    .posti7 .spot-big,
    .posti9 .spot-big {
        animation-delay: 2s;
    }
    /* 流量变现 */
    
    @keyframes orig-move-left {
        from {
            transform: translateX(20px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
        }
    }
    
    .traffic-feature li:hover .originality,
    .presentation-poimg6 {
        animation: orig-move-left .3s ease-out;
    }
    
    @keyframes orig-move-right {
        from {
            transform: translateX(-20px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
        }
    }
    
    .traffic-feature li:hover .originality1,
    .presentation-poimg5 {
        animation: orig-move-right .3s ease-out;
    }
    
    @keyframes filter-opacity {
        from {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    .traffic-feature li:hover .filter-right {
        animation: filter-opacity 1s infinite linear;
    }
    
    @keyframes filter-fly {
        from {
            transform: translateX(-20px);
        }
        to {
            transform: translateX(20px);
            opacity: 0;
        }
    }
    
    .traffic-feature li:hover .filter1,
    .traffic-feature li:hover .filter3 {
        animation: filter-fly .6s infinite;
    }
    
    @keyframes filter-fly1 {
        from {
            transform: translateX(-10px);
        }
        to {
            transform: translateX(30px);
            opacity: 0;
        }
    }
    
    .traffic-feature li:hover .filter2,
    .traffic-feature li:hover .filter4 {
        animation: filter-fly1 .6s infinite;
        animation-delay: .1s;
    }
    
    @keyframes move-bg {
        to {
            left: -1180px;
        }
    }
    
    .case-card:before,
    .case-card:after,
    .pop:before,
    .pop:after {
        animation: move-bg 25s linear infinite;
    }
    
    .case-card:after,
    .pop:after {
        animation-duration: 30s;
    }
    
    @keyframes move-bg1 {
        from {
            margin-left: 0;
        }
        to {
            margin-left: -708px;
        }
    }
    
    .feature li:hover:after {
        animation: move-bg1 20s linear infinite;
    }
    
    @keyframes move-bg2 {
        from {
            margin-left: 0;
        }
        to {
            margin-left: -508px;
        }
    }
    
    .traffic-feature li:hover:after {
        animation: move-bg2 20s linear infinite;
    }
    /* 合伙人招募 */
    
    @keyframes sale-height {
        from {
            height: 25px;
        }
        100% {
            height: 5px;
        }
    }
    
    @keyframes sale-height1 {
        from {
            height: 20px;
        }
        100% {
            height: 5px;
        }
    }
    
    .feature li:hover .sale1 {
        animation: sale-height1 .5s linear infinite;
        animation-direction: alternate;
    }
    
    .feature li:hover .sale2,
    .feature li:hover .sale3 {
        animation: sale-height .5s linear infinite;
        animation-direction: alternate;
    }
    
    .feature li:hover .sale1 {
        animation-delay: .2s;
    }
    
    .feature li:hover .sale3 {
        animation-delay: .4s;
    }
    
    @keyframes location {
        to {
            background-position: -1638px center;
        }
    }
    
    .BMap_Marker div {
        background-position: left center;
        animation: location 3000ms infinite steps(39);
    }
    
    @keyframes in {
        from {
            transform: translateY(100px)
        }
        to {
            transform: translateY(0)
        }
    }
    
    .in {
        animation: in .3s;
    }
    
    @keyframes out {
        from {
            transform: translateY(0)
        }
        to {
            transform: translateY(150px);
            opacity: 0;
        }
    }
    
    .out {
        animation: out .5s;
    }
    @keyframes moveInUp{
        from {
            transform: translateY(-10px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .move-in >p,.move-in >strong {

        animation: moveInUp .5s;
    }
    @keyframes moveInDown{
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .move-in >img {

        animation: moveInDown .5s;
    }