html {--color-link:#5f5f5f;--color-link-hover:#ff963b;--color-enter:#fff;--color-title:#fff;--color-content:#222325;--font-alt:200 6vw/1 "Comic Sans MS","Helvetica Neue","Microsoft Yahei","Microsoft Yahei",-apple-system,sans-serif}
.fade {opacity:0;transition:all 1s;transform:translateY(200px)}
.fade.in {opacity:1;transform:none}
* {box-sizing:border-box;-webkit-text-size-adjust:none}
body,html {height:100%;margin:0;padding:0;border:0}
body {font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
ul {margin:0;padding:0}
img {border:0;vertical-align:middle}
body {cursor:url(../fonts/font_1980901_0y1efhm6cc2.eot);src:url(../fonts/font_1980901_0y1efhm6cc2.eot) format("embedded-opentype"),url(../fonts/9363a72a407c470784d4e727cb9af767.woff) format("woff2"),url(../fonts/font_1980901_0y1efhm6cc2.woff) format("woff"),url(../fonts/font_1980901_0y1efhm6cc2.ttf) format("truetype"),url(../fonts/font_1980901_0y1efhm6cc2.svg) format("svg")}
.icon {display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor;font-family:iconfont!important;font-size:inherit;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-mail:before {content:"\ec34"}
.icon-castle:before {content:"\e626"}
.icon-xiaolian:before {content:"\ec80"}
.icon-github:before {content:"\e620"}
.icon-cloud:before {content:"\e600"}
.icon-hard-drive:before {content:"\e621"}
.icon-Rocket:before {content:"\e65b"}
.icon-portal-enter:before {content:"\ebda"}
main {overflow:hidden}
.content,main {height:100vh;width:100%;position:relative}
.content-intro {z-index:100;height:200vh}
.content-main {position:fixed;top:0;left:0}
.content-inner {position:relative}
.content-inner,.wrap {width:100%;height:100vh}
.wrap {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-align:center}
.content-intro .content-inner {background:var(--color-content)}
.shape {height:100vh;width:100%;display:block;fill:var(--color-content)}
.shape-wrap {position:relative;z-index:10;margin:-5px 0 0;will-change:scroll-position}
.content-title {font:var(--font-alt);color:var(--color-title);line-height:1;margin-top:.8em;margin-bottom:.3em;animation:whiteShadow 1.5s ease-in-out infinite alternate;text-shadow:#452d2d 0 0 1px,#fffffb 0 0 1px,#fffffb 0 0 2px;z-index:1;}
@media screen and (max-width:50em) {.content-title {font-size:2em}
}
@keyframes whiteShadow {0% {text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 5px #333,0 0 8px #333,0 0 9px #333,0 0 10px #333,0 0 15px #333}
to {text-shadow:0 0 .5px #fff,0 0 1px #fff,0 0 1.5px #fff,0 0 2px #333,0 0 4px #333,0 0 5px #333,0 0 6px #333,0 0 8px #333}
}
.content-subtitle {color:#fff;font:var(--font-alt);font-size:1.5em;margin-bottom:2em;text-shadow:0 0 4px #fff}
.enter {color:var(--color-enter);letter-spacing:3px;white-space:pre;pointer-events:auto;transition:all .4s;z-index:999}
.enter:focus,.enter:hover {color:var(--color-link-hover)}
.arrow {position:absolute;left:49.5%;top:95%;transform-origin:50% 50%;transform:translate3d(-50%,0,0)}
.arrow-1 {animation:arrow-movement 2s ease-in-out infinite}
.arrow-2 {animation:arrow-movement 2s 1s ease-in-out infinite}
.arrow:after,.arrow:before {background:#fff;content:"";display:block;height:3px;position:absolute;top:0;left:0;width:13px;box-shadow:1px 1px 20px 0 #fff}
.arrow:before {transform:rotate(45deg) translateX(-10%);transform-origin:top left}
.arrow:after {transform:rotate(-45deg) translateX(10%);transform-origin:top right}
@keyframes arrow-movement {0% {opacity:0;top:92%}
70% {opacity:1}
to {opacity:0}
}
.content-subtitle span {animation:letter-glow .7s 0s ease both}
@keyframes letter-glow {0% {opacity:0;text-shadow:0 0 1px hsla(0,0%,100%,.1)}
66% {opacity:1;text-shadow:0 0 20px hsla(0,0%,100%,.9)}
77% {opacity:1}
to {opacity:.7;text-shadow:0 0 20px hsla(0,0%,100%,.2)}
}
.content-subtitle span:first-child {animation-delay:50ms}
.content-subtitle span:nth-child(2) {animation-delay:.1s}
.content-subtitle span:nth-child(3) {animation-delay:.15s}
.content-subtitle span:nth-child(4) {animation-delay:.2s}
.content-subtitle span:nth-child(5) {animation-delay:.25s}
.content-subtitle span:nth-child(6) {animation-delay:.3s}
.content-subtitle span:nth-child(7) {animation-delay:.35s}
.content-subtitle span:nth-child(8) {animation-delay:.4s}
.content-subtitle span:nth-child(9) {animation-delay:.45s}
.content-subtitle span:nth-child(10) {animation-delay:.5s}
.content-subtitle span:nth-child(11) {animation-delay:.55s}
.content-subtitle span:nth-child(12) {animation-delay:.6s}
.content-subtitle span:nth-child(13) {animation-delay:.65s}
.content-subtitle span:nth-child(14) {animation-delay:.7s}
.content-subtitle span:nth-child(15) {animation-delay:.75s}
.content-subtitle span:nth-child(16) {animation-delay:.8s}
.content-subtitle span:nth-child(17) {animation-delay:.85s}
.content-subtitle span:nth-child(18) {animation-delay:.9s}
.content-subtitle span:nth-child(19) {animation-delay:.95s}
.content-subtitle span:nth-child(20) {animation-delay:1s}
.content-subtitle span:nth-child(21) {animation-delay:1.05s}
.content-subtitle span:nth-child(22) {animation-delay:1.1s}
.content-subtitle span:nth-child(23) {animation-delay:1.15s}
.content-subtitle span:nth-child(24) {animation-delay:1.2s}
.content-subtitle span:nth-child(25) {animation-delay:1.25s}
.content-subtitle span:nth-child(26) {animation-delay:1.3s}
.content-subtitle span:nth-child(27) {animation-delay:1.35s}
.content-subtitle span:nth-child(28) {animation-delay:1.4s}
.content-subtitle span:nth-child(29) {animation-delay:1.45s}
.content-subtitle span:nth-child(30) {animation-delay:1.5s}
.content-subtitle span:nth-child(31) {animation-delay:1.55s}
.content-subtitle span:nth-child(32) {animation-delay:1.6s}
.content-subtitle span:nth-child(33) {animation-delay:1.65s}
.content-subtitle span:nth-child(34) {animation-delay:1.7s}
.content-subtitle span:nth-child(35) {animation-delay:1.75s}
.content-subtitle span:nth-child(36) {animation-delay:1.8s}
.content-subtitle span:nth-child(37) {animation-delay:1.85s}
.content-subtitle span:nth-child(38) {animation-delay:1.9s}
#background {position:absolute;width:100%;height:100%;z-index:0;}
#background:focus {outline:none;}
#page {display:-ms-flexbox;display:flex;background-color:transparent;color:#eee;min-height:100%;transition:background-color 5s ease}
#page a {color:#eee;text-decoration:none}
#page a:hover {color:#fff;text-decoration:underline}
#card {position:relative;margin:auto;transition:width .5s ease,height .5s ease}
#card header {position:relative;height:105px;padding:21px 0 0 100px;color:#ececec}
#card header img {position:absolute;left:0;top:0;padding:2px;box-shadow:0 0 2px rgba(0,0,0,.3);border-radius:5px}
#card h1,#card h2 {margin:0;font-weight:400;transform:translateY(-20px)}
#card h1 {color:#222325;text-shadow:#676666 1px 1px 2px;letter-spacing:1px}
#card h2 {margin-top:.1em;font-size:1.1em;text-shadow:#888 1px 1px 2px;letter-spacing:2px}
#card ul {position:relative;padding:0;transition:width .5s ease,height .5s ease}
#card ul:after {content:"";clear:both;display:block}
#card li {position:absolute;list-style:none;width:200px;height:200px;overflow:hidden;line-height:200px;background-color:#888;text-align:center;font-size:4rem;transition:background-color .3s ease,top .5s ease,left .5s ease,width .5s ease,height .5s ease}
#card li#half-first,#card li.quarter {height:95px;line-height:95px;font-size:2rem}
#card li.quarter {width:95px}
#card li a {display:inline-block;width:100%;height:100%;overflow:hidden}
#card li a:hover {text-decoration:none}
#card li span {position:absolute;top:100%;left:0;width:100%;height:100%;opacity:0;font-size:62.5%;transition:top .3s ease,opacity .3s ease}
#card li i {display:inline-block;width:100%;height:100%;transition:opacity .3s ease,font-size .3s ease,color .3s ease}
#card li:hover i {opacity:0;font-size:10%}
#card li:hover span {display:block;top:0;opacity:1}
#quarter-first img {position:absolute;top:100%;left:0;width:100%;height:100%;opacity:0;font-size:62.5%;transition:top .3s ease,opacity .3s ease}
#whole-first {left:0;top:0}
#whole-first:hover {background-color:#39c}
#whole-second:hover {background-color:#d81}
#quarter-second:hover {background-color:#333}
#half-first:hover {background-color:#595}
#quarter-first:hover img {display:block;top:0;opacity:1}
#quarter-third:hover {background-color:#dd4b39}
#quarter-fourth:hover {background-color:#fff}
li#quarter-fourth:hover i {opacity:1;font-size:inherit;color:#888}
li#quarter-first span {top:0}
@media(min-width:801px) {#card,#card ul {width:725px}
#card ul {height:200px;transition:width .5s ease}
#card header {position:absolute;top:-105px}
#whole-second {left:210px;top:0}
#half-first {left:420px;top:0}
#quarter-first {left:630px;top:0}
#quarter-second {left:420px;top:105px}
#quarter-third {left:525px;top:105px}
#quarter-fourth {left:630px;top:105px}
}
@media(min-width:641px) and (max-width:800px) {#card,#card ul {transition:width .5s ease}
}
@media(min-width:551px) and (max-width:800px) {#card,#card ul {width:515px}
#card ul {height:305px}
#whole-second {left:210px;top:0}
#card li#half-first {left:0;top:210px;width:305px}
#quarter-first {left:315px;top:210px}
#quarter-second {left:420px;top:0}
#quarter-third {left:420px;top:105px}
#quarter-fourth {left:420px;top:210px}
}
@media(min-width:451px) and (max-width:550px) {#card,#card ul {width:410px}
#card ul {height:410px}
#whole-second {left:210px;top:0}
#card li#half-first {left:0;top:210px;width:410px}
#quarter-first {left:210px;top:315px}
#quarter-second {left:0;top:315px}
#quarter-third {left:105px;top:315px}
#quarter-fourth {left:315px;top:315px}
}
@media(max-width:480px) {#card,#card ul {transition:none}
}
@media(max-width:450px) {#card {width:100%;height:100%;padding:10px}
#card ul {width:0;height:0;padding:50%}
#card li {width:49%;height:49%}
#card li#half-first {width:100%;height:23.5%}
#card li.quarter {width:23.5%;height:23.5%}
#card li a {position:absolute;left:0;top:0}
#whole-second {left:51%;top:0}
#card li#half-first {left:0;top:51%}
#quarter-first {left:51%;top:76.5%}
#quarter-second {left:0;top:76.5%}
#quarter-third {left:25.5%;top:76.5%}
#quarter-fourth {left:76.5%;top:76.5%}
}
@media(max-width:320px) {#card li {line-height:147px}
#card li.quarter,#half-first {line-height:70px}
}