@charset="utf-8";
/*스크롤바*/
html { scrollbar-arrow-color: #efefef;
        scrollbar-Track-Color: #efefef; 
        scrollbar-base-color: #dfdfdf;
        scrollbar-Face-Color: #dfdfdf;
        scrollbar-3dLight-Color: #dfdfdf;         
        scrollbar-DarkShadow-Color: #dfdfdf;
        scrollbar-Highlight-Color: #dfdfdf;
        scrollbar-Shadow-Color: #dfdfdf}
/* Chrome, Safari용 스크롤 바 */
/*두께*/
::-webkit-scrollbar {width: 6px; height: 10px;}
/*레일 바 상하단 여백*/
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {display: block; width: 10px;height: 10px; background: url() rgba(0,0,0,.05);}
/*스크롤바 스크롤 트랙 레일 바*/
::-webkit-scrollbar-track { background: rgba(0,0,0,.05); }
/*스크롤바 스크롤 내부 움직이는 오브젝트*/
::-webkit-scrollbar-thumb {  background: rgba(0,0,0,.1);  border-radius: 10px 10px 10px 10px}
/*background color*/
.contentsBg{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#f1f1f1; z-index: -1}

#warp{width:100%; height:100%; *zoom:1;}
/*header*/
#header{width:100%; height:96px; position:relative;}
/*header - menu*/
#header .menu{width:100%; height:60px; background: #515d8b; border-bottom: 1px solid #282f4c; padding:10px 8px;}
#header .menu:after{content:''; display: block; clear: both;}
#header .menu h1{float: left}
#header .menu h1 a{outline:none;}
#header .menu ul{*zoom:1; float:right;}
#header .menu ul:after{content:''; display: block; clear: both;}
#header .menu ul li{float:left;margin-left:10px;}
#header .menu ul li a{display:block; height:40px; text-indent: -9999em; outline: none}
/*버튼 Contents*/
#header .menu ul li.contents{margin-left:0;}
#header .menu ul li.contents a{
	background: url(../img/contents.png) no-repeat;
  	background: url(../img/contents.svg) no-repeat, 
    linear-gradient(transparent, transparent);
    width:50px;
}
/***버튼 액티브 설정***/
#header .menu ul li.contents a:hover,
#header .menu ul li.contents a:active,
#header .menu ul li.contents a:focus,
#header .menu ul li.contents.on a{background-position:0 -40px;}
/*버튼 Slide*/
#header .menu ul li.slide a{
	background: url(../img/slide.png) no-repeat;
  	background: url(../img/slide.svg) no-repeat, 
    linear-gradient(transparent, transparent);
	width:30px; }
/***버튼 액티브 설정***/
#header .menu ul li.slide a:hover,
#header .menu ul li.slide a:active,
#header .menu ul li.slide a:focus,
#header .menu ul li.slide.on a{background-position:0 -40px;}
/*버튼 Bookmark*/
#header .menu ul li.bookmark a{
	background: url(../img/bookmark.png) no-repeat; 
  	background: url(../img/bookmark.svg) no-repeat, 
    linear-gradient(transparent, transparent); 
	width:50px;}
/***버튼 액티브 설정***/
#header .menu ul li.bookmark a:hover,
#header .menu ul li.bookmark a:active,
#header .menu ul li.bookmark a:focus,
#header .menu ul li.bookmark.on a{background-position:0 -40px;}
/*버튼 Print*/
#header .menu ul li.print a{
	background: url(../img/print.png) no-repeat; 
  	background: url(../img/print.svg) no-repeat, 
    linear-gradient(transparent, transparent); 
	width:30px;}
/***버튼 액티브 설정***/
#header .menu ul li.print a:hover,
#header .menu ul li.print a:active,
#header .menu ul li.print a:focus,
#header .menu ul li.print.on a{background-position:0 -40px;}
/*버튼 Thumbnail*/
#header .menu ul li.thumbnail a{
	background: url(../img/thumbnail.png) no-repeat; 
  	background: url(../img/thumbnail.svg) no-repeat, 
    linear-gradient(transparent, transparent); 
 	width:50px;}
/***버튼 액티브 설정***/
#header .menu ul li.thumbnail a:hover,
#header .menu ul li.thumbnail a:active,
#header .menu ul li.thumbnail a:focus,
#header .menu ul li.thumbnail.on a{background-position:0 -40px;}
/*버튼 PDF Down*/
#header .menu ul li.pdfdown a{
	background: url(../img/pdfdown.png) no-repeat; 
  	background: url(../img/pdfdown.svg) no-repeat, 
    linear-gradient(transparent, transparent); 
	width:50px;}
/***버튼 액티브 설정***/
#header .menu ul li.pdfdown a:hover,
#header .menu ul li.pdfdown a:active,
#header .menu ul li.pdfdown a:focus,
#header .menu ul li.pdfdown.on a{background-position:0 -40px;}
/*search*/
#header .search{
	width:100%; height:36px; position:absolute; bottom:0; left:0; 
	background:#fff; box-shadow: 0 8px 60px rgba(0,0,0,.1); text-align: right; line-height: 32px; padding-right:6px;}
.search_input{
	width:250px; height:20px; border:1px solid #eee; text-indent: 6px;
	border-radius: 4px 4px 4px 4px; background:#f4f4f4; outline: none;}
.searchBtn{
	background: url(../img/searchBtn.png) no-repeat; 
  	background: url(../img/searchBtn.svg) no-repeat,
  	linear-gradient(transparent, transparent);
	cursor: pointer;
	outline: none; text-indent: -9999em; border:0; width:52px; height:24px; vertical-align: middle;}
/*contents*/
#contents{width:100%; padding:8px;}
#contents .pdfViewer{width:93%; margin:0 auto; position:relative;}
/*북마크아이콘*/
#contents .bookmarks a{
	position:absolute; left:50%; text-indent: -9999em;
	margin-left:-15px; width:25px; height:65px; z-index:1000;
	background: url(../img/post.png) no-repeat; 
  	background: url(../img/post.svg) no-repeat,
  	linear-gradient(transparent, transparent);
  	box-shadow: 0 0 5px rgba(0,0,0,.1);
  }
@keyframes bookmarkAni{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
#contents .bookmarks.active a{
	animation: bookmarkAni 0.5s; 
	background: url(../img/post_active.png) no-repeat; 
  	background: url(../img/post_active.svg) no-repeat,
  	linear-gradient(transparent, transparent);}
#contents .pdfViewer .books{width:50%;}
#contents .pdfViewer .books img{width:100%; height:100%;}
#contents .pdfViewer .books.odd{position:absolute; top:0; left:0;}
#contents .pdfViewer .books.even{position:absolute; top:0; right:0;}

/********bottom********/
/*footer*/
#bottom{position:absolute; bottom:0; left:0; width:100%; height:50px; padding:6px; *zoom:1;}
#bottom:after{content:''; display: block; clear: both;}
#bottom h1.bluEbook{width:140px; height:42px; text-indent: -9999em; float:left;
	background: url(../img/blueEbook.png) no-repeat; 
  	background: url(../img/blueEbook.svg) no-repeat,
  	linear-gradient(transparent, transparent);
}
#bottom .pageQuick {float:right; width:280px; height:30px; position: relative; margin-top:6px;}
#bottom .pageQuick:after{content:''; display: block; clear: both;}
#bottom .pageQuick span{float:left; width:26px; height:28px;}
#bottom .pageQuick span a{width:100%; height:100%; display:block; }
#bottom .pageQuick span.first{position: absolute; top:0; left:0;}
#bottom .pageQuick span.first a{
	background: url(../img/first.png) no-repeat; 
  	background: url(../img/first.svg) no-repeat,
  	linear-gradient(transparent, transparent);
	background-position:4px 6px;}
#bottom .pageQuick span.prev {position: absolute; top:0; left:31px}
#bottom .pageQuick span.prev a{
	background: url(../img/prev.png) no-repeat;
  	background: url(../img/prev.svg) no-repeat,
  	linear-gradient(transparent, transparent);
	background-position:4px 6px;}
#bottom .pageQuick span.page_txt{
	position: absolute; top:0; left:62px;
	width:154px; height:28px; line-height:24px; font-size:14px;
	text-align: center; word-break: break-all; margin-right:5px;}
#bottom .pageQuick span.page_txt strong{font-weight: bold; color:#559bc8;}
#bottom .pageQuick span.next{position: absolute; top:0; right:31px;}
#bottom .pageQuick span.next a{
	background: url(../img/next.png) no-repeat;
  	background: url(../img/next.svg) no-repeat,
  	linear-gradient(transparent, transparent);
	background-position:6px 6px;}
#bottom .pageQuick span.last{position: absolute; top:0; right:0;}
#bottom .pageQuick span.last a{
	background: url(../img/last.png) no-repeat;
  	background: url(../img/last.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
	background-position:6px 6px;}
/*sizing full screen 1400*/
.sizing{width:1400px; margin:0 auto;}

/*POPUP*/
.popupContainer{
	width:400px; height:300px; position:fixed; top:80px; left:50%; 
	margin-left:-200px; border:1px solid #515d8b; background: #fff; z-index: 10000;
	box-shadow: 0 0 3px rgba(0,0,0,.2); *zoom:1;}
.popupContainer h2{display:block; width:100%; height:30px; 
	line-height: 30px; background:#515d8b; color:#fff;
	position: relative; padding:0 10px 0 6px;}
.popupContainer h2:after{content:''; display: block; clear: both;}
.popupContainer h2 .close a{
	position: absolute; top:50%; right:6px; margin-top:-8px;
	background: url(../img/close.png) no-repeat;
  	background: url(../img/close.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
	width:16px; height:16px; text-indent: -9999em;}
/*popup - list /목차/*/
.popupContainer .popupList{width:100%; height:268px; overflow-y: scroll;}
.popupContainer .popupList ul{width:100%;}
.popupContainer .popupList li{border-bottom:1px solid #eee; line-height: 1.4}
.popupContainer .popupList li:last-child{border-bottom:0;}
.popupContainer .popupList li a{
	display:block; width:100%; height:100%; 
	padding:10px 6px; word-break: break-all;}
.popupContainer .popupList li a h3{font-size:13px; color:#666;}
.popupContainer .popupList li a h3 strong{font-weight: bold;}
.popupContainer .popupList li a:hover,
.popupContainer .popupList li a:active,
.popupContainer .popupList li a:focus{background:#c9e0ee;}
/*popup - bookmark*/
.popupContainer .popupList.bookmark li a{display:table;}
.popupContainer .popupList.bookmark li a:after{content:''; display: block; clear: both;}
.popupContainer .popupList.bookmark li a .thumbnail{width:62px; height:80px; border:1px solid #555;}
.popupContainer .popupList.bookmark li a .thumbnail img{width:100%; height:100%;}
.popupContainer .popupList.bookmark li a .txt{width:320px; padding-left:6px; word-break: break-all; display:table-cell; vertical-align: middle;}
.popupContainer .popupList.bookmark li a h3{margin-top:4px;}
.popupContainer .popupList.bookmark li a .thumbNum{
	font-size:14px; font-weight: bold; padding:2px 6px; display:inline-block; min-width:36px; text-align: center;
	background:#515e8b; border-radius: 5px 5px 5px 5px; color:#fff;}

#thumbnailListBG{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:10000}
#thumbnailListBG .thumbnailList{padding:74px 50px 70px 60px; width:100%;}
/*반응형때 height크기조절(섬네일필드)*/
#thumbnailListBG .thumbnailList ul{*zoom:1; height:822px; overflow-y: scroll;}
#thumbnailListBG .thumbnailList ul:after{content:''; display: block; clear: both;}
#thumbnailListBG .thumbnailList ul li{
	box-shadow:0 0 10px rgba(0,0,0,.3);
	float:left; margin-bottom:6px; margin-left:6px; }
#thumbnailListBG .thumbnailList ul li a{display:block; position: relative;  width:216px; height:268px; overflow:hidden;}
#thumbnailListBG .thumbnailList ul li a img{width:100%; height:100%;}
#thumbnailListBG .thumbnailList ul li a .thumbNum{
	font-size:14px; font-weight: bold; padding:2px 4px; display:inline-block; min-width:34px; text-align: center;
	background:#fff; border:1px solid #555; color:#555; position:absolute; bottom:5px; right:5px;}
#thumbnailListBG .close a{
	position: absolute; top:20px; right:20px;
	background: url(../img/close.png) no-repeat;
  	background: url(../img/close.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
	width:26px; height:26px; background-size:cover; text-indent: -9999em;}
/*print setting*/
#printSettingBG{position:fixed; top:0; left:0; right:0; bottom:0; background:#f1f1f1; z-index:10000}
#printSettingBG:after{content:''; display: block; clear: both;}
#printSettingBG .viewport{position: absolute; top:10px; left:262px; bottom:10px; width:1024px; padding:10px; border:1px solid #aaa; background:#bbb; overflow-y: scroll;}
#printSettingBG .viewport .print_div { margin-bottom:8px;}
#printSettingBG .viewport .print_div:last-child{margin-bottom:0;}
#printSettingBG .viewport .print_div img{width:100%;}
#printSettingBG .settings{position: absolute; top:0; left:0; bottom:0; width:250px; background:#fff; box-shadow:3px 0 10px rgba(0,0,0,.1);}
#printSettingBG .settings h2{
	display:block; height:60px; background:#515e8b; border-bottom:1px solid #2a314e; 
	font-size:24px; font-weight: 500; color:#fff; line-height: 60px; text-align: center;}
#printSettingBG .settings .settingForm{padding:40px 16px;}
#printSettingBG .settings .settingForm ul{margin-top:30px;}
#printSettingBG .settings .settingForm ul:first-child{margin-top:0;}
#printSettingBG .settings .settingForm ul li{padding:16px 0;}
#printSettingBG .settings .settingForm ul li.label label{
	background:#515e8b; padding:4px 16px; font-size:16px;
	border-radius:6px 6px 6px 6px; color:#fff;}
#printSettingBG .settings .settingForm .btnArea{text-align: center;}
#printSettingBG .settings .settingForm .btnArea button{
	background:#515e8b; width:90px; height:36px; font-size: 18px; font-weight:100; line-height: 36px;
	color:#fff; border:0; outline:0; cursor: pointer; margin:4px;}
#printSettingBG .settings .settingForm .btnArea input[type="button"]{
	outline:0;background:#515e8b; width:90px; height:36px; font-size: 18px; font-weight:100; line-height: 36px;
	color:#fff; border:0; outline:0; cursor: pointer; margin:4px;}
#printSettingBG .settings .settingForm .btnArea a{
	display:inline-block;
	outline:0;background:#515e8b; width:90px; height:36px; font-size: 18px; font-weight:100; line-height: 36px;
	color:#fff; border:0; outline:0;text-align: center; margin:4px;}
.popupContainer.slide{height:146px;}
.popupContainer.slide .popupList{height:116px; overflow:auto;}
.popupContainer.slide .popupList .player{width:100%; height:76px; text-align: center; line-height: 76px}
.popupContainer.slide .popupList .player .slideBtn{outline:none; border:0; cursor: pointer; width:30px; height:30px; text-indent: -9999em; margin:0 16px;}
.player .slideBtn.slideOn{
	background: url(../img/player.png) no-repeat;
  	background: url(../img/player.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
}
.player .slideBtn.slideOn.active{background-position:0 -30px;}
.player .slideBtn.pageDirection{
	background: url(../img/pageDirection.png) no-repeat;
  	background: url(../img/pageDirection.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
}
.player .slideBtn.pageDirection.active{background-position:0 -30px;}
.popupContainer.slide .popupList .range{width:100%; height:40px; line-height: 36px; text-align: center; border-top:1px solid #eee;}
.popupContainer.slide .popupList .range #sec{vertical-align: top;}
.popupContainer.slide .popupList .range #pageNum{vertical-align: top; font-weight: bold;}

.popupContainer.slide .popupList .range ul{width:100%; margin:0 auto;}
.popupContainer.slide .popupList .range ul:after{content:''; display: block; clear: both;}
.popupContainer.slide .popupList .range ul li{border:0; float:left; width:33.3%; height: 30px; line-height: 30px; text-align: center;}


/*range bar*/
#rangeBar {
	width:100px;
   	position: relative;
   	top:13px;
   	margin-left: -6px;
}

#handler {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:6px;
    width: 100px;
    background: url('../img/volume-empty.png') no-repeat left top;
}

#handler .ui-slider-range-min {
    height:6px;
    width: 100px;
    position: absolute;
    background: url('../img/volume-full.png') no-repeat left top;
}

#handler .ui-slider-handle {
    width: 15px;
    height:15px;
    background: url('../img/volume-knob.png') no-repeat left top;
    position: absolute;
    margin-left: -9px;
    margin-top: -5px;
    cursor: pointer;
    outline: none;
}


@media only screen and (max-width : 1600px){.sizing{width:1400px; margin:0 auto}
#thumbnailListBG .thumbnailList ul li{margin-bottom:5px; margin-left:5px; }
#thumbnailListBG .thumbnailList ul li a{width:194px; height:241px;}
}
@media only screen and (max-width : 1400px){.sizing{width:1280px; margin:0 auto}
#thumbnailListBG .thumbnailList ul li{margin-bottom:5px; margin-left:5px; }
#thumbnailListBG .thumbnailList ul li a{width:173px; height:214px;}
}
@media only screen and (max-width : 1280px){.sizing{width:1024px; margin:0 auto}
	/*프린트스크린*/
	#printSettingBG .viewport{position: absolute; top:10px; left:252px; bottom:10px; 
		max-width:1024px; width:70%; padding:10px; border:1px solid #aaa; overflow-y: scroll;}
	#printSettingBG .viewport img{width:100%;}
	#printSettingBG .settings{position: absolute; top:0; left:0; bottom:0; width:240px; background:#fff; box-shadow:3px 0 10px rgba(0,0,0,.1);}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:5px; margin-left:5px; }
	#thumbnailListBG .thumbnailList ul li a{width:151px; height:188px;}
}
@media only screen and (max-width : 1024px){
	.sizing{width:100%; margin:0 0 0 0;}
	/*프린트스크린*/
	#printSettingBG .viewport{position: absolute; top:10px; left:252px; bottom:10px; max-width:730px; width:64%; padding:10px; border:1px solid #aaa; overflow-y: scroll;}
	#printSettingBG .viewport img{width:100%;}
	#printSettingBG .settings{position: absolute; top:0; left:0; bottom:0; width:240px; background:#fff; box-shadow:3px 0 10px rgba(0,0,0,.1);}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:4px; margin-left:4px; }
	#thumbnailListBG .thumbnailList ul li a{width:130px; height:161px;}
}
/* Desktops and laptops */
@media only screen and (max-width : 800px) {
	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:155px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:119px;}
	#header .menu h1{float: none; display:block;text-align: center}
	#header .menu ul{*zoom:1; float:none; width:420px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:30px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px;}
	/*viewer*/
	#contents{width:100%; padding:5px;}
	#contents .pdfViewer{margin:155px auto 5px;}
	#contents .pdfViewer .books{width:100%; position:absolute; top:0; left:0;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList ul li{margin-bottom:3px; margin-left:3px; }
	#thumbnailListBG .thumbnailList ul li a{width:108px; height:134px;}
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:80vh; overflow-y: scroll;}
	/*프린트스크린*/
	#printSettingBG .viewport{position: absolute; top:10px; left:252px; bottom:10px; max-width:480px; width:60%; padding:10px; border:1px solid #aaa; overflow-y: scroll;}
	#printSettingBG .viewport img{width:100%;}
	#printSettingBG .settings{position: absolute; top:0; left:0; bottom:0; width:240px; background:#fff; box-shadow:3px 0 10px rgba(0,0,0,.1);}
}

/* iPads */
@media only screen and (max-width : 768px) {  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:155px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:119px;}
	#header .menu h1{float: none; display:block;text-align: center}
	#header .menu ul{*zoom:1; float:none; width:420px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:30px;}
	#header .menu ul li.print{display:block;}
	.search_input{width:400px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px;}
	/*viewer*/
	#contents{width:100%; padding:8px 10% 0 10%;}
	#contents .pdfViewer{margin:155px auto 5px;}
	#contents .pdfViewer .books{width:100%; position:absolute; top:0; left:0;}
	#bottom{position:fixed; background:transparent;}
	#bottom h1.bluEbook{background-position: 0 0; width:140px; height:42px;}
	#bottom:hover,#bottom:active,#bottom:focus{background:rgba(255,255,255,.8); transition: 1s}
	#bottom:hover h1.bluEbook,#bottom:active h1.bluEbook,#bottom:focus h1.bluEbook{background-position: 0 -42px;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList ul li a{width:86px; height:107px;}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:3px; margin-left:3px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
}

/*i6 plus*/
@media only screen and (max-width : 414px) {  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:155px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:119px;}
	#header .menu h1{float: none; display:block;text-align: center; width:170px;margin:0 auto;}
	#header .menu ul{*zoom:1; float:none; width:350px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:30px;}
	#header .menu ul li.print{display:none;}
	.search_input{width:340px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px; width:360px; margin-left:-180px;}
	/*viewer*/
	#contents{width:100%; padding:12px 5% 0 5%;}
	#contents .pdfViewer{width:100%; margin:155px auto 5px;}
	#contents .pdfViewer .books{width:100%;position:absolute; top:0; left:0;}
	#bottom{position:fixed; height:76px;}
	#bottom h1.bluEbook{
		float:none; display:block; width:106px; height:32px; 
		background-size: cover; background-position: 0 -32px; margin:0 auto; position:relative; top:0;}
	#bottom .pageQuick {float:none; margin-top:0; margin:6px auto 0;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList{padding:56px 30px 56px 40px; }
	#thumbnailListBG .thumbnailList ul li a{width:78px; height:96px;/*36%*/}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:3px; margin-left:3px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
	#thumbnailListBG .close a{
	position: absolute; top:20px; right:20px;
	background: url(../img/close.png) no-repeat;
  	background: url(../img/close.svg) no-repeat,
  	linear-gradient(transparent, transparent); 
	width:26px; height:26px; background-size:cover; text-indent: -9999em;}
}
/*노트1*/
@media only screen and (max-width : 400px) {
#thumbnailListBG .thumbnailList ul li a{width:76px; height:94px;/*35%*/}
}
/* 384 스크린 / 옵쥐,뷰 */
@media only screen and (max-width : 384px){  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:135px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:99px;}
	#header .menu h1{float: none; width:120px; margin:0 auto;}
	#header .menu h1 a img{width:100%}
	#header .menu ul{*zoom:1; float:none; width:270px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:10px;}
	#header .menu ul li.print{display:none;}
	#header .search{text-align: center; padding-right:0;}
	.search_input{width:220px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px; width:320px; margin-left:-160px;}
	/*viewer*/
	#contents{width:100%; padding:6px 4% 0 4%;}
	#contents .pdfViewer{width:100%; margin:135px auto 5px;}
	#contents .pdfViewer .books{width:100%;position:absolute; top:0; left:0;}
	#bottom{position:fixed;height:30px; background:rgba(255,255,255,.6);}
	#bottom h1.bluEbook{float:left; background-position:0 -23px; background-size:cover;  display:block; width:70px; height:21px; }
	#bottom:hover h1.bluEbook{background-position:0 -23px;}
	#bottom .pageQuick {float:right;}
	#bottom .pageQuick span.first a{background-position:4px 2px;}
	#bottom .pageQuick span.page_txt{line-height:16px;}
	#bottom .pageQuick span.prev a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{ background-position:4px 2px;}
	#bottom .pageQuick span.last a{background-position:4px 2px;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList{padding:42px 30px 56px 40px; }
	#thumbnailListBG .thumbnailList ul li a{width:73px; height:91px;/*34%*/}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:2px; margin-left:2px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
	#thumbnailListBG .close a{
	position: absolute; top:10px; right:10px;
	width:20px; height:20px; background-size:cover;}
}

/*i6*/
@media only screen and (max-width : 375px) {  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:155px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:119px;}
	#header .menu h1{float: none; display:block;text-align: center}
	#header .menu ul{*zoom:1; float:none; width:350px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:30px;}
	#header .menu ul li.print{display:none;}
	#header .search{text-align: center; padding-right:0;}
	.search_input{width:300px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px;}
	/*viewer*/
	#contents{width:100%; padding:10px 16px 0 16px;}
	#contents .pdfViewer{width:100%; margin:155px auto 5px;}
	#contents .pdfViewer .books{width:100%;position:absolute; top:0; left:0;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList{padding:46px 30px 56px 34px; }
	#thumbnailListBG .thumbnailList ul li a{width:73px; height:91px;}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:2px; margin-left:2px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
	#thumbnailListBG .close a{
	position: absolute; top:10px; right:10px;
	width:20px; height:20px; background-size:cover;}
	#bottom{position:fixed; height:50px; padding:5px;}
	#bottom h1.bluEbook{float:none; display:block; width:70px; height:21px; background-size: cover; margin:0 auto; position:relative; top:0;}
	#bottom .pageQuick {float:none; margin-top:0; margin:0 auto; height:20px;}
	#bottom .pageQuick span.first a{background-position:4px 2px;}
	#bottom .pageQuick span.page_txt{line-height:16px;}
	#bottom .pageQuick span.prev a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{ background-position:4px 2px;}
	#bottom .pageQuick span.last a{background-position:4px 2px;}
}

/*android*/
@media only screen and (max-width : 360px){  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:135px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:99px;}
	#header .menu h1{float: none; width:140px; margin:0 auto;}
	#header .menu h1 a img{width:100%}
	#header .menu ul{*zoom:1; float:none; width:310px; margin:4px auto 0;}
	#header .menu ul li{float:left;margin-left:20px;}
	#header .menu ul li.print{display:none;}
	#header .search{text-align: center; padding-right:0;}
	.search_input{width:272px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px; width:320px; margin-left:-160px;}
	/*viewer*/
	#contents{width:100%; padding:12px;}
	#contents .pdfViewer{width:100%; margin:135px auto 5px;}
	#contents .pdfViewer .books{width:100%; position:absolute; top:0; left:0;}
	#bottom{position:fixed; height:50px; padding:5px;}
	#bottom h1.bluEbook{float:none; display:block; width:70px; height:21px; background-size: cover; margin:0 auto; position:relative; top:0;}
	#bottom .pageQuick {float:none; margin-top:0; margin:0 auto; height:20px;}
	#bottom .pageQuick span.first a{background-position:4px 2px;}
	#bottom .pageQuick span.page_txt{line-height:16px;}
	#bottom .pageQuick span.prev a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{background-position:4px 2px;}
	#bottom .pageQuick span.next a{ background-position:4px 2px;}
	#bottom .pageQuick span.last a{background-position:4px 2px;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList{padding:44px 30px 56px 40px; }
	#thumbnailListBG .thumbnailList ul li a{width:65px; height:86px;}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:2px; margin-left:2px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
	#thumbnailListBG .close a{
	position: absolute; top:10px; right:10px;
	width:20px; height:20px; background-size:cover;}
}

/* 320 이하 스크린 */
@media only screen and (max-width : 320px){  
 	.sizing{width:100%; margin:0 0 0 0;}
	/*header*/
  	#header{height:135px;position:fixed; top:0; left:0; z-index: 9000}
	#header .menu{height:99px;}
	#header .menu h1{float: none; width:120px; margin:0 auto;}
	#header .menu h1 a img{width:100%}
	#header .menu ul{*zoom:1; float:none; width:270px; margin:10px auto 0;}
	#header .menu ul li{float:left;margin-left:10px;}
	#header .menu ul li.print{display:none;}
	#header .search{text-align: center; padding-right:0;}
	.search_input{width:220px;}
	/*popup 팝업컨테이너 위치조정*/
	.popupContainer{top:140px; width:280px; margin-left:-140px;}
	/*viewer*/
	#contents{width:100%; padding:8px 6% 0 6%;}
	#contents .pdfViewer{width:100%; margin:135px auto 5px;}
	#contents .pdfViewer .books{width:100%;position:absolute; top:0; left:0;}
	#bottom{position:fixed;height:30px; background:rgba(255,255,255,.6); padding: 0 6px;}
	#bottom h1.bluEbook{float:none; width:70px; height:21px;background-size: cover; background-position:0 -23px;  display:block; position:absolute; top:-23px; left:0;}
	#bottom .pageQuick {float:none; margin-top:0; margin:0 auto;}
	#bottom .pageQuick span.first a{background-position:4px 8px;}
	#bottom .pageQuick span.page_txt{line-height:26px;}
	#bottom .pageQuick span.prev a{background-position:4px 8px;}
	#bottom .pageQuick span.next a{background-position:4px 8px;}
	#bottom .pageQuick span.next a{ background-position:4px 8px;}
	#bottom .pageQuick span.last a{background-position:4px 8px;}
	/*섬네일리스트*/
	#thumbnailListBG .thumbnailList{padding:40px 30px 56px 40px; }
	#thumbnailListBG .thumbnailList ul li a{width:43px; height:54px;}
	#thumbnailListBG .thumbnailList ul li{margin-bottom:2px; margin-left:2px; }
	/*반응형때 height크기조절(섬네일필드)*/
	#thumbnailListBG .thumbnailList ul{*zoom:1; height:85vh; overflow-y: scroll;}
	#thumbnailListBG .close a{
	position: absolute; top:10px; right:10px;
	width:20px; height:20px; background-size:cover;}
}