세로로 무한 흐르기

  

    
    
    
    
  
<div class="ver_wrap">
            <div class="ver_content">
                <div class="ver1_1 ver">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client1.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client2.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client3.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client4.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client5.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client6.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client7.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client8.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client1.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client2.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client3.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client4.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client5.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client6.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client7.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client8.png" alt="">
                </div>
            </div>
            <div class="ver_content2">
                <div class="ver1_1 ver">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client1.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client2.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client3.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client4.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client5.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client6.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client7.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client8.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client1.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client2.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client3.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client4.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client5.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client6.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client7.png" alt="">
                    <img src="<?php echo G5_THEME_IMG_URL ?>/client8.png" alt="">
                </div>
            </div>
        </div>

 

---

 

  

    
    
    
    
  
.ver_content { display: flex;  flex-direction: column;  animation: scroll 12s linear infinite; width: 49%;}
.ver_content img { width: 100%;}
.ver_content .ver{display: flex; flex-direction: column; gap: 15px 0px;}
.ver_content .ver2{margin-top: 15px;}

.ver_content2 { display: flex;  flex-direction: column;  animation: scroll2 12s linear infinite; width: 49%;}
.ver_content2 img { width: 100%;}
.ver_content2 .ver{display: flex; flex-direction: column; gap: 15px 0px;}
.ver_content2 .ver2{margin-top: 15px;}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scroll2 {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}