@charset "UTF-8";

/* ==========================================================================
   SNS share
   ========================================================================== */

.fix-box {
    position: fixed;
    top: auto;
    bottom: 70px;
    right: 6.8%;
    z-index: 90;
    text-align: center;
}

.fix-box>li {
    position: relative;
}

.fix-box>li:not(:last-child) {
    margin-bottom: 4px;
}

.fix-box>li>a {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}

.fix-box>li ul {
    display: none;
    position: absolute;
    top: auto;
    bottom: 70px;
    left: 7px;
    z-index: 1;
    border-radius: 25px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
}

.fix-box>li li {
    padding: 0 10px;
    width: 45px;
    height: 50px;
}

.fix-box>li li a {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.fix-box>li li:not(:last-child) a {
    border-bottom: 1px solid #e5e5e5;
}

.fix-box>li li.facebook a {
    background-image: url('../images/ic-facebook.png');
}

.fix-box>li li.twitter a {
    background-image: url('../images/ic-twitter.png');
}

.fix-box>li li.kakao a {
    background-image: url('../images/ic-kakao.png');
}

.fix-box>li li.blog a {
    background-image: url('../images/ic-blog.png');
}

.btn-share {
    background-image: url('../images/ic-share.png');
    background-color: rgba(0, 162, 179, .9);
}

.btn-top {
    background-image: url('../images/ic-top.png');
    background-color: rgba(23, 129, 209, .8);
}

.fix-box>li.on .btn-share {
    background-image: url('../images/ic-close2.png');
    background-color: rgba(26, 26, 26, .8)
}

.fix-box.main-fix {
    top: auto;
    bottom: 70px;
}