header {
  position: absolute;
  top: 0;
  width: 640px;
  z-index: 12; 
  height:100px;
 position: fixed;
 margin: 0 auto; 
}
  header .logo {
    float: right;
    margin: 20px 20px 0 0; }
  header nav {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 20px;
    right: 30px; }
    header nav a {
      display: block; }
  @media only screen and (max-width: 600px) {
    header .logo {
      margin: 17px 20px 0 0;
      width: 13%; }
      header .logo img {
        width: 100%; }
    header nav {
      position: absolute;
      top: 10px;
      left: 20px;
      width: 30px;
      height: 30px; } }
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
  .trans_bg {
    display: block; }

  .trans_iphone {
    display: block;
    position: relative;
    font-size: 15px;
    width: 100%;
    height: 100%;
    background-color: #5e62aa;
    position: absolute;
    background-color: #5e62aa; }
    .trans_iphone .trans_center {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center; }
      .trans_iphone .trans_center img {
        width: 40%;
        height: auto; }
      .trans_iphone .trans_center p {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.7;
        color: white;
        letter-spacing: 1px;
        text-align: center; } }
.menuToggle {
  width: 60px;
  height: 60px;
  display: block;
  z-index: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  padding: 15px 15px 0 0;
  position: fixed;
 }
  @media only screen and (max-width: 600px) {
    .menuToggle {
      width: 30px;
      height: 30px; } }

.menuToggle input {
  width: 100px;
  height: 100px;
  display: block;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 5;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
  position: fixed;
  margin-top: -30px;
  margin-left: -20px;
   }

.menuToggle > span {
  width: 60px;
  height: 4px;
  background-color: #797979;
  display: block;
  margin: 0 auto;
  margin-bottom: 13px;
  position: relative;
  z-index: 1;
  -webkit-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
  @media only screen and (max-width: 600px) {
    .menuToggle > span {
      width: 30px;
      height: 2px;
      margin-bottom: 8px; } }

.menuToggle span:first-child {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%; }

.menuToggle span:nth-of-type(2) {
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%; }

.menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -4px);
  transform: rotate(45deg) translate(-2px, -4px);
  position: fixed;
  background-color: #a10014;
  z-index: 5; }


.menuToggle input:checked ~ span:nth-of-type(2) {
  opacity: 0; }

.menuToggle input:checked ~ span:nth-of-type(3) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(-1px, -3px);
  transform: rotate(-45deg) translate(-1px, -3px);
  position: fixed;
  top: 74px;
  background-color: #a10014;
  z-index: 5; }
  @media only screen and (max-width: 600px) {
    .menuToggle input:checked ~ span:nth-of-type(3) {
      top: 45px;
      -webkit-transform: rotate(-45deg) translate(1px, -3px);
      transform: rotate(-45deg) translate(1px, -3px); } }

.menu {
  width: 100%;
  height: 100%;
  background: url(../images/menu-bg.jpg)center center;
  transition: ease-out 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none; }
  .menu .con {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .menu .con ul {
      margin-top: -50px; }
      .menu .con ul li {
        margin: 30px 0; }
        .menu .con ul li a {
          font-size: 34px;
          font-weight: 400;
          line-height: 2;
          color: #fff;
          letter-spacing: 1px;
          display: inline-block;
          position: relative;
          font-weight: 100;
          letter-spacing: 1px;
           }
          .menu .con ul li a:hover {color: #cc0e25;
          transition: ease-out 0.3s;
          font-weight: 300;}
          .menu .con ul li a:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: #a10014;
            position: absolute;
            bottom: -3px;
            left: 0px;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            transition: ease-out 0.3s; }
          .menu .con ul li a:hover:after {
            -webkit-transform: scaleX(1);
            transform: scaleX(1); }

  @media only screen and (max-width: 600px) {
    .menu .con ul li a {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
      color: #a10014;
      letter-spacing: 1px; } }



.menuToggle input:checked ~ .menu {
  left: 0px;
  opacity: 1;
  z-index: 3;
  pointer-events: auto; }