@charset "utf-8";
*{position: relative; }
body { font-size:14px; letter-spacing:-0.03em; min-width:320px;  background-color: #3e3e3e; overflow-x: hidden; word-break: keep-all;}
#wrap { position: relative; height: 100%;}

*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #282828;
}
*::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: grey;
}


.container { height: 100%; display: flex; flex-direction: column; justify-content: center;}
.top_box { z-index: 510; position: absolute; top: 0; left: 0; width: 100%; height: 80px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.content_box { z-index: 50; position: relative; display: flex; width: 100%; justify-content: center; align-items: center; padding: 80px; height: 100%; box-sizing: border-box; height: 100vh; overflow: hidden; }
.bottom_box { z-index: 510; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center;}

.top_box h1 { padding-left: 25px;}
.top_box .list { padding-right: 25px; display: flex;}

.top_box .list.deactive{ display: none;}
.top_box .list a { background-color: #282828; background-repeat: no-repeat; background-size: cover; display: block; width: 40px; height: 40px; border-radius: 5px; text-indent: -9999px; margin-left: 10px; transition: all ease 0.3s;}
.top_box .list a:hover { transform: translate(0, 3px);}
.top_box .list a.bg1 { background-image: url(../images/btn_top1_off.png);}
.top_box .list a.bg2 { background-image: url(../images/btn_top2_off.png);}
.top_box .list a.bg3 { background-image: url(../images/btn_top3_off.png);}
.top_box .list a.bg4 { background-image: url(../images/btn_top4_off.png);}
.top_box .list a.bg5 { background-image: url(../images/btn_top5_off.png);}
.top_box .list a.bg5.active { background-image: url(../images/btn_top5_2_off.png);}
.top_box .list a.bg6 { background-image: url(../images/btn_top6_dark.png);}
.top_box .list a.bg1:hover { background-image: url(../images/btn_top1_on.png);}
.top_box .list a.bg2:hover { background-image: url(../images/btn_top2_on.png);}
.top_box .list a.bg3:hover { background-image: url(../images/btn_top3_on.png);}
.top_box .list a.bg4:hover { background-image: url(../images/btn_top4_on.png);}
.top_box .list a.bg5:hover { background-image: url(../images/btn_top5_on.png);}
.top_box .list a.bg5.active:hover { background-image: url(../images/btn_top5_2_on.png);}
.top_box .list a.bg6:hover { background-image: url(../images/btn_top6_on.png);}


/* .page_box { display: flex;  height: 100%; text-align: center; justify-content: center; width: 800px; } */
/* .page_box img{max-height: 100%; } */
/* .page_box > div{ display: none; }
.page_box > div.now{ display: block; } */
/* .page_box > div.now{left: 0;}
.page_box > div.now_pair{right: 0;}
.page_box > div.prev{left: 0;}
.page_box > div.next{right: 0;} */

.page_item{
  /* image-rendering: pixelated; */
  transform-origin: 0px 0px;
}
.page_box .turn-page {
  background-color: #ccc;
  background-size: 100% 100%;
}
.page_box .page{
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.zoom_box { position: absolute; right: 25px; bottom: 80px; display: flex; flex-direction: column; gap:10px; z-index: 510; }
.zoom_box .btn_plus { background: #282828 url(../images/bg_plus.png) no-repeat center;display: block; width: 40px; height: 30px; border-radius: 5px; text-indent: -9999px;}
.zoom_box .btn_minus { background: #282828 url(../images/bg_minus.png) no-repeat center;display: block; width: 40px; height: 30px; border-radius: 5px; text-indent: -9999px;}
.zoom_box .curr { width: 40px;  background-color: #282828; color: white; font-size: 12px; font-weight: 600;width: 40px; line-height: 30px; text-align: center; border-radius: 5px;}
.zoom_box .curr a{ display: block; width: 100%; height: 100%; line-height: 30px;}

.btn_page { position: absolute; top: 50%;width: 100%; z-index: 510;}
.btn_page a { position: absolute; width: 48px; height: 48px; display: block; text-indent: -9999px; transition: all ease 0.3s;}
.btn_page a.btn_prev_page { left: 0; background:#282828 url(../images/btn_prev2.png) no-repeat; border-radius:0 5px 5px 0;}
.btn_page a.btn_next_page { right: 0; background:#282828 url(../images/btn_next2.png) no-repeat; border-radius:5px 0 0 5px;}
.btn_page a.btn_prev_page:hover {transform: translate(-4px, 0); }
.btn_page a.btn_next_page:hover {transform: translate(4px, 0); }


.control_box { background-color: #282828; border-radius: 5px;  height: 40px; display: flex; align-items: center; padding: 0 15px;}
.control_box .page_num { display: flex; align-items: center; font-weight: 400; color: #909090; order: 3; margin: 0 5px;}
.control_box .page_num .curr { height: 24px; width: 50px; color: #3e3e3e; border: 0; background-color: #efefef; text-align: center; border-radius: 5px; margin-right: 10px;}
.control_box a {margin: 0 5px; text-indent: -9999px; width: 24px; height: 24px; display: block;}
.control_box a.bg1 {background-image: url(../images/btn_first.png);}
.control_box a.bg2 {background-image: url(../images/btn_prev.png);}
.control_box a.bg3 {background-image: url(../images/btn_next.png); order: 4;}
.control_box a.bg4 {background-image: url(../images/btn_last.png); order: 5;}
.bottom_box .btn_pdf { position: absolute; bottom: 20px; right: 25px;
background: url(../images/btn_bottom1_dark.png) no-repeat;display: block;
width: 40px; height: 40px; border-radius: 5px; text-indent: -9999px;transition: all ease 0.3s;}
.bottom_box .btn_pdf:hover { transform: translate(0, 3px);}


/* 레이어 box */
a.btn_close { position: absolute; top: 20px; right: 25px; background: url(../images/btn_top6_dark.png) no-repeat center; display: block; width: 40px; height: 40px; text-indent: -9999px;transition: all ease 0.3s;}
a.btn_close:hover { background: url(../images/btn_top6_dark.png) no-repeat / cover;}

.right_box { position: fixed; bottom: 0; right: -500px; top: 0; z-index: 1; transition: all .5s ease-in-out; width: 400px; height: 100%; background-color: rgba(72, 72, 72, 0.95); box-sizing: border-box; padding:80px 10px 40px 40px; box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.05);
visibility: hidden;}
.right_box.active {visibility: visible;}

#print_box.right_box { opacity: 0; right:0; width: 100%; background-color: rgba(72, 72, 72, 1); }



#overlay { background: #000; bottom: 0; height: 100%; left: 0; opacity: 0; overflow: hidden; position: fixed; right: 0; top: 0; visibility: hidden; width: 100%; z-index: 99; transition: all .5s ease-in-out; display:none; }
#overlay.active { opacity: .65; visibility: visible;transition: all .5s ease-in-out; display: block;}

#search_box.active { right: 0;  z-index: 600;}
#index_box.active { right: 0;   z-index: 600;}
#allpage_box.active { right: 0; z-index: 600;}
#print_box.active { z-index: 600; opacity: 1;}


/* 전체이미지보기 */
.scroll_box { height: 100%; overflow-y: scroll; }
.ps {
  height: 100%;
}
.mCSB_scrollTools .mCSB_draggerRail { width: 6px !important;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px !important;}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.2) !important;}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0,0,0,0.5) !important;}

/* 검색 */
.search_top { width: 320px;}
.search_top .search_input { border-bottom: 2px solid #bdbdbd; display: flex; justify-content: space-between; }
.search_top .search_input input[type="text"] { border: 0; height: 40px; width: 100%; background-color: rgba(0, 0, 0, 0); color: white; padding: 0 10px;}
.search_top .search_input a { display: inline-block; width:40px; height: 40px; text-indent: -9999px; background: url(../images/btn_top1_off.png) no-repeat center;}
.search_top .p_result { font-size: 16px; padding: 20px 0; color: white; }

#search_box em { color: #ff6600;}
#search_box .em2 { color: #0587d9;}

#search_box .scroll_box { height: calc(100% - 100px);}
.list_search { width: 320px;}
.list_search > li { padding: 10px;}
.list_search > li > a {color: #b0b0b0;  line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.list_search > li > a:hover { color: white;  text-decoration: underline;}
.list_search > li .p_page { background: #0587d9; border-radius: 5px; display: inline-block; padding: 2px 5px; color: #fff; margin-right: 5px;}


/* 목차 보기 */
.list_index { width: 320px; border-top: 1px solid #bdbdbd;}
.list_index > li { border-bottom: 1px solid #bdbdbd;}
.list_index > li > a { display: block; padding:10px 30px 10px 15px; font-weight: 600; color: #b0b0b0; background: url(../images/bg_arrow.png) no-repeat 95% center;transition: all ease 0.3s;}
.list_index > li > a:hover { color: #fff;background: url(../images/bg_arrow.png) no-repeat 96% center;}


.list_page { display: flex; flex-wrap: wrap;}
.list_page > li { padding:10px;}
.list_page > li > a > img { border: 1px solid #c7c7c7;transition: all ease 0.3s; width: 130px; height: 160px; }
.list_page > li > a:hover > img { border: 1px solid #000; box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.1); }

/* 인쇄 */
#print_box { display: flex; justify-content: center;}
.print_option { width: 300px; padding-right: 40px;}
.print_option h2 { font-size: 22px; font-weight: 600; padding: 20px;}
.print_option > ul { border-top: 1px solid #e0e0e0;}
.print_option > ul > li { display: flex; border-bottom: 1px solid #e0e0e0; padding: 20px; align-items: center;}
.print_option > ul > li > span { width: 40%;}
.print_option > ul > li > span label { margin-left: 5px; font-weight: 600;}
.print_option > ul > li > div { width: 60%; display: flex; align-items: center; justify-content: space-between;}
.print_option > ul > li select { width: 100%; border-radius: 5px; border: 1px solid #e4e4e4; height: 40px;}
.print_option > ul > li input[type="text"] { width: 40%; border-radius: 5px; border: 1px solid #e4e4e4; height: 40px;}
.print_option .btn_print { margin: 20px 0 0 20px; width: 110px; line-height: 40px; text-align: center; display: inline-block; background:#0587d9; color: #fff; border-radius: 5px; transition: all ease 0.3s;}
.print_option .btn_print:hover { background: #000;}
#print_box .scroll_box { height:100%;}

.dragarea{position: fixed; width: 100%; height: 100%; cursor: grab; display: none; }
.dragarea.active{display: block; z-index: 500; }
.page_box_wrapper{position: absolute; }

.vertical-slider{
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
  width: 40px;
  height: 110px;
  padding: 0;
}

*{ image-rendering: -webkit-optimize-contrast; }
.page_wrapper{
  /* overflow: auto;
  cursor: grab; */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
}

@media all and (max-width:1260px) {
}

@media all and (max-width:800px) {
    .top_box { height: 60px; gap: 20px;}
    .top_box h1 { padding-left: 10px;}
    .top_box .list { padding-right: 10px;}
    .top_box .list a { margin-left: 5px;}
    .top_box .list a.bg4 { display: none;}
    .top_box .list a.bg5 { display: none;}
    .top_box .list a.bg6 { display: none;}
    .content_box { padding: 30px;}
    .page_box > div:nth-child(2) { display: none;}
    .zoom_box { right: 10px; bottom: 60px;}
    .bottom_box { height: 60px;}
    .bottom_box .btn_pdf { position: relative; bottom: auto; right: auto; margin-left: 5px;}
}

@media all and (max-height:760px) {
  .vertical-slider-wrapper{display: none; }
  .vertical-slider{ display: none; }
}
@media all and (max-height:490px) {
  .zoom_box{flex-direction: row; right: 75px; bottom: 20px; }
  .zoom_box .curr, .zoom_box .btn_minus, .zoom_box .btn_plus{height: 40px; }
  .zoom_box .curr a{line-height: 40px; }
}

@media all and (max-width:800px) and (max-height:490px) {
  .zoom_box{ right: 10px; bottom: 10px; }
}