@charset "UTF-8";
	.container .item2 {
	grid-area: main;
	height: 11.16rem;
}
.container .item2 .item2-bg {
	height: 11.16rem;
	background-image: url("./img/banner.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
.container .item2 .item2-bg .item2-bg-left-bottom {
	position: absolute;
	bottom: .4rem;
	left: 10%;
}
.container .item2 .item2-bg .item2-bg-left-bottom p {
	color: #F9FBF9;
	font-size: .4rem;
	padding-left: .0667rem;
	margin-bottom: .0667rem;
}
.container .item2 .item2-bg .item2-bg-left-bottom h1 {
	color: #fff;
	letter-spacing: .04rem;
	font-size: .9333rem;
	margin-bottom: .1333rem;
}
.container .item3 {
	grid-area: sidebar;
	background-color: #F5F5F5;
	height: 9.9rem;
}
.container .item3 .item3-header {
	height: 1.0667rem;
	background-color: #fff;
	padding: 0 .4rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.container .item3 .item3-header .item3-header-navlist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 60%;
	/* border: 1px solid #004da0;*/
	
}
.container .item3 .item3-header .item3-header-navlist div a {
	color: #004DA0;
	font-size: 0.2633rem;
	/* font-weight: 400;*/
	
}
.container .item3 .item3-header .item3-header-navlist div.active::after {
	content: '';
	display: block;
	width: 100%;
	height: .04rem;
	background-color: #FED300;
}
.container .item3 .item3-header .item3-header-navlist div.active a {
	font-weight: bold;
}
.container .item3 .item3-content {
	display: flex;
	height: calc(100% - 1.0667rem);
}
.container .item3 .item3-content .item3-content-left {
	width: 50%;
	/* border-right: 1px solid #000;*/
	position: relative;
}
.container .item3 .item3-content .item3-content-left .item3-content-list {
	position: absolute;
	bottom: -2%;
	z-index: 1;
	left: 30%;
	display: grid;
	grid-template-columns: repeat(3, 2.3667rem);
	grid-template-rows: repeat(2, 3.3333rem);
	/* 上下间距*/
	row-gap: .4rem;
	/* 左右间距*/
	column-gap: .4rem;
}
.container .item3 .item3-content .item3-content-left .item3-content-list .item3-content-list-item {
	background-color: #fff;
	/* height: 200px;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.container .item3 .item3-content .item3-content-left .item3-content-list .item3-content-list-item img {
	width: .6667rem;
	
}
.container .item3 .item3-content .item3-content-left .item3-content-list .item3-content-list-item .p1 {
	text-align: center;
	font-size: .2667rem;
	color: #004DA0;
	font-weight: 600;
}
.container .item3 .item3-content .item3-content-left .item3-content-list .item3-content-list-item .p2 {
	text-align: center;
	font-size: .2133rem;
	color: #004DA0;
}
.container .item3 .item3-content .item3-content-left .item3-content-list .item3-content-list-item div {
	text-align: center;
}
.container .item3 .item3-content .item-content-right-title{
	display: flex;
    align-items: center;
    justify-content: center;	
}
.container .item3 .item3-content .item3-content-right {
	width: 50%;
	padding-top: .8rem;
	padding-right: 3rem;
	display: flex;
}
.container .item3 .item3-content .item3-content-right .item-content-right-title .item-content-right-title-span {
	color: #004DA0;
	margin-bottom: .6667rem;
	display: block;
	font-weight: bold;
	font-size: .45rem;
}
.container .item3 .item3-content .item3-content-right .item-content-right-title .item-content-right-list {
	color: #393939;
	font-size: .2rem;
	margin-top: .7667rem;
	    line-height: 0.33rem;
}
.container .item4 {
	grid-area: item4;
	height: 11.16rem;
}
.container .item4 .item4-bg {
	background: url("./img/enfaret.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 100%;
}
.container .item4 .item4-bg .item4-bg-right-content {
	width: 8.2rem;
	/* border: 1px solid red;*/
	position: absolute;
	right: 4%;
	top: 27%;
}
.container .item4 .item4-bg .item4-bg-right-content .item4-bg-right-content-div1 {
	font-size: .4rem;
	color: #fff;
}
.container .item4 .item4-bg .item4-bg-right-content .item4-bg-right-content-div2 {
	font-size: .25rem;
	color: #fff;
}
.container .item4 .item4-bg .item4-bg-right-content .item4-bg-right-content-div3 {
	font-size: .2rem;
	color: #fff;
	margin-top: 1.2rem;
}
.container .item4 .item4-bg .item4-bg-right-content .item4-bg-right-content-div4 {
	font-size: .2rem;
	color: #fff;
	margin-top: .6667rem;
}
.container .item4 .item4-bg .item4-bg-right-content .item4-bg-right-content-div5 {
	font-size: .2rem;
	color: #fff;
	margin-top: .6667rem;
}
.container .item5 {
	grid-area: item5;
	height: 12rem;
}
.container .item5 .item5-bg {
	background: url("./img/bg_eft.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
}
.container .item5 .item5-bg .item5-bg-logo {
	text-align: center;
	padding-top: 1.5rem;
}
.container .item5 .item5-bg .item5-bg-logo .item5-bg-logo-title {
	font-size: .6rem;
	color: #003599;
	font-weight: bold;
}
.container .item5 .item5-bg .item5-bg-logo h1 {
	/* font-size: .4rem;*/
	font-size: .8rem;
	color: #DAE2F3;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine {
	width: 100%;
	padding: 0 .9333rem;
	height: .8rem;
	margin-top: 4.0333rem;
	background: linear-gradient(to right, #014E9F, #81A6CE);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active {
	position: relative;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-top {
	position: absolute;
	
	left: -0.9333rem;
	background-color: #fff;
	height: 1rem;
	border: .04rem solid #014DA1;
	color: #014DA1;
	width: 2.4rem;
	border-radius: .1333rem;
	text-align: center;
	font-size: .2rem;
	align-content: center;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active img {
	opacity: 1;
	/* 完全显示*/
	visibility: visible;
	/* 显示元素*/
	 }
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-top::after {
	content: '';
	display: block;
	width: .1333rem;
	height: .1333rem;
	background-color: #fff;
	position: absolute;
	bottom: -0.10667rem;
	left: 50%;
	transform: translateX(-50%);
	border: .04rem solid #00319A;
	border-radius: 50%;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-bottom {
	position: absolute;
	
	left: -0.9333rem;
	background-color: #fff;
	border: .04rem solid #014DA1;
	color: #014DA1;
	height: 1rem;
	width: 2.4rem;
	border-radius: .1333rem;
	text-align: center;
	font-size: .2133rem;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-bottom::after {
	content: '';
	display: block;
	width: .1333rem;
	height: .1333rem;
	background-color: #fff;
	position: absolute;
	top: -.10667rem;
	left: 50%;
	transform: translateX(-50%);
	border: .04rem solid #00319A;
	border-radius: 50%;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-img-top {
	width: 2.8rem;
	position: absolute;
	top: -3.3333rem;
	left: -1.193rem;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item.active .TimeLine-img-bottom {
	width: 2.8rem;
	position: absolute;
	bottom: -3.4333rem;
	left: -1.15rem;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item {
	position: relative;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-year {
	font-size: .3333rem;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-top {
	position: absolute;
	top: -1.5333rem;
	left: -0.9333rem;
	display:flex;
	 flex-wrap: wrap;
	background-color: #004DA0;
	height: 1rem;
	width: 2.4rem;
	border-radius: .1333rem;
	text-align: center;
	font-size: .2rem;
	align-content: center;
	justify-content:center;
	border: .04rem solid #014DA1;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item img {
	opacity: 0;
	/* 默认透明*/
	visibility: hidden;
	/* 隐藏元素（仍占位）*/
	transition: opacity 0.1s ease, visibility 0.2s ease;
	/* 过渡动画*/
	 }
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-top::after {
	content: '';
	display: block;
	width: .1333rem;
	height: .1333rem;
	background-color: #fff;
	position: absolute;
	bottom: -0.10667rem;
	left: 50%;
	transform: translateX(-50%);
	border: .04rem solid #00319A;
	border-radius: 50%;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-bottom {
	position: absolute;
	display: flex;
	bottom: -1.5333rem;
	left: -0.9333rem;
	background-color: #004DA0;
	height: 1rem;
	width: 2.4rem;
	border-radius: .1333rem;
	text-align: center;
	font-size: .2rem;
	align-content: center;
	 flex-wrap: wrap;
	border: .04rem solid #014DA1;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-bottom::after {
	content: '';
	display: block;
	width: .1333rem;
	height: .1333rem;
	background-color: #fff;
	position: absolute;
	top: -.10667rem;
	left: 50%;
	transform: translateX(-50%);
	border: .04rem solid #00319A;
	border-radius: 50%;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-img-top {
	width: 2.8rem;
	position: absolute;
	top: -3.1333rem;
	left: -1.3333rem;
}
.container .item5 .item5-bg .item5-bg-content-TimeLine .item5-bg-content-TimeLine-item .TimeLine-img-bottom {
	width: 1.8rem;
	height: 1.8rem;
	position: absolute;
	bottom: -3.1333rem;
	left: -0.3333rem;
}
.container .item6 {
	grid-area: item6;
	height: 10.66rem;
}
.container .item6 .item6-bg {
	background: url("./img/fegr.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	position: relative;
}
.container .item6 .item6-bg .item6-bg-logo {
	text-align: center;
	padding-top: .9333rem;
}
.container .item6 .item6-bg .item6-bg-logo .item6-bg-logo-title {
	font-size: .6rem;
	color: #fff;
	font-weight: bold;
}
.container .item6 .item6-bg .item6-bg-logo h1 {
	/* font-size: .4rem;*/
	font-size: .8rem;
	color: #DAE2F3;
	font-weight: normal;
}
.container .item6 .item6-bg .item6-bg-arrow .item6-bg-arrow-left {
	position: absolute;
	left: 5rem;
	top: 6.3rem;
	transform: translateY(-60%);
}
.container .item6 .item6-bg .item6-bg-arrow .item6-bg-arrow-left img {
	width: .6667rem;
	height: .6667rem;
}
.container .item6 .item6-bg .item6-bg-arrow .item6-bg-arrow-right {
	position: absolute;
	right: 5rem;
	top: 6.3rem;
	transform: translateY(-60%);
}
.container .item6 .item6-bg .item6-bg-arrow .item6-bg-arrow-right img {
	width: .6667rem;
	height: .6667rem;
}
.container .item6 .item6-bg .demo-perspective-photo {
	position: absolute;
	width: 100%;
	/* height: 7.3333rem;
	w*/
	top: 85%;
	/* background-color: #fff;*/
	zoom: 2;
}
.container .item6 .item6-bg .demo-perspective-photo #stage {
	width: 100%;
	/* height: 200px;*/
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	position: relative;
}
.container .item6 .item6-bg .demo-perspective-photo #container {
	position: absolute;
	width: 64px;
	height: 1rem;
	left: 5.8rem;
	top: -0.3rem;
	margin-left: -.7rem;
	margin-top: -0.6rem;
	cursor: pointer;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: photoRotate 18s ease-in-out infinite 2s;
	animation: photoRotate 18s ease-in-out infinite 2s;
}
.container .item6 .item6-bg .demo-perspective-photo .piece {
	width: 128px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	-moz-transition: opacity 1s, -moz-transform 1s;
	transition: opacity 1s, transform 1s;
	position: absolute;
	bottom: 0;
}
.container .item6 .item6-bg .demo-perspective-photo .example {
	width: 1.6667rem;
	/* height: 76px;*/
	height: 2.3rem;
	overflow: hidden;
	border: 1px solid #fff;
	box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.5);
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	-moz-transition: opacity 1s, -moz-transform 1s;
	transition: opacity 1s, transform 1s;
	position: absolute;
	bottom: 0;
	padding: 3px;
}
.container .item6 .item6-bg .demo-perspective-photo .example:nth-child(1) {
	-webkit-transform: rotateY(0deg) translateZ(2.3667rem);
	/* 角度0, translateZ增加*/
	transform: rotateY(0deg) translateZ(2.1667rem);
	
}
.container .item6 .item6-bg .demo-perspective-photo .example:nth-child(2) {
	-webkit-transform: rotateY(72deg) translateZ(2.3667rem);
	/* 角度72*/
	transform: rotateY(46deg) translateZ(2.3667rem);
	
	opacity: 0.4;
}
.container .item6 .item6-bg .demo-perspective-photo .example:nth-child(3) {
	-webkit-transform: rotateY(144deg) translateZ(2.3667rem);
	/* 角度144*/
	transform: rotateY(148deg) translateZ(2.3667rem);
	
	opacity: 0.4;
}
.container .item6 .item6-bg .demo-perspective-photo .example:nth-child(4) {
	-webkit-transform: rotateY(216deg) translateZ(2.3667rem);
	/* 角度216*/
	transform: rotateY(212deg) translateZ(2.3667rem);
	
	opacity: 0.4;
}
.container .item6 .item6-bg .demo-perspective-photo .example:nth-child(5) {
	-webkit-transform: rotateY(288deg) translateZ(2.3667rem);
	/* 角度288*/
	transform: rotateY(314deg) translateZ(2.3667rem);
	
	opacity: 0.8;
}
.cri-box {
	display: flex;
	align-items: center;
	/* 垂直居中*/
	justify-content: center;
	/* 水平居中*/
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.2);
	/* 内嵌阴影增强立体感*/
	height: 100%;
}
