.mains{padding:400px 0;height:100%}/deep/ .el-loading-spinner .el-icon-loading{font-size:50px}.breadcrumb{padding:15px 10px}.breadcrumb .el-breadcrumb{font-size:18px}.wrapper-config{height:100%;position:relative}.config-title{width:100%;box-sizing:border-box;text-align:center;line-height:50px;font-size:26px;margin-top:20px;top:0}.config-title,.main-pipeline{height:50px;position:absolute;left:0}.main-pipeline{width:1400px;border:1px solid #0062a3;background:#fff;border-radius:30px;top:100px;right:0;margin:auto;overflow:hidden}.water-group{position:relative}.water{top:-20px;left:0;background-image:linear-gradient(-180deg,#8ad2ec 13%,#238acf 91%);border-radius:50% 100% 40% 60%}.water,.water-mask{width:100px;height:100px;position:absolute}.water-mask{top:-22px;left:20px;border-radius:40%;background-color:hsla(0,0%,100%,.9);transform:translate(-50%,-70%) rotate(0);-webkit-animation:toRotate 10s linear -5s infinite;animation:toRotate 10s linear -5s infinite;z-index:20;pointer-events:none}.water-group:nth-child(2){left:6%}.water-group:nth-child(2) .water-mask{-webkit-animation:toRotate 15s linear -8s infinite;animation:toRotate 15s linear -8s infinite}.water-group:nth-child(3){left:12%}.water-group:nth-child(3) .water-mask{-webkit-animation:toRotate 10s linear -6s infinite;animation:toRotate 10s linear -6s infinite}.water-group:nth-child(4){left:18%}.water-group:nth-child(4) .water-mask{-webkit-animation:toRotate 13s linear -5s infinite;animation:toRotate 13s linear -5s infinite}.water-group:nth-child(5){left:24%}.water-group:nth-child(5) .water-mask{-webkit-animation:toRotate 8s linear -2s infinite;animation:toRotate 8s linear -2s infinite}.water-group:nth-child(6){left:30%}.water-group:nth-child(6) .water-mask{-webkit-animation:toRotate 10s linear -6s infinite;animation:toRotate 10s linear -6s infinite}.water-group:nth-child(7){left:36%}.water-group:nth-child(7) .water-mask{-webkit-animation:toRotate 15s linear -8s infinite;animation:toRotate 15s linear -8s infinite}.water-group:nth-child(8){left:42%}.water-group:nth-child(8) .water-mask{-webkit-animation:toRotate 8s linear -2s infinite;animation:toRotate 8s linear -2s infinite}.water-group:nth-child(9){left:48%}.water-group:nth-child(9) .water-mask{-webkit-animation:toRotate 10s linear -6s infinite;animation:toRotate 10s linear -6s infinite}.water-group:nth-child(10){left:54%}.water-group:nth-child(10) .water-mask{-webkit-animation:toRotate 15s linear -8s infinite;animation:toRotate 15s linear -8s infinite}.water-group:nth-child(11){left:60%}.water-group:nth-child(11) .water-mask{-webkit-animation:toRotate 13s linear -5s infinite;animation:toRotate 13s linear -5s infinite}.water-group:nth-child(12){left:66%}.water-group:nth-child(12) .water-mask{-webkit-animation:toRotate 15s linear -4s infinite;animation:toRotate 15s linear -4s infinite}.water-group:nth-child(13){left:72%}.water-group:nth-child(13) .water-mask{-webkit-animation:toRotate 10s linear -6s infinite;animation:toRotate 10s linear -6s infinite}.water-group:nth-child(14){left:78%}.water-group:nth-child(14) .water-mask{-webkit-animation:toRotate 12s linear -2s infinite;animation:toRotate 12s linear -2s infinite}.water-group:nth-child(15){left:84%}.water-group:nth-child(15) .water-mask{-webkit-animation:toRotate 16s linear -7s infinite;animation:toRotate 16s linear -7s infinite}.water-group:nth-child(16){left:90%}.water-group:nth-child(16) .water-mask{-webkit-animation:toRotate 9s linear -5s infinite;animation:toRotate 9s linear -5s infinite}.water-group:nth-child(17){left:96%}.water-group:nth-child(17) .water-mask{-webkit-animation:toRotate 7s linear -3s infinite;animation:toRotate 7s linear -3s infinite}@-webkit-keyframes toRotate{50%{transform:translate(-50%,-70%) rotate(180deg)}to{transform:translate(-50%,-70%) rotate(1turn)}}@keyframes toRotate{50%{transform:translate(-50%,-70%) rotate(180deg)}to{transform:translate(-50%,-70%) rotate(1turn)}}.branch{display:flex;justify-content:space-evenly;padding-top:151px}.branch-pipeline{border:1px solid #0062a3}.branch-pipeline,.dotted-con{width:30px;height:550px;position:relative}.dotted-con{overflow:hidden}.dotted-line{width:10px;height:1000px;background-image:linear-gradient(#007da7 25%,hsla(0,0%,100%,0) 0);background-position:0;background-size:5px 40px;background-repeat:repeat-y;position:absolute;top:0;left:13px;z-index:0;-webkit-animation:animations 3s linear infinite normal;animation:animations 3s linear infinite normal}.dotted-line-running{-webkit-animation-play-state:running;animation-play-state:running}.dotted-line-paused{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes animations{0%{transform:translate3d(0,-240px,0)}to{transform:translateZ(0)}}@keyframes animations{0%{transform:translate3d(0,-240px,0)}to{transform:translateZ(0)}}.water-pump-unit{width:90px;height:40px;border:1px solid #5f95ff;background:#eff4ff;position:absolute;top:150px;left:60px;text-align:center;line-height:40px;border-radius:5px;padding:0 10px}.lines1{width:30px;height:1px;background:#c2c8d5;position:absolute;top:170px;left:31px}.branch-icon{position:absolute;top:104px;left:-100px;z-index:1;font-size:150px;color:#0062a3}.electric-valvet{width:90px;height:40px;border:1px solid #5f95ff;background:#eff4ff;position:absolute;top:300px;left:60px;text-align:center;line-height:40px;border-radius:5px;padding:0 10px;cursor:pointer;transition:all .3s ease}.electric-valvet:hover{background:#5f95ff;color:#fff}.lines2{width:30px;height:1px;background:#c2c8d5;position:absolute;top:320px;left:31px}.famen-icon{position:absolute;top:308px;left:3px;font-size:25px;color:#13ce66;transform:rotate(90deg);transition:all .5s ease;background:#fff;border-radius:50%}.famen-icon-rotate{color:#ff4949;transform:rotate(0deg)}.lines3{width:1px;height:58px;background:#c2c8d5;top:342px;left:115px}.control,.lines3{position:absolute}.control{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:120px;height:40px;border:1px solid #d3d8e1;border-left:0;background:#fff;top:400px;left:60px;display:flex;align-items:center;border-radius:4px;overflow:hidden;box-shadow:0 2px 5px 1px rgba(0,0,0,.06)}.left-mark{display:inline-block;width:4px;height:100%;background:#13ce66}.left-mark-close{background:#ff4949}.control-icon{display:inline-block;width:18px;height:18px;font-size:18px;margin-left:6px;margin-top:2px;padding-left:2px;line-height:20px;transform:rotate(0deg);transition:all .3s ease}.control-icon:hover{transform:rotate(180deg)}.control-con{margin-left:16px}.switch-text{font-size:14px;color:#333;margin-left:10px}.popover-title{font-weight:700}.popover-label:before{content:"";display:inline-block;width:3px;height:10px;background:#0062a3;margin-right:5px}