@charset "utf-8";
.burger {
appearance: none;
border: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
}
.overlay {
visibility: hidden;
transition: transform .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s;
}
.overlay.on {
visibility: visible;
transition-delay: 0s;
}
.overlay a:focus-visible { opacity: 1; }
@media(hover:none), (pointer:coarse) {
.cursor { display: none }
}
@media(max-width:1000px) {
.menu, .inq, .seo_btn { display: none }
.burger { display: flex }
.pgrid { grid-template-columns: 1fr 1fr }
}
@media(max-width:600px) {
.f-bottom { flex-direction: column }
.f-right { align-items: flex-start; margin-top: 0 }
.pgrid { grid-template-columns: 1fr }
.svc { margin-bottom: clamp(360px, 65vh, 620px) }
.totop { right: 24px; bottom: 24px }
.inq-float { right: 24px; bottom: 88px }
}
img { max-width: 100%; height: auto; }
svg, iframe, object, embed { max-width: 100%; }
video:not(.hero-video) { max-width: 100%; }
table { max-width: 100%; }
.tbl-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
p, li, dd, td, th, h1, h2, h3, h4,
.hero-sub, .ab-desc, .ab-intro, .stats-desc, .sub-cta-tx p, .f-desc {
word-break: keep-all;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.inq, .sub-cta-btn, .burger, .totop, .inq-float { min-height: 44px; }
.hero-inner { margin-bottom: 84px; }
}
@media (max-width: 380px) {
.hero-inner { width: 92%; margin-bottom: 64px; }
.f-cta-big, .f-ghost { letter-spacing: -3px; }
}
@supports (height: 100dvh) {
.hs-media        { height: 100dvh; }
.hs-stage .hero  { margin-top: -100dvh; }
.hero            { min-height: 100dvh; }
.strength-inner  { height: 100dvh; }
.proj            { min-height: 100dvh; }
.overlay         { height: 100dvh; bottom: auto; }
}
@media(max-width:1000px){
header  { z-index: 260; }
.burger { z-index: 262; }
header  { transform: none !important; }
}
@media (max-width: 768px) {
.strength h2,
.strength .s-swap { font-size: clamp(28px, 9vw, 44px); letter-spacing: -1px; line-height: 1.2; }
.strength .s-swap .sw { white-space: normal; word-break: keep-all; max-width: 94vw; }
.strength .s-swap .sw0 { flex-wrap: wrap; }
.strength .s-tag { font-size: 13px; letter-spacing: 3px; margin-bottom: 20px; }
}
@media (max-width: 1000px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
#hd,
#wrapper,
#ft {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
main,
header,
footer,
.hs-stage,
.hs-media,
.hero,
.strength,
.strength-inner,
.svc,
.proj {
max-width: 100vw;
overflow-x: clip;
box-sizing: border-box;
}
.wrap,
.nav.wrap,
footer .wrap,
.strength .wrap,
.svc.wrap {
width: calc(100% - 32px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
html.menu-open,
body.menu-open {
overflow: hidden !important;
width: 100%;
max-width: 100%;
}
body.menu-open {
touch-action: none;
overscroll-behavior: none;
}
header {
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
overflow: hidden;
box-sizing: border-box;
}
.nav {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
.nav-right {
gap: 0;
min-width: 44px;
flex: 0 0 auto;
}
.burger {
flex: 0 0 44px;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-right: -9px;
}
.overlay {
top: 0;
left: 0;
right: 0;
bottom: auto;
width: 100%;
max-width: 100%;
height: 100vh;
min-height: 100vh;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 96px clamp(24px, 7vw, 48px) 40px;
transform: translate3d(0, -100%, 0);
}
.overlay.on {
transform: translate3d(0, 0, 0);
}
.overlay a {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
line-height: 1.05;
overflow-wrap: anywhere;
padding-left: 0;
padding-right: 0;
}
.overlay a:hover,
.overlay a.active {
padding-left: 0;
}
.overlay .ov-meta {
max-width: 100%;
overflow-wrap: anywhere;
}
}
@supports not (overflow: clip) {
@media (max-width: 1000px) {
html,
body,
main,
header,
footer,
.hs-stage,
.hs-media,
.hero,
.strength,
.strength-inner,
.svc,
.proj {
overflow-x: hidden;
}
}
}
@supports (height: 100dvh) {
@media (max-width: 1000px) {
.overlay {
height: 100dvh;
min-height: 100dvh;
}
}
}
@media (max-width: 768px) {
.strength-inner {
min-height: 100dvh;
height: 100dvh;
box-sizing: border-box;
padding: 88px 0 72px;
justify-content: center;
}
.strength .wrap {
width: min(92%, 520px);
transform: translateY(clamp(18px, 5dvh, 44px));
}
.strength .s-swap {
min-height: 2.55em;
align-items: center;
}
.strength .s-swap .sw {
width: 100%;
max-width: 100%;
}
.strength .s-desc {
font-size: clamp(15px, 4vw, 18px);
line-height: 1.65;
margin-top: 24px;
}
.strength-scroll {
bottom: 20px;
}
}
@media (max-width: 380px) {
.overlay {
padding-left: 22px;
padding-right: 22px;
}
.overlay a {
font-size: clamp(34px, 12vw, 46px);
}
.strength .wrap {
width: 94%;
transform: translateY(24px);
}
}
a:focus-visible,
button:focus-visible,
.burger:focus-visible,
.totop:focus-visible,
.inq-float:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.hero-ko .line .inner,
.hero-sub,
.reveal,
.svc-kw a {
opacity: 1 !important;
transform: none !important;
}
.hs-ring,
.strength-scroll .ln::after {
animation: none !important;
}
}
@media (max-width: 480px) {
.hs-media { background: #000; }
.hs-media .hero-poster,
.hs-media .hero-video {
top: 50%;
left: 50%;
right: auto;
bottom: auto;
width: 100%;
height: 64%;
transform: translate(-50%, -50%);
}
.hero-inner { margin-bottom: 124px; }
.hero-scroll {
width: 78px;
height: 78px;
left: 50%;
margin-left: -39px;
right: auto;
bottom: 14px;
}
.hero-scroll .hs-arrow { font-size: 14px; }
.svc-kw a { font-size: clamp(16px, 5vw, 24px); letter-spacing: -1px; }
.pcard { padding: 24px; }
.pcard .pinfo .nm { font-size: 22px; }
.f-cta-big { font-size: clamp(30px, 11vw, 44px); letter-spacing: -2px; gap: 14px; }
.f-ghost { font-size: clamp(30px, 11vw, 44px); letter-spacing: -2px; }
.f-cta::before { background-size: clamp(180px, 55vw, 280px) auto; }
.contact-page h1 .grad { white-space: nowrap; word-break: keep-all; }
.pcard .pinfo .cat { line-height: 1.35; }
.pcard.is-hover .pinfo .cat { max-height: 3em; }
}
.kakao-float, .inq-float, .totop { visibility: hidden; }
.kakao-float.on, .inq-float.on, .totop.on { visibility: visible; }
.kakao-float {
position: fixed;
right: 34px;
bottom: 158px;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
width: 50px;
height: 50px;
padding: 0;
border: 1px solid #fee500;
border-radius: 30px;
background: #fee500;
color: #2c2118;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
font-size: 15px;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(16px) scale(.92);
transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1), gap .4s cubic-bezier(.2,.7,.2,1), padding .4s cubic-bezier(.2,.7,.2,1), background .3s;
}
.kakao-float.on { opacity: 1; pointer-events: auto; transform: none; }
.kakao-float:hover, .kakao-float:focus-visible { width: 180px; gap: 9px; padding: 0 22px; background: #ffed4a; border-color: #ffed4a; }
.kakao-float-icon { width: 28px; height: 28px; flex: none; }
.kakao-float .inq-tx { max-width: 0; opacity: 0; transition: max-width .4s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.kakao-float:hover .inq-tx, .kakao-float:focus-visible .inq-tx { max-width: 100px; opacity: 1; }
@media(max-width:768px) {
.kakao-float, .inq-float {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
}
.kakao-float, .kakao-float:hover, .kakao-float:focus-visible,
.inq-float, .inq-float:hover {
width:44px; height:44px; padding:0; gap:0;
right:16px;
}
.kakao-float, .kakao-float:hover, .kakao-float:focus-visible { bottom:calc(68px + env(safe-area-inset-bottom, 0px)) }
.inq-float, .inq-float:hover { bottom:calc(16px + env(safe-area-inset-bottom, 0px)) }
.totop { display:none }
.kakao-float-icon { width:24px; height:24px }
.kakao-float .inq-tx, .inq-float .inq-tx { display:none }
}
@media (max-width: 768px) {
.hs-stage .hero {
align-items: center;
padding: 88px 0 72px;
}
.hs-stage .hero-inner {
margin-top: 0;
margin-bottom: 0;
text-align: center;
transform: translateY(calc(clamp(18px, 5dvh, 44px) + 20px));
}
.hero .hero-ko {
font-size: clamp(30px, 8.5vw, 48px);
letter-spacing: -1px;
}
.hs-stage .hero .hero-sub {
margin-top: 24px;
color: #8a8a8a;
}
.hs-stage .hero .hero-scroll { display: none; }
.hs-stage .hs-media .hero-poster,
.hs-stage .hs-media .hero-video,
.hs-stage .hs-media .hs-veil { display: none; }
}
.tw-circle-media { display: none; }
@media (max-width: 768px) {
:root { --mobile-circle-size: clamp(180px, 60vw, 300px); }
.tw-circle-media {
display: block;
position: absolute;
top: calc(4vh + 60px);
right: calc(var(--mobile-circle-size) * .08);
width: var(--mobile-circle-size);
height: var(--mobile-circle-size);
overflow: visible;
z-index: 0;
pointer-events: none;
background: url('../image/main/f-cta_bg01.webp') center / contain no-repeat;
}
.tw-circle-media .tw-circle-video {
position: absolute;
top: 50%;
left: 50%;
width: 240%;
max-width: none;
height: 135%;
object-fit: contain;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .45s linear;
}
.tw-circle-media.video-ready .tw-circle-video { opacity: 1; }
body .pj-page::before,
body .faq-page::before,
body .contact-page::before,
body .f-cta::before { background-image: none; }
body .chero .chero-bg,
body .shero .shero-bg {
background: none;
filter: none;
transform: none;
transition: none;
}
.hs-media .tw-circle-media {
left: 50%;
right: auto;
transform: translateX(-50%);
}
.f-cta .tw-circle-media {
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
}
body .shero::after,
body .shero.in::after {
display: none;
background: transparent;
transition: none;
}
.contact-page { position: relative; isolation: isolate; }
.contact-page > .wrap { position: relative; z-index: 1; }
.faq-hero .gd-list-title { font-size: clamp(30px, 8.5vw, 40px); }
.faq-hero .gd-list-title .pt { display: block; }
.faq-hero .faq-list-title { font-size: clamp(28px, 8.5vw, 40px); }
.faq-hero .faq-list-title .pt { display: block; }
}
@media (max-width: 380px) {
.hs-stage .hero-inner { transform: translateY(44px); }
}

@media (min-width:769px){.hs-media .hero-poster,.hs-media .hero-video{transform:scale(.9);transform-origin:center;}.stats-row{grid-template-columns:repeat(3,1fr);}}@media (min-width:881px){.contact-page .grid{grid-template-columns:30% minmax(0, 1fr);}.contact-page .grid > .formcard{grid-column:2;grid-row:1;min-width:0;}.contact-page .grid > aside{grid-column:1;grid-row:1;position:sticky;top:104px;align-self:start;}}@media (max-width:768px){.hs-stage .hero {padding:88px 0 72px;}.hs-stage .hero-inner{transform:translateY(clamp(18px,5dvh,44px));}.hs-stage .hero .hero-sub{font-size:clamp(11px,3.35vw,14px);letter-spacing:-.15px;white-space:nowrap;overflow-wrap:normal;}.hs-media .tw-circle-media{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);}.f-cta .tw-circle-media{top:calc(4vh + 60px);left:auto;right:calc(var(--mobile-circle-size) * .08);transform:none;}.f-eyebrow,.f-menu,.contact-page .form-intro{display:none;}.ach-head p,.stats-list .stat,.stats-list .st-txt{text-align:center;}.stats-list .stat{grid-template-columns:1fr;gap:16px;}.stats-list .stat .num{justify-content:center;}.faq-page .faq-filters{justify-content:center;}.faq-page .gd-card p{-webkit-line-clamp:2;}.stats-row{grid-template-columns:1fr;}.stat-cell{border-right:0;border-bottom:.5px solid var(--line);}.stat-cell:last-child{border-bottom:0;}}
.hero-sub-mobile{display:none}@media(max-width:768px){.hero-sub-desktop{display:none}.hero-sub-mobile{display:inline}}

@media (max-width:768px) and (max-height:520px){.hs-media .tw-circle-media{width:min(var(--mobile-circle-size),40dvh);height:min(var(--mobile-circle-size),40dvh);}.hs-stage .hero .hero-ko{font-size:clamp(22px,6vw,32px);}.hs-stage .hero .hero-sub{margin-top:16px;}}
button[data-portfolio-pending]{appearance:none;font:inherit;text-align:left;cursor:pointer;}button.pcard[data-portfolio-pending]{width:100%;border:0;background:transparent;color:inherit;}button.pcard .pinfo,button.pcard .nm,button.pcard .cat{display:block;}button.pj-row[data-portfolio-pending]{width:100%;border-top:0;border-left:0;border-right:0;background:transparent;color:inherit;}[data-portfolio-pending]:focus-visible{outline:2px solid var(--point);outline-offset:5px;}.pf-pending-badge{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid rgba(255,255,255,.22);border-radius:20px;color:#eee;background:rgba(15,15,15,.65);font-size:12px;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;}.pcard .pf-pending-badge{position:absolute;top:22px;right:22px;z-index:2;backdrop-filter:blur(8px);}.pj-row .pf-pending-badge{color:var(--mut);background:transparent;}.pj-row:hover .pf-pending-badge{color:#333;border-color:rgba(0,0,0,.2);}.pf-pending-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:24px;}.pf-pending-modal[hidden]{display:none;}.pf-pending-dim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);}.pf-pending-panel{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 48px);overflow-y:auto;padding:44px 36px 32px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:radial-gradient(ellipse at 50% 0,rgba(215,38,61,.12),transparent 65%),#101012;box-shadow:0 32px 100px rgba(0,0,0,.6);color:#fff;text-align:center;animation:pfPendingIn .24s cubic-bezier(.2,.7,.2,1);}.pf-pending-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:34px;height:34px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:transparent;color:#888;cursor:pointer;}.pf-pending-x:hover{color:#fff;background:rgba(255,255,255,.05);}.pf-pending-x svg{width:100%;height:100%;}.pf-pending-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 24px;border:1px solid rgba(215,38,61,.3);border-radius:18px;background:rgba(215,38,61,.09);color:#e6445a;}.pf-pending-icon svg{width:32px;height:32px;}.pf-pending-eyebrow{display:block;margin-bottom:12px;color:#8d8588;font-size:10px;font-weight:600;letter-spacing:2px;}.pf-pending-panel h2{margin:0;color:#fff;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-1px;word-break:keep-all;}.pf-pending-project{margin:16px 0 0;color:#ddd;font-size:15px;font-weight:600;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;}.pf-pending-description{margin:12px 0 28px;color:#929295;font-size:14px;line-height:1.8;word-break:keep-all;}.pf-pending-confirm{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px 20px;border:1px solid var(--point);border-radius:12px;background:var(--point);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:filter .2s;}.pf-pending-confirm:hover{filter:brightness(1.12);}.pf-pending-modal button:focus-visible{outline:2px solid #fff;outline-offset:4px;}@keyframes pfPendingIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}@media (max-width:480px){.pf-pending-modal{padding:20px;}.pf-pending-panel{padding:40px 24px 24px;max-height:calc(100dvh - 40px);border-radius:20px;}.pf-pending-panel h2{font-size:24px;}.pf-pending-description{font-size:13px;}.pcard .pf-pending-badge{top:16px;right:16px;}}@media (prefers-reduced-motion:reduce){.pf-pending-panel{animation:none;}}

@media (max-width:380px){.hs-stage .hero-inner{transform:translateY(24px)}}
 .hero-mobile-label, .hero-mobile-bottom { display: none; } @media (max-width: 768px) { .hs-stage .hs-media { background: radial-gradient(ellipse at 78% 28%,rgba(124,28,49,.16),transparent 48%),radial-gradient(ellipse at 18% 70%,rgba(37,62,82,.14),transparent 45%),#060608; } .hs-stage .hs-media::before, .hs-stage .hs-media::after { content: ''; position: absolute; top: 50%; left: 50%; width: 88vw; height: 88vw; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; } .hs-stage .hs-media::after { width: 126vw; height: 126vw; border-color: rgba(255,255,255,.035); } .hs-media .tw-circle-media { mix-blend-mode: screen; } .hs-stage .hero-mobile-label { display: block; position: absolute; top: -54px; left: 0; width: 100%; color: #b9b0b6; font-size: 9px; font-weight: 500; letter-spacing: 2.6px; line-height: 18px; } .hero-mobile-label::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: #ef6678; box-shadow: 0 0 12px rgba(239,102,120,.65); vertical-align: 2px; } .hs-stage .hero .hero-ko { text-shadow: 0 3px 24px rgba(0,0,0,.6); } .hs-stage .hero .hero-ko .line:last-child .inner { color: #f3d9df; } .hs-stage .hero .hero-sub { color: #bdb9bf; text-shadow: 0 2px 8px #000; } .hs-stage .hero-mobile-bottom { display: flex; position: absolute; bottom: max(34px,env(safe-area-inset-bottom)); left: 24px; right: 84px; flex-direction: column; align-items: flex-start; gap: 25px; } .hero-project-link { display: inline-flex; align-items: center; gap: 30px; min-height: 48px; padding: 0 19px; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; background: rgba(255,255,255,.045); color: #eee; font-size: 12px; font-weight: 500; } .hero-project-link span { color: #f291a0; font-size: 21px; } .hero-project-link:active { background: rgba(215,38,61,.2); } .hero-project-link:focus-visible { outline: 2px solid #f291a0; outline-offset: 4px; } .hero-mobile-note { display: flex; align-items: center; gap: 14px; color: #77727d; font-size: 8px; letter-spacing: 1.8px; } .hero-mobile-line { width: 32px; height: 1px; background: linear-gradient(90deg,#a84e61,transparent); } .hs-stage .strength .s-tag { color: #d28b98; font-size: 11px; letter-spacing: 3px; } .hs-stage .strength .s-desc { color: #bdb9bf; text-shadow: 0 2px 8px #000; } #service .svc-head .lead h2 { font-size: clamp(34px,9vw,54px); letter-spacing: -1.5px; } #service .svc-head .desc { max-width: 32em; font-size: 14px; line-height: 1.9; margin-top: 22px; word-break: keep-all; } #service .svc-kw { gap: 9px 7px; } #service .svc-kw a { padding: 12px 15px; border: 1px solid #272329; background: #101013; color: #aaa6af; font-size: clamp(13px,3.65vw,19px); font-weight: 500; letter-spacing: -.4px; } #service .svc-kw a.auto-active { background: #a82039; border-color: #c43851; color: #fff; } #works.proj { padding: 64px 0; border-radius: 32px 32px 0 0; background: #f5f3f1; } #works .proj-head { margin-bottom: 26px; } #works .proj-head h2 { font-size: 48px; letter-spacing: -2px; } #works .proj-head h2 .proj-arr { gap: 28px; } #works .pcard { border-radius: 18px; padding: 22px; } #works .pcard .pinfo { transform: none; opacity: 1; } #works .pcard .pinfo .nm { font-size: 21px; line-height: 1.35; letter-spacing: -.5px; word-break: keep-all; } #works .pcard .pinfo .cat { max-height: 3em; opacity: 1; margin-top: 7px; font-size: 11px; color: #ddd; } #works .pcard .pview { width: 34px; height: 34px; top: 16px; right: 16px; opacity: 1; transform: none; } } @media (max-width: 768px) and (max-height: 580px) { .hs-stage .hero-mobile-label { top: -32px; } .hs-stage .hero-mobile-bottom { bottom: 16px; } .hero-mobile-note { display: none; } .hero-project-link { min-height: 40px; } }  .pf-thumb-left { --pf-thumb-position: 0% 0%; } .pf-thumb-youth { --pf-thumb-position: 30% 0%; } #pgrid .pcard.pf-thumb-focus .pbg, #pgrid .pcard.pf-thumb-focus:hover .pbg, #pgrid .pcard.pf-thumb-focus.is-hover .pbg { background-position: var(--pf-thumb-position); background-size: cover; transform: none; }