티스토리 뷰
<footer id="footer">
<div id="footer_sns">
<div class="container">
<div class="footer_sns">
<ul>
<li class="icon s1"><a href="#"><span class="ir_pm">트위터</span></a></li>
<li class="icon s2"><a href="#"><span class="ir_pm">페이스북</span></a></li>
<li class="icon s3"><a href="#"><span class="ir_pm">인스타그램</span></a></li>
<li class="icon s4"><a href="#"><span class="ir_pm">구글 플레이</span></a></li>
<li class="icon s5"><a href="#"><span class="ir_pm">아이폰 앱스토어</span></a></li>
</ul>
<div class="tel">
<a href="#">ARS <em>1544-0070</em></a>
</div>
</div>
</div>
</div>
<!--//footer_sns-->
<div id="footer_info">
<div class="container">
<div class="row">
<div class="footer_info">
<h2><img src="assets/img/logo_footer.png" alt="메가박스"></h2>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">채용정보</a></li>
<li><a href="#">제휴/광고/부대사업 문의</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">고객센터</a></li>
<li><a href="#">윤리경영</a></li>
</ul>
<address>
<p>서울특별시 강남구 도산대로 156, 2층 메가박스중앙(주) (논현동, 중앙엠앤비사옥)<br><span class="bar2">대표자명 김진선</span> 개인정보보호 책임자 경영지원실 실장 박영진<br><span class="bar2">사업자등록번호 211-86-59478</span> 통신판매업신고번호 제 833호</p>
<p>Copyright 2014 by MegaboxJoongAng Inc. All right reserved</p>
</address>
</div>
</div>
</div>
</div>
</footer>
<!--//footer-->
style.css
/* footer */
.footer_sns {position: absolute;right: 17px; top: 33px; z-index: 1;}
.footer_sns ul li {width: 36px; height: 36px; display: inline-block; cursor: pointer; margin: 0 2px;}
.footer_sns ul li.s1 {background-position: 0 -375px;}
.footer_sns ul li.s2 {background-position: -36px -375px;}
.footer_sns ul li.s3 {background-position: -72px -375px;}
.footer_sns ul li.s4 {background-position: -108px -375px;}
.footer_sns ul li.s5 {background-position: -144px -375px;}
.footer_sns ul li.s1:hover {background-position: 0 -411px;}
.footer_sns ul li.s2:hover {background-position: -36px -411px;}
.footer_sns ul li.s3:hover {background-position: -72px -411px;}
.footer_sns ul li.s4:hover {background-position: -108px -411px;}
.footer_sns ul li.s5:hover {background-position: -144px -411px;}
.footer_sns .tel {text-align: right; padding-top: 5px; }
.footer_sns .tel a {color: #8f8f8f; font-size: 21px;}
.footer_sns .tel a em {color: #fff;}
.footer_info {padding: 50px 0; width: 80%;}
.footer_info h2 img{width: 150px; }
.footer_info ul {padding: 15px 0; }
.footer_info ul li {display: inline; padding-right: 16px; white-space: nowrap; position: relative;}
.footer_info ul li:after {content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px; background: #8f8f8f;}
.footer_info ul li:last-child:after{width: 0; }
.footer_info li a{color: #8f8f8f;}
.footer_info address p {color: #8f8f8f; margin-bottom: 15px;}
댓글
© 2018 webstoryboy