@layer base, components, pages;
:root {
  --theme: #E3F1FE;
  --sub: #9DB1FF;
  --sub2: #496EFF;
  --btnGrad: linear-gradient(90deg, var(--theme) 0%, var(--sub2) 100%);
  --typo: #e6edff;
  --body: #010B35;
  --ls: #42B7A5;
  --ud: #7D7D7D;
  --gray: #606677;
  --ice: #fff4e6;
  --bk00: rgba(1, 11, 53, .05);
  --bk01: rgba(1, 11, 53, .1);
  --bk02: rgba(1, 11, 53, .2);
  --bk03: rgba(1, 11, 53, .3);
  --bk04: rgba(1, 11, 53, .4);
  --bk05: rgba(1, 11, 53, .5);
  --bk06: rgba(1, 11, 53, .6);
  --bk07: rgba(1, 11, 53, .7);
  --bk08: rgba(1, 11, 53, .8);
  --bk09: rgba(1, 11, 53, .9);
  --wh00: rgba(255, 255, 255, .05);
  --wh01: rgba(255, 255, 255, .1);
  --wh02: rgba(255, 255, 255, .2);
  --wh03: rgba(255, 255, 255, .3);
  --wh04: rgba(255, 255, 255, .4);
  --wh05: rgba(255, 255, 255, .5);
  --wh06: rgba(255, 255, 255, .6);
  --wh07: rgba(255, 255, 255, .7);
  --wh08: rgba(255, 255, 255, .8);
  --wh09: rgba(255, 255, 255, .9);
  --thin: 400;
  --regular: 400;
  --semi: 400;
  --bold: 400;
  --black: 400;
  --h1: 2.75em;
  --h2: 2.25em;
  --h3: 1.75em;
  --h4: 1.6em;
  --h5: 1.25em;
  --h6: 1.125em;
  --small: .875em;
  --mini: .75em;
  --micro: .7em;
  --sans: "Figtree", sans-serif;
  --lineHeight: 2;
  --chapSize: clamp(3rem, 4.5vw, 4.5rem);
  --sloganSize: clamp(3rem, 7.5vw, 8rem);
  --ctaSize: clamp(3rem, 9.5vw, 10rem);
  --trDis: transform .6s cubic-bezier(0.55, -0.15, 0.1, 0.92), opacity .8s cubic-bezier(0.6, 0, 0, 1), visibility 0s, border-radius .6s cubic-bezier(0.6, 0, 0, 1), background-color .4s ease-in-out;
  --rad0: .25rem;
  --rad1: .75rem;
  --rad3: 2rem;
  --rad5: 5rem;
  --headerPos: sticky;
  --clip: calc(var(--navH) * 1.5);
  --paragraph: 1em;
  --margin: var(--floatingPos);
  --navH: 2.5rem;
  --fitH: 100vh;
  --btnMenu: 2.5rem;
  --logoW: 9em;
  --logoRatio: 1000/248.16;
  --innMax: inherit;
  --modalClip: inset(var(--framePad) var(--framePad) round var(--rad1));
  --scrW: 20px;
  --pad: 2rem;
  --innPad: calc(2.25vmax * 2.5);
  --innNarrow: calc(var(--innPad) * 1.75);
  --innCramped: calc(var(--innPad) * 3.5);
  --padTop: calc(var(--innPad) * 1.5);
  --padLeft: var(--innPad);
  --padRight: var(--innPad);
  --padBottom: calc(var(--innPad) * 1.5);
  --framePad: calc(2.25vmax * 2.5);
  --floatingPos: var(--framePad);
  --setNav: 100% 0;
  --mobNoBr: inherit;
  --groupLogoH: 1.75em;
  --groupListDir: row;
  --groupListAlign: center;
  --groupGap: calc(var(--pad) * 1) calc(var(--pad) * 2);
  --footerOffset: calc(var(--innPad) * 3);
}
@media (max-width: 1536px) {
  :root {
    --innPad: calc(var(--pad) * 2);
    --innNarrow: var(--innPad);
    --innCramped: var(--innPad);
  }
}
@media (max-width: 1100px) {
  :root {
    --h1: 1.8em;
    --h2: 1.6em;
    --h3: 1.6em;
    --h4: 1.5em;
    --h5: 1em;
    --chapSize: clamp(24px, 10vw, 42px);
    --sloganSize: clamp(30px, 16vw, 66px);
    --logoW: 7em;
    --pad: 1rem;
    --innPad: calc(var(--pad) * 1);
    --innNarrow: var(--innPad);
    --innCramped: var(--innPad);
    --padTop: calc(var(--innPad) * 2);
    --padBottom: calc(var(--innPad) * 2);
    --fitH: 100svh;
    --framePad: calc(var(--pad) * .5);
    --headerPos: fixed;
    --groupLogoH: 2.25em;
    --groupGap: 1.5em;
    --mobNoBr: none;
    --ctaSize: clamp(3rem, 18vw, 20rem);
    --footerOffset: calc(var(--fitH) * .2);
  }
}

.loaded .siteFrame {
  opacity: 1;
  visibility: visible;
}
.loaded .globalMenu {
  translate: var(--setNav);
}

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

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}
html.posFix {
  overflow-y: hidden;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.5, 0.1, 0.15, 0.7);
}
#bg-canvas.bg-shown {
  opacity: 1;
}
.home #bg-canvas {
  transition: none;
}

#noise-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.25;
  image-rendering: auto;
  background-image: url(../images/noise5.png);
  background-size: 15%;
  background-position: center;
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

body {
  --body2: #14161c;
  --headerHide: calc(0% - var(--floatingPos) + 1em);
  --headerPadPort: 0;
  --headerPadLand: 0;
  --headerOffset: calc(var(--framePad) * .5);
  --wrapperOffset: calc(0% - var(--btnMenu));
  --headerH: calc(var(--navH) + var(--headerPadPort) * 2 + var(--headerOffset));
  background: var(--body);
  width: 100%;
  min-height: 100vh;
  position: relative;
  transition: background-color 0.4s linear, color 0.4s ease-in-out;
}
body:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(0deg, #a7a7a7 -20%, transparent 50%), radial-gradient(farthest-corner at 60% 70%, var(--body) 50%, #d4d4d4 110%);
  transition: all 0.4s ease-in-out;
  mix-blend-mode: color-dodge;
}
body.loaded .sectMenu,
body.loaded .siteFrame {
  transition: opacity 0.8s cubic-bezier(0.6, 0, 0, 1);
  opacity: 1;
}
body.loaded .ctaWrap {
  opacity: 1;
  transition-delay: 0.1s, var(--ctaDelay);
}
body.loaded .pageBg {
  opacity: 0.1;
}
body.running {
  --headerPadPort: .5em;
  --headerPadLand: 1.5em;
  --headerOffset: calc(var(--framePad) * .125);
  --framePad: calc(3vmax * 2.5);
  --logoW: 7em;
}
@media (max-width: 1100px) {
  body.running {
    --framePad: .5em;
    --headerPadPort: .5em;
    --headerPadLand: .5em;
    --headerOffset: .5em;
  }
}
body.running .headerUtility:before {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  backdrop-filter: blur(2em);
  -webkit-backdrop-filter: blur(2em);
}
body.running .headerUtility:after {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
body.running .headerUtility:hover {
  background-color: var(--bk08);
}
body:not(.chgColor) {
  color: var(--typo);
}
body:not(.chgColor):before {
  opacity: 1;
}
body.chgColor:before {
  opacity: 0;
}
body.chgColor .btn:not(:hover) {
  color: var(--invert-color);
}
body.ja .bogo-language-switcher li.ja span.bogo-language-name:before, body.en-US .bogo-language-switcher li.en-US span.bogo-language-name:before, body.zh-CN .bogo-language-switcher li.zh-CN span.bogo-language-name:before {
  content: "";
}

.inner {
  width: 100%;
  padding: var(--padTop) var(--padRight) var(--padBottom) var(--padLeft);
  margin-left: auto;
  margin-right: auto;
}
.inner.narrow {
  --padLeft: var(--innNarrow);
  --padRight: var(--innNarrow);
}
.inner.cramped {
  --padLeft: var(--innCramped);
  --padRight: var(--innCramped);
}
@media (max-width: 1100px) {
  .inner {
    max-width: 90vw;
  }
}

.siteFrame {
  opacity: 0;
  width: 100%;
  position: relative;
  z-index: 4;
}
.siteFrame .headerUtility {
  order: 1;
  z-index: 99;
}
.siteFrame .btnMenu {
  z-index: 106;
}
.siteFrame .globalMenu {
  z-index: 105;
}
.siteFrame .outerWrap {
  order: 2;
}
.siteFrame .copyRight {
  order: 4;
}

.outerWrap {
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  overflow: clip;
}
.outerWrap main {
  width: 100%;
}
@media (max-width: 1100px) {
  .outerWrap main {
    margin-left: auto;
    margin-right: auto;
  }
}

.drawered .siteFrame .menuLayer {
  border-radius: 0;
}
.drawered.navOpen .siteFrame .menuLayer {
  width: 100%;
  height: 100%;
  transition: 0.6s all cubic-bezier(0.55, -0.15, 0.1, 0.92) 0.1s, 0s right;
}
.drawered.navOpen .siteFrame .menuLayer span {
  border-radius: 0;
  transition: 0.6s all cubic-bezier(0.55, -0.15, 0.1, 0.92) 0.1s;
}

.gLogo {
  width: var(--logoW);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: calc(var(--logoW) * .25);
  aspect-ratio: var(--logoRatio);
  transition: all 1.2s var(--springGlide);
}
.gLogo svg {
  width: 100%;
  height: 100%;
}
.gLogo svg path, .gLogo svg polygon, .gLogo svg rect {
  fill: currentColor;
}
.gLogo:hover {
  color: var(--sub);
}

.headerUtility {
  --gridCol: 1fr auto 1fr var(--btnMenu);
  align-items: center;
  position: var(--headerPos);
  transition: all 0.4s ease-in-out;
  top: var(--headerOffset);
  left: var(--framePad);
  width: calc(100% - var(--framePad) * 2);
  padding: var(--headerPadPort) var(--headerPadLand);
  border-radius: var(--rad1);
  --gb-width: 1.4px;
  --gb-from: rgba(157, 177, 255, .8);
  --gb-to: rgba(73, 110, 255, .5);
  --ctaBtnSize: .875em;
  --ctaWrapBg: none;
  --ctaWrapRad: 0;
  --navGap: 1em;
  --gridGap: var(--navGap);
}
@media (max-width: 1100px) {
  .headerUtility {
    --gridCol: 1fr auto auto;
    --navGap: .5em;
  }
}
.headerUtility::before, .headerUtility::after {
  opacity: 0;
  transition: opacity 0.25s ease-in;
  border-radius: var(--rad1);
  --gb-angle: 6deg;
  --gb-pos: .5em;
  --gb-alpha: .1;
  --gb-thick: 1em;
  --gb-blur: .25em;
}
.headerUtility .gLogo {
  justify-self: start;
  transition: all 0.4s ease-in-out;
}
.headerUtility .gLogo svg rect, .headerUtility .gLogo svg polygon, .headerUtility .gLogo svg path {
  fill: currentColor;
}
.headerUtility .gLogo:hover {
  color: var(--sub);
}
.headerUtility .btnMenu {
  --barWidth: 1.25em;
  width: var(--btnMenu);
  height: var(--btnMenu);
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: 0;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: none;
  color: white;
  border-radius: 50%;
  transition: transform 0.6s cubic-bezier(0.55, -0.15, 0.1, 0.92), opacity 0.8s cubic-bezier(0.6, 0, 0, 1), visibility 0s, border-radius 0.6s cubic-bezier(0.6, 0, 0, 1), box-shadow 0.4s var(--springGlide);
}
.headerUtility .btnMenu div {
  width: var(--barWidth);
  height: var(--barWidth);
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71);
  transform: translate3d(0, 0, 0);
}
.headerUtility .btnMenu div span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40%;
}
.headerUtility .btnMenu div span:before, .headerUtility .btnMenu div span:after {
  content: "";
  height: 2px;
  display: block;
  background: currentColor;
  position: absolute;
  left: 0;
  transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71) 0.1s;
}
.headerUtility .btnMenu div span:before {
  top: 0;
  width: 100%;
}
.headerUtility .btnMenu div span:after {
  top: 100%;
  width: 75%;
}
.headerUtility .btnMenu div em {
  line-height: 1;
  font-size: 0.7em;
  text-align: center;
  width: calc(100% + .75em);
  color: var(--typo);
  font-weight: var(--regular);
  margin: 0.75em 0 -0.75em;
  display: none;
}
.headerUtility .btnMenu.opened {
  border-radius: 50%;
}
.headerUtility .btnMenu.opened div span:before, .headerUtility .btnMenu.opened div span:after {
  width: 100%;
  top: 50%;
  left: 0;
  transition-delay: 0.4s;
}
.headerUtility .btnMenu.opened div span:before {
  rotate: 45deg;
}
.headerUtility .btnMenu.opened div span:after {
  rotate: -45deg;
}
.headerUtility .pcNav {
  --barWidth: 1.25em;
  left: 0;
  z-index: 2;
  height: var(--btnMenu);
  transition: all 0.4s ease-in-out;
  gap: 2em;
  justify-content: center;
}
@media (max-width: 1100px) {
  .headerUtility .pcNav {
    display: none;
  }
}
.headerUtility .pcNav > ul {
  display: flex;
  align-items: center;
  height: 100%;
  transition: all 1.2s var(--springGlide);
  border-radius: var(--rad5);
  padding: 0 1em;
  font-size: 0.875em;
}
.headerUtility .pcNav > ul > li {
  position: relative;
}
.headerUtility .pcNav > ul > li > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 1em;
  color: currentColor;
  z-index: 0;
}
@media (max-width: 1536px) {
  .headerUtility .pcNav > ul > li > a {
    padding: 0 0.75em;
  }
}
.headerUtility .pcNav > ul > li > a:after {
  --afterH: 1px;
  content: "";
  display: block;
  width: calc(100% - var(--pad));
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 100%);
  position: absolute;
  bottom: 0;
  left: calc(var(--pad) * .5);
  z-index: -1;
  clip-path: inset(0 100% round 0);
  transition: clip-path 0.4s var(--easing);
}
.headerUtility .pcNav > ul > li > a:hover:after {
  clip-path: inset(0 0 round 0);
}
.headerUtility .ctaWrap {
  justify-self: end;
  height: 100%;
  font-size: var(--ctaBtnSize);
  font-weight: var(--bold);
  align-items: center;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out 0.4s;
  border-radius: var(--ctaWrapRad);
  background-color: var(--ctaWrapBg);
  opacity: 0;
  gap: var(--navGap);
}
.headerUtility .ctaWrap .btn {
  --paddingLand: 2em;
  --paddingPort: 0;
  --btnMin: inherit;
  --display: grid;
  --btnRad: 5em;
  grid-template-columns: auto auto;
  place-items: center;
  height: var(--navH);
  transition: all 0.4s ease-in-out;
}
.headerUtility .ctaWrap .btn u {
  text-decoration: none;
  pointer-events: none;
}
.headerUtility .ctaWrap .btn:before {
  content: none;
}
.headerUtility .ctaWrap .btn:after {
  content: none;
}
.headerUtility .ctaWrap .btn:hover {
  box-shadow: 0 0 0 0.5px var(--wh07) inset;
  background-color: var(--wh01);
  color: var(--typo);
}
@media (max-width: 1536px) {
  .headerUtility .ctaWrap .btn {
    --paddingLand: 1em;
  }
}
.headerUtility .headerLangSwitcher {
  position: relative;
}
.headerUtility .headerLangSwitcher .langTrigger {
  display: flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
  background: none;
  border: none;
  color: currentColor;
  font-family: inherit;
  font-size: 0.875em;
  font-weight: var(--regular);
  padding: 0.25em 0.5em;
  transition: opacity 0.3s ease;
}
.headerUtility .headerLangSwitcher .langTrigger:hover {
  opacity: 0.7;
}
.headerUtility .headerLangSwitcher .langTrigger svg {
  width: 1.5em;
  height: 1.5em;
}
.headerUtility .headerLangSwitcher .langTrigger svg path {
  stroke: currentColor;
  stroke-width: 2.5;
}
.headerUtility .headerLangSwitcher .langTrigger span {
  line-height: 1;
}
.headerUtility .headerLangSwitcher .langDropdown {
  position: absolute;
  top: calc(100% + .5em);
  right: 0;
  background: var(--bk08);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  border: 0.5px solid var(--wh01);
  border-radius: var(--rad1);
  padding: 0.5em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5em);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.headerUtility .headerLangSwitcher .langDropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.headerUtility .headerLangSwitcher .langDropdown .bogo-language-switcher {
  flex-direction: column;
  margin-right: 0;
  gap: 0;
}
.headerUtility .headerLangSwitcher .langDropdown .bogo-language-switcher li {
  width: 100%;
}
.headerUtility .headerLangSwitcher .langDropdown .bogo-language-switcher li:not(.ja):before {
  content: none;
}
.headerUtility .headerLangSwitcher .langDropdown .bogo-language-switcher li span a {
  display: block;
  padding: 0.5em 0.75em;
  font-size: 0.875em;
}
.headerUtility .bogo-language-switcher {
  display: flex;
  align-items: center;
  color: var(--typo);
  margin-right: 1em;
  font-weight: var(--regular);
}
.headerUtility .bogo-language-switcher li {
  line-height: 1;
  display: flex;
}
.headerUtility .bogo-language-switcher li.ja {
  order: -1;
}
.headerUtility .bogo-language-switcher li:not(.ja):before {
  content: "";
  width: 1px;
  display: block;
  background: currentColor;
  opacity: 0.2;
  margin: 0 0.75em 0 0.75em;
  align-self: stretch;
  opacity: 0.75;
}
.headerUtility .bogo-language-switcher li span {
  display: block;
  position: relative;
}
.headerUtility .bogo-language-switcher li span.bogo-language-name:before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.headerUtility .bogo-language-switcher li span a {
  color: currentColor;
  position: relative;
  transition: all 0.4s ease-in-out;
}
.headerUtility .bogo-language-switcher li span a:hover {
  color: var(--sub2);
}

.serviceCard .serviceCardItem {
  flex: 1;
}
.serviceCard .serviceCardItem a {
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 700;
  transition: all 0.4s ease-in-out;
}
.serviceCard .serviceCardItem a figure {
  position: relative;
  z-index: 1;
  aspect-ratio: 500/367;
}
.serviceCard .serviceCardItem a figure:after {
  content: "";
  display: block;
  width: 73.4%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--typo);
  z-index: 0;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
}
.serviceCard .serviceCardItem a figure img {
  z-index: 1;
}
.serviceCard .serviceCardItem a span {
  display: block;
  line-height: 1.5;
}

.globalMenu {
  translate: var(--setNav);
  transition: translate 0s linear, opacity 0s linear, visibility linear 0s;
  transition-delay: 0.7s, 0.7s, 0.7s;
  opacity: 0;
  visibility: hidden;
}
.globalMenu .innerWrap {
  opacity: 0;
  filter: blur(2em);
  translate: var(--setNav);
  transition: translate 0.2s var(--smash), filter 0.2s linear, opacity 0.4s ease-in-out;
  transition-delay: 0.4s, 0s, 0s;
  will-change: filter;
}
.globalMenu.visible {
  translate: 0 0;
  transition-delay: 0s, 0s, 0s;
  opacity: 1;
  visibility: visible;
}
.globalMenu.visible .innerWrap {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
  transition-duration: 0.2s, 0s, 0.2s;
  transition-delay: 0.1s, 0.1s, 0s;
}
.globalMenu.visible .innerWrap em {
  --emY: 0;
  clip-path: inset(0 0 0 0);
  transition-delay: 0.3s;
}
.globalMenu.visible .innerWrap em span {
  transition-delay: 0.4s;
}
.globalMenu.visible .innerWrap em span:nth-child(1), .globalMenu.visible .innerWrap em span:nth-child(2), .globalMenu.visible .innerWrap em span:nth-child(3), .globalMenu.visible .innerWrap em span:nth-child(4) {
  transform: translateY(0em);
}
.globalMenu.visible .close {
  opacity: 1;
  transition-delay: 0.2s;
}

.globalMenu {
  --menuW: 25em;
  --menuH: 100%;
  --emSize: 1.5em;
  --innerPad: 0 calc(var(--pad) * 2);
  --mainPad: 0;
  --innerY: center;
  --innerX: center;
  --strongY: calc(var(--pad) + var(--btnMenu) + 1em);
  --stringX: var(--pad);
  --listSize: 1.1em;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  color: var(--typo);
  padding: 0.5em;
}
@media (max-width: 1100px) {
  .globalMenu {
    --menuW: 100%;
    --innerPad: 0 0 var(--btnMenu);
    --mainPad: calc(var(--btnMenu) * 1.5);
    --innerY: flex-start;
    --innerX: flex-start;
    --strongY: calc(var(--btnMenu) + 1em);
    --stringX: var(--floatingPos);
    --listSize: 1.1em;
  }
}
.globalMenu .innerWrap {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  background: var(--bk05);
  width: var(--menuW);
  height: var(--menuH);
  position: relative;
  z-index: 1;
  margin-left: auto;
  border-radius: var(--rad1);
  backdrop-filter: blur(0.5em);
  -webkit-backdrop-filter: blur(0.5em);
}
.globalMenu .innerWrap:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gb-width, 1.4px);
  pointer-events: none;
  background: radial-gradient(circle 160px at var(--gb-mx, 50%) var(--gb-my, 50%), rgb(255 255 255/var(--gb-glow, 0)) 0%, rgb(157 177 255/calc(var(--gb-glow, 0) * .55)) 35%, transparent 70%), linear-gradient(var(--gb-angle, 135deg), var(--gb-from, #9db1ff), var(--gb-mid, rgba(129, 139, 178, 0.2)), var(--gb-to, #496eff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.globalMenu .innerWrap .menuWrap {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  color: var(--typo);
}
.globalMenu .innerWrap .menuLabel {
  writing-mode: vertical-lr;
  --emY: calc(0% - var(--btnMenu));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--emSize);
  position: absolute;
  top: var(--strongY);
  right: var(--stringX);
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--typo) !important;
  transition: transform 0.3s var(--expo), clip-path 0.3s var(--expo);
  transform: translateY(var(--emY));
  clip-path: inset(0 0 4em 0);
  width: var(--btnMenu);
}
.globalMenu .innerWrap .menuLabel span {
  display: inline-block;
  transition: transform 0.2s var(--expo);
}
.globalMenu .innerWrap .menuLabel span:nth-child(1) {
  transform: translateY(0em);
}
.globalMenu .innerWrap .menuLabel span:nth-child(2) {
  transform: translateY(-1em);
}
.globalMenu .innerWrap .menuLabel span:nth-child(3) {
  transform: translateY(-2em);
}
.globalMenu .innerWrap .menuLabel span:nth-child(4) {
  transform: translateY(-3em);
}
.globalMenu .innerWrap .scrollInner {
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  position: relative;
  flex-direction: column;
  justify-content: var(--innerY);
  align-items: var(--innerX);
  padding: var(--innerPad);
}
.globalMenu .innerWrap .scrollInner .mainItem {
  --gridCol: 100%;
  --gridGap: 1em;
  padding: var(--mainPad);
  place-items: center;
  width: 100%;
}
.globalMenu .innerWrap .scrollInner .mainItem .primaryMenu {
  --gridCol: 100%;
  --gridGap: 0;
  width: 100%;
}
.globalMenu .innerWrap .scrollInner .mainItem .primaryMenu li {
  width: 100%;
  font-size: var(--listSize);
}
.globalMenu .innerWrap .scrollInner .mainItem .groupNav {
  --groupListDir: column;
  --groupListAlign: flex-start;
  width: 100%;
  gap: 0;
}
@media (max-width: 1100px) {
  .globalMenu .innerWrap .scrollInner .mainItem .groupNav {
    align-items: flex-start;
  }
  .globalMenu .innerWrap .scrollInner .mainItem .groupNav li {
    width: auto;
  }
}
.globalMenu .innerWrap .scrollInner .mainItem .groupNav:before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: currentColor;
  opacity: 0.2;
  margin: 1em 0 1em;
}
.globalMenu .innerWrap .scrollInner .mainItem .groupNav em {
  margin-bottom: var(--pad);
}
.globalMenu .closeBtn {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  z-index: 102;
}
@media (max-width: 1100px) {
  .globalMenu .closeBtn {
    top: var(--floatingPos);
    right: var(--floatingPos);
  }
}

.menu .primaryMenu a {
  width: 100%;
  display: block;
  padding: 0.5em 0 0.5em 2em;
  transition: all 0.4s var(--expo);
  position: relative;
}
.menu .primaryMenu a:before {
  content: "";
  display: block;
  width: 1em;
  height: 1px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transition: all 0.4s var(--expo);
  left: 0;
}
@media (min-width: 1100px) {
  .menu .primaryMenu a:hover:before {
    width: 1.5em;
  }
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
  display: flex;
  position: relative;
  line-height: 1;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  flex: 1;
  gap: var(--gap);
}
@media (min-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
    flex-direction: column;
    --gap: 0;
  }
}
@media (max-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
    --gap: 0;
    align-items: flex-start;
    flex-direction: column;
  }
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children + .menu-item-has-children {
  margin-top: 1em;
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding-left: 1em;
}
@media (max-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu {
    flex: 1;
  }
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li {
  position: relative;
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li a {
  font-size: 0.8em;
}
@media (min-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li a:hover:before {
    width: 1.5em;
  }
}

.groupNav {
  flex-direction: var(--groupListDir);
  align-items: var(--groupListAlign);
  gap: 4em;
}
@media (max-width: 1100px) {
  .groupNav {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  .groupNav ul {
    margin-top: 1em;
  }
  .groupNav ul li {
    width: 100%;
  }
}
.groupNav em {
  color: var(--sub2);
}
.groupNav ul {
  flex-direction: var(--groupListDir);
  align-items: var(--groupListAlign);
  gap: var(--groupGap);
  flex-wrap: wrap;
}
.groupNav ul li a {
  display: flex;
  align-items: center;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--typo);
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  height: var(--groupLogoH);
  width: auto;
}
.groupNav ul li a svg {
  width: 100%;
  height: 100%;
}
.groupNav ul li a svg path, .groupNav ul li a svg polygon, .groupNav ul li a svg rect {
  fill: currentColor;
}
.groupNav ul li a:hover {
  color: var(--sub);
}

.breadCrumb {
  transition: transform 0.6s cubic-bezier(0.55, -0.15, 0.1, 0.92), opacity 0.8s cubic-bezier(0.6, 0, 0, 1), visibility 0s, border-radius 0.6s cubic-bezier(0.6, 0, 0, 1), background-color 0.4s ease-in-out;
  transition-delay: 0s, 0.6s, 0s, 0s;
  top: var(--top);
  left: var(--left);
}
@media (min-width: 1100px) {
  .breadCrumb {
    --top: calc(var(--floatingPos) + var(--btnMenu) * 2);
    --left: calc(var(--floatingPos) + var(--btnMenu) * .5 + .5em);
    position: fixed;
    z-index: 3;
    transform: rotate(90deg);
    transform-origin: left top;
    width: calc(var(--fitH) - (var(--navH) * 1.5));
  }
}
@media (max-width: 1100px) {
  .breadCrumb {
    display: none;
  }
}
.breadCrumb ul {
  margin: 0;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.75em;
}
@media (max-width: 1100px) {
  .breadCrumb ul {
    justify-content: flex-end;
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    padding-right: 0.5em;
  }
  .breadCrumb ul::-webkit-scrollbar {
    display: none;
  }
}
.breadCrumb ul li {
  display: flex;
  align-items: center;
}
.breadCrumb ul li [property=itemListElement] {
  display: flex;
  align-items: center;
  padding: 0.25em 1em;
  transition: all 0.4s ease-in-out;
}
.breadCrumb ul li [property=itemListElement]:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1px;
  margin-right: 0.5em;
  background: currentColor;
}
.breadCrumb ul li [property=itemListElement] a, .breadCrumb ul li [property=itemListElement] span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20em;
}
.breadCrumb ul li [property=itemListElement]:has(a):hover {
  background: var(--typo);
  color: var(--theme);
  border-radius: 3em;
}

.globalFooter {
  --logoW: 12em;
  position: relative;
  z-index: 2;
  justify-content: space-between;
  margin-top: var(--footerOffset);
}
@media (min-width: 1100px) {
  .globalFooter {
    min-height: var(--fitH);
  }
}
.globalFooter .ctaBanner {
  position: relative;
  z-index: 1;
  margin-bottom: auto;
}
.globalFooter .ctaBanner .inner {
  --gridGap: calc(var(--pad) * 2);
  --padTop: calc(var(--innPad) * 1);
  --gridCol: 1fr;
  place-items: flex-start;
}
@media (max-width: 1100px) {
  .globalFooter .ctaBanner .inner {
    place-items: center;
    text-align: center;
  }
}
.globalFooter .ctaBanner .inner h4 {
  font-size: var(--ctaSize);
  line-height: 0.8;
  letter-spacing: -0.03em;
}
.globalFooter .ctaBanner .inner h4 strong {
  --gradStart: var(--sub);
  --gradEnd: var(--sub2);
  background-image: url(../images/noise.png), linear-gradient(90deg, var(--gradStart) 0%, var(--gradEnd) 100%);
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-box-trim: trim-end;
}
.globalFooter .ctaBanner .inner a {
  --arrow: .75em;
  --paddingPort: calc(var(--arrow) * 3.5);
  --paddingLand: calc(var(--arrow) * 4);
  --arrowPsos: var(--arrow);
  --display: flex;
  --borderWid: 2px;
  --btnColor: currentColor;
  --btnHover: var(--dark);
  --btnRad: 5em;
  --btnWidth: calc(var(--ctaSize) * 4);
  --ctaWidth: 30em;
  --ctaGap: 1.5em;
  color: var(--btnColor);
  margin: 0;
  text-align: center;
  line-height: 1.5;
  position: relative;
  display: var(--display);
  z-index: 1;
  cursor: pointer;
  padding: var(--paddingPort) var(--paddingLand);
  transition: all 1.2s var(--springGlide);
  border-radius: var(--btnRad);
  --maskSize: 1em;
  --maskRepeat: no-repeat;
  --maskPosition: left;
  --maskColor: currentColor;
  --maskWidth: 1em;
  --ratio: 1;
  --maskImage: url("../images/iconArrow.svg");
  font-size: var(--h5);
  align-items: center;
  min-width: var(--ctaWidth);
  justify-content: space-between;
  gap: var(--ctaGap);
  border: 1px solid transparent;
  overflow: hidden;
  --maskColor: var(--btnGrad);
  background: var(--btnGrad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.globalFooter .ctaBanner .inner a p {
  display: block;
}
.globalFooter .ctaBanner .inner a:after {
  content: "";
  display: inline-block;
  width: var(--maskWidth);
  mask-repeat: var(--maskRepeat);
  mask-position: var(--maskPosition);
  mask-size: var(--maskSize);
  -webkit-mask-repeat: var(--maskRepeat);
  -webkit-mask-position: var(--maskPosition);
  -webkit-mask-size: var(--maskSize);
  aspect-ratio: var(--ratio);
  mask-image: var(--maskImage);
  -webkit-mask-image: var(--maskImage);
  background: var(--maskColor);
  background: currentColor;
  pointer-events: none;
  vertical-align: middle;
  margin-left: 1em;
}
.globalFooter .ctaBanner .inner a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--borderWid);
  background: var(--btnGrad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transition: padding 0.55s var(--springGlide);
}
.globalFooter .ctaBanner .inner a p {
  background: var(--btnGrad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.globalFooter .ctaBanner .inner a::after {
  background: var(--maskColor);
}
@media (min-width: 1100px) {
  .globalFooter .ctaBanner .inner a:hover {
    -webkit-text-fill-color: var(--body);
    color: var(--body);
    --maskColor: var(--body);
  }
  .globalFooter .ctaBanner .inner a:hover p {
    -webkit-text-fill-color: var(--body);
    color: var(--body);
  }
  .globalFooter .ctaBanner .inner a:hover::before {
    padding: 4em;
  }
}
@media (max-width: 1100px) {
  .globalFooter .ctaBanner .inner a {
    --paddingPort: calc(var(--arrow) * 1.5);
    --paddingLand: calc(var(--arrow) * 2);
    --ctaWidth: 100%;
    --ctaGap: 0;
  }
}
.globalFooter #footerUtil {
  --padTop: var(--pad);
  --padBottom: calc(var(--pad) * 1.5);
  --gridCol: 1fr auto;
  --gridGap: var(--pad);
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1100px) {
  .globalFooter #footerUtil {
    --gridCol: 1fr;
    --gridGap: 4em;
    --padTop: 7em;
    --groupGap: .5em;
    --groupLogoH: 2em;
    place-items: center;
    border: 1px solid var(--wh02);
    border-radius: var(--rad3);
  }
  .globalFooter #footerUtil .gLogo {
    margin: 0 auto;
  }
  .globalFooter #footerUtil .groupNav {
    width: 100%;
    max-width: 25em;
  }
  .globalFooter #footerUtil .groupNav ul {
    width: 100%;
  }
  .globalFooter #footerUtil .groupNav ul li {
    padding: 1.5em 0;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    border-radius: var(--rad1);
    background: var(--wh01);
  }
}
.globalFooter aside.inner {
  --padTop: 1em;
  --padBottom: 1em;
  --asideDir: row;
  --asideGap: var(--pad);
  --asideAlign: center;
  flex-direction: var(--asideDir);
  align-items: var(--asideAlign);
  justify-content: space-between;
  gap: var(--asideGap);
}
@media (min-width: 1100px) {
  .globalFooter aside.inner {
    border-top: 1px solid var(--wh01);
  }
}
@media (max-width: 1100px) {
  .globalFooter aside.inner {
    --asideDir: column;
    --asideGap: 1em;
    --asideAlign: center;
    --padTop: calc(var(--pad) * 1);
    --padBottom: calc(var(--pad) * 1);
  }
}
.globalFooter aside.inner small {
  display: block;
  font-size: var(--micro);
  opacity: 0.5;
}
.globalFooter aside.inner .subMenu {
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.globalFooter aside.inner .subMenu a {
  opacity: 0.5;
  text-decoration: none;
  position: relative;
  display: block;
  transition: all 0.4s ease-in-out;
  font-size: var(--micro);
}
.globalFooter aside.inner .subMenu a u {
  text-decoration: none;
}
@media (min-width: 1100px) {
  .globalFooter aside.inner .subMenu a:hover {
    opacity: 1;
  }
}

.closeBtn {
  --barWidth: 1.25em;
  top: var(--floatingPos);
  width: var(--btnMenu);
  height: var(--btnMenu);
  right: var(--floatingPos);
  cursor: pointer;
  position: absolute;
  padding: 0;
  outline: 0;
  align-items: center;
  justify-content: center;
  background: var(--bk05);
  border: 1px solid;
  color: white;
  border-radius: 50%;
  transition: all 0.4s ease;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.closeBtn i {
  display: block;
  width: var(--barWidth);
  height: var(--barWidth);
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71);
  transform: translate3d(0, 0, 0);
  position: relative;
}
.closeBtn i:before, .closeBtn i:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: currentColor;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
.closeBtn i:before {
  rotate: 45deg;
}
.closeBtn i:after {
  rotate: -45deg;
}
.closeBtn:hover {
  border-radius: 0;
}

.modalPane,
.overlay {
  transition: visibility 0s, opacity 0.2s, transform 0s;
  transition-delay: 0.8s, 0.4s, 0.9s;
}
.modalPane .scrollable,
.overlay .scrollable {
  clip-path: inset(0 0 round 0);
  transition: clip-path 0.6s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0s;
}
.modalPane .scrollable .scrollInner,
.overlay .scrollable .scrollInner {
  transition: opacity 0.4s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0s;
  opacity: 0;
}
.modalPane.visible,
.overlay.visible {
  visibility: visible;
  transition-delay: 0s, 0.1s, 0s;
  opacity: 1;
  transform: translate(0, 0);
}
.modalPane.visible .scrollable,
.overlay.visible .scrollable {
  transition-delay: 0.2s, 0s;
  clip-path: var(--modalClip);
}
.modalPane.visible .scrollable .scrollInner,
.overlay.visible .scrollable .scrollInner {
  transition: opacity 0.4s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0.6s;
  opacity: 1;
}

.modalPane {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 106;
  opacity: 0;
  transform: translate(100%, 0);
}
.modalPane:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: var(--typo);
  opacity: 0.95;
}
.modalPane .scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  padding: 1em;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--typo);
  position: relative;
  z-index: 1;
}
.modalPane .scrollable .scrollInner {
  justify-content: center;
  align-items: center;
}
@media (min-width: 1100px) {
  .modalPane .scrollable .scrollInner {
    width: calc(100% + var(--scrollBar));
    margin-right: calc(0% - var(--scrollBar));
    padding: calc(var(--navH) * 1) 0;
  }
}
@media (max-width: 1100px) {
  .modalPane .scrollable .scrollInner .inner {
    padding: calc(var(--pad) * 2) 0;
  }
}
.modalPane .closeBtn {
  position: absolute;
  top: calc(0% + var(--pad) * 2);
  right: calc(0% + var(--pad) * 2);
  z-index: 102;
}
@media (max-width: 1100px) {
  .modalPane .closeBtn {
    top: var(--floatingPos);
    right: var(--floatingPos);
  }
}

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 110;
  opacity: 0;
  transform: translate(100%, 0);
  background-color: var(--theme);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
}
.overlay .scrollable {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--typo);
  position: relative;
  z-index: 1;
  display: flex;
}
.overlay figure {
  z-index: 1;
}
.overlay .closeBtn {
  position: absolute;
  top: calc(0% + var(--pad) * 2);
  right: calc(0% + var(--pad) * 2);
  z-index: 102;
}
@media (max-width: 1100px) {
  .overlay .closeBtn {
    top: 1em;
    right: 1em;
  }
}
.overlay #modalImg {
  position: relative;
  top: inherit;
  left: inherit;
  max-width: 90vw;
  max-height: 90vh;
}

html.modaled .layer {
  opacity: 1;
  visibility: visible;
}

.modalImg img {
  cursor: pointer;
  transition: transform 0.4s ease-in-out 0s, filter 0.6s ease-in-out 0.4s !important;
}
.modalImg:hover img {
  transform: scale(1.05);
}

.prevNext {
  --arrow: calc(var(--btnMenu) * .25);
  --borderWid: 2px;
  position: absolute;
  top: 0;
  border: none;
  width: 33%;
  height: 100%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.4s ease;
  z-index: 1000;
  text-indent: -999em;
  display: flex;
  align-items: center;
}
@media (min-width: 1100px) {
  .prevNext {
    --arrowX: calc(0% - var(--arrow) * 2);
  }
}
@media (max-width: 1100px) {
  .prevNext {
    --arrowX: calc(0% - var(--arrow) * .75);
  }
}
.prevNext:before {
  content: "";
  display: block;
  width: var(--arrow);
  height: var(--arrow);
  border-top: var(--borderWid) solid;
  border-right: var(--borderWid) solid;
  flex-shrink: 0;
  transform-origin: center;
}
.prevNext.nextLink {
  right: var(--arrowX);
  justify-content: flex-end;
}
.prevNext.nextLink:before {
  transform: rotate(45deg);
}
.prevNext.prevLink {
  left: var(--arrowX);
  justify-content: flex-start;
}
.prevNext.prevLink:before {
  transform: rotate(-135deg);
}
.prevNext:hover {
  color: var(--typo);
  background: var(--wh01);
}

/*# sourceMappingURL=layout.css.map */