@charset "UTF-8";
@keyframes breathing_anim {
  0% {
    opacity: 0.4; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0.4; } }

@keyframes show_anim {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes hide_anim {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes blog_button_falling {
  0% {
    bottom: 100%;
    transform: rotate(180deg); }
  100% {
    bottom: 21%;
    transform: rotate(720deg); } }

@keyframes ig_button_falling {
  0% {
    top: -50%;
    transform: rotate(180deg); }
  100% {
    top: 53.5%;
    transform: rotate(360deg); } }

@keyframes finger_anim {
  0% {
    background-image: url("textures/floor1/finger/finger_01.png"); }
  24% {
    background-image: url("textures/floor1/finger/finger_01.png"); }
  25% {
    background-image: url("textures/floor1/finger/finger_02.png"); }
  49% {
    background-image: url("textures/floor1/finger/finger_02.png"); }
  50% {
    background-image: url("textures/floor1/finger/finger_03.png"); }
  74% {
    background-image: url("textures/floor1/finger/finger_03.png"); }
  75% {
    background-image: url("textures/floor1/finger/finger_02.png"); }
  99% {
    background-image: url("textures/floor1/finger/finger_02.png"); }
  100% {
    background-image: url("textures/floor1/finger/finger_01.png"); } }

@keyframes spinning {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rev_spinning {
  0% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes spring_anim_one {
  0% {
    height: 11.6%; }
  45% {
    height: 8%; }
  65% {
    height: 8%; }
  70% {
    height: 11.6%; }
  100% {
    height: 11.6%; } }

@keyframes spring_anim_two {
  0% {
    height: 22%; }
  45% {
    height: 15%; }
  65% {
    height: 15%; }
  70% {
    height: 22%; }
  100% {
    height: 22%; } }

@keyframes cloud_slide_1 {
  from {
    opacity: 0;
    left: -50%; }
  to {
    opacity: 1;
    left: -20%; } }

@keyframes cloud_slide_2 {
  from {
    opacity: 0;
    right: -50%; }
  to {
    opacity: 1;
    right: -20%; } }

#view_zoom_dialog {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  pointer-events: auto; }
  #view_zoom_dialog div, #view_zoom_dialog img {
    position: relative; }
  #view_zoom_dialog:before, #view_zoom_dialog:after {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    z-index: 98;
    opacity: 0; }
  #view_zoom_dialog:before {
    background: url("textures/dialog/cloud_1.png") center/cover no-repeat;
    width: 150%;
    height: 150%; }
  #view_zoom_dialog:after {
    background: url("textures/dialog/cloud_2.png") center/cover no-repeat;
    width: 100%;
    height: 100%; }
  #view_zoom_dialog:not(.hide):before {
    animation: cloud_slide_1 1.5s 0s ease-in forwards; }
  #view_zoom_dialog:not(.hide):after {
    animation: cloud_slide_2 1.5s 0s ease-in forwards; }
  #view_zoom_dialog:not(.hide) .dialog-container {
    opacity: 1; }
  #view_zoom_dialog.hide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none; }
  #view_zoom_dialog .dialog-container {
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 80%;
    height: 60%;
    -ms-flex-direction: column;
        flex-direction: column;
    z-index: 99;
    transition: .3s all ease-in;
    transition-delay: 1.5s;
    opacity: 0;
    max-width: 1280px;
    min-width: 1000px;
    /* Rectangle */
    background: rgba(209, 209, 209, 0);
    box-sizing: border-box;
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 10px; }
  #view_zoom_dialog .dialog-head, #view_zoom_dialog .dialog-body, #view_zoom_dialog .dialog-foot {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%; }
  #view_zoom_dialog .dialog-head {
    min-height: 10%; }
  #view_zoom_dialog .dialog-body {
    min-height: 80%;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-pack: justify;
        justify-content: space-between; }
    #view_zoom_dialog .dialog-body .btn-prev, #view_zoom_dialog .dialog-body .btn-next {
      display: -ms-inline-flexbox;
      display: inline-flex;
      width: 10%;
      height: 100%;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      font-size: 36px;
      cursor: pointer; }
      #view_zoom_dialog .dialog-body .btn-prev:before, #view_zoom_dialog .dialog-body .btn-next:before {
        color: #b4aeb0; }
    #view_zoom_dialog .dialog-body .content-list {
      display: inline-block;
      width: 80%;
      white-space: nowrap;
      overflow: hidden; }
      #view_zoom_dialog .dialog-body .content-list .content-page {
        position: absolute;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 100%;
        height: 100%;
        vertical-align: top;
        transition: .5s all ease-in; }
        #view_zoom_dialog .dialog-body .content-list .content-page > div {
          height: 100%;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -ms-flex-direction: column;
              flex-direction: column; }
        #view_zoom_dialog .dialog-body .content-list .content-page.active {
          left: 0; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-1 {
          left: -100%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-1 {
          left: 100%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-2 {
          left: -200%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-2 {
          left: 200%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-3 {
          left: -300%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-3 {
          left: 300%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-4 {
          left: -400%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-4 {
          left: 400%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-5 {
          left: -500%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-5 {
          left: 500%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-6 {
          left: -600%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-6 {
          left: 600%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-7 {
          left: -700%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-7 {
          left: 700%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-8 {
          left: -800%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-8 {
          left: 800%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-9 {
          left: -900%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-9 {
          left: 900%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.prev-10 {
          left: -1000%; }
        #view_zoom_dialog .dialog-body .content-list .content-page.next-10 {
          left: 1000%; }
      #view_zoom_dialog .dialog-body .content-list .content-info {
        width: 20%;
        padding: 0 1%;
        -ms-flex-pack: justify;
            justify-content: space-between; }
        #view_zoom_dialog .dialog-body .content-list .content-info span {
          margin: 8px 0; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-header {
          margin-bottom: 10px; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-contain {
          height: 70%;
          font-family: Roboto-Regular;
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 20px;
          color: #5C5C5C;
          white-space: initial; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-date {
          font-family: Roboto-Regular;
          font-style: normal;
          font-weight: 600;
          font-size: 12px;
          line-height: 14px;
          /* identical to box height */
          color: #5C5C5C;
          margin: 0 0 8px; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-title {
          font-family: Roboto-Regular;
          font-style: normal;
          font-weight: 600;
          font-size: 20px;
          line-height: 25px;
          color: #5C5C5C;
          margin: 0;
          white-space: initial; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-place, #view_zoom_dialog .dialog-body .content-list .content-info .info-datetime {
          font-family: Roboto-Regular;
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 20px;
          color: #5C5C5C;
          margin: 12px 0 0;
          white-space: initial; }
          #view_zoom_dialog .dialog-body .content-list .content-info .info-place:before, #view_zoom_dialog .dialog-body .content-list .content-info .info-datetime:before {
            display: block;
            width: 100%; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-place:before {
          content: '展覽地點 |'; }
        #view_zoom_dialog .dialog-body .content-list .content-info .info-datetime:before {
          content: '展覽日期 |'; }
      #view_zoom_dialog .dialog-body .content-list .content-img-show {
        width: 66%;
        -ms-flex-pack: center;
            justify-content: center; }
        #view_zoom_dialog .dialog-body .content-list .content-img-show img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
        #view_zoom_dialog .dialog-body .content-list .content-img-show .youtube-video {
          position: absolute;
          top: 0;
          left: 0; }
      #view_zoom_dialog .dialog-body .content-list .content-img-list {
        width: 12%;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: end;
            align-items: flex-end; }
        #view_zoom_dialog .dialog-body .content-list .content-img-list img {
          max-width: 90%;
          object-fit: cover;
          height: 19%;
          cursor: pointer; }
  #view_zoom_dialog .dialog-foot {
    min-height: 10%;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    #view_zoom_dialog .dialog-foot .btn-page-selectList {
      position: relative;
      display: -ms-inline-flexbox;
      display: inline-flex;
      width: 80%;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      padding: 16px 0 0; }
      #view_zoom_dialog .dialog-foot .btn-page-selectList:before {
        display: block;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0; }
      #view_zoom_dialog .dialog-foot .btn-page-selectList i.page-point {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: rgba(138, 138, 138, 0.3);
        border-radius: 50%;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        margin-left: 8px; }
        #view_zoom_dialog .dialog-foot .btn-page-selectList i.page-point:first-child {
          margin-left: 0; }
        #view_zoom_dialog .dialog-foot .btn-page-selectList i.page-point.selected {
          background: rgba(255, 255, 255, 0.9); }
    #view_zoom_dialog .dialog-foot .btn-more {
      position: absolute;
      right: 10%;
      top: 30px;
      font-family: Roboto-Regular;
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 16px;
      color: #5C5C5C;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      cursor: pointer; }
  #view_zoom_dialog .btn-close:before, #view_zoom_dialog .btn-prev:before, #view_zoom_dialog .btn-next:before {
    display: inline-block;
    content: ''; }
  #view_zoom_dialog .btn-prev:before {
    background: url("textures/dialog/ic-btn-prev.svg") center/contain no-repeat;
    padding: 20px; }
  #view_zoom_dialog .btn-next:before {
    background: url("textures/dialog/ic-btn-next.svg") center/contain no-repeat;
    padding: 20px; }
  #view_zoom_dialog .btn-close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    /* Ellipse */
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    #view_zoom_dialog .btn-close:before {
      background: url("textures/dialog/ic-btn-close.svg") center/contain no-repeat;
      padding: 20px; }

/*----------------------------------------------------------------------buliding structure*/
.building {
  /*對齊viewport高，比例16:9，水平置中*/
  height: 100vh;
  width: 222.2vh;
  left: 50vw;
  bottom: 0vh;
  margin-left: -111.1vh;
  transform: none;
  transition: transform 2700ms ease-in-out; }

/*
floor:
every floor div has dirrent bottom value which depends on:
1. its floor index
2. layer index of its parent building.
*/
.floor0 {
  height: 100%;
  width: 100%; }

.floor1 {
  height: 100%;
  width: 100%; }

.floor2 {
  height: 100%;
  width: 100%; }

.floor3 {
  height: 100%;
  width: 100%; }

.floor4 {
  height: 100%;
  width: 100%; }

.floor5 {
  height: 100%;
  width: 100%; }

#layer09 .floor0 {
  bottom: 0vh; }

#layer09 .floor1 {
  bottom: 90vh; }

#layer09 .floor2 {
  bottom: 180vh; }

#layer09 .floor3 {
  bottom: 270vh; }

#layer09 .floor4 {
  bottom: 360vh; }

#layer09 .floor5 {
  bottom: 450vh; }

#layer10 .floor0 {
  bottom: 0vh; }

#layer10 .floor1 {
  bottom: 100vh; }

#layer10 .floor2 {
  bottom: 200vh; }

#layer10 .floor3 {
  bottom: 300vh; }

#layer10 .floor4 {
  bottom: 400vh; }

#layer10 .floor5 {
  bottom: 500vh; }

#layer11 .floor0 {
  bottom: 0vh; }

#layer11 .floor1 {
  bottom: 110vh; }

#layer11 .floor2 {
  bottom: 220vh; }

#layer11 .floor3 {
  bottom: 330vh; }

#layer11 .floor4 {
  bottom: 440vh; }

#layer11 .floor5 {
  bottom: 550vh; }

#layer15 .floor0 {
  bottom: 0vh; }

#layer15 .floor1 {
  bottom: 150vh; }

#layer15 .floor2 {
  bottom: 300vh; }

#layer15 .floor3 {
  bottom: 450vh; }

#layer15 .floor4 {
  bottom: 600vh; }

#layer15 .floor5 {
  bottom: 750vh; }

#layer20 .floor0 {
  bottom: 0vh; }

#layer20 .floor1 {
  bottom: 200vh; }

#layer20 .floor2 {
  bottom: 400vh; }

#layer20 .floor3 {
  bottom: 600vh; }

#layer20 .floor4 {
  bottom: 800vh; }

#layer20 .floor5 {
  bottom: 1000vh; }

/*----------------------------------------------------------------------DOM Elements*/
/*loading page*/
#loading_page {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #e0b5b4; }

#loading_front {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

#loading_front_mask {
  width: 23vh;
  height: 23vh;
  left: 50%;
  top: 50%;
  margin-top: -11.5vh;
  margin-left: -11.5vh;
  clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0% 100%); }
  #loading_front_mask.loading {
    transition: clip-path -webkit-clip-path 10000ms ease-in-out;
    clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%); }
  #loading_front_mask.complete {
    transition: clip-path -webkit-clip-path 10000ms ease-in-out;
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%); }

#loading_back {
  width: 23vh;
  height: 23vh;
  left: 50%;
  top: 50%;
  margin-top: -11.5vh;
  margin-left: -11.5vh; }

/*cross floor*/
#bg {
  -webkit-transform: translateZ(0);
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 600%; }

/*floor 0*/
#big_cloud_at0 {
  -webkit-transform: translateZ(0);
  width: 75%;
  bottom: 100%;
  right: 0; }

#blog_button {
  display: none;
  -webkit-transform: translateZ(0);
  pointer-events: auto;
  height: 35vh;
  left: 63%;
  bottom: 21%;
  animation-delay: -1s; }

#blog_button.falling {
  animation: blog_button_falling 2s ease-out 1; }

#ig_button {
  display: none;
  -webkit-transform: translateZ(0);
  pointer-events: auto;
  height: 30vh;
  left: 25.5%;
  top: 53.5%;
  animation-delay: -1.5s; }

#ig_button.falling {
  animation: ig_button_falling 2.5s ease-out 1; }

/*floor 1*/
.contact_title {
  font-family: Roboto-Regular;
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  line-height: 48px;
  color: #FFFFFF;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

.contact_info {
  font-family: Roboto-Regular;
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  line-height: 27px;
  white-space: nowrap;
  color: #1C1C1C;
  pointer-events: auto;
  -webkit-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text; }
  .contact_info a {
    color: #1C1C1C; }
  .contact_info .contact_info_inline {
    display: inline-block;
    line-height: 32px; }
    .contact_info .contact_info_inline:nth-child(2) {
      left: 210px;
      top: 48px; }

#address_info_container {
  display: none;
  right: 40%;
  top: 65%; }

#email_info_container {
  display: none;
  right: 50%;
  top: 65%; }

#finger {
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  width: 4.2%;
  height: 6.7%;
  top: 31.7%;
  left: 41.2%;
  background-image: url("textures/floor1/finger/finger_01.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

#finger.shaking {
  cursor: pointer;
  animation: finger_anim 0.3s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden; }

/*floor 2*/
#video_right_arrow {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.8;
  height: 5vh;
  left: 59%;
  bottom: 45.2%;
  transform: rotate(15deg); }

#video_left_arrow {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.8;
  height: 5vh;
  left: 30.6%;
  bottom: 62%;
  transform: rotate(195deg); }

#video_title {
  display: none;
  height: auto;
  width: 20vw;
  font-size: 3vh;
  text-decoration: underline;
  pointer-events: auto;
  cursor: pointer;
  color: #FFFFFF;
  bottom: 40vh;
  left: 3%; }

#video_content {
  display: none;
  height: 30vh;
  width: 20vw;
  font-size: 1.8vh;
  color: #FFFFFF;
  top: 72vh;
  right: 15%;
  line-height: 2;
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph;
  -moz-text-align-last: justify;
  -webkit-text-align-last: justify; }

#big_cloud_at2 {
  -webkit-transform: translateZ(0);
  width: 75%;
  bottom: 100%;
  left: -10%; }

#videoframe {
  -webkit-transform: translateZ(0);
  top: -5%;
  left: 25.5%;
  width: 41.2%; }

#videoframe_block {
  -webkit-transform: translateZ(0);
  top: 15%;
  left: 30%;
  width: 32%; }
  #videoframe_block.hide {
    visibility: hidden; }

#dotsList {
  transform: rotate(15deg);
  width: 9.2vh;
  height: 1.85vh;
  bottom: 32%;
  left: 40%; }

#dot1 {
  width: 1.85vh;
  left: 0; }

#dot2 {
  width: 1.85vh;
  left: 50%;
  margin-left: -0.925vh; }

#dot3 {
  width: 1.85vh;
  right: 0; }

#video_corp {
  height: 65vh;
  width: 84vh;
  left: 27%;
  top: 12%;
  transform: rotate(15deg);
  clip-path: ellipse(50% 50% at 50% 50%);
  -webkit-clip-path: ellipse(50% 50% at 50% 50%);
  pointer-events: auto;
  cursor: pointer; }

#video_container {
  overflow: hidden;
  background-color: #F35252;
  left: 0%;
  width: 84vh;
  height: 63vh; }

#yt_button {
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  top: 73%;
  left: 40%;
  height: 7vh; }

/*floor 3*/
#big_cloud_at3 {
  -webkit-transform: translateZ(0);
  width: 75%;
  bottom: 100%;
  right: -10%; }

#gear1 {
  -webkit-transform: translateZ(0);
  top: 8%;
  left: 45%;
  width: 3.6%;
  animation: spinning 2s linear infinite; }

#gear2 {
  -webkit-transform: translateZ(0);
  top: 12%;
  left: 50%;
  width: 2.7%;
  animation: rev_spinning 3s linear infinite; }

#gear3 {
  -webkit-transform: translateZ(0);
  top: 16%;
  left: 46%;
  width: 2.7%;
  animation: rev_spinning 1s linear infinite; }

#heart {
  -webkit-transform: translateZ(0);
  bottom: 100%;
  left: 50%;
  margin-left: -6.7vh;
  height: 20.2vh; }

#inflator_handler {
  -webkit-transform: translateZ(0);
  top: 100%;
  left: -35%;
  height: 4.8vh; }

#inflator_body {
  -webkit-transform: translateZ(0);
  top: 45.8%;
  left: 43.7%;
  width: 4.1%; }

#spring1_container {
  -webkit-transform: translateZ(0);
  top: 31%;
  left: 46%;
  width: 1.1%;
  height: 11.6%;
  animation: spring_anim_one 2s ease-in-out infinite; }

#spring1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

#spring2_container {
  -webkit-transform: translateZ(0);
  bottom: 44%;
  left: 42.55%;
  width: 1.6%;
  height: 20.2%;
  animation: spring_anim_two 2s ease-in-out infinite; }

#spring2 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

#truss1 {
  -webkit-transform: translateZ(0);
  top: 8.4%;
  left: 40%;
  width: 8.4%; }

#truss2 {
  -webkit-transform: translateZ(0);
  top: 11%;
  left: 44.5%;
  width: 7.8%; }

#right_arm {
  -webkit-transform: translateZ(0);
  top: 10.3%;
  left: 31.5%;
  width: 26.3%; }

#goddess {
  -webkit-transform: translateZ(0);
  left: 62.5%;
  top: 61.5%;
  width: 37.4%; }

#fb_button {
  pointer-events: auto;
  width: 2.1%;
  left: 56%;
  top: 31.5%; }

/*floor 4*/
#content_AU {
  display: none;
  font-size: 2vh;
  line-height: 2;
  color: #FFFFFF;
  top: 73%;
  right: 50px;
  width: 30%;
  height: 20%; }

#charger {
  -webkit-transform: translateZ(0);
  bottom: 69%;
  left: 50.5%;
  width: 2.3%;
  height: 57.4%; }

#linkedin_button {
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  width: 2.8%;
  left: 63.5%;
  top: 48.5%; }

/*floor 5*/
#brain {
  -webkit-transform: translateZ(0);
  top: 44%;
  left: 45.5%;
  height: 24vh; }

#brain_bright {
  -webkit-transform: translateZ(0);
  display: none;
  top: 44%;
  left: 45.5%;
  height: 24vh; }

#cupid {
  top: 24.5%;
  left: 47%;
  height: 33.5vh; }

#lightning {
  -webkit-transform: translateZ(0);
  left: 50.2%;
  bottom: 26%;
  width: 2.37%; }

#slogan_container {
  display: inline-block;
  top: 12%;
  height: 8vh;
  white-space: nowrap; }

.slogan_word {
  margin: 0;
  text-align: center;
  vertical-align: middle;
  color: white;
  font-size: 4vh;
  line-height: 1; }

#slogan_line1 {
  position: static;
  color: #FFFFFF;
  display: none;
  top: 0%; }

#slogan_line2 {
  display: none;
  bottom: 0%;
  right: 0%; }

#strike_line {
  top: 28%;
  left: 73%;
  width: 0%;
  height: 4%;
  border-radius: 15px;
  background-color: #FFFFFF; }

/*menu*/
#menu {
  -webkit-transform: translateZ(0);
  width: 290px;
  height: 251px;
  right: 0;
  top: 5vh;
  transition: .3s all ease-in; }
  #menu.hidden {
    opacity: 0;
    visibility: hidden; }
  #menu[data-page="BTS"] #BTS_in_menu {
    opacity: 1; }
    #menu[data-page="BTS"] #BTS_in_menu ~ #flower3 {
      opacity: 1; }
  #menu[data-page="news"] #news_in_menu {
    opacity: 1; }
    #menu[data-page="news"] #news_in_menu ~ #flower1 {
      opacity: 1; }
  #menu[data-page="CU"] #CU_in_menu {
    opacity: 1; }
    #menu[data-page="CU"] #CU_in_menu ~ #flower4 {
      opacity: 1; }
  #menu[data-page="projects"] #projects_in_menu {
    opacity: 1; }
    #menu[data-page="projects"] #projects_in_menu ~ #flower2 {
      opacity: 1; }
  #menu[data-page="AU"] #AU_in_menu {
    opacity: 1; }
    #menu[data-page="AU"] #AU_in_menu ~ #flower1 {
      opacity: 1; }
    #menu[data-page="AU"] #AU_in_menu ~ #flower2 {
      opacity: 1; }
    #menu[data-page="AU"] #AU_in_menu ~ #flower3 {
      opacity: 1; }
    #menu[data-page="AU"] #AU_in_menu ~ #flower4 {
      opacity: 1; }

.ic-flower {
  -webkit-transform: translateZ(0);
  width: auto;
  height: auto;
  transform: scale(0.6);
  transition: 0.3s all ease-in;
  opacity: 0.3; }
  .ic-flower#flower1 {
    z-index: 14;
    top: -20%;
    left: -11%; }
  .ic-flower#flower2 {
    z-index: 11;
    top: 36%;
    right: -20%; }
  .ic-flower#flower3 {
    z-index: 12;
    top: 54%;
    left: -40%; }
  .ic-flower#flower4 {
    z-index: 13;
    top: 50%;
    right: 8%; }

#flower {
  -webkit-transform: translateZ(0);
  width: 100%;
  height: 100%; }

.menuText {
  z-index: 15;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.3;
  transform: scale(1);
  transition: 0.3s all ease-in; }
  .menuText#BTS_in_menu:hover {
    opacity: 1; }
    .menuText#BTS_in_menu:hover ~ #flower3 {
      opacity: 1; }
  .menuText#news_in_menu:hover, .menuText#AU_in_menu:hover {
    opacity: 1; }
    .menuText#news_in_menu:hover ~ #flower1, .menuText#AU_in_menu:hover ~ #flower1 {
      opacity: 1; }
  .menuText#CU_in_menu:hover {
    opacity: 1; }
    .menuText#CU_in_menu:hover ~ #flower4 {
      opacity: 1; }
  .menuText#projects_in_menu:hover {
    opacity: 1; }
    .menuText#projects_in_menu:hover ~ #flower2 {
      opacity: 1; }

.scaling {
  transform: scale(1.1) !important; }

#news_in_menu {
  top: 27%;
  left: 23%; }

#CU_in_menu {
  top: 56%;
  left: 42.5%;
  transform: scale(0.6); }

#BTS_in_menu {
  top: 55.2%;
  left: -19%;
  transform: scale(0.6); }

#projects_in_menu {
  top: 43%;
  left: 41%;
  transform: scale(0.6); }

#AU_in_menu {
  top: -6%;
  left: 11%; }

/*for JS*/
.resizing {
  transition: none !important; }

/*View Zoom in*/
#layer10 .floor2.view-zoom.zoom-in {
  bottom: 190vh;
  left: 10vw; }

.view-zoom {
  transition: .3s all ease-in;
  transform: scale(1);
  opacity: 1; }
  .view-zoom#bg {
    transform: translateZ(0) scale(1); }
  .view-zoom.zoom-hide {
    opacity: 0;
    visibility: hidden; }
  .view-zoom.zoom-in {
    transform: scale(2.5); }
    .view-zoom.zoom-in#bg {
      transform: translateZ(0) scale(2.5); }

html, body {
  font-family: 'Microsoft JhengHei', 'Arial';
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none; }

a {
  color: #5C5C5C;
  text-decoration: none; }

video {
  position: absolute;
  width: auto;
  height: 100%;
  background-size: cover;
  overflow: hidden; }

div {
  position: absolute; }

img {
  position: absolute; }

iframe.hide, img.hide {
  visibility: hidden; }

/*-----Frame of Sprites Anime-----*/
.animFrame {
  -webkit-transform: translateZ(0);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }

/*-----Button Breathing Anime-----*/
.breathing {
  animation: breathing_anim 2s ease-in-out infinite; }

.visible {
  display: block !important; }

.show {
  animation: show_anim 1s ease-out 1; }

.hide {
  animation: hide_anim 1.05s ease-out 1; }

@font-face {
  font-family: Roboto-Regular;
  src: url("font/Roboto-Regular.ttf"); }

#alertMsg{
  position: absolute;
  left: calc(50% - 116.5px);
  top: 62%;
  margin: 0;
  color: white;
  letter-spacing: 2px;
}