@import '@/assets/css/function';
@import '@/assets/css/theme';

.entrance-guard{
  background: $entrance-guard-icon no-repeat;
  background-size: 100% 100%;
  height: halfH(378);
  color: $statistical-txt;
  padding: 0 halfH(22);
  overflow: hidden;
  .tips{
    display: flex;
    padding: halfH(20) 0 halfH(12);
    align-items: flex-end;
    .tips-logo{
      width: halfW(50);
    }
    .tips-desc{
      flex: 1;
      text-align: right;
      font-size: halfH(22);
      .tips-desc-unit{
        color: #52DCFF;
        font-size: halfH(12);
      }
    }
  }
  .linst-line{
    height: 1px;
    background: $communication-line;
  }
  .list{
    // border-top: 1px solid $communication-line;
    padding-top: halfH(12);
    overflow: hidden;
    height: halfH(220);
    .list-item{
      display: flex;
      align-items: center;
      padding-bottom: halfH(12);
      // animation: bubble 20s linear infinite;
      // backface-visibility: hidden;
      // animation-fill-mode: forwards;
      // -webkit-animation: bubble 20s linear infinite;
      // -webkit-backface-visibility: hidden;
      // -webkit-animation-fill-mode: forwards;
      .list-item-txt{
        padding-left: 10px;
        font-size: halfH(14);
        color: $tag-house-txt;
        display: inline-block;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list-item-lr{
        flex: 1;
        text-align: right;
      }
    }
  }
  @keyframes bubble {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-600px);
      transform: translateY(-600px);
    }
  }
}
