@charset "utf-8";

/*
 * File       : modules/article/style.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 * Dependency : css/jt-strap.css
 *
 * SUMMARY:
 * 01) ARTICLE LIST
 */



/* **************************************** *
 * ARTICLE LIST
 * **************************************** */
.jt-article-list-wrap { padding-bottom: 200rem; }
.jt-article-list-sort { position: absolute; top: -98rem; right: 0; font-size: 0; }
.jt-article-list-sort ul { margin: 0 -18rem; }
.jt-article-list-sort ul > li { position: relative; display: inline-block; vertical-align: top; }
.jt-article-list-sort ul > li:after { content: ''; display: block; width: 1rem; height: 15rem; background: #000; position: absolute; top: 4rem; right: -1rem; opacity: .3; }
.jt-article-list-sort ul > li:last-child:after { display: none; }
.jt-article-list-sort ul > li a { padding: 10rem 18rem; color: #666; transition: color .3s; }
.jt-article-list-sort ul > li a.active { color: #000; font-weight: 700; }
html.desktop .jt-article-list-sort ul > li a:hover { color: #000; }
.jt-article-list { margin-bottom: -196rem; font-size: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 30rem; -moz-column-gap: 30rem; column-gap: 30rem; }
.jt-article-list__item { margin: 0 0 195rem; }
.jt-article-list__item:nth-child(5n):not(:nth-child(10n)) { grid-column: span 2; }
.jt-article-list__item:nth-child(10n - 1) { grid-column: span 2; }
.jt-article-list__thumb { position: relative; display: block; width: 100%; }
.jt-article-list__thumb img { width: 100%; }
.jt-article-list__thumb img[data-unveil] { transform: scale(1) rotate(0deg); transition: opacity .3s, transform .3s ease-in-out; }
.jt-article-list__thumb .jt-autoplay--loaded .jt-background-video__vod { background: var(--color-primary); }
.jt-article-list__thumb-icon {position: absolute; bottom: 40rem; right: 40rem; width: 37rem; height: 37rem; z-index: 1; }
.jt-article-list__thumb-icon .jt-guide--icon svg path { fill: #fff; }
html.desktop .jt-article-list__thumb:hover img { transform: scale(1.05) rotate(0.1deg); }
.jt-article-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 14rem; }
.jt-article-list__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 2rem; }
.jt-article-list__desc:empty { display: none; }
.jt-article-list__date { display: block; margin-top: 9rem; color: #000; }

.jt-article-list__item--txt { position: relative; overflow: hidden; border-top: 0; padding: 0; height: 435rem; background: #191919; color: #fff; }
.jt-article-list__item--txt > * { position: relative; }
.jt-article-list__item--txt a { color: inherit; }
.jt-article-list__item--txt .jt-article-list__link { display: block; width: 100%; height: 100%; padding: 53rem 50rem; }
.jt-article-list__item--txt .jt-article-list__title { margin-top: 0; }
.jt-article-list__item--txt .jt-article-list__desc { margin-top: 8rem; }
.jt-article-list__item--txt .jt-article-list__date { position: absolute; bottom: 45rem; left: 50rem; margin-top: 0; color: #fff; }
.jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
.jt-article-list__item--txt:nth-child(10n - 1) { height: 678rem; }

.jt-article-list__item--vid .jt-article-list__thumb { padding-top: 56.25%; background: #f4f4f4; }
.jt-article-list__item--ad .jt-article-list__thumb { padding-top: 63.28%; }



/* **************************************** *
 * RWD
 * **************************************** */
@media( max-width: 1480px ){

    .jt-article-list-wrap { padding-bottom: 180rem; }
    .jt-article-list__item--txt { height: 360rem; }
    .jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
    .jt-article-list__item--txt:nth-child(10n - 1) { height: 500rem; }
}



@media( max-width: 1200px ){

    .jt-article-list { margin-bottom: -124rem; }
    .jt-article-list__item { margin-bottom: 124rem; }
    .jt-article-list__desc br { display: none; }
    .jt-article-list__thumb-icon { bottom: 24rem; right: 24rem; width: 30rem; height: 30rem; }
    .jt-article-list__item--txt { padding: 0; height: 320rem; }
    .jt-article-list__item--txt .jt-article-list__link { padding: 44rem 40rem; }
    .jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
    .jt-article-list__item--txt:nth-child(10n - 1) { height: 440rem; }
    .jt-article-list__item--txt .jt-article-list__date { left: 39rem; }
}



@media( max-width: 1023px ){

    .jt-article-list-wrap { padding-bottom: 150rem; }
    .jt-article-list-sort { top: -68rem; }
    .jt-article-list { -webkit-column-gap: 22rem; -moz-column-gap: 22rem; column-gap: 22rem; margin-bottom: -114rem; }
    .jt-article-list__item { margin-bottom: 114rem; }
    .jt-article-list__desc { -webkit-line-clamp: 2; }
    .jt-article-list__item--txt { padding: 0; height: 280rem; }
    .jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
    .jt-article-list__item--txt:nth-child(10n - 1) { height: 400rem; }
    .jt-article-list__item--txt .jt-article-list__link { padding: 35rem 36rem; }
    .jt-article-list__item--txt .jt-article-list__desc { margin-top: 10rem; }
    .jt-article-list__item--txt .jt-article-list__date { bottom: 38rem; left: 36rem; }
}



@media( max-width: 860px ){

    .jt-article-list-wrap { padding-bottom: 130rem; }
    .jt-article-list-sort { top: -55rem; }
    .jt-article-list-sort ul { margin: 0 -16rem; }
    .jt-article-list-sort ul > li a { padding: 10rem 16rem; }
    .jt-article-list-sort ul > li:after { height: 14rem; }
    .jt-article-list { grid-template-columns: 1fr 1fr; -webkit-column-gap: 22rem; -moz-column-gap: 22rem; column-gap: 22rem; margin-bottom: -85rem; }
    .jt-article-list__item { margin-bottom: 85rem; }
    .jt-article-list__item:nth-child(5n):not(:nth-child(10n)) { grid-column: auto; }
    .jt-article-list__item:nth-child(10n - 1) { grid-column: auto; }
    .jt-article-list__title { margin-top: 16rem; }
    .jt-article-list__desc { margin-top: 4rem; }
    .jt-article-list__item--txt { padding: 0; height: 300rem; }
    .jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
    .jt-article-list__item--txt:nth-child(10n - 1) { height: 300rem; }
    html.ios .jt-article-list-sort ul > li:after  { top: 2rem; }
    html.android .jt-article-list-sort ul > li:after { top: 3rem; }
}


@media( max-width: 540px ){

    .jt-article-list-wrap { padding-bottom: 100rem; }
    .jt-article-list-sort { top: -48rem; }
    .jt-article-list-sort ul { margin: 0 -14rem; }
    .jt-article-list-sort ul > li a { font-size: 13rem; padding: 10rem 14rem; }
    .jt-article-list-sort ul > li:after  { height: 12rem; }
    html.ios .jt-article-list-sort ul > li:after  { top: 2rem; }
    .jt-article-list { display: block; grid-template-columns: none; column-gap: 0; margin-bottom: 0; }
    .jt-article-list__item { margin-bottom: 45rem; }
    .jt-article-list__item:last-child { margin-bottom: 0; }
    .jt-article-list__title { margin-top: 14rem; }
    .jt-article-list__item--txt { padding: 0; height: 265rem; }
    .jt-article-list__item--txt:nth-child(5n):not(:nth-child(10n)),
    .jt-article-list__item--txt:nth-child(10n - 1) { height: 265rem; }
    .jt-article-list__item--txt .jt-article-list__link { padding: 33rem 30rem; }
    .jt-article-list__item--txt .jt-article-list__date { left: 30rem; }
}