body {
  background: #000;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../images/loading.gif') no-repeat 0 0;
  background-size: 100% 100%
}

.load_val {
  width: 100%;
}

.loading_line {
  position: absolute;
  width: 33.97%;
  height: 4px;
  top: 53.07%;
  left: 32.68%;
  background: #c29494;
}

.loading_line_blank {
  width: 0%;
  height: 100%;
  background: #ffefef;
}

/* 封面 */

.cover1 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/fengmian.jpg);
  background-size: 100% 100%;
  z-index: 999;
  pointer-events: none;transform-origin:0 0;cursor: move;
}
.cover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/fengmian.jpg);
  background-size: 100% 100%;
  z-index: 999;
}

.sign_btn {
  width: 34%;
  position: absolute;
  bottom: 9%;
  left: 33%;
  display: none;
}
.start_btn{
  width: 34%;
  position: absolute;
  bottom: 9%;
  left: 33%;
}
.fuceng{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: url(../images/p0.3.png);
  background-size: 100% 100%;
  display: none;
  z-index: 1000;
}
.title1{
  opacity: 1;
  position: absolute;
  width: 88%;
  height: 29.1%;
  top: 6%;
  left: 6%;
  background: url(../images/p0.4.png);
  background-size: 100% 100%;
  z-index: 1000;
}
.title1.active{
    animation:fadeOutBig 2s .5s linear both;
    -moz-animation:fadeOutBig 2s .5s linear both;
    -webkit-animation:fadeOutBig 2s .5s linear both;
    -o-animation:fadeOutBig 2s .5s linear both;
}
/* 视频 */

.video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.topindex {
  z-index: 100;
}

.lowindex {
  z-index: -100;
}

/* 习题 */

.topic {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
}

.kehou {
  background: url(../images/kehou.gif);
  background-size: 100% 100%;
}

.keqian .title {
  position: absolute;
  width: 61.8%;
  height: 11.4%;
  left: 19%;
  top: 7%;
}

/*.kehou .title {
  position: absolute;
  width: 81%;
  height: 12%;
  left: 9.5%;
  top: 12%;
}*/

.answer {
  position: absolute;
  width: 82.7%;
  height: 9.3%;
  left: 8.6%;
}

.answer i {
  position: absolute;
  width: 9.2%;
  height: 53%;
  top: 15%;
  right: 2%;
  display: none;
  background: url(../images/wrong.png);
  background-size: 100% 100%;
}

.kehou .answer_btn {
  position: absolute;
  background: url(../images/butten2.png);
  background-size: 100% 100%;
  width: 47.9%;
  height: 9.3%;
  top: 73.5%;
  left: 26%;
}

/* 团宝 */

.tuanbao {
  position: absolute;
  width: 34.65%;
  height: 22.5%;
  top: 78%;
  left: 69%;
  display: none;
  z-index: 10;
}

.tuanbao img {
  display: none;
  width: 100%;
  height: 100%;
}

/* 分享界面 */

.panel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/01.jpg);
  background-size: 100% 100%;
  display: none;
}

.panel_btn {
  position: absolute;
  width: 60%;
  height: 9%;
  left: 20.5%;
}

.panel_btn1 {
  top: 69%;
}

.panel_btn2 {
  top: 68%;
}

.backBtn {
  background: url(../images/back.png);
  position: absolute;
  right: 0;
  bottom: 4%;
  z-index: 20000;
  display: none;
  width: 21%;
  height: 5%;
  background-size: 100% 100%;
}

/* 课后题 */
#t1 .title {position: absolute;background: url(../images/p1.png);background-size: 100% 100%;width:90.5%;height: 18.1%;top: 4.5%;left: 5%}
#t1 .asw1 {background: url(../images/p1.1.png);background-size: 100% 100%;top: 25%;}
#t1 .asw2 {background: url(../images/p1.2.png);background-size: 100% 100%;top: 37%;}
#t1 .asw3 {background: url(../images/p1.3.png);background-size: 100% 100%;top: 49%;}
#t1 .asw4 {background: url(../images/p1.4.png);background-size: 100% 100%;top: 61%;}
#t1 .asw1.on {background: url(../images/p1.5.png);background-size: 100% 100%;top: 25%;}
#t1 .asw2.on {background: url(../images/p1.6.png);background-size: 100% 100%;top: 37%;}
#t1 .asw3.on {background: url(../images/p1.7.png);background-size: 100% 100%;top: 49%;}
#t1 .asw4.on {background: url(../images/p1.8.png);background-size: 100% 100%;top: 61%;}
#t1 .num {background: url(../images/120.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t2 .title {background: url(../images/p2.png);background-size: 100% 100%;position: absolute;width:83.5%;height: 17.4%;top: 4.5%;left: 8%;}
#t2 .asw1 {background: url(../images/p2.1.png);background-size: 100% 100%;top: 25%;}
#t2 .asw2 {background: url(../images/p2.2.png);background-size: 100% 100%;top: 37%;}
#t2 .asw3 {background: url(../images/p2.3.png);background-size: 100% 100%;top: 49%;}
#t2 .asw4 {background: url(../images/p2.4.png);background-size: 100% 100%;top: 61%;}
#t2 .asw1.on {background: url(../images/p2.5.png);background-size: 100% 100%;top: 25%;}
#t2 .asw2.on {background: url(../images/p2.6.png);background-size: 100% 100%;top: 37%;}
#t2 .asw3.on {background: url(../images/p2.7.png);background-size: 100% 100%;top: 49%;}
#t2 .asw4.on {background: url(../images/p2.8.png);background-size: 100% 100%;top: 61%;}
#t2 .num {background: url(../images/220.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t3 .title {background: url(../images/p3.png);background-size: 100% 100%;position: absolute;width:85.5%;height: 18.1%;top: 4.5%;left: 7%;}
#t3 .asw1 {background: url(../images/p3.1.png);background-size: 100% 100%;top: 25%;}
#t3 .asw2 {background: url(../images/p3.2.png);background-size: 100% 100%;top: 37%;}
#t3 .asw3 {background: url(../images/p3.3.png);background-size: 100% 100%;top: 49%;}
#t3 .asw4 {background: url(../images/p3.4.png);background-size: 100% 100%;top: 61%;}
#t3 .asw1.on {background: url(../images/p3.5.png);background-size: 100% 100%;top: 25%;}
#t3 .asw2.on {background: url(../images/p3.6.png);background-size: 100% 100%;top: 37%;}
#t3 .asw3.on {background: url(../images/p3.7.png);background-size: 100% 100%;top: 49%;}
#t3 .asw4.on {background: url(../images/p3.8.png);background-size: 100% 100%;top: 61%;}
#t3 .num {background: url(../images/320.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t4 .title {background: url(../images/p4.png);background-size: 100% 100%;position: absolute;width:90%;height: 10.3%;top: 8.5%;left: 5%;}
#t4 .asw1 {background: url(../images/p4.1.png);background-size: 100% 100%;top: 25%;}
#t4 .asw2 {background: url(../images/p4.2.png);background-size: 100% 100%;top: 37%;}
#t4 .asw3 {background: url(../images/p4.3.png);background-size: 100% 100%;top: 49%;}
#t4 .asw4 {background: url(../images/p4.4.png);background-size: 100% 100%;top: 61%;}
#t4 .asw1.on {background: url(../images/p4.5.png);background-size: 100% 100%;top: 25%;}
#t4 .asw2.on {background: url(../images/p4.6.png);background-size: 100% 100%;top: 37%;}
#t4 .asw3.on {background: url(../images/p4.7.png);background-size: 100% 100%;top: 49%;}
#t4 .asw4.on {background: url(../images/p4.8.png);background-size: 100% 100%;top: 61%;}
#t4 .num {background: url(../images/420.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t5 .title {background: url(../images/p5.png);background-size: 100% 100%;position: absolute;width:88.7%;height: 17.7%;top: 4.5%;left: 5.5%;}
#t5 .asw1 {background: url(../images/p5.1.png);background-size: 100% 100%;top: 25%;}
#t5 .asw2 {background: url(../images/p5.2.png);background-size: 100% 100%;top: 37%;}
#t5 .asw3 {background: url(../images/p5.3.png);background-size: 100% 100%;top: 49%;}
#t5 .asw4 {background: url(../images/p5.4.png);background-size: 100% 100%;top: 61%;}
#t5 .asw1.on {background: url(../images/p5.5.png);background-size: 100% 100%;top: 25%;}
#t5 .asw2.on {background: url(../images/p5.6.png);background-size: 100% 100%;top: 37%;}
#t5 .asw3.on {background: url(../images/p5.7.png);background-size: 100% 100%;top: 49%;}
#t5 .asw4.on {background: url(../images/p5.8.png);background-size: 100% 100%;top: 61%;}
#t5 .num {background: url(../images/520.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t6 .title {background: url(../images/p18.png);background-size: 100% 100%;position: absolute;width:100%;height: 16.4%;top: 5.5%;left: 0%;}
#t6 .asw1 {background: url(../images/p18.1.png);background-size: 100% 100%;top: 25%;}
#t6 .asw2 {background: url(../images/p18.2.png);background-size: 100% 100%;top: 37%;}
#t6 .asw3 {background: url(../images/p18.3.png);background-size: 100% 100%;top: 49%;}
#t6 .asw4 {background: url(../images/p18.4.png);background-size: 100% 100%;top: 61%;}
#t6 .asw1.on {background: url(../images/p18.5.png);background-size: 100% 100%;top: 25%;}
#t6 .asw2.on {background: url(../images/p18.6.png);background-size: 100% 100%;top: 37%;}
#t6 .asw3.on {background: url(../images/p18.7.png);background-size: 100% 100%;top: 49%;}
#t6 .asw4.on {background: url(../images/p18.8.png);background-size: 100% 100%;top: 61%;}
#t6 .num {background: url(../images/620.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t7 .title {background: url(../images/p6.png);background-size: 100% 100%;position: absolute;width:80.3%;height: 14.9%;top: 5.5%;left: 10%;}
#t7 .asw1 {background: url(../images/p6.1.png);background-size: 100% 100%;top: 25%;}
#t7 .asw2 {background: url(../images/p6.2.png);background-size: 100% 100%;top: 37%;}
#t7 .asw3 {background: url(../images/p6.3.png);background-size: 100% 100%;top: 49%;}
#t7 .asw4 {background: url(../images/p6.4.png);background-size: 100% 100%;top: 61%;}
#t7 .asw1.on {background: url(../images/p6.5.png);background-size: 100% 100%;top: 25%;}
#t7 .asw2.on {background: url(../images/p6.6.png);background-size: 100% 100%;top: 37%;}
#t7 .asw3.on {background: url(../images/p6.7.png);background-size: 100% 100%;top: 49%;}
#t7 .asw4.on {background: url(../images/p6.8.png);background-size: 100% 100%;top: 61%;}
#t7 .num {background: url(../images/720.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t8 .title {background: url(../images/p7.png);background-size: 100% 100%;position: absolute;width:83.8%;height: 11.3%;top: 7.5%;left: 8.1%;}
#t8 .asw1 {background: url(../images/p7.1.png);background-size: 100% 100%;top: 25%;}
#t8 .asw2 {background: url(../images/p7.2.png);background-size: 100% 100%;top: 37%;}
#t8 .asw3 {background: url(../images/p7.3.png);background-size: 100% 100%;top: 49%;}
#t8 .asw4 {background: url(../images/p7.4.png);background-size: 100% 100%;top: 61%;}
#t8 .asw1.on {background: url(../images/p7.5.png);background-size: 100% 100%;top: 25%;}
#t8 .asw2.on {background: url(../images/p7.6.png);background-size: 100% 100%;top: 37%;}
#t8 .asw3.on {background: url(../images/p7.7.png);background-size: 100% 100%;top: 49%;}
#t8 .asw4.on {background: url(../images/p7.8.png);background-size: 100% 100%;top: 61%;}
#t8 .num {background: url(../images/820.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t9 .title {background: url(../images/p8.png);background-size: 100% 100%;position: absolute;width:90%;height: 13.9%;top: 6.5%;left: 5%;}
#t9 .asw1 {background: url(../images/p8.1.png);background-size: 100% 100%;top: 25%;}
#t9 .asw2 {background: url(../images/p8.2.png);background-size: 100% 100%;top: 37%;}
#t9 .asw3 {background: url(../images/p8.3.png);background-size: 100% 100%;top: 49%;}
#t9 .asw4 {background: url(../images/p8.4.png);background-size: 100% 100%;top: 61%;}
#t9 .asw1.on {background: url(../images/p8.5.png);background-size: 100% 100%;top: 25%;}
#t9 .asw2.on {background: url(../images/p8.6.png);background-size: 100% 100%;top: 37%;}
#t9 .asw3.on {background: url(../images/p8.7.png);background-size: 100% 100%;top: 49%;}
#t9 .asw4.on {background: url(../images/p8.8.png);background-size: 100% 100%;top: 61%;}
#t9 .num {background: url(../images/920.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t10 .title {background: url(../images/p9.png);background-size: 100% 100%;position: absolute;width:90.5%;height: 10.1%;top: 7.5%;left: 5%;}
#t10 .asw1 {background: url(../images/p9.1.png);background-size: 100% 100%;top: 25%;}
#t10 .asw2 {background: url(../images/p9.2.png);background-size: 100% 100%;top: 37%;}
#t10 .asw3 {background: url(../images/p9.3.png);background-size: 100% 100%;top: 49%;}
#t10 .asw4 {background: url(../images/p9.4.png);background-size: 100% 100%;top: 61%;}
#t10 .asw1.on {background: url(../images/p9.5.png);background-size: 100% 100%;top: 25%;}
#t10 .asw2.on {background: url(../images/p9.6.png);background-size: 100% 100%;top: 37%;}
#t10 .asw3.on {background: url(../images/p9.7.png);background-size: 100% 100%;top: 49%;}
#t10 .asw4.on {background: url(../images/p9.8.png);background-size: 100% 100%;top: 61%;}
#t10 .num {background: url(../images/1020.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t11 .title {background: url(../images/p10.png);background-size: 100% 100%;position: absolute;width:82.2%;height: 11.5%;top: 7.5%;left: 9%;}
#t11 .asw1 {background: url(../images/p10.1.png);background-size: 100% 100%;top: 25%;}
#t11 .asw2 {background: url(../images/p10.2.png);background-size: 100% 100%;top: 37%;}
#t11 .asw3 {background: url(../images/p10.3.png);background-size: 100% 100%;top: 49%;}
#t11 .asw4 {background: url(../images/p10.4.png);background-size: 100% 100%;top: 61%;}
#t11 .asw1.on {background: url(../images/p10.5.png);background-size: 100% 100%;top: 25%;}
#t11 .asw2.on {background: url(../images/p10.6.png);background-size: 100% 100%;top: 37%;}
#t11 .asw3.on {background: url(../images/p10.7.png);background-size: 100% 100%;top: 49%;}
#t11 .asw4.on {background: url(../images/p10.8.png);background-size: 100% 100%;top: 61%;}
#t11 .num {background: url(../images/1120.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t12 .title {background: url(../images/p11.png);background-size: 100% 100%;position: absolute;width:81.8%;height: 15%;top: 5.5%;left: 9.1%;}
#t12 .asw1 {background: url(../images/p11.1.png);background-size: 100% 100%;top: 25%;}
#t12 .asw2 {background: url(../images/p11.2.png);background-size: 100% 100%;top: 37%;}
#t12 .asw3 {background: url(../images/p11.3.png);background-size: 100% 100%;top: 49%;}
#t12 .asw4 {background: url(../images/p11.4.png);background-size: 100% 100%;top: 61%;}
#t12 .asw1.on {background: url(../images/p11.5.png);background-size: 100% 100%;top: 25%;}
#t12 .asw2.on {background: url(../images/p11.6.png);background-size: 100% 100%;top: 37%;}
#t12 .asw3.on {background: url(../images/p11.7.png);background-size: 100% 100%;top: 49%;}
#t12 .asw4.on {background: url(../images/p11.8.png);background-size: 100% 100%;top: 61%;}
#t12 .num {background: url(../images/1220.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t13 .title {background: url(../images/p12.png);background-size: 100% 100%;position: absolute;width:86.6%;height: 11.6%;top: 7.5%;left: 6.7%;}
#t13 .asw1 {background: url(../images/p12.1.png);background-size: 100% 100%;top: 25%;}
#t13 .asw2 {background: url(../images/p12.2.png);background-size: 100% 100%;top: 37%;}
#t13 .asw3 {background: url(../images/p12.3.png);background-size: 100% 100%;top: 49%;}
#t13 .asw4 {background: url(../images/p12.4.png);background-size: 100% 100%;top: 61%;}
#t13 .asw1.on {background: url(../images/p12.5.png);background-size: 100% 100%;top: 25%;}
#t13 .asw2.on {background: url(../images/p12.6.png);background-size: 100% 100%;top: 37%;}
#t13 .asw3.on {background: url(../images/p12.7.png);background-size: 100% 100%;top: 49%;}
#t13 .asw4.on {background: url(../images/p12.8.png);background-size: 100% 100%;top: 61%;}
#t13 .num {background: url(../images/1320.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t14 .title {background: url(../images/p13.png);background-size: 100% 100%;position: absolute;width:86.8%;height: 7.4%;top: 9.5%;left: 6.6%;}
#t14 .asw1 {background: url(../images/p13.1.png);background-size: 100% 100%;top: 25%;}
#t14 .asw2 {background: url(../images/p13.2.png);background-size: 100% 100%;top: 37%;}
#t14 .asw3 {background: url(../images/p13.3.png);background-size: 100% 100%;top: 49%;}
#t14 .asw4 {background: url(../images/p13.4.png);background-size: 100% 100%;top: 61%;}
#t14 .asw1.on {background: url(../images/p13.5.png);background-size: 100% 100%;top: 25%;}
#t14 .asw2.on {background: url(../images/p13.6.png);background-size: 100% 100%;top: 37%;}
#t14 .asw3.on {background: url(../images/p13.7.png);background-size: 100% 100%;top: 49%;}
#t14 .asw4.on {background: url(../images/p13.8.png);background-size: 100% 100%;top: 61%;}
#t14 .num {background: url(../images/1420.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t15 .title {background: url(../images/p14.png);background-size: 100% 100%;position: absolute;width:88.6%;height: 15.1%;top: 5.5%;left: 5.7%;}
#t15 .asw1 {background: url(../images/p14.1.png);background-size: 100% 100%;top: 25%;}
#t15 .asw2 {background: url(../images/p14.2.png);background-size: 100% 100%;top: 37%;}
#t15 .asw3 {background: url(../images/p14.3.png);background-size: 100% 100%;top: 49%;}
#t15 .asw4 {background: url(../images/p14.4.png);background-size: 100% 100%;top: 61%;}
#t15 .asw1.on {background: url(../images/p14.5.png);background-size: 100% 100%;top: 25%;}
#t15 .asw2.on {background: url(../images/p14.6.png);background-size: 100% 100%;top: 37%;}
#t15 .asw3.on {background: url(../images/p14.7.png);background-size: 100% 100%;top: 49%;}
#t15 .asw4.on {background: url(../images/p14.8.png);background-size: 100% 100%;top: 61%;}
#t15 .num {background: url(../images/1520.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t16 .title {background: url(../images/p15.png);background-size: 100% 100%;position: absolute;width:86.4%;height: 7.2%;top: 9.5%;left: 6.8%;}
#t16 .asw1 {background: url(../images/p15.1.png);background-size: 100% 100%;top: 25%;}
#t16 .asw2 {background: url(../images/p15.2.png);background-size: 100% 100%;top: 37%;}
#t16 .asw3 {background: url(../images/p15.3.png);background-size: 100% 100%;top: 49%;}
#t16 .asw4 {background: url(../images/p15.4.png);background-size: 100% 100%;top: 61%;}
#t16 .asw1.on {background: url(../images/p15.5.png);background-size: 100% 100%;top: 25%;}
#t16 .asw2.on {background: url(../images/p15.6.png);background-size: 100% 100%;top: 37%;}
#t16 .asw3.on {background: url(../images/p15.7.png);background-size: 100% 100%;top: 49%;}
#t16 .asw4.on {background: url(../images/p15.8.png);background-size: 100% 100%;top: 61%;}
#t16 .num {background: url(../images/1620.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t17 .title {background: url(../images/p16.png);background-size: 100% 100%;position: absolute;width:85.4%;height: 11.6%;top: 7.5%;left: 7.3%;}
#t17 .asw1 {background: url(../images/p16.1.png);background-size: 100% 100%;top: 25%;}
#t17 .asw2 {background: url(../images/p16.2.png);background-size: 100% 100%;top: 37%;}
#t17 .asw3 {background: url(../images/p16.3.png);background-size: 100% 100%;top: 49%;}
#t17 .asw4 {background: url(../images/p16.4.png);background-size: 100% 100%;top: 61%;}
#t17 .asw1.on {background: url(../images/p16.5.png);background-size: 100% 100%;top: 25%;}
#t17 .asw2.on {background: url(../images/p16.6.png);background-size: 100% 100%;top: 37%;}
#t17 .asw3.on {background: url(../images/p16.7.png);background-size: 100% 100%;top: 49%;}
#t17 .asw4.on {background: url(../images/p16.8.png);background-size: 100% 100%;top: 61%;}
#t17 .num {background: url(../images/1720.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t18 .title {background: url(../images/p17.png);background-size: 100% 100%;position: absolute;width:82.4%;height: 18%;top: 4.5%;left: 8.8%;}
#t18 .asw1 {background: url(../images/p17.1.png);background-size: 100% 100%;top: 25%;}
#t18 .asw2 {background: url(../images/p17.2.png);background-size: 100% 100%;top: 37%;}
#t18 .asw3 {background: url(../images/p17.3.png);background-size: 100% 100%;top: 49%;}
#t18 .asw4 {background: url(../images/p17.4.png);background-size: 100% 100%;top: 61%;}
#t18 .asw1.on {background: url(../images/p17.5.png);background-size: 100% 100%;top: 25%;}
#t18 .asw2.on {background: url(../images/p17.6.png);background-size: 100% 100%;top: 37%;}
#t18 .asw3.on {background: url(../images/p17.7.png);background-size: 100% 100%;top: 49%;}
#t18 .asw4.on {background: url(../images/p17.8.png);background-size: 100% 100%;top: 61%;}
#t18 .num {background: url(../images/1820.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t19 .title {background: url(../images/p19.png);background-size: 100% 100%;position: absolute;width:88.2%;height: 18.1%;top: 4.5%;left: 5.4%;}
#t19 .asw1 {background: url(../images/p19.1.png);background-size: 100% 100%;top: 25%;}
#t19 .asw2 {background: url(../images/p19.2.png);background-size: 100% 100%;top: 37%;}
#t19 .asw3 {background: url(../images/p19.3.png);background-size: 100% 100%;top: 49%;}
#t19 .asw4 {background: url(../images/p19.4.png);background-size: 100% 100%;top: 61%;}
#t19 .asw1.on {background: url(../images/p19.5.png);background-size: 100% 100%;top: 25%;}
#t19 .asw2.on {background: url(../images/p19.6.png);background-size: 100% 100%;top: 37%;}
#t19 .asw3.on {background: url(../images/p19.7.png);background-size: 100% 100%;top: 49%;}
#t19 .asw4.on {background: url(../images/p19.8.png);background-size: 100% 100%;top: 61%;}
#t19 .num {background: url(../images/1920.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}

#t20 .title {background: url(../images/p20.png);background-size: 100% 100%;position: absolute;width:89.7%;height: 14.1%;top: 6.5%;left: 5.1%;}
#t20 .asw1 {background: url(../images/p20.1.png);background-size: 100% 100%;top: 25%;}
#t20 .asw2 {background: url(../images/p20.2.png);background-size: 100% 100%;top: 37%;}
#t20 .asw3 {background: url(../images/p20.3.png);background-size: 100% 100%;top: 49%;}
#t20 .asw4 {background: url(../images/p20.4.png);background-size: 100% 100%;top: 61%;}
#t20 .asw1.on {background: url(../images/p20.5.png);background-size: 100% 100%;top: 25%;}
#t20 .asw2.on {background: url(../images/p20.6.png);background-size: 100% 100%;top: 37%;}
#t20 .asw3.on {background: url(../images/p20.7.png);background-size: 100% 100%;top: 49%;}
#t20 .asw4.on {background: url(../images/p20.8.png);background-size: 100% 100%;top: 61%;}
#t20 .num {background: url(../images/2020.png);background-size: 100% 100%;position: absolute;right: 2%;top: 0.5%;width: 14%;height: 3.5%;}



.touch {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url('../images/kehou.gif');
  background-size: 100% 100%;
  display: none;
}
.touch2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  display: none;
}
.touch_title {}

.touch_ul {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/p3.png);
  background-size: 100% 100%;
}

.touch_li:nth-of-type(1) {
  width: 87.5%;
  height: 5.3%;
  position: absolute;
  top: 56%;
  left: 6%;
  background: url('../images/p3.1.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li:nth-of-type(2) {
  position: absolute;
  top: 62%;
  left: 6%;
  background: url('../images/p3.2.png') no-repeat;
  background-size: 100% 100%;
  width: 87.5%;
  height: 5.3%;
}

.touch_li:nth-of-type(3) {
  background: url('../images/p3.3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 68%;
  left: 6%;
  width: 87.5%;
  height: 5.3%;
}

.touch_li:nth-of-type(4) {
  background: url('../images/p3.4.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 74%;
  left: 6%;
  width: 87.5%;
  height: 5.3%;
}

.touch_li:nth-of-type(5) {
  background: url('../images/p3.5.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 80%;
  left: 6%;
  width: 87.5%;
  height: 5.3%;
}

.touch_li:nth-of-type(6) {
  width: 29%;
  height: 8.2%;
  position: absolute;
  top: 58%;
  left: 66%;
  background: url('../images/p2.6.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li:nth-of-type(7) {
  width: 29%;
  height: 8.2%;
  position: absolute;
  top: 68%;
  left: 4%;
  background: url('../images/p2.7.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li:nth-of-type(8) {
  width: 29%;
  height: 8.2%;
  position: absolute;
  top: 68%;
  left: 66%;
  background: url('../images/p2.8.png') no-repeat;
  background-size: 100% 100%;
}

.touchBtn {
  position: absolute;
  background: url(../images/button3.png);
  background-size: 100% 100%;
  top: 89%;
  left: 30%;
  width: 40%;
  height: 8%;
}

/* 课后拖拽 */

.touch_ul2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/p4.png);
  background-size: 100% 100%;
}

.touch_li2:nth-of-type(1) {
  width: 23%;
  height: 8%;
  position: absolute;
  top: 55.5%;
  left: 1%;
  background: url('../images/p4.6.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li2:nth-of-type(2) {
  position: absolute;
  top: 55.5%;
  left: 26%;
  background: url('../images/p4.5.png') no-repeat;
  background-size: 100% 100%;
  width: 23%;
  height: 8%;
}

.touch_li2:nth-of-type(3) {
  background: url('../images/p4.4.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 55.5%;
  left: 51%;
  width: 23%;
  height: 8%;
}

.touch_li2:nth-of-type(4) {
  background: url('../images/p4.2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 55.5%;
  left: 76%;
  width: 23%;
  height: 8%;
}

.touch_li2:nth-of-type(5) {
  background: url('../images/p4.3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 65%;
  left: 1%;
  width: 23%;
  height: 8%;
}

.touch_li2:nth-of-type(6) {
  width: 23%;
  height: 8%;
  position: absolute;
  top: 65%;
  left: 26%;
  background: url('../images/p4.1.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li2:nth-of-type(7) {
  width: 23%;
  height: 8%;
  position: absolute;
  top: 65%;
  left: 51%;
  background: url('../images/p4.8.png') no-repeat;
  background-size: 100% 100%;
}

.touch_li2:nth-of-type(8) {
  width: 23%;
  height: 8%;
  position: absolute;
  top: 65%;
  left: 76%;
  background: url('../images/p4.7.png') no-repeat;
  background-size: 100% 100%;
}

.touchBtn2 {
  position: absolute;
  background: url(../images/butten2.png);
  background-size: 100% 100%;
  top: 76%;
  left: 30%;
  width: 40%;
  height: 8%;
}
@keyframes fadeOutBig
{
  0%{opacity: 0;transform:scale(2)}
  100%{opacity: 1;transform:scale(1)}
}
@-moz-keyframes fadeOutBig /* Firefox */
{
  0%{opacity: 0;transform:scale(2)}
  100%{opacity: 1;transform:scale(1)}
}
@-webkit-keyframes fadeOutBig /* Safari 和 Chrome */
{
  0%{opacity: 0;transform:scale(2)}
  100%{opacity: 1;transform:scale(1)}
}