.container{
  width:100%;
  height:auto;
}
 .row{
  width:100%;
  margin:0 auto;
}
 .col{
  text-align:center;
  transition:all .5s ease;
  border:1px solid rgba(25,30,132,0);
  padding:80px 0 10px;
  width:20%;
  float:left;
}
 .wrap{
  text-align:center;
  padding:16px 0 14px 0;
  position:relative;
}
 .item_num{
  display:block;
  position:relative;
  font-size:16px;
  color:#fff;
  top:0;
  width:100%;
  transition:all .5s cubic-bezier(.23, 1, .38, 1) 0s;
}
 .item_num:before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,0);
  border-radius:50%;
  margin-top:-69px;
  margin-left:-37px;
  transition:all .5s cubic-bezier(.23, 1, .38, 1) 0s;
  transform:scale(1,1);
  z-index:5;
}
 .item_num:after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:25px;
  height:25px;
  background:rgba(216,186,117,.2);
  border-radius:50%;
  margin-top:-18px;
  margin-left:-13px;
  transition:all .5s cubic-bezier(.23, 1, .38, 1) 0s;
  transform:scale(1,1);
  z-index:5;
}
 .title{
  font-size:18px;
  color:#2e3c66;
  position:relative;
  text-align:center;
  margin:35px auto 0;
  width:80%;
  white-space:normal;
}
 .title:after{
  content:'';
  width:25px;
  height:1px;
  background-color:#2e3c66;
  display:block;
  margin:0 auto;
  margin-top:16px;
  transition:all .5s cubic-bezier(.23, 1, .38, 1) 0s;
}
 .subtitle{
  font-size:13px;
  color:rgba(255,255,255,0);
  margin-top:24px;
  transition:all .5s ease;
  margin:18px auto 0;
  width:80%;
  white-space:normal;
  line-height:25px;
  height:50px;
}
 .ellipsis{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:normal;
  display:block;
}
@media only screen and (min-width: 768px){
  
 .container {
    
    width: 100%;
    box-sizing: border-box;
    padding: 30px 0;
  }
 .icon_pic {
    width: 98px;
    height: 90px;
    display: inline-block;
    margin-bottom: 60px;
  }
 .item_num span {
    position: relative;
    z-index: 6;
    font-family: 'HELVETICANEUELTPRO-THEX';
  }
 .col:hover {
    border: 1px solid #2e3c66;

  }
 .col:hover  .item_num {
    margin-top: -30px;
  }
 .col:hover  .subtitle {
    color: #666;
  }
 .col:hover .item_num:after {
    transform: scale(5.5,5.5);
    background: rgba(217,185,122,.2);
    margin-top: -15px;
    box-shadow: 0px 0px 5px rgba(43, 43, 43, 0.36);
  }
}
@media only screen and (max-width: 768px){
  
 .col{width:32%;padding:10px 0;}
 .col img{max-width:70px;}
 .subtitle{display:none;}
}