/* 手機版調整 */
@media (max-width: 768px) {
  body, html{
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    min-width: 0px !important;
    max-width: 768px;
    line-height: 1.2;
  }
  .image-row,
  .multi-image-wrapper,
  #quadrant-root,
  iframe{
    max-width: 100vw;
    overflow-x: hidden;
  }
  .menu-bubble {
    /* display: none; */
  }
  .section{
    padding: 0;
  }
  .section .headline {
    max-width: 100vw;
    overflow-wrap: break-word;
  }
  .bubble-wrapper{
    display: none;
  }
  h1 { font-size: 0.8em; }
  h2{
    font-size: 0.6em;
    padding: 3vw 0vw;
  }
  h3{
    font-size: 0.7em;
    line-height: 1.3;
    padding: 3vw 0vw;
  }
  .content {
    padding: 0;
  }
  .headline {
    font-size: 0.6em;
  }
  .first-headline{
      font-size: 1em;
      text-align: center;
      margin: 5vh auto;
      width: 100vw;
      word-wrap: break-word;      /* 強制單字換行 */
      word-break: keep-all;
      white-space: normal;
      overflow-x: hidden;
  }
  .siteTitle{
      padding: 20px 0;
      font-size: 1em;
  }
  .section{
    height: auto;
    min-height: 100vh;
    padding-top: 10vh;
  }
  .mobileoffsection{
    display: none;
  }
  
  .first-section{
    min-height: 450vh;
  }
  .left-half, .right-half {
    display: none !important;
  }
  .section, .scroll-hint{
    font-size: 2em;
  }
  /* .left-half, .right-half {
    height: 150vh;
  } */
  /* #bubbleContainer {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  } */
  #bubbleContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 5vh;
    left: 0;
    width: 100vw;
    z-index: 100;
    padding: 2vh 0;
  }
  #bubbleContainer.folded {
      width: 0;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      transition: all 0s ease;
      margin: 0;
    }
  #bubbleContainer:not(.folded) {
    width: 100%;
    visibility: visible;
    opacity: 1;
  }
  .navbar {
    position: fixed;
    height: auto;
    min-height: 10vh;
    padding: 0;
    bottom: 10vh;
    flex-wrap: wrap !important; /* allow wrapping of children */
    white-space: normal;      /* allow line breaks */
    justify-content: center;
    z-index: 100;
    overflow: visible;
    transition: none;
  }

  .navbar a {
    width: 8vh;
    height: 8vh;
    flex: 1 1 calc(20% - 10px); /* each takes roughly half the row minus margins */
    max-width: calc(20% - 10px);
    margin: 5px;
    font-size: 0.6em;
  }
  .navbar.show {
    bottom: 10vh;
  }

  /* .navbar-link {
    display: block;
    margin: 5px;
    flex: 0 0 auto;
  } */
  .navbar-link {
    width: 80vw;
    padding: 2vh 0;
    text-align: center;
    font-size: 1.2em;
    background: transparent;
    color: #fff;
  }
  .go-top{
    display: none;
  }
  .bubble-container, .bubble-wrapper{
    height: 40vh;
  }
  .navbar-toggle {
      position: fixed !important;
      top: 15vh;
      left: -5vw;
      width: 100vw;
      height: 10vh;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0s ease;
      z-index: 70;
    }
  .menu-open{
      display:none;
    }
  .hamburger{
      width:10vw;
      height:3px;
      background:white;
      display:block;
      position:absolute;
      bottom: 0;
      left:50%;
      transition:transform 200ms;
    }
    .hamburger-1{
      transform:translate3d(0,-8px,0);
    }
    .hamburger-2{
      transform:translate3d(0,0,0);
    }
    .hamburger-3{
      transform:translate3d(0,8px,0);
    }
    .menu-open:checked+.menu-open-button{
      .hamburger-1{
        transform:translate3d(0,0,0) rotate(45deg); 
      }
      .hamburger-2{
        transform:translate3d(0,0,0) scale(0.1,1);
      }
      .hamburger-3{
        transform:translate3d(0,0,0) rotate(-45deg); 
      }
    }
    .menu-open-button{
      z-index:50;
      transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
      transition-duration:200ms;
      transform:scale(1.1,1.1) translate3d(0,0,0);
      cursor:pointer;
    }


    .spotlight {
    animation: none !important;
    transform: translate(20vw, 20vh);
  }

  .image-row {
    flex-direction: column;
    align-items: center;
  }
  .image-wrapper img {
    width: 80vw;
    height: auto;
    margin: 2vh 0;
  }

  .multi-image-wrapper {
    flex-direction: column;
  }

  .image-slot {
    width: 100%;
    height: auto;
  }

  #quadrant-root {
    width: 100vw;
    height: auto;
    flex-direction: column;
    /* display: flex; */
  }
  .quadrant {
    position: static;
    width: 100%;
    height: auto;
    margin: 4vh 0;
    flex-direction: column;
  }
  .quadrant img {
    width: 60vw;
    height: auto;
  }
  .touch-me {
    display: flex !important;
    opacity: 1 !important;
  }
  .publication-item {
    transform: none !important;
  }
}