/* components/titleStyle/titleStyle.wxss */
.topic {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 20rpx 40rpx 20rpx;
}

.topic .text1 {
	width: 2rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text2 {
	width: 4rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text3 {
	width: 6rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text4 {
	width: 10rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text5 {
	width: 16rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text6 {
	width: 26rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text7 {
	width: 42rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text8 {
	width: 68rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic .text9 {
	width: 110rpx;
	height: 6rpx;
	background: #FFEFC5;
}

.topic3 .texts {
	margin: 0 14rpx;
}

.titleLine2 {
	flex: 1;
	height: 4rpx;
	background: #FFEFC5;
}

.drop {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #FFEFC5;
}

.topic2 .drop {
	margin: 0 14rpx;
}

.texts {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 40rpx;
	color: #FFEFC5;
}

.titleLine3 {
	flex: 1;
	height: 4rpx;
	background: #FFEFC5;
}

.topic4 {
	justify-content: flex-start;
	padding-bottom: 10rpx;
	border-bottom: 4rpx solid #FFEFC5;
}

.topic4 .drop {
	margin-right: 10rpx;
}

.topic5 {
	flex-direction: column;
	position: relative;
	align-items: flex-start;
}

.topic5 .line1 {
	width: 75%;
	height: 4rpx;
	background: #FFEFC5;
}

.topic5 .textBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 0;
}

.topic5 .line2 {
	width: 75%;
	height: 4rpx;
	position: absolute;
	right: 0;
	bottom: 0;
	background: #FFEFC5;
}

.topic5 .textBox .texts {
	margin: 0 10rpx;
}

.topic6 {
	flex-direction: column;
}

.topic6 .lineBox {
	width: 100%;
	display: flex;
	align-items: center;
}

.topic6 .line6 {
	width: calc(100% - 32rpx);
	height: 4rpx;
	background: #FFEFC5;
}

.lineBox .left {
	width: 0;
	height: 0;
	border-right: 16rpx solid #FFEFC5;
	border-bottom: 16rpx solid transparent;
	border-top: 16rpx solid transparent;
}

.lineBox .right {
	width: 0;
	height: 0;
	border-left: 16rpx solid #FFEFC5;
	border-top: 16rpx solid transparent;
	border-bottom: 16rpx solid transparent;
}

.topic7 {
	justify-content: flex-start;
	padding-bottom: 10rpx;
	border-bottom: 4rpx solid #FFEFC5;
}

.topic8 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.topic8 image {
	width: 20rpx;
	height: 26rpx;
	box-sizing: content-box !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.topic8 image:nth-of-type(1) {
	margin-left: 14rpx;
}

.topic10 .texts {
	padding: 10rpx 40rpx;
	background: #FFEFC5;
	border-top-right-radius: 30rpx;
	color: #000;
}

.topic11 {
	background: url('https://nosqn.colorcun.com/titleStyle11.png') no-repeat;
	background-size: 100% 100%;
	justify-content: center;
	padding: 10rpx 0;
}

.topic12 {
	background: url('https://nosqn.colorcun.com/titleStyle12.png') no-repeat;
	background-size: 100% 100%;
	justify-content: center;
	padding: 10rpx 0;
}

.topic11 .texts,
.topic12 .texts {
	color: #000;
}

.topic13 {
	border-bottom: 4rpx solid #FFEFC5;
}

.pearlWhite .topic .text1,
.pearlWhite .topic .text2,
.pearlWhite .topic .text3,
.pearlWhite .topic .text4,
.pearlWhite .topic .text5,
.pearlWhite .topic .text6,
.pearlWhite .topic .text7,
.pearlWhite .topic .text8,
.pearlWhite .topic .text9,
.pearlWhite .drop,
.pearlWhite .titleLine3,
.pearlWhite .topic5 .line1,
.pearlWhite .topic5 .line2,
.pearlWhite .topic6 .line6,
.pearlWhite .titleLine2 {
	background: #578C69;
}

.pearlWhite .topic4,
.pearlWhite .topic7 {
	border-bottom: 4rpx solid #578C69;
}

.pearlWhite .lineBox .left {
	border-right: 16rpx solid #578C69;
}

.pearlWhite .lineBox .right {
	border-left: 16rpx solid #578C69;
}

.pearlWhite .texts {
	color: #578C69;
}

.pearlWhite .topic13 .texts {
	color: #fff;
}

.pearlWhite .topic13 {
	border-bottom: 4rpx solid #abc5b4;
}

.pearlWhite .topic10 .texts,
.pearlWhite .topic13 .texts {
	background: #abc5b4;
	color: #fff;
}

.pearlWhite .topic11 {
	background: url(https://nosqn.colorcun.com/titleStyleWhite1.png) no-repeat;
	background-size: 100% 100%;
	justify-content: center;
	padding: 10rpx 0;
}

.pearlWhite .topic12 {
	background: url(https://nosqn.colorcun.com/titleStyleWhite2.png) no-repeat;
	background-size: 100% 100%;
	justify-content: center;
	padding: 10rpx 0;
}

.pearlWhite .topic11 .texts,
.pearlWhite .topic12 .texts {
	color: #fff;
}