/* ==================================================
KSPL CSS v2.0
Geumseong Plastic Design System
Cascade-safe cleanup · responsive behavior preserved
================================================== */

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

:root{
--page-active-color: #111111;
--page-hover-color: #777777;
--text: var(--B-black);
--muted: var(--A-gray);
--blue: var(--C-blue);
--blue-hover: var(--C-blue);
--soft: #ffffff;
--shadow: 0 14px 40px rgba(13, 30, 61, 0.11);
--kspl-blue: #6596D8;
--color-white: #ffffff;
--color-text-strong: #111111;
--color-text-light: #666666;
--color-blue: #6596D8;
--color-blue-deep: #2A5FBE;
--color-blue-strong: #6596D8;
--color-navy: #0d1e3d;
--color-black: #000000;
--color-dark: #05070a;
--color-kakao: #03c75a;
--radius-md: 10px;
--radius-lg: 16px;
--radius-card: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
--radius-round: 50%;
--shadow-card: 0 18px 46px rgba(13, 30, 61, 0.085);
--shadow-card-strong: 0 12px 28px rgba(13, 30, 61, 0.13);
--shadow-blue-strong: 0 18px 36px rgba(42, 95, 190, 0.28);
}
main{
font-family:"Paperlogy","Pretendard",sans-serif;
}


body{
-webkit-text-size-adjust: 100%;
}

.wrap.narrow{
max-width: 800px;
}

.tag,
.about-section-kicker{
display: inline-block;
margin: 0 0 14px;
padding: 0;
color: #666666;
-webkit-text-fill-color: #666666;
background: transparent;
border: 0;
box-shadow: none;
font-size: 13.5px;
font-weight:700;
letter-spacing: 3.2px;
line-height: 1.35;
text-transform: uppercase;
text-shadow: none;
}

.section{
padding: 100px 0;
}

.section.white{
background: var(--color-white);
}

.company-overview-section,
.company-overview-section + .section + .section{
background: var(--soft);
}

.company-overview-section + .section{
background: var(--color-white);
}

.section-head h2,
.section-title{
color: var(--B-black);
}

.section-head.factory-head{
margin-bottom: 34px;
}

.section-head.factory-head h2{
margin-bottom: 14px;
}

.section-head p{
max-width: 780px;
color: var(--muted);
}

.section p{
font-size: 18.5px;
line-height: 1.95;
}

.kspl-about-bottom-cta h2{
margin: 0 0 14px;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
font-size: clamp(25px, calc(17.909px + 1.818vw), 43px);
font-weight:700;
line-height: 1.38;
letter-spacing: -1.2px;
}

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

.industry-wrap-wide{
max-width: 1380px;
}

.company-summary-box{
position: relative;
overflow: hidden;
min-height: 660px;
background: var(--color-white);
border: 0;
border-radius: 0;
box-shadow: none;
padding: 74px 0 42px;
margin-top: 0;
}

.company-summary-copy{
position: relative;
z-index: 2;
width: 52%;
max-width: 650px;
}

.company-summary-title{
display: flex;
flex-direction: column;
gap: 5px;
margin: 18px 0 56px;
color: var(--B-black);
font-size: clamp(48px, calc(-29.636px + 6.061vw), 54px);
font-weight:700;
line-height: 1.28;
letter-spacing: -2.3px;
}

.company-summary-description{
max-width: 650px;
}

.company-summary-text{
margin: 0;
color: var(--A-gray);
font-size: 18px;
font-weight:600;
line-height: 1.88;
letter-spacing: -0.2px;
}

.company-summary-mobile-break{
display: none;
}

.company-summary-text-secondary{
margin-top: 16px;
}

.about-overview-sketch{
position: absolute;
right: -86px;
top: 28px;
width: 61%;
max-width: 760px;
height: auto;
opacity: 0.34;
pointer-events: none;
z-index: 1;
}

.company-capabilities{
position: absolute;
left: 0;
right: 0;
bottom: -30px;
z-index: 3;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 0;
border-bottom: 0;
}

.company-capability-item{
position: relative;
min-height: 112px;
padding: 24px 24px 22px 0;
}

.company-capability-item:not(:last-child)::after{
content: "";
position: absolute;
right: 22px;
top: 24px;
bottom: 24px;
width: 1px;
background: #E8EBEF;
}

.company-capability-number{
display: block;
margin-bottom: 10px;
color: #59606A;
font-size: 15px;
font-weight:700;
line-height: 1.1;
letter-spacing: 0.08em;
}

.company-capability-item strong{
display: block;
color: var(--B-black);
font-size: 18px;
font-weight:700;
line-height: 1.45;
letter-spacing: -0.35px;
}

.company-summary-title,
.company-summary-text{
position: relative;
z-index: 2;
}

.company-summary-box p{
color: var(--A-gray);
font-size: 20px;
font-weight:600;
line-height: 1.8;
letter-spacing: -0.25px;
}













.kspl-factory-section{
background: var(--color-white);
}

.industry-box{
background: var(--color-white);
border-radius: 0;
padding: 34px 0;
margin-top: 34px;
box-shadow: none;
border: 0;
}

.industry-animated-box{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
align-items: start;
}

.industry-group{
min-width: 0;
padding: 4px 24px 8px;
border: 0;
border-radius: 0;
background: var(--color-white);
box-shadow: none;
text-align: left;
}

.industry-group:last-child{
padding-right: 0;
}

.industry-group:first-child{
padding-left: 0;
}

.industry-group + .industry-group{
border-left: 1px solid #E8EBEF;
}

.industry-group-title{
margin: 0 0 18px;
color: var(--B-black);
font-size: 22px;
font-weight:700;
letter-spacing: -0.35px;
}

.check-list,
.industry-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}

.check-list li{
position: relative;
margin: 0;
padding-left: 28px;
color: var(--A-gray);
font-size: 21px;
font-weight:600;
line-height: 1.8;
white-space: nowrap;
}

.check-list li::before{
content: "";
position: absolute;
left: 2px;
top: 0.9em;
width: 6px;
height: 6px;
background: #6596D8;
border-radius: 1px;
transform: translateY(-50%);
}

.image-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.image-card{
overflow: hidden;
padding-bottom: 16px;
border-radius: 0;
background: var(--color-white);
border: 1px solid #ededed;
box-shadow: none;
}

.image-card img{
width: 100%;
height: 320px;
border-radius: 0;
object-fit: cover;
}

.image-card p{
margin: 14px 0 0;
color: var(--B-black);
font-size: 19px;
font-weight:600;
line-height: 1.65;
text-align: center;
}

.image-card span{
color: #666666;
font-size: 15px;
}

.kspl-about-bottom-cta-section{
padding: 70px 24px 100px;
margin-bottom: 0;
background: var(--soft);
}

.kspl-about-bottom-cta{
position: relative;
max-width: 980px;
margin: 0 auto;
padding: 52px 34px;
border-radius: 0;
background: var(--color-white);
color: var(--B-black);
text-align: center;
border: 0;
box-shadow: none;
}

.kspl-about-bottom-cta p{
max-width: 720px;
margin: 0 auto;
color: var(--A-gray);
font-size: 19px;
font-weight:600;
line-height: 1.85;
text-align: center;
}

.kspl-about-bottom-cta p a{
color: var(--kspl-blue);
-webkit-text-fill-color: var(--kspl-blue);
display: inline-block;
margin: 0 3px;
padding-bottom: 0;
font-weight:700;
border-bottom: none;
text-decoration: none;
}

.kspl-about-cta-btns{
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}

.kspl-about-cta-btn{
min-width: 220px;
height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: #6596D8;
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 16px;
font-weight:700;
letter-spacing: -0.2px;
transition: all 0.18s ease;
}

.kspl-about-cta-btn.blog{
background: var(--color-kakao);
border: 1px solid var(--color-kakao);
}

.kspl-about-cta-btn:hover{
transform: translateY(-2px);
opacity: 0.96;
box-shadow: 0 14px 28px rgba(92, 143, 214, 0.2);
}

.kspl-about-cta-btn.blog:hover{
box-shadow: 0 14px 28px rgba(3, 199, 90, 0.22);
filter: brightness(1.04);
}



























.product-archive-section{
background: var(--soft);
}

.product-archive-section .section-head{
margin-bottom: 36px;
}

.product-archive-layout{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}

.product-archive-main,
.product-archive-side-card,
.product-archive-banner{
position: relative;
cursor: zoom-in;
}

.product-archive-main,
.product-archive-side-card{
display: flex;
flex-direction: column;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.product-archive-main img,
.product-archive-side-card img{
display: block;
width: 100%;
height: 520px;
object-fit: cover;
object-position: center;
border: 0;
border-radius: 0;
}

.product-archive-banner{
margin-top: 28px;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.product-archive-banner img{
display: block;
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
border: 0;
border-radius: 0;
box-shadow: none;
}

.kspl-factory-gallery::-webkit-scrollbar{
height: 7px;
}

.kspl-factory-gallery::-webkit-scrollbar-track{
background: rgba(13, 30, 61, 0.06);
border-radius: var(--radius-pill);
}

.kspl-factory-gallery::-webkit-scrollbar-thumb{
background: rgba(92, 143, 214, 0.42);
border-radius: var(--radius-pill);
}

.kspl-factory-slide{
flex: 0 0 360px;
max-width: 360px;
overflow: hidden;
background: var(--color-white);
border: 1px solid #ededed;
border-radius: 0;
box-shadow: none;
}

.kspl-factory-slide-wide{
flex-basis: 560px;
max-width: 560px;
border-color: rgba(92, 143, 214, 0.24);
}

.kspl-factory-slide img{
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}

.kspl-factory-slide-wide img{
height: 300px;
}

.kspl-factory-slide-body{
padding: 24px 24px 26px;
background: var(--color-white);
border-top: 1px solid rgba(13, 30, 61, 0.07);
}

.kspl-factory-slide-kicker{
display: block;
margin: 0 0 10px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 12px;
font-weight:700;
line-height: 1.35;
letter-spacing: 2.5px;
}

.kspl-factory-slide-body h3{
margin: 0 0 10px;
color: var(--B-black);
font-size: 23px;
font-weight:700;
line-height: 1.5;
letter-spacing: -0.35px;
}

.kspl-factory-slide-body p{
margin: 0;
color: var(--A-gray);
font-size: 17px;
font-weight:600;
line-height: 1.9;
}

.section.product-archive-section,
.recommended-industries-section{
background: var(--color-white);
}

.kspl-factory-gallery-wrap{
position: relative;
}

.kspl-factory-gallery{
overflow: hidden;
padding: 4px 2px 22px;
margin-left: -2px;
margin-right: -2px;
}

.kspl-factory-track{
display: flex;
gap: 22px;
transition: transform .82s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}

.kspl-factory-gallery.dragging{
cursor: default;
}

.kspl-factory-gallery.dragging a{
pointer-events: none;
}

.production-equipment-section{
background: var(--soft);
padding: 88px 0 0;
}

.production-equipment-card{
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 0;
align-items: stretch;
min-height: 430px;
border-radius: 0;
background: var(--color-white);
border: 1px solid #ededed;
box-shadow: none;
}

.production-equipment-card::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.95) 34%,
      rgba(255, 255, 255, 0.62) 58%,
      rgba(255, 255, 255, 0.08) 100%
    ),
url("factory_equipment_banner_hq.webp") right center / cover no-repeat;
z-index: 0;
}

.production-equipment-card::after{
content: "";
position: absolute;
left: -150px;
top: -170px;
width: 500px;
height: 500px;
border-radius: var(--radius-round);
background: rgba(42, 95, 190, 0.07);
z-index: 0;
pointer-events: none;
}

.production-equipment-main,
.production-equipment-list{
position: relative;
z-index: 1;
}

.production-equipment-main{
padding: 50px 52px;
display: flex;
flex-direction: column;
justify-content: center;
}

.production-equipment-kicker{
display: block;
margin: 0 0 17px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 13.5px;
font-weight:700;
letter-spacing: 2.9px;
line-height: 1.3;
text-transform: uppercase;
}

.production-equipment-main h2{
margin: 0 0 17px;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
font-size: clamp(58px, calc(6.242px + 4.040vw), 62px);
font-weight:700;
line-height: 1.08;
letter-spacing: -2.3px;
}

.production-equipment-main h2 span{
display: block;
margin-top: 7px;
font-size: 24px;
font-weight:700;
line-height: 1.45;
letter-spacing: -0.5px;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
}

.production-equipment-sub{
display: flex;
align-items: center;
gap: 15px;
margin: 5px 0 27px;
color: #666666;
font-size: 18px;
font-weight:600;
letter-spacing: 0.1px;
}

.production-equipment-sub::before,
.production-equipment-sub::after{
content: "";
width: 64px;
height: 1px;
background: rgba(13, 30, 61, 0.17);
}

.production-equipment-purpose{
display: block;
width: 100%;
max-width: 320px;
margin: 0;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
font-size: 18.5px;
font-weight:600;
line-height: 1.75;
text-align: center;
}

.equipment-purpose-br{
display: none;
}

.production-equipment-list{
padding: 48px 50px 48px 26px;
display: grid;
align-content: center;
}

.production-equipment-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(13, 30, 61, 0.12);
border-left: 1px solid rgba(13, 30, 61, 0.1);
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}

.production-equipment-item{
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 13px;
min-height: 72px;
padding: 0 20px;
border-right: 1px solid rgba(13, 30, 61, 0.1);
border-bottom: 1px solid rgba(13, 30, 61, 0.12);
}

.production-equipment-item svg{
width: 34px;
height: 34px;
stroke: var(--C-blue);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 1;
}

.production-equipment-ton{
color: var(--B-black);
font-size: 26px;
font-weight:700;
line-height: 1.1;
letter-spacing: -0.5px;
}

.production-equipment-count{
color: var(--B-black);
font-size: 18px;
font-weight:700;
line-height: 1.1;
white-space: nowrap;
}

.process-material-section{
background: var(--color-white);
}

.kspl-process-visual-section{
background: var(--soft);
padding: 92px 0 96px;
}

.kspl-process-visual-section .section-head{
width: 100%;
max-width: none;
margin: 0 auto 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.kspl-process-visual-section .about-section-kicker{
display: block;
width: max-content;
margin: 0 auto 16px;
}

.kspl-process-visual-section .section-head h2{
width: 100%;
margin: 0 0 12px;
color: var(--B-black);
font-size: clamp(37px, calc(-14.758px + 4.040vw), 41px);
font-weight:700;
line-height: 1.38;
letter-spacing: -1.2px;
text-align: center;
}

.kspl-process-visual-section .section-head p{
max-width: none;
margin: 0 auto;
color: var(--A-gray);
font-size: 18px;
font-weight:600;
line-height: 1.8;
}

.kspl-process-steps{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 34px;
align-items: start;
}

.kspl-process-step{
position: relative;
text-align: center;
}

.kspl-process-step:not(:last-child)::after{
content: "";
position: absolute;
top: 50px;
right: -53px;
width: 72px;
height: 18px;
background: url("process-arrow-right.svg") center / 72px 18px no-repeat;
opacity: 1;
}

.kspl-process-step:not(:last-child)::before{
display: none;
content: none;
}

.kspl-process-icon-wrap{
position: relative;
width: 118px;
height: 118px;
margin: 0 auto 24px;
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(42, 95, 190, 0.08), rgba(42, 95, 190, 0.035));
box-shadow: inset 0 0 0 1px #ededed;
}

.kspl-process-number{
position: absolute;
top: -38px;
left: 50%;
width: 34px;
height: 34px;
transform: translateX(-50%);
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
background: #6596D8;
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 13px;
font-weight:700;
letter-spacing: 0.2px;
box-shadow: 0 8px 18px rgba(42, 95, 190, 0.22);
}

.kspl-process-icon-wrap svg{
width: 52px;
height: 52px;
stroke: #6596D8;
fill: none;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}

.kspl-process-step h3{
margin: 0 0 10px;
color: var(--B-black);
font-size: 19px;
font-weight:700;
line-height: 1.45;
letter-spacing: -0.35px;
}

.kspl-process-step p{
margin: 0 auto;
max-width: 188px;
color: var(--A-gray);
font-size: 15.8px;
font-weight:600;
line-height: 1.75;
letter-spacing: -0.2px;
}

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

.company-overview-section .company-summary-box{
margin-top: 0;
}

.company-overview-section > .wrap > .about-section-kicker{
margin-bottom: 20px;
}

.kspl-story-timeline{
    position: relative;
    padding: 180px 0 84px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        var(--color-white) 52%,
        #ffffff 100%
    );
    overflow: hidden;
}

.kspl-story-timeline .wrap{
position: relative;
max-width: 1380px;
margin: 0 auto;
padding: 0 24px;
}

.kspl-story-kicker{
display: block;
margin: 0 0 14px;
color: #666666;
font-size: 13px;
font-weight:700;
letter-spacing: 0.36em;
line-height: 1.1;
}

.kspl-story-title{
margin: 0;
color: var(--B-black);
font-size: clamp(39px, calc(-51.576px + 7.071vw), 46px);
font-weight:700;
line-height: 1.28;
letter-spacing: -1.2px;
}

.kspl-story-lead{
margin: 22px 0 0;
color: #666666;
font-size: 19px;
font-weight:600;
line-height: 1.75;
letter-spacing: -0.35px;
}

.kspl-story-brandmark{
width: clamp(150px, 32vw, 220px);
margin: 18px auto 30px;
border: 0;
background: transparent;
}

.kspl-story-brandmark img{
display: block;
width: 100%;
height: auto;
}

.kspl-story-timeline-line{
position: relative;
width: 100%;
margin-top: 30px;
padding: 0 0 8px;
}

.kspl-story-timeline-line::before{
content: "";
position: absolute;
left: 228px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(6, 29, 61, 0.06), rgba(6, 29, 61, 0.28), rgba(6, 29, 61, 0.06));
}

.kspl-story-item{
position: relative;
display: grid;
grid-template-columns: 228px minmax(0, 1fr);
gap: 36px;
min-height: 168px;
margin: 0 0 18px;
align-items: center;
}

.kspl-story-item:last-child{
margin-bottom: 0;
}

.kspl-story-item:nth-child(even){
grid-template-columns: minmax(0, 1fr) 228px;
}

.kspl-story-icon-side{
position: relative;
min-height: 118px;
display: flex;
align-items: center;
justify-content: center;
}

.kspl-story-item:nth-child(even) .kspl-story-icon-side{
order: 2;
}

.kspl-story-icon{
width: 86px;
height: 86px;
flex: 0 0 86px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-blue-strong);
box-shadow: none;
border: 1px solid #ededed;
}

.kspl-story-icon img{
width: 43px;
height: 43px;
display: block;
object-fit: contain;
}

.kspl-story-logo{
width: 42px;
height: auto;
display: block;
}

.kspl-story-dot{
position: absolute;
right: -46px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
border-radius: var(--radius-round);
background: var(--color-blue-strong);
box-shadow: 0 0 0 6px rgba(47, 103, 200, 0.08);
z-index: 2;
}

.kspl-story-dot::before{
content: "";
position: absolute;
right: 14px;
top: 6px;
width: 58px;
height: 2px;
background: rgba(7, 29, 61, 0.28);
}

.kspl-story-item:nth-child(even) .kspl-story-dot{
left: -46px;
right: auto;
}

.kspl-story-item:nth-child(even) .kspl-story-dot::before{
left: 14px;
right: auto;
top: 6px;
width: 58px;
}

.kspl-story-card{
position: relative;
width: min(560px, 100%);
padding: 24px 36px 26px;
border-radius: 0;
background: var(--color-white);
border: 1px solid #ededed;
box-shadow: none;
backdrop-filter: none;
}

.kspl-story-year{
display: block;
margin: 0 0 10px;
color: var(--B-black);
font-size: 31px;
font-weight:700;
line-height: 1.1;
letter-spacing: 0.12em;
}

.kspl-story-card h3{
margin: 0;
color: var(--B-black);
font-size: clamp(22px, calc(-3.879px + 2.020vw), 24px);
font-weight:700;
line-height: 1.44;
letter-spacing: -0.55px;
}

.kspl-story-card p{
margin: 14px 0 0;
color: #666666;
font-size: 17px;
font-weight:600;
line-height: 1.72;
letter-spacing: -0.35px;
}

.kspl-story-item.is-current .kspl-story-card{
background: linear-gradient(135deg, #ffffff 0%, var(--color-white) 58%, #ffffff 100%);
}

.kspl-story-item.is-current .kspl-story-card h3{
font-size: 23px;
}

.kspl-story-current-sub{
display: block;
margin-top: 9px;
color: #666666;
-webkit-text-fill-color: #666666;
font-weight:700;
}

.kspl-story-item.is-current .kspl-story-card strong{
display: block;
margin-top: 6px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 25px;
font-weight:700;
line-height: 1.48;
}

html body section.kspl-process-visual-section .kspl-process-steps
.kspl-process-step:not(:last-child)::after{
top: 50px;
}

html body section.kspl-process-visual-section .kspl-process-steps
.kspl-process-step:not(:last-child)::before{
display: none;
content: none;
}

html body .kspl-factory-section .kspl-factory-slide,
html body .kspl-factory-section .kspl-factory-slide-wide{
box-shadow: none;
}

.about-philosophy-hero{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-text-strong);
padding-bottom: 0;
margin-bottom: 0;
font-family:"Pretendard",sans-serif;
}

.about-philosophy-copy h1 span{
display: block;
}

.about-philosophy-copy h1 .blue{
color: #086DFF;
-webkit-text-fill-color: #086DFF;
}

.about-philosophy-process div{
min-width: 0;
overflow: hidden;
}

.about-philosophy-process img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.about-philosophy-industries-inner{
min-height: 104px;
width: min(100%, 1040px);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
padding: 0 24px;
color: var(--color-white);
text-align: center;
}

.about-philosophy-industries-inner strong{
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 29px;
font-weight:700;
line-height: 1.1;
letter-spacing: -0.5px;
white-space: nowrap;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.36);
font-family:"Pretendard", sans-serif;
}

.about-philosophy-industries-inner em{
display: block;
width: 7px;
height: 7px;
border-radius: var(--radius-round);
background: #006dff;
flex: 0 0 7px;
}

.about-philosophy-industries-inner .line{
display: block;
width: 120px;
height: 1px;
background: rgba(255, 255, 255, 0.62);
flex: 0 1 120px;
}

.about-philosophy-bridge{
background: var(--color-white);
padding: 160px 24px 92px;
text-align: center;
color: var(--color-text-strong);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.about-philosophy-bridge-kicker{
display: block;
margin: 0 0 18px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 14px;
font-weight:700;
line-height: 1.1;
letter-spacing: 0.32em;
font-family: "Pretendard", sans-serif;
}

.about-philosophy-bridge h2{
margin: 0;
color: var(--color-text-strong);
-webkit-text-fill-color: var(--color-text-strong);
font-size: clamp(29px, calc(23.879px + 1.313vw), 42px);
font-weight:700;
line-height: 1.38;
letter-spacing: -1.2px;
font-family: "Pretendard", sans-serif;
}

.about-philosophy-bridge h2::after{
content: "";
display: block;
width: 46px;
height: 3px;
margin: 28px auto 0;
background: var(--color-blue-deep);
font-family:"Paperlogy","Pretendard",sans-serif;
}

.about-philosophy-values{
min-height: 208px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-philosophy-value{
min-height: 162px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
color: var(--color-text-strong);
}

.about-philosophy-value + .about-philosophy-value::before{
content: "";
position: absolute;
left: 0;
top: 30px;
bottom: 30px;
width: 1px;
background: rgba(0, 0, 0, 0.09);
}

.about-philosophy-icon{
width: 50px;
height: 50px;
margin: 0 0 15px;
color: var(--color-blue-deep);
}

.about-philosophy-icon img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}

.about-philosophy-value strong{
display: block;
color: var(--color-text-strong);
-webkit-text-fill-color: var(--color-text-strong);
font-size: 25px;
font-weight:700;
line-height: 1.4;
letter-spacing: -0.6px;
font-family:"Pretendard", sans-serif;
}

.about-philosophy-value span{
display: block;
margin-top: 6px;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 18px;
font-weight:600;
line-height: 1.55;
letter-spacing: -0.3px;
font-family:"Pretendard", sans-serif;
}

.about-philosophy-hero + main,
.about-philosophy-hero + .kspl-story-timeline,
.about-philosophy-hero + section{
margin-top: 0;
}

.about-philosophy-visual{
position: relative;
height: calc(100vh - 92px + 104px);
min-height: 800px;
overflow: hidden;
margin-bottom: -40px;
background: var(--color-dark);
}

.about-philosophy-visual::after{
content: "";
position: absolute;
inset: -32px 0 -32px 0;
z-index: 0;
pointer-events: none;
background: url("a2final.webp") 58% center / cover no-repeat var(--color-dark);
opacity: 0;
transform: translateY(26px) scale(1);
transform-origin: center center;
animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

.about-philosophy-visual::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0.02) 72%);
pointer-events: none;
z-index: 1;
}

.about-philosophy-copy{
position: relative;
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 86px 24px 0;
box-sizing: border-box;
transform: translateY(24px);
z-index: 2;
}

.about-philosophy-kicker{
display: inline-block;
margin: 0 0 18px 0;
padding: 0;
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 13px;
font-weight:700;
line-height: 1.35;
letter-spacing: 2.8px;
text-transform: uppercase;
text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7);
opacity: 0;
transform: translateY(18px);
animation: aboutPhilosophyFadeUp 1.1s ease-out 0.6s forwards;
}

.about-philosophy-copy h1{
margin: 0;
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 82px;
font-weight:700;
line-height: 1.08;
letter-spacing: -3px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.72);
opacity: 0;
transform: translateY(30px);
animation: aboutPhilosophyTitleUp 1.3s ease-out 1.2s forwards;
}

.about-philosophy-copy p{
color: var(--color-white);
-webkit-text-fill-color: var(--color-white);
font-size: 28px;
font-weight:700;
line-height: 1.68;
letter-spacing: -0.6px;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
margin-top: 50px;
opacity: 0;
transform: translateY(24px);
animation: aboutPhilosophyFadeUp 1.2s ease-out 2.2s forwards;
}

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

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

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

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

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

to{
opacity: 1;
transform: translateY(0);
letter-spacing: -3px;
}
}

@keyframes aboutPhilosophyBgSettleMobile{
from{
opacity: 0;
transform: translateY(22px) scale(1.01);
}

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

@keyframes aboutPhilosophyTitleUpMobile{
from{
opacity: 0;
transform: translateY(30px);
letter-spacing: -0.4px;
}

to{
opacity: 1;
transform: translateY(0);
letter-spacing: -1.6px;
}
}

.about-philosophy-process{
position: relative;
z-index: 5;
width: 100%;
max-width: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
height: 226px;
background: var(--color-dark);
overflow: hidden;
box-shadow: 0 18px 42px rgba(7, 20, 33, 0.18);
margin: 0;
}

.about-philosophy-industries{
background: #071421;
border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
z-index: 6;
}

.about-p2-product-feature{
padding-top: 150px;
padding-bottom: 102px;
background: var(--color-white, #fff);
border-top: 0;
}

.about-p2-product-feature .kspl-p2-wrap{
max-width: 1380px;
}

.about-p2-product-feature .kspl-p2-head{
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
}

.about-p2-product-feature .kspl-p2-head h2{
font-size: clamp(31px, calc(27.061px + 1.010vw), 41px);
line-height: 1.38;
}

.about-p2-product-feature .kspl-p2-head p{
display: none;
}

.about-p2-product-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 1380px;
margin: 0 auto;
}

.about-p2-product-grid .kspl-p2-figure{
width: 100%;
height: auto;
aspect-ratio: 1449 / 1085;
margin: 0;
border: 1px solid #ededed;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}

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

.about-p2-product-summary{
max-width: 1040px;
margin: 28px auto 0;
padding: 0 18px;
box-sizing: border-box;
}

.about-p2-product-summary-inner{
background: #f5f6f8;
border: 1px solid #e6e9ee;
padding: 28px 34px;
text-align: center;
}

.about-p2-product-summary-kicker{
display: inline-block;
margin: 0 0 10px;
color: #6d7785;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.14em;
}

.about-p2-product-summary h3{
margin: 0;
color: #111111;
font-family: "Paperlogy","Pretendard",sans-serif;
font-size: clamp(22px, 1.9vw, 30px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.04em;
}

.about-p2-product-summary p{
max-width: 760px;
margin: 14px auto 0;
color: #4f5965;
font-size: 16px;
font-weight: 500;
line-height: 1.72;
letter-spacing: -0.025em;
word-break: keep-all;
}

.about-product-dots{
display: none;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}

.about-product-dots button{
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: #D5DAE2;
cursor: pointer;
}

.about-product-dots button.is-active{
width: 26px;
background: #6596D8;
}

.about-p2-product-feature .about-product-family-visual{
width: 100%;
max-width: 1380px;
height: auto;
aspect-ratio: 1831 / 859;
margin: 0 auto clamp(28px, 3.6vw, 52px);
box-sizing: border-box;
background: #F3F4F6;
border: 0;
overflow: hidden;
cursor: zoom-in;
}

.about-p2-product-feature .about-product-family-visual picture{
display: block;
width: 100%;
height: 100%;
}

.about-p2-product-feature .about-product-family-visual img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center center;
}

.kspl-process-step.kspl-process-step-shipping{
grid-column: 1/-1;
display: grid;
grid-template-columns: 340px 1fr;
gap: 28px;
align-items: center;
}

.kspl-shipping-photo{
width: 100%;
height: 260px;
border-radius: 0;
overflow: hidden;
}

.kspl-shipping-photo img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

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

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

.kspl-p2-head{
max-width: 820px;
margin: 0 0 34px;
}

.kspl-p2-kicker{
display: inline-block;
margin: 0 0 16px;
padding-bottom: 0;
color: #666666;
-webkit-text-fill-color: #666666;
font-size: 13px;
font-weight:600;
letter-spacing: 2.6px;
line-height: 1.3;
text-transform: uppercase;
border-bottom: 0;
}

.kspl-p2-head h2{
margin: 0 0 14px;
color: var(--B-black);
font-size: clamp(32px, 4.2vw, 46px);
font-weight:700;
line-height: 1.38;
letter-spacing: -1.2px;
}

.kspl-p2-head p{
margin: 0;
max-width: 760px;
color: var(--muted, #666666);
font-size: 19px;
font-weight:600;
line-height: 1.88;
}

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

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

.kspl-story-timeline .kspl-story-item.kspl-timeline-ready,
.kspl-story-timeline .kspl-story-brandmark.kspl-timeline-ready{
opacity: 0;
transform: translateY(26px);
transition:
    opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--kspl-timeline-delay, 0ms);
will-change: opacity, transform;
}

.kspl-story-timeline .kspl-story-item.kspl-timeline-visible,
.kspl-story-timeline .kspl-story-brandmark.kspl-timeline-visible{
opacity: 1;
transform: translateY(0);
}

.kspl-story-timeline .kspl-story-item.kspl-timeline-ready .kspl-story-dot{
transform: scale(0.72);
}

.kspl-story-timeline .kspl-story-item.kspl-timeline-visible .kspl-story-dot{
transform: scale(1);
transition: transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--kspl-timeline-delay, 0ms) + 180ms);
}

.kspl-story-timeline .kspl-story-item.is-current.kspl-timeline-visible .kspl-story-icon{
animation: ksplCurrentTimelinePulse 0.78s ease-out both;
animation-delay: calc(var(--kspl-timeline-delay, 0ms) + 220ms);
}

@keyframes ksplCurrentTimelinePulse{
0%{
transform: scale(0.96);
}

55%{
transform: scale(1.035);
}

100%{
transform: scale(1);
}
}

.kspl-product-family-lightbox,
.kspl-case-lightbox,
.kspl-products-lightbox{
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
padding: 26px;
box-sizing: border-box;
overflow: hidden;
background: rgba(18, 22, 28, 0.88);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}

.kspl-product-family-lightbox.is-open,
.kspl-case-lightbox.is-open,
.kspl-products-lightbox.is-open{
display: flex;
}

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

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

.kspl-product-family-lightbox-close,
.kspl-case-lightbox-close,
.kspl-products-lightbox-close{
position: fixed;
top: 18px;
right: 18px;
z-index: 100001;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #111111;
-webkit-text-fill-color: #111111;
font-size: 31px;
font-weight:600;
line-height: 42px;
text-align: center;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

body.kspl-product-family-lightbox-open,
body.kspl-case-lightbox-open,
body.kspl-products-lightbox-open{
overflow: hidden;
}


.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;
}

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


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


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


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


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


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


/* ==================================================
   ABOUT · UNIFIED PRODUCTION PROCESS
================================================== */
.about-process-unified-section{
  background: #ffffff;
  padding: 104px 0 92px;
}

.about-process-unified-head{
  margin-bottom: 42px;
}

.about-process-unified-head h2{
  margin: 0;
  color: #111111;
  font-size: clamp(39px, calc(-12.758px + 4.040vw), 43px);
  font-weight:700;
  line-height: 1.38;
  letter-spacing: -1.2px;
}


.about-process-unified-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.about-process-unified-card{
  grid-column: auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e8ebef;
}


.about-process-unified-image{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
}

.about-process-unified-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-process-unified-number{
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(13, 30, 61, 0.9);
  font-size: 14px;
  font-weight:700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.about-process-unified-body{
  min-height: 86px;
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.about-process-unified-body h3{
  margin: 0;
  color: #111111;
  font-size: 22px;
  font-weight:700;
  line-height: 1.45;
  letter-spacing: -0.45px;
}



/* ABOUT company summary — B2B statement separation */
.company-overview-section .company-summary-b2b{
  margin-top: 14px;
}

@media (min-width: 1281px) {
  .kspl-about-bottom-cta::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 34px;
    right: 34px;
    height: 1px;
    background: rgba(17, 17, 17, 0.12);
    pointer-events: none;
  }


/* ABOUT PC 1380px OPTICAL AXIS — PRODUCTION EQUIPMENT ~ PRODUCTION PROCESS */
.production-equipment-section > .wrap,
.kspl-factory-section > .wrap,
.product-archive-section > .wrap,
.recommended-industries-section > .wrap,
.about-process-unified-section > .wrap {
    padding-left: 0;
    padding-right: 0;
}

/* SECTION VERTICAL BREATHING +10px — body sections only */
.kspl-story-timeline,
.company-overview-section,
.about-p2-product-feature,
.production-equipment-section,
.kspl-factory-section,
.product-archive-section,
.recommended-industries-section,
.about-process-unified-section,
.kspl-about-bottom-cta-section {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}


  html body section.kspl-process-visual-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .company-summary-box {
    min-height: 662px;
    padding-top: 74px;
  }

  .about-overview-sketch {
    right: -86px;
    top: 28px;
    width: 61%;
    max-width: 760px;
    opacity: 0.34;
  }

  .kspl-story-timeline .wrap {
    text-align: center;
  }

  .kspl-story-timeline {
    padding-top: 140px;
    padding-bottom: 72px;
  }

  .kspl-story-timeline-line {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .kspl-story-item:nth-child(even) .kspl-story-card {
    justify-self: end;
  }

  .kspl-story-item:nth-child(odd) .kspl-story-card {
    justify-self: start;
  }

  .section {
    padding-top: 108px;
    padding-bottom: 44px;
  }

  .company-overview-section {
    background: var(--soft);
  }

  .company-overview-section .company-summary-box,
  .company-overview-section + .section {
    background: var(--color-white);
  }

  .company-overview-section + .section + .section {
    background: var(--soft);
  }

  

  .kspl-factory-gallery {
    gap: 28px;
    padding: 6px 0 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    flex: 0 0 640px;
    max-width: 640px;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #ededed;
    opacity: 1;
    scroll-snap-align: start;
  }

  .kspl-factory-slide-body {
    padding: 24px 28px 30px;
    min-height: auto;
  }

  .kspl-factory-slide-body h3 {
    font-size: 25px;
  }

  .kspl-factory-slide-body p {
    font-size: 17.5px;
  }

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

  .kspl-factory-arrow:hover {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    -webkit-text-fill-color: var(--color-white);
  }

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

  .kspl-factory-prev {
    left: -21px;
  }

  .kspl-factory-next {
    right: -21px;
  }

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

  .facility-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: #D5DAE2;
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
  }

  .facility-carousel-dots button.is-active {
    width: 28px;
    background: #6596D8;
  }

  .hero + .section,
  .hero + .company-overview-section {
    margin-top: 0;
  }

  .company-overview-section,
  .process-material-section {
    padding-top: 60px;
    padding-bottom: 72px;
  }

  .kspl-factory-section {
    padding-top: 112px;
    padding-bottom: 60px;
  }

  .product-archive-section {
    padding-top: 84px;
    padding-bottom: 32px;
  }

  .recommended-industries-section {
    padding-top: 100px;
    padding-bottom: 72px;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
  }

  .recommended-industries-section .section-head {
    margin-bottom: 46px;
  }

  .recommended-industries-section .section-head h2{
    font-size: clamp(44px, calc(-7.758px + 4.040vw), 48px);
    line-height: 1.28;
    letter-spacing: -1.5px;
  }

  .kspl-about-bottom-cta-section {
    padding-top: 56px;
    padding-bottom: 100px;
  }

  .recommended-industries-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

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

  .hero > .wrap.inner {
    max-width: 1500px;
    align-items: start;
    padding-top: 110px;
    padding-bottom: 70px;
  }

  .kspl-story-timeline .wrap,
  .kspl-story-kicker,
  .kspl-story-title,
  .kspl-story-lead {
    text-align: left;
  }

  .kspl-story-kicker,
  .kspl-story-title,
  .kspl-story-lead{
    max-width: 720px;
  }

  .kspl-story-brandmark{
    position: absolute;
    top: 6px;
    right: 32px;
    width: clamp(175px, 14vw, 210px);
    margin: 0;
  }

  .production-equipment-card,
  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
  box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
  border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  .kspl-factory-slide img,
  .kspl-factory-slide-wide img {
    height: 380px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  .production-equipment-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
    border-color: rgba(42, 95, 190, 0.16);
  }

  .kspl-factory-slide:hover,
  .kspl-factory-slide-wide:hover {
    transform: translateY(-4px);
    box-shadow: none;
    border-color: rgba(42, 95, 190, 0.18);
  }

  .kspl-factory-slide:hover img,
  .kspl-factory-slide-wide:hover img {
    transform: scale(1.025);
  }

  .about-p2-product-feature {
    padding-top: 182px;
    padding-bottom: 88px;
  }


  .about-process-unified-section + .kspl-about-bottom-cta-section{
    margin-top: 0;
  }

  .kspl-final-process{
    margin-top: 107px;
  }

  .about-philosophy-values{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

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


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

@media (min-width: 981px) and (max-width: 1280px) {
  .kspl-about-bottom-cta::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 34px;
    right: 34px;
    height: 1px;
    background: rgba(17, 17, 17, 0.12);
    pointer-events: none;
  }


/* SECTION VERTICAL BREATHING +10px — body sections only */
.kspl-story-timeline,
.company-overview-section,
.about-p2-product-feature,
.production-equipment-section,
.kspl-factory-section,
.product-archive-section,
.recommended-industries-section,
.about-process-unified-section,
.kspl-about-bottom-cta-section {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}


  /* Tablet landscape 1240px optical axis — ABOUT specific wrappers */
  .industry-wrap-wide,
  .about-p2-product-feature .kspl-p2-wrap,
  .about-p2-product-grid,
  .about-p2-product-feature .about-product-family-visual,
  .kspl-p2-wrap{
    max-width: 1240px;
  }


  html body section.kspl-process-visual-section {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .company-summary-box {
    min-height: 554px;
    padding-top: 64px;
  }

  .company-capabilities {
    bottom: -38px;
  }

  .company-summary-title{
    font-size: clamp(42px, calc(22.314px + 2.007vw), 48px);
  }

  .about-overview-sketch {
    top: -20px;
    right: -72px;
    width: 60%;
    max-width: 650px;
    opacity: 0.32;
  }

  .company-capability-item strong {
    font-size: 17px;
  }

  .kspl-story-timeline-line {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .kspl-story-item:nth-child(even) .kspl-story-card {
    justify-self: end;
  }

  .kspl-story-item:nth-child(odd) .kspl-story-card {
    justify-self: start;
  }

  .production-equipment-section {
    padding: 106px 0 0;
  }

  .production-equipment-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .production-equipment-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.48) 100%),
  url("factory_equipment_banner_hq.webp") center bottom / cover no-repeat;
  }

  .production-equipment-main {
    padding: 48px 44px 24px;
  }

  .production-equipment-list {
    padding: 18px 44px 48px;
  }

  .production-equipment-main h2{
    font-size: clamp(54px, calc(40.876px + 1.338vw), 58px);
  }

  .production-equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-equipment-item {
    min-height: 68px;
  }

  html body {
    padding-top: 86px;
  }

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

  h2,
  .section-head h2,
  .section-title {
    font-size: clamp(39px, calc(16.033px + 2.341vw), 46px);
    line-height: 1.34;
    letter-spacing: -1px;
  }

  .kspl-process-visual-section {
    padding: 90px 0 94px;
  }

  .kspl-process-visual-section .section-head h2{
    font-size: clamp(37px, calc(23.876px + 1.338vw), 41px);
  }

  .kspl-process-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }

  .kspl-process-icon-wrap {
    width: 92px;
    height: 92px;
    margin-bottom: 20px;
  }

  .kspl-process-icon-wrap svg {
    width: 42px;
    height: 42px;
  }

  .kspl-process-step:not(:last-child)::after {
    top: 38px;
    right: -37px;
    width: 54px;
    height: 14px;
    background: url("process-arrow-right.svg") center / 54px 14px no-repeat;
  }

  .kspl-process-step:not(:last-child)::before {
    display: none;
    content: none;
  }

  .kspl-process-step h3 {
    font-size: 16px;
    line-height: 1.45;
  }

  .kspl-process-step p {
    max-width: 150px;
    font-size: 14px;
    line-height: 1.65;
  }

  .section {
    padding-top: 112px;
    padding-bottom: 44px;
  }

  .company-overview-section {
    background: var(--soft);
  }

  .company-overview-section .company-summary-box,
  .company-overview-section + .section {
    background: var(--color-white);
  }

  .company-overview-section + .section + .section {
    background: var(--soft);
  }

  

  .kspl-factory-gallery {
    gap: 28px;
    padding: 6px 0 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    flex: 0 0 640px;
    max-width: 640px;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #ededed;
    opacity: 1;
    scroll-snap-align: start;
  }

  .kspl-factory-slide-body {
    padding: 24px 28px 30px;
    min-height: auto;
  }

  .kspl-factory-slide-body h3 {
    font-size: 25px;
  }

  .kspl-factory-slide-body p {
    font-size: 17.5px;
  }

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

  .kspl-factory-arrow:hover {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    -webkit-text-fill-color: var(--color-white);
  }

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

  .kspl-factory-prev {
    left: -21px;
  }

  .kspl-factory-next {
    right: -21px;
  }

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

  .facility-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: #D5DAE2;
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
  }

  .facility-carousel-dots button.is-active {
    width: 28px;
    background: #6596D8;
  }

  .hero + .section,
  .hero + .company-overview-section {
    margin-top: 0;
  }

  .company-overview-section,
  .process-material-section {
    padding-top: 104px;
    padding-bottom: 80px;
  }

  .kspl-factory-section {
    padding-top: 130px;
    padding-bottom: 90px;
  }

  .recommended-industries-section{
    padding-top: clamp(88px, calc(48.629px + 4.013vw), 100px);
    padding-bottom: 88px;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
  }

  .recommended-industries-section .section-head{
    margin-bottom: clamp(38px, calc(11.753px + 2.676vw), 46px);
  }

  .recommended-industries-section .section-head h2{
    font-size: clamp(41px, calc(31.157px + 1.003vw), 44px);
    line-height: 1.3;
    letter-spacing: -1.3px;
  }

  .recommended-industries-section .industry-wrap-wide {
    max-width: 1240px;
  }

  .recommended-industries-section .industry-group-title{
    font-size: clamp(21px, calc(17.719px + 0.334vw), 22px);
  }

  .recommended-industries-section .check-list li{
    font-size: clamp(21px, calc(17.719px + 0.334vw), 22px);
    line-height: 1.82;
  }

  .kspl-about-bottom-cta-section {
    padding-top: 88px;
    padding-bottom: 100px;
  }

  .recommended-industries-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

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

  .hero > .wrap.inner {
    align-items: start;
    padding-top: 110px;
    padding-bottom: 70px;
  }

  .product-archive-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .process-material-section {
    padding-top: 88px;
    padding-bottom: 96px;
  }


  html body .hero > .wrap.inner {
    padding-top: 42px;
  }

  html body .hero > .wrap.inner > div:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .about-philosophy-bridge h2 {
    font-size: clamp(39px, calc(29.157px + 1.003vw), 42px);

font-family:"Paperlogy","Pretendard",sans-serif;
}

  .about-philosophy-visual {
    min-height: max(820px, calc(100vh - 92px + 64px));
  }

  .about-philosophy-industries-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, calc(-3.686px + 2.007vw), 22px);
    min-height: 104px;
    padding: 0 24px;
  }

  .about-philosophy-industries-inner strong {
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;

font-family:"Pretendard", sans-serif;
}

  .about-philosophy-industries-inner em {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
  }

  .about-philosophy-industries-inner .line {
    display: block;
    width: 88px;
    height: 1px;
    flex: 0 1 88px;
  }

  .about-philosophy-visual::after {
    inset: 0;
    background: url("tablet-landscapeabout.webp") 70% center / cover no-repeat var(--color-dark);
  }

  .about-philosophy-copy {
    padding-top: 42px;
    transform: none;
  }

  .about-p2-product-feature {
    padding-top: 176px;
    padding-bottom: 110px;
  }

  .about-p2-product-feature .kspl-p2-head {
    margin-bottom: 42px;
  }

  .about-p2-product-grid {
    max-width: 100%;
    gap: 18px;
  }

  .about-p2-product-grid .kspl-p2-figure {
    width: 100%;
  }

  .kspl-final-process h2 {
font-size: clamp(56px, calc(-9.619px + 6.689vw), 76px);
    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;
}

  .kspl-story-timeline {
    padding: 132px 0 88px;
  }

  .kspl-story-timeline .wrap {
    text-align: center;
    max-width: 960px;
    padding: 0 22px;
  }

  .kspl-story-title{
    font-size: clamp(37px, calc(30.438px + 0.669vw), 39px);
  }

  .kspl-story-lead {
    font-size: 18px;
    font-weight:600;
  }

  .kspl-story-item {
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 30px;
    min-height: 154px;
    margin-bottom: 16px;
  }

  .kspl-story-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 188px;
  }

  .kspl-story-card {
    width: min(500px, 100%);
    padding: 22px 30px 24px;
  }

  .kspl-story-card h3{
    font-size: 22px;
  }

  .kspl-story-card p {
    font-size: 16px;
    font-weight:600;
  }

  .kspl-story-timeline-line::before {
    left: 188px;
  }

  .production-equipment-card,
  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
  box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
  border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  .kspl-factory-slide img,
  .kspl-factory-slide-wide img {
    height: 380px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  .production-equipment-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
    border-color: rgba(42, 95, 190, 0.16);
  }

  .kspl-factory-slide:hover,
  .kspl-factory-slide-wide:hover {
    transform: translateY(-4px);
    box-shadow: none;
    border-color: rgba(42, 95, 190, 0.18);
  }

  .kspl-factory-slide:hover img,
  .kspl-factory-slide-wide:hover img {
    transform: scale(1.025);
  }
.kspl-final-process {
padding-bottom: 110px;
}

  .about-process-unified-section{
    padding: 88px 0 80px;
  }

  .about-process-unified-grid{
    gap: 22px;
  }

  .about-process-unified-head h2{
    font-size: clamp(35px, calc(21.876px + 1.338vw), 39px);
  }

  .about-process-unified-body{
    min-height: 82px;
    padding: 24px 22px;
  }

  .about-philosophy-values{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .company-overview-section .company-summary-b2b{
    margin-bottom:30px;
  }
}
/* =========================================================
   TABLET LANDSCAPE END
========================================================= */


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

@media (min-width: 769px) and (max-width: 980px) {
  .kspl-about-bottom-cta::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 34px;
    right: 34px;
    height: 1px;
    background: rgba(17, 17, 17, 0.12);
    pointer-events: none;
  }


  .company-summary-box {
    min-height: auto;
    padding: 70px 0 0;
  }

  .company-summary-copy {
    width: 58%;
    max-width: 520px;
  }

  .company-summary-title{
    margin-top: 16px;
    font-size: clamp(38px, calc(23.422px + 1.896vw), 42px);
    line-height: 1.3;
    letter-spacing: -1.7px;
  }

  .company-summary-text,
  .company-summary-box p {
    font-size: 17px;
    line-height: 1.82;
  }

  .about-overview-sketch {
    display: block;
    position: absolute;
    right: -18px;
    top: 66px;
    width: 64%;
    max-width: 560px;
    height: auto;
    opacity: 0.42;
    z-index: 1;
  }

  .company-capabilities {
    position: relative;
    bottom: auto;
    margin-top: 58px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-capability-item {
    min-height: 96px;
    padding: 20px 22px 18px 0;
  }

  .company-capability-item:nth-child(2)::after {
    display: none;
  }

  .company-capability-item strong {
    font-size: 17px;
  }


  .recommended-industries-section > .wrap > .about-section-kicker{
    transform: translateX(calc((720px - 100vw) / 2));
  }

  .recommended-industries-section > .wrap > .section-title{
    transform: translateX(calc((720px - 100vw) / 2));
    font-size: clamp(33px, calc(3.844px + 3.791vw), 41px);
    line-height: 1.32;
    letter-spacing: -1.1px;
  }

  .recommended-industries-section .industry-wrap-wide {
    max-width: 720px;
  }

  .recommended-industries-section .industry-box{
    padding: 28px 0;
    margin-top: clamp(22px, calc(0.133px + 2.844vw), 28px);
  }

  .recommended-industries-section .industry-animated-box {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .recommended-industries-section .industry-group {
    padding: 18px 0 22px;
    border-left: 0;
    border-bottom: 1px solid #E8EBEF;
  }

  .recommended-industries-section .industry-group-title{
    font-size: clamp(18px, calc(7.066px + 1.422vw), 21px);
  }

  .recommended-industries-section .check-list li{
    padding-left: 30px;
    font-size: clamp(17.5px, calc(4.744px + 1.659vw), 21px);
    line-height: 1.78;
    white-space: normal;
  }

  .production-equipment-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .production-equipment-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.48) 100%),
  url("factory_equipment_banner_hq.webp") center bottom / cover no-repeat;
  }

  .production-equipment-main {
    padding: 42px 40px 20px;
  }

  .production-equipment-list {
    padding: 14px 40px 42px;
  }

  .production-equipment-main h2{
    font-size: clamp(41px, calc(-6.379px + 6.161vw), 54px);
  }

  .production-equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-equipment-item {
    min-height: 60px;
  }

  html body {
    padding-top: 86px;
  }

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

  h2,
  .section-head h2,
  .section-title {
    font-size: clamp(35px, calc(20.422px + 1.896vw), 39px);
    line-height: 1.34;
    letter-spacing: -1px;
  }

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

  .kspl-process-visual-section .section-head h2{
    font-size: clamp(33px, calc(18.422px + 1.896vw), 37px);
  }

  .kspl-process-step:not(:last-child)::after {
    display: none;
    content: none;
    background: none;
  }

  .kspl-process-step:not(:last-child)::before {
    display: none;
    content: none;
  }

  .kspl-process-step p {
    max-width: 150px;
    font-size: 14px;
    line-height: 1.65;
  }

  .section {
    padding-top: 92px;
    padding-bottom: 52px;
  }

  .company-overview-section {
    background: var(--soft);
  }

  .company-overview-section .company-summary-box,
  .company-overview-section + .section {
    background: var(--color-white);
  }

  .company-overview-section + .section + .section {
    background: var(--soft);
  }

  

  .kspl-factory-gallery{
    gap: clamp(14px, calc(-37.024px + 6.635vw), 28px);
    padding: 6px 0 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    flex: 0 0 640px;
    max-width: 640px;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #ededed;
    opacity: 1;
    scroll-snap-align: start;
  }

  .kspl-factory-slide img,
  .kspl-factory-slide-wide img {
    height: 380px;
    object-fit: cover;
  }

  .kspl-factory-slide-body {
    padding: 24px 28px 30px;
    min-height: auto;
  }

  .kspl-factory-slide-body h3 {
    font-size: 25px;
  }

  .kspl-factory-slide-body p {
    font-size: 17.5px;
  }

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

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

  .kspl-factory-prev {
    left: -21px;
  }

  .kspl-factory-next {
    right: -21px;
  }

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

  .facility-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: #D5DAE2;
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
  }

  .facility-carousel-dots button.is-active {
    width: 28px;
    background: #6596D8;
  }

  .hero + .section,
  .hero + .company-overview-section {
    margin-top: 0;
  }

  .company-overview-section,
  .process-material-section {
    padding-top: 92px;
    padding-bottom: 64px;
  }

  .kspl-factory-section {
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .product-archive-section {
    padding-top: 92px;
    padding-bottom: 64px;
  }

  .recommended-industries-section{
    padding-top: 92px;
    padding-bottom: 76px;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
  }

  .kspl-about-bottom-cta-section {
    padding-top: 28px;
    padding-bottom: 104px;
  }

  .recommended-industries-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
  }

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

  .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;
}

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

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

  .production-equipment-section {
    padding: 48px 0 0;
  }

  .kspl-process-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, calc(-0.578px + 1.896vw), 18px);
    max-width: 640px;
    margin: 0 auto;
  }

  .kspl-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 20px;
    border-radius: 0;
    background: var(--color-white);
    border: 1px solid rgba(13, 30, 61, 0.09);
    box-shadow: none;
    text-align: center;
  }

  .kspl-process-icon-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto;
  }

  .kspl-process-icon-wrap svg {
    width: 36px;
    height: 36px;
  }

  .kspl-process-number {
    top: -22px;
    width: 28px;
    height: 28px;
    font-size: 10.5px;
  }

  .kspl-process-step h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
  }

  .about-philosophy-visual {
    min-height: max(760px, calc(100vh - 86px + 64px));
    background-position: 68% top;
    background-size: cover;
  }

  .about-philosophy-visual::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 0, 0.08) 100%);
  }

  .about-philosophy-copy h1 {
    font-size: 62px;
    line-height: 1.1;
    letter-spacing: -2.2px;
  }

  .about-philosophy-copy p {
    margin-top: 26px;
    font-size: 28px;
    line-height: 1.55;
  }

  .about-philosophy-process {
    margin: 0;
  }

  .about-philosophy-industries-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, calc(-39.735px + 5.687vw), 16px);
    min-height: 96px;
    padding: 0 18px;
    flex-wrap: nowrap;
  }

  .about-philosophy-industries-inner strong {
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;

font-family:"Pretendard", sans-serif;
}

  .about-philosophy-industries-inner em {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
  }

  .about-philosophy-industries-inner .line {
    display: block;
    width: 60px;
    height: 1px;
    flex: 0 1 60px;
  }

  .about-p2-product-feature {
    padding-top: 104px;
    padding-bottom: 88px;
  }

  .about-p2-product-feature .kspl-p2-head {
    margin-bottom: 30px;
  }

  .about-p2-product-feature .about-product-family-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .about-p2-product-feature .about-product-family-visual picture {
    display: block;
    width: 100%;
    height: auto;
  }

  .about-p2-product-feature .about-product-family-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  .about-p2-product-grid{
    display: flex;
    gap: clamp(14px, calc(-0.578px + 1.896vw), 18px);
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .about-p2-product-grid::-webkit-scrollbar {
    display: none;
  }

  .about-p2-product-grid .kspl-p2-figure {
    flex: 0 0 calc(100% - 132px);
    width: calc(100% - 132px);
    border-radius: 0;
    scroll-snap-align: start;
  }

  .about-product-dots{
    display: flex;
    margin-top: clamp(16px, calc(8.711px + 0.948vw), 18px);
  }

  .hero > .wrap.inner {
    align-items: start;
    padding-top: 110px;
    padding-bottom: 70px;
    min-height: calc(100vh - 86px);
  }

  html body .hero > .wrap.inner {
    padding-top: 58px;
  }

  .about-philosophy-visual::after {
    inset: -400px 0 28px 0;
    background: url("tablet-about.webp") 74% center / cover no-repeat var(--color-dark);
    transform: translateY(22px) scale(1.01);
    animation-name: aboutPhilosophyBgSettleMobile;
  }

  .about-philosophy-copy {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 56px 20px 0;
    transform: none;
  }

  .about-philosophy-kicker {
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 3px;
  }

  .kspl-story-timeline {
    padding: 92px 0 64px;
  }

  .kspl-story-timeline .wrap {
    max-width: 760px;
    padding: 0 22px;
  }

  .kspl-story-kicker{
    transform: translateX(calc((760px - 100vw) / 2));
  }

  .kspl-story-title{
    transform: translateX(calc((760px - 100vw) / 2));
    font-size: clamp(37px, calc(29.711px + 0.948vw), 39px);
  }

  .kspl-story-lead {
    margin-top: 18px;
    font-size: 17px;
  }

  .kspl-story-timeline-line {
    margin-top: 28px;
  }

  .kspl-story-item,
  .kspl-story-item:nth-child(even) {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: auto;
    margin-bottom: 18px;
  }

  .kspl-story-item:nth-child(even) .kspl-story-card {
    order: 2;
  }

  .kspl-story-item:nth-child(even) .kspl-story-icon-side {
    order: 1;
  }

  .kspl-story-icon-side {
    min-height: 92px;
  }

  .kspl-story-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

  .kspl-story-icon img {
    width: 40px;
    height: 40px;
  }

  .kspl-story-logo {
    width: 32px;
  }

  .kspl-story-card {
    width: 100%;
    max-width: 100%;
    padding: 22px 20px 24px;
  }

  .kspl-story-year {
    font-size: 28px;
  }

  .kspl-story-card h3{
    font-size: 22px;
    line-height: 1.48;
  }

  .kspl-story-card p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.82;
    letter-spacing: -0.42px;
    word-break: keep-all;
  }

  .kspl-story-timeline-line::before {
    left: 42px;
  }

  .kspl-story-dot,
  .kspl-story-item:nth-child(even) .kspl-story-dot {
    left: auto;
    right: -28px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }

  .kspl-story-dot::before,
  .kspl-story-item:nth-child(even) .kspl-story-dot::before {
    left: auto;
    right: 12px;
    top: 5px;
    width: 34px;
  }


  .about-process-unified-section{
    padding: 88px 0 80px;
  }

  .about-process-unified-head{
    margin-bottom: clamp(28px, calc(6.133px + 2.844vw), 34px);
  }

  .about-process-unified-head h2{
    font-size: clamp(30px, calc(11.777px + 2.370vw), 35px);
  }

  .about-process-unified-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, calc(-15.156px + 3.791vw), 22px);
  }

  .about-process-unified-card,
  .about-process-unified-card:nth-child(4),
  .about-process-unified-card:nth-child(5){
    grid-column: auto;
  }


  .about-process-unified-body{
    min-height: 80px;
  }

  .about-philosophy-values{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .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) {

  .company-overview-section {
    overflow: hidden;
  }

  .company-summary-box {
    min-height: auto;
    padding: 44px 0 0;
  }

  .company-summary-copy {
    width: 100%;
    max-width: none;
    transform: translateX(-18px);
  }

  .company-summary-title{
    gap: 4px;
    margin: 14px 0 34px;
    font-size: clamp(35.7px, calc(33.671px + 0.564vw), 38px);
    line-height: 1.32;
    letter-spacing: -1.25px;
  }

  .company-summary-description {
    max-width: none;
  }

  .company-overview-section .company-summary-text,
  .company-overview-section .company-summary-box p {
    font-size:19px;
    line-height: 1.82;
  }

  .company-summary-text-secondary {
    margin-top: 14px;
  }

  .company-summary-desktop-break {
    display: none;
  }

  .company-summary-mobile-break {
    display: block;
  }

  .about-overview-sketch {
    display: block;
    position: relative;
    right: auto;
    top: auto;
    width: 108%;
    max-width: none;
    margin: 22px -4% -8px -4%;
    opacity: 0.31;
  }

  .company-capabilities {
    position: relative;
    bottom: auto;
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 4px;
  }

  .company-capability-item {
    min-height: auto;
    padding: 14px 0 12px;
  }

  .company-capability-item:not(:last-child)::after {
    display: none;
  }

  .company-capability-number {
    margin-bottom: 8px;
    font-size: 14px;
  }

  .company-capability-item strong {
    font-size: 17px;
  }

  .recommended-industries-section {
    padding-top: 58px;
    padding-bottom: 56px;
  }

  .recommended-industries-section .section-head {
    margin-bottom: 30px;
  }

  .recommended-industries-section .section-head h2{
    font-size: clamp(31px, calc(29.235px + 0.490vw), 33px);
    line-height: 1.34;
    letter-spacing: -0.85px;
  }

  .recommended-industries-section .industry-wrap-wide {
    max-width: 100%;
  }

  .recommended-industries-section .industry-box {
    padding: 22px 0 0;
    margin-top: 22px;
  }

  .recommended-industries-section .industry-animated-box {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .recommended-industries-section .industry-group {
    padding: 16px 0 18px;
    border-left: 0;
    border-bottom: 1px solid #E8EBEF;
  }

  .recommended-industries-section .industry-group-title{
    margin-bottom: 10px;
    font-size: clamp(16.9px, calc(15.929px + 0.270vw), 18px);
    font-weight:700;
    letter-spacing: -0.25px;
  }

  .recommended-industries-section .check-list {
    gap: 6px;
  }

  .recommended-industries-section .check-list li{
    padding-left: 27px;
    font-size: clamp(16.4px, calc(15.429px + 0.270vw), 17.5px);
    line-height: 1.72;
    font-weight:600;
    white-space: normal;
  }

  .kspl-story-kicker {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.28em;
  }

  .kspl-story-item.is-current .kspl-story-card h3 {
    font-size: 18px;
  }

  .kspl-story-item.is-current .kspl-story-card strong {
    margin-top: 7px;
    font-size: 18px;
    line-height: 1.5;
  }

  .kspl-story-timeline {
    padding: 68px 0 50px;
  }

  .kspl-story-timeline .wrap {
    max-width: 760px;
    padding: 0 16px;
  }

  .kspl-story-title{
    font-size: clamp(31px, calc(24.810px + 1.587vw), 37px);
  }

  .kspl-story-lead {
    margin-top: 18px;
    font-size:18px;
  }

  .kspl-story-timeline-line {
    margin-top: 28px;
  }

  .kspl-story-item,
  .kspl-story-item:nth-child(even) {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: auto;
    margin-bottom: 18px;
  }

  .kspl-story-item:nth-child(even) .kspl-story-card {
    order: 2;
  }

  .kspl-story-item:nth-child(even) .kspl-story-icon-side {
    order: 1;
  }

  .kspl-story-icon-side {
    min-height: 92px;
  }

  .kspl-story-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

  .kspl-story-icon img {
    width: 38px;
    height: 38px;
  }

  .kspl-story-logo {
    width: 32px;
  }

  .kspl-story-card {
    width: 100%;
    max-width: 100%;
    padding: 22px 20px 24px;
  }

  .kspl-story-year {
    font-size: 28px;
  }

  .kspl-story-card h3{
    font-size: 22px;
    line-height: 1.48;
  }

  .kspl-story-card p {
    margin-top: 16px;
    font-size:17px;
    line-height: 1.82;
    letter-spacing: -0.42px;
    word-break: keep-all;
  }

  .kspl-story-timeline-line::before {
    left: 42px;
  }

  .kspl-story-dot,
  .kspl-story-item:nth-child(even) .kspl-story-dot {
    left: auto;
    right: -28px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }

  .kspl-story-dot::before,
  .kspl-story-item:nth-child(even) .kspl-story-dot::before {
    left: auto;
    right: 12px;
    top: 5px;
    width: 34px;
  }

  .production-equipment-section {
    padding: 24px 0 0;
  }

  .production-equipment-section .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .production-equipment-card {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 0;
  }

  .production-equipment-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.94) 48%, rgba(255, 255, 255, 0.56) 100%),
  url("factory_equipment_banner_hq.webp") center bottom / cover no-repeat;
  }

  .production-equipment-card::after {
    left: -175px;
    top: -170px;
    width: 380px;
    height: 380px;
  }

  .production-equipment-main {
    padding: 30px 22px 16px;
  }

  .production-equipment-kicker {
    margin-bottom: 13px;
    font-size: 11.2px;
    letter-spacing: 2.2px;
  }

  .production-equipment-main h2{
    font-size: clamp(38.5px, calc(36.294px + 0.613vw), 41px);
    letter-spacing: -1.4px;
    margin-bottom: 13px;
  }

  .production-equipment-main h2 span {
    margin-top: 5px;
    font-size: 18px;
  }

  .production-equipment-sub {
    margin: 2px auto 20px;
    justify-content: center;
    gap: 10px;
    font-size:15.5px;
  }

  .production-equipment-sub::before,
  .production-equipment-sub::after {
    width: 38px;
  }

  .production-equipment-purpose {
    max-width: 230px;
    margin: 0 auto;
    font-size:16.2px;
    line-height: 1.72;
    text-align: center;
  }

  .equipment-purpose-br {
    display: block;
  }

  .production-equipment-list {
    padding: 12px 16px 24px;
  }

  .production-equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: rgba(255, 255, 255, 0.82);
  }

  .production-equipment-item {
    min-height: 72px;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 11px 8px;
    text-align: center;
  }

  .production-equipment-item svg {
    width: 22px;
    height: 22px;
    margin: 0 auto;
  }

  .production-equipment-ton {
    font-size: 21px;
  }

  .production-equipment-count {
    font-size: 15px;
  }


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

  .section {
    padding-top: 54px;
    padding-bottom: 56px;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-head h2,
  .section-title {
    font-size: clamp(29px, calc(22.810px + 1.587vw), 35px);
    line-height: 1.42;
    letter-spacing: -0.5px;
  }

  .section-head p,
  .section p,
  .check-list li {
    font-size: 16px;
    line-height: 1.85;
  }


  .section-head p,
.section p{
    font-size:17px;
    line-height: 1.85;
  }

  .company-summary-box,
  .company-detail-content {
    padding: 20px 18px;
    border-radius: 0;
  }


  

  .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .image-card img {
    height: 150px;
  }

  .image-card p {
    font-size:17px;
  }

  .image-card span {
    font-size: 13px;
  }

  .industry-box {
    padding: 20px 0;
  }

  .industry-group {
    padding: 18px 0;
    border-left: 0;
    border-bottom: 1px solid #E8EBEF;
  }

  .industry-group-title {
    font-size: 18px;
  }

  .check-list li {
    padding-left: 28px;
  }

  .kspl-about-bottom-cta-section {
    padding: 48px 16px 70px;
  }

  .kspl-about-bottom-cta::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: rgba(17, 17, 17, 0.12);
    pointer-events: none;
  }

  .kspl-about-bottom-cta {
    padding: 34px 22px;
    border-radius: 0;
  }

  .kspl-about-bottom-cta h2 {
    font-size: clamp(25px, calc(18.810px + 1.587vw), 31px);
    line-height: 1.38;
    letter-spacing: -0.4px;
  }

  .kspl-about-bottom-cta p {
    font-size:17px;
    line-height: 1.85;
  }

  .kspl-about-cta-btns {
    gap: 10px;
    margin-top: 24px;
  }

  .kspl-about-cta-btn {
    width: 100%;
    min-width: 0;
    max-width: 320px;
    height: 52px;
    font-size: 15px;
  }

  

  

  

  

  

  .hero + .section,
  .hero + .company-overview-section {
    margin-top: 0;
  }

  

  .product-archive-section .section-head {
    margin-bottom: 28px;
  }

  .product-archive-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-archive-main,
  .product-archive-side-card {
    border-radius: 0;
  }

  .product-archive-main img,
  .product-archive-side-card img {
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }

  .product-archive-banner {
    margin-top: 24px;
    height: auto;
  }

  .product-archive-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: center;
    border-radius: 0;
  }

  .kspl-factory-gallery {
    gap: 14px;
    padding: 2px 16px 18px 0;
    margin-right: -16px;
    overflow-x: auto;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: auto;
  }

  .kspl-factory-gallery::-webkit-scrollbar {
    display: none;
  }

  .kspl-factory-slide,
  .kspl-factory-slide-wide {
    flex: 0 0 82vw;
    max-width: 82vw;
    border-radius: 0;
    scroll-snap-align: start;
  }

  .kspl-factory-slide img,
  .kspl-factory-slide-wide img {
    height: 220px;
  }

  .kspl-factory-slide-body {
    padding: 18px 17px 20px;
  }

  .kspl-factory-slide-kicker {
    font-size: 11px;
    letter-spacing: 2.2px;
  }

  .kspl-factory-slide-body h3 {
    font-size: 19px;
  }

  .kspl-factory-slide-body p {
    font-size:16px;
    line-height: 1.8;
  }

  .kspl-factory-prev {
    left: 8px;
  }

  .kspl-factory-next {
    right: 8px;
  }

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

  .facility-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: #D5DAE2;
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
  }

  .facility-carousel-dots button.is-active {
    width: 28px;
    background: #6596D8;
  }

  .kspl-factory-arrow {
    display: none;
  }

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


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

  .kspl-final-process h2 {
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;
}

  .kspl-process-visual-section {
    padding: 52px 0 56px;
  }

  .kspl-process-visual-section .section-head {
    margin-bottom: 46px;
  }

  .kspl-process-visual-section .section-head h2{
    font-size: clamp(25.4px, calc(23.988px + 0.392vw), 27px);
    line-height: 1.38;
    letter-spacing: -0.55px;
  }

  .kspl-process-visual-section .section-head p {
    max-width: 330px;
    font-size:16.8px;
    line-height: 1.82;
  }

  .kspl-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 390px;
    margin: 0 auto;
  }

  .kspl-process-step::before,
  .kspl-process-step::after {
    display: none;
    content: none;
  }

  .kspl-process-number {
    top: -22px;
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .kspl-process-icon-wrap svg {
    width: 32px;
    height: 32px;
  }

  .kspl-process-step {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px;
    border-radius: 0;
    background: var(--color-white);
    border: 1px solid rgba(13, 30, 61, 0.09);
    box-shadow: none;
    text-align: center;
  }

  .kspl-process-icon-wrap {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .kspl-process-step h3 {
    margin: 0;
    font-size: 15.2px;
    line-height: 1.45;
    text-align: center;
  }

  .kspl-process-step p {
    max-width: 250px;
    margin: 0 auto;
    font-size:15.6px;
    line-height: 1.68;
    text-align: center;
  }

  .about-philosophy-bridge {
    padding: 72px 16px 56px;
  }

  .about-philosophy-bridge-kicker {
    font-size: 12px;
    letter-spacing: 0.24em;

font-family: "Pretendard", sans-serif;
}

  .about-philosophy-bridge h2 {
    font-size: 29px;
    line-height: 1.38;
    letter-spacing: -0.8px;

font-family: "Pretendard", sans-serif;
}

  .about-philosophy-values {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 12px 0;
  }

  .about-philosophy-value {
    min-height: 122px;
    padding: 20px 16px;
  }

  .about-philosophy-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 11px;
  }

  .about-philosophy-value strong {
    font-size: 20px;

font-family:"Pretendard", sans-serif;
}

  .about-philosophy-value span {
    font-size: 15px;

font-family:"Pretendard", sans-serif;
}

  .about-philosophy-visual {
    min-height: max(760px, calc(100vh - 110px + 64px));
    background-position: 68% top;
    background-size: cover;
  }

  .about-philosophy-visual::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 0, 0.08) 100%);
  }

  .about-philosophy-copy h1 {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -2px;
    animation-name: aboutPhilosophyTitleUpMobile;
  }

  .about-philosophy-copy p {
    margin-top: 22px;
    font-size:26px;
    line-height: 1.45;
  }

  .about-philosophy-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    margin: 0;
  }

  .about-philosophy-process div {
    aspect-ratio: 4/3;
  }

  .about-philosophy-process div:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 2/1;
  }

  .about-philosophy-industries-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 4px;
    padding: 16px 10px;
    flex-wrap: nowrap;
  }

  .about-philosophy-industries-inner strong {
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -0.8px;
    white-space: nowrap;

font-family:"Pretendard", sans-serif;
}

  .about-philosophy-industries-inner em,
  .about-philosophy-industries-inner .line {
    display: none;
  }

  .about-p2-product-feature {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .about-p2-product-feature .kspl-p2-head {
    margin-bottom: 26px;
    text-align: left;
  }

  .about-p2-product-feature .kspl-p2-head h2 {
    font-size: clamp(31px, calc(26.873px + 1.058vw), 35px);
    line-height: 1.38;
  }

  .about-p2-product-feature .about-product-family-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0 auto 24px;
  }

  .about-p2-product-feature .about-product-family-visual picture {
    display: block;
    width: 100%;
    height: auto;
  }

  .about-p2-product-feature .about-product-family-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  .about-p2-product-grid {
    display: flex;
    gap: 14px;
    max-width: none;
    margin: 0 auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .about-p2-product-grid::-webkit-scrollbar {
    display: none;
  }

  .about-p2-product-grid .kspl-p2-figure {
    flex: 0 0 calc(100% - 72px);
    width: calc(100% - 72px);
    aspect-ratio: 1449 / 1085;
    border-radius: 0;
    scroll-snap-align: start;
  }

  .about-product-dots {
    display: flex;
    margin-top: 16px;
  }

  .kspl-process-step.kspl-process-step-shipping {
    grid-template-columns: 1fr;
  }

  .kspl-shipping-photo {
    height: 180px;
  }

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

  .kspl-p2-wrap {
    width: calc(100% - 32px);
    max-width: none;
  }

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

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

  .hero > .wrap.inner {
    min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 44px 20px 72px;
  }

  .hero > .wrap.inner > div:first-child {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-top: 0;
    position: relative;
    z-index: 2;
  }

  .about-philosophy-value + .about-philosophy-value::before {
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 84%;
    height: 1px;
    transform: translateX(-50%);
  }

  .about-philosophy-visual::after {
    inset: -112px 0 44px 0;
    background: url("mobilea2.webp") center top / cover no-repeat var(--color-dark);
    transform: translateY(22px) scale(1.01);
    animation-name: aboutPhilosophyBgSettleMobile;
  }

  .about-philosophy-copy {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 44px 20px 0;
    transform: none;
  }

  .about-philosophy-kicker {
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 3px;
  }


  .about-process-unified-section{
    padding: 64px 0 58px;
  }

  .about-process-unified-head{
    margin-bottom: 28px;
  }

  .about-process-unified-head h2{
    margin-bottom: 0;
    font-size: clamp(28.2px, calc(26.612px + 0.441vw), 30px);
    line-height: 1.42;
    letter-spacing: -0.8px;
  }


  .about-process-unified-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .about-process-unified-card,
  .about-process-unified-card:nth-child(4),
  .about-process-unified-card:nth-child(5),
  .about-process-unified-card:last-child{
    grid-column: auto;
    width: 100%;
  }

  .about-process-unified-image{
    aspect-ratio: 4 / 3;
  }

  .about-process-unified-number{
    min-width: 38px;
    height: 30px;
    padding: 0 7px;
    font-size: 13px;
  }

  .about-process-unified-body{
    min-height: 64px;
    padding: 16px 8px;
    gap: 6px;
  }

  .about-process-unified-body h3{
    margin: 0;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.35;
    letter-spacing: -0.55px;
  }


  .company-overview-section .company-summary-b2b{
    margin-top:10px;
  }

  .about-p2-product-summary{
    margin-top:20px;
    padding:0;
  }

  .about-p2-product-summary-inner{
    padding:22px 20px;
  }

  .about-p2-product-summary h3{
    font-size:24px;
  }

  .about-p2-product-summary p{
    margin-top:11px;
    font-size:14px;
    line-height:1.65;
  }

  .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
========================================================= */