a {

	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

	-webkit-user-select: none;

	-moz-user-focus: none;

	-moz-user-select: none;

}

a:link {color: #041B32}

a:visited{color: #041B32}





.back {

	position: absolute;

	top: 10%;

	left: 6%;

	width: 3.5%;

}



.back a {

	width: 100%;

	display: block;

}

.back img {

	width: 100%;

	display: block;

}



.home {

	position: absolute;

	top: 8%;

	right: 5%;

	width: 2.5%;

}



.home img {

	width: 100%;

}



.box {

	padding: 3% 6%;

	box-sizing: border-box;

	position: relative;

	z-index: 3;

	min-height: 100%;

}



.box .lang {

	background: url(../images/lang.png) no-repeat center;

	background-size: 100%;

	width: 8rem;

	height: 2.5rem;

	line-height: 2.5rem;

	overflow: hidden;

	position: relative;

}



.box .lang a {

	color: rgba(255,255,255,.6);

	width: 50%;

	float: left;

	text-align: center;

	display: block;

	font-size: 1.2rem;

}



.box .lang a.on {

	color: rgba(255,255,255,1);

}



.box .lang:after {

	background: rgba(255,255,255,.6);

	width: 1px;

	height: 1rem;

	content: '';

	display: block;

	position: absolute;

	left: 50%;

	transform: rotate(30deg);

	top: 0.75rem;

}



.box .xzxh {

	margin-top: 1.5rem;

	border-radius: 50px;

	font-size: 1.2rem;

	color: rgba(255,255,255,1);

	font-weight: 400;

	text-align: center;

	background: url(../images/bgs.png) no-repeat;

	background-size: 100% 100%;

	padding: 10px 20px;

	display: table;
	position: relative;
	z-index: 9999

}



.box .big {

position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 88%;



}



.box .big img {

	width: 100%;

}



.box .big .sign {

	position: absolute;

	cursor: pointer;

}



.box .big .sign .xg {

}



.box .big .sign .text {

	font-size: 1.1rem;

	border: 1px solid rgba(183,216,255,.3);

	background: linear-gradient(180deg,rgba(17,86,177,.3) 0%,rgba(9,43,89,.3) 100%);

	color: #ADCC31;

	padding: 0.3rem 1rem;

	text-align: center;

	margin-left: 3.3rem;

	margin-top: -4.2rem;

	position: relative;

}



.box .big .sign .text:after {

	width: 100%;

	content: '';

	display: block;

	height: 1px;

	background: rgba(69,139,232,1);

	bottom: -7px;

	position: absolute;

	left: 0;

}



.box .big .sign .yd {

	width: 0.75rem;

	height: 0.75rem;

	border: 1px solid rgba(69,139,232,1);

	border-radius: 50%;

	position: relative;

	animation: sf 1000ms ease-in-out infinite

}



.box .big .sign .yd span {

	display: block;

	width: 0.45rem;

	height: 0.45rem;

	background: #458BE8;

	border-radius: 50%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

}



.box .big .sign .xie {

	width: 4rem;

	height: 1px;

	background: rgba(69,139,232,1);

	transform: rotate(-45deg);

	margin-left: 0px;

	margin-top: -2.3rem;

}



.box .big .signcss .xie {

	transform: rotate(45deg);

}



.box .big .signcss .text:after {

	bottom: auto;

	top: -7px;

}



.box .big .signcss .xie {

	margin-left: 0px;

	margin-top: 1.2rem;

}



.box .big .signcss .text {

	margin-top: 2rem;

}



.box .big .sign1 {

	top: 26%;

	left: 9%;

}



.box .big .sign2 {

	top: 63%;

	left: 11%;

}



.box .big .sign3 {

	top: 11%;
    left: 14%;

}



.box .big .sign3 .text:after {

	display: none

}



.box .big .sign4 {

	top: 26%;

	left: 17%;

}



.box .big .sign5 {

	top: 9%;

	left: 33%

}



.box .big .sign5 .text {

	margin-top: 1.9rem;

}



.box .big .sign6 {

	top: 48%;

	left: 34%

}



.box .big .sign7 {

	top: 4%;

	left: 44%

}



.box .big .sign8 {

	top: 3%;

	left: 58%

}



.box .big .sign9 {

	top: 32%;

	left: 54%

}



.box .big .sign10 {

	top: 68.5%;
    left: 47%;

}



.box .big .sign10 .text:after {

	display: none

}
.pinch-zoom-container{ position: relative; height: 100%; }


.box .big .sign11 {

	top: 62%;

	left: 44%

}



.box .big .sign12 {

	top: 8%;

	left: 68%

}



.box .big .sign13 {

	top: 90%;

	left: 61%

}



.box .big .sign14 {

	top: 20%;

	left: 85%;

}



.box .big .sign15 {

	top: 32%;

	left: 86%;

}



.box .big .sign16 {

	top: 40%;

	left: 73%

}



.box .big .sign16 .xie {

	transform: rotate(45deg);

	margin-left: -3rem;

	margin-top: -2rem;

}



.box .big .sign16 .text {

	margin-left: -9.5rem;

	width: 5rem;

}



.box .big .sign17 {

	top: 50%;

	left: 73.2%;

}



.box .big .sign17 .text:after {

	display: none

}



.box .big .sign18 {

	top: 52%;

	left: 75%;

}



.box .big .sign18 .xie {

	transform: rotate(70deg);

	margin-left: -0.8rem;

	margin-top: 1.9rem;

}



.box .big .sign18 .text {

	margin-top: 2.3rem;

	margin-left: 1.5rem;

}


.box .big .sign19 {

	top: 43%;

	left: 75.2%;

}



.box .big .sign19 .text:after {

	display: none

}

@keyframes sf {

	0% {

		opacity: 1

	}



	100% {

		opacity: 0.3

	}

}



@-webkit-keyframes sf {

	0% {

		opacity: 1

	}



	100% {

		opacity: 0.3

	}

}



.foot {

	width: 13rem;

	height: 13rem;

	background: rgba(7,75,148,1);

	border: 1px solid rgba(58,255,242,1);

	box-shadow: 0px 3px 6px rgba(168,255,255,0.4);

	border-radius: 50%;

	position: fixed;

	left: 50%;

	transform: translateX(-50%);

	bottom: -6.5rem;

	z-index: 6

}



.foot .nc {

	width: 10rem;

	height: 10rem;

	background: linear-gradient(180deg,rgba(69,176,232,1) 0%,rgba(93,187,255,1) 18%,rgba(58,130,223,1) 46%,rgba(18,101,184,1) 76%,rgba(23,111,199,1) 100%);

	border-radius: 50%;

	margin-left: 1.5rem;

	margin-top: 1.5rem;

	position: relative;

}



.foot .nc img {

	width: 24%;

	display: block;

	position: absolute;

	left: 50%;

	top: 31%;

	transform: translate(-50%,-50%);

}



.cn-wrapper {

	width: 40rem;

	height: 40rem;

	overflow: hidden;

	position: fixed;

	z-index: 10;

	bottom: -20rem;

	left: 50%;

	border-radius: 50%;

	margin-left: -20rem;

	-webkit-transform: scale(.1);

	-ms-transform: scale(.1);

	-moz-transform: scale(.1);

	transform: scale(.1);

	pointer-events: none;

	-webkit-transition: all .3s ease;

	-moz-transition: all .3s ease;

	transition: all .3s ease;

	background: radial-gradient(circle,rgba(7,75,148,0) 0%,rgba(7,75,148,0.45) 28%,rgba(7,75,148,1) 100%);

	z-index: 4;

}



.opened-nav {

	border-radius: 50%;

	pointer-events: auto;

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

}



.cn-wrapper li {

	position: absolute;

	width: 20rem;

	height: 20rem;

	-webkit-transform-origin: 100% 100%;

	-moz-transform-origin: 100% 100%;

	-ms-transform-origin: 100% 100%;

	transform-origin: 100% 100%;

	overflow: hidden;

	left: 50%;

	top: 50%;

	margin-top: -20rem;

	margin-left: -20rem;

	-webkit-transition: border .3s ease;

	-moz-transition: border .3s ease;

	transition: border .3s ease;

}



.cn-wrapper li a {

	display: block;

	height: 39.3rem;

	width: 39.3rem;

	position: absolute;

	bottom: -19.65rem;

	right: -19.65rem;

	border-radius: 50%;

	text-decoration: none;

	color: #fff;

	text-align: center;

	-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);

	-ms-transform: skew(-60deg) rotate(-75deg) scale(1);

	-moz-transform: skew(-60deg) rotate(-75deg) scale(1);

	transform: skew(-60deg) rotate(-75deg) scale(1);

	-webkit-backface-visibility: hidden;

	-webkit-transition: opacity .3s,color .3s;

	-moz-transition: opacity .3s,color .3s;

	transition: opacity .3s,color .3s;

}



.cn-wrapper li a img {

	width: 7%;

	position: absolute;

	top: 10%;

	left: 50%;

	transform: translateX(-50%);

}



.cn-wrapper li:first-child {

	-webkit-transform: rotate(0deg) skew(60deg);

	-ms-transform: rotate(0deg) skew(60deg);

	-moz-transform: rotate(0deg) skew(60deg);

	transform: rotate(0deg) skew(60deg)

}



.cn-wrapper li:nth-child(2) {

	-webkit-transform: rotate(30deg) skew(60deg);

	-ms-transform: rotate(30deg) skew(60deg);

	-moz-transform: rotate(30deg) skew(60deg);

	transform: rotate(30deg) skew(60deg)

}



.cn-wrapper li:nth-child(3) {

	-webkit-transform: rotate(60deg) skew(60deg);

	-ms-transform: rotate(60deg) skew(60deg);

	-moz-transform: rotate(60deg) skew(60deg);

	transform: rotate(60deg) skew(60deg)

}



.cn-wrapper li:nth-child(4) {

	-webkit-transform: rotate(90deg) skew(60deg);

	-ms-transform: rotate(90deg) skew(60deg);

	-moz-transform: rotate(90deg) skew(60deg);

	transform: rotate(90deg) skew(60deg)

}



.cn-wrapper li:nth-child(5) {

	-webkit-transform: rotate(120deg) skew(60deg);

	-ms-transform: rotate(120deg) skew(60deg);

	-moz-transform: rotate(120deg) skew(60deg);

	transform: rotate(120deg) skew(60deg)

}



.cn-wrapper li:nth-child(6) {

	-webkit-transform: rotate(150deg) skew(60deg);

	-ms-transform: rotate(150deg) skew(60deg);

	-moz-transform: rotate(150deg) skew(60deg);

	transform: rotate(150deg) skew(60deg)

}



.cn-wrapper li a {

	background: linear-gradient(rgba(69,139,232,.8) 0%,rgba(69,139,232,.3) 30%,rgba(0,60,180,0.1) 100%);

}



.cn-wrapper li a:hover {

	background: linear-gradient(rgba(69,139,232,1) 0%,rgba(69,139,232,.6) 30%,rgba(0,60,180,0.1) 100%);

}

.cn-wrapper li.on a {

	background: linear-gradient(rgba(69,139,232,1) 0%,rgba(69,139,232,.6) 30%,rgba(0,60,180,0.1) 100%);

}

.line1 {

	width: 4.5%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 27.1%;

	left: 11.1%;

}



.line2 {

	width: 18.5%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 27.1%;

	left: 27.2%;

}



.line3 {

	width: 0.25%;

	height: 36.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 10.6%;

	left: 45.43%;

}



.line4 {

	width: 25.4%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 47%;

	left: 45.6%;

}



.line5 {

	width: 0.25%;

	height: 36.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 27.7%;

	left: 28.86%;

}



.line6 {

	width: 17.2%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 63.8%;

	left: 11.7%;

}



.line7 {

	width: 0.25%;

	height: 49.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 20.5%;

	left: 71.03%;

}



.line8 {

	width: 10.2%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 20.25%;

	left: 71.1%;

}



.line9 {

	width: 10.5%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 69.9%;

	left: 71.1%;

}



.line10 {

	width: 44.1%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 77.12%;

	left: 11.6%;

}



.line11 {

	width: 31.4%;

	height: 0.5%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 80.62%;

	left: 11.6%;

}



.line12 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 81.2%;

	left: 29.31%;

}



.line13 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 81.2%;

	left: 33.6%;

}



.line14 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 81.2%;

	left: 38.05%;

}



.line15 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 81.2%;

	left: 42.51%;

}



.lines1 {

	width: 4.5%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 28.9%;

	left: 11.1%;

}



.lines2 {

	width: 2.6%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 28.9%;

	left: 27.2%;

}



.lines3 {

	width: 0.25%;

	height: 38.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 10.6%;

	left: 46.73%;

}



.lines4 {

	width: 31.4%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 49.6%;

	left: 40.6%;

}



.lines5 {

	width: 0.25%;

	height: 36.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 29.3%;

	left: 29.9%;

}



.lines6 {

	width: 18.2%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 65.5%;

	left: 11.7%;

}



.lines7 {

	width: 0.25%;

	height: 49.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 25.5%;

	left: 72.13%;

}



.lines8 {

	width: 9.2%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 25%;

	left: 72.1%;

}



.lines9 {

	width: 8.7%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 74.52%;

	left: 72.5%;

}



.lines10 {

	width: 3.1%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 58.8%;

	left: 30.1%;

}



.lines11 {

	width: 3.1%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 58.8%;

	left: 37.1%;

}



.lines12 {

	width: 0.25%;

	height: 9.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 49.8%;

	left: 40.23%;

}



.lines13 {

	width: 32%;

	height: 0.5%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 78.89%;

	left: 11.6%;

}



.lines14 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection.gif);

	position: absolute;

	top: 79.3%;

	left: 30.01%;

}



.lines15 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 79.3%;

	left: 34.31%;

}



.lines16 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 79.3%;

	left: 38.77%;

}



.lines17 {

	width: 0.25%;

	height: 17.4%;

	background: url(../images/selection1.gif);

	position: absolute;

	top: 79.3%;

	left: 43.19%;

}



#particle-canvas {

	width: 100%;

	height: 100vh;

	background: linear-gradient(to bottom, rgb(9, 33, 57) 0%,rgb(5, 28, 52) 100%);

	vertical-align: middle;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 1;

}



.lctitle {

	text-align: center;

	color: #fff;

	font-size: 2rem;

}



.lctitle1 {

	text-align: center;

	color: #ADCC31;

	font-size: 1.2rem;

	margin-top: 1rem;

	margin-bottom: 10rem;

}



.nav {
	width: 100%;
   overflow-x: auto;

}

.nav .navadd{ width:180%; overflow: hidden;}

.nav .navs {

	float: left;

	width: 8.3333%;

	text-align: center;

	position: relative;

}



.nav .navs:nth-child(2n) img {

	margin-top: 10rem;

}



.nav .navs img {

	width: 40%;

}



.nav .navs .p1 {

	color: #fff;

	font-size: 1.1rem;

	margin-top: 0.18rem;

}



.nav .navs .p1:after {

	content: '';

	display: block;

	width: 1.8rem;

	height: 2px;

	background: rgba(69,139,232,1);

	margin: 0.8rem auto;

}



.nav .navs .p2 {

	color: rgba(255,255,255,.7);

	font-size: 1rem;

	font-weight: 300;

	line-height: 1.5;

	width: 70%;

	margin: 0 auto;

}



.nav .nav1:after {

	display: block;

	content: '';

	position: absolute;

	top: 56%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}



.nav .nav2:after {

	display: block;

	content: '';

	position: absolute;

	top: 33%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(-37deg);

}



.nav .nav3:after {

	display: block;

	content: '';

	position: absolute;

	top: 56%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}



.nav .nav4:after {

	display: block;

	content: '';

	position: absolute;

	top: 31%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(-37deg);

}



.nav .nav5:after {

	display: block;

	content: '';

	position: absolute;

	top: 56%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}



.nav .nav6:after {

	display: block;

	content: '';

	position: absolute;

	top: 33%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(-37deg);

}

.nav .nav7:after {

	display: block;

	content: '';

	position: absolute;

	top: 68%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}

.nav .nav8:after {

	display: block;

	content: '';

	position: absolute;

	top: 33%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(-37deg);

}

.nav .nav9:after {

	display: block;

	content: '';

	position: absolute;

	top: 52%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}


.nav .nav10:after {

	display: block;

	content: '';

	position: absolute;

	top: 33%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(-37deg);

}


.nav .nav11:after {

	display: block;

	content: '';

	position: absolute;

	top: 49%;

	right: -34%;

	width: 70%;

	height: 1px;

	border-bottom: 1px dashed #458BE8;

	transform: rotate(37deg);

}

#canv {

	width: 100%;

	height: 100vh;

	vertical-align: middle;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 1;

}



.menu {

	display: table;

	margin: 3rem auto  4rem auto;

	font-size: 1.2rem;

}



.menu a {

	color: rgba(255,255,255,.8);

	border: 1px solid rgba(255,255,255,.3);

	padding: .5rem 1.5rem;

	border-radius: 50px;

	margin: 0 2rem;

}



.menu a.on {

	background: url(../images/about.png);

	background-size: 100% 100%;

	border: none;

}



.content {

	display: table;

	margin: 0 auto;

	width: 80%;

	padding-bottom: 100px;

}



.content .titles {

	font-size: 2rem;

	color: rgba(173,204,49,1);

}



.content .smalltitles {

	font-size: .9rem;

	color: rgba(69,139,232,1);

	margin-top: 0.7rem;

	margin-bottom: 5rem;

	text-transform: uppercase;

}



.content .p {

	font-size: 1rem;

	margin-top: 5rem;

	text-indent: 2rem;

	line-height: 1.7;

}



.content .p .te {

	float: left;

	width: 55%;

	color: rgba(255,255,255,.8);

	line-height: 1.5;

	text-align: justify;

}



.content .p img {

	float: right;

	width: 35%;

}



.content .p .te1 {

	float: right;

	width: 55%;

	color: rgba(255,255,255,.8);

	line-height: 1.5;

	text-align: justify;

}



.content .p .te2 {

	float: left;

	width: 35%;

	position: relative;

}



.content .p .te2 .img1 {

	width: 100%;

}



.content .p .te2 .img2 {

	width: 100%;

	position: absolute;

	top: 2rem;

	left: 2rem;

}



.content .p p {

	margin-top: 1rem!important;

	font-size: 1rem!important;

}



.menu1 a.on {

	background: url(../images/project_bg.png);

	background-size: 100% 100%;

	border: none;

}



#wrap {

	width: 100%;

	height: 25rem;

	position: relative;

	margin-top: 50px;

	/*一定要有以下样式，才会有3D的效果*/

	/*把div变成3D的场景*/

	transform-style: preserve-3d;

	perspective: 75rem;

}



#wrap .img {

	/*对所有的图片进行设置样式*/

	width: 20rem;

	height: 20rem;

	/*这里一定要设置为绝对定位*/

	position: absolute;

	/*calc()是一个计算函数  页面的宽度-容器宽度的一半*/

	left: calc(50% - 10rem);

	top: calc(50% - 7.5rem);

	border-radius: 7px;

	/*看到图片的运动过程*/

	transition: 0.8s ease-in-out;

	text-align: center;

}



#wrap .img img {

	width: 100%;

}



#wrap .img p {

	display: none

}



#wrap .img p:nth-child(1) {

	font-weight: 400;

	font-size: 1rem;

	color: rgba(255,255,255,1);

}



#wrap .img p:nth-child(2) {

	font-weight: 400;

	font-size: .8rem;

	color: rgba(173,204,49,1);

	margin-top: .8rem;

}

.case-show{

	margin-top: 9rem;

}

.case-show .titles {

	text-align: center;

	font-size: 2rem;

	color: rgba(255,255,255,1);

}



.case-show .titles1 {

	text-align: center;

	font-size: 1.2rem;

	color: rgba(173,204,49,1);

	font-weight: 400;

	margin: 1rem auto 2rem auto;

}



.case-show .titles2 {

	text-align: center;

	font-size: 1.2rem;

	color: rgba(255,255,255,.7);

	width: 40%;

	margin: 0 auto;

	line-height: 1.7;

}



.case-show .titles2 img {

	width: 1rem;

	margin: 0 10px;

}



.case-show .imgbox {

	width: 94%;

	margin: 2rem auto 5rem auto;

	overflow: hidden;

}



.case-show .imgbox img {

	width: 23.5%;

	margin-right: 2%;

	margin-top: 2%;

	display: block;

	float: left;

}



.case-show .imgbox img:nth-child(4n) {

	margin-right: 0;

}





.magnify-button-zoom-out {

	display: none

}



.magnify-button-actual-size {

	display: none

}



.magnify-button-zoom-in {

	display: none

}



.magnify-button-rotate-right {

	display: none

}



.magnify-button-fullscreen {

	display: none

}



.service {

	display: table;

	margin: 0 auto;

	width: 80%;

}



.service .list {

	width: 19%;

	margin-right: 1.25%;

	float: left;

	padding: 2.5rem 2.5rem 5.5rem 2.5rem;

	box-sizing: border-box;

	background: url(../images/after_bg.png) no-repeat;

	background-size: 100% 100%;

	position: relative;

}



.service .list:nth-child(5n) {

	margin-right: 0;

}



.service .list img {

	display: block;

	width: 3rem;

	margin: 0 auto;

}



.service .list .titles {

	font-size: 1.3rem;

	color: #fff;

	text-align: center;

	margin: 1rem auto .7rem auto;

}



.service .list .titles:after {

	display: block;

	width: 1rem;

	height: 2px;

	background: #fff;

	content: '';

	margin: 0 auto;

	margin-top: 0.8rem;

}



.service .list .intro {

	font-size: 1rem;

	color: rgba(255,255,255,.8);

	line-height: 1.5;

	text-align: justify;

}



.service .list .li1 {

	position: absolute;

	left: -2px;

	width: 4px;

	top: 0;

	background: rgba(69,139,232,1);

	height: 70px;

}



.service .list .li2 {

	position: absolute;

	left: -2px;

	width: 20px;

	top: 0;

	background: rgba(69,139,232,1);

	height: 4px;

}



.service .list .li3 {

	position: absolute;

	right: -2px;

	width: 4px;

	bottom: 0;

	background: rgba(69,139,232,1);

	height: 70px;

}



.service .list .li4 {

	position: absolute;

	right: -2px;

	width: 20px;

	bottom: 0;

	background: rgba(69,139,232,1);

	height: 4px;

}



.page {

	display: table;

	margin: 80px auto 140px auto;

	overflow: hidden;

}



.page .prev {

	width: 100px;

	background: rgba(255,255,255,.1) url(../images/prev.png) no-repeat center;

	background-size: 40px;

}



.page .next {

	width: 100px;

	background: rgba(255,255,255,.1) url(../images/next.png) no-repeat center;

	background-size: 40px;

}



.page a {

	height: 32px;

	line-height: 32px;

	width: 32px;

	text-align: center;

	float: left;

	color: rgba(255,255,255,.3);

	margin: 0 5px;

	font-size: 0.9rem

}



.page a.active {

	color: rgba(255,255,255,1);

}



.page a:hover {

	color: rgba(255,255,255,1);

}



.page .prev.cut {

	background: #458BE8 url(../images/prev.png) no-repeat center;

	background-size: 40px;

}



.page .next.cut {

	background: #458BE8 url(../images/next.png) no-repeat center;

	background-size: 40px;

}



.page .prev:hover {

	background: #458BE8 url(../images/prev.png) no-repeat center;

	background-size: 40px;

}



.page .next:hover {

	background: #458BE8 url(../images/next.png) no-repeat center;

	background-size: 40px;

}



.video {

	width: 90%;

	margin: 0 auto;

	position: absolute;

	top: 50%;

	transform: translateY(-60%);

}



.video .list {

	width: 23.5%;

	margin-right: 2%;

	margin-top: 2%;

	float: left;

}



.video .list:nth-child(4n) {

	margin-right: 0;

}



.video .list .pic {

	width: 100%;

	position: relative;

}



.video .list .pic img.videos {

	width: 100%;

	display: block;

}



.video .list .pic img.play {

	width: 100%;

	display: block;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	width: 3rem;

}



.video .list .name {

	font-size: 1.1rem;

	color: rgba(51,51,51,1);

	line-height: 1.5;

	width: 100%;

	background: #fff;

	padding: 1rem 2rem;

	box-sizing: border-box;

}



.pop {

	position: fixed;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	width: 50%;

	z-index: 3;

	display: none

}



.pop .close {

	text-align: center;

	color: #fff;

	width: 3.5rem;

	margin: 0 auto;

}



.pop .close img {

	width: 100%;

}



video {

	width: 100%;

	height: auto;

	cursor: pointer;

}



.mask {

	position: fixed;

	width: 100%;

	height: 100%;

	background: rgba(0,0,0,.8);

	top: 0;

	left: 0;

	z-index: 3;

	display: none

}



.pops1,.pops1-1,.pops1-2 {

	display: none

}



.pops {

	position: fixed;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	width: 90%;

	z-index: 3;

}



.pops .bigpic {

	width: 100%;

}



.pops .bigpic img {

	width: 100%;

}



.pops .contents {

	position: absolute;

	top: 46%;

	left: 50%;

	transform: translate(-50%,-50%);

	width: 80%;

	height: 75%;

	overflow-y:auto;

	overflow-x:hidden;

	color: #fff;

}





.pops .contents .text {

	width: 100%;

	

}



.pops .contents .text .title {

	font-size: 1.8rem;

	color: #ADCC31

}



.pops .contents .text .wz {

	color: #fff;

	font-size: 0.8rem;

	margin: 1.6rem 0;

}



.pops .contents .text .xpic {

	width: 100%;

	overflow: hidden;

}



.pops .contents .text .xpic img {

	width: 31.333%;

	display: block;

	margin-right: 3%;

	float: left;

}



.pops .contents .text .xpic img:last-child {

	margin-right: 0

}



.swiper-button-next, .swiper-button-prev {

	position: static;

	margin-top: 20px;

	height: 3rem;

	float: left;

	margin-right: 30px;

}



.pops .swiper-button-next {

	background: url(../images/next1.png) no-repeat center;

	background-size: 100%;

	width: 5rem;

	float: right;

	margin-right: 1rem;

}



.pops .swiper-button-prev {

	background: url(../images/prev1.png) no-repeat center;

	background-size: 100%;

	width: 5rem;

	float: left;

	margin-left: 1rem;

}



.btn {

	background: rgba(0,26,54,1);

	width: 14rem;

	margin: 0 auto;

	margin-top: 2rem;

	height: 3rem;

	line-height: 3rem;

	border-radius: 50px;

	position: relative;

}



.btn:after {

	position: absolute;

	left: 50%;

	top: 0.7rem;

	height: 1.6rem;

	background: rgba(255,255,255,.1);

	;width: 1px;

	content: '';

	display: block;

}



.close1 {

	width: 3rem;

	position: absolute;

	top: 4%;

	right: 4%

}



.close1 img {

	width: 100%;

}

.close2 {

	width: 3rem;

	position: absolute;

	top: 4%;

	right: 4%

}



.close2 img {

	width: 100%;

}

.pops .contents .bigtitle {

	color: rgba(173,204,49,1);

	font-size: 1.6rem;

	margin-bottom: 2rem;

}



.pops .contents .bt {

	margin-bottom: 2rem;

}



.pops2{ width:50%; }



.pops .contents li {

	float: left;

	width: 8rem;

	color: #fff;

	font-size: 1.2rem;

}



.pops .contents li dd {

	border: 1px solid rgba(7,75,148,1);

	height: 2.5rem;

	width: 8rem;

	text-align: center;

	line-height: 2.5rem;

	margin-top: 1rem;

	box-sizing: border-box;

	font-size: 1rem;

}

.pops .contents li:nth-child(2){ margin-left: calc(50% - 12rem) }

.pops .contents li:last-child{ float: right; }

.pops .contents li dd.on {

	background-image: radial-gradient(#009CCC, #0F4D73, #012B54);

}



.pops2 {

	display: none

}

.pops3,.pops4,.pops5,.pops6,.pops7,.pops8,.pops9 {

	display: none

}

.pops .contents .xtname{font-size: 1.8rem;color: #ADCC31; margin-bottom: .6rem;}

canvas {

	display: block;

}



.waves {

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

}

#particles-js {

	width: 100%;

	height: 65%;

	background-color: rgb(9, 33, 57);

	background-size: cover;

	background-position: 50% 50%;

	background-repeat: no-repeat;

	position: absolute;

}

.icon{position: relative;

	color: #fff;}

.icon .ss{

	width: 10rem;

	height: 10rem;

	position: relative;

	color: #fff;

}

.icon p{ font-size: 1.2rem; text-align: center;  width: 100%;letter-spacing: 2px; margin-top: .6rem;color: #fff;}

.icon img {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

}



.icon1 img.img2 {

	animation: Tada1 9s infinite;

}



.icon1 img.img3 {

	animation: Tada2 9s infinite;

}



@keyframes Tada1 {

  

	0% {

		transform: rotate(0);

	}



	16% {

		transform:rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada2 {

  

	0% {

		transform: rotate(0);

	}



	16% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon2 img.img2 {

	animation: Tada3 9s infinite

}



.icon2 img.img3 {

	animation: Tada4 9s infinite;

}



@keyframes Tada3 {

  



	16% {

		transform: rotate(0);

	}



	32% {

		transform: rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada4 {

  

	

	16% {

		transform: rotate(0);

	}



	32% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon3 img.img2 {

	animation: Tada5 9s infinite

}



.icon3 img.img3 {

	animation: Tada6 9s infinite;

}



@keyframes Tada5 {

  

	

	32% {

		transform: rotate(0);

	}



	48% {

		transform: rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada6 {

  

	

	32% {

		transform: rotate(0);

	}



	48% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon4 img.img2 {

	animation: Tada7 9s infinite

}



.icon4 img.img3 {

	animation: Tada8 9s infinite;

}



@keyframes Tada7 {

  

	

	48% {

		transform: rotate(0);

	}



	64% {

		transform: rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada8 {

  

	

	48% {

		transform: rotate(0);

	}



	64% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon5 img.img2 {

	animation: Tada9 9s infinite

}



.icon5 img.img3 {

	animation: Tada10 9s infinite;

}



@keyframes Tada9 {

  

	

	64% {

		transform: rotate(0);

	}



	80% {

		transform: rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada10 {

  

	

	64% {

		transform: rotate(0);

	}



	80% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon6 img.img2 {

	animation: Tada11 9s infinite

}



.icon6 img.img3 {

	animation: Tada12 9s infinite;

}



@keyframes Tada11 {

  

	

	80% {

		transform: rotate(0);

	}



	96% {

		transform: rotate(360deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



@keyframes Tada12 {

  

	80% {

		transform: rotate(0);

	}



	96% {

		transform: rotate(-360deg);

	}



	100% {

		transform: rotate(-360deg);

	}

}



.icon1{animation: scale1 9s infinite;}

@keyframes scale1 {

  

	0% {

		transform: scale(1); opacity: .8

	}



	16% {

		transform: scale(1.2); opacity: 1;

	}

	32% {

		transform: scale(1); opacity: .8;

	}



	100% {

		transform: scale(1); opacity: .8;

	}

}



.icon2{animation: scale2 9s infinite;}

@keyframes scale2 {

  

	16% {

		transform: scale(1);opacity: .8

	}



	32% {

		transform: scale(1.2);opacity: 1

	}

	48% {

		transform: scale(1);opacity: .8

	}



	100% {

		transform: scale(1);opacity: .8

	}

}



.icon3{animation: scale3 9s infinite;}

@keyframes scale3 {

  

	32% {

		transform: scale(1);opacity: .8

	}



	48% {

		transform: scale(1.2);opacity: 1

	}

	64% {

		transform: scale(1);opacity: .8

	}



	100% {

		transform: scale(1);opacity: .8

	}

}





.icon4{animation: scale4 9s infinite;}

@keyframes scale4 {

  

	48% {

		transform: scale(1);opacity: .8

	}



	64% {

		transform: scale(1.2);opacity: 1

	}

	



	100% {

		transform: scale(1);opacity: .8

	}

}



.icon5{animation: scale5 9s infinite;}

@keyframes scale5 {

  

	64% {

		transform: scale(1);opacity: .8

	}



	80% {

		transform: scale(1.2);opacity: 1

	}

	96% {

		transform: scale(1);opacity: .8

	}



	100% {

		transform: scale(1);

	}

}



.icon6{animation: scale6 9s infinite;}

@keyframes scale6 {

  

	80% {

		transform: scale(1);opacity: .8

	}



	96% {

		transform: scale(1.2);opacity: 1

	}

	



	100% {

		transform: scale(1);opacity: .8

	}

}



#can{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; }





.anniu{ margin-top: 1.6rem; }

.anniu button{ float: right;background:rgba(69,139,232,1); width:8rem; height: 2.5rem;line-height: 2.5rem;border-radius: 5px;border:none; margin-left: 1rem;color: #fff;font-size: 1.2rem; }





.bigimgs{ position: absolute; top: 0; width: 100%; height: 100%;left: 0; background:rgba(0,0,0,.3)}

.bigimg{position: absolute;top: 50%;left: 50%;margin-left: -30rem;margin-top: -30rem;width:60rem;height: 60rem;background:url(../images/home/big.png) no-repeat center;background-size:100%;animation: rotated 100s infinite;}



@keyframes rotated {

  

	0% {

		transform: rotate(0)

	}



	

	100% {

		transform: rotate(360deg);

	}

}







.icon1{ position: absolute; left:25%; top:60%; }

.icon2{ position: absolute; left:21%; top:33%; }

.icon3{ position: absolute; left:28%; top:10%; }





.icon6{ position: absolute; right:25%; top:60%; }

.icon5{ position: absolute; right:21%; top:33%; }

.icon4{ position: absolute; right:28%; top:10%; }







.logo{ position: absolute;top: 47%;left: 50%; transform: translate(-50%,-50%);color: #ADCC31;z-index: 9999;text-align: center;}

.logo p{ font-size: 2.6rem;letter-spacing: .2rem; }

.logo img{ width: 13rem;margin-bottom: 2rem; }



.f{position: absolute;top: 11%;left: 65%;width: 2rem;}

.f img{width: 100%;opacity: .7;display: block;transform: rotate(20deg);}





.f1{position: absolute;top: 12%;left: 55.4%;width: 2rem;}

.f1 img{width: 100%;opacity: .7;display: block;transform: rotate(-160deg);}



.fg1{position: absolute;top: 8%;left: 1%;width: 10%;height: 30%; cursor: pointer;}

.fg2{position: absolute;top: 49%;left: 0%;width: 11%;height: 35%;cursor: pointer;}

.fg3{position: absolute;top: 5%;left: 22%;width:2%;height: 3%; cursor: pointer;}

.fg4{position: absolute;top: 23%;left: 16%;width: 11%;height: 9%; cursor: pointer;}

.fg5{position: absolute;top: 4.5%;left: 32.5%;width: 2.5%;height: 5%;cursor: pointer;}

.fg6{position: absolute;top: 47%;left: 33%;width: 4%;height: 16%;cursor: pointer;}

.fg7{position: absolute;top: 4%;left: 37%;width: 15%;height: 7%;cursor: pointer;}

.fg8{position: absolute;top: 3%;left: 53%;width: 9%;height: 8%;cursor: pointer;}

.fg9{position: absolute;top: 21%;left: 53%;width: 7%;height: 12%;cursor: pointer;}

.fg10{position: absolute;top: 60%;left: 47%;width: 3%;height: 4%;cursor: pointer;}

.fg11{position: absolute;top: 60%;left: 42%;width: 4%;height: 9%;cursor: pointer;}

.fg12{position: absolute;top: 2%;left: 64.2%;width: 4%;height: 8%;cursor: pointer;}

.fg13{position: absolute;top: 62%;left: 55.7%;width: 6%;height: 31%;cursor: pointer;}

.fg14{position: absolute;top: 18%;left: 81.7%;width: 8%;height: 8%;cursor: pointer;}

.fg15{position: absolute;top: 30.6%;left: 82.4%;width: 17%;height: 32.4%;cursor: pointer;}

.fg16{position: absolute;top: 39.6%;left: 73.4%;width: 2%;height: 3.4%;cursor: pointer;}

.fg17{position: absolute;top: 39.6%;left: 76.4%;width: 2%;height: 3.4%;cursor: pointer;}

.fg18{position: absolute;top: 48.6%;left: 75.1%;width: 6%;height: 6.4%;cursor: pointer;}

.fg19{position: absolute;
    top: 30.6%;
    left: 77.4%;
    width: 1.4%;
    height: 5.4%;
    cursor: pointer;}


.picnew{ width: 100% }
.picnew img{ width: 100% }
.menus a{    margin: 0 1.2rem;}

.bar{
	margin-top: 1.5rem;




	font-weight: 400;




	display: table;
	position: relative;
	z-index: 9999
}

.bar a{ display:inline-block; width:100px; height: 35px; line-height: 35px; color: #fff; margin:15px auto;background: url(../images/about.png); background-size: 100% 100%; text-align: center; margin-right: 15px}



















































#persons {

  position: relative;

  width: 100%;

  margin: 0 auto;

  margin-top: 10rem;

}





#persons .swiper-slide {

  width: 30rem;

  text-align: center;

}



#persons .swiper-slide img {

width: 100%;

}

#persons .text .p1 {

	font-weight: 400;

	font-size: 1rem;

	color: rgba(255,255,255,1);

	margin-top: 1.5rem;

	opacity: 0

}



#persons .text .p2 {

	font-weight: 400;

	font-size: .8rem;

	color: rgba(173,204,49,1);

	margin-top: .8rem;

	opacity: 0

}

#persons .swiper-slide-active .text .p2 {opacity: 1;}

#persons .swiper-slide-active .text .p1 {opacity: 1;}


.content .te .items{ display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; }
.content .te .item{ width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }



.content .te .item  img{ width: 100%;float: none }

.content .te .item  p{ float: none ; margin-bottom: 1.5rem; text-align: center;}



.popspzb{ width: 75%;display: none }
.popspzb .contents{ width: 90%;    transform: translate(-50%,-44%); }