.sns_img_viewer_wrap {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;

    -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
body.sns_img_viewer_open {
    overflow:hidden;
    /*position:fixed;*/
}
.sns_img_viewer_wrap.sns_img_viewer_open {
    opacity:1;
    visibility:visible;
    z-index:10000;
}

.overlay_bg_viewer {
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    opacity:.95;
    filter:(opacity=95);
    left:0;
    top:0;
    z-index:999;
}
.viewer_box_wrap {
    position:relative;
    top:0;
    z-index:1000;
    margin:0 auto;
    text-align:center;
    width:100%;
    height:100%;
    overflow:hidden;
    min-width:320px;
    /*overflow-y:auto;*/
}
.sns_viewer_close {
    background:url(../images/viewer_bg.png);
    background-repeat:no-repeat;
    background-position:0 0;
    width:25px;
    height:25px;
    display:inline-block;
    position:absolute;
    right:20px;
    top:20px;
}
.btn_sns_prev {
    position:absolute;
    display:inline-block;
    width:25px;
    height:23px;
    background:url(../images/viewer_bg.png);
    background-repeat:no-repeat;
    background-position:-74px 0;
    top:50%;
    margin-top:-11px;
    left:11%;
}
.btn_sns_next {
    position:absolute;
    display:inline-block;
    width:25px;
    height:23px;
    background:url(../images/viewer_bg.png);
    background-repeat:no-repeat;
    background-position:-161px 0;
    top:50%;
    margin-top:-11px;
    right:11%;
}
.viewer_slide_wrap {
    /*padding:128px 0;
    overflow:hidden;*/
    /*position: fixed !important;*/
    position:absolute;
    background: rgba(0,0,0,0.6) !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow:hidden;
    overflow-y:scroll;
}
.viewer_slide_wrap ul {
    overflow:hidden;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.viewer_slide_wrap ul li {
    display:inline-block;
    vertical-align:middle;
    opacity:0.5;
    filter:alpha(opacity=50);
    width:620px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    margin: 0 0 0px -310px;
    visibility:hidden;
    display:none;
}
.viewer_slide_wrap ul li.show {
    display:inline-block;
}
.viewer_slide_wrap  ul li.on {
    opacity: 1;
    filter:alpha(opacity=100);
}
.viewer_slide_wrap  ul li.show {
    visibility:visible;
}
.viewer_slide_wrap.sns_viewer_animatable ul li.show {
    -webkit-transition: -webkit-transform 0.5s ease, margin 0.5s ease;
    transition: transform 0.5s ease, margin 0.5s ease, opacity 0.5s ease;
}
.sns_viewer {
    padding:15px;
    background:#fff;
    position:relative;
    width:100%;
    cursor:pointer;
}
.sns_view_top {
    display:inline-block;
    text-align:left;
    position:relative;
    width:100%;
}
.sns_type {
    position:absolute;
    top:25px;
    text-indent:-9999px;
    right:25px;
    background:url(../images/viewer_bg.png);
    background-repeat:no-repeat;
    width:37px;
    height:37px;
    display:inline-block;
}
.sns_type.google {
    background-position:-464px -133px;
}
.sns_type.facebook {
    background-position: -52px -133px;
}
.sns_type.twitter {
    background-position:0 -133px;
}
.sns_type.youtube {
    background-position: -103px -133px;
}
.sns_type.pinterest {
    background-position: -155px -133px;
}
.sns_type.linkedin {
    background-position: -206px -133px;
}
.sns_type.flickr {
    background-position: -258px -133px;
}
.sns_type.vimeo {
    background-position: -309px -133px;
}
.sns_type.dribbble {
    background-position: -361px -133px;
}
.sns_type.rss {
    background-position: -412px -133px;
}
.sns_type.sound {
    background-position: -515px -133px;
}
.sns_type.instagram {
    background-position: -567px -133px;
}
.sns_type.foursquare {
    background-position: -618px -133px;
}
.sns_type.kakaostory {
    background-position: -670px -133px;
}
.sns_type.naverblog {
    background-position: -721px -133px;
}
.sns_type.tumblr {
    background-position: -773px -133px;
}
.sns_viewer img {
    width:100%;
}
.sns_viewer_content {
    padding:20px 55px 20px 0;
    /*line-height:1;*/
    /*width:523px;*/
}
.sns_viewer_tit {
    text-align:left;
    font-size:14px;
    color:#232427;
    font-weight:bold;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    word-wrap:normal;
    margin-bottom:20px;
}
.sns_viewer_txt {
    text-align:left;
    font-size:13px;
    color:#706f6e;
    display:block;
    line-height:1.5;
    /*text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    word-wrap:normal;*/
}
.sns_viewer_txt a {
    word-break:break-all;
    line-height:17px;
    color:#5e9fca;
}
.sns_viewer_content:first-child .sns_viewer_txt:nth-child(3) {
    text-align:left;
    font-size:13px;
    color:#706f6e;
    margin-top:18px;
    /*overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;*/
    height: auto;
    line-height:1.5;
    /*white-space:normal;*/
}

.sns_viewer_foot {
    border-top:1px solid #edeeef;
    width:100%;
    text-align:left;
    padding:14px 0 5px 0;
    position:relative;
}
.meta_infobox {
    display:inline-block;
    width:70%;
}
.meta_infobox .user_info:first-child {
    padding-left:0;
}
.profile_user {
    display:inline-block;
    position:absolute;

}
.profile_user img {
    width:50px;
    height:50px;
    border-radius:50%;
}
.meta_infobox .user_info {
    display:inline-block;
    width:90%;
    padding-left:65px;
    padding-top:5px;
    height:50px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    word-wrap:normal;
}
.user_name {
    display:block;
}
.posted_box {
    display:inline-block;
    margin-top:4px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    word-wrap:normal;
}
.posted_box  .date {
    margin-left:5px;
}
.sns_share_box {
    display:inline-block;
}
.viewer_social_box {
    background:url(../images/viewer_bg.png);
    background-position:0px -60px;
    background-repeat:no-repeat;
    width:22px;
    height:22px;
    display:inline-block;
    cursor:pointer;
    /*position:relative;*/
}
.viewer_socials_share {
    display:inline-block;
    background:url(../images/viewer_bg.png);
    background-position:-52px -60px;
    background-repeat:no-repeat;
    width:14px;
    height:21px;
    margin-left:30px;
    cursor:pointer;
    position:relative;
}
.viewer_sns_share_box {
    display:inline-block;
    position:absolute;
    right:0;
    top:30px;
    width:30%;
    text-align:right;
}

.viewer_social_box .social_mentions {
    display: none;
    min-width: 52px;
    padding: 11px 10px;
    border: 1px solid #dcdcdc;
    position: absolute;
    bottom: 35px;
    right: 30px;
    background: #fff;
    text-align: left;
    z-index: 1;
}
.viewer_social_box.on .social_mentions {
    display:block;
}
.viewer_social_box .social_mentions a {
    display: block;
    padding: 5px 0;
    position: relative;
}

.viewer_socials_share .social_sns {
    display: none;
    min-width: 120px;
    padding: 11px 10px;
    border: 1px solid #dcdcdc;
    position: absolute;
    bottom: 30px;
    left: -83px;
    background: #fff;
    text-align: left;
    z-index: 1;
}
.viewer_socials_share.on .social_sns {
    display:block;
}
.viewer_sns_share_box .social_mentions .social_like {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: 0px -38px;
    background-repeat: no-repeat;
    width: 16px;
    height: 14px;
    cursor: pointer;
    position: relative;
    top: 3px;
}
.viewer_sns_share_box .social_mentions .cnt_mention {
    margin-left:5px;
    color:#9899a3;
}
.viewer_sns_share_box .social_mentions .social_shares {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: 0px -65px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: relative;
    top: 3px;
}
.viewer_sns_share_box .social_mentions .social_comment {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: 0px -92px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: relative;
    top: 3px;
}
.viewer_social_box .social_mentions:after {
    transform: rotate(45deg);
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    position: absolute;
    bottom: -5px;
    border-top-width: 0;
    border-right-width: 1px;
    border-left-width: 0;
    border-bottom-width: 1px;
    border-color: #dcdcdc;
    border-style: solid;
    right: 15px;
}

.viewer_socials_share .social_sns a {
    display: block;
    padding: 5px 0;
    position: relative;
}

.viewer_socials_share .social_sns .facebook {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: -28px -34px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    top: 6px;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.viewer_socials_share .social_sns a:hover .facebook {
    background:#4c76be url(../images/sns_icon_Bg.png);
    background-position:-58px -34px;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.viewer_socials_share .social_sns .twitter {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: -29px -59px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    top: 6px;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.viewer_socials_share .social_sns a:hover .twitter {
    background:#00c7ff url(../images/sns_icon_Bg.png);
    background-position:-59px -59px;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.viewer_socials_share .social_sns .google {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: -29px -88px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    top: 6px;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.viewer_socials_share .social_sns a:hover .google {
    background:#fc5345 url(../images/sns_icon_Bg.png);
    background-position:-59px -88px;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.viewer_socials_share .social_sns .kakao_story {
    display: inline-block;
    background: url(../images/sns_icon_Bg.png);
    background-position: -30px -116px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    top: 6px;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.viewer_socials_share .social_sns a:hover .kakao_story {
    background:#ffe600 url(../images/sns_icon_Bg.png);
    background-position:-30px -116px;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.viewer_socials_share .social_sns:after {
    transform: rotate(45deg);
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    position: absolute;
    bottom: -5px;
    border-top-width: 0;
    border-right-width: 1px;
    border-left-width: 0;
    border-bottom-width: 1px;
    border-color: #dcdcdc;
    border-style: solid;
    right: 20px;
}

@media screen and (max-width:767px){
    .img_viewer_box {
        /*position:relative;*/
    }
    .viewer_box_wrap {
        overflow:hidden;
    }
    .viewer_slide_wrap {
        overflow:hidden;
    }
    .viewer_slide_wrap ul li {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        visibility:hidden;
        /*overflow-y:scroll;*/
        overflow:hidden;
        background:#fff;
    }
    .viewer_slide_wrap ul li.show {
        visibility:hidden;
    }
    .viewer_slide_wrap ul{
        width:100% !important;
        overflow:hidden;
    }
    .viewer_slide_wrap ul li.on {
        z-index:100;
        display:block;
        margin:0;
        padding-top:0;
        visibility:visible;
    }
    .sns_viewer_close {
        z-index:999;
    }
    .sns_viewer {
        padding:0;
        height:100%;
        /*top:50%;
        margin-top:-242px;*/
    }
    .sns_viewer_content {
        padding: 20px 10px;
        /*line-height: 1;*/
    }
    .sns_viewer_foot {
        padding:14px 10px 5px 10px;
        position:fixed;
        bottom:0;
        background:#fff;
    }
    .viewer_sns_share_box {
        right:10px;
    }
    .sns_type {
        top:14px;
        left:20px;
    }
    .btn_sns_next, .btn_sns_prev {
        display:none;
    }
    .sns_viewer .sns_viewer_content:first-child {
        padding:80px 10px 20px 10px;
    }
    .sns_viewer .sns_viewer_content:first-child .sns_type {
        left:10px;
    }
    .sns_viewer .sns_viewer_content .sns_viewer_txt {
        /*max-height:68px;*/
        overflow:hidden;
    }
    .sns_viewer .sns_viewer_content:first-child .sns_viewer_txt {
        max-height:310px;
        overflow:hidden;
    }
}