/* common */
html, body {overflow:hidden; height:100%; margin:0; padding:0; border:0;}

#viewer {float:left; width:100%; height:100%; border-top:40px solid #FFF; border-bottom:40px solid #FFF; box-sizing:border-box;}
#viewer .header, #viewer .footer {position:absolute; top:0; left:0; width:100%; height:40px; background:#333; font-size:14px; color:#FFF; line-height:40px; white-space:nowrap; box-shadow:0 0 20px rgba(0,0,0,0.5); z-index:300;}
#viewer .header h1 {float:left; overflow:hidden; width:90%; height:40px; font-weight:normal; font-size:16px; line-height:40px; text-indent:40px; text-overflow:ellipsis;}

.btn_contents {position:absolute; top:5px; left:5px; overflow:hidden; width:30px; height:30px; margin:0; padding:0; border:0; background:#333; text-indent:-999px; -webkit-appearance:none;}
.btn_contents:before {position:absolute; top:8px; left:5px; width:20px; height:10px; border-top:2px solid #FFF; border-bottom:2px solid #FFF; content:'';}
.btn_contents:after {position:absolute; top:14px; left:5px; width:20px; height:2px; background:#FFF; content:'';}

#viewer .content {position:relative; overflow:auto; width:100%; height:100%; background:#777; z-index:100;}
#viewer .papers {margin:0 auto; font-size:0; line-height:0;}
#viewer .paper {display:inline-block; width:100%; padding:5px; box-sizing:border-box; text-align:center; vertical-align:top;}
#viewer .paper img {width:auto; height:auto;}

#viewer .fit_view .papers {width:100%!important;}
#viewer .fit_view .paper {}
#viewer .fit_view .paper img {width:100%!important; height:auto!important;}

#viewer .one_view .papers {}
#viewer .one_view .paper {}
#viewer .one_view .paper img {}

#viewer .two_view .papers {}
#viewer .two_view .paper {width:50%;}
#viewer .two_view .paper img {}

#viewer .footer {top:auto; bottom:0; z-index:200;}
#viewer .footer button {float:left; position:relative; overflow:hidden; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:0; background:#333; font-size:14px; color:#FFF; line-height:99px; -webkit-appearance:none;}

#viewer .page_btns {float:left;}
#viewer .page_btns button:before,
#viewer .page_btns button:after {position:absolute; top:14px; left:9px; width:0; height:0; border:11px solid transparent; border-top:0; border-bottom:12px solid #FFF; content:'';}
#viewer .page_btns button:after {top:15px; border-bottom-color:#333;}
#viewer .page_btns .next:before {border-top:12px solid #FFF; border-bottom:0;}
#viewer .page_btns .next:after {border-top:12px solid #333; border-bottom:0; top:13px;}

#viewer .zoom_btns {float:right; padding-right:4px;}
#viewer .zoom_btns .zoom_out:before,
#viewer .zoom_btns .zoom_in:before,
#viewer .zoom_btns .zoom_in:after {position:absolute; top:19px; left:10px; width:19px; height:1px; background:#FFF; content:'';}
#viewer .zoom_btns .zoom_in:after {top:10px; left:19px; width:1px; height:19px;}

#viewer .inp_page,
#viewer .inp_zoom {float:left; padding:0 4px;}
#viewer .inp_page input,
#viewer .inp_zoom input {float:left; width:50px; height:24px; margin:8px 4px 8px 0; padding:0; border:0; border-radius:2px; background:#FFF; box-shadow:0 3px 7px rgba(0,0,0,0.3) inset; font-size:14px; color:#333; line-height:24px; text-align:center; -webkit-appearance:none;}

#viewer .zoom_btns .inp_fit,
#viewer .zoom_btns .inp_two {float:left; position:relative; width:24px; height:24px; margin:8px 4px; border-radius:2px;}
#viewer .zoom_btns .inp_fit:hover,
#viewer .zoom_btns .inp_two:hover {background:#666;}
#viewer .zoom_btns .inp_fit.on,
#viewer .zoom_btns .inp_two.on {background:#AAA; box-shadow:0 3px 7px rgba(0,0,0,0.3) inset;}
#viewer .zoom_btns .inp_fit.on:hover,
#viewer .zoom_btns .inp_two.on:hover {background:#AAA;}
#viewer .zoom_btns .inp_fit input,
#viewer .zoom_btns .inp_two input {float:left; width:24px; height:24px; margin:0; padding:0; border:0; opacity:0;}
#viewer .zoom_btns .inp_fit label,
#viewer .zoom_btns .inp_two label {position:absolute; top:0; left:0; overflow:hidden; width:24px; height:24px; line-height:99px; cursor:pointer;}
#viewer .zoom_btns .inp_fit label:after {position:absolute; top:4px; left:4px; width:16px; height:16px; background:#FFF; box-shadow:0 0 3px #000; font-size:15px; color:#000; line-height:16px; text-align:center; content:'\2194';}
#viewer .zoom_btns .inp_two label:before,
#viewer .zoom_btns .inp_two label:after {position:absolute; top:4px; left:4px; width:7px; height:16px; background:#FFF; box-shadow:0 0 3px #000; content:'';}
#viewer .zoom_btns .inp_two label:after {left:13px;}

#contents {position:fixed; top:40px; bottom:40px; left:0; overflow:auto; width:100%; max-width:400px; padding:0 10px; background:#43444A; color:#FFF; transition:left 0.3s; visibility:visible;}
#contents.closed {left:-400px; transition:unset; visibility:hidden;}
#contents ul {margin:10px 0; padding:0; list-style:none;}
#contents li {margin:0; padding:0;}
#contents a {color:#FFF;}
#contents a:hover {color:#FFF; text-decoration:none;}
#contents li li a {display:block; margin:0 -10px; padding:0 20px;}
#contents li li a:hover {background:#07B;}
#contents>ul>li>a {font-weight:600;}
#contents>ul>li>a:before {content:'\002D\0020';}
#contents>ul>li>a:after {content:'\0020\002D';}