@charset "gb2312";
.banner { background: url(../images/banner_top.jpg) top center; height: 265px; overflow: hidden }
.texts { width: 350px; line-height: 26px; margin: 60px 0 0 20px; float: left; font-size: 14px; }
.texts p { -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3); }
.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; }
.texts p:nth-child(3) { -webkit-animation: animations2 5s ease-in-out 7s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; -ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s 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;
}
}
@-webkit-keyframes animations2 { 0% {
opacity:0;
}
 40% {
opacity:.8;
}
 45% {
opacity:.3;
}
 50% {
opacity:.8;
}
 55% {
opacity:.3;
}
 60% {
opacity:.8;
}
 100% {
opacity:1;
}
}
@-moz-keyframes animations2 { 0% {
opacity:0;
}
 40% {
opacity:.8;
}
 45% {
opacity:.3;
}
 50% {
opacity:.8;
}
 55% {
opacity:.3;
}
 60% {
opacity:.8;
}
 100% {
opacity:1;
}
}
@-o-keyframes animations2 { 0% {
opacity:0;
}
 40% {
opacity:.8;
}
 45% {
opacity:.3;
}
 50% {
opacity:.8;
}
 55% {
opacity:.3;
}
 60% {
opacity:.8;
}
 100% {
opacity:1;
}
}
@-ms-keyframes animations2 { 0% {
opacity:0;
}
 40% {
opacity:.8;
}
 45% {
opacity:.3;
}
 50% {
opacity:.8;
}
 55% {
opacity:.3;
}
 60% {
opacity:.8;
}
 100% {
opacity:1;
}
}
@keyframes animations2 { 0% {
opacity:0;
}
 40% {
opacity:.8;
}
 45% {
opacity:.3;
}
 50% {
opacity:.8;
}
 55% {
opacity:.3;
}
 60% {
opacity:.8;
}
 100% {
opacity:1;
}
}
.avatar { float: right; margin: 40px; width: 130px; height: 130px; border-radius: 100%; overflow: hidden; border: #FFF 4px solid }
.avatar a { display: block; padding-top: 97px; width: 160px; background: url(../images/photos2.jpg) no-repeat; background-size: 130px 130px }
.avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 130px; 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; }
.template { background: #F1F0EE }
.template h3 { border-bottom: #FFF 1px solid; width: 100%; overflow: hidden; font-size: 14px; margin: 0 0 10px; font-family: "΢ÈíÑźÚ"; display: block; clear: both; }
.template h3 p { background: #474645; width: 180px; height: 25px; margin: 15px 0 0 10px; line-height: 25px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; }
.template h3 p span { color: #38b3d4; }
.template ul { overflow: hidden; }
.template ul li { margin: 3px; float: left; display: block; padding: 5px 5px 6px 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.template li img { width: 142px; height: 80px; background: #FFF; padding: 4px; box-shadow: 0px 0px 2px rgba(0,0,0,.5); display: block; }
.template li span { color: #F1F0EE; display: block; text-align: center; margin-top: 5px; width: 142px; overflow: hidden; text-overflow: ellipsis; height: 14px }
.template li:hover { background: #666; padding: 5px 5px 6px 5px; }
h2.title_tj { font: 18px "΢ÈíÑźÚ", Arial, Helvetica, sans-serif; color: #444; font-weight: bold; background: url(../images/h_line.jpg) repeat-x 20px center; }
h2.title_tj span { color: #FE5187 }
h2.title_tj p { background: #fff; width: 90px }
.bloglist { width: 740px; overflow: hidden; background: url(../images/r_line.jpg) repeat-y right; }
.bloglist h3 { margin: 20px 0 10px 0; color: #333 }
.bloglist figure { float: left; width: 183px; }
.bloglist figure img { padding: 4px; border: #f4f2f2 1px solid; width: 175px; }
.bloglist ul { float: left; width: 520px; margin: 10px 0px 0 15px; line-height: 20px; }
.dateview { width: 695px; overflow: hidden; clear: both; margin: 10px 0 0 0; display: inline-block; background: #f6f6f6 url(../images/time.jpg) 15px center no-repeat; line-height: 26px; height: 26px; color: #838383; padding-left: 25px }
.dateview span { margin: 0 10px; }
.dateview span a { color: #099B43; }
a.readmore { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; margin: 20px 0 0 0 }
.weather { background: url(../images/weather.jpg) no-repeat; height: 88px; margin: 20px 0 }
.news h3 { font-size: 14px; background: url(../images/r_title_bg.jpg) repeat-x center }
.news h3 p { background: #fff; width: 70px }
.news h3 span { color: #65b020 }
.news h3.ph span { color: #37ccca; }
.news h3.links span { color: #F17B6B; }
.news ul { margin-bottom: 20px }
.news ul li a:hover { text-decoration: underline }
.rank 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; }
.rank { margin: 10px 0 }
.rank li a { color: #333; }
.paih { background: url(../images/ph.jpg) no-repeat left 8px; margin: 10px 0 }
.paih li { line-height: 30px; height: 30px; overflow: hidden; padding-left: 24px; border-bottom: #CCC dotted 1px }
.website { margin: 10px 0; background: #F3F3F3; border-radius: 50%; text-align: center; }
.website li { line-height: 26px; text-shadow: #fff 1px 1px 1px; height: 26px; }
.weixin { background: url(../images/weixin.jpg) no-repeat; width: 100%; display: inline-block; height: 274px; overflow: hidden; margin: 10px 0; clear: both }
@media only screen and (max-width: 320px) {
header { width: 100%; margin: auto; height: auto }
#logo { width: 100%; height: 60px; }
nav { float: left; width: 100%; margin: 30px 0 0 0; text-align: center }
nav a { position: relative; display: inline-block; font-size: 18px; font-family: "΢ÈíÑźÚ", Arial, Helvetica, sans-serif; }
nav a:hover { text-decoration: none }
.topnav a { padding: 0 1px; }
.banner { width: 100% }
.template .box { width: 100% }
.template ul li img { width: 100px; }
.template ul li span { width: 100px; }
article { width: 100% }
.bloglist { background: none; margin: auto; width: 100%; overflow: hidden }
.bloglist figure, .weather, .weixin, .links, .website { display: none }
.bloglist h3 { margin: 10px 0 5px 0; color: #333; display: block }
.bloglist ul { width: 98%; display: block; margin: 5px }
.bloglist p { }
a.readmore { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; }
aside { width: 100%; margin: 10px 0 }
.rank, .paih { margin-left: 10px }
footer { width: 100% }
}


@media only screen and (max-width: 480px) {
header { width: 100%; margin: auto; height: auto }
#logo { width: 100%; height: 60px; }
nav { float: left; width: 100%; margin: 30px 0 0 0; text-align: center }
nav a { position: relative; display: inline-block; font-size: 18px; font-family: "΢ÈíÑźÚ", Arial, Helvetica, sans-serif; }
nav a:hover { text-decoration: none }
.topnav a { padding: 0 1px; }
.banner { width: 100% }
.template .box { width: 100% }
.template ul li img { width: 130px; }
.template ul li span { width: 130px; }
article { width: 100% }
.bloglist { background: none; margin: auto; width: 100%; overflow: hidden }
.bloglist figure, .weather, .weixin, .links, .website { display: none }
.bloglist h3 { margin: 10px 0 5px 0; color: #333; display: block }
.bloglist ul { width: 98%; display: block; margin: 5px }
.bloglist p { }
a.readmore { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; }
aside { width: 100%; margin: 10px 0 }
.rank, .paih { margin-left: 10px }
footer { width: 100% }
}
@media only screen and (max-width: 768px) {
header { width: 100%; margin: auto; height: auto }
#logo { width: 100%; height: 60px; }
nav { float: left; width: 100%; margin: 30px 0 0 0; text-align: center }
.topnav a { margin: 0 5px; padding: 0 1px; }
.banner { width: 100% }
.template .box { width: 100% }
.template ul li img { width: 100px; }
.template ul li span { width: 100px; }
article { width: 100% }
.bloglist { background: none; margin: auto; width: 100%; overflow: hidden }
.weather, .weixin, .links, .website { display: none }
.bloglist h3 { margin: 10px 0 5px 0; color: #333; display: block }
.dateview { width: 100%; }
a.readmore { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; }
aside { width: 100%; margin: 10px 0 }
.rank, .paih { margin-left: 10px }
footer { width: 100% }
}
.guanzhu {overflow: hidden;display: inline-block;clear: both;margin-top: 20px;color: #000;}
.guanzhu span{color: #65B020;font-weight: bold;font-size: 14px;}