@charset "utf-8";

/* 갤러리1 */
.latest-wrap { }
.latest { }
.latest-view { position: relative; overflow: hidden; }
.latest-view:before { z-index: 1; position: absolute; top: -10px; width: 100%; height: 10px; content: ''; display: block; box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.3); }
.latest-view:after { z-index: 1; position: absolute; bottom: -10px; width: 100%; height: 10px; content: ''; display: block; box-shadow: 0px -6px 20px 0px rgba(0, 0, 0, 0.3); }
.latest-view .detail-image { position: absolute; opacity: 0; transition: all 0.3s; margin: 5.5% 0; }
.latest-view .detail-image.is-active { position: relative; opacity: 1; }
.latest-view .detail-image img { display: block; max-width: 100%; }
.latest-view .wrap2 { position: relative; }
.latest-view .close-profile { position: absolute; right: 0; bottom: 5%; width: 95px; height: 92px; background: url(../imgs/close_profile.png) no-repeat; background-size: cover; text-indent: -99999px; cursor: pointer; }
.latest-list { position: relative; padding-top: 1%; padding-bottom: 6%; background: #f3f3f3; overflow: hidden; }
.latest-list ul { margin: 0 -0.95%; }
.latest-list ul:after { content: ''; display: table; clear: both; }
.latest-list ul li { float: left; width: 33.3333%; padding: 0 0.95%; padding-top: 5.5%; box-sizing: border-box; }
.latest-list ul li.empty { text-align: center; width: 100%; padding: 5% 0; font-size: 20px; }
.latest-list ul li a { display: block; position: relative; }
.latest-list ul li a > span { position: absolute; left: 0; bottom: 0; right: 0; padding: 5% 1%; background-color: rgba(0, 0, 0, 0.3); color: #fff; font-size: 20px; white-space: nowrap; overflow: hidden; text-align: center; letter-spacing: -0.075em; }
.latest-list ul li a img { display: block; width: 100%; height: auto; }
.latest-list ul li a .no-img + span { bottom: auto; top: 0; }
.latest-page { padding-top: 7%; text-align: center; }
.latest-page > i { display: inline-block; height: 48px; padding: 0 4.7%; vertical-align: top; }
.latest-page > i:before { content: ''; display: block; width: 2px; height: 32px; margin-top: 8px; background: #727470; }
.latest-page > a { display: inline-block; width: 72px; height: 48px; background-size: cover; background-position: 0 0; background-repeat: no-repeat; text-indent: -99999px; vertical-align: top; }
.latest-page .prev-btn { background-image: url(../imgs/prev_btn_off.png); }
.latest-page .prev-btn.is-on { background-image: url(../imgs/prev_btn_on.png); }
.latest-page .next-btn { background-image: url(../imgs/next_btn_off.png); }
.latest-page .next-btn.is-on { background-image: url(../imgs/next_btn_on.png); }
.latest-page .is-off { cursor: default; }

/* 갤러리2 */
.latest2-wrap { }
.latest2 { padding: 1px 0 6%; background: #636363; }
.latest-view .wrap2 { position: relative; overflow: hidden; }
.latest2 .item-list { margin: 0 -0.9%; }
.latest2 .item-list:after { content: ''; display: table; clear: both; }
.latest2 .item { float: left; width: 50%; padding: 0 0.9% 1.8%; box-sizing: border-box; opacity: 0; transition: all 0.3s; }
.latest2 .item.empty { text-align: center; width: 100%; font-size: 20px; padding: 5% 0; opacity: 1; color: #fff; }
.latest2 .item.loaded { opacity: 1; }
.latest2 .item .inner { position: relative; }
.latest2 .item .img { display: block; width: 100%; height: auto; }
.latest2 .item .subject { position: absolute; left: 0; bottom: 0; right: 0; padding: 5% 1%; background-color: rgba(0, 0, 0, 0.3); color: #fff; font-size: 20px; white-space: nowrap; overflow: hidden; text-align: center; letter-spacing: -0.075em; }
.latest2 .item .no-img + .subject { bottom: auto; top: 0; }
.latest2 .get-rows { margin: 4% auto 0; display: block; width: 59px; height: 93px; background: url(../imgs/more_profile2.png) no-repeat; background-size: cover; text-indent: -99999px; cursor: pointer; }

/* responsive */
@media (max-width:767px) {

    /* 갤러리1 */
    .latest-view .close-profile { width: 47.5px; height: 46px; }
    .latest-list ul li a > span { font-size: 2.5vw; }
    .latest-list ul li.empty { font-size: 14px; }
    .latest-page > i { height: 24px; }
    .latest-page > i:before { height: 16px; margin-top: 4px; width: 1px; }
    .latest-page > a { width: 36px; height: 24px; }

    /* 갤러리2 */
    .latest2 .item.empty { font-size: 14px; }
    .latest2 .item .subject { font-size: 2vw; }
    .latest2 .get-rows { width: 29.5px; height: 46.5px; }
}