.list-grid{display:grid;grid-template-columns:calc(160px *  var(--device)) auto;}

.list-grid-left .item{color:#7d7d7d;}
.list-grid-left .item.atc{color:#000; background:#fff; font-weight:bold; position:relative;}
.list-grid-left .item.atc:before{content:""; position:absolute; left:0; border-radius:calc(6px *  var(--device)); width:calc(6px *  var(--device)); height:calc(60px *  var(--device)); top:calc(50% - 30px *  var(--device));}
.list-grid-left .item:nth-child(5n+1).atc:before{background:var(--blue)}
.list-grid-left .item:nth-child(5n+2).atc:before{background:var(--purple)}
.list-grid-left .item:nth-child(5n+3).atc:before{background:var(--pink)}
.list-grid-left .item:nth-child(5n+4).atc:before{background:var(--green)}
.list-grid-left .item:nth-child(5n).atc:before{background:var(--orange)}



.Html-list .item{position:relative;}
.Html-list .item-img{position:relative;width:calc(160px *  var(--device)); height:calc(120px *  var(--device));}
.Html-list .item-img img{position:absolute; top:0; left:0;width:100%; height:100%;object-fit:contain;}

.Html-list .item-tag{border-radius:calc(30px *  var(--device)); position:absolute; z-index:2; color:#fff; top:calc(-12px *  var(--device)); left:calc(-10px *  var(--device));}
/*.Html-list .item-tag:before{ border-top-width: 15px; border-top-style:solid;  position:absolute;  content:"";top:calc(34px *  var(--device)); left:0; width: 0;  height: 0;  border-left: 10px solid transparent;*/ /* 左边框透明 */  /*border-bottom: 10px solid transparent;*/ /* 右边框透明 *//*}*/
.Html-list .item-tag-blue{background:var(--blue); }
.Html-list .item-tag-blue:before{border-top-color:var(--blue); }
.Html-list .item-tag-green{background:var(--green); }
.Html-list .item-tag-green:before{border-top-color:var(--green); }
.Html-list .item-tag-orange{background:var(--orange); }
.Html-list .item-tag-orange:before{border-top-color:var(--orange); }
.Html-list .item-tag-purple{background:var(--purple); }
.Html-list .item-tag-purple:before{border-top-color:var(--purple); }
.Html-list .item-tag-pink{background:var(--pink); }
.Html-list .item-tag-pink:before{border-top-color:var(--pink); }




@keyframes shake {
  0%, 100% {
   transform: translate(0, 0);
  }
 10%, 30%, 50%, 70%, 90% {
    transform: translateY(-2px);
  }
  20%, 40%,60%, 80% {
    transform: translateY(2px);
  }
}
.shockTag {
  animation: shake 6s cubic-bezier(.36,.07,.19,.97)  infinite;
  transform-origin: center center;
}

/*.item-tag.delay-1{
animation-delay: 0.1s;
}
.item-tag.delay-2{
animation-delay: 0.2s;
}
.item-tag.delay-3{
animation-delay: 0.3s;
}
.item-tag.delay-4{
animation-delay: 0.4s;
}
.item-tag.delay-5{
animation-delay: 0.5s;
}*/