@charset "UTF-8";

/*
	***** 공통 스타일 *****
*/


body {margin:0; border:0; padding:0;}

#tsViewer {position:relative; font-family: 'NotoSansR'; font-size: 16px; color: #333; line-height: 1.5; margin: 0; padding: 0; text-decoration: none; list-style: none; border: 0; }
#tsViewer ul, li {list-style: none; padding: 0; margin: 0;}
#tsViewer a {text-decoration: none; color: #333;}



#tsViewer .contentWrap {position: relative; width: 1365px; height: 768px; overflow:hidden;}


/* pageTitle */
#tsViewer .pageTitle {position: fixed; width:100%; display: flex; justify-content: center; align-items: center; height: 38px; z-index:10; background-color:#f6e7d4;}
#tsViewer .pageTitle .btnShowAllChapter {
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:50%;
    left:15px;
    transform:translateY(-50%);
    width: 74px;
    height: 26px;
    font-size: 13px;
    color: #ffffff;
    font-family: NotoSansM;
    border-radius: 5px;
    cursor:pointer;
    background-color: #289bff;
}

#tsViewer .pageTitle .openMind::before {/*content: url("../images/icon_openMind.png");*/ display: inline-block; width: 18px; height: 18px; margin-right: 3px;}
#tsViewer .pageTitle .openMind {display: flex; align-items: center; font-size: 13px; color: #333; font-family: 'NotoSansB';}
#tsViewer .pageTitle .textBook {position:relative; font-family: 'NotoSansB'; color: #333333; font-size: 13px; margin-left: 20px; padding-right:10px;}
#tsViewer .pageTitle .textBook::after {position:absolute; content: ''; width:1px; height:10px; top:50%; transform: translateY(-50%); left:-10px; background-color:#a7a7a7;}
#tsViewer .pageTitle .pagination {position:relative; font-family: 'NotoSansB'; font-size:13px; color: #000; margin-left:10px;}
#tsViewer .pageTitle .pagination::after {position:absolute; content: ''; width:1px; height:10px; top:50%; transform: translateY(-50%); left:-10px; background-color:#a7a7a7;}

#tsViewer .pageTitle .btnCopyUrl {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 39px;
    top: 8px;
    width: 140px;
    height: 22px;
    font-size: 13px;
    color: #333333;
    font-family: NotoSansB;
    letter-spacing: -1px;
    border-radius:5px;
    cursor:pointer;
    background-color:#ffa200;
}
#tsViewer .pageTitle .btnCopyUrl > img {margin-right:5px;}


/* contentsStudy */
#tsViewer .contentsStudy {position: absolute; width: inherit; left: 0; bottom: 0; height: 38px; line-height: 38px; background-color: #dddee0; color: #fff; z-index:10;}
#tsViewer .contentsStudy .listInner {position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: inherit;}

#tsViewer .contentsStudy .listInner .navBox {position:absolute; left: 0; display: flex; flex-direction: row; align-items: center; margin-left: 120px;}
#tsViewer .navMenu {position:absolute; bottom:6px; left:15px; z-index:110; display:flex; justify-content: center; align-items: center; width:90px; height:26px; margin-right: 21px; cursor: pointer; border-radius:5px; background-color:#333333;}
#tsViewer .navMenu img {}
#tsViewer .navMenu span {margin-left: 5px; font-size: 13px; color:#ffffff; font-family: 'NotoSansM';}
#tsViewer .navMenu.on {background-color:#ae7c65;}

#tsViewer .contentsStudy .listInner .listBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 26px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-right: 3px;
    font-size: 13px;
    background-color: #999999;
    border-radius: 5px;
    font-family: 'NotoSansM';
    cursor: pointer;
}

#tsViewer .contentsStudy .listInner .listBtn:last-child {margin-right: 0;}

#tsViewer .contentsStudy .listInner .listBtn.on {background-color:#ff6e0d;}

/* pagination */
#tsViewer .contentsStudy .pagination {position: absolute; left: 50%; transform: translateX(-50%);}
#tsViewer .contentsStudy .pagination .pageArrow {cursor: pointer;}
#tsViewer .contentsStudy .pagination .pageArrow img {vertical-align: -1px;}
#tsViewer .contentsStudy .pagination .pageArrow.disabled {pointer-events: none; opacity:0.3;}
#tsViewer .contentsStudy .pagination .pageBox {color:#333333; font-family:NotoSansM; margin: 0 10px;}
#tsViewer .contentsStudy .pagination .pageBox span {font-size: 15px;}
#tsViewer .contentsStudy .pagination .pageBox span.currentPageNum {font-family: 'NotoSansB';}

/*btnTool 공통 클래스*/
#tsViewer .btnTool {display: flex; justify-content: center; align-items: center; width: 115px; height: 22px; text-align: center; font-size: 13px; border-radius: 5px; font-family: 'NotoSansB'; cursor: pointer;}

/* 수업도구 열기 */
#tsViewer .contentsStudy .toolBox {position: absolute; right: 0; top:9px; z-index: 5;}
#tsViewer .contentsStudy .openTool {display: none; margin-right: 13px; background-color: #ff6600;}
#tsViewer .contentsStudy .openTool.active {display: flex; background-color: #ff6600;}
#tsViewer .contentsStudy .openTool::after {content: url("../images/icon_openTool.png"); width: 15px; height: 15px; line-height: 22px; margin-left: 3px; padding-bottom:2px;}

/* 수업도구 닫기 */
#tsViewer .contentsStudy .closeTool {background-color: #717171; margin-right: 13px;}
#tsViewer .contentsStudy .closeTool.active {display: none;}
#tsViewer .contentsStudy .closeTool::after {content: url("../images/icon_closeTool.png"); width: 15px; height: 15px; line-height: 22px; margin-left: 3px; padding-bottom:2px;}

#tsViewer .contentsStudy .closeToolList {position: absolute; right: 0; display: flex; align-items: center; width: 452px; background-color: #ff6e0d; transform: translateX(0); transition: .5s;}
#tsViewer .contentsStudy .closeToolList.active {transform: translateX(528px);}
#tsViewer .contentsStudy .closeToolList span {margin-right: 10px; font-size: 14px; letter-spacing: -1px; cursor: pointer;}
#tsViewer .contentsStudy .closeToolList span:first-child {margin-left: 25px;}
#tsViewer .contentsStudy .closeToolList span a {color: #fff;}
#tsViewer .contentsStudy .closeToolList span a:hover {margin-bottom: 7px; color: #ffe032;}

#tsViewer .contentsStudy .closeToolList .zoomText {display:flex; justify-content: center; align-items: center; width:50px; height:22px; font-size:12px; color:#333333; font-family:NotoSansM; margin-right:0; margin-left:14px; border-radius:5px; background-color:#ffffff;}
#tsViewer .contentsStudy .closeToolList .btnZoomIn,
#tsViewer .contentsStudy .closeToolList .btnZoomOut {display:flex; justify-content: center; align-items: center; width:24px; height:24px; border-radius:5px; margin-right:0; margin-left:3px; background-color:#a34608;}


/* 학습목차 클릭시 모달 */
#tsViewer .modalContainer {position: fixed; top: 38px; transform: translateX(-100%); transition: .5s; display: flex; justify-content: center; align-items: center; height: 692px; z-index:110;}
#tsViewer .modalContainer.active {transform: translateX(0);}
#tsViewer .modalContainer .modalWhiteBg {position: relative; background-color: #ffffff;}
#tsViewer .modalContainer .modalWhiteBg .modalInnerWrap {height: 100%; box-sizing: border-box;}


/* 모달창 도입, 전개 */
#tsViewer .modalContainer .modalBox {width:373px; padding:10px; padding-left:30px; padding-right:24px; box-sizing:border-box; border-bottom:solid 3px #f2f2f4;}
#tsViewer .modalContainer .modalBox:last-child {border-bottom: 0;}
#tsViewer .modalContainer .modalBox .cl_headLineBox {margin-bottom: 7px;}
#tsViewer .modalContainer .modalBox .cl_headLineBox .headLineTxt {
    display:inline-block;
    padding:6px 8px;
    font-size: 15px;
    font-family: 'NotoSansB';
    color: #333333;
    box-sizing: border-box;
    cursor: pointer;
    border-left:solid 4px #ae7c65;
    background-color:#efe5e0;
}

#tsViewer .modalContainer .modalBox ul {margin: 0 auto; box-sizing: border-box;}

#tsViewer .modalContainer .modalBox .txtWrap {font-family: 'NotoSansB'; cursor: pointer; margin-bottom: 5px;}
#tsViewer .modalContainer .modalBox .txtWrap .contentTitleCell {display:flex; }
#tsViewer .modalContainer .modalBox .txtWrap .textbookPage {font-size:14px; color: #aaaaaa; font-family:NotoSansM; padding-left:15px; box-sizing: border-box;}
#tsViewer .modalContainer .modalBox .txtWrap:hover span,
#tsViewer .modalContainer .modalBox .txtWrap.on span{ color:#ff6600;}
#tsViewer .modalContainer .modalBox .txtWrap:hover .textbookPage,
#tsViewer .modalContainer .modalBox .txtWrap.on .textbookPage { color:#ff6600;}
#tsViewer .modalContainer .modalBox .txtWrap .num {width:12px; font-size:14px; color:#333333; font-family:NotoSansR; margin-right: 4px; box-sizing: border-box;}
#tsViewer .modalContainer .modalBox .txtWrap .title {flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:14px; color:#333333; font-family:NotoSansR;}


/*학습목차 딤머*/
#tsViewer .studyListDimmer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; background-color:rgba(0,0,0,0.3);}


/*mCustomerScrollbar*/
#tsViewer .mCSB_inside > .mCSB_container {margin-right:0;}
#tsViewer .mCustomScrollBox {padding-right:8px; box-sizing: border-box;}

#tsViewer .mCSB_scrollTools {width:8px;}
#tsViewer .mCSB_dragger_bar {width:4px; margin-left:2px; margin-right:2px; background-color:#cccccc;}
#tsViewer .mCSB_draggerRail {width:8px;}



/*
    *** 컨텐츠컨테이너
*/
#tsViewer .contentArea {position:relative;}
#tsViewer .contentContainer {position:absolute; top:0; left:0; width:1365px; height:768px; transform-origin: top left;}
#tsViewer .contentContainer iframe {width:100%; height:100%; border:0;}



/*
    *** 미니맵
*/
.miniMap {position:absolute; bottom:43px; right:5px; z-index:10; width:150px; height:84px; overflow: hidden; border:solid 2px #cccccc; opacity:0; pointer-events: none; background-color:#121212;}
.miniMap .viewArea {position:absolute; border:solid 2px #ff0000; width:100%; height:100%; box-sizing: border-box; z-index:10;}
.miniMap .miniIframe {position:relative; top:-342px; left:-607px; width:1365px; height:768px; transform:scale(0.1098901098901099); background-color:#fafafa;}
.miniMap .miniIframe iframe {width:100%; height:100%; pointer-events: none; border:0;}



/*
    *** 로더
*/
#tsViewer .preloader {display:flex; justify-content:center; align-items:center; position:fixed; top:38px; left:0; width:100%; height:calc(100% - 38px - 38px); z-index:100; background-color:#f6e7d4;}



/*
    *** jr 뷰어 설정
*/
#tsViewer.viewerJr .modalContainer {display:none;}
#tsViewer.viewerJr .contentsStudy .navBox {display:none;}
#tsViewer.viewerJr .contentsStudy .pagination {display:none;}





/*
    *** 전체 차시
*/
.fullChapter {display:none; position:fixed; top:38px; left:0; z-index:200; width:100%; height:calc(100% - 38px); overflow:hidden;}

.fullChapter .fullChapterWin {position:relative; z-index:10; display:flex; height:420px; transform:translateY(-100%); transition:all 0.5s ease-out; background-color:#f2f2f4;}
.fullChapter .fullChapterWin > div {margin-right:9px;}
.fullChapter .fullChapterWin > div:last-child {margin-right:0;}

.fullChapter.on .fullChapterWin {transform:translateY(0);}


/*닫기버튼*/
.fullChapter .btnCloseWin {position:absolute; bottom:-25px; right:0; height:auto; cursor:pointer;}


/*리스트박스*/
.fullChapter .listBox {height:100%; overflow: auto; background-color:#ffffff;}
.fullChapter .listBox .list {height:auto; font-size:14px; color:#7b7b7b; font-family:NotoSansR; letter-spacing: -1px; padding:15px 20px; cursor:pointer;}
.fullChapter .listBox .list:hover {background-color:#feefe5;}
.fullChapter .listBox .list.on {color:#ff6e0d;}

.fullChapter .listBox::-webkit-scrollbar {width: 8px;}
.fullChapter .listBox::-webkit-scrollbar-thumb {width:4px; background-color: #cccccc; border: 2px solid #ffffff;}


/*학년*/
.fullChapter .gradeArea {display:flex; flex-direction:column; width:190px;}
.fullChapter .gradeArea .semesterArea {display:flex; justify-content: center; align-items: center; height:50px; margin-bottom:9px; background-color:#ffffff;}
.fullChapter .gradeArea .semesterArea > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 29px;
    font-size: 12px;
    color: #a7a7a7;
    font-family: NotoSansB;
    border:solid 1px #e0e0e0;
    border-radius:30px;
    cursor:pointer;
}
.fullChapter .gradeArea .semesterArea > div:first-child {margin-right:5px;}
.fullChapter .gradeArea .semesterArea > div.on {color:#ff6e0d; border-color:#ff6e0d;}

.fullChapter .gradeArea .listBox {height:auto; flex:1;}


/*과목*/
.fullChapter .subjectArea {width:132px;}


/*챕터L,M*/
.fullChapter .chapterAreaL, .fullChapter .chapterAreaM {flex:1;}


/*챕터S*/
.fullChapter .chapterAreaS {width:480px;}


/*전체차시 딤머*/
.fullChapter .fullChapterDimmer {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3);}






/*
    *** 그리기 팔레트
*/
.drawPalette {
    position: absolute;
    top: 650px;
    left: 750px;
    display: none;
    justify-content: center;
    align-items: center;
    width: 616px;
    height: 75px;
    border-radius: 10px;
    border: solid 2px #aaaaaa;
    box-sizing: border-box;
    cursor:move;
    background-color: #f5f5f5;
    z-index:100;
}
.drawPalette div {height:auto;}

.drawPalette .divider {height:30px; width:1px; margin:0 15px; background-color:#d5d2d2;}

.drawPalette .toolBox {display:flex; align-content: center;}

.drawPalette .selectable .default {display:block;}
.drawPalette .selectable .select {display:none;}
.drawPalette .selectable.on .default {display:none;}
.drawPalette .selectable.on .select {display:block;}

.drawPalette img {display:block;}

/*펜선택 영역*/
.drawPalette .drawTool > div {margin-right:5px;}
.drawPalette .drawTool div.selectable,
.drawPalette .drawTool div.delete {display:flex; justify-content: center; align-items: center; width:40px; height:40px; border-radius:50%; cursor:pointer;}
.drawPalette .drawTool div.selectable.on {background-color:#ff6e0d;}

.drawPalette .penToolWrap {position:relative;}
.drawPalette .penTypeBalloon {
    position: absolute;
    top: 0;
    left: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -100%);
    width: 302px;
    height: 102px;
    padding-bottom: 15px;
    box-sizing: border-box;
    cursor:auto;
    background-image: url("../images/draw_penBalloon.png");
}
.drawPalette .penTypeBalloon .penType {display:flex; justify-content:center; align-items:center; width:25px; height:25px; opacity:0.3; margin:0 8px; cursor:pointer;}
.drawPalette .penTypeBalloon .penType.on {opacity:1;}
.drawPalette .penToolWrap:hover .penTypeBalloon {display:flex;}
.drawPalette .delete {margin-right:0;}

/*컬러선택 영역*/
.drawPalette .colorTool .color {position:relative; width:25px; height:25px; border-radius:50%; margin:0 4px; cursor:pointer;}
.drawPalette .colorTool .color.on:after {content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; background-image:url("../images/draw_colorCheck.png");}
.drawPalette .colorTool .color1 {background-color:#e71419;}
.drawPalette .colorTool .color2 {background-color:#f5cd1e;}
.drawPalette .colorTool .color3 {background-color:#9bc82d;}
.drawPalette .colorTool .color4 {background-color:#134b98;}
.drawPalette .colorTool .color5 {background-color:#000000;}

/*굵기선택 영역*/
.drawPalette .thicknessTool {display:flex; justify-content: center; align-items:center;}
.drawPalette .thickness {position:relative; width:20px; height:20px; margin:0 4px; cursor:pointer;}
.drawPalette .thickness:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:50%; background-color:#9f9f9f;}
.drawPalette .thickness.on:after {background-color:#1e1e1e;}

.drawPalette .thickness.size1 {width:10px; heigth:10px;}
.drawPalette .thickness.size1:after {width:5px; height:5px;}
.drawPalette .thickness.size2:after {width:10px; height:10px;}
.drawPalette .thickness.size3:after {width:15px; height:15px;}
.drawPalette .thickness.size4:after {width:20px; height:20px;}

/*닫기버튼*/
.drawPalette .btnClosePalette {cursor:pointer;}



/*그리기 캔버스*/
.drawBoard {display:none; position:absolute; top:0; left:0; padding-top:38px;}