@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face {
    font-family: "Nelphim";
    src: url("../fonts/Nelphim-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: auto; scrollbar-gutter: stable;}
body {
    font-family: 'Pretendard', sans-serif;
    color: #111;
    background: #f7f7f7;
    overflow-x: hidden;
}
a {color: inherit;text-decoration: none;}
ul, ol { list-style: none; }
img {display: block;max-width: 100%;}

/* =========================
   Layout
========================= */

.b {font-weight: 600;}
.mobile-br {display:none;}
.pc-br {display:block;}
#page-content {
    position:relative;
    z-index:10;
}

/* =========================
   Header
========================= */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

#header .logo { line-height: 0; }
#header .logo a { display: block; }
#header .logo img {
    display: block;
    width: 137px;
    height: auto;
}
#header .gnb ul {
    display: flex;
    align-items: center;
    gap: 52px;
}
#header .gnb a {
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}
#header .gnb li.active a{
	text-decoration:underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.mobile-menu-open {display:none;}
#mobile-menu {position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#191919;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);overflow-y:auto;overscroll-behavior:contain;}
#mobile-menu::backdrop {background:transparent;}
html.mobile-menu-is-open, html.mobile-menu-is-open body {overflow:hidden !important;}
.mobile-menu-header {position:absolute;inset:0 0 auto;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;}
.mobile-menu-header img {width:76px;}
.mobile-menu-close, .mobile-menu-open {position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;}
.mobile-menu-close span, .mobile-menu-open span {position:absolute;left:10px;width:24px;height:2px;background:currentColor;}
.mobile-menu-close span {top:21px;}
.mobile-menu-close span:first-child {transform:rotate(45deg);}
.mobile-menu-close span:last-child {transform:rotate(-45deg);}
.mobile-menu-nav {min-height:100%;padding:max(90px,23dvh) 20px;display:flex;flex-direction:column;justify-content:center;}
.mobile-menu-nav a {display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:90px;height:13.45dvh;border-top:1px solid rgba(25,25,25,.25);font-size:clamp(32px,11.3vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.035em;white-space:nowrap;}
.mobile-menu-nav a:last-child {border-bottom:1px solid rgba(25,25,25,.25);}


/* =========================
   Hero Scroll
========================= */

#hero.hero-scroll {
    position: relative;
    height:300vh;
}
#hero .hero-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
#hero .hero-sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  opacity: var(--cover-opacity, 0);
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#hero .hero-marquee {
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    z-index:1;
    transform:translateY(-50%);
    overflow:visible;
    opacity:1;
    will-change:opacity, filter;
}
#hero .hero-marquee-track {
    display:flex;
    align-items:center;
    width:max-content;
    will-change:transform;
    animation:heroMarquee 24s linear infinite;
}
@keyframes heroMarquee {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}
#hero .hero-marquee-text {
    flex: none;
    white-space: nowrap;
    padding-right: 110px;
    font-size: clamp(72px, 6.2vw, 122px);
    font-weight: 700;
    line-height: 1;
}
#hero .hero-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(340px, 25vw, 500px);
    height: clamp(340px, 25vw, 500px);
    z-index: 5;
    transform: translate(-50%, -50%);
    opacity: 1;
    will-change: opacity, transform;
    pointer-events: none;
}
#hero .hero-symbol-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 24px 16px rgba(0, 0, 0, 0.12));
    transform: translate(-50%, -50%);
	transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
#hero .hero-symbol-image.is-active { opacity: 1; }

#hero .hero-symbol,
#hero .hero-symbol-image {
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#hero .hero-symbol.is-intro-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
}
#hero .hero-marquee {
    opacity: 1; /* 기본값: 보임 */
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#hero .hero-marquee.is-marquee-hidden {
    opacity: 0;
}

/* ---- 배경 글로우: 스크롤 진행률 대신 클래스 토글 ---- */
@property --shadow-opacity { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --blue-opacity { syntax: '<number>'; inherits: true; initial-value: 0; }

#hero .hero-sticky {
    --shadow-opacity: 0;
    --blue-opacity: 0;
    transition: --shadow-opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                --blue-opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    background:
        radial-gradient(circle at 50% 50%, rgba(80, 80, 80, var(--shadow-opacity)) 0%, rgba(80, 80, 80, 0.08) 22%, rgba(80, 80, 80, 0) 43%),
        radial-gradient(circle at 50% 36%, rgba(120, 160, 235, var(--blue-opacity)) 0%, rgba(120, 160, 235, 0.08) 12%, rgba(120, 160, 235, 0) 25%),
        radial-gradient(circle at 30% 5%, rgba(245, 226, 219, 0.48) 0%, rgba(245, 226, 219, 0.14) 17%, rgba(245, 226, 219, 0) 35%),
        radial-gradient(circle at 83% 95%, rgba(216, 227, 247, 0.52) 0%, rgba(216, 227, 247, 0.18) 18%, rgba(216, 227, 247, 0) 36%),
        #f7f7f7;
}
#hero .hero-sticky.is-glow-revealed {
    --shadow-opacity: 0.24;
    --blue-opacity: 0.23;
}

/* =========================
   Result Scene
========================= */

#hero .hero-result {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}
#hero .hero-result-copy {
    position: absolute;
    inset: 0;
}
#hero .hero-answer {
    position: absolute;
    top: 50%;
    left: 0;
    white-space: nowrap;
    font-size: clamp(72px, 6vw, 122px);
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translate(-120%, -70%);
    will-change: left, transform, opacity;
	transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#hero .hero-answer.is-revealed {
    opacity: 1;
    transform: translate(-50%, -140%); /* 기존 renderResult의 최종 transform 값 */
    left: 39%; /* 기존 answerLeft 최종값 */
}
#hero .hero-results {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    opacity: 0;
    transform: translate(120%, 5%);
	transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: right, transform, opacity;
}
#hero .hero-results.is-revealed {
    opacity: 1;
    right: auto;
    left: 41%; /* 기존 resultsLeft 최종값 */
    transform: translate(0, -30%);
}
#hero .hero-results em {
    margin-right: 2rem;
    font-family: "Nelphim", serif;
    font-size: clamp(72px, 6vw, 122px);
}
#hero .hero-results strong {
    font-size: clamp(72px, 6vw, 122px);
    font-weight: 700;
}
#hero .hero-result-ko {
    position: absolute;
    top: 62%;
    left: 50%;
    white-space: nowrap;
    font-size: clamp(30px, 3vw, 60px);
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    transform: translate(-50%, 40px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

#hero .hero-result-ko.is-revealed {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* =========================
   Scroll Guide
========================= */

#hero .scroll-guide {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 30;
    transform: translateX(-50%);
    text-align: center;
}
#hero .scroll-guide-text {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
#hero .scroll-guide-arrow {
    display: block;
    width: 25px;
	height: 15px;
	margin: 0 auto;
	background:url('../images/learnmore_arrow_black.png') no-repeat center / 100% auto;
	animation: bounce 1.5s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* =========================
   Content Sections
========================= */

.content-section {
    min-height: 100vh;
    background: #fff;
}
.inner {
    width: calc(100% - 80px);
    max-width: 1450px;
    margin: 0 auto;
}

/* =========================
   Brand Identity
========================= */

#ai-adtech {
    min-height: auto;
    padding: 200px 0 0;
    background: #fff;
}
#ai-adtech .identity-head {
    display: grid;
    grid-template-columns: 31% 69%;
    align-items: start;
    margin-bottom: 50px;
}
#ai-adtech .section-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}
#ai-adtech .identity-copy h2 {
    /* font-size: clamp(30px, 2.05vw, 42px); */
	font-size: clamp(28px, 1.87vw, 36px);
    font-weight: 700;
    line-height: 1.35;
}
#ai-adtech .identity-copy > p {
    margin-top: 42px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.65;
}
#ai-adtech .identity-visual {position:relative;width:100%;height:400px;overflow:hidden;container-type:size;}
#ai-adtech .identity-visual > p {position:absolute;top:50%;left:50%;width:100%;padding:0 30px;color:#fff;font-size:clamp(27px,2.1vw,42px);font-weight:700;line-height:1.2;text-align:center;transform:translate(-50%,-50%);}
#ai-adtech .identity-visual video {position:absolute;top:50%;left:50%;width:100cqh;height:100cqw;max-width:none;object-fit:fill;transform:translate(-50%,-50%) rotate(90deg);}

/* =========================
   What We Do
========================= */

#what-we-do {
    min-height: auto;
    /* padding: 150px 0 160px; */
	padding: 200px 0;
    background: #fff;
}
#what-we-do .whatwedo-head {
    display: grid;
    grid-template-columns: 31% 69%;
    align-items: start;
}
#what-we-do .section-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}
#what-we-do .whatwedo-copy h2 {
    /* font-size: clamp(30px, 2.05vw, 42px); */
	font-size: clamp(28px, 1.87vw, 36px);
    font-weight: 700;
    line-height: 1.35;
}
#what-we-do .whatwedo-grid {
    width: 69%;
    margin-top: 95px;
    margin-left: 31%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 110px;
    row-gap: 95px;
}


.svg-box {
	width: 124px;
	height: 124px;
	perspective: 400px;
	margin-bottom: 36px;
}

        .flip-diagonal-motion {
            transform-box: fill-box;
            transform-origin: center center;
            animation: flipDiagonal 4s infinite ease-in-out;
        }

        @keyframes flipDiagonal {
            0% {
                transform: rotate3d(1, 1, 0, 0deg);
            }
            25%, 100% {
                transform: rotate3d(1, 1, 0, 360deg);
            }
        }

        .flip-diagonal-motion2 {
            transform-box: fill-box;
            transform-origin: center center;
            animation: flipDiagonal2 4s infinite ease-in-out;
        }

        @keyframes flipDiagonal2 {
            25% {
                transform: rotate3d(1, 1, 0, 0deg);
            }
            50%, 100% {
                transform: rotate3d(1, 1, 0, 360deg);
            }
        }

        .flip-vertical-motion {
            transform-box: fill-box;
            transform-origin: center center;
            animation: flipVertical 4s infinite ease-in-out;
        }

        @keyframes flipVertical {
            50% {
                transform: rotate3d(1, 0, 0, 0deg);
            }
            75%, 100% {
                transform: rotate3d(1, 0, 0, 360deg);
            }
        }

        .flip-horizontal-motion {
            transform-box: fill-box;
            transform-origin: center center;
            animation: flipHorizontal 4s infinite ease-in-out;
        }

        @keyframes flipHorizontal {
            75% {
                transform: rotate3d(0, 1, 0, 0deg);
            }
            100%, 100% {
                transform: rotate3d(0, 1, 0, 360deg);
            }
        }
#what-we-do .whatwedo-item img {
    width: 125px;
    height: 125px;
    object-fit: contain;
    margin-bottom: 36px;
}
#what-we-do .whatwedo-item h3 {
    font-size: clamp(25px, 1.8vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}
#what-we-do .whatwedo-item p {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.55;
}

/* =========================
   Core Capabilities
========================= */

#core-capabilities {
    position: relative;
    height: 100vh;
    height: 100svh;
    background: #fff;
}
#core-capabilities .core-sticky {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    display: flex;
    overflow: hidden;
}
#core-capabilities .core-left {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
#core-capabilities .core-bg {
    position: absolute;
    inset: 0;
	opacity:0.8;
}
#core-capabilities .core-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
#core-capabilities .core-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 33.333333%;
    background: #063dbd;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
#core-capabilities .core-bg-image.is-active { opacity: 1; }
#core-capabilities .core-left-copy {
    position: absolute;
    top: 14%;
    left: 24%;
    z-index: 5;
    color: #fff;
}
#core-capabilities .core-label {
    margin-bottom: 38px;
    font-size: 24px;
    font-weight: 700;
	opacity: 0;
    transform: translateY(40px);
}
#core-capabilities .core-left-copy h2 {
    /* font-size: clamp(30px, 2vw, 40px); */
	font-size: clamp(32px, 2.5vw, 45px);
    font-weight: 700;
    line-height: 1.45;
	opacity: 0;
    transform: translateY(40px);
}

#core-capabilities .core-right {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background: #f7f7f7;
}
/* #core-capabilities .core-track {
    width: 100%;
    height: 300%;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
} */

#core-capabilities .core-track {
    width: 100%;
    height: 300vh;   /* 300% → 300vh */
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
#core-capabilities .core-controls {display:none;}
/* #core-capabilities .core-item {
    position: relative;
    width: 100%;
    height: 33.333333%;
    padding: 13% 12% 8% 28%;
} */
#core-capabilities .core-item {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;   /* 상위 #core-capabilities, .core-sticky 랑 단위 통일 */
    padding: 13% 12% 8% 28%;
}
#core-capabilities .core-number {
    display: block;
    font-size: clamp(38px, 3.12vw, 60px);
    font-weight: 700;
    line-height: 1;
}
#core-capabilities .core-content {
    position: absolute;
    left: 28%;
    bottom: 13%;
}
#core-capabilities .core-content h3 {
    /* font-size: clamp(42px, 3.4vw, 68px); */
	font-size: clamp(38px, 3.12vw, 60px);
    font-weight: 700;
    line-height: 1.08;
}
#core-capabilities .core-content h4 {
    margin-top: 38px;
    /* font-size: clamp(24px, 1.7vw, 34px); */
	font-size: clamp(20px, 1.56vw, 30px);
    font-weight: 700;
}
#core-capabilities .core-content p {
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.55;
}

#core-capabilities .core-progress {
    position: absolute;
    top: 9%;
    left: 5.4%;
    width: 2px;
    height: 82%;
    z-index: 10;
    background: #ddd;
}

#solutions {
    min-height: auto;
    /* padding: 150px 0 180px; */
	padding:200px 0;
    background: #fff;
}
#solutions .solutions-head {
    display: grid;
    grid-template-columns: 31% 69%;
    align-items: start;
}
#solutions .section-label { font-size: 24px; font-weight: 700; line-height: 1.4; }
#solutions .solutions-head h2 {
    /* font-size: clamp(30px, 2.05vw, 42px); */
	font-size: clamp(28px, 1.87vw, 36px);
    font-weight: 700;
    line-height: 1.35;
}
#solutions .solutions-list {
    width: 69%;
    margin-top: 65px;
    margin-left: 31%;
}
#solutions .solution-item {
	display: block;
    color: inherit;
    text-decoration: none;
    position:relative;
    height:108px;
    border-bottom:1px solid #d8d8d8;
    transition:height 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease;
}
#solutions .solution-item:hover,
#solutions .solution-item.is-active { border-bottom-color:#777; }
#solutions .solution-item.is-active { height: 280px; }
#solutions .solution-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#solutions .solution-info {
    position: absolute;
	top:45%;
    left: 0;
    transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	word-break:keep-all;
}
#solutions .solution-info h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}
#solutions .solution-info p {
    max-height: 0;
    margin-top: 20px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(10px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}
#solutions .solution-item.is-active .solution-info {
    top:38px;
}
#solutions .solution-item.is-active .solution-info p {
    /* max-height: 80px; */
	max-height: 100%;
    opacity: 1;
    transform: translateY(0);
}
#solutions .solution-image {
    position: absolute;
    top: 50%;
    /* left: 53%; */
	left:75%;
    width: 200px;
    height: 200px;
    z-index: 5;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.94);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#solutions .solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#solutions .solution-item.is-active .solution-image {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#solutions .solution-toggle {
    position:absolute;
    top:58%;
    right:20px;
    width:42px;
    height:42px;
    border:0;
    background:none;
    cursor:pointer;
    transform:translateY(-50%);
}
#solutions .solution-item.is-active .solution-toggle{
	transform:translateY(0);
	top:32px;
}
#solutions .solution-toggle::before,
#solutions .solution-toggle::after {
    content:"";
    position:absolute;
    top:19px;
    width:16px;
    height:5px;
    border-radius:3px;
    background:#cfcfcf;
    transition:background 0.3s ease, transform 0.35s ease;
}
#solutions .solution-toggle::before { left:9px; transform:rotate(45deg); }
#solutions .solution-toggle::after { right:9px; transform:rotate(-45deg); }
#solutions .solution-item.is-active .solution-toggle::before { background:#111; transform:rotate(-45deg); }
#solutions .solution-item.is-active .solution-toggle::after { background:#111; transform:rotate(45deg); }

/* Works */
#works {
position:relative;height:auto;min-height:0;
/* padding:130px 0 110px; */
padding:200px 0;
overflow:hidden;background:#242424;color:#fff;z-index:2;
}
#works .inner {position:relative;width:calc(100% - 80px);max-width:1450px;height:auto;margin:0 auto;padding:0;}
#works .works-head {
display:grid;
/* grid-template-columns:34% minmax(0,1fr); */
grid-template-columns:31% 69%;
align-items:start;margin-bottom:95px;
}
#works .section-label {margin:0;font-size:24px;font-weight:700;line-height:1.4;}
#works .works-head h2 {margin:0;font-size: clamp(28px, 1.87vw, 36px);font-weight:700;line-height:1.3;}
#works .works-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;}
#works .works-item {position:relative;min-width:0;aspect-ratio:16 / 9;overflow:hidden;isolation:isolate;opacity: 0;transform: translateY(130px); }
#works .works-item[hidden] {display:none;}
#works .works-item img {display:block;width:100%;height:100%;object-fit:cover;
/* transition:filter .45s ease,transform .6s cubic-bezier(.22,1,.36,1); */
transition: filter .45s ease, transform .6s cubic-bezier(.22,1,.36,1);}
#works .works-overlay {position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;padding:6%;background:rgba(0,0,0,.25);opacity:0;transition:opacity .35s ease;}
#works .works-info {width:100%;min-width:0;transform:translateY(16px);transition:transform .45s cubic-bezier(.22,1,.36,1);}
#works .works-tag {display:inline-block;padding:3px 7px;background:#002fa7;color:#fff;font-size:12px;font-weight:700;line-height:1.4;}
#works .works-info h3 {margin:12px 0 0;color:#fff;font-size:clamp(18px,1.65vw,28px);font-weight:700;line-height:1.35;word-break:keep-all;}
#works .works-details {margin:15px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.2);list-style:none;color:#fff;}
#works .works-details li {position:relative;padding-left:10px;font-size:clamp(11px,.9vw,14px);line-height:1.55;word-break:keep-all;}
#works .works-details li::before {content:"·";position:absolute;left:0;}
#works .works-item:focus-visible {outline:2px solid #fff;outline-offset:-3px;}
#works .works-item:focus-within img {filter:blur(8px);transform:scale(1.06);}
#works .works-item:focus-within .works-overlay {opacity:1;}
#works .works-item:focus-within .works-info {transform:translateY(0);}
#works .works-item.is-revealing {animation:worksReveal .65s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--reveal-delay,0ms);}

@media (hover:hover) and (pointer:fine) {
    #works .works-item:hover img {filter:blur(8px);transform:scale(1.06);}
    #works .works-item:hover .works-overlay {opacity:1;}
    #works .works-item:hover .works-info {transform:translateY(0);}
}

#works .works-more-wrap {display:flex;justify-content:center;margin-top:70px;}
#works .works-more-wrap[hidden] {display:none;}
#works .works-more {display:flex;align-items:center;justify-content:center;width:190px;height:60px;padding:0;border:1px solid #444;background:transparent;color:#fff;font:inherit;font-size:16px;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
#works .works-more:hover {background:#303030;border-color:#777;}
#works .works-more:focus-visible {outline:2px solid #fff;outline-offset:4px;}
#works .works-status {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@keyframes worksReveal {
    from {opacity:0;transform:translateY(45px);}
    to {opacity:1;transform:translateY(0);}
}

.footer-spacer {
    position:relative;
    height:540px;
    background:transparent;
    pointer-events:none;
}
#footer {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:540px;
    background:#f4f4f4;
    color:#111;
    /* z-index:-1; */
	z-index:1;
    overflow:hidden;
	will-change:transform;
}
#footer .footer-inner {
    display:grid;
    grid-template-columns:31% 31% 38%;
    padding-top:95px;
	will-change:transform;
}
#footer .footer-logo img { width:150px; height:auto; }
#footer .footer-links {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}
#footer .footer-links a {
    font-size:16px;
    line-height:1.4;
}
#footer .footer-info {
    font-size:16px;
    line-height:1.7;
}
#footer .copyright { margin-top:38px; }

#footer .footer-marquee {
    position:absolute;
    left:0;
    bottom:20px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
	will-change:transform;
}
#footer .footer-marquee-track {
    display:flex;
    width:max-content;
    will-change:transform;
    animation:footerMarquee 24s linear infinite;
}
#footer .footer-marquee-track span {
    flex:none;
    padding-right:70px;
    font-size:clamp(72px,7vw,145px);
    font-weight:700;
    /* line-height:1; */
	line-height:1.2;
}
@keyframes footerMarquee {
    from { transform:translateX(0); }
    to { transform:translateX(-33.3333%); }
}


/* Footer policy dialog */
html.policy-is-open {overflow:hidden;}
.policy-dialog {position:fixed;inset:0;width:min(760px,calc(100% - 40px));max-height:80vh;max-height:80svh;margin:auto;padding:0;border:0;background:#fff;color:#191919;text-align:left;box-shadow:0 20px 80px rgba(0,0,0,.2);}
.policy-dialog[open] {display:flex;flex-direction:column;}
.policy-dialog::backdrop {background:rgba(0,0,0,.65);}
.policy-dialog .policy-dialog-header {display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:20px;padding:26px 32px;border-bottom:1px solid #ddd;}
.policy-dialog .policy-dialog-header h2 {margin:0;font-size:24px;line-height:1.4;font-weight:700;}
.policy-dialog .policy-dialog-close {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;background:transparent;color:#191919;font:inherit;font-size:34px;line-height:1;cursor:pointer;}
.policy-dialog .policy-dialog-body {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 32px 40px;font-size:16px;line-height:1.75;word-break:keep-all;}
.policy-dialog .policy-dialog-body h3 {margin:28px 0 10px;font-size:18px;font-weight:700;}
.policy-dialog .policy-dialog-body p {margin:0 0 16px;}
.policy-dialog .policy-dialog-body p:last-child {margin-bottom:0;}
.policy-dialog .policy-sample-notice {padding:16px;background:#f4f4f4;color:#555;}
.policy-dialog .policy-dialog-close:focus-visible,.policy-dialog .policy-dialog-body:focus-visible {outline:2px solid #0639a6;outline-offset:-4px;}

/* =========================
   Responsive
========================= */

@media (min-width: 2800px){
	#hero .hero-answer.is-revealed{
		left:44%;
	}
	#hero .hero-results.is-revealed{
		left:45%;
	}
}

@media (max-width: 1280px) {
	.svg-box {
		width: 110px;
		height: 110px;
		perspective: 400px;
		margin-bottom: 30px;
	}
	#header {
        height: 88px;
        padding: 0 32px;
    }
    #header .gnb ul { gap: 32px; }
    #header .gnb a { font-size: 18px; }

    .inner {
        width: calc(100% - 64px);
        max-width: none;
    }

    #ai-adtech { padding-top: 130px; }
    #ai-adtech .identity-head { grid-template-columns: 28% 72%; }
    #ai-adtech .identity-copy > p {margin-top: 32px;font-size: 17px;}
    #ai-adtech .identity-visual { height: 340px; }
	
	#what-we-do { padding: 120px 0 130px; }
    #what-we-do .whatwedo-head { grid-template-columns: 28% 72%; }
    #what-we-do .whatwedo-grid {
        width: 72%;
        margin-left: 28%;
        column-gap: 70px;
        row-gap: 80px;
    }
    #what-we-do .whatwedo-item img {
        width: 110px;
        height: 110px;
        margin-bottom: 30px;
    }
    #what-we-do .whatwedo-item p { font-size: 17px; }

	#core-capabilities .core-left-copy { left: 14%; }
    #core-capabilities .core-item { padding-left: 23%; }
    #core-capabilities .core-content { left: 23%; }
    #core-capabilities .core-content p { font-size: 16px; }
	
	#solutions .solution-image {left:75%;width:150px;height:150px;}
	#solutions .solution-item.is-active .solution-image {left:75%;}
	
	#works {padding:100px 0 80px;}
    #works .inner {width:calc(100% - 64px);}
    #works .works-head {margin-bottom:45px;}
    #works .works-grid {gap:24px;}
}

@media (max-width:1100px){
	#solutions .solution-item.is-active{height:235px;}
	#solutions .solution-info{
		width:50%;
	}
	#solutions .solution-item.is-active .solution-image{left:70%;}
	#solutions .solution-item .solution-image{left:70%;}
	
	#ai-adtech {
		padding: 150px 0 0;
	}
	#what-we-do {
		padding: 150px 0;
	}
	#solutions {
		padding:150px 0;
	}
	#works {
	padding:150px 0;
	}
	#what-we-do {
		padding: 150px 0;
	}
	#what-we-do .whatwedo-grid{margin-top:75px;}
	#solutions .solutions-list{margin-top:45px;}
	#works .works-more-wrap{margin-top:50px;}
	
}

@media (max-width: 768px) {

	#header.is-company-dark .mobile-menu-open{color:#fff;}
	.svg-box {
		grid-column:1;
		grid-row:1 / 3;
		width: 65px;
		height: 65px;
		perspective: 400px;
		margin-bottom: 0px;
	}
	#solutions .solution-item .solution-image{left:0;}
	html {scrollbar-gutter:auto;}
	
	.mobile-br {display:block;}
	.pc-br {display:none;}
	.inner { width: calc(100% - 48px); }
	
    #header {height:48px;padding:0 16px;}
    #header .logo img {width:72px;}
    #header .gnb {display:none;}
    #header .mobile-menu-open {display:block;margin-right:-10px;}
    .mobile-menu-open span:first-child {top:16px;}
    .mobile-menu-open span:last-child {top:27px;}

    /* 첫 화면 */
    #hero.hero-scroll {height:100svh;}
    #hero .hero-sticky {position:relative;height:100%;background:radial-gradient(ellipse at 85% 100%,rgba(183,190,216,.46),transparent 48%),radial-gradient(ellipse at 0 0,rgba(221,211,205,.4),transparent 45%),#f7f7f7 !important;}
    #hero .hero-result-copy {inset:18% 9.5% auto;}
    #hero .hero-answer {position:static;font-size:clamp(28px,9.45vw,52px);line-height:1.08;opacity:1 !important;transform:none !important;}
    #hero .hero-results {position:static;justify-content:flex-end;gap:6px;opacity:1 !important;transform:none !important;}
    #hero .hero-results em, #hero .hero-results strong {font-size:clamp(28px,9.45vw,52px);line-height:1.08;}
    #hero .hero-results em {margin-right:0;}
    #hero .hero-symbol {top:50%;width:min(65vw,350px);height:min(65vw,350px);opacity:1 !important;transform:translate(-50%,-50%) !important;}
	#hero .hero-marquee {top:50%;opacity:1 !important;filter:none !important;}
    #hero .hero-marquee-text {font-size:clamp(42px,12.8vw,72px);padding-right:40px;opacity:1 !important;filter:none !important;}
    #hero .hero-result-ko {top:73.5%;left:50%;font-size:clamp(24px,7.2vw,36px);opacity:1 !important;transform:translateX(-50%) !important;}
    #hero .scroll-guide {bottom:max(16px,env(safe-area-inset-bottom));}
    #hero .scroll-guide-text {margin-bottom:10px;font-size:11px;}
    #hero .scroll-guide-arrow {width:12px;height:8px;}

	@keyframes bounce {
	  0%, 100% {
		transform: translateY(0);
	  }
	  50% {
		transform: translateY(5px);
	  }
	}

    /* Brand identity */
	#ai-adtech {min-height:auto;padding:56px 0 38px;}
	#ai-adtech .inner {width:auto;max-width:none;margin:0 24px;}
	#ai-adtech .identity-head {display:block;margin-bottom:35px;}
	#ai-adtech .section-label {margin-bottom:18px;font-size:18px;font-weight:700;line-height:1.4;}
	#ai-adtech .identity-copy h2 {font-size:25px;line-height:1.3;word-break:keep-all;letter-spacing: 0;}
	#ai-adtech .identity-copy > p {margin-top: 32px;font-size: 15px;line-height: 1.4; word-break: keep-all;color: #1a1a1a;}
	#ai-adtech .identity-visual {position:relative;display:flex;align-items:flex-end;justify-content:flex-end;width:calc(100% + 24px);height:auto;aspect-ratio:345 / 215;margin:0;padding:0 15px 20px 0;}
	#ai-adtech .identity-visual p {position:relative;inset:auto;z-index:1;flex:0 0 65%;width:65%;margin:0;padding:0;font-size:clamp(22px,6.5vw,35px);font-weight:700;line-height:1.17;color:#fff;text-align:left;transform:none;}
    #ai-adtech .identity-visual video {width:100%;height:100%;transform:translate(-50%,-50%) rotate(0deg);}
	
	/* What we do */
	#what-we-do {min-height:auto;padding:30px 0 60px;}
    #what-we-do .inner {width:auto;max-width:none;margin:0 24px;}
    #what-we-do .whatwedo-head {display:block;grid-template-columns:none;margin-bottom:45px;}
    #what-we-do .section-label {margin-bottom:18px;font-size:18px;font-weight:700;line-height:1.4;}
    #what-we-do .whatwedo-copy h2 {font-size:25px;line-height:1.3;word-break:keep-all;letter-spacing:0;}
    #what-we-do .whatwedo-grid {display:grid;grid-template-columns:1fr;width:100%;margin:0;column-gap:0;row-gap:45px;}
    #what-we-do .whatwedo-item {display:grid;grid-template-columns:65px minmax(0,1fr);column-gap:25px;row-gap:12px;align-content:start;text-align:left;}
    #what-we-do .whatwedo-item img {grid-column:1;grid-row:1 / 3;width:65px;height:65px;margin:0;object-fit:contain;}
    #what-we-do .whatwedo-item h3 {grid-column:2;margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:0;}
    #what-we-do .whatwedo-item p {grid-column:2;margin:0;font-size:15px;line-height:1.4;word-break:keep-all;letter-spacing:0;color:#1a1a1a;}

    #core-capabilities {height:auto;min-height:0;background:#f7f7f7;}
    #core-capabilities .core-sticky {position:relative;top:auto;display:block;height:auto;overflow:hidden;}
    #core-capabilities .core-left {display:flex;align-items:center;justify-content:center;width:100%;height:auto;aspect-ratio:433 / 395;padding:45px 24px;}
    #core-capabilities .core-bg-image {opacity:0 !important;transform:none !important;}
    #core-capabilities .core-bg-image:first-child {opacity:1 !important;}
    #core-capabilities .core-left-copy {position:relative;inset:auto;width:100%;text-align:center;}
    #core-capabilities .core-label {margin-bottom:22px;font-size:18px;line-height:1.4; opacity:1; transform: translateY(0px);}
    #core-capabilities .core-left-copy h2 {font-size:25px;line-height:1.3;word-break:keep-all;opacity:1; transform: translateY(0px);}

    #core-capabilities .core-right {width:100%;height:auto;padding:0 0 100px;background:#f7f7f7;touch-action:pan-y;}
    #core-capabilities .core-track {display:flex;align-items:stretch;width:100%;height:auto;transition:transform .5s cubic-bezier(.22,1,.36,1);}
    #core-capabilities .core-item {display:grid;grid-template-columns:24% minmax(0,1fr);column-gap:12px;flex:0 0 100%;width:100%;min-width:0;height:auto;padding:45px 24px 0;}
    #core-capabilities .core-number {font-size:32px;line-height:1.2;}
    #core-capabilities .core-content {position:static;inset:auto;min-width:0;}
    #core-capabilities .core-content h3 {font-size:clamp(27px,7.4vw,34px);line-height:1.15;overflow-wrap:break-word;}
    #core-capabilities .core-content h4 {margin-top:32px;font-size:20px;line-height:1.4;}
    #core-capabilities .core-content p {margin-top:15px;font-size:15px;line-height:1.4;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;}

    #core-capabilities .core-controls {position:absolute;left:16px;bottom:35px;display:flex;gap:2px;}
    #core-capabilities .core-controls button {display:flex;align-items:center;justify-content:center;width:34px;height:44px;padding:0;border:0;background:transparent;color:#222;cursor:pointer;}
    #core-capabilities .core-controls button::before {content:"";width:10px;height:10px;border-top:3px solid currentColor;border-right:3px solid currentColor;}
    #core-capabilities .core-prev::before {transform:rotate(-135deg);}
    #core-capabilities .core-next::before {transform:rotate(45deg);}
    #core-capabilities .core-controls button:disabled {color:#ccc;cursor:default;}
    #core-capabilities .core-progress {position:absolute;inset:auto 24px 56px 31%;width:auto;height:2px;background:#ddd;}
    #core-capabilities .core-progress-bar {top:0;left:0;width:var(--core-step,33.333333%);height:100%;background:#5145b5;transition:transform .5s ease;}

	/* Solutions */
	#solutions {min-height:auto;padding:56px 0 60px;}
	#solutions .inner {width:auto;max-width:none;margin:0 24px;}
	#solutions .solutions-head {display:block;grid-template-columns:none;}
	#solutions .section-label {margin-bottom:18px;font-size:18px;font-weight:700;line-height:1.4;}
	#solutions .solutions-head h2 {font-size:25px;line-height:1.3;letter-spacing:0;word-break:keep-all;}
	#solutions .solutions-list {display:grid;grid-template-columns:1fr;gap:45px;width:100%;margin:40px 0 0;}
	#solutions .solution-item, #solutions .solution-item.is-active {height:auto;margin:0;padding:0;border:0;transition:none;}
	#solutions .solution-trigger {position:static;display:flex;flex-direction:column;width:100%;height:auto;}
	#solutions .solution-image, #solutions .solution-item.is-active .solution-image {position:relative;inset:auto;order:0;width:100%;height:auto;aspect-ratio:2.35 / 1;margin:0;opacity:1;transform:none;pointer-events:auto;transition:none;overflow:hidden;}
	#solutions .solution-image img {display:block;width:100%;height:100%;object-fit:cover;}
	#solutions .solution-info, #solutions .solution-item.is-active .solution-info {position:static;inset:auto;order:1;width:100%;margin-top:18px;transform:none;transition:none;}
	#solutions .solution-info h3 {font-size:20px;font-weight:700;line-height:1.3;letter-spacing:0;}
	#solutions .solution-info p, #solutions .solution-item.is-active .solution-info p {max-height:none;margin-top:14px;font-size:15px;line-height:1.4;letter-spacing:0;word-break:keep-all;color:#1a1a1a;opacity:1;transform:none;overflow:visible;transition:none;}
	#solutions .solution-toggle {display:none;}
	
	/* Works */
	#works {padding:56px 0 60px;}
	#works .inner {width:auto;max-width:none;margin:0 16px;}
	#works .works-head {grid-template-columns:26% minmax(0,1fr);gap:12px;margin-bottom:40px;}
	#works .section-label {font-size:18px;line-height:1.4;}
	#works .works-head h2 {font-size:22px;line-height:1.3;word-break:keep-all;}
	#works .works-grid {grid-template-columns:1fr;gap:40px;}
	#works .works-item {aspect-ratio:auto;opacity:1; transform: translateY(0px);}
	#works .works-item img, #works .works-item:hover img, #works .works-item:focus-within img {display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;filter:none;transform:none;transition:none;}
	#works .works-overlay {position:static;inset:auto;display:block;padding:20px 0 0;background:none;opacity:1;transition:none;}
	#works .works-info, #works .works-item:focus-within .works-info {width:100%;transform:none;transition:none;}
	#works .works-tag {padding:4px 8px;font-size:12px;line-height:1.4;}
	#works .works-info h3 {margin:12px 0 0;font-size:22px;line-height:1.3;word-break:keep-all;}
	#works .works-details {margin:16px 0 0;padding:0;border:0;}
	#works .works-details li {padding-left:10px;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
	#works .works-more-wrap {margin-top:36px;}
	#works .works-more {width:140px;height:46px;font-size:14px;}
	
	/* Footer */
	.footer-spacer {display:none;}
	#footer {position:relative;inset:auto;width:100%;height:auto;min-height:0;padding:44px 0 20px;background:#f4f4f4;color:#242424;z-index:0;overflow:hidden;}
	#footer .footer-inner {display:block;width:auto;max-width:none;margin:0 24px;padding:0;}
	#footer .footer-logo img {width:72px;height:auto;}
	#footer .footer-links {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:40px;}
	#footer .footer-links a {font-size:13px;line-height:1.4;}
	#footer .footer-info {margin-top:38px;font-size:13px;line-height:1.65;word-break:keep-all;}
	#footer .copyright {margin-top:36px;font-size:13px;letter-spacing:0;}
	#footer .footer-marquee {position:relative;inset:auto;width:100%;margin-top:34px;overflow:hidden;white-space:nowrap;}
	#footer .footer-marquee-track span {padding-right:15px;font-size:48px;font-weight:700;line-height:1.1;letter-spacing:0;}
}

@media (max-width: 480px) {
	.svg-box {
		width: 65px;
		height: 80px;
	}
    #what-we-do .whatwedo-grid {
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
    #what-we-do .whatwedo-item img {
        width: 80px;
        height: 80px;
    }
}

@media (prefers-reduced-motion:reduce) {
    #works .works-item.is-revealing {animation:none;}
}