.page-con-lan{background-color:#50739D;}
.page-con-lu{background-color:#8FB659;}
.page-con-lu2{background-color:#8B9F40}
.page-con-huang{background-color:#E5BC53;}
.page-con-huang2{background-color:#FEFFEF;}
.page-con-hong{background-color:#9D706B;}
.page-con-cneng{background-color:#E9A151;}

.myjoin{margin:-126px 0 0 5px;top:50%;width:auto;position:fixed; z-index:100; cursor:pointer;}
.myjoin{-webkit-animation:dicanzhang 5s infinite ease-in-out;}
.myjoin1{ margin-top:0px;}
.myjoin2{ margin-top:18px;}

.texiao0{-webkit-animation:diyizhang 1s linear;}
.texiao0{ position: absolute;top:16%;width:100%;text-align:center;}

.texiao1{-webkit-animation:dierzhang 1s linear;-moz-animation:dierzhang 1s linear;}
.texiao1{position: absolute; bottom:10%; width:100%; text-align:center;}

.texiao2{-webkit-animation:disanzhang 1s linear;-moz-animation:dierzhang 1s linear;}
.texiao2{position: absolute; bottom:10%; width:100%; text-align:center;}

.texiao3{-webkit-animation:diaanzhang 1s infinite ease-in-out;}
.texiao3{position: absolute; top:0%; width:100%; left:0%; text-align:center;}

.texiao4{-webkit-animation:dibanzhang 1s infinite ease-in-out;}
.texiao4{position: absolute; top:0%; width:100%; left:0%; text-align:center;}

.texiao5{-webkit-animation:diliuzhang 1s linear;-webkit-transition:diliuzhang .7s linear;}
.texiao5{position: absolute; top:9%; width:100%; left:9%; text-align: left}

.texiao6{-webkit-animation:diqizhang 1s linear;-webkit-transition:diqizhang .7s linear;}
.texiao6{position: absolute; bottom:11%; width:100%; right:8%; text-align: right}

.texiao7{-webkit-animation:dibazhang 1s linear;-webkit-transition:dibazhang .7s linear;}
.texiao7{position: absolute; bottom:7%; width:100%; left:6%; text-align: left}

.texiao8{-webkit-animation:dijiuzhang 1s linear;-webkit-transition:dijiuzhang .7s linear;}
.texiao8{position: absolute; bottom:7%; width:100%; right:8%; text-align: right}

.texiao9{-webkit-animation:dishiuzhang 1s linear;-webkit-transition:dishiuzhang .7s linear;}
.texiao9{position: absolute; top:46%; width:100%; text-align: center}

.texiao10{-webkit-animation:dishiyizhang 1s linear;-webkit-transition:dishiyizhang .7s linear;}
.texiao10{position: absolute; bottom:15%; width:100%; right:8%; text-align: right}

.texiao11{-webkit-animation:dishierzhang 1s linear;-webkit-transition:dishierzhang .7s linear;}
.texiao11{position: absolute; top:5%; width:100%; left:7%; text-align: left}

.texiao12{-webkit-animation:dishisanzhang 1s linear;-webkit-transition:dishisanzhang .7s linear;}
.texiao12{position: absolute; width:100%; left:6%; text-align: left}

.texiao13{-webkit-animation:dishisizhang 1s linear;-webkit-transition:dishisizhang .7s linear;}
.texiao13{position: absolute; bottom:11%; width:100%; left:9%; text-align: left}

.texiao14{-webkit-animation:dishiwuzhang 1s linear;-webkit-transition:dishiwuzhang .7s linear;}
.texiao14{position: absolute; top:5%; width:100%; left:7%; text-align: left}

.texiao15{-webkit-animation:dishiliuzhang 1s linear;-webkit-transition:dishiliuzhang .7s linear;}
.texiao15{position: absolute; top:9%; width:100%; left:9%; text-align: left}

.texiao16{-webkit-animation:dishiqizhang 1s linear;-webkit-transition:dishiqizhang .7s linear;}
.texiao16{position: absolute; bottom:13%; width:100%; right:8%; text-align: right}

.texiao17{-webkit-animation:dishibazhang 1s linear;-webkit-transition:dishibazhang .7s linear;}
.texiao17{position: absolute; top:11%; width:100%; right:8%; text-align: right}

.texiao18{-webkit-animation:dishijiuzhang 1s linear;-webkit-transition:dishijiuzhang .7s linear;}
.texiao18{position: absolute; top:44%; width:100%; left:10%; text-align: left}

.texiao21{-webkit-animation:diershiyizhang 1s linear;-webkit-transition:diershiyizhang 1s linear;}
.texiao21{position: absolute; top:7%; width:100%; text-align: center;}

.texiao21_1{-webkit-animation:diershierzhang 2s linear;-webkit-transition:diershierzhang 2s linear;}
.texiao21_1{position: absolute; bottom:10%; width:100%; text-align: center}

.texiao23{-webkit-animation:diershiyizhang 1s linear;-webkit-transition:diershiyizhang 1s linear;}
.texiao23{position: absolute; top:27%; width:100%; text-align: center;}

.texiao24{-webkit-animation:diershiyizhang 1s linear;-webkit-transition:diershiyizhang 1s linear;}
.texiao24{position: absolute; bottom:18%; width:100%; text-align: center;}

.texiao22{-webkit-animation:diershisan 1s linear;-webkit-transition:diershisan .7s linear;}
.texiao22{position: absolute; top:6%; width:100%; right:6%; text-align: right}

.texiao25{-webkit-animation:diershiwuz 1s linear;-webkit-transition:diershiwuz .7s linear;}
.texiao25{position: absolute; top:3%; width:100%; right:0%; text-align: right}

.texiao26{position: absolute; top:7%; width:100%; right:0%; text-align: center}
.texiao27{position: absolute; bottom:9%; width:100%; right:0%; text-align: center}



/* 第1页淡出-中间浮动 */
@-webkit-keyframes diyizhang{
0%{top:0%;opacity: 0;}
10% {top:5%;opacity: 0; }
50% {top:12%;opacity: 0; }
85% {top:15%;opacity: 0.7;}
100% {top:16%;opacity: 1;}
}	


/* 第2页淡出-从左到右隐现 */
@-webkit-keyframes dierzhang{
0%{left:-10%;opacity: 0;}
50% {left:-5%;opacity: 0; }
85% {left:1%;opacity: 1;}
100% {left:0%;opacity: 1;}
}



/* 第3页淡出-从右到左浮动 */
@-webkit-keyframes disanzhang{
0%{right:-10%;opacity: 0;}
50% {right:-5%;opacity: 0; }
85% {right:1%;opacity: 1;}
100% {right:0%;opacity: 1;}
}

@-webkit-keyframes diaanzhang{
0%{top:0%;}
50% {top:-3%;}
100% {top:0%;}
}

@-webkit-keyframes dibanzhang{
0%{opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}

@-webkit-keyframes dicanzhang{
0%{margin-top:-126px;}
90% {margin-top:-126px;}
91% {margin-top:-140px;}
92% {margin-top:-126px;}
93% {margin-top:-112px;}
94% {margin-top:-126px;}
95% {margin-top:-140px;}
96% {margin-top:-126px;}
97% {margin-top:-112px;}
98% {margin-top:-126px;}
99% {margin-top:-140px;}
100% {margin-top:-126px;}
}



/* 第4页淡出-从下到上浮动 */

@-webkit-keyframes disizhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:2%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:5%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:4%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第5页淡出-从左到右 */

@-webkit-keyframes diwuzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:5%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:11%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
}


/* 第6页淡出 */

@-webkit-keyframes diliuzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第7页淡出 */

@-webkit-keyframes diqizhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第8页淡出 */

@-webkit-keyframes dibazhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:7%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:6%;
opacity: 1; /*结尾状态 透明度为1*/
}
}




/* 第9页淡出 */

@-webkit-keyframes dijiuzhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第10页淡出 */

@-webkit-keyframes dishiuzhang{
 0%{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);opacity:0;}50%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);opacity:0.5;}100%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);opacity:1;}
}



/* 第11页淡出 */

@-webkit-keyframes dishiyizhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第12页淡出 */

@-webkit-keyframes dishierzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:7%;
opacity: 1; /*结尾状态 透明度为1*/
}
}




/* 第13页淡出 */

@-webkit-keyframes dishisanzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:7%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:6%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第14页淡出 */

@-webkit-keyframes dishisizhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第15页淡出 */

@-webkit-keyframes dishiwuzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:7%;
opacity: 1; /*结尾状态 透明度为1*/
}
}


/* 第16页淡出 */

@-webkit-keyframes dishiliuzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
}


/* 第17页淡出 */

@-webkit-keyframes dishiqizhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
}




/* 第18页淡出 */

@-webkit-keyframes dishibazhang{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:4%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:9%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:8%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第19页淡出 */

@-webkit-keyframes dishijiuzhang{
  0% {left:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {left:5%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {left:11%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {left:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第21页淡出 */

@-webkit-keyframes diershiyizhang{
 0%{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);opacity:0;}50%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);opacity:0.5;}100%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);opacity:1;}
}



/* 第21-1页淡出 */

@-webkit-keyframes diershierzhang{
  0% {bottom:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {bottom:5%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {bottom:11%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {bottom:10%;
opacity: 1; /*结尾状态 透明度为1*/
}
}



/* 第23页淡出 */

@-webkit-keyframes diershisan{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:3%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:7%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:6%;
opacity: 1; /*结尾状态 透明度为1*/
}
}


/* 第24页淡出 */

@-webkit-keyframes diershiyizhang{
 0%{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);opacity:0;}50%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);opacity:0.5;}100%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);opacity:1;}
}


/* 第25页淡出 */

@-webkit-keyframes diershiwuz{
  0% {right:0%;
opacity: 0; /*初始状态 透明度为0*/
}
  50% {right:0%;
opacity: 0; /*初始状态 透明度为0*/

}
85% {right:0%;
opacity: 1; /*结尾状态 透明度为1*/
}
100% {right:0%;
opacity: 1; /*结尾状态 透明度为1*/
}
}