@charset "UTF-8";

@import url(viewer-popup.css);
@import url(viewer-pds.css);

/*
- !주의 : 전체 구현에 영향을 주므로 수정시 협의 바랍니다.
- body에 단원별 클래스 추가 : dan1, dan2, ...
*/

/*************************************/
/********** [ 0. 공통 내용 ] **********/
/*************************************/

@keyframes fx-tail {
  from { width: 0px; right: -120px; opacity: 0; }
  to { width: 44px; right: -75px; opacity: 1; }
}

/* public variables */
#wrap {
  --color-ui-key: #5bacdb;
  --color-ui-strong: #4292c1;
  --color-ui-light: #e2f1f9;
  --color-tooltip-bg: #5bacdb;

  --size-window-width: 1920px;
  --size-window-height: 1080px;

  --size-menu-width: 570px;
  --size-menu-height: 100%;

  --color-menu-bg: #fff;
  --color-menu-bg-light: #bcdff4;
  --color-menu-bg-active: #2b8cc6;
  --color-menu-bg-top: #5bacdb;
  --color-menu-bullet: #2b8cc6;
  --color-menu-bullet-active: #bcdff4;
  --color-menu-bullet-active-text: #222;
  --color-menu-title: rgba(34, 34, 34, 0.6);
  --color-menu-title-active: #222;
  --color-menu-text: #222;
  --color-menu-text-active: #fff;
  --color-menu-scroll: rgba(43, 140, 198, 0.3);
  --color-menu-scroll-active: #2b8cc6;

  --size-3rd-menu-width: 520px;
  --color-3rd-menu-bg: #fff;
  --color-3rd-menu-bg-active: #2b8cc6;
  --color-3rd-menu-bullet: #999;
  --color-3rd-menu-bullet-active: #fff;
  --color-3rd-menu-text: #222;
  --color-3rd-menu-text-active: #fff;
  --color-3rd-menu-scroll: #bcdff4;
  --color-3rd-menu-scroll-active: #2b8cc6;

  --color-header01-bg: #f8a865;
  --color-header01-bg-strong: #f7965b;
  --color-header02-bg: #48c6b4;
  --color-header02-bg-strong: #25bdad;

  --color-black-text: #000;
  --color-white-text: #fff;
  --color-ebook-tool-tip: #b7e186;
  --color-ebook-tool-txt: #000;
}

/* video outline 제거 */
video {
  /*object-fit: fill;
  transform: translateZ(0);
  outline: none;
  border: none;*/
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

button { outline: 0; }
#wrap { position: relative; width: var(--size-window-width); height: var(--size-window-height); background: #fff; }
#wrap>div:not(#popup):not(#canvas_layer):not(#toolbar) { height: 100%; position: relative; }
#wrap>div { display: none; }



/******************************************************************/
/********** [ 1. #page_home: 홈 화면. load "home.html" ] **********/
/******************************************************************/

/***** #direct: 바로 가기 *****/
#direct{position: absolute;left:50%;top:0; width:2520px;height:100%; background-color:rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center;margin-left:-1260px;z-index: 100;}
#direct >button{font-size:60px;padding:10px 40px;border:1px solid #333;background:#0b6c8f;color:#fff;border-radius: 20px;}



/*****************************************************************/
/********** [ 2. #page_ebook: 이북. load "ebook.html" ] **********/
/*****************************************************************/

#page_ebook{will-change: initial;}
#page_ebook .background{position: absolute;left: 50%;top: 0;width:5000px;height:100%;background:#dbdbdb;margin-left:-2500px}

/***** #ebook_lnb: 왼쪽 메뉴 모음 *****/
/* #ebook_lnb_wrap::-webkit-scrollbar, #ebook_lnb_wrap::-moz-scrollbar { display: none; } */
#ebook_lnb_wrap { position: absolute; width: calc(var(--size-menu-width)*2 + 20px); height: var(--size-menu-height); left: 144px; top: 0px; margin: 0; padding: 0; overflow: hidden; }

/*** scroll: begin ***/
#ebook_lnb>.scroll-wrap { position: relative; margin: 0; padding: 0; border: 0; }
#ebook_lnb:not(.mid)>.scroll-wrap>.scroll-body { position: relative; width: calc(100% + 12px); height: calc(1080px - 64px); overflow-y: scroll; overflow-x: hidden;
  -ms-overflow-style: none;
  /*scrollbar-width: none;
  scrollbar-color: transparent transparent;*/}
#ebook_lnb>.scroll-wrap>.scroll-body::-webkit-scrollbar { width: 8px; }
#ebook_lnb>.scroll-wrap>.scroll-body::-webkit-scrollbar-track { border-radius: 4px; background-color: #fff0; }
#ebook_lnb>.scroll-wrap>.scroll-body::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--color-menu-scroll); }
#ebook_lnb>.scroll-wrap>.scroll-body::-webkit-scrollbar-thumb:hover { border: 0px; background-color: var(--color-menu-scroll-active); }
#ebook_lnb>.scroll-wrap>.scroll-body::-webkit-scrollbar-button { width: 0; height: 24px; }
/*** scroll: end ***/

#ebook_lnb{
  --color-ebook-menu-dark: #2b8cc6;

  position: absolute; width: var(--size-menu-width); height: 100%; left: calc(0px - var(--size-menu-width)); background: var(--color-menu-bg-light); z-index: 101; }
#ebook_lnb_wrap.open #ebook_lnb{ box-shadow: 4px 0px 8px rgb(0 0 0/0.2); }
#ebook_lnb.mid>.sub-bg { position: absolute; width: 0px; height: 100%; left: calc(var(--size-menu-width) - 1px); background: #dde0e5; }
#ebook_lnb.mid>.sub-bg.nosub,
#ebook_lnb.bookmark_bg>.sub-bg { background: #dde0e500; pointer-events: none; }
#ebook_lnb_wrap.launch #ebook_lnb.mid>.sub-bg { width: var(--size-menu-width);
  transition: all 0.3s; will-change: auto;
	-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
#ebook_lnb>em {
  position: absolute;
  cursor: pointer;
  width: 32px;
  height: 32px;
  right: 16px;
  top: 15px;
  border-radius: 50%;
  background: var(--color-ebook-menu-dark) url(../img/common/menu/lnb_button_close.png) no-repeat center;
  z-index: 2;
}

/*#ebook_lnb.bookmark_bg{background:#fff;}*/

/*** #ebook_lnb > #lnb_title: 왼쪽 메뉴 버튼 ***/
#lnb_title{position: relative; display: block; width: 100%; height: 64px; background: var(--color-menu-bg-top) url(../img/common/menu/lnb_top.png) no-repeat center; z-index: 2; }
#lnb_title h2 { position: absolute; display: none; }

/* #lnb_title>ul{position:absolute; right:-101px; top:0; background: url(../img/common/menu_bg.png) no-repeat 0px center; } */
#lnb_title>ul li{font-size: 0; margin: 0; padding: 0;}
#lnb_title>ul li button{width:101px; height:98px; background-repeat: no-repeat; background-position:center center; position:relative;}

/*** #ebook_lnb > .menu_list: 목록 ***/
/*lnb menu*/
#ebook_lnb { /* dummy. I don't know why, but to avoid making bug, you need it. */}

#ebook_lnb .menu_list{ /*width: calc(100% + 17px);*/ width: 100%; height: auto; color:#fff; margin: 15px 0; padding: 0; }

#ebook_lnb .menu_list>li{position:relative; margin-bottom: 0px;}
#ebook_lnb .menu_list li.dimmed{display: none;}
#ebook_lnb .menu_list li.on a { position: absolute; display: block; width: 24px; height: 24px; right: 10px; top: calc(28px - 12px); background-color: #fff; cursor: pointer; }

#ebook_lnb .menu_list>li>h3{position: relative; width: 100%; height: 66px; padding: 10px 0 0 32px; margin: 0; font-family: 'tantan'; font-size: 30px; line-height: 1.4; color: var(--color-menu-title); z-index: 1; cursor: pointer;}
#ebook_lnb .menu_list>li>h3:hover,
#ebook_lnb .menu_list>li>h3.active { color: var(--color-menu-title-active); }

#ebook_lnb .menu_list>li>h3::after { content: ''; position: absolute; display: block; right: 32px; top: 22px; width: 20px; height: 14px; background: url(../img/common/menu/menu_bullet.png) no-repeat center; opacity: 0.6; }
#ebook_lnb .menu_list>li>h3:hover::after { opacity: 1.0; }
#ebook_lnb .menu_list>li>h3.active::after { background: url(../img/common/menu/menu_bullet_on.png) no-repeat center; }

#ebook_lnb .menu_list>li>h3>.roman { margin-right: 8px; font-family: "binggrae-B"; }
#ebook_lnb .menu_list>li>h3>.roman.roman1 { letter-spacing: -3px; margin-left: 3px; margin-right: 10px; }
#ebook_lnb .menu_list>li>h3>.numeric { margin-right: 8px; font-family: "binggrae-B"; }

#ebook_lnb .menu_list>li>h3>button{display:none;width:32px; height:32px; background:url(../img/common/ico_shortcut.png) 0 0 no-repeat;vertical-align: middle; margin-left: 15px;}

/* depth 2, NO middle chapter */
#ebook_lnb .menu_list>li>ol{ position:relative; width:calc(100% - 66px); margin: 0px 0px 26px 32px; padding: 16px 0px 16px 18px; border-radius: 16px; /*overflow: hidden;*/ background: var(--color-menu-bg); }
#ebook_lnb:not(.mid) .menu_list>li>ol>li{ position: relative; }

#ebook_lnb .menu_list>li>ol>li>h4,
#ebook_lnb .menu_list>li>ol>li>button{position: relative; width: calc(100% - 16px); height: auto; padding: 10px 16px 9px 54px; margin: 1px 0; color: var(--color-menu-text); font-family: "omb"; font-size: 25px; line-height: 1.4; text-indent: 0px; word-break: keep-all; border-radius: 25px;}
#ebook_lnb .menu_list>li>ol>li>button>span:not(.bullet):not(.text) { display: none; }
#ebook_lnb .menu_list>li>ol>li>button>span.bullet { position: absolute; display: block; width: 12px; height: 12px; margin: 11px 0 0 -34px; border-radius: 50%; background-color: var(--color-menu-bullet); }
#ebook_lnb .menu_list>li>ol>li>button>span.bullet.no { width: 36px; height: 36px; padding-top: 3px; margin: -1px 0 0 -46px; color: var(--color-menu-bg); font-family: "omb"; font-size: 23px; line-height: 1.4; text-align: center; }
#ebook_lnb .menu_list>li>ol>li>button>span.text { position: relative; display: inline-block; font-family: inherit; }
#ebook_lnb .menu_list>li>ol>li.nobullet>button { padding-left: 14px; }
#ebook_lnb .menu_list>li>ol>li.nobullet .bullet { display: none; }
#ebook_lnb .menu_list>li>ol>li>button>span.text>span.roman { margin-right: 6px; /*16px;*/ font-family: "binggrae-B"; vertical-align: middle; }
#ebook_lnb .menu_list>li>ol>li>button>span.text>span.roman.roman1 { margin-right: 0px; }

#ebook_lnb .menu_list>li>ol>li>button:hover,
#ebook_lnb .menu_list>li>ol>li>button.active { background-color: var(--color-menu-bg-active); }
#ebook_lnb .menu_list>li>ol>li>button:hover>span.bullet,
#ebook_lnb .menu_list>li>ol>li>button.active>span.bullet { color: var(--color-menu-bullet-active-text); background-color: var(--color-menu-bullet-active); }
#ebook_lnb .menu_list>li>ol>li>button:hover>span.text,
#ebook_lnb .menu_list>li>ol>li>button.active>span.text { color: var(--color-menu-text-active); }

/* depth 2 with middle chapter */
#ebook_lnb .menu_list>li>ol>li>h4,
#ebook_lnb .menu_list>li>ol>li.nosub>h4>button{position: relative; width: calc(100% - 16px); height: auto; padding: 10px 16px 9px 54px; margin: 1px 0; color: var(--color-menu-text); font-family: "omb"; font-size: 25px; line-height: 1.4; text-indent: 0px; word-break: keep-all; border-radius: 25px; cursor: pointer;}
#ebook_lnb .menu_list>li>ol>li.nosub>h4 { position: relative; padding: 0; margin: 0; border: 0; }

#ebook_lnb .menu_list>li>ol>li>h4:hover,
#ebook_lnb .menu_list>li>ol>li>h4.active,
#ebook_lnb .menu_list>li>ol>li>h4>button:hover,
#ebook_lnb .menu_list>li>ol>li>h4.active>button{color: var(--color-menu-text-active); background-color: var(--color-menu-bg-active);  /*z-index: 1;*/}

#ebook_lnb_wrap #ebook_lnb.mid .menu_list>li>ol>li:not(.nosub)>h4::after {
  content: "";
  position: absolute;
  width: 0px;
  height: 48px;
  right: -120px;
  top: calc(50% - 24px);
  background: url(../img/common/lnb_tail.png) no-repeat 0px center;

  opacity: 0;

  transition: var(--fx); will-change: auto;
	-webkit-transition: var(--fx);
  -moz-transition: var(--fx);
}
#ebook_lnb_wrap.launch #ebook_lnb.mid .menu_list>li>ol>li>h4.active::after {
  animation: fx-tail 0.6s ease-out forwards;
}

#ebook_lnb .menu_list>li>ol>li>h4:hover>span.bullet,
#ebook_lnb .menu_list>li>ol>li>h4:hover>span.bullet.no,
#ebook_lnb .menu_list>li>ol>li>h4.active>span.bullet,
#ebook_lnb .menu_list>li>ol>li>h4.active>span.bullet.no,
#ebook_lnb .menu_list>li>ol>li>h4>button:hover>span.bullet,
#ebook_lnb .menu_list>li>ol>li>h4>button:hover>span.bullet.no,
#ebook_lnb .menu_list>li>ol>li>h4.active>button>span.bullet,
#ebook_lnb .menu_list>li>ol>li>h4.active>button>span.bullet.no { color: var(--color-menu-bullet-active-text); background-color: var(--color-menu-bullet-active);}

#ebook_lnb .menu_list>li>ol>li>h4 span:not(.bullet):not(.text) { display: none; }
#ebook_lnb .menu_list>li>ol>li>h4 span.bullet { position: absolute; display: block; width: 12px; height: 12px; margin: 10px 0 0 -34px; border-radius: 50%; background-color: var(--color-menu-bullet); }
#ebook_lnb .menu_list>li>ol>li>h4 span.bullet.no { width: 36px; height: 36px; padding-top: 3px; margin: -1px 0 0 -46px; color: var(--color-menu-bg); font-family: "omb"; font-size: 23px; line-height: 1.4; text-align: center; }
#ebook_lnb .menu_list>li>ol>li>h4 span.text { position: relative; display: inline-block; font-family: inherit; }

/* depth 3 */
#ebook_lnb .menu_list>li>ol>li>ol,
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap {position: absolute; width: var(--size-3rd-menu-width); left: calc(100% + 33px + 25px); top: 0px; margin: 0; padding: 14px 0px 14px 18px; border-radius: 16px; background-color: var(--color-3rd-menu-bg);}
#ebook_lnb .menu_list>li:nth-child(1)>ol>li>ol,
#ebook_lnb .menu_list>li:nth-child(1)>ol>li>div.scroll-wrap {top: -84px;}
#ebook_lnb .menu_list>li:nth-child(2)>ol>li>ol,
#ebook_lnb .menu_list>li:nth-child(2)>ol>li>div.scroll-wrap {top: -150px;}
#ebook_lnb .menu_list>li:nth-child(3)>ol>li>ol,
#ebook_lnb .menu_list>li:nth-child(3)>ol>li>div.scroll-wrap {top: -216px;}
#ebook_lnb .menu_list>li:nth-child(4)>ol>li>ol,
#ebook_lnb .menu_list>li:nth-child(4)>ol>li>div.scroll-wrap {top: -282px;}

#ebook_lnb.mid .menu_list>li>ol>li.nosub>ol { opacity: 0; pointer-events: none; }

#ebook_lnb.mid .menu_list>li>ol>li>ol>li {position: relative;}

#ebook_lnb .menu_list>li>ol>li ol>li>button{position: relative; width: calc(100% - 18px); height: auto; padding: 8px 16px 6px 42px; margin: 1px 0; border-radius: 30px; }
#ebook_lnb .menu_list>li>ol>li ol>li:not(.sub)>button::before { content: ""; position: absolute; display: block; width: 8px; height: 8px; margin: 13px 0 0 -22px; border-radius: 50%; background-color: var(--color-3rd-menu-bullet); }

#ebook_lnb .menu_list>li>ol>li ol>li>button:hover,
#ebook_lnb .menu_list>li>ol>li ol>li>button.active{ background: var(--color-3rd-menu-bg-active); }
#ebook_lnb .menu_list>li>ol>li ol>li>button>span{display: none;}
#ebook_lnb .menu_list>li>ol>li ol>li>button>em{color: var(--color-3rd-menu-text); font-family: "omb"; font-size: 25px; line-height: 1.4; text-indent: 0px; word-break: keep-all;}

#ebook_lnb .menu_list>li>ol>li ol>li>button.active>em,
#ebook_lnb .menu_list>li>ol>li ol>li:hover>button>em{color: var(--color-3rd-menu-text-active);}
#ebook_lnb .menu_list>li>ol>li ol>li>button.active::before,
#ebook_lnb .menu_list>li>ol>li ol>li:hover>button::before{background-color: var(--color-3rd-menu-text-active);}

/*** 4th depth ***/
#ebook_lnb .menu_list>li>ol>li ol>li.sub>button{padding: 6px 16px 3px 64px; border-radius: 20px; }
#ebook_lnb .menu_list>li>ol>li ol>li.sub>button::before { content: ""; position: absolute; display: block; width: 8px; height: 8px; margin: 10px 0 0 -22px; border-radius: 50%; background-color: var(--color-3rd-menu-bullet); }
#ebook_lnb .menu_list>li>ol>li ol>li.sub>button>em{font-size: 22px;}
#ebook_lnb .menu_list>li>ol>li ol>li.sub>button.active::before,
#ebook_lnb .menu_list>li>ol>li ol>li.sub:hover>button::before {background-color: var(--color-3rd-menu-bullet-active);}
#ebook_lnb .menu_list>li>ol>li ol>li.after-sub>button{margin-top: 20px;}

/*** scroll ***/
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap { padding: 0px 0px 0px 18px; }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap ol {position: relative; left: 0px; top: 0px; margin: 0; padding: 0;}
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap ol>li>button { width: calc(100% - 8px); }

#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body { position: relative; width: calc(100% - 8px); left: 0px; top: 0px; margin: 0; padding: 16px 0; height: 992px; overflow-y: scroll; overflow-x: hidden;
  -ms-overflow-style: none;
}
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar { width: 8px; }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar-track { border-radius: 4px; background-color: rgb(256 256 256/0.0); }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar-track:hover { background-color: var(--color-3rd-menu-scroll); }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--color-3rd-menu-scroll); }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar-thumb:hover { border: 0px; background-color: var(--color-3rd-menu-scroll-active); }
#ebook_lnb .menu_list>li>ol>li>div.scroll-wrap>.scroll-body::-webkit-scrollbar-button { width: 0; height: 16px; }

/*** #ebook_lnb > .bookmark: 북마크 ***/
#ebook_lnb.bookmark_bg #lnb_title { background: var(--color-menu-bg-top) url(../img/common/menu/bookmark_top.png) no-repeat center; }
#ebook_lnb.bookmark_bg #lnb_title h2 { display: block; width: calc(100% - 40px); height: 96px; left: 20px; top: 84px; padding: 4px 16px 0px 28px; border-radius: 20px; background-color: #e4f2fb;
  color: #222;
  font-family: "omb";
  font-size: 25px;
  letter-spacing: -1px;
  line-height: 0.8;
}

#ebook_lnb.bookmark_bg #lnb_title h2>span.icon { position: relative; display: inline-block; width: 39px; height: 54px; margin: 0 4px; background: url(../img/common/menu/bookmark_image.png) no-repeat 0 0/contain;
  line-height: 1.0; vertical-align: middle;
}
#ebook_lnb.bookmark_bg #lnb_title button.del_bookmark_all {
  position: absolute; width: 135px; height: 37px; right: 64px; top: 13px; background: url(../img/common/menu/btn_bookmark_clear.png) no-repeat center;
}

#ebook_lnb .bookmark { display: none; padding: 30px 0px 30px 60px; margin-top: 110px; margin-right: 20px; }
#ebook_lnb .bookmark.over { overflow-y: scroll; height: calc(100% - 174px);
  -ms-overflow-style: none; /* IE 11 */
  /*scrollbar-width: none;*/ /* Firefox 64 */
  /*scrollbar-color: transparent transparent;*/ }
/* #ebook_lnb .bookmark.over:after { height: 28px; } */

/* scrollbar */
#ebook_lnb .bookmark::-webkit-scrollbar { width: 10px; }
#ebook_lnb .bookmark::-webkit-scrollbar-track { border-radius: 5px; background-color: #e4f2fb; }
#ebook_lnb .bookmark::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #5bacdb; }
#ebook_lnb .bookmark::-webkit-scrollbar-thumb:hover { background-color: #006097; }
#ebook_lnb .bookmark::-webkit-scrollbar-button { width: 0; height: 30px; }

#ebook_lnb .bookmark:after {content: ""; display: block; clear: both;}
#ebook_lnb .bookmark>li:not(.none) {float: left; width: 124px; height: 164px; border: 1px solid #e5e5e5; margin-right: 36px; position: relative; }
#ebook_lnb .bookmark>li:not(.none):before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4);}
#ebook_lnb .bookmark>li:not(.none):nth-child(3n) {margin-right: 0; }
#ebook_lnb .bookmark>li+li+li+li {margin-top: 20px; }
#ebook_lnb .bookmark>li>p { font-family: "omb"; font-size: 40px; letter-spacing: -1px; position: absolute; width: 100%; height: 100%; text-align: center; line-height: 165px; cursor: pointer; }
#ebook_lnb .bookmark>li>button {position: absolute; width: 25px; height: 25px; right: 5px; top: 5px; background: url(../img/common/menu/bookmark_del.png) 0 0 no-repeat; z-index: 1; }
#ebook_lnb .bookmark>li button:hover {background-position-y: -25px; }
#ebook_lnb .bookmark>li:not(.none):hover {border: 1px solid var(--color-ui-key); }
#ebook_lnb .bookmark>li:not(.none):hover:before {background: rgba(255, 255, 153, 0.5); border: 3px solid var(--color-ui-key); }

#ebook_lnb .bookmark>li.none { width: calc(100% - 16px); height: auto; color: #fff; text-align: center; font-size: 24px; font-weight: 500; line-height: 1.6; padding: 20px 20px; border-radius: 24px; background-color: var(--color-ui-key); }
#ebook_lnb .bookmark>li.none>span.icon { display: inline-block; width: 59px; height: 72px; vertical-align: middle; background: url(../img/common/ico_bookmark.png) 0 0 no-repeat; }

/* #thumb_title: 북마크 정보 팝업 */
#thumb_title {position: absolute; min-width: 390px; background: #ebf7fd; display : block !important; /*top: -113px;*/ bottom: -4px; left: -12px; z-index: 2; padding: 8px; border: 2px solid var(--color-ui-key); border-radius: 16px; pointer-events: none; }
.bookmark.over li>#thumb_title{bottom: -8px;}
.bookmark.over li:nth-child(3n+2)>#thumb_title{left: -120px;}
.bookmark.over li:nth-child(3n)>#thumb_title{left: auto; right: -18px;}

/* #thumb_title:before {content: ""; position: absolute; top: -19px; left: 40px; margin-left: 0px; border-width: 10px; border-style: solid; border-color: transparent transparent #051f29 #051f29; } */
#thumb_title:before {content: ""; position: absolute; left: 40px; top: -17px; width: 18px; height: 19px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><polygon fill="%23e8f0ff" points="1,18 9,1 17,18"/><polyline fill="none" stroke="%235bacdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="1,16 9,1 17,16"/></svg>') no-repeat 0 0; }
.bookmark.over li:nth-child(3n+2)>#thumb_title:before{left: calc(50% - 48px);}
.bookmark.over li:nth-child(3n)>#thumb_title:before{left: auto; right: 94px;}

#thumb_title h3 {background: var(--color-ui-key); color: #fff; font-family: "omb"; font-size: 23px; letter-spacing: -.5px; line-height: 1.2; padding: 10px 20px 8px; border-radius: 8px; }
#thumb_title h3>.roman,
#thumb_title h3>.numeric { font-family: "binggrae-B"; line-height: 1.2; vertical-align: top; margin-right: 8px;}

/* #thumb_title h4 {font-size: 22px; color: rgba(255,255,255,0.6); letter-spacing: -.5px; padding: 10px 25px; } */
#thumb_title h5 {font-size: 20px; color: #222; font-family: "omb"; letter-spacing: -.5px; line-height: 1.2; padding: 10px 10px 8px 20px; }


/*** #ebook_lnb > #page_go_ebook: 바로 가기 ***/
#page_go_ebook{position: absolute; left: 14px; bottom: 22px; width: 112px; height: 83px; background: url(../img/common/pagego_bg.png) 0 0 no-repeat; z-index: 5;}

#page_go_ebook.right{ left: auto; right: 12px;}
#page_go_ebook::before { content: '페이지 이동'; position: absolute; width: 100%; color: #333; font-family: 'pretendard-SB'; font-size: 18px; line-height: 1.2; text-align: center; margin-top: 8px; }
#page_go_ebook>input{width: 56px; height: 30px; margin: 40px 0 0 10px; font-family: "pretendard-M"; font-size: 20px; color: #333; text-align: center; vertical-align: middle; border: none; outline: none; background-color: transparent;}
#page_go_ebook input[type="number"]::-webkit-outer-spin-button,
#page_go_ebook input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#page_go_ebook>button{position: absolute; width: 44px; height: 38px; right: 6px; bottom: 10px; font-size: 0; background: url(../img/common/pagego_button.png) no-repeat center; }

#page_go_ebook>span.total{ display: none; }
#page_go_ebook>span.total{position: absolute; top: 83px; width: 46px; margin-left: -6px; font-family: "scdream-6"; font-size: 20px; letter-spacing: -0.5px; color: var(--color-black-text);}


/*** #ebook_lnb > #page_go_std: 최근 학습창으로 바로 가기 ***/
#page_go_std{display:none;position:absolute; top: 15px; left: 1833px; z-index: 1; width:82px; height:76px; background:url(../img/common/ico_stdgo.png) 0 0 no-repeat; z-index: 5;}
#page_go_std.go{display:none;}
#page_go_std>button{font-size:0; width:100%; height:100%;}


/*** #ebook_lnb > #p_left, #p_right: .this_page 내에 있는 개체 ***/
#p_left>p{right: 223px;}
#p_right>p{left: 223px;}
#p_right>p,#p_left>p{display:none;
	font-size: 300px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
#p_left>h4{right: 297px;}
#p_right>h4{left: 297px;}

#p_right>h4,#p_left>h4{
	color: red;
  font-size: 35px;
  position: absolute;
  top: 315px;
}

/***** #ebook_lnb 주요 버튼들 *****/
/* Button of Bookmark: 이북 상단 북마크 지정 버튼 z-index: 100 */
#btn_bookmark_L,
#btn_bookmark_R {position: absolute; z-index: 112; width: 59px; height: 72px; background: url(../img/common/menu/ico_bookmark.png) 0 0 no-repeat; top: 0px; }
#btn_bookmark_L.on,
#btn_bookmark_R.on {background-position-y: -72px; }
#btn_bookmark_L {left: 20px; }
#btn_bookmark_R {right: 20px; }

/* Buttons of move: 이북 좌우 페이지 이동 버튼 */
#btn_prev,
#btn_next {position: absolute; width: 40px; height: 120px; z-index: 90; top: 50%; transform: translateY(-50%); cursor: pointer; }
#btn_prev {left: -60px; background: url(../img/common/ico_arrowLeft.png) center center no-repeat; }
#btn_next {right: -60px; background: url(../img/common/ico_arrowRight.png) center center no-repeat; }


/** image loading 중 버튼 막기 **/
#page_ebook.loading #btn_prev,
#page_ebook.loading #btn_next { background: transparent; pointer-events: none; }


/***** #ebook_pages: 교과서 이미지 *****/
#ebook_pages{position: relative; left: 50%; margin-left: -791px; top: 10px; width: 1582px; height: 1043px; z-index: 1; touch-action: none; }

#ebook_pages>div {position: absolute; height: 100%; top: 0%; opacity: 1; background-size: 791px 100%; background-repeat: no-repeat; /*background-position: auto center;*/}

#ebook_pages>div.page { background-color: white; }
#ebook_pages>div.page>div {position: relative; width: 100%; height: 100%; margin: 0; }

/* shadowing inner of top_pages */
#this_left>div,
#prev_left>div {opacity: 0.3; background: url("../img/common/shadow_pageLeft_edge.png") right top repeat-y; }
#this_right>div,
#next_right>div {opacity: 0.3; background: url("../img/common/shadow_pageRight_edge.png") left top repeat-y; }

/* shadowing inner of bottom_pages */
#prev_right>div:first-child {opacity: 0.3; background: url("../img/common/shadow_pageRight_edge.png") left top repeat-y; }
#next_left>div:first-child {opacity: 0.3; background: url("../img/common/shadow_pageLeft_edge.png") right top repeat-y; }

/* shadowing outer of swipping pages edge */
#ebook_pages>div.swipping:nth-child(odd) {box-shadow: -10px 0 30px rgba(0, 0, 0, 50%); }

#ebook_pages>div.swipping:nth-child(even) {box-shadow: 10px 0 30px rgba(0, 0, 0, 50%); }

/* style of marker button */
#ebook_pages>div>div button.icon_caption {position: absolute; display: block; background-color: rgba(255,0,0,0.2); border: 0; width: 5%; height: 1%; overflow-x: hidden; cursor: pointer; padding: 10px 0; }
#ebook_pages>div>div button.icon_capt {position: absolute; display: block; background-color: rgba(255,0,0,0.2); border: 0; width: 5%; height: 1%; cursor: pointer; padding: 10px 0; }



/* #ebook_pages>div>div>span:hover button { opacity: 0.3; } */
#ebook_pages>div>div>span button.hit {opacity: 0.7; }

#ebook_pages>div>div.pc>span:hover button {opacity: 0.3 !important; }

#ebook_pages>div>div.pc>span button.hit {opacity: 0.7 !important; }


/* prev pages */
/* book Outside*/
#prev_left {z-index: 10; top: 0%; width: 50%; left: 0%; box-shadow: rgba(0, 0, 0, 50%) -10px 0 10px; }
#prev_left>div:last-child {float: left; opacity: 1; background: url("../img/common/book_edge_L.png") left top repeat-y; }
#prev_right {z-index: 30; top: 0%; width: 0%; left: 0%; background-position: right center; opacity: 0.3; }
#ebook_pages>#prev_left>div:last-child {opacity: 1; background: url("../img/common/book_edge_L.png") no-repeat; position: absolute; left: -22px; top: 0; background-size: cover; width: 22px; height:100%; }

/* this pages */
#this_left {z-index: 20; top: 0%; width: 50%; right: 50%; background-position: right center; background-image: url(""); }
#this_right {z-index: 20; top: 0%; width: 50%; left: 50%; background-image: url(""); }

/* next pages */
#next_left {z-index: 30; top: 0%; width: 0%; right: 0%; background-image: url(""); opacity: 0.3; }

/* book Outside*/
#next_right {z-index: 10; top: 0%; width: 50%; right: 0%; background-image: url(""); box-shadow: rgba(0, 0, 0, 50%) 10px 0 10px; }
#ebook_pages>#next_right>div:last-child {z-index: 1; opacity: 1; background: url("../img/common/book_edge_R.png") no-repeat; position: absolute; left: 100%; top: 0; background-size: cover; width: 22px; height:100%; }

/* answer pages */
#answer_left {z-index: 20; top: 0%; width: 50%; right: 50%; background-position: right center; background-image: url("");pointer-events: none;}
#answer_right {z-index: 20; top: 0%; width: 50%; left: 50%; background-image: url(""); pointer-events: none;}


/*********************************/
/********** ebook 아이콘 **********/
/*********************************/

#ebook_pages {
  --size-icon-w: 60px;
  --size-icon-margin: 7px;
  --size-icon-border-radius: 14px;

  --size-memoicon-tool-w: 34px; /*50px*/
  --size-memoicon-tool01-x: 38px;
  --size-memoicon-tool01-y: -30px;
  --size-memoicon-tool01-term: 580ms;
}

/***** 한 면 크게 보기 (#ebook_pages>div>div#full_bg) *****/
#icons_full {top : 0; position: absolute; width: 100%; height: 100%;}
#ebook_pages>div>div#full_bg button,#ebook_pages>div>div#full_bg .icon_memo_new,#ebook_pages>div>div#full_bg .icon_link_new,#ebook_pages>div>div#full_bg .icon_memo,#ebook_pages>div>div#full_bg .icon_link{z-index: 121; position: absolute; width: calc(var(--size-icon-w)*2); height: calc(var(--size-icon-w)*2); margin : calc(var(--size-icon-margin)*2) 0 0 calc(var(--size-icon-margin)*2); border-radius: calc(var(--size-icon-border-radius)*2); background-size: 100%; }
#ebook_pages>div#full_thumb {width : 120px; height : 165px; background : url("") 0 0 no-repeat; position : absolute; background-size : 100%; z-index : 12; right: -170px; top: 830px; background-color : white; padding: 0; display: none; }
#ebook_pages>div#full_thumb>button,#ebook_pages>div>div#full_thumb .icon_memo_new,#ebook_pages>div>div#full_thumb .icon_link_new,#ebook_pages>div>div#full_thumb .icon_memo,#ebook_pages>div>div#full_thumb .icon_link {width : 120px; height : 55px; margin: -2px 0 -3px 0; background-color : black; opacity : 0.5; position: left; display : inline-block; border : 1px dotted gray; }
#ebook_pages>div#full_thumb>button.on {opacity : 0;}

/* 캡션 팝업 단면확대 */
#full_bg .capt_popup{
  border: calc(2px *2) solid #ccc;
  padding: calc(15px *2) calc(20px *2);
  width: calc(300px * 2);
  border-radius: calc(10px * 2);
  box-shadow: 0 calc(4px * 2) calc(8px * 2) rgba(0, 0, 0, 0.1);
  font-size: calc(20px * 2);
  top: calc(-55px * 2);
  left: calc(-40px * 2);
}

/*
#full_bg .icon_ebook{width: 200px !important; height: 138px !important; padding:62px 18px 22px 6px;}
#full_bg .icon_sbook{width: 200px !important; height: 134px !important; padding:66px 18px 22px 6px;}
#full_bg .icon_sbook>.title,#full_bg .icon_ebook>.title{font-size: 24px;}
*/

/***** memo, link icon *****/
.icon_memo_new{border-radius: var(--size-icon-border-radius); background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat; display:inline-block;}
.icon_link_new{border-radius: var(--size-icon-border-radius); background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat; display:inline-block;}
.icon_memo{border-radius: var(--size-icon-border-radius); background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat; display:inline-block;}
.icon_link{border-radius: var(--size-icon-border-radius); background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat; }
.icon_memo_new.new, .icon_link_new.new { animation: borderPulse 2s infinite; }
.icon_memo_new>span,.icon_link_new>span,.icon_memo>span,.icon_link>span{font-size:0; display: none;}

.icon_memo_new>em,.icon_link_new>em,.icon_memo>em, .icon_link>em {position:absolute; width: var(--size-memoicon-tool-w); height: var(--size-memoicon-tool-w); border-radius: 50%; background:rgba(0,0,0,0.7); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; background-position: center center; background-repeat: no-repeat; background-size: auto;}
	
.icon_memo_new>em:nth-of-type(1),.icon_link_new>em:nth-of-type(1),.icon_memo>em:nth-of-type(1),.icon_link>em:nth-of-type(1){background-image:url(../img/common/ico_linkmodify.png);} 
.icon_memo_new>em:nth-of-type(2),.icon_link_new>em:nth-of-type(2),.icon_memo>em:nth-of-type(2),.icon_link>em:nth-of-type(2){background-image:url(../img/common/ico_linkdel.png);}  
.icon_memo_new>em:nth-of-type(3),.icon_link_new>em:nth-of-type(3),.icon_memo>em:nth-of-type(3),.icon_link>em:nth-of-type(3){background-image:url(../img/common/ico_linkdrag.png);}

.icon_memo_new>em:hover,.icon_memo_link>em:hover,.icon_link_new>em:hover,.icon_memo_link>em:hover,.icon_memo>em:hover,.icon_link>em:hover{animation: borderPulse 2s infinite;}
.icon_link_new.on>em:nth-of-type(1){ -webkit-transition-duration: var(--size-memoicon-tool01-term);transition-duration: var(--size-memoicon-tool01-term);-webkit-transform: translate3d(var(--size-memoicon-tool01-x), var(--size-memoicon-tool01-y), 0);transform: translate3d(var(--size-memoicon-tool01-x), var(--size-memoicon-tool01-y), 0); }

/*
.icon_memo_new.on > em:nth-of-type(1),.icon_memo.on > em:nth-of-type(1),.icon_link.on > em:nth-of-type(1) {-webkit-transition-duration: 580ms;transition-duration: 580ms;-webkit-transform: translate3d(-58.86291px, 52.62064px, 0);transform: translate3d(-58.86291px, 52.62064px, 0);}
.icon_memo_new.on > em:nth-of-type(2),.icon_memo.on > em:nth-of-type(2),.icon_link.on > em:nth-of-type(2) {-webkit-transition-duration: 480ms; transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 88.99997px, 0); transform: translate3d(0.08361px, 88.99997px, 0); }
.icon_memo_new.on > em:nth-of-type(3),.icon_memo.on > em:nth-of-type(3),.icon_link.on > em:nth-of-type(3) {-webkit-transition-duration: 380ms; transition-duration: 380ms; -webkit-transform: translate3d(58.86291px, 52.62064px, 0); transform: translate3d(58.86291px, 52.62064px, 0); }
*/

/* tool menus of link icons in full page */
#ebook_pages>div>div#full_bg .icon_memo_new.on>em,#ebook_pages>div>div#full_bg .icon_link_new.on>em,#ebook_pages>div>div#full_bg .icon_memo.on>em,#ebook_pages>div>div#full_bg .icon_link.on>em {width: calc(var(--size-memoicon-tool-w)*2); height: calc(var(--size-memoicon-tool-w)*2); background-size: 50%;}
#ebook_pages>div>div#full_bg .icon_memo_new.on>em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_link_new.on>em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_memo.on>em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_link.on>em:nth-of-type(1) {-webkit-transform: translate3d(calc(var(--size-memoicon-tool01-x)*2), calc(var(--size-memoicon-tool01-y)*2), 0);transform: translate3d(calc(var(--size-memoicon-tool01-x)*2), calc(var(--size-memoicon-tool01-y)*2), 0);}


/***** 양면 보기 (기본) *****/
#icons_left{left: 0; width: 50%; }
#icons_right{right: 0; width: 50%; }
#icons_left>button,#icons_right>button,#icons_std>button,#ebook_pages div#scaleup_page button,.icon_memo_new,.icon_link_new,.icon_memo,.icon_link {
  position: absolute; z-index: 100; width: var(--size-icon-w); height: var(--size-icon-w); margin : var(--size-icon-margin) 0 0 var(--size-icon-margin); background-size: 100%; /*transition: all 0.5s;*/ cursor: pointer;
} /* !IMPORTANT: 툴팁이 나올 때 이북의 이미지의 텍스트가 뭉게지는 현상을 막기 위해 transition 금지. opacity 변화에 의해 GPU 가속 발생 */
#icons_left>button>em,#icons_right>button>em,#icons_std>button>em,#ebook_pages div#scaleup_page button>em,#ebook_pages>div>div#full_bg button>em {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}

#icons_left>button:hover,#icons_right>button:hover,#icons_std>button:hover,.icon_memo_new:hover,.icon_link_new:hover,.icon_memo:hover,.icon_link:hover{transform: scale(1);}
#icons_left>button.nothover:hover,#icons_right>button.nothover:hover,#icons_std>button.nothover:hover{transform: scale(1);}

#icons_left>button.editing,#icons_right>button.editing,#icons_std>button.editing,.icon_memo_new,.icon_link_new,.icon_memo.editing,.icon_link.editing{transition:none;}
#icons_left>button.editing:hover,#icons_right>button.editing:hover,#icons_std>button.editing:hover,.icon_memo_new:hover,.icon_link_new:hover,.icon_memo.editing:hover,.icon_link.editing:hover{transform: none;}

/* .icon_preparation{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; }
.icon_preparation{ width:calc(155px / 2) !important;height:calc(52px / 2) !important;background: url(../img/common/ebook_icons/preparation_1.png) 0 0 no-repeat; }
.icon_preparation[data-name="1s"]{background: url(../img/common/ebook_icons/preparation_1.png) 0 0 no-repeat;} 
.icon_preparation[data-name="2s"]{background: url(../img/common/ebook_icons/preparation_2.png) 0 0 no-repeat;} 
.icon_preparation[data-name="3s"]{background: url(../img/common/ebook_icons/preparation_3.png) 0 0 no-repeat;} 
.icon_preparation[data-name="4s"]{background: url(../img/common/ebook_icons/preparation_4.png) 0 0 no-repeat;} 
.icon_preparation[data-name="5s"]{background: url(../img/common/ebook_icons/preparation_5.png) 0 0 no-repeat;} 
.icon_preparation[data-name="6s"]{background: url(../img/common/ebook_icons/preparation_6.png) 0 0 no-repeat;} 
.icon_preparation[data-name="7s"]{background: url(../img/common/ebook_icons/preparation_7.png) 0 0 no-repeat;} 
.icon_preparation[data-name="8s"]{background: url(../img/common/ebook_icons/preparation_8.png) 0 0 no-repeat;} 
.icon_preparation[data-name="9s"]{background: url(../img/common/ebook_icons/preparation_9.png) 0 0 no-repeat;} 
.icon_preparation[data-name="10s"]{background: url(../img/common/ebook_icons/preparation_10.png) 0 0 no-repeat;} 
.icon_preparation[data-name="11s"]{background: url(../img/common/ebook_icons/preparation_11.png) 0 0 no-repeat;} 
#full_bg .icon_preparation{width: 155px !important; height:52px !important; background-size: 100% !important;} */


.icon_eTrsTerms.nothover{border:3px solid blue;}

#scaleup_left_buttons .arrow_box.active,
#icons_left >div.arrow_box.active,
#scaleup_right_buttons .arrow_box.active,
#icons_right >div.arrow_box.active,
#full_bg div.arrow_box.active{display:block;}

#scaleup_left_buttons .arrow_box,
#icons_left >div.arrow_box,
#scaleup_right_buttons .arrow_box,
#icons_right >div.arrow_box,
#full_bg div.arrow_box{
  display:none;
  position:absolute;    
  border-radius: 8px;
  border: 3px solid #b7e186;
  background: #fff;
  color: #333;    
  line-height:1.2;
  width:max-content;
  cursor: pointer;
}
#scaleup_left_buttons .arrow_box:after,
#icons_left >div.arrow_box:after,
#scaleup_right_buttons .arrow_box:after,
#icons_right >div.arrow_box:after,
#full_bg div.arrow_box:after{
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #b7e186;
  border-width: 10px;
  pointer-events: none;
  content: ' ';
}

/* .icon_eLink: ebook page QR 링크 */
.icon_eLink{width:auto; height:auto;}
.icon_eLink>em{display:inline-block; width: var(--size-icon-w); height: var(--size-icon-w); background: url(../img/common/ebook_icons/elink.png) 0 0 no-repeat;background-size: contain;}
#full_bg .icon_Link>em{width: max-content; height: max-content;}

@keyframes borderPulse {0% {box-shadow: 0 0 0 0 rgba(255,192,70,0.8);} 75%{box-shadow: 0 0 0 10px rgba(109, 185, 252, 0);} 100% {box-shadow: 0 0 0 0 rgba(109, 185, 252, 0);}}
@keyframes Pulse{0%{opacity: 1;}75%{opacity: 0;}100%{opacity: 1;}}


/************************/
/***** data-tooltip *****/
/************************/

[data-tooltip]{position:relative;}
[data-tooltip]::before,
[data-tooltip]::after{visibility:hidden;opacity:0;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;transition:all .2s ease;font-size:16px;font-family:'pretendard-SB';letter-spacing:-1px;pointer-events: none;}
[data-tooltip]::before{content:attr(data-tooltip);height:28px;position:absolute;top:-20px;padding:5px 10px;border-radius:5px;color:#fff;background:var(--color-tooltip-bg);box-shadow:0 3px 8px rgba(165, 165, 165, 0.5);pointer-events: none;}
[data-tooltip]::after{content: '';border-left:5px solid transparent;top:2px;border-right:5px solid transparent;border-top:5px solid var(--color-tooltip-bg);}
[data-tooltip]:not([data-tooltip=""]):hover::before{visibility:visible;opacity:1;top:-30px}
[data-tooltip]:not([data-tooltip=""]):hover::after{visibility:visible;opacity:1;top:-3px}

/* 한면 보기 data-tooltip (#full_bg) */
#ebook_pages>div>div#full_bg [data-tooltip]::before,
#ebook_pages>div>div#full_bg [data-tooltip]::after{font-size:calc(14px *2);font-family:'pretendard-SB';letter-spacing:calc(-1px *2);}
#ebook_pages>div>div#full_bg [data-tooltip]::before{height:calc(26px *2);top:calc(-20px *2);padding:calc(5px *2) calc(10px *2);border-radius:calc(5px *2);color:var(--color-ebook-tool-txt);box-shadow:0 calc(3px *2) calc(8px *2) rgba(165, 165, 165, 0.5);}
#ebook_pages>div>div#full_bg [data-tooltip]::after{content: '';border-left:calc(5px *2) solid transparent;top:calc(2px * 2);border-right:calc(5px * 2) solid transparent;border-top-width:calc(5px *2);border-top-style:solid;}
#ebook_pages>div>div#full_bg [data-tooltip]:not([data-tooltip=""]):hover::before{top:calc(-34px *2)}
#ebook_pages>div>div#full_bg [data-tooltip]:not([data-tooltip=""]):hover::after{top:calc(-8px *2)}

#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove::before,
#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove::after{visibility:hidden;opacity:0;position:absolute;left:97%;transform:translateX(-50%);white-space:nowrap;transition:all .2s ease;pointer-events: none;}
#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove::before{content:attr(data-tooltip);background:#b7e186;pointer-events: none;}
#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove::after{content: '';border-top-color: #b7e186;}
#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove:not([data-tooltip=""]):hover::before{visibility:visible;}
#ebook_pages>div>div#full_bg [data-tooltip].icon_eTrsMove:not([data-tooltip=""]):hover::after{visibility:visible;}

/* 양면 보기 data-tooltip */
#ebook_pages>div [data-tooltip]::before,
#ebook_pages>div [data-tooltip]::after{visibility:hidden;opacity:0;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;transition:all .2s ease;font-size:14px;font-family:'pretendard-SB';letter-spacing:-1px;pointer-events: none;}
#ebook_pages>div [data-tooltip]::before{content:attr(data-tooltip);height:26px;position:absolute;top:-20px;padding:5px 10px;border-radius:5px;color:#000;background:var(--color-tooltip-bg);box-shadow:0 3px 8px rgba(165, 165, 165, 0.5);pointer-events: none;}
#ebook_pages>div [data-tooltip]::after{content: '';border-left:5px solid transparent;top:2px;border-right:5px solid transparent;border-top:5px solid var(--color-tooltip-bg);}
#ebook_pages>div [data-tooltip]:not([data-tooltip=""]):hover::before{visibility:visible;opacity:1;top:-34px;}
#ebook_pages>div [data-tooltip]:not([data-tooltip=""]):hover::after{visibility:visible;opacity:1;top:-8px}

/*이북 학습창 툴팁*/
#ebook_pages>div [data-tooltip].icon_std::before { background-color: #b5c8f8; }
#ebook_pages>div [data-tooltip].icon_std::after { border-top-color: #b5c8f8; }

/*이북 스마트 학습 툴팁*/
#ebook_pages>div [data-tooltip].icon_smart::before { background-color: #f4c1a7; }
#ebook_pages>div [data-tooltip].icon_smart::after { border-top-color: #f4c1a7; }

/*이북 영상 툴팁*/
#ebook_pages>div [data-tooltip].icon_stdVideo::before{ background-color: #f6b2c7; }
#ebook_pages>div [data-tooltip].icon_stdVideo:after { border-top-color: #f6b2c7; }

/*이북 다운로드 툴팁*/
#ebook_pages>div [data-tooltip].icon_actSheet::before { background-color: #b3e2ed; }
#ebook_pages>div [data-tooltip].icon_actSheet::after { border-top-color: #b3e2ed; }

/*이북 이동 툴팁*/
#ebook_pages>div [data-tooltip].icon_eMove::before { background-color:#9fddd5; }
#ebook_pages>div [data-tooltip].icon_eMove::after { border-top-color: #9fddd5; }

/*이북 링크 툴팁*/
#ebook_pages>div [data-tooltip].icon_eLink::before { background-color:#a9e1b4; }
#ebook_pages>div [data-tooltip].icon_eLink::after{ border-top-color: #a9e1b4; }

/*이북 투명 이동버튼 툴팁, 이북 투명 용어 설명 툴팁*/
#ebook_pages>div [data-tooltip].icon_eTrsMove::before,
#ebook_pages>div [data-tooltip].icon_eTrsTerms::before { background-color: #b7e186; }
#ebook_pages>div [data-tooltip].icon_eTrsMove::after,
#ebook_pages>div [data-tooltip].icon_eTrsTerms::after { border-top-color: #b7e186; }


/***** 펜 쓰기 (from tool) *****/
canvas.canvas_layer {position: absolute; z-index: 100;left: 0; top: 0; transform: translate(0% , 0%); display: none; box-sizing:border-box}
canvas.dummy_canvas {position: absolute; z-index: 100;left: 0; top: 0; transform: translate(0% , 0%); display: none; box-sizing:border-box}  
#page_std canvas.canvas_layer,#page_std canvas.dummy_canvas{z-index: 100;}

/*#draw_std { width: 100% !important; height: 959px; top: 61px;}*/
#draw_std { left: 76px; top: 70px; }
#draw_ebook_zoom {top: 0;}
#wrap>div:not(#popup)#canvas_frame{height: 0 !important; position:absolute; top:-100%; left:0; z-index: 100;}
#canvas_frame>div{position: absolute; z-index: 100; width: 1680px; height: 1043px; left: 121px; top: 10px; border:4px solid var(--color-ui-key) !important; pointer-events: none;}

#canvas_frame>button{position: absolute; top: 10px; left: 1751px; width: 48px; height: 48px; border-radius: 0 0 0 24px; background: var(--color-ui-key) url(../img/common/popup/ico_popclose.png) 16px 11px no-repeat; font-size:0; z-index: 100; }


/***** #full_page: 풀페이지 모드 *****/
#full_page {background-color : white; width : 1582px; height : 1000px; overflow-y : auto; left : 0; top : 0; z-index : 111; display : none;}
#full_page::-webkit-scrollbar{display: none;}

#full_bg{background-image: url(""); background-size: 100%; width : 1582px; height : 2086px; position : relative; z-index : 112; background-size:100% 100%;}
#answer_full{background-image: url(""); background-size: 100%; width : 1582px; height : 2086px; position : relative; z-index : 112; background-size:100% 100%;pointer-events: none;}


/***** #navigator: 하단 페이지 이동 네비게이션 *****/
#navigator {position: absolute; height: 8px; z-index: 22; overflow: visible;  bottom: 0; left: 50%; width:1702px; margin-left:-851px;}
#pointer_out {position: absolute; left: -50%; top: -800px; height: 1000px; width: 200%; z-index: 151; touch-action: none; opacity : 0.5; }
#pointer_area {position: absolute; left: 0px; top: -48px; height: 80px; width: 100%; z-index: 151; touch-action: none; opacity : 0.5; }
#navigator>span {display: none; }
#progress {position: relative; float: left; left: 105px; top: 0px; width: 1492px; height: 8px; background: #b1b1b1; border-radius: 10px;}

#pointer {position: relative; display: block; width: 190px; height: 44px; margin-left : calc(0px - 190px/2); top: -36px; left: 50%;  z-index: 1;}
/* #pointer:before {content: attr(data-content); display: block; width: 100%;} */
#pointer>h5{position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #fff; font-family: 'pretendard-SB'; font-size: 20px; text-align: center; line-height: 2.4; background: url(../img/common/progress_pointer.png) no-repeat center; }

#progress>em{content:""; display: block; width:50%; position:absolute; left:0; top:0; height:100%; background:var(--color-ui-key); border-radius: 10px;}

#thumbnail {position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 200px; border: 8px solid var(--color-ui-key); box-shadow: rgba(0, 0, 0, 40%) 0 0 15px; bottom: 28px; z-index: -1; border-bottom: 20px solid var(--color-ui-strong); display:none; background-color:white; }
#thumbnail>img {float: left; vertical-align: middle; line-height: normal; width: 142px; height: 173px; margin : 0; }
#thumbnail>img+img {border-left: 1px solid #e5e5e5; }
#thumbnail>p {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table; }
#thumbnail>p>span {display: block; width: 50%; text-align: center; font-size: 50px; line-height: 100%; /*vertical-align: middle;*/ display: table-cell; font-weight: 900; color: var(--color-ui-strong); background: rgba(255, 255, 255, 0.3); }
#page_num {display: none; }



/***************************************************************/
/********** [ 3. #page_std: 학습창. load "std.html" ] **********/
/***************************************************************/

/***** .header *****/
#page_std {
  --height-header-top: 0px; /*5px;*/
}
#page_std>header { position: relative; width: 1920px; height: 70px; margin: 0 auto; padding: 0; z-index: 100; /*z-index: 555;*/ pointer-events: none; }
#page_std>header>.bg { position: absolute; width: 1762px; height: var(--height-header-top); left: calc(50% - 1762px/2); background-color: #4c0093; }
/*** button: 목차 버튼 ***/
#page_std>header>button { float: left; width: 54px; height: 45px; margin: 20px 0 0 14px; font-size: 0; pointer-events: auto; background: url(../img/common/std/header_button_menu.png) center no-repeat; }

/*** h4: 상단 문구 ***/
/* #page_std>header>h4 { display: inline-block; font-family: 'omt'; font-size: 32px; color: #fff; letter-spacing: -0.5px; line-height: 2.1; vertical-align: middle; } */
#page_std>header>h4 { position: relative; display: none; vertical-align: middle; font-family: 'omt'; font-size: 32px; color: #fff; letter-spacing: 0px; line-height: 1.2; padding: 18px 80px 0 14px; }
#page_std>header>h4>span { position: relative; display: inline-block; margin-right: 24px; font-family: 'omt'; }
#page_std>header>h4>span::after { content: '>'; position: relative; display: inline-block; width: 8px; height: 40px; left: 10px; color: #b1ceff; font-size: 32px; vertical-align: 0px; }
#page_std>header>h4>span.clean::after{display:none;}

/*** div: 우측 요소 ***/
#page_std>header>div { float: right; }
/* #page_std>header>div.pluginsQuiz { height: 70px; margin-right: 10px; padding: auto; line-height: 3.8; }

/*** div.go: ebook, sbook 이동 버튼 ***/
#page_std>header>div>div.go { position: relative; display: inline-block; width: auto; height: 100%; right: 79px; padding: 18px 24px 0 0px; }

#page_std>header>div>div.go>dl { position: relative; display: none; width: auto; height: 40px; padding: 5px 16px 0 16px; margin-right: 10px; border: 2px solid #fff; border-radius: 20px; vertical-align: middle; color: #fff; font-family: "nq"; font-weight: 500; font-size: 20px; line-height: 1.3; }
#page_std>header>div>div.go>dl>dd,
#page_std>header>div>div.go>dl>dt { position: relative; display: inline-block; vertical-align: middle; }
#page_std>header>div>div.go>dl>dd:after { content:"\CABD"; }
#page_std>header>div>div.go>button { position: relative; display: inline-block; width: 36px; height: 36px; vertical-align: middle; background: url(../img/common/lnb_button_close.png) no-repeat center; pointer-events: auto; }


/* #page_std>header>div>div.go>span.bar { position: relative; display: none; width: 3px; height: 24px; margin: 0 10px 0 12px; vertical-align: middle; background-color: #b86f00; }
#page_std>header>div>div.go.all>span.bar {  display: inline-block; }
#page_std>header>div>div.go>button.go_spno { padding-left: 42px; background: url(../img/common/study/type1/top_icon_sbook.png) no-repeat 0 center; } */

/*** div.go_home: home 버튼 ***/
/* #page_std>header .go_home { width: 180px; height: 77px; margin-right: -16px; font-size:0; background:url(../img/common/study/type1/top_pencil_right.png) 0 0 no-repeat; cursor: auto; }
#page_std>header .go_home>span { position: absolute; display: block; width: 55px; height: 100%; right: 10px; top: 0px; background:url(../img/common/study/type1/top_pencil_home.png) center no-repeat; cursor: pointer; }
#page_std>header .go_home>span:hover { background:url(../img/common/study/type1/top_pencil_home_over.png) center no-repeat; } */

/*** div.big_cursor: 큰 커서 ***/
/* #page_std>header .big_cursor { background: url(../img/common/bigcursor_icon.png) center center no-repeat; width: 42px; height: 42px; font-size:0; vertical-align: middle; background-size:100%; opacity:0.5; }
#page_std>header .big_cursor.active { opacity: 1; } */

/*#page_home>section>div>ul>li>div{display:none;font-size:0;}
#page_home>section>div>ul>li.on>div{display: inline-block; vertical-align: middle; background:url(../img/common/ico_liston.png) 0 6px no-repeat; width:43px; height: 46px; margin-left: 8px;cursor: pointer;}*/

/***** .footer *****/

/* footer bg */
#page_std>footer { width: 100%; height: 38px; bottom: 0; z-index: 555; }
#page_std>footer>ul { width: 100%; margin: 0 auto; padding: 0 0 0 56px;display:none; }
body #page_std>footer>ul { background: url(../img/common/std/type1/bottom_left.png) no-repeat 0 center #ffefd0; }

#page_std>footer>ul>li{ display: inline-block; }

#page_std>footer>ul>li.std_title>button { position: relative; height: 38px; padding: 0px 12px; margin: 0; font-family: 'scdream-6'; font-size : 24px; text-align: center; letter-spacing: -1px; line-height: 1.2; border-radius: 20px; color: #7a2800; }
#page_std>footer>ul>li.std_title>button.on { padding: 0px 16px; color: #fff; background-color: #fa6775; }

#page_std>footer>ul>li.page_no{
  position: absolute;
  top:8px;
  right: 920px;;
}
/* 좌우 버튼 */
#page_std>footer .page_navi .prev { position: absolute; z-index: 100; top: calc(50% - (160px - 90px) / 2); left: 60px; /*30px;*/ width: 32px; height: 160px; font-size: 0; vertical-align: middle; background:url(../img/common/std/btn_page_prev.png) right center no-repeat; transition: all 0.5s;}
#page_std>footer .page_navi .next { position: absolute; z-index: 100; top: calc(50% - (160px - 90px) / 2); right: 60px; /*30px;*/ width: 32px; height: 160px; font-size: 0; vertical-align: middle; background:url(../img/common/std/btn_page_next.png) left center no-repeat; transition: all 0.5s;}
#page_std>footer .page_navi .prev:hover, #page_std>footer .page_navi .next:hover { transform: scale(1.2);}
#page_std>footer .page_navi.disabled .prev,
#page_std>footer .page_navi.disabled .next { pointer-events: none; }



/***** section (#p_std) *****/
/*#page_std>section {width: 1760px; height: 990px; top: 0px; padding: 0; margin:0 auto; border: 1px}*/
#page_std>section {
    position: absolute;
    width: 1762px;
    height: calc(1080px - var(--height-header-top));
    left: calc(50% - 1762px / 2);
    top: var(--height-header-top);
    padding: 0;
    margin: 0 auto;
}
#page_std>section.fs {position: absolute; z-index: 999999;}

#page_std>section .con_body{position: relative; height: 100%; margin: 0 auto;}

#page_std>section .con_body .con_head{width:100%;height:90px;line-height:35px;margin:0 auto;}
#page_std>section .con_body .con_head >h1{position:relative;left:40px;top:30px;font-family:'lhm';font-size:45px;}
#page_std>section .con_body .con_contents.head{top:90px;height:878px;}
#page_std>section .con_body .con_contents{ position: absolute; overflow: hidden; top: 0; width: 100%; height: 100%; background:#fff;}
#page_std>section .con_body .con_contents>.tab{position:absolute;right:30px;top:-57px;z-index: 1;}
#page_std>section .con_body .con_contents>.tab >span{margin-left:10px;}
#page_std>section .con_body .con_contents>.tab >span > button{font-size:30px;border:1px solid #333;min-width:100px;padding:10px 20px;}
#page_std>section .con_body .con_contents>.content{width:100%;text-align:center;}

/***** .std_loading *****/
#page_std>.std_loading {position: absolute; left:50%; top: 56px; height: 100%; z-index: 101; background-color: transparent; transform:translate3d(0px, 0px, 0px);display:flex; justify-content: center; align-items: center;}

#loading {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border: 10px solid rgba(255,255,255,.5);
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

/***** .background *****/
#page_std .background { position: absolute; left: 50%; top: 0; }
#page_std .background .section { position: relative; left: -2500px; width: 5000px; height: 1084px; background-color: #e3e6ec; }
/* #page_std .background .footer { display: none; position: relative; left: -2500px; width: 5000px; height: 56px; background-color: #00a7df; } */

/***** ??? *****/
#icons_std { position: absolute; width: 0; height: 0; top: 69px; }



/***************************************************************/
/********** [ 4. #page_pds: 자료실. load "pds.html" ] **********/
/***************************************************************/



/*************************************************/
/********** [ 5. #page_iframe: iframe ] **********/
/*************************************************/

/***** ifrmae 영역 *****/
#page_iframe>iframe { position: relative; width: 1921px; height: 100%; }
#page_iframe>.iframe_bg { position: absolute; display: none; width: 2520px; height: 100%; left: calc(0px - (2520px - 1921px)/2); pointer-events: none; }
#page_iframe>.iframe_bg.quiz { background: url(../plugins/quiz/images/bg_extend.png) no-repeat center/contain; }



/************************************************/
/********** [ 6. #sectbar: 차시 표시 ] **********/
/************************************************/

#sectbar { position: absolute !important; width: 57px; height: 640px !important; top: 0px; right: 0px; background: url(../img/common/toolbar/section_bar.png) bottom no-repeat; }
body.dan1 #sectbar {background: url(../img/common/study/type1/section_bar.png) bottom no-repeat;}

#sectbar .bar { position: relative; width: 17px; height: 140px; margin: 0 auto; background-color: #ffd98e; }
#sectbar .bubble { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 60px; top: -54px; margin: 0 0 0 -3px; padding-bottom: 12px; font-family: 'scdream-7'; font-size: 15px; color: #fff; text-align: center; line-height: 1.2; letter-spacing: -0.5px; background: url(../img/common/toolbar/section_bubble.png); opacity: 0; }



/**********************************/
/********** [ 99. 기타 ] **********/
/**********************************/

#page_home>section>div>ol>li.notSample,
#page_home>section>div>ul>li.notSample, 
#popup>div.std_menu>section>ol li.notSample, 
#ebook_lnb .menu_list >li.notSample,
#page_pds section>.tab>li.notSample,
#page_pds header>ol li.notSample{pointer-events: none;opacity:0.7;}


/*스콤방식 제어*/

/*
body#scorm #wrap{height:970px;}
body#scorm[data-mode="bodyBook"] #wrap{height:1080px;}
body#scorm[data-mode="bodyStd"] #toolbar{display:none !important;}

body#scorm.bookStd #show_toolbar{display:block;}
body#scorm #palette_doumi{top:-70px;}
body#scorm #page_std .background .section{background-color:#fff}
body#scorm #page_std .con_contents{box-shadow:none}
body#scorm .fake-page-btn{display:none !important;}
*/

body#scorm #page_std>header .go{pointer-events: none;}
/*
body#scorm #page_std>header{background:#5fd1f4;display:none;}
body#scorm #page_std>header>p{background:#5fd1f4;}
body#scorm #page_std>header>p>span{font-size:40px;height:70px;line-height:70px;color:#fff;font-family: "gmarketM";}
body#scorm #page_std>header>p>span:nth-child(1){margin-left:30px;}
body#scorm #page_std>header>p>span:nth-child(2){position: absolute;right:30px;top: 10px;border-radius: 10px;border: 2px solid #fff;padding: 3px 20px;height: 50px;line-height: 50px;font-size: 30px;}

body#scorm #page_std>header>button,
body#scorm #page_std>header>h4,
body#scorm #page_std>header>div{display:none;}
*/

/*
body#scorm #page_std>footer,
body#scorm #page_std .background .header,
body#scorm #page_std .background .footer,
body#scorm #page_std .background .footer,
body#scorm #ebook_lnb,
body#scorm[data-mode="bodyBook"] #show_toolbar,
body#scorm #icons_left,
body#scorm #icons_right,
body#scorm #btn_bookmark_L,
body#scorm #btn_bookmark_R,
body#scorm #page_go_ebook{display:none;}
body#scorm .tool_jindo{display:none}
body#scorm .tool_doumi{border-radius: 20px 20px 0 0;}
body#scorm .tool_memo_new,
body#scorm .tool_link_new{display:none}
body#scorm #toolbar>ul>li>ul#palette_pen{top:-377px;}
body#scorm .btn-view-again{display:none;}
body#scorm #page_home .background{display:none;}
body#scorm #page_home li{display:none;}
body#scorm #page_go_std.go{display:none;}
*/
.map_wrap{height:194px !important;}
.map_wrap .view{box-shadow: var(--color-ui-strong) 0 0 0 4px inset !important;}


/*책사이즈 변경시 높이기준(1043px) width 값수정*/
body #ebook_pages{margin-left: -816px;width: 1632px;}
body #ebook_pages>div{background-size: 816px 100%;}
body #full_page,
body #full_bg{width : 1632px;}
body #answer_full{width : 1632px;}

/*
body #ebook_pages{margin-left: -812px;width: 1624px;}
body #ebook_pages>div{background-size: 812px 100%;}
body #answer_full{width : 1624px;}
*/
/*자료실 클릭 못하게*/
body[data-pds="pds"] #page_pds section table .hwp,
body[data-pds="pds"] #page_pds section table .pptx,
body[data-pds="pds"] #page_pds section table .pdf,
body[data-pds="pds"] #page_pds section table .zip,
body[data-pds="pds"] #page_pds section table .zip2,
body[data-pds="pds"] #page_pds section table .mp4,
body[data-pds="pds"] #page_pds section table .mp3,
body[data-pds="pds"] #page_pds section table .qr,
body[data-pds="pds"] #page_pds .pds_common .zip,
body[data-pds="pds"] #page_pds .pds_common .pdf,
body[data-pds="pds"] #page_pds .pds_common .hwp{pointer-events: none;}

/*이북에서 다운 클릭 못하게*/
body[data-pds="pds"] #ebook_pages .icon_actSheet,
body[data-pds="pds"] #ebook_pages .icon_hwp,
body[data-pds="pds"] #ebook_pages .icon_ppt,
body[data-pds="pds"] #ebook_pages .icon_plan,
body[data-pds="pds"] #ebook_pages .icon_actpaper,
body[data-pds="pds"] #ebook_pages .icon_pdf,
body[data-pds="pds"] #ebook_pages .icon_history{pointer-events: none;}