.icon {display:inline-block;margin:0px;padding:0px;background-repeat:no-repeat;background-position:center;transition:width 0.3s,height 0.3s;-webkit-transition:width 0.3s,height 0.3s;}
.menu-name {display:inline-block;margin:0px;padding:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*.menu-name.down {color:rgba(49,49,49,0.55);}*/
.content-count {display:none;position:absolute;background-color:red;border-radius:50%;color:#ffffff;text-align:center;font-weight:bold;}

div[data-type="dropdown"] {display:inline-block;position:absolute;right:6px;}

ul {position:relative;font-size:18px;color:#313131;overflow:hidden;box-sizing:border-box;}
li {position:relative;background-color:#ffffff;background-repeat:no-repeat;background-position:left top;cursor:pointer;box-sizing:border-box;}
li.over {background-color:#fffae1;}
li.down {background-color:#fffae1;}
li.top-menu {padding:0px;background-color:#2f2f2f;border-top-left-radius:11px;cursor:default;}
li.top-menu > div {cursor:pointer;}
li.top-menu:hover {background-color::#2f2f2f;}

/*.icon.down {opacity:0.55;}*/

#right_box {position:absolute;top:20px;right:0px;height:auto;box-sizing:border-box;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);border-top-left-radius:11px;border-bottom-left-radius:11px;transition:right 0.3s , width 0.3s;z-index:130;}
#right_box .menu-name {position:absolute;top:0px;}
#right_box > ul > li:last-child {border-bottom-left-radius:11px;}
#right_box[menu-hide="n"] {right:0px;}

#sub_menu {transition:height 0.3s;}
#sub_menu.hide {visibility:hidden;height:0px;}
#sub_menu.show {visibility:visible;}
#sub_menu li:not([data-op="group"]):first-child {border-top-left-radius:0px;border-top:solid 1px #d0d0d0;}
#sub_menu li:not([data-op="group"]):last-child {border-bottom-left-radius:0px;border-bottom:solid 1px #d0d0d0;}
#sub_menu li.sub-last:last-child {border-bottom-left-radius:11px;}

/*******************************************************************************/
/* RIGHT BOX CSS START
/*******************************************************************************/

#right_box[menu-hide="n"] .icon-group-mode {display:none;}
    
#right_box[menu-hide="y"] li[data-state="show"] .icon-group-mode {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);transition:transform 0.2s;}
#right_box[menu-hide="y"] li[data-state="hide"] .icon-group-mode {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);transition:transform 0.2s;}
#right_box[menu-hide="n"] li[data-state="show"] div[data-type="dropdown"] {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);transition:transform 0.2s;}
#right_box[menu-hide="n"] li[data-state="hide"] div[data-type="dropdown"] {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);transition:transform 0.2s;}

/*******************************************************************************/
/* t0 start  -25% */
#body[menu-size="t0"] #right_box .top-menu {border-top-left-radius:8px;}
#body[menu-size="t0"] #right_box ul {font-size:12px;}
#body[menu-size="t0"] #right_box li {width:152px;height:34px;}
#body[menu-size="t0"] #sub_menu li {height:34px;line-height:34px;}
#body[menu-size="t0"] #right_box .menu-name {height:34px;line-height:34px;}
#body[menu-size="t0"] #right_box[menu-hide="y"] {right:-118px;}
#body[menu-size="t0"] .icon {width:34px;height:34px;}
#body[menu-size="t0"] .icon.top {background-image:url("../imgs/t0/menu_open_nor.png");}
#body[menu-size="t0"] .icon.top:hover {background-image:url("../imgs/t0/menu_open_hover.png");}
#body[menu-size="t0"] .icon.top:active {background-image:url("../imgs/t0/menu_open_press.png");}
/* open state*/
#body[menu-size="t0"] #right_box[menu-hide="n"] .icon.top {background-image:url("../imgs/t0/menu_close_nor.png");}
#body[menu-size="t0"] #right_box[menu-hide="n"] .icon.top:hover {background-image:url("../imgs/t0/menu_close_hover.png");}
#body[menu-size="t0"] #right_box[menu-hide="n"] .icon.top:active {background-image:url("../imgs/t0/menu_close_press.png");}
/* drop down */
#body[menu-size="t0"] div[data-type="dropdown"] {top:13px;width:7px;height:8px;background:url("../imgs/t0/dropdown_open.png") no-repeat center;}
/* icon mode drop down */
#body[menu-size="t0"] .icon-group-mode {position:absolute;left:25px;bottom:3px;width:7px;height:7px;background:url("../imgs/t0/dropdown_open.png") no-repeat center;}
/* content count */
#body[menu-size="t0"] .content-count {left:2px;top:3px;width:14px;height:14px;font-size:10px;line-height:14px;}
/*******************************************************************************/
/* t1 start */
#body[menu-size="t1"] #right_box ul {font-size:16px;}
#body[menu-size="t1"] #right_box li {width:200px;height:45px;}
#body[menu-size="t1"] #sub_menu li {height:45px;line-height:45px;}
#body[menu-size="t1"] #right_box .menu-name {height:45px;line-height:45px;}
#body[menu-size="t1"] #right_box[menu-hide="y"] {right:-155px;}
#body[menu-size="t1"] .icon {width:45px;height:45px;}
#body[menu-size="t1"] .icon.top {background-image:url("../imgs/t1/menu_open_nor.png");}
#body[menu-size="t1"] .icon.top:hover {background-image:url("../imgs/t1/menu_open_hover.png");}
#body[menu-size="t1"] .icon.top:active {background-image:url("../imgs/t1/menu_open_press.png");}

/* open state*/
#body[menu-size="t1"] #right_box[menu-hide="n"] .icon.top {background-image:url("../imgs/t1/menu_close_nor.png");}
#body[menu-size="t1"] #right_box[menu-hide="n"] .icon.top:hover {background-image:url("../imgs/t1/menu_close_hover.png");}
#body[menu-size="t1"] #right_box[menu-hide="n"] .icon.top:active {background-image:url("../imgs/t1/menu_close_press.png");}
/* drop down */
#body[menu-size="t1"] div[data-type="dropdown"] {top:18px;width:9px;height:9px;background:url("../imgs/t1/dropdown_open.png") no-repeat center;}
/* icon mode drop down */
#body[menu-size="t1"] .icon-group-mode {position:absolute;left:35px;bottom:5px;width:9px;height:9px;background:url("../imgs/t1/dropdown_open.png") no-repeat center;}
/* content count */
#body[menu-size="t1"] .content-count {left:2px;top:4px;width:18px;height:18px;font-size:13px;line-height:18px;}
/*******************************************************************************/
/* t0 start  +25% */
#body[menu-size="t2"] #right_box ul {font-size:20px;}
#body[menu-size="t2"] #right_box li {width:240px;height:56px;}
#body[menu-size="t2"] #sub_menu li {height:56px;line-height:56px;}
#body[menu-size="t2"] #right_box .menu-name {height:56px;line-height:56px;}
#body[menu-size="t2"] #right_box[menu-hide="y"] {right:-184px;}
#body[menu-size="t2"] .icon {width:56px;height:56px;}
#body[menu-size="t2"] .icon.top {background-image:url("../imgs/t2/menu_open_nor.png");}
#body[menu-size="t2"] .icon.top:hover {background-image:url("../imgs/t2/menu_open_hover.png");}
#body[menu-size="t2"] .icon.top:active {background-image:url("../imgs/t2/menu_open_press.png");}
/* open state*/
#body[menu-size="t2"] #right_box[menu-hide="n"] .icon.top {background-image:url("../imgs/t2/menu_close_nor.png");}
#body[menu-size="t2"] #right_box[menu-hide="n"] .icon.top:hover {background-image:url("../imgs/t2/menu_close_hover.png");}
#body[menu-size="t2"] #right_box[menu-hide="n"] .icon.top:active {background-image:url("../imgs/t2/menu_close_press.png");}
/* drop down */
#body[menu-size="t2"] div[data-type="dropdown"] {top:13px;width:11px;height:22px;background:url("../imgs/t2/dropdown_open.png") no-repeat center;}
/* icon mode drop down */
#body[menu-size="t2"] .icon-group-mode {position:absolute;left:40px;bottom:7px;width:11px;height:11px;background:url("../imgs/t2/dropdown_open.png") no-repeat center;}
/* content count */
#body[menu-size="t2"] .content-count {left:2px;top:5px;width:22px;height:22px;font-size:16px;line-height:22px;}

.book-page-navi {position:absolute;background-position:center;background-repeat:no-repeat;background-size:contain;}
.book-page-navi.img-middle {z-index:110;opacity:0.5;cursor:default;} 
.book-page-navi.img-middle[data-op] {z-index:110;opacity:1;cursor:pointer;}
.book-page-navi.img-bottom {z-index:110;opacity:0;cursor:default;} 
.book-page-navi.img-bottom[data-op] {z-index:110;opacity:1;cursor:pointer;}
.book-page-navi.img-middle.left {background-image:url('../../../book/img/book.pageNavi.middle/left.png');}
.book-page-navi.img-middle.left[data-op]:hover {background-image:url('../../../book/img/book.pageNavi.middle/left_hover.png');}
.book-page-navi.img-middle.right {background-image:url('../../../book/img/book.pageNavi.middle/right.png');}
.book-page-navi.img-middle.right[data-op]:hover {background-image:url('../../../book/img/book.pageNavi.middle/right_hover.png');}
.book-page-navi.img-bottom.left {background-image:url('../../../book/img/book.pageNavi.bottom/left.png');}
.book-page-navi.img-bottom.left[data-op]:hover {background-image:url('../../../book/img/book.pageNavi.bottom/left_hover.png');}
.book-page-navi.img-bottom.right {background-image:url('../../../book/img/book.pageNavi.bottom/right.png');}
.book-page-navi.img-bottom.right[data-op]:hover {background-image:url('../../../book/img/book.pageNavi.bottom/right_hover.png');}