@layer base, components, pages;
:root {
  --theme: #42B7A5;
  --sub: #279584;
  --typo: #000;
  --accent: #b5f0e7;
  --body: #FFF;
  --dark: #333333;
  --gray: #D2DCED;
  --ice: #f4f6f6;
  --lemon: #FFF000;
  --yellow: #FFC800;
  --footer: #3C4652;
  --bk01: rgb(0 0 0 / .1);
  --bk02: rgb(0 0 0 / .2);
  --bk03: rgb(0 0 0 / .3);
  --bk04: rgb(0 0 0 / .4);
  --bk05: rgb(0 0 0 / .5);
  --bk06: rgb(0 0 0 / .6);
  --bk07: rgb(0 0 0 / .7);
  --bk08: rgb(0 0 0 / .8);
  --bk09: rgb(0 0 0 / .9);
  --wh01: rgb(255 255 255 / .1);
  --wh02: rgb(255 255 255 / .2);
  --wh03: rgb(255 255 255 / .3);
  --wh04: rgb(255 255 255 / .4);
  --wh05: rgb(255 255 255 / .5);
  --wh06: rgb(255 255 255 / .6);
  --wh07: rgb(255 255 255 / .7);
  --wh08: rgb(255 255 255 / .8);
  --wh09: rgb(255 255 255 / .9);
  --thin: 250;
  --regular: 450;
  --semi: 550;
  --bold: 700;
  --black: 850;
  --h1: 2em;
  --h2: 1.6em;
  --h3: 1.35em;
  --h4: 1.25em;
  --h5: 1.1em;
  --paragraph: .875em;
  --small: .75em;
  --chapSize: 4.5vw;
  --lineHeight: 1.75;
  --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: fixed;
  --clip: calc(var(--navH) * 1.5);
  --margin: var(--floatingPos);
  --navH: 2.5rem;
  --fitH: 100vh;
  --btnMenu: 2.75rem;
  --logoW: 3.5rem;
  --logoRatio: 6/1;
  --innMax: 1280px;
  --modalClip: inset(var(--framePad) var(--framePad) round var(--rad1));
  --header-offset: calc(var(--floatingPos) + var(--btnMenu) + var(--pad) * 4);
  --scrW: 20px;
  --pad: 2rem;
  --innPad: calc(2.25vmax * 1);
  --innNarrow: calc(var(--innPad) * 7);
  --innCramped: calc(var(--innPad) * 3);
  --padTop: calc(var(--innPad) * 1.5);
  --padLeft: var(--innPad);
  --padRight: var(--innPad);
  --padBottom: calc(var(--innPad) * 1.5);
  --framePad: calc(var(--pad) * 1.5);
  --floatingPos: var(--framePad);
  --setNav: 100% 0;
}
@media (max-width: 1536px) {
  :root {
    --headerPos: absolute;
    --innPad: calc(var(--pad) * 2);
    --innNarrow: calc(var(--pad) * 5);
    --innCramped: var(--innPad);
  }
}
@media (max-width: 1100px) {
  :root {
    --h1: 1.75em;
    --h2: 1.5em;
    --h3: 1.2em;
    --h4: 1.1em;
    --h5: 1.05em;
    --paragraph: .875em;
    --small: .75em;
    --chapSize: 4.5vw;
    --logoW: calc(var(--btnMenu) * .8);
    --pad: 1rem;
    --innPad: calc(var(--pad));
    --innNarrow: var(--innPad);
    --innCramped: var(--innPad);
    --padTop: calc(var(--innPad) * 2);
    --padBottom: calc(var(--innPad) * 2);
    --fitH: 150vw;
    --framePad: calc(var(--pad) * .5);
    --headerPos: relative;
    --rad0: .25rem;
    --rad1: .75rem;
    --rad3: 1rem;
    --rad5: 1rem;
  }
}

.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%;
  text-size-adjust: 100%;
  letter-spacing: 0.02em;
}
html.posFix {
  overflow-y: hidden;
}

body {
  background: var(--body);
  width: 100%;
  min-height: 100vh;
  position: relative;
  transition: background-color 0.4s linear, color 0.4s ease-in-out;
  --headerHide: calc(0% - var(--floatingPos) - var(--logoW));
  --navHide: calc(0% - var(--floatingPos) - var(--btnMenu));
  color: var(--typo);
}
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 .sideNav {
  opacity: 1;
  transition-delay: 0.1s, 0.1s, 0s;
}
body.loaded .pageBg {
  opacity: 0.1;
}
body.down .headerUtility {
  transform: translateY(var(--headerHide));
}
body.down .pcNav {
  transform: translateY(var(--navHide));
}
body.running .headerUtility p {
  opacity: 0;
  visibility: hidden;
}

.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: clamp(30em, 60em, 100% - var(--innPad) * 2);
  }
}
@media (max-width: 721px) {
  .inner {
    max-width: calc(100% - var(--innPad) * 0.5);
  }
}

.siteFrame {
  opacity: 0;
  width: 100%;
}
.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;
}

.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 {
  position: relative;
  display: block;
  line-height: 1;
  transition: all 1.2s var(--springGlide);
  color: var(--theme);
}
.gLogo a {
  display: grid;
}
.gLogo a small {
  font-size: 0.75em;
  letter-spacing: -0.05em;
  font-weight: var(--regular);
}
@media (min-width: 1100px) {
  .gLogo:hover {
    color: var(--sub);
  }
}

.headerUtility {
  position: var(--headerPos);
  transition: all 0.4s ease-in-out;
  height: var(--navH);
  top: var(--floatingPos);
  left: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1100px) {
  .headerUtility {
    padding: 0 var(--innPad);
  }
  .headerUtility:hover {
    color: var(--sub);
  }
}
@media (max-width: 1100px) {
  .headerUtility {
    padding: 0 calc(var(--innPad) * 0.5);
  }
  .headerUtility .btn {
    --btnMin: inherit;
  }
  .headerUtility .btn span {
    display: none;
  }
}
.headerUtility .gLogo {
  --logoW: 100%;
}
.headerUtility .groupLogo {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1em;
  color: white;
  filter: drop-shadow(0 0 0.3rem var(--bk02));
}
.headerUtility .groupLogo a[target=_blank]:not([href^="mailto:"]):not(.btn):after, .headerUtility .groupLogo a[href*=".pdf"]:not([href^="mailto:"]):not(.btn):after, .headerUtility .groupLogo a[href*=".xls"]:not([href^="mailto:"]):not(.btn):after {
  content: none;
}
.headerUtility .groupLogo figure {
  height: 1.75em;
  aspect-ratio: 300/75;
}
.headerUtility .groupLogo figure svg {
  width: 100%;
  height: 100%;
}
.headerUtility .groupLogo figure svg path, .headerUtility .groupLogo figure svg polygon, .headerUtility .groupLogo figure svg rect {
  fill: currentColor;
}
.headerUtility .groupLogo span {
  font-size: var(--paragraph);
}
@media (max-width: 721px) {
  .headerUtility .groupLogo {
    display: none;
  }
}

.btnMenu {
  --barWidth: 1.25em;
  position: fixed;
  top: var(--floatingPos);
  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);
  background-color: var(--typo);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  box-shadow: 0 0 1em transparent inset, 0 0 3em transparent inset;
}
@media (min-width: 1100px) {
  .btnMenu {
    right: 0;
    margin-right: var(--floatingPos);
  }
  .btnMenu:hover {
    box-shadow: 0.5em 0.5em 3em var(--wh02) inset, -0.75em -0.75em 1.5em var(--typo) inset, 0.5em -1em 0.5em 1.25em var(--bk02) inset, 0 0 5em var(--sub) inset;
  }
}
@media (max-width: 1100px) {
  .btnMenu {
    right: var(--floatingPos);
  }
}
.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);
}
.btnMenu div span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40%;
}
.btnMenu div span:before, .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;
}
.btnMenu div span:before {
  top: 0;
  width: 100%;
}
.btnMenu div span:after {
  top: 100%;
  width: 75%;
}
.btnMenu div em {
  line-height: 1;
  font-size: 0.7em;
  text-align: center;
  width: calc(100% + 0.75em);
  color: var(--typo);
  font-weight: var(--regular);
  margin: 0.75em 0 -0.75em;
  display: none;
}
.btnMenu.opened {
  border-radius: 50%;
}
.btnMenu.opened div span:before, .btnMenu.opened div span:after {
  width: 100%;
  top: 50%;
  left: 0;
  transition-delay: 0.4s;
}
.btnMenu.opened div span:before {
  rotate: 45deg;
}
.btnMenu.opened div span:after {
  rotate: -45deg;
}

.ctaWrap {
  --ctaWrapM: var(--floatingPos);
  --ctaWrapW: auto;
  --ctaWrapH: var(--fitH);
  --ctaBtnSize: 1em;
  --ctaBtnPad: 2em .75em;
  --ctaBtnGap: 3px;
  --ctaWriting: vertical-rl;
  --ctaWrapBg: none;
  --ctaWrapRad: 0;
  --inquiryRad: var(--rad5) var(--rad5) 0 0;
  --partnerRad: 0 0 var(--rad5) var(--rad5);
  display: flex;
  justify-content: center;
  writing-mode: var(--ctaWriting);
  gap: var(--ctaBtnGap);
  width: var(--ctaWrapW);
  height: var(--ctaWrapH);
  font-size: var(--ctaBtnSize);
  font-weight: var(--bold);
  margin-right: var(--ctaWrapM);
  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;
}
@media (min-width: 1100px) {
  .ctaWrap {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .ctaWrap li a:hover {
    color: white;
    background-color: var(--sub);
  }
}
@media (max-width: 1100px) {
  .ctaWrap {
    padding: var(--ctaBtnGap);
    margin: calc(var(--innPad) * 2) auto 0;
    letter-spacing: 0;
    --ctaWrapM: 0;
    --ctaWrapW: calc(100% - var(--innPad) * 2);
    --ctaWrapH: auto;
    --ctaWrapRad: 0;
    --ctaWrapBg: none;
    --ctaBtnSize: .8em;
    --ctaBtnPad: 1em 0;
    --ctaBtnGap: .25em;
    --ctaWriting: inherit;
    --inquiryRad: var(--rad1);
    --partnerRad: var(--rad1);
  }
  .ctaWrap li {
    flex: 1;
  }
}
.ctaWrap li.current-menu-item a {
  color: white;
  background-color: var(--sub);
}
.ctaWrap li a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--ctaBtnPad);
  background: white;
  color: var(--sub);
  transition: all 0.4s ease-in-out;
  border-radius: var(--ctaBtnRad);
}
.ctaWrap li a[target=_blank]:not([href^="mailto:"]):not(.btn), .ctaWrap li a[href*=".pdf"]:not([href^="mailto:"]):not(.btn), .ctaWrap li a[href*=".xls"]:not([href^="mailto:"]):not(.btn) {
  text-decoration: none !important;
}
.ctaWrap li a[target=_blank]:not([href^="mailto:"]):not(.btn):after, .ctaWrap li a[href*=".pdf"]:not([href^="mailto:"]):not(.btn):after, .ctaWrap li a[href*=".xls"]:not([href^="mailto:"]):not(.btn):after {
  content: none !important;
}
.ctaWrap li:nth-child(1) a {
  --ctaBtnRad: var(--inquiryRad);
}
.ctaWrap li:nth-child(2) a {
  --ctaBtnRad: var(--partnerRad);
}

.globalFooter {
  --logoW: 20vw;
  --logoGap: 0 0 calc(var(--pad) * 3);
  position: relative;
  z-index: 1;
  place-items: center;
  padding: 0 0 calc(var(--pad) * 2);
}
.globalFooter .coInfo {
  text-align: center;
  padding: calc(var(--pad) * 6) 0 calc(var(--pad) * 4);
}
.globalFooter .coInfo p {
  display: block;
  color: var(--theme);
  margin-bottom: 1em;
  font-size: var(--h5);
  letter-spacing: 0;
}
.globalFooter .coInfo a[target=_blank]:not([href^="mailto:"]):not(.btn):after, .globalFooter .coInfo a[href*=".pdf"]:not([href^="mailto:"]):not(.btn):after, .globalFooter .coInfo a[href*=".xls"]:not([href^="mailto:"]):not(.btn):after {
  content: none;
}
.globalFooter .coInfo svg {
  width: var(--logoW);
}
.globalFooter small {
  display: block;
  font-size: 0.9em;
  opacity: 0.5;
}

.closeBtn {
  --barWidth: 1.25em;
  top: var(--floatingPos);
  width: var(--btnMenu);
  height: var(--btnMenu);
  right: var(--floatingPos);
  cursor: pointer;
  position: absolute;
  padding: 0;
  border: 0;
  outline: 0;
  align-items: center;
  justify-content: center;
  background: var(--typo);
  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: 2px;
  display: block;
  background: currentColor;
  position: absolute;
  top: 50%;
  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(--gray);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
}
.overlay .scrollable {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: white;
  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) * 1);
  --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 {
    --arrow: calc(var(--btnMenu) * .5);
    --arrowX: 0;
  }
}
.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 */