@charset 'utf-8';
#myInput{ display: none; }
.menu{ position: fixed; z-index: 100; height: 24px; right: 5%; top: 18px; transition: $tr4;
  img{ display: block; height: 100%; }
}
header { height: 60px; background-color: #fff; position: fixed; z-index: 99; width: 100%; transition: $tr4;
  .logo{ height: 40px; max-width: 80%; margin: 10px 0;
    img{ width: auto; height: 100%;max-width: 100%;}
  }
  // &:before{ content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 120px; border-bottom: 1px solid #666; transform: scale(0.5); display: block;  }
}
article{ padding-top: 60px; }
#myInput:checked ~header{ transform: translateX(-120px);}
#myInput:checked ~.menu{ transform: translateX(-120px);}
#myInput:checked ~main{ transform: translateX(-120px);}
#myInput:checked ~footer{ transform: translateX(-120px);}
#myInput:checked ~.right-nav{ transform: translateX(0px);}
