html,
body,
.flipbook-viewport {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: Arial, sans-serif;
	line-height: 1.6;
	color: #333;
}

::-webkit-scrollbar {
    width: 3px;
		height: 3px;
    background-color: #efefef;
  }

::-webkit-scrollbar-track {
  background-color: #efefef;
}

::-webkit-scrollbar-thumb {
  background: #787878;
  border-radius: 10px;
}

.flipbook-viewport .container {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: auto;
}

.flipbook-viewport .flipbook {
	width: 392px;
	height: 502px;
	left: -196px;
	top: -251px;
}

.flipbook-viewport .page {
	width: 392px;
	height: 502px;
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.flipbook .page {
	box-shadow: -10px 0 50px 10px #666;
	border-radius: 4px;
}

.flipbook-viewport .page img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
}

.flipbook-viewport .shadow {
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow: 0 0 20px #ccc;
	-moz-box-shadow: 0 0 20px #ccc;
	-o-box-shadow: 0 0 20px #ccc;
	-ms-box-shadow: 0 0 20px #ccc;
	box-shadow: 0 0 20px #ccc;
}

.tips {
		position: absolute;
		top: calc((100% - 502px) / 2 - 50px);
		padding: 0 1.2rem 0 1.5rem;
		font-size: 1.2rem;
		text-align: left;
		width: 100%;
		color: #fff;
		padding: 0 calc((100% - 392px) / 2);
		box-sizing: border-box;
		z-index: 9999;
	}
	
	.bottom {
		top: auto;
		bottom: calc((100% - 392px) / 2 - 100px);
		text-align: right;
	}

@media screen and (max-width:600px) {
	.tips {
		font-size: 0.8rem;
		padding: 0 calc((100% - 350px) / 2);
	}
	.flipbook-viewport .flipbook {
		width: 392px;
		height: 502px;
		left: -196px;
		top: -251px;
	}
	
	.flipbook-viewport .page {
		width: 392px;
		height: 502px;
	}
}
.flipbook {
	position: relative;
}

.flipbook-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 99;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: bold;
	transform: rotate(0deg);
	transition: transform;
	color: #ffffff;
}

.flipbook-close:hover {
	transform: rotate(360deg);
	transition: transform;
}