@charset "utf-8";

/* CSS Document */

.m-menubtn{ position: absolute;top:0; right:0; width:60px; height:60px; background:#0e6eb4; display:none}

.m-menubtn span{position: absolute;display: block;width: 22px;height: 2px;background-color: #fff;left:19px; transition: all .5s ease;margin: 0;}

.m-menubtn .line1{top:23px;-webkit-transform-origin:5px 0;-ms-transform-origin:5px 0;transform-origin:5px 0;}

.m-menubtn .line2{top: 29px;}

.m-menubtn .line3{top: 35px;-webkit-transform-origin: left 0;-ms-transform-origin: left 0;transform-origin: left 0;}

.m-menubtn.active .line1 {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}

.m-menubtn.active .line2{ opacity:0}

.m-menubtn.active .line3{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}



.m-menu{ background:#f5f5f5; position:fixed; left:0;top:0; width:100%; height:100%;display:none; overflow-y:auto; overflow-x:hidden; z-index:99}

.m-menu ul{ width:100%; height:calc(100vh - 20px); padding-top:80px; overflow-y:auto;overflow-x:hidden}

.m-menu a{ display:block}

.m-menu .menu_li{-webkit-transform:translateX(15px);-ms-transform:translateX(15px);-o-transform:translateX(15px);-ms-transform:translateX(15px);transform:translateX(15px);-webkit-transition: all .5s ease;-moz--webkit-transition: all .5s ease;-ms--webkit-transition: all .5s ease;-o--webkit-transition: all .5s ease;transition: all .5s ease;margin:0 3%;}

.m-menu .menu_a{ padding: 0 10px; line-height:60px; font-size:17px; color:#222; border-bottom:1px solid #d8d8d8; position:relative}

.m-menu .menu_a i{ width:60px; height:60px;position:absolute; right:0; top:0;}

.m-menu .menu_a i:before{ content:""; width:20px; height:2px; background:#666; display:block; right:10px;top:29px; position:absolute}

.m-menu .menu_a i:after{content:""; width:20px; height:2px; background:#666; display:block; right:10px;top:29px; position:absolute;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg); transform:rotate(90deg); -webkit-transition:.3s;-moz-transition:.3s;transition:.3s;}

.m-menu .menu_li .subnav{ padding:10px 20px; line-height:30px; font-size:14px; display:none}

.m-menu .menu_a.active{ background:#e9e9e9;}

.m-menu .menu_a.active i:after{-webkit-transform:rotate(0);-moz-transform:rotate(0); transform:rotate(0);}

.delay01{-webkit-transition-delay:.02s!important;-moz-transition-delay:.02s!important;transition-delay:.02s!important;}

.delay02{-webkit-transition-delay:.06s!important;-moz-transition-delay:.06s!important;transition-delay:.06s!important;}

.delay03{-webkit-transition-delay:.1s!important;-moz-transition-delay:.1s!important;transition-delay:.1s!important;}

.delay04{-webkit-transition-delay:.14s!important;-moz-transition-delay:.14s!important;transition-delay:.14s!important;}

.delay05{-webkit-transition-delay:.18s!important;-moz-transition-delay:.18s!important;transition-delay:.18s!important;}

.delay06{-webkit-transition-delay:.22s !important;-moz-transition-delay:.22s!important;transition-delay:.22s!important;}

.delay07{-webkit-transition-delay:.26s !important;-moz-transition-delay:.26s!important;transition-delay:.26s!important;}

.delay08{-webkit-transition-delay:.30s !important;-moz-transition-delay:.30s!important;transition-delay:.30s!important;}

.m-menu .menu_li.animate{ opacity:1; -webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
