@charset "utf-8";

/*
 * File    : sub-products.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * COMPARISON
 * POPUP
 * SINGLE (POPUP)
 * MAIN COMPONENT
 * SUB COMPONENT
 * RO MEMBRANES
 * UF/MBR MEMBRANES
 * IX RESINS
 * HOVER
 */

 

/* **************************************** *
 * COMPARISON
 * **************************************** */
.product-comparison__desc { margin-bottom: 80rem; }

/* FORM */
.product-comparison__form { display: flex; flex-direction: column; gap: 50rem; }
.product-comparison__form-item > p { margin-bottom: 20rem; }

.product-comparison__form-type { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; }
.product-comparison__form-type .jt-lazyload { padding-top: 57.97%; }
.product-comparison__form-type > label { position: relative; cursor: pointer; }
.product-comparison__form-type > label:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 3rem solid var(--color-black); opacity: 0; transition: opacity .3s; }
.product-comparison__form-type > label > input { position: absolute; top: 0; left: 0; opacity: 0; }
.product-comparison__form-type > label > b { position: absolute; top: 30rem; left: 30rem; z-index: 1; }
.product-comparison__form-type > label:has(input:checked):after { opacity: 1; }

.product-comparison__form-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; }

.product-comparison__form-submit { height: 60rem; padding: 0 0 2rem; position: relative; color: var(--color-white); background: var(--color-black); border: none; border-radius: 0; box-sizing: border-box; transition: background-color .3s; cursor: pointer; }
.product-comparison__form-spinner { display: none; width: 72rem; height: 8rem; margin: -4rem 0 0 -36rem; position: absolute; top: 50%; left: 50%; font-size: 0; line-height: 1; text-align: center; }
.product-comparison__form-spinner > div { display: inline-block; width: 8rem; height: 8rem; margin: 0 8rem; background: var(--color-white); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.product-comparison__form-spinner .product-comparison__form-spinner-ball-01 { animation-delay: -0.32s; }
.product-comparison__form-spinner .product-comparison__form-spinner-ball-02 { animation-delay: -0.16s; }
.product-comparison__form.loading .product-comparison__form-submit { color: transparent; }
.product-comparison__form.loading .product-comparison__form-spinner { display: block; }

.product-comparison__form .choices__inner { font-size: var(--font-size-primary-07); line-height: 58rem; background: var(--color-white); border-color: var(--color-black); }
.product-comparison__form .choices__inner:has(.choices__placeholder) { background: var(--color-gray-200); border-color: var(--color-gray-300); }
.product-comparison__form .choices__placeholder { color: var(--color-gray-400); }
.product-comparison__form .choices__list--dropdown .choices__item, 
.product-comparison__form .choices__list[aria-expanded] .choices__item { padding: 7rem 19rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-08); }
.product-comparison__form .choices__list--dropdown .choices__item:nth-child(1) { display: none !important; }
.product-comparison__form .is-focused .choices__inner { border-color: var(--color-black); }
.product-comparison__form .is-open .choices__inner { background: var(--color-white); border-color: var(--color-black); }
.product-comparison__form .choices.is-disabled .choices__inner { background: var(--color-gray-100); border-color: var(--color-gray-200); }
.product-comparison__form .choices.is-disabled .choices__placeholder { color: var(--color-gray-300); }
html.mobile .product-comparison__form .jt-choices__wrap { background: var(--color-gray-200); }
html.mobile .product-comparison__form .jt-choices__wrap > select { height: 60rem; padding-bottom: 2rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-08); color: var(--color-gray-400); border-color: var(--color-gray-300); }
html.mobile .product-comparison__form .jt-choices__wrap:has(select:valid) { background: var(--color-white); }
html.mobile .product-comparison__form .jt-choices__wrap > select:valid { color: var(--color-black); border-color: var(--color-black); }
html.mobile .product-comparison__form .jt-choices__wrap:has(select[disabled]) { background: var(--color-gray-100); }
html.mobile .product-comparison__form .jt-choices__wrap > select[disabled] { color: var(--color-gray-300); border-color: var(--color-gray-200); }

/* RESULT */
.product-comparison__result { margin-top: 80rem; }

.product-comparison__result-title { margin-bottom: 27rem; }
.product-comparison__result-title > span { font-weight: 700; color: var(--color-primary); }

.product-comparison__result .jt-board-list__content { padding: 29rem 30rem; }

/* BANNER */
.product-comparison-banner { margin-bottom: calc(-1 * var(--main-container-pb)); padding: 120rem 0 140rem; background: var(--color-secondary); }

.product-comparison-banner__typo { margin-bottom: 50rem; }
.product-comparison-banner__typo { text-align: center; }
.product-comparison-banner__typo > p { margin-top: 15rem; }

.product-comparison-banner .product-comparison__form-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 280rem; gap: 2rem; }

.product-comparison-banner .product-comparison__form .choices.is-disabled { opacity: 0.5; }
.product-comparison-banner .product-comparison__form .choices__inner { border-color: var(--color-white); }
.product-comparison-banner .product-comparison__form .choices__inner:has(.choices__placeholder) { background: var(--color-white); }
.product-comparison__form .choices__placeholder { color: var(--color-gray-300); }
.product-comparison-banner .product-comparison__form .is-focused .choices__inner, 
.product-comparison-banner .product-comparison__form .is-open .choices__inner { border-color: var(--color-black); }
.product-comparison-banner .product-comparison__form .choices.is-disabled .choices__inner { border-color: var(--color-white); }
html.mobile .product-comparison-banner .product-comparison__form .jt-choices__wrap { background: var(--color-white); }
html.mobile .product-comparison-banner .product-comparison__form .jt-choices__wrap > select { color: var(--color-gray-300); border-color: var(--color-white); }
html.mobile .product-comparison-banner .product-comparison__form .jt-choices__wrap > select:valid { color: var(--color-black); }
html.mobile .product-comparison-banner .product-comparison__form .jt-choices__wrap:has(select[disabled]) { background: var(--color-white); opacity: 0.5; }



/* **************************************** *
 * POPUP
 * **************************************** */
/* LAYOUT */
.product-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: color-mix(in srgb, var(--color-white) 10%, transparent 90%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); z-index: 9999; overflow: hidden; }

.product-popup__spinner { width: 50rem; height: 50rem; position: absolute; top: calc(50% - 25rem); left: calc(50% - 25rem); border: 3rem solid var(--color-gray-300); border-top: 3rem solid transparent; border-radius: 50%; animation: spin .7s linear 0s infinite; }

.product-popup__inner { width: 100%; height: 100%; padding: 80rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; -ms-overflow-style: none; scrollbar-width: none; }
.product-popup__inner::-webkit-scrollbar { display: none; }

.product-popup__content { width: 100%; max-width: 1400rem; margin: 0 auto; position: relative; background: var(--color-white); box-shadow: 0 10rem 30rem 0 color-mix(in srgb, var(--color-black) 25%, transparent 75%); overflow: hidden; }

.product-popup__head { display: flex; align-items: center; min-height: 80rem; padding: 8rem 110rem 8rem 30rem; background: var(--color-primary); }
.product-popup__head .jt-breadcrumb { display: none; }

.product-popup__body { padding: 70rem 80rem 80rem; }

.product-popup__close { width: 80rem; position: absolute; top: 0; right: 0; z-index: 2; }
.product-popup__close button { width: 100%; margin: 0; padding: 0; aspect-ratio: 1 / 1; position: sticky; top: 0; background: var(--color-white); border: 0; border-radius: 0; opacity: 1; cursor: pointer; transition: background-color .3s; }
.product-popup__close .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .3s; }

.product-popup__content--27 .product-popup__head { background: var(--color-accent-swro); }
.product-popup__content--28 .product-popup__head { background: var(--color-accent-bwro); color: var(--color-white); }
.product-popup__content--29 .product-popup__head { background: var(--color-accent-uhp); color: var(--color-white); }
.product-popup__content--30 .product-popup__head { background: var(--color-accent-nf); color: var(--color-white); }

/* WRAP */
.product-popup__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; }

/* BASIC */
.product-popup__basic { margin-bottom: 50rem; }
.product-popup__basic > p { margin-top: 10rem; }
.product-popup__basic > .jt-btn__box.jt-btn--large { min-width: 100%; margin-top: 50rem; }

/* OPTIONS */
.product-popup__options { display: flex; flex-direction: column; gap: 30rem; }
.product-popup__options-item { border-top: 3rem solid var(--color-black); }

.product-popup__options-title { display: block; padding: 7rem 0 8rem; margin-bottom: 30rem; border-bottom: 1px solid var(--color-black); }

.product-popup__options-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem 0; text-align: center; }
.product-popup__options-icons .jt-lazyload { width: 80rem; margin: 0 auto; aspect-ratio: 1 / 1; }
.product-popup__options-icons p { margin-top: 10rem; padding: 0 6rem; }

.product-popup__options-list { display: flex; flex-direction: column; gap: 12rem; }
.product-popup__options-list > li { padding-left: 12rem; position: relative; }
.product-popup__options-list > li:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; left: 0; top: 8rem; background: var(--color-black); border-radius: 50%; transition: background-color .3s; }

/* PREVIEW */
.product-popup__preview { padding: 40rem; background: var(--color-gray-100); }

.product-popup__picture img { display: block; width: 100%; height: auto; }
.product-popup__picture p { margin-top: 40rem; text-align: center; color: var(--color-gray-400); }

.product-popup__spec { margin-top: 40rem; }
.product-popup__spec-data > li { display: flex; }
.product-popup__spec-data > li > * { flex: 1; padding: 6rem 10rem 7rem; }

/* ADDITIONAL */
.product-popup__additional { display: flex; flex-direction: column; gap: 70rem; margin-top: 70rem; }

.product-popup__additional-title { margin-bottom: 20rem; }

/* RELATED */
.product-popup__related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rem; }
.product-popup__related-list-thumb .jt-lazyload { padding-top: 100%; }
.product-popup__related-list-text { display: flex; align-items: center; justify-content: space-between; gap: 20rem; margin-top: 8rem; }
.product-popup__related-list-text .jt-btn__text { flex-shrink: 0; }

/* RESOURCE */
.product-popup__resource .jt-grid-list { gap: 20rem; }



/* **************************************** *
 * SINGLE (POPUP)
 * **************************************** */
body.single-product .product-popup__content { box-shadow: none; }

body.single-product .product-popup__head { flex-direction: column; align-items: start; min-height: inherit; padding: 0 80rem 60rem; position: relative; color:var(--color-black); background: transparent; }
body.single-product .product-popup__head:after { content: ''; display: block; height: 10rem; position: absolute; left: 80rem; right: 80rem; bottom: 0; background: var(--color-primary); }
body.single-product .product-popup__head .jt-breadcrumb { display: flex; }
body.single-product .product-popup__head .jt-typo--08 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 700; }

body.single-product .product-popup__body { padding-bottom: 0; }

body.single-product .product-popup__close { display: none; }

body.single-product .product-popup__content--27 .product-popup__head:after { background: var(--color-accent-swro); }
body.single-product .product-popup__content--28 .product-popup__head:after { background: var(--color-accent-bwro); }
body.single-product .product-popup__content--29 .product-popup__head:after { background: var(--color-accent-uhp); }
body.single-product .product-popup__content--30 .product-popup__head:after { background: var(--color-accent-nf); }



/* **************************************** *
 * MAIN COMPONENT
 * **************************************** */
/* INTRODUCE */
.product-introduce__inner { display: grid; grid-template-columns: 1fr 872rem; }
.product-introduce__inner > * { position: relative; }

.product-introduce__content { padding: 111rem 160rem 111rem 0; }
.product-introduce__content > h2 > span { color: var(--color-primary); }
.product-introduce__content > p { margin-top: 30rem; }

.product-introduce__media .jt-lazyload { padding-top: 109.29%; }

/* ENUMERATE */
.product-enumerate { padding: 120rem 0 140rem; background: var(--color-gray-100); }

.product-enumerate__title { margin-bottom: 50rem; }

.product-enumerate__list { display: grid; gap: 16rem; }
.product-enumerate__list > li { min-width: 0; background: var(--color-white); border-top: 10rem solid var(--color-primary); }
.product-enumerate__list-link { display: block; color: inherit; }
.product-enumerate__list-head { display: flex; align-items: flex-start; }
.product-enumerate__list-head > b { flex: 1; min-width: 0; padding: 20rem 30rem; }
.product-enumerate__list-icon { flex-shrink: 0; width: 80rem; position: relative; aspect-ratio: 80 / 70; transition: background-color .3s; }
.product-enumerate__list-icon > .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.product-enumerate__list .jt-lazyload { padding-top: 100%; }

.product-enumerate__list--col3 { grid-template-columns: repeat(3, 1fr); }
.product-enumerate__list--col4 { grid-template-columns: repeat(4, 1fr); }



/* **************************************** *
 * SUB COMPONENT
 * **************************************** */
/* DECORATIVE */
.product-decorative { width: 766rem; position: absolute; top: 0; right: 0; pointer-events: none; }
.product-decorative .jt-lazyload { padding-top: 48.17%; }

/* INFORMATION (LAYOUT) */
.product-information { display: flex; flex-direction: column; gap: 120rem; padding-top: 40rem; }

.product-information + .product-comparison-banner { margin-top: 120rem; }

/* PROLOGUE */
.product-prologue__title + .product-prologue__desc { margin-top: 20rem; }
.product-prologue__explain { margin-top: 20rem; color: var(--color-gray-400); }

.product-prologue__feature { display: flex; gap: 40rem; margin-top: 120rem; }
.product-prologue__feature > li { flex: 1; }
.product-prologue__feature > li > h3 { margin-bottom: 27rem; padding-bottom: 16rem; border-bottom: 3rem solid var(--color-black); }
.product-prologue__feature > li > ul { display: flex; flex-direction: column; gap: 20rem; }
.product-prologue__feature b  { color: var(--color-primary); }

/* PROPERTY */
.product-property { padding: 80rem 0; background: var(--color-gray-100); }

.product-property__row { font-size: 0; }
.product-property__row + .product-property__row { margin-top: 60rem; padding-top: 50rem; border-top: 1px dashed var(--color-black); }
.product-property__col { display: inline-block; vertical-align: middle; }
.product-property__col:first-child { width: 48.215%; }
.product-property__col:last-child { width: calc(51.785% - 40rem); margin-left: 40rem; }

.product-property__row--half .product-property__col:nth-child(n) { width: calc((100% - 50rem) / 2); }
.product-property__row--half .product-property__col:last-child { margin-left: 50rem; }

.product-property__slider .jt-lazyload { padding-top: 100%; }

.product-property__graph { display: flex; flex-direction: column; gap: 40rem; }
.product-property__graph .jt-lazyload { padding-top: 64%; }
.product-property__graph-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; padding-left: 30rem; }
.product-property__graph-list > li { padding-left: 12rem; position: relative; }
.product-property__graph-list > li:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; left: 0; top: 6rem; background: var(--color-black); border-radius: 50%; transition: background-color .3s; }

.product-property__list { display: flex; flex-direction: column; gap: 20rem; }
.product-property__list > li { display: flex; align-items: center; gap: 30rem; padding: 40rem 30rem; background: var(--color-white); }
.product-property__list-icon { width: 80rem; flex-shrink: 0; }
.product-property__list-icon .jt-lazyload { padding-top: 100%; }
.product-property__list-txt p { margin-top: 16rem; }

.product-property__material-list { display: grid; grid-template-columns: 1fr 1.22fr; gap: 10rem 61rem; padding-left: 30rem; }
.product-property__material-list > li { position: relative; }
.product-property__material-list > li:nth-child(even):before { content: ''; width: 1px; height: 12rem; position: absolute; left: -31rem; top: 5rem; background: var(--color-black); }

/* SPEC */
.product-spec__item + .product-spec__item { margin-top: 80rem; }
.product-spec__item > b { display: block; margin-bottom: 20rem; }

.product-spec__table table { width: 100%; table-layout: fixed; border-top: 3rem solid var(--color-black); }
.product-spec__table table :is(th, td) { vertical-align: middle; text-align: center; }
.product-spec__table table thead tr:first-child th { padding: 10rem 9rem 13rem; }
.product-spec__table table thead tr:last-child th { padding: 10rem 9rem 8rem; border-top: 1px solid var(--color-black); }
.product-spec__table table tbody tr:first-child :is(th, td) { border-top: 3rem solid var(--color-black); }
.product-spec__table table tbody :is(th, td) { padding: 18rem 9rem 17rem; border-bottom: 1px solid var(--color-black); transition: background-color .3s; }

.product-spec__table-btn { display: inline-block; padding-bottom: 2rem; font-size: 0; color: inherit; }
.product-spec__table-btn > * { vertical-align: middle; }
.product-spec__table-btn .jt-accent-icon { width: 18rem; margin-left: 10rem; position: relative; top: -1rem; }
html:is(.mac, .mobile) .product-spec__table-btn { padding-bottom: 6rem; }

.product-spec__table.product-spec__table--secondary table thead tr th { padding-top: 18rem; padding-bottom: 18rem; border: none; }

.product-spec__table.product-spec__table--extra table tbody :is(th, td) { padding-top: 24rem; padding-bottom: 23rem; }



/* **************************************** *
 * RO MEMBRANES
 * **************************************** */
/* RO MEMBRANES */
.product-introduce__gwi { position: absolute; left: 0; bottom: 109rem; }
.product-introduce__gwi-logo { width: 128rem; margin-bottom: 21rem; }
.product-introduce__gwi-logo .jt-lazyload { padding-top: 40.62%; }

.product-enumerate__list > li.product-enumerate--swro { border-top-color: var(--color-accent-swro); }
.product-enumerate__list > li.product-enumerate--bwro { border-top-color: var(--color-accent-bwro); }
.product-enumerate__list > li.product-enumerate--uhp { border-top-color: var(--color-accent-uhp); }
.product-enumerate__list > li.product-enumerate--nf { border-top-color: var(--color-accent-nf); }

/* SWRO */
body.page-template-products-rom-swro .article__header-inner { border-bottom-color: var(--color-accent-swro); }

body.page-template-products-rom-swro .product-spec__table table thead tr:first-child th[rowspan] { width: 220rem; }
body.page-template-products-rom-swro .product-spec__table table thead tr:last-child th { width: 120rem; }

/* BWRO */
body.page-template-products-rom-bwro .article__header-inner { border-bottom-color: var(--color-accent-bwro); }

body.page-template-products-rom-bwro .product-prologue__feature b { color: #8E80BC; }
body.page-template-products-rom-bwro .product-prologue__feature > li:nth-child(1) li > b { color: #DA4190; }
body.page-template-products-rom-bwro .product-prologue__feature > li:nth-child(4) li:nth-child(1) > b { color: #62C2D8; }
body.page-template-products-rom-bwro .product-prologue__feature > li:nth-child(4) li:nth-child(2) > b { color: #7AA6D8; }
body.page-template-products-rom-bwro .product-prologue__feature > li:nth-child(4) li:nth-child(3) > b { color: #7AA6D8; }

body.page-template-products-rom-bwro .product-spec__table table thead tr:first-child th[rowspan] { width: 245rem; }
body.page-template-products-rom-bwro .product-spec__table table thead tr:last-child th { width: 130rem; }

/* UHP */
body.page-template-products-rom-uhp .article__header-inner { border-bottom-color: var(--color-accent-uhp); }

body.page-template-products-rom-uhp .product-spec__table table thead tr:first-child th[rowspan] { width: 245rem; }
body.page-template-products-rom-uhp .product-spec__table table thead tr:last-child th { width: 130rem; }

/* NF */
body.page-template-products-rom-nf .article__header-inner { border-bottom-color: var(--color-accent-nf); }

body.page-template-products-rom-nf .product-spec__table table thead tr:first-child th[rowspan] { width: 245rem; }
body.page-template-products-rom-nf .product-spec__table table thead tr:last-child th { width: 130rem; }



/* **************************************** *
 * UF/MBR MEMBRANES
 * **************************************** */
/* UF/MBR Membranes */
body.page-template-products-ufm .main-container { padding-bottom: 0; }

body.page-template-products-ufm .article-visual__bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(54, 54, 54, 0) 65%, rgba(54, 54, 54, 0.9) 100%); }

/* SUB */
body[class*=page-template-products-ufm-] .article__header-inner { border-bottom-color: var(--color-primary); }

body[class*=page-template-products-ufm-] .product-spec__table table thead th:first-child { width: 275rem; }
body[class*=page-template-products-ufm-] .product-spec__table table thead th:not(:first-child) { width: 225rem; }

/* MBR */
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(1) { width: 225rem; }
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(2) { width: 275rem; }
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(3) { width: 200rem; }
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(4) { width: 200rem; }
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(5) { width: 275rem; }
body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(6) { width: 225rem; }



/* **************************************** *
 * IX RESINS
 * **************************************** */
/* IX Resins */
body.page-template-products-ix .article-visual__bg:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(56, 20, 7, 0) 40.25%, rgba(56, 20, 7, 0.9) 100%); }

/* SUB */
body[class*=page-template-products-ix-] .article__header-inner { border-bottom-color: var(--color-primary); }

body[class*=page-template-products-ix-] .product-spec__table table thead th:first-child { width: 275rem; }
body[class*=page-template-products-ix-] .product-spec__table table thead th:not(:first-child) { width: 225rem; }



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

    /* COMPARISON */
    .product-comparison__form-submit:hover { background: var(--color-primary); }

    /* POPUP */
    .product-popup__close button:hover { background: var(--color-primary); }
    .product-popup__close button:hover .jt-accent-icon { transform: translate(-50%, -50%) rotate(90deg); }

    /* MAIN COMPONENT */
    .product-enumerate__list-link:hover .product-enumerate__list-icon { background: var(--color-primary); }

    /* SUB COMPONENT */
    .product-spec__table table tbody tr:has(.product-spec__table-btn):hover :is(th, td) { background: var(--color-gray-100); }

}