@charset "UTF-8";*{text-decoration:none;color:inherit;resize:none;list-style-type:none;outline:medium;font-style:normal;margin:0 auto;padding:0;border:0;font-family:"Microsoft YaHei","iconfont"}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:4px;background:rgba(255,255,255,0)}::-webkit-scrollbar-thumb{background:#bf803d}@font-face{font-family:'iconfont';src:url('img/iconfont.woff') format('woff')}body{overflow-x:hidden}input{display:none}h1{font-weight:inherit!important}z{position:absolute}z:nth-of-type(1){top:calc(100% + 50px)}z:nth-of-type(2){top:calc(100% + 600px)}h{position:absolute;width:1px;height:1px;top:100%}.dN *{display:none!important}.logo{z-index:5;position:absolute;top:20px;left:10px;width:100px;height:100px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}.logo i{color:#c3322d;font-size:5em;transition:.5s}.logo span{position:absolute;writing-mode:vertical-lr;color:#bf803d;right:-30px;font-weight:bold;font-size:.7em;line-height:1em;transition:.5s .2s}copyright{font-size:.8em;line-height:3em;color:#d09468;display:block;padding:30px;letter-spacing:.04em}copyright a{padding:0px 0;display:block;cursor:pointer;user-select:none}.navButton{position:absolute;right:20px;top:25px;z-index:5;width:50px;height:50px;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}.navButton>i{position:absolute}.navButton>i:nth-of-type(1){height:5px;background:#bf803d;top:16px;left:3px;width:calc(100% - 6px);transition:.5s}.navButton>i:nth-of-type(2){width:36px;background:#eecc95;top:21px;left:7px;height:8px;transition:.3s}.navButton>i:nth-of-type(3){height:5px;background:#bf803d;top:28px;left:3px;width:calc(100% - 6px);transition:.3s}#navButton:checked ~ .navButton{position:fixed;transition:.5s}#navButton:checked ~ .navButton>i:nth-of-type(1){background:#dab38a}#navButton:checked ~ .navButton>i:nth-of-type(2){background:#bd8358;height:54px;top:21px;box-shadow:0 .5px 0 #c3322d inset,0 -.5px 0 #c3322d inset}#navButton:checked ~ .navButton>i:nth-of-type(3){top:75px;background:#dab38a}.navButton:nth-of-type(2){font-size:.9em;writing-mode:vertical-lr;color:#fff;width:36px;height:54px;right:27px;top:46px;opacity:0}#navButton:checked ~ .navButton:nth-of-type(2){opacity:1}.navButton:nth-of-type(3){writing-mode:vertical-lr;top:80px;font-size:.9em;line-height:1em;transition:0s;color:#8d6741}.navButton:nth-of-type(3) b{display:contents;color:#bf803d;transition:.3s;font-weight:inherit}#navButton:checked ~ .navButton:nth-of-type(3){opacity:0}.scroll:nth-of-type(2) ~ .navButton{position:fixed;transform:rotateZ(450deg);transition:.5s}.scroll:nth-of-type(2) ~ .navButton:nth-of-type(3){transform:rotateZ(0deg);writing-mode:horizontal-tb;text-align:right;right:72px;top:25px;transition:.3s}#navButton:checked ~ .scroll:nth-of-type(2) ~ .navButton{transform:rotateZ(360deg)}.scroll:nth-of-type(2) ~.navButton>i:nth-of-type(1){transition:.5s}.scroll:nth-of-type(2) ~.navButton>i:nth-of-type(2){transition:.3s .3s}.scroll:nth-of-type(2) ~.navButton>i:nth-of-type(3){transition:.3s .3s}#navButton:checked ~  .navButton:nth-of-type(2){opacity:1;transition:.3s .3s}.scroll:nth-of-type(2) ~ .navButton:nth-of-type(3){transition:.3s .5s;animation:d1 1s;color:#e9d4be}.scroll:nth-of-type(2) ~ .navButton:nth-of-type(3) b{font-weight:inherit;color:#c98e50}@keyframes d1{0%{opacity:0}60%{opacity:0}}#navButton:checked ~  .scroll:nth-of-type(2) ~ .navButton:nth-of-type(3){transform:rotateZ(0deg)}.nav::-webkit-scrollbar{width:0px;background:rgba(0,0,0,0)}.nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,0)}.nav{position:fixed;top:0%;left:-100%;width:100%;height:100%;z-index:4;background:url(img/Bred.png) #bc2c26;background-size:80px;transition:.4s;border-radius:0 100% 100% 0;overflow-y:scroll;overscroll-behavior:contain}.nav>label{height:55%;top:25%;position:absolute;color:#fff;writing-mode:vertical-lr;border-right:.7px dashed #bf803d;transition:.5s .1s;width:25%;display:none;align-items:center;cursor:pointer;user-select:none}.nav>label>h1{font-size:1em;letter-spacing:.5em;position:absolute;margin-left:-1em;top:0px}.nav>label>p{font-size:.8em;color:#e5bc91;position:absolute;margin-left:1.5em;letter-spacing:.1em;top:0px}.nav>label>s{writing-mode:horizontal-tb;position:absolute;bottom:0%;color:#eaab69;font-weight:300;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:99px;transition:.2s}.nav>label:nth-of-type(1){left:0%}.nav>label:nth-of-type(2){left:25%}.nav>label:nth-of-type(3){left:50%}.nav>label:nth-of-type(4){left:75%;border-right:0px}.nav>i{position:absolute;width:60px;height:80px;bottom:0px;background-repeat:no-repeat;background-position:center;z-index:1;background-size:25px;cursor:pointer;user-select:none;transition:.2s;font-size:12px;text-indent:0px;color:#c58f68;line-height:20px}.nav>i:nth-of-type(1){left:10px;background-image:url(img/ui.png);text-indent:15px}.nav>i:nth-of-type(1):before{content:"STUDIO"}.nav>i:nth-of-type(2){left:80px;background-image:url(img/fz.png)}.nav>i:nth-of-type(3){right:10px;background-image:url(img/do.png)}.nav>i:focus{background-size:35px}.nav>i:focus:before{content:""}.nav>i:focus h2{display:flex;cursor:default;animation:navH2 .5s}.nav>i:focus ~ label{height:45%}.nav>i:focus ~ label:nth-of-type(1){transition:.5s}.nav>i:focus ~ label:nth-of-type(2){transition:.6s}.nav>i:focus ~ label:nth-of-type(3){transition:.8s}.nav>i:focus ~ label:nth-of-type(4){transition:.9s}@keyframes navH2{0%{opacity:0;top:-20px}}.nav>i h2{position:absolute;background:#bd8358;height:50px;z-index:1;top:-50px;left:0px;font-weight:300;font-size:1.3em;color:#fff;display:none;align-items:center;text-indent:none;padding-left:20px}.nav>i:nth-of-type(1) h2{width:270px;text-indent:0px}.nav>i:nth-of-type(2) h2{width:220px}.nav>i:nth-of-type(3) h2{width:180px;left:inherit;right:0px}.nav>i:nth-of-type(3) h2 i{left:inherit;right:22px;background:#c99b6a}.nav>i h2 i{width:16px;height:16px;background:#bd8358;bottom:-6px;position:absolute;left:22px;transform:rotateZ(45deg)}.nav>i h2 s{display:contents;color:#e5cbb0}.nav>i h2 a{position:absolute;background:#c99b6a;right:0;width:80px;cursor:pointer;height:50px;top:0px;display:flex;align-items:center;justify-content:center;z-index:99!important}.nav>label:nth-of-type(4) h1:before{content:"创意工坊"}.nav>label:nth-of-type(4) p:before{content:"一些新奇点子，DEMO，原创小游戏"}.nav>label:nth-of-type(4) *{transition:.2s}.nav>label:nth-of-type(4):focus{background:rgba(172,108,68,0.71);transform:rotateY(-180deg)scale(.9);border-radius:2px}.nav>label:nth-of-type(4):focus *{transform:rotateY(180deg)}.nav>label:nth-of-type(4):focus h1{top:40px;animation:logo 2s}.nav>label:nth-of-type(4):focus p{top:40px;animation:logo 2s}.nav>label:nth-of-type(4):focus s{bottom:5%;animation:logo 2s}.nav>label:nth-of-type(4):focus h1:before{content:"即将上线"}.nav>label:nth-of-type(4):focus p:before{content:"该版块内容正在整理中,敬请期待..."}#navButton:checked ~ .nav{left:-0%;border-radius:0 0% 0% 0}#navButton:checked ~ .main>i:nth-of-type(1){display:none}#navButton:checked ~ .home{opacity:0}#navButton:checked ~ .blog{opacity:0}#navButton:checked ~ .works{opacity:0}#navButton:checked ~ .logo{position:fixed;animation:logo 1s}@keyframes logo{0%{opacity:0}}#navButton:checked ~ .logo i{color:#fff}#navButton:checked ~ .logo span{color:#eaab69}#navButton:checked ~ .nav>label{display:flex;animation:nav 1s}@keyframes nav{0%{left:0%;opacity:0}20%{left:0%;opacity:0}}#navButton:checked ~ .nav>i:nth-of-type(1){animation:dateL2 1.5s}#navButton:checked ~ .nav>i:nth-of-type(2){animation:dateL2 1.8s}#navButton:checked ~ .nav>i:nth-of-type(3){animation:dateL2 2.0s}#music{position:absolute;right:20px;top:180px;z-index:3;width:50px;height:50px;cursor:pointer;user-select:none}#music *{position:absolute;color:#84513a;transition:.5s;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:99px}.musicPause>i{width:30px;height:30px;left:10px;top:10px;box-shadow:0 0 0 3px #bc2c26 inset}.musicPause>i>i{width:30px;height:3px;background:rgb(188,44,38);transform:rotateZ(35deg)}.musicPausePlay>i{width:30px;height:30px;left:10px;top:10px;box-shadow:0 0 0 3px #e9be84 inset}.musicPausePlay>i>i{width:30px;height:3px;background:rgba(0,0,0,0);transform:rotateZ(150deg)}@media screen and (min-aspect-ratio:1/1) and (min-width:500px){z:nth-of-type(2){top:calc(100% + 320px)}.main{width:100%;position:relative;padding-bottom:50%}.main>i:nth-of-type(1){width:24%;padding-bottom:24%;margin-left:-12%;left:50%;z-index:1;bottom:13%}.main>i:nth-of-type(4){width:15%;height:30%;top:25%;left:20%}.main>i:nth-of-type(5){width:10%;height:20%;top:10%;left:55%}.main>i:nth-of-type(6){width:13%;height:28%;top:45%;left:60%}.main>i:nth-of-type(2){height:20%}.main>i:nth-of-type(2)>i:nth-of-type(3)>i{transform:perspective(150px) rotateX(30deg)}.main>i:nth-of-type(3){height:20%}.main>i:nth-of-type(3)>i:nth-of-type(3)>i{transform:perspective(150px) rotateX(30deg)}.nav{border-radius:0}.nav>label h1{font-weight:600!important}.blog{position:relative;padding-bottom:10px}.blog>label{width:calc(95% - 160px);height:100px}.home{height:inherit;width:100%;max-width:1000px;top:0px;z-index:2;padding-bottom:50%;background:none;overflow:inherit;animation:blogT 1.2s}#navButton:checked ~ .home{display:none}.scroll:nth-of-type(2) ~ .home{display:none}.home>label{color:#97530c;font-weight:bolder;left:120px}.home>label:nth-of-type(1){top:40%}.home>label:nth-of-type(2){top:calc(40% + 50px)}.home>label:nth-of-type(3){top:calc(40% + 100px)}.home>label:nth-of-type(4){top:calc(40% + 0px);box-shadow:0 0 0 8px #c3322d inset}@keyframes homeTab4{0%{box-shadow:0 0 0 0px #c3322d inset}}#homeTab1:checked~.home>label:nth-of-type(4){top:calc(40% + 0px)}#homeTab2:checked~.home>label:nth-of-type(4){top:calc(40% + 50px)}#homeTab3:checked~.home>label:nth-of-type(4){top:calc(40% + 100px)}.home>p:nth-of-type(1){color:#af7041;height:50%;top:40%;left:170px}.home>p:nth-of-type(1)>u{box-shadow:2px 0 0 0 rgba(189,131,88,0.2)}.home>p:nth-of-type(2){color:#af7041;height:50%;top:40%;right:120px}.home>p:nth-of-type(2)>u{box-shadow:2px 0 0 0 rgba(189,131,88,0.2)}.home>a{position:fixed;bottom:0px}.blogDate span:nth-of-type(1){top:20%}.blogDate span:nth-of-type(2){top:30%}.blogDate span:nth-of-type(3){top:45%}.blogDate span:nth-of-type(3) label{width:16.5%;padding:4% 0}.blogDate>label:last-of-type{bottom:30px}.blogT{padding:40px 120px}.nav>label:hover s{background:#bd8358;color:#fff}.nav>label h1,.nav>label p{transition:.2s}.nav>label:hover h1{transform:scale(.8)}.nav>label:hover p{transform:scale(1.1)}.blog>span label:hover{color:#fff;background:#cb3530;border-radius:99px}.blogDate span:nth-of-type(1) label:hover{box-shadow:0 -2px 0 0 #bc2924 inset,0 -5px 0 0 #d48c69 inset}.blogDate span:nth-of-type(3) label:hover{border-radius:8px;background:#c3322d}.blog>label:hover{width:calc(95% - 140px);transition:.3s}.blogT p::selection,.blogT h1::selection{color:#452300;background:#f8e3c2;text-decoration:1px double underline #c65c59}.blogP label:hover{transform:scale(.9)}.workLi:hover s{transform:scale(1.2)rotateZ(20deg)}.workLi:hover{margin:0 30px;margin:0 40px}.worksT a:hover{background:rgba(255,255,255,0.1)}.worksT ul li:hover i{transform:scale(1.5)}.works{position:relative;padding-bottom:120px;padding-top:50px}.worksT img{width:calc(50% - 100px);top:80px;left:60px}.worksT img:nth-of-type(1){margin-left:60px;margin-top:80px}.worksT video{width:calc(50% - 100px);margin-left:60px;margin-top:80px}.worksT div{position:fixed;width:calc(50% - 45px);top:0px;right:0px;height:calc(100% - 45px);padding:50px 30px 0 10px;border-left:1px dashed rgba(255,255,255,0.3)}.worksT p{margin:20px 0px 120px 60px;width:calc(50% - 100px)}.worksT span:last-of-type{margin:0px;position:fixed;right:65px;bottom:80px}}@media screen and (min-aspect-ratio:1/1) and (max-width:800px){.home>label{left:70px}.home>p:nth-of-type(1){left:120px}.home>p:nth-of-type(2){right:80px}}@media screen and (min-width:1000px){body{background:#ffe4b9}z:nth-of-type(2){top:calc(100% + 450px)}.main{padding-bottom:500px;max-width:1000px}.home{padding-bottom:0%;height:500px;left:50%;animation:none;margin-left:-500px;box-shadow:50px 0 50px 0 #ffe4b9 inset,-50px 0 50px 0 #ffe4b9 inset}.logo{left:50%;margin-left:-500px}#music{right:inherit;left:50%;margin-left:440px}.navButton{right:inherit;left:50%;margin-left:440px}.navButton:nth-of-type(2){margin-left:447px}.scroll:nth-of-type(2) ~ .navButton:nth-of-type(3){margin-left:390px}.nav>label{height:55%;top:25%;width:250px}.nav>label:nth-of-type(1){left:50%;margin-left:-500px}.nav>label:nth-of-type(2){left:50%;margin-left:-250px}.nav>label:nth-of-type(3){left:50%;margin-left:-0px}.nav>label:nth-of-type(4){left:50%;margin-left:250px}.nav>i:nth-of-type(1){left:50%;margin-left:-500px}.nav>i:nth-of-type(2){left:50%;margin-left:-430px}.nav>i:nth-of-type(3){right:50%;margin-right:-490px}@keyframes nav{0%{left:0%;opacity:0;margin-left:-500px}20%{left:0%;opacity:0;margin-left:-500px}}.blog>label{width:800px;height:100px}.blog>label:hover{width:820px}.blog>span{width:950px}.blog>span label{left:0px}.blogP iframe{width:1000px;left:50%;margin-left:-500px}.scroll:nth-of-type(2) ~ .works .worksTab{left:50%;margin-left:-480px}.scroll:nth-of-type(2) ~ .works .worksTab:nth-of-type(2){left:50%;margin-left:-420px}.scroll:nth-of-type(2) ~ .works .worksTab:nth-of-type(3){left:50%;margin-left:-360px}#all:checked ~ .scroll:nth-of-type(2) ~ .works>u{left:50%;margin:0 20px 0 -460px}#uiux:checked ~ .scroll:nth-of-type(2) ~ .works>u{left:50%;margin:0 20px 0 -400px}#viad:checked ~ .scroll:nth-of-type(2) ~ .works>u{left:50%;margin:0 20px 0 -340px}.workLi{margin:0 auto;width:800px}.workLi:hover{margin:0 auto;width:780px}.worksT img{width:calc(50% - 160px);top:80px;left:120px}.worksT img:nth-of-type(1){margin-left:120px;margin-top:80px}.worksT video{width:calc(50% - 160px);margin-left:120px;margin-top:80px}.worksT div{position:fixed;width:calc(50% - 155px);top:0px;right:80px;height:calc(100% - 45px);padding:50px 60px 0 10px;border-left:1px dashed rgba(255,255,255,0.3)}.worksT p{margin:20px 0px 120px 120px;width:calc(50% - 160px)}.worksT span:last-of-type{margin:0px;position:fixed;right:180px;bottom:80px}.worksI{background:#000}.worksI img{width:700px;margin-bottom:30px}.worksI span{left:calc(50% - 340px)}.worksI .vW{display:block;width:700px;margin:25px auto}.worksI .vH{display:block;width:calc(30% - 50px);margin:25px auto}copyright{width:880px;text-align:center}}@media screen and (max-height:500px){.nav>label{height:45%;top:30%}.nav>label>h1{margin-left:-2em}.nav>label>p{margin-left:2em}.nav>label>s{display:none}.nav>i:focus ~ label{height:45%}.blogDate span:nth-of-type(1){top:30%}.blogDate span:nth-of-type(2){top:42%}.blogDate span:nth-of-type(3){top:60%}.blogDate span:nth-of-type(3) label{padding:2% 0}.blogDate>label:last-of-type{display:none}}@media screen and (min-aspect-ratio:1/1) and (min-height:600px){.home>a{display:none}}