/*!
 * 
 * Product name/Version: SynapDocumentViewer 24.10.0
 * 
 */
.mobile-controlbar--hide,
.mobile-controlbar-floating {
    display: none
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .mobile-controlbar-floating {
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        margin-right: 20px;
        margin-bottom: 20px;
        z-index: 50;
        transform-origin: bottom right;
        transition: visibility .4s, opacity .4s;
        width: 65px;
        height: 65px
    }

    .mobile-controlbar-floating--hide {
        visibility: hidden;
        opacity: 0
    }

    .mobile-controlbar-floating__btn {
        font-size: 0;
        border: none;
        border-radius: 50px 50px;
        width: 50px;
        height: 50px;
        margin-left: 15px;
        margin-top: 15px;
        opacity: .7;
        background: #202020 0 0 no-repeat padding-box;
        box-shadow: 1px 2px 3px transparent;
        display: block;
        position: relative;
        cursor: pointer
    }

    .mobile-controlbar-floating__btn--disabled {
        opacity: .25;
        pointer-events: none
    }

    .mobile-controlbar-floating__btn--hover {
        opacity: .9
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse) and (hover:hover) and (pointer:fine),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse) and (hover:hover) and (pointer:fine),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse) and (hover:hover) and (pointer:fine),
screen and (max-width:768px) and (min-device-width:1024px) and (hover:hover) and (pointer:fine),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse) and (hover:hover) and (pointer:fine),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse) and (hover:hover) and (pointer:fine),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) and (hover:hover) and (pointer:fine) {
    .mobile-controlbar-floating__btn:hover {
        opacity: .9
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .mobile-controlbar-floating__btn>span {
        display: inline-block;
        position: absolute
    }

    .mobile-controlbar-floating__btn__default-img {
        left: 11px;
        top: 22px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -186px -171px;
        width: 28px;
        height: 6px
    }

    .mobile-controlbar-floating__btn__prev-img {
        top: 18px;
        background-position: -280px -303px
    }

    .mobile-controlbar-floating__btn__next-img,
    .mobile-controlbar-floating__btn__prev-img {
        left: 14px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 23px;
        height: 13px
    }

    .mobile-controlbar-floating__btn__next-img {
        top: 20px;
        background-position: -254px -303px
    }

    .mobile-controlbar-floating__btn__zoomin-img {
        left: 13px;
        top: 13px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -336px -32px;
        width: 24px;
        height: 24px
    }

    .mobile-controlbar-floating__btn__zoomout-img {
        left: 13px;
        top: 24px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -95px -86px;
        width: 24px;
        height: 2px
    }

    .mobile-controlbar-floating__btn__pencil-img {
        left: 16px;
        top: 16px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -284px -324px;
        width: 18px;
        height: 18px
    }

    .mobile-controlbar-floating__btn__square-img {
        left: 17px;
        top: 17px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -368px -64px;
        width: 16px;
        height: 16px
    }

    .mobile-controlbar-floating__btn__circle-img {
        left: 16px;
        top: 16px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -368px -25px;
        width: 17px;
        height: 17px
    }

    .mobile-controlbar-floating__btn__line-img {
        left: 17px;
        top: 17px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -368px -45px;
        width: 16px;
        height: 16px
    }

    .mobile-controlbar-floating__btn__arrowline-img {
        left: 15px;
        top: 17px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -232px -303px;
        width: 19px;
        height: 16px
    }

    .mobile-controlbar-floating__btn__hand-scroll-img {
        left: 14px;
        top: 12px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -336px -88px;
        width: 21px;
        height: 26px
    }

    .mobile-controlbar-floating__btn__hand-scroll-img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -336px -59px;
        width: 21px;
        height: 26px
    }

    .mobile-controlbar-floating>div {
        position: absolute
    }

    .mobile-controlbar-floating__default {
        left: 0;
        top: 0
    }

    .mobile-controlbar-floating__zoom {
        left: 0;
        top: -130px
    }

    .mobile-controlbar-floating__page {
        left: 0;
        top: -260px
    }

    .mobile-controlbar-floating__change-annot-drawing-mode,
    .mobile-controlbar-floating__scroll {
        left: 0;
        top: -325px
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-width:768px) and (min-device-width:1024px) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape) {
    .mobile-controlbar-floating__btn {
        display: inline-block
    }

    .mobile-controlbar-floating__page {
        left: 0;
        top: -130px
    }

    .mobile-controlbar-floating__zoom {
        left: -135px;
        top: 0
    }

    .mobile-controlbar-floating__change-annot-drawing-mode,
    .mobile-controlbar-floating__scroll {
        left: -65px;
        top: -65px
    }
}

@media screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .mobile-controlbar-floating {
        margin-bottom: 40px
    }
}

.notAllowCopyForIOS {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .wrap__header {
        height: 40px;
        font-size: 0
    }

    .wrap__header--hide {
        display: none
    }

    .wrap__title {
        max-width: none;
        display: block;
        margin-left: 0;
        padding-left: 5px;
        line-height: 41px;
        margin-right: 0
    }

    .page__input {
        height: 24px
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        appearance: none;
        width: 5px;
        height: 5px
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: hsla(0, 0%, 61.2%, .6)
    }

    .wrap__logo {
        position: relative;
        margin-top: 15px;
        margin-left: 20px;
        margin-right: 5px;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -273px -249px;
        width: 45px;
        height: 8px
    }

    .wrap__panel {
        padding-top: 40px;
        width: 184px;
        min-width: 184px;
        background-color: #333;
        opacity: .9;
        overflow-x: hidden;
        overflow-y: auto;
        display: none
    }

    .wrap__panel--off {
        width: 0
    }

    .wrap__panel--option-on {
        padding-top: 0
    }

    .wrap__thumbnail {
        top: 40px
    }

    .wrap__thumbnail--on {
        width: 184px
    }

    .wrap__attachment,
    .wrap__thumbnail_2025 {
        top: 90px
    }

    .wrap__attachment--on {
        width: 184px
    }

    .wrap__container {
        top: 0
    }

    .wrap__container--cell {
        bottom: 0
    }

    .wrap__index {
        margin-bottom: 14px
    }

    .wrap__panelbar {
        width: 57px;
        left: 0;
        cursor: pointer
    }

    .wrap__panelbar--mobile-on {
        left: 184px
    }

    .wrap__annotation-list {
        padding-top: 80px;
        width: 184px;
        min-width: 184px;
        background-color: #202020;
        opacity: .8;
        overflow-x: hidden;
        overflow-y: auto;
        top: 0
    }

    .wrap__annotation-list-ul {
        font-size: 9pt
    }

    .wrap .annot-page-btn {
        margin: 2px 0
    }

    .wrap .annot-page-totalNum {
        width: 45px;
        height: 20px;
        margin-left: 4px
    }

    .wrap .annot-page-nav {
        width: 184px;
        font-size: 12px;
        line-height: 20px
    }

    .wrap .annot-page-ul {
        font-size: 12px
    }

    .wrap .annot-page-li {
        height: 70px;
        margin: 2px;
        border-radius: 0
    }

    .wrap .annot-page-li .button {
        font-size: 9pt
    }

    .wrap .attach-page-btn {
        margin: 2px 0
    }

    .wrap .attach-page-totalNum {
        width: 45px;
        height: 20px;
        margin-left: 4px
    }

    .wrap .attach-page-nav {
        width: 184px;
        font-size: 12px;
        line-height: 20px
    }

    .wrap .attach-page-ul {
        font-size: 12px
    }

    .wrap .attach-page-li .button {
        font-size: 9pt
    }

    .wrap__menu {
        margin-right: 0
    }

    .wrap__contents {
        touch-action: manipulation
    }

    .wrap__contents--option-show-header {
        top: 40px
    }

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

    .wrap__contents--annot-on {
        left: 0
    }

    .wrap__contents .sheet-dialog {
        top: 15%
    }

    .wrap__footer--cell {
        height: 40px
    }

    .wrap__footer--cell .sheet-move,
    .wrap__footer--cell .tabmore {
        height: 32px
    }

    .wrap__footer--cell .sheet-list__sheet-tab {
        height: 34px;
        line-height: 32px
    }

    .page__select {
        display: none
    }

    .header-title-icon {
        height: 30px;
        float: left
    }

    .header-title-icon__img {
        margin: 13px 0 -4px 10px
    }

    .marker-header {
        height: 40px;
        top: 40px
    }

    .mobile-marker-loading {
        opacity: .2
    }

    .erasermode {
        touch-action: none
    }

    .menu {
        display: inline-block;
        right: 10px;
        height: 27.5px;
        top: 2.5px
    }

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

    .menu__block:after {
        top: -2px;
        right: -2px;
        bottom: -7px;
        left: -2px
    }

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

    .mobile-panelbar__img {
        display: inline-block;
        background-position: -60px -264px
    }

    .mobile-panelbar__img,
    .mobile-panelbar__img--close {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 57px;
        height: 57px
    }

    .mobile-panelbar__img--close {
        background-position: 0 -264px
    }

    .hide,
    .web-panelbar__img {
        display: none
    }

    .more-arrow {
        top: 5px;
        right: 22px;
        box-sizing: content-box;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-bottom: 6px solid #333;
        z-index: 30
    }

    .more-arrow,
    .more-arrow__bolder {
        display: block;
        position: absolute;
        margin: 0;
        width: 0;
        height: 0
    }

    .more-arrow__bolder {
        top: 1px;
        right: 21px;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 8px solid #121212
    }

    .thumb__div {
        margin-bottom: 0;
        border: 3px solid transparent
    }

    .thumb__div:hover {
        border: 3px solid #666
    }

    .thumb__span {
        display: none
    }

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

    .thumb__focus {
        border: 3px solid #666;
        opacity: 1;
        outline: none
    }

    .thumb--nohover {
        border: 3px solid transparent !important
    }

    .thumb-area {
        margin-left: 35px
    }

    .contents__slide-img {
        width: 100%;
        height: 100%
    }

    .contents__word-img {
        width: 96%;
        height: 100%;
        padding: 10px
    }

    .contents-page {
        width: 100%;
        height: 100%;
        margin: 10px 0
    }

    .controlbar {
        display: none
    }

    .dialog {
        -webkit-box-shadow: -1px 1px 1px rgba(21, 5, 8, .2);
        -moz-box-shadow: -1px 1px 1px rgba(21, 5, 8, .2);
        box-shadow: -1px 1px 1px rgba(21, 5, 8, .2)
    }

    .dialog--min-width {
        min-width: 300px
    }

    .dialog--rm-border-bottom {
        border-bottom: 0
    }

    .dialog__msg {
        padding: 16px
    }

    .dialog__btn--single {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 16px
    }

    .dialog__btn--answer {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0
    }

    .dialog__btn .btn {
        width: 50%;
        padding: 8px 0;
        min-height: 0;
        line-height: normal
    }

    .dialog__btn .btn--answer-left {
        margin-right: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0
    }

    .dialog__btn .btn--answer-white {
        margin-right: 0;
        border-left: 0;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333
    }

    .dialog__btn .btn--3answer-width {
        width: 100px
    }

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

    .dialog__pwd-input .pwd-input {
        width: 100%;
        height: 24px;
        padding: 2px 5px
    }

    .dialog__pwd-input .pwd-warn-msg {
        margin-top: 5px
    }

    .dialog__input {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px
    }

    .dialog__input .input {
        width: 100%
    }

    .dialog__checkbox {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px
    }

    .dialog__checkbox .input {
        vertical-align: -2px
    }

    .dialog__order {
        display: table;
        margin: 0 16px 16px
    }

    .dialog__url {
        display: table-footer-group;
        padding: 0
    }

    .dialog__url .url__text {
        width: 183px;
        text-decoration: none
    }

    .dialog__sns {
        display: table-header-group;
        padding: 0
    }

    .dialog__sns .sns {
        white-space: nowrap;
        margin-bottom: 5px
    }

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

    .dialog__sns .sns__btn--facebook {
        background-position: -273px 0
    }

    .dialog__sns .sns__btn--facebook,
    .dialog__sns .sns__btn--X {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 60px;
        height: 60px
    }

    .dialog__sns .sns__btn--X {
        background-position: -273px -126px
    }

    .dialog__sns .sns__btn--band {
        background-position: -154px -180px
    }

    .dialog__sns .sns__btn--band,
    .dialog__sns .sns__btn--kakaotalk {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 60px;
        height: 60px
    }

    .dialog__sns .sns__btn--kakaotalk {
        background-position: -273px -63px
    }

    .dialog__info-logo {
        padding: 16px
    }

    .dialog__info-content {
        margin-bottom: 16px
    }

    .dialog__info-content__copyright {
        margin-top: 16px
    }

    .ttsPlayer {
        height: 80vh;
        width: 100vw;
        touch-action: manipulation
    }

    .ttsPlayer__tr {
        height: 90%
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-width:768px) and (min-device-width:1024px) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape) {
    .ttsPlayer__tr {
        margin-top: 0
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .ttsPlayer__body {
        border-radius: 15px 15px 0 0;
        height: 87.5%;
        padding-bottom: 0
    }

    .ttsPlayer__body__control-btn {
        min-width: auto
    }

    .ttsPlayer__body__text-field {
        font-size: 16px
    }

    .ttsPlayer__body__speed-text {
        font-size: 48px
    }

    .ttsPlayer__body__tts_td {
        width: 50%;
        height: 18.57%;
        margin-top: 10px;
        margin-bottom: 10px
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (max-width:768px) and (min-device-width:1024px) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse) and (max-height:450px) and (orientation:landscape),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) and (max-height:450px) and (orientation:landscape) {
    .ttsPlayer__body {
        height: 81.25%;
        padding: 0
    }

    .ttsPlayer__body__tts_td {
        height: 37.5%;
        width: 25%
    }

    .ttsPlayer__body__control-btn {
        min-width: auto;
        min-height: calc(var(--vh, 1vh)*100/4)
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .ttsPlayer__footer {
        height: 12.5%
    }

    .ttsPlayer__footer__page-move-btn {
        margin: 12px 2%
    }

    .ttsPlayer__footer__page-input-field {
        margin: 12px 2%;
        max-width: 5%
    }

    .fullscreen-close {
        margin-right: 15px;
        margin-top: 15px;
        cursor: pointer
    }

    .fullscreen-close__img {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -285px -264px;
        width: 30px;
        height: 30px
    }

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

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

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

    .img-retry {
        background-size: 24px;
        background-image: url(../images/retry_icon.36a9ca4.png)
    }

    .color-submenu {
        left: 0
    }

    .color-submenu__block {
        width: 29px;
        height: 29px
    }

    .transparency-submenu {
        left: 0;
        padding: 8px 10px
    }

    .transparency-submenu__input {
        height: 19px
    }

    .transparency-submenu ::-webkit-slider-thumb {
        background: url(../images/mobile_transparency_select_icon.5f507c3.png);
        height: 21px;
        width: 21px;
        margin-top: -4.5px;
        margin-bottom: -4.5px
    }

    .transparency-submenu ::-moz-range-thumb {
        background: url(../images/mobile_transparency_select_icon.5f507c3.png);
        height: 21px;
        width: 21px;
        margin-top: -4.5px;
        margin-bottom: -4.5px
    }

    .transparency-submenu ::-ms-thumb {
        background: url(../images/mobile_transparency_select_icon.5f507c3.png);
        height: 21px;
        width: 21px;
        margin-top: -4.5px;
        margin-bottom: -4.5px
    }

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

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

    .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: 12px;
        cursor: pointer
    }

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

    .annotation-popup__img--memo {
        background-position: -368px -139px;
        height: 15px
    }

    .annotation-popup__img--delete,
    .annotation-popup__img--memo {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 16px
    }

    .annotation-popup__img--delete {
        background-position: -368px -83px;
        height: 16px
    }

    .border-margin {
        height: 40px
    }

    .marker-border {
        height: 40px;
        margin: 0 4px
    }

    .fileExplorer {
        width: 100%;
        height: 100%;
        left: 0;
        margin-left: 0;
        border-radius: 0;
        display: none
    }

    .fileExplorer-header {
        font-size: 0;
        padding: 10px 13px
    }

    .fileExplorer-header__archiveFileName {
        padding-right: 13px;
        font-size: 12px
    }

    .fileExplorer-path {
        padding: 4px
    }

    .fileExplorer-path__prevBtn {
        background-position: -206px -264px
    }

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

    .fileExplorer-path__prevBtn--hover {
        background-position: -163px -264px
    }

    .fileExplorer-path__nextBtn {
        margin-left: -1px;
        background-position: -120px -264px
    }

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

    .fileExplorer-path__nextBtn--hover {
        background-position: -217px -180px
    }

    .fileExplorer-path__filePath {
        margin-left: 4px;
        margin-bottom: 0;
        padding: 0 8px;
        line-height: 34px
    }

    .fileExplorer-path__filePath-txt {
        padding: 6px 2px
    }

    .fileExplorer-path__filePath-arrow,
    .fileExplorer-path__filePath-txt {
        display: inline-block;
        font-size: 12px
    }

    .fileExplorer-allCount {
        display: none
    }

    .fileExplorer-tree {
        padding: 0;
        width: 100%
    }

    .fileExplorer-folderTree {
        display: none
    }

    .fileExplorer-fileTree {
        width: 100%;
        height: 400px;
        border-left: 0;
        border-right: 0
    }

    .fileExplorer-fileTree-sort {
        width: 100%
    }

    .fileExplorer-fileTree-sort__div {
        padding: 0 10px 0 13px;
        width: 100px;
        border-bottom: 0
    }

    .fileExplorer-fileTree-list {
        padding: 0;
        height: 371px;
        overflow-y: auto
    }

    .fileExplorer-fileTree-list__div {
        margin: 0;
        padding: 11.5px 13px;
        border-bottom: 1px solid #c1c1c1
    }

    .fileExplorer-fileTree-list__div-icon {
        margin-right: 10px;
        width: 20px;
        height: 20px
    }

    .fileExplorer-fileTree-list__div-name {
        font-size: 15px;
        margin-right: 10px
    }

    .fileExplorer-fileTree-list__div-size {
        font-size: 15px
    }

    .fileExplorer-fileTree-list__space {
        width: 13px
    }

    .fileExplorer-viewerBtn {
        width: 94px;
        height: 18px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: -100px;
        padding: 10px 50px 10px 54px;
        left: 50%
    }

    .fileExplorer-viewerBtn__viewIcon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -81px -324px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 6px;
        vertical-align: top
    }

    .fileExplorer-viewerBtn__txt {
        height: 20px;
        font-size: 15px;
        font-weight: 700;
        vertical-align: bottom
    }

    .modal__dialog {
        top: 15%
    }

    .modal__fileExplorer {
        padding-top: 30px
    }

    .modal--sheet-page {
        top: 40px;
        bottom: 0
    }

    .header-border {
        display: none
    }

    .page__input-wrapper {
        margin-bottom: 2px
    }

    .fileExplorer-folder-icon {
        background-position: -336px -211px
    }

    .fileExplorer-folder-icon,
    .fileExplorer-word-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .fileExplorer-word-icon {
        background-position: -104px -324px
    }

    .fileExplorer-slide-icon {
        background-position: -35px -324px
    }

    .fileExplorer-cell-icon,
    .fileExplorer-slide-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .fileExplorer-cell-icon {
        background-position: -336px -188px
    }

    .fileExplorer-hwp-icon {
        background-position: -336px -234px
    }

    .fileExplorer-hwp-icon,
    .fileExplorer-odt-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .fileExplorer-odt-icon {
        background-position: -217px -219px
    }

    .fileExplorer-pdf-icon {
        background-position: -240px -219px
    }

    .fileExplorer-img-icon,
    .fileExplorer-pdf-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .fileExplorer-img-icon {
        background-position: -336px -257px
    }

    .fileExplorer-txt-icon {
        background-position: -58px -324px
    }

    .fileExplorer-txt-icon,
    .fileExplorer-zip-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .fileExplorer-zip-icon {
        background-position: -336px -165px
    }

    .fileExplorer-nosupport-icon {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -336px -280px;
        width: 20px;
        height: 20px
    }

    .control-point:before {
        content: "";
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        left: -8px;
        top: -8px;
        z-index: 8
    }
}

@media screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {

    #fullscreen,
    .web-panelbar__img {
        display: none
    }

    .wrap__footer {
        position: fixed
    }

    .sheet-list__sheet-tab--on {
        color: #fff !important;
        background-color: #5b5b5b !important
    }

    .sheet-list__sheet-tab:hover,
    .tablist-popup__li:hover {
        color: #b6b6b6;
        background-color: #333
    }

    .tablist-popup--focus {
        color: #fff !important;
        background-color: #5a5a5b !important
    }

    .tablist-popup__arrow-bolder {
        display: none
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse) {
    .wrap__footer--cell {
        display: none
    }

    .page__input-wrapper {
        display: inline-block;
        vertical-align: middle;
        width: 64px;
        height: 24px;
        margin-right: 5px
    }

    .page {
        position: relative;
        margin-left: 0;
        height: 40px;
        left: 0;
        float: left;
        margin-top: 3px
    }

    .page__input {
        width: 90px;
        height: 42px;
        line-height: 1.7;
        font-size: 16px;
        text-align: left;
        padding-left: 17px;
        padding-right: 5px;
        transform: scale(.57);
        transform-origin: 0 0
    }

    .page__select-arrow {
        position: absolute;
        display: inline;
        left: 43px;
        top: 8px;
        height: 24px;
        cursor: pointer
    }

    .page__select-arrow-img {
        display: block;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -368px -102px;
        width: 16px;
        height: 16px;
        width: 15px;
        height: 11px;
        margin: 5px 2px 8px
    }

    .page__select-arrow:after {
        content: "";
        position: absolute;
        top: -5px;
        right: -5px;
        bottom: 20px;
        left: -5px
    }

    .page__total-page {
        font-size: 9px;
        color: #fff;
        height: 40px;
        line-height: 40px
    }

    .page__total-page:before {
        content: attr(data-content)
    }

    .page__menu {
        display: inline-block;
        right: 10px;
        height: 27.5px;
        top: 2.5px
    }

    .page__more {
        margin-right: 0
    }

    .page__select {
        position: absolute;
        left: 13px;
        top: 23px;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
        z-index: -9999;
        font-size: 16px;
        top: 32px;
        display: block
    }

    .page__div {
        height: 15px
    }

    .page-content {
        display: none;
        position: absolute;
        top: 32px;
        height: auto;
        max-height: 115px;
        margin: 0;
        padding: 5px 0;
        box-sizing: content-box;
        border: 1px solid #121212;
        background-color: #333;
        overflow: hidden;
        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)
    }

    .page-scroll-blind {
        width: 62px;
        max-height: inherit
    }

    .page-scroll-blind__list {
        margin: 0;
        padding: 0;
        max-height: inherit;
        overflow-y: scroll;
        overflow-x: hidden
    }

    .page-scroll-blind__item {
        padding-left: 10px;
        padding-right: 10px;
        line-height: 23px;
        font-size: 9px;
        color: #b6b6b6;
        cursor: pointer
    }

    .page-scroll-blind--focus,
    .page-scroll-blind__item--hover {
        color: #fff;
        background-color: #121212
    }

    .tab-content {
        display: none;
        position: absolute;
        top: 32px;
        height: auto;
        max-height: 115px;
        margin: 0;
        padding: 5px 0;
        box-sizing: content-box;
        border: 1px solid #121212;
        background-color: #333;
        overflow: hidden;
        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);
        width: 174px;
        top: 24px;
        z-index: 20
    }

    .header-tablist {
        position: relative;
        margin-left: 0;
        height: 40px;
        left: 0;
        float: left;
        margin-top: 6.5px;
        font-size: 0;
        vertical-align: top;
        height: auto;
        display: none
    }

    .header-tablist__input {
        width: 49px;
        height: 24px;
        line-height: 1;
        font-size: 9px;
        text-align: left;
        background-color: #333;
        line-height: 24px;
        color: #fff;
        border: 1px solid #121212;
        padding-left: 3px;
        padding-right: 16px;
        margin-right: 0;
        width: 68px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer
    }

    .header-tablist__select-arrow {
        position: absolute;
        display: inline;
        left: 43px;
        top: 8px;
        height: 24px;
        cursor: pointer;
        top: 0;
        right: 4px;
        left: auto;
        outline: none
    }

    .header-tablist__select-arrow-img {
        display: block;
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -368px -102px;
        width: 16px;
        height: 16px;
        width: 15px;
        height: 11px;
        margin: 5px 2px 8px
    }

    .header-tablist__select-arrow:after {
        content: "";
        position: absolute;
        top: -5px;
        right: -5px;
        bottom: 20px;
        left: -5px
    }

    .header-tablist__select {
        position: absolute;
        left: 6px;
        top: 23px;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
        z-index: -9999;
        font-size: 16px;
        top: 24px
    }

    .tab-scroll-blind {
        width: 62px;
        max-height: inherit;
        width: auto
    }

    .tab-scroll-blind__ul {
        margin: 0;
        padding: 0;
        max-height: inherit;
        overflow-y: scroll;
        overflow-x: hidden
    }

    .tab-scroll-blind__li {
        line-height: 23px;
        font-size: 9px;
        color: #b6b6b6;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .tab-scroll-blind--focus,
    .tab-scroll-blind__li--hover {
        color: #fff;
        background-color: #121212
    }

    .more {
        display: table-cell
    }

    .cell-mobile {
        display: inline-block
    }

    .more-submenu {
        display: none
    }

    .more-submenu--scroll {
        position: fixed;
        top: 40px;
        width: 100%;
        height: calc(var(--vh, 1vh)*100 - 40px);
        overflow-x: hidden;
        overflow-y: auto
    }

    .more-content {
        visibility: visible;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 5px 0;
        background-color: #333;
        box-sizing: border-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);
        overflow: hidden
    }

    .scroll-blind {
        height: inherit;
        max-height: inherit;
        overflow: hidden
    }

    .scroll-blind__ul {
        display: inline-block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%
    }

    .scroll-blind__li {
        list-style: none
    }

    .scroll-blind__more-item {
        margin: 0;
        padding: 13px 12px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .scroll-blind__more-item--hover {
        color: #fff;
        background-color: #121212
    }

    .scroll-blind__more-border {
        width: 20px;
        height: 2px;
        margin: auto;
        background-color: #202020
    }

    .more-btn__img {
        background-position: -240px -171px
    }

    .more-btn__img,
    .more-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 4px
    }

    .more-btn__img--on {
        background-position: -217px -171px
    }

    .mobile-fullscreen-btn__img {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -305px -324px;
        width: 18px;
        height: 18px
    }

    #backgroundcolor-btn,
    #braille-btn,
    #download-btn,
    #export-pdf-btn,
    #info-btn,
    #panel-btn,
    #presentation-btn,
    #print-btn,
    #search-btn,
    #server-pdf-btn,
    #sns-btn {
        display: none
    }

    .annot-mode {
        display: table-cell
    }
}

@media screen and (max-width:500px) {
    .marker-hide {
        display: none
    }
}

@media screen and (max-device-height:1024px) and (max-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-aspect-ratio:17/10) and (pointer:coarse),
screen and (max-device-width:1024px) and (min-device-height:1024px) and (min-device-aspect-ratio:10/17) and (pointer:coarse),
screen and (max-width:768px) and (min-device-width:1024px),
screen and (min-device-aspect-ratio:1/1) and (max-device-aspect-ratio:10/8) and (pointer:coarse),
screen and (min-device-aspect-ratio:8/10) and (max-device-aspect-ratio:1/1) and (pointer:coarse),
screen and (min-device-width:1024px) and (max-device-height:1024px) and (max-device-aspect-ratio:17/10) and (pointer:coarse) {
    .marker-right-menu {
        right: 0
    }

    .marker-btn__img {
        background-position: -173px -324px
    }

    .marker-btn__img,
    .marker-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 20px
    }

    .marker-btn__img--on {
        background-position: -196px -324px
    }

    .annotation-close-btn__img {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -263px -324px;
        width: 18px;
        height: 18px
    }

    .annotation-list-btn__img {
        background-position: -190px -303px
    }

    .annotation-list-btn__img,
    .annotation-list-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 18px;
        height: 17px
    }

    .annotation-list-btn__img--on {
        background-position: -211px -303px
    }

    .annot-list-search-btn__img {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: 0 -324px;
        width: 32px;
        height: 24px
    }

    .marker-square-btn__img,
    .marker-square-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -143px -303px;
        width: 20px;
        height: 18px
    }

    .marker-circle-btn__img {
        background-position: -127px -324px;
        width: 20px;
        height: 20px
    }

    .marker-arrowline-btn__img,
    .marker-circle-btn__img {
        background-image: url(../images/sprite-mobile.ee7aa6c.png)
    }

    .marker-arrowline-btn__img {
        background-position: -166px -303px;
        width: 21px;
        height: 17px
    }

    .marker-freetext-btn__img,
    .marker-freetext-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -150px -324px;
        width: 20px;
        height: 20px
    }

    .marker-pencil-btn__img,
    .marker-pencil-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        background-position: -219px -324px;
        width: 20px;
        height: 20px
    }

    .marker-memo-btn__img {
        background-position: -120px -303px
    }

    .marker-memo-btn__img,
    .marker-memo-btn__img--on {
        background-image: url(../images/sprite-mobile.ee7aa6c.png);
        width: 20px;
        height: 18px
    }

    .marker-memo-btn__img--on {
        background-position: -336px -303px
    }

    .marker-memo-btn__img--list {
        background-position: -368px -121px;
        width: 16px;
        height: 15px
    }

    .marker-hand-scroll-btn__img,
    .marker-memo-btn__img--list {
        background-image: url(../images/sprite-mobile.ee7aa6c.png)
    }

    .marker-hand-scroll-btn__img {
        background-position: -368px 0;
        width: 17px;
        height: 22px
    }

    .marker-menu {
        margin-left: 10px
    }

    .marker-menu__block,
    .marker-menu__shape-block {
        height: 40px
    }

    .marker-menu__sub-shapes {
        left: 162px;
        height: 40px
    }

    .annotation-list__search {
        margin: 10px 0;
        position: relative;
        width: 181px;
        height: 30px
    }

    .annotation-list__search__input {
        position: absolute;
        left: 0
    }

    .annotation-list__search-btn {
        position: absolute;
        left: 141px
    }

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

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

@media screen and (max-width:500px) {
    .prop-submenu {
        position: fixed;
        width: 100%;
        height: 307px;
        z-index: 51
    }

    .prop-submenu__right-align {
        margin-right: 3%
    }

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

    .prop-submenu__block-l {
        margin: 1px 7px
    }

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

    .prop-submenu-color__block {
        width: 7.8%;
        height: 27px;
        margin-left: .3%
    }

    .prop-submenu-slider__input {
        width: 80%;
        margin: 10px 0 10px 6px
    }

    .prop-submenu-slider__input-ms {
        margin: 0
    }

    .prop-submenu-slider__input::-webkit-slider-thumb {
        height: 23px;
        width: 23px
    }

    .prop-submenu-slider__input::-moz-range-thumb {
        height: 17px;
        width: 17px
    }

    .prop-submenu__prop-border {
        margin-top: 15px
    }
}