@charset "utf-8";

:root {
  --main-color: #8b5cf6;
  --main-color2: #6d28d9;
  --ink: #111111;
  --muted: #666666;
  --white: #ffffff;
  --black: #000000;
  --soft-gray: #e2e2e2;
  --area-box-width: 166rem;
  --area-padding: 3rem;
  --area-padding-wide: 6rem;
  --header-height: 100px;
  --header-fixed-height: 100px;
  --ease-main: cubic-bezier(.7, 0, .2, 1);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --shadow-soft: 0 2.4rem 7rem rgba(0, 0, 0, .08);
  --shadow-violet: 0 1.4rem 3.8rem rgba(109, 40, 217, .2);
  --font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--muted);
  font-family: var(--font-family);
  word-break: keep-all;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body.menu-open {
  overflow: visible;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(139, 92, 246, .72);
  outline-offset: .4rem;
}

img,
video {
  display: block;
  max-width: 100%;
}

ul,
ol,
li,
p,
h1,
h2,
h3,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

.cm-accessibility a {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100000;
  width: 200px;
  padding: 10px 0;
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.cm-accessibility a:focus {
  top: 0;
}

#wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 320px;
}

#wrap.service-page {
  overflow: visible;
}

#wrap.about-page {
  overflow: visible;
}

.area-box {
  max-width: var(--area-box-width);
  margin: 0 auto;
  padding: 0 var(--area-padding);
}

.area-only-padding {
  margin: 0 auto;
  padding: 0 var(--area-padding-wide);
}

.full-height {
  min-height: 100vh;
}

.container-wrapper {
  position: relative;
  z-index: 2;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: var(--header-height);
  transition: height .3s, top .8s ease;
}

#header::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(5px);
  content: "";
  transform: translateY(-100%);
  transition: height .3s, transform .4s ease-in-out;
}

#header.top-fixed {
  position: fixed;
  height: var(--header-fixed-height);
}

#header.top-fixed::before {
  height: var(--header-fixed-height);
  transform: translateY(0);
}

#headerInnerWrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: var(--header-height);
  transition: height .3s;
}

#header.top-fixed #headerInnerWrap {
  height: var(--header-fixed-height);
}

#headerInner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  transition: height .3s;
}

#header.top-fixed #headerInner {
  height: var(--header-fixed-height);
}

.logo {
  position: relative;
  z-index: 100;
}

.logo a {
  display: flex;
  align-items: center;
  width: 128px;
  height: 68px;
}

.site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  transition: filter .3s, opacity .3s;
}

#header.top-fixed .site-logo-img {
  filter: none;
}

#header.open .site-logo-img {
  filter: invert(1);
}

#gnb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  text-align: center;
}

#gnb > ul {
  display: inline-flex;
  align-items: center;
}

#gnb > ul > li {
  position: relative;
}

#gnb > ul > li > a {
  position: relative;
  z-index: 100;
  display: block;
  padding: 0 3rem;
  color: var(--white);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: var(--header-height);
  transition: color .4s var(--ease-main), line-height .3s;
}

#header.top-fixed #gnb > ul > li > a {
  color: var(--black);
  line-height: var(--header-fixed-height);
}

#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus-visible {
  color: var(--main-color);
}

.gnb-sub-menu {
  position: absolute;
  top: var(--header-height);
  left: 50%;
  z-index: 120;
  min-width: 16.2rem;
  padding: .8rem .7rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 0;
  border-radius: 0 0 1.4rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(12, 12, 14, .78), rgba(12, 12, 14, .68));
  backdrop-filter: blur(8px);
  box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .12);
  clip-path: inset(0 0 100% 0 round 0 0 1.4rem 1.4rem);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -.6rem) scaleY(.98);
  transform-origin: 50% 0;
  transition:
    clip-path .42s var(--ease-main),
    opacity .24s ease,
    transform .42s var(--ease-main),
    visibility .24s;
}

#header.top-fixed .gnb-sub-menu,
#wrap.portfolio-page .gnb-sub-menu,
#wrap.request-page .gnb-sub-menu {
  top: var(--header-fixed-height);
  border-color: rgba(0, 0, 0, .06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .76));
  backdrop-filter: blur(5px);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, .055);
}

#gnb > ul > li:hover .gnb-sub-menu,
#gnb > ul > li:focus-within .gnb-sub-menu {
  clip-path: inset(0 0 0 0 round 0 0 1.4rem 1.4rem);
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scaleY(1);
}

.gnb-sub-menu a {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 1.05rem 1.35rem 1.05rem 1.65rem;
  border-radius: .55rem;
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-.8rem);
  transition:
    color .22s,
    background .22s,
    opacity .32s var(--ease-main),
    transform .32s var(--ease-main);
}

.gnb-sub-menu li:nth-child(1) a { transition-delay: 0s, 0s, .08s, .08s; }
.gnb-sub-menu li:nth-child(2) a { transition-delay: 0s, 0s, .14s, .14s; }
.gnb-sub-menu li:nth-child(3) a { transition-delay: 0s, 0s, .2s, .2s; }
.gnb-sub-menu li:nth-child(4) a { transition-delay: 0s, 0s, .26s, .26s; }

#gnb > ul > li:hover .gnb-sub-menu a,
#gnb > ul > li:focus-within .gnb-sub-menu a {
  opacity: 1;
  transform: translateY(0);
}

.gnb-sub-menu a::before,
.gnb-sub-menu a::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.gnb-sub-menu a::before {
  inset: .65rem auto .65rem .65rem;
  width: 2px;
  border-radius: 999px;
  background: var(--main-color);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .26s var(--ease-main);
}

.gnb-sub-menu a::after {
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(139, 92, 246, .16), rgba(139, 92, 246, .035));
  opacity: 0;
  transform: translateX(-1.2rem);
  transition: opacity .24s, transform .32s var(--ease-main);
}

#header.top-fixed .gnb-sub-menu a,
#wrap.portfolio-page .gnb-sub-menu a,
#wrap.request-page .gnb-sub-menu a {
  color: var(--black);
}

.gnb-sub-menu a:hover,
.gnb-sub-menu a:focus-visible {
  color: var(--main-color);
  transform: translateX(.35rem);
  transition-delay: 0s;
}

.gnb-sub-menu a:hover::before,
.gnb-sub-menu a:focus-visible::before {
  transform: scaleY(1);
}

.gnb-sub-menu a:hover::after,
.gnb-sub-menu a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.header-util-box {
  position: relative;
  z-index: 100;
  display: none;
  align-items: center;
}

.header-email-consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 113px;
  height: 38px;
  margin-left: 2.4rem;
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  transition: border-color .4s var(--ease-main), color .4s var(--ease-main);
}

#header.top-fixed .header-email-consult {
  border-color: var(--black);
  color: var(--black);
}

.nav-open-btn-wrap,
.nav-open-btn {
  display: none;
}

.gnb-overlay-bg-m {
  display: none;
}

#gnbM {
  display: none;
}

.ms-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: var(--black);
  opacity: 1;
  visibility: visible;
  transition: opacity 1.3s var(--ease-main), visibility 1.3s var(--ease-main);
}

.ms-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.index-wrapper #header .logo,
.index-wrapper .visual-left-bottom-con {
  transform: translateX(-50px);
  opacity: 0;
  transition: all .8s;
}

.index-wrapper .nav-open-btn-wrap,
.index-wrapper #header .header-util-box {
  transform: translateX(50px);
  opacity: 0;
  transition: all .8s;
}

.index-wrapper #gnb > ul {
  transform: translateY(0);
  opacity: 1;
  transition: color .4s var(--ease-main), transform .8s, opacity .8s;
}

#wrap.main-page #gnb > ul > li > a {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .46);
}

#wrap.main-page #header.top-fixed #gnb > ul > li > a {
  text-shadow: none;
}

.main-visual-control-con {
  transform: translateY(50px);
  opacity: 0;
  transition: all .8s;
}

.index-wrapper.start .nav-open-btn-wrap,
.index-wrapper.start #header .logo,
.index-wrapper.start #header .header-util-box,
.index-wrapper.start #gnb > ul,
.index-wrapper.start .main-visual-control-con {
  transform: translate(0, 0);
  opacity: 1;
  transition-delay: .4s;
}

#mainVisual {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  background: var(--black);
}

#mainIntroCon {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#mainIntroCon .main-intro-bg {
  position: absolute;
  right: 50%;
  bottom: 50%;
  width: 200vw;
  height: 200vw;
  overflow: hidden;
  border-radius: 100%;
  transform: translate(50%, 50%) scale(1) rotate(0deg);
  transition:
    width 1s var(--ease-out),
    height 1s var(--ease-out),
    bottom 1s var(--ease-out),
    right 1s var(--ease-out),
    left 1s var(--ease-out),
    transform 1s var(--ease-out),
    border-radius 1s var(--ease-out),
    filter 1s var(--ease-out);
  will-change: width, height, transform, bottom, right;
}

#mainIntroCon .main-intro-bg span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  transition: background-color .8s var(--ease-main);
}

#mainIntroCon .main-intro-txt {
  position: relative;
  z-index: 1;
  color: var(--black);
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  transition:
    color .8s var(--ease-main),
    transform .9s var(--ease-out),
    filter .6s var(--ease-out),
    opacity .6s ease;
}

.main-intro-logo {
  width: clamp(16rem, 22vw, 30rem);
  height: auto;
  margin: 0 auto;
  filter: none;
  transition: filter .8s var(--ease-main);
}

#mainIntroCon.is-start .main-intro-bg {
  transform: translate(50%, 50%) scale(1.08) rotate(8deg);
}

#mainIntroCon.is-start .main-intro-bg span {
  background: var(--main-color2);
}

#mainIntroCon.is-start .main-intro-logo {
  filter: invert(1);
}

#mainIntroCon.is-end .main-intro-bg {
  right: 6rem;
  bottom: 6rem;
  width: 0;
  height: 0;
  border-radius: 50%;
  filter: blur(0);
  transform: translate(0, 0) scale(1) rotate(540deg);
}

#mainIntroCon.is-end .main-intro-txt {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(0) scale(.94);
}

.main-visual-container,
.main-visual-con,
.main-visual-item,
.main-visual-item-inner {
  width: 100%;
  height: 100%;
}

.main-visual-container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.main-visual-con {
  display: flex;
  transform: translateX(0);
  transition: transform 1.2s var(--ease-main);
  will-change: transform;
}

.main-visual-item {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
}

.main-visual-item-inner {
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.main-visual-item-inner::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .38) 34%, rgba(0, 0, 0, .08) 66%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 38%);
  content: "";
  pointer-events: none;
}

.main-visual-pc-img,
.main-visual-video {
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 5s linear;
}

.main-visual-pc-img {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
}

.main-visual-pc-img.is-line-bg {
  filter: invert(1) grayscale(1) contrast(1.08);
}

.main-visual-pc-img.is-photo-bg {
  background-position: center right;
  background-size: cover;
  filter: none;
}

.main-visual-item-inner.is-logo-slide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: -4rem 0 0 #050505;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .82) 26%, rgba(0, 0, 0, .32) 54%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(135deg, rgba(139, 92, 246, .82) 0%, rgba(109, 40, 217, .58) 46%, rgba(59, 7, 100, .72) 100%),
    url("../images/hero/hero4.webp") center right / cover no-repeat,
    linear-gradient(135deg, #8b5cf6 0%, #6d28d9 44%, #3b0764 100%);
}

.main-visual-item-inner.is-logo-slide::after {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .22), transparent 38%),
    radial-gradient(circle at 64% 46%, rgba(255, 255, 255, .1), transparent 26%);
}

.main-visual-logo-slide {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(34rem, 30vw);
  margin-right: clamp(4rem, 9vw, 14rem);
  opacity: .92;
  transform: none;
}

.main-visual-logo-slide img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2rem 4rem rgba(0, 0, 0, .34));
}

.main-visual-item.is-active .main-visual-logo-slide {
  animation: none;
}

.main-visual-item-inner.is-photo-bg::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .86) 22%, rgba(0, 0, 0, .58) 43%, rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .24) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 40%);
}

.main-visual-item.is-active .main-visual-pc-img,
.main-visual-item.is-active .main-visual-video {
  animation: image-zoom-out 5s linear both;
}

@keyframes image-zoom-out {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes logo-slide-active {
  from {
    opacity: 0;
    transform: translateY(3rem) scale(.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.main-visual-txt-con {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.main-visual-txt-inner {
  width: 100%;
  max-width: 112rem;
}

.main-visual-txt1,
.main-visual-txt2,
.main-visual-txt3,
.main-visual-more-btn {
  opacity: 0;
  transform: translateY(3.6rem);
}

.main-visual-txt1 {
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
}

.hero-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13rem;
  height: 4rem;
  padding: 0 2rem;
  border: 1px solid rgba(255, 255, 255, .65);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.main-visual-txt2 {
  margin-bottom: 3rem;
  color: var(--white);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1.12;
}

.main-visual-txt2 b {
  font-weight: 800;
}

.main-visual-txt3 {
  display: block;
  position: relative;
  padding-bottom: 1rem;
  color: var(--white);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.4;
}

.main-visual-more-btn {
  margin-top: 4rem;
}

.main-visual-more-btn a {
  display: inline-flex;
  min-width: 18rem;
  height: 5rem;
  border: 2px solid var(--white);
  border-radius: 5rem;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 800;
  backdrop-filter: blur(20px);
  transition:
    border-color .28s var(--ease-premium),
    background .28s var(--ease-premium),
    box-shadow .28s var(--ease-premium),
    transform .28s var(--ease-premium);
}

.main-visual-more-btn a:hover,
.main-visual-more-btn a:focus-visible {
  border-color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .28);
  transform: translateY(-.18rem);
}

.main-visual-more-btn a .txt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem 0 2rem;
}

.external-icon {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 3rem;
  border: 2px solid currentColor;
}

.external-icon::before {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
}

.main-visual-item.is-active .main-visual-txt1,
.main-visual-item.is-active .main-visual-txt2,
.main-visual-item.is-active .main-visual-txt3,
.main-visual-item.is-active .main-visual-more-btn {
  animation: text-active-animation 1.05s var(--ease-premium) both;
}

.main-visual-item.is-active .main-visual-txt1 { animation-delay: .08s; }
.main-visual-item.is-active .main-visual-txt2 { animation-delay: .22s; }
.main-visual-item.is-active .main-visual-txt3 { animation-delay: .36s; }
.main-visual-item.is-active .main-visual-more-btn { animation-delay: .54s; }

@keyframes text-active-animation {
  from {
    opacity: 0;
    transform: translateY(3.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cm-word-split-JS.splitting .char {
  display: inline-block;
  position: relative;
  font-family: inherit;
}

.main-tit.splitting .char {
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity .8s var(--ease-main),
    transform .8s var(--ease-main);
  transition-delay: calc(var(--char-delay, 0s) + (var(--char-index, 0) * var(--char-speed, .03s)));
}

.animated .main-tit.splitting .char {
  opacity: 1;
  transform: translateY(0);
}

.main-visual-control-con {
  position: absolute;
  bottom: 3rem;
  left: 0;
  z-index: 12;
  width: 100%;
}

.main-visual-control-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.visual-arrow-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-visual-prev-btn,
.main-visual-next-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: background .4s var(--ease-main), color .4s var(--ease-main);
}

.arrow-icon {
  position: relative;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
}

.arrow-icon::before {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
}

.arrow-left::before {
  left: .5rem;
  transform: translateY(-50%) rotate(-135deg);
}

.arrow-right::before {
  right: .5rem;
  transform: translateY(-50%) rotate(45deg);
}

.main-visual-progress-bar {
  position: relative;
  width: calc(100% - 38rem);
  height: 2px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}

.main-visual-progress-bar .bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--white);
}

.main-visual-progress-bar.is-running .bar {
  animation: progress-run var(--progress-duration, 5s) linear both;
}

@keyframes progress-run {
  from { width: 0; }
  to { width: 100%; }
}

.main-inquiry-box {
  position: relative;
  z-index: 12;
}

.main-inquiry-box:not(.is-end) .main-inquiry-btn {
  width: 0;
  height: 0;
  opacity: 0;
  transition: width .8s var(--ease-main), height .8s var(--ease-main), opacity .8s var(--ease-main);
}

.main-inquiry-box.is-end .main-inquiry-btn {
  width: 18rem;
  height: 6rem;
  opacity: 1;
  transition-delay: .6s;
}

.main-inquiry-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 18rem;
  height: 6rem;
  border-radius: 3rem;
  background: var(--main-color2);
  color: var(--white);
  font-size: 1.7rem;
  font-weight: 700;
  overflow: hidden;
}

.main-inquiry-btn .txt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 2rem;
  text-align: center;
  white-space: nowrap;
}

.cm-fill-ani-JS {
  position: relative;
  overflow: hidden;
}

.cm-fill-ani-JS .bg {
  position: absolute;
  inset: -1px;
  overflow: hidden;
  pointer-events: none;
}

.cm-fill-ani-JS .cm-fill {
  position: absolute;
  left: var(--fill-x, 50%);
  top: var(--fill-y, 50%);
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: width .54s var(--ease-premium), height .54s var(--ease-premium);
}

.cm-fill-ani-JS .txt {
  position: relative;
  z-index: 1;
  transition: color .24s var(--ease-premium);
}

@media (hover: hover) {
  .cm-fill-ani-JS:hover .cm-fill {
    width: 40rem;
    height: 40rem;
  }

  .cm-fill-ani-JS:hover .txt {
    color: var(--black);
  }
}

#header.top-fixed .header-email-consult:hover .txt,
#header.top-fixed .header-email-consult:focus-visible .txt,
#wrap.portfolio-page .header-email-consult:hover .txt,
#wrap.portfolio-page .header-email-consult:focus-visible .txt,
#wrap.request-page .header-email-consult:hover .txt,
#wrap.request-page .header-email-consult:focus-visible .txt {
  color: var(--white);
}

.floating-consult {
  position: fixed;
  right: 3.2rem;
  bottom: 3.2rem;
  z-index: 9600;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.2rem) scale(.96);
  transition:
    opacity .58s var(--ease-premium),
    transform .72s var(--ease-premium);
  will-change: opacity, transform;
}

.floating-consult.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.floating-consult-menu {
  position: absolute;
  right: 50%;
  bottom: calc(100% + 1.1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, .85rem) scale(.96);
  transform-origin: 50% 100%;
  transition:
    opacity .26s var(--ease-premium),
    transform .44s var(--ease-premium);
}

.floating-consult.is-open .floating-consult-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(50%, 0) scale(1);
}

.floating-consult-action,
.floating-consult-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
  transition:
    background .24s var(--ease-main),
    color .24s var(--ease-main),
    opacity .34s var(--ease-premium),
    box-shadow .34s var(--ease-main),
    transform .34s var(--ease-premium);
}

.floating-consult-action {
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--black);
  opacity: 0;
  box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .08);
  transform: translateY(.55rem) scale(.92);
  backdrop-filter: blur(16px);
}

.floating-consult.is-open .floating-consult-action {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.floating-consult.is-open .floating-consult-action:nth-child(1) { transition-delay: .14s; }
.floating-consult.is-open .floating-consult-action:nth-child(2) { transition-delay: .07s; }
.floating-consult.is-open .floating-consult-action:nth-child(3) { transition-delay: 0s; }

.floating-consult-toggle {
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;
  border-radius: 999px;
  background: rgba(5, 5, 7, .68);
  color: var(--white);
  box-shadow: 0 .9rem 2.2rem rgba(0, 0, 0, .12);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.floating-consult-top {
  display: none;
}

.floating-consult.is-bottom .floating-consult-top {
  display: inline-flex;
}

.floating-consult-action:hover,
.floating-consult-action:focus-visible,
.floating-consult-toggle:hover,
.floating-consult-toggle:focus-visible {
  transform: translateY(-.24rem) scale(1.03);
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, .14);
}

.floating-consult-action:hover,
.floating-consult-action:focus-visible {
  color: var(--main-color2);
}

.floating-consult-toggle-icon,
.floating-consult-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
}

.floating-consult-toggle-icon {
  position: relative;
  transition: transform .28s var(--ease-premium);
}

.floating-consult.is-open .floating-consult-toggle-icon {
  transform: rotate(45deg);
}

.floating-consult-toggle-icon::before,
.floating-consult-toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .28s var(--ease-premium);
}

.floating-consult-toggle-icon::before {
  width: 2.05rem;
  height: .22rem;
}

.floating-consult-toggle-icon::after {
  width: .22rem;
  height: 2.05rem;
}

.floating-consult-action-icon.is-top {
  position: relative;
}

.floating-consult-action-icon.is-top::before,
.floating-consult-action-icon.is-top::after {
  content: "";
  position: absolute;
  left: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.floating-consult-action-icon.is-top::before {
  top: .42rem;
  width: 1.1rem;
  height: 1.1rem;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  background: transparent;
  transform: translateX(-50%) rotate(45deg);
}

.floating-consult-action-icon.is-top::after {
  top: .76rem;
  width: 2px;
  height: 1.4rem;
}

.floating-consult-action-icon.is-kakao img {
  width: 2.6rem;
  height: 2.6rem;
}

.floating-consult-action-icon.is-phone {
  color: var(--main-color2);
  font-size: 1.72rem;
}

#mainContent {
  position: relative;
  background: var(--white);
  --home-eyebrow-size: 1.28rem;
  --home-eyebrow-letter: .24em;
  --home-display-size: clamp(4.8rem, 5.6vw, 7.6rem);
  --home-title-size: clamp(4.2rem, 4.5vw, 6.2rem);
  --home-title-line: 1.14;
  --home-copy-size: 1.64rem;
  --home-copy-line: 1.78;
  --home-badge-size: 1.26rem;
  --home-gap-xs: 1.4rem;
  --home-gap-sm: 2.2rem;
  --home-gap-md: 3.2rem;
  --home-gap-lg: 4.8rem;
}

.service-page-main {
  --home-eyebrow-size: 1.28rem;
  --home-eyebrow-letter: .24em;
  --home-title-size: clamp(4rem, 4.2vw, 5.8rem);
  --home-title-line: 1.14;
  --home-copy-size: 1.6rem;
  --home-copy-line: 1.78;
  --home-gap-xs: 1.4rem;
  --home-gap-sm: 2.2rem;
  --home-gap-md: 3.2rem;
}

.home-hook-lead {
  position: relative;
  overflow: hidden;
  padding: 13rem 0 12rem;
  background:
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, .28), transparent 34rem),
    linear-gradient(135deg, #060507 0%, #111015 48%, #241542 100%);
  color: var(--white);
}

.home-hook-lead::before,
.home-hook-lead::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-hook-lead::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 7.2rem 7.2rem;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
  opacity: .5;
}

.home-hook-lead::after {
  right: -10rem;
  bottom: -18rem;
  width: 48rem;
  height: 48rem;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 12rem rgba(139, 92, 246, .18);
}

.home-hook-lead-inner {
  position: relative;
  z-index: 1;
  max-width: 118rem;
}

.home-hook-label,
.home-proof-label {
  display: inline-block;
  color: var(--main-color2);
  font-size: var(--home-eyebrow-size);
  font-weight: 950;
  letter-spacing: var(--home-eyebrow-letter);
}

.home-hook-title {
  max-width: 92rem;
  margin-top: var(--home-gap-sm);
  color: var(--white);
  font-size: var(--home-display-size);
  font-weight: 900;
  line-height: var(--home-title-line);
  letter-spacing: 0;
}

.home-hook-title span,
.home-hook-title strong {
  display: block;
}

.home-hook-title span {
  color: rgba(255, 255, 255, .88);
  font-weight: 820;
}

.home-hook-title strong {
  margin-top: .45rem;
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
}

.home-hook-title em {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--white);
  font-style: normal;
  font-weight: 950;
  opacity: 0;
  transform: translateY(.58em);
  clip-path: inset(100% 0 0 0);
  transition:
    opacity 1.15s var(--ease-premium) .24s,
    transform 1.15s var(--ease-premium) .24s,
    clip-path 1.15s var(--ease-premium) .24s,
    text-shadow 1.15s var(--ease-premium) .24s;
}

.home-hook-title em::after,
.home-proof-em::after {
  display: none;
  content: none;
}

.home-hook-lead.animated .home-hook-title em,
.home-proof-section.animated .home-proof-em {
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 0 2.2rem rgba(139, 92, 246, .38);
}

.home-hook-lead.animated .home-hook-title em {
  clip-path: inset(0 0 0 0);
  text-shadow:
    0 0 2.6rem rgba(139, 92, 246, .48),
    0 .18rem .4rem rgba(0, 0, 0, .18);
}

.home-hook-sub {
  max-width: 66rem;
  margin-top: var(--home-gap-md);
  color: rgba(255, 255, 255, .72);
  font-size: var(--home-copy-size);
  font-weight: 560;
  line-height: var(--home-copy-line);
}

.home-hook-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--home-gap-md);
}

.home-hook-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 3.8rem;
  padding: 0 1.55rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  color: rgba(255, 255, 255, .94);
  font-size: var(--home-badge-size);
  font-weight: 760;
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity .65s var(--ease-main),
    transform .65s var(--ease-main),
    border-color .24s var(--ease-main),
    background .24s var(--ease-main);
}

.home-hook-lead.animated .home-hook-tags span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(.24s + (var(--i) * .06s));
}

.home-hook-tags span:hover {
  border-color: rgba(139, 92, 246, .8);
  background: rgba(139, 92, 246, .18);
}

.home-proof-section {
  position: relative;
  padding: 9.6rem 0 9rem;
  background:
    linear-gradient(180deg, #f8f8fb 0%, #fff 36%, #fff 100%);
}

.home-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(40rem, .72fr);
  align-items: center;
  gap: clamp(5rem, 7vw, 11rem);
}

.home-proof-copy {
  max-width: 74rem;
}

.home-proof-copy h2 {
  margin-top: var(--home-gap-sm);
  color: var(--black);
  font-size: var(--home-title-size);
  font-weight: 950;
  line-height: var(--home-title-line);
}

.home-proof-em {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--main-color2);
  opacity: 0;
  transform: translateY(.34em);
  transition:
    opacity .68s var(--ease-main) .12s,
    transform .68s var(--ease-main) .12s,
    text-shadow .68s var(--ease-main) .12s;
}

.home-proof-copy p {
  max-width: 66rem;
  margin-top: var(--home-gap-sm);
  color: rgba(0, 0, 0, .64);
  font-size: var(--home-copy-size);
  font-weight: 560;
  line-height: var(--home-copy-line);
}

.home-proof-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21rem;
  height: 5.6rem;
  margin-top: var(--home-gap-md);
  padding: 0 2.8rem;
  border: 1px solid var(--black);
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 1.42rem;
  font-weight: 950;
}

.home-proof-panel {
  position: relative;
  padding: 4rem 0 0 4.8rem;
  border-left: 2px solid rgba(0, 0, 0, .86);
}

.home-proof-panel::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 7.6rem;
  background: var(--main-color2);
  box-shadow: 0 0 2.6rem rgba(139, 92, 246, .42);
}

.home-proof-panel strong {
  display: block;
  color: var(--black);
  font-size: clamp(2.8rem, 2.9vw, 4.2rem);
  font-weight: 950;
  line-height: 1.18;
}

.home-proof-panel p {
  max-width: 50rem;
  margin-top: var(--home-gap-xs);
  color: rgba(0, 0, 0, .62);
  font-size: var(--home-copy-size);
  font-weight: 540;
  line-height: var(--home-copy-line);
}

.home-proof-panel ul {
  display: grid;
  gap: 1.05rem;
  margin-top: var(--home-gap-md);
}

.home-proof-panel li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 4.8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, .82);
  font-size: 1.42rem;
  font-weight: 800;
  opacity: 0;
  transform: translateX(1.6rem);
  transition: opacity .62s var(--ease-main), transform .62s var(--ease-main);
}

.home-proof-section.animated .home-proof-panel li {
  opacity: 1;
  transform: translateX(0);
}

.home-proof-section.animated .home-proof-panel li:nth-child(1) { transition-delay: .2s; }
.home-proof-section.animated .home-proof-panel li:nth-child(2) { transition-delay: .3s; }
.home-proof-section.animated .home-proof-panel li:nth-child(3) { transition-delay: .4s; }
.home-proof-section.animated .home-proof-panel li:nth-child(4) { transition-delay: .5s; }

.home-proof-panel li span {
  color: var(--main-color2);
  font-size: 1.14rem;
  font-weight: 950;
}

.home-hook-hero {
  height: clamp(58rem, 78vh, 76rem);
  min-height: 58rem;
}

.home-hook-hero .about-hero-title {
  font-size: clamp(4.6rem, 5.2vw, 8.6rem);
}

.home-hook-hero .about-hero-copy {
  max-width: 78rem;
}

.home-proof-first-hero.about-hero-slider {
  margin-top: 0;
}

.home-proof-first-hero .about-hero-inner {
  padding-top: 0;
}

.service-home-proof-section {
  border-top: 1px solid rgba(0, 0, 0, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.main-tit-box {
  margin-bottom: 9rem;
  text-align: center;
}

.main-tit-box .main-tit {
  color: var(--black);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1.2;
}

.main-tit-box .main-tit strong {
  font-weight: 800;
}

.main-tit-kor {
  margin-top: 1.2rem;
  color: var(--main-color2);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .08em;
}

[data-scroll] {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity .72s var(--ease-premium), transform .72s var(--ease-premium);
}

[data-scroll="fade"] {
  transform: translateY(0);
}

[data-scroll].animated {
  opacity: 1;
  transform: translateY(0);
}

#mainWorksCon {
  padding: 12rem 0;
  background: var(--white);
}

#mainWorksCon .portfolio-container {
  max-width: 1621px;
  margin: 0 auto;
}

.portfolio-list-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1%;
}

.portfolio-list-main .main-portfolio-item {
  width: 31.333%;
  margin: 0 1% 3rem;
}

.portfolio-list-main .main-portfolio-item a {
  display: block;
}

.portfolio-img-thum {
  position: relative;
  height: 0;
  padding-top: 55.4%;
  overflow: hidden;
  background: #d8d8d8;
}

.portfolio-img-thum span,
.portfolio-img-thum img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portfolio-img-thum img {
  object-fit: cover;
  transition: transform .5s;
}

.portfolio-cover.new {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: all .35s;
}

.portfolio-cover.new .cover-inner {
  display: table;
  width: 100%;
  height: 100%;
}

.portfolio-cover.new .cover-inner > h3 {
  display: table-cell;
  width: 100%;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 2rem;
  text-align: center;
  vertical-align: middle;
}

.portfolio-cover.new .cover-inner > h3 span {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  transform: translateY(30px);
  transition: all .35s;
}

.portfolio-cover.new .cover-inner > h3 span::before,
.portfolio-cover.new .cover-inner > h3 span::after {
  position: absolute;
  background: var(--white);
  content: "";
}

.portfolio-cover.new .cover-inner > h3 span::before {
  top: 18px;
  left: 0;
  width: 40px;
  height: 4px;
}

.portfolio-cover.new .cover-inner > h3 span::after {
  top: 0;
  left: 18px;
  width: 4px;
  height: 40px;
}

.portfolio-list-main.new li:hover .portfolio-cover.new,
.portfolio-list-main.new li:focus-within .portfolio-cover.new {
  opacity: 1;
}

.portfolio-list-main.new li:hover .portfolio-cover.new .cover-inner > h3 span,
.portfolio-list-main.new li:focus-within .portfolio-cover.new .cover-inner > h3 span {
  transform: translateY(0);
}

.portfolio-list-main.new li:hover .portfolio-img-thum img,
.portfolio-list-main.new li:focus-within .portfolio-img-thum img {
  transform: scale(1.06);
}

.portfolio-txt-box {
  display: table;
  width: 100%;
  height: 5.6rem;
  text-align: center;
}

.portfolio-txt-box p {
  display: table-cell;
  color: #1d1b1b;
  font-size: 1.7rem;
  font-weight: 400;
  vertical-align: middle;
}

.portfolio-txt-box p b {
  font-weight: 600;
}

.portfolio-more-btn {
  padding: 2.5rem 0;
  text-align: center;
}

.more-plus {
  position: relative;
  display: inline-block;
  width: 59px;
  height: 59px;
  border: 2px solid var(--black);
  border-radius: 50%;
  transition: transform .4s;
}

.more-plus::before,
.more-plus::after {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--black);
  content: "";
  transform: translate(-50%, -50%);
}

.more-plus::before {
  width: 24px;
  height: 2px;
}

.more-plus::after {
  width: 2px;
  height: 24px;
}

.portfolio-more-btn > a:hover .more-plus,
.portfolio-more-btn > a:focus-visible .more-plus {
  transform: rotate(180deg);
}

.works-filter-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: -4rem 0 6rem;
  scrollbar-width: none;
}

.works-filter-badges::-webkit-scrollbar {
  display: none;
}

.works-filter-btn {
  min-width: 10.8rem;
  height: 4.6rem;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    color .22s var(--ease-premium),
    background-color .22s var(--ease-premium),
    border-color .22s var(--ease-premium),
    box-shadow .22s var(--ease-premium),
    transform .22s var(--ease-premium);
}

.works-filter-btn:hover,
.works-filter-btn:focus-visible,
.works-filter-btn.is-active {
  border-color: var(--main-color2);
  background: var(--black);
  color: var(--white);
  box-shadow: var(--shadow-violet);
  transform: translateY(-.12rem);
}

.works-board {
  min-height: 30rem;
}

.work-section + .work-section {
  margin-top: 10rem;
}

.work-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}

.work-section-head h3 {
  color: #050505;
  font-size: 2.8rem;
  font-weight: 850;
  line-height: 1.2;
}

.work-section-head span {
  color: rgba(0, 0, 0, .48);
  font-size: 1.3rem;
  font-weight: 850;
}

.work-grid {
  display: grid;
  gap: 2.2rem;
}

.homepage-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.merged-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-card a {
  display: block;
  height: 100%;
  color: inherit;
  transition: transform .34s var(--ease-premium);
}

.work-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111;
  border-radius: .6rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
  transition: box-shadow .34s var(--ease-premium), transform .34s var(--ease-premium);
}

.detail-grid .work-thumb {
  aspect-ratio: 1 / 1;
}

.merged-grid .detail .work-thumb {
  aspect-ratio: 1 / 1;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-premium), filter .6s var(--ease-premium);
}

.work-card.detail .work-thumb {
  background: #050505;
}

.work-card.detail .work-thumb img {
  object-fit: contain;
}

.work-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .52);
  opacity: 0;
  transition: opacity .26s var(--ease-premium);
}

.work-cover span {
  position: relative;
  display: block;
  width: 3.8rem;
  height: 3.8rem;
  transform: translateY(2.4rem);
  transition: transform .32s var(--ease-premium);
}

.work-card a:hover,
.work-card a:focus-visible {
  transform: translateY(-.35rem);
}

.work-card a:hover .work-thumb,
.work-card a:focus-visible .work-thumb {
  box-shadow: 0 1.8rem 4.8rem rgba(0, 0, 0, .12);
}

.work-cover span::before,
.work-cover span::after {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.work-cover span::before {
  width: 100%;
  height: 3px;
}

.work-cover span::after {
  width: 3px;
  height: 100%;
}

.work-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.2rem;
  padding: 1.7rem 0 0;
}

.work-kind {
  grid-column: 1 / -1;
  width: fit-content;
  margin-bottom: .8rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(109, 40, 217, .28);
  border-radius: 999px;
  color: var(--main-color2);
  font-size: 1.1rem;
  font-weight: 850;
}

.work-info strong {
  overflow: hidden;
  color: #111;
  font-size: 1.65rem;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-info em {
  color: rgba(0, 0, 0, .42);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 850;
  transition: color .25s;
}

.work-card a:hover .work-thumb img,
.work-card a:focus-visible .work-thumb img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.06);
}

.work-card.detail a:hover .work-thumb img,
.work-card.detail a:focus-visible .work-thumb img {
  transform: none;
}

.work-card a:hover .work-cover,
.work-card a:focus-visible .work-cover {
  opacity: 1;
}

.work-card a:hover .work-cover span,
.work-card a:focus-visible .work-cover span {
  transform: translateY(0);
}

.work-card a:hover .work-info em,
.work-card a:focus-visible .work-info em {
  color: var(--main-color2);
}

#wrap.portfolio-page {
  overflow: visible;
  background: var(--white);
}

#wrap.portfolio-page #header,
#wrap.portfolio-page #header.top-fixed {
  position: sticky;
  top: 0;
  height: var(--header-fixed-height);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(10px);
}

#wrap.portfolio-page #header::before,
#wrap.portfolio-page #header.top-fixed::before {
  height: var(--header-fixed-height);
  background: transparent;
  transform: none;
}

#wrap.portfolio-page #headerInnerWrap,
#wrap.portfolio-page #header.top-fixed #headerInnerWrap,
#wrap.portfolio-page #headerInner,
#wrap.portfolio-page #header.top-fixed #headerInner {
  height: var(--header-fixed-height);
}

#wrap.portfolio-page .site-logo-img,
#wrap.portfolio-page #header.top-fixed .site-logo-img {
  filter: none;
}

#wrap.portfolio-page #gnb > ul > li > a,
#wrap.portfolio-page #header.top-fixed #gnb > ul > li > a {
  color: var(--black);
  line-height: var(--header-fixed-height);
}

#wrap.portfolio-page .header-email-consult {
  border-color: var(--black);
  color: var(--black);
}

#wrap.portfolio-page .header-email-consult .cm-fill {
  background: var(--black);
}

#wrap.portfolio-page .header-email-consult:hover,
#wrap.portfolio-page .header-email-consult:focus-visible {
  color: var(--white);
}

#wrap.portfolio-page #header .logo,
#wrap.portfolio-page .nav-open-btn-wrap,
#wrap.portfolio-page #header .header-util-box,
#wrap.portfolio-page #gnb > ul {
  opacity: 1;
  transform: none;
}

.portfolio-page-main {
  position: relative;
  background: var(--white);
}

.portfolio-page-hero {
  position: relative;
  padding-top: 13rem;
  padding-bottom: 10rem;
}

.portfolio-page-ghost {
  position: absolute;
  left: 6rem;
  right: 6rem;
  top: 5.5rem;
  z-index: 0;
  color: rgba(0, 0, 0, .035);
  font-size: clamp(7rem, 13vw, 22rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.portfolio-page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(32rem, .75fr);
  align-items: end;
  gap: 8rem;
}

.portfolio-page-kicker {
  color: var(--black);
  font-size: clamp(4.8rem, 7vw, 9rem);
  font-weight: 900;
  line-height: .95;
}

.portfolio-page-hero h2 {
  margin-top: 10rem;
  color: var(--black);
  font-size: clamp(3.4rem, 4.2vw, 6.6rem);
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: 0;
}

.portfolio-page-desc {
  max-width: 72rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--black);
  color: rgba(0, 0, 0, .72);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.75;
}

.portfolio-page-list {
  padding-bottom: 14rem;
}

.portfolio-page-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  padding: .9rem;
  border-radius: 999px;
  background: #f0f0f0;
}

.portfolio-page-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--black);
  font-size: 1.4rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.portfolio-page-filter-link:hover,
.portfolio-page-filter-link:focus-visible,
.portfolio-page-filter-link.is-active {
  background: var(--black);
  color: var(--white);
}

.portfolio-page-count {
  margin-top: 6rem;
  color: rgba(0, 0, 0, .76);
  font-size: 1.6rem;
  font-weight: 500;
}

.portfolio-page-count span {
  color: var(--main-color2);
}

.portfolio-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.6rem 3.2rem;
  margin-top: 2rem;
}

.portfolio-page-card a {
  display: block;
  color: inherit;
}

.portfolio-page-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f4f4f4;
}

.portfolio-page-card.detail .portfolio-page-thumb {
  aspect-ratio: 1 / 1;
  background: #050505;
}

.portfolio-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease-main), filter .45s var(--ease-main);
}

.portfolio-page-card.detail .portfolio-page-thumb img {
  object-fit: contain;
}

.portfolio-page-card a:hover .portfolio-page-thumb img,
.portfolio-page-card a:focus-visible .portfolio-page-thumb img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.045);
}

.portfolio-page-card.detail a:hover .portfolio-page-thumb img,
.portfolio-page-card.detail a:focus-visible .portfolio-page-thumb img {
  transform: none;
}

.portfolio-page-card-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1.4rem;
  color: var(--black);
}

.portfolio-page-card-info span {
  grid-column: 1 / -1;
  justify-self: start;
  padding: .35rem .75rem;
  border: 1px solid rgba(139, 92, 246, .55);
  border-radius: 999px;
  color: var(--main-color2);
  font-size: 1.1rem;
  font-weight: 850;
}

.portfolio-page-card-info strong {
  color: var(--black);
  font-size: 1.7rem;
  font-weight: 850;
  line-height: 1.35;
}

.portfolio-empty-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 34rem;
  padding: 6rem 3rem;
  border: 1px dashed rgba(0, 0, 0, .18);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(255, 255, 255, 0) 42%),
    #f8f8f8;
  text-align: center;
}

.portfolio-empty-state strong {
  color: var(--black);
  font-size: clamp(2.4rem, 3vw, 4.2rem);
  font-weight: 900;
  line-height: 1.2;
}

.portfolio-empty-state p {
  max-width: 58rem;
  margin-top: 1.4rem;
  color: rgba(0, 0, 0, .58);
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.7;
}

body.portfolio-lightbox-open {
  overflow: hidden;
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 3vw, 4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease-main), visibility .28s var(--ease-main);
}

.portfolio-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.portfolio-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 12%, rgba(139, 92, 246, .28), transparent 32rem),
    rgba(0, 0, 0, .82);
  backdrop-filter: blur(10px);
}

.portfolio-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(108rem, 100%);
  max-height: calc(100vh - clamp(3.2rem, 6vw, 8rem));
  overflow: auto;
  padding: clamp(6.8rem, 7vw, 8.4rem) clamp(1.6rem, 3vw, 3rem) clamp(1.8rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 6, 8, .94);
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, .48);
  transform: translateY(2rem) scale(.98);
  transition: transform .28s var(--ease-main);
}

.portfolio-lightbox.is-open .portfolio-lightbox-panel {
  transform: translateY(0) scale(1);
}

.portfolio-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  height: 4.2rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}

.portfolio-lightbox-close:hover,
.portfolio-lightbox-close:focus-visible {
  border-color: var(--main-color2);
  background: var(--main-color2);
  transform: translateY(-1px);
}

.portfolio-lightbox-close i {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
}

.portfolio-lightbox-close i::before,
.portfolio-lightbox-close i::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.portfolio-lightbox-close i::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.portfolio-lightbox-close i::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.portfolio-lightbox-figure {
  display: grid;
  gap: 1.6rem;
  margin: 0;
}

.portfolio-lightbox-img {
  display: block;
  width: 100%;
  max-height: min(72vh, 84rem);
  object-fit: contain;
  background: #050505;
}

.portfolio-lightbox-title {
  color: rgba(255, 255, 255, .82);
  font-size: 1.5rem;
  font-weight: 750;
  text-align: center;
}

.service-page-main {
  overflow: visible;
  background: var(--white);
}

.service-hero {
  position: relative;
  padding-top: 13rem;
  padding-bottom: 9rem;
}

.service-page-ghost {
  position: absolute;
  left: 4rem;
  right: 4rem;
  top: 5.2rem;
  z-index: 0;
  color: rgba(0, 0, 0, .035);
  font-size: clamp(7rem, 13vw, 21rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.service-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(42rem, .86fr);
  align-items: end;
  gap: clamp(5rem, 7vw, 10rem);
}

.service-kicker {
  color: var(--black);
  font-size: clamp(4.8rem, 7vw, 9rem);
  font-weight: 900;
  line-height: .95;
}

.service-hero h2 {
  margin-top: 8.5rem;
  color: var(--black);
  font-size: clamp(3.8rem, 4.7vw, 7rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.service-hero-copy {
  display: grid;
  gap: 3rem;
}

.service-hero-copy p {
  position: relative;
  overflow: hidden;
  padding-bottom: 1.7rem;
  border-bottom: 2px solid var(--black);
  color: rgba(0, 0, 0, .84);
  font-size: 1.8rem;
  font-weight: 620;
  line-height: 1.75;
  animation: service-copy-write-in 1.85s cubic-bezier(.19, 1, .22, 1) .18s;
}

@keyframes service-copy-write-in {
  0% {
    opacity: .18;
    filter: blur(.7rem);
    clip-path: inset(0 72% 0 0);
    transform: translateY(.8rem);
  }
  48% {
    opacity: .76;
    filter: blur(.18rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

.service-nav {
  display: grid;
  gap: .8rem;
}

.service-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.2rem;
  padding: 0 1.8rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .8rem;
  color: var(--black);
  font-size: 1.45rem;
  font-weight: 850;
  transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease-main);
}

.service-nav a::after {
  content: "→";
  color: var(--main-color2);
  font-weight: 900;
}

.service-nav a:hover,
.service-nav a:focus-visible,
.service-nav a.is-active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  transform: translateX(.4rem);
}

.service-nav a:hover::after,
.service-nav a:focus-visible::after,
.service-nav a.is-active::after {
  color: var(--main-color);
}

.service-overview-section {
  position: relative;
  overflow: hidden;
  padding: 7.2rem 0 10rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 247, 255, .74) 78%, rgba(255, 255, 255, 1)),
    radial-gradient(circle at 18% 26%, rgba(139, 92, 246, .1), transparent 32rem),
    var(--white);
}

.service-overview-section.is-sticky-mode {
  height: auto;
}

.service-overview-inner {
  position: relative;
}

.service-overview-section.is-sticky-mode .service-overview-inner {
  height: auto;
}

.service-overview-section.is-sticky-mode .service-overview-tabs,
.service-overview-section.is-sticky-mode .service-overview-pin {
  position: relative;
  top: auto;
}

.service-overview-tabs {
  position: relative;
  top: auto;
  z-index: 24;
  display: flex;
  gap: .4rem;
  width: min(72rem, 100%);
  margin: 0 auto 6rem;
  padding: .8rem;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 999px;
  background: rgba(0, 0, 0, .055);
  backdrop-filter: blur(1rem);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .055);
}

.service-overview-tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 4.2rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  color: rgba(0, 0, 0, .72);
  font-size: 1.42rem;
  font-weight: 900;
  white-space: nowrap;
  transition:
    background .3s var(--ease-main),
    color .3s var(--ease-main),
    box-shadow .3s var(--ease-main),
    transform .3s var(--ease-main);
}

.service-overview-tabs a:hover,
.service-overview-tabs a:focus-visible,
.service-overview-tabs a.is-active {
  background: var(--black);
  color: var(--white);
  box-shadow: 0 .9rem 2.4rem rgba(139, 92, 246, .25);
}

.service-overview-tabs a:active {
  transform: scale(.98);
}

.service-overview-pin {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  display: block;
}

.service-overview-track {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
}

.service-overview-panel {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: minmax(42rem, .78fr) minmax(48rem, 1fr);
  gap: clamp(4rem, 5.4vw, 7.6rem);
  align-items: center;
  min-height: 56rem;
  padding: clamp(3.4rem, 5vw, 5.8rem);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2.4rem 7rem rgba(0, 0, 0, .065);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 2.2rem, 0) scale(.985);
  transition:
    opacity .42s var(--ease-main),
    visibility .42s var(--ease-main),
    transform .42s var(--ease-main),
    box-shadow .38s var(--ease-main);
  pointer-events: none;
}

.service-overview-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow: 0 3rem 8.6rem rgba(0, 0, 0, .1);
  pointer-events: auto;
}

.service-overview-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(139, 92, 246, .3);
  color: var(--main-color2);
  font-size: 1.18rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.service-overview-copy h2 {
  margin-top: 2.8rem;
  color: var(--black);
  font-size: clamp(3.8rem, 4vw, 5.9rem);
  font-weight: 950;
  line-height: 1.12;
}

.service-overview-copy p {
  max-width: 58rem;
  margin-top: 2.4rem;
  color: rgba(0, 0, 0, .64);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.72;
}

.service-overview-checks {
  display: grid;
  gap: 1.1rem;
  margin-top: 3rem;
}

.service-overview-checks li {
  position: relative;
  padding-left: 2.4rem;
  color: rgba(0, 0, 0, .78);
  font-size: 1.52rem;
  font-weight: 760;
  line-height: 1.52;
}

.service-overview-checks li::before {
  position: absolute;
  left: 0;
  top: .2rem;
  color: var(--main-color2);
  content: "✓";
  font-weight: 950;
}

.service-overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.8rem;
}

.service-overview-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  padding: 0 1.2rem;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 999px;
  color: rgba(0, 0, 0, .7);
  font-size: 1.28rem;
  font-weight: 750;
}

.service-overview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16rem;
  min-height: 4.8rem;
  margin-top: 3.2rem;
  padding: 0 2rem;
  border: 1px solid var(--black);
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 1.42rem;
  font-weight: 900;
  transition:
    background .28s var(--ease-main),
    color .28s var(--ease-main),
    box-shadow .28s var(--ease-main),
    transform .28s var(--ease-main);
}

.service-overview-link:hover,
.service-overview-link:focus-visible {
  background: var(--main-color);
  color: var(--white);
  box-shadow: 0 1.1rem 2.8rem rgba(139, 92, 246, .32);
  transform: translateY(-.2rem);
}

.service-overview-visual {
  position: relative;
  overflow: hidden;
  height: clamp(38rem, 50vh, 52rem);
  min-height: 38rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(139, 92, 246, .18), transparent 38rem),
    #101010;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2rem 4.8rem rgba(0, 0, 0, .14);
}

.service-overview-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 38rem;
  object-fit: cover;
  opacity: .9;
  transform: scale(1.04);
  transition:
    opacity .4s var(--ease-main),
    transform .8s var(--ease-main);
}

.service-overview-panel.is-active .service-overview-visual img {
  opacity: 1;
  transform: scale(1);
}

.service-section {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.service-section + .service-section {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.service-section-head {
  display: grid;
  grid-template-columns: minmax(18rem, .28fr) minmax(0, .72fr);
  gap: 6rem;
  align-items: start;
  margin-bottom: 5rem;
}

.service-section-head span {
  color: var(--main-color2);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-section-head h3 {
  color: var(--black);
  font-size: clamp(2.45rem, 2.55vw, 3.6rem);
  font-weight: 760;
  line-height: 1.42;
}

.service-section-head h3.service-note-target,
.service-flow-panel h3.service-note-target {
  position: relative;
  transition: color .28s var(--ease-main);
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
}

.service-card {
  position: relative;
  min-height: 25rem;
  padding: 3.2rem;
  border: 1px solid rgba(0, 0, 0, .09);
  background: #f8f8f8;
  transition:
    background .28s var(--ease-premium),
    border-color .28s var(--ease-premium),
    box-shadow .28s var(--ease-premium),
    transform .28s var(--ease-premium);
}

.service-card:hover {
  border-color: rgba(139, 92, 246, .42);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transform: translateY(-.35rem);
}

.service-card em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--main-color);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 900;
}

.service-card h4 {
  margin-top: 4.2rem;
  color: var(--black);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.28;
  transition: color .28s var(--ease-main);
}

.service-card p {
  margin-top: 1.6rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.7;
  transition: color .28s var(--ease-main);
}

.service-benefit-section {
  position: relative;
  overflow: hidden;
  padding: clamp(4.2rem, 5vw, 7rem);
  background:
    radial-gradient(circle at 84% 12%, rgba(139, 92, 246, .38), transparent 28rem),
    linear-gradient(135deg, #060606 0%, #111 48%, #2b0b57 100%);
  color: var(--white);
}

.service-benefit-section::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  content: "";
  pointer-events: none;
}

.service-benefit-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(15rem, .28fr) minmax(0, .72fr);
  gap: 5rem;
  align-items: start;
  margin-bottom: 4.6rem;
}

.service-benefit-head span {
  color: #bda7ff;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-benefit-head h3 {
  color: var(--white);
  font-size: clamp(3rem, 4vw, 5.8rem);
  font-weight: 900;
  line-height: 1.08;
}

.service-benefit-head p {
  grid-column: 2;
  max-width: 72rem;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1.55rem, 1.6vw, 2rem);
  font-weight: 650;
  line-height: 1.65;
}

.service-benefit-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.service-benefit-card {
  min-height: 22rem;
  padding: clamp(2.2rem, 2.6vw, 3.4rem);
  border-right: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .035);
  transition: background .25s var(--ease-premium), transform .25s var(--ease-premium);
}

.service-benefit-card:hover {
  background: rgba(139, 92, 246, .18);
  transform: translateY(-.28rem);
}

.service-benefit-card em {
  color: #bda7ff;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.service-benefit-card h4 {
  margin-top: 2.6rem;
  color: var(--white);
  font-size: clamp(1.8rem, 1.65vw, 2.25rem);
  font-weight: 880;
  line-height: 1.28;
}

.service-benefit-card p {
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, .62);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.68;
}

.service-split {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(32rem, .48fr);
  gap: 5rem;
  align-items: stretch;
}

.service-list-panel {
  padding: 5rem;
  background: var(--black);
  color: var(--white);
}

.service-list-panel h3 {
  font-size: clamp(2.35rem, 2.45vw, 3.25rem);
  font-weight: 760;
  line-height: 1.46;
}

.service-list-panel p {
  margin-top: 2rem;
  color: rgba(255, 255, 255, .7);
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.75;
}

.service-check-list {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.service-check-list li {
  position: relative;
  padding: 2.2rem 2.4rem 2.2rem 5.6rem;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #f7f7f7;
  color: var(--black);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.45;
}

.service-check-list li::before {
  position: absolute;
  left: 2.2rem;
  top: 2.35rem;
  content: "";
  width: 1.5rem;
  height: .8rem;
  border-left: 3px solid var(--main-color2);
  border-bottom: 3px solid var(--main-color2);
  transform: rotate(-45deg);
}

.service-flow-showcase {
  grid-template-columns: minmax(0, .96fr) minmax(34rem, .52fr);
  gap: 2.6rem;
}

.service-flow-panel {
  position: relative;
  min-height: 44rem;
  padding: clamp(4rem, 5vw, 7.4rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .74) 42%, rgba(0, 0, 0, .18) 100%),
    url("../images/service/service-flow-bg.svg") center right / cover no-repeat,
    #050505;
}

.service-flow-panel::after {
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(255, 255, 255, .1);
  content: "";
  pointer-events: none;
}

.service-flow-kicker,
.service-flow-panel h3,
.service-flow-panel p {
  position: relative;
  z-index: 1;
}

.service-flow-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(189, 167, 255, .48);
  color: #bda7ff;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-flow-panel h3 {
  max-width: 63rem;
  margin-top: 4rem;
  font-size: clamp(3.2rem, 3.4vw, 5.2rem);
  font-weight: 900;
  line-height: 1.18;
}

.service-flow-panel p {
  max-width: 58rem;
  margin-top: 2.4rem;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1.6rem, 1.45vw, 1.95rem);
  font-weight: 650;
}

.service-flow-list {
  gap: 1.2rem;
}

.service-flow-list li {
  min-height: 10.8rem;
  padding: 2.2rem 12.8rem 2.2rem 6rem;
  border: 1px solid rgba(0, 0, 0, .11);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, .09), rgba(255, 255, 255, .96) 38%),
    #fff;
  transition: border-color .28s var(--ease-main), background .28s var(--ease-main), box-shadow .28s var(--ease-main);
}

.service-flow-list li::before {
  left: 2.2rem;
  top: 2.4rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff 0 .3rem, #8b5cf6 .34rem, #6d28d9 100%);
  box-shadow: 0 0 0 .7rem rgba(139, 92, 246, .1);
  transform: none;
}

.service-flow-list strong,
.service-flow-list span {
  display: block;
}

.service-flow-list strong {
  color: var(--black);
  font-size: 1.82rem;
  font-weight: 900;
  line-height: 1.25;
  transition: color .28s var(--ease-main);
}

.service-flow-list span {
  margin-top: .8rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.42rem;
  font-weight: 650;
  line-height: 1.58;
  transition: color .28s var(--ease-main);
}

.service-device-section {
  overflow: hidden;
  padding-top: 11rem;
  padding-bottom: 11rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 92, 246, .08), transparent 34rem),
    var(--white);
}

.service-device-scroll {
  --device-title-y: 0px;
  --device-rotate: 42deg;
  --device-scale: 1.1;
  --device-y: 8.5rem;
  position: relative;
  min-height: 92rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  perspective: 820px;
}

.service-device-copy {
  position: relative;
  z-index: 2;
  max-width: 94rem;
  margin: 0 auto;
  text-align: center;
  transform: translateY(var(--device-title-y));
  transition: transform .08s linear;
}

.service-device-copy span {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  padding: 0 1.2rem;
  border: 1px solid rgba(139, 92, 246, .28);
  color: var(--main-color2);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-device-copy h3 {
  margin-top: 2.4rem;
  color: var(--black);
  font-size: clamp(4.2rem, 6vw, 9.2rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
}

.service-device-copy p {
  max-width: 74rem;
  margin: 2.4rem auto 0;
  color: rgba(0, 0, 0, .62);
  font-size: clamp(1.55rem, 1.5vw, 2rem);
  font-weight: 650;
  line-height: 1.68;
}

.service-device-stage {
  position: relative;
  z-index: 3;
  width: min(96rem, 86vw);
  margin: -3.6rem auto 0;
  transform-style: preserve-3d;
}

.service-device-card {
  width: 100%;
  padding: clamp(1rem, 1.5vw, 1.8rem);
  border: .55rem solid #4b4b4b;
  border-radius: 3.2rem;
  background:
    linear-gradient(145deg, #2b2b2b, #161616);
  box-shadow:
    0 0 0 rgba(0, 0, 0, .3),
    0 .9rem 2rem rgba(0, 0, 0, .29),
    0 3.7rem 3.7rem rgba(0, 0, 0, .26),
    0 8.4rem 5rem rgba(0, 0, 0, .15),
    0 14.9rem 6rem rgba(0, 0, 0, .04);
  transform: translateY(var(--device-y)) rotateX(var(--device-rotate)) scale(var(--device-scale));
  transform-origin: 50% 100%;
  transition: transform .08s linear;
  will-change: transform;
}

.service-device-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: .25rem solid rgba(255, 255, 255, .08);
  border-radius: 2rem;
  background: #f3f3f3;
}

.service-device-screen.is-dark {
  background:
    radial-gradient(circle at 50% 46%, rgba(139, 92, 246, .16), transparent 38%),
    #09090b;
}

.service-device-screen img {
  display: block;
  width: 100%;
  height: 100%;
}

.service-device-screen img.is-cover {
  object-fit: cover;
}

.service-device-screen img.is-contain {
  object-fit: contain;
}

.service-flow-simple-list {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2rem;
  width: min(112rem, 100%);
  margin: 5.8rem auto 0;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.service-flow-simple-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem 1.2rem;
  align-content: start;
}

.service-flow-simple-list span {
  color: var(--main-color2);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.3;
}

.service-flow-simple-list strong {
  color: var(--black);
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1.28;
}

.service-flow-simple-list p {
  grid-column: 2;
  color: rgba(0, 0, 0, .58);
  font-size: 1.36rem;
  font-weight: 650;
  line-height: 1.58;
}

.service-note-target {
  isolation: isolate;
  cursor: pointer;
}

.service-section-head h3.service-note-target:hover,
.service-section-head h3.service-note-target:focus-within,
.service-note-target:hover h4,
.service-note-target:focus-within h4,
.service-note-target:hover strong,
.service-note-target:focus-within strong {
  color: var(--main-color2);
}

.service-flow-panel h3.service-note-target:hover,
.service-flow-panel h3.service-note-target:focus-within {
  color: #c4b5fd;
}

.service-note-target:hover p,
.service-note-target:focus-within p,
.service-note-target:hover span:not(.service-hover-note),
.service-note-target:focus-within span:not(.service-hover-note) {
  color: rgba(0, 0, 0, .78);
}

.service-flow-list .service-note-target:hover,
.service-flow-list .service-note-target:focus-within {
  border-color: rgba(139, 92, 246, .38);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(255, 255, 255, .98) 42%),
    #fff;
  box-shadow: 0 18px 44px rgba(139, 92, 246, .12);
}

.service-hover-note {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0 1.35rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px 999px 999px .35rem;
  background: var(--main-color2);
  color: var(--white);
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 1.4rem 3.2rem rgba(80, 42, 180, .24);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--note-x, -999px), var(--note-y, -999px), 0) translate(1.8rem, -130%) rotate(var(--note-rotate, -2deg)) scale(.92);
  transform-origin: 0 100%;
  transition:
    opacity .22s ease,
    transform .12s linear,
    background .22s ease;
}

.service-hover-note:hover,
.service-hover-note:focus-visible {
  background: var(--main-color);
  color: var(--white);
}

.service-hover-note.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(var(--note-x, -999px), var(--note-y, -999px), 0) translate(1.8rem, -130%) rotate(var(--note-rotate, -2deg)) scale(1);
}

@media (hover: none) {
  .service-hover-note {
    display: none;
  }
}

.service-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  overflow: hidden;
}

.service-process-step {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 25rem;
  padding: 3.4rem 2.6rem;
  border-right: 1px solid rgba(0, 0, 0, .1);
  background: var(--white);
  transition:
    border-color .34s var(--ease-premium),
    transform .34s var(--ease-premium),
    box-shadow .34s var(--ease-premium);
}

.service-process-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.6rem;
  width: 0;
  height: .3rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--main-color), rgba(139, 92, 246, 0));
  opacity: 0;
  transition:
    width .38s var(--ease-premium),
    opacity .24s var(--ease-premium);
}

.service-process-step:last-child {
  border-right: 0;
}

.service-process-step.is-active,
.service-process-step:hover,
.service-process-step:focus-within {
  z-index: 2;
  border-color: rgba(0, 0, 0, .1);
  box-shadow: none;
  transform: none;
}

.service-process-step.is-active::before,
.service-process-step:hover::before,
.service-process-step:focus-within::before {
  width: 7.2rem;
  opacity: 1;
}

.service-process-step span {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 .95rem;
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: 999px;
  background: rgba(139, 92, 246, .04);
  color: var(--main-color2);
  font-size: 1.25rem;
  font-weight: 900;
  transform-origin: left center;
  transition:
    background .3s var(--ease-premium),
    border-color .3s var(--ease-premium),
    box-shadow .3s var(--ease-premium),
    color .3s var(--ease-premium),
    transform .3s var(--ease-premium);
}

.service-process-step h4 {
  margin-top: 3rem;
  color: var(--black);
  font-size: 2.3rem;
  font-weight: 900;
  transition: color .45s var(--ease-main);
}

.service-process-step p {
  margin-top: 1.4rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.7;
  transition: color .45s var(--ease-main);
}

.service-process-step.is-active span,
.service-process-step:hover span,
.service-process-step:focus-within span {
  border-color: transparent;
  background: linear-gradient(135deg, var(--main-color), #6d28d9);
  color: var(--white);
  box-shadow: 0 .9rem 2.4rem rgba(139, 92, 246, .34);
  transform: scale(1.08);
  animation: service-process-step-pop .34s var(--ease-premium);
}

.service-process-step.is-active h4,
.service-process-step:hover h4,
.service-process-step:focus-within h4 {
  color: var(--black);
}

.service-process-step.is-active p,
.service-process-step:hover p,
.service-process-step:focus-within p {
  color: rgba(0, 0, 0, .72);
}

@keyframes service-process-step-pop {
  0% {
    opacity: .3;
    transform: scale(.92);
  }

  68% {
    opacity: 1;
    transform: scale(1.11);
  }

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

.service-goal {
  position: relative;
  overflow: hidden;
  min-height: 62rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: radial-gradient(circle at center, rgba(35, 21, 92, .68) 0%, rgba(6, 8, 18, .96) 42%, #000 82%);
  color: var(--white);
}

.service-goal-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.service-space-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.service-goal-bg::before,
.service-goal-bg::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.service-goal-bg::before {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .13), transparent 31%),
    radial-gradient(circle at 54% 48%, rgba(139, 92, 246, .34), transparent 34%),
    linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(0, 0, 0, .62));
}

.service-goal-bg::after {
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at center, transparent 0%, transparent 44%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .12) 44%, rgba(0, 0, 0, .46));
}

.service-goal-inner {
  position: relative;
  z-index: 4;
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.service-goal-inner > span {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(139, 92, 246, .6);
  color: var(--main-color);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-goal-inner h3 {
  max-width: 68rem;
  min-height: 1.18em;
  margin-top: 3rem;
  scroll-margin-top: calc(var(--header-fixed-height) + 18rem);
  color: var(--white);
  font-size: clamp(3.2rem, 4.3vw, 5.8rem);
  font-weight: 900;
  line-height: 1.18;
}

.service-typewriter-title {
  word-break: keep-all;
}

.service-typewriter-text {
  font-weight: inherit;
}

.service-typewriter-cursor {
  display: inline-block;
  width: 0;
  margin-left: 0;
  overflow: visible;
  color: var(--main-color);
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 0 1.8rem rgba(139, 92, 246, .82);
  vertical-align: baseline;
  transform: translate(.08em, -.03em);
  animation: service-typewriter-cursor .82s steps(1, end) infinite;
}

.service-typewriter-title.is-typewriter-complete .service-typewriter-cursor {
  animation: service-typewriter-cursor .82s steps(1, end) infinite;
}

@keyframes service-typewriter-cursor {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: .16;
  }
}

.service-goal-inner p {
  max-width: 68rem;
  margin-top: 2.6rem;
  color: rgba(255, 255, 255, .68);
  font-size: 1.8rem;
  font-weight: 650;
  line-height: 1.75;
}

.service-goal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22.5rem;
  height: 5rem;
  margin-top: 4.2rem;
  border: 2px solid var(--white);
  border-radius: 5rem;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font-size: 1.28rem;
  font-weight: 800;
  backdrop-filter: blur(20px);
  transition: transform .25s var(--ease-main), border-color .25s;
}

.service-goal-btn .txt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem 0 2rem;
  line-height: 1;
  white-space: nowrap;
}

.service-goal-btn:hover,
.service-goal-btn:focus-visible {
  border-color: var(--white);
  transform: translateY(-.3rem);
}

#wrap.request-page {
  overflow: visible;
  background: var(--white);
}

#wrap.request-page #header,
#wrap.request-page #header.top-fixed {
  position: sticky;
  top: 0;
  height: var(--header-fixed-height);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(10px);
}

#wrap.request-page #header::before,
#wrap.request-page #header.top-fixed::before {
  height: var(--header-fixed-height);
  background: transparent;
  transform: none;
}

#wrap.request-page #headerInnerWrap,
#wrap.request-page #header.top-fixed #headerInnerWrap,
#wrap.request-page #headerInner,
#wrap.request-page #header.top-fixed #headerInner {
  height: var(--header-fixed-height);
}

#wrap.request-page .site-logo-img,
#wrap.request-page #header.top-fixed .site-logo-img {
  filter: none;
}

#wrap.request-page #gnb > ul > li > a,
#wrap.request-page #header.top-fixed #gnb > ul > li > a {
  color: var(--black);
  line-height: var(--header-fixed-height);
}

#wrap.request-page .header-email-consult {
  border-color: var(--black);
  color: var(--black);
}

#wrap.request-page .header-email-consult .cm-fill {
  background: var(--black);
}

#wrap.request-page .header-email-consult:hover,
#wrap.request-page .header-email-consult:focus-visible {
  color: var(--white);
}

#wrap.request-page #header .logo,
#wrap.request-page .nav-open-btn-wrap,
#wrap.request-page #header .header-util-box,
#wrap.request-page #gnb > ul {
  opacity: 1;
  transform: none;
}

.request-page-main {
  background: var(--white);
}

.request-page-hero {
  position: relative;
  padding-top: 13rem;
  padding-bottom: 9rem;
}

.request-page-ghost {
  position: absolute;
  right: 2rem;
  top: 5.8rem;
  z-index: 0;
  color: rgba(0, 0, 0, .035);
  font-size: clamp(8rem, 14vw, 22rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.request-page-kicker {
  position: relative;
  z-index: 1;
  color: var(--black);
  font-size: clamp(5rem, 7vw, 9rem);
  font-weight: 900;
  line-height: .95;
}

.request-page-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 116rem;
  margin-top: 6.4rem;
  color: var(--black);
  font-size: clamp(4rem, 4.9vw, 7.2rem);
  font-weight: 950;
  line-height: 1.18;
}

.request-page-desc {
  position: relative;
  z-index: 1;
  max-width: 96rem;
  margin-top: 2.6rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.78rem;
  font-weight: 560;
  line-height: 1.76;
}

.request-page-body {
  padding-bottom: 14rem;
}

.request-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 54rem;
  gap: .8rem;
  padding: .9rem;
  border-radius: 999px;
  background: #f0f0f0;
}

.request-tab-btn {
  height: 4.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.request-tab-btn:hover,
.request-tab-btn:focus-visible,
.request-tab-btn.is-active {
  background: var(--black);
  color: var(--white);
}

.request-panel {
  display: none;
  margin-top: 8rem;
}

.request-panel.is-active {
  display: block;
}

.request-form-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
  margin-bottom: 4.8rem;
}

.request-form-intro span {
  display: block;
  color: var(--main-color2);
  font-size: 1.45rem;
  font-weight: 900;
}

.request-form-intro h3 {
  margin-top: 1.2rem;
  color: var(--black);
  font-size: clamp(2.4rem, 2.2vw, 3.2rem);
  font-weight: 820;
  line-height: 1.36;
}

.request-form-intro p {
  max-width: 82rem;
  margin-top: 1.9rem;
  padding-top: 1.9rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  color: rgba(0, 0, 0, .68);
  font-size: 1.52rem;
  font-weight: 560;
  line-height: 1.72;
}

.request-form-intro em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.2rem;
  padding: 0 1.8rem;
  border-radius: .4rem;
  background: var(--main-color2);
  color: var(--white);
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 1rem 2.6rem rgba(139, 92, 246, .24);
}

.request-required-note {
  margin-bottom: 2rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: right;
}

.request-required-note span,
.request-form-label span,
.request-agree span {
  color: var(--main-color2);
}

.request-form {
  border-top: 2px solid var(--black);
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

.request-form-row {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  min-height: 8.6rem;
  border-bottom: 1px solid #dedede;
}

.request-form-row-top {
  align-items: start;
  padding: 2rem 0;
}

.request-form-label {
  color: var(--black);
  font-size: 1.65rem;
  font-weight: 850;
}

.request-form-field input[type="text"],
.request-form-field input[type="url"],
.request-form-field textarea {
  width: 100%;
  border: 0;
  background: #f2f2f2;
  color: var(--black);
  font-size: 1.55rem;
  font-weight: 600;
  outline: none;
  transition: background .2s, box-shadow .2s;
}

.request-form-field input[type="text"],
.request-form-field input[type="url"] {
  height: 5.2rem;
  padding: 0 1.8rem;
}

.request-form-field textarea {
  min-height: 20rem;
  padding: 1.8rem;
  resize: vertical;
}

.request-form-field input:focus,
.request-form-field textarea:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--main-color);
}

.request-form-field input::placeholder,
.request-form-field textarea::placeholder {
  color: rgba(0, 0, 0, .35);
}

.request-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3.4rem;
}

.request-check-grid label,
.request-mini-check,
.request-agree {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: rgba(0, 0, 0, .72);
  font-size: 1.5rem;
  font-weight: 700;
}

.request-check-grid input,
.request-mini-check input,
.request-agree input {
  width: 1.7rem;
  height: 1.7rem;
  accent-color: var(--main-color2);
}

.request-help {
  margin-top: 1rem;
  color: rgba(0, 0, 0, .48);
  font-size: 1.35rem;
  font-weight: 650;
}

.request-inline-field,
.request-email-field {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.request-inline-field input {
  max-width: 26rem;
}

.request-inline-field span,
.request-email-field span {
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 800;
}

.request-email-field input {
  max-width: 24rem;
}

.request-privacy-box {
  margin-top: 4rem;
  padding: 3rem;
  background: #f7f7f7;
}

.request-privacy-box h3 {
  color: var(--black);
  font-size: 2rem;
  font-weight: 900;
}

.request-privacy-text {
  margin-top: 1.5rem;
  max-height: 12rem;
  overflow: auto;
  color: rgba(0, 0, 0, .62);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.75;
}

.request-agree {
  margin-top: 2rem;
}

.request-submit-box {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-top: 5rem;
}

.request-submit-box button {
  min-width: 26rem;
  height: 6.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--main-color2);
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .25s, transform .25s;
}

.request-submit-box button:hover,
.request-submit-box button:focus-visible {
  background: var(--black);
  transform: translateY(-2px);
}

.request-submit-box p {
  min-height: 2rem;
  color: var(--main-color2);
  font-size: 1.4rem;
  font-weight: 750;
}

.request-status-head {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: end;
  padding-bottom: 2.4rem;
  border-bottom: 2px solid var(--black);
}

.request-status-head h3 {
  color: var(--black);
  font-size: 3.6rem;
  font-weight: 900;
}

.request-status-head p {
  margin-top: 1rem;
  color: rgba(0, 0, 0, .55);
  font-size: 1.5rem;
  font-weight: 650;
}

.request-status-head strong {
  color: rgba(0, 0, 0, .46);
  font-size: 1.4rem;
  font-weight: 900;
  white-space: nowrap;
}

.request-status-table {
  border-bottom: 1px solid #dedede;
}

.request-status-row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr .9fr .7fr .5fr;
  gap: 1.6rem;
  align-items: center;
  min-height: 7.2rem;
  border-top: 1px solid #e5e5e5;
  color: var(--black);
}

.request-status-row-head {
  min-height: 5.8rem;
  color: rgba(0, 0, 0, .48);
  font-size: 1.3rem;
  font-weight: 900;
}

.request-status-row strong {
  font-size: 1.6rem;
  font-weight: 900;
}

.request-status-row span,
.request-status-row em,
.request-status-row time {
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 700;
}

.request-status-row i {
  justify-self: start;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: var(--main-color2);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 900;
}

.request-status-pagination {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 3.5rem;
}

.request-status-pagination button {
  width: 4rem;
  height: 4rem;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: 1.4rem;
  font-weight: 850;
  cursor: pointer;
}

.request-status-pagination button:hover,
.request-status-pagination button:focus-visible,
.request-status-pagination button.is-active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.about-page-main {
  overflow: visible;
  background: var(--white);
}

.about-hero {
  position: relative;
  overflow: hidden;
  padding-top: 18rem;
  padding-bottom: 10rem;
}

.about-ghost {
  position: absolute;
  right: 0;
  top: 13rem;
  color: rgba(0, 0, 0, .045);
  font-size: clamp(9rem, 17vw, 24rem);
  font-weight: 950;
  line-height: .8;
  white-space: nowrap;
  pointer-events: none;
}

.about-kicker {
  position: relative;
  z-index: 1;
  color: var(--black);
  font-size: clamp(5.2rem, 7vw, 10rem);
  font-weight: 950;
  line-height: 1;
}

.about-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 112rem;
  margin-top: 7rem;
  color: var(--black);
  font-size: clamp(4.2rem, 5vw, 7.8rem);
  font-weight: 950;
  line-height: 1.18;
}

.about-lead {
  position: relative;
  z-index: 1;
  max-width: 94rem;
  margin-top: 3rem;
  color: rgba(0, 0, 0, .66);
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.78;
}

.about-brand-stage {
  display: grid;
  grid-template-columns: minmax(28rem, .75fr) minmax(0, 1.25fr);
  min-height: 46rem;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #050505;
  box-shadow: 0 3rem 9rem rgba(0, 0, 0, .16);
}

.about-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 92, 246, .28), transparent 28rem),
    linear-gradient(135deg, #0b0b0f, #030303);
}

.about-brand-mark img {
  width: min(28rem, 70%);
  filter: invert(1) brightness(1.8);
}

.about-brand-slogan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: clamp(4rem, 7vw, 8rem);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .18)),
    url("../images/hero/hero4.webp") center / cover;
}

.about-brand-slogan::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .58));
  content: "";
}

.about-brand-slogan span,
.about-brand-slogan p {
  position: relative;
  z-index: 1;
}

.about-brand-slogan span {
  color: var(--main-color);
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.about-brand-slogan p {
  max-width: 78rem;
  margin-top: 2.4rem;
  color: var(--white);
  font-size: clamp(4rem, 5vw, 7.2rem);
  font-weight: 950;
  line-height: 1.08;
}

.about-section {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.about-split-section,
.about-letter-section {
  display: grid;
  grid-template-columns: minmax(28rem, .58fr) minmax(0, 1fr);
  gap: clamp(5rem, 8vw, 11rem);
  align-items: start;
}

.about-section + .about-section,
.about-letter-section + .about-section {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.about-section-title,
.about-letter-head {
  position: relative;
  top: auto;
}

.about-section-title span,
.about-letter-head span,
.about-cta-section > div > span {
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  padding: 0 1rem;
  border: 1px solid rgba(139, 92, 246, .32);
  color: var(--main-color2);
  font-size: 1.16rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.about-section-title h3,
.about-letter-head h3 {
  margin-top: 2.4rem;
  color: var(--black);
  font-size: clamp(3.8rem, 4vw, 6.4rem);
  font-weight: 950;
  line-height: 1.18;
}

.about-body-copy {
  color: rgba(0, 0, 0, .68);
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.85;
}

.about-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 5rem;
}

.about-value-grid article {
  min-height: 28rem;
  padding: 3.2rem;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;
}

.about-value-grid em {
  display: block;
  color: var(--main-color2);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 950;
}

.about-value-grid strong {
  display: block;
  margin-top: 4.4rem;
  color: var(--black);
  font-size: 2.2rem;
  font-weight: 950;
  line-height: 1.35;
}

.about-value-grid p {
  margin-top: 1.6rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.72;
}

.about-letter-section {
  padding-top: 13rem;
  padding-bottom: 13rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background:
    radial-gradient(circle at 8% 18%, rgba(139, 92, 246, .08), transparent 34rem),
    var(--white);
}

.about-letter-copy {
  color: rgba(0, 0, 0, .72);
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.95;
}

.about-letter-copy p + p {
  margin-top: 2.4rem;
}

.about-letter-copy strong {
  display: block;
  margin-top: 4rem;
  color: var(--black);
  font-size: 1.8rem;
  font-weight: 950;
}

.about-team-chart {
  margin-top: 5rem;
  border-top: 2px solid var(--black);
}

.about-team-lead {
  width: min(36rem, 100%);
  margin: 4rem auto 0;
  padding: 3rem;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  text-align: center;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .16);
}

.about-team-lead strong,
.about-team-grid strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 950;
}

.about-team-lead span,
.about-team-grid span {
  display: block;
  margin-top: .8rem;
  color: rgba(255, 255, 255, .62);
  font-size: 1.35rem;
  font-weight: 800;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 5rem;
}

.about-team-grid article {
  min-height: 19rem;
  padding: 3.4rem 2.4rem;
  border: 1px solid rgba(0, 0, 0, .1);
  background:
    linear-gradient(180deg, rgba(139, 92, 246, .08), transparent),
    #fff;
  text-align: center;
}

.about-team-grid span {
  color: rgba(0, 0, 0, .5);
}

.about-client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 5rem;
  background: rgba(0, 0, 0, .1);
  border: 1px solid rgba(0, 0, 0, .1);
}

.about-client-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 15.5rem;
  padding: 2rem;
  background: #fff;
}

.about-client-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--black), var(--main-color2));
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 950;
}

.about-client-grid strong {
  margin-top: 1.6rem;
  color: rgba(0, 0, 0, .76);
  font-size: 1.5rem;
  font-weight: 850;
  text-align: center;
}

.about-cta-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4rem;
  align-items: end;
  margin-bottom: 12rem;
  padding: clamp(4rem, 7vw, 7rem);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(139, 92, 246, .3), transparent 30rem),
    #050505;
}

.about-cta-section h3 {
  margin-top: 2.4rem;
  color: var(--white);
  font-size: clamp(3.8rem, 4.2vw, 6.4rem);
  font-weight: 950;
  line-height: 1.18;
}

.about-cta-section p {
  max-width: 70rem;
  margin-top: 2.4rem;
  color: rgba(255, 255, 255, .68);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.7;
}

.about-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23rem;
  height: 6.4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: var(--main-color2);
  box-shadow: 0 1.4rem 3rem rgba(139, 92, 246, .32);
  color: var(--white);
  font-size: 1.55rem;
  font-weight: 950;
  transition:
    transform .28s var(--ease-main),
    border-color .28s var(--ease-main),
    background .28s var(--ease-main),
    box-shadow .28s var(--ease-main);
}

.about-cta-btn:hover,
.about-cta-btn:focus-visible {
  border-color: rgba(255, 255, 255, .85);
  background: #6d4cff;
  box-shadow: 0 1.8rem 4rem rgba(139, 92, 246, .42);
  transform: translateY(-.25rem);
}

.about-cta-btn .txt {
  position: relative;
  z-index: 1;
}

/* About page */
.about-page-main {
  overflow: hidden;
  background: var(--white);
}

.about-page [data-scroll] {
  transform: translateY(24px);
  transition:
    opacity .95s var(--ease-main),
    transform .95s var(--ease-main);
}

.about-page [data-scroll="fade"] {
  transform: translateY(0);
}

.about-hero-slider {
  position: relative;
  height: clamp(70rem, 100vh, 86rem);
  min-height: 70rem;
  overflow: hidden;
  background: #050505;
  color: var(--white);
}

.about-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 1s var(--ease-main),
    visibility 1s var(--ease-main);
}

.about-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-hero-bg,
.about-hero-shade {
  position: absolute;
  inset: 0;
}

.about-hero-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .72;
  transform: scale(1.04);
  transition: transform 5.8s var(--ease-main);
}

.about-hero-slide.is-active .about-hero-bg {
  transform: scale(1);
}

.about-hero-slide:nth-child(1) .about-hero-bg {
  background-position: center;
}

.about-hero-slide:nth-child(2) .about-hero-bg {
  background-position: 61% center;
}

.about-hero-slide:nth-child(3) .about-hero-bg {
  background-position: 66% center;
}

.about-hero-slide:nth-child(4) .about-hero-bg {
  background-position: 56% center;
}

.about-hero-slide:nth-child(5) .about-hero-bg {
  background-position: 70% center;
}

.about-hero-shade {
  background:
    radial-gradient(circle at 82% 20%, rgba(139, 92, 246, .28), transparent 32rem),
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .68) 39%, rgba(0, 0, 0, .34) 73%, rgba(0, 0, 0, .48) 100%);
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--header-fixed-height);
}

.about-hero-label {
  color: var(--main-color2);
  font-size: 1.8rem;
  font-weight: 950;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.about-hero-title {
  max-width: 118rem;
  margin-top: 2.8rem;
  color: var(--white);
  font-size: clamp(5.8rem, 5.8vw, 9.6rem);
  font-weight: 300;
  line-height: 1.12;
}

.about-hero-title span,
.about-hero-title strong {
  display: block;
}

.about-hero-title strong {
  margin-top: .6rem;
  font-weight: 950;
}

.about-hero-copy {
  max-width: 86rem;
  margin-top: 3rem;
  color: rgba(255, 255, 255, .84);
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.7;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 7rem;
}

.about-hero-cta,
.about-hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  transition:
    background .28s var(--ease-main),
    border-color .28s var(--ease-main),
    color .28s var(--ease-main),
    transform .28s var(--ease-main);
}

.about-hero-cta {
  min-width: 24.5rem;
  padding: 0 3.8rem;
  border-radius: 1.2rem;
  background: var(--main-color2);
  color: var(--white);
  font-size: 1.9rem;
  font-weight: 950;
  box-shadow: 0 1.8rem 4.5rem rgba(139, 92, 246, .35);
}

.about-hero-arrow {
  width: 7rem;
  border: 2px solid rgba(255, 255, 255, .84);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--white);
  font-size: 4rem;
  line-height: 1;
  cursor: pointer;
}

.about-hero-cta:hover,
.about-hero-arrow:hover {
  transform: translateY(-.25rem);
}

.about-hero-cta:hover {
  background: #6d4df2;
}

.about-hero-arrow:hover {
  border-color: var(--main-color2);
  background: var(--main-color2);
}

.home-hook-hero.about-hero-slider {
  height: clamp(58rem, 78vh, 76rem);
  min-height: 58rem;
}

.home-hook-hero .about-hero-title {
  font-size: clamp(4.6rem, 5.2vw, 8.6rem);
}

.home-hook-hero .about-hero-copy {
  max-width: 78rem;
}

.about-top,
.about-start {
  position: relative;
  min-height: 78rem;
  padding-top: var(--header-fixed-height);
  padding-bottom: 8rem;
}

.about-start {
  min-height: 62rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.about-top-title,
.about-top-copy {
  position: relative;
  z-index: 1;
}

.about-top-title {
  padding-top: 11.5rem;
}

.about-top-copy {
  max-width: 118rem;
  margin-top: 5rem;
}

.about-bg-title {
  position: absolute;
  inset: 50% auto auto 0;
  width: 140vw;
  pointer-events: none;
  transform: translateY(-42%);
  z-index: -1;
}

.about-bg-title p {
  color: rgba(0, 0, 0, .035);
  font-size: clamp(12rem, 19vw, 30rem);
  font-weight: 950;
  line-height: .8;
  white-space: nowrap;
  transform: translateX(-15vw);
  transition: transform 1.25s var(--ease-main);
}

.about-top.animated .about-bg-title p,
.about-start.animated .about-bg-title p {
  transform: translateX(-4vw);
}

.about-page-title {
  color: var(--black);
  font-size: clamp(6.4rem, 7vw, 10.8rem);
  font-weight: 950;
  line-height: .86;
}

.about-page-title.splitting .char,
.about-top-bold.splitting .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity .8s var(--ease-main),
    transform .8s var(--ease-main);
  transition-delay: calc(var(--char-delay, 0s) + (var(--char-index, 0) * var(--char-speed, .03s)));
}

.about-top.animated .about-page-title.splitting .char,
.about-top.animated .about-top-bold.splitting .char,
.about-start.animated .about-page-title.splitting .char {
  opacity: 1;
  transform: translateY(0);
}

.about-top-bold {
  color: var(--black);
  font-size: clamp(4.2rem, 4.55vw, 7.4rem);
  font-weight: 950;
  line-height: 1.18;
}

.about-top-sub {
  max-width: 96rem;
  margin-top: 3.8rem;
  color: rgba(0, 0, 0, .58);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.85;
}

.about-column-section {
  display: grid;
  grid-template-columns: minmax(22rem, 27%) minmax(0, 1fr);
  gap: clamp(5rem, 7vw, 10rem);
  padding-top: 13rem;
  padding-bottom: 13rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.about-page-main > .about-column-section:first-child {
  padding-top: calc(var(--header-fixed-height) + 10rem);
  border-top: 0;
}

.about-top + .about-column-section,
.about-hero-slider + .about-column-section {
  padding-top: 9rem;
}

.about-title-box h3 {
  color: var(--black);
  font-size: clamp(6rem, 6.8vw, 11rem);
  font-weight: 950;
  line-height: .92;
}

.about-title-box p {
  margin-top: 2.2rem;
  color: rgba(0, 0, 0, .32);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.6;
}

.about-info-box {
  min-width: 0;
}

.about-lead-copy {
  max-width: 108rem;
  color: rgba(0, 0, 0, .78);
  font-size: 1.86rem;
  font-weight: 650;
  line-height: 1.9;
}

.about-lead-copy p + p {
  margin-top: 1.4rem;
}

.about-who-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.8rem 3.4rem;
  margin-top: 8rem;
}

.about-who-list li {
  min-height: 34.5rem;
  padding: 4.2rem;
  background: #f1f1f1;
  border: 1px solid transparent;
  color: var(--black);
  transition:
    background .28s var(--ease-premium),
    border-color .28s var(--ease-premium),
    box-shadow .28s var(--ease-premium),
    color .28s var(--ease-premium),
    transform .28s var(--ease-premium);
}

.about-who-list li:hover {
  background: #f7f4ff;
  border-color: rgba(139, 92, 246, .22);
  box-shadow: 0 1.6rem 4.2rem rgba(109, 40, 217, .1);
  color: var(--black);
  transform: translateY(-.25rem);
}

.about-who-list i {
  display: block;
  color: var(--main-color2);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 950;
}

.about-who-list strong {
  display: block;
  margin-top: 2.4rem;
  color: currentColor;
  font-size: 2rem;
  font-weight: 950;
}

.about-who-list h4 {
  margin-top: 1.2rem;
  color: currentColor;
  font-size: 2.35rem;
  font-weight: 850;
  line-height: 1.4;
}

.about-who-list p {
  margin-top: 4.2rem;
  color: rgba(0, 0, 0, .62);
  font-size: 1.55rem;
  font-weight: 650;
  line-height: 1.82;
  transition: color .3s var(--ease-main);
}

.about-message-section {
  background:
    linear-gradient(90deg, transparent 0 27%, rgba(139, 92, 246, .035) 27% 100%),
    var(--white);
}

.about-message-section .about-title-box h3 {
  font-size: clamp(5.4rem, 5.6vw, 8.8rem);
}

.about-message-copy {
  max-width: 98rem;
  color: rgba(0, 0, 0, .78);
  font-size: 1.92rem;
  font-weight: 680;
  line-height: 1.95;
}

.about-message-copy p + p {
  margin-top: 2.4rem;
}

.about-message-copy strong {
  display: block;
  margin-top: 5rem;
  color: var(--black);
  font-size: 1.9rem;
  font-weight: 950;
}

.about-org-chart {
  position: relative;
  max-width: 84rem;
  min-height: auto;
  margin: 0 auto;
  padding-top: 0;
}

.about-org-lead {
  width: min(32rem, 100%);
  margin: 0 auto;
  padding-bottom: 3.8rem;
  text-align: center;
}

.about-org-lead span,
.about-org-list span {
  display: block;
  color: var(--black);
  font-size: 2.7rem;
  font-weight: 850;
}

.about-org-lead p,
.about-org-list p {
  margin-top: 1.1rem;
  color: rgba(0, 0, 0, .48);
  font-size: 1.65rem;
  font-weight: 750;
}

.about-org-line {
  width: 1px;
  height: 12rem;
  margin: 0 auto;
  background: var(--black);
}

.about-org-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 5.6rem;
  text-align: center;
}

.about-org-list::before {
  content: "";
  position: absolute;
  left: calc(16.666% - .5px);
  right: calc(16.666% - .5px);
  top: -3rem;
  height: 1px;
  background: var(--black);
}

.about-org-list li {
  position: relative;
  padding-top: 4.4rem;
}

.about-org-list li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3rem;
  width: 1px;
  height: 3rem;
  background: var(--black);
}

.about-client-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.4rem 3rem;
  align-items: end;
}

.about-client-list li {
  min-height: 13.8rem;
  text-align: center;
}

.about-client-list figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(0, 0, 0, .075);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, .045);
  transition:
    border-color .28s var(--ease-main),
    box-shadow .28s var(--ease-main),
    transform .28s var(--ease-main);
}

.about-client-list img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 18rem;
  object-fit: contain;
  filter: grayscale(1) contrast(.92) opacity(.72);
  transition: filter .28s var(--ease-main), transform .28s var(--ease-main);
}

.about-client-list p {
  margin-top: 1.2rem;
  color: rgba(0, 0, 0, .44);
  font-size: 1.55rem;
  font-weight: 700;
}

.about-client-list li:hover figure {
  border-color: rgba(139, 92, 246, .24);
  box-shadow: 0 2.4rem 5.6rem rgba(124, 58, 237, .12);
  transform: translateY(-.45rem);
}

.about-client-list li:hover img {
  filter: grayscale(.25) contrast(1) opacity(.95);
  transform: scale(1.035);
}

.about-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22rem;
  height: 6.4rem;
  margin-top: 4.2rem;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 999px;
  color: var(--black);
  font-size: 1.6rem;
  font-weight: 950;
}

.about-start-btn:hover {
  color: var(--white);
}

.about-start .about-bg-title p {
  color: rgba(0, 0, 0, .045);
}

@media all and (max-width: 1024px) {
  .about-hero-slider {
    height: 78rem;
    min-height: 78rem;
  }

  .home-hook-hero.about-hero-slider {
    height: 68rem;
    min-height: 68rem;
  }

  .about-hero-inner {
    padding-top: calc(var(--header-fixed-height) + 2rem);
  }

  .about-hero-title {
    max-width: 84rem;
    font-size: clamp(5rem, 8.4vw, 8rem);
  }

  .about-hero-copy {
    max-width: 66rem;
    font-size: 1.9rem;
  }

  .about-top,
  .about-start {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: 68rem;
    gap: 5rem;
  }

  .about-bg-title {
    top: 24%;
  }

  .about-column-section {
    grid-template-columns: 1fr;
    gap: 5rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .about-title-box h3 {
    font-size: clamp(5.2rem, 12vw, 8rem);
  }

  .about-who-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-client-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.8rem 2rem;
  }
}

@media all and (max-width: 800px) {
  .about-hero-slider {
    height: 72rem;
    min-height: 72rem;
  }

  .about-hero-bg {
    opacity: .68;
  }

  .about-hero-shade {
    background:
      radial-gradient(circle at 78% 18%, rgba(139, 92, 246, .32), transparent 24rem),
      linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .74) 52%, rgba(0, 0, 0, .42) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, .54), transparent 52%);
  }

  .about-hero-slide:nth-child(1) .about-hero-bg,
  .about-hero-slide:nth-child(2) .about-hero-bg,
  .about-hero-slide:nth-child(3) .about-hero-bg,
  .about-hero-slide:nth-child(4) .about-hero-bg,
  .about-hero-slide:nth-child(5) .about-hero-bg {
    background-position: 62% center;
  }

  .about-hero-inner {
    padding-top: calc(var(--header-fixed-height) + 5rem);
    padding-bottom: 6rem;
  }

  .about-hero-label {
    font-size: 1.25rem;
    letter-spacing: .24em;
  }

  .about-hero-title {
    max-width: 100%;
    margin-top: 2rem;
    font-size: clamp(4.2rem, 12.5vw, 6.2rem);
    line-height: 1.14;
  }

  .about-hero-copy {
    max-width: 34rem;
    margin-top: 2.4rem;
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .about-hero-actions {
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 4.2rem;
  }

  .about-hero-cta {
    width: min(25rem, 100%);
    min-width: 0;
    height: 6.2rem;
    padding: 0 2.8rem;
    font-size: 1.65rem;
  }

  .about-hero-arrow {
    width: 5.8rem;
    height: 5.8rem;
    font-size: 3.2rem;
  }

  .about-top,
  .about-start {
    min-height: auto;
    padding-top: calc(var(--header-fixed-height) + 8rem);
    padding-bottom: 9rem;
  }

  .about-top-title {
    padding-top: 0;
  }

  .about-page-title {
    font-size: clamp(5.8rem, 17vw, 8.6rem);
  }

  .about-top-bold {
    font-size: clamp(3.6rem, 10.8vw, 5.3rem);
  }

  .about-top-sub {
    margin-top: 2.4rem;
    font-size: 1.55rem;
  }

  .about-bg-title {
    top: 16%;
  }

  .about-bg-title p {
    font-size: clamp(8rem, 29vw, 13rem);
    transform: translateX(-8vw);
  }

  .about-top.animated .about-bg-title p,
  .about-start.animated .about-bg-title p {
    transform: translateX(-2vw);
  }

  .about-column-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .about-title-box h3 {
    font-size: clamp(4.8rem, 16vw, 6.6rem);
  }

  .about-lead-copy,
  .about-message-copy {
    font-size: 1.58rem;
  }

  .about-who-list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 4.5rem;
  }

  .about-who-list li {
    min-height: auto;
    padding: 3.2rem;
  }

  .about-who-list p {
    margin-top: 2.6rem;
  }

  .about-org-chart {
    min-height: auto;
  }

  .about-org-line {
    height: 8rem;
  }

  .about-org-list {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
  }

  .about-org-list::before,
  .about-org-list li::before {
    display: none;
  }

  .about-org-list li {
    padding: 2.8rem 0 0;
    border-top: 1px solid var(--black);
  }

  .about-client-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.6rem 1.4rem;
  }

  .about-client-list li {
    min-height: 12.4rem;
  }

  .about-client-list figure {
    height: 7.4rem;
    padding: 1.2rem 1.3rem;
    border-radius: 1.1rem;
  }

  .about-client-list p {
    font-size: 1.32rem;
  }

  .about-start-btn {
    width: min(100%, 22rem);
  }
}

#footer {
  position: relative;
  overflow: hidden;
  background: var(--black);
}

#footerInner {
  position: relative;
  z-index: 1;
}

.footer-logo-video {
  position: absolute;
  inset: 0;
}

.footer-logo-video .video-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.footer-motion-mark {
  position: absolute;
  top: -18%;
  left: 28%;
  width: 90rem;
  height: 90rem;
  border: 12rem solid rgba(255, 255, 255, .08);
  opacity: .62;
  transform: rotate(12deg) scale(1.15);
  animation: footer-mark 16s linear infinite;
}

.footer-motion-mark::before,
.footer-motion-mark::after {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  content: "";
}

.footer-motion-mark::before {
  top: 50%;
  left: -20%;
  width: 140%;
  height: 12rem;
  transform: translateY(-50%);
}

.footer-motion-mark::after {
  top: -20%;
  left: 50%;
  width: 12rem;
  height: 140%;
  transform: translateX(-50%);
}

@keyframes footer-mark {
  from { transform: rotate(12deg) scale(1.15); }
  to { transform: rotate(372deg) scale(1.15); }
}

#footerTop .footer-top-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4rem;
  align-items: center;
  padding: 11.5rem 0 5.6rem;
  border-bottom: 1px solid #434241;
}

.footer-slogan-txt {
  justify-self: center;
  max-width: 72rem;
  color: var(--white);
  font-size: clamp(3.2rem, 3.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
}

.footer-consulting-con {
  justify-self: end;
  padding-top: 0;
}

.footer-consulting-con .to-footer-consulting-btn {
  display: inline-flex;
  gap: 1.2rem;
  align-items: center;
  min-height: 5.8rem;
  padding: 0 2.8rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: var(--main-color2);
  color: var(--white);
  box-shadow: 0 1.6rem 4rem rgba(139, 92, 246, .24);
  transition: background .25s, border-color .25s, transform .25s var(--ease-main);
}

.footer-consulting-con .to-footer-consulting-btn:hover,
.footer-consulting-con .to-footer-consulting-btn:focus-visible {
  border-color: rgba(255, 255, 255, .52);
  background: #9f7aea;
  transform: translateY(-2px);
}

.footer-consulting-con .to-footer-consulting-btn .txt {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.footer-consulting-con .to-footer-consulting-btn .icon {
  flex: 0 0 auto;
  margin-left: 0;
  transform: scale(.78);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  padding: 9rem 0 15rem;
}

.footer-bottom-inner .footer-left-con,
.footer-bottom-inner .footer-right-con {
  display: flex;
}

.foot-logo {
  flex: 0 0 auto;
  width: 152px;
  margin-right: 10.9rem;
}

.footer-logo-img {
  width: 100%;
  height: auto;
  filter: invert(1);
  opacity: 1;
}

.footer-address-box {
  display: flex;
  margin-top: 1.4rem;
}

.footer-address-box .footer-address-txt:first-child {
  margin-right: 16rem;
}

.footer-address-box .footer-address-txt p {
  color: rgba(255, 255, 255, .56);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.72;
}

.footer-address-box .footer-address-txt .margin-top {
  margin-top: 1.72em;
}

.footer-address-box .footer-address-txt .copyright {
  margin-top: 1.55em;
  color: rgba(255, 255, 255, .29);
}

.footer-address-box a:hover {
  color: var(--white);
}

.footer-menu-con {
  width: 18rem;
  margin-left: 1rem;
  padding: 3rem 1.8rem 1.8rem;
  background: #161616;
}

.footer-menu-con:first-child {
  margin-left: 0;
}

.footer-menu-con li {
  font-size: 1.4rem;
  line-height: 1.72;
  text-align: right;
}

.footer-menu-con li:first-child,
.footer-menu-title {
  margin-bottom: 3.07em;
  font-weight: 700;
}

.footer-menu-title span {
  color: rgba(255, 255, 255, .68);
}

.footer-menu-con li a {
  position: relative;
  color: rgba(255, 255, 255, .56);
  transition: color .3s;
}

.footer-menu-con li a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  content: "";
  transform: scaleX(0);
  transform-origin: 100% 0;
  transition: transform .3s ease;
}

.footer-menu-con li.project a {
  color: var(--white);
}

.footer-menu-con li.privacy a {
  color: var(--main-color);
}

.footer-menu-con li.privacy a::after {
  background: var(--main-color);
}

.footer-menu-con li a:hover {
  color: var(--white);
}

.footer-menu-con li a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
}

@media all and (max-width: 1280px) {
  :root {
    --header-height: 120px;
    --header-fixed-height: 80px;
    --area-padding-wide: 3rem;
  }

  #gnb {
    display: none;
  }

  .header-util-box {
    padding-right: 50px;
  }

  .gnb-overlay-bg-m {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    background: rgba(0, 0, 0, .5);
  }

  .gnb-overlay-bg-m.open {
    display: block;
  }

  #gnbM {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -102%;
    z-index: 9999;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    background:
      radial-gradient(circle at 78% 18%, rgba(139, 92, 246, .24), transparent 34rem),
      linear-gradient(135deg, rgba(12, 12, 14, .98), rgba(30, 24, 42, .96));
    box-shadow: -2px 1px 11px rgba(0, 0, 0, .3);
    overflow-y: auto;
    visibility: hidden;
    transition: right .4s var(--ease-main), visibility .4s var(--ease-main);
  }

  #gnbM.open {
    right: 0;
    z-index: 10001;
    visibility: visible;
  }

  .gnb-navigation-wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--header-height) var(--area-padding) 4.8rem;
    overflow-y: auto;
  }

  #navigation > li > a,
  .mobile-sub-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.5rem var(--area-padding);
    border: 0;
    background: transparent;
    color: var(--white);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }

  #navigation > li > a:hover,
  #navigation > li > a:focus-visible,
  .mobile-sub-toggle:hover,
  .mobile-sub-toggle:focus-visible {
    color: var(--main-color);
  }

  .mobile-sub-toggle::after {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-left: 1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-.25rem) rotate(45deg);
    transition: transform .28s var(--ease-main);
  }

  .has-sub-menu.open .mobile-sub-toggle {
    color: var(--main-color);
  }

  .has-sub-menu.open .mobile-sub-toggle::after {
    transform: translateY(.15rem) rotate(-135deg);
  }

  .mobile-sub-menu {
    display: grid;
    gap: .3rem;
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--area-padding);
    opacity: 0;
    transform: translateY(-.8rem);
    transition:
      max-height .42s var(--ease-main),
      padding .42s var(--ease-main),
      opacity .28s ease,
      transform .42s var(--ease-main);
  }

  .has-sub-menu.open .mobile-sub-menu {
    max-height: 18rem;
    padding: 0 var(--area-padding) 1.4rem;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-sub-menu a {
    position: relative;
    display: block;
    padding: .8rem 1rem;
    color: rgba(255, 255, 255, .72);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    transition: color .22s, transform .22s var(--ease-main);
  }

  .mobile-sub-menu a::after {
    position: absolute;
    left: 50%;
    bottom: .35rem;
    width: 1.8rem;
    height: 2px;
    border-radius: 999px;
    background: var(--main-color);
    content: "";
    transform: translateX(-50%) scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .25s var(--ease-main);
  }

  .mobile-sub-menu a:hover,
  .mobile-sub-menu a:focus-visible {
    color: var(--main-color);
    transform: translateY(-1px);
  }

  .mobile-sub-menu a:hover::after,
  .mobile-sub-menu a:focus-visible::after {
    transform: translateX(-50%) scaleX(1);
  }

  .header-util-menu-box {
    margin-top: 30px;
  }

  .gnb-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .gnb-request,
  .gnb-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(220px, 72vw);
    height: 38px;
    border-radius: 25px;
  }

  .gnb-call {
    background: var(--white);
    color: var(--main-color);
  }

  .gnb-request {
    background: var(--black);
    color: var(--white);
  }

  .gnb-call span,
  .gnb-request span {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .call-icon,
  .request-icon {
    display: none;
  }

  .nav-open-btn-wrap {
    position: fixed;
    top: 0;
    right: var(--area-padding);
    z-index: 10002;
    display: block;
  }

  .nav-open-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: var(--header-height);
    border: 0;
    background: none;
    cursor: pointer;
    transition: height .3s;
  }

  #header.top-fixed .nav-open-btn {
    height: var(--header-fixed-height);
  }

  .nav-open-btn .line {
    display: block;
    width: 28px;
    height: 3px;
    margin: 2px auto;
    background: var(--white);
    transition: all .4s var(--ease-main);
  }

  #header.top-fixed .nav-open-btn .line {
    background: var(--black);
  }

  .nav-open-btn.active .line,
  #header.top-fixed .nav-open-btn.active .line {
    background: var(--white);
  }

  .nav-open-btn.active .line:nth-child(2),
  .nav-open-btn.active .line:nth-child(4) {
    opacity: 0;
  }

  .nav-open-btn.active .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-open-btn.active .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  #footerTop .footer-top-inner {
    grid-template-columns: 1fr;
    gap: 2.8rem;
    text-align: center;
  }

  .footer-consulting-con {
    justify-self: center;
  }

  .footer-bottom-inner {
    display: block;
    padding: 5.5rem 0;
  }

  .footer-bottom-inner .footer-left-con,
  .footer-bottom-inner .footer-right-con {
    justify-content: center;
  }

  .footer-bottom-inner .footer-right-con {
    margin-top: 5rem;
  }

  .footer-address-box .footer-address-txt:first-child {
    margin-right: 10rem;
  }

  .homepage-grid,
  .merged-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-page-hero-grid {
    gap: 5rem;
  }

  .request-page-ghost {
    right: 4vw;
  }

  .request-form-row {
    grid-template-columns: 22rem minmax(0, 1fr);
  }
}

@media all and (max-width: 800px) {
  :root {
    --area-padding: 5vw;
    --area-padding-wide: 5vw;
  }

  html {
    font-size: 9.5px;
  }

  #mainVisual {
    min-height: 640px;
  }

  #mainIntroCon .main-intro-bg {
    right: auto;
    left: 50%;
    transform: translate(-50%, 50%) scale(1) rotate(0deg);
  }

  #mainIntroCon.is-start .main-intro-bg {
    transform: translate(-50%, 50%) scale(1.08) rotate(8deg);
  }

  #mainIntroCon.is-end .main-intro-bg {
    right: auto;
    bottom: 7.81%;
    left: var(--area-padding);
  }

  #mainIntroCon .main-intro-txt {
    font-size: 2.8rem;
  }

  .main-visual-txt-inner {
    position: relative;
    z-index: 4;
    max-width: 92vw;
    padding-bottom: 7rem;
  }

  .main-visual-txt-con {
    z-index: 4;
  }

  .main-visual-item-inner {
    background:
      radial-gradient(circle at 50% 34%, rgba(139, 92, 246, .18), transparent 34rem),
      #050505;
  }

  .main-visual-item-inner::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .08) 34%, rgba(0, 0, 0, .82) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .16) 52%, rgba(0, 0, 0, .48));
  }

  .main-visual-pc-img,
  .main-visual-video {
    transform: none;
  }

  .main-visual-video {
    object-fit: contain;
    object-position: center 24%;
    background: #050505;
  }

  .main-visual-pc-img,
  .main-visual-pc-img.is-photo-bg {
    background-size: contain;
    background-position: center 24%;
  }

  .main-visual-item.is-active .main-visual-pc-img,
  .main-visual-item.is-active .main-visual-video {
    animation: none;
    transform: none;
  }

  .main-visual-item-inner.is-photo-bg::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .08) 36%, rgba(0, 0, 0, .84) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .14) 54%, rgba(0, 0, 0, .52));
  }

  .main-visual-txt1 {
    margin-bottom: 2rem;
  }

  .main-visual-txt2 {
    margin-bottom: 0;
    font-size: clamp(3.8rem, 10.6vw, 4.8rem);
    line-height: 1.14;
    text-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .68);
  }

  .main-visual-txt3 {
    max-width: 92vw;
    margin-top: 1.4rem;
    font-size: clamp(1.85rem, 5.2vw, 2.35rem);
    line-height: 1.5;
    text-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .72);
  }

  .main-visual-more-btn {
    margin-top: 2.5rem;
  }

  .main-visual-logo-slide {
    position: absolute;
    right: 4vw;
    bottom: 15rem;
    z-index: 2;
    width: min(18rem, 42vw);
    margin-right: 0;
    opacity: .16;
    pointer-events: none;
  }

  .main-visual-item-inner.is-logo-slide {
    justify-content: center;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .86) 54%, rgba(0, 0, 0, .64) 100%),
      linear-gradient(135deg, rgba(139, 92, 246, .78) 0%, rgba(109, 40, 217, .52) 46%, rgba(59, 7, 100, .66) 100%),
      url("../images/hero/hero4.webp") center / contain no-repeat,
      #050505;
  }

  .main-visual-item-inner.is-logo-slide::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .08) 44%, rgba(0, 0, 0, .84) 100%),
      radial-gradient(circle at 78% 58%, rgba(139, 92, 246, .18), transparent 24rem);
  }

  .main-visual-control-con {
    bottom: 7.81%;
  }

  .main-visual-control-inner {
    flex-wrap: wrap;
  }

  .main-visual-progress-bar {
    width: calc(100% - 14rem);
  }

  .main-inquiry-box {
    width: 100%;
    margin-top: 2rem;
  }

  .main-inquiry-btn {
    width: 100%;
  }

  .main-inquiry-box.is-end .main-inquiry-btn {
    width: 100%;
  }

  .main-tit-box {
    margin-bottom: 5rem;
  }

  #mainContent {
    --home-eyebrow-size: 1.2rem;
    --home-display-size: clamp(4rem, 7.2vw, 6.4rem);
    --home-title-size: clamp(3.7rem, 6.4vw, 5.4rem);
    --home-copy-size: 1.56rem;
    --home-gap-sm: 2rem;
    --home-gap-md: 2.8rem;
    --home-gap-lg: 4rem;
  }

  .service-page-main {
    --home-eyebrow-size: 1.2rem;
    --home-title-size: clamp(3.5rem, 6vw, 4.8rem);
    --home-copy-size: 1.52rem;
    --home-gap-sm: 2rem;
    --home-gap-md: 2.8rem;
  }

  .home-hook-lead {
    padding: 10rem 0 9rem;
  }

  .home-hook-title {
    font-size: var(--home-display-size);
    line-height: var(--home-title-line);
  }

  .home-hook-sub {
    font-size: var(--home-copy-size);
    line-height: var(--home-copy-line);
  }

  .home-proof-section {
    padding: 9rem 0 7rem;
  }

  .home-proof-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 5.4rem;
  }

  .home-proof-copy h2 {
    font-size: var(--home-title-size);
  }

  .home-proof-panel {
    padding-left: 4rem;
  }

  .home-hook-hero.about-hero-slider {
    height: 68rem;
    min-height: 68rem;
  }

  .main-tit-box .main-tit {
    font-size: 5rem;
  }

  #mainWorksCon {
    padding: 10rem 0;
  }

  .portfolio-list-main .main-portfolio-item {
    width: 48%;
    margin: 0 1% 3rem;
  }

  .portfolio-cover.new .cover-inner > h3 span {
    width: 28px;
    height: 28px;
  }

  .portfolio-cover.new .cover-inner > h3 span::before {
    top: 13px;
    width: 28px;
    height: 2px;
  }

  .portfolio-cover.new .cover-inner > h3 span::after {
    left: 13px;
    width: 2px;
    height: 28px;
  }

  .works-filter-badges {
    justify-content: flex-start;
    gap: .8rem;
    margin: -2rem 0 4rem;
    overflow-x: auto;
    padding: 0 0 .8rem;
    mask-image: linear-gradient(90deg, #000 0 calc(100% - 4rem), transparent 100%);
  }

  .works-filter-btn {
    flex: 0 0 auto;
    min-width: 9.6rem;
    height: 4.2rem;
    font-size: 1.4rem;
  }

  .work-section + .work-section {
    margin-top: 7rem;
  }

  .work-section-head {
    display: block;
    margin-bottom: 2rem;
  }

  .work-section-head h3 {
    font-size: 2.4rem;
  }

  .work-section-head span {
    display: block;
    margin-top: .8rem;
  }

  .homepage-grid,
  .detail-grid,
  .merged-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.6rem;
  }

  .detail-grid .work-thumb,
  .merged-grid .detail .work-thumb {
    aspect-ratio: 1 / 1;
  }

  .work-info {
    padding-top: 1.2rem;
  }

  .work-info strong {
    font-size: 1.5rem;
  }

  #wrap.portfolio-page .nav-open-btn .line {
    background: var(--black);
  }

  #wrap.portfolio-page .nav-open-btn.active .line {
    background: var(--white);
  }

  .portfolio-page-hero {
    padding-top: 9rem;
    padding-bottom: 7rem;
  }

  .portfolio-page-ghost {
    left: 5vw;
    right: 5vw;
    top: 4rem;
    font-size: clamp(5.8rem, 18vw, 12rem);
  }

  .portfolio-page-hero-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .portfolio-page-hero h2 {
    margin-top: 5rem;
  }

  .portfolio-page-desc {
    max-width: none;
  }

  .portfolio-page-list {
    padding-bottom: 10rem;
  }

  .portfolio-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.6rem 1.8rem;
  }

  .service-hero {
    padding-top: 9rem;
    padding-bottom: 7rem;
  }

  .service-page-ghost {
    left: 5vw;
    right: 5vw;
    top: 4rem;
    font-size: clamp(5.8rem, 18vw, 12rem);
  }

  .service-hero-grid,
  .service-section-head,
  .service-split {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .service-flow-panel {
    min-height: 38rem;
    background-position: center right;
  }

  .service-device-section {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }

  .service-device-scroll {
    --device-rotate: 34deg;
    --device-scale: .94;
    --device-y: 6rem;
    min-height: 78rem;
  }

  .service-device-copy h3 {
    font-size: clamp(3.6rem, 9vw, 6.8rem);
    line-height: 1.08;
  }

  .service-device-stage {
    width: min(78rem, 90vw);
    margin-top: 1.2rem;
  }

  .service-flow-simple-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-hero h2 {
    margin-top: 5rem;
  }

  .service-overview-section {
    padding-top: 6.8rem;
    padding-bottom: 8rem;
  }

  .service-overview-section.is-sticky-mode {
    height: auto;
    min-height: auto;
  }

  .service-overview-tabs {
    top: auto;
    width: 100%;
    margin-bottom: 3.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .service-overview-tabs a {
    flex: 0 0 auto;
    min-width: 12.8rem;
  }

  .service-overview-pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    display: block;
  }

  .service-overview-track {
    display: grid;
    gap: 2.4rem;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .service-overview-panel {
    position: relative;
    grid-area: 1 / 1;
    inset: auto;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 3.2rem 2.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.2rem);
    pointer-events: none;
  }

  .service-overview-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .service-overview-copy h2 {
    font-size: clamp(3rem, 8vw, 4.2rem);
  }

  .service-overview-copy p {
    max-width: none;
    font-size: 1.52rem;
  }

  .service-overview-visual,
  .service-overview-visual img {
    min-height: 24rem;
  }

  .service-card-grid {
    grid-template-columns: 1fr;
  }

  .service-benefit-head {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .service-benefit-head p {
    grid-column: auto;
  }

  .service-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-process-step:nth-child(2) {
    border-right: 0;
  }

  #wrap.request-page .nav-open-btn .line {
    background: var(--black);
  }

  #wrap.request-page .nav-open-btn.active .line {
    background: var(--white);
  }

  .request-page-hero {
    padding-top: 9rem;
    padding-bottom: 7rem;
  }

  .request-page-ghost {
    right: 5vw;
    top: 4rem;
    font-size: clamp(5.8rem, 18vw, 12rem);
  }

  .request-page-hero h2 {
    margin-top: 5rem;
  }

  .request-page-body {
    padding-bottom: 10rem;
  }

  .request-tabs {
    max-width: none;
  }

  .request-panel {
    margin-top: 5rem;
  }

  .request-form-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .request-form-intro h3 {
    font-size: clamp(2.35rem, 5.2vw, 3.25rem);
    line-height: 1.36;
  }

  .request-form-intro p {
    max-width: none;
    font-size: 1.45rem;
  }

  .request-form-intro em {
    justify-self: start;
  }

  .request-form-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    align-items: start;
    min-height: auto;
    padding: 2.2rem 0;
  }

  .request-required-note {
    text-align: left;
  }

  .request-email-field {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .request-status-head {
    display: block;
  }

  .request-status-head strong {
    display: block;
    margin-top: 1.5rem;
  }

  .request-status-row,
  .request-status-row-head {
    grid-template-columns: 1fr;
    gap: .7rem;
    align-items: start;
    padding: 1.8rem 0;
  }

  .request-status-row-head {
    display: none;
  }

  .about-hero {
    padding-top: 10rem;
    padding-bottom: 7rem;
  }

  .about-ghost {
    right: 4vw;
    top: 5rem;
    font-size: clamp(6rem, 18vw, 13rem);
  }

  .about-kicker {
    font-size: clamp(4.8rem, 14vw, 8rem);
  }

  .about-hero h2 {
    margin-top: 5rem;
    font-size: clamp(3.6rem, 9vw, 5.2rem);
  }

  .about-lead {
    font-size: 1.55rem;
  }

  .about-brand-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .about-brand-mark {
    min-height: 24rem;
    padding: 4rem;
  }

  .about-brand-mark img {
    width: min(22rem, 62%);
  }

  .about-brand-slogan {
    min-height: 34rem;
  }

  .about-brand-slogan p {
    font-size: clamp(3.2rem, 9vw, 4.8rem);
  }

  .about-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .about-split-section,
  .about-letter-section {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-section-title,
  .about-letter-head {
    position: relative;
    top: auto;
  }

  .about-section-title h3,
  .about-letter-head h3 {
    font-size: clamp(3.4rem, 8vw, 4.8rem);
  }

  .about-body-copy,
  .about-letter-copy {
    font-size: 1.58rem;
  }

  .about-value-grid,
  .about-team-grid {
    grid-template-columns: 1fr;
  }

  .about-value-grid article {
    min-height: auto;
  }

  .about-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-cta-section {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 8rem;
  }

  .about-cta-section h3 {
    font-size: clamp(3.2rem, 8vw, 4.7rem);
  }

  .about-cta-btn {
    width: min(100%, 24rem);
  }

  .footer-slogan-txt {
    font-size: 2.9rem;
  }

  .footer-consulting-con .to-footer-consulting-btn {
    justify-content: center;
    min-height: 5.2rem;
    padding: 0 2.4rem;
  }

  .footer-consulting-con .to-footer-consulting-btn .txt {
    font-size: 1.6rem;
  }

  .footer-bottom-inner .footer-left-con {
    display: block;
    text-align: center;
  }

  .foot-logo {
    width: 150px;
    margin: 0 auto;
  }

  .footer-address-box {
    display: block;
    margin-top: 2.5rem;
  }

  .footer-address-box .footer-address-txt:first-child {
    margin-right: 0;
  }

  .footer-motion-mark {
    top: 8%;
    left: 16%;
    width: 58rem;
    height: 58rem;
    border-width: 7rem;
  }
}

@media all and (max-width: 560px) {
  html {
    font-size: 9px;
  }

  :root {
    --header-height: 100px;
    --header-fixed-height: 64px;
  }

  .logo a {
    height: 30px;
  }

  .logo a {
    width: 104px;
    height: 56px;
  }

  .header-email-consult {
    display: none;
  }

  .main-visual-txt2 {
    font-size: 4.2rem;
  }

  .main-visual-txt3 {
    font-size: 2rem;
  }

  .main-visual-pc-img,
  .main-visual-pc-img.is-photo-bg,
  .main-visual-video {
    background-position: center 18%;
    object-position: center 18%;
  }

  .main-visual-logo-slide {
    right: 5vw;
    bottom: 16.5rem;
    width: min(14rem, 36vw);
    opacity: .14;
  }

  .main-visual-item-inner.is-logo-slide {
    background-position: center 34%;
    background-size: contain;
  }

  .portfolio-list-main .main-portfolio-item,
  .main-gallery-new-list-wrapper .gallery-item {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .portfolio-list-main,
  .main-gallery-new-list-wrapper .clearfix {
    margin-right: 0;
    margin-left: 0;
  }

  .homepage-grid,
  .detail-grid,
  .merged-grid {
    grid-template-columns: 1fr;
  }

  .work-thumb {
    aspect-ratio: 16 / 11;
  }

  .detail-grid .work-thumb,
  .merged-grid .detail .work-thumb {
    aspect-ratio: 1 / 1;
  }

  .portfolio-page-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .6rem;
    border-radius: 1.4rem;
  }

  .portfolio-page-filter-link {
    height: 3.8rem;
    font-size: 1.25rem;
  }

  .portfolio-page-count {
    margin-top: 4rem;
    font-size: 1.35rem;
  }

  .portfolio-page-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-page-card-info strong {
    font-size: 1.55rem;
  }

  .portfolio-empty-state {
    min-height: 28rem;
    padding: 4rem 2rem;
  }

  .service-kicker {
    font-size: 4.8rem;
  }

  .service-hero h2 {
    font-size: 3.5rem;
  }

  .service-hero-copy p,
  .service-goal-inner p {
    font-size: 1.55rem;
  }

  .service-section {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .service-section-head h3 {
    font-size: 2.35rem;
    line-height: 1.45;
  }

  .service-card {
    min-height: auto;
    padding: 2.6rem;
  }

  .service-card h4 {
    margin-top: 3rem;
    font-size: 2.1rem;
  }

  .service-benefit-section {
    padding: 3.2rem 1.8rem;
  }

  .service-benefit-head h3 {
    font-size: 2.65rem;
  }

  .service-benefit-grid {
    grid-template-columns: 1fr;
  }

  .service-benefit-card {
    min-height: auto;
    padding: 2.4rem;
  }

  .service-benefit-card h4 {
    margin-top: 1.8rem;
  }

  .service-list-panel {
    padding: 3.2rem 2.6rem;
  }

  .service-list-panel h3 {
    font-size: 2.3rem;
    line-height: 1.46;
  }

  .service-flow-panel {
    min-height: 36rem;
    padding: 3.2rem 2.4rem;
    background-position: 64% center;
  }

  .service-device-section {
    padding-top: 6.8rem;
    padding-bottom: 6.8rem;
  }

  .service-device-scroll {
    --device-rotate: 28deg;
    --device-scale: .88;
    --device-y: 5rem;
    min-height: auto;
    justify-content: flex-start;
    perspective: 680px;
  }

  .service-device-copy {
    max-width: 100%;
    text-align: left;
    transform: translateY(var(--device-title-y));
  }

  .service-device-copy h3 {
    font-size: clamp(2.85rem, 8.4vw, 3.45rem);
    line-height: 1.22;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .service-device-copy p {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.46rem;
    line-height: 1.76;
    overflow: visible;
  }

  .service-device-stage {
    width: min(100%, 43rem);
    margin: 4.2rem auto 0;
  }

  .service-device-card {
    padding: .8rem;
    border-width: .42rem;
    border-radius: 2.4rem;
    transform: translateY(var(--device-y)) rotateX(var(--device-rotate)) scale(var(--device-scale));
  }

  .service-device-screen {
    border-radius: 1.45rem;
  }

  .service-flow-simple-list {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    margin-top: 3.4rem;
  }

  .service-flow-simple-list strong {
    font-size: 1.58rem;
  }

  .service-flow-simple-list p {
    font-size: 1.32rem;
  }

  .service-flow-kicker {
    min-height: 3rem;
    font-size: 1.1rem;
  }

  .service-flow-panel h3 {
    margin-top: 2.8rem;
    font-size: 2.75rem;
    line-height: 1.24;
  }

  .service-flow-panel p {
    font-size: 1.48rem;
    line-height: 1.72;
  }

  .service-check-list li {
    padding: 1.8rem 1.8rem 1.8rem 5rem;
    font-size: 1.5rem;
  }

  .service-check-list li::before {
    left: 1.9rem;
    top: 2rem;
  }

  .service-flow-list li {
    min-height: auto;
    padding: 6.2rem 1.8rem 2rem 5.2rem;
  }

  .service-flow-list li::before {
    left: 1.8rem;
    top: 2.1rem;
  }

  .service-flow-list strong {
    font-size: 1.62rem;
  }

  .service-flow-list span {
    font-size: 1.34rem;
  }

  .service-process-grid {
    grid-template-columns: 1fr;
  }

  .service-process-step,
  .service-process-step:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }

  .service-process-step:last-child {
    border-bottom: 0;
  }

  .service-goal {
    min-height: 54rem;
  }

  .service-goal-inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .service-goal-inner h3 {
    font-size: 3.6rem;
  }

  .request-page-kicker {
    font-size: 4.8rem;
  }

  .request-page-hero h2 {
    font-size: 3.4rem;
  }

  .request-page-desc {
    font-size: 1.55rem;
  }

  .request-tab-btn {
    height: 4rem;
    font-size: 1.25rem;
  }

  .request-check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }

  .request-inline-field,
  .request-email-field {
    display: grid;
    grid-template-columns: 1fr;
  }

  .request-inline-field span,
  .request-email-field span {
    display: none;
  }

  .request-privacy-box {
    padding: 2.2rem;
  }

  .request-submit-box button {
    width: 100%;
  }

  .footer-bottom-inner .footer-right-con {
    display: block;
  }

  .footer-menu-con {
    width: 100%;
    margin: 1rem 0 0;
  }

  .footer-menu-con li {
    text-align: center;
  }
}

@media all and (max-width: 480px) {
  #mainContent {
    --home-eyebrow-size: 1.08rem;
    --home-eyebrow-letter: .18em;
    --home-display-size: clamp(3.1rem, 8.8vw, 4.35rem);
    --home-title-size: clamp(3rem, 8.2vw, 4.05rem);
    --home-copy-size: 1.44rem;
    --home-badge-size: 1.12rem;
    --home-gap-sm: 1.8rem;
    --home-gap-md: 2.4rem;
    --home-gap-lg: 3.2rem;
  }

  .service-page-main {
    --home-eyebrow-size: 1.08rem;
    --home-eyebrow-letter: .18em;
    --home-title-size: clamp(3rem, 8.2vw, 4.05rem);
    --home-copy-size: 1.44rem;
    --home-gap-sm: 1.8rem;
    --home-gap-md: 2.4rem;
  }

  .floating-consult {
    right: 1.4rem;
    bottom: 1.4rem;
  }

  .floating-consult-menu {
    bottom: calc(100% + .8rem);
    gap: .6rem;
  }

  .floating-consult-action {
    width: 4.4rem;
    height: 4.4rem;
  }

  .floating-consult-toggle {
    width: 4.8rem;
    height: 4.8rem;
  }

  .floating-consult-toggle-icon,
  .floating-consult-action-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .floating-consult-action-icon.is-kakao img {
    width: 2.3rem;
    height: 2.3rem;
  }

  .floating-consult-action-icon.is-phone {
    font-size: 1.5rem;
  }

  .home-hook-lead {
    padding: 8rem 0 7rem;
  }

  .home-hook-label,
  .home-proof-label {
    font-size: var(--home-eyebrow-size);
    letter-spacing: var(--home-eyebrow-letter);
  }

  .home-hook-title {
    margin-top: var(--home-gap-sm);
    font-size: var(--home-display-size);
    line-height: var(--home-title-line);
  }

  .home-hook-sub {
    margin-top: var(--home-gap-md);
    font-size: var(--home-copy-size);
    line-height: var(--home-copy-line);
  }

  .home-hook-tags {
    gap: .8rem;
    margin-top: var(--home-gap-md);
  }

  .home-hook-tags span {
    min-height: 3.5rem;
    padding: 0 1.25rem;
    font-size: var(--home-badge-size);
  }

  .home-proof-section {
    padding: 7.6rem 0 5.4rem;
  }

  .home-proof-copy h2 {
    margin-top: var(--home-gap-sm);
    font-size: var(--home-title-size);
    line-height: var(--home-title-line);
  }

  .home-proof-copy p {
    margin-top: var(--home-gap-sm);
    font-size: var(--home-copy-size);
    line-height: var(--home-copy-line);
  }

  .home-proof-btn {
    width: 100%;
    height: 5.4rem;
    margin-top: var(--home-gap-md);
    font-size: 1.36rem;
    text-align: center;
  }

  .home-proof-panel {
    padding: 3.2rem 0 0 2.4rem;
  }

  .home-proof-panel::before {
    height: 6.5rem;
  }

  .home-proof-panel strong {
    font-size: clamp(2.55rem, 7.4vw, 3.35rem);
  }

  .home-proof-panel p {
    font-size: var(--home-copy-size);
    line-height: var(--home-copy-line);
  }

  .home-proof-panel li {
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.32rem;
    line-height: 1.45;
  }

  .home-hook-hero.about-hero-slider {
    height: 64rem;
    min-height: 64rem;
  }

  .home-hook-hero .about-hero-title {
    font-size: clamp(3.1rem, 9.8vw, 4.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .service-hero-copy p {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }
}