#bottom_box {position:absolute;left:0px;width:100%;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);z-index:120;}
#bottom_box_open {position:absolute;cursor:pointer;transition:bottom 0.3s;-webkit-transition:bottom 0.3s;z-index:120;}
#body[full-mode="y"] #bottom_box_open {display:block;bottom:0px;}
#body[full-mode="n"] #bottom_box_open {display:none;}

input[type="range"]::-ms-track {background:transparent;border-color:transparent;color:transparent;}
input[type="range"]::-ms-fill-lower {background:#ffae00;border-radius:10px;}
input[type="range"]::-ms-fill-upper {background:#ffffff;border-radius:10px;}
body[browser-type="msie"] input[type="range"] {top:8px;}
/* 아래 style을 사용할 경우 -ms-thumb이  두 번 선언되면 chrome과 충돌이 생기는 것으로 보인다. 그래서 동적으로 style을 생성하게 변경하고 여기는 Comment 처리*/
/*input[type="range"]::-ms-thumb {border:none;border-radius:50%;background:#e7e7e7;cursor:pointer;}*/
/*body[browser-type="msie"] input[type="range"]::-ms-thumb {border:none;border-radius:50%;background:#e7e7e7;cursor:pointer;margin-bottom:0px;}}*/

input[type="range"] {-webkit-appearance:none;width:100%;}
input[type="range"]:focus {outline:none;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;border-radius:50%;background:#e7e7e7;cursor:pointer;}

input[type="range"]::-moz-range-thumb {border-radius:50%;background:#e7e7e7;cursor:pointer;}
input[type="range"]::-moz-range-progress {background:#ffae00;border-radius:10px;height:5px;}
input[type="range"]::-moz-range-track {height:5px;background:#ffffff;border-radius:10px;}
/*input[type=range]:focus::-moz-range-track {background:transparent;border-color:transparent;color:transparent;}*/

.bottom {width:100%;background-color:#2f2f2f;border-radius:11px;transition:height 0.3s,bottom 0.3s, width 0.3s, left 0.3s;-webkit-transition:height 0.3s,bottom 0.3s, width 0.3s, left 0.3s;overflow:hidden;}
.paging {flex-shrink:0;font-size:1em;color:#313131;text-align:center;cursor:default;background-color:#ffffff;border:none;user-select:none;-ms-user-select:none;}
.size-range {flex-shrink:0;position:absolute;}

.btn {flex-shrink:0;cursor:pointer;transition:width 0.3s,height 0.3s;-webkit-transition:width 0.3s,height 0.3s;}
.btn:hover {opacity:0.55;}
.btn:active {opacity:0.30;}
.direct-page {flex-shrink:0;background-color:#ffffff;background-position:right center;background-repeat:no-repeat;border-radius:4px;}
.direct-page[data-op="page_direct"] {cursor:pointer;}
.direct-page > input[type="number"] {height:100%;font-size:1em;text-align:center;color:#313131;border:none;background-color:transparent;outline:none;}

.disabled {opacity:0.3;cursor:default;}
.btn.disabled:hover {opacity:0.3;}
.btn.disabled:active {opacity:0.3;}

/*********************************************************************/
/* -25% size */
/* size type 0 */
#body[menu-size="t0"] .bottom {height:34px;border-radius:8px;font-size:10px;}
#body[menu-size="t0"] .btn {width:22px;height:18px;}
#body[menu-size="t0"][full-mode="n"] .bottom {bottom:10px;}
#body[menu-size="t0"][full-mode="y"] .bottom {bottom:-5px;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="y"] .bottom {bottom:-34px;}

/* history prev/next */
#body[menu-size="t0"] .btn.hist-prev {margin-left:12px;background:url("../imgs/t0/toolbar_recent_prev_nor.png") no-repeat center;}
#body[menu-size="t0"] .btn.hist-next {margin-right:7px;background:url("../imgs/t0/toolbar_recent_next_nor.png") no-repeat center;}
/* paging */
#body[menu-size="t0"] .btn.page-first {/*%%2022/02/23 margin-left:21px;*/background:url("../imgs/t0/toolbar_start_nor.png") no-repeat center;}
#body[menu-size="t0"] .btn.page-prev {margin-left:6px;background:url("../imgs/t0/toolbar_prev_nor.png") no-repeat center;}
#body[menu-size="t0"] .paging {margin-left:12px;width:80px;height:20px;line-height:20px;border-radius:3px;}
#body[menu-size="t0"] .btn.page-next {margin-left:12px;background:url("../imgs/t0/toolbar_next_nor.png") no-repeat center;}
#body[menu-size="t0"] .btn.page-last {margin-left:6px;background:url("../imgs/t0/toolbar_last_nor.png") no-repeat center;}
/* direct move page */
#body[menu-size="t0"] .direct-page {margin-left:15px;margin-right:15px;width:54px;height:20px;background-image:url("../imgs/t0/arrow_nor.png");}
#body[menu-size="t0"] .direct-page[data-op="page_direct_disabled"] {background-image:url("../imgs/t0/arrow_hover.png");}
#body[menu-size="t0"] .direct-page[data-op="page_direct"]:hover {background-image:url("../imgs/t0/arrow_hover.png");}
#body[menu-size="t0"] .direct-page[data-op="page_direct"]:active {background-image:url("../imgs/t0/arrow_press.png");}
#body[menu-size="t0"] .direct-page > input[type="number"] {margin-left:7px;width:33px;height:18px;line-height:18px;}
/* book zoom ratio size range */
#body[menu-size="t0"] .size-range {margin-left:19px;width:93px;border-radius:2px;}
#body[menu-size="t0"] input[type=range]::-webkit-slider-runnable-track {height:4px;}
#body[menu-size="t0"] input[type=range]::-webkit-slider-thumb {margin-top:-4px;width:12px;height:12px;}
#body[menu-size="t0"] input[type=range]::-ms-thumb {width:12px;height:12px;}
#body[menu-size="t0"] input[type=range]::-ms-track {width:93px;height:4px;border-width:4px 0;}
/* single or double page */
#body[menu-size="t0"] .btn.single-page-fit {margin-left:11px;width:17px;height:19px;background:url("../imgs/t0/page_zoom1_nor.png") no-repeat center;}
#body[menu-size="t0"] .btn.left-page-fit {margin-left:11px;width:17px;height:19px;background:url("../imgs/t0/page_zoom_left_nor.png") no-repeat center;}
#body[menu-size="t0"] .btn.right-page-fit {width:17px;height:19px;background:url("../imgs/t0/page_zoom_right_nor.png") no-repeat center;}
/* button size */
#body[menu-size="t0"] .btn.bar-size {margin-left:93px;background:url("../imgs/t0/toolbar_size_nor.png") no-repeat center;}
/* full mode */
#body[menu-size="t0"] .btn.full {margin-left:12px;/*%%2022/02/23 margin-right:12px;*/}
#body[menu-size="t0"][full-mode="n"] .btn.full {background:url("../imgs/t0/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t0"][full-mode="y"] .btn.full {background:url("../imgs/t0/toolbar_zoom_out_nor.png") no-repeat center;}
#body[menu-size="t0"][full-mode2="n"] .btn.full {background:url("../imgs/t0/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t0"][full-mode2="y"] .btn.full {background:url("../imgs/t0/toolbar_zoom_out_nor.png") no-repeat center;}
/* open, close button */
#body[menu-size="t0"] #bottom_box_open {width:86px;height:28px;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open {background:url("../imgs/t0/toolbar_show_nor.png") no-repeat center;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:hover {background:url("../imgs/t0/toolbar_show_hover.png") no-repeat center;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:active {background:url("../imgs/t0/toolbar_show_press.png") no-repeat center;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open {bottom:29px;background:url("../imgs/t0/toolbar_hide_nor.png") no-repeat center;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:hover {background:url("../imgs/t0/toolbar_hide_hover.png") no-repeat center;}
#body[menu-size="t0"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:active {background:url("../imgs/t0/toolbar_hide_press.png") no-repeat center;}
/*********************************************************************/


/*********************************************************************/
/* base size */
/* size type 1 */
#body[menu-size="t1"] .bottom {height:45px;font-size:14px;}
#body[menu-size="t1"] .btn {width:26px;height:23px;}
#body[menu-size="t1"][full-mode="n"] .bottom {bottom:10px;}
#body[menu-size="t1"][full-mode="y"] .bottom {bottom:-7px;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="y"] .bottom {bottom:-45px;}

/* history prev/next */
#body[menu-size="t1"] .btn.hist-prev {margin-left:10px;background:url("../imgs/t1/toolbar_recent_prev_nor.png") no-repeat center;}
#body[menu-size="t1"] .btn.hist-next {margin-right:10px;background:url("../imgs/t1/toolbar_recent_next_nor.png") no-repeat center;}
/* paging */
#body[menu-size="t1"] .btn.page-first {/*%%2022/02/23 margin-left:31px;*/background:url("../imgs/t1/toolbar_start_nor.png") no-repeat center;}
#body[menu-size="t1"] .btn.page-prev {margin-left:9px;background:url("../imgs/t1/toolbar_prev_nor.png") no-repeat center;}
#body[menu-size="t1"] .paging {margin-left:18px;width:115px;height:27px;line-height:27px;border-radius:4px;}
#body[menu-size="t1"] .btn.page-next {margin-left:18px;background:url("../imgs/t1/toolbar_next_nor.png") no-repeat center;}
#body[menu-size="t1"] .btn.page-last {margin-left:9px;background:url("../imgs/t1/toolbar_last_nor.png") no-repeat center;}
/* direct move page */
#body[menu-size="t1"] .direct-page {margin-left:23px;margin-right:23px;width:71px;height:27px;background-image:url("../imgs/t1/arrow_nor.png");}
#body[menu-size="t1"] .direct-page[data-op="page_direct_disabled"] {background-image:url("../imgs/t1/arrow_hover.png");}
#body[menu-size="t1"] .direct-page[data-op="page_direct"]:hover {background-image:url("../imgs/t1/arrow_hover.png");}
#body[menu-size="t1"] .direct-page[data-op="page_direct"]:active {background-image:url("../imgs/t1/arrow_press.png");}
#body[menu-size="t1"] .direct-page > input[type="number"] {margin-left:10px;width:43px;height:25px;line-height:25px;}
/* book zoom ratio size range */
#body[menu-size="t1"] .size-range {margin-left:23px;width:124px;border-radius:2px;}
#body[menu-size="t1"] input[type=range]::-webkit-slider-runnable-track {height:5px;}
#body[menu-size="t1"] input[type=range]::-webkit-slider-thumb {margin-top:-5px;width:14px;height:14px;}
#body[menu-size="t1"] input[type=range]::-ms-thumb {width:16px;height:16px;}
#body[menu-size="t1"] input[type=range]::-ms-track {width:124px;height:6px;border-width:6px 0;}
/* single or double page */
#body[menu-size="t1"] .btn.single-page-fit {margin-left:15px;width:21px;background:url("../imgs/t1/page_zoom1_nor.png") no-repeat center;}
#body[menu-size="t1"] .btn.left-page-fit {margin-left:15px;width:21px;background:url("../imgs/t1/page_zoom_left_nor.png") no-repeat center;}
#body[menu-size="t1"] .btn.right-page-fit {width:21px;background:url("../imgs/t1/page_zoom_right_nor.png") no-repeat center;}
/* button size */
#body[menu-size="t1"] .btn.bar-size {margin-left:126px;background:url("../imgs/t1/toolbar_size_nor.png") no-repeat center;}
/* full mode */
#body[menu-size="t1"] .btn.full {margin-left:20px;/*%%2022/02/23 margin-right:10px;*/}
#body[menu-size="t1"][full-mode="n"] .btn.full {background:url("../imgs/t1/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t1"][full-mode="y"] .btn.full {background:url("../imgs/t1/toolbar_zoom_out_nor.png") no-repeat center;}
#body[menu-size="t1"][full-mode2="n"] .btn.full {background:url("../imgs/t1/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t1"][full-mode2="y"] .btn.full {background:url("../imgs/t1/toolbar_zoom_out_nor.png") no-repeat center;}
/* open, close button */
#body[menu-size="t1"] #bottom_box_open {width:112px;height:35px;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open {background:url("../imgs/t1/toolbar_show_nor.png") no-repeat center;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:hover {background:url("../imgs/t1/toolbar_show_hover.png") no-repeat center;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:active {background:url("../imgs/t1/toolbar_show_press.png") no-repeat center;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open {bottom:38px;background:url("../imgs/t1/toolbar_hide_nor.png") no-repeat center;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:hover {background:url("../imgs/t1/toolbar_hide_hover.png") no-repeat center;}
#body[menu-size="t1"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:active {background:url("../imgs/t1/toolbar_hide_press.png") no-repeat center;}
/*********************************************************************/

/*********************************************************************/
/* base size */
/* size type 1 */
#body[menu-size="t2"] .bottom {height:54px;font-size:17px;}
#body[menu-size="t2"] .btn {width:34px;height:29px;}
#body[menu-size="t2"][full-mode="n"] .bottom {bottom:10px;}
#body[menu-size="t2"][full-mode="y"] .bottom {bottom:-8px;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="y"] .bottom {bottom:-54px;}

/* history prev/next */
#body[menu-size="t2"] .btn.hist-prev {margin-left:23px;background:url("../imgs/t2/toolbar_recent_prev_nor.png") no-repeat center;}
#body[menu-size="t2"] .btn.hist-next {margin-right:15px;background:url("../imgs/t2/toolbar_recent_next_nor.png") no-repeat center;}
/* paging */
#body[menu-size="t2"] .btn.page-first {/*%%2022/02/23 margin-left:39px;*/background:url("../imgs/t2/toolbar_start_nor.png") no-repeat center;}
#body[menu-size="t2"] .btn.page-prev {margin-left:11px;background:url("../imgs/t2/toolbar_prev_nor.png") no-repeat center;}
#body[menu-size="t2"] .paging {margin-left:23px;width:155px;height:33px;line-height:33px;border-radius:4px;}
#body[menu-size="t2"] .btn.page-next {margin-left:23px;background:url("../imgs/t2/toolbar_next_nor.png") no-repeat center;}
#body[menu-size="t2"] .btn.page-last {margin-left:11px;background:url("../imgs/t2/toolbar_last_nor.png") no-repeat center;}
/* direct move page */
#body[menu-size="t2"] .direct-page {margin-left:29px;margin-right:29px;width:87px;height:33px;background-image:url("../imgs/t2/arrow_nor.png");}
#body[menu-size="t2"] .direct-page[data-op="page_direct_disabled"]:hover {background-image:url("../imgs/t2/arrow_hover.png");}
#body[menu-size="t2"] .direct-page[data-op="page_direct"]:hover {background-image:url("../imgs/t2/arrow_hover.png");}
#body[menu-size="t2"] .direct-page[data-op="page_direct"]:active {background-image:url("../imgs/t2/arrow_press.png");}
#body[menu-size="t2"] .direct-page > input[type="number"] {margin-left:13px;width:53px;height:31px;line-height:31px;}
/* book zoom ratio size range */
#body[menu-size="t2"] .size-range {margin-left:28px;width:155px;border-radius:3px;}
#body[menu-size="t2"] input[type=range]::-webkit-slider-runnable-track {height:7px;}
#body[menu-size="t2"] input[type=range]::-webkit-slider-thumb {margin-top:-5px;width:18px;height:18px;}
#body[menu-size="t2"] input[type=range]::-ms-thumb {width:18px;height:18px;}
#body[menu-size="t2"] input[type=range]::-ms-track {width:155px;height:7px;border-width:7px 0;}
/* single or double page */
#body[menu-size="t2"] .btn.single-page-fit {margin-left:19px;width:26px;background:url("../imgs/t2/page_zoom1_nor.png") no-repeat center;}
#body[menu-size="t2"] .btn.left-page-fit {margin-left:19px;width:26px;background:url("../imgs/t2/page_zoom_left_nor.png") no-repeat center;}
#body[menu-size="t2"] .btn.right-page-fit {width:26px;background:url("../imgs/t2/page_zoom_right_nor.png") no-repeat center;}
/* button size */
#body[menu-size="t2"] .btn.bar-size {margin-left:156px;background:url("../imgs/t2/toolbar_size_nor.png") no-repeat center;}
/* full mode */
#body[menu-size="t2"] .btn.full {margin-left:23px;/*%%2022/02/23 margin-right:23px;*/}
#body[menu-size="t2"][full-mode="n"] .btn.full {background:url("../imgs/t2/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t2"][full-mode="y"] .btn.full {background:url("../imgs/t2/toolbar_zoom_out_nor.png") no-repeat center;}
#body[menu-size="t2"][full-mode2="n"] .btn.full {background:url("../imgs/t2/toolbar_zoom_in_nor.png") no-repeat center;}
#body[menu-size="t2"][full-mode2="y"] .btn.full {background:url("../imgs/t2/toolbar_zoom_out_nor.png") no-repeat center;}
/* open, close button */
#body[menu-size="t2"] #bottom_box_open {width:138px;height:43px;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open {background:url("../imgs/t2/toolbar_show_nor.png") no-repeat center;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:hover {background:url("../imgs/t2/toolbar_show_hover.png") no-repeat center;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="y"] #bottom_box_open:active {background:url("../imgs/t2/toolbar_show_press.png") no-repeat center;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open {bottom:46px;background:url("../imgs/t2/toolbar_hide_nor.png") no-repeat center;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:hover {background:url("../imgs/t2/toolbar_hide_hover.png") no-repeat center;}
#body[menu-size="t2"] #bottom_box_wrapper[menu-hide="n"] #bottom_box_open:active {background:url("../imgs/t2/toolbar_hide_press.png") no-repeat center;}
/*********************************************************************/