<footer id="main_footer">
    <div class="container">
      
      <ul class="news_lists">
        <li>
          <img src="https://via.placeholder.com/160x86">
          <div class="news_info">
            <span>부스트캠프 2021</span>
            <h3>온라인 설명회 신청하기</h3>
            <p>SW 개발자를 위한 교육 지원<br>
            꿀팁과 생생한 후기들!</p>
          </div>
        </li>
        <li>
          <img src="https://via.placeholder.com/160x86">
          <div class="news_info">
            <span>부스트캠프 2021</span>
            <h3>온라인 설명회 신청하기</h3>
            <p>SW 개발자를 위한 교육 지원<br>
            꿀팁과 생생한 후기들!</p>
          </div>
        </li>
        <li>
          <img src="https://via.placeholder.com/160x86">
          <div class="news_info">
            <span>부스트캠프 2021</span>
            <h3>온라인 설명회 신청하기</h3>
            <p>SW 개발자를 위한 교육 지원<br>
            꿀팁과 생생한 후기들!</p>
          </div>
        </li>
      </ul>

      <ul class="corp_lists">
        <li class="corp_item"><a href="#">회사소개</a></li>
        <li class="corp_item"><a href="#">인재채용</a></li>
        <li class="corp_item"><a href="#">제휴제안</a></li>
        <li class="corp_item"><a href="#">회사소개</a></li>
        <li class="corp_item"><a href="#">인재채용</a></li>
        <li class="corp_item"><a href="#">제휴제안</a></li>
      </ul>
    </div>
  </footer>
* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  vertical-align: middle;
}

.container {
  width: 1130px;
  margin: 0 auto;
} 


/* footer */
#main_footer {
  background-color: #fafbfc;
  border-top: solid 1px #e4e8eb;
  margin-top: 70px;
  padding-bottom: 92px;
}

#main_footer .news_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 24px 0;
}

#main_footer .news_lists li {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

#main_footer .news_lists li img {
  margin-right: 15px;
}

#main_footer .news_lists li .news_info {
  width: 172px; 
}

#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3,
#main_footer .news_lists li .news_info p {
  font-size: 13px;
}

#main_footer .news_lists li .news_info span {
  color: #58c464;
}

#main_footer .corp_lists {
  padding-top: 25px;
  border-top: solid 1px #e4e8eb;
}

#main_footer .corp_lists li {
  display: inline-block;
  vertical-align: middle;
}

/* 텍스트 사이에 | 넣어주기 */
#main_footer .corp_lists li:before {
  content:  ""; /* 빈 내용물을 넣어주기 */
  display: inline-block;

  width: 1px;
  height: 11px;
  background-color: #e4e8eb;

  margin: 0 8px;

  vertical-align: -1px;
}

#main_footer .corp_lists li:first-child:before {
  content: initial;
}

#main_footer .corp_lists li a {
  font-size: 12px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.