header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 900; 
 margin: 0 auto; 
 height: 90px;
 -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
}
  header .logo {
    float: left;
    margin: 0 120px 0 0; }
  header nav {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 14px;
    right: 23px; }
    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; } }
      .menu-bg{
        width: 110px;
        height: 90px;
        background: rgba(0,0,0,0);
        position: absolute;
        top: 0;
        right: 0;
      }
@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: 10px 15px 0 0;
  position: fixed;
 }
  @media only screen and (max-width: 600px) {
    .menuToggle {
      width: 30px;
      height: 30px; } }

.menuToggle input {
  width: 90px;
  height: 90px;
  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: 50px;
  height: 4px;
  background-color: #000;
  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 {
  width: 65px;
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -4px);
  transform: rotate(45deg) translate(-2px, -4px);
  position: fixed;
 
  background-color: #000;

  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: 68px;
  background-color: #000;
  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-color:#ebe3dd;
  background: url(../images/menu-bg-1.jpg)center top;
  transition: ease-out 0.5s;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none; }
  .menu .con {
    width: 640px;
    height: auto;
    position: absolute;
    background: rgba(255,255,255,1);
    padding: 40px 0 60px 0;
    top: 49%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .menu .con ul {
      margin-top: 0px; }
      .menu .con ul li {
        margin: 20px 0; }
        .menu .con ul li img{
          width: auto;
        }
        .menu .con ul li a {
          font-size: 22px;
          line-height: 2;
          color: #000;
          letter-spacing: 2px;
          display: inline-block;
          position: relative;
          font-weight: 300;
          letter-spacing: 3px;
           }
          .menu .con ul li a:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: #339aa7;
            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: white;
      letter-spacing: 1px; }
       }



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


@media only screen and (min-width: 0px) and (max-width: 640px) {
.menu .con ul li {
        margin: 26px 0; }
.menu .con ul li a {
          font-size: 30px;}
.menu .con {
    width: 530px;}
}