/*!
 * 
 * Product name/Version: SynapDocumentViewer 24.10.0
 * 
 */
.marker-header-border {
    display: table-cell
}

.marker-loading {
    cursor: wait
}

.marker-header {
    position: fixed;
    top: 45px;
    height: 45px;
    width: 100%;
    background-color: #fbfbfb;
    border-bottom: 1px solid #a7a7a7;
    z-index: 50;
    font-size: 0;
    display: block
}

.marker-right-menu {
    position: absolute;
    top: 0;
    right: 15px
}

.select-annotation-btn__img {
    background-position: -57px -358px
}

.annotation-list-btn__img,
.select-annotation-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.annotation-list-btn__img {
    background-position: -117px -317px
}

.annotation-list__search-btn__img {
    background-position: -365px -342px;
    height: 12px
}

.annotation-list__search-btn__img,
.marker-square-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px
}

.marker-square-btn__img {
    background-position: -114px -358px;
    height: 16px
}

.marker-freetext-btn__img {
    background-position: -215px -202px
}

.marker-freetext-btn__img,
.marker-pencil-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 18px;
    height: 18px
}

.marker-pencil-btn__img {
    background-position: -158px -295px
}

.marker-memo-btn__img,
.marker-memo-btn__img--list {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -365px -228px;
    width: 16px;
    height: 16px
}

.marker-memo-btn__img--list--set {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -365px -266px;
    width: 16px;
    height: 16px
}

.marker-hand-scroll-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -332px -268px;
    width: 17px;
    height: 22px
}

.marker-undo-btn__img {
    background-position: -365px -171px
}

.marker-undo-btn__img,
.marker-undo-btn__img--off {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.marker-undo-btn__img--off {
    background-position: -365px -190px;
    cursor: auto
}

.marker-redo-btn__img {
    background-position: -365px -133px
}

.marker-redo-btn__img,
.marker-redo-btn__img--off {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.marker-redo-btn__img--off {
    background-position: -365px -152px;
    cursor: auto
}

.marker-eraser-btn__img {
    background-position: -365px -95px
}

.marker-eraser-btn__img,
.marker-line-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.marker-line-btn__img {
    background-position: -365px 0
}

.marker-circle-btn__img {
    background-position: 0 -317px;
    width: 17px;
    height: 17px
}

.marker-arrowline-btn__img,
.marker-circle-btn__img {
    background-image: url(../images/sprite-web.56dec71.png)
}

.marker-arrowline-btn__img {
    background-position: -221px -295px;
    width: 19px;
    height: 16px
}

.prop-submenu {
    position: absolute;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
    background-color: #fbfbfb;
    padding: 5px;
    width: 269px;
    height: 282px;
    font-size: 0;
    z-index: 40;
    box-sizing: border-box
}

.prop-submenu--hide {
    display: none
}

.prop-submenu__tab {
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px;
    height: 21px;
    cursor: pointer
}

.prop-submenu__tab__btn {
    background: #f0f0f0;
    font-size: 10pt;
    overflow: hidden;
    width: 100%;
    margin: 0 1.5px;
    border: none;
    cursor: pointer;
    color: #333
}

.prop-submenu__left-align {
    float: left;
    margin-left: 0
}

.prop-submenu__text-style-btn {
    background: #f0f0f0;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 3px;
    border: none;
    cursor: pointer
}

.prop-submenu .prop-active {
    background: #c3c6cb
}

.prop-submenu__font {
    font-size: 10pt;
    color: #333
}

.prop-submenu__right-align {
    float: right;
    margin-right: 0
}

.prop-submenu__block-u {
    margin: 9px 2px 7px
}

.prop-submenu__color-name {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin: 0 2px
}

.prop-submenu-color__radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 12px
}

.prop-submenu-color__radio-fill {
    margin-right: -4px
}

.prop-submenu-color__radio__rect-border {
    width: 14px;
    height: 14px;
    border: 1px solid #c4c4c4;
    background-color: red
}

.prop-submenu-color__radio__rect-border__inner {
    position: relative;
    width: 6px;
    height: 6px;
    background-color: #fbfbfb;
    top: -12px;
    left: 4px;
    border: 1px solid #c4c4c4
}

.prop-submenu-color__radio__rect-fill {
    width: 14px;
    height: 14px;
    border: 1px solid #bfbfbf
}

.prop-submenu-color__radio--select {
    background-color: #e1e1e1
}

.prop-submenu-color__block {
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    width: 20.5px;
    height: 20px;
    margin-left: 1px;
    margin-bottom: 1px;
    background-position: 50%;
    background-repeat: no-repeat
}

.prop-submenu-color--hover,
.prop-submenu-color--selected {
    border: 1px solid #333
}

.prop-submenu-color--selected-dark {
    background-image: url(../images/marker_color_selected_icon.ce0cd9d.svg)
}

.prop-submenu-color--selected-bright {
    background-image: url(../images/marker_color_selected_w_icon.ad87c61.svg)
}

.prop-submenu-slider__input {
    -webkit-appearance: none;
    width: 206px;
    height: 3px;
    background: #e1e1e1;
    border-radius: 100px;
    margin: 6px 0 6px 6px
}

.prop-submenu-slider__input-ms {
    height: 16px;
    background: transparent;
    padding: 0;
    margin: 0
}

.prop-submenu-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid #333;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    background: #fbfbfb
}

.prop-submenu-slider__input::-moz-range-thumb {
    -webkit-appearance: none;
    border: 3px solid #333;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background: #fbfbfb
}

.prop-submenu-slider__input::-ms-thumb {
    -webkit-appearance: none;
    border: 3px solid #333;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background: #fff
}

.prop-submenu-slider__input::-ms-track {
    width: 100%;
    height: 3px;
    background: transparent;
    border-color: transparent;
    border-radius: 100px;
    color: transparent
}

.prop-submenu-slider__input::-ms-fill-lower {
    background: #333;
    border-radius: 100px
}

.prop-submenu-slider__input::-ms-fill-upper {
    background: #e1e1e1;
    border-radius: 100px
}

.prop-submenu__prop-border {
    width: 100%;
    height: 1px;
    background-color: #e1e1e1;
    margin-top: 14px
}

.markerlayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    overflow: hidden
}

.markerlayer--presentation {
    display: none
}

.markerlayer-cell {
    right: auto;
    bottom: auto
}

.marker-scale {
    transform-origin: 0 0;
    position: absolute;
    pointer-events: none
}

.marker-scale--pointer {
    pointer-events: stroke
}

.marker-scale .active {
    border: 2px dashed #f90;
    margin: -2px 0 0 -2px;
    z-index: 5
}

.marker-scale .active+textarea {
    z-index: 6
}

.marker-section,
.tmp-marker-svg {
    position: absolute
}

.tmp-marker-svg {
    left: 0;
    top: 0;
    z-index: 100;
    touch-action: none
}

.tmp-marker-path {
    stroke-linejoin: round;
    stroke-linecap: round
}

.marker-svg {
    position: absolute;
    border: none
}

.marker-svg__path {
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none
}

.marker-menu {
    display: inline-block;
    margin-left: 20px
}

.marker-menu--hover {
    background-color: #eee
}

.marker-menu--select {
    background-color: #e1e1e1
}

.marker-menu__shapes {
    margin: 0 4px 0 0
}

.marker-menu__more-shapes,
.marker-menu__shapes {
    display: inline-block;
    vertical-align: middle;
    text-align: center
}

.marker-menu__more-shapes {
    margin: 0
}

.marker-menu__more-shapes:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #333
}

.marker-menu__sub-shapes {
    position: absolute;
    background-color: #fbfbfb;
    left: 241px;
    border: 1px solid #a7a7a7;
    width: 160px;
    height: 45px;
    position: fixed
}

.marker-menu__shape-block {
    position: absolute;
    top: 0;
    width: 40px;
    height: 45px
}

.more-prop:after {
    content: "";
    width: 0;
    height: 0;
    border-right: 6px solid #a7a7a7;
    border-top: 6px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0
}

.disableEvent {
    pointer-events: none
}

.annotation-list__search {
    margin: 20px 0;
    text-align: center
}

.annotation-list__search--result {
    margin-bottom: 10px
}

.annotation-list__search__input {
    box-sizing: border-box;
    border: 1px solid #121212;
    width: 141px;
    height: 30px;
    padding: 6px 9px;
    font-size: 12px;
    vertical-align: bottom;
    -webkit-appearance: none;
    -webkit-border-radius: 0
}

.annotation-list__search-btn {
    display: inline-block;
    box-sizing: border-box;
    width: 40px;
    height: 30px;
    padding: 9px 12px 9.66px;
    vertical-align: bottom;
    background-color: #121212
}

.annotation-list__search-result {
    font-size: 14px;
    color: #fff;
    background-color: #121212;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    margin-bottom: 5px
}

body,
html {
    font-family: Noto Sans, Helvetica, AppleSDGothicNeo, Dotum, sans-serif;
    height: 100%;
    margin: 0
}

body {
    background-color: #333
}

:root {
    --page-width: 1;
    --page-height: 1
}

:focus,
input:focus:not([type=range]):not([type=checkbox]) {
    outline: none
}

:focus:is(:focus-visible) {
    outline: 2px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color
}

textarea:focus {
    outline: none !important
}

body.useKeyBoard :focus:is([tabindex]) {
    outline: 2px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color
}

img {
    border: 0
}

.tb {
    display: table
}

.tc {
    display: table-cell
}

.wrap {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: transparent;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 100px;
    outline: none;
    z-index: 0
}

.wrap--cell,
.wrap--ios {
    position: absolute
}

.wrap--ios {
    overflow: visible
}

.wrap__header,
.wrap__header__container--img {
    position: fixed;
    background-color: #202020;
    border-bottom: 1px solid #121212;
    width: 100%;
    height: 45px;
    display: block;
    z-index: 51
}

.wrap__header--hide,
.wrap__header--presentation {
    display: none
}

.wrap__logo {
    margin-left: 20px;
    margin-right: 30px;
    margin-top: 17px;
    float: left;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -109px -280px;
    width: 92px;
    height: 12px
}

.wrap__title {
    max-width: 24%;
    color: #9a9a9a;
    font-size: 12px;
    margin-right: 15px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 45px;
    vertical-align: top;
    display: inline-block
}

.wrap__title--cell {
    max-width: 45%
}

.wrap__container {
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    background-color: #333;
    overflow-y: auto;
    overflow-x: hidden
}

.wrap__container--cell {
    bottom: 30px
}

.wrap__container--presentation {
    top: 0;
    bottom: 0
}

.wrap__container--option-on {
    top: 0
}

.wrap__container--ios {
    overflow-x: visible;
    overflow-y: visible
}

.wrap__panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    max-width: 600px;
    border-right: 1px solid #121212;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 40
}

.wrap__panel--on {
    width: 200px;
    display: block
}

.wrap__panel--show {
    display: block
}

.wrap__panel--hide {
    display: none
}

.wrap__panel--marker-mode {
    visibility: hidden;
    width: 0
}

.wrap__panel--presentation {
    visibility: hidden
}

.wrap__panel--ios {
    position: fixed
}

.wrap__panel__header {
    height: 50px;
    background-color: #202020;
    display: flex
}

.wrap__panel__header__tabs {
    margin: 8px 16px;
    flex: 1;
    border-radius: 4px;
    border: 1px solid #7e8081
}

.wrap .panel-tab-btn,
.wrap__panel__header__tabs {
    display: flex;
    align-items: center;
    justify-content: center
}

.wrap .panel-tab-btn {
    cursor: pointer;
    height: 34px;
    flex-grow: 1
}

.wrap .panel-tab-btn:not(:last-child) {
    border-right: 1px solid #7e8081
}

.wrap .panel-tab-icon {
    display: block;
    height: 18px;
    width: 18px
}

.wrap__attachment {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    width: 0;
    max-width: 600px;
    border-right: 1px solid #121212;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 40
}

.wrap__attachment--on {
    width: 200px;
    display: block
}

.wrap__attachment--show {
    display: block
}

.wrap__attachment--presentation {
    visibility: hidden
}

.wrap__attachment--ios {
    position: fixed
}

.wrap__attachment--marker-mode {
    visibility: hidden;
    width: 0
}

.wrap__thumbnail {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    max-width: 600px;
    border-right: 1px solid #121212;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 40
}

.wrap__thumbnail--on {
    width: 200px;
    display: block
}

.wrap__thumbnail--show {
    display: block
}

.wrap__thumbnail--presentation {
    visibility: hidden
}

.wrap__thumbnail--ios {
    position: fixed
}

.wrap__thumbnail--marker-mode {
    visibility: hidden;
    width: 0
}

.wrap__thumbnail_2025 {
    top: 50px
}

.wrap__annotation-list {
    position: absolute;
    top: 45px;
    left: 0;
    bottom: 0;
    width: 222px;
    overflow: hidden;
    background-color: rgba(32, 32, 32, .8);
    overflow-y: auto;
    z-index: 40
}

.wrap__annotation-list__wrap {
    background-color: #b7b7b7
}

.wrap__annotation-list--ios {
    position: fixed
}

.wrap .annot-page-btn {
    float: right;
    margin: 4.5px 0
}

.wrap .annot-page-totalNum {
    display: inline-block;
    width: 50px;
    height: 25px;
    background-color: #333;
    border-radius: 50%;
    text-align: center;
    margin-left: 12px
}

.wrap .annot-page-nav {
    display: table-cell;
    width: 222px;
    vertical-align: middle;
    padding: 10px 12px 10px 20px;
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    font-weight: 700;
    background-color: #121212;
    opacity: .8;
    cursor: pointer
}

.wrap .annot-page-ul {
    font-size: 12px;
    line-height: 17px;
    list-style: none;
    padding-left: 0;
    margin: 20px 0
}

.wrap .annot-page-li {
    width: 180px;
    height: 70px;
    border-radius: 2px;
    background-color: #fbfbfb;
    padding: 10px 0;
    margin: 4px 20px;
    cursor: pointer
}

.wrap .annot-page-li-active {
    outline: 2px dashed #f90;
    background-color: #fff
}

.wrap .annot-page-li-info {
    display: inline-block
}

.wrap .annot-page-li-info-left {
    margin-left: 18px
}

.wrap .annot-page-li-info-color {
    width: 8px;
    height: 16px
}

.wrap .annot-page-li-info-type {
    padding-left: 10px
}

.wrap .annot-page-li-info-authorDiv {
    margin-top: 10px;
    margin-bottom: 10px
}

.wrap .annot-page-li-info-author {
    vertical-align: middle
}

.wrap .annot-page-li-info-authorEditBtn {
    float: left;
    margin: 1px 4px 1px 0
}

.wrap .annot-page-li-info-authorInput {
    width: 83px;
    height: 10px;
    font-size: inherit;
    padding: 2px
}

.wrap .annot-page-li-info-authorInput--readonly {
    border: none;
    padding: 4px;
    pointer-events: none;
    text-overflow: ellipsis
}

.wrap .annot-page-li-btnGroup {
    float: right
}

.wrap .annot-page-li-btnGroup-btn {
    padding: 9.5px 14.5px;
    width: 16px;
    height: 16px
}

.wrap .attach-page-btn {
    float: right;
    margin: 4.5px 0
}

.wrap .attach-page-totalNum {
    display: inline-block;
    width: 50px;
    height: 25px;
    background-color: #333;
    border-radius: 50%;
    text-align: center;
    margin-left: 12px;
    margin-right: 42px
}

.wrap .attach-page-nav {
    cursor: pointer;
    white-space: nowrap
}

.wrap .attach-page-nav,
.wrap .attach-page-none {
    display: table-cell;
    width: 520px;
    vertical-align: middle;
    padding: 10px 12px 10px 20px;
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    font-weight: 700;
    background-color: #121212;
    opacity: .8;
    overflow: hidden
}

.wrap .attach-page-none {
    text-align: center
}

.wrap .attach-page-ul {
    font-size: 12px;
    line-height: 17px;
    list-style: none;
    padding-left: 0;
    margin: 20px 0
}

.wrap .attach-page-li {
    border-radius: 2px;
    background-color: #fbfbfb;
    padding: 8px 0;
    margin: 10px 20px;
    cursor: pointer
}

.wrap .attach-page-li-active {
    outline: 2px dashed #f90;
    background-color: #fff
}

.wrap .attach-page-li-info {
    display: flex;
    width: 100%;
    overflow: hidden
}

.wrap .attach-page-li-info-icon {
    min-width: 16px;
    margin-left: 10px
}

.wrap .attach-page-li-info-title {
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.wrap__contents {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: #333
}

.wrap__contents--bgcolor-light {
    background-color: #bfbfbf
}

.wrap__contents--cell-fullscreen,
.wrap__contents--page-fullscreen {
    background-color: #000 !important;
    top: 0 !important
}

.wrap__contents--panel-on {
    left: 200px
}

.wrap__contents--presentation {
    left: 0 !important
}

.wrap__contents--ios {
    overflow: visible
}

.wrap__contents--marker-mode {
    top: 45px;
    left: 0
}

.wrap__contents--annot-on {
    left: 222px
}

.wrap__contents .sheet-dialog {
    position: fixed;
    left: 50%;
    top: 10%;
    -ms-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%)
}

.wrap__menu {
    position: static;
    float: right;
    margin-right: 15px
}

.wrap__index {
    margin-top: 14px
}

.wrap__panelbar {
    position: fixed;
    width: 24px;
    height: 57px;
    top: 47%;
    cursor: w-resize;
    z-index: 40
}

.wrap__panelbar--presentation {
    display: none !important
}

.wrap__panelbar--on {
    left: 200px
}

.wrap__panelbar--marker-mode {
    display: none !important
}

.wrap__footer {
    display: none;
    position: absolute;
    background-color: #202020;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    width: 100%;
    border-top: 1px solid #121212;
    z-index: 20
}

.wrap__footer--cell {
    display: inline
}

.wrap__footer--presentation {
    display: none
}

.wrap__footer--ios {
    position: fixed
}

.wrap__innerWrap {
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

.page {
    font-size: 12px;
    color: #fff;
    height: 45px;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -30px
}

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

.page input[type=number] {
    -moz-appearance: textfield
}

.page__input {
    font-size: 12px;
    color: #fff;
    height: 30px;
    background-color: #333;
    border: 1px solid #121212;
    text-align: right;
    width: 24px;
    padding: 0 5px;
    display: inline-block
}

.page__div {
    display: inline-block;
    height: 45px;
    line-height: 45px
}

.page__select-arrow {
    display: none
}

.page__total-page:before {
    content: "/ "
}

.page-content {
    display: none;
    z-index: 20
}

.print-iframe {
    visibility: hidden;
    height: 0;
    width: 0;
    border: none
}

.page__input-wrapper {
    display: inline-block;
    vertical-align: middle
}

.menu__block {
    display: table-cell;
    width: 32px;
    height: 45px;
    text-align: center;
    vertical-align: middle;
    line-height: 0;
    cursor: pointer
}

.menu__img {
    display: inline-block
}

.menu__block--deactivate {
    opacity: .25;
    cursor: default
}

.menu__block--deactivate a:-webkit-any-link {
    cursor: default
}

.marker-menu__block {
    display: table-cell;
    width: 40px;
    height: 45px;
    text-align: center;
    vertical-align: middle;
    line-height: 0;
    cursor: pointer
}

.marker-menu__img {
    display: inline-block
}

.more-arrow,
.tablist-popup__arrow {
    display: block;
    position: absolute;
    margin: 0;
    top: 27px;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 6px solid #333;
    z-index: 30
}

.more-arrow__bolder,
.tablist-popup__arrow-bolder {
    display: block;
    position: absolute;
    margin: 0;
    top: 25px;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 8px solid #202020
}

.header-border {
    display: table-cell
}

.header-tablist,
.hide,
.mobile {
    display: none
}

.fullscreen-hidden {
    visibility: hidden
}

.cell {
    display: none !important
}

.cell__div {
    position: absolute;
    display: inline-block
}

.header-title-icon {
    display: inline-block;
    height: 40px
}

.header-title-icon__img {
    display: inline-block;
    margin-bottom: 12px;
    margin-top: 12px
}

.panelbar--touch-expand:after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    bottom: -40px
}

.thumb {
    position: relative;
    display: inline-block;
    vertical-align: top
}

.thumb__span {
    margin-left: 35px;
    font-size: 12px;
    line-height: 1.15;
    color: #fff
}

.thumb__div {
    border: 4px solid transparent;
    margin-bottom: 14px;
    opacity: .75
}

.thumb__div:hover {
    border: 4px solid #666;
    box-shadow: 0 0 10px #000;
    border-radius: 2px;
    opacity: 1
}

.thumb__iframe {
    overflow: hidden
}

.thumb__iframe,
.thumb__img {
    width: 114px;
    border: 1px solid #121212;
    position: relative;
    z-index: 20
}

.thumb__img {
    height: auto;
    height: calc(114/var(--page-width)*var(--page-height)*1px)
}

.thumb-area {
    margin-left: 30px;
    margin-top: 1px;
    line-height: 0
}

.thumb-slide {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50%
}

.thumb-slide-alpha {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 21
}

.thumb__focus {
    border: 4px solid #666;
    box-shadow: 0 0 10px #000;
    border-radius: 2px;
    opacity: 1
}

.thumb--nohover {
    border: 4px solid transparent !important;
    box-shadow: none !important;
    opacity: .75 !important;
    outline: none !important
}

.annotationlayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    line-height: 1;
    margin: auto;
    z-index: 15
}

.annotationlayer--hide {
    visibility: hidden
}

.annotationlayer .control-point {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #f90;
    background-color: #fff;
    z-index: 7
}

.annotationlayer-cell {
    right: auto;
    bottom: auto
}

.link {
    cursor: pointer;
    position: absolute
}

.link--hide {
    display: none
}

.text {
    color: transparent;
    position: absolute;
    white-space: pre;
    line-height: 1;
    cursor: text;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -webkit-user-select: text;
    user-select: text
}

.text::-moz-selection {
    background-color: rgba(51, 187, 211, .3)
}

.text::selection {
    background-color: rgba(51, 187, 211, .3)
}

.text--highlight {
    opacity: .3;
    background-color: #f90
}

.text--current {
    opacity: .6;
    background-color: #f90
}

.text--hide {
    background: transparent
}

.text--erase-mode {
    cursor: inherit
}

.text--disable-copy,
.text--erase-mode {
    -webkit-user-select: none;
    user-select: none
}

.text--disable-copy {
    cursor: auto
}

.controlbar {
    display: none;
    position: fixed;
    padding: 0 7px;
    background-color: #202020;
    opacity: .6;
    border: 1px solid #3f3f3f;
    border-radius: 2px;
    bottom: 60px;
    z-index: 51
}

.controlbar__block,
.controlbar__end-block {
    margin-top: 2px;
    margin-right: 2px;
    width: 40px;
    height: 36px;
    float: left;
    opacity: .25
}

.controlbar__end-block {
    margin-right: 0
}

.controlbar__seperator {
    width: 3px;
    height: 40px;
    float: left;
    border-right: 1px solid #3f3f3f;
    margin-left: 1px;
    margin-right: 2px
}

.controlbar--enable {
    opacity: .9;
    cursor: pointer
}

.controlbar--hide {
    display: none
}

.controlbar:hover {
    opacity: .9
}

.marker-delete-btn__img {
    background-position: -365px -19px
}

.marker-delete-btn__img,
.marker-delete-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.marker-delete-btn__img--on {
    background-position: -365px -38px
}

.annotation-close-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -136px -317px;
    width: 16px;
    height: 16px
}

.color-type1-btn:after {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0%25' y1='100%25' x2='100%25' y2='0%25' stroke='red' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    width: 100%;
    height: 100%;
    display: block
}

.color-type1-btn--disabled {
    opacity: .2
}

.color-type24-btn {
    border: 1px solid #e5e5e5
}

.cursor-ie-icon {
    cursor: crosshair
}

.cursor-eraser-icon {
    cursor: crosshair;
    cursor: url(../images/cursor_eraser_icon.0e06998.png) 8 8, auto
}

.cursor-hand-icon {
    cursor: auto;
    cursor: grabbing
}

.export-pdf-btn__img {
    background-position: -209px -337px
}

.export-pdf-btn__img,
.export-pdf-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.export-pdf-btn__img--on {
    background-position: -228px -337px
}

.server-pdf-btn__img {
    background-position: -19px -337px
}

.server-pdf-btn__img,
.server-pdf-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 18px
}

.server-pdf-btn__img--on {
    background-position: 0 -337px
}

.border-margin {
    background-color: #121212;
    width: 2px;
    height: 45px;
    margin: 0 8px
}

.marker-border {
    background-color: #dfdfdf;
    width: 1px;
    height: 45px;
    margin: 0 15px
}

.marker-btn__img {
    background-position: -258px -241px
}

.marker-btn__img,
.marker-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 18px;
    height: 18px
}

.marker-btn__img--on {
    background-position: -137px -295px
}

.sns-btn__img {
    background-position: -76px -358px
}

.sns-btn__img,
.sns-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.sns-btn__img--on {
    background-position: -95px -358px
}

.info-btn__img {
    background-position: -285px -337px
}

.info-btn__img,
.info-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.info-btn__img--on {
    background-position: -304px -337px
}

.tts-btn__img {
    background-position: -171px -358px
}

.tts-btn__img,
.tts-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.tts-btn__img--on {
    background-position: -190px -358px
}

.braille-btn__img {
    background-position: -332px -199px
}

.braille-btn__img,
.braille-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 20px;
    height: 20px
}

.braille-btn__img--on {
    background-position: -332px -222px
}

.panel-btn__img {
    background-position: -243px -295px
}

.panel-btn__img,
.panel-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 17px;
    height: 16px
}

.panel-btn__img--on {
    background-position: -263px -295px
}

.search-btn__img {
    background-position: -20px -317px
}

.search-btn__img,
.search-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 17px;
    height: 17px
}

.search-btn__img--on {
    background-position: -40px -317px
}

.print-btn__img {
    background-position: -283px -295px
}

.print-btn__img,
.print-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 17px;
    height: 16px
}

.print-btn__img--on {
    background-position: -303px -295px
}

.download-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -200px -295px;
    width: 18px;
    height: 17px
}

.backgroundcolor-btn__img {
    background-position: -174px -317px
}

.backgroundcolor-btn__img,
.desktop-fullscreen-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.desktop-fullscreen-btn__img {
    background-position: -247px -337px
}

.tablet-window-close-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -332px -174px;
    width: 22px;
    height: 22px
}

.web-panelbar__img {
    background-position: -289px -117px;
    height: 57px
}

.panel-thumbnail-tab-btn__img,
.web-panelbar__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 24px
}

.panel-thumbnail-tab-btn__img {
    background-position: -332px -120px;
    height: 24px
}

.panel-thumbnail-tab-btn__img--on {
    background-position: -332px -147px
}

.panel-attachment-tab-btn__img,
.panel-thumbnail-tab-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 24px;
    height: 24px
}

.panel-attachment-tab-btn__img {
    background-position: -332px -66px
}

.panel-attachment-tab-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -332px -93px;
    width: 24px;
    height: 24px
}

.controlbar-hand-scroll {
    background-position: -203px -156px
}

.controlbar-hand-scroll,
.controlbar-hand-scroll--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-hand-scroll--hover {
    background-position: -203px -117px
}

.controlbar-prev {
    background-position: -246px 0
}

.controlbar-prev,
.controlbar-prev--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-prev--hover {
    background-position: -172px -202px
}

.controlbar-next {
    background-position: -86px -241px
}

.controlbar-next,
.controlbar-next--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-next--hover {
    background-position: -43px -241px
}

.controlbar-zoomout {
    background-position: -289px -78px
}

.controlbar-zoomout,
.controlbar-zoomout--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-zoomout--hover {
    background-position: -289px -39px
}

.controlbar-zoomin {
    background-position: -289px 0
}

.controlbar-zoomin,
.controlbar-zoomin--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-zoomin--hover {
    background-position: -215px -241px
}

.controlbar-originsize {
    background-position: -246px -78px
}

.controlbar-originsize,
.controlbar-originsize--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-originsize--hover {
    background-position: -246px -39px
}

.controlbar-pagewidthfit {
    background-position: 0 -241px
}

.controlbar-pagewidthfit,
.controlbar-pagewidthfit--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-pagewidthfit--hover {
    background-position: -246px -195px
}

.controlbar-pagefit {
    background-position: -246px -156px
}

.controlbar-pagefit,
.controlbar-pagefit--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-pagefit--hover {
    background-position: -246px -117px
}

.controlbar-rotate {
    background-position: -172px -241px
}

.controlbar-rotate,
.controlbar-rotate--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-rotate--hover {
    background-position: -129px -241px
}

.controlbar-first {
    background-position: -129px -202px
}

.controlbar-first,
.controlbar-first--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-first--hover {
    background-position: -86px -202px
}

.controlbar-end {
    background-position: -43px -202px
}

.controlbar-end,
.controlbar-end--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.controlbar-end--hover {
    background-position: 0 -202px
}

.laser-btn__img {
    background-position: -323px -337px
}

.laser-btn__img,
.laser-btn__img--on {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.laser-btn__img--on {
    background-position: -342px -337px
}

.laser {
    width: 30px;
    height: 30px;
    background-color: hsla(0, 0%, 100%, .1)
}

.laser,
.laser2 {
    position: absolute;
    border-radius: 30px
}

.laser2 {
    width: 28px;
    height: 28px;
    background-color: rgba(255, 0, 0, .2);
    left: 1px;
    top: 1px
}

.laser3 {
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: rgba(255, 0, 0, .5);
    border-radius: 30px;
    left: 3px;
    top: 3px
}

.cursor-laser-icon {
    cursor: crosshair;
    cursor: url(../images/cursor_laser_icon.c48c9b2.png) 15 15, auto
}

.contents-page {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    font-size: 0;
    text-align: center
}

.contents-page:focus {
    outline: 0
}

.contents-page--start {
    margin-top: 0 !important
}

.contents-page--end {
    margin-bottom: 0 !important
}

.contents-page__img {
    position: static;
    z-index: 10
}

.contents-page__img--error {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    z-index: 20
}

.dialog {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    border-radius: 2px;
    -webkit-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    -moz-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    font-size: 12px;
    outline: none
}

.dialog,
.dialog__msg {
    box-sizing: border-box
}

.dialog__msg {
    padding: 20px;
    word-break: break-word
}

.dialog__btn,
.dialog__msg {
    text-align: center
}

.dialog__btn--answer,
.dialog__btn--single {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px
}

.dialog__btn .btn {
    border: 1px solid #333;
    padding: 0 18px;
    min-height: 38px;
    line-height: 38px;
    display: inline-block;
    cursor: pointer;
    min-width: 80px;
    box-sizing: border-box;
    text-align: center
}

.dialog__btn .btn--answer-left,
.dialog__btn .btn--answer-white {
    margin-right: 12px
}

.dialog__btn .btn--white {
    background-color: #fff;
    color: #333
}

.dialog__btn .btn--black {
    background-color: #333;
    color: #fff
}

.dialog__pwd-input {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px
}

.dialog__pwd-input .pwd-input {
    box-sizing: border-box;
    padding: 0 10px;
    width: 324px;
    height: 30px;
    background-color: #f8f8f8;
    border: 1px solid #e6e6e6;
    cursor: text
}

.dialog__pwd-input .pwd-input--warn {
    border: 1px solid red
}

.dialog__pwd-input .pwd-warn-msg {
    color: red;
    margin-top: 6px;
    text-align: center
}

.dialog__input {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    white-space: nowrap
}

.dialog__input .input {
    width: 300px;
    height: 30px;
    color: #666;
    background-color: #f8f8f8;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    padding: 0 10px
}

.dialog__input .input--warn {
    border: 1px solid red
}

.dialog__input .input--warn::placeholder {
    color: red
}

.dialog__checkbox {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    white-space: nowrap
}

.dialog__checkbox .input {
    width: 300px;
    height: 30px;
    padding: 0 10px;
    vertical-align: -2px
}

.dialog__url {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px
}

.dialog__url .url {
    width: 100%;
    white-space: nowrap
}

.dialog__url .url__text {
    width: 229px;
    color: #666;
    height: 25px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    white-space: nowrap;
    overflow: hidden
}

.dialog__url .url__btn,
.dialog__url .url__text {
    display: inline-block;
    padding: 5px 10px;
    box-sizing: border-box;
    vertical-align: middle
}

.dialog__url .url__btn {
    background-color: #333;
    color: #fff;
    cursor: pointer
}

.dialog__sns {
    padding-left: 20px;
    padding-bottom: 20px
}

.dialog__sns .sns {
    line-height: 0
}

.dialog__sns .sns__btn {
    display: inline-block;
    font-size: 0;
    cursor: pointer
}

.dialog__sns .sns__btn:not(:first-child) {
    margin-left: 10px
}

.dialog__sns .sns__btn--facebook {
    background-position: -289px -243px
}

.dialog__sns .sns__btn--facebook,
.dialog__sns .sns__btn--X {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 30px;
    height: 30px
}

.dialog__sns .sns__btn--X {
    background-position: -332px -33px
}

.dialog__sns .sns__btn--band {
    background-position: -289px -210px
}

.dialog__sns .sns__btn--band,
.dialog__sns .sns__btn--kakaotalk {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 30px;
    height: 30px
}

.dialog__sns .sns__btn--kakaotalk {
    background-position: -332px 0
}

.dialog__tts .tts {
    line-height: 0
}

.dialog__tts .tts__btn {
    display: inline-block;
    font-size: 0;
    cursor: pointer;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto
}

.dialog__tts .tts__btn--play {
    background-image: url(../images/tts_play.e167239.png)
}

.dialog__tts .tts__btn--pause {
    background-image: url(../images/tts_pause.188fec6.png)
}

.dialog__tts .tts__btn--stop {
    background-image: url(../images/tts_stop.0ebe4f3.png)
}

.dialog__tts .tts__btn--next_para {
    background-image: url(../images/tts_next_para.a19365c.png)
}

.dialog__tts .tts__btn--prev_para {
    background-image: url(../images/tts_prev_para.e510add.png)
}

.dialog__tts .tts__btn--rate_up {
    background-image: url(../images/tts_rate_up.0a1b8c5.png)
}

.dialog__tts .tts__btn--rate_down {
    background-image: url(../images/tts_rate_down.25d026b.png)
}

.dialog__tts .tts__btn--close {
    background-image: url(../images/tts_close.fbd247e.png)
}

.dialog__info-logo {
    padding: 20px;
    text-align: center
}

.dialog__info-logo .info-logo {
    background-position: -72px -295px;
    width: 62px
}

.dialog__info-logo .info-logo,
.dialog__info-logo .info-logo-en {
    background-image: url(../images/sprite-web.56dec71.png);
    height: 19px;
    display: inline-block
}

.dialog__info-logo .info-logo-en {
    background-position: 0 -295px;
    width: 69px
}

.dialog__info-content {
    padding: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6
}

.dialog__info-content .content__key-value .key-value {
    white-space: nowrap
}

.dialog__info-content .content__key-value .key-value__key-box {
    display: inline-block;
    padding-right: 12px
}

.dialog__info-content .content__key-value .key-value__key-box .key-box__item:not(:first-child) {
    margin-top: 10px
}

.dialog__info-content .content__key-value .key-value__value-box {
    display: inline-block
}

.dialog__info-content .content__key-value .key-value__value-box .value-box__item:not(:first-child) {
    margin-top: 10px
}

.dialog__info-content .content__copyright {
    margin-top: 20px;
    white-space: nowrap
}

.dialog__info-content .metabox {
    width: 273px;
    border: 1px solid #e6e6e6;
    opacity: 1;
    height: 100px;
    overflow: auto;
    margin-top: 20px;
    resize: both
}

.dialog__info-content .metabox .metabox__key-value {
    white-space: nowrap;
    padding-top: 6px
}

.dialog__info-content .metabox .metabox__key-value:last-child {
    padding-bottom: 6px
}

.dialog__info-content .metabox .metabox__key-value .metabox__key-box {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 30%
}

.dialog__info-content .metabox .metabox__key-value .metabox__value-box {
    display: inline-block;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70%
}

@media screen and (max-height:400px) {
    .dialog__info-content .metabox {
        height: 60px;
        margin-top: 10px
    }
}

.non-text-decoration {
    text-decoration: none
}

.modal {
    display: none;
    z-index: 1000;
    box-sizing: content-box;
    width: 100%;
    min-width: 320px;
    height: 100%;
    background-color: rgba(0, 0, 0, .4)
}

.modal,
.modal__dimmed {
    position: fixed;
    left: 0;
    top: 0
}

.modal__dimmed {
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer
}

.modal__dialog {
    position: absolute;
    top: 10%;
    z-index: 2
}

.modal__fileExplorer {
    padding-top: 100px
}

.modal__ttsPlayer {
    padding-top: 0
}

.tabmore {
    width: 32px;
    height: 22px;
    margin: 3px 6px 3px 10px;
    position: relative;
    display: inline-block;
    border: 1px solid #121212;
    border-radius: 2px;
    opacity: .55
}

.tabmore__img {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -141px -121px;
    width: 13px;
    height: 10px
}

.tabmore--hover {
    opacity: 1;
    background-color: #5b5b5b;
    cursor: pointer
}

.search-control,
.sheet-move {
    display: none;
    position: relative;
    background-color: #333;
    opacity: .55;
    border: 1px solid #121212;
    border-radius: 2px;
    width: 23px;
    height: 22px;
    margin: 3px 0
}

.search-control__img,
.sheet-move__img {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.search-control--hover,
.sheet-move--hover {
    opacity: 1;
    background-color: #5b5b5b;
    cursor: pointer
}

.sheet-prev__img {
    background-position: -355px -199px
}

.sheet-next__img,
.sheet-prev__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 6px;
    height: 11px
}

.sheet-next__img {
    background-position: -355px -222px
}

.sheet-list {
    display: inline-block;
    vertical-align: top;
    margin: 3px -4px
}

.sheet-list__sheet-tab {
    width: 60px;
    height: 24px;
    line-height: 22px;
    color: #b6b6b6;
    font-size: 11px;
    background-color: #333;
    border: 1px solid #121212;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.sheet-list__sheet-tab--on,
.sheet-list__sheet-tab:hover {
    color: #fff;
    opacity: 1;
    background-color: #5b5b5b
}

.sheet-list__sheet-tab:hover {
    cursor: pointer
}

.tablist-popup {
    bottom: 30px;
    position: fixed;
    z-index: 41;
    left: 23px;
    display: none
}

.tablist-popup__sheet-content {
    position: relative;
    display: block;
    height: auto;
    top: 0;
    max-height: 180px;
    margin: 0;
    padding: 10px 0;
    line-height: 30px;
    left: -12px;
    border: 1px solid #121212;
    background-color: #333;
    overflow: hidden;
    border-radius: 2px;
    -webkit-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    -moz-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    box-shadow: -1px 3px 3px rgba(21, 5, 8, .2)
}

.tablist-popup__ul {
    width: 140px;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden
}

.tablist-popup__li {
    font-size: 11px;
    color: #b6b6b6;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden
}

.tablist-popup--focus,
.tablist-popup__li:hover {
    color: #fff;
    background-color: #5a5a5b
}

.tablist-popup__arrow {
    position: absolute;
    left: 1px;
    border-bottom-style: none;
    border-top: 6px solid #333
}

.tablist-popup__arrow-bolder {
    position: static;
    border-bottom-style: none;
    border-top: 8px solid #202020
}

:fullscreen .normalScreen {
    display: none
}

:-webkit-full-screen .normalScreen {
    display: none
}

:-moz-full-screen .normalScreen {
    display: none
}

:-ms-full-screen .normalScreen {
    display: none
}

:-o-full-screen .normalScreen {
    display: none
}

:fullscreen .wrap__container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

:-webkit-full-screen .wrap__container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

:-moz-full-screen .wrap__container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

:-ms-full-screen .wrap__container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

:-o-full-screen .wrap__container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.img-loading {
    background-image: url(../images/loading_dark.33870fc.gif)
}

.img-loading,
.img-loading-bright {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px
}

.img-loading-bright {
    background-image: url(../images/loading_bright.1a877c6.gif)
}

.img-loading-black {
    background-size: 40px;
    background-image: url(../images/loading_black.3d45542.gif)
}

.img-loading-black,
.img-loading-small {
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.img-loading-small {
    background-size: 24px;
    background-image: url(../images/loading_dark.33870fc.gif)
}

.img-retry {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px;
    background-image: url(../images/retry_icon.36a9ca4.png)
}

.fullscreen-close {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    margin-right: 20px;
    margin-top: 20px;
    cursor: pointer;
    z-index: 21
}

.fullscreen-close__img {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -47px -156px;
    width: 40px;
    height: 40px
}

.fullscreen-move {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    margin-left: 15px;
    margin-bottom: 15px;
    font-size: 0;
    z-index: 21
}

.fullscreen-move__div {
    display: inline-block;
    width: 50px;
    height: 50px
}

.fullscreen-prev {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -53px 0;
    width: 50px;
    height: 50px;
    opacity: .25
}

.fullscreen-prev--enable {
    opacity: 1;
    cursor: pointer
}

.fullscreen-prev--hover {
    border-radius: 2px;
    background-position: 0 0
}

.fullscreen-next,
.fullscreen-prev--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 50px;
    height: 50px
}

.fullscreen-next {
    background-position: -53px -53px;
    opacity: .25
}

.fullscreen-next--enable {
    opacity: 1;
    cursor: pointer
}

.fullscreen-next--hover {
    border-radius: 2px;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: 0 -53px;
    width: 50px;
    height: 50px
}

.cell-common {
    font-size: 0
}

.transform0 {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}

.transform90 {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.transform180 {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.transform270 {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg)
}

@media print {
    .layout {
        visibility: hidden;
        background-color: #fff
    }
}

.ttsPlayer {
    top: 45px;
    height: 348px;
    width: 648px
}

.ttsPlayer__body {
    border-radius: 15px 15px 0 0;
    position: relative;
    display: inline-block;
    height: 280px;
    width: 100%;
    background-color: #fff;
    outline: none;
    padding-top: 10px;
    padding-bottom: 10px
}

.ttsPlayer__body__tts_td {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 162px;
    height: 100px;
    cursor: pointer;
    text-align: center;
    background-color: transparent
}

.ttsPlayer__body__control-btn {
    display: inline-block;
    width: 100%;
    height: 70%;
    overflow: hidden;
    color: #fff
}

.ttsPlayer__body__text-field {
    height: 30%;
    display: block;
    position: relative;
    font-size: 14px
}

.ttsPlayer__body__speed-text,
.ttsPlayer__body__text-field {
    width: 100%;
    line-height: normal;
    font-weight: 700;
    color: #0f519c
}

.ttsPlayer__body__speed-text {
    display: table-cell;
    height: 70%;
    vertical-align: middle;
    font-size: 28px
}

.ttsPlayer__tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.ttsPlayer__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0f519c;
    border-radius: 0 0 15px 15px;
    height: 48px
}

.ttsPlayer__footer__page-move-btn {
    margin: 12px 20px;
    display: inline-flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer
}

.ttsPlayer__footer__page-move-btn__text-field {
    height: 50%;
    font-size: 12px;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.ttsPlayer__footer__page-input-field {
    display: inline-block;
    border: none;
    outline: none;
    padding: 5px 10px;
    margin: 12px 20px;
    max-width: 42px;
    border-radius: 5px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: #fff;
    text-align: center;
    color: #000
}

.ttsPlayer__footer__total-page {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: normal
}

.fileExplorer {
    display: none;
    position: absolute;
    height: 455px;
    left: 50%;
    margin-left: -350px;
    background-color: #fff;
    color: #3c3c3c;
    box-sizing: content-box;
    border-radius: 2px;
    -webkit-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    -moz-box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent
}

.fileExplorer-header {
    font-size: 0;
    border-bottom: 3px solid #c1c1c1;
    padding: 12px 20px
}

.fileExplorer-header__archiveFileName {
    padding-right: 18px;
    display: inline-block;
    font-size: 14px;
    width: 616px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.fileExplorer-header__closeBtn {
    display: inline-block;
    font-size: 14px;
    float: right;
    cursor: pointer;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -332px -293px;
    width: 18px;
    height: 18px
}

.fileExplorer-path {
    white-space: nowrap;
    padding: 14px 20px 0;
    font-size: 0
}

.fileExplorer-path__prevBtn {
    display: inline-block;
    background-position: -203px -78px
}

.fileExplorer-path__prevBtn,
.fileExplorer-path__prevBtn--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.fileExplorer-path__prevBtn--hover {
    cursor: pointer;
    background-position: -203px -39px
}

.fileExplorer-path__prevBtn--deactivate {
    opacity: .5
}

.fileExplorer-path__nextBtn {
    display: inline-block;
    margin-left: 4px;
    background-position: -203px 0
}

.fileExplorer-path__nextBtn,
.fileExplorer-path__nextBtn--hover {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 40px;
    height: 36px
}

.fileExplorer-path__nextBtn--hover {
    cursor: pointer;
    background-position: -133px -156px
}

.fileExplorer-path__nextBtn--deactivate {
    opacity: .5
}

.fileExplorer-path__filePath {
    margin-left: 14px;
    margin-bottom: 14px;
    padding: 4px 12px;
    color: #3c3c3c;
    border: 1px solid #c1c1c1;
    width: 413px;
    line-height: 26px;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    overflow: hidden
}

.fileExplorer-path__filePath-name {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    text-overflow: ellipsis;
    max-width: 85px;
    overflow: hidden
}

.fileExplorer-path__filePath-name--hover {
    cursor: pointer;
    background-color: #f4f4f4
}

.fileExplorer-path__filePath-arrow {
    width: 10px;
    text-align: center;
    display: inline-block;
    font-size: 12px;
    vertical-align: middle
}

.fileExplorer-path__filePath-arrow:before {
    content: ">"
}

.fileExplorer-allCount {
    display: inline-block;
    font-size: 0;
    position: absolute;
    right: 20px;
    margin-top: 32px;
    color: #3c3c3c
}

.fileExplorer-allCount__num {
    font-weight: 700
}

.fileExplorer-allCount__num,
.fileExplorer-allCount__txt {
    font-size: 12px;
    display: inline-block
}

.fileExplorer-tree {
    padding: 0 20px 20px;
    font-size: 0
}

.fileExplorer-folderTree {
    display: inline-block;
    border: 1px solid #c1c1c1;
    margin-right: 20px;
    padding-top: 3px;
    font-size: 12px;
    width: 236px;
    height: 271px;
    vertical-align: top;
    overflow-x: auto;
    overflow-y: auto
}

.fileExplorer-folderTree-div {
    padding-left: 8px;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    display: table;
    width: fit-content
}

.fileExplorer-folderTree-div__arrow {
    display: inline-block;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -141px -134px;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-top: 4px;
    margin-right: 4px
}

.fileExplorer-folderTree-div__arrow--hidden {
    visibility: hidden
}

.fileExplorer-folderTree-div__folder {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -326px -317px;
    width: 16px;
    height: 16px
}

.fileExplorer-folderTree-div__name {
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px;
    font-size: 12px;
    padding-right: 8px
}

.fileExplorer-folderTree-div__name--selected {
    font-weight: 700
}

.fileExplorer-folderTree-div__path {
    display: none
}

.fileExplorer-folderTreeLine-div {
    margin: 3px 0;
    cursor: pointer
}

.fileExplorer-fileTree {
    display: inline-block;
    font-size: 0;
    border: 1px solid #c1c1c1;
    width: 400px
}

.fileExplorer-fileTree-sort {
    border-bottom: 1px solid #c1c1c1;
    display: flex;
    display: -ms-flexbox
}

.fileExplorer-fileTree-sort__div {
    display: inline-block;
    font-size: 12px;
    padding: 0 8px;
    height: 20px;
    width: 116.5px;
    border-right: 1px solid #c1c1c1
}

.fileExplorer-fileTree-sort__div--hover {
    cursor: pointer;
    background-color: #f4f4f4
}

.fileExplorer-fileTree-sort__div-last {
    border-right: 0
}

.fileExplorer-fileTree-sort__div-type {
    display: inline-block;
    margin-top: 3px
}

.fileExplorer-fileTree-sort__div-arrow {
    display: none;
    margin-top: 4px;
    float: right;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -141px -134px;
    width: 10px;
    height: 10px
}

.fileExplorer-fileTree-list {
    height: 244.5px;
    padding: 4px 0;
    overflow-y: scroll;
    overflow-x: hidden
}

.fileExplorer-fileTree-list__div {
    font-size: 0;
    padding: 3px 8px;
    white-space: nowrap;
    overflow-x: hidden;
    cursor: pointer
}

.fileExplorer-fileTree-list__div--selected {
    background-color: #f4f4f4
}

.fileExplorer-fileTree-list__div-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px
}

.fileExplorer-fileTree-list__div-name {
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 12px;
    color: #3c3c3c;
    margin-right: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 282px
}

.fileExplorer-fileTree-list__div-size {
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 12px;
    color: #9a9a9a
}

.fileExplorer-fileTree-list__path {
    display: none
}

.fileExplorer-viewerBtn {
    position: absolute;
    display: inline-block;
    margin-bottom: 20px;
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    font-size: 0;
    padding: 5px 18px;
    left: 50%;
    margin-left: -51px;
    cursor: pointer
}

.fileExplorer-viewerBtn__viewIcon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -176px -181px;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 6px
}

.fileExplorer-viewerBtn__txt {
    display: inline-block;
    font-size: 12px
}

.fileExplorer-folder-icon {
    background-position: -326px -317px
}

.fileExplorer-folder-icon,
.fileExplorer-word-icon,
.word-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.fileExplorer-word-icon,
.word-icon {
    background-position: -190px -337px
}

.fileExplorer-slide-icon,
.slide-icon {
    background-position: -152px -337px
}

.cell-icon,
.fileExplorer-cell-icon,
.fileExplorer-slide-icon,
.slide-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.cell-icon,
.fileExplorer-cell-icon {
    background-position: -307px -317px
}

.fileExplorer-hwp-icon,
.hwp-icon {
    background-position: -38px -337px
}

.fileExplorer-hwp-icon,
.fileExplorer-odt-icon,
.hwp-icon,
.odt-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.fileExplorer-odt-icon,
.odt-icon {
    background-position: -114px -337px
}

.fileExplorer-pdf-icon,
.pdf-icon {
    background-position: -133px -337px
}

.fileExplorer-img-icon,
.fileExplorer-pdf-icon,
.img-icon,
.pdf-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.fileExplorer-img-icon,
.img-icon {
    background-position: -57px -337px
}

.fileExplorer-txt-icon,
.txt-icon {
    background-position: -171px -337px
}

.fileExplorer-html-icon,
.fileExplorer-txt-icon,
.html-icon,
.txt-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.fileExplorer-html-icon,
.html-icon {
    background-position: -345px -317px
}

.fileExplorer-mht-icon,
.mht-icon {
    background-position: -76px -337px
}

.fileExplorer-mht-icon,
.fileExplorer-zip-icon,
.mht-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.fileExplorer-zip-icon {
    background-position: -288px -317px
}

.fileExplorer-nosupport-icon,
.nosupport-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -95px -337px;
    width: 16px;
    height: 16px
}

.fileTree-sort__div-arrow-down,
.folderExplorer-arrow-down {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -352px -268px;
    width: 10px;
    height: 10px
}

.annotation-popup {
    position: absolute;
    z-index: 31;
    min-width: 107px
}

.annotation-popup--short {
    min-width: 72px
}

.annotation-popup--hide {
    display: none
}

.annotation-popup__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    line-height: 0;
    font-size: 0
}

.annotation-popup__item {
    display: inline-block;
    padding: 9.5px;
    cursor: pointer
}

.annotation-popup__item--hover {
    background-color: #f4f4f4
}

.annotation-popup__item--hide {
    display: none
}

.annotation-popup__img--highlight {
    background-position: -266px -337px
}

.annotation-popup__img--highlight,
.annotation-popup__img--prop {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.annotation-popup__img--prop {
    background-position: -365px -323px
}

.annotation-popup__img--memo {
    background-position: -365px -228px
}

.annotation-popup__img--delete,
.annotation-popup__img--memo {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.annotation-popup__img--delete {
    background-position: -98px -317px
}

.annotation-memo {
    position: absolute;
    background-color: #fff68f;
    line-height: 0;
    z-index: 49
}

.annotation-memo--hide {
    display: none
}

.annotation-memo__header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: #fff265
}

.annotation-memo__author {
    display: inline-block;
    padding-left: 5px;
    line-height: 30px
}

.annotation-memo__author-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -365px -285px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 4px;
    cursor: pointer
}

.annotation-memo__author-icon--edit {
    display: none
}

.annotation-memo__author-label {
    font-size: 13px;
    display: none
}

.annotation-memo__author-label--edit {
    display: inline
}

.annotation-memo__author-input {
    width: 195px;
    background-color: transparent;
    border: 0;
    padding-left: 5px;
    text-overflow: ellipsis;
    height: 15px;
    vertical-align: middle
}

.annotation-memo__author-input--edit {
    border-bottom: 1px solid #000;
    border-radius: 0
}

.annotation-memo__content {
    margin: 50px 20px 25px;
    width: 260px;
    height: 125px;
    border: 0;
    background-color: transparent;
    resize: none;
    overflow: auto;
    font-size: 13px;
    color: #000;
    border-radius: 0;
    font-family: Noto Sans, Helvetica, AppleSDGothicNeo, Dotum, sans-serif;
    padding: 2px;
    box-sizing: border-box;
    scrollbar-arrow-color: #666;
    scrollbar-face-color: #e6e6e6;
    scrollbar-highlight-color: #e6e6e6;
    scrollbar-track-color: #fff68f
}

.annotation-memo__content::-webkit-scrollbar {
    width: 8px
}

.annotation-memo__content::-webkit-scrollbar-track {
    background-color: transparent
}

.annotation-memo__content::-webkit-scrollbar-thumb {
    background-color: #e6e6e6;
    border-radius: 10px
}

.annotation-memo__content::-webkit-scrollbar-thumb:hover {
    background: #c6c6c6
}

.annotation-memo__backdrop {
    position: absolute;
    margin: 50px 20px 25px;
    width: 260px;
    height: 125px;
    z-index: -1;
    overflow: auto
}

.annotation-memo__backdrop::-webkit-scrollbar {
    background-color: transparent;
    width: 8px
}

.annotation-memo__highlights {
    font-size: 13px;
    padding: 2px;
    line-height: normal;
    color: transparent;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box
}

.annotation-memo__highlights mark {
    color: transparent;
    background-color: #f90
}

.annotation-memo__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: right
}

.annotation-memo__char-cnt {
    margin-right: 8px;
    font-size: 13px;
    color: #c7c7c7
}

.annotation-memo__char-cnt--limit {
    color: red
}

.annotation-memo__delete-btn {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -98px -317px;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer
}

.annotation-freetext {
    position: absolute;
    border: none;
    outline: none;
    background-color: transparent;
    resize: none;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-weight: 400;
    font-size: 12pt;
    padding: 0;
    color: #000
}

.annotation-th-memo {
    position: absolute;
    background-color: #fff68f;
    line-height: 0;
    z-index: 49
}

.annotation-th-memo--hide {
    display: none
}

.annotation-th-memo__header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: #fff265
}

.annotation-th-memo__author {
    display: inline-block;
    padding-left: 5px;
    line-height: 30px
}

.annotation-th-memo__author-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -365px -285px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 4px;
    cursor: pointer
}

.annotation-th-memo__author-icon--edit {
    display: none
}

.annotation-th-memo__author-label {
    font-size: 13px;
    display: none
}

.annotation-th-memo__author-label--edit {
    display: inline
}

.annotation-th-memo__author-input {
    width: 195px;
    background-color: transparent;
    border: 0;
    padding-left: 5px;
    text-overflow: ellipsis;
    height: 15px;
    vertical-align: middle
}

.annotation-th-memo__author-input--edit {
    border-bottom: 1px solid #000;
    border-radius: 0
}

.annotation-th-memo__content {
    margin: 50px 20px 25px;
    width: 260px;
    height: 125px;
    border: 0;
    background-color: transparent;
    resize: none;
    overflow: auto;
    font-size: 13px;
    color: #000;
    border-radius: 0;
    font-family: Noto Sans, Helvetica, AppleSDGothicNeo, Dotum, sans-serif;
    padding: 2px;
    box-sizing: border-box;
    scrollbar-arrow-color: #666;
    scrollbar-face-color: #e6e6e6;
    scrollbar-highlight-color: #e6e6e6;
    scrollbar-track-color: #fff68f
}

.annotation-th-memo__content::-webkit-scrollbar {
    width: 8px
}

.annotation-th-memo__content::-webkit-scrollbar-track {
    background-color: transparent
}

.annotation-th-memo__content::-webkit-scrollbar-thumb {
    background-color: #e6e6e6;
    border-radius: 10px
}

.annotation-th-memo__content::-webkit-scrollbar-thumb:hover {
    background: #c6c6c6
}

.annotation-th-memo__backdrop {
    position: absolute;
    margin: 50px 20px 25px;
    width: 260px;
    height: 125px;
    z-index: -1;
    overflow: auto
}

.annotation-th-memo__backdrop::-webkit-scrollbar {
    background-color: transparent;
    width: 8px
}

.annotation-th-memo__highlights {
    font-size: 13px;
    padding: 2px;
    line-height: normal;
    color: transparent;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box
}

.annotation-th-memo__highlights mark {
    color: transparent;
    background-color: #f90
}

.annotation-th-memo__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: right
}

.annotation-th-memo__char-cnt {
    margin-right: 8px;
    font-size: 13px;
    color: #c7c7c7
}

.annotation-th-memo__char-cnt--limit {
    color: red
}

.annotation-th-memo__delete-btn {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -98px -317px;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer
}

.annotation-color-picker {
    position: absolute;
    z-index: 31;
    min-width: 107px
}

.annotation-color-picker--hide {
    display: none
}

.annotation-color-picker__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    box-shadow: -1px 3px 3px rgba(21, 5, 8, .2);
    line-height: 0;
    font-size: 0
}

.annotation-color-picker__item {
    display: inline-block;
    padding: 7px
}

.annotation-color-picker__item--hover {
    background-color: #f4f4f4
}

.annotation-color-picker__color {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1 0H0v1h2v1H1' fill='%23d3d3d3'/%3E%3C/svg%3E") 0 0/contain #fff;
    width: 18.5px;
    height: 18.5px;
    border: 1px solid #000;
    border-radius: 100%;
    opacity: .7;
    cursor: pointer
}

.annotation-color-picker__color--pink {
    background: none;
    background-color: #ec008c
}

.annotation-color-picker__color--yellow {
    background: none;
    background-color: #f8e71c
}

.annotation-color-picker__color--green {
    background: none;
    background-color: #26e600
}

.annotation-color-picker__color--blue {
    background: none;
    background-color: #44c8f5
}

.memo-highlight:after {
    background-color: #fe0
}

.memo-highlight:after,
.tmp-highlight:after {
    content: attr(data-char);
    color: transparent;
    position: absolute;
    left: -.18em;
    right: -.18em;
    bottom: -1.5px;
    cursor: pointer;
    opacity: .3
}

.tmp-highlight:after {
    background-color: #33bbd3
}

.memo-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -332px -245px;
    width: 20px;
    height: 20px;
    opacity: .6;
    position: absolute;
    cursor: pointer;
    z-index: 16;
    pointer-events: auto
}

.memo-icon--on {
    opacity: 1
}

.memo-highlight-icon {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -352px -281px;
    width: 10px;
    height: 9px;
    position: absolute;
    cursor: pointer;
    z-index: 16
}

.text-highlight:after {
    background-color: var(--var-th-color)
}

.text-highlight--pink:after,
.text-highlight:after {
    content: attr(data-char);
    color: transparent;
    position: absolute;
    left: -.18em;
    right: -.18em;
    bottom: -1.5px;
    cursor: pointer;
    opacity: .3
}

.text-highlight--pink:after {
    background-color: #ec008c
}

.text-highlight--yellow:after {
    background-color: #f8e71c
}

.text-highlight--green:after,
.text-highlight--yellow:after {
    content: attr(data-char);
    color: transparent;
    position: absolute;
    left: -.18em;
    right: -.18em;
    bottom: -1.5px;
    cursor: pointer;
    opacity: .3
}

.text-highlight--green:after {
    background-color: #26e600
}

.text-highlight--blue:after {
    content: attr(data-char);
    color: transparent;
    position: absolute;
    left: -.18em;
    right: -.18em;
    bottom: -1.5px;
    cursor: pointer;
    opacity: .3;
    background-color: #44c8f5
}

.search {
    display: none;
    visibility: visible;
    position: absolute;
    right: 0;
    font-size: 12px;
    margin: 0 15px 0 0;
    padding: 5px 0;
    color: #fff;
    background-color: #333;
    box-sizing: content-box;
    border: 1px solid #121212;
    border-radius: 2px;
    -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, .3);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, .3)
}

.search-mw {
    min-width: 260px
}

.search-mw_2025 {
    min-width: 285px
}

.search__input {
    height: 20px;
    color: #000;
    border: 1px solid #121212;
    padding: 0 5px;
    margin: 0 5px;
    display: inline-block;
    width: 150px;
    font-size: 16px
}

.search__input::-ms-clear {
    display: none;
    height: 0;
    width: 0
}

.search__label {
    color: #999;
    position: absolute;
    top: 8px;
    left: 13px;
    line-height: 20px;
    font-size: 12px;
    cursor: text
}

.search-control,
.search__div {
    display: inline-block
}

.search-control {
    top: 0;
    vertical-align: bottom;
    margin: auto
}

.search-setting {
    opacity: .9;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -215px -223px;
    width: 15px;
    height: 15px
}

.search-setting--disable {
    opacity: .35
}

.search-prev {
    opacity: .9;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -355px -199px;
    width: 6px;
    height: 11px
}

.search-prev--disable {
    opacity: .35
}

.search-next {
    opacity: .9;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -355px -222px;
    width: 6px;
    height: 11px
}

.search-next--disable {
    opacity: .35
}

.search-close {
    opacity: .9;
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -355px -245px;
    width: 6px;
    height: 11px
}

.search-close--disable {
    opacity: .35
}

.search-setting-window {
    height: 25px;
    margin-top: 10px;
    line-height: 25px
}

.search-setting-window__check {
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle
}

.cell-search-rect {
    stroke: #f90;
    stroke-width: 6px;
    opacity: .85;
    fill: transparent
}

.loading-dimmed {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .3;
    z-index: 100
}

.loading-dimmed__icon {
    width: 40px;
    height: 40px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px;
    background-image: url(../images/loading_black.3d45542.gif)
}

.loading-dimmed__message {
    width: 60px;
    color: #fff;
    text-align: right
}

.loading-dimmed--hide {
    display: none
}

.author-modify-btn__img {
    background-position: -155px -317px
}

.annot-list-btn__img,
.author-modify-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.annot-list-btn__img {
    background-position: -79px -317px
}

.annot-list-btn__img--off {
    background-position: -60px -317px
}

.annot-list-btn__img--off,
.attach-list-btn__img {
    background-image: url(../images/sprite-web.56dec71.png);
    width: 16px;
    height: 16px
}

.attach-list-btn__img {
    background-position: -79px -317px
}

.attach-list-btn__img--off {
    background-image: url(../images/sprite-web.56dec71.png);
    background-position: -60px -317px;
    width: 16px;
    height: 16px
}

.disable-pointer {
    caret-color: transparent;
    cursor: default
}