html,body {width: 100%; height: 100%; overflow: hidden}
body {background:#6CB8F5; font-family:"Microsoft YaHei", Arial; font-size:14px; line-height:25px; color:#FFF; margin:0}
a {color:#FFF; text-decoration:none}
h3,p {margin:0; padding:0}
i {font-style: normal}
img {border:0}

.topic {position: absolute; left: 50%; top: 20px; z-index: 99; margin-left: -500px}
.logo {position: absolute; right: 50%; top: 30px; z-index: 99; margin-right: -500px}
.bg {position: absolute; width: 100%; height: 100%; left:0; top:0; overflow: hidden}
.bgimg {position: absolute; visibility: hidden}
.mask {position: absolute; width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#66000000,endColorstr=#66000000)}
body:last-child .mask {filter:none; background:rgba(0,0,0,0.4)}
.container {width: 100%; height: 100%; position: absolute}
.screen {width: 100%; height: 100%; position: relative; overflow: hidden}
.logos {height: 90px; background: #E3F2FD}
.text {position: absolute; width: 770px; left: 50%; top: 50%; margin: -139px 0 0 -385px}
.text h3 {font-size: 48px; line-height: 84px; text-align: center}
.text p {font-size: 24px; line-height: 42px; margin-top: 26px}
.scroll {position: absolute; width: 100px; height: 34px; padding-top: 26px; background: url(../images/arr.png) no-repeat -41px -97px; font-size: 18px; line-height: 34px; text-align: center; cursor: pointer; left: 50%; bottom:30px; margin-left: -50px}

.prev {position: absolute; width:33px; height: 63px; background: url(../images/arr.png) no-repeat 0 0; left: 38px; top: 50%; margin-top: -31px; cursor: pointer}
.next {position: absolute; width:33px; height: 63px; background: url(../images/arr.png) no-repeat right 0; right: 38px; top: 50%; margin-top: -31px; cursor: pointer}
.book {width: 90%; height: 90%; padding-top:90px; margin: 0 auto; position: relative; *overflow:hidden}
.page {position: absolute; width: 100%; height: 100%; left: 0; top: 90px; display: none}
.page div {position: absolute; width: 50%; height: 100%; top:0; box-sizing: border-box; display: -webkit-box; -webkit-box-align: center; vertical-align: middle}
.left {left:0; padding: 80px; *padding:80px 0; background: #6CB8F5}
.left h3 {*padding:0 80px; font-size: 36px; font-weight: normal; line-height: 45px}
.left p {*padding:0 80px; font-size: 20px; line-height: 38px; margin-top: 1em}
.right {right:0; padding: 50px; *padding:50px 0; background: #FFF; text-align: center}
.right img {max-width: 100%; max-height: 100%}

.page em {position: absolute; width: 50%; height: 100%; overflow: hidden}
.page em.l {left:0}
.page em.r {right:0}
.moving {z-index: 2}
.moving em.sel {z-index: 20}

.t3d .book {perspective: 3000px}
.t3d .page {left: 50%; display: block; transform-style:preserve-3d; transform-origin: left}
.off {transform: rotateY(180deg)}
.t3d .page div.right {}
.t3d .page div.left {transform:translateZ(-1px) rotateY(180deg);backface-visibility:hidden;}
@keyframes page {
	0%		{transform: rotatey(0deg)}
	1%		{z-index: 200}
	100%	{transform: rotatey(-180deg); z-index: 200;}
}
@keyframes page1 {
	0%	{transform: rotatey(-180deg); z-index: 200;}
	99% {z-index: 200}
	100%{transform: rotatey(0deg);}
}