.the-title{height:40px;width:100%}.the-title .ivu-card-body{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-box-pack:justify;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;justify-content:space-between}.the-title .ivu-card-body .left{-webkit-margin-start:20px;font-family:Arial,sans-serif;font-size:16px;font-weight:bolder;margin-inline-start:20px}.the-title .ivu-card-body .right{-webkit-margin-end:20px;margin-inline-end:20px}.flex-center[data-v-7ec18cd6]{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.video-box[data-v-7ec18cd6]{bottom:0;left:0;position:absolute;right:0;top:0;z-index:2}.parse[data-v-7ec18cd6]{background:rgba(0,0,0,.5)}.parse svg[data-v-7ec18cd6]{-webkit-transform:translate(-50%,-50%);color:#fff!important;cursor:pointer;height:20%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20%}.videoplay[data-v-7ec18cd6]{background:#000;color:#fff;height:100%;overflow:hidden;position:relative;width:100%}.videoplay.big video[data-v-7ec18cd6]{-o-object-fit:contain;object-fit:contain}.videoplay video[data-v-7ec18cd6]{-o-object-fit:fill;height:100%!important;object-fit:fill;width:100%!important}.control[data-v-7ec18cd6]:hover,.parse:hover~.control[data-v-7ec18cd6],.videoplay:hover .control[data-v-7ec18cd6]{display:-webkit-box;display:-ms-flexbox;display:flex}.control[data-v-7ec18cd6]{-webkit-transition:display 2s;background:rgba(0,0,0,.6);bottom:0;display:none;left:0;padding:10px 5%;position:absolute;right:0;transition:display 2s;z-index:3}.control svg[data-v-7ec18cd6]:first-child{-webkit-margin-end:auto;-webkit-margin-start:0;margin-inline-end:auto;margin-inline-start:0}.big .control svg[data-v-7ec18cd6]{height:25px;width:25px}.control svg[data-v-7ec18cd6]{-webkit-filter:grayscale(50%);-webkit-margin-start:30px;cursor:pointer;filter:grayscale(50%);height:15px;margin-inline-start:30px;opacity:1;width:15px}.control svg[data-v-7ec18cd6]:hover{opacity:1}.container-loading[data-v-7ec18cd6]{height:50px;position:relative;width:50px}.container-loading.animation-4[data-v-7ec18cd6],.container-loading.animation-5[data-v-7ec18cd6]{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.container-loading .shape[data-v-7ec18cd6]{border-radius:1px;position:absolute}.container-loading.animation-5 .shape[data-v-7ec18cd6]{height:50%;width:50%}.container-loading .shape.shape1[data-v-7ec18cd6]{background-color:#5c6bc0;left:0}.container-loading .shape.shape2[data-v-7ec18cd6]{background-color:#8bc34a;right:0}.container-loading .shape.shape3[data-v-7ec18cd6]{background-color:#ffb74d;bottom:0}.container-loading .shape.shape4[data-v-7ec18cd6]{background-color:#f44336;bottom:0;right:0}.animation-5 .shape1[data-v-7ec18cd6]{animation:animation5shape1-data-v-7ec18cd6 2s ease 0s infinite reverse}@-webkit-keyframes animation5shape1-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translateY(100%);transform:translateY(100%)}50%{-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}75%{-webkit-transform:translate(100%);transform:translate(100%)}}@keyframes animation5shape1-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translateY(100%);transform:translateY(100%)}50%{-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}75%{-webkit-transform:translate(100%);transform:translate(100%)}}.animation-5 .shape2[data-v-7ec18cd6]{animation:animation5shape2-data-v-7ec18cd6 2s ease 0s infinite reverse}@-webkit-keyframes animation5shape2-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translate(-100%);transform:translate(-100%)}50%{-webkit-transform:translate(-100%,100%);transform:translate(-100%,100%)}75%{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes animation5shape2-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translate(-100%);transform:translate(-100%)}50%{-webkit-transform:translate(-100%,100%);transform:translate(-100%,100%)}75%{-webkit-transform:translateY(100%);transform:translateY(100%)}}.animation-5 .shape3[data-v-7ec18cd6]{animation:animation5shape3-data-v-7ec18cd6 2s ease 0s infinite reverse}@-webkit-keyframes animation5shape3-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translate(100%);transform:translate(100%)}50%{-webkit-transform:translate(100%,-100%);transform:translate(100%,-100%)}75%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes animation5shape3-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translate(100%);transform:translate(100%)}50%{-webkit-transform:translate(100%,-100%);transform:translate(100%,-100%)}75%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.animation-5 .shape4[data-v-7ec18cd6]{animation:animation5shape4-data-v-7ec18cd6 2s ease 0s infinite reverse}@-webkit-keyframes animation5shape4-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}50%{-webkit-transform:translate(-100%,-100%);transform:translate(-100%,-100%)}75%{-webkit-transform:translate(-100%);transform:translate(-100%)}}@keyframes animation5shape4-data-v-7ec18cd6{0%{-webkit-transform:translate(0);transform:translate(0)}25%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}50%{-webkit-transform:translate(-100%,-100%);transform:translate(-100%,-100%)}75%{-webkit-transform:translate(-100%);transform:translate(-100%)}}.changecodemodal[data-v-7cc059d6] .ivu-modal-body{padding:0}.p-a[data-v-7cc059d6]{bottom:0;left:0;position:absolute;right:0;top:0}.monitor-list .left[data-v-7cc059d6]{display:-webkit-box;display:-ms-flexbox;display:flex}.monitor-list .left .play-camera-content[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;flex:1}.monitor-list .left .play-camera-content .h264-warpper[data-v-7cc059d6]{-ms-flex-align:stretch;-webkit-box-align:stretch;align-items:stretch;display:grid;grid-gap:20px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:100%;justify-items:stretch}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper[data-v-7cc059d6]{height:100%;position:relative;width:100%}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-realbox[data-v-7cc059d6]{-ms-flex-align:stretch;-ms-flex-direction:column;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title[data-v-7cc059d6]{-ms-flex-align:center;-ms-flex-negative:0;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-box-pack:justify;align-items:center;background:#000;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;font-size:14px;height:32px;justify-content:space-between;line-height:32px;margin-bottom:2px;padding-left:10px;width:100%}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title>span[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title>view[data-v-7cc059d6]{-ms-flex-negative:0;-webkit-margin-start:10px;flex-shrink:0;margin-inline-start:10px}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper[data-v-7cc059d6]{cursor:pointer;padding:0;position:relative}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper>div[data-v-7cc059d6]:first-child{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 20px}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper i[data-v-7cc059d6]{-webkit-transition:all .5s;font-size:16px;font-weight:700;transition:all .5s}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper[data-v-7cc059d6]:hover{background:#353535}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper:hover i[data-v-7cc059d6]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper:hover .stream-list[data-v-7cc059d6]{display:initial;height:auto}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper .stream-list[data-v-7cc059d6]{-webkit-transition:all 2s;background:#353535;height:0;opacity:.9;overflow:hidden;position:absolute;top:100%;transition:all 2s;width:100%;z-index:100}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper .stream-list .stream-item[data-v-7cc059d6]{font-size:16px;padding:0 20px;position:relative}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper .stream-list .stream-item[data-v-7cc059d6]:hover{color:#61bef4}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper .stream-list .stream-item[data-v-7cc059d6]:first-child{border-top:2px solid #626365}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-title .stream-wapper .stream-list .stream-item[data-v-7cc059d6]:first-child:after{-webkit-transform:translateX(-50%);background:#ccc;bottom:0;content:" ";height:1px;left:50%;position:absolute;transform:translateX(-50%);width:70%}.monitor-list .left .play-camera-content .h264-warpper .camera-warpper .camera-body[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;flex:1;position:relative}.monitor-list .left .choose-camera-warpper[data-v-7cc059d6]{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-pack:justify;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-box-pack:justify;-webkit-margin-start:20px;align-items:stretch;color:#a9a9a9;display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:20px;width:150px}.monitor-list .left .choose-camera-warpper>div[data-v-7cc059d6]{background:#eee;width:100%}.monitor-list .left .choose-camera-warpper .choose-bottom[data-v-7cc059d6],.monitor-list .left .choose-camera-warpper .choose-top[data-v-7cc059d6]{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:35px;justify-content:center}.monitor-list .left .choose-camera-warpper .choose-bottom[data-v-7cc059d6]:hover,.monitor-list .left .choose-camera-warpper .choose-top[data-v-7cc059d6]:hover{background:#eeeee0;cursor:pointer}.monitor-list .left .choose-camera-warpper .choose-bottom svg[data-v-7cc059d6],.monitor-list .left .choose-camera-warpper .choose-top svg[data-v-7cc059d6]{height:23px;width:23px}.monitor-list .left .choose-camera-warpper .choose-content[data-v-7cc059d6]::-webkit-scrollbar{width:0}.monitor-list .left .choose-camera-warpper .choose-content[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;background:transparent;flex:1;margin:10px 0;overflow:auto}.monitor-list .left .choose-camera-warpper .choose-content .item[data-v-7cc059d6]{-moz-user-select:none;-ms-flex-align:center;-ms-flex-pack:center;-ms-user-select:none;-webkit-box-align:center;-webkit-box-pack:center;-webkit-user-select:none;align-items:center;background:#ebebeb;border:1px solid;border-radius:5px;color:#a9a9a9;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:18px;height:45px;justify-content:center;margin-bottom:10px;position:relative;user-select:none;width:100%}.monitor-list .left .choose-camera-warpper .choose-content .item[data-v-7cc059d6]:hover{border-width:2px}.monitor-list .left .choose-camera-warpper .choose-content .item.active[data-v-7cc059d6]{border-width:4px;color:#00abfe;font-weight:700}.monitor-list .left .choose-camera-warpper .choose-content .item.active[data-v-7cc059d6]:before{-webkit-transform:translate(-50%,-50%);border:10px solid transparent;border-left:15px solid;border-radius:3px;border-right:0;content:"";left:28px;position:absolute;top:50%;transform:translate(-50%,-50%)}.monitor-list[data-v-7cc059d6]{height:100%;width:100%}.monitor-list .btns[data-v-7cc059d6]{display:-webkit-box;display:-ms-flexbox;display:flex}.monitor-list .btns>.item[data-v-7cc059d6]{-webkit-margin-end:-20px;-webkit-margin-start:40px;background:#ccc;border-radius:5px;color:#fff;cursor:pointer;margin-inline-end:-20px;margin-inline-start:40px;padding:5px 20px}.monitor-list .btns>.item.active[data-v-7cc059d6]{background:#00acff}.monitor-list .content[data-v-7cc059d6]{-ms-flex-pack:justify;-webkit-box-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;height:calc(100% - 40px);justify-content:space-between;padding:20px;width:100%}.monitor-list .content .left[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;flex:1;height:100%;overflow-y:auto}.monitor-list .content .left .items[data-v-7cc059d6]{border:1px solid #456;float:left;height:40%;margin-bottom:1.25%;width:32.5%}.monitor-list .content .left .items[data-v-7cc059d6]:nth-child(3n+1),.monitor-list .content .left .items[data-v-7cc059d6]:nth-child(3n+2){-webkit-margin-end:1.25%;margin-inline-end:1.25%}.monitor-list .content .left .items-title[data-v-7cc059d6]{background:#000;color:#fff;font-size:14px;height:32px;line-height:32px;margin-bottom:2px;padding-left:10px;width:100%}.monitor-list .content .left .items-content[data-v-7cc059d6]{background:#000;height:calc(100% - 34px);width:100%}.monitor-list .content .left .items-content video[data-v-7cc059d6]{height:100%;width:100%}.monitor-list .content .big[data-v-7cc059d6]{-ms-flex:1;-webkit-box-flex:1;flex:1;height:100%}.monitor-list .content .big-title[data-v-7cc059d6]{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-box-pack:justify;align-items:center;background:#000;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;height:32px;justify-content:space-between;margin-bottom:2px;padding:0 10px;width:100%}.monitor-list .content .big-title .back[data-v-7cc059d6]{border:2px solid #eee;border-radius:3px;cursor:pointer;padding:1px 5px}.monitor-list .content .big-title .back[data-v-7cc059d6]:hover{border:2px solid #f60;color:#f60}.monitor-list .content .big-content[data-v-7cc059d6]{background:#000;height:calc(100% - 34px);width:100%}.monitor-list .content .big-content video[data-v-7cc059d6]{height:100%;width:100%}.monitor-list .content .right[data-v-7cc059d6]{-webkit-margin-start:20px;height:100%;margin-inline-start:20px;width:170px}.monitor-list .content .right .list[data-v-7cc059d6]{-webkit-box-shadow:1px 3px 3px #ccc,-1px -1px 1px #ccc;box-shadow:1px 3px 3px #ccc,-1px -1px 1px #ccc;height:calc(100% - 340px);margin-bottom:20px;width:100%}.monitor-list .content .right .list-title[data-v-7cc059d6]{background:#eee;color:#777;font-size:14px;height:32px;line-height:32px;padding-left:10px;width:100%}.monitor-list .content .right .list-list[data-v-7cc059d6]{height:calc(100% - 32px);overflow-y:auto;width:100%}.monitor-list .content .right .list-list div[data-v-7cc059d6]{cursor:pointer;font-size:14px;overflow-x:hidden;padding:3px 10px;text-overflow:ellipsis;white-space:nowrap;width:100%}.monitor-list .content .right .list-list div.active[data-v-7cc059d6],.monitor-list .content .right .list-list div[data-v-7cc059d6]:hover{background:#eee;color:#00acff}.monitor-list .content .right .control[data-v-7cc059d6]{-webkit-box-shadow:1px 3px 3px #ccc,-1px -1px 1px #ccc;background:#fff;box-shadow:1px 3px 3px #ccc,-1px -1px 1px #ccc;height:320px}.monitor-list .content .right .control-title[data-v-7cc059d6]{background:#eee;color:#777;font-size:14px;height:32px;line-height:32px;padding-left:10px;width:100%}.monitor-list .content .right .control-order[data-v-7cc059d6]{height:150px;margin:8px auto;width:150px}.monitor-list .content .right .control-order div[data-v-7cc059d6]{-ms-flex-pack:distribute;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.monitor-list .content .right .control-order div span[data-v-7cc059d6]{border:1px solid #999;color:#999;cursor:pointer;display:inline-block;font-size:24px;height:30%;line-height:45px;text-align:center;width:30%}.monitor-list .content .right .control-order div span[data-v-7cc059d6]:active{color:#00acff}.monitor-list .content .right .control-other[data-v-7cc059d6]{-ms-flex-pack:distribute;-ms-flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:space-around;margin:0 auto 10px;width:150px}.monitor-list .content .right .control-other>div[data-v-7cc059d6]{text-align:center;width:30%}.monitor-list .content .right .control-other>div>div[data-v-7cc059d6]{border:1px solid #999;height:45px;line-height:45px;width:100%}.monitor-list .content .right .control-other>div>div span[data-v-7cc059d6]{color:#999;cursor:pointer;display:inline-block;font-size:20px;height:100%;width:100%}.monitor-list .content .right .control-other>div>div span[data-v-7cc059d6]:active{color:#00acff}.monitor-list .content .right .control-other>div>span[data-v-7cc059d6]{font-size:14px}