html,
body {
	height: 100%;
}

body {
	background:url(images/bg.jpg) top center no-repeat;
	background-size: auto 100%;
	background-color: #0C488E;
}

.main {
	width: 100%;
	height: 778px;
	position:relative;
	transition:height 0.4s;
}

.main.main-open {
	height:900px;
}

/*cover*/
.cover {width:980px;height:100%;margin:0 auto;position:relative;}
.cover {
	-webkit-transform-origin:50% 50%;
	-webkit-transition:-webkit-transform 1s, opacity 1s;
	transform-origin:50% 50%;
	transition:transform 1s, opacity 1s;
}
.cover.hide {
	-webkit-transform:scale3d(0.5, 0.5, 1);
	transform:scale3d(0.5, 0.5, 1);
	opacity:0;
}
.cover-title {width:445px;height:390px;background-image:url(images/slice/title.png)}
.cover-title {position:absolute;top:143px;left:-6px;}
.cover-shelf {width:639px;height:89px;background-image:url(images/slice/book-shelf.png)}
.cover-shelf {position:absolute;top:578px;left:442px;}
.cover-book {width:318px;height:453px;background-image:url(images/front-cover.jpg)}
.cover-book {
	position: absolute;left:600px;top:143px;
	box-shadow: 0px 5px 10px #000;
	cursor:pointer;
	transform-origin:center bottom;
	transition:transform 0.4s;
	-webkit-transform-origin:center bottom;
	-webkit-transition:-webkit-transform 0.4s;
}
.action-tip {width:99px;height:29px;background-image:url(images/action-tip.png)}
.action-tip {position:absolute;bottom:36px;right:55px;event-pointer:none;}

@keyframes tip {
	0% {transform:translate(0px, 0px);}
	100% {transform:translate(20px, 0px);}
}
@-webkit-keyframes tip {
	0% {-webkit-transform:translate(0px, 0px);}
	100% {-webkit-transform:translate(20px, 0px);}
}
.animate {
	animation:tip 0.6s ease-in-out infinite alternate;
	-webkit-animation:tip 0.6s ease-in-out infinite alternate;
}

.cover-book:hover {
	-webkit-transform:scale3d(1.1, 1.1, 1);
	transform:scale3d(1.1, 1.1, 1);
}

.cover-editor-word-title {width:24px;height:79px;background-image: url(images/slice/editor-word.png)}
.cover-editor-word-title {
	position: absolute;left:4px;top:546px;
	border-left:1px solid #C00;
	border-right:1px solid #C00;
	padding:0 20px;
	background-repeat: no-repeat;
	background-position: center center;
}
.cover-editor-word {
	position:absolute;left:93px;top:539px;
	width:336px;
	font-size:14px;color:#333;text-indent:2em;
	line-height: 160%;
	text-justify:auto;
	-webkit-text-justify:auto;
	text-align: justify;
}

/*flip book*/
.book-wrapper {width:980px;height:900px;position:absolute;top:0;left:50%;margin-left:-490px;}
.book-wrapper {display:none;}
.book-zoom {width:944px;height:675px;position:absolute;top:100px;}
.book-zoom {
	-webkit-transform:scale(0.675, 0.675) translate(190px, -102px);
	-webkit-transition:-webkit-transform 1s;
	transform:scale(0.675, 0.675) translate(190px, -102px);
	transition:transform 1s;
}
.book-zoom.openning {
	-webkit-transform:scale(1, 1) translate(0px, 0px);
	transform:scale(1, 1) translate(0px, 0px);
}
.book-zoom.closed {
	-webkit-transform:scale(0.675, 0.675) translate(188px, -100px);
	transform:scale(0.675, 0.675) translate(188px, -100px);
}

.close-btn {width:23px;height:23px;background-image: url(images/slice/close-btn.png)}
.close-btn {position: absolute;left:920px;top:-50px;cursor:pointer;}

.flipbook {width:944px;height:675px;position:absolute;top:50%;left:50%;margin-left:-472px;margin-top:-337px;}
.page {background:white;}
.flipbook .shadow {box-shadow:0px 2px 10px #000}
.front-cover {width:472px;height:675px;background-image: url(images/big-front-cover.jpg)}
.back-cover {width:472px;height:675px;}
.back-cover img {
	margin: 0px;
	width:472px;
	height: 675px;
}

/*flipbook's navigator button*/
.book-wrapper .next-button,
.book-wrapper .previous-button{
	width:22px;
	height:675px;
	position:absolute;
	top:0;
}

.book-wrapper .next-button{
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.book-wrapper .previous-button{
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.book-wrapper .previous-button-hover,
.book-wrapper .next-button-hover{
	background-color:rgba(0,0,0, 0.8);
}

.book-wrapper .previous-button-hover,
.book-wrapper .previous-button-down{
	background-image:url(images/arrows.png);
	background-position:-4px 300px;
	background-repeat:no-repeat;
}

.book-wrapper .previous-button-down,
.book-wrapper .next-button-down{
	background-color:rgba(0,0,0, 0.8);
}

.book-wrapper .next-button-hover,
.book-wrapper .next-button-down{
	background-image:url(images/arrows.png);
	background-position:-38px 300px;
	background-repeat:no-repeat;
}

.book-wrapper .zoom-in .next-button,
.book-wrapper .zoom-in .previous-button{
	display:none;
}

.page-size {
	width:472px;
	height:675px;
}

/*catalog page*/
.catalog {
	position: absolute;
	z-index: 1;
	padding-top: 30px;
}

.catalog h1, 
.catalog h2 {
	padding: 0px 50px 0px 75px;
	cursor: pointer;
}

.catalog h1 {
	font-size: 20px;
	font-weight: normal;
	position: relative;
}

.catalog h1:hover {
	font-weight: bold;
	color: black;
}

.catalog h2 + h1 {
	margin-top: 40px;
}

.catalog h1 i {
	position: absolute;
	left: 22px;
	display: inline-block;
	width: 43px;
	height: 33px;
	background-size: 100% 100%;
	background-image: url(images/slice/arrow-rect.gif);
	font-size: 24px;
	color: white;
	line-height: 33px;
	font-style: normal;
	box-sizing: border-box;
	text-align: center;
	padding-right: 10px;
}

.catalog h2 {
	color: #666;
	font-size: 14px;
	font-weight: normal;
	/*background-color: #CCC;*/
}

.catalog h1+h2,
.catalog h2+h2 {
	margin-top: 20px;
}

.catalog h2:hover {
	color: black;
	font-weight: bold;
}

.catalog h2 span {
	display: inline-block;
	width: 360px;
}
.catalog h2 i {
	font-style: normal;
	float: right;
	line-height: 40px;
	display: none;
}

.catalog h2 i:before {
	content: "............ / ";
}

.book-wrapper .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.book-wrapper .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

/*content pages*/

section {}
section img {
	width: 355px;
	display: block;
	margin: 10px auto;
}

section h1 {
	padding: 0px 44px 0px 110px;
	font-size: 28px;
	font-weight: normal;
	position: relative;
	color: #CC0000;
}

section h1.main-title {
	font-size: 36px;
	text-align: left;
	margin-top: 300px;
	font-weight: bold;
}

section h1.main-title i {
	top: 10px;
	left: 46px;
	background-image: none;
	color: #C00;
	font-size: 40px;
}

section h1 i {
	position: absolute;
	left: 58px;
	display: inline-block;
	width: 43px;
	height: 33px;
	background-size: 100% 100%;
	background-image: url(images/slice/arrow-rect.gif);
	font-size: 24px;
	color: white;
	line-height: 33px;
	font-style: normal;
	box-sizing: border-box;
	text-align: center;
	padding-right: 10px;
}

section article {
	padding: 0px 33px 0px 55px;
}

section header {
	font-size: 20px;
	border-bottom: 1px solid #CC0000;
	color: #CC0000;
	margin: 50px 33px 0px 55px;
	padding-bottom: 12px;
}
section article {
	font-size: 14px;
	line-height: 180%;
}
section article p {
	text-indent: 2em;
}

/*content pages end*/

figure {
	width: 355px;
	margin: 10px auto;
	text-align: center;
}

figure img {
	max-width: 355px;
	max-height: 300px;
	width: auto;
}

figcaption {
	text-align: center;
	font-size: 12px;
	color: #666;
}

.back-cover-logo {width:184px;height:99px;background-image:url(images/slice/logo.jpg)}
.back-cover-replay {width:133px;height:29px;background-image:url(images/slice/replay.png)}
.back-cover-logo {position: absolute;left:133px;top:142px;}
.back-cover-replay {position: absolute;left:161px;top:470px;cursor: pointer;}
.back-cover .credit {
	position:absolute;top:280px;left:73px;width:324px;
	font-family: "Microsoft YaHei";
	font-size: 16px;
	color:white;
	line-height: 200%;
}
.back-cover .fixed-width {
	width:82px;
	display:inline-block;
}
.back-cover .fixed-width-w {
	width:82px;
	display:inline-block;
	letter-spacing: 4px;
	text-align:right;
}

.back-cover .fixed-width .em2 {
	width: 2em;
	display:inline-block;
}

/*book nav*/

.book-nav {
	position:absolute;
	top:700px;
	left:55px;
	width:840px;
	height:16px;
}

.book-nav ul {
	list-style: none;
	margin:0px;
	padding:0px;
}

.book-nav li {
	float:left;
	width:36px;
	height:16px;
	color:black;
	text-align: center;
	line-height: 16px;
	font-size:12px;
	background: rgba(255,255,255,0.8);
	cursor:pointer;
}

.book-nav li:hover,
.book-nav li.selected {
	background:#C00;
	color: white;
}

.book-nav .book-nav-cover {width:40px;}
.book-nav .book-nav-catalog {width:40px;margin-left:1px;margin-right:1px;}
.book-nav .book-nav-back-cover {width:40px;margin-left:1px;}

.share-zone {
	position:absolute;width:150px;height:19px;
	display:none;
	left:636px;
	top:281px;
}

/*post btn*/
.post-btn {width:227px;height:60px;background-image:url(images/slice/post-btn.png);}
.post-btn {display:block;margin-top:10px;margin:10px auto;}