

.box_step_BA {}

.box_step_BA  .sub_stit{ width:100%; float: left; font-size: var(--tit-md-size); color: #222; font-weight:600; line-height: 100%; letter-spacing: -1px; margin-bottom:clamp(10px, 2.344vw, 30px) }	



.box_step_BA .work_info{ width: 100%; float: left;  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:20px;}	

.box_step_BA .work_info>.work_listbox_wrap { 
  width: 100%; float: left; position: relative; aspect-ratio:1 / 1;
}
.box_step_BA .work_info>.work_listbox_wrap>.work_listbox_arrow { 
  width:40px; height: 40px; border: 1px solid #e3e3e3; border-radius: 100%; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);background-color: #f5f5f5; display: flex; z-index: 1; 
}
.box_step_BA .work_info > .work_listbox_wrap > .work_listbox_arrow::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 16px; background: url("../icons/arrow_icon.gif") no-repeat center center; background-size: contain;
}
.box_step_BA .work_info > .work_listbox_wrap:last-child > .work_listbox_arrow {
  display: none;
}

.box_step_BA .work_info>.work_listbox_wrap>.work_listbox{ width: 100%; float: left; border-radius: 15px; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:10px; padding: clamp(20px, 1.2vw, 32px) clamp(12px, 1vw, 24px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); aspect-ratio:1 / 1; }
	

.box_step_BA .work_info>.work_listbox_wrap>.work_listbox img {
  width: clamp(40px, 5vw, 64px);  height: auto;   aspect-ratio: 1 / 1;  object-fit: contain;  display: block; }


.box_step_BA .work_info>.work_listbox_wrap>.work_listbox a.hompage{ width:44px;  height:44px;   position: absolute; right:clamp(28px, 2.083vw, 30px); top:clamp(28px, 2.083vw, 30px);  background-size: 44px; }
	
	
.box_step_BA .work_info>.work_listbox_wrap>.work_listbox .work_list_tit{ float: left; = color: #000; font-weight:500; line-height: 100%; letter-spacing: -1px; margin-bottom:10px}


.box_step_BA .work_info>.work_listbox_wrap>.work_listbox .work_list_tx ul li{ width:100%; float: left; font-size: var(--tit-mds-size);color: #222; font-weight:500; line-height: 140%; letter-spacing: -1px; margin-bottom: 5px; padding-left: clamp(10px, 1.172vw, 15px); position: relative}		
.box_step_BA .work_info>.work_listbox_wrap>.work_listbox .work_list_tx ul li:before{width: 3px; height: 3px;  border-radius: 100%; position: absolute; left: 0px; top:clamp(8px, 0.938vw, 12px); background-color: #222; content: "";  transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  

-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;}	


.box_step_BA .work_info>.work_listbox_wrap>.work_listbox .work_list_tx2 ul li{ width:100%; float: left; font-size: var(--tx-sm-size);color: #666; font-weight:500; line-height: 120%; letter-spacing: -1px; margin-bottom: 5px; padding-left: clamp(27px, 1.172vw, 32px); position: relative}		
.box_step_BA .work_info>.work_listbox_wrap>.work_listbox .work_list_tx2 ul li:before{position: absolute; left: 16px; top:clamp(0px, 0.938vw, -3px);content: "-";  color:#666;   font-family: unicons-line; font-size: var(--tx-sm-size); }




@media screen and (max-width: 480px) {
	.box_step_BA .work_info{ width: 100%; float: left;  display: grid;grid-template-columns: repeat(2, 1fr);gap:10px; padding-right: 15px}	

	/*  .box_step_BA .work_info > .work_listbox_wrap > .work_listbox_arrow {
    right: 50%; top: auto; bottom: -30px; transform: translateX(50%);
  }*/
	
  .box_step_BA .work_info > .work_listbox_wrap > .work_listbox_arrow {
    width: 30px;
    height: 30px;
    right: -20px; /* 기존 -30px → 살짝 안쪽으로 */
  }

  .box_step_BA .work_info > .work_listbox_wrap > .work_listbox_arrow::after {
    width: 8px;
    height: 12px;
  }
	

}