/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, audio, canvas, details, figcaption,
figure, footer, header, hgroup, mark, menu, meter, nav,
output, progress, section, summary, time, video {
    margin: 0;
    padding: 0;
    font-family:Microsoft YaHei, Tahoma, Arial;
    /* Hiragino Sans GB */
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}

ins {
    text-decoration: none;
}

li {
    list-style: none;
}

table {
    font-size: inherit;
    font: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

legend {
    color: #000;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

input, button, textarea, select {
    margin: 0;
    *font-size: 100%;
    line-height: 1.2;
}

a img, img {
    -ms-interpolation-mode: bicubic;
}

sub, sup {
    vertical-align: baseline;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section, blockquote {
    display: block;
}
/**:link, *:visited, *:hover, *:active, *:focus {
  transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}*/
/* common class */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

/*::selection {color: #fff;background-color: #e82954;}
code::selection,
pre::selection{background-color: #e82954;color: #FFF;}
::-moz-selection {color: #fff;background-color: #e82954;}
code::-moz-selection,
pre::-moz-selection{background-color: #e82954;color: #FFF;}*/
body{
	color: #7a7b7e;
	/*line-height: 2;*/
	font-size: 12px;
}
a{
	text-decoration: none;
	color: #333b4b;
}
h1,h2{
	font-weight: normal;
}

/*浮层组件*/
.UPanelMask, .UPanelMaskIframe{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: 40000;
    opacity: .35;
    filter: alpha(opacity=35);
}
.UPanelMaskIframe{
    opacity: 0!important;
    filter: alpha(opacity=0)!important;
}

div.UPanel, div.UPanel *{  
    font-size: 14px;
    padding: 0; margin: 0;
}

div.UPanel{  
    position: absolute;
    overflow: hidden;
    z-index: 50000;
    left: -9999px;
    top: -9999px;
    zoom: 1;
}

div.UPanel select, div.UPanel input, div.UPanel button{
    cursor: pointer;
}

div.UPanel .UButton{
    text-align: center;
    margin: 5px 0 0;
}

div.UPanel .UButton button{
    padding: 0px 4px;
    margin: 0px 4px;
}


div.UPanel .UPContent{
    position: relative;
}

div.UPanel .UPContent .hd{
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    cursor: default;
}

div.UPanel .UPContent .bd{
    padding: 15px 15px 15px;

    word-break: break-all; 
    word-wrap:break-word;
}

div.UPanel .UPContent .ft{
    height: 28px;
    line-height: 28px;
    text-align: center;
   /* border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #fff;
    background: #fbfbfb;*/
    padding: 0 10px;
    cursor: default;
}

div.UPanel .UPContent span.close{
    position: absolute;
    top: 10px;
    cursor: pointer;
    right: 10px;
    width: 15px;
    height: 15px;
    background: url(../images/cls.png) no-repeat;
}

div.UPanelPopup{
    width: 200px;
}

div.UPanelPopup .bd{
    padding: 10px 10px 10px!important;
    line-height: 24px;
}

div.UPanelPopup .UPopupContent{
    min-height: 30px;
    height: auto !important;
    height: 30px;
}

div.UPanelPopup button.UIcon{
    padding: 0px!important;
    margin: 0px!important;
    border:0px!important;
    width: 19px; 
    height: 19px; 
    margin-right: 12px!important;
    position: absolute;
    *top: 10px;
    *left: 10px;
    _top: 10px;
    _left: 0px;
    margin-top: 2px!important;
    *margin-top: 0px!important;
}

div.UPanelPopup div.UText{
    text-indent: 28px;
}

div.UPanelPopup div.UText button.UPlaceholder{
    float: left;
    width: 28px;
    visibility: hidden;
    display: none;
}

div.UPanelSuccess button.UIcon{
    background: #fff url('../../../images/status.gif') no-repeat -29px 0!important;
}

div.UPanelError button.UIcon{
    background: #fff url('../../../images/status.gif') no-repeat -0px 0!important;
}

div.UPanelAlert button.UIcon{
    background: #fff url('../../../images/status.gif') no-repeat -58px 0!important;
}

#header{
	background: url(../images/uxc_header_bg.jpg) 50% 0 no-repeat;
	height: 820px;
	color: #fff;
	font-size: 14px;
	line-height: 2;
	margin-bottom: 60px;
	background-size: cover;
}
#header a{
	color: #fff;
}
.single .inner{
	width: 1000px;
	margin: auto;
}
.inner{
	width: 1180px;
	margin: auto;
}
.topbar{
	padding-top: 35px;
}
.logo{
	text-indent: -9999em;
	overflow: hidden;
	float: left;
}
.home .logo{
	width: 180px;
	height: 70px;
	background: url(../images/uxc_logo.png) no-repeat;
}
.top-nav{
	float: right;
	padding-top: 20px;
}
.top-nav li{
	display: inline-block;
	*display: inline;
	*zoom:1;
}

.top-nav a{
	margin-left: 35px;
	padding-bottom: 10px;
}
.top-nav a:hover,
.top-nav li.current a{
	border-bottom: 2px solid #fff;
}
.top-nav a p{
	display: none;
}
#focus{
	text-align: center;
	margin-top: 290px;
}
#focus h1{
	text-indent: -9999em;
	overflow: hidden;
	background: url(../images/uxc_logo.png) 0 -105px no-repeat;
	height: 52px;
	width: 550px;
	margin:0 auto 30px;
}
#focus p{
	margin-bottom: 45px;
}
#focus .shequ{
	margin-bottom: 130px;
}
#focus .shequ .ico{
	background: url(../images/icos_03.png) no-repeat;
	width: 38px;
	height: 38px;
	display: inline-block;
	*display: inline;
	*zoom:1;
	margin-right: 10px;
}
#focus .shequ .ico-2{
	background-position: -46px 0;
}
#focus .shequ .ico-3{
	background-position: -92px 0;
}
#focus .mouse{
	width: 42px;
	height: 42px;
	background: url(../images/icos_03.png) -138px 0 no-repeat;
	margin: auto;
}
#article,
#main{
	margin-bottom: 70px;
}
.mod-cate {
	margin-bottom: 50px;
	width: 100%;
	overflow: hidden;
}
.mod-cate ul{
	width: 110%;
}
.mod-cate li{
	float: left;
	*display: inline;
	*zoom:1;
	margin-right: 66px;
	position: relative;
	width: 111px;
	height: 111px;
}

.mod-cate li a{
	color: #a2a5ae;
	font-size: 12px;
	width: 111px;
	padding-top: 65px;
	height: 46px;
	text-align: center;
	display: block;
	background: url(../images/nav_ico.png) no-repeat;
}
.mod-cate li a:hover{
	color: #fff;
}
.mod-cate .all a{
	background-position: 0 0;
}
.mod-cate .cat-item-24 a{
	/*ui*/
	background-position: -161px 0;
}
.mod-cate .cat-item-22 a{
	/*team*/
	background-position: -321px 0;
}
.mod-cate .cat-item-5 a{
	/*fe*/
	background-position: -641px 0;
}
.mod-cate .cat-item-23 a{
	/*ue*/
	background-position: -481px 0;
}
.mod-cate .cat-item-21 a{
	/*interactive*/
	background-position: -801px 0;
}
.mod-cate .cat-item-8 a{
	/*utalk*/
	background-position: -961px 0;
}
.mod-cate .all a:hover{
	background-position: 0 -114px;
}
.mod-cate .cat-item-24 a:hover{
	background-position: -161px -114px;
}
.mod-cate .cat-item-22 a:hover{
	background-position: -321px -114px;
}
.mod-cate .cat-item-5 a:hover{
	background-position: -641px -114px;
}
.mod-cate .cat-item-23 a:hover{
	background-position: -481px -114px;
}
.mod-cate .cat-item-21 a:hover{
	background-position: -801px -114px;
}
.mod-cate .cat-item-8 a:hover{
	background-position: -961px -114px;
}
.mod-cate .cat-item-20{
	display: none;
}
.mod-cate li a.active{
	color: #fff;
}
.mod-cate .all a.active{
	background-position: 0 -226px;
}
.mod-cate .cat-item-24 a.active{
	background-position: -161px -226px;
}
.mod-cate .cat-item-22 a.active{
	background-position: -321px -226px;
}
.mod-cate .cat-item-5 a.active{
	background-position: -641px -226px;
}
.mod-cate .cat-item-23 a.active{
	background-position: -481px -226px;
}
.mod-cate .cat-item-21 a.active{
	background-position: -801px -226px;
}
.mod-cate .cat-item-8 a.active{
	background-position: -961px -226px;
}
.mod-cate li.trend{
	display: none;
}
.mod-article-list{
	width: 100%;
	height: 725px;
	overflow: hidden;
}
.mod-article-list ul{
	width: 110%;
}
.mod-article-list li {
	border:1px solid #dfe0e4;
	width: 280px;
	border-radius: 0 0 5px 5px;
	float: left;
	*display: inline;
	*zoom:1;
	margin-bottom: 30px;
	margin-right: 15px;
}
.mod-article-item{
	height: 330px;
	position: relative;
}
.mod-article-list li:hover{
	border-color: #e82954;
	transition: color .20s linear, border-color .20s linear;
}
.mod-article-item{
	position: relative;
}
.mod-article-item .post-img{
	margin-bottom: 14px;
	width: 280px;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	height: 180px;
	overflow: hidden;
}
.mod-article-item .post-img a{
	line-height: 0;
	font-size: 0;
	vertical-align: middle;
}
.mod-article-item .post-info{
	margin: 0 10px 15px 15px;
}
.mod-article-item .post-info h2{
	font-size: 16px;
	margin-bottom: 10px;
}
.mod-article-item .post-info h2 a:hover{
	color: #e82954;
}
.mod-article-item .post-info p{
	margin-bottom: 5px;
	font-size: 12px;
	color: #afb6c5;
}
.mod-article-item .tag{
	font-size: 12px;
	color: #fff;
	display: block;
	/*line-height: 1.5;*/
	padding: 2px 3px;
	display: inline-block;
}
.mod-article-item .tag a{
	color: #fff;
}
.mod-article-item .视觉设计{
	/*视觉*/
	background: #00acec;
}
.mod-article-item .团队活动{
	/*团建*/
	background: #ff7070;
}
.mod-article-item .交互设计,.交互设计-用户研究{
	/*交互*/
	background: #f7ac3e;
}
.mod-article-item .用户研究{
	/*用研*/
	background: #f8b859;
}
.mod-article-item .闲话杂谈{
	/*闲谈*/
	background: #ab80ed;
}
.mod-article-item .前端技术{
	background: #f77a5b;
}
.mod-article-item .行业趋势探索{
	background: #43caae;
}
.mod-article-item .post-review{
	position: absolute;
	bottom: 0;
	width: 250px;
}
.post-info .post-date{
	float: left;
	color: #afb6c5;
}
.post-info .share-post{
	float: right;
}
.post-info .ico,
.post-review .ico{
	display: inline-block;
	*display: inline;
	*zoom:1;
	width: 18px;
	height: 18px;
	background: url(../images/icos.png) no-repeat;
}
.post-info .ico{
	text-indent: -9999em;
	overflow: hidden;
	margin-right: 5px;
}
.post-info .ico-1{
	background-position: 0 0;
}
.post-info .ico-2{
	background-position: -26px 0;
}
.post-info .ico-3{
	background-position: -49px 0;
	margin-right: 0;
}
.post-review{
	font-size: 12px;
	background: #f3f4f7;
	color: #6a7180;
	border-top: 1px solid #e9eaed;
	padding: 15px;
	height: 14px;
	line-height: 1;
}
.post-review .ico{
	vertical-align: -5px;
}
.post-review .ico-1{
	background-position: 0 -20px;
	margin-right: 5px;
}
.post-review .ico-2{
	background-position: -28px -20px;
	margin-left: 15px;
}
.mod-article-page{
	text-align: right;
}
.mod-article-page a,
.mod-article-page .current{
	margin-left: 10px;
	display: inline-block;
	*display: inline;
	*zoom:1;
	width: 32px;
	height: 32px;
	border: 1px solid #e0e1e5;
	border-radius: 50%;
	text-align: center;
	line-height: 32px;
	color: #a2a5ae;
	font-family: arial;
}
.mod-article-page a:hover,
.mod-article-page .current{
	background: #e82954;
	border-color: #e82954;
	color: #fff;
}
#about{
	background: #414858;
	height: 610px;
	/*position: relative;*/
}
#about .text{padding: 125px 0 140px;  }
#about h1,
#about h2{
	color: #fff;
}
#about h1{
	font-size: 42px;
	margin-bottom: 20px;
}
#about h2{
	font-size: 26px;
	margin-bottom: 45px;
}
#about ul{
	color: #8a91a0;
	line-height: 32px;
}
#about .inner{
	background: url(../images/uxc.png) right 0 no-repeat;
}
#about .inner *,
#joinus h1,
#joinus p,
#joinus ul{
	display: none;
	*display: block;
}
#about.active .inner *,
#joinus.active h1,
#joinus.active p,
#joinus.active ul{
	display: block;
}
#joinus{
	text-align: center;
	padding:120px 0;
	color: #7a7b7e;
	font-size: 13px;
}
#joinus .inner{
	height: 545px;
}
#joinus h1{
	font-size: 36px;
	color: #444;
	margin-bottom: 40px;
}
#joinus p{
	margin-bottom: 80px;
	line-height: 2;
}
#joinus li{
	float: left;
	display: inline-block;
	*display: inline;
	*zoom:1;
	width: 323px;
	height: 321px;
	/*line-height: 321px;*/
	background: #a2a5ae;
	margin-right: 75px;
	text-align: center;
}
#joinus li a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#joinus li a:hover{
	background: #e82954;
}
#joinus li.last{
	margin-right: 0;
}
#joinus li .intro{
	display: none;
	font-size: 24px;
	color: #fff;
	position: absolute;
	top: 149px;
	width: 100%;
	text-align: center;
}
#joinus li .text{
	background: url(../images/text.gif) 0 50% no-repeat;
	display: block;
	width: 84px;
	height: 84px;
	position: absolute;
	top: 120px;
	left: 120px;
	color: #a2a5ae;
	font-size: 24px;

}
#joinus li .text-a{
	background-position: 0 50%;
}
#joinus li .text-b{
	background-position: -85px 50%;
}
#joinus li .text-c{
	background-position: -170px 50%;
}
#joinus li a:hover .text{
	width: 100%;
	color: #fff;
	background: none;
}
#joinus li a:hover .intro{
	display: block;
}
#footer{
	text-align: center;
}
#footer .inner{
	padding: 26px 0 40px;
	border-top: 1px solid #e0e1e4;
}
/*内页*/
#hd{
	background: #e82954;
	color: #fff;
	height: 50px;
	margin-bottom: 50px;
}
#hd a{
	color: #fff;
}
#content {
  float: left;
  width: 720px;
  padding-right: 50px;
  border-right: 1px solid #eee;
}

article .hd {
	zoom:1;
}
article .hd:after{
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
article .hd .details {
    float: right;
    outline: 0;
    padding: 15px 0 0;
    color: #AEAEAE;
    line-height: 1;
}

article .hd .details a {
    color: #AEAEAE;
}

article .hd .details a:hover {
    color: #3EAF0E;
}

article h1 {
    float: left;
    margin-bottom: 40px;
}

article h1 a {
    color: #333
}

article h1 a,
article h1 a:hover {
    font-size: 24px;
    font-weight: normal;
    text-decoration: none;
}

article .bd .cut-pic {
    margin: 0 0 10px;
    overflow: hidden;
}

article .bd .cut-pic img {
    display: block;
    overflow: hidden;
}

article .bd p {
    color: #777;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 1em;
}

article .bd p img {
    text-indent: 0;
    display: block;
    margin: 15px 0;
}

article .ft {
    padding: 12px 0 0;
   /* border-bottom: 1px dotted #e0e0e0;
    height: 18px;*/
}

article .ft span {
    float: left;
    margin: 0 10px 0 0;
}

article .ft span,
article .ft span a {
    color: #aeaeae
}

article .ft .get-all {
    text-align: right;
}

.mod {
    padding: 26px 0 0;
}

.mod .hd {
   
    padding: 2px 0 0;
}

.mod .hd h2 {
    height: 28px;
    color: #525252;
    font-size: 16px;
    line-height: 1.1;
}

.sub-hd .logo{
	width: 95px;
	height: 50px;
	/*background: url(../images/sublogo.png) 0 50% no-repeat;*/
	float: left;
	text-indent: 0;
}
.sub-hd a img{ margin-top: 10px;}

.sub-hd .nav{
	float: right;
	height: 30px;
	line-height: 30px;
	width: 96px;
	text-align: center;
	/*border: 1px solid #fff;*/
	/*border-radius: 25%;*/
	margin-top: 10px;
	background: url(../images/radius.png) no-repeat;
}

#main aside{
	width: 185px;
	float: right;
}
.single .list .cat-item{
	background: url(../images/cate_icons.png) no-repeat;
	padding-left: 34px;
	
}
.single .list li{
	margin-bottom: 20px;
	font-size: 14px;
	color: #777;
	overflow: hidden;
	zoom:1;
}
.single .list li a {
	color: #777;
	float: left;
}
.single .list li a:hover{
	color: #e82954;
}
.single .list .cat-item-24{
	background-position: 0 0;
}
.single .list .cat-item-8{
	background-position: 0 -212px;
}
.single .list .cat-item-22{
	background-position: 0 -40px;
}
.single .list .cat-item-5{
	background-position: 0 -84px;
}
.single .list .cat-item-23{
	background-position: 0 -127px;
}
.single .list .cat-item-21{
	background-position: 0 -169px;
}
.single .list .cat-item-20{
	display: none;
}
.single .list li span{
	float: right;
}
.mod .hd h2{
	font-size: 18px;
	color: #444;
	margin-bottom: 30px;
}
.cat-name{
	font-size: 24px;
	margin-bottom: 25px;
	color: #444;
	float: left;
}
.mod-cat-nav .nav{
	float: right;
	text-align: right;
}

.mod-cat-nav .nav li{
	display: inline-block;
	*display: inline;
	*zoom:1;
	font-size: 14px;
}
.mod-cat-nav .nav li a{
	color: #999;
	margin-left: 4px;
	padding-right: 12px;
	background: url(../images/splite.gif) 100% 50% no-repeat;
}
.mod-cat-nav .nav .cat-item-20 a{
	background: none;
}
#job-dialog {
	border: 0 none;
	background: #e82954;
	color: #fff;
	width: 790px;
	padding: 20px 20px 40px 30px;
}
#job-dialog  .hd{
	height: 25px;
	position: relative;
}
#job-dialog  h1{
	font-size: 24px;
	margin-bottom: 40px;
}
#job-dialog  .bd{
	font-size: 14px;
	line-height: 2;
}
#job-dialog  .bd h2{
	margin-bottom: 15px;
}
#job-dialog  .bd ul{
	margin-bottom: 25px;
}
#job-dialog  .ft {
	text-align: right;
}
#job-dialog  .ft .btn-joinus{
	display: inline-block;
	*display: inline;
	*zoom:1;
	text-align: center;
	color: #e82954;
	width: 122px;
	height: 42px;
	line-height: 42px;
	font-size: 14px;
	background: url(../images/uxc_joinus.png) 0 -39px no-repeat;
}
#job-dialog  .close{
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	*display: inline;
	*zoom:1;
	width: 20px;
	height: 20px;
	background: url(../images/uxc_joinus.png) no-repeat;
}
.active .fadeUp{
    -webkit-animation: fadeUp 1s ease;
    -moz-animation: fadeUp 1s ease;
    -o-animation: fadeUp 1s ease;
    animation: fadeUp 1s ease;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.active .fadeIn{
    -webkit-animation: fadeIn 1s ease;
    -moz-animation: fadeIn 1s ease;
    -o-animation: fadeIn 1s ease;
    animation: fadeIn 1s ease;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.active .animateDelay0{-webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -o-animation-delay:0.5s; animation-delay:0.5s;}
.active .animateDelay1{-webkit-animation-delay:1s; -moz-animation-delay:1s; -o-animation-delay:1s; animation-delay:1s;}
.active .animateDelay2{-webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -o-animation-delay:1.5s; animation-delay:1.5s;}
.active .animateDelay3{-webkit-animation-delay:2.5s; -moz-animation-delay:2.5s; -o-animation-delay:2.5s; animation-delay:2.5s;}
.active .animateDelay4{-webkit-animation-delay:4s; -moz-animation-delay:4s; -o-animation-delay:4s; animation-delay:4s;}
.active .animateDelay5{-webkit-animation-delay:5s; -moz-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s;} 
@keyframes fadeUp {
    0% { opacity: 0;transform:translateY(-20px);}
    100% { opacity: 1;transform:translateY(0px);}
}
@-moz-keyframes fadeUp {
    0% {opacity: 0; transform:translateY(-20px);}
    100% {opacity: 1; transform:translateY(0px);}
}
@-webkit-keyframes fadeUp {
    0% {opacity: 0;-webkit-transform:translateY(-20px);}
    100% {opacity: 1; -webkit-transform:translateY(0px);}
}

@-o-keyframes fadeUp {
    0% { opacity: 0;-o-transform:translateY(-20px);}
    100% { opacity: 1;-o-transform:translateY(0px);}
}
@-ms-keyframes fadeUp {
    0% { opacity: 0;-ms-transform:translateY(-20px);}
    100% { opacity: 1;-ms-transform:translateY(0px);}
}

/*加入我们弹窗*/
.mod-job-detail,
.active .text{
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: .2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 1s;
  -moz-animation-delay: .2s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -ms-animation-duration: 1s;
  -ms-animation-delay: .2s;
  -ms-animation-timing-function: ease;
  -ms-animation-fill-mode: both;
  animation-duration: 1s;
  animation-delay: .2s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.active .item-v{
    opacity: 1;
    -webkit-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -moz-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -o-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.active .item-i{
    opacity: 1;
    -webkit-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -moz-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -o-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.2s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.active .item-r{
    opacity: 1;
    -webkit-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.3s;
    -moz-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.3s;
    -o-animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.3s;
    animation: zoomIn 2s cubic-bezier(0, .25, .08, 1) 2.3s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

@keyframes zoomIn {
    0%{ transform: scale(0);}
    60%{ transform: scale(1.1);}
    100% { transform: scale(1);}
}
@-moz-keyframes zoomIn {
    0%{ transform: scale(0);}
    60% { transform: scale(1.1);}
    100% { transform: scale(1);}
}
@-webkit-keyframes zoomIn {
    0%{ -webkit-transform: scale(0);}
    60% { -webkit-transform: scale(1.1);}
    100% { -webkit-transform: scale(1);}
}
@-o-keyframes zoomIn {
    0%{ -o-transform: scale(0);}
    90% { -o-transform: scale(1.1);}
    100% { -o-transform: scale(1);}
}
@-ms-keyframes zoomIn{
    0%{ -ms-transform: scale(0);}
    60% { -ms-transform: scale(1.1);}
    100% { -ms-transform: scale(1);}
}


/*share to*/
.share-btn:hover, .share-btn-active{color: #e82954!important;}
.share-btn-active{background: url(../images/share.png) 100% 50% no-repeat; padding-right: 15px;}
.sarehtools { display:none; position: absolute; left: 20px; top: 20px; z-index:1000;}
#sharetools{width: 105px; height: 28px; padding: 16px 9px 9px; background: url(../images/share_btn.png) 0 0 no-repeat;}
.share-item{width: 26px; height: 26px; display: inline-block; *display: inline; *zoom:1; margin-right: 8px; }
#tqzone { margin-right: 0; }

/*gotop*/
.gotop{background: url("../images/top.jpg") no-repeat;
position: fixed;  width: 64px;height: 64px;overflow: hidden;}
.gotop:hover{
	background-position: 0 -64px;
}
.ie6 .gotop{position:absolute;}

.single article .bd img:hover,
.single article .bd pre:hover{
    box-shadow:0 0 10px #777;
	-webkit-box-shadow:0 0 10px #777;
	-moz-box-shadow:0 0 10px #777;
	border-radius: 3px;
}

.js_page{
	/*display: none;*/
}

.show-box{
	display: block;
}
