@charset "utf-8";

/*
 * File    : sub-technologies.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * TECHNOLOGIES
 * ANALYZE
 * TEST LAB
 * CERTIFICATION
 * HOVER
 */

 

/* **************************************** *
 * TECHNOLOGIES
 * **************************************** */
/* INTRO */
.technologies-intro__list { position: relative; }
.technologies-intro__list:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2rem; background: var(--color-black); }
.technologies-intro__list > li { position: relative; display: flex; gap: 20rem; padding: 30rem 0; }
.technologies-intro__list > li:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-gray-400); }
.technologies-intro__list > li > b { width: 170rem; }
.technologies-intro__list > li > *:nth-child(2) { flex: 1; color: var(--color-gray-900); }
.technologies-intro__list > li > ul > li { position: relative; padding-left: 20rem; }
.technologies-intro__list > li > ul > li:before { content: ''; position: absolute; left: 4rem; top: calc(var(--font-lineheight-ko-07) / 2 - 1.5rem); width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-gray-700); }

/* CASE */
.technologies-case__image + .technologies-case__image { margin-top: 32rem; }



/* **************************************** *
 * ANALYZE
 * **************************************** */
.analyze-gallery { display: grid; gap: 32rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.analyze-gallery__item { position: relative; background: var(--color-gray-100); }
.analyze-gallery__item-content { padding: 40rem 40rem 20rem 40rem; }
.analyze-gallery__item-title { display: block; min-height: var(--font-lineheight-ko-06); }
.analyze-gallery__item-data { border-top: 2rem solid var(--color-black); margin-top: 16rem; max-width: 220rem; }
.analyze-gallery__item-data > li { display: flex; gap: 20rem; padding: 10rem 0; border-bottom: 1px solid var(--color-gray-400); }
.analyze-gallery__item-data > li > b { width: 70rem; }
.analyze-gallery__item-data > li > span { color: var(--color-gray-900); }

.analyze-gallery--rhk-bottom,
.analyze-gallery--rhk-heat,
.analyze-gallery--rhk-side,
.analyze-gallery--rhk-side-side { grid-template-columns: 1fr; }
.analyze-gallery--rhk-bottom .analyze-gallery__item-image .jt-lazyload,
.analyze-gallery--rhk-heat .analyze-gallery__item-image .jt-lazyload,
.analyze-gallery--rhk-side .analyze-gallery__item-image .jt-lazyload,
.analyze-gallery--rhk-side-side .analyze-gallery__item-image .jt-lazyload { padding-top: 55.48%; }
.analyze-gallery--bearing-cap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analyze-gallery--bearing-cap .analyze-gallery__item { display: flex; flex-direction: column; justify-content: space-between; }
.analyze-gallery--bearing-cap .analyze-gallery__item-image .jt-lazyload { padding-top: 89.75%; }
.analyze-gallery--journal-cross .analyze-gallery__item-image .jt-lazyload { padding-top: 74.82%; }
.analyze-gallery--notch-stress .analyze-gallery__item-image .jt-lazyload { padding-top: 64.68%; }
.analyze-gallery--york-torque .analyze-gallery__item-image .jt-lazyload { padding-top: 94.05%; }

.analyze-blueprint { margin-top: 240rem; }
.analyze-blueprint .jt-lazyload { padding-top: 17.59%; }

.article.analyze-kiln .article__visual-sticky .article__visual-content { background: rgba(0, 0, 0, .4); }
.article.analyze-kiln .analyze-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.article.analyze-kiln .analyze-gallery__item { border-radius: 12rem; }
.article.analyze-kiln .analyze-gallery__item-image .jt-lazyload { padding-top: 55.48%; }



/* **************************************** *
 * TEST LAB
 * **************************************** */
.article.testlab .article__visual-content { background: rgba(0, 0, 0, .6); }
.testlab-support__container { display: flex; gap: 32rem; }
.testlab-support__container > a { flex: 1; position: relative; display: block; border-radius: 30rem; overflow: hidden; }
.testlab-support__container > a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-black); opacity: .2; z-index: 1; transition: opacity .3s; }
.testlab-support__container > a.testlab-support--roll:before { opacity: .3; }
.testlab-support__inner { padding-top: 69.93%; }
.testlab-support__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.testlab-support__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4rem; padding: 20rem; text-align: center; justify-content: center; color: var(--color-white); z-index: 1; }
.testlab-support__desc { opacity: .8; }
.testlab-support__icon { position: relative; width: 38rem; margin: 0 auto; height: 0; overflow: hidden; opacity: 0; transition: margin .3s, height .3s, opacity .3s; }
.testlab-support__icon .jt-icon { position: absolute; top: 0; width: 100%; height: 100%; }
.testlab-support__icon .jt-icon:nth-child(1) { left: -100%; opacity: 0; }
.testlab-support__icon .jt-icon:nth-child(2) { left: 0; }
.testlab-support__icon .jt-icon svg path { fill: var(--color-white); }

.testlab-step__list { counter-reset: item; border-top: 2rem solid var(--color-black); }
.testlab-step__list > li { display: flex; align-items: center; padding: 40rem 0; gap: 20rem; border-bottom: 1px solid var(--color-gray-400); }
.testlab-step__list > li > b { flex: 1; position: relative; padding-left: 44rem; }
.testlab-step__list > li > b:before { counter-increment: item; content: '0'counter(item)'.'; position: absolute; left: 0; color: var(--color-primary); }
.testlab-step__list > li > p { width: 69.39%; max-width: 816rem; color: var(--color-gray-900); }

/* Kiln & Roll */
.article.testlab-kiln .article__visual-content, .article.testlab-roll .article__visual-content { background: rgba(0, 0, 0, .4); }
.article__section-head:has(.testlab-banner) { margin-bottom: 40rem; }
.testlab-banner { margin: 60rem 0 80rem; }
.testlab-banner .jt-lazyload { padding-top: 51.02%; }
.testlab-data { border-top: 2rem solid var(--color-black); }
.testlab-data > li { display: flex; gap: 20rem; padding: 30rem 0; border-bottom: 1px solid var(--color-gray-400); }
.testlab-data > li > b { width: 188rem; }
.testlab-data__content { flex: 1; color: var(--color-gray-900); }
.testlab-data__content ul > li { position: relative; padding-left: 20rem; }
.testlab-data__content ul > li:before { content: ''; position: absolute; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-gray-700); left: 4rem; top: calc(var(--font-lineheight-ko-07) / 2 - 1.5rem); }
.testlab-data__gallery {  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20rem; }
.testlab-data__gallery-item .jt-lazyload { padding-top: 76.92%; }

#lab-equipment .testlab-data > li > b { width: 468rem; }

.testlab-example { background: var(--color-gray-200); margin-top: 60rem; padding: 60rem; }
.testlab-example__head { display: flex; gap: 20rem; justify-content: space-between; }
.testlab-example__head-title { flex: 1; }
.testlab-example__head-title p { margin-top: 20rem; color: var(--color-gray-900); }
.testlab-example__head-image { width: 42.24%; max-width: 446rem; }
.testlab-example__head-image .jt-lazyload { padding-top: 36.77%; }
.testlab-example__head-image .jt-lazyload__color-preview { background: transparent; }
.testlab-example__head-image--mobile { display: none; }
.testlab-example__content { margin-top: 40rem; }
.testlab-example__step { background: var(--color-white); padding: 20rem; }
.testlab-example__step-image { margin: 30rem auto; }
.testlab-example__step-image--mobile { display: none; }

#brush-test-line .testlab-example__step-image { max-width: 1010rem; }
#brush-test-line .testlab-example__step-image .jt-lazyload { padding-top: 10.69%; }

#high-speed-cleaning-line .testlab-example__step-image { max-width: 946rem; }
#high-speed-cleaning-line .testlab-example__step-image .jt-lazyload { padding-top: 16.7%; }

.testlab-example__attachment { margin-top: 24rem; }
.testlab-example__attachment > a { display: inline-flex; justify-content: space-between; align-items: center; vertical-align: top; padding: 12rem 24rem 12rem 32rem; gap: 8rem; background: var(--color-black); color: var(--color-white); border-radius: 100rem; transition: background .3s; }
.testlab-example__attachment span { flex: 1; }
.testlab-example__attachment .jt-icon { width: 24rem; height: 24rem; }
.testlab-example__attachment .jt-icon svg path { fill: var(--color-white); }

.testlab-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20rem; }
.testlab-faq__list > li { display: flex; align-items: center; background: var(--color-gray-100); min-height: 120rem; padding: 30rem 40rem; }
.testlab-faq__answer { background: var(--color-gray-300); color: var(--color-black); margin-top: 20rem; text-align: center; padding: 40rem; }



/* **************************************** *
 * CERTIFICATION
 * **************************************** */
.article.certification .article__visual-sticky .article__visual-content { background: rgba(0, 0, 0, .4); }
.certification-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60rem; }
.certification-thumb { position: relative; }
.certification-thumb:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--color-gray-400); box-sizing: border-box; }
.certification-thumb .jt-lazyload { padding-top: 140.56%; }
.certification-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.certification-list > li > a { cursor: zoom-in; }
.certification-list > li > a > p { margin-top: 12rem; color: var(--color-black); }



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

    /* TEST LAB */
    .testlab-support__container > a.jt-hoverintent--allow:hover:before { opacity: .3; }
    .testlab-support__container > a.jt-hoverintent--allow.testlab-support--roll:hover:before { opacity: .4; }
    .testlab-support__container > a.jt-hoverintent--allow:hover .testlab-support__icon { margin-top: 18rem; height: 18rem; opacity: 1; }
    .testlab-support__container > a.jt-hoverintent--allow:hover .testlab-support__icon .jt-icon:nth-child(1) { transition: .3s left .3s cubic-bezier(0, 0.75, 0.25, 1), .3s opacity .3s; left: 0; opacity: 1; }
    .testlab-support__container > a.jt-hoverintent--allow:hover .testlab-support__icon .jt-icon:nth-child(2) { left: 100%; }
    
    .testlab-example__attachment > a:hover { background: var(--color-primary); }

}