@charset "utf-8";
/*갤러리형*/

/*공통*/
.story_common_gallDiv{position:relative;}
.story_common_gallULa{position:relative; margin:0; padding:0; list-style:none;}
.story_common_gallULa:after{content:""; display:block; clear:both;}
.story_common_gallULa li{position:relative; float:left; margin-left:20px; margin-bottom:25px; vertical-align:top;} /*갤러리 좌측,하단간격*/
.story_common_gallULa li:first-child{margin-left:0;}
.story_common_gallULa li p{margin:0; padding:0;}
.story_common_gallULa li .thumb{position:relative; display:block; overflow:hidden; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} /*이미지 영역*/
.story_common_gallULa li .thumb:hover{}
.story_common_gallULa li .thumb.noimg{background-color:#f0f0f0;}
.story_common_gallULa li .thumb img{ width:100%; transition:all .4s;}
.story_common_gallULa li .thumb:hover img{transform:scale(1.06);}
.story_common_gallULa li .thumb .fa-picture-o{position:absolute; top:50%; left:50%; transform:translateX(-50%); margin-top:-10px; font-size:30px; color:#ccc;} /*이미지 없음시 아이콘*/
.story_common_gallULa li .comment{position:absolute; right:8px; bottom:8px; padding:5px 10px; background-color:rgba(0,0,0,0.3); font-weight:700; color:#fff; border-radius:15px; transition:all .4s;}
.story_common_gallULa li .comment i{vertical-align:top; margin-top:1px; font-size:13px; color:#ccc;}
.story_common_gallULa li .thumb:hover .comment{bottom:35px;}/* 오버 */
.story_common_gallULa li .title{position:absolute; width:100%; left:0; bottom:-30px; padding:0 10px; height:28px; line-height:28px; background-color:rgba(0,0,0,0.1); font-weight:700; color:#000; visibility:hidden; transition:all .4s, visibility 0.2s;}
.story_common_gallULa li .thumb:hover .title{bottom:0; background-color:rgba(0,0,0,0.4); color:#fff; visibility:visible;} /* 오버 */
.story_common_gallULa li .hot{position:absolute; top:8px; left:8px; padding:6px; background-color:rgba(0,0,0,0.60); color:#fff; border-radius:50%; z-index:3;}
.story_common_gallULa li .title .new{vertical-align:middle;}
.story_common_gallULa li.empty_li{width:100%; height:200px; line-height:200px; background-color:#f0f0f0; text-align:center; border-radius:8px;}
.story_common_gallULa.tapyes{padding-top:10px;} /*tap 있을때 상단간격*/

/*2타입*/
.story_common_gallULa li.type2 .comment, .story_common_gallULa li.type2 .thumb:hover .comment{bottom:auto;}
.story_common_gallULa li.type2 .comment{top:10px;}
.story_common_gallULa li.type2 .title, .story_common_gallULa li.type2 .thumb:hover .title{bottom:0; background-color:rgba(0,0,0,0.4); color:#fff; visibility:visible;}

/*3타입*/
.story_common_gallULa li.type3 .thumb{border-radius:50%;} /*이미지*/
.story_common_gallULa li.type3 .comment{right:auto; left:50%; transform:translateX(-50%);}
.story_common_gallULa li.type3 .thumb:hover .comment{bottom:55px;}
.story_common_gallULa li.type3 .title{height:48px; line-height:48px; text-align:center;}
.story_common_gallULa li.type3 .title .sv_member{color:#fff;} /* .sv_member 는 닉네임변수에 클래스 */


.story_common_gallDiv_responsive .story_common_gallULa li {
    width: calc(20% - 16px);
}

/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .story_common_gallDiv_responsive .story_common_gallULa li {
        width: calc(50% - 10px);
        margin-left: 20px;
        margin-bottom: 15px;
    }

    /* .story_common_gallDiv_responsive .story_common_gallULa li:nth-child(2n+1) {
        margin-left: 0;
    } */
}

/* 태블릿 대응 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .story_common_gallDiv_responsive .story_common_gallULa li {
        width: calc(33.333% - 13.333px);
        margin-left: 20px;
        margin-bottom: 20px;
    }

    /* .story_common_gallDiv_responsive .story_common_gallULa li:nth-child(3n+1) {
        margin-left: 0;
    } */
}