* {
	padding:0;
	margin:0;
	transition-timing-function:cubic-bezier(.19,1,.22,1)
}

/* 鼠标样式：https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur */
body, li, span, p {
    cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),auto;
} /* 鼠标样式 */

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 */