header {position: relative;padding: 1.5rem 0; border-bottom: 1px solid #eee; z-index: 100;}
header h1 {width: 50%; margin: 0 auto;}
header h1 a {height: 3.5rem; display: block; text-align:center;}
header h1 a img {height: 100%;}
header > div {position: absolute; top:50%; height: 1.5rem; transform:translateY(-50%);}
header .open_nav { left: 1.5rem;}
header .back {right: 1.5rem;}
header div img {height: 100%;}

nav {position: fixed; left: -100%;transition:.5s ;top:0; width: 70%; z-index: 150;background: #fff;height: 100vh;}
nav.on {left:0 ;transition:.5s}
nav h1 {height: 3rem; margin: 1.2rem;}
nav h1 img {height: 100%;display: block; margin:1rem auto}
nav > ul {display:flex; flex-flow:column;align-items: flex-start;margin:3rem 0 0 3rem }
nav > ul > li > a {display: block;padding: 1rem 0; font-size:2rem; font-weight:900}
nav > ul > li  {display: block;padding: 1rem 0; font-size:1.8rem; font-weight:900}
nav > ul > li > ul {margin:1rem 0}
nav > ul > li > ul > li  > a {font-size:1.8rem;line-height:1.5 }
nav .close_nav {position: absolute; left: 1.5rem; top:1.5rem; height: 2.2rem;}
nav .close_nav img {height: 100%;}
.nav_bg {background: rgba(0,0,0,0.6); position: fixed; left: 0; top:0; width: 100%; height: 100vh; z-index: 140; display: none;}
.nav_bg.on {display: block;}



.share_wrap {
    margin: 1.5rem;
    display: flex;
    justify-content: right;
}
.share_wrap button {
    width: 4rem;
    margin-left: .5rem;
}
.share_wrap button img {
    width: 100%;
}