.xl-fence-wrapper{overflow:hidden;width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}.xl-fence-wrapper .xl-fence-label{position:absolute;top:0;left:0;transform:translate3d(-50%,-100%,0);display:none}.xl-fence-wrapper .xl-fence-label .content{background-color:#000c;border:4px solid #bf1f1a;line-height:24px;color:#fff;padding:8px;box-sizing:border-box;white-space:nowrap;border-radius:5px}.xl-fence-wrapper .xl-fence-label .triangle{display:flex;justify-content:center;margin-top:4px}.xl-fence-wrapper .xl-fence-label .triangle span{display:block;width:0;height:0;opacity:.8;border-top:60px solid #bf1f1a;border-right:15px solid transparent;border-left:15px solid transparent;animation:moveDownUp 2s infinite ease-out}.xl-fence-wrapper .xl-fence-label:hover{z-index:999}@keyframes moveDownUp{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}.xl-camera-wrapper{overflow:hidden;width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}.xl-camera{position:absolute}.xl-camera .alarm-container{z-index:900;position:absolute;top:0;left:0;transform:translate3d(-50%,-100%,0);padding-bottom:45px}.xl-camera .alarm-container:hover{z-index:999}.xl-camera .fence-label{background-color:#000c;border:2px solid #bf1f1a;line-height:24px;color:#fff;padding:8px;box-sizing:border-box;white-space:nowrap;border-radius:5px;display:none}.xl-camera .xl-video-container{display:none;position:relative;pointer-events:auto}.xl-camera .xl-video-container .video-box{width:100%;height:calc(100% - 24px);background:rgba(0,0,0,.5);position:absolute;top:24px;color:#ccc}.xl-camera .xl-video-container .header{top:0;position:absolute;line-height:24px;font-size:14px;width:100%;height:24px;background-color:#000c;color:#fff;left:0;box-sizing:border-box}.xl-camera .xl-video-container .header .btn{margin-right:8px;float:right;cursor:pointer}.xl-camera .xl-video-container .header .btn:hover{color:#2182af}.xl-camera .xl-video-container video{width:100%;height:100%}.xl-camera .xl-camera-label{transform:translate3d(-50%,-100%,0);cursor:pointer;pointer-events:auto}.xl-camera .xl-camera-label .title{background-color:#00000080;border:2px solid #1c97cf;color:#fff;height:24px;line-height:24px;font-size:16px;padding:0 8px;white-space:nowrap;transition:all .4s ease}.xl-camera .xl-camera-label div{text-align:center;padding-top:4px}.xl-camera .xl-camera-label img{width:40px}.xl-camera .xl-camera-label:hover .title{color:#1c97cf;margin-bottom:4px}.xl-camera .xl-camera-label[disabled] .title{color:gray;border:2px solid #808080}.xl-wander-wrapper{position:absolute;right:10px;top:0;width:320px;height:780px}.xl-wander-wrapper .title{line-height:24px;font-size:14px;color:#fff;padding:0 4px;border-bottom:1px solid #ccc}.xl-wander-wrapper .xl-wander-path{background:rgba(0,0,0,.5);width:100%;height:200px}.xl-wander-wrapper .xl-wander-path canvas{width:100%;height:176px}.xl-wander-wrapper .xl-wander-video-container{position:absolute;width:100%;height:280px;transition:all 1s ease-in-out;background:rgba(0,0,0,.5);left:0}.xl-wander-wrapper .xl-wander-video-container .video-box{width:100%;aspect-ratio:1.25;color:#fff}.xl-wander-wrapper .xl-wander-video-container .video-box video{width:100%}.xl-wander-wrapper .xl-wander-video-container[status=invisible]{top:500px;visibility:hidden}.xl-wander-wrapper .xl-wander-video-container[status=top]{top:210px}.xl-wander-wrapper .xl-wander-video-container[status=bottom]{top:500px}.xl-wander-wrapper .xl-wander-video-container[status=remove]{top:210px;transform:translate3d(-100%,0,0)}