html{margin:0;padding:0;font-size: 100%;height: 100%;}
html, body, form, p, div, h1, h2, h3, h4, h5, h6{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-o-text-size-adjust:none;}
body{margin:0;padding:0; width:100%;font-size:15px;font-family:'PingFang SC','PingFang TC','Microsoft YaHei',"STHeiti",arial,helvetica,sans-serif;font-weight:normal;}
ul,li,h1,h2,h3,h4,h5,h6,p{padding:0;margin:0; list-style:none;font-weight:normal;}
a{ text-decoration:none;outline:none;}
a img,img{border:0;}
img{ display: block;width: 100%;}
body{ background-color: #E3E8F2;height: 100%;}
input,textarea{font-family:myfont,'PingFang SC','PingFang TC','Microsoft YaHei',"STHeiti",arial,helvetica,sans-serif;font-weight:normal;-webkit-appearance: none;}
.page_wrap{ width:100%;margin:0 auto;position: relative;min-width: 320px;max-width:750px;overflow: hidden;background-color: #E3E8F2;height: 100%;}
.clear:after{content:"."; display:block;  height:0;clear:both; visibility:hidden; }

@font-face {
	font-family:myfont;
	src: url(../font/myfont.ttf);
}

@font-face {
	font-family:myfont1;
	src: url(../font/myfont1.otf);
}

@-webkit-keyframes rotation{
  	10%{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
	}
	50% {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}
	60% {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}
	90% {
	    transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	}
	100% {
	    transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	}
}
@keyframes rotation{
  	10%{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
	}
	50% {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}
	60% {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}
	90% {
	    transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	}
	100% {
	    transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	}
}

.no-animation{
 -webkit-animation:none !important; 
} 

.layertip{display:none;width:100%;height:100%;min-width:320px;position:fixed; background:#000;z-index:9999;left:0;}
.layercontent{position: absolute;width: 100%;top: 45%;margin-top: -75px;text-align: center;}
.layertip i{width:73px;height:128px; background:url(https://p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1557901246334551/bgiphone.png) left center no-repeat scroll; background-size:100% auto; display:inline-block;-webkit-animation:rotation infinite 1.5s ease-in-out;animation:rotation infinite 1.5s ease-in-out; -webkit-transform:rotate(90deg);transform:rotate(90deg);}
.layertip .txttip{margin-top: 20px;font-size: 15px;color:#1daae8;}

@media screen and (orientation : landscape) {
	#orientLayer{display:block;}
} 
@media screen and (orientation : portrait){
	#orientLayer{display:none;}
}

@-moz-keyframes throb{
	0%{transform: scale(1);}
	50%{transform: scale(1.1);}
	100%{transform: scale(1);}
}
@-ms-keyframes throb{
	0%{transform: scale(1);}
	50%{transform: scale(1.1);}
	100%{transform: scale(1);}
}
@-webkit-keyframes throb{
	0%{transform: scale(1);}
	50%{transform: scale(1.1);}
	100%{transform: scale(1);}
}
@keyframes throb{
	0%{transform: scale(1);}
	50%{transform: scale(1.1);}
	100%{transform: scale(1);}
}


/* 摇摆 */
@-moz-keyframes rock{
	0%{transform: rotate(0);}
	50%{transform:  rotate(15deg);}
	100%{transform: rotate(0);}
}
@-ms-keyframes rock{
	0%{transform: rotate(0);}
	50%{transform:  rotate(15deg);}
	100%{transform: rotate(0);}
}
@-webkit-keyframes rock{
	0%{transform: rotate(0);}
	50%{transform:  rotate(15deg);}
	100%{transform: rotate(0);}
}
@keyframes rock{
	0%{transform: rotate(0);}
	50%{transform:  rotate(15deg);}
	100%{transform: rotate(0);}
}

.musicBtn{width: 0.5rem;height: 0.5rem;position: fixed;z-index:100;right: 0.2rem;top: 0.2rem;background: url(img/music_off.png) no-repeat;background-size: 100%;display: block;}
.rotationBtn{animation: rotationBtn 2s linear infinite;}
@-moz-keyframes rotationBtn{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@-ms-keyframes rotationBtn{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@-webkit-keyframes rotationBtn{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@keyframes rotationBtn{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}


/* 首屏 */
.first_screen{height:100%;background:#1A90CE url(img/1_bg.jpg) no-repeat center top/100% auto;overflow: hidden;position: relative;font-family:myfont;}
.first_screen .wrapper{position: absolute;bottom:10%;width: 4.34rem;left:50%;margin-left:-2.17rem;text-align: center;z-index:9;}
.first_screen .start{width:2.16rem;height: 2.15rem;animation: throb 0.5s ease-in-out infinite;margin: 0 auto;}
.first_screen .logo{width:4.34rem;height:0.6rem;margin: 0.44rem auto 0;}
.first_screen .girl{width: 5.21rem;height: 6.54rem;position: absolute;top:4.6rem;left: 0;z-index: 5;background: url(img/1_qipao0.png) no-repeat left top/100% 100%;}
.first_screen .girl img{animation: rock 1.5s ease-in-out infinite;}
.first_screen .bot{position: absolute;bottom: -1px;width: 100%;height:4.97rem;background: url(img/1_bot.png) no-repeat center bottom/100% 100%;z-index: 6;}
.first_screen .top{position: absolute;top: 0;width: 100%;height:7.85rem;background: url(img/1_bg.png) no-repeat center bottom/100% 100%;z-index: 4;}
.first_screen .qp{position: absolute;top: 5.95rem;right:0;width: 2.22rem;height:2.31rem;background: url(img/1_qipao.png) no-repeat center bottom/100% 100%;z-index: 3;}
.first_screen .qp img{animation: rock 1.5s ease-in-out infinite;}
.first_screen .ot{top: 8.5rem;right:0.65rem;width: 1.24rem;height:1.23rem;background: url(img/1_qipao1.png) no-repeat center bottom/100% 100%;}

/* 播放页 */
.second_screen{height: 100%;background: url(img/2_bg.jpg) repeat;overflow: scroll;font-family:myfont;}
.second_screen .audio_top{width: 6.9rem;height: 6.9rem;margin: 0.23rem auto 0;position: relative;}
.second_screen .audio_top .hand{width: 4.23rem;height: 0.9rem;position: absolute;right: -0.3rem;top:5.05rem;}
.second_screen .audio_top .note{width: 1.82rem;height: 0.85rem;position: absolute;left: 50%;margin-left:-0.91rem;top:3rem;}
.second_screen .audio_title{line-height:0.73rem;text-align: center;font-size: 0.4rem;font-weight: bold;color: #FFFFFF;}

.second_screen .audBox {width: 100%;margin-top: 0.2rem;padding-bottom:0.4rem;}
.second_screen .process {position: relative;display: -webkit-flex;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;}
.second_screen .process .currentTime {display: inline-block;line-height: 0.46rem;font-family: SimHei;font-size: 0.22rem;width: 1.06rem;text-align: center;color: #fff;}
.second_screen .process .totalTime {display: inline-block;line-height: 0.46rem;font-family: SimHei;font-size: 0.22rem;width: 1.06rem;text-align: center;color: #fff;}
.second_screen .process .process-bar {background-color: #ffffff;position: relative;flex: 1;height: 0.03rem;width:5.38rem;}
.second_screen .process-bar .rdy {background-color: #ccc;width: 0;height: 0.03rem;}
.second_screen .process-bar .aud_cur {background: #eaff60;width: 0px;height: 0.03rem;position: absolute;top: 0;left: 0;}
.second_screen .aud_cur .process-btn {background: #fdc811;position: absolute;top: -0.06rem;right: -0.16rem;width: 0.16rem;height: 0.16rem;border-radius: 50%;}
.second_screen .audio_content{position: relative; width:5.38rem;display: flex;margin: 0 auto;justify-content: space-between;}
.second_screen .audio_content .play, .second_screen .audio_content .other{width: 1.91rem;height: 0.52rem;line-height:0.52rem;border: 2px solid #ffffff;border-radius:  0.19rem;text-align: center;color: #ffffff;margin-top: 0.3rem;}
.second_screen .audio_content .yes, .second_screen .audio_content .help{width: 1.98rem;height: 1.98rem;margin-top: 0.4rem;}

/* 选择页 */
.three_screen{height: 100%;background: url(img/2_bg.jpg) repeat;overflow: hidden;font-family:myfont;}
.three_screen .title{margin-top: 1.3rem;width: 100%;text-align: center;font-size: 0.66rem;line-height: 1.8rem;color:#fff;}
.three_screen li{width: 5.52rem;height:1.23rem;line-height:1.23rem;text-indent:0.35rem;font-size:0.5rem;color:#fff;border: 2px solid #fff;margin: 0.56rem auto 0;border-radius: 0.2rem;background-color: #f39800;}
.three_screen li.cur{background-color: #53beab;}

/* 答对页 */
.four_screen{height: 100%;background:url(img/4_bg.png) no-repeat center top/6.9rem auto, url(img/2_bg.jpg) repeat;overflow: hidden;font-family:myfont;}
.four_screen .title{width: 100%;text-align: center;line-height:1.16rem;font-size: 0.6rem;margin-top: 5.26rem;color: #fffbca;text-shadow: 2px 2px 4px rgba(119, 14, 14, 0.88);}
.four_screen .title h2{font-size: 0.38rem;line-height: 0.58rem;}
.four_screen .title p{line-height: 68px;font-size: 0.48rem;}
.four_screen ul{margin:0.45rem auto 0;}
.four_screen li{color:#fefefe;font-size:0.4rem;border-radius:0.2rem;width: 5.08rem;height:0.8rem;border:2px solid #fff;text-align: center;line-height: 0.8rem;margin:0 auto 0.28rem;}

/* 答错页 */
.five_screen{height: 100%;background: url(img/2_bg.jpg) repeat;overflow: hidden;font-family:myfont;}
.five_screen .cover{width: 100%;height: 100%;background: rgba(0,0,0,0.6);overflow: hidden;}
.five_screen .cover .box{width: 6rem;height: 7.47rem;margin: 1.33rem auto 0;color:#fff;text-align: center;overflow: hidden;background: url(img/5_bg.png) no-repeat center center/100% 100%;}
.five_screen .cover .box .yihan{height:0.84rem;line-height:0.84rem;margin-top:1.25rem;margin-bottom:0.26rem;}
.five_screen .cover .box .yihan span{display: inline-block;font-size:0.62rem;padding-left: 1.04rem;height:0.84rem;background: url(img/5_biaoqing.png) no-repeat left center/0.84rem 0.84rem;}
.five_screen .cover .box .guli{line-height: 0.84rem;font-size:0.56rem;margin-bottom: 0.68rem;}
.five_screen .cover .box .btn{height:1.02rem;width:4.68rem;margin: 0 auto;border: 2px solid #fff;line-height:1.02rem;border-radius: 0.2rem;font-size:0.4rem;}

/* 分享页 */
.six_screen{height: 100%;background: url(img/2_bg.jpg) repeat;overflow: hidden;font-family:myfont;}
.six_screen .need_jt{background: #dbeff5;height: 100%;}
.six_screen .need_jt .jt_bg{background: #dbeff5;height: 100%;overflow: hidden;}
.six_screen .need_jt .jt_bg .share{margin-top:6.5rem;position: relative;z-index:1;overflow: hidden;width: 100%;}
.six_screen .need_jt .jt_bg .share .code{width:2.26rem;height:2.26rem;background: #fff;float: left;margin-left: 0.66rem;}
.six_screen .need_jt .jt_bg .share .text{float: right;margin-top: 0.66rem;line-height: 0.48rem;font-size: 0.36rem;color: #0f4f63;font-family: myfont1;}
.six_screen .need_jt .jt_bg .share .text p{color: #0f4f63;text-shadow: 2px 2px 0px #a4e8fd;font-size: 0.44rem;line-height:0.8rem;font-family: myfont;}
.six_screen .need_jt .logo{width:4.34rem;height:0.6rem;position: absolute;z-index: 2;bottom: 11.4%;left:50%;margin-left: -2.17rem;}

/* 提示页 */
.seven_screen{background: rgba(0,0,0,0.8);width: 100%;height: 100%;position: fixed;z-index: 101;top:0;left: 0;text-align: center;display: none;font-family: myfont;}
.seven_screen p{line-height: 0.8rem;color: #fff;font-size: 0.5rem;padding-top: 3rem;}
.seven_screen .jiantou{width: 1.6rem;height: 1.6rem;position: absolute;right: 0.6rem;top:0.6rem;}
.trans{animation: moves 1s linear infinite;}
@-moz-keyframes moves{
	0%{transform: translate(0,0);}
	50%{transform: translate(-0.3rem,0.3rem);}
	100%{transform: translate(0,0);}
}
@-ms-keyframes moves{
	0%{transform: translate(0,0);}
	50%{transform: translate(-0.3rem,0.3rem);}
	100%{transform: translate(0,0);}
}
@-webkit-keyframes moves{
	0%{transform: translate(0,0);}
	50%{transform: translate(-0.3rem,0.3rem);}
	100%{transform: translate(0,0);}
}
@keyframes moves{
	0%{transform: translate(0,0);}
	50%{transform: translate(-0.3rem,0.3rem);}
	100%{transform: translate(0,0);}
}

/* 首屏加载中 */
.jiazaizhong {min-width: 320px;max-width: 750px;width: 100%;height: 100%;position: relative;left: 0;top: 0;overflow: hidden;margin: 0 auto;}
.jiazaizhong img {position: absolute;left: 50%;top: 50%;margin-left: -0.49rem;margin-top: -0.45rem;width: 0.9rem;height: 0.9rem;}
.jiazaizhong p {position: absolute;top: 50%;margin-top: 0.7rem;color: #5F6464;font-size: 0.4rem;width: 100%;text-align: center;}