<div class="box">
  <div class="title-bar">
    <div class="title">
      범농협 사회공헌 활동
    </div>
    <div class="date">
      2020년 07월 16일 기준
    </div>
  </div>
  <div class="icon-bar flex">
    <div class="icon-box">
      <img src="https://nonghyup.com/images/main/icon_people.png" alt="">
      <div>참여시간</div>
      <div class="bg">525,987시간</div>
    </div>
    <div class="icon-box">
      <img src="https://nonghyup.com/images/main/icon_people.png" alt="">
      <div>참여인원</div>
      <div class="bg">117,633명</div>
    </div>
    <div class="icon-box">
      <img src="https://nonghyup.com/images/main/icon_office.png" alt="">
      <div>참여사무소수</div>
      <div class="bg">56,180개소</div>
    </div>
  </div>
  <div class="sns-bar flex">
    <div class="title flex">
      농협 SNS 미디어룸
    </div>
    <div class="sns-icon flex">
      <a href="http://www.facebook.com/nh.nhnonghyup" tartet="_blank" class="ico-facebook block" title="새창_농협 페이스북"><img src="https://junekorea.github.io/img1/ph/nonghyup/icon_facebook.png" alt=""></a>
      <a href="http://www.instagram.com/nh.nhnonghyup" tartet="_blank" class="ico-insta block" title="새창_농협 인스타그램"><img src="https://junekorea.github.io/img1/ph/nonghyup/icon_insta.png" alt=""></a>
      <a href="#"><img src="https://nonghyup.com/images/main/icon_time.png" alt=""></a>
    </div>
  </div>
</div>
body,ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex {
  display: flex;
}

.box {
  width: 365px;
  height:137px;
}

.box .title-bar > .title{
  font-size:22px;
  color:#252525;
  font-weight:700;
}

.box .title-bar > .date{
  text-align:right;
  font-size:12px;
  
}

.box > .icon-bar {
  display: flex;
}
.box > .icon-bar > .icon-box {
  text-align: center;
  flex: 1 0 0;
  border: 1px solid #d6e2e5;
  box-sizing:border-box;
}
.box > .icon-bar > .icon-box > img {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.box > .icon-bar > .icon-box > div {
  display:block;
  text-align:center;
  font-size:13px;
  color:#3b3b3b;
  font-weight:400;
  letter-spacing:-0.02rem;
  height:23px;
  line-height:23px;
  margin-top:5px ;
}
.box > .icon-bar > .icon-box > .bg {
  background-color: #f0f3f4;
  font-weight:700;
}
.box > .sns-bar {
  align-items: center;
  margin-top: 10px;
  background-color: #ebf3fc;
  border-radius: 5px;
  height: 50px;
}
.box > .sns-bar > .title {
  margin : 0 auto;
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.7px;
  
}
.box > .sns-bar > .sns-icon {
  margin-left: auto;
  margin-right:5px;
  align-items: center;
  height: 80%;
  border-radius: 10px;
  background-color: white;
}

.box > .sns-bar > .sns-icon > a {
  padding-left: 30px;
}
.box > .sns-bar > .sns-icon > a:last-child {
  padding-right: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.