@charset "utf-8";
html{ -webkit-text-size-adjust:none;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
body{ font:12px/1.5  \5FAE\8F6F\96C5\9ED1, Arial,\5b8b\4f53, Verdana;}
h1,h2,h3,h4,h5,h6,p,a{ font-size:100%;}
ul,ol,li{ list-style:none;}
table{ border-collapse:collapse; border-style:none;}
button{ border:0 none; padding:0; cursor:pointer;}
iframe{ display:block}
img{ border:0;}
input,select,img{ vertical-align:middle;}
textarea{ resize:vertical;}
a{ outline:0; text-decoration:none;}
.clear{clear:both;height: 0;width: 100%;font-size: 0;line-height: 0;overflow: hidden;}
.clear_fix {zoom:1;}
.clear_fix:after { display:block; clear:both; content:"."; visibility:hidden; height:0; font-size:0;}
.fl{ float:left}
.fr{ float:right}
.hide{ display:none!important;}
body,html{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,simsun,sans-serif;background: #fff;height: 100%;overflow: hidden;}
::-webkit-scrollbar{width:8px;height: 8px;background: transparent;}
::-webkit-scrollbar-thumb{border-radius: 16px;background-color: #d6d7d9;}
::-webkit-scrollbar-thumb:hover{background-color: #c0c3c5;}
::-webkit-scrollbar-thumb:active{background-color: #acafb2;}
::-webkit-scrollbar-button{background: transparent;height: 2px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	html{padding-right:2px;}
}

.loading{width: 100%;height: 100%;}
.loading span{background:url("../images/loading.gif") no-repeat top center;width: 200px;height: 50px;padding-top:60px;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -65px;text-align: center;font-size: 16px;font-family: Microsoft Yahei;}
.error{width: 100%;height: 100%;background:#f5f5f5;position: absolute;top: 0;left: 0;}
.error span{display:block;padding-top:160px;background:url(../images/error.png) no-repeat top center;font-size: 16px;text-align: center;color:#6c6c6c;position: absolute;top: 50%;width: 100%;margin-top: -85px;text-indent: 32px;margin-left: -16px;}

.wrap{width: 100%;height: 100%;overflow: auto;overflow-x: hidden;}
.toper{width: 100%;height: 140px;background:#223055 url(../images/new_mzone/banner.jpg) no-repeat;position: relative;margin-bottom: 26px;}
.toper .pic{width: 116px;height: 116px;position: absolute;top: 40px;left: 20px; background-color: #fff;padding:4px;border:1px solid rgba(0,0,0,0.1);border-radius: 3px;}
.toper .info{padding :58px 0 0 164px;color: #fff;}
.toper .info strong{font-weight: normal;font-size: 16px;line-height: 100%;position: relative;}
.toper .info span{font-size: 12px;line-height: 100%;margin-top: 12px;display: block}
.toper .info strong.gril:before,.toper .info strong.boy:before{content: "";width: 18px;height: 18px;position: absolute;top: 2px;right: -24px;background: url(../images/new_mzone/icon.png) no-repeat -100px -20px;}
.toper .info strong.boy:before{background: url(../images/new_mzone/icon.png) no-repeat -100px 0;}
.toper .info p{font-size: 12px;line-height: 100%;margin-top: 8px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: calc(100% - 275px);}

.toper .info newIco{position: relative;left: 22px;}
/*vip、音乐包图标*/
newIco.vipNom{top: 0px;background: url(../images/new_mzone/new_vip_icon.png) no-repeat;display: inline-block;cursor: pointer!important;width:32px; height: 12px; margin: 4px 0px 0px 8px; background-position: -0px -75px;}
newIco.vipYear{top: 0px;background: url(../images/new_mzone/new_vip_icon.png) no-repeat;display: inline-block;cursor: pointer!important;width: 42px; height: 12px; margin: 4px 0px 0px 8px; background-position: -41px -75px;}
newIco.packageNom{top: 2px;background: url(../images/new_mzone/new_vip_icon.png) no-repeat;display: inline-block;cursor: pointer!important;width: 19px;height: 15px; margin: 3px 0px 0px 8px; background-position: -0px -94px;}
newIco.packageYear{top: 2px;background: url(../images/new_mzone/new_vip_icon.png) no-repeat;display: inline-block;cursor: pointer!important;width: 32px;height: 15px; margin: 3px 0px 0px 8px; background-position: -38px -94px;}

.toper .data{width: 275px;height: 38px;position: absolute;top:67px;right: 0;}
.toper .data li{width: 68px;height: 38px;padding-right: 1px;text-align: center;float: left;font-size: 12px;color: #fff;position: relative;cursor: pointer;overflow: hidden;} 
.toper .data li:after{content: "";width: 1px;height: 100%;position: absolute;right: 0;top: 0;background:linear-gradient(to top,transparent, #fff,transparent);opacity: 0.5;}
.toper .data li span{font-size: 16px;display:block;line-height: 100%;margin-bottom: 3px;}
.toper .data li:last-child{padding-right: 0;}
.toper .data li:last-child:after{content:none;}

.toper .setting,.toper .report,.toper .concern{height: 23px;line-height: 23px;position: absolute;top: 10px;border-radius: 10px;background:rgba(0,0,0,0.4);display: none;}
.toper .setting span,.toper .report span,.toper .concern span{font-size: 12px;color: #fff;opacity: 0.7;cursor: pointer;}
.toper .setting:hover span,.toper .report:hover span,.toper .concern:hover span{opacity: 1;}


.toper .setting{width: 34px;padding-left: 28px; right: 10px;}
.toper .setting:before{content: "";width: 14px;height: 14px;position: absolute;top: 5px;left: 10px;background: url(../images/new_mzone/icon.png) no-repeat;}
.toper .setting:hover:before{background-position: 0 -20px;}

.toper .report{width: 44px;right: 10px;text-align: center;}
.toper .concern{width: 39px;padding-left: 29px;right: 64px;}
.toper .concern:before{content: "";width: 11px;height: 11px;position: absolute;top: 6px;left: 12px;background: url(../images/new_mzone/icon.png) no-repeat -20px 0;}
.toper .concern:hover:before{background-position: -20px -20px;}
.toper .concern span:nth-child(2){display: none;}
.toper .concerned{width: 68px;padding: 0;text-align: center;}
.toper .concerned:before{content: none;}
.toper .concerned:hover span:nth-child(1){display: none;}
.toper .concerned:hover span:nth-child(2){display: inline;}

.toper .setting_tab{width:96px;height: 85px;position: absolute;right: 10px;top:37px;display: none;}
.toper .setting_tab:before{content: "";border-width:4px;border-color: transparent transparent rgba(0,0,0,0.85) transparent;border-style:solid;width: 0;height: 0;position: absolute;top:-4px;left: 50%;margin-left: -4px;}
.toper .setting_tab ul{width: 100%;height: 81px;margin-top: 4px;background-color: rgba(0,0,0,0.85);border-radius:4px;}
.toper .setting_tab ul li{line-height: 40px;text-align: center;font-size: 14px;color: #fff;border-bottom: 1px solid rgba(255,255,255,0.1);cursor: pointer;}
.toper .setting_tab ul li:last-child{border-bottom: 0 none;}
.toper .setting_tab ul li:hover{color: #08b6ff;}

.special{padding:20px;}
.special h3{font-size: 14px;color: #333;line-height: 100%;padding-bottom: 10px;border-bottom: 1px solid #e5e5e5;}
.special h3 span{font-size: 12px;color: #888;}
.special .list{overflow: hidden;}
.special .list li{margin:20px 34px 0 0;float: left;font-size: 0;width: 90px;position: relative;}
.special .list li img{width: 100%;height: 100%;border-radius: 4px;display: block;}
.special .list li a.cover{width: 90px;height: 90px;position: relative;display: block;}
.special .list li a.text{font-size: 14px;color: #333;margin: 10px 0 8px 0;line-height: 18px;display:inline-block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.special .list li a.text:hover{color: #64b0fa;}
.special .list li span{font-size: 12px;color: #999;display: block;line-height: 100%;}
.special .list li i{position:absolute;width:26px;height:26px; right:7px; top:61px;z-index:4;background: url(../images/ico_splay.png);display: none;cursor: pointer;}
.special .list li:hover i{display: block;}
.special .list li i:hover{background: url(../images/ico_splay_hover.png);}

.private{width: 117px;height:12px;padding-top: 113px;line-height: 100%;margin:134px auto 0;font-size: 13px;text-align: center;color: #666;background: url(../images/new_mzone/private.png) no-repeat top right;display: none;}

.friend .list{padding:0 30px;width: calc(100% - 30px);overflow: hidden;}
.friend .title{height: 69px;padding: 0 30px;}
.friend .title span.text{font-size:24px;font-weight: bold;display: inline-block;margin-top:10px;}
.friend .title span.count{font-size: 12px;color: rgba(51,51,51,0.6);display: inline-block;margin-left: 20px;}
.friend .card{width: 134px;height: 190px;background-color: rgba(51,51,51,0.03);float: left;margin:0 20px 20px 0;border-radius: 5px;font-size: 0;position: relative;}
.friend .card:hover{background-color: rgba(51,51,51,0.08);}
.friend .card .pic{width: 90px;height: 90px;margin:18px 22px 9px 22px;border-radius: 100%;float: left;cursor: pointer;}
.friend .card .name{font-size: 13px;color: #333;margin: 0 22px 0 22px;display:inline-block;text-align: center;vertical-align: middle; line-height: 150%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 90px;cursor: pointer;}
.friend .card .name:hover{color: #5192fe;}
.friend .card .name:active{color: #4983e5;}
.friend .card p{font-size: 12px;color: rgba(51,51,51,0.6);line-height: 100%;text-align: center;}
.friend .card .follow,.friend .card .history{width: 100%;line-height: 28px;text-align: center;position: absolute;bottom: 12px;left: 0;cursor: default;}
.friend .card .follow span{display: inline-block;font-size: 12px;vertical-align:middle;}
.friend .card .nofollow{cursor: pointer;}
.friend .card .nofollow span{color: #333;}
.friend .card .nofollow:hover span{color: #5192fe;}
.friend .card .nofollow:active span{color: #4983e5;}
.friend .card .nofollow:before{content: "";width: 16px;height: 16px;display: inline-block;vertical-align:middle;background: url(../images/new_mzone/icon.png) no-repeat -16px -40px;margin-right: 5px;margin-bottom: 3px;}
.friend .card .nofollow:hover:before{background-position: -32px -40px;}
.friend .card .nofollow:active:before{background-position: -48px -40px;}
.friend .card .followed:before{content: "";width: 16px;height: 16px;display: inline-block;vertical-align:middle;background: url(../images/new_mzone/icon.png) no-repeat 0 -40px;margin-right: 4px;}
.friend .card .followed span{color: rgba(51,51,51,0.6);}
.friend .card .followed span.split{margin-left: 9px;font-size: 12px;color: rgba(51,51,51,0.1);}
.friend .card .followed span.chat{margin-left: 9px;font-size: 12px;color: #333;cursor: pointer;}
.friend .card .followed span.chat:hover{color: #5192fe;}
.friend .card .followed span.chat:active{color: #4983e5;}
.friend .card .history{color: #333;font-size: 12px;cursor: pointer;}
.friend .card .history:hover{color:#5192fe;}
.friend .card .history:active{color: #4983e5;}
.friend .card .history:before{content: "";width: 16px;height: 16px;display: inline-block;vertical-align:middle;background: url(../images/new_mzone/icon.png) no-repeat -80px -40px;margin-right: 6px;margin-bottom: 4px;}
.friend .card .history:hover:before{background-position: -96px -40px;}
.friend .card .history:active:before{background-position: -112px -40px;}
.friend .card3{height: 160px;}
.friend .empty{width: 160px;padding-top: 190px;margin: 112px auto;line-height:100%;text-align: center;font-size:13px;color:#666;background: url(../images/new_mzone/empty.png) no-repeat;}
.friend .end_text{text-align: center;font-size: 14px;line-height: 60px;}

.pop{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
.pop .title{line-height: 36px;background: #27a2e9;padding: 0 16px;color: #fff;font-size: 14px;position: relative;}
.pop .title i{width: 11px;height: 11px;background: url(../images/new_mzone/icon.png) no-repeat -120px 0;position: absolute;top: 12px;right:16px;cursor: pointer;}
.pop .ctn{background: #fff;overflow: hidden;}
.pop .btns{height: 40px;background: #f8f8f8;padding:10px 16px 0;text-align: right;}

.pop_bg{width: 100%;height: 100%;background: rgba(0,0,0,0.1);position: absolute;top: 0;left: 0;}

#privacy_pop .pop{width: 290px;}
#privacy_pop dl{padding: 16px;font-size: 14px;color: #666;line-height: 100%;}
#privacy_pop dd{margin-top: 16px;padding-left: 21px;position: relative;display: block;cursor: pointer;}
#privacy_pop dd:before{content:"";width: 16px;height: 16px;background: url(../images/new_mzone/icon.png) no-repeat -60px 0;position: absolute;top: 0;left: 0;cursor: pointer;}
#privacy_pop dd.cur:before{background-position:-60px -19px; }

#report_pop .pop{width: 370px;}
#report_pop ul{padding: 16px;padding-top: 0;padding-bottom: 19px;font-size: 13px;color: #666;line-height: 100%;}
#report_pop li{margin-top: 16px;padding-left: 20px;position: relative;display: block;cursor: pointer;}
#report_pop li:before{content:"";width: 14px;height: 14px;background: url(../images/new_mzone/icon.png) no-repeat -80px 0;position: absolute;top: 0;left: 0;cursor: pointer;}
#report_pop li.cur:before{background-position:-80px -20px; }
#report_pop li input{width: 268px;height: 24px;line-height: 24px;border: 1px solid #ccc;margin-left: 10px;padding:0 6px;position: absolute;top: -6px;}

#unfollow_pop .pop{width: 290px;}
#unfollow_pop .ctn p{line-height: 80px;text-align:  center;}

.pc_temp_b_btn02,.pc_temp_w_btn02{display:inline-block;vertical-align:middle;zoom:1;font-family:\5FAE\8F6F\96C5\9ED1;}
.pc_temp_b_btn02{margin-right: 10px;}
.pc_temp_b_btn02 span,.pc_temp_w_btn02 span{position:relative;float:left;display:inline;text-align: center;overflow:hidden;zoom:1;cursor:pointer;border-radius: 2px;width: 88px;height: 28px;line-height: 28px;font-size:14px;}
.pc_temp_w_btn02 span{border:1px solid #ccc;background:#fff;color: #666;} 
.pc_temp_b_btn02 span{border:1px solid #169af3;background:#169af3;color: #fff;}
.pc_temp_b_btn02:hover span{border-color: #0c8ee6;background: #0c8ee6;}
.pc_temp_w_btn02:hover span{border-color: #999;background: #fff;color:#333;}
.pc_temp_b_btn02 span:active{border-color: #169af3;background: #169af3;}
.pc_temp_w_btn02 span:active{border-color: #ccc;background: #fff;color:#666;}

.me .setting,.ta .report,.ta .concern{display: block;}
.special h3 font{display:none;}
.me .special h3 font:nth-child(1),.ta .special h3 font:nth-child(2){display: inline;}