body{
		background: #F3F3F4;
	
	}	
	.navbar-static-side{
		overflow: auto;
	}
	.body_right{
		
	}
	.announcement{
		padding: 0 20px;
		line-height: 40px;
		height: 40px;
		background: #FAFAFA;
		border-bottom: 1px solid #E5E5E5;
	}
	.body_right_main{
		padding: 0px 5px 5px 5px;
	}
	.sort{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.sort_btn{
		background: white;
		border: 1px solid #989898;
		padding: 5px 20px;
		margin-right: 10px;
		color: #2E2E2E;
		font-size: 15px;
		font-style: italic;
		position: relative;
		margin-bottom: 5px;
	}
	.sort_btn:hover{
		border: 1px solid #3232FE;
		color: #3232FE;
	}
/*
	.sort_xz{
		border: 1px solid #3232FE;
		color: #3232FE;
	}
*/
	.sort_btn_gou{
		width: 20px;
		height: 20px;
		position: absolute;
		bottom: 0px;
		right: 0px;
		display: none;
	}
	.sort_row{
		display: flex;
		/*justify-content: space-between;*/
		align-items:flex-start;
		flex-wrap: wrap;
		align-content:space-between;
		margin-top: 5px;
		padding-bottom: 0px;
	}
	
	
	.sort_row_listsj{
		width: 100%;
		height: 111px;
		border: 1px solid #ffffff;
		padding: 2px;
		display: flex;
		justify-content: space-between;
		margin-right: 0px;
		margin-bottom: 3px;
		background-color: #f0f3f1;
	}
	.sort_row_listsj:hover{
		border: 1px solid #006400;
	}
	.qq_p1sj{
		position: relative;
		/*margin-bottom: 2px;*/
		margin-top: 0px;
		font-weight: 700;
		font-size: 22px;
		margin-top: 0px;
	}
	
	.qq_p1sj a{
		color:#000000;
	}
	
	.qq_p2sj{
		/*margin-bottom: 5px;*/
	}
	.qq_imgsj{
		width: 70px;
		height: 70px;
		/*border-radius: 80px;*/
		overflow: hidden;
		text-align: center;
		/*line-height: 60px;*/
		background-color: #f0f3f1;
		margin-top: 10px;
	}
	.qq_imgsj img{
		width: 100%;
		height: 100%;
	}
	/*.qq_infosj{*/
 /*       width: 100%;*/
 /*       margin-left: 10px;*/
	/*	position: relative;*/
	/*}*/
	.qq_gousj{
		width: 50px;
		height: 40px;
		position: absolute;
		bottom: -3px;
		right: -3px;
		display: none;
		z-index: 10;
	}	
	.qq_spansj{
		position: absolute;
		top: -8px;
		right: -8px;
		background: #f0f3f1;
		/*padding: 2.5px 5px;*/
		color: white;
		font-size: 17.5px;
		font-weight: bold;
		text-align: center;
		/*display: flex;*/
		justify-content: space-between;
		width: 40px;
		border-radius: 3px;
	}
	.qq_xzsj .qq_infosj .qq_spansj{
		background: #006400;
	}
	.qq_xzsj .qq_sortsj .jgdivsj{
		background: #008000;
		
	}
	
	
	.sort_row_list{
		width: 24%;
		height: 120px;
		border: 1px solid #f2f2f9;
		padding: 8px;
		display: flex;
		justify-content: space-between;
		margin-right: 11px;
		margin-bottom: 6px;
		background-color: #f0f3f1;
	}
	.sort_row_list:hover{
		border: 1px solid #439943;
	}
	.qq_xz{
		border: 1px solid #006400;
		color:#006400;
	}
	.qq_img{
		width: 60px;
		height: 60px;
		/*border-radius: 80px;*/
		overflow: hidden;
		text-align: center;
		/*line-height: 60px;*/
	}
	.qq_img img{
		width: 100%;
		height: 100%;
	}
	.qq_info{
        width: 100%;
        margin-left: 10px;
		position: relative;
	}
	.qq_p1{
		position: relative;
		/*margin-bottom: 6px;*/
		margin-top: -4px;
		font-weight: 600;
		font-size: 25px;
	}
	
	.qq_p1 a{
		color:#000000;
	}
	
	.qq_length{
		font-size: 20px;
	}
	.qq_level{
		
	}
	.qq_p2{
		/*margin-bottom: 8px;*/
	}
	.qq_time{
		padding-right: 0px;
		color: #666666;
	}
	.qq_state{
		
	}
	.qq_p3{
	    margin-top: 4px;
		
	}
	.p3sj{
	    margin-top: 4px;
		
	}
	.qq_level_img{
	}
	.orange{
		font-size: 26px;
	}
	.love{
		background: pink;
	}
	.liang{
		background: #f3f3f4;
	}
	.qq_gou{
		width: 50px;
		height: 40px;
		position: absolute;
		bottom: -10px;
		right: -10px;
		display: none;
		z-index: 10;
	}
	.paging_pc{
	
	}
	#demo1{
		background:rgba(0,0,0,0.00);
		position: absolute;
		right: 10px;
	}
	#demo1 .layui-laypage-skip{
		background:rgba(0,0,0,0.00);
	}
	#demo1 .layui-laypage-refresh{
		background:rgba(0,0,0,0.00);
	}
	#demo1 .layui-laypage-count{
		background:rgba(0,0,0,0.00);
		color:#f3f3f4;
	}
	.jgdiv{
		background: #d6e3d7;
		text-align: center;
		color: #000000;
		font-size: 15px;
		/*font-weight: bold;*/
		/*border-radius: 5px;*/
		width: 100%;
		/*position: absolute;*/
		/*bottom: 0px;*/
	}
	
	.weidivpc{
		background: #f0f3f1;
		text-align: center;
		color: #000000;
		font-size: 15px;
		/*font-weight: bold;*/
		/*border-radius: 5px;*/
		width: 100%;
		/*position: absolute;*/
		/*bottom: 0px;*/
		
		/*font-weight: 700;*/
		margin-top: 2px;
	}
	.qq_xz .qq_sort .weidivpc{
    background: #115c18;
    color: #ffff00;
	}
	
	.weidivsj{
		background: #cedfd1;
		text-align: center;
		color: #000000;
		font-size: 14px;
		/*font-weight: bold;*/
		/*border-radius: 5px;*/
		width: 100%;
		/*position: absolute;*/
		/*bottom: 0px;*/
		margin-top: 8px;
	}
	.qq_xz .qq_sort .weidivsj{
    background: #115c18;
    color: #ffff00;
	}
	
	.qq_xz .qq_sort .jgdiv{
    background: #115c18;
    color: #ffff00;
	}
	body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}	
.hs{
    background-color: #ccc !important;
}
		
/*
	.settle_accounts{
		position: absolute;
		right: 0px;
		top: 11.5px;
	}
	.sl{
		padding: 0 10px;
	}
	.sl .orange{
		padding: 0 5px;
		font-size: 20px;
	}
	.hj{
		padding: 0 10px;
	}
	.hj .orange{
		padding: 0 5px;
		font-size: 20px;
	}
	.settle_accounts a{
		position: relative;
		top: -2.5px;
	}
*/
	.settle_accounts{

	}
	.settle_accounts_pc{
		margin-top: -10px;
		display: flex;
		background: linear-gradient(45deg, #0081ff, #1cbbb4);
		height: 30px;
		padding: 10px 0;
		color: white;
		width: 100%;
		position: fixed;
		bottom: 46px;
		z-index: 10000;
	}	
		
		
	.sl{
		padding: 0 10px;
	}
	.sl .orange{
		padding: 0 5px;
		font-size: 20px;
	}
	.hj{
		padding: 0 10px;
	}
	.hj .orange{
		padding: 0 5px;
		font-size: 20px;
	}
	.settle_accounts a{
		position: relative;
		top: -2.5px;
		left:5px;
	}
		
		
	.qq_span{
		position: absolute;
		top: -8px;
		right: -8px;
		background: #f0f3f1;
		padding: 2.5px 5px;
		color: white;
		font-size: 17.5px;
		font-weight: bold;
		text-align: center;
		/*display: flex;*/
		justify-content: space-between;
		width: 40px;
		border-radius: 3px;
	}
	.qq_xz .qq_info .qq_span{
		background: #f0f3f1;
	}
	.qq_length_over{
		font-size: 14px;
		margin-right: 5px;
	}
	.qq_level{
		font-size: 14px;
	}
	.x-body{
		padding: 0px;
		background: #F3F3F4;
	}
	.paging_mobile{
		display: none!important;
	}	
	.qx{
		width: 25px;
		height: 25px;
	}
	.qbx{
		width: 25px;
		height: 25px;
	}
	
		
		
		
		
	@media screen and (max-width: 768px){
		
	.sort_btn{
		background: white;
		border: 1px solid #989898;
		padding: 3px 15px;
		margin-right: 10px;
		color: #2E2E2E;
		font-size: 10px;
		position: relative;
		margin-bottom: 5px;
	}
	.sort_btn:hover{
		border: 1px solid #3232FE;
		color: #3232FE;
	}
	.sort_xz{
		/*border: 1px solid #3232FE;*/
		/*color: #3232FE;*/
	}	
	.paging_pc{
		display: none!important;
	}
	.paging_mobile{
		display: block!important;
	}	
	.sort_row{
		display: flex;
		justify-content: center;
		align-items:flex-start;
		flex-wrap: wrap;
		align-content:space-between;
		margin-top: 0px;
		height: auto;
		
	}
	.body_right_main{
		padding: 2px;
	}	
		
	.paging_mobile .settle_accounts{
		position: fixed;
		/*bottom: 20vh;*/
		top: 10vh;
		right: -170px;
		width: 150px;
		height: 90px;
		padding: 10px;
		background: white;
		box-shadow: 0 0 5px #ccc;
		border-radius: 10px 0 0 10px;
		z-index: 10000000;
	}
	.paging_mobile .settle_accounts .sl{
		padding: 0 10px;
	}
	.paging_mobile .settle_accounts .sl .orange{
		padding: 0 5px;
		font-size: 20px;
	}
	.paging_mobile .settle_accounts .hj{
		padding: 0 10px;
	}
	.paging_mobile .settle_accounts .hj .orange{
		padding: 0 5px;
		font-size: 20px;
	}	
	#demo2{
		text-align: center;
		margin-top: -100px;
		padding-bottom: 10px;
	}	
		.jiesuan_anim{
			position: absolute;
			left: -52px;
			top: 25px;
			background: #FF5722;
			padding: 5px;
			color: white;
			font-size: 10px;
			border-radius: 10px 0 0 10px;
		}
		
		
	    .ssk{display: flex;line-height: 38px;font-size: 15px;color: #333333;margin-bottom: 10px;position: relative}
		.ssk span{display: none}
		.ssk .ssk-inp{height: 38px!important;width: 100%!important;padding: 0 35px 0 10px;box-sizing: border-box!important;}
		.ssk .option_sort_list{line-height: 38px;display: none;}
		.ssk a{display: none;}
		.ssk i{display: block!important;position: absolute;right: 10px;z-index: 1000;font-size: 20px!important;}
		.ssk select{display: block!important;position: absolute;}
		
		.login input[type=text], .login input[type=file], .login input[type=password], .login input[type=email], select{height: 38px!important;padding: 0 5px!important;width: auto;}
		.option_sort select{height: 38px!important;padding: 0 5px!important;width: 150px!important;}
		.option_sort_name{
			color: #888888;
			font-size: 15px;
			display: flex;
			line-height: 30px;
		}
		

		.ssk .layui-form-select{width:85px!important;}
		.ssk .layui-form-select input{width:85px!important;}
		
	}	
		
		.option{
			
		}
		.option_sort{
			display: flex;
			margin-bottom: 5px;
			margin-top: 5px;
		}
		.option_sort_list{
			color: #333333;
			font-size: 16px;
			padding: 0 10px;
			height: 25px;
			line-height: 25px;
		}
		.option_sort_name{
			color: #888888;
			font-size: 15px;
			padding-left: 10px;
		}
		.dx{
		    width: 25px;
		    height: 25px;
		    position: relative;
		    top: -2px;
	    }	
		.sx{
			width: 20px;
			height: 15px;
			position: relative;
		    top: -2px;
		}
		.sort_xz{
			border: 1px solid #108BF3!important;
		    color: #108BF3!important;
	    }
		
		
		.ssk{display: flex;line-height: 38px;font-size: 15px;color: #333333;margin-bottom: 10px;}
		.ssk span{}
		.ssk input{height: 33px!important;width: 150px;}
		.ssk .option_sort_list{line-height: 38px;}
		.ssk a{position: relative;top: 5px;left: 10px;}
		.ssk i{display: none;}
		.ssk select{display: none;}
		.pagexxx{position:relative;width:100%;height:50px;top:-100px;right:0px;}
		
		
		
		
		.look_k{
			display: block;
		}
	.mask{
	    position: fixed;
	    left: 0px;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,0.5);
	    display: none;
	    z-index: 100000;
	}
		</style>
		<style>
    body{
        background-color: #ccc
        ;
    }
    .box{
        background-color: #FFF;
        width: 360px;
        height: 300px;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
    }
    .top{
        width: 360px;
        height: 50px;
        background-color:#47aff9 ;
          border-radius: 10px 10px 0 0;
          text-align: center;
          color: #fff;
          font-size: 16px;
          line-height: 50px;
          
    }
    .btn{
        display: flex;
        width: 360px;
    }
    .btns{
        width: 75px;
        height: 45px;
        border: 1px solid  #ccc;
         border-radius: 10px;
         margin-left: 10px;
             line-height: 45px;
         text-align: center;
         color: #fff;
    }
.wx{
    background-color: #09bb07;
}
.al{
     background-color: #0093d2;
}
    .data{
        height: 80px;
      
          font-size: 20px;
          line-height: 80px;
            text-align: center;
    }
    .coles{
        position: absolute;
        right:0px;
        top:0px;
    }