header {position: relative; border-bottom: 1px solid #eee; z-index: 100; background: linear-gradient(45deg, #54c8f2, #3082ed)}
header h1 {}
header h1 a { display: block;text-align: center;padding:2rem 0}
header h1 a img {height: 3.5rem;}
header > div {position: absolute; top:50%; height: 2.2rem;transform: translateY(-50%);}
header .open_nav { right: 1.5rem;}
header .back {right: 1.5rem;}
header div img {height: 100%;}

nav {position: fixed; right: -100%; top:0; width: 77%; z-index: 150;background: #fff;height: 100vh;transition:.5s}
nav.on {right:-2px; transition:.5s}
nav h1 {height: 2rem; margin: 1.5rem 1.5rem 1.5rem 6rem;}
nav h1 img {height: 100%;}
nav > ul {display: flex;flex-flow: column;align-items: center;padding: 0 2rem;}
nav > ul > li {text-align: center;border-top: 1px solid #eee;padding:2rem 1rem; display: block; width: 100%;}
nav > ul > li:last-child {border-bottom: 1px solid #eee;}
nav > ul > li > ul > li { font-size: 1.2rem;line-height: 1.5;}
nav > ul > li > a  {display: flex;padding: 0 3rem;align-items: center;justify-content: space-between;}
nav > ul > li > a > span {font-size:1.5rem; font-weight:900; width:100%}
nav > ul > li > a img {width:6rem}
nav > ul > li:nth-child(1) > a img {width:4rem} 

nav .close_nav {position: absolute; right: 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 {position: fixed; bottom:3rem; right:1.5rem; display:flex; flex-flow:column-reverse}
.share .more {width: 5rem; z-index: 10;}
.share .sns_share {display:flex;flex-flow:column-reverse; transition:transform 0.5s; display: none;}
.share .sns_share.on {display: flex;}
.share .sns_share > * {width:5rem; transition:all 0.5s;  opacity:0; margin-bottom: 0.5rem;}



/* .share .sns_share > button:nth-child(1) {transform:translateY(1rem)} */
.share .sns_share > a:nth-child(1) {transform:translateY(1rem)}
.share .sns_share > button:nth-child(2) {transform:translateY(1rem)}
.share .sns_share > a:nth-child(3) {transform:translateY(1rem)}

/* .share .sns_share.on > button:nth-child(1) {transform:translateY(0); transition-delay:0;  opacity:1} */
.share .sns_share.on > a:nth-child(1) {transform:translateY(0); transition-delay:0.1s;  opacity:1}
.share .sns_share.on > button:nth-child(2) {transform:translateY(0); transition-delay:0.2s;  opacity:1}
.share .sns_share.on >  a:nth-child(3) {transform:translateY(0); transition-delay:0.3s;  opacity:1}

.share > * img{width: 100%;}