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",-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;
 cursor:url(default.cur),auto!important
}
ul {
 margin:0;
 padding:0
}
img {
 border:0;
 vertical-align:middle
}
a,
img {
 cursor:url(pointer.cur),auto!important
}
a {
 text-decoration:none;
 color:var(--color-link);
 outline:0
}
.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
}
main {
 overflow:hidden
}
.content,
main {
 height:100vh;
 width:100%;
 position:relative
}
.content {
 background-image:url(/assets/img/background.jpg)
}
.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
}
@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:-1
}
#page {
 display:-ms-flexbox;
 display:flex;
 background-color:rgba(85,85,85,0);
 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;
 padding-bottom: 120px !important;
}
#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:1px;
 font-weight:400;
 transform:translateY(-25px)
}
#card h1 {
 color: #222325;
 text-shadow:#676666 1px 1px 2px;
 letter-spacing:1px
}
#card h2 {
 color: #222325;
 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
 }
}
/* 底部版权 */
.footer-copyright {
 position: fixed;
 left: 0;
 bottom: 20px;
 width: 100%;
 text-align: center;
 font-size: 13px;
 line-height: 1.6;
 z-index: 9999;
 transition: color 0.4s ease, text-shadow 0.4s ease, bottom 0.3s ease, font-size 0.3s ease;
 padding: 0 10px;
 padding-bottom: env(safe-area-inset-bottom);
 color: #ffffff;
 text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.footer-copyright a {
 color: #ffffff;
 text-decoration: none;
 transition: color 0.4s ease;
}
.footer-copyright a:hover {
 opacity: 0.8;
}
.footer-copyright.dark-text {
 color: #000000;
 text-shadow: 0 0 3px rgba(255,255,255,1);
}
.footer-copyright.dark-text a {
 color: #000000;
}
.footer-copyright.dark-text a:hover {
 opacity: 0.7;
}
@media (max-height: 720px) {
 .footer-copyright {
  bottom: 90px;
  font-size: 12px;
 }
}
@media (max-height: 650px) {
 .footer-copyright {
  bottom: 130px;
  font-size: 11px;
 }
}
@media (max-width: 768px) {
 .footer-copyright {
  bottom: calc(90px + env(safe-area-inset-bottom));
  font-size: 12px;
 }
}