﻿.index-page__section-4 {
	color: #2b2d30;
	padding: 0 0 80px
}

@media screen and (max-width:1069px) {
	.index-page__section-4 {
		padding: 0 0 40px
	}
}

.index-page__section-4 .common-container {
	padding: 0 24px
}

.index-page__section-4 .section-4__title {
	font-size: 28px;
	font-weight: 600;
	line-height: 37px
}

@media screen and (max-width:1069px) {
	.index-page__section-4 .section-4__title {
		font-size: 20px;
		line-height: 26px
	}
}

.index-page__section-4 .follow-table-wrap {
	background: #f9fbff;
	border-radius: 12px;
	display: flex;
	margin: 40px auto 0;
	overflow: hidden;
	width: 1152px
}

.index-page__section-4 .follow-table__nav {
	background: #fff;
	box-shadow: 3px 0 15px #a7c2ff;
	display: flex;
	flex-direction: column;
	padding-top: 8px;
	position: relative
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item {
	align-items: center;
	cursor: pointer;
	display: flex;
	height: 80px;
	justify-content: center;
	line-height: 80px;
	padding-right: 16px;
	text-align: center;
	width: 168px
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item.active .iconfont {
	opacity: 1
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item .iconfont {
	line-height: 1;
	opacity: 0;
	position: relative;
	top: -20px
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item:first-child.active {
	color: #004eff
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item:nth-child(2).active {
	color: #7c71ff
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item:nth-child(3).active {
	color: #ff7623
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item:nth-child(4).active {
	color: #ffb400
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item:nth-child(5).active {
	color: #16caa2
}

.index-page__section-4 .follow-table__nav .follow-table__nav-item-decoration {
	border-radius: 4px;
	height: 80px;
	position: absolute;
	right: 0;
	transition: top .2s;
	width: 8px
}

.index-page__section-4 .follow-table__content {
	padding-top: 8px;
	position: relative
}

.index-page__section-4 .follow-table__content .follow-table__row {
	align-items: center;
	height: 64px;
	transition: all .8s;
	width: 512px
}

.index-page__section-4 .follow-table__content .follow-table__row--1 {
	background: rgba(230,238,255,0)
}

.index-page__section-4 .follow-table__content .follow-table__row--1.active {
	background: #e6eeff
}

.index-page__section-4 .follow-table__content .follow-table__row--2 {
	background: rgba(233,231,255,0)
}

.index-page__section-4 .follow-table__content .follow-table__row--2.active {
	background: #e9e7ff
}

.index-page__section-4 .follow-table__content .follow-table__row--3 {
	background: rgba(255,236,224,0)
}

.index-page__section-4 .follow-table__content .follow-table__row--3.active {
	background: #ffece0
}

.index-page__section-4 .follow-table__content .follow-table__row--4 {
	background: rgba(255,244,217,0)
}

.index-page__section-4 .follow-table__content .follow-table__row--4.active {
	background: #fff4d9
}

.index-page__section-4 .follow-table__content .follow-table__row--5 {
	background: rgba(226,245,241,0)
}

.index-page__section-4 .follow-table__content .follow-table__row--5.active {
	background: #e2f5f1
}

.index-page__section-4 .follow-table__content .follow-table__canvas {
	height: 400px;
	left: 0;
	position: absolute;
	top: 0;
	width: 512px
}

.index-page__section-4 .follow-table__pic-wrap {
	background: url(/img/21.5171b81.png) no-repeat;
	background-size: 396px 312px;
	margin-top: 48px;
	padding: 26px 0 0;
	width: 396px
}

.index-page__section-4 .follow-table__pic-wrap .follow-table__pic-item {
	height: 288px;
	width: 384px
}

.index-page__section-4 .follow-table__pic-wrap .follow-table__point {
	background: currentColor;
	border-radius: 12px;
	height: 12px;
	width: 12px
}

.index-page__section-4 .section4__swiper {
	transition: none;
	width: calc(100% - 56px)
}

.index-page__section-4 .section4__swiper.active {
	transition: opacity .2s
}

.index-page__section-4 .section4__news {
	cursor: pointer;
	transition: opacity .2s
}

.index-page__section-4 .section4__news .iconfont {
	font-size: 12px
}

@media screen and (min-width:1070px) {
	.index-page__section-4 .section4__news:hover {
		opacity: .8
	}
}

@media screen and (min-width:1200px) {
	.index-page__section-4 .follow-table__nav-item-decoration {
		left: auto!important
	}

	.index-page__section-4 .section4__left {
		padding: 32px;
		width: 676px
	}

	.index-page__section-4 .section4__right {
		width: 458px
	}

	.index-page__section-4 .section4__right-item {
		padding: 16px 32px
	}

	.index-page__section-4 .section4__right-item--pic {
		height: 80px;
		width: 80px
	}
}

@media screen and (min-width:1070px)and (max-width:1199px) {
	.index-page__section-4 .common-container {
		padding: 0 24px
	}

	.index-page__section-4 .follow-table-wrap {
		flex-direction: column;
		width: auto
	}

	.index-page__section-4 .follow-table__nav {
		box-shadow: none;
		flex-direction: row;
		padding-top: 0
	}

	.index-page__section-4 .follow-table__nav .follow-table__nav-item {
		width: 20%
	}

	.index-page__section-4 .follow-table__nav .follow-table__nav-item-decoration {
		bottom: 0;
		height: 8px;
		top: auto!important;
		transition: left .2s;
		width: 20%
	}

	.index-page__section-4 .follow-table__pic-wrap {
		background: none;
		margin: 0;
		padding: 0 28px;
		width: auto
	}

	.index-page__section-4 .follow-table__pic-wrap .section4__pic-item {
		height: auto;
		width: 100%
	}

	.index-page__section-4 .section4-swiper-pagination {
		margin-bottom: 64px;
		margin-top: 40px
	}

	.index-page__section-4 .section4-swiper-pagination .swiper-pagination-bullet {
		background: rgba(0,0,0,.2);
		border-radius: 2px;
		cursor: pointer;
		height: 4px;
		margin: 0 2px;
		width: 24px
	}

	.index-page__section-4 .section4-swiper-pagination .swiper-pagination-bullet-active {
		background: var(--text-color-primary)
	}

	.index-page__section-4 .section4__left {
		padding: 32px;
		width: 50%
	}

	.index-page__section-4 .section4__right {
		width: 50%
	}

	.index-page__section-4 .section4__right-item {
		padding: 16px 32px
	}
}

@media screen and (max-width:1069px) {
	.index-page__section-4 .common-container {
		padding: 0 24px
	}

	.index-page__section-4 .text-20-500 {
		font-size: 16px;
		line-height: 21px
	}

	.index-page__section-4 .follow-table-wrap {
		margin: 40px auto 0;
		width: auto
	}

	.index-page__section-4 .follow-table__nav {
		box-shadow: none;
		padding-top: 0;
		width: 40%
	}

	.index-page__section-4 .follow-table__nav .follow-table__nav-item-decoration {
		display: none
	}

	.index-page__section-4 .follow-table__nav .follow-table__nav-item {
		font-size: 16px;
		height: 20%;
		line-height: 20%;
		padding-left: 8px;
		padding-right: 0;
		width: 100%
	}

	.index-page__section-4 .follow-table__nav .follow-table__nav-item .iconfont {
		left: -4px;
		top: -14px
	}

	.index-page__section-4 .follow-table__pic-wrap {
		background: none;
		margin: 0;
		overflow: hidden;
		padding: 40px 0;
		width: auto;
		width: 60%
	}

	.index-page__section-4 .follow-table__pic-wrap .section4__pic-item {
		height: auto;
		width: 100%
	}

	.index-page__section-4 .section4-swiper {
		width: calc(100% - 48px)
	}

	.index-page__section-4 .section4-swiper-pagination .swiper-pagination-bullet {
		background: rgba(0,0,0,.2);
		border-radius: 4px;
		cursor: pointer;
		height: 8px;
		margin: 0 2px;
		width: 8px
	}

	.index-page__section-4 .section4-swiper-pagination .swiper-pagination-bullet-active {
		background: var(--text-color-primary)
	}

	.index-page__section-4 .section4__news {
		margin-top: 16px
	}

	.index-page__section-4 .section4__news .iconfont {
		font-size: 12px
	}

	.index-page__section-4 .section4__news-title {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		font-size: 14px;
		position: relative;
		white-space: inherit
	}

	.index-page__section-4 .section4__news-title img {
		height: auto!important;
		margin-right: 4px;
		width: 40px!important
	}

	.index-page__section-4 .section4__wrap {
		flex-wrap: wrap
	}

	.index-page__section-4 .section4__wrap .section4__left {
		margin: 0;
		padding: 24px;
		width: 100%
	}

	.index-page__section-4 .section4__wrap .section4__left .mt-32 {
		margin-top: 24px
	}

	.index-page__section-4 .section4__wrap .section4__right {
		background: transparent;
		margin: 16px 0 0;
		width: 100%
	}

	.index-page__section-4 .section4__wrap .section4__right .section4__right-item {
		background: #fff;
		border-radius: 12px;
		padding: 24px 0;
		width: calc(50% - 8px)
	}

	.index-page__section-4 .section4__wrap .section4__right .section4__right-item .text-16-sub {
		font-size: 14px;
		line-height: 20px
	}

	.index-page__section-4 .section4__right-item--pic {
		height: 60px;
		width: 60px
	}

	.index-page__section-4 .section4__more {
		color: #176beb;
		font-size: 14px;
		line-height: 18px;
		margin-top: 24px;
		padding-bottom: 8px;
		text-align: center
	}
}