/* 前端白明明 */ /* 引入字体 */ @charset "UTF-8"; @font-face { font-family: "com"; src: url("../font/COMIC.woff") format("woff"), url("../font/COMIC.ttf") format("truetype"), url("../font/COMIC.eot") format("embedded-opentype"), url("../font/COMIC.svg") format("svg"), url("../font/COMIC.otf") format("opentype"); font-weight: normal; font-style: normal; } *,*:before,*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} *{ margin:0; padding:0;} body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);margin:0 auto;overflow:hidden; max-width: 1920px; min-width: 1280px;position: relative;padding: 0 ;height: 100vh; width: 100%;color: #1f1f1f;font-family: xumin; font-size:14px; line-height:1;background: #fff;} html.act{overflow: hidden;width: 100%;height: 100vh;} ul,ul li,ol li,tr td,dl,dd{ list-style-type:none; margin:0; padding:0; } input{text-align: center;} .clearfix:after{content: " "; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; } a{display: inline-block; text-decoration:none; cursor:pointer; -webkit-transition: all .3s cubic-bezier(.4,0,.2,1); -moz-transition: all .3s cubic-bezier(.4,0,.2,1); transition: all .3s cubic-bezier(.4,0,.2,1);color: #333;} textarea,select{ outline:none; color:#666; font-size:14px; width:100%;} img{border:none;display: block;max-width: 100%;} img[src=""]{opacity: 0;} body::-webkit-scrollbar{ width:4px;height: 1px;} body::-webkit-scrollbar-thumb{ background:#000;} body::-webkit-scrollbar-track{ background:#fff;} .alltime,.alltime *{-webkit-transition: all .3s cubic-bezier(.4,0,.2,1); -moz-transition: all .3s cubic-bezier(.4,0,.2,1); transition: all .3s cubic-bezier(.4,0,.2,1);} .alltime2,.alltime2 *{-webkit-transition: all .5s cubic-bezier(.4,0,.2,1); -moz-transition: all .5s cubic-bezier(.4,0,.2,1); transition: all .5s cubic-bezier(.4,0,.2,1);} video{pointer-events: none;} /*单元列表页*/ .iall{width: 100%;position: relative;overflow: hidden;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .iall > img{display: block;width: 100%;position: relative;top: 0;left: 0;z-index: 1;pointer-events: none;-webkit-transition: all .3s cubic-bezier(.4,0,.2,1); -moz-transition: all .3s cubic-bezier(.4,0,.2,1); transition: all .3s cubic-bezier(.4,0,.2,1);} .iall .dyzz{position: absolute;top: 0;left: 0;z-index: 2;} .iall .xx1{animation: yx 2s linear infinite alternate;-webkit-animation: yx 2s linear infinite alternate;} .iall .xx2{animation: yx 2s linear 1s infinite alternate;-webkit-animation: yx 2s linear 1s infinite alternate;} .iall .xx3{animation: yx 4s linear 1s infinite alternate;-webkit-animation: yx 4s linear 1s infinite alternate;} .iall .caodi {position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;pointer-events: none;} .iall .caodi img{opacity: 0;} .iall .caodi img.act{opacity: 1;} .iall .yun1{} .iall .danyuan{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9;} .iall .danyuan a{display: block;position: absolute;width: 17.7%;left: 0;top: 0;} .iall .danyuan a > img{display: block;width: 100%;opacity: 0;transform: scale(0.9);-webkit-transform: scale(0.9);} .iall .danyuan a:hover > img{opacity: 1;transform: scale(1);-webkit-transform: scale(1);} .iall .danyuan a > .xs{opacity: 1;transform: scale(1);-webkit-transform: scale(1);} .iall .danyuan a .xg,.iall .danyuan a .xz{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;} .iall .danyuan a .huan{position: absolute;top: 5%;left: 0;z-index: 1;width: 100%;height: 100%;opacity: 1;} .iall .danyuan a .xg img:nth-child(2){position: absolute;top: 0;left: 0;z-index: 2;} .iall .danyuan a .xg2,.iall .danyuan a .xg3{opacity: 0;top: 5%;} .iall .danyuan a:hover .xg2,.iall .danyuan a:hover .xg3{opacity: 1;} .iall .danyuan a:hover .xz{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .danyuan a:nth-child(1){left: 15%;top: auto; bottom: 20%;} .iall .danyuan a:nth-child(2){left: 17%;top: 15%;width: 12.5%;} .iall .danyuan a:nth-child(3){left: 33%;top: 23%;width: 13%;} .iall .danyuan a:nth-child(4){left: 43%;top: 1%;width: 18.2%;} .iall .danyuan a:nth-child(5){left: 68%;top: 19%;width: 12.5%;} .iall .danyuan a:nth-child(6){left: 55%;top: 35%;width: 11.45%;} .iall .danyuan a:nth-child(7){left: 32%;top: 48%;width: 24.2%;} .iall .danyuan a:nth-child(8){left: 65%;top: 52%;width: 14%;} .iall .danyuan a:hover .huan{opacity: 0;} .iall .bz1{width: 6.77%;position: absolute;top: 2%;right: 5%;z-index: 3;cursor: pointer;z-index: 9;} .iall .bz1 img:nth-child(2){position: absolute;top: 0;left: 0;} .iall .bz1:hover img:nth-child(2){animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .bz2{width: 6.77%;position: absolute;top: 12%;right: 8%;z-index: 3;cursor: pointer;z-index: 9;} .iall .bz2 img:nth-child(2){position: absolute;top: 0;left: 0;} .iall .bz2:hover img:nth-child(2){animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .bgyy{display: block;width: 50px;height: 50px;position: absolute;top: 5%;left: 5%;z-index: 9;background: url(../images/yy.png) center no-repeat;background-size: 50px;cursor: pointer;} .iall .bgyy.act{background: url(../images/jy.png) center no-repeat;background-size: 50px;} /* 首页弹窗 */ .iall .jieshao{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 99;display: none;} .iall .jieshao .jox img{width: 100%;} .iall .jieshao .jox .out{display: block;width: 6.25%;position: absolute;top: 2%;right: 24.5%;z-index: 2;cursor: pointer;} .iall .jieshao .jox .out:hover{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .jieshao .jox .qiehuan{width: 9%;padding-top: 3%;position: absolute;right: 46%;bottom: 20%;z-index: 2;} .iall .jieshao .jox .qiehuan span{display: block;width: 100%;height: 100%;position: absolute;top: 0%;left: 0;cursor: pointer;} .iall .jieshao .jox .qiehuan span:nth-child(2){display: none;top: 0;} video{pointer-events: none;} /* 返回 */ .iall .fh{display: block; position: absolute;width: 9.1%; bottom: 0px;left: 5%;z-index: 9;} .iall .fh img:nth-child(1){opacity: 0;} .iall .fh img:nth-child(2){position: absolute;top: 0;left: 0;z-index: 2;} .iall .fh:hover img:nth-child(1){animation: yx2 1s forwards;-webkit-animation: yx2 1s forwards; } .iall .fh2{left: 13%;bottom: 10%;} /*渐隐渐现*/ @-webkit-keyframes yx {0% {opacity: 1;}100% {opacity: 0;}} @keyframes yx {0% {opacity: 1;}100% {opacity: 0;}} /*渐隐渐现2*/ @-webkit-keyframes yx2 {0% {opacity: 0;}30% {opacity: 1;}60% {opacity: 0;}90% {opacity: 1;}100% {opacity: 1;}} @keyframes yx2 {0% {opacity: 0;}30% {opacity: 1;}60% {opacity: 0;}90% {opacity: 1;}100% {opacity: 1;}} /* 左右抖动 */ @-webkit-keyframes rubberBand {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}65% {-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}75% {-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}} @keyframes rubberBand {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}65% {-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}75% {-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}} /* 第一单元 */ .un1{} .un1 .bg_u1{position: relative;} .un1 .bg_u1 img{display: block;width: 100%;position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;} .un1 .bg_u1 img:nth-child(1){position: relative;} .un1 .bg_u1 img.act{opacity: 1;} .un1 .songshu{width: 6.25%;display: block;top: 48%;left: 91%;} .un1 .chuang{width: 6.25%;display: block;top: 40%;left: 93%;} .un1 .mi{width: 5%;position: absolute;z-index: 6;pointer-events: none;top: 47%;right: 9%;transform-origin: bottom left;-webkit-transform-origin: bottom left;transform: scale(0.1);-webkit-transform: scale(0.1);animation: mi 1s forwards;-webkit-animation: mi 1s forwards;} .un1 .mi img:nth-child(2){position: absolute;top: 0;right: 0;opacity: 0;} .un1 .mi.act img{opacity: 1;} .un1.act .songshu{top: 42%;} .un1.act .chuang{top: 48%;} .un1 > img{-webkit-transition: all 1s cubic-bezier(.4,0,.2,1); -moz-transition: all 1s cubic-bezier(.4,0,.2,1); transition: all 1s cubic-bezier(.4,0,.2,1);} .un1 .lx{display: block;position: absolute; width: 4.2%;top: -10%;left: 30%;z-index: 1;} .un1 .lx1{animation: lx1 7s infinite ;-webkit-animation: lx1 7s infinite ;} .un1 .lx2{width: 5.5%; animation: lx2 7s infinite .5s ;-webkit-animation: lx2 7s infinite .5s;} .un1 .lx3{width: 6.8%; animation: lx3 7s infinite 1s ;-webkit-animation: lx3 7s infinite 1s;} .un1 .lx4{width: 15%; top: -30%; animation: lx4 7s infinite 2s ;-webkit-animation: lx4 7s infinite 2s;} .un1 .lx5{width: 9.4%;animation: lx5 7s infinite 1.5s ;-webkit-animation: lx5 7s infinite 1.5s;} .un1 .lx6{width: 7.3%;animation: lx6 4s infinite 1.5s ;-webkit-animation: lx6 4s infinite 1.5s;} .un1 .lx7{width: 5.8%;animation: lx7 5s infinite 1.5s ;-webkit-animation: lx7 5s infinite 1.5s;} .un1 .lx8{width: 15%;animation: lx7 5s infinite 1s ;-webkit-animation: lx7 5s infinite 1s;} /*蜜罐*/ @-webkit-keyframes mi {0% {transform: scale(0.1);-webkit-transform: scale(0.1);}100% {transform: scale(1);-webkit-transform: scale(1);}} @keyframes mi {0% {transform: scale(0.1);-webkit-transform: scale(0.1);}100% {transform: scale(1);-webkit-transform: scale(1);}} /*流星*/ @-webkit-keyframes lx1 {0% {top: -10%;left: 20%;}100% {top: 50%;left: -30%;}} @keyframes lx1 {0% {top: -10%;left: 20%;}100% {top: 50%;left: -30%;}} @-webkit-keyframes lx2 {0% {top: -10%;left: 30%;}100% {top: 60%;left: -20%;}} @keyframes lx2 {0% {top: -10%;left: 30%;}100% {top: 60%;left: -20%;}} @-webkit-keyframes lx3 {0% {top: -10%;left: 30%;}100% {top: 60%;left: -20%;}} @keyframes lx3 {0% {top: -10%;left: 30%;}100% {top: 60%;left: -20%;}} @-webkit-keyframes lx4 {0% {top: -30%;left: 50%;}100% {top: 80%;left: -20%;}} @keyframes lx4 {0% {top: -30%;left: 50%;}100% {top: 80%;left: -20%;}} @-webkit-keyframes lx5 {0% {top: -20%;left: 50%;}100% {top: 100%;left: -20%;}} @keyframes lx5 {0% {top: -20%;left: 50%;}100% {top: 100%;left: -20%;}} @-webkit-keyframes lx6 {0% {top: -20%;left: 80%;}100% {top: 100%;left: 50%;}} @keyframes lx6 {0% {top: -20%;left: 80%;}100% {top: 100%;left: 50%;}} @-webkit-keyframes lx7 {0% {top: -20%;left: 100%;}100% {top: 80%;left: 30%;}} @keyframes lx7 {0% {top: -20%;left: 100%;}100% {top: 80%;left: 30%;}} .un1 .ubox{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;} .un1 .ubox .box{margin: 5.5% auto 0;width: 51%; max-width: 980px;height: 77%;max-height: 730px;border:15px solid #c97700;background: #f7edc5;position: relative;left: -0.85%;border-radius: 5px;} .un1 .ubox .box .video{position: relative;width: 100%;height: 100%;overflow: hidden;} .un1 .ubox .box .video > img{display: block;width: 100%;background: #fff;height: 100%;} .un1 .ubox .box .video > video{display: block;position: absolute;top: 0;left: 0;z-index: -1;width: 100%;max-height: 100%;object-fit: cover;opacity: 0;} .un1 .ubox .box .video > video.act{opacity: 1;z-index: 9;} .un1 .ubox .box .video .udh{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;} .un1 .ubox .box .video .udh li{position: absolute;top: 0;left: 0;transform: scale(0.55);-webkit-transform: scale(0.55);cursor: pointer;width: 40%;} .un1 .ubox .box .video .udh li img{display: block;width: 100%;} .un1 .ubox .box .video .udh li img:nth-child(2){position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;} .hidead,.hidead2{position: fixed;top: 0;left: 0;opacity: 0;pointer-events: none;z-index: -1;} .un1 .ubox .box .video .udh li.act{transform: scale(0.9);-webkit-transform: scale(0.9);z-index: 3;} .un1 .ubox .box .video .udh li.act img:nth-child(2){opacity: 1;} .jin{pointer-events: none;} .un1 .ubox .box .video .udh1 li:nth-child(1){left: 0;top: 13%;} .un1 .ubox .box .video .udh1 li:nth-child(2){left: 12%;top: 23%;width: 30%;} .un1 .ubox .box .video .udh1 li:nth-child(3){left: 2%;top: 50%;width: 25%;transform-origin: top left;-webkit-transform-origin: top left;} .un1 .ubox .box .video .udh1 li:nth-child(4){left: 26%;top: 50%;width: 15%;} .un1 .ubox .box .video .udh1 li:nth-child(5){left: 25%;top: 62%;width: 17%;} .un1 .ubox .box .video .udh1 li:nth-child(6){left: 43%;top: 23%;width: 36%;} .un1 .ubox .box .video .udh1 li:nth-child(7){left: 65%;top: 32%;width: 30%;} .un1 .ubox .box .video .udh1 li:nth-child(8){left: 47%;top: 38%;width: 30%;} .un1 .ubox .box .video .udh1 li:nth-child(9){left: 66%;top: 44%;width: 26%;} .un1 .ubox .box .video .udh1 li:nth-child(10){left: 47%;top: 48%;width: 30%;} .un1 .ubox .box .video .udh1 li:nth-child(11){left: 64%;top: 12%;width: 36%;} .un1 .ubox .box .video .udh1 li:nth-child(12){left: 85%;top: 40%;width: 14%;} /* 播放按钮 */ .un1 .ubox .box .video .abtn{position: absolute;top: 7%;left: 50%;z-index: 9;display: inline-block;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 20%;} .un1 .ubox .box .video .abtn span{display: block;width: 30%;float: left;cursor: pointer;position: relative;top: 0;} .un1 .ubox .box .video .abtn span:nth-child(2){margin: 0 5%;} .un1 .ubox .box .video .abtn span img{max-width: 100%;} .un1 .ubox .box .video .abtn span .txt{position: absolute;top: 103%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 80px;line-height: 30px;background: #fff;border-radius: 5px;text-align: center;font-weight: bold;border: 2px solid #000;pointer-events: none;opacity: 0;} .un1 .ubox .box .video .abtn span:last-child .txt{width: 120px;} .un1 .ubox .box .video .abtn span:hover{top: 5px;} .un1 .ubox .box .video .abtn span:hover .txt{opacity: 1;} .un1 .ubox .abtm{margin: 0 auto ;width: 51%; max-width: 980px;display: flex;justify-content: center;margin-top: -40px;position: relative;z-index: 9;left: -0.7%;} .un1 .ubox .abtm a{display: block;margin: 0 9%;width: 15.3%;background: url(../images/u1/pa.png) center no-repeat;background-size: cover;} .un1 .ubox .abtm a img{display: block;max-width: 100%;position: relative;top: 0;} .un1 .ubox .abtm a:hover img{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} /* 单元内分类按钮 */ .un1 .an1{width: 16.7%;position: absolute;z-index: 7;top: 30%;left: 24%;} .un1 .an1 div{position: absolute;top: 0;left: 0;z-index: 2;} .un1 .an1:hover img{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .un1 .an2{width: 14.6%;top: 10%;left: 48%;} .un1 .an3{width: 18.65%;top: 40%;left: 63%;} /* part a */ .iall .huuojian{width: 12%;position: absolute;right: -10%;bottom: -10%;z-index: 2;transform-origin: right bottom;-webkit-transform-origin: right bottom;transform: scale(0.5);-webkit-transform: scale(0.5);-webkit-transition: all 5s cubic-bezier(.4,0,.2,1); -moz-transition: all 5s cubic-bezier(.4,0,.2,1); transition: all 5s cubic-bezier(.4,0,.2,1);} .iall .huuojian img:nth-child(2){position: absolute;top: 0;left: 0;animation: yx 1s linear infinite alternate;-webkit-animation: yx 1s linear infinite alternate;} .iall .huuojiany{width: 26%;position: absolute;right: 0%;bottom: 0%;z-index: 2;transform-origin: right bottom;opacity: 0;-webkit-transition: all 1s cubic-bezier(.4,0,.2,1); -moz-transition: all 1s cubic-bezier(.4,0,.2,1); transition: all 1s cubic-bezier(.4,0,.2,1);} .iall .huuojian.act{transform: scale(1);-webkit-transform: scale(1);right: 17%;bottom: 68%;} .iall .huuojiany.act{opacity: 1;transition-delay: 4s;-webkit-transition-delay: 4s;} .iall .xq{position: absolute;width: 37%;left: 15%;bottom: 15%;z-index: 9;} .iall .xq .ahuan{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;opacity: 0;} .iall .xq .ahuan3{top: 20%;} .iall .xq:hover .ahuan{opacity: 1;} .iall .xq .zi{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;} .iall .xq:hover .zi{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .xq2{width: 20.3%;left: 45%;bottom: 62%;} .iall .xq3{width: 20.8%;left: 55%;bottom: 22%;} .iall_r1 .xq2{left: 55%;bottom: 42%;} /*流星*/ @-webkit-keyframes xk1 {0% {left: -100%;}100% {left: 100%;}} @keyframes xk1 {0% {left: -100%;}100% {left: 100%;}} @-webkit-keyframes xk2 {0% {left: -120%;}100% {left: 100%;}} @keyframes xk2 {0% {left: -120%;}100% {left: 100%;}} .iall .xk1{animation: xk1 50s linear infinite ;-webkit-animation: xk1 50s linear infinite ;} .iall .xk2{animation: xk2 100s linear infinite ;-webkit-animation: xk2 100s linear infinite ;} .iall .xk3{animation: xk1 50s linear infinite 25s ;-webkit-animation: xk1 50s linear 25s infinite ;} .iall .xk4{animation: xk2 100s linear 50s infinite ;-webkit-animation: xk2 100s linear 50s infinite ;} /* 书本朗诵 */ .aujin{pointer-events: none;} .un1_book{} .un1_book .ubox{z-index: 8;} .un1_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un1_book .ubox .box .video .abtn{top: 20%;left: 55%;} .un1_book .ubox .box .video .ubox{position: relative;} .un1_book .ubox .box .video .unbox dd{display: none;} .un1_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un1_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 11%;left: 49%;width: 7%;} .un1_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un1_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 5%;left: 60%;} .un1_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 10%;left: 55%;} .un1_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 11%;left: 60%;} .un1_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un1_book .ubox .box .video .udh_try {left: 0;top: 70%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un1_book .ubox .box .video .udh_try li{left: 30%;top: 0;width: 5%;position: absolute;cursor: pointer;} .un1_book .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un1_book .ubox .box .video .udh_try li:nth-child(2){left: 56%;} .un1_book .ubox .box .video .udh_try li:nth-child(3){left: 67%;} .un1_book .ubox .box .video .udh_try li.act img{opacity: 1;} .un1_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un1_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un1_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un1_book .ubtn{} .un1_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un1_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un1_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un1_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un1_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un1_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un1_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un1_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un1_book .ubtn span img{display: block;max-width: 100%;} .un1_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un1_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un1_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un1 .ubtn span:hover div img {animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .un1_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 5%;} .un1_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 450px;height: 30px;cursor: pointer;margin-bottom: 10px;} .un1_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un1_book .ubox .box .video .udh3 li .img img{width: 450px;max-width: 450px;position: absolute;top: 0;right: 0;} .un1_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un1_book .ubox .box .video .udh3 li .lbtn img{width: 450px;max-width: 450px;} .un1_book .ubox .box .video .udh3 li.act .img{width: 0;} .un1_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un1 .ubox .box .video .udh li.adbf_no.act{transform: scale(0.55);-webkit-transform: scale(0.55);} .un1_book .ubox .box .video .udh1 li:nth-child(1){width: 65%;top: 78%;} .un1_book .ubox .box .video .udh1 li:nth-child(2){top: 78%;width: 34%;left: 50%;} .un1_book .ubox .box .video .udh1 li:nth-child(3){top: 84%;width: 40%;left: 20%;transform-origin: center bottom;-webkit-transform-origin: center bottom;} .un1_book .ubox .box .video .udh1 li:nth-child(4){top: 84%;width: 34%;left: 50%;transform-origin: center bottom;-webkit-transform-origin: center bottom;} .un1_book .ubox .box .video .udh1 li:nth-child(5){top: 9%;width: 34%;left: 7%;} .un1_book .ubox .box .video .udh1 li:nth-child(6){top: 41%;width: 15%;left: 17%;} .un1_book .ubox .box .video .udh1 li:nth-child(7){top: 9.5%;width: 29%;left: 30%;} .un1_book .ubox .box .video .udh1 li:nth-child(8){top: 40%;width: 30%;left: 29%;} .un1_book .ubox .box .video .udh1 li:nth-child(9){top: 9.5%;width: 41%;left: 43.5%;} .un1_book .ubox .box .video .udh1 li:nth-child(10){top: 39.5%;width: 27%;left: 51.5%;} .un1_book .ubox .box .video .udh1 li:nth-child(11){top: 44%;width: 38%;left: 15%;} .un1_book .ubox .box .video .udh1 li:nth-child(12){top: 74%;width: 22%;left: 25%;} .un1_book .ubox .box .video .udh1 li:nth-child(13){top: 43%;width: 38%;left: 36%;} .un1_book .ubox .box .video .udh1 li:nth-child(14){top: 74%;width: 28%;left: 41.5%;} .un1_book .ubox .box .video .udh1 li.act{transform: scale(0.6);-webkit-transform: scale(0.6);} .un1_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un1_book .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un1_book .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un1_book .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un1_book .ubox .box .video .udh2 li:nth-child(4){left: 32.8%;top: 41.3%;width: 5%;} .un1_book .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un1_book .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un1_book .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un1_book .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un1_book .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un1_book .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un1_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un1_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un1_book .ubox .box .video .udh4{width: 100%;height: 25%;top: 62%;right: 0%;z-index: 3;position: absolute;} .un1_book .ubox .box .video .udh4 li{position: absolute;width: 8%;height: 22%;top: 0;left: 0;} .un1_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 24px;font-family: com;} .un1_book .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 16.5%;} .un1_book .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 28%;} .un1_book .ubox .box .video .udh4 li:nth-child(3){top: 23%;left: 49.5%;} .un1_book .ubox .box .video .udh4 li:nth-child(4){top: 0%;left: 75%;} .un1_book .ubox .box .video .udh4 li:nth-child(5){top: 78%;left: 11%;width: 77%;} /* 游戏乐园 */ .uag1 {} .uag1 .gx1{width: 9.375%;top: 68%;left: 15%;} .uag1 .gx2{width: 9.375%;top: 65%;left: 75%;} .uag1 .xiong{width: 26%;top: auto;left: auto;right: -26%;bottom: -26%;-webkit-transition: all 1.3s cubic-bezier(.4,0,.2,1); -moz-transition: all 1.3s cubic-bezier(.4,0,.2,1); transition: all 1.3s cubic-bezier(.4,0,.2,1);} .uag1 .xiong.act{right: 0;bottom: 0;} .uag1 .songshu2{width: 16.9%;top: 25%;left: -17%;animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .uag1 .songshu2.act{top: 55%;left: 0%;-webkit-transition: all 3s cubic-bezier(.4,0,.2,1); -moz-transition: all 3s cubic-bezier(.4,0,.2,1); transition: all 3s cubic-bezier(.4,0,.2,1);} .uag1 .uagcen{width: 59.4%;position: absolute;max-width: 1140px;top: 45%;left: 50.5%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 2;background:rgba(74, 95, 180, 0.5) ;padding: 25px 25px 0;} .uag1 .uagcen > img{display: block;width: 100%;} .uag1 .uagcen .ifm{position: absolute;top: 25px;left: 25px;z-index: 2;width: calc(100% - 50px);height: calc(100% - 25px);overflow: hidden;} .uag1 .uagcen .ifm iframe{display: block;width: 100%;height: 105%;position: relative;top: 0%;} .uag1 .tanchuang{position: absolute;top: 0;left: 0;z-index: 5;width: 100%;height: 100%;pointer-events: none;} .uag1 .tanchuang img{display: block;width: 100%;} .uag1 .ubtm{width: 50%;position: absolute;max-width: 1080px;bottom: 2%; left: 44%;transform: translateX(-50%);transform: translateX(-50%);z-index: 2;display: flex;justify-content: center;} .uag1 .ubtm li{position: relative;width: 20%;cursor: pointer;} .uag1 .ubtm li:nth-child(2){transform: translate(35%,0%);-webkit-transform: translate(30%,0%);} .uag1 .ubtm li:nth-child(3){transform: translate(75%,0%);-webkit-transform: translate(75%,0%);} .uag1 .ubtm li:nth-child(4){transform: translate(115%,0%);-webkit-transform: translate(115%,0%);} .uag1 .ubtm li img{position: absolute;display: block;width: 100%;top: 0;left: 0;} .uag1 .ubtm li img:nth-child(1){position: relative;} .uag1 .ubtm li img:nth-child(2){opacity: 0;} .uag1 .ubtm li img:nth-child(3){transform: scale(0.9);-webkit-transform: scale(0.9);} .uag1 .ubtm li.act img:nth-child(2){transform: scale(1.2);-webkit-transform: scale(1.2);opacity: 1;} .uag1 .ubtm li.act img:nth-child(3){transform: scale(1);-webkit-transform: scale(1);} .uag1 .ubtm li:hover img:nth-child(2),.uag1 .ubtm li:hover img:nth-child(3){top: -10px;} .un1 .qst4{position: absolute;width: 11.5%;top: 60%;right: 0;z-index: 1;animation: tl4 7s linear infinite ;-webkit-animation: tl4 7s linear infinite ;} .un1 .yuqun1{position: absolute;width: 20%;top: -20%;left: 30%;z-index: 1;animation: yq1 10s linear infinite ;-webkit-animation: yq1 10s linear infinite ;} .un1 .yuqun2{position: absolute;width: 29%;top: 70%;right: 0%;z-index: 1;animation: yq2 10s linear infinite ;-webkit-animation: yq2 10s linear infinite ;} .uag1 .dyzz{z-index: 2;} .uag1 .g_c3{z-index: 4;} /*上下*/ @-webkit-keyframes shangxia {0% {transform:translateY(0);}100% {transform:translateY(-10px);}} @keyframes shangxia {0% {transform:translateY(0);}100% {transform:translateY(-10px);}} /* 词句 */ .ucj1{} .ucj1 .ss3{width: 15.1%;top: 55%;left: 10%;animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .ucj1 .xion3{width: 19%;top: 60%;left: 30%;animation: shangxia 1s linear infinite 1s alternate;-webkit-animation: shangxia 1s linear infinite 1s alternate;} .ucj1 .xq{pointer-events: none;} .ucj1 .xq4{width: 11.45%;left: auto;right: 0; bottom: 12%;padding: 0 1.3% 0 1.4%;} .ucj1 .xq .ahuan{opacity: 1;top: 0;} .ucj1 .xq5{width: 23%;left: auto;right: 0; bottom: 48%;padding: 0 0.5% 0 1%;} .ucj1 .xq5 .ahuan{top: 15%;} .ucj1 .wx{display: block;position: absolute;} .ucj1 .wx1{width: 19%;top: 18%;left: 19.5%;} .ucj1 .wx2{width: 24%;top: 35%;left: 52%;} .ucj1 .wx:hover img{animation: rubberBand 1s linear ;-webkit-animation: rubberBand 1s linear ;} .iall .wen{position: absolute;top: 0;z-index: 5; right: 0;width: 28.65%;} /* 单词a */ /*转*/ @-webkit-keyframes zhuan {0% {transform: translate(-50%,-50%) rotate(0deg);-webkit-transform: translate(-50%,-50%) rotate(0deg);}100% {transform: translate(-50%,-50%) rotate(0deg);-webkit-transform: translate(-50%,-50%) rotate(0deg);}} @keyframes zhuan {0% {transform: translate(-50%,-50%) rotate(0deg);-webkit-transform: translate(-50%,-50%) rotate(0deg);}100% {transform: translate(-50%,-50%) rotate(0deg);-webkit-transform: translate(-50%,-50%) rotate(0deg);}} .ucj_c1{} .ucj_c1 .hjx .img1{} .ucj_c1 .hjx .img2{position: absolute;top: 0;left: 0;width: 100%;} .ucj_c1 .zhuan{width: 100%;height: auto;top: 50%;left: 50%;animation: zhuan 40s linear infinite ;-webkit-animation: zhuan 40s linear infinite ;} .ucj_c1 .zhuan2{width: 100%;height: auto;top: 50%;left: 50%;animation: zhuan 30s linear infinite ;-webkit-animation: zhuan 30s linear infinite ;} .ucj_c1 .zi{position: absolute;z-index: 7; width: 25.5%;top: 5%;left: 37%;} .ucj_c1 .ld{position: absolute;top: 0;left: 50%;z-index: 5;width: 100%;height: 100%;} .ucj_c1 .ubox{position: absolute;top: 22%; left: 33%; width: 36%; max-width: 670px; height: 61%;padding: 1%; background: transparent;z-index: 9;} .ucj_c1 .ubox .d0{padding: 3%;min-height: 60px;margin-bottom:1.5% ;border-radius: 5px;} .ucj_c1 .ubox .d1{background: #9998f1;height: 32%; box-shadow:inset 0px 0px 15px 5px #7877e3;-webkit-box-shadow:inset 0px 0px 15px 5px #7877e3;} .ucj_c1 .ubox .d2{background: #d07af8;height: 25%;box-shadow:inset 0px 0px 15px 5px #ab37e1;-webkit-box-shadow:inset 0px 0px 15px 5px #ab37e1;} .ucj_c1 .ubox .d3{background: #668dea;height: 40%; box-shadow:inset 0px 0px 15px 10px #4d7ac7;-webkit-box-shadow:inset 0px 0px 15px 10px #4d7ac7;margin-bottom: 0;} .ucj_c1 .ubox .d0 img{cursor: pointer;display: block;border: 3px solid rgba(255, 255, 255, 0.3);float: left;margin-right: 1.09%;width: 24.18%;margin-bottom: 1.5%;max-width: 150px;} .ucj_c1 .ubox .d0 img:nth-child(4n){margin-right: 0;} .ucj_c1 .ubox .tanchuang{position: absolute;width: 425px;top: 50%;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);display: none;z-index: 9;} .ucj_c1 .ubox .tanchuang img{display: block;width: 100%;} .ucj_c1 .ubox .tanchuang .yy{width: 52px;height: 52px;position: absolute;top: -5px;left: 15px;z-index: 3;background: url(../images/u1/a/cj/ci/yy.png) center no-repeat;cursor: pointer;} .ucj_c1 .ubox .tanchuang .out{width: 52px;height: 52px;position: absolute;top: -5px;right: 15px;z-index: 3;background: url(../images/u1/a/cj/ci/out.png) center no-repeat;cursor: pointer;} .ucj_c1 .ubox .tanchuang .tbox{position: absolute;width: 100%;height: 100%;top: 0;left: 0;padding: 50px 40px;} .ucj_c1 .ubox .tanchuang .tbox img{display: block;width: 100%;border-radius: 10px;background: #fff;} .ucj_c1 .ubox .d3{position: relative;width: 100%;} .ucj_c1 .ubox .d3 .swiper1{height: 100%;overflow: hidden; } .ucj_c1 .ubox .prev1{width: 46px;height: 46px;background: url(../images/u1/a/cj/ci/j2.png) center no-repeat;left: auto; right: -18%;margin-top: -70px;} .ucj_c1 .ubox .next1{width: 46px;height: 46px;background: url(../images/u1/a/cj/ci/j1.png) center no-repeat;left: auto; right: -18%;margin-top: 30px;} /* 句子A */ .ucj_j1{} .ucj_j1 .dyzz{z-index: 5;} .ucj_j1 .paopao{z-index: 7;} .ucj_j1 .zi{position: absolute;z-index: 7; width: 25.5%;top: 5%;left: 38%;} .ucj_j1 .ss4{position: absolute;z-index: 7; width: 15%;top: 30%;left: 72%;animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .ucj_j1 .xiong4{position: absolute;z-index: 7; width: 15%;top: auto; bottom: 2%;left: 15%;} .ucj_j1 .ubox{position: absolute;top: 25%; left: 34.5%; width: 31.8%; max-width: 610px;height: 55%;background: transparent;z-index: 5;} .ucj_j1 .ubox .swiper1{width: 100%;height:58%;margin-bottom: 2%;} .ucj_j1 .ubox .swiper1 .swiper-slide .sbox{padding: 0 ;} .ucj_j1 .ubox .swiper1 .swiper-slide .sbox img{display: block; max-width: 100%;margin: 0 auto; margin-bottom: 5px;cursor: pointer;background: url(../images/u1/a/cj/ju/bg1.png) center no-repeat;background-size: contain;} .ucj_j1 .ubox .swiper1 .swiper-slide .sbox img.act{background: url(../images/u1/a/cj/ju/bgh.png) center no-repeat;background-size: contain;} .ucj_j1 .ubox .prev1{width: 46px;height: 46px;background: url(../images/u1/a/cj/ju/j2.png) center no-repeat;left: auto; right: -18%;margin-top: -160px;} .ucj_j1 .ubox .next1{width: 46px;height: 46px;background: url(../images/u1/a/cj/ju/j1.png) center no-repeat;left: auto; right: -18%;margin-top: -50px;} .ucj_j1 .ubox .ceju{width: 100%;height: 37%; border: 10px solid #d99146;border-radius: 10px;} .ucj_j1 .ubox .ceju img{display: block;margin: 0 auto;height: 100%; max-width: 100%;height: auto;position: relative;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);} /* partC */ .un1_c{} .un1_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un1_c .ubox .box .video .abtn{top: 20%;left: 58%;} .un1_c .ubox .box .video .ubox{position: relative;} .un1_c .ubox .box .video .unbox dd{display: none;} .un1_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un1_c .ubox .box .video .udh{} .un1_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 34%;} .un1_c .ubox .box .video .udh1 li:nth-child(1){top: 45%;left: 5%;transform-origin: left top;-webkit-transform-origin: left top;} .un1_c .ubox .box .video .udh1 li:nth-child(2){top: 30%;left: 26%;width: 34%;} .un1_c .ubox .box .video .udh1 li:nth-child(3){top: 60%;left: 56%;width: 46%;} .un1_c .ubox .box .video .udh1 li:nth-child(4){top: 20%;left: 54%;width: 46%;} .un1_c .ubox .box .video .udh1 li:nth-child(5){top: 50%;left: 8%;width: 17%;} .un1_c .ubox .box .video .udh1 li:nth-child(6){top: 22%;left: 15%;width: 36%;} .un1_c .ubox .box .video .udh1 li:nth-child(7){top: 27%;left: 42%;width: 33%;} .un1_c .ubox .box .video .udh1 li:nth-child(8){top: 48%;left: 44%;width: 58%;} .un1_c .ubox .box .video .udh1 li:nth-child(9){top: 46%;left: 24%;width: 48%;} .un1_c .ubox .box .video .udh1 li:nth-child(10){top: 52%;left: 12%;width: 48%;} .un1_c .ubox .box .video .udh1 li:nth-child(11){top: 28%;left: 36%;width: 30%;} .un1_c .ubox .box .video .udh1 li:nth-child(12){top: 10%;left: 50%;width: 50%;} .un1_c .ubox .box .video .udh1 li:nth-child(13){top: 53%;left: 43%;width: 52%;} .un1_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un1_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un1_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un1_c .ubox .box .video .unbox dd .next,.un1_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un1_c .ubox .box .video .unbox dd .prev,.un1_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un1_c .ubtn{} .un1_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un1_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un1_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un1_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un1_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un1_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un1_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un1_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un1_c .ubtn span img{display: block;max-width: 100%;} .un1_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un1_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* part B */ .un1_bookb{} .un1_bookb .ubox{z-index: 8;} .un1_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un1_bookb .ubox .box .video .abtn{top: 20%;left: 55%;} .un1_bookb .ubox .box .video .ubox{position: relative;} .un1_bookb .ubox .box .video .unbox dd{display: none;} .un1_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un1_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 47%;width: 7%;} .un1_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un1_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 12%;left: 50%;} .un1_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 3%;left: 68%;} .un1_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 11%;left: 60%;} .un1_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 95%;} .un1_bookb .ubox .box .video .udh_try {left: 0;top: 82.7%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un1_bookb .ubox .box .video .udh_try li{left: 27%;top: 0;width: 3%;position: absolute;cursor: pointer;} .un1_bookb .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un1_bookb .ubox .box .video .udh_try li:nth-child(2){left: 41.5%;} .un1_bookb .ubox .box .video .udh_try li:nth-child(3){left: 57.5%;} .un1_bookb .ubox .box .video .udh_try li.act img{opacity: 1;} .un1_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un1_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un1_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un1_bookb .ubtn{} .un1_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un1_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un1_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un1_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un1_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un1_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un1_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un1_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .un1_bookb .ubtn span img{display: block;max-width: 100%;} .un1_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un1_bookb .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un1_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un1_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 5%;} .un1_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 450px;height: 30px;cursor: pointer;margin-bottom: 10px;} .un1_bookb .ubox .box .video .udh3 li:nth-child(1){height: 70px;} .un1_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un1_bookb .ubox .box .video .udh3 li .img img{width: 450px;max-width: 450px;position: absolute;top: 0;right: 0;} .un1_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un1_bookb .ubox .box .video .udh3 li .lbtn img{width: 450px;max-width: 450px;} .un1_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un1_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(1){width: 65%;top: 73%;left: 15%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(2){top: 84%;width: 55%;left: 35%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(3){top: 38%;width: 16%;left: 30%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(4){top: 38%;width: 10%;left: 63%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(5){top: 52%;width:18%;left: 50%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(6){top: 66%;width:32%;left:20%;} .un1_bookb .ubox .box .video .udh1 li:nth-child(7){top: 66%;width:16%;left:55%;} .un1_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un1_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un1_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un1_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un1_bookb .ubox .box .video .udh4{width: 100%;height: 8%;top: 77.5%;right: 0%;z-index: 3;position: absolute;} .un1_bookb .ubox .box .video .udh4 li{position: absolute;width: 25%;height: 100%;top: 0;left: 0;} .un1_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 24px;font-family: com; text-align: center; } .un1_bookb .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 20%;} .un1_bookb .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 55%;} .un1_bookb .ubox .box .video .udh4_1{width: 100%;height: 20%;top: 35%;right: 0%;z-index: 3;position: absolute;} .un1_bookb .ubox .box .video .udh4_1 li{width:8% ;position: absolute;top: 0;left: 0;cursor: pointer;} .un1_bookb .ubox .box .video .udh4_1 li img{opacity: 0;} .un1_bookb .ubox .box .video .udh4_1 li:nth-child(1){top: 9%;left: 28%;} .un1_bookb .ubox .box .video .udh4_1 li:nth-child(2){top: 7%;left: 37%;width: 10%;} .un1_bookb .ubox .box .video .udh4_1 li:nth-child(3){top: 65%;left: 60%;} .un1_bookb .ubox .box .video .udh4_1 li:nth-child(4){top: 65%;left: 69%;width: 10%;} .un1_bookb .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* 第二单元 */ .un2 .ubox .box .video .abtn{width: 18%;left: 48%;top: 10%;} .un2 .ubox .box .video .udh1 li:nth-child(1){width: 44%;top: 25%;left: 0%;} .un2 .ubox .box .video .udh1 li:nth-child(2){width: 29%;top: 30%;left: 32%;} .un2 .ubox .box .video .udh1 li:nth-child(3){width: 40%;top: 36%;left: 15%;} .un2 .ubox .box .video .udh1 li:nth-child(4){width: 28%;top: 40%;left: 32%;} .un2 .ubox .box .video .udh1 li:nth-child(5){width: 35%;top: 22%;left: 48%;} .un2 .ubox .box .video .udh1 li:nth-child(6){width: 35%;top: 27%;left: 60%;transform-origin: center right;-webkit-transform-origin: center right;} /* 书本朗诵 */ .un2_book{} .un2_book .ubox{z-index: 8;} .un2_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un2_book .ubox .box .video .abtn{top: 18%;left: 53%;} .un2_book .ubox .box .video .ubox{position: relative;} .un2_book .ubox .box .video .unbox dd{display: none;} .un2_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un2_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 11%;left: 40%;width: 7%;} .un2_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un2_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 7%;left: 55%;} .un2_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 10%;left: 55%;} .un2_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 11%;left: 60%;} .un2_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un2_book .ubox .box .video .udh_try {left: 0;top: 63%;width: 100%;height: 5%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un2_book .ubox .box .video .udh_try li{left: 72%;top: 0;width: 8%;position: absolute;cursor: pointer;height: 100%;} .un2_book .ubox .box .video .udh_try li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .un2_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un2_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un2_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un2_book .ubtn{} .un2_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un2_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un2_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un2_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un2_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un2_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un2_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un2_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un2_book .ubtn span img{display: block;max-width: 100%;} .un2_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un2_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un2_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un2_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 2%;bottom: 5%;} .un2_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 500px;height: 30px;cursor: pointer;} .un2_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un2_book .ubox .box .video .udh3 li .img img{width: 500px;max-width: 500px;position: absolute;top: 0;right: 0;} .un2_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un2_book .ubox .box .video .udh3 li .lbtn img{width: 500px;max-width: 500px;} .un2_book .ubox .box .video .udh3 li.act .img{width: 0;} .un2_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un2_book .ubox .box .video .udh3 li:nth-child(4),.un2_book .ubox .box .video .udh3 li:nth-child(7),.un2_book .ubox .box .video .udh3 li:nth-child(8){height: 70px;margin-bottom: 5px;} .un2_book .ubox .box .video .udh1 li:nth-child(1){width: 40%;top: 70%;left: 5%;} .un2_book .ubox .box .video .udh1 li:nth-child(2){width: 50%;top: 68%;left: 50%;} .un2_book .ubox .box .video .udh1 li:nth-child(3){width: 20%;top: 19%;left: 10%;} .un2_book .ubox .box .video .udh1 li:nth-child(4){width: 20%;top: 14%;left: 17%;} .un2_book .ubox .box .video .udh1 li:nth-child(5){width: 20%;top: 14%;left: 28%;} .un2_book .ubox .box .video .udh1 li:nth-child(6){width: 20%;top: 14%;left: 41%;} .un2_book .ubox .box .video .udh1 li:nth-child(7){width: 20%;top: 14%;left: 53%;} .un2_book .ubox .box .video .udh1 li:nth-child(8){width: 20%;top: 14%;left: 63%;} .un2_book .ubox .box .video .udh1 li:nth-child(9){width: 20%;top: 14%;left: 74%;} .un2_book .ubox .box .video .udh1 li:nth-child(10){width: 34%;top: 32%;left: 61%;} .un2_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 5%;} .un2_book .ubox .box .video .udh2 li:nth-child(1){left: 9%;top: 50%;} .un2_book .ubox .box .video .udh2 li:nth-child(2){left: 10.5%;top: 51%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(3){left: 14.3%;top: 50%;} .un2_book .ubox .box .video .udh2 li:nth-child(4){left: 27%;top: 53%;} .un2_book .ubox .box .video .udh2 li:nth-child(5){left: 29%;top: 54%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(6){left: 33%;top: 53%;} .un2_book .ubox .box .video .udh2 li:nth-child(7){left: 68%;top: 48%;} .un2_book .ubox .box .video .udh2 li:nth-child(8){left: 70.5%;top: 48%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(9){left: 74.5%;top: 47.5%;} .un2_book .ubox .box .video .udh2 li:nth-child(10){left: 3%;top: 65%;} .un2_book .ubox .box .video .udh2 li:nth-child(11){left: 4.5%;top: 66%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(12){left: 33%;top: 62%;} .un2_book .ubox .box .video .udh2 li:nth-child(13){left: 34.8%;top: 62.3%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(14){left: 38.8%;top: 61.5%;} .un2_book .ubox .box .video .udh2 li:nth-child(15){left: 60%;top: 67%;width: 7%;} .un2_book .ubox .box .video .udh2 li:nth-child(16){left: 64%;top: 66.5%;} .un2_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un2_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un2_book .ubox .box .video .udh4{width: 100%;height: 25%;top: 52.5%;right: 0%;z-index: 3;position: absolute;} .un2_book .ubox .box .video .udh4 li{position: absolute;width: 8%;height: 22%;top: 0;left: 0;} .un2_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com;text-align: center;} .un2_book .ubox .box .video .udh4 li:nth-child(1){top: 5%;left: 22.5%;} .un2_book .ubox .box .video .udh4 li:nth-child(2){top: 7%;left: 51%;} .un2_book .ubox .box .video .udh4 li:nth-child(3){top: 5%;left: 66%;} .un2_book .ubox .box .video .udh4 li:nth-child(4){top: 26%;left: 43%;} .un2_book .ubox .box .video .udh4 li:nth-child(5){top: 78%;left: 11%;width: 73%;} .un2_book .ubox .box .video .udh4_1{width: 100%;height: 40%;top: 35%;right: 0%;z-index: 3;position: absolute;} .un2_book .ubox .box .video .udh4_1 li{width:11% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 32%;} .un2_book .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(1){top: 13%;left: 6%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(2){top: 13%;left: 17.5%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(3){top: 12%;left: 30%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(4){top: 14%;left: 64%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(5){top: 14%;left: 75.5%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(6){top: 14%;left: 87%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(7){top: 48%;left: 33.5%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(8){top: 48%;left: 45.5%;} .un2_book .ubox .box .video .udh4_1 li:nth-child(9){top: 48%;left: 57%;} .un2_book .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* partC */ .un2_c{} .un2_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un2_c .ubox .box .video .abtn{top: 20%;left: 60%;} .un2_c .ubox .box .video .ubox{position: relative;} .un2_c .ubox .box .video .unbox dd{display: none;} .un2_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un2_c .ubox .box .video .udh{} .un2_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 50%;} .un2_c .ubox .box .video .udh1 li:nth-child(1){top: 38%;left: 10%;transform-origin: left top;-webkit-transform-origin: left top;} .un2_c .ubox .box .video .udh1 li:nth-child(2){top: 64%;left: 23%;width: 24%;} .un2_c .ubox .box .video .udh1 li:nth-child(3){top: 46%;left: 45%;width: 46%;} .un2_c .ubox .box .video .udh1 li:nth-child(4){top: 56%;left: 40%;width: 56%;} .un2_c .ubox .box .video .udh1 li:nth-child(5){top: 35%;left: 2%;width: 40%;} .un2_c .ubox .box .video .udh1 li:nth-child(6){top: 55%;left: 22%;width: 32%;} .un2_c .ubox .box .video .udh1 li:nth-child(7){top: 28%;left: 33%;width: 34%;} .un2_c .ubox .box .video .udh1 li:nth-child(8){top:55%;left: 42%;width: 43%;} .un2_c .ubox .box .video .udh1 li:nth-child(9){top:57%;left: 0%;width: 41%;} .un2_c .ubox .box .video .udh1 li:nth-child(10){top:30%;left: -5%;width: 54%;} .un2_c .ubox .box .video .udh1 li:nth-child(11){top:25%;left: 30%;width: 51%;} .un2_c .ubox .box .video .udh1 li:nth-child(12){top:45%;left: 68%;width: 18%;} .un2_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un2_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un2_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un2_c .ubox .box .video .unbox dd .next,.un2_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un2_c .ubox .box .video .unbox dd .prev,.un2_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un2_c .ubtn{} .un2_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un2_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un2_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un2_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un2_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un2_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un2_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un2_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un2_c .ubtn span img{display: block;max-width: 100%;} .un2_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un2_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* part B */ .un2_bookb{} .un2_bookb .ubox{z-index: 8;} .un2_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un2_bookb .ubox .box .video .abtn{top: 20%;left: 55%;} .un2_bookb .ubox .box .video .ubox{position: relative;} .un2_bookb .ubox .box .video .unbox dd{display: none;} .un2_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un2_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 17%;left: 47%;width: 7%;} .un2_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un2_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 5%;left: 48%;} .un2_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 1%;left: 72%;} .un2_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 11%;left: 50%;} .un2_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 95%;} .un2_bookb .ubox .box .video .udh_try {left: 0;top: 71%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un2_bookb .ubox .box .video .udh_try li{left: 8%;top: 0;width: 6%;position: absolute;cursor: pointer;} .un2_bookb .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un2_bookb .ubox .box .video .udh_try li:nth-child(2){left: 52.5%;} .un2_bookb .ubox .box .video .udh_try li.act img{opacity: 1;} .un2_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un2_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un2_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un2_bookb .ubtn{} .un2_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un2_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un2_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un2_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un2_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un2_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un2_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un2_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .un2_bookb .ubtn span img{display: block;max-width: 100%;} .un2_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un2_bookb .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un2_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un2_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 5%;} .un2_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 400px;height: 30px;cursor: pointer;margin-bottom: 10px;} .un2_bookb .ubox .box .video .udh3 li:nth-child(4),.un2_bookb .ubox .box .video .udh3 li:nth-child(5),.un2_bookb .ubox .box .video .udh3 li:nth-child(6){height: 70px;} .un2_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un2_bookb .ubox .box .video .udh3 li .img img{width: 400px;max-width: 400px;position: absolute;top: 0;right: 0;} .un2_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un2_bookb .ubox .box .video .udh3 li .lbtn img{width: 400px;max-width: 400px;} .un2_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un2_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(1){width: 65%;top: 55%;left: 25%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(2){top: 82%;width: 36%;left: 40%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(3){top: 13%;width: 40%;left: 3.5%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(4){top: 14%;width: 26%;left: 22%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(5){top: 7%;width: 32%;left: 35%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(6){top: 12%;width: 30%;left: 54.5%;} .un2_bookb .ubox .box .video .udh1 li:nth-child(7){top: 11%;width: 36%;left: 70%;} .un2_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un2_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un2_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un2_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un2_bookb .ubox .box .video .udh4{width: 100%;height: 8%;top: 77%;right: 0%;z-index: 3;position: absolute;} .un2_bookb .ubox .box .video .udh4 li{position: absolute;width: 25%;height: 100%;top: 0;left: 0;} .un2_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 24px;font-family: com; text-align: center; } .un2_bookb .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 20%;} .un2_bookb .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 55%;} .un2_bookb .ubox .box .video .udh4_1{width: 100%;height: 20%;top: 35%;right: 0%;z-index: 3;position: absolute;} .un2_bookb .ubox .box .video .udh4_1 li{width:8% ;position: absolute;top: 0;left: 0;cursor: pointer;} .un2_bookb .ubox .box .video .udh4_1 li img{opacity: 0;} .un2_bookb .ubox .box .video .udh4_1 li:nth-child(1){top: 9%;left: 28%;} .un2_bookb .ubox .box .video .udh4_1 li:nth-child(2){top: 7%;left: 37%;width: 10%;} .un2_bookb .ubox .box .video .udh4_1 li:nth-child(3){top: 65%;left: 60%;} .un2_bookb .ubox .box .video .udh4_1 li:nth-child(4){top: 65%;left: 69%;width: 10%;} .un2_bookb .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* 第三单元 */ .un3 .ubox .box .video .abtn{width: 18%;left: 48%;top: 8%;} .un3 .ubox .box .video .udh1 li:nth-child(1){width: 46%;top: 28%;left: 7%;} .un3 .ubox .box .video .udh1 li:nth-child(2){width: 18%;top: 39%;left: 10%;} .un3 .ubox .box .video .udh1 li:nth-child(3){width: 46%;top: 78%;left: 17%;} .un3 .ubox .box .video .udh1 li:nth-child(4){width: 30%;top: 14%;left: 48%;transform-origin: top center;-webkit-transform-origin: top center;} .un3 .ubox .box .video .udh1 li:nth-child(5){width: 20%;top: 20%;left: 62%;} .un3 .ubox .box .video .udh1 li:nth-child(6){width: 40%;top: 40%;left: 45%;} .un3 .ubox .box .video .udh1 li:nth-child(7){width: 20%;top: 45%;left: 72%;} .un3 .ubox .box .video .udh1 li:nth-child(8){width: 38%;top: 54%;left: 50%;} .un3 .ubox .box .video .udh1 li:nth-child(9){width: 18%;top: 80%;left: 60%;} .un3 .ubox .box .video .udh1 li:nth-child(10){width: 26%;top: 70%;left: 65%;} /* 书本朗诵 */ .un3_book{} .un3_book .ubox{z-index: 8;} .un3_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un3_book .ubox .box .video .abtn{top: 18%;left: 53%;} .un3_book .ubox .box .video .ubox{position: relative;} .un3_book .ubox .box .video .unbox dd{display: none;} .un3_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un3_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 50%;width: 7%;} .un3_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un3_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 10%;left: 55%;} .un3_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 10%;left: 55%;} .un3_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 10%;left: 55%;} .un3_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un3_book .ubox .box .video .udh_try {left: 0;top: 58%;width: 100%;height: 5%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un3_book .ubox .box .video .udh_try li{left: 46%;top: 0;width: 10%;position: absolute;cursor: pointer;height: 100%;} .un3_book .ubox .box .video .udh_try li:nth-child(2){left: 62%;} .un3_book .ubox .box .video .udh_try li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .un3_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un3_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un3_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un3_book .ubtn{} .un3_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un3_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un3_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un3_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un3_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un3_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un3_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un3_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un3_book .ubtn span img{display: block;max-width: 100%;} .un3_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un3_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un3_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un3_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 5%;} .un3_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 400px;height: 30px;cursor: pointer;left: 0;margin-bottom: 20px;} .un3_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un3_book .ubox .box .video .udh3 li .img img{width: 400px;max-width: 400px;position: absolute;top: 0;right: 0;} .un3_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un3_book .ubox .box .video .udh3 li .lbtn img{width: 400px;max-width: 400px;} .un3_book .ubox .box .video .udh3 li.act .img{width: 0;} .un3_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un3_book .ubox .box .video .udh3 li:nth-child(6){left: 1%;} .un3_book .ubox .box .video .udh1 li:nth-child(1){width: 50%;top: 20%;left: 12%;} .un3_book .ubox .box .video .udh1 li:nth-child(2){width: 56%;top: 20%;left: 40%;} .un3_book .ubox .box .video .udh1 li:nth-child(3){width: 30%;top: 50%;left: 50%;} .un3_book .ubox .box .video .udh1 li:nth-child(4){width: 14%;top: 70%;left: 30%;} .un3_book .ubox .box .video .udh1 li:nth-child(5){width: 34%;top: 60%;left: 55%;} .un3_book .ubox .box .video .udh1 li:nth-child(6){width: 34%;top: 85%;left: 37%;} .un3_book .ubox .box .video .udh1 li:nth-child(7){width: 20%;top: 87%;left: 63%;transform-origin: center bottom;-webkit-transform-origin: center bottom;} .un3_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 5%;} .un3_book .ubox .box .video .udh2 li:nth-child(1){left: 13%;top: 33%;} .un3_book .ubox .box .video .udh2 li:nth-child(2){left: 14.2%;top: 33%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(3){left: 25%;top: 32%;width: 8%;} .un3_book .ubox .box .video .udh2 li:nth-child(4){left:28.2%;top: 32%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(5){left:32.7%;top: 32%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(6){left:42.2%;top: 31%;width: 4.8%;} .un3_book .ubox .box .video .udh2 li:nth-child(7){left:43.8%;top: 31%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(8){left:63%;top: 29%;width: 4.8%;} .un3_book .ubox .box .video .udh2 li:nth-child(9){left:64.5%;top: 29.6%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(10){left:69.5%;top: 29%;width: 4.8%;} .un3_book .ubox .box .video .udh2 li:nth-child(11){left:23%;top: 74%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(12){left:26.4%;top: 74.5%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(13){left:39%;top: 74.5%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(14){left:43%;top: 74.5%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(15){left:55%;top: 76%;width: 14%;} .un3_book .ubox .box .video .udh2 li:nth-child(16){left:63.5%;top: 76%;width: 8.5%;} .un3_book .ubox .box .video .udh2 li:nth-child(17){left:78%;top: 78%;width: 14%;} .un3_book .ubox .box .video .udh2 li:nth-child(18){left:86.5%;top: 78%;width: 8.5%;} .un3_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un3_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un3_book .ubox .box .video .udh4{width: 100%;height: 25%;top: 52.5%;right: 0%;z-index: 3;position: absolute;} .un3_book .ubox .box .video .udh4 li{position: absolute;width: 8%;height: 22%;top: 0;left: 0;} .un3_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;text-align: center;} .un3_book .ubox .box .video .udh4 li:nth-child(1){top: 5%;left: 24%;} .un3_book .ubox .box .video .udh4 li:nth-child(2){top: 26%;left: 45%;} .un3_book .ubox .box .video .udh4 li:nth-child(3){top: 5%;left: 62%;} .un3_book .ubox .box .video .udh4 li:nth-child(4){top: 95%;left: 13%;width: 73%;} .un3_book .ubox .box .video .udh4_1{width: 100%;height: 40%;top: 35%;right: 0%;z-index: 3;position: absolute;} .un3_book .ubox .box .video .udh4_1 li{width:11% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 30%;} .un3_book .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(1){top: 13%;left: 8%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(2){top: 13%;left: 18%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(3){top: 12%;left: 31%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(4){top: 14%;left: 54%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(5){top: 14%;left: 65%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(6){top: 14%;left: 77%;width: 15%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(7){top: 42%;left: 8%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(8){top: 42%;left: 18%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(9){top: 42%;left: 31%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(10){top: 42%;left: 54%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(11){top: 42%;left: 65%;} .un3_book .ubox .box .video .udh4_1 li:nth-child(12){top: 42%;left: 77%;} .un3_book .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* part B */ .un3_bookb{} .un3_bookb .ubox{z-index: 8;} .un3_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un3_bookb .ubox .box .video .abtn{top: 20%;left: 55%;} .un3_bookb .ubox .box .video .ubox{position: relative;} .un3_bookb .ubox .box .video .unbox dd{display: none;} .un3_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un3_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 50%;width: 7%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 3%;left: 58%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 0%;left: 75%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 16%;left: 60%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 82%;} .un3_bookb .ubox .box .video .unbox dd:nth-child(7) .abtn{top: 13%;left: 95%;} .un3_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un3_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un3_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un3_bookb .ubtn{} .un3_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un3_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un3_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un3_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un3_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un3_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un3_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un3_bookb .ubtn span:nth-child(7){top: 76%;left: 74%;} .un3_bookb .ubtn span img{display: block;max-width: 100%;} .un3_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un3_bookb .ubtn span:nth-child(n + 4) div{left: -10%;top: 41%;} .un3_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un3_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 15%;} .un3_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 600px;height: 35px;cursor: pointer;margin-bottom: 8px;} .un3_bookb .ubox .box .video .udh3 li:nth-child(4),.un3_bookb .ubox .box .video .udh3 li:nth-child(2){height: 70px;} .un3_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un3_bookb .ubox .box .video .udh3 li .img img{width: 600px;max-width: 600px;position: absolute;top: 0;right: 0;} .un3_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un3_bookb .ubox .box .video .udh3 li .lbtn img{width: 600px;max-width: 600px;} .un3_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un3_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(1){width: 40%;top: 65%;left: 20%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(2){top: 67%;width: 34%;left: 45%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(3){top: 13%;width: 16%;left: 17%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(4){top: 10%;width: 24%;left: 38%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(5){top: 10%;width: 26%;left: 63%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(6){top: 36%;width: 12%;left: 30%;} .un3_bookb .ubox .box .video .udh1 li:nth-child(7){top: 36%;width: 18%;left: 56%;} .un3_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un3_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un3_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un3_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un3_bookb .ubox .box .video .udh4{width: 100%;height: 8%;top: 80%;right: 0%;z-index: 3;position: absolute;} .un3_bookb .ubox .box .video .udh4 li{position: absolute;width: 17%;height: 100%;top: 0;left: 58%;} .un3_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 24px;font-family: com; text-align: center; } .un3_bookb .ubox .box .video .udh4_1{width: 100%;height: 20%;top: 35%;right: 0%;z-index: 3;position: absolute;} .un3_bookb .ubox .box .video .udh4_1 li{width:8% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 40px;} .un3_bookb .ubox .box .video .udh4_1 li img{opacity: 0;position: relative;top: 60%;left: 40%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);} .un3_bookb .ubox .box .video .udh4_1 li:nth-child(1){top: 9%;left: 25%;} .un3_bookb .ubox .box .video .udh4_1 li:nth-child(2){top: 9%;left: 53%;} .un3_bookb .ubox .box .video .udh4_1 li:nth-child(3){top: 9%;left: 78%;} .un3_bookb .ubox .box .video .udh4_1 li.act img{opacity: 1;} .un3_bookb .ubox .box .video .udh4_2{height: 10%;top:88%} .un3_bookb .ubox .box .video .udh4_2 li{height: 100%;width: 5%;} .un3_bookb .ubox .box .video .udh4_2 li:nth-child(1){left: 18%;} .un3_bookb .ubox .box .video .udh4_2 li:nth-child(2){left: 43%;} .un3_bookb .ubox .box .video .udh4_2 li:nth-child(3){left: 69%;} .un3_bookb .ubox .box .video .udh5{width: 100%;height: 40%;top: 29.5%;right: 0%;z-index: 3;position: absolute;} .un3_bookb .ubox .box .video .udh5 li{position: absolute;width: 15%;height: 20%;top: 0;left: 25%;} .un3_bookb .ubox .box .video .udh5 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 26px;font-family: com; text-align: center; } .un3_bookb .ubox .box .video .udh5 li:nth-child(2){left: 72%;top: 3%;} .un3_bookb .ubox .box .video .udh5 li:nth-child(3){left: 26%;top: 75%;width: 18%;} .un3_bookb .ubox .box .video .udh5 li:nth-child(4){left: 73%;top: 75%;} /* partC */ .un3_c{} .un3_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un3_c .ubox .box .video .abtn{top: 20%;left: 60%;} .un3_c .ubox .box .video .ubox{position: relative;} .un3_c .ubox .box .video .unbox dd{display: none;} .un3_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un3_c .ubox .box .video .udh{} .un3_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 24%;} .un3_c .ubox .box .video .udh1 li:nth-child(1){top: 36%;left: 4%;} .un3_c .ubox .box .video .udh1 li:nth-child(2){top: 46%;left: 20%;width: 46%;} .un3_c .ubox .box .video .udh1 li:nth-child(3){top: 70%;left: 8%;width: 28%;} .un3_c .ubox .box .video .udh1 li:nth-child(4){top: 65%;left: 23%;width: 34%;} .un3_c .ubox .box .video .udh1 li:nth-child(5){top: 34%;left: 43%;width: 36%;} .un3_c .ubox .box .video .udh1 li:nth-child(6){top: 58%;left: 55%;width: 32%;} .un3_c .ubox .box .video .udh1 li:nth-child(7){top: 35%;left: 0%;width: 40%;} .un3_c .ubox .box .video .udh1 li:nth-child(8){top: 17%;left: 40%;width: 10%;} .un3_c .ubox .box .video .udh1 li:nth-child(9){top: 35%;left: 70%;width: 30%;} .un3_c .ubox .box .video .udh1 li:nth-child(10){top: 35%;left: 40%;width: 36%;} .un3_c .ubox .box .video .udh1 li:nth-child(11){top: 38%;left: 25%;width: 36%;} .un3_c .ubox .box .video .udh1 li:nth-child(12){top: 38%;left: 0%;width: 36%;} .un3_c .ubox .box .video .udh1 li:nth-child(13){top: 15%;left: 50%;width: 32%;} .un3_c .ubox .box .video .udh1 li:nth-child(14){top: 35%;left: 45%;width: 45%;} .un3_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un3_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un3_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un3_c .ubox .box .video .unbox dd .next,.un3_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un3_c .ubox .box .video .unbox dd .prev,.un3_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un3_c .ubtn{} .un3_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un3_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un3_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un3_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un3_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un3_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un3_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un3_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un3_c .ubtn span img{display: block;max-width: 100%;} .un3_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un3_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* 第四单元 */ .un4 .ubox .box .video .abtn{width: 18%;left: 55%;top: 12%;} .un4 .ubox .box .video .udh1 li:nth-child(1){width: 30%;top: 18%;left: 30%;} .un4 .ubox .box .video .udh1 li:nth-child(2){width: 12%;top: 22%;left: 20%;} .un4 .ubox .box .video .udh1 li:nth-child(3){width: 24%;top: 31%;left: 33%;} .un4 .ubox .box .video .udh1 li:nth-child(4){width: 30%;top: 36%;left: 15%;} .un4 .ubox .box .video .udh1 li:nth-child(5){width: 16%;top: 43%;left: 33%;} .un4 .ubox .box .video .udh1 li:nth-child(6){width: 20%;top: 44%;left: 17%;} .un4 .ubox .box .video .udh1 li:nth-child(7){width: 30%;top: 59%;left: 20%;} .un4 .ubox .box .video .udh1 li:nth-child(8){width: 20%;top: 27%;left: 53%;} .un4 .ubox .box .video .udh1 li:nth-child(9){width: 44%;top: 35%;left: 55%;} .un4 .ubox .box .video .udh1 li:nth-child(10){width: 18%;top: 48%;left: 55%;} .un4 .ubox .box .video .udh1 li:nth-child(11){width: 26%;top: 60%;left: 59%;} .un4 .ubox .box .video .udh1 li:nth-child(12){width: 40%;top: 68%;left: 39%;} /* 书本朗诵 */ .un4_book{} .un4_book .ubox{z-index: 8;} .un4_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un4_book .ubox .box .video .abtn{top: 20%;left: 55%;} .un4_book .ubox .box .video .ubox{position: relative;} .un4_book .ubox .box .video .unbox dd{display: none;} .un4_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un4_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 5%;left: 40%;width: 7%;} .un4_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un4_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 5%;left: 55%;} .un4_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 9%;left: 50%;} .un4_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 8%;left: 55%;} .un4_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un4_book .ubox .box .video .udh_try {left: 0;top: 48%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un4_book .ubox .box .video .udh_try li{left: 11.5%;top: 0;width: 7%;position: absolute;cursor: pointer;} .un4_book .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un4_book .ubox .box .video .udh_try li:nth-child(2){left: 49%;} .un4_book .ubox .box .video .udh_try li.act img{opacity: 1;} .un4_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un4_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un4_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un4_book .ubtn{} .un4_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un4_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un4_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un4_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un4_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un4_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un4_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un4_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un4_book .ubtn span img{display: block;max-width: 100%;} .un4_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un4_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un4_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un4_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 10%;top: 15%;} .un4_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 475px;height: 32px;cursor: pointer;margin-bottom: 10px;} .un4_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un4_book .ubox .box .video .udh3 li .img img{width: 475px;max-width: 475px;position: absolute;top: 0;right: 0;} .un4_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un4_book .ubox .box .video .udh3 li .lbtn img{width: 475px;max-width: 475px;} .un4_book .ubox .box .video .udh3 li.act .img{width: 0;} .un4_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un4_book .ubox .box .video .udh3 li:nth-child(1){height: 108px;} .un4_book .ubox .box .video .udh3 li:nth-child(3){height: 72px;} .un4_book .ubox .box .video .udh1 li:nth-child(1){width: 28%;top: 55%;left: 58%; transform-origin: center bottom;-webkit-transform-origin: center bottom;} .un4_book .ubox .box .video .udh1 li:nth-child(2){width: 34%;top: 73%;left: 59%;transform-origin: center bottom;-webkit-transform-origin: center bottom;} .un4_book .ubox .box .video .udh1 li:nth-child(3){width: 23%;top: 24%;left: 7%;} .un4_book .ubox .box .video .udh1 li:nth-child(4){width: 52%;top: 15%;left:13%;} .un4_book .ubox .box .video .udh1 li:nth-child(5){width: 30%;top: 11%;left:47%;} .un4_book .ubox .box .video .udh1 li:nth-child(6){width: 42%;top: 6%;left:52%;transform-origin: center right;-webkit-transform-origin: center right;} .un4_book .ubox .box .video .udh1 li:nth-child(7){width: 40%;top: 85%;left:20%;} .un4_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 10%;} .un4_book .ubox .box .video .udh2 li:nth-child(1){left: 22%;top: 38%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(2){left: 23%;top: 38%;} .un4_book .ubox .box .video .udh2 li:nth-child(3){left: 29%;top: 38%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(4){left: 35%;top: 37%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(5){left: 35.5%;top: 36.5%;} .un4_book .ubox .box .video .udh2 li:nth-child(6){left: 41.5%;top: 36.8%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(7){left: 54%;top: 34%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(8){left: 54.5%;top: 34%;} .un4_book .ubox .box .video .udh2 li:nth-child(9){left: 58.5%;top: 34.3%;width: 15%;} .un4_book .ubox .box .video .udh2 li:nth-child(10){left: 71%;top: 34%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(11){left: 72%;top: 33%;} .un4_book .ubox .box .video .udh2 li:nth-child(12){left: 78%;top: 33%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(13){left: 5%;top: 62%;width: 14%;} .un4_book .ubox .box .video .udh2 li:nth-child(14){left: 13%;top: 61%;} .un4_book .ubox .box .video .udh2 li:nth-child(15){left: 19%;top: 61.5%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(16){left: 35%;top: 58%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(17){left: 35.5%;top: 58%;} .un4_book .ubox .box .video .udh2 li:nth-child(18){left: 41.5%;top: 58%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(19){left: 57%;top: 60%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(20){left: 57.6%;top: 59%;} .un4_book .ubox .box .video .udh2 li:nth-child(21){left: 69%;top: 57%;width: 5%;} .un4_book .ubox .box .video .udh2 li:nth-child(22){left: 70%;top: 57%;} .un4_book .ubox .box .video .udh2 li:nth-child(23){left: 74%;top: 58%;width: 14%;} .un4_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un4_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un4_book .ubox .box .video .udh4{width: 100%;height: 25%;top: 64%;right: 0%;z-index: 3;position: absolute;} .un4_book .ubox .box .video .udh4 li{position: absolute;width: 6%;height: 22%;top: 0;left: 0;} .un4_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com;} .un4_book .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 13.5%;} .un4_book .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 20.5%;} .un4_book .ubox .box .video .udh4 li:nth-child(3){top: 0%;left: 38%;} .un4_book .ubox .box .video .udh4 li:nth-child(4){top: 0%;left: 45%;} .un4_book .ubox .box .video .udh4 li:nth-child(5){top: 0%;left: 67.5%;width: 11%;} .un4_book .ubox .box .video .udh4 li:nth-child(6){top: 0%;left: 80%;width: 8%;} .un4_book .ubox .box .video .udh4 li:nth-child(7){top:62%;left: 4%;width: 77%;} .un4_book .ubox .box .video .udh4_1{width: 100%;height: 40%;top: 37%;right: 0%;z-index: 3;position: absolute;} .un4_book .ubox .box .video .udh4_1 li{width:11% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 30%;} .un4_book .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(1){top: 13%;left: 4%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(2){top: 13%;left: 16%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(3){top: 7%;left: 33%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(4){top: 7%;left: 45%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(5){top: 13%;left: 66%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(6){top: 13%;left: 78%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(7){top: 42%;left: 4%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(8){top: 42%;left: 16%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(9){top: 36%;left: 33%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(10){top: 36%;left: 44%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(11){top: 42%;left: 64%;width: 13%;} .un4_book .ubox .box .video .udh4_1 li:nth-child(12){top: 42%;left: 81%;width: 17%;} .un4_book .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* partC */ .un4_c{} .un4_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un4_c .ubox .box .video .abtn{top: 17%;left: 58%;} .un4_c .ubox .box .video .ubox{position: relative;} .un4_c .ubox .box .video .unbox dd{display: none;} .un4_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un4_c .ubox .box .video .udh{} .un4_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 46%;} .un4_c .ubox .box .video .udh1 li:nth-child(1){top: 50%;left: 8%;} .un4_c .ubox .box .video .udh1 li:nth-child(2){top: 44%;left: 40%;width: 42%;} .un4_c .ubox .box .video .udh1 li:nth-child(3){top: 50%;left: 38%;width: 40%;} .un4_c .ubox .box .video .udh1 li:nth-child(4){top: 35%;left: 3%;width: 32%;} .un4_c .ubox .box .video .udh1 li:nth-child(5){top:14%;left: 63%;width: 34%;} .un4_c .ubox .box .video .udh1 li:nth-child(6){top: 36%;left: 52%;width: 48%;} .un4_c .ubox .box .video .udh1 li:nth-child(7){top: 30%;left: 0%;width: 56%;} .un4_c .ubox .box .video .udh1 li:nth-child(8){top: 5%;left: 25%;width: 44%;} .un4_c .ubox .box .video .udh1 li:nth-child(9){top: 27%;left: 35%;width: 42%;} .un4_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un4_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un4_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un4_c .ubox .box .video .unbox dd .next,.un4_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un4_c .ubox .box .video .unbox dd .prev,.un4_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un4_c .ubtn{} .un4_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un4_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un4_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un4_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un4_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un4_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un4_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un4_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un4_c .ubtn span img{display: block;max-width: 100%;} .un4_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un4_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* part B */ .un4_bookb{} .un4_bookb .ubox{z-index: 8;} .un4_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un4_bookb .ubox .box .video .abtn{top: 22%;left: 55%;} .un4_bookb .ubox .box .video .ubox{position: relative;} .un4_bookb .ubox .box .video .unbox dd{display: none;} .un4_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un4_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 47%;width: 7%;} .un4_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un4_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 2%;left: 52%;} .un4_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 5%;left: 82%;} .un4_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 5%;left: 60%;} .un4_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 95%;} .un4_bookb .ubox .box .video .udh_try {left: 0;top: 63%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un4_bookb .ubox .box .video .udh_try li{left: 18%;top: 0;width: 6%;position: absolute;cursor: pointer;} .un4_bookb .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un4_bookb .ubox .box .video .udh_try li:nth-child(2){left: 48%;} .un4_bookb .ubox .box .video .udh_try li.act img{opacity: 1;} .un4_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un4_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un4_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un4_bookb .ubtn{} .un4_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un4_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un4_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un4_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un4_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un4_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un4_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un4_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .un4_bookb .ubtn span img{display: block;max-width: 100%;} .un4_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un4_bookb .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un4_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un4_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 15%;} .un4_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 400px;height: 30px;cursor: pointer;margin-bottom: 10px;} .un4_bookb .ubox .box .video .udh3 li:nth-child(1){height: 60px;} .un4_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un4_bookb .ubox .box .video .udh3 li .img img{width: 400px;max-width: 400px;position: absolute;top: 0;right: 0;} .un4_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un4_bookb .ubox .box .video .udh3 li .lbtn img{width: 400px;max-width: 400px;} .un4_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un4_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(1){width: 35%;top: 55%;left: 35%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(2){top: 70%;width: 45%;left: 45%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(3){top: 28%;width: 16%;left: 1%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(4){top: 20%;width: 32%;left: 5%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(5){top: 15%;width: 22%;left: 30%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(6){top: 6%;width: 36%;left: 43%;} .un4_bookb .ubox .box .video .udh1 li:nth-child(7){top:0%;width: 36%;left: 65%;} .un4_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un4_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un4_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un4_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un4_bookb .ubox .box .video .udh4{width: 100%;height: 8%;top: 71.5%;right: 0%;z-index: 3;position: absolute;} .un4_bookb .ubox .box .video .udh4 li{position: absolute;width: 10%;height: 100%;top: 0;left: 0;} .un4_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 28px;font-family: com; text-align: center; } .un4_bookb .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 44%;} .un4_bookb .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 54%;width: 25%;} .un4_book .ubox .box .video .udh4{width: 100%;height: 25%;top: 64%;right: 0%;z-index: 3;position: absolute;} .un4_book .ubox .box .video .udh4 li{position: absolute;width: 6%;height: 22%;top: 0;left: 0;} .un4_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com;} .un4_book .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 13.5%;} .un4_book .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 20.5%;} .un4_book .ubox .box .video .udh4 li:nth-child(3){top: 0%;left: 38%;} /* 第五单元 */ .un5 .ubox .box .video .abtn{width: 18%;left: 45%;top: 13%;} .un5 .ubox .box .video .udh1 li:nth-child(1){width: 20%;top: 30%;left: 10%;} .un5 .ubox .box .video .udh1 li:nth-child(2){width: 20%;top: 30%;left: 25%;} .un5 .ubox .box .video .udh1 li:nth-child(3){width: 28%;top: 68%;left: 37%;} .un5 .ubox .box .video .udh1 li:nth-child(4){width: 35%;top: 38%;left: 40%;} .un5 .ubox .box .video .udh1 li:nth-child(5){width: 30%;top: 68%;left: 50%;} .un5 .ubox .box .video .udh1 li:nth-child(6){width: 46%;top: 58%;left: 55%;} /* 书本朗诵 */ .un5_book{} .un5_book .ubox{z-index: 8;} .un5_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un5_book .ubox .box .video .abtn{top: 20%;left: 55%;} .un5_book .ubox .box .video .ubox{position: relative;} .un5_book .ubox .box .video .unbox dd{display: none;} .un5_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un5_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 50%;width: 7%;} .un5_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un5_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 5%;left: 55%;} .un5_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 9%;left: 50%;} .un5_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 8%;left: 55%;} .un5_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un5_book .ubox .box .video .udh_try {left: 0;top: 69%;width: 100%;height: 20%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un5_book .ubox .box .video .udh_try li{left: 40%;top: 0;width: 5%;position: absolute;cursor: pointer;} .un5_book .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un5_book .ubox .box .video .udh_try li:nth-child(2){left: 47.5%;top: 52%;} .un5_book .ubox .box .video .udh_try li.act img{opacity: 1;} .un5_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un5_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un5_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un5_book .ubtn{} .un5_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un5_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un5_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un5_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un5_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un5_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un5_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un5_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un5_book .ubtn span img{display: block;max-width: 100%;} .un5_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un5_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un5_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un5_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left:5%;top: 30%;} .un5_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 400px;height: 32px;cursor: pointer;margin-bottom: 10px;} .un5_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un5_book .ubox .box .video .udh3 li .img img{width: 400px;max-width: 400px;position: absolute;top: 0;right: 0;} .un5_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un5_book .ubox .box .video .udh3 li .lbtn img{width: 400px;max-width: 400px;} .un5_book .ubox .box .video .udh3 li.act .img{width: 0;} .un5_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un5_book .ubox .box .video .udh3 li:nth-child(5){height: 72px;} .un5_book .ubox .box .video .udh3 li:nth-child(7){height: 108px;} .un5_book .ubox .box .video .udh1 li:nth-child(1){width: 54%;top:48%;left: 48%;} .un5_book .ubox .box .video .udh1 li:nth-child(2){width: 16%;top: 25%;left: 10%;} .un5_book .ubox .box .video .udh1 li:nth-child(3){width: 16%;top: 42%;left: 35%;} .un5_book .ubox .box .video .udh1 li:nth-child(4){width: 20%;top: 42%;left: 50%;} .un5_book .ubox .box .video .udh1 li:nth-child(5){width: 30%;top: 60%;left: 30%;} .un5_book .ubox .box .video .udh1 li:nth-child(6){width: 11%;top: 84%;left: 15%;} .un5_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 5%;} .un5_book .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 25%;} .un5_book .ubox .box .video .udh2 li:nth-child(2){left:7%;top: 25%;width: 6%;} .un5_book .ubox .box .video .udh2 li:nth-child(3){left:10%;top: 25.5%;width: 7%;} .un5_book .ubox .box .video .udh2 li:nth-child(4){left:27%;top: 25%;} .un5_book .ubox .box .video .udh2 li:nth-child(5){left:29%;top: 25%;width: 6%;} .un5_book .ubox .box .video .udh2 li:nth-child(6){left:30.5%;top: 25%;width: 14%;} .un5_book .ubox .box .video .udh2 li:nth-child(7){left:45%;top: 29%;} .un5_book .ubox .box .video .udh2 li:nth-child(8){left:47.3%;top: 28%;width: 6%;} .un5_book .ubox .box .video .udh2 li:nth-child(9){left:50%;top: 28.2%;width: 7%;} .un5_book .ubox .box .video .udh2 li:nth-child(10){left:65%;top: 28%;} .un5_book .ubox .box .video .udh2 li:nth-child(11){left:67.3%;top: 28%;width: 6%;} .un5_book .ubox .box .video .udh2 li:nth-child(12){left:70%;top: 27.5%;} .un5_book .ubox .box .video .udh2 li:nth-child(13){left:22%;top: 81%;} .un5_book .ubox .box .video .udh2 li:nth-child(14){left:23.8%;top: 81.2%;width: 7%;} .un5_book .ubox .box .video .udh2 li:nth-child(15){left:35%;top: 80%;} .un5_book .ubox .box .video .udh2 li:nth-child(16){left:37.3%;top: 80.3%;width: 7%;} .un5_book .ubox .box .video .udh2 li:nth-child(17){left:48%;top: 81%;width: 18%;} .un5_book .ubox .box .video .udh2 li:nth-child(18){left:60.5%;top: 81%;width: 7%;} .un5_book .ubox .box .video .udh2 li:nth-child(19){left:70%;top: 81%;width: 18%;} .un5_book .ubox .box .video .udh2 li:nth-child(20){left:82.5%;top: 81.1%;width: 7%;} .un5_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un5_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un5_book .ubox .box .video .udh4{width: 100%;height: 35%;top: 56.4%;right: 0%;z-index: 3;position: absolute;} .un5_book .ubox .box .video .udh4 li{position: absolute;width: 10%;height: 22%;top: 0;left: 0;} .un5_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .un5_book .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 5%;} .un5_book .ubox .box .video .udh4 li:nth-child(2){top: 0%;left: 20.5%;} .un5_book .ubox .box .video .udh4 li:nth-child(3){top: 0%;left: 42%;} .un5_book .ubox .box .video .udh4 li:nth-child(4){top: 0%;left: 54%;} .un5_book .ubox .box .video .udh4 li:nth-child(5){top: 0%;left: 65%;} .un5_book .ubox .box .video .udh4 li:nth-child(6){top: 0%;left: 78.5%;width: 12%;} .un5_book .ubox .box .video .udh4 li:nth-child(7){top:58%;left: 4%;width: 77%;} .un5_book .ubox .box .video .udh4_1{width: 100%;height: 30%;top: 37%;right: 0%;z-index: 3;position: absolute;} .un5_book .ubox .box .video .udh4_1 li{width:10% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 30%;} .un5_book .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;width: 100%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(1){top: 13%;left: 8%;width: 16%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(2){top: 13%;left: 24%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(3){top: 13%;left: 36%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(4){top: 13%;left: 60%;width: 14%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(5){top: 13%;left: 75%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(6){top: 13%;left: 86%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(7){top: 52%;left: 8%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(8){top: 52%;left: 18%;width: 8%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(9){top: 52%;left: 26%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(10){top: 52%;left: 59%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(11){top: 52%;left: 69%;width: 8%;} .un5_book .ubox .box .video .udh4_1 li:nth-child(12){top: 52%;left: 77%;} .un5_book .ubox .box .video .udh4_1 li.act img{opacity: 1;} .ucj_c5 .ubox .d2{height: 30%;} .ucj_c5 .ubox .d3{height: 35%;} /* partC */ .un5_c{} .un5_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un5_c .ubox .box .video .abtn{top: 17%;left: 58%;} .un5_c .ubox .box .video .ubox{position: relative;} .un5_c .ubox .box .video .unbox dd{display: none;} .un5_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un5_c .ubox .box .video .udh{} .un5_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 46%;} .un5_c .ubox .box .video .udh1 li:nth-child(1){top: 60%;left: 5%;transform-origin: left center;-webkit-transform-origin: left center;} .un5_c .ubox .box .video .udh1 li:nth-child(2){top: 40%;left: 18%;width: 36%;} .un5_c .ubox .box .video .udh1 li:nth-child(3){top: 16%;left: 62%;width: 18%;} .un5_c .ubox .box .video .udh1 li:nth-child(4){top: 25%;left: 62%;width: 18%;} .un5_c .ubox .box .video .udh1 li:nth-child(5){top: 50%;left: 62%;width: 24%;} .un5_c .ubox .box .video .udh1 li:nth-child(6){top: 65%;left: 45%;width: 50%;transform-origin: right center;-webkit-transform-origin: right center;} .un5_c .ubox .box .video .udh1 li:nth-child(7){top: 70%;left: 18%;width: 58%;} .un5_c .ubox .box .video .udh1 li:nth-child(8){top: 45%;left: 5%;width: 46%;transform-origin: left center;-webkit-transform-origin: left center;} .un5_c .ubox .box .video .udh1 li:nth-child(9){top: 55%;left:8%;width: 46%;} .un5_c .ubox .box .video .udh1 li:nth-child(10){top: 28%;left:38%;width: 36%;} .un5_c .ubox .box .video .udh1 li:nth-child(11){top: 55%;left:38%;width: 56%;} .un5_c .ubox .box .video .abtn{width: 5%;left: 51%;} .un5_c .ubox .box .video .abtn span{width: 100%;} .un5_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un5_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un5_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un5_c .ubox .box .video .unbox dd .next,.un5_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un5_c .ubox .box .video .unbox dd .prev,.un5_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un5_c .ubtn{} .un5_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un5_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un5_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un5_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un5_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un5_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un5_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un5_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un5_c .ubtn span img{display: block;max-width: 100%;} .un5_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un5_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* part B */ .un5_bookb{} .un5_bookb .ubox{z-index: 8;} .un5_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un5_bookb .ubox .box .video .abtn{top: 19%;left: 55%;} .un5_bookb .ubox .box .video .ubox{position: relative;} .un5_bookb .ubox .box .video .unbox dd{display: none;} .un5_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un5_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 47%;width: 7%;} .un5_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un5_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 8%;left: 58%;} .un5_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 1%;left: 82%;} .un5_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 22%;left: 60%;} .un5_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 95%;} .un5_bookb .ubox .box .video .udh_try {left: 0;top: 61%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un5_bookb .ubox .box .video .udh_try li{left: 15%;top: 0;width: 4%;position: absolute;cursor: pointer;} .un5_bookb .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un5_bookb .ubox .box .video .udh_try li:nth-child(2){left: 41%;} .un5_bookb .ubox .box .video .udh_try li:nth-child(3){left: 63%;} .un5_bookb .ubox .box .video .udh_try li.act img{opacity: 1;} .un5_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un5_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un5_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un5_bookb .ubtn{} .un5_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un5_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un5_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un5_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un5_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un5_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un5_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un5_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .un5_bookb .ubtn span img{display: block;max-width: 100%;} .un5_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un5_bookb .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un5_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un5_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 15%;} .un5_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 600px;height: 35px;cursor: pointer;margin-bottom: 10px;} .un5_bookb .ubox .box .video .udh3 li:nth-child(5){height: 100px;} .un5_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un5_bookb .ubox .box .video .udh3 li .img img{width: 600px;max-width: 600px;position: absolute;top: 0;right: 0;} .un5_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un5_bookb .ubox .box .video .udh3 li .lbtn img{width: 600px;max-width: 600px;} .un5_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un5_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(1){width: 46%;top: 70%;left: 18%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(2){top: 50%;width: 50%;left: 40%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(3){top: 48%;width: 26%;left: 7%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(4){top: 18%;width: 17%;left: 24%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(5){top: 20%;width: 23%;left: 39%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(6){top: 12.5%;width: 20%;left: 58%;} .un5_bookb .ubox .box .video .udh1 li:nth-child(7){top:41.5%;width: 20%;left: 78%;} .un5_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un5_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un5_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un5_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un5_bookb .ubox .box .video .udh4{width: 100%;height: 20%;top: 75.5%;right: 0%;z-index: 3;position: absolute;} .un5_bookb .ubox .box .video .udh4 li{position: absolute;width: 20%;height: 50%;top: 0;left: 0;} .un5_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 28px;font-family: com; text-align: center; } .un5_bookb .ubox .box .video .udh4 li:nth-child(1){top: 0%;left: 35%;} .un5_bookb .ubox .box .video .udh4 li:nth-child(2){top: 50%;left: 40%;} /* 第六单元 */ .un6 .ubox .box .video .abtn{width: 18%;left: 40%;top: 13%;} .un6 .ubox .box .video .udh1 li:nth-child(1){width: 50%;top: 20%;left: 0%;transform-origin: top left;-webkit-transform-origin: top left;} .un6 .ubox .box .video .udh1 li:nth-child(2){width: 50%;top: 60%;left: 1%;transform-origin: bottom left;-webkit-transform-origin: bottom left;} .un6 .ubox .box .video .udh1 li:nth-child(3){width: 18%;top: 44%;left: 27%;} .un6 .ubox .box .video .udh1 li:nth-child(4){width: 33%;top: 42%;left: 50%;} .un6 .ubox .box .video .udh1 li:nth-child(5){width: 28%;top: 48%;left: 70%;transform-origin: top right;-webkit-transform-origin: top right;} .un6 .ubox .box .video .udh1 li:nth-child(6){width: 38%;top: 58%;left: 40%;} .un6 .ubox .box .video .udh1 li:nth-child(7){width: 38%;top: 48%;left: 60%;transform-origin: bottom right;-webkit-transform-origin: bottom right;} /* 书本朗诵 */ .un6_book{} .un6_book .ubox{z-index: 8;} .un6_book .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un6_book .ubox .box .video .abtn{top: 20%;left: 55%;} .un6_book .ubox .box .video .ubox{position: relative;} .un6_book .ubox .box .video .unbox dd{display: none;} .un6_book .ubox .box .video .unbox dd:nth-child(1){display: block;} .un6_book .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 47%;width: 7%;} .un6_book .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un6_book .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 8%;left: 55%;} .un6_book .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 9%;left: 50%;} .un6_book .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 8%;left: 55%;} .un6_book .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 7%;left: 55%;} .un6_book .ubox .box .video .udh_try {left: 0;top: 83%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un6_book .ubox .box .video .udh_try li{left: 19%;top: 0;width: 5%;position: absolute;cursor: pointer;} .un6_book .ubox .box .video .udh_try li img{display: block;width: 100%;opacity: 0;} .un6_book .ubox .box .video .udh_try li:nth-child(2){left: 33.5%;} .un6_book .ubox .box .video .udh_try li:nth-child(3){left: 46%;} .un6_book .ubox .box .video .udh_try li.act img{opacity: 1;} .un6_book .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un6_book .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un6_book .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un6_book .ubtn{} .un6_book .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un6_book .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un6_book .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un6_book .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un6_book .ubtn span:nth-child(4){top: 75%;left: 19%;} .un6_book .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un6_book .ubtn span:nth-child(6){top: 76%;left: 55%;} .un6_book .ubtn span:nth-child(7){top: 74%;left: 73%;} .un6_book .ubtn span img{display: block;max-width: 100%;} .un6_book .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un6_book .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un6_book .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un6_book .ubox .box .video .udh3{ position: absolute;z-index: 3;left:5%;top: 25%;} .un6_book .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 550px;height: 32px;cursor: pointer;margin-bottom: 10px;} .un6_book .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un6_book .ubox .box .video .udh3 li .img img{width: 550px;max-width: 550px;position: absolute;top: 0;right: 0;} .un6_book .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un6_book .ubox .box .video .udh3 li .lbtn img{width: 550px;max-width: 550px;} .un6_book .ubox .box .video .udh3 li.act .img{width: 0;} .un6_book .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un6_book .ubox .box .video .ud3btn{position: absolute;z-index: 3;right:2%;bottom: 5%;width: 99px;height: 38px;} .un6_book .ubox .box .video .ud3btn .next{cursor: pointer;z-index: 2;width: 100%;height:100%;background: url(../images/u1/c/next.png) center no-repeat;} .un6_book .ubox .box .video .ud3btn .prev{display: none; cursor: pointer;z-index: 2;width: 100%;height: 100%;background: url(../images/u1/c/prev.png) center no-repeat;} .un6_book .ubox .box .video .udh_try2 {display: none; left: 0;top:26%;width: 100%;height: 10%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un6_book .ubox .box .video .udh_try2 li{left: 10%;top: 0;width: 4%;position: absolute;cursor: pointer;} .un6_book .ubox .box .video .udh_try2 li img{display: block;width: 100%;opacity: 0;} .un6_book .ubox .box .video .udh_try2 li:nth-child(2){left: 38%;} .un6_book .ubox .box .video .udh_try2 li:nth-child(3){left: 66.5%;top: 10%;} .un6_book .ubox .box .video .udh_try2 li.act img{opacity: 1;} .un6_book .ubox .box .video .udh1 li:nth-child(1){width: 40%;top:45%;left: 5%;transform-origin: left bottom;-webkit-transform-origin: left bottom;} .un6_book .ubox .box .video .udh1 li:nth-child(2){width: 40%;top:75%;left: 30%;} .un6_book .ubox .box .video .udh1 li:nth-child(3){width: 20%;top:40%;left: 40%;} .un6_book .ubox .box .video .udh1 li:nth-child(4){width: 13%;top:23%;left: 75%;} .un6_book .ubox .box .video .udh1 li:nth-child(5){width: 26%;top:55%;left: 45%;} .un6_book .ubox .box .video .udh1 li:nth-child(6){width: 18%;top:40%;left: 75%;} .un6_book .ubox .box .video .udh1 li:nth-child(7){width: 12%;top:63%;left: 38%;} .un6_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 5%;} .un6_book .ubox .box .video .udh2 li:nth-child(1){left: 20%;top: 40%;} .un6_book .ubox .box .video .udh2 li:nth-child(2){left: 21.7%;top: 40.5%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(3){left: 26%;top: 40.5%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(4){left: 40%;top: 30%;} .un6_book .ubox .box .video .udh2 li:nth-child(5){left: 41.7%;top: 30%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(6){left: 46%;top: 30%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(7){left: 60%;top: 40%;} .un6_book .ubox .box .video .udh2 li:nth-child(8){left: 61.3%;top: 40%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(9){left: 66%;top: 40%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(10){left: 80%;top: 37%;} .un6_book .ubox .box .video .udh2 li:nth-child(11){left: 81.3%;top: 36.8%;width: 9%;} .un6_book .ubox .box .video .udh2 li:nth-child(12){left: 86%;top: 36.8%;width: 7.5%;} .un6_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un6_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un6_book .ubox .box .video .udh4{width: 100%;height: 35%;top: 58.5%;right: 0%;z-index: 3;position: absolute;} .un6_book .ubox .box .video .udh4 li{position: absolute;width: 8%;height: 22%;top: 0;left: 0;} .un6_book .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com;} .un6_book .ubox .box .video .udh4 li:nth-child(1){left: 24%;} .un6_book .ubox .box .video .udh4 li:nth-child(2){left: 45%;} .un6_book .ubox .box .video .udh4 li:nth-child(3){left: 77%;} .un6_book .ubox .box .video .udh4 li:nth-child(4){left: 71%;top: 15%;} .un6_book .ubox .box .video .udh4 li:nth-child(5){left: 13%;width: 68%;top: 55%;} .un6_book .ubox .box .video .udh4_1{width: 100%;height: 30%;top: 37%;right: 0%;z-index: 3;position: absolute;} .un6_book .ubox .box .video .udh4_1 li{width:10% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 30%;} .un6_book .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;width: 100%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(1){top: 13%;left: 32%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(2){top: 13%;left: 44%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(3){top: 13%;left: 57%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(4){top: 54%;left: 6%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(5){top: 54%;left: 17%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(6){top: 54%;left: 28%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(7){top: 54%;left: 56%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(8){top: 54%;left: 68%;} .un6_book .ubox .box .video .udh4_1 li:nth-child(9){top: 54%;left: 80%;} .un6_book .ubox .box .video .udh4_1 li.act img{opacity: 1;} /* part B */ .un6_bookb{} .un6_bookb .ubox{z-index: 8;} .un6_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un6_bookb .ubox .box .video .abtn{top: 19%;left: 55%;} .un6_bookb .ubox .box .video .ubox{position: relative;} .un6_bookb .ubox .box .video .unbox dd{display: none;} .un6_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .un6_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 10%;left: 50%;width: 7%;} .un6_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .un6_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 2%;left: 55%;} .un6_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 1%;left:55%;} .un6_bookb .ubox .box .video .unbox dd:nth-child(5) .abtn{top: 18%;left: 60%;} .un6_bookb .ubox .box .video .unbox dd:nth-child(6) .abtn{top: 3%;left: 95%;} .un6_bookb .ubox .box .video .udh_try {left: 0;top: 61%;width: 100%;height: 5%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .un6_bookb .ubox .box .video .udh_try li{left: 59%;top: 0;width: 8%;position: absolute;cursor: pointer;height: 100%;} .un6_bookb .ubox .box .video .udh_try li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .un6_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un6_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un6_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .un6_bookb .ubtn{} .un6_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un6_bookb .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un6_bookb .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un6_bookb .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un6_bookb .ubtn span:nth-child(4){top: 75%;left: 19%;} .un6_bookb .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un6_bookb .ubtn span:nth-child(6){top: 76%;left: 55%;} .un6_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .un6_bookb .ubtn span img{display: block;max-width: 100%;} .un6_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un6_bookb .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} .un6_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .un6_bookb .ubox .box .video .udh3{ position: absolute;z-index: 3;left: 5%;bottom: 25%;} .un6_bookb .ubox .box .video .udh3 li{position: relative;overflow: hidden;width: 600px;height: 35px;cursor: pointer;margin-bottom: 10px;} .un6_bookb .ubox .box .video .udh3 li .img{width: 100%;height: 100%;position: absolute;top: 0;right: 0;overflow: hidden;} .un6_bookb .ubox .box .video .udh3 li .img img{width: 600px;max-width: 600px;position: absolute;top: 0;right: 0;} .un6_bookb .ubox .box .video .udh3 li .lbtn{position: absolute;top: 0;left: 0;z-index: 2;width: 0%;height: 100%; overflow: hidden;} .un6_bookb .ubox .box .video .udh3 li .lbtn img{width: 600px;max-width: 600px;} .un6_bookb .ubox .box .video .udh3 li.act .img{width: 0;} .un6_bookb .ubox .box .video .udh3 li.act .lbtn{width: 100%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(1){width: 44%;top: 25%;left: 25%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(2){width: 42%;top: 50%;left: 35%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(3){width: 20%;top: 25%;left: 20%;transform-origin: center top;-webkit-transform-origin: center top;} .un6_bookb .ubox .box .video .udh1 li:nth-child(4){width: 18%;top: 20%;left: 40%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(5){width: 15%;top: 15%;left: 64%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(6){width: 21%;top: 75%;left: 5%;} .un6_bookb .ubox .box .video .udh1 li:nth-child(7){width: 18%;top: 83%;left: 65%;} .un6_bookb .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 12%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(1){left: 5%;top: 67%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(2){left: 13%;top: 68%;width: 5%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(3){left: 22%;top: 40%;width: 15.8%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(4){left: 33%;top: 41%;width: 5%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(5){left: 42%;top: 67%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(6){left: 49.8%;top: 68%;width: 5%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(7){left: 58%;top: 40%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(8){left: 65.7%;top: 40.5%;width: 5%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(9){left: 78%;top: 66%;} .un6_bookb .ubox .box .video .udh2 li:nth-child(10){left:85.8%;top: 66.5%;width: 5%;} .un6_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .un6_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .un6_bookb .ubox .box .video .udh4{width: 100%;height: 20%;top: 74%;right: 0%;z-index: 3;position: absolute;} .un6_bookb .ubox .box .video .udh4 li{position: absolute;width: 20%;height: 50%;top: 0;left: 0;} .un6_bookb .ubox .box .video .udh4 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 24px;font-family: com; text-align: center; } .un6_bookb .ubox .box .video .udh4 li:nth-child(1){top: 0.5%;left: 58%;} .un6_bookb .ubox .box .video .udh4 li:nth-child(2){top: 48%;left: 65%;} .un6_bookb .ubox .box .video .udh5{width: 100%;height: 24%;top: 71%;right: 0%;z-index: 3;position: absolute;} .un6_bookb .ubox .box .video .udh5 li{position: absolute;width: 35%;height: 30%;top: 0;left: 0;} .un6_bookb .ubox .box .video .udh5 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com; text-align: center; } .un6_bookb .ubox .box .video .udh5 li:nth-child(1){top: 0%;left: 28%;} .un6_bookb .ubox .box .video .udh5 li:nth-child(2){top: 0%;left: 66%;width: 20%;} .un6_bookb .ubox .box .video .udh5 li:nth-child(3){top: 34%;left: 29%;} .un6_bookb .ubox .box .video .udh5 li:nth-child(4){top: 34%;left: 66%;width: 20%;} .un6_bookb .ubox .box .video .udh5 li:nth-child(5){top: 68%;left: 18%;width: 46%;} .un6_bookb .ubox .box .video .udh5 li:nth-child(6){top: 68%;left: 66%;width: 20%;} /* partC */ .un6_c{} .un6_c .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .un6_c .ubox .box .video .abtn{top: 17%;left: 58%;} .un6_c .ubox .box .video .ubox{position: relative;} .un6_c .ubox .box .video .unbox dd{display: none;} .un6_c .ubox .box .video .unbox dd:nth-child(1){display: block;} .un6_c .ubox .box .video .udh{} .un6_c .ubox .box .video .udh1 li{left: 0%;top: 0%;width: 44%;} .un6_c .ubox .box .video .udh1 li:nth-child(1){top: 40%;left: 2%;transform-origin: top left;-webkit-transform-origin: top left;} .un6_c .ubox .box .video .udh1 li:nth-child(2){top: 55%;left: 10%;width: 44%;} .un6_c .ubox .box .video .udh1 li:nth-child(3){top: 60%;left: 50%;width: 44%;} .un6_c .ubox .box .video .udh1 li:nth-child(4){top: 30%;left: 50%;width: 44%;} .un6_c .ubox .box .video .udh1 li:nth-child(5){width: 38%; top: 40%;left: 2%;transform-origin: top left;-webkit-transform-origin: top left;} .un6_c .ubox .box .video .udh1 li:nth-child(6){width: 40%; top: 30%;left: 20%;} .un6_c .ubox .box .video .udh1 li:nth-child(7){width: 38%; top: 50%;left: 2%;transform-origin: bottom left;-webkit-transform-origin: bottom left;} .un6_c .ubox .box .video .udh1 li:nth-child(8){width: 40%; top: 15%;left: 30%;} .un6_c .ubox .box .video .udh1 li:nth-child(9){width: 48%; top: 40%;left: 50%;} .un6_c .ubox .box .video .udh1 li:nth-child(10){width: 48%; top: 35%;left: 15%;} .un6_c .ubox .box .video .udh1 li:nth-child(11){width: 48%; top: 65%;left: 10%;} .un6_c .ubox .box .video .udh1 li:nth-child(12){width: 30%; top: 30%;left: 55%;} .un6_c .ubox .box .video .udh1 li:nth-child(13){width: 16%; top: 63%;left: 58%;} .un6_c .ubox .box .video .udh1 li:nth-child(14){width: 26%; top: 43%;left: 70%;} .un6_c .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .un6_c .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .un6_c .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;} .un6_c .ubox .box .video .unbox dd .next,.un6_c .ubox .box .video .unbox dd .next2{position: absolute;right: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/next.png) center no-repeat;} .un6_c .ubox .box .video .unbox dd .prev,.un6_c .ubox .box .video .unbox dd .prev2{position: absolute;left: 5%;top: 85%;cursor: pointer;z-index: 2;width: 99px;height: 38px;background: url(../images/u1/c/prev.png) center no-repeat;} .un6_c .ubtn{} .un6_c .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .un6_c .ubtn span:nth-child(1){top: 13%;left: 17.5%;} .un6_c .ubtn span:nth-child(2){top: 30%;left: 17.5%;} .un6_c .ubtn span:nth-child(3){top: 48%;left: 17.5%;} .un6_c .ubtn span:nth-child(4){top: 75%;left: 19%;} .un6_c .ubtn span:nth-child(5){top: 76%;left: 37.5%;} .un6_c .ubtn span:nth-child(6){top: 76%;left: 55%;} .un6_c .ubtn span:nth-child(7){top: 74%;left: 73%;} .un6_c .ubtn span img{display: block;max-width: 100%;} .un6_c .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .un6_c .ubtn span:nth-child(n + 4) div{left: -8%;top: 41%;} /* 复习一 */ .r1_bookb{} .r1_bookb .ubox{z-index: 8;} .r1_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .r1_bookb .ubox .box .video .abtn{top: 15%;left: 88%;} .r1_bookb .ubox .box .video .ubox{position: relative;} .r1_bookb .ubox .box .video .unbox dd{display: none;} .r1_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .r1_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 3%;left: 75%;width: 7%;} .r1_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn span{width: 100%;} .r1_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 13%;left: 90%;} .r1_bookb .ubox .box .video .unbox dd:nth-child(4) .abtn{top: 3%;left: 98%;} .r1_bookb .ubox .box .video .udh_try {left: 0;top: 52%;width: 100%;height: 50%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .r1_bookb .ubox .box .video .udh_try li{left:0;top: 0;width: 12%;position: absolute;cursor: pointer;height: 13%;} .r1_bookb .ubox .box .video .udh_try li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .r1_bookb .ubox .box .video .udh_try li textarea{display: block;width: 100%; height: 100%;border: 0;background: none;outline: none;font-size: 16px;font-family: com;resize: none;overflow: hidden;text-align: center;line-height: 1.2;color: #333;} .r1_bookb .ubox .box .video .udh_try li:nth-child(1){top: 40%;left: 16.2%;} .r1_bookb .ubox .box .video .udh_try li:nth-child(2){top: 53%;left: 16.2%;} .r1_bookb .ubox .box .video .udh_try li:nth-child(3){top: 66%;left: 16%;} .r1_bookb .ubox .box .video .udh_try li:nth-child(4){top: 79%;left: 29.2%;} .r1_bookb .ubox .box .video .udh_try li:nth-child(5){top: 28%;left: 42.6%;} .r1_bookb .ubox .box .video .udh_try li:nth-child(6){top: 66%;left: 69.4%;} .r1_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .r1_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .r1_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .r1_bookb .ubtn{} .r1_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .r1_bookb .ubtn span:nth-child(1){top: 75%;left: 19%;} .r1_bookb .ubtn span:nth-child(2){top: 76%;left: 55%;} .r1_bookb .ubtn span:nth-child(3){top: 76%;left: 37.5%;} .r1_bookb .ubtn span:nth-child(4){top: 74%;left: 73%;} .r1_bookb .ubtn span img{display: block;max-width: 100%;} .r1_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .r1_bookb .ubtn span div{left: -8%;top: 41%;} .r1_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .r1_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .r1_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} .r1_bookb .ubox .box .video .udh4_1{width: 100%;height: 30%;top: 27%;right: 0%;z-index: 3;position: absolute;} .r1_bookb .ubox .box .video .udh4_1 li{width:5% ;position: absolute;top: 0;left: 0;cursor: pointer;height: 20%;} .r1_bookb .ubox .box .video .udh4_1 li img{opacity: 0;height: 100%;width: 100%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(1){top: 3%;left:46%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(2){top: 3%;left: 70%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(3){top: 23%;left:46%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(4){top: 23%;left: 70.5%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(5){top: 45%;left:46%;} .r1_bookb .ubox .box .video .udh4_1 li:nth-child(6){top: 45%;left:70.5%;} .r1_bookb .ubox .box .video .udh4_1 li.act img{opacity: 1;} .r1_bookb .ubox .box .video .udh_try2 {left: 0;bottom: 0%;width: 100%;height: 40%; position: absolute;z-index: 3;} .r1_bookb .ubox .box .video .udh_try2 li{left:0;top: 0;width: 12%;position: absolute;cursor: pointer;height: 13%;} .r1_bookb .ubox .box .video .udh_try2 li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 22px;font-family: com;} .r1_bookb .ubox .box .video .udh_try2 li:nth-child(1){top: 15%;left: 75%;} .r1_bookb .ubox .box .video .udh_try2 li:nth-child(2){top: 38%;left: 65%;} .r1_bookb .ubox .box .video .udh_try2 li:nth-child(3){top: 73%;left: 40%;width: 20%;} .r1_bookb .ubox .box .video .udh_try2 li:nth-child(4){top: 73%;left: 75%;} /* 复习二 */ .r2_bookb{} .r2_bookb .ubox{z-index: 8;} .r2_bookb .ubox .box{width: 44%;height: 67%;margin-top: 5%;background:#000;border: 0;padding: 10px;background-size: cover;left: 4.5%;} .r2_bookb .ubox .box .video .abtn{top: 13%;left: 55%;} .r2_bookb .ubox .box .video .ubox{position: relative;} .r2_bookb .ubox .box .video .unbox dd{display: none;} .r2_bookb .ubox .box .video .unbox dd:nth-child(1){display: block;} .r2_bookb .ubox .box .video .unbox dd:nth-child(2) .abtn{top: 13%;left: 70%;} .r2_bookb .ubox .box .video .unbox dd:nth-child(3) .abtn{top: 13%;left: 90%;} .r2_bookb .ubox .box .video .udh_try {left: 0;top: 52.5%;width: 100%;height: 50%; position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: 3;} .r2_bookb .ubox .box .video .udh_try li{left:0;top: 0;width: 40%;position: absolute;cursor: pointer;height: 10%;} .r2_bookb .ubox .box .video .udh_try li input{display: block;width: 100%;border: 0;background: none;height: 100%;outline: none;font-size: 20px;font-family: com;} .r2_bookb .ubox .box .video .udh_try li:nth-child(1){top: 14%;left: 45%;} .r2_bookb .ubox .box .video .udh_try li:nth-child(2){top: 28%;left: 45%;} .r2_bookb .ubox .box .video .udh_try li:nth-child(3){top: 41%;left: 45%;} .r2_bookb .ubox .box .video #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;} .r2_bookb .ubox .box .video #testBox.act{opacity: 0;z-index: -1;} .r2_bookb .ubox .box .video #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;} .r2_bookb .ubtn{} .r2_bookb .ubtn span{display: block;width: 17.2%;position: absolute;cursor: pointer;z-index: 9;} .r2_bookb .ubtn span:nth-child(1){top: 75%;left: 19%;} .r2_bookb .ubtn span:nth-child(2){top: 76%;left: 37.5%;} .r2_bookb .ubtn span:nth-child(3){top: 76%;left: 55%;} .r2_bookb .ubtn span:nth-child(7){top: 74%;left: 73%;} .r2_bookb .ubtn span img{display: block;max-width: 100%;} .r2_bookb .ubtn span div{position: absolute;top: 50%;left: 0;z-index: 2;transform: translateY(-50%);-webkit-transform: translateY(-50%);} .r2_bookb .ubtn span div{left: -8%;top: 41%;} .r2_bookb .ubtn span.act div img {animation: shangxia 1s linear infinite alternate;-webkit-animation: shangxia 1s linear infinite alternate;} .r2_bookb .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;} .r2_bookb .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;} @media(max-width:1580px){ .un1_book .ubox .box .video .udh3 li{width: 300px;margin-bottom: 5px;} .un1_book .ubox .box .video .udh3 li .img img,.un1_book .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un1_book .ubox .box .video .udh4{left: -3%;top: 61%;} .un1_book .ubox .box .video .udh4 li{transform: scale(0.6);-webkit-transform: scale(0.6);} .un1_book .ubox .box .video .udh4 li{width: 15%;height: 30%;} .ucj_c1 .ubox{width: 35%;} .un1_bookb .ubox .box .video .udh3 li{width: 300px;margin-bottom: 10px;height: 20px;} .un1_bookb .ubox .box .video .udh3 li:nth-child(1){height: 45px;} .un1_bookb .ubox .box .video .udh3 li .img img,.un1_bookb .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un1_bookb .ubox .box .video .udh4 li input,.un2_book .ubox .box .video .udh4 li input{font-size: 14px;} .un2_book .ubox .box .video .udh3 li{} .un2_book .ubox .box .video .udh3 li{width: 300px;margin-bottom: 0px;height: 20px;} .un2_book .ubox .box .video .udh3 li .img img,.un2_book .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un2_book .ubox .box .video .udh3 li:nth-child(4), .un2_book .ubox .box .video .udh3 li:nth-child(7), .un2_book .ubox .box .video .udh3 li:nth-child(8){height: 40px;} .un2_bookb .ubox .box .video .udh3 li{width: 300px;height: 28px;margin-bottom: 0;} .un2_bookb .ubox .box .video .udh3 li .img img,.un2_bookb .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un2_bookb .ubox .box .video .udh3 li:nth-child(4), .un2_bookb .ubox .box .video .udh3 li:nth-child(5), .un2_bookb .ubox .box .video .udh3 li:nth-child(6){height: 54px;} .un3_book .ubox .box .video .udh_try li input,.un3_book .ubox .box .video .udh4 li input{font-size: 14px;} .un3_book .ubox .box .video .udh3 li{width: 300px;margin-bottom: 10px;height: 20px;} .un3_book .ubox .box .video .udh3 li .img img,.un3_book .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un3_bookb .ubox .box .video .udh3 li{width: 500px;height: 30px;margin-bottom: 0;} .un3_bookb .ubox .box .video .udh3 li .img img,.un3_bookb .ubox .box .video .udh3 li .lbtn img{width: 500px;} .un3_bookb .ubox .box .video .udh3 li:nth-child(4), .un3_bookb .ubox .box .video .udh3 li:nth-child(2){height: 60px;} .un3_bookb .ubox .box .video .udh5 li input{font-size: 18px;} .un4_book .ubox .box .video .udh3 li{width: 300px;margin-bottom: 5px;height: 25px;} .un4_book .ubox .box .video .udh3 li .img img,.un4_book .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un4_book .ubox .box .video .udh3 li:nth-child(1){height: 70px;} .un4_book .ubox .box .video .udh3 li:nth-child(3){height: 44px;} .un4_book .ubox .box .video .udh4 li input{font-size: 14px;} .un4_bookb .ubox .box .video .udh3{bottom: 1%;} .un4_bookb .ubox .box .video .udh3 li{width: 300px;height: 25px;} .un4_bookb .ubox .box .video .udh3 li .img img,.un4_bookb .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un4_bookb .ubox .box .video .udh3 li:nth-child(1){height: 50px;} .un4_bookb .ubox .box .video .udh4 li input{font-size: 18px;} .un5_book .ubox .box .video .udh4 li input{font-size: 14px;} .un5_bookb .ubox .box .video .udh4 li input{font-size: 18px;} .un6_book .ubox .box .video .udh4 li input{font-size: 14px;} .un6_bookb .ubox .box .video .udh4 li input{font-size: 16px;} .r1_bookb .ubox .box .video .udh_try li input,.r1_bookb .ubox .box .video .udh_try2 li input,.r2_bookb .ubox .box .video .udh_try li input{font-size: 14px;} .un5_bookb .ubox .box .video .udh3 li{width: 400px;height: 24px;} .un5_bookb .ubox .box .video .udh3 li .img img,.un5_bookb .ubox .box .video .udh3 li .lbtn img{width: 400px;} .un5_bookb .ubox .box .video .udh3 li:nth-child(5){height: 70px;} .un6_book .ubox .box .video .udh3 li{margin-bottom: 0;} .un5_book .ubox .box .video .udh3 li{width: 300px;height: 24px;margin-bottom: 0;} .un5_book .ubox .box .video .udh3 li .img img,.un5_book .ubox .box .video .udh3 li .lbtn img{width: 300px;} .un5_book .ubox .box .video .udh3 li:nth-child(5){height: 50px;} .un6_bookb .ubox .box .video .udh3 li{width: 400px;height: 25px;} .un6_bookb .ubox .box .video .udh3 li .img img,.un6_bookb .ubox .box .video .udh3 li .lbtn img{width: 400px;} .un6_bookb .ubox .box .video .udh5 li input{font-size: 14px;} .un2_book .ubox .box .video .udh_try li input{font-size: 14px;} .un6_bookb .ubox .box .video .udh_try li input{font-size: 16px;} .r1_bookb .ubox .box .video .udh_try li textarea{font-size: 12px;line-height: 1.1;} }