li {
      margin-top: 16px;
      margin-bottom: 1px;
      width: 140px;
    }
    .img-items {
      position: relative;
      font-size: 14px;
    }
    a {
      position: relative;
      display: block;
      color: #262626;
      overflow: hidden;
      text-decoration: none;
    }
    a:hover {
      color: #90080e;
      text-decoration: none;
    }
    a:hover h4 {
      color: #90080e;
    }
    .img-item {
      position: relative;
      overflow: hidden;
    }
    .img-item::before {
      display: block;
      content: '';
      padding-top: 66.66666666666666%;
    }

    .img-item-new {
      height: 140px;
      margin-bottom: 10px;
    }
    .img-item-new::before {
      display: block;
      content: '';
      padding-top: 46.66666666666667%;
    }
    .img-item-newBlock:hover img {
      -webkit-transform: scale(1)!important;
      transform: scale(1)!important;
    }
    .img-item-newBlock:hover, .img-item-newBlock:hover h4 {
      color:#262626;
    }

    .img-item img,
    .img-item .img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      /* height: 100%; */
      min-height: 100%;
      object-fit: cover;
      -webkit-transition: all 0.6s ease-in;
      transition: all 0.6s ease-in;
    }
    .txt-item {
      position: relative;
      padding-top: 4px;
    }
    h4 {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: #262626;
      font-weight: 400;
      max-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-word;
    }
    h5 {
      display: block;
      font-size: 12px;
      line-height: 1.5;
      color: #8c8c8c;
      font-weight: 400;
      max-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-word;
      max-height: 42px;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .img-item i {
      font-size: 32px;
      line-height: 40px;
      display: none;
      position: absolute;
      width: 40px;
      height: 40px;
      top: 50%;
      left: 50%;
      margin: -20px 0 0 -20px;
      border-radius: 50%;
      z-index: 2;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .img-item .img-label {
      width: 76px;
      height: 28px;
      line-height: 28px;
      background: #90080e;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      left: 0;
      top: 15px;
      z-index: 100;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .img-item .img-label:empty {
      display: none;
    }
    /* 声明左侧图，右侧图处理间隙 */
    li[data-limit='left'] {
      padding-right: 10px;
    }
    li[data-limit='right'] {
      padding-left: 10px;
    }
    /* 比例 */
    li[data-scale='16:9'] .img-item::before {
      padding-top: 56.25%;
    }
    li[data-scale='4:3'] .img-item::before {
      padding-top: 75%;
    }
    li[data-scale='1:1'] .img-item::before {
      padding-top: 100%;
    }
    /* 显示视频图标 */
    li[data-video] i {
      display: block;
    }

    li[data-animation] a:hover img {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
    }
    li[data-animation='blur'] .img-item img,
    li[data-animation='blur'] .img-item .img {
      -webkit-transition: none;
      transition: none;
    }
    li[data-animation='blur'] a:hover img {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-filter: blur(5px);
      filter: blur(5px);
    }
    li[data-animation] a:hover i {
      color: #E2CD88;
    }
    /* 标题对齐方式 */
    li[data-title='center'] h4 {
      text-align: center;
    }
    /* 标题是否压图 */
    li[data-layout='up'] .txt-item {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px 5px 2px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }
    li[data-layout='up'] h4,
    li[data-layout='up'] a:hover h4 {
      color: #fff;
      text-align: center;
    }
    /* 标题全补叠加到图片上 */
    li[data-layout='cover'] .txt-item {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      padding: 20px;
      /* background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); */
      background: rgba(0, 0, 0, 0.3);
    }
    li[data-layout='cover'] .txt-item {
      display: none;
    }
    li[data-layout='cover'] h4,
    li[data-layout='cover'] a:hover h4 {
      color: #fff;
      font-size: 20px;
      text-shadow: 0 2px 1px rgb(0 0 0 / 50%);
      max-height: inherit;
    }
    li[data-layout='cover'] a:hover .txt-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 不显示标题 */
    li[data-layout='none'] .txt-item {
      display: none;
    }
    /* 一行显示图片个数 */
    li[data-number='3'] {
      width: 90px;
    }
    /* 标题行数 */
    li[data-line='2'] h4 {
      max-height: 42px;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    li[data-line='3'] h4 {
      max-height: 63px;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    li[data-line='5'] h4 {
      height: auto;
      max-height: inherit;
      overflow: inherit;
      white-space: inherit;
    }
    li[data-dark] h4,
    li[data-dark] a:hover h4 {
      color: #fff;
    }

    li[data-shadow='true'] .txt-item {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      padding: 20px;
      background: rgba(0, 0, 0, 0.5);
      height: 100%;
      display: none;
    }
    li[data-shadow='true']:hover .txt-item {
      display: block;
    }
    li[data-shadow='true'] .txt-item::before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      width: 1px;
      overflow: hidden;
    }
    li[data-shadow='true'] .txt-item h4 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      white-space: normal;
      -webkit-box-orient: vertical;
      word-break: break-word;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 18px);
      margin: 0 6px;
      text-align: center;
      max-height: 42px;
      -webkit-line-clamp: 2;
      padding-bottom: 10px;
      position: relative;
    }
    li[data-shadow='true'] .txt-item h4::before {
      content: '____';
      width: 36px;
      height: 2px;
      overflow: hidden;
      background: #fff;
      position: absolute;
      left: 50%;
      margin-left: -18px;
      bottom: 0;
    }

    .img-item-hover .txt-item {
      height: 0;
      margin: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5)!important;
      padding: 0!important;
      -webkit-transition: height .15s ease-in;
      transition: height .15s ease-in;
    }
    .img-item-hover .txt-item::before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      width: 1px;
      overflow: hidden;
    }
    .img-item-hover .txt-item h4 {
      font-size: 18px;
      max-height: 54px;
      color: #fff;
      display: inline-block!important;
      vertical-align: middle;
      width: calc(100% - 18px);
      width: 95% \9;
      margin: 0 6px;
      font-weight: normal;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .img-item-hover a:hover .txt-item {
      height: 100%;
    }