@keyframes ListLoad {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

.load-container {
    position: relative;
    width: 100%;
    flex: auto;
    .load-model {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        background-image: url('./ListLoad.png');
    }
    .detail-load-model {
        background-image: url('./DetailLoad.png');
    }
    .detail-list-load-model {
        background-image: url('./DetailListLoad.png');
    }

    .detail-onepage-table-load {
        background-image: url('./DetailListLoad.png');
        width: 100%;
        height: 80px;
    }
    .load-model,.detail-load-model,.detail-list-load-model,.detail-onepage-table-load {
        background-repeat: no-repeat;
        background-size: cover;
    }

    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        // .load-model {
        //     background-image: url('./ListLoad.png');
        // }
        .detail-load-model {
            background-image: url('./DetailLoad-X.png');
        }
        .load-model {
            background-image: url('./ListLoad-X.png');
        }

        // .detail-list-load-model,.detail-onepage-table-load {
        //     background-image: url('./DetailListLoad-X.png');
        // }
    }

    .load-bg {
        position: absolute;
        z-index: -1;
        left: -100%;
        top: 0;
        width: 200%;
        height: 100%;
        background-image: -webkit-linear-gradient(left,#FAFAFA,#F2F4F5,#FAFAFA);
        animation: 1s ListLoad linear infinite;
    }
}