.pipeline_box{background: url(../images/pipeline/skeleton.png) no-repeat bottom center;background-size: 100%;width: 1600px;height: 550px;margin: 50px auto;position: relative;}
.link_box{position: relative;}
.link_box img{display: block;width: 90%;margin: 4px auto 0;}
.link1{position: absolute;top: 80px;left: 234px;width: 30px;height: 100px;}
.link8{position: absolute;top: 360px;left: 1125px;width: 100px;height: 40px;}
.link9{position: absolute;top: 274px;left: 1300px;width: 100px;height: 40px;}
.link2{position: absolute;top: 320px;left: 216px;width: 100px;height: 65px;}
.link3{position: absolute;top: 430px;left: 455px;width: 100px;height: 62px;}
.link4{position: absolute;top: 146px;left: 565px;width: 20px;height: 100px;}
.link5{position: absolute;top: 175px;left: 754px;width: 14px;height: 94px;}
.link6{position: absolute;top: 100px;left: 922px;width: 14px;height: 94px;}
.link7{position: absolute;top: 186px;left: 1040px;width: 70px;height: 46px;}

.sound_wave_container{position: absolute;left: 250px;top: 30px;width: 100px;height: 100px;}
.sound_wave1{position: absolute;top: 18px;left: 10px;width: 10px;height: 26px;background: url(../images/pipeline/acoustic_wave1.png) no-repeat top center;background-size: 100%;transform: scale(0);opacity: 0;animation: soundWaveAnimation 2s infinite;animation-delay: 0s;}
.sound_wave2{position: absolute;top: 16px;left: 20px;width: 14px;height: 34px;background: url(../images/pipeline/acoustic_wave2.png) no-repeat top center;background-size: 100%;transform: scale(0);opacity: 0;animation: soundWaveAnimation2 2s infinite;animation-delay: 0s;}
.sound_wave3{position: absolute;top: 12px;left: 30px;width: 18px;height: 40px;background: url(../images/pipeline/acoustic_wave3.png) no-repeat top center;background-size: 100%;transform: scale(0);opacity: 0;animation: soundWaveAnimation3 2s infinite;animation-delay: 0s}

.cloud_01{position: absolute;top: 240px;left: 280px;background: url(../images/pipeline/cloud_01.gif) no-repeat top center;width: 100px;height: 100px;background-size: 100%;}
.cloud_02{position: absolute;top: 350px;left: 520px;background: url(../images/pipeline/cloud_02.gif) no-repeat top center;width: 100px;height: 100px;background-size: 100%;}
.cloud_03{position: absolute;top: 280px;left: 1076px;background: url(../images/pipeline/cloud_03.gif) no-repeat top center;width: 100px;height: 100px;background-size: 100%;}
.cloud_04{position: absolute;top: 200px;left: 1270px;background: url(../images/pipeline/cloud_04.gif) no-repeat top center;width: 100px;height: 100px;background-size: 100%;}
.cloud_05{position: absolute;top: 116px;left: 1080px;background: url(../images/pipeline/cloud_05.gif) no-repeat top center;width: 100px;height: 100px;background-size: 100%;}
.cloud_06{position: absolute;top: 0px;left: 900px;background: url(../images/pipeline/cloud_06.gif) no-repeat top center;width: 80px;height: 100px;background-size: 100%;}
.cloud_07{position: absolute;top: 72px;left: 722px;background: url(../images/pipeline/cloud_07.gif) no-repeat top center;width: 80px;height: 100px;background-size: 100%;}

.robot_box{position: relative;}
.robot_01{position: absolute;top: 230px;left: 350px;width: 60px;height: 60px;background: url(../images/pipeline/intelligence.png) no-repeat top center;background-size: 100%;}
.robot_box .eye1{position: absolute;top: 13px;left: 26px;width: 4px;height: 4px;border-radius: 6px;background-color: #fff;}
.robot_box .eye2{position: absolute;top: 13px;left: 32px;width: 4px;height: 4px;border-radius: 6px;background-color: #fff;}
.robot_02{position: absolute;top: 90px;left: 790px;width: 60px;height: 60px;background: url(../images/pipeline/intelligence.png) no-repeat top center;background-size: 100%;}
.robot_03{position: absolute;top: 10px;left: 960px;width: 60px;height: 60px;background: url(../images/pipeline/intelligence.png) no-repeat top center;background-size: 100%;}
.robot_04{position: absolute;top: 120px;left: 1040px;width: 60px;height: 60px;background: url(../images/pipeline/intelligence.png) no-repeat top center;background-size: 100%;}

.box_model{position: relative;}
.box_model1-0{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model5.png) center center no-repeat;animation: thing1-0 2s linear 0s infinite both;background-size: 100%;}
.box_model1-1{position: absolute;width: 40px;height: 40px;background: url(../images/pipeline/box_model1.png) center center no-repeat;animation: thing1-1 2s linear 0s infinite both;background-size: 100%;}
.box_model1-2{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model1.png) center center no-repeat;animation: thing1-2 2s linear 0s infinite both;background-size: 100%;}
.box_model1-3{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-3 2s linear -1s infinite both;background-size: 100%;}
.box_model1-4{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-4 6s linear 0s infinite both;background-size: 100%;}
.box_model1-5{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-4 6s linear -1s infinite both;background-size: 100%;}
.box_model1-6{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-4 6s linear -1.8s infinite both;background-size: 100%;}
.box_model1-7{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-5 6s linear -2s infinite both;background-size: 100%;}
.box_model1-8{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-5 6s linear -2.8s infinite both;background-size: 100%;}
.box_model1-9{position: absolute;width: 34px;height: 34px;background: url(../images/pipeline/box_model3.png) center center no-repeat;animation: thing1-6 2s linear -1s infinite both;background-size: 100%;}
.box_model1-10{position: absolute;width: 34px;height: 34px;background: url(../images/pipeline/box_model2.png) center center no-repeat;animation: thing1-7 2s linear 0s infinite both;background-size: 100%;}
.box_model1-11{position: absolute;width: 46px;height: 46px;background: url(../images/pipeline/box_model3.png) center center no-repeat;animation: thing1-8 2s linear -1s infinite both;background-size: 100%;}
.box_model1-12{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model4.png) center center no-repeat;animation: thing1-9 2s linear 0s infinite both;background-size: 100%;}
/* .box_model1-13{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model4.png) center center no-repeat;animation: thing1-9 2s linear -1s infinite both;background-size: 100%;} */
.box_model1-14{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model4.png) center center no-repeat;animation: thing1-11 2s linear -1s infinite both;background-size: 100%;}
.box_model1-15{position: absolute;width: 36px;height: 36px;background: url(../images/pipeline/box_model3.png) center center no-repeat;animation: thing1-10 2s linear 0s infinite both;background-size: 100%;}

.confirm_child1{position: absolute;top: 312px;left: 464px;width: 8px;height: 8px;background: url(../images/pipeline/confirm_icon2.png) center center no-repeat;animation: confirm-1 2s linear 0s infinite both;background-size: 100%;}
.confirm_child2{position: absolute;top: 188px;left: 1203px;width: 6px;height: 6px;background: url(../images/pipeline/confirm_icon2.png) center center no-repeat;animation: confirm-1 2s linear 0s infinite both;background-size: 100%;}
.gdboy1{position: absolute;top: 216px;left: 256px;width: 40px;height: 90px;background: url(../images/pipeline/boy.png) center center no-repeat;background-size: 100%;}
.gdboy1_confirm{position: absolute;top: 16px;left: 24px;width: 10px;height: 10px;background: url(../images/pipeline/confirm_icon1.png) center center no-repeat;animation: confirm-1 2s linear 0s infinite both;background-size: 100%;}
.gdboy2{position: absolute;top: 340px;left: 796px;width: 40px;height: 90px;background: url(../images/pipeline/boy.png) center center no-repeat;background-size: 100%;}
.gdboy2_confirm{position: absolute;top: 16px;left: 24px;width: 10px;height: 10px;background: url(../images/pipeline/confirm_icon1.png) center center no-repeat;animation: confirm-1 2s linear 0s infinite both;background-size: 100%;}
.gdboy3{position: absolute;top: 266px;left: 964px;width: 40px;height: 90px;background: url(../images/pipeline/boy.png) center center no-repeat;background-size: 100%;}
.gdboy3_confirm{position: absolute;top: 16px;left: 24px;width: 10px;height: 10px;background: url(../images/pipeline/confirm_icon1.png) center center no-repeat;animation: confirm-1 2s linear 0s infinite both;background-size: 100%;}

.textroll_box1{position: absolute;top: 190px;left: 785px;transform: rotate3d(-8, 8, 2, 310deg);}
.textroll_box2{position: absolute;top: 120px;left: 955px;transform: rotate3d(-8, 8, 2, 310deg);}
.chevron{position: absolute;width: 80px;height: 16px;font-size: 12px;color: #9db9f6;opacity: 0;transform: scale3d(0.5, 0.5, 0.5);animation: textroll 9s linear infinite both;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.chevron:first-child{animation: textroll 9s linear 1.5s infinite both;}
.chevron:nth-child(2){animation: textroll 9s linear 3s infinite both;}
.chevron:nth-child(3){animation: textroll 9s linear 4.5s infinite both;}
.chevron:nth-child(4){animation: textroll 9s linear 6s infinite both;}
.chevron:nth-child(5){animation: textroll 9s linear 7.5s infinite both;}

.textroll_box1 .chevron:first-child{animation: textroll-2 12s linear 1.5s infinite both;}
.textroll_box1 .chevron:nth-child(2){animation: textroll-2 12s linear 3s infinite both;}
.textroll_box1 .chevron:nth-child(3){animation: textroll-2 12s linear 4.5s infinite both;}
.textroll_box1 .chevron:nth-child(4){animation: textroll-2 12s linear 6s infinite both;}
.textroll_box1 .chevron:nth-child(5){animation: textroll-2 12s linear 7.5s infinite both;}
.textroll_box1 .chevron:nth-child(6){animation: textroll-2 12s linear 9s infinite both;}
.textroll_box1 .chevron:nth-child(7){animation: textroll-2 12s linear 10.5s infinite both;}
.textroll_box1 .chevron:nth-child(8){animation: textroll-2 12s linear 0s infinite both;}

.hdp_box{position: absolute;top: 294px;left: 320px;width: 140px;height: 80px;}
.hdp_icon1{position: absolute;top: 46px;left: 10px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon1.png) center center no-repeat;animation: hdp-1 5s linear 0s infinite both;background-size: 100%;}
.hdp_icon2{position: absolute;top: 36px;left: 35px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon2.png) center center no-repeat;animation: hdp-2 5s linear -1s infinite both;background-size: 100%;}
.hdp_icon3{position: absolute;top: 25px;left: 59px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon3.png) center center no-repeat;animation: hdp-3 5s linear -2s infinite both;background-size: 100%;}
.hdp_icon4{position: absolute;top: 15px;left: 83px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon4.png) center center no-repeat;animation: hdp-4 5s linear -3s infinite both;background-size: 100%;}
.hdp_icon5{position: absolute;top: 5px;left: 106px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon5.png) center center no-repeat;animation: hdp-5 5s linear -4s infinite both;background-size: 100%;}
.ellipse{position: absolute;top: 370px;left: 540px;width: 60px;height: 40px;background: url(../images/pipeline/fdj.png) center center no-repeat;animation: ellipseMotion 4s linear 0s infinite both;background-size: 100%;}

.hdp_box{position: absolute;top: 294px;left: 320px;width: 140px;height: 80px;}
.hdp_icon1{position: absolute;top: 46px;left: 10px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon1.png) center center no-repeat;animation: hdp-1 5s linear 0s infinite both;background-size: 100%;}
.hdp_icon2{position: absolute;top: 36px;left: 35px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon2.png) center center no-repeat;animation: hdp-2 5s linear -1s infinite both;background-size: 100%;}
.hdp_icon3{position: absolute;top: 25px;left: 59px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon3.png) center center no-repeat;animation: hdp-3 5s linear -2s infinite both;background-size: 100%;}
.hdp_icon4{position: absolute;top: 15px;left: 83px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon4.png) center center no-repeat;animation: hdp-4 5s linear -3s infinite both;background-size: 100%;}
.hdp_icon5{position: absolute;top: 5px;left: 106px;width: 22px;height: 30px;background: url(../images/pipeline/hdpA_icon5.png) center center no-repeat;animation: hdp-5 5s linear -4s infinite both;background-size: 100%;}
.ellipse{position: absolute;top: 370px;left: 540px;width: 60px;height: 40px;background: url(../images/pipeline/fdj.png) center center no-repeat;animation: ellipseMotion 4s linear 0s infinite both;background-size: 100%;}

.guangzhao{position: absolute;top: 28px;left: 1400px;width: 170px;height: 160px;background: url(../images/pipeline/guangzhao.png) center center no-repeat;background-size: 100%;}
.nimad1{position: absolute;top: 76px;left: 94px;width: 20px;height: 20px;background: url(../images/pipeline/nimad1.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear 0s infinite both;}
.nimad2{position: absolute;top: 80px;left: 114px;width: 20px;height: 20px;background: url(../images/pipeline/nimad2.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.1s infinite both;}
.nimad3{position: absolute;top: 100px;left: 80px;width: 16px;height: 16px;background: url(../images/pipeline/nimad3.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.2s infinite both;}
.nimad4{position: absolute;top: 96px;left: 50px;width: 20px;height: 20px;background: url(../images/pipeline/nimad4.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.3s infinite both;}
.nimad5{position: absolute;top: 100px;left: 100px;width: 14px;height: 20px;background: url(../images/pipeline/nimad5.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.4s infinite both;}
.nimad6{position: absolute;top: 52px;left: 128px;width: 20px;height: 20px;background: url(../images/pipeline/nimad6.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.5s infinite both;}
.nimad7{position: absolute;top: 50px;left: 20px;width: 20px;height: 20px;background: url(../images/pipeline/nimad7.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.6s infinite both;}
.nimad8{position: absolute;top: 50px;left: 70px;width: 20px;height: 20px;background: url(../images/pipeline/nimad8.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.7s infinite both;}
.nimad9{position: absolute;top: 84px;left: 43px;width: 16px;height: 16px;background: url(../images/pipeline/nimad9.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.8s infinite both;}
.nimad10{position: absolute;top: 46px;left: 102px;width: 20px;height: 20px;background: url(../images/pipeline/nimad10.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -0.9s infinite both;}
.nimad11{position: absolute;top: 79px;left: 74px;width: 16px;height: 16px;background: url(../images/pipeline/nimad11.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -1s infinite both;}
.nimad12{position: absolute;top: 54px;left: 40px;width: 20px;height: 20px;background: url(../images/pipeline/nimad12.png) center center no-repeat;background-size: 100%;animation: guangzhao-1 2s linear -1.1s infinite both;}

@keyframes soundWaveAnimation {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
}
@keyframes soundWaveAnimation2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
}
@keyframes soundWaveAnimation3 {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
}
@keyframes thing1-0 {
    0% {
        transform: translate3d(500px, 230px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(420px, 262px, 0);
        opacity: 0
    }
}
@keyframes thing1-1 {
    0% {
        transform: translate3d(390px, 340px, 0)
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(440px, 356px, 0);
        opacity: 0
    }
}
@keyframes thing1-2 {
    0% {
        transform: translate3d(660px, 350px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(710px, 330px, 0);
        opacity: 0
    }
}
@keyframes thing1-3 {
    0% {
        transform: translate3d(720px, 350px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(686px, 364px, 0);
        opacity: 0
    }
}
@keyframes thing1-4 {
    0% {
        transform: translate3d(660px, 450px, 0);
    }
    30% {
        transform: translate3d(750px, 500px, 0);
    }
    90% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1060px,350px, 0);
        opacity: 0
    }
}
@keyframes thing1-5 {
    0% {
        transform: translate3d(810px,340px, 0);
    }
    50% {
        transform: translate3d(940px,414px, 0);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: translate3d(1060px,350px, 0);
        opacity: 0;
    }
}
@keyframes thing1-6 {
    0% {
        transform: translate3d(974px, 260px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1040px, 294px, 0);
        opacity: 0
    }
}
@keyframes thing1-7 {
    0% {
        transform: translate3d(1026px, 306px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(950px, 270px, 0);
        opacity: 0
    }
}
@keyframes thing1-8 {
    0% {
        transform: translate3d(1190px, 300px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1240px, 270px, 0);
        opacity: 0
    }
}
@keyframes thing1-9 {
    0% {
        transform: translate3d(1372px, 230px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1410px, 210px, 0);
        opacity: 0
    }
}
@keyframes thing1-10 {
    0% {
        transform: translate3d(1204px, 224px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1140px, 200px, 0);
        opacity: 0
    }
}
@keyframes thing1-11 {
    0% {
        transform: translate3d(1160px,190px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(1220px, 210px, 0);
        opacity: 0
    }
}
@keyframes confirm-1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes textroll {
    0% {
        transform: translateY(90px);
        opacity: 0;
    }
    16% {
        opacity: 1;
        transform: translateY(75px);
    }
    32% {
        color: #9db9f6;
        opacity: 1;
        transform: translateY(60px);
    }
    48% {
        color: #fff;
        opacity: 1;
        transform: translateY(45px);
    }
    64% {
        color: #9db9f6;
        opacity: 1;
        transform: translateY(30px);
      }
    80% {
        opacity: 1;
        transform: translateY(15px);
    }
    100% {
        opacity: 0;
        transform: translateY(0px);
    }
}
@keyframes textroll-2 {
    0% {
        transform: translateY(120px);
        opacity: 0;
    }
    12.5% {
        opacity: 1;
        transform: translateY(105px);
    }
    25% {
        opacity: 1;
        transform: translateY(90px);
    }
    37.5% {
        color: #9db9f6;
        opacity: 1;
        transform: translateY(75px);
    }
    50% {
        color: #fff;
        opacity: 1;
        transform: translateY(60px);
      }
    62.5% {
        color: #9db9f6;
        opacity: 1;
        transform: translateY(45px);
    }
    75% {
        opacity: 1;
        transform: translateY(30px);
    }
    87.5% {
        opacity: 1;
        transform: translateY(15px);
    }
    100% {
        opacity: 0;
        transform: translateY(0px);
    }
}
@keyframes hdp-1 {
    0% {
        background: url(../images/pipeline/hdpA_icon1.png) center center no-repeat;
        background-size: 100%;
    }

    to {
        background: url(../images/pipeline/hdpB_icon1.png) center center no-repeat;
        background-size: 100%;
    }
}
@keyframes hdp-2 {
    0% {
        background: url(../images/pipeline/hdpA_icon2.png) center center no-repeat;
        background-size: 100%;
    }

    to {
        background: url(../images/pipeline/hdpB_icon2.png) center center no-repeat;
        background-size: 100%;
    }
}
@keyframes hdp-3 {
    0% {
        background: url(../images/pipeline/hdpA_icon3.png) center center no-repeat;
        background-size: 100%;
    }

    to {
        background: url(../images/pipeline/hdpB_icon3.png) center center no-repeat;
        background-size: 100%;
    }
}
@keyframes hdp-4 {
    0% {
        background: url(../images/pipeline/hdpA_icon4.png) center center no-repeat;
        background-size: 100%;
    }

    to {
        background: url(../images/pipeline/hdpB_icon4.png) center center no-repeat;
        background-size: 100%;
    }
}
@keyframes hdp-5 {
    0% {
        background: url(../images/pipeline/hdpA_icon5.png) center center no-repeat;
        background-size: 100%;
    }

    to {
        background: url(../images/pipeline/hdpB_icon5.png) center center no-repeat;
        background-size: 100%;
    }
}
@keyframes ellipseMotion {
    0% {
        transform: translateX(-50%) translateY(-50%);
    }
    25% {
        transform: translateX(50%) translateY(-50%);
    }
    50% {
        transform: translateX(50%) translateY(50%);
    }
    75% {
        transform: translateX(-50%) translateY(50%);
    }
    100% {
        transform: translateX(-50%) translateY(-50%);
    }
}
@keyframes guangzhao-1 {
    0% {
        transform: translate3d(0px, 20px, 0);
    }
    80% {
        opacity: 0.8
    }
    100% {
        transform: translate3d(0px, 0px, 0);
        opacity: 0
    }
}