.bar,
.line{
    position: relative;
}

.tablecontainer{
    width: 100%;
    height: 100%;
}

.chat{
    width: 18%;
    height: 6%;
    position: absolute;
    top: 14%;
    right: 5%;
    background-image: url(https://res-static.hc-cdn.cn/cloudbu-site/intl/en-us/about/overview/images/table/chat.png);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity ease .4s 1.2s;
}

.x2,
.x5,
.x6 {
    line-height: 2;
    color: #575D6C;
    text-align: center;
    opacity: 0;
    transition: opacity ease .4s 1.2s;
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.x2{
    width: 27.5%;
    position:absolute;
    bottom: 42%;
    left: 6.2%;
    background-image: url('https://res-static.hc-cdn.cn/cloudbu-site/intl/en-us/about/overview/images/table/2X.png');
}

.x5{
    width: 27.9%;
    position:absolute;
    bottom: 51%;
    left: 33.5%;
    background-image: url('https://res-static.hc-cdn.cn/cloudbu-site/intl/en-us/about/overview/images/table/5X.png');
}

.x6{
    width: 35.2%;
    position:absolute;
    bottom: 76%;
    left: 61%;
    background-image: url('https://res-static.hc-cdn.cn/cloudbu-site/intl/en-us/about/overview/images/table/6X.png');
}

.chat.show,
.x2.show,
.x5.show,
.x6.show {
    opacity: 1;
}

@media screen and (max-width: 1024px) {
    .chat {
        top: 15%;
    }
    .x2 {
        width: 27%;
        left: 7%;
        bottom: 40%;
    }
    .x5 {
        bottom: 49%;
    }
    .x6 {
        width: 34.5%;
        bottom: 75%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
  .chat {
    background-image: url(https://res-static.hc-cdn.cn/cloudbu-site/intl/en-us/about/overview/images/table/chat@2x.png);
    background-size: 100%;
  }
}