@charset "UTF-8";
/* display css: ht-height wt-width*/
.wtl{float:left;border-radius:10px;}
.wtc{margin:0 auto;border-radius:10px;}
.wtr{float:right;border-radius:10px;}
.wt{width:100%;border-radius:10px;text-align:center;}
.ht{height:100%;border-radius:10px;text-align:center;}
.wt2{width:2%;}.wt4{width:4%;}.wt8{width:8%;}.wt12{width:12%;}
.ht2{height:2%;}.ht4{height:4%;}.ht8{height:8%;}.ht12{height:12%;}
.wt5{width:5%;}.wt10{width:10%;}.wt20{width:20%;}.wt30{width:30%;}.wt40{width:40%;}
.wt50{width:50%;}.wt60{width:60%;}.wt70{width:70%;}.wt80{width:80%;}.wt90{width:90%;}
.wt16{width:16%;}.wt25{width:25%;}.wt32{width:32%;}.wt48{width:48%;}.wt96{width:96%;}
.ht5{height:5%;}.ht10{height:10%;}.ht20{height:20%;}.ht30{height:30%;}.ht40{height:40%;}
.ht50{height:50%;}.ht60{height:60%;}.ht70{height:70%;}.ht80{height:80%;}.ht90{height:90%;}
.ht16{height:16%;}.ht25{height:25%;}.ht32{height:32%;}.ht48{height:48%;}.ht96{height:96%;}
.bg1{background:url(bg1.png);}.bg2{background:url(bg2.png);}.bg3{background:url(bg3.png);}
.bg4{background:url(bg4.png);}.bg5{background:url(bg5.png);}.bg6{background:url(bg6.png);}
.mgl5{margin-left:5%;}.mgl8{margin-left:8%;}.mgl12{margin-left:12%;}
.mgr5{margin-right:5%;}.mgr8{margin-right:8%;}.mgr12{margin-right:12%;}
.flexc{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;
		display:-moz-box;-moz-box-orient:vertical;-webkit-box-pack:center;
		display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-pack:center;
		display:-webkit-flex;-webkit-flex-direction:column;display:flex;flex-direction:column;
		-webkit-justify-content:center;justify-content:center;}
.flexr{ display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-pack:center;
		display:-moz-box;-moz-box-orient:horizontal;-webkit-box-pack:center;
		display:-ms-flexbox;-ms-flex-direction:row;-ms-flex-pack:center;
		display:-webkit-flex;-webkit-flex-direction:row;display:flex;flex-direction:row;
		-webkit-justify-content:center;justify-content:center;}
/*show content*/
.page h3{font-size:1.5em;height:1.5em;line-height:1.5em;font-weight:bolder;color:rgb(34, 88, 1);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.page p{font-size:14px;line-height:24px;height:24px;overflow:hidden;color:white;text-align:center;}
.page ul{text-align:center;color:red;}
.page ul li{font-size:14px;line-height:28px;height:28px;text-align:left;color:rgb(34, 88, 1);list-style:disc inside;overflow:hidden;}
.man{background-position:center;background-size:contain;background-repeat:no-repeat;}
.m1{background-image:url(../pic/m1.png);}.m2{background-image:url(../pic/m2.png);}
.w1{background-image:url(../pic/w1.png);}.w2{background-image:url(../pic/w2.png);}
/* last page */
#lastpage h3{height:40px;line-height:40px;width:80%;margin:0 auto;border-bottom:2px solid rgb(34, 88, 1);}
#lastpage p{font-size:14px;line-height:22px;color:rgb(34, 88, 1);}
#lastpage .pic{width:200px;height:200px;margin:1.2em auto;background:url(NetXXBJ.jpg) no-repeat center;background-size:contain;border-radius:20px;border-color:rgb(34, 88, 1);}
/* 自定义动画START .active #tag/.active .class,必须加.active确保每次播放 */
.active .page .flexc,.active .page .flexr{-webkit-animation:zoomIn 1s ease 0s 1 both;animation:zoomIn 1s ease 0s 1 both;}
.active #page5 .man{-webkit-animation:bounce 1s 1s,flash 1s 3s,pulse 1s 5s,rubberBand 1s 7s,shake 1s 9s,swing 1s 11s,tada 1s 13s,wobble 1s 15s;
							animation:bounce 1s 1s,flash 1s 3s,pulse 1s 5s,rubberBand 1s 7s,shake 1s 9s,swing 1s 11s,tada 1s 13s,wobble 1s 15s;}
.active #page6 .man{-webkit-animation:flip 1s 1s,flipInX 1s 3s,flipInY 1s 5s,hinge 1s 7s,rollIn 1s 9s,rollOut 1s 11s,lightSpeedIn 1s 13s,lightSpeedOut 1s 15s;
							animation:flip 1s 1s,flipInX 1s 3s,flipInY 1s 5s,hinge 1s 7s,rollIn 1s 9s,rollOut 1s 11s,lightSpeedIn 1s 13s,lightSpeedOut 1s 15s;}
.active #page7 .man{-webkit-animation:zoomIn 1s 1s,zoomInDown 1s 3s,zoomInLeft 1s 5s,zoomInRight 1s 7s,zoomInUp 1s 9s;
							animation:zoomIn 1s 1s,zoomInDown 1s 3s,zoomInLeft 1s 5s,zoomInRight 1s 7s,zoomInUp 1s 9s;}
.active #page8 .man{-webkit-animation:fadeIn 1s 1s,fadeInDown 1s 3s,fadeInLeft 1s 5s,fadeInRight 1s 7s,fadeInUp 1s 9s;
							animation:fadeIn 1s 1s,fadeInDown 1s 3s,fadeInLeft 1s 5s,fadeInRight 1s 7s,fadeInUp 1s 9s;}
.active #page9 .man{-webkit-animation:bounceIn 1s 1s,bounceInDown 1s 3s,bounceInLeft 1s 5s,bounceInRight 1s 7s,bounceInUp 1s 9s;
							animation:bounceIn 1s 1s,bounceInDown 1s 3s,bounceInLeft 1s 5s,bounceInRight 1s 7s,bounceInUp 1s 9s;}
.active #page10 .man{-webkit-animation:rotateIn 1s 1s,rotateInDownLeft 1s 3s,rotateInDownRight 1s 5s,rotateInUpLeft 1s 7s,rotateInUpRight 1s 9s;
							animation:rotateIn 1s 1s,rotateInDownLeft 1s 3s,rotateInDownRight 1s 5s,rotateInUpLeft 1s 7s,rotateInUpRight 1s 9s;}
/* 自定义动画END .active #tag/.active .class,必须加.active确保每次播放 */