@charset "utf-8";

.iconPack {
    background-image : url(img/icons48_180713.png);
}

.icon {
	background-repeat : no-repeat;
	cursor : pointer;
	width : 48px;
	height : 48px;
}

.close { background-position : -96px 0px; }
.index { background-position : -192px 0px; }
.moreebook { background-position : 0px -384px;}
.plus { background-position : -48px 0px; }
.minus { background-position : 0px 0px; }
.search { background-position : -96px -240px;  }
.share { background-position : -96px -384px;  }
.thumbnail { background-position : -192px -240px; }
.reset { background-position : -192px -192px; }
.band { background-position : -2px -435px; }
.whatsapp { background-position : -2px -483px; }
.facebook { background-position : -146px -435px; }
.twitter { background-position : -195px -435px; }
.email { background-position : -98px -290px; }

.settings { background-position : -144px -384px; }

.googlePlus { background-position : -51px -483px; }
.kakaostory { background-position : -99px -483px; }
.naver { background-position : -147px -483px; }
.fullscreenBtn { background-position : -51px -528px; }

.SideMenu_Select {
	/*background-color : rgba(66,66,66,1);*/
	background-color : rgba(0,0,0,0.4);
}


#SideBarMenuBtn * { 
	box-sizing : border-box;
	font: normal 10pt arial, sans-serif;
}
#SideBarMenuBtn {
	position : absolute;
	margin : 0px;
	top : 0px; 
	left : 0px;
	width : 48px;
	height : 48px;
	z-index : 2000;
}

#SideMenuContainer {
	position : absolute;
	overflow : hidden;
	top : 0px;
	left : 0px;
	z-index : 1000;
}

#SideBarMenuBtnClose {
	position : absolute;
	margin : 0px;
	top : 0px; 
	left : 0px;
	width : 48px;
	height : 48px;
	z-index : 2000;
}

#SideMenuBar {
	background-color:rgb(128,128,128);
	position : relative;
	float : left;
	width : 48px;
}

#SideMenuArea {
	position : relative;
	float : left;
	width : 100%;
	height : 100%;
}
.SideMenu { 
	position : relative; 
	float : left;  
}

#SideMenuBarClose { background-color : rgba(77,77,77,1);  }

#SideMenuTitle {
	background-color : rgba(77,77,77,1); 
	position : relative;
	float : left;
	color : #ffffff;
	overflow : hidden;
	text-transform: uppercase;
	text-overflow : ellipsis;
	white-space : nowrap;
	vertical-align: middle;
	font: bold 15pt arial, sans-serif;
	line-height: 2.5;
	padding-left : 5px;
	width : 100%;
	height : 48px;
}

#SideMenuBox {
	background-color : rgba(0,0,0,0.7);
	position : relative;
	float : left;
	width : 100%;
	padding : 7px;
}

#SideMenuBox td {
	border : none;
	font: normal 12pt arial, sans-serif;
}

.SideMenuContentList {
	position : relative;
	width : 100%;
	height : 100%;
}

#ebookSearchHeader, #searchHeader {
	width : 100%;
	height : 48px;
	border-bottom : 1px solid rgb(128,128,128);
}

#ebookSearchResult > td, #ebookSearchResult > td > span, #searchResult > td, #searchResult > td > span {
	font: bold 13pt arial, sans-serif;
	color : #dfdfdf;
}

#ebookSearchListContainer, #IndexListContainer, #SearchListContainer {
	width : 100%;
	height : 100%;
	overflow : hidden;
	margin-top : 0px;
	border-bottom : 1px solid rgb(128,128,128);
}

#IndexListContainer, #SearchListContainer {
	border : none;
}

.conList {
    position: relative;
    float: left;
    width: 100%;
    min-width: 320px;
    padding: 5px 0px 5px 0px;
    margin: 0px 0px 0px 0px;
    border-bottom:  2px dotted rgb(128,128,128);
    border-radius: 0px;
    height : 165px;
    overflow : hidden;
 }

.conList table, .conList table tr, .conList table td, .conList table thead {
    vertical-align: top;
    border: #ffffff 0px solid;
    padding: 0px;
    margin: 0px;
    color: #ffffff;
}

.padding5 { padding : 5px; }
.paddingLeft10 { padding-left: 10px; }

.imgContainer {
	border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 100px;
    height : 150px;
    max-height: 150px;
    text-align: center;
    vertical-align: middle;
    background-color: #cccccc;
    padding: 2px;
}

.imgContainer img {
	position : absolute;
	top : 0px;
	bottom : 0px;
	border-radius: 5px;
    margin: auto;
    vertical-align: middle;
}

.btnTxt {
    position: relative;
    float: left;
    margin: 5px 5px 5px 0px;
    padding: 8px 0px 8px 0px;
    border-radius: 10px;
    width: 70px;
    font: normal 13pt arial, sans-serif;
    color: #ffffff;
    border : 2px solid #dfdfdf;
	background-color:rgba(77,77,77,1);
    text-align: center;
    cursor: pointer;
}

.contSubject {
	font: normal 13pt arial, sans-serif;
	text-align : left;
	white-space : wrap;
	/*text-overflow : ellipsis;
	white-space : nowrap;
	vertical-align: middle;	*/
}

.listItem {
	color : #ffffff;
	border-bottom : 1px dotted rgb(128,128,128);
	overflow : hidden;
	text-align : left;
	text-overflow : ellipsis;
	vertical-align: middle;
	padding-top : 10px;
	padding-bottom : 10px;
	cursor:pointer;
}

#q, #eq {
	width : 100%;
	height : 100%;
	font: normal 13pt arial, sans-serif;
	border : none;
	color : rgb(128,128,128);
	padding-left : 5px;
}

#sharePageTypeList {
	position : relative;
	float:left;
	width:100%;
	border-top : 2px solid rgb(128,128,128);
	margin-top:0px;
	min-height:32px;
	padding-top : 5px;
}

.sharebutton {
	position : relative;
	float : left;
	margin-bottom : 10px;
	margin-right : 10px;
	/*border : 3px solid rgb(128,128,128); */
	border-radius: 5px
}

.shareTypeButton {
	box-sizing: border-box;
	color : #ffffff;
	border : 2px solid #dfdfdf;
	position : relative;
	float : left;
	text-align : center;
	overflow : hidden;
	text-align : center;
	text-overflow : ellipsis;
	white-space : nowrap;
	vertical-align: middle;
	font: bold 10pt arial, sans-serif;
	padding-top : 7px;
	padding-bottom : 7px;
	width : 90px;
	border-radius: 10px;
	margin-right : 10px;
}

.sharebutton_select {
	border : 3px solid darkOrange;
}

.thumbPage {
	position : absolute;
	overflow : hidden;
	border : 2px solid rgb(99,99,99);
	width : 99px;
	height : 140px;
}

.thumbPage img {
	position:absolute;left:0px;top:0px;bottom:0px;right:0px;
    margin: auto;
    vertical-align: middle;
    cursor:pointer;
}

.thumbPage_Select {
	border : 3px solid darkOrange;
}

img.portrait { width:100%; }
img.landscape { height : 100%; }
img.landscapeRight { height : 100%; left : -50%; }

#_FullScreen, #_ThumbInfo {
	overflow : visible !important;
	line-height : 100% !important;
	padding : 0px !important;	
	margin : 0px !important;
	
	-webkit-transform-style: preserv-3d;
	transform-style: preserv-3d;
	perspective: 320px
}

#_FullScreen > div, #_ThumbInfo > div {
	-webkit-transform-origin : 0 0;
	-ms-transform-origin : 0 0;
	-o-transform-origin : 0 0;
	-ms-transform-origin : 0 0;
	transform-origin : 0 0;
	
	-webkit-transform:scale(0.6458);
	-ms-transform:scale(0.6458); 
	-o-transform:scale(0.6458); 
	-moz-transform:scale(0.6458); 
	transform:scale(0.6458); 
	zoom : 1;
}

#_ThumbInfo > div { margin-left : 1px; margin-top : 0px; }
#_FullScreen > div { margin-left : 10%; margin-top : 0px; }

#textContentPopup {
	position : absolute;
	background-color : rgba(0,0,0,0.7);
	top : 0px;
	left : 0px;
	width : 100%;
	height : 100%;
	z-index : 30000;
}

#textContentContainer {
	position : absolute;
	/*background-color : rgb(149,149,149);*/
	width : 100%;
	height : 480px;
	top : 0px;
	left : 0px;
	bottom : 0px;
	right : 0px;
	/*margin : 0px auto;*/
	z-index : 30010;
	/*border : 3px solid #dfdfdf;*/
	overflow : hidden;
}

#txtContainerHeader {
	position : relative;
	float : left;
	/*background-color : rgb(149,149,149); */
	color : #ffffff;
	font: bold 16pt arial, sans-serif;
	padding : 12px;
	width : 100%;
}

#txtContainer {
	position : relative;
	float : left;
	/*background-color : #ffffff;*/
	width : 100%;
	font: normal 16px arial, sans-serif;
	overflow : auto;
	padding : 10px;
	color : #ffffff;
	white-space:normal;
	line-height : 160%;
}

#txtContainerFooter {
	width : 100%;
	position : relative;
	float : left;
	height : 48px;
	margin-top : -10px;	
	padding-right : 10px;
	
	-webkit-transform-origin : 100% 100%;
	-ms-transform-origin : 100% 100%;
	-o-transform-origin : 100% 100%;
	-ms-transform-origin : 100% 100%;
	transform-origin : 100% 100%;
	
	-webkit-transform:scale(0.8);
	-ms-transform:scale(0.8); 
	-o-transform:scale(0.8); 
	-moz-transform:scale(0.8); 
	transform:scale(0.8); 
}


#txtContentPopUpClose, #txtContentPopUpPlus {
	float : right;
}

#txtContentPopUpClose, #txtContentPopUpPlus, #txtContentPopUpMinus {
	border-radius: 50%;
	border : 1px solid #ffffff;
}

::-webkit-scrollbar {width: 8px; height: 8px; border: 0px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #555555; }
::-webkit-scrollbar-track {background: #999999; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

html {scrollbar-3dLight-Color: #999999; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #999999; scrollbar-Face-Color: #999999; scrollbar-Track-Color: #555555; scrollbar-DarkShadow-Color: #999999; scrollbar-Highlight-Color: #999999; scrollbar-Shadow-Color: #999999}

#_ThumbInfo > div span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: rgba(0,0,0, 0.5);
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  top : -55px;
  padding : 7px 0px 7px 0px;
  font-size : 12pt;
}
#_ThumbInfo > div span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid rgba(0,0,0,0.5);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

#_ThumbInfo > div:hover span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -70px;
  z-index: 999;
}

#_FullScreen > div span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: rgba(0,0,0, 0.7);
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  top : -55px;
  padding : 7px 0px 7px 0px;
  font-size : 12pt;
}
#_FullScreen > div span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid rgba(0,0,0,0.7);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

#_FullScreen > div:hover span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -70px;
  z-index: 999;
}

/*
#textContentPopup {
	position : absolute;
	background-color : rgba(0,0,0,0.7);
	top : 0px;
	left : 0px;
	width : 100%;
	height : 100%;
	z-index : 30000;
}

#textContentContainer {
	position : absolute;
	background-color : rgb(149,149,149);
	width : 640px;
	height : 480px;
	top : 0px;
	left : 0px;
	bottom : 0px;
	right : 0px;
	margin : 0px auto;
	z-index : 30010;
	border : 3px solid #dfdfdf;
	overflow : hidden;
}

#txtContainerHeader {
	position : relative;
	float : left;
	background-color : rgb(149,149,149); 
	color : #ffffff;
	font: bold 12pt arial, sans-serif;
	padding : 12px;
	width : 100%;
}

#txtContainer {
	position : relative;
	float : left;
	background-color : #ffffff;
	width : 100%;
	height : 384px;
	font: normal 10pt arial, sans-serif;
	overflow-y : auto;
	padding : 7px;
}

#txtContainerFooter {
	width : 100%;
	position : relative;
	float : left;
	height : 48px;
}

#txtContentPopUpClose, #txtContentPopUpPlus {
	float : right;
}
*/

#openMenuTop {
	 position:absolute;
	 box-sizing: border-box;
	 top:14px;
	 margin:0px;
	 padding:0px;
	 background-color: #ffffff;
	 border-radius: 5px;
	 width:32px;
	 height:1px;
	 margin:0px 7px 0px 7px;
	 -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
	 transition:all 0.7s;         
}
#openMenuMiddle {
	 position:absolute;
	 box-sizing: border-box;
	 top:23px;
	 margin:0px;
	 padding:0px;
	 background-color: #ffffff;
	 border-radius: 5px;
	 width:32px;
	 height:1px;
	 margin:0px 7px 0px 7px;
	 -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
	 transition:all 0.7s;         
}
#openMenuBottom {
	 position:absolute;
	 box-sizing: border-box;
	 top:32px;
	 margin:0px;
	 padding:0px;
	 background-color: #ffffff;
	 border-radius: 5px;
	 width:32px;
	 height:1px;
	 margin:0px 7px 0px 7px;
	 -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
	 transition:all 0.7s;         
}

#closeMenuTop {
         position:absolute;
         box-sizing: border-box;
         top:23px;
         margin:0px;
         padding:0px;
         background-color: #ffffff;
         border-radius: 5px;
         width:32px;
         height:1px;
         margin:0px 7px 0px 7px;
         -webkit-transform:rotate(135deg);-ms-transform:rotate(135deg); transform:rotate(135deg); -o-transform:rotate(135deg); -moz-transform:rotate(135deg); 
         -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
         transition:all 0.7s;         
      }
      #closeMenuMiddle {
         position:absolute;
         box-sizing: border-box;
         top:23px;
         margin:0px;
         padding:0px;
         background-color: #ffffff;
         border-radius: 5px;
         width:32px;
         height:1px;
         margin:0px 7px 0px 7px;
         opacity:0;
         -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
         transition:all 0.7s;         
      }
      #closeMenuBottom {
         position:absolute;
         box-sizing: border-box;
         top:23px;
         margin:0px;
         padding:0px;
         background-color: #ffffff;
         border-radius: 5px;
         width:32px;
         height:1px;
         margin:0px 7px 0px 7px;
         -webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg); transform:rotate(-135deg); -o-transform:rotate(-135deg); -moz-transform:rotate(-135deg); 
         -webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;
         transition:all 0.7s;         
      }