@charset "utf-8";
/* CSS Document */
.banner { background: url(../images/banner.jpg) no-repeat center; height: 290px; margin: 10px auto; width: 100%; font-size: 16px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; }
.texts { line-height: 36px; padding: 90px 0 0 40px; text-shadow: 1px 1px rgba(255,255,255,0.3); }
.texts p { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); }
.texts p:hover { padding-left: 20px }
.texts p:nth-child(1) { -webkit-animation: animations 3s ease-out 1s backwards; -moz-animation: animations 3s ease-out 1s backwards; -o-animation: animations 3s ease-out 1s backwards; -ms-animation: animations 3s ease-out 1s backwards; animation: animations 3s ease-out 1s backwards; }
.texts p:nth-child(2) { -webkit-animation: animations 3s ease-out 4s backwards; -moz-animation: animations 3s ease-out 4s backwards; -o-animation: animations 3s ease-out 4s backwards; -ms-animation: animations 3s ease-out 4s backwards; animation: animations 3s ease-out 4s backwards; }
@-webkit-keyframes animations { 0% {
-webkit-transform:translate(0);
opacity:0;
}
 50% {
-webkit-transform:translate(30px);
opacity:.5;
}
 100% {
-webkit-transform:translate(60px);
opacity:1;
}
}
@-moz-keyframes animations { 0% {
-moz-transform:translate(0);
opacity:0;
}
 50% {
-moz-transform:translate(30px);
opacity:.5;
}
 100% {
-moz-transform:translate(60px);
opacity:1;
}
}
@-o-keyframes animations { 0% {
-o-transform:translate(0);
opacity:0;
}
 50% {
-o-transform:translate(30px);
opacity:.5;
}
 100% {
-o-transform:translate(60px);
opacity:1;
}
}
@-ms-keyframes animations { 0% {
-ms-transform:translate(0);
opacity:0;
}
 50% {
-ms-transform:translate(30px);
opacity:.5;
}
 100% {
-ms-transform:translate(60px);
opacity:1;
}
}
@keyframes animations { 0% {
transform:translate(0);
opacity:0;
}
 50% {
transform:translate(30px);
opacity:.5;
}
 100% {
transform:translate(60px);
opacity:1;
}
}
/* 左侧栏文章列表 */
.bloglist h2 { border-bottom: #474645 2px solid; margin: 0 8px 20px 8px; height: 26px; overflow: hidden; line-height: 28px; font-size: 16px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; letter-spacing: 2px }
.bloglist h2 p { background: #474645; width: 180px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; }
.bloglist h2 p span { color: #38b3d4; }
.blogs { margin: 0 20px 20px 20px; position: relative; }
.blogs h3 { font-size: 14px; font-weight: bold; margin-bottom: 15px; transition: all .5s }
.blogs h3 a { color: #474645; }
.blogs h3:hover { text-decoration: underline }
.blogs figure { float: left; width: 25%; overflow: hidden; }
.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
.blogs ul { float: right; line-height: 20px; width: 72%; color: #474645; }
.blogs ul:hover { cursor: pointer; }
.autor { overflow: hidden; clear: both; margin: 10px 0 0 0; display: inline-block; line-height: 26px; height: 26px; color: #838383; background: #f6f6f6; width: 100% }
.autor span { margin: 0 10px; }
.autor span a { color: #759b08; }
a.readmore { background: #e41635; color: #fff; padding: 5px 10px; float: right; margin: 20px 0 0 0 }
.blogs::before { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; background: #cac1c1; border: 2px solid #fff; left: -27px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.blogs:hover::before { background: #474645 }
.dateview { position: absolute; left: -125px; top: 0px; z-index: 1; color: #F5F5F5; }
.blogs::after { content: ""; width: 121px; height: 29px; position: absolute; left: -148px; top: -9px; z-index: 0; background: #474645 url(../images/ti.png) no-repeat; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.blogs:hover::after { opacity: 1 }
/* 右侧栏个人档案 */
.avatar { margin: 10px auto; width: 160px; height: 160px; border-radius: 100%; overflow: hidden; }
.avatar a { display: block; padding-top: 100px; width: 160px; background: url(../images/photos.jpg) no-repeat; background-size: 160px 160px; }
.avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 160px; height: 55px; text-align: center; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; }
.avatar a:hover span { display: block; margin-top: 0; }
.topspaceinfo { background: #e41635; padding: 40px 20px; color: #fff; text-shadow: 1px 1px rgba(0,0,0,.3); }
.topspaceinfo h1 { font-size: 16px; line-height: 40px; font-weight: bold; }
.about_c { margin: 10px 0; color: #fff; line-height: 26px; }
.about_c p:first-child, .about_c p:nth-child(2), .about_c p:nth-child(3), .about_c p:nth-child(4), .about_c p:last-child { background: url(../images/about_c.png) no-repeat; }
.about_c p:first-child { background-position: 15px 6px; }
.about_c p:nth-child(2) { background-position: 15px -20px }
.about_c p:nth-child(3) { background-position: 15px -48px }
.about_c p:nth-child(4) { background-position: 15px -70px }
.about_c p:last-child { background-position: 15px -97px }
.about_c p { display: block; padding-left: 40px; }
.about_c p:hover { background: #222 }
.bdsharebuttonbox { margin: 20px; clear: both; }/* 百度分享 */
/* 右侧推荐信息列表 */
.tj_news h2, .links h2 { font-size: 16px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; color: #FFF; }
.tj_news h2 p, .links h2 p { height: 40px; line-height: 40px; width: 100px; padding: 0 0 0 30px; border-radius: 0 20px 20px 0; text-shadow: rgba(0,0,0,.65) 1px 1px; }
.tj_t1 { background: #0f9c7c }
.tj_t2 { background: #b0e516 }
.tj_news ul { margin: 20px 0 20px 20px }
.tj_news ul li a:hover, .links ul li a:hover { text-decoration: underline; color: #FFF }
.tj_news ul li { height: 25px; line-height: 25px; clear: both; padding-left: 5px; overflow: hidden; padding-left: 15px; background: url(../images/li.jpg) no-repeat left center; }
.tj_news ul li a, .links ul li a { color: #bbbbbb; }
/* 友情链接 */
.links h2 p { background: #222 }
.links ul { margin: 20px 0 }
.links ul li { height: 30px; line-height: 30px; text-align: center; border-bottom: #333 1px dashed; margin: 0 40px; }