@media only screen and (max-width: 767px) {
    body {
        margin: 0;
        padding: 0;
    }

   .container{
    position: relative;
    width: 100vw;
    /* 高度由图片撑开，不再写死 180vh */
    height: auto;             
    background-color: rgba(26, 1, 2, 1);
    }
    .bg{
        display: block;
        width: 100%;
        height: auto;      /* 让图本身撑出容器高度 */
    }

    .top-floating {
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 99;
        position: fixed;
        line-height: 50px;
        text-align: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .top-floating img {
        float: right;
        margin-right: 2vw;
        margin-top: 2vh;
    }

     .carousel {
        position: absolute;
        height: 76px;
        display: flex;
        margin: 0 3vw;
        overflow: hidden;
        top: 0;
    }

    .infoCard {
        /* top: 55vh; */
        top: 132vh;
        position: absolute;
        color:#fff;font-size:12px;line-height:1.4;
        left:50%;                /* 水平中心 */
        transform:translateX(-50%); /* 再向左偏移自身宽度的一半 */
        width:93vw;
    }

    .carousel img {
        width: 100%;
        height: auto;
        z-index: 1;
        margin-left: 10px;
        animation: carousel 15s infinite;
    }

    @keyframes carousel {
        0% {
            transform: translateX(0%);
            animation-timing-function: linear;
        }

        33% {
            transform: translateX(-100%);
            animation-timing-function: linear;
        }

        66% {
            transform: translateX(-200%);
            animation-timing-function: linear;
        }

        100% {
            transform: translateX(-280%);
            animation-timing-function: linear;
        }
    }
}


@media only screen and (min-width: 768px) {
    body {
        padding: 0;
        margin: 0 30vw;
        background-color: rgba(26, 1, 2, 1);
    }

    .container{
    position: relative;
    width: calc(30vw - 1px);
    height: auto;                /* 让图片撑开 */
    background-color: rgba(26, 1, 2, 1);
  }
  .bg{
    display: block;
    width: 100%;
    height: auto;
  }

    .top-floating {
        top: 0;
        z-index: 99;
        height: 10vh;
        position: fixed;
        width: calc(30vw - 1px);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .top-floating img {
        float: right;
        margin-top: 2.5vh;
        margin-right: 1vw;
    }

    .carousel {
        height: 140px;
        display: flex;
        overflow: hidden;
        position: absolute;
        top: calc(130vh - 1px);
        width: calc(30vw - 1px);
    }

    .infoCard{
        position:absolute;
        left:50%;                /* 水平中心 */
        top:calc(156vh - 1px);   /* 垂直位置不变 */
        transform:translateX(-67%); /* 再向左偏移自身宽度的一半 */
        width:27vw;
        color:#fff;font-size:14px;line-height:1.4;
        z-index:2;
    }

    .carousel img {
        width: 100%;
        height: auto;
        margin-left: 10px;
        animation: carousel 15s infinite;
    }

    @keyframes carousel {
        0% {
            transform: translateX(0%);
            animation-timing-function: linear;
        }

        33% {
            transform: translateX(-90%);
            animation-timing-function: linear;
        }

        66% {
            transform: translateX(-190%);
            animation-timing-function: linear;
        }

        100% {
            transform: translateX(-280%);
            animation-timing-function: linear;
        }
    }
}