@charset "utf-8";
/* ============================================================
   footer.css
   custom/include/footer.html 전용 공통 스타일.

   custom/*.html 화면들은 base.css/common.css 기반 화면(로그인, 찾기 등)과
   selectTwoFactor.css/twoFactorManage.css 기반 화면(2차 인증)으로 디자인
   시스템이 나뉘어 있어서, 어느 쪽을 쓰든 공통 footer.html을 그대로 스타일링
   할 수 있도록 footer 관련 규칙만 별도 파일로 분리했다.
   (공통 로고 배경 이미지가 실제 텍스트 줄 수보다 커서 위아래로 잘려 보이던
   문제를 min-height로 보정했다.)
   ============================================================ */

footer { height: 80px; background: #2E2E2E; }
footer .inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 60px; }

/*
  로고(inhatc_logo_w.svg, 186x45)를 배경으로 깔고 padding-left로 텍스트 자리를 만드는 방식.
  텍스트가 한 줄(예: 카피라이트 문구)만 남으면 박스 높이가 로고 높이(45px)보다 낮아져서
  로고 위아래가 잘려 보이므로, min-height로 로고가 온전히 보일 최소 높이를 보장한다.
*/
footer .footer_info {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding-left: 216px;
  font-size: 13px;
  color: #d4d4d4;
  background: url(../images/inhatc_logo_w.svg) no-repeat 0 50%;
}
footer .footer_info a { text-decoration: underline; color: #d4d4d4; }
footer .copy { margin: 0; }

footer .footer_sns { display: flex; align-items: center; }
footer .footer_sns li + li { margin-left: 7px; }
footer .footer_sns a { display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(204, 204, 204, 0.47); background: no-repeat 50% 50%; }
footer .footer_sns a.instar { background-image: url(../images/footer_instar.png); }
footer .footer_sns a.blog { background-image: url(../images/footer_blog.png); }
footer .footer_sns a.youtube { background-image: url(../images/footer_youtube.png); }
footer .footer_sns a.facebook { background-image: url(../images/footer_facebook.png); }

@media only screen and (max-width: 960px) {
	footer { height: auto; }
	footer .inner { display: block; padding: 30px 20px; }
	footer .footer_info { display: block; min-height: 0; padding: 60px 0 0; background-position: 0 0; }
	footer .footer_sns { margin-top: 20px; }
}