@charset "utf-8";
/* Topic Page Styles - Influencer Marketing & other landing pages */

/*========== Brand Wall (topic page context) ==========*/
.topic-page .list4{ width: 100%; float: left; margin-top: 0.5rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.topic-page .list4 .item{ width: 19.5%; margin-top: 0.1rem;}
.topic-page .list4 .item .img{ width: 100%; height: 1.2rem; display: flex; justify-content: center; align-items: center; }
.topic-page .list4 .item .img-h{ width: 100%; height: 1.2rem; display: none; justify-content: center; align-items: center; }
.topic-page .list4 .item img{ width: 2.34rem;}
.topic-page .list4 .item:hover .img{ display: none;}
.topic-page .list4 .item:hover .img-h{ display: flex;}

/* Swiper / Expert Showcase (topic page context) */
.topic-page .control{ width: 100%; float: left; position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem;}
.topic-page .control .swiper-pagination{ width: 100%; height: 6px; background-color: #dcdcdc; position: relative; flex: 1;}
.topic-page .control .swiper-pagination-progressbar-fill{ background-color: #e71425;}

/* Expert showcase cards */
.topic-page .list1{ width: 100%; float: left; display: flex; justify-content: space-between; margin-top: 0.2rem; flex-wrap: wrap;}
.topic-page .list1 .swiper-slide{ width: 32.5%; margin-top: 0.4rem;}
.topic-page .list1 .swiper-slide .li{ width: 100%; position: relative;}
.topic-page .list1 .swiper-slide .img{ width: 100%; overflow: hidden; border-radius: 0.15rem;}
.topic-page .list1 .swiper-slide .img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.topic-page .list1 .swiper-slide .img:hover img {transform: scale(1.05);}
.topic-page .list1 .swiper-slide .text{ width: 90%; height: 1rem; background-color: #fff; position: absolute; left: 5%; bottom: 0.3rem; border-radius: 0.15rem; color: #333; display: flex; align-items: center; justify-content: center;}
.topic-page .list1 .swiper-slide .text p{ font-size: 0.2rem; display: flex; flex-direction: column; align-items: center;}
.topic-page .list1 .swiper-slide .text p span{ font-size: 0.26rem; font-weight: bold;}
.topic-page .list1 .swiper-slide .text .xian{ width: 1px; height: 0.6rem; background-color: #dcdcdc; margin: 0 1.5vw;}
.topic-page .list1 .swiper-slide .p1{ width: 100%; float: left; font-size: 0.24rem; margin-top: 0.35rem;}


/*========== Section Headings ==========*/
.topic-page h2.t1{ font-weight: bold; }

/*========== Features Section ==========*/
.topic-page .topic-feature{
	width: 100%;
	float: left;
	display: flex;
	align-items: center;
	margin-top: 0.7rem;
	gap: 0.6rem;
}
.topic-page .topic-feature-img{
	width: 50%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 0.15rem;
}
.topic-page .topic-feature-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}
.topic-page .topic-feature-img:hover img{
	transform: scale(1.05);
}
.topic-page .topic-feature-text{
	flex: 1;
}
.topic-page .topic-feature-text h3{
	font-size: 0.34rem;
	color: #fff;
	margin-bottom: 0.25rem;
	font-weight: bold;
}
.topic-page .topic-feature-text p{
	font-size: 0.2rem;
	color: #999;
	line-height: 0.36rem;
}
.topic-page .topic-feature.reverse{
	flex-direction: row-reverse;
}
.topic-page .topic-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 0.56rem;
	background-color: #e71425;
	border-radius: 0.06rem;
	color: #fff;
	font-size: 0.2rem;
	margin-top: 0.35rem;
	transition: all 0.3s ease;
}
.topic-page .topic-btn:hover{
	background-color: #b3000e;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(231, 20, 37, 0.4);
}

/*========== FAQ Accordion ==========*/
.topic-faq{
	width: 100%;
	float: left;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.faq-item{
	width: 100%;
	float: left;
	border-bottom: 1px solid #333;
	transition: all 0.3s ease;
}
.faq-item:first-child{
	border-top: 1px solid #333;
}
.faq-question{
	width: 100%;
	float: left;
	padding: 0.35rem 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
}
.faq-question:hover{
	opacity: 0.85;
}
.faq-question h3{
	font-size: 0.24rem;
	color: #fff;
	font-weight: normal;
	flex: 1;
	padding-right: 0.3rem;
}
.faq-icon{
	width: 0.4rem;
	height: 0.4rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.3rem;
	color: #e71425;
	font-weight: bold;
	margin-right: 0.2rem;
	transition: transform 0.3s ease;
}
.faq-item.active .faq-icon{
	transform: rotate(45deg);
}
.faq-answer{
	width: 100%;
	float: left;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-answer p{
	font-size: 0.2rem;
	color: #999;
	line-height: 0.36rem;
	padding: 0 0 0.35rem 0.6rem;
}
.faq-item.active .faq-answer{
	max-height: 500rem;
}
.faq-item.active .faq-question h3{
	color: #e71425;
}


/*========== Mobile Responsive ==========*/
@media screen and (max-width: 750px) {
	/* Features */
	.topic-page .topic-feature{
		flex-direction: column;
		gap: 0.3rem;
		margin-top: 0.5rem;
	}
	.topic-page .topic-feature.reverse{
		flex-direction: column;
	}
	.topic-page .topic-feature-img{
		width: 100%;
	}
	.topic-page .topic-feature-text h3{
		font-size: 0.32rem;
	}
	.topic-page .topic-feature-text p{
		font-size: 0.24rem;
		line-height: 0.38rem;
	}
	.topic-page .topic-btn{
		width: 100%;
		height: 0.7rem;
		font-size: 0.26rem;
	}

	/* FAQ */
	.faq-question h3{
		font-size: 0.26rem;
	}
	.faq-answer p{
		font-size: 0.24rem;
		padding: 0 0 0.3rem 0.6rem;
		line-height: 0.38rem;
	}
	.faq-icon{
		font-size: 0.36rem;
	}

	/* Brand wall on topic page - horizontal scroll */
	.topic-page .list4{
		width: 220%;
	}
}