@charset "utf-8";

/*
 * File    : rwd-products.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

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

    .product-comparison__form { gap: 48rem; }

    .product-comparison__result { margin-top: 72rem; }
    .product-comparison__result .jt-board-list__content { padding-top: 27rem; padding-bottom: 27rem; }

    .product-comparison-banner { padding: 100rem 0 120rem; }
    .product-comparison-banner__typo { margin-bottom: 45rem; }
    .product-comparison-banner .product-comparison__form-item { grid-template-columns: repeat(2, minmax(0, 2fr)) minmax(0, 1fr); }

    /* POPUP */
    .product-popup__inner { padding: 72rem; }
    .product-popup__head { min-height: 72rem; padding-right: 102rem; }
    .product-popup__body { padding: 70rem 72rem 72rem; }
    .product-popup__close { width: 72rem; }
    .product-popup__close .jt-accent-icon { width: 26rem; }

    /* SINGLE (POPUP) */
    body.single-product .product-popup__head { padding: 0 72rem 60rem; }
    body.single-product .product-popup__head:after { left: 72rem; right: 72rem; }

    /* MAIN COMPONENT */
    .product-introduce__inner { grid-template-columns: 1.03fr 1fr; }
    .product-introduce__content { padding: 94rem 130rem 94rem 0; }

    .product-enumerate { padding: 100rem 0 120rem; }
    .product-enumerate__title { margin-bottom: 45rem; }
    .product-enumerate__list-icon { width: 72rem; height: 72rem; }

    /* SUB COMPONENT */
    .product-decorative { width: 650rem; }

    .product-information { gap: 100rem; padding-top: 28rem; }
    .product-information + .product-comparison-banner { margin-top: 100rem; }

    .product-prologue__feature { gap: 36rem; margin-top: 100rem; }

    /* RO MEMBRANES */
    .product-introduce__gwi { bottom: 90rem; }
    .product-introduce__gwi-logo { width: 122rem; }

    /* UF/MBR MEMBRANES */
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(1) { width: 16.07%; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(2) { width: 19.64%; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(3) { width: 14.29%; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(4) { width: 14.29%; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(5) { width: 19.64%; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(6) { width: 16.07%; }

    /* UF/MBR MEMBRANES & IX RESINS */
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:first-child,
    body[class*=page-template-products-ix-] .product-spec__table table thead th:first-child { width: 20%; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:not(:first-child),
    body[class*=page-template-products-ix-] .product-spec__table table thead th:not(:first-child) { width: 16%; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

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

    .product-comparison__form { gap: 45rem; }
    .product-comparison__form-type { gap: 15rem; }
    .product-comparison__form-type > label > b { top: 25rem; left: 25rem; }
    .product-comparison__form-list { gap: 15rem; }

    .product-comparison__result { margin-top: 62rem; }
    .product-comparison__result-title { margin-bottom: 24rem; }

    .product-comparison-banner { padding: 85rem 0 108rem; }
    .product-comparison-banner__typo { margin-bottom: 42rem; }

    /* POPUP */
    .product-popup__inner { padding: 50rem; }
    .product-popup__head { min-height: 70rem; padding-right: 100rem; }
    .product-popup__body { padding: 65rem 70rem 70rem; }
    .product-popup__close { width: 70rem; }

    .product-popup__basic > .jt-btn__box.jt-btn--large { margin-top: 40rem; }
    
    .product-popup__options-title { margin-bottom: 25rem; }
    .product-popup__options-icons .jt-lazyload { width: 76rem; }
    .product-popup__options-list > li:before { top: 9rem; }
    
    .product-popup__preview { padding: 32rem; }
    .product-popup__picture p { margin-top: 30rem; }
    .product-popup__spec { margin-top: 35rem; }

    .product-popup__additional { gap: 65rem; margin-top: 65rem; }

    /* SINGLE (POPUP) */
    body.single-product .product-popup__head { padding: 0 70rem 55rem; }
    body.single-product .product-popup__head:after { height: 8rem; left: 70rem; right: 70rem; }

    /* MAIN COMPONENT */
    .product-introduce__content { padding: 72rem 90rem 72rem 0; }
    .product-introduce__content > p { margin-top: 25rem; }

    .product-enumerate { padding: 85rem 0 108rem; }
    .product-enumerate__title { margin-bottom: 36rem; }
    .product-enumerate__list > li { border-top-width: 8rem; }
    .product-enumerate__list-head > b { padding: 0 24rem; }
    .product-enumerate__list-icon { width: 70rem; height: 70rem; }
    .product-enumerate__list-icon > .jt-accent-icon { width: 26rem; }
    .product-enumerate__list--col4 { grid-template-columns: repeat(3, 1fr); }

    /* SUB COMPONENT */
    .product-decorative { width: 545rem; }

    .product-information { gap: 85rem; padding-top: 23rem; }
    .product-information + .product-comparison-banner { margin-top: 85rem; }

    .product-prologue__feature { gap: 30rem; margin-top: 85rem; }
    .product-prologue__feature > li > h3 { margin-bottom: 25rem; padding-bottom: 15rem; }
    .product-prologue__feature > li > ul { gap: 18rem; }

    .product-property__row + .product-property__row { margin-top: 55rem; padding-top: 45rem; }
    .product-property__col:last-child { width: calc(51.785% - 36rem); margin-left: 36rem; }
    .product-property__row--half .product-property__col:nth-child(n) { width: calc((100% - 36rem) / 2); }
    .product-property__row--half .product-property__col:last-child { margin-left: 36rem; }
    .product-property__graph { gap: 36rem; }
    .product-property__graph-list { padding-left: 28rem; }
    .product-property__list-txt p { margin-top: 12rem; }
    .product-property__list > li { gap: 25rem; padding: 35rem 25rem; }
    .product-property__list-icon { width: 75rem; }
    .product-property__material-list { grid-template-columns: 1fr; padding-left: 0; }
    .product-property__material-list > li { padding-left: 12rem; position: relative; }
    .product-property__material-list > li:after { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; left: 0; top: 9rem; background: var(--color-black); border-radius: 50%; transition: background-color .3s; }
    .product-property__material-list > li:nth-child(even):before { display: none; }

    .product-spec__table table tbody :is(th, td) { padding-top: 17rem; padding-bottom: 16rem; }
    .product-spec__table.product-spec__table--secondary table thead tr th { padding-top: 17rem; padding-bottom: 17rem; }
    .product-spec__table.product-spec__table--extra table tbody :is(th, td) { padding-top: 23rem; padding-bottom: 22rem; }

    /* RO MEMBRANES */
    .product-introduce__gwi { bottom: 60rem; }
    .product-introduce__gwi-logo { width: 90rem; margin-bottom: 18rem; }

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

    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:first-child th[rowspan] { width: 220rem; }
    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:first-child th[rowspan]:last-child { width: 170rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

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

    .product-comparison__form { gap: 40rem; }
    .product-comparison__form-item > p { margin-bottom: 18rem; }
    .product-comparison__form-type > label > b { top: 18rem; left: 20rem; }
    .product-comparison__form-submit { height: 50rem; padding-bottom: 0; }
    .product-comparison__form .choices__inner { line-height: 48rem; }
    html.mobile .product-comparison__form .jt-choices__wrap > select { height: 50rem; padding-bottom: 0; }

    .product-comparison__result { margin-top: 55rem; }
    .product-comparison__result-title { margin-bottom: 20rem; }
    .product-comparison__result .jt-board-list__content { padding: 25rem 0; }

    .product-comparison-banner { padding: 80rem 0 100rem; }
    .product-comparison-banner__typo { margin-bottom: 40rem; }
    .product-comparison-banner .product-comparison__form-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-comparison-banner .product-comparison__form-submit { margin-top: 28rem; grid-column: span 2; }

    /* POPUP */
    .product-popup__spinner { width: 45rem; height: 45rem; }
    .product-popup__inner { padding: 0; }
    .product-popup__head { min-height: 68rem; padding-left: 24rem; padding-right: 92rem; }
    .product-popup__body { padding: 38rem 24rem; }
    .product-popup__close { width: 68rem; }
    .product-popup__close .jt-accent-icon { width: 28rem; }

    .product-popup__row { gap: 30rem; }

    .product-popup__basic { margin-bottom: 40rem; }
    .product-popup__basic > .jt-btn__box.jt-btn--large { margin-top: 30rem; }

    .product-popup__options-title { margin-bottom: 22rem; }
    .product-popup__options-icons { grid-template-columns: repeat(2, 1fr); }
    .product-popup__options-icons .jt-lazyload { width: 70rem; }
    .product-popup__options-icons p { padding: 0 10rem; }
    .product-popup__options-list { gap: 10rem; }
    .product-popup__options-list > li:before { top: 8rem; }

    .product-popup__preview { padding: 24rem; }
    .product-popup__picture p { margin-top: 24rem; }
    .product-popup__spec-data > li > b { padding-left: 0; }
    .product-popup__spec-data > li > p { padding-right: 0; }

    .product-popup__additional { gap: 60rem; margin-top: 60rem; }

    .product-popup__related-list { grid-template-columns: repeat(2, 1fr); }

    /* SINGLE (POPUP) */
    body.single-product .product-popup__head { padding: 0 24rem 34rem; }
    body.single-product .product-popup__head:after { height: 6rem; left: 24rem; right: 24rem; }

    /* MAIN COMPONENT */
    .product-introduce { padding: 80rem 0 0; }
    .product-introduce__inner { grid-template-columns: 1fr; }
    .product-introduce__content { padding: 0 0 60rem; }
    .product-introduce__content > p { margin-top: 20rem; }

    .product-enumerate { padding: 80rem 0 100rem; }
    .product-enumerate__title { margin-bottom: 30rem; }
    .product-enumerate__list > li { border-top-width: 6rem; }
    .product-enumerate__list-icon { width: 68rem; height: 68rem; }
    .product-enumerate__list--col3, 
    .product-enumerate__list--col4 { grid-template-columns: repeat(2, 1fr); }

    /* SUB COMPONENT */
    .product-decorative { display: none; }

    .product-information { gap: 80rem; padding-top: 0; }
    .product-information + .product-comparison-banner { margin-top: 80rem; }

    .product-prologue__feature { flex-wrap: wrap; gap: 50rem 24rem; margin-top: 55rem; }
    .product-prologue__feature > li { flex: none; width: calc((100% - 24rem) / 2); }
    .product-prologue__feature > li > h3 { margin-bottom: 22rem; padding-bottom: 13rem; }

    .product-property__row { display: flex; flex-direction: column; gap: 40rem; }
    .product-property__row + .product-property__row { margin-top: 50rem; padding-top: 40rem; }
    .product-property__col:nth-child(n),
    .product-property__row--half .product-property__col:nth-child(n) { width: 100%; margin-left: 0; }
    .product-property__slider { width: 400rem; }
    .product-property__graph { gap: 30rem; margin-top: 40rem; }
    .product-property__graph-list { padding-left: 35rem; }
    .product-property__graph-list > li:before { top: 5rem; }
    .product-property__list { gap: 16rem; }
    .product-property__list > li { padding-left: 30rem; padding-right: 30rem; gap: 30rem; }
    .product-property__list-txt p { margin-top: 10rem; }
    .product-property__material.product-property__row { flex-direction: row; gap: 24rem; }
    .product-property__material-list { gap: 8rem; }
    .product-property__material-list > li:after { top: 8rem; }
    
    .product-spec { overflow: hidden; }
    .product-spec__item > b { margin-bottom: 16rem; }
    .product-spec__table { width: calc(100vw - 24rem); overflow-x: auto; }
    .product-spec__table-inner { width: fit-content; padding-right: 24rem; }
    .product-spec__table table { min-width: 1000rem; }
    .product-spec__table table thead tr:first-child th:first-child,
    .product-spec__table table tbody th { position: sticky; left: 0; background: var(--color-white); z-index: 2; }
    .product-spec__table-btn .jt-accent-icon { width: 16rem; }

    /* RO MEMBRANES */
    .product-introduce__gwi { margin-top: 60rem; position: relative; bottom: inherit; }
    .product-introduce__gwi-logo { width: 76rem; }

    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:first-child th[rowspan] { width: 200rem; }
    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:first-child th[rowspan]:last-child { width: 160rem; }

    /* UF/MBR MEMBRANES */
    body.page-template-products-ufm .article-visual__bg:after { background: transparent; }

    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table { min-width: 1100rem; }

    /* IX RESINS */
    body.page-template-products-ix .article-visual__bg:after { background: transparent; }

    /* UF/MBR MEMBRANES & IX RESINS */
    body[class*=page-template-products-ufm-] .product-spec__table table,
    body[class*=page-template-products-ix-] .product-spec__table table { min-width: 960rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:first-child,
    body[class*=page-template-products-ix-] .product-spec__table table thead th:first-child { width: 25%; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:not(:first-child),
    body[class*=page-template-products-ix-] .product-spec__table table thead th:not(:first-child) { width: 15%; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

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

    .product-comparison__form { gap: 30rem; }
    .product-comparison__form-item > p { margin-bottom: 15rem; }
    .product-comparison__form-type { gap: 5rem; grid-template-columns: 1fr; }
    .product-comparison__form-list { gap: 5rem; grid-template-columns: 1fr; }
    .product-comparison__form-spinner { width: 60rem; height: 7rem; margin-left: -30rem; }
    .product-comparison__form-spinner > div { width: 7rem; height: 7rem; margin: 0 5rem; }

    .product-comparison__result { margin-top: 48rem; }
    .product-comparison__result-title { margin-bottom: 18rem; }
    .product-comparison__result .jt-board-list__content { padding: 18rem 0 24rem; }

    .product-comparison-banner { padding: 60rem 0; }
    .product-comparison-banner__typo { margin-bottom: 30rem; }
    .product-comparison-banner .product-comparison__form-item { display: flex; flex-direction: column; }
    .product-comparison-banner .product-comparison__form-submit { grid-column: none; }

    /* POPUP */
    .product-popup__spinner { width: 40rem; height: 40rem; }
    .product-popup__head { padding-left: 20rem; padding-right: 88rem; }
    .product-popup__body { padding: 38rem 20rem; }

    .product-popup__row { grid-template-columns: 1fr; gap: 40rem; }

    .product-popup__basic > .jt-btn__box.jt-btn--large { margin-top: 20rem; }

    .product-popup__options-title { margin-bottom: 20rem; }
    .product-popup__options-icons .jt-lazyload { width: 65rem; }
    .product-popup__options-icons p { margin-top: 8rem; }
    .product-popup__options-list > li:before { top: 7rem; }

    .product-popup__preview { margin: 0 -20rem; padding: 40rem 20rem; }
    .product-popup__picture p { margin-top: 20rem; }
    .product-popup__spec { margin-top: 30rem; }

    .product-popup__related-list { grid-template-columns: 1fr; gap: 30rem; }

    .product-popup__resource .jt-grid-list { gap: 30rem; }

    /* SINGLE (POPUP) */
    body.single-product .product-popup__head { padding: 0 20rem 28rem; }
    body.single-product .product-popup__head:after { height: 5rem; left: 20rem; right: 20rem; }

    /* MAIN COMPONENT */
    .product-introduce { padding-top: 60rem; }

    .product-enumerate { padding: 60rem 0; }
    .product-enumerate__list > li { border-top-width: 5rem; }
    .product-enumerate__list-head > b { padding: 0 20rem; }
    .product-enumerate__list-icon { width: 60rem; height: 60rem; }
    .product-enumerate__list-icon > .jt-accent-icon { width: 22rem; }
    .product-enumerate__list--col3, .product-enumerate__list--col4 { grid-template-columns: 1fr; }

    /* SUB COMPONENT */
    .product-information { gap: 60rem; }
    .product-information + .product-comparison-banner { margin-top: 60rem; }

    .product-prologue__title + .product-prologue__desc { margin-top: 16rem; }
    .product-prologue__explain { margin-top: 16rem; }
    .product-prologue__feature { flex-direction: column; gap: 35rem; margin-top: 48rem; }
    .product-prologue__feature > li { width: 100%; }
    .product-prologue__feature > li > ul { gap: 16rem; }
    .product-prologue__feature > li > h3 { margin-bottom: 20rem; padding-bottom: 10rem; }

    .product-property { padding: 60rem 0; }
    .product-property__row + .product-property__row { margin-top: 40rem; padding-top: 30rem; }
    .product-property__slider { width: 90%; }
    .product-property__graph { gap: 20rem; margin-top: 20rem; }
    .product-property__graph-list { grid-template-columns: 1fr; gap: 8rem; padding-left: 17rem; margin-top: 8rem; }
    .product-property__list > li { flex-direction: column; align-items: self-start; gap: 12rem; padding: 24rem; }
    .product-property__list-icon { width: 65rem; }
    .product-property__list-txt p { margin-top: 8rem; }
    .product-property__material.product-property__row { flex-direction: column; gap: 15rem; }
    .product-property__material-list > li:after { top: 7rem; }

    .product-spec__item + .product-spec__item { margin-top: 60rem; }
    .product-spec__table { width: calc(100vw - 20rem); }
    .product-spec__table-inner { padding-right: 20rem; }
    .product-spec__table table { width: max-content; min-width: inherit; border-top-width: 2rem; }
    .product-spec__table table thead tr:nth-child(n) th { padding-left: 20rem; padding-right: 20rem; }
    .product-spec__table table tbody :is(th, td) { padding: 14rem 20rem; }
    .product-spec__table table tbody tr:first-child :is(th, td) { border-top-width: 2rem; }
    .product-spec__table-btn .jt-accent-icon { width: 14rem; margin-left: 8rem; }
    .product-spec__table.product-spec__table--secondary table thead tr th { padding-top: 14rem; padding-bottom: 14rem; }
    .product-spec__table.product-spec__table--extra table tbody :is(th, td) { padding-top: 14rem; padding-bottom: 14rem; }
    
    /* RO MEMBRANES */
    .product-introduce__gwi-logo { width: 64rem; margin-bottom: 10rem; }

    body[class*=page-template-products-rom-] .product-spec__table table thead tr:first-child th[rowspan]:last-child { width: 146rem; }

    body.page-template-products-rom-swro .product-spec__table table thead tr:first-child th[rowspan]:first-child { width: 167rem; }
    body.page-template-products-rom-swro .product-spec__table table thead tr:last-child th { width: 66rem; }
    body.page-template-products-rom-swro .product-spec__table table thead tr:last-child th:nth-child(n+5):nth-child(-n+6) { width: 82rem; }
    body.page-template-products-rom-swro .product-spec__table table thead tr:last-child th:nth-child(n+7):nth-child(-n+8) { width: 100rem; }

    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:first-child th[rowspan]:first-child { width: 174rem; }
    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:last-child th { width: 66rem; }
    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:last-child th:nth-child(n+5):nth-child(-n+6) { width: 82rem; }
    body:is(.page-template-products-rom-bwro, .page-template-products-rom-uhp, .page-template-products-rom-nf) .product-spec__table table thead tr:last-child th:nth-child(7) { width: 100rem; }

    /* UF/MBR MEMBRANES */
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(1) { width: 156rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(2) { width: 98rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(3) { width: 118rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(4) { width: 100rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(5) { width: 120rem; }
    body[class*=page-template-products-ufm-] .product-spec__table table thead th:nth-child(6) { width: 146rem; }

    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table { min-width: inherit; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(1) { width: 130rem; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(2) { width: 185rem; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(3) { width: 110rem; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(4) { width: 110rem; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(5) { width: 210rem; }
    body.page-template-products-ufm-mbr .product-spec__table.product-spec__table--extra table thead th:nth-child(6) { width: 146rem; }

    /* IX RESINS */
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(1) { width: 142rem; }
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(2) { width: 102rem; }
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(3) { width: 120rem; }
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(4) { width: 102rem; }
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(5) { width: 186rem; }
    body[class*=page-template-products-ix-] .product-spec__table table thead th:nth-child(6) { width: 146rem; }

    /* UF/MBR MEMBRANES & IX RESINS */
    body[class*=page-template-products-ufm-] .product-spec__table table, 
    body[class*=page-template-products-ix-] .product-spec__table table { min-width: inherit; }

}