.specialized-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;

  .content-wrap {
    display: flex;
    height: 100%;
    padding-bottom: 100px;
    align-items: end;
    @media (min-width: 809px) {
      padding-bottom: 120px;
    }
  }

  .text-group {
    position: relative;
    z-index: 1;
    color: #fff;
    #specialized-page & {
      color: #2b2b3b;
    }

    h1 {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      opacity: 1;
      &.sp01 {
        font-weight: 100;
      }
      @media (min-width: 809px) {
        font-size: 1em;
      }
    }

    .sub-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      margin: 12px 0 0;
      #specialized-page & {
        font-family: "Audiowide", sans-serif;
      }
      @media (min-width: 809px) {
        display: block;
        font-size: 52px;
      }
      @media (min-width: 1440px) {
        font-size: 64px;
      }
    }

    .text {
      display: none;
      @media (min-width: 809px) {
        display: block;
        font-size: 20px;
        margin: 16px 0 0 0;
        line-height: 1.3;
        font-weight: 400;
      }
      @media (min-width: 1440px) {
        font-size: 24px;
        margin-left: 0;
      }
    }

    a {
      margin-top: 20px;
      @media (min-width: 809px) {
        margin-top: 16px;
      }
      @media (min-width: 1440px) {
        margin-top: 60px;
      }
    }
  }

  .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      #specialized-page & {
        object-position: 65% 50%;
      }
      #automotive-page & {
        object-position: 33% 50%;
        filter: brightness(0.8);
      }
      #defense-page & {
        object-position: 33% 50%;
      }
      #heavy-industry-page & {
        object-position: 50% 50%;
        filter: brightness(0.8);
      }
      #manufacturing-page & {
        object-position: 40% 50%;
        filter: brightness(0.8);
      }
    }

    .effect {
      position: absolute;
      width: 1200px;
      height: 500px;
      left: 50%;
      bottom: 0px;
      transform: translate(calc(-50% - 380px), 0);
      @media (min-width: 809px) {
        transform: translate(calc(-50% - 190px), 0);
        bottom: 40px;
      }
      @media (min-width: 1440px) {
        transform: translate(calc(-50%), 0);
        bottom: 90px;
      }

      .box-0,
      .box-1,
      .box-2,
      .box-3,
      .box-4,
      .box-5,
      .box-6,
      .box-7,
      .box-8 {
        position: absolute;
        animation-name: specialized-hero-effect;
        animation-iteration-count: infinite;
      }
      .box-0,
      .box-1,
      .box-3,
      .box-4,
      .box-6,
      .box-7,
      .box-8 {
        animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
      }
      .box-2,
      .box-5 {
        animation-timing-function: linear;
      }

      .box-0 {
        top: 207px;
        left: 850px;
        width: 36px;
        height: 7px;
        background-color: rgb(203, 164, 221);
        animation-duration: 2.1s;
        --offset: 47px;
      }

      .box-1 {
        top: 197px;
        left: 887px;
        width: 71px;
        height: 14px;
        background-color: rgb(230, 178, 172);
        animation-duration: 2s;
        --offset: 61px;
      }

      .box-2 {
        top: 159px;
        left: 661px;
        width: 46px;
        height: 5px;
        background-color: rgb(160, 73, 222);
        animation-duration: 2s;
        --offset: 80px;
      }

      .box-3 {
        top: 258px;
        left: 864px;
        width: 36px;
        height: 11px;
        background-color: rgb(245, 138, 115);
        animation-duration: 2.4s;
        --offset: 61px;
      }

      .box-4 {
        top: 364px;
        left: 796px;
        width: 70px;
        height: 6px;
        background-color: rgb(122, 129, 242);
        animation-duration: 1.8s;
        --offset: 66px;
      }

      .box-5 {
        top: 258px;
        left: 1029px;
        width: 91px;
        height: 7px;
        background-color: rgb(109, 170, 227);
        animation-duration: 1.4s;
        --offset: 80px;
      }

      .box-6 {
        top: 267px;
        left: 1024px;
        width: 27px;
        height: 7px;
        background-color: rgb(238, 168, 134);
        animation-duration: 2.1s;
        --offset: 30px;
      }

      .box-7 {
        top: 221px;
        left: 249px;
        width: 36px;
        height: 8px;
        background-color: rgb(154, 210, 211);
        animation-duration: 1.2s;
        --offset: 47px;
      }

      .box-8 {
        top: 233px;
        left: 320px;
        width: 36px;
        height: 8px;
        background-color: rgb(121, 116, 241);
        animation-duration: 1.7s;
        --offset: 47px;
      }
    }
  }
}

@keyframes specialized-hero-effect {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(var(--offset)); }
  100% { transform: translateX(0); }
}

#specialized-why {
  padding: 120px 0;
}

.specialized-explain {
  padding: 30px 0;
  #specialized-why & {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
  }
  @media (min-width: 809px) {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  h2 {
    color: rgb(141, 141, 165);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 15px;
    text-align: left;
    @media (min-width: 809px) {
      font-size: 16px;
      text-align: left;
      font-weight: 500;
    }
    @media (min-width: 1440px) {
      text-align: left;
    }
  }

  .text-group {
    @media (min-width: 1440px) {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      margin: 20px 0;
      @media (min-width: 809px) {
        font-size: 34px;
      }
      @media (min-width: 1440px) {
        font-size: 52px;
        margin: 0;
      }
    }

    .text {
      font-size: 16px;
      line-height: 1.5;
      color: rgb(89, 89, 114);
      @media (min-width: 809px) {
        font-size: 20px;
        width: 555px;
      }

      p {
        margin: 0;
      }
    }
  }
}

#specialized-why .versus {
  margin: 120px 0;

  .party {
    background-color: #f9f9fb;
    border-radius: 24px;
    box-shadow: 0.2963892874511657px 0.5927785749023314px 0.6627465945435319px -0.5px
        #0000000d,
      0.8071467382105766px 1.6142934764211532px 1.804834974456076px -1px #0000000d,
      1.7722021046647571px 3.5444042093295143px 3.962764375898594px -1.5px #0000000d,
      3.933884033639334px 7.867768067278668px 8.79643211481862px -2px #0000000d,
      10px 20px 22.360679774997898px -2.5px #0000000d,
      inset 0 0.12072530715522589px 0.12072530715522589px -1.875px #ffffffb0,
      inset 0 1px 1px -3.75px #ffffff40;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
    @media (min-width: 809px) {
      padding: 32px;
    }

    h3 {
      display: grid;
      font-size: 24px;
      line-height: 1.1;
      font-family: "Audiowide", sans-serif;
      font-weight: 300;
      margin: 0 auto;
      color: #fff;
      background-color: #2b2b3b;
      border-radius: 24px;
      overflow: hidden;
      max-width: 295px;
      border-radius: 24px;
      @media (min-width: 809px) {
        font-size: 32px;
        color: rgb(43, 43, 59);
        background-color: transparent;
        max-width: none;
        border-radius: 0;
      }

      b {
        position: relative;
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: end;
        justify-self: start;
        padding: 20px;
        @media (min-width: 809px) {
          padding: 0;
        }
      }

      img {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 1;
        @media (min-width: 809px) {
          display: none;
        }
      }
    }

    p {
      font-size: 16px;
      line-height: 1.4;
      color: rgb(89, 89, 114);
      margin: 20px 0;
      @media (min-width: 809px) {
        font-size: 18px;
        margin: 15px 0 34px;
      }
    }

    ul {
      display: none;
      --progress: 0%;
      @media (min-width: 809px) {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }

      &:before,
      &:after {
        content: " ";
        position: absolute;
        top: 70px;
        left: 10px;
        right: 10px;
        height: 8px;
        background-color: #dbdbdb;
      }
      &:after {
        background: linear-gradient(90deg, #f0f0f4, #d12e2e);
        right: var(--progress);
      }
      .specialized-ai &:after {
        background: linear-gradient(90deg, #dde3ff, #8599ff);
        right: var(--progress);
      }
    }

    li {
      position: relative;
      z-index: 1;
      width: 140px;
      padding: 22px 0;
      text-align: center;
      font-size: 14px;
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
        height: 140px;
        content: " ";
        background: #fff;
        border: 1px solid #e7e7ee;
        border-radius: 50%;
      }
      .specialized-ai &:before {
        background-color: #dde3ff;
        border-color: #dde3ff;
      }
      .specialized-ai &.das:before {
        display: none;
      }

      &.das {
        width: 204px;
        padding-top: 43px;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #5465e4;
          color: #fff;
          font-size: 15px;
          font-weight: 600;
          height: 60px;
          border-radius: 10px;
          margin-bottom: 7px;
        }
      }

      img {
        position: relative;
        z-index: 1;
        width: 100px;
        display: block;
        margin: 0 auto 30px;
      }
    }

    .total {
      background-color: #f0f0f4;
      border-radius: 12px;
      margin: 0;
      padding: 10px 0px;
      text-align: center;
      font-size: 60px;
      line-height: 1.3;
      color: #2b2b3b;
      font-weight: 600;
      .specialized-ai & {
        background-color: #f2f2ff;
        color: rgb(84, 101, 228);
      }
      @media (min-width: 809px) {
        font-size: 79px;
      }
    }
  }

  .vs {
    margin: 30px 0;
    text-align: center;
    font-family: "Audiowide", sans-serif;
    font-size: 33px;
    @media (min-width: 809px) {
      margin: 50px 0;
      font-size: 42px;
    }
  }
}

#smart-ai {
  position: relative;
  height: 450px;
  @media (min-width: 810px) {
    height: 844px;
  }

  .content-wrap {
    display: flex;
    align-items: end;
    height: 100%;
    padding-bottom: 80px;
  }

  p {
    position: relative;
    z-index: 1;
    color: #fff;
    line-height: 1.3;
    font-size: 32px;
    margin: 0;
    font-weight: 500;
    @media (min-width: 809px) {
      font-size: 52px;
    }
    @media (min-width: 1440px) {
      font-size: 64px;
    }
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#what-is-das {
  color: #2b2b3b;
  background-color: #fff;
  @media (min-width: 809px) {
    color: inherit;
    background-color: #f9f9fb;
  }

  .content-wrap {
    padding-top: 40px;
    padding-bottom: 20px;
    @media (min-width: 809px) {
      padding-top: 120px;
      padding-bottom: 120px;
    }
  }

  h2 {
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    @media (min-width: 810px) {
      font-size: 16px;
      font-weight: 400;
      color: rgb(84, 101, 228);
    }
    @media (max-width: 809px) {
      font-size: 14px;
      color: rgb(141, 141, 165);
      font-weight: 400;
    }
  }

  .text-group {
    @media (min-width: 809px) {
      margin-top: 20px;
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 40px;
    }

    .title {
      font-size: 24px;
      margin: 8px 0;
      @media (min-width: 809px) {
        margin: 0;
        flex-shrink: 0;
        width: 260px;
        font-size: 34px;
        font-weight: 600;
        line-height: 1.3;
      }
      @media (min-width: 1440px) {
        width: 400px;
        font-size: 52px;
      }
    }

    .text {
      font-size: 16px;
      opacity: 0.7;
      @media (min-width: 809px) {
        font-size: 20px;
        opacity: 1;
        color: rgb(89, 89, 114);
        max-width: 690px;
      }

      p {
        margin: 0;
      }
    }
  }

  .diagram {
    margin: 40px 0;
    text-align: center;
    border-radius: 60px;
    overflow: hidden;

    img {
      display: block;
      max-width: 100%;
      max-height: 300px;
      margin: 0 auto;
      @media (min-width: 809px) {
        display: none;
      }
    }

    dotlottie-player {
      display: none;
      @media (min-width: 809px) {
        display: block;
      }
    }
  }
}

#das-technology {
  .content-wrap {
    padding-top: 200px;
    padding-bottom: 60px;

    @media (max-width: 809px) {
      padding-top: 80px;
    }
  }

  h2 {
    margin: 0 0 1em;
    font-size: 24px;
    font-weight: 500;
    @media (min-width: 809px) {
      font-size: 32px;
    }
    @media (min-width: 1440px) {
      font-size: 50px;
    }
  }
}

.sticky-grid {
  display: grid;
  grid-template: auto / 1fr;
  @media (min-width: 809px) {
    grid-template: 1fr 1fr 1fr / 320px 1fr;
    max-width: 800px;
    margin: 0 auto;
  }
  @media (min-width: 1100px) {
    grid-template: 1fr 1fr 1fr / 480px 1fr;
  }
  @media (min-width: 1440px) {
    max-width: none;
    grid-template: 1fr 1fr 1fr / 320px 480px 1fr;
  }

  .title {
    @media (min-width: 809px) {
      display: none;
    }
    @media (min-width: 1440px) {
      display: block;
      grid-row: 1 / 4;
      grid-column: 1 / 2;
      padding-top: 200px;
    }
  }

  h3 {
    margin: 40px 0 20px;
    width: 220px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #2b2b3b;
    @media (min-width: 1440px) {
      --top: 400px;
      --margin-top: 0px;
      --total-height: 520px;

      color: rgb(141, 141, 165);
      margin-top: var(--margin-top);
      margin-bottom: calc(var(--total-height) - var(--margin-top));
      font-size: 20px;
      position: sticky;
      top: calc(var(--top) + var(--margin-top));
      .item1 & {
        color: #2b2b3b;
        font-weight: 600;
      }
      .item2 & {
        color: rgb(141, 141, 165);
      }
      .item3 & {
        color: rgb(141, 141, 165);
      }

      .title:nth-child(4) & {
        --margin-top: 40px;
        .item1 & {
          color: rgb(141, 141, 165);
        }
        .item2 & {
          color: #2b2b3b;
          font-weight: 600;
        }
        .item3 & {
          color: rgb(141, 141, 165);
        }
      }

      .title:nth-child(7) & {
        --margin-top: 80px;
        .item1 & {
          color: rgb(141, 141, 165);
        }
        .item2 & {
          color: rgb(141, 141, 165);
        }
        .item3 & {
          color: #2b2b3b;
          font-weight: 600;
        }
      }

      &:after {
        content: " ";
        width: 32px;
        height: 1px;
        overflow: hidden;
        display: inline-block;
        background-color: rgb(141, 141, 165);
        vertical-align: middle;
        margin-left: 10px;
      }
    }
  }

  .image {
    margin: 0;
    @media (min-width: 809px) {
      grid-row: 1 / 4;
      grid-column: 1 / 2;
    }
    @media (min-width: 1440px) {
      grid-row: 1 / 4;
      grid-column: 2 / 3;
    }

    img {
      aspect-ratio: 1;
      object-fit: cover;
      margin: 0 auto;
      display: block;
      border-radius: 24px;
      transition: all var(--spring);
      max-width: 100%;

      @media (min-width: 809px) {
        --top: 200px;
        --size: 320px;
        --width: var(--size);
        --height: var(--size);
        --margin-top: 0px;
        --total-height: 600px;
        --weight: 1;

        border-radius: 0;
        position: sticky;
        top: calc(var(--top) + var(--margin-top));
        width: calc(var(--width) * var(--weight));
        height: var(--height);
        margin-top: var(--margin-top);
        margin-bottom: calc(
          var(--total-height) - var(--margin-top) - var(--height)
        );
        .item2 & {
          --height: 30px;
          --weight: 0.95;
          opacity: 0.8;
        }
        .item3 & {
          --height: 20px;
          --weight: 0.8;
          opacity: 0.6;
        }

        .image:nth-child(5) & {
          --margin-top: calc(var(--size) + 20px);
          --height: 40px;
          --weight: 0.9;
          opacity: 0.7;
          .item2 & {
            --margin-top: 50px;
            --height: var(--size);
            --weight: 1;
            opacity: 1;
          }
          .item3 & {
            --margin-top: 40px;
            --height: 40px;
            --weight: 0.9;
            opacity: 0.7;
          }
        }

        .image:nth-child(8) & {
          --margin-top: calc(var(--size) + 80px);
          --height: 20px;
          --weight: 0.8;
          opacity: 0.6;
          .item2 & {
            --margin-top: calc(var(--size) + 70px);
            --height: 30px;
            --weight: 0.95;
            opacity: 0.7;
          }
          .item3 & {
            --margin-top: 100px;
            --height: var(--size);
            --weight: 1;
            opacity: 1;
          }
        }
      }
      @media (min-width: 1100px) {
        --size: 480px;
        --total-height: 780px;
      }
    }
  }

  .text-group {
    margin: 20px 0;
    @media (min-width: 809px) {
      margin: 200px 0 200px 40px;
      &:nth-child(3) {
        margin-top: 80px;
      }
      &:nth-child(9) {
        margin-bottom: 40px;
      }
    }
    @media (min-width: 1100px) {
      margin: 300px 0 300px 40px;
      &:nth-child(3) {
        margin-top: 140px;
      }
      &:nth-child(9) {
        margin-bottom: 0;
      }
    }
    @media (min-width: 1440px) {
      margin: 300px 0 300px 80px;
    }

    h4 {
      font-size: 20px;
      margin: 0;
      line-height: 1.3;
      font-weight: 600;
      @media (min-width: 809px) {
        font-size: 32px;
      }
      @media (min-width: 1440px) {
        font-size: 40px;
      }

      br {
        display: none;
        @media (min-width: 809px) {
          display: block;
        }
      }
    }

    p {
      font-size: 16px;
      margin: 10px 0 40px;
      font-weight: 300;
      @media (min-width: 809px) {
        font-size: 16px;
      }
      @media (min-width: 1440px) {
        font-size: 20px;
      }
    }

    h5 {
      margin: 0 0 5px;
      font-size: 1em;
    }

    ul {
      margin: 0 0 40px;
      padding: 0;
      list-style: none;
    }
  }
}

.specialized-offering {
  h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    @media (min-width: 809px) {
      font-size: 32px;
    }
    @media (min-width: 1440px) {
      font-size: 40px;
    }
  }

  video {
    display: block;
    width: 100%;
    margin: 130px auto 0;
    box-shadow: 0 0.7961918735236395px 1.4331453723425511px -0.375px #00000014,
      0 2.414506143104518px 4.346111057588132px -0.75px #00000017,
      0 6.382653521484461px 11.48877633867203px -1.125px #0000001c,
      0 20px 36px -1.5px #0000002e;
    @media (min-width: 928px) {
      width: 888px;
      border-radius: 12px;
    }
  }

  .feature {
    margin: 128px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-evenly;
  }

  li {
    position: relative;
    flex: 1;
    padding-top: 45px;
    min-width: 100%;
    @media (min-width: 809px) {
      min-width: calc(50% - 16px);
    }
    @media (min-width: 1440px) {
      min-width: calc(25% - 24px);
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 24px;
      height: 24px;
      content: " ";
      background: url(/images/specialized/offering-icon.png) no-repeat 0 0 /
        auto 200px;
    }
    &:nth-child(2)::before {
      background-position: -358px 0;
    }
    &:nth-child(3)::before {
      background-position: -716px 0;
    }
    &:nth-child(4)::before {
      background-position: -1074px 0;
    }
    #defense-page &:nth-child(1)::before {
      background-position: 0 -50px;
    }
    #defense-page &:nth-child(2)::before {
      background-position: -358px -50px;
    }
    #defense-page &:nth-child(3)::before {
      background-position: -716px -50px;
    }
    #defense-page &:nth-child(4)::before {
      background-position: -1074px -50px;
    }
    #defense-page &:nth-child(1)::before {
      background-position: 0 -50px;
    }
    #defense-page &:nth-child(2)::before {
      background-position: -358px -50px;
    }
    #defense-page &:nth-child(3)::before {
      background-position: -716px -50px;
    }
    #defense-page &:nth-child(4)::before {
      background-position: -1074px -50px;
    }
    #heavy-industry-page &:nth-child(1)::before {
      /* FIXME: 없어서 위에 아이콘 재사용 함 */
      background-position: -1074px -50px;
    }
    #heavy-industry-page &:nth-child(2)::before {
      background-position: 0 -100px;
    }
    #heavy-industry-page &:nth-child(3)::before {
      background-position: -358px -100px;
    }
    #heavy-industry-page &:nth-child(4)::before {
      background-position: -716px -100px;
    }
    #manufacturing-page &:nth-child(1)::before {
      background-position: 0 -150px;
    }
    #manufacturing-page &:nth-child(2)::before {
      background-position: -358px -150px;
    }
    #manufacturing-page &:nth-child(3)::before {
      background-position: -716px -150px;
    }
    #manufacturing-page &:nth-child(4)::before {
      background-position: -1074px -150px;
    }
  }

  h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
    word-break: keep-all;
    @media (min-width: 809px) {
      font-size: 24px;
    }
    @media (min-width: 1440px) {
      font-size: 28px;
    }
  }

  p {
    margin: 25px 0 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    @media (min-width: 809px) {
      font-size: 16px;
    }
    @media (min-width: 1440px) {
      font-size: 18px;
    }
  }
}

#how-works {
  .content-wrap {
    padding-top: 200px;
  }

  h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 1em;
    @media (min-width: 809px) {
      margin-bottom: 2em;
      font-size: 32px;
    }
    @media (min-width: 1440px) {
      font-size: 40px;
    }
  }
}

.industry-copyright {
  position: relative;
  display: flex;
  align-items: end;
  height: 400px;
  @media (min-width: 809px) {
    height: 480px;
  }
  @media (min-width: 1440px) {
    height: 520px;
  }

  p {
    position: relative;
    z-index: 2;
    color: #fff;
    line-height: 1.3;
    font-size: 32px;
    margin: 0 0 60px;
    font-weight: 600;
    #heavy-industry-page & {
      color: inherit;
    }
    @media (min-width: 809px) {
      font-size: 52px;
      margin-bottom: 100px;
    }
    @media (min-width: 1440px) {
      font-size: 64px;
      margin-bottom: 160px;
      #heavy-industry-page & {
        margin-bottom: 160px;
      }
    }
  }

  img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    &.heavy_bg {
      opacity: 0.4;
    }
    &.overlay {
      z-index: 1;
      object-position: 70% 100%;
      @media (min-width: 1000px) {
        object-fit: contain;
        opacity: 1;
      }
    }
  }
}

.specialized-closing {
  position: relative;
  height: 560px;
  overflow: hidden;
  &.side-video {
    height: auto;
    @media (min-width: 650px) {
      height: 560px;
    }
  }
  #specialized-page & {
    background: linear-gradient(0deg, #fbebff, #8097ff);
  }
  #defense-page &,
  #heavy-industry-page & {
    color: #fff;
  }
  #manufacturing-page & {
    background-color: rgb(240, 237, 231);
  }
  #control-page & {
    background-color: #f0e8d9;
  }

  /* 맥 Safari */
  @supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) {
    .your-section {
      background-color: #efe6d6;
    }
  }

  /* 윈도우 Chrome/Edge */
  @supports ((-webkit-appearance: none) or (-moz-appearance: none)) {
    .your-section {
      background-color: #f2eadc;
    }
  }
  #expert-page & {
    background-color: rgb(235, 243, 255);
  }

  .content-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    .side-video & {
      height: auto;
      align-items: start;
      flex-direction: column;
      @media (min-width: 650px) {
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .text-group {
    position: relative;
    z-index: 1;
  }

  h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    @media (min-width: 809px) {
      font-size: 40px;
    }
    @media (min-width: 1440px) {
      font-size: 60px;
    }
  }

  p {
    margin: 25px 0 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.7;
    @media (min-width: 809px) {
      font-size: 16px;
    }
    @media (min-width: 1440px) {
      font-size: 20px;
    }
  }

  video,
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  video {
    .side-video & {
      position: static;
      margin-top: 24px;
      height: auto;
      max-height: 200px;
      object-fit: contain;
      @media (min-width: 650px) {
        margin-top: 0;
        width: 50%;
        max-height: 100%;
      }
    }
    #automotive-page & {
      object-position: 50% 100%;
      opacity: 0.8;
    }
    #expert-page & {
      mix-blend-mode: multiply;
      mask-image: radial-gradient(farthest-side, black 80%, transparent 100%);
    }
    #control-page & {
      mask-image: radial-gradient(farthest-side, black 80%, transparent 100%);
    }
  }
  img {
    #specialized-page & {
      object-fit: contain;
      transform: scale(1) translate(13%, 40px);
      @media (max-width: 809px) {
        transform: scale(0.8) translate(20%, 200px);
      }
    }
  }
}

#defense-copyright {
  position: relative;
  max-height: 100dvh;
  text-align: center;

  p {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
    height: 50%;
    font-weight: 300;
    background: linear-gradient(180deg, #fff0 8%, #ffffffc7 51%);
    display: flex;
    align-items: center;
    justify-content: center;
    @media (min-width: 809px) {
      font-size: 32px;
    }
    @media (min-width: 1440px) {
      font-size: 40px;
    }
  }

  b {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(
      289deg,
      rgb(212, 220, 211) 0%,
      rgb(0, 0, 0) 72.0721%
    );
    display: inline-block;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: pre;
    font-size: 20vw;
    font-weight: 900;
    letter-spacing: -0.07px;
    @media (min-width: 1440px) {
      font-size: 288px;
    }
  }

  img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    object-fit: contain;
    object-position: 50% 50%;
  }
}

/* Agent pages */
#predictive-operations-page {
  background-color: #000;
  color: #fff;
}

.agent-hero {
  position: relative;

  .content-wrap {
    padding-top: 119px;
  }

  .text-group {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

    h1 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: rgb(84, 101, 228);
    }

    .sub-title {
      font-size: 32px;
      font-weight: 500;
      color: rgb(43, 43, 59);
      margin: 15px 0;
      line-height: 1.2;
      #predictive-operations-page & {
        color: #fff;
      }
      @media (min-width: 809px) {
        font-size: 64px;
      }
    }

    .text {
      font-size: 16px;
      line-height: 1.3;
      color: rgb(141, 141, 165);
      margin: 5px 0 30px;
      #predictive-operations-page& {
        color: rgba(255, 255, 255, 0.7);
      }
      @media (min-width: 809px) {
        font-size: 20px;
      }
    }
  }

  .media {
    position: relative;
    display: grid;

    .arcade {
      position: relative;
      z-index: 2;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 100%;
      max-width: 900px;
      margin: 40px auto 0;
      border: 8px solid #222;
      background-color: #222;
      border-radius: 15px;

      iframe {
        display: block;
      }
    }

    .effect {
      display: none;
      position: relative;
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 100%;
      height: 100%;
      @media (min-width: 956px) {
        display: flex;
      }

      .effect-start,
      .effect-end {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px;
        opacity: 0.5;
        z-index: 1;
        width: 50%;
        height: 500px;
        overflow: hidden;
      }
      .effect-end {
        direction: rtl;
      }

      .bar {
        width: 40px;
        border-radius: 32px;
        flex: none;
        overflow: hidden;
        position: relative;
        z-index: 1;
        margin: 81px auto;

        animation: move 1s linear infinite alternate;
      }

      .bar-338 { height: 338px; }
      .bar-278 { height: 278px; }
      .bar-253 { height: 253px; }
      .bar-232 { height: 232px; }
      .bar-228 { height: 228px; }
      .bar-217 { height: 217px; }
      .bar-205 { height: 205px; }
      .bar-169 { height: 169px; }
      .bg-1 { background-color: #0e3fb0; }
      .bg-2 { background-color: #305fcf; }
      .bg-3 { background-color: #4f79db; }
      .bg-4 { background-color: #6b92ed; }
      .bg-5 { background-color: #9cb9ff; }
      .bg-6 { background-color: #4a30cf; }
      .bg-7 { background-color: #634cd4; }
      .bg-8 { background-color: #836fe8; }
      .bg-9 { background-color: #b7a8ff; }
      .bg-10 { background-color: #e5a8ff; }
      .bg-11 { background-color: #bd69e0; }
      .bg-12 { background-color: #a046c7; }
      .bg-13 { background-color: #c746b6; }
      .bg-14 { background-color: #e364d2; }
      .bg-15 { background-color: #ff8ff0; }
      .bg-16 { background-color: #eb739f; }
      .bg-17 { background-color: #d95082; }
      .bg-18 { background-color: #b02e5d; }
      .bar:nth-child(1)  { --move: 80px; }
      .bar:nth-child(2)  { --move: -70px; }
      .bar:nth-child(3)  { --move: 60px; }
      .bar:nth-child(4)  { --move: -40px; }
      .bar:nth-child(5)  { --move: 30px; }
      .bar:nth-child(6)  { --move: -68px; }
      .bar:nth-child(7)  { --move: -68px; }
      .bar:nth-child(8)  { --move: 60px; }
      .bar:nth-child(9)  { --move: -50px; }
      .bar:nth-child(10) { --move: -68px; }
      .bar:nth-child(11) { --move: 40px; }
      .bar:nth-child(12) { --move: -60px; }
      .bar:nth-child(13) { --move: -40px; }
      .bar:nth-child(14) { --move: 50px; }
      .bar:nth-child(15) { --move: -30px; }
      .bar:nth-child(16) { --move: 40px; }
      .bar:nth-child(17) { --move: 40px; }
      .bar:nth-child(18) { --move: -40px; }
      .bar:nth-child(19) { --move: 30px; }
      .effect-end .bar:nth-child(1) { --move: -80px; }
      .effect-end .bar:nth-child(2) { --move: 70px; }
      .effect-end .bar:nth-child(3) { --move: -60px; }
      .effect-end .bar:nth-child(4) { --move: 40px; }
      .effect-end .bar:nth-child(5) { --move: -90px; }
      .effect-end .bar:nth-child(6) { --move: 68px; }
      .effect-end .bar:nth-child(7) { --move: 68px; }
      .effect-end .bar:nth-child(8) { --move: -90px; }
      .effect-end .bar:nth-child(9) { --move: -50px; }
      .effect-end .bar:nth-child(10) { --move: -68px; }
      .effect-end .bar:nth-child(11) { --move: 40px; }
      .effect-end .bar:nth-child(12) { --move: -60px; }
      .effect-end .bar:nth-child(13) { --move: -40px; }
      .effect-end .bar:nth-child(14) { --move: 50px; }
      .effect-end .bar:nth-child(15) { --move: -30px; }
      .effect-end .bar:nth-child(16) { --move: 40px; }
      .effect-end .bar:nth-child(17) { --move: 40px; }
      .effect-end .bar:nth-child(18) { --move: -40px; }
      .effect-end .bar:nth-child(19) { --move: 40px; }
    }
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100svh;
    #expert-page & {
      background: url(/images/specialized/expert/tbievSIg5KsT1JcV9fo8BfdwDQ.png)
        no-repeat 50% 50% / cover;
      filter: blur(0px);
      opacity: 0.55;
      mask-image: linear-gradient(#000 75%, transparent);
    }
    #control-page & {
      background: url(/images/specialized/control/bg.png) repeat 50% 50% / 42px
        42px;
    }

    video {
      object-fit: cover;
      width: 100%;
      height: 100%;
      mask-image: linear-gradient(#000 75%, transparent);
    }
  }
}

@keyframes move {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--move)); }
}

.agent-intro-text {
  .content-wrap {
    padding-top: 200px;
    padding-bottom: 200px;
    height: 2400px;
    @media (min-width: 1440px) {
      padding-top: 300px;
      padding-bottom: 300px;
    }
  }

  p {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    margin: 0 auto;
    max-width: 580px;
    min-height: 5em;
    @media (min-width: 809px) {
      font-size: 32px;
      max-width: 800px;
    }
    @media (min-width: 1440px) {
      width: 1200px;
    }
  }
}

.agent-persona {
  .content-wrap {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    @media (min-width: 809px) {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 1106px;
    }
  }

  li {
    width: 100%;
    margin: 0 auto 60px;
    max-width: 358px;
  }

  img {
    display: block;
    border-radius: 24px;
    overflow: hidden;
    object-fit: cover;
    aspect-ratio: 1;
    width: 100%;
  }

  h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    margin: 20px 0;
  }

  p {
    line-height: 1.5;
  }
}

.agent-copyright {
  position: relative;
  width: 100%;
  height: 100vh;

  .content-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-group {
    position: relative;
    color: #fff;
    text-align: center;
    z-index: 1;

    p {
      margin: 0;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.3;

      @media (min-width: 809px) {
        font-size: 34px;
      }
      @media (min-width: 1440px) {
        font-size: 48px;
        width: 800px;
        word-break: keep-all;
      }
    }
  }

  img,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.7);
    opacity: 0.5;
  }
  video {
    #predictive-operations-page & {
      opacity: 0.45;
    }
  }
}
.pre_video {
  filter: brightness(0.5);
}
.agent-architecture {
  #expert-page & {
    background-color: rgb(235, 243, 255);
  }

  .content-wrap {
    padding-top: 60px;
    padding-bottom: 80px;
    @media (min-width: 809px) {
      padding-top: 80px;
    }
    @media (min-width: 1440px) {
      padding-top: 160px;
      padding-bottom: 160px;
    }
  }

  h2 {
    font-size: 24px;
    font-weight: 400;
    color: rgb(43, 43, 59);
    margin: 0 0 80px;
    #predictive-operations-page & {
      color: #fff;
    }
    @media (min-width: 809px) {
      font-size: 32px;
    }
    @media (min-width: 1440px) {
      margin: 0 0 100px;
      font-size: 40px;
    }
  }

  .top,
  .middle,
  .bottom {
    max-width: 1120px;
    margin: 0 auto;
    animation: agent-architecture 2.3s ease-in-out infinite;
  }

  .top {
    aspect-ratio: 1 / 0.13;
    overflow: hidden;
    img {
      width: 100%;
      display: block;
    }
  }

  .middle,
  .bottom {
    aspect-ratio: 1 / 0.19;
    background-size: cover;
    background-position: 50% 48%;
    margin-top: 30px;
    animation-delay: 0.1s;
  }

  .bottom {
    aspect-ratio: 1 / 0.14;
    background-position: 50% 100%;
    animation-delay: 0.2s;
  }
}

@keyframes agent-architecture {
    0% { transform: translateY(0); }
   50% { transform: translateY(26px); }
  100% { transform: translateY(0); }
}

.pc_br {
  display: inline-block;
  @media (min-width: 809px) {
    display: block;
  }
  @media (min-width: 1440px) {
    display: block;
  }
}