.pageinner {
    float:left;
    width: 640px;
    z-index:100;
    height:100%;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.77,0,0.175,1);
    -moz-transition: -moz-transform 500ms cubic-bezier(0.77,0,0.175,1);
    -ms-transition: -ms-transform 500ms cubic-bezier(0.77,0,0.175,1);
    transition: transform 500ms cubic-bezier(0.77,0,0.175,1);
}
.sideopen .pageinner {
    -webkit-transform: translateX(-330px);
    -moz-transform: translateX(-330px);
    -ms-transform: translateX(-330px);
    transform: translateX(-330px);

}
/*.sideopen #canvas {
    -webkit-transform: translateX(-330px);
    -moz-transform: translateX(-330px);
    -ms-transform: translateX(-330px);
    transform: translateX(-330px);

}*/
.grid {position:absolute;width:330px;top:0px;right:0px;height:100%;z-index:-1;}

.grid > li { width: 100%; height: 100%; overflow: hidden;  position: relative; }
.sidenav { position: absolute; top: 0; left: 0; bottom: 0;  width: 330px; 
           transition: all 0.25s; 
           -moz-transition: all 0.25s; 
           -webkit-transition: all 0.25s; 
           -o-transition: all 0.25s; 
           overflow: hidden; padding-top: 100px;}
body.sideopen .sidenav {background:#fff;}
.sidenav li { _overflow: hidden; width: 100%; }
.sidenav a { text-decoration: none; color: #eee;  display: block; line-height: 48px;  }

.sidenav b { display: block; color: #333333;font-size:18px; line-height: 6; opacity: 0;font-weight:normal; }
.sidenav b .en{   color: #bdbdbd;}

.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {
    transition-delay: .08s;
    -moz-transition-delay: .08s;
    -webkit-transition-delay: .08s;
    -o-transition-delay: .08s;
}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {
    transition-delay: .16s;
    -moz-transition-delay: .16s;
    -webkit-transition-delay: .16s;
    -o-transition-delay: .16s;
}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {
    transition-delay: .24s;
    -moz-transition-delay: .24s;
    -webkit-transition-delay: .24s;
    -o-transition-delay: .24s;
}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {
    transition-delay: .32s;
    -moz-transition-delay: .32s;
    -webkit-transition-delay: .32s;
    -o-transition-delay: .32s;
}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {
    transition-delay: .40s;
    -moz-transition-delay: .40s;
    -webkit-transition-delay: .40s;
    -o-transition-delay: .40s;
}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {
    transition-delay: .48s;
    -moz-transition-delay: .48s;
    -webkit-transition-delay: .48s;
    -o-transition-delay: .48s;
}

/*Three*/
.three b {
    transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5);
    -moz-transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5);
    -webkit-transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5);
    -o-transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5);
}


/*All instances*/
.grid>li.sideclk b {opacity: 1;}
.three.sideclk b {
    transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); 
    -moz-transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); 
    -webkit-transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); 
    -o-transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); 
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    background: transparent;}

.nav-toggle {
    right:20px;top:15px;
    width: 60px;
    height: 60px;
    z-index: 2;
  
    position: absolute;
    cursor: pointer;
    -webkit-transition-duration: 0.66s;
    transition-duration: 0.66s;
    -webkit-transition-timing-function: swing;
    transition-timing-function: swing;
}

.nav-toggle .icon {
  width: 30px;
  height: 4px;
  background-color: black;
  border-radius: 2px;
  position: absolute;
  top: 28px;
  left: 15px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  transiting-timing-function: swing;
}
.nav-toggle .icon:before, .nav-toggle .icon:after {
  width: 30px;
  height: 4px;
  background-color: black;
  border-radius: 2px;
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}
.nav-toggle .icon:before {
  top: -9px;
}
.nav-toggle .icon:after {
  top: 9px;
}
body.sideopen .nav-toggle .icon {
  width: 0;
}
body.sideopen .nav-toggle .icon:before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
body.sideopen .nav-toggle .icon:after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}