.history {
	background-image: url("../img/about/deve_bg.jpg");
	background-size: cover;
	margin-top: 1rem;
	padding-top: 0.85rem;
	padding-bottom: 3.07rem;
}
.history .inner_subtitle {
	font-size: 0.3rem;
	text-align: left;
	color: #fff;
}
.history .inner_subtitle::after {
	margin-left: 0;
	background: #fff;
	width: 0.5rem;
	height: 0.02rem;
}
.history .flex_start > .flex_box2 {
	flex: 0 0 8.83rem;
}
.history .swiper .flex_box1 {
	flex: 0 0 1.7rem;
}
.history .swiper .flex_box2 {
	flex: 0 0 0.98rem;
}
.history .swiper .flex_box2 {
	flex: 0 0 0.98rem;
}
.history .swiper {
	height: 12rem;
	margin-top: 1.22rem;
}
.history .swiper img {
	width: auto;
	max-width: 100%;
}
.history .flex_box {
	align-items: flex-start;
}
.history .flex_box .swiper-slide .date {
	font-size: 0.24rem;
	color: rgba(255, 255, 255, 0.8);
	transition: var(--s_tran);
	text-align: right;
	position: relative;
}
.history .flex_box .swiper-slide .date::after {
	content: '';
	display: inline-block;
	width: 0.4rem;
	height: 0.01rem;
	background-color: #fff;
	vertical-align: super;
	margin-left: 0.17rem;
	transition: var(--s_tran);
}
.history .flex_box .swiper-slide .date::before {
	content: '';
	display: block;
	width: 0.13rem;
	height: 0.13rem;
	background: url('../img/about/about14.png') no-repeat;
	background-size: auto;
	background-position: center;
	position: absolute;
	right: 0%;
	top: 50%;
	transform: translate(50%,-50%);
}
.history .flex_box .swiper-slide-next .date::before,
.history .flex_box .swiper-slide:hover .date::before {
	background: url('../img/about/about15.png') no-repeat;
}
.history .flex_box .swiper-slide-next .date,
.history .flex_box .swiper-slide:hover .date{
	font-size: 0.28rem;
	color: rgba(255, 255, 255, 1);
}
.history .flex_box .swiper-slide-next .date::after,
.history .flex_box .swiper-slide:hover .date::after {
	width: 0.6rem;
}
.history .flex_box .swiper-slide .info p {
	font-size: 0.2rem;
	font-family: 'hm';
	color: rgba(255, 255, 255, 0.8);
	line-height: 0.3rem;
	transition: var(--s_tran);
}
.history .flex_box .swiper-slide-next .info p,
.history .flex_box .swiper-slide:hover .info p {
	color: rgba(255, 255, 255, 1);
}
.history .flex_box .swiper-slide .info .box_img {
	margin-top: 0.22rem;
	max-width: 3.5rem;
	height: 2.2rem;
	transition: var(--s_tran);
}
.history .flex_box .swiper-slide-next .info .box_img {
	max-width: 4.5rem;
	height: 2.8rem;
}
.history .swiper {
	position: relative;
}
.history .flex_start > .flex_box2::after {
	content: '';
	display: block;
	width: 0.01rem;
	height: 98%;
	position: absolute;
	top: 5%;
	left: 1.7rem;
	background-color: #fff;
}
.history .swiper-button-prev:after,
.history .swiper-button-next:after {
	display: none;
}
.history .swiper-button-prev,
.history .swiper-button-next {
	background: url('../img/about/about16.png') no-repeat;
	width: 0.36rem;
	height: 0.36rem;
	display: block !important;
	opacity: 1 !important;
	pointer-events: all !important;
	cursor: pointer !important;
	background-size: contain;
}
.history .swiper-button-prev:hover,
.history .swiper-button-next:hover {
	background: url('../img/about/about17.png') no-repeat;
}
.history .swiper-button-prev:hover {
	transform: rotate(180deg);
}
.history .swiper-button-prev {
	top: 0.3rem;
	left: 1.52rem;
	margin-top: 0;
}
.history .swiper-button-next {
	bottom: -0.75rem;
	top: unset;
	left: 1.52rem;
	margin-top: 0;
	transform: rotate(180deg);
}
.history .swiper-button-next:hover {
	transform: rotate(0deg);
}


@media only screen and (max-width: 768px) {
	.history{
		height:auto;
		overflow:hidden;
		background-position: center;
		margin-top: 0;
	}
	.history .flex_box{
		width: 100%;
		height: auto;
		overflow: hidden;}
	.history .swiper .flex_box1{
		width: 20%;
		float: left; }
	.history .swiper .flex_box2{
		width: 10%;
		float: left;}
	.history .swiper .flex_box3{
		width: 60%;}
	.history .flex_start > .flex_box2{
		width:100%;}
	.history .flex_box .swiper-slide .info p{
		font-size:0.24rem;}
	.history .swiper-button-next{
		bottom:0;}
	.history .swiper-button-prev:hover{
		width: 0.36rem;
		height: 0.36rem;
		display: block !important;
		opacity: 1 !important;
		pointer-events: all !important;
		cursor: pointer !important;
		background-size: contain;}
	.history .swiper-button-next:hover{
		width: 0.36rem;
		height: 0.36rem;
		display: block !important;
		opacity: 1 !important;
		pointer-events: all !important;
		cursor: pointer !important;
		background-size: contain;}
	.history .flex_box .swiper-slide .info .box_img {
		max-width: 3rem;
	}
	.history .flex_box .swiper-slide-next .info .box_img {
		max-width: 4rem;

	}
}