@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{ position: relative; padding-right: 30px;}
select:after {
	content: "";
	width: 30px;
	height: 35px;
	display: block;
/* background: #37383a url("/resource/imgViewer/image/new_ui/ic_arrow_select.png") no-repeat; */
	background: red url("/resource/imgViewer/image/new_ui/ic_arrow_select.png") no-repeat;
	position: absolute;
	right: 0;
	top: 0;
}

*{ box-sizing: border-box;}
.mHidden{ display: inline-block!important}
.mShow{ display: none!important}
.hidden{ 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*/

/*이미지저장*/
.btnDnOdd, .btnDnEven{ position: absolute; left: 0; top:1%; height:98%; 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(../image/ico_imgdownload.png); background-repeat:no-repeat; background-position: center center;}
.btnDnOdd > a:hover, .btnDnEven > a:hover {background-color: rgba(0,0,0,0.7); box-sizing: border-box; border: #546de9 10px solid;}

/* 화면 배율 표시 */
.zoomText {
	width: 50px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	color: #fff;
	position: fixed;
	left: 50%;
	top: 95px;
	transform: translate(-50%, 0);
	background: rgba(0, 0, 0, 0.8);
	border-radius: 13px;
	z-index: 99999;
	font-size: 0.750rem;
	opacity: 0
}

/* 뷰어 툴바 안내텍스트 추가 start */
.toolbar_info_wrap{display: inline-block; font-size: 0;position: fixed; left: 50%; top: 95px; transform: translate(-50%, 0); line-height: +1.2; max-width: 100%; z-index: 9; display: none;}
.newspaper .toolbar_info_wrap{ top: 135px}
.toolbar_info_wrap span.toolbar_info_txt{color:#fff;font-size:15px;padding:5px 15px;background-color:#535458;border:solid 1px #333;box-sizing:border-box;width:100%;display: inline-block}
.toolbar_info_wrap a{ text-decoration: underline;}
@media screen and (max-width: 800px) {
	.toolbar_info_wrap{ top: 125px}
	.newspaper .toolbar_info_wrap{ top: 165px}
}
/* 뷰어 툴바 안내텍스트 추가 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:first-child{ 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("../image/new_ui/ic_list.png")}
.btn-search-page i{ background-image: url("../image/new_ui/ic_search.png")}
.btn-show-bookinfo i{ background-image: url("../image/new_ui/ic_bookinfo.png")}
.btn-show-bookmark i{ background-image: url("../image/new_ui/ic_bookmarklist.png")}
.btn-show-autoplay i{ background-image: url("../image/new_ui/ic_autoplay.png")}
.ic-all-text i{ background-image: url("../image/new_ui/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("../image/new_ui/ic_search_on.png")}
	.on.btn-show-list i{ background-image: url("../image/new_ui/ic_list_on.png")}
	.on.btn-show-bookinfo i{ background-image: url("../image/new_ui/ic_bookinfo_on.png")}
	.on.btn-show-bookmark i{ background-image: url("../image/new_ui/ic_bookmarklist_on.png")}
	.on.ic-all-text i{ background-image: url("../image/new_ui/ic_all_on.png")}
	.modeSlideShow .toolbar .left .btn.btn-show-autoplay i{ background-image: url("../image/new_ui/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}

.book .ic-zoom-in{ background-image: url("/resource/imgViewer/image/new_ui/ic_zoomin.png"); background-size: auto auto}
.ic-zoomin-s{ background-image: url("../image/new_ui/ic_zoomin.png");}
.ic-zoomout-s{ background-image: url("../image/new_ui/ic_zoomout.png")}
.ic-rotaion-l{ background-image: url("../image/new_ui/ic_90deg_left.png")}
.ic-rotaion-r{ background-image: url("../image/new_ui/ic_90deg_right.png")}
.ic-fullscreen{ background-image: url("../image/new_ui/ic_fullscreen.png")}
.ic-single{ background-image: url("../image/new_ui/ic_view_single.png")}
.ic-double{ background-image: url("../image/new_ui/ic_view_double.png")}
.ic-direct-ltr{ background-image: url("../image/new_ui/ic_direct_ltr.png")}
.ic-direct-rtl{ background-image: url("../image/new_ui/ic_direct_rtl.png")}
.ic-direct-twothree{ background-image: url("../image/new_ui/ic_direct_coverstart.png")}
.ic-followup{ background-image: url("../image/new_ui/ic_view_scroll.png")}
.ic-translated-text{ background-image: url("../image/new_ui/ic_translated.png")}
.ic-original-text{ background-image: url("../image/new_ui/ic_original.png")}
.ic-all-text{ background-image: url("../image/new_ui/ic_all.png")}
.ic-print{ background-image: url("../image/new_ui/ic_print.png")}
.ic-imgdownload{ background-image: url("../image/new_ui/ic_download.png")}
.ic-addBookmark{ background-image: url("../image/new_ui/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("../image/new_ui/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("../image/new_ui/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("../image/new_ui/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;}

/* zoom control buttons*/
.zoomControl {display:none;}
.zoomControl {
	position: absolute;
	left: 50%;
	top: 48px;
	transform: translate(-50%, 0);
	width: 150px;
	height: 25px;
	line-height: 25px;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 100000;
}
.toolbar .utilBtns .zoomControl .closeZoom,
.toolbar .utilBtns .zoomControl .btn-zoom-in,
.toolbar .utilBtns .zoomControl .btn-zoom-out {
	height: 25px;
	width: 25px;
	overflow: hidden;
	text-indent: -999999999px;
	background-color: transparent;
	border: 0;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0;
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	top: 0;
	z-index: 1
}
.zoomControl .btn-zoom-in { right: -25px; background-image: url("/resource/imgViewer/image/new_ui/ic_plus.png")}
.zoomControl .btn-zoom-out { left: -25px; background-image: url("/resource/imgViewer/image/new_ui/ic_minus.png")}
.zoomControl .closeZoom { right: -50px; background-image: url("/resource/imgViewer/image/new_ui/ic_close_s.png"); cursor: pointer; border-radius: 50%; background-color: #000}
.zoomControl .zoomSlider { height: 5px;  background-color: #566eff; width: 150px; position: relative; z-index: 2; margin: 10px 0}
.zoomControl .zoomSlider .handPoint { width: 10px; height: 10px; border-radius: 5px; background-color: #ccc; position: absolute; left: 50%; top: 50%; transform: translate(0, -50%); margin-left: -5px; }
.zoomControl .zoomSlider .handPoint:hover { background-color:#fff;}

@media screen and (max-width:1150px) {
	.zoomControl{
		transform: translate(-50%, 0);
		width: 30px;
		height: 150px;
		top: -190px;
	}
	.zoomControl .btn-zoom-in,
	.zoomControl .btn-zoom-out{ width: 30px; height: 30px; position: absolute; left: 0; border-radius: 0; background-size: 15px; color: transparent; overflow: hidden; background-color: rgba(0, 0, 0, 0.8)}
	.zoomControl .btn-zoom-in{ top: -30px;}
	.zoomControl .btn-zoom-out{ bottom: -30px;}

	.zoomControl .zoomSlider{ height: 140px; width: 10px; margin: 5px 10px}
	.zoomControl .zoomSlider .handPoint{ width: 18px; height: 18px; border-radius: 50%; margin-left: 0; margin-bottom: -9px; left: 50% !important; top: auto; bottom: 50%; transform: translate(-50%, 0);}

	.zoomMobileBtn{ position: fixed; right: 10px; bottom: 165px; width: 50px; height: 50px; padding: 0; z-index: 9001}
	.zoomMobileBtn button {
		background-repeat: no-repeat;
		background-position: center;
		border: none;
		padding: 0;
		display: block;
	}
	.zoomMobileBtn button.ic-zoom-in{ border-radius: 50%; background-color: #4B4C4E; background-image: url("/resource/imgViewer/image/new_ui/ic_zoom.png"); width: 100%; height: 100%; background-size: 25px auto;}
	.wrap.zoom .zoomMobileBtn button.ic-zoom-in{ background-color: #5c6de5}

}

@media screen and (max-height: 420px) {
	.wrap.zoom .toolbar .utilBtns.on{z-index: 10001}
	.wrap.zoom .zoomMobileBtn{ z-index: 10000}

	.zoomControl{ height: 0; top: -35px}
	.zoomControl .zoomSlider{ height: 0; opacity: 0;}
}
/*header end*/

/*newspaper start*/
.newspaper .utilUiSelect{ width: 100%; height: 40px; padding: 5px 10px; flex-wrap: nowrap; justify-content: center; background: #252525;}
.newspaper .utilUiSelect button{ flex-shrink: 0; border-radius: 15px; background: #4B4C4E; border: none; color: #fff; font-size: 0.875rem; padding: 0 8px; margin: 0 5px}
.newspaper .selectGroup > span{ margin: 0 1px}
.newspaper .utilUiSelect > *,
.newspaper .selectGroup > span,
.newspaper .utilUiSelect button,
.newspaper .utilUiSelect select{ height: 30px; line-height: 30px; float: left;}
.newspaper .utilUiSelect select{ border-radius: 0}
.newspaper .sideBar{ height: calc(100% - 130px); top: 130px}
.newspaper .zoomText{ top: 135px}

.newspaper .sideBar,
.newspaper .textLayer{ top: 130px; height: calc(100% - 130px)}
/*newspaper 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(/resource/imgViewer/image/new_ui/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 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;}

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

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

.textLayer .textLayer-content{ position: relative; height: 100%;  box-sizing: border-box; overflow: auto; overflow-x: hidden;}
.textLayer .textLayer-content > div{display: none; }
.textLayer .textLayer-content > div.on{ display: block;}
.textLayer .textLayer-tab li{float:left; display: block; border-right:#555 1px solid; }
.textLayer .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 .textLayer .textLayer-tab li a{ line-height: +1.1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 0.750rem;}
.textLayer .textLayer-tab li.on a{ background: #83848c;}

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

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

.align-right{ width: auto; display: inline-block; float: right}
.textLayer{ height: calc(100% - 90px)}
.textLayer .textLayer-content{ height: calc(100% - 40px); overflow: hidden; padding: 10px;}
.textLayer .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}
.textLayer .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("/resource/imgViewer/image/new_ui/ic_txtdownload.png") no-repeat center; opacity: 1 !important}
.ic_txt_plus{ background: url("../image/ic_txt_plus.png") no-repeat center; opacity: 1 !important}
.ic_txt_minus{ background: url("../image/ic_txt_minus.png") no-repeat center; opacity: 1 !important; margin-right: 5px}
.ic_vertical{ background: url("../image/ic_vertical.png") no-repeat center;}
.ic_horizontal{ background: url("../image/ic_horizontal.png") no-repeat center;}


.toc-list .volGrp ul li .pnum { float:left; width:30px;}
.toc-list .volGrp ul li .active {background-color:#546de9;}
.toc-list .volGrp ul li .active a { color:#fff !important}
.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: #fff; text-decoration: none; font-size: 12px; }
.toc-list .volGrp ul li a:hover {text-decoration: underline;}

.toc-list .selected ul {display:block}
.toc-list .volTitle { position: relative; color: #fff;font-size: 0.875rem; background: url('../image/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;}

.toc-list .volGrp .volTitle:after { content: url("../image/ico_folder_off.png"); position:absolute; top:-4px; right:20px;}
.toc-list .selected .volTitle:after { content: url("../image/ico_folder_on.png"); position:absolute; top:-4px; right:20px;}

.newspaperList .volGrp { margin: 10px; border:0; overflow:hidden;}
.newspaperList .volGrp ul {display:block; overflow:hidden;}
.newspaperList .volGrp ul li.active {background-color:#546de9; color:#fff !important}
.newspaperList .volGrp ul li.active a {color:#fff !important}
.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: #fff; text-decoration: none; font-size: 12px; }
.newspaperList .volGrp ul li a:hover {text-decoration: underline;}
.newspaperList .selected ul {display:block}
.newspaperList .volTitle { color: #fff;font-size: 0.875rem; background: url('../image/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;}
.bookmark-list .thumb img { height:100%; width: 100%; max-width: 100%; }
.bookmark-list .context { margin-left: 70px; font-size: 12px; margin-right: 40px;padding-top: 5px;}
.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; font-family: tahoma,arial,sans-serif;}
.bookmark-list .context .pg {font-weight:bold; color:#ccc; padding-bottom: 5px; font-family: tahoma,arial,sans-serif;padding-left: 10px;}
.bookmark-list .context .tit { color:#ccc; padding-bottom: 5px; margin-top:5px; }
.bookmark-list .context .text {color:#939393;padding-top: 10px; word-break: break-all; line-height: 150%;}
.bookmark-list button.btn-boomark-del {height:20px; width:20px; position: absolute; right: 5px; top:15px;
  border-radius:10px;  background:url(/resource/imgViewer/image/new_ui/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;}

.bookInfo li .textTitle {
    display: block;
    color: #fff;
}

/* page control buttons*/
/*.modeThumbView .bottomControlBtns { bottom:-100px;}
.bottomControlBtns {position: absolute; z-index: 8000; bottom: 0; left: 50%; margin-left: -225px; height: 50px;
  background-color:rgba(0,0,0,0.6); transition: bottom 0.3s;}
.pageControl { position:relative; float:left }
.bottomControlBtns button { float: left }
.bottomControlBtns button:disabled, .bottomControlBtns button:disabled:hover {opacity: 0.3 !important;}
.pageControl button:disabled:hover
.pageControl input:disabled {opacity: 0.3 !important;}
.pageControl .pageWrap { position: relative; float: left; display: block; width: 150px }

.pageControl .pageWrap  .txt_page { display: block; font-family: tahoma,arial,sans-serif; line-height: 50px; height: 50px; text-align: center;  width: 150px; font-size: 14px; color: #ccc; }
.pageControl .pageWrap  .txt_page strong { color:#ffa800; font-weight: bold; padding-right:5px;}

.pageControl .pageWrap .gopageNum{ width: 50px; text-align: center;}

.pageControl .colorControl { position: relative; float:left;height: 50px; width: 50px; border-left:#000 1px solid;}
.pageControl .colorControl .colorPicker { position: absolute;  height:26px; width:26px;top: 11px;left: 11px;}
.pageControl .colorControl span { display: block; position: absolute; height:12px; width: 12px; overflow: hidden; text-indent: -100px; box-sizing: border-box; cursor: pointer;}
.pageControl .colorControl span:nth-child(1) { left:0px; top:0px;background-color: #282828;}
.pageControl .colorControl span:nth-child(2) { left:15px; top:0px;background-color: #999999;}
.pageControl .colorControl span:nth-child(3) { left:0px; top:16px;background-color: #666666;}
.pageControl .colorControl span:nth-child(4) { left:15px; top:16px;background-color: #ffffff;}
.pageControl .colorControl .selected { border: #3065e9 1px solid}
*/
.btn-l-prev, .btn-l-next {height:80px; width:40px; overflow: hidden; text-indent:-200px; background-color: #000;
	opacity: 0.7;  background-image: url(../image/spt_viewer.png); background-repeat: no-repeat;z-index:9000;
top: 50%;
position: absolute;
transform: translate(0, -50%);
}
.btn-l-prev:hover, .btn-l-next:hover { opacity:1;}
.btn-l-prev {  left: 0; background-position: 0 -240px;  }
.btn-l-next {  right: 0; background-position: -40px -240px;}




/* slide control */
.modeSlideShow .slideShowControl { bottom:0}
.slideShowControl { position: fixed;  bottom: -60px; right: 20px; margin-left: -175px; height: 50px; transition: bottom 0.3s; z-index:100000; }
.slideShowControl button { float: left;  height:50px; background-color: rgba(0,0,0,0.7); border: 0; color:#fff;opacity: 0.6; cursor: pointer}
.slideShowControl .btn-slide-play, .slideShowControl .btn-slide-stop {height:50px; width: 50px; overflow: hidden; text-indent: -200px;  border: 0 !important; background-image:url(../image/spt50_viewer.png);
	background-repeat: no-repeat;  transition: opacity 0.3s; cursor: pointer; outline: none; padding: 0; margin: 0; display: block; position: relative;}
.slideShowControl .btn-slide-play:hover, .slideShowControl .btn-slide-stop:hover { opacity: 1;}
.slideShowControl .btn-slide-play {background-position: -350px -200px;}
.slideShowControl .btn-slide-stop {background-position: -400px -200px; }
.slideShowControl .btn-slide-end {padding:0 20px;}
.slideShowControl .btn-slide-end {opacity: 1; background-color: #0084ff;}

body  { background-color: #000;}

/*page control buttons*/
.bottomControlBtns {
	width: 800px;
	max-width: calc(100% - 110px);
	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("/resource/imgViewer/image/new_ui/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("/resource/imgViewer/image/new_ui/arrow_up.png");}

.slider-bar-wrap{ width: auto; padding-right: 20px; justify-content: center;}
.slider-bar-wrap .turnjs-slider{ width: auto; min-width: 385px; margin-right: 20px; display: block !important}
.slider-bar-wrap .turnjs-slider .ui-slider-horizontal{ width: calc(100% - 20px)}
.slider-bar-wrap .turnjs-slider .ui-slider-horizontal .ui-slider-handle{ margin-left: -40px; width: 20px; height: 20px; border-radius: 50%; top: 50%; transform: translate(0, -50%);}
.slider-bar-wrap .current-page{ width: 40px;}
.slider-bar-wrap .pageWrap{ flex-shrink: 0}

.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("/resource/imgViewer/image/new_ui/ic_go_first.png")}
.pageControl button.ic-prev-s{ background-image: url("/resource/imgViewer/image/new_ui/ic_go_prev.png")}
.pageControl button.ic-next-s{ background-image: url("/resource/imgViewer/image/new_ui/ic_go_next.png")}
.pageControl button.ic-lastPage{ background-image: url("/resource/imgViewer/image/new_ui/ic_go_last.png")}
.pageControl button.ic-thumb{ background-image: url("/resource/imgViewer/image/new_ui/ic_view_thumb.png")}
.pageControl button.ic-innerfull{ background-image: url("/resource/imgViewer/image/new_ui/ic_view_innerfull.png")}

/* 모달창 */
.layer {display: none;z-index: 980000;position: fixed;height: 100%;width: 100%;}
.layerWrap { position: fixed; top:30%; 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:0.875rem; 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(../image/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-body p {margin:0; padding:8px; width: 100%; height: 100%; border:0; resize: none; font-size: 12px;}
.layerWrap .pageSelect.onepage span {width:100%;}
.layerWrap .pageSelect.onepage span:nth-child(2) { display: none;}

.layerWrap .layer-btns { border-top:#ccc 1px solid;}

.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: 99000; */ background: rgba(0,0,0,0.7)}

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

/* 과금창 */
#openLayer .priceMsg p {line-height: 150%; font-size: 0.875rem; margin-bottom: 10px; color:#333;}
#openLayer .openPrice { background-color: #f9f9f9; padding:15px; font-size: 0.875rem; font-weight: bold; border: #eaeaea 1px solid;}
#openLayer .priceText { float: right;}
#openLayer .priceText strong { font-size: 0.875rem; font-weight: bold;}
#openLayer .infoMsg { font-weight: bold; line-height: 150%;}

/* 인쇄창 */

#printLayer {display: none; font-size: 12px; }
#printLayer .pageSetting, #printLayer .printOption, #printLayer .printOption2, #printLayer .printPrice { margin-bottom: 20px; border:#eaeaea 1px solid; border-radius: 3px; padding: 10px 20px;}
#printLayer .pageSetting ul li {  padding:6px 0;color:#333; }
#printLayer .pageSetting ul li .sub {padding: 0 10px;}
#printLayer .pageSetting ul li .sub input { width: 80px; margin-right:5px;}
#printLayer .pageSetting ul li .left{ width: 80px}
#printLayer .pageSetting ul li .right{ width: calc(100% - 110px)}
#printLayer .pageSetting ul li .left,
#printLayer .pageSetting ul li .right{ display: inline-block;}
#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;}
#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: 0.875rem; font-weight: bold;}
#printLayer .infoMsg { font-weight: bold; line-height: 150%;}
#printLayer .layerWrap { margin-top:-100px !important;}

/* 인쇄 진행창 */

.printingStatus .printingIco { margin:30px 0;}
.printingStatus {text-align:center; font-size:0.875rem; 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;}

/* 슬라이드쇼 윈도우 */
.layerTime {display:none;}
.layerTime { position: fixed; left: 0; top:0; height: 100%; width: 100%; z-index: 150000; background-color:rgba(0,0,0,0.5);/*! cursor: none; */}
.layerTime .winConetents { position:fixed; top:50%; left: 50%; width: 200px; margin-left: -100px; margin-top:-100px; border-radius:100px;
		height:200px; background-color: #554cdb; }
.layerTime .winConetents .title { font-size:0.875rem; padding: 40px 10px 20px 10px; color: #fff ; font-weight: bold; text-align: center;}
.layerTime .winConetents .display {  text-align: center;}
.layerTime .winConetents .display input {font-size: 42px; width: 90px; color: #fff;font-family: "나눔바른고딕"; text-align:center; background-color: transparent; border:0;border-bottom:rgba(255,255,255,0.5) 2px solid;/*! margin: 0 atuo; */}
.layerTime .winConetents .display input:focus {border-bottom:rgba(255,255,255,1) 2px solid;}
.layerTime .winConetents .timeValue {font-family: "Century Gothic"; font-weight: bold;}

.layerTime .time-minus, .layerTime .time-plus {height: 50px; width: 50px; overflow: hidden; text-indent: -200px; background-color:rgba(0,0,0,0.8); border-radius: 25px; border: 0 !important; background-image:url(../image/spt50_viewer.png);	background-repeat: no-repeat; opacity: 0.6; transition: opacity 0.3s; cursor: pointer; outline: none; padding: 0; margin: 0; display: block; position: relative;}
.layerTime button:hover { opacity: 1; border: 0 !important; outline: none !important;}

.layerTime .time-minus { position: absolute; top:50%; left: -60px; margin-top: -25px; background-position: -150px -100px; }
.layerTime .time-plus { position: absolute; top:50%; right: -60px; margin-top: -25px; background-position: -100px -100px; }
.bt {text-align: center; margin-top: 20px; }
.bt button { display: inline-block; font-size: 12px; padding: 8px 15px; font-weight: bold; color: #fff; overflow: hidden; background-color:rgba(0,0,0,0.2); border-radius: 25px;
	border: 0 !important; cursor: pointer;}
.bt button:first-child { margin-right: 5px}

.timeBar { position: absolute; z-index:-1; bottom:-2px; left:0; background: #000; width: 100%; height:2px;}
.timeBar .gage { position: absolute; background: #297dfa; width:0%; height:100%;
  animation-duration: 10s;
  animation-name: gage;
}

@keyframes gage {
  from {
    width: 0%  }
  to {
    width: 100%;
  }
}

/* thumb view */
.modeThumbView .thumbView { bottom:0;}
.thumbView { position: fixed;  /*! height: 130px; */ width: 100%; bottom: -220px; left:0; padding:10px 0; background-color: rgba(0,0,0,0.8); z-index: 100000; transition: bottom 0.3s; box-sizing: border-box;}
.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(../image/spt_viewer.png); background-position: -200px -80px;
z-index: 5000;
}
.thumbView .thumbListWrap { box-sizing: border-box; /*! overflow: auto; */ /*! overflow-y: hidden; *//*! word-spacing: normal; *//*! word-break: normal; *//*! white-space: nowrap; */ }
.thumbView .thumbListWrap a { /*! float:left; */ box-sizing: border-box; padding: 10px;display: inline-block;}
#thumbList {box-sizing: border-box;  overflow: auto;  overflow-y: hidden;  white-space: nowrap;}
.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('../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;
	margin-top: -25px;
}

.thumbView .btn-thumb-prev {
    background-position: 0 0;
    left: 10px;
}
.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 }


/* 북마크표시 */

.pin { position: absolute; top:10px; right:50%; margin-right: -25px;}
.pin button {height: 50px; width: 50px; overflow: hidden; text-indent: -200px; border: 0 !important; background-image:url(../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;}



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

/*mMenuWrap active*/
.toolbar .utilBtns.on button.ic-menu-m{ background-image: url("/resource/imgViewer/image/new_ui/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("/resource/imgViewer/image/new_ui/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; padding: 0}
	.slider-bar-wrap .turnjs-slider{ min-width: auto; width: calc(100% - 110px)}
	.pageControl{ width: 100%; justify-content: center;}
	.slider-bar-wrap .current-page{ width: 50px}

	/*newspaper start*/
	.newspaper .toolbar .utilBtns button.ic-menu-m{ top: 70px}
	.newspaper .toolbar .utilBtns{ top: 70px; height: calc(100% - 70px)}
	/*newspaper end*/
}

@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}
	.newspaper .sideBar,
	.newspaper .textLayer{ top: 160px}
	.newspaper .textLayerOpen .textLayer,
	.newspaper .sideBar{ height: calc(100% - 160px) !important;}

	.newspaper .toolbar .utilBtns button.ic-menu-m{ top: 100px}
	.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,
	.textLayer{ top: 120px}
	.textLayerOpen .textLayer,
	.sideBar{ height: calc(100% - 120px) !important;}

	.toolbar .utilBtns{ top: 60px; height: calc(100% - 60px)}
	.newspaper .toolbar .utilBtns{ top: 100px; height: calc(100% - 100px)}

}
@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("/resource/imgViewer/image/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("/resource/imgViewer/image/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("/resource/imgViewer/image/new_ui/arrow_down.png") no-repeat right 10px center; cursor: pointer;}
.toolbar .utilBtns .btnWrap.audioWrap.on .audioBtn{ background: url("/resource/imgViewer/image/new_ui/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: 40px; height: 40px; 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: 5px; bottom: 5px; z-index: 9001}

	.newspaper .mobileBtn.ic-imgdownload{ top: 70px}
}

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

	.newspaper .mobileBtn.ic-imgdownload{ top: 100px}
}

.fullBtn{position: fixed !important; right: 10px; bottom: 10px;}