/*===============================================================================================================================*/
/********* 1번 서비스 GATS 메뉴 :: service_gats *********/
/* 서비스 GATS 메뉴 메인 :: 섹션 01 */
:root {
  --white: #ffffff;
  --text: #333333;

  --gats-green: #6eb43f;
  --gats-green-dark: #4b8f2d;
  --gats-green-soft: #f2faed;
  --gats-text: #1b1f24;
  --gats-muted: #6a7078;
  --gats-line: #dfe8d8;

  --dms-black: #050505;
  --dms-muted: #6b7280;
  --dms-line: #e6e8ec;
  --dms-cyan: #00d7ff;
  --dms-violet: #8b5cff;
  --dms-pink: #ff00a8;

  --case-text: #050505;
  --case-muted: #6b7280;
  --case-line: #e3e6eb;
  --case-point: #111111;
}
.gats-hero {padding: 120px 20px clamp(70px, 7vw, 104px); background: #F3F4F6; color: var(--gats-text);}
.gats-hero__inner {width: min(100%, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: clamp(56px, 8vw, 120px); align-items: center;}
.gats-hero__title {margin: 0 0 34px; font-size: clamp(34px, 4.2vw, 58px); font-weight: 900; line-height: 1.18; letter-spacing: -0.06em;}
.gats-hero__name {margin: 0; font-size: clamp(28px, 2.8vw, 40px); font-weight: 900; line-height: 1.2;}
.gats-hero__sub {margin: 6px 0 28px; color: var(--gats-green); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;}
.gats-hero__desc {margin: 0; color: var(--gats-muted); font-size: 18px; font-weight: 600; line-height: 1.8; letter-spacing: -0.04em; word-break: keep-all;}
/* --------------- GATS KEYWORD VISUAL  ------------------- */
.gats-keyword-visual {position: relative; width: min(630px, 42vw); aspect-ratio: 1 / 1; display: grid; place-items: center;}
.gats-keyword-orbit {position: absolute; z-index: 2; inset: 2.5%; border-radius: 50%; pointer-events: none;}
.gats-keyword-orbit::before {content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(95, 150, 255, 0.2); box-shadow: inset 0 0 24px rgba(95, 150, 255, 0.05), 0 0 18px rgba(95, 150, 255, 0.04);}
.orbit-node {position: absolute; z-index: 4; width: 9px; height: 9px; border-radius: 50%; background: #8bb8ff; box-shadow: 0 0 0 7px rgba(95, 154, 255, 0.12), 0 0 18px rgba(72, 141, 255, 0.45);}
.orbit-node.node-01 {left: 50%; top: 0; transform: translate(-50%, -50%);}
.orbit-node.node-02 {right: 6.7%; top: 25%; transform: translate(50%, -50%);}
.orbit-node.node-03 {right: 6.7%; bottom: 25%; transform: translate(50%, 50%);}
.orbit-node.node-04 {left: 50%; bottom: 0; transform: translate(-50%, 50%);}
.orbit-node.node-05 {left: 6.7%; bottom: 25%; transform: translate(-50%, 50%);}
.orbit-node.node-06 {left: 6.7%; top: 25%; transform: translate(-50%, -50%);}
.gats-keyword-orbit-line {position: absolute; z-index: 3; inset: 2.5%; border-radius: 50%; pointer-events: none; animation: gatsOrbitLineRotate 9s linear infinite;}
.gats-keyword-orbit-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 292deg,
    rgba(85, 150, 255, 0.08) 304deg,
    rgba(85, 150, 255, 0.78) 322deg,
    rgba(85, 150, 255, 0.95) 342deg,
    transparent 358deg,
    transparent 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px),
    #000 100%
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px),
    #000 100%
  );

  filter: drop-shadow(0 0 8px rgba(75, 145, 255, 0.45));
}
.gats-keyword-sphere {position: relative; z-index: 5; width: 100%; height: 100%; border-radius: 50%; perspective: 1000px; overflow: hidden;}
.gats-keyword-sphere::before {content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: url("../img/service/gats_keyword_01.svg") center / contain no-repeat; opacity: 0.2; pointer-events: none;}
.gats-keyword-sphere::after {display: none;}
.gats-keyword-sphere span {position: absolute; left: 50%; top: 50%; display: inline-block; white-space: nowrap; line-height: 1; font-weight: 700; transform-style: preserve-3d; will-change: transform, opacity, font-size; pointer-events: none; letter-spacing: -0.02em;}

@keyframes gatsOrbitLineRotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.gats-cube-video-bg {position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;}
.gats-cube-video-bg video {position: absolute; left: 50%; top: 50%; width: min(720px, 40vw); height: auto; transform: translate(-42%, -50%); object-fit: contain; opacity: 0.72; filter: saturate(0.95) contrast(1.02);}
.gats-hero__visual, .gats-hero__inner, .gats-keyword-visual {position: relative; z-index: 1;}

.gats-hero-control {display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; color: #777; font-size: 13px;}
.gats-hero-control__wheel {width: 28px; height: 28px; border: 1px solid #d7d7d7; border-radius: 50%; position: relative;}
.gats-hero-control__wheel::before {content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; border: 1px solid #aaa; border-radius: 999px; transform: translateX(-50%);}
.gats-hero-control__btn {width: 26px; height: 26px; border: 0; background: transparent; color: #777; font: inherit; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease;}
.gats-hero-control__btn:hover {color: var(--gats-green); transform: translateY(-1px);}
.gats-hero-control__count {display: inline-flex; align-items: center; gap: 8px; min-width: 58px; justify-content: center;}
.gats-hero-control__count strong {color: var(--gats-text);}
.gats-feature {position: relative; min-height: 830px; color: #fff; overflow: hidden; }
.gats-feature__bg {position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; filter: grayscale(1); transform: scale(1.04);}
.gats-feature::before {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.68) 42%, rgba(0, 0, 0, 0.45) 100%); z-index: 1;}
.gats-feature__inner {position: relative; z-index: 2; width: min(100%, 1180px); min-height: 560px; margin: 0 auto; padding: clamp(72px, 8vw, 110px) 20px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(50px, 8vw, 120px); align-items: center;}
.gats-feature-nav {position: relative; display: grid; gap: 90px;}
.gats-feature-nav::before {content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: rgba(255, 255, 255, 0.45); z-index: -1;}
.gats-feature-nav__item {position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 3px; border: 0; padding: 0; background: transparent; color: rgba(255, 255, 255, 0.68); text-align: left; font: inherit; cursor: pointer;}
.gats-feature-nav__item span {left: -7px; grid-row: 1 / 3; width: 38px; height: 38px; border: 2px solid currentColor; border-radius: 50%; background: #232323; display: inline-flex; align-items: center; justify-content: center; color: inherit; font-size: 16px; font-weight: 900; line-height: 1; position: relative; z-index: 2;}
.gats-feature-nav__item strong {font-size: 18px; font-weight: 900; line-height: 1.25; letter-spacing: -0.045em;}
.gats-feature-nav__item em {font-style: normal; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.58);}
.gats-feature-nav__item.is-active {color: #fff;}
.gats-feature-nav__item.is-active span {left: -7px; background: #fff; color: #111; border-color: #fff;}
.gats-feature-content {min-width: 0;}
.gats-feature-panel {display: none; max-width: 680px; animation: gatsPanelFade 0.45s ease both;}
.gats-feature-panel.is-active {display: block;}
.gats-feature-panel__eyebrow {margin: 0 0 12px; color: rgba(255, 255, 255, 0.78); font-size: clamp(34px, 4vw, 56px); font-weight: 900; line-height: 1.1; letter-spacing: -0.055em;}
.gats-feature-panel h3 {margin: 0 0 44px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: -0.055em; color: #fff;}
.gats-feature-panel p:last-child {margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 21px; font-weight: 500; line-height: 1.9; letter-spacing: -0.045em; word-break: keep-all;}
@keyframes gatsPanelFade {
  from {opacity: 0; transform: translateY(18px);} 
    to {opacity: 1; transform: translateY(0);}
}

.gats-value, .gats-usecase {width: min(100%, 1180px); margin: 0 auto; padding: clamp(76px, 8vw, 112px) 20px;}
.gats-section-head {margin-bottom: clamp(42px, 5vw, 64px);}
.gats-section-head p {margin: 0 0 10px; color: rgb(0, 160, 255); font-size: 14px; font-weight: 900; line-height: 1.2;}
.gats-section-head h2 {margin: 0; color: var(--gats-text); font-size: clamp(28px, 3vw, 42px); font-weight: 900; line-height: 1.25; letter-spacing: -0.055em;}
.gats-value-list {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 34px); margin: 0; padding: 0; list-style: none;}
.gats-value-card {cursor: pointer; display: flex; justify-content: center;}
.gats-value-card__circle {position: relative; width: min(100%, 174px); aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid rgba(110, 180, 63, 0.65); background: radial-gradient(circle, #fff 0%, #fff 55%, rgba(242, 250, 237, 0.9) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;}
.gats-value-card__circle::before, .gats-value-card__circle::after {content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid rgba(110, 180, 63, 0.25);}
.gats-value-card__circle::after {inset: 18px; border-color: rgba(110, 180, 63, 0.16);}
.gats-value-card__dot {position: absolute; inset: -1px; border-radius: 50%; animation: gatsDotRotate 5s linear infinite;}
.gats-value-card__dot::before {content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gats-green); box-shadow: 0 0 12px rgba(110, 180, 63, 0.55); transform: translateX(-50%);}
.gats-value-card strong {position: relative; z-index: 2; color: var(--gats-green-dark); font-size: 20px; font-weight: 900; line-height: 1.35; letter-spacing: -0.045em;}
.gats-value-card p {position: relative; z-index: 2; margin: 0; color: var(--gats-green-dark); font-size: 13px; font-weight: 700; line-height: 1.55; letter-spacing: -0.045em; word-break: keep-all;}
@keyframes gatsDotRotate {
    to {transform: rotate(360deg);}
}

.gats-usecase {padding-top: clamp(34px, 4vw, 60px);}
.gats-usecase-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none;}
.gats-usecase-card {cursor: pointer; min-height: 136px; padding: 26px 28px; border: 1px solid #c9e4f2; border-radius: 4px; background: linear-gradient(135deg, #f7fcff 0%, #fff 100%); display: flex; align-items: center; justify-content: space-between; gap: 22px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}
.gats-usecase-card:nth-child(2), .gats-usecase-card:nth-child(5) {border-color: #ccd7ff; background: linear-gradient(135deg, #f8faff 0%, #fff 100%);}
.gats-usecase-card:nth-child(3), .gats-usecase-card:nth-child(6) {border-color: #ded1f5; background: linear-gradient(135deg, #fcf9ff 0%, #fff 100%);}
.gats-usecase-card span {display: block; margin-bottom: 8px; color: #555; font-size: 14px; font-weight: 700;}
.gats-usecase-card strong {display: block; margin-bottom: 16px; color: var(--gats-text); font-size: 22px; font-weight: 900; letter-spacing: -0.055em;}
.gats-usecase-card p {margin: 0; color: #6a88c8; font-size: 13px; font-weight: 700; line-height: 1.55; letter-spacing: -0.04em; word-break: keep-all;}
.gats-usecase-card img {flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; opacity: 0.72;}

@media (hover: hover) {
  .gats-usecase-card:hover {transform: translateY(-6px); border: 2px solid #c9e4f2; box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);}
  .gats-value-card__circle {transition: transform 0.25s ease, box-shadow 0.25s ease;}
  .gats-value-card__circle:hover {transform: translateY(-6px); box-shadow: 0 18px 36px rgba(110, 180, 63, 0.15);}
}


/*===============================================================================================================================*/
/********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
/* 서비스 GN-DMS 메뉴 메인 :: 섹션 01 */
.dms-section-head {text-align: center;}
.dms-section-head p {margin: 0 0 10px; color: rgb(0, 160, 255); font-size: 24px; font-weight: 900; line-height: 1.2;}
.dms-section-head h2 {margin: 0; color: var(--text); font-size: clamp(30px, 3.6vw, 60px); font-weight: 600; line-height: 1.22; letter-spacing: -0.030em;}
.dms-section-head span {display: block; margin-top: 20px; color: var(--dms-muted); font-size: clamp(14px, 1.2vw, 19px); font-weight: 500; line-height: 1.7; letter-spacing: -0.04em; word-break: keep-all;}
.dms-section-head--dark h2, .dms-section-head--dark span {color: #fff;}

/* Hero / Tech */
.dms-tech-hero {position: relative; padding: clamp(78px, 9vw, 130px) 20px clamp(88px, 10vw, 150px); background: #000; color: #fff; overflow: hidden;}
.dms-tech-hero__bg {position: absolute; inset: 0; background: radial-gradient(circle at 78% 7%, rgba(255, 255, 255, 0.18), transparent 28%), radial-gradient(circle at 10% 38%, rgba(255, 255, 255, 0.12), transparent 32%), radial-gradient(circle at 52% 100%, rgba(0, 215, 255, 0.1), transparent 34%),#000;}
.dms-tech-hero__bg::before, .dms-tech-hero__bg::after {content: ""; position: absolute; inset: -20%; opacity: 0.4; background-image: radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1.6px); background-size: 24px 24px; transform: rotate(-18deg); animation: dmsParticleMove 18s linear infinite;}
.dms-tech-hero__bg::after {opacity: 0.18; background-size: 42px 42px; transform: rotate(16deg); animation-duration: 26s;}

.dms-tech-hero__inner {position: relative; z-index: 2; width: min(100%, 1100px); margin: 0 auto;}
.dms-hero-tabs {display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 20px;}
.dms-hero-tabs a {display: inline-flex; align-items: center; justify-content: center; min-width: 118px; min-height: 26px; padding: 10px 50px; border: 1px solid rgba(255,255,255,0.75); border-radius: 999px; color: #fff; font-size: 17px; font-weight: 400; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.dms-hero-tabs a:hover {background: #fff; color: #000;}
.dms-main-copy {margin-top: clamp(90px, 12vw, 150px); padding: clamp(54px, 7vw, 92px) clamp(28px, 6vw, 80px); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(0,0,0,0.54); backdrop-filter: blur(10px); text-align: center;}
.dms-main-copy h3 {margin: 0 0 18px; color: #fff; font-size: clamp(25px, 3vw, 40px); font-weight: 900; line-height: 1.3; letter-spacing: -0.055em;}
.dms-main-copy p {margin: 0 auto; max-width: 720px; color: rgba(255,255,255,0.78); font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; line-height: 1.8; letter-spacing: -0.04em; word-break: keep-all;}
.dms-tech-list {display: grid; gap: 28px; margin-top: 28px;}
.dms-tech-card {display: grid; grid-template-columns: 0.90fr 1.10fr; gap: 24px; min-height: 230px;}
.dms-tech-card__text {cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(0,0,0,0.74); overflow: hidden;}
.dms-tech-card__text span {margin-bottom: auto; color: rgba(255,255,255,0.2); font-size: 22px; font-weight: 900; line-height: 1;}
.dms-tech-card__text p {margin: 0 0 14px; color: rgba(255,255,255,0.58); font-size: 20px; font-weight: 500; line-height: 1.65; letter-spacing: -0.04em; word-break: keep-all;}
.dms-tech-card__text h3 {margin: 0; color: #fff; font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.3; letter-spacing: -0.055em;}
.dms-tech-card__image {margin: 0; border-radius: 10px; overflow: hidden; background: #111;}
.dms-tech-card__image img {display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform 0.45s ease;}

/* Patent */
.dms-patent {padding: clamp(72px, 8vw, 110px) 0 clamp(70px, 8vw, 100px); background: #f3f5f9; overflow: hidden;}
.dms-patent-slider {margin-top: clamp(44px, 5vw, 68px); overflow: hidden;}
.dms-patent-track {display: flex; gap: 28px; width: max-content; margin: 0; padding: 0; list-style: none; animation: dmsPatentRolling 28s linear infinite;}
.dms-patent-track li {flex: 0 0 auto; width: clamp(132px, 13vw, 190px); aspect-ratio: 3 / 4.15; background: #fff; box-shadow: 0 14px 32px rgba(17,24,39,0.08);}
.dms-patent-track img {display: block; width: 100%; height: 100%; object-fit: cover;}
.dms-patent-slider:hover .dms-patent-track {animation-play-state: paused;}
@keyframes dmsPatentRolling {
  to {transform: translateX(calc(-50% - 14px));}
}

/* Method */
.dms-method {width: min(100%, 1500px); margin: 0 auto; padding: clamp(86px, 10vw, 140px) 20px clamp(40px, 12vw, 20px); background: #fff;}
.dms-method-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 4rem; gap: 20px;}
.dms-method-item {cursor: pointer; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 160px; padding: 28px 30px; border: 1px solid #e5e8ef; border-radius: 5px; background: #fff; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}
.dms-method-item h3 {margin: 0; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -0.04em;}
.dms-method-item p {max-height: 0; margin: 0; opacity: 0; overflow: hidden; transform: translateY(8px); color: #666; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -0.03em; transition: max-height 0.25s ease, margin-top 0.25s ease, opacity 0.25s ease, transform 0.25s ease;}
.dms-method-item img {padding: 12px; flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; transition: transform 0.25s ease;}
.dms-method-item h3, .dms-method-item p, .dms-method-item img {position: relative; z-index: 2; transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;}

.dms-method-item--featured {border-color: #00a0ff; background: linear-gradient(135deg, #f2f9fb 0%, #fff 72%); box-shadow: 0 16px 36px rgba(69, 183, 191, 0.14);}
.dms-method-item--featured::before {content: "POINT"; position: absolute; top: 15px; right: 29px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 11px; border-radius: 999px; background: #00a0ff; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.04em;}
.dms-method-item--featured h3 {color: #00a0ff;}
.dms-method-item--featured img {padding: 12px; border-radius: 16px; background: #e8f3f8;}

/* CTA */
.dms-cloud-cta {background: linear-gradient(90deg, #ff00a8 0%, #8b5cff 52%, #00cfff 100%); padding: 0 20px;}
.dms-cloud-cta__inner {width: min(100%, 1080px); min-height: 138px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; color: #fff;}
.dms-cloud-cta h2 {color: #ffffff; margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.3; letter-spacing: -0.055em;}
.dms-cloud-cta p {margin: 0; color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 600; line-height: 1.65; letter-spacing: -0.035em;}
.dms-cloud-cta__btn {flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 164px; height: 42px; padding: 0 24px; border: 1px solid rgba(255,255,255,0.72); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease;}
.dms-cloud-cta__btn:hover {background: #fff; color: #111;}
.dms-bottom-banner {position: relative; padding: clamp(54px, 6vw, 82px) 20px; background: radial-gradient(circle at 20% 30%, rgba(255,0,168,0.28), transparent 25%), radial-gradient(circle at 80% 28%, rgba(0,215,255,0.26), transparent 24%), #030303; overflow: hidden;}
.dms-bottom-banner__inner {position: relative; z-index: 2; width: min(100%, 1080px); margin: 0 auto; text-align: center; color: #fff;}
.dms-bottom-banner p {margin: 0 0 12px; color: #d73aff; font-size: clamp(24px, 3vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em;}
.dms-bottom-banner h2 {margin: 0 0 24px; color: rgba(255,255,255,0.9); font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; line-height: 1.5;}
.dms-bottom-banner a {display: inline-flex; align-items: center; justify-content: center; min-width: 152px; height: 42px; border: 1px solid rgba(255,255,255,0.55); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none;}

.case-section {padding: clamp(72px, 8vw, 120px) 20px clamp(84px, 9vw, 140px); background: var(--white); color: var(--text);}
.case-section__inner {width: min(100%, 1500px); margin: 0 auto;}
.case-heading {margin-bottom: clamp(58px, 7vw, 92px); text-align: center;}
.case-heading__title {margin: 0; color: var(--text); font-size: clamp(30px, 3vw, 42px); font-weight: 900; line-height: 1.2; letter-spacing: -0.045em;}
.case-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2vw, 36px); margin: 0; padding: 0; list-style: none;}
.case-card {min-width: 0;}
.case-card__link {display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;}
.case-card__content {position: relative; min-height: 198px; padding-top: 38px; border-top: 1px solid var(--case-line);}
.case-card__category {margin: 0 0 18px; color: var(--case-text); font-size: 15px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em;}
.case-card__title {display: -webkit-box; min-height: 104px; margin: 0; overflow: hidden; color: var(--text); font-size: clamp(21px, 1.65vw, 28px); font-weight: 800; line-height: 1.48; letter-spacing: -0.055em; word-break: keep-all; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.case-card__thumb {position: relative; margin: 0; aspect-ratio: 1.58 / 1; overflow: hidden; background: #f3f4f6;}
.case-card__thumb::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 42%,rgba(0, 0, 0, 0.18) 100%); opacity: 0; transition: opacity 0.28s ease;}
.case-card__thumb img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease, filter 0.45s ease;}

@media (hover: hover) {
  .dms-tech-card:hover .dms-tech-card__image img {transform: scale(1.06);}
  .dms-tech-card__text {transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;}
  .dms-tech-card:hover .dms-tech-card__text {border-color: rgba(0, 215, 255, 0.55); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0, 215, 255, 0.1);}
  .dms-tech-card:hover .dms-tech-card__text span {color: rgba(0, 215, 255, 0.55);}

  .dms-method-item {transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;}
  .dms-method-item:hover {background: #050505; color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(17, 24, 39, 0.12);}
  .dms-method-item:hover h3, .dms-method-item:hover p {color: #fff;}
  .dms-method-item:hover img {opacity: 0; transform: translateY(24px);}
  .dms-method-item:hover p {max-height: 80px; margin-top: 12px; opacity: 1; transform: translateY(0);}

  .dms-bottom-banner a:hover {color: #fff; border-color: rgba(255, 255, 255, 0.9); transform: translateY(-3px); transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease; box-shadow: 0 14px 34px rgba(0, 207, 255, 0.25), 0 8px 22px rgba(255, 0, 168, 0.18);}
  .dms-bottom-banner a:hover::before {opacity: 1;}
  .dms-bottom-banner a:hover::after {left: 125%;}

  .case-card__link {transition: transform 0.28s ease;}
  .case-card__content {transition: border-color 0.28s ease, transform 0.28s ease;}
  .case-card__category, .case-card__title {transition: color 0.28s ease;}

  .case-card__link:hover {transform: translateY(-8px);}
  .case-card__link:hover .case-card__content {border-color: var(--case-point);}
  .case-card__link:hover .case-card__category, .case-card__link:hover .case-card__title {color: var(--case-point);}
  .case-card__link:hover .case-card__thumb::after {opacity: 1;}
  .case-card__link:hover .case-card__thumb img {transform: scale(1.06); filter: brightness(0.92);}
}

@media (hover: none) {
  .dms-method-item p {max-height: none; margin-top: 10px; opacity: 1; transform: none;}
}

@media (prefers-reduced-motion: reduce) {
  /********* 1번 서비스 GATS 메뉴 :: service_gats *********/
  .gats-value-card__dot {animation: none;}
  .gats-orbit-slide, .gats-feature-panel, .gats-usecase-card, .gats-value-card__circle {transition: none; animation: none;}

  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .dms-tech-hero__bg::before, .dms-tech-hero__bg::after, .dms-patent-track, .dms-tech-card__image img, .dms-method-item {animation: none; transition: none;}
}


/*===============================================================================================================================*/
/********* 3번 서비스 AI 메뉴 :: service_ai *********/
/* 서비스 AI 메뉴 메인 :: 섹션 01 */
.project-page {width: 100%; overflow: hidden; background: #fff; color: #111;}
.project-inner, .tech-inner {width: min(100% - 80px, 1300px); margin: 0 auto;}
.section-label {margin-bottom: 22px; color: #111; font-size: 12px; font-weight: 800; letter-spacing: -0.02em;}
.section-title {margin-bottom: 34px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1;}
.section-title.white {color: #fff;}
.section-label-1 {display: block; margin-bottom: 18px; color: #009ee8; font-size: 25px; font-weight: 600;}

.project-intro {padding: clamp(90px, 10vw, 30px) 0 clamp(70px, 8vw, 110px); background: #fff;}
.project-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: clamp(54px, 7vw, 88px);}
.project-heading h2 {margin: 0; font-size: clamp(30px, 4.3vw, 52px); font-weight: 800; line-height: 1.32; letter-spacing: -0.06em; color: #111;}
.project-more {position: relative; flex: 0 0 auto; width: 36px; height: 36px; margin-top: 64px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.project-more::before, .project-more::after {content: ""; position: absolute; left: 50%; top: 50%; background: #111; transform: translate(-50%, -50%);}
.project-more::before {width: 12px; height: 2px;}
.project-more::after {width: 2px; height: 12px;}
.project-more:hover {transform: translateY(-4px) rotate(90deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);}

.portfolio-showcase {display: grid; grid-template-columns: 0.68fr 1.42fr; gap: 16px;}
.portfolio-card {position: relative; min-height: clamp(360px, 36vw, 520px); padding: clamp(36px, 4vw, 58px); border-radius: 18px; background: #dddfe85e; overflow: hidden;}
.portfolio-card span {display: block; margin-bottom: clamp(70px, 8vw, 110px); color: #333; font-size: 12px; font-weight: 800;}
.portfolio-card strong {display: block; margin-bottom: 28px; color: rgba(0, 0, 0, 0.12); font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -0.06em;}
.portfolio-card h3 {margin: 0; color: #111; font-size: clamp(26px, 3vw, 37px); font-weight: 800; letter-spacing: -0.06em;}
.portfolio-meta {position: absolute; left: clamp(30px, 4vw, 72px); right: clamp(30px, 4vw, 58px); bottom: 28px; display: flex; flex-wrap: wrap; gap: 14px;}
.portfolio-meta em {color: rgba(0, 0, 0, 0.28); font-size: 10px; font-weight: 700; font-style: normal;}
.portfolio-image {min-height: clamp(360px, 36vw, 520px); border-radius: 18px; overflow: hidden;}
.portfolio-image img {width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.8s ease;}
.portfolio-image:hover img {transform: scale(1.045);}

.tech-detail {position: relative; padding: clamp(96px, 10vw, 150px) 0 clamp(110px, 12vw, 180px); color: #fff; background: #020609; overflow: hidden;}
.tech-bg {position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 124, 163, 0.34), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(0, 189, 255, 0.2), transparent 30%),
    linear-gradient(180deg, #111a20 0%, #030607 42%, #020202 100%);
}
.tech-bg::before {content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px); background-size: 18px 18px; opacity: 0.28; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.65) 45%, #000 100%);}
.tech-bg::after {content: ""; position: absolute; left: 50%; bottom: -16%; width: 110%; height: 42%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 191, 255, 0.28), transparent 62%); filter: blur(28px);}
.tech-inner {position: relative; z-index: 2;}
.tech-hero {position: relative; min-height: clamp(260px, 34vw, 460px); display: grid; place-items: center; margin-bottom: clamp(70px, 9vw, 120px);}
.tech-device {position: absolute; left: 50%; top: 45%; width: min(780px, 78vw); transform: translate(-50%, -50%); opacity: 0.55; filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));}
.tech-device img {width: 100%; display: block;}
.tech-title {position: relative; z-index: 2; text-align: center;}
.tech-title h2 {margin: 0 0 18px; font-size: clamp(36px, 5.2vw, 70px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff;}
.tech-title p {margin: 0; color: rgba(255, 255, 255, 0.72); font-size: clamp(14px, 1.6vw, 24px); font-weight: 500;}
.blue_txt{display: inline; color: #009ee8;}

.tech-content {margin-bottom: clamp(86px, 10vw, 140px);}
.tech-info {display: grid; grid-template-columns: 0.96fr 1.04fr; align-items: stretch; margin-bottom: 10rem;}
.tech-photo {min-height: 300px; overflow: hidden;}
.tech-photo img {width: 100%; height: 100%; display: block; object-fit: cover;}
.tech-list {display: grid; align-content: stretch; gap: 20px;}
.tech-group {position: relative; padding: clamp(26px, 3vw, 38px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)); border: 1px solid rgba(255, 255, 255, 0.09); overflow: hidden; backdrop-filter: blur(10px);}
.tech-group::before {content: ""; position: absolute; right: -80px; top: -80px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 191, 255, 0.25), transparent 68%); opacity: 0.8; pointer-events: none;}
.tech-group::after {content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, #38d6ff, rgba(56, 214, 255, 0)); opacity: 0.9;}
.tech-group__head {position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 22px;}
.tech-group__head span {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(56, 214, 255, 0.14); color: #63e4ff; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(99, 228, 255, 0.32);}
.tech-group__head h3 {margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.04em;}
.tech-chip-grid {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.tech-chip {position: relative; min-height: 92px; padding: 18px 16px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid rgba(99, 228, 255, 0.38); background: linear-gradient(145deg, rgba(0, 156, 255, 0.34), rgba(0, 0, 0, 0.18)), rgba(255, 255, 255, 0.11); transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease; background: rgba(255, 255, 255, 0.08); border-image: linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%) 1; cursor: pointer;}
.tech-chip em {color: rgba(255, 255, 255, 0.8); font-size: 15px; font-weight: 800; font-style: normal;}
.tech-chip strong {color: #fff; font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; letter-spacing: -0.04em;}
.tech-usecase-grid {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.tech-usecase {position: relative; min-height: 118px; padding: 20px 16px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); cursor: pointer; transition: transform 0.32s ease, background 0.32s ease, border-color 0.32s ease;}
.tech-usecase::before {content: ""; position: absolute; right: -28px; top: -28px; width: 78px; height: 78px; border-radius: 50%; background: rgba(99, 228, 255, 0.07); filter: blur(4px);}
.tech-usecase:hover {transform: translateY(-8px); border-color: rgba(99, 228, 255, 0.38); background: linear-gradient(145deg, rgba(0, 156, 255, 0.34), rgba(0, 0, 0, 0.18)),rgba(255, 255, 255, 0.11);}
.tech-usecase em {position: relative; z-index: 1; margin-bottom: 12px; color: rgba(99, 228, 255, 0.74); font-size: 13px; font-weight: 500; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em;}
.tech-usecase strong {position: relative; z-index: 1; color: #fff; font-size: clamp(16px, 1.8vw, 22px); font-weight: 800; line-height: 1.35; letter-spacing: -0.05em;}

.feature-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.feature-card {position: relative; min-height: 250px; padding: clamp(30px, 3.2vw, 42px); background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; transition: transform 0.32s ease, background 0.32s ease, border-color 0.32s ease; cursor: pointer;}
.feature-card::before {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 194, 255, 0.14), transparent 52%); opacity: 0; transition: opacity 0.32s ease;}
.feature-card:hover {transform: translateY(-10px); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.18);}
.feature-card:hover::before {opacity: 1;}
.feature-icon {position: absolute; right: 34px; top: 34px; width: 62px; height: 62px; opacity: 0.72;}
.feature-icon img {width: 100%; height: 100%; object-fit: contain;}
.feature-card h3 {position: relative; z-index: 1; margin: 0 0 58px; color: #fff; font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; line-height: 1.45; letter-spacing: -0.04em;}
.feature-card p {position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.75; word-break: keep-all;}

.application-layout {display: flex; gap: 8px; width: 100%; height: clamp(320px, 34vw, 655px); overflow: hidden; margin-bottom: 10rem;}
.application-card {position: relative; flex: 0 0 86px; min-width: 0; height: 100%; padding: 0; border: 0; overflow: hidden; background: #111; cursor: pointer; text-align: left; appearance: none; -webkit-appearance: none; 
  transition:
    flex-basis 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    flex-grow 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    filter 0.35s ease,
    transform 0.35s ease;
}
.application-card.is-active {flex: 1 1 auto; cursor: default;}
.application-card:not(.is-active) {opacity: 0.88;}
.application-card:not(.is-active):hover {opacity: 1; flex-basis: 108px;}
.application-card img {
  border: 2px solid rgba(167, 167, 167, 0.38); border-image: linear-gradient(to top, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%) 1;
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease,
    opacity 0.45s ease;
}
.application-card::after {content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 48%);
  transition: opacity 0.45s ease;
}
.application-card:not(.is-active) img {filter: brightness(0.62) saturate(0.88);}
.application-card:not(.is-active):hover img {transform: scale(1.08); filter: brightness(0.8) saturate(1);}
.application-card.is-active img {transform: scale(1); filter: brightness(1) saturate(1.05);}
.application-text {position: absolute; left: clamp(28px, 4vw, 44px); bottom: clamp(26px, 3vw, 42px); z-index: 3; max-width: min(520px, 72%); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
.application-card.is-active .application-text {opacity: 1; transform: translateY(0); transition-delay: 0.24s;}
.application-text h3 {margin: 0 0 12px; color: #fff; font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em;}
.application-text p strong{color: rgba(255, 255, 255, 0.74); font-size: 22px; line-height: 2; word-break: keep-all; margin-bottom: 30px; display: block;}
.application-text p {margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 18px; line-height: 1.65; word-break: keep-all;}
.application-label {position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); color: #ffffff63; font-size: 18px; font-weight: 800; line-height: 1.45; text-align: center; white-space: nowrap; opacity: 1; transition: opacity 0.25s ease, transform 0.35s ease;}
.application-card.is-active .application-label {opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none;}
.application-card:not(.is-active):hover .application-label {transform: translateX(-50%) translateY(-5px);}
.application-layout.is-sliding .application-card img {transition-duration: 0.72s;}
.application-layout.is-sliding .application-card.is-active img {animation: appActiveImage 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;}
@keyframes appActiveImage {
  0% {
    transform: scale(1.08);
    filter: brightness(0.72) blur(2px);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) blur(0);
  }
}

.application-card:focus-visible {outline: 2px solid rgba(0, 210, 255, 0.95); outline-offset: -4px;}
.application-card:active:not(.is-active) {transform: scale(0.985);}
.application-item:focus-visible {outline: 2px solid rgba(0, 210, 255, 0.9); outline-offset: 4px;}
.application-item:active {transform: scale(0.985);}
.application-main:hover img {transform: scale(1.05);}
.application-main::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.72) 100%);}
.reveal-section, .tech-content, .feature-content, .application-content, .portfolio-showcase {opacity: 0; transform: translateY(48px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);}
.reveal-section.is-visible, .tech-content.is-visible, .feature-content.is-visible, .application-content.is-visible, .portfolio-showcase.is-visible {opacity: 1; transform: translateY(0);}
.feature-card, .tech-list article, .application-main, .application-side {will-change: transform;}

.tech-info .tech-photo {overflow: hidden;}
.tech-info .tech-photo img {transition: opacity 0.38s ease, transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), filter 0.38s ease;}
.tech-info .tech-list article {transition: opacity 0.38s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);}
.tech-info.is-changing .tech-photo img {opacity: 0; transform: scale(1.06); filter: blur(4px);}
.tech-info.is-changing .tech-list article {opacity: 0; transform: translateY(18px);}
.tech-info.is-changed .tech-photo img {animation: techInfoPhotoIn 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;}
.tech-info.is-changed .tech-list article {animation: techInfoTextIn 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;}
.tech-info.is-changed .tech-list article:nth-child(2) {animation-delay: 0.08s;}
.tech-info.is-changed .tech-list article:nth-child(3) {animation-delay: 0.16s;}
@keyframes techInfoPhotoIn {
  0% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(4px);
  }

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

@keyframes techInfoTextIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

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



/************** 000. 반응형 대응 ************/
@media screen and (max-width: 1300px) {
  /********* 3번 서비스 AI 메뉴 :: service_ai *********/
  .project-inner, .tech-inner {width: calc(100% - 80px);}
}

@media screen and (max-width: 1280px) {
  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .case-section__inner {width: min(100%, 1180px);}
  .case-card__content {min-height: 190px;}
  .case-card__title {font-size: 23px;}
}

@media screen and (max-width: 1100px) {
   /********* 1번 서비스 GATS 메뉴 :: service_gats *********/
  .gats-value-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .gats-usecase-list {grid-template-columns: repeat(2, minmax(0, 1fr));}

  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .dms-method-grid {grid-template-columns: 1fr;}
}

@media screen and (max-width: 1024px) {
  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .case-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 28px;}
  .case-card__content {min-height: 170px; padding-top: 28px;}
  .case-card__title {min-height: auto; font-size: 24px; -webkit-line-clamp: 2;}

  .gats-keyword-visual {width: min(440px, 52vw);}

  /********* 3번 서비스 AI 메뉴 :: service_ai *********/
  .project-inner, .tech-inner {width: calc(100% - 48px);}
  .project-heading {margin-bottom: 56px;}
  .portfolio-showcase {grid-template-columns: 0.8fr 1.2fr;}
  .tech-info {grid-template-columns: 1fr;}
  .tech-photo {min-height: 360px;}
  .tech-list article:hover {transform: translateY(-6px);}
  .feature-grid {gap: 14px;}
  .feature-card {min-height: 230px; padding: 30px 24px;}
  .application-layout {grid-template-columns: 1fr 78px 78px;}
}

@media screen and (max-width: 900px) {
  /********* 1번 서비스 GATS 메뉴 :: service_gats *********/
  .gats-hero__inner {grid-template-columns: 1fr; text-align: center;}
  .gats-feature__inner {grid-template-columns: 1fr; gap: 48px; align-items: start;}
  .gats-feature-nav {display: flex; overflow-x: auto; gap: 16px; padding-bottom: 8px;}
  .gats-feature-nav::before {display: none;}
  .gats-feature-nav__item {flex: 0 0 auto; min-width: 220px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 12px; background: rgba(255, 255, 255, 0.08);}
  .gats-feature-panel {max-width: none;}
  .gats-keyword-visual {display: none;}

  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .dms-tech-card {grid-template-columns: 1fr;}
  .dms-tech-card__text {min-height: 210px;}
  .dms-cloud-cta__inner {min-height: auto; padding: 34px 0; flex-direction: column; align-items: flex-start;}
  .dms-method-item--featured::before {content: "POINT"; position: absolute; top: 49px; right: 100px;}

  .dms-method-grid {position: relative; max-height: 620px; overflow-y: auto; overflow-x: hidden; grid-template-columns: 1fr; padding-right: 8px; border-top: 1px solid var(--dms-line); border-left: 0; border-radius: 18px;}
  .dms-method-grid::before, .dms-method-grid::after {content: ""; position: sticky; left: 0; z-index: 5; display: block; height: 28px; pointer-events: none;}
  .dms-method-grid::before {top: 0; margin-bottom: -28px; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);}
  .dms-method-grid::after {bottom: 0; margin-top: -28px; background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);}
  .dms-method-item {min-height: 130px; border-left: 1px solid var(--dms-line);}
}

@media screen and (max-width: 860px) {
  /********* 3번 서비스 AI 메뉴 :: service_ai *********/
  .project-heading {display: block;}
  .project-more {margin-top: 28px;}
  .portfolio-showcase {grid-template-columns: 1fr;}
  .portfolio-card, .portfolio-image {min-height: 360px;}
  .tech-hero {min-height: 360px;}
  .tech-device {width: 96vw; opacity: 0.46;}
  .tech-list {grid-template-columns: 1fr;}
  .feature-grid {grid-template-columns: 1fr;}
  .feature-card {min-height: 210px;}
  .application-layout {grid-template-columns: 1fr; min-height: auto;}
  .application-main {min-height: 340px;}
  .application-side {min-height: 160px;}
  .application-side strong {left: 32px; right: auto; bottom: 28px; transform: none; text-align: left; font-size: 18px;}
}

@media screen and (max-width: 640px) {
  /********* 1번 서비스 GATS 메뉴 :: service_gats *********/
  .gats-hero {padding: 58px 18px 64px;}
  .gats-hero__title {font-size: 34px;}
  .gats-hero__desc br {display: none;}
  .gats-orbit-slider {width: min(100%, 300px);}
  .gats-hero-control {gap: 12px;}
  .gats-feature {min-height: auto;}
  .gats-feature__inner {min-height: auto; padding: 56px 18px;}
  .gats-feature-nav__item {min-width: 210px;}
  .gats-feature-panel__eyebrow {font-size: 34px;}
  .gats-feature-panel h3 {margin-bottom: 28px; font-size: 28px;}
  .gats-feature-panel p:last-child {font-size: 14px; line-height: 1.8;}
  .gats-value, .gats-usecase {padding: 58px 18px;}
  .gats-value-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;}
  .gats-value-card__circle {width: min(100%, 150px);}
  .gats-value-card strong {font-size: 17px;}
  .gats-value-card p {font-size: 12px;}
  .gats-usecase-list {grid-template-columns: 1fr; gap: 16px;}
  .gats-usecase-card {min-height: auto; padding: 22px;}

  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .dms-tech-hero {padding: 58px 18px 74px;}
  .dms-main-copy {margin-top: 64px; padding: 38px 22px;}
  .dms-tech-list {gap: 20px;}
  .dms-tech-card__text {padding: 26px 22px;}
  .dms-tech-card__text p br {display: none;}
  .dms-tech-card__image img {min-height: 190px;}
  .dms-patent-track {gap: 18px; animation-duration: 22s;}
  .dms-method {padding: 68px 18px 92px;}
  .dms-method-item {min-height: auto; padding: 28px 18px; gap: 18px;}
  .dms-method-item img {width: 50px; height: 50px; padding: 12px;}
  .dms-cloud-cta {padding: 0 18px;}
  .dms-cloud-cta__btn {width: 100%;}

  .case-section {padding: 56px 18px 72px;}
  .case-heading {margin-bottom: 42px;}
  .case-heading__title {font-size: 28px;}
  .case-list {grid-template-columns: 1fr; gap: 42px;}
  .case-card__content {min-height: auto; padding-top: 24px;}
  .case-card__category {margin-bottom: 12px; font-size: 13px;}
  .case-card__title {font-size: 21px; line-height: 1.45; -webkit-line-clamp: 3;}
  .case-card__thumb {margin-top: 26px; aspect-ratio: 1.62 / 1;}

  /********* 3번 서비스 AI 메뉴 :: service_ai *********/
  .project-inner, .tech-inner {width: calc(100% - 32px);}
  .project-intro {padding: 70px 0 64px;}
  .project-heading h2 br {display: none;}
  .portfolio-card, .portfolio-image {min-height: 300px; border-radius: 14px;}
  .portfolio-card {padding: 30px 26px;}
  .portfolio-card span {margin-bottom: 58px;}
  .portfolio-meta {left: 26px; right: 26px; bottom: 24px;}
  .tech-detail {padding: 78px 0 96px;}
  .tech-hero {min-height: 300px; margin-bottom: 70px;}
  .tech-title h2 {font-size: 36px;}
  .section-title {margin-bottom: 24px;}
  .tech-photo {min-height: 240px;}
  .tech-list article {padding: 26px 22px;}
  .feature-card {padding: 28px 22px;}
  .feature-icon {right: 24px; top: 24px; width: 36px; height: 36px;}
  .application-main {min-height: 280px;}
  .application-text {left: 24px; bottom: 24px;}
  .application-text p {font-size: 14px; line-height: 1.6;}

  .application-layout {display: flex; flex-direction: column; gap: 8px; width: 100%; height: auto; min-height: 0; overflow: visible;}
  .application-card {flex: 0 0 86px; width: 100%; height: 86px; min-height: 86px; border-radius: 0; transition: flex-basis 0.68s cubic-bezier(0.22, 1, 0.36, 1), height 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.35s ease;}
  .application-card.is-active {flex-basis: 280px; height: 280px; min-height: 280px;}
  .application-card:not(.is-active):hover {flex-basis: 100px; height: 100px;}
  .application-card img {width: 100%; height: 100%; object-fit: cover;}
  .application-card::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.76) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 58%);}
  .application-text {left: 22px; right: 22px; bottom: 22px; max-width: none;}
  .application-text h3 {margin-bottom: 8px; font-size: 22px; line-height: 1.25;}
  .application-text p {font-size: 14px; line-height: 1.55;}
  .application-label {left: 22px; right: 22px; bottom: 22px; transform: none; text-align: left; font-size: 16px; line-height: 1.45;}
  .application-card:not(.is-active):hover .application-label {transform: translateY(-4px);}
  .application-card.is-active .application-label {transform: translateY(10px);}
}

@media screen and (max-width: 420px) {
  /********* 3번 서비스 AI 메뉴 :: service_ai *********/
  .project-inner, .tech-inner {width: calc(100% - 24px);}
  .portfolio-card, .portfolio-image {min-height: 260px;}
  .portfolio-card h3 {font-size: 26px;}
  .portfolio-card strong {font-size: 28px;}
  .tech-title h2 {font-size: 32px;}
  .application-main {min-height: 250px;}
}

@media screen and (max-width: 380px) {
  /********* 1번 서비스 GATS 메뉴 :: service_gats *********/
  .gats-value-list {grid-template-columns: 1fr;}
  .gats-value-card__circle {width: 168px;}
  .gats-usecase-card {align-items: flex-start;}
  .gats-usecase-card img {width: 46px; height: 46px;}

  /********* 2번 서비스 GN-DMS 메뉴 :: service_dms *********/
  .dms-hero-tabs a {width: 100%;}
  .dms-method-item {align-items: flex-start;}

  .case-heading__title {font-size: 25px;}
  .case-card__title {font-size: 19px;}
}