body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background: #FFFFFF;
   font-family: 'Satoshi', Helvetica, Arial, 'sans-serif';
   font-weight: 200;
   letter-spacing: 1px;
   color: #46494b;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
 }
*, *::before, *::after {
  box-sizing: inherit;
}
 div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 img {
   width: 100%;
   border: 0;
 }
 h1 {
   font-size: 32px;
   font-weight: 200;
   margin: -10px 0 0 0;
 }
 h2 {
   font-size: 20px;
   font-weight: 200;
   margin: 4px 16px 0 16px;
 }
 p {
   font-size: 14px;
   margin: 32px 0 0 0;
   line-height: 28px;
 }
 span {
   font-weight: 400;
 }
 .details {
   margin: 14px 0 0 0;
 }
 .legal {
   font-size: 12px;
   margin: 0 0 0 0;
   line-height: 16px;
 }
 .motion_button_container {
   position: fixed;
   top: 40%;
   left: 0;
   right: 0;
   z-index: 1000;
   margin: 0 24px 0 24px;
   padding: 8px 0 0 0;
   background-image: url("images/stripe.svg");
   background-size: 16px;
   background-color: #FFFFFF;
   background-repeat: repeat;
   cursor: pointer;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   transition: opacity 0.3s ease;
 }
 .motion_button_inner {
   padding: 12px 0 0 0;
   background: #FFFFFF;
   color: #46494b;
   text-align: center;
 }
 .button_wrapper {
   display: flex;
   justify-content: center;
 }
 .motion_button_inner p {
   font-size: 12px !important;
   margin: 8px 16px 0 16px !important;
   line-height: 16px !important;
 }
 #motion_yes {
   font-size: 14px;
   width: 50%;
   margin: 16px 0 0 0;
   padding: 12px;
   border: 0;
   color: #ffffff;
   background-color: #5dd20a;
 }
 #motion_no {
   font-size: 14px;
   width: 50%;
   margin: 16px 0 0 0;
   padding: 12px;
   border: 0;
   color: #ffffff;
   background-color: #ff3b45;
 }
 .alert_icon {
   width: 48px;
   margin: 0 auto;
 }
 .header_wrapper {
   width: 100%;
   padding: 24px 0 22px 0;
   position: fixed;
   top: 0;
   background-color: #FFFFFF;
   z-index: 1000;
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
 }
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 90%;
   max-width: 1700px;
   margin: 0 auto;
   padding: 0 2rem 0 2rem;
 }
 .left_group, .right_group {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 .logo {
   display: inline-block;
   vertical-align: middle;
   width: 52px !important;
   margin: 0 auto 0 0;
 }
 .cta_back {
   position: relative;
   top: -1px;
   display: inline-block;
   vertical-align: middle;
   margin: 0 0 0 32px;
   color: #46494b;
   font-size: 12px;
   text-decoration: none !important;
 }
 .cta_back::before {
   content: "";
   position: absolute;
   top: 4px;
   left: -16px;
   height: 8px;
   width: 8px;
   background-image: url("images/icon_back.svg");
   background-size: contain;
   background-repeat: no-repeat;
 }
 .cta_cv {
   position: relative;
   top: -1px;
   display: inline-block;
   vertical-align: middle;
   margin: 0 16px 0 0;
   color: #46494b;
   font-size: 12px;
   text-decoration: none !important;
 }
 .cta_cv::after {
   content: "";
   position: absolute;
   top: 4px;
   right: -16px;
   height: 8px;
   width: 8px;
   background-image: url("images/icon_cv_download.svg");
   background-size: contain;
   background-repeat: no-repeat;
 }
 .main {
   width: 90%;
   max-width: 1700px;
   display: flex;
   flex-wrap: wrap;
   gap: 3%;
   margin: 160px auto 80px auto;
   padding: 0 2rem 0 2rem;
 }
 .main_left {
   position: relative;
   width: 22%;
   margin: 0;
 }
 .footer_sub {
   position: absolute;
   bottom: 0;
   margin: 0 auto -4px 0 !important;
 }
 .main_right {
   width: 75%;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 2rem;
 }
 .column_1 {
   grid-column: span 4;
   position: relative;
   overflow: hidden;
 }
 .column_2 {
   grid-column: span 8;
   position: relative;
   overflow: hidden;
 }
 .column_3 {
   grid-column: span 12;
   position: relative;
   overflow: hidden;
 }
 .column_1 img {
   display: block;
   width: 100%;
   height: auto;
 }
 .inner_shad {
   position: relative;
   overflow: hidden;
 }
 .inner_shad::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 2;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05) inset;
 }
 .square {
   aspect-ratio: 1 / 1;
 }
 .square_2 {
   aspect-ratio: 2 / 0.958;
 }
 .vh50 {
   height: 50vh;
   min-height: 480px;
 }
 .vh25 {
   height: 25vh;
   min-height: 240px;
 }
 .scroll {
   overflow-y: scroll;
   cursor: all-scroll;
 }
 .project_label {
   min-width: 100px;
   margin: 0 auto 0 0;
   font-family: 'Satoshi', Helvetica, Arial, 'sans-serif';
   font-weight: 400;
   z-index: 900;
   position: absolute;
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
   top: 0;
   right: 0;
 }
 .project_label::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 6px;
   height: 100%;
   background-image: url("images/stripe.svg");
   background-size: 16px;
   background-color: #FFFFFF;
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
 }
 .project_label p {
   font-size: 12px !important;
   line-height: 16px;
   margin: 1px 0 0 0;
 }
 .project_type {
   padding: 4px 8px 5px 14px;
   background: #FFFFFF;
   font-size: 12px !important;
   z-index: 900;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1) inset;
 }
 .project_action {
   padding: 3px 8px 5px 15px;
   background: rgba(70, 73, 75, 0.8);
   font-size: 8px !important;
   color: #FFFFFF;
   z-index: 800;
 }
 .project_action p {
   font-size: 8px !important;
   line-height: 12px;
   margin: 1px 0 0 0;
 }
 .scroller::after {
   content: "";
   position: absolute;
   top: 32px;
   right: 9px;
   height: 8px;
   width: 8px;
   background-image: url("images/icon_scroll.svg");
   background-size: contain;
   background-repeat: no-repeat;
 }
 .enlarge::after {
   content: "";
   position: absolute;
   top: 32px;
   right: 8px;
   height: 8px;
   width: 8px;
   background-image: url("images/icon_enlarge.svg");
   background-size: contain;
   background-repeat: no-repeat;
 }
 .download::after {
   content: "";
   position: absolute;
   top: 32px;
   right: 8px;
   height: 8px;
   width: 8px;
   background-image: url("images/icon_download.svg");
   background-size: contain;
   background-repeat: no-repeat;
 }
 .image_desktop {
   display: block;
 }
 .image_mobile {
   display: none;
 }
 .col_l2 {
   width: 50%;
   margin: 0;
 }
 .grid {
   width: 90%;
   max-width: 1700px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8%;
   margin: 204px auto 0 auto;
   padding: 0 50px 80px 50px;
 }
 .scene_wrapper {
   width: 19%;
   aspect-ratio: 5 / 9;
   perspective: 1000px;
 }
 .project_scene_wrapper {
   width: 100%;
   height: auto;
   perspective: 1000px;
 }
 .scene_wrapper_main {
   width: 100%;
   height: auto;
   perspective: 1000px;
 }
 .scene {
   display: block;
   width: 100%;
   position: relative;
   transform-style: preserve-3d;
   transform-origin: center;
   transition: transform 0.1s ease-out;
   transform-style: preserve-3d;
 }
 .layer {
   width: 100%;
   height: 100%;
   position: absolute;
   transform-style: preserve-3d;
   top: 0;
   left: 0;
 }
 .L0 {
   transform: translateZ(0em);
 }
 .L1 {
   transform: translateZ(2em);
 }
 .L2 {
   transform: translateZ(4em);
 }
 .L3 {
   transform: translateZ(6em);
 }
 .L4 {
   transform: translateZ(8em);
 }
 .L5 {
   transform: translateZ(10em);
 }
 .align_cent {
   text-align: center;
 }
 .footer_home, .footer_sub, .footer_sub_mobile {
   text-align: center;
   margin: 0 0 40px 0;
 }
 .footer_home p, .footer_sub p, .footer_sub_mobile p {
   font-size: 12px !important;
   line-height: 16px !important;
 }
 .footer_sub_mobile {
   display: none;
 }
 @media only screen and (max-width: 1500px) {
   h1 {
     font-size: 32px;
   }
   p {
     font-size: 14px;
     margin: 21px 0 0 0;
     line-height: 24px;
   }
 }
 @media only screen and (max-width: 1300px) {
   h1 {
     font-size: 24px;
   }
   h2 {
     font-size: 20px;
   }
   p {
     font-size: 12px;
     margin: 18px 0 0 0;
     line-height: 21px;
   }
   .grid {
     gap: 12%;
   }
   .scene_wrapper {
     width: 25.33%;
   }
 }
 @media only screen and (max-width: 1000px) {
   .column_1 {
     grid-column: span 12;
   }
   .column_2 {
     grid-column: span 12;
   }
   .vh50 {
     height: 25vh;
     min-height: 240px;
   }
   .vh25 {
     height: 25vh;
     min-height: 240px;
   }
 }
 @media only screen and (max-width: 900px) {
   .header {
     padding: 0 0 0 0;
   }
   .main {
     padding: 0 0 0 0;
     margin: 120px auto 40px auto;
   }
   .grid {
     gap: 18%;
   }
   .main_left {
     width: 100%;
     padding-bottom: 48px;
   }
   .main_right {
     width: 100%;
	 gap: 24px;
   }
   .scene_wrapper {
     width: 41%;
   }
   .column_1 {
     grid-column: span 4;
   }
   .column_2 {
     grid-column: span 8;
   }
   .image_desktop {
     display: none;
   }
   .image_mobile {
     display: block;
   }
   .footer_sub {
     display: none;
   }
   .footer_sub_mobile {
     display: block;
	 margin: 62px auto 0 auto;
   }
 }
 @media only screen and (max-width: 620px) {
   .cta_back {
     margin: 0 0 0 2rem;
   }
   .grid {
     margin: 144px auto 0 auto;
   }
   .main_right {
    grid-template-columns: 1fr;
   }
   .scene_wrapper {
     width: 100%;
     aspect-ratio: 5 / 8;
   }
   .column_1 {
     grid-column: span 1;
   }
   .column_2 {
     grid-column: span 1;
   }
   .column_3 {
     grid-column: span 1;
   }
 }