/*默认样式重置*/
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 { "微软雅黑", "Arial Narrow"; font-size: 0.16rem; color: #565656; overflow: hidden; }
/*背景图*/
.main { position: relative; width: 19.2rem; height: 9.6rem; background: url(../images/main_bg.png) top center no-repeat; background-size: cover; }
.main audio { position: absolute; width: 3rem; height: 0.55rem; top: 0.5rem; left: 0.6rem; z-index: 40; }
/*台灯*/
.lamp { position: absolute; width: 2.8rem; height: 5.8rem; top: 2.26rem; right: 0; z-index: 10; }
.lamp img { width: 2.8rem; height: 5.8rem; }
/*日历*/
.calendar { position: absolute; width: 3.07rem; height: 3.17rem; top: 5.7rem; right: 0.7rem; background: url(../images/main_calendar.png); background-size: cover; z-index: 20; }
.calendar .date { margin-top: 1.4rem; margin-left: 0.2rem; -webkit-transform: rotate(7deg); }
.calendar .date span { display: block; text-align: center; height: 0.5rem; line-height: 0.5rem; font-size: 0.26rem; font-weight: bolder; color: #000000; background-image: -webkit-linear-gradient(90deg, #000000, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/*电脑视频*/
.computer { position: absolute; width: 10.03rem; height: 8.76rem; top: 0.8rem; left: 5.35rem; background: url(../images/computer_bg.png) top center no-repeat; background-size: cover; z-index: 10; }
.computer .video { position: absolute; width: 7.2rem; height: 4rem; top: 0.47rem; left: 0.4rem; }
.click1 {position: absolute; top: 4.6rem; left: 5.55rem; width: 1rem; height: 1rem; z-index: 20; animation: icon 2s linear infinite; pointer-events: none; }
.click1 img { width: 1rem; height: 1rem; }
/*小书*/
.book { position: absolute; width: 2.49rem; height: 3.32rem; top: 5.44rem; left: 3.2rem; z-index: 9; cursor: pointer; }
.book img { width: 2.49rem; height: 3.32rem; }
.click2 {position: absolute; top: 7.84rem; left: 4.8rem; width: 1rem; height: 1rem; z-index: 20; animation: icon 2s linear infinite; pointer-events: none; }
.click2 img { width: 1rem; height: 1rem; }
/*小手动画*/
@-webkit-keyframes icon { 0% { transform: translateY(0)}
	50% { transform: translateY(-0.1rem); }
	100% { transform: translateY(0); }
	}
@-moz-keyframes icon { 0% { transform: translateY(0)}
	50% { transform: translateY(-0.1rem); }
	100% { transform: translateY(0); }
	}
/*大书框架*/
.bigbook { position: absolute; display: none; width: 12.16rem; height: 8.17rem; top: 0.6rem; left: 2.99rem; overflow: hidden; z-index: 30; transition: transform 0.5s; }
/*大书关闭*/
.bookclose { position: absolute; width: 12.16rem; height: 8.09rem; top: 0.08rem; transition: transform 0.5s; z-index: 99; }
.bookclose img { display: block; margin-left: 3.04rem; width: 6.08rem; height: 8.09rem; cursor: pointer; }
/*大书打开*/
.bookopen { display: none; width: 12.02rem; height: 8.09rem; background: url(../images/book_bg.png) no-repeat; background-size: cover; overflow: hidden; }
/*大书关闭按钮*/
.close { position: absolute; width: 0.26rem; height: 0.26rem; right: 0.35rem; top: 0.18rem; cursor: pointer; z-index: 40; }
.close img { width: 0.26rem; height: 0.26rem; }
/*上下一页*/
.prev { position: absolute; width: 0.45rem; height: 0.45rem; left: 0.9rem; bottom: 0.4rem; z-index: 40; pointer-events: none; }
.next { position: absolute; width: 0.45rem; height: 0.45rem; right: 1rem; bottom: 0.4rem; 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.14rem; cursor: pointer; z-index: 40; }
.menu li img { width: 0.43rem; height: 1.91rem; }
.menu .on { right: 0.3rem; z-index: 41; }
.menu li:nth-child(4) { top: 1rem; }
.menu li:nth-child(3) { top: 2.3rem; }
.menu li:nth-child(2) { top: 3.8rem; }
.menu li:nth-child(1) { top: 5.5rem; }
/*书页内容*/
#flipbook { position: absolute; top: 0.46rem; width: 10.5rem; height: 7.43rem; }
#flipbook>div { background-size: cover; }
#flipbook .fl { position: relative; display: block; float: left; width: 4.97rem; height: 6.6rem; margin-top: 0.25rem; margin-left: 0.15rem; overflow: hidden; }
#flipbook .fr { position: relative; display: block; float: right; width: 4.97rem; height: 6.6rem; margin-top: 0.25rem; margin-right: 0.1rem; overflow: hidden; }
#flipbook h2 { display: block; width: 1.73rem; height: 3.07rem; }
#flipbook h2 img {width: 1.73rem; height: 3.07rem; }
#flipbook i { display: block; width: 4.97rem; height: 3.24rem; margin-top: 0.2rem; }
#flipbook i img {width: 4.97rem; height: 3.24rem; }
#flipbook video { position: absolute; bottom: 0.3rem; left: 0.16rem; width: 4.65rem; height: 2.95rem; }
#flipbook h3 { display: block; width: 4.36rem; height: 0.42rem; margin-top: 0.1rem; margin-bottom: 0.2rem; }
#flipbook h3 img{ width: 4.36rem; height: 0.42rem;}
#flipbook .con { display: block; width: 4.47rem; margin-left: 0.25rem; overflow: hidden; }
#flipbook .con p { line-height: 0.36rem; }
#flipbook .con img { max-width: 4.47rem; margin-top: 0.1rem; }