html,
body {
  padding: 0;
  margin: 0; }

.floor_system {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden; }
  .floor_system__mask {
    position: relative;
    width: 100%;
    height: 100vh;
    opacity: 1;
    pointer-events: none;
    overflow: hidden;
    background-attachment: fixed; }
    .floor_system__mask-group {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 100vh; }
    .floor_system__mask-light {
      z-index: 11;
      mix-blend-mode: soft-light;
      -webkit-filter: blur(15px);
              filter: blur(15px); }
    .floor_system__mask-shadow {
      z-index: 9;
      mix-blend-mode: soft-light;
      -webkit-filter: blur(4px);
              filter: blur(4px); }
    .floor_system__mask-main {
      -webkit-filter: drop-shadow(0px 7px 16px rgba(34, 34, 34, 0.5));
              filter: drop-shadow(0px 7px 16px rgba(34, 34, 34, 0.5));
      position: absolute;
      width: 100%;
      height: 100vh;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover; }
  .floor_system__floor {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-perspective: 1px;
            perspective: 1px;
    -webkit-perspective-origin: center center;
            perspective-origin: center center; }
    .floor_system__floor-bg {
      position: relative;
      width: 50%;
      height: 100%;
      overflow: hidden;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d; }
      .floor_system__floor-bg:nth-child(1) {
        width: 100%; }
      .floor_system__floor-bg:last-child {
        width: 0%; }
        .floor_system__floor-bg:last-child .floor_system__floor-bg_body {
          left: auto;
          top: 0;
          right: 0; }
      .floor_system__floor-bg_body {
        position: absolute;
        left: 0;
        top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100vw;
        background-color: transparent;
        overflow: hidden;
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0vw, 0px) scaleX(1) scaleY(1);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0vw, 0px) scaleX(1) scaleY(1);
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
        z-index: 5; }
        .floor_system__floor-bg_body ol {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
          height: 100vh;
          width: 9.09091vw;
          list-style-type: none;
          padding: 0;
          margin: 0; }
          .floor_system__floor-bg_body ol:nth-child(2n) {
            -webkit-transform: translateY(70.3vw) scaleY(-1);
                -ms-transform: translateY(70.3vw) scaleY(-1);
                    transform: translateY(70.3vw) scaleY(-1); }
          .floor_system__floor-bg_body ol:nth-child(3n) {
            -webkit-transform: translateY(0%);
                -ms-transform: translateY(0%);
                    transform: translateY(0%); }
          .floor_system__floor-bg_body ol:nth-child(5n) {
            -webkit-transform: translateY(0%);
                -ms-transform: translateY(0%);
                    transform: translateY(0%); }
          .floor_system__floor-bg_body ol:nth-child(7n) {
            -webkit-transform: translateY(70.3vw) scaleY(-1);
                -ms-transform: translateY(70.3vw) scaleY(-1);
                    transform: translateY(70.3vw) scaleY(-1); }
          .floor_system__floor-bg_body ol li {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            min-height: 75.75758vw;
            width: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%; }
  .floor_system__control {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 60px;
    height: auto;
    background-color: seashell;
    z-index: 20;
    border-radius: 3px; }
    @media only screen and (max-width: 992px) {
      .floor_system__control {
        height: 100vh; } }
    .floor_system__control-btn {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 100%;
      height: 60px;
      border: none;
      cursor: pointer; }
      .floor_system__control-btn:active, .floor_system__control-btn:focus {
        outline: 0 transparent;
        -webkit-box-shadow: none;
                box-shadow: none; }
      .floor_system__control-btn img {
        width: 70%;
        height: auto; }
      @media only screen and (max-width: 992px) {
        .floor_system__control-btn {
          height: 16.6667%; } }
    .floor_system__control_modal {
      display: none;
      position: absolute;
      left: calc(100% + 2px);
      top: 0;
      width: 60vw;
      height: 24.3vw;
      background-color: white;
      -webkit-box-shadow: 5px 5px 15px #222222;
              box-shadow: 5px 5px 15px #222222;
      overflow-y: auto;
      padding-bottom: 40px;
      padding: 1.5625vw; }
      @media only screen and (max-width: 992px) {
        .floor_system__control_modal {
          height: 94vh;
          width: calc(100vw - 82px); } }
      .floor_system__control_modal__list {
        position: relative;
        z-index: 3; }
        .floor_system__control_modal__list_title {
          width: 100%;
          padding: 5px;
          color: #fff;
          background-color: rgba(34, 34, 34, 0.5); }
          @media only screen and (max-width: 992px) {
            .floor_system__control_modal__list_title {
              font-size: 10px; } }
        .floor_system__control_modal__list_items {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
                  flex-wrap: wrap; }
          .floor_system__control_modal__list_items .btn {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
                -ms-flex-pack: center;
                    justify-content: center;
            width: 16.667%;
            height: 6.98611vw;
            margin-bottom: 10px;
            cursor: pointer;
            border: 1px solid rgba(34, 34, 34, 0.2);
            padding: 0; }
            @media only screen and (max-width: 992px) {
              .floor_system__control_modal__list_items .btn {
                height: 15.5vw; } }
            .floor_system__control_modal__list_items .btn:focus {
              outline: 0 transparent; }
            .floor_system__control_modal__list_items .btn2 {
              padding: 0; }
            .floor_system__control_modal__list_items .btn.active::after {
              content: "CHECK";
              font-size: 16px;
              color: #fff;
              position: absolute;
              top: 10px;
              right: 10px;
              text-shadow: 1px 1px 3px #222; }
          .floor_system__control_modal__list_items .img {
            width: 100%;
            height: 100%;
            margin-bottom: 10px; }
          .floor_system__control_modal__list_items .btn,
          .floor_system__control_modal__list_items .img {
            background-size: cover; }
      .floor_system__control_modal__bg {
        position: fixed;
        left: 0;
        top: -50%;
        width: 100%;
        height: 100vh;
        z-index: 0;
        pointer-events: none; }
      .floor_system__control_modal__control {
        margin-bottom: 30px; }
      .floor_system__control_modal__swiper {
        width: 100%;
        height: calc(100% - 74px); }
        .floor_system__control_modal__swiper .swiper-pagination-bullet-active {
          background-color: #222; }
      .floor_system__control_modal-info_top {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 2vw; }
      .floor_system__control_modal-info_img {
        width: 16.667%;
        height: 6.98611vw;
        margin-right: 2vw; }
        .floor_system__control_modal-info_img > div {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat; }
      .floor_system__control_modal-info_title {
        position: relative;
        margin-bottom: 0.5vw;
        font-size: 20px; }
        .floor_system__control_modal-info_title > span:nth-child(2) {
          margin: 0 1vw; }
        .floor_system__control_modal-info_title > button {
          position: relative;
          display: inline-block;
          margin-left: 3vw;
          text-decoration: none;
          font-size: 12px;
          color: #222;
          padding-bottom: 0.1vw;
          border: none;
          outline: 0 transparent;
          border-bottom: 1px solid #222;
          bottom: 0.1vw;
          letter-spacing: 1px;
          cursor: pointer;
          background-color: transparent; }
          .floor_system__control_modal-info_title > button:hover {
            color: #222;
            text-decoration: none; }
      .floor_system__control_modal-info_sub {
        font-size: 14px;
        list-style: inside; }
        .floor_system__control_modal-info_sub > i {
          margin: 0 0.5vw; }
      .floor_system__control_modal-info_table {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap; }
        .floor_system__control_modal-info_table__title {
          width: 100%;
          font-size: 18px;
          margin-bottom: 1vw;
          font-weight: bold; }
        .floor_system__control_modal-info_table__item {
          width: calc(50% - 0.5vw);
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-right: 1vw;
          padding-bottom: 1vw;
          padding-top: 1vw;
          border-bottom: 1px solid #222; }
          .floor_system__control_modal-info_table__item:hover {
            background-color: #22222230; }
          .floor_system__control_modal-info_table__item:nth-child(2n) {
            margin-right: 0; }
        .floor_system__control_modal-info_table__th {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          width: 15vw;
          padding-right: 1vw;
          padding-left: 0.5vw;
          white-space: pre-wrap;
          font-size: 14px;
          font-weight: 600; }
        .floor_system__control_modal-info_table__td {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
              -ms-flex-pack: center;
                  justify-content: center;
          width: 15.6vw;
          padding-right: 0.5vw;
          font-size: 12px;
          text-align: center; }
  .floor_system__slider {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    position: absolute;
    left: 0;
    top: -350px;
    width: 100%;
    height: 350px;
    z-index: 100;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .floor_system__slider.active {
      top: 0; }
      .floor_system__slider.active .floor_system__slider_btn {
        top: 350px; }
    .floor_system__slider_input {
      width: 30%;
      padding: 10px 20px; }
      .floor_system__slider_input_t {
        width: 100%; }
        .floor_system__slider_input_t span:first-child {
          margin-right: 20px; }
      .floor_system__slider_input_s {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%; }
        .floor_system__slider_input_s input {
          width: 100%; }
          .floor_system__slider_input_s input:focus {
            outline: 0 transparent; }
        .floor_system__slider_input_s .slider {
          width: 100%; }
        .floor_system__slider_input_s .radio {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          width: 20%; }
    .floor_system__slider_btn {
      padding: 10px;
      position: fixed;
      text-align: center;
      top: 0px;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 200px;
      background-color: #fff;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      z-index: 30;
      -webkit-transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
      -o-transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); }
  .floor_system__button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 100px;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #222;
    opacity: 0.5;
    cursor: pointer; }
    .floor_system__button img {
      height: 40%;
      width: auto; }
  .floor_system__zoom {
    display: none;
    position: absolute;
    top: 10%;
    right: 10%;
    width: 13.88889vw;
    height: 13.88889vh;
    border: 2px solid #fff;
    z-index: 40;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover; }
    @media only screen and (max-width: 1000px) {
      .floor_system__zoom {
        width: 27.77778vw;
        height: 27.77778vh; } }
    .floor_system__zoom.active {
      display: block; }
  .floor_system__rotate {
    left: 50%;
    bottom: 3%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    display: none;
    position: absolute;
    width: 80px;
    mix-blend-mode: color-dodge;
    -webkit-animation: fadeOut_delay 0.6s ease-out 30s forwards;
            animation: fadeOut_delay 0.6s ease-out 30s forwards; }
    @media only screen and (max-width: 1000px) {
      .floor_system__rotate {
        display: block; } }
    .floor_system__rotate img {
      width: 100%;
      height: auto; }
  .floor_system__warn {
    font-size: 12px;
    position: fixed;
    bottom: 20px;
    right: 20px; }
    @media only screen and (max-width: 1000px) {
      .floor_system__warn {
        font-size: 10px;
        bottom: 10px;
        right: 10px; } }

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  width: 6.94444vw;
  height: 6.94444vh;
  background-color: rgba(34, 34, 34, 0.4);
  cursor: -webkit-grab;
  cursor: grab; }
  @media only screen and (max-width: 1000px) {
    .img-zoom-lens {
      width: 13.88889vw;
      height: 13.88889vh; } }

#mask_0 > div {
  top: 0;
  left: 0;
  background-position: left center; }

#mask_1 {
  width: 0; }
  #mask_1 > div {
    top: 0;
    right: 0;
    background-position: right center; }

.gutter-horizontal {
  position: relative;
  z-index: 30; }
  @media only screen and (max-width: 1000px) {
    .gutter-horizontal {
      width: 10px !important; } }

.modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  cursor: pointer; }

@-webkit-keyframes fadeOut_delay {
  to {
    opacity: 0; } }

@keyframes fadeOut_delay {
  to {
    opacity: 0; } }

.env-img-holder {
  position: absolute;
  left: 0;
  bottom: 9999px;
  opacity: 0; }