@charset "utf-8";

/*
 * File       : modules/grid/style.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT GRID LIST
 * 2) RWD
 */



/* **************************************** *
 * JT GRID LIST
 * **************************************** */
.jt-grid-list {margin-bottom: -2%;position: relative;}
.jt-grid-list:after {content: '';display: table;clear: both;}

.jt-grid-list__item {float: left;width: 48.5%;margin-right: 3%;margin-bottom: 3%;}
.jt-grid-list__item:nth-child(odd) {clear: both;}
.jt-grid-list__item:nth-child(even) { margin-right: 0; }

.jt-grid-list__link {display: block;position: relative;}
.jt-grid-list__link:after {content: '';border: 0.2rem solid #0f4c82;opacity: 0;margin: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: 300ms border, 150ms opacity;transition: 300ms border, 150ms opacity;-webkit-transition-delay: 0ms, 100ms;transition-delay: 0ms, 100ms;position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 2;}
html.desktop .jt-grid-list__link:hover:after {border-width: 6px;opacity: 1;-webkit-transition: 300ms border, 50ms opacity;transition: 300ms border, 50ms opacity;-webkit-transition-delay: 0ms, 0ms;transition-delay: 0ms, 0ms;}

.jt-grid-list__thumb {display: block;}
.jt-grid-list__thumb img {display: block;width: 100%;}

.jt-grid-list__content {padding: 1.5rem 7% 2rem; position: relative;}
.jt-grid-list__title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.7em; overflow: hidden; white-space: normal; font-size: 1.7rem; line-height: 1.35; font-weight: 600; color: #333; text-overflow: ellipsis;}
.jt-grid-list__title span br {display: none;}
.jt-grid-list__desc {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 3.2em;margin-top: 0.8rem;font-size: 1.4rem;font-weight: 400;line-height: 1.55;color: #666;text-overflow: ellipsis;overflow: hidden;}

.jt-grid-list__thumb.type_video { position: relative; }
.jt-grid-list__thumb.type_video:after { content: ''; border-top: 0.5rem solid transparent; border-left: 0.7rem solid #fff; border-bottom: 0.5rem solid transparent; position: absolute; bottom: 1.4rem; right: 1.4rem; width: auto; height: auto; z-index: 2;}

.jt-grid-list__thumb.type_series { position: relative; }
.jt-grid-list__thumb.type_series > i { width: 3.8rem; height: 3.8rem; background: #fff; position: absolute; bottom: 1.5rem; right: 1.5rem; border-radius: 50%; font-style: normal; }
.jt-grid-list__thumb.type_series > i:after { content: ''; border-top: 0.5rem solid transparent; border-left: 0.7rem solid #0f4c82; border-bottom: 0.5rem solid transparent; position: absolute; top: 50%; left: 50%; margin-top: -0.4rem; margin-left: -0.2rem; width: auto; height: auto; }
html.ios .jt-grid-list__thumb.type_series > i:after {margin-top:-0.5rem;}

/* Lazyload */
.jt-grid-list__thumb.jt-lazyload {padding-top: 50.52%;}


@media(min-width: 1024px){
	.jt-grid-list__thumb.type_video:after {border-top-width: 0.7rem; border-left-width: 1rem; border-bottom-width: 0.7rem; bottom: 2rem; right: 1.9rem;}
	.jt-grid-list__thumb.type_series > i {width: 5.5rem; height: 5.5rem; bottom: 3rem; right: 3rem;}
	.jt-grid-list__thumb.type_series > i:after {border-top-width: 0.7rem; border-left-width: 1rem; border-bottom-width: 0.7rem; margin-top: -0.6rem; margin-left: -0.3rem;}
}