@font-face {
    font-family:"NanumSquareRound";
    src:url("fonts/NanumSquareRoundL.woff2") format("woff2"),url("fonts/NanumSquareRoundL.woff") format("woff");
    font-style:normal;font-weight:300;
}
@font-face {
    font-family:"NanumSquareRound";
    src:url("fonts/NanumSquareRoundR.woff2") format("woff2"),url("fonts/NanumSquareRoundR.woff") format("woff");
    font-style:normal;font-weight:400;
}
@font-face {
    font-family:"NanumSquareRound";
    src:url("fonts/NanumSquareRoundB.woff2") format("woff2"),url("fonts/NanumSquareRoundB.woff") format("woff");
    font-style:normal;font-weight:500;
}
@font-face {
    font-family:"NanumSquareRound";
    src:url("fonts/NanumSquareRoundEB.woff2") format("woff2"),url("fonts/NanumSquareRoundEB.woff") format("woff");
    font-style:normal;font-weight:600;
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/
/* Modify Start ***************************************************************************************************************************/
/*----------------------------------------------------------------------------------------------------------------------------------------*/


.not_web{
    font-family: "NanumSquareRound";
    font-weight: 500;
    text-align: center;
    position: absolute;
    width: 85%;
    text-align: center;
    padding: 20px;
    background-color: #C7CACE;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 18px;
    height: 160px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
    border-radius: 20px;
}

/* basic background */
.book-basic-bg{
    background-color: #F0EEE5 !important;
    /* background:url('../img/common/background.png') center center repeat; background-size:100% 100%; */
}

/* book container */
#contents_section{user-select:none;}

.cover_view_bg{
    position:absolute; top:0px; left:0px; 
    /* background:url('../img/common/book_outline_bg.png') no-repeat; background-size:100% 100%; */
}

#cover_leftpage{position:relative; float:left;}
.cover_left_page{margin:0px; border:0px; width:0px; height:0px;}
.page_frame_left{position:absolute; border:0px; width:0px; height:0px;}

#cover_rightpage{position:relative; float:left;}
.cover_right_page{margin:0px; border:0px; width:0px; height:0px;}
.page_frame_right{position:absolute; border:0px; width:0px; height:0px;}

#cover_rightpage:after{position:absolute; display:inline-block; left:-10px; top:0px; width:20px; height:100%; background:url('../img/common/book_outline_center.png') repeat-y; background-size:100% 100%;  z-index:10000; content:''}

#cover_onepage{position:absolute; top:0px; left:0px; display:none; background-color:#dadada; overflow:hidden;}
#cover_onepage .canvas-container
{position:absolute; top:0px; left:0px; pointer-events:none;}

.frame_cover{position:relative; top:0px; left:0px; overflow:hidden;}
#frame_onepage{position:absolute; border:none; top:0px; left:0px; width:100%; height:100%; }

/* bookMark btn */
.btnBoomMark{
    position:absolute; 
    display:inline-block;
    top:8%; 
    width:78px; 
    height:80px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain !important;
    cursor:pointer;
 }
.btnBoomMark.on, 
.btnBoomMark:hover{background:url('../img/navi/nav_bookmark_over.png') no-repeat;}
.btnBoomMark.left{
    left:-78px;
    background-image: url('../img/navi/nav_bookmark_left.png');
}
.btnBoomMark.right{
    right:-78px;
    background-image: url('../img/navi/nav_bookmark_right.png');
}
.btnBoomMark.left.on, 
.btnBoomMark.left:hover{
    background-image: url('../img/navi/nav_bookmark_left_over.png');
}
.btnBoomMark.right.on, 
.btnBoomMark.right:hover{
    background-image: url('../img/navi/nav_bookmark_right_over.png');
}

/* page move */
#btn_page_prev{}
#btn_page_next{}
.btn_page_move{
    position:absolute; top:50%; 
    width: 52px;
    height: 104px;
    z-index:1000; display:none; border:0px; outline:0px;
}
.btn_page_move{cursor:pointer; background-size:contain;}
.btn_page_move.prev{background:url('../img/navi/pagemove_prev.png') no-repeat; left:0px;}
.btn_page_move.next{background:url('../img/navi/pagemove_next.png') no-repeat; right:0px;}
.btn_page_move.prev:hover{background:url('../img/navi/pagemove_prev_over.png') no-repeat;}
.btn_page_move.next:hover{background:url('../img/navi/pagemove_next_over.png') no-repeat;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/
/* global navigation bar */
.top_menu{position:absolute; display:none;}
.top_menu_handle{}
.top_menu_handle.off{}

.navTop{
    position:absolute; 
    left:0;
    right: 0; 
    bottom: -104px;
    top: auto !important;
    margin: auto;
    width:1660px; 
    height:161px; 
    background-image: url('../img/navi/nav_bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    text-align:center;
    transition: all ease .5s;
}
.navTop.open{
    bottom: 0;
}
.navTop .top_menu_handle{
    display: block;
    width: 102px;
    height: 51px;
    background-image: url('../img/navi/menu_close.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    cursor: pointer;
}
.navTop .top_menu_handle:hover{
    background-image: url('../img/navi/menu_close_over.png');
}
.navTop.open .top_menu_handle{
    background-image: url('../img/navi/menu_open.png');
}
.navTop.open .top_menu_handle:hover{
    background-image: url('../img/navi/menu_open_over.png');
}

#top_menu.navTop .menu_gnb{
    width: 100%;
    padding-left: 104px;
    padding-top: 59px;
    padding-right: 88px;
}
.navTop .menu_gnb{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navTop .menu_gnb .button-group{
    display: flex;
}
.navTop .menu_gnb .button-group .gnb{
    width: 114px;
    height: 102px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    border: 0;
    background-color: transparent;
    margin-right: 21px; /* 20250120 메뉴 삭제로 인한 마진 변경*/
}
.navTop .menu_gnb .button-group .gnb.hold{
    pointer-events: none;
    opacity: .5;
}

.navTop .menu_gnb .button-group .gnb.gnb01{ background-image: url('../img/navi/navTop_btn_01.png');}
.navTop .menu_gnb .button-group .gnb.gnb01:hover{ background-image: url('../img/navi/navTop_btn_01_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb02{ background-image: url('../img/navi/navTop_btn_02.png');}
.navTop .menu_gnb .button-group .gnb.gnb02:hover{ background-image: url('../img/navi/navTop_btn_02_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb03{ background-image: url('../img/navi/navTop_btn_03.png');}
.navTop .menu_gnb .button-group .gnb.gnb03:hover{ background-image: url('../img/navi/navTop_btn_03_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb04{ background-image: url('../img/navi/navTop_btn_04.png');}
.navTop .menu_gnb .button-group .gnb.gnb04:hover{ background-image: url('../img/navi/navTop_btn_04_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb05{ background-image: url('../img/navi/navTop_btn_05.png');}
.navTop .menu_gnb .button-group .gnb.gnb05:hover{ background-image: url('../img/navi/navTop_btn_05_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb06{ background-image: url('../img/navi/navTop_btn_06.png');}
.navTop .menu_gnb .button-group .gnb.gnb06:hover{ background-image: url('../img/navi/navTop_btn_06_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb06.btnZoomOut{ background-image: url('../img/navi/navTop_btn_07.png');}
.navTop .menu_gnb .button-group .gnb.gnb06.btnZoomOut:hover{ background-image: url('../img/navi/navTop_btn_07_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb08{ background-image: url('../img/navi/navTop_btn_08.png');}
.navTop .menu_gnb .button-group .gnb.gnb08:hover{ background-image: url('../img/navi/navTop_btn_08_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb09{ background-image: url('../img/navi/navTop_btn_09.png');}
.navTop .menu_gnb .button-group .gnb.gnb09:hover{ background-image: url('../img/navi/navTop_btn_09_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb10{ background-image: url('../img/navi/navTop_btn_10.png');}
.navTop .menu_gnb .button-group .gnb.gnb10:hover{ background-image: url('../img/navi/navTop_btn_10_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb11{ background-image: url('../img/navi/navTop_btn_11.png');}
.navTop .menu_gnb .button-group .gnb.gnb11:hover{ background-image: url('../img/navi/navTop_btn_11_over.png'); }

.navTop .menu_gnb .button-group .gnb.gnb12{ background-image: url('../img/navi/navTop_btn_12.png');}
.navTop .menu_gnb .button-group .gnb.gnb12:hover{ background-image: url('../img/navi/navTop_btn_12_over.png'); }



.navTop .paging-group .page_input_wrap{
    display: flex;
    width: 200px;
    height: 60px;
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    background-image: url('../img/navi/bg_page_move.png');
    align-items: center;
    justify-content: center;
    font-family:'nanumSB';
    font-size: 20px;
    color: #CBB2A4;
    padding-right: 53px;
    letter-spacing: -1px;
    top: 7px;
}

.navTop .paging-group .page_input_wrap span{
    padding-left: 7px;
}

.navTop .paging-group .page_input_wrap > div{
    display: flex;
    align-items: center;
}
.navTop .paging-group .page_input_wrap input{
    background-color: transparent;
    border: 0;
    width: 60px;
    color: #fff;
    font-family:'nanumSB';
    font-size: 20px;
    text-align: right;
    letter-spacing: -0.5px;
}

.navTop .paging-group .page_input_wrap .btnGoto{
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    background-image: url('../img/navi/btn_page_move.png');
    width: 42px;
    height: 42px;
    position: absolute;
    top: 10px;
    right: 8px;
}
.navTop .paging-group .page_input_wrap .btnGoto:hover{
    background-image: url('../img/navi/btn_page_move_over.png');
}





/* global navigation bar - pagemove */
.navBottom{position:absolute; left:0px; bottom:-97px; width:100%; height:100px; background:url('../img/navi/nav_bottom_bg.png') 0px 0px repeat-x; text-align:center;}
.navBottom .bottom_menu_handle{
    position:absolute;
    display:inline-block; left:50%; bottom:97px; width:140px; height:48px; margin-left:-70px; background:url('../img/navi/page_handle_top.png') center center no-repeat; cursor:pointer;
    z-index:1;
}
.navBottom .bottom_menu_handle.off{background:url('../img/navi/page_handle_bottom.png') center center no-repeat; }
.navBottom .menu_gnb .pagemove{
    display:inline-block;
    margin-left:10px;
    width: 1198px;
}
.navBottom .menu_gnb .pagemove .gnb{vertical-align:middle; width:56px; height:56px; margin:20px 3px; border:0; outline:0;}
.navBottom .menu_gnb .pagemove .btnThumbnail{margin-left:15px; background:url('../img/navi/nav_thumnail.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnPrev{background:url('../img/navi/thumnail_prev.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnNext{background:url('../img/navi/thumnail_next.png') no-repeat;}
.navBottom .menu_gnb .pagemove .page_input_wrap{display:inline-block; height:55px; line-height:55px; vertical-align:middle; padding:0 5px 0 15px; background:#fcd108; border:1px solid #fcd108; border-radius:50px;}
.navBottom .menu_gnb .pagemove .page_input_wrap li{display:inline-block; vertical-align:top; font-size:18px; color:#0e2860; padding-right:10px;}
.navBottom .menu_gnb .pagemove .page_input_wrap .page_amount{font-size:24px; color:#0e2860;}
.navBottom .menu_gnb .pagemove .page_input_wrap .bgGoto{
    width:65px;
    height:42px;
    margin-top:-5px;
    border:0;
    outline:0;
    padding:0;
    font-size:24px;
    text-align:center;
    font-family:'nanumS';
    background-color: #fcd108;
}
.navBottom .menu_gnb .pagemove .page_input_wrap .btnGoto{width:64px; height:44px; background:url('../img/navi/nav_pagemove.png') no-repeat; margin-top:5px;}

.navBottom .menu_gnb .pagemove .btnThumbnail:hover{background:url('../img/navi/nav_thumnail_over.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnPrev.disabled,
.navBottom .menu_gnb .pagemove .btnPrev.disabled:hover{background:url('../img/navi/thumnail_prev_disabled.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnPrev:hover{background:url('../img/navi/thumnail_prev_over.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnNext.disabled,
.navBottom .menu_gnb .pagemove .btnNext.disabled:hover{background:url('../img/navi/thumnail_next_disabled.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnNext:hover{background:url('../img/navi/thumnail_next_over.png') no-repeat;}
.navBottom .menu_gnb .pagemove .btnGoto:hover{background:url('../img/navi/nav_pagemove_over.png') no-repeat;}

.navBottom .menu_gnb .pagemove .bgGoto[type=number]::-webkit-inner-spin-button, 
.navBottom .menu_gnb .pagemove .bgGoto[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

.navBottom .menu_gnb .pagemove .page_scroll{display:inline-block; vertical-align:middle; margin:0  30px;}
.navBottom .menu_gnb .pagemove .page_scroll div{display:inline-block; vertical-align:middle; cursor:pointer;}
.navBottom .menu_gnb .pagemove .page_scroll .page_tip{position:absolute; top:-75px; left:-196px; width:434px; height:76px; background:url('../img/navi/tip_bg.png') no-repeat; z-index: 10052; font-size: 18px;}
.navBottom .menu_gnb .pagemove .page_scroll .page_tip .page_num{display:inline-block; float:left; width:132px; padding-left:28px; padding-right:18px; color:#0e2860; line-height:46px;}
.navBottom .menu_gnb .pagemove .page_scroll .page_tip .page_title{color:#5f7382;float:left;padding-top:16px;padding-left:0px;}
.navBottom .menu_gnb .pagemove .page_scroll .page_prev{width:44px; height:44px; background:url('../img/navi/page_prev.png') no-repeat;}
.navBottom .menu_gnb .pagemove .page_scroll .page_bar{position:relative; width:525px; height:8px; margin:0 15px; background:#5c79b5; border-radius:20px; box-shadow: none; border: none;}
.navBottom .menu_gnb .pagemove .page_scroll .page_bar .page_act{position:absolute; left:0; width:100px; height:8px; background:#c887c3; border-radius:20px; }
.navBottom .menu_gnb .pagemove .page_scroll .page_bar .page_round{position:absolute; left:95px; top:-6px; width:44px; height:28px; background:url('../img/navi/page_round.png') no-repeat;}
.navBottom .menu_gnb .pagemove .page_scroll .page_next{width:44px; height:44px; background:url('../img/navi/page_next.png') no-repeat;}

.navBottom .menu_gnb .page_bar .noUi-handle{top:-15px; width:44px; height:28px; background:url('../img/navi/page_round.png') no-repeat;border:0px;box-shadow:none; cursor:pointer;}
.navBottom .menu_gnb .page_bar .noUi-connect {top:-7px; height:8px; background:#5c79b5; border-radius:20px;border:0px;box-shadow:none;}

/*
#pageSlider .noUi-target{height:4px; background-color:#dbdadd; border-radius:50px; border:1px solid #dbdadd; box-shadow:none; margin-top:20px;}
#pageSlider .noUi-handle{top:-16px; width:44px; height:28px; background:url('../img/navi/page_round.png') no-repeat;border:0px;box-shadow:none; cursor:pointer;}
#pageSlider .noUi-handle:after,
#pageSlider .noUi-handle:before{display:none;}
*/



/* global navigation bar - quick Menu */
.quickMenu{position:absolute; display:block; bottom:135px; right:20px;}

.quickMenu .quickMenuWarp .quickbtn{
    width: 50px;
    height: 52px;
    position: relative;
    margin-bottom: 10px;
}
.quickMenu .quickMenuWarp .quickbtn .qbtn{
    width: 50px;
    height: 52px;
    border: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}
.quickMenu .quickMenuWarp .quickbtn .qbtn:before{
    content: "";
    height: 23px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 53px;
    margin: auto;
    opacity: 0;
    pointer-events: none;
}
.quickMenu .quickMenuWarp .quickbtn .qbtn:hover:before{
    opacity: 1;
}
.quickMenu .quickMenuWarp .quickbtn .qbtn.hold{
    pointer-events: none;
    opacity: .5;
}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_01{ background-image: url('../img/quick/qmenu_01.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_01:hover{ background-image: url('../img/quick/qmenu_01_over.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_01:before{ background-image: url('../img/quick/qmenu_01_tip.png'); width: 67px;}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_02{ background-image: url('../img/quick/qmenu_02.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_02:hover{ background-image: url('../img/quick/qmenu_02_over.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_02:before{ background-image: url('../img/quick/qmenu_02_tip.png'); width: 50px;}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_03{ background-image: url('../img/quick/qmenu_03.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_03:hover{ background-image: url('../img/quick/qmenu_03_over.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_03:before{ background-image: url('../img/quick/qmenu_03_tip.png'); width: 80px;}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_04{ background-image: url('../img/quick/qmenu_04.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_04:hover{ background-image: url('../img/quick/qmenu_04_over.png');}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_05{ background-image: url('../img/quick/qmenu_05.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_05:hover{ background-image: url('../img/quick/qmenu_05_over.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_05:before{ background-image: url('../img/quick/qmenu_05_tip.png'); width: 96px;}

.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_06{ background-image: url('../img/quick/qmenu_06.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_06:hover{ background-image: url('../img/quick/qmenu_06_over.png');}
.quickMenu .quickMenuWarp .quickbtn .qbtn.qbtn_06:before{ background-image: url('../img/quick/qmenu_06_tip.png'); width: 64px;}


.quickMenu .quickMenuWarp .quickbtn.qbtn_02:before,
.quickMenu .quickMenuWarp .quickbtn.qbtn_05:before{
    content: "";
    height: 23px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 53px;
    margin: auto;
    opacity: 0;
    pointer-events: none;
}
.quickMenu .quickMenuWarp .quickbtn:hover:before{
    opacity: 1;
}
.quickMenu .quickMenuWarp .quickbtn.qbtn_02:before{ background-image: url('../img/quick/qmenu_02_tip.png'); width: 50px;}
.quickMenu .quickMenuWarp .quickbtn.qbtn_05:before{ background-image: url('../img/quick/qmenu_05_tip.png'); width: 96px;}


.quickMenu .quickMenuWarp .quickbtn .quickOver{
    display: none;
    position: absolute;
    top: -25px;
    right: 45px;
    width: 111px;
    height: 108px;
    background-color: transparent;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../img/quick/qmenu_04_bg.png');
    padding: 2px 13px 0 2px;
}

.quickMenu .quickMenuWarp .quickbtn .quickOver .quickOverBtn{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 33px;
    font-family: 'nanumS';
    margin-bottom: 1px;
    font-size: 15px;
    color: #6B553F;
    cursor: pointer;
}
.quickMenu .quickMenuWarp .quickbtn .quickOver .quickOverBtn:hover{
    background-color: #FBC079;
}
.quickMenu .quickMenuWarp .quickbtn .quickOver .quickOverBtn:first-child{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.quickMenu .quickMenuWarp .quickbtn .quickOver .quickOverBtn:last-child{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.quickMenu .quickMenuWarp .quickbtn:hover .quickOver{
    display: block;
}
.quickMenu .quickMenuWarp .quickbtn:hover .qbtn.qbtn_04{ background-image: url('../img/quick/qmenu_04_over.png');}

.btnNone{display:none !important}/* Temp */

/*----------------------------------------------------------------------------------------------------------------------------------------*/
/* Modify End *****************************************************************************************************************************/
/*----------------------------------------------------------------------------------------------------------------------------------------*/

iframe{}

.cover_loader{position:absolute; width:100%; height:100%; background-color:#a7bfd0; opacity:.5; top: 0px; left: 0px;}

.page_loader {position: absolute; width:100%; height:100%; background-color:#FFFFFF; opacity:1; top: 0px; left: 0px; display:none;}

.loader{position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; width:120px; height:120px; border:16px solid #f3f3f3; /* Light grey */ border-top:16px solid #3498db; /* Blue */ border-radius:50%; animation:spin 2s linear infinite;}

@keyframes spin{ 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

.jsgrid tr{ 
word-break:break-all; word-wrap:break-word; /* IE 5.5+ and CSS3 */
word-wrap:break-word; /* IE 5.5+ and CSS3 */
white-space:pre-wrap; /* CSS3 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
}

.jsgrid-cell{
border :0px;
}

.canvas-container{position:absolute; top :0px; left :0px;}

.menu_logo{width:75px; vertical-align:middle; float:left; background-color:#FFFFFF; margin-right:12px; margin-top:-10px; padding:5px;}


#drawingCanvasOnepage{position:absolute; top:0px; left:0px; }
#cover_bookmark{pointer-events:none;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/
.scroll-wrapper-tourch {-webkit-overflow-scrolling:touch; overflow-y:scroll;} 

#touchscroll {
position:absolute; top:0px; left:0px; pointer-events:none; 
cursor:move; /* fallback if grab cursor is unsupported */
cursor:grab; 
cursor:-moz-grab; 
cursor:-webkit-grab; /*background-color:#FFFFCC; */
}

#touchscroll:active {
cursor:grabbing; 
cursor:-moz-grabbing; 
cursor:-webkit-grabbing;
}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------------------------*/

#naviSliderArea {height:31px;}

#zoomSlider {position:absolute; width:90px; top:131px; left:5px;}

#naviHandle {position:absolute; top:0px; left:0px; width:55px; height:36px; background:rgba(255,0,0,0.2); border-style:solid; border:2px solid #ff0000; cursor:move;}

#canvas_highlight{position:absolute; top:0px; left:0px; pointer-events:none; background-color:transparent; /*background-color:blue; opacity:.5; */}

#cover_bookmark{position:absolute; top:0px; left:0px; pointer-events:none;}

#menu_contents{}

.bookmark {position:absolute; width:60px; height:81px; display:none;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

.leftpage {top:0px; left:20px;}
.rightpage {top:0px; right:20px;}
.top {top:0px; left:0px;}
.bottom {bottom:0px; left:0px;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

.menu_detector {position:absolute; width:100%; height:10px;}

/*
.menu_handle img {width:60px; height:10px; cursor:pointer;}
.menu_handle_top {position:absolute; left:calc(50% - 30px); top:54px;}
*/

.menu_handle_bottom {position:absolute; left:calc(50% - 30px); top:-15px;}

#bottom_menu {/*position:absolute; padding-top:12px; padding-left:15px; background-color:#5b738d; opacity:.9; */vertical-align:middle;}
#bottom_menu .search {display:none}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

/* pageNavigation */

#pageNavigation{position:absolute; display:none;}

.page_selector{display:none;}
.page_selector_title{}
.page_selector_img{}
.page_selector img{}

/* pageNavigation */

/*----------------------------------------------------------------------------------------------------------------------------------------*/
/* zoom move */
#btn_move_left {
position:absolute; width:70px; height:70px; top:calc(50% - 35px); left:50px; border:0px; background:url(../../resources/img/common/arrow_in_circle_left.png) no-repeat; display:none; 
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_right {
position:absolute; width:70px; height:70px; top:calc(50% - 35px); right:50px; border:0px; background:url(../../resources/img/common/arrow_in_circle_right.png) no-repeat; display:none; 
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_up {
position:absolute; width:70px; height:70px; top:70px; left:calc(50% - 35px); border:0px; background:url(../../resources/img/common/arrow_in_circle_up.png) no-repeat; display:none; 
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_down {
position:absolute; width:70px; height:70px; bottom:70px; left:calc(50% - 35px); border:0px; background:url(../../resources/img/common/arrow_in_circle_down.png) no-repeat; display:none; 
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

/*
#page_thumbnails {position:absolute; width:100%; height:150px; left:0; bottom:0; background-color:#9ba6ad; display:none;}
*/

.btnClose,
.btnPopupClose{
    width:42px; height:43px; 
    background:url('../img/popup/popup_close2.png') no-repeat; 
    cursor:pointer; border:0; outline:0;
}

/*
#btn_close_thumbnails {position:absolute; width:36px; height:36px; background:url('../img/popup/popup_close.png') no-repeat; cursor:pointer; border:0; outline:0;}
*/

/*----------------------------------------------------------------------------------------------------------------------------------------*/

.jsgrid-table img {background-color:#FFFFFF; vertical-align:middle;}

.page_thumbnail {background-color:#FFFFFF; width:80px; height:120px; margin:15px;}

.iw-contextMenu { z-index:10110;}

.btn-file {
position:relative; 
overflow:hidden;
}

.btn-file input[type=file] {
position:absolute; 
top:0; 
right:0; 
min-width:100%; 
min-height:100%; 
font-size:100px; 
text-align:right; 
filter:alpha(opacity=0); 
opacity:0; 
outline:none; 
background:white; 
cursor:inherit; 
display:block;
}

.floating_button {bottom:70px; right:30px; position:fixed;}

#btn_zoom {}

/*
#contents_thumbnails {width:100%; height:216px; padding-top:15px; background:#A3CBE0; border:2px solid #000; overflow-x:auto; overflow-y:hidden; box-shadow:0 0 10px #000;}
#contents_thumbnails ul {position:relative; float:left; display:inline; margin-right:-999em; white-space:nowrap; list-style:none;}
#contents_thumbnails li {width:140px; margin:0px; text-align:center; float:left; display:inline;}
#contents_thumbnails img {border:0; display:block; border:1px solid #A3CBE0;}
#contents_thumbnails a:active img, #scroll a:focus img, #scroll a:hover img {border:1px solid #000;}
#contents_thumbnails a {text-decoration:none; font-weight:bold; color:#000;}
#contents_thumbnails a:active, #scroll a:focus, #scroll a:hover {color:#FFF;}
#contents_thumbnails span {padding:5px 0 0; display:block;}
*/

.scrollgeneric {line-height:1px; font-size:1px; position:absolute; top:0; left:0;}
.hscrollerbase {height:17px; background:#A3CBE0;}
.hscrollerbar {height:12px; background:#000; cursor:e-resize; padding:3px; border:1px solid #A3CBE0;}
.hscrollerbar:hover {background:#222; border:1px solid #222;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

.flipbook-viewport{position:absolute; overflow:hidden; width:100%; height:100%; pointer-events:none;}
.flipbook-viewport .container{position:absolute; top:0px; left:-15px; margin:auto;}
.flipbook-viewport .flipbook{width:2372px; height:1556px; left:0px; top:0px;}
.flipbook-viewport .page{background-color:white; background-repeat:no-repeat; background-size:100% 100%;}
.flipbook .page{-webkit-box-shadow:0 0 0px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0px rgba(0,0,0,0.2); -ms-box-shadow:0 0 0px rgba(0,0,0,0.2); -o-box-shadow:0 0 0px rgba(0,0,0,0.2); box-shadow:0 0 0px rgba(0,0,0,0.2);}
.flipbook-viewport .page img{-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin:0;}
.flipbook-viewport .shadow{-webkit-transition:-webkit-box-shadow 0.5s; -moz-transition:-moz-box-shadow 0.5s; -o-transition:-webkit-box-shadow 0.5s; -ms-transition:-ms-box-shadow 0.5s; 
-webkit-box-shadow:0 0 0px #ccc; -moz-box-shadow:0 0 0px #ccc; -o-box-shadow:0 0 0px #ccc; -ms-box-shadow:0 0 0px #ccc; box-shadow:0 0 0px #ccc;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/

.icon_link {background:url('../img/icons/icon_link.png') no-repeat;width:60px;height:60px;}
.icon_link:hover {background:url('../img/icons/icon_link_p.png') no-repeat;width:60px;height:60px;}

/* Large desktops and laptops */
@media (min-width:1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width:992px) and (max-width:1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width:768px) and (max-width:991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width:767px) {

}

/* Portrait phones and smaller */
@media (max-width:480px) {
.menu_logo {
width:60px; 
vertical-align:middle; 
float:left; 
background-color:#FFFFFF; 
margin-right:12px; 
margin-top:-3px; 
}

#search_key { 
width:100px; 
}

.input {
font-size:10px; 
}

#btn_move_left {
width:30px;
height:30px;
top:calc(50% - 15px); 
}

#btn_move_right {
width:30px;
height:30px;
top:calc(50% - 15px);
}

#btn_move_up {
width:30px;
height:30px;
left:calc(50% - 15px); 
}

#btn_move_down {
width:30px;
height:30px;
left:calc(50% - 15px); 
}

.floating_button {
right:15px; 
}

#img_btn_zoom {
width:45px;
height:45px;
}

.label {
font-size:14px;
padding:.4em .6em .3em; 
}

#pageNum {
margin-left:0px; 
}
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/

#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: calc(50% - 30px); /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.6s;
    animation: fadein 0.5s, fadeout 0.5s 1.6s;
}

#snackbar_saved {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: calc(50% - 30px); /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar_saved.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.6s;
    animation: fadein 0.5s, fadeout 0.5s 1.6s;
}

#snackbar_noselected {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: calc(50% - 30px); /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar_noselected.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.6s;
    animation: fadein 0.5s, fadeout 0.5s 1.6s;
}


#snackbar_onepage{
    visibility: hidden; /* Hidden by default. Visible on click */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from { opacity: 0;} 
    to { opacity: 1;}
}

@keyframes fadein {
    from { opacity: 0;}
    to { opacity: 1;}
}

@-webkit-keyframes fadeout {
    from { opacity: 1;} 
    to { opacity: 0;}
}

@keyframes fadeout {
    from { opacity: 1;}
    to { opacity: 0;}
}

#btn_allpage{
    display: inline-block !important;
}


.modal-backdrop{
    z-index : 15999;
}

#top_menu .top_menu_handle,
#top_menu .menu_gnb {
    transform-origin: center 0;
}


/* ---------- 2021.08.11 샘플 수정 : 이후 빠른 삭제를 위해 ui_viwer.css에 모든 수정 사항 기입 ----------- */

@font-face {font-family:'NanumGothicR'; font-style:normal; src:local('※'), url('../fonts/NanumGothicR.woff'); }

/* 목차 */
#cbp-spmenu-s1.slidePopupContainer .side-list{
    opacity: 1;
    /* pointer-events: none; */
}

#cbp-spmenu-s1.slidePopupContainer .slide_sample{
    z-index: 2;
    position: absolute;
    top: 500px;
    left: 70px;
    font-size: 17px;
    background-color: rgb(76, 106, 169);
    color: #fff;
    padding: 30px;
    font-family: 'NanumGothicR';

    line-height: 20px;
    display: none;
    
}

/* 상단 메뉴 */

#top_menu .menu_gnb{
    width: 1088px;
}

.navTop .menu_gnb .gnb.btnQuickText{
    background: url(../img/navi/nav_copytext_dim.png) no-repeat;
}

.navTop .menu_gnb .gnb.btnQuickPrint{
    background: url(../img/navi/nav_print_dim.png) no-repeat;
}

.navTop .menu_gnb .gnb.btnData{
    background: url(../img/navi/nav_reflib.png) no-repeat;
}

.navTop .menu_gnb .gnb.btnData:hover{
    background: url(../img/navi/nav_reflib_over.png) no-repeat;
}

.navTop .menu_gnb .gnb.btnQuickSearch{
    background: url(../img/navi/nav_text_search_dim.png) no-repeat;
}

/* 하단 메뉴*/
.navBottom .menu_gnb{
    opacity: 0.5;
    pointer-events: none;
}

.navBottom .bottom_menu_sample{
    position: absolute;
    text-align: center;
    width: 100%;
    color: #fff;
    height: 100%;
    top: 5px;
    z-index: 1;
    font-family: 'NanumGothicR';
    font-size: 16px;
    line-height: 22px;
}

/* 퀵메뉴 */

.quickMenu .quickbtn .btnMyFolder {
    background: url('../img/quick/btn_mylist.png') no-repeat;
}

.quickMenu .quickbtn .btnDraw {
    width: 100%;
    background: url('../img/quick/btn_draw_write_dim.png') no-repeat;
}

.quickMenu .quickbtn .btnQuickBoard {
    
}

.quickMenu .quickbtn:nth-child(3):hover:before{
    background: transparent;
}

.quickMenu .quickbtn:nth-child(4):hover:before{
    background: transparent;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}