@charset "gb2312";
/* CSS Document */
* { margin: 0; padding: 0 }
body { font: 12px "ËÎÌå", "Arial Narrow", HELVETICA; color: #3F3E3C; line-height: 1.5; background: url(../images/bg.png) no-repeat top center #96CEB4 }
img { border: 0; vertical-align: middle }
p { display: block; }
ul { list-style: none; }
a ,.ulist section  a img{ color: #a6a6a6; text-decoration: none; transition: All 1s ease; -webkit-transition: All 1s ease; -moz-transition: All 1s ease; -ms-transition: All 1s ease;-o-transition: All 1s ease; }
a:hover { color: #000; }
.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }
/* nav */
header { width: 100%; background: rgba(255,255,255,1); height: 43px; border-bottom: #33A89F 1px solid; }
header nav { margin: 0 auto; width: 1000px; text-align: center; }
header nav ul li { line-height: 43px; display: block }
header nav ul li a { color: #484848; float: left; padding: 0 20px; margin-right: 2px;}
header nav ul li a:hover, #nav_current { color: #fff; background: #299982; transform:skewX(10deg);-webkit-transform:skewX(10deg);-o-transform:skewX(10deg);-ms-transform:skewX(10deg);-moz-transform:skewX(10deg) }
/* mainContent */
.mainContent { width: 100%; overflow: hidden; border-top: 1px solid #fff;border-bottom: 1px solid #fff }
.ulist { width: 1000px; margin: 30px auto; overflow:hidden }
.ulist section { width: 330px; float: left }
.ulist section img { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; overflow: hidden; border: 4px solid #fff; float: left; margin-right: 10px;  }
.ulist section  a:hover img{ opacity:0.8;border-radius: 0px;}
.ulist ul { padding: 15px 0 0 }
.ulist h2 { font-size: 20px;  }
.ulist h2 a{color: #fff; text-shadow:#999 1px 1px 1px}
.ulist h2 a:hover{ padding:0 0 0 20px;}
.ulist p { ine-height: 22px; color: #CCFFF6;text-shadow:#999 1px 1px 1px}
.ulist section:nth-child(1) img { -webkit-animation: bounceIn 1s ease 1.6s backwards; -moz-animation: bounceIn 1s ease 1.6s backwards; -ms-animation: bounceIn 1s ease 1.6s backwards; -o-animation: bounceIn 1s ease 1.6s backwards; animation: bounceIn 1s ease 1.6s backwards }
.ulist section:nth-child(1) h2 { -webkit-animation: fadeInRight 1s ease 1.8s backwards; -moz-animation: fadeInRight 1s ease 1.8s backwards; -ms-animation: fadeInRight 1s ease 1.8s backwards; -o-animation: fadeInRight 1s ease 1.8s backwards; animation: fadeInRight 1s ease 1.8s backwards }
.ulist section:nth-child(1) p { -webkit-animation: fadeInRight 1s ease 2.2s backwards; -moz-animation: fadeInRight 1s ease 2.2s backwards; -ms-animation: fadeInRight 1s ease 2.2s backwards; -o-animation: fadeInRight 1s ease 2.2s backwards; animation: fadeInRight 1s ease 2.2s backwards }
.ulist section:nth-child(2) img { -webkit-animation: bounceIn 1s ease 2s backwards; -moz-animation: bounceIn 1s ease 2s backwards; -ms-animation: bounceIn 1s ease 2s backwards; -o-animation: bounceIn 1s ease 2s backwards; animation: bounceIn 1s ease 2s backwards }
.ulist section:nth-child(2) h2 { -webkit-animation: fadeInRight 1s ease 2.2s backwards; -moz-animation: fadeInRight 1s ease 2.2s backwards; -ms-animation: fadeInRight 1s ease 2.2s backwards; -o-animation: fadeInRight 1s ease 2.2s backwards; animation: fadeInRight 1s ease 2.2s backwards }
.ulist section:nth-child(2) p { -webkit-animation: fadeInRight 1s ease 2.6s backwards; -moz-animation: fadeInRight 1s ease 2.6s backwards; -ms-animation: fadeInRight 1s ease 2.6s backwards; -o-animation: fadeInRight 1s ease 2.6s backwards; animation: fadeInRight 1s ease 2.6s backwards }
.ulist section:nth-child(3) img { -webkit-animation: bounceIn 1s ease 2.4s backwards; -moz-animation: bounceIn 1s ease 2.4s backwards; -ms-animation: bounceIn 1s ease 2.4s backwards; -o-animation: bounceIn 1s ease 2.4s backwards; animation: bounceIn 1s ease 2.4s backwards }
.ulist section:nth-child(3) h2 { -webkit-animation: fadeInRight 1s ease 2.6s backwards; -moz-animation: fadeInRight 1s ease 2.6s backwards; -ms-animation: fadeInRight 1s ease 2.6s backwards; -o-animation: fadeInRight 1s ease 2.6s backwards; animation: fadeInRight 1s ease 2.6s backwards }
.ulist section:nth-child(3) p { -webkit-animation: fadeInRight 1s ease 3s backwards; -moz-animation: fadeInRight 1s ease 3s backwards; -ms-animation: fadeInRight 1s ease 3s backwards; -o-animation: fadeInRight 1s ease 3s backwards; animation: fadeInRight 1s ease 3s backwards }
@-webkit-keyframes bounceIn { 0% {
opacity:0;
-webkit-transform:scale(.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.05)
}
100% {
-webkit-transform:scale(1)
}
}
@-moz-keyframes bounceIn { 0% {
opacity:0;
-moz-transform:scale(.3)
}
50% {
opacity:1;
-moz-transform:scale(1.05)
}
100% {
-moz-transform:scale(1)
}
}
@-ms-keyframes bounceIn 0 {
opacity:0;
-ms-transform:scale(.3)
}
@-ms-keyframes bounceIn 50% {
opacity:1;
-ms-transform:scale(1.05)
}
@-ms-keyframes bounceIn 100% {
-ms-transform:scale(1)
}
@-o-keyframes bounceIn 0 {
opacity:0;
-o-transform:scale(.3)
}
@-o-keyframes bounceIn 50% {
opacity:1;
-o-transform:scale(1.05)
}
@-o-keyframes bounceIn 100% {
-o-transform:scale(1)
}
@keyframes bounceIn { 0% {
 opacity:0;
transform:scale(.3)
}
50% {
opacity:1;
transform:scale(1.05)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translateX(20px)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInRight { 0% {
opacity:0;
-moz-transform:translateX(20px)
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
@-ms-keyframes fadeInRight 0 {
opacity:0;
-ms-transform:translateX(20px)
}
@-ms-keyframes fadeInRight 100% {
opacity:1;
-ms-transform:translateX(0)
}
@-o-keyframes fadeInRight 0 {
opacity:0;
-o-transform:translateX(20px)
}
@-o-keyframes fadeInRight 100% {
opacity:1;
-o-transform:translateX(0)
}
@keyframes fadeInRight { 0% {
opacity:0;
transform:translateX(20px)
}
100% {
opacity:1;
transform:translateX(0)
}
}
/* mainContent2 */
.mainContent2 { background: #C0E3CF; width: 1000px; margin: 20px auto; overflow: hidden;}
aside { width: 270px; float: left; }
.avatar { margin: 20px auto; width: 160px; height: 160px; border-radius: 160px; -moz-border-radius: 160px; -webkit-border-radius: 160px; overflow: hidden; }
.avatar a { display: block; padding-top: 97px; width: 160px; height: 63px; background: url(../images/s8.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; font-size: 16px; 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: #299982; padding: 40px 20px; color: #fff }
.topspaceinfo h1 { font-size: 16px; line-height: 40px }
.userinfo { padding: 20px 30px 30px; font-size: 14px; line-height: 28px; color: #666; }
.userinfo a { color: #666 }
.userinfo a:hover { color:#000;  }
.q-fans, .btns a { padding: 0 10px }
.q-fans a { font-weight: bold; }
.btns a { border-right: #dad9d5 1px solid; }
aside section { display: block; overflow: hidden }
aside section h2 { background: #299982; color: #FFF; padding-left: 30px; height: 30px; line-height: 30px; font-size: 14px; }
.newpic ul, .taglist ul { padding: 20px 30px; overflow: hidden }
.newpic ul li { display: inline; width: 48px; height: 48px; }
.newpic ul li img { width: 48px; height: 48px; border: 0; display: block; float: left; border: 1px solid transparent; }
.newpic ul li img:hover { opacity: 0.5 }
.taglist ul li a { padding: 2px 5px; display: inline-block; float: left; margin-right: 5px; color: #454545; }
.taglist ul li a:hover { background: #299982; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }
.blogitem { width: 730px; background: rgba(255,255,255,0.7); float: right }
.blogitem article { border-bottom: #C0E3CF 40px solid; }
.title { background: url(../images/titlebg.png) no-repeat 5% 80%; font-size: 20px; line-height: 28px; display: inline-block; padding: 38px 60px 8px 80px; border-bottom: 1px solid #e2e2e2; width: 100%; }
.title a { color: #454545; }
.title a:hover { padding: 20px }
.text { font-size: 14px; padding: 20px 40px; }
.text p { line-height: 24px; margin-bottom: 10px }
.textimg { text-align: center }
.textimg img { max-width: 500px; width:expression(document.body.clientWidth > 500? "500px": "auto" );}/*for ie6*/
.textfoot { padding: 20px 60px; border-top: 1px solid #dddcdb; text-align: right; box-shadow: #999 2px 2px 3px }
.textfoot a { margin-left: 10px; }
.pages { padding: 0 60px 25px; background: #C0E3CF; text-align: right }
.pages span { background: #299982; color: #fff; }
.pages a { background: #fff; color: #454545; padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages span { padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages a:hover { background: #CCC; }
/* footer */
footer { border-top: 9px solid #71A797; background: #242221; width: 100%; }
.footavatar { width: 700px; margin: auto; position: relative; color: #666; }
.footavatar img{ height:110px}
.footphoto { position: absolute; top: -58px; left: 20px; display: block; border: #71A797 5px solid; }
.footinfo { display: block; padding: 0 0 0 160px }
.fname { color: #fff; margin-top: 16px; font-size: 18px; line-height: 28px; }
.fname a { color: #fff; }
.finfo { line-height: 22px; }
.visitor { width: 800px; margin: 40px auto 0; clear: both; border-top: 1px solid #32302e; padding-top: 40px; overflow: hidden; }
.visitor h2 { color: #fff; font-size: 14px; font-weight: normal; padding: 0 20px 0 }
.visitor ul { padding: 20px }
.visitor ul li img { width: 78px; height: 78px; display: block; border: #FFF 2px solid }
.visitor ul li a { float: left; margin-right: 10px }
.visitor ul li a:hover { opacity: 0.5 }
.Copyright { text-align: center; color: #666; margin: 40px 0 0 }
.Copyright ul a { color: #286c5b; display: inline; padding: 0 10px; }
.Copyright ul a:nth-child(-n+3) { border-right: #32302e 1px solid }
.Copyright ul a:hover { color: #fff; }