.boxinfo{ width:100%; float:left; display:flex; flex-direction:column; }
.dl-title{ width:100%; display:flex; flex-direction:column;  }
.dl-title h1{ min-height:220px; font-size:2.8rem; color:#000; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:30px; border-bottom:1px solid #d7d7d7; }
.dl-title h1 i{ position:relative;}
.dl-title h1 i::before{ content:''; position:absolute; left:-44px; top:0; width:60px; height:5px; background-color:#000; }
.dl-title h1 i::after{ content:''; position:absolute; right:-44px; top:0; width:18px; height:5px; background-color:#000; }
.dl-title div{ width:100%; padding: 35px 15%; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.dl-title div p{ font-size:1.125rem; color:#5e5e5e; line-height:1.8; }
.down-a{ width:100%; display:flex;  flex-direction: row; flex-wrap:wrap; padding:40px 0px 150px; gap:30px; }
.done{ width:calc(25% - 24px); float: left;}
.donem{ width:100%; display:flex; flex-direction:column; cursor: pointer; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; }
.donem>i{ width:100%; display:flex; border:1px solid #d7d7d7; }
.donem>i img{ width:100%; }
.donem h1{width: 100%; font-size:0.95rem; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
.donem div{ display:flex; justify-content:center; height: 60px; padding:0px 15px; align-items:center; flex-direction:row; font-size:1rem; margin-top:5px; background-color:#eaeaea; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.donem div span{ margin-left:5px; }
.donem:hover{ transform: translateY(-10px); }
.donem:hover div{background: #ababab; background: -moz-linear-gradient(left, #ababab 0%, #eeeeee 100%); background: -webkit-linear-gradient(left, #ababab 0%, #eeeeee 100%); background: linear-gradient(to right, #ababab 0%, #eeeeee 100%); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }


@media (max-width: 1230px) {

}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.done{ width:calc(33% - 19px); }
}
/* xs */
@media (max-width: 767px) {
.dl-title h1{ min-height:150px; font-size:1.6rem; }
.dl-title h1 i::before{ left:-30px; top:0; width:40px; }
.dl-title h1 i::after{ right:-30px; top:0; width:10px; }
.dl-title div{ padding: 35px 15px;  }
.down-a{ padding:0px 0px 60px; gap:20px; }
.done{ width:calc(50% - 10px); }
.donem h1{width: 100%; font-size:0.85rem; padding:10px;}
.donem div{ height:50px; padding:0px 10px; font-size:0.9rem;}

}

@media (max-width: 480px) {

}