@media print{html,body{background-color:#ffffff;}}
h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, div,body { -webkit-print-color-adjust:exact; }
@font-face {
	font-family:'Nanum Gothic';
	src: url('../fonts/NanumGothic.eot');
	src: url('../fonts/NanumGothic.eot?#iefix') format('embedded-opentype'), /* ie 6,7,8 적용 embedded-opentype ie 8,9 적용*/
	url('../fonts/NanumGothic.woff') format('woff'), /* ie 제외한 나머지 */
	url('../fonts/NanumGothic.svg#NanumGothic') format('svg'); /*모바일브라우져를 위해서*/
}

*{margin:0; padding:0;}
html,body{position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000; font-family: 'Nanum Gothic'; overflow:hidden; -webkit-overflow-scrolling:touch;}
input,textarea{font-family: 'Nanum Gothic';}

#wrap:focus
{
	outline:none;
	border:none;
}
#wrap
{
	position:relative;
	z-index:99;
	background:url(../images/viewer/bg.png);
	overflow:hidden;
	margin:0 auto;
	visibility:hidden;
}

#wrap #top
{
	position:relative;
	display:block;
	width:100%;
}

#wrap #middle
{
	position:relative;
	display:block;
	width:100%;
	overflow: hidden;
}
#wrap #bottom
{
	position:relative;
	display:block;
	width:100%;
	height:100px;

}

#wrap #middle .page-box
{
	position:relative;
	display:block;
	float:left;
	height:100%;
	margin:0 auto;
}


/*크롬만 별도로 지정*/
@media print and (-webkit-min-device-pixel-ratio:0) and (orientation: landscape)
{
	#wrap.even{zoom:0.7}
	#wrap.odd{zoom:1}
}
@media print and (-webkit-min-device-pixel-ratio:0) and (orientation: portrait)
{
	#wrap.even{zoom:0.64}
	#wrap.odd{zoom:0.8}
}


@media print
{
	html,body
	{
		background-color:#ffffff;
	}
}


@media print and (orientation: landscape)
{
	#wrap.even
	{
		/*left:0px !important;
		top:0px !important;
		margin-top: 0px !important;
		margin-left: 0px !important;
		transform:scale(0.7) !important;
		transform-origin:0 0 !important;
		width:1968px  !important;
		height:1404px  !important;*/
	}
	#wrap.even
	{
		width:1968px !important;
		height:1404px !important;
		transform:scale(0.7) !important;
		transform-origin:0 0 important;
	}
	#wrap.even #top
	{
		height:135px !important;
	}
	#wrap.even #middle
	{
		height:1169px !important;
	}

	#wrap.even #middle .page-box
	{
		width:50% !important;
		position: relative !important;
		display: block !important;
		visibility:visible !important;
		opacity:1 !important;
	}

	#wrap.even #middle #left-page .contents-box {float:right}


	#wrap.even #book-thumnail-obj-box
	{
		position:relative !important;
		top:0px !important;
		width:1800px !important;
		margin:0 auto !important;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
	#wrap.even #top-left-box
	{
		position: relative !important;
		display: inline-block !important;
		width: 852px !important;
		height: 135px !important;
		float: left !important;
		text-align: center !important;
		z-index:2 !important;
	}
	#wrap.even #top-right-box
	{
		position: relative !important;
		display: inline-block !important;
		width: 852px !important;
		height: 135px !important;
		float: left !important;
		text-align: center !important;
		z-index:2 !important;
	}
	#wrap.even #top-center-box
	{
		position: relative !important;
		display: inline-block !important;
		top: 12px !important;
		width: 264px !important;
		height: 110px !important;
		float: left !important;
		text-align: center !important;
		background:url(../images/viewer/navi_bg.png) no-repeat center center !important;
		z-index:1 !important;
	}
	#wrap.even #middle .page-box
	{
		width:50% !important;
		position: relative !important;
		display: block !important;
		visibility:visible !important;
		opacity:1 !important;
	}
	#wrap.even #middle #left-page .contents-box {float:right !important}
	#wrap.even #middle #right-page .contents-box {float:left !important}

	#wrap.odd
	{
		width:1059px !important;
		height:1514px !important;
		transform:scale(0.67) rotate( 90deg ) !important;
	}
	#wrap.odd #top
	{
		height:245px;
	}
	#wrap.odd #middle
	{
		height:1169px;
	}

	#wrap.odd #middle .page-box
	{
		width:100%;
		position: absolute;
		visibility: hidden;
	}
	#wrap.odd[page='left'] #middle #left-page.page-box
	{
		visibility: visible;
	}
	#wrap.odd[page='left'] #middle #right-page.page-box .popup_view
	{
		display:none;
	}
	#wrap.odd[page='right'] #middle #right-page.page-box
	{
		visibility: visible;
	}
	#wrap.odd[page='right'] #middle #left-page.page-box .popup_view
	{
		display:none;
	}


	#wrap.odd #middle #left-page .contents-box {float:none}

	#wrap.odd #middle .page-box .contents-box > div
	{
		margin:0 auto;
	}

	#wrap.odd #top-left-box
	{
		width: 529px;
	}
	#wrap.odd #top-center-box
	{
		position: absolute;
		top: 135px;
		left: 0px;
		width: 100%;
	}
	#wrap.odd #top-right-box
	{
		width: 529px;
	}

	#wrap.odd #book-thumnail-obj-box
	{
		position:relative;
		top:0px;
		width:900px;
		margin:0 auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
}


@media print and (orientation: portrait)
{
	#wrap.even
	{
		/*left:0px !important;
		top:0px !important;
		margin-top: 0px !important;
		margin-left: 0px !important;
		transform:scale(0.5) !important;
		transform-origin:0 0 !important;
		width:1968px  !important;
		height:1404px  !important;*/
	}
	#wrap.even
	{
		width:1968px !important;
		height:1404px !important;
		transform:scale(0.8) rotate( 90deg ) !important;
		transform-origin:50% 50% !important;
	}
	#wrap.even #top
	{
		height:135px !important;
	}
	#wrap.even #middle
	{
		height:1169px !important;
	}

	#wrap.even #middle .page-box
	{
		width:50% !important;
		position: relative !important;
		display: block !important;
		visibility:visible !important;
		opacity:1 !important;
	}

	#wrap.even #middle #left-page .contents-box {float:right}


	#wrap.even #book-thumnail-obj-box
	{
		position:relative !important;
		top:0px !important;
		width:1800px !important;
		margin:0 auto !important;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
	#wrap.even #top-left-box
	{
		position: relative !important;
		display: inline-block !important;
		width: 852px !important;
		height: 135px !important;
		float: left !important;
		text-align: center !important;
		z-index:2 !important;
	}
	#wrap.even #top-right-box
	{
		position: relative !important;
		display: inline-block !important;
		width: 852px !important;
		height: 135px !important;
		float: left !important;
		text-align: center !important;
		z-index:2 !important;
	}
	#wrap.even #top-center-box
	{
		position: relative !important;
		display: inline-block !important;
		top: 12px !important;
		width: 264px !important;
		height: 110px !important;
		float: left !important;
		text-align: center !important;
		background:url(../images/viewer/navi_bg.png) no-repeat center center !important;
		z-index:1 !important;
	}
	#wrap.even #middle .page-box
	{
		width:50% !important;
		position: relative !important;
		display: block !important;
		visibility:visible !important;
		opacity:1 !important;
	}
	#wrap.even #middle #left-page .contents-box {float:right !important}
	#wrap.even #middle #right-page .contents-box {float:left !important}



	#wrap.odd
	{
		width:1059px !important;
		height:1514px !important;

		transform:scale(0.8) !important;
		transform-origin:50% 50% !important;
	}
	#wrap.odd #top
	{
		height:245px;
	}
	#wrap.odd #middle
	{
		height:1169px;
	}

	#wrap.odd #middle .page-box
	{
		width:100%;
		position: absolute;
		visibility: hidden;
	}

	#wrap.odd #middle #left-page .contents-box {float:none}

	#wrap.odd #middle .page-box .contents-box > div
	{
		margin:0 auto;
	}

	#wrap.odd #top-left-box
	{
		width: 529px;
	}
	#wrap.odd #top-center-box
	{
		position: absolute;
		top: 135px;
		left: 0px;
		width: 100%;
	}
	#wrap.odd #top-right-box
	{
		width: 529px;
	}

	#wrap.odd #book-thumnail-obj-box
	{
		position:relative;
		top:0px;
		width:900px;
		margin:0 auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
}
.book-popup-close-btn
{
	position:absolute;
	top:50px;
	right:70px;
	width:36px;
	height:36px;
	cursor:pointer;
}
.close-btn-tpye1{background-image:url(../images/viewer/close_btn_1.png);}

.book-popup
{
	position:absolute;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:none;
	z-index:10000;
}
#book-thumnail-top
{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:135px;
	color:#fff;
	background:url(../images/viewer/thumnail_title.png) no-repeat;
	background-size: 443px 70px;
	background-position: 74px 35px;
}

#book-thumnail-middle
{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:1269px;
	background-color:rgba(0,0,0,0.5);
	overflow-y:auto;
	color:#fff;
}

.book-thumnail-obj
{
	display:inline-block;
	position:relative;
	width: 300px;
	margin-bottom: 40px;
	text-align:center;
	cursor:pointer;
}

.book-thumnail-obj img
{
	display:inline-block;
	position:relative;
	top:0px;
	left:0px;
	width:250px;
	margin:0 auto;
	border: 8px solid #828385;
	box-sizing: border-box;
}
.book-thumnail-obj.cur img
{
	border-color: #e91c44;
}
.book-thumnail-obj p
{
	display:block;
	width:100%;
	bottom:0px;
	text-align:center;
	font-size:60px;
	font-weight:bold;
	color:#fff;
	margin:0 auto;
	margin-top:5px;
	text-shadow: 0 0 10px #1c6e6f, 0 0 10px #1c6e6f, 0 0 10px #1c6e6f, 0 0 10px #1c6e6f, 0 0 10px #1c6e6f;
}

.book-mark-btn{position:absolute; top:0px; right:12px; width:44px; height:82px; background:url(../images/btns/bookmark_btn.png) no-repeat; cursor:pointer; z-index:1000}
#wrap.wrap-01_01_01 .book-mark-btn.on{background:url(../images/btns/bookmark_btn_on1.png) no-repeat;}
#wrap.wrap-01_02_01 .book-mark-btn.on{background:url(../images/btns/bookmark_btn_on1.png) no-repeat;}
#wrap.wrap-02_01_01 .book-mark-btn.on{background:url(../images/btns/bookmark_btn_on2.png) no-repeat;}
#wrap.wrap-02_01_02 .book-mark-btn.on{background:url(../images/btns/bookmark_btn_on2.png) no-repeat;}

/* 프레임 애니메이션 */
.frame_animation_box
{
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
}

.draw-line-box ellipse
{
  stroke: none;
  fill: #f00;
}
.draw-line-box path
{
  /*stroke: #444;
  stroke-dasharray: 5px 5px;*/
  stroke:rgba(0,0,0,0);
}

.s_reader_txt4
{
	position:absolute;
	left:0px;
	top:0px;
}

/*도움말*/
.helpttl {
  position: absolute;
	font-size: 0px;
	line-height: 50px;
	color: transparent;
}
.helpttl_2 {
  position: absolute;
	font-size: 0px;
	word-spacing: -4px;
	color: transparent;
}
.helptxt {
	position: absolute;
	color: transparent;
	font-size: 0px;
}
.helpnum {
  position: absolute;
	font-size: 0px;
	color: transparent;
}