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

@media screen and (max-width:1080px){
#slideMenu { pointer-events:none; opacity: 0;}

/* TOGGLE */
.toggle { width:36px; height:36px; padding:6px; border-radius: 2px; display:block; background: url("../images/bg_toggle@2x.png") center calc(100% - 4px) no-repeat #004071; background-size: 24px auto; box-sizing: border-box; pointer-events:all; cursor: pointer; position: absolute; top:23px; right:0px; z-index: 9999;}
.toggle .in { padding:0; box-sizing: border-box; }

.toggle span { display:block; width:24px; height:2px; background:#FFF;}
.toggle span.t1 {}
.toggle span.t2 { margin:5px 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, 7px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -7px) rotate(-135deg); }

#slideMenu { width:100%; height:100vh; padding:40px 40px 40px; display:block; overflow:scroll; opacity:0; background-color: #FFF; box-sizing:border-box; position:relative; position:fixed; top:0; left:0; z-index:2000; transition:all 0.3s ease-out; pointer-events:none;}

}


@media screen and (max-width:680px){
/* header --------------------*/
.toggle { width:28px; height:28px; background:none #006E9C; top:5px; right:0;}

.toggle span { width:16px;}
.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 { padding:20px 20px 20px;}

}