@charset "UTF-8";
/* CSS Document */

#slideMenu { pointer-events:auto}

/* phone -------------------- */
/* TOGGLE */
.toggle { width:56px; height:66px; padding:8px; border-radius:2px; display: block; background:url(../images/bg_toggle@2x.png) center calc(100% - 6px) no-repeat #FFF; background-size:calc(100% - 16px) auto; position:fixed; z-index: 9999; left:40px; top:40px; cursor:pointer; display:none; pointer-events:all; box-sizing:border-box;}
.toggle .in { box-sizing:border-box;}

.toggle span { display:block; width:40px; height:6px; background:#009fe8; }
.toggle span.t2 { margin:8px 0; }
.toggle { display:block; }

.toggle, .toggle span { transition:all 0.4s cubic-bezier(0.42, 0.02, 0.33, 1.05);}
.open .toggle span.t2 { opacity:0; }
.open .toggle {}
.open .toggle span.t1 { transform: translate(0px, 14px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -14px) rotate(-135deg); }

#slideMenu { width:100%; height:100%; display:block; overflow-y:scroll; overflow-x:hidden; background:#FFF; opacity:0; box-sizing:border-box; position:relative; position:fixed; top:0; left:0; z-index:8888; pointer-events:none; transition:all 0.8s ease;}


@media screen and (max-width:680px) {
/* TOGGLE */
.toggle { width:42px; height:46px; padding:6px; background-position:center calc(100% - 5px); background-size:calc(100% - 12px) auto; top:12px; left:12px;}

.toggle span { width:30px; height:4px;}
.toggle span.t2 { margin:5px 0; }
.open .toggle span.t1 { transform: translate(0px, 9px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -9px) rotate(-135deg); }

}