@charset "utf-8";

#hqBusiness.business-areas{
--ba-text:#111111;
--ba-sub:#888888;
--ba-muted:#cccccc;
--ba-bg:#ffffff;
padding:100px 0 80px;
background:var(--ba-bg);
color:var(--ba-text);
font-family:var(--k-font),var(--e-font);
box-sizing:border-box;
}

#hqBusiness .section-inner{max-width:var(--layout-max,1800px);margin:0 auto;padding:0 80px}

/* Scroll reveal */
#hqBusiness .section-top.reveal-item{
opacity:0;
transform:translateY(16px);
transition:opacity 1.2s ease-out,transform 1.2s ease-out;
}
#hqBusiness.is-revealing .section-top.reveal-item{
opacity:1;
transform:translateY(0);
}

/* Cards — left to right unfold + fade */
#hqBusiness .business-card.reveal-card{
opacity:0;
transform:translateX(-32px) scale(.97);
transform-origin:left center;
transition:
opacity 1.15s cubic-bezier(.16,1,.3,1),
transform 1.15s cubic-bezier(.16,1,.3,1);
}
#hqBusiness.is-revealing .business-card.reveal-card{
opacity:1;
transform:translateX(0) scale(1);
}
#hqBusiness .swiper-slide:nth-child(1).reveal-card{transition-delay:.12s}
#hqBusiness .swiper-slide:nth-child(2).reveal-card{transition-delay:.24s}
#hqBusiness .swiper-slide:nth-child(3).reveal-card{transition-delay:.36s}
#hqBusiness .swiper-slide:nth-child(4).reveal-card{transition-delay:.48s}

#hqBusiness .business-pagination{
opacity:0;
transition:opacity .9s ease-out .55s;
}
#hqBusiness.is-revealing .business-pagination{opacity:1}

@media (prefers-reduced-motion:reduce){
#hqBusiness .section-top.reveal-item,
#hqBusiness .business-card.reveal-card,
#hqBusiness .business-pagination{opacity:1;transform:none;transition:none}
}

/* Header row */
#hqBusiness .section-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
margin-bottom:48px;
}
#hqBusiness .section-heading{flex:1;min-width:0}
#hqBusiness .section-heading .label{
margin:0 0 20px;
font-size:13px;
font-weight:600;
letter-spacing:.14em;
color:var(--ba-sub);
text-transform:uppercase;
font-family:var(--e-font),var(--k-font);
}
#hqBusiness .section-heading h2{
margin:0 0 20px;
font-size:clamp(36px,4vw,52px);
font-weight:700;
line-height:1.15;
letter-spacing:-.03em;
color:var(--ba-text);
font-family:var(--e-font),var(--k-font);
}
#hqBusiness .section-heading .description{
margin:0;
max-width:520px;
font-size:16px;
font-weight:400;
line-height:1.7;
color:var(--ba-sub);
word-break:keep-all;
}

/* Nav buttons */
#hqBusiness .section-nav{
display:flex;
gap:10px;
flex-shrink:0;
padding-top:52px;
}
#hqBusiness .nav-btn{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border:1px solid #e0e0e0;
border-radius:50%;
background:#fff;
color:#333;
cursor:pointer;
transition:background .25s ease,border-color .25s ease,color .25s ease;
}
#hqBusiness .nav-btn:hover{
background:#111;
border-color:#111;
color:#fff;
}
#hqBusiness .nav-btn.swiper-button-disabled{
opacity:.35;
cursor:default;
pointer-events:none;
}

/* Slider */
#hqBusiness .business-slider-wrap{position:relative;overflow:visible}
#hqBusiness .business-slider{overflow:visible}
#hqBusiness .business-slider .swiper-wrapper{align-items:stretch;overflow:visible}

/* Card */
#hqBusiness .business-card{
position:relative;
display:flex;
flex-direction:column;
height:480px;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:#fff;
background:#222;
}
#hqBusiness .business-card .card-media{
position:absolute;
inset:0;
}
#hqBusiness .business-card .card-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .6s ease;
}
#hqBusiness .business-card:hover .card-media img{transform:scale(1.04)}
#hqBusiness .swiper-slide:nth-child(1) .card-media img{object-position:center 40%}
#hqBusiness .swiper-slide:nth-child(2) .card-media img{object-position:center 45%}
#hqBusiness .swiper-slide:nth-child(3) .card-media img{object-position:center 30%}
#hqBusiness .swiper-slide:nth-child(4) .card-media img{object-position:center 50%}
#hqBusiness .business-card .overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.05) 30%,rgba(0,0,0,.75) 100%);
transition:background .4s ease;
}
#hqBusiness .business-card:hover .overlay{
background:linear-gradient(to bottom,rgba(0,0,0,.1) 20%,rgba(0,0,0,.82) 100%);
}

/* Content — bottom aligned */
#hqBusiness .business-card .content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:flex-end;
height:100%;
padding:32px 28px 36px;
box-sizing:border-box;
}
#hqBusiness .business-card .number{
display:block;
margin-bottom:10px;
font-size:13px;
font-weight:500;
color:rgba(255,255,255,.7);
font-family:var(--e-font),var(--k-font);
letter-spacing:.04em;
}
#hqBusiness .business-card h3{
display:flex;
flex-direction:column;
gap:4px;
margin:0 0 14px;
font-size:20px;
font-weight:700;
line-height:1.25;
color:#fff;
font-family:var(--e-font),var(--k-font);
}
#hqBusiness .business-card h3 .en{
font-size:20px;
font-weight:700;
line-height:1.2;
font-family:var(--e-font),var(--k-font);
}
#hqBusiness .business-card h3 .ko{
font-size:14px;
font-weight:500;
line-height:1.3;
color:rgba(255,255,255,.78);
font-family:var(--k-font),var(--e-font);
}
#hqBusiness .business-card .divider{
display:block;
width:100%;
height:1px;
margin-bottom:16px;
background:rgba(255,255,255,.25);
}
#hqBusiness .business-card .desc{
margin:0;
font-size:14px;
font-weight:400;
line-height:1.65;
color:rgba(255,255,255,.82);
word-break:keep-all;
}

/* Pagination bars */
#hqBusiness .business-pagination{
display:flex;
justify-content:center;
gap:8px;
margin-top:40px;
}
#hqBusiness .business-pagination .swiper-pagination-bullet{
width:32px;
height:3px;
border-radius:2px;
background:var(--ba-muted);
opacity:1;
margin:0!important;
transition:background .3s ease,width .3s ease;
}
#hqBusiness .business-pagination .swiper-pagination-bullet-active{
background:#111;
width:48px;
}

@media (max-width:1200px){
#hqBusiness{padding:80px 0 64px}
#hqBusiness .section-inner{padding:0 48px}
#hqBusiness .section-nav{padding-top:40px}
#hqBusiness .business-card{height:440px}
}

@media (max-width:768px){
#hqBusiness{padding:64px 0 56px}
#hqBusiness .section-inner{padding:0 24px}
#hqBusiness .section-top{
flex-direction:column;
gap:24px;
margin-bottom:32px;
}
#hqBusiness .section-nav{padding-top:0;align-self:flex-end}
#hqBusiness .section-heading h2{font-size:32px}
#hqBusiness .business-card{height:400px;border-radius:12px}
#hqBusiness .business-card .content{padding:24px 20px 28px}
#hqBusiness .business-card h3 .en{font-size:18px}
#hqBusiness .business-card h3 .ko{font-size:13px}
#hqBusiness .business-card .desc{font-size:13px}
}