/* @Booklet
----------------------------------------*/
	.booklet         {position:relative; margin:0 auto ; overflow:visible !important;}
	.booklet .b-page {left:0; top:0; position:absolute; overflow:hidden; padding:0;}

	.booklet .b-pN  {}
	.booklet .b-p0  {}
	.booklet .b-p1  {}
	.booklet .b-p2  {}
	.booklet .b-p3  {}
	.booklet .b-p4  {}

   	/* Page Wrappers */
	.booklet .b-wrap       {top:0; position:absolute;}
	.booklet .b-wrap-left  {background:#e1e1e1;}
	.booklet .b-wrap-right {background:#e1e1e1;}

	.booklet .b-pN .b-wrap,
	.booklet .b-p1 .b-wrap,
	.booklet .b-p2 .b-wrap,
	.booklet .b-p3 .b-wrap,
	.booklet .b-p4 .b-wrap  {left:0;}
	.booklet .b-p0 .b-wrap  {right:0;}

   	/* Custom Page Types */
	.booklet .b-page-blank  {padding:0; width:100%; height:100%;}
	.booklet .b-page-cover  {padding:0; width:100%; height:100%; background:#925C0E;}
	.booklet .b-page-cover h3  {color:#fff; text-shadow:0px 1px 3px #222;}

   	/* Page Numbers */
	.booklet .b-counter {bottom:10px; position:absolute; display:block; width:25px; height:20px; background:#ccc; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; padding:5px 0 0;}
	.booklet .b-wrap-left  .b-counter  {left:10px;}
	.booklet .b-wrap-right .b-counter {right:10px;}

   	/* Page Shadows */
	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}

	.booklet .b-p0 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
	.booklet .b-p3 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:0 10px;}

   	/* Overlay Controls */
	.booklet .b-grab     {cursor: url(images/openhand.cur), default;}
	.booklet .b-grabbing {cursor: url(images/closedhand.cur), default;}

   	/* Overlay Controls */
	.booklet .b-overlay      {top:0; position:absolute; height:100%; width:50%;}
	.booklet .b-overlay-prev {left:0;}
	.booklet .b-overlay-next {right:0;}

   	/* Tab Controls */
	.booklet .b-tab        {background:#7ca2e9; height:40px; width:100%; padding:5px 0 0;
													text-align:center; color:#fff; position:absolute; font-size:12px;}
	.booklet .b-tab-prev   {left:-5px;}
	.booklet .b-tab-next   {right:-5px;}
	/*.booklet .b-tab:hover  {background:#373737; color:#fff44a;}*/

   	/* Arrow Controls */
	.booklet .b-arrow          {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:74px;}
/*	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:170px; width:74px; position:absolute; left:0; top:25%;}*/
	.booklet .b-arrow div 	   {display: none; text-indent: -9999px; height: 60px; width: 31px; position: absolute;
    													left: 20px; top: 42%;}
	.booklet .b-arrow-next     {right:-80px;}
	.booklet .b-arrow-prev     {left:-80px;}
	.booklet .b-arrow-next div {background:url("../images/arrow_right.png") no-repeat left top;}
	.booklet .b-arrow-prev div {background:url("../images/arrow_left.png") no-repeat left top;}

/* @z-index fix (needed for older IE browsers)
----------------------------------------*/

    body              {z-index:0;}
    .b-menu           {z-index:100;}
    .b-selector       {z-index:100;}
    .booklet          {z-index:10;}
    .b-pN             {z-index:10;}
    .b-p0             {z-index:30;}
    .b-p1             {z-index:20;}
    .b-p2             {z-index:20;}
    .b-p3             {z-index:30;}
    .b-p4             {z-index:10;}
    .b-prev           {z-index:40;}
    .b-next           {z-index:40;}
    .b-counter        {z-index:40;}

/* @Menu Items
----------------------------------------*/
.b-menu {height:50px; padding:0 0 10px;} /* 미리보기 위치 - 상단 */

.b-selector             {height:40px; position:relative; float:right; border:none; color:#cecece; cursor:pointer; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
.b-selector .b-current  {line-height:30px; min-width:18px; width:74px;height:30px; display:block; background:#373737; text-align:center;}
.b-selector-page        {width:auto; margin-left:15px;}
.b-selector-chapter     {width:auto;}

.b-selector:hover            {color:#fff; background-position:left 0px;}
.b-selector:hover .b-current {background-position:right 0px;}
.b-selector ul               {overflow:hidden;  margin:0; list-style:none !important; position:absolute;
															top:30px; right:0; padding:0 0 10px; background:#373737; width:370px;}
.b-selector li               {float:left; text-align:center; width: 74px;display:inline; height: 35px; line-height:35px; }
.b-selector a                {color:#cecece; height:14px; text-decoration:none;}
.b-selector a .b-text        { clear:none;}
.b-selector a .b-num         { clear:none;}
.b-selector a:hover          {color:#fff;}
/*
	.b-menu {height:50px; padding:0 0 10px;} /* 미리보기 위치 - 상단

	.b-selector             {height:40px; position:relative; float:right; border:none; color:#cecece; cursor:pointer; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	.b-selector .b-current  {width:70px;line-height:30px; min-width:18px; color:#fff;
													 height:30px; display:block; background: #7ca2e9; text-align:center;}

	.b-selector-page        {width:auto; margin-left:15px;}
	.b-selector-chapter     {width:auto;}

	.b-selector:hover            {color:#fff; padding-bottom:0 !important; background-position:left 0px;}
	.b-selector:hover .b-current {background-position:right 0px;}
	.b-selector ul               {display: table; margin: 0; list-style: none !important; padding:0 !important;
    														position: absolute; top: 30px; right: 0;
																background:#7ca2e9; width: 380px; height:180px;}

	.b-selector li               {float: left; display: table-cell; text-align: center; width: 76px;
																	  line-height: 30px; height: 30px; font-size: 12px;}
	.b-selector a                {color:#fff; height:14px; text-decoration:none;  padding:5px 10px;}
	.b-selector a .b-text        {clear:none;}
	.b-selector a .b-num         {clear:none;}
	.b-selector a:hover          {color:#fff;}


/* viewer page Layout */
html, body {margin:0 auto;padding:0px;width:100%; height:100%;background:#f3f3f3;}
body {font:normal 12px/1.6 '나눔고딕', NanumGothic, 'nag', '돋움', dotum, '굴림', sans-serif,  Arial; color:#8d8d8d;}
#viewTop {position: relative; height:80px; overflow:hidden;
	background:#fff;
	border-bottom: 1px solid #fafafa;
}
#viewTop ul {position:relative;  margin:10px 0;}
#viewTop ul li {list-style-type: none;}
#viewTop ul li.logo { position: absolute; top:21px; left:40px; max-width:200px; }
#viewTop ul li.title { position: absolute; top:19px; left:240px;  font:bold 16px 'pretendard', '나눔고딕', NanumGothic, 'nag', '돋움', dotum, '굴림', sans-serif,  Arial;color:#222;
	overflow: hidden;}
#viewTop ul li.uicot { position: absolute; right:10px; top:0px}
#viewTop ul li.uicot a {display: inline-block;}
.btn_play { top:2px;}
.sns { position: absolute; top:70px; left:10px; }
.sns a {display: inline-block; width:22px; height:22px; background:url(/images/img_common/sns.gif) no-repeat left top; text-indent:-10000px}
.sns a.tw {background-position: -22px top; }
.sns a.mt { background-position: -44px top; }
.sns a.cw { background-position: -66px top; }
#mybook {border:2px solid #ddd;}