@charset "UTF-8";
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Regular.eot");
  src: url("../fonts/montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Regular.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-Regular.svg#montserrat") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Bold.eot");
  src: url("../fonts/montserrat/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/Montserrat-Bold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-Bold.svg#montserrat") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-ExtraBold.eot");
  src: url("../fonts/montserrat/Montserrat-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/Montserrat-ExtraBold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-ExtraBold.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-ExtraBold.svg#montserrat") format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EuclidSquare";
  src: url("../fonts/euclidsquare/EuclidSquare-Regular.eot");
  src: url("../fonts/euclidsquare/EuclidSquare-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/euclidsquare/EuclidSquare-Regular.woff2") format("woff2"), url("../fonts/euclidsquare/EuclidSquare-Regular.ttf") format("truetype"), url("../fonts/euclidsquare/EuclidSquare-Regular.svg#euclidsquare") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EuclidSquare-Light";
  src: url("../fonts/euclidsquare/EuclidSquare-Light.eot");
  src: url("../fonts/euclidsquare/EuclidSquare-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/euclidsquare/EuclidSquare-Light.woff2") format("woff2"), url("../fonts/euclidsquare/EuclidSquare-Light.ttf") format("truetype"), url("../fonts/euclidsquare/EuclidSquare-Light.svg#euclidsquare") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.media-link:hover i {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.btn-secondary, .label, .job-item .img, .btn-primary, .nav-menu-item {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.job-item, .burger::before, .burger::after, .burger span, .burger-btn, .nav-menu, .nav {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

:root {
  --header-height: 7.625rem;
  --logo-width: 12.5rem;
  --footer-height: 6.875rem;
  --main-color: #4163ff;
  --kv-height: 100vh;
}

.mobile {
  --header-height: 64px;
  --logo-width: 90px;
  --kv-height: 100vw;
}

html {
  font-family: "EuclidSquare", "微軟正黑體", "微软雅黑", sans-serif;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 12px;
  }
}

body {
  width: 100%;
  min-height: 100vh;
  background: white;
  -webkit-overflow-scrolling: touch;
}
body.no-scroll {
  max-height: 100vh;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a,
ul,
li {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  list-style: none;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus,
ul:focus,
li:focus {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: inherit;
}

button {
  border: none;
  background-color: transparent;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
button:focus {
  outline: none;
}

h1 {
  font-size: 0;
  display: none;
}

strong {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-weight: normal;
}

img {
  display: block;
}

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  resize: none;
}
input:focus,
textarea:focus {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

select:focus {
  outline: none;
}

main {
  width: 100%;
  overflow: hidden;
  position: relative;
  min-height: calc(100vh - var(--footer-height));
}

input,
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-width: 1px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container, .project-block {
  --width: 1500px;
  max-width: calc(var(--width) + 40px);
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}
.container.large, .large.project-block {
  --width: 1680px;
}
.mobile .container, .mobile .project-block {
  padding: 0 24px;
}

.loader-mask {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 10;
}
.loader-mask.active {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}

.loader {
  width: 60px;
  height: 60px;
  background-color: var(--main-color);
  border-radius: 100%;
  -webkit-animation: loading 1s infinite ease-in-out;
          animation: loading 1s infinite ease-in-out;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes loading {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
}

.nav-logo {
  width: var(--logo-width);
  -webkit-transition: width ease-in-out 0.3s;
  transition: width ease-in-out 0.3s;
  position: relative;
  z-index: 2;
  display: block;
  aspect-ratio: 116/42;
  position: absolute;
  top: auto;
  left: 20px;
  bottom: auto;
  background-image: url(../images/svg/logo_white.svg);
  background-size: 90%;
  background-repeat: no-repeat;
}
.nav-logo.color {
  background-image: url(../images/svg/logo.svg);
}
.mobile .nav-logo {
  width: 120px;
  position: absolute;
  top: auto;
  left: 16px;
  bottom: auto;
}

.nav {
  height: var(--header-height);
  background-color: transparent;
}
.nav .container, .nav .project-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  position: relative;
}
.nav.scroll {
  height: 5rem;
  background-color: #3f63ff;
  -webkit-box-shadow: 0px 0px 20px rgba(4, 16, 49, 0.3607843137);
          box-shadow: 0px 0px 20px rgba(4, 16, 49, 0.3607843137);
}
.nav.scroll .nav-logo {
  width: 10rem;
}
.mobile .nav.scroll {
  height: 4rem;
}
.mobile .nav.scroll .nav-logo {
  width: 105px;
}

.nav-menu {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.5625rem;
  height: 100%;
}
.mobile .nav-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(0, 0, 0, 0.95);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 2.5rem;
  gap: 8vh;
}
.mobile .nav-menu.active {
  left: 0;
}

.nav-menu-item {
  font-size: 1rem;
  line-height: 1.5rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  color: rgba(255, 255, 255, 0.8392156863);
  padding: 0 0.3125rem;
}
.nav-menu-item:hover {
  color: #fff;
}
.mobile .nav-menu-item {
  font-size: 20px;
  line-height: 31px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--main-color);
}

.burger-btn {
  height: 100%;
  z-index: 10;
  position: relative;
  --color: #fff;
}
.burger-btn.color {
  --color: var(--main-color);
}
.burger-btn.close {
  --color: #fff;
}
.burger-btn.close .burger span {
  opacity: 0;
}
.burger-btn.close .burger::before {
  width: 26px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 4px;
          transform-origin: 4px;
}
.burger-btn.close .burger::after {
  width: 26px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 2px;
          transform-origin: 2px;
}
.scroll .burger-btn {
  --color: #fff;
}

.burger {
  width: 20px;
  height: 16px;
  display: block;
  position: relative;
}
.burger span {
  background-color: var(--color);
  width: 20px;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
.burger::before, .burger::after {
  content: "";
  display: inline-block;
  background-color: var(--color);
  width: 20px;
  height: 2px;
}
.burger::before {
  position: absolute;
  top: 0;
  left: 0;
}
.burger::after {
  position: absolute;
  left: 0;
  bottom: 0;
}

footer {
  background: #31313d;
  width: 100%;
  padding: 0.9375rem 0;
  height: var(--footer-height);
  position: relative;
}
footer .container, footer .project-block {
  height: 100%;
  gap: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mobile footer {
  height: auto;
  padding: initial;
}
.mobile footer .container, .mobile footer .project-block {
  padding: 2.5rem 0;
  gap: 2.5rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.footer-text {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #f2f2f2;
  font-family: "EuclidSquare-Light";
}
.mobile .footer-text {
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.5rem;
}

.media-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6875rem;
}

.media-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3rem;
  aspect-ratio: 1/1;
  background: #3f63ff;
  border-radius: 50%;
}
.media-link i {
  color: #fff;
  font-size: 1.3125rem;
}
.media-link:hover i {
  font-size: 1.4375rem;
}

.footer-go-top {
  width: 100%;
  display: block;
  color: #fff;
  text-align: center;
  padding: 1.25rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  border-bottom: solid 1px rgba(198, 198, 198, 0.3);
}
.mobile .footer-go-top {
  font-size: 0.875rem;
}

.heading {
  font-size: 3.75rem;
  line-height: 4.375rem;
  font-weight: bold;
  font-family: "Montserrat";
  color: #333333;
  position: relative;
  margin-bottom: 2.75rem;
}
.heading strong {
  display: block;
  font-weight: inherit;
}
.heading .highlight {
  color: var(--main-color);
}
.heading.small {
  font-size: 2.125rem;
  line-height: 2.5rem;
}
.heading.deco {
  margin-bottom: 2rem;
}
.heading.deco::after {
  content: "";
  display: block;
  width: 5.875rem;
  height: 3px;
  background: var(--main-color);
  margin-top: 1.5625rem;
}
.mobile .heading {
  font-size: 2.5rem;
  line-height: 3.125rem;
  margin-bottom: 1.875rem;
}
.mobile .heading.small {
  font-size: 1.5625rem;
  line-height: 2.1875rem;
}

.text {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #333333;
}
.text.small {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: initial;
}

.txt-right {
  text-align: right;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.white {
  color: #fff;
}

.sub-heading {
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #808080;
  margin-bottom: 2.5rem;
  letter-spacing: 0.7px;
}

.txt-margin {
  margin-bottom: 1.875rem;
}

.kv {
  background: var(--main-color);
  width: 100vw;
  height: var(--kv-height);
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 0;
}
.kv > * {
  z-index: 1;
}
.kv .container, .kv .project-block {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.kv .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 0;
  min-height: 100%;
  min-width: 100%;
}
.kv .bg.opacity {
  opacity: 0.2;
}
.kv .head {
  margin-bottom: 10%;
}
.kv .content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.mobile .kv {
  padding: 5.3125rem 0 5vw;
}
.mobile .kv .head {
  margin-bottom: -1.25rem;
}
.mobile .kv .bg {
  height: 100%;
}

.kv-img {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.kv-img.about {
  width: 35%;
}
.kv-img.service {
  width: 40%;
}
.kv-img.hiring {
  width: 30%;
}
.kv-img.contact {
  width: 35%;
}
.kv-img.project {
  left: 0;
  width: 35%;
}
.mobile .kv-img {
  position: initial;
  width: 50%;
}

.kv-heading {
  text-align: center;
  font-size: 13.75rem;
  line-height: 12.5rem;
  font-weight: 800;
  white-space: nowrap;
  display: block;
  position: relative;
  color: #fff;
  font-family: "Montserrat";
  text-shadow: 0.05em 0.05em 0.2em #18255f;
  letter-spacing: 0.05em;
  --RWD-font-size: 15vw;
}

.kv-order {
  font-size: 9.375rem;
  line-height: 6.25rem;
  color: rgba(255, 255, 255, 0.49);
  letter-spacing: 0.1em;
  display: block;
  -webkit-transform: translateY(40%);
          transform: translateY(40%);
  --RWD-font-size: 8vw;
}
.mobile .kv-order {
  --RWD-font-size: 11vw;
  font-weight: normal;
}

@media screen and (max-width: 1500px) {
  .kv-heading {
    font-size: var(--RWD-font-size);
    line-height: var(--RWD-font-size);
  }
  .kv-order {
    font-size: var(--RWD-font-size);
    line-height: var(--RWD-font-size);
  }
}
.kv-text {
  text-align: right;
  letter-spacing: 0.1em;
  color: #fff;
  font-size: 1.3125rem;
  line-height: 1.5rem;
  margin-bottom: 2.375rem;
  max-width: 40%;
}
.mobile .kv-text {
  max-width: 100%;
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.375rem;
}

.divider {
  width: 5.625rem;
  height: 0.125rem;
  background: #fff;
  opacity: 0.7;
  display: block;
  margin-bottom: 2.375rem;
}
.mobile .divider {
  margin-bottom: 1.25rem;
}

.under-page {
  margin-top: var(--kv-height);
  background: #fff;
  -webkit-box-shadow: -5rem 0 5rem rgba(0, 0, 0, 0.5);
          box-shadow: -5rem 0 5rem rgba(0, 0, 0, 0.5);
  min-height: calc(var(--kv-height) - var(--footer-height));
}
.mobile .under-page {
  min-height: var(--kv-height);
}

.sec {
  padding: 8.75rem 0;
}
.mobile .sec {
  padding: 4.375rem 0;
}

.sec-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.5rem;
}
.sec-wrap > .heading {
  margin-bottom: initial;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.sec-wrap > .content {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  max-width: 56.25rem;
}
.mobile .sec-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.bg-gray {
  background: #f2f2f2;
}

@-webkit-keyframes deco-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes deco-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes deco-flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes deco-flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes deco-rounding {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes deco-rounding {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}
.btn-primary {
  font-size: 1.125rem;
  line-height: 3.375rem;
  font-weight: bold;
  border-radius: 3.125rem;
  color: #fff;
  background: #3f63ff;
  padding: 0 0.9375rem;
  text-align: center;
  min-width: 14.125rem;
  display: inline-block;
  cursor: pointer;
}
.btn-primary:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.mobile .home {
  display: block;
  padding-top: 5.375rem;
}

.home-img {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.home-img .img {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
}
.home-img img {
  height: 100%;
  min-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}
.home-img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--main-color);
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
.mobile .home-img {
  width: 100%;
  height: auto;
}
.mobile .home-img .img {
  height: auto;
}
.mobile .home-img img {
  width: 100%;
}

.home-content {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  padding: var(--header-height) 3% var(--header-height) 11%;
}
.home-content .text {
  margin-bottom: 1.125rem;
  max-width: 600px;
}
@media screen and (max-width: 1500px) {
  .home-content {
    padding: var(--header-height) 5%;
  }
}
.home-content .btns-group {
  margin-top: 3rem;
}
.mobile .home-content {
  padding: 2.125rem 5rem 3.125rem;
}
.mobile .home-content .btns-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.home-arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.125rem;
}
.home-arrow button {
  width: 3.125rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  border: solid 1px #fff;
}
.home-arrow button::after {
  content: "\e906";
  font-family: "icomoon";
  font-size: 20px;
  color: inherit;
}
.home-arrow .next::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.about-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 32.5rem;
  margin: 0 auto;
}
.about-box .heading {
  margin-bottom: 0.625rem;
}
.mobile .about-box {
  padding-left: 2.8125rem;
}

.text.deco {
  padding-left: 1.875rem;
  position: relative;
}
.text.deco::before {
  content: "\e905";
  font-family: "icomoon";
  font-size: 4.0625rem;
  color: var(--main-color);
  position: absolute;
  top: -0.625rem;
  left: -2.8125rem;
}

.about-sec {
  position: relative;
  z-index: 0;
  background: url(../images/img/img_pic_aboutus.webp) center/cover no-repeat;
  width: 100%;
  height: 37.5rem;
  margin-bottom: 6.25rem;
}
.about-sec::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(63, 99, 255, 0.4);
  z-index: 1;
}
.about-sec .container, .about-sec .project-block {
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.mobile .about-sec {
  height: 25rem;
  margin-bottom: 3.125rem;
}

.about-heading-box {
  width: 88%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3.875rem;
  line-height: 4.375rem;
  font-weight: bold;
  font-family: "Montserrat";
  color: #fff;
  background: var(--main-color);
  min-height: 18.75rem;
  border-radius: 0.875rem;
  text-align: center;
  padding: 3.125rem;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.mobile .about-heading-box {
  width: 100%;
  min-height: 6.25rem;
  font-size: 1.875rem;
  line-height: 2.5rem;
  font-weight: bold;
  border-radius: 0.625rem;
  padding: 1.875rem;
}

.marquee-sec {
  padding-bottom: initial;
  margin-bottom: -12.5rem;
  z-index: 1;
  position: relative;
}
.marquee-sec + .sec {
  padding-top: 21.25rem;
}
.mobile .marquee-sec + .sec {
  padding-top: 11.25rem;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 4.375rem;
}

.marquee-content {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: marquee 50s linear infinite;
          animation: marquee 50s linear infinite;
  width: 150%;
}
.mobile .marquee-content {
  width: 500%;
}

.marquee-img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 1.25rem;
  position: relative;
  overflow: hidden;
  padding: 0 0.3125rem;
}
.marquee-img img {
  border-radius: 1.5625rem;
  width: 100%;
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes marquee {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.service-block {
  margin-top: 4.375rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2.1875rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.1875rem;
  margin-bottom: 1.875rem;
}
.mobile .service-block {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

.service-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-radius: 1.25rem;
  background: #fff;
  -webkit-box-shadow: 0 0 20px rgba(44, 68, 175, 0.4);
          box-shadow: 0 0 20px rgba(44, 68, 175, 0.4);
  overflow: hidden;
}
.service-item .img {
  width: 30%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 8.125rem;
}
.service-item .img img {
  min-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.service-item .content {
  padding: 4.25rem 6% 4.375rem;
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}
.mobile .service-item .content {
  padding: 2.5rem 1.5625rem;
}

.job-block {
  margin-top: 4.375rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2.5rem 1fr 2.5rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.mobile .job-block {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

.job-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 1.25rem;
  background: #fff;
  -webkit-box-shadow: 0 0 20px rgba(44, 68, 175, 0.4);
          box-shadow: 0 0 20px rgba(44, 68, 175, 0.4);
  overflow: hidden;
  padding: 4.8125rem 15%;
  height: 100%;
  position: relative;
}
.job-item > * {
  z-index: 1;
}
.job-item:hover .heading strong {
  color: #fff;
}
.job-item:hover .heading::after {
  background: #fff;
}
.job-item:hover .text {
  color: #fff;
}
.job-item:hover .img {
  opacity: 1;
}
.job-item:hover .btn-primary {
  background: #fff;
  color: #3f63ff;
}
.job-item .text {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}
.job-item .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}
.job-item .img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #3f63ff;
  opacity: 0.9;
}
.job-item .img img {
  min-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.job-item .btn-primary {
  margin: 3.75rem auto 0;
}
.job-item .btn-primary:hover {
  min-width: 15.375rem;
}
.mobile .job-item {
  padding: 3.125rem;
}
.mobile .job-item .btn-primary {
  margin-top: 1.875rem;
}

.mobile .sec.hiring {
  padding-bottom: initial;
}

.contact-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5%;
}
.mobile .contact-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.875rem;
  padding: 0;
}

.contact-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mobile .contact-content {
  padding: 0 1.875rem;
}

.contact-sub-heading {
  font-size: 2.25rem;
  line-height: 2.625rem;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 1.5rem;
  font-family: "EuclidSquare-Light";
}
.mobile .contact-sub-heading {
  font-size: 1.875rem;
  line-height: 2.5rem;
}

.contact-list {
  margin-top: 2.625rem;
}
.contact-list .item {
  margin-bottom: 2.1875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  max-width: 28.75rem;
  font-family: "EuclidSquare-Light";
}
.contact-list .item.hover-type:hover .text {
  text-decoration: underline;
}
.contact-list [class^=icon-] {
  width: 2rem;
  text-align: center;
  font-size: 2rem;
  color: var(--main-color);
}
.contact-list .text {
  font-size: 1rem;
  font-weight: 600;
}

.contact-form {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: var(--main-color);
  padding: 2.8125rem 3.25rem;
  border-radius: 2.5rem;
  margin: 0 auto;
}
.mobile .contact-form {
  padding: 3.125rem 1.875rem;
  margin: 0;
  border-radius: initial;
}

.form-box {
  margin-bottom: 2.5rem;
  position: relative;
}
.mobile .form-box {
  margin-bottom: 1.25rem;
}

.textarea, .input {
  display: block;
  width: 100%;
  border: none;
  padding: 0.625rem 2.5rem 0;
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #333;
  font-family: inherit;
  border-radius: 1.875rem;
}

.input:placeholder-shown::-webkit-input-placeholder {
  opacity: 0;
}

.input:placeholder-shown::-moz-placeholder {
  opacity: 0;
}

.input:placeholder-shown:-ms-input-placeholder {
  opacity: 0;
}

.input:placeholder-shown::-ms-input-placeholder {
  opacity: 0;
}

.input:-moz-placeholder-shown::placeholder {
  opacity: 0;
}

.input:-ms-input-placeholder::placeholder {
  opacity: 0;
}

.input:placeholder-shown::placeholder {
  opacity: 0;
}
.input:-webkit-autofill + label, .input:focus + label, .input:not(:placeholder-shown) + label {
  top: 0.625rem;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
}

.input {
  height: 3.75rem;
}

.textarea {
  resize: none;
}

.label {
  position: absolute;
  top: 1.125rem;
  left: 2.5rem;
  z-index: 1;
  color: #666;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 300;
  pointer-events: none;
}

.btn-secondary {
  max-width: 15.625rem;
  display: block;
  margin-left: auto;
  width: 100%;
  height: 3.5rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: var(--main-color);
  background: #fff;
  border-radius: 1.875rem;
}
.mobile .btn-secondary {
  margin: 1.875rem auto 0;
}

.map-sec {
  max-height: 90vw;
  overflow: hidden;
}

.map-img {
  width: 100%;
}
.map-img img {
  width: 100%;
}

.project-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  overflow: hidden;
  width: 100%;
  height: 45rem;
  padding-bottom: 5.625rem;
}
.mobile .project-block {
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 0 3.125rem;
}

.project-item {
  position: relative;
  overflow: hidden;
  min-width: 3.75rem;
  margin: 0.625rem;
  background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
  background-size: auto 110%;
  background-position: center;
  cursor: pointer;
  -webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.project-item:nth-child(1) {
  --defaultBackground:gray;
}
.project-item.active {
  -webkit-box-flex: 10000;
      -ms-flex-positive: 10000;
          flex-grow: 10000;
  -webkit-transform: scale(1);
          transform: scale(1);
  margin: 0;
  border-radius: 2.5rem;
  background-size: cover;
}
.project-item.active .project-label {
  bottom: 1.25rem;
  left: 1.25rem;
}
.project-item.active .project-label .info > div {
  left: 0;
  opacity: 1;
}
.project-item:not(.active) {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border-radius: 1.875rem;
}
.project-item .shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow: inset 0 -12.5rem 12.5rem -12.5rem var(--main-color), inset 0 -12.5rem 12.5rem -6.25rem var(--main-color);
          box-shadow: inset 0 -12.5rem 12.5rem -12.5rem var(--main-color), inset 0 -12.5rem 12.5rem -6.25rem var(--main-color);
  height: 100%;
  -webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.mobile .project-item {
  height: auto;
  background-size: cover;
  aspect-ratio: 6/7;
  margin: 0 0.625rem;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.mobile .project-item.slick-active {
  -webkit-transform: initial;
          transform: initial;
}
.mobile .project-item.slick-active .project-label {
  bottom: 0.625rem;
  left: 0.625rem;
}

.project-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0.5rem;
  bottom: 0.625rem;
  -webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.project-label .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 0.625rem;
  color: white;
  white-space: pre;
}
.project-label .info > div {
  position: relative;
  left: 1.25rem;
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
.project-label .info .main {
  font-weight: bold;
  font-size: 1.2rem;
}
.project-label .info .sub {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
  font-family: "EuclidSquare-Light";
  font-size: 0.875rem;
  line-height: 1.125rem;
}
.project-label .order {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.375rem;
  line-height: 1.625rem;
  font-weight: Bold;
  color: var(--main-color);
  min-width: 2.8125rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 100%;
  background-color: white;
  font-family: "Montserrat";
}