:root{
 	--themeColor: #e85611;
	--textColor: #999999;
}
.question{
	padding: 3% 5%;
	background-color: #f8f8f8;
}
.q-title{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.q-title-left{
	width: 20%;
	font-size: 36px;
	color: var(--themeColor);
}
.q-title-right{
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.q-title-right li{
	font-size: 28px;
	color: var(--textColor);
	padding: 0 20px;
	text-align: center;
	width: 19%;
	box-sizing: border-box;
}
.q-title-right li .q-img{
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.q-title-right li .q-img .img1{
	display: block;
}
.q-title-right li .q-img .img2{
	display: none;
}
.q-title-right li.active{
	color: var(--themeColor);
}
.q-title-right li.active .q-img .img1{
	display: none;
}
.q-title-right li.active .q-img .img2{
	display: block;
}
.q-title-right li:hover{
	cursor: pointer;
}
.q-list{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 20px -10px;
	box-sizing: border-box;
}
.q-item{
	width: calc(25% - 20px);
	background-color: #fff;
	box-shadow: 0 0 5px #eee;
	border-radius: 10px;
	padding: 30px 20px;
	position: relative;
	min-height: 200px;
	box-sizing: border-box;
	overflow: hidden;
	margin: 15px 10px;
	z-index: 1;
}
.q-item .bg-img{
	width: 117px;
	height: 117px;
	position: absolute;
	right: -28px;
	bottom: -30px;
	z-index: 20;
}
.q-item .bg-img img{
	width: 100%;
	height: 100%;
}
.q-item .bg-img .img1{
	display: block;
}
.q-item .bg-img .img2{
	display: none;
}
.q-item .bg-img img,.q-item-title .icon img{
	width: 100%;
	height: 100%;
}
.q-item-title{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	z-index: 9;
}
.q-item-title .icon{
	width: 30px;
	height: 30px;
	margin-right: 20px;
}
.q-item-title .icon .img1{
	display: block;
}
.q-item-title .icon .img2{
	display: none;
}
.q-item-title p{
	font-size: 22px;
	color: #333333;
	line-height: 1.5;
	flex: 1;
}
.q-item:hover{
	cursor: pointer;
	background-color: var(--themeColor);
}
.q-item:hover .q-item-title .icon .img1{
	display: none;
}
.q-item:hover .q-item-title .icon .img2{
	display: block;
}
.q-item:hover .q-item-title p{
	color: #fff;
}
.q-item:hover .bg-img .img1{
	display: none;
}
.q-item:hover .bg-img .img2{
	display: block;
}
#demo-laypage-data{
	display: flex;
	align-items: center;
	justify-content: center;
}
#demo-laypage-data-view{
	min-height: 730px;
}
.question-content{
	max-width: 800px;
	border-radius: 20px;
	overflow: hidden;
}
.question-content .layui-layer-title{
	background-color: var(--themeColor);
	color: #fff;
	font-size: 24px;
	height: 70px;
	line-height: 70px;
}
.question-content  .layui-layer-setwin{
	right: 24px;
	top: 24px;
}
.question-content  .layui-layer-setwin span{
	color: #fff;
	font-size: 30px;
}

@media screen and (max-width: 1024px){
	.q-title{
		flex-wrap: wrap;
	}
	.q-title-left{
		width: 100%;
		margin-bottom: 20px;
		font-size: 22px;
	}
	.q-title-left img{
		width: 80px;
	}
	.q-title-right{
		width: 100%;
	}
	.q-title-right li .q-img img{
		width: 50%;
	}
	.q-title-right li{
		font-size: 16px;
		padding: 0 5px;
	}
	.q-item{
		width: calc(50% - 20px);
		margin: 10px;
		padding: 10px;
	}
	.q-item-title p{
		font-size: 16px;
	}
	.q-item-title .icon{
		width: 15px;
		height: 15px;
		margin-right: 10px;
		position: relative;
		top: 4px;
	}
}
@media screen and (max-width: 640px){
	.q-title-right{
		flex-wrap: wrap;
	}
	.q-title-right li{
		width: 30%;
		margin-top: 10px;
	}
}