*{margin:0;padding:0}body{background-color:#0e0f0e;color:#fff;font-family:Heiti SC;font-size:16px}.header{display:flex;justify-content:center;align-items:center;position:fixed;z-index:100;background-color:#0e0f0e;width:100%;height:80px}.header .title{padding-left:10px;text-align:center;font-weight:700}.header .tags{display:none}.header .tags .tag{padding-left:40px;margin:5px}.header .logo{width:20px;padding-left:40px}.menu{display:flex;position:fixed;z-index:200}.menu-bg{position:fixed;width:0%;height:0%;background-color:#262626;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.menu-icon{padding-left:15px;padding-top:25px;width:30px;height:25px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:fixed}.menu-icon div{width:100%;height:2px;background:white;border-radius:2px;transition:all .3s ease}.menu-icon.clicked div:nth-child(1){transform:rotate(-45deg) translateY(15px)}.menu-icon.clicked div:nth-child(2){display:none}.menu-icon.clicked div:nth-child(3){transform:rotate(45deg) translateY(-15px)}.menu-bg.clicked{opacity:1;visibility:visible;width:100%;height:100%}.menu .tags{padding-left:0;flex-direction:column;margin-top:60px;opacity:0;visibility:hidden;transition:all .3s ease}.menu .tags .tag{margin:20px 0}.menu .tags.clicked{z-index:1;opacity:1;visibility:visible;padding-left:60px}.tag{cursor:pointer;transition:opacity .3s ease}.tag:hover{opacity:.5}.bottom{display:flex;justify-content:center;align-items:center;height:50px}.bottom.fixed{position:fixed;bottom:0;left:0}.bottom_text{font-size:12px}.content{padding-top:80px;width:100%}.works{display:flex;flex-wrap:wrap}.works-rect{width:100%;padding:0 15px;box-sizing:border-box;display:none;cursor:pointer}.works-rect img{width:100%}.works-rect .text{width:100%;padding-top:10px;word-wrap:break-word}.works-rect .type{font-weight:100;font-size:12px}.works-rect .title{font-weight:700;font-size:14px}.works-rect .info{font-weight:100;font-size:12px;padding-bottom:50px}.content .page{padding:0 15px;position:relative}.page .vid-div{width:100%;padding:0;position:relative}.page .vid-div .vid{width:100%}.page .vid-div .play{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;width:50px}.page .title{font-weight:700;width:100%;word-wrap:break-word;padding:20px 0 50px;line-height:24px}.page .img{width:100%;padding:10px 0}.page .title{width:100%;padding:0;font-size:16px;line-height:24px}.page .text{width:100%;padding:0;font-size:14px;line-height:24px}.page .url,.url{width:100%;padding:0;font-size:14px;line-height:24px;color:#339af0;font-weight:700}a:visited,a:hover,a:active{color:#339af0}.news{display:flex;flex-wrap:wrap}.news-rect{width:100%;padding:0 15px 30px;box-sizing:border-box;display:none;cursor:pointer}.news-rect img{width:100%;padding-bottom:20px}.news-rect .title{font-weight:700;font-size:20px;padding-top:10px;padding-bottom:10px}.news-rect .day{font-size:12px;padding-bottom:20px;opacity:.5}.news-rect .text{font-size:14px;padding-bottom:40px}.news-rect .line{width:100%;border-top:1px solid #ccc;opacity:.5;padding:10px 0}.about{display:flex;flex-wrap:wrap;padding:0 15px}.about-rect{width:100%;padding-left:30px;margin-top:-1px;margin-left:-1px;box-sizing:border-box;display:none;cursor:pointer;border:1px solid rgba(204,204,204,.5);align-items:center}.about-rect .text{width:60%;flex-shrink:1}.about-rect img{width:40%;height:auto;margin-left:auto}.about-rect .text .name{font-weight:700;font-size:20px;padding:10px 0;width:90%;white-space:normal;word-wrap:break-word;flex:1}.about-rect .text .info{font-size:14px;width:90%;white-space:normal;word-wrap:break-word;flex:1}.introduce{width:100%;white-space:normal;word-wrap:break-word;padding:50px 0}.introduce .text{padding:5px 0}@media only screen and (min-width:768px){.header{justify-content:flex-start}.header .title{text-align:left}.header .tags{display:flex;overflow-x:auto;justify-content:flex-start}.menu{display:none}.works-rect{width:33.33%}.content .page{padding:0 7.5%;width:85%}.content .news,.content .about{padding:0 60px}.about-rect{width:50%}}@media only screen and (min-width:1024px){.content .page{padding:0 10%;width:80%}.content .news{padding:0 15vw}.content .about{padding:0 120px}.about-rect{width:33.33%}}@media only screen and (min-width:1280px){.content .page{padding:0 15%;width:70%}}