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

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

:root{
--color-navy: #0d1e3d;
--ks-text-main: var(--color-text-main);
--ks-white: var(--color-white);
--kspl-bg: #ffffff;
--kspl-line: rgba(13, 30, 61, 0.11);
}
main{
font-family:"Paperlogy","Pretendard",sans-serif;
}


body.contact-page{
--page-active-color: #F47C2C;
--page-hover-color: #777777;
--page-drawer-hover-color: #777777;
}

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

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

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

*{
box-sizing: border-box;
}

html{
background: var(--kspl-bg);
}

body{
color: var(--B-black);
background: var(--kspl-bg);
}

.hero{
min-height: 720px;
background: var(--ks-white);
overflow: hidden;
border-radius: 0;
position: relative;
font-family:"Pretendard",sans-serif;
}

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

.hero-copy{
position: relative;
z-index: 2;
max-width: 620px;
}

.hero h1{
margin: 0 0 18px;
color: var(--B-black);
font-size: 58px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -1.8px;
}

.hero-message{
max-width: 620px;
margin-top: 130px;
color: var(--B-black);
font-size: 20px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.15px;
}

.hero-message span{
display: block;
}

.quick-btn{
height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 10px;
font-size: 17px;
font-weight:700;
letter-spacing: -0.2px;
border: 1px solid rgba(13, 30, 61, 0.16);
background: var(--ks-white);
color: var(--type-black);
transition: background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.quick-btn.primary{
background: var(--D-orange);
border-color: var(--D-orange);
color: var(--color-white);
}

.quick-btn.primary:hover,
.quick-btn.primary:focus-visible{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(244, 124, 44, 0.24);
}

.quick-btn:not(.primary):hover,
.quick-btn:not(.primary):focus-visible{
background: var(--color-navy);
border-color: var(--type-black);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(13, 30, 61, 0.2);
}

.quick-btn svg{
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}

.submit-btn{
width: 380px;
height: 56px;
border: 0;
border-radius: 7px;
background: var(--D-orange);
color: var(--color-white);
font-family:"Paperlogy","Pretendard",sans-serif;
font-size: 17px;
font-weight:700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.submit-btn:hover,
.submit-btn:focus-visible{
background: #e86e1f;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(244, 124, 44, 0.24);
}

.submit-btn-icon{
width: 26px;
height: 26px;
flex: 0 0 26px;
display: block;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

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

.submit-btn:hover .submit-btn-arrow,
.submit-btn:focus-visible .submit-btn-arrow{
transform: translate(6px, -1px);
}

.map-btn{
min-width: 170px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
border: 1px solid rgba(13, 30, 61, 0.16);
background: var(--ks-white);
color: var(--type-black);
font-size: 16px;
font-weight:700;
transition: background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.map-btn:hover{
background: var(--color-navy);
border-color: var(--type-black);
color: var(--color-white);
}

.map-btn svg{
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}

.panel{
background: var(--ks-white);
border: 1px solid var(--kspl-line);
border-radius: 0;
box-shadow: none;
}

.quick-buttons{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
max-width: 760px;
margin: 0 auto;
}

.submit-area{
grid-column: 1 /-1;
display: flex;
justify-content: center;
margin-top: 2px;
}

.form-success-message{
display: none;
grid-column: 1 /-1;
margin: 8px 0 0;
padding: 16px 18px;
border-radius: 10px;
background: rgba(255, 122, 0, 0.08);
border: 1px solid rgba(255, 122, 0, 0.24);
color: var(--type-black);
font-size: 16px;
font-weight:600;
line-height: 1.55;
text-align: center;
}

.contact-main{
background: var(--kspl-bg);
border-top: 0;
padding: 0;
}

.contact-layout{
display: grid;
grid-template-columns: 1fr;
gap: 72px;
padding: 0 0 0;
}

.contact-process{
margin-top: 82px;
padding: 38px 64px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.process-item{
position: relative;
display: grid;
grid-template-columns: 52px 1fr;
gap: 22px;
align-items: start;
padding: 0 44px;
min-height: 158px;
text-align: left;
}

.process-item:not(:last-child){
border-right: 1px solid rgba(13, 30, 61, 0.1);
}

.process-num{
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(101, 150, 216, 0.1);
color: var(--type-black);
font-size: 17px;
font-weight:700;
letter-spacing: -0.2px;
}

.process-icon{
width: 42px;
height: 42px;
margin-bottom: 16px;
display: block;
object-fit: cover;
border-radius: 0;
}

.process-content h3{
margin: 0 0 12px;
color: var(--type-black);
font-size: 20px;
font-weight:700;
line-height: 1.25;
letter-spacing: -0.35px;
}

.process-content p{
margin: 0;
color: var(--A-gray);
font-size: 16.5px;
font-weight:600;
line-height: 1.6;
letter-spacing: -0.2px;
}

.quick-consult{
padding: 28px 38px 30px;
text-align: center;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.quick-consult h2{
margin: 0 0 10px;
color: var(--type-black);
font-size: clamp(26px, calc(15.931px + 1.309vw), 34px);
font-weight:700;
line-height: 1.25;
letter-spacing: -0.65px;
}

.quick-consult p{
margin: 0 auto 24px;
color: var(--A-gray);
font-size: 19px;
font-weight:600;
line-height: 1.55;
}

.contact-direct-person{
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 8px 12px;
margin: 0 auto 26px;
font-family: "Paperlogy","Pretendard",sans-serif;
}

.contact-direct-kicker{
color: #4B7FC4;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 0.08em;
}

.contact-direct-name{
color: var(--type-black);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
letter-spacing: -0.25px;
}


.contact-direct-separator{
color: rgba(17,17,17,0.28);
font-size: 13px;
font-weight: 600;
}

.contact-direct-phone{
color: var(--type-black);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.01em;
text-decoration: none;
}

.contact-direct-phone:hover,
.contact-direct-phone:focus-visible{
color: #6596D8;
}

.contact-form-panel{
padding: 40px 42px 36px;
}

.form-title{
text-align: center;
margin-bottom: clamp(22px, calc(-40.930px + 8.183vw), 72px);
}

.form-title h2{
margin: 0 0 8px;
color: #111111;
font-size: clamp(26px, calc(15.931px + 1.309vw), 34px);
font-weight:700;
line-height: 1.25;
letter-spacing: -0.65px;
}

.contact-form{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 28px;
row-gap: 24px;
}

.field{
min-width: 0;
text-align: left;
}

.field.full{
grid-column: 1 /-1;
}

.field label{
display: block;
margin: 0 0 9px;
color: var(--B-black);
font-size: 15px;
font-weight:700;
line-height: 1.25;
letter-spacing: -0.2px;
}

.field label .required{
color: var(--D-orange);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width: 100%;
height: 48px;
margin: 0;
padding: 0 16px;
border: 1px solid rgba(13, 30, 61, 0.12);
border-radius: 7px;
background: var(--ks-white);
color: #111111;
font-family:"Paperlogy","Pretendard",sans-serif;
font-size: 15px;
font-weight:600;
line-height: 1.4;
outline: none;
box-shadow: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
border-color: var(--C-blue);
box-shadow: 0 0 0 3px rgba(101, 150, 216, 0.12);
}

.contact-form textarea{
height: 130px;
min-height: 130px;
resize: vertical;
}

.agree-row{
grid-column: 1 /-1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
text-align: left;
color: var(--B-black);
font-size: 14.5px;
font-weight:600;
margin-top: -10px;
}

.agree-row input{
width: 18px;
height: 18px;
accent-color: var(--D-orange);
}

.privacy-desc{
grid-column: 1 / -1;
margin: 2px 0 0 26px;
color: var(--B-black);
font-size: 14px;
font-weight:600;
line-height: 1.7;
}

.location-section{
margin-top: 82px;
padding-bottom: 100px;
background: var(--kspl-bg);
}

.location-inner{
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding: 0;
}

.location-head{
margin: 0 0 46px;
text-align: left;
}

.location-kicker{
display: inline-block;
margin: 0 0 12px;
padding-bottom: 7px;
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
border-bottom: 1px solid rgba(255, 122, 0, 0.42);
font-size: 14.5px;
font-weight:700;
letter-spacing: 3px;
line-height: 1.15;
text-transform: uppercase;
}

.location-head h2{
margin: 0 0 10px;
color: var(--type-black);
font-size: clamp(27px, calc(9.380px + 2.291vw), 41px);
font-weight:700;
line-height: 1.15;
letter-spacing: -1.2px;
}

.location-head p{
margin: 0;
color: var(--A-gray);
font-size: 18px;
font-weight:600;
line-height: 1.65;
letter-spacing: -0.2px;
}

.location-map-card{
overflow: hidden;
border-radius: 0;
background: var(--ks-white);
border: 0;
box-shadow: none;
}

.map-frame-wrap{
position: relative;
height: 430px;
background: #ffffff;
overflow: hidden;
border-radius: 0;
}

.map-frame{
width: 100%;
height: 100%;
border: 0;
display: block;
background: #ffffff;
}

.map-fallback-link{
display: block;
width: 100%;
height: 100%;
background: var(--ks-white);
}

.map-fallback-image{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

.kspl-map-info{
min-width: 220px;
padding: 14px 16px;
background: #ffffff;
border: 1px solid rgba(13, 30, 61, 0.14);
box-shadow: 0 8px 24px rgba(13, 30, 61, 0.16);
font-family:"Paperlogy","Pretendard",sans-serif;
}

.kspl-map-info strong{
display: block;
margin-bottom: 5px;
color: #111111;
font-size: 16px;
font-weight:700;
line-height: 1.3;
}

.kspl-map-info span{
display: block;
color: #666666;
font-size: 13px;
font-weight:600;
line-height: 1.45;
white-space: nowrap;
}

.location-info{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 26px 32px 28px;
background: var(--ks-white);
border-top: 1px solid rgba(13, 30, 61, 0.08);
}

.location-info h2{
margin: 0 0 6px;
color: var(--type-black);
font-size: 23px;
font-weight:700;
line-height: 1.25;
letter-spacing: -0.3px;
}

.location-info p{
margin: 0;
color: var(--B-black);
font-size: 17px;
font-weight:600;
line-height: 1.65;
letter-spacing: -0.2px;
}

.map-actions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}

.contact-winding-process-section{
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding: 0;
}

.contact-winding-process-card{
display: grid;
grid-template-columns: 0.86fr 1.14fr;
align-items: stretch;
overflow: hidden;
min-height: 390px;
background: var(--ks-white);
border: 0;
border-radius: 0;
box-shadow: none;
}

.contact-winding-process-image{
position: relative;
min-height: 390px;
overflow: hidden;
border-radius: 0;
background: #ffffff;
}

.contact-winding-process-image img{
width: 100%;
height: 100%;
min-height: 390px;
object-fit: cover;
object-position: center center;
display: block;
}


.contact-production-memo{
width: calc(100% - 48px);
max-width: 1380px;
margin: 72px auto 0;
padding: 0;
}

.contact-production-memo-box{
display: grid;
grid-template-columns: 1.05fr repeat(4, 1fr);
align-items: stretch;
overflow: hidden;
background: var(--ks-white);
border: 0;
border-radius: 0;
box-shadow: none;
}

.contact-production-memo-head{
min-width: 0;
padding: 28px 30px;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid rgba(13, 30, 61, 0.1);
}

.contact-production-memo-kicker{
display: block;
margin: 0 0 10px;
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
font-size: 13.5px;
font-weight:700;
letter-spacing: 2.8px;
line-height: 1.1;
text-transform: uppercase;
}

.contact-production-memo-title{
margin: 0 0 8px;
color: var(--type-black);
font-size: clamp(21px, calc(19.741px + 0.164vw), 22px);
font-weight:700;
line-height: 1.25;
letter-spacing: -0.45px;
}

.contact-production-memo-item{
min-width: 0;
padding: 28px 24px 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid rgba(13, 30, 61, 0.1);
}

.contact-production-memo-item:last-child{
border-right: 0;
}

.contact-production-memo-icon{
width: 54px;
height: 54px;
margin: 0 0 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--type-black);
}

.contact-production-memo-icon img{
width: 54px;
height: 54px;
display: block;
object-fit: cover;
border-radius: 0;
}

.contact-production-memo-label{
margin: 0 0 8px;
color: var(--type-black);
font-size: 16.5px;
font-weight:700;
line-height: 1.25;
letter-spacing: -0.25px;
}

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

.contact-trust-faq-section{
width: 100%;
max-width: 1380px;
margin: 0 auto;
}

.contact-trust-faq-card{
overflow: hidden;
display: grid;
grid-template-columns: 0.82fr 1.18fr;
background: var(--ks-white);
border: 0;
border-radius: 0;
box-shadow: none;
}

.contact-trust-faq-intro{
position: relative;
min-width: 0;
padding: 64px 42px;
background: linear-gradient(
    135deg,
    var(--ks-white) 0%,
    #ffffff 56%,
    #ffffff 100%
  );
border-right: 1px solid rgba(13, 30, 61, 0.08);
}

.contact-trust-faq-intro::after{
content: "";
position: absolute;
right: -80px;
bottom: -110px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 122, 0, 0.055);
pointer-events: none;
}

.contact-trust-faq-kicker{
display: inline-block;
margin: 0 0 14px;
padding-bottom: 8px;
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
border-bottom: 1px solid rgba(255, 122, 0, 0.42);
font-size: 13.5px;
font-weight:700;
letter-spacing: 2.8px;
line-height: 1.15;
text-transform: uppercase;
}

.contact-trust-faq-title{
position: relative;
z-index: 1;
margin: 0 0 13px;
color: var(--type-black);
font-size: clamp(25px, calc(16.190px + 1.146vw), 32px);
font-weight:700;
line-height: 1.18;
letter-spacing: -0.85px;
}

.contact-trust-flow{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 30px;
}

.contact-trust-flow-item{
min-width: 0;
padding: 16px 14px 15px;
border-radius: 0;
background: rgba(255, 255, 255, 0.82);
border: 0;
}

.contact-trust-flow-icon{
width: 44px;
height: 44px;
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--type-black);
}

.contact-trust-flow-icon img{
width: 44px;
height: 44px;
display: block;
object-fit: cover;
border-radius: 0;
}

.contact-trust-flow-label{
margin: 0;
color: var(--type-black);
font-size: 15px;
font-weight:700;
line-height: 1.25;
letter-spacing: -0.2px;
}

.contact-trust-faq-list{
min-width: 0;
padding: 34px 38px;
background: var(--ks-white);
counter-reset: contact-faq;
}

.contact-trust-faq-item{
border-bottom: 1px solid rgba(13, 30, 61, 0.09);
counter-increment: contact-faq;
}

.contact-trust-faq-item:first-child{
border-top: 1px solid rgba(13, 30, 61, 0.09);
}

.contact-trust-faq-item summary{
position: relative;
min-height: 64px;
padding: 20px 46px 18px 48px;
color: #111111;
font-size: 18px;
font-weight:600;
line-height: 1.4;
letter-spacing: -0.35px;
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: pretty;
cursor: pointer;
list-style: none;
}

.contact-trust-faq-item summary::-webkit-details-marker{
display: none;
}

.contact-trust-faq-item summary::before{
content: counter(contact-faq, decimal-leading-zero);
position: absolute;
left: 0;
top: 50%;
width: 30px;
transform: translateY(-50%);
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
font-size: 12.5px;
font-weight:700;
line-height: 1;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}

.contact-trust-faq-item summary::after{
content: "+";
position: absolute;
right: 0;
top: 50%;
width: 30px;
height: 30px;
transform: translateY(-50%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 122, 0, 0.1);
color: var(--D-orange);
font-size: 22px;
font-weight:600;
line-height: 0.9;
}

.contact-trust-faq-item[open] summary::after{
content: "\2212";
background: var(--D-orange);
color: var(--ks-white);
-webkit-text-fill-color: var(--ks-white);
}

.contact-trust-faq-answer{
margin: 0;
padding: 0 46px 22px 48px;
display: grid;
gap: 7px;
color: var(--A-gray);
font-size: 16.5px;
font-weight:600;
line-height: 1.72;
letter-spacing: -0.2px;
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: pretty;
}

.contact-product-family-section{
width: calc(100% - 48px);
max-width: 1380px;
margin: 72px auto 0;
padding: 0;
}

.contact-brand-film-section{
position: relative;
width: calc(100% - 48px);
max-width: 1380px;
margin: 92px auto 0;
padding: 0;
}

.contact-brand-film-head{
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 0 34px;
text-align: left;
}

.contact-brand-film-kicker{
display: inline-block;
margin: 0 0 18px;
padding: 0 0 8px;
color: var(--D-orange);
font-size: 14px;
font-weight:700;
line-height: 0.9;
letter-spacing: 4px;
border-bottom: 1px solid rgba(244, 124, 44, 0.62);
}

.contact-brand-film-title{
margin: 0;
color: #111111;
font-size: clamp(34px, calc(24.939px + 2.323vw), 57px);
font-weight:700;
line-height: 0.88;
letter-spacing: -2.8px;
}

.contact-brand-film-desc{
margin: 24px 0 0;
color: #666666;
font-size: 19px;
font-weight:600;
line-height: 1.55;
letter-spacing: -0.45px;
}

.contact-product-family-card{
overflow: hidden;
border-radius: 0;
background: #ffffff;
border: 0;
box-shadow: none;
opacity: 0;
transform: translateY(34px);
}

.contact-product-family-card.is-visible{
animation: fadeUpKsplFinal 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.contact-product-family-card img{
width: 100%;
height: auto;
display: block;
}

.contact-product-family-card video{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
display: block;
object-fit: contain;
object-position: center center;
}

.contact-product-family-card:has(video){
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
}

.contact-brand-film-card{
position: relative;
max-width: 1380px;
margin: 0 auto;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
background: #050505;
border: 0;
box-shadow: 0 30px 66px rgba(0, 0, 0, 0.22),
    0 14px 32px rgba(82, 58, 38, 0.12);
}

.contact-brand-film{
position: relative;
z-index: 1;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
display: block;
border-radius: 0;
background: #05070a;
object-fit: contain;
object-position: center center;
}

.js-kspl-product-family-lightbox,
.js-kspl-product-family-lightbox *,
.js-kspl-product-family-lightbox img,
.contact-brand-film-card,
.contact-brand-film-card *,
.contact-brand-film-card video{
cursor: zoom-in;
}

.kicker{
display: inline-block;
margin: 0 0 18px 0;
padding-bottom: 10px;
font-size: 14.5px;
font-weight:700;
letter-spacing: 3px;
line-height: 1.15;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 122, 0, 0.42);
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
border-bottom-color: rgba(255, 122, 0, 0.42);
}

.contact-brand-title{
color: var(--type-black);
-webkit-text-fill-color: var(--type-black);
font-size: 93px;
font-weight:700;
line-height: 0.86;
letter-spacing: -4px;
}

.contact-hero-brand-sub{
margin: 24px 0 0;
color: var(--color-navy);
-webkit-text-fill-color: var(--color-navy);
font-size: 40px;
font-weight:700;
line-height: 1.42;
letter-spacing: -1.6px;
min-height: 48px;
}

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

html body .hero .kicker{
display: inline-block;
margin: 0 0 18px 0;
padding: 0;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 13.5px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 3.2px;
text-transform: uppercase;
border-bottom: 0;
}

html body .hero h1,
html body .contact-brand-title{
margin-top: 0;
margin-bottom: 0;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 92px;
font-weight: 900;
line-height: 0.96;
letter-spacing: -4px;
}

html body .hero h1 *,
html body .contact-brand-title *{
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}

html body .contact-brand-title .contact-title-blue{
color: #086DFF;
-webkit-text-fill-color: #086DFF;
}

html body .contact-hero-brand-sub{
margin: 20px 0 0;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 40px;
font-weight:700;
line-height: 1.42;
letter-spacing: -1.6px;
}

html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.15px;
text-shadow: none;
}

html body .hero-message,
html body .hero-message-animate,
html body .hero-message-animate p{
max-width: 760px;
margin-top: 106px;
}

.contact-hero-info{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
max-width: none;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}

.contact-hero-info > span{
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}

.contact-hero-info-item{
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
}

.contact-hero-info-item svg{
width: 19px;
height: 19px;
flex: 0 0 19px;
fill: none;
stroke: #ffffff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(4px);
}

.contact-hero-info-item a{
color: #ffffff;
text-decoration: none;
}

.contact-hero-info-divider:nth-child(2){
display: inline-block;
opacity: 0;
visibility: hidden;
}

.contact-hero-info-divider:nth-child(4){
display: none;
}

.contact-hero-info-divider::before{
content: "|";
}

.contact-review-banner-section .contact-product-family-card{
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 2.2 / 1;
overflow: hidden;
border-radius: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
box-shadow: none;
}

.contact-review-banner-section img[src="contact_review_banner_hq.webp"]{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}

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

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

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

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

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

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

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

.kspl-brand-video-card,
.kspl-brand-video-frame,
.kspl-brand-video-wrap,
.contact-brand-film-card,
.kspl-brand-video-card video,
.kspl-brand-video-frame video,
.kspl-brand-video-wrap video,
.kspl-brand-video,
.contact-brand-film{
cursor: zoom-in;
}

.kspl-product-family-lightbox,
.kspl-case-lightbox,
.kspl-products-lightbox,
.kspl-brand-film-lightbox,
.kspl-video-lightbox{
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
padding: 32px;
box-sizing: border-box;
overflow: hidden;
border-radius: 0;
background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.10), transparent 34%),
radial-gradient(circle at 50% 90%, rgba(101, 150, 216, 0.12), transparent 38%),
rgba(13, 16, 22, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

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

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

.kspl-product-family-lightbox img,
.kspl-product-family-lightbox video,
.kspl-case-lightbox img,
.kspl-products-lightbox img,
.kspl-brand-film-lightbox video,
.kspl-video-lightbox video{
display: block;
width: auto;
height: auto;
max-width: min(1180px, 94vw);
max-height: 84vh;
object-fit: cover;
overflow: hidden;
border-radius: 0;
background: #05070a;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 42px 92px rgba(0, 0, 0, 0.48),
    0 14px 34px rgba(0, 0, 0, 0.32);
}

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

.kspl-product-family-lightbox-close:hover,
.kspl-case-lightbox-close:hover,
.kspl-products-lightbox-close:hover,
.kspl-brand-film-lightbox-close:hover,
.kspl-video-lightbox-close:hover,
.kspl-product-family-lightbox .lightbox-close:hover,
.kspl-brand-film-lightbox .lightbox-close:hover,
.kspl-video-lightbox .lightbox-close:hover{
transform: scale(1.06);
background: #ffffff;
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

.kspl-product-family-lightbox-close::before,
.kspl-product-family-lightbox-close::after,
.kspl-case-lightbox-close::before,
.kspl-case-lightbox-close::after,
.kspl-products-lightbox-close::before,
.kspl-products-lightbox-close::after,
.kspl-brand-film-lightbox-close::before,
.kspl-brand-film-lightbox-close::after,
.kspl-video-lightbox-close::before,
.kspl-video-lightbox-close::after,
.kspl-product-family-lightbox .lightbox-close::before,
.kspl-product-family-lightbox .lightbox-close::after,
.kspl-brand-film-lightbox .lightbox-close::before,
.kspl-brand-film-lightbox .lightbox-close::after,
.kspl-video-lightbox .lightbox-close::before,
.kspl-video-lightbox .lightbox-close::after{
content: "";
position: absolute;
width: 22px;
height: 2.4px;
border-radius: 999px;
background: #111111;
}

.kspl-product-family-lightbox-close::before,
.kspl-case-lightbox-close::before,
.kspl-products-lightbox-close::before,
.kspl-brand-film-lightbox-close::before,
.kspl-video-lightbox-close::before,
.kspl-product-family-lightbox .lightbox-close::before,
.kspl-brand-film-lightbox .lightbox-close::before,
.kspl-video-lightbox .lightbox-close::before{
transform: rotate(45deg);
}

.kspl-product-family-lightbox-close::after,
.kspl-case-lightbox-close::after,
.kspl-products-lightbox-close::after,
.kspl-brand-film-lightbox-close::after,
.kspl-video-lightbox-close::after,
.kspl-product-family-lightbox .lightbox-close::after,
.kspl-brand-film-lightbox .lightbox-close::after,
.kspl-video-lightbox .lightbox-close::after{
transform: rotate(-45deg);
}

body.kspl-product-family-lightbox-open,
body.kspl-case-lightbox-open,
body.kspl-products-lightbox-open,
body.kspl-brand-film-lightbox-open,
body.kspl-video-lightbox-open{
overflow: hidden;
border-radius: var(--radius-xl);
}

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

.contact-mobile-sub-break{
display:none;
}

@media (min-width: 1281px){

/* SECTION VERTICAL BREATHING +10px — body sections only */
.contact-main .contact-process,
.contact-main .quick-consult,
.contact-review-banner-section,
.contact-trust-faq-section,
.contact-winding-process-section,
.contact-production-memo,
.contact-brand-film-section,
.location-section {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}

html body .hero .kicker{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyFadeUp 1.0s ease-out .30s both;
}

html body .hero h1,
html body .contact-brand-title{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyTitleUp 1.10s ease-out .75s both;
}

html body .hero .contact-hero-brand-sub{
visibility: visible;
translate: 0 24px;
animation: aboutPhilosophyFadeUp 1.00s ease-out 1.20s both;
}

html body .hero-message-animate .contact-hero-info-item,
html body .hero-message-animate .contact-hero-info-divider{
visibility: visible;
opacity: 0;
transform: translateY(20px);
animation: fadeUpKsplFinal 1.05s cubic-bezier(0.22,0.61,0.36,1) forwards;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(1){
animation-delay: 2.20s;
}

html body .hero-message-animate .contact-hero-info-divider:nth-child(2),
html body .hero-message-animate .contact-hero-info-item:nth-child(3){
animation-delay: 2.50s;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(4){
animation-delay: 2.80s;
}

.contact-main{
border-top-width: 0;
padding-bottom: 0;
}

.contact-layout{
gap: 72px;
}

.contact-process{
margin-top: 96px;
}

.contact-review-banner-section + .contact-trust-faq-section{
margin-top: 24px;
}

.contact-production-memo{
margin-top: 96px;
}

.contact-brand-film-section{
margin-top: 96px;
}

.location-section{
margin-top: 120px;
}

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

.hero{
min-height: calc(100vh - 92px);
position: relative;
overflow: hidden;
border-radius: 0;
background: #000000;
isolation: isolate;
}

.hero>.wrap.inner,
.hero .inner,
.hero .inner>div{
position: relative;
z-index: 2;
transform: translateY(-9px);
}

html body .hero-message-animate{
opacity: 1;
visibility: visible;
transform: none;
}

.hero::before{
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("contacthero-pc.webp") center center / cover no-repeat #000000;
transform-origin: center center;
animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
}

html body .contact-main > .wrap.contact-layout{
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
justify-items: center;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .contact-process{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .quick-consult{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .contact-form-panel{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding: 49px 24px 45px;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .contact-winding-process-section{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .contact-winding-process-section
.contact-winding-process-card{
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}

html body .contact-main > .wrap.contact-layout > .contact-review-banner-section{
width: 100%;
max-width: 1380px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
transform: none;
box-sizing: border-box;
}

.contact-review-banner-section .contact-product-family-card,
html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12{
display: block;
grid-template-columns: 1fr;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0;
height: auto;
min-height: 0;
aspect-ratio: 2.2 / 1;
overflow: hidden;
border-radius: 0;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image{
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: 0;
background: #ffffff;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image img[src="contactpage.webp"]{
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 0;
}
}

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

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

@media (min-width: 981px) and (max-width: 1280px){

/* SECTION VERTICAL BREATHING +10px — body sections only */
.contact-main .contact-process,
.contact-main .quick-consult,
.contact-review-banner-section,
.contact-trust-faq-section,
.contact-winding-process-section,
.contact-production-memo,
.contact-brand-film-section,
.location-section {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: border-box;
}


/* Tablet landscape 1240px optical axis — CONTACT specific wrappers */
.contact-process,
.location-inner,
.contact-winding-process-section,
.contact-production-memo,
.contact-trust-faq-section,
.contact-product-family-section,
.contact-brand-film-section,
.contact-brand-film-card,
html body .contact-main > .wrap.contact-layout > .contact-process,
html body .contact-main > .wrap.contact-layout > .quick-consult,
html body .contact-main > .wrap.contact-layout > .contact-form-panel,
html body .contact-main > .wrap.contact-layout > .contact-winding-process-section,
html body .contact-main > .wrap.contact-layout > .contact-review-banner-section{
max-width: 1240px;
}


html body .hero .kicker{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyFadeUp 1.0s ease-out .30s both;
}

html body .hero .contact-hero-brand-sub{
visibility: visible;
translate: 0 24px;
animation: aboutPhilosophyFadeUp 1.00s ease-out 1.20s both;
}

html body .hero-message-animate .contact-hero-info-item,
html body .hero-message-animate .contact-hero-info-divider{
visibility: visible;
opacity: 0;
transform: translateY(20px);
animation: fadeUpKsplFinal 1.05s cubic-bezier(0.22,0.61,0.36,1) forwards;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(1){
animation-delay: 2.20s;
}

html body .hero-message-animate .contact-hero-info-divider:nth-child(2),
html body .hero-message-animate .contact-hero-info-item:nth-child(3){
animation-delay: 2.50s;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(4){
animation-delay: 2.80s;
}

.contact-layout{
gap: 76px;
}

.contact-form-panel{
margin-top: 20px;
padding-top: 49px;
padding-bottom: 45px;
}

.location-section,
.contact-production-memo{
margin-top: 116px;
}

.contact-brand-film-section{
width: calc(100% - 44px);
margin-top: 96px;
padding: 0;
}

.hero>.wrap.inner,
.hero .inner,
.hero .inner>div{
position: relative;
z-index: 2;
transform: translateY(-6px);
}

html body .hero-message-animate{
opacity: 1;
visibility: visible;
transform: none;
}

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

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

.hero-message,
.hero-message span,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-size: 18px;
line-height: 1.45;
font-weight: 550;
}

.contact-main{
border-top-width: 0;
padding-top: 44px;
padding-bottom: 96px;
}

h2{
font-size: clamp(35px, calc(21.876px + 1.338vw), 39px);
line-height: 1.14;
letter-spacing: -1px;
}

.contact-process{
margin-top: 108px;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
padding: 28px 40px;
gap: 20px;
}

.process-item{
min-height: auto;
padding: 24px 0;
border-right: 0;
border-bottom: none;
}

.process-item:last-child{
border-bottom: 0;
}

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

.quick-buttons{
grid-template-columns: 1fr;
max-width: 520px;
}

html body{
padding-top: 74px;
}

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

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

.hero-message,
.hero-message-animate,
html body .hero-message-animate{
max-width: 500px;
margin-top: 92px;
}

.contact-main .contact-layout .contact-process{
margin-top: 28px;
}

.location-section .location-inner{
max-width: 1240px;
padding-left: 22px;
padding-right: 22px;
}

.location-section .map-frame-wrap{
height: 320px;
}

.location-section .location-info{
padding: 20px 26px;
}

.location-section .location-info h2{
font-size: 25px;
line-height: 1.25;
}

.location-section .location-info p{
font-size: 16px;
line-height: 1.55;
}

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

.hero h1.contact-brand-title{
font-size: 72px;
font-weight: 850;
line-height: 0.86;
letter-spacing: -3px;
}

.contact-hero-brand-sub{
margin-top: 22px;
font-size: 34px;
font-weight:700;
line-height: 1.36;
letter-spacing: -1.3px;
min-height: 40px;
}

html body .hero h1,
html body .contact-brand-title{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyTitleUp 1.10s ease-out .75s both;
font-size: 72px;
line-height: 0.86;
letter-spacing: -3px;
}

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

html body .contact-hero-brand-sub{
margin-top: 9px;
font-size: 34px;
line-height: 1.36;
letter-spacing: -1.3px;
}

.hero::before{
background-position: 72% 100%;
background-size: cover;
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("contacthero-tablet-l.webp") center center / cover no-repeat #000000;
transform-origin: center center;
animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
}

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

html body .hero .hero-copy{
margin-top: 8px;
}

.contact-hero-info{
gap: 12px;
font-size: 14px;
}

.hero{
position: relative;
overflow: hidden;
border-radius: 0;
background: #000000;
isolation: isolate;
min-height: calc(100vh - 86px);
background-position: 72% 100%;
background-size: 1420px auto;
width: 100%;
margin-left: 0;
margin-right: 0;
}

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

text-transform: none;}

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

.contact-review-banner-section,
html body .contact-winding-process-section{
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}

.contact-review-banner-section .contact-product-family-card,
html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12{
display: block;
grid-template-columns: 1fr;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0;
height: auto;
min-height: 0;
aspect-ratio: 2.2 / 1;
overflow: hidden;
border-radius: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
}

html body .contact-product-family-section:not(.contact-review-banner-section)
.contact-product-family-card.kspl-banner-height-12{
height: 420px;
min-height: 420px;
overflow: hidden;
border-radius: 0;
}

html body .contact-winding-process-card.kspl-banner-height-12 .contact-winding-process-image{
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: 0;
}

html body .contact-winding-process-card.kspl-banner-height-12 img[src="contactpage.webp"],
html body .contact-product-family-section:not(.contact-review-banner-section)
.contact-product-family-card.kspl-banner-height-12
img[src="kspl_product_family_highquality.webp"]{
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center center;
display: block;
}

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

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

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

@media (min-width: 769px) and (max-width: 980px){
html body .hero .kicker{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyFadeUp 1.0s ease-out .30s both;
}

html body .hero .contact-hero-brand-sub{
visibility: visible;
translate: 0 24px;
animation: aboutPhilosophyFadeUp 1.00s ease-out 1.20s both;
}

html body .hero-message-animate .contact-hero-info-item,
html body .hero-message-animate .contact-hero-info-divider{
visibility: visible;
opacity: 0;
transform: translateY(20px);
animation: fadeUpKsplFinal 1.05s cubic-bezier(0.22,0.61,0.36,1) forwards;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(1){
animation-delay: 2.20s;
}

html body .hero-message-animate .contact-hero-info-divider:nth-child(2),
html body .hero-message-animate .contact-hero-info-item:nth-child(3){
animation-delay: 2.50s;
}

html body .hero-message-animate .contact-hero-info-item:nth-child(4){
animation-delay: 2.80s;
}

.contact-layout{
gap: 88px;
}

.contact-form-panel{
margin-top: 0;
}

.contact-brand-film-section{
width: calc(100% - 44px);
padding: 0;
}

.hero>.wrap.inner,
.hero .inner,
.hero .inner>div{
position: relative;
z-index: 2;
transform: translateY(-9px);
}

html body .hero-message-animate{
opacity: 1;
visibility: visible;
transform: none;
}

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

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

.hero-message,
.hero-message span,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-size: 18px;
line-height: 1.45;
font-weight: 550;
}

h2{
font-size: clamp(33px, calc(11.133px + 2.844vw), 39px);
line-height: 1.14;
letter-spacing: -1px;
}

.contact-process{
margin-top: 64px;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
padding: 28px 40px;
gap: 20px;
}

.process-item{
min-height: auto;
padding: 24px 0;
border-right: 0;
border-bottom: none;
}

.process-item:last-child{
border-bottom: 0;
}

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

.quick-buttons{
grid-template-columns: 1fr;
max-width: 520px;
}

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

.hero-message,
.hero-message-animate,
html body .hero-message-animate{
max-width: 500px;
margin-top: 88px;
}

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

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

.contact-review-banner-section,
html body .contact-winding-process-section{
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}

.contact-review-banner-section .contact-product-family-card{
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
}

.contact-winding-process-card{
grid-template-columns: 1fr;
min-height: auto;
}

.contact-winding-process-image,
.contact-winding-process-image img{
min-height: 320px;
}

.contact-brand-image-only{
height: auto;
min-height: 0;
aspect-ratio: 3 / 2;
}

.contact-brand-image-only .contact-winding-process-image{
width: 100%;
height: 100%;
min-height: 0;
background: #ffffff;
}

.contact-brand-image-only .contact-winding-process-image img{
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: 0;
object-position: center center;
}

.contact-production-memo-box{
grid-template-columns: 1fr 1fr;
}

.contact-production-memo-head{
grid-column: 1 /-1;
border-right: 0;
border-bottom: 1px solid rgba(13, 30, 61, 0.1);
text-align: left;
}

.contact-production-memo-item:nth-child(3),
.contact-production-memo-item:nth-child(5){
border-right: 0;
}

.contact-production-memo-item:nth-child(2),
.contact-production-memo-item:nth-child(3){
border-bottom: 1px solid rgba(13, 30, 61, 0.1);
}

.contact-trust-faq-card{
grid-template-columns: 1fr;
}

.contact-trust-faq-intro{
padding: 34px 32px 30px;
border-right: 0;
border-bottom: 1px solid rgba(13, 30, 61, 0.08);
}

.contact-trust-faq-list{
padding: 24px 32px 30px;
}

.contact-main .contact-layout .contact-process{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 920px;
margin-top: 0;
padding: 22px 24px;
gap: 0;
}

.contact-main .contact-layout .contact-process .process-item{
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 14px;
align-items: start;
min-height: 100px;
padding: 0 18px;
border-bottom: 0;
border-right: 1px solid rgba(13, 30, 61, 0.1);
background: transparent;
box-shadow: none;
border-radius: 0;
}

.contact-main .contact-layout .contact-process .process-item:last-child{
border-right: 0;
}

.contact-main .contact-layout .contact-process .process-num{
width: 42px;
height: 42px;
font-size: 16px;
}

.contact-main .contact-layout .contact-process .process-icon{
width: 40px;
height: 40px;
margin-bottom: 12px;
display: block;
}

.contact-main .contact-layout .contact-process .process-content h3{
font-size: 19px;
line-height: 1.25;
margin-bottom: 8px;
}

.contact-main .contact-layout .contact-process .process-content p{
font-size: 15.5px;
line-height: 1.45;
}

.location-section{
margin-top: 48px;
padding-bottom: 132px;
}

.location-inner{
max-width: 920px;
padding-left: 22px;
padding-right: 22px;
}

.map-frame-wrap{
height: 320px;
}

.location-info{
grid-template-columns: 1fr;
gap: 18px;
padding: 22px 24px 24px;
}

.contact-main{
border-top-width: 0;
padding-top: 72px;
padding-bottom: 0;
}

.hero h1{
margin-bottom: 22px;
font-size: 58px;
line-height: 1.02;
letter-spacing: -1.8px;
}

.contact-brand-title{
font-size: 65px;
font-weight:700;
line-height: 0.9;
letter-spacing: -2.5px;
}

html body .hero h1,
html body .contact-brand-title{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyTitleUp 1.10s ease-out .75s both;
font-size: 64px;
line-height: 0.88;
letter-spacing: -3px;
}

html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span{
font-size: 18px;
line-height: 1.45;
}

.hero{
position: relative;
overflow: hidden;
border-radius: 0;
background: #000000;
isolation: isolate;
width: 100%;
margin-left: 0;
margin-right: 0;
background-position: 68% 58%;
background-size: cover;
min-height: calc(100vh - 86px);
}

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

.contact-hero-brand-sub{
margin-top: 20px;
font-size: 30px;
font-weight:700;
line-height: 1.34;
letter-spacing: -1.1px;
min-height: 36px;
}

html body .hero-message,
html body .hero-message-animate,
html body .hero-message-animate p{
margin-top: 88px;
}

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

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

html body .hero > .inner .kicker,
html body .hero .hero-copy > .kicker,
html body .case-hero .case-kicker,
html body .archive-hero .archive-kicker{
margin: 0 0 18px 0;
padding: 0;
font-size: 13.5px;
letter-spacing: 3.2px;
line-height: 1.15;
}

.hero::before{
background-position: 68% 58%;
background-size: cover;
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("contacthero-tablet.webp") center center / cover no-repeat #000000;
transform-origin: center center;
animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
}

html body{
padding-top: 86px;
}

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

html body .hero .hero-copy{
margin-top: 8px;
}

.contact-hero-info{
gap: 12px;
font-size: 14px;
}

html body .contact-hero-brand-sub{
font-size: 30px;
line-height: 1.34;
letter-spacing: -1.1px;
margin-top: 10px;
}

/* Wide detail lightbox: selected banners only */

.kspl-product-family-lightbox.is-wide-detail{
padding: 0;
}

.kspl-product-family-lightbox.is-wide-detail .kspl-product-family-lightbox-stage{
width: 100%;
height: 100%;
max-height: none;
justify-content: flex-start;
overflow: auto;
padding: 72px 20px 32px;
}

.kspl-product-family-lightbox.is-wide-detail img{
flex: 0 0 auto;
width: auto;
max-width: none;
height: calc(100dvh - 112px);
max-height: none;
object-fit: cover;
border-radius: 0;
}


.contact-layout > section{
width: 100%;
max-width: none;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

.contact-layout > .contact-product-family-section,
.contact-review-banner-section,
html body .contact-winding-process-section{
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}

.contact-review-banner-section .contact-product-family-card,
html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12{
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0;
aspect-ratio: 3 / 2;
height: auto;
min-height: 0;
overflow: hidden;
border-radius: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
box-shadow: none;
}

.contact-review-banner-section img[src="contact_review_banner_hq.webp"]{
content: url("contact_review_banner_hq-mobile.webp");
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 0;
transform: none;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image{
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
border-radius: 0;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image img[src="contactpage.webp"]{
content: url("contactpage-mobile.webp");
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 0;
transform: none;
}
}

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

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

@media (max-width: 768px){
.kspl-product-family-lightbox,
.kspl-case-lightbox,
.kspl-products-lightbox,
.kspl-brand-film-lightbox,
.kspl-video-lightbox{
padding: 18px;
}

.kspl-product-family-lightbox-stage{
width: 100%;
max-height: 78vh;
}

.kspl-product-family-lightbox img,
.kspl-product-family-lightbox video,
.kspl-case-lightbox img,
.kspl-products-lightbox img,
.kspl-brand-film-lightbox video,
.kspl-video-lightbox video{
max-width: calc(100vw - 36px);
max-height: 78vh;
border-radius: 0;
}

.contact-winding-process-card{
grid-template-columns: 1fr;
min-height: auto;
}

.contact-winding-process-image,
.contact-winding-process-image img{
min-height: 440px;
}

.contact-brand-image-only .contact-winding-process-image,
.contact-brand-image-only .contact-winding-process-image img{
height: 100%;
min-height: 0;
}

.contact-production-memo-item:nth-child(3),
.contact-production-memo-item:nth-child(5){
border-right: 0;
}

.contact-production-memo-item:nth-child(2),
.contact-production-memo-item:nth-child(3){
border-bottom: 1px solid rgba(13, 30, 61, 0.1);
}

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

.contact-production-memo{
margin: 26px auto 0;
padding: 0 16px;
}

.contact-production-memo-box{
grid-template-columns: 1fr 1fr;
border-radius: 0;
}

.contact-production-memo-head{
grid-column: 1 /-1;
border-right: 0;
border-bottom: 1px solid rgba(13, 30, 61, 0.1);
text-align: left;
padding: 24px 22px 20px;
}

.contact-production-memo-kicker{
font-size: 13px;
letter-spacing: 2.5px;
}

.contact-production-memo-title{
font-size: 21px;
line-height: 1.25;
}

.contact-production-memo-item{
min-height: 148px;
padding: 22px 12px 20px;
}

.contact-production-memo-icon{
width: 44px;
height: 44px;
margin-bottom: 12px;
}

.contact-production-memo-icon img{
width: 44px;
height: 44px;
}

.contact-production-memo-label{
font-size: 15px;
line-height: 1.25;
}


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

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

.hero h1{
font-size: 44px;
line-height: 1.22;
letter-spacing: -1.1px;
}

.hero-message{
max-width: 420px;
margin-top: 42px;
font-size: 19px;
font-weight: 650;
line-height: 1.38;
letter-spacing: -0.15px;
color: var(--B-black);
-webkit-text-fill-color: var(--B-black);
}

.contact-main{
border-top: 0;
padding-bottom: 0;
}

.contact-layout{
gap: 22px;
}

.contact-process{
margin-top: 42px;
padding: 0;
grid-template-columns: 1fr;
gap: 10px;
background: transparent;
border: 0;
box-shadow: none;
}

.process-item{
grid-template-columns: 44px 1fr;
min-height: auto;
padding: 20px 18px;
background: var(--ks-white);
border: 1px solid var(--kspl-line);
border-radius: 0;
box-shadow: none;
}

.process-item:not(:last-child){
border-right: 1px solid var(--kspl-line);
}

.process-num{
width: 38px;
height: 38px;
font-size: 15px;
}

.process-icon{
width: 38px;
height: 38px;
margin-bottom: 10px;
display: block;
}

.process-content h3{
font-size: 18px;
}

.process-content p{
font-size:16px;
line-height: 1.52;
}

.quick-consult{
padding: 30px 20px 10px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.quick-consult h2{
font-size: 26px;
}

.quick-consult p{
font-size:17px;
line-height: 1.5;
}

.contact-direct-person{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: 3px;
margin-bottom: 22px;
}

.contact-direct-kicker{
margin-bottom: 4px;
font-size: 11.5px;
}

.contact-direct-name,
.contact-direct-phone{
font-size: 16.5px;
}


.contact-direct-separator{
display: none;
}

.quick-buttons{
grid-template-columns: 1fr;
gap: 10px;
}

.quick-btn{
height: 52px;
font-size: 16px;
}

.contact-form-panel{
padding: 34px 20px 28px;
}

.form-title{
margin-bottom: 22px;
}

.form-title h2{
font-size: 26px;
}

.form-title p{
font-size:17px;
line-height: 1.7;
}

.contact-form{
grid-template-columns: 1fr;
gap: 14px;
}

.field.full,
.agree-row,
.submit-area{
grid-column: 1;
}

.contact-form input,
.contact-form select{
height: 48px;
}

.contact-form textarea{
height: 130px;
min-height: 130px;
}

.agree-row{
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.45;
}

.agree-row input{
width: 20px;
height: 20px;
min-width: 14px;
min-height: 14px;
margin: 0;
}

.submit-btn{
width: 100%;
height: 52px;
font-size: 16px;
}

.location-inner{
max-width: 100%;
padding: 0 16px;
}

.location-head{
margin-bottom: 18px;
}

.location-kicker{
font-size: 14px;
letter-spacing: 3px;
margin-bottom: 10px;
}

.location-head h2{
font-size: 27px;
line-height: 1.25;
margin-bottom: 8px;
}

.location-head p{
font-size:16.5px;
line-height: 1.55;
}

.location-map-card{
border-radius: 0;
}

.location-info{
grid-template-columns: 1fr;
gap: 18px;
padding: 24px 20px 22px;
}

.location-info h2{
font-size: 23px;
margin-bottom: 10px;
}

.location-info p{
font-size:17px;
line-height: 1.6;
}

.map-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.map-btn{
min-width: 0;
height: 46px;
font-size: 15px;
border-radius: 0;
}

.map-frame-wrap{
height: 300px;
min-height: 300px;
background: var(--ks-white);
}

.map-fallback-link{
display: block;
width: 100%;
height: 300px;
background: var(--ks-white);
}

.map-fallback-image{
height: 300px;
object-fit: cover;
object-position: center center;
}

.kspl-map-info{
min-width: 0;
max-width: 220px;
padding: 11px 13px;
}

.kspl-map-info strong{
font-size: 14px;
}

.kspl-map-info span{
font-size: 11px;
white-space: normal;
}

.location-section{
margin-top: 48px;
padding-bottom: 140px;
}

.hero-message-animate .contact-hero-info-item,
.hero-message-animate .contact-hero-info-divider{
visibility: visible;
opacity: 0;
transform: translateY(20px);
animation: fadeUpKsplFinal 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero-message-animate .contact-hero-info-item:nth-child(1){
animation-delay: 2.0s;
}

.hero-message-animate .contact-hero-info-divider:nth-child(2),
.hero-message-animate .contact-hero-info-item:nth-child(3){
animation-delay: 2.30s;
}

.hero-message-animate .contact-hero-info-item:nth-child(4){
animation-delay: 2.50s;
}


.hero-message,
.hero-message span,
.hero-message-animate,
.hero-message-animate p,
.hero-message-animate p span,
.hero-message-animate span{
font-size: 16.5px;
font-weight: 450;
line-height: 1.65;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
text-align: left;
text-shadow: none;
}

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

.contact-trust-faq-section{
max-width: 100%;
}

.contact-trust-faq-card{
grid-template-columns: 1fr;
border-radius: 0;
}

.contact-trust-faq-intro{
border-right: 0;
border-bottom: 1px solid rgba(13, 30, 61, 0.08);
padding: 30px 22px 26px;
}

.contact-trust-faq-kicker{
font-size: 13px;
letter-spacing: 2.5px;
}

.contact-trust-faq-title{
font-size: 25px;
line-height: 1.25;
letter-spacing: -0.55px;
}

.contact-trust-flow{
gap: 10px;
margin-top: 24px;
}

.contact-trust-flow-item{
padding: 15px 10px 14px;
text-align: center;
}

.contact-trust-flow-icon{
width: 40px;
height: 40px;
margin: 0 auto 9px;
}

.contact-trust-flow-icon img{
width: 40px;
height: 40px;
}

.contact-trust-flow-label{
font-size: 13.5px;
}

.contact-trust-faq-list{
padding: 22px 20px 26px;
}

.contact-trust-faq-item summary{
min-height: 58px;
padding: 17px 42px 16px 40px;
font-size: 16.5px;
line-height: 1.42;
}

.contact-trust-faq-item summary::before{
width: 26px;
font-size: 11.5px;
letter-spacing: 0.06em;
}

.contact-trust-faq-item summary::after{
width: 28px;
height: 28px;
font-size: 21px;
}

.contact-trust-faq-answer{
padding: 0 38px 20px 40px;
gap: 8px;
font-size:16px;
line-height: 1.68;
}

.contact-product-family-section{
width: 100%;
max-width: none;
margin: 44px auto 0;
padding: 0 16px;
}

.contact-product-family-card{
overflow: hidden;
border-radius: 0;
}

.contact-brand-film-section{
width: 100%;
max-width: none;
margin: 54px auto 0;
padding: 0 16px;
}

.contact-brand-film-head{
max-width: 100%;
margin: 0 0 24px;
}

.contact-brand-film-kicker{
margin-bottom: 14px;
padding-bottom: 7px;
font-size: 12px;
letter-spacing: 3.2px;
}

.contact-brand-film-title{
font-size: clamp(34px, 9vw, 46px);
line-height: 0.9;
letter-spacing: -2px;
}

.contact-brand-film-desc{
margin-top: 18px;
font-size:17.5px;
line-height: 1.58;
}

.contact-product-family-card.contact-brand-film-card:has(video){
max-width: 100%;
padding: 0;
aspect-ratio: 16 / 9;
border-radius: 0;
}

.contact-brand-film{
aspect-ratio: 16 / 9;
border-radius: 0;
}

.contact-product-family-card img{
width: 100%;
height: auto;
display: block;
transform: scale(1.08);
transform-origin: center center;
}

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

.kicker{
margin-bottom: 14px;
padding-bottom: 8px;
font-size: 14.5px;
font-weight:700;
letter-spacing: 3.2px;
color: var(--D-orange);
-webkit-text-fill-color: var(--D-orange);
border-bottom-color: rgba(255, 122, 0, 0.42);
}

.contact-brand-title{
color: var(--type-black);
-webkit-text-fill-color: var(--type-black);
font-size: 45px;
font-weight:700;
line-height: 0.95;
letter-spacing: -1.5px;
}

html body .hero h1 *,
html body .contact-brand-title *{
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}


.contact-review-banner-section{
margin: 8px auto 0;
padding-left: 0;
padding-right: 0;
}

.contact-review-banner-section .contact-product-family-card{
width: 100%;
max-width: none;
margin: 0 auto;
height: auto;
min-height: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
}

.contact-brand-image-only{
height: 240px;
min-height: 240px;
}

html body .hero-message,
html body .hero-message span,
html body .hero-message-animate,
html body .hero-message-animate p,
html body .hero-message-animate p span,
html body .hero-message-animate span:not(.contact-hero-info-divider){
display: block;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 16.5px;
font-weight: 450;
line-height: 1.65;
letter-spacing: -0.2px;
text-align: left;
text-shadow: none;
}

.hero{
min-height: 700px;
position: relative;
overflow: hidden;
border-radius: 0;
background: #000000;
isolation: isolate;
}

.hero .inner{
position: relative;
z-index: 2;
min-height: 700px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 26px 20px 0;
gap: 0;
}

.hero .inner > div,
.hero .hero-copy{
position: relative;
z-index: 2;
}

html body .hero h1,
html body .contact-brand-title{
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 57px;
line-height: 0.88;
letter-spacing: -3px;
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyTitleUp 1.10s ease-out .75s both;
}

html body .hero .contact-hero-brand-sub{
visibility: visible;
translate: 0 24px;
animation: aboutPhilosophyFadeUp 1.00s ease-out 1.20s both;
    font-size: 22px;
  }

.hero-message,
.hero-message-animate{
max-width: 420px;
margin-top: 78px;
}

.contact-hero-info{
display: grid;
gap: 12px;
font-size: 14px;
line-height: 1.35;
}

html body .contact-hero-info .contact-hero-info-divider{
display: none;
}

.contact-hero-info-item{
white-space: normal;
}

.contact-hero-brand-sub{
margin-top: 16px;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-size: 17px;
font-weight:700;
line-height: 1.32;
letter-spacing: -0.8px;
min-height: 28px;
}

html body .hero .kicker{
visibility: visible;
translate: 0 18px;
animation: aboutPhilosophyFadeUp 1.0s ease-out .30s both;
font-size: 13px;
letter-spacing: 2.8px;
margin-bottom: 18px;
}

html body .hero-message,
html body .hero-message-animate,
html body .hero-message-animate p{
max-width: 420px;
margin-top: 78px;
}

html body .contact-hero-brand-sub{
margin-top: 7px;
font-size: 22px;
line-height: 1.32;
letter-spacing: -0.8px;
}

html body .hero-message,
html body .hero-message-animate{
visibility: visible;
opacity: 1;
max-width: 420px;
margin-top: 78px;
position: relative;
z-index: 5;
}

html body .hero > .inner .kicker,
html body .hero .hero-copy > .kicker,
html body .case-hero .case-kicker,
html body .archive-hero .archive-kicker{
margin: 0 0 18px 0;
padding: 0;
font-size: 13.5px;
letter-spacing: 3.2px;
line-height: 1.15;
}

.hero::before{
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("contacthero-mobile.webp") center center / cover no-repeat #000000;
transform-origin: center center;
animation: aboutPhilosophyBgSettle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) .3s both;
}

.kspl-product-family-lightbox-close,
.kspl-case-lightbox-close,
.kspl-products-lightbox-close,
.kspl-brand-film-lightbox-close,
.kspl-video-lightbox-close,
.kspl-product-family-lightbox .lightbox-close,
.kspl-brand-film-lightbox .lightbox-close,
.kspl-video-lightbox .lightbox-close{
top: 14px;
right: 14px;
width: 44px;
height: 44px;
}

html body .contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12{
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
background: #ffffff;
}

html body .contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image{
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: 0;
background: #ffffff;
}

html body .contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image img[src="contactpage.webp"]{
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: 0;
object-position: center center;
display: block;
background: #ffffff;
}

html body .contact-winding-process-section{
margin-bottom: 30px;
}

.kspl-product-family-lightbox.is-wide-detail{
padding: 0;
}

.kspl-product-family-lightbox.is-wide-detail .kspl-product-family-lightbox-stage{
width: 100%;
height: 100%;
max-height: none;
justify-content: flex-start;
overflow: auto;
padding: 66px 14px 24px;
}

.kspl-product-family-lightbox.is-wide-detail img{
flex: 0 0 auto;
width: auto;
max-width: none;
height: calc(100dvh - 90px);
max-height: none;
object-fit: cover;
border-radius: 0;
}


.contact-review-banner-section,
html body .contact-winding-process-section{
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}

.contact-review-banner-section .contact-product-family-card,
html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12{
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0;
aspect-ratio: 3 / 2;
height: auto;
min-height: 0;
overflow: hidden;
border-radius: 0;
border: 1px solid rgba(13, 30, 61, 0.10);
box-shadow: none;
}

.contact-review-banner-section img[src="contact_review_banner_hq.webp"]{
content: url("contact_review_banner_hq-mobile.webp");
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 0;
transform: none;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image{
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
border-radius: 0;
}

html body .contact-winding-process-section
.contact-winding-process-card.contact-brand-image-only.kspl-banner-height-12
.contact-winding-process-image img[src="contactpage.webp"]{
content: url("contactpage-mobile.webp");
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 0;
transform: none;
}

.contact-winding-process-card.contact-brand-image-only{
grid-template-columns: 1fr;
}


.contact-mobile-sub-break{
display:block;
}
}

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