div.business {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 500px;
  margin: 0 auto;
  padding-bottom: 40px;
  gap: 10px;
  border: 1px solid #000;
}
div.business::after {
  content: "";
  display: block;
  clear: both;
}

div.business div.itemBox {width:105px; }
div.business div.item {
  width: 105px;
  height: 94px;
  text-align: center;
  position: relative;
}
div.business div.item .hover{width:105px; float:left; text-align:center; height:94px; margin:0 10px 10px 0; margin-top:10px; position:relative;
background-repeat:no-repeat; background-position:center top;  }
div.business div.item:before {content:""; width:100%; background-repeat:no-repeat; height:100%;  position:absolute; left:0; top:0;  }
div.business div.item01 .hover{background-image:url("../img/img1.jpg");background-repeat:no-repeat; }
div.business div.item02 .hover{background-image:url("../img/img2.jpg");background-repeat:no-repeat; }
div.business div.item03 .hover{background-image:url("../img/img3.jpg");background-repeat:no-repeat; }
div.business div.item04 .hover{background-image:url("../img/img4.jpg");background-repeat:no-repeat;   margin-right:0;}
div.business div.item05 .hover{background-image:url("../img/img5.jpg");background-repeat:no-repeat;}
div.business div.item06 .hover{background-image:url("../img/img6.jpg");background-repeat:no-repeat;  }
div.business div.item07 .hover{background-image:url("../img/img7.jpg");background-repeat:no-repeat;  }
div.business div.item08 .hover{background-image:url("../img/img8.jpg");background-repeat:no-repeat;    margin-right:0;}
div.business div.item09 .hover{background-image:url("../img/img9.jpg");background-repeat:no-repeat;  }
div.business div.item10 .hover{background-image:url("../img/img10.jpg");background-repeat:no-repeat;  margin-right:0;}
div.business div.item04 { margin-right:0;}
div.business div.item08 { margin-right:0;}
div.business div.item10 { margin-right:0;}


div.business div.item .img {position:absolute; bottom:0px; width:100%; padding-top:0px; border:0px solid #dfdfdf;
background:; z-index:1; color:#fff;  }
div.business div.item .img span {display:block;height:70px;  transition:all 0.3s ease; font-size:20px; font-weight:500; 
text-align:center; width:100%; margin: 0 auto;  background:rgb(0,0,0,0.5); padding:18px 0 10px 0; border-radius: 0px 0px  }

div.business div.item .hover {position:absolute; top:0;  /*background-color:rgba(33,36,167,0.8);블루*/ height:100%; width:100%; 
opacity:1; transition:all 0.3s ease; }
div.business div.item .hover .txt {opacity:0; transition:all 0.1s ease; font-size:18px; color:#fff; position:absolute; top:110px;
 left:50%;transform:translate(-50%,0); width:90%; }
 
div.business div.item .hover .more {transition:all 0.3s ease; width:100%; border:0px solid #fff; 
position:absolute; height:100%;  color:#333;  padding-top:10px;  }
div.business div.item .hover .more span {z-index: 1; position:absolute; transition:all 0.3s ; left:50%; top:50%;
transform:translate(-50%,-50%);  opacity:0; }
  
/*div.business div.item a .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.1); left:0; top:0; }
div.business div.item a:hover .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.1); left:0; top:0; }
div.business div.item a:hover .hover .txt{opacity:0; transition:all 0.5s ease; top:70px; }
div.business div.item a:hover .hover .more {transition:all 0.5s ease; }
div.business div.item a:hover .more span {transition:all 0.5s ease; top:45%; opacity:1}*/

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
div.business{
margin-top:0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 가로로 균등하게 배치 */
  gap: 15px; /* 카드 간격 */
  padding: 5px;
 height: auto; /* ✅ auto로 */ 
position: relative;
overflow: visible;}
/*div.business div.item .hover {opacity:1; background-color:rgba(33,36,167,0);}*/
div.business div.item {
  flex: 0 0 calc(25% - 13.4px); /* 한 줄에 3개씩 (gap 보정) */
  aspect-ratio: 1 / 1; /* 높이 일정하게 */
  background-size: cover;
  text-align: center;
  position: relative;
  box-sizing: border-box;
width:22%; float:left; 
margin-right:0%; 
margin-bottom:1px;   
height: auto; 

}
div.business div.item:nth-child(odd){float:right;}
div.business div.item .hover{width:100%; float:left; text-align:center; height: 100%; /* ✅ 부모 크기에 맞게 */ margin-right:10px;   position: absolute;
background-repeat:no-repeat; background-position:center top; background-size:cover;  }

div.business div.item .img {bottom:auto; top:0px; }
div.business div.item .img span { padding-top:12px; font-size:22px; height:60px; color:#fff; }
/*div.business div.item a:hover .img span {transform: translate(0,-0px);  opacity:1; }*/
div.business div.item .hover .txt { display:none;  }
div.business div.item .hover .more { width:100%; }
div.business div.item a .hover .more:after {width:100%; }
div.business div.item a:hover .hover .more:after {width:100%; }
div.business div.item .hover .more span {  opacity:1; top:50%; }
/*div.business div.item a .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.2); left:0; top:0; }*/
/*div.business div.item .hover .more {transition:all 0.3s ease; width:60px; height:60px; border:1px solid #fff; 
position:absolute; left:50%; transform:translate(-50%,0); bottom:0px; bottom:50px; opacity:1 !important;}
div.business div.item a:hover .hover .more {transition:all 0.3s ease; bottom:50px; }*/

}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}