.mnmd-offcanvas { max-width: 100%; width: 320px; position: fixed; top: 0; right: 0; left: auto; bottom: 0; margin: 0; overflow-y: auto; background: #fff; z-index: 999999; -webkit-transform: translate(101%,0); -moz-transform: translate(101%,0); -ms-transform: translate(101%,0); -o-transform: translate(101%,0); transform: translate(101%,0); -webkit-transition: all .2s cubic-bezier(.23,1,.32,1) .1s; -moz-transition: all .2s cubic-bezier(.23,1,.32,1) .1s; transition: all .2s cubic-bezier(.23,1,.32,1) .1s } body.admin-bar .mnmd-offcanvas { margin-top: 46px } .mnmd-offcanvas.is-active { box-shadow: 0 1px 10px 10px rgba(0,0,0,.1); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0) } .mnmd-offcanvas-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 1030 } .mnmd-offcanvas-close { height: 30px; width: 30px; position: absolute; top: 8px; right: 8px; bottom: auto; left: auto; padding: 0; /*border: 1px solid rgba(0,0,0,.05);*/ border-radius: 100%; background: 0 0; color:#1848b5; font-size: 14px; line-height: 28px; text-align: center; text-decoration: none !important; overflow: hidden } .mnmd-offcanvas-close:hover{ color: #1848b5 !important; } .mnmd-offcanvas__title { position: relative; padding: 20px 50px 20px 20px; font-size: 14px; /*background: #fff;*/ background: #fff; } .mnmd-offcanvas__title .social-list { margin-top: 10px; font-size: 16px; color: rgba(0,0,0,.4) } .mnmd-offcanvas__section { padding: 20px } .mnmd-offcanvas__section:not(:first-child) { border-top: 1px solid rgba(0,0,0,.05) } .mnmd-offcanvas__section-search + .mnmd-offcanvas__section-navigation { padding-top: 0; border-top: none } .navigation--offcanvas { margin: 0 -20px; padding-left: 0; } .navigation--offcanvas li { color: rgba(0,0,0,.6); border-bottom: 1px solid #f5f5f5; } .navigation--offcanvas li:last-child { border-bottom: none; } .navigation--offcanvas li > a { color: inherit; text-decoration: none; display: block; position: relative; padding: 10px 10px; background: 0 0; color: rgba(0,0,0,.6); font-size:16px; } .navigation--offcanvas li > a:active, .navigation--offcanvas li > a:focus, .navigation--offcanvas li > a:hover { color: inherit; text-decoration: none } .navigation--offcanvas li > a:hover { background: rgba(0,0,0,.02) } .navigation--offcanvas li > a:after { content: ''; position: absolute; top: 0; right: auto; bottom: 0; left: 0; border-right: 3px solid #243b60; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) .1s; -moz-transition: all .3s cubic-bezier(.23, 1, .32, 1) .1s; transition: all .3s cubic-bezier(.23, 1, .32, 1) .1s } .navigation--offcanvas li.current-menu-item > a:after { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } .navigation--offcanvas li.menu-item-has-children > a { padding-right: 56px } .navigation--offcanvas > li > a { padding: 15px 20px; text-transform: uppercase; font-weight: 700 } .navigation--offcanvas .sub-menu { display: none; padding: 5px 0 } .navigation--offcanvas > li > .sub-menu > li > a { padding-left: 40px } .navigation--offcanvas > li > .sub-menu > li > .sub-menu > li > a { padding-left: 50px } .navigation--offcanvas .submenu-toggle { display: block; width: 36px; position: absolute; top: 0; right: 10px; bottom: 0; left: auto; text-align: center } .navigation--offcanvas .submenu-toggle i { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; margin: 0; font-size: 20px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } .mobile-header-btn { color: inherit; text-decoration: none; display: inline-block; height: 50px; padding: 0 4px; background: 0 0; border: none; box-shadow: none; color: rgba(0,0,0,.8); font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer; vertical-align: middle; height: 60px; color: #243b60; position: absolute; right: 0px; top: 10px; } .mobile-header-btn:hover { color: #243b60 !important; } .mobile-header-btn:active, .mobile-header-btn:focus, .mobile-header-btn:hover { color: inherit; text-decoration: none } @media (min-width:768px) { .mobile-header-btn > span { line-height: 60px } } .mobile-header-btn i { font-size: 22px !important; line-height: 50px } .mobile-header-btn i.icon-wangzhandaohang { font-size: 26px !important; } @media (max-width:768px) { .mobile-header-btn i { font-size: 24px; line-height: 50px; /*color: #fff;*/ } } .mobile-header--dark, .mobile-header--inverse { /*background: #1B1D1C;*/ color: #fff } .mobile-header--dark .mobile-header-btn, .mobile-header--inverse .header-logo a, .mobile-header--inverse .mobile-header-btn { /*color: rgba(255,255,255,.8)*/ color: #fff; } .mobile-header--dark .mobile-header-btn:hover, .mobile-header--inverse .header-logo a:hover, .mobile-header--inverse .mobile-header-btn:hover { color: #fff }