.header div.flex_box3 {
	flex: 0 0 0.2rem;
	width: 0.2rem;
	margin-left: 0.4rem;
	transition: var(--s_tran);
	filter: brightness(0) invert(1);
}
.header_wrap.header_bg .flex_box3 {
	filter: brightness(1) invert(0);
}


.banner {
	height: 9rem;
}
.banner .swiper-slide {
	overflow: hidden;
}
.banner .swiper-slide video {
	width: 100%;
	height: 100%;
	background: #000;
}
.banner .swiper-slide img {
	transform: scale(1.2);
	transition: 4s;
}
.banner .swiper-slide-active img {
	transform: scale(1);
}
.banner .swiper-pagination {
	line-height: 0.13rem;
	bottom: 0.32rem !important;
	top: unset !important;
}
.banner .swiper-pagination .swiper-pagination-bullet {
	border: 0.01rem solid #fff;
	width: 0.13rem;
	height: 0.13rem;
	background-color: transparent;
	transition: var(--s_tran);
	margin: 0 0.1rem !important;
}
.banner .swiper-pagination .swiper-pagination-bullet-active {
	background-color: #fff;
}
.banner .banner_prev,
.banner .banner_next {
	width: 0.5rem;
	height: 0.5rem;
	background-color: rgba(255, 255, 255, 0.13);
	border-radius: 50%;
	transition: var(--s_tran);
	opacity: 0;
}
.banner .banner_prev:hover,
.banner .banner_next:hover {
	background-color: rgba(255, 255, 255, 0.5);
}
.banner .banner_prev {
	left: 0rem;
}
.banner .banner_next {
	right: 0rem;
}
.banner .banner_prev::after,
.banner .banner_next::after {
	font-size: 0.16rem;
	color: #fff;
}
.banner:hover .banner_prev {
	left: 0.5rem;
	opacity: 1;
}
.banner:hover .banner_next {
	right: 0.5rem;
	opacity: 1;
}


/* about */
.index1 {
	background-color: rgba(245, 248, 251, 1);
	padding-top: 0.9rem;
	padding-bottom: 0.85rem;
}
.index1 >.main > .flex_box1 {
	flex: 0 0 6.36rem;
	max-width: 6.36rem;
}
.index1 >.main > .flex_box2 {
	flex: 0 0 0.28rem;
}
.index1 .tab_box {
	position: relative;
}
.index1 .tab {
	padding: 0.1rem 0.28rem;
	background: #E9E9E9;
	border-radius: 0.07rem 0.07rem 0.07rem 0.07rem;
	transition:  var(--s_tran);
	margin-right: 0.2rem;
}
.index1 .tab:hover,
.index1 .tab.active {
	color: #fff;
	background: rgba(1, 81, 150, 1);
}
.index1 .arrow {
	width: 0.57rem;
	height: 0.57rem;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0rem 0.12rem 0.29rem 0.01rem rgba(0,102,190,0.26);
	margin-right: 0;
	margin-left: auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.index1 .arrow img {
	width: auto;
	height: auto;
	transition: var(--s_tran);
}
.index1 .arrow:hover img {
	transform: rotateZ(45deg);
}
.index1 .tab_box .tab_wrap {
	position: absolute;
	width: fit-content;
	z-index: 2;
	top: 0.21rem;
}
.index1 .content {
	position: relative;
	display: none;
}
.index1 .content.active {
	display: block;
}
.index1 .news1 {
	border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
	margin-top: 0.22rem;
	height: 3.3rem;
}
.index1 .content .container {
	max-width: 6.36rem;
	border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
	overflow: hidden;
	position: relative;
}
.index1 .content .swiper .container .title {
	font-size: 0.16rem;
	font-family: 'hm';
	color: #FFFFFF;
	line-height: 0.6rem;
	background-color: rgba(1, 81, 150, 0.91);
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
	padding-left: 0.3rem;
}
.index1 .content .swiper .container .title::after {
	content: '>';
	font-family: '宋体';
	font-size: 0.2rem;
	font-weight: bold;
	position: absolute;
	right: 0.34rem;
}
.index1 .content .news1_prev::after,
.index1 .content .news1_next::after {
	display: none;
}
.index1 .content .news1_prev {
	background: url('../img/index/index4.png') no-repeat;
	left: 0.2rem;
}
.index1 .content .news1_next {
	background: url('../img/index/index5.png') no-repeat;
	right: 0.2rem;
}
.index1 .content .news1_prev,
.index1 .content .news1_next {
	background-color: rgba(0, 0, 0, 0.48);
	border-radius: 0.05rem 0.05rem 0.05rem 0.05rem;
	background-position: center center;
	width: 0.45rem;
	height: 0.45rem;
}
.index1 .flex_box1 .list .item {
	border-bottom: 1px dotted rgba(187, 187, 187, 1);
}
.index1 .flex_box1 .list .flex_box1 {
	flex: 0 0 0.72rem;
}
.index1 .flex_box1 .list .flex_box2 {
	flex: 0 0 0.28rem;
}
.index1 .flex_box1 .day {
	font-size: 0.3rem;
	font-family: 'hb';
	font-weight: bold;
	color: rgba(136, 136, 136, 1);
	text-align: center;
	transition: var(--s_tran);
	line-height: 1;
}
.index1 .flex_box1 .date {
	font-size: 0.14rem;
	font-family: 'hm';
	color: rgba(136, 136, 136, 1);
	line-height: 0.26rem;
	text-align: center;
	transition: var(--s_tran);
	line-height: 1;
	margin-top: 0.05rem;
}
.index1 .flex_box1 .list .flex_box3 {
	padding-right: 0.17rem;
	overflow: hidden;
}
.index1 .flex_box1 .list .flex_box3 .title {
	transition: var(--s_tran);
	font-size: 0.18rem;
	font-family: 'hm';
	font-weight: 500;
	color: #000000;
}
.index1 .flex_box1 .list .container {
	padding: 0.12rem 0;
}
.index1 .flex_box1 .list .container:hover .day,
.index1 .flex_box1 .list .container:hover .date,
.index1 .flex_box1 .list .container:hover .title {
	color: var(--c);
}

.index1 .flex_box3 .title p {
	position: absolute;
	top: 0rem;
	left: 0rem;
	color: rgba(35, 35, 35, 1);
	font-size: 0.28rem;
	font-family: 'hm';
}
/* .index1 .flex_box3 .title p::after {
	content: '';
	display: block;
	width: 0.26rem;
	height: 0.02rem;
	background-color: #FFFFFF;
	margin-top: 0.1rem;
} */
.index1 .flex_box3 .list {
	margin-top: 0.14rem;
}
.index1 .flex_box3 .container {
	padding: 0.19rem 0.24rem;
	background-color: #fff;
	border-radius: 0.05rem;
	overflow: hidden;
	margin-bottom: 0.04rem;
	transition: var(--s_tran);
}
.index1 .flex_box3 .container .title {
	font-size: 0.18rem;
	font-family: 'hm';
	color: #000000;
}
.index1 .flex_box3 .container .date {
	font-size: 0.14rem;
	font-family: 'hr';
	color: #999999;
	line-height: 0.26rem;
	margin-top: 0.05rem;
	position: relative;
	padding-left: 0.17rem;
}
.index1 .flex_box3 .container .date::before {
	content: '';
	display: inline-block;
	width: 0.14rem;
	height: 0.14rem;
	background: url('../img/index/index7.png') no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.index1 .flex_box3 .container:hover {
	background-color: var(--c);
}
.index1 .flex_box3 .container:hover .title {
	color: #fff;

}
.index1 .flex_box3 .container:hover .date {
	color: rgba(255, 255, 255, 0.5);
}
.index1 .flex_box3 .container:hover .date::before {
	background: url('../img/index/index8.png') no-repeat;
}



/* layout */
.index2 {
	padding-top: 0.9rem;
}
.index2 .flex_box {
	margin-top: 0.4rem;
}
.index2 .flex_box > div {
	height: 8rem;
	flex: 1;
	transition: var(--l_tran);
}
.index2 .flex_box > div + div {
	margin-left: 0.06rem;
}
.index2 .flex_box > div .bg {
	height: 100%;
	position: relative;
}
.index2 .flex_box > div .info {
	position: absolute;
	transition: var(--l_tran);
	padding: 0 0.3rem;
}
.index2 .flex_box .active {
	flex: 0 0 10.56rem;
}
.index2 .flex_box .active .bg::after {
	opacity: 0;
}
.index2 .flex_box .active .info {
	bottom: 0.59rem;
	padding: 0 0.78rem;
	width: 100%;
	left: 0;
	transform: translate(0,0);
}
.index2 .flex_box .info .title {
	font-size: 0.24rem;
	font-family: 'hm';
	color: #FFFFFF;
	line-height: 0.28rem;
	white-space: nowrap;
}
.index2 .flex_box .active .info .more {
	font-size: 0.16rem;
	color: #FFFFFF;
	line-height: 0.4rem;
	text-align: right;
	margin-top: -0.21rem;
	opacity: 1;
}
.index2 .flex_box .active .info .line {
	display: block;
	width: 100%;
	height: 0.01rem;
	background-color: #fff;
}
.index2 .flex_box .active .info .des {
	font-size: 0.16rem;
	color: #FFFFFF;
	line-height: 0.3rem;
	margin-top: 0.15rem;
	opacity: 1;
}
.index2 .flex_box .bg::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(1, 81, 150, 0.69);
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 1;
	transition: var(--l_tran);
}
.index2 .flex_box .info {
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	padding: 0;
	transition: var(--l_tran);
}
.index2 .flex_box .info .more {
	font-size: 0.16rem;
	color: #FFFFFF;
	line-height: 0.4rem;
	text-align: right;
	margin-top: -0.21rem;
	opacity: 0;
	transition: var(--l_tran);
}
.index2 .flex_box .info .line {
	display: block;
	width: 100%;
	height: 0.01rem;
	background-color: #fff;
	width: 0.42rem;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	transition: var(--l_tran);
}
.index2 .flex_box .info .des {
	font-size: 0.16rem;
	color: #FFFFFF;
	line-height: 0.3rem;
	margin-top: 0.15rem;
	opacity: 0;
	transition: var(--l_tran);
}


/* index3 */
.index3 {
	padding-top: 0.9rem;
	padding-bottom: 1.42rem;
	position: relative;
}
.index3 .des {
	font-size: 0.16rem;
	color: #666666;
	line-height: 0.34rem;
	margin-top: 0.43rem;
}
.index3 .main .flex_box1 {
	flex: 0 0 6.48rem;
}
.index3 .flex_box2 {
	flex: 0 0 0.7rem;
}
.index3 .more {
	font-size: 0.16rem;
	font-weight: 400;
	color: rgba(54, 54, 54, 1);
	margin-top: .7rem;
	position: relative;
	width: 1.62rem;
	display: block;
}
.index3 .more::after {
	content: '+';
	display: block;
	position: absolute;
	right: 1.1rem;
	top: 0;
	transition: .3s ease-in-out;
}
.index3 .more::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -0.04rem;
	width: 0%;
	height: 0.01rem;
	background-color: rgba(54, 54, 54, 1);
	right: 0;
	transition: .3s ease-in-out;
}
.index3 .more:hover::before {
	width: 100%;
}
.index3 .more:hover::after {
	right: 0;
}
.index3 .main .flex_box2 {
	flex: 0 0 0.7rem;
}
.index3 .flex_box3 .hover_box {
	width: 5.82rem;
	height: 3.96rem;
	border-radius: 0.5rem 0rem 0.5rem 0rem;
}
.index3 .flex_box3 .hover_box::before {
	content: '';
	display: block;
	background-color: rgba(1, 81, 150, 0.1);
	width: 5.82rem;
	height: 3.96rem;
	border-radius: 0.5rem 0rem 0.5rem 0rem;
	position: absolute;
	top: 0.07rem;
	left: -0.06rem;
	z-index: -2;
}
.index3 #canvas {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: -1;
}


/* join */
.index4 {
	padding-top: 0.9rem;
	padding-bottom: 1.04rem;
	background: url('../img/index/index12.jpg') no-repeat;
	background-size: 100%;
	background-position: center;
	background-size: cover;
}
.index4 .title {
	font-size: 0.32rem;
	font-family: 'hb';
	color: #FFFFFF;
}
.index4 .index_title .en,
.index4 .index_title .ch {
	color: #fff;
}
.index4 .title::after {
	content: '';
	display: block;
	width: 0.43rem;
	height: 0.02rem;
	background-color: #fff;
	margin-top: 0.2rem;
}
.index4 .des {
	margin-top: 0.5rem;
	line-height: 0.3rem;
	color: #fff;
	font-size: 0.16rem;
	max-width: 6.5rem;
}
.index4 .btn_group {
	margin-top: 1rem;
}
.index4 .btn_group > div {
	flex: 0 0 1.9rem;
	height: 0.56rem;
	border-radius: 0.09rem 0.09rem 0.09rem 0.09rem;
	margin-right: 0.24rem;
}
.index4 .btn_group .flex_box1 {
	border: 0.01rem solid #fff;
	border-radius: 0.05rem;
	background: rgba(255,255,255,0.1);
	overflow: hidden;
	padding: 0.1rem;
	box-sizing: initial;
}
.index4 .flex_box .flex_box1 a {
	background: linear-gradient( 167deg, #0E7BD8 0%, #0F5D9F 100%);
	height: 0.56rem;
	padding: 0 0.1rem;
	border-radius: 0.05rem;
}
.index4 .btn_group .arrow {
	justify-content: flex-end;
	flex: 0 0 auto;
}
.index4 .btn_group .arrow > div {
	animation: blink 2s linear infinite forwards;
	max-width: 0.08rem;
}
.index4 .btn_group .arrow .img1 {
	animation-delay: 3.6s;
}
.index4 .btn_group .arrow .img2 {
	animation-delay: 1.8s;
}
.index4 .btn_group .arrow .img3 {
	animation-delay: 0s;
}
.index4 .flex_box .flex_box2 {
	background-color: rgba(42, 54, 229, 0.15);
}
.index4 .flex_box .flex_box3 {
	background-color: rgba(34, 117, 213, 0.33);
}
.index4 .flex_box .flex_box4 {
	background-color: rgba(34, 111, 227, 0.32);
}
.index4 .flex_box > div:hover {
	/* background: linear-gradient(160deg, #0E7BD8 0%, #0F5D9F 100%); */
}
@keyframes blink {
    0% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.index4 .flex_box .rotate_box {
	transform: none !important;
	max-width: 0.35rem;
	height: 0.28rem;
	margin: 0 auto;
	margin-right: 0.09rem;
}
.index4 .flex_box .rotate_img {
	object-fit: contain;
}
.index4 .flex_box .subtitle {
	font-size: 0.2rem;
	color: rgba(255,255,255,0.4);
	line-height: 0.28rem;
	text-align: center;
	margin-right: 0.1rem;
}
.index4 .content_wrap .content {
	display: none;
}
.index4 .content_wrap .content.show {
	display: block;
}

.index4 .hover_box {
	display: flex;
	align-items: center;
	padding-right: 0.28rem;
}
.index4 .des1 {
	font-size: 0.16rem;
	color: #FFFFFF;
	line-height: 0.3rem;
	opacity: 0.8;
	margin-top: 0.3rem;
}

@media only screen and (max-width: 768px) {
	.index4 .btn_group .flex_box1{
		width: fit-content;
	}
	.index1 > .main > .flex_box1 {
		width: 100%;
		max-width: none;
	}
	.index1 .tab_box .tab_wrap {
		position:static;
		width: 100%;
		z-index: 2;
		height: auto;
		overflow: hidden;
		margin-top: .2rem;
	}.index1 .tab {
		 width: 30%;
		 float: left;
		 font-size: 0.26rem;
		 text-align: center;
	 }
	.index1 .content .container{
		max-width:none;}
	.index1 .content .swiper .container .title{
		font-size:0.24rem;}
	.index1 .content .container{
		display:flex !important;}
	.index1 .flex_box1 .list .flex_box3 .title{
		font-size:0.24rem;}
	.index1 .flex_box1 .date{
		font-size:0.2rem;}
	.index1 > .main > .flex_box2{
		display:none;}
	.index1 > .main > .flex_box3{
		width:100%;}
	.index1 .flex_box3 .container .title {
		font-size: 0.24rem;
	}
	.index1 .flex_box3 .container .date {
		font-size: 0.2rem;
	}
	.index2 .flex_box .info .title {
		font-size: 0.35rem;
	}.index2 .flex_box .active .info .more {
		 font-size: 0.2rem;
	 }
	.index2 .flex_box .active .info .des {
		font-size: 0.24rem;
	}
	.index2 .flex_box1{
		width:100%; margin-left:0;}

	.index2 .flex_box .bg::after{
		background:none;}
	.index2 .flex_box > div .info{
		bottom: 0.59rem;
		padding: 0 0.78rem;
		width: 100%;
		left: 0;
		transform: translate(0,0);}

	.index2 .flex_box .info .more{
		font-size: 0.18rem;opacity: 10;}
	.index2 .flex_box .info .line{
		width:100%;}
	.index2 .flex_box .info .des{
		font-size:0.24rem;opacity: 10;}
	.index2 .flex_box > div + div{
		height:auto;}
	.index2 .flex_box2,.index2 .flex_box3,.index2 .flex_box4,.index2 .flex_box5{
		width:100%;
		margin-left:0 !important;
		margin-bottom:.5rem;
	}
	.index2 .flex_box .active{
		margin-bottom:.5rem;
		flex:auto;
	}
	.index3{
		height:auto;
		overflow:hidden;
	}
	.index3 .des {
		font-size: 0.24rem;
		line-height: 0.38rem;
	}
	.index3 .more {
		font-size: 0.24rem;
		width: 30%;
	}
	.index3 .main .flex_box2{
		display:none;}
	.index3 .main .flex_box3{
		width:100%;}
	.index3 .flex_box3 .hover_box{
		width:100%;}
	.index3 .flex_box3 .hover_box::before{
		width:100%;}
	.index4 .des{
		font-size:0.24rem;
		line-height: 0.35rem;
	}
	.index4 .des1{
		font-size:0.24rem;
		line-height: 0.35rem;
	}
	.index4 .flex_box .subtitle{
		font-size:0.22rem;}
	.index1 .flex_box1 .list .flex_box1 {
		flex: 0 0 15%;
	}
	.banner{
		height:4rem !important;
	}
}