<footer id="audio_footer">
<div class="audio_container">
<h1>
<a href="#">audio clip</a>
</h1>
<div class="copyright_wrap">
<p>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
</p>
</div>
<nav class="footer_nav">
<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>
</nav>
<a href="#" class="footer_copyright_link">
<span class="symbol">©</span>네이버
</a>
</div>
</footer>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
button {
border: none;
}
input, textarea {
outline: none;
}
.clearfix {
clear: both;
}
body {
min-width: 1302px;
}
main {
overflow: hidden;
padding-top: 20px;
}
/* audio */
.audio_container {
width: 1080px;
margin: 0 auto;
}
/* audio - footer */
#audio_footer {
background-color: #eaecef;
padding: 48px 0 164px;
}
#audio_footer h1 {
font-size: 25px;
}
#audio_footer h1 a {
color: #959595;
}
#audio_footer .copyright_wrap {
margin-top: 37px;
}
#audio_footer .copyright_wrap p {
letter-spacing: -.5px;
font-size: 13px;
line-height: 19px;
color: #959595;
}
#audio_footer .footer_nav {
margin-top: 47px;
}
#audio_footer .footer_nav ul {
overflow: hidden;
}
#audio_footer .footer_nav li {
float: left;
}
#audio_footer .footer_nav li a {
font-size: 13px;
color: #959595;
}
#audio_footer .footer_nav li a:after {
display: inline-block;
content: "";
width: 2px;
height: 2px;
border-radius: 50%;
background-color: #959595;
margin: 4px 7px;
/*vertical-align: top;
margin: 11px 7px 0;*/ /* 기존 써오던 방식 */
}
#audio_footer .footer_nav li:last-child a:after {
content: none;
}
#audio_footer .footer_copyright_link {
display: block;
margin-top: 8px;
font-size: 12px;
color: #959595;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.