*{
	word-break:keep-all;
	outline:none;
}
html,body{
	width:100%;
	font:1em 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
}
body{
	margin: 0;
    padding: 0;
    background: var(--background);
    height: 100vh;
    overflow: hidden;
	background:#f8f8f8;
}
body img{
	outline:none;
}

.logo{
	display: flex;
    justify-content: center;
}
.logo img{
	width:150px;
}
.wrap{
	width:100%;
	display:flex;
}
.navSection{
	position:fixed;
	left:0;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	width:15%;
	padding:2% 2%;
	background:#ffff;
}
/* .logo img{
	width:100%;
} */
.pdf{
	margin:20px auto;
}
.pdf a{
	display: flex;
	align-items: center;
	justify-content: space-between;
    gap: 10px;
	width:100%; height:100%;
	padding:12px 15px; 
	border:2px solid #ddd;
	border-radius:4px;
	font-size:0.9em;
}
.pdf a:hover{
	background:#ddd;
}
.pdf a img{
	display:inline-block;
	float:right;
	padding:3px 0 0 0;
	transition:ease 0.1s;
}
.pdf a:hover img{
	padding:5px 0 0 0;
}

.navSection::-webkit-scrollbar {
    background-color: #ddd;
    width: 10px;
}
.navSection::-webkit-scrollbar-track {
    background-color: #ddd;
}
.navSection::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 10px;
}
.navSection::-webkit-scrollbar-button {
    display:none;
}

.nav{
	width:100%;
}
.nav img{
	display:block;
	max-width:120px;
	margin:0 auto; margin-bottom:5px;
	border:1px solid #ddd;
}
.nav img:hover{
	cursor:pointer;
}
.nav p{
	display:block;
	text-align:center;
	margin-bottom:15px;
	font-size:0.9em;
	font-weight:500;
	color:#777;
}
.nav > div{
	cursor:pointer;
}
.nav > div.active img{
	border-color:#333;
	box-shadow:0 0 0 2px #333;
}
.nav > div.active p{
	color:#111;
	font-weight:700;
}

/* 책 영역 */
.bSection{
	position:fixed;
	top:0; right:0; bottom:0;
	left:15%;
	display:flex;
	flex-direction:column;
}
.container{
	position:relative;
	flex:1;
	min-height:0;
	width:100%;
	max-width:1600px;
	margin:0 auto;
	padding:40px 90px 0;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
}
.bookStage{
	position:relative;
	flex:none;
	transition:transform 0.6s ease;
}
.bookStage .book{
	margin:0 auto;
}
.bookStage .page{
	background:#fff;
	overflow:hidden;
}
.bookStage .page img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	pointer-events:none;
	user-select:none;
	-webkit-user-drag:none;
}

.bookArrow{
	position:absolute;
	top:50%;
	width:50px;
	height:60px;
	margin-top:-30px;
	padding:0;
	border:0;
	background:transparent center no-repeat;
	cursor:pointer;
	opacity:0.75;
	transition:opacity 0.2s;
	z-index:5;
}
.bookArrow:hover{
	opacity:1;
}
.bookArrow:disabled{
	opacity:0.2;
	cursor:default;
}
.bookArrow.prev{
	left:20px;
	background-image:url('../img/arrowsL.png');
}
.bookArrow.next{
	right:20px;
	background-image:url('../img/arrowsR.png');
}

.bookBar{
	flex:none;
	height:70px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	font-size:0.9em;
	color:#555;
}
.bookZoom{
	padding:6px 14px;
	border:1px solid #ccc;
	border-radius:4px;
	background:#fff;
	font:inherit;
	color:#555;
	cursor:pointer;
}
.bookZoom:hover{
	background:#eee;
}

.moTop{
	display:none;
}




@media only screen and (max-width: 1200px){
	.nav img{
		max-width:100px;
	}
	.navSection{
		display:none;
	}
	.bSection{
		left:0;
	}
	.moTop{
		display:flex;
		flex:none;
		width:100%;
		padding:15px 25px;
		justify-content: space-between;
		align-items: center;
	}
	.pdf{
		margin:0;
	}
	.container{
		padding-top:10px;
	}
}

@media only screen and (max-width: 768px){
	.container{
		padding:10px 60px 0;
	}
	.bookArrow.prev{
		left:5px;
	}
	.bookArrow.next{
		right:5px;
	}
}

@media only screen and (max-width: 600px){
	.container{
		padding:0 20px;
	}
	.moTop{
		padding:25px 25px;
	}
	.moTop .logo {
		width:120px;
		justify-content: flex-start;
	}
	.moTop .logo img{
		width:100%;
	}
	.moTop .pdf{
		padding:0;
	}
	.moTop .pdf a{
		padding:10px;
	}

	/* 화살표는 하단 바 양쪽으로 */
	.bookArrow{
		top:auto;
		bottom:-65px;
		margin-top:0;
		transform:scale(0.6);
	}
	.bookArrow.prev{
		left:10px;
	}
	.bookArrow.next{
		right:10px;
	}
}