@charset "utf-8";
/* CSS Document */

@media (max-width:800px) {
.live_up{ width:20px !important; height:20px !important;}
.live{ width:20px !important; height:20px !important;}
.live span{width:20px !important; height:20px !important;}

.ani{width:100px !important; height:23px !important;}
}
		
.live_up{ width: 30px; height: 30px; position:absolute; top:0; left:0; z-index:9 !important;}

.live{
           position: relative; width: 30px;
           height: 30px;
       }
       .live img{ width: 30px;
           height: 30px;
           z-index: 0;
       }
        @keyframes living {
            0%{
                transform: scale(1);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.5);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform: scale(1);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute; width: 30px;
           height: 30px;
            left: 0;
            bottom: 0;
            background: #b3d3e0;
            border-radius: 50%;
            -webkit-animation: living 3s linear infinite;
            z-index:0;
        }
        .live span:nth-child(2){
            -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
        }



.ani {
  animation-name: example; width:145px; height:33px; margin:-1px 0 0 -2px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.2)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.2));}
  16%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.4)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.4));}
  32%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.6)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.6));}
  48%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.8)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.8));}
  64%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.6)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.6));}
  80%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.4)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.4));}
  100%  {-webkit-filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.3)),;
    filter: drop-shadow(2px 2px 3px rgba(180, 210, 225, 0.3));}
}