@import url(workbook.css);

/********** ver 2023 **********/
:root {
  --color-header-effect: #fff477;
  --color-header01-bg: #f8a865;
  --color-header01-bg-strong: #f7965b;
  --color-header01-bg-dark: #f5834c;
  --color-header02-bg: #48c6b4;
  --color-header02-bg-strong: #25bdad;
  --color-header02-bg-dark: #0fa294;
  --color-ui01-wan: #fff0e9;
  --color-ui01-pale: #fac89e;
  --color-ui01-light: #fcbc86;
  --color-ui01-medium: #f7965b;
  --color-ui01-dark: #f68c59;
  --color-ui02-wan: #e0fff7;
  --color-ui02-pale: #9ed8c9;
  --color-ui02-light: #7ecbb7;
  --color-ui02-medium: #45c0ae;
  --color-ui02-dark: #25bdad;
  --color-index-text: #3f3f3f;
  --color-index-line: rgba(209, 209, 209, 0.5);
  --size-header-height: 57px;
  --size-header-radius: 18px;
  --size-ui-text-large: 25px;
  --size-ui-text: 23px;
  --size-ui-text-small: 19px;
  --size-index-radius: 16px;
  --set-box-shadow: 0 0 0.2em rgba(0,0,0,0.2);
  --set-text-shadow: -1px -1px 0.1em rgba(0,0,0,0.1), 1px -1px 0.1em rgba(0,0,0,0.1), -1px 1px 0.1em rgba(0,0,0,0.1), 1px 1px 0.1em rgba(0,0,0,0.1);
}

/* 글씨 --> common.css로 옮길 수 있음 */
@font-face { font-family: 'ui-regular'; src: url('./KoPubWorldDotumMedium.woff') format('woff'); }
@font-face { font-family: 'ui-regular'; src: url('./KoPubDotumMedium.woff') format('woff'); unicode-range: U+00d7; } /* '×'만 대체 폰트 적용 */
@font-face { font-family: 'ui-bold'; src: url('./KoPubWorldDotumBold.woff') format('woff'); }
@font-face { font-family: 'ui-bold'; src: url('./KoPubDotumBold.woff') format('woff'); unicode-range: U+00d7; } /* '×'만 대체 폰트 적용 */
@font-face { font-family: 'kopubBatangL'; src: url('./KoPubBatang-Regular.woff') format('woff'); }

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


button{outline: 0;}
#wrap { position: relative;width: 1920px; height: 1080px; background: #fff;}
#wrap>div:not(#popup):not(#canvas_layer):not(#tools_frame) {height: 100%; position: relative;}
#wrap>div { display: none; }

#wrap #tools-frame #std-rulerboard-wrap { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 100; pointer-events: none; will-change: transform; transform: translateZ(0); }

/* 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:14px;font-family:'ui-bold';letter-spacing:0px;pointer-events: none;}
[data-tooltip]:before{content:attr(data-tooltip);height:28px;position:absolute;top:-20px;padding:4px 10px;border-radius:15px;color:#000;background:#fff;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 #fff;}
[data-tooltip]:not([data-tooltip=""]):hover:before{visibility:visible;opacity:1;top:-34px}
[data-tooltip]:not([data-tooltip=""]):hover:after{visibility:visible;opacity:1;top:-7px}

/*한면 보기 data-tooltip*/
#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:'ui-bold';letter-spacing:calc(-1px *2);}
#ebook_pages>div>div#full_bg [data-tooltip]:before{height:calc(28px *2);top:calc(-20px *2);padding:calc(4px *2) calc(10px *2);border-radius:calc(15px *2);color:#000;background:#fff;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:calc(5px *2) solid #fff;}
#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(-7px *2)}



/********** [ home content ] **********/
#page_home{padding-top:1px;}
#page_home .background{position: absolute;left:50%;top:0;width:2520px;height:100%;margin-left:-1260px}
#page_home>header{position: absolute; left:54px; top:50px; z-index:1;}
#page_home>header>h1{display:inline-block; background-color:#3c97da;border-radius:10px; margin-right: 10px; color:#fff; font-family:'kopubB'; font-size:25px;width:110px; text-align:center; vertical-align: middle;}
#page_home>header>h2{display:inline-block; font-family:'omt'; color:#000; font-size:50px; vertical-align: middle;}
#page_home>header>h2>span{color:#3c97da;font-family: 'kopubB';}

#page_home>section{font-size:0; height: 100%; position: relative;}

#page_home>section .study_save{width:126px; height:126px; position:absolute; bottom:30px; right:30px;}


#page_home>footer{position:absolute; right:20px; top:70px; font-size:0; }  
#page_home>footer >button{ padding:0 40px;  vertical-align: top; position:relative; height:28px;line-height:28px;font-family: 'kopubB';font-size:27px;color:#333;border-right:1px solid #666;}
#page_home>footer >button:last-child{border-right: 0px;}
#page_home>footer >button:hover{color:#2b84c5;}
#page_home>footer >button:hover:before{content:'';display:inline-block;position:absolute; top:-30px; width:18px;height:18px; left:calc(50% - 8px); border-radius: 50%;background-color:#2b84c5;}
/*#page_home>footer >button.go_extra{position: relative;margin-right:0;border-right:0}
#page_home>footer .extra_list{display:none;position:absolute;left:50px;top:40px;background:#fff;height:60px;line-height:60px;border-radius: 20px;;}
#page_home>footer .extra_list>button{ padding:10px 40px;  vertical-align: middle; position:relative; height:28px;line-height:11px;font-family: 'kopubB';font-size:27px;color:#333;border-right:1px solid #666;}
#page_home>footer .extra_list>button:last-child{margin-right:0;border-right:0}
#page_home>footer .extra_list.active{display:block;}*/

#page_go_home{position:absolute; bottom: 23px; left: 56px; width: 245px; height: 48px; padding-top: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.5); z-index: 101/*5*/;}
#page_go_home>span { position: relative; display: inline-block; padding: 4px 2px 0 16px; color: #333; font-family: "kopubB"; font-size: 20px; line-height: 1.2; vertical-align: middle; }
#page_go_home>input{ position: relative; display: inline-block; width: 69px; height: 38px; font-family: "omb"; font-size: 20px; color: #333; text-align: center; vertical-align: middle; border: none; outline: none; background: url(../img/common/home/home_input.png) no-repeat center; }
#page_go_home input[type="number"]::-webkit-outer-spin-button,
#page_go_home input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#page_go_home>button.go_page { position: relative; display: inline-block; width: 49px; height: 38px; /*margin: 5px 0;*/ vertical-align: middle; font-size: 0; background: url(../img/common/home/btn_home_go.png) no-repeat center; }

/*#page_go_home.go{ width:203px; height: 51px; background: url(../img/common/ico_pagego_on.png) no-repeat 0 0/contain; }
#page_go_home.go>button.go_page{margin: 0; width: 48px; height: 42px; vertical-align: middle;}*/



/********** [ study content ] **********/
/*ifrmae 영역*/
#page_iframe>iframe { position:relative; width: 1921px; height: 100%; }
#page_iframe>#iframe_bg {position:absolute; display: none; width: 2600px; height: 100%; left: calc(0px - (2600px - 1921px)/2); pointer-events: none;}

#page_iframe>#iframe_bg.dic { background: url(../plugins/dicdata/images/type5/index_bg.png) no-repeat center/contain; }
body[data-bcode="mat41"] #page_iframe>#iframe_bg.dic,
body[data-bcode="mat42"] #page_iframe>#iframe_bg.dic,
body[data-bcode="mat61"] #page_iframe>#iframe_bg.dic,
body[data-bcode="mat62"] #page_iframe>#iframe_bg.dic { background: url(../plugins/dicdata/images/type6/index_bg.png) no-repeat center/contain; }

#page_iframe>#iframe_bg.special { background: url(../plugins/viewer/img/ui/bg.png) no-repeat center/contain; }

#page_iframe>#iframe_bg.quiz { background: url(../plugins/quiz/images/type3/index_bg.png) no-repeat center/contain; }
body[data-bcode="mat41"] #page_iframe>#iframe_bg.quiz,
body[data-bcode="mat42"] #page_iframe>#iframe_bg.quiz,
body[data-bcode="mat61"] #page_iframe>#iframe_bg.quiz,
body[data-bcode="mat62"] #page_iframe>#iframe_bg.quiz { background: url(../plugins/quiz/images/type4/index_bg.png) no-repeat center/contain; }

/*** header: test ***/
/*.background .header { position:relative; left: -50%; width: 1820px; height: var(--size-header-height); margin: 0 auto; background: url("../img/common/study/type2/proto_top.png") no-repeat center center/contain; }*/

/* header bg */
#page_std>header { position: relative; width: 1820px; height: var(--size-header-height); border-radius: 0 0 var(--size-header-radius) var(--size-header-radius); margin: 0 auto; text-shadow: var(--set-text-shadow); z-index: 555; background-color: var(--color-header01-bg); }
body.dan2 #page_std>header,
body.dan4 #page_std>header,
body.dan6 #page_std>header { background-color: var(--color-header02-bg); }

/*** header 왼쪽 ***/
#page_std>header>button.std_menu { float: left; width: auto; height: 100%; padding: 0 20px 0 0; margin: 0; border-radius: 0 0 0 var(--size-header-radius); background: url(../img/common/study/ico_menu.png) no-repeat 22px 18px; background-size: 21px 18px; background-color: var(--color-header01-bg-strong); }
body.dan2 #page_std>header>button.std_menu,
body.dan4 #page_std>header>button.std_menu,
body.dan6 #page_std>header>button.std_menu { background-color: var(--color-header02-bg-strong); }

#page_std>header>button.std_menu>span { position: relative; display: inline-block; width: auto; margin: 0 0 0 56px; font-family: 'ui-bold'; font-size: var(--size-ui-text-large); color: var(--color-header-effect); text-shadow: var(--set-text-shadow); line-height: 2.3; vertical-align: middle; }
#page_std>header>button.std_menu>span.long{font-size:23px;}
#page_std>header>button.std_menu>span.long2{font-size:22px;}
#page_std>header>span.shadow { float: left; width: 12px; height: 56px; margin-right: auto; line-height: 0; background:url(../img/common/study/type1/header_shadow.png) 0 0 no-repeat; }
body.dan2 #page_std>header>span.shadow,
body.dan4 #page_std>header>span.shadow,
body.dan6 #page_std>header>span.shadow { float: left; width: 12px; height: 56px; margin-right: auto; line-height: 0; background:url(../img/common/study/type2/header_shadow.png) 0 0 no-repeat; }

#page_std>header>h4 { display:inline-block; margin-left: 12px; font-family: 'ui-regular'; font-size: var(--size-ui-text-large); color: #fff; line-height: 2.3; vertical-align: middle; }
#page_std>header>h4.long{font-size:23px;line-height:2.7}
#page_std>header>h4.long2{font-size:22px;line-height:2.8}
/*#page_std>header>h4>span{ position:relative; text-shadow:none; font-family: 'ui-bold'; margin-left:10px; padding:4px 20px 2px 36px; border-radius: 21px;font-size:var(--size-ui-text); color:var(--color-header-effect); }
#page_std>header>h4>span:before{ content:""; position: absolute; left:12px; top:12px;width:18px; height:18px; background: url(../img/common/index/bullet_activity_on.png) no-repeat center; }*/

/*#page_std>header>h4>span { background-color:var(--color-header01-bg-dark); }
body.dan2 #page_std>header>h4>span,
body.dan4 #page_std>header>h4>span,
body.dan6 #page_std>header>h4>span { background-color:var(--color-header02-bg-dark); }*/

#page_std>header>h4>span.dan { margin-left: -5px; }
#page_std>header>h4>span.dan>sup { left: 0px; right: auto; top: -8px; margin-right: 2px; font-family: inherit; font-size: 14px; }



/*** header 오른쪽 ***/
#page_std>header>div:not(.std_list) { float: right; line-height: 56px; margin-right: 12px; }
#page_std>header>div>button { position: relative; font-size: 0; vertical-align: middle; }

/* .go_epno, .go_spno */
body[data-workbook='true'] #page_std>header>div>button.go_spno { display: none !important; }
#page_std>header>div>button.go_epno, #page_std>header>div>button.go_spno { width: auto; height: 100%; vertical-align: middle; padding: 0px; }
#page_std>header>div>button dl { display: block; text-align: center; margin-right: 10px; }
#page_std>header>div>button dt { display: inline-block; padding: 0 10px 0 38px; font-family: 'ui-regular'; font-size: var(--size-ui-text); color: #fff; letter-spacing: 0px; line-height: 1.8; text-shadow: var(--set-text-shadow); vertical-align: middle; background: url(../img/common/study/ico_book.png) no-repeat 0 center; background-size: 31px 29px; }
#page_std>header>div>button dd { display: inline-block; height: 41px; padding: 8px 34px 0 20px; margin-top: -1px; font-family: 'ui-bold'; font-size: var(--size-ui-text); color: var(--color-header-effect); letter-spacing: 0px; line-height: 1.2; vertical-align: middle; border-radius: 21px; background: url(../img/common/study/ico_triangle.png) no-repeat right center; background-size: 20px 14px; }
#page_std>header>div>button dd:hover { background: url(../img/common/study/ico_triangle_over.png) no-repeat right center; }

/* 배경 색상 customize */
#page_std>header>div>button dd,
body.dan1 #page_std>header>div>button dd,
body.dan3 #page_std>header>div>button dd,
body.dan5 #page_std>header>div>button dd,
body.dan7 #page_std>header>div>button dd { background-color: var(--color-header01-bg-dark); }
body.dan2 #page_std>header>div>button dd,
body.dan4 #page_std>header>div>button dd,
body.dan6 #page_std>header>div>button dd { background-color: var(--color-header02-bg-dark); }

#page_std>header>div>button dd:after { content:"\CABD"; }
#page_std>header>div>button:hover dd { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1); }

/* .big_cursor */
#page_std>header .big_cursor{ width: 97px; height: 45px; background:url(../img/common/study/type1/ico_bigcursor.png) no-repeat center center/contain; }
#page_std>header .big_cursor.active { background:url(../img/common/study/type1/ico_bigcursor_on.png) no-repeat center center/contain; }
body.dan2 #page_std>header .big_cursor,
body.dan4 #page_std>header .big_cursor,
body.dan6 #page_std>header .big_cursor { background:url(../img/common/study/type2/ico_bigcursor.png) no-repeat center center/contain; }
body.dan2 #page_std>header .big_cursor.active,
body.dan4 #page_std>header .big_cursor.active,
body.dan6 #page_std>header .big_cursor.active { background:url(../img/common/study/type2/ico_bigcursor_on.png) no-repeat center center/contain; }

#page_std>header .big_cursor:hover { background:url(../img/common/study/type1/ico_bigcursor_on.png) no-repeat center center/contain; }
body.dan2 #page_std>header .big_cursor:hover,
body.dan4 #page_std>header .big_cursor:hover,
body.dan6 #page_std>header .big_cursor:hover { background:url(../img/common/study/type2/ico_bigcursor_on.png) no-repeat center center/contain; }


/* .go_pds */
#page_std>header .go_pds{ width: 118px; height: 45px; background:url(../img/common/study/type1/ico_pds.png) no-repeat center center/contain; }
body.dan2 #page_std>header .go_pds,
body.dan4 #page_std>header .go_pds,
body.dan6 #page_std>header .go_pds { background:url(../img/common/study/type2/ico_pds.png) no-repeat center center/contain; }

#page_std>header .go_pds:hover { background:url(../img/common/study/type1/ico_pds_on.png) no-repeat center center/contain; }
body.dan2 #page_std>header .go_pds:hover,
body.dan4 #page_std>header .go_pds:hover,
body.dan6 #page_std>header .go_pds:hover { background:url(../img/common/study/type2/ico_pds_on.png) no-repeat center center/contain; }


/* .go_home */
#page_std>header .go_home { width: 82px; height: 45px; background:url(../img/common/study/type1/ico_home.png) no-repeat center center/contain; }
body.dan2 #page_std>header .go_home,
body.dan4 #page_std>header .go_home,
body.dan6 #page_std>header .go_home { background:url(../img/common/study/type2/ico_home.png) no-repeat center center/contain; }

#page_std>header .go_home:hover { background:url(../img/common/study/type1/ico_home_on.png) no-repeat center center/contain; }
body.dan2 #page_std>header .go_home:hover,
body.dan4 #page_std>header .go_home:hover,
body.dan6 #page_std>header .go_home:hover { background:url(../img/common/study/type2/ico_home_on.png) no-repeat center center/contain; }

/* 활동 영역은 아래 "#page_std>header> .std_list" 찾을 것 */
#page_std>header .dummy { visibility: hidden; width: 70px; }



#page_home>section>div>ul>li>div{display:none;font-size:0;}
#page_home>section>div>ul>li.on>div{display: none/*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;}

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

/* 좌우 버튼 */
#page_std>footer .page_navi .prev { position: absolute; z-index: 100; top: calc(50% - 5px); left: 10px; width: 38px; height: 65px; font-size: 0; vertical-align: middle; background:url(../img/common/study/type1/ico_prev.png) center center no-repeat; transition: all 0.5s; }
body.dan2 #page_std>footer .page_navi .prev,
body.dan4 #page_std>footer .page_navi .prev,
body.dan6 #page_std>footer .page_navi .prev { background:url(../img/common/study/type2/ico_prev.png) center center no-repeat; }

#page_std>footer .page_navi .next { position: absolute; z-index: 100; top: calc(50% - 5px); right: 10px; width: 38px; height: 65px; font-size: 0; vertical-align: middle; background:url(../img/common/study/type1/ico_next.png) center center no-repeat; transition: all 0.5s; }
body.dan2 #page_std>footer .page_navi .next,
body.dan4 #page_std>footer .page_navi .next,
body.dan6 #page_std>footer .page_navi .next { background:url(../img/common/study/type2/ico_next.png) center center no-repeat; }

#page_std>footer .page_navi .prev:hover, #page_std>footer .page_navi .next:hover { transform: scale(1.2);}

#page_std>footer .toolbar{position:relative;float: right;}
#page_std>footer .toolbar>button{ width: 96px; height: 96px; background:#eeeeee url(../img/common/ico_toolbar.png) center center no-repeat; font-size:0;}
#page_std>footer .toolbar>button.on{ background-color:#b2b2b2;}
#page_std>footer .toolbar>ul{position:absolute;bottom:96px;right:0;border-radius: 15px 15px 0 0;overflow: hidden}
#page_std>footer .toolbar>ul li{font-size:0;}
#page_std>footer .toolbar>ul li>button{width:96px; height: 96px; background-color:#eeeeee; border-bottom:1px solid #dddddd; background-position:center center; background-repeat: no-repeat;}
#page_std>footer .toolbar>ul li .tool_jindo{background-image:url(../img/common/ico_tool_jindo.png);}
#page_std>footer .toolbar>ul li .tool_doumi{background-image:url(../img/common/ico_tool_doumi.png);}
#page_std>footer .toolbar>ul li .tool_memo_new{background-image:url(../img/common/ico_tool_memo.png);}
#page_std>footer .toolbar>ul li .tool_link_new{background-image:url(../img/common/ico_tool_link.png);}
#page_std>footer .toolbar>ul li .tool_memo{background-image:url(../img/common/ico_tool_memo.png);}
#page_std>footer .toolbar>ul li .tool_link{background-image:url(../img/common/ico_tool_link.png);}
#page_std>footer .toolbar>ul li .tool_pen{background-image:url(../img/common/ico_tool_pen.png);}
#page_std>footer .toolbar>ul li .tool_search{background-image:url(../img/common/ico_tool_search.png);}
#page_std>footer .toolbar>ul li .tool_fullpage{background-image:url(../img/common/ico_tool_fullpage.png);}
#page_std>footer .toolbar>ul li .tool_print{background-image:url(../img/common/ico_tool_print.png);}
#page_std .background{position: absolute;left:50%;top:0}

#page_std .background .section{position:relative;left:-2500px;width:5000px;height:1084px;background-color: #fff}
#page_std .background .footer{display:none;position:relative;left:-2500px;width:5000px;height:56px;background-color: #00a7df}


/*** video-player customize ***/
/* .progress : 재생바 배경 */
body.dan1 .video-player .progress,
body.dan3 .video-player .progress,
body.dan5 .video-player .progress,
body.dan7 .video-player .progress { background-color: var(--color-ui01-light); }
body.dan2 .video-player .progress,
body.dan4 .video-player .progress,
body.dan6 .video-player .progress { background-color: var(--color-ui02-light); }

body.dan1 .video-player .progress:after,
body.dan3 .video-player .progress:after,
body.dan5 .video-player .progress:after,
body.dan7 .video-player .progress:after { background-color: var(--color-ui01-light); }
body.dan2 .video-player .progress:after,
body.dan4 .video-player .progress:after,
body.dan6 .video-player .progress:after { background-color: var(--color-ui02-light); }

/* .progress .line : 재생된 영역 */
body.dan1 .video-player .progress:before,
body.dan3 .video-player .progress:before,
body.dan5 .video-player .progress:before,
body.dan7 .video-player .progress:before { background-color: var(--color-ui02-medium); }
body.dan2 .video-player .progress:before,
body.dan4 .video-player .progress:before,
body.dan6 .video-player .progress:before { background-color: var(--color-ui01-medium); }
body.dan1 .video-player .progress .line,
body.dan3 .video-player .progress .line,
body.dan5 .video-player .progress .line,
body.dan7 .video-player .progress .line { background-color: var(--color-ui02-medium); }
body.dan2 .video-player .progress .line,
body.dan4 .video-player .progress .line,
body.dan6 .video-player .progress .line { background-color: var(--color-ui01-medium); }

/* .progress .bar : 드래그 버튼 */
body.dan1 .video-player .progress .bar:before,
body.dan3 .video-player .progress .bar:before,
body.dan5 .video-player .progress .bar:before,
body.dan7 .video-player .progress .bar:before { background-color: var(--color-ui01-dark); }
body.dan2 .video-player .progress .bar:before,
body.dan4 .video-player .progress .bar:before,
body.dan6 .video-player .progress .bar:before { background-color: var(--color-ui02-dark); }

/* .volume-progress .bar : 음량 조정 바 */
body.dan1 .video-player .volume-progress .line,
body.dan3 .video-player .volume-progress .line,
body.dan5 .video-player .volume-progress .line,
body.dan7 .video-player .volume-progress .line { background-color: var(--color-ui01-light); }
body.dan2 .video-player .volume-progress .line,
body.dan4 .video-player .volume-progress .line,
body.dan6 .video-player .volume-progress .line { background-color: var(--color-ui02-light); }

/* .volume-progress .bar : 음량 조정 드래그 버튼 */
body.dan1 .video-player .volume-progress .bar:before,
body.dan3 .video-player .volume-progress .bar:before,
body.dan5 .video-player .volume-progress .bar:before,
body.dan7 .video-player .volume-progress .bar:before { background-color: var(--color-ui01-medium); }
body.dan2 .video-player .volume-progress .bar:before,
body.dan4 .video-player .volume-progress .bar:before,
body.dan6 .video-player .volume-progress .bar:before { background-color: var(--color-ui02-medium); }

/*** scrollbar customize ***/
body.dan1 .scrollbar .scroll-element .scroll-bar,
body.dan3 .scrollbar .scroll-element .scroll-bar,
body.dan5 .scrollbar .scroll-element .scroll-bar,
body.dan7 .scrollbar .scroll-element .scroll-bar { background-color: var(--color-ui01-pale); }
body.dan2 .scrollbar .scroll-element .scroll-bar,
body.dan4 .scrollbar .scroll-element .scroll-bar,
body.dan6 .scrollbar .scroll-element .scroll-bar { background-color: var(--color-ui02-pale); }
body.dan1 .scrollbar .scroll-element .scroll-bar:hover,
body.dan3 .scrollbar .scroll-element .scroll-bar:hover,
body.dan5 .scrollbar .scroll-element .scroll-bar:hover,
body.dan7 .scrollbar .scroll-element .scroll-bar:hover { background-color: var(--color-ui01-medium); }
body.dan2 .scrollbar .scroll-element .scroll-bar:hover,
body.dan4 .scrollbar .scroll-element .scroll-bar:hover,
body.dan6 .scrollbar .scroll-element .scroll-bar:hover { background-color: var(--color-ui02-medium); }

/*popup*/
#popup{position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 1000; display: none; }
#popup:before{content:""; position:absolute; top:0; left:50%; background: rgba(0,0,0,0.7); width:30000px; margin-left:-15000px; height: 100%;}
#popup.light:before{background: rgba(0,0,0,0);}

#popup>div:not(.std_menu){width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; border-radius: 15px;}
#popup>div:not(.std_menu)>header{padding:16px 58px 16px 26px; border-radius: 15px 15px 0 0; min-height: 59px; background-color: var(--color-header01-bg);}



#popup>div:not(.std_menu)>header:after{content: ""; display: block; clear: both; }
#popup>div:not(.std_menu)>header>h4{color: #fff; font-family: "omb"; font-size: 24px; font-weight: 500; line-height: 1.2; float: left; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: calc(100% - 40px); overflow: hidden; }
#popup>div:not(.std_menu)>header>button{background:#168db8 url(../img/common/ico_popclose.png) center center no-repeat; width: 22px; height: 22px; float: right; vertical-align: middle; position: absolute; padding:29px; top:0; right:0; border-radius: 0 15px 0 0; background-color: var(--color-header01-bg);}
#popup>div:not(.std_menu)>section{max-height: 945px; padding: 20px 30px; background: #fff; position: relative; max-width: 1860px; /*border: 2px solid #1bace0;*/ border-top: 0; font-family: "omb"; font-size:24px; color:#666666; line-height: 31px; letter-spacing: -1px; border-radius: 0 0 15px 15px; min-width: 500px;}
#popup>div:not(.std_menu)>section>div{font-family: "omr";}
#popup>div:not(.std_menu)>section>img{width:100%;}

#popup>div:not(.std_menu)>section>span{display:block; padding:0 40px; text-align: center; font-size: 0; background:#fff;}
#popup>div:not(.std_menu)>section>span>button{width: 49%; max-width:200px; display: inline-block; color:#fff; font-family: "omb"; font-size: 24px; line-height: 64px; letter-spacing: 0px; text-align: center; border-radius: 10px; margin-right:1%; margin-top:20px;}


#popup>div:not(.std_menu).dialogue_memo>section>span>button,#popup>div:not(.std_menu).dialogue_link>section>span>button{width: 33%; max-width:150px; }


#popup>div:not(.std_menu)>header{background-color: var(--color-header01-bg);}
body.dan2 #popup>div:not(.std_menu)>header,
body.dan4 #popup>div:not(.std_menu)>header,
body.dan6 #popup>div:not(.std_menu)>header{background-color: var(--color-header02-bg);}

#popup>div:not(.std_menu)>header>button{background-color: var(--color-header01-bg);}
body.dan2 #popup>div:not(.std_menu)>header>button,
body.dan4 #popup>div:not(.std_menu)>header>button,
body.dan6 #popup>div:not(.std_menu)>header>button{background-color: var(--color-header02-bg);}

#popup>div:not(.std_menu)>section>span>button{background-color: var(--color-header01-bg);border:1px solid var(--color-header01-bg);}
body.dan2 #popup>div:not(.std_menu)>section>span>button,
body.dan4 #popup>div:not(.std_menu)>section>span>button,
body.dan6 #popup>div:not(.std_menu)>section>span>button{background-color: var(--color-header02-bg);border:1px solid var(--color-header02-bg)}
#popup>div:not(.std_menu):not(.pop_jindo)>section>span>button:last-child{border-color:#dddddd !important; background: #eeeeee !important; color:#333333; margin-right:0;}



/*** 학습창 단원/차시 목차 ***/
#popup>div.std_menu { position: absolute; top: calc(var(--size-header-height) - 1px); display: none; left: 50px; border-radius: 0 0 28px 28px; box-shadow: var(--set-box-shadow); }
#popup>div.std_menu,
#popup>div.std_menu.dan1,
#popup>div.std_menu.dan3,
#popup>div.std_menu.dan5,
#popup>div.std_menu.dan7 { background-color: var(--color-header01-bg-strong); }
#popup>div.std_menu.dan2,
#popup>div.std_menu.dan4,
#popup>div.std_menu.dan6 { background-color: var(--color-header02-bg-strong); }

#popup>div.std_menu>section:after { content: ""; display: block; clear: both; }
#popup>div.std_menu>section>ol, #popup>div.std_menu>section>ul { float: left; }

/* 단원 */
/*#popup>div.std_menu>section>ol { padding-left: 4px; padding-bottom: 15px; }*/
#popup>div.std_menu>section>ol { margin: var(--size-index-radius) -1px var(--size-index-radius) var(--size-index-radius); }
#popup>div.std_menu>section>ol>li { position: relative; }
#popup>div.std_menu>section>ol>li>h4 { font-size: var(--size-ui-text); padding:6px 0 6px 7px; font-weight: 500; color:#313131; }
#popup>div.std_menu>section>ol>li>button { height: 62px; padding: 0px 64px 0px 26px; border-radius: 10px 0 0 10px; font-family: 'ui-regular'; font-size: var(--size-ui-text); color: rgba(256,256,256,0.9) !important; letter-spacing: -1px; min-width: 370px;/*240px;*/ }
body[data-bcode="mat41"] #popup>div.std_menu>section>ol>li>button { min-width: 250px; }
body[data-bcode="mat42"] #popup>div.std_menu>section>ol>li>button { min-width: 270px; }
#popup>div.std_menu>section>ol>li>button:after { content: ''; position: absolute; display: none; width: 25px; height: 90px; right: -12px; top: -14px; background: url(../img/common/index/roll.png) no-repeat 0 center; }
#popup>div.std_menu>section>ol>li:first-child>button:after { background: url(../img/common/index/roll01.png) no-repeat 0 center; }
#popup>div.std_menu>section>ol>li.selected>button:after { display: block; }
	
/* drop down: 차시 목록을 단원 아래 처리 */
/*#popup>div.std_menu>section>ol>li>ul>li>button{padding: 0px 64px 0px 40px; height:62px; font-family: 'ui-bold'; font-size: 22px; color: #313131; letter-spacing: -1px; min-width: 360px; width: 100%; font-family: 'ui-bold'; background:#fff;}
#popup>div.std_menu>section>ol>li>ul>li>button>span{display: inline-block; vertical-align: middle; width:25px; height: 25px; color:#fff; background:#4d4d4d; border-radius: 50%; font-family: 'ui-bold'; text-align: center; font-family: 'bmjua'; line-height: 24px; font-size: 18px;}*/

#popup>div.std_menu>section>ol>li.selected>button { background-color: #fff; box-shadow: var(--set-box-shadow); }
#popup>div.std_menu>section>ol>li.selected>button,
#popup>div.std_menu.dan1>section>ol>li.selected>button,
#popup>div.std_menu.dan3>section>ol>li.selected>button,
#popup>div.std_menu.dan5>section>ol>li.selected>button,
#popup>div.std_menu.dan7>section>ol>li.selected>button { color: var(--color-header01-bg-dark) !important; font-family: 'ui-bold'; }
#popup>div.std_menu.dan2>section>ol>li.selected>button,
#popup>div.std_menu.dan4>section>ol>li.selected>button,
#popup>div.std_menu.dan6>section>ol>li.selected>button { color: var(--color-header02-bg-dark) !important; font-family: 'ui-bold'; }
#popup>div.std_menu>section>ol>li>ul>li.selected>button { color: #fff; }

#popup>div.std_menu>section>ol>li.passed>button{ color: rgba(255,255,255,0.5); }
#popup>div.std_menu>section>ol>li>button>span{display:none;font-size:0;}
#popup>div.std_menu>section>ol>li.on>button { padding: 0px 50px 0px 26px;}
#popup>div.std_menu>section>ol>li.on>button>span{width: 41px; height: 41px; background: url(../img/common/ico_passed.png) center no-repeat; display: none/*inline-block*/; vertical-align: middle; margin-left: 10px;}

/* 차시 */
#popup>div.std_menu>section>ul { min-height: 480px; padding: 6px 12px 3px; margin: var(--size-index-radius) var(--size-index-radius) var(--size-index-radius) 0; border-radius: 16px; background-color: #fff; box-shadow: var(--set-box-shadow); }
#popup>div.std_menu>section>ul li { position: relative; display: block; min-width: 720px; height: 50px; padding: 6px 6px 0px 20px; margin: 6px 0 9px; color: var(--color-index-text); font-family: 'ui-bold'; font-size: var(--size-ui-text); letter-spacing: -1px; line-height: 1.2; cursor: default; }
#popup>div.std_menu>section>ul li:not(:last-child):after { content: ""; position: absolute; width: calc(100% - 24px); height: 2px; bottom: -6px; left: 12px; margin: 0 auto; background-color: var(--color-index-line); }

#popup>div.std_menu>section>ul li:last-child{ border-bottom:0; }

#wrap[data-scene="workbook"] #popup>div.std_menu>section>ul li.no-sbook { display: none; }
#popup>div.std_menu>section>ul li.noline { border-bottom:0; }
#popup>div.std_menu>section>ul li.noline::after { background-color: #fff0; }

#popup>div.std_menu>section>ul li h6{display: inline-block; font-size: 17px; color: #888888; border: 1px solid #cccccc; border-radius: 11px; padding: 2px 5px; background:#fff; margin-right:10px;}
#popup>div.std_menu>section>ul li h5{display:inline-block; }
#popup>div.std_menu>section>ul li h5+i{display: inline-block; margin-left:10px;font-style: normal;}

#popup>div.std_menu>section>ul li>button { position: absolute; left: 20px; top: 16px; width: 18px; height: 18px; font-size: 0; background: url(../img/common/index/bullet_activity.png) no-repeat center; }
#popup>div.std_menu>section>ul li.selected>button { background: url(../img/common/index/bullet_activity_on.png) no-repeat center; cursor: default; }

#popup>div.std_menu>section>ul li>em { position: relative; display: inline-block; margin-left: 24px; margin-top: 7px; font-family: 'ui-bold'; font-size: var(--size-ui-text); letter-spacing: -1px; line-height: 1.2; }
#popup>div.std_menu>section>ul li>em>.dan { margin-left: -2px; font-family: "kopubBatangB" !important; }
#popup>div.std_menu>section>ul li>em>.dan>sup { position: relative; left: 0px; right: auto; top: auto; margin-right: 2px; vertical-align: 8px; font-size: 60%; }
#popup>div.std_menu>section>ul li>div{ display:none; font-size:0; }

#popup>div.std_menu>section>ul li.selected { border-radius: 23px; }
#popup>div.std_menu>section>ul li.selected,
#popup>div.std_menu.dan1>section>ul li.selected,
#popup>div.std_menu.dan3>section>ul li.selected,
#popup>div.std_menu.dan5>section>ul li.selected,
#popup>div.std_menu.dan7>section>ul li.selected { background: var(--color-header01-bg-strong); }
#popup>div.std_menu.dan2>section>ul li.selected,
#popup>div.std_menu.dan4>section>ul li.selected,
#popup>div.std_menu.dan6>section>ul li.selected { background: var(--color-header02-bg-strong); }
#popup>div.std_menu>section>ul li.selected em,#popup>div.std_menu>section>ul li.selected h5, #popup>div.std_menu>section>ul li.selected i{ color: var(--color-header-effect); }

#popup>div.std_menu>section>ul li.passed:before{background-position-y:-40px;}
#popup>div.std_menu>section>ul li.passed{background:#0b5977; color:rgba(255,255,255,0.4);}
#popup>div.std_menu>section>ul li.passed:after{content: ""; display:none; width:74px; height:32px; background: url(../img/common/ico_stdmenu_studying.png) center center no-repeat;vertical-align: middle; margin-left: 15px;}

#popup>div.std_menu>section>ul li.on{background:none;}
#popup>div.std_menu>section>ul li.on>h5:after{content:"";width: 34px; height: 34px; background: url(../img/common/ico_passed.png) center no-repeat;vertical-align: middle; margin-left: 10px; display: inline-block; background-size:100%;}
#popup>div.std_menu>section>ul li.on>div{width: 34px; height: 34px; background: url(../img/common/ico_passed.png) center no-repeat;vertical-align: middle; margin-left: 10px; display: none/*inline-block*/; background-size:100%; cursor: pointer;}

#popup>div.std_menu>section>ul>li>span { visibility: hidden; float: right; vertical-align: middle; margin-left: 50px; }
#popup>div.std_menu>section>ul>li.selected>span { visibility: visible; }
#popup>div.std_menu>section>ul>li>span>button { height: 37px; border-radius: 18px; padding: 1px 10px 0 44px; font-family: 'ui-bold'; font-size: var(--size-ui-text-small); }
#popup>div.std_menu>section>ul>li>span>button.go_ebook { background: #fff url(../img/common/index/ico_ebook.png) no-repeat 10px center; }
#popup>div.std_menu>section>ul>li>span>button.go_sbook { background: #fff url(../img/common/index/ico_sbook.png) no-repeat 10px center; }
/* #popup>div.std_menu>section>ul>li>span>button.go_ebook:after { content: '쪽' } */
#popup>div.std_menu>section>ul>li>span>button.go_std { margin-left: 8px; background: #fff url(../img/common/index/ico_smart.png) no-repeat 10px center; }
#popup>div.std_menu>section>ul>li>span>button.go_workbook { margin-left: 8px; background: #fff url(../img/common/index/ico_smart.png) no-repeat 10px center; }
#popup>div.std_menu>section>ul>li>span>button.go_workbook,
#popup>div.std_menu>section>ul>li>span>button.go_sbook,
#popup>div.std_menu>section>ul>li>span>button.go_ex { display: none; }

#wrap[data-scene="workbook"] #popup>div.std_menu>section>ul>li>span>button.go_std,
#wrap[data-scene="workbook"] #popup>div.std_menu>section>ul>li>span>button.go_ebook { display: none; }

#wrap[data-scene="workbook"] #popup>div.std_menu>section>ul>li>span>button.go_workbook,
#wrap[data-scene="workbook"] #popup>div.std_menu>section>ul>li>span>button.go_sbook { display: inline-block; }
/*
#popup>div.std_menu .close{position:absolute; right:-72px; top:8px; width:64px; height:64px; background: rgba(0,0,0,0.8) url(../img/common/ico_popclose.png) center center no-repeat; font-size:0; border-radius: 100%;}
*/
#popup>div.std_menu footer .close{ position:absolute; right: -63px; top: 0px; width: 64px; height: 64px; padding: 0; margin: 0; background: url(../img/common/ico_popclose.png) center center no-repeat; font-size: 0; border-radius: 0 0 28px 0;}

#popup>div.std_menu footer .std_menu{ position:absolute; left: 0px; top: calc(1px - var(--size-header-height)); width: auto; height: var(--size-header-height); padding: 0 20px 0 0; margin: 0; background: url(../img/common/study/ico_menu.png) no-repeat 22px 18px; background-size: 21px 18px; }
#popup>div.std_menu footer .std_menu>span { position: relative; display: inline-block; width: auto; margin: 0 0 0 56px; font-family: 'ui-bold'; font-size: var(--size-ui-text-large); color: var(--color-header-effect); text-shadow: var(--set-text-shadow); line-height: 2.3; vertical-align: middle; }
#popup>div.std_menu footer button,
#popup>div.std_menu.dan1 footer button,
#popup>div.std_menu.dan3 footer button,
#popup>div.std_menu.dan5 footer button,
#popup>div.std_menu.dan7 footer button { background-color: var(--color-header01-bg-strong); }
#popup>div.std_menu.dan2 footer button,
#popup>div.std_menu.dan4 footer button,
#popup>div.std_menu.dan6 footer button { background-color: var(--color-header02-bg-strong); }

/*** 익힘책 학습컨텐츠 중 마지막 단원 메뉴 감추기 ***/
#wrap[data-scene="workbook"] #popup .std_menu section>ol>li:last-child { display: none; }


/**/
#page_std>section { width: 1920px; height: 960px;margin:0 auto; }
#page_std>section.fs {position: absolute; z-index: 999999;}

#page_std>section .con_body{position: relative; height: 960px;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:before{position:absolute;left:50%;width:5000px;height:90px;/*background:url(../img/common/con_head_bg.jpg);*/margin-left:-2500px;content:''}
#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_head >h1:before{content:"";position:absolute;left:-80px;top:-30px;width:100px; height:106px;background:url(../img/common/ico_con_head_1.png) 0 0 no-repeat;}
#page_std>section .con_body .con_contents{position:absolute;top:90px;width:100%;height:878px;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_list : width = 146px ***/
#page_std>header> .std_list{ position: relative; pointer-events: none; float: right; width: 146px; z-index: 1; }
#page_std>header> .std_list::-webkit-scrollbar { display:none; }


/* 열기 버튼 */
#page_std>header> .std_list>h3 { position: relative; color: #fff; pointer-events: auto; text-align: center; cursor: pointer; }
#page_std>header> .std_list>h3:hover { color: var(--color-header-effect); }
/*#page_std>header> .std_list>h3:after { content: ""; position: absolute; display: block; width: 12px; height: 14px; left: calc(50% - 6px); top: 38px; background: url(../img/common/index/tail_top.png) no-repeat center; z-index: 1; }*/
#page_std>header> .std_list>h3.on:after { display: none; }

#page_std>header> .std_list>h3>div.mock { position: absolute; display: block; height: 46px; border-radius: 0 0 20px 20px; background-color: #48c6b4; }
#page_std>header> .std_list>h3>div.bundle { position: relative; display: inline-block; width: auto; min-width: 136px; height: 50px; padding-left: 14px;
  background-origin: content-box;
  background-clip: padding-box;
  border: 26px solid transparent;
  border-image: url(../img/common/study/type1/corner_bg.png) 25 stretch; /* 9-grid 적용 */
  box-sizing: border-box;
}

body.dan2 #page_std>header> .std_list>h3>div.mock,
body.dan4 #page_std>header> .std_list>h3>div.mock,
body.dan6 #page_std>header> .std_list>h3>div.mock { background-color: #ff9f00; }
body.dan2 #page_std>header> .std_list>h3>div.bundle,
body.dan4 #page_std>header> .std_list>h3>div.bundle,
body.dan6 #page_std>header> .std_list>h3>div.bundle { border-image: url(../img/common/study/type2/corner_bg.png) 25 stretch; }

#page_std>header> .std_list>h3>div.bundle::after { content:''; position: absolute; width: 19px; height: 14px; left: -10px; top: -8px; background: url(../img/common/study/type1/corner_icon.png) no-repeat center; }
#page_std>header> .std_list>h3>div.bundle>span { position: relative; top: -13px; margin-right: -6px; font-family: 'ui-regular'; font-size: 21px; line-height: 1.2; white-space: nowrap; text-align: center; }


/*#page_std>header> .std_list>h3 { position: relative; width: 77px; height: 45px; margin: calc((var(--size-header-height) - 45px) / 2) auto 1px; font-size: 0; cursor: pointer; pointer-events: auto; }*/

/* #page_std>header> .std_list>h3 { background:url(../img/common/study/type1/ico_activity.png) no-repeat center center/contain; }
body.dan2 #page_std>header> .std_list>h3,
body.dan4 #page_std>header> .std_list>h3,
body.dan6 #page_std>header> .std_list>h3 { background:url(../img/common/study/type2/ico_activity.png) no-repeat center center/contain; }

#page_std>header> .std_list>h3.on { background:url(../img/common/study/type1/ico_activity_off.png) no-repeat center center/contain; }
body.dan2 #page_std>header> .std_list>h3.on,
body.dan4 #page_std>header> .std_list>h3.on,
body.dan6 #page_std>header> .std_list>h3.on { background:url(../img/common/study/type2/ico_activity_off.png) no-repeat center center/contain; }

#page_std>header> .std_list>h3:hover { background:url(../img/common/study/type1/ico_activity.png) no-repeat center center/contain; }
body.dan2 #page_std>header> .std_list>h3:hover,
body.dan4 #page_std>header> .std_list>h3:hover,
body.dan6 #page_std>header> .std_list>h3:hover { background:url(../img/common/study/type2/ico_activity.png) no-repeat center center/contain; } */



/* 활동 화면 목록 */
#page_std>header> .std_list>ol { position: relative; display: block; width: 100%; text-align: center; padding: 2px 0 3px; border: 2px solid var(--color-index-line); border-radius: 20px; background: #fff; overflow: hidden; pointer-events: auto; transform: translate3d(0,0,0) !important; box-sizing: content-box; }

#page_std>header> .std_list>ol>li>button { position: relative; width: calc(100% - 12px); padding: 10px 5px 7px 36px; margin: 3px 0px; border-radius: 14px; vertical-align: middle; color: var(--color-index-text); font-family: 'ui-bold'; font-size: var(--size-ui-text-small); letter-spacing: -1px; line-height: 1.2; }
#page_std>header> .std_list>ol>li>button:not(:last-child):after { content: ""; position: absolute; width: calc(100% - 24px); height: 2px; bottom: -4px; left: 12px; margin: 0 auto; background-color: var(--color-index-line); }
#page_std>header> .std_list>ol>li>button>span { position: relative; display: inline-block; padding: 2px 6px; margin: -8px 5px -5px 0; background: #458faa; border: 2px solid #71aabe; border-radius: 7px; vertical-align: middle; color: #fff; font-size: 18px; letter-spacing: -1px; line-height: 1.2; }

#page_std>header> .std_list>ol>li button.on { color:#ffef44; font-family: 'ui-bold'; }
#page_std>header> .std_list>ol>li button.on { background: var(--color-header02-bg-strong); }
body.dan2 #page_std>header> .std_list>ol>li button.on,
body.dan4 #page_std>header> .std_list>ol>li button.on,
body.dan6 #page_std>header> .std_list>ol>li button.on { background: var(--color-header01-bg-strong); }

#page_std>header> .std_list>ol>li>button:before { position: absolute; content: ""; left: 12px; top: 10px; width: 18px; height: 18px; background: url(../img/common/index/bullet_activity.png) no-repeat center; }
#page_std>header> .std_list>ol>li button.on:before{ background: url(../img/common/index/bullet_activity_on.png) no-repeat center; }

#page_std>.std_loading {position: absolute; left:50%; top: 57px; /*width: 5303px;margin-left:-2500px;*/ height: 100%; z-index: 101; /*background-color: #fff;*/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: #333333;
    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); }
  }


/**/
#page_ebook{will-change: initial;}
#page_ebook .background{position: absolute;left: 50%;top: 0;width:5000px;height:100%;background:#e6f2f0;margin-left:-2500px}
/*#page_ebook .background,#page_pds .background{position: absolute;left: 50%;top: 0;width:5000px;height:100%;background:#e6f2f0;margin-left:-2500px}
#page_ebook .background, body.dan1 #page_pds .background { background: var(--color-header01-bg-strong) !important;}
body.dan2 #page_ebook .background, body.dan2 #page_pds .background,
body.dan4 #page_ebook .background, body.dan4 #page_ebook .background, 
body.dan6 #page_ebook .background, body.dan6 #page_ebook .background { background: var(--color-header02-bg-strong) !important;}*/

#ebook_lnb_wrap::-webkit-scrollbar, #ebook_lnb_wrap::-moz-scrollbar { display: none; }
#ebook_lnb_wrap {position: absolute; width: 700px/*520px*/; height: 1043px; left: 130px; top: 10px; border-radius: 16px;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
  scrollbar-color: transparent transparent;}
#ebook_lnb{ position: absolute; width: 460px; height: 100%; left: -461px; top: 0px; border-radius: 0 0 16px 0; background:#a0d8e5; z-index: 668;/*101*/ }
/*#ebook_lnb{ position: absolute; width:600px; background: #fff; height: 100%; box-shadow: 13px 17px 20px rgba(0, 0, 0, 0.4); z-index: 101; background:#051f29;  left:-600px;}
#ebook_lnb.bookmark_bg{background:#fff;}*/
#lnb_title{position: relative;}
#lnb_title h2{font-size:0; min-height: 200px;}
#ebook_lnb.bookmark_bg h2{background: #7ecbdd url(../img/common/bgbookmark.png) right top no-repeat;}

/* #ebook_lnb_menus: #ebook_lnb 관련 내용 제어 (2023.08.21) */
#ebook_lnb_menus { position: absolute; left: 50px; top: 100px; }
#ebook_lnb_menus>ul{position:absolute; /*right:-71px; top:100px;*/}
#ebook_lnb_menus>ul>li{font-size: 0;}
#ebook_lnb_menus button{width:70px; height:89px; /*border-bottom:1px solid #dddddd; background-color:#eeeeee;*/ background-repeat: no-repeat; background-position:center center; position:relative;}
#ebook_lnb_menus button:after {content: ""; width:46px; height: 2px; background:rgba(186,187,187,0.3); position:absolute; bottom:0; left:calc(50% - 23px);}
#ebook_lnb_menus button.list_bookmark:after {display: none;}

#ebook_lnb_menus li.on button.list_book{background-image:url(../img/common/ico_lnblist_over.png);}
#ebook_lnb_menus li.on button.list_bookmark{background-image:url(../img/common/ico_lnbbmark_over.png);}

#ebook_lnb_menus>ul>li:nth-child(1) button{background-image:url(../img/common/ico_lnbhome.png);}
#ebook_lnb_menus>ul>li:nth-child(2) button{background-image:url(../img/common/ico_lnblist.png);}
#ebook_lnb_menus>ul>li:nth-child(3) button{background-image:url(../img/common/ico_lnbpds.png);}
#ebook_lnb_menus>ul>li:nth-child(4) button{background-image:url(../img/common/ico_lnbbmark.png);}

#ebook_lnb_menus>ul>li:nth-child(1) button:hover{background-image:url(../img/common/ico_lnbhome_over.png);}
#ebook_lnb_menus>ul>li:nth-child(2) button:hover{background-image:url(../img/common/ico_lnblist_over.png);}
#ebook_lnb_menus>ul>li:nth-child(3) button:hover{background-image:url(../img/common/ico_lnbpds_over.png);}
#ebook_lnb_menus>ul>li:nth-child(4) button:hover{background-image:url(../img/common/ico_lnbbmark_over.png)};


/*lnb menu*/
#ebook_lnb { /* dummy. I don't know why, but to avoid making bug, you need it. */}
#ebook_lnb em{position: absolute; cursor: pointer; left: 459px; top: 0px; background: url(../img/common/ico_lnbclose.png) center center no-repeat; width: 36px; height: 41px;}

#ebook_lnb .menu_list{ color: #fff; padding-right: 3px /*11px*/; margin: 0; overflow-y: scroll; height: 100% /*calc(100% - 214px)*/; will-change: transform;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
  scrollbar-color: transparent transparent; }
/*#ebook_lnb .menu_list>li:first-child{margin-top: 15px;}*/

/* scrollbar */
#ebook_lnb .menu_list::-webkit-scrollbar { width: 8px; }
#ebook_lnb .menu_list::-webkit-scrollbar-track { border-radius: 4px; background-color: transparent; }
#ebook_lnb .menu_list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: transparent; }
#ebook_lnb .menu_list::-webkit-scrollbar-thumb:hover { background-color: #dbf0f8; }
#ebook_lnb .menu_list::-webkit-scrollbar-button { width: 0; height: 0; }


#ebook_lnb .menu_list>li:last-child{margin-bottom: 22px;}
#ebook_lnb .menu_list>li::before{content:""; position: relative; display: none; width: 450px; height: 235px; background: #fff;}
#ebook_lnb .menu_list>li.on::before{ display: block; }
#ebook_lnb .menu_list>li:not(:last-child)::after {content:""; position: relative; display: block; width: calc(100% - 50px); height: 1px; padding: 0; margin-left: 12px; background: rgba(256,256,256,0.3);}

body[data-bcode="mat31"] #ebook_lnb .menu_list>li:nth-child(5)::before { height: 205px; }
body[data-bcode="mat32"] #ebook_lnb .menu_list>li:nth-child(3)::before { height: 155px; }
body[data-bcode="mat41"] #ebook_lnb .menu_list>li:nth-child(1)::before { height: 185px; }
body[data-bcode="mat41"] #ebook_lnb .menu_list>li:nth-child(4)::before { height: 185px; }
body[data-bcode="mat42"] #ebook_lnb .menu_list>li:nth-child(2)::before { height: 215px; }
body[data-bcode="mat42"] #ebook_lnb .menu_list>li:nth-child(4)::before { height: 135px; }
body[data-bcode="mat42"] #ebook_lnb .menu_list>li:nth-child(6)::before { height: 195px; }

#ebook_lnb .menu_list>li>h3{cursor: pointer; font-family: "ui-bold"; font-size: var(--size-ui-text-large); color: #fff; width: 100%; border-radius:0 15px 15px 0; line-height: 58px; padding:0 28px; position:relative; text-shadow: -1px -1px 0.1em rgba(79, 187, 212, 0.3), 1px -1px 0.1em rgba(79, 187, 212, 0.3), -1px 1px 0.1em rgba(79, 187, 212, 0.3), 1px 1px 0.1em rgba(79, 187, 212, 0.3); }
#ebook_lnb .menu_list>li>h3.on{color:#fef689; background-color:#70c3d6;}
#ebook_lnb .menu_list>li>h3::after{content: ""; position:absolute; display: none; width:23px; height:14px; right: 15px; top: calc(50% - 6px); background:url(../img/common/lnb_drop.png) center no-repeat; }
#ebook_lnb .menu_list>li>h3.on::after{ display: block; }
/*#ebook_lnb .menu_list>li>h3.on:before{content: ""; width:4px; height:100%; position:absolute; left:0; top:0; background:#1bace0;}*/
#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}
#ebook_lnb .menu_list>li>ol{background: #dbf0f8; width:calc(100% - 11px); border-radius: 0 0 16px 0; overflow:hidden;}
#ebook_lnb .menu_list>li>ol>li>button{ width:100%; padding: 16px 18px 10px 58px; font-family: "ui-bold"; font-size: 20px; /*21px;*/ line-height: 1.4; vertical-align: middle; color:#000; /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/ text-indent: -26px; word-break: keep-all; }
/*#ebook_lnb .menu_list>li>ol>li>button>span{width:100px;text-align:center;display: inline-block; margin-right: 15px; color: #fff; padding: 2px 2px 0; background: #458faa; border: 2px solid #71aabe; border-radius: 7px;vertical-align: middle; font-size: 19px;   letter-spacing: -1px;}*/
#ebook_lnb .menu_list>li>ol>li>button>span:not(.dan) { position: relative; display: inline-block; width: 16px; height: 18px; font-size: 0; line-height: 1.2; vertical-align: 16px;  margin-right: 10px; background:url(../img/common/lnb_bullet.png) center no-repeat; }
#ebook_lnb .menu_list>li>ol>li>button>span.dan { margin-left: -4px; font-family: "kopubBatangB" !important; }
#ebook_lnb .menu_list>li>ol>li>button>span.dan>sup { position: relative; left: 0px; right: auto; top: auto; margin-right: 2px; vertical-align: 8px; font-size: 60%; }

#ebook_lnb .menu_list>li>ol>li>button.on, #ebook_lnb .menu_list>li>ol>li>button:hover{color:#0e8da9;/*background:#04475f;  font-weight: 500;*/}
#ebook_lnb .menu_list>li>ol>li>button.on>span:not(.dan), #ebook_lnb .menu_list>li>ol>li>button:hover>span:not(.dan){background:url(../img/common/lnb_bullet_on.png) center no-repeat;}
#ebook_lnb .menu_list>li>ol>li.chasi_hide>button>span{background:none;}
/*#ebook_lnb .menu_list>li>ol>li>button>span.chasi_hide{opacity: 0;}*/

#ebook_lnb .menu_list li.dimmed{display: none;}
#ebook_lnb .menu_list>li>ol>li::after {content:""; position: relative; display: block; width: calc(100% - 40px); height: 1px; padding: 0; margin: auto; background: rgba(256,256,256,0.5);}
#ebook_lnb .menu_list>li>ol>li:nth-last-child(2):after {display: none;}
#ebook_lnb .menu_list>li>ol>li>h4{font-size: 25px; letter-spacing: -1px; color: rgba(255,255,255,0.6); width: 100%; border-radius: 0 15px 15px 0; line-height: 77px; padding: 0 60px; position: relative; cursor: pointer;}
#ebook_lnb .menu_list>li>ol>li>h4:after{content: ""; position:absolute; width:23px; height:13px; background:url(../img/common/lnb_drop.png) 0 0 no-repeat; right: 30px; top: calc(50% - 6.5px);}
#ebook_lnb .menu_list>li>ol>li>h4.on:after{background-position-y:-13px; }
#ebook_lnb .menu_list>li>ol>li>h4.on{color:#fff;}
#ebook_lnb .menu_list>li>ol>li>ol{overflow:hidden; height:auto;}
#ebook_lnb .menu_list>li>ol>li>ol>li>button{width:100%; padding:15px 5px 15px 60px; font-size:22px; color:#fff; letter-spacing: -1px;}
#ebook_lnb .menu_list>li>ol>li>ol>li>button>span{display: inline-block; margin-right: 15px; color: #fff; padding: 2px 6px 0; background: #458faa; border: 2px solid #71aabe; border-radius: 7px;vertical-align: top; font-size: 19px;   letter-spacing: -1px;}
#ebook_lnb .menu_list>li>ol>li>ol>li>button>em{display:inline-block; width:73%; line-height: 1.4; word-break: keep-all;}


/*lnb bookmark*/
#ebook_lnb .bookmark { display: none; padding: 25px 0px 25px 25px; }
/*#ebook_lnb .bookmark:after {content: ""; display: block; clear: both;}*/
#ebook_lnb .bookmark.over { overflow-y: scroll; height: calc(100% - 200px);
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
  scrollbar-color: transparent transparent; }
/*#ebook_lnb .bookmark.over:after { height: 28px; }*/
/*#ebook_lnb .bookmark::-webkit-scrollbar { display:none; }*/

/* scrollbar */
#ebook_lnb .bookmark::-webkit-scrollbar { width: 8px; }
#ebook_lnb .bookmark::-webkit-scrollbar-track { border-radius: 4px; background-color: transparent; }
#ebook_lnb .bookmark::-webkit-scrollbar-thumb { border-radius: 4px; background-color: transparent; }
#ebook_lnb .bookmark::-webkit-scrollbar-thumb:hover { background-color: #dbf0f8; }
#ebook_lnb .bookmark::-webkit-scrollbar-button { width: 0; height: 0; }

#ebook_lnb .bookmark>li:not(.none) {float: left; width: 125px; height: 165px; border: 1px solid #e5e5e5; margin-right: 18px; 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:nth-child(3n) {margin-right: 0; }
#ebook_lnb .bookmark>li+li+li+li {margin-top: 18px; }
#ebook_lnb .bookmark>li>p {font-family: "ui-bold"; font-size: 36px; font-weight: 900; 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/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 #128eb8; }
#ebook_lnb .bookmark>li:not(.none):hover:before {background: rgba(15, 90, 160, 0.5); border: 2px solid #0f5aa0; }

#ebook_lnb .bookmark>li.none { width: calc(100% - 25px); height: auto; text-align: center; color: rgb(14, 141, 169); font-family: "ui-bold"; font-size: 24px; line-height: 1.0; padding: 20px; border-radius: 24px; background: #dbf0f8; }
#ebook_lnb .bookmark>li.none>span.icon { display: inline-block; width: 58px; height: 72px; vertical-align: 10px; background: url(../img/common/ico_bookmark.png) 0 0 no-repeat; }
#ebook_lnb .bookmark>li.none>span.icon:before{
  content: "책갈피";
  color: #000;
  font-family: 'omb';
  font-size: 13px;
  position: relative;
  left: 0px;
  top: -6px;}

#ebook_lnb button.del_bookmark_all{width:137px; height: 39px; position:absolute; left: 20px; bottom: 20px; border:0; background-image: url(../img/common/ico_lnbbmarkdel.png);}

/**/
#page_go_ebook{position:absolute; bottom: 52px; left: 56px; width:78px; height:51px; background:url(../img/common/ico_pagego.png) 0 0 no-repeat; z-index: 101/*5*/;}
#page_go_ebook>input{ display: none; width: 62px; height: 42px; margin: 6px 0 0 58px; font-size: 24px; color: #333333; text-align: center; vertical-align: middle; border:none; outline: none; background-color: rgba(0,0,0,0); }
#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{font-size:0; width:100%; height:100%;}
/*#page_go_ebook.go .go_page:after{position:absolute;left:105px;content:attr(data-after);display:inline-block;width:100px;font-size:25px; line-height: 53px;}

#page_go_ebook.go span{display:block;}
#page_go_ebook.go{width:auto; height: auto; padding:15px; background: rgba(0,0,0,0.7); border-radius: 10px;}
#page_go_ebook.go>button{margin-left:80px;color: #fff; background: #ffd343; font-size: 21px; height: 48px; padding: 0 10px; font-weight: 500; border-radius: 13px; width: auto;}*/
#page_go_ebook.go{ width:203px; height: 51px; background: url(../img/common/ico_pagego_on.png) no-repeat 0 0/contain; }
#page_go_ebook.go>button.go_page{margin: 0; width: 48px; height: 42px; vertical-align: middle;}
#page_go_ebook>button.btn_close{display: none; margin: 0; width: 26px; height: 42px; vertical-align: middle;}
#page_go_ebook.go>button.btn_close{display: inline-block;}

/*이북->학습창(학습중)*/
#page_go_std{display:none;position:absolute; top: 4px; left: 1798px; z-index: 1; width:64px; height:69px; background:url(../img/common/ico_stdgo.png) 0 0 no-repeat; z-index: 5;}
#page_go_std.go{display: none; /*block;*/}
#page_go_std>button{font-size:0; width:100%; height:100%;}

/*자료실->학습창(학습중)*/
#pds_go_oldscene{display:none; width:112px; height:56px; vertical-align: middle;}
#pds_go_oldscene.go{display:inline-block;}
#pds_go_oldscene>button.go_oldscene{width:100%; height:100%;}

#ebook_pages{position: relative; left: 50%; margin-left: -801px; top: 10px; width: 1602px; height: 1043px; z-index: 1; touch-action: none; }
/**/

/*임시*/
#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;
}

#thumb_title {position: absolute; min-width: 360px; background: #ebf7fd; display : block !important; bottom: -80px; left: -18px; z-index: 2; padding: 8px; border: 2px solid #417cd3; border-radius: 20px; 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: -16px /*-18px*/;}

#thumb_title:before {content: ""; position: absolute; width: 17px; height: 18px; left: 48px; top: -17px; background: url(../img/common/thumb_title_tail.png) no-repeat 0 0; }
.bookmark.over li:nth-child(3n+2)>#thumb_title:before{left: calc(50% - 28px);}
.bookmark.over li:nth-child(3n)>#thumb_title:before{left: auto; right: 48px;}

#thumb_title h3 {background: #417cd3; color: #fff; font-family: "ui-regular"; font-size: 24px; line-height: 1.4; padding: 10px 16px 6px; border-radius: 12px; }
#thumb_title h4 {font-family: "ui-regular"; font-size: 22px; color: rgba(255,255,255,0.6); padding: 10px 20px 10px 25px; }
#thumb_title h5 {font-family: "ui-bold"; font-size: 18px; line-height: 1.4; color: #000; padding: 12px 2px 0px 70px; margin: 4px 0px; text-indent: -70px; }
#thumb_title h5>span.section {font-family: "ui-bold"; font-size: 18px; line-height: 1.4; color: #417cd3; padding: 2px 10px 0px; margin-right: 5px; border: 2px solid #417cd3; border-radius: 18px; background-color: #fff; }

/*  Button of Bookmark */
#btn_bookmark_L,
#btn_bookmark_R {position: absolute; z-index: 100;/*113;*/ width: 58px; height: 72px; background: url(../img/common/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: 16px/*30px*/; }
#btn_bookmark_R {right: 16px/*30px*/; }
#btn_bookmark_L:before,
#btn_bookmark_R:before{content:"책갈피";font-size:13px;position: absolute;left:10px;top:10px;font-family: 'omb';}
#btn_bookmark_L.on:before,
#btn_bookmark_R.on:before{color:#fff;}

#page_ebook.fullpage #btn_bookmark_L,
#page_ebook.fullpage #btn_bookmark_R { z-index: 114; }


/*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: -40px; background: url(../img/common/ico_arrowLeft.png) center center no-repeat; }
#btn_next {right: -40px; background: url(../img/common/ico_arrowRight.png) center center no-repeat; }*/
#btn_prev,
#btn_next { position: absolute; width: 38px; height: 65px; z-index: 90; top: calc(50% - 32px); /*transform: translateY(-50%);*/ transition: all 0.5s; cursor: pointer; }
#btn_prev { left: -30px; background: url(../img/common/study/type1/ico_prev.png) center center no-repeat; }
#btn_next { right: -30px; background: url(../img/common/study/type1/ico_next.png) center center no-repeat; }
body.dan2 #btn_prev, body.dan4 #btn_prev, body.dan6 #btn_prev { background: url(../img/common/study/type2/ico_prev.png) center center no-repeat; }
body.dan2 #btn_next, body.dan4 #btn_next, body.dan6 #btn_next { background: url(../img/common/study/type2/ico_next.png) center center no-repeat; }

body.dan1.boundary #btn_next, body.dan3.boundary #btn_next, body.dan5.boundary #btn_next { background: url(../img/common/study/type2/ico_next.png) center center no-repeat; }
body.dan2.boundary #btn_next, body.dan4.boundary #btn_next, body.dan6.boundary #btn_next { background: url(../img/common/study/type1/ico_next.png) center center no-repeat; }

#btn_prev:hover, #btn_next:hover{ transform: scale(1.2); }


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


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

#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>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, 100%) -20px 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: -30px; top: 0; background-size: cover; width: 30px; 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, 100%) 20px 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: 30px; 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;}


/* 확대페이지 - 아이콘 사이즈 */
#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: 120px; height: 120px; margin : 15px 0 0 15px;  /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */ background-size: 100%; }

/* 아이콘별 별도 지정 */
/* #icons_full .icon_std>em{width: 50px !important; height: 60px !important; margin: 20px 23px; background-size: 100% !important;}
#icons_full .icon_std>em:before{width: 48px; height: 48px; top: 8px; left: 8px;}
#icons_full .icon_std>em:after{width: 16px; height: 16px; top: 24px; left: 24px;} */

#icons_full .icon_workbook>em{width: 65px !important; height: 65px !important;background-size: 100% !important;}
/* #icons_full .icon_workbook>em:before{width: 48px; height: 48px; top: 8px; left: 8px;}
#icons_full .icon_workbook>em:after{width: 16px; height: 16px; top: 24px; left: 24px;} */

#icons_full .icon_ebook{width: 124px !important; height: 162px !important; padding:64px 18px 24px 24px;}
#icons_full .icon_sbook{width: 124px !important; height: 162px !important; padding:64px 18px 24px 24px;}
#icons_full .icon_ebook.type0{width: 222px !important; height: 122px !important; padding:64px 18px 24px 26px;}
#icons_full .icon_ebook>.title{width: 88px !important;}
#icons_full .icon_ebook.type0>.title{width: 168px !important;}

#icons_full .icon_sbook.type0{width: 64px !important; height: 64px !important;}
#icons_full .icon_sbook>.title{width: 84px !important;}
#icons_full .icon_sbook>.title, #icons_full .icon_ebook>.title{font-size: 26px;}



#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; }
.icon_img{background: url(../img/common/ebook_icons/viewImg.png) 0 0 no-repeat; }
.icon_ani{background: url(../img/common/ebook_icons/animation.png) 0 0 no-repeat; }
.icon_video{background: url(../img/common/ebook_icons/video.png) 0 0 no-repeat; }
.icon_map{background: url(../img/common/ebook_icons/map.png) 0 0 no-repeat; }
.icon_ppt{background: url(../img/common/ebook_icons/ppt.png) 0 0 no-repeat; }
/* .icon_quiz{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; } */
.icon_intro{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; }
.icon_add{background: url(../img/common/ebook_icons/supplement.png) 0 0 no-repeat; }
.icon_eye{position: absolute; width: 35px; height: 35px; background: url(../img/common/ebook_icons/eye.png) 0 0 no-repeat; background-size: 100%; }
.icon_eye.hidden{position: absolute; width: 35px; height: 35px; background: url(../img/common/ebook_icons/eye_off.png) 0 0 no-repeat; background-size: 100%; }
.icon_sound{background: url(../img/common/ebook_icons/sound.png) 0 0 no-repeat; }
.icon_sound.hidden{background: url(../img/common/ebook_icons/sound_off.png) 0 0 no-repeat; }
.icon_caption{background-color : rgba(255,0,0,0.2); position: relative; }
.icon_caption:before{content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 100%; position: absolute; top: -5px; left: -5px; background: #9aca46;}
.icon_caption.off:before{display:none;}

.icon_memo_new{border-radius: 15px; background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat;  display:inline-block;}
.icon_link_new{border-radius: 15px; background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat;  display:inline-block;}
.icon_memo{border-radius: 15px; background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat;  display:inline-block;}
.icon_link{border-radius: 15px; background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat; }

.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:50px; height: 50px; border-radius: 50%; background:rgba(0,0,0,0.7); top:50%;left: 50%; margin-left: -25px; margin-top: -25px; border: 0px solid #000; 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;}
	
.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_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); }
@keyframes borderPulse {0% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);} 75%{box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);} 100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}}

.icon_link_new.on > em:nth-of-type(1){-webkit-transition-duration: 580ms;transition-duration: 580ms;-webkit-transform: translate3d(61.13709px, -47.37936px, 0);transform: translate3d(61.13709px, -47.37936px, 0);}

/*익힘,교과서*/
.icon_ebook{width: 62px !important; height: 81px !important; padding:32px 9px 12px 12px; background:url(../img/common/ebook_icons/ico_ebook01.png) 0 0 no-repeat; background-size: 100% !important;}
.icon_ebook.type0{width: 111px !important; height: 61px !important;padding:32px 9px 12px 13px;background:url(../img/common/ebook_icons/ico_ebook00.png) 0 0 no-repeat;}
.icon_sbook{width: 62px !important; height: 81px !important; padding:32px 9px 12px 12px; background:url(../img/common/ebook_icons/ico_sbook01.png) 0 0 no-repeat; background-size: 100% !important;}
.icon_sbook.type0{width: calc(64px / 2) !important; height: calc(64px / 2) !important;background:url(../img/common/ebook_icons/ico_sbook00.png) 0 0 no-repeat;background-size: contain !important;}
.icon_sbook>.title,.icon_ebook>.title{width: 42px; font-size:13px/*12px*/; color:#333;font-family: 'omr'; text-align: center; display: block; }
.icon_ebook.type0>.title{width: 84px; font-size:13px/*12px*/; color:#333;font-family: 'omr'; text-align: center; display: block; }
.icon_ebook.type0>.title>span{line-height:26px}
.icon_sbook>.title>span,.icon_ebook>.title>span{display:block;line-height:12px;font-weight:600;}
.icon_sbook>.title>span:nth-child(2),.icon_ebook>.title>span:nth-child(2){position: relative;transform: rotate(90deg);}
#icons_full .icon_sbook>.title,#icons_full .icon_ebook>.title{width:82px;}
#icons_full .icon_sbook>.title>span,#icons_full .icon_ebook>.title>span{line-height:24px;}
#icons_full .icon_ebook.type0>.title>span{line-height:50px}
/* .icon_sbook>.title:after,.icon_ebook>.title:after{content:"쪽";} */
/*.icon_ebook>.title{color:#fff;}*/

body.dan2 .icon_ebook, body.dan4 .icon_ebook, body.dan6 .icon_ebook{background:url(../img/common/ebook_icons/ico_ebook02.png) 0 0 no-repeat; }
body.dan2 .icon_sbook, body.dan4 .icon_sbook, body.dan6 .icon_sbook{background:url(../img/common/ebook_icons/ico_sbook02.png) 0 0 no-repeat; }

body.dan2 .icon_ebook.type0, body.dan4 .icon_ebook.type0, body.dan6 .icon_ebook.type0{background:url(../img/common/ebook_icons/ico_ebook00.png) 0 0 no-repeat; }
body.dan2 .icon_sbook.type0, body.dan4 .icon_sbook.type0, body.dan6 .icon_sbook.type0{background:url(../img/common/ebook_icons/ico_sbook00.png) 0 0 no-repeat; }

/*익힘책 이북 아이콘 홀수 페이지 예외처리*/
body.dan1.boundary .icon_ebook:not(.type0),body.dan3.boundary .icon_ebook:not(.type0),body.dan5.boundary .icon_ebook:not(.type0){background:url(../img/common/ebook_icons/ico_ebook02.png) 0 0 no-repeat; }
body.dan2.boundary .icon_ebook:not(.type0),body.dan4.boundary .icon_ebook:not(.type0),body.dan6.boundary .icon_ebook:not(.type0){background:url(../img/common/ebook_icons/ico_ebook01.png) 0 0 no-repeat; }

.icon_video{width: 48px !important; height: 48px !important; background: url(../img/common/ebook_icons/animation.png) no-repeat 0 0/contain !important;}
#full_bg .icon_video{width: 78px !important; height:84px !important; background-size: 100% !important;}

/*익힘 정답*/
.icon_answer>em{display:inline-block; width: calc(65px / 2) !important; height: calc(65px / 2) !important; background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat;background-size: contain;}
.icon_answer.active>em{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat;background-size: contain;} 


/*활동지*/
.icon_actSheet{width:34px !important; height: 35px !important; background: url(../img/common/ebook_icons/actSheet.png) 0 0 no-repeat !important;background-size: contain !important;}
#full_bg .icon_actSheet{width: 67px !important; height:69px !important; background: url(../img/common/ebook_icons/actSheet2.png) 0 0 no-repeat !important; background-size: contain !important;}


/*smart수업*/
.icon_std{width:auto !important; height:auto !important; }
.icon_std>em{display:inline-block; width: calc(97px / 2) !important; height: calc(97px / 2) !important; background: url(../img/common/ebook_icons/std.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_std>em{width: 97px !important; height: 97px !important; background-size:100% !important;}

/*차시 학습 목표*/
.icon_chasiStd{width:auto !important; height:auto !important; }
.icon_chasiStd>em{display:inline-block; width: calc(97px / 2) !important; height: calc(97px / 2) !important; background: url(../img/common/ebook_icons/ico_chasiStd.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_chasiStd>em{width: 97px !important; height: 97px !important; background-size:100% !important;}

/*차시 도입*/
.icon_stdVideo{width:auto !important; height:auto !important; }
.icon_stdVideo>em{display:inline-block; width: calc(97px / 2) !important; height: calc(97px / 2) !important; background: url(../img/common/ebook_icons/ico_stdVideo.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_stdVideo>em{width: 97px !important; height: 97px !important; background-size:100% !important;}

/*형성평가*/
.icon_hsDown{width:auto !important; height:auto !important; }
.icon_hsDown>em{display:inline-block; width: calc(97px / 2) !important; height: calc(97px / 2) !important; background: url(../img/common/ebook_icons/ico_hsDown.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_hsDown>em{width: 97px !important; height: 97px !important; background-size:100% !important;}

/*진단평가*/
.icon_jdDown{width:auto !important; height:auto !important; }
.icon_jdDown>em{display:inline-block; width: calc(97px / 2) !important; height: calc(97px / 2) !important; background: url(../img/common/ebook_icons/ico_jdDown.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_jdDown>em{width: 97px !important; height: 97px !important; background-size:100% !important;}

/*다운로드*/
.icon_pdfDown{width:auto !important; height:auto !important; }
.icon_pdfDown>em{display:inline-block; width: calc(69px / 2) !important; height: calc(69px / 2) !important; background: url(../img/common/ebook_icons/ico_pdfDown.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_pdfDown>em{width: 69px !important; height: 69px !important; background-size:100% !important;}

/*수학익힘 이동*/
.icon_sbook2{width:auto !important; height:auto !important; }
.icon_sbook2>em{display:inline-block; width: calc(64px / 2) !important; height: calc(64px / 2) !important; background: url(../img/common/ebook_icons/ico_sbook00.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_sbook2>em{width: 64px !important; height: 64px !important; background-size:100% !important;}

/*익힘 문제풀이*/
.icon_quiz{width:auto !important; height:auto !important; }
.icon_quiz>em{display:inline-block; width: calc(65px / 2) !important; height: calc(65px / 2) !important; background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat;background-size: contain !important;}
#full_bg .icon_quiz>em{width: 65px !important; height: 65px !important; background-size:100% !important;}

/* .icon_quiz{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; }
.icon_quiz:before{content:""; position:absolute; width:24px; height: 24px; border-radius: 50%; background:rgba(255,192,70,0.4); top:2px; left:7px; z-index: -1; animation: borderPulse 2s infinite}
.icon_quiz:after{content:""; position:absolute; width:8px; height: 8px; border-radius: 50%; background:#ff8746; top:10px; left:16px;animation: Pulse 2s infinite;}
#full_bg .icon_quiz:before{width:48px; height: 48px; top:4px; left:14px;}
#full_bg .icon_quiz:after{width: 16px; height: 16px; top:20px; left:32px;} */


#scaleup_page .icon_std{ z-index: -1; }

/*익힘책 수업*/
.icon_workbook{width:auto !important; height:auto !important; background: url(../img/common/ebook_icons/std_bg.png) no-repeat 0 0/contain;}
.icon_workbook>em{display:inline-block; width: calc(65px / 2) !important; height: calc(65px / 2) !important; background: url(../img/common/ebook_icons/std.png) no-repeat;background-size:contain;
/*animation: borderPulseblue 2s infinite; border-radius: 50%;*/}
/* .icon_workbook>em:before{content:""; position:absolute; width:24px; height: 24px; border-radius: 50%; background:rgba(255, 249, 185, 0.4); top:4px; left:4px; z-index: -1; animation: borderPulse 2s infinite}
.icon_workbook>em:after{content:""; position:absolute; width:8px; height: 8px; border-radius: 50%; background:rgb(255, 220, 55); top:12px; left:12px;animation: Pulse 2s infinite} */
#scaleup_page .icon_workbook{ z-index: -1; }

@keyframes borderPulse {0% {box-shadow: 0 0 0 0 rgba(255, 249, 185, 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;}}







/*full icon*/
#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{border-radius: 35px;}
#ebook_pages>div>div#full_bg .icon_memo_new>em,#ebook_pages>div>div#full_bg .icon_link_new>em,#ebook_pages>div>div#full_bg .icon_memo>em,#ebook_pages>div>div#full_bg .icon_link>em{width:70px; height:70px; background-size: 25px;}
#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(61.13709px, -47.37936px, 0);transform: translate3d(82.27418px, -94.75872px, 0);}
#ebook_pages>div>div#full_bg .icon_memo_new.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_link_new.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_memo.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_link.on > em:nth-of-type(2) {-webkit-transform: translate3d(-7.08361px, 131.99997px, 0);transform: translate3d(-7.08361px, 131.99997px, 0);}
#ebook_pages>div>div#full_bg .icon_memo_new.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_link_new.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_memo.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_link.on > em:nth-of-type(3) {-webkit-transform: translate3d(75.86291px, 75.62064px, 0);transform: translate3d(75.86291px, 75.62064px, 0);}


#icons_left{left: 0; width: 50%; }
#icons_right{right: 0; width: 50%; }
#icons_left>button,#icons_right>button,#icons_std>button,.icon_memo_new,.icon_link_new,.icon_memo,.icon_link {position: absolute; z-index: 100; /*114; width: 60px; /* 아이콘 사이즈 줄여달라는 요청으로 35px >> 20px로 조정 */ width:60px;height: 60px; margin : 7px 0 0 7px;  /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */ background-size: 100%; transition: all 0.5s; cursor: pointer;}

#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.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;}
#icons_left .icon_answer,#icons_right .icon_answer{width:calc(65px / 2) !important;height:calc(65px / 2) !important;}
#icons_full .icon_answer{width:65px !important;height:65px !important;}
#icons_full .icon_answer>em{width:65px !important;height:65px !important;background-size: contain;}

/* 펜쓰기 캔바스 */
canvas.canvas_layer {position: absolute; z-index: 100;left: 50px; top: 0; transform: translate(0% , 0%); display: none; box-sizing:border-box}
canvas.dummy_canvas {position: absolute; z-index: 100;left: 50px; 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: 1820px !important; height: 1043px; top: 61px;}
#draw_ebook_zoom {top: 0;}
#wrap>div:not(#popup)#canvas_frame{height: 0 !important; position:absolute; top:0; left:50px; z-index: 100;}

/** 펜쓰기 외곽선 **/
#canvas_frame>div{position: absolute; z-index: 100; width: 1680px; height: 1043px; left: 121px; top: 10px; pointer-events: none;}
/* #canvas_frame>div{position: absolute; z-index: 100; width: 1680px; height: 1043px; left: 121px; top: 10px; border:4px solid var(--color-header01-bg-strong) !important; pointer-events: none;}

body.dan2 #canvas_frame>div,
body.dan4 #canvas_frame>div,
body.dan6 #canvas_frame>div { border:4px solid var(--color-header02-bg-strong) !important;} */

/** 펜쓰기 닫기 버튼 **/
/* #canvas_frame>button{position: absolute; top: 10px; left: 1751px; width: 48px; height: 48px; font-size:0px; z-index: 100; border-radius: 0 0 0 20px; background: var(--color-header01-bg-strong) url(../img/common/ico_popclose.png) no-repeat 16px 11px !important; }

body.dan2 #canvas_frame>button,
body.dan4 #canvas_frame>button,
body.dan6 #canvas_frame>button { background-color: var(--color-header02-bg-strong) !important;} */



#full_page {background-color : white; width : 1602px; 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 : 1602px; height : 2086px; position : relative; z-index : 112; background-size:100% 100%;}
#answer_full{background-image: url(""); background-size: 100%; width : 1602px; height : 2086px; position : relative; z-index : 112; background-size:100% 100%;pointer-events: none;}
#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;}

/**/
/*#navigator {position: absolute; height: 8px; z-index: 22; overflow: visible;  bottom: 0; left: 50%; width:1612px; margin-left:-806px;}*/
#navigator {position: absolute; height: 8px; z-index: 667/*101*//*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: 55px; top: 0; width: 1492px; height: 8px; background: gray; border-radius: 10px;}*/
#progress {position: relative; float: left; left: 105px; top: 0; width: 1492px; height: 8px; background: #d4d4d4; border-radius: 10px;}
#pointer {position: relative; display: block; width: 160px; height: 48px; margin-left : -105px; top: -40px; left: 50%;  z-index: 1; font-family: "omb";}
#pointer:before {content: attr(data-content); display: block; width: 100%;}
#pointer>h5{ font-family: inherit; font-size: 16px; color: #333333; position: absolute; width: 100%; height: 100%; top: 1px; left: 0; text-align: center; line-height: 50px; background: #fff; border: 3px solid #cccccc; border-bottom: 0; border-radius: 14px 14px 0 0; font-weight: 600;  }
#progress>em{content:""; display: block; width:50%; position:absolute; left:0; top:0; height:100%; background: #fb7d7d; /*#17b2e6;*/ border-radius: 10px;}

#thumbnail {position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 200px; border: 8px solid #051f29; /* display: none; */ box-shadow: rgba(0, 0, 0, 40%) 0 0 15px; bottom: 20px; z-index: -1; border-bottom: 20px solid #051f29; 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%; font-family: "omb"; text-align: center; font-size: 50px; line-height: 100%; vertical-align: middle; display: table-cell; font-weight: 900; color: #222; background: rgba(255, 255, 255, 0.3); }
#page_num {display: none; }

/**/
#toolbar{
  --color-tool-key: #99b4f7;
}
#toolbar{ position:absolute !important; width:70px; left: 1798px; /*right: 30px;*/ bottom: 28px; text-align: center; height: auto !important; /*border-radius: 0 0 20px 20px;*/ z-index: 666;}
#toolbar.std{ left: 1856px; bottom: 0px; }

#show_toolbar {width:56px; height:74px; margin: 0 7px; background:url(../img/common/ico_etools.png) 0 0 no-repeat; font-size:0;}

#toolbar>ul{position:absolute; padding: 8px 0; border-radius: 16px; bottom: 68px; display: none; background-color: rgba(256, 256, 256, 0); z-index: -1;}
#toolbar.std>ul{background-color: rgba(256, 256, 256, 0.8);}
#toolbar>ul>li{font-size:0; position:relative;}
#toolbar>ul>li>button{ width: 70px; height: 77px; /*width:96px; height: 96px; background-color:#051f29; border-bottom:2px solid #2d434b; background-repeat: no-repeat; background-position:center;*/ }
#toolbar>ul>li>button:after{content: ""; width:46px; height: 2px; background:rgba(186,187,187,0.3); position:absolute; bottom:0; left:calc(50% - 23px);}
#toolbar>ul>li:last-child>button:after{display: none;}

/*#toolbar>ul>li>button:hover{background-color:#11313e;}
#toolbar>ul>li.selected>button{background-color:#1bace0; border-color:#1bace0; position:relative;}
#toolbar>ul>li.selected>button.tool_pen:after,#toolbar>ul>li.selected>button.tool_doumi:after{content:""; position: absolute; top: 50%; right:calc(100% - 2px); margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent #1bace0 transparent transparent; z-index: 22;}
#toolbar>ul>li:first-child button{border-radius:20px 20px 0 0 ;}
#toolbar>ul>li:last-child button{border-bottom:0; }*/
#toolbar>ul .tool_jindo{background-image:url(../img/common/ico_tool_jindoW.png);}
#toolbar>ul>li.ok>button.tool_jindo:after{content:""; position:absolute; right:0; bottom:0; width:36px; height:36px; background:url(../img/common/ico_jindo_on.png) 0 0 no-repeat;}
#toolbar>ul .tool_doumi{background-image:url(../img/common/ico_tool_doumiW.png);}


#toolbar>ul .tool_memo{background-image:url(../img/common/bt_test_memo.png);}
#toolbar>ul .tool_memo_new{background-image:url(../img/common/ico_tool_memoW.png);}
#toolbar>ul .tool_link_new{background-image:url(../img/common/ico_tool_linkW.png);}
#toolbar>ul>li.selected:after{content:"원하는 위치에";}

#toolbar>ul .tool_link{background-image:url(../img/common/ico_tool_linkW.png);}
#toolbar>ul .tool_pen{background-image:url(../img/common/ico_tool_penW.png);}
#toolbar>ul .tool_search{background-image:url(../img/common/ico_tool_searchW.png);}
#toolbar>ul .tool_scaleup{background-image:url(../img/common/ico_tool_scaleup.png);}
#toolbar>ul .tool_fullpage{background-image:url(../img/common/ico_tool_fullpageW.png);}
#toolbar>ul li.is_full .tool_fullpage{background-image:url(../img/common/ico_tool_full.png);}
#toolbar>ul .tool_print{background-image:url(../img/common/ico_tool_printW.png);}

#toolbar>ul .tool_bigcursor.active{cursor:none;}
#toolbar>ul .tool_rulerboard{background-image:url(../img/common/ico_tool_rulerboard.png);}

/* hover */
#toolbar>ul .tool_jindo:hover{background-image:url(../img/common/ico_tool_jindoW_on.png);}
#toolbar>ul .tool_doumi:hover{background-image:url(../img/common/ico_tool_doumiW_on.png);}
#toolbar>ul .tool_pen:hover{background-image:url(../img/common/ico_tool_penW_on.png);}
#toolbar>ul .tool_search:hover{background-image:url(../img/common/ico_tool_searchW_on.png);}
#toolbar>ul .tool_scaleup:hover{background-image:url(../img/common/ico_tool_scaleup_on.png);}
#toolbar>ul .tool_fullpage:hover{background-image:url(../img/common/ico_tool_fullpageW_on.png);}
#toolbar>ul li.is_full .tool_fullpage:hover{background-image:url(../img/common/ico_tool_full_on.png);}
#toolbar>ul .tool_print:hover{background-image:url(../img/common/ico_tool_printW_on.png);}
#toolbar>ul .tool_memo_new:hover{background-image:url(../img/common/ico_tool_memoW_on.png);}
#toolbar>ul .tool_link_new:hover{background-image:url(../img/common/ico_tool_linkW_on.png);}
#toolbar>ul .tool_rulerboard:hover{background-image:url(../img/common/ico_tool_rulerboard_on.png);}

/* selected */
#toolbar>ul>li.selected>button.tool_jindo{background-image:url(../img/common/ico_tool_jindoW_on.png);}
#toolbar>ul>li.selected>button.tool_doumi{background-image:url(../img/common/ico_tool_doumiW_on.png);}
#toolbar>ul>li.selected>button.tool_pen{background-image:url(../img/common/ico_tool_penW_on.png);}
#toolbar>ul>li.selected>button.tool_search{background-image:url(../img/common/ico_tool_searchW_on.png);}
#toolbar>ul>li.selected>button.tool_scaleup{background-image:url(../img/common/ico_tool_scaleup_on.png);}
#toolbar>ul>li.selected>button.tool_print{background-image:url(../img/common/ico_tool_printW_on.png);}
#toolbar>ul>li.selected>button.tool_memo_new{background-image:url(../img/common/ico_tool_memoW_on.png);}
#toolbar>ul>li.selected>button.tool_link_new{background-image:url(../img/common/ico_tool_linkW_on.png);}
#toolbar>ul>li.selected>button.tool_rulerboard{background-image:url(../img/common/ico_tool_rulerboard_on.png);}

/* active */
#toolbar>ul>li>button.tool_rulerboard.active{background-image:url(../img/common/ico_tool_rulerboard_on.png);}

/* 하위 .palette */
#toolbar>ul>li>ul{display: none; position: absolute; right: calc(100% + 2px); z-index: 21;}
/*스콤일때 예외처리*/
#scorm #toolbar>ul>li>ul{top:-221px;}
#toolbar>ul>li #palette_pen{top: -90px;}
#toolbar>ul>li.selected>ul{display: block;}

#toolbar.active>button{background-position-y:-74px;}
#toolbar.active>ul{display: block;}
/*#toolbar.active{ background: #051f29; }*/

/*#toolbar>ul>li>ul>li:first-child>button{border-radius: 17px 17px 0 0;}
#toolbar>ul>li>ul>li:last-child>button{border-radius:0 0 17px 17px;}*/
#toolbar>ul>li>ul:not(#palette_pen) {background-color: #70c3d6; padding: 0px 0; border: 2px solid #4bacc2; border-radius: 16px;}
#toolbar>ul>li>ul:not(#palette_pen):after {content:""; position: absolute; width: 14px; height: 12px; right: -13px; top: calc(50% - 6px); background: url(../img/common/palette_tail.png) no-repeat 0 0/contain;}

/** #palette_rulerboard **/
#toolbar>ul>li>ul#palette_rulerboard { top: -134px; }
#toolbar>ul>li>ul#palette_rulerboard:after { top: calc(50% - 10px); }

/** #palette_doumi **/
#toolbar>ul>li>ul#palette_doumi { top: -133px; }
#toolbar>ul>li>ul#palette_doumi:after { top: 164px; }

#toolbar>ul>li #palette_pen:after{top: 26px;}
#scorm #toolbar>ul>li #palette_pen:after{top: 326px;}
#scorm #toolbar>ul>li #palette_doumi:after{top: 246px;}
#toolbar>ul>li>ul>li{font-size:0; position:relative;}
#toolbar>ul>li>ul>li>button{ position: relative; width: 57px; height: 63px; background-position:center center; background-repeat: no-repeat; /*background-color:#055b7a; margin-top: -1px;*/ }
#toolbar>ul>li>ul>li>button:after{content: ""; width:37px; height: 2px; background:rgba(255,255,255,0.2); position:absolute; bottom:0; left:calc(50% - 19px);}
#toolbar>ul>li>ul>li:last-child>button:after{display: none;}

/*활동도우미*/
#palette_doumi>li>button.tool_bigcursor{background-image:url(../img/common/ico_cursor.png);}
#palette_doumi>li>button.timer{background-image:url(../img/common/ico_timer.png);}
#palette_doumi>li>button.timer{background-image:url(../img/common/ico_timer.png);}
#palette_doumi>li>button.stopwatch{background-image:url(../img/common/ico_stopwatch.png);}
#palette_doumi>li>button.drawinglots{background-image:url(../img/common/ico_number.png);}
#palette_doumi>li>button.ladder{background-image:url(../img/common/ico_ladder.png);}
#palette_doumi>li>button.board{background-image:url(../img/common/ico_board.png);}
#palette_doumi>li>button.bell{background-image:url(../img/common/ico_alert.png);}
#palette_doumi>li>button.tool_blackout{background-image:url(../img/common/ico_blackout.png);}

#palette_doumi>li>button.tool_bigcursor:hover{background-image:url(../img/common/ico_cursor_on.png);}
#palette_doumi>li>button.timer:hover{background-image:url(../img/common/ico_timer_on.png);}
#palette_doumi>li>button.stopwatch:hover{background-image:url(../img/common/ico_stopwatch_on.png);}
#palette_doumi>li>button.drawinglots:hover{background-image:url(../img/common/ico_number_on.png);}
#palette_doumi>li>button.ladder:hover{background-image:url(../img/common/ico_ladder_on.png);}
#palette_doumi>li>button.board:hover{background-image:url(../img/common/ico_board_on.png);}
#palette_doumi>li>button.bell:hover{background-image:url(../img/common/ico_alert_on.png);}
#palette_doumi>li>button.tool_blackout:hover{background-image:url(../img/common/ico_blackout_on.png);}

/*수업 도구(작도보드)*/
#toolbar>ul>li>ul#palette_rulerboard>li>button { width: 63px; height: 70px; }
#palette_rulerboard>li>button.protractor { background-image:url(../img/common/ico_ruler_protractor.png); }
#palette_rulerboard>li>button.ruler { background-image:url(../img/common/ico_ruler_ruler.png); }
#palette_rulerboard>li>button.triangle { background-image:url(../img/common/ico_ruler_square.png); }
#palette_rulerboard>li>button.square { background-image:url(../img/common/ico_ruler_square2.png); }
#palette_rulerboard>li>button.calculator { background-image:url(../img/common/ico_ruler_calculator.png); }

#palette_rulerboard>li>button.protractor:hover { background-image:url(../img/common/ico_ruler_protractor_on.png); }
#palette_rulerboard>li>button.ruler:hover { background-image:url(../img/common/ico_ruler_ruler_on.png); }
#palette_rulerboard>li>button.triangle:hover { background-image:url(../img/common/ico_ruler_square_on.png); }
#palette_rulerboard>li>button.square:hover { background-image:url(../img/common/ico_ruler_square2_on.png); }
#palette_rulerboard>li>button.calculator:hover { background-image:url(../img/common/ico_ruler_calculator_on.png); }

/* 기타(이번엔 사용하지 않음) */
#palette_doumi>li>button.acter{background-image:url(../img/common/ico_doumi.png);}
#palette_doumi>li>button.darker{background-image:url(../img/common/ico_darker.png);}
/*수학 전용*/
#palette_doumi>li>button.calc{background-image:url(../img/common/ico_darker.png);}
#palette_doumi>li>button.shape{background-image:url(../img/common/ico_darker.png);}
#palette_doumi>li>button.model{background-image:url(../img/common/ico_darker.png);}


/*팔레트 : full change in 2024*/
#toolbar>ul>li>ul#palette_pen{position: absolute; display:none; right: 68px; top: -9px; width: 307px; height: 92px; background: url(../img/common/palette_bg.png) no-repeat center;}
#toolbar.right>ul>li>ul#palette_pen{left: auto; right: 56px;}
#toolbar>ul>li>ul#palette_pen.active{display: block;}
#toolbar>ul>li>ul#palette_pen>li{position: absolute;}
#toolbar>ul>li>ul#palette_pen>li.draw{left: 9px;}
#toolbar>ul>li>ul#palette_pen>li.del{right: 10px;}
#toolbar>ul>li>ul#palette_pen>li.visible_continue{display: none;}
#toolbar>ul>li>ul#palette_pen>li>button{position: relative; display: none; width: 33px; height: 33px; top: 9px;}

#toolbar>ul>li>ul#palette_pen>li.draw>button{display: block; background: url(../img/common/btn_pen_draw_dim.png) no-repeat center;}
#toolbar>ul>li>ul#palette_pen>li.draw>button.on{background: url(../img/common/btn_pen_draw.png) no-repeat center;}
#toolbar>ul>li>ul#palette_pen>li.del>button{display: block; right: 39px; background: url(../img/common/btn_pen_erase_dim.png) no-repeat center;}
#toolbar>ul>li>ul#palette_pen>li.del>button.on{background: url(../img/common/btn_pen_erase.png) no-repeat center;}
#toolbar>ul>li>ul#palette_pen>li.del>em:last-of-type{position: absolute; display: block; width: 33px; height: 33px; left: 0px; top: 9px; background: url(../img/common/btn_pen_reset.png) no-repeat 0 0; cursor: pointer;}

#toolbar>ul>li>ul#palette_pen>li.color>ol{position: absolute; display: block; width: 170px; height: 33px; left: 48px; top: 9px; text-align: center;  padding-top: 2px; border-radius: 8px; background-color: #e9e9e9;}
#toolbar>ul>li>ul#palette_pen>li.color>ol>li{position: relative; display: inline-block; margin: 4px 2px;}
#toolbar>ul>li>ul#palette_pen>li.color>ol>li>button{position: relative; display: block; width: 20px; height: 20px; border: 2px solid #e9e9e9; border-radius: 50%;}
#toolbar>ul>li>ul#palette_pen>li.color>ol>li.selected>button{border: none;}
#toolbar>ul>li>ul#palette_pen>li.width { position: absolute; left: 52px; bottom: 31px; }
#toolbar>ul>li>ul#palette_pen>li.opacity { position: absolute; left: 52px; bottom: 12px; }
#toolbar>ul>li>ul#palette_pen>li input[type=range] {
  -webkit-appearance: none;
  width: 160px;
  height: 8px;
  cursor: pointer;
  border-radius: 4px; /* iOS */
  background: var(--color-tool-key);
  outline: none;
}
#toolbar>ul>li>ul#palette_pen>li input[type=range]:focus {
	outline: none;
}
#toolbar>ul>li>ul#palette_pen>li input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: url(../img/common/slide_thumb.png) no-repeat center;
  cursor: pointer;
}
#toolbar>ul>li>ul#palette_pen>li input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: url(../img/common/slide_thumb.png) no-repeat center;
  cursor: pointer;
}

/** preview **/
#toolbar>ul>li>ul#palette_pen>li.preview { position: absolute; display: flex; align-items: center; justify-content: center;  right: 21px; top: 49px; height: 32px; }
#toolbar>ul>li>ul#palette_pen>li.preview>div { position: relative; width: 50px; height: 22px; background-color: #010101; border: 1px solid #fff; }


/*도우미팝업*/
#popup>div.pop_doumi{width: 1440px !important;}
#popup>div:not(.std_menu)>section.tool_timer{padding:0;}
.pop_doumi>section>div{position:relative; display: none; height: 728px;}
.pop_doumi>section>div.on{display: block;}
.pop_doumi .tab{padding:15px 20px 0; font-size:0; background:#eee;}
.pop_doumi .tab>li{cursor: pointer;font-size:23px; color:#aaa; letter-spacing: -1px; line-height: 60px; background:#ddd;border:2px solid #ccc; display: inline-block; text-align: center; font-weight: 500; border-radius: 16px 16px 0 0;}
.pop_doumi .tab>li:first-child:nth-last-child(2), .pop_doumi .tab>li:first-child:nth-last-child(2) ~ li{width:50%;}
.pop_doumi .tab>li:first-child:nth-last-child(3), .pop_doumi .tab>li:first-child:nth-last-child(3) ~ li{width:33.33%;}
.pop_doumi .tab>li.on{background:#fff; color:#333; border-color:#fff;}
.pop_doumi .sound{width:56px; height: 56px; background:url(../img/common/ico_sound.png) 0 -56px no-repeat; position:absolute; top:25px; right:25px; z-index: 2} 
.pop_doumi .sound.on{background-position-y:0;}
.pop_doumi .tool_timer>div{height: 726px;}


/*타이머*/
#timer{position:relative;}
#timer input{background-color: transparent; border: 0; font-family: os; font-weight: 600; text-align: center; letter-spacing: -9px;  padding:0; outline: 0;}
#timer>div:nth-of-type(1){width:720px; height:320px; border:8px solid #888888; border-radius: 80px; position: absolute; top: 240px;left: 300px; background:#f2f2f2;}
#timer>div:nth-of-type(1)>div{position: absolute; top: -22px; width: 431px; left: 0; text-align: center;}
#timer>div:nth-of-type(1)>div>input{font-size:273px; color:#1bace0; font-weight: 600; width: 295px; text-align: right;}
#timer>div:nth-of-type(1)>div>em{font-size:64px; color:#333; font-family: 'ns'; }

#timer>div:nth-of-type(2){width:400px; height:432px; background:url(../img/common/clockbg.png) 0 0 no-repeat; position: absolute;top: 168px; left: 737px;}
#timer>div:nth-of-type(2)>div{position:relative; width:400px; height: 400px; border-radius: 100%; left:0; top:33px; padding:10px;}
#timer>div:nth-of-type(2)>div>div{position:absolute; top:50%; left:50%; width:300px; height:300px; transform: translate(-50%, -50%); background:#f0f0ef; border-radius: 50%;}
#timer>div:nth-of-type(2)>div>div>em{color: #333; font-size: 36px; display: block; font-weight: 400; position: relative; top: -23px; font-family: 'ns';  text-align: center;}
#timer>div:nth-of-type(2)>div>div>input{font-size: 192px; color: #333; width: 100%; letter-spacing: -9px; }
#timer input[type="number"]::-webkit-outer-spin-button,
#timer input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}


#timer .reset{width:125px; height: 126px; background:url(../img/common/ico_reset.png) 0 0 no-repeat; font-size:0; position: absolute; left: 1052px; top: 156px; z-index: 1}
#timer .reset.dimmed{background:url(../img/common/ico_reset_dim.png) 0 0 no-repeat;}
#timer .start{width:120px; height: 80px; background:url(../img/common/ico_start.png) 0 0 no-repeat; font-size:0; position: absolute;  left: 876px; top: 92px; z-index: 1 }
#timer .pause{background-position-y:-80px;}
#timer .start:active{transform:translateY(10px);}
#timer .reset:active{transform: translate(-4px , 10px);}
#timer .btn_min,#timer .btn_sec{width: 96px;  border:6px solid #cccccc; border-radius: 48px; background:#eeeeee; display: inline-block; position:absolute; top:315px;}
#timer .btn_min.dimmed,#timer .btn_sec.dimmed{display: none;}
#timer .plus,#timer .minus{font-size: 66px; color: #000000; font-weight: 600; display: block; text-align: center; width: 100%; line-height: 89px; position:relative;}
#timer .plus:after{content:""; width:64px; height:2px; background:#dddddd; position:absolute; bottom:0; left:calc(50% - 32px);}
#timer .btn_min{left:165px;}
#timer .btn_sec{right:165px;}


.clockline{position: absolute; width: 360px; height: 360px; border-radius: 50%; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.clockline li {display: block; position: absolute; width: 10px; height: 178px; background: #ddd; transform-origin: 5px 100%; left: 50%; top: 0px; transform: rotate(0deg); margin-left: -5px; }
.clockline li.on{background: #333333; }





/*스톱워치*/
.body_stopwatch{padding-top:1px;}
.body_stopwatch>div:nth-of-type(1){width: 1120px; height: 451px; background:url(../img/common/stopwatchbg.png) 0 0 no-repeat; margin: 90px auto 0;}
.body_stopwatch .reset{background:#ccc; border:6px solid #eeeeee; border-radius: 16px 16px 0 0; font-size:26px; font-weight: 500; color:#333333; letter-spacing: -1px; width: 200px; height: 70px; border-bottom:0; text-align: center; position: absolute;  top: 21px; left: 912px;display:none;}
.body_stopwatch .start{background:#ccc url(../img/common/ico_play.png) center center no-repeat; border:6px solid #eeeeee; border-radius: 16px 16px 0 0; width: 80px; height: 70px; border-bottom:0; text-align: center;position: absolute; top: 21px; left: 1120px;}
.body_stopwatch .start.pause{background:#ccc url(../img/common/ico_timerpause.png) center center no-repeat;}

.body_stopwatch>div:nth-of-type(2){}
.body_stopwatch>div:nth-of-type(2){font-size:0; font-size: 0; margin: 40px 35px 0; border-top: 1px solid #e5e5e5; padding-top:25px; height: 140px; overflow:hidden;}
.body_stopwatch>div:nth-of-type(2)>ol{width:calc(100% - 190px); float: left; font-size:0; overflow-x:auto; white-space:nowrap; padding-bottom:10px;}
.body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar { height: 10px; }
.body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-track { background-color: transparent;}
.body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-thumb {border-radius: 11px;background-color: #ddd;}
.body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-button { width: 0; height: 0;}
.body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-thumb:hover {background: #ccc;}

.body_stopwatch>div:nth-of-type(2)>ol>li{ display: inline-block;  padding: 13px 17px; border:2px solid #cccccc; border-radius: 8px; background:#eeeeee; margin-right:23px; vertical-align: middle; }
.body_stopwatch>div:nth-of-type(2)>ol>li:last-child{margin-right:0;}
.body_stopwatch>div:nth-of-type(2)>ol>li>button{font-family: os; font-size:24px; color:#fff; width: 48px; height: 48px; background:#666666; border-radius: 100%; text-align: center; margin-right:15px; vertical-align: bottom;}
.body_stopwatch>div:nth-of-type(2)>ol>li>em{font-size:26px; color:#333; font-weight: 500;  cursor: default;}
.body_stopwatch>div:nth-of-type(2)>ol>li:hover>button{background:#666666 url(../img/common/ico_ttrash.png) center center no-repeat; font-size:0;}

.body_stopwatch>div:nth-of-type(2) .add{border:2px dashed #1bace0; background:#fff; border-radius: 16px; padding:10px 11px; display: inline-block;  float: right; cursor: pointer;}
.body_stopwatch>div:nth-of-type(2) .add>button{width:48px; height: 48px; border-radius: 16px; background:#1bace0; color:#fff; font-size: 46px; vertical-align: middle; line-height: 51px; text-align: center;  margin-right: 5px;}
.body_stopwatch>div:nth-of-type(2) .add>em{color:#aaa; vertical-align: middle; font-size: 26px;}
.body_stopwatch>div:nth-of-type(2) .add:hover{border:2px solid #1bace0; background:#1bace0;}
.body_stopwatch>div:nth-of-type(2) .add:hover>button{background:#76cdec; color:#fff;}
.body_stopwatch>div:nth-of-type(2) .add:hover>em{color:#fff;}



.flip-clock{position:relative; top:52px; right:-35px;}
.flip-clock>li {float: right;}
.flip-clock>li::before {content: ":"; font-family: Consolas; font-size: 160px; color: #fff; line-height: 275px; margin: 0 -20px; }
.flip-clock>li:first-child::before {content: none; }
.flip-clock>li>div {width: 200px; height: 310px; position: relative; margin: 0 5px; float: left; }
.flip-clock>li>div > span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -webkit-perspective: 300px; perspective: 300px; font-family: os;}
.flip-clock>li>div > span::after, .flip-clock>li>div > span::before {content: attr(data-digit); position: absolute; left: 0; width: 100%; height: 50%; font-size: 280px; font-weight: bolder; text-align: center; color: #fff; background-color: #101820; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flip-clock>li>div > span::before {top: 0; line-height: 317px; border-radius: 10px 10px 0 0; border-bottom: 1px solid #000; -webkit-transform-origin: bottom; transform-origin: bottom; border:4px solid #363d44;}
.flip-clock>li>div > span::after {bottom: 0; line-height: 7px; border-radius: 0 0 10px 10px; border-top: 1px solid #000; -webkit-transform-origin: top; transform-origin: top; border:4px solid #363d44;}
.flip-clock>li>div.on .next {z-index: 0; -webkit-animation: afterZIndexAnim 0.8s linear forwards; animation: afterZIndexAnim 0.8s linear forwards; }
.flip-clock>li>div.on .next::before {-webkit-animation: afterUpShadowAnim 0.8s linear forwards; animation: afterUpShadowAnim 0.8s linear forwards; }
.flip-clock>li>div.on .next::after {-webkit-animation: afterFlipAnim 0.8s linear forwards, afterDownShadowAnim 0.8s linear forwards; animation: afterFlipAnim 0.8s linear forwards, afterDownShadowAnim 0.8s linear forwards; }
.flip-clock>li>div.on .current {z-index: 1; -webkit-animation: currentZIndexAnim 0.8s linear forwards; animation: currentZIndexAnim 0.8s linear forwards; }
.flip-clock>li>div.on .current::before {-webkit-animation: currentFlipAnim 0.8s linear forwards, currentUpShadowAnim 0.8s linear forwards; animation: currentFlipAnim 0.8s linear forwards, currentUpShadowAnim 0.8s linear forwards; }
.flip-clock>li>div.on .current::after {-webkit-animation: currentDownShadowAnim 0.8s linear forwards; animation: currentDownShadowAnim 0.8s linear forwards; }

.flip-clock>li:nth-child(2)::before{content:none;}
.flip-clock>li:first-child>div>span::after,.flip-clock>li:first-child>div>span::before{content:none;}
.flip-clock>li:first-child>div{width: 140px; height: 185px; top: 124px;}
.flip-clock>li:first-child>div>span{color:#1dbbf5; font-size:145px; line-height: 185px; text-align: center; letter-spacing: -8px; display: none;}


@-webkit-keyframes afterZIndexAnim {0% {z-index: 1; } 100% {z-index: 2; } }
@keyframes afterZIndexAnim {0% {z-index: 1; } 100% {z-index: 2; } }
@-webkit-keyframes currentZIndexAnim {0% {z-index: 2; } 100% {z-index: 0; } }
@keyframes currentZIndexAnim {0% {z-index: 2; } 100% {z-index: 0; } }
@-webkit-keyframes afterFlipAnim {0% {-webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% {-webkit-transform: rotateX(0); transform: rotateX(0); } }
@keyframes afterFlipAnim {0% {-webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% {-webkit-transform: rotateX(0); transform: rotateX(0); } }
@-webkit-keyframes afterUpShadowAnim {0% {-webkit-box-shadow: inset 0 -100px 20px -10px black; box-shadow: inset 0 -100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } }
@keyframes afterUpShadowAnim {0% {-webkit-box-shadow: inset 0 -100px 20px -10px black; box-shadow: inset 0 -100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } }
@-webkit-keyframes afterDownShadowAnim {0% {-webkit-box-shadow: inset 0 100px 20px -10px black; box-shadow: inset 0 100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } }
@keyframes afterDownShadowAnim {0% {-webkit-box-shadow: inset 0 100px 20px -10px black; box-shadow: inset 0 100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } }
@-webkit-keyframes currentFlipAnim {0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% {-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } }
@keyframes currentFlipAnim {0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% {-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } }
@-webkit-keyframes currentUpShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 -50px 25px -10px black; box-shadow: inset 0 -50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 -100px 25px -10px black; box-shadow: inset 0 -100px 25px -10px black; } }
@keyframes currentUpShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 -50px 25px -10px black; box-shadow: inset 0 -50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 -100px 25px -10px black; box-shadow: inset 0 -100px 25px -10px black; } }
@-webkit-keyframes currentDownShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 50px 25px -10px black; box-shadow: inset 0 50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 100px 25px -10px black; box-shadow: inset 0 100px 25px -10px black; } }
@keyframes currentDownShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 50px 25px -10px black; box-shadow: inset 0 50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 100px 25px -10px black; box-shadow: inset 0 100px 25px -10px black; } }



/*팝업*/
.pop_doumi .tool_acter{display: none;} 
#popup>div:not(.std_menu)>section.tool_acter {padding: 0;}
.tool_acter .body_listup>ul{padding:20px 40px;}
.tool_acter .body_listup>ul:after{content:""; display: block; clear:both;}
.tool_acter .body_listup>ul>li{float: right}
.tool_acter .body_listup>ul>li:first-child{float: left;}
.tool_acter .body_listup>ul>li.scription{font-size:22px; color:#333; font-weight: 600; margin-top: 15px; font-family: notosans;}
.tool_acter .body_listup>ul>li.scription>em{color:#17b2e6;font-weight: 500;}
.tool_acter .body_listup>ul>li.option{font-size: 0; margin-left:20px; line-height: normal; margin-top:3px;}
.tool_acter .body_listup>ul>li.option>button{width:56px; height: 56px; margin-right:8px;}
.tool_acter .body_listup>ul>li.option>button:last-child{margin-right:0;}
.tool_acter .body_listup>ul>li.option>button.load_ex{background-image:url(../img/common/ico_load_ex.png);}
.tool_acter .body_listup>ul>li.option>button.save_ex{background-image:url(../img/common/ico_save_ex.png);}
.tool_acter .body_listup>ul>li.option>button.del_all{background-image:url(../img/common/ico_del_all.png);}
.tool_acter .body_listup>ul>li.selection{width: 360px; position: relative; border-radius: 4px; border: 1px solid #ccc; height: 62px;}
.tool_acter .body_listup>ul>li.selection input{border:0; border-radius: 4px; width: 100%; height: 60px; position:absolute; left:0;padding-right:100px; padding-left:10px;}
.tool_acter .body_listup>ul>li.selection input{font-size: 22px;}
.tool_acter .body_listup>ul>li.selection input::placeholder{font-size:22px; letter-spacing: -1px; color:#cccccc;}
.tool_acter .body_listup>ul>li.selection button{font-size:22px; color:#333; background:#eee;border-left:1px solid #ccc; height:60px; width: 100px; position:absolute; right:0; text-align: center;}

.tool_acter .body_listup ol{border-top:1px solid #e5e5e5; padding:40px; font-size:0;}
.tool_acter .body_listup ol>li{display: inline-block; position:relative; width:calc(25% - 20px); margin: 0 10px; height: 87px; border:6px solid #e5e5e5; border-radius: 8px; text-align: center; line-height: 74px; }
.tool_acter .body_listup ol>li+li+li+li+li{margin-top:20px;}
.tool_acter .body_listup ol>li>span{color:#333;font-size:48px; letter-spacing: -1px; font-family: ns;}

.tool_acter .body_listup ol>li>button{position:absolute; width:32px; height: 32px; background:url(../img/common/ico_listclose.png) 0 0 no-repeat; right:-10px; top:-10px; display: none;}
.tool_acter .body_listup ol>li:hover>button{display: block;}
.tool_acter .body_listup ol>li:hover{border-color:#168db8; background:#17b2e6;}
.tool_acter .body_listup ol>li:hover>span{color:#fff;}

.sub_dialogue{position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 1001; display: none;}
.sub_dialogue>div{width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; background:#fff; border:1px solid #1bace0; border-top-width: 8px; border-radius: 4px; padding:40px 25px 25px; text-align: center;}
.sub_dialogue>div>p{font-size:25px; color:#333; text-align: left; line-height: 32px; font-family: notosans;}
.sub_dialogue>div>p b{font-weight: 500;}
.sub_dialogue>div>p>em{color:#666;}
.sub_dialogue>div>p>input{width:calc(100% - 55px); border:1px solid #ccc; height: 63px; border-radius: 4px;}
.sub_dialogue>div>p>input{font-size:22px;}
.sub_dialogue>div>p>input::placeholder{font-size:22px; color:#ccc; letter-spacing: -1px;}
.sub_dialogue>div>p+p{margin:10px 0;}
.sub_dialogue>div>button{width: 200px; display: inline-block; letter-spacing: -.1px; font-size: 24px; line-height: 64px; background: #1bace0; text-align: center; border-radius: 10px; border: 1px solid #1bace0; color: #fff; margin-right: 1%; margin-top: 20px;}
.sub_dialogue>div>button:last-child{border-color: #dddddd;background: #eeeeee; color: #333333; margin-right: 0;}


.body_modum>div,.body_choice>div{display: none;}
.body_modum>div.on,.body_choice>div.on{display: block;}


.pop_doumi .sub_tab{font-size:0; padding-top: 145px; padding-left: 120px;}
.pop_doumi .sub_tab>li{ display: inline-block;font-size: 26px; line-height: 60px; margin-right: -4px; margin-bottom: -5px; width: 320px; text-align: center; border: 4px solid #ccc; border-bottom: 4px solid #ccc; background-color: #ddd; position:relative;  border-radius: 16px 16px 0 0; font-weight: 400;  letter-spacing: -1px; color:#a7a7a7;}
.pop_doumi .sub_tab>li.on{background-color: #fff; border-top: 4px solid #ccc; color:#333; border-left: 4px solid #ccc; border-right: 4px solid #ccc; border-bottom: 5px solid #fff; z-index: 1 ; font-weight: 500;}
.pop_doumi .slide{width: 1276px; border:4px solid #ccc; height: 255px; margin:0 auto ; border-radius: 16px; padding:61px 0 0; text-align: center;}
.pop_doumi .slide>button{width: 240px; height: 120px;border-radius: 8px; border:2px solid #ddd; background:#f6f6f6; font-size:32px; letter-spacing: -1px; color:#333333; text-align: center; margin:0 10px;}
.pop_doumi .slide>button.add{border-color:#128ab2; color:#fff; background:#17b2e6;}
.pop_doumi .slide>span{border:2px solid #ccc; border-radius: 32px;display: inline-block; vertical-align: middle; margin: 0 10px;}
.pop_doumi .slide>span>button{display: block; width: 64px; height: 64px; border-bottom: 2px solid #ccc; font-size: 46px; text-align: center; color: #333333; font-weight: 500; line-height: 64px;}
.pop_doumi .slide>span>button:last-child{border-bottom:0;}
.pop_doumi .slide input{border:2px solid #ccc; height: 88px; width: 150px; font-size: 32px; text-align: center; border-radius: 8px;}
.pop_doumi .slide input[type="number"]::-webkit-outer-spin-button,
.pop_doumi .slide input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.pop_doumi .slide input+em{font-weight: 700; display: inline-block; margin:0 5px;}
.pop_doumi .slide .line{display:inline-block; width: 2px; height: 128px; background: #eeeeee; margin: 0 80px; vertical-align: middle;}



/* 진도 목록 (2023.08.08) */
#popup>div.pop_jindo section>div { min-height: 60px; }
#popup>div.pop_jindo section>div table { display: block; border-collapse: separate; border-spacing: 0; width: 1040px; margin-top: 10px; }
#popup>div.pop_jindo section>div table td { width: 80px; padding: 10px 0px 8px; border-bottom: 1px solid #dedede; font-family: "omb"; text-align: center; line-height: 1.0; vertical-align: middle; }
#popup>div.pop_jindo section>div table td:nth-child(2) { width: 640px; }
#popup>div.pop_jindo section>div table tbody td:nth-child(2) { text-align: left;  text-overflow: ellipsis; }
#popup>div.pop_jindo section>div table td:nth-child(4) { width: 160px; }
#popup>div.pop_jindo section>div table.scroll tbody td:nth-child(5) { width: 70px; margin-right: -10px; }
#popup>div.pop_jindo section>div table tbody tr:last-child td { padding-bottom: 10px; border-bottom: 2px solid #c6c6c6; }

#popup>div.pop_jindo section>div table thead td { height: 52px; text-align: center; background: var(--color-ui01-wan); border-top: 2px solid #c6c6c6; }
body.dan2 #popup>div.pop_jindo section>div table thead td,
body.dan4 #popup>div.pop_jindo section>div table thead td,
body.dan6 #popup>div.pop_jindo section>div table thead td { background: var(--color-ui02-wan); }

#popup>div.pop_jindo section>div table thead td>span { font-family: inherit; }

#popup>div.pop_jindo section>div table tbody { display: block; height: 252px; padding-bottom: 1px; overflow-y: auto; }
/*#popup>div.pop_jindo section>div table tbody tr:nth-child(even) td { background: #eaeaed; }*/
#popup>div.pop_jindo section>div table tbody tr:hover td { background: var(--color-ui01-wan); }
body.dan2 #popup>div.pop_jindo section>div table tbody tr:hover td,
body.dan4 #popup>div.pop_jindo section>div table tbody tr:hover td,
body.dan6 #popup>div.pop_jindo section>div table tbody tr:hover td { background: var(--color-ui02-wan); }

#popup>div.pop_jindo section>div table tbody tr:hover .chapter { color: #fff; background-color: var(--color-header01-bg); }
body.dan2 #popup>div.pop_jindo section>div table tbody tr:hover .chapter,
body.dan4 #popup>div.pop_jindo section>div table tbody tr:hover .chapter,
body.dan6 #popup>div.pop_jindo section>div table tbody tr:hover .chapter { color: #fff; background-color: var(--color-header02-bg); }

#popup>div.pop_jindo section>div table tbody tr:hover .btn-go { background: url(../img/common/ui/type1/btn-go-over.png) no-repeat center/contain; }
body.dan2 #popup>div.pop_jindo section>div table tbody tr:hover .btn-go,
body.dan4 #popup>div.pop_jindo section>div table tbody tr:hover .btn-go,
body.dan6 #popup>div.pop_jindo section>div table tbody tr:hover .btn-go { background: url(../img/common/ui/type2/btn-go-over.png) no-repeat center/contain; }

/* 진도 목록: checkbox */
#popup>div.pop_jindo section>div table td input[type="checkbox"] { display: none; }
#popup>div.pop_jindo section>div table td input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #dedede;
  border-radius: 8px;
  vertical-align: middle;
  font-size: 0;
  background-color: #fff;
  -webkit-appearance: checkbox;
}
#popup>div.pop_jindo section>div table td input[type="checkbox"]:checked + label:before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url(../img/common/ui/type1/checkbox_check.png) no-repeat center;
}
body.dan2 #popup>div.pop_jindo section>div table td input[type="checkbox"]:checked + label:before,
body.dan4 #popup>div.pop_jindo section>div table td input[type="checkbox"]:checked + label:before,
body.dan6 #popup>div.pop_jindo section>div table td input[type="checkbox"]:checked + label:before { background: url(../img/common/ui/type2/checkbox_check.png) no-repeat center; }

#popup>div.pop_jindo section>div table td .chapter { padding: 2px 12px; margin-right: 8px; border-radius: 10px; font-family: inherit; background-color: #f4f4f4; }
#popup>div.pop_jindo section>div table td .first { position: relative; display: inline-block; width: 44px; height: 21px; margin: auto; font-size: 0; vertical-align: middle; background: url(../img/common/ico_new.png) no-repeat center/contain; margin-left: 10px; }
#popup>div.pop_jindo section>div table td .btn-go { position: relative; display: block; width: 56px; height: 30px; margin: auto; font-size: 0; background: url(../img/common/ui/type1/btn-go.png) no-repeat center/contain; }
body.dan2 #popup>div.pop_jindo section>div table td .btn-go,
body.dan4 #popup>div.pop_jindo section>div table td .btn-go,
body.dan6 #popup>div.pop_jindo section>div table td .btn-go { background: url(../img/common/ui/type2/btn-go.png) no-repeat center/contain; }
#popup>div.pop_jindo section>div table td .btn-all { font-family: inherit; }

/* 진도 목록: 선택 삭제 button */
#popup>div.pop_jindo section>span button.btn-add { border: 1px solid #f1a1a1 !important; background-color: #f1a1a1 !important; }
#popup>div.pop_jindo section>span button.btn-remove { background-color: var(--color-header01-bg); }
body.dan2 #popup>div.pop_jindo section>span button.btn-remove,
body.dan4 #popup>div.pop_jindo section>span button.btn-remove,
body.dan6 #popup>div.pop_jindo section>span button.btn-remove { background-color: var(--color-header02-bg); }

/* 진도 목록: scrollbar */
#popup>div.pop_jindo section>div table tbody::-webkit-scrollbar { width: 10px; }
#popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-track { background-color: #eaeaed; }

#popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb { background-color: var(--color-header01-bg); border-radius: 5px; }
body.dan2 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb, 
body.dan4 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb,
body.dan6 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb { background-color: var(--color-header02-bg); border-radius: 5px; }

#popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb:hover { background-color: var(--color-header01-bg-strong); }
body.dan2 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb:hover,
body.dan4 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb:hover,
body.dan6 #popup>div.pop_jindo section>div table tbody::-webkit-scrollbar-thumb:hover { background-color: var(--color-header02-bg-strong); }




.body_choice .result:after{content:""; display: block; clear:both;}
.body_choice .result>ol{padding:25px;  border-bottom:1px solid #e5e5e5;}
.body_choice .result>ol:after{content:""; display: block; clear:both;}
.body_choice .result .scription{float: left; font-size:26px; color:#333; font-weight: 500; margin-top: 18px;}
.body_choice .result .scription>span{color:#aeaeae; margin-left:20px;}
.body_choice .result .selection{float: right; font-size:0;}
.body_choice .result .selection>button{font-size:22px; letter-spacing: -1px; color:#fff; text-align: center; border-radius: 4px; padding:19px 27px; margin-right:10px;}
.body_choice .result .selection>button.continue{background:#17b2e6;}
.body_choice .result .selection>button.rechoice{background:#666;}
.body_choice .result .selection>button.quit{background:#eee; color:#333; margin-right:0;}
.body_choice .result>div{width: 920px; height: 613px; line-height:normal; text-align: center; font-family: ns;  font-weight: 400; letter-spacing: -1px; color:#333333; float: left; border-right:1px solid #e5e5e5; position:relative;}
.body_choice .result>div>p{position:absolute;left:50%; top:50%; transform: translate(-50%, -50%)}
.body_choice .result>div>p>span{display: block; font-size: 108px;}


.body_choice .result p>span:first-child:nth-last-child(6), .body_choice .result p>span:first-child:nth-last-child(6) ~ span { font-size: 64px; } 
.body_choice .result p>span:first-child:nth-last-child(7), .body_choice .result p>span:first-child:nth-last-child(7) ~ span { font-size: 64px; } 
.body_choice .result p>span:first-child:nth-last-child(8), .body_choice .result p>span:first-child:nth-last-child(8) ~ span { font-size: 64px; } 
.body_choice .result p>span:first-child:nth-last-child(9), .body_choice .result p>span:first-child:nth-last-child(9) ~ span { font-size: 50px; } 
.body_choice .result p>span:first-child:nth-last-child(10), .body_choice .result p>span:first-child:nth-last-child(10) ~ span { font-size: 50px; } 




.body_choice .result dl{float: left; width: calc(100% - 970px); border-bottom: 1px solid #e5e5e5;  margin: 0 25px; text-align: right; padding:20px 0;}
.body_choice .result dl dt,.body_choice .result dl dd{display: inline-block; }
.body_choice .result dl dt{color:#666; font-size:18px; letter-spacing: -1px; margin-right:15px; vertical-align: bottom;}
.body_choice .result dl dd{font-size:36px; color:#666;  font-weight: 500;}
.body_choice .result dl dd em{font-size:22px; vertical-align: middle;}
.body_choice .result dl dd>span{color:#17b2e6; font-weight: 500;}
.body_choice .result dl dd i{font-weight: 100; color:#ccc; margin:0 10px;}


.body_choice .result ul{float: left; width: calc(100% - 920px); height: 537px; overflow-y: auto; padding:25px 0 25px 25px; font-size:0;}
.body_choice .result ul>li{font-size:40px; color:#333; width: 227px; height: 83px; border:6px solid #ccc; border-radius: 8px; display: inline-block; text-align: center; vertical-align: top; line-height: 72px;position:relative;}
.body_choice .result ul>li:nth-of-type(2n-1){margin-right:15px;}
.body_choice .result ul>li+li+li{margin-top:15px;}
.body_choice .result ul>li.dimmed{border:6px dashed #ddd; font-size:0; background:#ebebeb; }
.body_choice .result ul>li>button{position:absolute; width:32px; height: 32px; background:url(../img/common/ico_listclose.png) 0 0 no-repeat; right:-10px; top:-10px; display: none;  font-size:0;}
.body_choice .result ul>li:hover>button{display: block;}



.body_modum .result:after{content:""; display: block; clear:both;}
.body_modum .result>ol{padding:25px;  border-bottom:1px solid #e5e5e5;}
.body_modum .result>ol:after{content:""; display: block; clear:both;}
.body_modum .result .scription{float: left; font-size:26px; color:#333; font-weight: 500; margin-top: 18px;}
.body_modum .result .scription>span{color:#aeaeae; margin-left:20px;}
.body_modum .result .selection{float: right; font-size:0;}
.body_modum .result .selection>button{font-size:22px; letter-spacing: -1px; color:#fff; text-align: center; border-radius: 4px; padding:19px 27px; margin-right:10px;}
.body_modum .result .selection>button.remake{background:#666;}
.body_modum .result .selection>button.quit{background:#eee; color:#333; margin-right:0;}
.body_modum .result>div{width: 25%; border-right:1px solid #e5e5e5; float: left; height: 613px; padding:35px 30px;}
.body_modum .result>div:last-child{border:0;}
.body_modum .result>div>h6{font-size:22px; color:#333; letter-spacing: -1px; text-align: center; font-weight: 500;}
.body_modum .result>div>ul{margin-top:22px;}
.body_modum .result>div>ul>li{overflow:hidden;width: 100%; height: 80px; line-height: 70px; border:6px solid #e5e5e5; border-radius: 8px; font-size:48px; color:#333; font-weight: 500; text-align: center; letter-spacing: -3px;}
.body_modum .result>div>ul>li+li{margin-top:8px;}


/**/
#popup>div.doumi_darker{background:#333; border-radius: 15px; width:100% !important; height: 100%;}
#popup>div.doumi_darker>header{background:transparent !important;}
#popup>div.doumi_darker>header>button.close { background-color: #333; border-radius: 0 0 0 15px; }
#popup>div.doumi_darker>div:not(.powerContainer){text-align: center; font-size: 22px; margin: 10px 0; color:#fff;}
#popup>div.doumi_darker.active {background: #f3f7f9; }
#popup>div.doumi_darker.active>div:not(.powerContainer){color:#333;}
.powerContainer {margin:200px auto 0; width: 212px; }
.power {margin: auto; margin-top: 20px; background: #38434A; border-radius: 5px; color: white; cursor: pointer; font-family: Roboto; font-size: 1.9em; height: 65px; letter-spacing: .2px; line-height: 65px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 150px; -webkit-transition: none; transition: none; }
.power:hover {background: #414e56; }
.power:active {box-shadow: inset 0px 4px 10px 0px #2d363b; -webkit-transition: background 0.14s ease-in; transition: background 0.14s ease-in; }
.active .power {background: #58C48D; }
.active .power:active {box-shadow: inset 0px 6px 8px -1px #41b77b; }
#on {-webkit-transform: translate(50%, 50%) scale(0); transform: translate(50%, 50%) scale(0); opacity: 0; }
.active #on {opacity: 1; -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); -webkit-transition: all 0.14s ease-in; transition: all 0.14s ease-in; }
.fancy-bulb {position: relative; }
.streaks, .streaks:after, .streaks:before {position: absolute; background: #FFDB55; border-radius: 5.5px; height: 11px; }
.streaks:after, .streaks:before {content: ""; display: block; }
.streaks:before {bottom: 65px; }
.streaks:after {top: 65px; }
.left-streaks {right: 217px; top: 89.5px; }
.active .left-streaks {-webkit-animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out; animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.left-streaks:before, .left-streaks:after {left: 15px; }
.active .left-streaks:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.active .left-streaks:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.right-streaks {left: 217px; top: 89.5px; }
.active .right-streaks {-webkit-animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out; animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.right-streaks:before, .right-streaks:after {right: 15px; }
.active .right-streaks:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.active .right-streaks:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.left-streaks:before, .right-streaks:after {-webkit-transform: rotate(34deg); transform: rotate(34deg); }
.left-streaks:after, .right-streaks:before {-webkit-transform: rotate(-34deg); transform: rotate(-34deg); }
@-webkit-keyframes move-left {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } 100% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } }
@keyframes move-left {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } 100% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } }
@-webkit-keyframes move-right {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(80px); transform: translateX(80px); } 100% {-webkit-transform: translateX(80px); transform: translateX(80px); } }
@keyframes move-right {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(80px); transform: translateX(80px); } 100% {-webkit-transform: translateX(80px); transform: translateX(80px); } }
@-webkit-keyframes width-to-zero {0% {width: 50px; } 100% {width: 11px; } }
@keyframes width-to-zero {0% {width: 50px; } 100% {width: 11px; } }
@-webkit-keyframes move-up {100% {bottom: 100.75px; } }
@keyframes move-up {100% {bottom: 100.75px; } }
@-webkit-keyframes move-down {100% {top: 100.75px; } }
@keyframes move-down {100% {top: 100.75px; } }


/*자료실*/
#page_pds {
  --color-pds-line: #edeff0;
  --color-pds-key-type3: #ffbd58;
  --color-pds-strong-type3: #f9893e;
  --color-pds-key-type4: #a9e489;
  --color-pds-strong-type4: #5bc14d;
}

#page_pds .background{ position: absolute; left: 50%; width: 5000px; height: 100%; margin-left: -2500px; z-index: -1; background:url(../img/common/pds/type1/bg.png); }
body[data-bcode="mat41"] #page_pds .background,
body[data-bcode="mat42"] #page_pds .background,
body[data-bcode="mat61"] #page_pds .background,
body[data-bcode="mat62"] #page_pds .background { background:url(../img/common/pds/type2/bg.png); }

#page_pds>div:not(.background){width: 100%; height: 100%; position:relative; left: 50%; top: 50%; transform: translate(-50%, -50%)}

#page_pds header { position: absolute; width: 100%; /*height: 100%;*/ font-size: 0; }
#page_pds header button.go_home { position: absolute; width: 35px; height: 35px; right: 10px; top: 10px; background: url(../img/common/pds/type1/btn_close.png) no-repeat center; transition: all 0.3s; }
body[data-bcode="mat41"] #page_pds header button.go_home,
body[data-bcode="mat42"] #page_pds header button.go_home,
body[data-bcode="mat61"] #page_pds header button.go_home,
body[data-bcode="mat62"] #page_pds header button.go_home { background: url(../img/common/pds/type2/btn_close.png) no-repeat center; }
#page_pds header button.go_home:hover { transform: scale(1.1); }

#page_pds header h4 { position: absolute; display: block; width: 295px; height: 47px; left: 18px; top: 10px; }
body[data-bcode="mat31"] #page_pds header h4 { background: url(../img/common/pds/title_31.png) no-repeat center; }
body[data-bcode="mat32"] #page_pds header h4 { background: url(../img/common/pds/title_32.png) no-repeat center; }
body[data-bcode="mat41"] #page_pds header h4 { background: url(../img/common/pds/title_41.png) no-repeat center; }
body[data-bcode="mat42"] #page_pds header h4 { background: url(../img/common/pds/title_42.png) no-repeat center; }
body[data-bcode="mat51"] #page_pds header h4 { background: url(../img/common/pds/title_51.png) no-repeat center; }
body[data-bcode="mat52"] #page_pds header h4 { background: url(../img/common/pds/title_52.png) no-repeat center; }
body[data-bcode="mat61"] #page_pds header h4 { background: url(../img/common/pds/title_61.png) no-repeat center; }
body[data-bcode="mat62"] #page_pds header h4 { background: url(../img/common/pds/title_62.png) no-repeat center; }

#page_pds header div.common-wrap { position: absolute; width: 100%; height: 94px; top: calc(1080px - 94px - 30px); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; background: #fff url(../img/common/pds/type1/common_bg.png) no-repeat center; }
body[data-bcode="mat41"] #page_pds header div.common-wrap,
body[data-bcode="mat42"] #page_pds header div.common-wrap,
body[data-bcode="mat61"] #page_pds header div.common-wrap,
body[data-bcode="mat62"] #page_pds header div.common-wrap { background: #fff url(../img/common/pds/type2/common_bg.png) no-repeat center; }

#page_pds header div.common-wrap>div { position: relative; display: inline-block; text-align: center; vertical-align: middle; }
#page_pds header div.common-wrap>div:nth-child(1) { width: 1184px; margin: 22px 0 0 70px; }
#page_pds header div.common-wrap>div:nth-child(2) { width: 630px; margin: 22px 0 0 20px; }

#page_pds header div.common-wrap>div>button { position: relative; display: inline-block; width: auto; height: 50px; padding-left: 60px; margin: 0 50px; }
#page_pds header button.hwp { background: url(../img/common/ico_thwp.png) no-repeat 0 0; }
#page_pds header button.pdf { background: url(../img/common/ico_tpdf.png) no-repeat 0 0; }

#page_pds header div.common-wrap>div>button>span{ position: relative; display: inline-block; color: #666; font-family: 'kopubB'; left: 0px; font-size: 20px; line-height: 1.6; white-space: pre; padding-top: 2px; }


/*#page_pds section{ height: calc(100% - 30px); }*/
#page_pds section{ height: calc(100% - 136px); }
#page_pds section>.tab{ padding: 55px 0 0 0; margin-right: -3px; margin-bottom: -1px; font-size:0; text-align: right; }
#page_pds section>.tab>li{ position: relative; display: inline-block; margin-right: -20px; font-family: "omb"; font-size: 27px; color:#555; height: 68px; text-align: center; letter-spacing: -1px; z-index: 0; }
#page_pds section>.tab>li:last-child { margin-right: 0px; }

#page_pds section>.tab>li>button { display: inline-block; height: 100%; padding: 3px 1px 0; margin: 0 -1px; vertical-align: middle; background: url(../img/common/pds/tab_body.png) repeat-x bottom; }
#page_pds section>.tab>li::before { content: ""; display: inline-block; width: 45px; height: 100%; vertical-align: middle; background: url(../img/common/pds/tab_before.png) no-repeat bottom; }
#page_pds section>.tab>li:first-child::before { width: 32px; background: url(../img/common/pds/tab_before_end.png) no-repeat bottom; }
#page_pds section>.tab>li::after { content: ""; display: inline-block; width: 45px; height: 100%; vertical-align: middle; background: url(../img/common/pds/tab_after.png) no-repeat bottom; }
#page_pds section>.tab>li:last-child::after { content: ""; display: inline-block; width: 32px; height: 100%; vertical-align: middle; background: url(../img/common/pds/tab_after_end.png) no-repeat bottom; }

#page_pds section>.tab>li.on { color: var(--color-pds-strong-type3); z-index: 1; }
body[data-bcode="mat41"] #page_pds section>.tab>li.on,
body[data-bcode="mat42"] #page_pds section>.tab>li.on,
body[data-bcode="mat61"] #page_pds section>.tab>li.on,
body[data-bcode="mat62"] #page_pds section>.tab>li.on{ color: var(--color-pds-strong-type4); }

#page_pds section>.tab>li.on>button { background: url(../img/common/pds/tab_body_on.png) repeat-x bottom; }
#page_pds section>.tab>li.on::before { background: url(../img/common/pds/tab_before_on.png) no-repeat bottom; }
#page_pds section>.tab>li.on:first-child::before { width: 32px; background: url(../img/common/pds/tab_before_end_on.png) no-repeat bottom; }
#page_pds section>.tab>li.on::after { background: url(../img/common/pds/tab_after_on.png) no-repeat bottom; }
#page_pds section>.tab>li.on:last-child::after { width: 32px; background: url(../img/common/pds/tab_after_end_on.png) no-repeat bottom; }


/* 사회자료실 추가되는 자료항목 기본값 가림(20201113) */
#page_pds>div>header>div>button.only_soc,
#page_pds>div>section>div>footer>div>button.only_soc { display: none; }


#page_pds section>div{ height: 100%; border-radius: 20px 0 20px 20px; background:#fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; }
/*#page_pds section>.tab+div{height: calc(100% - 123px);}*/
#page_pds section>.tab+div{height: calc(100% - 123px);}

#page_pds section>div{height: 100%; float: left; padding: 32px 14px 32px 30px; /*padding:35px 40px;*/}
#page_pds section>div{width: calc(100% - 0px); border-right: 1px solid #e5e5e5;}


#page_pds section h4{font-size:22px; color:#333; font-weight: 500; letter-spacing: -1px; margin-bottom:20px;}
#page_pds section table{ width: 100%; border-collapse: collapse; }

#page_pds section table.overflow::after { content: ""; position: absolute; bottom: 168px; left: 30px; width: calc(100% - 73px); height: 1px; background-color: var(--color-pds-line); }

#page_pds section table thead { /*border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; display: inline-block;*/ background:#ffeed5; width: 100%; /*padding-right: 16px;*/ }
body[data-bcode="mat41"] #page_pds section table thead,
body[data-bcode="mat42"] #page_pds section table thead,
body[data-bcode="mat61"] #page_pds section table thead,
body[data-bcode="mat62"] #page_pds section table thead { background:#e5f2d1; }

#page_pds section table thead tr{display:block; /*width: 100%;*/}
#page_pds section table thead tr::after { content: ""; position: absolute; display: block; width: 33px; height: 56px; right: 10px; top: 152px; background-color: #fff; }


#page_pds section table tbody { border-top: 6px solid var(--color-pds-key-type3); margin-top: 0px; overflow-y: scroll; overflow-x: hidden; display: inline-block; width: 100%; height: 711px; /*817px;*/
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
  scrollbar-color: transparent transparent;
}
body[data-bcode="mat41"] #page_pds section table tbody,
body[data-bcode="mat42"] #page_pds section table tbody,
body[data-bcode="mat61"] #page_pds section table tbody,
body[data-bcode="mat62"] #page_pds section table tbody { border-top: 6px solid var(--color-pds-key-type4); }

/* scroll: begin */
#page_pds section table tbody::-webkit-scrollbar { width: 12px; }
#page_pds section table tbody::-webkit-scrollbar-track { border-radius: 6px; background-color: #fff; }
#page_pds section table.overflow tbody::-webkit-scrollbar-track { border-radius: 6px; background-color: #eee; }

#page_pds section table tbody::-webkit-scrollbar-thumb { border-radius: 6px; background-color: var(--color-pds-key-type3); }

body[data-bcode="mat41"] #page_pds section table tbody::-webkit-scrollbar-thumb,
body[data-bcode="mat42"] #page_pds section table tbody::-webkit-scrollbar-thumb,
body[data-bcode="mat61"] #page_pds section table tbody::-webkit-scrollbar-thumb,
body[data-bcode="mat62"] #page_pds section table tbody::-webkit-scrollbar-thumb { border-radius: 6px; background-color: var(--color-pds-key-type4); }

#page_pds section table tbody::-webkit-scrollbar-thumb:hover { background-color: var(--color-pds-strong-type3); }

body[data-bcode="mat41"] #page_pds section table tbody::-webkit-scrollbar-thumb:hover,
body[data-bcode="mat42"] #page_pds section table tbody::-webkit-scrollbar-thumb:hover,
body[data-bcode="mat61"] #page_pds section table tbody::-webkit-scrollbar-thumb:hover,
body[data-bcode="mat62"] #page_pds section table tbody::-webkit-scrollbar-thumb:hover { background-color: var(--color-pds-strong-type4); }

#page_pds section table tbody::-webkit-scrollbar-button { width: 0; height: 0; }
/* scroll: end */

#page_pds section table tbody tr{width:100%;}
#page_pds section table th{font-family: 'kopubB'; color:#333; font-size: 24px; white-space: nowrap; border-right: 1px solid #fff;}
#page_pds section table th:nth-child(1){width:100px;}
#page_pds section table th:nth-child(2){width:656px;}
#page_pds section table th:nth-child(3){width:230px;}

#page_pds section table th:nth-child(4){width:190px;} /* ppt */
#page_pds section table th:nth-child(5){width:190px;}
#page_pds section table th:nth-child(6){width:140px;}
#page_pds section table th:nth-child(7){width:200px;}
#page_pds section table th:nth-child(8){width:140px; border-right: none;}

#page_pds section table td:nth-child(1){width:100px; white-space: pre;}
#page_pds section table td:nth-child(2){width:476px; text-align: left; padding: 0 8px 0 16px; word-break: keep-all; }
#page_pds section table td:nth-child(3){width:180px; text-align: left; padding: 0 8px 0 16px; }
#page_pds section table td:nth-child(4){width:230px;}

#page_pds section table td:nth-child(5){width:190px;} /* ppt */
#page_pds section table td:nth-child(6){width:190px;}
#page_pds section table td:nth-child(7){width:140px;}
#page_pds section table td:nth-child(8){width:200px;}
#page_pds section table td:nth-child(9){width:140px;}

#page_pds section table td>p{line-height:110px;}
#page_pds section table td>div{font-family: 'kopubB';}

#page_pds section table td>div span.math,
#page_pds section table td>div span.workbook { position: relative; display: inline-block; width: 28px; height: 28px; color: #fff; font-family: inherit; font-size: 20px; text-align: center; line-height: 1.5; vertical-align: 1px; border-radius: 50%; background-color: #888; }
#page_pds section table td>div span.math::after { content: "수"; }
#page_pds section table td>div span.workbook::after { content: "익"; }

#page_pds section table.dan1 tr:last-child >td:first-child,
#page_pds section table.dan2 tr:last-child >td:first-child,
#page_pds section table.dan3 tr:last-child >td:first-child,
#page_pds section table.dan4 tr:last-child >td:first-child,
#page_pds section table.dan5 tr:last-child >td:first-child,
#page_pds section table.dan6 tr:last-child >td:first-child{opacity: 1;}

#page_pds section table th .dot { font-family: inherit; margin: 0px -6px; }

#page_pds section table th,#page_pds section table td{vertical-align: middle; padding:6px 0px 4px;}
#page_pds section table td{font-family: 'kopubB';border:1px solid var(--color-pds-line); padding-top: 6px; font-size:24px; color:#666; text-align: center;height:90px;line-height:1.4;}

/*#page_pds section table td:nth-of-type(2){ text-align: center;padding:0 10px}*/
#page_pds section table button{background-repeat: no-repeat; background-position: center center; position:relative;top:-6px;margin:0 16px;}
#page_pds section table button>span{font-family: 'kopubB';position: absolute;left:50%;top:56px;transform: translate(-50%,0);font-size:16px;white-space:pre;text-align: center; line-height: 1.2;}

#page_pds section table tbody tr>td:nth-child(4) button { margin: 0 10px; }

#page_pds section table .folder{background-image:url(../img/common/ico_folder.png); width: 50px; height: 42px;}
#page_pds section table .pptx{background-image:url(../img/common/ico_tppt.png); width: 50px; height: 50px; }
#page_pds section table .ppt{background-image:url(../img/common/ico_tppt.png); width: 50px; height: 50px; }
#page_pds section table .hwp{background-image:url(../img/common/ico_thwp.png); width: 50px; height: 50px; }
#page_pds section table .pdf{background-image:url(../img/common/ico_tpdf.png); width: 50px; height: 50px; }
#page_pds section table .zip{background-image:url(../img/common/ico_zip.png); width: 40px; height: 42px;}
#page_pds section table .mp4{background-image:url(../img/common/ico_mp4.png); width: 40px; height: 42px;}

#page_pds section table .list{display:none;position:relative;left:0;top:-7px;z-index:100;}
#page_pds section table .list.active{display:block;}
#page_pds section table .list >button{position:absolute;font-size:0;color:#fff;cursor: pointer;}
#page_pds section table .list >button:nth-child(1){left:1px;top:0;background-image:url(../img/common/ico_pds_open.png);width:67px;height:44px;}
#page_pds section table .list >button:nth-child(2){left:68px;top:0;background-image:url(../img/common/ico_pds_down.png);width:68px;height:44px;}
#page_pds section table .list .ppt{background-image:none;width:auto;height:auto;}
#page_pds section table .list .hwp{background-image:none;width:auto;height:auto;}
#page_pds section table .list .pdf{background-image:none;width:auto;height:auto;}
#page_pds section table .list .mp4{background-image:none;width:auto;height:auto;}




#page_pds section table .sub_list:after{content:""; position:absolute;width:24px; height:24px; background:url(../img/common/ico_more.png) no-repeat; right: -14px; bottom: 6px;}
#page_pds section table .sub_list+ul{display: none; position:absolute; min-width: 384px; border:8px solid #051f29; border-radius:8px; background: #fff; z-index: 1; top:73px; box-shadow: 7px 7px 3px rgba(0,0,0,0.2); right:0; }
#page_pds section table .sub_list+ul li{text-align: left;}
#page_pds section table .sub_list+ul li.header{height: 40px; background:#051f29; }
#page_pds section table .sub_list+ul li .close{width: 24px; height: 30px; background:url(../img/common/ico_sublistclose.png) 0 center no-repeat; float: right;}
#page_pds section table .sub_list+ul li> button:not(.close){width: 100%; height: 65px; line-height: 65px;  font-size:22px; color:#666; border-bottom:1px solid #e5e5e5; background-position:25px center; padding-left: 77px; padding-right:15px;overflow: hidden;text-overflow: ellipsis;}
#page_pds section table .sub_list+ul li:last-child button{border-bottom:0;}
#page_pds section table td.on{position:relative;}
#page_pds section table td.on .sub_list+ul{display: block;}

#page_pds section table td.on .sub_list+ul .list{left:70px;top:-50px;}


#page_pds section table td .dan { margin-left: -4px; font-family: "kopubBatangB" !important }
#page_pds section table td .dan>.sup { position: relative; display: inline-block; top: -8px; margin: 0 4px 0 0px; font-family: inherit; font-size: 60%; }
#page_pds section table td .dan>sup { position: relative; display: inline-block; top: -8px; margin: 0 4px 0 -2px; font-size: 60%; }




#page_pds footer>div>button{display: block; width:100%; line-height: 64px; color:#333; font-size:22px; background-color:#f6f6f6; border:2px solid #e5e5e5;padding-right: 97px;text-align: center;letter-spacing: -1px; font-weight: 500; border-radius: 8px; background-position:219px center; background-repeat:no-repeat;}
#page_pds footer>div>button+button{margin-top:8px;}
#page_pds footer>div>button.pdf{background-image:url(../img/common/ico_pdf.png);}
#page_pds footer>div>button.folder{background-image:url(../img/common/ico_multifolder.png);}
#page_pds footer>div>button.hwp{background-image:url(../img/common/ico_hwp.png);}
#page_pds footer>div>button.zip{background-image:url(../img/common/ico_zip.png);background-size: 47px 56px;}
#page_pds footer>div>button.pptx{background-image:url(../img/common/ico_ppt.png);}

#page_pds footer>div>div>button{display: block; width:100%; line-height: 64px; color:#333; font-size:22px; background-color:#f6f6f6; border:2px solid #e5e5e5;padding-right: 97px;text-align: center;letter-spacing: -1px; font-weight: 500; border-radius: 8px; background-position:219px center; background-repeat:no-repeat;}
#page_pds footer>div>div>button+button{margin-top:8px;}
#page_pds footer>div>div>button.pdf{background-image:url(../img/common/ico_pdf.png);}
#page_pds footer>div>div>button.folder{background-image:url(../img/common/ico_multifolder.png);}
#page_pds footer>div>div>button.hwp{background-image:url(../img/common/ico_hwp.png);}
#page_pds footer>div>div>button.zip{background-image:url(../img/common/ico_zip.png);background-size: 47px 56px;}
#page_pds footer>div>div>button.pptx{background-image:url(../img/common/ico_ppt.png);}


#page_pds footer>div>div{display:block;margin:8px 0;}
#page_pds footer>div>div> .list{display:none;position:relative;left:180px;top:-51px;z-index:100;}
#page_pds footer>div>div> .list.active{display:block;}
#page_pds footer>div>div> .list >button{position:absolute;font-size:0;color:#fff;cursor: pointer;}
#page_pds footer>div>div> .list >button:nth-child(1){left:1px;top:0;background-image:url(../img/common/ico_pds_open.png);width:67px;height:44px;}
#page_pds footer>div>div> .list >button:nth-child(2){left:68px;top:0;background-image:url(../img/common/ico_pds_down.png);width:68px;height:44px;}
#page_pds footer>div>div> .list .ppt{background-image:none;width:auto;height:auto;}
#page_pds footer>div>div> .list .hwp{background-image:none;width:auto;height:auto;}
#page_pds footer>div>div> .list .pdf{background-image:none;width:auto;height:auto;}



#page_pds footer>.folder{height: 56px; background:url(../img/common/ico_danfolder.png) right center no-repeat; margin-top:40px;}
#page_pds footer>.folder:before{content:"단원 폴더 열기"; color:#333; font-weight: 500; font-size:18px; display: inline-block; padding-right: 70px;}


/*자료검색팝업*/
#popup>div:not(.std_menu).pop_search{width: 1000px !important;}
.pop_search section{padding:0 !important;}
.pop_search section>div:nth-of-type(1){line-height: 120px; background:#f5f5f5; text-align: center; font-size:0;}
.pop_search section>div:nth-of-type(1):before{content:""; display: inline-block; background:url(../img/common/searcht.png) 0 0 no-repeat; width: 93px; height: 24px; vertical-align: middle; margin-right: 20px;}
.pop_search section>div:nth-of-type(1)>input{width: 470px; height: 64px; border: 1px solid #0f5e7a; border-radius: 4px 0 0 4px; vertical-align: middle; font-size: 22px; padding:0 15px;}
.pop_search section>div:nth-of-type(1)>button{width: 100px; height: 64px; background: #0f5e7a; text-align: center; color: #fff; font-size: 24px; letter-spacing: -1px; vertical-align: middle;}
.pop_search section>h5{border-bottom:1px solid #e5e5e5; padding:15px 21px; font-size:22px; letter-spacing: -1px;  color:#333;}
.pop_search section>h5>em{color:#ff9d0a; font-weight: 600;}
.pop_search section>div:nth-of-type(2){overflow-y: scroll; height: 560px;  position:relative; margin-bottom:10px;}
.pop_search section>div:nth-of-type(2)>p{font-size:24px; color:#000; letter-spacing: -1px; position:absolute;left: 50%; transform: translateX(-50%); top: 140px;  background:url(../img/common/nodata.png) center center no-repeat; padding-top:150px; display: none;}
.pop_search section>div:nth-of-type(2) li{border-bottom:1px solid #e5e5e5;  padding:16px 45px; display: table;}
.pop_search section>div:nth-of-type(2) li>p{display: table-cell; width:120px; vertical-align: middle;}
.pop_search section>div:nth-of-type(2) li>p>span{display: inline-block; width:120px; height: 160px; border:2px solid #ccc; font-size: 32px; color: #000;  text-align: center; line-height: 160px; font-weight: 700; position:relative;}
.pop_search section>div:nth-of-type(2) li>p>span:after{content:""; position:absolute; width:100%; height:100%; background:rgba(255,255,255,0.4); top:0; left:0; z-index: -1;}
.pop_search section>div:nth-of-type(2) li>dl{display: table-cell;padding-left: 15px;}
.pop_search section>div:nth-of-type(2) li>dl dt:nth-of-type(1){font-size:26px; color:#0f5e7a; font-weight: 600; margin-bottom:11px; }
.pop_search section>div:nth-of-type(2) li>dl dt:nth-of-type(2){font-size:23px; color:#333; font-weight: 500; margin-bottom:5px; letter-spacing: -1px;}
.pop_search section>div:nth-of-type(2) li>dl dd{font-size:18px; color:#666; line-height: 26px; letter-spacing: -1px; overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.4;
    max-height: 7em;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.pop_search section>div:nth-of-type(2) li>dl dd>em{color: #ff9d0a; font-weight: 600;}
.pop_search section>div:nth-of-type(2) li:hover{background:#f6f6f6;}


/*자료링크*/

.dialogue_link dl{font-size:0;}
.dialogue_link dl dt{font-family: "omb"; font-size:18px; color:#333; letter-spacing: -1px;  display: inline-block; font-weight: 500;}
.dialogue_link dl dt:nth-of-type(1){width:63px;}
.dialogue_link dl dt+dt{margin-top:8px;}
.dialogue_link dl input{width: 524px; height: 64px; border:1px solid #cccccc; font-size: 22px; color: #333; letter-spacing: -1px; padding: 0 15px;}

/*프린트*/
.dialogue_print{font-size:0;}
.dialogue_print dl{display: inline-block; width: 200px; text-align: center;}
.dialogue_print dl dt{width: 149px; height: 108px; margin:30px auto 0px;}
.dialogue_print dl dd{color:#333; font-size:22px; letter-spacing: -1px;  margin:20px 0;}
.dialogue_print dl dd input{width: 24px; height: 24px; border: 1px solid #ccc; margin:0; margin-right: 7px; vertical-align: middle;}
.dialogue_print dl dd label{font-family: "omb";}
.dialogue_print dl:nth-of-type(1) dt{background-image:url(../img/common/leftpage.png);}
.dialogue_print dl:nth-of-type(2) dt{background-image:url(../img/common/rightpage.png);}
.dialogue_print dl:nth-of-type(3) dt{background-image:url(../img/common/bothpage.png);}

/*메모장NEW*/
.dialogue_memo_new{width:588px;}
.dialogue_memo_new input,.dialogue_memo_new textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;}
.dialogue_memo_new input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;}
.dialogue_memo_new textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; }

.dialogue_memo_new dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;}
.dialogue_memo_new dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666;  border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all;  line-height: 40px;}

/*링크NEW*/
.dialogue_link_new{width:588px;}
.dialogue_link_new input,.dialogue_link_new textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;}
.dialogue_link_new input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;}
.dialogue_link_new textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; }

.dialogue_link_new dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;}
.dialogue_link_new dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666;  border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all;  line-height: 40px;}


/*메모장*/
.dialogue_memo{width:588px;}
.dialogue_memo input,.dialogue_memo textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;}
.dialogue_memo input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;}
.dialogue_memo textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; }

.dialogue_memo dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;}
.dialogue_memo dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666;  border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all;  line-height: 40px;}


div.adding { cursor:pointer; }  /* 메모장, 링크 아이콘 생성시 커서모양 바꾸기. (20200706 cny) */

.editing { box-shadow:5px 4px 3px rgba(0,0,0,0.4); border: 3px dotted orange;  }

#icons_full> .editing { box-shadow:8px 9px 5px rgba(0,0,0,0.4); border: 5px dotted orange;  } 



/*수학 도구툴 버튼*/
#toolMath{ position:absolute !important; width:83px;  right: -80px; top:130px; text-align: center; height: auto !important; border-radius: 20px 20px 0 0 ; z-index: 1001;}
#toolMath.remove{z-index:1000;}
#toolMath.active {background: #051f29;}
#toolMath>ul .tool_calc {background-image: url(../img/common/ico_mat_calc.png);}
#toolMath>ul .tool_shape {background-image: url(../img/common/ico_mat_shape.png);}
#toolMath>ul .tool_model {background-image: url(../img/common/ico_mat_model.png);}
#toolMath>ul .tool_solid {background-image: url(../img/common/ico_mat_solid.png);}

#show_toolMath {width:83px; height:83px; background:url(../img/common/ico_mat_tools.png) 0 0 no-repeat; font-size:0;}
#toolMath.active #show_toolMath {background:url(../img/common/ico_mat_toolsOn.png) 0 0 no-repeat;}

#toolMath>ul{position:absolute; top: 82px;display:none;}
#toolMath>ul>li{font-size:0; position:relative;}
#toolMath>ul>li>button{width:83px; height: 83px; background-color:#051f29; border-bottom:2px solid #2d434b; background-repeat: no-repeat; background-position:center;}
#toolMath>ul>li>button:hover{background-color:#11313e;}
#toolMath>ul>li.selected>button{background-color:#1bace0; border-color:#1bace0; position:relative;}
#toolMath>ul>li.selected>button.tool_shape:after,#toolMath>ul>li.selected>button.tool_model:after{content:""; position: absolute; top: 50%; right:calc(100% - 2px); margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent #1bace0 transparent transparent; z-index: 22;}
#toolMath>ul>li:first-child button{border-radius:0 0 0px 0px ;}
#toolMath>ul>li:last-child> button{border-bottom:0; border-radius:0 0 20px 20px ;}

#toolMath>ul>li>ul{display: none; position: absolute; top: 0; right: calc(100% - 1px); z-index: 21;}
#toolMath>ul>li.selected>ul{display: block;}

/* #toolMath.active>button{background-position-y:-64px;} */
#toolMath.active>ul{display: block;}

#toolMath>ul>li>ul>li:first-child>button{border-radius: 17px 17px 0 0;}
#toolMath>ul>li>ul>li:last-child>button{border-radius:0 0 17px 17px;}
#toolMath>ul>li>ul>li{font-size:0; position:relative;}
#toolMath>ul>li>ul>li>button{width:80px; height: 80px;  background-position:center center; background-repeat: no-repeat;  position:relative; background-color:#055b7a; margin-top:-1px;}
#toolMath>ul>li>ul>li>button:after{content: ""; width:64px; height: 2px; background:rgba(255,255,255,0.16); position:absolute; bottom:0; left:calc(50% - 32px);}
#toolMath>ul>li>ul>li:last-child>button:after{display: none;}

/*팔레트*/
#toolMath>ul>li>ul#palette_shape{top:-167px;}
#toolMath>ul>li>ul#palette_model{top:-188px;}
#toolMath>ul>li>ul#palette_solid{top:-248px;}
#palette_shape>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0;  display: table; padding:0 10px; display: none;}
#palette_shape>li>ol>li{display: table-cell; vertical-align: middle;}
#palette_shape>li>ol>li:first-child:nth-last-child(4), #palette_shape>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;}
#palette_shape>li>ol>li:first-child:nth-last-child(5), #palette_shape>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;}
#palette_shape>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} 
/* #palette_shape>li.selected>button{background-color:#04445c;} */
#palette_shape>li.selected>ol,#palette_shape>li.selected>em,#palette_shape>li.selected>div{display: table;}


#palette_shape>li.pen>button{background-image:url(../img/common/ico_draw.png);}
#palette_shape>li.pen.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#04445c;}

#palette_shape>li.blackboard>button{background-image:url(../img/common/ico_mat_blackboard.png);}
#palette_shape>li.blackboard.selected>button{background-image:url(../img/common/ico_mat_blackboard.png); background-color:#04445c;}


#palette_shape>li.color>button{background-image:url(../img/common/ico_color.png);}
#palette_shape>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;}
#palette_shape>li.color>button[value="#333"]:before{background:#333; content:"";}
#palette_shape>li.color>button[value="#3f0"]:before{background:#3f0; content:"";}
#palette_shape>li.color>button[value="#f30"]:before{background:#f30; content:"";}
#palette_shape>li.color>button[value="#fc0"]:before{background:#fc0; content:"";}
#palette_shape>li.color>button[value="#06c"]:before{background:#06c; content:"";}
#palette_shape>li.color>button[value="#eee"]:before{background:#eee; content:"";}
#palette_shape>li.color>ol>li>button {width: 36px;height: 36px;border-radius: 8px;position: relative;border: 2px solid gray;}

#palette_shape>li.color>ol>li:nth-child(1)>button{background:#333;}
#palette_shape>li.color>ol>li:nth-child(2)>button{background:#3f0;}
#palette_shape>li.color>ol>li:nth-child(3)>button{background:#f30;}
#palette_shape>li.color>ol>li:nth-child(4)>button{background:#fc0;}
#palette_shape>li.color>ol>li:nth-child(5)>button{background:#06c;}
#palette_shape>li.color>ol>li:nth-child(6)>button{background:#eee;}


/*삼각형*/
#palette_shape>li.triangle>button{background-image:url(../img/common/ico_mat_triangle.png);}
#palette_shape>li.triangle.selected>button{background-image:url(../img/common/ico_mat_triangle.png); background-color:#04445c;}
#palette_shape>li.triangle>ol>li>button {width: 24px;height: 24px;}
#palette_shape>li.triangle>ol>li:nth-child(1)>button{width: 30px;height: 25px;background-image:url(../img/common/ico_mat_triangle_sub1.png);}
#palette_shape>li.triangle>ol>li:nth-child(2)>button{background-image:url(../img/common/ico_mat_triangle_sub2.png);}
#palette_shape>li.triangle>ol>li.selected:nth-child(1)>button{background-image:url(../img/common/ico_mat_triangle_sub1On.png);}
#palette_shape>li.triangle>ol>li.selected:nth-child(2)>button{background-image:url(../img/common/ico_mat_triangle_sub2On.png);}

#palette_shape>li.triangle>ol{width:130px;}


/*사각형*/
#palette_shape>li.square>button{background-image:url(../img/common/ico_mat_square.png);}
#palette_shape>li.square.selected>button{background-image:url(../img/common/ico_mat_square.png); background-color:#04445c;}
#palette_shape>li.square>ol>li>button {width: 30px;height: 25px;}
#palette_shape>li.square>ol>li:nth-child(1)>button{width: 30px;height: 25px;background-image:url(../img/common/ico_mat_square_sub1.png);}
#palette_shape>li.square>ol>li:nth-child(2)>button{width: 27px;height: 25px;background-image:url(../img/common/ico_mat_square_sub2.png);}
#palette_shape>li.square>ol>li:nth-child(3)>button{width: 34px;height: 25px;background-image:url(../img/common/ico_mat_square_sub3.png);}
#palette_shape>li.square>ol>li:nth-child(4)>button{width: 32px;height: 29px;background-image:url(../img/common/ico_mat_square_sub4.png);}

#palette_shape>li.square>ol>li.selected:nth-child(1)>button{background-image:url(../img/common/ico_mat_square_sub1On.png);}
#palette_shape>li.square>ol>li.selected:nth-child(2)>button{background-image:url(../img/common/ico_mat_square_sub2On.png);}
#palette_shape>li.square>ol>li.selected:nth-child(3)>button{background-image:url(../img/common/ico_mat_square_sub3On.png);}
#palette_shape>li.square>ol>li.selected:nth-child(4)>button{background-image:url(../img/common/ico_mat_square_sub4On.png);}


/*오각형*/
#palette_shape>li.pentagon>button{background-image:url(../img/common/ico_mat_pentagon.png);}
#palette_shape>li.pentagon.selected>button{background-image:url(../img/common/ico_mat_pentagon.png); background-color:#04445c;}

/*육각형*/
#palette_shape>li.hexagon>button{background-image:url(../img/common/ico_mat_hexagon.png);}
#palette_shape>li.hexagon.selected>button{background-image:url(../img/common/ico_mat_hexagon.png); background-color:#04445c;}

/*원*/
#palette_shape>li.circle>button{background-image:url(../img/common/ico_mat_circle.png);}
#palette_shape>li.circle.selected>button{background-image:url(../img/common/ico_mat_circle.png); background-color:#04445c;}

/*다각형*/
#palette_shape>li.polygon>button{background-image:url(../img/common/ico_mat_polygon.png);}
#palette_shape>li.polygon.selected>button{background-image:url(../img/common/ico_mat_polygon.png); background-color:#04445c;}
#palette_shape>li>.input{position: absolute; top: 14px; left: -49px; display: none;} 
#palette_shape>li>.input>input{width: 48px; height: 48px;text-align:center;} 
#palette_shape>li>.input>span{cursor: pointer;position: absolute;top: 0; left: -59px;font-family: 'nq';font-size:20px;color:#fff;background-color: #055b7a;border-radius: 10px;padding: 11px;}
#palette_shape>li>.input>input::-webkit-outer-spin-button,
#palette_shape>li>.input>input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*수 모형*/

#palette_model>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0;  display: table; padding:0 10px; display: none;}
#palette_model>li>ol>li{display: table-cell; vertical-align: middle;}
#palette_model>li>ol>li:first-child:nth-last-child(4), #palette_model>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;}
#palette_model>li>ol>li:first-child:nth-last-child(5), #palette_model>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;}
#palette_model>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} 

#palette_model>li.selected>ol,#palette_model>li.selected>em,#palette_model>li.selected>input{display: table;}
#palette_model>li>button{border-radius: 0 !important}
#palette_model>li:first-child>button{border-radius: 17px 17px 0 0 !important;}
#palette_model>li:last-child>button{border-radius:0 0 17px 17px !important;}

#palette_model>li.pen>button{background-image:url(../img/common/ico_draw.png);}
#palette_model>li.pen.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#04445c;}

#palette_model>li.blackboard>button{background-image:url(../img/common/ico_mat_blackboard.png);}
#palette_model>li.blackboard.selected>button{background-image:url(../img/common/ico_mat_blackboard.png); background-color:#04445c;}


#palette_model>li.color>button{background-image:url(../img/common/ico_color.png);}
#palette_model>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;}
#palette_model>li.color>button[value="#333"]:before{background:#333; content:"";}
#palette_model>li.color>button[value="#3f0"]:before{background:#3f0; content:"";}
#palette_model>li.color>button[value="#f30"]:before{background:#f30; content:"";}
#palette_model>li.color>button[value="#fc0"]:before{background:#fc0; content:"";}
#palette_model>li.color>button[value="#06c"]:before{background:#06c; content:"";}
#palette_model>li.color>button[value="#eee"]:before{background:#eee; content:"";}
#palette_model>li.color>ol>li>button {width: 36px;height: 36px;border-radius: 8px;position: relative;border: 2px solid gray;}

#palette_model>li.color>ol>li:nth-child(1)>button{background:#333;}
#palette_model>li.color>ol>li:nth-child(2)>button{background:#3f0;}
#palette_model>li.color>ol>li:nth-child(3)>button{background:#f30;}
#palette_model>li.color>ol>li:nth-child(4)>button{background:#fc0;}
#palette_model>li.color>ol>li:nth-child(5)>button{background:#06c;}
#palette_model>li.color>ol>li:nth-child(6)>button{background:#eee;}

/*모형*/
#palette_model>li.model>button{background-image:url(../img/common/ico_mat_sub_model.png);}
#palette_model>li.model.selected>button{background-image:url(../img/common/ico_mat_sub_model.png); background-color:#04445c;}
#palette_model>li.model>ol>li>button {width: 33px;height: 29px;position: relative;border-radius:0;}
#palette_model>li.model>ol>li:nth-child(1)>button{width: 33px;height: 29px;background-image:url(../img/common/ico_mat_sub_model1.png);}
#palette_model>li.model>ol>li:nth-child(2)>button{width: 9px;height: 41px;background-image:url(../img/common/ico_mat_sub_model2.png);}
#palette_model>li.model>ol>li:nth-child(3)>button{width: 34px;height: 33px;background-image:url(../img/common/ico_mat_sub_model3.png);}
#palette_model>li.model>ol>li:nth-child(4)>button{width: 31px;height: 29px;background-image:url(../img/common/ico_mat_sub_model4.png);}

#palette_model>li.model>ol>li.selected:nth-child(1)>button{width: 35px;height: 30px;background-image:url(../img/common/ico_mat_sub_model1On.png);}
#palette_model>li.model>ol>li.selected:nth-child(2)>button{width: 12px;height: 44px;background-image:url(../img/common/ico_mat_sub_model2On.png);}
#palette_model>li.model>ol>li.selected:nth-child(3)>button{width: 38px;height: 36px;background-image:url(../img/common/ico_mat_sub_model3On.png);}
#palette_model>li.model>ol>li.selected:nth-child(4)>button{width: 36px;height: 33px;background-image:url(../img/common/ico_mat_sub_model4On.png);}


/*수*/
#palette_model>li.su>button{background-image:url(../img/common/ico_mat_sub_su.png);}
#palette_model>li.su.selected>button{background-image:url(../img/common/ico_mat_sub_su.png); background-color:#04445c;}
#palette_model>li.su>ol>li>button {width: 32px;height: 32px;position: relative;border-radius:0;}
#palette_model>li.su>ol>li:nth-child(1)>button{width: 32px;height: 32px;background-image:url(../img/common/ico_mat_sub_su1.png);}
#palette_model>li.su>ol>li:nth-child(2)>button{width: 33px;height: 33px;background-image:url(../img/common/ico_mat_sub_su2.png);}
#palette_model>li.su>ol>li:nth-child(3)>button{width: 36px;height: 36px;background-image:url(../img/common/ico_mat_sub_su3.png);}
#palette_model>li.su>ol>li:nth-child(4)>button{width: 42px;height: 24px;background-image:url(../img/common/ico_mat_sub_su4.png);}

#palette_model>li.su>ol>li.selected:nth-child(1)>button{width: 34px;height: 34px;background-image:url(../img/common/ico_mat_sub_su1On.png);}
#palette_model>li.su>ol>li.selected:nth-child(2)>button{width: 36px;height: 36px;background-image:url(../img/common/ico_mat_sub_su2On.png);}
#palette_model>li.su>ol>li.selected:nth-child(3)>button{width: 39px;height: 38px;background-image:url(../img/common/ico_mat_sub_su3On.png);}
#palette_model>li.su>ol>li.selected:nth-child(4)>button{width: 45px;height: 29px;background-image:url(../img/common/ico_mat_sub_su4On.png);}

/*입체 도형*/

#palette_solid>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0;  display: table; padding:0 10px; display: none;}
#palette_solid>li>ol>li{display: table-cell; vertical-align: middle;}
#palette_solid>li>ol>li:first-child:nth-last-child(4), #palette_model>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;}
#palette_solid>li>ol>li:first-child:nth-last-child(5), #palette_model>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;}
#palette_solid>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} 

#palette_solid>li.selected>ol,#palette_model>li.selected>em,#palette_model>li.selected>input{display: table;}
#palette_solid>li>button{border-radius: 0 !important}
#palette_solid>li:first-child>button{border-radius: 17px 17px 0 0 !important;}
#palette_solid>li:last-child>button{border-radius:0 0 17px 17px !important;}

#palette_solid>li.pen>button{background-image:url(../img/common/ico_draw.png);}
#palette_solid>li.pen.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#04445c;}

#palette_solid>li.blackboard>button{background-image:url(../img/common/ico_mat_blackboard.png);}
#palette_solid>li.blackboard.selected>button{background-image:url(../img/common/ico_mat_blackboard.png); background-color:#04445c;}


#palette_solid>li.color>button{background-image:url(../img/common/ico_color.png);}
#palette_solid>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;}
#palette_solid>li.color>button[value="#333"]:before{background:#333; content:"";}
#palette_solid>li.color>button[value="#3f0"]:before{background:#3f0; content:"";}
#palette_solid>li.color>button[value="#f30"]:before{background:#f30; content:"";}
#palette_solid>li.color>button[value="#fc0"]:before{background:#fc0; content:"";}
#palette_solid>li.color>button[value="#06c"]:before{background:#06c; content:"";}
#palette_solid>li.color>button[value="#eee"]:before{background:#eee; content:"";}
#palette_solid>li.color>ol>li>button {width: 36px;height: 36px;border-radius: 8px;position: relative;border: 2px solid gray;}

#palette_solid>li.color>ol>li:nth-child(1)>button{background:#333;}
#palette_solid>li.color>ol>li:nth-child(2)>button{background:#3f0;}
#palette_solid>li.color>ol>li:nth-child(3)>button{background:#f30;}
#palette_solid>li.color>ol>li:nth-child(4)>button{background:#fc0;}
#palette_solid>li.color>ol>li:nth-child(5)>button{background:#06c;}
#palette_solid>li.color>ol>li:nth-child(6)>button{background:#eee;}

/*정육면체*/
#palette_solid>li.cube>button{background-image:url(../img/common/ico_mat_solid_cube.png);}
#palette_solid>li.cube.selected>button{background-image:url(../img/common/ico_mat_solid_cube.png); background-color:#04445c;}
/*직육면체*/
#palette_solid>li.cuboid>button{background-image:url(../img/common/ico_mat_solid_cuboid.png);}
#palette_solid>li.cuboid.selected>button{background-image:url(../img/common/ico_mat_solid_cuboid.png); background-color:#04445c;}
/*사각기둥*/
#palette_solid>li.square>button{background-image:url(../img/common/ico_mat_solid_square.png);}
#palette_solid>li.square.selected>button{background-image:url(../img/common/ico_mat_solid_square.png); background-color:#04445c;}
/*삼각기둥*/
#palette_solid>li.triangular>button{background-image:url(../img/common/ico_mat_solid_triangular.png);}
#palette_solid>li.triangular.selected>button{background-image:url(../img/common/ico_mat_solid_triangular.png); background-color:#04445c;}
/*오각기둥*/
#palette_solid>li.pentagon>button{background-image:url(../img/common/ico_mat_solid_pentagon.png);}
#palette_solid>li.pentagon.selected>button{background-image:url(../img/common/ico_mat_solid_pentagon.png); background-color:#04445c;}
/*육각기둥*/
#palette_solid>li.hexagonal>button{background-image:url(../img/common/ico_mat_solid_hexagonal.png);}
#palette_solid>li.hexagonal.selected>button{background-image:url(../img/common/ico_mat_solid_hexagonal.png); background-color:#04445c;}
/*원기둥*/
#palette_solid>li.cylinder>button{background-image:url(../img/common/ico_mat_solid_cylinder.png);}
#palette_solid>li.cylinder.selected>button{background-image:url(../img/common/ico_mat_solid_cylinder.png); background-color:#04445c;}


/*계산기*/
#popup>.pop_calc { width: 482px; }
#popup>.pop_calc>header { background-color: #4a96eb !important; }
#popup>.pop_calc>header>button.close { background: transparent url(../img/common/ico_popclose.png) center center no-repeat !important; }
#popup>.pop_calc>section { width: 100%; height: 682px; padding: 18px 0 !important; }

#calcView { position: relative; display: flex; justify-content: right; align-items: center; width: 448px; left: calc(50% - 224px); height: 240px; padding: 20px; background: url(../img/common/calculator/calculator_viewer.png) no-repeat center; }
#calcView #sig1{width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig2{display:none;width:100%;text-align:right;font-size: 45px;font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig3{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig4{display:none;width:100%;text-align:right;font-size: 45px;font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig5{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}

#calcView #calcSum{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px;color:rgb(224, 22, 20); font-family: 'lhb'; letter-spacing: 4px;}

#calcView #neun{display:none;width:100%;padding:5px 5px; text-align:right;font-size: 45px; font-family: 'lhb';  color: black;}
#calcView #sig2.active,#calcView #sig3.active,#calcView #sig4.active,#calcView #sig5.active,#calcView #neun.active,#calcView #calcSum.active{display:inline;}

#calcView #calcViewCover{display: inline-block; height: 100%; text-align: right;line-height:38px;}

#calcBtn { position: relative; width: 454px; left: calc(50% - 454px/2); margin-top: 14px; }
#calcBtn table { width: 100%; }
#calcBtn td { height: 80px; }
#calcBtn td.fontUp { text-align: right; }
#calcBtn td.col { width: 50%; }
#calcBtn td.col:last-child { text-align: right; }
#calcBtn td button { width: 98px; height: 69px; padding: 0; margin: 0; outline: none; color: #171717; font-family: "tmoneyRoundWind-EB"; font-size: 43px; text-align: center; line-height: 1.2; background: url(../img/common/calculator/calculator_button.png) no-repeat center; }
#calcBtn td.fontUp button { width: 109px; color: #fff; background: url(../img/common/calculator/calculator_button_operator.png) no-repeat center; }
#calcBtn td button.delete { font-size: 35px; }
#calcBtn td button.reset { width: 214px; height: 70px; font-size: 0; background: url(../img/common/calculator/calculator_button_reset.png) no-repeat center; }
#calcBtn td button.equal { width: 223px; height: 70px; font-size: 0; background: url(../img/common/calculator/calculator_button_equal.png) no-repeat center; }



/*
#popup>div:not(.std_menu).pop_calc{width: 1100px !important;}
.pop_calc section{padding:0 !important; height: 682px; background: url('../img/common/calc_bg.jpg') !important; background-size: contain !important;}
.pop_calc section>div:nth-of-type(1){display:inline-block; width:100%;height:300px; background: transparent; font-size:0; padding-top: 50px; padding-left: 0px; margin-left:3px;}
.pop_calc section>div:nth-of-type(2){position: absolute; top: 352px; left: 381px; height: 235px;  position:relative; margin-bottom:10px;margin-left:3px;}

#calcView{position: absolute; display: flex; justify-content: right; align-items: center; top: 23px; left: 330px; width:468px;height:245px; }
#calcView #sig1{width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig2{display:none;width:100%;text-align:right;font-size: 45px;font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig3{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig4{display:none;width:100%;text-align:right;font-size: 45px;font-family: 'lhb'; color: black; letter-spacing: 4px;}
#calcView #sig5{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px; font-family: 'lhb'; color: black; letter-spacing: 4px;}

#calcView #calcSum{display:none;width:100%;padding:5px 5px;text-align:right;font-size: 45px;color:rgb(224, 22, 20); font-family: 'lhb'; letter-spacing: 4px;}

#calcView #neun{display:none;width:100%;padding:5px 5px; text-align:right;font-size: 45px; font-family: 'lhb';  color: black;}
#calcView #sig2.active,#calcView #sig3.active,#calcView #sig4.active,#calcView #sig5.active,#calcView #neun.active,#calcView #calcSum.active{display:inline;}

#calcView #calcViewCover{display: inline-block; height: 100%;text-align:right;line-height:38px;}
#calcBtn tbody{}
#calcBtn td{width:61px; margin-right: 26px; margin-bottom: 19px; display:inline-block; background: transparent; color: transparent;}
#calcBtn td:last-child{ }
#calcBtn td button{font-size:30px;width:100%;height:43px; text-align:center;display:inline-block;vertical-align: top;}
#calcBtn td.fontUp button{font-size:40px;}
#calcBtn td.col{width:150px;}*/

/*도형*/
#popup>div:not(.std_menu).pop_shape{width: 1920px !important;top:0px;}
#popup>div.pop_shape>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 0; border:4px solid #ffa333 !important; }
#popup>div.pop_shape>button{position: absolute;top: 65px;left: 1868px;z-index: 101;width: 48px;height: 48px;background: url(../img/common/canvasClose.png) 0 0 no-repeat;font-size: 0;}
#popup.backNone{top:57px;height:968px;}
#popup.backNone:before{background:unset;}
#popup>div.pop_shape.on>div{background:#fff}

/*수 모형*/

#popup>div:not(.std_menu).pop_model{width: 1920px !important;top:0px;}
#popup>div.pop_model>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 0; border:4px solid #ffa333 !important;}
#popup>div.pop_model>button{position: absolute;top: 65px;left: 1868px;z-index: 101;width: 48px;height: 48px;background: url(../img/common/canvasClose.png) 0 0 no-repeat;font-size: 0;}
#popup.backNone{top:57px;height:968px;}
#popup.backNone:before{background:unset;}
#popup>div.pop_model.on>div{background:#fff}

/*입체 도형*/

#popup>div:not(.std_menu).pop_solid{width: 1920px !important;top:0px;}
#popup>div.pop_solid>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 0; border:4px solid #ffa333 !important;}
#popup>div.pop_solid>button{position: absolute;top: 65px;left: 1868px;z-index: 101;width: 48px;height: 48px;background: url(../img/common/canvasClose.png) 0 0 no-repeat;font-size: 0;}
#popup.backNone{top:57px;height:968px;}
#popup.backNone:before{background:unset;}
#popup>div.pop_solid.on>div{background:#fff}
#popup>div.pop_solid>p>button{display:none;position: absolute;top: 840px;left: 798px;z-index: 101;padding:10px 30px;border:4px solid #fff;background-color:#1684d8;border-radius:20px;color:#fff;font-size:40px;font-family: "nseb";}

/*전개도 팝업*/
#popup>div:not(.std_menu).pop_planar{width: 1270px !important;background-color:#fff;}
#popup>div.pop_planar section .swiper-wrapper{height:824px;}
#popup>div.pop_planar section .swiper-pagination{display:none;}
#popup>div.pop_planar section .swiper-slide{line-height:824px;height:824px !important;text-align:center;}
#popup>div.pop_planar section .swiper-slide img{max-height: 750px;vertical-align: middle;}
#popup>div.pop_planar footer{position:absolute;left:45%;bottom:15px;font-size:40px;margin:0 auto;}
#popup>div.pop_planar footer>span{font-family: "nseb";}
#popup>div.pop_planar footer>span:nth-child(2){color:#cdcdcd}
/*준비중 마크표시*/
#p_std .not_ready:after{position: absolute;right:0;top:10%;content:"작업중";text-align:center;font-size:50px;padding:25px 50px;background:red;border:1px solid #fff; z-index:100}




/*map*/
#popup>div.popmap{width:1920px !important; height:1080px; background:#fff;} 
#popup>div:not(.std_menu)>section#map_box{height: 1020px; position: relative; background-repeat: no-repeat; background-size: 100%; background-color: gray; width: 1860px; float: left; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 0; border-bottom-left-radius: 15px; }
#map_box>img{position: absolute; height: auto; width:100%;}
div.pinch-zoom-parent, div.pinch-zoom-container {width : 100%; height : 100%; }
#popup>.popmap>footer{float: left; padding: 0 15px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#popup>.popmap>footer>div{width: 30px; height: 630px; background: url(../img/common/zoom_bg.png) 0 0 no-repeat; display: inline-block; text-align: center; position: relative; }
#popup>.popmap>footer>div>span{position: relative; display: inline-block; width: 50px; height: 600px; position: relative; margin-top: 15px; z-index: 1; left: calc(50% - 25px); cursor: pointer; }
#popup>.popmap>footer>div>button{content: ""; position: absolute; width: 18px; height: 18px; border-radius: 100%; background: #222222; bottom: 0; left: calc(50% - 9px); outline: none; margin-bottom: 6px; cursor: default; margin-left: -1px; }
#popup>.popmap>footer>div>button>p{font-size: 18px; letter-spacing: -.2px; font-weight: 600; padding: 10px 9px; background: #ffd402; position: absolute; top: calc(50%); left: -90px; transform: translateY(-50%); }
#popup>.popmap>footer>div>button>p:after{content: ""; position: absolute; top: 50%; left: 100%; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #ffd402; }
#popup>.popmap>footer>button{font-size: 0; width: 30px; height: 30px; display: block; margin: 25px 0; }
#popup>.popmap>footer>button#btn_zoomout{background: url(../img/common/ico_zoomOut.png) 0 0px no-repeat; }
#popup>.popmap>footer>button#btn_zoomout.dimmed{background-position-y: -30px; }
#popup>.popmap>footer>button#btn_zoomin{background: url(../img/common/ico_zoomIn.png) 0 0 no-repeat; }
#popup>.popmap>footer>button#btn_zoomin.dimmed{background-position-y: -30px; }

#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:1024px;}
body#scorm[data-mode="bodyEbook"] #wrap,
body#scorm[data-mode="bodySbook"] #wrap,
body#scorm[data-mode="bodyPlugins"] #wrap{height:1080px;}
body#scorm.bookStd #show_toolbar{display:block;}
body#scorm #page_std>footer,
body#scorm #page_std>header,
body#scorm #page_std .background .header,
body#scorm #page_std .background .footer,
body#scorm #page_std .background .footer,
body#scorm[data-mode="bodyEbook"] #ebook_lnb_menus >ul>li:nth-child(1),
body#scorm[data-mode="bodyEbook"] #ebook_lnb_menus >ul>li:nth-child(3),
body#scorm[data-mode="bodySbook"] #ebook_lnb_menus,
body#scorm[data-mode="bodyEbook"] #show_toolbar,
body#scorm[data-mode="bodySbook"] #show_toolbar,
body#scorm[data-mode="bodyEbook"] #icons_left>button,
body#scorm[data-mode="bodyEbook"] #icons_right>button,
body#scorm[data-mode="bodyEbook"] #icons_left>div,
body#scorm[data-mode="bodyEbook"] #icons_right>div,
body#scorm #icons_left>button.icon_ebook,
body#scorm #icons_right>button.icon_ebook,
body#scorm[data-mode="bodyEbook"] #scaleup_left_buttons>button,
body#scorm[data-mode="bodyEbook"] #scaleup_right_buttons>button,
body#scorm[data-mode="bodyEbook"] #scaleup_left_buttons>div,
body#scorm[data-mode="bodyEbook"] #scaleup_right_buttons>div,

body#scorm[data-mode="bodySbook"] #btn_bookmark_L,
body#scorm[data-mode="bodySbook"] #btn_bookmark_R,
body#scorm[data-mode="bodySbook"] #page_go_ebook{display:none;}
body#scorm[data-mode="bodyStd"] #page_std>footer{display:block;}/*차시옵션일 경우 prev next 활성화*/
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:-297px;}
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:197px !important;}
.map_wrap .view{box-shadow: #0e8da9 0 0 0 4px inset !important;}


/*** data-grid-kit ***/
#page_std *[data-grid-kit] .gridkit-menu>button,
#page_std *[data-grid-kit] .gridkit-menu>span,
#page_std *[data-grid-kit] .gridkit-menu>ul { display: inline-block; padding: 0; }
#page_std *[data-grid-kit] .gridkit-menu>span { margin-left: 20px; }
#page_std *[data-grid-kit] .gridkit-submenu { position: absolute; }
/* #page_std *[data-grid-kit] .gridkit-submenu>ul { position: relative; width: auto; left: -50%; }
#page_std *[data-grid-kit] .gridkit-submenu>ul>li { position: relative; display: inline-block; width: 30px; text-align: center; border: 1px solid gray; background-color: rgb(256, 256, 256, 50%); } */
#page_std *[data-grid-kit] .gridkit-submenu>ul { position: relative; width: 88px; left: -50%; top: -20px; text-align: center; border: 3px solid #18c1ff; border-radius: 24px; overflow: hidden; background-color: rgb(256, 256, 256, 0.8); }
#page_std *[data-grid-kit] .gridkit-submenu>ul>li { position: relative; display: inline-block; width: 40px; height: 40px; top: 0px; font-size: 0; line-height: 1.0; vertical-align: top; text-align: center; }
#page_std *[data-grid-kit] .gridkit-submenu>ul>li:nth-child(1) { background: url(../img/common/grid_sub01.png) no-repeat center; }
#page_std *[data-grid-kit] .gridkit-submenu>ul>li:nth-child(2) { background: url(../img/common/grid_sub02.png) no-repeat center; }

#page_std *[data-grid-kit] .gridkit-marker { position: absolute; display: none; padding: 0; margin: 0; pointer-events: none; }
#page_std *[data-grid-kit] .gridkit-marker>span { position: relative; display: block; width: 16px; left: -50%; padding: 0; margin: 0; border: 1px dashed #f00; border-radius: 4px; }


/*** 작도보드 (data-rulerboard: 23.07.10) ***/
/* ruler-wrap */
div[data-rulerboard] {
  left: calc((1920px - 1820px) / 2);
  will-change: transform; transform: translateZ(0);
}

/* menu + opener */
div[data-rulerboard] .rulerboard-opener {
  width: 216px;
  height: 65px;
  left: 1660px;
  top: 40px;
  font-size: 0;
  z-index: 1;
}
body div[data-rulerboard] .rulerboard-opener {
  background: url(../img/common/ui/type1/btn_odd_draw_opener.png) no-repeat center/contain;
}
body div[data-rulerboard] .rulerboard-opener:hover {
  background: url(../img/common/ui/type1/btn_odd_draw_opener_on.png) no-repeat center/contain;
}
body.dan2 div[data-rulerboard] .rulerboard-opener,
body.dan4 div[data-rulerboard] .rulerboard-opener,
body.dan6 div[data-rulerboard] .rulerboard-opener {
  background: url(../img/common/ui/type2/btn_even_draw_opener.png) no-repeat center/contain;
}
body.dan2 div[data-rulerboard] .rulerboard-opener:hover,
body.dan4 div[data-rulerboard] .rulerboard-opener:hover,
body.dan6 div[data-rulerboard] .rulerboard-opener:hover {
  background: url(../img/common/ui/type2/btn_even_draw_opener_on.png) no-repeat center/contain;
}

body div[data-rulerboard] .rulerboard-opener.active {
  background: url(../img/common/ui/type1/btn_odd_draw_closer.png) no-repeat center/contain;
}
body div[data-rulerboard] .rulerboard-opener.active:hover {
  background: url(../img/common/ui/type1/btn_odd_draw_closer_on.png) no-repeat center/contain;
}
body.dan2 div[data-rulerboard] .rulerboard-opener.active,
body.dan4 div[data-rulerboard] .rulerboard-opener.active,
body.dan6 div[data-rulerboard] .rulerboard-opener.active {
  background: url(../img/common/ui/type2/btn_even_draw_closer.png) no-repeat center/contain;
}
body.dan2 div[data-rulerboard] .rulerboard-opener.active:hover,
body.dan4 div[data-rulerboard] .rulerboard-opener.active:hover,
body.dan6 div[data-rulerboard] .rulerboard-opener.active:hover {
  background: url(../img/common/ui/type2/btn_even_draw_closer_on.png) no-repeat center/contain;
}

/** 작도보드 기본 설정 **/
div[data-rulerboard] .rulerboard-menu {
  width: auto;
  height: 52px;
  margin-top: -8px;
  padding-right: 2px;
  border-radius: 12px;
  border: #fadabf solid 1px;
  background-color: #ffeee0;
  z-index: 0;
}
body.dan2 div[data-rulerboard] .rulerboard-menu,
body.dan4 div[data-rulerboard] .rulerboard-menu,
body.dan6 div[data-rulerboard] .rulerboard-menu {
  border: #d2ebe8 solid 1px;
  background-color: #e2f4f2;
}

div[data-rulerboard] .rulerboard-menu>div {
  position: relative;
  display: inline-block;
  padding: 12px 16px 8px 0;

  color: #818181;
  font-family: "ui-bold";
  font-size: 25px;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle;
}
div[data-rulerboard] .rulerboard-menu>div::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-right: 16px;
  vertical-align: middle;
}
div[data-rulerboard] .rulerboard-menu>div:not(:first-child)::before {
  background-color: #818181;
}

body div[data-rulerboard] .rulerboard-menu>div:hover,
body div[data-rulerboard] .rulerboard-menu>div.active {
  color: var(--color-header01-bg-dark);
}
body.dan2 div[data-rulerboard] .rulerboard-menu>div:hover,
body.dan4 div[data-rulerboard] .rulerboard-menu>div:hover,
body.dan6 div[data-rulerboard] .rulerboard-menu>div:hover {
  color: var(--color-header02-bg-dark);
}
body.dan2 div[data-rulerboard] .rulerboard-menu>div.active,
body.dan4 div[data-rulerboard] .rulerboard-menu>div.active,
body.dan6 div[data-rulerboard] .rulerboard-menu>div.active {
  color: var(--color-header02-bg-dark);
}

div[data-rulerboard] .rulerboard-menu>div.deactive {
  background-color: lightgrey !important;
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-text::after {
  content: '\D14D\C2A4\D2B8';  /*'텍스트';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-stamp::after {
  content: '\C2A4\D0EC\D504'; /*'스탬프';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-line::after {
  content: '\C120'; /*'선';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-circle::after {
  content: '\C6D0';  /*'원';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-3::after {
  content: '\C0BC\AC01\D615'; /*'3각형';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-4::after {
  content: '\C0AC\AC01\D615'; /*'4각형';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-6::after {
  content: '\C721\AC01\D615'; /*'6각형';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-freedraw::after {
  content: '\D39C'; /*'펜';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-eraser::after {
  content: '\C9C0\C6B0\AC1C'; /*'지우개';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-protractor::after {
  content: '\AC01\B3C4\AE30'; /*'각도기';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-p2::after {
  content: '\AC01\B3C4\AE30'; /*'고급';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-compass::after {
  content: '\CEF4\D37C\C2A4'; /*'컴퍼스';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-ruler::after {
  content: '\C790'; /*'자';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-triangle::after {
  content: '\C0BC\AC01\C790'; /*'삼각자';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-square::after {
  content: '\0034\0035\b3c4\0020\c0bc\ac01\c790'; /*'45도 삼각자';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-deactive::after {
  content: '\C7A0\ADF8\AE30'; /*'잠그기';*/
}

div[data-rulerboard] .rulerboard-menu .rulerboard-btn-delete::after {
  content: '\C0AD\C81C'; /*'삭제';*/
}

div[data-rulerboard] .rulerboard-palette {
  height: 40px;
  text-align: center;
  padding: 4px 2px 0;
  border-radius: 24px;
  background-color: #ebebeb;
  border: 2px solid #dbdbdb;
}

div[data-rulerboard] .rulerboard-palette>span {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 0 2px;
  border-radius: 50%;
  border: 2px solid rgba(256, 256, 256, 1);
}
div[data-rulerboard] .rulerboard-palette>span.active {
  background: url(../img/common/ui/type1/palette_active.png) no-repeat center/contain;
}

div[data-rulerboard] .rulerboard-notice-wrap {
  font-family: "ui-bold";
}

/*** 학습창 공통 작도보드 ***/
#std-rulerboard { position: absolute; width: 100%; height: calc(100% - 57px); left: 0px; top: 57px; box-shadow: none; z-index: 3; /*border: 1px solid red;*/ }
#std-rulerboard .rulerboard-opener { display: none; }
#std-rulerboard .rulerboard-menu { width: 0px; height: 0px; border: none; background: none; }

/*** 학습창 공통 작도보드 별도 버튼 ***/
#page_std .btn-ruler-wrap {
  position: absolute;
  right: 100px;
  top: -24px;
  padding: 12px;
  border: 3px solid var(--color-ui01-medium);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px -10px 30px -20px inset;
}
body[data-bcode="mat61"] #page_std .btn-ruler-wrap,
body[data-bcode="mat62"] #page_std .btn-ruler-wrap { border: 3px solid var(--color-ui02-medium); }

#page_std .btn-ruler { position: relative; display: inline-block; width: 64px; height: 54px; font-size: 0px; }
#page_std .btn-ruler:not(:first-child):not(.btn-calc)::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 47px;
  left: -2px;
  top: 3px;
  background: #f1f1f1;
}
#page_std .btn-ruler.btn-ruler-p { background: url(../img/common/ui/btn_ruler/btn_ruler_p.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-p:hover { background: url(../img/common/ui/btn_ruler/btn_ruler_p_on.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-r { background: url(../img/common/ui/btn_ruler/btn_ruler_r.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-r:hover { background: url(../img/common/ui/btn_ruler/btn_ruler_r_on.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-s { background: url(../img/common/ui/btn_ruler/btn_ruler_s.png) no-repeat center/auto; width: 84px; }
#page_std .btn-ruler.btn-ruler-s:hover { background: url(../img/common/ui/btn_ruler/btn_ruler_s_on.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-t { background: url(../img/common/ui/btn_ruler/btn_ruler_t.png) no-repeat center/auto; width: 72px; }
#page_std .btn-ruler.btn-ruler-t:hover { background: url(../img/common/ui/btn_ruler/btn_ruler_t_on.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-x { background: url(../img/common/ui/btn_ruler/btn_ruler_x.png) no-repeat center/auto; }
#page_std .btn-ruler.btn-ruler-x:hover { background: url(../img/common/ui/btn_ruler/btn_ruler_x_on.png) no-repeat center/auto; }

#page_std .btn-ruler.btn-calc {
  position: absolute;
  right: 100px;
  top: -24px;
  width: 84px;
  height: 84px;
  border: 3px solid var(--color-ui01-medium);
  border-radius: 14px;
  background: url(../img/common/ui/btn_ruler/btn_ruler_c.png) no-repeat center/auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px -10px 30px -20px inset;
}
body.dan2 #page_std .btn-ruler.btn-calc,
body.dan4 #page_std .btn-ruler.btn-calc,
body.dan6 #page_std .btn-ruler.btn-calc { border: 3px solid var(--color-ui02-medium); }

/* START 익힘책 계산기 버튼 설정 */
#page_workbook .btn-ruler.btn-calc {
  position: absolute;
  right: 100px;
  top: -24px;
  width: 84px;
  height: 84px;
  border: 3px solid var(--color-ui01-medium);
  border-radius: 14px;
  background: url(../img/common/ui/btn_ruler/btn_ruler_c.png) no-repeat center/auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px -10px 30px -20px inset;
}
body.dan2 #page_workbook .btn-ruler.btn-calc,
body.dan4 #page_workbook .btn-ruler.btn-calc,
body.dan6 #page_workbook .btn-ruler.btn-calc { border: 3px solid var(--color-ui02-medium); }
/* END 익힘책 계산기 버튼 설정 */


#page_std .btn-ruler-wrap .btn-ruler.btn-calc {
  position: relative; display: inline-block; width: 64px; height: 54px;
  right: auto; top: auto; border: 0px; box-shadow: none;
}
body[data-bcode="mat61"] #page_std .btn-ruler-wrap .btn-ruler.btn-calc,
body[data-bcode="mat62"] #page_std .btn-ruler-wrap .btn-ruler.btn-calc { border: none; }


/*** 단위 글꼴 처리 ***/
.danBlist {
  font-family: "kopubBatangB" !important;
  font-style: normal;
}

/*** quiz ***/
#popup>div.popcon.quiz { border-radius: 25px; }
#popup>div.popcon.quiz header { display: none; height: 0; margin: 0; padding: 0; }
#popup>div.popcon.quiz section>button.close { position: absolute; display: block; width: 50px; height: 50px; right: 15px; top: 15px; background: rgba(256, 0, 0, 0); }
#popup>div.popcon.quiz section { padding: 10px; margin: 0; min-height: 56px; max-height: 1020px; border-radius: 28px; }
body.dan1 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui01-light); }
body.dan2 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui02-light); }
body.dan3 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui01-light); }
body.dan4 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui02-light); }
body.dan5 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui01-light); }
body.dan6 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui02-light); }
body.dan7 #popup>div.popcon.quiz section { border: 4px solid var(--color-ui01-light); }


/*익힘 정답 스크롤 일때*/
#popup>div.popcon.quiz section> h4>img{width:calc(100% - 1px);}
#popup>div.popcon.quiz section>.body{display:block;width:100%;}


/*익힘 풀이 pdf 220% 확대 캡쳐*/
#popup>div.popcon.quiz section>button.explan { position: absolute; display: block; width: 150px; height: 50px; right: 45px; bottom: 10px;color:#fff;background-color: #f8a865;border-radius: 20px;text-align:center;font-family: 'ui-regular';}
.dan1 #popup>div.popcon.quiz section>button.explan,
.dan3 #popup>div.popcon.quiz section>button.explan,
.dan5 #popup>div.popcon.quiz section>button.explan{background-color: var(--color-ui01-light);}

.dan2 #popup>div.popcon.quiz section>button.explan,
.dan4 #popup>div.popcon.quiz section>button.explan,
.dan6 #popup>div.popcon.quiz section>button.explan{background-color: var(--color-ui02-light);}

/*익힘책 이북 아이콘 홀수 페이지 예외처리*/
body.dan1.boundary #popup>div.popcon.quiz section>button.explan,
body.dan3.boundary #popup>div.popcon.quiz section>button.explan,
body.dan5.boundary #popup>div.popcon.quiz section>button.explan{background-color: var(--color-ui02-light);}
body.dan2.boundary #popup>div.popcon.quiz section>button.explan,
body.dan4.boundary #popup>div.popcon.quiz section>button.explan,
body.dan6.boundary #popup>div.popcon.quiz section>button.explan{background-color: var(--color-ui01-light);}


#popup>div.popcon.quiz section>.layer{display:none;position: absolute;left:15px;top:67px;width:calc(100% - 24px);height:calc(100% - 80px);border:0px solid #333;background-color:#fff;}
#popup>div.popcon.quiz section>.layer.active{display:block;}
#popup>div.popcon.quiz section>.layer>.scrollbar img{padding-top:50px;margin-left:50px}
#popup>div:not(.std_menu)>section .scrollbar {
  width: 100%;  
  height: 100%;  
  overflow-y: auto;
  overflow-x: hidden;
}
#popup>div:not(.std_menu)>section .scrollbar-con{
  padding-right: 15px;
}
/* scrollbar expansion */
#popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar{
  width: 10px;
  background-color: #FFF;
}
#popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar {
  width: 10px;
}
#popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb {
  background-color: #f8a865;  
  border-radius: 10px;
}
.dan1 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb,
.dan3 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb,
.dan5 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb {background-color: var(--color-ui01-light);}

.dan2 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb,
.dan4 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb,
.dan6 #popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-thumb {background-color: var(--color-ui02-light);}


#popup>div:not(.std_menu)>section .scrollbar::-webkit-scrollbar-track {
  background-color: grey;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px white;
}


/*** #page_loading ***/
#page_loading {
  position: absolute; display: none; left:50%; height: 100%; z-index: 101; 
  transform: translate3d(0px, 0px, 0px);
}
#page_loading.active { display: flex; justify-content: center; align-items: center; }
#page_loading .image {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border: 10px solid rgba(255,255,255,.2);
  border-radius: 50%;
  border-top-color: rgba(51,51,51,.5);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}