body {
	background: #FFFFFF;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

div#conID,
div#conID canvas {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

#loading_per {
	width: 50%;
	height: 10px;
	background-color: #F8FBFF;
	position: absolute;
	top: 45%;
	border-radius: 8px;
	left: 25%;
}

#loading_per span {
	display: inline-block;
	height: 100%;
	width: 0px;
	background-color: #4D86D4;
	border-radius: 8px;
}

canvas {
	position: absolute;
	margin: 0px;
	padding: 0px;
	top: 0px;
	margin: 0px auto;
}

#save-img {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	opacity: 0.01;
}




.music {
	position: fixed;
	width: 0.49rem;
	height: 0.49rem;
	top: 3%;
	right: 5%;
	z-index: 1;
	display: none;
}

@-webkit-keyframes yaobai {
	0% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	50% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	100% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
}

@keyframes yaobai {
	0% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	50% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	100% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
}

.yaobai {
	-webkit-animation: yaobai 1s linear infinite;
	animation: yaobai 1s linear infinite;
}

.animationTitle {
	position: absolute;
	top: 11%;
	right: 4.5%;
	width: 1.67rem;
	height: 0.31rem;
}

.close {
	display: none;
}

/* loading页面 */
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	/* background: url('../img/loadingBg.jpg') top center no-repeat;background-size: 100% 100%; */
}

#loading .loadwords {
	width: 3.7rem;
	height: 0.44rem;
	position: absolute;
	bottom: 10%;
	left: 28%;
}

#loading .loadingicon {
	width: 1.54rem;
	height: 1.23rem;
	position: absolute;
	top: 34%;
	left: 43%;
}

#loading #loading_txt {
	color: #4d86d5;
	font-size: 0.4rem;
	width: 100%;
	position: absolute;
	top: 45%;
	text-align: center
}

/* home */


@keyframes breathes {
	0% {
		transform: scale(.99);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.03);
		opacity: 1;
	}

	100% {
		transform: scale(.99);
		opacity: 0.8;
	}
}

@-webkit-keyframes jump {
	0% {
		-webkit-transform: translateY(0px);
	}

	100% {
		-webkit-transform: translateY(50px);
	}
}

@keyframes jump {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(30px);
	}
}

@-webkit-keyframes jump2 {
	0% {
		-webkit-transform: translateY(0px);
	}

	100% {
		-webkit-transform: translateY(25px);
	}
}

@keyframes jump2 {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(15px);
	}
}

@keyframes breathe {
	0% {
		transform: scale(.99);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.03);
		filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, .5));
		opacity: 1;
	}

	100% {
		transform: scale(.99);
		opacity: 0.8;
	}
}

.lists {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.listenpage {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../img/listen/page4bg.jpg') top center no-repeat;
	background-size: 100% auto;
}

.share {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../img/share/sharebg.jpg') top center no-repeat;
	background-size: 100% 100%;
}

/* 目录页 */
.lists .bookbg {
	width: 6.8rem;
	height: 9.7rem;
	position: relative;
	position: absolute;
	left: 0;
	z-index: 1;
	background-size: 100% 100%;
	display: flex;
}

.lists .bookbg .book2bg {
	padding-bottom: 14%;
	width: 5.92rem;
	background-size: 100% 100%;
	position: relative;
	top: 0%;
	left: 0;
	z-index: 3;
}

.lists .icon {
	max-width: 100%;
	padding-left: 10%;
}

.lists .bookbg #tabtltul {
	position: absolute;
	right: 3%;
	top: 0;
	width: 90px;
	bottom: 0;
	margin: 0px;
	padding: 0px;
}

.lists .bookbg #tabtltul li {
	margin: 0px;
	padding: 0px;
	display: inline-block;
	width: 100%;
	height: 0.95rem;
	float: left;
}

.lists .bookbg #tabtltul li.active {
	height: 1.19rem;
}

.lists ul li img {
	max-width: 100%;
	z-index: 2;
}

.lists .bookbg #tabtltul li img {
	width: 100%;
	height: 100%;
}

/* 免费会员 */
.freeMembership {
	max-width: 100%;
	position: fixed;
	z-index: 99;
	animation: breathe 1.5s infinite;
}

.free1 {
	bottom: 3%;
	left: 2%;
}

.free2 {
	bottom: 6%;
	left: 2%;
}

.lists #tabcontent {
	position: absolute;
	top: 20%;
	left: 0;
}

.lists #tabcontent li {
	text-align: center;
}

.lists #tabcontent li img {
	max-width: 100%;
}

.lists #tabcontent li .lname {
	margin-top: 0%;
}

.lists #tabcontent li .ldesc {
	margin-top: -3%;
}

.lists #tabcontent li .lavar {
	margin-top: -3%;
}

.lists #tabcontent li .img_desc {
	margin-top: 2%;
}

.lists #tabcontent li {
	display: none
}

.lists #tabcontent li:first-child {
	display: block
}



.lists #lisbtnbox {
	position: absolute;
	bottom: 6%;
	width: 4.6rem;
	display: flex;
	margin-left: 11%;
	justify-content: space-between;
}

.lists .div_show {
	display: block;
}

.lists #emptyshow {
	display: none;
}

.lists #emptyshow .lavar {
	width: 3.72rem;
	height: 2.48rem;
	position: absolute;
	top: 31%;
	right: 35%;
	z-index: 4;
	border-style: none;
}

.lists #emptyshow .ldesc {
	width: 4.67rem;
	height: 0.40rem;
	position: absolute;
	top: 60%;
	right: 29%;
	z-index: 4
}

.lists #emptyshow .lname {
	width: 2.99rem;
	height: 0.58rem;
	position: absolute;
	top: 53%;
	right: 42%;
	z-index: 4;
	border-style: none;
}

.lists .mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	display: none
}

.lists .mask .enptytip {
	width: 5.39rem;
	height: 5.15rem;
	position: absolute;
	bottom: 38%;
	right: 14%;
	z-index: 4
}

/* 收听页 */
.listenpage .topbirds {
	width: 1.23rem;
	height: 0.58rem;
	position: absolute;
	top: 4%;
	left: 19%
}

.listenpage .lis_banner {
	width: 7.04rem;
	position: absolute;
	top: 10%;
	left: 0.2rem;
	z-index: 2;

}

.listenpage .listen_bottomcloud {
	width: 100%;
	height: 2.39rem;
	position: absolute;
	bottom: -5%;
	left: 0;
	opacity: 0.4;
}

.listenpage #backlists {
	width: 0.83rem;
	position: absolute;
	top: 3%;
	left: 2%
}

.listenpage .listen_bdeng {
	width: 2.12rem;
	position: absolute;
	bottom: -3%;
	right: 24%;
	z-index: 1;
}

.listenpage .lis_plane {
	width: 0.56rem;
	height: 0.45rem;
	position: absolute;
	bottom: 3%;
	right: 18%;
	z-index: 1;
}







.listenpage .lisgirl {
	width: 2.21rem;
	height: 1.76rem;
	position: absolute;
	bottom: 22%;
	right: -10%;
	z-index: 3;
}

.listenpage .rimicon1 {
	width: 0.71rem;
	height: 0.66rem;
	position: absolute;
	z-index: 3;
	top: 18%;
	right: 12%;
	-webkit-animation: jump2 1.5s infinite ease-in-out alternate;
	-moz-animation: jump2 1.5s infinite ease-in-out alternate;
	-ms-animation: jump2 1.5s infinite ease-in-out alternate;
	-o-animation: jump2 1.5s infinite ease-in-out alternate;
	animation: jump2 1.5s infinite ease-in-out alternate;
}

.listenpage .lis_botbirds {
	width: 0.75rem;
	height: 0.36rem;
	position: absolute;
	bottom: 24%;
	left: 0.2rem;
	z-index: 3;
}

#sharepopmask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	display: none;
}

#sharepopmask .sharetip {
	width: 3.9rem;
	height: 1.3rem;
	position: absolute;
	bottom: 40%;
	right: 25%;
	z-index: 9999;
}

#sharepopmask .sharepopimg {
	width: 4.47rem;
	height: 5.22rem;
	position: absolute;
	top: 6%;
	right: 0;
	z-index: 9999;
}


/* 分享页 */
.share .shareimg {
	max-width: 100%;
	max-height: 100%;
}

#shareimgopacity {
	opacity: 0;
	z-index: 5;
	left: 0px;
	top: 100%;
	position: absolute;
}

.share .sh_words {
	max-width: 100%;
	position: absolute;
	bottom: 15%;
	left: 10%;
}

.share .shbtn {
	max-width: 100%;
	position: absolute;
	bottom: 10%;
	left: 33%;
}

.share #shareback {
	width: 0.83rem;
	position: absolute;
	top: 3%;
	left: 5%;
	z-index: 3;
}

.share .shsun {
	width: 3.59rem;
	height: 3.64rem;
	position: absolute;
	top: 0;
	right: 2%;
	animation: breathes 1.5s infinite;
}

.share .shdeng {
	width: 1.8rem;
	height: 1.82rem;
	position: absolute;
	top: 9%;
	left: -5%;
	z-index: 1;
	animation: breathes 1.5s infinite;
}

.share .sh_birds {
	width: 1.23rem;
	height: 0.58rem;
	position: absolute;
	top: 5%;
	left: 26%;
	-webkit-animation: jump2 1.5s infinite ease-in-out alternate;
	-moz-animation: jump2 1.5s infinite ease-in-out alternate;
	-ms-animation: jump2 1.5s infinite ease-in-out alternate;
	-o-animation: jump2 1.5s infinite ease-in-out alternate;
	animation: jump2 1.5s infinite ease-in-out alternate;
}

.share .shsuncloud {
	width: 2.24rem;
	height: 0.92rem;
	position: absolute;
	top: 10%;
	right: 0
}

.share .shlecloud {
	width: 1.02rem;
	height: 0.84rem;
	position: absolute;
	top: 40%;
	left: 0
}

.share .sharegirl {
	width: 2.03rem;
	height: 1.89rem;
	position: absolute;
	bottom: 0%;
	right: 0
}

.share .sh_birds2 {
	max-width: 100%;
	position: absolute;
	bottom: 9%;
	left: 11%
}

.share .shleplane {
	max-width: 100%;
	position: absolute;
	top: 55%;
	left: 2%
}

.share .shriplane {
	max-width: 100%;
	position: absolute;
	bottom: 57%;
	right: 3%
}



img#saveImg {
	top: 85%;
	height: 20%;
	z-index: 5;
	opacity: 0;
}

#shareimgbox {
	width: 6.2rem;
	position: absolute;
	top: 12%;
	left: 8%;
	bottom: 20%;
	text-align: center;
}

.listenpage .learrow {
	width: 0.24rem;
	height: 0.33rem;
	transform: scale(1.4);
	margin-right: 5%;
}

.listenpage .riarrow {
	width: 0.24rem;
	height: 0.33rem;
	transform: scale(1.4);
	margin-left: 5%;
}

.listenpage .onplay {
	width: 0.88rem;
	height: 0.88rem;
	transform: translateY(-30%);
}



/* 修改 */
#content {
	padding-top: 37%;
	padding-bottom: 10%;
	width: 7.04rem;
	position: absolute;
	top: 10%;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	background: url(../img/listen/lis_banner.png);
	background-size: 100% 100%;
}

.listenpage .headbg {
	width: 5.21rem;
	background-image: url(../img/listen/headbg.png);
	background-size: 100% 100%;
	position: relative;
	text-align: center;
}

.listenpage .lis_head img {
	max-width: 100%;
}

.listenpage .lis_head {
	margin-top: -25%;
}

.listenpage .lis_name {
	margin-top: 5%;
	width: 5rem;
	padding: 0 0.2rem;
	margin-right: 1%;
}

.listenpage .audio {
	width: 5rem;
	height: 1rem;
	position: relative;
	margin-top: 1%;
	margin-bottom: 8%;
	z-index: 2;
}

.listenpage .audio #audiogif {
	max-width: 100%;
	border: none;
	top: 0;
	left: 0;
	position: absolute;
}

.timeline {
	top: 108%;
	right: 0;
	left: 0;
	display: inline-block;
	padding: 0px;
	margin: 0px;
	position: relative;
	position: absolute;
}

.timeline u {
	font-style: normal;
	position: absolute;
	width: 0px;
	height: 4px;
	background-color: #FF0000;
	left: 0.15rem;
	top: 0px;
	z-index: 3;
	border: none;
}

.timeline span {
	position: absolute;
	top: -13px;
	border-radius: 10px;
	left: 0px;
	display: inline-block;
	width: 55px;
	/* background-color: #FF0000; */
	background: url(../img/timebg.png);
	background-size: 100% 100%;
	height: 25px;
	z-index: 4;
}

.timeline span b {

	width: 100%;
	height: 100%;
	font-size: 26px;
	color: #fff;
	position: absolute;
	display: inline-block;
	transform: scale(0.6) translateY(-10px);
	top: 5px;
	z-index: 4;
}

div#ctrlBox {
	width: 100%;
	text-align: center;
}

div#btnBox {
	/* margin-bottom: 2%; */
	margin-top: 2%;
	text-align: center;
	width: 100%;
}

div#btnBox img {
	width: 2.2rem;
	animation: breathe 1.5s infinite;
}

.listenpage .lis_btip {
	max-width: 100%;
}