.section {
   padding-top: clamp(2px, 6.125vw + -17.600px, 100px);
   padding-bottom: clamp(50px, 4.340vw + 16.667px, 100px);
 }

 .inner {
   width: min(1280px, calc(100% - 34px));
   margin: 0 auto;

   @media all and (max-width: 768px) {

     width: 100% !important;
   }
 }



 /***** header ***************/
 .site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
   background: rgb(var(--rgb-black), 50%);
   z-index: 100;
   transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
   backdrop-filter: blur(10px);

   .inner {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     position: relative;
     z-index: 310;
   }

   .brand-logo {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     .logoImg {
       display: block;
       filter: var(--filter-white);
     }

   }

   .gnb {
     display: flex;
     align-items: center;
     gap: 8px;

     >a {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 4px 10px;
       overflow: hidden;
       text-decoration: none;
       font-size: 17px;
       font-weight: 600;
       line-height: 1;
       color: transparent;
       background-color: transparent;
       background-image: linear-gradient(var(--primary), var(--primary));
       background-repeat: no-repeat;
       background-position: center center;
       background-size: 0% 100%;
       transition: box-shadow .3s ease;
     }

     >a::before,
     >a::after {
       content: attr(data-text);
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform .3s ease, color .3s ease;
     }

     >a::before {
       color: var(--white);
       transform: translateY(0);
     }

     >a::after {
       color: var(--gray-300);
       transform: translateY(100%);
     }

     >a:hover::before {
       transform: translateY(-100%);
     }

     >a:hover::after {
       transform: translateY(0);
     }

     >a.active,
     >a.is-active {
       box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
       animation: gnb-active-fill-center 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
     }

     >a.active::before,
     >a.is-active::before,
     >a.active::after,
     >a.is-active::after {
       transform: translateY(0);
       color: var(--white);
     }
   }

   .mobile-menu-btn {
     display: none;
     position: relative;
     z-index: 320;
     width: 40px;
     height: 40px;
     background: transparent;
     cursor: pointer;

     span {
       position: absolute;
       left: 50%;
       width: 26px;
       height: 2px;
       background: #fff;
       border-radius: 999px;
       transform: translateX(-50%);
       transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
     }

     span:nth-child(1) {
       top: 12px;
     }

     span:nth-child(2) {
       top: 21px;
     }

     span:nth-child(3) {
       top: 30px;
     }
   }

   .mobile-menu-wrap {
     position: fixed;
     inset: 0;
     z-index: 305;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 110px 24px 40px;
     background: rgba(8, 8, 12, 0.96);
     height: 100vh;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.3s ease, visibility 0.3s ease;
   }

   .mobile-menu-inner {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 38px;

     a {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: var(--white);
       font-size: 22px;
       font-weight: 600;
       transition: color 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;

       &.active,
       &.is-active {
         color: var(--white);
         background: var(--primary);
         font-weight: 700;
         padding: 2px 10px;
       }

       /* 
       &::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -6px;
         width: 100%;
         height: 2px;
         border-radius: 999px;
         background: var(--primary);
         transform: scaleX(0);
         transform-origin: center;
         transition: transform 0.28s ease;
       } */

       &:hover {
         color: var(--gray-300);
       }

       &.active::after,
       &.is-active::after {
         transform: scaleX(1);
       }
     }
   }
 }

 .site-header.is-menu-open {
   .mobile-menu-wrap {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }

   .mobile-menu-btn {
     span:nth-child(1) {
       top: 23px;
       transform: translateX(-50%) rotate(45deg);
     }

     span:nth-child(2) {
       opacity: 0;
     }

     span:nth-child(3) {
       top: 23px;
       transform: translateX(-50%) rotate(-45deg);
     }
   }
 }

 @keyframes gnb-active-fill-center {
   from {
     background-size: 0% 100%;
   }

   to {
     background-size: 100% 100%;
   }
 }

 body.is-menu-open {
   overflow: hidden;
 }

 @media all and (max-width: 1024px) {
   .site-header {
     height: 68px;

     .inner {
       padding: 0;
     }

     .brand-logo {
       width: 124px !important;
       height: auto !important;
     }

     .gnb {
       display: none;
     }

     .mobile-menu-btn {
       display: block;
     }

     .mobile-menu-inner {
       a {
         font-size: 24px;
       }
     }
   }
 }

 @media all and (max-width: 767px) {
   .site-header {
     height: 56px;
     padding: 0 16px;

     .mobile-menu-wrap {
       padding-top: 90px;
     }

     .mobile-menu-inner {
       gap: 22px;

       a {
         font-size: 22px;
       }
     }
   }
 }


 /* 로고 3D */
 .site-header {
   .brand-logo {
     position: relative;
     width: 180px;
     height: 62px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     text-decoration: none;
     perspective: 1800px;
     perspective-origin: center center;
     transform-style: preserve-3d;
     isolation: isolate;
   }

   .brand-logo__scene {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     transform-style: preserve-3d;
     transform-origin: center center;
     will-change: transform;
     animation: logoTurn3D 6.8s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
   }

   .brand-logo__stack {
     position: absolute;
     inset: 0;
     display: block;
     transform-style: preserve-3d;
     pointer-events: none;
   }

   .logoImg {
     position: absolute;
     top: 50%;
     left: 50%;
     display: block;

     height: auto;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     transform-origin: center center;
     user-select: none;
     -webkit-user-drag: none;
   }

   .logoImg--front {
     z-index: 10;
     transform: translate(-50%, -50%) translateZ(18px);
     filter:
       brightness(0) invert(1) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.04));
   }

   .logoImg--depth {
     filter: brightness(0) invert(1);
     opacity: 0.12;
   }

   .depth-1 {
     transform: translate(-50%, -50%) translateZ(14px);
     opacity: 0.11;
   }

   .depth-2 {
     transform: translate(-50%, -50%) translateZ(10px);
     opacity: 0.1;
   }

   .depth-3 {
     transform: translate(-50%, -50%) translateZ(6px);
     opacity: 0.09;
   }

   .depth-4 {
     transform: translate(-50%, -50%) translateZ(2px);
     opacity: 0.08;
   }

   .depth-5 {
     transform: translate(-50%, -50%) translateZ(-2px);
     opacity: 0.07;
   }

   .depth-6 {
     transform: translate(-50%, -50%) translateZ(-6px);
     opacity: 0.06;
   }

   .brand-logo:hover .brand-logo__scene,
   .brand-logo:focus-visible .brand-logo__scene {
     animation-play-state: paused;
     transform: rotateY(0deg) rotateX(4deg) rotateZ(0deg) translateZ(2px);
   }

   .brand-logo:hover .logoImg--front,
   .brand-logo:focus-visible .logoImg--front {
     transform: translate(-50%, -50%) translateZ(22px) scale(1.02);
     filter:
       brightness(0) invert(1) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.06));
   }

   .brand-logo:focus-visible {
     outline: none;
   }
 }

 @keyframes logoTurn3D {
   0% {
     transform: rotateY(32deg) rotateX(5deg) translateZ(0);
   }

   25% {
     transform: rotateY(0deg) rotateX(1deg) translateZ(8px);
   }

   50% {
     transform: rotateY(-32deg) rotateX(5deg) translateZ(0);
   }

   75% {
     transform: rotateY(0deg) rotateX(1deg) translateZ(8px);
   }

   100% {
     transform: rotateY(32deg) rotateX(5deg) translateZ(0);
   }
 }


 /*** hero ******************************/
 .visual-body {
   position: relative;
   min-height: 100svh;
   overflow: hidden;
   background: var(--white);
   isolation: isolate;

   .visual-brand-text {
     position: absolute;
     top: 41%;
     left: 0;
     width: 100%;
     z-index: 3;
     pointer-events: none;
     transition:
       opacity 0.8s ease,
       transform 1s ease;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 60px;

     .brand__logo {
       font-size: clamp(30px, 2.813vw + 21.000px, 75px);
       font-weight: 700;
       line-height: 1;
       white-space: nowrap;
       text-transform: uppercase;
       letter-spacing: -1px;
       color: var(--black);
       font-family: "Montserrat", sans-serif;
     }

     .brand__copy {
       font-size: clamp(20px, 0.750vw + 17.600px, 32px);
       font-weight: 500;
       line-height: 1.3;
       text-align: center;
       text-transform: uppercase;
       color: var(--black);
     }
   }

   .intro-main {
     min-height: 100svh;
   }

   .visual-stage-warp {
     position: relative;
     min-height: 100svh;
     perspective: 1800px;
     perspective-origin: center center;
   }

   /* 시작: 50px 블랙 라인 */
   .visual-screen {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 300px;
     height: 30px;
     transform: translate(-50%, -50%);
     transform-style: preserve-3d;
     will-change: width, height, top, left, transform;
     transition:
       width 0.36s cubic-bezier(0.16, 1, 0.3, 1),
       height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
       top 0.42s cubic-bezier(0.16, 1, 0.3, 1),
       left 0.42s cubic-bezier(0.16, 1, 0.3, 1),
       transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .visual-screen__frame {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: var(--black);
     border-radius: 2px;
     transform-origin: center center;
     transform: rotateX(84deg) translateZ(0);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     will-change: transform, border-radius, box-shadow;
     transition:
       transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
       border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1),
       box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .visual-screen__frame::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
       linear-gradient(180deg,
         rgba(255, 255, 255, 0.06) 0%,
         rgba(255, 255, 255, 0.01) 14%,
         rgba(0, 0, 0, 0) 30%,
         rgba(0, 0, 0, 0.16) 100%);
     opacity: 0;
     transition: opacity 0.9s ease;
     pointer-events: none;
     z-index: 2;
   }

   .visual-screen__video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     opacity: 0;
     transform: scale(1.4);
     filter: saturate(0.9) contrast(1.04);
     transition:
       opacity 0.25s ease,
       transform 0.45s ease;
     z-index: 1;
   }

   .visual-screen__fallback {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     background:
       radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 30%),
       radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.1), transparent 28%),
       linear-gradient(135deg, #171717 0%, #2d2d2d 45%, #0e0e0e 100%);
     opacity: 0;
     transition: opacity 0.7s ease;
     z-index: 0;
   }

   .visual-screen__fallback span {
     font-size: clamp(18px, 3vw, 40px);
     font-weight: 700;
     letter-spacing: 0.14em;
     color: rgba(255, 255, 255, 0.72);
     text-transform: uppercase;
   }



   /* 1단계: 라인이 천천히 길어짐 */
   &.is-line-expand {
     .visual-brand-text {
       opacity: 0.2;
       transform: scale(0.992);
     }

     .visual-screen {
       width: 100vw;
       height: 30px;
     }
   }

   /* 2단계: 길어진 라인이 세로로 열리면서 풀스크린 */
   &.is-expand {
     .visual-brand-text {
       opacity: 0;
       transform: scale(0.98);
     }

     .visual-screen {
       top: 0;
       left: 0;
       width: 100vw;
       height: 100svh;
       transform: none;
     }

     .visual-screen__frame {
       border-radius: 0;
       transform: rotateX(0deg) translateZ(0);
     }
   }

   /* 3단계: 영상 부드럽게 등장 */
   &.is-video {
     .visual-screen__video {
       opacity: 1;
       transform: scale(1);
     }

     .visual-screen__frame::after {
       opacity: 1;
     }
   }

   &.is-video.is-fallback {
     .visual-screen__fallback {
       opacity: 1;
     }
   }

   &.is-done {
     .visual-screen__frame {}
   }
 }






 @media (prefers-reduced-motion: reduce) {
   .intro-page {

     & .visual-brand-text,
     & .visual-screen,
     & .visual-screen__frame,
     & .visual-screen__frame::after,
     & .visual-screen__video,
     & .visual-screen__fallback {
       transition: none;
     }
   }
 }


 @media all and (max-width: 768px) {}








 /***** 비주얼 텍스트 ***************/
 .visual-band-section {
   position: relative;
   margin-top: -1px;
   color: #fff;
   padding: 50px 0;

   .visual-band {
     position: relative;
     overflow: hidden;

   }

   .visual-text {
     position: relative;
     overflow: hidden;
     white-space: nowrap;

     .visual-text-track {
       display: flex;
       width: max-content;
       gap: 20px;
       animation: bandMarquee 28s linear infinite;
       text-transform: uppercase;
     }

     span {
       font-family: "Montserrat", sans-serif;
       display: inline-flex;
       align-items: center;
       flex: 0 0 auto;
       font-weight: 800;
       letter-spacing: -0.04em;
       line-height: 1;
     }
   }

   .visual-text--top {
     font-size: clamp(28px, 4vw, 72px);
     color: var(--white);

     span {

       &:nth-child(1),
       &:nth-child(6),
       &:nth-child(11) {
         color: var(--primary);
         font-style: italic;
         font-weight: 400;
       }
     }
   }

   .visual-text--bottom {
     margin-top: 32px;
     font-size: clamp(28px, 4vw, 68px);
     color: var(--white);

     .visual-text-track {
       animation-direction: reverse;
       animation-duration: 32s;
     }

     span {

       &:nth-child(2),
       &:nth-child(7),
       &:nth-child(12) {
         color: var(--primary);
       }
     }
   }

   .visual-collage {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 16px;
     margin-top: 32px;
   }

   .collage-item {
     height: 220px;
     border-radius: 8px;
     overflow: hidden;

     &>img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: brightness(0.76);
     }
   }
 }

 @keyframes bandMarquee {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }


 /***** bj *******************/

 /* 섹션 */
 .creator-section {
   position: relative;
   overflow: hidden;


 }



 /* 마퀴 */
 .creator-marquee {
   --marquee-width: 0px;
   --marquee-duration: 20s;
   position: relative;
   margin-top: 44px;
   overflow: hidden;
   -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
   mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);

   .creator-marquee__track {
     display: flex;
     width: max-content;
     will-change: transform;
     animation: creator-marquee var(--marquee-duration) linear infinite;
   }

   .creator-marquee__group {
     display: flex;
     align-items: stretch;
     gap: 24px;
     padding: 0 20px;
   }

   &:hover {
     .creator-marquee__track {
       animation-play-state: paused;
     }
   }
 }

 @keyframes creator-marquee {
   from {
     transform: translate3d(0, 0, 0);
   }

   to {
     transform: translate3d(calc(-1 * var(--marquee-width)), 0, 0);
   }
 }

 @keyframes creator-card-thumb-sheen {
   0% {
     transform: translateX(-145%) skewX(-14deg);
     opacity: 0;
   }

   28% {
     opacity: 0.34;
   }

   100% {
     transform: translateX(165%) skewX(-14deg);
     opacity: 0;
   }
 }

 /* 카드 */
 .creator-card {
   flex: 0 0 clamp(220px, 25vw, 340px);
   background: transparent;
   transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

   .ct-card__media {
     position: relative;
     margin: 0;
     aspect-ratio: 1.3 / 1.6;
     overflow: hidden;
     background: #dfe3ea;
     box-shadow: var(--shadow);

     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border: 1px solid var(--line);
       border-radius: inherit;
       pointer-events: none;
     }

     &::before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       width: 42%;
       z-index: 2;
       pointer-events: none;
       opacity: 0;
       transform: translateX(-145%) skewX(-14deg);
       background: linear-gradient(92deg,
           rgba(255, 255, 255, 0) 0%,
           rgba(255, 255, 255, 0.34) 50%,
           rgba(255, 255, 255, 0) 100%);
     }

     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transform: scale(1);
       filter: saturate(0.9) brightness(0.94);
       transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
         filter 0.46s ease;
       will-change: transform, filter;
     }
   }

   .card-name {
     padding: 18px 8px 0;
     text-align: center;
     display: inline-block;
     font-size: 22px;
     color: var(--gray-500);
     width: 100%;
     transition: color 0.34s ease, letter-spacing 0.42s ease;
   }

   &:hover {
     transform: translate3d(0, -6px, 0);

     .ct-card__media::before {
       animation: creator-card-thumb-sheen 0.96s cubic-bezier(0.22, 1, 0.36, 1) 1;
     }

     .ct-card__media img {
       transform: scale(1.08);
       filter: saturate(1.06) brightness(1.06);
     }

     .card-name {
       color: var(--white);
       letter-spacing: -0.02em;
     }
   }
 }

 /* 태블릿 */
 @media (max-width: 1024px) {
   .creator-section {
     padding: 60px 0 74px;
   }

   .creator-marquee {
     margin-top: 36px;

     .creator-marquee__group {
       gap: 18px;
       padding: 0 16px;
     }
   }

   .creator-card {
     flex-basis: clamp(200px, 34vw, 280px);
   }
 }

 /* 모바일 */
 @media (max-width: 767px) {
   .creator-section {
     padding: 52px 0 68px;

     .creator-section__header {
       padding: 0 16px;
     }

     .creator-section__eyebrow {
       margin-bottom: 10px;
       font-size: 12px;
     }

     .creator-section__desc {
       margin-top: 14px;
       font-size: 14px;
       line-height: 1.6;
     }
   }

   .creator-marquee {
     margin-top: 0;
     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
     mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);

     .creator-marquee__group {
       gap: 14px;
       padding: 0 14px 20px;
     }
   }

   .creator-card {
     flex-basis: min(50vw, 180px);


     .ct-card__body {
       padding-top: 14px;
     }

     .card-name {
       padding: 10px 0 0;
       font-size: 16px;
     }
   }
 }

 /* 모션 최소화 */
 @media (prefers-reduced-motion: reduce) {
   .creator-marquee {
     overflow-x: auto;
     -webkit-mask-image: none;
     mask-image: none;

     .creator-marquee__track {
       animation: none;
     }
   }

   .creator-card {
     transition: none;

     .ct-card__media img {
       transition: none;
     }

     .ct-card__media::before {
       animation: none !important;
     }
   }
 }





 /**/
 .content-grid-col {
   display: flex;
   flex-direction: column;
   gap: 16px;
   flex: 1;
   border: 1px solid var(--white);
   padding: clamp(20px, 1.875vw + 14.000px, 50px);


   .info--title {
     font-size: 20px;
     line-height: 1.3;
     font-weight: 800;

   }

   .col-card-item {
     display: flex;
     flex-direction: column;
     gap: 10px;
     border-bottom: 1px solid var(--white);

     padding-bottom: 20px;

     &:last-child {
       border-bottom: 0;
     }

     .check-list {
       display: flex;
       flex-direction: column;
       gap: 8px;

       &>li {
         display: flex;
         gap: 4px;
         font-size: 15px;


         &::before {
           content: "●";
           font-size: 4px;
         }
       }
     }
   }
 }

 /***********/
 .cdm-universal-tab-surface {
   width: 100%;

   .cdm-universal-tab-surface__layout {
     display: grid;
     grid-template-columns: minmax(0, clamp(130px, 12.153vw + 36.667px, 270px)) minmax(0, 1fr);
     gap: clamp(20px, 5.000vw + 4.000px, 100px);
     align-items: start;
     padding: clamp(40px, 13.889vw + -66.667px, 200px) 0 clamp(35px, 4.063vw + 22.000px, 100px);

   }


   .cdm-universal-tab-surface__tab-rail {
     display: flex;
     flex-direction: column;
     gap: clamp(16px, 2.125vw + 9.2px, 50px);
   }

   .cdm-universal-tab-surface__tab-button {
     position: relative;
     width: 100%;
     border: 0;
     border-radius: 0;
     background: transparent;
     color: var(--gray-500);
     text-align: left;
     font-size: clamp(16px, 1.375vw + 11.600px, 38px);
     letter-spacing: -0.5px;
     font-weight: 500;
     cursor: pointer;
     transition: color 0.36s ease, letter-spacing 0.44s ease;

     &::after {
       content: "";
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       height: 3px;
       background: var(--white);
       opacity: 0;
       transform: scaleX(0);
       transform-origin: left center;
       transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
         opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1);
     }

     &:hover {
       color: var(--white);
     }

     &.is-current {
       color: var(--white);
       letter-spacing: -0.048em;
     }

     &.is-current::after {
       opacity: 1;
       transform: scaleX(1);
     }

     &:focus-visible {
       outline: 2px solid rgba(255, 255, 255, 0.84);
       outline-offset: 4px;
     }
   }

   .cdm-universal-tab-surface__panel-stage {
     min-height: clamp(320px, 34vw, 560px);
   }

   .cdm-universal-tab-surface__panel {
     display: none;
     gap: clamp(20px, 2.4vw, 38px);
   }

   .cdm-universal-tab-surface__panel.is-current {
     display: grid;
     animation: cdmUniversalTabPanelReveal 0.58s cubic-bezier(0.22, 1, 0.36, 1);
   }

   /* 크리에이터/스튜디오 공통 카드 시스템 */
   .cdm-universal-tab-surface__feature-card-stage {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: clamp(8px, 0.875vw + 5.200px, 22px);
     align-items: stretch;
     counter-reset: cdmSurfaceFeatureCard;
   }

   /* ===== [피처 카드 그리드] cdm-tab-feature-grid ===== */
   .cdm-tab-feature-grid {

     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: clamp(8px, 0.875vw + 5.200px, 22px);
     counter-reset: cdmSurfaceFeatureCard;
   }

   .cdm-universal-tab-surface__feature-card-grid--list {
     margin: 0;
     padding: 0;
     list-style: none;
     display: contents;
   }

   .cdm-tab-feature-card,
   .cdm-universal-tab-surface__feature-card-grid--list>li {
     position: relative;
     isolation: isolate;
     min-height: clamp(250px, 19.5vw, 354px);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     gap: clamp(10px, 0.375vw + 8.800px, 16px);

     border: 1px solid rgba(255, 255, 255, 0.16);
     padding: clamp(16px, 1.125vw + 12.400px, 34px);
     background: rgba(7, 8, 11, 0.94);
     overflow: hidden;
     counter-increment: cdmSurfaceFeatureCard;
     transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
       border-color 0.42s ease,
       background 0.42s ease;
   }

   .cdm-tab-feature-card::before,
   .cdm-universal-tab-surface__feature-card-grid--list>li::before {
     content: counter(cdmSurfaceFeatureCard, decimal-leading-zero);
     position: absolute;
     top: clamp(16px, 1.3vw, 24px);
     right: clamp(18px, 1.5vw, 26px);
     font-size: clamp(72px, 6vw, 126px);
     line-height: 0.86;
     font-weight: 900;
     letter-spacing: -0.05em;
     color: rgba(255, 255, 255, 0.08);
     pointer-events: none;
   }

   .cdm-tab-feature-card:hover,
   .cdm-universal-tab-surface__feature-card-grid--list>li:hover,
   .cdm-tab-feature-card:focus-within,
   .cdm-universal-tab-surface__feature-card-grid--list>li:focus-within {
     transform: translate3d(0, -8px, 0);
     border-color: rgba(255, 255, 255, 0);
     background: #e6e6e7;
   }

   .cdm-tab-feature-card:hover::before,
   .cdm-universal-tab-surface__feature-card-grid--list>li:hover::before,
   .cdm-tab-feature-card:focus-within::before,
   .cdm-universal-tab-surface__feature-card-grid--list>li:focus-within::before {
     color: rgba(7, 8, 11, 0.1);
   }

   .cdm-fc-title {
     margin: 0;
     max-width: 90%;
     font-size: clamp(16px, 0.875vw + 13.200px, 30px);
     line-height: 1.18;
     letter-spacing: -0.034em;
     font-weight: 600;
     color: var(--white);
     word-break: keep-all;
     overflow-wrap: anywhere;
     position: relative;
     z-index: 1;
     transition: font-size 0.46s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .cdm-fc-desc {
     margin: 0;
     max-width: 88%;
     font-size: clamp(15px, 0.35vw + 13.6px, 21px);
     line-height: 1.5;
     letter-spacing: -0.016em;
     font-weight: 500;
     color: var(--gray-800);
     word-break: keep-all;
     position: relative;
     z-index: 1;
   }


   .cdm-tab-feature-card:hover .cdm-fc-title,
   .cdm-tab-feature-card:focus-within .cdm-fc-title {
     color: var(--black);
     font-size: clamp(22px, 0.813vw + 19.400px, 35px);
     font-weight: 800;
   }


   .cdm-universal-tab-surface__feature-card-grid--list>li:hover,
   .cdm-universal-tab-surface__feature-card-grid--list>li:focus-within {
     color: #050608;

   }

   .cdm-universal-tab-surface__feature-card-grid--list>li {

     font-size: clamp(20px, 1.05vw, 30px);
     line-height: 1.18;
     letter-spacing: -0.034em;
     font-weight: 800;
     color: var(--white);
     word-break: keep-all;
     transition: font-size 0.46s cubic-bezier(0.22, 1, 0.36, 1),
       color 0.34s ease;
   }

   .cdm-universal-tab-surface__feature-card-grid--list>li::after {
     content: attr(data-card-summary);
     display: block;
     max-height: 0;
     opacity: 0;
     transform: translate3d(0, 10px, 0);
     overflow: hidden;
     font-size: clamp(13px, 0.28vw + 12px, 16px);
     line-height: 1.5;
     letter-spacing: -0.016em;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.82);
     transition: max-height 0.44s ease, opacity 0.34s ease, transform 0.44s ease, color 0.34s ease;
   }

   .cdm-universal-tab-surface__feature-card-grid--list>li:hover::after,
   .cdm-universal-tab-surface__feature-card-grid--list>li:focus-within::after {
     max-height: 5.8em;
     opacity: 1;
     transform: translate3d(0, 0, 0);
     color: #050608;
   }

   .cdm-universal-tab-surface__media-strip {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: clamp(12px, 1.5vw, 24px);
   }

   .cdm-universal-tab-surface__media-placeholder {
     display: block;
     height: clamp(130px, 12.5vw, 190px);
     background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)) #c3c5c9;
   }

   .cdm-universal-tab-surface__panel-copy {
     display: flex;
     flex-direction: column;
     gap: 16px;

     .cdm-universal-tab-surface__panel-title {
       margin: 0;
       font-size: clamp(42px, 2.9vw, 62px);
       line-height: 1.06;
       letter-spacing: -0.035em;
       color: var(--white);
     }

     .cdm-tab-desc {
       margin: 0;
       max-width: 920px;
       font-size: clamp(16px, 0.75vw + 13px, 22px);
       line-height: 1.45;
       letter-spacing: -0.014em;
       word-break: keep-all;
     }
   }

   .cdm-universal-tab-surface__panel-copy.cdm-universal-tab-surface__feature-card-stage {
     display: grid;
     gap: clamp(8px, 0.875vw + 5.200px, 22px);
   }

   .cdm-universal-tab-surface__bullet-list {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 16px;
     font-size: clamp(30px, 1.85vw, 48px);
     line-height: 1.2;
     letter-spacing: -0.028em;
     color: var(--white);
   }

   .cdm-universal-tab-surface__bullet-list>li {
     position: relative;
     padding-left: 0.8em;
     word-break: keep-all;
   }

   .cdm-universal-tab-surface__bullet-list>li::before {
     content: "•";
     position: absolute;
     left: 0;
     top: 0.03em;
     color: rgba(255, 255, 255, 0.86);
   }

   .cdm-universal-tab-surface__bullet-list--ordered {
     counter-reset: cdmTabStep;
   }

   .cdm-universal-tab-surface__bullet-list--ordered>li {
     counter-increment: cdmTabStep;
     padding-left: 1.06em;
   }

   .cdm-universal-tab-surface__bullet-list--ordered>li::before {
     content: counter(cdmTabStep) ".";
   }

   .cdm-universal-tab-surface__bullet-list.cdm-universal-tab-surface__feature-card-grid--list {
     display: contents;
     gap: 0;
     font-size: inherit;
   }


   .cdm-universal-tab-surface__feature-card-grid--list>li::before {
     content: counter(cdmSurfaceFeatureCard, decimal-leading-zero);
     top: clamp(16px, 1.3vw, 24px);
     left: auto;
     right: clamp(18px, 1.5vw, 26px);
     color: rgba(255, 255, 255, 0.08);
   }

   .cdm-universal-tab-surface__bullet-list--ordered.cdm-universal-tab-surface__feature-card-grid--list>li::before {
     content: none !important;
   }

   .cdm-universal-tab-surface__process-card-order {
     position: absolute;
     top: clamp(16px, 1.3vw, 24px);
     right: clamp(18px, 1.5vw, 26px);
     font-size: clamp(72px, 6vw, 126px);
     line-height: 0.86;
     font-weight: 900;
     letter-spacing: -0.05em;
     color: rgba(255, 255, 255, 0.08);
     pointer-events: none;
   }

   .cdm-universal-tab-surface__process-card-label {
     position: relative;
     z-index: 1;
     display: block;
     font-size: inherit;
     line-height: inherit;
     letter-spacing: inherit;
     font-weight: inherit;
   }

   .cdm-universal-tab-surface__bullet-list--ordered.cdm-universal-tab-surface__feature-card-grid--list>li:hover .cdm-universal-tab-surface__process-card-order,
   .cdm-universal-tab-surface__bullet-list--ordered.cdm-universal-tab-surface__feature-card-grid--list>li:focus-within .cdm-universal-tab-surface__process-card-order {
     color: rgba(7, 8, 11, 0.12);
   }
 }

 @media all and (max-width: 768px) {
   .cdm-universal-tab-surface {
     .cdm-fc-title {}
   }
 }

 @media all and (max-width: 1024px) {
   .cdm-universal-tab-surface {

     .cdm-universal-tab-surface__tab-rail {
       flex-direction: column;
       flex-wrap: nowrap;
     }
   }
 }

 @media all and (max-width: 768px) {
   .cdm-universal-tab-surface {

     .cdm-universal-tab-surface__tab-rail {
       flex-direction: row;
       flex-wrap: nowrap;
       overflow-x: auto;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       overscroll-behavior-x: contain;
       touch-action: pan-x;
       scrollbar-width: none;
       padding: 0 16px;

       &::-webkit-scrollbar {
         display: none;
         height: 0;
       }

       >.cdm-universal-tab-surface__tab-button {
         flex: 0 0 auto;
         white-space: nowrap;
       }
     }
   }
 }



 .cdm-universal-tab-surface__tab-button {
   color: rgba(255, 255, 255, 0.32);
   font-weight: 700;
   letter-spacing: -0.048em;
   line-height: 1;

   &::after {
     display: none;
   }
 }

 .cdm-universal-tab-surface__tab-button-label {
   position: relative;
   display: inline-block;
   line-height: 1.2;

   &::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -12px;
     width: 100%;
     height: 4px;
     background: var(--white);
     opacity: 0;
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform 1.08s cubic-bezier(0.22, 1, 0.36, 1),
       opacity 1.08s cubic-bezier(0.22, 1, 0.36, 1);
   }
 }

 .cdm-universal-tab-surface__tab-button.is-current {
   .cdm-universal-tab-surface__tab-button-label {
     font-weight: 800;

     &::after {
       opacity: 1;
       transform: scaleX(1);
     }
   }
 }

 .cdm-universal-tab-surface__panel {
   gap: 0;
 }


 .cdm-universal-tab-surface--creator {

   .cdm-universal-tab-surface__media-placeholder {
     background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)) #c6c7ca;
   }

   .cdm-universal-tab-surface__panel-stage {
     min-height: clamp(320px, 28vw, 480px);
   }

   .cdm-universal-tab-surface__creator-card-grid {
     gap: clamp(14px, 1.5vw, 22px);
   }

   .cdm-tab-feature-card {
     padding-right: clamp(10px, 6.875vw + -12.000px, 120px);
   }

   .cdm-universal-tab-surface__creator-card-visual {
     display: none;
   }

   .cdm-universal-tab-surface__creator-card-headline {
     margin: 0;
     max-width: 92%;
   }

 }

 .cdm-universal-tab-surface--creator {
   .cdm-tab-feature-card .cdm-fc-desc.cdm-fc-desc--hover {
     max-height: 0;
     opacity: 0;
     transform: translate3d(0, 10px, 0);
     overflow: hidden;
     transition: max-height 0.44s ease, opacity 0.34s ease, transform 0.44s ease;
   }

   .cdm-tab-feature-card:hover .cdm-fc-desc.cdm-fc-desc--hover,
   .cdm-tab-feature-card:focus-within .cdm-fc-desc.cdm-fc-desc--hover {
     max-height: 5.8em;
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }

 .cdm-universal-tab-surface--studio {


   /* 스튜디오 카드 제목 크기 통일: 1번 카드와 리스트 카드 동일 적용 */
   .cdm-fc-title,
   .cdm-universal-tab-surface__feature-card-grid--list>li {
     font-size: clamp(20px, 1.05vw, 30px);
     line-height: 1.18;
     letter-spacing: -0.034em;
     font-weight: 800;
   }

   .cdm-tab-feature-card:hover .cdm-fc-title,
   .cdm-tab-feature-card:focus-within .cdm-fc-title,
   .cdm-universal-tab-surface__feature-card-grid--list>li:hover,
   .cdm-universal-tab-surface__feature-card-grid--list>li:focus-within {
     font-size: clamp(24px, 1.35vw, 40px);
     line-height: 1.18;
     letter-spacing: -0.034em;
     font-weight: 800;
   }

   .cdm-fc-title--intro {
     max-width: 94%;
     font-size: inherit;
   }

   .cdm-fc-desc {
     max-width: 74%;
   }

   /* 스튜디오 설명 텍스트 크기 통일: 좌측 p 설명 + 우측 카드 hover 설명 */
   .cdm-fc-desc,
   .cdm-universal-tab-surface__feature-card-grid--list>li::after {
     font-size: clamp(15px, 0.35vw + 13.6px, 21px);
     line-height: 1.5;
     letter-spacing: -0.016em;
     font-weight: 500;
   }
 }

 .cdm-universal-tab-surface--studio .cdm-universal-tab-surface__media-strip {
   display: none;
 }

 @keyframes cdmUniversalTabPanelReveal {
   from {
     opacity: 0;
     transform: translate3d(34px, 0, 0);
   }

   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }

 @media all and (max-width: 1024px) {
   .cdm-universal-tab-surface {



     .cdm-universal-tab-surface__tab-button {
       width: 100%;
       font-weight: 600;
     }

     .cdm-universal-tab-surface__panel-stage {
       min-height: 0;
     }

     .cdm-universal-tab-surface__panel-title {
       font-size: clamp(18px, 0.875vw + 15.200px, 32px);
     }

     .cdm-universal-tab-surface__bullet-list {
       font-size: clamp(16px, 0.750vw + 13.600px, 28px);
       gap: 10px;
     }

     .cdm-universal-tab-surface__media-strip {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }


     .cdm-universal-tab-surface__feature-card-stage,
     .cdm-tab-feature-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .cdm-tab-feature-card,
     .cdm-universal-tab-surface__feature-card-grid--list>li {
       min-height: clamp(220px, 28vw, 320px);
     }
   }

   .cdm-universal-tab-surface--creator {
     .cdm-universal-tab-surface__creator-card-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .cdm-universal-tab-surface__creator-card-headline {
       font-size: clamp(24px, 2.2vw, 32px);
     }
   }
 }

 @media all and (max-width: 768px) {
   .cdm-universal-tab-surface {

     .cdm-universal-tab-surface__layout {
       grid-template-columns: 1fr;
     }

     .cdm-universal-tab-surface__panel-stage {
       padding: 0 16px;
     }

     .cdm-universal-tab-surface__tab-button {
       width: auto;
     }

     .cdm-universal-tab-surface__tab-button-label {
       &::after {
         bottom: -8px;
       }
     }

     .cdm-universal-tab-surface__panel-copy {
       gap: 12px;
     }

     .cdm-tab-desc {
       font-size: 15px;
       line-height: 1.5;
     }


     /* .cdm-tab-feature-card,
     .cdm-universal-tab-surface__feature-card-grid--list>li {
       min-height: clamp(176px, 50vw, 250px);
       padding: 20px;
     } */

     .cdm-tab-feature-card::before,
     .cdm-universal-tab-surface__feature-card-grid--list>li::before {
       font-size: clamp(54px, 14vw, 84px);
     }

     .cdm-universal-tab-surface__process-card-order {
       font-size: clamp(54px, 14vw, 84px);
     }



     .cdm-fc-desc {
       max-width: 100%;
       font-size: 14px;
       line-height: 1.2;
     }

     .cdm-universal-tab-surface__media-strip {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .cdm-universal-tab-surface__media-placeholder:last-child {
       grid-column: span 2;
     }
   }

   .cdm-universal-tab-surface--creator {
     .cdm-universal-tab-surface__creator-card-grid {
       grid-template-columns: 1fr;
     }

     .cdm-universal-tab-surface__creator-card-headline {
       font-size: clamp(22px, 6.4vw, 30px);
     }
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .cdm-universal-tab-surface {

     .cdm-universal-tab-surface__tab-button,
     .cdm-universal-tab-surface__tab-button::after,
     .cdm-universal-tab-surface__tab-button-label::after,
     .cdm-universal-tab-surface__panel {
       transition: none;
       animation: none;
     }
   }
 }

 /* ===== 서브페이지 배경 루프워드 시작: cdm-subpage-loopword-host ===== */
 .cdm-subpage-loopword-host {
   position: relative;
   isolation: isolate;

   .cdm-subpage-loopword-backdrop {
     position: absolute;
     inset: 0;
     z-index: 0;
     display: block;
     overflow: hidden;
     pointer-events: none;
     mask-image: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0.9) 88%, transparent 100%);
     -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0.9) 88%, transparent 100%);
   }

   .cdm-subpage-loopword-backdrop__lane {
     position: absolute;
     left: 0;
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     line-height: 1;
   }

   .cdm-subpage-loopword-backdrop__lane--forward {
     top: 40%;
     transform: translateY(-50%);
   }

   .cdm-subpage-loopword-backdrop__lane--backward {
     bottom: clamp(1px, 5.063vw + -15.200px, 82px);
   }

   .cdm-subpage-loopword-backdrop__track {
     display: flex;
     width: max-content;
     min-width: 200%;
   }

   .cdm-subpage-loopword-backdrop__segment {
     flex: 0 0 auto;
     padding-right: clamp(28px, 2.5vw, 54px);
     color: rgba(255, 255, 255, 0.07);
     font-size: clamp(75px, 6.563vw + 54.000px, 180px);
     font-weight: 900;
     letter-spacing: 0.015em;
     text-transform: uppercase;
     user-select: none;
   }

   .cdm-subpage-loopword-backdrop__lane--forward .cdm-subpage-loopword-backdrop__track {
     animation: cdmSubpageLoopwordLaneForward 600s linear infinite;
   }

   .cdm-subpage-loopword-backdrop__lane--backward .cdm-subpage-loopword-backdrop__track {
     animation: cdmSubpageLoopwordLaneBackward 700s linear infinite;
   }

   >*:not(.cdm-subpage-loopword-backdrop) {
     position: relative;
     z-index: 1;
   }
 }

 @media all and (max-width: 768px) {

   .cdm-subpage-loopword-host {

     .cdm-subpage-loopword-backdrop__lane--forward {
       top: 30%;
     }
   }
 }


 @keyframes cdmSubpageLoopwordLaneForward {
   from {
     transform: translate3d(-50%, 0, 0);
   }

   to {
     transform: translate3d(0, 0, 0);
   }
 }

 @keyframes cdmSubpageLoopwordLaneBackward {
   from {
     transform: translate3d(0, 0, 0);
   }

   to {
     transform: translate3d(-50%, 0, 0);
   }
 }



 @media (prefers-reduced-motion: reduce) {
   .cdm-subpage-loopword-host {

     .cdm-subpage-loopword-backdrop__lane--forward .cdm-subpage-loopword-backdrop__track,
     .cdm-subpage-loopword-backdrop__lane--backward .cdm-subpage-loopword-backdrop__track {
       animation-duration: 360s;
     }
   }
 }

 /* ===== 서브페이지 배경 루프워드 끝: cdm-subpage-loopword-host ===== */

 /*** 스튜디오 ******************************/

 .section-studio {
   /* background: var(--white); */
 }

 .studio-layout {
   display: flex;
   gap: 25px;
 }

 .studio-visual {
   position: relative;
   flex: 1;
   min-height: 600px;

   overflow: hidden;


   .studio-visual-slider {
     position: absolute;
     height: 100%;
     overflow: hidden;
   }

   .studio-visual-track {
     display: flex;
     height: 100%;
     will-change: transform;
     transition: transform 0.7s ease;
   }

   .studio-visual-item {
     position: relative;
     flex: 0 0 100%;
     width: 100%;
     min-width: 100%;
     height: 100%;
     overflow: hidden;

     &::after {
       content: "";
       position: absolute;
       inset: 0;
       background:
         linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
     }

     img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       transform: scale(1.04);
     }
   }

   .sv-visual-screen {
     position: absolute;
     inset: 17px;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 24px;
     background:
       linear-gradient(180deg, rgba(7, 10, 18, 0.04) 0%, rgba(7, 10, 18, 0.22) 35%, rgba(7, 10, 18, 0.84) 100%),
       radial-gradient(circle at top right, rgba(111, 92, 255, 0.18), transparent 30%);
     color: var(--white);
     pointer-events: none;

     .sv--badge {
       display: inline-flex;
       align-self: flex-start;
       margin-bottom: 14px;
       padding: 6px 10px;
       border-radius: 999px;
       background: rgba(255, 255, 255, 0.12);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.12em;
       color: var(--white);
     }

     .sv--title {
       font-size: 24px;
       line-height: 1.25;
       font-weight: 800;
       color: var(--white);
     }

     .sv--text {
       margin-top: 6px;
       font-size: 15px;
       color: var(--gray-300);
       line-height: 1.3;
     }
   }
 }



 @media (max-width: 767px) {
   .studio-layout {
     flex-direction: column;
   }

   .studio-visual {
     min-height: 420px;


     .studio-visual-slider {}

     .sv-visual-screen {
       inset: 10px;
       padding: 10px;

       .sv--title {
         font-size: 20px;
       }

       .sv--text {
         display: block;
         font-size: 14px;
         width: 150px;

       }
     }
   }
 }

 .studio-visual-slider {
   position: relative;
   overflow: hidden;
   touch-action: pan-y;
   cursor: grab;

   &.is-dragging {
     cursor: grabbing;
   }

   .studio-visual-count {
     position: absolute;
     right: 20px;
     bottom: 20px;
     z-index: 5;
     display: inline-flex;
     align-items: center;
     gap: 2px;
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.45);
     color: var(--gray-400);
     font-size: 12px;
     line-height: 1;
     backdrop-filter: blur(8px);

     .current,
     .total {

       text-align: center;
     }
   }
 }

 .studio-visual-track {
   display: flex;
   will-change: transform;
 }





 /*** 웹사이트 제작 ******************************/


 /* 솔루션 개발 카드 정렬 그리드 */
 .section-dev {
   .soldev-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: clamp(28px, 3vw, 56px);
     row-gap: clamp(46px, 4.5vw, 86px);
   }

   .soldev-card {
     position: relative;
     opacity: 0;
     transform: translate3d(0, 56px, 0);
     transition: opacity 0.86s cubic-bezier(0.22, 1, 0.36, 1),
       transform 0.96s cubic-bezier(0.22, 1, 0.36, 1);

     &.is-visible {
       opacity: 1;
       transform: translate3d(0, 0, 0);
     }

     &:nth-child(even) {
       margin-top: clamp(58px, 5.4vw, 108px);
     }

     &:nth-child(2) {
       transition-delay: 0.06s;
     }

     &:nth-child(3) {
       transition-delay: 0.1s;
     }

     &:nth-child(4) {
       transition-delay: 0.14s;
     }

     &:nth-child(5) {
       transition-delay: 0.18s;
     }

     &:nth-child(6) {
       transition-delay: 0.22s;
     }

     .soldev-card__frame {
       display: flex;
       flex-direction: column;
       gap: clamp(10px, 0.62vw + 8px, 18px);
     }

     .soldev-card__media {
       position: relative;
       overflow: hidden;
       background: #cfcfcf;
       aspect-ratio: 4 / 3;
     }

     .soldev-card__thumb {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
       transform: scale(1);
       transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
     }

     .soldev-card__copy {
       max-width: 92%;
       opacity: 0;
       transform: translate3d(0, 16px, 0);
       transition: opacity 0.66s cubic-bezier(0.22, 1, 0.36, 1),
         transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
     }

     &.is-visible .soldev-card__copy {
       opacity: 1;
       transform: translate3d(0, 0, 0);
       transition-delay: 0.12s;
     }

     .soldev-card__title {
       color: var(--white);
       font-size: clamp(18px, 2.313vw + 10.600px, 55px);
       font-weight: 800;
       line-height: 1.08;
       letter-spacing: -0.04em;
       word-break: keep-all;
     }

     .soldev-card__desc {
       margin: clamp(6px, 0.4vw + 4px, 12px) 0 0;
       max-width: 34ch;
       color: var(--gray-300);
       font-size: clamp(15px, 0.625vw + 13.000px, 25px);
       line-height: 1.2;
       letter-spacing: -0.016em;
       word-break: keep-all;
     }

     &:hover,
     &:focus-within {
       .soldev-card__thumb {
         transform: scale(1.03);
       }
     }
   }
 }



 @media all and (max-width: 768px) {
   .section-dev {
     .soldev-grid {
       padding: 0 16px;
       gap: 26px 10px;
     }

     .soldev-card {
       transform: translate3d(0, 34px, 0);

       .soldev-card__media {
         order: 1;
       }

       .soldev-card__copy {
         order: 2;
       }

       &:nth-child(even) {
         margin-top: 0;
       }

       &:nth-child(2),
       &:nth-child(3),
       &:nth-child(4),
       &:nth-child(5),
       &:nth-child(6) {
         transition-delay: 0s;
       }

       .soldev-card__copy {
         max-width: 100%;
       }




     }
   }
 }

 /* 접근성: 모션 최소화 */
 @media (prefers-reduced-motion: reduce) {
   .section-dev {
     .soldev-card {
       opacity: 1;
       transform: none;
       transition: none;

       .soldev-card__thumb,
       .soldev-card__copy,
       .soldev-card__title,
       .soldev-card__desc {
         transition: none;
       }

       .soldev-card__copy {
         opacity: 1;
         transform: none;
       }
     }
   }
 }


 .consulting-grid {
   display: grid;
   gap: clamp(24px, 1.313vw + 19.800px, 45px);
   grid-template-columns: repeat(2, 1fr);
   /* border: 1px solid black; */
 }

 .consulting-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) clamp(120px, 5.000vw + 104.000px, 200px);
   gap: clamp(14px, 0.375vw + 12.800px, 20px) clamp(16px, 0.500vw + 14.400px, 24px);
   align-items: start;

   transform: translateY(18px);
   transition: opacity var(--transition), transform var(--transition);

   &.is-visible {
     opacity: 1;
     transform: translateY(0);
   }

   .consulting-card-image-wrap {
     overflow: hidden;
     background: #d9d9d9;
   }

   .consulting-card-image {
     width: 100%;
     aspect-ratio: 16 / 12;
     object-fit: cover;
     /* filter: grayscale(100%) contrast(1.02) brightness(0.82);
     transition: transform var(--transition), filter var(--transition); */
   }

   &:hover .consulting-card-image,
   &:focus-within .consulting-card-image {
     transform: scale(1.04);
     filter: grayscale(100%) contrast(1.04) brightness(0.9);
   }

   .consulting-card-content {
     min-height: 1px;

     .consulting-card-title {
       border-bottom: 3px solid var(--white);
       font-size: clamp(16px, 0.875vw + 13.200px, 30px);
       font-weight: 600;
       letter-spacing: -1px;
       line-height: 1.2;
       padding: 0 0 clamp(12px, 0.250vw + 11.200px, 16px);
     }
   }

   .consulting-card-list {
     margin-top: clamp(16px, 0.375vw + 14.800px, 22px);

     li {
       position: relative;
       padding-left: clamp(12px, 0.125vw + 11.600px, 14px);
       font-size: clamp(15px, 0.188vw + 14.400px, 18px);
       line-height: 1.9;
       color: var(--gray-300);

       &::before {
         content: "-";
         position: absolute;
         top: 0;
         left: 0;
       }
     }
   }
 }

 .consulting-grid.column {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 50px 20px;

   .consulting-card {
     display: flex;
     flex-direction: column;
   }

   .consulting-card-title {
     border-bottom: 3px solid var(--white);
     color: var(--white);
     font-size: clamp(15px, 0.188vw + 14.400px, 18px);
     padding: 0 0 clamp(6px, 0.125vw + 5.600px, 8px);
   }
 }

 @media all and (max-width: 768px) {
   .consulting-grid {
     /* grid-template-columns: 1fr; */
     gap: 10px;
   }

   .consulting-card {
     display: flex;
     flex-direction: column;
     gap: 10px;

     .consulting-card-image-wrap {
       width: 100%;
     }

     .consulting-card-image {
       width: 100%;
       aspect-ratio: 16 / 12;
     }

     .consulting-card-content {
       .consulting-card-title {

         padding: 0;
         border: 0;
       }
     }

     .consulting-card-list {
       margin-top: 6px;

       li {
         font-size: 14px;
         line-height: 1.4;
       }
     }
   }

   .consulting-grid.column {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 18px 10px;


     .consulting-card-title {
       font-size: 15px;
       padding: 0 0 6px;
     }
   }
 }





 /* 모션 최소화 */
 @media (prefers-reduced-motion: reduce) {


   .consulting-card,
   .consulting-card .consulting-card-image {
     transition: none;
   }

   .consulting-card {
     opacity: 1;
     transform: none;
   }
 }




 /***** 영상제작 ***************/



 /* 모자이크 섹션 */
 .mosaic-section {
   position: relative;
   padding: 24px 0;

   .mosaic-inner {
     width: 100%;
   }

   .mosaic-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
     grid-template-rows: repeat(2, minmax(260px, 1fr));
     gap: 16px;
   }

   .mosaic-card {
     position: relative;
     overflow: hidden;
     min-height: 260px;
     background: #111;
     isolation: isolate;


     &.mosaic-card-large {
       grid-column: 1 / 2;
       grid-row: 1 / 3;
       min-height: 600px;
     }

     &.mosaic-card-top {
       grid-column: 2 / 3;
       grid-row: 1 / 2;
     }

     &.mosaic-card-bottom {
       grid-column: 2 / 3;
       grid-row: 2 / 3;
     }
   }

   .mosaic-card-label {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 5;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     padding: 0 12px;
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.55);
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     line-height: 1;
     backdrop-filter: blur(8px);
     pointer-events: none;

     &:empty {
       display: none;
     }
   }

   .mosaic-card-media-stack {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
   }

   .mosaic-card-layer {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 0.7s ease;

     &.is-active {
       z-index: 1;
       opacity: 1;
     }

     &.is-enter {
       z-index: 2;
     }
   }

   .mosaic-card-media,
   .mosaic-card-youtube {
     position: absolute;
     inset: 0;
     display: block;
     width: 100%;
     height: 100%;
     border: 0;
   }

   .mosaic-card-media {
     object-fit: cover;
   }

   video.mosaic-card-media,
   img.mosaic-card-media {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .mosaic-card-youtube {
     overflow: hidden;
     text-decoration: none;
     background: #111;
     color: #fff;

     &::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(180deg,
           rgba(0, 0, 0, 0.12) 0%,
           rgba(0, 0, 0, 0.2) 50%,
           rgba(0, 0, 0, 0.36) 100%);
       transition: opacity 0.3s ease;
       pointer-events: none;
     }

     &:hover {
       .mosaic-card-youtube-thumb {
         transform: scale(1.16);
       }

       &::after {
         opacity: 0.88;
       }

       .mosaic-card-cta {
         transform: translate(-50%, -50%) scale(1.06);
         background: rgba(255, 255, 255, 0.98);
         box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
       }
     }
   }

   .mosaic-card-youtube-thumb {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: center;
     transform: scale(1.3);
     /**/
     transition: transform 0.45s ease;
   }

   .mosaic-card-cta {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 3;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 20px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.92);
     color: #111;
     font-size: 14px;
     font-weight: 700;
     line-height: 1;
     letter-spacing: -0.02em;
     white-space: nowrap;
     box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
     transform: translate(-50%, -50%);
     transition:
       transform 0.3s ease,
       background 0.3s ease,
       box-shadow 0.3s ease;
     pointer-events: none;

     .mosaic-card-play-icon {
       display: block;
       width: 0;
       height: 0;
       margin-left: 2px;
       border-top: 9px solid transparent;
       border-bottom: 9px solid transparent;
       border-left: 14px solid #111;
     }

     .mosaic-card-cta-text {
       display: block;
     }
   }

   .mosaic-card-link-badge {
     position: absolute;
     right: 16px;
     bottom: 16px;
     z-index: 3;
     display: inline-flex;
     align-items: center;
     min-height: 34px;
     padding: 0 12px;
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.56);
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: -0.02em;
     backdrop-filter: blur(8px);
     pointer-events: none;
   }
 }

 @media (max-width: 767px) {
   .mosaic-section {
     padding: 0;

     .mosaic-inner {
       padding: 0;
     }

     .mosaic-grid {
       grid-template-columns: 1fr;
       grid-template-rows: none;
       gap: 0;
     }

     .mosaic-card {
       grid-column: auto;
       grid-row: auto;
       min-height: 220px;

       &.mosaic-card-large {
         min-height: 320px;
       }

       &.mosaic-card-top,
       &.mosaic-card-bottom {
         min-height: 220px;
       }
     }

     .mosaic-card-cta {
       gap: 8px;
       padding: 12px 16px;
       font-size: 13px;

       .mosaic-card-play-icon {
         border-top-width: 8px;
         border-bottom-width: 8px;
         border-left-width: 13px;
       }
     }

     .mosaic-card-link-badge {
       right: 12px;
       bottom: 12px;
       font-size: 11px;
     }
   }
 }


 /***** 마케팅 *******************/


 .marketing-list {
   .mk-list--inner {
     max-width: 1120px;
     margin: 0 auto;
   }
 }

 .mk-content-card-item {
   .mk-card__content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     padding: 36px 24px;
   }

   .marketing-card-inner-title {
     display: flex;
     flex-direction: column;
     gap: 10px;

     min-width: 0;
     text-align: center;

     .mk-title {
       font-size: 22px;
       font-weight: 600;

     }

     .mk-desc {
       color: var(--gray-300);
       font-size: clamp(14px, 0.063vw + 13.800px, 15px);
       line-height: 1.2;
       letter-spacing: -0.03em;
     }
   }

   .marketing-card__spark {
     color: var(--primary);
     font-size: 24px;
     line-height: 1;
   }
 }

 .marketing-card+.mk-card-item {
   margin-top: 20px;
 }

 .marketing-card--accent {
   border: 1px solid var(--line-soft);
   background: var(--primary-soft);
 }

 @media all and (max-width: 768px) {
   .section-marketing {
     padding: 0 16px;
   }

   .marketing-list {
     padding: 0;
   }

   .mk-content-card-item {
     .mk-card__content {
       gap: 8px;
       padding: 30px 0;
     }
   }
 }



 /**SNS**/
 .icondb {
   border-radius: 2px;
   width: 30px;
   height: 30px;
   display: block;
 }

 .ico-instagram {
   background: url("../images/sns-instagram.png") no-repeat;
   background-size: 100%;
 }

 .ico-naver {
   background: url("../images/sns-naver.png") no-repeat;
   background-size: 100%;
 }

 .ico-youtube {
   background: url("../images/sns-youtube.png") no-repeat;
   background-size: 100%;
 }

 .ico-tiktok {
   background: url("../images/sns-tiktok.png") no-repeat;
   background-size: 100%;
 }


 .ico-kakao {
   background: url("../images/sns-kakao.png") no-repeat;
   background-size: 100%
 }

 .ico-facebook {
   background: url("../images/sns-facebook.png") no-repeat;
   background-size: 100%
 }

 .ico-naverLive {
   background: url("../images/sns-naverLive.png") no-repeat;
   background-size: 100%
 }

 /**/

 .first-card__chips {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 4px;

   .chip {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     isolation: isolate;
     font-weight: 700;
     background: var(--white);
     color: var(--black);
     min-height: clamp(22px, 3.125vw + 12px, 72px);
     font-size: clamp(22px, 3.125vw + 12px, 72px);
     padding: 5px clamp(6px, 1.25vw + 2px, 26px);
     border: 1px solid var(--white);
     transition: transform 0.45s ease;
     animation: chip-text-flow 6.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;

     &::before {
       content: "";
       position: absolute;
       inset: 0;
       z-index: -1;
       background: var(--black);
       transform: scaleX(0);
       transform-origin: left center;
       animation: chip-bg-flow 6.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
     }
   }

   .chip:nth-child(1) {
     animation-delay: 0s;

     &::before {
       animation-delay: 0s;
     }
   }

   .chip:nth-child(2) {
     animation-delay: 0.28s;

     &::before {
       animation-delay: 0.28s;
     }
   }

   .chip:nth-child(3) {
     animation-delay: 0.56s;

     &::before {
       animation-delay: 0.56s;
     }
   }

   .chip:nth-child(4) {
     animation-delay: 0.84s;

     &::before {
       animation-delay: 0.84s;
     }
   }
 }

 @keyframes chip-bg-flow {
   0% {
     transform: scaleX(0);
     transform-origin: left center;
   }

   18% {
     transform: scaleX(0);
     transform-origin: left center;
   }

   42% {
     transform: scaleX(1);
     transform-origin: left center;
   }

   58% {
     transform: scaleX(1);
     transform-origin: left center;
   }

   82% {
     transform: scaleX(0);
     transform-origin: right center;
   }

   100% {
     transform: scaleX(0);
     transform-origin: right center;
   }
 }

 @keyframes chip-text-flow {
   0% {
     color: var(--black);
     transform: translateY(0);
     border-color: var(--white);
   }

   18% {
     color: var(--black);
     transform: translateY(0);
     border-color: var(--white);
   }

   42% {
     color: var(--white);
     transform: translateY(-1px);
     border-color: var(--white);
   }

   58% {
     color: var(--white);
     transform: translateY(-1px);
     border-color: var(--white);
   }

   82% {
     color: var(--black);
     transform: translateY(0);
     border-color: var(--white);
   }

   100% {
     color: var(--black);
     transform: translateY(0);
     border-color: var(--white);
   }
 }

 /*일반 칩*/
 .infobox-card__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;

   .chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     min-height: clamp(48px, 0.625vw + 46.000px, 58px);
     padding: 0 clamp(14px, 0.750vw + 11.600px, 26px);

     font-size: 16px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: -0.03em;
     white-space: nowrap;
     border: 1px solid var(--gray-700);
     color: var(--gray-300);

     svg {
       width: 20px;
       height: 20px;
       flex: 0 0 auto;
     }
   }

   &.point .chip {
     border: 1px solid var(--white);
     color: var(--white);
     background: transparent;
   }

 }

 @media all and (max-width: 768px) {
   .infobox-card__chips {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     justify-content: center;

   }
 }



 /****** 라이브 커머스 ****************/


 .live-platform {
   display: flex;
   justify-content: center;
   margin: 0 auto 30px;


   &>li {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 12px;
     border-top: 1px solid var(--white);
     border-bottom: 1px solid var(--white);
     width: 250px;
     padding: 20px 0 24px;
     font-size: clamp(13px, 0.188vw + 12.400px, 16px);

     .icondb {
       border-radius: 16px;
       width: clamp(42px, 2.375vw + 34.400px, 80px);
       height: clamp(42px, 2.375vw + 34.400px, 80px);
     }
   }
 }


 .livecom__frame {
   position: relative;
   max-width: 520px;
   margin: 50px auto 50px;
   padding: 0 54px;


   .livecom__arrow {
     position: absolute;
     top: 50%;
     z-index: 10;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     border: 1px solid var(--arrow-line);
     border-radius: 999px;
     background: var(--arrow-bg);
     color: #fff;
     backdrop-filter: blur(12px);
     transform: translateY(-50%);
     cursor: pointer;
     transition: background 0.2s ease, transform 0.2s ease;

     &:hover {
       background: rgba(15, 15, 15, 0.9);
     }

     &:active {
       transform: translateY(-50%) scale(0.96);
     }
   }

   .livecom__arrow--prev {
     left: 0;

     &::after {
       content: "";
       display: block;
       width: 20px;
       height: 20px;
       background: url("../images/arrow-left.svg") no-repeat center center;
       background-size: 100% auto;
       filter: var(--filter-gray-200);
     }
   }

   .livecom__arrow--next {
     right: 0;

     &::after {
       content: "";
       display: block;
       width: 20px;
       height: 20px;
       background: url("../images/arrow-right.svg") no-repeat center center;
       background-size: 100% auto;
       filter: var(--filter-gray-200);
     }
   }
 }

 .livecom__device {
   position: relative;
   max-width: 380px;
   margin: 0 auto;
   padding: 14px;
   border-radius: 20px;
   background: linear-gradient(180deg, #2c2d31 0%, #141519 100%);

   .livecom__device-top {
     position: relative;
     height: 34px;
   }

   .livecom__speaker {
     position: absolute;
     top: 8px;
     left: 50%;
     width: 86px;
     height: 10px;
     border-radius: 999px;
     background: #0b0c0f;
     transform: translateX(-50%);
   }

   .livecom__device-screen {
     overflow: hidden;
     border-radius: 12px;
     background: #000;
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
   }

   .livecom__home-bar {
     width: 110px;
     height: 5px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.18);
   }

   .livecom__slider {
     position: relative;
     width: 100%;
   }

   .livecom__viewport {
     overflow: hidden;
     width: 100%;
   }

   .livecom__track {
     display: flex;
     width: 100%;
     will-change: transform;
     transition: transform 0.45s ease;
   }

   .livecom__slide {
     flex: 0 0 100%;
     min-width: 100%;
     display: flex;
     justify-content: center;
   }

   .livecom--grid-wrap {
     position: relative;
     display: block;
     width: 100%;
     overflow: hidden;
     background: #111;
     aspect-ratio: 0.84 / 1.4;
     margin: 0 auto;

     &::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(180deg,
           rgba(0, 0, 0, 0.08) 0%,
           rgba(0, 0, 0, 0) 48%,
           rgba(0, 0, 0, 0.62) 100%);
       pointer-events: none;
     }

     .live-card__image {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .live-card__overlay {
       position: absolute;
       right: 12px;
       bottom: 12px;
       left: 12px;
       z-index: 2;
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       gap: 8px;
     }

     .live-card__profile {
       display: flex;
       align-items: flex-end;
       gap: 8px;
       min-width: 0;
     }

     .live-card__avatar-wrap {
       position: relative;
       flex: 0 0 auto;
       width: 36px;
       padding-bottom: 10px;
     }

     .live-card__avatar {
       display: block;
       width: 36px;
       height: 36px;
       border: 2px solid rgba(255, 255, 255, 0.95);
       border-radius: 50%;
       object-fit: cover;
       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
     }

     .live-card__live-badge {
       position: absolute;
       bottom: 0;
       left: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 30px;
       height: 14px;
       padding: 0 6px;
       border-radius: 999px;
       background: var(--red);
       color: #fff;
       font-size: 8px;
       font-weight: 800;
       line-height: 1;
       letter-spacing: 0.02em;
       transform: translateX(-50%);
       box-shadow: 0 3px 8px rgba(255, 51, 75, 0.34);
     }

     .live-card__name {
       min-width: 0;
       margin: 0 0 7px;
       color: #fff;
       font-size: 13px;
       font-weight: 700;
       line-height: 1.2;
       letter-spacing: -0.03em;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .live-card__follow {
       flex: 0 0 auto;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       height: 30px;
       padding: 0 12px;
       border-radius: 999px;
       background: rgb(var(--rgb-black), 30%);
       backdrop-filter: blur(10px);
       color: var(--gray-400);
       font-size: 12px;
       line-height: 1;
       white-space: nowrap;
     }
   }
 }

 @media (max-width: 768px) {
   .section-livecommerce {
     padding: 0 16px;
   }

   .livecom__frame {
     max-width: 100%;
     padding: 0;
     margin: 20px auto 30px;

     .livecom__arrow {
       display: none;
     }
   }

   .livecom__device {
     max-width: 100%;
     padding: 0;
     border-radius: 0;
     background: transparent;
     box-shadow: none;

     .livecom__device-top {
       display: none;
     }

     .livecom__device-screen {
       border-radius: 0;
       box-shadow: none;
     }

     .livecom--grid-wrap {
       aspect-ratio: 0.7 / 1.2;
     }
   }
 }


 .summary-box-wrap {
   display: flex;

   .content-list {
     display: flex;
   }
 }


 /*new 뉴*/

 body:has(.live-service-section .service-card:target) {
   overflow: hidden;
 }

 .live-service-section {
   position: relative;
   overflow: hidden;
   padding: 80px 0 100px;
   background:
     radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 28%),
     radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0) 24%),
     rgb(var(--black));

   .section-head {
     padding: 0 0 clamp(16px, 0.625vw + 14.000px, 26px);
   }

   .section-eyebrow {
     margin: 0 0 14px;
     font-size: 16px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: rgba(var(--white), 0.58);
   }

   .section-title {
     font-size: 42px;
     font-weight: 700;
     line-height: 1.15;
     word-break: keep-all;
   }

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

   .service-card {
     position: relative;
     min-height: 360px;
     overflow: hidden;
     border: 1px solid rgba(var(--card-border), 0.08);
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
     isolation: isolate;
   }

   .service-card::before {
     content: attr(data-step);
     position: absolute;
     top: 18px;
     right: 22px;
     z-index: 200;
     font-size: 124px;
     font-weight: 900;
     line-height: 0.8;
     letter-spacing: -0.08em;
     color: rgba(var(--rgb-white), 20%);
     pointer-events: none;
     user-select: none;
   }

   .service-card-recruit {
     grid-column: span 7;
   }

   .service-card-planning {
     grid-column: span 5;
   }

   .service-card-streaming {
     grid-column: span 4;
   }

   .service-card-operation {
     grid-column: span 4;
   }

   .service-card-analysis {
     grid-column: span 4;
   }

   .service-open-button {
     display: none;
   }

   .service-visual {
     position: absolute;
     inset: 0;
     z-index: 1;

     .consulting-card-image,
     img {
       position: absolute;
       inset: 0;
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center center;
     }
   }

   .service-visual::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
       linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 30%),
       linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 60%);
     z-index: 1;
     pointer-events: none;
   }

   .service-caption {
     position: absolute;
     left: 24px;
     right: 24px;
     bottom: 24px;
     z-index: 3;
     transition: opacity 0.45s ease, transform 0.45s ease;

     .service-kicker {
       margin: 0 0 10px;
       font-size: 15px;
       font-weight: 600;
       line-height: 1;
       color: rgba(var(--white), 0.64);
     }

     .service-name {
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
       font-size: 32px;
       font-weight: 700;
       line-height: 1;
       letter-spacing: -0.05em;
       word-break: keep-all;

       &::after {
         content: "";
         display: block;
         width: 180px;
         height: 3px;
         background: var(--white);
       }
     }
   }

   .service-overlay {
     position: absolute;
     inset: 0;
     z-index: 4;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     gap: 18px;
     padding: 40px 32px 32px;
     background:
       linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.46) 44%, rgba(0, 0, 0, 0.9) 100%);
     opacity: 0;
     visibility: hidden;
     transform: translateY(24px);
     transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
     pointer-events: none;

     .service-title {
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
       font-size: 36px;
       font-weight: 700;
       line-height: 1.02;
       letter-spacing: -0.05em;
       word-break: keep-all;

       &::after {
         content: "";
         display: block;
         width: 180px;
         height: 3px;
         background: var(--white);
       }
     }

     .service-description {
       font-size: 20px;
       font-weight: 500;
       line-height: 1.5;
       letter-spacing: -0.03em;
       word-break: keep-all;
     }

     .service-meta {
       margin: 0;
       max-width: 700px;
       font-size: 14px;
       line-height: 1.7;
       color: rgba(var(--white), 0.38);
       word-break: keep-all;
     }
   }

   .service-close-button {
     display: none;
   }

   .service-card:hover {
     .service-overlay {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
     }

     .service-caption {
       opacity: 0;
       transform: translateY(18px);
     }
   }
 }

 @media all and (max-width: 1280px) {
   .live-service-section {
     padding: 64px 0 80px;

     .section-title {
       font-size: 44px;
     }

     .service-grid {
       gap: 20px;
     }

     .service-card {
       min-height: 320px;
     }

     .service-card::before {
       font-size: 96px;
     }

     .service-name {
       font-size: 34px;
     }

     .service-title {
       font-size: 36px;
     }

     .service-description {
       font-size: 20px;
     }

     .service-meta {
       font-size: 15px;
     }
   }
 }

 @media all and (max-width: 1024px) {
   .live-service-section {

     .service-card-recruit,
     .service-card-planning,
     .service-card-streaming,
     .service-card-operation,
     .service-card-analysis {
       grid-column: span 6;
     }
   }
 }

 @media all and (max-width: 767px) {
   .live-service-section {
     padding: 0 0 24px;



     .section-head {
       padding: 28px 0 22px;
       margin-bottom: 0;
     }

     .section-eyebrow {
       margin-bottom: 6px;
       font-size: 13px;
       font-weight: 300;
     }

     .section-title {
       font-size: 22px;
       line-height: 1.25;
       font-weight: 600;
     }

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

     .service-card-recruit,
     .service-card-planning,
     .service-card-streaming,
     .service-card-operation,
     .service-card-analysis {
       grid-column: span 1;
     }

     .service-card {
       position: relative;
       height: 280px;
       min-height: 280px;
       border-left: 0;
       border-right: 0;
       overflow: hidden;
       background: rgb(var(--black));
     }

     .service-card::before {
       display: none;
     }

     .service-open-button {
       display: block;
       position: absolute;
       inset: 0;
       z-index: 6;
     }

     .service-caption {
       left: 16px;
       right: 16px;
       bottom: 16px;

       .service-kicker {
         margin-bottom: 8px;
         font-weight: 400;
         font-size: 14px;
       }

       .service-name {
         gap: 10px;
         font-size: 26px;

         &::after {
           width: 150px;
           height: 3px;
         }
       }
     }


     .service-title {
       gap: 10px;
       font-size: 32px;
       line-height: 1;

       &::after {
         width: 150px;
         height: 3px;
       }
     }

     .service-description {
       font-size: 16px;
       line-height: 1.65;
     }

     .service-meta {
       font-size: 13px;
       line-height: 1.7;
       color: rgba(var(--white), 0.42);
     }

     .service-visual {
       position: absolute;
       inset: 0;
       z-index: 1;
       width: 100%;
       height: 100%;
       min-height: 100%;
       overflow: hidden;

       .consulting-card-image,
       img {
         position: absolute;
         inset: 0;
         display: block;
         width: 100%;
         height: 100%;
         min-height: 100%;
         object-fit: cover;
         object-position: center center;
         transform: scale(1.02);
       }
     }

     .service-visual::after {
       content: "";
       position: absolute;
       inset: 0;
       background:
         linear-gradient(180deg,
           rgba(0, 0, 0, 0.34) 0%,
           rgba(0, 0, 0, 0.58) 22%,
           rgba(0, 0, 0, 0.82) 56%,
           rgba(0, 0, 0, 0.95) 80%,
           rgba(0, 0, 0, 1) 100%);
       pointer-events: none;
       z-index: 2;
     }

     .service-overlay {
       position: absolute;
       inset: 0;
       z-index: 10;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       width: 100%;
       height: 100%;
       min-height: 100%;
       gap: 16px;
       padding: 96px 24px 40px;
       background:
         linear-gradient(180deg,
           rgba(0, 0, 0, 0.18) 0%,
           rgba(0, 0, 0, 0.46) 20%,
           rgba(0, 0, 0, 0.76) 50%,
           rgba(0, 0, 0, 0.8) 76%,
           rgba(0, 0, 0, 0.9) 100%);
       opacity: 0;
       visibility: hidden;
       transform: translateY(12px);
       pointer-events: none;
     }

     .service-close-button {
       display: none;
     }

     .service-close-button span {
       position: absolute;
       width: 24px;
       height: 2px;
       border-radius: 999px;
       background: var(--white);
     }

     .service-close-button span:first-child {
       transform: rotate(45deg);
     }

     .service-close-button span:last-child {
       transform: rotate(-45deg);
     }

     .service-card:hover {
       .service-overlay {
         opacity: 0;
         visibility: hidden;
         transform: translateY(12px);
       }

       .service-caption {
         opacity: 1;
         transform: none;
       }
     }

     .service-card:target {
       position: fixed;
       inset: 0;
       z-index: 1000;
       width: 100vw;
       height: 100dvh;
       min-height: 100dvh;
       max-height: 100dvh;
       overflow: hidden;
       background: rgb(var(--black));
     }

     .service-card:target {
       .service-visual {
         position: fixed;
         inset: 0;
         z-index: 1;
         width: 100vw;
         height: 100dvh;
         min-height: 100dvh;
         max-height: 100dvh;
         overflow: hidden;

         .consulting-card-image,
         img {
           position: absolute;
           inset: 0;
           display: block;
           width: 100vw;
           height: 100dvh;
           min-height: 100dvh;
           max-height: 100dvh;
           object-fit: cover;
           object-position: center center;
           transform: scale(1.02);
           filter: brightness(0.34) blur(4px);
         }
       }

       .service-caption {
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
       }

       .service-overlay {
         position: fixed;
         inset: 0;
         z-index: 10;
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         pointer-events: auto;
         width: 100vw;
         height: 100dvh;
         min-height: 100dvh;
         max-height: 100dvh;
         overflow-y: auto;
         padding: calc(96px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
         background:
           linear-gradient(180deg,
             rgba(0, 0, 0, 0.18) 0%,
             rgba(0, 0, 0, 0.42) 18%,
             rgba(0, 0, 0, 0.68) 44%,
             rgba(0, 0, 0, 0.9) 72%,
             rgba(0, 0, 0, 1) 100%);
       }

       .service-open-button {
         display: none !important;
       }

       .service-close-button {
         position: fixed;
         top: calc(14px + env(safe-area-inset-top));
         right: calc(14px + env(safe-area-inset-right));
         z-index: 1015;
         display: flex;
         width: 44px;
         height: 44px;
         align-items: center;
         justify-content: center;
         border-radius: 999px;
         background: rgba(0, 0, 0, 0.36);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
       }
     }
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .live-service-section {

     .service-caption,
     .service-overlay {
       transition: none;
     }
   }
 }








 /****** 포트폴리오 ********************/
 .portfolio-showcase-wrap {
   display: grid;
   grid-template-columns: minmax(0, clamp(300px, 24vw, 420px)) minmax(0, 1fr);
   gap: clamp(18px, 2.375vw + 10.400px, 56px);
   align-items: start;
   min-height: 100vh;
   padding: 40px 0 80px;

   .portfolio-showcase__nav {
     width: 100%;
     position: sticky;
     top: 24px;
   }

   .portfolio-showcase__tab-list {
     display: flex;
     flex-direction: column;
     gap: clamp(20px, 2.8vw, 36px);

     .portfolio-showcase__tab {
       width: 100%;
       padding: 0 0 20px;
       border: 0;
       border-radius: 0;
       background: transparent;
       color: rgba(255, 255, 255, 0.32);
       text-align: left;
       font-weight: 700;
       cursor: pointer;
       transition: color 0.36s ease, letter-spacing 0.44s ease;
     }

     .portfolio-showcase__tab::before {
       display: none;
     }

     .portfolio-showcase__tab:hover {
       color: var(--white);
     }

     .portfolio-showcase__tab.is-current,
     .portfolio-showcase__tab.is-active {
       color: var(--white);
     }

     .portfolio-showcase__tab.is-clicked {
       animation: none;
     }

     .portfolio-showcase__tab:focus-visible {
       outline: 2px solid rgba(255, 255, 255, 0.84);
       outline-offset: 4px;
     }

     .portfolio-showcase__tab-text {
       position: relative;
       display: inline-block;
       font-size: clamp(16px, 2.000vw + 9.600px, 48px);
       line-height: 1;
       letter-spacing: -0.048em;
       white-space: nowrap;
     }

     .portfolio-showcase__tab-text::after {
       content: "";
       position: absolute;
       left: 0;
       bottom: -12px;
       width: 100%;
       height: 4px;
       background: var(--white);
       opacity: 0;
       transform: scaleX(0);
       transform-origin: left center;
       transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
         opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1);
     }

     .portfolio-showcase__tab.is-current .portfolio-showcase__tab-text::after,
     .portfolio-showcase__tab.is-active .portfolio-showcase__tab-text::after {
       opacity: 1;
       transform: scaleX(1);
     }
   }

   .portfolio-showcase__content {
     width: 100%;
     min-width: 0;
   }

   .portfolio-showcase__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 46px 30px;
   }

   .portfolio-showcase__card {
     display: block;

     .portfolio-showcase__card-link {
       display: block;
       width: 100%;
     }

     .portfolio-showcase__thumb {
       aspect-ratio: 1 / 1;
       overflow: hidden;
       background: #111111;
     }

     .portfolio-showcase__thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform var(--transition), opacity var(--transition);
     }

     .portfolio-showcase__card-link:hover .portfolio-showcase__thumb img {
       transform: scale(1.03);
       opacity: 0.94;
     }

     .portfolio-showcase__info {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding-top: 20px;

       .portfolio-showcase__title {

         font-size: clamp(18px, 0.250vw + 17.200px, 22px);
         font-weight: 700;
         line-height: 1.3;
       }
     }


     .portfolio-showcase__url {
       display: inline-flex;
       align-items: center;
       justify-content: center;

       min-height: 30px;
       padding: 0 18px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 999px;
       background: transparent;
       color: var(--white);
       font-size: 12px;
       font-weight: 400;
       line-height: 1;

       &:hover {
         background: var(--white);
         color: #000000;
         border-color: var(--white);
         transform: translateY(-1px);
       }
     }

     .portfolio-showcase__meta {

       display: flex;
       flex-direction: column;
       gap: 10px;
     }

     .portfolio-showcase__meta-item {
       display: flex;
       align-items: center;

       background: var(--white);
       width: fit-content;

       &>span {
         padding: 2px 6px;
       }

       .portfolio-showcase__meta-label {
         color: var(--gray-100);
         background: var(--gray-800);
       }

       .portfolio-showcase__meta-value {
         color: var(--black);
       }
     }

     .portfolio-showcase__download {
       display: flex;
       gap: 8px;

       .portfolio-showcase__download-link {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         min-height: 30px;
         padding: 0 clamp(10px, 0.375vw + 8.800px, 16px);
         border: 1px solid rgb(var(--rgb-white), 30%);
         border-radius: 999px;
         background: transparent;
         color: var(--gray-400);
         font-weight: 500;
         line-height: 1;
         font-size: 12px;
         white-space: nowrap;

         &:hover {
           background: var(--white);
           color: var(--black);
           border-color: var(--white);
           transform: translateY(-1px);
         }
       }
     }

     .portfolio-showcase__description {
       font-size: clamp(14px, 0.063vw + 13.800px, 15px);
       line-height: 1.4;
       color: var(--gray-300);
       font-weight: 300;
     }
   }
 }



 @media all and (max-width: 1024px) {
   .portfolio-showcase-wrap {
     padding: 24px 0 48px;
     grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
     min-height: auto;

     .portfolio-showcase__nav {
       position: static;
     }

     .portfolio-showcase__tab-list {
       flex-direction: column;
       gap: 16px;

       .portfolio-showcase__tab {
         width: 100%;
         padding: 0 0 16px;
       }
     }

     .portfolio-showcase__grid {
       gap: 30px 18px;
     }
   }
 }

 @media all and (max-width: 768px) {
   .portfolio-showcase-wrap {
     grid-template-columns: 1fr;

     .portfolio-showcase__tab-list {
       flex-direction: row;
       flex-wrap: wrap;
       gap: 10px 14px;
     }

     .portfolio-showcase__tab {
       width: auto;
       padding: 0 8px 12px 0;
     }

     .portfolio-showcase__tab-text {
       font-size: clamp(30px, 6.5vw, 44px);
     }

     .portfolio-showcase__tab-text::after {
       bottom: -8px;
     }

     .portfolio-showcase__grid {
       /* padding: 0 16px; */
       grid-template-columns: repeat(2, 1fr);
     }
   }
 }

 @keyframes portfolioTabPop {
   0% {
     transform: scale(1);
   }

   45% {
     transform: scale(1.07);
   }

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

 /***** 문의 **************/

 .contact-form-wrap {
   display: flex;
   flex-direction: column;
   gap: 20px;
   max-width: 700px;
   margin: 0 auto;

   .contact-form-row {
     display: flex;
     gap: 20px;

   }

   .contact-form-label {
     display: flex;
     align-items: center;
     font-size: 15px;
     font-weight: 400;
     flex: 0 0 100px;

   }


   .contact-form-submit {
     width: 100%;
     margin-top: 18px;
   }
 }

 @media all and (max-width: 768px) {
   .section-contact {
     padding: 0 16px 40px;
   }

   .contact-form-wrap {

     .contact-form-row {
       flex-direction: column;
       gap: 10px;
     }

     .contact-form-label {
       flex: unset;
     }
   }
 }



 /***** 푸터 **************/
 .site-footer {
   border-top: 1px solid rgb(var(--rgb-white), 20%);
   background: var(--black);

   .footer-inner {
     padding: clamp(20px, 1.875vw + 14.000px, 50px) 0;
     display: flex;
     justify-content: space-between;
     gap: clamp(26px, 0.875vw + 23.200px, 40px);
   }

   .footer-brand {
     display: flex;
     flex-direction: column;
     gap: 4px;

     .footer-logo-top {
       font-weight: 900;
       font-size: 33px;
       line-height: 0.9;
       color: var(--white);
       letter-spacing: 1px;
       text-transform: uppercase;
     }

     .footer-logo-bottom {
       font-size: 27px;
       line-height: 0.92;
       letter-spacing: 1px;
       font-weight: 300;
     }
   }

   .footer-title {
     display: block;
     margin-top: clamp(6px, 0.875vw + 3.200px, 20px);
     font-size: 15px;
     font-weight: 300;
   }

   .footer-info {
     margin: clamp(14px, 0.25vw + 13.2px, 18px) 0 0;
     font-size: clamp(12px, 0.125vw + 11.6px, 14px);
     line-height: 1.9;
     color: #555;
   }

   .footer-meta {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: flex-start;
     gap: clamp(10px, 0.375vw + 8.800px, 16px);

     &>li {
       display: flex;
       gap: clamp(10px, 0.375vw + 8.800px, 16px);
       font-size: 13px;
       font-weight: 300;
       color: var(--gray-400);
       text-align: right;
     }

     .link {
       color: var(--white);
     }

     .copyright {
       gap: clamp(10px, 0.375vw + 8.800px, 16px);
       flex-direction: column;
     }
   }

   .footer-sns {
     display: flex;
     gap: 6px !important;
     flex-wrap: wrap;
     padding-top: 16px;

     a {
       display: inline-flex;
       height: clamp(30px, 0.25vw + 29.2px, 34px);
       padding: 0 clamp(12px, 0.125vw + 11.6px, 14px);
       align-items: center;
       justify-content: center;
       border: 1px solid var(--white) !important;
       color: var(--white);
       border-radius: 999px;
       font-size: clamp(12px, 0.063vw + 11.8px, 13px);
       font-weight: 700;
     }
   }
 }

 @media all and (max-width: 767px) {
   .site-footer {

     .footer-inner {
       flex-direction: column;
       align-items: flex-start;
     }

     .footer-meta {
       align-items: flex-start;

       &>li {}

       span {
         text-align: left;
       }
     }

     .footer-sns {
       padding-top: 0;
     }
   }
 }

 /*new footer*/
 .footer {
   border-top: 1px solid rgb(var(--rgb-black), 10%);
   background: var(--gray-100);
 }

 .brand-site-footer-wrap {
   margin: 0 auto;
   border-left: 1px solid rgb(var(--rgb-black), 10%);
   border-right: 1px solid rgb(var(--rgb-black), 10%);

   .brand-site-footer__top {
     min-height: clamp(100px, 5.000vw + 84.000px, 180px);
     padding: 20px 18px;
     display: flex;
     align-items: flex-start;
   }

   .brand-site-footer__brand {
     display: flex;
     flex-direction: column;
     gap: 4px;
     text-transform: uppercase;

     .brand-main {
       display: block;
       font-size: clamp(30px, 4.2vw, 46px);
       font-weight: 800;
       letter-spacing: 0.01em;
       color: var(--black);
     }

     .brand-sub {
       display: block;
       font-size: clamp(24px, 3.3vw, 38px);
       font-weight: 500;
       letter-spacing: -0.5px;
       color: var(--black);
     }

     .site-footer__company {
       color: var(--gray-700);
       font-size: clamp(16px, 0.875vw + 13.200px, 30px);
       line-height: 1.18;
       font-weight: 600;
       letter-spacing: -0.02em;
     }
   }



   .brand-site-footer__bottom {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 300px;
   }

   .brand-site-footer__left {
     padding: 26px 26px 36px;
   }

   .brand-site-footer__right {
     border-left: 1px solid rgb(var(--rgb-black), 10%);
     position: relative;
     padding: 26px 26px 36px;
   }



   .brand-site-footer__address {
     margin-top: clamp(10px, 0.375vw + 8.800px, 16px);
     color: var(--black);
     font-size: clamp(16px, 0.563vw + 14.200px, 25px);
     line-height: 1.28;
     font-weight: 500;
     letter-spacing: -0.01em;
   }

   .brand-site-footer__links {
     margin: 0;
     display: inline-flex;
     gap: 20px;
     font-size: clamp(18px, 0.313vw + 17.000px, 23px);
     font-weight: 500;
     white-space: nowrap;
   }

   .brand-site-footer__links a {
     color: var(--black);
     text-decoration: none;
   }

   .brand-site-footer__copy {
     margin-top: clamp(16px, 0.375vw + 14.800px, 22px);
     color: var(--black);
     font-size: clamp(14px, 0.500vw + 12.400px, 22px);
     line-height: 1.28;
     font-weight: 500;
     letter-spacing: -0.01em;
   }

   .brand-site-footer__copy strong {
     color: var(--black);
     font-weight: 800;
   }

   .brand-site-footer__social {
     position: absolute;
     right: 16px;
     bottom: 24px;
     display: flex;
     gap: clamp(4px, 0.500vw + 2.400px, 12px);
     padding-top: 16px;

     &>a {
       min-width: 74px;
       height: clamp(38px, 0.500vw + 36.400px, 46px);
       border: 1.5px solid rgb(var(--rgb-black), 20%);
       border-radius: 999px;
       padding: 0 clamp(14px, 0.250vw + 13.200px, 18px);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: var(--black);
       font-size: clamp(14px, 0.375vw + 12.800px, 20px);
       font-weight: 700;
       letter-spacing: -0.01em;
     }
   }


 }

 @media (max-width: 960px) {

   .footer {
     .inner {
       padding: 0 !important;
       width: 100%;
     }
   }

   .brand-site-footer-wrap {
     border: none;

     .brand-site-footer__links {
       flex-wrap: wrap;
       white-space: normal;
     }

   }
 }

 @media (max-width: 700px) {
   .brand-site-footer-wrap {


     .brand-site-footer__bottom {
       grid-template-columns: 1fr;
     }

     .brand-site-footer__right {

       padding: 16px 16px 26px;
     }

     .brand-site-footer__left {
       padding: 16px 16px 26px;
       border-bottom: 1px solid rgb(var(--rgb-black), 10%);
     }

     .brand-site-footer__social {
       position: static;
       justify-content: flex-start;
     }
   }
 }


 /*플로팅 버튼 floating inquiry */
 .floating-btn-wrap {
   position: fixed;
   right: clamp(16px, 2vw, 34px);
   bottom: calc(clamp(16px, 2vw, 34px) + env(safe-area-inset-bottom));
   z-index: 1400;
   width: clamp(46px, 3.375vw + 35.200px, 100px);
   aspect-ratio: 1;
   border-radius: 999px;
   display: grid;
   place-items: center;
   color: var(--black);
   background: var(--white);
   border: 1px solid var(--black);
   /* 기본: footer 밖 */
   isolation: isolate;
   transition: background-color .24s ease, color .24s ease, border-color .24s ease, filter .24s ease;
   animation: fiPulse 1.8s ease-in-out infinite;
   transform-origin: center;

   .fi-halo {
     position: absolute;
     inset: -5px;
     border-radius: inherit;
     z-index: -1;
     background: var(--white);
     opacity: .1;
     animation: fiSpin 10s linear infinite;
   }

   .fi-txt {
     font-size: clamp(13px, 0.438vw + 11.600px, 20px);
     line-height: 1;
     font-weight: 800;
     letter-spacing: -.02em;
     color: currentColor;
   }

   &:hover {
     filter: brightness(1.08);
   }

   &.is-on-dark-zone {
     background: var(--black);
     color: var(--white);

   }
 }

 @keyframes fiPulse {

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

   50% {
     transform: scale(1.08);
   }
 }


 @keyframes fiSpin {
   to {
     rotate: 360deg;
   }
 }

 @media (max-width: 768px) {
   .floating-btn-wrap {
     right: 14px;
     bottom: calc(14px + env(safe-area-inset-bottom));

     .fi-txt {
       font-weight: 500;
     }
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .floating-btn-wrap,
   .floating-btn-wrap .fi-halo {
     animation: none;
     transition: none;
     transform: none;
   }
 }

 /***********서브 hreo**************/

 .section-header-hero-def {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   display: flex;
   align-items: center;
   margin-top: clamp(52px, 2.063vw + 45.400px, 85px);
   padding: clamp(40px, 3.750vw + 28.000px, 100px) 0;
   background: linear-gradient(180deg, #10141d 0%, #06080d 100%);

   &::before {
     background:
       radial-gradient(40% 35% at 20% 30%, rgba(92, 115, 160, 0.25), transparent 70%),
       radial-gradient(36% 34% at 78% 72%, rgba(58, 76, 112, 0.22), transparent 72%);
     filter: blur(10px);
     animation: heroGradMoveA 16s ease-in-out infinite alternate;
   }
 }


 /**/
 .header-title-box {
   display: flex;
   flex-direction: column;
   overflow: hidden;

   .brand,
   .title {
     text-align: center;
     opacity: 0;
     transform: translateY(24px);
     animation: text-rise-up 0.8s ease forwards;
   }

   .brand {
     font-size: clamp(24px, 3.188vw + 13.800px, 75px);
     text-transform: uppercase;
     font-weight: 200;
   }

   .title {
     animation-delay: 0.15s;
     font-size: clamp(34px, 5.375vw + 16.800px, 120px);
     font-weight: 800;
     color: var(--gray-100);
     text-transform: uppercase;

   }
 }

 @media all and (max-width: 768px) {
   .header-title-box {
     padding: 0 16px;
   }
 }

 @keyframes text-rise-up {
   0% {
     opacity: 0;
     transform: translateY(100px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }



 /*****동영상 비주얼 영역*******/
 .section-video-header {
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   height: clamp(280px, 36.250vw + 164.000px, 860px);
   margin-top: clamp(52px, 2.063vw + 45.4px, 85px);
   margin-bottom: clamp(60px, 3.750vw + 48.000px, 120px);
   padding: clamp(50px, 4.375vw + 36px, 120px) 0 clamp(30px, 2.5vw + 22px, 70px);
   overflow: hidden;
   isolation: isolate;


   .hero-bg-video {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
     transform-origin: center;
     will-change: transform;


     video {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
     }
   }

   .visual-title-video {
     position: relative;
     z-index: 2;
     margin: 0 auto;
     width: 100%;

     .cdmv-title-video-mask {
       --cdmv-mask-width: min(100%, 1700px);
       --cdmv-mask-size: 98% auto;
       --cdmv-mask-position-x: 50%;
       --cdmv-mask-position-y: center;
       --cdmv-mask-shift-x: 0%;
       --cdmv-mask-image: none;

       width: var(--cdmv-mask-width);
       height: clamp(240px, 6.875vw + 218.000px, 350px);
       margin: 0 auto;
       overflow: hidden;
       background: #fff;
       filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
       transform-origin: center;
       transform: scale(0.58);
       opacity: 1;
       will-change: transform;
       animation: masktitleIn 4000ms linear both;


       -webkit-mask-repeat: no-repeat;
       -webkit-mask-size: var(--cdmv-mask-size);
       -webkit-mask-position: calc(var(--cdmv-mask-position-x) + var(--cdmv-mask-shift-x)) var(--cdmv-mask-position-y);
       -webkit-mask-image: var(--cdmv-mask-image);

       mask-repeat: no-repeat;
       mask-size: var(--cdmv-mask-size);
       mask-position: calc(var(--cdmv-mask-position-x) + var(--cdmv-mask-shift-x)) var(--cdmv-mask-position-y);
       mask-image: var(--cdmv-mask-image);

       &.cdmv-title--STUDIO {
         --cdmv-mask-shift-x: -3.8%;
         --cdmv-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5000 1460' preserveAspectRatio='xMidYMid meet'%3E%3Ctext x='2500' y='360' text-anchor='middle' dominant-baseline='middle' font-family='Arial Black,Arial,sans-serif' font-weight='500' font-size='300' fill='white'%3ECHEONGDAMENM%3C/text%3E%3Ctext x='2500' y='930' text-anchor='middle' dominant-baseline='middle' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-size='800' fill='white'%3ESTUDIO%3C/text%3E%3C/svg%3E");
       }

       &.cdmv-title--CREATOR {
         --cdmv-mask-shift-x: -3.8%;
         --cdmv-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5000 1460' preserveAspectRatio='xMidYMid meet'%3E%3Ctext x='2500' y='360' text-anchor='middle' dominant-baseline='middle' font-family='Arial Black,Arial,sans-serif' font-weight='500' font-size='300' fill='white'%3ECHEONGDAMENM%3C/text%3E%3Ctext x='2500' y='930' text-anchor='middle' dominant-baseline='middle' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-size='800' fill='white'%3ECREATOR%3C/text%3E%3C/svg%3E");
       }

       video {
         width: 100%;
         height: 100%;
         display: block;
         object-fit: cover;
         background: linear-gradient(120deg, #202736, #11151f);
         pointer-events: none;
       }
     }

     @media all and (max-width: 768px) {

       .cdmv-title-video-mask.cdmv-title--STUDIO,
       .cdmv-title-video-mask.cdmv-title--CREATOR {
         --cdmv-mask-width: 100%;
         --cdmv-mask-size: 92% auto;
         --cdmv-mask-shift-x: -2.2%;
       }
     }
   }

   &::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.52) 100%);
     z-index: 1;
   }
 }

 .section-header-hero--creator {
   overflow: visible;

   .visual-title-video {
     z-index: 4;
     transform: translateY(55%);
     transform-origin: center top;
     will-change: transform;
   }
 }

 /* .section-header-hero--creator+.creator-section {
   padding-top: clamp(96px, 2.875vw + 86.800px, 142px);
 } */

 @media all and (max-width: 768px) {
   .section-header-hero--creator {
     .visual-title-video {
       transform: translateY(62%);
     }
   }

   /* .section-header-hero--creator+.creator-section {
     padding-top: clamp(74px, 4.375vw + 60px, 102px);
   } */
 }

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

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

 @keyframes bgVideoGrowIn {
   0% {
     transform: scale(0.3);
   }

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

 @keyframes heroTextGrowSlow {
   0% {
     opacity: 0;
     transform: translateY(24px) scale(0.62);
   }

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

 @media (prefers-reduced-motion: reduce) {
   .section-header-hero {
     .hero-bg-video {
       animation: none;
       transform: scale(1);
     }

     .visual-title-video .cdmv-title-video-mask {
       animation: none;
       transform: scale(1);
     }

     .header-title-box {
       animation: none;
       opacity: 1;
       transform: none;
     }
   }
 }



 /******/
 .video-production-showcase {
   width: 100%;
   padding: 50px 0;


   .vps__lead {
     font-weight: 500;
     color: var(--white);
     border-top: 1px solid rgb(var(--rgb-white), 50%);
     padding: clamp(35px, 0.938vw + 32.000px, 50px) 0 clamp(10px, 4.375vw + -4.000px, 80px) 0;

     &>p {
       font-weight: 700;
       font-size: clamp(30px, 2.000vw + 23.600px, 62px);
       padding-bottom: clamp(10px, 0.625vw + 8.000px, 20px);
       line-height: 1.1;
     }

     &>span {
       font-size: clamp(18px, 0.750vw + 15.600px, 30px);
       font-weight: 300;
       line-height: 1.25;
       display: block;

     }
   }

   .vps__content-block {
     padding: clamp(35px, 2.313vw + 27.600px, 72px) 0;
     border-bottom: 1px solid rgb(var(--rgb-white), 20%);
   }

   .vps__block-title {
     margin-bottom: clamp(6px, 0.250vw + 5.200px, 10px);
     font-size: 36px;
     line-height: 1.18;
     letter-spacing: -0.02em;
     font-weight: 600;
   }

   .vps__block-subtitle {
     color: var(--vps-muted);
     font-size: 27px;
     letter-spacing: -0.01em;
     font-weight: 300;
   }

   .vps__content-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: clamp(20px, 0.875vw + 17.200px, 34px);
     font-size: clamp(16px, 0.375vw + 14.800px, 22px);
     line-height: 1.6;
     letter-spacing: -0.012em;
     counter-reset: vpsContentItem;


     li {
       color: var(--gray-200);
       position: relative;
       padding-left: 1.6em;
       counter-increment: vpsContentItem;
     }

     li::before {
       content: counter(vpsContentItem) ".";
       position: absolute;
       left: 0;
       top: 0;
       font-weight: 600;
     }

     strong {
       font-weight: 600;
     }
   }


   .vps__workflow-wrap {
     margin-top: clamp(35px, 2.813vw + 26.000px, 80px);
     display: grid;
     grid-template-columns: repeat(6, minmax(118px, 1fr));
     gap: 18px;
   }

   .vps__workflow-item {
     position: relative;
     aspect-ratio: 1 / 1;
     border: 1px solid #cfd3d8;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 20px 14px;
     opacity: 0;
     transform: translateY(30px) scale(0.94);
     filter: blur(3px);
     transition:
       opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
       transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
       filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
     transition-delay: calc(var(--vps-stagger-index, 0) * 120ms);
     will-change: opacity, transform, filter;
   }

   .vps__workflow-item.is-visible {
     opacity: 1;
     transform: translateY(0) scale(1);
     filter: blur(0);
   }

   .vps__workflow-step {
     position: absolute;
     top: -8px;
     left: 14px;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--primary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: 700;
     color: #fff;
     transform: scale(0.86);
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .vps__workflow-item.is-visible .vps__workflow-step {
     transform: scale(1);
   }

   .vps__workflow-label {
     margin: 0;
     font-size: 22px;
     line-height: 1.2;
     letter-spacing: -0.012em;
     color: var(--white);
     font-weight: 500;
   }
 }

 @media (max-width: 1024px) {
   .video-production-showcase {
     padding: 0 16px;

     .vps__container {
       padding: 60px 20px 72px;
     }

     .vps__divider {
       margin: 50px 0;
     }

     .vps__block-title {
       font-size: 32px;
     }

     .vps__block-subtitle {
       font-size: 22px;
     }



     .vps__workflow-wrap {
       grid-template-columns: repeat(3, minmax(120px, 1fr));
       gap: 16px;
     }

     .vps__workflow-label {
       font-size: 20px;
     }
   }
 }

 @media (max-width: 560px) {
   .video-production-showcase {
     .vps__container {
       padding: 50px 16px 62px;
     }



     .vps__block-title {
       font-size: 30px;
     }

     .vps__block-subtitle {
       font-size: 18px;
     }

     .vps__content-list {
       line-height: 1.42;
     }

     .vps__workflow-wrap {
       grid-template-columns: repeat(2, minmax(130px, 1fr));
     }

     .vps__workflow-label {
       font-size: 18px;
     }
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .video-production-showcase {
     .vps__workflow-item {
       opacity: 1;
       transform: none;
       filter: none;
       transition: none;
     }

     .vps__workflow-step {
       transform: none;
       transition: none;
     }
   }
 }


 .sec-footer-cta {
   background: var(--white);
   text-align: center;
 }

 .cta-banner {
   display: flex;
   flex-direction: column;
   gap: clamp(12px, 1.125vw + 8.400px, 30px);

   &>h2 {
     font-size: clamp(26px, 2.125vw + 19.200px, 60px);
     font-weight: 700;
     color: var(--black);
     letter-spacing: -2px;
   }

   p {
     font-size: clamp(18px, 0.500vw + 16.400px, 26px);
     line-height: 1.3;
     margin-bottom: 30px;
     color: var(--black);

   }

   a {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: var(--white);
     background: var(--black);
     height: clamp(56px, 1.500vw + 51.200px, 80px);
     min-width: clamp(250px, 4.375vw + 236.000px, 320px);
     font-size: clamp(18px, 0.625vw + 16.000px, 28px);

     margin: 0 auto;
   }
 }

 @media all and (max-width: 768px) {

   .sec-footer-cta {
     padding: 50px 16px;
   }
 }