* {
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(../images/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, .wrapheader{
width: 54%;
margin-left: 23%;
} 
.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:980px ) {
    body{
        padding-top: 120px !important;
    }
    .wrap {
        width: 100%;
        margin-left:0;
    }
    .wrap .wrapheader {
        width: 100%;
        margin-left:0;
        padding: 30px 0;
    }
     .wrap .wrapheader h1 {
         font-size: 3rem;
     }
     .wrapheader .top-span {
         padding: 10px 30px;
         font-size: 2rem;
     }
    .categary .items .item {
        width: calc(33.3% - 20px);
        padding: 50px;
    margin: 20px 10px;
    }
     .categary  .items .item .item-title{
    font-size: 3rem;
    }	
    .categary .title {
        font-size: 2rem;
        padding: 20px 0;
    }
}

/*@media screen and (max-width:769px ){*/
/*    .categary .item{*/
    
/*    }*/
/*}*/
@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;background-image: url(../images/site_bg.jpg)!important;}
}
@media only screen and (max-width:769px){
body{
margin:0;
padding: 0;
padding-top:120px!important;
background-color:#f2f2f2;
}
.wrap{
width: 100%!important;
margin-left: 0%;
}
.categary .title{
width: 97%!important;
margin-left: 3%!important;
}
.bottom{
margin: 20px 0 0 0!important;
}
}
header{
position: fixed;
top:0;
left:0;
width: 100%;
background-color: #1a90d4;
text-align:center;
padding: 12px 0;
color: #fff;
z-index: 999;
}
header h1{
font-size: 1.5rem;
width: 50%;
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;
}
.bottom p a{
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;
}