@charset "utf-8";
/* CSS Document */
@import url('reset.css');

/*font start*/
@font-face {
    font-family: 'Noto Sans KR';
    src: url("../font/NotoSansKR-Regular.eot");
    src: url("../font/NotoSansKR-Regular.woff") format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Noto Sans KR_L';
    src: url("../font/NotoSansKR-Light.eot");
    src: url("../font/NotoSansKR-Light.woff") format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Noto Sans KR_M';
    src: url("../font/NotoSansKR-Medium.eot");
    src: url("../font/NotoSansKR-Medium.woff") format('woff');
    font-weight: normal;
}
/*font end*/

/*common start*/
html, body {position: relative; height: 100%; min-height: 100%; width:100%; min-width: 280px; font-family: "Noto Sans KR", sans-serif; overflow: hidden; font-size: 14px}
.wrap { position: relative; display: block; height: 100%; min-height: 100%;  background:#282828; overflow: hidden; }
:visited{ color: inherit}
a{ text-decoration: none; color: inherit;}
select::-ms-expand {display:none}
select{
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
}
.dropdownToolbarButton{ position: relative; padding-right: 20px !important; float: left}
.dropdownToolbarButton:after {
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	border-radius: 20px;
	background: #37383a url("../img/ic_arrow_select.png") no-repeat center;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translate(0, -50%);
}
*{ box-sizing: border-box;}
.mHidden{ display: inline-block!important}
.mShow{ display: none!important}
.hiddenArea{ position: absolute; text-indent: -9999999999999999px; width: 0; height: 0; overflow: hidden; color: transparent}
.flexAlignCenter{ display: flex; flex-wrap: wrap; align-items: center}
.flexJustifyCenter{ display: flex; flex-wrap: nowrap; justify-content: center}
.spaceBetween{ display: flex; flex-wrap: nowrap; justify-content: space-between}
.fullWrap{ width: 100%}
button{ cursor: pointer; font-size: 1rem}
.tip{ position: relative;}
.tooltip{
	width: auto;
	min-width: 60px;
	line-height: +1.5;
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translate(-50%, 0);
    word-break: keep-all;
    font-size: 0.875rem;
    background: #ff9000;
    color: #fff;
    padding: 3px 5px;
    display: none;
    z-index: 99;
    text-indent: 0;
    color: #fff;
}
.tip:hover .tooltip{ display: block;}
/*common end*/

/* 뷰어 툴바 안내텍스트 추가 start */
.toolbar_info_wrap{display: inline-block; font-size: 0;position: relative;margin-top: 11px; margin-left: 5px; display:none;}
.toolbar_info_wrap span.toolbar_info_txt{color:#fff;font-size:15px;padding:5px;background-color:#535458;border:solid 1px #333;box-sizing:border-box;width:100%;display: inline-block; padding-right: 60px;}
.toolbar_info_wrap a.toolbar_info_more{display: block; position: absolute;top: 5px;right: 10px; color:#fff;}
/* 뷰어 툴바 안내텍스트 추가 end */

/*header start*/
.header{ width: 100%; height: auto; float: left}
.viewTitle{ width: 100%; height: 30px; line-height: 30px; display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0 10px; color: #fff; background: #3e3f42; z-index: 10000}
.viewTitle .siteLogo,
.viewTitle .extraLink{ flex-shrink: 0}
.viewTitle h1{ font-family: "Noto Sans KR_M"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 10px; font-size: 1rem;}
.viewTitle .extraLink{ font-size: 0.875rem}
.viewTitle .extraLink a{ margin: 0 5px; color: #ccc}
.viewTitle .extraLink a:hover { color: #fff}

/*left 메뉴*/
.toolbar{ width: 100%; height: 60px; line-height: 60px; float: left; display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0 10px; background: #37383a; position: relative;}
.toolbar .left .btn{ height: 30px; line-height: 30px; border-radius: 15px; padding: 0 5px; margin-left: 5px; color: #fff; background-image: none;}
.toolbar .left .btn.btn-search-page{ margin-left: 0;}
.toolbar .left .btn i{
    width: 20px;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
    float: left;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center;
}
.btn-show-list i{ background-image: url("../img/ic_list.png")}
.btn-search-page i{ background-image: url("../img/ic_search.png")}
.btn-show-bookinfo i{ background-image: url("../img/ic_bookinfo.png")}
.btn-show-bookmark i{ background-image: url("../img/ic_bookmarklist.png")}
.btn-show-autoplay i{ background-image: url("../img/ic_autoplay.png")}
.ic-all-text i{ background-image: url("../img/ic_all.png")}
	/*active sideBar-tab btn*/
	.modeSlideShow .toolbar .left .btn.btn-show-autoplay,
	.toolbar .left .btn.on{ color: #f4a204; font-family: "Noto Sans KR_M"; background-color: #4B4C4E}
	.on.btn-search-page i{ background-image: url("../img/ic_search_on.png")}
	.on.btn-show-list i{ background-image: url("../img/ic_list_on.png")}
	.on.btn-show-bookinfo i{ background-image: url("../img/ic_bookinfo_on.png")}
	.on.btn-show-bookmark i{ background-image: url("../img/ic_bookmarklist_on.png")}
	.on.ic-all-text i{ background-image: url("../img/ic_all_on.png")}
	.modeSlideShow .toolbar .left .btn.btn-show-autoplay i{ background-image: url("../img/ic_autoplay_on.png")}


/*right 메뉴*/
.toolbar .utilBtns{ height: 60px; line-height: 60px; color: #fff; position: absolute; right: 0; top: 0}
.toolbar .utilBtns .btnTit{ margin: 0 5px 0 10px}
.toolbar .utilBtns .btnWrap{ height: 35px; background: #4B4C4E; border-radius: 20px; margin: 0 2px; position: relative;}
.toolbar .utilBtns .btnWrap .btn{ float: left; width: 40px; height: 35px; position: relative;}
.toolbar .utilBtns .btnWrap.singleBtn .btn{ width: 35px}
.toolbar .utilBtns .btnWrap .dropSub{ height: auto; width: 40px; position: absolute; left: 0; top: 15px; background: #4B4C4E; padding-top: 20px; z-index: 1; display: none}
.toolbar .utilBtns .btnWrap .dropSub .btn{ height: 45px; border-top: solid 1px #282828;}
.toolbar .utilBtns button {
	text-indent: -9999999999999px;
	color: transparent;
	width: 100%;
	height: 100%;
	float: left;
	font-size: 1rem;
	position: relative;
	background-color: transparent;
	border-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.7;
	z-index: 2
}
.toolbar .utilBtns .btnWrap > .btn:first-child > button{ border-radius: 18px 0 0 18px}
.toolbar .utilBtns .btnWrap > .btn:last-child > button{ border-radius: 0 18px 18px 0}
.toolbar .utilBtns .btnWrap.singleBtn > .btn > button{ border-radius: 18px}

.ic-zoomin-s{ background-image: url("../img/ic_zoomin.png");}
.ic-zoomout-s{ background-image: url("../img/ic_zoomout.png")}
.ic-rotaion-l{ background-image: url("../img/ic_90deg_left.png")}
.ic-rotaion-r{ background-image: url("../img/ic_90deg_right.png")}
.ic-fullscreen{ background-image: url("../img/ic_fullscreen.png")}
.ic-single{ background-image: url("../img/ic_view_single.png")}
.ic-double{ background-image: url("../img/ic_view_double.png")}
.ic-direct-ltr{ background-image: url("../img/ic_direct_ltr.png")}
.ic-direct-rtl{ background-image: url("../img/ic_direct_rtl.png")}
.ic-direct-twothree{ background-image: url("../img/ic_direct_coverstart.png")}
.ic-followup{ background-image: url("../img/ic_view_scroll.png")}
.ic-translated-text{ background-image: url("../img/ic_translated.png")}
.ic-original-text{ background-image: url("../img/ic_original.png")}
.ic-all-text{ background-image: url("../img/ic_all.png")}
.ic-print{ background-image: url("../img/ic_print.png")}
.ic-imgdownload{ background-image: url("../img/ic_download.png")}
.ic-addBookmark{ background-image: url("../img/ic_bookmark.png")}

.toolbar .utilBtns .btn.colorLayer{ width: 110px; height: 35px; position: relative; top: 0; left: 0; margin-left: 0; background: transparent; box-shadow: none}
.toolbar .utilBtns .btn.colorLayer .layer-header{ width: 100%; height: 35px; padding: 0 10px; position: relative; z-index: 2}
.toolbar .utilBtns .btn.colorLayer .nowBg{ width: 20px; height: 20px; border-radius: 50%; display: inline-block; background: #282828}
.toolbar .utilBtns .btn.colorLayer .layer-header-title{ width: calc(100% - 20px); height:35px; line-height: 35px; text-align: center; background: url("../img/arrow_down.png") no-repeat right 5px center; padding-right: 15px; cursor: pointer;}
.toolbar .utilBtns .btn.colorLayer .dropSub{ width: 100%; border-radius: 0 0 20px 20px; overflow: hidden;}
.toolbar .utilBtns .btn.colorLayer .colorList{ padding: 10px 0; width: 100%; float: left}
.toolbar .utilBtns .btn.colorLayer .colorList li{ width: 33.3333%; float: left; text-align: center; line-height: +1; padding: 5px}
.toolbar .utilBtns .btn.colorLayer .colorList li span{ width: 20px; height: 20px; border-radius: 50%; display: inline-block;  text-indent: 0; color: transparent; cursor: pointer; overflow: hidden;}
.toolbar .utilBtns .btn.colorLayer .colorList li span.selected{ background-image: url("../img/ic_check.png"); background-repeat: no-repeat; background-position: center; background-size: cover;}

.toolbar .dropdownToolbarButton > select{ margin: 0 5px 0 0; border-color: #c9c9c9; float: left; border-radius: 18px; padding:  0 10px; height: 35px; line-height: 35px; min-width: none !important;}

	/*active utilBtns btn*/
	@media screen and (min-width:1150px) {
		/*only pc*/
		.toolbar .utilBtns .btnWrap .btn.dropWrap:hover .dropSub{ display: block;}
		.toolbar .utilBtns .btn.colorLayer.dropWrap:hover .layer-header-title{ background: url("../img/arrow_up.png") no-repeat right 5px center}
		.toolbar .utilBtns .btn button:hover{ opacity: 1 ; background-color: #5c6de5;}
	}
	.toolbar .utilBtns .btnWrap > .btn:first-child.dropWrap:hover > button{ border-radius: 18px 0 0 0}
	.toolbar .utilBtns .btnWrap > .btn:last-child.dropWrap:hover > button{ border-radius: 0 18px 0 0}


	.toolbar .utilBtns .on button,
	.viewmodeSingle .toolbar .utilBtns .ic-single,
	.viewmodeDouble .toolbar .utilBtns .ic-double,
	.viewModeFollowup .toolbar .utilBtns .ic-followup,
	.textLayerOpen .toolbar .utilBtns .ic-all-text,
	.zoom .toolbar .utilBtns .ic-zoom-in{ opacity: 1 ; background-color: #5c6de5;}

.utilUiSelect { position: absolute; left: 15px; top:10px;}
.utilUiSelect select { height: 30px; background-color: transparent; border: #555c71 1px solid; color:#ccc;}
.utilUiSelect button { height:30px; line-height: 20px; background: #4b60cd; border: 0; /*! width: 50px; */ color:#fff; padding: 0;}
.utilUiSelect button:hover {background-color: #546de9;}
/*header end*/

/* side bar */
.sideOpen > .sideBar {width:360px; max-width: 100%; left: 0;}

.sideBar {position: fixed; top:90px; left: -360px; overflow: hidden; background: #43444a; z-index: 9700; transition: left 0.3s;width: 360px; height: calc(100% - 90px)}
.sideBar .sidebar-Header { height: 40px; width: 360px; overflow: hidden;z-index: 100;}
.sideBar .sidebar-Header .btn-sidebar-close { position: absolute; right: 0; top:0; background: url(../img/ic_close.png) no-repeat center; height: 40px;width: 40px; text-indent: -9999999999999999px; color: transparent; border-color: transparent}

.sideBar .sidebar-content { position: relative; height: 100%; box-sizing: border-box; overflow: auto; overflow-x: hidden;}
.sideBar .sidebar-content > div {display: none; }
.sideBar .sidebar-content > div:nth-child(1) { display: block;}
.sideBar .sideBar-tab{ margin-left: 5px;}
.sideBar .sideBar-tab li {float:left; display: block; border-right:#555 1px solid; }
.sideBar .sideBar-tab li a { display: block; height: 40px; line-height: 40px; color: #fff; text-decoration: none;background: #6d6e76; font-size:0.875rem; font-weight: 600; width: 106px;text-align: center;}
.sideBar .sideBar-tab li.on a { background: #83848c;}

.sideBar .sidebar-content .selected > ul { height:auto; }

.sideBar .sidebar-content ul li a:hover { color:#fff;}

.toc-list .volGrp ul li .pnum { float:left; width:30px;}
.toc-list .volGrp ul li .title { margin-left:40px; display:block;}
.toc-list .volGrp { margin: 10px;border:#3a3a3a 1px solid; border-radius:5px; overflow:hidden;}
.toc-list .selected {border:#5e5d72 1px solid;}
.toc-list .volGrp ul {display:none; overflow:hidden;}
.toc-list .volGrp ul li a {display: block; position:relative; padding:8px; color: #C7C7C7; text-decoration: none; font-size: 12px; line-height: 1;}
.toc-list .selected ul {display:block}
.toc-list .volTitle { color: #fff;font-size: 14px; background: url('/resource/imgViewer/image/ico_index_title.png') no-repeat 10px center; padding: 0 10px 0 30px; font-weight: 600; height: 40px; line-height: 40px;position: relative;}
.toc-list .volGrp .volTitle:after {content: url('/resource/imgViewer/image/ico_folder_off.png');position: absolute;top: -4px;right: 20px;}
.toc-list .selected .volTitle:after {content: url('/resource/imgViewer/image/ico_folder_on.png');position: absolute;top: -4px;right: 20px;}

.sideBar .sidebar-content .selected .volTitle {background-color:#494a51;}

/*textLayer*/
.newspaper .textLayer-btn-wrap{ display: inline-block; float: left}
.textLayer-btn-wrap{ display: none}
.textLayerOpen .textLayerWrap{width:360px; left: 0; max-width: 100%}

.textLayerWrap{position: fixed; top:90px; left: -360px; overflow: hidden; background: #43444a; z-index: 9800; transition: left 0.3s;width: 360px;}
.textLayerWrap .textLayer-Header {  background: #61626a; height: 40px; width: 360px; overflow: hidden;z-index: 100;}
.textLayerWrap .textLayer-Header .btn-textLayer-close{ position: absolute; right: 0; top:0; background: url(../img/ic_close.png) no-repeat center; height: 40px;width: 40px; text-indent: -9999999999999999px; color: transparent; border-color: transparent}

.textLayerWrap .textLayer-content{ position: relative; height: 100%;  box-sizing: border-box; overflow: auto; overflow-x: hidden;}
.textLayerWrap .textLayer-content > div{display: none; }
.textLayerWrap .textLayer-content > div.on{ display: block;}
.textLayerWrap .textLayer-tab li{float:left; display: block; border-right:#555 1px solid; }
.textLayerWrap .textLayer-tab li a{ display: block;  height: 40px; line-height: 40px; color: #fff; text-decoration: none;background: #6d6e76; font-size:0.875rem; font-weight: 600; width: 106px;text-align: center;}
.en .textLayerWrap .textLayer-tab li a{ line-height: +1.1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 0.750rem;}
.textLayerWrap .textLayer-tab li.on a{ background: #83848c;}

.textLayerWrap .textLayer-content .selected > ul{ height:auto; }

.textLayerWrap .textLayer-content .selected ul li a:hover{ color:#fff;}

.align-right{ width: auto; display: inline-block; float: right}
.textLayerWrap{ height: calc(100% - 90px)}
.textLayerWrap .textLayer-content{ height: calc(100% - 40px); overflow: hidden; padding: 10px;}
.textLayerWrap .textLayer-content .btn-txtdownload-all{ width: auto; height: 30px; margin-bottom: 5px; background: #4b4c4e; border: 1px solid #37383a; border-radius: 3px; float: right; font-size: 0.875rem; color: #fff; padding: 0 10px}
.textLayerWrap .textLayer-content > div{ height: calc(100% - 35px); border: solid 1px #5E5D72; border-radius: 5px; overflow: hidden; float: left; width: 100%}
.textLayer-content .halfWrap{ height: 50%;}
.textLayer-content-Header{ width: 100%; float: left; height: 40px; line-height: 40px; padding: 0 10px; box-sizing: border-box; font-size: 0.875rem; background: #353438; color: #fff; font-weight: 600}
.textLayer-content-Header .btn-wrap span{ text-indent: -2000px; color: transparent; display: inline-block; width: 20px; height: 100%; opacity: 0.4; cursor: pointer;}
.text-tab.vertical .btn-wrap .btn-vertical,
.text-tab.horizontal .btn-wrap .btn-horizontal{ opacity: 1}
.textLayer-content-Text{ width: 100%; float: left; height: calc(100% - 40px); color: #fff; font-size: 0.875rem; overflow-y: auto; overflow-x: hidden; padding: 10px; box-sizing: border-box; line-height: +1.3}
.text-tab.vertical .textLayer-content-Text{ writing-mode: vertical-lr; text-orientation: upright; overflow-x: auto; overflow-y: hidden}
.ic-txtdownload{ background: url("../img/ic_txtdownload.png") no-repeat center; opacity: 1 !important}
.ic_txt_plus{ background: url("../img/ic_txt_plus.png") no-repeat center; opacity: 1 !important}
.ic_txt_minus{ background: url("../img/ic_txt_minus.png") no-repeat center; opacity: 1 !important; margin-right: 5px}
.ic_vertical{ background: url("../img/ic_vertical.png") no-repeat center;}
.ic_horizontal{ background: url("../img/ic_horizontal.png") no-repeat center;}

.newspaperList .volGrp { margin: 10px; border:0; overflow:hidden;}
.newspaperList .volGrp ul {display:block; overflow:hidden;}
.newspaperList .volGrp ul li {border-bottom: #555 1px solid; line-height: 120%; }
.newspaperList .volGrp ul li .pnum { float:left; width:30px;}
.newspaperList .volGrp ul li .title { margin-left:0px; display:block;}
.newspaperList .volGrp ul li a {display: block; position:relative; padding:8px; color: #C7C7C7; text-decoration: none; font-size: 12px; }
.newspaperList .selected ul {display:block}
.newspaperList .volTitle { color: #fff;font-size: 14px; background: url('../img/ico_index_title.png') no-repeat 10px center; padding: 0 10px 0 30px; font-weight: 600; height: 40px; line-height: 40px;}
.sideBar .sidebar-content .selected .volTitle {background-color:#494a51;}

.bookmark-list { padding:0 5px 0 20px;}
.bookmark-list li { position: relative; display:block; padding:20px 0; border-bottom: #3b3c41 1px solid; }
.bookmark-list a {text-decoration: none;}
.bookmark-list a:hover { text-decoration: none;}
.bookmark-list .thumb { float:left; height: 60px; width: 60px; border-radius: 40px; background-color: #6280ee; text-align: center; overflow: hidden;/*! display: none; */}
.bookmark-list .thumb img { height:auto; width: 100%; max-width: 100%; }
.bookmark-list .context { /*! margin-left: 70px; */ font-size: 12px; padding-right: 40px;}
.bookmark-list .context span {font-size:12px; color: #ccc; line-height: 120%;}
.bookmark-list .context .vol { display:inline-block; font-weight:bold; background-color:#6b62ee; border-radius:3px; color:#ccc; padding:2px 5px; margin-right: 2px; }
.bookmark-list .context .pg {font-weight:bold; color:#ccc; padding-bottom: 5px }
.bookmark-list .context .tit { color:#ccc; padding-bottom: 5px; margin-top:5px; word-break: break-all;display: block;}
.bookmark-list .context .text {color:#939393;}
.bookmark-list button.btn-boomark-del{height:20px; width:20px; position: absolute; right: 5px; top:15px; border-radius:10px;  background:url(../img/ic_close_s.png) no-repeat center; z-index:100; text-indent: -999999999999px; color: transparent; border: 1px solid #fff;}

.bookInfo { padding-top:30px;}
.bookInfo li {display:block; padding: 0 20px;}
.bookInfo li .context { font-size:12px;padding:10px; border-bottom: #555 1px solid;}
.bookInfo li .context:after { content: ""; display: block; clear: both;  }
.bookInfo li .context span { line-height: 140%;}
.bookInfo li .label { float:left;  color: #ccc;}
.bookInfo li .text { display: block; margin-left:100px; color:#fff;}

/* 검색 */
.searchLayer_on .searchLayer {left: 0px;}
.searchLayer {position: fixed;top:90px;bottom:0;left: -360px;overflow: hidden;background: #43444a;z-index: 999999;transition: left 0.3s;width: 360px;display: block;/*! z-index: 100000; */}
.searchLayer .searchLayer-Header {height: 40px; line-height: 40px; background-color: #61626a; }
.searchLayer .searchLayer-Header .title {font-weight: bold; color:#fff; font-size:14px; padding-left: 20px;}
.searchLayer .searchLayer-Header .btn-searchLayer-close { position: absolute; right: 0; top:0; background: url(../img/ic_close.png) no-repeat center; height: 40px;width: 40px; text-indent: -9999999999999999px; color: transparent; border-color: transparent}

.searchLayer .searchLayer-content {/*! height: calc(100% - 90px); */ width:100%; box-sizing: border-box; overflow: auto; overflow-x: hidden; position: absolute;top: 120px;bottom: 0px;/*! background-color: aliceblue; */}
.searchLayer .searchItem { padding: 20px 15px;border-bottom: #333 1px solid;}
.searchLayer .searchItem a { display: block; color: #ccc; text-decoration: none;}
.searchLayer .searchItem a:hover { color:#fff;}
.searchLayer .searchItem .page {display:inline-block; font-weight:bold; background-color:#6b62ee; border-radius:3px; color:#ccc; padding:2px 5px; margin-right: 2px;  float: left; }
.searchLayer .searchItem .texts {display: block; margin-left: 80px;margin-right: 10px;white-space: normal;word-break: break-all;}

/*page control buttons*/
.bottomControlBtns {
	width: auto;
	height: 65px;
	line-height: 65px;
	color: #fff;
	background: #2E313C;
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
	border-radius: 20px 20px 0 0;
	padding: 0 25px;
	justify-content: space-between;
	transition: 0.5s;
}
.bottomControlBtns.flexAlignCenter,
.bottomControlBtns .flexAlignCenter{ flex-wrap: nowrap;}
.closePageControl {
	width: 60px;
	height: 18px;
	border-radius: 10px 10px 0 0;
	background: #2E313C;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../img/arrow_down.png");
	position: absolute;
	left: 50%;
	top: -18px;
	transform: translate(-50%, 0);
	cursor: pointer;
}
	/*hide bottomControlBtns*/
	.bottomControlBtns.hide{ bottom: -65px}
	.bottomControlBtns.hide .closePageControl{ background-image: url("../img/arrow_up.png");}

.pageControl{ padding: 0 10px}
.pageControl button {
	width: 70px;
	height: 65px;
	padding-top: 42px;
	line-height: +2;
	border: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: top 10px center;
	font-size: 11px;
	color: #fff;
}

.pageControl button.ic-firstPage{ background-image: url("../img/ic_go_first.png")}
.pageControl button.ic-prev-s{ background-image: url("../img/ic_go_prev.png")}
.pageControl button.ic-next-s{ background-image: url("../img/ic_go_next.png")}
.pageControl button.ic-lastPage{ background-image: url("../img/ic_go_last.png")}
.pageControl button.ic-thumb{ background-image: url("../img/ic_view_thumb.png")}
.pageControl button.ic-innerfull{ background-image: url("../img/ic_view_innerfull.png")}

.pageControl .pageWrap { flex-shrink: 0}

.btn-l-prev, .btn-l-next {
	position: fixed;
	height: 80px;
	width: 40px;
	overflow: hidden;
	text-indent: -200px;
	background-color: #000;
	opacity: 0.7;
	background-image: url(../img/spt_viewer.png);
	background-repeat: no-repeat;
	top: 50%;
	margin-top: -40px
}
.btn-l-prev:hover, .btn-l-next:hover { opacity:1;}
.btn-l-prev {top:50%;left: 0; background-position: 0 -240px; /*! z-index:100000; */ }
.btn-l-next {top:50%; right: 0; background-position: -40px -240px; /*! z-index:100000; */}
/* zoom control buttons*/
/* .zoomControl {display: ;} */
.zoomControl { position: fixed; right: 17px; top:120px; width:40px; height:300px; background-color:rgba(0,0,0,0.8); z-index:8000;}
.zoomControl .btn-zoom-in, .zoomControl .btn-zoom-out {height: 40px; width: 40px; overflow: hidden; text-indent: -100px; background-color: transparent; border: 0; background-image:url(../img/spt_viewer.png);
	background-repeat: no-repeat; opacity: 0.5; transition: opacity 0.3s;}
.zoomControl button:hover { opacity: 1;}
.zoomControl .btn-zoom-in { background-position:  0 -160px;}
.zoomControl .btn-zoom-out { background-position:  -40px -160px;}
.zoomControl .zoomSlider { position: relative; height: 200px; margin: 10px auto; background-color: #566eff; width: 3px; }
.zoomControl .zoomSlider .handPoint { width: 10px; height: 10px; border-radius: 10px; background-color: #ccc; position: absolute; left: 50%; margin-left: -5px; }
.zoomControl .zoomSlider .handPoint:hover { background-color:#fff;}
.zoomControl .ui-widget.ui-widget-content {border:0 !important;}

body  { background-color: #000;}

/* 컨텐츠*/

/* thumb view */

.modeThumbView .thumbView { bottom:0;}
.thumbView { position: fixed; width: 100%; bottom: -300px; left:0; padding-top:10px; background-color: rgba(0,0,0,0.8); z-index: 100000; transition: bottom 0.3s;}
.thumbView .btn-thumb-close { position:absolute; display:block; right:0; top:-40px; text-indent:-200px; height:40px; width:40px; border:0; overflow:hidden;
background-color: rgba(0,0,0,0.8); background-image: url(../img/spt_viewer.png); background-position: -200px -80px; }
.thumbView .thumbListWrap { /*! padding:0 50px; */ /*! width: 100%; */  box-sizing: border-box;}
.thumbView .item .thumb_img { height: 100px; text-align: center; position: relative;}
.thumbView .item .thumb_img img { height: 100%; width:auto; opacity:0.6}
.thumbView .item .pageDisplay { margin-top: 3px;  width: 100%; text-align: center}
.thumbView .item .pageDisplay .pageNum {background:#297dfa; color:#fff; font-weight:bold; display: inline-block; border-radius:15px; padding:3px 10px; font-size: 11px;}

.thumbView .btn-thumb-prev,.thumbView .btn-thumb-next {
	width: 32px;
    display: none;
    top: 50%;
    height: 32px;
    background-image: url('/resource/imgViewer/image/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
	overflow: hidden;
	text-indent:-200px;
	background-color: transparent;
	border:0;
}

.thumbView .btn-thumb-prev {
    background-position: 0 0;
    left: 10px;
    display: none;
}
.thumbView .btn-thumb-next {
    background-position: -32px 0;
    right: 10px;
}

#thumbList .active img { border:#554cdb 2px solid; box-sizing: border-box;  position: relative; opacity:1 }
/* 모달창 */
.layer {display: none;position: fixed;height:  100%;width: 100%;z-index: 99999;}
.layerWrap { position: fixed; top:10%; left: 50%; width: 500px; max-width: 95%; z-index: 98000;  background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5); transform: translate(-50%,0)}
.layerWrap .layer-header {height: 40px; line-height: 40px; background-color: #6b62ee; }

.layerWrap .layer-header-title {font-weight: bold; color:#fff; font-size:14px; padding-left: 20px;overflow: hidden;text-overflow: ellipsis;display: block;/*! width: 100%; */white-space: nowrap;margin-right: 60px;}
.layerWrap .layer-btnClose { position: absolute; top:0; right:0; height: 40px; width: 40px; overflow: hidden; text-indent: -100px; background-color: transparent; border: 0 !important; background-image:url(../img/spt_viewer.png);
	background-repeat: no-repeat;padding: 0; margin: 0; display: block; background-position: -200px -80px; cursor: pointer;}
.layerWrap .layer-body { padding: 20px 20px}
.layerWrap .pageSelect {padding: 10px 0; font-size: 12px; overflow: hidden;}
.layerWrap .pageSelect span { display: block; float:left; height:40px;line-height: 40px; width: 50%; text-align: center; background-color: #eaeaea}
.layerWrap .pageSelect span > input[type=radio] { position:relative; top:2px;}
.layerWrap .pageSelect .select {background-color:#6280ee; color: #fff;}
.layerWrap .layer-body .text {border:#ccc 1px solid; padding: 10px; height: 100px;}
.layerWrap .layer-body textarea {margin:0; padding:0; width: 100%; height: 100%; border:0; resize: none; font-size: 12px;}

.layerWrap .layer-btns { border-top:#ccc 1px solid;}
.layerWrap .layer-btns span:first-child { border-right:#ccc 1px solid;}
.layerWrap .layer-btns span {float:left;margin:0; padding: 0;  width:50%; box-sizing: border-box;}
.layerWrap .layer-btns span button { height:40px; line-height: 40px; width: 100%; border:0; font-size: 12px; background: #fff; cursor: pointer;}
.layerWrap .layerbg { position: fixed; top:0; left: 0; height: 100%; width: 100%;z-index: 1000; background:rgba(0,0,0,0.8);}
.modalBg { position: fixed; height: 100%; width: 100%; left:0; top:0; z-index: 9000; background: rgba(0,0,0,0.7)}
.modalBack {position: fixed; height: 100%; width: 100%; left:0; top:0; z-index: 9000; background: rgba(0,0,0,0.7)}


/* 북마크표시 */

.odd .pin { position: absolute; top:10px; right:50%; margin-right: -25px;}
.even .pin { position: absolute; top:10px; left:50%; margin-left: -25px;}
.pin button {height: 50px; width: 50px; overflow: hidden; text-indent: -200px; border: 0 !important; background-image:url(/resource/imgViewer/image/spt50_viewer.png);
	background-repeat: no-repeat; padding: 0; margin: 0; display: block; position: relative; float:left; border-radius:30px; }
.pin .pinBookmark { background-color:#ff6c00; background-position: -50px -100px;}
.pin .pinMemo {background-color:#ffa800; background-position: 0px -100px;}

.btnDnOdd, .btnDnEven{ position: absolute; left: 0; top:0; height:100%; width: 100%; z-index: 99999999;  }
  .btnDnOdd > a, .btnDnEven > a { display: block; height:100%; width: 100%; background-color: rgba(0,0,0,0.7);

background-image:url('/resource/imgViewer/image/ico_imgdownload.png'); background-repeat:no-repeat; background-position: center center;

}
/*
  .btnDnOdd > a:hover, .btnDnEven > a:hover {background-color: rgba(107,98,233,0.7); }*/
 .btnDnOdd > a:hover, .btnDnEven > a:hover {background-color: rgba(0,0,0,0.7);
box-sizing: border-box; border: #546de9 10px solid;
}


/*pdf*/

#thumbnailView {
  /*! position: absolute; */ width: 100%; bottom: 0px; left:0; padding:10px; background-color: rgba(0,0,0,0.8); z-index: 100000; transition: bottom 0.3s;
  overflow-y: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.thumbnail {
  float: left;
  margin-bottom: 5px;
}

#thumbnailView > a { display: inline-block;}

#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
  margin-bottom: 9px;
}

.thumbnail:not([data-loaded]) {

  border: 1px dashed rgba(255, 255, 255, 0.5);
  margin: -1px -1px 4px -1px;
}

.thumbnailImage {
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  z-index: 99;
  background-color: white;
  background-clip: content-box;
}

.thumbnailSelectionRing {
  border-radius: 2px;
  padding: 7px;
}
.pageDisplay { margin-top: 3px;  width: 100%; text-align: center}
.pageDisplay .pageNum {background:#297dfa; color:#fff; font-weight:bold; display: inline-block; border-radius:15px; padding:3px 10px; font-size: 11px;}


a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  opacity: .9;
}

a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {

}

.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
 border:#554cdb 2px solid;
  opacity: 1;
}

.thumbnail.selected > .thumbnailSelectionRing {

}



/* pdf */
/* 검색바 */

.findbar { position: relative; height: auto; padding: 10px 5px;}
.findbar .flexAlignCenter{ flex-wrap: nowrap; width: 100%; align-items: stretch;}
.findNavBtns {display: inline-block;border: #000 1px solid; height:30px;
  border-radius: 2px;
  background-color: hsla(0,0%,100%,.09);
  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  border: 1px solid hsla(0,0%,0%,.35);
  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
              0 1px 0 hsla(0,0%,100%,.05);
position: relative;
flex-shrink: 0
}
.searchIpt{ width: calc(100% - 40px)}
.findNavBtns > button {height: 30px; width: 20px; overflow: hidden; float: left; text-indent: -100px; background-color: transparent; border: 0; background-image:url(../img/spt_viewer.png);box-sizing: border-box;
opacity: 0.7; text-indent:-300px;}
.findNavBtns > button:hover {opacity: 1;}
.findNext { background-position: -170px -164px; }
.findPrevious { background-position: -129px -164px; border-right: #222 1px solid !important;/*! width: 31px !important; */}
#findResultsCount {
	margin: 0;
	box-sizing: border-box;
	padding: 0 10px;
	border-radius: 15px;
	flex-shrink: 0;
	text-align: center;
	border: solid 1px #212023;
	display: flex;
	align-items: center;
}

.toolbarField {
  padding: 7px 26px 6px 6px;
  /*! margin: 7px 0 4px 0; */
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: hsla(0,0%,100%,.09);
  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  border: 1px solid hsla(0,0%,0%,.35);
  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
              0 1px 0 hsla(0,0%,100%,.05);
  color: #fff;
  font-size: 12px;
  /*! line-height: 14px; */
  outline-style: none;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
  background-image: url(../img/btn_ico_search.png);
  background-position:right;
  background-repeat:no-repeat;
  /*! background-color: transparent; */
  width: 100%;
  letter-spacing: 0px;
}

.toolbarField[type=checkbox] {
  display: inline-block;
  margin: 14px 0px;
  background-color: transparent;
}

.toolbarField.pageNumber {
  -moz-appearance: textfield; /* hides the spinner in moz */
  min-width: 16px;
  text-align: right;
  width: 35px;
  height: 20px;
  line-height: 20px;
  font-weight: normal;
  font-size: 14px;
  background: #fff;
  padding: 0;
  text-align: center;
  color: #000;
  border: 1px solid #eee;
  border-radius: 0;
}

.toolbarField.pageNumber.visiblePageIsLoading {
  background-image: url(../img/loading-small.png);
  background-repeat: no-repeat;
  background-position: 1px;
}

.toolbarField.pageNumber::-webkit-inner-spin-button,
.toolbarField.pageNumber::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.toolbarField:hover {
  /*! background-color: hsla(0,0%,100%,.11); */
  /*! border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45); */
}

.toolbarField:focus {
/*   background-color: hsla(0,0%,100%,.15); */
/*   border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9); */
}
.toolbarLabel#findMsg{ margin: 0; display: flex; align-items: center; width: 100%}
.toolbarLabel {
	margin: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: default;
  color: #ccc;
  flex-shrink: 0
}

#sidebarContainer{ display: block;padding-top: 50px;}
#sidebarContainer button { overflow: visible !important; display: inline; text-indent: 0 !important; }
#sidebarContainer button span { display: inline-block !important; width: auto; height: auto; overflow: visible; color: #fff; }

/* 인쇄창 */

#printLayer {display: none; font-size: 12px; }
#printLayer .pageSetting, #printLayer .printOption, #printLayer .printPrice { margin-bottom: 20px; border:#eaeaea 1px solid; border-radius: 3px; padding: 10px 20px;}
#printLayer .pageSetting ul li {  padding:6px 0;color:#333; list-style: none; }
#printLayer .pageSetting ul li .sub {padding: 10px;}
#printLayer .pageSetting ul li .sub input { width: 80px; margin-right:5px;}
#printLayer .title { font-size: 12px; font-weight:bold; height: 30px; line-height: 30px; margin-bottom: 5px; color: #6b62ee;}
#printLayer .notceMsg { padding:10px 0;}

#printLayer .printOption ul:after { content: ""; display:block; clear: both;}
#printLayer .printOption ul li { float: left; width: 50%; box-sizing: border-box; color:#333;list-style: none;}
#printLayer input[type=checkbox], #printLayer input[type=radio] { position: relative; top:1px;}

#printLayer .priceView { height: 30px; line-height: 30px;}
#printLayer .priceText { float: right;}
#printLayer .priceText strong { font-size: 14px; font-weight: bold;}
#printLayer .infoMsg { font-weight: bold; line-height: 150%;}
#printLayer .layerWrap {}

/* 인쇄 진행창 */

.printingStatus .printingIco { margin:30px 0;}
.printingStatus {text-align:center; font-size:14px; color:#777;}
.printingStatus #prt_strPage, .printingStatus #prt_endPage { font-weight:bold; color:#333; font-size:16px;}
.printingStatus .cntText { margin-bottom:40px;}
.printingStatus .imsg { margin-bottom:30px; font-size:16px; font-weight: bold; color:#333;}

.layerConfirm {display: none; height:100%; width:100%; z-index:100000;position: fixed;}

/* help Layer */

#helpLayer { display: none; position: fixed; left:0; top:0; height: 100%; width: 100%; z-index: 98000; background-color: rgba(0,0,0,0.5); }
#helpLayer .layerWrap { position: fixed; top:100px; left: 100px; bottom:100px; right:100px; background-color:#272b35; border-radius: 8px;overflow:hidden;z-index: 10000; margin:0;width: auto;}
#helpLayer .layer-header {height: 40px; line-height: 40px; border-bottom:#000 1px solid; position: relative;}
#helpLayer .layer-header-title {font-weight: bold; color:#fff; font-size:14px; padding-left: 20px;}
#helpLayer .layer-header .layer-btnClose { position: absolute; top:0; right:0; height: 40px; width: 40px; overflow: hidden; text-indent: -100px; background-color: transparent; border: 0 !important; background-image:url(../img/spt_viewer.png);
	background-repeat: no-repeat;padding: 0; margin: 0; display: block; background-position: -200px -80px; cursor: pointer; opacity:0.6 }
#helpLayer .layer-header .layer-btnClose:hover {opacity: 1}
#helpLayer .layer-body {padding:50px 20px; color: #8fa1b2 ; font-size: 12px;}
/* 로딩 */

#innerLoading { position: fixed; z-index: 99999; height: 100%; width: 100%; top:0; right:0; bottom:0; left: 0; background-color: rgba(0,0,0,0.8)}

#innerLoading .loader,
#innerLoading .loader:before,
#innerLoading .loader:after {
  background: #3e6be3;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
#innerLoading .loader {
  color: #3e6be3;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  top: 35%;
}
#innerLoading .loader:before,
#innerLoading .loader:after {
  position: absolute;
  top: 0;
  content: '';
}
#innerLoading .loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#innerLoading .loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/* 목차버튼 수정 */

.tabChoice {width: 50px; position: absolute; right:0; z-index: 9999999}
.tabChoice > button {line-height: 14px; display: block; background-color: #000; color: #fff; font-size: 12px; text-decoration: none; text-align: center; border-top:#000 1px solid;
  opacity:0.6; width: 100%; background-image:none; text-indent: 0; }
.tabChoice > button:hover { opacity: 1; background-color: #4b60cd !important}
.tabChoice > button:first-child {border:0;}

/*서치로딩 */


.searchLayer-Header { position: relative;}

.searchingLoad {
  position: absolute;
  top: 3px;
  left: 87px;
}
.searchingLoad .loading-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  animation: searchloadingAni 1s ease-in-out infinite;
}
.searchingLoad :nth-child(1) {
  background-color: #3498db;
  animation-delay: 0;
}
.searchingLoad .loading-bar:nth-child(2) {
  background-color: #3498db;
  animation-delay: 0.09s;
}
.searchingLoad .loading-bar:nth-child(3) {
  background-color: #3498db;
  animation-delay: .18s;
}
.searchingLoad .loading-bar:nth-child(4) {
  background-color: #3498db;
  animation-delay: .27s;
}

@keyframes searchloadingAni {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}

.searchBox {background-color: #353438;height: auto;}
.utilUiSelect { position: absolute; left: 15px; top:10px;}
.utilUiSelect .selectGroup {position: absolute; top:40px; left:-15px; width: 396px; background-color: #222; padding:15px;}
.utilUiSelect .selectGroup select { height: 30px; background-color: transparent; border: #555c71 1px solid; color:#ccc;}
.utilUiSelect .selectGroup button { height:30px; line-height: 30px; background: #4b60cd; border: 0; width: 50px; color:#fff; padding: 0;}
.utilUiSelect .selectGroup button:hover {background-color: #546de9;}

.utilUiSelect.on .selectGroup { display: block !important; }


.txt {font-size:10px;color:#ccc;letter-spacing: -1px;}

.layerPopBookMark {display: none; position: fixed; top:0; left: 0; width: 100%; z-index: 90000; /*! margin-left: -250px; */ /*! background-color: #fff; */ /*! box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5) */}
.layerPopBookMark .layer-header {height: 40px; line-height: 40px; background-color: #6b62ee; }
.layerPopBookMark .layer-header-title {font-weight: bold; color:#fff; font-size:14px; padding-left: 20px;}
.layerPopBookMark .layer-btnClose { position: absolute; top:0; right:0; height: 40px; width: 40px; overflow: hidden; text-indent: -100px; background-color: transparent; border: 0 !important; background-image:url(../img/spt_viewer.png); background-repeat: no-repeat;padding: 0; margin: 0; display: block; background-position: -200px -80px; cursor: pointer;}
.layerPopBookMark .layer-body { padding: 20px 20px}
.layerPopBookMark .pageSelect {padding: 10px 0; font-size: 12px; overflow: hidden;}
.layerPopBookMark .pageSelect span { display: block; float:left; height:40px;line-height: 40px; width: 50%; text-align: center; background-color: #eaeaea}
.layerPopBookMark .pageSelect span > input[type=radio] { position:relative; top:2px;}
.layerPopBookMark .pageSelect .select {background-color:#6280ee; color: #fff;}
.layerPopBookMark .layer-body .text {border:#ccc 1px solid; padding: 10px; height: 100px;}
.layerPopBookMark .layer-body textarea {margin:0; padding:0; width: 100%; height: 100%; border:0; resize: none; font-size: 12px;}

.layerPopBookMark .layer-btns { border-top:#ccc 1px solid;}
.layerPopBookMark .layer-btns span:first-child { border-right:#ccc 1px solid;}
.layerPopBookMark .layer-btns span {float:left;margin:0; padding: 0;  width:50%; box-sizing: border-box;}
.layerPopBookMark .layer-btns span button { height:40px; line-height: 40px; width: 100%; border:0; font-size: 12px; background: #fff; cursor: pointer;}
.layerPopBookMark .layerbg { position: fixed; top:0; left: 0; height: 100%; width: 100%;z-index: 1000; background:rgba(0,0,0,0.8);}

.wrap {background: #282828}

.mHidden{ display: inline-block!important}
.mShow{ display: none!important}

/*mobile*/
.toolbar .utilBtns button.ic-menu-m {
	width: 40px;
	height: 60px;
	position: fixed;
	right: 0;
	top: 30px;
	background-image: url("../img/ic_menu.png");
	opacity: 1;
}

/*mMenuWrap active*/
.toolbar .utilBtns.on button.ic-menu-m{ background-image: url("../img/ic_close.png");}

@media screen and (max-width:1150px) {
	.mHidden{ display: none!important}
	.mShow{ display: inline-block!important}

	/*mobile menu*/
	.toolbar{ padding: 0 5px}
	.toolbar .left .btn{ padding: 0; font-size: 0.875rem; height: auto; border-radius: 50%; overflow: hidden;}
	.toolbar .left .btn i{ margin: 0; width: 35px; height: 35px; background-size: 15px auto; background-color: #4B4C4E}

	.toolbar .utilBtns {
		width: 360px;
		max-width: 70%;
		height: calc(100% - 30px);
		position: fixed;
		right: -360px;
		top: 30px;
		background: #37383a;
		z-index: 9999;
		padding-top: 60px;
		transition: 0.5s
	}
	.toolbar .utilBtns.on{ right: 0}
	.toolbar .mRightMenu{ width: 100%; height: 100%; overflow-y: auto; align-content: flex-start;}
	.toolbar .utilBtns .btnTit,
	.toolbar .utilBtns .btnWrap{ width: 100%; height: auto; background: transparent;}
	.toolbar .utilBtns .btnTit{ font-size: 1.125rem}
	.toolbar .utilBtns .btnWrap{ padding: 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 10px 0}
	.toolbar .utilBtns .btnWrap .btn{ width: 49%; height: 40px; line-height: 40px; background: #4B4C4E}
	.toolbar .utilBtns .btnWrap .dropSub .btn,
	.toolbar .utilBtns .btnWrap .colorLayer,
	.toolbar .utilBtns .btnWrap.singleBtn .btn,
	.toolbar .utilBtns .btn.colorLayer .layer-header{ width: 100%; text-align: center; height: 40px; line-height: 40px}
	.toolbar .utilBtns .btnWrap .btn,
	.toolbar .utilBtns .btnWrap .btn button,
	.toolbar .utilBtns .btnWrap .dropSub .btn button,
	.toolbar .utilBtns .btnWrap > .btn:first-child > button,
	.toolbar .utilBtns .btnWrap > .btn:last-child > button,
	.toolbar .utilBtns .btnWrap.singleBtn > .btn > button
	.toolbar .utilBtns .btnWrap > .btn:first-child.dropWrap:hover > button,
	.toolbar .utilBtns .btnWrap > .btn:last-child.dropWrap:hover > button{ border-radius: 20px}
	.toolbar .utilBtns .btnWrap .btn button{ text-indent: 0; opacity: 1; color: #fff; background-image: none!important; margin: 0; border: none}
	.toolbar .utilBtns .tooltip{ position: relative; left: 0; top: 0; transform: translate(0, 0); display: block; background: transparent; width: 100%; height: 100%; line-height: 40px; padding: 0; font-size: 1rem}


	.toolbar .utilBtns .btnWrap .dropWrap > button{ z-index: 23}
	.toolbar .utilBtns .btnWrap .dropSub{ width: 100%; padding: 30px 5px 10px; border-radius: 10px; z-index: 22}
	.toolbar .utilBtns .btnWrap .dropWrap.open .dropSub{ display: block;}
	.toolbar .utilBtns .btn.colorLayer .layer-header{ z-index: 21}
	.toolbar .utilBtns .btn.colorLayer .dropSub{ z-index: 20}
	.toolbar .utilBtns .btnWrap .dropSub .btn{ border-top: none}
	.toolbar .utilBtns .btn.colorLayer .colorList li{ width: 16.6666%}
	.toolbar .utilBtns .btn.colorLayer .colorList li span{ width: 30px; height: 30px}

	.toolbar .utilBtns button.btn-setDefault {
		width: calc(100% - 30px);
		height: 50px;
		line-height: 50px;
		text-indent: 0;
		background: #536de9;
		color: #fff;
		opacity: 1;
		border-radius: 10px;
		font-size: 1.063rem;
		margin: 50px 15px;
	}

	/*dropSub active*/
	.toolbar .utilBtns .btn.colorLayer.open .dropSub{ display: block;}
	.toolbar .utilBtns .btn.colorLayer.dropWrap.open:hover .layer-header-title{ background: url("../img/arrow_down.png") no-repeat right 5px center}
	.toolbar .utilBtns .btn.colorLayer.dropWrap .layer-header-title{ padding-right: 20px}

	/*hide bottomControlBtns*/
	.bottomControlBtns.hide{ bottom: 0}

	.bottomControlBtns{ border-radius: 0; width: 100%; padding: 0}
	.slider-bar-wrap{ width: 95%; position: fixed; left: 50%; bottom: 75px; transform: translate(-50%, 0); z-index: 999; line-height: 20px}
	.pageControl{ width: 100%; justify-content: center;}
	.slider-bar-wrap .current-page{ width: 50px}

	/*mobile zoom*/
	.zoomControl {
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		width: 100%;
		height: 25px;
		line-height: 25px;
		margin-top: 5px
	}
	.zoomControl .zoomSlider{ width: calc(100% - 50px); float: left;}
	.toolbar .utilBtns .zoomControl .btn-zoom-in,
	.toolbar .utilBtns .zoomControl .btn-zoom-out{ position: relative; top: 0; left: 0; float: left;}

	/*pageWrap*/
	.pageWrap{ width: 100%; position: fixed; left: 0; bottom: 65px; height: 40px; line-height: 40px; background: #2E313C; display: flex; justify-content: center; border-bottom: solid 1px rgba(255,255,255,0.1);}
}

@media screen and (max-width: 800px) {
	.newspaper .utilUiSelect .grpOpenBtn,
	.newspaper .utilUiSelect button{ flex-shrink: 0}
	.newspaper .utilUiSelect .selectGroup{ display: flex; flex-wrap: nowrap}
	.newspaper .utilUiSelect select#publisherList{ width: 20vw; max-width: 150px}
	.viewTitle{ padding: 0 10px; margin-bottom: 30px; position: relative;}
	.viewTitle h1{ width: 100%; font-size: 0.875rem; background: #111; position: absolute; left: 0; top: 30px;}
	.toolbar .utilBtns button.ic-menu-m{ top: 60px}
	.sideBar,
	.textLayerWrap,
	.searchLayer,
	#mainContainer{ top: 120px}
	.searchLayer,
	.textLayerOpen .textLayerWrap,
	.sideBar{ height: calc(100% - 120px) !important;}

	.toolbar .utilBtns{ top: 60px; height: calc(100% - 60px)}
}
@media screen and (max-width: 420px) {
	.toolbar .utilBtns .btn.colorLayer .colorList li{ width: 25%}
	.pageControl button{ padding-left: 0; padding-right: 0; letter-spacing: -1px}
}

@media screen and (max-width: 340px) {
	body,html { font-size: 14px;}
}

/*en ver*/
.en .toolbar .utilBtns .btn.colorLayer{ width: 130px}
.en .toolbar .utilBtns .btn.colorLayer .layer-header-title{ font-size: 0.750rem; text-align: left; display: flex; flex-wrap: wrap; align-items: center; line-height: +1.1; padding: 0 15px 0 5px}

.en .toolbar .left .btn a{ line-height: +1.1; font-size: 0.750rem; height: 100%; display: flex; flex-wrap: wrap; align-items: center}

@media screen and (max-width: 1150px) {
   .en .toolbar .utilBtns .btnTit{ line-height: +1.1; padding: 20px 0 }

   .en .toolbar .utilBtns .btn.colorLayer{ width: 100%}
   .en .toolbar .utilBtns .btn.colorLayer .layer-header-title{ justify-content: center}
   .en .toolbar .utilBtns .tooltip,
   .en .toolbar .utilBtns .btnWrap .btn,
   .en .toolbar .utilBtns .btnWrap .btn button{ font-size: 0.750rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: +1.1}

   .en .toolbar .utilBtns button.btn-setDefault{ font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: +1.1}
}

/*2022-02-08 언어 선택 추가*/
.langBoxWrap{ position: relative;}
.langBox{ margin: 0 10px; height: 24px; line-height: 24px; background: #4B4C4E; border-radius: 12px; overflow: hidden;}
.langBox a{ font-size: 12px; padding: 0 5px; float: left}
.langBox li.on{ background: #5c6de5; border-radius: 12px}
.langBox li.on a{ color: #fff}

@media screen and (max-width: 800px) {
	.langBox{ position: absolute; left: 50%; top: 30px; transform: translate(-50%, 0); margin: 0; height: 60px; line-height: 30px;}
	.langBoxTit{ color: #ccc; margin-right: 5px; background: url("../img/ic_arrow_drop.png") no-repeat right center; cursor: pointer; text-indent: -5px}
	.langBoxTit,
	.langBox a{ width: 45px; text-align: center}
	.langBox{ border-radius: 0 0 5px 5px; display: none !important}
	.langBox li.on{ border-radius: 0}

	.langBoxWrap.on .langBoxTit{ color: #fff; background: url("../img/ic_arrow_drop_on.png") no-repeat right center;}
	.langBoxWrap.on .langBox{ display: flex !important}
}

/*2022-02-24 오디오 버튼 추가*/
.toolbar .utilBtns .btnWrap.audioWrap .audioBtn{ width: auto; line-height: 35px; font-size: 0.875rem; padding: 0 30px 0 15px; background: url("../img/arrow_down.png") no-repeat right 10px center; cursor: pointer;}
.toolbar .utilBtns .btnWrap.audioWrap.on .audioBtn{ background: url("../img/arrow_up.png") no-repeat right 10px center}
.toolbar .utilBtns .btnWrap.audioWrap .audioBox{ position: absolute; left: 50%; top: 35px; transform: translate(-50%,0); z-index: 99; padding: 5px; background: #4B4C4E; min-width: 200px; height: 65px; text-align: center; display: none}
.toolbar .utilBtns .btnWrap.audioWrap.on .audioBox{ display: block;}

@media screen and (max-width:1150px) {
	.toolbar .utilBtns .btnWrap.audioWrap .audioBtn,
	.toolbar .utilBtns .btnWrap.audioWrap.on .audioBtn{ background: transparent; font-size: 1.125rem; height: 65px; line-height: 65px; padding: 0}
	.toolbar .utilBtns .btnWrap.audioWrap .audioBox,
	.toolbar .utilBtns .btnWrap.audioWrap.on .audioBox{ width: 100%; min-width: auto; height: 55px; position: relative; display: block; left: 0; top: 0; transform: translate(0,0); padding: 0; background: transparent;}
	.toolbar .utilBtns .btnWrap.audioWrap .audioBox audio{ width: 100%}
}

/*2022-03-28 btn action 추가*/
button.clickBtn{ background-color: #f4a204 !important;}
.wrap:not(.zoom) button.btn-viewMode-zoom.clickBtn{ background-color: transparent !important;}


/*2022-04-04 모바일 버튼 추가*/
@media screen and (max-width:1150px) {
	.mobileBtn{ width: 50px; height: 50px; background-color: #4b4c4e; background-position: center; background-repeat: no-repeat; position: fixed; border: none; border-radius: 50%; z-index: 998}
	.mobileBtn.ic-imgdownload{ right: 40px; top: 30px; width: 40px; height: 60px; background-color: transparent}
	.mobileBtn.ic-fullscreen{ right: 10px; bottom: 115px; z-index: 9001}
}

@media screen and (max-width:800px) {
	.mobileBtn.ic-imgdownload{ top: 60px}
}