@charset "utf-8";

/*
 * File    : sub-resources.css
 * Author  : STUDIO-JT (KMS)
 *
 * CONTENT HUB
 * TECHNICAL LITERATURE
 * QUALITY CERTIFICATE
 * HOVER
 */



/* **************************************** *
 * CONTENT HUB
 * **************************************** */
/* FILTER */
.contenthub-filter__top { display: flex; align-items: stretch; justify-content: space-between; }

.contenthub-filter__bottom { display: none; }
.contenthub-filter__bottom-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 98rem; align-items: start; gap: 20rem; padding-top: 46rem; }

.contenthub-filter__button { display: inline-flex; align-items: center; gap: 20rem; margin: 0; padding: 0; color: inherit; background: transparent; border: none; cursor: pointer; }
.contenthub-filter__button > i { display: block; width: 28rem; height: 28rem; position: relative; top: -1rem; }
.contenthub-filter__button > i > svg { display: block; width: 100%; height: auto; }
.contenthub-filter__button > i > svg .contenthub-filter-icon__line { opacity: 0; transition: .2s; }
.contenthub-filter__button > i > svg .contenthub-filter-icon__vertical { transition: rotate .3s; transform-origin: center center; }
.contenthub-filter--open .contenthub-filter__button > i > svg .contenthub-filter-icon__vertical { rotate: -90deg; }
.contenthub-filter--open .contenthub-filter__button > i > svg .contenthub-filter-icon__line { opacity: 1; transition-delay: .15s; }

.contenthub-filter__category-title { display: flex; align-items: center; gap: 10rem; margin-bottom: 30rem; padding-bottom: 15rem; border-bottom: 1px solid var(--color-black); }
.contenthub-filter__category-title .jt-accent-icon { width: 18rem; flex-shrink: 0; }

.contenthub-filter__category-list .jt-checkbox { flex-direction: column; }

.contenthub-filter__reset { display: flex; align-items: center; gap: 10rem; margin: 0; padding: 0; color: inherit; background: transparent; border: none; cursor: pointer; transition: color .3s; }
.contenthub-filter__reset .jt-icon { width: 18rem; flex-shrink: 0; }
.contenthub-filter__top .contenthub-filter__reset { display: none; }

/* DATA */
.contenthub-data { margin-top: 80rem; }



/* **************************************** *
 * TECHNICAL LITERATURE
 * **************************************** */
/* CATEGORY */
.literature-category { display: flex; flex-direction: column; gap: 40rem; }

.literature-category__primary { display: flex; gap: 20rem; }
.literature-category__primary > li { flex: 1; position: relative; transition: background-color .3s; }
.literature-category__primary > li:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 0 1px var(--color-gray-300); transition: box-shadow .3s ease; pointer-events: none; }
.literature-category__primary a { display: block; padding-top: 100%; color: inherit; }
.literature-category__primary .jt-lazyload { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.literature-category__primary p { width: 100%; padding: 0 20rem; position: absolute; left: 0; bottom: 20rem; text-align: center; }
.literature-category__primary > li.literature-category--current { background: var(--color-gray-100); }
.literature-category__primary > li.literature-category--current:after { box-shadow: inset 0 0 0 3rem var(--color-black); }

.literature-category__secondary { display: flex; gap: 20rem; }
.literature-category__secondary > li { flex: 1; position: relative; transition: background-color .3s; }
.literature-category__secondary > li:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 0 1px var(--color-gray-300); transition: box-shadow .3s ease; pointer-events: none; }
.literature-category__secondary a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 19rem; text-align: center; color: inherit; }
.literature-category__secondary > li.literature-category--current { background: var(--color-gray-100); }
.literature-category__secondary > li.literature-category--current:after { box-shadow: inset 0 0 0 3rem var(--color-black); }

/* LIST */
.literature-list { display: flex; flex-direction: column; gap: 80rem; margin-top: 80rem; }
.literature-list__name { margin-bottom: 20rem; }



/* **************************************** *
 * QUALITY CERTIFICATE
 * **************************************** */
.certificate-info__title { margin-bottom: 80rem; }

.certificate-info__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; }
.certificate-info__list > li { display: flex; flex-direction: column; gap: 60rem; padding: 0 60rem 60rem; background: var(--color-gray-100); }
.certificate-info__list-logo { width: 160rem; }
.certificate-info__list-logo .jt-lazyload { padding-top: 100%; }
.certificate-info__list-text { height: 264rem; overflow: hidden; }
.certificate-info__list-desc { margin-top: 20rem; }
.certificate-info__list-buttons { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 20rem; }



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

    /* CONTENT HUB */
    .contenthub-filter__reset:hover { color: var(--color-primary); }
    .contenthub-filter__reset:hover .jt-icon path { fill: var(--color-primary); }

    /* TECHNICAL LITERATURE */
    .literature-category__primary > li:hover:after { box-shadow: inset 0 0 0 3rem var(--color-black); }
    
    .literature-category__secondary > li:hover:after { box-shadow: inset 0 0 0 3rem var(--color-black); }
    
}