:root {
  --size-hd: 10rem;
  --pd-sc: 8rem;
  --rs: 0.8rem;
  --transition: 0.6s calc(var(--char-index) * 0.02s) ease-in-out;
  --recontainer: calc(100vw - (100vw - 120rem) / 2);
  --half: calc((100vw - 120rem) / 2);
  --color-text: #0a0a0a;
  --color-pri: #36624c;
  --color-second: #000000;
  --sdow: 0px 2px 4px rgba(0, 0, 0, 0.2); }

@media (max-width: 1200px) {
  :root {
    --pd-sc: 4rem;
    --radius: 0.8rem;
    --size-hd: 6rem; } }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media screen and (min-width: 2000px) {
    html {
      font-size: 100%; } }

body {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text);
  overflow: hidden auto; }
  @media screen and (min-width: 2000px) {
    body {
      font-size: 20px; } }

a {
  text-decoration: none;
  color: inherit; }

button,
select {
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: "Be Vietnam Pro", sans-serif; }

button {
  padding: 0;
  background-color: transparent;
  cursor: pointer; }

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Be Vietnam Pro", sans-serif; }

.main {
  min-height: 68vh;
  padding-top: var(--size-hd); }

.container {
  width: 100%;
  max-width: 124.8rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.6rem; }

.over {
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory; }
  .over::-webkit-scrollbar {
    display: none; }

.no-scroll {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none; }

iframe {
  vertical-align: middle; }

.load-item {
  display: none; }

.show-hide-toggle {
  cursor: pointer; }

img {
  max-width: 100%;
  border-radius: inherit;
  height: auto; }

.global-title {
  max-width: 0;
  max-height: 0;
  opacity: 0;
  visibility: hidden; }

.future,
.construction,
.diff {
  position: relative; }
  .future::before, .future::after,
  .construction::before,
  .construction::after,
  .diff::before,
  .diff::after {
    position: absolute;
    content: "";
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--gray-gray-100, #e0e0e0);
    z-index: -1; }
  .future::before,
  .construction::before,
  .diff::before {
    left: calc(var(--half) - 1.1rem); }
    @media screen and (max-width: 1250px) {
      .future::before,
      .construction::before,
      .diff::before {
        left: 1.6rem; } }
  .future::after,
  .construction::after,
  .diff::after {
    right: calc(var(--half) - 1.1rem); }
    @media screen and (max-width: 1250px) {
      .future::after,
      .construction::after,
      .diff::after {
        right: 1.6rem; } }

.future .container {
  position: relative; }
  .future .container .decor {
    position: absolute;
    content: "";
    top: calc(var(--pd-sc) * -1);
    right: 1.6rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content; }
    .future .container .decor .icon {
      height: 30rem;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      background-color: var(--color-pri);
      padding: 2.8rem;
      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: end;
      -ms-flex-pack: end;
      justify-content: end;
      margin-bottom: 5rem; }
    .future .container .decor .icon img {
      width: 6.4rem;
      height: 6.4rem; }
    @media screen and (max-width: 1100px) {
      .future .container .decor .icon {
        height: 13rem; } }
    @media screen and (max-width: 800px) {
      .future .container .decor .icon {
        margin-bottom: 2rem; } }
    @media screen and (max-width: 670px) {
      .future .container .decor .icon {
        padding: 1rem;
        height: unset;
        margin-bottom: 1rem; }
      .future .container .decor .icon img {
        width: 3rem;
        height: 3rem; } }

.future .title-big {
  margin-bottom: 1.6rem;
  letter-spacing: -1.44px; }
  @media screen and (max-width: 800px) {
    .future .title-big {
      margin-bottom: calc(1.6rem / 2); } }

.future .title-des {
  position: relative;
  margin-bottom: 4.8rem;
  letter-spacing: -0.48px; }
  @media screen and (max-width: 800px) {
    .future .title-des {
      margin-bottom: calc(4.8rem / 2); } }
  @media screen and (max-width: 585px) {
    .future .title-des br {
      display: none; } }

.future .title-big,
.future .title-des {
  text-align: center; }

@media screen and (max-width: 800px) {
  .future-wr.row {
    --rg: 1.6rem;
    --cg: 1.6rem; } }

@media screen and (max-width: 800px) {
  .future-item {
    width: calc(100% / 2); } }

@media screen and (max-width: 500px) {
  .future-item {
    width: 100%; } }

.future-item-wr {
  position: relative; }
  .future-item-wr .image-inner {
    display: block;
    padding-top: calc((288 / 384) * 100%);
    position: relative;
    overflow: hidden; }
    .future-item-wr .image-inner::before {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
      z-index: 1; }
    .future-item-wr .image-inner img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      -webkit-transition: 0.3s;
      transition: 0.3s; }
    @media screen and (min-width: 1025px) {
      .future-item-wr .image-inner:hover img {
        -webkit-transform: translate(-50%, -50%) scale(1.1);
        transform: translate(-50%, -50%) scale(1.1); } }
  .future-item-wr .tt {
    width: 100%;
    position: absolute;
    content: "";
    bottom: 1.6rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0 1.6rem;
    z-index: 2;
    color: var(--White, #fff);
    text-align: center;
    font-size: clamp(1.6rem, calc(1.5091rem + 0.4545vw), 2rem);
    font-weight: 600;
    letter-spacing: -0.6px;
    -webkit-transition: 0.3s;
    transition: 0.3s; }
    @media screen and (min-width: 1025px) {
      .future-item-wr .tt:hover {
        opacity: 0.6; } }

.construction .title-big {
  margin-bottom: 6rem;
  text-align: center; }
  @media screen and (max-width: 800px) {
    .construction .title-big {
      margin-bottom: calc(6rem / 2); } }

.construction-wr.row {
  --cg: 11.4rem;
  --rg: 11.4rem; }
  @media screen and (max-width: 1200px) {
    .construction-wr.row {
      --cg: 4.8rem;
      --rg: 4.8rem; } }
  @media screen and (max-width: 800px) {
    .construction-wr.row {
      --cg: 3.2rem;
      --rg: 3.2rem; } }
  @media screen and (max-width: 500px) {
    .construction-wr.row {
      --cg: 1.6rem;
      --rg: 1.6rem; }
      .construction-wr.row .col {
        width: 100%; } }

.construction-item-wr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }
  .construction-item-wr .image {
    margin-bottom: 2.4rem;
    position: relative; }
    @media screen and (max-width: 800px) {
      .construction-item-wr .image {
        margin-bottom: calc(2.4rem / 2); } }
    .construction-item-wr .image-inner {
      display: block;
      padding-top: calc((485 / 550) * 100%);
      position: relative;
      overflow: hidden;
      width: 80%; }
      .construction-item-wr .image-inner img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .construction-item-wr .image .image2 {
      position: absolute;
      content: "";
      top: 4rem;
      right: 0;
      width: 45%;
      z-index: 1;
      -webkit-transition: 0.4s ease;
      transition: 0.4s ease;
      -webkit-box-shadow: 0px 59.057px 118.114px 0px rgba(52, 64, 84, 0.18);
      box-shadow: 0px 59.057px 118.114px 0px rgba(52, 64, 84, 0.18); }
      .construction-item-wr .image .image2::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        top: -0.75rem;
        left: -0.75rem;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background: #36624c; }
      .construction-item-wr .image .image2-inner {
        display: block;
        padding-top: calc((336 / 261) * 100%);
        position: relative;
        overflow: hidden;
        position: relative; }
        .construction-item-wr .image .image2-inner img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover; }
  .construction-item-wr .content .tt {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--gray-900, #0a0a0a);
    font-size: clamp(1.6rem, calc(1.5091rem + 0.4545vw), 2rem);
    font-weight: 600;
    letter-spacing: -0.6px;
    text-wrap: pretty;
    -webkit-transition: 0.3s;
    transition: 0.3s; }
    @media screen and (min-width: 1025px) {
      .construction-item-wr .content .tt:hover {
        color: var(--color-pri); } }
  .construction-item-wr .content .des {
    color: var(--gray-500, #666);
    font-size: 1.6rem;
    font-size: clamp(1.6rem, calc(1.2364rem + 1.8182vw), 1.6rem);
    font-weight: 300;
    letter-spacing: -0.48px;
    text-wrap: pretty;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }

@media screen and (min-width: 501px) {
  .construction-item:nth-child(even) {
    margin-top: 6.4rem; } }
  @media screen and (min-width: 501px) and (max-width: 800px) {
    .construction-item:nth-child(even) {
      margin-top: calc(6.4rem / 2); } }

@media screen and (min-width: 501px) {
    .construction-item:nth-child(even) .construction-item-wr {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
      .construction-item:nth-child(even) .construction-item-wr .image {
        margin-bottom: unset;
        margin-top: 2.4rem; } }
      @media screen and (min-width: 501px) and (max-width: 800px) {
        .construction-item:nth-child(even) .construction-item-wr .image {
          margin-top: calc(2.4rem / 2); } }

.diff .title-big,
.diff .title-des {
  text-align: center; }
  @media screen and (max-width: 695px) {
    .diff .title-big br,
    .diff .title-des br {
      display: none; } }

.diff .title-big {
  margin-bottom: 1.6rem;
  color: var(--gray-gray-900, #0a0a0a);
  font-size: clamp(2.4rem, calc(1.8545rem + 2.7273vw), 4.8rem);
  font-weight: 600;
  letter-spacing: -1.44px; }
  @media screen and (max-width: 800px) {
    .diff .title-big {
      margin-bottom: calc(1.6rem / 2); } }

.diff .title-des {
  margin-bottom: 4.8rem; }
  @media screen and (max-width: 800px) {
    .diff .title-des {
      margin-bottom: calc(4.8rem / 2); } }

.diff-item {
  position: relative;
  background: #2f2e2e;
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
  padding-left: 4.8rem;
  padding-right: 1.2rem; }
  .diff-item:not(:last-child) {
    margin-bottom: 2rem; }
    @media screen and (max-width: 800px) {
      .diff-item:not(:last-child) {
        margin-bottom: calc(2rem / 2); } }
  @media screen and (max-width: 800px) {
    .diff-item {
      padding-top: calc(4.8rem / 2); } }
  @media screen and (max-width: 800px) {
    .diff-item {
      padding-bottom: calc(4.8rem / 2); } }
  @media screen and (max-width: 800px) {
    .diff-item {
      padding-left: calc(4.8rem / 2); } }
  @media screen and (max-width: 800px) {
    .diff-item {
      padding-right: calc(1.2rem / 2); } }
  @media screen and (max-width: 800px) {
    .diff-item {
      padding-right: 2.4rem; } }

.diff-item-wr.row {
  --cg: 6rem;
  --rg: 6rem; }
  @media screen and (max-width: 800px) {
    .diff-item-wr.row {
      --cg: 3.2rem;
      --rg: 3.2rem; } }
  @media screen and (max-width: 700px) {
    .diff-item-wr.row {
      --cg: 1.6rem;
      --rg: 1.6rem;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .diff-item-wr.row .col {
        width: 100%; } }

.diff-lf {
  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; }
  .diff-lf .tt {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: var(--White, #fff);
    font-size: clamp(1.8rem, calc(1.5727rem + 1.1364vw), 2.8rem);
    font-weight: 400;
    text-wrap: pretty;
    letter-spacing: -0.84px;
    -webkit-transition: 0.3s;
    transition: 0.3s; }
    @media screen and (min-width: 801px) {
      .diff-lf .tt {
        position: absolute;
        content: "";
        top: 50%;
        left: 4.8rem;
        float: left;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translateX(-50%);
        transform: rotate(270deg) translateX(-50%);
        text-orientation: sideways;
        text-wrap: nowrap; } }
  @media screen and (min-width: 801px) and (max-width: 800px) {
    .diff-lf .tt {
      left: 1.2rem; } }
    @media screen and (min-width: 1025px) {
      .diff-lf .tt:hover {
        opacity: 0.8; } }
  @media screen and (min-width: 801px) {
    .diff-lf .des {
      padding-left: 8.2rem; } }
  @media screen and (min-width: 801px) and (max-width: 800px) {
    .diff-lf .des {
      padding-left: calc(8.2rem / 2); } }
  .diff-lf .des .mona-content p {
    color: var(--White, #fff);
    font-size: clamp(1.4rem, calc(1.2364rem + 1.8182vw), 1.4rem);
    font-weight: 300;
    letter-spacing: -0.42px; }

.diff-rt .image-inner {
  display: block;
  padding-top: calc((584 / 818) * 100%);
  position: relative;
  overflow: hidden; }
  .diff-rt .image-inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: 0.3s;
    transition: 0.3s; }

@media screen and (min-width: 1025px) {
  .diff-rt .image:hover img {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1); } }

.page-d-project {
  overflow: hidden; }
  .page-d-project .tt,
  .page-d-project .title-big,
  .page-d-project .title-small,
  .page-d-project .title-sub,
  .page-d-project .title-des {
    text-wrap: pretty; }
  .page-d-project .sec-space .title-big {
    margin-bottom: 1.6rem; }
    @media screen and (max-width: 800px) {
      .page-d-project .sec-space .title-big {
        margin-bottom: calc(1.6rem / 2); } }
    @media screen and (max-width: 402px) {
      .page-d-project .sec-space .title-big br {
        display: none; } }
  @media screen and (max-width: 1026px) {
    .page-d-project .sec-space .title-des br {
      display: none; } }
  .page-d-project .sec-space .ab-space .ser-fea-item .inner {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start; }
  .page-d-project .sec-space .ser-fea-item .inner .tt {
    text-align: left; }
  .page-d-project .sec-space .ser-fea-item .inner .des {
    text-align: left; }
    @media screen and (max-width: 679px) {
      .page-d-project .sec-space .ser-fea-item .inner .des br {
        display: none; } }
  @media screen and (max-width: 500px) {
    .page-d-project .sec-space .ser-fea-item {
      width: 100%; } }
  @media screen and (max-width: 800px) {
    .page-d-project .sec-space .ab-space-ctn .title-des {
      opacity: 1;
      -webkit-transform: unset;
      transform: unset; } }
  .page-d-project .sec-space .homes-video-wr {
    margin-bottom: 10rem; }
    @media screen and (max-width: 800px) {
      .page-d-project .sec-space .homes-video-wr {
        margin-bottom: calc(10rem / 2); } }
  .page-d-project .sec-space .ab-space .sec-fea {
    margin-top: unset; }
  .page-d-project .ab-space-bn .bg {
    pointer-events: none;
    z-index: -1; }
  @media screen and (max-width: 800px) {
    .page-d-project .ab-space-ctn {
      padding-bottom: 14rem; } }

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