#snsShareToastPopup {
    position: fixed;
    bottom: -37px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    border-radius: 4px;
    overflow: hidden;
    z-index: 999;
    white-space: nowrap
}

#snsShareToastPopup.open {
    bottom: 65px;
    opacity: 1;
    transition: .3s ease-in;
    margin-bottom: env(safe-area-inset-bottom)
}

#snsShareToastPopup.open.hide-tabbar {
    bottom: 15px
}

#snsShareToastPopup.open.liveNudgeViewing {
    bottom: 103px
}

#snsShareToastPopup.close {
    bottom: -37px;
    opacity: 0;
    transition: .4s ease-out
}

#snsShareToastPopup .inner {
    display: flex;
    padding: 9px 20px;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    letter-spacing: 0
}

#snsSharePopupBottomUp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 0;
    height: 0;
    background-color: rgba(0,0,0,0);
    animation-duration: .25s
}

#snsSharePopupBottomUp .inner {
    position: fixed;
    width: 100%;
    overflow: hidden;
    z-index: 910;
    bottom: env(safe-area-inset-bottom);
    transform: translateY(150%);
    animation-duration: .25s;
    background-color: #fff;
    border-radius: 18px 18px 0 0
}

#snsSharePopupBottomUp .inner .header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

#snsSharePopupBottomUp .inner .header .title {
    font-size: 18px;
    font-weight: 700;
    color: #131518;
    padding-left: 15px
}

#snsSharePopupBottomUp .inner .header .button {
    width: 50px;
    height: 100%;
    background: url(../image/common/icon_sns_close.png) center/20px no-repeat
}

#snsSharePopupBottomUp .inner .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px 25px
}

#snsSharePopupBottomUp .inner .list li {
    width: 33.33%;
    height: 60px;
    margin: 15px 0
}

#snsSharePopupBottomUp .inner .list li a {
    display: block;
    width: 60px;
    margin: 0 auto
}

#snsSharePopupBottomUp .inner .list li img {
    width: 60px;
    height: 60px
}

#snsSharePopupBottomUp.enter {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    animation-name: sns-dimmer-enter
}

#snsSharePopupBottomUp.enter .inner {
    transform: translateY(0);
    animation-name: sns-bottom-sheet-enter
}

#snsSharePopupBottomUp.leave {
    animation-name: sns-dimmer-leave
}

#snsSharePopupBottomUp.leave .inner {
    animation-name: sns-bottom-sheet-leave
}

@keyframes sns-dimmer-enter {
    0% {
        background-color: rgba(0,0,0,0)
    }

    100% {
        background-color: rgba(0,0,0,.8)
    }
}

@keyframes sns-dimmer-leave {
    0% {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8)
    }

    100% {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0)
    }
}

@keyframes sns-bottom-sheet-enter {
    0% {
        transform: translateY(100%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes sns-bottom-sheet-leave {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(100%)
    }
}