#header-container { width: 100%; padding: 10px 0; background: #fff; }

#header-container.on { position: fixed; top: 0; left: 0; z-index: 998; box-shadow: 0 2px 5px #e8e8e8; }

.logo { width: 4rem; }

.logo span { position: fixed; top: 0; left: -900px; }

.menu { position: relative; }

.menu .menu-ico { border-radius: 5px; font-size: .8rem; color: #009eed; }

.menu .menu-ico.on { position: fixed; top: 20px; right: .5rem; z-index: 1000; }

.menu .main-menu-wrap { overflow: scroll; transition: .7s; -webkit-transform: translateX(-100%); transform: translateX(-100%); position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); }

.menu .main-menu-wrap.on { -webkit-transform: translateX(0px); transform: translateX(0px); }

.menu .main-menu-wrap > ul { overflow-y: scroll; width: 80%; height: 100%; padding: 10px 0 0 10px; background: #fff; }

.menu .current-menu > a { color: #009eed; }

.menu .main-menu > a { line-height: 1.33rem; font-size: .4rem; }

.menu .main-menu > a i { margin-right: 5px; font-size: .67rem; }

.menu .main-menu .sub-menu { overflow: hidden; -webkit-transition: .8s; transition: .8s; height: 0; margin-left: 30px; }

.menu .main-menu .sub-menu a { font-size: .37rem; line-height: 1.33rem; }
