@keyframes shake{0%{transform:translate(2px, 0px)}10%{transform:translate(-2px, 0px)}20%{transform:translate(4px, 0px)}30%{transform:translate(-4px, 0px)}40%{transform:translate(6px, 0px)}50%{transform:translate(-6px, 0px)}60%{transform:translate(4px, 0px)}70%{transform:translate(-4px, 0px)}80%{transform:translate(2px, 0px)}90%{transform:translate(-2px, 0px)}100%{transform:translate(0px, 0px)}}body{height:100vh;width:100vw;margin:0;font-family:Arial;overflow-x:hidden;background:#dde4ea}body a{color:inherit;text-decoration:none;cursor:pointer}body header .light{opacity:0}body header>div{width:100vw;height:48vw;top:0;background-size:contain;background-repeat:no-repeat;position:fixed}body header>div.under{background-image:url("../images/mulin_under.jpg");transition:opacity 0.5s}body header>div.upper{background-image:url("../images/mulin_upper.png");z-index:2;background-color:rgba(221,228,234,0);border-bottom:0 none}body header>div.upper.scrolled{background-color:#dde4ea;border-bottom:#ccc 1px solid}body header>div.upper div{height:100%;display:flex;flex-direction:column-reverse;margin:-24px 10vw 0;transition:opacity 0.5s}body header>div.upper div h1{text-align:right;font-size:calc(16px + 2.4vw);margin:1vw 0;color:#f00}body header>div.upper span{position:fixed;right:4vw;border-radius:24px;width:40px;height:40px;overflow:hidden;cursor:pointer}body header>div.upper span.noUser{visibility:hidden;pointer-events:none}body header>div.upper span.noUser svg{opacity:0}body header>div.upper span.uplink{bottom:4vw}body header>div.upper span.uplink svg{transform:rotate(270deg)}body header>div.upper span svg{transition:opacity 0.5s;background:#f00}body header>div.upper span.downlink{margin-top:-16vw}body header>div.upper span.downlink svg{transform:rotate(90deg)}body main{font-size:24px;padding:48vw 10vw 12px;position:relative}@media only screen and (max-width: 768px){body main{padding:48vw 0 12px}}body main p{text-align:justify;margin:24px 0;line-height:36px}@media only screen and (max-width: 768px){body main p{font-size:20px;line-height:30px;text-align:inherit;padding:0 4vw}}body main h1{font-size:1.17em;padding-bottom:12px}@media only screen and (max-width: 768px){body main h1{padding:0 4vw 12px}}body main img{width:100%}body main>span{width:100%;background:rgba(221,228,234,0.8);height:48px;margin-top:-48px;font-size:16px;display:block;line-height:44px;position:relative;text-indent:12px}@media only screen and (max-width: 768px){body main>span{width:92vw;background:none;font-size:16px;display:inline-block;line-height:20px;margin:0 4vw;text-indent:inherit}}body main .positioner{position:absolute}body main .positioner#article{top:0}body main .positioner#forum{margin-top:-23vw}body main #blog hr{border:0 none;border-bottom:#ccc 1px solid}body main #blog .comment p{font-size:20px;line-height:24px;margin:12px 0}body main #blog .comment p:nth-of-type(1){display:flex;justify-content:space-between}body main #blog .comment span{background:#f00;color:#fff;padding:0 8px;border-radius:4px;line-height:36px;text-transform:capitalize}body main #blog .comment span.online{background:none;width:18px;padding:0;display:inherit}body main #blog .comment span.time{font-size:12px;background:none;color:inherit;margin:-12px auto 0 0;text-transform:inherit;padding-left:0}body main #blog .comment span.addComment{text-align:center;width:20px;background:#ccc;color:#f00;cursor:pointer;visibility:hidden}body main #blog .comment span.noUser{display:none;pointer-events:none}body main #blog .comment span img{width:20px;margin-right:6px}body main #blog .comment.isTouch p>span.addComment,body main #blog .comment:hover p>span.addComment{visibility:visible}body main #blog .comment .edit{display:flex;flex-direction:column;font-size:20px;line-height:24px}@media only screen and (max-width: 768px){body main #blog .comment .edit{max-width:calc(100% - 48px)}}body main #blog .comment .edit .field{margin:12px 0;background:#ccc;border:0 none;padding:8px;outline:0 none}body main #blog .comment .edit .field div{margin-top:12px}body main #blog .comment .edit .send{color:#dde4ea;cursor:pointer;width:20px;align-self:flex-end;text-align:center}@media only screen and (max-width: 768px){body main #blog .comment.commentHead .edit{max-width:calc(100% - 48px);margin-left:24px}}body main #blog .comment.commentHead p{justify-content:flex-end}body main #blog .comment.commentHead p>span.addComment{visibility:visible}body main #blog .comment.commentHead p>span.toggleLoginTray{color:#dde4ea;cursor:pointer;margin-left:12px}body main #blog .comment.commentHead p>span.toggleLoginTray.noLogin{background:#ccc;color:#f00}body main #blog .comment.level_1,body main #blog .edit.level_1{margin-left:24px}body main #blog .comment.level_2,body main #blog .edit.level_2{margin-left:48px}body main #blog .comment.level_3,body main #blog .edit.level_3{margin-left:72px}body main #login{position:relative;overflow:hidden;height:0;transition:height 0.5s;margin-top:-20px}body main #login.shake{animation:shake 1s}body main #login.shake>div.loggedout>span:nth-child(1),body main #login.shake>div.loggedout>span:nth-last-child(1){opacity:0.1}body main #login.open{max-width:100%;height:240px;border:#f00 1px solid;border-radius:4px}body main #login>div{display:flex;flex-direction:column;justify-content:space-around;height:100%;font-size:20px}body main #login>div.loggedin{background-repeat:no-repeat;background-position:center 75%}body main #login>div.noUser{display:none;pointer-events:none}body main #login>div>span{display:flex;justify-content:space-around}@media only screen and (max-width: 768px){body main #login>div>span{flex-wrap:wrap}}body main #login>div>span:nth-child(1){color:#f00}body main #login>div>span input,body main #login>div>span label{border:0 none;width:28%;padding:8px 2%;text-align:center}body main #login>div>span label{opacity:0;position:absolute;margin-top:0;transition:all 0.5s;z-index:0;color:#666;font-size:20px}@media only screen and (max-width: 768px){body main #login>div>span label{display:none}}body main #login>div>span label.showLabel{font-size:14px;opacity:1;margin-top:-28px}body main #login>div>span label:nth-of-type(1){right:67%}body main #login>div>span label:nth-last-of-type(1){left:67%}body main #login>div>span input{background:#ccc;color:#000;z-index:1;font-size:16px}@media only screen and (max-width: 768px){body main #login>div>span input{font-size:20px;width:88%;margin:4px 0}}body main #login>div>span:nth-last-child(1){background:#f00;padding:8px;color:#fff;border-radius:4px;width:max-content;font-size:20px;line-height:24px;align-self:flex-end;margin-right:22px;cursor:pointer}body footer{position:relative}body footer p{padding:0 10vw 32px;text-align:right;line-height:18px}@media only screen and (min-width: 769px){body footer p br{display:none}}@media only screen and (max-width: 768px){body footer p{text-align:inherit;padding:0 4vw 10vw}body footer p span{display:none}}