<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="prod-list-box-1 con">
  <ul class="flex flex-row-wrap">
    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="1_401up_800down,3_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/1cf4d39.png" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="1_401up_800down,3_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/73bcbcc.jpg" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="2_401up_800down,3_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/5015d22.jpg" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="2_401up_800down,3_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/25ccf90.jpg" alt="">
            
          </div>
        </div>
      </div>
    </li>
    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="5_401up_800down,4_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/891b7ed.jpg" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="5_401up_800down,4_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/fdbf5e2.jpg" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="6_401up_800down,4_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/37a914e.jpg" alt="">
          </div>
        </div>
      </div>
    </li>

    <li>
      <div>
        <div class="height-sync" data-height-sync-group-no="6_401up_800down,4_801up">
          <div class="img-box">
            <img src="http://eightthethalasso.jp/_nuxt/img/fe4bbfc.jpg" alt="">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

.con {
  margin:0 auto;
}

.flex {
  display:flex;
}

.flex-row-wrap {
  flex-flow:row wrap;
}

.img-box > img {
  width:100%;
}


/* cos */
.con {
  max-width:1316px;
}

@media ( min-width:801px ) {
  .prod-list-box-1 > ul > li {
    width:calc(25% - 2.2% * 4 / 3);
  }

  .prod-list-box-1 > ul > li:not(:nth-child(4n)) {
    margin-right:2.2%;
  }
}

@media ( max-width:800px ) and ( min-width:401px ) {
  .prod-list-box-1 > ul > li {
    width:calc(50% - 2.2% * 2 / 1);
  }

  .prod-list-box-1 > ul > li:not(:nth-child(2n)) {
    margin-right:2.2%;
  }
}

@media ( max-width:400px ) {
  .prod-list-box-1 > ul > li {
    width:100%;
  }
}

.height-sync {
  border:2px solid red;
}

console.clear();
HeightSync__nodes = {};

var HeightSync__windowWidth = $(window).width();

function HeightSync__init() {
    // 데이터를 모으는 작업, HeightSync__nodes 변수에 데이터를 채운다.
    $('.height-sync').each(function(index, node) {
        var $node = $(node);
        var groupNos = $node.attr('data-height-sync-group-no');
        
        groupNos = groupNos.split(',');
        
        for ( var i = 0; i < groupNos.length; i++ ) {
            var groupNo = groupNos[i];
            if ( groupNo.indexOf("up") == -1 ) {
                groupNo += "_0up";
            }

            if ( groupNo.indexOf("down") == -1 ) {
                groupNo += "_100000down";
            }

            if ( typeof HeightSync__nodes[groupNo] == 'undefined' ) {
                var bits = groupNo.replace('down', '');
                bits = groupNo.replace('up', '');
                bits = groupNo.split('_');
                var minWidth = parseInt(bits[1]);
                var maxWidth = parseInt(bits[2]);
                
                console.log(groupNo);
                
                HeightSync__nodes[groupNo] = {
                    minWidth:minWidth,
                    maxWidth:maxWidth,
                    nodes:[]
                };
            }

            HeightSync__nodes[groupNo].nodes.push($node);
        }
    });

    $(window).resize(Height_Sync__sync);
    Height_Sync__sync();
}

function Height_Sync__sync() {
    HeightSync__windowWidth = $(window).width();
    
    $('.height-sync').data('height-sync-group-no', 'N');
    
    for ( var key in HeightSync__nodes ) {
        var height = 0;
        var $tallNode = null;
        var tallNodeIndex = -1;
        
        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( $node.data('height-sync-group-no') != 'Y' ) {
                $node.css('height', '');
            }
        }
        
        if ( HeightSync__windowWidth < HeightSync__nodes[key].minWidth || HeightSync__windowWidth > HeightSync__nodes[key].maxWidth ) {
            continue;
        }
        
        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( $tallNode == null || $tallNode.height() < $node.height() ) {
                $tallNode = $node;
                tallNodeIndex = i;
            }
        }

        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( i != tallNodeIndex ) {
                $node.height($tallNode.height());
                $node.data('height-sync-group-no', 'Y');
            }
        }
    }
}

HeightSync__init();