@charset "utf-8";

/*
 * File    : sub-review.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LIST
 * HOVER
 */



/* **************************************** *
 * LIST
 * **************************************** */
.review-highlight__list .swiper-wrapper { display: grid; grid-template-columns: auto 512rem; gap: 20rem; }
.review-highlight__list .swiper-navigation { display: none; }
.review-highlight__item { position: relative; }
.review-highlight__thumb { position: relative; border-radius: 16rem; overflow: hidden; }
.review-highlight__thumb:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 52.94%, rgba(0, 0, 0, 0.30) 82.88%); }
.review-highlight__thumb .jt-lazyload { padding-top: 51.34%; transition: transform 1s; }
.review-highlight__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.review-highlight__title { position: absolute; inset: auto 30rem 30rem; color: var(--color-white); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }

.review-highlight__item:first-child { grid-row: 1 / span 2; }
.review-highlight__item:first-child .review-highlight__thumb:after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.16%, rgba(0, 0, 0, 0.20) 100%); }
.review-highlight__item:first-child .review-highlight__title { inset: auto 40rem 40rem; }

.review-list .jt-loadmore__btn { position: relative; display: inline-block; vertical-align: middle; padding: 14rem 40rem; min-width: 240rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-black); text-align: center; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-gray-400); border-radius: 8rem; cursor: pointer; transition: color .3s; }
.review-list .jt-loadmore__btn > span { position: relative; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* LIST */
    .review-highlight__list > li > a:hover .review-highlight__thumb .jt-lazyload { transform: scale(1.05); }
    .review-list .jt-loadmore__btn:hover { color: var(--color-primary); }

}