* {
	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}}
.find-me .item:nth-child(1)::after {
    background-color: #66ccff;
}

.find-me .item:nth-child(2)::after {
    background-color: #0088cc;
}

.find-me .item:nth-child(3)::after {
    background-color: #F58930;
}

.find-me .item:nth-child(4)::after {
    background-color: #28a9e0;
}

.find-me .item:nth-child(5)::after {
    background-color: #f09199;
}

.find-me .item:nth-child(6)::after {
    background-color: #f12d35;
}

.find-me .item:nth-child(7)::after {
    background-color: #555;
}

.find-me .item:nth-child(8)::after {
    background-color: #b600ff;
}

.find-me .item:hover {
    transform: translateY(-3px);
}

.find-me .item:hover::after {
    height: 100%;
    border-radius: 10px;
}

.roll-tag {
    display: none;
    transition: .1s all;
    width: 100%;
    position: relative;
    height: 80px;
    margin-bottom: 10px;
}

.roll-tag.active {
    display: inline-block;
}

.roll-tag span {
    position: absolute;
    animation: tag-entering 0.1s ease-in-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, .28);
    background-color: #333;
    border-radius: 10px;
    padding: 10px 20px;
    display: inline-block;
    white-space: nowrap;
    transform-origin: center left;
}

.roll-tag span::before {
    content: '#';
    margin-right: 5px;
    display: inline;
}

.roll-tag span.removing {
    animation: tag-removing 0.1s ease-in-out;
}

.enter-list {
    margin-left: -2%;
    margin-right: -2%;
}

.enter-list .item {
    position: relative;
    float: left;
    margin: 0 2%;
    width: 29.33%;
    display: block;
    color: #fff;
    text-decoration: none;
    height: 160px;
    background-color: #333;
    border-radius: 10px;
    transition: .2s all;
}

.enter-list .item:hover {
    background-color: #383838;
    transform: translateY(-5px);
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

.enter-list .item .text {
    position: absolute;
    bottom: 10%;
    left: 8%;
}

.enter-list .item .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.enter-list .item .bg div {
    height: 100%;
    width: 100%;
}

.enter-list .item .bg svg {
    position: absolute;
    right: -20px;
    top: -20px;
    height: 160px;
    width: 160px;
    opacity: .05;
}

.enter-list .item .bg .triangle svg {
    height: 180px;
    width: 180px;
}

.enter-list .item .bg .square svg {
    animation: spin-icon 15s linear infinite;
}

.enter-list .item .bg .triangle svg {
    animation: spin-icon 30s linear infinite;
}

.enter-list .item .bg .rounded svg {
    animation: spin-icon 20s linear infinite;
}

@keyframes spin-icon {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes tag-entering {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes tag-removing {
    0% {
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes loading-point {
    0% {
        opacity: .8;
    }
    50% {
        opacity: .25;
    }
    100% {
        opacity: 8;
    }
}

@keyframes error {
    0% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-2px)
    }
    50% {
        transform: translateX(0)
    }
    75% {
        transform: translateX(2px)
    }
    100% {
        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);
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(65px);
    }
}

.gate .links .item {
    width: 30.333%;
}

@media screen and (min-width: 1400px) {
    .container {
        width: 80%;
    }
    .gate .links .item {
        width: 22%;
    }
}

/*# sourceMappingURL=/h.9c69ed6c.css.map */