@media only screen and (max-width: 768px){
    /* 推版面 */
    html{
    overflow-x: hidden;
  }
    header{
      left: 0;
      transition: all 0.5s ease-out;
    }
    body{
      position: relative;
      left: 0;
      transition: all 0.5s ease-out;
  }
    body.open{
      transition: all 0.5s ease-in;
      left: 150px;
  }
    #menu.open{
    transition: all 0.5s ease-in;
      left: 0;
      z-index: 999;
  }


/* 觸發按鈕 */

  #menu{
    position: fixed;
      left: -600px;
      height: 100vh;
      width: 80%;
      text-align: center;
      background-color: #fff;
      transition: all 0.5s ease-out;
      top: 0;
      padding-top: 10px;
  }
  .mask{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: none;
  }
  .mask.active{
    display: block;
  }

  }