@charset "utf-8";

*,
body {
    margin: 0;
    padding: 0;
}

/*#wrap>div { border: 1px solid red; }*/

#wrap {
    position: relative;
    width: 1920px;
}

/*헤더*/
.page_header {
    height: 60px;
    background: #111111;
    font-size: 0;
    padding: 0 40px;
    overflow: hidden;
}

.page_header:after {
    content: "";
    display: block;
    clear: both;
}

.page_header>h2 {
    color: #fff;
    background: url(../img/ico_header.png) 0px center no-repeat;
    padding: 20px 0;
    padding-left: 43px;
    float: left;
    font-size: 18px;
}

.page_header>h2 strong {
    font-weight: 700;
}

.page_header>div {
    float: right;
}

.page_header button:not(.info) {
    color: #888888;
    padding: 21px 63px;
    font-size: 16px;
    border-left: 1px solid #333;
    letter-spacing: -.5px;
}

.page_header button:not(.info):last-child {
    border-right: 1px solid #333;
}

.page_header button:not(.info).active {
    background: #333333;
    color: #fff;
    font-weight: 700;
}

.page_header button:not(.info).active:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #ffd402;
    vertical-align: top;
    margin-left: 6px;
    position: absolute;
}

.page_header button.info {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    padding: 19px 30px;
    background: url(../img/ico_info.png) 4px center no-repeat;
}

/**/
#page_home {
    height: calc(1080px - 60px);
    background: url(../img/homebg.png) 0 0 no-repeat;
    position: relative;
}

#page_home>h1 {
    font-size: 60px;
    letter-spacing: -.8px;
    color: #fff;
    font-weight: 100;
    position: absolute;
    top: 405px;
    left: calc(50% - 352px);
}

#page_home>h1 strong {
    font-weight: 900;
}

#page_home>p {
    font-size: 22px;
    letter-spacing: -.5px;
    color: #fff;
    position: absolute;
    top: 500px;
    left: calc(50% - 116.5px);
}

#page_home>button {
    font-size: 22px;
    font-weight: 700;
    padding: 17px 109px;
    background: #ffd400;
    position: absolute;
    top: 729px;
    left: calc(50% - 150px);
    letter-spacing: -.5px;
    border-radius: 30px;
}






/**/
#page_main {
    height: calc(1080px - 60px);
    background: #f6f6f6;
    padding: 30px 160px;
    overflow-y: scroll;
}

#page_main>ol>li>h3 {
    background: #fff;
    font-size: 22px;
    letter-spacing: -.5px;
    padding: 26px 22px;
    border-top: 2px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    font-weight: 700;
    position: relative;
    cursor: pointer;
}
#page_main>ol>li>h3>button{
    width: 28px;
    height: 28px;
    position: absolute;
    background: url(../img/btn_go.png) 0 0 no-repeat;
    top: calc(50% - 14px);
    margin-left: 10px;
}
#page_main>ol>li>h3.on {
    background: #ffd402;
}

#page_main>ol>li>h3.on:after {
    transform: rotate(180deg);
}

#page_main>ol>li+li {
    margin-top: 8px;
}

#page_main>ol>li>h3:after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(../img/ico_arrow.png) 0 0 no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 22px;
    top: calc(50% - 7px);
}

#page_main>ol>li>ol {
    background: #e5e5e5;
}

#page_main>ol>li>ol>li>h4 {
    font-size: 20px;
    padding: 18px 50px;
    letter-spacing: -.5px;
    position: relative;
    font-weight: 700;
    cursor: pointer;
}

#page_main>ol>li>ol>li>h4.on {
    background: #dddddd;
}

#page_main>ol>li>ol>li>h4.on:after {
    transform: rotate(180deg);
}

#page_main>ol>li>ol>li>h4:after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(../img/ico_arrow.png) 0 0 no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 50px;
    top: calc(50% - 7px);
}

#page_main>ol>li>ol>li>ol {
    background: #cccccc;
}

#page_main>ol>li>ol>li>ol>li>h5 {
    font-size: 18px;
    padding: 18px 70px;
    letter-spacing: -.5px;
    position: relative;
    cursor: pointer;
}

#page_main>ol>li>ol>li>ol>li>h5:after,
#page_main>ol>li>ol>li>ol>li>h5:before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #000000;
    position: absolute;
    right: 70px;
    top: calc(50% - 8px);
}

#page_main>ol>li>ol>li>ol>li>h5:after {
    transform: rotate(90deg);
}

#page_main>ol>li>ol>li>ol>li>h5.on:before {
    display: none;
}

#page_main>ol>li>ol>li>ol>li>div {
    background: #aaaaaa;
    padding: 20px 70px;
}

#page_main>ol>li>ol>li>ol>li>div dl {
    position: relative;
    border: 3px solid transparent;
    display: inline-table;
    vertical-align: middle;
}

#page_main>ol>li>ol>li>ol>li>div dl+dl {
    margin-left: 17px;
}

#page_main>ol>li>ol>li>ol>li>div dl dt {
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

#page_main>ol>li>ol>li>ol>li>div dl dt button {
    background: #222222;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 14px;
    letter-spacing: -.5px;
    display: none;
}

#page_main>ol>li>ol>li>ol>li>div dl:after {
    content: "";
    display: block;
    clear: both;
}

#page_main>ol>li>ol>li>ol>li>div dd {
    float: left;
    position: relative;
    overflow: hidden;
}

#page_main>ol>li>ol>li>ol>li>div dd img {
    display: block;
    width: 155px;
    height: 200px;
}

#page_main>ol>li>ol>li>ol>li>div dd span {
    position: absolute;
    bottom: -40px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    width: 80px;
    height: 80px;
    text-align: center;
    left: calc(50% - 40px);
    border-radius: 100%;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    line-height: 40px;
}

#page_main>ol>li>ol>li>ol>li>div dl:hover {
    border-color: #ffd402;
}

#page_main>ol>li>ol>li>ol>li>div dl:hover dd span {
    background: #ffd402;
    color: #222;
}

#page_main>ol>li>ol>li>ol>li>div dl:hover dt button {
    display: block;
}

/**/

#page_pds {
    height: calc(1080px - 60px);
    background: #f6f6f6;
}

#bar_tab {
    background: #333333;
}

#bar_tab>div:nth-of-type(1) {
    height: 100px;
    line-height: 100px;
    overflow: hidden;
    width: 1600px;
    margin: 0 auto;
}

#bar_tab>div:nth-of-type(1):after {
    content: "";
    display: block;
    clear: both;
}

#bar_tab>div:nth-of-type(1)>div {
    float: left;
}

#bar_tab>div:nth-of-type(1)>div>h3 {
    color: #ffffff;
    font-weight: 700;
    font-size: 30px;
    display: inline-block;
}

#bar_tab>div:nth-of-type(1)>div .btn_download {
    height: 28px;
    background: url(../img/ico_download.png) 0 0 no-repeat;
    vertical-align: sub;
    margin-left: 20px;
}
#bar_tab>div:nth-of-type(1)>div .btn_download:after {
    content: "대단원 전체 다운로드";
    font-size: 18px;
    padding-left: 38px;
    font-weight: 700;
    color: #fff;
}

#bar_tab #m1 {
    float: right;
    font-size: 0;
}

#bar_tab #m1>li {
    display: inline-block;
}

#bar_tab #m1>li+li {
    margin-left: 10px;
}

#bar_tab #m1>li>button {
    font-size: 22px;
    width: 50px;
    height: 50px;
    background: #101010;
    font-weight: 900;
    color: #666666;
    border-radius: 100%;
}

#bar_tab #m1>li>button.on {
    background: #ffd402;
    color: #222222;
}
#bar_tab>div:nth-of-type(2){
    border-bottom: 10px solid #ffd402;
}
#bar_tab #m2 {
    width: 1600px;
    margin: 0 auto;
    font-size: 0;
}

#bar_tab #m2>li {
    display: inline-block;
    width: 200px;
    background: #666666;
    text-align: center;
    border-right: 1px solid #333333;
}

#bar_tab #m2>li:last-child {
    border-right: 0;
}

#bar_tab #m2>li>button {
    font-size: 22px;
    color: #aaaaaa;
    font-weight: 900;
    width: 100%;
    padding: 13px 0;
}

#bar_tab #m2>li>button.on {
    background: #ffd402;
    color: #222222;
}

#bar_title {
    background: #fff;
    padding: 33px 0 67px;
}

#bar_title>div {
    width: 1600px;
    margin: 0 auto;
}

#bar_title>div:after {
    content: "";
    display: block;
    clear: both;
}

#bar_title>div>div {
    float: left;
}

#bar_title>div>div .btn_download {
    height: 28px;
    background: url(../img/ico_download2.png) 0 0 no-repeat;
    margin: 11px 0 11px 18px;
}

#bar_title>div>div .btn_download:after {
    content: "중단원 전체 다운로드";
    font-size: 14px;
    padding-left: 38px;
    font-weight: 700;
}

#bar_title>div>div h4 {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -.5px;
    float: left;
}

#bar_title>div>select {
    float: right;
    width: 420px;
    height: 50px;
    font-size: 16px;
    border: 1px solid #e5e5e5;
    background-color: #f6f6f6;
    font-family: "NanumGothic", serif;
}
#bar_title>div>select>option{
    font-size: 14px;
    font-family: "NanumGothic", serif;
}

#bar_type {
    width: 1600px;
    margin: -26px auto 0;
}

#bar_type>ul:after {
    content: "";
    display: block;
    clear: both;
}

#bar_type>ul>li {
    float: left;
    border-left: 1px solid #dddddd;
    width:20%;
}
#bar_type>ul>li:first-child:nth-last-child(5),#bar_type>ul>li:first-child:nth-last-child(5) ~ li { width:20% } 
#bar_type>ul>li:first-child:nth-last-child(6),#bar_type>ul>li:first-child:nth-last-child(6) ~ li { width:16.66666% } 


#bar_type>ul>li:first-child {
    border-left: 0;
}

#bar_type>ul>li>button {
    width: 100%;
    line-height: 58px;
    height: 58px;
    font-size: 18px;
    background: #eeeeee;
}

#bar_type>ul>li>button.on {
    background: #ffd402;
    font-weight: 700;
    position: relative;
}

#bar_type>ul>li>button.on:after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #ffd402 transparent transparent transparent;
}

#file_list {
    width: 1600px;
    margin: 20px auto 0;
    background: #fff;
    height: 635px;
    overflow-y: scroll;
}

#file_list>dl {
    border-top: 2px solid #222222;
    display: table;
    width: 100%;
}

#file_list>dl dt {
    display: table-cell;
    border: 1px solid #e5e5e5;
    vertical-align: top;
    width: 670px;
    padding: 20px 30px 20px;
}

#file_list>dl dt h5 {
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
}

#file_list>dl dt p {
    float: right;
}

#file_list>dl dt p span {
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-right: 10px;
}

#file_list>dl dt .btn_download {
    width: 28px;
    height: 28px;
    background: url(../img/ico_download2.png) 0 0 no-repeat;
    vertical-align: middle;
}

#file_list>dl dd {
    border: 1px solid #e5e5e5;
    padding: 10px 0 12px 30px;
    margin-left: -1px;
    margin-bottom: -1px;
}

#file_list>dl dd .btn_download {
    width: 28px;
    height: 28px;
    background: url(../img/ico_download2.png) 0 0 no-repeat;
    margin-left: 30px;
}

#file_list>dl dd .btn_download:hover {
    background-position-y: -28px;
}

#file_list>dl dd .type_pdf {
    width: 40px;
    height: 40px;
    background: url(../img/ico_pdf.png) 0 0 no-repeat;
}

#file_list>dl dd .type_hwp {
    width: 40px;
    height: 40px;
    background: url(../img/ico_hwp.png) 0 0 no-repeat;
}

#file_list>dl dd .type_ppt, #file_list>dl dd .type_pptx {
    width: 40px;
    height: 40px;
    background: url(../img/ico_ppt.png) 0 0 no-repeat;
}

#file_list>dl dd .type_zip {
    width: 40px;
    height: 40px;
    background: url(../img/ico_zip.png) 0 0 no-repeat;
}

#file_list>dl dd .type_video,
#file_list>dl dd .type_img {
    width: 180px;
    height: 120px;
    background: #ccc;
}

#file_list>dl dd .type_video>button,
#file_list>dl dd .type_img>button {
    width: 100%;
    height: 100%;
    position: relative;
}

#file_list>dl dd .type_video>button:after,
#file_list>dl dd .type_img>button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#file_list>dl dd .type_img>button:after {
    background: rgba(0, 0, 0, 0.2) url(../img/ico_preview1.png) center center no-repeat;
}

#file_list>dl dd .type_video>button:after {
    background: rgba(0, 0, 0, 0.2) url(../img/ico_preview2.png) center center no-repeat;
}

#file_list>dl dd .type_img>button:hover:after {
    background: rgba(0, 0, 0, 0.8) url(../img/ico_preview1h.png) center center no-repeat;
}

#file_list>dl dd .type_video>button:hover:after {
    background: rgba(0, 0, 0, 0.8) url(../img/ico_preview2h.png) center center no-repeat;
}

#file_list>dl dd table {
    width: 100%;
}

#file_list>dl dd table td {
    vertical-align: middle;
}

#file_list>dl dd table td:nth-of-type(2) {
    display: inline-block;
    float: right;
    margin-right: 20px;
}

#file_list>dl dd table td:nth-of-type(3) {
    width: 88px;
    border-left: 1px solid #e5e5e5;
}


#ebook {
    position: relative;
    width: 1920px;
    height: 1080px;
    background: #444444;
    overflow: hidden;
}

/*펜쓰기*/
.canvasContainer {	
	display:none;
    /*background: rgba(255,255,0,0.5);*/
    z-index:900;
}
.canvasContainer canvas {
	display: inline-block;
	/*background: rgba(255,255,0,0.5);*/
}
/**/
#ebook_palette{
    display:none;
	position: absolute;
    right: 11px;
    width: 110px;
    top: 80px;
    z-index: 21;
}
#ebook_palette>li{
    color: #fff;
    width: 100%;
    line-height: 40px;
    background: rgba(0,0,0,0.8);
    border-radius: 25px;
    font-size: 14px;
    letter-spacing: -.5px;
    text-align: center;
    position: relative;
    padding-left: 32px;
    cursor: pointer;
}
#ebook_palette>li+li{
    margin-top: 5px;
}
#ebook_palette>li:hover{
    color: #ffd402;
}
#ebook_palette>li>em{
    display: inline-block;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 100%;
    vertical-align: middle;
    position: absolute;
    left: 3px;
    top: 50%;
    margin-top: -17px;
    background-repeat: no-repeat;
    background-position: center center;
}
#ebook_palette>li>ul{
    position: absolute;
    right: calc(100% + 20px);
    top: calc(50% - 30px);
    background: #fff;
    display: none;
    color: #222;
    box-shadow: -5px 5px 12px rgba(0,0,0,0.2);
    cursor: default;
    font-size: 0;
    line-height: normal;
    padding: 10px 13px;
}

#ebook_palette>li>ul:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}
#ebook_palette>li.on>ul{
    display: block;
}
#ebook_palette>li.on{
    background: #ffd402;
    color: #111111;
}
#ebook_palette>li:nth-of-type(3)>em{
    background-image: url(../img/ebook/ico_eraser.png);
}
#ebook_palette>li:nth-of-type(4)>em{
    background-image: url(../img/ebook/ico_trash.png);
}
#ebook_palette>li:nth-of-type(5)>em{
    background-image: url(../img/ebook/ico_palclose.png);
}
#ebook_palette>li>ul>li{
    width: 34px;
    height: 34px;
    display: inline-block;
    border: 1px solid #e5e5e5;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
}
#ebook_palette>li>ul>li+li{
    margin-left: 13px;
}






#ebook_palette>li.pen_width>ul{
    width: 162px;
}
#ebook_palette>li.pen_width>em:before,#ebook_palette>li.pen_width>ul>li:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #ff0000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#ebook_palette>li.pen_width>em.w1:before,#ebook_palette>li.pen_width>ul>li.w1:before{
    width: 4px;
    height: 4px;   
}
#ebook_palette>li.pen_width>em.w2:before,#ebook_palette>li.pen_width>ul>li.w2:before{
    width: 10px;
    height: 10px;   
}
#ebook_palette>li.pen_width>em.w3:before,#ebook_palette>li.pen_width>ul>li.w3:before{
    width: 16px;
    height: 16px;   
}
#ebook_palette>li.pen_width>ul>li.active,#ebook_palette>li.pen_width>ul>li:hover{
    background: #e5e5e5;
}



#ebook_palette>li.pen_color>ul{
    width: 285px;
}
#ebook_palette>li.pen_color>ul>li+li{
    margin-left: 10px;
}
#ebook_palette>li.pen_color>em:before,#ebook_palette>li.pen_color>ul>li:before{
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background-color: #000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#ebook_palette>li.pen_color>em.c1:before,#ebook_palette>li.pen_color>ul>li.c1:before{
    background-color: #000000;
}
#ebook_palette>li.pen_color>em.c2:before,#ebook_palette>li.pen_color>ul>li.c2:before{
    background-color: #ff0000;
}
#ebook_palette>li.pen_color>em.c3:before,#ebook_palette>li.pen_color>ul>li.c3:before{
    background-color: #ffaa00;
}
#ebook_palette>li.pen_color>em.c4:before,#ebook_palette>li.pen_color>ul>li.c4:before{
    background-color: #24b36b;
}
#ebook_palette>li.pen_color>em.c5:before,#ebook_palette>li.pen_color>ul>li.c5:before{
    background-color: #2e6be6;
}
#ebook_palette>li.pen_color>em.c6:before,#ebook_palette>li.pen_color>ul>li.c6:before{
    background-color: #8a2ee6;
}
#ebook_palette>li.pen_color>ul>li.active:before{
    background-image: url(../img/ebook/ico_penActive.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}


/**/
#ebook_tools {
    position: absolute;
    right: 0;
    width: 120px;
    background: rgba(0, 0, 0, 0.6);
    top: 325px;
    z-index: 1;
    right:-120px;
}

#ebook_tools>button{
	width: 101px;
    height: 60px;
    background: url(../img/quickbg.png) 0 0 no-repeat;
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: -80px;
    top: 20px;
    transform: rotate(-90deg);
    text-align: center;
    line-height: 70px;
    cursor: pointer;
	font-size: 16px;
    font-weight: 700;
}
#ebook_tools ul {
    position: relative;
    border-top: 10px solid #ffd402;
}

#ebook_tools li {
    text-align: center;
    padding: 0 20px;
}

#ebook_tools li:hover {
    background: #000000;
}

#ebook_tools li button {
    padding: 20px 0;
    border-bottom: 2px solid #444444;
}

#ebook_tools li button:focus {
    outline: none;
}

#ebook_tools li span {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    letter-spacing: -.5px;
}

#ebook_tools li:last-child {
    padding: 20px;
}

#ebook_tools li input {
    width: 100%;
    height: 35px;
    text-align: center;
}

#ebook_tools li input~button {
    width: 100%;
    padding: 10px 0;
    background: #666666;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin-top: 4px;
}

#ebook_tools li button#btn_pen p {
    display: inline-block;
    width: 28px;
    height: 32px;
    background: url(../img/ico_pen.png) 0 0 no-repeat;
}
#ebook_tools li button#btn_pen.on p {
    background-position-y: -32px;
}

#ebook_tools li button#btn_pen.on span {
    color: #ffd402;
    position: relative;
}

#ebook_tools li button#btn_pen.on span:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #ffd402;
    left: -15px;
    top: -6px;
}
#ebook_tools li button#btn_viewtype p {
    display: inline-block;
    width: 45px;
    height: 28px;
    background: url(../img/ico_viewFull.png) 0 0 no-repeat;
}
#ebook_tools li button#btn_viewtype.on p {
    background-position-y: -28px;
}

#ebook_tools li button#btn_mirroring{display:none;}
#ebook_tools li button#btn_mirroring p {
    display: inline-block;
    width: 40px;
    height: 31px;
    background: url(../img/ico_mirroring.png) 0 0 no-repeat;
}

/**/
#lnb_title {
    background: #f5ab18;
    position: relative;
}

#lnb_title.bookmark {
    background: #ffd402;
}

#lnb_title h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.5px;
    padding: 61px 0 61px 30px;
}

#lnb_title.bookmark h2 {
    color: #222222;
}

#lnb_title>button {
    position: absolute;
    right: -85px;
    top: 0;
    width: 85px;
    height: 85px;
    background-position: center center;
    background-repeat: no-repeat;
}

#lnb_title>button:nth-of-type(1) {
    /*리스트*/
    background-color: #f5ab18;
    background-image: url(../img/ebook/ico_lnbList.png);
}

#lnb_title>button:nth-of-type(2) {
    /*북마크*/
    top: 85px;
    background-color: #ffd402;
    background-image: url(../img/ebook/ico_lnbBookmark.png);
}

#lnb_title>em {
    /**/
    position: absolute;
    cursor: pointer;
    right: 28px;
    top: 26px;
    background: url(../img/ebook/lnb_close.png) right center no-repeat;
    width: 34px;
    height: 34px;
}



/**/
#ebook_lnb {
    display: block;
    position: absolute;
    left: -600px;
    width: 600px;
    background: #fff;
    height: 100%;
    box-shadow: 13px 17px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

#ebook_lnb>ol,
#ebook_lnb>ul {
    position: absolute;
    width: 100%;
}

/*lnb list*/
#ebook_lnb>ol>li>h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    border-bottom: 1px solid #e5e5e5;
    padding: 27px 30px;
    position: relative;
    cursor: pointer;
}
#ebook_lnb>ol>li>h3>button{
    width: 28px;
    height: 28px;
    position: absolute;
    background: url(../img/btn_go.png) 0 0 no-repeat;
    top: calc(50% - 14px);
    margin-left: 10px;
}
#ebook_lnb>ol>li>h3:after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(../img/ico_arrow.png) 0 0 no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 22px;
    top: calc(50% - 7px);
}

#ebook_lnb>ol>li>h3.on:after {
    transform: rotate(180deg);
}

#ebook_lnb>ol>li>ol {
    background: #f6f6f6;
}

#ebook_lnb>ol>li>ol>li>h4 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
    padding: 14px 30px;
    position: relative;
    cursor: pointer;
}

#ebook_lnb>ol>li>ol>li>h4:after,
#ebook_lnb ol>li>ol>li>h4:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 19px;
    background: #000000;
    position: absolute;
    right: 30px;
    top: calc(50% - 9.5px);
}

#ebook_lnb>ol>li>ol>li>h4:after {
    transform: rotate(90deg);
}

#ebook_lnb>ol>li>ol>li>h4.on:before {
    display: none;
}

#ebook_lnb>ol>li>ol>li>ol {
    background: #eeeeee;
}

#ebook_lnb>ol>li>ol>li>ol>li>button {
    font-size: 18px;
    padding: 17px 68px;
    width: 100%;
    text-align: left;
    position: relative;
}
#ebook_lnb>ol>li>ol>li>ol>li>button.on{
    color: #f53131;
    font-weight: 600;
}
#ebook_lnb>ol>li>ol>li>ol>li>button.on:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #f53131;
    vertical-align: top;
    margin-left: 6px;
    position: absolute;
}

#ebook_lnb>ol {
    display: block;
}


/*lnb bookmark*/
#ebook_lnb>ul {
    display: none;
    padding: 30px;
}

#ebook_lnb>ul:after {
    content: "";
    display: block;
    clear: both;
}

#ebook_lnb>ul>li {
    float: left;
    width: 125px;
    height: 165px;
    border: 1px solid #e5e5e5;
    margin-right: 9px;
    position: relative;
}

#ebook_lnb>ul>li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);

}

#ebook_lnb>ul>li:nth-child(4n) {
    margin-right: 0;
}

#ebook_lnb>ul>li+li+li+li+li {
    margin-top: 10px;
}

#ebook_lnb>ul>li>p {
    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>ul>li>button {
    position: absolute;
    width: 34px;
    height: 34px;
    right: 5px;
    top: 5px;
    background: url(../img/ebook/bookmark_del.png) 0 0 no-repeat;
    z-index: 1;
}

#ebook_lnb>ul>li button:hover {
    background-position-y: -34px;
}

#ebook_lnb>ul>li:hover {
    border: 1px solid #ffd402;
}

#ebook_lnb>ul>li:hover:before {
    background: rgba(255, 212, 2, 0.8);
    border: 2px solid #ffd402;
}




/**/

#thumb_title {
    position: absolute;
    display: block;
    width: 480px;
    background: #333333;
	display : none;
	
    /**/
    top: -144px;
    left: 43px;
    z-index: 2;
}

#thumb_title:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 10px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #333 transparent transparent #333;
}

#thumb_title h3 {
    background: #111111;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    padding: 16px 23px;
}

#thumb_title h4 {
    font-size: 16px;
    color: #cccccc;
    letter-spacing: -.5px;
    padding: 14px 25px;
    border-bottom: 1px solid #555555;
}

#thumb_title h5 {
    font-size: 16px;
    color: #cccccc;
    letter-spacing: -.5px;
    padding: 14px 55px;
}

/**/
#ebook #btn_close {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6) url(../img/ico_close.png) center center no-repeat;
    position: absolute;
    right: 0;
    top: 0;
	z-index: 1;
}

/**/

#navigator {
    position: absolute;
    left: 50%;
    top: 96%;
    height: 30px;
    width: 1536px;
    z-index: 22;
    overflow: visible;
    margin-left: -768px;
}

#pointer_area {
    position: absolute;
    left: 0;
    top: -30px;
    height: 80px;
    width: 100%;
    z-index: 151;
    touch-action: none; 
	opacity : 0.5;
}

#navigator>span {
    display: none;
}


/* width : 1536px를 #pointer width:120px 값을 뺌 (   */
#progress {
    position: relative;
    float: left;
	left : 60px;
    top: 15px;
    width: 1416px;
    height: 10px;
    background-color: transparent;
}

#pointer {
    position: relative;
    display: block;
    background-color: #ffd402;
    width: 120px;
    height: 120px;
	margin-left : -60px;
    border-radius: 100%;
    top: -36px;
    left: 12.5%;
}

#pointer:before {
    content: attr(data-content);
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 78px;
    height: 100%;
}

#thumbnail {
    position: absolute;
    left: 50%;
    margin-left: -150px;
	width: 300px;
    height: 200px;
    border: 6px solid #ffd402;
    display: none;
    box-shadow: rgba(0, 0, 0, 40%) 0 0 15px;
    bottom: 100px;
    z-index: -1;
}

#thumbnail>img {
    float: left;
    vertical-align: middle;
    line-height: normal;
    width: 144px;
    height: 188px;
	margin : 0;
}

/*
#thumbnail>img+img {
    border-left: 1px solid #e5e5e5;
}
*/

#thumbnail>p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table;
}

#thumbnail>p>span {
    display: block;
    width: 50%;
    text-align: center;
    font-size: 50px;
    line-height: 100%;
    vertical-align: middle;
    display: table-cell;
    font-weight: 900;
    color: #222;
    background: rgba(255, 255, 255, 0.3);
}

#page_num {
    display: none;
}


/**/

#ebook_pages {
    position: relative;
    left: 50%;
    margin-left: -768px;
    top: 40px;
    width: 1536px;
    height: 1000px;
    z-index: 1;
    /*display: none;*/
    touch-action: none;
}


/*  Button of Bookmark */
#btn_bookmark_L,
#btn_bookmark_R {
    position: absolute;
    z-index: 20;
    width: 40px;
    height: 50px;
    background: url(../img/ebook/ico_bookmark.png) 0 0 no-repeat;
    top: 40px;
}

#btn_bookmark_L.on,
#btn_bookmark_R.on {
    background-position-y: -50px;
}

#btn_bookmark_L {
    left: 233px;
}

#btn_bookmark_R {
    right: 233px;
}

/*Buttons of move*/
#btn_prev,
#btn_next {
    position: absolute;
    width: 30px;
    height: 100px;
    z-index: 90;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#btn_prev {
    left: 162px;
    background: rgba(0, 0, 0, 0.4) url(../img/ebook/ico_arrowLeft.png) center center no-repeat;
}

#btn_next {
    right: 162px;
    background: rgba(0, 0, 0, 0.4) url(../img/ebook/ico_arrowRight.png) center center no-repeat;
}


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

#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/ebook/shadow_pageLeft_edge.png") right top repeat-y;
}

#this_right>div,
#next_right>div {
    opacity: 0.3;
    background: url("../img/ebook/shadow_pageRight_edge.png") left top repeat-y;
}

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

#next_left>div:first-child {
    opacity: 0.3;
    background: url("../img/ebook/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/ebook/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/ebook/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/ebook/book_edge_R.png") no-repeat;
    position: absolute;
    left: 100%;
    top: 0;
    background-size: cover;
    width: 30px;
	height:100%;
}

/*icons*/

#icons_left{
	left: 0;
	width: 50%;
}
#icons_right{
	right: 0;
	width: 50%;
}
#icons_left>button,#icons_right>button {
	position: absolute;
	z-index: 100;	
	width: 20px; /* 아이콘 사이즈 줄여달라는 요청으로 35px >> 20px로 조정 */
	height: 20px;
	margin : 7px 0 0 7px;  /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */
	background-size: 100%;
}

/* 확대페이지 - 아이콘 사이즈 */
#icons_full {
	top : 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

#ebook_pages>div>div#full_bg button{
	z-index: 121;	
	position: absolute;
	width: 40px;
	height: 40px;
	margin : 15px 0 0 15px;  /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */
	background-size: 100%;
}

#ebook_pages>div#full_thumb {
	
	width : 120px;
	height : 165px;
	background : url("") 0 0 no-repeat;
	position : absolute;
	background-size : 100%;
	
	z-index : 12;
	right: -170px;
	top: 830px;
	background-color : white;
	padding: 0;
	display: none;
}

#ebook_pages>div#full_thumb>button {
	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/ebook/icons/viewImg.png) 0 0 no-repeat;
}
.icon_ani{
	background: url(../img/ebook/icons/animation.png) 0 0 no-repeat;
}
.icon_video{
	background: url(../img/ebook/icons/video.png) 0 0 no-repeat;
}
.icon_map{
	background: url(../img/ebook/icons/map.png) 0 0 no-repeat;
}
.icon_ppt{
	background: url(../img/ebook/icons/ppt.png) 0 0 no-repeat;
}
.icon_quiz{
	background: url(../img/ebook/icons/answer_on.png) 0 0 no-repeat;
}
.icon_intro{
	background: url(../img/ebook/icons/answer_on.png) 0 0 no-repeat;
}
.icon_add{
    background: url(../img/ebook/icons/supplement.png) 0 0 no-repeat;
}
.icon_eye{
    position: absolute;
    width: 35px;
    height: 35px;
    background: url(../img/ebook/icons/eye.png) 0 0 no-repeat;
    background-size: 100%;
}
.icon_eye.hidden{
    position: absolute;
    width: 35px;
    height: 35px;
    background: url(../img/ebook/icons/eye_off.png) 0 0 no-repeat;
    background-size: 100%;
}
.icon_sound{
    background: url(../img/ebook/icons/sound.png) 0 0 no-repeat;
}
.icon_sound.hidden{
    background: url(../img/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;}

/*popup*/

#popup{
	position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
#popup>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;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
#popup>div>header{
	background: #ffd402;
	padding: 26px;
}
#popup>div>header:after{
	content: "";
	display: block;
	clear: both;
}
#popup>div>header>h4{
	color: #333333;
    font-size: 22px;
    font-weight: 700;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    width: calc(100% - 40px);
    overflow: hidden;
}
#popup>div>header>button{
	background: url(../img/ico_popclose.png) 0 0 no-repeat;
	width: 22px;
	height: 22px;
	float: right;
	vertical-align: middle;
}
#popup>div>section{
	max-height: 945px;
	padding: 20px 30px;
	background: #fff;
    position: relative;
    max-width: 1860px;
}

#popup>div:not(.popmap)>footer{
    padding:0 40px 26px;
    text-align: center;
    font-size: 0;
}
#popup>div:not(.popmap)>footer button{
    width: 50%;
    display: inline-block;
    border: 1px solid #222222;
    letter-spacing: -.5px;
    font-size: 16px;
    padding: 19px 0;
}
#popup>div:not(.popmap)>footer button:last-child{
    border-color: #e5e5e5;
    background: #f6f6f6;
}

.pop_answer{
    position: absolute;
    display: none;
    font-family: "맑은고딕","Malgun Gothic",serif;
    font-size: 22px;
    line-height: 36px;
	color: red;
}
.pop_answer u{    
	color:#000;
}

/**/
#popup>.popcon>section>img,#popup>.popcon>section>video{
    width: 100%;
	outline:0;
}
#popup>.dialogue{
    width: 612px;
	min-width: 612px;
}
#popup>.dialogue>section{
    height: auto;
    overflow-y: auto;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: center;
    padding: 40px 30px;
    line-height: 1.5;
}


#popup>.downloading {
	width : 1000px;
	min-width : 1000px;
}

#popup>.downloading dl {
	height: 150px;
	margin: auto;
	position: relative; 
	margin: 0;
}
#popup>.downloading>section dt {
	position: relative;
    text-align: center;
	margin: auto;
	border: 1px solid gray;
	padding: 4px;
	margin: 40px 0 0 0;
}

#popup>div.downloading dt>span {
    padding: 0;
	margin: 0;
	width:50%;
	height: 50px;
	display: block;
	padding: 0;
	background-color: #8c3;
}

#popup>.downloading dt p {
	position: absolute;
	left :0;
	top: 0;
	width: 100%;
    font-size: 24px;
	font-weight: bold;
    text-align: center;
    padding: 10px;
	background-color: none;
}

#popup>.downloading>section dd {
    font-size: 20px;
    padding: 30px 0 0 50px;
	margin: 0;
}

/**/
#popup>.popmap{
    width: 1920px !important;
    height: 1080px;
}
#popup>.popmap:after{
    content: "";
    display: block;
    clear: both;
}

#popup>div.popmap>header{
	background: none;
    padding: 0;
}

#popup>.popmap>header>button{
    position: absolute;
    width: 60px;
    height: 60px;
    background: url(../img/ebook/popmap_close.png) 0 0 no-repeat;
    right: 0;
    top: 0;
    z-index: 1;
}
#popup>.popmap>section{
    height: 1080px;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: gray;
    width: 1860px;
    float: left;
    max-height: none;
	padding : 0;
	overflow: hidden;
}

#popup>.popmap>section>img{
	position: absolute;
	left: 0;
	top: 0;
}

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/ebook/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/ebook/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/ebook/ico_zoomIn.png) 0 0 no-repeat;
}

#popup>.popmap>footer>button#btn_zoomin.dimmed{
    background-position-y: -30px;
}

/**/
#ebook_pages>div.canvasContainer{
    z-index: 21;
    width: 1536px;
    height: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
	display : none;
}
#ebook_pages div.canvasContainer2 {
    z-index: 119;
    width: 1536px;
    height: 2000px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , 0%);
	display : none;
}

.canvasContainer>canvas {
	top : 0;
    width: 100% !important;
    height: 100% !important;
}

.canvasContainer2>canvas {
	top : 0;
    width: 1536px;
    height: 2000px;
}

#full_page { 
	background-color : white;
	width : 1554px;
	height : 1000px;
	overflow-y : auto;
	left : 0;
	top : 0;
	z-index : 111;
	display : none; 

}

#full_bg{ 
	background-image: url("");
	background-size: 100%;
	width : 1536px;
	height : 2000px;
	position : relative;
	z-index : 112;
}

/*intro 소단원 도입*/
#popup>div>section  ul.q_list li{position: relative;display: inline-block;margin-right:20px;font-size:20px;width:120px;height:40px;cursor: pointer;}
#popup>div>section  ul.q_list.w140 li{width:140px;}
#popup>div>section  ul.q_list.w150 li{width:150px;}
#popup>div>section  ul.q_list.w160 li{width:160px;}
#popup>div>section  ul.q_list.w180 li{width:180px;}
#popup>div>section  ul.q_list.w200 li{width:200px;}
#popup>div>section  ul.q_list.w250 li{width:250px;}
#popup>div>section  ul.q_list.w400 li{width:400px;}
#popup>div>section  ul.q_list li span:nth-child(1){ display: inline-block; width: 25px; height: 25px; margin: 0px 0px 0px 0px; vertical-align: bottom; background: url(../img/btn_check_radio.png) 1px 1px no-repeat; background-size: 120px 50px; cursor: pointer;}
.q_list >li.check_on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 24px;
  background: url(../img/check.png) no-repeat;
  background-size: 30px 24px;
}

/* imageSlide 관련 */
.imageSlideContainer {
    position: relative;
    text-align: center;
    margin: 0 auto;
}
.imageSlideContainer .imageSlidePrevBtn,
.imageSlideContainer .imageSlideNextBtn {
    position: absolute;
    top: 50%;
    width: 33px;
    height: 52px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    cursor: pointer;
}
.imageSlideContainer .imageSlidePrevBtn {
    left: 0;
    background: url(../img/ebook/prevBtn_icon.png) no-repeat;
    background-size: contain;
}
.imageSlideContainer .imageSlideNextBtn {
    right: -8px;
    background: url(../img/ebook/nextBtn_icon.png) no-repeat;
    background-size: contain;
}
.imageSlideContainer .imageSlidePrevBtn.dim,
.imageSlideContainer .imageSlideNextBtn.dim { opacity: 0.3; pointer-events: none; }

.imageSlideContainer .dots {
    display: inline-block;
}
.imageSlideContainer .slides {
    display: none;
    cursor: pointer;
    margin: auto;
}
.imageSlideContainer .dots > span {
    cursor: pointer;
    height: 25px;
    width: 25px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.imageSlideContainer .dots > span.active, .dots > span:hover {
      background-color: #333;
}