/*css
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
// CssHidex v1.16 [ Commercial Version ]
// Copyright (c) phpkobo.com ( http://www.phpkobo.com/ )
// Email : admin@phpkobo.com
// ID : HDXCS-116
// URL : http://www.phpkobo.com/csshidex
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
.about{
	margin:80px auto 0 auto;
	max-width:600px;
	text-align:center;
}
/* inner */
.about-inner{
	margin:0;
	padding:0;
	opacity:0;
}
.about-inner-show{
	animation-delay:0.5s;
	animation-duration:0.5s;
	animation-name:kf-about-inner-show;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes kf-about-inner-show{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
/* name */
.about-name{
	position:relative;
	top:0;
	margin-bottom:10px;
	font-size:40px;
	line-height:1;
	font-weight:bold;
	color:#aaa;
}
/* version */
.about-version{
	position:relative;
	top:0;
	margin-bottom:10px;
	font-size:20px;
	line-height:1;
	font-weight:bold;
	color:#888;
	letter-spacing:0.1em;
}
/* size */
@media (max-width:700px){
	.about-name{
		font-size:30px;
	}
	.about-version{
		font-size:18px;
	}
}
@media (max-width:500px){
	.about-name{
		font-size:24px;
	}
	.about-version{
		font-size:16px;
	}
}
/* link */
.about-link{
	position:relative;
	top:0;
	font-size:11px;
	line-height:1;
}
.about-link a,
.about-link a:hover,
.about-link a:active,
.about-link a:visited,
.about-link a:focus{
	color:#444;
	letter-spacing:4px;
	text-decoration:none;
}
/* bar */
.about-bar-top,
.about-bar-bottom{
	position:relative;
	height:20px;
	background-image:
		linear-gradient(90deg,
			rgba(255,255,255,1) 0%,
			rgba(255,255,255,0.5) 50%,
			rgba(255,255,255,1) 100%
		);
	background-color:#888;
}
.about-bar-top{
	margin-bottom:15px;
	animation-name:kf-about-bar-top-down;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:both;
	animation-play-state:paused;
}
.about-bar-top-down{
	animation-play-state:running;
}
@keyframes kf-about-bar-top-down{
	0%{
		transform:translateY(-30px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}
.about-bar-bottom{
	margin-top:20px;
	animation-name:kf-about-bar-bottom-up;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:both;
	animation-play-state:paused;
}
.about-bar-bottom-up{
	animation-play-state:running;
}
@keyframes kf-about-bar-bottom-up{
	0%{
		transform:translateY(+30px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}