*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;outline:none;font-family:Nanum Myeongjo,serif}body{background-color:#222}img{width:100%}::-webkit-scrollbar{display:none}:root{--white:#fff;--grey:#888;--shadow:rgba(0,0,0,.05);--background:#e8e8e8;--black:#000}.nav{background:var(--white);margin:0;padding:0;font-size:1em;color:#000;height:3.6em;position:fixed;width:100%;z-index:4;box-shadow:0 2px 2px var(--shadow)}.nav-container{width:100%;max-width:1440px;margin:0 auto;padding:0 1em}.navbar{display:flex;justify-content:space-between;align-items:center}a.logo:hover{transition:border-bottom .4s linear}.navbar h6,.navbar ul{color:var(--black);line-height:1.6em;margin:0;padding:0;list-style:none;display:flex}.navbar ul li a{margin:1em}.navbar h6 a,.navbar ul li a{display:block;text-decoration:none}.navbar h6 a{margin:1em .2em;font-weight:800}.navbar ul li a{font-weight:600}.navbutton{border:2px solid transparent;padding:5px;background-color:transparent;cursor:pointer;height:40px;display:none;outline:none}.navbutton span{width:2em;height:.3em;border-top:2px solid var(--black);display:block;margin:4px 0}a{color:var(--black);text-decoration:none}h1,h2,h4,h5,p,ul{font-family:Nanum Myeongjo,serif}h2,h4,h5,h6,p,ul{line-height:1.8em}h1{font-size:3em;line-height:1.2em}h1,h2{font-weight:800}h2{font-size:2.4em}h4{font-size:2em}h4,h5{font-weight:800}h5{font-size:1.2em}h6,ul{font-weight:700}h6,p,ul{font-size:1em}p{font-weight:400}footer,footer a{color:#fff;text-align:center;line-height:2;font-size:1em;font-weight:200}h2 a,h5 a,h6 a,ul li a{text-decoration:none;border-bottom:1px solid transparent;transition:.2s linear}h2 a:after,h2 a:hover,h5 a:after,h5 a:hover,h6 a:after,h6 a:hover,p a:after,p a:hover,ul li a:after,ul li a:hover{border-bottom:1px solid var(--black)}section{width:100%;max-width:1440px;margin:0 auto;padding:2em;z-index:4}.divider{height:1px;border-top:1px solid #888;width:100%;margin-bottom:1em}.writing{width:100%;max-width:840px;margin:auto}button{border:none;box-sizing:border-box}button,button:hover{background-color:var(--black)}button:hover{cursor:pointer;transition:background-color .2s linear}.writing-button{width:100%;text-align:left;padding:1em}.grid-wrap{display:flex;grid-gap:1em}.grid-box,.grid-wrap{width:100%;position:relative}.grid-box{padding:1em;margin-top:.5em;margin-bottom:.5em;display:inline-block;overflow:hidden}footer{left:0;right:0;top:0;bottom:0;position:relative;margin:0;background:#222}.content,.fixed,.fixed-margin,.nav-margin,footer{width:100%}.fixed{width:100vw;height:100vh;height:calc(var(--vh, 1vh)*100);position:fixed;top:0;left:0;right:0;z-index:-1;background:url(/yunmi_cover.jpg) top;background-size:cover;background-repeat:no-repeat}.fixed-margin{height:72vh}.index-gallery{height:calc(24vw);color:#fff}@media (max-width:960px){.index-gallery{height:calc(28vw);color:#fff}}@media (max-width:840px){.index-gallery{height:calc(48vw);color:#fff}}.nav-margin{height:2.4em}.title{color:#fff;text-shadow:0 2px 2em rgba(0,0,0,.5)}.content{left:0;right:0;width:100vw;position:relative;background:var(--background);z-index:2}.index-gallery h4{color:#fff;text-align:center;line-height:100%;justify-content:space-between;align-items:center;text-shadow:0 2px 2em rgba(0,0,0,.5);width:100%;top:45%;left:0;right:0;position:absolute}.overlay{border:1px solid hsla(0,0%,100%,0);width:100%;height:100%;padding:1em;position:relative}.index-gallery:hover .overlay{border:1px solid #fff;transition:border .4s linear}.coverbg{background-color:#e8e8e8;background:url(/yunmi_cover.jpg) no-repeat 50%}.albumcover,.coverbg{background-size:cover;background-repeat:no-repeat}.book{max-width:300;display:flex;flex-direction:column;align-items:center;align-content:stretch}.book-image{width:200px;padding:1em}.profile{width:100%;max-width:240px;float:left;margin-right:1em}.photogrid{line-height:0;-webkit-column-count:4;-webkit-column-gap:1em;-moz-column-count:4;-moz-column-gap:1em;column-count:4;column-gap:1em}.photogrid>a>img,.photogrid>img{margin-bottom:1em}@media (max-width:960px){.photogrid{column-count:3}}@media (max-width:840px){.photogrid{column-count:2}}.img-nav{background:none;margin:0;padding:0;font-size:1em;color:var(--black);height:3.6em;position:fixed;width:100%;z-index:4}.photo{display:block;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;max-width:100%;height:auto;max-height:100%;padding:1em;touch-action:none}.photo-wrap{display:absolute;background-color:#222;width:100vw;height:100vh}.arrow{width:20%;height:80%;top:10%;background-repeat:no-repeat;background-position:50%;background-size:16px 32px;position:absolute;opacity:.6;transition:opacity .5s ease-in-out}.photo-share{height:32px;bottom:16px;left:50%;transform:translate(-50%);position:absolute}@media (hover:hover){.arrow{opacity:.2}.arrow:hover{opacity:.8}}.left{left:0;background-position:20% 50%;background-image:url(/arrow_left.svg)}.right{right:0;background-position:80% 50%;background-image:url(/arrow_right.svg)}.close{top:0;left:0;width:15%;height:10%;background-position:50%;background-size:24px 24px;background-image:url(/close_icon.svg)}@media screen and (max-width:600px){.fixed-margin{height:60vh}.profile{width:100%}.grid-wrap{display:block}.grid-box{margin-top:.5em;margin-bottom:.5em}.nav-container{max-width:720px}.navbar{height:3.6em}.navbar ul{position:absolute;width:100%;height:auto;left:0;top:3.6em;flex-direction:column;align-items:center;background-color:#fff;max-height:0;overflow:hidden;transition:.3s;box-shadow:0 2px 2px rgba(0,0,0,.05)}.navbutton{display:block}.navbar ul li{text-align:center}.navbar ul li a{margin:2em}.navbar ul.open{max-height:100vh;overflow:visible}}