* {
  padding:0;
  margin:0;
  transition-timing-function:cubic-bezier(.19,1,.22,1)
}
body,
html {
  font-family:Microsoft YaHei;
  -webkit-font-smoothing:antialiased;
  color:#fff;
  line-height:1.5;
  min-width:1150px;
  background-color:#212121;
  font-size:14px;
  overflow-x:hidden
}
.intro {
  position:relative
}
.clear:after {
  content:"";
  display:block;
  height:0;
  visibility:hidden;
  clear:both
}
.chatbox>.line {
  display:none
}
#startrack {
  height:140%;
  width:100%
}
.background.fixed {
  position:fixed;
  top:-60%
}
.background {
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh
}
.background .cover {
  position:absolute;
  bottom:-42%;
  left:0;
  height:100%;
  width:100%;
  background:linear-gradient(0deg,#202020 30%,rgba(32,32,32,0))
}
@keyframes bg {
  0% {
    transform:rotate(0deg);
    border-radius:0
  }
  50% {
    transform:rotate(180deg);
    border-radius:0
  }
  to {
    transform:rotate(1turn);
    border-radius:0
  }
}
@-webkit-keyframes bg {
  0% {
    transform:rotate(0deg);
    border-radius:0
  }
  50% {
    transform:rotate(180deg);
    border-radius:0
  }
  to {
    transform:rotate(1turn);
    border-radius:0
  }
}
@-ms-keyframes bg {
  0% {
    transform:rotate(0deg);
    border-radius:0
  }
  50% {
    transform:rotate(180deg);
    border-radius:0
  }
  to {
    transform:rotate(1turn);
    border-radius:0
  }
}
@-moz-keyframes bg {
  0% {
    transform:rotate(0deg);
    border-radius:0
  }
  50% {
    transform:rotate(180deg);
    border-radius:0
  }
  to {
    transform:rotate(1turn);
    border-radius:0
  }
}
nav {
  position:fixed;
  left:20px;
  bottom:0;
  z-index:2333;
  transform:rotate(-90deg) translateZ(0);
  transform-origin:0 0;
  transition:all .3s ease-out;
  vertical-align:middle;
  font-family:Roboto,Tahoma,Consolas,Microsoft YaHei
}
nav a.clip {
  height:3px;
  width:3px;
  background:#fff;
  border-radius:100%
}
nav a {
  display:inline-block;
  font-size:13px;
  color:#fff;
  text-decoration:none;
  margin:0 10px;
  opacity:.4;
  transition:all .3s;
  vertical-align:middle
}
nav a.time {
  opacity:1
}
nav a.active,
nav a:hover {
  text-decoration:underline;
  opacity:1
}
.ch {
  width:100%;
  padding:80px 0;
  animation:fadedown 1s cubic-bezier(.19,1,.22,1);
  -webkit-animation:fadedown 1s cubic-bezier(.19,1,.22,1);
  -ms-animation:fadedown 1s cubic-bezier(.19,1,.22,1);
  -moz-animation:fadedown 1s cubic-bezier(.19,1,.22,1)
}
.ch h2.chtitle {
  padding-bottom:30px;
  font-size:26px;
  letter-spacing:.2em;
  color:hsla(0,0%,100%,.5)
}
.ch h2.chtitle span {
  color:#fff
}
.ch h2.chtitle:after {
  content:"";
  display:block;
  width:10%;
  height:5px;
  background-color:hsla(0,0%,100%,.5);
  margin-top:30px
}
@keyframes fadedown {
  0% {
    opacity:0;
    transform:translateY(-50px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@-webkit-keyframes fadedown {
  0% {
    opacity:0;
    transform:translateY(-50px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@-ms-keyframes fadedown {
  0% {
    opacity:0;
    transform:translateY(-50px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@-moz-keyframes fadedown {
  0% {
    opacity:0;
    transform:translateY(-50px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.container {
  position:relative;
  width:1000px;
  margin:0 auto;
  height:100%;
  padding:20px 0
}
.intro {
  color:#fff;
  height:100vh;
  padding:0
}
.intro .container {
  animation:fadedown 3.5s cubic-bezier(.19,1,.22,1);
  -webkit-animation:fadedown 3.5s cubic-bezier(.19,1,.22,1);
  -ms-animation:fadedown 3.5s cubic-bezier(.19,1,.22,1);
  -moz-animation:fadedown 3.5s cubic-bezier(.19,1,.22,1)
}
.hello {
  position:absolute;
  bottom:20%;
  left:0
}
.hello h1,
.hello h2 {
  font-weight:400;
  font-size:22px;
  line-height:1.5em;
  letter-spacing:.2em
}
.hello h1 {
  font-size:42px;
  letter-spacing:.5em
}
.hello h2 {
  padding-top:.6em
}
.hello .circle {
  float:left;
  margin-right:10px;
  letter-spacing:0
}
.hello .circle span {
  display:inline-block;
  width:13px;
  height:13px;
  background-color:#fff;
  border-radius:100%;
  margin-right:5px
}
.hello .circle span:first-child {
  background-color:#ff493f
}
.hello .circle span:nth-child(2) {
  background-color:#f7c900
}
.hello .circle span:nth-child(3) {
  background-color:#00ff37
}
.about .introduct {
  line-height:2em
}
.about .introduct img.avatar {
  float:right;
  width:140px;
  margin-left:40px;
  margin-right:20px;
  border-radius:100%
}
.about ul.skill {
  margin-top:50px
}
.about ul.skill li {
  list-style:none;
  padding:10px 0;
  width:45%;
  float:left;
  margin-right:5%
}
.about ul.skill li p {
  display:inline-block;
  width:26%;
  margin-right:3%;
  font-size:12px
}
.about ul.skill li .progress {
  display:inline-block;
  width:70%;
  height:3px;
  background-color:hsla(0,0%,100%,.2);
  vertical-align:middle
}
.about ul.skill li .progress span {
  font-size:12px;
  color:hsla(0,0%,100%,.4);
  opacity:0;
  position:relative;
  top:-5px;
  letter-spacing:.5em;
  transition:all .3s
}
.about ul.skill li:hover .progress span {
  opacity:1;
  top:0
}
.about ul.skill li .progress div {
  background-color:#fff;
  height:3px;
  position:relative
}
ul.skill li .progress div {
  animation:progressin 7s;
  -webkit-animation:progressin 7s;
  -ms-animation:progressin 7s;
  -moz-animation:progressin 7s
}
@keyframes progressin {
  0% {
    width:0
  }
}
@-webkit-keyframes progressin {
  0% {
    width:0
  }
}
@-ms-keyframes progressin {
  0% {
    width:0
  }
}
@-moz-keyframes progressin {
  0% {
    width:0
  }
}
.about ul.skill li .progress div:after {
  content:"";
  display:inline-block;
  position:absolute;
  right:-4px;
  top:-8px;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:3px solid #fff
}
.links a {
  color:#fff;
  text-decoration:none
}
.find .links .item {
  position:relative;
  width:17.6%;
  height:80px;
  line-height:80px;
  margin:10px 1.2%;
  padding:5px 0;
  text-align:center;
  float:left;
  transition:all .2s;
  opacity:.9
}
.find .links .item:hover {
  opacity:1;
  transform:translateY(-10px);
  -webkit-animation:index-link-active 1s cubic-bezier(.315,.605,.375,.925) forwards
}
.find .links .item .inner {
  position:relative;
  z-index:5
}
.find .links .item .bg {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1.8%;
  z-index:0;
  transition:all .15s
}
.find .links .item:hover .bg {
  height:100%;
  width:100%;
  border-radius:5px;
  box-shadow:0 3px 20px rgba(0,0,0,.28)
}
.find .links .item i {
  font-size:20px
}
.find .links .item span {
  display:inline-block;
  width:100px
}
.find .links .col-3 .item {
  width:30.93%;
  margin:10px 1.2%
}
.gate .links .item {
  margin:5px 0;
  padding:15px 1.5%;
  float:left;
  width:22%;
  height:60px;
  transition:all .2s;
  opacity:.85
}
.gate .links .item.akarin {
  opacity:.58
}
.gate .links .item:hover {
  opacity:1;
  border-radius:5px;
  background-color:hsla(0,0%,100%,.25);
  transform:translateY(-5px);
  box-shadow:0 3px 20px rgba(0,0,0,.28);
  -webkit-animation:index-link-active 1s cubic-bezier(.315,.605,.375,.925) forwards
}
.gate .links .item .avatar {
  float:left;
  height:60px;
  line-height:60px;
  width:60px;
  border-radius:100%;
  text-align:center;
  margin-right:15px;
  background-color:#353535;
  overflow:hidden
}
.gate .links .item .avatar i {
  font-size:24px
}
.gate .links .item .avatar img {
  height:60px;
  max-width:60px;
  border-radius:100%
}
.gate .links .item .inner {
  padding:6px
}
.gate .links .item .inner h5 {
  font-weight:400;
  font-size:17px
}
.gate .links .item .inner p {
  font-size:13px;
  color:hsla(0,0%,100%,.6)
}
.footer {
  text-align:center
}
.footer a {
  color:inherit;
  text-decoration:none
}
.footer a:hover {
  text-decoration:underline
}
.footer h3 {
  font-weight:400;
  font-size:20px;
  letter-spacing:.8em;
  margin:6px 0
}
.footer p {
  font-size:12px;
  letter-spacing:1em;
  opacity:.3
}
.footer p.c {
  margin-top:20px;
  letter-spacing:.1em
}
.chatbox .line {
  margin:40px 0
}
.chatbox .line p {
  margin:10px 0
}
.chatbox .question a {
  display:inline-block;
  background-color:hsla(0,0%,100%,.3);
  border-radius:10px 10px 10px 0;
  font-size:12px;
  padding:0 10px;
  margin-right:10px;
  cursor:pointer;
  opacity:.8;
  transform:translateY(0);
  transition:all .2s
}
.chatbox .question a:hover {
  opacity:1;
  transform:translateY(-2px);
  -webkit-animation:index-link-active 1s cubic-bezier(.315,.605,.375,.925) forwards
}
.chatbox .question.disable a {
  opacity:.3
}
.chatbox .question.disable a.selected {
  opacity:.9
}
.chatbox .question a.error {
  opacity:.3;
  animation:error .2s ease-in-out
}
.chatbox .loading span {
  display:inline-block;
  height:10px;
  width:10px;
  border-radius:100%;
  background-color:#fff;
  margin-right:5px;
  animation:loading-point 1.4s ease-in-out infinite both
}
.chatbox .loading span:first-child {
  animation-delay:.2s
}
.chatbox .loading span:nth-child(2) {
  animation-delay:.4s
}
.chatbox .loading span:nth-child(3) {
  animation-delay:.6s
}
@keyframes loading-point {
  0% {
    opacity:.8
  }
  50% {
    opacity:.25
  }
  to {
    opacity:1
  }
}
@keyframes error {
  0% {
    transform:translateX(0)
  }
  25% {
    transform:translateX(-2px)
  }
  50% {
    transform:translateX(0)
  }
  75% {
    transform:translateX(2px)
  }
  to {
    transform:translateX(0)
  }
}
@keyframes index-link-active {
  0% {
    transform:perspective(1600px) rotateX(0) rotateY(0) translateZ(0)
  }
  16% {
    transform:perspective(1600px) rotateX(10deg) rotateY(5deg) translateZ(32px)
  }
  to {
    transform:perspective(1600px) rotateX(0) rotateY(0) translateZ(65px)
  }
}
@media screen and (min-width:1400px) {
  .container {
    width:70%
  }
  nav a {
    font-size:18px
  }
}
@media screen and (max-width:700px) {
  body,
  html {
    min-width:0
  }
  .container {
    width:auto;
    margin:0 5%
  }
  div.el span {
    display:block;
    width:60%;
    left:0;
    top:75px;
    margin:-40% auto 0
  }
  nav {
    padding:15px 5%;
    overflow:auto;
    font-size:13px;
    left:0;
    top:inherit;
    bottom:0;
    transform:rotate(0deg) translateZ(0);
    transform-origin:0 100%;
    white-space:nowrap;
    width:90%;
    background:-webkit-linear-gradient(180deg,transparent,rgba(0,0,0,.8));
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))
  }
  .ch {
    padding:40px 0
  }
  .hello {
    width:90%;
    padding:5%;
    text-align:center;
    bottom:50%
  }
  .hello .circle {
    float:none;
    margin-right:0
  }
  .hello h2 {
    padding-top:0
  }
  .hello h1,
  .hello h2 {
    font-weight:400;
    font-size:14px
  }
  .hello .circle {
    padding:20px
  }
  .hello .circle span {
    margin:0 5px;
    width:10px;
    height:10px
  }
  .hello h1 {
    font-size:26px
  }
  .about .introduct img.avatar {
    float:none;
    margin-left:0;
    margin-right:0;
    width:100px
  }
  .about .introduct,
  .about .skill {
    float:none;
    width:auto
  }
  .about .skill {
    padding-top:40px
  }
  .about ul.skill li {
    width:100%
  }
  .find .links .item,
  .gate .links .item {
    width:46%;
    height:auto;
    padding:5px 0;
    margin:10px 2%
  }
  .find .links .item {
    height:60px;
    line-height:60px;
    font-size:13px
  }
  .gate .links .item .avatar {
    height:40px;
    line-height:40px;
    width:40px
  }
  .gate .links .item .avatar img {
    height:40px;
    max-width:40px
  }
  .gate .links .item .inner {
    padding:0
  }
  .gate .links .item .inner h5 {
    font-size:15px
  }
  .gate .links .item .inner h5,
  .gate .links .item .inner p {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
  }
  .footer {
    padding-bottom:100px
  }
  .footer h3,
  .footer p {
    letter-spacing:.2em
  }
}
/*# sourceMappingURL=/h.9c69ed6c.css.map */