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

#slideMenu { pointer-events:auto; opacity: 1.0;}

@media screen and (max-width:1080px){

/* TOGGLE */
.toggle { width:32px; height:24px; display:block; pointer-events:all; cursor: pointer; position: absolute; top:28px; right:30px;}
.toggle .in { padding:0; box-sizing: border-box; }

.toggle span { display:block; width:32px; height:2px; background:#000;}
.toggle span.t1 {}
.toggle span.t2 { margin:9px 0;}
.toggle span.t3 {}
.toggle { display:block; }

.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, 11px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -11px) rotate(-135deg); }

#slideMenu { width:100%; height:calc(100vh - 80px); padding:80px 40px 80px; display:block; overflow-y:scroll; background-color: rgba(0,0,0,0.88); box-sizing:border-box; position:relative; position:absolute; top:80px; left:0; z-index:9000; pointer-events:none; opacity: 0;}

}

@media screen and (max-width:880px){
.toggle { position: absolute; top:34px;}
#slideMenu { height:calc(100vh - 78px); top:78px;}

}


@media screen and (max-width:680px){
.toggle { width:20px; height:16px; top:32px; right:20px;}
.toggle span { width:20px;}

.toggle span.t2 { margin:5px 0;}

.open .toggle span.t1 { transform: translate(0px, 7px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -7px) rotate(-135deg); }

#slideMenu { height:calc(100vh - 66px); padding:40px 40px 40px; top:66px;}

}