
.ab4 {
	overflow: hidden;
	height: 47vw;
	background-color: #f2f8fe;
	position: relative;
	z-index: 2;
}

.ab4 .hezi {
	top: 5.2vw;
	left: 0;
	width: 100%;
	z-index: 3;
	text-align: center;
	position: absolute;
}

.ab4 .text {
	margin-top: 1.5vw;
	color: #282828;
	font-size: 0.2rem;
}

.ab4 .addbox {
	position: absolute;
	bottom: 7vw;
	left: 50%;
	text-align: center;
	width: 4.8rem;
	transform: translateX(-50%);
}

.ab4 .add {
	opacity: 0.5;
	line-height: 0.3rem;
	position: absolute;
}

.ab4 .add img {
	margin-left: 0.05rem;
	max-height: 0.3rem;
	animation: 1.5s fadeInUp3 ease infinite;
}

.ab4 .add-1 {
	top: -1vw;
	right: -7vw;
}

.ab4 .add-2 {
	top: 1.6vw;
	right: -9vw;
}

.ab4 .add-3 {
	top: 3.8vw;
	right: -8vw;
}

.ab4 .add-1 img {
	animation: 1.5s fadeInUp3 alternate infinite;
}

.ab4 .add-2 img {
	animation: 1.6s fadeInUp3 alternate infinite;
}

.ab4 .add-3 img {
	animation: 1.7s fadeInUp3 alternate infinite;
}

.ab4 .bt {
	color: #282828;
	line-height: 0.38rem;
	font-size: 0.2rem;
	padding-top: 0.25rem;
	font-weight: 700;
}

.ab4 .hu {
	position: absolute;
	bottom: 0;
	left: 0;
	/*width: 100%;*/
	width: 100vw;
}

.ab4 .hu>img {
	width: 100%;
}

.ab4 .hu>div {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	transition: all 0.5s;
}

.ab4 .hu>div.on1 {
	width: 10vw;
}

.ab4 .hu>div.on2 {
	width: 20vw;
}

.ab4 .hu>div.on3 {
	width: 30vw;
}

.ab4 .hu>div.on4 {
	width: 40vw;
}

.ab4 .hu>div.on5 {
	width: 50vw;
}

.ab4 .hu>div.on6 {
	width: 60vw;
}

.ab4 .hu>div.on7 {
	width: 70vw;
}

.ab4 .hu>div.on8 {
	width: 80vw;
}
.ab4 .hu>div.on9 {
	width: 90vw;
}
.ab4 .hu>div.on10 {
	width: 100vw;
}
.ab4 .hu>div img {
	position: relative;
	left: 0;
	top: 0;
	width: 100vw;
	max-width: 100vw;
}

.ab4 .icon_box {
	position: absolute;
	bottom: 13vw;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	height: 2vw;
}

.ab4 .icon_box>div {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 7vw;
	height:7vw;
	background-color: #FFFFFF;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.02);
	border-radius: 50%;
	margin: 0 2vw;
	display: none;
	transition: all 0.5s;
	top: 2vw;
	z-index: 2;
}

.ab4 .icon_box .icon1 {
	left: 0;
}

.ab4 .icon_box .icon2 {
	left: 9vw;
}

.ab4 .icon_box .icon3 {
	left: 19vw;
}

.ab4 .icon_box .icon4 {
	left: 30vw;
}

.ab4 .icon_box .icon5 {
	left:41vw;
}

.ab4 .icon_box .icon6 {
	left: 51vw;
}

.ab4 .icon_box .icon7 {
	left: 61vw;
}

.ab4 .icon_box .icon8 {
	left: 71.5vw;
}

.ab4 .icon_box .icon9 {
	left: 81.5vw;
}

.ab4 .icon_box .icon10 {
	left: 90vw;
}


.ab4 .icon_box .icon1 {
	display: flex;
	top: 0;
}

.ab4 .icon_box .icon2 {
	top: -6vw;
	display: flex;
}

.ab4 .icon_box .icon3 {
	top: -10vw;
	display: flex;
}

.ab4 .icon_box .icon4 {
	top: -13vw;
	display: flex;
}

.ab4 .icon_box .icon5 {
	top: -15vw;
	display: flex;
}

.ab4 .icon_box .icon6 {
	top: -14vw;
	display: flex;
}

.ab4 .icon_box .icon7 {
	top: -12vw;
	display: flex;
}

.ab4 .icon_box .icon8 {
	top:-10vw;
	display: flex;
}

.ab4 .icon_box .icon9 {
	top: -6vw;
	display: flex;
}
.ab4 .icon_box .icon10 {
	top: 0;
	display: flex;
}

.ab4 .icon_box>div .img2 {
	display: none;
}

.ab4 .icon_box>div img {
	max-width: 100%;
	max-height: 100%;
}

.ab4 .icon_box>div:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image: linear-gradient(to bottom right, #e60012, #e60012);
	opacity: 0;
	z-index: -1;
	transition: all 0.6s;
}

.ab4 .icon_box>div:hover:after {
	opacity: 1;
}

.ab4 .icon_box>div:hover .img1 {
	display: none;
}

.ab4 .icon_box>div:hover .img2 {
	display: block;
}

.ab4 .icon_box>div.on:after {
	opacity: 1;
}

.ab4 .icon_box>div.on .img1 {
	display: none;
}

.ab4 .icon_box>div.on .img2 {
	display: block;
}

.ab4 .txt_box{
	bottom:0;
	width:100%;
	text-align:center;
	position:absolute;
}
.ab4 .f_26{
	font-size:0;
}
.ab4 .prev,
.ab4 .next{
	margin:0.4rem 0.15rem;
	cursor:pointer;
	display:inline-block;
	width:0.4rem;
	height:0.4rem;
	border-radius:50%;
	border:solid 1px #ccc;
	line-height:0.38rem;
}
.ab4 .prev:hover,
.ab4 .next:hover{
	border-color:#e60012;
}
.ab4 .prev:hover span,
.ab4 .next:hover span{
	color:#e60012;
}
.ab4 .prev,
.ab4 .next{
	color:#666;
	font-family:"宋体";
}

@media(max-width:700px) {
	.ab4 {
		height:60vw;
		padding-top:50px;
	}
	.ab4 .hezi{
		top:auto;
		left:auto;
		padding:0 20px;
		max-width:640px;
		position:relative;
	}
	
	.ab4 .text{
		margin-top:10px;
		padding-bottom:50px;
	}
	
	.ab4 .add{
		display:none;
	}
	
	.ab4 .addbox{
		bottom:5vw;
	}
}

@media(max-width:600px){
	.ab4 {
		height:70vw;
	}
	.ab4  .bt{
	 	display:none;
	 }
}

@media(max-width:420px){
	.ab4 {
		height:80vw;
	}
	
}