main{
font-family:"Paperlogy","Pretendard",sans-serif;
}
/* ==================================================
KSPL CSS v2.0
Geumseong Plastic Design System
Cascade-safe cleanup · responsive behavior preserved
================================================== */

/* ==================================================
   MASTER CSS · products_MASTER_stage3.css
   Hero / Footer values preserved
================================================== */


html{
background: var(--ks-white);
}

body{
--page-active-color: #111111;
--page-hover-color: #777777;
color: var(--B-black);
line-height: 1.8;
background: var(--ks-white);
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes fadeUpKsplFinal{
from{
opacity: 0;
transform: translateY(26px);
}

to{
opacity: 1;
transform: translateY(0);
}
}

.hero{
position: relative;
min-height: 640px;
margin-top: 0;
background: var(--ks-white);
color: var(--B-black);
overflow: hidden;
border-radius: 0;
opacity: 1;
font-family:"Pretendard",sans-serif;
}

.hero::before,
.hero::after{
display: none;
content: none;
}

.hero,
.hero *{
text-shadow: none;
}

.hero .inner{
max-width: 1500px;
position: relative;
z-index: 1;
min-height: 640px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 54px;
align-items: start;
padding-top: 110px;
padding-bottom: 70px;
}

.hero .inner > div:first-child{
width: 100%;
transform: translateY(1px);
}

.hero h1{
margin: -4px 0 50px;
font-size: 58px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -1.8px;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
}

.hero-message-animate p{
font-family:"Paperlogy","Pretendard",sans-serif;
max-width: 650px;
margin: 0;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
font-size: 20px;
font-weight: 450;
line-height: 1.7;
letter-spacing: -0.15px;
text-align: left;
}

.hero .kicker{
display: inline-block;
margin: 0 0 18px 0;
padding: 0 0 10px 0;
color: var(--C-blue);
-webkit-text-fill-color: var(--C-blue);
border: 0;
background: transparent;
box-shadow: none;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 3.2px;
line-height: 1.4;
text-transform: uppercase;
}

.hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
display: block;
width: 100%;
max-width: 620px;
margin-top: 130px;
min-height: auto;
position: relative;
z-index: 3;
}

.hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
display: block;
opacity: 0;
transform: translateY(26px);
animation: fadeUpKsplFinal 1.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero-message-animate span:nth-child(1){
font-family:"Paperlogy","Pretendard",sans-serif;
animation-delay: 1.40s;
}

.hero-message-animate span:nth-child(2){
font-family:"Paperlogy","Pretendard",sans-serif;
animation-delay: 1.60s;
}

.hero-message-animate span:nth-child(3){
font-family:"Paperlogy","Pretendard",sans-serif;
animation-delay: 1.80s;
}

.hero-button-spacer{
width: 100%;
height: 50px;
margin-top: 24px;
pointer-events: none;
}

.hero + .section,
.hero + .product-unified{
margin-top: 0;
background: var(--color-white);
color: var(--B-black);
}

.hero + .product-unified h2{
color: var(--color-navy);
}

.hero + .product-unified .lead-white{
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
}

.hero + .product-unified + .product-unified{
background: var(--ks-white);
}

.hero + .product-unified + .product-unified + .product-unified{
background: var(--color-white);
}

.hero + .product-unified + .product-unified + .product-unified + .section{
background: var(--ks-white);
}

.hero + .product-unified + .product-unified + .product-unified + .section + .section,
.hero + .product-unified + .product-unified + .product-unified + .section + .section.white{
background: var(--color-white);
}

.section-head,
.head-center{
max-width: 760px;
margin: 0 0 48px;
}

.head-center{
max-width: 840px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.head-center .tag,
.head-center h2,
.head-center .lead{
text-align: center;
margin-left: auto;
margin-right: auto;
}

h2,
.section-head h2{
margin: 0 0 14px;
font-size: clamp(33px, calc(27.879px + 1.313vw), 46px);
font-weight:700;
line-height: 1.3;
letter-spacing: -1.2px;
color: #111111;
}

.lead,
.lead-white,
.section-head p{
margin: 0;
font-size: 19px;
font-weight:600;
line-height: 1.9;
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
}

.section,
.product-unified{
padding: 116px 0;
background: var(--ks-white);
}

.product-unified.dark{
background: #151719;
color: var(--B-black);
}

.product-unified.white,
.section.white{
background: var(--ks-white);
}

.products-general-section{
padding-bottom: 96px;
}

.products-industrial-section{
padding-top: 96px;
padding-bottom: 96px;
}

.products-industries .head-center{
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
text-align: left;
}

.products-industries .head-center .tag,
.products-industries .head-center h2,
.products-industries .head-center .lead{
text-align: left;
margin-left: 0;
margin-right: 0;
}

.products-industries .cards4{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, calc(2.897px + 1.964vw), 30px);
align-items: stretch;
justify-content: center;
max-width: 1240px;
margin: 42px auto 0;
}

.products-industries .cards4 .card{
position: relative;
min-height: 190px;
padding: 36px 30px 34px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background: transparent;
border: 0;
box-shadow: none;
}

.products-industries .cards4 .card:not(:nth-child(3n/**/+1))::before{
content: "";
position: absolute;
left: 0;
top: 34px;
bottom: 34px;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(13,30,61,.13) 18%, rgba(13,30,61,.13) 82%, transparent);
}

.products-industries .cards4 .card:nth-child(n/**/+4)::after{
content: "";
position: absolute;
top: 0;
left: 34px;
right: 34px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(13,30,61,.08) 20%, rgba(13,30,61,.08) 80%, transparent);
}

.industry-icon{
width: 62px;
height: 62px;
margin: 0 0 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f7f9fc, #eef2f7);
border: 1px solid rgba(13,30,61,.08);
box-shadow: 0 10px 26px rgba(13,30,61,.055);
}

.industry-icon svg{
width: 30px;
height: 30px;
fill: none;
stroke: #6596D8;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.products-industries .cards4 .card h3{
margin: 0;
min-height: 0;
font-size: clamp(20px, calc(16.224px + 0.491vw), 23px);
font-weight:700;
line-height: 1.5;
letter-spacing: -.45px;
color: #111111;
text-align: center;
word-break: keep-all;
}


.quick-check-grid{
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
max-width: 1380px;
margin: 48px auto 0;
}

.quick-check-grid::before{
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 32px;
height: 1px;
background: linear-gradient(to right, rgba(13,30,61,.04), rgba(13,30,61,.14) 12%, rgba(13,30,61,.14) 88%, rgba(13,30,61,.04));
}

.quick-check-card{
position: relative;
z-index: 1;
padding: 0 16px;
background: transparent;
border: 0;
box-shadow: none;
text-align: center;
}

.quick-check-icon{
width: 72px;
height: 72px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(145deg, #f7f9fc, #eef2f7);
border: 1px solid rgba(13,30,61,.08);
box-shadow: 0 10px 26px rgba(13,30,61,.055);
}

.quick-check-icon img{
width: 43px;
height: 43px;
display: block;
object-fit: cover;
border-radius: 0;
}

.quick-check-number{
display: block;
margin: 0 0 11px;
color: #6596D8;
-webkit-text-fill-color: #6596D8;
font-size: 14px;
font-weight:700;
line-height: 1;
letter-spacing: 1px;
}

.quick-check-card h3{
margin: 0 0 9px;
color: #111111;
-webkit-text-fill-color: #111111;
font-size: 18px;
font-weight:700;
line-height: 1.6;
word-break: keep-all;
}

.quick-check-card p{
margin: 0;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 16.5px;
font-weight:600;
line-height: 1.8;
word-break: keep-all;
}

.products-archive-guide{
position: relative;
margin: 72px auto 18px;
text-align: center;
color: #111;
font-size: 17.5px;
font-weight:600;
line-height: 1.9;
letter-spacing: -0.2px;
}

.products-archive-guide::before{
content: "";
position: absolute;
top: -28px;
left: 34px;
right: 34px;
height: 1px;
background: rgba(17, 17, 17, 0.12);
pointer-events: none;
}

.products-archive-guide-text{
display: inline-block;
transform: translateY(36px);
}

.products-archive-cta-wrap{
margin-top: 28px;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(36px);
}

.products-archive-cta{
min-width: 240px;
height: 58px;
padding: 0 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 10px;
background: #6596D8;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
border: 0;
outline: none;
box-shadow: 0 12px 26px rgba(0, 71, 171, 0.18);
font-size: 17px;
font-weight:700;
line-height: 1.3;
letter-spacing: -0.2px;
text-decoration: none;
transition: all 0.18s ease;
}

.products-archive-cta svg{
width: 21px;
height: 21px;
flex: 0 0 21px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.products-archive-cta-text{
display: inline-block;
}

.products-archive-cta-arrow{
display: inline-block;
font-size: 21px;
line-height: 1;
transform: translateY(-1px);
transition: transform 0.22s ease;
}

.products-archive-cta:hover{
transform: translateY(-2px);
opacity: 0.96;
}

.products-archive-cta:hover .products-archive-cta-arrow{
transform: translate(6px, -1px);
}

.kspl-final-process h2{
color: #F5F5F2;
-webkit-text-fill-color: #F5F5F2;
  font-size: clamp(35px, calc(18.848px + 4.141vw), 76px);
  font-weight:700;
  line-height: 0.92;
  letter-spacing: 0.04em;
  margin: 0;

text-transform: none;}

.kspl-final-process p{
color: #F5F5F2;
-webkit-text-fill-color: #F5F5F2;
  font-size: 44px;
  font-weight:700;
  line-height: 1.15;
  letter-spacing: -1.4px;
  margin: 22px 0 0;
}

.quick-check-section{
background: var(--ks-white);
padding-bottom: 100px;
padding-top: 0;
}

.product-unified.dark h2{
color: #111111;
-webkit-text-fill-color: #111111;
}

.product-unified.dark .lead-white{
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
}

.product-unified .tag,
.section .tag,
.section-head .tag,
.head-center .tag{
display: inline-block;
margin-bottom: 14px;
padding: 0;
color: #666666;
-webkit-text-fill-color: #666666;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
font-size: 14.5px;
font-weight:700;
letter-spacing: 3.2px;
text-transform: uppercase;
text-shadow: none;
}

.product-unified.dark .tag{
color: var(--C-blue);
-webkit-text-fill-color: var(--C-blue);
background: transparent;
border: 0;
text-shadow: none;
}

.product-grid-unified{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}

.product-card-u{
position: relative;
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 4px 10px 30px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(13, 30, 61, 0.09);
border-radius: 0;
text-align: center;
box-shadow: none;
scroll-margin-top: 140px;
}

.product-card-u .thumb{
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}

.product-card-u .thumb img{
width: 100%;
max-width: 300px;
margin: 0 auto;
display: block;
object-fit: cover;
border-radius: 0;
background: transparent;
padding: 0;
transition: transform .72s cubic-bezier(.22,.61,.36,1);
transform-origin: center center;
}

.product-unified.dark .product-card-u .thumb{
height: 210px;
margin: 0 0 6px;
}

.product-unified.dark .product-card-u .thumb img{
max-width: 240px;
height: 210px;
}

.product-unified.white .product-card-u .thumb{
height: 330px;
margin: 0 0 2px;
}

.product-unified.white .product-card-u .thumb img{
width: auto;
max-width: 520px;
height: auto;
max-height: 320px;
}

.product-card-u h3{
width: 100%;
margin: 0 0 10px;
font-size: clamp(19px, calc(15.224px + 0.491vw), 22px);
font-weight:700;
line-height: 1.6;
letter-spacing: -0.3px;
color: #111111;
text-align: center;
}

.product-card-u h3 .eng{
display: block;
margin-top: 3px;
font-size: 15px;
font-weight:600;
color: var(--A-gray);
letter-spacing: 0.2px;
}

.product-card-u p{
width: 100%;
margin: 0;
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
font-size: 19px;
line-height: 1.9;
text-align: center;
font-weight:600;
}

.product-copy-mobile-break{
display: none;
}

.product-unified.dark .product-card-u p,
.product-unified.white .product-card-u p{
min-height: 58px;
}

.detail-panel{
display: none;
margin-top: 14px;
padding: 14px 16px;
border-radius: 14px;
background: #ffffff;
color: #666666;
font-size: 17.5px;
line-height: 1.9;
font-weight:600;
text-align: left;
letter-spacing: 0.05px;
word-break: keep-all;
}

.detail-panel.open{
display: block;
}

.detail-panel strong{
display: block;
margin-bottom: 8px;
font-size: 19px;
font-weight:700;
color: #111111;
}

.detail-panel .detail-spec{
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(13, 30, 61, 0.1);
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
font-size: 18px;
font-weight:600;
line-height: 1.9;
letter-spacing: -0.2px;
}

.detail-image-wrap{
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(13, 30, 61, 0.1);
}

.detail-drawing-inline{
width: 100%;
max-width: 420px;
margin: 0 auto;
border-radius: 12px;
background: var(--ks-white);
border: 1px solid rgba(13, 30, 61, 0.08);
display: block;
}

.bobbin-drawing-img{
width: 100%;
max-width: 720px;
margin: 18px auto 0;
display: block;
border-radius: 0;
}

.product-spec-chips{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
margin: 16px auto 2px;
padding: 0;
}

.products-general-section .product-spec-chips,
.products-industrial-section .product-spec-chips{
gap: 12px;
}

.product-spec-chip{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 6px;
background: #f2f2f2;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 14px;
font-weight:600;
line-height: 1.5;
letter-spacing: -0.2px;
white-space: nowrap;
text-shadow: none;
box-shadow: none;
transform: none;
transition: none;
}

.product-spec-chip:not(:last-child)::after{
display: none;
content: none;
}

.product-case-links{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}

.product-case-item{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
border-radius: 12px;
background: transparent;
border: 0;
text-decoration: none;
color: #666666;
-webkit-text-fill-color: #666666;
font-family:"Paperlogy","Pretendard",sans-serif;
font-size: 15px;
font-weight:600;
line-height: 1.4;
cursor: pointer;
transition: background-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}

.product-case-icon,
.product-case-arrow{
color: #6596D8;
-webkit-text-fill-color: #6596D8;
}

.product-case-arrow{
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight:600;
line-height: 1;
transform: translateY(-0.5px);
}

.product-case-text{
white-space: nowrap;
}

.products-mobile-notice-final{
max-width: 920px;
margin: 46px auto 0;
padding: 20px 28px;
border-radius: 16px;
box-sizing: border-box;
background: var(--ks-white);
border: 0;
box-shadow: none;
color: #666666;
text-align: center;
font-size: 15.5px;
font-weight:600;
line-height: 1.9;
letter-spacing: -0.25px;
word-break: keep-all;
}

.products-notice-red{
color: #d64545;
font-weight:600;
}

.cards4{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
align-items: stretch;
justify-content: center;
}

.cards4 .card{
position: relative;
overflow: hidden;
min-height: 218px;
padding: 52px 36px 46px;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
background: transparent;
border: 0;
border-left: 1px solid rgba(13, 30, 61, 0.10);
box-shadow: none;
transition: none;
}

.cards4 .card h3{
margin: 0 0 18px;
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight:700;
line-height: 1.5;
letter-spacing: -0.45px;
color: #111111;
text-align: center;
word-break: keep-all;
}

.cards4 .card p{
margin: 0;
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
font-size: 17.5px;
font-weight:600;
line-height: 2.0;
letter-spacing: -0.25px;
text-align: center;
word-break: keep-all;
overflow-wrap: break-word;
}

.products-representative-carousel{
    position: relative;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    overflow: visible;
    scroll-margin-top: 150px;
}

.products-representative-carousel .product-scroll-showcase{
display: flex;
width: 100%;
gap: 0;
overflow-x: auto;
overflow-y: visible;
margin: 0;
padding: 0;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-y;
border-radius: 26px;
background: var(--ks-white);
border: 0;
box-shadow: none;
}

.products-representative-carousel .product-scroll-showcase::-webkit-scrollbar{
display: none;
}

.products-representative-carousel .product-scroll-showcase .product-card-u,
.products-representative-carousel .product-scroll-showcase .product-card-u:first-child{
flex: 0 0 100%;
max-width: 100%;
min-width: 100%;
min-height: 430px;
scroll-snap-align: start;
scroll-snap-stop: always;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: 52px;
padding: 46px 70px 46px 58px;
border: 0;
border-bottom: 0;
border-radius: 0;
box-shadow: none;
background: var(--ks-white);
text-align: left;
transform: none;
}

.products-representative-carousel .product-scroll-showcase .product-card-u .thumb{
width: 100%;
height: 310px;
min-height: 310px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}

.products-representative-carousel .product-scroll-showcase .product-card-u .thumb img,
.product-unified.dark .products-representative-carousel .product-scroll-showcase .product-card-u
.thumb img{
width: auto;
max-width: 100%;
height: auto;
max-height: 300px;
object-fit: cover;
border-radius: 0;
margin: 0 auto;
filter: drop-shadow(0 18px 28px rgba(13, 30, 61, 0.12));
}

.products-representative-carousel .product-scroll-showcase .product-card-u > div:last-child{
width: 100%;
max-width: 520px;
margin: 0;
}

.products-representative-carousel .product-scroll-showcase .product-card-u h3{
margin: 0 0 12px;
color: #111111;
-webkit-text-fill-color: #111111;
font-size: 39px;
font-weight:700;
line-height: 1.3;
letter-spacing: -1.2px;
text-align: left;
}

.products-representative-carousel .product-scroll-showcase .product-card-u h3 .eng{
display: block;
margin-top: 6px;
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
font-size: 16px;
font-weight:600;
letter-spacing: 0.2px;
}

.products-representative-carousel .product-scroll-showcase .product-card-u p{
min-height: 0;
margin: 0;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
font-size: 20px;
font-weight:600;
line-height: 1.7;
letter-spacing: -0.4px;
text-align: left;
}

.products-representative-carousel .product-scroll-showcase .product-spec-chips{
justify-content: flex-start;
margin: 18px 0 0;
}

.products-representative-carousel .product-scroll-showcase .product-spec-chip{
min-height: auto;
padding: 0 18px;
border: 0;
border-radius: 0;
background: transparent;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 16px;
font-weight:600;
line-height: 1.5;
letter-spacing: -0.15px;
}

.products-representative-carousel .product-scroll-showcase
.product-spec-chip:not(:last-child)::after{
display: block;
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 16px;
background: rgba(21, 70, 168, 0.38);
transform: translateY(-50%);
}

.products-representative-carousel .product-scroll-showcase .product-case-links{
justify-content: flex-start;
gap: 12px;
margin-top: 24px;
}

.products-representative-carousel .product-scroll-showcase .product-case-item{
min-height: 48px;
padding: 0 18px;
border-radius: 8px;
background: var(--ks-white);
border: 0;
color: #111111;
-webkit-text-fill-color: #111111;
box-shadow: none;
}

.products-representative-carousel .product-scroll-showcase .product-case-item:hover,
.products-representative-carousel .product-scroll-showcase .product-case-item:focus-visible{
background: #6596D8;
border-color: #6596D8;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(101, 150, 216, 0.24);
}

.products-representative-carousel .product-scroll-showcase .product-case-item:hover
.product-case-text,
.products-representative-carousel .product-scroll-showcase .product-case-item:hover
.product-case-arrow,
.products-representative-carousel .product-scroll-showcase .product-case-item:focus-visible
.product-case-text,
.products-representative-carousel .product-scroll-showcase .product-case-item:focus-visible
.product-case-arrow{
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
}

.products-representative-carousel .detail-panel{
max-width: 100%;
margin-top: 18px;
text-align: left;
}

.products-carousel-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(13, 30, 61, 0.12);
background: var(--ks-white);
color: var(--color-navy);
-webkit-text-fill-color: var(--color-navy);
box-shadow: none;
cursor: pointer;
font-size: 31px;
font-weight:600;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 4px 0;
font-family: Arial, sans-serif;
}

.products-carousel-prev{
left: -23px;
}

.products-carousel-next{
right: -23px;
}


.products-carousel-arrow:active,
.products-carousel-arrow.is-pressing{
background: var(--color-navy);
border-color: var(--color-navy);
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
}

.products-carousel-arrow:focus-visible{
outline: 2px solid var(--color-navy);
outline-offset: 2px;
}

.products-carousel-dots{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 34px;
}

.products-carousel-dots button{
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--ks-white);
cursor: pointer;
}

.products-carousel-dots button.is-active{
width: 28px;
background: var(--ks-white);
}

.products-anchor-points{
display: block;
height: 0;
overflow: visible;
}

.products-deep-anchor{
display: block;
height: 0;
scroll-margin-top: 150px;
}

.products-representative-carousel .detail-panel .detail-spec,
.products-representative-carousel .detail-panel .detail-spec p,
.products-representative-carousel .detail-panel p.detail-spec{
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 16.5px;
font-weight:600;
line-height: 1.9;
letter-spacing: -0.2px;
}

.kspl-carousel-track.dragging,
.product-lineup-flat.dragging,
.kspl-factory-gallery.dragging{
cursor: grabbing;
}

.kspl-carousel-track.dragging a,
.product-lineup-flat.dragging a,
.kspl-factory-gallery.dragging a{
pointer-events: none;
}

.products-quick-inquiry{
max-width: 1332px;
margin: 46px auto 0;
padding: 50px clamp(24px, calc(-6.206px + 3.928vw), 48px);
border-radius: 0;
background: #ffffff;
border: 1px solid rgba(42, 95, 190, 0.16);
box-shadow: none;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(24px, calc(13.931px + 1.309vw), 32px);
align-items: center;
}

.products-quick-inquiry-kicker{
display: block;
margin: 0 0 12px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 12.5px;
font-weight:700;
letter-spacing: 2.8px;
line-height: 1.3;
text-transform: uppercase;
}

.products-quick-inquiry h2{
margin: 0 0 14px;
color: #111111;
-webkit-text-fill-color: #111111;
font-size: clamp(25px, calc(19.966px + 0.655vw), 29px);
font-weight:700;
line-height: 1.4;
letter-spacing: -0.65px;
}

.products-quick-inquiry p{
margin: 18px 0 0;
color: var(--A-gray);
-webkit-text-fill-color: var(--A-gray);
font-size: clamp(16px, calc(10.966px + 0.655vw), 20px);
font-weight:600;
line-height: 1.7;
letter-spacing: -0.25px;
}

.products-quick-inquiry-actions{
display: flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: 12px;
flex-wrap: nowrap;
}

.products-quick-inquiry-btn{
min-width: 182px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 10px;
background: #6596D8;
border: 0;
outline: none;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
font-size: 16.5px;
font-weight:700;
letter-spacing: -0.2px;
transition: background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}

.products-quick-inquiry-btn svg{
width: 20px;
height: 20px;
flex: 0 0 20px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.products-quick-inquiry-btn.secondary,
.products-quick-inquiry-btn.secondary:visited{
background: var(--ks-white);
color: #6596D8;
-webkit-text-fill-color: #6596D8;
border: 1px solid rgba(21, 70, 168, 0.28);
}

.products-quick-inquiry-btn:hover,
.products-quick-inquiry-btn:focus-visible{
background: #6596D8;
border-color: #6596D8;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(101, 150, 216, 0.24);
}

.products-quick-inquiry-btn.secondary:hover,
.products-quick-inquiry-btn.secondary:focus-visible{
background: #6596D8;
border-color: #6596D8;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
box-shadow: 0 14px 28px rgba(101, 150, 216, 0.24);
}

.products-representative-carousel .product-scroll-showcase .product-card-u .thumb img,
.products-general-section .product-card-u .thumb img,
.products-industrial-section .product-card-u .thumb img,
.kspl-p2-gallery .js-kspl-tablet-mobile-lightbox{
cursor: zoom-in;
}

.kspl-products-lightbox{
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
background: rgba(18, 22, 28, 0.88);
}

.kspl-products-lightbox.is-open{
display: flex;
}

.kspl-products-lightbox img{
width: auto;
height: auto;
max-width: min(1120px, 92vw);
max-height: 86vh;
object-fit: cover;
border-radius: 0;
background: var(--ks-white);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

.kspl-products-lightbox-close{
position: fixed;
top: 20px;
right: 20px;
z-index: 100001;
width: 52px;
height: 52px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.36);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
color: transparent;
-webkit-text-fill-color: transparent;
font-size: 0;
line-height: 1;
text-align: center;
cursor: pointer;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
transition: transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.kspl-products-lightbox-close:hover{
transform: scale(1.05);
background: #ffffff;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.kspl-products-lightbox-close::before,
.kspl-products-lightbox-close::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 22px;
height: 2px;
border-radius: 999px;
background: #111111;
transform-origin: center;
}

.kspl-products-lightbox-close::before{
transform: translate(-50%, -50%) rotate(45deg);
}

.kspl-products-lightbox-close::after{
transform: translate(-50%, -50%) rotate(-45deg);
}

html body .hero h1,
html body .hero h1 *{
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
}

html body .hero .kicker{
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
border-color: rgba(26, 31, 36, 0.28);
border-bottom: 0;
padding-bottom: 0;
}

html body .products-hero-brand-sub{
font-family:"Pretendard",sans-serif;
margin: 10px 0 0;
font-size: 40px;
font-weight:850;
line-height: 1.2;
letter-spacing: -1.6px;
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
}


main > .product-unified.dark{
position: relative;
overflow: hidden;
background: #151719;
background-image: none;
color: var(--ks-white);
padding-top: 120px;
padding-bottom: 124px;
}

main > .product-unified.dark::before{
display: none;
content: none;
background: none;
background-image: none;
}

main > .product-unified.dark > .wrap{
position: relative;
z-index: 1;
}

main > .product-unified.dark .section-head{
max-width: 920px;
margin: 0 auto 58px;
text-align: center;
}


main > .product-unified.dark .section-head h2,
main > .product-unified.dark h2{
margin: 0 0 14px;
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
font-size: clamp(33px, calc(25.515px + 1.919vw), 52px);
font-weight:700;
line-height: 1.2;
letter-spacing: -1.8px;
text-align: center;
}

main > .product-unified.dark .section-head p,
main > .product-unified.dark .lead-white{
display: block;
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.72);
-webkit-text-fill-color: rgba(255, 255, 255, 0.72);
font-size: 18px;
font-weight:600;
line-height: 1.9;
letter-spacing: -0.2px;
text-align: center;
}

main > .product-unified.dark .products-representative-carousel{
max-width: 1380px;
}

main > .product-unified.dark .products-representative-carousel::before{
display: none;
content: none;
border: 0;
background: none;
box-shadow: none;
}

main > .product-unified.dark .products-representative-carousel .product-scroll-showcase{
overflow-x: auto;
overflow-y: hidden;
border-radius: 0;
background: var(--ks-white);
border: 0;
box-shadow: none;
}

main > .product-unified.dark .products-representative-carousel .product-scroll-showcase
.product-card-u,
main > .product-unified.dark .products-representative-carousel .product-scroll-showcase
.product-card-u:first-child{
background: var(--ks-white);
}

main > .product-unified.dark .products-representative-carousel .product-scroll-showcase:hover{
transform: none;
box-shadow: none;
border-color: transparent;
}

main > .product-unified.dark .products-carousel-arrow{
background: var(--ks-white);
border-color: rgba(255, 255, 255, 0.18);
color: var(--color-navy);
-webkit-text-fill-color: var(--color-navy);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}


main > .product-unified.dark .products-carousel-arrow:active,
main > .product-unified.dark .products-carousel-arrow.is-pressing{
background: var(--color-navy);
border-color: var(--color-navy);
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
}

main > .product-unified.dark .products-carousel-dots{
margin-top: 40px;
}

main > .product-unified.dark .products-carousel-dots button{
background: rgba(255, 255, 255, 0.42);
}

main > .product-unified.dark .products-carousel-dots button.is-active{
background: var(--ks-white);
}

html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
color: #111111;
-webkit-text-fill-color: #111111;
}

.kspl-philosophy-banner{
padding: 30px 0;
background: var(--ks-white);
}

.kspl-philosophy-banner .js-kspl-product-family-lightbox,
.kspl-philosophy-banner .js-products-brand-banner-lightbox{
cursor: zoom-in;
}

.kspl-philosophy-banner .wrap,
.kspl-philosophy-banner-img{
border-radius: 0;
}

.kspl-philosophy-banner.reveal{
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.kspl-philosophy-banner.reveal.is-visible{
opacity: 1;
transform: none;
}

.js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox img{
cursor: zoom-in;
}

.kspl-product-family-lightbox{
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: rgba(18, 22, 28, 0.88);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s ease, visibility 0.22s ease;
}

.kspl-product-family-lightbox.is-open{
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.kspl-product-family-lightbox-stage{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 70px 20px 38px;
}

.kspl-product-family-lightbox img{
width: auto;
max-width: none;
height: auto;
max-height: 86vh;
object-fit: cover;
border-radius: 0;
background: transparent;
box-shadow: none;
cursor: zoom-in;
}

.kspl-product-family-lightbox-close{
position: fixed;
top: 18px;
right: 18px;
z-index: 100001;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
background: rgba(0, 0, 0, 0.42);
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
font-size: 32px;
font-weight:600;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
}

body.kspl-product-family-lightbox-open{
overflow: hidden;
border-radius: var(--radius-xl);
}

.js-contact-brand-image{
opacity: 0;
transform: translateY(34px);
}

.js-contact-brand-image.is-visible{
animation: fadeUpKsplFinal 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.js-contact-brand-image.is-visible .kspl-philosophy-banner-img{
transform: none;
}

.products-philosophy-promise-banner{
margin-top: 56px;
margin-bottom: 36px;
}

.kspl-philosophy-banner .wrap{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
-webkit-mask-image: -webkit-radial-gradient(white, black);
transform: translateZ(0);
aspect-ratio: 2.2 / 1;
height: auto;
overflow: hidden;
border-radius: 0;
}

.kspl-philosophy-banner-img{
cursor: zoom-in;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}

html body .hero .kicker,
html body .case-hero .case-kicker,
html body .archive-hero .archive-kicker{
display: inline-block;
margin: 0 0 18px 0;
padding: 0;
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
font-size: 13.5px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 3.2px;
text-transform: uppercase;
border-bottom: 0;
}

html body .hero h1,
html body .contact-brand-title,
html body .case-hero h1,
html body .archive-hero h1,
html body .archive-submark{
margin-top: 0;
margin-bottom: 0;
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
font-size: 92px;
font-weight: 850;
line-height: 1.1;
letter-spacing: -4px;
}

html body .hero h1 *,
html body .contact-brand-title *,
html body .case-hero h1 *,
html body .archive-hero h1 *,
html body .archive-submark *{
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
}

html body .index-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
margin: 10px 0 0;
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
font-size: 40px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -1.6px;
}

html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span,
html body .case-hero-note,
html body .case-hero-note span,
html body .archive-note,
html body .archive-note span,
html body .archive-note-desktop,
html body .archive-note-desktop span,
html body .archive-note-mobile,
html body .archive-note-mobile span{
font-family:"Paperlogy","Pretendard",sans-serif;
color: #111111;
-webkit-text-fill-color: #111111;
font-size: 20px;
font-weight: 450;
line-height: 1.7;
letter-spacing: -0.15px;
text-shadow: none;
}

html body .hero-message,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .case-hero-note,
html body .archive-note,
html body .archive-note-desktop,
html body .archive-note-mobile{
font-family:"Paperlogy","Pretendard",sans-serif;
max-width: 650px;
margin-top: 130px;
}

.kspl-p2-section{
padding: 84px 0;
background: var(--color-white, #fff);
}

.kspl-p2-section.kspl-p2-soft{
background: var(--ks-white);
}

.kspl-p2-wrap{
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}

.kspl-p2-head{
max-width: 1040px;
margin: 0 auto 34px;
text-align: center;
}

.kspl-p2-head .kspl-p2-kicker,
.kspl-p2-head h2,
.kspl-p2-head p{
text-align: center;
margin-left: auto;
margin-right: auto;
}

.kspl-p2-kicker{
display: inline-block;
margin: 0 0 14px;
padding-bottom: 8px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 13px;
font-weight:700;
letter-spacing: 2.7px;
line-height: 1.3;
text-transform: uppercase;
border-bottom: 1px solid #E8EBEF;
}

.kspl-p2-head h2{
margin: 0 0 14px;
color: #111111;
font-size: clamp(28px, calc(10.380px + 2.291vw), 42px);
font-weight:700;
line-height: 1.38;
letter-spacing: -1.05px;
}

.kspl-p2-head p{
margin: 0;
max-width: 760px;
color: #666666;
font-size: 19px;
font-weight:600;
line-height: 1.9;
}

.kspl-p2-figure{
overflow: hidden;
border-radius: 0;
background: #fff;
box-shadow: none;
}

.kspl-p2-figure img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
opacity: 1;
}

.kspl-p2-grid-2 .kspl-p2-figure:first-child,
.kspl-p2-grid-2 .kspl-p2-figure:last-child{
min-height: 420px;
}

.kspl-p2-gallery{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.kspl-p2-gallery .kspl-p2-figure{
aspect-ratio: 4 / 3;
min-height: 0;
}

.kspl-p2-gallery.js-kspl-gallery-reveal.is-reveal-ready .kspl-p2-figure{
opacity: 0;
transform: translateY(18px);
transition: opacity .62s cubic-bezier(0.22, 1, 0.36, 1), transform .62s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}

.kspl-p2-gallery.js-kspl-gallery-reveal.is-visible .kspl-p2-figure{
opacity: 1;
transform: translateY(0);
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(1){
transition-delay: 0s;
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(2){
transition-delay: .08s;
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(3){
transition-delay: .16s;
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(4){
transition-delay: .24s;
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(5){
transition-delay: .32s;
}

.kspl-p2-gallery.js-kspl-gallery-reveal .kspl-p2-figure:nth-child(6){
transition-delay: .40s;
}









.kspl-p2-archive-hero-photo .kspl-p2-figure{
border-radius: 0;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

html body .hero{
position: relative;
overflow: hidden;
border-radius: 0;
background: var(--ks-white);
isolation: isolate;
}

html body .hero::after{
display: none;
content: none;
}

html body .hero > .wrap.inner,
html body .hero .inner,
html body .hero .inner > div{
position: relative;
z-index: 2;
transform: none;
}

html body .hero .kicker.products,
html body .hero .kicker{
visibility: visible;
transform: translateY(18px);
animation: aboutPhilosophyFadeUp 1.0s ease-out .30s both;
}

html body .hero h1{
color: var(--ks-text-main);
-webkit-text-fill-color: var(--ks-text-main);
font-size: 92px;
font-weight: 900;
line-height: 1.1;
letter-spacing: -4px;
visibility: visible;
transform: translateY(18px);
animation: aboutPhilosophyTitleUp 1.10s ease-out .58s both;
}

html body .hero .products-hero-brand-sub{
font-family:"Pretendard",sans-serif;
visibility: visible;
transform: translateY(24px);
animation: aboutPhilosophyFadeUp 1.00s ease-out .86s both;
}

html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
opacity: 1;
visibility: visible;
transform: none;
}

html body .hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
opacity: 0;
transform: translateY(26px);
animation: fadeUpKsplFinal 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes aboutPhilosophyBgSettle{
from{
opacity: 0;
transform: translateY(26px) scale(1.015);
}

to{
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes aboutPhilosophyBgSettleMobile{
from{
opacity: 0;
}

to{
opacity: 1;
}
}

@keyframes aboutPhilosophyFadeUp{
from{
opacity: 0;
transform: translateY(18px);
}

to{
opacity: 1;
transform: translateY(0);
}
}

@keyframes aboutPhilosophyTitleUp{
from{
opacity: 0;
transform: translateY(30px);
}

to{
opacity: 1;
transform: translateY(0);
}
}

@keyframes aboutPhilosophyTitleUpMobile{
from{
opacity: 0;
transform: translateY(26px);
}

to{
opacity: 1;
transform: translateY(0);
}
}

html body .hero > .inner .kicker,
html body .hero .hero-copy > .kicker,
html body .case-hero .case-kicker,
html body .archive-hero .archive-kicker{
display: inline-block;
margin: 0 0 18px 0;
padding: 0;
color: #1a1f24;
-webkit-text-fill-color: #1a1f24;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 3.2px;
line-height: 1.4;
text-transform: uppercase;
text-shadow: none;
border: 0;
border-bottom: 0;
background: transparent;
}

/* ==================================================
   DESKTOP
================================================== */


/* ==================================================
   TABLET LANDSCAPE
================================================== */


/* ==================================================
   TABLET PORTRAIT
================================================== */


/* ==================================================
   MOBILE
================================================== */


/* ==================================================
   REDUCED MOTION
================================================== */


.products-mobile-notice-final p{
margin: 0;
}


/* ==================================================
   PRODUCTS CAROUSEL SHADOW HOVER
   Shadow feedback only / No movement / No scale
================================================== */

.products-representative-carousel .product-card-u{
transition: box-shadow .22s ease, border-color .22s ease;
}

.products-representative-carousel .product-card-u:hover{
box-shadow: 0 16px 42px rgba(13, 30, 61, 0.09);
border-color: rgba(13, 30, 61, 0.11);
}

/* mobile text wrap control */

.nowrap{
white-space: nowrap;
}

/* Mobile / portrait tablet banner images only */


/* =========================================================
   PC START
   1281px 이상
========================================================= */


/* =========================================================
   PRODUCTS CONTENT BANNERS — CONSOLIDATED
========================================================= */
.products-brand-banner{
  width:100%;
  margin:0;
  padding:0;
  background:var(--ks-white);
}
.products-brand-banner.products-philosophy-promise-banner{
  margin-top:56px;
  margin-bottom:36px;
}
.products-brand-banner.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease, transform .8s ease;
}
.products-brand-banner.reveal.is-visible{
  opacity:1;
  transform:none;
}
.products-brand-banner + .products-general-section{
  padding-top:66px;
}
.products-brand-banner .wrap{
  width:100%;
  max-width:1380px;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  box-sizing:border-box;
  aspect-ratio:2.2 / 1;
  height:auto;
  overflow:hidden;
  border-radius:0;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  transform:translateZ(0);
}
.products-brand-banner-img,
.products-brand-banner img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  border:0;
  border-radius:0;
  transform:none;
  cursor:zoom-in;
}





/* =========================================================
   CASE LIGHTBOX DETAIL — MASTER TEST / CASE 01
   Existing image-only lightbox remains unchanged for all
   cards except items marked data-lightbox-detail="true".
   ========================================================= */

/* ARCHIVE CASE LIGHTBOX — EXACT SHARED SYSTEM */

.kspl-case-lightbox-trigger{
cursor: zoom-in;
}

.kspl-case-lightbox{
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
background: rgba(18, 22, 28, 0.88);
}

.kspl-case-lightbox.is-open{
display: flex;
}

.kspl-case-lightbox img{
display: block;
max-width: min(1180px, 94vw);
max-height: 86vh;
width: auto;
height: auto;
object-fit: cover;
overflow: hidden;
border-radius: 0;
background: #ffffff;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.kspl-case-lightbox-close{
position: fixed;
top: 16px;
right: 16px;
z-index: 100001;
width: 38px;
height: 38px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #111;
-webkit-text-fill-color: #111;
font-size: 29px;
line-height: 38px;
text-align: center;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

body.kspl-case-lightbox-open{
overflow: hidden;
border-radius: var(--radius-xl);
}

.kspl-case-lightbox-stage{
display:flex;
  align-items:stretch;
  justify-content:center;
  max-width:min(1180px,94vw);
  max-height:86vh;
  box-sizing:border-box;
}

.kspl-case-lightbox-media{
display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.kspl-case-lightbox-detail{
display:none;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-stage{
width:min(1180px,94vw);
  min-height:min(680px,82vh);
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 24px 70px rgba(0,0,0,0.36);
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-media{
flex:0 0 67%;
  background:#ffffff;
  overflow:hidden;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-media img{
width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  background:#ffffff;
  box-shadow:none;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-detail{
flex:1 1 33%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:52px 44px 48px;
  box-sizing:border-box;
  background:#f6f7f9;
  color:#111111;
  font-family:"Pretendard",sans-serif;
}

.kspl-case-lightbox-kicker{
margin:0 0 14px;
  color:#6d7785;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.15em;
}

.kspl-case-lightbox-title{
margin:0;
  color:#111111;
  font-family:"Paperlogy","Pretendard",sans-serif;
  font-size:clamp(25px,2.1vw,34px);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.045em;
}

.kspl-case-lightbox-subtitle{
margin:12px 0 0;
  color:#5f6874;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:-.025em;
}

.kspl-case-lightbox-rule{
display:block;
  width:100%;
  height:1px;
  margin:28px 0 6px;
  background:#dfe3e8;
}

.kspl-case-lightbox-info{
display:flex;
  flex-direction:column;
}

.kspl-case-lightbox-info-row{
padding:19px 0 18px;
  border-bottom:1px solid #e3e6ea;
}

.kspl-case-lightbox-info-row:last-child{
border-bottom:0;
}

.kspl-case-lightbox-info-row[hidden]{
display:none;
}

.kspl-case-lightbox-info-label{
display:block;
  margin:0 0 7px;
  color:#77818e;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.13em;
}

.kspl-case-lightbox-info-value{
margin:0;
  color:#252b33;
  font-size:14px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:-.025em;
  word-break:keep-all;
}

/* MATERIAL · APPLICATION · FEATURE */
.kspl-data-section{
  background:#fff;
}
.kspl-data-head{
  margin-bottom:42px;
}
.kspl-data-head h2{
  margin:10px 0 0;
  font-size:clamp(36px,2.8vw,48px);
  line-height:1.28;
  letter-spacing:-1px;
}
.kspl-data-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
.kspl-data-item{
  min-width:0;
  padding:34px 30px 36px;
}
.kspl-data-item + .kspl-data-item{
  border-left:1px solid #e5e7eb;
}
.kspl-data-item-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:24px;
}
.kspl-data-item-head > span{
  color:#8a94a3;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
}
.kspl-data-item-head h3{
  margin:0;
  color:#111;
  font-size:24px;
  line-height:1.35;
  letter-spacing:-.45px;
}
.kspl-data-item dl,
.kspl-data-item dd{
  margin:0;
}
.kspl-data-item dl > div{
  padding:15px 0 14px;
  border-top:1px solid #eceef1;
}
.kspl-data-item dt{
  margin:0 0 7px;
  color:#7b8593;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.25px;
}
.kspl-data-item dd{
  color:#30343a;
  font-size:16px;
  line-height:1.68;
}
.kspl-data-bottom{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:48px;
  margin-top:30px;
}
.kspl-data-bottom .kspl-data-archive-link{
  margin-top:0;
}
.kspl-b2b-guide{
  max-width:760px;
  justify-self:end;
  padding-left:28px;
  border-left:1px solid #d9dde3;
}
.kspl-b2b-guide strong{
  display:block;
  margin:0 0 9px;
  color:#b84646;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.25px;
}
.kspl-b2b-guide p{
  margin:0;
  color:#6d737c;
  font-size:14px;
  font-weight:500;
  line-height:1.75;
  letter-spacing:-.2px;
  word-break:keep-all;
}
.kspl-b2b-guide b{
  color:#3f4650;
  font-weight:700;
}

.kspl-data-archive-link{
  min-width:190px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:30px;
  padding:0 18px;
  box-sizing:border-box;
  border-radius:8px;
  background:#6596D8;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:-.15px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kspl-data-archive-link span{
  transition:transform .22s ease;
}
.kspl-data-archive-link:hover,
.kspl-data-archive-link:focus-visible{
  background:#4f83c9;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(101,150,216,.24);
}
.kspl-data-archive-link:hover span{
  transform:translateX(3px);
}

.kspl-products-data-section{
  padding:92px 0 96px;
  background:#f7f8fa;
}

@media (min-width: 1281px) {

/* SECTION VERTICAL BREATHING +10px — body sections only */
main > .product-unified.dark,
.kspl-p2-section.kspl-p2-soft,
.products-general-section,
.products-brand-banner,
.products-industrial-section,
.products-industries,
.quick-check-section{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}


  .products-carousel-arrow:hover{
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--ks-white);
    -webkit-text-fill-color: var(--ks-white);
  }

  main > .product-unified.dark .products-carousel-arrow:hover{
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--ks-white);
    -webkit-text-fill-color: var(--ks-white);
  }

  .products-general-section > .wrap,
.products-industrial-section > .wrap{
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .products-general-section .section-head,
.products-industrial-section .section-head,
.products-general-section .product-grid-unified,
.products-industrial-section .product-grid-unified{
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .products-general-section .product-grid-unified,
.products-industrial-section .product-grid-unified{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 40px;
  }

  .products-general-section .product-card-u,
.products-industrial-section .product-card-u{
    padding: 0 12px 34px;
    gap: 8px;
  }

  .products-general-section .product-card-u .thumb,
.products-industrial-section .product-card-u .thumb{
    height: 380px;
    margin: 0 0 8px;
  }

  .products-general-section .product-card-u .thumb img,
.products-industrial-section .product-card-u .thumb img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 370px;
  }

  .kspl-final-process{
    margin: 107px auto 0;
    padding: 0 24px 110px;
    text-align: center;
  }

  .kspl-final-process h2{
    white-space: normal;
    font-size: clamp(64px, calc(15.812px + 3.762vw), 76px);
    font-weight:700;
    line-height: 0.92;
    letter-spacing: 0.04em;
    margin: 0;

text-transform: none;}

  .kspl-final-process p{
font-size: 44px;
    font-weight:700;
    line-height: 1.15;
    letter-spacing: -1.4px;
    margin: 22px 0 0;
}

  .quick-check-grid{
    grid-template-columns: repeat(5, 1fr);
  }

  .products-industries{
    padding-top: 108px;
    padding-bottom: 72px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #ffffff;
  }

  .products-industries::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .products-industries > .wrap{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .quick-check-section{
    padding-top: 80px;
  }

  .quick-check-section > .wrap{
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .quick-check-section .quick-check-grid{
    width: 100%;
    max-width: 1332px;
  }

  html body .hero::before{
    content: "";
    display: block;
    position: absolute;
    inset: -32px 0 -32px 0;
    z-index: 0;
    pointer-events: none;
    background: url("a3.webp") 58% center / cover no-repeat var(--ks-white);
    transform-origin: center center;
    animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
  }

  .kspl-product-family-lightbox{
    display: none;
  }

  .kspl-p2-wrap{
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .kspl-p2-head{
    max-width: 1040px;
  }

  .kspl-p2-head h2{
    max-width: 1040px;
    font-size: clamp(42px, calc(25.937px + 1.254vw), 46px);
    line-height: 1.38;
    letter-spacing: -1.05px;
  }

  .kspl-p2-head p{
    font-size: 20px;
    line-height: 1.8;
  }

  .kspl-p2-gallery{
    gap: 24px;
  }

  .hero{
    min-height: calc(100vh - 92px);
    background: var(--ks-white);
    position: relative;
  }

  .hero::after{
    display: none;
    content: none;
  }

  .products-representative-carousel .product-scroll-showcase{
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .product-unified.dark{
    position: relative;
    overflow: hidden;
    background: #151719;
  }

  .product-unified.dark::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

  .product-unified.dark > .wrap{
    position: relative;
    z-index: 1;
  }

  .products-representative-carousel .product-scroll-showcase:hover{
    transform: translateY(-3px);
    box-shadow: none;
    border-color: rgba(92, 143, 214, 0.3);
  }


  .products-quick-inquiry{
    width: 100%;
    max-width: 1380px;
    margin-top: 92px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 88px;
    padding-right: 88px;
    box-sizing: border-box;
    display: grid;
    visibility: visible;
    opacity: 1;
  }

  .products-quick-inquiry-actions{
    display: flex;
    visibility: visible;
    opacity: 1;
  }


.products-brand-banner .wrap{max-width:1380px;}
}

/* =========================================================
   PC END
========================================================= */


/* =========================================================
   TABLET LANDSCAPE START
   981px ~ 1280px
========================================================= */

@media (min-width: 981px) and (max-width: 1280px) {
/* SECTION VERTICAL BREATHING +10px — body sections only */
main > .product-unified.dark,
.kspl-p2-section.kspl-p2-soft,
.products-general-section,
.products-brand-banner,
.products-industrial-section,
.products-industries,
.quick-check-section{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}

  /* Tablet landscape 1240px optical axis — PRODUCTS specific wrappers */
  .quick-check-grid,
.products-representative-carousel,
main > .product-unified.dark .products-representative-carousel,
.kspl-philosophy-banner .wrap,
.products-brand-banner .wrap,
.products-general-section > .wrap,
.products-industrial-section > .wrap,
.products-industries > .wrap,
.quick-check-section > .wrap,
.kspl-p2-wrap,
.products-quick-inquiry{
    max-width: 1240px;
  }

  .products-carousel-arrow:hover{
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--ks-white);
    -webkit-text-fill-color: var(--ks-white);
  }

  main > .product-unified.dark .products-carousel-arrow:hover{
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--ks-white);
    -webkit-text-fill-color: var(--ks-white);
  }

  .kspl-product-family-lightbox{
    display: none;
  }

  .kspl-closing-dark .kspl-final-process{
    margin-top: 96px;
    padding-bottom: 110px;
    margin-bottom: 0;
  }

  .quick-check-grid{
    grid-template-columns: repeat(5, 1fr);
  }

  .products-industries{
    padding-top: 104px;
    padding-bottom: 0px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #ffffff;
  }

  .products-industries::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .products-industries > .wrap{
    position: relative;
    z-index: 1;
  }

  .kspl-final-process h2{
font-size: clamp(56px, calc(29.753px + 2.676vw), 64px);
    font-weight:700;
    line-height: 0.98;
    letter-spacing: 0.04em;
    margin: 0;

text-transform: none;}

  .kspl-final-process p{
font-size: 37px;
    font-weight:700;
    line-height: 1.18;
    letter-spacing: -1px;
    margin: 18px 0 0;
}

  .quick-check-section{
    padding-top: 48px;
  }

  html body .hero h1{
    font-size: 72px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -3px;
  }

  html body .products-hero-brand-sub{
font-family:"Pretendard",sans-serif;
    margin-top: 22px;
    font-size: 34px;
    font-weight:850;
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  html body .hero h1,
html body .contact-brand-title,
html body .case-hero h1,
html body .archive-hero h1,
html body .archive-submark{
    font-size: 72px;
    line-height: 1.1;
    letter-spacing: -3px;
  }

  html body .index-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 9px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  html body .hero .inner,
html body .case-hero .inner,
html body .archive-hero .inner{
    min-height: calc(100vh - 86px);
    padding-top: 36px;
  }

  html body .index-hero-brand-sub,
html body .about-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 9px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    margin-top: 52px;
    transform: none;
  }

  html body .hero{
    background: var(--ks-white);
    background-image: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  overflow: hidden;
}

  html body .hero::before{
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("tablet-landscapeproducts.webp") right center / cover no-repeat var(--ks-white);
    transform-origin: center center;
    animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
  }

  .kspl-p2-wrap{
    width: min(1240px, calc(100% - 48px));
  }

  .kspl-p2-head{
    max-width: 1040px;
  }

  .kspl-p2-head h2{
    max-width: 1040px;
    font-size: clamp(39px, calc(29.157px + 1.003vw), 42px);
    line-height: 1.38;
    letter-spacing: -1.05px;
  }

  .kspl-p2-head p{
    font-size: 20px;
    line-height: 1.8;
  }

  .kspl-p2-gallery{
    gap: 24px;
  }

  .hero::after{
    display: none;
    content: none;
  }

  .products-representative-carousel .product-scroll-showcase{
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .product-unified.dark{
    position: relative;
    overflow: hidden;
    background: #151719;
  }

  .product-unified.dark::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

  .product-unified.dark > .wrap{
    position: relative;
    z-index: 1;
  }

  .products-representative-carousel .product-scroll-showcase:hover{
    transform: translateY(-3px);
    box-shadow: none;
    border-color: rgba(92, 143, 214, 0.3);
  }

  .wrap{
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero .inner > div:first-child{
    max-width: 560px;
    width: 100%;

  }

  .hero .kicker,
.kicker{
    font-size: 13px;
    letter-spacing: 2.8px;
  }

  .hero-message,
.hero-message span,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 450;
  }

  .section,
.product-unified{
    padding-top: 142px;
    padding-bottom: 142px;
  }

  .products-general-section{
    padding-bottom: 112px;
  }

  .products-industrial-section{
    padding-top: 108px;
    padding-bottom: 92px;
  }

  h2,
.section-head h2,
.section-title,
.head-center h2{
    font-size: clamp(35px, calc(21.876px + 1.338vw), 39px);
    line-height: 1.3;
    letter-spacing: -1px;
  }

  .product-grid,
.product-grid-unified,
.cards4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-industries .cards4 .card:not(:nth-child(3n/**/+1))::before{
    display: none;
  }

  .products-industries .cards4 .card:nth-child(even)::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(13,30,61,.12) 18%, rgba(13,30,61,.12) 82%, transparent);
  }

  .products-industries .cards4 .card:nth-child(n/**/+3)::after{
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(13,30,61,.08) 20%, rgba(13,30,61,.08) 80%, transparent);
  }

  .hero h1{
    margin-bottom: 22px;
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: -1.4px;
  }

  .hero-message,
.hero-message-animate,
html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    max-width: 500px;
  }

  main > .product-unified.dark{
    padding-top: 148px;
    padding-bottom: 142px;
  }

  main > .product-unified.dark .section-head{
    margin-bottom: 54px;
  }

  main > .product-unified.dark .section-head h2,
main > .product-unified.dark h2{
    font-size: clamp(39px, calc(29.157px + 1.003vw), 42px);
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  /* TOP HERO MUST REMAIN FULL-BLEED */
  .hero{
    min-height: calc(100vh - 86px);
    background: var(--ks-white);
    position: relative;
    background-size: cover;
    background-position: 68% 58%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  box-sizing: border-box;
    max-width: none;
}

  .products-quick-inquiry{
    width: calc(100% - 44px);
    max-width: none;
    margin: 104px auto 0;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
    display: grid;
    visibility: visible;
    opacity: 1;
  }

  .products-quick-inquiry-actions{
    display: flex;
    visibility: visible;
    opacity: 1;
  }

  .js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox img,
.kspl-philosophy-banner .js-products-brand-banner-lightbox{
    cursor: zoom-in;
  }

  /* RESPONSIVE CONTENT BANNER ALIGNMENT */
  .kspl-philosophy-banner .wrap{
    width: calc(100% - 44px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

.products-brand-banner.products-philosophy-promise-banner{
    margin-top:8px;
    margin-bottom:18px;
  }
  .products-brand-banner .wrap{
    width:calc(100% - 48px);
    max-width:1240px;
  }
  .products-brand-banner + .products-general-section{padding-top:36px;}


  .kspl-data-head{margin-bottom:36px;}
  .kspl-data-item{padding:28px 22px 30px;}
  .kspl-data-item-head{gap:11px;margin-bottom:20px;}
  .kspl-data-item-head h3{font-size:21px;}
  .kspl-data-item dd{font-size:15px;line-height:1.62;}

  .kspl-products-data-section{padding:82px 0 86px;}
}

/* =========================================================
   TABLET LANDSCAPE END
========================================================= */


/* =========================================================
   TABLET PORTRAIT START
   769px ~ 980px
========================================================= */

@media (min-width: 769px) and (max-width: 980px) {
  .hero::after{
    display: none;
    content: none;
  }

  .products-representative-carousel .product-scroll-showcase{
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .product-unified.dark{
    position: relative;
    overflow: hidden;
    background: #151719;
  }

  .product-unified.dark::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

  .product-unified.dark > .wrap{
    position: relative;
    z-index: 1;
  }

  .products-industries{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #ffffff;
  }

  .products-industries::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .products-industries > .wrap{
    position: relative;
    z-index: 1;
  }

  .quick-check-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 0;
    max-width: 760px;
  }

  .quick-check-grid::before{
    display: none;
  }

  .quick-check-card{
    padding: 0 28px;
  }

  .quick-check-card:nth-child(even){
    border-left: 1px solid rgba(13,30,61,.10);
  }

  .quick-check-card:last-child{
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
    box-sizing: border-box;
  }

  .section.quick-check-section{
    padding-bottom: 158px;
    padding-top: 130px;
}

  .products-archive-guide-text,
.products-archive-cta-wrap{
    transform: translateY(65px);
  }

  .kspl-closing-dark .kspl-final-process{
    margin-top: 96px;
    padding-bottom: 110px;
  }

  .kspl-final-process h2{
font-size: clamp(45px, calc(4.910px + 5.213vw), 56px);
    font-weight:700;
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0;

text-transform: none;}

  .kspl-final-process p{
font-size: 32px;
    font-weight:700;
    line-height: 1.22;
    letter-spacing: -0.9px;
    margin: 18px 0 0;
}

  .products-representative-carousel .product-scroll-showcase:hover{
    transform: translateY(-3px);
    box-shadow: none;
    border-color: rgba(92, 143, 214, 0.3);
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u,
.products-representative-carousel .product-scroll-showcase .product-card-u:first-child{
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 34px;
    min-height: 402px;
    padding: 38px 46px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u .thumb{
    height: 270px;
    min-height: 270px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u .thumb img,
.product-unified.dark .products-representative-carousel .product-scroll-showcase .product-card-u
  .thumb img{
    max-height: 260px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u > div:last-child{
    max-width: 430px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u h3{
    display: block;
    min-height: 0;
    margin: 0 0 12px;
    font-size: 32px;
    font-weight:600;
    line-height: 1.32;
    letter-spacing: -0.9px;
    text-align: left;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u h3 .eng{
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight:600;
    line-height: 1.45;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u p{
    min-height: 0;
    font-size: 18px;
    font-weight:600;
    line-height: 1.65;
    letter-spacing: -0.35px;
  }

  .products-representative-carousel .product-scroll-showcase .product-spec-chips{
    gap: 0;
    margin-top: 16px;
  }

  .products-representative-carousel .product-scroll-showcase .product-spec-chip{
    padding: 0 14px;
    font-size: 14px;
    font-weight:600;
    line-height: 1.5;
  }

  .products-representative-carousel .product-scroll-showcase .product-case-links{
    gap: 10px;
    margin-top: 20px;
  }

  .products-representative-carousel .product-scroll-showcase .product-case-item{
    min-height: 44px;
    padding: 0 14px;
  }

  .products-carousel-arrow{
    width: 44px;
    height: 44px;
    font-size: 30px;
  }

  .kspl-p2-head h2{
    font-size: clamp(28px, calc(2.488px + 3.318vw), 35px);
    line-height: 1.38;
    letter-spacing: -1px;
  }

  .kspl-p2-head p{
    font-size: 18px;
    line-height: 1.8;
  }

  html body .hero h1{
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2.5px;
  }

  html body .products-hero-brand-sub{
font-family:"Pretendard",sans-serif;
    margin-top: 20px;
    font-size: 30px;
    font-weight:850;
    line-height: 1.3;
    letter-spacing: -1.1px;
  }

  .kspl-products-lightbox.is-brand-banner{
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    background: rgba(18, 22, 28, 0.88);
  }

  .kspl-products-lightbox.is-brand-banner img{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: calc(100dvh - 96px);
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .kspl-product-family-lightbox-stage{
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 78px 26px 44px;
  }

  .kspl-product-family-lightbox img{
    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 86vh;
  }

  .products-philosophy-promise-banner{
    padding-top: 44px;
    padding-bottom: 30px;
  }

  html body .hero h1,
html body .contact-brand-title,
html body .case-hero h1,
html body .archive-hero h1,
html body .archive-submark{
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -3px;
  }

  html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span,
html body .case-hero-note,
html body .case-hero-note span,
html body .archive-note,
html body .archive-note span,
html body .archive-note-desktop,
html body .archive-note-desktop span,
html body .archive-note-mobile,
html body .archive-note-mobile span{
font-family:"Paperlogy","Pretendard",sans-serif;
    font-size: 18px;
    line-height: 1.7;
  }

  html body .index-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -1.1px;
  }

  

  html body .hero,
html body .case-hero,
html body .archive-hero{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: calc(100vh - 86px);
  }

  html body .hero .inner,
html body .case-hero .inner,
html body .archive-hero .inner{
    min-height: calc(100vh - 86px);
    padding-top: 56px;
  }

  html body .index-hero-brand-sub,
html body .about-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -1.1px;
  }

  .products-quick-inquiry p{
    white-space: nowrap;
  }

  html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    margin-top: 68px;
    transform: translateY(-7px);
  }

  html body .hero{
    background: var(--ks-white);
    background-image: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  overflow: hidden;
}

  html body .hero::before{
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("tablet-products.webp") center 75% / 950px auto no-repeat var(--ks-white);
    transform-origin: center center;
    animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
  }

  html body{
    padding-top: 86px;
  }

  .wrap{
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero .inner > div:first-child{
    max-width: 560px;
    width: 100%;
  }

  .hero .kicker,
.kicker{
    font-size: 13px;
    letter-spacing: 2.8px;
  }

  .hero-message,
.hero-message span,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 450;
  }

  .section,
.product-unified{
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .products-general-section{
    padding-bottom: 84px;
  }

  .products-industrial-section{
    padding-top: 88px;
    padding-bottom: 84px;
  }

  h2,
.section-head h2,
.section-title,
.head-center h2{
    font-size: clamp(33px, calc(11.133px + 2.844vw), 39px);
    line-height: 1.3;
    letter-spacing: -1px;
  }

  .product-grid,
.product-grid-unified,
.cards4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero > .wrap.inner,
.hero .inner{
    min-height: calc(100vh - 86px);
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .hero h1{
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: -1.4px;
    margin-bottom: 22px;
  }

  .hero-message,
.hero-message-animate,
html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    max-width: 500px;
  }

  main > .product-unified.dark{
    padding-top: 96px;
    padding-bottom: 96px;
  }

  main > .product-unified.dark .section-head{
    margin-bottom: 42px;
  }

  main > .product-unified.dark .section-head h2,
main > .product-unified.dark h2{
    font-size: clamp(33px, calc(0.199px + 4.265vw), 42px);
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  .kspl-philosophy-banner{
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* TOP HERO MUST REMAIN FULL-BLEED */
  .hero{
    min-height: calc(100vh - 86px);
    background: var(--ks-white);
    position: relative;
    background-position: 68% 58%;
    background-size: cover;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  box-sizing: border-box;
  overflow: hidden;
    max-width: none;
}

  .products-quick-inquiry{
    width: calc(100% - 44px);
    max-width: 860px;
    margin-top: 72px;
    display: grid;
    visibility: visible;
    opacity: 1;
  }

  .products-quick-inquiry-actions{
    display: flex;
    visibility: visible;
    opacity: 1;
  }

  .kspl-p2-section{
    padding: 88px 0 84px;
  }

  .kspl-p2-wrap{
    width: min(100% - 44px, 1380px);
  }

  .kspl-p2-grid-2,
.kspl-p2-case-feature{
    grid-template-columns: 1fr;
  }

  .kspl-p2-gallery{
    grid-template-columns: repeat(2, 1fr);
  }

  .js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox img,
.kspl-philosophy-banner .js-products-brand-banner-lightbox{
    cursor: zoom-in;
  }

  /* RESPONSIVE CONTENT BANNER ALIGNMENT */
  .kspl-philosophy-banner .wrap{
    width: calc(100% - 44px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid rgba(13, 30, 61, 0.10);
  }

.products-brand-banner{padding:10px 0;}
  .products-brand-banner.products-philosophy-promise-banner{
    margin-top:34px;
    margin-bottom:24px;
  }
  .products-brand-banner .wrap{
    width:calc(100% - 40px);
    max-width:none;
    aspect-ratio:3 / 2;
    border:1px solid rgba(13,30,61,.10);
  }
  .products-brand-banner-img[src="productspage.webp"]{content:url("productspage-mobile.webp");}
  .products-brand-banner-img[src="philosophy-promise.webp"]{content:url("philosophy-promise-mobile.webp");}
  .products-brand-banner + .products-general-section{padding-top:42px;}


  .kspl-data-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kspl-data-bottom{
    grid-template-columns:1fr;
    gap:30px;
  }
  .kspl-b2b-guide{
    max-width:none;
    justify-self:stretch;
    padding:22px 0 0;
    border-left:0;
    border-top:1px solid #d9dde3;
  }
  .kspl-data-item{padding:26px 24px 28px;}
  .kspl-data-item + .kspl-data-item{border-left:0;border-top:0;}
  .kspl-data-item:nth-child(even){border-left:1px solid #e5e7eb;}
  .kspl-data-item:nth-child(n+3){border-top:1px solid #e5e7eb;}
  .kspl-data-item-head{gap:11px;margin-bottom:16px;}
  .kspl-data-item-head h3{font-size:20px;}
  .kspl-data-item dl > div{padding:12px 0 11px;}
  .kspl-data-item dt{font-size:11px;letter-spacing:1px;}
  .kspl-data-item dd{font-size:14px;line-height:1.6;}

  .kspl-products-data-section{padding:72px 0 76px;}









.kspl-case-lightbox.has-detail .kspl-case-lightbox-stage{
width:min(900px,94vw);
      min-height:min(590px,78vh);
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-media{
flex-basis:62%;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-detail{
flex-basis:38%;
      padding:42px 32px 38px;
}
}

/* =========================================================
   TABLET PORTRAIT END
========================================================= */


/* =========================================================
   MOBILE START
   768px 이하
========================================================= */

@media (max-width: 768px) {
  .kspl-p2-grid-2,
.kspl-p2-case-feature{
    grid-template-columns: 1fr;
  }

  .js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox img,
.kspl-philosophy-banner .js-products-brand-banner-lightbox{
    cursor: zoom-in;
  }

  html,
body{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  body{word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
  }

  .wrap{
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 .text-blue{
    font-size: inherit;
    font-weight: 800;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
    display: block;
    visibility: visible;
    opacity: 0;
    transform: translateY(26px);
    animation: fadeUpKsplFinal 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transition: none;
  }

  .hero-button-spacer{
    display: none;
  }

  .hero + .section,
.hero + .product-unified{
    margin-top: 0;
    padding-top: 42px;
  }

  .section,
.product-unified{
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .products-general-section{
    padding-bottom: 40px;
  }

  .products-industrial-section{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section-head,
.head-center{
    margin-bottom: 26px;
  }

  .product-unified .section-head h2,
.product-unified .head-center h2,
.product-unified h2,
.section-head h2,
h2{
    font-size: clamp(29px, calc(24.873px + 1.058vw), 33px);
    line-height: 1.4;
    letter-spacing: -0.7px;
  }

  .lead,
.lead-white,
.section-head p,
.card p,
.section .tag,
.section-head .tag,
.product-unified .tag,
.head-center .tag{
    font-size: 14px;
    letter-spacing: 3px;
  }

  .section-head p,
.card p{
    font-size:15px;
    letter-spacing: 3px;
  }

  .products-general-section .product-grid-unified,
.products-industrial-section .product-grid-unified{
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
  }

  .product-card-u{
    padding: 8px 4px 24px;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid rgba(13, 30, 61, 0.09);
    border-radius: 0;
    align-items: stretch;
    scroll-margin-top: 130px;
  }

  .product-card-u .thumb{
    height: 156px;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-card-u .thumb img,
.product-unified.dark .product-card-u .thumb img,
.product-unified.white .product-card-u .thumb img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 148px;
    object-fit: cover;
    border-radius: 0;
    margin: 0 auto;
  }

  .product-unified.white .product-card-u .thumb{
    height: 156px;
  }

  .product-unified.white .product-card-u .thumb img{
    max-height: 148px;
    max-width: 100%;
  }

  .product-card-u h3,
.card h3{
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight:600;
    line-height: 1.45;
    letter-spacing: -0.45px;
    margin: 0 0 8px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .product-card-u h3 .eng{
    font-size: 13.5px;
  }

  .product-card-u p{
    min-height: 52px;
    font-size:15px;
    line-height: 1.75;
    letter-spacing: -0.35px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .product-copy-mobile-break{
    display: block;
  }

  .detail-panel{
    margin-top: 10px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: -0.2px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .detail-panel strong{
    font-size: 17px;
  }

  .detail-panel .detail-spec{
    font-size: 16px;
    line-height: 1.9;
  }

  .bobbin-drawing-img{
    margin-top: 16px;
    border-radius: 0;
  }

  .products-general-section .product-spec-chips,
.products-industrial-section .product-spec-chips{
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
  }

  .product-spec-chip{
    min-height: auto;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.25px;
  }

  .product-spec-chip:not(:last-child)::after{
    height: 14px;
  }

  .products-general-section .product-spec-chip,
.products-industrial-section .product-spec-chip{
    flex: 0 1 auto;
    min-width: 0;
    min-height: 27px;
    padding: 0 7px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    background: #f2f2f2;
    color: #666666;
    -webkit-text-fill-color: #666666;
    font-size: 11.5px;
    font-weight:600;
    line-height: 1.35;
    letter-spacing: -0.35px;
    white-space: nowrap;
  }

  .products-general-section .product-spec-chip:not(:last-child)::after,
.products-industrial-section .product-spec-chip:not(:last-child)::after{
    display: none;
    content: none;
  }

  .products-representative-carousel .product-scroll-showcase .product-spec-chip{
    min-height: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #666666;
    -webkit-text-fill-color: #666666;
    font-size: 13px;
    font-weight:600;
    letter-spacing: -0.2px;
  }

  .products-representative-carousel .product-scroll-showcase
  .product-spec-chip:not(:last-child)::after{
    display: block;
    content: "";
    height: 14px;
    background: rgba(21, 70, 168, 0.38);
  }

  .product-case-links{
    gap: 10px;
  }

  .product-case-item{
    padding: 12px;
  }

  .product-case-text{
    font-size:15px;
  }

  .products-mobile-notice-final{
    max-width: 340px;
    padding: 18px 16px;
    margin: 32px auto 0;
    border-radius: 16px;
    background: var(--ks-white);
    border: 1px solid rgba(13, 30, 61, 0.12);
    box-shadow: none;
    font-size:16px;
    line-height: 2.0;
    font-weight:600;
    letter-spacing: -0.35px;
  }

  .cards4{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cards4 .card{
    min-height: auto;
    padding: 42px 24px 40px;
    border-radius: 0;
  }

  .products-industries .cards4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 32px;
  }

  .products-industries .cards4 .card:not(:nth-child(3n/**/+1))::before{
    display: none;
  }

  .products-industries .cards4 .card:nth-child(even)::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(13,30,61,.12) 18%, rgba(13,30,61,.12) 82%, transparent);
  }

  .products-industries .cards4 .card:nth-child(n/**/+3)::after{
    top: 0;
    left: 18px;
    right: 18px;
  }

  .industry-icon{
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
  }

  .industry-icon svg{
    width: 26px;
    height: 26px;
  }

  .quick-check-card h3{
    margin: 0 0 7px;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
  }

  .quick-check-card p{
    margin: 0;
    text-align: center;
    font-size:16px;
    line-height: 1.8;
  }

  .quick-check-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 0;
    margin-top: 34px;
    padding-left: 0;
  }

  .quick-check-grid::before{
    display: none;
  }

  .quick-check-card{
    min-height: 0;
    padding: 0 10px;
    display: block;
    text-align: center;
  }

  .quick-check-card:nth-child(even){
    border-left: 1px solid rgba(13,30,61,.10);
  }

  .quick-check-card:last-child{
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
    box-sizing: border-box;
  }

  .quick-check-card > .quick-check-icon{
    margin: 0 auto 12px;
    position: relative;
    z-index: 2;
  }

  .quick-check-number{
    margin: 0 0 11px;
    font-size: 13px;
    font-weight:700;
    letter-spacing: 1px;
    color: #6596D8;
    -webkit-text-fill-color: #6596D8;
  }

  .products-archive-guide{
    margin: 54px auto 16px;
    font-size:17px;
    line-height: 1.9;
    padding: 0 14px;
  }

  .products-archive-guide::before{
    top: -22px;
    left: 22px;
    right: 22px;
  }

  .products-archive-guide-text{
    transform: translateY(48px);
  }

  .products-archive-cta-wrap{
    margin-top: 22px;
    transform: translateY(48px);
  }

  .products-archive-cta{
    width: 100%;
    max-width: 340px;
    min-width: 0;
    height: 54px;
    font-size: 16px;
  }

  .kspl-final-process{
    margin: 62px auto 0;
    padding: 0 20px 32px;
  }

  .kspl-final-process h2{
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: clamp(35px, calc(24.683px + 2.646vw), 45px);
    font-weight:700;
    line-height: 1.08;
    letter-spacing: 0.04em;
    margin: 0;

text-transform: none;}

  .kspl-final-process p{
font-size:24px;
    font-weight:700;
    line-height: 1.3;
    letter-spacing: -0.8px;
    margin: 14px 0 0;
}

  .products-industries{
    padding-top: 0;
  }

  .quick-check-section{
    padding-bottom: 140px;
    padding-top: 16px;
  }

  .products-industries .cards4 .card{
    min-height: auto;
    padding: 28px 12px 28px;
  }

  .products-industries .cards4 .card h3{
    min-height: auto;
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .cards4 .card h3{
    min-height: auto;
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.5;
  }

  .cards4 .card p{
    font-size:17.5px;
    line-height: 1.9;
  }

  .cards4 .card p br{
    display: none;
  }

  .products-representative-carousel{
    max-width: 100%;
  }

  .products-representative-carousel .product-scroll-showcase{
    border-radius: 0;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u,
.products-representative-carousel .product-scroll-showcase .product-card-u:first-child{
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding: 26px 22px 28px;
    border-bottom: 0;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u .thumb{
    height: 220px;
    min-height: 220px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u .thumb img,
.product-unified.dark .products-representative-carousel .product-scroll-showcase .product-card-u
  .thumb img{
    max-height: 212px;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u > div:last-child{
    max-width: 100%;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u h3{
    display: block;
    min-height: 0;
    margin: 0 0 10px;
    font-size: 25px;
    font-weight:600;
    line-height: 1.32;
    letter-spacing: -0.65px;
    text-align: left;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u h3 .eng{
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    font-weight:600;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .products-representative-carousel .product-scroll-showcase .product-card-u p{
    min-height: 0;
    font-size:17px;
    font-weight:600;
    line-height: 1.65;
    letter-spacing: -0.3px;
    text-align: left;
  }

  .products-representative-carousel .product-scroll-showcase .product-spec-chips{
    justify-content: flex-start;
    gap: 0;
    margin-top: 14px;
  }

  .products-representative-carousel .product-scroll-showcase .product-case-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
  }

  .products-representative-carousel .product-scroll-showcase .product-case-item{
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
  }

  .products-carousel-prev{
    left: 8px;
  }

  .products-carousel-next{
    right: 8px;
  }

  .products-deep-anchor,
.products-representative-carousel{
    scroll-margin-top: 130px;
  }

  .products-carousel-arrow{
    width: 38px;
    height: 38px;
    font-size: 27px;
    top: 138px;
    background: var(--ks-white);
    border-color: rgba(13, 30, 61, 0.12);
    color: var(--color-navy);
    -webkit-text-fill-color: var(--color-navy);
  }

  .products-carousel-arrow:active,
.products-carousel-arrow.is-pressing{
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--ks-white);
    -webkit-text-fill-color: var(--ks-white);
  }

  .products-carousel-arrow:focus-visible{
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
  }

  .hero-message,
.hero-message span,
.hero-message-animate,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
    display: block;
    color: #111;
    -webkit-text-fill-color: #111;
    font-size: 16.5px;
    font-weight: 450;
    line-height: 1.9;
    letter-spacing: -0.2px;
    text-align: left;
    text-shadow: none;
  }

  /* TOP HERO MUST REMAIN FULL-BLEED */
  .hero{
    min-height: 700px;
    overflow: hidden;
    border-radius: 0;
    background-image: none;
    background-color: var(--ks-white);
    background-size: auto;
    background-position: initial;
    background-repeat: no-repeat;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
    max-width: none;
}

  .hero > .wrap.inner,
.hero .inner{
    width: 100%;
    min-height: 700px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding-top: 44px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 72px;
  }

  .hero .inner > div:first-child{
    width: 100%;
    margin-top: 0;
    padding-top: 0;
  }

  .hero .kicker{
    margin-top: 0;
    margin-bottom: 14px;
    padding-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(92, 143, 214, 0.42);
  }

  .hero h1{
    margin: 0;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -1.1px;
    color: var(--B-black);
    -webkit-text-fill-color: var(--B-black);
  }

  .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    display: block;
    width: 100%;
    max-width: 420px;
    margin-top: 42px;
    min-height: 0;
    position: relative;
    z-index: 3;
  }

  .hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span{
font-family:"Paperlogy","Pretendard",sans-serif;
    margin: 0;
    color: var(--B-black);
    -webkit-text-fill-color: var(--B-black);
    font-size: 16.5px;
    font-weight: 450;
    line-height: 1.9;
    letter-spacing: -0.2px;
    text-align: left;
    text-shadow: none;
  }

  .hero-message,
.hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    max-width: 420px;
  }

  .products-quick-inquiry{
    width: calc(100% - 32px);
    max-width: 640px;
    box-sizing: border-box;
    margin: 30px auto 0;
    padding: 38px 24px;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .products-quick-inquiry h2{
    font-size: 25px;
    line-height: 1.5;
  }

  .products-quick-inquiry p{
    margin-top: 14px;
    font-size:16px;
    font-weight:600;
    line-height: 1.6;
    letter-spacing: -0.55px;
  }

  .products-quick-inquiry-actions{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 0;
  }

  .products-quick-inquiry-btn{
    width: 100%;
    min-width: 0;
    height: 52px;
    font-size: 16px;
  }

  .products-industrial-section .product-card-u{
    padding-top: 16px;
    padding-bottom: 18px;
  }

  .products-industrial-section .product-card-u .thumb{
    height: 156px;
  }

  .products-industrial-section .product-card-u .thumb img{
    max-height: 148px;
  }

  .kspl-products-lightbox{
    padding: 18px;
  }

  .kspl-products-lightbox img{
    max-width: 94vw;
    max-height: 82vh;
    border-radius: 0;
  }

  .kspl-products-lightbox.is-brand-banner{
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .kspl-products-lightbox.is-brand-banner img{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: calc(100dvh - 78px);
    max-height: none;
    object-fit: cover;
    border-radius: 0;
  }

  .kspl-products-lightbox-close{
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  html body .hero h1 *{
    color: var(--ks-text-main);
    -webkit-text-fill-color: var(--ks-text-main);
  }

  html body .products-hero-brand-sub{
font-family:"Pretendard",sans-serif;
    margin-top: 16px;
    color: #111;
    -webkit-text-fill-color: #111;
    font-size: 24px;
    font-weight:850;
    line-height: 1.3;
    letter-spacing: -0.8px;
  }

  main > .product-unified.dark{
    padding-top: 58px;
    padding-bottom: 64px;
  }

  main > .product-unified.dark .section-head{
    max-width: 340px;
    margin: 0 auto 32px;
  }

  main > .product-unified.dark .section-head h2,
main > .product-unified.dark h2{
    font-size: clamp(33px, calc(26.810px + 1.587vw), 39px);
    line-height: 1.2;
    letter-spacing: -0.9px;
  }

  main > .product-unified.dark .section-head p,
main > .product-unified.dark .lead-white{
    font-size: 15.5px;
    line-height: 1.8;
  }

  main > .product-unified.dark .section-head p{
    font-size:16.5px;
    line-height: 1.8;
  }

  main > .product-unified.dark .products-representative-carousel .product-scroll-showcase{
    border-radius: 0;
  }

  main > .product-unified.dark .products-carousel-dots{
    margin-top: 28px;
  }

  .kspl-philosophy-banner{
    padding: 10px 0;
  }

  .kspl-philosophy-banner .js-kspl-product-family-lightbox,
.kspl-philosophy-banner .js-kspl-product-family-lightbox img,
.kspl-philosophy-banner .js-products-brand-banner-lightbox{
    cursor: zoom-in;
  }

  .kspl-philosophy-banner .wrap,
.kspl-philosophy-banner-img{
    border-radius: 0;
  }

  .js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox img{
    cursor: zoom-in;
  }

  .kspl-product-family-lightbox-stage{
    justify-content: center;
    padding: 72px 16px 34px;
  }

  .kspl-product-family-lightbox img{
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 78vh;
    object-fit: cover;
    border-radius: 0;
  }

  .kspl-product-family-lightbox-close{
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

html body .hero .kicker,
html body .case-hero .case-kicker,
html body .archive-hero .archive-kicker{
    font-size: 13px;
    letter-spacing: 2.8px;
    margin-bottom: 18px;
  }

  html body .index-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 7px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.8px;
  }

  

  html body .hero h1,
html body .contact-brand-title,
html body .case-hero h1,
html body .archive-hero h1,
html body .archive-submark{
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -3px;
  }

  html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span,
html body .case-hero-note,
html body .case-hero-note span,
html body .archive-note,
html body .archive-note span,
html body .archive-note-desktop,
html body .archive-note-desktop span,
html body .archive-note-mobile,
html body .archive-note-mobile span{
font-family:"Paperlogy","Pretendard",sans-serif;
    font-size: 16.5px;
    font-weight: 450;
    line-height: 1.9;
    letter-spacing: -0.2px;
    display: block;
    color: #111;
    -webkit-text-fill-color: #111;
    text-align: left;
    text-shadow: none;
  }

  html body .index-hero-brand-sub,
html body .about-hero-brand-sub,
html body .products-hero-brand-sub,
html body .contact-hero-brand-sub,
html body .case-hero-brand-sub,
html body .archive-hero-brand-sub{
    margin-top: 7px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.8px;
  }

  html body .hero-message,
html body .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    visibility: visible;
    opacity: 1;
    max-width: 420px;
    position: relative;
    z-index: 5;
  }

  

  .kspl-p2-section{
    padding: 40px 0;
  }

  .kspl-p2-wrap{
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .kspl-p2-head{
    margin-bottom: 24px;
  }

  .kspl-p2-head p,
.kspl-p2-case-text p{
    font-size:18px;
    line-height: 1.8;
  }

  .kspl-p2-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 auto;
    gap: 16px;
    align-items: stretch;
    justify-content: center;
    justify-items: center;
  }

  .kspl-p2-grid-2 .kspl-p2-figure:first-child,
.kspl-p2-grid-2 .kspl-p2-figure:last-child,
.kspl-p2-case-feature .kspl-p2-figure{
    min-height: auto;
  }

  .kspl-p2-gallery .kspl-p2-figure{
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
  }

  .kspl-p2-gallery .kspl-p2-figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .kspl-p2-grid-2 .kspl-p2-figure img,
.kspl-p2-case-feature .kspl-p2-figure img{
    height: auto;
    object-fit: cover;
    border-radius: 0;
  }

  

  .kspl-p2-head h2{
    font-size: clamp(28px, calc(20.778px + 1.852vw), 35px);
    line-height: 1.38;
    letter-spacing: -.8px;
  }

  .kspl-p2-head p{
    font-size:17.5px;
    line-height: 1.8;
  }

  html body .hero h1{
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -3px;
    font-size: 60px;
    color: var(--ks-text-main);
    -webkit-text-fill-color: var(--ks-text-main);
    animation-name: aboutPhilosophyTitleUpMobile;
  }

  html body .hero .hero-message-animate{
font-family:"Paperlogy","Pretendard",sans-serif;
    margin-top: 42px;
    transform: translateY(-120px);
  }

  html body .hero::before{
    content: "";
    display: block;
    position: absolute;
    inset: -112px 0 0 0;
    z-index: 0;
    pointer-events: none;
    background: url("mobilea3.webp") center top / cover no-repeat var(--ks-white);
    transform: translateY(22px) scale(1.01);
    transform-origin: center center;
    animation: aboutPhilosophyBgSettleMobile 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
  }

  /* RESPONSIVE CONTENT BANNER ALIGNMENT */
  .kspl-philosophy-banner .wrap{
    width: calc(100% - 32px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid rgba(13, 30, 61, 0.10);
  }

.products-brand-banner{padding:20px 0;}
  .products-brand-banner.products-philosophy-promise-banner{
    padding-top:0;
    padding-bottom:40px;
    margin-top:-10px;
    margin-bottom:0;
  }
  .products-brand-banner .wrap{
    width:calc(100% - 32px);
    max-width:none;
    aspect-ratio:3 / 2;
    border:1px solid rgba(13,30,61,.10);
  }
  .products-brand-banner-img[src="productspage.webp"]{content:url("productspage-mobile.webp");}
  .products-brand-banner-img[src="philosophy-promise.webp"]{content:url("philosophy-promise-mobile.webp");}
  .products-brand-banner + .products-general-section{padding-top:42px;}


  .kspl-data-head{margin-bottom:28px;}
  .kspl-data-head h2{font-size:30px;letter-spacing:-.7px;}
  .kspl-data-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kspl-data-item{padding:20px 14px 22px;}
  .kspl-data-item + .kspl-data-item{border-left:0;border-top:0;}
  .kspl-data-item:nth-child(even){border-left:1px solid #e5e7eb;}
  .kspl-data-item:nth-child(n+3){border-top:1px solid #e5e7eb;}
  .kspl-data-item-head{align-items:flex-start;gap:8px;margin-bottom:13px;}
  .kspl-data-item-head > span{font-size:10px;line-height:1.55;}
  .kspl-data-item-head h3{font-size:17px;line-height:1.35;letter-spacing:-.35px;}
  .kspl-data-item dl > div{padding:10px 0 9px;}
  .kspl-data-item dt{margin-bottom:5px;font-size:9px;line-height:1.35;letter-spacing:.65px;}
  .kspl-data-item dd{font-size:12.5px;line-height:1.55;letter-spacing:-.25px;}
  .kspl-data-bottom{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:24px;
  }
  .kspl-data-bottom .kspl-data-archive-link{
    margin-top:0;
  }
  .kspl-b2b-guide{
    max-width:none;
    justify-self:stretch;
    padding:20px 0 0;
    border-left:0;
    border-top:1px solid #d9dde3;
  }
  .kspl-b2b-guide strong{font-size:15px;}
  .kspl-b2b-guide p{font-size:13px;line-height:1.72;}
  .kspl-data-archive-link{min-width:184px;height:46px;margin-top:24px;font-size:14px;}

  .kspl-products-data-section{padding:58px 0 62px;}

.kspl-case-lightbox{
padding: 14px;
}

.kspl-case-lightbox img{
max-width: 94vw;
max-height: 82vh;
overflow: hidden;
border-radius: 0;
background: #ffffff;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.kspl-case-lightbox-close{
top: 14px;
right: 14px;
width: 40px;
height: 40px;
font-size: 29px;
}

.kspl-case-lightbox.has-detail{
align-items:center;
      padding:14px;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-stage{
display:block;
      width:min(560px,94vw);
      max-height:88vh;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      background:#ffffff;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-media{
width:100%;
      height:auto;
      aspect-ratio:1 / 1;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-media img{
width:100%;
      height:100%;
      object-fit:contain;
}

.kspl-case-lightbox.has-detail .kspl-case-lightbox-detail{
width:100%;
      padding:26px 22px 22px;
}

.kspl-case-lightbox-kicker{
margin-bottom:10px;
      font-size:10px;
}

.kspl-case-lightbox-title{
font-size:24px;
      line-height:1.2;
}

.kspl-case-lightbox-subtitle{
margin-top:9px;
      font-size:13px;
      line-height:1.5;
}

.kspl-case-lightbox-rule{
margin:19px 0 2px;
}

.kspl-case-lightbox-info-row{
padding:14px 0 13px;
}

.kspl-case-lightbox-info-label{
margin-bottom:5px;
}

.kspl-case-lightbox-info-value{
font-size:13px;
      line-height:1.58;
}
}

/* =========================================================
   MOBILE CSS END
========================================================= */