우측 작은 이미지 클릭시 좌측 큰이미지에 뜨도록

<div class="con con_01">
        <div class="left">
          <img src="<?php echo G5_IMG_URL?>/ex_01.png"/>
          <a href="#" class="more"><p>+</p></a>
        </div>

        <div class="right">
          <div class="mo_name">
            <ul>
              <li>RH-200 MINI</a></li>
              <li>RH-400</li>
              <li>RH-500</a></li>
              <li>RH-600</li>
              <li>RH-700</li>
              <li>RH-800</a></li>
              <li>RH-800ES</li>
              <li>RH-1000</li>
              <li>RH-100ES</li>
            </ul>
          </div>

          <div class="text_box">
            <p>· For 1 ton small trucks</p>
            <p>· RX Series model that uses electricity as an AC motor drive type</p>
            <p>· For 2.5 ton / 3.5 ton / 5.0 ton medium trucks</p>
            <p>· For RX Series models that are AC motor driven and use electricity</p>
            <p>· Model group applying TM16 / TM21 class compressor</p>
          </div>

          <div class="img_box">
            <ul>
              <li class="small active"><img src="<?php echo G5_IMG_URL?>/ex_01.png"/></li>
              <li class="small"><img src="<?php echo G5_IMG_URL?>/ex_02.png"/></li>
              <li class="small"><img src="<?php echo G5_IMG_URL?>/ex_03.png"/></li>
              <li class="small"><img src="<?php echo G5_IMG_URL?>/ex_04.png"/></li>
            </ul>
          </div>
        </div>
      </div>

<script>

document.addEventListener("DOMContentLoaded", function() {
    // 모든 small 이미지 요소에 대해 클릭 이벤트 추가
    var smallImages = document.querySelectorAll(".img_box .small");
    smallImages.forEach(function(smallImg) {
      smallImg.addEventListener("click", function() {
        // 클릭한 이미지의 src 가져오기
        var imgSrc = smallImg.querySelector("img").getAttribute("src");
        // 왼쪽 큰 이미지의 src 변경
        document.querySelector(".left img").setAttribute("src", imgSrc);

        // 모든 small 이미지 요소에서 active 클래스 제거
        smallImages.forEach(function(img) {
          img.classList.remove("active");
        });

        // 클릭한 이미지에 active 클래스 추가
        smallImg.classList.add("active");
      });
    });
  });

</script>