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

.communication{
  background: $communication-bg no-repeat;
  background-size: 100% 100%;
  width: halfW(356);
  height: halfH(500);
  color: #fff;
  .map{
    display: flex;
    justify-content: center;
    align-items: center;
    .map-item{
      width: halfW(100);
      height: halfH(100);
      &.proportion{
        width: halfW(200);
        height: halfH(200);
        padding-right: halfH(20);
      }
    }
  }
  .linst-line{
    height: 1px;
    background: $communication-line;
    margin: 0 halfH(20);
  }
  .list{
    padding: halfH(12) halfH(12) 0;
    overflow: hidden;
    height: halfH(200);
    .list-item{
      display: flex;
      align-items: center;
      padding-bottom: halfH(12);
      // animation: bubble 20s linear infinite;
      // backface-visibility: hidden;
      // 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% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-600px);
    }
  }
}
