<!-- footer -->
  <footer id="footer">
    <nav class="left_nav">
      <ul>
        <li><a href="#">Terms and conditions</a></li>
        <li><a href="#">Cookies</a></li>
      </ul>
    </nav>
    <nav class="right_methods">
      <h3>Payment Methods</h3>
      <ul>
        <li><span class="payment_icon one"></span></li>
        <li><span class="payment_icon two"></span></li>
        <li><span class="payment_icon three"></span></li>
        <li><span class="payment_icon four"></span></li>
        <li><span class="payment_icon five"></span></li>
      </ul>
    </nav>
    <a href="#" class="to_top_button"></a>
  </footer>
/*footer*/
#footer {
    position: relative;
    padding-bottom: 66px;
}

#footer .left_nav {
    padding-top: 20px;
    text-align: center;
}

#footer .left_nav li {
    padding: 5px 0;
}

#footer .right_methods {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 30px;
}

#footer .right_methods li {
    display: inline-block;
    padding: 7px 4px;
}

.payment_icon {
    display: inline-block;
    width: 30px;
    height: 20px;
}

/*띄어쓰기 주의 / 
.payment_icon .one : payment_icon부모 one자식
.payment_icon.one : payment_icon중에서 one이라는 클래스명 갖고있음*/

.payment_icon.one {
    background-color: black;
}

.payment_icon.two {
    background-color: red;
}

.payment_icon.three {
    background-color: pink;
}

.payment_icon.four {
    background-color: blue;
}

.payment_icon.five {
    background-color: gray;
}

.to_top_button {
    position: absolute;
    display: block;
    width: 66px;
    height: 66px;
    background-color: green;
    bottom: 0;
    left: 50%;
    margin-left: -33px;
}



@media (min-width: 60em) {
    #footer .left_nav {
        float: left;
        width: 50%;
        padding-top: 32px;
        padding-left: 40px;
        text-align: left;
    }
    #footer .right_methods {
      float: right;
      width: 50%;
      margin: 0;
      padding-top: 32px;
      padding-right: 40px;
      text-align: right;
    }

    #footer .left_nav a {
      font-size: 14px;
      padding: 0 5px;
    }

    #footer .right_methods li {
      padding: 0 4px;
    }

    #footer ul, #footer li, #footer h3 {
      display: inline-block;
      vertical-align: middle;
    } 
    #footer h3 {
      padding-right: 10px;
    }
}


/*모든 html 적용*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*body태그의 전체영역 확인 가능하기때문에 넣는게 좋다*/
html,
body {
    width: 100%;
    height: 100%;
}

ul,
li {
    list-style: none;
}

body {
    overflow-x: hidden;
    font-family: sans-serif;
    color: #585858;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

span {
    display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.