html{margin:0 auto;height:100%;padding:0;background:#000000;}
body{margin:0 auto;padding:0;max-width:900px;height:100%;}
body::-webkit-scrollbar{ 
 
width: 8px;
 
}

.usert{line-height:30px;width:100%;background:#000;color:#fff;}
.wotitle{line-height:40px;text-align:center;background:#4c5fa3;color:#fff;}

#list{background:rgba(255,255,255,.9);max-width:900px;}

.ts{display:none;text-align:center;top:0;right:0;left:0;position:fixed;line-height:50px;font-size:120%;margin:0 auto;background:#000;color:#fff;max-width:900px;z-index:3000;}
.linet b{background:#311467;color:#fff;font-size:70%;margin-left:2px;padding-top:1px;display:inline-block;line-height:10px;padding:5px;}
iframe {
display: block; /* iframes are inline by default */
background: #fff;
border: none; /* Reset default border */

}
 div::-webkit-scrollbar{ 
 margin:0;
width: 3px;
 
} 
.userlist::-webkit-scrollbar{ 
 margin:0;
height: 0px;
}
.listimg::-webkit-scrollbar{ 
 margin:0;
height: 5px;
}
#list{padding:3px 3px 3px 3px;margin-top:50px;margin-bottom:50px;}
div::-webkit-scrollbar-track,body::-webkit-scrollbar-track{
 
background: rgb(200, 200, 200);
 
border-radius: 5px;
 
}
 input:focus{
	outline: medium;
}
div::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{
 
background: rgb(120, 120, 120);
 
border-radius: 5px;
 
}input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none;
}a{text-decoration:none;}
div{word-wrap:break-word;}
.lined,.linet{font-size:95%;overflow:hidden;height:20px;line-height:20px;}
.linet{margin-left:13px;margin-right:13px;margin-bottom:3px;}
.lined{text-align:center;color:#cbcbcb;}
.le{float:left;margin-left:10px;}
.ri{float:right;margin-right:10px;}
.name{line-height:20px;}.name img{width:50px;height:50px;border-radius:8px;}


.linbg{border: 2px solid #e0e0e0;background:#e0e0e0;}
.line{/**font-weight: bold;**/
line-height:35px; 
border: 2px solid #e0e0e0;background:#e0e0e0;
    position: relative;max-width:70%;
margin:0px 8px 0 8px;
border-radius:5px;padding:4px 9px 4px 10px;font-size:100%;
}#both{clear:both;}
.line::before{
			content: '';
			width: 0;
			height: 0;
		
			position: absolute;
			
			top: 3px;
		
		}
		.lin::before{	left: -16px;
		border: 8px solid;
		border-color:transparent;
		border-right: 8px #e0e0e0 solid;
		
		}
		.lin2::before{
			right: -16px;
border: 8px solid;
border-color:transparent;
border-left: 8px #e0e0e0 solid;}.header{max-width:900px;margin:0 auto;height:46px;text-align:center;background:rgba(208,208,208,.9);position:fixed;top:0;left:0;right:0;line-height:18px;padding:6px 0px 0px 0px;color:#000;z-index:500;font-size:110%;}
		.header .left{margin-top:11px;float:left;width:15%;}
		.header .center{margin-top:5px;float:left;text-align:center;width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		.header .right{margin-top:11px;float:right;width:15%;}
		
.bottom{max-width:900px;margin:0 auto;position:fixed;bottom:0;left:0;right:0;line-height:30px;padding:0px 0px 0px 0px;background:#f4f4f4;color:#000;width:100%;z-index:500;}
.ifu{width:100%;padding0;margin:0;}
#textcon{padding:10px 3px 0px 3px;border:1px #e0e0e0 solid;border-right:0px;border-left:0px;height:30px;line-height:20px;width:100%;}
#Xx{background:#ff6461;color:#fff;border:1px #ff6461 solid;border-left:0px;height:42px;line-height:40px;width:100%;}
.xxx{border:1px #e0e0e0 solid;border-right:0px;height:42px;line-height:40px;width:100%;}


.uszz{line-height:30px;background:#eef1f2;border-bottom:4px #000 solid;overflow:hidden;padding:10px 30px 10px 30px;}
.l-r{width:25px;}
.l-r a{line-height:55px;width:100%;display:block;color:#fff;background-color:#566c8b;}
.focen{width:60%;overflow-x:auto;height:33px;vertical-align:middle;}.focen img{width:20px;vertical-align:middle;}
.fobtn{display:inline-block;}
.leftbtn{background:#ff0000;float:left;width:20%;color:#fff;}
.rightbtn{background:#004eff;float:right;width:20%;color:#fff;}
.userlist::-webkit-scrollbar {

    display:none

}
.userlist{overflow-x:scroll;overflow-y:hidden;color:#fff;height:57px;line-height:25px;width:100%;background-color:#566c8b;font-size:70%;}
.userlist img{margin-top:5px;width:30px;vertical-align:middle;border-radius:50%;}
.userlist li{width:55px;float:left;margin-left:5px;}.ustext{
width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}



li{list-style-type:none;}
.bttn{width:100%;}.bttn li{float:left;height:40px;line-height:40px;width:20%;padding:0;}.bttn li a{display:inline-block;color:#fff;width:100%;text-align:center;}
.cd{text-align:center;}.cd li{display:none;}#textcon img{width:25px;}.bq img{width:30px;display:inline-block;}.bq span{height:40px;line-height:40px;width:12.5%;text-align:center;float:left;}.bq{line-height:20px;overflow-y:auto;height:180px;padding:10px 0px 10px 0px;width:100%;}

.qjk{z-index:1000;
	background-color:rgba(0,0,0,.7);
	position:fixed;left:0; right:0; top:0; bottom:0;
margin:0 auto;max-width:900px;}
input,button{font-size:100%;}
.linput {position: relative;height:60px;line-height:60px;background:#000;margin:0px 30px 0px 30px;box-shadow:0 0 9px 3px #999;}.papa{padding:0px 10px 0px 10px;}.lbtn{width:100%;background:#ff0000;position: absolute;top: 0;bottom: 0;margin: auto 0;line-height: 30px;width:100%;color:#fff;border:0;display:block;vertical-align:middle;webkit-box-shadow: 0 0 0 900px white inset;}
.linputz{position: absolute;top: 0;bottom: 0;margin: auto 0;line-height: 30px;width:100%;color:#fff;border:0;display:block;vertical-align:middle;webkit-box-shadow: 0 0 0 900px white inset;BACKGROUND-COLOR:transparent;}
.juzon{position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);}#textcon,#textcon img{vertical-align:middle;}
.listimg{margin:0; padding:0;overflow-x:scroll;}
.mlist{border-bottom:1px #e0e0e0 solid;height:50px;padding:5px;position:relative;}
.mlistimg{width:50px;height:50px;border-radius:5px;position:absolute;top:5px;left:5px;vertical-align:middle;}
.mlistname{position:absolute;left:60px;top:5px;font-size:100%;}
.mlistdate{position:absolute;right:5px;top:5px;font-size:70%;color:#e0e0e0;}
.mlcon{position:absolute;bottom:5px;left:60px;font-size:90%;color:#a4a4a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;}

.mlcon img{width:20px;height:20px;}
.mlxx{position:absolute;bottom:5px;right:10px;font-size:90%;color:#fff;background:#ff0000;border-radius:50%;height:30px;line-height:30px;text-align:center;width:30px;}

/**炫彩气泡开始**/
.xc1{background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
background-size: 60% 30%;animation: masked-animation 3s infinite linear;
display:block;overflow:hidden;}
@keyframes masked-animation {0% {background-position: 0 0;}50% {background-position: -50% 0;}}


</style>

<style>
.loader {  height: 30px; border-radius: 50%; margin: 7px; display: inline-block; vertical-align: middle; float:left;}
.loader-star { position: absolute; top: calc(50% - 12px); }
/*LOADER-1*/
    
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 25px; height: 25px; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; }
.loader-1 .loader-inner { position: absolute; border: 4px solid #f50057; border-radius: 50%; width: 25px; height: 25px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; }
  @-webkit-keyframes loader-1-outter {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes loader-1-outter {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @-webkit-keyframes loader-1-inner {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}
 @keyframes loader-1-inner {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}
/**新消息闪烁**/
/* 定义keyframe动画，命名为blink */
@keyframes blink{
  0%{opacity: 1;}
  100%{opacity: 0;} 
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-ms-keyframes blink {
    0% {opacity: 1; } 
    100% { opacity: 0;}
}
@-o-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
/* 定义blink类*/
.blink{
    color: #ff0000;
    animation: blink 1s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
}