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{ height: 100%;background:#fc3557;}
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: #fff;height: 100%;background: url(img/page_bg.jpg) repeat;}
.clear:after{content:"."; display:block;  height:0;clear:both; visibility:hidden; }

@font-face {
	font-family:myfont;
	src: url(../font/font.ttf);
}
@font-face {
	font-family:myfont1;
	src: url(../font/font1.TTF);
}
@font-face {
	font-family:myfont2;
	src: url(../font/font2.ttf);
}

@-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);
	}
}


.musicBtn{width: 0.5rem;height: 0.5rem;position: fixed;z-index:99;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);}
}
/*首页*/
.page_index{display:none;background:url(img/index_bot.png) no-repeat center bottom/100% auto,url(img/index_bg.jpg) no-repeat center top/100% auto,url(img/page_bg.jpg) repeat;height: 100%;}
.page_index .preload{font-size: 0;height: 0;width: 0;opacity: 0;transform: scale(0);position: absolute;overflow: hidden;font-family: myfont;}
.page_index .preload i{font-family: myfont1;}
.page_index .preload span{font-family: myfont2;}
.page_index .logo{width: 6.9rem;margin: 0 auto;padding-top: 2.2rem;padding-bottom: 1.45rem;position: relative;}
.page_index .logo .index_1{width: 0.31rem;height: 0.68rem;position: absolute;left: 2.17rem;top: 2.98rem;animation: throb 0.5s ease-in-out infinite;}
.page_index .logo .index_2{width: 0.81rem;height: 0.52rem;position: absolute;right: 0.18rem;top: 6.77rem;animation: throb 0.5s ease-in-out infinite;}
.page_index .logo .index_3{width: 0.94rem;height: 1rem;position: absolute;right: 2.28rem;top: 7.15rem;animation: throb 0.5s ease-in-out infinite;}
.page_index .start{width: 4.76rem;height: 1.48rem;margin: 0 auto;animation: throb 0.5s ease-in-out infinite;}
.page_index .studio{width: 6.9rem;height: 0.46rem;margin: 0 auto;margin-top: 0.6rem;}
@-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);}
}

/* 选择屏 */
.page_choose{background: url(img/choose_bg.jpg) no-repeat center bottom/100% auto;height: 100%;font-family:myfont;position: relative;z-index: 9;}
.page_choose .hint{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.75);z-index: 9;}
.page_choose .hint .hint_1{margin-top: 1.84rem;width: 6.9rem;margin: 0 auto;padding-top:1.84rem;}
.page_choose .hint .ok{width: 2.59rem;height: 0.95rem;position: absolute;left: 3.86rem;top:7.52rem;}
.page_choose .head_img{padding: 0.71rem 0 0.35rem 0;height: 0.63rem;width: 6.35rem;margin: 0 auto;position: relative;z-index: 6;
	transform: scale(0);
	transition: -moz-all 0.5s;
	transition: -ms-all 0.5s;
	transition: -o-all 0.5s;
	transition: -webkit-all 0.5s;	
	transition: all 0.5s;
}
.page_choose .head_img .head{float: left;width: 0.68rem;height: 100%;}
.page_choose .head_img .img{float: right;height: 100%;width: 5.34rem;animation: throb 0.5s ease-in-out infinite;}
.page_choose .title_cont{text-align:center;width:6.35rem;margin: 0 auto;
	transform: scale(0);
	transition: -moz-all 0.5s;
	transition: -ms-all 0.5s;
	transition: -o-all 0.5s;
	transition: -webkit-all 0.5s;	
	transition: all 0.5s;
}
.page_choose .title_cont .title{height:1.9rem;line-height:1.9rem;font-size:.42rem;background: url(img/choose_title.jpg) no-repeat center center/6.35rem 1.9rem;margin-bottom: 0.3rem;}
.page_choose .title_cont .cont li{height: 1.4rem;line-height:1.4rem;font-size:.38rem;background: url(img/choose_li.jpg) no-repeat center top/6.35rem auto;padding-bottom: 20px;}
.page_choose .hint .hint_2{padding-top: 1.21rem;width: 100%;position: relative;max-width: 500px;margin: 0 auto;}
.page_choose .hint .hint_2 .txt_hint{position: absolute;left: 1.8rem;line-height:0.61rem;color: #473427;top: 3.3rem;width: 5rem;font-weight: bold;font-size: 0.42rem;text-align: center;}
.page_choose .hint .hint_2 .txt_hint span{font-size: 0.54rem;color:#bb1a1a;}
.page_choose .hint .hint_2 .txt_hint em{font-style: normal;font-weight: bold;}
.page_choose .hint .hint_2 .choose_word{position: absolute;left: 3.75rem;top: 7.03rem;width: 2.81rem;line-height: 0.87rem;text-align: center;font-size: 0.4rem;color:#fdf9f9;text-shadow: 1px 2px 0px #bc4a1d;}
.page_choose .hint .hint_2 .choose_word .true{border: 4px solid #c6431b;border-radius: 0.87rem;background: #ec6941;height: 0.87rem;margin-bottom: 0.5rem;}
.page_choose .hint .hint_2 .choose_word .reset{border: 4px solid #d0710c;border-radius: 0.87rem;background: #f79d3d;height: 0.87rem;}


.page_choose .fadeIn{transform: scale(1);}
.page_choose .fadeOut{transform: scale(0);}

/* 播放屏 */

.page_audio{height: 100%;overflow-y: scroll;}
.page_audio .audio_top{width: 6.9rem;height: 6.9rem;margin: 0.23rem auto 0;position: relative;}
.page_audio .audio_top .hand{width: 4.23rem;height: 0.9rem;position: absolute;right: -0.3rem;top:5.05rem;}
.page_audio .audio_top .note{width: 1.82rem;height: 0.85rem;position: absolute;left: 50%;margin-left:-0.91rem;top:3rem;}
.page_audio .audio_title{line-height:0.73rem;text-align: center;font-size: 0.4rem;font-weight: bold;color: #FFFFFF;}

.audBox {width: 100%;margin-top: 0.44rem;}

.process {position: relative;display: -webkit-flex;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;}

.process .currentTime {display: inline-block;line-height: 0.46rem;font-family: SimHei;font-size: 0.22rem;width: 1.06rem;text-align: center;color: #fff;}

.process .totalTime {display: inline-block;line-height: 0.46rem;font-family: SimHei;font-size: 0.22rem;width: 1.06rem;text-align: center;color: #fff;}

.process .process-bar {background-color: #ffffff;position: relative;flex: 1;height: 0.03rem;width:5.38rem;}

.process-bar .rdy {background-color: #ccc;width: 0;height: 0.03rem;}

.process-bar .aud_cur {background: #eaff60;width: 0px;height: 0.03rem;position: absolute;top: 0;left: 0;}

.aud_cur .process-btn {background: #fdc811;position: absolute;top: -0.06rem;right: -0.16rem;width: 0.16rem;height: 0.16rem;border-radius: 50%;}


.audio_content {
	position: relative; 
}

.audio_content>div{margin:0 auto;width: 3.84rem;height: 0.7rem;line-height:0.7rem;border: 2px solid #ffffff;border-radius:  0.35rem;text-align: center;color: #ffffff;font-family: myfont;margin-top: 0.7rem;}
.audio_content .share{margin-top: 0.38rem;}


.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;}
}

/* 分享屏 */

.page_share{font-family: myfont2;width: 100%;height: 100%;}
/* .page_share .img_bg{width: 100%;} */
.page_share .cont{/* padding-top:5rem; *//* background:url(img/share_bg.png) no-repeat center top/100% auto; */}
.page_share .cont .text{}
.page_share .cont span{}
.page_share .cont em{}
.page_share .code{}
.page_share .wenzi{}
.page_share .wenzi i{}
.page_share .logo{}
#jietu{}
.page_share .need_jt{}



/* 首屏加载中 */
.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: #fff;font-size: 0.4rem;width: 100%;text-align: center;}