/*默认样式重置*/
html, body, div, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0 auto; padding: 0; }
article, aside, dialog, footer, header, section, nav, figure, menu { display: block; margin: 0 auto; padding: 0; }
ul, ol, li { list-style: none; }
table {border-collapse: collapse; border-spacing: 0; }
img { border: 0 none; display: block; vertical-align: top; }
a { text-decoration: none; outline: none; color: inherit; }
/*框架*/
html { font-size: 100px; }
body { width: 19.2rem; height: 9.6rem; overflow: hidden; }
.main { position: relative; width: 38.4rem; height: 9.6rem; margin-left: 0rem; }
.main audio { position: absolute; width: 3rem; height: 0.55rem; top: 8.5rem; left: 27.3rem; z-index: 40; }
/*封面*/
.cover { position: relative; float: left; width: 19.2rem; height: 9.6rem; background: url(../images/cover_bg.jpg) no-repeat; background-size: cover; overflow: hidden; }
.title { position: absolute; width: 2.5rem; height: 9.6rem; left: 3.7rem; overflow: hidden; z-index: 10; animation: title 5s linear; }
.title img { width: 2.5rem; height: 9.6rem; }
.ico { position: absolute; width: 2.77rem; height: 2.81rem; z-index: 11; }
.ico img { width: 100%; height: 100%; }
.ico1 { top: 2rem; left: 7.5rem; animation: ico1 5s linear; }
.ico2 { top: 2rem; left: 10.6rem; animation: ico2 5s linear; }
.ico3 { top: 4.8rem; left: 9.2rem; animation: ico3 5s linear; }
.ico4 { top: 4.8rem; left: 12.3rem; animation: ico4 5s linear; }
.enter {position: absolute; width: 0.73rem; height: 0.76rem; top: 3.4rem; left: 15rem; z-index: 12; cursor: pointer; animation: enter 5s linear; }
.enter img { width: 100%; height: 100%; }
/*封面动画*/
@keyframes title { 0% {height: 0rem; }
	40% {height: 9.6rem; }
	}
@keyframes ico1 { 0% {width: 0rem; height: 0rem; top: 3.405rem; left: 8.885rem; }
	40% {width: 0rem; height: 0rem; top: 3.405rem; left: 8.885rem; }
	60% {width: 2.77rem; height: 2.81rem; top: 2rem; left: 7.5rem; }
	}
@keyframes ico2 { 0% {width: 0rem; height: 0rem; top: 3.405rem; left: 11.985rem; }
	50% {width: 0rem; height: 0rem; top: 3.405rem; left: 11.985rem; }
	70% {width: 2.77rem; height: 2.81rem; top: 2rem; left: 10.6rem; }
	}
@keyframes ico3 { 0% {width: 0rem; height: 0rem; top: 6.205rem; left: 10.585rem; }
	60% {width: 0rem; height: 0rem; top: 6.205rem; left: 10.585rem; }
	80% {width: 2.77rem; height: 2.81rem; top: 4.8rem; left: 9.2rem; }
	}
@keyframes ico4 { 0% {width: 0rem; height: 0rem; top: 6.205rem; left: 13.685rem; }
	80% {width: 0rem; height: 0rem; top: 6.205rem; left: 13.685rem; }
	90% {width: 2.77rem; height: 2.81rem; top: 4.8rem; left: 12.3rem; }
	}
@keyframes enter { 0% {left: -0.73rem; }
	80% {left: -0.73rem; }
	90% {left: 19.2rem; }
	}
/*书本框架*/
.content { position: relative; float: right; width: 19.2rem; height: 9.6rem; background: url(../images/content_bg1.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.book { position: absolute; width: 11.57rem; height: 7.7rem; top: 0.7rem; left: 3.8rem; background: url(../images/book_bg.png) no-repeat; background-size: cover; overflow: hidden; z-index: 10; }
.close { position: absolute; width: 0.26rem; height: 0.26rem; right: 0.2rem; top: 0.1rem; cursor: pointer; z-index: 40; }
.close img { width: 0.26rem; height: 0.26rem; }
.prev { position: absolute; width: 0.45rem; height: 0.45rem; left: 0.55rem; bottom: 0.2rem; z-index: 40; pointer-events: none; }
.next { position: absolute; width: 0.45rem; height: 0.45rem; right:0.8rem; bottom: 0.2rem; z-index: 40; pointer-events: none; }
.prev img,.next img { width: 0.45rem; height: 0.45rem; }
/*书签*/
.menu li { position: absolute; width: 0.43rem; height: 1.91rem; right: 0.09rem; cursor: pointer; z-index: 40; }
.menu li img { width: 0.43rem; height: 1.91rem; }
.menu .on { right: 0.22rem; z-index: 41; }
.menu li:nth-child(4) { top: 0.6rem; }
.menu li:nth-child(3) { top: 2.1rem; }
.menu li:nth-child(2) { top: 3.6rem; }
.menu li:nth-child(1) { top: 5.3rem; }
/*书页内容*/
#flipbook { position: absolute; left: -0.12rem; top: 0.16rem; width: 10.5rem; height: 7.43rem; }
#flipbook>div { background-size: cover; }
#flipbook .fl { position: relative; display: block; float: left; width: 4.9rem; height: 6.6rem; margin-top: 0.25rem; margin-left: 0.2rem; overflow: hidden; }
#flipbook .fr { position: relative; display: block; float: right; width: 4.7rem; height: 6.6rem; margin-top: 0.25rem; margin-right: 0.1rem;  overflow: hidden; }
#flipbook p { line-height: 0.34rem; font-size: 0.15rem; }
#flipbook center img { max-width: 4.7rem; margin-top: 0.1rem; }
#flipbook h3 { display: block; width: 4.36rem; height: 0.42rem; margin-top: 0.1rem; margin-bottom: 0.16rem; }
#flipbook h3 img { width: 4.36rem; height: 0.42rem; }