@CHARSET "UTF-8";

header{width:1000px;height:80px;margin:auto;position:relative;overflow: hidden;}

#logo a{width: 300px;height: 70px;margin:5px 0 0 0;position: absolute;background: url(../image/logo.png) no-repeat;}

nav{float: right;width: 100%;margin:30px 0 0 0;text-align: right;}





nav a {position: relative;display: inline-block;font-size: 18px;font-family: "微软雅黑", Arial, Helvetica, sans-serif;}

nav a:hover { text-decoration: none }

a:link, a:visited {

    text-decoration: none;

    color: #333;

}

.topnav a { margin: 0 5px; padding: 0 8px; }

.topnav a span:first-child {z-index: 2;display: block;}

.topnav a span:last-child {z-index: 1;display: block;color: #999;font: 12px Georgia, serif;opacity: 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;-moz-transition: -moz-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);text-align: center;}

.topnav a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }

/*#topnav_current{color: #e15782;}*/

.en {/* color: #999; */font-size: 12px;z-index: 1;display: block;}/* ie */





.banner{background: url(../image/banner_top.jpg) top center;height: 265px;overflow: hidden;}

div{display:block;}

.box {

    width: 1000px;

    margin: auto;

    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(../image/photos3.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;

}

.box{

	width: 1000px;

	margin: auto;

	overflow: hidden;

	

	

}

.template h3{

	width: 100%;

	border-bottom: 1px solid #fff;

	overflow: hidden;

	font-size: 14px;

	margin: 0 0 10px;

	font-family:"微软雅黑";

	display: block;

	clear: both;

}

.template h3 p{

	background: #474645;

	width: 180px;

	height: 25px;

	line-height: 25px;

	margin: 15px 0 0 10px;

	color: #fff;

	text-align: center;

	box-shadow: #999 4px 5px 1px;

}

.template h3 p span{

	color:aqua;

}

.template ul{

	overflow: hidden;

}

.template ul li{

	margin: 3px 2px;

	float: left;

	display: block;

	padding:5px 5px 6px 5px;

	transition: all 1s;

	-webkit-transition: all 1s;

	-moz-transition: all 1s; 

	-o-transition: all 1s;

	

}	

.template li img{

	width: 177px;

	height: 110px;

	padding: 4px;

	background: #fff;

	display: block;

	box-shadow: 0px 0px 2px rgb(0,0,0,.5);

}

.template li span{

	color: #f1f0ee;

	display: block;

	text-align: center;

	margin-top: 5px;

	width: 177px;

	overflow: hidden;

	height: 14px;

	line-height: 14px;

	text-overflow: ellipsis;

}



.template li:hover {

	background: #666;

	padding: 5px 5px 6px 5px;

}

/*article*/



@charset "gb2312";

/* CSS Document */

.moodlist {/* margin: auto; *//* width: 100%; *//* overflow: hidden; */}

/* --------------------博客列表-------------------- */

h1.t_nav span{ float:right; color:#999}

h1.t_nav { border-bottom: #F1F1F1 1px solid; font-size: 12px; font-weight: normal; line-height: 40px; height: 40px;margin:20px auto;width:1000px }

h1.t_nav a { width: 100px; display: block; text-align: center; color: #fff; float: left }

.n1 { background: #5EA51B; }

.n2 { background: #8BBF5D; }

.bloglist {width: 1000px;margin: 0 auto;background: url(../image/r_title_bg.jpg) repeat-y 764px 0;overflow: hidden;}

.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0; }

.arrow_box img { width: 150px; float: left; margin: 0 20px 0 20px; }

.arrow_box p { line-height: 24px; padding: 0 20px 20px }

.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; }/* 三角形 */

.arrow_box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 758px; top: 16px; background: #CCCCCE; border: 2px solid #fff; transition: all 0.5s; }/* 圆形 */

.arrow_box:hover::before { border-color: transparent transparent transparent #CECCCD }/* 三角形 */

.arrow_box:hover::after { border: #fff 2px solid; background: #5EA51B }/* 圆形 */

.arrow_box:hover { background: #f4f2f2; color: #333; text-shadow: #f7f7f7 1px 1px 1px }

.dateview { position: absolute; left: 788px; top: 20px; width: 125px; line-height: 30px; background: #5EA51B; border-radius: 0px 40px; text-align: center; color: #fff }



.page{margin: 20px 0;text-align: center;width: 100%;overflow: hidden;}

.page a b{ color: #999; }

.page>b,.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }

.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */

.page>b,.page a:hover{ background: #333; color: #FFF; }

.page a{ color: #F33;

    border: #999 1px solid; }









/*.page { margin: 20px 0; text-align: center; width: 100%; overflow: hidden; }

.page a b { color: #999; }

.page>b, .page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }

.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */

.page>b, .page a:hover { background: #333; color: #FFF; }

.page a { color: #F33; border: #999 1px solid; }

.sy{overflow: hidden;}*/