@font-face{
	font-family: xingkai;
	src: url('../font/xingkai.ttf');
}
@font-face{
	font-family: Microsoft YaHei;
	src: url('../font/msyh.ttf');
}
img{
	display: block;
	width: 100%;
}
a{
	color: #6495ED;
}
a:hover {
	color: #6495ED; 
	text-decoration: underline;
}
p{
	font-family: Microsoft YaHei;
}
.photo{
	cursor: pointer;
}
.lefttitle{
	font-family: xingkai;
	font-size: 60px;
	width: 60px;
	left: 35px;
	top: 140px;
	float: left;
	position: fixed;
}
.leftsubtitle{
	font-family: xingkai;
	font-size: 50px;
	width: 50px;
	float: left;
	left: 110px;
	top: 110px;
	position: fixed;
}
.righttitle{
	font-family: xingkai;
	font-size: 60px;
	width: 60px;
	right: 35px;
	top: 120px;
	float: right;
	position: fixed;
}
.rightsubtitle{
	font-family: xingkai;
	font-size: 50px;
	width: 50px;
	float: right;
	right: 110px;
	top: 150px;
	position: fixed;
}
.lefttitlebg{
	top: 70px;
	left: 0px;
	position: fixed;
	z-index: -1;
}
.righttitlebg{
	top: 70px;
	right: 0px;
	position: fixed;
	z-index: -1;
}
.comment{
	font-family: Microsoft YaHei;
}
.date{
	font-family: Microsoft YaHei;
}
.name{
	font-family: Microsoft YaHei;
}
#prepage{
	bottom: 10px; 
	left: 20%;
	display: inline;
	position: absolute;
	font-family: Microsoft YaHei;
	cursor: pointer;
	font-size: 10px;
}
#nextpage{
	bottom: 10px; 
	right: 15%;
	display: inline;
	position: absolute;
	font-family: Microsoft YaHei;
	cursor: pointer;
	font-size: 10px;
}
#numpage{
	text-align: center;
	bottom: 10px; 
	display: inline;
	margin: 0px;
	position: absolute;
	font-family: Microsoft YaHei;
	font-size: 10px;
}
@-webkit-keyframes in{ /* Safari 和 Chrome */
	from {width: 100%;}
	to {width: 120%;}
}
@-webkit-keyframes out{ /* Safari 和 Chrome */
	from {width: 120%;}
	to {width: 100%;}
}
@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
div.spinner {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
}
div.spinner div {
    width: 20%;
    height: 40%;
    background: #000;
    position: absolute;
    left: 100%;
    top: 100%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -webkit-border-radius: 30px;
}
div.spinner div.bar1 {
    -webkit-transform:rotate(0deg) translate(0, -142%);
        -webkit-animation-delay: 0s;
}
div.spinner div.bar2 {
    -webkit-transform:rotate(30deg) translate(0, -142%);
        -webkit-animation-delay: -0.9167s;
}
div.spinner div.bar3 {
    -webkit-transform:rotate(60deg) translate(0, -142%);
        -webkit-animation-delay: -0.8333s;
}
div.spinner div.bar4 {
    -webkit-transform:rotate(90deg) translate(0, -142%);
        -webkit-animation-delay: -0.75s;
}
div.spinner div.bar5 {
    -webkit-transform:rotate(120deg) translate(0, -142%);
        -webkit-animation-delay: -0.6667s;
}
div.spinner div.bar6 {
    -webkit-transform:rotate(150deg) translate(0, -142%);
        -webkit-animation-delay: -0.5833s;
}
div.spinner div.bar7 {
    -webkit-transform:rotate(180deg) translate(0, -142%);
        -webkit-animation-delay: -0.5s;
}
div.spinner div.bar8 {
    -webkit-transform:rotate(210deg) translate(0, -142%);
        -webkit-animation-delay: -0.4167s;
}
div.spinner div.bar9 {
    -webkit-transform:rotate(240deg) translate(0, -142%);
        -webkit-animation-delay: -0.3333s;
}
div.spinner div.bar10 {
    -webkit-transform:rotate(270deg) translate(0, -142%);
        -webkit-animation-delay: -0.25s;
}
div.spinner div.bar11 {
    -webkit-transform:rotate(300deg) translate(0, -142%);
        -webkit-animation-delay: -0.1667s;
}

div.spinner div.bar12 {
    -webkit-transform:rotate(330deg) translate(0, -142%); 
    -webkit-animation-delay: -0.0833s;
}