body {
    padding: 0;
    margin: 0;
}

#section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
#section .img {
    position: absolute;
    width: 200px;
    transform: scale3d(0.5, 0.5, 1);
    border-radius: 9px;
    animation: mbt 3s 0s linear infinite both;
    opacity: 0.5;
    transition: 0.3s ease;
    font-size: 0;
}
#section .img h4 {
    position: absolute;
    left: 0;
    top: -45px;
    width: 100%;
    line-height: 25px;
    height: 25px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    border-radius: 40px;
    text-align: center;
}
#section .img img {
    width: 100%;
    transition: 0.3s ease;
    border-radius: 9px;
}
#section .img:hover {
    opacity: 1;
    animation-play-state: paused;
    z-index: 1;
    transform: scale3d(1, 1, 1);
}
#section .img:hover h4 {
    opacity: 1;
}
#section .img:hover img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}
@keyframes mbt {
    0% {
        transform: translateY(-200px);
    }
    100% {
        transform: translateY(100vh);
    }
}
#section .img:nth-child(1) {
    left: calc((1 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(2) {
    left: calc((2 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(3) {
    left: calc((3 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(4) {
    left: calc((4 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(5) {
    left: calc((5 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(6) {
    left: calc((6 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(7) {
    left: calc((7 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(8) {
    left: calc((8 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(9) {
    left: calc((9 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(10) {
    left: calc((10 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(11) {
    left: calc((11 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(12) {
    left: calc((12 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(13) {
    left: calc((13 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(14) {
    left: calc((14 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(15) {
    left: calc((15 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(16) {
    left: calc((16 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(17) {
    left: calc((17 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(18) {
    left: calc((18 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(19) {
    left: calc((19 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(20) {
    left: calc((20 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(21) {
    left: calc((21 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(22) {
    left: calc((22 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(23) {
    left: calc((23 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(24) {
    left: calc((24 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(25) {
    left: calc((25 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(26) {
    left: calc((26 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(27) {
    left: calc((27 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(28) {
    left: calc((28 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(29) {
    left: calc((29 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(30) {
    left: calc((30 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(31) {
    left: calc((31 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(32) {
    left: calc((32 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(33) {
    left: calc((33 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(34) {
    left: calc((34 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(35) {
    left: calc((35 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(36) {
    left: calc((36 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(37) {
    left: calc((37 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(38) {
    left: calc((38 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(39) {
    left: calc((39 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(40) {
    left: calc((40 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(41) {
    left: calc((41 - 1) * (100% - 200px) / (41 - 1));
}
#section .img:nth-child(1) {
    animation-delay: 1s;
    animation-duration: calc(6.5s + 6.5s);
}
#section .img:nth-child(2) {
    animation-delay: -3s;
    animation-duration: calc(4.5s + 6.5s);
}
#section .img:nth-child(3) {
    animation-delay: -2.3s;
    animation-duration: calc(8.5s + 6.5s);
}
#section .img:nth-child(4) {
    animation-delay: 0s;
    animation-duration: calc(3.5s + 6.5s);
}
#section .img:nth-child(5) {
    animation-delay: 0s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(6) {
    animation-delay: 1s;
    animation-duration: calc(7.5s + 6.5s);
}
#section .img:nth-child(7) {
    animation-delay: 1.5s;
    animation-duration: calc(1.5s + 6.5s);
}
#section .img:nth-child(8) {
    animation-delay: -3s;
    animation-duration: calc(4.5s + 6.5s);
}
#section .img:nth-child(9) {
    animation-delay: -2.3s;
    animation-duration: calc(8.5s + 6.5s);
}
#section .img:nth-child(10) {
    animation-delay: 0s;
    animation-duration: calc(5.1s + 6.5s);
}
#section .img:nth-child(11) {
    animation-delay: 4s;
    animation-duration: calc(2.6s + 6.5s);
}
#section .img:nth-child(12) {
    animation-delay: -3s;
    animation-duration: calc(5.8s + 6.5s);
}
#section .img:nth-child(13) {
    animation-delay: 1.4s;
    animation-duration: calc(8.5s + 6.5s);
}
#section .img:nth-child(14) {
    animation-delay: 4s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(15) {
    animation-delay: 0s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(16) {
    animation-delay: -1s;
    animation-duration: calc(2.8s + 6.5s);
}
#section .img:nth-child(17) {
    animation-delay: -1.6s;
    animation-duration: calc(2.1s + 6.5s);
}
#section .img:nth-child(18) {
    animation-delay: 2.3s;
    animation-duration: calc(3.2s + 6.5s);
}
#section .img:nth-child(19) {
    animation-delay: 2.7s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(20) {
    animation-delay: 2.9s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(21) {
    animation-delay: 1s;
    animation-duration: calc(4.5s + 6.5s);
}
#section .img:nth-child(22) {
    animation-delay: 0s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(23) {
    animation-delay: -3s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(24) {
    animation-delay: -2s;
    animation-duration: calc(8.5s + 6.5s);
}
#section .img:nth-child(26) {
    animation-delay: -1s;
    animation-duration: calc(2.4s + 6.5s);
}
#section .img:nth-child(27) {
    animation-delay: 0s;
    animation-duration: calc(6.4s + 6.5s);
}
#section .img:nth-child(28) {
    animation-delay: 1s;
    animation-duration: calc(2.3s + 6.5s);
}
#section .img:nth-child(29) {
    animation-delay: 0s;
    animation-duration: calc(1.5s + 6.5s);
}
#section .img:nth-child(30) {
    animation-delay: 3s;
    animation-duration: calc(5.5s + 6.5s);
}
#section .img:nth-child(31) {
    animation-delay: 0s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(32) {
    animation-delay: 2.3s;
    animation-duration: calc(8.3s + 6.5s);
}
#section .img:nth-child(33) {
    animation-delay: 4s;
    animation-duration: calc(2.8s + 6.5s);
}
#section .img:nth-child(34) {
    animation-delay: 0s;
    animation-duration: calc(6.5s + 6.5s);
}
#section .img:nth-child(35) {
    animation-delay: -2.3s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(36) {
    animation-delay: 0s;
    animation-duration: calc(4.5s + 6.5s);
}
#section .img:nth-child(37) {
    animation-delay: 2.3s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(38) {
    animation-delay: 2.3s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(39) {
    animation-delay: 2.3s;
    animation-duration: calc(2.5s + 6.5s);
}
#section .img:nth-child(40) {
    animation-delay: 5.3s;
    animation-duration: calc(2.9s + 6.5s);
}
#section .img:nth-child(41) {
    animation-delay: 1.3s;
    animation-duration: calc(3.5s + 6.5s);
}