#mobile-footer,
#member-box {
    display: none;
}

@media screen and (max-width: 767px) {
    #mobile-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
    }
    #mobile-footer li {
        border: 1px solid #EEE;
        border-width: 1px 1px 0;
        background: #FFF;
        width: 33.3%;
    }
    #mobile-footer li:nth-child(4) {
        background: #221616;
        border-color: #221616;
    }
    #mobile-footer a {
        text-align: center;
        line-height: 45px;
        position: relative;
    }
    #mobile-footer li .icon {
        background-image: url(../images/mobile_footer.png);
        width: 32px;
        height: 32px;
        vertical-align: middle;
    }
    #mobile-footer li a:hover .icon {
        opacity: 0.7;
    }
    #mobile-footer li:nth-child(1) .icon { background-position:     0 0; }
    #mobile-footer li:nth-child(2) .icon { background-position: -32px 0; }
    #mobile-footer li:nth-child(3) .icon { background-position: -64px 0; }
    #mobile-footer li:nth-child(4) .icon { background-position: -96px 0; }
    
    #mobile-footer .qty {
        position: absolute;
        top: 5px;
        left: 50%;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        background: #BC9848;
        line-height: 14px;
        padding: 0 4px;
        margin-left: 6px;
        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    
    #member-box {
        display: block;
        position: fixed;
        z-index: 400;
        bottom: 45px;
        left: 0;
        right: 0;
        color: #fff;
        max-height: 0;
        overflow: hidden;
        text-align: center;
        -webkit-transition: all .3s ease;
           -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
             -o-transition: all .3s ease;
                transition: all .3s ease;
    }
    #member-box.active {
        max-height: 500px;
    }
    #member-box li {
        border-bottom: 1px solid #fff;
    }
    #member-box li a {
        display: block;
        padding: 10px;
        background: #BC9848;
        font-size: 16px;
    }
    #member-box li a:hover {
        color: #fff;
        background: #9E7249;
        opacity: 1;
    }
    #member-box .qty {
        display: inline-block;
        background: #fff;
        font-size: 12px;
        color: #333;
        font-weight: bold;
        padding: 0 6px;
        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @-webkit-keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp;
    }

}