@charset "utf-8";

/*
 * File    : sub-product.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LIST
 * SINGLE
 * CASE
 * KEYFRAMES
 * HOVER
 */

 

/* **************************************** *
 * LIST
 * **************************************** */
.article.product-list .article__body { margin-top: 0; }

/* VISUAL */
body.page-template-product-thermal .article__visual-bg { background-position: left center; }

/* LIST */
.product-list__title { margin-bottom: 24rem; }

.product-list__data { border-top: 2rem solid var(--color-black); border-bottom: 1px solid var(--color-gray-400); }
.product-list__data > ul > li { border-bottom: 1px solid var(--color-gray-400); }
.product-list__data > ul > li:last-child { border-bottom: 0; }
.product-list__data > ul > li > a { display: flex; gap: 80rem; padding: 20rem 0; }

.product-list__item-content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20rem; }
.product-list__item-icon { position: relative; width: 38rem; height: 18rem; overflow: hidden; }
.product-list__item-icon .jt-icon { position: absolute; top: 0; width: 100%; height: 100%; }
.product-list__item-icon .jt-icon:nth-child(1) { left: -100%; opacity: 0; }
.product-list__item-icon .jt-icon:nth-child(2) { left: 0; }
.product-list__item-title { display: block; color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.product-list__item-desc { color: var(--color-gray-900); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.product-list__item-thumb { max-width: 524rem; width: 44.56%; overflow: hidden; }
.product-list__item-thumb .jt-lazyload { padding-top: 57.25%; transition: scale .6s; }

.product-list__contact > a { display: flex; align-items: center; justify-content: space-between; gap: 20rem; height: 180rem; background: var(--color-primary); border-radius: 30rem; padding: 20rem 100rem; transition: border-radius .3s; }
.product-list__contact b { color: var(--color-white); flex: 1; }
.product-list__contact .jt-icon { width: 41rem; }
.product-list__contact .jt-icon svg path { fill: var(--color-white); }

/* CASE */
.product-case-list__slider { margin: 0 -16rem; }
.product-case-list__card { position: relative; width: 421rem; margin: 0 16rem; border-radius: 30rem; overflow: hidden; }
.product-case-list__card > a { display: block; padding-top: 152.02%; }
.product-case-list__card > 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 }
.product-case-list__card-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.product-case-list__card-content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 40rem 30rem; z-index: 1; }
.product-case-list__card-content span { display: block; color: var(--color-white); }
.product-case-list__card-content b { display: block; margin-top: 8rem; color: var(--color-white); }
.product-case-list__card-icon { position: relative; width: 38rem; height: 0; overflow: hidden; opacity: 0; transition: margin .3s, height .3s, opacity .3s; }
.product-case-list__card-icon .jt-icon { position: absolute; top: 0; width: 100%; height: 100%; }
.product-case-list__card-icon .jt-icon:nth-child(1) { left: -100%; opacity: 0; }
.product-case-list__card-icon .jt-icon:nth-child(2) { left: 0; }
.product-case-list__card-icon .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * SINGLE
 * **************************************** */
.main-container:has(.article.product-single) { padding-bottom: 0; }

.article.product-single .article__visual-bg { animation: zoomIn 2s cubic-bezier(0, 0, 0, 1) forwards; }
.article.product-single .article__visual-bg:before { opacity: .5; }
.article.product-single .article__body { padding-top: 0; margin-top: 0; }

.product-single__container { display: flex; align-items: stretch; justify-content: space-between; }

.product-single__sticky { flex: 1; border-right: 1px solid var(--color-gray-400); }
.product-single__sticky-inner { position: sticky; top: 0; padding: 160rem 80rem 240rem 0; max-height: 100vh; overflow-y: auto; scrollbar-width: none; }
.product-single__sticky-inner::-webkit-scrollbar { display: none; }
.product-single__sticky-list { margin-top: 40rem; }
.product-single__sticky-list > li + li { margin-top: 24rem; }
.product-single__sticky-list > li > ul { margin-top: 8rem; }
.product-single__sticky-list > li > ul > li > a { color: var(--color-gray-700); transition: color .3s; }
.product-single__sticky-list > li > ul > li + li { margin-top: 2rem; }
.product-single__sticky-list > li > ul > li > a.product-single__sticky--active { color: var(--color-black); text-decoration: underline; text-decoration-thickness: 2rem; text-underline-offset: 7rem; }

.product-single__content { width: 79.57%; max-width: 1176rem; }
.product-single__content-inner { max-width: 891rem; margin: 0 auto; padding: 160rem 0 240rem; }
.product-single__content .jt-lazyload img { height: 100%; object-fit: cover; }

.product-single__desc { margin-top: 12rem; color: var(--color-gray-900); }

.product-single__visual { margin-top: 40rem; }
.product-single__visual .jt-lazyload { padding-top: 49.38%; }

.product-section { margin-top: 120rem; }
.product-section:first-child { margin-top: 0; }

.product-section__title { margin-bottom: 24rem; }

.product-section__content p { color: var(--color-gray-900); margin-bottom: 24rem; }
.product-section__content > *:last-child { margin-bottom: 0; }

.product-component__image { margin-bottom: 40rem; }
.product-component__image > span { display: block; margin-top: 12rem; color: var(--color-gray-900); }

.product-component__gallery { display: flex; flex-wrap: wrap; margin: 0 -18rem 40rem; gap: 40rem 0; }
.product-component__gallery-item { position: relative; width: 273rem; margin: 0 18rem; }
.product-component__gallery-item .jt-lazyload { padding-top: 73.26%; }
.product-component__gallery-item > span { display: block; margin-top: 12rem; color: var(--color-gray-900); }
.product-component__gallery.jt-gallery--order { counter-reset: item; }
.product-component__gallery.jt-gallery--order .product-component__gallery-item:before { counter-increment: item; content: counter(item); position: absolute; top: 0; left: 0; background: var(--color-black); color: var(--color-white); display: flex; align-items: center; justify-content: center; width: 28rem; height: 28rem; font-size: var(--font-size-ko-10); line-height: var(--font-lineheight-ko-10); letter-spacing: var(--letter-spacing-02); font-weight: 700; z-index: 1; }
.product-component__gallery.jt-gallery--order .product-component__gallery-item > span { text-align: center; }

.product-section .jt-table { margin-bottom: 32rem; }
.product-section .jt-table:last-child { margin-bottom: 0; }
.product-section .jt-table table { margin-bottom: 0; }

.product-section table { border-collapse: collapse; width: 100%; border-bottom: 1px solid var(--color-gray-400); margin-bottom: 32rem; }
.product-section table:not(:has(thead)) { border-top: 1px solid var(--color-gray-400); }
.product-section table th, .product-section table td { border-left: 1px solid var(--color-gray-400); border-right: 1px solid var(--color-gray-400); padding: 20rem 8rem; min-width: 50rem; text-align: center; vertical-align: middle; font-size: var(--font-size-ko-09); line-height: var(--font-lineheight-ko-09); letter-spacing: var(--letter-spacing-02); }
.product-section table th:first-child, .product-section table td:first-child { border-left: 0; }
.product-section table th:last-child, .product-section table td:last-child { border-right: 0; }
.product-section table thead th { background: var(--color-black); color: var(--color-white); font-weight: 700; }
.product-section table thead tr:nth-child(n+2) th { border-top: 1px solid var(--color-gray-400); border-left: 1px solid var(--color-gray-400); }
.product-section table td { font-weight: 400; color: var(--color-gray-900); }
.product-section table tbody tr:nth-child(odd) td { background: var(--color-gray-200); }
.product-section table tbody th { background: var(--color-gray-900); color: var(--color-white); border-bottom: 1px solid var(--color-gray-800); }

.product-section ol:not([class]), .product-section ul:not([class]) { margin-bottom: 32rem; }
.product-section ol:not([class]):last-child, .product-section ul:not([class]):last-child { margin-bottom: 0; }
.product-section ol:not([class]) > li, .product-section ul:not([class]) > li { position: relative; color: var(--color-gray-900); margin-bottom: 6rem; }
.product-section ol:not([class]) > li:last-child, .product-section ul:not([class]) > li:last-child { margin-bottom: 0 !important; }
.product-section ol:not([class]) { counter-reset: item; }
.product-section ol:not([class]) > li { padding-left: 28rem; }
.product-section ol:not([class]) > li:before { counter-increment: item; content: counter(item); position: absolute; left: 0; top: calc(var(--font-lineheight-ko-08) / 2 - 10rem); display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; border-radius: 50%; color: var(--color-white); background: var(--color-primary); font-size: 11rem; line-height: 1; font-weight: 700; padding-top: 1rem; box-sizing: border-box; }
html.ios .product-section ol:not([class]) > li:before { padding-top: 0; }
.product-section ol:not([class]) > li > ul:not([class]) { margin-top: 6rem; }
.product-section ol:not([class]) > li > ul:not([class]) > li { padding-left: 16rem; color: var(--color-gray-800); margin-bottom: 2rem; }
.product-section ol:not([class]) > li > ul:not([class]) > li:before { width: 6rem; height: 1px; background: currentColor;  top: calc(var(--font-lineheight-ko-08) / 2 - .5px) }
.product-section ol:not([class]) > li:has(>ul) { margin-bottom: 16rem; }
.product-section ul:not([class]) > li { padding-left: 18rem; }
.product-section ul:not([class]) > li:before { content: ''; position: absolute; left: 4rem; top: calc(var(--font-lineheight-ko-08) / 2 - 2rem); display: block; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-primary); }
.product-section ul:not([class]) > li > ul:not([class]) { margin-top: 6rem; }
.product-section ul:not([class]) > li > ul:not([class]) > li { padding-left: 16rem; color: var(--color-gray-800); margin-bottom: 2rem; }
.product-section ul:not([class]) > li > ul:not([class]) > li:before { width: 6rem; height: 1px; background: currentColor;  top: calc(var(--font-lineheight-ko-08) / 2 - .5px) }
.product-section ul:not([class]) > li:has(>ul) { margin-bottom: 16rem; }

.product-component__subject { position: relative; padding-left: 40rem; margin-bottom: 24rem; }
.product-component__subject > span { content: counter(item); position: absolute; left: 0; top: 2rem; display: flex; align-items: center; justify-content: center; width: 28rem; height: 28rem; background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-ko-09); line-height: var(--font-lineheight-ko-09); font-weight: 700; letter-spacing: var(--letter-spacing-02); }

.product-component__image-cell { display: flex; gap: 32rem; margin-bottom: 32rem; }

.product-component__image-culumn:nth-child(1) { width: 30.64%; max-width: 273rem; }
.product-component__image-culumn:nth-child(1) .jt-lazyload { padding-top: 73.26%; }
.product-component__image-culumn:nth-child(2) { flex: 1; padding: 12rem 0; }
.product-component__image-culumn:nth-child(2) > b { display: block; margin-bottom: 6rem; }
.product-component__image-culumn:nth-child(2) > ul > li { margin-bottom: 2rem; }

.product-component__divider { margin: 40rem 0; height: 1px; background: var(--color-gray-400); }

.product-component__attachment > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40rem; background: var(--color-gray-100); color: var(--color-gray-900); padding: 16rem 24rem; transition: .3s; }
.product-component__attachment > li > a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--color-gray-300); box-sizing: border-box; }
.product-component__attachment > li + li { margin-top: 6rem; }
.product-component__attachment span { flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.product-component__attachment .jt-icon { width: 24rem; }
.product-component__attachment .jt-icon svg path { fill: var(--color-black); }



/* **************************************** *
 * CASE
 * **************************************** */
.main-container:has(.product-case-single) { background: var(--color-gray-200); }

.article.product-case-single .article__visual-title svg { width: 100%; max-width: 320rem; height: auto; vertical-align: top; }
.article.product-case-single .article__visual-desc { margin-top: 12rem; }
.article.product-case-single .article__body { margin-top: 0; }

.product-case-single__title { margin-bottom: 60rem; }
.product-case-single__desc { margin-bottom: 120rem; }
.product-case-single__desc p { margin-bottom: 20rem; color: var(--color-gray-900); }
.product-case-single__desc p:last-child { margin-bottom: 0; }

.product-case-single__slider { margin-bottom: 120rem; padding-bottom: 29rem; }
.product-case-single__slide-bg { padding-top: 51.02%; background: no-repeat center center / cover; }
.product-case-single__slider .swiper-navigation .swiper-button { margin-top: -56.5rem; }

.product-case-single__condition { display: flex; gap: 20rem; justify-content: space-between; margin-bottom: 120rem; }
.product-case-single__condition-content { width: 100%; max-width: 572rem; }
.product-case-single__condition-content ul { border-top: 2rem solid var(--color-black); }
.product-case-single__condition-content ul > li { display: flex; border-bottom: 1px solid var(--color-gray-400); padding: 20rem 0; }
.product-case-single__condition-content ul > li > b { width: 200rem; padding-right: 20rem; box-sizing: border-box; }
.product-case-single__condition-content ul > li > span { flex: 1; }

.product-case-single__content > *:last-child { margin-bottom: 0; }
.product-case-single__content-image { margin-bottom: 60rem; }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@keyframes zoomIn {
    from { scale: 1.1 }
    to { scale: 1 }
}



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

    /* LIST */
    .product-list__data > ul > li > a.jt-hoverintent--allow:hover .product-list__item-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; }
    .product-list__data > ul > li > a.jt-hoverintent--allow:hover .product-list__item-icon .jt-icon:nth-child(2) { transition: left .3s cubic-bezier(0, 0.75, 0.25, 1), opacity .3s; left: 100%; opacity: 0; }
    .product-list__data > ul > li > a.jt-hoverintent--allow:hover .product-list__item-thumb .jt-lazyload { scale: 1.1 }

    .product-case-list__card > a.jt-hoverintent--allow:hover:before { opacity: .4; }
    .product-case-list__card > a.jt-hoverintent--allow:hover .product-case-list__card-icon { margin-top: 32rem; height: 18rem; opacity: 1; }
    .product-case-list__card > a.jt-hoverintent--allow:hover .product-case-list__card-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; }
    .product-case-list__card > a.jt-hoverintent--allow:hover .product-case-list__card-icon .jt-icon:nth-child(2) { left: 100%; }

    .product-list__contact > a:hover { border-radius: 90rem; }
    
    /* SINGLE */
    .product-single__sticky-list > li > ul > li > a:hover { color: var(--color-black); }
    .product-component__attachment > li > a:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
    .product-component__attachment > li > a:hover .jt-icon svg path { fill: var(--color-white); }

}