#header-hidden { display: none; width: 100%; height: 60px; }

#header-container { width: 100%; max-height: 80px; padding-top: 20px; background: #fff; }

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

.logo { width: 5.33rem; }

.logo span { text-indent: -900px; }

.menu { position: relative; }

.menu .menu-ico { padding-top: 2px; border-radius: 5px; font-size: .8rem; color: #19325f; }

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

.menu .main-menu-wrap { -webkit-transition: .7s; -webkit-transform: translateX(-100%); transition: .7s; 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 .main-menu { line-height: 50px; }

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

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

.menu .main-menu:nth-of-type(2) > a > i { font-weight: 600; }

.menu .main-menu.current-menu > a { color: #19325f; }

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