body
{background:#f8f8f8;}

/*主体*/
#faqList
{width:100%; height:auto; overflow:hidden; max-width:1402px; margin:0px auto; margin-top:20px;
 display: flex;}
#faqList *{box-sizing: content-box;}
#faqList .faqLeft
{height:auto; overflow:hidden; flex: 1;}
#faqList .faqRight
{width:300px; height: auto; overflow: hidden; margin-left:20px;}
#pageInfo{margin-top:5px;}

/*左侧列表*/
@media screen and (min-width: 737px) {
	#faqDataList
	{width:100%; height: auto; overflow: hidden; padding:0px 20px; box-sizing: border-box;
	 border-radius:8px; background-color:#fff;}
	#faqDataList .item
	{width:100%; height:auto; overflow: hidden; padding:20px 0px; position: relative;
	 border-bottom:1px solid #EFEFEF; display: flex;}
	#faqDataList .item:last-child {border-bottom:none;}
	#faqDataList .item:hover {background-color:#f8f8f8;}

	#faqDataList .item .picture
	{width:246px; height:154px; overflow: hidden; margin-right:20px; border-radius:8px;}
	#faqDataList .item .picture .pic
	{width:100%; height:100%; overflow: hidden; display: block;
	 background-repeat: no-repeat; background-position: center center; background-size: cover;
	 transition:all 500ms;}
	#faqDataList .item .picture .pic img
	{opacity:0; width:100%; height:100%;}
	#faqDataList .item .picture:hover .pic
	{transform: scale(1.05);}
	#faqDataList .item .picture .tag
	{width:64px; height:22px; overflow: hidden; display: block; position: absolute; left:10px; top:10px;
	 background:rgba(0, 0, 0, .5); border-radius:3px;
	 display: flex; align-items: center; justify-content: center;
	 color:#fff; font-size:12px; text-decoration: none;}
	#faqDataList .item .picture .tag:hover
	{background-color:rgb(230, 1, 70);}

	#faqDataList .item .right
	{flex: 1; position: relative;}
	#faqDataList .item .right .title {font-size:20px; font-weight:normal;}
	#faqDataList .item .right .title a{color:#232323;}
	#faqDataList .item .right .title a:hover{color:rgb(230, 1, 70); text-decoration: none;}
	#faqDataList .item .right .des
	{padding-top:13px;
	 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
	 font-size:16px; color:rgba(26, 26, 26, .8); line-height:26px;}
	#faqDataList .item .right .other
	{position: absolute; left:0px; bottom:0px; right:0px; display: flex; justify-content: space-between;
	 font-size:12px; color:rgba(26, 26, 26, .6); line-height:30px;}
	#faqDataList .item .right .other span {padding-right:20px;}
	#faqDataList .item .right .other span.tags{flex: 1;}
	#faqDataList .item .right .other span.hits{padding-right:0px;}
}

/*右侧广告*/
#faqAdv
{width: 300px; height: auto; overflow: hidden; margin-bottom:20px;
 border-radius:8px;}
#faqAdv img
{width:100%; height: auto; float: left; transition: all 500ms;}
#faqAdv:hover img
{opacity:0.8;}

/*右侧列表*/
.faqRightList
{width: 300px; height: auto; overflow: hidden; margin-bottom:20px; padding:15px; padding-bottom:0px; box-sizing: border-box;
 border-radius:8px; background-color:#fff;}
.faqRightList .sortName
{font-size:16px; font-weight:500; color:rgb(26, 26, 26); display: flex; align-items:center;}
.faqRightList .sortName::before
{width:3px; height:16px; overflow: hidden; border-radius:3px; margin-right:10px; display: block;
 content:''; background-color:rgb(230, 1, 70);}
 
.faqRightList .list
{width:270px; height: auto; overflow: hidden;}

.faqRightList .list .fristItem
{width:270px; height:168px; overflow: hidden; padding:15px 0px; position: relative;
 border-bottom:1px dashed #EFEFEF;}

.faqRightList .list .fristItem .picture
{width:100%; height:100%; overflow: hidden; border-radius:8px; position: relative;}
.faqRightList .list .fristItem .picture .pic
{width:100%; height:100%; overflow: hidden; display: block;
 background-repeat: no-repeat; background-position: center center; background-size: cover;
 transition:all 500ms;}
.faqRightList .list .fristItem:hover .picture .pic{transform: scale(1.05);}
.faqRightList .list .fristItem .picture .pic img {width:100%; height:100%; opacity:0;}
 
.faqRightList .list .fristItem .right
{position: absolute; left:10px; bottom:25px; right:10px; color:#fff;}
.faqRightList .list .fristItem .right .title
{font-size:14px; padding-top:5px;}
.faqRightList .list .fristItem .right .title a{color:#fff; text-decoration:none;}
.faqRightList .list .fristItem .right .hits{font-size:12px;}

.faqRightList .list .item
{width:270px; height:62px; overflow: hidden; padding:15px 0px; position: relative; display: flex;
 border-bottom:1px dashed #EFEFEF;}
.faqRightList .list .item:last-child{border-bottom:none;}
 
.faqRightList .list .item .picture
{width:100px; height:62px; overflow: hidden; border-radius:5px; position: relative;}
.faqRightList .list .item .picture .pic
{width:100%; height:100%; overflow: hidden; display: block;
 background-repeat: no-repeat; background-position: center center; background-size: cover;
 transition:all 500ms;}
.faqRightList .list .item:hover .picture .pic{transform: scale(1.05);}
.faqRightList .list .item .picture .pic img {width:100%; height:100%; opacity:0;}
 
.faqRightList .list .item .right
{flex: 1; margin-left:15px;}
.faqRightList .list .item .right .title
{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
 font-size:14px; line-height:20px; font-weight:normal;}
.faqRightList .list .item .right .title a{color:#232323;}
.faqRightList .list .item .right .title a:hover{color:rgb(230, 1, 70); text-decoration: none;}
.faqRightList .list .item .right .hits{font-size:12px; color: rgba(26, 26, 26, .8); margin-top: 5px;}

.faqRightList .list .fristItem .picture::after,
.faqRightList .list .item:nth-child(2) .picture::after,
.faqRightList .list .item:nth-child(3) .picture::after
{width:44px; height:18px; overflow: hidden; position: absolute; top:6px; left:0px; border-radius:0px 9px 9px 0px;
 color:#fff; font-size:12px; text-align:center; line-height:18px;}
.faqRightList .list .fristItem .picture::after{content: 'TOP 1';background:linear-gradient(135deg, rgb(248, 73, 117) 10%, rgb(255, 51, 102));}
.faqRightList .list .item:nth-child(2) .picture::after{content: 'TOP 2';background:linear-gradient(135deg, rgb(255, 122, 102) 10%, rgb(255, 45, 45));}
.faqRightList .list .item:nth-child(3) .picture::after{content: 'TOP 3';background:linear-gradient(135deg, rgb(245, 159, 85) 10%, rgb(255, 105, 34));}

@media screen and (max-width: 1100px) {
	#faqList .faqRight{display: none;}
}

@media screen and (max-width: 736px) {
	#faqDataList
	{width:100%; height: auto; overflow: hidden; padding:0px 10px; box-sizing: border-box;
	 border-radius:8px; background-color:#fff;}
	#faqDataList .item
	{width:100%; height:auto; overflow: hidden; padding:10px 0px; position: relative;
	 border-bottom:1px solid #EFEFEF; display: flex;}
	#faqDataList .item .picture
	{width:26%; height: auto; overflow: hidden; margin-right:10px;}
	#faqDataList .item .picture img
	{width:100%; height: auto; float: left;}
	#faqDataList .item .picture .tag{display: none;}
	#faqDataList .item .right{flex:1;}

	#faqDataList .item .right .title 
	{font-size:14px;line-height:150%;font-weight:normal;
	 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
	#faqDataList .item .right .title a{color:#232323;}
	#faqDataList .item .right .title a:hover{color:rgb(230, 1, 70); text-decoration: none;}
	#faqDataList .item .right .des
	{margin-top:5px; margin-bottom:5px;
	 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
	 font-size:12px; color:rgba(26, 26, 26, .8); line-height:150%;}
	#faqDataList .item .right .other
	{font-size:10px; color:rgba(26, 26, 26, .6); line-height:150%;}
	#faqDataList .item .right .other span {padding-right:20px;}
	#faqDataList .item .right .other span.hits{padding-right:0px;}
}