/* 제품 - 진행RSI - 배관의 문제점 */
#rsi.problem .intro .line-arrow{
    --bottom: 40px;
}
#rsi.problem .intro .diagram .common-grid .item{ display: flex; flex-direction: column; justify-content: center; position: relative; padding-inline: 35px; }
#rsi.problem .intro .diagram .bg{ height: 100%; position: static !important; }
#rsi.problem .intro .diagram .bg .dot-list li{ font-weight: 400; padding-left: 18px; text-indent: -18px; }
#rsi.problem .intro .diagram .bg .dot-list li::before{ position: static; transform: translateY(-30%); margin-right: 12px; }
#rsi.problem .intro .diagram .bg .dot-list li strong{ font-weight: 500; color: #00A8E4; }
#rsi.problem .intro .common-gallery{ --rgba: 1; }

#rsi.problem .issue .defalut{ margin-bottom: 24px; }
#rsi.problem .issue .grayBg{ display: block; text-align: center; padding: 48px; margin-bottom: 32px; }
#rsi.problem .issue .common-gallery dl dt{ font-size: 20px; font-weight: 500; color: var(--mainColor); }
#rsi.problem .issue .common-gallery dl dd{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; }
#rsi.problem .issue .sec01 .common-gallery{ margin-block: -15px; }
#rsi.problem .issue .sec01 .common-gallery > *{ margin-block: 15px; }
#rsi.problem .issue .sec01 .dl{ margin-bottom: 24px; }
#rsi.problem .issue .sec01 .dl dl dt{ border-bottom: 1px solid var(--blueBorder2); padding-bottom: 12px; margin-bottom: 16px; }
#rsi.problem .issue .sec01 .img p{ font-size: 18px; font-weight: 500; color: #333; margin-top: 8px; }
#rsi.problem .issue .sec02 dl{ text-align: center; margin-top: 16px; }
#rsi.problem .issue .sec02 dl dt{ margin-bottom: 4px; }

#rsi.problem .focus article{ display: flex; }
#rsi.problem .focus article:not(:last-of-type){ margin-bottom: 32px; }
#rsi.problem .focus article .img{ flex-shrink: 0; width: 480px; }
#rsi.problem .focus article .img figure{ display: block; aspect-ratio: 480 / 240; position: relative; overflow: hidden; }
#rsi.problem .focus article .img figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#rsi.problem .focus article .text{ flex: 1 1 auto; min-width: 0; padding-top: 12px; padding-left: 40px; }
#rsi.problem .focus article .text > *:not(:last-child){ margin-bottom: 24px; }
#rsi.problem .focus article .text dl dt{ font-size: 18px; font-weight: 500; color: #333; margin-bottom: 8px; }
#rsi.problem .focus article .text dl dd a{ display: block; font-size: 16px; font-weight: 300; color: #555; line-height: 1.7; text-decoration: underline; text-underline-position: from-font; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

@media screen and (max-width: 1700px){
    #rsi.problem .intro .diagram .common-grid .item{ padding: 30px; }
    
    #rsi.problem .issue .grayBg{ padding: 35px; margin-bottom: 27px; }
    #rsi.problem .issue .common-gallery dl dt{ font-size: 19px; }
    #rsi.problem .issue .sec01 .img p{ font-size: 17px; }

    #rsi.problem .focus article .img{ width: 420px; }
    #rsi.problem .focus article .text{ padding-top: 0; }
    #rsi.problem .focus article .text > *:not(:last-child){ margin-bottom: 20px; }
}

@media screen and (max-width: 1280px){
    #rsi.problem .intro .line-arrow{ 
        --bottom: 30px;
    }
    #rsi.problem .intro .diagram .common-grid .item{ padding: 25px; }

    #rsi.problem .issue .line-title + p{ font-size: 17px; margin-bottom: 20px; }
    #rsi.problem .issue .grayBg{ padding: 25px; }
    #rsi.problem .issue .common-gallery dl dt{ font-size: 18px; }
    #rsi.problem .issue .sec01 .dl dl dt{ padding-bottom: 7px; margin-bottom: 10px; }
    #rsi.problem .issue .sec01 .img p{ font-size: 16px; }

    #rsi.problem .focus article .img{ width: 370px; }
    #rsi.problem .focus article .text{ padding-left: 30px; }
    #rsi.problem .focus article .text dl dt{ font-size: 17px; }
}

@media screen and (max-width: 1024px){   
    #rsi.problem .issue .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 960px){    
    #rsi.problem .intro .diagram .common-grid{ grid-template-columns: repeat(1, 100%); }
    #rsi.problem .intro .diagram .common-grid .item{ flex-direction: row; justify-content: unset; align-items: center; text-align: left; padding-block: 20px; }
    #rsi.problem .intro .diagram .border .icon{ flex-shrink: 0; }
    #rsi.problem .intro .diagram .border .txt{ flex: 1 1 auto; min-width: 0; margin: 0 0 0 30px; }
    #rsi.problem .intro .diagram .bg{ text-align: left; margin-top: 0; }
    #rsi.problem .intro .diagram .bg .dot-list{ flex: 1 1 auto; min-width: 0; }
    #rsi.problem .intro .diagram .numbering .num{ flex-shrink: 0; text-align: center; margin-right: 30px; position: static; transform: unset; }  
    #rsi.problem .intro .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #rsi.problem .intro .common-grid.dl{ grid-template-columns: repeat(1, 100%); }
    
    #rsi.problem .issue .common-gallery dl dt{ font-size: 17px; }

    #rsi.problem .focus article .img{ width: 320px; }
}

@media screen and (max-width: 768px){ 
    #rsi.problem .issue .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #rsi.problem .focus article{ flex-direction: column; }
    #rsi.problem .focus article:not(:last-of-type){ margin-bottom: 50px; }
    #rsi.problem .focus article .img{ width: 100%; }
    #rsi.problem .focus article .text{ padding: 20px 0 0; }
}

@media screen and (max-width: 640px){
    #rsi.problem .issue .sec02 .common-gallery ul{ grid-template-columns: repeat(2, 50%); }
}


/* 제품 - 진행RSI - 부식해결 기술 */
#rsi.corrosion .line-dl dl dt{ border-bottom: 1px solid var(--blueBorder2); font-size: 20px; font-weight: 500; color: var(--mainColor); padding-bottom: 12px; margin-bottom: 20px; }
#rsi.corrosion colgroup .th{ width: 180px; }

#rsi.corrosion .intro .common-gallery{ margin-block: -20px; }
#rsi.corrosion .intro .common-gallery > *{ margin-block: 20px; }
#rsi.corrosion .intro .common-gallery figure{ margin-bottom: 20px; }
#rsi.corrosion .intro .topLine{ border-top: 1px solid #DDD; padding-top: 32px; margin-top: 32px; }
#rsi.corrosion .intro .blueBg{ display: flex; align-items: center; padding: 40px; }
#rsi.corrosion .intro .blueBg .img{ flex-shrink: 0; width: 190px; }
#rsi.corrosion .intro .blueBg .img figure img{ border-radius: 50%; }
#rsi.corrosion .intro .blueBg .text{ flex: 1 1 auto; min-width: 0; padding-left: 40px; }
#rsi.corrosion .intro .blueBg .text > *:not(:last-child){ margin-bottom: 16px; }
#rsi.corrosion .intro .blueBg .text p:not(.defalut){ line-height: 1.4; }
#rsi.corrosion .intro .blueBg .text p b{ font-weight: 500; }
#rsi.corrosion .intro .blueBg .text p strong{ font-size: 28px; font-weight: 600; color: var(--mainColor); }
#rsi.corrosion .intro ol.defalut{ counter-reset: num; }
#rsi.corrosion .intro ol.defalut li{ display: flex; counter-increment: num; }
#rsi.corrosion .intro ol.defalut li:not(:last-of-type){ margin-bottom: 16px; }
#rsi.corrosion .intro ol.defalut li .num{ flex-shrink: 0; display: inline-block; width: 23px; }
#rsi.corrosion .intro ol.defalut li .num::before{ content: counter(num) "."; }
#rsi.corrosion .intro ol.defalut li > dl{ flex: 1 1 auto; min-width: 0; }
#rsi.corrosion .intro ol.defalut li > dl dt{ margin-bottom: 8px; }
#rsi.corrosion .intro ol.defalut li > dl dd{ font-size: 16px; line-height: 1.7; padding-left: 12px; position: relative; }
#rsi.corrosion .intro ol.defalut li > dl dd::before{ content: "-"; position: absolute; top: 0; left: 0; line-height: inherit; }

#rsi.corrosion .types .common-gallery{ grid-template-columns: repeat(2, 50%); margin-inline: -24px; }
#rsi.corrosion .types .common-gallery > *{ display: flex; margin-inline: 24px; }
#rsi.corrosion .types .common-gallery .img{ flex-shrink: 0; width: 190px; margin-right: 40px; }
#rsi.corrosion .types .common-gallery .line-dl{ flex: 1 1 auto; min-width: 0; padding: 20px 0; }

#rsi.corrosion .table01 .active th,
#rsi.corrosion .table01 th.active{ font-weight: 600; }
#rsi.corrosion .table01 .active td{ font-weight: 500; }

#rsi.corrosion .table02 .blue-table th span{ min-height: calc(var(--lineHeight) * 2); display: flex; justify-content: center; align-items: center; line-height: inherit; }
#rsi.corrosion .table02 .blue-table td{ font-weight: 500; }
#rsi.corrosion .table02 .blue-table .active td{ font-weight: 600; }

#rsi.corrosion .table03 .blue-table .dot-list{ display: flex; flex-direction: column; justify-content: center; min-height: calc(3.4em + 4px); }
#rsi.corrosion .table03 .note{ margin-top: 32px; }
#rsi.corrosion .table03 .note .dot-list li.no strong{ font-size: 18px; color: var(--mainColor); }

@media screen and (max-width: 1700px){
    #rsi.corrosion .line-dl dl dt{ font-size: 19px; }

    #rsi.corrosion .intro .blueBg{ padding: 30px; }
    #rsi.corrosion .intro .blueBg .text p strong{ font-size: 24px; }

    #rsi.corrosion .types .common-gallery{ margin-inline: -20px; }
    #rsi.corrosion .types .common-gallery > *{ margin-inline: 20px; }
    #rsi.corrosion .types .common-gallery .img{ margin-right: 30px; }
    #rsi.corrosion .types .common-gallery .line-dl{ padding: 15px 0; }
}

@media screen and (max-width: 1550px){
    #rsi.corrosion .intro .blueBg br, 
    #rsi.corrosion .types .common-gallery br{ display: none; }
}

@media screen and (max-width: 1500px){
    #rsi.corrosion .intro .common-gallery > *{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 1280px){
    #rsi.corrosion .line-dl dl dt{ font-size: 18px; padding-bottom: 10px; margin-bottom: 15px; }
    #rsi.corrosion colgroup .th{ width: 150px; }
    
    #rsi.corrosion .intro .common-gallery figure{ margin-bottom: 15px; }
    #rsi.corrosion .intro .blueBg .text > *:not(:last-child){ margin-bottom: 10px; }
    #rsi.corrosion .intro .blueBg .text p strong{ font-size: 21px; }

    #rsi.corrosion .types .common-gallery{ margin-inline: -15px; }
    #rsi.corrosion .types .common-gallery > *{ margin-inline: 15px; }
    #rsi.corrosion .types .common-gallery .img{ margin-right: 25px; }
    #rsi.corrosion .types .common-gallery .line-dl{ padding: 10px 0; }
    
    #rsi.corrosion .note{ margin-top: 20px !important; }
    #rsi.corrosion .table02 .note{ font-size: 15px; }
    #rsi.corrosion .table03 .note .dot-list li.no strong{ font-size: 17px; }
}

@media screen and (max-width: 1100px){
    #rsi.corrosion .intro .common-gallery{ grid-template-columns: repeat(2, 50%); }  
}

@media screen and (max-width: 1024px){
    #rsi.corrosion .types .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #rsi.corrosion .types .common-gallery .img{ width: 170px; }
}

@media screen and (max-width: 960px){
    #rsi.corrosion .intro .blueBg{ padding: 25px; }
    #rsi.corrosion .intro .blueBg .img{ width: 160px; }
    #rsi.corrosion .intro .blueBg .text{ padding-left: 30px; }
    #rsi.corrosion .intro .blueBg .text p strong{ font-size: 19px; }
    
    #rsi.corrosion .types .common-gallery .line-dl{ padding: 5px 0; }
}

@media screen and (max-width: 768px){
    #rsi.corrosion .evaluation .responsive{
        --responsiveW: 150px;
    }
    #rsi.corrosion .evaluation .responsive, 
    #rsi.corrosion .evaluation .responsive tbody{ display: block; }
    #rsi.corrosion .evaluation .responsive colgroup,
    #rsi.corrosion .evaluation .responsive thead{ display: none; }
    #rsi.corrosion .evaluation .responsive{ min-width: unset !important; }
    #rsi.corrosion .evaluation .responsive br{ display: none; }
    #rsi.corrosion .evaluation .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #rsi.corrosion .evaluation .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #rsi.corrosion .evaluation .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #rsi.corrosion .evaluation .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #rsi.corrosion .evaluation .responsive tr > *::before{ content: attr(data-th); }
    #rsi.corrosion .evaluation .responsive th span{ min-height: unset; }
}

@media screen and (max-width: 640px){
    #rsi.corrosion .intro .blueBg{ flex-direction: column; padding-block: 30px; }
    #rsi.corrosion .intro .blueBg .text{ text-align: center; padding: 25px 0 0; }
    #rsi.corrosion .intro .common-gallery{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - 진행RSI - 제품소개 */
#rsi.products .common-banner{ opacity: 1 !important; }

#rsi.products .why{
    --height: 48px;
}
#rsi.products .why .defalut{ margin-bottom: 32px; }
#rsi.products .why .common-grid .item{ height: 100%; text-align: left; padding-top: calc(var(--padding) + 8px); margin-top: calc(var(--height) / 2); position: relative; }
#rsi.products .why .common-grid .item dt{ display: flex; justify-content: center; align-items: center; min-height: var(--height); background: var(--mainColor); border-radius: 999px; font-size: 18px; font-weight: 400; color: #FFF; text-align: center; padding: 5px 40px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }

#rsi.products .usage .colorBg{ margin-top: 0; }
#rsi.products .usage .common-grid{ --gap: 20px; }
#rsi.products .usage .item{ text-align: left; }
#rsi.products .usage .item dl dt{ font-size: 20px; font-weight: 500; color: var(--mainColor); line-height: 1.4; margin: 12px 0 20px; }
#rsi.products .usage .item dl dd{ margin-top: 16px; }
#rsi.products .usage .note .warning::before{ content: "*"; }

#rsi.products .principle .common-gallery{ --gap: 20px; }
#rsi.products .principle .sec01 .flex{ display: flex; align-items: center; }
#rsi.products .principle .sec01 .flex .text{ flex: 1 1 auto; min-width: 0; margin-right: 60px; }
#rsi.products .principle .sec01 .flex .img{ flex-shrink: 0; }
#rsi.products .principle .sec01 .flex .img figure{ display: block; background: #F6F6F6; text-align: center; }
#rsi.products .principle .sec02 .check-list li:not(:last-of-type){ margin-bottom: 8px; }
#rsi.products .principle .sec02 .dashed{ border-top: 1px dashed var(--blueBorder2); padding-top: 24px; margin-top: 24px; }
#rsi.products .principle .sec02 .dashed .warning{ color: var(--mainColor); }
#rsi.products .principle .sec02 .gallery > *:not(:last-of-type){ margin-bottom: 10px; }
#rsi.products .principle .sec02 .gallery01 .common-gallery{ grid-template-columns: 68.853% 1fr; }
#rsi.products .principle .sec02 .gallery01 figure{ height: 100%; background: #F6F6F6; }
#rsi.products .principle .sec03 .formula figure,
#rsi.products .principle .sec03 .formula figure img{ width: 100%; }
#rsi.products .principle .sec03 .formula .note{ border: 2px solid var(--blueBorder); font-size: 18px; font-weight: 500; color: #333; padding: 16px; margin-top: 20px; }
#rsi.products .principle .sec03 .formula .note em{ color: var(--mainColor); }
#rsi.products .principle .sec03 .blue-table figure{ display: block; aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
#rsi.products .principle .sec03 .blue-table figure img{ width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#rsi.products .principle .sec03 .table02 colgroup col.th{ width: 200px; }
#rsi.products .principle .sec03 .table02 .note{ color: var(--mainColor); }

#rsi.products .benefit .horizontal .common-grid{ grid-template-columns: repeat(2, 50%); }
#rsi.products .benefit .horizontal .item dl{ display: flex; align-items: center; height: 100%; }
#rsi.products .benefit .horizontal .item dl dt{ flex-shrink: 0; width: 140px; font-size: 18px; font-weight: 500; color: var(--mainColor); margin-right: 40px; }
#rsi.products .benefit .horizontal .item dl dt .icon{ margin-bottom: 8px; }
#rsi.products .benefit .horizontal .item dl dd{ flex: 1 1 auto; min-width: 0; text-align: left; }
#rsi.products .benefit .effect .common-gallery{ --gap: 20px; text-align: center; }
#rsi.products .benefit .effect .common-gallery{ grid-template-columns: repeat(2, 50%); }
#rsi.products .benefit .effect .common-gallery > *{ display: flex; flex-direction: column; }
#rsi.products .benefit .effect .img{ display: grid; grid-template-columns: repeat(2, 50%); }
#rsi.products .benefit .effect dl{ flex: 1 0 auto; border: 2px solid var(--blueBorder); border-top-color: transparent; color: #333; padding: 30px 40px; }
#rsi.products .benefit .effect dl dt{ font-size: 18px; font-weight: 500; line-height: 1.4; }
#rsi.products .benefit .effect dl dd{ font-size: 16px; font-weight: 300; line-height: 1.7; margin-top: 8px; }
#rsi.products .benefit .figure figure,
#rsi.products .benefit .figure figure img{ width: 100%; }
#rsi.products .benefit .figure .colorBg{ margin-bottom: 0; }

#rsi.products .proof .sec01 .flex{ display: flex; align-items: center; }
#rsi.products .proof .sec01 .img{ flex-shrink: 0; width: 40%; margin-right: 60px; }
#rsi.products .proof .sec01 .img figure,
#rsi.products .proof .sec01 .img figure img{ width: 100%; }
#rsi.products .proof .sec01 .duration{ flex: 1 1 auto; min-width: 0; text-align: center; }
#rsi.products .proof .sec01 .duration ol{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: -30px; }
#rsi.products .proof .sec01 .duration ol li{ margin: 30px; }
#rsi.products .proof .sec01 .duration ol li figure{ display: block; position: relative; }
#rsi.products .proof .sec01 .duration ol li figure::after{ content: ""; width: 13px; height: 24px; background: url("/img/sub/product/rsi_products_dotted_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -30px; transform: translate(50%, -50%); }
#rsi.products .proof .sec01 .duration ol li:last-of-type figure::after{ display: none; }
#rsi.products .proof .sec01 .duration ol li figure img{ width: 100%; }
#rsi.products .proof .sec01 .duration ol li p{ font-size: 20px; font-weight: 500; color: #333; margin-top: 8px; }
#rsi.products .proof .sec02 .grid{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -20px; }
#rsi.products .proof .sec02 .grid > *{ margin: 20px; }
#rsi.products .proof .sec02 .block{ grid-column: auto / span 2; }
#rsi.products .proof .sec02 .barTit{ margin-bottom: 16px; }
#rsi.products .proof .sec02 ul{ display: grid; grid-template-columns: repeat(2, 50%); margin: -10px; }
#rsi.products .proof .sec02 ul li{ margin: 10px; }
#rsi.products .proof .sec02 .figure{ display: grid; grid-template-columns: repeat(2, 50%); }
#rsi.products .proof .sec02 .figure figure,
#rsi.products .proof .sec02 .figure figure img{ width: 100%; }
#rsi.products .proof .sec02 .figure figure{ position: relative; }
#rsi.products .proof .sec02 .figure figure figcaption{ background: var(--mainColor); font-size: 16px; font-weight: 400; color: #FFF; line-height: 1.7; padding: 6px 16px; position: absolute; top: 0; left: 0; } 
#rsi.products .proof .sec02 .figure figure figcaption.before{ background: #333; }
#rsi.products .proof .sec03 .flex{ display: flex; }
#rsi.products .proof .sec03 .img{ flex-shrink: 0; width: calc(50% - 10px); background: var(--grayBg); text-align: center; padding: 20px; }  
#rsi.products .proof .sec03 .img figure{ background: var(--grayBg); }
#rsi.products .proof .sec03 .img figure img{ mix-blend-mode: multiply; }
#rsi.products .proof .sec03 .text{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: 60px; }
#rsi.products .proof .sec03 .text .check-list li:not(:last-of-type){ border-bottom: 1px dashed var(--blueBorder2); padding-bottom: 20px; margin-bottom: 20px; }

#rsi.products .support{
    --num: 40px;
}
#rsi.products .support .common-feature{ background: url("/img/sub/product/rsi_products_feature.jpg") no-repeat center center / cover; }
#rsi.products .support .common-feature .txt em{ letter-spacing: 0.5em; }
#rsi.products .support .common-gallery{ text-align: center; }
#rsi.products .support .common-gallery .txt{ margin-top: 16px; }
#rsi.products .support .common-gallery .txt p{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.4; margin-bottom: 4px; }
#rsi.products .support .common-gallery .txt span{ display: block; font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; }
#rsi.products .support .strength ol{ border-top: 1px solid var(--blueBorder2); }
#rsi.products .support .strength ol > li{ display: flex; align-items: center; border-bottom: 1px solid var(--blueBorder2); padding: 48px 40px; }
#rsi.products .support .strength .icon{ flex-shrink: 0; width: 140px; text-align: center; margin: 0 40px; }
#rsi.products .support .strength .icon p{ font-size: 16px; font-weight: 500; color: var(--mainColor); margin-top: 8px; }
#rsi.products .support .strength .dot-list{ flex: 1 1 auto; min-width: 0; }
#rsi.products .support .figure .colorBg{ font-weight: 200; margin: 0; }
#rsi.products .support .figure .colorBg strong{ font-weight: 400; }

@media screen and (max-width: 1700px){
    #rsi.products .why{ 
        --height: 42px;
    }
    #rsi.products .why .common-grid .item dt{ padding-inline: 25px; }

    #rsi.products .usage .item dl dt{ font-size: 19px; margin: 10px 0 15px; }  
    
    #rsi.products .principle .sec03 .table02 colgroup col.th{ width: 175px; }

    #rsi.products .benefit .horizontal .item dl dt{ width: 120px; }
    #rsi.products .benefit .horizontal .item dl dt .icon img{ max-height: 50px; }
    #rsi.products .benefit .effect dl{ padding: 20px 30px; }

    #rsi.products .proof .sec01 .duration ol li p{ font-size: 19px; }
    #rsi.products .proof .sec02 .grid{ margin: -10px; }
    #rsi.products .proof .sec02 .grid > *{ margin: 10px; }
    #rsi.products .proof .sec02 .figure figure figcaption{ padding: 3px 12px; }

    #rsi.products .support .common-gallery .txt p{ font-size: 19px; }
    #rsi.products .support .common-gallery .txt span{ font-size: 17px; }
}

@media screen and (max-width: 1500px){
    #rsi.products .usage .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }

    #rsi.products .principle .sec01 .flex .text{ margin-right: 30px; }
    #rsi.products .principle .sec01 .flex .img{ width: 45%; }
}

@media screen and (max-width: 1280px){
    #rsi.products .why{ 
        --height: 38px;
    }
    #rsi.products .why .common-grid .item dt{ font-size: 17px; padding-inline: 20px; }

    #rsi.products .usage .item dl dt{ font-size: 18px; margin-bottom: 12px; }
    #rsi.products .usage .item .icon img{ max-height: 50px; }

    #rsi.products .principle .sec02 .dashed{ padding-top: 18px; margin-top: 18px; }
    #rsi.products .principle .sec03 .formula .note{ font-size: 17px; padding: 10px; margin-top: 15px; }
    #rsi.products .principle .sec03 .table02 colgroup col.th{ width: 150px; }

    #rsi.products .benefit .horizontal .item dl dt{ font-size: 17px; margin-right: 30px; }
    #rsi.products .benefit .effect dl{ padding: 15px 25px; }
    #rsi.products .benefit .effect dl dt{ font-size: 17px; }

    #rsi.products .proof .sec01 .img{ margin-right: 30px; }  
    #rsi.products .proof .sec01 .duration ol{ margin: -20px; }
    #rsi.products .proof .sec01 .duration ol li{ margin: 20px; }
    #rsi.products .proof .sec01 .duration ol li p{ font-size: 18px; margin-top: 10px; }
    #rsi.products .proof .sec01 .duration ol li figure::after{ width: 10px; right: -20px; }
    #rsi.products .proof .sec02 .figure figure figcaption{ font-size: 15px; } 
    #rsi.products .proof .sec03 .text{ padding-left: 40px; }
    #rsi.products .proof .sec03 .text .check-list li:not(:last-of-type){ padding-bottom: 15px; margin-bottom: 15px; }

    #rsi.products .support{
        --num: 35px;
    }
    #rsi.products .support .common-gallery .txt{ margin-top: 12px; }
    #rsi.products .support .common-gallery .txt p{ font-size: 18px; }
    #rsi.products .support .common-gallery .txt span{ font-size: 16px; }
    #rsi.products .support .strength ol > li{ padding: 40px 30px; }  
    #rsi.products .support .strength .icon{ margin: 0 25px; }
}

@media screen and (max-width: 1024px){
    #rsi.products .proof .sec02 .grid{ grid-template-columns: repeat(1, 100%); margin-block: -15px; }
    #rsi.products .proof .sec02 .grid > *{ margin-block: 15px; }
    #rsi.products .proof .sec02 dl:not(.block) dd{ width: calc(50% - 10px); }
}

@media screen and (max-width: 960px){
    #rsi.products .why .common-grid{ grid-template-columns: repeat(1, 100%); }
    #rsi.products .why .common-grid .item{ display: flex; height: unset; padding: 10px; margin-top: 0; }
    #rsi.products .why .common-grid .item dt{ flex-shrink: 0; width: 80px; border-radius: 0; position: unset; transform: unset; padding: 15px; }
    #rsi.products .why .common-grid .item dd{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 25px; padding-right: 0; }

    #rsi.products .usage .common-grid{ --padding: 20px; }

    #rsi.products .principle .responsive{
        --responsiveW: 120px;
    }
    #rsi.products .principle .responsive, 
    #rsi.products .principle .responsive tbody{display: block; }
    #rsi.products .principle .responsive thead{ display: none; }
    #rsi.products .principle .responsive tr{ display: flex; flex-direction: column; }
    #rsi.products .principle .responsive tr > *{ width: 100%; border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #rsi.products .principle .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #rsi.products .principle .responsive tr > *::before{ content: attr(data-th); }
    #rsi.products .principle .sec03 .table02 colgroup col.th{ width: 125px; }

    #rsi.products .benefit .horizontal .common-grid{ grid-template-columns: repeat(1, 100%); }
    #rsi.products .benefit .horizontal .item dl dt{ width: 85px; }
    #rsi.products .benefit .horizontal .item dl dt .icon img{ max-height: 45px; }

    #rsi.products .proof .sec01 .flex{ flex-direction: column; }
    #rsi.products .proof .sec01 .flex > *{ width: 100%; }
    #rsi.products .proof .sec01 .img{ margin-right: 0; margin-bottom: 25px; }
    #rsi.products .proof .sec01 .duration ol li p{ font-size: 17px; }
    #rsi.products .proof .sec03 .flex{ flex-direction: column; }
    #rsi.products .proof .sec03 .flex > *{ width: 100%; }
    #rsi.products .proof .sec03 .text{ padding: 25px 0 0; }

    #rsi.products .support .common-gallery .txt p{ font-size: 17px; margin-bottom: 0; }
    #rsi.products .support .strength ol > li{ padding: 30px 20px; }  
    #rsi.products .support .strength .icon{ width: 120px; }
}

@media screen and (max-width: 768px){
    #rsi.products .usage .common-grid{ grid-template-columns: repeat(2, 50%); }

    #rsi.products .principle .sec01 .flex{ flex-direction: column; }
    #rsi.products .principle .sec01 .flex .text{ margin: 0 0 10px; }
    #rsi.products .principle .sec01 .flex .img{ width: 100%; }
    #rsi.products .principle .sec01 .common-gallery,
    #rsi.products .principle .sec02 .common-gallery{ grid-template-columns: repeat(1, 100%) !important; }  
    
    #rsi.products .benefit .effect .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #rsi.products .proof .defalut br{ display: none; }

    #rsi.products .support .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #rsi.products .benefit br.m, 
    #rsi.products .support br.m{ display: block; }

    #rsi.products .proof .sec02 ul{ grid-template-columns: repeat(1, 100%); }
    #rsi.products .proof .sec02 dl:not(.block) dd{ width: 100%; }
    
    #rsi.products .support .strength ol > li{ min-height: 150px; padding: 20px; }
    #rsi.products .support .strength .num{ display: none; }
    #rsi.products .support .strength .icon{ width: 100px; margin-left: 0; }
    #rsi.products .support .strength .icon img{ max-height: 50px; }
}

@media screen and (max-width: 560px){
    #rsi.products .why br{ display: none; }
}


/* 제품 - 진행RSI - 기술의 우수성 */
#rsi.advantages .common-grid{ grid-template-columns: repeat(4, 25%); }
#rsi.advantages .common-grid .item{ padding: 0; }

#rsi.advantages .blue-table colgroup .th{ width: 200px; }
#rsi.advantages .blue-table .min{ display: flex; flex-direction: column; justify-content: center; min-height: 3.4em; line-height: 1.7; }
#rsi.advantages .blue-table .min *{ line-height: inherit; } 

@media screen and (max-width: 1700px){
    #rsi.advantages .blue-table colgroup .th{ width: 170px; }
}

@media screen and (max-width: 960px){
    #rsi.advantages .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }

    #rsi.advantages .responsive{
        --responsiveW: 125px;
    }
    #rsi.advantages .responsive,
    #rsi.advantages .responsive tbody{ display: block; }
    #rsi.advantages .responsive colgroup,
    #rsi.advantages .responsive thead{ display: none; }
    #rsi.advantages .responsive tr{ display: flex; flex-direction: column; }
    #rsi.advantages .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #rsi.advantages .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #rsi.advantages .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #rsi.advantages .responsive tr > *::before{ content: attr(data-th); }
}

@media screen and (max-width: 768px){
    #rsi.advantages .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #rsi.advantages .common-grid{ grid-template-columns: repeat(2, 50%); }
}


/* 제품 - 진행RSI - 설치실적 */
#rsi.references .blueBg{ padding: 40px; }
#rsi.references .note{ border-top: 1px dashed var(--blueBorder2); padding-top: 24px; }
#rsi.references .warning{ color: var(--mainColor); }
#rsi.references .gallery p{ font-size: 16px; font-weight: 500; color: #333; line-height: 1.7; text-align: center; margin-top: 12px; }

#rsi.references .common-banner .item{ background: url("/img/sub/product/rsi_references_banner.jpg") no-repeat center center / cover; }
#rsi.references .common-banner .text h4 span{ display: inline-block; font-size: 24px; font-weight: 400; vertical-align: middle; transform: translateY(-15%); }
#rsi.references .common-banner .text p{ margin-top: 8px; }

#rsi.references .step .common-gallery figure{ margin-top: 0; }

@media screen and (max-width: 1700px){
    #rsi.references .blueBg{ padding: 30px; }

    #rsi.references .common-banner .text h4 span{ font-size: 21px; transform: translateY(-12%); }
}

@media screen and (max-width: 1600px){
    #rsi.references .blueBg br{ display: none; }
}

@media screen and (max-width: 1280px){
    #rsi.references .blueBg{ padding: 20px 25px; }
    #rsi.references .note{ padding-top: 20px; margin-top: 20px; }
    #rsi.references .gallery p{ margin-top: 9px; }

    #rsi.references .common-banner .text h4 span{ font-size: 18px; transform: translateY(-10%); }
}

@media screen and (max-width: 1024px){
    #rsi.references .column4 .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 960px){
    #rsi.references .common-banner .item::after{ content: ""; }
    #rsi.references .common-banner .text h4 span{ font-size: 17px; }
}

@media screen and (max-width: 800px){
    #rsi.references .blue-dl .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #rsi.references .step .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #rsi.references .step .common-gallery li:nth-of-type(even) figure::after{ display: none; }
}

@media screen and (max-width: 700px){
    #rsi.references .column3 .common-gallery, 
    #rsi.references .column4 .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #rsi.references .note br{ display: none; }
}


/* 제품 - 진행워터PH7.4 - 제품소개 */
#ph7-4.products .common-split{
    --imgW: 530px;
    --padding: 80px;
}

#ph7-4.products .common-banner .item{ background: url("/img/sub/product/ph7-4_products_banner.jpg") no-repeat center right 5% / cover; }
#ph7-4.products .intro figure,
#ph7-4.products .intro figure img{ width: 100%; }

#ph7-4.products .accordion{
    --width: 680px;
}
#ph7-4.products .accordion .item-slick{ display: flex; }
#ph7-4.products .accordion .item{ width: calc((100% - 40px) / 5); flex-grow: 1; transform: translateZ(0); -webkit-backface-visibility: visible; backface-visibility: visible; transition: width 0.4s; will-change: width; }
#ph7-4.products .accordion .item:not(:last-of-type){ margin-right: 10px; }
#ph7-4.products .accordion .item div{ width: 100%; overflow: hidden; }
#ph7-4.products .accordion .item figure{ width: var(--width); position: relative; left: 50%; transform: translateX(-50%); -webkit-backface-visibility: visible; backface-visibility: visible; }
#ph7-4.products .accordion .dots{ display: none; margin-top: 14px; }
#ph7-4.products .accordion .slick-dots{ display: flex; justify-content: center; }
#ph7-4.products .accordion .slick-dots li{ width: 8px; height: 8px; background: rgba(var(--mainRGB), 0.2); border-radius: 50%; cursor: pointer; }
#ph7-4.products .accordion .slick-dots li.slick-active{ background: var(--mainColor); }
#ph7-4.products .accordion .slick-dots li:not(:last-of-type){ margin-right: 8px; }
#ph7-4.products .accordion .slick-dots button{ display: none; }

#ph7-4.products .prod .common-grid{ --gap: 20px; grid-template-columns: repeat(2, 50%); text-align: left; }
#ph7-4.products .prod .common-grid .item{ display: flex; align-items: center; padding-inline: 60px; }
#ph7-4.products .prod .common-grid .icon{ flex-shrink: 0; }
#ph7-4.products .prod .common-grid .text{ flex: 1 1 auto; min-width: 0; margin-left: 40px; }
#ph7-4.products .prod .common-grid .text p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; }

#ph7-4.products .difference .common-split .p-box p{ font-size: 20px; font-weight: 300; color: #333; }
#ph7-4.products .difference .common-split .p-box p.hyphen{ font-size: 16px; color: #666; padding-left: 12px; position: relative; }
#ph7-4.products .difference .common-split .p-box p.hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }
#ph7-4.products .difference .keyword{ margin-top: 48px; }
#ph7-4.products .difference .keyword ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: -5px; }
#ph7-4.products .difference .keyword ul li{ display: flex; flex-direction: column; justify-content: center; background: var(--mainColor); font-size: 18px; font-weight: 400; color: #FFF; line-height: 1.4; text-align: center; aspect-ratio: 1 / 1; padding: 10px; margin: 5px; } 

#ph7-4.products .motive .common-split .grayBg{ padding: calc(var(--padding) / 2) var(--padding); }
#ph7-4.products .motive .common-split dl dt{ border-bottom: 1px solid #DDD; font-size: 22px; font-weight: 600; color: #333; line-height: 1.4; padding-bottom: 12px; margin-bottom: 24px; }
#ph7-4.products .motive .common-split .p-box{ font-size: 16px; font-weight: 300; color: #333; }

#ph7-4.products .water{ border: 2px solid var(--blueBorder); padding: 60px 120px; }
#ph7-4.products .water .common-split{ --imgW: 210px; --padding: 120px; }
#ph7-4.products .water .common-split .text h5{ font-family: var(--engFont); }
#ph7-4.products .water .img figure{ position: relative; }
#ph7-4.products .water .img div{ color: #FFF; text-align: center; position: absolute; top: 30%; left: 0; right: 0; }
#ph7-4.products .water .img p,
#ph7-4.products .water .img strong{ line-height: 1.4; }
#ph7-4.products .water .img p{ font-size: 16px; font-weight: 400; }
#ph7-4.products .water .img strong{ font-family: var(--engFont); font-size: 28px; font-weight: 600; margin-top: 4px; }
#ph7-4.products .water dl{ margin-top: 48px; }
#ph7-4.products .water ol{ display: grid; grid-template-columns: repeat(4, 25%); text-align: center; margin: -5px; counter-reset: num; }
#ph7-4.products .water ol li{ display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1 / 1; background: var(--skyBlue2); border-radius: 50%; padding: 10px; margin: 5px; counter-increment: num; }
#ph7-4.products .water ol li > *{ line-height: 1.4; }
#ph7-4.products .water ol li .num{ display: block; font-family: var(--engFont); font-size: 14px; font-weight: 600; color: var(--mainColor); margin-bottom: 4px; }
#ph7-4.products .water ol li .num::before{ content: counter(num, decimal-leading-zero); }
#ph7-4.products .water ol li p{ font-size: 16px; font-weight: 300; color: #333; margin-bottom: 10px; }

#ph7-4.products .common-feature{ background: url("/img/sub/product/ph7-4_products_feature.jpg") no-repeat center center / cover; }
#ph7-4.products .common-feature .flex{ display: flex; align-items: center; }
#ph7-4.products .common-feature .txt{ flex: 1 1 auto; min-width: 0; text-align: left; }  
#ph7-4.products .common-feature .btn{ flex-shrink: 0; margin-left: 30px; }
#ph7-4.products .common-feature .btn a{ display: inline-flex; justify-content: center; align-items: center; width: 186px; height: 60px; background: #FFF; font-family: var(--engFont); font-size: 18px; font-weight: 600; color: rgba(var(--mainRGB), 0.5);  padding: 10px; transition: color 0.4s; }
#ph7-4.products .common-feature .btn a i{ flex-shrink: 0; display: inline-block; width: 6px; height: 8px; background: rgba(var(--mainRGB), 0.5); mask: url("/img/sub/product/icon_moreview_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/product/icon_moreview_arrow.svg") no-repeat center center / contain; margin-left: 15px; transition: background 0.4s; }

#ph7-4.products .rnd .common-split{
    --imgW: 460px;
}
#ph7-4.products .rnd .common-split .text span{ display: block; font-size: 24px; font-weight: 500; color: var(--mainColor); margin-bottom: 12px; }
#ph7-4.products .rnd .mark{ margin-top: 20px; }
#ph7-4.products .rnd .mark ul{ display: flex; flex-wrap: wrap; margin: -2px; counter-reset: num; }
#ph7-4.products .rnd .mark ul li{ margin: 2px; counter-increment: num; position: relative; }
#ph7-4.products .rnd .mark ul li em{ display: inline-flex; justify-content: center; align-items: baseline; border: 2px solid rgba(var(--mainRGB), 0.2); border-radius: 999px; padding: 11px 20px; font-size: 16px; font-weight: 500; color: var(--mainColor); line-height: 1.4; cursor: pointer; }
#ph7-4.products .rnd .mark ul li em::before{ content: counter(num, decimal-leading-zero) "."; font-family: var(--engFont); line-height: inherit; margin-right: 6px; }
#ph7-4.products .rnd .mark dl{ max-width: 340px; width: max-content; background: var(--mainColor); box-shadow: 0 4px 40px rgba(var(--mainRGB), 0.2); font-size: 16px; color: #FFF; line-height: 1.7; padding: 30px; position: absolute; top: 8px; left: 20px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
#ph7-4.products .rnd .mark dl *{ line-height: inherit; }
#ph7-4.products .rnd .mark dl dt{ font-weight: 400; }
#ph7-4.products .rnd .mark dl dd{ font-weight: 200; margin-top: 4px; }

@media screen and (hover: hover) and (pointer: fine){
    #ph7-4.products .accordion.hover .item{ width: calc((100% - 40px - var(--width)) / 4); }
    #ph7-4.products .accordion.hover .item.active{ width: var(--width); }

    #ph7-4.products .common-feature:hover .btn a{ color: var(--mainColor); }
    #ph7-4.products .common-feature:hover .btn a i{ background: var(--mainColor); }

    #ph7-4.products .rnd .mark ul li:hover dl{ opacity: 1; pointer-events: unset; }
}

@media screen and (max-width: 1700px){
    #ph7-4.products .common-split{
        --imgW: 480px;
        --padding: 60px;
    }

    #ph7-4.products .accordion{
        --width: 600px;
    }

    #ph7-4.products .prod .common-grid .item{ padding-inline: 40px; }
    #ph7-4.products .prod .common-grid .text{ margin-left: 30px; }

    #ph7-4.products .difference .common-split .p-box p{ font-size: 19px; }
    #ph7-4.products .difference .keyword{ margin-top: 40px; }
    #ph7-4.products .difference .keyword ul li{ font-size: 17px; }

    #ph7-4.products .motive .common-split dl dt{ font-size: 21px; }

    #ph7-4.products .water{ padding: 50px 80px; }
    #ph7-4.products .water .common-split{ --padding: 80px; }
    #ph7-4.products .water .img strong{ font-size: 24px; }

    #ph7-4.products .common-feature .btn a{ width: 160px; height: 55px; }

    #ph7-4.products .rnd .common-split{ 
        --imgW: 400px; 
    }
    #ph7-4.products .rnd .common-split .text span{ font-size: 22px; }
    #ph7-4.products .rnd .mark ul li em{ padding: 9px 16px; }
    #ph7-4.products .rnd .mark dl{ padding: 25px; left: 16px; }
    #ph7-4.products .rnd .mark ul li:last-of-type dl{ left: unset; right: 16px; }
}

@media screen and (max-width: 1600px){
    #ph7-4.products .intro br{ display: none; }
}

@media screen and (max-width: 1500px){
    #ph7-4.products .prod .common-grid br{ display: none; }
    #ph7-4.products .condition .common-info br{ display: none; }
    #ph7-4.products .water .text br{ display: none; }
}

@media screen and (max-width: 1400px){
    #ph7-4.products .common-split{
        --imgW: 420px;
        --padding: 50px;
    }

    #ph7-4.products .water{ padding: 40px 60px; }
    #ph7-4.products .water .common-split{ --imgW: 180px; --padding: 60px; }
}

@media screen and (max-width: 1280px){
    #ph7-4.products .common-split{
        --imgW: 400px;
        --padding: 40px;
    }

    #ph7-4.products .accordion{
        --width: 500px;
    }

    #ph7-4.products .prod .common-grid .item{ padding-inline: 25px; }
    #ph7-4.products .prod .common-grid .text{ margin-left: 25px; }

    #ph7-4.products .difference .common-split .p-box p{ font-size: 18px; }
    #ph7-4.products .difference .keyword{ margin-top: 30px; }

    #ph7-4.products .motive .common-split dl dt{ font-size: 20px; padding-bottom: 8px; margin-bottom: 16px; }

    #ph7-4.products .common-feature .btn a{ width: 145px; height: 50px; font-size: 17px; }

    #ph7-4.products .rnd .common-split{ 
        --imgW: 360px; 
    }
    #ph7-4.products .rnd .common-split .text span{ font-size: 20px; margin-bottom: 9px; }
    #ph7-4.products .rnd .mark ul li em{ font-size: 15px; padding: 7px 13px; }
    #ph7-4.products .rnd .mark dl{ padding: 20px; left: 13px; }
    #ph7-4.products .rnd .mark ul li:last-of-type dl{ right: 13px; }
}

@media screen and (max-width: 1200px){
    #ph7-4.products .common-split{
        --imgW: 450px;
        --padding: 40px;
    }

    #ph7-4.products .water .common-split{ --imgW: 200px; }  
}

@media screen and (max-width: 1024px){
    #ph7-4.products .difference .common-split{ flex-direction: column; }
    #ph7-4.products .difference .common-split .img{ width: 100%; }
    #ph7-4.products .difference .common-split .text{ padding: 25px 0 0; }

    #ph7-4.products .motive .common-split{ flex-direction: column; }
    #ph7-4.products .motive .common-split .img{ width: 100%; }
    #ph7-4.products .motive .common-split .grayBg{ padding: 25px; }  
}

@media screen and (max-width: 960px){
    #ph7-4.products .common-banner .item::after{ content: ""; }

    #ph7-4.products .accordion{
        --width: 400px;
    }
    #ph7-4.products .accordion .item-slick{ width: calc(100% + (var(--innerGap) * 2)); margin-left: calc(var(--innerGap) * -1); display: block !important; }
    #ph7-4.products .accordion .item-slick .slick-track{ display: flex !important; }
    #ph7-4.products .accordion .item{ flex: unset !important; width: var(--width) !important; }
    #ph7-4.products .accordion .dots{ display: block; }

    #ph7-4.products .prod .common-grid{ --gap: 14px; grid-template-columns: repeat(1, 100%); }
    #ph7-4.products .prod .common-grid .item{ padding-block: 20px; }

    #ph7-4.products .condition .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #ph7-4.products .water{ padding: 30px; }
    #ph7-4.products .water .common-split{ flex-direction: column; } 
    #ph7-4.products .water .img{ width: 100%; }
    #ph7-4.products .water .img br{ display: none; }
    #ph7-4.products .water .img figure{ display: flex; justify-content: center; align-items: center; }
    #ph7-4.products .water .img img{ flex-shrink: 0; width: 120px; }
    #ph7-4.products .water .img div{ background: var(--blueBorder); padding: 15px 25px; color: #333; position: relative; top: unset; left: unset; margin-left: 70px; }
    #ph7-4.products .water .img div::before{ content: ""; width: 50px; height: 36px; background: var(--blueBorder); clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); position: absolute; top: 50%; left: 1px; transform: translate(-100%, -50%); }
    #ph7-4.products .water .img p{ font-weight: 500; }
    #ph7-4.products .water .img strong{ font-weight: 700; }
    #ph7-4.products .water .text{ padding: 30px 0 0; } 

    #ph7-4.products .common-feature .btn a i{ margin-left: 10px; }

    #ph7-4.products .rnd ol > li:not(:last-of-type){ margin-bottom: 40px; }
    #ph7-4.products .rnd .common-split{ flex-direction: column; }
    #ph7-4.products .rnd .common-split .img{ width: 100%; }
    #ph7-4.products .rnd .common-split .text{ padding: 25px 0 0; }
    #ph7-4.products .rnd .common-split .text span{ font-size: 18px; }
    #ph7-4.products .rnd .common-split .mark{ margin-top: 30px; }
    #ph7-4.products .rnd .common-split .mark ul{ display: block; margin: -10px; }
    #ph7-4.products .rnd .common-split .mark ul li{ border: 2px solid var(--blueBorder2); padding: 15px; margin: 10px; }
    #ph7-4.products .rnd .common-split .mark em{ width: 100%; justify-content: flex-start; border: none; font-size: 17px; text-align: left; padding: 0; cursor: unset; }
    #ph7-4.products .rnd .common-split .mark dl{ max-width: 100%; width: 100%; background: none; border-top: 1px dashed var(--blueBorder2); box-shadow: unset; color: #333; padding: 12px 0 0; margin-top: 12px; position: static; transform: unset; opacity: 1; pointer-events: unset; }
    #ph7-4.products .rnd .common-split .mark dl dt{ display: none; }
    #ph7-4.products .rnd .common-split .mark dl dd{ font-weight: 300; }
}

@media screen and (max-width: 768px){
    #ph7-4.products .common-feature::after{ content: ""; background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4)); } 
    #ph7-4.products .common-feature .flex{ flex-direction: column; align-items: unset; }
    #ph7-4.products .common-feature .txt{ text-align: center; }
    #ph7-4.products .common-feature .btn{ margin: 30px 0 0; }

    #ph7-4.products .common-qna br{ display: none; }
}

@media screen and (max-width: 640px){
    #ph7-4.products .water{ padding-inline: 25px; }
    #ph7-4.products .water ol{ grid-template-columns: repeat(3, calc(100% / 3)); }
}


/* 제품 - 진행워터PH7.4 - 정수방식 */
#ph7-4.filtration .common-grid{
    --gap: 20px;
}
#ph7-4.filtration .common-grid .item .txt{ margin-top: 8px; }
#ph7-4.filtration .common-grid .item .txt strong{ color: #333; }

#ph7-4.filtration .method .common-split{ 
    --imgW: 45.8345%;
    --padding: 100px;
} 
#ph7-4.filtration .method .common-split .blueBg{ padding: var(--padding); }
#ph7-4.filtration .method .common-feature{ background: url("/img/sub/product/ph7-4_filtration_feature01.jpg") no-repeat center center / cover; }

#ph7-4.filtration .filter .common-split ul li{ display: flex; align-items: center; }
#ph7-4.filtration .filter .common-split ul li:not(:last-of-type){ margin-bottom: 30px; }
#ph7-4.filtration .filter .common-split ul li figure{ flex-shrink: 0; }
#ph7-4.filtration .filter .common-split dl{ flex: 1 1 auto; min-width: 0; padding-left: 30px; } 
#ph7-4.filtration .filter .common-split dl *{ color: #333; line-height: 1.7; }
#ph7-4.filtration .filter .common-split dl dt{ font-size: 18px; font-weight: 500; }
#ph7-4.filtration .filter .common-split dl dd{ font-size: 16px; font-weight: 300; margin-top: 4px; }
#ph7-4.filtration .filter .gap32 > *:not(:last-of-type){ border-bottom: 1px solid #DDD; padding-bottom: 32px; }
#ph7-4.filtration .filter .gap32 .note{ font-weight: 400; margin-bottom: 0; }
#ph7-4.filtration .filter .common-gallery{ --gap: 20px; text-align: center; counter-reset: num; }
#ph7-4.filtration .filter .common-gallery li{ counter-increment: num; }
#ph7-4.filtration .filter .common-gallery .step{ display: flex; align-items: center; background: linear-gradient(to right, #FFF, #0082C7); border-radius: 0 999px 999px 0; padding: 7px; }
#ph7-4.filtration .filter .common-gallery .step span{ flex: 1 1 auto; display: block; min-width: 0; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: var(--mainColor); padding: 0 7px; }
#ph7-4.filtration .filter .common-gallery .step span::before{ content: "STEP " counter(num, decimal-leading-zero); }
#ph7-4.filtration .filter .common-gallery .step i{ flex-shrink: 0; display: inline-block; width: 45px; height: 45px; background: #FFF url("/img/sub/product/ph7-4_filtration_step_arrow.svg") no-repeat center center / contain; border-radius: 50%; margin-left: 7px; }
#ph7-4.filtration .filter .common-gallery dl{ color: #333; padding: 24px 0; }
#ph7-4.filtration .filter .common-gallery dl dt{ font-size: 20px; font-weight: 500; }
#ph7-4.filtration .filter .common-gallery dl dd{ font-size: 16px; font-weight: 300; line-height: 1.7; margin-top: 12px; }

#ph7-4.filtration .zinc-ion .figure figure,
#ph7-4.filtration .zinc-ion .figure figure img{ width: 100%; }
#ph7-4.filtration .zinc-ion .table dl > *:not(:last-child){ margin-bottom: 24px; }
#ph7-4.filtration .zinc-ion .table .defalut{ font-size: 16px; }
#ph7-4.filtration .zinc-ion .table .table01 colgroup col.th{ width: 200px; }
#ph7-4.filtration .zinc-ion .table .table02 > *:not(:last-child){ margin-bottom: 24px; }
#ph7-4.filtration .zinc-ion .note{ display: flex; justify-content: center; align-items: center; padding: 20px; }
#ph7-4.filtration .zinc-ion .note img{ margin-left: 8px; mix-blend-mode: multiply; vertical-align: middle; }
#ph7-4.filtration .zinc-ion .formula{ text-align: center; line-height: 1.4; padding: 80px; }
#ph7-4.filtration .zinc-ion .formula *{ line-height: inherit; }
#ph7-4.filtration .zinc-ion .formula .flex{ display: flex; max-width: 920px; margin: 0 auto; }
#ph7-4.filtration .zinc-ion .formula .flex > *:not(:last-child){ margin-right: 20px; }
#ph7-4.filtration .zinc-ion .formula strong,
#ph7-4.filtration .zinc-ion .formula span{ display: block; }
#ph7-4.filtration .zinc-ion .formula strong,
#ph7-4.filtration .zinc-ion .formula .op{ font-size: 32px; font-weight: 500; color: #333; }
#ph7-4.filtration .zinc-ion .formula span{ font-size: 16px; font-weight: 300; color: #555; margin-top: 8px; }
#ph7-4.filtration .zinc-ion .formula .term{ flex: 1 1 auto; min-width: 0; width: 100%; } 
#ph7-4.filtration .zinc-ion .formula .op{ flex-shrink: 0; display: inline-block; width: 40px; }
#ph7-4.filtration .zinc-ion .formula .arrow{ color: var(--mainColor); }

#ph7-4.filtration .process{
    --num: 40px;
}
#ph7-4.filtration .process .common-feature{ background: url("/img/sub/product/ph7-4_filtration_feature02.jpg") no-repeat center center / cover; }
#ph7-4.filtration .process .common-gallery{ grid-template-columns: repeat(4, 25%); text-align: center; }
#ph7-4.filtration .process .common-gallery li{ position: relative; }
#ph7-4.filtration .process .common-gallery dl{ margin-top: 16px; }
#ph7-4.filtration .process .common-gallery dl *{ color: #333; line-height: 1.7; }
#ph7-4.filtration .process .common-gallery dl dt{ font-size: 18px; font-weight: 500; margin-bottom: 4px; }
#ph7-4.filtration .process .common-gallery dl dd{ font-size: 16px; font-weight: 300; }

#ph7-4.filtration .compare .table01 thead th.active{ font-weight: 500; }
#ph7-4.filtration .compare .table01 tbody th.active{ font-weight: 600; }
#ph7-4.filtration .compare .table01 tbody td.active{ font-weight: 500; }
#ph7-4.filtration .compare .table02 .blue-table colgroup col.th{ width: 15%; }
#ph7-4.filtration .compare .table02 .blue-table em{ color: var(--mainColor); }
#ph7-4.filtration .compare .table02 .defalut{ display: flex; margin-top: 24px; }
#ph7-4.filtration .compare .table02 .defalut span{ flex-shrink: 0; display: inline-block; line-height: inherit; padding-left: 15px; margin-right: 4px; position: relative; }
#ph7-4.filtration .compare .table02 .defalut span::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
    #ph7-4.filtration .method .common-split{ 
        --padding: 80px; 
    }

    #ph7-4.filtration .filter .common-split ul li figure{ width: 100px; }
    #ph7-4.filtration .filter .common-gallery .step i{ width: 37px; height: 37px; }
    #ph7-4.filtration .filter .common-gallery dl dt{ font-size: 19px; }

    #ph7-4.filtration .zinc-ion .table .table01 colgroup col.th{ width: 175px; }
    #ph7-4.filtration .zinc-ion .formula{ padding: 60px; }
    #ph7-4.filtration .zinc-ion .formula strong, 
    #ph7-4.filtration .zinc-ion .formula .op{ font-size: 28px; }  
    #ph7-4.filtration .zinc-ion .formula .op{ width: 36px; }
}

@media screen and (max-width: 1500px){
    #ph7-4.filtration .compare .table01 br{ display: none; }
}

@media screen and (max-width: 1400px){
    #ph7-4.filtration .method .common-split{ 
        --padding: 60px; 
    }
    #ph7-4.filtration .method .common-split .blueBg br{ display: none; }

    #ph7-4.filtration .filter .common-gallery br{ display: none; }
}

@media screen and (max-width: 1300px){
    #ph7-4.filtration .process .common-gallery br{ display: none; } 
}

@media screen and (max-width: 1280px){
    #ph7-4.filtration .method .common-split{ 
        --padding: 45px; 
    }
    
    #ph7-4.filtration .filter .common-split ul li:not(:last-of-type){ margin-bottom: 20px; }
    #ph7-4.filtration .filter .common-split ul li figure{ width: 90px; }
    #ph7-4.filtration .filter .common-split dl{ padding-left: 20px; }
    #ph7-4.filtration .filter .common-split dl dt{ font-size: 17px; }
    #ph7-4.filtration .filter .common-gallery .step{ padding: 5px; }
    #ph7-4.filtration .filter .common-gallery .step span{ font-size: 15px; padding: 0 5px; }
    #ph7-4.filtration .filter .common-gallery .step i{ width: 33px; height: 33px; margin-left: 5px; }
    #ph7-4.filtration .filter .common-gallery dl{ padding: 16px 0; }
    #ph7-4.filtration .filter .common-gallery dl dt{ font-size: 18px; }
    #ph7-4.filtration .filter .common-gallery dl dd{ margin-top: 8px; }

    #ph7-4.filtration .zinc-ion .table .table01 colgroup col.th{ width: 150px; }
    #ph7-4.filtration .zinc-ion .note{ padding: 16px; }
    #ph7-4.filtration .zinc-ion .formula{ padding: 40px; }
    #ph7-4.filtration .zinc-ion .formula .flex > *:not(:last-child){ margin-right: 16px; }
    #ph7-4.filtration .zinc-ion .formula span{ font-size: 15px; }
    #ph7-4.filtration .zinc-ion .formula strong, 
    #ph7-4.filtration .zinc-ion .formula .op{ font-size: 24px; }  
    #ph7-4.filtration .zinc-ion .formula .op{ width: 32px; }

    #ph7-4.filtration .process{
        --num: 36px;
    }
    #ph7-4.filtration .process .common-gallery dl{ margin-top: 12px; }
    #ph7-4.filtration .process .common-gallery dl dt{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
    #ph7-4.filtration .method .common-split .blueBg br{ display: block; }

    #ph7-4.filtration .filter .common-split ul li figure{ width: 100px; }
}   

@media screen and (max-width: 960px){
    #sub .common-grid{ grid-template-columns: repeat(2, 50%); }

    #ph7-4.filtration .method .common-split{ 
        --padding: 30px; 
    }
    #ph7-4.filtration .method .common-split{ flex-direction: column; }
    #ph7-4.filtration .method .common-split .img{ width: 100%; }
    #ph7-4.filtration .method .common-split .text{ padding: 25px 0 0; }
    #ph7-4.filtration .method .common-split .blueBg{ padding: var(--padding); }

    #ph7-4.filtration .filter .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #ph7-4.filtration .filter .common-gallery br{ display: block; }
    #ph7-4.filtration .filter .common-gallery dl{ padding: 12px 0; }
    #ph7-4.filtration .filter .common-gallery dl dt{ font-size: 17px; }

    #ph7-4.filtration .zinc-ion .table .table01 colgroup col.th{ width: 125px; }
    #ph7-4.filtration .zinc-ion .formula{ padding: 25px; }
    #ph7-4.filtration .zinc-ion .formula .flex > *:not(:last-child){ margin-right: 12px; }
    #ph7-4.filtration .zinc-ion .formula strong, 
    #ph7-4.filtration .zinc-ion .formula .op{ font-size: 22px; }  

    #ph7-4.filtration .process .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 768px){
    #ph7-4.filtration .zinc-ion .formula .flex{ flex-wrap: wrap; justify-content: center; }
    #ph7-4.filtration .zinc-ion .formula .flex > *{ margin: 0 6px !important; }
    #ph7-4.filtration .zinc-ion .formula .term{ flex: unset; min-width: 60px; width: unset; }
    #ph7-4.filtration .zinc-ion .formula .arrow{ width: 100%; margin: 20px 0 !important; transform: rotate(90deg); }

    #ph7-4.filtration .process .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #ph7-4.filtration .compare .responsive{
        --responsiveW: 150px;
    }
    #ph7-4.filtration .compare .responsive, 
    #ph7-4.filtration .compare .responsive tbody{ display: block; }
    #ph7-4.filtration .compare .responsive colgroup,
    #ph7-4.filtration .compare .responsive thead{ display: none; }
    #ph7-4.filtration .compare .responsive{ min-width: unset !important; }
    #ph7-4.filtration .compare .responsive br{ display: none; }
    #ph7-4.filtration .compare .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #ph7-4.filtration .compare .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #ph7-4.filtration .compare .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #ph7-4.filtration .compare .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #ph7-4.filtration .compare .responsive tr > *::before{ content: attr(data-th); }
    #ph7-4.filtration .compare .responsive th span{ min-height: unset; }
}

@media screen and (max-width: 640px){
    #ph7-4.filtration .filter .common-split ul li figure{ width: 90px; }
    #ph7-4.filtration .filter .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #ph7-4.filtration .filter .common-gallery .step i{ width: 36px; height: 36px; }

    #ph7-4.filtration .process .common-feature br.m{ display: block; }
}


/* 제품 - 진행워터PH7.4 - 연구 */
#ph7-4.research .table .tit{ font-size: 18px; font-weight: 500; color: #333; line-height: 1.7; margin-bottom: 16px; }

#ph7-4.research .common-split{
    --imgW: 50%;
}
#ph7-4.research .common-split .blueBg figure,
#ph7-4.research .common-split .blueBg figure img{ width: 100%; }

@media screen and (max-width: 1280px){
    #ph7-4.research .table .tit{ font-size: 17px; margin-bottom: 12px; }
}

@media screen and (max-width: 640px){
    #ph7-4.research .table br.m{ display: block; }  
}


/* 제품 - 진행워터PH7.4 - 이용후기 */
#ph7-4.review .intro{ background: url("/img/sub/product/ph7-4_review_bg.jpg") no-repeat center center / cover; color: #FFF; text-align: center; }
#ph7-4.review .intro .iframe iframe{ aspect-ratio: 16 / 7.67; }


/* 제품 - 진행워터PH7.4 - 멤버쉽 서비스 */
#ph7-4.membership .common-banner .item{ background: url("/img/sub/product/ph7-4_membership_banner.jpg") no-repeat center right 12% / cover; }
#ph7-4.membership .common-banner .text p{ margin-top: 16px; }

#ph7-4.membership .common-split{
    --imgW: 550px;
    --padding: 100px;
}
#ph7-4.membership .common-split .img{ display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to bottom, #EBEBEB, #F7FFFF); }
#ph7-4.membership .common-split .blueBg{ padding: 50px var(--padding); }

#ph7-4.membership .table01 .blue-table{ border-top: 1px solid var(--mainColor); }
#ph7-4.membership .table01 colgroup col.th{ width: 200px; }
#ph7-4.membership .note .warning{ text-align: center; padding-left: 12px; text-indent: -12px; }
#ph7-4.membership .note .warning::before{ position: static; margin-right: 4px; }

@media screen and (max-width: 1700px){
    #ph7-4.membership .common-banner .text p{ margin-top: 12px; }

    #ph7-4.membership .common-split{
        --imgW: 45%;
        --padding: 70px;
    }

    #ph7-4.membership .table01 colgroup col.th{ width: 160px; }
}

@media screen and (max-width: 1400px){
    #ph7-4.membership .common-split{
        --padding: 40px;
    }
}

@media screen and (max-width: 1280px){
    #ph7-4.membership .common-banner .text p{ margin-top: 8px; }

    #ph7-4.membership .table01 colgroup col.th{ width: 120px; }
}

@media screen and (max-width: 960px){
    #ph7-4.membership .common-split{ flex-direction: column; }
    #ph7-4.membership .common-split .img{ width: 100%; }
    #ph7-4.membership .common-split .blueBg{ padding: var(--padding); }

    #ph7-4.membership .responsive br.m{ display: block; }
}

@media screen and (max-width: 768px){
    #ph7-4.membership .common-banner .item::after{ content: ""; }

    #ph7-4.membership .table01 colgroup col.th{ width: 95px; }
    #ph7-4.membership .table01 tbody th{ padding-inline: 10px; }
}

@media screen and (max-width: 640px){
    #ph7-4.membership .common-split{
        --padding: 30px;
    }

    #ph7-4.membership .responsive{
        --responsiveW: 150px;
    }
    #ph7-4.membership .responsive, 
    #ph7-4.membership .responsive tbody{ display: block; }
    #ph7-4.membership .responsive colgroup,
    #ph7-4.membership .responsive thead{ display: none; }
    #ph7-4.membership .responsive{ min-width: unset !important; }
    #ph7-4.membership .responsive br.m{ display: none; }
    #ph7-4.membership .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #ph7-4.membership .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #ph7-4.membership .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #ph7-4.membership .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #ph7-4.membership .responsive tr > *::before{ content: attr(data-th); }
    #ph7-4.membership .responsive th span{ min-height: unset; }
}


/* 제품 - 진행워터PH7.4 - 셀프케어 */
#ph7-4.selfcare .step .common-gallery li:nth-child(2) span{ background: #0A5C9A; }
#ph7-4.selfcare .step .common-gallery li:nth-child(3) span{ background: #0E78B7; }
#ph7-4.selfcare .step .common-gallery li:nth-child(4) span{ background: #1394D3; }
#ph7-4.selfcare .step .common-gallery li p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; padding: 20px 0 27px; }

#ph7-4.selfcare .common-split{
    --imgW: 50%;
    --padding: 80px;
}
#ph7-4.selfcare .common-split .dot-list li:not(:last-of-type){ margin-bottom: 8px; }

#ph7-4.selfcare .note{ margin-top: 0; }
#ph7-4.selfcare .note .warning{ padding-left: 12px; text-align: center; text-indent: -12px; }
#ph7-4.selfcare .note .warning::before{ position: static; margin-right: 4px; }

#ph7-4.selfcare .hyphen li{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; padding-left: 15px; position: relative; }
#ph7-4.selfcare .hyphen li::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; }

#ph7-4.selfcare .hygiene .flex{ display: flex; align-items: center; }
#ph7-4.selfcare .hygiene .flex .defalut{ flex: 1 1 auto; min-width: 0; }
#ph7-4.selfcare .hygiene .flex a{ flex-shrink: 0; display: inline-flex; align-items: center; background: var(--mainColor); font-size: 18px; font-weight: 400; color: #FFF; padding: 18px 40px; margin-left: 30px; }
#ph7-4.selfcare .hygiene .flex a i{ flex-shrink: 0; display: inline-block; width: 24px; height: 24px; background: url("/img/sub/product/icon_btns_download.svg") no-repeat center center / contain; margin-right: 8px; }

@media screen and (max-width: 1700px){
    #ph7-4.selfcare .common-split{
        --padding: 60px;
    }

    #ph7-4.selfcare .step .common-gallery li p{ padding: 16px 0 20px; }

    #ph7-4.selfcare .hyphen li{ font-size: 17px; }

    #ph7-4.selfcare .hygiene .flex a{ font-size: 17px; padding: 16px 30px; }
}

@media screen and (max-width: 1630px){
    #ph7-4.selfcare .step br{ display: none; }
}

@media screen and (max-width: 1280px){
    #ph7-4.selfcare .common-split{
        --padding: 40px;
    }

    #ph7-4.selfcare .hyphen li{ font-size: 16px; padding-left: 12px; }

    #ph7-4.selfcare .hygiene .flex a{ font-size: 16px; padding: 14px 25px; }
    #ph7-4.selfcare .hygiene .flex a i{ width: 22px; height: 22px; margin-right: 6px; }
}

@media screen and (max-width: 960px){
    #ph7-4.selfcare .step .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #ph7-4.selfcare .step .common-gallery li:nth-of-type(even) figure::after{ display: none; }
    #ph7-4.selfcare .step .common-gallery li p{ padding: 12px 0 6px; }

    #ph7-4.selfcare .common-split{ flex-direction: column; }
    #ph7-4.selfcare .common-split .img{ width: 100%; }
    #ph7-4.selfcare .common-split .text{ padding: 25px 0 0; }

    #ph7-4.selfcare .hygiene .flex p{ margin-top: 5px; }
    #ph7-4.selfcare .hygiene .flex a{ padding: 12px 20px; }
}

@media screen and (max-width: 640px){
    #ph7-4.selfcare .hygiene .flex{ position: relative; }
    #ph7-4.selfcare .hygiene .flex a{ position: absolute; top: -20px; right: 0; transform: translateY(-100%); }
}


/* 제품 - 진행워터PH7.4 - 대리점 위치 */
#ph7-4.location .search-box{
    --select: 230px;
}
#ph7-4.location .search-box{ max-width: 1200px; margin-inline: auto; margin-bottom: 100px; }
#ph7-4.location .search-box .selectBox{ flex-shrink: 0; }
#ph7-4.location .search-box .input{ flex: 1 1 auto; min-width: 0; }

@media screen and (max-width: 1700px){
    #ph7-4.location .search-box{ margin-bottom: 70px; }  
}

@media screen and (max-width: 1280px){
    #ph7-4.location .search-box{
        --select: 200px;
    }
    #ph7-4.location .search-box{ margin-bottom: 40px; }  
}

@media screen and (max-width: 1100px){
    #ph7-4.location .search-box{ flex-wrap: wrap; }
    #ph7-4.location .search-box .selectBox{ width: calc((100% - 20px) / 3); }
    #ph7-4.location .search-box .input{ margin-left: 0; }
}

@media screen and (max-width: 640px){
    #ph7-4.location .search-box .selectBox{ width: calc((100% - 10px) / 2); }
    #ph7-4.location .search-box .selectBox:nth-of-type(1){ width: 100%; }
    #ph7-4.location .search-box .selectBox:nth-of-type(2){ margin-left: 0; }
}


/* 제품 - 아토버스터 (공통) */
#atobuster .common-banner .text p{ margin-top: 12px; }
#atobuster .common-banner .text h4 + p{ margin-top: 4px; }
#atobuster .common-banner .text p strong{ font-size: 28px; font-weight: 400; line-height: inherit; }

#atobuster .tech .numbering,
#atobuster .tech .numbering *{ line-height: inherit; }
#atobuster .tech .numbering{ grid-template-columns: repeat(3, calc(100% / 3)); }
#atobuster .tech .numbering li p{ margin-top: 16px; text-align: center; }
#atobuster .tech .cert .common-gallery{ --gap: 16px; --line: 7; display: flex; flex-wrap: wrap; margin: 0 0 calc(var(--gap) * -1); }
#atobuster .tech .cert .common-gallery > *{ margin: 0; width: calc((100% - (var(--gap) * (var(--line) - 2))) / var(--line)); margin: 0 var(--gap) var(--gap) 0; }
#atobuster .tech .cert .common-gallery > *:last-of-type{ margin-right: 0; }
#atobuster .tech .cert .common-gallery .block{ width: calc(((100% - (var(--gap) * (var(--line) - 2))) / var(--line)) * 2); }

@media screen and (max-width: 1700px){
    #atobuster .common-banner .text p strong{ font-size: 24px; }
}

@media screen and (max-width: 1500px){
    #atobuster .tech br{ display: none; }
    #atobuster .tech .cert .common-gallery{ --line: 4; }
    #atobuster .tech .cert .common-gallery > *:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 1280px){
    #atobuster .common-banner .text p strong{ font-size: 22px; }
}

@media screen and (max-width: 960px){
    #atobuster .common-banner .text p strong{ font-size: 20px; }
}

@media screen and (max-width: 768px){
    #atobuster .tech .numbering{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #atobuster .tech .cert .common-gallery > *{ width: calc((100% - (var(--gap) * 2)) / 3); }
    #atobuster .tech .cert .common-gallery > *.block{ width: calc(((100% - var(--gap)) / 3) * 2); margin-right: 0; }
    #atobuster .tech .cert .common-gallery > *:nth-of-type(1){ width: calc((100% - var(--gap)) / 3); }
    #atobuster .tech .cert .common-gallery > *:nth-of-type(3){ margin-right: var(--gap); }
    #atobuster .tech .cert .common-gallery > *:nth-of-type(5){ margin-right: 0; }
}


/* 제품 - 아토버스터 - 계량기용 */
#atobuster.meter .common-banner .item{ background: url("/img/sub/product/atobuster_meter_banner.jpg") no-repeat center right 11% / cover; }

#atobuster.meter .common-split{ 
    --imgW: 480px;
    --padding: 100px;
}
#atobuster.meter .common-split .text .tit h5{ margin-bottom: 16px; }
#atobuster.meter .common-split .text .tit p{ font-weight: 400; }

#atobuster.meter .common-grid dl dt{ font-size: 18px; font-weight: 500; color: var(--mainColor); line-height: 1.4; }
#atobuster.meter .common-grid dl dd{ font-size: 16px; font-weight: 300; color: #555; line-height: 1.7; }

#atobuster.meter .product .common-grid{ 
    --gap: 20px;
}
#atobuster.meter .product .common-grid dl dt{ font-size: 18px; font-weight: 500; color: var(--mainColor); line-height: 1.4; }
#atobuster.meter .product .common-grid dl dd{ margin-top: 8px; }

#atobuster.meter .safe .common-grid{ 
    --gap: 20px;
}
#atobuster.meter .safe .common-grid{ text-align: left; }
#atobuster.meter .safe .common-grid dl dd{ margin-top: 10px; }

#atobuster.meter .reason .common-split h5{ margin-bottom: 40px; }
#atobuster.meter .reason .common-split .p-box > *:not(:last-child){ margin-bottom: 16px; }
#atobuster.meter .reason .common-grid{ text-align: left; }
#atobuster.meter .reason .common-grid .item{ display: flex; align-items: center; padding-inline: 60px; }
#atobuster.meter .reason .common-grid .icon{ flex-shrink: 0; }
#atobuster.meter .reason .common-grid .txt{ flex: 1 1 auto; min-width: 0; font-size: 16px; margin: 0 0 0 var(--padding); }
#atobuster.meter .reason .common-grid .txt span{ font-family: var(--engFont); font-weight: 700; color: var(--mainColor); }
#atobuster.meter .reason .common-grid .txt p{ font-weight: 300; color: #555; line-height: 1.7; margin-top: 10px; }

#atobuster.meter .effect .common-feature{ background: linear-gradient(to right, #3EB2E5, #59D4F1); text-align: left; }
#atobuster.meter .effect .common-feature .txt{ display: flex; align-items: center; }
#atobuster.meter .effect .common-feature .txt br:not(.m){ display: block; }
#atobuster.meter .effect .common-feature .txt p{ margin-top: 16px; line-height: 1.7; }
#atobuster.meter .effect .common-feature .txt .left{ width: unset; flex: 1 1 auto; min-width: 0; }
#atobuster.meter .effect .common-feature .txt .img{ flex-shrink: 0; margin-left: 30px; }
#atobuster.meter .effect .common-feature .txt .img img{ filter: drop-shadow(10px 20px 20px rgba(0, 0, 0, 0.1)); -webkit-filter: drop-shadow(10px 20px 20px rgba(0, 0, 0, 0.1)); }
#atobuster.meter .effect .common-gallery{ grid-template-columns: repeat(4, 25%); }
#atobuster.meter .effect .common-gallery p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; text-align: center; margin-top: 16px; }

#atobuster.meter .principle figure.colorBg{ text-align: center; padding: 50px; }
#atobuster.meter .principle .info > *:not(:last-child){ margin-bottom: 16px; }
#atobuster.meter .principle .common-split h5{ margin-bottom: 40px; }
#atobuster.meter .principle .common-split .hyphen{ font-size: 16px; font-weight: 300; color: #777; line-height: 1.7; padding-left: 12px; position: relative; }
#atobuster.meter .principle .common-split .hyphen::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; }

#atobuster.meter .mechanism .common-split{ 
    --imgW: 50%;
}
#atobuster.meter .mechanism .common-split .blueBg,
#atobuster.meter .mechanism .common-split.gray > *{ padding: 50px 100px; }
#atobuster.meter .mechanism .common-split.gray .img{ display: flex; flex-direction: column; justify-content: center; background: #EEE; text-align: center; }
#atobuster.meter .mechanism .common-split.gray .img ul{ display: flex; justify-content: center; }
#atobuster.meter .mechanism .common-split.gray .img ul li{ max-width: calc((100% - 30px) / 2); }
#atobuster.meter .mechanism .common-split.gray .img ul li:not(:last-of-type){ margin-right: 30px; }
#atobuster.meter .mechanism .common-split.gray .img ul li p{ font-size: 20px; font-weight: 500; color: #333; margin-top: 14px; }
#atobuster.meter .mechanism .common-split.blue .img{ background: #E3F2FA; display: flex; flex-direction: column; justify-content: center; }
#atobuster.meter .mechanism figure.block{ display: block; text-align: center; padding: 40px; }
#atobuster.meter .mechanism .column2.gray .common-gallery{ --gap: 0; }
#atobuster.meter .mechanism .column2 .border figure::after{ content: ""; border: 2px solid #EEE; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; }
#atobuster.meter .mechanism .column2 .figure{ display: grid; grid-template-columns: repeat(2, 50%); }
#atobuster.meter .mechanism .column2 p{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.7; text-align: center; margin-top: 16px; }

#atobuster.meter .install .common-gallery{
    --gap: 20px;
}
#atobuster.meter .install .common-gallery{ grid-template-columns: repeat(5, 20%); }


@media screen and (max-width: 1700px){
    #atobuster.meter .common-split{ 
        --imgW: 400px;
        --padding: 70px;
    }
    #atobuster.meter .common-split .text .tit h5{ margin-bottom: 12px; }
    #atobuster.meter .common-split .text.column > *:not(:last-child){ margin-bottom: 24px; }

    #atobuster.meter .reason .common-split h5{ margin-bottom: 32px; }
    #atobuster.meter .reason .common-grid .item{ padding-inline: 40px; }

    #atobuster.meter .principle figure.colorBg{ padding: 40px; }
    #atobuster.meter .principle .common-split h5{ margin-bottom: 30px; }

    #atobuster.meter .mechanism br{ display: none; }
    #atobuster.meter .mechanism .common-split .blueBg,
    #atobuster.meter .mechanism .common-split.gray > *{ padding: 40px 70px; }
    #atobuster.meter .mechanism .common-split.gray .img ul li p{ font-size: 19px; }
    #atobuster.meter .mechanism figure.block{ padding: 30px; }
    #atobuster.meter .mechanism .column2 p{ font-size: 19px; }
}

@media screen and (max-width: 1500px){
    #atobuster.meter .product .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #atobuster.meter .safe .common-grid, 
    #atobuster.meter .reason .common-grid{ grid-template-columns: repeat(2, 50%); }

    #atobuster.meter .effect .common-feature .txt .img{ width: 270px; }
}

@media screen and (max-width: 1400px){
    #atobuster.meter .common-split{ 
        --imgW: 360px;
        --padding: 40px;
    }
    #atobuster.meter .common-split .text .tit h5{ margin-bottom: 9px; }
    #atobuster.meter .common-split .text.column > *:not(:last-child){ margin-bottom: 16px; }

    #atobuster.meter .product .common-split br{ display: none; }

    #atobuster.meter .reason .common-split br{ display: none; }
    #atobuster.meter .reason .common-split h5{ margin-bottom: 24px; }

    #atobuster.meter .principle .common-split br{ display: none; }

    #atobuster.meter .install .common-gallery{ grid-template-columns: repeat(4, 25%); }
}

@media screen and (max-width: 1280px){
    #atobuster.meter .product .common-grid dl dt{ font-size: 17px; }

    #atobuster.meter .reason .common-split h5{ margin-bottom: 16px; }
    #atobuster.meter .reason .common-grid .item{ padding-inline: 25px; }

    #atobuster.meter .effect .common-feature .txt p{ margin-top: 12px; }
    #atobuster.meter .effect .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #atobuster.meter .effect .common-gallery p{ margin-top: 12px; }

    #atobuster.meter .principle figure.colorBg{ padding: 30px; }    
    #atobuster.meter .principle .common-split h5{ margin-bottom: 20px; }
    #atobuster.meter .principle .common-split .gap32 > *:not(:last-child){ margin-bottom: 16px; }
    
    #atobuster.meter .mechanism .common-split .blueBg,
    #atobuster.meter .mechanism .common-split.gray > *{ padding: 25px 45px; }
    #atobuster.meter .mechanism .common-split.gray .img ul li p{ font-size: 18px; }
    #atobuster.meter .mechanism figure.block{ padding: 20px; }
    #atobuster.meter .mechanism .column2 p{ font-size: 18px; margin-top: 12px; }
}

@media screen and (max-width: 1140px){
    #atobuster.meter .common-banner .item::after{ content: ""; }
}

@media screen and (max-width: 960px){
    #atobuster.meter .common-split{ flex-direction: column; }
    #atobuster.meter .common-split .img{ width: 100%; }
    #atobuster.meter .common-split .text{ padding: 25px 0 0; }

    #atobuster.meter .reason .common-grid{ grid-template-columns: repeat(1, 100%); }

    #atobuster.meter .effect .common-feature{ padding: 25px; }
    #atobuster.meter .effect .common-feature .txt{ flex-direction: column; text-align: center; }
    #atobuster.meter .effect .common-feature .txt .left{ padding-bottom: 0; }
    #atobuster.meter .effect .common-feature .txt p{ margin-top: 8px; }
    #atobuster.meter .effect .common-feature .txt .img{ margin: 0; }    
    
    #atobuster.meter .principle .common-split h5{ margin-bottom: 10px; }

    #atobuster.meter .mechanism .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #atobuster.meter .mechanism .common-split{ flex-direction: column; }
    #atobuster.meter .mechanism .common-split .img{ width: 100%; } 
    #atobuster.meter .mechanism .common-split .blueBg,
    #atobuster.meter .mechanism .common-split.gray > *{ padding: 25px; }
    #atobuster.meter .mechanism figure.block{ padding-inline: 0; }
    #atobuster.meter .mechanism .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #atobuster.meter .install .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 768px){
    #atobuster.meter .product .common-grid, 
    #atobuster.meter .effect .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 730px){
    #atobuster.meter .common-banner br{ display: none; }
}

@media screen and (max-width: 640px){
    #atobuster.meter .reason .common-check br.m{ display: block; }

    #atobuster.meter .effect br.m{ display: block; }

    #atobuster.meter .principle figure.colorBg{ padding-block: 15px; }

    #atobuster.meter .install .common-gallery{ grid-template-columns: repeat(2, 50%); }
}


/* 제품 - 아토버스터 - 샤워기용 */
#atobuster.shower .common-banner .item{ background: url("/img/sub/product/atobuster_shower_banner.jpg") no-repeat center right 4% / cover; }

#atobuster.shower .product{
    --gap: 24px;
}
#atobuster.shower .product ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: calc(var(--gap) * -1.5); }
#atobuster.shower .product ul li{ width: calc((100% - (var(--gap) * 4)) / 5); margin-right: var(--gap); margin-bottom: calc(var(--gap) * 1.5); }
#atobuster.shower .product ul li:nth-of-type(5n){ margin-right: 0; }
#atobuster.shower .product ul li:last-of-type{ margin-right: 0 !important; }
#atobuster.shower .product ul li figure,
#atobuster.shower .product ul li figure img{ width: 100%; }
#atobuster.shower .product ul li p{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.4; text-align: center; margin-top: 16px; }

#atobuster.shower .safe .common-split{
    --imgW: 480px;
    --padding: 100px;
}
#atobuster.shower .safe .common-split .text .tit{ margin-bottom: 40px; }
#atobuster.shower .safe .common-split .text .tit h5{ margin-bottom: 0; }
#atobuster.shower .safe .common-split .text .tit p{ margin-top: 20px; }
#atobuster.shower .safe .common-gallery a{ display: block; }
#atobuster.shower .safe .common-gallery .txt{ text-align: center; padding-top: 20px; }
#atobuster.shower .safe .common-gallery .txt p{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.7; text-decoration: underline; text-underline-position: from-font; margin-bottom: 8px; }
#atobuster.shower .safe .common-gallery .txt span{ font-size: 16px; font-weight: 500; color: var(--mainColor); }
#atobuster.shower .safe .common-gallery .txt dt{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.4; }
#atobuster.shower .safe .common-gallery .txt dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 4px; }

#atobuster.shower .effect{
    --num: 36px;
}
#atobuster.shower .effect ol{ counter-reset: num; }
#atobuster.shower .effect ol li{ display: flex; counter-increment: num; }
#atobuster.shower .effect ol li:not(:last-of-type){ border-bottom: 1px solid #DDD; padding-bottom: 24px; margin-bottom: 24px; }
#atobuster.shower .effect ol li figure{ flex-shrink: 0; width: 320px; }
#atobuster.shower .effect ol li figure img{ width: 100%; }
#atobuster.shower .effect ol li .num{ display: inline-block; width: var(--num); height: var(--num); background: var(--mainColor); font-family: var(--engFont); font-size: 14px; font-weight: 600; color: #FFF; line-height: var(--num); text-align: center; position: absolute; top: 0; left: 0; transform: translateY(1%); }
#atobuster.shower .effect ol li .num::before{ content: counter(num, decimal-leading-zero); }
#atobuster.shower .effect ol li dl{ flex: 1 1 auto; min-width: 0; padding: 40px 0; padding-left: 60px; }
#atobuster.shower .effect ol li dl dt{ font-size: 26px; font-weight: 600; color: #111; line-height: 1.4; padding-left: calc(var(--num) + 16px); position: relative; }
#atobuster.shower .effect ol li dl dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 16px; }

#atobuster.shower .why .blue-table td{ position: relative; }
#atobuster.shower .why .blue-table tr:not(.img) td{ padding-inline: 70px; }
#atobuster.shower .why .blue-table figure{ margin: 0; }
#atobuster.shower .why .blue-table figure img{ width: unset; }
#atobuster.shower .why .blue-table .vs,
#atobuster.shower .why .blue-table .label{ display: inline-flex; justify-content: center; align-items: center; color: #FFF; position: absolute; top: 50%; right: 0; z-index: 100; transform: translate(50%, -50%); }
#atobuster.shower .why .blue-table .vs{ width: 80px; height: 80px; background: #44B9FE; border: 10px solid #DAF1FF; border-radius: 50%; font-family: var(--engFont); font-size: 18px; font-weight: 600; }
#atobuster.shower .why .blue-table .label{ width: 120px; background: var(--mainColor); border-radius: 999px; font-size: 14px; font-weight: 400; padding: 11px; }
#atobuster.shower .why .blue-table td.active{ background: var(--skyBlue2); border-top-color: #DDD; border-bottom-color: #DDD; }
#atobuster.shower .why .blue-table td.active figure img{ mix-blend-mode: multiply; }
#atobuster.shower .why .blue-table td.active strong{ display: block; font-weight: 500; color: #333; padding: 10px 0; }
#atobuster.shower .why .common-feature{ background: url("/img/sub/product/atobuster_shower_feature.jpg") no-repeat center right 9% / cover; text-align: left; }


#atobuster.shower .install .step .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
#atobuster.shower .install .step .common-gallery li:nth-of-type(1) .num{ background: #1394D3; }
#atobuster.shower .install .step .common-gallery li:nth-of-type(2) .num{ background: #0E78B7; }
#atobuster.shower .install .step .common-gallery dl{ text-align: center; margin-top: 20px; }
#atobuster.shower .install .step .common-gallery dl dt{ font-size: 20px; font-weight: 500; color: #333; line-height: 1.4; }
#atobuster.shower .install .step .common-gallery dl dd{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 4px; }

@media screen and (max-width: 1700px){
    #atobuster.shower .product ul li p{ font-size: 19px; }

    #atobuster.shower .safe .common-split{
        --imgW: 400px;
        --padding: 70px;
    }
    #atobuster.shower .safe .common-split .text .tit{ margin-bottom: 30px; }
    #atobuster.shower .safe .common-split .text .tit p{ margin-top: 16px; }
    #atobuster.shower .safe .common-gallery .txt p{ font-size: 19px; }
    #atobuster.shower .safe .common-gallery .txt dt{ font-size: 19px; }
    #atobuster.shower .safe .common-gallery .txt dd{ font-size: 17px; }

    #atobuster.shower .effect ol li .num{ transform: translateY(-5%); }
    #atobuster.shower .effect ol li dl{ padding: 30px 0; padding-left: 50px; }
    #atobuster.shower .effect ol li dl dt{ font-size: 23px; }

    #atobuster.shower .install .step .common-gallery dl{ margin-top: 16px; }
    #atobuster.shower .install .step .common-gallery dl dt{ font-size: 19px; }
}

@media screen and (max-width: 1400px){
    #atobuster.shower .safe .common-split br,
    #atobuster.shower .install .step br{ display: none; }
}

@media screen and (max-width: 1280px){
    #atobuster.shower .product{
        --gap: 16px;
    }
    #atobuster.shower .product ul li p{ font-size: 18px; margin-top: 12px; }

    #atobuster.shower .safe .common-split{
        --imgW: 350px;
        --padding: 40px;
    }
    #atobuster.shower .safe .common-split .text .tit{ margin-bottom: 20px; }
    #atobuster.shower .safe .common-split .text .tit p{ margin-top: 12px; }
    #atobuster.shower .safe .common-gallery .txt{ padding-top: 12px; }
    #atobuster.shower .safe .common-gallery .txt p{ font-size: 18px; margin-bottom: 4px; }
    #atobuster.shower .safe .common-gallery .txt span{ font-size: 15px; }
    #atobuster.shower .safe .common-gallery .txt dt{ font-size: 18px; }
    #atobuster.shower .safe .common-gallery .txt dd{ font-size: 16px; }

    #atobuster.shower .effect{
        --num: 32px;
    }
    #atobuster.shower .effect ol li .num{ transform: translateY(-5%); }
    #atobuster.shower .effect ol li dl{ padding: 25px 0; padding-left: 40px; }
    #atobuster.shower .effect ol li dl dt{ font-size: 21px; }
    #atobuster.shower .effect ol li dl dd{ font-size: 17px; }

    #atobuster.shower .why .blue-table tr:not(.img) td{ padding-inline: 60px; }
    #atobuster.shower .why .blue-table .vs{ width: 70px; height: 70px; border-width: 8px; }
    #atobuster.shower .why .blue-table .label{ width: 100px; padding-block: 8px; }

    #atobuster.shower .install .step .common-gallery dl{ margin-top: 12px; }
    #atobuster.shower .install .step .common-gallery dl dt{ font-size: 18px; }
}

@media screen and (max-width: 960px){
    #atobuster.shower .common-banner .item::after{ content: ""; }
    #atobuster.shower .product ul li p{ font-size: 17px; }

    #atobuster.shower .safe .common-split{ flex-direction: column; }
    #atobuster.shower .safe .common-split .img{ width: 100%; }
    #atobuster.shower .safe .common-split .text{ padding: 25px 0 0; }
    #atobuster.shower .safe .common-split .text .tit{ margin-bottom: 15px; }
    #atobuster.shower .safe .common-gallery .txt p{ font-size: 17px; }

    #atobuster.shower .effect ol li{ flex-direction: column; }
    #atobuster.shower .effect ol li figure{ width: 100%; }
    #atobuster.shower .effect ol li dl{ padding: 25px 0 0; }
    #atobuster.shower .effect ol li dl dt{ font-size: 20px; }

    #atobuster.shower .why .blue-table .vs{ width: 64px; height: 64px; }
    #atobuster.shower .why .blue-table td.active strong{ padding: 5px 0; }
}

@media screen and (max-width: 840px){
    #atobuster.shower .product ul li{ width: calc((100% - (var(--gap) * 2)) / 3); }
    #atobuster.shower .product ul li:nth-of-type(5n){ margin-right: var(--gap); }
    #atobuster.shower .product ul li:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 768px){
    #atobuster.shower .common-banner .item br{ display: none; }

    #atobuster.shower .safe .column3 .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #atobuster.shower .why .blue-table tr:not(.img) td:first-of-type{ padding-left: var(--paddingLR); }
    #atobuster.shower .why .blue-table tr:not(.img) td:last-of-type{ padding-right: var(--paddingLR); }
    #atobuster.shower .why .blue-table .vs{ width: 60px; height: 60px; border-width: 6px; }

    #atobuster.shower .install .step .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #atobuster.shower .install .step .common-gallery > *:nth-of-type(2n) figure::after{ display: none; }
}

@media screen and (max-width: 640px){
    #atobuster.shower .safe .common-check br.m,
    #atobuster.shower .why .blue-table br.m,
    #atobuster.shower .why .common-feature br.m{ display: block; }

    #atobuster.shower .why .common-feature br{ display: none; }  
}


/* 제품 - 퓨어진 */
#purejin .note.colorBg{ margin-bottom: 0; }

#purejin .product .common-split{ 
    --imgW: 480px;
    --padding: 100px;
}
#purejin .product .common-split .tit{ margin-bottom: 32px; }
#purejin .product .common-split .tit h5{ margin-bottom: 16px; }
#purejin .product .common-grid .txt strong{ color: #333; }

#purejin .effect .numbering{ margin-block: calc(var(--gap) * -1); }
#purejin .effect .numbering > *{ padding: 0; margin-block: var(--gap); }
#purejin .effect .numbering .num{ top: var(--position); left: var(--position); transform: unset; } 
#purejin .effect .numbering .defalut{ padding-top: 16px; }

#purejin .core .filter .common-gallery{
    --gap: 0;
}
#purejin .core .compare .blue-table tbody td{ font-weight: 500; }
#purejin .core .compare .common-gallery.gallery p{ margin-top: 20px; }

#purejin .core .common-feature{ background: url("/img/sub/product/purejin_feature.jpg") no-repeat center right 9% / cover; text-align: left; }

#purejin .review .common-gallery{
    --gap: 20px;
}
#purejin .review .common-gallery > * figure:not(:last-of-type){ margin-bottom: var(--gap); }

@media screen and (max-width: 1700px){
    #purejin .product .common-split{ 
        --imgW: 440px;
        --padding: 70px;
    }
    #purejin .product .common-split .tit{ margin-bottom: 24px; }
    #purejin .product .common-split .tit h5{ margin-bottom: 12px; }

    #purejin .core .compare .common-gallery.gallery p{ margin-top: 16px; }
}

@media screen and (max-width: 1450px){
    #purejin .product .common-split br{ display: none; }
}

@media screen and (max-width: 1280px){
    #purejin .product .common-split{ 
        --imgW: 360px;
        --padding: 40px;
    }
    #purejin .product .common-split .tit{ margin-bottom: 16px; }
    #purejin .product .common-split .tit h5{ margin-bottom: 8px; }

    #purejin .core .compare .common-gallery.gallery p{ margin-top: 12px; }
}

@media screen and (max-width: 960px){
    #purejin .product .common-grid,
    #purejin .effect .numbering,
    #purejin .core .filter .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #purejin .core .compare .common-gallery,
    #purejin .review .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #purejin .product .common-split{ flex-direction: column; }
    #purejin .product .common-split .img{ width: 100%; }
    #purejin .product .common-split .text{ padding: 25px 0 0; }

    #purejin .effect .numbering .defalut{ padding-top: 12px; }

    #purejin .core .filter .common-gallery{ --gap: 32px; }
}

@media screen and (max-width: 860px){
    #purejin .core .compare .responsive{
        --responsiveW: 150px;
    }
    #purejin .core .compare .responsive, 
    #purejin .core .compare .responsive tbody{ display: block; }
    #purejin .core .compare .responsive colgroup,
    #purejin .core .compare .responsive thead{ display: none; }
    #purejin .core .compare .responsive{ min-width: unset !important; }
    #purejin .core .compare .responsive br.m{ display: none; }
    #purejin .core .compare .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #purejin .core .compare .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #purejin .core .compare .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #purejin .core .compare .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #purejin .core .compare .responsive tr > *::before{ content: attr(data-th); }
    #purejin .core .compare .responsive th span{ min-height: unset; }
}

@media screen and (max-width: 640px){
    #purejin .core .filter .common-gallery{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - GT이오나이저 - 제품소개 */
#gt-ionizer.products .common-split{ 
    --imgW: 480px;
    --padding: 100px;
}

#gt-ionizer.products .product .common-grid{ 
    --gap: 20px;
}

#gt-ionizer.products .mechanism .sec01 .step .common-gallery{ grid-template-columns: repeat(2, 50%); }
#gt-ionizer.products .mechanism .sec01 .step .common-gallery figure{ margin-top: 0; }
#gt-ionizer.products .mechanism .sec01 .content ol{ border-top: 1px solid #DDD; padding-top: 32px; counter-reset: num; }
#gt-ionizer.products .mechanism .sec01 .content ol > li{ display: flex; align-items: center; border-bottom: 1px solid #DDD; padding-bottom: 32px; counter-increment: num; }
#gt-ionizer.products .mechanism .sec01 .content ol > li:not(:last-of-type){ margin-bottom: 32px; }
#gt-ionizer.products .mechanism .sec01 .content .num{ flex-shrink: 0; width: 220px; height: 220px; display: flex; flex-direction: column; justify-content: center; background: var(--mainColor); border: 20px solid #D1E0E8; border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 600; color: #FFF; text-align: center; margin-right: 60px; }
#gt-ionizer.products .mechanism .sec01 .content .num span::after{ content: counter(num, decimal-leading-zero); font-size: 28px; }
#gt-ionizer.products .mechanism .sec01 .content .dot-list{ margin-top: 20px; }
#gt-ionizer.products .mechanism .sec01 .content .dot-list li{ font-size: 18px; font-weight: 500; margin-bottom: 0; }
#gt-ionizer.products .mechanism .sec01 .note{ padding: 20px 30px; text-align: left; }
#gt-ionizer.products .mechanism .sec01 .note p{ display: flex; }  
#gt-ionizer.products .mechanism .sec01 .note span{ flex-shrink: 0; margin-right: 4px; }
#gt-ionizer.products .mechanism .sec01 .formula{ text-align: center; padding: 60px; }
#gt-ionizer.products .mechanism .sec01 .formula p{ font-size: 32px; font-weight: 500; color: #333; }
#gt-ionizer.products .mechanism .sec01 .formula p span{ display: inline-block; color: var(--mainColor); padding: 0 15px; }

@media screen and (max-width: 1700px){
    #gt-ionizer.products .common-split{ 
        --imgW: 400px;
        --padding: 70px;
    }

    #gt-ionizer.products .mechanism .sec01 .content .num{ width: 180px; height: 180px; border-width: 16px; }
    #gt-ionizer.products .mechanism .sec01 .content .num span::after{ font-size: 24px; }
    #gt-ionizer.products .mechanism .sec01 .note{ padding: 16px 24px; }
    #gt-ionizer.products .mechanism .sec01 .formula{ padding: 40px; } 
    #gt-ionizer.products .mechanism .sec01 .formula p{ font-size: 28px; }
}

@media screen and (max-width: 1350px){
    #gt-ionizer.products .common-split br{ display: none; }
}

@media screen and (max-width: 1280px){
    #gt-ionizer.products .common-split{ 
        --imgW: 360px;
        --padding: 40px;
    }
 
    #gt-ionizer.products .mechanism .sec01 .content ol{ padding-top: 20px; }
    #gt-ionizer.products .mechanism .sec01 .content ol > li{ padding-bottom: 20px; }
    #gt-ionizer.products .mechanism .sec01 .content ol > li:not(:last-of-type){ margin-bottom: 20px; }
    #gt-ionizer.products .mechanism .sec01 .content .num{ width: 150px; height: 150px; border-width: 12px; font-size: 15px; margin-right: 40px; }
    #gt-ionizer.products .mechanism .sec01 .content .num span::after{ font-size: 22px; }
    #gt-ionizer.products .mechanism .sec01 .content .dot-list{ margin-top: 10px; }
    #gt-ionizer.products .mechanism .sec01 .content .dot-list li{ font-size: 17px; }
    #gt-ionizer.products .mechanism .sec01 .note{ padding: 12px 20px; }
    #gt-ionizer.products .mechanism .sec01 .formula{ padding: 30px; } 
    #gt-ionizer.products .mechanism .sec01 .formula p{ font-size: 24px; }
    #gt-ionizer.products .mechanism .sec01 .formula p span{ padding: 0 15px; }
}

@media screen and (max-width: 960px){
    #gt-ionizer.products .common-split{ flex-direction: column; }
    #gt-ionizer.products .common-split .img{ width: 100%; }
    #gt-ionizer.products .common-split .text{ padding: 25px 0 0; }

    #gt-ionizer.products .mechanism .sec01 .step .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #gt-ionizer.products .mechanism .sec01 .step .common-gallery figure::after{ width: 40px; height: 40px; top: calc(100% + (var(--gap) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
    #gt-ionizer.products .mechanism .sec01 .content ol > li{ display: block; }
    #gt-ionizer.products .mechanism .sec01 .content .num{ flex-direction: row; align-items: center; width: 100%; height: unset; border: none; border-radius: unset; font-size: 17px; padding: 15px; margin: 0 0 20px; }
    #gt-ionizer.products .mechanism .sec01 .content .num span{ margin-left: 4px; }
    #gt-ionizer.products .mechanism .sec01 .content .num span::after{ font-size: inherit; }
    #gt-ionizer.products .mechanism .sec01 .formula{ padding: 22px; } 
    #gt-ionizer.products .mechanism .sec01 .formula p{ font-size: 22px; }
    #gt-ionizer.products .mechanism .sec01 .formula p span{ padding: 0 10px; }
}


/* 제품 - GT이오나이저 - 녹조와 기존 기술의 한계 */
#gt-ionizer.problem .common-gallery.gallery p{ font-size: 18px; } 

#gt-ionizer.problem .algal-bloom .barTit{ margin-bottom: 20px; }

#gt-ionizer.problem .mechanism .num-list .content > *:not(:last-child){ margin-bottom: 16px; }
#gt-ionizer.problem .mechanism .num-list .hyphen-list li.none{  font-size: 16px; font-weight: 300; color: #888; }
#gt-ionizer.problem .mechanism .num-list .cause span{ display: block; font-size: 16px; font-weight: 500; color: var(--mainColor); margin-bottom: 8px; }
#gt-ionizer.problem .mechanism .num-list .cause .dot-list li{ font-weight: 300; }

#gt-ionizer.problem .problem .common-grid{
    --gap: 20px;
}
#gt-ionizer.problem .problem .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }

#gt-ionizer.problem .solution .grid01 .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }
#gt-ionizer.problem .solution .grid01 dl dt{ color: var(--mainColor); padding-bottom: 12px; margin-bottom: 24px; }
#gt-ionizer.problem .solution .grid01 .check-list li{ font-weight: 500; line-height: 1.4; }
#gt-ionizer.problem .solution .grid01 .check-list li:not(:last-of-type){ margin-bottom: 16px; }
#gt-ionizer.problem .solution .grid01 .check-list li::before{ top: calc(1.4em / 2); }
#gt-ionizer.problem .solution .grid01 .check-list li p{ font-size: 16px; font-weight: 300; line-height: 1.7; margin-top: 8px; }
#gt-ionizer.problem .solution .blue-table colgroup .th{ width: 100px; }
#gt-ionizer.problem .solution .blueBg{ padding: 40px; }

@media screen and (max-width: 1700px){
    #gt-ionizer.problem .algal-bloom .barTit{ margin-bottom: 16px; }

    #gt-ionizer.problem .solution .blueBg{ padding: 30px; }
}

@media screen and (max-width: 1280px){
    #gt-ionizer.problem .common-gallery.gallery p{ font-size: 17px; } 

    #gt-ionizer.problem .algal-bloom .barTit{ margin-bottom: 8px; }

    #gt-ionizer.problem .problem .common-grid br{ display: none; }

    #gt-ionizer.problem .solution .grid01 dl dt{ padding-bottom: 9px; margin-bottom: 16px; }
    #gt-ionizer.problem .solution .grid01 .check-list li p{ font-size: 15px; margin-top: 4px; }
    #gt-ionizer.problem .solution .blueBg{ padding: 15px 20px; }
}

@media screen and (max-width: 960px){
    #gt-ionizer.problem .algal-bloom .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #gt-ionizer.problem .solution .grid01 .common-grid{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 800px){
    #gt-ionizer.problem .algal-bloom .common-info br{ display: none; }
}

@media screen and (max-width: 768px){
    #gt-ionizer.problem .mechanism .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #gt-ionizer.problem .problem .common-grid{ grid-template-columns: repeat(2, 50%); }

    #gt-ionizer.problem .solution .grid01 .common-grid,
    #gt-ionizer.problem .solution .grid02 .common-grid{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - GT이오나이저 - 제품특징 */
#gt-ionizer.feature .structure .step .common-gallery, 
#gt-ionizer.feature .structure .gallery .common-gallery{ grid-template-columns: repeat(2, 50%); }
#gt-ionizer.feature .structure .step{ display: flex; flex-direction: column; } 
#gt-ionizer.feature .structure .step .common-gallery figure{ margin-top: 0; }
#gt-ionizer.feature .structure .gallery .common-gallery li{ display: flex; flex-direction: column; }
#gt-ionizer.feature .structure .gallery figure{ border: 2px solid var(--blueBorder); border-bottom-width: 0; }
#gt-ionizer.feature .structure .gallery .colorBg{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; font-size: 16px; font-weight: 400; line-height: 1.7; text-align: center; padding: 16px; } 
#gt-ionizer.feature .structure .gallery .colorBg *{ line-height: inherit; }

#gt-ionizer.feature .benefit .diagram{
    --gap: 64px;
}
#gt-ionizer.feature .benefit .diagram{ overflow: hidden; }
#gt-ionizer.feature .benefit .diagram ol{ display: grid; grid-template-columns: repeat(4, 25%); margin: calc(var(--gap) * -0.5); counter-reset: num; }  
#gt-ionizer.feature .benefit .diagram ol li{ display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1 / 1; text-align: center; margin: calc(var(--gap) / 2); position: relative; counter-increment: num; }
#gt-ionizer.feature .benefit .diagram ol li::before{ content: ""; border: 20px solid rgba(var(--mainRGB), 0.2); border-top-color: var(--mainColor); border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: rotate(45deg); box-sizing: border-box; }
#gt-ionizer.feature .benefit .diagram ol li:nth-of-type(2)::before{ border-right-color: var(--mainColor); }
#gt-ionizer.feature .benefit .diagram ol li:nth-of-type(3)::before{ border-right-color: var(--mainColor); border-bottom-color: var(--mainColor); }
#gt-ionizer.feature .benefit .diagram ol li:nth-of-type(4)::before{ border-color: var(--mainColor); }
#gt-ionizer.feature .benefit .diagram ol li::after{ content: ""; width: 12px; height: 16px; background: var(--mainColor); mask: url("/img/sub/product/rsi_references_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/product/rsi_references_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: calc(var(--gap) * -0.5); transform: translate(50%, -50%); }
#gt-ionizer.feature .benefit .diagram ol li:last-of-type::after{ display: none; }
#gt-ionizer.feature .benefit .diagram .txt{ padding: 0 20px; }
#gt-ionizer.feature .benefit .diagram .txt .num{ display: block; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: var(--mainColor); }
#gt-ionizer.feature .benefit .diagram .txt .num::before{ content: counter(num, decimal-leading-zero); }
#gt-ionizer.feature .benefit .diagram .txt p{ min-height: 3em; display: flex; flex-direction: column; justify-content: center; font-size: 18px; font-weight: 500; color: #333; line-height: 1.5; margin-top: 8px; }

#gt-ionizer.feature .benefit .grid01 .item dl{ margin-top: 20px; }
#gt-ionizer.feature .benefit .grid01 .item dl dt{ font-size: 18px; font-weight: 500; color: #333; line-height: 1.4; margin-bottom: 10px; }
#gt-ionizer.feature .benefit .grid01 .item .dot-list li{ text-indent: -14px; }
#gt-ionizer.feature .benefit .grid01 .item .dot-list li::before{ vertical-align: middle; margin-right: 8px; position: static; transform: translateY(-15%); }
#gt-ionizer.feature .benefit .grid02 .common-grid.dl{ --gap: 20px; grid-template-columns: repeat(1, 100%); }

#gt-ionizer.feature .spec .blue-table colgroup .th{ width: 25%; }

#gt-ionizer.feature .install .common-gallery dl dt{ border-bottom: 1px solid var(--blueBorder2); font-size: 20px; font-weight: 500; color: var(--mainColor); line-height: 1.4; padding-bottom: 13px; margin-bottom: 24px; }
#gt-ionizer.feature .install .common-gallery dl dd p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 8px; }

#gt-ionizer.feature .rnd .sec01 .common-gallery figure{ border: 2px solid var(--blueBorder); }
#gt-ionizer.feature .rnd .sec01 .blue-table td *{ line-height: inherit; }
#gt-ionizer.feature .rnd .sec01 .blue-table td p{ min-height: calc(var(--lineHeight) * 2); display: flex; flex-direction: column; justify-content: center; }
#gt-ionizer.feature .rnd .sec01 .blue-table td span{ color: rgba(51, 51, 51, 0.5); }

#gt-ionizer.feature .rnd .sec01 .barTit{ margin-bottom: 16px; }
#gt-ionizer.feature .rnd .sec02 .common-split{
    --imgW: 50%;
    --padding: 60px;
}
#gt-ionizer.feature .rnd .sec02 .common-split .img .blue-table figure{ width: unset; }
#gt-ionizer.feature .rnd .sec02 .common-split .text p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; } 
#gt-ionizer.feature .rnd .sec02 .note{ text-align: left; }
#gt-ionizer.feature .rnd .sec03 .note:not(.grayBg){ text-align: right; margin: 0 0 8px; }
#gt-ionizer.feature .rnd .sec04 .blue-table colgroup .th{ width: 12.5%; }
#gt-ionizer.feature .rnd .sec04 .blue-table tbody th{ background: unset; }
#gt-ionizer.feature .rnd .sec04 .barTit{ margin-bottom: 16px; }

@media screen and (max-width: 1700px){
    #gt-ionizer.feature .benefit .diagram{
        --gap: 54px;
    }
    #gt-ionizer.feature .benefit .diagram ol li::before{ border-width: 16px; }

    #gt-ionizer.feature .rnd .sec02 .common-split{
        --padding: 40px;
    }

    #gt-ionizer.feature .install .common-gallery dl dt{ font-size: 19px; padding-bottom: 10px; margin-bottom: 20px; }
}

@media screen and (max-width: 1550px){
    #gt-ionizer.feature .rnd .sec02 .common-split{
        --imgW: 55%;
    }
    #gt-ionizer.feature .rnd .sec02 .common-split .text br{ display: none; }

    #gt-ionizer.feature .install .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 1400px){
    #gt-ionizer.feature .benefit .diagram{
        --gap: 44px;
    }
    #gt-ionizer.feature .benefit .diagram ol li::before{ border-width: 12px; }
    #gt-ionizer.feature .benefit .diagram ol li::after{ width: 10px; height: 14px; }
}

@media screen and (max-width: 1280px){
    #gt-ionizer.feature .structure .gallery .colorBg{ padding: 12px; }

    #gt-ionizer.feature .benefit .diagram .txt .num{ font-size: 15px; }
    #gt-ionizer.feature .benefit .diagram .txt p{ font-size: 16px; margin-top: 2px; }
    #gt-ionizer.feature .benefit .grid01 .item dl{ margin-top: 16px; }
    #gt-ionizer.feature .benefit .grid01 .item dl dt{ font-size: 17px; margin-bottom: 6px; }  

    #gt-ionizer.feature .install .common-gallery dl dt{ font-size: 18px; padding-bottom: 8px; margin-bottom: 16px; }
}

@media screen and (max-width: 1200px){
    #gt-ionizer.feature .rnd .sec02 .blue-table table{ min-width: 640px; }
}

@media screen and (max-width: 960px){
    #gt-ionizer.feature .structure .step .common-gallery, 
    #gt-ionizer.feature .structure .gallery .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #gt-ionizer.feature .structure .step .common-gallery figure::after{ top: calc(100% + (var(--gap) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
    
    #gt-ionizer.feature .benefit .diagram{ max-width: 500px; margin-inline: auto; }
    #gt-ionizer.feature .benefit .diagram ol{ grid-template-columns: repeat(2, 50%); }
    #gt-ionizer.feature .benefit .diagram ol li:nth-of-type(even)::after{ display: none; }  
    #gt-ionizer.feature .benefit .grid01 .common-grid{ grid-template-columns: repeat(1, 100%); }

    #gt-ionizer.feature .spec .responsive{
        --responsiveW: 150px;
    }
    #gt-ionizer.feature .spec .responsive, 
    #gt-ionizer.feature .spec .responsive tbody{ display: block; }
    #gt-ionizer.feature .spec .responsive colgroup,
    #gt-ionizer.feature .spec .responsive thead{ display: none; }
    #gt-ionizer.feature .spec .responsive{ min-width: unset !important; }
    #gt-ionizer.feature .spec .responsive br{ display: none; }
    #gt-ionizer.feature .spec .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #gt-ionizer.feature .spec .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #gt-ionizer.feature .spec .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #gt-ionizer.feature .spec .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #gt-ionizer.feature .spec .responsive tr > *::before{ content: attr(data-th); }
    #gt-ionizer.feature .spec .responsive th span{ min-height: unset; }

    #gt-ionizer.feature .rnd .sec02 .common-split{ flex-direction: column; }
    #gt-ionizer.feature .rnd .sec02 .common-split .img{ width: 100%; }
    #gt-ionizer.feature .rnd .sec02 .common-split .text{ padding: 20px 0 0; }
}

@media screen and (max-width: 768px){
    #gt-ionizer.feature .install .common-gallery{ grid-template-columns: repeat(2, 50%); }
}


/* 제품 - GT이오나이저 - 설치사례 */
#gt-ionizer.case .health{ background: url("/img/sub/product/gt-ionizer_case_bg.jpg") no-repeat center center / cover; color: #FFF; padding: var(--sec120) 0; margin-bottom: 100px; }
#gt-ionizer.case .health .common-grid{ --gap: 20px; grid-template-columns: repeat(3, calc(100% / 3)); }
#gt-ionizer.case .health .common-grid .item{ background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; transition: background 0.4s, opacity var(--aosT), transform var(--aosT); }
#gt-ionizer.case .health .common-grid .item dl{ margin-top: 20px; }
#gt-ionizer.case .health .common-grid .item dl dt{ font-size: 20px; font-weight: 400; line-height: 1.4; margin-bottom: 12px; }
#gt-ionizer.case .health .common-grid .item dl dd{ font-size: 16px; font-weight: 200; line-height: 1.7; }

#gt-ionizer.case .cc .common-grid{
    --gap: 12px;
}
#gt-ionizer.case .cc .common-grid > *{ padding: 18px 30px; }
#gt-ionizer.case .cc .common-grid p{ display: flex; font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; position: relative; }
#gt-ionizer.case .cc .common-grid p::before{ content: ""; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-55%); }
#gt-ionizer.case .cc .common-grid .date p::before{ background-image: url("/img/sub/product/gt-ionizer_case_date.svg"); }
#gt-ionizer.case .cc .common-grid .add p::before{ background-image: url("/img/sub/product/gt-ionizer_case_add.svg"); }
#gt-ionizer.case .cc .common-grid .effect p::before{ background-image: url("/img/sub/product/gt-ionizer_case_effect.svg"); }
#gt-ionizer.case .cc .common-grid p strong{ flex-shrink: 0; display: inline-block; font-weight: 500; line-height: inherit; padding-left: 26px; margin-right: 4px; position: relative; }

#gt-ionizer.case .cc .blueBg{ text-align: center; padding: 20px; }
#gt-ionizer.case .cc .blueBg p{ font-size: 20px; font-weight: 500; color: var(--mainColor); line-height: 1.7; }

#gt-ionizer.case .cc .grayBg{ padding: 32px 40px; }
#gt-ionizer.case .cc .grayBg dl dt{ border-bottom: 1px solid #DDD; font-size: 18px; font-weight: 500; color: #333; line-height: 1.7; padding-bottom: 8px; margin-bottom: 16px; }
#gt-ionizer.case .cc .grayBg .hyphen-list li{ font-size: 16px; margin-bottom: 0; }

#gt-ionizer.case .cc .column2,
#gt-ionizer.case .cc .column3{ display: flex; flex-direction: column; }

@media screen and (hover: hover) and (pointer: fine){
    #gt-ionizer.case .health .common-grid .item:hover{ background: var(--mainColor); }
}

@media screen and (max-width: 1700px){
    #gt-ionizer.case .health .common-grid .item dl dt{ font-size: 19px; }

    #gt-ionizer.case .cc .common-grid > *{ padding: 15px 25px; }

    #gt-ionizer.case .cc .blueBg{ padding: 16px; }
    #gt-ionizer.case .cc .blueBg p{ font-size: 19px; }

    #gt-ionizer.case .cc .grayBg{ padding: 28px 36px; }
}

@media screen and (max-width: 1280px){
    #gt-ionizer.case .health{ margin-bottom: 70px; }
    #gt-ionizer.case .health .common-grid .item dl{ margin-top: 12px; }
    #gt-ionizer.case .health .common-grid .item dl dt{ font-size: 18px; margin-bottom: 9px; }

    #gt-ionizer.case .cc .common-grid > *{ padding: 12px 20px; }
    #gt-ionizer.case .cc .common-grid p{ font-size: 17px; }
    #gt-ionizer.case .cc .common-grid p::before{ transform: translateY(-50%); }

    #gt-ionizer.case .cc .blueBg{ padding: 12px; }
    #gt-ionizer.case .cc .blueBg p{ font-size: 18px; }

    #gt-ionizer.case .cc .grayBg{ padding: 24px 32px; }
    #gt-ionizer.case .cc .grayBg dl dt{ font-size: 17px; padding-bottom: 6px; margin-bottom: 12px; }
}

@media screen and (max-width: 1024px){
    #gt-ionizer.case .health .common-grid{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 960px){
    #gt-ionizer.case .cc .common-grid{
        --gap: 8px;
    }
    #gt-ionizer.case .cc .common-grid{ grid-template-columns: repeat(1, 100%); }
    #gt-ionizer.case .cc .common-grid > *{ padding: 9px 15px; }

    #gt-ionizer.case .cc .blue-dl .common-gallery,
    #gt-ionizer.case .cc .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #gt-ionizer.case .cc .column3 .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #gt-ionizer.case .cc .blueBg p{ font-size: 17px; }

    #gt-ionizer.case .cc .grayBg{ padding: 20px 24px; }
}

@media screen and (max-width: 768px){
    #gt-ionizer.case .health .common-grid{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - 에코트랜스 - 제품소개 */
#ecotrans.product .common-banner .item{ background: linear-gradient(to right, var(--mainColor), #44B9FE); }
#ecotrans.product .common-banner .text{ padding-block: 15px 45px; }
#ecotrans.product .common-banner .text p{ font-family: var(--engFont); margin-top: 16px; }
#ecotrans.product .common-banner .flex{ display: flex; align-items: center; }
#ecotrans.product .common-banner .flex .left{ flex: 1 1 auto; min-width: 0; padding-right: 30px; }
#ecotrans.product .common-banner .flex .right{ flex-shrink: 0; }

#ecotrans.product .problem div.defalut{ display: flex; flex-direction: column; }
#ecotrans.product .problem .common-grid{ counter-reset: num; }
#ecotrans.product .problem .common-grid > *{ counter-increment: num; padding-bottom: calc(var(--padding) + 15px); }
#ecotrans.product .problem .common-grid .num{ display: block; margin-bottom: 8px; }
#ecotrans.product .problem .common-grid .num::before{ content: counter(num, decimal-leading-zero); display: inline-block; border-bottom: 1px solid var(--mainColor); font-family: var(--engFont); font-size: 16px; font-weight: 700; color: var(--mainColor); line-height: 1.4; padding: 0 1px 4px; }
#ecotrans.product .problem .common-grid p{ font-weight: 500; }

#ecotrans.product .application .common-grid{ 
    --gap: 20px;
}
#ecotrans.product .application .common-grid{ grid-template-columns: repeat(2, 50%); text-align: left; }
#ecotrans.product .application .common-grid dl dt{ font-size: 20px; font-weight: 500; color: var(--mainColor); line-height: 1.4; margin-bottom: 16px; }

#ecotrans.product .feature .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); text-align: left; }

@media screen and (max-width: 1700px){
    #ecotrans.product .common-banner .text p{ margin-top: 12px; }
    #ecotrans.product .common-banner .right{ width: 450px; }

    #ecotrans.product .application .common-grid dl dt{ font-size: 19px; margin-bottom: 16px; }
}

@media screen and (max-width: 1520px){
    #ecotrans.product .problem .right br{ display: none; }
}

@media screen and (max-width: 1400px){
    #ecotrans.product .common-banner .right{ width: 400px; }
}

@media screen and (max-width: 1280px){
    #ecotrans.product .common-banner .text p{ margin-top: 8px; }

    #ecotrans.product .application .common-grid dl dt{ font-size: 18px; margin-bottom: 12px; }
}

@media screen and (max-width: 1024px){
    #ecotrans.product .common-banner{ text-align: center; }
    #ecotrans.product .common-banner .text{ padding-block: 25px; }
    #ecotrans.product .common-banner .flex{ flex-direction: column; }
    #ecotrans.product .common-banner .flex .left{ padding: 0 0 15px; }
    #ecotrans.product .common-banner .flex .right{ width: 320px; }

    #ecotrans.product .problem .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #ecotrans.product .problem .common-gallery{ grid-template-columns: repeat(1, 100%); }
}

@media screen and (max-width: 960px){
    #ecotrans.product .common-grid.dl{ grid-template-columns: repeat(1, 100%); }

    #ecotrans.product .application br.m{ display: block; }
    #ecotrans.product .application .common-grid{ grid-template-columns: repeat(1, 100%); }
    #ecotrans.product .application .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #ecotrans.product .feature .common-grid{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #ecotrans.product .problem .common-grid{ --gap: 8px; grid-template-columns: repeat(1, 100%); text-align: left; }
    #ecotrans.product .problem .common-grid > *{ display: flex; align-items: baseline; padding: 12px 15px; }
    #ecotrans.product .problem .common-grid .num{ flex-shrink: 0; margin: 0; margin-right: 12px; }
    #ecotrans.product .problem .common-grid .num::before{ border-bottom: none; border-right: 1px solid var(--mainColor); padding: 0; padding-right: 13px; }
    #ecotrans.product .problem .common-grid p{ flex: 1 1 auto; min-width: 0; }

    #ecotrans.product .feature .common-grid{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - 에코트랜스 - 제품특징 */
#ecotrans.feature .role .blue-table{
    --paddingLR: 40px;
}
#ecotrans.feature .role .blue-table{ border-top: 1px solid var(--mainColor); }
#ecotrans.feature .role .blue-table table{ margin-top: -1px; }
#ecotrans.feature .role .blue-table th{ width: 240px; }
#ecotrans.feature .role .blue-table th span{ display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--lineHeight) * 2); }
#ecotrans.feature .role .blue-table td{ --lineHeight: 1.7; text-align: left; }

#ecotrans.feature .feature .circle .common-gallery{ --gap: 10px; }
#ecotrans.feature .feature .circle .common-gallery > *{ aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; background: var(--skyBlue2); border-radius: 50%; text-align: center; }
#ecotrans.feature .feature .circle .common-gallery p{ font-size: 18px; font-weight: 500; color: var(--mainColor); line-height: 1.5; }

#ecotrans.feature .spec .common-grid{ grid-template-columns: repeat(1, 100%); }

#ecotrans.feature .history .step .common-gallery{
    --gap: 12px;
}
#ecotrans.feature .history .step .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
#ecotrans.feature .history .step .common-gallery span{ border-radius: 0; left: 0; transform: unset; }
#ecotrans.feature .history .step .common-gallery span::before{ content: counter(num); font-weight: 400; }
#ecotrans.feature .history .step .common-gallery span::after{ content: unset; }
#ecotrans.feature .history .step .common-gallery > *:nth-of-type(1) span{ background: #1394D3; }
#ecotrans.feature .history .step .common-gallery > *:nth-of-type(2) span{ background: #0E78B7; }
#ecotrans.feature .history .step .common-gallery > *:nth-of-type(3) span{ background: #0A5C9A; }
#ecotrans.feature .history .step .common-gallery figure{ margin: 0; }

#ecotrans.feature .effect .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }

@media screen and (max-width: 1700px){
    #ecotrans.feature .role .blue-table{
        --paddingLR: 30px;
    }
    #ecotrans.feature .role .blue-table th{ width: 210px; }    
}

@media screen and (max-width: 1400px){
    #ecotrans.feature .compare .blue-table br{ display: none; }
}

@media screen and (max-width: 1280px){
    #ecotrans.feature .role .blue-table{
        --paddingLR: 25px;
    }
    #ecotrans.feature .role .blue-table th{ width: 180px; }    

    #ecotrans.feature .feature .circle .common-gallery p{ font-size: 17px; }
}

@media screen and (max-width: 960px){
    #ecotrans.feature .role .blue-table{
        --paddingLR: 20px;
    }
    #ecotrans.feature .role .blue-table th{ width: 150px; padding-inline: 10px; }    

    #ecotrans.feature .feature .circle{ max-width: 500px; margin-inline: auto; }
    #ecotrans.feature .feature .circle .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }

    #ecotrans.feature .change .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #ecotrans.feature .history .step .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #ecotrans.feature .history .step .common-gallery > *:nth-of-type(even) figure::after{ display: none; }
    
    #ecotrans.feature .effect .common-grid{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #ecotrans.feature .effect .common-grid br{ display: none; }
}


/* 제품 - 에코트랜스 - 실험 및 연구 */
#ecotrans.research .study .barTit{ margin-bottom: 16px; }
#ecotrans.research .study .sec01 .common-gallery .figure{ display: grid; grid-template-columns: repeat(2, 50%); }
#ecotrans.research .study .sec01 .common-gallery figure figcaption{ width: 100px; text-align: center; left: 50%; transform: translateX(-50%); } 
#ecotrans.research .study .sec03 .blue-table + .blue-table{ margin-top: 16px; }
#ecotrans.research .study .sec03 .blue-table tbody td strong{ color: #333; }

@media screen and (max-width: 960px){
    #ecotrans.research .study .sec01 .common-gallery{ grid-template-columns: repeat(1, 100%); }
}


/* 제품 - 에코트랜스 - 설치사례 */
@media screen and (max-width: 800px){
    #ecotrans.case .responsive{
        --responsiveW: 130px;
    }
    #ecotrans.case .responsive, 
    #ecotrans.case .responsive tbody{ display: block; }
    #ecotrans.case .responsive colgroup,
    #ecotrans.case .responsive thead{ display: none; }
    #ecotrans.case .responsive{ min-width: unset !important; }
    #ecotrans.case .responsive br{ display: none; }
    #ecotrans.case .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #ecotrans.case .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #ecotrans.case .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #ecotrans.case .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #ecotrans.case .responsive tr > *::before{ content: attr(data-th); }
    #ecotrans.case .responsive th span{ min-height: unset; }

    #ecotrans.case .responsive.wide{
        --responsiveW: 175px;
    }
}