/*css reset*/
@charset "UTF-8";
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    background-color: transparent;
}
/*page css*/
html,body{
	width: 100%;
	height: 100%;
  font-family: "微软雅黑";
}
/*.swiper-wrapper{
  height: auto;
}*/
.hide{
	display: none;
}
.loading{
  height: 100%;
  width: 100%;
  background: #fffeea;
  overflow: hidden;
  background: url("../img/loading2.jpg") no-repeat left center;
  background-size: 100% 100%;
  /*position: relative;*/
}
.main_loading{
  /*width: 100%;*/
  /*height: 200px;*/
  position: absolute;
  bottom: 2%;
  left: 5%;
  /*margin-top: -50%;*/
  /*text-align: center;*/
}
.loading img{
  width: 53%;
  display: block;
  margin: 0 auto;
  /*margin-top: 30%;*/
}
.loading-word{
  position: absolute;
  bottom: 0;
  left: 50%;margin-left: -150px;
  text-align: center;
}
.loading-word img{
  width: 50%;
}
.pro{
  width: 100%;
  /*position: absolute;*/
  margin-top: 10px;
}
.process{
  /*position: absolute;*/
  /*left: 65px;
  top: 250px;*/
  width: 85px;
  height: 40px;
  margin: 0 auto;
}
.load{
  /*position: absolute;*/
  width: 85px;
  height: 8px;
  /*left: 0px;
  top: 0px;*/
  background-color: #fff;
  border-radius: 2px;
}
.tiao{
  /*position: absolute;*/
  width: 0;
  height: 8px;
  /*left: 0;
  top: 0;*/
  background-color: #930303;
  border-radius: 2px;
}
.num{
  /*position: absolute;
  width: 100%;
  left: 84px;
  top: 20px;*/
  font-size: 14px;
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  color: #333;
}
[class^='ico'], [class*=' ico'] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("../img/ico.png");
    vertical-align: middle;
    margin-top: -0.2em;
}
.container{
	width: 100%;
	height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling : touch;
}
.invite{
	width: 100%;
	height: 100%;
	background: url("../img/invite.jpg") no-repeat left top;
	background-size: 100% 100%;
	position: relative;
	left: 0;
  overflow: hidden;
}
.invite.slideLeft{
	left: -100%;
	-webkit-transition: all 0.5s linear;
  	transition: all 0.5s linear;
}
.main_invite{
	width: 95%;
  background: url("../img/inhan.png") no-repeat center;
  height: 56%;
  background-size: 100% 100%;
  margin: 30% auto 0;
  /*top: 30%;*/
  overflow: hidden;
  left: 2.5%;
}
/*.main_invite img{
	display: block;
	margin: 0 auto;
	width: 93%;
}*/
.welcome{
  width: 70%;
  /*position: absolute;
  bottom: 125px;
  left: 78px;*/
  color: #000;
  font-size: 16px;
  margin: 30% auto 0;
  padding-left: 17%;
}
.welcome .welcome_title{
  width: 145px;
}
.welcome .welcome_title img{
  width: 55%;
}
.welcome_word{
  font-size: 16px;
}
.invite_btn{
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 15px;
}
.invite_btn img{
  width: 41%;
}
.item20{
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: -100%;
  position: relative;
}
.item20.slideLeft02{
	left: 0;
	top: 0;
	-webkit-transition: all 0.5s linear;
  	transition: all 0.5s linear;
  	display: block;
}
.item20.show{
  z-index: 1000;
}
.item20 .item20-top{
  position: absolute;
  left: 0;top: 0;
  line-height: 0;
}
.item20 .item20-bottom{
  position: absolute;
  left: 0;bottom: 0;
  line-height: 0;
 /* height: 83px;*/
  z-index: 1000;
}
.item20-bottom img{
	width: 100%;
}
.item20-info{
  background: #f5f5f5;
  width: 100%;height:100%;
  overflow: auto;
}
.item20-info .info{
  padding: 2px 0.4em 130px 0.4em;
  overflow: auto;
}
.qun{
  overflow: hidden;
  margin-top: 25px;
  display: none;
}
.qun .tuxiang{
  float: left;
  width: 45px;height: 45px;
  margin-right: 5px;
}
.qun h4{
  font-size: 12px;
  color: #000;
  margin: 3px 0 4px 0;
  font-weight: normal;
}
.qun .txt {
  position: relative;
  width: 240px;
  float: left;
  margin-left: 8px;
}
.main_txt{
  background: #fff;
  border-radius: 5px;
  padding: 0.4em;
  margin-right: 19px;
  font-size: 12px;
}
.qun .txt i{
  position: absolute;
  width: 10px;height: 20px;
  background: url(../images/talk-info-l.jpg) no-repeat;
  left: -8px;top: 20px;
}
.qun .txt h3{
  font-size: 26px;
  font-weight: normal;
  line-height: 1.3em;
  font-size: 16px;
  display: inline-block;
  color: #000;
}
.qun .txt p{
  color: #888;
  font-size: 18px;
  word-break: break-all;
  line-height: 1.3em;
}
.qun .img-txt{
  overflow: hidden;
  margin-top: 6px;
  min-width: 354px;
}
.qun .img-txt img{
  float: right;
  width: 88px;height: 88px;
  margin-left: 20px;
}
.qun.peo .tuxiang{
  float: right;
  margin-right: 0;margin-left: 5px;
  background: #fff;
}
.qun.peo h4{
  padding-left: 0;
  padding-right: 86px;
  text-align: right;
}
.qun.peo{
  display: block;
}
.qun.peo .txt{
  margin-left: 132px;
  background: #a0e75b;
  border: 1px solid #96c382;
  margin-right: 13px;
  float: right;
}
.qun.peo .txt i{
  background: url(../images/talk-info-r.jpg) no-repeat;
  right: -8px;top: 20px;
  left: inherit;
}
.qun.peo .img-txt img{
  margin-left: 0;
  margin-right: 20px;
}
.qun .my_photo{
  float: right;
}
.qun .my_txt{
  float: right;
  text-align: right;
  margin-right: 6px;
}
.qun .my_txt .main_txt{
  margin-right: 0;
  background: #bad274;
  text-align:left;
}
.wchat-txt{
  position: absolute;
  width: 402px;
  height: 58px;
  left: 74px;
  top: 12px;
  border: 0;
  box-shadow: none;
  padding: 0 13px;
  font-size: 24px;
  line-height: 24px;
}
.wchat-txt:focus{
  outline: none;
}
.btn7{
  position: absolute;
  bottom: 100px;right: 26px;
  display: none;
}
.qun_tip{
	width: 88%;
	/*height: 28px;*/
	background: #dcdcdc;
	color: #fff;
	font-size: 12px;
	line-height: 28px;
	text-align: center;
	margin: 15px auto 0;
	border-radius: 5px;
}
.smile{
	  display: inline-block;
    width: 22px;
    height: 23px;
    position: relative;
    bottom: -3px;
    margin: 0 2px;
}
.smile img{width:100%;}
.txt .only-pic{max-width:70%;}

.check{
	margin: 20px auto 0;
	width: 160px;
  height: 160px;
	display: none;
	position: relative;
	bottom: 0;
  background: url("../img/check_btn.png") no-repeat center;
  background-size: 100% 100%;
  text-align: center;
}
.check.slidedown{
	bottom: -500px;
	-webkit-transition: all 0.5s linear;
  	transition: all 0.5s linear;
}
/*.check img{
	width: 100%;
}*/
.check span{
  display: inline-block;
  width: 57px;
  margin-top: 45%;
}
.check span img{
  width: 100%;
}
.notice{
	width: 93%;
	height: 230px;
	background: url("../img/notice.png") no-repeat center;
	background-size: 100% 100%;
	margin: 20px auto 0;
	position: relative;
	bottom: -500px;
	display: none;
	z-index: 999;
	opacity: 0;
}
.notice.slideup{
	display: block;
	opacity: 1;
	bottom: 0;
	-webkit-transition: all 1s linear;
  	transition: all 1s linear;
}
.notice span{
	width: 80px;
	position: absolute;
	right: 43px;
  bottom: 30px;
}
.notice span img{
	width: 100%;
}
.friend{
	width: 100%;
	overflow: auto; 
  display: none;
  background: #f8f8f8;
  /*position: relative;*/
}
.headbg{
	width: 100%;
	height: 225px;
	position: relative;
}
.headbg img{
	width: 100%;
  height: 100%;
}
.user{
	display: block;
	width: 85px;
	height: 85px;
	position: absolute;
	right: 15px;
	bottom: -30px; 
	/*background: url("../img/user.jpg") no-repeat center;
	background-size: 100% 100%;*/
}
.headbg p{
	position: absolute;
	bottom: 5px;
	right: 110px;
	font-size: 16px;
	color: #fff;
}
.main_friend{
	color: #000;
  padding: 3em 0 50%;
}
.main_friend li{
	padding: 1.25em;
    padding-left: 5em;
    border-bottom: solid #f3f3f5 1px;
    font-size: 14px;
}
.main_friend li h2{
	float: left;
    position: relative;
    width: 3em;
    height: 3em;
    margin-left: -3.75em;
}
.main_friend li h2 img{
  width:100%;
  height:100%;
}
.main_friend li h2 span {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 25%;
    font-size: 1em;
    color: #596d93;
    line-height: 1.2em;
    white-space: nowrap;
}

.user1{
	background: url("../img/touxiang_03.png") no-repeat center;
}
.user2{
	background: url("../img/user_03.png") no-repeat center;
}
.user3{
	background: url("../img/user_06.png") no-repeat center;
}
.user4{
	background: url("../img/user_08.png") no-repeat center;
}
.user5{
	background: url("../img/user_11.jpg") no-repeat center;
}
.user6{
	background: url("../img/touxiang_12.jpg") no-repeat center;
}
.user7{
  background: url("../img/touxiang_03.png") no-repeat center;
}
.user1,.user2,.user3,.user4,.user5,.user6,.user7{
	background-size: 100%;
	height: 100%;
}
.main_friend li .user1:after {
    content: "16级安迪";
}
.main_friend li .user2:after {
    content: "16级崔超";
}
.main_friend li .user3:after {
    content: "16级张 晨";
}
.main_friend li .user4:after {
    content: "考生A";
}
.main_friend li .user5:after {
    content: "16级文林";
}
.main_friend li .user6:after {
    content: "16级赵琳";
}
.main_friend li .user7:after {
    content: "16级安迪";
}
.main_friend li p {
    line-height: 1.4em;
}
.main_friend li h2+* {
    margin-top: 1.5em;
}
.main_friend li h6 {
    text-align: right;
    margin-top: 3%;
}
.main_friend li h6 time {
    float: left;
    font-size: 0.6em;
    color: #787878;
   /* margin-top: 0.2em;*/
}
.main_friend li i {
    font-size: 1.8em;
    margin-top: -0.1em;
}
.main_friend li h6 i {
    font-size: 1.8em;
    background-size: 100% auto;
}
.ico2 {
    background-position-y: 10%;
}
.ico3 {
    background-position-y: 20%;
    background-size: 100% auto;
}
.ico4 {
    background-position-y: 90%;
    background-size: 100% auto;
}
.ico5 {
    background-position-y: 40%;
    background-size: 100% auto;
}
.ico6 {
    background-position-y: 50%;
    background-size: 100% auto;
}
.ico7 {
	background: url("../img/biaoqiang_13.png") no-repeat center;
	background-size: 100% auto;
}
.ico8 {
	background: url("../img/biaoqiang_14.png") no-repeat center;
	background-size: 100% auto;
	margin-right: 3px;
  font-size: 1.6em !important;
}
.ico9 {
	background: url("../img/biaoqiang_15.png") no-repeat center;
	background-size: 100% auto;
	margin-right: 3px;
  font-size: 1.6em !important;
}
.ico10{
  background: url("../img/icon_03.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  font-size: 1.3em !important;
}
.ico11{
  background: url("../img/icon_07.png") no-repeat center;
  background-size: 100% auto;
  margin-right: 3px;
}
.ico12{
  background: url("../img/icon_11.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
}
.ico13{
  background: url("../img/icon_13.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
}
.ico14{
  background: url("../img/icon_18.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  font-size: 1em !important;
  height: 1.3em;
}
.ico15{
  background: url("../img/icon_22.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 3em !important;
}
.ico16{
  background: url("../img/icon_26.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 7em !important;
}
.ico17{
  background: url("../img/icon_30.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  font-size: 1.6em !important;
}
.ico18{
  background: url("../img/icon_34.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 3.2em;
}
.ico19{
  background: url("../img/icon_38.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 2em;
}
.ico20{
  background: url("../img/icon_42.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
}
.ico21{
  background: url("../img/icon_46.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  font-size: 1.6em !important;
}
.ico22{
  background: url("../img/icon_50.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 2em;
}
.ico23{
  background: url("../img/icon_53.png") no-repeat center;
  background-size: 100% auto;
  margin-left: 3px;
  width: 2em;
}
.imgs01{
	width: 260px;
	overflow: hidden;
	margin-top: 5px;
	position: relative;
}
.imgs01 img{
	width: 100px;
	height: 100px;
	float: left;
	margin: 0 5px 5px 0;
}
.imgs02{
	width: 260px;
	overflow: hidden;
	margin-top: 5px;
  position: relative;
}
.imgs02 img{
	width: 80px;
	height: 80px;
	float: left;
	margin: 0 5px 5px 0;
}
.imgs03{
	width: 260px;
	overflow: hidden;
	margin-top: 5px;
  position: relative;
}
.imgs03 img{
	width: 215px;
	height: 110px;
	float: left;
	margin: 0 5px 5px 0;
}
.main_friend li footer {
    /*display: none;*/
    position: relative;
    font-size: 0.95em;
    background: #ededed;
    padding: 0.2em 0.75em;
    margin-top: 0.4em;
}
.main_friend li footer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0em;
    height: 0em;
    border: solid transparent 0.5em;
    border-bottom-color: #ededed;
    margin: -0.9em 0 0 0.7em;
}
.main_friend li footer p, .main_friend li footer h5 {
    /*display: none;*/
    line-height: 1.3em;
    padding: 0.3em 0;
}
.main_friend li footer h5+p:before {
    content: "";
    display: block;
    height: 0;
    margin-bottom: 0.5em;
    border-bottom: solid #fff 1px;
    border-top: solid #d8d8e0 1px;
}
.main_friend li footer em {
    color: #587096;
}

.main_friend li footer em:last-child:after {
    content: "";
}
.main_friend li footer em:first-child:after {
    content: "：";
}
.main_friend li footer em:after {
    content: "、";
}
.school_video{
	width: 215px;
  height: 116px;
	position: relative;
	margin-top: 3px;
	/*background: url("../img/friend_79.jpg") no-repeat center;*/
}
.school_video img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 110px;
}
.schoolvideo{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}
.goback{
  position: absolute;
  left: 3%;
  top: 4%;
  width: 25px;
}
.schoolvideo video{
	width: 100%;
	height: 35%;
	background: #333;
  margin-top: 47%;
}
.ticket{
  width: 215px;
  position: relative;
}
.ticket img{
  width: 100%;
  margin-top: 5px;
}
.ticket s{
  background-image: url("../img/icon_57.png");
  width: 25%;
  height: 38px;
}
#user1 s{
  background-image: url("../img/hand.png");
  width: 22%;
}
.main_friend li figure s {
    -webkit-animation: ani-hand 1.5s 1.2s infinite both;
    pointer-events: none;
    position: absolute;
    left: 30px;
    top: 30px;
    padding-bottom: 18%; 
    background-size: 100% 100%;
}
.allpano{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.userpano1-1,.userpano1-2,.userpano1-3,.userpano1-4,.userpano2-1,.userpano2-2,.userpano2-3,.userpano2-4,.userpano2-5,.userpano2-6,.userpano3-1,.userpano3-2,.userpano3-3,.userpano3-4,.userpano4-1,.userpano4-2,.userpano4-3,.userpano4-4,.userpano5-1,.userpano5-2,.userpano5-3,.userpano5-4,.userpano5-5,.userpano5-6{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  background:#000;
}

.back{
  width: 50px;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  color: #ff9804;
  text-align: center;
  border: 1px solid #ff9804;
  background: rgba(0,0,0,.4);
  position: absolute;
  left: 10px;
  top: 20px;
  border-radius: 10px;
  z-index: 99;
  display: none;
}

.blackBg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}
.blackBg img{
  width: 93%;
  top: 50%;
  margin-top: -35%;
  left: 3%;
}
.ab {
  position: absolute;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated2 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite,.animated2.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.alternate,
.animated2.alternate {
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes ani-hand{
    0%{ -webkit-transform: translateY(100%) scale(1); opacity: 0;}
    30%, 40%{ -webkit-transform: translateY(0%) scale(1); opacity: 1;}
    50%{ -webkit-transform: translateY(0%) scale(0.92); opacity: 1;}
    60%, 70%{ -webkit-transform: translateY(0%) scale(1); opacity: 1;}
    90%, 100%{ -webkit-transform: translateY(0%) scale(1); opacity: 0;}
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

.main_friend li p span{
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 1px;
}
.main_friend li p span img{
  width:100%;
}