* {
		font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	}
	body{
		margin:0; 
		padding: 0;
		font-size: 16px;
		background-color:#f2f2f2;
		scroll-x: no;
		padding-top:54px!important;
		background-image: url(../image/site_bg.jpg)!important;
		height: 100%;
	}
	body::-webkit-scrollbar { /*滚动条整体样式*/
		width: 9px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}
	body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #535353;
	}
	body::-webkit-scrollbar-track { /*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0px;
		background: #041618;
	}
	.chatwrap::-webkit-scrollbar { /*滚动条整体样式*/
		width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}
	.chatwrap::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ffa500;
	}
	.chatwrap::-webkit-scrollbar-track { /*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: #088cb7; 
	}
	.bgcolor{
		background-color: rgba(204,204,153, 0.5);
	}
	.wrap{
		width: 60%;
		margin-left: 20%;
	} 
	.return_top{
		display: none;
		position: fixed;
		right: 5px;
		bottom: 180px;
		background-color: rgba(0,204,255,0.2);
		border-radius: 50%;
	}
	.return_top .layui-icon-top{
		font-size: 3.5rem;
		color: #02a7e3;
		font-weight: bold;
	}
	@media screen and (max-width:320px ) {
	    html{font-size: 12px!important;}
	}
	@media screen and (min-width:321px) and (max-width:750px ) {
	    html{font-size: 14px!important;}
	}
	@media screen and (min-width:751px ) {
	    html{font-size: 16px!important;}
	}
	@media only screen and (max-width:769px){
		body{
			margin:0;
			padding: 0;
			padding-top:51px!important;
			background-color:#f2f2f2;
		}
		.wrap{
			width: 100%!important;
			margin-left: 0%;
		}
		.search input{
			width: 65%!important;
		}	
		.categary .title{
			width: 97%!important;
			margin-left: 3%!important;
		}
		.bottom{
			margin: 20px 0 10px 0!important;
		}
	}
	header{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		background-color: #02A7E3;
		text-align:center;
		padding: 12px 0;
		color: #fff;
		z-index: 999;
	}
	header h1{
		font-size: 1.5rem;
		line-height: 1.5rem;
		width: 60%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
	}
	.top-span{
		box-shadow: 2px 2px 3px #0298cf;
		border-top: 1px solid #fff;
		border-color: rgba(255,255,255,0.3);
		background-color: #02A7E3;
		border-radius: 20px;
		font-size: 0.9rem;
		padding: 4px 8px;
		cursor: pointer;
		margin-top: 2px; 
	}
	.vip-span{
		float: left;
		margin-left: 10px;
	}
	.fresh-span{
		float: right;
		margin-right: 10px;
	}
	.top-span .layui-icon{
		font-size: 0.7rem;
	}
	.bottom{
		margin: 20px 0 0px 0;
		width: 100%; 
		padding-bottom: 10px;
	}
	.red{
		color: red;
	}
	.main-color{
		color: #02a7e3;
	}
	.bottom p{
		width: 100%;
		text-align: center;
		font-size: 0.8rem;
		line-height: 1.2rem;
		color: #CC99CC;
	}
	.layui-m-layer0 .layui-m-layercont{
		padding-bottom: 15px!important;
		padding-top: 30px!important;
		background-color: rgba(0,0,0,0.6)!important;
	}
 	.layui-m-layer0 .layui-m-layerbtn{
 		background-color: rgba(0,0,0,0.8)!important;
	}
	.layui-m-layer0 .layui-m-layerbtn span{
		color: #fff!important;
 		font-weight: bold!important;
	}
	.layui-m-layer0 .layui-m-layerchild {
		background-color: rgba(100,100,100,0.1)!important;
	}
	.clear{
		clear:both;
	}