:root {
  --app-height: 100vh;
  --app-width: 100vw;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

#cursors {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
  z-index: 999999;
  mix-blend-mode: difference;
}
#cursors .cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}
#cursors .dot {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
#cursors .dot i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 30px;
  transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);
  box-sizing: border-box;
  background: #fff;
}
#cursors .circle {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
#cursors .circle i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 40px;
  transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);
  border: 2px solid #fff;
  box-sizing: border-box;
}
#cursors .timer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) rotate(-90deg);
  display: block;
  background-color: transparent;
  opacity: 0;
}
#cursors .timer .needle {
  stroke: #fff;
  stroke-width: 3px;
  fill: transparent;
  stroke-dashoffset: 500;
  stroke-dasharray: 0;
}
#cursors .drag,
#cursors .arrow,
#cursors .view,
#cursors .play,
#cursors .up,
#cursors .down {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  box-sizing: border-box;
}
#cursors .lab {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#cursors .lab i {
  display: block;
  background: url(../img/icon/lab.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 88px;
  height: 74px;
}
#cursors .play i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/icon/play.svg) 50% 50% no-repeat;
  width: 18px;
  height: 24px;
}
#cursors .view,
#cursors .arrow,
#cursors .up,
#cursors .down {
  border: 0;
}
#cursors .view svg,
#cursors .arrow svg,
#cursors .up svg,
#cursors .down svg {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#cursors[data-cursor=drag] .circle i, #cursors.hover .circle i {
  border-radius: 80px !important;
  width: 80px !important;
  height: 80px !important;
  transform: translate(-50%, -50%) !important;
  border-width: 3px;
  background: transparent;
}
#cursors[data-cursor=drag].circle .dot, #cursors.hover.circle .dot {
  opacity: 0;
}
#cursors[data-cursor=drag].circle .circle, #cursors.hover.circle .circle {
  opacity: 1;
}
#cursors[data-cursor=drag].up .dot, #cursors[data-cursor=drag].down .dot, #cursors[data-cursor=drag].arrow .dot, #cursors.hover.up .dot, #cursors.hover.down .dot, #cursors.hover.arrow .dot {
  opacity: 0;
}
#cursors[data-cursor=drag].up .arrow, #cursors[data-cursor=drag].down .arrow, #cursors[data-cursor=drag].arrow .arrow, #cursors.hover.up .arrow, #cursors.hover.down .arrow, #cursors.hover.arrow .arrow {
  opacity: 1;
}
#cursors[data-cursor=drag].up .circle i, #cursors[data-cursor=drag].down .circle i, #cursors[data-cursor=drag].arrow .circle i, #cursors.hover.up .circle i, #cursors.hover.down .circle i, #cursors.hover.arrow .circle i {
  border-radius: 96px !important;
  width: 96px !important;
  height: 96px !important;
  transform: translate(-50%, -50%) !important;
  background: transparent;
}
#cursors[data-cursor=drag].lab .dot, #cursors.hover.lab .dot {
  opacity: 0;
}
#cursors[data-cursor=drag].lab .lab, #cursors.hover.lab .lab {
  opacity: 1;
}
#cursors[data-cursor=drag].lab .circle i, #cursors.hover.lab .circle i {
  border-radius: 140px !important;
  width: 140px !important;
  height: 140px !important;
  transform: translate(-50%, -50%) !important;
  background: transparent;
}
#cursors[data-cursor=drag].up .arrow, #cursors.hover.up .arrow {
  transform: translate(-50%, -50%) rotate(-90deg);
}
#cursors[data-cursor=drag].down .arrow, #cursors.hover.down .arrow {
  transform: translate(-50%, -50%) rotate(90deg);
}
#cursors[data-cursor=drag].view .circle, #cursors.hover.view .circle {
  opacity: 0;
}
#cursors[data-cursor=drag].view .view, #cursors.hover.view .view {
  opacity: 1;
  width: 176px;
  height: 176px;
}
#cursors[data-cursor=drag].play .circle, #cursors.hover.play .circle {
  opacity: 0;
}
#cursors[data-cursor=drag].play .play, #cursors.hover.play .play {
  opacity: 1;
  width: 176px;
  height: 176px;
}
#cursors.index .dot {
  opacity: 0;
}
#cursors.index .circle {
  opacity: 1;
}
#cursors.index .circle i {
  border-radius: 40px !important;
  width: 40px !important;
  height: 40px !important;
  transform: translate(-50%, -50%) !important;
  background: transparent;
}
#cursors .drag {
  width: 114px;
  height: 114px;
  border: 0;
}
#cursors .drag:before, #cursors .drag:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#cursors .drag:before {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #fff;
  left: 0;
}
#cursors .drag:after {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
  right: 0;
}
#cursors[data-timer=play] .circle i {
  border-radius: 96px !important;
  width: 96px !important;
  height: 96px !important;
  transform: translate(-50%, -50%) !important;
  background: transparent;
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.25);
}
#cursors[data-timer=play] .arrow {
  opacity: 1;
}
#cursors[data-timer=play] .dot {
  opacity: 0;
}
#cursors[data-timer=play] .timer {
  opacity: 1;
}
#cursors.dragging .drag:before {
  left: 30px;
}
#cursors.dragging .drag:after {
  right: 30px;
}
#cursors[data-cursor=drag] .drag {
  opacity: 1;
}

@media (pointer: fine) {
  .has-cursor #cursors {
    display: block;
  }
  .has-cursor * {
    cursor: none !important;
  }
  .has-cursor .elementor-editor-active #cursors {
    display: none;
  }
  .has-cursor .elementor-editor-active * {
    cursor: auto !important;
  }
}
.__page-home #cursors {
  mix-blend-mode: normal;
}
.__page-home #cursors .dot,
.__page-home #cursors .circle {
  background: #fcf012;
  overflow: hidden;
}
.__page-home #cursors .dot:after,
.__page-home #cursors .circle:after {
  background-image: url("../../assets/img/icon/arrow-down.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 100%;
  height: 50%;
  opacity: 0;
  transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);
}
.__page-home #cursors.arrow .circle {
  width: 60px;
  height: 60px;
}
.__page-home #cursors.arrow .circle:after {
  opacity: 1;
}

/*! locomotive-scroll v4.1.0 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

[data-scroll-direction=horizontal] [data-scroll-container] {
  white-space: nowrap;
  height: 100vh;
  display: inline-block;
  white-space: nowrap;
}

[data-scroll-direction=horizontal] [data-scroll-section] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 100%;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
  z-index: 999999;
  display: none;
  z-index: -1;
}

.c-scrollbar:hover {
  transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

[data-scroll-direction=horizontal] .c-scrollbar {
  width: 100%;
  height: 10px;
  top: auto;
  bottom: 0;
  transform: scaleY(1);
}

[data-scroll-direction=horizontal] .c-scrollbar:hover {
  transform: scaleY(1.3);
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

[data-scroll-direction=horizontal] .c-scrollbar_thumb {
  right: auto;
  bottom: 0;
}

@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic720.woff2") format("woff2"), url("../../assets/fonts/YoonGothic720.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic740.woff2") format("woff2"), url("../../assets/fonts/YoonGothic740.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic750.woff2") format("woff2"), url("../../assets/fonts/YoonGothic750.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic770.woff2") format("woff2"), url("../../assets/fonts/YoonGothic770.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic780.woff2") format("woff2"), url("../../assets/fonts/YoonGothic780.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonGothic";
  src: url("../../assets/fonts/YoonGothic790.woff2") format("woff2"), url("../../assets/fonts/YoonGothic790.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta";
  src: url("../../assets/fonts/AvertaPE-Regular.woff2") format("woff2"), url("../../assets/fonts/AvertaPE-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta";
  src: url("../../assets/fonts/AvertaPE-Semibold.woff2") format("woff2"), url("../../assets/fonts/AvertaPE-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta";
  src: url("../../assets/fonts/AvertaPE-Bold.woff2") format("woff2"), url("../../assets/fonts/AvertaPE-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html {
  font-family: "YoonGothic", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  font-size-adjust: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  color: #000;
}

a {
  text-decoration: none;
  color: #000;
}

.font-averta {
  font-family: "Averta", "YoonGothic", sans-serif !important;
}

.font-w200 {
  font-weight: 200 !important;
}

.font-w300 {
  font-weight: 300 !important;
}

.font-w400 {
  font-weight: 400 !important;
}

.font-w500 {
  font-weight: 500 !important;
}

.font-w600 {
  font-weight: 600 !important;
}

.font-w700 {
  font-weight: 700 !important;
}

.font-w800 {
  font-weight: 800 !important;
}

body {
  font-size: max(0.875rem, 0.8333vw);
  font-weight: 300;
}

.font--txt {
  font-size: max(0.875rem, 0.8333vw);
  line-height: 1.9em;
  font-weight: 300;
}

.font--txt-lg {
  font-size: max(1rem, 0.9375vw);
  line-height: 1.8em;
}

.font--intro {
  font-size: max(3.75rem, 3.125vw);
  line-height: 1.5em;
}

@media screen and (max-width: 1000px) {
  body,
.font--txt {
    font-size: max(0.8125rem, 1.4vw);
  }

  .font--txt-lg {
    font-size: max(0.9375rem, 1.6vw);
  }

  .font--intro {
    font-size: max(2.188rem, 6vw);
  }
}
@media screen and (max-width: 500px) {
  .font--intro {
    font-size: 7vw;
  }
}
.font--lh-1 {
  line-height: 1.2 !important;
}

.font--lh-2 {
  line-height: 1.5 !important;
}

.font--lh-3 {
  line-height: 1.75 !important;
}

.font--lh-4 {
  line-height: 2 !important;
}

.__sentence span {
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative;
  display: inline-flex;
}

.font--heading-1 {
  font-size: max(7.813rem, 8vw);
  letter-spacing: -0.03em;
  font-weight: 600;
}

.font--heading-2 {
  font-size: max(5.625rem, 5.625vw);
}

.font--heading-3 {
  font-size: max(4rem, 5vw);
  letter-spacing: -0.03em;
}

.font--heading-4 {
  font-size: max(4rem, 3.75vw);
  line-height: 1.5em;
}

@media screen and (max-width: 1000px) {
  .font--heading-1 {
    font-size: max(6rem, 12.5vw);
  }

  .font--heading-2 {
    font-size: max(3.75rem, 9vw);
  }

  .font--heading-3 {
    font-size: max(3rem, 6.4vw);
  }

  .font--heading-4 {
    font-size: max(2.75rem, 6.4vw);
  }
}
@media screen and (max-width: 500px) {
  .font--heading-1 {
    font-size: 19vw;
  }

  .font--heading-2 {
    font-size: 12vw;
  }

  .font--heading-3 {
    font-size: 9.6vw;
  }

  .font--heading-4 {
    font-size: 8.8vw;
  }
}
.font--category-1 {
  font-size: max(1.5rem, 1.56vw);
  letter-spacing: -0.025em;
  font-weight: 600;
}

.font--category-1__kr {
  font-size: max(1.25rem, 1.3vw);
}

.font--category-2 {
  font-size: max(1.125rem, 1.25vw);
}

.font--category-3 {
  font-size: max(1rem, 0.9375vw);
}

.font--category-4 {
  font-size: max(0.8125rem, 0.78vw);
}

.font--category-5 {
  font-size: max(1.25rem, 1.15vw);
}

@media screen and (max-width: 1000px) {
  .font--category-1 {
    font-size: max(1.25rem, 2.4vw);
  }

  .font--category-1__kr {
    font-size: max(1.063rem, 2vw);
  }

  .font--category-3 {
    font-size: max(0.875rem, 1.6vw);
  }

  .font--category-4 {
    font-size: max(0.75rem, 1.3vw);
  }

  .font--category-5 {
    font-size: max(1.125rem, 2vw);
  }
}
@media screen and (max-width: 500px) {
  .font--category-2 {
    font-size: 3.6vw;
  }

  .font--category-5 {
    font-size: max(0.9375rem, 3.6vw);
  }
}
.font--section-title-1 {
  font-size: max(4rem, 4.2vw);
  line-height: 1.3em;
}

.font--section-title-3 {
  font-size: max(2.75rem, 2.5vw);
  line-height: 1.5em;
}

.font--section-title-4 {
  font-size: max(2.5rem, 2.3vw);
  line-height: 1.5em;
}

.font--section-title-5 {
  font-size: max(1.75rem, 1.6vw);
  line-height: 1.8em;
}

.font--popup-title {
  font-size: max(2.25rem, 2.5vw);
  line-height: 1.2833333333em;
  letter-spacing: -0.05em;
}
.font--popup-title.__sm {
  font-size: max(2rem, 2.25vw);
}

.font--content-title-1 {
  font-size: max(1.375rem, 1.25vw);
  line-height: 1.4em;
}

.font--content-title-2 {
  font-size: max(1.25rem, 1.15vw);
  line-height: 1.5em;
}

@media screen and (max-width: 1000px) {
  .font--section-title-1 {
    font-size: max(2.813rem, 6.4vw);
  }

  .font--section-title-3 {
    font-size: max(2rem, 4.44vw);
  }

  .font--section-title-4 {
    font-size: max(2rem, 4.4vw);
  }

  .font--section-title-5 {
    font-size: max(1.5rem, 2.8vw);
  }

  .font--popup-title {
    font-size: max(2.5rem, 4.4vw);
  }

  .font--content-title-1 {
    font-size: max(1.25rem, 2.2vw);
  }

  .font--content-title-2 {
    font-size: max(1.125rem, 2vw);
  }
}
@media screen and (max-width: 500px) {
  .font--section-title-1 {
    font-size: 9vw;
  }

  .font--section-title-3 {
    font-size: 6.4vw;
  }

  .font--section-title-4 {
    font-size: 6.4vw;
  }

  .font--section-title-5 {
    font-size: 4.8vw;
  }

  .font--popup-title {
    font-size: 8vw;
  }
}
.__root {
  opacity: 0;
}

.start .__root {
  opacity: 1;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: black;
}

::-webkit-scrollbar-thumb {
  width: 0px;
  height: 0px;
  background-color: rgba(255, 255, 255, 0.35);
}

.container {
  padding: 0 max(4.375rem, 3.65vw);
}
@media screen and (max-width: 1257px) {
  .container {
    padding: 0 5.6vw;
  }
}
@media screen and (max-width: 1000px) {
  .container {
    padding: 0 5.6vw;
  }
}
@media screen and (max-width: 500px) {
  .container {
    padding: 0;
  }
}
.container.container-boxed {
  padding: 0 12vw;
}
@media screen and (max-width: 1257px) {
  .container.container-boxed {
    padding: 0 8vw;
  }
}
@media screen and (max-width: 1000px) {
  .container.container-boxed {
    padding: 0 8vw;
  }
}
@media screen and (max-width: 500px) {
  .container.container-boxed {
    padding: 0 8vw;
  }
}

.wrapper {
  background: #fff;
  position: relative;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.loaded .wrapper {
  opacity: 1;
  visibility: visible;
}

.locoscroll {
  z-index: 2;
  position: relative;
}

#main {
  min-height: 100vh;
  min-height: var(--app-height);
  background: #fff;
  z-index: 2;
  position: relative;
  overflow: hidden;
}
#main > .elementor {
  overflow: hidden;
}

.has-scroll-smooth html,
.has-scroll-smooth body {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.has-scroll-smooth .locoscroll {
  overflow: hidden;
}

.hidden-txt {
  opacity: 0;
}

.appear {
  opacity: 1 !important;
  transition: opacity 5s;
}

body.disable-scroll {
  overflow: hidden;
  height: 100% !important;
}

.common--sns {
  display: flex;
  align-items: center;
  margin-top: auto;
}
@media screen and (max-width: 500px) {
  .common--sns {
    margin-bottom: 1.25rem;
  }
}
.common--sns a {
  width: 1.5rem;
  height: 1.5rem;
  text-indent: -999em;
  overflow: hidden;
  display: block;
  background: 50% 50% no-repeat;
  margin-right: 2.25rem;
  opacity: 0.5;
}
.common--sns a:hover {
  opacity: 1;
}
.common--sns a.facebook {
  background-image: url("../../assets/img/icon/facebook-w.svg");
}
.common--sns a.instagram {
  background-image: url("../../assets/img/icon/instagram-w.svg");
}
.common--sns a.vimeo {
  background-image: url("../../assets/img/icon/vimeo-w.svg");
}

.common--company-info dl {
  margin-bottom: max(1.5rem, 1.8750vw);
  font-family: "Averta", "YoonGothic", sans-serif;
}
.common--company-info dl:last-child {
  margin-bottom: 0 !important;
}
.common--company-info dl dt {
  color: #666666;
  margin-bottom: 0.5em;
  font-size: 0.9375rem;
}
.common--company-info dl dd {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
}
.common--company-info dl .addr {
  font-size: 0.9375rem;
  line-height: 1.4666666667em;
}
@media screen and (max-width: 1000px) {
  .common--company-info dl {
    margin-bottom: max(1.25rem, 2.4vw);
  }
  .common--company-info dl dt {
    font-size: max(0.75rem, 1.5vw);
  }
  .common--company-info dl dd {
    font-size: max(1rem, 2.4vw);
  }
  .common--company-info dl .addr {
    font-size: max(0.75rem, 1.5vw);
  }
  .common--company-info dl .addr br {
    display: none;
  }
}

.mb--0 {
  margin-bottom: 0em !important;
}

.mt--0 {
  margin-top: 0em !important;
}

.mb--1 {
  margin-bottom: 0.5em !important;
}

.mt--1 {
  margin-top: 0.5em !important;
}

.mb--2 {
  margin-bottom: 1em !important;
}

.mt--2 {
  margin-top: 1em !important;
}

.mb--3 {
  margin-bottom: 1.5em !important;
}

.mt--3 {
  margin-top: 1.5em !important;
}

.mb--4 {
  margin-bottom: 2em !important;
}

.mt--4 {
  margin-top: 2em !important;
}

.mb--5 {
  margin-bottom: 2.5em !important;
}

.mt--5 {
  margin-top: 2.5em !important;
}

.mb--6 {
  margin-bottom: 3em !important;
}

.mt--6 {
  margin-top: 3em !important;
}

.mb--7 {
  margin-bottom: 3.5em !important;
}

.mt--7 {
  margin-top: 3.5em !important;
}

.mb--8 {
  margin-bottom: 4em !important;
}

.mt--8 {
  margin-top: 4em !important;
}

.mb--9 {
  margin-bottom: 4.5em !important;
}

.mt--9 {
  margin-top: 4.5em !important;
}

@media screen and (max-width: 1000px) {
  .mb--0--t {
    margin-bottom: 0em !important;
  }

  .mt--0--t {
    margin-top: 0em !important;
  }

  .mb--1--t {
    margin-bottom: 0.5em !important;
  }

  .mt--1--t {
    margin-top: 0.5em !important;
  }

  .mb--2--t {
    margin-bottom: 1em !important;
  }

  .mt--2--t {
    margin-top: 1em !important;
  }

  .mb--3--t {
    margin-bottom: 1.5em !important;
  }

  .mt--3--t {
    margin-top: 1.5em !important;
  }

  .mb--4--t {
    margin-bottom: 2em !important;
  }

  .mt--4--t {
    margin-top: 2em !important;
  }

  .mb--5--t {
    margin-bottom: 2.5em !important;
  }

  .mt--5--t {
    margin-top: 2.5em !important;
  }

  .mb--6--t {
    margin-bottom: 3em !important;
  }

  .mt--6--t {
    margin-top: 3em !important;
  }

  .mb--7--t {
    margin-bottom: 3.5em !important;
  }

  .mt--7--t {
    margin-top: 3.5em !important;
  }

  .mb--8--t {
    margin-bottom: 4em !important;
  }

  .mt--8--t {
    margin-top: 4em !important;
  }

  .mb--9--t {
    margin-bottom: 4.5em !important;
  }

  .mt--9--t {
    margin-top: 4.5em !important;
  }
}
@media screen and (max-width: 500px) {
  .mb--0--m {
    margin-bottom: 0em !important;
  }

  .mt--0--m {
    margin-top: 0em !important;
  }

  .mb--1--m {
    margin-bottom: 0.5em !important;
  }

  .mt--1--m {
    margin-top: 0.5em !important;
  }

  .mb--2--m {
    margin-bottom: 1em !important;
  }

  .mt--2--m {
    margin-top: 1em !important;
  }

  .mb--3--m {
    margin-bottom: 1.5em !important;
  }

  .mt--3--m {
    margin-top: 1.5em !important;
  }

  .mb--4--m {
    margin-bottom: 2em !important;
  }

  .mt--4--m {
    margin-top: 2em !important;
  }

  .mb--5--m {
    margin-bottom: 2.5em !important;
  }

  .mt--5--m {
    margin-top: 2.5em !important;
  }

  .mb--6--m {
    margin-bottom: 3em !important;
  }

  .mt--6--m {
    margin-top: 3em !important;
  }

  .mb--7--m {
    margin-bottom: 3.5em !important;
  }

  .mt--7--m {
    margin-top: 3.5em !important;
  }

  .mb--8--m {
    margin-bottom: 4em !important;
  }

  .mt--8--m {
    margin-top: 4em !important;
  }

  .mb--9--m {
    margin-bottom: 4.5em !important;
  }

  .mt--9--m {
    margin-top: 4.5em !important;
  }
}
.__with-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.1);
}
.__with-scrollbar::-webkit-scrollbar-thumb {
  width: 3px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

svg.logo .logo-txt {
  fill: #000;
}
svg.logo .logo-c1 {
  fill: #fcf012;
}
svg.logo .logo-c2 {
  fill: #fc30aa;
}
svg.logo .logo-c3 {
  fill: #ae3bff;
}

.brand .anim svg > g > g:first-child > rect {
  fill: #000;
}

[data-theme=light] svg.logo .logo-txt {
  fill: #000;
}
[data-theme=light] .brand .anim svg > g > g:first-child > rect {
  fill: #000;
}

.brand .anim.__white {
  opacity: 0;
}

.brand .anim.__black {
  opacity: 1;
}

.off-canvas-menu .site-header svg.logo .logo-txt,
[data-theme=dark] svg.logo .logo-txt {
  fill: #fff;
}
.off-canvas-menu .site-header .brand .anim svg > g > g:first-child > rect,
[data-theme=dark] .brand .anim svg > g > g:first-child > rect {
  fill: #fff;
}
.off-canvas-menu .site-header .brand .anim.__white,
[data-theme=dark] .brand .anim.__white {
  opacity: 1;
}
.off-canvas-menu .site-header .brand .anim.__black,
[data-theme=dark] .brand .anim.__black {
  opacity: 0;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1098;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: #000;
  transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1);
  padding: max(3.5rem, 2.92vw) max(4.375rem, 3.65vw);
}
.site-header.hide {
  transform: translateY(-120px);
}
.site-header .btn-contact {
  margin-right: 66px;
}
.site-header a {
  color: #000;
}
@media screen and (max-width: 1440px) {
  .site-header {
    padding: max(2.5rem, calc(3.2vw + 10px)) max(4.375rem, 3.65vw);
  }
}
@media screen and (max-width: 1257px) {
  .site-header {
    padding: max(2.5rem, calc(3.2vw + 10px)) max(2.5rem, 5.6vw);
  }
}
@media screen and (max-width: 500px) {
  .site-header {
    padding: 8vw 8vw;
  }
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  height: 46px;
}
@media screen and (max-width: 1000px) {
  .site-header .header-inner {
    height: 38px;
  }
}
@media screen and (max-width: 500px) {
  .site-header .header-inner {
    height: 30px;
  }
}
.site-header .brand a {
  display: block;
  position: relative;
}
.site-header .brand svg.logo {
  display: block;
  width: 60px;
  height: 46px;
  opacity: 0;
}
@media screen and (max-width: 1000px) {
  .site-header .brand svg.logo {
    width: 49.5652173913px;
    height: 38px;
  }
}
@media screen and (max-width: 500px) {
  .site-header .brand svg.logo {
    width: 39.1304347826px;
    height: 30px;
  }
}
.site-header .brand .anim {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 140px;
  height: 46px;
}
@media screen and (max-width: 1000px) {
  .site-header .brand .anim {
    width: 115.652173913px;
    height: 38px;
  }
}
@media screen and (max-width: 500px) {
  .site-header .brand .anim {
    width: 91.3043478261px;
    height: 30px;
  }
}
.site-header .site-nav .gnb .toggle-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.site-header[data-theme=light] {
  color: #000;
  background: transparent;
}
.site-header[data-theme=light] a {
  color: #000;
}
.site-header[data-theme=light] .site-nav .btn-off-canvas-menu-toggle span.line:before {
  background: #000;
}
.site-header[data-theme=light] .site-nav .btn-contact {
  color: #000;
}

.off-canvas-menu .site-header,
#header[data-theme=dark] {
  color: #fff;
}
.off-canvas-menu .site-header a,
#header[data-theme=dark] a {
  color: #fff;
}
.off-canvas-menu .site-header .site-nav .btn-contact,
#header[data-theme=dark] .site-nav .btn-contact {
  color: #fff;
}
.off-canvas-menu .site-header .btn-off-canvas-menu-toggle span.line:before,
#header[data-theme=dark] .btn-off-canvas-menu-toggle span.line:before {
  background: #fff;
}

.site-nav {
  font-family: "Averta", "YoonGothic", sans-serif;
  margin-left: auto;
}
.site-nav .nav-inner {
  display: flex;
  align-items: center;
}
.site-nav .btn-contact {
  color: #000;
  font-size: 15px;
  font-weight: 600;
  background-color: transparent;
  display: block;
}
.site-nav .btn-contact span {
  display: block;
}
@media screen and (max-width: 500px) {
  .site-nav .btn-contact {
    display: none;
  }
}

.off-canvas-menu-toggle {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1009;
}
.off-canvas-menu-toggle .site-header {
  position: static;
  padding-left: 0;
}

.btn-off-canvas-menu-toggle {
  width: 22px;
  height: 22px;
  display: block;
  margin-left: auto;
  position: relative;
}
.btn-off-canvas-menu-toggle:after {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
}
.btn-off-canvas-menu-toggle span.line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.btn-off-canvas-menu-toggle span.line.l1, .btn-off-canvas-menu-toggle span.line.l2 {
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  transition: transform 360ms cubic-bezier(0.86, 0, 0.07, 1), width 360ms cubic-bezier(0.86, 0, 0.07, 1), background-color 150ms;
  will-change: transform, width, background-color;
  transform-origin: 50% 50%;
  display: flex;
  justify-content: flex-end;
  width: 22px;
}
.btn-off-canvas-menu-toggle span.line.l1:before, .btn-off-canvas-menu-toggle span.line.l2:before {
  content: "";
  position: relative;
  height: 2px;
  width: 22px;
  background: #000;
  transition: transform 360ms cubic-bezier(0.86, 0, 0.07, 1), width 360ms cubic-bezier(0.86, 0, 0.07, 1), background-color 150ms;
  will-change: transform, width, background-color;
  display: block;
}
.btn-off-canvas-menu-toggle span.line.l1 {
  transform: translate(-50%, -3px);
}
.btn-off-canvas-menu-toggle span.line.l1:before {
  width: 22px;
}
.btn-off-canvas-menu-toggle span.line.l2 {
  transform: translate(-50%, 3px);
}
.btn-off-canvas-menu-toggle span.line.l2:before {
  right: 0;
  width: 12px;
}
.btn-off-canvas-menu-toggle.active span.line.l1 {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  width: 24px !important;
}
.btn-off-canvas-menu-toggle.active span.line.l1:before {
  width: 24px !important;
}
.btn-off-canvas-menu-toggle.active span.line.l2 {
  transform: translate(-50%, -50%) rotate(45deg) !important;
  width: 24px !important;
}
.btn-off-canvas-menu-toggle.active span.line.l2:before {
  width: 24px !important;
}
.btn-off-canvas-menu-toggle.open span.line:before {
  background: #fff;
}
@media (hover: hover) {
  .btn-off-canvas-menu-toggle:hover span.line.l2:before {
    width: 22px;
  }
}

.off-canvas-menu--active #offCanvasMenu {
  opacity: 1;
  visibility: visible;
  z-index: 1001;
}

#offCanvasMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  left: auto;
  width: 100%;
  color: #fff;
}
#offCanvasMenu.active {
  opacity: 1;
  visibility: visible;
  z-index: 1001;
}
#offCanvasMenu a {
  color: inherit;
}
#offCanvasMenu .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#offCanvasMenu .off-canvas-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}
#offCanvasMenu .off-canvas-menu-scroll {
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  align-items: center;
  padding: 0 !important;
  height: 100%;
}
@media screen and (max-width: 500px) {
  #offCanvasMenu .off-canvas-menu-scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
#offCanvasMenu .off-canvas-menu-inner {
  padding: 5vw 17vw;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
  #offCanvasMenu .off-canvas-menu-inner {
    padding: 5vw 13vw 0;
  }
}
@media screen and (max-width: 500px) {
  #offCanvasMenu .off-canvas-menu-inner {
    padding: 0 8vw;
  }
}
#offCanvasMenu .menu-grid {
  display: flex;
  z-index: 1009;
  position: relative;
}
#offCanvasMenu .menu-grid.grid-top {
  margin-bottom: max(3rem, 2.5vw);
  align-items: flex-end;
}
#offCanvasMenu .menu-grid.grid-bottom {
  align-items: center;
}
@media screen and (max-width: 500px) {
  #offCanvasMenu .menu-grid.grid-bottom {
    position: absolute;
    left: 8vw;
    bottom: max(3rem, 2.5vw);
  }
}
#offCanvasMenu .menu-grid .menu-col {
  width: auto;
  min-width: 1px;
  white-space: nowrap;
}
#offCanvasMenu .menu-grid .menu-col:last-child {
  margin-left: auto;
  width: 25%;
}
@media screen and (max-width: 1000px) {
  #offCanvasMenu .menu-grid .menu-col:last-child {
    display: none;
  }
}
#offCanvasMenu .btn-creativelab {
  height: 3.375em;
  padding: 0 1.875em;
  border-radius: 1.875em;
  border: solid 1px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
}
#offCanvasMenu .common--company-info {
  margin-bottom: 0.5rem;
}
#offCanvasMenu .gnb {
  margin-bottom: -0.25em;
}
#offCanvasMenu .gnb li {
  overflow: hidden;
}
#offCanvasMenu .gnb li a {
  font-size: max(4rem, 4.2vw);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  padding-bottom: 0.1em;
  background: rgba(0, 0, 0, 0);
}
@media screen and (max-width: 1000px) {
  #offCanvasMenu .gnb li a {
    font-size: max(3.5rem, 6.4vw);
  }
}
@media screen and (max-width: 500px) {
  #offCanvasMenu .gnb li a {
    font-size: 11.2vw;
  }
}
#offCanvasMenu .gnb li a .circle {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 0em;
  width: 0em;
  overflow: hidden;
  transition: all 400ms;
}
#offCanvasMenu .gnb li a .circle:before,
#offCanvasMenu .gnb li a .circle i, #offCanvasMenu .gnb li a .circle:after {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #000;
  position: relative;
  transition: all 400ms;
}
#offCanvasMenu .gnb li a .circle i, #offCanvasMenu .gnb li a .circle:after {
  margin-left: -0.375em;
}
#offCanvasMenu .gnb li a span {
  display: inline-flex;
  position: relative;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-stroke-width 300ms, -webkit-text-stroke-color 300ms, -webkit-text-fill-color 300ms;
  will-change: -webkit-text-stroke-width, -webkit-text-stroke-color, -webkit-text-fill-color;
}
#offCanvasMenu .gnb li a span:before {
  content: attr(data-label);
  -webkit-text-fill-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 300ms;
  will-change: opacity;
}
#offCanvasMenu .gnb li.current-menu-item a .circle, #offCanvasMenu .gnb li.active a .circle {
  margin-right: 0.125em;
  width: 0.75em;
}
#offCanvasMenu .gnb li.current-menu-item a span, #offCanvasMenu .gnb li.active a span {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}
#offCanvasMenu .gnb li.current-menu-item a span:before, #offCanvasMenu .gnb li.active a span:before {
  opacity: 0;
}
#offCanvasMenu .gnb li.current-menu-item.inactive a .circle, #offCanvasMenu .gnb li.active.inactive a .circle {
  margin-right: 0;
  width: 0;
}
#offCanvasMenu .gnb li.current-menu-item.inactive a span, #offCanvasMenu .gnb li.active.inactive a span {
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #fff;
}
#offCanvasMenu .gnb li.current-menu-item.inactive a span:before, #offCanvasMenu .gnb li.active.inactive a span:before {
  opacity: 1;
}
#offCanvasMenu .gnb li + * {
  margin-top: 1.4em;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#footer .footer-inner {
  position: relative;
  background: #111;
  color: #fff;
  box-sizing: border-box;
  padding: 0 max(4.375rem, 3.65vw) max(4.375rem, 3.65vw);
}
@media screen and (max-width: 1257px) {
  #footer .footer-inner {
    padding: 0 5.6vw 5.6vw;
  }
}
@media screen and (max-width: 1000px) {
  #footer .footer-inner {
    padding: 0 8vw 8vw;
  }
}
@media screen and (max-width: 500px) {
  #footer .footer-inner {
    padding: 0 8vw 8vw;
  }
}
#footer a {
  color: #fff;
}
#footer .footer-row {
  display: flex;
}
#footer .footer-row-top {
  padding-top: 12vmin;
  padding-bottom: 11vmin;
}
@media screen and (max-width: 500px) {
  #footer .footer-row-top {
    display: block;
    padding-top: max(3rem, 12.8vw);
    padding-bottom: 2.5rem;
  }
}
@media screen and (max-width: 500px) {
  #footer .footer-row-bottom {
    display: block;
  }
}
#footer .footer-col {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
  #footer .footer-col {
    padding-top: 0 !important;
    width: 100% !important;
  }
}
#footer .footer-col1 {
  width: 50%;
}
@media screen and (max-width: 1257px) {
  #footer .footer-col1 {
    width: calc(6.4vw + 35%);
  }
}
@media screen and (max-width: 1000px) {
  #footer .footer-col1 {
    display: none !important;
  }
}
#footer .footer-col2 {
  width: auto;
}
@media screen and (max-width: 1000px) {
  #footer .footer-col2 {
    width: 50%;
  }
}
#footer .footer-col3 {
  width: max(20.4%, 238px);
  margin-left: auto;
}
@media screen and (max-width: 1000px) {
  #footer .footer-col3 {
    width: 50%;
  }
}
#footer .brand {
  position: relative;
}
#footer .brand svg {
  display: block;
  width: 8.125rem;
  height: auto;
}
#footer .brand svg .logo-txt {
  fill: #fff;
}
#footer .brand .logo {
  opacity: 0;
}
#footer .brand .anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.125rem;
  height: 100%;
}
#footer .logos {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
}
#footer .logos img,
#footer .logos svg {
  display: block;
}
#footer .logos .split {
  display: block;
  width: 1px;
  background: #666;
  height: 100%;
  margin: 0 1.625rem;
}
#footer .logos .does {
  width: 7.625rem;
}
#footer .logos .dcl {
  width: 5.625rem;
}
#footer .footer-menu {
  font-family: "Averta", "YoonGothic", sans-serif;
}
@media screen and (max-width: 500px) {
  #footer .footer-menu {
    margin-bottom: 2.5rem;
  }
}
#footer .footer-menu li + li {
  margin-top: 1.6em;
}
#footer .footer-menu li a {
  font-size: max(2.5rem, 2.5vw);
  font-weight: 700;
  position: relative;
  overflow: hidden;
  display: block;
}
#footer .footer-menu li a span[data-label] {
  transition: transform 400ms;
  position: relative;
  line-height: 1.2;
  display: block;
}
#footer .footer-menu li a span[data-label]:after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 0;
}
#footer .footer-menu li a:hover span[data-label] {
  transform: translateY(-100%);
}
@media screen and (max-width: 1000px) {
  #footer .footer-menu li a {
    font-size: max(1.875rem, 4vw);
  }
}
#footer .copy {
  margin-top: auto;
  font-size: 0.9375rem;
  letter-spacing: -0.0146666667em;
  color: #666666;
  line-height: 1.3333333333em;
  margin-bottom: -0.1333333333em;
}
#footer .copy span {
  display: inline-block;
}
@media screen and (max-width: 1000px) {
  #footer .copy {
    font-size: max(0.6875rem, 1.5vw);
  }
}

.has-scroll-init.has-scroll-smooth #footer {
  z-index: 999;
  overflow: hidden;
}
.has-scroll-init.has-scroll-smooth #footer .footer-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.page-template-home,
.page-template-inquiry,
.page-template-recruit {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.page-template-home #main,
.page-template-inquiry #main,
.page-template-recruit #main {
  position: relative;
  z-index: 9;
  min-height: 100vh;
  min-height: var(--app-height);
  overflow: hidden;
}
.page-template-home .locoscroll-inner,
.page-template-inquiry .locoscroll-inner,
.page-template-recruit .locoscroll-inner {
  padding-bottom: 0 !important;
}

.page-template-inquiry #footer,
.page-template-recruit #footer {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.page-template-home #footer {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1009;
  overflow: hidden;
  height: 0;
}
.page-template-home #footer .footer-inner {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
}

.does-post .elementor-row,
.does-post .elementor-container {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.does-post .elementor-row .elementor-column.elementor-col-100,
.does-post .elementor-container .elementor-column.elementor-col-100 {
  width: 100% !important;
}
.does-post .elementor-row .elementor-column.elementor-col-66,
.does-post .elementor-container .elementor-column.elementor-col-66 {
  width: 65% !important;
}
.does-post .elementor-row .elementor-column.elementor-col-50,
.does-post .elementor-container .elementor-column.elementor-col-50 {
  width: 47.5% !important;
}
.does-post .elementor-row .elementor-column.elementor-col-33,
.does-post .elementor-container .elementor-column.elementor-col-33 {
  width: 30% !important;
}
@media screen and (max-width: 1000px) {
  .does-post .elementor-row .elementor-column.elementor-col-100--t,
.does-post .elementor-container .elementor-column.elementor-col-100--t {
    width: 100% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-66--t,
.does-post .elementor-container .elementor-column.elementor-col-66--t {
    width: 65% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-50--t,
.does-post .elementor-container .elementor-column.elementor-col-50--t {
    width: 47.5% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-33--t,
.does-post .elementor-container .elementor-column.elementor-col-33--t {
    width: 30% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-head--t,
.does-post .elementor-container .elementor-column.elementor-col-head--t {
    order: -1;
  }
}
@media screen and (max-width: 500px) {
  .does-post .elementor-row .elementor-column.elementor-col-100--m,
.does-post .elementor-container .elementor-column.elementor-col-100--m {
    width: 100% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-66--m,
.does-post .elementor-container .elementor-column.elementor-col-66--m {
    width: 65% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-50--m,
.does-post .elementor-container .elementor-column.elementor-col-50--m {
    width: 47.5% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-33--m,
.does-post .elementor-container .elementor-column.elementor-col-33--m {
    width: 30% !important;
  }
  .does-post .elementor-row .elementor-column.elementor-col-head--m,
.does-post .elementor-container .elementor-column.elementor-col-head--m {
    order: -1;
  }
}
.does-post .elementor-widget {
  margin: 0;
}
.does-post .--gap-sm {
  height: 1rem !important;
}
.does-post .--gap-lg {
  height: max(3rem, 5.625vw) !important;
}
.does-post .--gap-xl {
  height: max(3rem, 10vw) !important;
}
@media screen and (max-width: 1000px) {
  .does-post .--gap-xl {
    height: 0 !important;
  }
}
.does-post .--gap-1 {
  height: max(1rem, 2.5vw) !important;
}
.does-post .--gap-2 {
  height: max(2rem, 5vw) !important;
}
.does-post .--gap-3 {
  height: max(3rem, 3.9vw) !important;
}
.does-post .--gap-blog-xxl {
  height: calc(5vw + 48px) !important;
}
.does-post .--gap-blog-xl {
  height: calc(2.08vw + 40px) !important;
}
.does-post .--gap-blog-lg {
  height: calc(1.56vw + 34px) !important;
}
.does-post .--gap-blog-md {
  height: max(2rem, 2.0833vw) !important;
}
.does-post .--gap-blog-sm {
  height: max(1.5rem, 1.6667vw) !important;
}
.does-post .--gap-blog-xs {
  height: max(1.375rem, 1.4583vw) !important;
}

input,
textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  border: 0;
  outline: none;
  border-radius: 0;
  line-height: 1;
  font-family: inherit;
  resize: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}
input::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #e6e6e6;
  border-radius: 3px;
}
input::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  width: 4px;
  height: 4px;
  background-color: #b4b4b4;
  border-radius: 3px;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -1.25em;
}
.option-group label {
  display: block;
  position: relative;
  margin: 0 1.1111111111em 1.1111111111em 0;
}
.option-group label input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.option-group label .label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  height: 3.8888888889em;
  padding: 0 2em;
  border-radius: 2em;
  border: solid 1px #d4d4d4;
  box-sizing: border-box;
}
.option-group label .__capsule {
  overflow: hidden;
  position: relative;
}
.option-group label .__capsule .__capsule-title {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;
}
.option-group label .__capsule .__capsule-title span {
  display: block;
  text-align: center;
  transform-origin: left top;
  transition: color 0.2s, transform 0.4s;
}
.option-group label .__capsule .__capsule-title span:after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 150%;
  left: 0;
  transform: skewY(5deg);
  transform-origin: left top;
  transition: transform 0.4s;
}
.option-group label .__capsule .__capsule-ripple {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: inherit;
}
.option-group label .__capsule .__capsule-ripple span {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(105%);
  background: #000;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);
  animation: none;
}
@keyframes __capsule--rounded-ripple-in {
  0% {
    border-radius: 100%;
    transform: translateY(-105%) translateZ(0);
  }
  100% {
    border-radius: 0;
    transform: translateY(0) translateZ(0);
  }
}
@media (hover: hover) {
  .option-group label .__capsule:hover .__capsule-title span {
    transform: translateY(-150%) skewY(-7deg);
  }
  .option-group label .__capsule:hover .__capsule-title span:after {
    transform: skewY(7deg);
  }
}
.option-group label input:checked + .label .__capsule-title span {
  color: #fff;
  transform: translateY(-150%) skewY(-7deg);
}
.option-group label input:checked + .label .__capsule-title span:after {
  transform: skewY(7deg);
}
.option-group label input:checked + .label .__capsule-ripple span {
  border-radius: 0;
  transform: translateY(0);
  transition-duration: 0s, 0s;
  animation: __capsule--rounded-ripple-in 0.5s cubic-bezier(0.4, 0, 0, 1);
}

.inline-form-blocks {
  display: flex;
  width: 100%;
}
.inline-form-blocks .form-block {
  flex: 0 1 47%;
  width: 47%;
}
.inline-form-blocks .form-block + .form-block {
  margin-left: 6%;
}
.inline-form-blocks + .inline-form-blocks {
  margin-top: 1em;
}
@media screen and (max-width: 1000px) {
  .inline-form-blocks {
    flex-direction: column;
  }
  .inline-form-blocks + .inline-form-blocks {
    margin-top: 0.25em;
  }
  .inline-form-blocks .form-block {
    flex: 1;
    width: 100%;
    margin-left: 0 !important;
  }
  .inline-form-blocks .form-block + .form-block {
    margin-top: 0.25em;
  }
}

.vertical-form-blocks {
  display: flex;
  flex-direction: column;
}
.vertical-form-blocks .form-block {
  width: 100%;
  margin-bottom: 1rem;
}

.form-block {
  display: flex;
  align-items: center;
  width: 100%;
}
.form-block .form-label {
  display: block;
  white-space: nowrap;
  margin-right: 1.8181818182em;
  line-height: 1;
  font-weight: 600;
  font-size: max(1.125rem, 1.15vw);
}
@media screen and (max-width: 1000px) {
  .form-block .form-label {
    font-size: max(1rem, 1.8vw);
  }
}
@media screen and (max-width: 500px) {
  .form-block .form-label {
    font-size: 3.2vw;
  }
}
.form-block .form-control {
  flex: 1;
  width: 100%;
  position: relative;
}
.form-block .form-control input {
  padding: 1em 0;
  border-bottom: 1px solid #d4d4d4;
  width: 100%;
  line-height: 1;
}
.form-block .form-control .unit {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (max-width: 1000px) {
  .form-block {
    display: block;
  }
  .form-block .form-label {
    width: auto;
    position: relative;
    z-index: 2;
  }
}

.form-textarea {
  display: block;
  height: auto;
  padding: 0.8em 0.4em 0.8em 0.8em;
  border-radius: 0.8em;
  border: solid 1px #d4d4d4;
  background-color: #ffffff;
}
.form-textarea textarea {
  display: block;
  width: 100%;
  font-size: inherit;
  padding-right: 0.4em;
  line-height: 1.3;
}
@media screen and (max-width: 500px) {
  .form-textarea textarea {
    font-size: 15px;
  }
}

.form-txt,
.form-attachment {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.form-txt .msg,
.form-attachment .msg {
  line-height: 1.25;
  display: block;
  flex: 1;
  min-width: 1px;
}
.form-txt button,
.form-attachment button {
  display: block;
  margin-left: auto;
  width: min(3.5rem, 4.8vw);
  height: min(3.5rem, 4.8vw);
  border: solid 1px #d4d4d4;
  border-radius: 50%;
  background: #fff url(../img/icon/file.svg) 50% 50% no-repeat;
  background-size: 46.4285714286%;
  text-indent: -999em;
  overflow: hidden;
  transition: background 300ms;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (max-width: 1000px) {
  .form-txt button,
.form-attachment button {
    width: min(3rem, 8vw);
    height: min(3rem, 8vw);
  }
}
@media screen and (max-width: 500px) {
  .form-txt button,
.form-attachment button {
    width: 40px;
    height: 40px;
  }
}
@media (hover: hover) {
  .form-txt button:hover,
.form-attachment button:hover {
    background-color: #000;
    background-image: url(../img/icon/file-w.svg);
  }
}
.form-txt input[type=text],
.form-attachment input[type=text] {
  padding: 0.8125rem 0;
  padding-right: 3em;
  border-bottom: 1px solid #d4d4d4;
  width: 100%;
  line-height: 1;
  height: calc(min(3.5rem, 4.8vw) + 1.625rem);
}
@media screen and (max-width: 1000px) {
  .form-txt input[type=text],
.form-attachment input[type=text] {
    height: calc(min(3rem, 8vw) + 1.625rem);
  }
}
@media screen and (max-width: 500px) {
  .form-txt input[type=text],
.form-attachment input[type=text] {
    height: calc(40px + 1.625rem);
  }
}
.form-txt input[type=file],
.form-attachment input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 500px) {
  .form-txt.__sm input[type=text],
.form-attachment.__sm input[type=text] {
    font-size: max(0.8rem, 1.2vw);
  }
}

.agree-box {
  margin-top: 2.5em;
}
.agree-box label {
  display: flex;
  align-items: center;
}
.agree-box label input {
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.875em 0 0;
  background: #fff url(../img/icon/check.svg) 50% 50% no-repeat;
  background-size: 1em auto;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
}
.agree-box label input:checked {
  background-color: #000;
  border-color: #000;
  background-image: url(../img/icon/checked.svg);
}
@media screen and (max-width: 500px) {
  .agree-box label span {
    font-size: 15px;
  }
}
.agree-box label a {
  text-decoration: underline;
}
@media screen and (max-width: 500px) {
  .agree-box {
    margin-top: 1.5em;
  }
}

.form-career {
  display: flex;
}
.form-career label {
  display: flex;
  align-items: center;
  margin-right: 1.25em;
}
.form-career label input {
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.875em 0 0;
  background: #fff url(../img/icon/check.svg) 50% 50% no-repeat;
  background-size: 1em auto;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
}
.form-career label input:checked {
  background-color: #000;
  border-color: #000;
  background-image: url(../img/icon/checked.svg);
}
@media screen and (max-width: 500px) {
  .form-career label span {
    font-size: 15px;
  }
}
.form-career label:first-child {
  margin-right: 3.75em;
}
.form-career .input-year {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d4d4d4;
  padding: 0.5em 0;
  color: #767676;
}
.form-career .input-year input {
  width: 3.5em;
  text-align: center;
}
.form-career .input-year input::-webkit-outer-spin-button, .form-career .input-year input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  border: 0;
  background: transparent;
  font-size: 1rem;
}

.__btn-flip {
  position: relative;
  display: inline-flex;
}
.__btn-flip:before {
  content: "";
  top: -0.5em;
  right: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
}
.__btn-flip .__label {
  display: block;
  overflow: hidden;
  position: relative;
}
.__btn-flip .__label span {
  transition: transform 300ms;
  display: flex;
  align-items: center;
  height: 1.5em;
}
.__btn-flip .__label span[data-label]:after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 100%;
}
.__btn-flip:hover .__label span {
  transform: translateY(-100%);
}

.btn--mouse-interactive {
  display: inline-flex;
}
.btn--mouse-interactive.awards .__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.666em;
}

.btn-capsule {
  overflow: hidden;
  position: relative;
  border-radius: 4em;
}
.btn-capsule .btn-capsule-title {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;
}
.btn-capsule .btn-capsule-title span {
  display: block;
  text-align: center;
  transform-origin: left top;
  transition: color 0.2s, transform 0.4s;
}
.btn-capsule .btn-capsule-title span[data-text]:after,
.btn-capsule .btn-capsule-title span .__after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 150%;
  left: 0;
  transform: skewY(5deg);
  transform-origin: left top;
  transition: transform 0.4s;
  color: #000;
}
.btn-capsule .btn-capsule-ripple {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: inherit;
}
.btn-capsule .btn-capsule-ripple span {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(105%);
  background: currentColor;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);
  animation: none;
}
.btn-capsule.__inverse {
  color: #000;
}
.btn-capsule.__inverse .btn-capsule-title span .__after,
.btn-capsule.__inverse .btn-capsule-title span[data-text]:after {
  color: #fff;
}
.btn-capsule.__inverse .btn-capsule-ripple span {
  background: #000;
}

@media (hover: hover) {
  .btn-capsule:hover .btn-capsule-title span {
    color: #fff;
    transform: translateY(-150%) skewY(-7deg);
  }
  .btn-capsule:hover .btn-capsule-title span .__after,
.btn-capsule:hover .btn-capsule-title span[data-text]:after {
    transform: skewY(7deg);
  }
  .btn-capsule:hover .btn-capsule-ripple span {
    border-radius: 0;
    transform: translateY(0);
    transition-duration: 0s, 0s;
    animation: btn-capsule--rounded-ripple-in 0.5s cubic-bezier(0.4, 0, 0, 1);
  }
}
@keyframes btn-capsule--rounded-ripple-in {
  0% {
    border-radius: 100%;
    transform: translateY(-105%) translateZ(0);
  }
  100% {
    border-radius: 0;
    transform: translateY(0) translateZ(0);
  }
}
.btn-gohome {
  height: 3.125rem;
  padding: 0 1.875rem;
  border-radius: 1.875rem;
  border: solid 1px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  letter-spacing: -0.05em;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: all 400ms ease-out;
}
.modal.active {
  z-index: 999999;
  visibility: visible;
  opacity: 1;
}
.modal.active .modal-box {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 200ms;
}
.modal .modal-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .modal-box {
  width: min(44rem, 84vw);
  background: #fff;
  transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1), opacity 600ms;
  transform: translateY(10%);
  opacity: 0;
}
.modal .modal-box-header {
  padding: 3em min(3.5rem, 8vw);
  display: flex;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .modal .modal-box-header {
    align-items: flex-start;
  }
}
.modal .modal-box-header .__title {
  margin-right: 1em;
  font-size: 1.75em;
  letter-spacing: -0.05em;
  line-height: 1.8;
}
.modal .modal-box-header .__close {
  margin-left: auto;
  display: block;
  background: url(../img/icon/x.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 1.875em;
  height: 1.875em;
  text-indent: -999em;
  overflow: hidden;
}
.modal .modal-box-body {
  max-height: max(25rem, 60vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.7777777778em;
}
.modal .modal-box-body .__inner {
  padding: 0 min(3.5rem, 8vw) min(3.5rem, 8vw);
}
.modal .modal-box-body h5 {
  font-weight: 600;
  margin-bottom: 1em;
}
.modal .modal-box-body hr {
  border: 0;
  height: 1px;
  background: #d4d4d4;
  margin: 2.5em 0;
}
.modal .modal-box-body p, .modal .modal-box-body ol, .modal .modal-box-body ul {
  margin-bottom: 2.25em;
}
.modal .modal-box-body ol {
  list-style: decimal;
  list-style-position: inside;
}
@media screen and (max-width: 500px) {
  .modal .modal-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .modal .modal-box-body {
    max-height: 100%;
    flex: 1;
  }
}

#intro {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  background-color: #fff;
  overflow: hidden;
}
#intro .intro-motion {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#intro .intro-motion .__canvas {
  width: 100%;
  height: 100%;
  transform: scale(1.1);
}
#intro.end {
  background: transparent;
}

.colorful-transition {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.colorful-transition.active {
  opacity: 1;
  visibility: visible;
  z-index: 990;
}
.colorful-transition.active-top {
  opacity: 1;
  visibility: visible;
  z-index: 99999999;
}
.colorful-transition canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.colorful-transition .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.colorful-transition .box svg {
  display: block;
  width: 100%;
  height: 100%;
}
.colorful-transition .box svg path {
  stroke: none;
}

.page-home-wrapper {
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-home-content {
  opacity: 0;
}
.page-home-content.active {
  opacity: 1;
}

.home-section {
  position: absolute;
  width: 100%;
  min-height: 100vh;
  min-height: var(--app-height);
  overflow: hidden;
  top: 0;
  left: 0;
}

.home-logo {
  position: absolute;
  z-index: 99;
  left: max(4.375rem, 3.65vw);
}
.home-logo img {
  display: block;
  height: 30px;
  width: 76px;
}
@media screen and (max-width: 1440px) {
  .home-logo {
    left: max(4.375rem, 3.65vw);
  }
}
@media screen and (max-width: 1257px) {
  .home-logo {
    left: max(2.5rem, 5.6vw);
  }
}
@media screen and (max-width: 500px) {
  .home-logo {
    left: 8vw;
  }
}

.home-indices {
  --color: #FCF012;
  z-index: 9999999999;
  position: fixed;
  right: max(4.375rem, 3.65vw);
}
@media screen and (max-width: 1440px) {
  .home-indices {
    right: max(4.375rem, 3.65vw);
  }
}
@media screen and (max-width: 1257px) {
  .home-indices {
    right: max(2.5rem, 5.6vw);
  }
}
@media screen and (max-width: 500px) {
  .home-indices {
    right: 8vw;
  }
}
.home-indices .__indices {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.home-indices .index + .index {
  margin-top: 22px;
}
.home-indices .index .btn--mouse-interactive {
  display: block;
}
.home-indices .index a {
  display: block;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  text-indent: -999em;
  font-size: 0;
  transition: background-color 300ms ease, height 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955), width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: relative;
}
.home-indices .index a:after {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  content: "";
}
@media (hover: hover) {
  .home-indices .index a:hover {
    width: 8px;
    height: 8px;
  }
}
.home-indices .index.active a {
  background-color: var(--color);
  height: 26px;
}
@media (hover: hover) {
  .home-indices .index.active a:hover {
    width: 8px;
    height: 26px;
  }
}

.home-sections {
  visibility: hidden;
  z-index: -1;
  background: #000;
}
.home-sections.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.home-sections .home-section {
  visibility: hidden;
  z-index: -1;
  background: #000;
}
.home-sections .home-section.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.home-logo,
.home-indices {
  bottom: 56px;
}

@media screen and (max-width: 1000px) {
  .home-logo,
.home-indices {
    bottom: 42px;
  }
}
@media screen and (max-width: 500px) {
  .home-logo,
.home-indices {
    bottom: 40px;
  }

  .home-indices .index + .index {
    margin-top: 15px;
  }
  .home-indices .index.active {
    height: 20px;
  }
}
@media screen and (max-width: 454px) {
  .home-logo,
.home-indices {
    bottom: 30px;
  }
}
#homeMain {
  background-color: #fff;
}
#homeMain .home-section-inner {
  padding-top: 28.333vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#homeMain .slogan {
  font-size: 60px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #222222;
  font-weight: 700;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.6333333333em;
}
#homeMain .slogan .txts p {
  overflow: hidden;
}
#homeMain .slogan .txts p span {
  display: block;
}
#homeMain .slogan .circles {
  display: flex;
  height: 1.5em;
  align-items: center;
  margin-left: 0.25em;
}
#homeMain .slogan .circles .c {
  display: block;
  width: 0.9333333333em;
  height: 0.9333333333em;
  margin-right: -0.4666666667em;
  position: relative;
}
#homeMain .slogan .circles .c .o {
  width: 0.9333333333em;
  height: 0.9333333333em;
  border-radius: 0.9333333333em;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#homeMain .slogan .circles .c.c1 .o {
  background: #fcf012;
}
#homeMain .slogan .circles .c.c2 .o {
  background: #fc30aa;
}
#homeMain .slogan .circles .c.c3 .o {
  background: #ae3bff;
}
#homeMain .since {
  white-space: nowrap;
  font-size: 0;
  width: 50px;
}
#homeMain .since p {
  display: inline-block;
}
#homeMain .since p span {
  display: inline-block;
  padding-right: 0.25em;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #000000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 1257px) {
  #homeMain .slogan {
    font-size: 4.7732696897vw;
  }
  #homeMain .since p span {
    font-size: 9.5465393795vw;
  }
}
@media screen and (max-width: 500px) {
  #homeMain .slogan {
    font-size: 5.2vw;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.6153846154em;
  }
  #homeMain .slogan .circles {
    margin-left: 0;
    margin-top: 0.5em;
  }
  #homeMain .slogan .circles .c {
    width: 1.0769230769em;
    height: 1.0769230769em;
    margin-right: -0.5384615385em;
  }
  #homeMain .slogan .circles .c .o {
    width: 1.0769230769em;
    height: 1.0769230769em;
    border-radius: 1.0769230769em;
  }
  #homeMain .since p span {
    font-size: 10.8vw;
  }
}
.home-section-project {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.home-section-project video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  display: none;
}
.home-section-project.active video {
  display: block;
}
.home-section-project .__prev,
.home-section-project .__next {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 25vh;
}
.home-section-project .__prev {
  top: 0;
}
.home-section-project .__next {
  bottom: 0;
}
.home-section-project .project-desc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  display: block;
}
.home-section-project .project-desc:after {
  position: absolute;
  top: -1vw;
  left: -1vw;
  right: -1vw;
  bottom: -5vw;
  content: "";
}
.home-section-project .project-desc .project-title {
  font-size: 96px;
  font-size: max(5rem, 5vw);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 1000px) {
  .home-section-project .project-desc .project-title {
    font-size: max(3rem, 8vw);
  }
}
@media screen and (max-width: 500px) {
  .home-section-project .project-desc .project-title {
    font-size: 9.6vw;
  }
}
.home-section-project .project-desc .project-title > span {
  position: relative;
  display: inline-block;
}
.home-section-project .project-desc .project-title .sentence {
  display: inline-block;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}
.home-section-project .project-desc .project-title .sentence > div,
.home-section-project .project-desc .project-title .sentence > span {
  margin: 0 0.2em;
  display: block;
}
.home-section-project .project-desc .project-title .sentence.filled {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-fill-color: #fff;
  clip-path: circle(0vw at 50% 50%);
}
.home-section-project .project-desc .project-title .sentence div {
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
.home-section-project .project-desc .btn-show {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 0.6666666667em;
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-size: max(1.75rem, 1.6vw);
}
@media screen and (max-width: 1000px) {
  .home-section-project .project-desc .btn-show {
    font-size: max(1.5rem, 2.8vw);
  }
}
@media screen and (max-width: 500px) {
  .home-section-project .project-desc .btn-show {
    font-size: 4.8vw;
  }
}
.home-section-project .project-desc .btn-show span {
  padding-bottom: 0.375em;
  display: block;
  position: relative;
  transform: translateY(100%);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-section-project .project-desc .btn-show:after {
  border-top: 1px solid #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  bottom: 0;
  width: 0%;
  transition: width 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.home-section-project .project-desc.active .btn-show span {
  transform: translateY(0);
  transition-delay: 300ms;
}
.home-section-project .project-desc.active .btn-show:after {
  width: 100%;
}

#homeContact .__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
#homeContact .__canvas canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
#homeContact .__link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: max(1.125rem, 1.25vw);
  display: block;
  padding: 1em 2em;
  margin: 0;
  line-height: 1;
  opacity: 0;
}

.home-popup {
  left: 0;
  bottom: 0;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: opacity 300ms, visibility 300ms, z-index 300ms;
  will-change: opacity, visibility, z-index;
}
.home-popup.active {
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}
.home-popup .container {
  padding: 56px max(4.375rem, 3.65vw);
  padding-bottom: 56px;
}
@media screen and (max-width: 1440px) {
  .home-popup .container {
    padding: 56px max(4.375rem, 3.65vw);
    padding-bottom: 56px;
  }
}
@media screen and (max-width: 1257px) {
  .home-popup .container {
    padding: max(2.5rem, 5.6vw) max(2.5rem, 5.6vw);
    padding-bottom: 56px;
  }
}
@media screen and (max-width: 1000px) {
  .home-popup .container {
    padding-bottom: 42px;
  }
}
@media screen and (max-width: 500px) {
  .home-popup .container {
    padding: 8vw 8vw;
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 454px) {
  .home-popup .container {
    padding-bottom: 30px;
  }
}
.home-popup .__popup {
  width: min(22.5rem, 84vw);
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.home-popup .__popup .__body a {
  display: block;
}
.home-popup .__popup .__body a img {
  display: block;
  width: 100%;
}
.home-popup .__popup .__footer {
  height: 4.25em;
  display: flex;
  align-items: center;
  color: #fff;
  backdrop-filter: blur(30px);
}
.home-popup .__popup .__footer .__title {
  margin-left: 1.5em;
  font-size: 1rem;
  margin-right: 1.5em;
}
.home-popup .__popup .__footer .__close {
  margin-left: auto;
  text-indent: -999em;
  overflow: hidden;
  width: 2em;
  height: 2em;
  position: relative;
  display: block;
  margin-right: 1em;
}
.home-popup .__popup .__footer .__close:before, .home-popup .__popup .__footer .__close:after {
  position: absolute;
  content: "";
  border-top: 1px solid #fff;
  width: 1em;
  top: 50%;
  left: 50%;
}
.home-popup .__popup .__footer .__close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.home-popup .__popup .__footer .__close:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.page-header {
  padding-top: max(14rem, 30vh);
  margin-bottom: max(6rem, 11.11vh);
  position: relative;
  z-index: 2;
}
.page-header .page-title {
  margin-bottom: 0.48em;
}

.does-category .does-category-header {
  margin-bottom: 1.3333333333em;
}
.does-category .does-category-header .does-category-title {
  display: flex;
}
.does-category .does-category-header .does-category-title .btn-toggle {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #ae3bff;
  margin-right: 0.345em;
  position: relative;
}
.does-category .does-category-header .does-category-title .btn-toggle i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.4166666667em;
  height: 0.0833333333em;
  background: #fff;
}
.does-category .does-category-header .does-category-title .title {
  display: flex;
  letter-spacing: -0.03em;
}
.does-category .does-category-header .does-category-title .title small {
  font-size: 0.5em;
  display: block;
  margin-left: 0.25em;
}
.does-category .does-category-body .list {
  display: inline-flex;
  max-width: 75%;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .does-category .does-category-body .list {
    max-width: 100%;
  }
}
.does-category .does-category-body .list li {
  margin-right: 0.4em;
  margin-bottom: 0.6em;
}
.does-category .does-category-body .list li:last-child {
  margin-right: 0 !important;
}
.does-category .does-category-body .list a {
  display: block;
  padding: 0.75em 1.2em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3em;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.does-category .does-category-body .list a .__total-count {
  font-size: 0.65em;
  display: none;
  transform: translateY(-0.5em);
}
.does-category .does-category-body .list a .btn-capsule-ripple span {
  background-color: #ae3bff;
  background-color: #793cf9;
}
.does-category .does-category-body .list a .btn-capsule-title span:after {
  color: #fff;
}
.does-category .does-category-body .list a.active {
  background-color: #ae3bff;
  background-color: #793cf9;
  color: #fff;
}
.does-category .does-category-body .list a.active .__total-count {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .does-category .does-category-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .does-category .does-category-body .container {
    display: inline-flex;
  }
  .does-category .does-category-body .list {
    flex-wrap: nowrap;
    width: auto;
  }
  .does-category .does-category-body .list li {
    flex: 0 0 auto;
    margin-bottom: 0;
    display: inline-block;
  }
}

.blog-post {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.7);
}
.blog-post .btn-close {
  position: absolute;
  right: 1.1666666667em;
  top: 1.1666666667em;
  color: #fff;
  text-indent: -999em;
  overflow: hidden;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 2.25rem;
}
.blog-post .btn-close:before, .blog-post .btn-close:after {
  width: 1.3888888889em;
  height: 1.5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  background-color: var(--post-txt-color, #fff);
}
.blog-post .btn-close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.blog-post .btn-close:after {
  transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (max-width: 500px) {
  .blog-post .btn-close {
    font-size: 28px;
    right: 1.0714285714em;
    top: 1.0714285714em;
  }
}
.blog-post .blog-post-inner {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 12vw;
}
.blog-post .blog-post-header {
  box-sizing: content-box;
  padding: 80px max(2.25rem, 2.5vw) max(2.25rem, 2.5vw);
  display: flex;
  width: 30%;
  background: var(--bg-color);
  color: var(--txt-color);
}
.blog-post .blog-post-header .blog-post-header-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-post .blog-post-header .post-category {
  margin-bottom: max(1.5rem, 1.6667vw);
}
.blog-post .blog-post-header .post-category span {
  display: flex;
  align-items: center;
  letter-spacing: -0.03em;
}
.blog-post .blog-post-header .post-category span:before {
  width: 1em;
  height: 1em;
  background-color: var(--txt-color);
  content: "";
  border-radius: 50%;
  margin-right: 0.25em;
}
.blog-post .blog-post-header .post-title {
  padding-right: 15%;
  flex: 1;
  letter-spacing: -0.03em;
  line-height: 1.3333333333em;
}
.blog-post .blog-post-header .blog-post-meta {
  display: flex;
  align-items: center;
}
.blog-post .blog-post-header .btn-capsule {
  height: 3.7777777778em;
  border-radius: 2.2222222222em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.2222222222em;
  border: solid 1px var(--txt-color);
  color: var(--txt-color);
  box-sizing: border-box;
}
.blog-post .blog-post-header .btn-capsule + .btn-capsule {
  margin-left: max(1rem, 0.9375vw);
}
@media screen and (max-width: 1000px) {
  .blog-post .blog-post-header .btn-capsule + .btn-capsule {
    margin-left: max(0.9375rem, 1.6vw);
  }
}
.blog-post .blog-post-header .btn-capsule span {
  display: block;
  line-height: 2;
}
.blog-post .blog-post-header .btn-capsule span:after {
  color: var(--bg-color);
}
.blog-post .blog-post-header .btn-capsule .btn-capsule-ripple span {
  background: var(--txt-color);
}
.blog-post .blog-post-header .post-date {
  margin-left: auto;
}
.blog-post .blog-post-body {
  background-color: var(--post-bg-color, #000);
  width: 70%;
  position: relative;
}
.blog-post .blog-post-body .blog-post-body-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  scroll-behavior: smooth;
}
.blog-post .blog-post-body .featured-img,
.blog-post .blog-post-body .featured-video {
  position: relative;
}
.blog-post .blog-post-body .featured-img .__inner,
.blog-post .blog-post-body .featured-video .__inner {
  position: relative;
  padding-top: 56.25%;
}
@media screen and (max-width: 500px) {
  .blog-post .blog-post-body .featured-img .__inner,
.blog-post .blog-post-body .featured-video .__inner {
    padding-top: 75%;
  }
}
.blog-post .blog-post-body .featured-img video,
.blog-post .blog-post-body .featured-img img,
.blog-post .blog-post-body .featured-video video,
.blog-post .blog-post-body .featured-video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-post .blog-post-body .featured-img .badges,
.blog-post .blog-post-body .featured-video .badges {
  position: absolute;
  left: max(min(1.5rem, 2.4vw), 16px);
  bottom: max(min(1.5rem, 2.4vw), 16px);
  display: flex;
  gap: max(min(0.5rem, 0.8vw), 7.2px);
}
.blog-post .blog-post-body .featured-img .badges img,
.blog-post .blog-post-body .featured-video .badges img {
  display: block;
  width: max(min(2.5rem, 4vw), 36px) !important;
  position: static !important;
}
.blog-post .blog-post-body .post-content-inner {
  padding: calc(5vw + 48px) 8vw 0;
}
.blog-post .blog-post-body .post-content {
  color: #fff;
  color: var(--post-txt-color, #fff);
}
.blog-post .blog-post-body .post-footer {
  padding: calc(1.56vw + 34px) 0;
  display: flex;
  align-items: center;
}
.blog-post .blog-post-body .post-footer .post-nav {
  display: flex;
  margin-left: auto;
}
.blog-post .blog-post-body .post-footer .post-nav > div + div {
  margin-left: 2em;
}
.blog-post .blog-post-body .post-footer .post-nav > div a {
  position: absolute;
  top: 0;
  left: 0;
}
.blog-post .blog-post-body .post-footer .post-nav .__guide {
  display: block;
  opacity: 0.4;
}
.blog-post .blog-post-body .post-footer .post-nav > div,
.blog-post .blog-post-body .post-footer .post-nav a {
  display: block;
  color: #fff;
  font-size: 1.75rem;
  width: 1em;
  height: 1em;
  position: relative;
  z-index: 2;
}
.blog-post .blog-post-body .post-footer .post-nav > div svg,
.blog-post .blog-post-body .post-footer .post-nav a svg {
  display: block;
  width: 1em;
  height: 1em;
}
.blog-post .blog-post-body .post-footer .post-nav > div svg g,
.blog-post .blog-post-body .post-footer .post-nav a svg g {
  stroke: var(--post-txt-color, #fff);
}
.blog-post .blog-post-body .post-footer .post-nav .__next svg {
  transform: rotate(180deg);
}
.blog-post .blog-post-body .post-footer .post-nav .__next a svg {
  transform: rotate(180deg);
}
.blog-post .blog-post-body .post-footer .post-nav div:after {
  opacity: 0.4;
}
.blog-post .blog-post-body .post-footer .post-nav a {
  text-indent: -999em;
  overflow: hidden;
}

@media screen and (max-width: 1000px) {
  .blog-post .blog-post-inner {
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .blog-post .blog-post-header {
    padding: 80px 8vw 8vw;
    height: 70vh;
    width: 100%;
    box-sizing: border-box;
    transform: translateX(0) !important;
  }
  .blog-post .blog-post-body {
    width: 100%;
    box-sizing: border-box;
  }
  .blog-post .blog-post-body .blog-post-body-inner {
    position: static;
  }
}
.projects-wrapper {
  will-change: background-color;
}

.list-type-selector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
  will-change: opacity, visibility;
  position: fixed;
  border-radius: 32px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  bottom: 24px;
  padding: 4px;
  display: flex;
  align-items: center;
  z-index: 10;
}
.list-type-selector.active {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 1000px) {
  .list-type-selector {
    bottom: 22px;
  }
}
@media screen and (max-width: 500px) {
  .list-type-selector {
    bottom: 20px;
  }
}
.list-type-selector .__c,
.list-type-selector a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  width: 66px;
  height: 46px;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .list-type-selector .__c,
.list-type-selector a {
    width: 63px;
    height: 45px;
  }
}
@media screen and (max-width: 500px) {
  .list-type-selector .__c,
.list-type-selector a {
    width: 58px;
    height: 42px;
  }
}
.list-type-selector .__c svg,
.list-type-selector a svg {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0.3;
  transition: opacity 400ms ease;
  will-change: opacity;
}
@media screen and (max-width: 1000px) {
  .list-type-selector .__c svg,
.list-type-selector a svg {
    width: 19px;
    height: 19px;
  }
}
@media screen and (max-width: 500px) {
  .list-type-selector .__c svg,
.list-type-selector a svg {
    width: 18px;
    height: 18px;
  }
}
.list-type-selector .__c svg path,
.list-type-selector a svg path {
  fill: #000;
  transition: fill 400ms ease;
  will-change: fill;
}
.list-type-selector a.active svg,
.list-type-selector a[data-status=in] svg {
  opacity: 1;
}
.list-type-selector a.active svg path,
.list-type-selector a[data-status=in] svg path {
  fill: #fff;
}
.list-type-selector a[data-status=out] svg {
  opacity: 0.3 !important;
}
.list-type-selector a[data-status=out] svg path {
  fill: #000 !important;
}
.list-type-selector .__c {
  content: "";
  position: absolute;
  background-color: #793cf9;
}

.project-list {
  position: relative;
}
.project-list .previous-projects {
  margin-bottom: calc(2.7vw + 44px);
  position: relative;
}
.project-list .previous-projects .__tb {
  display: none;
}
@media (hover: hover) {
  .project-list .previous-projects .__tb {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .project-list .previous-projects .__tb .__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .project-list .previous-projects .__tb .__inner .__img {
    display: block;
    background: 50% 50% no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }
  .project-list .previous-projects .__tb .__inner .__img img {
    max-width: 22.8vw;
    max-height: 22.8vw;
    width: auto;
    height: auto;
    position: relative;
  }
}
.project-list .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9em;
  padding: 0 1em;
  height: 3.8333333333em;
  position: relative;
  transition: background-color 800ms, color 800ms, border 800ms;
}
.project-list .btn-more:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 1px #000;
  opacity: 0.15;
  content: "";
  border-radius: 3.8333333333em;
}
.project-list .btn--centered {
  display: flex;
  justify-content: center;
}
.project-list .previous-project-item {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-bottom: -1px;
  transition: background-color 400ms, color 400ms;
  position: relative;
  display: none;
}
.project-list .previous-project-item.visible {
  display: block;
}
.project-list .previous-project-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  height: 0;
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.project-list .previous-project-item .item-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.6666666667em 0;
  transition: color 400ms;
}
@media (hover: hover) {
  .project-list .previous-project-item:hover {
    transform: none !important;
  }
  .project-list .previous-project-item:hover:before {
    height: 100%;
  }
  .project-list .previous-project-item:hover .item-inner {
    z-index: 9;
    color: #fff;
  }
  .project-list .previous-project-item:hover .item-inner .__year {
    transform: translateX(2.3333333333em);
  }
  .project-list .previous-project-item:hover .item-inner .__link {
    transform: translateX(-2.3333333333em);
    background-image: url(../img/icon/link-w.svg);
  }
}
.project-list .previous-project-item .__year,
.project-list .previous-project-item .__link {
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.project-list .previous-project-item .__year {
  width: 10%;
}
.project-list .previous-project-item .__title {
  width: 35%;
  margin: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-list .previous-project-item .__category {
  flex: 1;
}
.project-list .previous-project-item .__link {
  background: url(../img/icon/link.svg) 50% 50% no-repeat;
  background-size: 100% 100%;
  width: 1.1666666667em;
  height: 1.1666666667em;
  display: block;
  margin: 0 0.6666666667em;
}
@media screen and (max-width: 500px) {
  .project-list .previous-project-item .item-inner {
    display: block;
  }
  .project-list .previous-project-item .__link {
    position: absolute;
    top: 1.6666666667em;
    right: 0;
    margin: 0;
    width: 20px;
    height: 20px;
  }
  .project-list .previous-project-item .__year,
.project-list .previous-project-item .__title {
    width: calc(100% - 30px);
    display: block;
    vertical-align: top;
    margin: 0;
  }
  .project-list .previous-project-item .__year {
    margin-bottom: 0.5em;
  }
  .project-list .previous-project-item .__title {
    margin-bottom: 1.2em;
  }
  .project-list .previous-project-item .__title small {
    display: block;
    margin-top: 0.8em;
  }
  .project-list .previous-project-item .__category {
    width: auto;
    margin: 0;
  }
}

.projects-wrapper .project-list[data-list-type=video] {
  padding-top: 30vh;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] {
    padding-top: 20vh;
    padding-bottom: 10vh;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item {
  padding: 20vh 0;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .container {
    padding: 0;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .project-content-wrapper {
  position: relative;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item.active .project-list-item-content {
  visibility: visible;
  opacity: 1;
  z-index: auto;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .project-list-item-content {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .project-list-item-content:before {
  content: "";
  position: absolute;
  top: -15%;
  left: -10%;
  right: -10%;
  bottom: -15%;
  background-color: rgba(0, 0, 0, 0);
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area {
  width: 100%;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  will-change: clip-path, -webkit-clip-path;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area video {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -1 !important;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area {
    width: 100%;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb {
  display: block;
  overflow: hidden;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 56.25%;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video img,
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video video {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 50% 100%;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video img.active,
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video video.active {
  opacity: 1;
  visibility: visible;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video.mobile {
  display: none;
}
@media screen and (max-width: 500px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video {
    padding-top: 75%;
  }
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video.desktop {
    display: none;
  }
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .tb .video.mobile {
    display: block;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .mask {
  display: block;
  position: absolute;
  height: 70%;
  width: 70%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, top, left;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .tb-area .mask {
    width: 100%;
    height: 100%;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area {
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  will-change: transform;
  pointer-events: none;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .__inner {
  position: relative;
  width: 90vw;
  will-change: transform;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area {
    transform: none;
    top: 100%;
    left: 8vw !important;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .sentence {
  display: block;
  overflow: hidden;
  will-change: transform;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .project-title {
  line-height: 1.4;
  margin-top: -1em;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .project-title .sentence span {
  display: block;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .project-title .sentence span.lined {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--project-header-color);
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .project-title {
    margin-top: -0.8em;
    font-size: max(2.813rem, 6.4vw);
  }
}
@media screen and (max-width: 500px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .project-title {
    font-size: 9vw;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 1.2em;
  margin-left: 0.115em;
  will-change: transform;
}
@media screen and (max-width: 500px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list {
    margin-left: 0.075em;
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list p {
  font-size: max(1.25rem, 1.15vw);
  line-height: 1.25;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  will-change: transform;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list p span {
  color: inherit;
  display: block;
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list p .split {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 0.4em;
}
@media screen and (max-width: 1000px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list p {
    font-size: max(1.125rem, 2vw);
  }
}
@media screen and (max-width: 500px) {
  .projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area .cat-list p {
    font-size: max(0.9375rem, 3.6vw);
  }
}
.projects-wrapper .project-list[data-list-type=video] .project-list-item .title-area.over .project-title {
  opacity: 0;
}

.projects-wrapper .project-list[data-list-type=table] {
  position: relative;
  padding-bottom: 30vh;
}
.projects-wrapper .project-list[data-list-type=table] .table-type {
  margin-top: max(6rem, 11.1vh);
  margin-bottom: calc(2.7vw + 44px);
  position: relative;
}
.projects-wrapper .project-list[data-list-type=table] .table-type .__tb {
  display: none;
}
@media (hover: hover) {
  .projects-wrapper .project-list[data-list-type=table] .table-type .__tb {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .projects-wrapper .project-list[data-list-type=table] .table-type .__tb .__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .projects-wrapper .project-list[data-list-type=table] .table-type .__tb .__inner .__img {
    display: block;
    background: 50% 50% no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }
  .projects-wrapper .project-list[data-list-type=table] .table-type .__tb .__inner .__img img {
    max-width: 22.8vw;
    max-height: 22.8vw;
    width: auto;
    height: auto;
    position: relative;
  }
}
.projects-wrapper .project-list[data-list-type=table] .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9em;
  padding: 0 1em;
  height: 3.8333333333em;
  position: relative;
  transition: background-color 800ms, color 800ms, border 800ms;
}
.projects-wrapper .project-list[data-list-type=table] .btn-more:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 1px #000;
  opacity: 0.15;
  content: "";
  border-radius: 3.8333333333em;
}
.projects-wrapper .project-list[data-list-type=table] .btn--centered {
  display: flex;
  justify-content: center;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-bottom: -1px;
  transition: background-color 400ms, color 400ms;
  position: relative;
  display: none;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item.visible {
  display: block;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  height: 0;
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.6666666667em 0;
  transition: color 400ms;
}
@media (hover: hover) {
  .projects-wrapper .project-list[data-list-type=table] .project-list-item:hover {
    transform: none !important;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item:hover:before {
    height: 100%;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner {
    z-index: 9;
    color: #fff;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__year {
    transform: translateX(2.3333333333em);
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__link {
    transform: translateX(-2.3333333333em);
    background-image: url(../img/icon/link-w.svg);
  }
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__year,
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__link {
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__year {
  width: 10%;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__title {
  width: 35%;
  margin: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__category {
  flex: 1;
}
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__link {
  background: url(../img/icon/link.svg) 50% 50% no-repeat;
  background-size: 100% 100%;
  width: 1.1666666667em;
  height: 1.1666666667em;
  display: block;
  margin: 0 0.6666666667em;
}
@media screen and (max-width: 500px) {
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
    display: block;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__link {
    position: absolute;
    top: 1.6666666667em;
    right: 0;
    margin: 0;
    width: 20px;
    height: 20px;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__year,
.projects-wrapper .project-list[data-list-type=table] .project-list-item .__title {
    width: calc(100% - 30px);
    display: block;
    vertical-align: top;
    margin: 0;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__year {
    margin-bottom: 0.5em;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__title {
    margin-bottom: 1.2em;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__title small {
    display: block;
    margin-top: 0.8em;
  }
  .projects-wrapper .project-list[data-list-type=table] .project-list-item .__category {
    width: auto;
    margin: 0;
  }
}

.project-post {
  transition: background-color 800ms;
  --project-color: #fff;
  --project-bgcolor: #000;
  color: var(--project-color);
  background-color: var(--project-bgcolor);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}
.project-post.loaded {
  position: relative;
  bottom: auto;
  height: auto;
  min-height: 100vh;
}
.project-post.loaded .loading {
  display: none;
}
.project-post .project-post-header hr {
  background: var(--project-color);
}

body[data-prev-namespace] .project-post .project-post-inner {
  opacity: 0;
}

body[data-prev-namespace=single-project] .project-post .project-post-inner {
  opacity: 1;
}

.project-post-header {
  padding-top: max(14rem, 16.875vw);
  padding-bottom: max(3rem, 10vw);
  text-align: center;
  transition: background-color 800ms, color 800ms, border 800ms;
  min-height: 100vh;
}
@media screen and (max-width: 1000px) {
  .project-post-header {
    padding-top: max(12rem, 22.4vw);
  }
}
@media screen and (max-width: 500px) {
  .project-post-header {
    padding-top: max(9rem, 38.4vw);
  }
}
.project-post-header .post-categories {
  margin-bottom: 1em;
  color: var(--project-title-color, #fff);
}
.project-post-header .post-categories .cat-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.project-post-header .post-categories .cat-list span {
  color: inherit;
  display: block;
}
.project-post-header .post-categories .cat-list .split {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--project-color, #fff);
  margin: 0 0.4em;
}
.project-post-header .post-title {
  margin-bottom: 1em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.25em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--project-title-color, #fff);
}
.project-post-header .post-title .sentence {
  display: block;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
}
.project-post-header .post-title .sentence span {
  display: block;
  padding: 0 0.15em;
}
.project-post-header .post-title .sentence span.filled {
  position: absolute;
  top: 0;
  left: 0;
}
.project-post-header .post-title .sentence span.lined {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--project-title-color, #fff);
  -webkit-text-fill-color: transparent;
}
.project-post-header .post-title .sentence[data-type=line] .filled {
  opacity: 0;
}
.project-post-header .post-title .sentence[data-type=solid] .filled {
  opacity: 1;
}
@media screen and (max-width: 500px) {
  .project-post-header .post-title {
    flex-direction: column;
    align-items: center;
  }
}
.project-post-header .loading {
  position: relative;
  margin-top: 20vh;
  text-align: center;
  white-space: nowrap;
  z-index: 999;
  font-size: 1.25rem;
  letter-spacing: 0.25em;
}
.project-post-header .loading svg {
  display: block;
  margin: 1rem auto;
  width: 100px;
  height: 100px;
}
.project-post-header .loading .loader,
.project-post-header .loading .loader:before,
.project-post-header .loading .loader:after {
  border-radius: 50%;
}
.project-post-header .loading .loader {
  color: #ffffff;
  font-size: 0.5rem;
  text-indent: -99999em;
  margin: 1rem auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.project-post-header .loading .loader:before,
.project-post-header .loading .loader:after {
  position: absolute;
  content: "";
}
.project-post-header .loading .loader:before {
  width: 5.2em;
  height: 10.2em;
  background: var(--project-bgcolor);
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.project-post-header .loading .loader:after {
  width: 5.2em;
  height: 10.2em;
  background: var(--project-bgcolor);
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.project-post-header .featured-video {
  margin-bottom: max(4rem, 12.5vw);
  opacity: 0;
  overflow: hidden;
}
.project-post-header .featured-video video {
  display: block;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 500px) {
  .project-post-header .featured-video video {
    height: 75vw;
  }
}
.project-post-header .post-meta {
  margin: 0 auto;
  font-size: 0.9375rem;
}
@media screen and (max-width: 500px) {
  .project-post-header .post-meta {
    font-size: 0.8125rem;
  }
}
.project-post-header .post-meta .row {
  display: flex;
  text-align: left;
}
.project-post-header .post-meta .row .col {
  box-sizing: border-box;
  flex: 1;
}
.project-post-header .post-meta .row .col-left {
  margin-right: 5%;
}
.project-post-header .post-meta .row .col-right {
  width: 50%;
  margin-left: auto;
}
@media screen and (max-width: 1000px) {
  .project-post-header .post-meta .row {
    display: block;
  }
  .project-post-header .post-meta .row .col {
    width: 100%;
    margin: 0;
  }
  .project-post-header .post-meta .row .col.col-left {
    margin-bottom: max(3.5rem, 11.2vw);
  }
}
.project-post-header .sub-title {
  line-height: 1.5em;
  letter-spacing: -0.03em;
  margin-bottom: 0.65em;
  font-weight: 600;
}
.project-post-header .btn-link {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.8333333333em;
  padding: 0 1em;
  height: 3.8333333333em;
  position: relative;
  color: var(--project-color);
  transition: background-color 800ms, color 800ms, border 800ms;
}
.project-post-header .btn-link:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 1px var(--project-color);
  opacity: 0.15;
  content: "";
  border-radius: 3.8333333333em;
}
.project-post-header .post-excerpt {
  padding-top: 0.75em;
  margin-bottom: 4em;
}
@media screen and (max-width: 500px) {
  .project-post-header .post-excerpt {
    margin-bottom: 3em;
  }
}
.project-post-header .post-excerpt:last-child {
  margin-bottom: 0 !important;
}
.project-post-header .post-excerpt h3 {
  font-weight: 700;
  font-family: "Averta", "YoonGothic", sans-serif;
}
.project-post-header .post-excerpt hr {
  opacity: 0.3;
  border: 0;
  height: 1px;
  transition: background-color 800ms, color 800ms, border 800ms;
  margin: 1.25em 0;
}
.project-post-header .post-excerpt p {
  font-weight: 300;
  line-height: 1.875em;
}
.project-post-header .project-metas {
  margin-bottom: 2.8666666667em;
}
.project-post-header .project-metas .project-meta + .project-meta {
  margin-top: 0.4em;
}
.project-post-header .project-meta {
  line-height: 1.6666666667em;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
}
.project-post-header .project-meta.__service {
  padding-right: 10%;
}
.project-post-header .project-meta.__service dl {
  flex-direction: column;
}
.project-post-header .project-meta dl {
  display: flex;
  font-family: "Averta", "YoonGothic", sans-serif;
  margin-right: 2em;
  margin-bottom: 0.5em;
}
.project-post-header .project-meta dl:last-child {
  margin-right: 0;
}
.project-post-header .project-meta dl dt {
  margin-right: 0.6em;
  opacity: 0.4;
}
@media screen and (max-width: 500px) {
  .project-post-header .project-meta {
    display: block;
  }
  .project-post-header .project-meta dl {
    margin-right: 0;
    margin-bottom: 0.4em;
  }
  .project-post-header .project-meta dl:last-child {
    margin-bottom: 0;
  }
}

.project-post-body {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.project-post-body.show {
  opacity: 1;
  visibility: visible;
  z-index: auto;
}

.project-post-footer {
  padding: max(4rem, 12.5vw) 0 56px 0;
}

body.single-project {
  padding-bottom: 0 !important;
}
body.single-project .locoscroll-inner {
  padding-bottom: 0 !important;
}
body.single-project #header .header-main {
  transform: translateY(0) !important;
}
body.single-project #footer {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

.elementor-video {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.elementor-video.active {
  opacity: 1;
  visibility: visible;
  z-index: auto;
}

.btn-back-to-list {
  position: relative;
  display: inline-flex;
}

.next-project-section {
  overflow: hidden;
  position: relative;
  display: none;
}
.next-project-section.show {
  display: block;
}
.next-project-section.active {
  overflow: visible;
}
.next-project-section.active:before {
  top: -5px;
}
.next-project-section:before {
  background-color: var(--bg-color);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transition: top 400ms;
}
.next-project-section .loading {
  display: none;
}
.next-project-section.next-project-section--prev .loading {
  display: block;
}
.next-project-section .project-post-header {
  padding: max(14rem, 16.875vw) 0 !important;
  display: block;
  color: #fff;
  min-height: 1px;
}
@media screen and (max-width: 1000px) {
  .next-project-section .project-post-header {
    padding: max(12rem, 22.4vw) 0 !important;
  }
}
@media screen and (max-width: 500px) {
  .next-project-section .project-post-header {
    padding: max(9rem, 38.4vw) 0 !important;
  }
}
.next-project-section .project-post-header .post-title {
  margin-bottom: 0 !important;
}
.next-project-section .project-post-header .post-title .sentence:first-child .filled {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: clip-path 500ms ease;
}
.next-project-section .project-post-header .post-title .sentence:nth-child(n+2) {
  width: 0;
  clip-path: polygon(0% 0%, 10000% 0%, 10000% 100%, 0% 100%);
}
.next-project-section .project-post-header .post-categories {
  position: relative;
}
.next-project-section .project-post-header .post-categories .msg-next {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.next-project-section .project-post-header .post-categories .cat-list {
  opacity: 0;
}
@media (hover: hover) {
  .next-project-section .project-post-header:hover .post-title .sentence:first-child .filled {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.next-project-section .project-post-header.active .post-title .sentence:first-child .filled {
  clip-path: none !important;
}

.projects-v2-wrapper[data-theme=dark] .project-list-item .desc-area {
  color: #000 !important;
}
.projects-v2-wrapper[data-theme=light] .page-title {
  color: #fff !important;
}
.projects-v2-wrapper[data-theme=light] .does-category .does-category-body .list a {
  border-color: rgba(255, 255, 255, 0.2);
}
.projects-v2-wrapper[data-theme=light] .btn-capsule-title {
  color: #fff !important;
}
.projects-v2-wrapper .page-header {
  margin-bottom: 0;
}
.projects-v2-wrapper .project-list[data-list-type=grid] {
  padding-top: max(7.5rem, 18.5vmin);
  padding-bottom: max(9rem, 22.2vmin);
  padding-left: max(4.375rem, 3.65vw);
  padding-right: max(4.375rem, 3.65vw);
  position: relative;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=grid] {
    padding: 0;
    padding-top: max(7.5rem, 18.5vmin);
    padding-bottom: max(9em, 22.2vmin);
  }
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list--inner {
  position: relative;
  display: flex;
  flex-direction: column;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item {
  position: relative;
  box-sizing: border-box;
  visibility: hidden;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:last-child {
  margin-bottom: 0 !important;
}
@media screen and (min-width: 1001px) {
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+1) {
    width: 65%;
    font-size: calc(65vw * .95);
    align-self: flex-end;
    margin-bottom: 22.2vh;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(12n+7) {
    align-self: flex-start;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+2) {
    width: 50%;
    font-size: calc(50vw * .95);
    align-self: flex-start;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(12n+8) {
    align-self: flex-end;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+3) {
    width: 40%;
    font-size: calc(40vw * .95);
    align-self: flex-end;
    margin-bottom: 22.2vh;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(12n+9) {
    align-self: flex-start;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+4) {
    width: 50%;
    font-size: calc(50vw * .95);
    align-self: center;
    margin-bottom: 22.2vh;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+5) {
    width: 40%;
    font-size: calc(40vw * .95);
    align-self: flex-start;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(12n+11) {
    align-self: flex-end;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+6) {
    width: 40%;
    font-size: calc(40vw * .95);
    align-self: flex-end;
    margin-bottom: 22.2vh;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(12n+12) {
    align-self: flex-start;
  }
}
@media screen and (min-width: 1001px) and (hover: hover) {
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item {
    -webkit-perspective: 2400px;
    perspective: 2400px;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner {
    -webkit-perspective: 2400px;
    perspective: 2400px;
    position: relative;
    transform: none;
    will-change: transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner .tb-area,
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner .desc-area {
    transition: 320ms transform ease, 320ms color ease;
    will-change: transform, color;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner:hover .tb-area,
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner:hover .desc-area {
    transform: translate3d(0, 0, 0);
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner:hover .tb-area {
    transform: translate3d(0, 0, 0.0725em);
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .__item-inner:hover .desc-area {
    transform: translate3d(0.02em, -0.0125em, 0.1125em);
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+3) .__item-inner:hover .tb-area, .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+5) .__item-inner:hover .tb-area, .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+6) .__item-inner:hover .tb-area {
    transform: translate3d(0, 0, 0.135em);
  }
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+3) .__item-inner:hover .desc-area, .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+5) .__item-inner:hover .desc-area, .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item:nth-child(6n+6) .__item-inner:hover .desc-area {
    transform: translate3d(0.02em, -0.0125em, 0.1725em);
  }
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item {
    margin-bottom: 34vh;
  }
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .project-content-wrapper {
  position: relative;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item.active {
  visibility: visible;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a {
  display: block;
  position: relative;
  padding-top: 62.5%;
  overflow: hidden;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a .__img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a .__img img,
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a .__img video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a .__img img {
  height: auto;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .tb-area a .__img:after {
  content: "";
  opacity: 0.1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
  position: absolute;
  left: 0;
  right: 0;
  height: 25%;
  z-index: 3;
  bottom: 0;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .awards {
  position: absolute;
  right: max(min(1rem, 1.6vw), 14.4px);
  top: max(min(1rem, 1.6vw), 14.4px);
  display: flex;
  gap: max(min(0.5rem, 0.8vw), 7.2px);
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .awards img {
  display: block;
  width: max(min(2.5rem, 4vw), 36px) !important;
  position: static !important;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .desc-area {
  padding-left: 1.6667vw;
  position: relative;
  color: #fff;
  z-index: 3;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .desc-area {
    padding: 0 8vw;
  }
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .desc-area .project-title {
  font-size: 0.045em;
  line-height: 1.4;
  margin-top: -0.7em;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .desc-area .project-title {
    font-size: min(3rem, 5.6vw);
  }
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .desc-area .cat-list {
  margin-top: 0.9em;
}
.projects-v2-wrapper .project-list[data-list-type=grid] .project-list-item .sentence {
  display: block;
  overflow: hidden;
}
@media screen and (hover: hover) {
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="2"] .project-list-item .__item-inner:hover .tb-area {
    transform: translate3d(0, 0, -0.06625em) !important;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="2"] .project-list-item .__item-inner:hover .desc-area {
    transform: translate3d(0.0525em, -0.04125em, 0.05625em) !important;
  }
}
.projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="3"] .project-list-item {
  -webkit-perspective: none;
  perspective: none;
}
@media screen and (hover: hover) {
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="3"] .project-list-item {
    -webkit-perspective: none;
    perspective: none;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="3"] .project-list-item .__item-inner {
    transform: none !important;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="3"] .project-list-item .__item-inner:hover .tb-area {
    transform: none !important;
  }
  .projects-v2-wrapper .project-list[data-list-type=grid][data-grid-type="3"] .project-list-item .__item-inner:hover .desc-area {
    transform: none !important;
  }
}

.projects-v2-wrapper .project-list[data-list-type=table] {
  position: relative;
  padding-bottom: max(9em, 22.2vmin);
}
.projects-v2-wrapper .project-list[data-list-type=table] .table-type {
  margin-top: max(6rem, 11.1vh);
  margin-bottom: calc(2.7vw + 44px);
  position: relative;
}
.projects-v2-wrapper .project-list[data-list-type=table] .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9em;
  padding: 0 1em;
  height: 3.8333333333em;
  position: relative;
  transition: background-color 800ms, color 800ms, border 800ms;
}
.projects-v2-wrapper .project-list[data-list-type=table] .btn-more:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 1px #000;
  opacity: 0.15;
  content: "";
  border-radius: 3.8333333333em;
}
.projects-v2-wrapper .project-list[data-list-type=table] .btn--centered {
  display: flex;
  justify-content: center;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-bottom: -1px;
  transition: background-color 400ms, color 400ms;
  position: relative;
  display: none;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item.visible {
  display: block;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: -1px;
  height: 0;
  background: var(--project-color, #000);
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.6363636364em 0;
  transition: color 400ms;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
    padding: 1.3636363636em 0;
  }
}
@media screen and (max-width: 500px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
    padding: 1em 0;
  }
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item a.item-inner .__link {
  opacity: 1;
}
@media (hover: hover) and (min-width: 1001px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover {
    transform: none !important;
    z-index: 2;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover:before {
    height: 100%;
    height: calc(100% + 2px);
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner {
    z-index: 9;
    color: #fff;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__tb {
    padding-left: 2.5454545455em;
    width: 1.4545454545em;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__tb img {
    transform: scale(1);
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__tb.__lg {
    width: 3.1818181818em;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__title {
    padding-left: 0.7272727273em;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__link {
    margin-right: 2.5454545455em;
    background-image: url(../img/icon/link-w.svg);
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item:hover .item-inner .__title-outline {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-color: transparent;
  }
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__tb,
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__year,
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__link {
  transition: margin 400ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, margin;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__year {
  width: 10%;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__tb {
  position: relative;
  height: auto;
  width: 0;
  transition: padding 400ms cubic-bezier(0.165, 0.84, 0.44, 1), width 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: padding, width;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__tb img {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 1.4545454545em;
  height: 1.4545454545em;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  background: #333;
  transform: scale(0);
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), width 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__tb.__lg img {
  width: 3.1818181818em;
  height: 3.1818181818em;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  gap: 1em;
  padding-right: 2.1818181818em;
  box-sizing: border-box;
  transition: padding 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: padding;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title .__title-outline {
  font-size: min(5.6vw, 2.1818181818em);
  -webkit-text-stroke: 1px #000;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title .__title-outline {
    font-size: max(1.75rem, 4vw);
  }
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__awards {
  margin-left: auto;
  display: flex;
  gap: 0.2em;
  align-items: center;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__awards img {
  display: block;
  width: min(2rem, 4vw);
  min-width: min(2rem, 4vw);
  height: auto;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category {
  width: 26%;
  min-width: 26%;
  line-height: 1.56;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category span {
  display: block;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category span:after {
  content: ", ";
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category span:last-child:after {
  content: "";
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category span {
    display: inline-block;
  }
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category.__small {
  width: 18%;
  min-width: 18%;
}
.projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__link {
  background: url(../img/icon/link.svg) 50% 50% no-repeat;
  background-size: 100% 100%;
  width: 1.2727272727em;
  min-width: 1.2727272727em;
  height: 1.2727272727em;
  display: block;
  margin: 0 0.7272727273em;
  opacity: 0;
}
@media screen and (max-width: 1000px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .item-inner {
    display: block;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__link {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    right: 16px;
    width: 24px;
    height: 24px;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title {
    width: calc(100% - 240px);
    margin: 0;
    padding-right: 0;
    display: block;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__tb {
    display: none;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__year {
    margin-bottom: 0.5em;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__awards {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 60px;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title small {
    display: block;
    margin-top: 0.8em;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__category {
    width: auto !important;
    min-width: initial !important;
    margin: 0 !important;
    margin-top: 0.4em !important;
  }
}
@media screen and (max-width: 500px) {
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__title {
    width: calc(100% - 30px);
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__link {
    right: 0;
    top: 1.2em;
    width: 20px;
    height: 20px;
    transform: none;
  }
  .projects-v2-wrapper .project-list[data-list-type=table] .project-list-item .__awards {
    display: none;
  }
}

.about-wrapper {
  opacity: 0;
  visibility: hidden;
}

.about-section .section-content {
  position: relative;
}
.about-section .about-section-header .__section-title {
  margin-bottom: 1em;
}
.about-section .about-section-header p {
  max-width: 55%;
  line-height: 2;
  margin-bottom: calc(2.7vw + 44px);
}
@media screen and (max-width: 1000px) {
  .about-section .about-section-header p {
    max-width: 85%;
  }
}
@media screen and (max-width: 500px) {
  .about-section .about-section-header p {
    max-width: 100%;
  }
}

#aboutIntro {
  background: #03aa6c;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-height, 100vh);
  height: 100vh;
}
#aboutIntro .section-inner {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#aboutIntro .__title {
  font-weight: 700;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
}
#aboutIntro .circles {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 56vh;
}
#aboutIntro .circles .__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 56vh/2;
  height: 56vh;
}
#aboutIntro .circles .__circle svg {
  display: block;
  width: 56vh;
  height: 56vh;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
}

#aboutTop {
  background-color: #4848c4;
  color: #fff;
}
#aboutTop .section-inner {
  padding-top: max(9em, 22.2vmin);
  padding-bottom: max(7.5rem, 18.5vmin);
}
#aboutTop .__desc {
  padding-top: max(30rem, 50vh);
  position: relative;
}
@media screen and (max-width: 500px) {
  #aboutTop .__desc {
    padding-top: 0;
  }
}
#aboutTop .__title {
  margin-bottom: 1rem;
}
#aboutTop .__txt {
  line-height: 2em;
  letter-spacing: -0.03em;
  max-width: 24.2222222222em;
}
@media screen and (max-width: 500px) {
  #aboutTop .__txt {
    width: 85%;
  }
}
#aboutTop .__slogan {
  position: absolute;
  top: 0;
  right: 0;
}
#aboutTop .__slogan svg {
  display: block;
  width: max(35rem, 33.333vw);
  overflow: visible;
}
#aboutTop .__slogan svg path {
  fill: none;
  stroke: #FCF012;
}
@media screen and (max-width: 1000px) {
  #aboutTop .__slogan svg {
    width: max(26.1875rem, 56vw);
  }
}
@media screen and (max-width: 500px) {
  #aboutTop .__slogan svg {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  #aboutTop .__slogan {
    position: relative;
    right: auto;
    margin-bottom: calc(2.7vw + 44px);
  }
}

#aboutWeService {
  position: relative;
  margin-bottom: max(9em, 22.2vmin);
}
#aboutWeService .__bg {
  position: relative;
  height: 0px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .__bg {
    display: none;
  }
  #aboutWeService .__bg .__section-title {
    display: none;
  }
}
#aboutWeService .__section-title,
#aboutWeService .section-inner {
  padding-top: max(7.5rem, 18.5vmin);
}
#aboutWeService .__section-title {
  font-size: max(2.25rem, 2.5vw);
  letter-spacing: -0.05em;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .__section-title {
    font-size: max(1.25rem, 2.5vw);
    margin-bottom: 0.6em;
    position: relative;
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .__section-title {
    font-size: max(1rem, 4vw);
  }
}
#aboutWeService .section-content {
  padding-left: 35%;
}
#aboutWeService .section-content .__section-title {
  padding-top: 0;
  display: none;
  margin-bottom: 0.5rem !important;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .section-content {
    padding-left: 0;
  }
  #aboutWeService .section-content .__section-title {
    display: block;
  }
}
#aboutWeService .we-service-block {
  margin-bottom: max(7.5rem, 14.8vmin);
}
#aboutWeService .we-service-block .__title {
  margin-bottom: 0.6em;
  letter-spacing: -0.03em;
  line-height: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
#aboutWeService .we-service-block .__categories {
  color: #fe271a;
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__categories {
    width: 85%;
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .we-service-block .__categories {
    width: 100%;
  }
}
#aboutWeService .we-service-block .__categories span {
  display: inline-flex;
  white-space: nowrap;
  letter-spacing: -0.0253333333em;
  margin-right: 1.5em;
  margin-bottom: 0.85em;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
#aboutWeService .we-service-block .__excerpt p {
  line-height: 2em;
  letter-spacing: -0.03em;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__excerpt p {
    width: 85%;
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .we-service-block .__excerpt p {
    width: 100%;
  }
}
#aboutWeService .we-service-block .__portfolio {
  width: 61.56vw;
  padding-top: calc(2.08vw + 40px);
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__portfolio {
    width: auto;
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container {
  overflow: visible;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide {
  display: flex;
  align-items: center;
  overflow: visible;
  width: calc(22.8vw - 22.8vw * .15);
  min-width: calc(22.8vw - 22.8vw * .15);
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide {
    width: calc(max(15rem, 31vw) - max(15rem, 31vw) * .15);
    min-width: calc(max(15rem, 31vw) - max(15rem, 31vw) * .15);
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide {
    width: calc(max(13rem, 22.8vw) - max(13rem, 22.8vw) * .15);
    min-width: calc(max(13rem, 22.8vw) - max(13rem, 22.8vw) * .15);
    height: auto;
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(even) a img {
  height: 22.8vw;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(even) a img {
    height: calc(max(15rem, 31vw));
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(even) a img {
    height: calc(max(13rem, 22.8vw));
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(1) {
  z-index: 50;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(2) {
  z-index: 49;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(3) {
  z-index: 48;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(4) {
  z-index: 47;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(5) {
  z-index: 46;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(6) {
  z-index: 45;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(7) {
  z-index: 44;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(8) {
  z-index: 43;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(9) {
  z-index: 42;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(10) {
  z-index: 41;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(11) {
  z-index: 40;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(12) {
  z-index: 39;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(13) {
  z-index: 38;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(14) {
  z-index: 37;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(15) {
  z-index: 36;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(16) {
  z-index: 35;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(17) {
  z-index: 34;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(18) {
  z-index: 33;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(19) {
  z-index: 32;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(20) {
  z-index: 31;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(21) {
  z-index: 30;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(22) {
  z-index: 29;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(23) {
  z-index: 28;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(24) {
  z-index: 27;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(25) {
  z-index: 26;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(26) {
  z-index: 25;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(27) {
  z-index: 24;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(28) {
  z-index: 23;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(29) {
  z-index: 22;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(30) {
  z-index: 21;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(31) {
  z-index: 20;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(32) {
  z-index: 19;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(33) {
  z-index: 18;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(34) {
  z-index: 17;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(35) {
  z-index: 16;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(36) {
  z-index: 15;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(37) {
  z-index: 14;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(38) {
  z-index: 13;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(39) {
  z-index: 12;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(40) {
  z-index: 11;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(41) {
  z-index: 10;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(42) {
  z-index: 9;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(43) {
  z-index: 8;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(44) {
  z-index: 7;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(45) {
  z-index: 6;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(46) {
  z-index: 5;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(47) {
  z-index: 4;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(48) {
  z-index: 3;
}
#aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:nth-child(49) {
  z-index: 2;
}
@media (hover: hover) {
  #aboutWeService .we-service-block .__portfolio .swiper-container .swiper-slide:hover {
    z-index: 99;
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container a {
  width: 22.8vw;
  height: 30.4vw;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container a {
    width: max(15rem, 31vw);
    height: calc(max(15rem, 31vw) * 4 / 3);
    height: auto;
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img:after {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition: opacity 300ms;
  opacity: 0;
  z-index: 3;
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img .__desc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 2rem;
  width: 100%;
  color: #fff;
  z-index: 4;
  box-sizing: border-box;
  transition: opacity 500ms;
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img .__desc .__client,
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img .__desc .__subject {
  transition: opacity 600ms, transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateY(50%);
  opacity: 0;
  position: relative;
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img .__desc .__client {
  margin-bottom: 1em;
  line-height: 1.25;
  transition-delay: 100ms;
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img .__desc .__subject {
  line-height: 1.25;
  transition-delay: 200ms;
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img img {
  display: block;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
  width: 22.8vw;
  height: 30.4vw;
  transition: opacity 300ms;
}
@media screen and (max-width: 1000px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container a .__img img {
    width: max(15rem, 31vw);
    height: calc(max(15rem, 31vw) * 4 / 3);
  }
}
@media screen and (max-width: 500px) {
  #aboutWeService .we-service-block .__portfolio .swiper-container a .__img img {
    width: max(13rem, 22.8vw);
    height: calc(max(13rem, 22.8vw) * 4 / 3);
  }
}
#aboutWeService .we-service-block .__portfolio .swiper-container a .__img video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  visibility: hidden;
}
@media (hover: hover) {
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover {
    z-index: 99;
  }
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img .__desc {
    opacity: 1;
  }
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img .__desc .__subject,
#aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img .__desc .__client {
    transform: translateY(0);
    opacity: 1;
  }
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img:after {
    opacity: 1;
  }
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img video {
    opacity: 1;
    visibility: visible;
  }
  #aboutWeService .we-service-block .__portfolio .swiper-container a:hover .__img img {
    opacity: 0;
  }
}

#aboutWeWork {
  padding-bottom: calc(2.7vw + 44px);
  position: relative;
}
#aboutWeWork .about-section-header {
  position: absolute;
  top: 0;
  left: 0;
}
#aboutWeWork .we-work-diagram {
  overflow: hidden;
  padding: 0 4.16vw;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  #aboutWeWork .we-work-diagram {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
}
#aboutWeWork .we-work-diagram .__inner .motion {
  width: 100%;
  position: relative;
  pointer-events: none;
}
#aboutWeWork .we-work-diagram .__inner .motion .__bg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  opacity: 0;
  transition: opacity 500ms;
}
#aboutWeWork .we-work-diagram .__inner .motion .__bg.active {
  opacity: 1;
}
#aboutWeWork .we-work-diagram .__inner .motion canvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1000px) {
  #aboutWeWork .we-work-diagram .__inner {
    width: min(1000px, 200vw);
    margin-top: -1rem;
  }
}
@media screen and (max-width: 500px) {
  #aboutWeWork .we-work-diagram .__inner {
    margin-top: 8rem;
  }
}

#aboutOurClients {
  background-color: #f4f4f4;
  padding-top: max(7.5rem, 18.5vmin);
  padding-bottom: max(7.5rem, 18.5vmin);
  margin-bottom: max(7.5rem, 18.5vmin);
  position: relative;
}
#aboutOurClients .client-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: calc(min(3rem, 3vw) * -1) calc(min(5.5rem, 6vw) * -1);
}
#aboutOurClients .client-list .logo {
  display: block;
  overflow: hidden;
  width: calc(25%);
  min-width: calc(25%);
  padding: min(4rem, 4vw) min(5.5rem, 6vw);
  box-sizing: border-box;
}
#aboutOurClients .client-list .logo img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  #aboutOurClients .client-list {
    margin: calc(min(2rem, 2vw) * -1) calc(min(6rem, 7vw) * -1);
  }
  #aboutOurClients .client-list .logo {
    width: 33.333333%;
    min-width: 33.333333%;
    padding: min(2rem, 2vw) min(6rem, 7vw);
  }
}
@media screen and (max-width: 500px) {
  #aboutOurClients .client-list {
    margin: min(-1rem, -1vw) 0;
  }
  #aboutOurClients .client-list .logo {
    width: 47%;
    min-width: 47%;
    margin: 4vw 0;
    padding: 0;
  }
  #aboutOurClients .client-list .logo:nth-child(even) {
    margin-left: 6%;
  }
}

#aboutAwards {
  padding-bottom: max(9em, 22.2vmin);
}
#aboutAwards .awards {
  margin-bottom: calc(2.7vw + 44px);
  position: relative;
}
#aboutAwards .awards .__tb {
  display: none;
}
@media (hover: hover) {
  #aboutAwards .awards .__tb {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 3;
  }
  #aboutAwards .awards .__tb .__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #aboutAwards .awards .__tb .__inner .__img {
    display: block;
    background: 50% 50% no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }
  #aboutAwards .awards .__tb .__inner .__img img {
    max-width: 22.8vw;
    max-height: 22.8vw;
    width: auto;
    height: auto;
    position: relative;
  }
}
#aboutAwards .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9em;
  padding: 0 1em;
  height: 3.8333333333em;
  position: relative;
  transition: background-color 800ms, color 800ms, border 800ms;
  will-change: background-color, color, border;
}
#aboutAwards .btn-more:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 1px #000;
  opacity: 0.15;
  content: "";
  border-radius: 3.8333333333em;
}
#aboutAwards .btn--centered {
  display: flex;
  justify-content: center;
}

.award-list-item {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-bottom: -1px;
  transition: background-color 400ms, color 400ms;
  will-change: background-color, color;
  position: relative;
  display: none;
}
.award-list-item.visible {
  display: block;
}
.award-list-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  height: 0;
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: height;
}
.award-list-item .item-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.63em 0;
  transition: color 400ms;
  will-change: color;
}
.award-list-item a.item-inner .__link {
  opacity: 1;
}
@media (hover: hover) {
  .award-list-item:hover {
    transform: none !important;
  }
  .award-list-item:hover:before {
    height: 100%;
  }
  .award-list-item:hover .item-inner {
    z-index: 9;
    color: #fff;
  }
  .award-list-item:hover .item-inner .__year {
    transform: translateX(2.5454545455em);
  }
  .award-list-item:hover .item-inner .__link {
    transform: translateX(-1.8181818182em);
    background-image: url(../img/icon/link-w.svg);
  }
  .award-list-item:hover .item-inner .__title .__img {
    width: 2.1818181818em;
  }
  .award-list-item:hover .item-inner .__title .__img img {
    transform: scale(1);
  }
}
.award-list-item .__year,
.award-list-item .__link {
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}
.award-list-item .__year {
  width: 12%;
}
.award-list-item .__award {
  width: 28%;
  margin: 0 2%;
  display: flex;
  align-items: center;
}
.award-list-item .__award .__icon {
  margin-right: 2.1818181818em;
}
.award-list-item .__award .__icon img {
  display: block;
  width: 1.4545454545em;
}
.award-list-item .__award .__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.award-list-item .__award .__txt strong {
  display: block;
}
.award-list-item .__award .__txt strong .__y {
  display: none;
}
.award-list-item .__award .__txt small {
  opacity: 0.65;
  margin-top: 0.5em;
  display: block;
  line-height: 1.25;
}
.award-list-item .__title {
  flex: 1;
  display: flex;
  align-items: center;
}
.award-list-item .__title .__img {
  width: 2.1818181818em;
  width: 0;
  transition: width 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: width;
}
.award-list-item .__title .__img img {
  display: block;
  width: 1.4545454545em;
  height: 1.4545454545em;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(0);
  transition: transform 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}
.award-list-item .__link {
  background: url(../img/icon/link.svg) 50% 50% no-repeat;
  background-size: 100% 100%;
  width: 1.2727272727em;
  height: 1.2727272727em;
  display: block;
  margin: 0 0.7272727273em;
  opacity: 0;
}
@media screen and (max-width: 1000px) {
  .award-list-item .__year {
    width: 10%;
  }
  .award-list-item .__award {
    width: 40%;
  }
  .award-list-item .__award .__icon {
    margin-right: 1.4545454545em;
  }
}
@media screen and (max-width: 500px) {
  .award-list-item .item-inner {
    display: block;
  }
  .award-list-item .__link {
    position: absolute;
    top: 1.95em;
    right: 0;
    margin: 0;
    width: 20px;
    height: 20px;
  }
  .award-list-item .__year,
.award-list-item .__award {
    width: auto;
    margin: 0;
  }
  .award-list-item .__year {
    display: none;
  }
  .award-list-item .__award .__icon {
    display: none;
  }
  .award-list-item .__award .__txt strong .__y {
    display: inline;
  }
  .award-list-item .__title {
    width: auto;
    margin: 0 0 0.8em;
    padding-right: 2em;
  }
  .award-list-item .__title .__img {
    display: none;
  }
}

.news-wrapper {
  min-height: 100vh;
}

.news-list {
  padding-bottom: 13.75rem;
}
.news-list .masonry {
  margin: -2.380952381%;
}
.news-list .masonry .masonry-item {
  box-sizing: border-box;
  width: 33.3333333333%;
  position: relative;
  padding: 2.380952381%;
  padding-bottom: 7.5rem;
  visibility: visible;
  display: block;
}
.news-list .masonry .masonry-item.hide {
  display: none;
}
@media screen and (max-width: 1000px) {
  .news-list .masonry .masonry-item {
    width: 50%;
  }
}
@media screen and (max-width: 500px) {
  .news-list .masonry .masonry-item {
    width: 100%;
  }
}
.news-list .news-list-item {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
}
.news-list .news-list-item .post-tb {
  overflow: hidden;
  margin-bottom: 1.5625rem;
  position: relative;
}
.news-list .news-list-item .post-tb img {
  display: block;
  width: 100%;
  height: auto;
}
.news-list .news-list-item .post-tb i {
  position: absolute;
  display: block;
  width: 2rem;
  height: 2rem;
  background: 50% 50% no-repeat;
  background-size: contain;
  right: 1.25rem;
  bottom: 1.25rem;
}
.news-list .news-list-item .post-tb i.icon-instagram {
  background-image: url(../img/icon/instagram-w.svg);
}
.news-list .news-list-item .post-tb i.icon-facebook {
  background-image: url(../img/icon/facebook-w.svg);
}
.news-list .news-list-item .post-tb .badges {
  position: absolute;
  right: max(min(1rem, 1.6vw), 14.4px);
  top: max(min(1rem, 1.6vw), 14.4px);
  display: flex;
  gap: max(min(0.5rem, 0.8vw), 7.2px);
}
.news-list .news-list-item .post-tb .badges img {
  display: block;
  width: max(min(2.5rem, 4vw), 36px) !important;
  position: static !important;
}
.news-list .news-list-item .post-category {
  margin-bottom: 1.25rem;
}
.news-list .news-list-item .post-category span {
  display: flex;
  align-items: center;
}
.news-list .news-list-item .post-category span i {
  min-width: 0.8888888889em;
  min-height: 0.8888888889em;
  width: 0.8888888889em;
  height: 0.8888888889em;
  border-radius: 50%;
  display: block;
  content: "";
  margin-right: 0.4em;
  background: #000;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background: var(--bg-color, #000);
}

.single-news #main {
  z-index: 999999;
}

[data-current-namespace=page-news] .blog-post,
[data-current-namespace=page-team] .blog-post {
  opacity: 0;
}

#teamHeader {
  padding-top: max(14rem, 30vh);
}
#teamHeader .__slogan p {
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.7777em;
}
#teamHeader .__slogan p .__sentence {
  display: block;
  overflow: hidden;
}
#teamHeader .__slogan p .__sentence span {
  display: block;
}
#teamHeader .__slogan .__circles {
  position: relative;
  width: 0.7777em;
  height: 0.7777em;
}
#teamHeader .__slogan .__circles .__c {
  display: block;
  border-radius: 50%;
  width: 0.7777em;
  height: 0.7777em;
  background-color: #ddd;
  opacity: 0;
  visibility: hidden;
}
#teamHeader .__slogan .__circles .__anim {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.5554em;
  height: 1.5554em;
}
#teamHeader .__slogan .__circles .__anim canvas {
  display: block;
}
#teamHeader .__slogan .__circles .__c1 {
  background: #fcf012;
}
#teamHeader .__slogan .__circles .__c2 {
  background: #fc30aa;
}
#teamHeader .__slogan .__circles .__c3 {
  background: #ae3bff;
}
#teamHeader .__slogan .__circles .__c2,
#teamHeader .__slogan .__circles .__c3 {
  position: absolute;
  top: 0;
  left: 0;
}

#teamGallery .__txt {
  padding: calc(5vw + 48px) 0;
}
#teamGallery .__txt p {
  width: 50%;
  line-height: 1.87;
  letter-spacing: -0.03em;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  #teamGallery .__txt p {
    width: 85%;
  }
}
#teamGallery .__gallery {
  margin: -2.5vmin;
}
#teamGallery .__gallery .swiper-container {
  overflow: visible;
}
#teamGallery .__gallery .swiper-slide {
  width: calc( 57.222vmin + 5vmin);
}
#teamGallery .__gallery .__gallery-item {
  padding: 2.5vmin;
  box-sizing: border-box;
}
#teamGallery .__gallery .__gallery-item .__img {
  position: relative;
  display: block;
  overflow: hidden;
}
#teamGallery .__gallery .__gallery-item .__img img {
  display: block;
  width: 100%;
  transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media (hover: hover) {
  #teamGallery .in-trans .__gallery-item .__img img {
    transform: scale(1.15);
  }
}
#teamGallery .teams {
  position: relative;
}
#teamGallery .teams .__tb {
  display: none;
}
@media (hover: hover) {
  #teamGallery .teams .__tb {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 3;
  }
  #teamGallery .teams .__tb .__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #teamGallery .teams .__tb .__inner .__img {
    display: block;
    background: 50% 50% no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
  }
  #teamGallery .teams .__tb .__inner .__img img {
    max-width: 22.8vw;
    max-height: 22.8vw;
    width: auto;
    height: auto;
    position: relative;
  }
}
#teamGallery .team-list {
  padding-bottom: 2px;
}

.team-list-item {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  margin-bottom: -1px;
  transition: background-color 400ms, color 400ms;
  position: relative;
}
.team-list-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  height: 0;
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.team-list-item .item-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5555555556em 0;
  transition: color 400ms;
}
@media (hover: hover) {
  .team-list-item:hover {
    transform: none !important;
  }
  .team-list-item:hover:before {
    height: 100%;
  }
  .team-list-item:hover .item-inner {
    z-index: 9;
    color: #fff;
  }
  .team-list-item:hover .item-inner .__name {
    transform: translateX(0.7777777778em);
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-color: transparent;
  }
  .team-list-item:hover .item-inner .__arrow {
    transform: translateX(-0.7777777778em);
  }
  .team-list-item:hover .item-inner .__arrow svg path {
    stroke: transparent;
  }
}
.team-list-item .__name {
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  -webkit-text-fill-color: #fff;
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-text-stroke-color 400ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-text-fill-color 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.team-list-item .__arrow {
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.team-list-item .__arrow svg path {
  transition: all 400ms ease;
}
.team-list-item .__arrow {
  width: 1em;
  height: 1em;
  display: block;
  margin: 0 0.2222222222em;
  margin-left: auto;
}
.team-list-item .__arrow img,
.team-list-item .__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.team-list-item .__arrow svg path {
  fill: #fff;
}
@media screen and (max-width: 500px) {
  .team-list-item .item-inner {
    display: block;
  }
  .team-list-item .__arrow {
    position: absolute;
    top: 0.5555555556em;
    right: 0;
    margin: 0;
    width: 1em;
    height: 1em;
  }
  .team-list-item .__arrow svg {
    width: 1em;
    height: 1em;
  }
  .team-list-item .__name {
    width: auto;
    margin: 0;
    padding-right: 2em;
  }
}

#teamVideo {
  z-index: 1;
}
#teamVideo .__video-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#teamVideo .__video-container .__video {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#teamVideo .__video-container .__video video,
#teamVideo .__video-container .__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
#teamVideo .__video-container .__video .__m {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
@media screen and (orientation: portrait) {
  #teamVideo .__video-container .__video .__m {
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
  #teamVideo .__video-container .__video .__d {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}

#teamBenefit .__benefit {
  position: relative;
}
#teamBenefit .__benefit .__title {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1000px) {
  #teamBenefit .__benefit .__title {
    position: relative;
  }
}
#teamBenefit .__benefit .__title h2 {
  margin-bottom: 1em;
  letter-spacing: -0.05em;
}
#teamBenefit .__benefit .__body {
  padding-left: 22.8vw;
}
@media screen and (max-width: 1000px) {
  #teamBenefit .__benefit .__body {
    padding-left: 0;
  }
}
#teamBenefit .__benefit .__body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  justify-content: space-between;
  margin-bottom: calc( -2.08vw - 40px);
}
#teamBenefit .__benefit .__body ul li {
  width: 30%;
  margin-bottom: calc(2.08vw + 40px);
}
@media screen and (max-width: 500px) {
  #teamBenefit .__benefit .__body ul li {
    width: 47.5%;
  }
}
#teamBenefit .__benefit-item .__icon {
  margin-bottom: 0.25rem;
  position: relative;
  display: inline-flex;
}
#teamBenefit .__benefit-item .__icon img {
  display: block;
  width: max(12.5rem, 10.4vw);
  opacity: 0;
}
@media screen and (max-width: 500px) {
  #teamBenefit .__benefit-item .__icon img {
    width: min(11.25rem, 39.9vw);
  }
}
#teamBenefit .__benefit-item .__icon svg,
#teamBenefit .__benefit-item .__icon canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#teamBenefit .__benefit-item .__desc {
  padding-right: 15%;
}
@media screen and (max-width: 500px) {
  #teamBenefit .__benefit-item .__desc {
    padding-right: 0;
  }
}
#teamBenefit .__benefit-item .__desc h4 {
  margin-bottom: 0.2em;
  letter-spacing: -0.03em;
}
#teamBenefit .__benefit-item .__desc p {
  line-height: 1.89;
  letter-spacing: -0.03em;
}

.team-post .blog-post-header {
  --bg-color: #cbf75a;
  --txt-color: #000;
}
.team-post .font--section-title-1 {
  line-height: 1.1em;
  letter-spacing: -0.03em;
}
.team-post .team-content {
  line-height: 1.8;
  letter-spacing: -0.54px;
  margin-bottom: 3em;
}
.team-post .team-content h2,
.team-post .team-content h3,
.team-post .team-content h4 {
  font-weight: 600;
  margin-bottom: 1em;
  font-size: 1.2222em;
}
.team-post .team-content p,
.team-post .team-content ul {
  margin-right: 5%;
}
.team-post .team-content hr {
  margin: 2em auto;
  border: 0;
  height: 1px;
  background: #666666;
}
.team-post .team-content ul {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1em;
}
.team-post .post-footer .btn-capsule {
  height: 3.7777777778em;
  border-radius: 2.2222222222em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.2222222222em;
  border: solid 1px #fff;
  color: #fff;
  box-sizing: border-box;
}
.team-post .post-footer .btn-capsule span {
  display: block;
  line-height: 2;
}
.team-post .interviewee-qna .interviewee-qna-block + .interviewee-qna-block {
  padding-top: 2em;
  margin-top: 2em;
  border-top: 1px solid #666666;
}
.team-post .post-content {
  display: none;
}
.team-post .post-content.active {
  display: block !important;
}
.team-post .blog-post-header .btn-capsule.hide {
  display: none;
}

.team-wrapper {
  overflow: hidden;
  opacity: 0;
  padding-bottom: max(9em, 22.2vmin);
}
.team-wrapper section {
  position: relative;
  z-index: 2;
}
.team-wrapper section + section {
  margin-top: max(7.5rem, 18.5vmin);
}

.contact-wrapper {
  opacity: 0;
}
.contact-wrapper:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  content: "";
}
.contact-wrapper.inited:after {
  display: none;
}

.contact-main {
  padding-top: max(15rem, 32vmin);
  padding-bottom: max(10rem, 22.2vmin);
  position: relative;
}
.contact-main .sentence {
  display: block;
  overflow: hidden;
}
.contact-main .sentence span {
  display: block;
  position: relative;
  backface-visibility: hidden;
  filter: grayscale(0);
}
@media screen and (max-width: 1000px) {
  .contact-main {
    padding-top: max(9rem, 22.2vmin);
    padding-bottom: max(4rem, 10vmin);
  }
}
.contact-main .company-info {
  color: #000;
  position: absolute;
  left: 0;
  top: max(9rem, 22.2vmin);
  z-index: 15;
  line-height: 1.4444444444em;
  letter-spacing: -0.0583333333em;
  font-size: max(1.75rem, 1.875vw);
}
@media screen and (max-width: 1000px) {
  .contact-main .company-info {
    position: relative;
    top: auto;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 1000px) {
  .contact-main .company-info {
    font-size: max(1.875rem, 3.2vw);
  }
}
@media screen and (max-width: 500px) {
  .contact-main .company-info {
    font-size: 6vw;
  }
}
.contact-main .company-info .call {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  -webkit-text-fill-color: transparent;
  display: block;
  letter-spacing: 0;
  font-size: 1.3333333333em;
}
.contact-main .contact-grid {
  margin: 0 -2.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .contact-main .contact-grid {
    margin: 0;
    flex-direction: column;
  }
}
@media screen and (max-width: 1000px) {
  .contact-main .contact-grid .contact-col {
    margin-bottom: 3rem;
    position: relative;
  }
}
.contact-main .circles,
.contact-main .__circle {
  width: max(27.5rem, 36vw);
  height: max(27.5rem, 36vw);
  position: relative;
}
.contact-main .circles .__c,
.contact-main .__circle .__c {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1000px) {
  .contact-main .circles,
.contact-main .__circle {
    width: 64vw;
    height: 64vw;
  }
}
@media screen and (max-width: 500px) {
  .contact-main .circles,
.contact-main .__circle {
    width: 80vw;
    height: 80vw;
  }
}
.contact-main .circles {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
}
.contact-main .circles.circles2 {
  left: 100%;
  transform: translateX(-100%);
}
.contact-main .circles .__circle {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  top: 0;
  left: 0;
}
.contact-main .circles .__circle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-main .circles .__circle.c1 {
  left: -5%;
}
.contact-main .circles .__circle.c1 circle {
  stroke: #ffec02;
}
@media screen and (max-width: 1000px) {
  .contact-main .circles .__circle.c1 {
    left: -3%;
  }
}
.contact-main .circles .__circle.c2 {
  left: 5%;
}
.contact-main .circles .__circle.c2 circle {
  stroke: #783cf9;
}
@media screen and (max-width: 1000px) {
  .contact-main .circles .__circle.c2 {
    left: 5%;
  }
}
.contact-main .circles .__circle.c3 {
  left: 2%;
}
.contact-main .circles .__circle.c3 circle {
  stroke: #ff2ce7;
}
@media screen and (max-width: 1000px) {
  .contact-main .circles .__circle.c3 {
    left: -10%;
  }
}
.contact-main .circles .__circle.c4 {
  left: 8%;
}
.contact-main .circles .__circle.c4 circle {
  stroke: #02aa6c;
}
@media screen and (max-width: 1000px) {
  .contact-main .circles .__circle.c4 {
    left: 10%;
  }
}
.contact-main .circles[data-device=mobile] {
  display: none;
  position: absolute;
  transform: none;
  left: 0;
}
.contact-main .circles[data-device=mobile] .__circle {
  left: 0 !important;
}
@media screen and (max-width: 1000px) {
  .contact-main .circles[data-device=desktop] {
    display: none;
  }
  .contact-main .circles[data-device=mobile] {
    display: block;
  }
}
.contact-main .contact-circle {
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 2.5vw;
  justify-content: start;
  position: relative;
  color: var(--accent-color);
}
@media screen and (max-width: 1000px) {
  .contact-main .contact-circle {
    padding: 6vw;
  }
}
.contact-main .contact-circle.inquiry {
  --accent-color: #783cf9;
}
.contact-main .contact-circle.recruit {
  --accent-color: #02aa6c;
}
.contact-main .contact-circle .__c {
  transform: translate(-50%, -50%) scale(0);
  background-color: var(--accent-color);
  transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transition;
}
@media (hover: hover) {
  .contact-main .contact-circle:hover, .contact-main .contact-circle.active {
    color: #fff;
  }
  .contact-main .contact-circle:hover .__c, .contact-main .contact-circle.active .__c {
    transform: translate(-50%, -50%) scale(1);
  }
  .contact-main .contact-circle:hover .__inner .cta, .contact-main .contact-circle.active .__inner .cta {
    -webkit-text-stroke-color: #fff;
  }
  .contact-main .contact-circle:hover .__inner .cta svg path, .contact-main .contact-circle.active .__inner .cta svg path {
    stroke: #fff;
  }
}
.contact-main .contact-circle .__inner {
  position: relative;
  white-space: nowrap;
}
.contact-main .contact-circle .__inner h3 {
  line-height: 1.125em;
  letter-spacing: -0.03em;
  margin-bottom: 0.25em;
  transition: color 500ms;
}
.contact-main .contact-circle .__inner .cta {
  display: flex;
  align-items: center;
  letter-spacing: -0.05em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--accent-color);
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.25em;
  transition: -webkit-text-stroke-color 500ms;
}
.contact-main .contact-circle .__inner .cta svg {
  display: block;
  width: 1em;
  height: 1em;
  margin-left: 0.2em;
}
.contact-main .contact-circle .__inner .cta svg path {
  transition: stroke 500ms;
  stroke: var(--accent-color);
}
.contact-main .contact-circle .__inner h3,
.contact-main .contact-circle .__inner .cta {
  font-size: 4.2vw;
}
@media screen and (max-width: 1000px) {
  .contact-main .contact-circle .__inner h3,
.contact-main .contact-circle .__inner .cta {
    font-size: max(2.813rem, 6.4vw);
  }
}
@media screen and (max-width: 500px) {
  .contact-main .contact-circle .__inner h3,
.contact-main .contact-circle .__inner .cta {
    font-size: 9vw;
  }
}
.contact-main .contact-circle .__inner .email {
  display: flex;
  text-decoration: underline;
  text-indent: 0.2em;
  padding-bottom: 1em;
  transition: color 500ms;
  color: inherit;
}
.contact-main .contact-circle .__inner .email .__label span:after {
  text-decoration: underline;
}

.contact-sub {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-height, 100vh);
  color: #fff;
  z-index: 9999;
}
.contact-sub .font-averta {
  letter-spacing: 0;
}
.contact-sub .contact-sub-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.contact-sub .contact-sub-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.contact-sub .survey-container {
  padding-top: 34vmin;
}
.contact-sub .surveys {
  overflow: hidden;
}
.contact-sub .greeting {
  color: #fcf012;
  position: relative;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.contact-sub .greeting p {
  margin-bottom: 1.5em;
}
.contact-sub .greeting h3 {
  letter-spacing: -0.025em;
}
.contact-sub .greeting h4 {
  margin-top: 1em;
  letter-spacing: -0.075em;
}
.contact-sub .greeting span {
  display: block;
  position: relative;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: grayscale(0);
}
.contact-sub .greeting.thankyou {
  color: #fff !important;
}
.contact-sub .form-action {
  overflow: hidden;
}
.contact-sub .form-action .form-action-inner {
  margin-left: 1.875rem;
  pdading-top: max(7.5rem, 18.5vmin);
  padding-bottom: max(9rem, 22.2vmin);
}
@media screen and (max-width: 1000px) {
  .contact-sub .form-action .form-action-inner {
    margin-left: 0;
  }
}
.contact-sub .form-action button {
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  letter-spacing: -0.05em;
  text-align: left;
  font-size: 4.2vw;
}
@media screen and (max-width: 500px) {
  .contact-sub .form-action button {
    flex-direction: column;
    align-items: flex-start;
  }
}
.contact-sub .form-action button .__label {
  color: rgba(255, 255, 255, 0);
  position: relative;
  display: block;
  transition: color 400ms, transform 400ms;
  margin-right: 0.325em;
  line-height: 1.35;
}
.contact-sub .form-action button .__label:before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-label);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
}
.contact-sub .form-action button svg {
  display: block;
  width: 1em;
  height: 1em;
  transition: transform 400ms;
}
.contact-sub .form-action button svg path {
  transition: fill 400ms;
  stroke: #fff;
  fill: rgba(255, 255, 255, 0);
}
@media screen and (max-width: 1000px) {
  .contact-sub .form-action button {
    font-size: max(2.813rem, 6.4vw);
  }
}
@media screen and (max-width: 500px) {
  .contact-sub .form-action button {
    font-size: 9vw;
  }
  .contact-sub .form-action button svg {
    margin-top: 0.2em;
  }
}
@media (hover: hover) {
  .contact-sub .form-action button:hover .__label {
    color: white;
  }
  .contact-sub .form-action button:hover .__label,
.contact-sub .form-action button:hover svg {
    transform: translateX(2.8125rem);
  }
  .contact-sub .form-action button:hover svg path {
    fill: #fff;
  }
}

.contact-sub-transition-circle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 0;
  height: 0;
  z-index: 999999999;
}

.contact-sub .survey-item {
  display: none;
}
.contact-sub .survey-item.active {
  display: block;
}
.contact-sub .survey-item .survey-item-inner {
  padding-bottom: 9.8vh;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  color: #fff;
}
.contact-sub .survey-item .survey-item-inner .q {
  color: #fff;
}
.contact-sub .question .no {
  display: block;
  margin-bottom: 0.75em;
}
.contact-sub .question .q {
  margin-left: 1.875rem;
}
@media screen and (max-width: 1000px) {
  .contact-sub .question .q {
    margin-left: 0;
  }
}
.contact-sub .question .q p {
  letter-spacing: -0.04em;
  line-height: 1.5em;
}
.contact-sub .question .q small {
  margin-top: 1em;
  letter-spacing: -0.035em;
  display: block;
}
.contact-sub .question .a {
  margin-left: 1.875rem;
  margin-top: 2em;
  display: none;
}
@media screen and (max-width: 1000px) {
  .contact-sub .question .a {
    margin-left: 0;
  }
}
.contact-sub .question .a.active {
  display: block;
}
.contact-sub .question .a .agree-box {
  margin-top: 1.25em;
}
.contact-sub .question .a .agree-box label input:checked {
  background-color: #fff;
  border-color: #fff;
  background-image: url(../img/icon/checked-b.svg);
}
.contact-sub .question .a .tag {
  margin: 0 1.1111111111em 1.1111111111em 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  height: 3.8888888889em;
  padding: 0 2em;
  border-radius: 2em;
  border: solid 1px #ffffff;
  background-color: #ffffff;
  box-sizing: border-box;
}
@media screen and (max-width: 500px) {
  .contact-sub .question .a .tag {
    font-size: max(0.75rem, 3vw);
    height: 3.4em;
    padding: 0 1.5em;
  }
}
.contact-sub .question .a .tag span {
  display: block;
  max-width: 10em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 500px) {
  .contact-sub .question .a .tag span {
    max-width: 18em;
  }
}
.contact-sub .question .a .tag[data-type=file]:before {
  content: "";
  background: url(../img/icon/file.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.4em;
}
.contact-sub .question .a.summary .filename {
  background: url(../img/icon/file-w.svg) 0% 50% no-repeat;
  padding-left: 1.75em;
}
.contact-sub .question .a.summary .filename:empty {
  display: none;
}

.contact-answer {
  overflow: hidden;
  z-index: 4;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.contact-answer .contact-answer-inner {
  color: #000;
  background: #fff;
}
.contact-answer .progress-bar {
  background: rgba(255, 255, 255, 0.5);
  height: 5px;
  position: relative;
}
.contact-answer .progress-bar .__bar {
  background: #fcf012;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
}
.contact-answer .__inner {
  display: flex;
  align-items: flex-end;
  padding: min(5rem, 7.4vmin) 0;
}
@media screen and (max-width: 500px) {
  .contact-answer .__inner {
    flex-direction: column;
  }
}
.contact-answer .__inner .answers {
  margin-right: 6.25em;
  padding-left: 1.875em;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 1257px) {
  .contact-answer .__inner .answers {
    margin-right: 5em;
  }
}
@media screen and (max-width: 1000px) {
  .contact-answer .__inner .answers {
    padding-left: 0;
    margin-right: 50px;
  }
}
@media screen and (max-width: 500px) {
  .contact-answer .__inner .answers {
    margin-right: 0;
    margin-bottom: 2rem;
  }
}
.contact-answer .__inner .btn-next {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  padding: 2em;
  margin: -2em;
  display: block;
}
.contact-answer .__inner .btn-next svg {
  overflow: visible !important;
  display: block;
  width: auto;
  height: 4.5rem;
  box-shadow: 0px 0px 10000px transparent;
  /*trick for chrome*/
}
.contact-answer .__inner .btn-next svg path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 0.5rem;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (max-width: 1000px) {
  .contact-answer .__inner .btn-next svg {
    width: max(2rem, 4vw);
    height: auto;
  }
}
@media screen and (max-width: 500px) {
  .contact-answer .__inner .btn-next svg {
    width: max(1.5rem, 6.4vw);
    height: auto;
  }
}
@media (hover: hover) {
  .contact-answer .__inner .btn-next:hover svg path {
    stroke-width: 1.5rem;
  }
}
.contact-answer .answer-item {
  display: none;
}
.contact-answer .answer-item.active {
  display: block;
}
@media screen and (max-width: 500px) {
  .contact-answer .answer-item .option-group label {
    margin: 0 0.6em 0.6em 0;
  }
  .contact-answer .answer-item .option-group label .label {
    font-size: max(0.75rem, 3vw);
    height: 3.4em;
    padding: 0 1.5em;
  }
}

.contact-sub.contact-recruit {
  background: #02aa6c;
}
.contact-sub.contact-recruit .greeting {
  color: #ffd2d9;
}
.contact-sub.contact-recruit .progress-bar .__bar {
  background: #ffd2d9;
}

.contact-sub.contact-inquiry {
  background: #783cf9;
}