﻿@charset "UTF-8";


* {padding:0; margin:0; border:0; line-height:1;}
body {height:100vh; overflow: hidden; background-color:#ebeaeb;}



/*
    ************************************* 공통 레이아웃 *************************************
*/
.contentWrapper.dataRoom {position:absolute; top:0; left:0; width:1210px; height:895px; transform-origin: top left; background-image:url("../images/bg_wood.png")}

.handCursor {cursor:pointer;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

textarea:focus {
    outline: none;
}
button:focus {
    outline: none;
}
input:focus {
    outline: none;
}
select:focus {
    outline: none;
}

a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}




/*
    ************************************* 공통 요소 ************************************
*/

/*스크롤바 타입1*/
.scrollType1::-webkit-scrollbar {
    width: 5px;
}
.scrollType1::-webkit-scrollbar-thumb {
    background-color: #3da4c9;
    border-radius: 10px;
    background-clip: padding-box;
}
.scrollType1::-webkit-scrollbar-track {
    background-color: #ebdece;
    border-radius: 10px;
}
.scrollType1::-webkit-scrollbar-button { display: none; }


/*텍스트 그림자*/
.commonTextShadow {text-shadow:2px 2px 0 rgba(0,0,0,0.15);}


/*버튼 스타일*/
.raisedButton {
    width: 220px;
    height: 34px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    font-family: KoPubDotum;
    font-weight: 700;
    border-radius:20px;
    padding-bottom:2px;
    box-shadow: 0 -2px 0 #84930b inset, 0 4px 8px rgba(0,0,0,0.6);
    background-color:#bdd210;
    cursor:pointer;
}
.raisedButton:hover {background-color: #cee515;}
.raisedButton.colorType2 {
    box-shadow: 0 -2px 0 #747d35 inset, 0 4px 8px rgba(0, 0, 0, 0.6);
    background-color: #a6b34c;
}
.raisedButton.colorType2:hover {background-color: #c0cf59;}


/*아이콘 형식*/
.icon {position:relative; display:inline-block; width:18px; height:18px; cursor:pointer; margin-right:10px;}
.icon:last-child {margin-right:0;}
.icon.on:after {content: ''; position:absolute; top:-11px; left:-4px; width:26px; height:33px; background-image:url("../images/checkMark.png");}
.icon.iconPdf {background-image:url("../images/icon_pdf.png");}
.icon.iconPpt {background-image:url("../images/icon_ppt.png");}
.icon.iconZip {background-image:url("../images/icon_zip.png");}
.icon.iconFolder {background-image:url("../images/icon_folder.png");}
.icon.iconVideo {background-image:url("../images/icon_video.png");}
.icon.iconHwp {background-image:url("../images/icon_han.png");}

.iconText {font-size:14px; color:#555555; font-family:KoPubDotum; font-weight:500; line-height:1; vertical-align: 4px; margin-right:15px;}
.iconText:last-child {margin-right:0;}



/*
    *********************************************************************************************
*/

/*
    *** 상단바
*/
.topTitleBar {display:flex; justify-content:space-between; align-items:center; height:61px;}
.topTitleBar .title {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #ffffff;
    font-family: VisangHT;
    font-weight: 700;
    margin-left: 43px;
}
.topTitleBar .title span {font-size:20px; color:#feffa1; font-family:KoPubDotum; font-weight:700; margin-left:10px;}
.topTitleBar .topButtonArea {display:flex; align-items: center; margin-right:22px;}
.topTitleBar .topButtonArea .vBar {width:1px; height:28px; margin:0 20px; background-color:rgba(255,255,255,0.4);}
.topTitleBar .topButtonArea .button {cursor:pointer;}
.topTitleBar .topButtonArea .button:hover {opacity:0.7;}



/*
    *** 공통 자료
*/
.commonData {width:1188px; margin-left:11px; /*background-color:rgba(0,0,0,0.2)*/}
.commonData .titleArea {display:flex; justify-content:space-between; align-items:flex-end; height:46px;}
.commonData .titleArea .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100%;
    font-size: 18px;
    color: #ffffff;
    font-family: KoPubDotum;
    font-weight: 700;
}
.commonData .titleArea .buttonCell {margin-right:10px;}

.commonData table {width:1168px; border-collapse:collapse; border-spacing: 0; margin:0 auto; margin-top:10px; border-radius:3px 3px 0 0; overflow: hidden; background-color:#ffffff;}
.commonData table th {height:40px; width:14.2857142%; font-size:16px; color:#333333; font-family:KoPubDotum; font-weight:700; border-right:solid 1px #c2cab5; background-color:#f3fce2;}
.commonData table th:last-child {border-right:0;}
.commonData table td {height:40px; width:14.2857142%; font-size:0; text-align:center; vertical-align: middle; border-right:solid 1px #c2cab5; box-shadow: 0 -2px 2px rgba(0,0,0,0.1) inset; background-color:#ffffff;}
.commonData table td:last-child {border-right:0;}


/*
    *** 단원별 자료
*/
.lessonData {width:1188px; margin-left:11px; margin-top:8px; /*background-color:rgba(0,0,0,0.2)*/}
.lessonData .sectionButtonArea {display:flex; justify-content:space-between; align-items:flex-end; height:46px; margin-bottom:10px;}
.lessonData .sectionButtonArea .sectionButtonGroup {display:flex; height:100%;}
.lessonData .sectionButtonArea .sectionButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100%;
    font-size: 18px;
    color: #ffffff;
    font-family: KoPubDotum;
    font-weight: 700;
    cursor:pointer;
}
.lessonData .sectionButtonArea .sectionButton:hover,
.lessonData .sectionButtonArea .sectionButton.on {color:#fff55c; background-image:url("../images/selectedBg.png");}
.lessonData .sectionButtonArea .buttonCell {margin-right:10px;}

.lessonData .headerTable {
    width: 1168px;
    height: 80px;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    background-color: #e7fcf6;
}
.lessonData .headerTable td {border-bottom:solid 1px #b5caca;}
.lessonData .headerTable .itemTitle {
    width: 585px;
    font-size: 18px;
    color: #333333;
    font-family: KoPubDotum;
    font-weight: 700;
    text-align: center;
    border-right: solid 1px #b5caca;
}
.lessonData .headerTable .cellTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #333333;
    font-family: VisangHT;
    font-weight: 700;
    border-bottom:solid 1px #cbe2e2;
}
.lessonData .headerTable .selectButtonArea {display:flex;}
.lessonData .headerTable .selectButtonArea > div {display:flex; justify-content: center; align-items:center; width:96px; height:40px; box-sizing: border-box; border-right:solid 1px #cbe2e2;}
.lessonData .headerTable .selectButtonArea > div.disabled {pointer-events: none; filter:grayscale(100); background-color:#f5f5f5;}
.lessonData .headerTable .selectButtonArea .vSelectButton {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 32px;
    font-size: 16px;
    color: #333333;
    font-family: VisangHT;
    font-weight: 700;
    cursor:pointer;
    background-image: url("../images/bg_lineSelectBtn.png");
}
.lessonData .headerTable .selectButtonArea .vSelectButton:hover {background-image:url("../images/bg_lineSelectBtn_over.png");}

.lessonData .dataTableWrap {width: 1168px; height:530px; margin:0 auto; overflow-y:auto; box-shadow: 0 -2px 2px rgba(0,0,0,0.1) inset; background-color:#ffffff;}
.lessonData .dataTableWrap table {border-collapse: collapse; border-spacing: 0;}
.lessonData .dataTableWrap table th {width:170px; font-size:16px; color:#333333; font-family:KoPubDotum; font-weight:700; border-right:solid 1px #cac8bb; border-bottom:solid 1px #cccccc; background-color:#fcfaea;}
.lessonData .dataTableWrap table td {border-bottom:solid 1px #cccccc;}
.lessonData .dataTableWrap table .detailItemCell {width:414px; border-right:solid 1px #cccccc;}
.lessonData .dataTableWrap table .detailItemCell .line {display:flex; height:40px; box-sizing:border-box; border-bottom:solid 1px #e5e5e5;}
.lessonData .dataTableWrap table .detailItemCell .line:last-child {border-bottom:0;}
.lessonData .dataTableWrap table .detailItemCell .line .detailTitle {display:flex; justify-content:center; align-items:center; flex:1; font-size:15px; color:#333333; font-family:KoPubDotum; font-weight:700; border-right:solid 1px #e5e5e5; box-sizing: border-box;}/**/
.lessonData .dataTableWrap table .detailItemCell .line .detailTitle span.small {font-size:13px;}
.lessonData .dataTableWrap table .detailItemCell .line .selectCell {display:flex; justify-content:center; align-items:center; width:48px; height:39px; background-color:#e7fcf6;}
.lessonData .dataTableWrap table .detailItemCell .line .selectCell .hSelectButton {width:42px; height:32px; background-image:url("../images/btnDown.png"); cursor:pointer;}
.lessonData .dataTableWrap table .detailItemCell .line .selectCell .hSelectButton:hover {background-image:url("../images/btnDown_over.png")}
.lessonData .dataTableWrap table .dataIconCell .line {display:flex; border-bottom:solid 1px #e5e5e5; box-sizing: border-box;}
.lessonData .dataTableWrap table .dataIconCell .line:last-child {border-bottom:0;}
.lessonData .dataTableWrap table .dataIconCell .line .iconCell {display:flex; justify-content:center; align-items:center; width:96px; height:39px; box-sizing: border-box; border-right:solid 1px #e5e5e5;}
.lessonData .dataTableWrap table .dataIconCell .line .iconCell.disabled {filter:grayscale(100); pointer-events: none;}
.lessonData .dataTableWrap table:last-child {margin-bottom:20px;}/**/



/*
    *** 메세지창
*/
.messageWrap {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
.messageWrap .btnCloseWin {position:absolute; top:10px; right:10px; cursor:pointer;}
.messageWin {
    position: absolute;
    top:50%;
    left:50%;
    border-radius: 10px;
    border: solid 4px #a6b34c;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    background-color: #ffffff;
}
.messageWin .innerWrap {width:100%; height:100%; display:flex; justify-content: center; align-items: center;}
.messageWin .winButton {width:140px; margin:0 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.6);}
.messageWin .message {font-size:16px; color:#333333; font-family:KoPubDotum; font-weight:700; text-align:center; margin-bottom:25px;}

/*컨펌*/
.messageWin.confirm {
    margin-top:-55px;
    margin-left:-200px;
    width: 400px;
    height: 110px;
}

/*얼럿*/
.messageWin.alert .innerWrap {flex-direction: column;}
.messageWin.alert {
    margin-top:-90px;
    margin-left:-150px;
    width: 300px;
    height: 180px;

}

/*프로그레스*/
.messageWin.progress .innerWrap {flex-direction: column;}
.messageWin.progress {
    margin-top:-55px;
    margin-left:-200px;
    width: 400px;
    height: 110px;
}
.messageWin.progress .message {margin-bottom:20px;}







