@charset "utf-8";

.htmlbg {width:100%; height:900px; position:absolute; top:0; left:0; z-index: 0;  overflow: hidden; }
.htmlbg .htmlbgif {width:100%; } 
.main_line{position:absolute;z-index: 6;top:0;left:0;width:100%;height:100%;}
.main_l1{position:absolute;top:50%;left:50%;background:#ccc;margin:-180px 0 0 198px;width:200px;height:1px;}
.main_l2{position:absolute;top:50%;left:50%;background:#ccc;margin:-215px 0 0 155px;width:80px;height:1px;}
.main_l3{position:absolute;top:50%;left:50%;background:#ccc;margin:-147px 0 0 226px;width:60px;height:1px;}
.main_l4{position:absolute;top:50%;left:50%;background:#ccc;margin:200px 0 0 -180px;width:220px;height:1px;}
.main_l5{position:absolute;top:50%;left:50%;background:#ccc;margin:160px 0 0 -218px;width:100px;height:1px;}
.main_l6{position:absolute;top:50%;left:50%;background:#ccc;margin:224px 0 0 -143px;width:70px;height:1px;}
.main_line2{position:absolute;z-index: 6;top:50%;left:50%;margin:-400px 0 0 -400px;width:800px;height:800px;border-left: 1px solid rgba(255,255,255,.5);border-right: 1px solid rgba(255,255,255,.5);
	border-bottom: 1px solid rgba(255,255,255,.2);border-top: 1px solid rgba(255,255,255,.2);border-radius: 100%;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);}

.main_la{position:absolute;top:50%;left:50%;background:#fff;margin:0 0 0 -550px;width:200px;height:1px;opacity:.5;}
.main_lb{position:absolute;top:50%;left:50%;background:#fff;margin:0 0 0 350px;width:200px;height:1px;opacity:.5;}
.main_ld1{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 -502px;width:4px;height:4px;border-radius: 100%;opacity:.5;}
.main_ld2{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 498px;width:4px;height:4px;border-radius: 100%;opacity:.5;}
.main_ld3{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 -401px;width:4px;height:4px;border-radius: 100%;opacity:.5;}
.main_ld4{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 399px;width:4px;height:4px;border-radius: 100%;opacity:.5;}

.main_lr{position:absolute;top:50%;left:50%;background:rgba(0,10,50,.05);margin:-300px 0 0 -300px; width:600px; height:600px; border-left: 1px solid rgba(255,255,255,.5);border-right: 1px solid rgba(255,255,255,.5);border-bottom: 1px solid rgba(255,255,255,.2);border-top: 1px solid rgba(255,255,255,.2);border-radius: 100%;}

.maincanvas{height: 100%;  position: absolute;  width: 100%; z-index: 5;opacity:.5;}
.bancanvas {height: 100%;  position: absolute;  width: 100%; z-index: 9;opacity:1;}
canvas{display:block;vertical-align:bottom; }
#particles-js{max-width:1920px;	height:900px;}

/*背景遮罩层*/
.mainzz1{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity: .5;}
.mainzz2{ background: rgba(0, 0, 0, 0) url(../images/bg_main_wl1.png) repeat scroll center 0;opacity: 0.06; min-width: 100%;min-height: 100%;width:auto;height:auto;position:absolute; z-index: 4;}
.mainzz3 { background: rgba(0, 0, 0, 0) url(../images/bg_main_wl2.png) repeat scroll center 0;opacity: 0.03; min-width: 100%;min-height: 100%;width:auto;height:auto;position:absolute; z-index: 3;}

.ivideo video{position:absolute;z-index:1;left:50%;top:50%;min-width:100%;min-height:100%;width:auto;height:auto;-webkit-transform:translate(-50.01%,-50.01%);-moz-transform:translate(-50.01%,-50.01%);-ms-transform:translate(-50.01%,-50.01%);-o-transform:translate(-50.01%,-50.01%);transform:translate(-50.01%,-50.01%);}
#container {position:absolute;z-index:1;left:50%;top:50%;min-width:100%;min-height:100%;width:auto;height:auto;-webkit-transform:translate(-50.01%,-50.01%);-moz-transform:translate(-50.01%,-50.01%);-ms-transform:translate(-50.01%,-50.01%);-o-transform:translate(-50.01%,-50.01%);transform:translate(-50.01%,-50.01%);}
.scroll{position: absolute;z-index: 6;bottom: 5%;left:50%;margin:0 0 0 -15px;width:30px;height:30px;animation:scrollmove ease-out 2s infinite ;-webkit-animation:scrollmove ease-out 2s infinite;-moz-animation:scrollmove ease-out 2s infinite; 
	-o-animation:scrollmove ease-out 2s infinite;}
@keyframes scrollmove{from {bottom:6%;opacity:0;}50%{bottom:5%;opacity:1;}to {bottom:2%;opacity:0;}}
@-moz-keyframes scrollmove /* Firefox */{from {bottom:6%;opacity:0;}50%{bottom:5%;opacity:1;}to {bottom:2%;opacity:0;}}
@-webkit-keyframes scrollmove /*Safari and Chrome*/{from {bottom:6%;opacity:0;}50%{bottom:5%;opacity:1;}to {bottom:2%;opacity:0;}}
@-o-keyframes scrollmove {from {bottom:6%;opacity:0;}50%{bottom:5%;opacity:1;}to {bottom:2%;opacity:0;}}
/*斜线动画*/
.main_l1{
	transform: rotate(-45deg);
	transform-origin:0 0;
	-ms-transform: rotate(-45deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(-45deg);
	-o-transform-origin:0 0;
	animation:line1move 1.5s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line1move 1.5s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line1move 1.5s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line1move 1.5s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line1move{from {width:200px;}to {width:0px;}}
@-webkit-keyframes line1move{from {width:200px;}to {width:0px;}}
@-moz-keyframes line1move{from {width:200px;}to {width:0px;}}
@-o-keyframes line1move{from {width:200px;}to {width:0px;}}
.main_l2{
	transform: rotate(-45deg);
	transform-origin:0 0;
	-ms-transform: rotate(-45deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(-45deg);
	-o-transform-origin:0 0;
	animation:line2move 1.2s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line2move 1.2s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line2move 1.2s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line2move 1.2s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line2move{from{width:80px;}to{width:0px;}}
@-webkit-keyframes line2move{from {width:80px;}to {width:0px;}}
@-moz-keyframes line2move{from {width:80px;}to {width:0px;}}
@-o-keyframes line2move{from {width:80px;}to {width:0px;}}
.main_l3{
	transform: rotate(-45deg);
	transform-origin:0 0;
	-ms-transform: rotate(-45deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(-45deg);
	-o-transform-origin:0 0;
	animation:line3move 1s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line3move 1s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line3move 1s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line3move 1s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line3move{from{width:60px;}to{width:0px;}}
@-webkit-keyframes line3move{from {width:60px;}to {width:0px;}}
@-moz-keyframes line3move{from {width:60px;}to {width:0px;}}
@-o-keyframes line3move{from {width:60px;}to {width:0px;}}
.main_l4{
	transform: rotate(135deg);
	transform-origin:0 0;
	-ms-transform: rotate(135deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(135deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(135deg);
	-o-transform-origin:0 0;
	animation:line4move 1.5s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line4move 1.5s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line4move 1.5s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line4move 1.5s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line4move{from{width:0px;}to{width:220px;}}
@-webkit-keyframes line4move{from {width:0px;}to {width:200px;}}
@-moz-keyframes line4move{from {width:0px;}to {width:200px;}}
@-o-keyframes line4move{from {width:0px;}to {width:200px;}}
.main_l5{
	transform: rotate(135deg);
	transform-origin:0 0;
	-ms-transform: rotate(135deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(135deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(135deg);
	-o-transform-origin:0 0;
	animation:line5move 1.2s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line5move 1.2s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line5move 1.2s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line5move 1.2s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line5move{	from{width:0px;}	to{width:100px;}}
@-webkit-keyframes line5move{	from {width:0px;}to {width:100px;}}
@-moz-keyframes line5move{from {width:0px;}to {width:100px;}}
@-o-keyframes line5move{from {width:0px;}	to {width:100px;}}

.main_l6{
	transform: rotate(135deg);
	transform-origin:0 0;
	-ms-transform: rotate(135deg);
	-ms-transform-origin:0 0;
	-webkit-transform: rotate(135deg);
	-webkit-transform-origin:0 0;
	-o-transform: rotate(135deg);
	-o-transform-origin:0 0;
	animation:line6move 1s infinite alternate;
	animation-delay:3s;
	-webkit-animation:line6move 1s infinite alternate;
	-webkit-animation-delay:3s;
	-moz-animation:line6move 1s infinite alternate;
	-moz-animation-delay:3s;
	-o-animation:line6move 1s infinite alternate;
	-o-animation-delay:3s;
}
@keyframes line6move{from{width:0px;}to{width:70px;}}
@-webkit-keyframes line6move{from {width:0px;}	to {width:70px;}}
@-moz-keyframes line6move{from {width:0px;}	to {width:70px;}}
@-o-keyframes line6move{from {width:0px;}to {width:70px;}}

/*正奂旋转层*/
.mainxza{margin:0 0 0 10%;width:80%;height:100%;display: table;overflow: hidden;position: absolute;z-index: 6;}
.mainxzb{margin:0 0 0 10%;width:80%;height:100%;display: table;overflow: hidden;position: absolute;z-index: 6;}
.mainxz1 img{max-width:500px;max-height:500px;width:100%;}
.mainxz2 img{max-width:500px;max-height:500px;width:100%;}
.mainxz1{display: table-cell;vertical-align: middle;width: 100%;margin:0 auto;text-align: center;}
.mainxz2{display: table-cell;vertical-align: middle;width: 100%;margin:0 auto;text-align: center;}

.mainxz1 img{
	animation: mainzx1 120s infinite linear;
	-webkit-animation:mainzx1 120s infinite linear;
	-moz-animation:mainzx1 120s infinite linear;
	-o-animation:mainzx1 120s infinite linear;
}
@-webkit-keyframes mainzx1 { from {	-webkit-transform: rotate(0deg)}to {	-webkit-transform: rotate(359deg)}}
@-moz-keyframes mainzx1 { from {	-moz-transform: rotate(0deg)}to {	-moz-transform: rotate(359deg)}}
@-o-keyframes mainzx1 {from {	-o-transform: rotate(0deg)}to {	-o-transform: rotate(359deg)}}
@keyframes mainzx1 { from {	transform: rotate(0deg)}to {	transform: rotate(359deg)}}

.mainxz2 img{
	animation: mainzx2 60s infinite linear;
	-webkit-animation:mainzx2 60s infinite linear;
	-moz-animation:mainzx2 60s infinite linear;
	-o-animation:mainzx2 60s infinite linear;
}
@-webkit-keyframes mainzx2 {from {-webkit-transform: rotate(0deg)}to {	-webkit-transform: rotate(-359deg)}}
@-moz-keyframes mainzx2 { from {	-moz-transform: rotate(0deg)}to {	-moz-transform: rotate(-359deg)}}
@-o-keyframes mainzx2 { from {	-o-transform: rotate(0deg)}to {	-o-transform: rotate(-359deg)}}
@keyframes mainzx2 {from {	transform: rotate(0deg)}to {	transform: rotate(-359deg)}}

.main_line2{
	-webkit-animation: main_line2xz 8s infinite alternate;
	-moz-animation: main_line2xz 8s infinite alternate;
	-o-animation: main_line2xz 8s infinite alternate;
	animation: main_line2xz 8s infinite alternate;
}

@-webkit-keyframes main_line2xz {from {-webkit-transform: rotate(90deg)}to {	-webkit-transform: rotate(0deg)}}
@-moz-keyframes main_line2xz { from {	-moz-transform: rotate(90deg)}to {	-moz-transform: rotate(0deg)}}
@-o-keyframes main_line2xz { from {	-o-transform: rotate(90deg)}to {	-o-transform: rotate(0deg)}}
@keyframes main_line2xz {from {transform: rotate(90deg)}to {	transform: rotate(0deg)}}