@charset "utf-8";

/* 게시판 목록 */
#gallery-news-list { padding-bottom:50px }
#gallery-news-list .buttons { display:flex; justify-content: space-between; margin-bottom: 50px }
#gallery-news-list .buttons div { display:flex; align-items: center }
#gallery-news-list .buttons div .gs-btn {
    font-size: 15px;text-decoration: none; text-align: center;
    padding:.6em 1em;height:3em;
    cursor:pointer;
    display:flex;
    align-items: center;
    border:0;
    color:#191919;
    background:#f9f9f9;
}
#gallery-news-list .buttons div .gs-btn:hover {background: #dbdbdb;}
#gallery-news-list .buttons div .gs-btn input { width:15px; height:15px }

#gallery-news-list ul.list { display:flex; flex-wrap: wrap; }
#gallery-news-list ul.list li {background:#fff; overflow:hidden; position:relative; width:calc((100% - 84px) / 4); border:1px solid #e9e9e9; margin-right:28px; margin-bottom:28px }
#gallery-news-list ul.list li.empty_list { width:100% }
#gallery-news-list ul.list li:hover {
    -webkit-box-shadow: 28px 30px 30px -24px rgba(135,135,135,0.6);
    -moz-box-shadow: 28px 30px 30px -24px rgba(135,135,135,0.6);
    box-shadow: 28px 30px 30px -24px rgba(135,135,135,0.6);
}
#gallery-news-list ul.list li:nth-child(4n+4) { margin-right:0 }
#gallery-news-list ul.list li .contents { color:#191919; font-size:18px; padding:28px 28px 60px 28px }
#gallery-news-list ul.list li .check { position:absolute; left:10px; top:10px; z-index: 999 }
#gallery-news-list ul.list li .check input { width:15px; height:15px }
#gallery-news-list ul.list li .info { font-size:.8em; display:flex; justify-content: space-between; position:absolute; left:0; bottom:0; width:100%; padding:0 28px 28px 28px; color: #c6c6c6}
#gallery-news-list ul.list li .category {display:flex; align-items:center; color:#4876ef; font-size:.8em; margin-bottom: 15px}
#gallery-news-list ul.list li .category span { margin-right: 5px}
#gallery-news-list ul.list li .category span.bar { font-size:.8em; margin-top: -2px}
#gallery-news-list ul.list li h2 { font-weight: 400 }

#gallery-news-list ul.list li .tags { font-size:13px; padding-top:20px }
#gallery-news-list ul.list li .tags span {
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
    white-space: nowrap;
    display: inline-block;
    margin-right:5px; margin-bottom: 5px;
    border:1px solid #44eca7; border-radius: 20px; padding:0px 8px; background:#fff; color:#44eca7
}
#gallery-news-list ul.list li .tags span:hover {
    background:#44eca7;
    color:#fff;
}

#gallery-news-list ul.list li .line {
    -webkit-transition: all 0.3s 0s ease;
    -moz-transition: all 0.3s 0s ease;
    -o-transition: all 0.3s 0s ease;
    transition: all 0.3s 0s ease;
    position:absolute;background:#4876f0
}
#gallery-news-list ul.list li .line-r {right:0;top:-100%;width:1px; height:100%}
#gallery-news-list ul.list li .line-l {left:0;bottom:-100%;width:1px; height:100%}
#gallery-news-list ul.list li .line-t {left:-100%;top:0;width:100%; height:1px}
#gallery-news-list ul.list li .line-b {right:-100%;bottom:0;width:100%; height:1px}
#gallery-news-list ul.list li:hover .line-r {top:0}
#gallery-news-list ul.list li:hover .line-l {bottom:0}
#gallery-news-list ul.list li:hover .line-t {left:0}
#gallery-news-list ul.list li:hover .line-b {right:0}
#gallery-news-list ul.list li .disable-cover {display:none}
#gallery-news-list ul.list li.disable .disable-cover {
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute; z-index: 999;
    left:0;top:0;width:100%; height:100%;
    background:rgba(0,0,0,0.4);
    font-size:25px;
    font-weight: 800;
    text-align: center;
    color:rgba(255,255,255,0.6);
}

#gallery-news-list .pg_wrap {
    clear: both;
    text-align: center;
    float: none;
    display: block;
}

#gallery-news-list ul.list li .contents span.icon {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    background:#d0d0d0;
    padding:2px;
    font-size:12px;
    line-height: 12px;
    color:#fff;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: bottom;
    width:22px; height:22px
}
#gallery-news-list ul.list li .contents span.icon.new_icon {
    background-color:#3b96dc;
}
#gallery-news-list ul.list li .contents span.icon.hot_icon {
    background-color:#d13f4a;
}

#gallery-news-list ul.list li div.image {
    overflow:hidden;
    background-color: #efefef;
    height:278px;
    width:278px;
    font-size:35px;
    font-weight: 800;
    color:#d0d0d0;
    display:flex;
    justify-content: center;
    align-items: center;
}
#gallery-news-list ul.list li div img {
    width:100%;
    height:100%;
    object-fit: cover;
    transform:scale(1.0);             /*  default */
    transition: .3s ease-out;
}
#gallery-news-list ul.list li:hover div img {
    transition: .3s ease-in;
    transform:scale(1.2);          /*  default */
}

#gallery-news-list ul.list li .sns {
    position:absolute;
    left:10px; top:10px;
    width:40px; height:40px;
}