ul {
	list-style: none;
}

.box-1 {
	width: 100%;
    margin-top: 90px;
    margin-bottom: 90px;
}

.box-1 .que {
	overflow: hidden;
	width: 1200px;
	height: 36.3125rem;
	margin: 0 auto;
	position: relative;
}


.box-1 .que .midd-1 {

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64.9375rem;
	height: 36.3125rem;
	z-index: 10;
}

.box-1 .que .midd {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64.9375rem;
	height: 36.3125rem;
	z-index: 0;
}

.box-1 .que .left {
	background-color: #fff;
	opacity: 0.5;
	width: 64.9375rem;
	height: 36.3125rem;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}

.box-1 .que .left img {
	width: auto;
	height: 80%;
	top: 8%;
	position: relative;
}

.box-1 .que .right img {
	width: auto;
	height: 80%;
	top: 8%;
	position: relative;
    float: right;
}

.box-1 .que .midd img {
	width: 64.9375rem;
	height: 36.3125rem;
}

.box-1 .que .midd-1 #slider {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64.9375rem;
	height: 36.3125rem;
}

/* .que #bg::after {
	 position:absolute;
	            left: 0;
	            top:0;
	            display: block;
	            width:100%;
	            height: 100%;
	            background-color: rgba(0, 0, 0, 0.9);
	            content: '';
	            transition:all 1s ease;
	            transform: translateY(-100%);
}
 #bg:hover::after{
            transform: translateY(0);
        } */
		#bg{
			display: none;
		}
#midd-1:hover #bg {
	display: block;
}

.box-1 .que .right {
	background-color: #fff;
	opacity: 0.5;
	width: 64.9375rem;
	height: 36.3125rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
}

.midd-1 .midd-2 {
	display: none;
	width: 100%;
	height: 100%;
}

.midd-1:hover .midd-2 {
	display: block;
}

.midd-2 .ii {
	width: 100%;
	height: 100%;
	color: #003E97;
	background-color: #fff;
	box-shadow: 1px 0 1px 0 #fff, 0px 1px 2px 0 #fff, -1px 0px 2px 0 #fff, 0px -1px 2px 0 #fff;
	text-align: center;
}

.ii-1 {
	display: none;
}

.ii-2 {
	display: none;
}

.ii-3 {
	display: none;
}

.ii-4 {
	display: none;
}

.ii-5 {
	display: none;
}

.ii-6 {
	display: none;
}

.ii-7 {
	display: none;
}

.ii-8 {
	display: none;
}

.midd-2:hover .ii-1 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	display: block;
	position: absolute;
	left: 23%;
	top: 78%;
}

.midd-2:hover .ii-2 {
	z-index: 105;
	width:auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 31%;
	top: 33%;
	display: block;
}

.midd-2:hover .ii-3 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 54.5%; 
	top: 45%;
}

.midd-2:hover .ii-4 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 80.5%;
	top: 29%;
	display: block;
}

.midd-2:hover .ii-5 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 45%;
	top: 66%;
}

.midd-2:hover .ii-6 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 65%;
	top: 67%;
	display: block;
}

.midd-2:hover .ii-7 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 51%;
	top: 95%;
	display: block;
}

.midd-2:hover .ii-8 {
	z-index: 105;
	width: auto;
	height: 2.5rem;
	line-height: 2.5rem;
	position: absolute;
	left: 76.5%;
	top: 90%;
	display: block;
}

.midd-2:hover .ii {
padding: 0 10px 0 10px;
	display: block;
}

.midd-1 .i-1 {
	width: 7.8125rem;
	height: 7.8125rem;
	position: absolute;
	left: 20%;
	top: 50%;
	/* transform: translate(-50%,-20%); */
	background: url(../images/qukuail.png) no-repeat;
	background-size: 7.8125rem 7.8125rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-2 {
	width: 5.625rem;
	height: 5.625rem;
	position: absolute;
	left: 30%;
	top: 12%;
	/* transform: translate(-12%,-30%); */
	background: url(../images/anquan.png) no-repeat;
	background-size: 5.625rem 5.625rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-3 {
	width: 5.375rem;
	height: 5.375rem;
	position: absolute;
	left: 55%;
	top: 25%;
	/* transform: translate(-50%,-30%); */
	background: url(../images/rewu.png) no-repeat;
	background-size: 5.375rem 5.375rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-4 {
	width: 5rem;
	height: 5rem;
	position: absolute;
	left: 80%;
	top: 10%;
	/* transform: translate(-80%,-10%); */
	background: url(../images/huanj.png) no-repeat;
	background-size: 5rem 5rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-5 {
	width: 6.25rem;
	height: 6.25rem;
	position: absolute;
	left: 43%;
	top: 43%;
	/* transform: translate(-55%,-45%); */
	background: url(../images/re.png) no-repeat;
	background-size: 6.25rem 6.25rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-6 {
	width: 4.0625rem;
	height: 4.0625rem;
	position: absolute;
	left: 65%;
	top: 50%;
	/* transform: translate(-50%,-65%); */
	background: url(../images/tuandui.png) no-repeat;
	background-size: 4.0625rem 4.0625rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-7 {
	width: 5.375rem;
	height: 5.375rem;
	position: absolute;
	left: 50%;
	top: 75%;
	/* transform: translate(-85%,-50%); */
	background: url(../images/jing.png) no-repeat;
	background-size: 5.375rem 5.375rem;
	z-index: 111;
}

.midd-1 .midd-2 .i-8 {
	width: 5.375rem;
	height: 5.375rem;
	position: absolute;
	left: 75%;
	top: 70%;
	/* transform: translate(-80%,-75%); */
	background: url(../images/shuju.png) no-repeat;
	background-size: 5.375rem 5.375rem;
	z-index: 111;
}
.outquan {
	display: none;
}
.midd-1 .midd-2 .i-1:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-1:hover {
	border-radius: 50%;
	

	width: 8rem;
	height: 8rem;
	background-position: 20% 50%;
	background: url(../images/tyuan.png) no-repeat;
	/* position: absolute;
	left: 20%;
	top: 50%;
	transform: translate(-50%,-20%); */
	background-size: 8rem 7.8125rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-2:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-2:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 6rem;
	height: 6rem;
	background-position: 30% 12%;
	background: url(../images/3.png) no-repeat;
	background-size: 6rem 6rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-3:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-3:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 5.575rem;
	height: 5.575rem;

	background-position: 50% 25%;
	background: url(../images/shua.png) no-repeat;
	background-size: 5.575rem 5.575rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-4:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-4:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 5.3rem;
	height: 5.3rem;
	background-position: 80% 10%;
	background: url(../images/shij.png) no-repeat;
	background-size: 5.3rem 5.3rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-5:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-5:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 6.55rem;
	height: 6.55rem;
	background-position: 43% 43%;
	background: url(../images/2.png) no-repeat;
	background-size: 6.55rem 6.55rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-6:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-6:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 4.3625rem;
	height: 4.3625rem;
	background-position: 65% 50%;
	background: url(../images/hj.png) no-repeat;
	background-size: 4.3625rem 4.3625rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-7:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}
.midd-1 .midd-2 .i-7:hover {
	border-radius: 50%;

	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 5.675rem;
	height: 5.675rem;
	background-position: 50% 75%;
	background: url(../images/1.png) no-repeat;
	background-size: 5.675rem 5.675rem;
	z-index: 112;
}
.midd-1 .midd-2 .i-8:hover .outquan{
	display: block; 
	animation: donghua01 1s infinite linear ;
}   
.midd-1 .midd-2 .i-8:hover {
	border-radius: 50%;
	/* animation: donghua01 .6s steps(10) 0.5; */
	width: 5.675rem;
	height: 5.675rem;
	background-position: 75% 70%;
	background: url(../images/sj.png) no-repeat;
	background-size: 5.675rem 5.675rem;
	z-index: 112;

}

.midd-1 .i-1 .i {
	width: ;
}

.vido {
	width: 720px;
	height: 404px;
	background-color: #000000;
	margin: 0 auto;
}

.p {
	color: #003E97;
	font-size: 20px;
	text-align: center;
	margin: 6.25rem 0;
}

@keyframes donghua01 {
	from {

		transform: rotate(0deg);
	}

	to {

		transform: rotate(360deg);
	}
}