.bt-reader-btn-r{text-align:right!important}
.bt-reader-btn-l{text-align:left!important}
.oc-reader{width:100%;height:100%;position:absolute}
.oc-reader>.content>.detail{text-align:center;margin-top:2em;margin-bottom:2em}
.oc-reader>.content>.detail>p{margin-bottom:0;font-size:2em!important;color:#898989}
.oc-reader>.content>.detail>img{width:300px;max-width:80%}
.oc-reader>.content>.detail>button.orange{padding:.4em 1.4em;margin-top:.5em!important;font-size:1.4em!important;font-weight:300!important}
.oc-reader .nave.fixed{width:100%;position:fixed;top:0;left:0;z-index:1}
.oc-reader .content{background-color:#fff;min-height:100%}
.oc-reader .content .frame.lock:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;opacity:.8}
.oc-reader .content .frame{position:relative}
.oc-reader .content .frame .page-section{padding-top:1em;padding-bottom:4em}
.oc-reader .content .frame .page-section .page{margin-bottom:0;width:100%;max-width:800px;display:block;margin-right:auto;margin-left:auto}
.oc-reader .content .frame .page-section .page:last-of-type{margin-bottom:0}
.oc-reader .menu-action,.oc-reader .menu-action .menubar>.column{background-color:#fcfcfc}
.oc-reader .menu-action.fixed{width:100%;position:fixed;bottom:0;left:0;border-top:1px solid #e2e2e2;z-index:1}
.oc-reader .menu-action .frame{position:relative}
.oc-reader .menu-action .frame .fixed-overflow{height:500px;overflow:scroll;overflow-x:hidden;overflow-y:scroll}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar{width:9px;height:9px}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-button{width:0;height:0}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-thumb{background:#000;border:0 #000;border-radius:0}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-thumb:hover{background:#000}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-thumb:active{background:#000}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-track{background:#666;border:0 #fff;border-radius:0}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-track:hover{background:#666}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-track:active{background:#333}
.oc-reader .menu-action .frame .fixed-overflow::-webkit-scrollbar-corner{background:0 0}
.oc-reader .menu-action .frame .commend-section{background-color:#fff;position:absolute;top:0;left:0;width:100%;max-width:800px;border:1px solid #e2e2e2}
.oc-reader .menu-action .frame .chapter-section{background-color:#fff;position:absolute;top:0;right:0;max-width:400px;width:100%;border:1px solid #e2e2e2}
.oc-reader .menu-action .frame .chapter-section .chapter-frame{padding-bottom:0!important;position:relative}
.oc-reader .menu-action .frame .chapter-section .chapter-frame:last-of-type{padding-bottom:1rem!important}
.oc-reader .menu-action .frame .chapter-section .chapter-frame:last-of-type .chapter-title{bottom:1em}
.oc-reader .menu-action .frame .chapter-section .chapter-frame:last-of-type .chapter-item .image .chapter-lock{top:calc(50% - 4em)}
.oc-reader .menu-action .frame .chapter-section .chapter-frame:last-of-type .chapter-item.lock>.image:before{height:calc(100% - 2em)}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-item.lock>.image:before{background-color:#000;content:'';position:absolute;top:1em;bottom:0;left:1em;right:0;opacity:.8;width:calc(100% - 2em);height:calc(100% - 1em)}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-item .image{height:180px}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-item .image .chapter-lock{position:absolute;top:calc(50% - 3em);left:calc(50% - 2em);height:60px}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-item>.image{border:1px solid #e2e2e2}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-title{position:absolute;bottom:0;left:1em;width:calc(100% - 2em);padding:.5rem 1rem;background-color:#000;background-color:rgba(0,0,0,.33)}
.oc-reader .menu-action .frame .chapter-section .chapter-frame .chapter-title .text{color:#fff;font-size:1rem}
.oc-reader .menu-action .btn-action{font-size:1rem;color:#787E81}
.oc-reader .menu-action .btn-action.active{color:#f60}
.oc-reader .menu-action .btn-action.active .icon.type-a{display:none}
.oc-reader .menu-action .btn-action .icon.type-a,.oc-reader .menu-action .btn-action.active .icon.type-b{display:inline}
.oc-reader .menu-action .btn-action .icon{height:1.4em;vertical-align:text-top;margin-right:.2em}
.oc-reader .menu-action .btn-action .icon.type-b{display:none}
.oc-reader .menu-action .btn-chapter{font-size:1rem;font-weight:700;color:#f60}
.oc-reader .menu-action .btn-chapter .icon{height:1.3em;vertical-align:text-top}
.oc-reader .menu-action .btn-chapter .icon:first-of-type{margin-right:.2em}
.oc-reader .menu-action .btn-chapter .icon:last-of-type{margin-left:.2em}
@media only screen and (max-width:768px){.bt-reader-btn-l,.bt-reader-btn-r{text-align:center!important}
}
@media only screen and (min-width:768px){.oc-reader .content .frame .chapter-section .chapter-frame .chapter-title .text,.oc-reader .menu-action .btn-action,.oc-reader .menu-action .btn-chapter,.oc-reader .nave .path{font-size:1.2rem}
.oc-reader .nave .path .icon{height:1em}
.oc-reader .menu-action .btn-action .icon,.oc-reader .menu-action .btn-chapter .icon{height:1.2em}
.oc-reader .content .frame .page-section{padding-top:1em;padding-bottom:4em}
.oc-reader .content .frame .chapter-section .chapter-frame .chapter-item .image{height:200px}
}