.web-box-list{
    --unit-img-height:clamp(20px,5.6vw,66px);
    --unit-height:clamp(50px,11vw,124px);
    --unit-radius:20px;
}
.web-box-list-unit{
    width: 25%;
    position: relative;
    height: var(--unit-height);
    z-index: 10;
    transition: 0.5s;
}
.web-box-list-unit-line{
    position: absolute;
    z-index: 99;
    height: calc( var(--unit-height) - 2 * var(--unit-radius) );
    width: 1px;
    background: #d7d7d7;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.5s;
}
.web-box-list-unit-inner{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: var(--unit-radius);
    filter:drop-shadow(3px -1px 20px 
		rgba(0, 0, 0, 0));
	transition: 0.5s;
	background-color: #ffffff;
}
.web-box-list-unit:last-of-type .web-box-list-unit-line{
    opacity: 0;
}
.web-box-list-unit-inner img{
    height: var(--unit-img-height);
    flex:none;
}
.web-box-list-unit:nth-child(2) .web-box-list-unit-inner img{
    height: calc( var(--unit-img-height) * 75 / 66 );
}
.web-box-list-unit:nth-child(3) .web-box-list-unit-inner img{
    height: calc( var(--unit-img-height) * 75 / 61 );
}
.web-box-list-unit:nth-child(4) .web-box-list-unit-inner img{
    height: calc( var(--unit-img-height) * 75 / 61 );
}
@media (min-width:993px){
    .web-box-list-unit:hover{
        z-index: 99;
    }
    .web-box-list-unit:hover .web-box-list-unit-line{
        opacity: 0;
    }
    .web-box-list-unit:hover .web-box-list-unit-inner{
        filter:drop-shadow(3px -1px 10px 
    		rgba(0, 0, 0, 0.08));
    }
}
@media (max-width:576px){
    .web-box-list{
        --unit-radius:10px;
    }
}